/* 案C: 特設オファーとしての組み。offers.css の上に重ねて読む。
   色と書体は site.css のトークンだけ。新しい色は作らない。
   特設らしさは、成果物の大きさと、面（地・紙・暗色）の切り替えで出す。
   グラデーション、強い影、バッジ、帯は使わない。

   面の順番（両LP共通）:
   FV 地 → 誰向け 紙 → アウトプット 地 → 範囲 紙 → なぜ頼むか 暗色 → 進め方 地 → FAQ 紙 → フォーム 地 */

.offer-c { display: block; overflow-x: clip; }

/* 全幅の面と、その中の容器。容器の左端はヘッダーのロゴにそろえる */
.c-sec { padding-block: 8rem; }
.c-sec.is-paper { background: var(--paper); }
.c-sec.is-dark { background: var(--bg-dark); color: var(--paper); }
.c-wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

/* 見出しは B より一段大きく。太さは 500 のまま */
.c-head .label { margin-bottom: 1.25rem; }
.c-head h2 {
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: var(--ls);
}
.c-head-desc { margin: 1.5rem 0 0; max-width: 34rem; font-size: 1rem; line-height: 2; color: var(--ink-60); }

/* 見出しを左、本文を右に置く2列 */
.c-split { display: grid; gap: 2.5rem; }

/* 画面・紙面に必ず添える注記 */
.c-caption { margin: 0; font-size: .75rem; line-height: 1.9; color: var(--ink-50); }

/* ---------- FV ---------- */

.c-hero {
  --col: 23rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  grid-template-rows: repeat(6, auto) 1fr;
  column-gap: 4rem;
  min-height: max(46rem, calc(100svh - 78px));
  padding-left: calc(max(0px, (100vw - var(--wide)) / 2) + var(--gutter));
  overflow: hidden;
}
.c-hero > :not(.c-visual) { grid-column: 1; min-width: 0; }
.c-hero .breadcrumb { padding-block: .75rem 2.75rem; }
.c-hero .label { margin-bottom: 1.25rem; }

.c-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls);
}
.c-hero .offer-define { margin-top: .875rem; font-size: .875rem; line-height: 1.85; }
.c-lead { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.95; }

/* 価格と範囲。紙の小さなパネル1枚。主役（右の画面）より目立たせない */
.c-price {
  margin-top: 1.75rem;
  padding: 1.375rem 1.5rem 1.25rem;
  background: var(--paper);
  border-radius: 4px;
}
.c-price p { margin: 0; }
.c-price-num { display: flex; align-items: baseline; flex-wrap: wrap; line-height: 1; }
.c-pre { margin-right: .375rem; font-size: 1rem; font-weight: 500; }
.c-num { font-family: var(--font-display); font-size: 3.25rem; font-weight: 500; letter-spacing: .02em; line-height: .9; }
.c-unit { margin-left: .2rem; font-size: 1.375rem; font-weight: 500; }
.c-tax { margin-left: .2rem; font-size: .8125rem; color: var(--ink-60); }
.c-price-sub { margin-top: .625rem !important; font-size: .8125rem; color: var(--ink-60); }
.c-price-list {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem 1rem;
}
.c-price-list.is-single { grid-template-columns: 1fr; }
.c-price-list li {
  position: relative;
  padding-left: .875rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.8;
}
.c-price-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .9em;
  width: .375rem;
  height: 1px;
  background: var(--ink-30);
}
.c-price-extra {
  margin-top: .875rem !important;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-60);
}
.c-price-extra span { margin-right: .875rem; color: var(--ink-50); }

.c-hero .offer-action { margin-top: 1.75rem; }
.c-hero .c-caption { margin-top: 1.5rem; max-width: 21rem; padding-bottom: 2.5rem; }

/* 右の主役。セルの右端はビューポートの右端 */
.c-visual { position: relative; grid-column: 2; grid-row: 1 / -1; min-height: 40rem; }

/* ---------- ブラウザ枠とスマホ枠 ----------
   枠は細い罫線と3つの点だけ。影は付けない */
.c-browser {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}
.c-browser-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: .375rem;
  height: 2.25rem;
  padding: 0 .875rem;
  background: #f3f3f3;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.c-browser-bar i { width: .5625rem; height: .5625rem; border-radius: 50%; background: rgba(0, 0, 0, .14); }
