/* =========================================================
   引っ越しの相談室 — スタイルシート
   ========================================================= */

:root{
  --ink:#1c1b19;          /* 文字・濃い背景 */
  --ink-soft:#4a4845;     /* 本文グレー */
  --paper:#f3f1ee;        /* ベースの生成り */
  --paper-2:#faf9f7;      /* カード白 */
  --line:#ddd9d3;
  --gold:#a89376;
  --shadow:0 18px 48px rgba(28,27,25,.10);
  --ease:cubic-bezier(.22,.7,.28,1);
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.04em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,figure,blockquote,ol,ul{margin:0;padding:0;}
ol,ul{list-style:none;}

.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto;}
.center{text-align:center;}

/* キーボード操作時に、いまどこを触っているか分かるようにする */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}
.btn--ghost:focus-visible,.footer a:focus-visible{outline-color:#fff;}

/* --- アイコン（線画SVG） --- */
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;
     stroke-linecap:round;stroke-linejoin:round;flex:none;}
.ico--lg{width:26px;height:26px;stroke-width:1.1;}

/* --- ボタン（押せるものだけ動かす） --- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-size:13px;letter-spacing:.09em;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn--dark{background:var(--ink);color:#fff;}
.btn--dark:hover{background:#000;transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22);}
.btn--line{border:1px solid var(--ink);}
.btn--line:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}
.btn--ghost{border:1px solid rgba(255,255,255,.75);color:#fff;backdrop-filter:blur(6px);}
.btn--ghost:hover{background:#fff;color:var(--ink);transform:translateY(-2px);}
.arw{width:22px;height:1px;background:currentColor;position:relative;margin-left:4px;
     transition:width .3s var(--ease);}
.arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);}
.btn:hover .arw{width:30px;}

/* --- 筆記体のあしらい --- */
.script{font-family:"Parisienne",cursive;font-size:30px;line-height:1.25;letter-spacing:.02em;}

/* =========================================================
   ヘッダー
   ========================================================= */
.header{position:fixed;inset:0 0 auto;z-index:50;
        transition:background .4s var(--ease),box-shadow .4s var(--ease);}
.header__inner{
  width:min(100% - 44px,1400px);margin-inline:auto;
  display:flex;align-items:center;gap:38px;height:88px;
  transition:height .4s var(--ease);
}
.header__logo{font-family:"Noto Serif JP",serif;font-size:19px;letter-spacing:.14em;color:#fff;
              transition:color .4s var(--ease);}
.header__logo-break{display:none;}
.header__nav{display:flex;gap:30px;margin-left:auto;}
.header__nav a{font-size:13px;color:#fff;opacity:.92;position:relative;padding-bottom:4px;
               transition:color .4s var(--ease);}
