/* ==========================================================================
   layout.css
   ヘッダー・フッター・パンくず・セクション枠。ページの骨格にあたる部分。
   ========================================================================== */

/* ---------- 土台（wrap・セクション）（出典 preview/top.html） ---------- */
.wrap{width:100%;max-width:var(--w-content);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--w-wide)}
.section{padding-block:var(--space-3xl)}
.section--tight{padding-block:var(--space-2xl)}
.section--loose{padding-block:var(--space-4xl) var(--space-3xl)}
.section--alt{background:var(--c-paper-2)}
/* 上下余白を等分にせず、セクションごとにリズムを変える */
#why{padding-block:var(--space-3xl) var(--space-4xl)}
#service{padding-block:var(--space-4xl) var(--space-3xl)}
#record{padding-block:var(--space-4xl) var(--space-3xl)}
#flow{padding-block:var(--space-3xl) var(--space-4xl)}
#column{padding-block:var(--space-4xl) var(--space-3xl)}
.section__head{display:block;margin-bottom:var(--space-xl)} /* 縦積みのみ（横2カラム禁止） */
.eyebrow{
  display:block; font-family:var(--font-body); font-size:var(--text-sm);
  font-weight:700; letter-spacing:.14em; color:var(--c-brass);
  margin-bottom:var(--space-2xs);
}
.section__title{font-size:var(--text-3xl)}
.section__lead{margin-top:var(--space-md);max-width:60ch;color:var(--c-ink-2)}

/* ---------- 狭い版のwrap（出典 preview/service-consulting.html） ---------- */
.wrap--narrow{max-width:880px}

/* ---------- ヘッダー（出典 preview/company.html） ---------- */
.header{position:sticky;top:0;z-index:var(--z-sticky-nav);background:var(--c-paper);border-bottom:var(--rule)}
.header__inner{display:flex;align-items:center;gap:var(--space-lg);min-height:var(--header-h)}
.logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;flex:none}
.logo__mark{font-family:var(--font-display);font-weight:700;font-size:1.375rem;letter-spacing:.16em;color:var(--c-navy);line-height:1}
.logo__sub{font-size:10px;letter-spacing:.06em;color:var(--c-ink-3);line-height:1}
.gnav{margin-left:auto}
.gnav__list{display:flex;align-items:center;gap:var(--space-md)}
.gnav__link{font-size:var(--text-sm);font-weight:500;color:var(--c-ink-2);text-decoration:none;
  white-space:nowrap;line-height:1;padding-block:6px;border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.gnav__link:hover,.gnav__link[aria-current=page]{color:var(--c-navy);border-bottom-color:var(--c-brass)}
.header__cta{display:flex;align-items:center;gap:var(--space-2xs);flex:none}
.burger{display:none}
.lbl-short{display:none}
@media (max-width:1080px){
  .gnav,.header__cta .btn--secondary{display:none}
  .header__cta{margin-left:auto}
  .burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    background:transparent;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);cursor:pointer;flex:none}
  .burger svg{width:20px;height:20px}
}
@media (max-width:520px){.header__cta .btn{padding:0 var(--space-sm);font-size:var(--text-xs)}.logo__mark{font-size:1.125rem}}
@media (max-width:400px){
  .header__inner{gap:var(--space-sm)}.header__cta{gap:var(--space-3xs)}
  .logo__sub{display:none}.logo__mark{font-size:1rem;letter-spacing:.1em}
  .lbl-full{display:none}.lbl-short{display:inline}.header__cta .btn{padding:0 var(--space-xs)}
}

/* ---------- パンくず・ページヘッダー（出典 preview/company.html） ---------- */
.crumbs{border-bottom:var(--rule)}
.crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);
  padding-block:var(--space-xs);font-size:var(--text-xs);color:var(--c-ink-3)}
.crumbs__list a{color:var(--c-ink-3);text-decoration:none;white-space:nowrap}
.crumbs__list a:hover{color:var(--c-navy);text-decoration:underline}
.crumbs__sep{color:var(--c-paper-3)}
.phead{padding-block:var(--space-xl) var(--space-lg)}
.eyebrow{display:block;font-size:var(--text-sm);font-weight:700;letter-spacing:.14em;
  color:var(--c-brass);margin-bottom:var(--space-2xs)}