.c-browser-bar span {
  margin-left: auto;
  margin-right: auto;
  padding: .125rem 1.25rem;
  border-radius: 4px;
  background: var(--paper);
  font-family: var(--font-display);
  font-size: .6875rem;
  letter-spacing: var(--ls);
  color: var(--ink-50);
  transform: translateX(-1.5rem);
}
/* height:0 + flex:1 で、site.css の img { height: auto } を上書きし、
   固定高さのブラウザ枠を写真が覆うようにする */
.c-browser img {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 0;
  max-width: none;
  object-fit: cover;
  object-position: top center;
}

/* スマホ枠。外半径 = 内半径 + padding（+ border）で、角のベゼルが均一になる。
   写真の角は WebKit だと border-radius だけでは切れないので、img に clip-path を足す。 */
.c-phone {
  --phone-pad: .5rem;
  --phone-r: 2.25rem;
  --phone-bw: 0px;
  --phone-inner-r: calc(var(--phone-r) - var(--phone-pad) - var(--phone-bw));
  margin: 0;
  padding: var(--phone-pad);
  background: var(--bg-dark);
  border-radius: var(--phone-r);
  overflow: hidden;
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.c-phone img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 390 / 844;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--phone-inner-r);
  /* 実機 iOS は img の border-radius だけでは写真が切れないことがある。
     clip-path と、半径を効かせるための不透明マスクを重ねる。 */
  -webkit-clip-path: inset(0 round var(--phone-inner-r));
  clip-path: inset(0 round var(--phone-inner-r));
  -webkit-mask-image: linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ---------- 紙面（AX の「その月の一枚」） ---------- */
.c-sheet {
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  padding: 3.25rem 3.5rem 3rem;
}
.c-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink);
}
.c-sheet-title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.5; letter-spacing: var(--ls); }
.c-sheet-date {
  margin: 0;
  min-width: 11rem;
  padding: 0 0 .25rem;
  border-bottom: 1px solid var(--ink-30);
  font-size: .875rem;
  color: var(--ink-60);
  text-align: right;
}
.c-sheet-part {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.c-sheet-part:last-child { border-bottom: 0; padding-bottom: 0; }
.c-sheet-n { margin: 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; line-height: 1; color: var(--ink-30); }
.c-sheet h4 { margin: 0 0 .625rem; font-size: 1rem; font-weight: 700; line-height: 1.7; letter-spacing: var(--ls); }
.c-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.c-sheet li { position: relative; padding-left: 1rem; font-size: .9375rem; line-height: 1.85; }
.c-sheet li::before { content: ''; position: absolute; left: 0; top: .95em; width: .5rem; height: 1px; background: var(--ink-50); }
.c-sheet-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.c-sheet-two > div + div { padding-left: 2rem; border-left: 1px solid var(--rule); }
.c-sheet-two > div + div li { color: var(--ink-60); }

/* ---------- 誰向け ---------- */
.c-who-list { list-style: none; margin: 0; padding: 0; }
.c-who-list li { padding: 1.25rem 0; border-top: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.8; }
.c-who-list li:last-child { border-bottom: 1px solid var(--rule); }
.c-who .offer-notfor { border-top: 0; padding-top: 0; margin-top: 2rem; }

/* ---------- 範囲 ----------
   紙の面の上なので、含まれる = 地の面、含まれない = 罫線だけの面 */
.c-pair { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
.c-in, .c-out { padding: 2.5rem 2.75rem 2.25rem; border-radius: 4px; }
.c-in { background: var(--bg); }
.c-out { border: 1px solid var(--rule); }
.c-pair h3 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700; line-height: 1.6; letter-spacing: var(--ls); }
.c-pair ul { list-style: none; margin: 0; padding: 0; }
.c-pair li { padding: .875rem 0; border-top: 1px solid var(--rule); font-size: .9375rem; line-height: 1.8; }
.c-out li { color: var(--ink-60); }
.c-contract {
  display: grid;
  gap: .5rem;
  margin-top: 2rem;
  padding: 1.5rem 2.75rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.c-contract p { margin: 0; }
.c-contract-label { font-size: 1.0625rem; font-weight: 700; line-height: 1.8; }
.c-contract-body p { font-size: .9375rem; line-height: 1.8; }

/* ---------- なぜ頼むか（暗色の独立した面） ---------- */
.c-why { padding-block: 10rem; }
.c-why .label { color: var(--paper-30); }
.c-why h2 {
  margin: 0;
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--ls);
}
.c-why-body { max-width: 30rem; }
.c-why-body p { margin: 0; font-size: 1.0625rem; line-height: 2.15; color: rgba(255, 255, 255, .78); }
.c-why-body p + p { margin-top: 2rem; }

/* ---------- 進め方 ---------- */
.c-steps { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; }
.c-steps > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.c-steps-num { grid-row: span 2; font-family: var(--font-display); font-size: .8125rem; letter-spacing: var(--ls); color: var(--ink-50); line-height: 2.1; }
.c-steps b { font-size: 1.0625rem; font-weight: 700; line-height: 1.8; }
.c-steps-body { margin-top: .25rem; font-size: .875rem; line-height: 1.85; color: var(--ink-60); }
.c-steps-note { margin: 2rem 0 0; font-size: .875rem; line-height: 1.9; color: var(--ink-50); }

/* ---------- FAQ ---------- */
.c-faq dl { margin: 0; }
.c-faq dt:first-of-type { padding-top: 0; border-top: 0; }
.c-faq dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
.c-body { min-width: 0; max-width: var(--measure); }

/* ---------- フォーム ---------- */
.c-form { margin-top: 3.5rem; padding: 2rem 1.25rem; background: var(--paper); border-radius: 4px; }
.c-form .contact-grid { padding-bottom: 0; }
.c-field-note { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.8; color: var(--ink-60); }

/* ---------- 広い画面 ---------- */
@media (min-width: 48rem) {
  .c-pair { grid-template-columns: 1fr 1fr; }
  .c-contract { grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; align-items: baseline; }
  .c-form { padding: 3.5rem; }
}

@media (min-width: 64rem) {
  .c-split { grid-template-columns: 22rem minmax(0, 1fr); gap: 5rem; align-items: start; }
  .c-why .c-split { grid-template-columns: 30rem 31rem; gap: 6rem; justify-content: start; }
  .c-why-body { padding-top: 2.6rem; }
  .c-steps { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 2rem; }
  .c-steps > li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--ink);
  }
  .c-steps-num { grid-row: auto; margin-bottom: 1rem; }
  .c-form .contact-grid { grid-template-columns: minmax(0, 1fr) 17rem; gap: 4rem; }
}