.header__nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:currentColor;transition:width .35s var(--ease);}
.header__nav a:hover::after,.header__nav a:focus-visible::after{width:100%;}
.header__cta{background:rgba(28,27,25,.72);color:#fff;backdrop-filter:blur(8px);padding:13px 24px;}
.header__burger{display:none;}

/* スクロール後：白背景に反転 */
.header.is-stuck{background:rgba(250,249,247,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);}
.header.is-stuck .header__inner{height:72px;}
.header.is-stuck .header__logo,
.header.is-stuck .header__nav a{color:var(--ink);}
.header.is-stuck .header__cta{background:var(--ink);color:#fff;}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
      color:#fff;overflow:hidden;padding:150px 0 130px;}
.hero__bg{
  position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(14,13,12,.88) 0%,rgba(14,13,12,.55) 42%,rgba(14,13,12,.28) 70%,rgba(14,13,12,.55) 100%),
    linear-gradient(160deg,#3a352f,#15130f 70%),
    url("images/hero-bg.jpg") center/cover no-repeat;
  /* 1.8秒で止まる。読んでいる間は動かさない */
  animation:heroSettle 1.8s var(--ease) both;
}
@keyframes heroSettle{from{transform:scale(1.06);}to{transform:scale(1);}}

.hero__inner{position:relative;width:min(100% - 44px,1400px);margin-inline:auto;
             display:flex;justify-content:space-between;align-items:flex-end;gap:48px;}

/* 読む順（線→見出し→本文→筆記体→特徴）に案内する。全体で約1.1秒 */
.hero__rule{display:block;width:96px;height:1px;background:#fff;opacity:.85;margin-bottom:26px;
            animation:ruleIn .7s var(--ease) .15s both;}
@keyframes ruleIn{from{width:0;opacity:0;}to{width:96px;opacity:.85;}}
.hero__title{
  font-family:"Noto Serif JP",serif;font-weight:400;
  font-size:clamp(38px,5.6vw,74px);line-height:1.28;letter-spacing:.06em;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
  animation:fadeUp .8s var(--ease) .25s both;
}
.hero__lead{margin-top:34px;font-size:15px;line-height:2.15;font-weight:300;letter-spacing:.09em;
            animation:fadeUp .8s var(--ease) .45s both;}
/* 見出しの隣に置く写真（筆記体は写真の右上に重ねる） */
.hero__photo{position:relative;flex:none;width:min(34vw,420px);
             animation:fadeUp .9s var(--ease) .6s both;}
.hero__photo .ph--hero{aspect-ratio:3/4;border-radius:4px;
                       box-shadow:0 26px 60px rgba(0,0,0,.42);}
.hero__photo figcaption{position:absolute;right:18px;top:18px;text-align:right;
  font-family:"Parisienne",cursive;font-size:clamp(18px,1.7vw,24px);line-height:1.35;
  color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.hero__features{
  position:relative;width:min(100% - 44px,1400px);margin:84px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  animation:fadeUp .8s var(--ease) .7s both;
}
.hero__features li{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;font-size:13px;line-height:1.75;letter-spacing:.07em;font-weight:300;
  padding:0 16px;border-left:1px solid rgba(255,255,255,.25);
}
.hero__features li:first-child{border-left:0;}

/* スクロール誘導：役目が終わったら消える（スクロール後は不要なため） */
.hero__scroll{position:absolute;left:max(22px,calc(50% - 700px));bottom:34px;
              display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.34em;opacity:.8;
              transition:opacity .5s var(--ease),transform .5s var(--ease);}
.hero__scroll.is-hidden{opacity:0;transform:translateY(12px);pointer-events:none;}
.hero__scroll i{display:block;width:64px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:#fff;
  animation:scrollLine 2.6s var(--ease) infinite;}
@keyframes scrollLine{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}

/* =========================================================
   共通：セクション番号・見出し
   ========================================================= */
.secnum{font-family:"Noto Serif JP",serif;line-height:1.35;letter-spacing:.16em;}
.secnum b{display:block;font-size:20px;font-weight:400;}
.secnum span{font-size:10px;letter-spacing:.28em;color:var(--ink-soft);}
.secnum--top{margin-bottom:30px;}

.h2{font-family:"Noto Serif JP",serif;font-weight:400;
    font-size:clamp(25px,3vw,38px);line-height:1.55;letter-spacing:.07em;}
.h2--mid{font-size:clamp(23px,2.6vw,33px);}
.h2 small{display:block;font-family:"Noto Sans JP",sans-serif;font-size:10px;
          letter-spacing:.3em;color:var(--ink-soft);margin-top:12px;}
.body{margin-top:26px;color:var(--ink-soft);font-weight:300;font-size:14px;line-height:2.15;}

/* 画像プレースホルダ（写真を差し替える場所） */
.ph{background-color:#cfc8bf;background-size:cover;background-position:center;}
.ph--service{aspect-ratio:4/5;
  background-image:linear-gradient(0deg,rgba(0,0,0,.06),rgba(0,0,0,.06)),url("images/service.jpg");}
.ph--s1{background-image:url("images/strength-01.jpg");}
.ph--s2{background-image:url("images/strength-02.jpg");}
.ph--s3{background-image:url("images/strength-03.jpg");}
.ph--hero{background-image:url("images/hero-photo.jpg");}
.ph--final{background-image:url("images/final-photo.jpg");}

/* =========================================================
   スクロール時の登場モーション（役割ごとに動きを変える）
   ---------------------------------------------------------
   ① 本文  = 存在を知らせるだけ／控えめ
   ② 写真  = 文章と別物だと区別する／幕が開く
   ③ 並ぶ項目 = 同じ仲間だと伝える／少しずつずらす
   ④ 流れ  = 順番があると伝える／線が左から右へ伸びる
   ※ 操作する部品（FAQ・ボタン）は登場で遅らせない
   ========================================================= */

/* ① 本文ブロック */
.reveal--text{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal--text.is-in{opacity:1;transform:none;}

/* ② 写真・地図 */
.reveal--media{opacity:0;clip-path:inset(16% 0 0 0);transform:scale(1.02);
  transition:opacity .6s var(--ease),clip-path .9s var(--ease),transform .9s var(--ease);}
.reveal--media.is-in{opacity:1;clip-path:inset(0 0 0 0);transform:none;}

/* ③ 横／縦に並ぶ同種の項目（お客様の声・選ばれる理由） */
.reveal--group > *{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);}
.reveal--group.is-in > *{opacity:1;transform:none;}
.reveal--group.is-in > *:nth-child(2){transition-delay:.07s;}
.reveal--group.is-in > *:nth-child(3){transition-delay:.14s;}

/* ④ ご契約までの流れ */
.reveal--flow > li{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal--flow.is-in > li{opacity:1;transform:none;}
.reveal--flow.is-in > li:nth-child(2){transition-delay:.12s;}
.reveal--flow.is-in > li:nth-child(3){transition-delay:.24s;}
.reveal--flow.is-in > li:nth-child(4){transition-delay:.36s;}

/* =========================================================
   01 SERVICE
   ========================================================= */
.service{background:var(--paper-2);padding:120px 0;}
.service__grid{display:grid;grid-template-columns:90px 1fr 1fr;gap:0 56px;align-items:center;}
.service__text{max-width:420px;}
.service__text .btn{margin-top:38px;}
.service__img{position:relative;}
.service__img .script{position:absolute;right:20px;top:26px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35);
                      text-align:right;font-size:26px;}

/* =========================================================
   02 AREA
   ========================================================= */
.area{padding:120px 0;}
.area__grid{display:grid;grid-template-columns:90px 1fr 1fr;gap:0 56px;align-items:center;}
.area__map{position:relative;justify-self:center;}
.area__map img{width:100%;max-width:440px;height:auto;}
.script--map{position:absolute;left:1%;top:5%;color:var(--ink-soft);font-size:26px;line-height:1.2;}
.area__text{max-width:430px;}
.area__text .btn{margin-top:36px;}

/* =========================================================
   コンセプト帯
   ========================================================= */
.concept{position:relative;color:#fff;text-align:center;padding:140px 22px;overflow:hidden;}
.concept__bg{position:absolute;inset:0;
  background:
    linear-gradient(rgba(12,11,10,.5),rgba(12,11,10,.62)),
    linear-gradient(160deg,#5a4433,#1b1510),
    url("images/concept.jpg") center/cover no-repeat;}
.concept__inner{position:relative;}
.concept__title{font-family:"Noto Serif JP",serif;font-weight:400;
  font-size:clamp(25px,3.4vw,42px);line-height:1.6;letter-spacing:.08em;text-shadow:0 2px 24px rgba(0,0,0,.4);}
.concept__lead{margin-top:28px;font-size:13px;line-height:2.2;font-weight:300;letter-spacing:.08em;opacity:.92;}

/* =========================================================
   03 VOICE
   ========================================================= */
.voice{background:var(--paper-2);padding:120px 0;}
.voice__list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:52px 0 56px;
             align-items:stretch;}
.voice__list .card{display:flex;flex-direction:column;}
.voice__list .card figcaption{margin-top:auto;}
/* カードは押せないので hover では動かさない */
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;
      padding:32px 30px 30px;}
.quote{position:absolute;right:24px;top:22px;font-family:"Noto Serif JP",serif;
       font-size:38px;line-height:1;color:var(--line);}
.avatar{width:42px;height:42px;border-radius:50%;margin-bottom:22px;
  background:radial-gradient(circle at 50% 34%,#6d6963 0 28%,transparent 29%),
             radial-gradient(ellipse at 50% 108%,#6d6963 0 46%,transparent 47%),#cdc7bf;}
.avatar--b{background:radial-gradient(circle at 50% 34%,#7d6a58 0 28%,transparent 29%),
             radial-gradient(ellipse at 50% 108%,#7d6a58 0 46%,transparent 47%),#d6cec4;}
.avatar--c{background:radial-gradient(circle at 50% 34%,#5b5f66 0 28%,transparent 29%),
             radial-gradient(ellipse at 50% 108%,#5b5f66 0 46%,transparent 47%),#c9ccd1;}
.card__title{font-family:"Noto Serif JP",serif;font-weight:500;font-size:17px;line-height:1.7;
             letter-spacing:.04em;margin:0 0 16px;padding-right:34px;}
.card blockquote{margin:0;font-size:14px;line-height:1.95;letter-spacing:.04em;color:var(--ink-soft);}
.card figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
                 font-size:12px;color:var(--ink-soft);}

/* =========================================================
   04 STRENGTH
   ========================================================= */
.strength{padding:120px 0;}
.strength__list{display:grid;gap:16px;margin-top:52px;}
/* 読み物なので hover では動かさない */
.strength__list li{
  display:grid;grid-template-columns:1fr 240px 1fr;align-items:center;gap:30px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:4px;
  padding:26px 34px;
}
.strength__head{display:flex;flex-direction:column;gap:14px;}
.strength__head b{font-family:"Noto Serif JP",serif;font-size:22px;font-weight:400;letter-spacing:.1em;}
.strength__head h3{font-family:"Noto Serif JP",serif;font-size:17px;font-weight:400;line-height:1.7;letter-spacing:.06em;}
.strength__list .ph{aspect-ratio:16/9;border-radius:2px;}
.strength__list p{font-size:13px;line-height:2.05;color:var(--ink-soft);font-weight:300;}

/* =========================================================
   CTA帯
   ========================================================= */
.band{position:relative;color:#fff;text-align:center;padding:110px 22px;overflow:hidden;}
.band__bg{position:absolute;inset:0;
  background:
    linear-gradient(rgba(10,9,8,.6),rgba(10,9,8,.68)),
    linear-gradient(140deg,#4a4038,#151210),
    url("images/band.jpg") center/cover no-repeat;}
.band__inner{position:relative;}
.band__title{font-family:"Noto Serif JP",serif;font-weight:400;
  font-size:clamp(24px,3vw,36px);letter-spacing:.09em;margin-bottom:36px;}

/* =========================================================
   05 FLOW
   ========================================================= */
.flow{background:var(--paper-2);padding:120px 0;}
.flow__list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;text-align:center;}
.flow__list li{position:relative;}

/* ステップ同士をつなぐ線：左から右へ伸びて「順番」を伝える */
.flow__list li:not(:last-child)::before{
  content:"";position:absolute;top:34px;
  left:calc(50% + 42px);right:calc(-50% + 22px);height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);
}
.flow__list li:not(:last-child)::after{
  content:"";position:absolute;top:31px;right:calc(-50% + 20px);width:6px;height:6px;
  border-top:1px solid #b9b2a8;border-right:1px solid #b9b2a8;transform:rotate(45deg);
  opacity:0;transition:opacity .3s var(--ease);
}
.flow__list.is-in li:not(:last-child)::before{transform:scaleX(1);}
.flow__list.is-in li:not(:last-child)::after{opacity:1;}
.flow__list.is-in li:nth-child(1)::before{transition-delay:.18s;}
.flow__list.is-in li:nth-child(1)::after{transition-delay:.60s;}
.flow__list.is-in li:nth-child(2)::before{transition-delay:.30s;}
.flow__list.is-in li:nth-child(2)::after{transition-delay:.72s;}
.flow__list.is-in li:nth-child(3)::before{transition-delay:.42s;}
.flow__list.is-in li:nth-child(3)::after{transition-delay:.84s;}

/* アイコンは押せないので hover では動かさない */
.flow__ico{width:68px;height:68px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;margin:0 auto 20px;background:var(--paper);}
.flow__ico .ico{width:24px;height:24px;}
.flow__list b{display:block;font-family:"Noto Serif JP",serif;font-size:14px;font-weight:400;letter-spacing:.14em;color:var(--ink-soft);}
.flow__list h3{font-family:"Noto Serif JP",serif;font-size:16px;font-weight:400;line-height:1.7;margin-top:8px;letter-spacing:.05em;}
.flow__list p{margin-top:14px;font-size:12px;line-height:2;color:var(--ink-soft);font-weight:300;}

/* =========================================================
   06 FAQ
   ========================================================= */
.faq{padding:120px 0;}
.faq__list{display:grid;gap:12px;margin:52px 0 56px;}
.faq details{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  transition:border-radius .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  overflow:hidden;}
.faq details[open]{border-radius:22px;box-shadow:var(--shadow);border-color:transparent;}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 30px;font-size:14px;letter-spacing:.05em;}
.faq summary::-webkit-details-marker{display:none;}
.chev{margin-left:auto;width:9px;height:9px;border-right:1px solid var(--ink-soft);
  border-bottom:1px solid var(--ink-soft);transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease);flex:none;}
.faq details[open] .chev{transform:rotate(-135deg) translateY(-2px);}
/* 答えの高さをなめらかに変える（質問と答えのつながりを保つ） */
.faq__body{overflow:hidden;transition:height .36s var(--ease);}
.faq__body p{margin:0 30px;padding:20px 0 26px;font-size:13px;line-height:2.1;
  color:var(--ink-soft);font-weight:300;border-top:1px solid var(--line);}

/* =========================================================
   最終CTA
   ========================================================= */
.final{position:relative;color:#fff;overflow:hidden;padding:150px 0 160px;}
.final__bg{position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(10,9,8,.9) 0%,rgba(10,9,8,.62) 48%,rgba(10,9,8,.25) 100%),
    linear-gradient(150deg,#4a4038,#14110e),
    url("images/final-bg.jpg") center/cover no-repeat;}
.final__inner{position:relative;width:min(100% - 44px,var(--wrap));margin-inline:auto;
              display:flex;justify-content:space-between;align-items:center;gap:56px;}
.final__text{max-width:560px;}
.final__photo{position:relative;flex:none;width:min(32vw,400px);}
.final__photo .ph--final{aspect-ratio:4/5;border-radius:4px;
                         box-shadow:0 26px 60px rgba(0,0,0,.45);}
.final__photo figcaption{position:absolute;right:18px;top:18px;text-align:right;
  font-family:"Parisienne",cursive;font-size:clamp(18px,1.7vw,24px);line-height:1.35;
  color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.5);}
.final__title{font-family:"Noto Serif JP",serif;font-weight:400;
  font-size:clamp(27px,3.6vw,45px);line-height:1.5;letter-spacing:.07em;text-shadow:0 2px 26px rgba(0,0,0,.4);}
.final__lead{margin-top:30px;font-size:13px;line-height:2.2;font-weight:300;letter-spacing:.08em;opacity:.92;}
.final__inner .btn{margin-top:40px;}


/* =========================================================
   フッター
   ========================================================= */
.footer{background:var(--ink);color:#fff;padding:36px 0;}
.footer__inner{display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.footer__logo{font-family:"Noto Serif JP",serif;font-size:16px;letter-spacing:.14em;}
.footer__nav{display:flex;gap:26px;flex-wrap:wrap;}
.footer__nav a{font-size:12px;opacity:.8;transition:opacity .3s var(--ease);}
.footer__nav a:hover{opacity:1;}
.footer__copy{margin-left:auto;font-size:11px;opacity:.6;letter-spacing:.06em;}
.footer__sns{opacity:.8;transition:opacity .3s var(--ease);}
.footer__sns:hover{opacity:1;}

/* =========================================================
   レスポンシブ（タブレット）
   ========================================================= */
@media (max-width:1000px){
  .header__nav{display:none;}
  .header__cta{margin-left:auto;font-size:12px;padding:11px 18px;}
  .service__grid,.area__grid{grid-template-columns:1fr;gap:34px;}
  .secnum{display:flex;align-items:baseline;gap:12px;}
  .secnum--top{display:block;}
  .service__text,.area__text{max-width:none;}
  .strength__list li{grid-template-columns:1fr 200px;grid-template-areas:"head img" "text text";gap:20px 26px;}
  .strength__head{grid-area:head;}
  .strength__list .ph{grid-area:img;}
  .strength__list p{grid-area:text;}
  .flow__list{grid-template-columns:repeat(2,1fr);gap:40px 20px;}
  /* 2列になると線が意味をなさないので消す */
  .flow__list li:not(:last-child)::before,
  .flow__list li:not(:last-child)::after{display:none;}
  .final__inner{flex-direction:column;align-items:stretch;gap:40px;}
  .final__text{max-width:none;}
  .final__photo{width:100%;}
  .final__photo .ph--final{aspect-ratio:16/10;}
}

/* =========================================================
   レスポンシブ（スマホ）
   ========================================================= */
@media (max-width:640px){
  body{font-size:14px;}
  .header__inner{height:68px;gap:14px;}
  .header__logo{font-size:16px;}
  .header__logo-break{display:block;}
  .hero{padding:120px 0 90px;min-height:auto;}
  .hero__inner{flex-direction:column;align-items:stretch;gap:34px;}
  .hero__photo{width:100%;}
  .hero__photo .ph--hero{aspect-ratio:4/3;}
  .hero__photo figcaption{font-size:19px;right:14px;top:14px;}
  .final__photo figcaption{font-size:19px;right:14px;top:14px;}
  .hero__features{grid-template-columns:repeat(2,1fr);gap:26px 0;margin-top:56px;}
  .hero__features li:nth-child(odd){border-left:0;}
  .hero__features li{font-size:12px;padding:0 10px;}
  .hero__scroll{display:none;}
  .service,.area,.voice,.strength,.flow,.faq{padding:80px 0;}
  .concept,.band{padding:90px 22px;}
  .final{padding:100px 0 110px;}
  .voice__list{grid-template-columns:1fr;}
  .strength__list li{grid-template-columns:1fr;grid-template-areas:"head" "img" "text";padding:24px;}
  .flow__list{grid-template-columns:1fr;gap:34px;}
  .faq summary{padding:18px 22px;font-size:13px;line-height:1.7;}
  .faq details{border-radius:18px;}
  .faq__body p{margin:0 22px;padding-bottom:22px;}
  .btn{padding:14px 24px;font-size:12px;}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:18px;}
  .footer__copy{margin-left:0;}
}

/* =========================================================
   スマホ用メニュー（ハンバーガー）
   ========================================================= */
@media (max-width:1000px){
  .header__burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:40px;height:40px;padding:0;background:none;border:0;cursor:pointer;
  }
  .header__burger span{display:block;width:22px;height:1px;background:#fff;margin:0 auto;
    transition:transform .3s var(--ease),background .3s var(--ease);}
  .header.is-stuck .header__burger span,
  .header.is-open .header__burger span{background:var(--ink);}
  .header.is-open .header__burger span:first-child{transform:translateY(3.5px) rotate(45deg);}
  .header.is-open .header__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg);}

  .header.is-open{background:rgba(250,249,247,.98);backdrop-filter:blur(12px);}
  .header.is-open .header__logo{color:var(--ink);}
  .header.is-open .header__cta{background:var(--ink);color:#fff;}

  .header__nav{
    display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;margin:0;
    background:rgba(250,249,247,.98);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
  }
  .header.is-open .header__nav{max-height:340px;}
  .header__nav a{color:var(--ink);padding:18px 26px;border-bottom:1px solid var(--line);font-size:14px;}
  .header__nav a::after{display:none;}
}
@media (max-width:640px){
  .header__cta{font-size:11px;padding:10px 15px;gap:7px;}
}

/* =========================================================
   動きを抑えたい人への配慮（OSの「視差効果を減らす」がオンのとき）
   ---------------------------------------------------------
   移動・拡大・線の描画といった「動き」だけを止める。
   色の変化や下線など、動きではない反応は残す。
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}

  /* ヒーローの連続した登場演出を止め、最初から完成形で見せる */
  .hero__bg,.hero__rule,.hero__title,.hero__lead,.hero__photo,.hero__features{
    animation:none !important;}
  .hero__rule{width:96px;opacity:.85;}
  .hero__scroll i::after{animation:none !important;transform:none;}

  /* スクロール登場は無しにして、最初から表示 */
  .reveal--text,.reveal--media,
  .reveal--group > *,.reveal--flow > li{
    opacity:1 !important;transform:none !important;clip-path:none !important;
    transition:none !important;}

  /* 流れの線は描かずに、最初から引かれた状態にする */
  .flow__list li::before{transform:scaleX(1) !important;transition:none !important;}
  .flow__list li::after{opacity:1 !important;transition:none !important;}

  /* FAQ は高さを動かさず、即座に開閉 */
  .faq__body{transition:none !important;}

  /* hover の「浮き」「拡大」は無くし、色の変化だけ残す */
  .btn:hover{transform:none !important;}
  .btn:hover .arw{width:22px;}
  .header__nav{transition:none !important;}
}