/* サービス詳細ページの固有部品。4人で共有。自分の追記はページ名の見出しコメントの下にまとめる。他人の行は消さない */

/* service-ad・service-line・service-btob（集客系3ページ） */
/* 支援内容：画像つきの2列 */
.features.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; }
.feature .case-img { margin-bottom: 24px; }
/* 資料ダウンロードの面（画像＋文＋ボタン） */
.dl-panel { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 48px; background: var(--paper); border-radius: var(--radius); text-decoration: none; }
.textured .dl-panel { background: var(--white); }
.dl-panel .dl-img { border-radius: var(--radius); overflow: hidden; }
.dl-panel .dl-img img { display: block; width: 100%; height: auto; }
.dl-panel .en-label { font-family: var(--font-en); font-size: var(--fs-s); font-weight: 500; color: var(--muted); }
.dl-panel h3 { margin-top: 8px; font-size: var(--fs-l); font-weight: 600; }
.dl-panel p { margin-top: 10px; font-size: var(--fs-s); color: var(--ink-2); }
.dl-panel .btn { margin-top: 24px; }
/* 事例：2件だけ並べる・横長の事例を縦に重ねる */
.cases.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cases.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 40px 32px; }
.case-row + .case-row { margin-top: 72px; }
/* 料金表が2つある節の小見出し */
.plan-sub { margin: 64px 0 20px; font-size: var(--fs-l); font-weight: 600; }
.plan-sub:first-of-type { margin-top: 0; }
.plan-sub + .plan-cards { margin-top: 0; }
/* 料金の説明（表の下） */
.price-foot { margin-top: 16px; font-size: var(--fs-s); color: var(--ink-2); }
@media (max-width: 1024px) {
  .features.cols-2 { grid-template-columns: 1fr; gap: 48px; }
  .dl-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}
@media (max-width: 640px) {
  .cases.cols-2, .cases.cols-3 { grid-template-columns: 1fr; }
  .case-row + .case-row { margin-top: 48px; }
  .dl-panel { margin-top: 48px; padding: 24px 20px; }
  .plan-sub { margin-top: 48px; }
}

/* オウンドメディア・士業（事例の画像が無いときは、ロゴを面の中央に置く） */
.case-img.logo-box { display: flex; align-items: center; justify-content: center; }
.page .case-img.logo-box img { width: auto; height: auto; max-width: 48%; max-height: 28%; object-fit: contain; }

/* 士業（特徴が4つなので2列）：上の集客系3ページの .features.cols-2 をそのまま使う */

/* 保守・運用（料金表の下の支払い・解約・繰り越し） */
.plan-terms { margin-top: 20px; font-size: var(--fs-s); color: var(--ink-2); }

/* service-studio・service-btob-website・service-manufacturing-website（制作系の既存3ページ） */
/* 節の途中の「相談する」「資料をダウンロード」の帯（文＋ボタン） */
.cta-band { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 36px 40px; background: var(--paper); border-radius: var(--radius); }
.textured .cta-band { background: var(--white); }
.cta-band .en-label { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.cta-band h3 { margin-top: 4px; font-size: var(--fs-l); font-weight: 600; }
.cta-band p { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.cta-band .btn { flex: none; }
/* 点つきの箇条書き（面の中） */
ul.dots { display: grid; gap: 6px; }
ul.dots li { padding-left: 1em; text-indent: -1em; font-size: var(--fs-s); color: var(--ink-2); }
ul.dots li::before { content: "・"; }
.tile h3 + ul.dots, .tile p + ul.dots { margin-top: 10px; }
.tile p + p { margin-top: 10px; }
.tile .textlink { margin-top: 16px; }
.extras.one { grid-template-columns: 1fr; }
.extras.one .tile p { max-width: none; }
/* 文字だけの表（工程・使うもの・期間など）。スマホでは行ごとの面に組み替える */
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: var(--fs-s); }
.spec-table th, .spec-table td { padding: 16px 22px; text-align: left; vertical-align: top; background: var(--paper); }
.textured .spec-table th, .textured .spec-table td { background: var(--white); }
.spec-table thead th { padding-block: 12px; background: var(--paper-2) !important; font-weight: 600; }
.spec-table tbody th { width: 22%; font-weight: 600; }
.spec-table td { color: var(--ink-2); }
.spec-table tr > :first-child { border-radius: var(--radius) 0 0 var(--radius); }
.spec-table tr > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.spec-wrap + .note, .spec-wrap + p { margin-top: 16px; }
/* 写真つきのカード（3列） */
.photo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.photo-card .case-img { margin-bottom: 18px; }
.photo-card .no { font-family: var(--font-en); font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.photo-card h3 { font-size: var(--fs-l); font-weight: 600; line-height: 1.5; }
.photo-card .no + h3 { margin-top: 4px; }
.photo-card p { margin-top: 10px; font-size: var(--fs-s); color: var(--ink-2); }
/* ページの頭の写真（枠いっぱい） */
.ph-visual.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
/* ページの頭の短い特長 */
.hero-tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-tags li { padding: 4px 12px; background: var(--paper); font-size: var(--fs-xs); font-weight: 600; border-radius: 2px; }
/* 動画（YouTube） */
.video { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); border-radius: var(--radius); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-fig { max-width: 640px; }
/* 料金表の列幅をそろえる */
.plan-table.even { table-layout: fixed; }
.plan-table.even thead th:first-child { width: 22%; }
.video-fig figcaption { margin-top: 12px; font-size: var(--fs-s); color: var(--ink-2); }
.sec-video { margin-top: 48px; }
/* 事例を縦に並べる */
.case-list { display: grid; gap: 72px; }
.case-list .case-row { align-items: start; }
.case-row ul.dots { margin-top: 4px; }
.case-row .video { aspect-ratio: 16 / 10; }
/* 事例のビフォー・アフター */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.ba figcaption { margin-top: 10px; font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.ba-arrow { font-family: var(--font-en); font-size: var(--fs-l); }
.case-dl { margin-top: 40px; display: grid; gap: 4px; font-size: var(--fs-s); }
.case-dl div { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 16px 24px; background: var(--paper); border-radius: var(--radius); }
.case-dl dt { color: var(--muted); }
.textured .case-dl div { background: var(--white); }
.case-gallery { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case-gallery img { width: 100%; border-radius: var(--radius); background: var(--paper); }
@media (max-width: 1024px) {
  .photo-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table thead { display: none; }
  .spec-table { border-spacing: 0; }
  .spec-table tr { margin-bottom: 8px; padding: 18px 20px; background: var(--paper); border-radius: var(--radius); }
  .textured .spec-table tr { background: var(--white); }
  .spec-table th, .spec-table td { padding: 0; background: none !important; border-radius: 0 !important; }
  .spec-table tbody th { width: auto; font-size: var(--fs-b); }
  .spec-table td { margin-top: 10px; }
  .spec-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--muted); }
}
@media (max-width: 640px) {
  .cta-band { margin-top: 40px; padding: 24px 20px; }
  .cta-band .btn { width: 100%; }
  .photo-cards { grid-template-columns: 1fr; gap: 36px; }
  .case-list { gap: 56px; }
  .ba { grid-template-columns: 1fr; gap: 12px; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .case-dl div { grid-template-columns: 1fr; gap: 2px; padding: 14px 18px; }
  .case-gallery { grid-template-columns: 1fr; }
}

/* service-renewal（スマホの料金カードで、プラン名の補足「部分リニューアル」等を2行目に出し、金額を折らない） */
.plan-card h3 .plan-note { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.plan-cards.has-note .plan-card h3 strong { white-space: nowrap; }