/* =========================================================
   アルクコト — ハウススタイル「紙と墨と、ひとつの色」
   サイト共通：変数・下地・レイアウト・ヘッダー・道の線・CTA・フッター
   下層ページもこのファイルを読み込みます。
   ========================================================= */
:root{
  --paper:#F6F3EE;
  --paper-2:#ECE6DC;
  --ink:#22201D;
  --ink-2:#5B554D;
  --ink-3:#8A8278;
  --rule:#CFC8BD;
  --accent:#D2573A;          /* 朗色：「あなた」・道の線・CTAだけ */
  --accent-ink:#B7472B;      /* 小さい文字用（AA） */
  --night:#1E2A33;
  --night-2:#26343F;
  --night-ink:#ECE7DF;
  --night-ink-2:#A9B2B8;
  --night-rule:#3A4955;
  --accent-night:#E8795D;

  --f-say:"Zen Old Mincho","Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --f-body:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-num:"Cormorant Garamond","EB Garamond",Georgia,serif;

  --col-left:24px;
  --road-x:10px;
  --col-w:640px;
  --gutter:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hh:64px;
}
@media (min-width:720px){
  :root{ --col-left:calc(50% - 320px); --road-x:calc(50% - 360px); --gutter:40px; }
}
@media (min-width:1100px){
  :root{ --col-left:calc(50% - 280px); --road-x:calc(50% - 392px); --hh:76px; }
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hh) + 16px); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:2; letter-spacing:.04em;
  font-feature-settings:"palt" 0; font-kerning:normal;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  word-break:auto-phrase; line-break:strict; overflow-wrap:anywhere;
  overflow-x:clip;
}
@media (min-width:720px){ body{font-size:17px} }
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
em{font-style:normal}
strong{font-weight:700}
button{font:inherit;color:inherit}
::selection{background:rgba(210,87,58,.18)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ib{display:inline-block}
br.pc{display:none}
@media (min-width:1100px){ br.pc{display:inline} }
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 14px;font-size:14px;text-decoration:none}
.skip:focus{top:12px}

/* 「あなた」の色 */
.you{color:var(--accent-ink)}
.say .you,.fv-title .you,.h3 .you,.site-says .you,.refrain .you,.turn-t .you,.plan-lead .you{color:var(--accent)}

/* ---------- レイアウト ---------- */
.col{ margin-left:var(--col-left); margin-right:var(--gutter); max-width:var(--col-w); }
@media (max-width:719px){ .col{ margin-right:24px } }
.wide{ width:min(100% - 48px, 1120px); margin-inline:auto; }
@media (min-width:720px){ .wide{ width:min(100% - 80px, 1120px);} }
.prose p + p{ margin-top:1.4em }
.prose{ margin-top:2.2em; color:var(--ink) }
.prose p{ max-width:36em }

/* ---------- ヘッダー ---------- */
.gh{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--hh);transition:background-color .4s var(--ease), box-shadow .4s var(--ease)}
.gh.is-scrolled{background:rgba(246,243,238,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 1px 0 rgba(34,32,29,.08)}
.gh-in{height:100%;display:flex;align-items:center;gap:28px;padding:0 20px}
@media (min-width:1100px){ .gh-in{padding:0 40px} }
.logo{display:inline-block;position:relative;text-decoration:none;flex:none;font-size:21px;line-height:1;padding-bottom:.5em}
.logo-word{display:block;font-family:var(--f-say);font-weight:600;font-size:1em;letter-spacing:.2em;line-height:1;color:var(--ink);margin-right:-.2em;white-space:nowrap}
@media (min-width:1100px){ .logo{font-size:23px} }
/* 線は位置・長さ・太さをすべて em で。どのサイズでも社名と同じ比率で見える */
.logo-road{position:absolute;left:3.5em;width:2.35em;height:.329em;bottom:.08em;overflow:visible;display:block}
.logo-road path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gnav{margin-left:auto;display:none}
.gnav ul{display:flex;gap:26px}
.gnav a{font-size:13.5px;letter-spacing:.08em;text-decoration:none;color:var(--ink-2);position:relative;display:inline-block;padding:6px 0;transition:color .25s}
/* 下線はロゴと同じ線。幅だけ項目に合わせ、太さは伸び縮みさせない */
.gnav .nav-road{position:absolute;left:0;bottom:-1px;width:100%;height:.52em;overflow:visible;display:block;pointer-events:none;
  clip-path:inset(-60% 100% -60% -6%);transition:clip-path .42s var(--ease)}
.gnav .nav-road path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gnav a:hover{color:var(--ink)}
.gnav a:hover .nav-road,.gnav a[aria-current] .nav-road{clip-path:inset(-60% -8% -60% -6%)}
.gnav a[aria-current]{color:var(--ink)}
.gnav a[aria-current] .nav-road path{stroke:var(--accent)}
.gh-cta{margin-left:auto;font-size:13.5px;letter-spacing:.1em;text-decoration:none;color:var(--accent-ink);border:1px solid currentColor;border-radius:999px;padding:6px 16px 6px 17px;line-height:1.6;transition:background-color .25s,color .25s;white-space:nowrap}
.gh-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
@media (min-width:1100px){ .gnav{display:block} .gh-cta{margin-left:10px} .menu-btn{display:none!important} }
.menu-btn{display:inline-grid;place-content:center;gap:7px;width:40px;height:40px;margin-right:-8px;background:none;border:0;cursor:pointer}
.menu-btn span:not(.vh){display:block;width:22px;height:1.4px;background:var(--ink);transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4.2px) rotate(20deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.2px) rotate(-20deg)}
.drawer{position:fixed;inset:0;z-index:39;background:var(--paper);padding:calc(var(--hh) + 28px) 32px 40px;display:flex;flex-direction:column;gap:40px;overflow:auto}
.drawer[hidden]{display:none}
.drawer li a{display:block;font-family:var(--f-say);font-size:22px;letter-spacing:.08em;padding:12px 0;text-decoration:none;border-bottom:1px solid rgba(34,32,29,.08)}

