/* =====================================================================
   8Peak 新トップ（docs/mock/8peak-mock-v6.html から移植）
   ムードボード（緑・自然・Noto Serif/Sans）を規格として採用。
   写真は本人の顔写真のみ。風景・物撮り・ストックフォトは使わず、
   八ヶ岳の稜線を引いた「線」を全ページの通奏低音にする。
   数値はすべて :root に集約（仕掛け①②の数値は途中の2つ目の :root）。
   layouts/site.blade.php からのみ読み込む。
   ===================================================================== */
:root{
  /* ---- 色（ムードボードのパレット） ---- */
  --paper:#FAF8F1;      /* 背景。わずかに黄みのある生成り */
  --white:#FFFFFF;      /* 最明面。表・フォームなど確定した箇所だけ */
  --ink:#111111;        /* 本文・見出し */
  --ink-2:#5B6058;      /* 補助テキスト */
  --green:#2E5A45;      /* メイン。濃い面とボタン */
  --sage:#8FBFA5;       /* アクセント。稜線の奥・下線。1画面に1回まで */
  --sand:#D9C9B8;       /* サブ。等高線・区切り */
  --line:#DFDACB;       /* 罫線。1pxのみ（0.5pxは端末で消えるため使わない） */
  --ink-on-green:#F1F4EC;
  --ink-on-green-2:#A9BFB1;

  /* ---- 書体 ---- */
  --font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;  /* 見出し */
  --font-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;      /* 本文・UI */

  /* ---- 寸法 ---- */
  --body:16px;
  --wrap:1120px;                        /* 中身の最大幅 */
  --measure:32em;                       /* 本文の最大行長（和文で約32字） */
  --pad:clamp(20px,5vw,72px);           /* 画面左右の余白 */
  --sec-y:clamp(64px,9vw,132px);        /* セクションの上下余白 */
  --radius:4px;                         /* 角丸は最小限。カード然とさせない */

  /* ---- 動き（実機を見て調整する前提。埋め込み禁止） ---- */
  --rise-dur:600ms;      /* 下からのフェードイン：かかる時間 */
  --rise-shift:16px;     /* 下からのフェードイン：動く距離 */
  --rise-step:90ms;      /* 連続する要素の間隔 */
  --hover-dur:180ms;     /* ホバーの反応。200msを超えない */
  --ridge-dur:1100ms;    /* 表紙の稜線が浮かび上がる時間 */
  --fab-dur:240ms;       /* 追従ボタンが出る・消える時間 */
  --fab-shift:12px;      /* 追従ボタンが消えるとき下へずれる距離 */

  /* ---- 重なり順（固定スケール） ---- */
  --z-ridge:0;
  --z-content:1;
  --z-header:10;
  --z-fab:15;            /* 追従ボタン。ヘッダーより上、全画面メニューより下 */
  --z-menu:20;
}

/* ---------- 下地 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--body);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-size:.95rem;
  letter-spacing:.02em;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.5;text-wrap:balance;word-break:auto-phrase}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- 見出しの組（セクション名＋日本語見出し） ---------- */
