/* =============================================================
   moca's Patisserie — Sweet Magic Every Day
   -------------------------------------------------------------
   設計方針
   - 絵文字は一切使わない。装飾は線描きSVGか実際のイラストのみ
   - 森の動物キャラクターは使わない
   - スマホ幅360pxで英語表記・見出し・キャプションを折り返させない
   - 派手なアニメーションは避け、余白を大切にした静かな雰囲気
   ============================================================= */

/* -------------------------------------------------------------
   0. フォント
   -------------------------------------------------------------
   Mr De Haviland は自己ホスト（必須）。
   以前 Google Fonts CDN 経由にしたとき、モバイルのプレビュー環境で
   取得がブロックされ筆記体が出ないことが実際にあったため、
   ここは絶対にCDNに戻さないこと。
   ------------------------------------------------------------- */
@font-face{
  font-family:'Mr De Haviland';
  /* base64で直接埋め込み。ファイルを別に置く方式だと、
     index.htmlをダブルクリックで開いたとき（file://）に
     ブラウザのCORS制限でフォント取得がブロックされます。
     assets/fonts/ の .woff2 は差し替え用の元ファイルとして残してあります。 */
  src:url(../assets/fonts/MrDeHaviland.woff2) format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* -------------------------------------------------------------
   1. デザイントークン（色・余白・影）
   ------------------------------------------------------------- */
:root{
  /* カラーパレット（確定・厳守） */
  --paper:      #F7F3EC;   /* 背景 */
  --cream:      #FDFBF6;   /* カード背景 */
  --beige:      #DCCBA7;
  --beige-soft: #EDE8DB;
  --olive:      #8FA383;
  --olive-deep: #6F8563;   /* アクセント／ボタン */
  --terra:      #A36C5E;   /* アクセント／日曜色 */
  --ink:        #5A4636;   /* 本文色 */

  /* 派生色（本文より少し淡い文字） */
  --ink-soft:   #6D5A48;
  --ink-mute:   #8A7A67;
  --ink-faint:  #9A8A76;
  --line:       rgba(90,70,54,.10);

  /* 影 */
  --shadow:      0 8px 26px rgba(90,70,54,.12);
  --shadow-deep: 0 18px 40px rgba(90,70,54,.20);

  /* レイアウト */
  --wrap:  1020px;
  --gutter: 20px;
  --radius: 16px;

  /* 動きの速さ（減らす設定のときは main.js が 0 にします） */
  --flip: 1s;
}

/* -------------------------------------------------------------
   2. 土台
   ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','ヒラギノ丸ゴ ProN W4',
              'Yu Gothic Medium','游ゴシック体',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:2;
  font-size:16px;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Kiwi Maru','Hiragino Mincho ProN','游明朝',serif;
  font-weight:500;line-height:1.6;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
:focus-visible{outline:3px solid var(--olive);outline-offset:3px;border-radius:4px}

/* 英語の筆記体。360px幅でも絶対に折り返させない */
.en{
  font-family:'Mr De Haviland',cursive;
  color:var(--olive-deep);
  letter-spacing:.01em;
  white-space:nowrap;
}

/* 画面には出さないが、読み上げには残す */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* -------------------------------------------------------------
   3. ヘッダー
   ------------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,243,236,.90);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(90,70,54,.08);
}
.header-inner{
  max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px var(--gutter);
}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:38px;height:38px;border-radius:50%;border:2px solid var(--beige)}
.logo span{font-family:'Mr De Haviland',cursive;font-size:1.6rem;color:var(--ink);white-space:nowrap}
nav ul{display:flex;gap:24px;list-style:none;font-size:.82rem;letter-spacing:.08em}
nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.25s;white-space:nowrap}
nav a:hover{color:var(--terra);border-color:var(--beige)}
.nav-toggle{display:none;line-height:0;padding:6px}

@media(max-width:760px){
  .nav-toggle{display:block}
  nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--cream);display:none;box-shadow:var(--shadow);
  }
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:6px 0}
  nav a{display:block;padding:12px 24px}
}

/* -------------------------------------------------------------
   4. 看板ヒーロー
   ------------------------------------------------------------- */
.hero{
  position:relative;text-align:center;
  padding:60px var(--gutter) 56px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,   #F2EDDD, transparent),
    radial-gradient(ellipse 45% 40% at 12% 85%,  rgba(205,224,211,.5), transparent),
    radial-gradient(ellipse 45% 40% at 88% 80%,  rgba(220,203,167,.35), transparent),
    var(--paper);
  overflow:hidden;
}
.sign-wrap{display:inline-block;animation:sway 6s ease-in-out infinite;transform-origin:top center}
.sign-wrap img{
  width:min(260px,60vw);height:auto;
  border-radius:48%/42%;
  box-shadow:var(--shadow-deep);
  border:7px solid var(--cream);
}
@keyframes sway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}