/* ---------- 道の線 ---------- */
body{position:relative}
main{position:relative}
.road{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
.road path{fill:none;stroke:var(--accent);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.road circle{fill:var(--accent);opacity:0;transition:opacity .4s}
.road.is-walking circle{opacity:1}
main > section{position:relative}
main > section > *{position:relative;z-index:2}
.gf{position:relative}

/* ---------- 共通の見出し ---------- */
.say{font-family:var(--f-say);font-weight:500;letter-spacing:.05em;line-height:1.55;font-feature-settings:"palt" 1}
.beat{display:inline-block}
.h3{font-family:var(--f-body);font-weight:700;font-size:clamp(21px,2.3vw,28px);line-height:1.65;letter-spacing:.06em;font-feature-settings:"palt" 1}

/* ---------- 出現モーション（話す速度） ---------- */
.js .reveal,.js .say .beat{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease-out)}
.js .reveal.is-in,.js .say.is-in .beat{opacity:1;transform:none}
.js .say.is-in .beat:nth-child(2){transition-delay:.45s}
.js .say.is-in .beat:nth-child(3){transition-delay:.9s}
.js .say.is-in .beat:nth-child(4){transition-delay:1.35s}

/* ---------- CTA ---------- */
.cta{padding:clamp(140px,18vw,220px) 24px clamp(120px,14vw,180px);text-align:center;overflow:hidden}
.cta-eyebrow{font-family:var(--f-say);font-size:clamp(18px,1.8vw,22px);letter-spacing:.14em}
.cta-stage{position:relative;max-width:1000px;margin:clamp(48px,6vw,72px) auto 0}
.call--cta{width:min(100%,520px);margin:0 auto}
.murmurs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.mm{position:relative;font-size:14px;line-height:1.7;letter-spacing:.04em;background:#fff;border-radius:14px;padding:12px 14px;text-align:left;box-shadow:0 1px 0 rgba(34,32,29,.06)}
.mm::after{content:"";position:absolute;bottom:-6px;left:22px;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0}
@media (min-width:900px){
  .murmurs{display:block;margin:0}
  .mm{position:absolute;z-index:3;white-space:nowrap;font-size:15px;padding:13px 20px}
  .mm1{left:0;top:6%}
  .mm2{left:3%;top:52%}
  .mm3{right:0;top:14%}
  .mm4{right:4%;top:62%}
  .mm3::after,.mm4::after{left:auto;right:22px;border-radius:0 0 3px 0}
  .mm1,.mm2{transform:translateX(0)}
}
.cta-ask{margin-top:clamp(48px,6vw,72px);font-size:clamp(16px,1.6vw,19px);letter-spacing:.1em;color:var(--ink-2)}
.cta-title{margin-top:16px;font-size:clamp(28px,4vw,54px);line-height:1.55}
.cta-go{display:flex;justify-content:center;margin-top:clamp(44px,5vw,64px)}
.btn-cta{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-width:min(100%,340px);padding:24px 44px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-size:18px;font-weight:700;letter-spacing:.16em;line-height:1.3;box-shadow:0 18px 30px -18px rgba(180,70,40,.7);transition:background-color .3s,transform .4s var(--ease-out),box-shadow .4s}
.btn-cta svg{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .4s var(--ease-out)}
.btn-cta:hover{background:#BF4A2E;transform:translateY(-2px);box-shadow:0 24px 36px -18px rgba(180,70,40,.75)}
.btn-cta:hover svg{transform:translateX(5px)}
.btn-cta--sm{padding:16px 28px;font-size:16px;min-width:0;align-self:flex-start}

/* ---------- フッター ---------- */
.gf{background:var(--ink);color:#D9D3CA;padding:clamp(72px,9vw,110px) 24px 32px}
.gf-in{max-width:1120px;margin:0 auto;display:grid;gap:52px}
@media (min-width:960px){ .gf-in{grid-template-columns:196px 1fr;gap:44px} }
.logo--inv .logo-word{color:#F2EDE5}
.gf-motto{margin-top:8px;font-family:var(--f-say);font-weight:600;font-size:14px;letter-spacing:.2em;color:var(--accent-night)}
.gf-map{display:grid;gap:36px 44px;line-height:1.8}
@media (min-width:720px){ .gf-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 56px} }
/* PCでは、カテゴリーを縦に積んで「サービス名｜コピー」の1行に */
@media (min-width:960px){
  .gf-map{grid-template-columns:1fr;gap:clamp(32px,3.6vw,44px)}
  .gf-map ul{gap:9px}
  .gf-map li a{display:flex;align-items:baseline;flex-wrap:wrap}
  .gf-map li b{flex:none;min-width:var(--gf-name,192px);padding-right:.6em}
  .gf-map li span{margin-top:0}
  .gf-map li span::before{content:"｜";margin-right:.4em;color:#544E48}
}
.gf-map p{font-family:var(--f-say);font-weight:600;font-size:16px;letter-spacing:.12em;line-height:1.6;color:#F2EDE5}
.gf-map p a{position:relative;display:inline-block;padding-bottom:2px}
.gf-map .nav-road{position:absolute;left:0;bottom:-3px;width:100%;height:.4em;overflow:visible;display:block;pointer-events:none}
.gf-map .nav-road path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gf-map p + p{margin-top:14px}
.gf-map ul{margin-top:14px;display:grid;gap:13px}
.gf-map a{text-decoration:none;display:block}
.gf-map li b{display:block;font-weight:500;font-size:14px;letter-spacing:.06em;line-height:1.7;color:#EDE7DE;transition:color .25s}
.gf-map li span{display:block;margin-top:1px;font-size:13.5px;line-height:1.8;letter-spacing:.02em;color:#C6BFB5;transition:color .25s}
.gf-map li a:hover b{color:#fff}
.gf-map li a:hover span{color:#EDE7DE}
.gf-map p a{transition:color .25s}
.gf-map p a:hover{color:#fff}
.gf-map p a:hover .nav-road path{stroke:var(--accent-night)}
.gf-map .nav-road path{transition:stroke .25s}
.gf-map small{margin-left:.6em;font-size:10.5px;border:1px solid #4A4540;border-radius:4px;padding:0 5px;color:#857D72;font-weight:400}
.gf-sub{margin-top:clamp(26px,3.4vw,38px);display:grid;gap:9px;justify-items:start;font-size:13.5px;letter-spacing:.08em;line-height:1.8}
.gf-sub a{font-weight:500;color:#F2EDE5;text-decoration:none}
.gf-sub a:hover{text-decoration:underline;text-underline-offset:4px}
.gf-copy{max-width:1120px;margin:72px auto 0;padding-top:24px;border-top:1px solid #3A3632;color:#857D72;font-family:var(--f-num);letter-spacing:.1em}

.float-cta{position:fixed;right:16px;bottom:16px;z-index:30;background:var(--accent);color:#fff;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.12em;padding:12px 20px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(120,50,30,.6);transform:translateY(90px);transition:transform .5s var(--ease-out)}
.float-cta.is-on{transform:none}
@media (min-width:1100px){ .float-cta{display:none} }

/* ---------- 動きを減らす ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .say .beat,.js .fv-title .ib,.js .fv-beats .beat,.js .know-row > span{opacity:1!important;transform:none!important}
}

.y,.range-own-n,.steps-cap span,.plan-n,.n50,.spec-no,.mile-no,.gf-copy,.power-idx,.big-n,.steps-list li::after{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* =========================================================
   明朝の語りを、全体で一段強く（細く・薄い印象を解消）
   ========================================================= */
.say,.cta-eyebrow,.cta-ask{font-weight:600}
.cta-eyebrow{font-size:clamp(20px,2vw,26px);color:var(--ink)}
.cta-ask{font-family:var(--f-say);font-size:clamp(19px,1.9vw,24px);letter-spacing:.1em;color:var(--ink)}
.gf-map li .nolink{display:block;font-style:normal}
@media (min-width:960px){ .gf-map li .nolink{display:flex;align-items:baseline;flex-wrap:wrap} }