/*
Theme Name: GRYPHON GARDEN
Theme URI: https://mogu.quadcom.jp/
Author: QuadCom
Description: 天然石アクセサリーブランド「GRYPHON GARDEN（グリフォンガーデン）」専用テーマ
Version: 0.18.0
Requires at least: 7.1
Requires PHP: 8.0
Text Domain: gryphon-garden
*/

/* ========================================
   デザイントークン
   ======================================== */
:root{
  color-scheme: light;
  --cream:#FBF6EC;
  --cream-deep:#F3EBDA;
  --ink:#2B2A3D;
  --ink-soft:#57566B;
  --gold:#D9A73B;
  --gold-deep:#B8862A;
  --rose:#CC7C93;
  --rose-deep:#9C4A63;   /* ローズの文字用（淡いローズ・生成りの上でコントラスト 4.5:1 以上） */
  --rose-wash:#F8E9EC;   /* 事例ギャラリーの帯の背景 */
  --rose-line: rgba(204,124,147,0.45);
  --sage:#5E8B7B;
  --line: rgba(43,42,61,0.16);
  --on-ink-soft: rgba(251,246,236,0.82);  /* 濃紺（ヘッダー・フッター）の上の控えめな文字 */
  --on-ink-line: rgba(251,246,236,0.15);  /* 濃紺の上の区切り線 */
  --nav-sub-offset: 23.5px;
  --order-step-gap: 64px;   /* 推し活オーダーの手順の間（矢印を置く隙間） */
  --order-icon-size: 92px;  /* 推し活オーダーの手順のアイコンの丸 */
  --heading-chapter: clamp(26px, 3vw, 32px);  /* 物語の章・ページ内の小見出し（ページタイトルの次の大きさ） */
  --heading-card: 20px;  /* カード・手順の見出し */
  --illust-drift: 80px;  /* 手描きイラストがスクロールで上下に漂う幅（片側）。28px では動きが分からないと指摘（2026-10-25） */
  --illust-tilt: 3deg;   /* 手描きイラストがスクロールで傾く角度（片側） */
  --illust-rise: 60px;   /* 手描きイラストが現れるときに下から浮き上がる距離 */
  --share-size: 46px;    /* シェアボタンの丸の大きさ */  /* ヘッダーの開閉メニューの箱を、ボタンの下端からヘッダーの下端まで下げる量 */
  --field-line: rgba(43,42,61,0.6);
  --error:#B3261E;
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --entry-width: 660px;  /* 本文（.entry-content）の幅。記事の見出し・写真・前後リンクも揃える */
}

/* ========================================
   ベース
   ======================================== */
*{box-sizing:border-box;}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}
/* ページ内リンクの移動先を、上に固定したヘッダーの下に合わせる（--header-height は assets/js/nav.js が入れる） */
html{scroll-padding-top:var(--header-height, 0px);}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* 見出しは文節で改行し、行の長さを揃える（非対応ブラウザは通常の改行） */
/* 見出しは文節の途中で改行しない。ただし1つの文節だけで1行に入らないとき（狭い欄の長い言葉）は途中でも改行して、はみ出さないようにする */
h1, h2, h3{word-break:auto-phrase; overflow-wrap:anywhere; text-wrap:balance;}

:where(a:any-link, button, input, select, textarea):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