.hero .en{display:block;font-size:clamp(2.3rem,8.5vw,4rem);margin-top:24px;line-height:1.2}
.hero p{font-size:clamp(.85rem,3.4vw,.96rem);color:#7d6b58;margin-top:6px;white-space:nowrap}

/* 散りばめスイーツ（線描き） */
.sprinkle{position:absolute;opacity:.5;pointer-events:none;animation:floaty 9s ease-in-out infinite}
.sprinkle svg{width:100%;height:auto}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@media(max-width:640px){.sprinkle{transform:scale(.7)}}

/* -------------------------------------------------------------
   5. セクション共通
   ------------------------------------------------------------- */
section{max-width:var(--wrap);margin:0 auto;padding:80px var(--gutter) 6px;position:relative}
.section-head{text-align:center;margin-bottom:34px}
.section-head .en{font-size:2.1rem}
.section-head h2{font-size:clamp(1.2rem,3vw,1.55rem);letter-spacing:.1em;white-space:nowrap}
.sprig{display:flex;justify-content:center;margin-top:6px}
.sprig svg{width:150px;height:14px;opacity:.8}

/* -------------------------------------------------------------
   6. 森の一ヶ月（絵本のページめくり）
   ------------------------------------------------------------- */
.month{max-width:820px;margin:0 auto;padding:26px var(--gutter) 0;text-align:center}
.month .en{font-size:2.1rem}
.month h2{font-size:clamp(1.2rem,3vw,1.5rem);letter-spacing:.1em;margin-bottom:20px;white-space:nowrap}

.book{position:relative;margin:0 auto;max-width:640px;aspect-ratio:5/6;perspective:2200px}
@media(max-width:640px){.book{aspect-ratio:4/5;max-width:420px}}

.book-page{
  position:absolute;inset:0;
  background:var(--cream);
  border-radius:8px 16px 16px 8px;
  box-shadow:var(--shadow), inset 14px 0 26px -18px rgba(90,70,54,.4);
  border:1px solid var(--line);
  padding:20px 20px 18px;
  display:flex;flex-direction:column;
  transform-origin:left center;
  backface-visibility:hidden;
  transition:opacity .35s ease;
  will-change:opacity;
}
.book-page.fading{opacity:0}
.book-page::before{ /* とじしろ */
  content:"";position:absolute;top:14px;bottom:14px;left:7px;width:2px;
  background:linear-gradient(to bottom,transparent,rgba(90,70,54,.18),transparent);
}
.book-photo{flex:1;min-height:0;border-radius:6px;overflow:hidden;border:1px solid rgba(90,70,54,.12)}
.book-photo img{width:100%;height:100%;object-fit:cover}
.book-cap{padding-top:12px}
.book-cap .en{font-size:1.9rem;display:block;line-height:1.05;color:var(--terra)}
.book-cap .jp{font-size:.86rem;color:#7d6b58;letter-spacing:.1em;white-space:nowrap;display:block}
@media(max-width:400px){.book-cap .jp{font-size:.78rem;letter-spacing:.04em}}

.book-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px}
.book-nav button{
  background:var(--cream);border:1.5px solid var(--beige);
  width:44px;height:44px;border-radius:50%;color:var(--terra);
  display:grid;place-items:center;box-shadow:var(--shadow);transition:.2s;
}
.book-nav button:hover{background:#f3efe4;transform:translateY(-1px)}
.book-dots{display:flex;gap:8px}
.book-dots i{width:7px;height:7px;border-radius:50%;background:var(--beige);transition:.3s;display:block}
.book-dots i.on{background:var(--olive-deep);transform:scale(1.25)}

/* -------------------------------------------------------------
   7. mocaのこと
   ------------------------------------------------------------- */
.profile{display:flex;gap:36px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.profile img{
  width:min(240px,58vw);height:auto;
  border-radius:18px;border:6px solid var(--cream);box-shadow:var(--shadow);
}
.profile-body{max-width:420px}
.mocalines span{display:block;white-space:nowrap;font-size:.94rem;color:var(--ink-soft)}
@media(max-width:400px){.mocalines span{font-size:.86rem}}

/* -------------------------------------------------------------
   8. ラインナップ
   ------------------------------------------------------------- */
.lineup{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.lineup-card{
  background:var(--cream);border-radius:var(--radius);
  padding:30px 22px 26px;text-align:center;
  border:1px solid rgba(90,70,54,.08);box-shadow:var(--shadow);
}
.lineup-card svg{width:58px;height:58px;margin:0 auto}
.lineup-card h3{font-size:1rem;margin:10px 0 2px}
.lineup-card .en{font-size:1.45rem;display:block;line-height:1.1}
.tag{
  display:inline-block;margin-top:12px;
  background:var(--beige-soft);color:var(--terra);
  border-radius:999px;padding:3px 16px;font-size:.76rem;letter-spacing:.08em;
}
a.lineup-card{display:block;transition:transform .25s}
a.lineup-card:hover{transform:translateY(-4px)}

/* -------------------------------------------------------------
   9. パティスリーからのおくりもの（カレンダー壁紙）
   ------------------------------------------------------------- */
.room-stage,.month-detail{animation:fadein .5s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.room-stage{text-align:center}
.room-intro{font-size:.86rem;color:var(--ink-mute);margin-bottom:26px}
/* auto-fill＋幅の上限つき。月が1つでもカードが横に伸びきらず、
   何個あっても中央に寄ります */
.room-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,160px));
  justify-content:center;gap:18px;max-width:640px;margin:0 auto;
}
.room-card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 14px;box-shadow:var(--shadow);transition:transform .25s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.room-card:hover{transform:translateY(-4px)}
.room-card .en{font-size:1.6rem;color:var(--olive-deep)}
.room-card .room-badge{font-size:.7rem;letter-spacing:.1em;color:var(--terra)}

.back-link{color:var(--terra);font-size:.84rem;margin-bottom:20px;padding:4px 0;letter-spacing:.03em}
.back-link:hover{text-decoration:underline}

.cal-month{margin-bottom:56px}
.cal-month-head{text-align:center;margin-bottom:24px}
.cal-month-head .en{font-size:1.5rem;display:block}
.cal-month-head h3{font-size:1.05rem;letter-spacing:.08em;font-weight:500;color:var(--ink)}
.cal-month-head .badge{
  display:inline-block;margin-top:6px;
  background:var(--olive-deep);color:#fff;
  font-size:.72rem;letter-spacing:.1em;padding:3px 14px;border-radius:999px;
}
/* 上限を160pxにしているのは、スマホ幅（350px前後）で必ず2列に
   なるようにするため。上限を190pxにすると1列に落ちて縦に長くなります */
.cal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,160px));
  justify-content:center;gap:16px;
}
.cal-card{
  background:var(--cream);border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(90,70,54,.08);box-shadow:var(--shadow);transition:transform .3s;
}
.cal-card:hover{transform:translateY(-4px)}
/* height:auto は必須。これが無いと、HTMLのheight属性が優先されて
   画像が縦に引き伸ばされます（カードが3倍の高さになる） */