/* ---------- 狭い画面 ----------
   FV は 名前 → 価格 → 画面 → リード → CTA の順に並べ替える */
@media (max-width: 63.99rem) {
  .c-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 0;
    min-height: 0;
    padding-inline: var(--gutter);
    overflow: hidden;
  }
  .c-hero > * { grid-column: 1 !important; }
  .c-hero .breadcrumb { display: none; }
  .c-hero .label { order: 1; margin: .5rem 0 .75rem; }
  .c-name { order: 2; }
  .c-hero .offer-define { order: 3; }
  .c-price { order: 4; }
  .c-visual { order: 5; grid-row: auto; }
  .c-hero .c-caption { order: 6; padding-bottom: 0; margin-top: 1rem; max-width: none; }
  .c-lead { order: 7; margin-top: 2rem; }
  .c-hero .offer-action { order: 8; padding-bottom: 4rem; }
  .c-split { gap: 2rem; }
  .c-split .c-head-desc { margin-top: -.5rem; }
}

@media (max-width: 47.99rem) {
  .c-sec { padding-block: 5rem; }
  .c-why { padding-block: 6rem; }
  .c-name { font-size: 1.625rem; }
  .c-price { margin-top: 1.25rem; padding: 1rem 1.125rem .875rem; }
  .c-num { font-size: 2.5rem; }
  .c-unit { font-size: 1.125rem; }
  .c-price-list { margin-top: .75rem; padding-top: .625rem; }
  .c-price-list li { font-size: .8125rem; line-height: 1.7; }
  .c-price-extra { margin-top: .5rem !important; padding-top: .5rem; }
  .c-in, .c-out { padding: 1.75rem 1.5rem 1.5rem; }
  .c-contract { padding: 1.25rem 0; }
  .c-sheet { padding: 1.75rem 1.375rem 1.5rem; }
  .c-sheet-head { display: block; padding-bottom: 1rem; }
  .c-sheet-title { font-size: 1.125rem; }
  .c-sheet-date { display: inline-block; min-width: 9rem; margin-top: .75rem; text-align: left; font-size: .8125rem; }
  .c-sheet-part { grid-template-columns: 2rem minmax(0, 1fr); padding: 1.25rem 0; }
  .c-sheet-n { font-size: 1.375rem; }
  .c-sheet h4 { font-size: .9375rem; }
  .c-sheet li { font-size: .875rem; }
  .c-sheet-two { grid-template-columns: 1fr; gap: 1.25rem; }
  .c-sheet-two > div + div { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
}