@charset "UTF-8";
/* ==========================================================================
   株式会社ツギテデザイン — 共通スタイルシート
   トップページ + 全下層ページ共通。08_design/design-spec.md のトークンを実装。
   1. トークン / 2. ベース / 3. レイアウト / 4. 共通パーツ / 5. ヘッダー
   6. FV / 7. チャプター / 8. 共通価値 / 9. クロージング / 10. フッター
   11. フローティングCTA / 12. モーション / 13. レスポンシブ
   ========================================================================== */

/* ============================== 1. トークン ============================== */
:root{
  /* --- 配色(08_design/colors.md の実測値。目測での変更禁止) --- */
  --bg-cream:   #FBF7F1;
  --panel:      #F7F3EA;
  --surface:    #FDFBF8;
  --ig-bg:      #EDE7D6;
  --line:       #C9BFAF;
  --line-soft:  #E3DCD0;
  --ink:        #1E2422;
  --ink-body:   #63635F;

  --entry-01:     #146052;
  --entry-02:     #9C7E2E;
  --entry-02-btn: #8A6B28;
  --entry-03:     #B85439; /* カンプ実測は #BC573E。見出し文字が4.45:1でAA未達だったため微調整(実測4.51〜4.66:1 / 白文字on 4.81:1) */

  --dark-a: #122928;
  --dark-b: #0B5144;
  --gold:   #83693F; /* 明面の英字ラベル用。#A9895F はクリーム背景で3.06:1(AA未達)のため濃度を上げた(実測4.85:1) */

  /* 章ごとに上書きされる可変トークン(既定は入口01) */
  --entry: var(--entry-01);
  --entry-btn: var(--entry-01);
  --entry-line: rgba(20, 96, 82, .28);

  /* --- タイポグラフィ --- */
  --font-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Jost", "Noto Sans JP", sans-serif;

  /* --- 余白・角丸・影 --- */
  --wrap: 1288px;
  --r-panel: 24px;
  --r-card: 20px;
  --r-box: 16px;
  --r-photo: 14px;
  --r-btn: 16px;
  --shadow-soft: 0 12px 28px rgba(30, 25, 15, .06);
  --shadow-lift: 0 18px 38px rgba(30, 25, 15, .10);

  /* --- モーション(09_motion/motion-spec.md 3章) --- */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-tx:  cubic-bezier(.22, 1, .36, 1);
  --e-sc:  cubic-bezier(.65, 0, .35, 1);
  --e-lx:  cubic-bezier(.19, 1, .22, 1);
  --e-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* --- 実測でJSが書き込む値(フォールバック付き) --- */
  --header-h: 68px;
  --fc-h: 0px;
}

/* ============================== 2. ベース ============================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth; /* JS未実行時のフェイルセーフ */
}

body{
  margin:0;
  padding-bottom:var(--fc-h);
  background:var(--bg-cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden; /* 保険。装飾はSPで非表示にして根本原因を作らない */
}

img{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit;text-decoration:none}

/* 下層ページ未作成のためのプレースホルダーリンク(href なし)。
   見た目は通常リンクのまま。ページを作成したら href を足すだけで復活する。 */
a[data-pending]{cursor:default;pointer-events:none}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.45}
dl,dd{margin:0}
address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

:focus-visible{
  outline:2px solid var(--entry-01);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;
  top:-100px;left:12px;z-index:200;
  padding:10px 16px;
  background:var(--dark-a);color:#fff;
  border-radius:0 0 8px 8px;
  transition:top .2s ease;
}
.skip-link:focus{top:0}

/* NV-02 の監視用センチネル(scrollイベントを使わないための目印) */
.scroll-sentinel{
  position:absolute;top:80px;left:0;
  width:1px;height:1px;
  pointer-events:none;
}

/* ============================== 3. レイアウト ============================== */
.wrap{
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
}

main{display:block}

/* セクション間のリズム(design-spec 1-3章) */
.chapter{padding-block:18px}
.chapter:first-of-type{padding-top:34px}
.common{padding-block:20px}
.undecided{padding-block:20px}

/* アンカー着地位置(sticky ヘッダー分を差し引く) */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ============================== 4. 共通パーツ ============================== */

/* --- ボタン(button) --- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:58px;
  padding:12px 26px;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.03em;
  text-align:center;
  white-space:nowrap; /* ラベルを途中で折り返さない(狭いカラムでは各BPでfont-sizeを詰める) */
  overflow:hidden;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--block{width:100%}
.btn--sm{min-height:46px;padding:8px 18px;font-size:14px;gap:10px}

.btn-arrow{
  flex:none;
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  color:var(--dark-a);
  transition:transform .25s var(--e-out);
}
.btn-arrow::before{
  content:"";
  width:15px;height:12px;
  background:currentColor;
  -webkit-mask:var(--arrow-mask) center/contain no-repeat;
  mask:var(--arrow-mask) center/contain no-repeat;
}
:root{
  --arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M9.6 0 8.3 1.3 12.1 5H0v2h12.1L8.3 10.7 9.6 12l6.4-6z'/%3E%3C/svg%3E");
}
.btn--sm .btn-arrow{width:26px;height:26px}
.btn--sm .btn-arrow::before{width:12px;height:10px}

