@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
.top-button, .middle-button, .bottom-button{
	display: none;
}


img {
	margin:auto;
	width:auto;
	height:auto;
	max-height: 500px;
	max-width: 500px;
}

.bottom-button {
	text-align:center;
}

/* ===== Work Info Table (light/dark, hover, responsive) ===== */
.info-table{
  --bg: #fff;
  --fg: #222;
  --muted: #666;
  --border: #e6e6e6;
  --row: #fafafa;
  --hover: #f3f7ff;
  --radius: 14px;

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  font-feature-settings: "palt";
}

.info-table caption{
  text-align: left;
  padding: .9rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg);
}

.info-table th,
.info-table td{
  padding: .9rem 1rem;
  vertical-align: top;
  line-height: 1.6;
}

.info-table th{
  width: 12rem;                 /* ラベル列を固定幅に */
  background: linear-gradient(180deg,#fbfbfb,#f4f6f8);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
  border-right: 1px solid var(--border);
}

.info-table td{
  background: var(--row);
  font-weight: 500;
}

.info-table tbody tr + tr th,
.info-table tbody tr + tr td{
  border-top: 1px solid var(--border);
}

.info-table tbody tr:hover th,
.info-table tbody tr:hover td{
  background: var(--hover);
}

/* 値の中の長い文字列対策 */
.info-table td{
  word-break: break-word;
}

/* --- スマホ最適化（2カラムのまま読みやすく） --- */
@media (max-width: 640px){
  .info-table{
    font-size: .95rem;
  }
  .info-table th{ width: 8.5rem; padding: .75rem .85rem; }
  .info-table td{ padding: .75rem .85rem; }
}

/* --- さらに狭い画面では行をカード風に積む（任意） --- */
/* もし“縦積み”にしたい場合は下のコメントアウトを有効化
@media (max-width: 480px){
  .work-info-table{
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .work-info-table tbody{ display: grid; gap: .8rem; }
  .work-info-table tr{
    display: grid;
    grid-template-columns: 9rem 1fr;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .work-info-table tr:hover{ background: var(--hover); }
  .work-info-table th,
  .work-info-table td{
    border: 0 !important;
    background: transparent;
  }
  .work-info-table th{ border-right: 1px solid var(--border) !important; }
}
*/

/* 人気記事カード */
.pps-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pps-item .pps-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pps-item .pps-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.pps-thumb-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f4f6;
}
.pps-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pps-title {
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 12px 12px;
  color: inherit;
}
.pps-no-thumb .pps-title { padding: 14px 12px; }

/* 人気記事カード */
.pps-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pps-item .pps-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pps-item .pps-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.pps-thumb-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f3f4f6;
}
.pps-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pps-title {
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 12px 12px;
  color: inherit;
}
.pps-no-thumb .pps-title { padding: 14px 12px; }

/* CTAボタン行 */
.cta-row{margin:1rem 0 .25rem;text-align: center;}
.cta-row.multi{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* CTAボタン共通 */
.cta-btn{
    display:inline-block; min-width:240px; text-align:center;
    padding:.9rem 1.25rem; border-radius:999px; font-weight:800;
    color:#fff; text-decoration:none; letter-spacing:.02em;
    box-shadow:0 8px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.15);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
    will-change:transform;
}
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.16) }
.cta-btn:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(0,0,0,.12) }

/* FANZA */
.cta-btn--fanza{
    background:linear-gradient(180deg, #ff5c5c 0%, #e63838 100%);
    border:1px solid #d62d2d;
    text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.cta-btn--fanza:hover{ filter:saturate(1.05) }

/* DLsite */
.cta-btn--dlsite{
    background:linear-gradient(180deg, #4aa3ff 0%, #1e79e7 100%);
    border:1px solid #1a67c7;
    text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.cta-btn--dlsite:hover{ filter:saturate(1.05) }

/* これをメインCSSの一番後ろに置く */
.force-mobile .total-score-thumb{
  width:100%; max-width:100%; height:auto;
}
.force-mobile .article-card{
  flex-direction:column; width:100%;
}
.force-mobile .article-card__thumb{
  width:100%; aspect-ratio:16/9; height:auto;
}
.force-mobile .cta-btn{
  min-width:0; width:100%; box-sizing:border-box;
}


/* =========================
   スマホサイズ用（見切れ防止・最適化）
   ========================= */
@media (max-width:640px){
    /* サムネ幅いっぱい */
    .total-score-thumb{
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* 記事カードは縦積み＆幅いっぱい */
    .article-card{
        flex-direction: column;
        width: 100%;
    }

    /* 記事カード内のサムネ幅いっぱい */
    .article-card__thumb{
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
    }

    /* ボタン幅いっぱい・min-width解除 */
    .cta-btn{
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/*フローティングノン*/
.floating-banner {
  display: none;
}

.ext-link-card {
	padding-bottom: 0.8em;
	padding-left:0.8em;
	padding-right:0.8em;
}

/*ウィンドウ幅1635px以上のフローティングバナー*/
@media (min-width: 1635px){
  .floating-banner {
	display: block;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    margin-bottom: 0;
    right: 50%;
    margin-right: 650px;
	margin-left: 10px;
    width: auto;
    }
  .floating-banner .p-blogParts{
	margin:0;
	}
  .floating-banner .wp-block-columns{
	display:block !important;
	}
  .floating-banner .wp-block-image{
	padding-bottom: 10px;
	}
  .floating-banner .swell-block-button{
	padding-bottom: 15px;
	}

  .floating-banner p{
	margin-bottom: -1em;
	}

}

@media (max-width: 1635px){
   .floating-banner{
	display:none;	
	}
}

/* モバイル幅（例: 768px以下）の場合 */
@media (max-width: 768px) {
  .floating-banner {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7); /* 黒の半透明 */
    text-align: center;
    padding: 0;
  }

  /* 画像は非表示 */
  .floating-banner img {
    display: none;
  }

  /* ボタンは幅いっぱいに */
  .floating-banner .swell-block-button {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
}