:root{
      --paper:#F4F3EF; --ink:#0D0D0D; --mute:#8C8C88; --line:#E3E2DD; --panel:#EAE8E2;
      --serif:"Cormorant Garamond","Noto Serif JP",serif;
      --serif-jp:"Noto Serif JP","Cormorant Garamond",serif;
      --sans:"Inter","Noto Sans JP",sans-serif;
      --jp:"Noto Sans JP","Inter",sans-serif;
    }
    *{ box-sizing:border-box; }
    body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--jp); font-weight:300;
      font-size:14px; line-height:1.95; letter-spacing:.02em; -webkit-font-smoothing:antialiased; }
    a{ color:inherit; text-decoration:none; }

    .site-header{ display:flex; align-items:center; justify-content:space-between; padding:24px 52px; border-bottom:1px solid var(--line); }
    .header-inner{ max-width:1080px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; }
    .logo img{ height:40px; display:block; }
    .back-link{ font:500 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
    .back-link:hover{ opacity:.55; }

    .wrap{ max-width:1080px; margin:0 auto; padding:0 52px; }
    .intro{ padding:90px 0 64px; max-width:720px; }
    .eyebrow{ font:600 10px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin:0 0 24px; }
    .page-title{ font:400 clamp(34px,4.3vw,52px)/1.06 var(--serif); letter-spacing:-.008em; margin:0 0 22px; }
    .page-title em{ font-style:italic; }
    .lead{ font:300 15px/2 var(--jp); color:#333; margin:0; }

    .step{ display:grid; grid-template-columns:0.82fr 1fr; gap:88px; align-items:start;
      padding:64px 0; border-top:1px solid var(--line); }
    /* 統一ルール: sticky は「全体像（フルページの長いスクショ）」のステップ = .step--full のみ。
       短いスクショに付けると目障りなので付けない。 */
    .step--full > div{ position:sticky; top:40px; align-self:start; }
    .step__no{ font:600 11px/1 var(--sans); letter-spacing:.14em; color:var(--mute); margin:0 0 18px; }
    .step__h{ font:400 26px/1.35 var(--serif-jp); margin:0 0 20px; }
    .quote{ border-left:2px solid var(--ink); padding:4px 0 4px 18px; margin:28px 0 0;
      font:400 15px/1.9 var(--serif-jp); color:#222; }
    .quote .lab{ display:block; font:600 9px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
    .reason{ font:300 13.5px/1.95 var(--jp); color:#3a3a3a; margin:0; }
    .reason b{ font-weight:500; color:var(--ink); }
    .shot{ margin:0; }
    .shot img{ width:100%; height:auto; display:block; border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.08); }
    .shot figcaption{ font:600 10px/1.6 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-top:12px; }

    /* 見出し → 画像 → 説明 の並び替え（.step に .step-r を併用）。PC＝2カラム／SP＝縦並び。 */
    .step-r{ grid-template-columns:0.82fr 1fr; column-gap:88px; row-gap:22px;
             grid-template-areas:"head img" "body img"; align-items:start; }
    .step-r > .step__head{ grid-area:head; }
    .step-r > .shot{ grid-area:img; align-self:start; }
    .step-r > .step__body{ grid-area:body; }
    .step-r .step__h{ margin-bottom:0; }
    .step-r .reason{ margin-bottom:24px; }
    /* 全体像（フルページ）ステップ: 余白を下段(1fr)に寄せて本文を上に詰め、本文は scroll に追従(sticky)。 */
    .step--full.step-r{ grid-template-rows:auto 1fr; }
    .step--full.step-r > .step__head{ position:static; }
    .step--full.step-r > .step__body{ position:sticky; top:48px; align-self:start; }

    .closing{ padding:80px 0 120px; border-top:1px solid var(--line); text-align:center; }
    .closing h2{ font:400 clamp(28px,4vw,44px)/1.3 var(--serif-jp); margin:0 0 14px; }
    .closing p{ font:300 14px/1.9 var(--jp); color:var(--mute); margin:0 auto; max-width:600px; }
    .closing a{ display:inline-block; margin-top:32px; font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:6px; }

    .site-footer{ padding:48px 52px; background:var(--panel); }
    .footer-inner{ max-width:1080px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; }
    .footer-inner img{ height:34px; }
    .cp{ font:500 14px/1.8 var(--jp); color:var(--mute); margin:0; }

    @media (max-width:880px){
      .site-header{ padding:14px 22px; } .wrap{ padding:0 22px; } .intro{ padding:64px 0 48px; }
      .step{ grid-template-columns:1fr; gap:28px; padding:48px 0; }
      .step--full > div{ position:static; }
      .step-r{ grid-template-columns:1fr; column-gap:0; row-gap:16px;
               grid-template-areas:"head" "img" "body"; }
      .step-r > .shot{ margin-top:12px; }  /* SP: 見出しと画像を少し離す */
      .shot img{ box-shadow:0 3px 12px rgba(0,0,0,.05); }  /* SPは影を控えめに */
      .site-footer{ padding:40px 22px; }
    }