.btn--primary{background:var(--dark-a);color:#fff}
.btn--primary .btn-arrow{background:#fff;color:var(--dark-a)}

.btn--entry{background:var(--entry-btn);color:#fff}
.btn--entry .btn-arrow{background:#fff;color:var(--entry-btn)}

.btn--accent{background:var(--dark-b);color:#fff;border-color:rgba(212,183,122,.5)}
.btn--accent .btn-arrow{background:#fff;color:var(--dark-b)}

.btn--outline{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn--outline .btn-arrow{background:transparent;border:1px solid var(--line);color:var(--ink)}

.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost .btn-arrow{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* ホバー(PCのみ / HO-01・CTA-08) */
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:#1D3B39}
  .btn--entry:hover{background:color-mix(in srgb, var(--entry-btn) 86%, #fff)}
  .btn--accent:hover{background:#0E6353}
  .btn--outline:hover{border-color:var(--ink);background:#fff}
  .btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
  .btn--ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.6)}
  .btn:hover .btn-arrow{transform:translateX(3px)}
}

/* CTA-10 マテリアルリップル */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:currentColor;
  opacity:.22;
  pointer-events:none;
  animation:ripple .6s ease-out forwards;
}
.btn--primary .ripple,
.btn--entry .ripple,
.btn--accent .ripple{color:#fff}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
/* 電話ボタンはラベル・番号とも途中で改行させない */
.tel-num,.tel-label{white-space:nowrap}

/* SPはボタン縦積み・幅100%(design-spec 5-2) */
@media (max-width:559px){
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
  /* SPは狭いのでラベルを1行に収める(長いCTA・電話番号つきCTA対策)。
     ただし320px級の極小幅でははみ出すより折り返させる(横スクロール防止) */
  .btn{gap:8px;padding:12px 16px;font-size:15px;letter-spacing:.01em;white-space:normal}
  .btn--sm{padding:8px 14px;font-size:13.5px}
  .tel-num{font-size:14.5px}
}

/* タブレット(560〜1199px)はカラムが細いのでボタンのラベルを1行に保つ */
@media (min-width:560px) and (max-width:1199px){
  .btn{gap:8px;padding:12px 14px;font-size:14.5px;letter-spacing:.02em}
  .btn--sm{padding:8px 14px;font-size:13.5px}
}

/* --- 白面ボックス(box) --- */
.box{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-box);
  padding:22px;
  box-shadow:var(--shadow-soft);
}
.box-title{
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
  color:var(--entry);
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
}

/* --- 写真枠(photo / SC-04カーテンの器) --- */
.ph{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--r-photo);
  background:#EFE9E0;
  line-height:0;
}
.ph img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.ph::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--panel);
  transform-origin:right;
  transform:scaleX(0);
  pointer-events:none;
}

/* --- 注記・小見出し --- */
.note{
  margin-top:14px;
  color:var(--ink-body);
  font-size:13px;
  line-height:1.7;
}
.note--light{color:rgba(255,255,255,.72)}

.eyebrow-en{
  font-family:var(--font-en);
  font-size:13px;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--gold);
  text-transform:uppercase;
  line-height:1.6;
}
.eyebrow-en--gold{color:#D6B778;font-weight:500}

.sec-title{
  font-family:var(--font-mincho);
  font-size:clamp(26px, 2.2vw + 14px, 40px);
  line-height:1.4;
  letter-spacing:.02em;
}
.sec-lead{
  margin-top:14px;
  color:var(--ink-body);
  font-size:16px;
  line-height:1.85;
}

.cta-push{
  color:var(--ink-body);
  font-size:15px;
  line-height:1.8;
}

/* ============================== 5. ヘッダー ============================== */
.gh{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--bg-cream);
  border-bottom:1px solid var(--line-soft);
  transition:padding .3s ease, box-shadow .3s ease;
}
.gh-inner{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:64px;
  padding-block:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  margin-right:auto;
}
.brand-mark{width:auto;height:32px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
}
.brand-en{
  font-family:var(--font-en);
  font-size:9px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--ink-body);
}

/* グローバルナビ(PC) */
.gnav-list{display:flex;align-items:center}
.gnav-list a{
  position:relative;
  display:block;
  padding:6px 0;
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
}
/* NV-01 下線ドロー */
.gnav-list a::after{
  content:"";
  position:absolute;
  left:0;bottom:2px;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .gnav-list a:hover::after{transform:scaleX(1)}
}
.gnav-cta{display:none}

.gh-cta{
  flex:none;
  min-height:46px;
  padding:8px 18px;
  font-size:14px;
  gap:10px;
}
.gh-cta .btn-arrow{display:none}

/* ハンバーガー(NV-13) */
.hamb{
  flex:none;
  display:none;
  width:48px;height:48px;
  place-items:center;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:var(--surface);
}
.hamb-bar{
  display:block;
  width:20px;height:1.5px;
  background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.hamb-bar + .hamb-bar{margin-top:6px}
.hamb[aria-expanded="true"] .hamb-bar:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.hamb[aria-expanded="true"] .hamb-bar:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

.drawer-veil{
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(18,41,40,.42);
  opacity:0;
  transition:opacity .3s ease;
}
.drawer-veil.is-open{opacity:1}

/* ============================== 6. FV ============================== */
.fv{
  position:relative;
  overflow:hidden; /* 右端から覗く装飾を画面外へ逃がす(横スクロール防止) */
  padding-top:26px;
  padding-bottom:20px;
}

.fv-intro{
  position:relative;
  max-width:min(100% - 40px, 1000px);
  text-align:center;
}
.fv-eyebrow{
  color:var(--entry-01);
  font-size:clamp(12.5px, .6vw + 11px, 21px);
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.7;
}
.fv-title{
  position:relative;
  margin-top:14px;
  font-family:var(--font-mincho);
  font-size:clamp(26px, 3.9vw + 12px, 62px);
  font-weight:700;
  line-height:1.32;
  letter-spacing:0;
}
.fv-title-line{display:block}
.marker{
  position:relative;
  display:inline-block;
}
.marker::after{
  content:"";
  position:absolute;
  left:-3%;right:-3%;
  bottom:-.1em;
  height:.1em;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(20,96,82,0) 0%, rgba(20,96,82,.34) 14%, rgba(20,96,82,.34) 86%, rgba(20,96,82,0) 100%);
}
.fv-sub{
  max-width:700px;
  margin:20px auto 0;
  color:var(--ink-body);
  font-size:clamp(14px, .4vw + 12.5px, 19px);
  line-height:1.85;
  text-align:left;
}

/* 分岐カード(branch card) */
.branch-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:34px;
}
.branch{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--entry-line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease-out, box-shadow .25s ease-out;
  overflow:hidden;
}
.branch--01{--entry:var(--entry-01);--entry-line:rgba(20,96,82,.3)}
.branch--02{--entry:var(--entry-02-btn);--entry-line:rgba(156,126,46,.32)} /* テキスト用途がAA(4.5:1)を満たすよう濃い方のゴールドを使う */
.branch--03{--entry:var(--entry-03);--entry-line:rgba(188,87,62,.32)}

.bn{
  display:flex;
  align-items:baseline;
  margin-bottom:12px;
  color:var(--entry);
}
.bn-num{
  /* 「入口」ラベルを外したため、番号単独でもカード上部のアクセントとして効くようひと回り大きくした */
  font-family:var(--font-en);
  font-size:clamp(34px, 1.8vw + 22px, 46px);
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:color .15s linear;
}
.branch .ph{aspect-ratio:15/8}
.branch .ph::after{background:var(--surface)}
.branch-title{
  margin-top:18px;
  font-size:clamp(19px, .85vw + 13.5px, 25px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:0;
}
.branch-desc{
  margin-top:10px;
  color:var(--ink-body);
  font-size:15px;
  line-height:1.8;
}
.go{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  padding-top:18px;
  color:var(--entry);
  font-size:15px;
  font-weight:700;
}
.go-text{position:relative}
.go-text::after{
  content:"";
  position:absolute;
  left:0;bottom:-3px;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease-out;
}
.go-arrow{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--entry);
  color:#fff;
  transition:transform .25s var(--e-out);
}
.go-arrow::before{
  content:"";
  width:16px;height:13px;
  background:currentColor;
  -webkit-mask:var(--arrow-mask) center/contain no-repeat;
  mask:var(--arrow-mask) center/contain no-repeat;
}
.branch:active{transform:scale(.98);transition-duration:.1s}
@media (hover:hover) and (pointer:fine){
  .branch:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
  .branch:hover .ph img{transform:scale(1.04)}
  .branch:hover .go-text::after{transform:scaleX(1)}
  .branch:hover .go-arrow{transform:translateX(3px)}
}
.ph img{transition:transform .35s ease-out}

/* 脱出導線(fallback) */
.fv-fallback{
  position:relative;
  margin-top:38px;
  text-align:center;
}
.fv-fallback-lead{
  font-size:16px;
  font-weight:500;
  line-height:1.8;
}
.fv-fallback .btn-row{
  justify-content:center;
  margin-top:20px;
}
.fv-fallback .note{text-align:center}

/* MV-11 スクロール誘導(サイト唯一の常時ループ) */
.scroll-cue{
  position:relative;
  width:22px;height:36px;
  margin:30px auto 4px;
  border:1px solid var(--line);
  border-radius:999px;
  opacity:.85;
}
.scroll-cue-dot{
  position:absolute;
  top:7px;left:50%;
  width:3px;height:6px;
  margin-left:-1.5px;
  border-radius:999px;
  background:var(--entry-01);
}

/* 装飾イラスト(deco) — 絶対配置。SPでは非表示(横スクロール防止) */
.deco{
  position:absolute;
  display:none;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.deco--bird1{top:120px;left:-150px;width:66px}
.deco--trees1{top:240px;left:-176px;width:104px}
.deco--staff{top:200px;right:-30px;width:112px} /* .fv基準(右端から覗かせる) */
.deco--bird2{top:12px;right:14px;width:58px}
.deco--cat{bottom:2px;left:0;width:96px}
.deco--trees2{bottom:0;right:0;width:124px}
.deco--cat-sleep{top:14px;right:130px;width:104px}
.deco--plant{top:-38px;right:24px;width:64px}
.deco--burst{top:-14px;right:-18px;width:56px}
.deco--lamp{top:-64px;right:36px;width:84px} /* 傘が人物イラストの頭に触れない高さ */
.deco--thinker{top:146px;right:16px;width:auto;height:170px} /* デザイン画像どおりFAQボックス右辺に重ねる。下端をボックス下辺に合わせて切れ目を目立たせない */
.deco--plant2{bottom:-6px;right:14px;width:92px}

/* ============================== 7. チャプター ============================== */
.chapter--01{--entry:var(--entry-01);--entry-btn:var(--entry-01);--entry-line:rgba(20,96,82,.26)}
.chapter--02{--entry:var(--entry-02-btn);--entry-btn:var(--entry-02-btn);--entry-line:rgba(156,126,46,.28)} /* 同上(見出し・Qマーク・リンク文字のAA確保) */
.chapter--03{--entry:var(--entry-03);--entry-btn:var(--entry-03);--entry-line:rgba(188,87,62,.28)}

.chap-card{
  position:relative;
  padding:22px 20px 26px;
  background:var(--panel);
  border:1px solid var(--entry-line);
  border-radius:var(--r-panel);
}

/* パーツ: 章番号バッジ(chapter tag)。「入口」ラベルを外し、番号だけの正方形バッジにしている */
.chap-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:58px;
  margin-bottom:14px;
  background:var(--entry);
  border-radius:12px;
  color:#fff;
  text-align:center;
}
.chap-tag-num{
  font-family:var(--font-en);
  font-size:34px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
}

.chap-title{
  font-family:var(--font-mincho);
  font-size:clamp(24px, 2.1vw + 13px, 40px);
  line-height:1.42;
  letter-spacing:.02em;
}
.chap-lead{
  margin-top:14px;
  display:grid;
  gap:12px;
  color:var(--ink-body);
  font-size:15px;
  line-height:1.9;
}

.chap-grid{
  display:grid;
  gap:16px;
  margin-top:22px;
}
/* グリッドアイテムの自動最小サイズ(min-width:auto)をリセット。
   長い価格文言がトラックを押し広げる grid blowout を防ぐ(320px幅対策) */
.chap-grid > *{min-width:0}
.chap-photo{aspect-ratio:16/10}

/* パーツ: サービスボックス(service box) */
.svc-list{display:grid;gap:14px}
.svc-item + .svc-item{
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.svc-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.svc-name{
  position:relative;
  padding-left:16px;
  font-size:16px;
  font-weight:700;
  line-height:1.6;
}
.svc-name::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--entry);
}
.svc-price{
  flex-shrink:1;
  min-width:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:normal; /* 極小幅では折り返す(はみ出して欠けるより折り返しを優先) */
}
.svc-note{
  margin-top:4px;
  padding-left:16px;
  color:var(--ink-body);
  font-size:13px;
  line-height:1.75;
}

/* パーツ: Q&A(qa) */
.chap-faq{margin-top:16px}
.qa-q,.qa-a{
  position:relative;
  display:flex;
  gap:10px;
  font-size:15px;
  line-height:1.85;
}
.qa-q{font-weight:700}
.qa-a{margin-top:8px;color:var(--ink-body)}
.qa-mark{
  flex:none;
  width:20px;
  font-family:var(--font-en);
  font-size:16px;
  font-weight:500;
  line-height:1.75;
  color:var(--entry);
}
.qa-a .qa-mark{color:var(--ink-body)}

/* パーツ: お客様の声(voice box) — 素材到着後に使用 */
.chap-voice{margin-top:16px}
.voice-quote{width:28px;height:auto}
.voice-body{margin:8px 0 0;font-size:15px;line-height:1.9}
.voice-sign{margin-top:10px;text-align:right;color:var(--ink-body);font-size:14px}

/* パーツ: 章専用CTA(chapter cta) */
.chap-cta{
  display:grid;
  gap:12px;
  margin-top:20px;
  justify-items:start;
}
.chap-cta .btn{width:100%}

/* ============================== 8. 共通価値(common) ============================== */
.common-panel{
  position:relative;
  padding:24px 20px 26px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-panel);
}
.common-panel .sec-head{position:relative;z-index:1}
.common-panel .sec-title{margin-top:6px}

