/*
 * 金継ぎ 第6巡 2026-08-30 — レスポンシブの継ぎ目を通す
 *
 * ⚠ これは第5巡 kintsugi-responsive.css の【差し替え版】です。足すのではなく置き換えてください。
 *   <style> として </head> の直前に貼る形で使う場合は、先に
 *   <link rel="stylesheet" href="kintsugi-responsive.css"> の行を外してください
 *   （外さないと、旧版の「900pxから2列」の指定だけが残って2列と1列が混ざります）。
 *
 * 直したのは2件（どちらも機械の数字には出ない）:
 *   1. Xの帯（発信の入口）が本体と揃わない。431〜1215pxで左端が最大150pxずれ、幅も食い違う
 *   2. 本体の幅が画面幅に連れて連続しない。431〜599pxは430px固定のまま、
 *      900pxの境目では1列560px→2列418pxへ画像が25%縮み、iPad横ではスマホより小さくなっていた
 *
 * 文言・画像・価格・実績・リンク先は1文字も変えていない。
 */

/* ── 本体とXの帯は、どの幅でも同じ幅・同じ位置に置く ───────────────
   min(100%, …) がスマホでのはみ出しを止め、max(430px, …) が
   431〜599pxの「430px固定」を解く。実測の推移は
   390→390 / 430→430 / 480→440 / 560→520 / 600以上→560px。
   1枚の画像が縮む場所がどこにも無い形。 */
.lp-shell,
.site-links {
  width: min(100%, 560px, max(430px, calc(100% - 40px)));
  margin-inline: auto;
}

/* ── 1列で見せる帯（600〜1215px）では、画面の「高さ」でも幅を抑える ──────
   第4巡の「幅を画面の高さに連動させる」と同じ考え方。狙いは、ヒーローの
   LINEボタンを最初の画面に残すこと。ヒーロー画像は縦2:3で、CTAの下端は
   画像の高さの95.8%の位置にあるので、上の余白24pxを足して画面に収めるには
     幅 ≦ (画面高 - 24) ÷ 1.437 ＝ 69vh - 17px
   下限はスマホと同じ390px（これ以上は小さくしない。そこまで低い画面では
   画面下の固定CTAが受け皿になる）。
   実測: 1024×768で幅513px（修理前の464pxより大きいままCTAが収まる）、
   860×700で466px、画面が高いときは560pxの上限に当たってこの式は効かない。
   svh はアドレスバーの伸縮で高さが揺れない単位。対応していないブラウザは
   1本目の vh を使う（2本目が丸ごと無視される）。
   幅600px未満（スマホ）には効かせない＝iOSのvhの揺れを持ち込まないため。 */
@media (min-width: 600px) {
  .lp-shell,
  .site-links {
    width: min(100%, 560px, max(390px, calc(100% - 40px)), max(390px, calc(69vh - 17px)));
    width: min(100%, 560px, max(390px, calc(100% - 40px)), max(390px, calc(69svh - 17px)));
  }
}

/* ── 900px以上は地を1段暗くして、本体を紙として立てる ──────────────
   第4巡の処方（地 #F4EADB の明度だけ落とした派生1色）をそのまま踏襲。
   第5巡ではこれが2列と同じブロックに入っていたため、
   1列で見せる900〜1215pxに地色が効かなかった。 */
@media (min-width: 900px) {
  html,
  body {
    background: #e3d5bc;
  }

  .lp-shell {
    margin-block: 24px 0;
    box-shadow: 0 18px 64px rgba(75, 58, 39, 0.2);
  }


  .site-links {
    margin-bottom: 96px;
    background: #fbf0db;
    box-shadow: 0 24px 64px rgba(75, 58, 39, 0.16);
  }

  .results-details__summary,
  .site-links__x {
    font-size: 18px;
  }
}

/* ── 見開き2列は「1画面に収まる大きさ」を保てる幅から ────────────────
   2列にすると1枚あたりが (本体幅-32-16)/2 になる。本体の上限1040pxは
   「1280×800でヒーロー1枚が画面に収まる」ための値なので上げない。
   代わりに切り替えを1216pxまで上げ、それ未満は1列560pxで見せる。
   1024px（iPad横・小型ノート）で 418px → 560px（+34%）。 */
@media (min-width: 1216px) {
  .lp-shell {
    width: min(1040px, calc(100% - 48px));
    margin: 24px auto 0;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "hero profile"
      "scenes featured"
      "stage stage"
      "details details"
      "pricing closing";
    gap: 16px;
    align-items: start;
    background: #fbf0db;
  }

  .lp-shell > section[aria-labelledby="hero-heading"] {
    grid-area: hero;
  }

  .lp-shell > section[aria-labelledby="profile-heading"] {
    grid-area: profile;
  }

  .lp-shell > section[aria-labelledby="scenes-heading"] {
    grid-area: scenes;
  }

  .lp-shell > section[aria-labelledby="featured-results-heading"] {
    grid-area: featured;
  }

  .lp-shell > .stage-photo {
    grid-area: stage;
  }

  .lp-shell > .results-details {
    grid-area: details;
  }

  .lp-shell > section[aria-labelledby="pricing-heading"] {
    grid-area: pricing;
  }

  .lp-shell > section[aria-labelledby="closing-heading"] {
    grid-area: closing;
  }

  .lp-shell > .slice,
  .lp-shell > .stage-photo,
  .lp-shell > .results-details,
  .results-details > .slice {
    min-width: 0;
  }

  .lp-shell > .slice,
  .results-details > .slice,
  .stage-photo__image {
    overflow: hidden;
    border-radius: 6px;
  }

  .stage-photo {
    padding: 0;
  }

  .results-details > .slice {
    width: calc((100% - 16px) / 2);
    margin-inline: auto;
  }

  .image-cta--line {
    font-size: clamp(15px, 1.45vw, 18px);
  }

  .image-cta--line.cta-closing-line {
    font-size: clamp(18px, 1.8vw, 22px);
  }

  .site-links {
    width: min(1040px, calc(100% - 48px));
    padding: 22px 16px;
  }

  .fixed-cta__link {
    width: min(100%, 520px);
  }
}