/* cocoro 下層ページ（cocoro-official.com/about・gallery・faq・policy）共通の見た目
   2026-10-27 箱7・けいと「ギャラリーとか下層ページのデザインがダサすぎる 時間かけていいからこだわって」
   決まり：スマホが主（幅390で組んでからPCへ広げる）・お店(shop.)と同じ色と字・飾らず、余白と写真で見せる・動きはゆっくり少しだけ */
@font-face{ font-family:'AttenNewAlt'; font-style:normal; font-weight:350; font-display:swap;
  src:url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2) format('woff2');
  size-adjust:95.5%; ascent-override:95.29%; descent-override:30.37%; line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root{
  --bg:#f8f8f7; --paper:#f3f1ec; --ink:#4e4c46; --text:#6c6962; --sub:#a8a6a1; --line:#e3e3e0; --tile:#eaeaea;
  --en:"AttenNewAlt","Jost","Zen Kaku Gothic New","Helvetica Neue",Arial,sans-serif;
  --ja:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --gut:24px; --head:62px; --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:750px){ :root{ --gut:clamp(32px,4vw,64px); --head:70px; } }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ja); font-weight:300; font-size:14px; line-height:2; letter-spacing:.06em; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.en{ font-family:var(--en); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- 見出しの帯（お店と同じ：左にメニュー・真ん中にロゴ・右にカート） ---------- */
.hd{ position:sticky; top:0; z-index:50; height:var(--head); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 calc(var(--gut) - 6px); background:rgba(248,248,247,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .4s, transform .6s var(--ease); }
.hd.line{ border-color:var(--line); }
.hd__menu{ justify-self:start; width:44px; height:44px; display:grid; place-items:center; margin-left:-4px; }
.hd__menu i{ display:block; width:22px; height:1px; background:var(--ink); position:relative; transition:background .3s; }
.hd__menu i::before,.hd__menu i::after{ content:""; position:absolute; left:0; width:22px; height:1px; background:var(--ink); transition:transform .6s var(--ease); }
.hd__menu i::before{ top:-7px; } .hd__menu i::after{ top:7px; }
html.nav-open .hd__menu i{ background:transparent; }
html.nav-open .hd__menu i::before{ transform:translateY(7px) rotate(45deg); }
html.nav-open .hd__menu i::after{ transform:translateY(-7px) rotate(-45deg); }
.hd__logo img{ width:119px; height:auto; }
@media (min-width:990px){ .hd__logo img{ width:235px; } }  /* BASE のロゴと同じ大きさ */
.hd__cart{ position:fixed; right:10px; top:16px; z-index:60; display:block; padding:5px 8px; line-height:0; background:#fff; border-radius:3px; box-shadow:0 1px 0 1px rgba(150,150,150,.25); transition:box-shadow .2s; }
.hd__cart:hover{ box-shadow:0 0 0 1px rgba(150,150,150,.2); }
.hd__cart svg{ width:auto; height:16px; fill:#4e4c46; stroke:none; }
@media (max-width:420px){ .hd__cart{ right:8px; padding:5px 6px; } }  /* BASE の #baseMenu（カート）と同じ位置・同じ形 */

/* ---------- 全画面のメニュー ---------- */
.nav{ position:fixed; inset:0; z-index:40; background:var(--bg); padding:calc(var(--head) + 28px) var(--gut) 36px; display:flex; flex-direction:column; justify-content:space-between; clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease); pointer-events:none; }
html.nav-open .nav{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.nav ul{ list-style:none; margin:0; padding:0; }
.nav li{ overflow:hidden; }
.nav li a{ display:flex; align-items:baseline; gap:14px; padding:9px 0; font:300 clamp(17px,4.6vw,24px)/1.3 var(--en); letter-spacing:.1em; color:var(--ink); text-transform:lowercase; transform:translateY(110%); transition:transform .9s var(--ease); }
.nav li a small{ font:300 9px/1 var(--en); letter-spacing:.2em; color:var(--sub); min-width:18px; }
.nav li + li{ border-top:1px solid rgba(78,76,70,.07); }
.nav li a.on{ color:var(--sub); }
html.nav-open .nav li a{ transform:none; }
.nav__foot{ display:flex; flex-wrap:wrap; gap:10px 22px; font:300 11px/1.4 var(--en); letter-spacing:.18em; color:var(--sub); opacity:0; transition:opacity .6s .5s; }
html.nav-open .nav__foot{ opacity:1; }
@media (min-width:750px){ .nav{ padding-left:calc(var(--gut) + 6vw); } }

/* ---------- ページの始まり（共通） ---------- */
.pg-head{ padding:clamp(56px,12vw,140px) var(--gut) clamp(40px,7vw,90px); }
.pg-head__no{ margin:0 0 18px; font:300 10px/1 var(--en); letter-spacing:.32em; color:var(--sub); text-transform:uppercase; }
.pg-head h1{ margin:0; font:300 clamp(44px,13vw,120px)/1 var(--en); letter-spacing:.02em; color:var(--ink); text-transform:lowercase; }
.pg-head h1 .ch{ display:inline-block; }
.pg-head__ja{ margin:22px 0 0; font-size:13px; letter-spacing:.24em; color:var(--text); }
.pg-head__rule{ display:block; width:40px; height:1px; margin-top:28px; background:var(--ink); opacity:.5; transform-origin:left; }
@media (min-width:750px){ .pg-head{ max-width:1240px; margin:0 auto; } }

/* ---------- 次のページへ ---------- */
.next{ display:block; margin:clamp(90px,14vw,180px) var(--gut) 0; padding:clamp(40px,7vw,80px) 0; border-top:1px solid var(--line); text-align:left; }
.next small{ display:block; font:300 10px/1 var(--en); letter-spacing:.32em; color:var(--sub); text-transform:uppercase; }
.next b{ display:flex; align-items:center; gap:18px; margin-top:18px; font:300 clamp(36px,10vw,84px)/1 var(--en); letter-spacing:.02em; color:var(--ink); text-transform:lowercase; }
.next b i{ display:block; flex:none; width:clamp(36px,8vw,80px); height:1px; background:currentColor; transition:width .8s var(--ease); }
@media (hover:hover){ .next:hover b i{ width:clamp(60px,12vw,140px); } }
@media (min-width:750px){ .next{ max-width:1240px; margin-left:auto; margin-right:auto; } }

/* ---------- 足もと（お店の第7版と同じ） ---------- */
.ft{ margin-top:0; padding:clamp(56px,7vw,96px) var(--gut) 14px; border-top:1px solid var(--line); }
.ft__top{ max-width:1120px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:40px; }
.ft__brand{ text-align:center; } .ft__brand img{ width:110px; margin:0 auto; opacity:.85; }
.ft__brand p{ margin:16px 0 0; font-size:11px; letter-spacing:.26em; color:#8f8c85; }
.ft__cols{ width:100%; max-width:330px; display:flex; justify-content:space-between; gap:20px; }
.ft__col h3{ margin:0 0 18px; font:400 10px/1 var(--en); letter-spacing:.24em; text-transform:uppercase; color:var(--sub); }
.ft__col a{ display:table; margin:0 0 13px; font:300 13px/1.3 var(--en); letter-spacing:.1em; text-transform:lowercase; color:var(--ink); opacity:.85; }
.ft__bot{ max-width:1120px; margin:44px auto 0; padding-top:12px; border-top:1px solid rgba(78,76,70,.08); display:flex; flex-direction:column; align-items:center; gap:6px; }
.ft__bot p{ margin:0; font:300 10px/1.6 var(--en); letter-spacing:.12em; color:var(--sub); }
.ft__bot nav{ display:flex; gap:18px; } .ft__bot nav a{ font-size:10px; letter-spacing:.06em; color:var(--sub); }
@media (min-width:750px){
  .ft__top{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
  .ft__brand{ text-align:left; } .ft__brand img{ margin:0; }
  .ft__cols{ max-width:none; width:auto; gap:clamp(48px,6vw,104px); }
  .ft__bot{ flex-direction:row; justify-content:space-between; margin-top:clamp(48px,6vw,80px); }
}

/* ---------- 出る前（動きの道具が読めない時は js-ready が付かず、全部見えたまま） ---------- */
html.js-ready [data-in]{ opacity:0; }

/* ページを移る時の幕 */
.veil{ position:fixed; inset:0; z-index:100; background:var(--bg); pointer-events:none; }

/* ===== タップした所に、ふたつの輪が広がる（cocoroのペアの輪・けいと「タップしたら輪が出るようなアニメーション」10/27） ===== */
.m-tap{ position:fixed; z-index:99999; pointer-events:none; width:0; height:0; }
.m-tap i{ position:absolute; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:1px solid; opacity:0; animation:mtap .9s cubic-bezier(.16,1,.3,1) forwards; }
.m-tap i:nth-child(1){ border-color:rgba(214,160,140,.9); transform:translateX(-7px); }
.m-tap i:nth-child(2){ border-color:rgba(150,150,150,.9); transform:translateX(7px); animation-delay:.06s; }
@keyframes mtap{ 0%{ opacity:.9; scale:.2; } 70%{ opacity:.5; } 100%{ opacity:0; scale:1.4; } }
@media (prefers-reduced-motion:reduce){ .m-tap{ display:none; } }