.common-items{
  display:grid;
  gap:16px;
  margin-top:24px;
}
.common-item{
  display:grid;
  gap:14px;
  align-items:end;
}
.common-item-body{display:grid;gap:12px}
.common-item-title{
  font-family:var(--font-mincho);
  font-size:clamp(19px, 1vw + 14px, 27px);
  line-height:1.5;
}
.common-item-body p{
  color:var(--ink-body);
  font-size:15px;
  line-height:1.9;
}
.common-item-illust{
  justify-self:end;
  align-self:end;
  height:auto;
}
.common-item-illust--portrait{width:auto;height:150px}
.common-item-illust--landscape{width:130px}

/* パーツ: 実績・資格4指標(stats) */
.stats-box{margin-top:16px;padding:20px 12px}
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 0;
}
.stat{
  padding:0 12px;
  text-align:center;
}
.stat:nth-child(2n){border-left:1px solid var(--line-soft)}
.stat:nth-child(n+3){padding-top:20px;border-top:1px solid var(--line-soft)}
.stat-label{
  color:var(--ink-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.6;
}
.stat-value{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  margin-top:6px;
  color:var(--dark-a);
  line-height:1.05;
}
.stat-num{
  font-family:var(--font-en);
  font-size:clamp(38px, 3.4vw + 16px, 68px);
  font-weight:500;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat-pre,.stat-unit{
  font-size:clamp(14px, .5vw + 12px, 20px);
  font-weight:700;
}
.stat-word{
  font-family:var(--font-mincho);
  font-size:clamp(19px, .9vw + 13px, 26px);
  font-weight:700;
  line-height:1.35;
}
.stat--word .stat-value{align-items:center;gap:8px}
.stat-icon{
  flex:none;
  width:34px;height:34px;
}
.stat-note{
  margin-top:8px;
  color:var(--ink-body);
  font-size:12px;
  line-height:1.65;
}

/* パーツ: Instagram誘導(ig block) */
.ig-block{
  display:grid;
  gap:20px;
  margin-top:16px;
  padding:24px 20px;
  background:var(--ig-bg);
  border-radius:var(--r-panel);
}
.ig-title{
  font-family:var(--font-mincho);
  font-size:clamp(20px, 1.2vw + 14px, 28px);
  line-height:1.45;
  color:var(--entry-01);
}
.ig-lead{
  margin-top:12px;
  color:var(--ink-body);
  font-size:15px;
  line-height:1.85;
}
.ig-body .btn{margin-top:18px}
.ig-media{position:relative}
.insta-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.insta-grid .ph{aspect-ratio:3/2;border-radius:10px}
.ig-note{margin-top:10px}
@media (hover:hover) and (pointer:fine){
  .insta-grid .ph:hover img{transform:scale(1.04)}
}

/* ============================== 9. クロージング ============================== */
.undecided-panel{
  position:relative;
  padding:28px 20px 30px;
  background:var(--dark-a);
  border-radius:var(--r-panel);
  color:#fff;
}
.undecided .sec-title{color:#fff}
.undecided .sec-lead{color:rgba(255,255,255,.76)}

.undecided-top{
  position:relative;
  z-index:1;
  display:grid;
  gap:22px;
}
.u-faq{
  background:transparent;
  border-color:rgba(255,255,255,.28);
  box-shadow:none;
}
.u-faq .box-title{
  color:#EFE9DC;
  border-bottom-color:rgba(255,255,255,.22);
}
.u-faq .qa-q{color:#fff}
.u-faq .qa-a{color:rgba(255,255,255,.76)}
.u-faq .qa-mark{color:#D6B778}
.u-faq .qa-a .qa-mark{color:rgba(255,255,255,.6)}

.undecided-bottom{
  position:relative;
  z-index:1;
  margin-top:26px;
  text-align:center;
}
.undecided-bottom .cta-push{color:rgba(255,255,255,.8);font-size:15px}
.undecided-bottom .btn-row{justify-content:center;margin-top:18px}
.area{
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.8;
}

/* ============================== 10. フッター ============================== */
.gf{
  margin-top:26px;
  padding-top:28px;
  border-top:1px solid var(--line-soft);
  background:var(--bg-cream);
}
.gf-inner{
  display:grid;
  gap:26px;
}
.gf .brand-mark{height:34px}
.gf-tagline{
  margin-top:12px;
  font-family:var(--font-mincho);
  font-size:17px;
  line-height:1.7;
}
.gf-heading{
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
}
.gf-links{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(5,auto);
  gap:2px 16px;
  margin-top:12px;
}
.gf-links a,
.gf-address{
  color:var(--ink-body);
  font-size:13.5px;
  line-height:1.75;
}
.gf-links a{position:relative;display:inline-block}
@media (hover:hover) and (pointer:fine){
  .gf-links a:hover,.gf-ig-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}
.gf-address{
  display:grid;
  gap:0;
  margin-top:12px;
}
.gf-ig{margin-top:12px}
.gf-ig-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink-body);
  font-size:14px;
}
.gf-ig-icon{display:grid;place-items:center;width:28px;height:28px;color:var(--ink)}
.gf-cta{margin-top:16px}

.gf-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 20px;
  margin-top:22px;
  padding:14px 0 18px;
  border-top:1px solid var(--line-soft);
  color:var(--ink-body);
  font-size:13px;
}

/* ============================== 11. フローティングCTA ============================== */
.floating-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(251,247,241,.94);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line-soft);
  transform:translateY(100%);
}
.floating-cta.is-in{
  transform:translateY(0);
  transition:transform .4s var(--e-tx);
}
.fc-btn{
  position:relative;
  display:grid;
  place-content:center;
  gap:1px;
  min-height:52px;
  padding:6px 10px;
  border-radius:12px;
  text-align:center;
  overflow:hidden;
}
.fc-tel{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
}
.fc-form{background:var(--dark-a);color:#fff}
.fc-main{font-size:14px;font-weight:700;line-height:1.3}
.fc-sub{
  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-body);
}

