@charset "UTF-8";
/* ============================================================
   雪花 — 一日を、洗い流す
   構造/IA: 松山油脂型（ブランドとECの分離）
   質感/レイアウト: Binu Binu 実測値の翻案
   ============================================================ */

/* ---------- トークン ---------- */
:root{
  /* 地・文字 — すべて実測でコントラストを確認した値。
     地は1色に統一する。Binu Binu はページ毎に地を替えるが、
     沈めた地(#D4C7B5)に本文(#796D66)で 3.0:1 しか無く AA を落ちている。
     ここは再現せず翻案する。「落とす」思想にも地の一本化が合う。 */
  --paper:      #F2F0EB;   /* 雪の生成り */
  --ink:        #6B5F58;   /* 温墨          — 本文 5.42:1 */
  --ink-strong: #2E2A27;   /* 見出し・反転地 — 12.49:1 */
  --ink-mute:   #756A62;   /* 副次ラベル     — 4.61:1（AA通過の下限まで寄せた） */
  --dim-on-dark: rgba(242,240,235,.62); /* 反転地の副次 — 5.78:1 */
  --line:       rgba(107,95,88,.18);
  --line-soft:  rgba(107,95,88,.10);
  --accent:     #4A6274;   /* 淡藍 — CTA/リンク下線/番号/選択/進捗のみ 5.60:1 */
  --white:      #FBFAF8;

  /* 型スケール（Binu Binu 8/11/14/22/40/48 の比率を保ち最小13pxへ移動） */
  --fs-xxs: 13px;
  --fs-xs:  13px;
  --fs-sm:  16px;
  --fs-md:  20px;
  --fs-lg:  clamp(24px, 2.4vw, 32px);
  --fs-xl:  clamp(30px, 4vw, 44px);
  --fs-xxl: clamp(40px, 6vw, 64px);

  /* 余白 */
  /* 左ナビ列。Binu Binu の実測は 138px/108px だが、あれは彼らの短いラベル
     (SHOP / ABOUT)に合わせた寸法。雪花は最長が Philosophy=106px なので
     そのままだとリンクが列を突き破って本文に食い込む。中身に合わせて実測で決める。
     内訳: 左パディング40 + 最長ラベル106 = 146 、本文まで余白30 → 列 176 */
  --rail:  176px;
  --rail-w: 146px;
  --gut:   60px;          /* 右ガター */
  --pad:   clamp(20px, 4vw, 40px);
  --sec-y: clamp(88px, 12vw, 176px);
  --maxw:  1170px;        /* Binu Binu: 下層は max 1170px */

  /* 書体 */
  --serif: "Zen Old Mincho", serif;
  --sans:  "Noto Sans JP", system-ui, sans-serif;
  --latin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
img,video{ max-width:100%; height:auto; display:block }
button{ font:inherit; color:inherit; background:none; border:0 }
ul,ol{ list-style:none }
a{ color:inherit; text-decoration:none }

html{ -webkit-text-size-adjust:100% }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-sm);
  line-height:1.95;
  font-feature-settings:"palt" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* 行頭禁則 — 約物を行頭に置かない。
     word-break は normal のまま（和文はどこでも折れる）。
     auto-phrase / keep-all は使わない：文節単位でしか折れなくなり、
     読点の直後を折り禁止にすると文節が繋がって塊になり、はみ出す。
     行末を「、」で終わらせない処理は js/main.js が担当する。 */
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}
::selection{ background:var(--accent); color:var(--white) }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

.u-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--white);
  padding:12px 20px; font-size:var(--fs-xxs); letter-spacing:.1em;
}
.u-skip:focus{ left:8px; top:8px }

/* ============================================================
   body グリッド — Binu Binu 実測の再現
   [ナビ 138px | 本文 1fr | ワードマーク auto]
   ============================================================ */
body{
  display:grid;
  grid-template-areas:
    "navigation body logo"
    "footer     footer footer";
  grid-template-rows:1fr auto;
  grid-template-columns:var(--rail) 1fr auto;
  min-height:100vh;
}