.visually-hidden:where(:not(:focus-within, :active)){
  position:absolute !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  white-space:nowrap !important;
}
.skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:100;
  background:var(--ink); color:var(--cream);
  padding:10px 18px; border-radius:999px;
  font-size:14px; text-decoration:none;
}
main:focus{outline:none;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* ========================================
   ヘッダー
   ======================================== */
/* 背景はフッターと同じ濃紺（本文の生成りと境目を付け、メニューを目立たせる） */
header.nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink); color:var(--cream);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand-mark{
  font-family:var(--serif);
  font-size:20px; letter-spacing:.06em; color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
header.nav .brand-mark{color:var(--cream);}
/* 広い画面ではメニューの箱をなくし、ナビと Instagram をヘッダーの行に直接並べる */
.nav-menu{display:contents;}
header.nav .nav-links{display:flex; gap:34px; list-style:none; margin:0; padding:0;}
header.nav .nav-links a{
  color:var(--on-ink-soft); text-decoration:none; font-size:16px;
  letter-spacing:.03em;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
header.nav .nav-links a:hover,
header.nav .nav-links a[aria-current="page"]{color:var(--cream); border-color:var(--gold);}
/* ナビのグループ：広い画面ではグループ名を出さず項目を並べる。collapse のグループだけ開閉メニューにする */
.nav-group{position:relative; display:flex; align-items:center;}
.nav-group-label{display:none;}
header.nav .nav-sub{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;}
/* 項目と開閉ボタンの文字の高さを揃える（ボタンと同じ行の高さの箱にする） */
header.nav .nav-sub li{display:flex;}
header.nav .nav-sub a{line-height:1.5;}
.nav-group-toggle{
  display:inline-flex; align-items:center; gap:8px;
  margin:0; padding:0 0 2px; background:none; border:0; border-bottom:1px solid transparent;
  font:inherit; font-size:16px; line-height:1.5; letter-spacing:.03em; color:var(--on-ink-soft); cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
/* 開閉の印（下向きの山形。開いているときは上向き） */
.nav-group-toggle::after{
  content:""; width:6px; height:6px; margin-top:-4px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease;
}
.nav-group-toggle[aria-expanded="true"]::after{transform:translateY(3px) rotate(-135deg);}
.nav-group-toggle:hover,
.nav-group-toggle[aria-expanded="true"]{color:var(--cream);}
.nav-group-toggle.is-current{color:var(--cream); border-color:var(--gold);}
/* 開閉メニューの箱（ヘッダーの下端から下に出す） */
header.nav .nav-group.is-collapsible .nav-sub{
  display:none; position:absolute; top:calc(100% + var(--nav-sub-offset)); left:-22px;
  flex-direction:column; align-items:flex-start; gap:0; min-width:200px; padding:6px 22px 14px;
  background:var(--ink); border-radius:0 0 6px 6px;
  box-shadow:0 18px 30px rgba(43,42,61,.18);
}
/* ボタンと箱の間の隙間でマウスが外れて閉じないようにする */
header.nav .nav-group.is-collapsible .nav-sub::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:var(--nav-sub-offset);
}
header.nav .nav-group.is-collapsible .nav-sub li{padding:8px 0;}
header.nav .nav-group-toggle[aria-expanded="true"] + .nav-sub{display:flex;}
@media (hover:hover) and (min-width: 961px){
  header.nav .nav-group.is-collapsible:hover .nav-sub{display:flex;}
}
/* Instagram：広い画面は公式ロゴだけ（「Instagram」の文字は読み上げ用に隠す）、メニューの中はロゴ＋文字 */
.nav-ig{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  color:var(--cream); text-decoration:none; font-size:15px; letter-spacing:.03em; white-space:nowrap;
  transition:opacity .2s ease;
}
.nav-ig:hover{opacity:.75;}
.nav-ig img{display:block;}
.nav-ig-label{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}

/* ヘッダーの中・ナビの下のお知らせの帯（出店予定・最新記事。ヘッダーと一緒に上に固定される） */
.header-notice[hidden]{display:none;}
.header-notice-inner{
  max-width:1180px; margin:0 auto; padding:6px 32px;
  display:flex; align-items:center; gap:12px;
}
.header-notice-link{
  flex:1; min-width:0; display:flex; align-items:center; gap:14px;
  color:inherit; text-decoration:none; font-size:14px; white-space:nowrap; overflow:hidden;
}
.header-notice-label{
  flex:none; padding:1px 12px; border-radius:999px; font-size:12.5px; letter-spacing:.06em;
}
.header-notice-title{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.header-notice-more{flex:none; margin-left:auto; text-decoration:underline; text-underline-offset:3px;}
.header-notice-more::after{content:" →";}
.header-notice-link:hover .header-notice-more{text-decoration-thickness:2px;}
.header-notice-close{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-right:-8px; padding:0;
  background:none; border:0; border-radius:50%; color:inherit; font-size:22px; line-height:1; cursor:pointer;
}
.header-notice-close:hover{background:rgba(43,42,61,.1);}
/* 出店予定：金の帯 */
.event-bar{background:var(--gold); color:var(--ink);}
.event-bar .header-notice-label{background:var(--ink); color:var(--cream);}
.event-bar-date{flex:none; font-family:var(--serif); font-size:15.5px; font-weight:600;}
.event-bar-wd{font-size:13px; font-weight:500;}
.event-bar-venue{flex:none;}
/* 最新記事：生成りの細い帯 */
.news-bar{background:var(--cream-deep); color:var(--ink); border-bottom:1px solid var(--line);}
.news-bar .header-notice-inner{padding-top:4px; padding-bottom:4px;}
.news-bar .header-notice-label{background:#fff; color:var(--rose-deep); border:1px solid var(--rose-line);}
.news-bar-date{flex:none; font-size:13px; color:var(--ink-soft);}

/* メニューボタン（960px 以下で表示。下のレスポンシブ参照） */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-10px; padding:0;
  background:none; border:0; border-radius:50%;
  color:var(--cream); cursor:pointer;
}
.nav-toggle-bars{position:relative; display:block; width:22px; height:14px;}
.nav-toggle-bars span{
  position:absolute; left:0; width:100%; height:1.5px;
  background:currentColor; border-radius:1px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle-bars span:nth-child(1){top:0;}
.nav-toggle-bars span:nth-child(2){top:6px;}
.nav-toggle-bars span:nth-child(3){top:12px;}
header.nav.is-menu-open .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
header.nav.is-menu-open .nav-toggle-bars span:nth-child(2){opacity:0;}
header.nav.is-menu-open .nav-toggle-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px);}}

/* ========================================
   セクション共通
   ======================================== */
section{padding:96px 0;}
.section-head{max-width:640px; margin:0 0 56px;}
.kicker{
  font-family:var(--serif); font-size:14.5px; color:var(--rose);
  margin:0 0 10px;
}
h2,
.page-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,36px); margin:0 0 18px; color:var(--ink);
}
.section-head p{color:var(--ink-soft); font-size:15.5px; max-width:52ch;}
.section-more{margin:40px 0 0; text-align:center;}

/* ========================================
   固定ページの本文（管理画面で書く本文。プライバシーポリシーなど）
   ページタイトル（h1）と区別がつくよう、本文の見出しは小さく線で区切る
   ======================================== */