.lede{font-family:var(--font-sans);font-size:.8rem;font-weight:500;color:var(--green);letter-spacing:.16em;margin-bottom:14px}
.lede::before{content:"";display:inline-block;width:22px;height:1px;background:var(--sage);vertical-align:middle;margin-right:10px}
.h2{font-size:clamp(1.5rem,3.4vw,2.15rem);margin-bottom:20px}
.note{color:var(--ink-2);max-width:var(--measure)}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:999px;
  font-size:.9rem;font-weight:500;white-space:nowrap;
  transition:background-color var(--hover-dur) ease-out,color var(--hover-dur) ease-out,border-color var(--hover-dur) ease-out;
}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:#24462F}
.btn--ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--green);color:var(--green)}
.btn--onGreen{background:#fff;color:var(--green)}
.btn--onGreen:hover{background:var(--paper)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.82rem}

/* ---------- 動き（スクロールで下から現れる） ---------- */
.js .rise{opacity:0;transform:translateY(var(--rise-shift))}
.js .rise.is-in{opacity:1;transform:none;transition:opacity var(--rise-dur) ease-out,transform var(--rise-dur) ease-out}
.js .rise.is-in:nth-child(2){transition-delay:var(--rise-step)}
.js .rise.is-in:nth-child(3){transition-delay:calc(var(--rise-step)*2)}
.js .rise.is-in:nth-child(4){transition-delay:calc(var(--rise-step)*3)}

/* =====================================================================
   partial: layouts/partials/header.blade.php
   ===================================================================== */
.hd{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:border-color var(--hover-dur) ease-out}
.hd.is-stuck{border-bottom-color:var(--line)}
.hd__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-height:72px;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.hd__logo{display:flex;align-items:center;gap:9px;font-family:var(--font-serif);font-size:1.15rem;letter-spacing:.04em;margin-right:auto}
.hd__mark{width:22px;height:22px;color:var(--green);flex:none}
.hd__nav{display:flex;gap:clamp(14px,2vw,26px);font-size:.85rem}
.hd__nav a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color var(--hover-dur) ease-out,color var(--hover-dur) ease-out}
.hd__nav a:hover{color:var(--green);border-bottom-color:var(--sage)}
.hd__burger{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.hd__burger span{display:block;width:22px;height:1px;background:currentColor;margin:5px auto}

/* 全画面メニュー（スマホ） */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--paper);padding:var(--pad);height:100dvh;overflow-y:auto;padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom))}
.menu[hidden]{display:none}
.menu__top{display:flex;align-items:center;min-height:72px;margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 24px;padding-inline:var(--pad)}
.menu__close{margin-left:auto;width:44px;height:44px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.menu__list{display:grid;gap:2px;font-family:var(--font-serif);font-size:1.2rem}
.menu__list a{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
.menu__cta{margin-top:32px;display:grid;gap:12px}

/* =====================================================================
   partial: sections/hero.blade.php
   表紙。稜線は外し、余白を詰めた版（docs/mock/8peak-splash-v4.html）。写真は使わない
   ===================================================================== */
.hero{padding-block:clamp(36px,8vw,90px) clamp(48px,9vw,110px)}
.hero h1{font-size:clamp(1.9rem,6vw,3.6rem);line-height:1.42;margin-bottom:22px}
.hero__lead{max-width:var(--measure);color:var(--ink-2);margin-bottom:28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.hero__years{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;border-top:1px solid var(--line);padding-top:16px;max-width:var(--measure)}
.hero__count{display:flex;align-items:baseline;gap:4px;flex:none}
.hero__num{font-family:var(--font-serif);font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.hero__unit{font-size:.9rem;color:var(--ink-2)}
.hero__exp{flex:1 1 17em;min-width:0;font-size:.82rem;color:var(--ink-2);line-height:1.8;word-break:auto-phrase;text-wrap:pretty}
/* 表紙の右側・よくいただく相談。広い画面で2カラム、900px以下は縦に積む */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,64px);align-items:start}
@media (min-width:901px){
  .hero__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(32px,4vw,64px)}
  .hero__main h1{font-size:clamp(1.9rem,6vw,3.1rem)}   /* 左カラムに「あなたのビジネスに」が1行で入る大きさ */
}
.asks{padding-top:clamp(0px,2vw,18px)}
.asks__label{font-size:.8rem;font-weight:500;color:var(--green);letter-spacing:.16em;margin-bottom:22px}
.asks__label::before{content:"";display:inline-block;width:22px;height:1px;background:var(--sage);vertical-align:middle;margin-right:10px}
/* チャットのように下から上へ流す。高さは JS が固定し、下端に揃えて積む。JS がないときは先頭の4つ（スマホは3つ）を静止表示 */
.asks__list{list-style:none;display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.asks__list li:nth-child(n+5){display:none}
.asks__list.is-measure li{display:block!important}
.ask{position:relative;display:block;width:min(90%,24em);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px 15px;transition:border-color var(--hover-dur) ease-out,transform var(--hover-dur) ease-out}
.ask:hover{border-color:var(--green);transform:translateY(-2px)}
.ask__tag{display:block;font-size:.72rem;letter-spacing:.12em;color:var(--green);line-height:1.6;margin-bottom:4px}
.ask__text{display:block;font-family:var(--font-serif);font-weight:500;font-size:1.02rem;line-height:1.75;text-wrap:pretty}
/* 吹き出しのしっぽ。外側の線の色と内側の面の色を重ねて作る */
.ask::before,.ask::after{content:"";position:absolute;left:26px;width:14px;height:8px;clip-path:polygon(0 0,100% 0,0 100%)}
.ask::before{bottom:-9px;background:var(--line);transition:background-color var(--hover-dur) ease-out}
.ask::after{bottom:-8px;background:var(--white)}
.ask:hover::before{background:var(--green)}
.asks__foot{margin-top:26px;font-size:.82rem;color:var(--ink-2);line-height:1.8}
.asks__foot a{color:var(--ink);border-bottom:1px solid var(--sage);padding-bottom:1px;transition:color var(--hover-dur) ease-out}
.asks__foot a:hover{color:var(--green)}
/* 561px以上：偶数番目を右に寄せて、会話のように左右にずらす */
@media (min-width:561px){
  .ask:nth-child(even){margin-left:auto}
  .ask:nth-child(even)::before,.ask:nth-child(even)::after{left:auto;right:26px;clip-path:polygon(0 0,100% 0,100% 100%)}
}
/* スマホ（560px以下）は3つずつ流す */
@media (max-width:560px){
  .ask{width:100%}
  .asks__list li:nth-child(n+4){display:none}
}
/* 表紙の下・できることの一覧（目次）。下のサービス欄と絵が重ならないよう、文字と罫線だけで小さく扱う */
.index{margin-top:clamp(30px,6vw,52px)}
.index__lead{font-size:.78rem;font-weight:500;color:var(--green);letter-spacing:.14em;margin-bottom:14px}
.index__lead::before{content:"";display:inline-block;width:20px;height:1px;background:var(--sage);vertical-align:middle;margin-right:9px}
.index__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,3vw,40px)}
.index__grid a{display:block;padding:13px 0;border-top:1px solid var(--line);font-size:.84rem;line-height:1.6;transition:color var(--hover-dur) ease-out,border-color var(--hover-dur) ease-out}
.index__grid a:hover{color:var(--green);border-top-color:var(--sage)}
@media (min-width:600px){ .index__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){ .index__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* 稜線（いまは表紙から外している。戻すときは .hero に position:relative と下の余白が要る） */
.ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:var(--z-ridge);pointer-events:none}
.ridge .back{fill:none;stroke:var(--sage);stroke-width:1.2}
.ridge .front{fill:none;stroke:var(--green);stroke-width:1.6}
.ridge .contour{fill:none;stroke:var(--sand);stroke-width:1}
.js .ridge g{opacity:0}
.js .ridge.is-in g{opacity:1;transition:opacity var(--ridge-dur) ease-out}
.js .ridge.is-in .front{transition-delay:180ms}