/* ============================== 12. モーション ============================== */
/* JSが動いている環境でのみ初期状態(非表示)を適用する(no-jsフェイルセーフ) */
.js [data-motion]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
  will-change:opacity, transform;
}
.js [data-motion].is-inview{opacity:1;transform:none;will-change:auto}

.js [data-motion="head"]{transition-duration:.7s;transition-timing-function:var(--e-tx)}
.js [data-motion="card"]{transition-duration:.5s;transition-timing-function:ease-out}
.js [data-motion="slow"]{
  transform:translateY(8px);
  transition-duration:1.6s;
  transition-timing-function:var(--e-lx);
}
.js [data-motion="draw"]{
  opacity:1;
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .6s ease-in-out;
}
.js [data-motion="draw"].is-inview{transform:scaleY(1)}

/* TXK-08 は h1 本体をフェードさせず、帯(.txk-band)側で見せる */
.js [data-motion="bands"]{opacity:1;transform:none}

/* SC-04 画像カーテン(画像本体は動かさない) */
.js [data-motion="curtain"]{opacity:1;transform:none}
.js [data-motion="curtain"]::after{transform:scaleX(1)}
.js [data-motion="curtain"].is-inview::after{
  transform:scaleX(0);
  transition:transform .9s var(--e-sc);
}

