/* ==========================================================
   COCOTORE｜全ページ共通
   ヘッダー・スマホのメニュー・予約ボタン・フッター・画面下の固定ボタン（スマホ）
   ・トップページ：この layout.css と top.css だけで表示（今のテーマの CSS は読み込まない）
   ・ほかのページ：今のテーマの CSS（reset／common／style／add）の後に読み込む。
     ページ全体（body・見出しなど）には効かせず、ヘッダー・フッターの中だけで完結させる
   ========================================================== */
/* ===== 色・文字の大きさ・書体：ココトレのブランドカラー（現行サイト cocotore.jp・ロゴ・新テーマの画像仕様から抽出） ===== */
:root{--fs-body:1rem;        /* 本文：PC 16px（スマホは下で0.875rem） */
  --fs-note:.875rem;     /* 補足・注記：PC 14px（スマホは下で0.75rem） */
  --fs-h2:2.25rem;       /* 見出し（各セクション）：PC 36px（スマホは下で1.5rem） */
  --fs-h3:1.375rem;      /* 小見出し（カードの見出し・問いかけ・ステップ名など）：PC 22px（スマホは下で1.25rem） */
  --fs-label:.75rem;     /* 英字ラベル：12px（PC・スマホ共通） */
  --ink:#333333;
  --ink-sub:#4A5769;      /* 本文・補足の文字色（v45で #5C6670 から少し濃く。細い書体でも読みやすいように） */
  --bg:#FAFCFE;          /* 青みのある白（新テーマ仕様） */
  --surface:#FFFFFF;
  --fv-bg:#EDF6FC;       /* 薄い水色（新テーマ仕様） */
  --brand:#83B8DD;       /* ブランドブルー（現行サイト・ロゴ） */
  --brand-ink:#2F6E9E;   /* ブランドブルーの濃い版：文字・アイコン用 */
  --brand-soft:#E3F0FA;
  --hl:#2F6E9E;
  --marker:rgba(131,184,221,.45);
  --cta:#E9634A;         /* 予約ボタンのコーラル（基準色） */
  --cta-hover:#DC5640;
  --cta-grad:linear-gradient(180deg,#EE7B64 0%,#E9634A 55%,#E35B42 100%); /* 控えめなグラデーション */
  --line:#D6E6F2;
  --ink-navy:#2B3A52;     /* S2の見出し・カードの見出し */
  --label-blue:#6B8FB0;   /* 英字ラベル */
  --band-blue:#5E9BCB;    /* 水色の帯（白文字）。ブランドブルー #83B8DD だと白文字が読みにくいので少しだけ濃く */
  --gutter:calc(clamp(16px,3vw,56px) + clamp(20px,3vw,40px)); /* テーマのヘッダーと同じ左右の余白 */
  /* 和文：UDデジタル教科書体 Pro（Adobe Fonts・Rの1ウェイトのみ）。読み込めないときはヒラギノなどで表示 */
  --font:"uddigikyokasho-pro","UDDigiKyokasho Pro","UD Digi Kyokasho Pro","UDデジタル教科書体 Pro","UD デジタル 教科書体 NP-R","UD Digi Kyokasho NP-R","Noto Sans JP","Noto Sans CJK JP","Hiragino Sans",sans-serif;
  --ui-font:"Noto Sans JP","Noto Sans CJK JP","Hiragino Sans",sans-serif; /* Nunito の代わり（数字・英字）。Noto Sans JP は読み込まない */}
/* ===== ヘッダー・フッターの中の基本（ほかのページでもトップと同じ見た目に。:where で強さはタグの指定と同じ） ===== */
:where(.site-header,.site-footer,.sticky-cta){font-family:var(--font);font-size:var(--fs-body);line-height:1.8;letter-spacing:.02em;color:var(--ink);-webkit-font-smoothing:antialiased;line-break:strict;word-break:normal;text-wrap:pretty;font-synthesis:none}
:where(.site-header,.site-footer,.sticky-cta) :where(*,*::before,*::after){box-sizing:border-box}
:where(.site-header,.site-footer) :where(p,ul,ol,dl,dd,figure){margin:0}
:where(.site-header,.site-footer) :where(ul,ol){padding:0;list-style:none}
:where(.site-header,.site-footer,.sticky-cta) :where(img,svg){display:block;max-width:100%}
:where(.site-header,.site-footer,.sticky-cta) a{color:inherit}
/* ===== ヘッダー ===== */
.site-header{background:#fff;box-shadow:0 1px 0 var(--line)}
.site-header .inner{max-width:none;margin:0;padding:0.875rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;font-weight:400;font-size:1.25rem;letter-spacing:.14em;text-decoration:none;color:var(--brand-ink)}
.logo img{display:block;height:54px;width:auto}
@media (max-width:1100px){
  .logo img{height:2.875rem}
}
@media (max-width:900px){
  .logo img{height:2.5rem}
}
.gnav{display:flex;align-items:center;gap:1.5rem;font-size:0.875rem;font-weight:400}
.gnav a{text-decoration:none;color:var(--ink)}
.gnav a:hover{color:var(--brand-ink)}
.btn-header{background:var(--cta);color:#fff !important;padding:0.5rem 1.125rem;border-radius:999px;font-weight:400;font-size:0.8125rem}
.btn-header:hover{background:var(--cta-hover)}
/* v143：スマホのメニュー（ハンバーガー）。767px以下だけ出す（PC・タブレットはこれまでどおり、ヘッダーにメニューと体験予約のボタン） */
.menu-btn,.sp-menu{display:none}
@media (prefers-reduced-motion:reduce){
  .sp-menu,.sp-menu-list,.sp-menu .cta-block{transition:none !important}
}
/* ===== CTA ===== */
.cta-block{display:flex;flex-direction:column;align-items:flex-start;gap:0.625rem}
.cta-block.center{align-items:center;margin-top:3rem}
.btn-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:25rem;min-height:80px;padding:0.75rem 4.5rem 0.75rem 2.5rem;border-radius:999px;background:var(--cta-grad);color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(233,99,74,.26),0 3px 8px rgba(233,99,74,.16),inset 0 -2px 5px rgba(170,50,28,.16),inset 0 1px 1px rgba(255,255,255,.28);transition:transform .2s,box-shadow .2s,filter .2s}
/* 左上のつや（うっすら） */
.btn-cta::before{content:"";position:absolute;z-index:-1;left:2.5%;top:6%;width:52%;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 90%);-webkit-mask-image:linear-gradient(90deg,#000 15%,transparent 95%);mask-image:linear-gradient(90deg,#000 15%,transparent 95%);filter:blur(2px);pointer-events:none}
.btn-cta:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 14px 28px rgba(233,99,74,.30),0 4px 10px rgba(233,99,74,.18),inset 0 -2px 5px rgba(170,50,28,.16),inset 0 1px 1px rgba(255,255,255,.28)}
.btn-cta .micro{align-self:stretch;text-align:center;font-size:0.8125rem;font-weight:400;letter-spacing:.14em;line-height:1.5;padding-bottom:0.3125rem;margin-bottom:0.3125rem;border-bottom:1px solid rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(150,40,20,.22)}
/* 2026-11-08：ラベルは必ず1行に。ボタンの幅に対して文字がはみ出すときだけ、自動で小さくします。
   100cqw ＝ ボタンの中の文字が入る幅（ボタンの幅から左右の余白を引いた幅）。
   「まずは体験を予約する」は10文字＋字間.14em ＝ 11.4文字分なので、12で割ると約5%の余裕が残ります。
   いままでスマホだけに入れていた仕組みを、PC・タブレットにも広げたものです。 */
.btn-cta{container-type:inline-size}
.btn-cta .label{font-size:min(1.3125rem,calc(100cqw / 12));font-weight:400;letter-spacing:.14em;line-height:1.4;white-space:nowrap;text-shadow:0 1px 2px rgba(150,40,20,.22)}
.btn-cta .arrow{position:absolute;right:1.125rem;top:50%;width:40px;height:40px;margin-top:-1.25rem;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(150,40,20,.16)}
.btn-cta .arrow svg{width:16px;height:16px;color:var(--cta)}
.container-xl{width:100%;max-width:1200px;margin:0 auto;padding:0 1.25rem}
/* サイト共通（footer.php）。今のテーマのフッターの形（淡い水色のグラデーション・上に波）を引き継ぎ、店舗情報（今のテーマのアクセスの内容）と地図を入れた。
   上の波はFVの下の波と同じ形を上下反対にしたもの（ページの最初と最後をそろえる）。S6「詳しく知りたい方へ」はやめて、リンクはフッターのメニューにまとめた */
.site-footer{position:relative;background:linear-gradient(180deg,var(--fv-bg) 0%,#DCEBF7 100%);color:var(--ink-navy);padding:0 0 2.5rem}
.ftr-wave{display:block;width:100%;height:64px;transform:scaleY(-1)}
.ftr-store{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(2.5rem,5vw,4.5rem);align-items:center;max-width:1040px;margin:clamp(1.5rem,3vw,2.5rem) auto 0}
.ftr-logo{display:inline-block}
.ftr-logo img{display:block;height:48px;width:auto}
.ftr-name{margin-top:1.25rem;font-size:var(--fs-body);line-height:1.6;letter-spacing:.08em;color:var(--ink-navy)}
.ftr-dl{display:grid;gap:0.375rem;margin:0.875rem 0 0}
.ftr-dl > div{display:grid;grid-template-columns:5em minmax(0,1fr);column-gap:0.75rem;font-size:var(--fs-note);line-height:1.8;letter-spacing:.04em}
.ftr-dl dt{color:var(--label-blue)}
.ftr-dl dd{margin:0;color:var(--ink-navy)}
/* v153：電話番号は店舗名のすぐ下に、アイコン＋大きめの数字で目立たせる（ともちん指定）。色はリンクと同じ濃い青。スマホはタップで電話 */
.ftr-phone{margin-top:0.75rem}
.ftr-tel{display:inline-flex;align-items:center;gap:0.625rem;color:var(--brand-ink);text-decoration:none}
.ftr-tel-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #CFE2F1}
.ftr-tel-icon svg{width:17px;height:17px}
.ftr-tel-num{font-family:"Nunito",var(--ui-font);font-size:1.5rem;font-weight:600;line-height:1.2;letter-spacing:.04em}
.ftr-tel:hover .ftr-tel-num{opacity:.75}
.ftr-online{margin-top:1rem;padding-top:0.875rem;border-top:1px solid rgba(131,184,221,.35);font-size:var(--fs-note);line-height:1.8;letter-spacing:.04em;color:var(--ink-sub)}
/* 地図：Googleマップの埋め込み（16:10・角丸） */
.ftr-map-frame{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#E4EDF4;box-shadow:0 10px 28px rgba(40,90,140,.08)}
.ftr-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ftr-map-link{display:inline-flex;align-items:center;gap:0.375rem;margin-top:0.875rem;font-size:var(--fs-note);letter-spacing:.06em;color:var(--brand-ink);text-decoration:none}
.ftr-map-link svg{width:13px;height:13px}
.ftr-map-link:hover{color:var(--ink-navy)}
/* メニュー：3つのまとまり（サービス／はじめての方へ／情報） */
.ftr-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;max-width:1040px;margin:clamp(3rem,5vw,4rem) auto 0;padding-top:clamp(2.25rem,4vw,3rem);border-top:1px solid rgba(131,184,221,.35)}
.ftr-col-ttl{font-size:var(--fs-note);line-height:1.6;letter-spacing:.12em;color:var(--label-blue)}
.ftr-col ul{display:grid;gap:0.25rem;margin-top:0.75rem}
.ftr-col a{display:inline-block;padding:0.125rem 0;font-size:var(--fs-note);line-height:1.8;letter-spacing:.06em;color:var(--ink-navy);text-decoration:none}
.ftr-col a:hover{color:var(--brand-ink)}
.ftr-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;max-width:1040px;margin:clamp(2.5rem,4vw,3.5rem) auto 0;padding-top:1.25rem;border-top:1px solid rgba(131,184,221,.35)}
.ftr-legal{display:flex;flex-wrap:wrap;gap:0.375rem 1.25rem}
.ftr-legal a{font-size:0.75rem;line-height:1.8;letter-spacing:.04em;color:#5F7F9C;text-decoration:none}
.ftr-legal a:hover{color:var(--brand-ink)}
.ftr-copy{flex:none;font-family:"Nunito",var(--ui-font);font-size:0.75rem;font-weight:600;letter-spacing:.06em;color:#5F7F9C}
@media (max-width:1023px){
  .ftr-store{grid-template-columns:minmax(0,1fr);max-width:40rem;row-gap:2rem}
  .ftr-nav{max-width:40rem}
  .ftr-bottom{max-width:40rem;flex-direction:column;align-items:flex-start}
}
/* ===== SP 固定ボタン ===== */
.sticky-cta{display:none}
@media (max-width:767px){
  :root{--fs-body:.875rem;--fs-note:.75rem;--fs-h2:1.5rem;--fs-h3:1.25rem}
  /* v143：スマホのヘッダーは ロゴ＋メニューのボタン（体験予約のボタンはなし・ともちん指定。予約は画面下の固定ボタンへ） */
  .gnav{display:none}
  /* ボタンは押しやすい48px角。ヘッダーの高さ（60px）は変えないよう、上下を4pxずつ外へ */
  .menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;width:48px;height:48px;margin:-0.25rem -0.5rem -0.25rem 0;padding:0;border:0;background:none;color:var(--ink-navy);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .menu-icon{position:relative;display:block;width:24px;height:14px}
  .menu-icon i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .menu-icon i:nth-child(1){top:0}
  .menu-icon i:nth-child(2){top:0.375rem}
  .menu-icon i:nth-child(3){top:0.75rem}
  .menu-label{font-family:"Nunito",var(--ui-font);font-size:0.5625rem;font-weight:600;line-height:1;letter-spacing:.14em;color:var(--label-blue)}
  /* メニュー：画面いっぱいに重ねる。上はヘッダーと同じ並び（ロゴ＋閉じるボタン）→ リンク → 予約ボタン。開いている間はページを止める */
  .sp-menu{display:block;position:fixed;inset:0;z-index:100;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s}
  .sp-menu.is-open{visibility:visible;opacity:1;transition:opacity .25s ease}
  .sp-menu-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.625rem 1rem;background:#fff;box-shadow:0 1px 0 var(--line)}
  .menu-close .menu-icon i{top:0.375rem}
  .menu-close .menu-icon i:nth-child(1){transform:rotate(45deg)}
  .menu-close .menu-icon i:nth-child(2){opacity:0}
  .menu-close .menu-icon i:nth-child(3){transform:rotate(-45deg)}
  .sp-menu-body{padding:1.5rem 1.5rem calc(3rem + env(safe-area-inset-bottom))}
  .sp-menu-list{border-top:1px solid #DCE6F0}
  .sp-menu-list a{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:1.25rem 0.375rem 1.25rem 0.25rem;border-bottom:1px solid #DCE6F0;font-size:1rem;line-height:1.5;letter-spacing:.08em;color:var(--ink-navy);text-decoration:none}
  .sp-menu-list a::after{content:"";flex:none;width:8px;height:8px;border-top:1.5px solid var(--brand-ink);border-right:1.5px solid var(--brand-ink);transform:rotate(45deg)}
  .sp-menu .cta-block{margin-top:2.5rem}
  .sp-menu-list,.sp-menu .cta-block{transform:translateY(8px);transition:transform .3s ease}
  .sp-menu.is-open .sp-menu-list,.sp-menu.is-open .cta-block{transform:none}
  html.menu-open,html.menu-open body{overflow:hidden}
  .site-header .inner{padding:0.625rem 1rem}
  .logo{font-size:1.0625rem}
  .cta-block{align-items:center}
  .btn-cta{min-height:68px;padding:0.625rem 3.625rem 0.625rem 1.625rem}
  /* v149：予約ボタンの2行目（まずは体験を予約する など）は、ボタンの幅に合わせて文字を小さくし、必ず1行に（最大18px・ともちん指定）。
     文字の入る幅（ボタンの幅から左右の余白84pxを引いた幅＝100cqw）÷12。375pxの画面で、FV・S3・S7のボタンは18pxのまま、S5の予約カードのボタンは約17.6px、320pxでは約13〜17px */
  .btn-cta{container-type:inline-size}
  .btn-cta .label{font-size:min(1.125rem,calc(100cqw / 12));white-space:nowrap}
  .btn-cta .micro{font-size:0.75rem}
  .btn-cta .arrow{right:0.875rem;width:34px;height:34px;margin-top:-1.0625rem}
  .btn-cta .arrow svg{width:14px;height:14px}
  .sticky-cta{display:flex;align-items:stretch;gap:0.5rem;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -6px 18px rgba(40,70,100,.1);transform:translateY(110%);transition:transform .3s}
  .sticky-cta.is-show{transform:none}
  /* v152：左に電話のボタン、右に予約のボタン（ともちん指定）。予約のボタンは残りの幅いっぱいで、料金の一行＋「まずは体験を予約する」の2行（ページ内の予約ボタンと同じ組み方） */
  .sticky-tel{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;width:60px;min-height:56px;padding-left:.12em;border-radius:999px;background:var(--fv-bg);box-shadow:inset 0 0 0 1px #CFE2F1;color:var(--brand-ink);text-decoration:none;font-size:0.625rem;line-height:1;letter-spacing:.12em}
  .sticky-tel svg{width:20px;height:20px}
  .sticky-book{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;min-height:56px;border-radius:999px;background:var(--cta-grad);color:#fff;text-decoration:none;font-weight:400;letter-spacing:.08em;white-space:nowrap;box-shadow:0 6px 14px rgba(233,99,74,.24),inset 0 1px 1px rgba(255,255,255,.28);text-shadow:0 1px 2px rgba(150,40,20,.22)}
  .sticky-book small{font-size:0.6875rem;line-height:1.3;opacity:.95}
  .sticky-book span{font-size:1rem;line-height:1.3}
  /* フッター：店舗情報 → 地図 → メニュー（まとまりごとに2列）→ 規約 → コピーライト。下は固定ボタンのぶん空ける */
  .site-footer{padding-bottom:7.5rem}
  .ftr-wave{height:40px}
  .ftr-store{margin-top:1rem;row-gap:1.75rem}
  .ftr-logo img{height:40px}
  .ftr-tel-num{font-size:1.375rem}
  .ftr-map-frame{border-radius:20px}
  .ftr-nav{grid-template-columns:minmax(0,1fr);gap:1.5rem;margin-top:2.5rem;padding-top:2rem}
  .ftr-col ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;margin-top:0.5rem}
  .ftr-bottom{margin-top:2.25rem;gap:0.75rem}
  .ftr-legal{gap:0.25rem 1rem}
}

/* ===== ほかのページ：ヘッダーが画面の上に重ならなくなった（固定をやめた）ぶん、ページの上の余白を詰める（中身はそのまま） ===== */
.crumb{padding-top:1.75rem}
.breadcrumb{padding-top:0}
#counseling .mv-box{padding-top:0}
@media (max-width:768px){
  .crumb{padding-top:1.5rem}
  .breadcrumb{padding-top:1rem}
}

/* =========================================================
   ヘッダーの固定｜2026-11-08
   スクロールすると画面上部に貼り付き、少し縮みます。
   position:fixed ではなく sticky を使っています。
   fixed だと本文の先頭がヘッダーの下に潜るため body に padding を
   足す必要があり、ヘッダーの高さを変えるたびに数値を合わせ直す
   ことになります（旧サイトの body{padding:60px 0 0} がそれでした）。
========================================================= */
.site-header{
  position:sticky; top:0; z-index:90; background:#fff;
  transition:box-shadow .25s ease;
}
.site-header .inner{transition:padding .25s ease}
.site-header .logo img{transition:height .25s ease}

/* 10pxでも動いたら縮める（JSで body に is-scrolled を付けます） */
body.is-scrolled .site-header{box-shadow:0 2px 12px rgba(40,70,100,.10)}
body.is-scrolled .site-header .inner{padding-top:0.5rem;padding-bottom:0.5rem}
body.is-scrolled .site-header .logo img{height:40px}
@media (max-width:900px){
  body.is-scrolled .site-header .logo img{height:2rem}
}

/* アンカーで飛んだとき、見出しがヘッダーに隠れないようにします */
[id]{scroll-margin-top:4.5rem}
@media (max-width:900px){
  [id]{scroll-margin-top:4rem}
}

/* 動きを減らす設定の端末では、縮むアニメーションを止めます */
@media (prefers-reduced-motion:reduce){
  .site-header,.site-header .inner,.site-header .logo img{transition:none}
}