/* =====================================================================
   partial: sections/about.blade.php
   顔写真を前面に。誰に頼むのかが見える場所
   ===================================================================== */
.about{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.about__in{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.about__fig{position:relative}
.portrait{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:700/860;object-position:50% 22%}
.about h2{font-size:clamp(1.5rem,3.4vw,2.15rem);margin-bottom:22px}
.about p{max-width:var(--measure);margin-bottom:18px}
.about__name{font-family:var(--font-serif);font-size:1.05rem;border-left:2px solid var(--sage);padding-left:14px;line-height:1.7;margin-bottom:28px}
.about__name small{display:block;font-family:var(--font-sans);font-size:.78rem;color:var(--ink-2);letter-spacing:.08em}

/* =====================================================================
   partial: sections/services.blade.php
   8つの仕事。カードを8枚並べず、罫線で区切った一覧にする
   ===================================================================== */
.services{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);margin-top:44px}
.svc__item{padding:26px 0 30px;border-top:1px solid var(--line)}
.svc__icon{width:26px;height:26px;color:var(--green);margin-bottom:14px}
.svc__item h3{font-size:1rem;margin-bottom:8px}
.svc__item p{font-size:.83rem;color:var(--ink-2);line-height:1.8}
.svc__tail{margin-top:36px;font-size:.88rem;color:var(--ink-2)}

/* =====================================================================
   partial: sections/works.blade.php
   実績。3枚のカードではなく、横幅いっぱいの帯を3本。真ん中だけ濃い面
   ===================================================================== */
.works{border-top:1px solid var(--line);padding-top:var(--sec-y)}
.works__head{margin-bottom:8px}
.work{border-top:1px solid var(--line)}
.work:last-of-type{border-bottom:1px solid var(--line)}
.work__in{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,300px);gap:clamp(16px,3vw,48px);align-items:baseline;padding-block:clamp(28px,4vw,46px)}
.work__tag{font-size:.78rem;letter-spacing:.1em;color:var(--green)}
.work h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
.work p{font-size:.85rem;color:var(--ink-2)}
.work--dark{background:var(--green);color:var(--ink-on-green);border-color:var(--green)}
.work--dark .work__tag{color:var(--sage)}
.work--dark p{color:var(--ink-on-green-2)}
.work__more{padding-block:28px}

/* =====================================================================
   partial: sections/price.blade.php
   料金。速さを先に、金額を後に。3枚カードにはしない
   ===================================================================== */