.phead__title{font-size:var(--text-3xl)}
.phead__lead{margin-top:var(--space-md);max-width:62ch;color:var(--c-ink-2)}

/* ---------- 本文レイアウト（フォームのある2ページ）（出典 preview/contact.html） ---------- */
.body--form{padding-block:var(--space-lg) var(--space-4xl)}
/* 資料請求・無料相談は、本文320pxの補助カラムを右に置く2カラムだった。
   2026-08-07、Nの指摘で1カラムに変更。細い列では「お約束」もFLOWも
   1行15文字ほどにしかならず、読ませたい説明が読めていなかった。
   横幅は他のページと同じ .wrap（最大1120px）をそのまま使う。 */
.layout--form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3xl);align-items:start}

/* ---------- ページ内ナビ（出典 preview/company.html） ---------- */
.pnav{border-block:var(--rule);background:var(--c-paper)}
.pnav__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs);padding-block:var(--space-sm)}
.pnav__link{display:inline-flex;align-items:center;min-height:38px;padding:0 var(--space-md);
  font-size:var(--text-sm);font-weight:500;color:var(--c-ink-2);text-decoration:none;line-height:1;
  white-space:nowrap;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);background:#fdfefe;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.pnav__link:hover{color:var(--c-navy);border-color:var(--c-navy-600)}

/* ---------- セクション（下層）（出典 preview/company.html） ---------- */
.section{padding-block:var(--space-3xl);scroll-margin-top:calc(var(--header-h) + 16px)}
.section--alt{background:var(--c-paper-2)}
#creed{padding-block:var(--space-2xl) var(--space-4xl)}
#greeting{padding-block:var(--space-4xl) var(--space-3xl)}
#profile{padding-block:var(--space-3xl) var(--space-4xl)}
.section__head{display:block;margin-bottom:var(--space-xl)}
.section__title{font-size:var(--text-2xl)}

/* ---------- CTA帯・フッター（出典 preview/column-single.html） ---------- */
.cta{background:var(--c-navy-900);color:var(--c-paper)}
.cta__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cta__col{padding:var(--space-2xl) var(--gutter);text-align:center}
.cta__col+.cta__col{border-left:1px solid rgba(247,249,251,.16)}
.cta__eyebrow{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;color:var(--c-brass-bright)}
.cta__title{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-2xl);color:var(--c-paper)}
.cta__desc{margin:var(--space-sm) auto 0;max-width:34ch;font-size:var(--text-sm);color:#c2d3e2}
.cta__action{margin-top:var(--space-lg)}
@media (max-width:820px){.cta__grid{grid-template-columns:minmax(0,1fr)}
  .cta__col+.cta__col{border-left:0;border-top:1px solid rgba(247,249,251,.16)}}
.footer{background:var(--c-navy-900);color:var(--c-paper)}
.footer__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-2xl);padding-block:var(--space-2xl)}
.footer__brand .logo__mark{color:var(--c-paper)}
.footer__brand .logo__sub{color:#9fb8cd}
.footer__addr{margin-top:var(--space-md);font-size:var(--text-sm);color:#c2d3e2;line-height:1.9}
.footer__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-lg)}
.footer__navTitle{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;color:var(--c-brass-bright);margin-bottom:var(--space-sm)}
.footer__list li+li{margin-top:var(--space-2xs)}
.footer__list a{font-size:var(--text-sm);color:#dbe7f1;text-decoration:none}
.footer__list a:hover{color:var(--c-paper);text-decoration:underline}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);align-items:center;
  justify-content:space-between;border-top:1px solid rgba(247,249,251,.16);padding-block:var(--space-md);
  font-size:var(--text-xs);color:#9fb8cd}