.entry-content{max-width:var(--entry-width); color:var(--ink-soft); font-size:15px;}
.entry-content > :first-child{margin-top:0;}
.entry-content h2{
  margin:56px 0 16px; padding-bottom:10px;
  font-size:20px; line-height:1.6; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.entry-content h3{
  margin:32px 0 10px;
  font-family:var(--serif); font-size:16.5px; font-weight:600; line-height:1.6; color:var(--ink);
}
.entry-content p{margin:0 0 14px;}
.entry-content ul,
.entry-content ol{margin:0 0 14px; padding-left:1.6em;}
.entry-content li{margin:0 0 4px;}
.entry-content strong{color:var(--ink);}
.entry-content a{color:var(--ink); text-underline-offset:3px;}
.entry-content a:hover{color:var(--rose-deep);}

/* ========================================
   手描き風の波線区切り
   ======================================== */
.divider{width:100%;height:28px;margin:0 auto;opacity:.55;color:var(--ink);}
.divider svg{width:100%;height:100%;display:block;}

/* ========================================
   ボタン
   ======================================== */
.btn{
  display:inline-block; font-size:14.5px; letter-spacing:.03em;
  padding:13px 26px; border-radius:999px; text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--ink); color:var(--cream);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(43,42,61,.18);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}
input.btn{
  border:0; font-family:inherit; line-height:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}

/* ========================================
   トップ：ヒーロー
   ======================================== */
.hero{
  position:relative;
  padding:64px 0 0;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  align-items:center; gap:20px;
}
.hero-copy{padding:20px 0 60px;}
.eyebrow-story{
  font-family:var(--serif);
  font-size:15px; color:var(--sage); margin:0 0 18px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px, 5vw, 54px);
  line-height:1.35;
  margin:0 0 26px;
  color:var(--ink);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(transparent 62%, rgba(217,167,59,.35) 62%);
}
.hero p.lead{
  font-size:16.5px; color:var(--ink-soft); max-width:44ch; margin:0 0 34px;
}
.hero-actions,
.page-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-art{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  height:100%;
}
.hero-art img{
  width:108%;
  max-width:640px;
  height:auto;
  opacity:0;
  transform:translateY(18px);
  animation:riseIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes riseIn{to{opacity:1; transform:translateY(0);}}
.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(217,167,59,.16), transparent 70%);
  top:10%; right:-8%; z-index:0;
}

/* ========================================
   物語：見開き（非対称・交互）
   ======================================== */
.spread{
  display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center;
  padding:56px 0;
}
.spread.reverse .spread-art{order:2;}
.spread.reverse .spread-text{order:1;}
.spread-art img{border-radius:2px; height:auto;}
.spread-text .kicker{margin-bottom:14px;}
.spread-text h3{
  font-family:var(--serif); font-size:var(--heading-chapter); font-weight:600; margin:0 0 18px;
}
.spread-text p{color:var(--ink-soft); font-size:15px; margin:0 0 14px;}
.spread-text p.story-line{
  font-family:var(--serif); font-size:16.5px; color:var(--ink);
  border-left:2px solid var(--gold); padding-left:18px; margin:22px 0 0;
}

/* ========================================
   物語ページ（童話の全文）
   ======================================== */
.story-intro{padding-bottom:72px;}
.story-head{max-width:640px; margin:0 auto 40px; text-align:center;}
/* 冒頭（表紙の一文）と結びの一文は、同じ中央揃えの明朝で呼応させる */
.story-prologue,
.story-epilogue{
  max-width:32em; margin:0 auto; text-align:center;
  font-family:var(--serif); font-size:clamp(17px,2vw,20px); line-height:2.4; color:var(--ink);
  word-break:auto-phrase;
}
.story-prologue p,
.story-epilogue p{margin:0; font:inherit; color:inherit;}
/* 結びはイラストと並べた見開き（.spread の本文スタイルより、冒頭と同じ中央揃えの明朝を優先） */
.story-outro{padding:24px 0 0;}
.story-chapters{padding-top:40px;}
.story-chapter h2{font-size:var(--heading-chapter); margin:0 0 18px;}
.story-body p{font-family:var(--serif); font-size:15.5px; line-height:2.1; color:var(--ink); margin:0 0 6px;}
.story-body p.kicker{font-size:14.5px; color:var(--rose); margin:0 0 14px;}
.story-body p.story-line{margin:16px 0;}
/* 台詞の前の「聞きます」「答えます」などの行は太字で一回り大きく */
.story-body p.story-cue{font-size:17px; font-weight:600;}
.story-body p.story-line + p:not(.story-line){margin-top:0;}

/* 裏表紙の作家クレジット（原本の枠つきの囲みにならう） */
.story-colophon{padding-top:24px;}
.colophon-card{
  max-width:420px; margin:0 auto; padding:36px 32px 32px;
  border:1px solid var(--ink); outline:1px solid var(--ink); outline-offset:5px;
  text-align:center; background:var(--cream);
}
.colophon-card p{margin:0;}
.colophon-brand{font-family:var(--serif); font-size:20px; letter-spacing:.08em;}
.colophon-role{margin-top:18px !important; font-size:13px; color:var(--ink-soft);}
.colophon-name{font-family:var(--serif); font-size:24px; letter-spacing:.1em;}
.colophon-name span{display:block; font-family:var(--sans); font-size:12.5px; letter-spacing:.08em; color:var(--ink-soft);}
.colophon-ig{margin-top:20px !important; padding-top:18px; border-top:1px solid var(--line); font-size:14px;}
.colophon-ig a{color:var(--ink); text-underline-offset:3px;}
.story-actions{justify-content:center; margin-top:56px;}