/* CD-01 ステッガー */
.js .stagger > *:nth-child(1){transition-delay:0s}
.js .stagger > *:nth-child(2){transition-delay:.08s}
.js .stagger > *:nth-child(3){transition-delay:.16s}
.js .stagger > *:nth-child(4){transition-delay:.24s}
.js .stagger > *:nth-child(5){transition-delay:.32s}
.js .stagger > *:nth-child(6){transition-delay:.4s}

/* FV 読込シーケンス(motion-spec 4-2章) */
.js .fv [data-seq="0"]{transition-delay:0s}
.js .fv [data-seq="1"]{transition-delay:.15s}
.js .fv [data-seq="2"]{transition-delay:.55s}
.js .fv [data-seq="3"]{transition-delay:1.2s}
.js .fv [data-seq="4"]{transition-delay:1.32s}
.js .fv [data-seq="5"]{transition-delay:1.44s}
.js .fv [data-seq="6"]{transition-delay:2s}
.js .fv [data-seq="7"]{transition-delay:2.15s}
.js .branch--01 [data-motion="curtain"].is-inview::after{transition-delay:1.3s}
.js .branch--02 [data-motion="curtain"].is-inview::after{transition-delay:1.42s}
.js .branch--03 [data-motion="curtain"].is-inview::after{transition-delay:1.54s}