/* ---------- 左レール（ナビ） ---------- */
.Nav{ grid-area:navigation; width:var(--rail-w); padding:18px 0 0 var(--pad); z-index:2 }
.Nav__inner{ position:sticky; top:20px }
.Nav__group{ margin-bottom:26px }
.Nav a,
.Nav__label{
  display:block;
  font-family:var(--latin);
  font-size:var(--fs-xxs);
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.9;
}
.Nav a{ position:relative; width:max-content; cursor:pointer; transition:color .2s var(--ease) }
.Nav a .ja{
  display:block;
  font-family:var(--sans);
  font-size:var(--fs-xxs);
  letter-spacing:.08em;
  text-transform:none;
  color:var(--ink-mute);
  transition:color .2s var(--ease);
}
.Nav a::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:0; height:1px; background:var(--accent);
  transition:width .28s var(--ease);
}
.Nav a:hover{ color:var(--accent) }
.Nav a:hover .ja{ color:var(--accent) }
.Nav a:hover::after{ width:100% }
.Nav a[aria-current="page"]{ color:var(--accent) }
.Nav a[aria-current="page"]::after{ width:100% }

/* ヒーローの上（暗い工房の陰）ではナビを白へ起こす。
   スクロールして生成り地に出たら温墨へ戻す。 */
body.is-hero-top .Nav a,
body.is-hero-top .Nav__label{ color:var(--white); text-shadow:0 1px 18px rgba(0,0,0,.45) }
body.is-hero-top .Nav a .ja{ color:rgba(251,250,248,.72) }
body.is-hero-top .Nav a::after{ background:var(--white) }
.Nav__ext::before{
  content:"↗";
  margin-right:.4em;
  font-size:.9em;
}

/* ---------- 右レール（縦ワードマーク） ---------- */
.Wordmark{ grid-area:logo; padding:18px var(--pad) 0 0; z-index:2 }
.Wordmark a{
  position:sticky; top:18px;
  display:block;
  width:max-content;
  cursor:pointer;
}
.Wordmark__vt{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.28;
  letter-spacing:.14em;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.Wordmark__vt span{ display:block }
.Wordmark a:hover .Wordmark__vt{ color:var(--accent) }
/* トップだけ、ワードマークはヒーロー下端から始まりスクロールで上がって貼り付く */
body.is-index .Wordmark{ padding-top:calc(100vh - 5px) }

/* ---------- 本文列 ---------- */
#Main{ grid-area:body; min-height:100vh; width:92% }
body.is-index #Main{ width:100%; max-width:100% }
@media (max-width:1500px){
  body:not(.is-index) #Main{ max-width:var(--maxw) }
}

/* ============================================================
   ヒーロー — Binu Binu 実測の再現
   ============================================================ */
.hero{
  position:relative;
  height:calc(100vh - 24px);
  left:calc(var(--rail) * -1);
  width:calc(100% + var(--rail) + var(--gut));
  z-index:-1;                 /* ナビ／ワードマークの背面へ回す */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0 }
.hero__bg img{ width:100%; height:100%; object-fit:cover }
/* 左端の陰 — ナビ／縦組みが写真の明暗どちらに乗っても読めるようにする。
   被写体（泡）のある中央〜右には掛けない。 */
.hero__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(26,22,19,.62) 0%, rgba(26,22,19,.30) 24%, rgba(26,22,19,0) 46%),
    linear-gradient(0deg, rgba(26,22,19,.34) 0%, rgba(26,22,19,0) 26%);
}
.hero__vt{
  position:absolute;
  top:0; bottom:0;
  left:calc(var(--rail) + 7vw);
  display:flex; align-items:center;
  z-index:1;
}
.hero__vt div{
  font-family:var(--serif);
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.42;
  letter-spacing:.18em;
  color:var(--white);
  text-shadow:0 1px 24px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.3);
}
.hero__vt span{ display:block }      /* 1文字1span を積む（Binu Binu の縦組み実装） */
.hero__mark{
  position:relative; z-index:1;
  margin-bottom:clamp(40px, 7vh, 80px);
  text-align:center;
  color:var(--white);
  text-shadow:0 1px 30px rgba(0,0,0,.5);
}
.hero__mark b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-xxl);
  letter-spacing:.3em;
  text-indent:.3em;
  line-height:1;
}
.hero__mark i{
  display:block;
  margin-top:14px;
  font-family:var(--latin);
  font-style:normal;
  font-size:var(--fs-xxs);
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  opacity:.9;
}

/* ============================================================
   署名 — 泡が消える（canvas）
   ============================================================ */