/* ========================================
   濃い生成りの帯
   ======================================== */
.concept-band{
  background:var(--cream-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ========================================
   こだわり：大きな写真1枚で見せる情景
   ======================================== */
/* 画面幅いっぱいの帯ではなく、左右に余白を残した濃い生成りのパネルにする */
.concept-scene{padding:64px 0 0;}
.concept-panel{background:var(--cream-deep); padding:88px 56px 96px;}
.concept-scene-head{max-width:640px; margin:0 auto 64px; text-align:center;}
.concept-scene .kicker{letter-spacing:.12em;}
.concept-scene .page-title{margin:0;}
.concept-scene .page-title::after{
  content:""; display:block; width:48px; height:1.5px;
  margin:22px auto 0; background:var(--gold);
}
.concept-photo{max-width:880px; margin:0 auto;}
.concept-photo img,
.concept-photo .concept-photo-placeholder{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:2px;
}
.concept-poem{
  max-width:34em; margin:64px auto 0;
  font-family:var(--serif); font-size:clamp(16px,1.9vw,18.5px); line-height:2.3;
  text-align:center; color:var(--ink);
  /* 狭い画面で1行に収まらない行は、文節で区切って長さを揃える（「もの。」だけが残る折り返しを防ぐ） */
  word-break:auto-phrase; text-wrap:balance;
}
/* 1行ずつ別のブロックにして、行ごとに折り返しの長さを揃える（<br> で区切ると揃わないため） */
.concept-poem span{display:block;}
.concept-cta{margin:48px 0 0; text-align:center;}

/* こだわり：3つのこだわり（ページの見出しの直下。番号と宝石マーク付きのカードを横に3枚） */
/* パネルの中・見出しの直下に置き、写真との間を空ける */
.concept-points{margin:0 0 80px;}
/* 見出しはページタイトルと張り合わないよう、小さめ・字間広め・ローズの文字に左右の金の線を添えた飾り見出しに */
.concept-points-title{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin:0 0 36px; font-size:clamp(18px, 2vw, 21px); font-weight:500; letter-spacing:.24em; color:var(--rose-deep); white-space:nowrap;
}
.concept-points-title::before,
.concept-points-title::after{content:""; flex:0 1 72px; height:1px; background:var(--gold);}
.concept-list{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
  counter-reset:concept; list-style:none; margin:0; padding:0;
}
.concept-item{
  counter-increment:concept;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:36px 28px 34px; background:#fff; border:1px solid var(--line); border-radius:4px;
}
.concept-item::before{
  content:counter(concept, decimal-leading-zero);
  font-family:var(--serif); font-size:17px; letter-spacing:.12em; color:var(--gold-deep);
  margin-bottom:14px; line-height:1;
}
.concept-item .gem{width:48px; height:48px; margin-bottom:18px;}
.concept-item h3{font-family:var(--serif); font-size:var(--heading-card); font-weight:600; margin:0 0 12px;}
.concept-item p{font-size:14.5px; color:var(--ink-soft); margin:0; text-align:left; word-break:auto-phrase; text-wrap:pretty;}
.gem--rose{color:var(--rose);}
.gem--sage{color:var(--sage);}
.gem--gold{color:var(--gold);}

@media (max-width: 860px){
  /* スマホはパネルの外側・内側の余白を狭める */
  .concept-scene{padding-top:32px;}
  .concept-scene .wrap{padding:0 16px;}
  .concept-panel{padding:56px 20px 64px;}
  .concept-scene-head{margin-bottom:40px;}
  .concept-poem{margin-top:48px;}
  .concept-list{grid-template-columns:minmax(0,1fr); max-width:520px; margin:0 auto;}
  .concept-points{margin-bottom:56px;}
}

/* ========================================
   作品ギャラリー
   ======================================== */
.works-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:6px;
}
.work{margin:0;}
.work-tile{
  aspect-ratio:1/1.1;
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, #EDE2CC, #E4D5B8);
  display:flex; align-items:center; justify-content:center;
}
.work-tile span{
  font-family:var(--serif); font-size:13px; color:rgba(43,42,61,.45);
  letter-spacing:.05em;
}
.work-tile.a{background:linear-gradient(160deg, #EFDEE2, #E3C7CE);}
.work-tile.b{background:linear-gradient(160deg, #DCE7E1, #C7DAD1);}
.work-tile img{width:100%; height:100%; object-fit:cover;}
a.work-tile img{transition:transform .4s ease;}
a.work-tile:hover img{transform:scale(1.03);}
.work figcaption{padding:10px 2px 14px; line-height:1.7;}
.work-title{display:block; font-family:var(--serif); font-size:14.5px; color:var(--ink);}
.work-desc{display:block; font-size:13px; color:var(--ink-soft); margin-top:2px;}
.works-note{
  margin-top:22px; font-size:13.5px; color:var(--ink-soft);
}
.works-note a,
.event-empty a{color:var(--ink);}

/* ========================================
   出店情報
   ======================================== */
.event-list-title{
  font-size:clamp(19px,2.2vw,22px); margin:0 0 20px;
}
.event-list + .event-list-title,
.event-empty + .event-list-title{margin-top:64px;}
.event-card{
  display:grid; grid-template-columns: 120px 1fr; gap:26px;
  padding:26px 0; border-bottom:1px solid var(--line);
  align-items:center;
}
.event-card:first-child{border-top:1px solid var(--line);}
.event-date{
  font-family:var(--serif); color:var(--ink); text-align:left;
}
.event-date .d{font-size:30px; display:block; line-height:1;}
.event-date .m{font-size:13px; color:var(--ink-soft);}
.event-date .y{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:4px;}
.event-date .e{display:block; margin-top:6px; font-size:15px; color:var(--ink-soft);}
.event-badge{
  display:inline-block; margin-bottom:8px; padding:1px 12px; border-radius:999px;
  background:var(--rose-deep); color:#fff; font-size:12.5px; letter-spacing:.06em;
}
.event-info h3{font-size:16px; margin:0 0 6px; font-weight:500;}
.event-info p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.event-info p + p{margin-top:4px;}
.event-card.has-thumb{grid-template-columns:120px 1fr 160px;}
/* 画像の形のまま全体を見せる（縦長のチラシの日付などが切れないように） */
.event-thumb img{display:block; width:100%; height:auto; border-radius:2px;}
.event-list.is-past .event-date,
.event-list.is-past .event-info h3{color:var(--ink-soft);}
.event-empty{font-size:14.5px; color:var(--ink-soft); margin:0;}

/* ========================================
   推し活オーダー：3ステップ
   ======================================== */
.order-steps{
  display:grid; grid-template-columns: repeat(3,1fr); gap:var(--order-step-gap);
  counter-reset:step; list-style:none; margin:0; padding:4px 0 0; /* 上は番号の丸がはみ出す分 */
}
/* 各手順：丸の中にアイコン、左上に番号、下に見出しと説明（中央揃え） */
.order-step{position:relative; counter-increment:step; text-align:center;}
.order-step-icon{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:var(--order-icon-size); height:var(--order-icon-size); margin:0 auto 22px;
  border:1px solid var(--gold); border-radius:50%; background:#fff; color:var(--ink);
}
.order-step-icon svg{width:44px; height:44px;}
.order-step-icon::before{
  content:counter(step);
  position:absolute; top:-4px; left:-4px;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:#fff;
  font-family:var(--serif); font-size:16px; line-height:1;
}
/* 手順の間の矢印（右向き。アイコンの丸の高さの中央、手順の間の隙間に置く） */
.order-step:not(:last-child)::after{
  content:""; position:absolute;
  top:calc(var(--order-icon-size) / 2 - 7px); right:calc(var(--order-step-gap) / -2 - 7px);
  width:14px; height:14px;
  border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold);
  transform:rotate(45deg);
}
.order-steps-title{text-align:center; font-size:var(--heading-chapter); margin:0 0 40px;}
.order-step h3{font-family:var(--serif); font-size:var(--heading-card); margin:0 0 10px;}
.order-step p{font-size:14.5px; color:var(--ink-soft); margin:0; word-break:auto-phrase; text-wrap:balance;}
/* 料金・お届けについて（白い角丸のカードを2列に） */
.order-info-title{margin-top:72px;}
.order-info{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin:0;}
.order-info-item{padding:24px 28px; background:#fff; border:1px solid var(--line); border-radius:12px;}
.order-info dt{font-family:var(--serif); font-size:var(--heading-card); font-weight:600; margin:0 0 8px;}
.order-info dt::before{content:"✦"; margin-right:8px; font-size:13px; color:var(--gold); vertical-align:2px;}
.order-info dd{margin:0; font-size:14.5px; color:var(--ink-soft); word-break:auto-phrase; text-wrap:pretty;}
.order-info strong{color:var(--rose-deep); font-weight:700; white-space:nowrap;}
.order-actions{margin-top:48px;}
.order-note{
  margin-top:48px; padding:24px 28px; background:var(--cream-deep);
  border-left:3px solid var(--rose); font-size:14.5px; color:var(--ink-soft);
}

/* ========================================
   推し活オーダー：事例ギャラリー
   作品ギャラリーと区別するため、ローズの帯と写真の枠にする
   ======================================== */
.case-band{
  background:var(--rose-wash);
  border-top:1px solid var(--rose-line);
  border-bottom:1px solid var(--rose-line);
}
.case-band .kicker{color:var(--rose-deep);}
.case-heading{display:flex; align-items:center; gap:12px;}
.case-heading .gem{flex:none; width:30px; height:30px; color:var(--rose);}
.case-grid{gap:14px;}
.case-grid .work-tile{border:4px solid #fff; outline:1px solid var(--rose-line);}
.case-band .order-note{margin-top:0; background:rgba(255,255,255,.6);}

@media (max-width: 860px){
  /* 縦に並べ、矢印は手順の下に下向きで置く */
  .order-steps{grid-template-columns:1fr;}
  .order-info{grid-template-columns:minmax(0,1fr);}
  .order-step:not(:last-child)::after{
    top:auto; right:auto; bottom:calc(var(--order-step-gap) / -2 - 4px); left:calc(50% - 7px);
    transform:rotate(135deg);
  }
  .order-step p{max-width:28em; margin:0 auto;}
}

/* ========================================
   お知らせ・ブログ
   ======================================== */
.news-filter ul{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0 0 32px; padding:0;}
.news-filter a{
  display:inline-block; padding:6px 18px; font-size:14px; color:var(--ink-soft); text-decoration:none;
  border:1px solid var(--line); border-radius:999px;
}
.news-filter a:hover{color:var(--ink); border-color:var(--ink);}
.news-filter a[aria-current="page"]{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.news-list{border-top:1px solid var(--line);}
.news-item{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 32px; align-items:start;
  padding:28px 0; border-bottom:1px solid var(--line);
}
.news-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;
  margin:0; font-size:13px; color:var(--ink-soft);
}
.news-meta time{font-family:var(--serif); letter-spacing:.04em;}
.news-category{
  padding:0 10px; font-size:12.5px; line-height:1.8; color:var(--rose-deep); text-decoration:none;
  border:1px solid var(--rose-line); border-radius:999px;
}
a.news-category:hover{border-color:var(--rose-deep);}
.news-title{font-family:var(--serif); font-weight:600; font-size:18px; line-height:1.6; margin:2px 0 0;}
.news-title a{color:var(--ink); text-decoration:none;}
.news-title a:hover{text-decoration:underline; text-underline-offset:4px;}
.news-excerpt{
  margin:0; font-size:14px; color:var(--ink-soft);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}
.news-item > :not(.news-thumb){grid-column:1;}
.news-thumb{grid-column:2; grid-row:1 / span 3; width:160px; aspect-ratio:16/9; overflow:hidden; border-radius:2px;}
.news-thumb img{width:100%; height:100%; object-fit:cover;}
.news-empty{margin:0; font-size:14.5px; color:var(--ink-soft);}
.news-single-head{max-width:var(--entry-width); margin:0 0 32px;}
.news-single-title{font-size:clamp(24px,3vw,32px); margin:12px 0 0;}
/* アイキャッチ画像がある記事：横幅いっぱい・16:9 の画像にスクリーンをかけ、日付・カテゴリー・タイトルを重ねる。
   スマホで長いタイトルが収まらないときは、文字が切れないよう高さが伸びる（画像は切り抜きのまま） */
.news-hero{position:relative; display:flex; align-items:flex-end; aspect-ratio:16/9;}
/* 画像とスクリーンは絶対配置にして枠の高さに影響させない（枠は 16:9、文字が収まらないときだけ伸びる） */
.news-hero-img,
.news-hero::after{position:absolute; inset:0; width:100%; height:100%;}
.news-hero-img{object-fit:cover;}
.news-hero::after{
  content:""; pointer-events:none;
  background:linear-gradient(to top, rgba(43,42,61,.72) 0%, rgba(43,42,61,.38) 50%, rgba(43,42,61,.18) 100%);
}
.news-hero-text{
  position:relative; z-index:1; width:100%;
  padding-top:40px; padding-bottom:clamp(28px, 4vw, 56px);
}
.news-hero .news-single-title{max-width:30em; font-size:clamp(24px, 3.4vw, 44px); color:var(--cream);}
.news-hero .news-meta{color:rgba(251,246,236,.88);}
.news-hero .news-category{color:var(--cream); border-color:rgba(251,246,236,.6);}
.news-hero + section{padding-top:64px;}
.news-single-nav{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px;
  max-width:var(--entry-width); margin:56px 0 0; padding-top:24px; border-top:1px solid var(--line); font-size:14px;
}
.news-single-nav a{color:var(--ink); text-underline-offset:3px;}
.news-next{margin-left:auto; text-align:right;}
/* 記事の横の作品欄（広い画面は右、860px 以下は記事の下） */
.news-single-layout{
  --aside-width:280px;
  display:grid; grid-template-columns:minmax(0, var(--entry-width)) var(--aside-width);
  justify-content:space-between; gap:56px; align-items:start;
}
.news-aside .kicker{margin:0 0 6px;}
.news-aside-title{font-size:20px; margin:0 0 18px;}
.news-aside-works{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
.news-aside .work figcaption{padding:6px 2px 0;}
.news-aside .work-title{font-size:13px; line-height:1.6;}
.news-aside-more{margin:20px 0 0; font-size:14px;}
.news-aside-more a{color:var(--ink); text-underline-offset:3px;}
.news-aside-group + .news-aside-group{margin-top:48px;}
/* 推し活オーダーの事例は /order/ と同じくローズの小見出し・白い縁とローズの枠 */
.news-aside-group.is-case .kicker{color:var(--rose-deep);}
.news-aside-group.is-case .work-tile{border:4px solid #fff; outline:1px solid var(--rose-line);}

@media (max-width: 860px){
  .news-item{gap:6px 16px;}
  .news-thumb{width:96px;}
  .news-single-layout{grid-template-columns:minmax(0, 1fr);}
  .news-aside{margin-top:24px; padding-top:40px; border-top:1px solid var(--line);}
  .news-aside-works{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width: 420px){
  .news-aside-works{grid-template-columns:repeat(2, 1fr);}
}

/* ========================================
   ページ送り
   ======================================== */
.pagination{margin-top:48px;}
.pagination .nav-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.pagination .page-numbers{
  display:inline-block; min-width:40px; padding:6px 12px; text-align:center;
  border:1px solid var(--line); border-radius:999px;
  color:var(--ink); text-decoration:none; font-size:14px;
}
.pagination .page-numbers.current{background:var(--ink); color:var(--cream); border-color:var(--ink);}

/* ========================================
   お問い合わせフォーム
   ======================================== */
.contact-form{max-width:640px;}

/* 特定商取引法に基づく表記（項目名と内容の2列。860px 以下は縦に） */
.legal-table{max-width:860px; margin:0; border-top:1px solid var(--line);}
.legal-row{display:grid; grid-template-columns:220px minmax(0,1fr); gap:8px 32px; padding:18px 0; border-bottom:1px solid var(--line);}
.legal-row dt{font-family:var(--serif); font-weight:600; color:var(--ink);}
.legal-row dd{margin:0; font-size:15px; color:var(--ink-soft);}
/* スマホ：項目名の下に説明を置く（基本の2列の指定より後に書く。前に書くと上書きされて効かない） */
@media (max-width: 860px){
  .legal-row{grid-template-columns:minmax(0,1fr); gap:6px;}
}

/* ========================================
   SNS のシェアボタン（各ページの本文の最後・フッターの直前）
   ======================================== */
/* ブログ記事のハート（押すと濃いローズの輪郭の塗りになる。数は 0 のとき出さない） */
.like{max-width:var(--entry-width); margin:40px 0 0; text-align:center;}
.like-button{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:8px 22px;
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:transparent; border:1px solid var(--rose-line); border-radius:999px; cursor:pointer;
  transition:background-color .2s ease;
}
.like-button[hidden]{display:none;}
.like-button:hover{background:var(--rose-wash);}
.like-icon{
  width:26px; height:26px; flex:none;
  fill:transparent; stroke:var(--rose-deep); stroke-width:1.6; stroke-linejoin:round;
  transition:fill .2s ease;
}
.like-button[aria-pressed="true"] .like-icon{fill:var(--rose);}
.like-count{font-variant-numeric:tabular-nums;}
.like-count:empty{display:none;}
.like-status{min-height:1.6em; margin:10px 0 0; font-size:13.5px; color:var(--ink-soft);}
@media (prefers-reduced-motion: no-preference){
  .like-button[aria-pressed="true"] .like-icon{animation:gg-like-pop .4s cubic-bezier(.2,.7,.2,1);}
}
@keyframes gg-like-pop{
  0%{transform:scale(1);}
  45%{transform:scale(1.3);}
  100%{transform:scale(1);}
}

.share{padding:56px 0 64px; border-top:1px solid var(--line);}
.share-inner{text-align:center;}
.share-kicker{margin:0 0 20px; letter-spacing:.12em;}
.share-lead{display:block; margin-top:6px; font-family:var(--sans); font-size:13.5px; letter-spacing:.04em; color:var(--ink-soft);}
.share-list{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; list-style:none; margin:0; padding:0;}
.share-button{
  display:block; width:var(--share-size); height:var(--share-size); padding:0;
  background:none; border:0; border-radius:50%; cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}
.share-button:hover{transform:translateY(-2px); opacity:.88;}
.share-icon{display:block; width:100%; height:100%;}
.share-status{min-height:1.6em; margin:14px 0 0; font-size:13.5px; color:var(--ink-soft);}

/* ========================================
   フッター
   ======================================== */
.site-footer{
  background:var(--ink); color:var(--cream);
  padding:64px 0 40px;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:40px; margin-bottom:40px;
}
.site-footer .brand-mark{color:var(--cream);}
.site-footer a.brand-mark:hover{opacity:.75;}
/* フッターのメニュー（ヘッダーのナビと同じグループを見出し付きの列で） */
.footer-nav{
  display:grid; grid-template-columns:repeat(4, max-content); gap:28px 72px;
  border-top:1px solid var(--on-ink-line); padding:32px 0 36px;
}
.footer-nav-title{margin:0 0 10px; font-size:12.5px; letter-spacing:.12em; color:rgba(251,246,236,.5);}
.footer-nav ul{display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0;}
.footer-nav a{color:var(--on-ink-soft); text-decoration:none; font-size:14.5px; letter-spacing:.03em;}
.footer-nav a:hover{color:var(--cream); text-decoration:underline; text-underline-offset:4px;}
.site-footer .tag{color:rgba(251,246,236,.6); font-size:13.5px; margin-top:8px;}
.footer-links{display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.footer-ig{
  color:var(--cream); text-decoration:none; font-size:14.5px;
  border-bottom:1px solid rgba(251,246,236,.4);
  padding-bottom:2px;
}
.footer-bottom{
  border-top:1px solid var(--on-ink-line); padding-top:24px;
  font-size:12.5px; color:rgba(251,246,236,.45);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-legal{display:flex; flex-wrap:wrap; gap:6px 24px;}
.footer-legal a{color:rgba(251,246,236,.75); text-underline-offset:3px;}
.footer-legal a:hover{color:var(--cream);}

/* ========================================
   レスポンシブ
   ======================================== */
/* ヘッダー：ナビ（グループ5つ・1行に約910px 必要）とロゴ・Instagram が1行に収まらない幅（960px 以下）は、
   ナビと Instagram をメニューボタンで開くパネルに入れる（ページのレイアウトは 860px で切り替え） */
@media (max-width: 960px){
  .nav-toggle{display:inline-flex;}
  .nav-menu{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    padding:4px 32px 28px;
    background:var(--ink);
    border-top:1px solid var(--on-ink-line);
    box-shadow:0 18px 30px rgba(43,42,61,.18);
  }
  header.nav.is-menu-open .nav-menu{display:block; animation:menuIn .22s ease;}
  header.nav .nav-links{flex-direction:column; gap:0;}
  header.nav .nav-links a{
    display:block; padding:14px 0; line-height:inherit;
    border-bottom:1px solid var(--on-ink-line);
  }
  /* メニュー画面ではグループ名を見出しにして全項目を出す（開閉ボタンは使わない） */
  .nav-group{display:block;}
  .nav-group-label{
    display:block; padding:22px 0 2px;
    font-size:12.5px; letter-spacing:.12em; color:var(--on-ink-soft);
  }
  .nav-group-toggle{display:none;}
  header.nav .nav-sub,
  header.nav .nav-group.is-collapsible .nav-sub{
    display:block; position:static; min-width:0; padding:0;
    background:none; border-radius:0; box-shadow:none;
  }
  header.nav .nav-group.is-collapsible .nav-sub::before{content:none;}
  header.nav .nav-sub li{display:block;}
  header.nav .nav-group.is-collapsible .nav-sub li{padding:0;}
  .nav-menu .nav-ig{margin-top:22px;}
  .nav-menu .nav-ig-label{position:static; width:auto; height:auto; overflow:visible; clip-path:none;}
}

@media (max-width: 860px){
  /* 手描きイラストの動きは狭い画面では控えめに */
  :root{--illust-drift: 40px;}
  /* 出店のお知らせの帯：狭い画面では出店名を省いて1行に収める（最新記事の帯は題名を残し、はみ出す分は…で省く） */
  .event-bar .header-notice-title{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1; margin-bottom:8px;}
  .spread, .spread.reverse{grid-template-columns:1fr;}
  .spread.reverse .spread-art{order:1;}
  .spread.reverse .spread-text{order:2;}
  .works-grid{grid-template-columns:repeat(2,1fr);}
  .event-card,
  .event-card.has-thumb{grid-template-columns:70px 1fr;}
  .event-thumb{grid-column:2; max-width:240px;}
  .footer-links{align-items:flex-start;}
  .footer-nav{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 24px;}
}

/* 幅の狭いスマホ（360px など）：キャッチコピーの各行が1行に収まる大きさにする */
@media (max-width: 420px){
  .hero h1{font-size:clamp(24px, 8vw, 34px);}
  /* お知らせの帯：会場・曜日・記事の日付も省く */
  .event-bar-venue, .event-bar-wd, .news-bar-date{display:none;}
  .header-notice-more::after{content:none;}
  .header-notice-link{gap:10px;}
  /* シェアボタン：6つが1列に収まるよう少し小さく */
  :root{--share-size: 40px;}
  .share-list{gap:10px;}
}

/* ========================================
   手描きイラストのスクロールの動き（スクロールに連動するアニメーション）
   見開きの絵：画面に入るときにふわっと現れ、通り過ぎる間はゆっくり上へ漂って少し傾く（左右交互の見開きは傾きも逆）
   トップのヒーローの絵：下へスクロールすると少し遅れて動く（開いた直後の見た目は変えない）
   動きを減らす設定の人・対応していないブラウザでは動かさない（止まった絵のまま）
   ======================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .spread-art img{
      animation: gg-illust-rise linear both, gg-illust-drift linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 80%, cover 0% cover 100%;
    }
    .spread.reverse .spread-art img{animation-name: gg-illust-rise, gg-illust-drift-reverse;}
    /* 開いたときに現れる riseIn（上の .hero-art img）は残し、スクロールの動きを2つ目に足す。
       ヒーローははみ出しを隠す欄（overflow:hidden）のため view() では動かない → ページのスクロール量（最初の1画面分）で動かす */
    .hero-art img{
      animation: riseIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards, gg-illust-hero linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
  }
}
@keyframes gg-illust-rise{
  from{opacity:0; scale:.9; transform:translateY(var(--illust-rise));}
  to{opacity:1; scale:1; transform:none;}
}
@keyframes gg-illust-drift{
  from{translate:0 var(--illust-drift); rotate:calc(var(--illust-tilt) * -1);}
  to{translate:0 calc(var(--illust-drift) * -1); rotate:var(--illust-tilt);}
}
@keyframes gg-illust-drift-reverse{
  from{translate:0 var(--illust-drift); rotate:var(--illust-tilt);}
  to{translate:0 calc(var(--illust-drift) * -1); rotate:calc(var(--illust-tilt) * -1);}
}
@keyframes gg-illust-hero{
  from{translate:0 0;}
  to{translate:0 calc(var(--illust-drift) * 2);}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}