/* TXK-08 マスクスライス登場(h1) */
.fv-title{position:relative}
.txk-band{
  position:absolute;
  top:-.12em;bottom:-.12em;
  background:var(--bg-cream);
  transform-origin:top;
  transform:scaleY(1);
  pointer-events:none;
}
.fv-title.is-inview .txk-band{
  transform:scaleY(0);
  transition:transform .6s var(--e-tx);
}

/* MV-11 スクロール誘導ループ(サイト全体で唯一の常時アニメーション) */
.js .scroll-cue{opacity:0;transition:opacity .6s ease;transition-delay:2.7s}
.js .scroll-cue.is-inview{opacity:.85}
.scroll-cue.is-inview .scroll-cue-dot{animation:cue 1.6s ease-in-out 2.7s infinite}
@keyframes cue{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  75%{opacity:1}
  100%{transform:translateY(14px);opacity:0}
}

/* アンカー着地ポップ(独自提案) */
.jump-in{animation:jumpIn .45s var(--e-pop)}
@keyframes jumpIn{
  0%{transform:scale(.85)}
  55%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
.chap-tag.jump-in{transform-origin:left center}

/* NV-02 ヘッダー縮小 */
.gh.is-compact .gh-inner{min-height:56px;padding-block:6px}
.gh.is-compact{box-shadow:0 6px 18px rgba(30,25,15,.06)}

/* ---- #capture / prefers-reduced-motion(撮影・省モーション時の最終状態固定) ---- */
html.capture-mode *,
html.capture-mode *::before,
html.capture-mode *::after{
  transition:none !important;
  animation:none !important;
}
html.capture-mode [data-motion],
html.capture-mode .fv-title,
html.capture-mode .scroll-cue{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  clip-path:none !important;
}
html.capture-mode [data-motion="curtain"]::after{transform:scaleX(0) !important}
html.capture-mode [data-motion="draw"]{transform:scaleY(1) !important}
html.capture-mode .floating-cta{transform:translateY(0) !important}
html.capture-mode .scroll-cue{opacity:.85 !important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-motion]{opacity:1;transform:none}
  .js [data-motion="curtain"]::after{transform:scaleX(0)}
  .js [data-motion="draw"]{transform:scaleY(1)}
  .floating-cta{transform:translateY(0)}
  .scroll-cue-dot{animation:none}
}

/* ============================== 13. レスポンシブ ============================== */

/* --- 560px以上: ボタン横並び --- */
@media (min-width:560px){
  .chap-cta{
    grid-template-columns:auto;
    justify-items:start;
  }
  .chap-cta .btn{width:auto}
}