/* 左右のレールには被せない。食い破るのはヒーローだけ（下の .hero を参照）。 */
.foam{
  position:relative;
  left:0; width:100%;
  min-height:200vh;                 /* スクロールでスクラブする距離 */
  background:var(--paper);
}
.foam__sticky{
  position:sticky; top:0;
  height:100vh;
  display:grid; place-items:center;
  overflow:hidden;
}
.foam__canvas{ position:absolute; inset:0; width:100%; height:100% }
.foam__copy{ position:relative; z-index:1; text-align:center; padding:0 var(--pad) }
.foam__copy p{
  font-family:var(--serif);
  font-size:var(--fs-lg);
  line-height:2.1;
  letter-spacing:.14em;
  color:var(--ink-strong);
}
.foam__copy small{
  display:block;
  margin-top:28px;
  font-family:var(--latin);
  font-size:var(--fs-xxs);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ============================================================
   共通セクション
   ============================================================ */
.sec{ padding:var(--sec-y) var(--gut) var(--sec-y) 0 }
body.is-index .sec{ padding-left:var(--pad) }
body:not(.is-index) .sec{ padding-right:var(--pad) }

.eyebrow{
  font-family:var(--latin);
  font-size:var(--fs-xxs);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:22px;
}
.h-lg{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-lg);
  line-height:1.7;
  letter-spacing:.1em;
  color:var(--ink-strong);
  margin-bottom:34px;
}
.h-xl{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-xl);
  line-height:1.5;
  letter-spacing:.1em;
  color:var(--ink-strong);
}
.lead{
  font-family:var(--serif);
  font-size:var(--fs-md);
  line-height:2.3;
  letter-spacing:.06em;
  color:var(--ink-strong);
}
.body p + p{ margin-top:1.9em }
.body{ max-width:34em }

.pull{
  font-family:var(--serif);
  font-size:var(--fs-lg);
  line-height:2;
  letter-spacing:.12em;
  color:var(--ink-strong);
  padding:8px 0 8px 28px;
  border-left:1px solid var(--accent);
}

/* リスト（罫線） */
.rules{ border-top:1px solid var(--line) }
.rules li{
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:flex; gap:22px; align-items:baseline;
}
.rules .n{
  font-family:var(--mono);
  font-size:var(--fs-xxs);
  color:var(--accent);
  letter-spacing:.1em;
  flex:0 0 auto;
}

/* ---------- リンク ---------- */
.tlink{
  display:inline-block;
  font-family:var(--latin);
  font-size:var(--fs-xxs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
  cursor:pointer;
  transition:opacity .2s var(--ease);
}
.tlink:hover{ opacity:.6 }

.btn{
  display:inline-block;
  font-family:var(--latin);
  font-size:var(--fs-xxs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--accent);
  padding:17px 40px;
  cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--ink-strong); transform:translateY(-2px) }
.btn--ghost{
  color:var(--accent);
  background:none;
  border:1px solid var(--accent);
}
.btn--ghost:hover{ color:var(--white); background:var(--accent) }

/* ============================================================
   石鹸カード — Binu Binu ProductCard（hoverで枠線が出る）
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line) }
.card{ background:var(--paper) }
.card a{
  display:block;
  padding:16px;
  border:1px solid transparent;
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.card a:hover{ border-color:var(--ink); background:var(--white) }
.card__img{ overflow:hidden; aspect-ratio:4/5 }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease) }
.card a:hover .card__img img{ transform:scale(1.04) }
.card__t{
  margin-top:18px;
  font-family:var(--serif);
  font-size:var(--fs-md);
  letter-spacing:.1em;
  color:var(--ink-strong);
}
.card__s{
  margin-top:6px;
  font-size:var(--fs-xxs);
  letter-spacing:.08em;
  color:var(--ink-mute);
}

/* ============================================================
   図版
   ============================================================ */
.fig{ overflow:hidden }
.fig img{ width:100%; height:100%; object-fit:cover }
/* 「全ブリード」＝本文列いっぱい。レールの下には潜らせない。 */
.fig--bleed{ position:relative; left:0; width:100% }
.cap{
  margin-top:14px;
  font-family:var(--mono);
  font-size:var(--fs-xxs);
  letter-spacing:.08em;
  color:var(--ink-mute);
}

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line) }
.trio > *{ background:var(--paper); padding:34px 26px }

/* ============================================================
   反転帯（最終CTA）
   ============================================================ */