.price{padding-block:var(--sec-y)}
.price__speed{font-family:var(--font-serif);font-size:clamp(1.2rem,2.6vw,1.6rem);margin:28px 0 8px}
.price__table{width:100%;border-collapse:collapse;margin-top:36px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.price__table th,.price__table td{text-align:left;padding:22px clamp(14px,2.4vw,28px);border-bottom:1px solid var(--line);vertical-align:top}
.price__table tr:last-child th,.price__table tr:last-child td{border-bottom:0}
.price__table th{font-family:var(--font-serif);font-size:1rem;font-weight:600;width:34%}
.price__table th small{display:block;font-family:var(--font-sans);font-size:.78rem;font-weight:400;color:var(--ink-2);margin-top:4px}
.price__amt{font-family:var(--font-serif);font-size:clamp(1.1rem,2.4vw,1.35rem);color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.price__detail{font-size:.83rem;color:var(--ink-2);line-height:1.85}
.price__tail{margin-top:20px;font-size:.83rem;color:var(--ink-2)}

/* =====================================================================
   partial: sections/flow.blade.php
   ご相談から公開までの順番。番号は順序があるから使う
   ===================================================================== */
.flow{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.flow__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:44px}
.flow__step{position:relative;padding-top:34px}
.flow__step::before{content:"";position:absolute;top:9px;left:0;right:0;height:1px;background:var(--line)}
.flow__step::after{content:"";position:absolute;top:6px;left:0;width:7px;height:7px;border-radius:50%;background:var(--green)}
.flow__n{position:absolute;top:22px;left:0;font-size:.72rem;letter-spacing:.14em;color:var(--sage);font-variant-numeric:tabular-nums}
.flow__step h3{font-size:.95rem;margin:16px 0 6px}
.flow__step p{font-size:.8rem;color:var(--ink-2);line-height:1.8}

/* =====================================================================
   partial: sections/blog.blade.php
   ===================================================================== */
.blog{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.blog__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.blog__list{margin-top:32px;border-top:1px solid var(--line)}
.blog__list a{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:clamp(12px,2vw,32px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);transition:color var(--hover-dur) ease-out}
.blog__list a:hover{color:var(--green)}
.blog__date{font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.blog__title{font-family:var(--font-serif);font-size:1rem}

/* =====================================================================
   partial: sections/contact.blade.php
   ===================================================================== */
.contact{background:var(--green);color:var(--ink-on-green);padding-block:var(--sec-y);position:relative;overflow:hidden}
.contact .lede{color:var(--sage)}
.contact .lede::before{background:var(--sage)}
.contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,80px);align-items:start;position:relative;z-index:var(--z-content)}
.contact h2{font-size:clamp(1.6rem,3.6vw,2.3rem);margin-bottom:20px}
.contact p{color:var(--ink-on-green-2);max-width:var(--measure);margin-bottom:16px}
.form{display:grid;gap:16px;background:var(--white);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.field{display:grid;gap:7px}
.field label{font-size:.8rem;color:var(--ink);font-weight:500}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:.9rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;min-height:50px;
  transition:border-color var(--hover-dur) ease-out;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green)}
.field label small{font-weight:400;color:var(--ink-2)}
.field textarea{min-height:132px;resize:vertical;line-height:1.8}
.form__note{font-size:.78rem;color:var(--ink-2);line-height:1.8}
.form__note a{color:var(--green);border-bottom:1px solid var(--sage)}
.form .btn{width:100%}
/* フォームの状態表示。本番のお問い合わせ処理（session / @error / ハニーポット）用。モックには無い */
/* 送信結果の置き場（site.js が差し込む）。
   display:contents なので、この箱自体は grid の1行を取らない。
   中身が出たときだけ、これまでどおり .form__alert が1行ぶん並ぶ */
.form__status{display:contents}
.form .btn[disabled]{opacity:.6;cursor:default}
.form__alert{padding:12px 14px;border-radius:var(--radius);font-size:.85rem;line-height:1.7}
.form__alert--success{background:#EEF4EF;color:var(--green);border:1px solid var(--sage)}
.form__alert--error{background:#FBF0EE;color:#8A3B2E;border:1px solid #E3B8AE}
.field__error{font-size:.78rem;color:#8A3B2E}
.field.is-error input,.field.is-error textarea,.field.is-error select{border-color:#C9705F}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}


/* =====================================================================
   partial: layouts/partials/footer.blade.php
   ===================================================================== */
.ft{padding-block:clamp(40px,6vw,64px);border-top:1px solid var(--line)}
.ft__in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.ft__logo{display:flex;align-items:center;gap:9px;font-family:var(--font-serif);font-size:1.05rem}
.ft__nav{display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem;color:var(--ink-2)}
.ft__nav a:hover{color:var(--green)}
.ft__copy{width:100%;font-size:.75rem;color:var(--ink-2);line-height:1.9;border-top:1px solid var(--line);padding-top:20px;margin-top:8px}

/* =====================================================================
   仕掛けの数値。v4.5 から移植し、v5 のパレット・書体に合わせ直した
   ===================================================================== */
:root{
  /* ---- 仕掛け①：できるまで（スライダー） ---- */
  --phone-w:clamp(250px,68vw,330px);   /* スマホ枠の幅（画面の高さに余裕があるとき） */
  --phone-rw:9;                        /* スマホ枠の縦横比：横。v6 は 9:17.5 */
  --phone-rh:15;                       /* スマホ枠の縦横比：縦。iPhone SE でも枠が収まるよう縮めた */
  --phone-reserve:236px;               /* 画面の高さから引く分（ヘッダー72＋つまみ一式約150＋余白）。枠の幅は (100svh − これ) × 9/15 まで縮む */
  --phone-min:180px;                   /* 横向きなどで縮みすぎないための下限 */
  --radius-phone:28px;                 /* スマホ枠の角丸 */
  --build-rise:14px;                   /* 部品が下から上がってくる距離 */
  --build-seg:.2;                      /* 1区切りの長さ。相談→打ち合わせ→ラフ→文字入れ→写真→完成 で5区切り */
  --build-seg2:.4;                     /* 上の2区切ぶん（相談＋打ち合わせ）。--build-seg を変えたらここも合わせる */
  --build-half:.1;                     /* 上の半区切ぶん（写真と仕上げで分ける） */
  --build-nudge-to:.46;                /* 視界に入ったとき自動で進める量（0〜1）。ラフに入る手前まで */
  --build-nudge-ms:1600;               /* 自動で進める時間 */
  --thumb-size:44px;                   /* スライダーのつまみ */

  /* ---- 説明用サロン「oshi nail」の色。8Peakの緑とは別の店の色 ---- */
  --salon-bg:#FBFAF9;
  --salon-soft:#F6F3F0;                /* 帯の地 */
  --salon-line:#E7E2DE;
  --salon-muted:#8C8580;
  --salon-accent:#A8547A;
  --salon-pink:#E8B4C8;
  --salon-ink:#23201F;
  --salon-ph-a:#E8B4C8;                /* 仮写真の明るい側 */
  --salon-ph-b:#A8547A;                /* 仮写真の暗い側 */
  --font-mono:"Cousine",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* サロンの英字ラベル。Webフォントは読み込まない */

  /* ---- 仕掛け②：速さくらべ ---- */
  --race-slow-ms:7000;                 /* 直す前：表示完了まで。PageSpeed 20〜30点台の実測レンジ */
  --race-fast-ms:1600;                 /* 直した後：表示完了まで。97点の実測レンジ */
  --race-peek-ms:420;                  /* 視界に入ったとき「少し動いて止まる」時間 */
  --el-fade-ms:260;                    /* 各部品が現れるフェード */
  /* 各部品が出そろう位置（読み込み全体を1としたときの比率） */
  --at-slow-header:.30; --at-slow-text:.52; --at-slow-image:.72; --at-slow-list:.92;
  --at-fast-header:.22; --at-fast-text:.42; --at-fast-image:.70; --at-fast-list:.90;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* =====================================================================
   partial: sections/race.blade.php
   仕掛け②：遅いサイトと速いサイトを同時に読み込ませる。実績の続き
   ===================================================================== */
.race{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.race__head{margin-bottom:clamp(28px,4vw,48px)}
.race__track{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,3vw,40px);align-items:start}
.lane{display:grid;gap:10px}
.lane__top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:clamp(13px,1.8vw,16px);font-weight:500}
.clock{font-family:var(--font-serif);font-size:clamp(26px,4.6vw,42px);line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums}
.clock.done{color:var(--green)}
.clock small{font-family:var(--font-sans);font-size:.42em;margin-left:.15em}
.screen{
  position:relative;aspect-ratio:9/13;overflow:hidden;background:var(--white);
  border:1px solid var(--line);border-radius:10px;
  font-size:clamp(7px,1.6vw,11px);line-height:1.5;color:var(--ink);
}
.screen .el{opacity:0;transform:translateY(6px)}
.race.running .screen .el{animation:el-in var(--el-fade-ms) ease-out forwards;animation-delay:calc(var(--T) * var(--at))}
.race.peek .screen .el{animation:el-in var(--el-fade-ms) ease-out forwards;animation-delay:calc(var(--T) * var(--at));animation-play-state:paused}
.race.settled .screen .el{opacity:1;transform:none}
@keyframes el-in{to{opacity:1;transform:none}}
.lane--slow .screen{--T:calc(var(--race-slow-ms) * 1ms)}
.lane--fast .screen{--T:calc(var(--race-fast-ms) * 1ms)}
.lane--slow .el-header{--at:var(--at-slow-header)} .lane--slow .el-text{--at:var(--at-slow-text)} .lane--slow .el-image{--at:var(--at-slow-image)} .lane--slow .el-list{--at:var(--at-slow-list)}
.lane--fast .el-header{--at:var(--at-fast-header)} .lane--fast .el-text{--at:var(--at-fast-text)} .lane--fast .el-image{--at:var(--at-fast-image)} .lane--fast .el-list{--at:var(--at-fast-list)}
.sc-in{padding:8% 7%;display:grid;gap:6%}
.sc-header{display:flex;justify-content:space-between;align-items:center}
.sc-header b{font-family:var(--font-serif);font-weight:600;font-size:1.25em}
.sc-header i{display:block;width:22%;height:2px;border-radius:2px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}
.sc-text b{display:block;font-family:var(--font-serif);font-size:1.55em;line-height:1.35;margin-bottom:.3em}
.sc-image{aspect-ratio:16/10;border-radius:4px;background:linear-gradient(120deg,var(--sage),var(--green))}
.sc-list{display:grid;gap:4%}
.sc-list div{display:flex;justify-content:space-between;gap:1em;border-bottom:1px solid var(--line);padding-bottom:3%}
.screen__wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2);font-size:clamp(9px,1.8vw,12px);text-align:center;padding:12%;transition:opacity 300ms ease-out}
.race.running .screen__wait,.race.settled .screen__wait,.race.peek .screen__wait{opacity:0}
.race__go{display:grid;justify-items:center;gap:10px;margin:clamp(22px,3vw,34px) auto 0}
.race.peek .race__go .btn{animation:go-nudge 900ms ease-out 1}
@keyframes go-nudge{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.race__why{margin-top:clamp(44px,6vw,88px);display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.race__why h3{font-size:clamp(1.15rem,2.4vw,1.5rem)}
.fixes{display:grid;counter-reset:fix;list-style:none}
.fix{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.fix:last-child{border-bottom:1px solid var(--line)}
.fix::before{counter-increment:fix;content:counter(fix);font-family:var(--font-serif);font-size:1.8em;line-height:1;color:var(--sage);font-variant-numeric:tabular-nums}
.fix b{display:block;font-size:.95rem;margin-bottom:.2em;font-weight:500}
.fix span{font-size:.83rem;color:var(--ink-2);line-height:1.8}

/* =====================================================================
   partial: sections/build.blade.php
   仕掛け①：つまみを動かすと、白紙からホームページが組み上がる
   ===================================================================== */
.build{padding-block:var(--sec-y);border-top:1px solid var(--line);background:#F2F4EC}
.build__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
.build__copy p{margin-bottom:1em}
.build__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}
.build__stage{display:grid;justify-items:center;gap:22px}
/* 枠の幅は「指定幅」と「画面の高さから逆算した幅」の小さいほう。背の低いスマホでは枠ごと縮む */
.phone{
  width:max(var(--phone-min), min(var(--phone-w), calc((100svh - var(--phone-reserve)) * var(--phone-rw) / var(--phone-rh))));
  aspect-ratio:var(--phone-rw) / var(--phone-rh);
  container-type:inline-size;          /* 中身の文字を枠の幅に比例させる（100cqw） */
  background:#14140F;border-radius:var(--radius-phone);padding:10px;
  box-shadow:0 30px 60px -30px rgba(17,17,17,.45);
}
.phone__screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--radius-phone) - 10px);background:var(--salon-bg);
  /* 進行度 --p（0〜1）を段階に分解する。区切りは --build-seg */
  --n:clamp(0, calc(var(--p) / var(--build-seg2)), 1);                            /* 相談・打ち合わせ：メモ */
  --s:clamp(0, calc((var(--p) - var(--build-seg2)) / var(--build-seg)), 1);       /* ラフ：骨組み */
  --t:clamp(0, calc((var(--p) - var(--build-seg)*3) / var(--build-seg)), 1);      /* 文字入れ */
  --i:clamp(0, calc((var(--p) - var(--build-seg)*4) / var(--build-half)), 1);     /* 写真 */
  --c:clamp(0, calc((var(--p) - var(--build-seg)*4.5) / var(--build-half)), 1);   /* 完成：色がつく */
  filter:grayscale(calc(1 - var(--c)));
  color:var(--salon-ink);line-height:1.5;
  font-size:11px;font-size:calc(100cqw / 21);   /* 画面の中はすべて em。枠が縮めば中身も同じ比率で縮む */
  font-family:var(--font-sans);letter-spacing:0;
}
/* 白い面：色がつくまで上にかぶせておく */
.phone__screen::before{content:"";position:absolute;inset:0;background:#fff;opacity:calc(1 - var(--c));pointer-events:none;z-index:1}
.ss{position:relative;z-index:2;padding:.8em .8em 0;display:grid;gap:.65em}
/* 相談・打ち合わせで出る手書きのメモ。骨組みが立つと消える */
.ss-notes{position:absolute;inset:0;z-index:3;padding:2em 1.6em;display:grid;align-content:center;gap:1em;opacity:calc(1 - var(--s));pointer-events:none}
.nt{--v:clamp(0, calc((var(--n) - var(--d)*.8) / .2), 1);opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 6px));
    font-family:var(--font-serif);font-size:.95em;line-height:1.5;color:var(--salon-ink);padding-left:1.3em;position:relative}
.nt::before{content:"";position:absolute;left:0;top:.72em;width:.65em;height:1px;background:var(--salon-accent)}
/* 部品の骨組み：--d は登場順（0〜1） */
.bx{
  --v:clamp(0, calc((var(--s) - var(--d)*.6) / .4), 1);
  opacity:var(--v);
  transform:translateY(calc((1 - var(--v)) * var(--build-rise)));
  background:rgba(35,32,31,calc(.06 * (1 - var(--c))));
  outline:1px dashed rgba(35,32,31,calc(.5 * (1 - var(--c))));
  outline-offset:-1px;border-radius:3px;position:relative;
}
.tx{--v:clamp(0, calc((var(--t) - var(--d)*.6) / .4), 1);opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 4px))}
/* 仮写真：写真の段階で差し込まれる */
.im{--v:clamp(0, calc((var(--i) - var(--d)*.6) / .4), 1);opacity:var(--v);position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(135deg,var(--salon-ph-a),var(--salon-ph-b))}
.im.alt{background:linear-gradient(160deg,var(--salon-ph-b),var(--salon-ph-a) 75%)}
.im.soft{background:linear-gradient(200deg,var(--salon-soft),var(--salon-ph-a) 80%)}