/* --- 768px以上 --- */
@media (min-width:768px){
  body{font-size:16px}

  .wrap{width:min(100% - 56px, var(--wrap))}

  .btn{min-height:66px;padding:14px 40px;font-size:17px;gap:18px}
  .btn--sm{min-height:46px;padding:8px 18px;font-size:14px;gap:10px}

  .box{padding:26px 28px}
  .chapter{padding-block:20px}
  .chap-card{padding:0 30px 30px}

  /* 章番号バッジをカード左上に密着させる(design-spec 2-3章) */
  .chap-tag{
    position:absolute;
    top:0;left:0;
    width:96px;
    height:92px;
    margin:0;
    border-radius:calc(var(--r-panel) - 1px) 0 18px 0;
  }
  .chap-tag-num{font-size:50px}
  .chap-head{
    min-height:116px;
    padding:20px 0 0 120px;
  }
  .chap-lead{
    max-width:720px;
    font-size:16px;
  }
  .chap-grid{
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
  }
  .chap-photo{aspect-ratio:61/25}
  .chap-faq{margin-top:20px}
  .chap-cta{
    display:flex;
    align-items:center;
    gap:22px;
    margin-top:26px;
  }
  .chap-cta .btn{flex:none} /* 横並び時にボタンを縮ませない */

  .fv{padding-top:44px;padding-bottom:30px}
  .fv-intro{max-width:min(100% - 56px, 1040px)}
  .fv-sub{text-align:center}
  .branch-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:40px;
  }
  .branch{padding:20px}
  .fv-fallback{margin-top:48px}

  .common-panel{padding:32px 34px 36px}
  .common-items{grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
  .common-item-illust--portrait{height:150px}
  .common-item-illust--landscape{width:160px}
  .stats-box{padding:26px 16px}

  .ig-block{padding:30px 34px}

  .undecided-panel{padding:38px 40px 40px}
  .undecided-top{grid-template-columns:1fr 1fr;gap:34px;align-items:start}

  .gf{margin-top:34px;padding-top:30px}
  .gf .brand-mark{height:38px}
  .gf .brand-name{font-size:21px;letter-spacing:.1em}
  .gf-tagline{margin-top:14px;font-size:16px}
  .gf-inner{
    grid-template-columns:minmax(200px,1fr) 1.05fr 1.5fr;
    gap:0;
  }
  .gf-sitemap,.gf-company{
    padding-left:32px;
    border-left:1px solid var(--line-soft);
  }
  .gf-sitemap{margin-left:32px}
  .gf-company{margin-left:32px}
  .gf-bottom{justify-content:space-between}

  /* 装飾は幅に余裕のある画面でのみ表示(横スクロール・文字への被りを防ぐ) */
  .deco{display:block}
  .deco--bird1,.deco--trees1,.deco--staff,
  .deco--cat,.deco--trees2,.deco--thinker{display:none}
}

/* --- 900px以上: 実績4指標を4列(それ未満は2×2) --- */
@media (min-width:900px){
  .stats{grid-template-columns:repeat(4,1fr);gap:0}
  .stat{padding:0 16px;border-left:1px solid var(--line-soft)}
  .stat:first-child{border-left:0}
  .stat:nth-child(2n){border-left:1px solid var(--line-soft)}
  .stat:nth-child(n+3){padding-top:0;border-top:0}
}

/* --- 1024px以上 --- */
@media (min-width:1024px){
  .chap-lead{font-size:16px}
  .stat-icon{width:40px;height:40px}
  .ig-block{
    grid-template-columns:minmax(260px, 36%) 1fr;
    align-items:center;
    gap:28px;
  }
  .deco--staff,.deco--cat,.deco--trees2{display:block}
}

/* --- 1200px以上: PCナビ(ハンバーガー解除) --- */
@media (max-width:1199px){
  .gnav{
    position:fixed;
    top:0;right:0;
    z-index:58;
    width:min(84vw, 340px);
    height:100dvh;
    padding:78px 24px 40px;
    background:var(--bg-cream);
    border-left:1px solid var(--line-soft);
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
  }
  .gnav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .3s var(--e-tx);
  }
  .gnav-list{
    display:grid;
    gap:2px;
  }
  .gnav-list li{
    opacity:0;
    transform:translateY(8px);
  }
  .gnav.is-open .gnav-list li{
    opacity:1;
    transform:none;
    transition:opacity .4s ease-out, transform .4s ease-out;
  }
  .gnav.is-open .gnav-list li:nth-child(1){transition-delay:.06s}
  .gnav.is-open .gnav-list li:nth-child(2){transition-delay:.12s}
  .gnav.is-open .gnav-list li:nth-child(3){transition-delay:.18s}
  .gnav.is-open .gnav-list li:nth-child(4){transition-delay:.24s}
  .gnav.is-open .gnav-list li:nth-child(5){transition-delay:.3s}
  .gnav.is-open .gnav-list li:nth-child(6){transition-delay:.36s}
  .gnav.is-open .gnav-list li:nth-child(7){transition-delay:.42s}
  .gnav-list a{
    padding:14px 4px;
    font-size:16px;
    border-bottom:1px solid var(--line-soft);
  }
  .gnav-list a::after{display:none}
  .gnav-cta{
    display:block;
    margin-top:26px;
    text-align:center;
  }
  .gnav-cta-note{
    margin-top:10px;
    color:var(--ink-body);
    font-size:13px;
  }
  .gh-cta{display:none}
  .hamb{display:grid}
  body{--fc-h:76px}
}