.cta{
  position:relative;
  left:0; width:100%;
  min-height:78vh;
  display:grid; align-items:center;
  overflow:hidden;
}
.cta__bg{ position:absolute; inset:0; z-index:0 }
.cta__bg img{ width:100%; height:100%; object-fit:cover }
/* store-cta.jpg は左に石鹸、右2/3が文字用の空きコンクリート。
   その空けた側に文字を置く（被写体には被せない）。 */
.cta__in{
  position:relative; z-index:1;
  margin-left:auto;
  width:min(54%, 660px);
  padding-right:var(--gut);
}
.cta__in .h-xl{ color:var(--ink-strong) }
.cta__in p{ margin:22px 0 38px; max-width:26em }

/* ============================================================
   会社概要 dl
   ============================================================ */
.dl{ border-top:1px solid var(--line) }
.dl > div{
  display:grid; grid-template-columns:220px 1fr;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.dl dt{
  font-family:var(--latin);
  font-size:var(--fs-xxs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.dl dd{ font-size:var(--fs-sm) }
.dl .num{ font-family:var(--mono); letter-spacing:.04em }

/* ============================================================
   フッター
   ============================================================ */
.foot{
  grid-area:footer;
  background:var(--ink-strong);
  color:var(--paper);
  padding:clamp(56px,7vw,88px) var(--pad);
}
.foot__grid{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.foot__mark > a{ display:inline-block; cursor:pointer; transition:opacity .2s var(--ease) }
.foot__mark > a:hover{ opacity:.62 }
.foot__mark b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:30px;
  letter-spacing:.3em;
  line-height:1;
}
.foot__mark i{
  display:block; margin-top:12px;
  font-family:var(--latin); font-style:normal;
  font-size:var(--fs-xxs); letter-spacing:.34em; text-transform:uppercase;
  color:var(--dim-on-dark);
}
.foot__mark p{ margin-top:22px; font-size:var(--fs-xxs); line-height:2.1; color:var(--dim-on-dark) }
.foot h3{
  font-family:var(--latin); font-weight:400;
  font-size:var(--fs-xxs); letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim-on-dark); margin-bottom:16px;
}
.foot li{ margin-bottom:9px }
.foot li a{ font-size:var(--fs-xxs); letter-spacing:.06em; cursor:pointer; transition:color .2s var(--ease) }
.foot li a:hover{ color:var(--accent) }
.foot__bot{
  max-width:1400px; margin:56px auto 0;
  padding-top:24px; border-top:1px solid rgba(242,240,235,.14);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:var(--fs-xxs); color:var(--dim-on-dark);
}

/* ============================================================
   下層ページの頭
   ============================================================ */
.phead{ padding:clamp(120px,15vh,190px) var(--gut) clamp(56px,7vw,90px) 0 }
body:not(.is-index) .phead{ padding-right:var(--pad) }
.phead .h-xl{ margin-top:16px }
.phead .lead{ margin-top:34px; max-width:32em }

/* ============================================================
   リビール
   ============================================================ */
/* JS が無いときは隠さない（本文が消える事故を防ぐ） */
html:not(.no-js) .rv{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
html:not(.no-js) .rv.in{ opacity:1; transform:none }


/* ============================================================
   モバイル
   ============================================================ */
.Burger{ display:none }
.Drawer{ display:none }

@media (max-width:1024px){
  /* レールは縮めない（ラベルが入らず本文に食い込むため）。右ガターだけ詰める。 */
  :root{ --rail:164px; --rail-w:146px; --gut:32px }
}

@media (max-width:800px){
  body{
    grid-template-areas:
      "body"
      "footer";
    grid-template-columns:1fr;
  }
  .Nav{ display:none }

  /* 縦レールは畳むが、ワードマーク＝トップへの導線は残す。
     左上に横組みで固定し、右上のバーガーと対にする。 */
  .Wordmark{
    position:fixed; top:14px; left:var(--pad); z-index:60;
    width:auto; padding:0; grid-area:unset;
  }
  body.is-index .Wordmark{ padding-top:0 }
  .Wordmark{ transition:opacity .35s var(--ease) }
  .Wordmark a{ position:static; padding:8px 0 }
  .Wordmark__vt{ font-size:20px; letter-spacing:.24em }
  .Wordmark__vt span{ display:inline }          /* 縦組みをやめて横に並べる */

  /* トップのヒーロー上では出さない。ヒーロー自身が大きな「雪花」を持っているので
     重複するうえ、明るい石鹸の写真に白文字が埋もれる。ヒーローを抜けてから
     生成り地の上に温墨で現れる（PC でロゴがヒーロー下端から始まるのと同じ考え）。
     下層ページにはヒーローが無いので最初から出る。 */
  body.is-index.is-hero-top .Wordmark{ opacity:0; pointer-events:none }

  #Main, body.is-index #Main{ width:100%; max-width:100% }

  /* バーガー */
  .Burger{
    display:flex; position:fixed; top:14px; right:14px; z-index:60;
    width:44px; height:44px; align-items:center; justify-content:center;
    background:var(--paper); border:1px solid var(--line);
    cursor:pointer;
  }
  .Burger span{ display:block; width:18px; height:1px; background:var(--ink); position:relative }
  .Burger span::before,.Burger span::after{
    content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink);
  }
  .Burger span::before{ top:-6px } .Burger span::after{ top:6px }
  /* スマホのヒーロー（石鹸の俯瞰）は全面が明るいので、
     バーガーは白抜きにせず生成りのチップのまま置く。 */

  /* ドロワー — 閉じる×＋上寄せ＋スクロール可 */
  .Drawer{
    display:block;
    position:fixed; inset:0; z-index:70;
    background:var(--paper);
    padding:80px var(--pad) 60px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .Drawer.open{ opacity:1; visibility:visible }
  .Drawer__close{
    position:absolute; top:14px; right:14px;
    width:44px; height:44px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .Drawer__close::before,.Drawer__close::after{
    content:""; position:absolute; width:18px; height:1px; background:var(--ink);
  }
  .Drawer__close::before{ transform:rotate(45deg) }
  .Drawer__close::after{ transform:rotate(-45deg) }
  .Drawer__group{ margin-bottom:30px }
  .Drawer a{
    display:block; padding:11px 0;
    font-family:var(--serif); font-size:22px; letter-spacing:.1em;
    color:var(--ink-strong); cursor:pointer;
  }
  .Drawer a i{
    display:block; font-style:normal; margin-top:3px;
    font-family:var(--latin); font-size:var(--fs-xxs);
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  }

  /* スマホでは #Main に左右パディングが無いので、突き出し要素は
     食い破らずそのまま全幅にする（食い破ると 20px はみ出す）。 */
  .hero{ height:calc(100svh - 24px); left:0; width:100% }
  .hero__vt{ left:var(--pad) }
  .hero__vt div{ font-size:24px }
  /* スマホの縦画像は全面が明るい石鹸なので、左と下に陰を足して文字を守る */
  .hero__scrim{
    background:
      linear-gradient(90deg, rgba(26,22,19,.60) 0%, rgba(26,22,19,.20) 48%, rgba(26,22,19,0) 74%),
      linear-gradient(0deg, rgba(26,22,19,.52) 0%, rgba(26,22,19,0) 36%);
  }

  .foam, .fig--bleed, .cta{ left:0; width:100% }
  .foam{ min-height:170vh }
  .sec, body.is-index .sec{ padding:var(--sec-y) var(--pad) }
  .phead, body:not(.is-index) .phead{ padding:120px var(--pad) 56px }
  /* スマホは横に逃げ場が無いので、全幅＋下からの陰で文字を守る */
  .cta__in{ width:100%; margin:0; padding:0 var(--pad) }
  .cta{ min-height:66vh; align-items:end }
  .cta__in{ padding-bottom:clamp(36px,7vw,56px) }
  .cta__bg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(242,240,235,.94) 0%, rgba(242,240,235,.72) 42%, rgba(242,240,235,0) 78%);
  }

  .cards{ grid-template-columns:1fr 1fr }
  .duo{ grid-template-columns:1fr }
  .trio{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .dl > div{ grid-template-columns:1fr; gap:6px }
}

@media (max-width:560px){
  .cards{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:1fr }
  .hero__mark b{ letter-spacing:.24em; text-indent:.24em }
}

/* ============================================================
   モーション配慮 / 印刷
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html:not(.no-js) .rv{ opacity:1 !important; transform:none !important; transition:none !important }
}

/* ネイティブのページ遷移（Binu Binu 実装） */
@view-transition{ navigation:auto }