/* ボタン類：完成までは線だけ、完成で塗りが入る */
.ss-pill,.ss-cta{justify-self:start;border-radius:999px;font-weight:700;white-space:nowrap;
  border:1px solid rgba(35,32,31,calc(.45 * (1 - var(--c))));
  background:rgba(35,32,31,var(--c));
  color:rgb(calc(35 + 216 * var(--c)) calc(32 + 218 * var(--c)) calc(31 + 218 * var(--c)))}
.ss-pill{font-size:.62em;padding:.45em 1em}
.ss-cta{font-size:.72em;padding:.75em 1.6em}
.ss-eyebrow{font-family:var(--font-mono);font-size:.52em;letter-spacing:.24em;color:var(--salon-accent);white-space:nowrap}

.ss-head{display:flex;justify-content:space-between;align-items:center;gap:.6em;min-height:2.7em;padding:0 .5em}
.ss-brand{display:grid;line-height:1.2}
.ss-brand b{font-size:1em;font-weight:700;letter-spacing:.16em;white-space:nowrap}
.ss-brand small{font-family:var(--font-mono);font-size:.46em;letter-spacing:.2em;color:var(--salon-muted);white-space:nowrap}

.ss-hero{display:grid;gap:.5em;padding:.8em .6em .9em}
.ss-h1{font-size:1.3em;line-height:1.4;font-weight:700}
.ss-lead{font-size:.68em;line-height:1.7;color:#4A4441}

.ss-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45em}
.ss-ph{aspect-ratio:1;overflow:hidden}