.cal-card img{width:100%;height:auto;aspect-ratio:853/1844;object-fit:cover;background:var(--beige-soft)}
.cal-card-foot{padding:12px 10px 16px;text-align:center}
.cal-card-foot .style-name{font-size:.76rem;color:var(--ink-mute);display:block;margin-bottom:8px}
.cal-dl{
  display:inline-block;font-size:.74rem;letter-spacing:.05em;color:var(--olive-deep);
  border:1px solid var(--olive);border-radius:999px;padding:6px 16px;transition:.2s;
}
.cal-dl:hover{background:var(--olive-deep);color:#fff}
.cal-archive-note{
  text-align:center;font-size:.82rem;color:var(--ink-faint);margin-top:36px;
  border-top:1px dashed rgba(90,70,54,.15);padding-top:24px;
}

/* -------------------------------------------------------------
   10. 森からのレター
   ------------------------------------------------------------- */
.letter{
  background:linear-gradient(160deg,#efe9da,var(--cream));
  border-radius:20px;text-align:center;padding:52px 26px;
  border:1px solid rgba(90,70,54,.08);box-shadow:var(--shadow);
}
.letter .en{font-size:2.2rem}
.letter h2{font-size:1.3rem;letter-spacing:.12em;margin:.15em 0 .4em;white-space:nowrap}
.letter p{font-size:.9rem;color:var(--ink-soft)}
.letter-form{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.letter-form input{
  font-family:inherit;font-size:.92rem;padding:12px 20px;
  border-radius:999px;border:1.5px solid rgba(90,70,54,.2);
  background:#fff;min-width:min(270px,78vw);color:var(--ink);
}
.btn{
  display:inline-block;background:var(--olive-deep);color:#fdfbf6;
  padding:12px 34px;border-radius:999px;
  font-size:.93rem;letter-spacing:.18em;white-space:nowrap;
  box-shadow:0 4px 14px rgba(111,133,99,.3);transition:.25s;
}
.btn:hover{background:#5e7253}
.letter-note{
  min-height:1.6em;margin-top:14px;font-size:.84rem;color:var(--terra);
  opacity:0;transition:opacity .4s;
}
.letter-note.show{opacity:1}

/* -------------------------------------------------------------
   11. フッター
   ------------------------------------------------------------- */
footer{margin-top:96px;background:var(--beige-soft);border-top:1px solid var(--line)}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter) 28px;text-align:center}
.footer-inner .en{display:block;font-size:2.1rem}
.sns{display:flex;gap:22px;justify-content:center;margin:12px 0 20px;font-size:.86rem;flex-wrap:wrap}
.sns a{color:var(--terra);border-bottom:1px dotted var(--terra)}
.sns span{color:var(--ink-faint)}
.copy{font-size:.72rem;color:var(--ink-faint);letter-spacing:.14em}

/* -------------------------------------------------------------
   12. 動きを減らす設定への配慮
   ------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sprinkle,.sign-wrap{animation:none}
  .book-page{transition:none}
  .book-page.flipping{transform:none;opacity:0}
  .room-stage,.month-detail{animation:none}
  .cal-card:hover,.room-card:hover,a.lineup-card:hover,.book-nav button:hover{transform:none}
}

/* =============================================================
   追加分（森の案内 / 森の地図＝案内帖 / 今日のお菓子）
   ============================================================= */
/* 森の案内 */
.guide{max-width:760px;margin:0 auto;padding:70px var(--gutter) 6px;text-align:center}
.guide .lead{font-size:.95rem;color:var(--ink-soft);line-height:2.1}
.guide .places{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:20px 0 4px;font-size:.8rem;color:var(--ink-mute)}
.guide .places span{white-space:nowrap}
.guide .walk{display:inline-block;margin-top:16px;color:var(--olive-deep);border:1px solid var(--olive);border-radius:999px;padding:9px 26px;font-size:.9rem;letter-spacing:.06em;transition:.25s}
.guide .walk:hover{background:var(--olive-deep);color:#fdfbf6}

/* 森の地図＝案内帖 */
.mapbook-wrap{max-width:var(--wrap);margin:0 auto}
.guidebook{position:relative;margin:0 auto;max-width:520px;cursor:pointer}
.gb-cover{position:relative;padding:34px 28px;border-radius:8px;
  background:linear-gradient(180deg,#e5d9bd,#f3ecda 16%,#f3ecda 84%,#e5d9bd);
  border:1px solid rgba(90,70,54,.18);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transform-origin:top center;transition:transform .55s ease,opacity .5s ease;will-change:transform}
.gb-cover::before,.gb-cover::after{content:"";position:absolute;left:-5px;right:-5px;height:20px;
  background:linear-gradient(180deg,#dccca6,#c7b488);border:1px solid rgba(90,70,54,.25);border-radius:12px;box-shadow:0 3px 8px rgba(90,70,54,.22)}
.gb-cover::before{top:-7px}
.gb-cover::after{bottom:-7px}
.gb-cover .en{font-size:2.1rem;color:var(--olive-deep);line-height:1.1}
.gb-cover .sub{font-size:.95rem;letter-spacing:.16em;color:var(--ink-soft)}
.gb-cover .hint{font-size:.74rem;color:var(--ink-faint);margin-top:6px;letter-spacing:.08em}
.guidebook.open .gb-cover{transform:scaleY(.35);opacity:0;pointer-events:none}

@keyframes unfurl{0%{opacity:0;transform:scale(.85)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.gb-spread{max-width:var(--wrap);margin:6px auto 0;background:var(--cream);
  border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);
  padding:14px;position:relative}
.gb-spread .spine{position:absolute;top:16px;bottom:58px;left:50%;width:2px;transform:translateX(-1px);
  background:linear-gradient(to bottom,transparent,rgba(90,70,54,.14),transparent);pointer-events:none;z-index:4}
@keyframes unroll{0%{clip-path:inset(0 0 100% 0 round 8px)}100%{clip-path:inset(0 0 0 0 round 8px)}}
.gb-map{position:relative;width:100%;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:var(--beige-soft)}
.gb-map>img{width:100%;height:100%;object-fit:cover}
.gb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--ink-faint);text-align:center;padding:20px}
.gb-ph[hidden]{display:none}
.gb-ph .en{font-size:1.6rem;color:var(--olive-deep)}
.gb-ph small{font-size:.76rem;line-height:1.8}
.gb-spot{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;
  background:rgba(111,133,99,.9);border:2px solid var(--cream);box-shadow:0 2px 6px rgba(90,70,54,.3);
  cursor:pointer;transition:transform .2s;z-index:3;padding:0}
.gb-spot:hover,.gb-spot:focus-visible{transform:translate(-50%,-50%) scale(1.25)}
.gb-spot[data-center="1"]{width:26px;height:26px;background:var(--terra)}
.gb-label{position:absolute;transform:translate(-50%,-50%);font-size:.72rem;color:var(--ink);
  background:rgba(253,251,246,.85);padding:1px 8px;border-radius:999px;white-space:nowrap;
  pointer-events:none;border:1px solid var(--line);z-index:2}
.gb-card{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:min(340px,88%);
  background:var(--cream);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-deep);
  padding:16px 18px 14px;text-align:center;animation:fadein .3s ease;z-index:6}
.gb-card .en{font-size:1.2rem;color:var(--olive-deep);display:block;line-height:1.1}
.gb-card h3{font-size:1rem;margin:2px 0 5px}
.gb-card p{font-size:.82rem;color:var(--ink-soft);line-height:1.8}
.gb-card .close{position:absolute;top:6px;right:12px;font-size:1.1rem;color:var(--ink-faint);line-height:1}
.gb-tools{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
.gb-close{color:var(--terra);font-size:.84rem;padding:6px 4px;letter-spacing:.03em}
.gb-close:hover{text-decoration:underline}
.gb-zoom{font-size:.76rem;color:var(--ink-faint)}
@media(max-width:640px){
  .guidebook{max-width:340px}
  .gb-map{aspect-ratio:3/2}
  .gb-label{display:none}
}

/* 今日のお菓子 */
.today-card{max-width:560px;margin:0 auto;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 26px;text-align:center}
.today-card .en{font-size:1.7rem;color:var(--terra);display:block;line-height:1.15}
.today-card h3{font-size:1.05rem;margin:8px 0 2px;font-weight:500}
.today-card .today-note{font-size:.8rem;color:var(--ink-faint);margin-top:14px}

@media(max-width:480px){
  .gb-card{max-width:94%;padding:11px 14px 10px;bottom:8px}
  .gb-card .en{font-size:.95rem}
  .gb-card h3{font-size:.95rem;margin:1px 0 3px}
  .gb-card p{font-size:.82rem;line-height:1.75}
  .guide .lead{font-size:.9rem;line-height:2.05}
  .guide .places{font-size:.78rem}
  .today-card p,.today-card .today-note{font-size:.82rem}
  .gb-spot{width:24px;height:24px}
  .gb-spot[data-center="1"]{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){
  .guidebook.open .gb-cover{transition:none;opacity:0}
  .gb-spread,.gb-map,.gb-card,.today-card{animation:none}
}

/* 森からの贈りもの（カテゴリー） */
.gifts-toggle-wrap{text-align:center;margin-top:6px}
.gifts-toggle{display:inline-block;background:var(--olive-deep);color:#fdfbf6;padding:12px 30px;border-radius:999px;font-size:.92rem;letter-spacing:.1em;box-shadow:0 4px 14px rgba(111,133,99,.3);transition:.25s}
.gifts-toggle:hover{background:#5e7253}
.gifts-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;max-width:760px;margin:24px auto 0;animation:fadein .4s ease}
.gifts-cats[hidden]{display:none}
.gift-cat{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--cream);border:1px solid rgba(90,70,54,.08);border-radius:16px;padding:24px 18px;box-shadow:var(--shadow);text-align:center;transition:transform .25s}
.gift-cat:hover:not(:disabled){transform:translateY(-4px)}
.gift-cat svg{width:48px;height:48px}
.gift-cat .gc-jp{font-size:1rem;color:var(--ink)}
.gift-cat .gc-note{font-size:.78rem;color:var(--ink-mute);line-height:1.6}
.gift-cat .gc-tag{display:inline-block;font-size:.74rem;color:var(--terra);background:var(--beige-soft);border-radius:999px;padding:2px 14px;margin-top:2px}
.gift-cat:disabled{cursor:default}

/* 英文説明・中央寄せ */
.lead-en{display:block;font-size:.78rem;color:var(--ink-mute);line-height:1.7;margin-top:8px;letter-spacing:.02em}
.moca-en{font-size:.8rem;color:var(--ink-mute);line-height:1.7;margin:10px auto 0;max-width:380px}
.gifts-intro{text-align:center;color:var(--ink-soft);font-size:.9rem;line-height:1.9;max-width:560px;margin:0 auto}
.gifts-intro-en{display:block;font-size:.76rem;color:var(--ink-mute);margin-top:6px;letter-spacing:.02em}