@media (min-width:1200px){
  .gh-inner{gap:22px;min-height:84px;padding-block:12px}
  .brand{gap:10px}
  .brand-mark{height:38px}
  .brand-name{font-size:21px;letter-spacing:.1em}
  .brand-en{font-size:9px}
  .gnav{margin-left:auto}
  .gnav-inner{display:flex;align-items:center}
  .gnav-list{gap:15px}
  .gnav-list a{font-size:13.5px}
  .gh-cta{min-height:50px;padding:10px 20px;font-size:14px}
  .drawer-veil{display:none}
  .floating-cta{display:none}

  /* 価値カードは幅が確保できる画面でのみ「テキスト+イラスト」の2カラムにする */
  .common-item{grid-template-columns:minmax(0,1fr) auto}
  .common-item-illust--portrait{height:190px}
  .common-item-illust--landscape{width:180px}

  /* クロージングの人物イラスト。重なる分だけFAQ本文の右側を空ける */
  .deco--thinker{display:block}
  .u-faq{padding-right:132px}
}

/* --- 1366px以上: ロゴ・ナビをデザインカンプの比率へ --- */
@media (min-width:1366px){
  .gh-inner{min-height:91px}
  .brand-mark{height:44px}
  .brand-name{font-size:25px}
  .brand-en{font-size:10px}
  .gnav-list{gap:18px}
  .gnav-list a{font-size:15px}
  .gh-cta{min-height:52px;padding:10px 24px;font-size:15px}
  .gf .brand-mark{height:44px}
  .gf .brand-name{font-size:25px}
  /* h1の左に置く装飾は、見切れずに収まる幅からのみ表示する */
  .deco--bird1,.deco--trees1{display:block}
}

/* --- 1440px以上(デザインカンプ幅) --- */
@media (min-width:1440px){
  .chap-card{padding:0 30px 32px}
  .fv-fallback{margin-top:52px}
}

/* ============ 14. FVの装飾イラストを全画面幅で見せる ============ */
/* 三浦さん指示(2026-08-05): 森(deco-trees)・鳥(deco-bird)・スタッフ(deco-staff-peek)の
   3点を、PC/タブレット/スマホのどの幅でもメインビジュアル内で見えるようにする。
   1366px以上のPCは既存のカンプ配置(h1の左に森と鳥・右端からスタッフ)をそのまま維持。
   1365px以下は左右の余白が足りずカンプ配置を縮小できないため、FV最上部(ヘッダーとeyebrowの間)に
   3点を並べる「装飾ストリップ」へ切り替える。.fv の padding-top で専用の帯を確保しているので
   文字への被りは構造的に起こらない。.fv{overflow:hidden} により右端の見切れも横スクロールにならない。 */

/* --- 〜559px: スマホ(ストリップ高 92px) --- */
@media (max-width:559px){
  .fv{padding-top:118px} /* 26px(既定) + 92px(ストリップ) */
  .deco--trees1,.deco--bird1,.deco--staff{display:block}
  /* 森・鳥は .fv-intro 基準。マイナスtopでストリップ帯へ抜き、下端を帯の底に接地させる */
  .deco--trees1{top:-92px;left:-16px;width:98px}
  .deco--bird1{top:-84px;left:44%;width:44px} /* 左向きに飛ぶ絵柄なので森の側へ向かわせる */
  /* スタッフは .fv 基準のまま(右端から覗く構図を維持)。下端はeyebrowの2px上で止める */
  .deco--staff{top:26px;right:-12px;width:62px}
}

/* --- 560〜1023px: 大きめスマホ・タブレット(ストリップ高 118px) --- */
@media (min-width:560px) and (max-width:1023px){
  .fv{padding-top:144px} /* 26px + 118px */
  .deco--trees1,.deco--bird1,.deco--staff{display:block}
  .deco--trees1{top:-118px;left:-20px;width:126px}
  .deco--bird1{top:-106px;left:46%;width:54px}
  .deco--staff{top:26px;right:-14px;width:78px}
}

/* --- 1024〜1365px: 中間PC。カンプ同様h1の左に置くが、画面左端の基準で寄せる --- */
/* .fv-intro は中央寄せの固定幅なので、intro基準の left では幅が広がるほど装飾が内側へ入り
   h1に被る(実測で1200px以上が該当)。calc((100% - 100vw)/2) で intro左端→画面左端の距離を
   打ち消し、どの幅でも「画面左端から数px外」に固定する。1366px以上はカンプ値のまま。 */
@media (min-width:1024px) and (max-width:1365px){
  .deco--bird1,.deco--trees1{display:block}
  .deco--bird1{top:96px;left:calc((100% - 100vw)/2 + 6px);width:58px}
  .deco--trees1{top:196px;left:calc((100% - 100vw)/2 + 6px);width:84px} /* h1の2行目の下端を下回る高さ */
}