.ss-menu{display:grid;gap:.4em;padding:.6em .6em .5em}
.ss-menu-row{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;font-size:.7em;border-bottom:1px solid rgba(35,32,31,.12);padding-bottom:.45em}
.ss-menu-row:last-child{border-bottom:0;padding-bottom:0}
.ss-menu-row b{font-weight:500}
.ss-menu-row span:last-child{font-family:var(--font-mono);white-space:nowrap}

/* 予約の帯：完成で濃い地になる */
.bx.ss-book{display:grid;gap:.6em;padding:.9em .8em;
  background:rgba(35,32,31,calc(.06 * (1 - var(--c)) + var(--c)));
  color:rgb(calc(35 + 216 * var(--c)) calc(32 + 218 * var(--c)) calc(31 + 218 * var(--c)))}
.ss-book b{font-size:.84em;line-height:1.5;font-weight:700}
.ss-book .ss-eyebrow{color:var(--salon-pink)}
.ss-book .ss-cta{border-color:rgba(35,32,31,calc(.45 * (1 - var(--c))));background:rgba(232,180,200,var(--c));color:var(--salon-ink)}

/* つまみ */
.build__ctl{width:min(100%,520px);display:grid;gap:10px}
.build__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.build__label .now{font-family:var(--font-serif);font-size:1.35rem;color:var(--green);line-height:1;white-space:nowrap}
.build__label .what{font-size:.82rem;color:var(--ink-2);text-align:right}
.range{-webkit-appearance:none;appearance:none;width:100%;height:var(--thumb-size);background:transparent;margin:0;cursor:pointer;touch-action:pan-y}
.range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--green) calc(var(--p)*100%),#fff calc(var(--p)*100%))}
.range::-moz-range-track{height:6px;border-radius:999px;background:#fff}
.range::-moz-range-progress{height:6px;border-radius:999px;background:var(--green)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc((6px - var(--thumb-size))/2);border-radius:50%;background:var(--green);border:4px solid #fff;box-shadow:0 6px 18px -6px rgba(17,17,17,.5)}
.range::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:50%;background:var(--green);border:4px solid #fff;box-shadow:0 6px 18px -6px rgba(17,17,17,.5)}
.build__ticks{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-2);letter-spacing:0}
@media (min-width:900px){
  .build__grid{grid-template-columns:1fr 1.05fr}
  .build__stage{order:-1}
}
@media (max-width:900px){
  .race__why{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .race__track{gap:10px}
  .build__ticks{font-size:.63rem}
  .build__label{flex-direction:column;align-items:flex-start;gap:2px}
  .build__label .what{text-align:left}
}

/* =====================================================================
   partial: layouts/partials/fab.blade.php
   追従ボタン。表紙・つまみ・お問い合わせ・フッターが見えている間は引っ込める（site.js）
   JS が無い環境では常に出しておく
   ===================================================================== */
.fab{
  position:fixed;z-index:var(--z-fab);
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 12px 28px -12px rgba(17,17,17,.5);
  transition:background-color var(--hover-dur) ease-out,opacity var(--fab-dur) ease-out,transform var(--fab-dur) ease-out,visibility 0s linear 0s;
}
.js .fab:not(.is-on){
  opacity:0;transform:translateY(var(--fab-shift));visibility:hidden;pointer-events:none;
  transition:background-color var(--hover-dur) ease-out,opacity var(--fab-dur) ease-out,transform var(--fab-dur) ease-out,visibility 0s linear var(--fab-dur);
}
@media (max-width:560px){
  .fab{min-height:48px;padding:0 22px}
}

/* =====================================================================
   レスポンシブ（768 / 375 で破綻しないこと）
   ===================================================================== */
@media (max-width:900px){
  .hd__nav,.hd__cta{display:none}
  .hd__burger{display:block}
  .about__in{grid-template-columns:minmax(0,1fr)}
  .about__fig{max-width:320px}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work__in{grid-template-columns:minmax(0,1fr)}
  .work__tag{order:-1}
  .flow__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .contact__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{line-height:1.85}
  .svc{grid-template-columns:minmax(0,1fr)}
  .flow__list{grid-template-columns:minmax(0,1fr)}
  .price__table,.price__table tbody,.price__table tr,.price__table th,.price__table td{display:block;width:100%}
  .price__table th{border-bottom:0;padding-bottom:0}
  .blog__list a{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* 動きを減らす設定のとき：すべて最終状態の静止画として成立させる */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise,.js .ridge g{opacity:1!important;transform:none!important}
}

/* =====================================================================
   partial: layouts/partials/splash.blade.php
   スプラッシュ（docs/mock/8peak-splash-v4.html）。峰が現れる→組み上がる→8Peak の文字→消える
   トップ（home）だけ・1タブにつき初回のみ。出すかどうかはパーシャル内のインラインで決める
   進み具合 --pIn / --pBuild / --pWord / --pOut（0〜1）は site.js が #splash に書き込む
   ===================================================================== */
:root{
  /* ---- 尺（合計2.44秒）。すべてミリ秒 ---- */
  --sp-in:420;         /* 峰が下からせり上がる */
  --sp-peak:500;       /* 峰のままとどまる。山脈として読ませる時間 */
  --sp-build:620;      /* 組み上がる */
  --sp-word:280;       /* 8Peak の文字が出る */
  --sp-hold:300;       /* 完成形を見せる */
  --sp-out:320;        /* 消える。飛ばしたときもこの時間で消える */
  --sp-rise:26px;      /* 峰がせり上がる距離 */
  --sp-giveup:2000;    /* site.js がこの時間までに動き出さなければ、出さずに引っ込める */

  --sumi:#1A1A1A;      /* 峰の色 */
  --z-splash:30;       /* 全画面メニューより上 */
}
.splash{
  --pIn:0;--pBuild:0;--pWord:0;--pOut:0;
  position:fixed;inset:0;z-index:var(--z-splash);background:var(--paper);
  display:grid;place-items:center;overflow:hidden;
  opacity:calc(1 - var(--pOut));
}
.splash[hidden]{display:none}
.splash__stage{width:min(92vw,760px)}
.splash svg{display:block;width:100%;height:auto;overflow:visible}
.splash .sh{
  fill:var(--sumi);
  transform-box:fill-box;transform-origin:center;
  --qi:calc(1 - var(--pIn));
  --qb:calc(1 - var(--pBuild));
  /* 濃淡：はじめは断片ごとにばらばら、組み上がると1色に揃う */
  opacity:calc(var(--pIn) * (var(--o) + (1 - var(--o)) * var(--pBuild)));
  transform:
    translate(calc(var(--dx) * var(--qb) * 1px),
              calc(var(--dy) * var(--qb) * 1px + var(--qi) * var(--sp-rise)))
    rotate(calc(var(--r) * var(--qb) * 1deg))
    scale(calc(1 + (var(--s) - 1) * var(--qb)));
}
.splash__word{
  text-align:center;font-family:var(--font-serif);font-weight:600;
  font-size:clamp(1.9rem,7vw,2.8rem);letter-spacing:.06em;margin-top:clamp(10px,2vw,18px);
  opacity:var(--pWord);
  transform:translateY(calc((1 - var(--pWord)) * 10px));
}
@media (prefers-reduced-motion:reduce){
  .splash{display:none!important}
}