.footer__bottom a{color:#9fb8cd;text-decoration:none}
.footer__bottom a:hover{color:var(--c-paper);text-decoration:underline}
@media (max-width:1180px){.footer__main{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}}
@media (max-width:900px){.footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer__nav{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
}
.preview-bar{background:var(--c-ink);color:var(--c-paper);font-size:var(--text-xs);
  padding:var(--space-2xs) var(--gutter);text-align:center}

/* ---------- CTA帯（下層の2枠）（出典 preview/faq.html） ---------- */
.cta{background:var(--c-navy-900);color:var(--c-paper)}
.cta__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cta__col{padding:var(--space-2xl) var(--gutter);text-align:center}
.cta__col+.cta__col{border-left:1px solid rgba(247,249,251,.16)}
.cta__eyebrow{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;color:var(--c-brass-bright)}
.cta__title{margin-top:var(--space-2xs);font-family:var(--font-display);font-size:var(--text-2xl);color:var(--c-paper)}
.cta__desc{margin:var(--space-sm) auto 0;max-width:34ch;font-size:var(--text-sm);color:#c2d3e2}
.cta__action{margin-top:var(--space-lg)}
@media (max-width:820px){.cta__grid{grid-template-columns:minmax(0,1fr)}
  .cta__col+.cta__col{border-left:0;border-top:1px solid rgba(247,249,251,.16)}}

/* ---------- モバイルメニュー（1080px未満） ----------
   静的プレビューではボタンだけで中身が無かったため、ここで新規に作った部分。
   1080px以上では burger 自体が出ないので、このブロックも効かない。 */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); display:flex; justify-content:flex-end }
.drawer[hidden]{ display:none }

.drawer__scrim{
  position:absolute; inset:0; z-index:0;
  background:rgba(8,44,75,.5);
  border:0; padding:0; cursor:pointer;
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.drawer.is-open .drawer__scrim{ opacity:1 }

.drawer__panel{
  position:relative; z-index:1;
  width:min(360px,86vw); max-height:100%;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--c-paper);
  border-left:var(--rule);
  padding:var(--space-lg) var(--gutter) var(--space-2xl);
  transform:translateX(100%);
  transition:transform var(--dur-base) var(--ease-out);
}
.drawer.is-open .drawer__panel{ transform:translateX(0) }

.drawer__nav{ display:block }
.drawer__list{ display:grid }
.drawer__link{
  display:block; padding:var(--space-sm) 0;
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:700;
  color:var(--c-ink); text-decoration:none;
  border-bottom:var(--rule);
}
.drawer__link[aria-current=page]{ color:var(--c-navy) }
.drawer__link[aria-current=page]::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:var(--space-2xs);
  background:var(--c-brass); border-radius:50%; vertical-align:middle;
}

.drawer__actions{ display:grid; gap:var(--space-2xs); margin-top:var(--space-lg) }
.drawer__note{ margin-top:var(--space-md); font-size:var(--text-xs); color:var(--c-ink-3); line-height:1.8 }

/* 動きを減らす設定では、スライドさせずその場に出す */
@media (prefers-reduced-motion:reduce){
  .drawer__panel{ transform:none }
  .drawer__scrim{ opacity:1 }
}

/* ---------- 静的プレビューに無かった要素のぶん ----------
   テンプレート化にあたって新しく必要になった部品。
   プレビューは1ページぶんの見た目を確かめるものだったので、
   ロゴ画像の差し替え・パンくずの区切り・本文の器などは無かった。 */

.main{ display:block }
.btn--block{ display:flex; width:100% }

/* 画像ロゴが置かれたときの表示。文字ロゴと同じ高さに収める。 */
.logo__img{ width:auto; height:40px; max-width:200px }
@media (max-width:520px){ .logo__img{ height:32px } }
@media (max-width:400px){ .logo__img{ height:28px } }

/* パンくずの各項目と区切り */
.crumbs__item{ display:inline; white-space:nowrap }
.crumbs__item .crumbs__current{ white-space:normal }
.crumbs__sep{ margin-inline:var(--space-2xs); color:var(--c-ink-3) }

/* フッターの列 */
.footer__col{ min-width:0 }

/* ハンバーガーの2つのアイコン。開いているあいだは×に差し替える。 */
.burger__close{ display:none }
.burger[aria-expanded="true"] .burger__open{ display:none }
.burger[aria-expanded="true"] .burger__close{ display:block }

/* ---------- フッター下部の法令リンク ----------
   プライバシーポリシーと特定商取引法に基づく表記を並べる。
   特商法は2枚あり、フッターに出すのは公開版（電話番号・担当者名なし）のみ。
   教材販売元版は noindex にしてサイト内からリンクしない（inc/noindex.php）。 */
.footer__legal{ display:flex; flex-wrap:wrap; gap:var(--space-md) }
@media (max-width:400px){ .footer__legal{ gap:var(--space-2xs) } }