/* ============================================================
   エレメンタルナイツR ／ デザイン差し替えテーマ「マイルドファンタジー」
   準拠：デザイン定義_確定版_マイルドファンタジー.pptx ／ 確定版プロンプトmd
   方針：焦げ茶×ゴールド×羊皮紙。荘厳をやわらげた上質な大人のファンタジー。
        本文面＝羊皮紙(明)、ヘッダー/フッター/没入面＝焦げ茶(暗)、
        主CTA＝翡翠、金は1〜2pxの細線のみ、ドロップシャドウ・強い光彩は使わない。
   実装：既存ダーク基調CSSの「後ろ」に読み込み、変数の再定義＋必要箇所の上書きで差し替える。
        文言・レイアウト（表示要件）は変更しない。
   ============================================================ */

/* ---- 1) デザイントークン再定義（変数経由の色を一括で差し替え） ---- */
:root{
  /* 面：羊皮紙系（背景＝明） */
  --navy-900:#FBF7EF;  /* ページ地（最明・羊皮紙） */
  --navy-800:#F3E9D2;  /* セクション地・淡面 */
  --navy-700:#FFFFFF;  /* カード面（白） */
  /* ゴールド：明地で可読な濃いめに */
  --gold-100:#9C6F26;  /* 見出し強調・濃ゴールド */
  --gold-300:#C0913C;  /* アクセント・eyebrow・リンク枠 */
  --gold-400:#C0913C;  /* （旧ボタングラデ下） */
  --gold-600:#9C6F26;  /* 深ゴールド・バッジ */
  /* テキスト：インク（暗） */
  --ivory:#221A12;     /* 本文 */
  --ivory-dim:#5A4632; /* 補助本文（レザー） */
  --silver:#8A7256;    /* 微装飾（トープ） */
  /* マイルドファンタジー追加トークン */
  --mf-ink:#221A12; --mf-espresso:#2E2118; --mf-panel:#3E2D1E; --mf-leather:#5A4632; --mf-taupe:#8A7256;
  --mf-gold:#C0913C; --mf-gold-deep:#9C6F26; --mf-gold-light:#E2C988;
  --mf-parch:#FBF7EF; --mf-parch2:#F3E9D2; --mf-line:#E7D9BC;
  --mf-jade:#5E8F6B; --mf-lapis:#43699A; --mf-ruby:#A8493F; --mf-amber:#C9892F;
}

/* ---- 2) ベース：影/光彩を消す（マイルド）・地と本文色 ---- */
*{ box-shadow:none !important; }                 /* ドロップシャドウ・グローは使わない */
body{ background:var(--mf-parch); color:var(--mf-ink); }
img{ filter:none !important; }                    /* ロゴ等の drop-shadow を解除 */

/* リンク（参照系）＝瑠璃 */
.ref, .faq-item__body a, .acc__body a, .gf a{ color:var(--mf-lapis) !important; text-decoration-color:rgba(67,105,154,.5) !important; }
.ref:hover, .acc__body a:hover{ color:#2f4d76 !important; }

/* 強調・キーワード＝ゴールド */
.em, .accent, .block__title .em, .sec-title .em, .intro h1 .em{ color:var(--mf-gold) !important; }

/* eyebrow（英字ラベル）＝濃ゴールド */
.intro__eyebrow, .eyebrow, .cat-title span{ color:var(--mf-gold-deep) !important; }

/* ---- 3) ヘッダー：焦げ茶パネル＋金の細線（ロゴ可視のため暗面に） ---- */
.site-header{ background:rgba(46,33,24,.94) !important; border-bottom:1px solid var(--mf-gold) !important; backdrop-filter:blur(6px); }
.site-header__logo{ filter:none !important; }
.gnav a{ color:#F3E9D2 !important; }
.gnav a:hover, .gnav a[aria-current="page"]{ color:var(--mf-gold-light) !important; }
.lang{ border-color:rgba(231,217,188,.5) !important; }
.lang a{ color:#F3E9D2 !important; }
.lang a[aria-current="true"]{ background:var(--mf-gold) !important; color:#FBF7EF !important; }
.hamburger span, .hamburger span::before, .hamburger span::after{ background:#F3E9D2 !important; }
.nav-toggle:checked ~ .gnav{ background:rgba(46,33,24,.98) !important; border-bottom:1px solid var(--mf-gold) !important; }

/* ---- 4) 主CTA・ボタン：翡翠＋細金縁＋白文字（金グラデ→廃止） ---- */
.btn-primary, .btn-mini, .gnav a.btn-mini, .btn-gold, .cta, .btn-ghost-light{
  background:var(--mf-jade) !important;
  color:#FBF7EF !important;
  border:1.5px solid var(--mf-gold) !important;
  background-image:none !important;
}
.btn-ghost-light{ background:transparent !important; color:var(--mf-ink) !important; border:1px solid var(--mf-taupe) !important; }
/* ステップ番号・チェックの金ベタ→濃ゴールドの細丸（白文字） */
.step__n, .checklist li::before{ background:var(--mf-jade) !important; background-image:none !important; }
.checklist .n, .step__n{ color:#FBF7EF !important; }

/* ---- 5) カード・面・区切り線：白面＋羊皮紙の細線（白アルファ枠を置換） ---- */
.card, .sec, .step, .tip, .next a, .acc, .callout, .acc__call, .hl-card, .ch-card, .feature,
.faq-item, .hcard, .history-num, .acc__shots figure, .acc__body th, .acc__body td,
.fig, .job-grid img, .shot, .duo a, .checklist li, .campaign, .acc__more a, .toc a, .tab, .pg,
.intro, .block, .step__thumb .ph-img, .ph-img{
  border-color:var(--mf-line) !important;
}
/* 半透明白だった面＝白に */
.next a, .checklist li, .acc__more a{ background:#FFFFFF !important; }
/* 見出し系（白カード上）＝濃ゴールド/インクで可読 */
.step__body h3, .tip h3, .callout h3, .acc > summary, .acc__body h4, .acc-group__h{ color:var(--mf-gold-deep) !important; }
.hcard__body h3, .next strong, .ch-card__name, .feature h3{ color:var(--mf-ink) !important; }
.acc > summary::after, .faq-item summary::after{ color:var(--mf-gold) !important; }
.acc__body th{ background:rgba(192,145,60,.14) !important; color:var(--mf-gold-deep) !important; }
/* 補助テキスト（淡色）はレザー系で（明地で十分なコントラスト） */
.block__lead, .sec-lead, .intro p, .tip p, .step__body p, .callout li, .acc__body, .acc__shots figcaption,
.hcard__body p, .next span, .ch-card__role, .cta-note, .note{ color:var(--mf-leather) !important; }

/* ---- 6) フッター：焦げ茶パネル（ロゴ/SNS可視）＋金の細線 ---- */
.site-footer{ background:var(--mf-espresso) !important; border-top:1px solid var(--mf-gold) !important; color:#E7D9BC !important; }
.site-footer .sns a{ color:#F3E9D2 !important; border-color:rgba(231,217,188,.45) !important; }
.site-footer .sns a:hover{ color:var(--mf-espresso) !important; background:var(--mf-gold) !important; background-image:none !important; border-color:var(--mf-gold) !important; }
.site-footer .ft-guideline a, .site-footer .ft-links a:hover{ color:var(--mf-gold-light) !important; }
.site-footer .ft-legal, .site-footer .ft-links a, .site-footer .ft-copy{ color:#cdbfa6 !important; }

/* ---- 7) ヒーロー（index）：イメージ没入面は維持し、文字は明色＋翡翠CTA ---- */
.hero__copy, .hero__sub, .hero__sub .subline, .hero__trust, .hero__trust span,
.hero__plat-note, .hero__qr, .hero__qr span{ color:#F3E9D2 !important; }
.hero__copy .accent, .copy-slide .accent{ color:var(--mf-gold-light) !important; }
.hero__overlay{ background:linear-gradient(180deg, rgba(34,26,18,.30), rgba(34,26,18,.72)) !important; }

/* ---- 8) ニュース/沿革のカテゴリ識別色（定義のカテゴリ色に合わせる） ---- */
.hcat-update, .hcat.hcat-update{ background:var(--mf-lapis) !important; }
.hcat-event,  .hcat.hcat-event { background:var(--mf-gold-deep) !important; }
.hcat-collab, .hcat.hcat-collab{ background:#b5559b !important; }
.hcat-service,.hcat.hcat-service{ background:#2c9b8f !important; }
.hcat{ color:#FBF7EF !important; }

/* ---- 9) キャラクター相関図：暗パネルのまま（SVGは暗地前提）。枠は金細線 ---- */
.chart-wrap{ background:linear-gradient(160deg, var(--mf-espresso), #241a12) !important; border:1px solid var(--mf-gold) !important; }
.ch-card__img{ background:radial-gradient(120% 85% at 50% 12%, rgba(192,145,60,.14), rgba(247,242,230,.0) 70%) !important; }
.ch-card__quote{ color:var(--mf-gold-deep) !important; border-left-color:var(--mf-gold) !important; }
.ch-card__desc, .world p{ color:var(--mf-leather) !important; }

/* ---- 10) おしゃれギャラリー：タブ/ページャの現在地＝翡翠、枠＝金細線 ---- */
.tab.is-active, .pg.is-active{ background:var(--mf-jade) !important; color:#FBF7EF !important; background-image:none !important; border-color:var(--mf-gold) !important; }
.tab:hover, .pg:hover:not(:disabled){ border-color:var(--mf-gold) !important; color:var(--mf-ink) !important; }

/* ---- 11) プレースホルダ枠（点線）＝金の点線のまま色味だけ調整 ---- */
.ph-img{ background:linear-gradient(135deg, #fff, var(--mf-parch2)) !important; border:1px dashed var(--mf-gold) !important; color:var(--mf-gold-deep) !important; }

/* ---- 12) 角丸トークン（定義：ボタン/カード12px） ---- */
.card, .sec, .step, .tip, .next a, .acc, .hl-card, .ch-card, .feature, .faq-item, .hcard{ border-radius:12px !important; }

/* ============================================================
   視認性精査（コントラスト確保）
   ============================================================ */

/* ---- 13) 暗い没入セクション（hero/world）は焦げ茶の暗面のまま、文字は明色に ---- */
.hero::after{ background:linear-gradient(180deg, rgba(34,26,18,.58), rgba(34,26,18,.92)) !important; }
.world::after{ background:linear-gradient(180deg, rgba(34,26,18,.74), rgba(34,26,18,.9)) !important; }
.hero__overlay{ background:linear-gradient(180deg, rgba(34,26,18,.45), rgba(34,26,18,.55) 50%, rgba(34,26,18,.86)) !important; }
.hero h1, .hero p, .hero__eyebrow,
.world h2, .world p, .world__eyebrow,
.hero__copy, .hero__sub, .hero__sub .subline, .hero__trust, .hero__trust span,
.hero__plat-note, .hero__qr, .hero__qr span{ color:#F3E9D2 !important; }
.hero h1 .em, .world h2 .em, .hero__copy .accent, .copy-slide .accent,
.hero__eyebrow, .world__eyebrow, .hero__copy .quote{ color:var(--mf-gold-light) !important; }
.world{ border-color:var(--mf-gold) !important; }

/* ---- 14) 明地に残る淡色(#fbe7b8)の数値・アイコンを可読な濃ゴールドへ ---- */
.fashion-count__num, .fashion-count__plus, .history-num b{ color:var(--mf-gold-deep) !important; text-shadow:none !important; }
.feature__icon, .start-point svg, .tip h3 svg{ color:var(--mf-gold) !important; stroke:var(--mf-gold) !important; }
.history-num span, .meta{ color:var(--mf-leather) !important; }

/* ---- 15) 金文字のコントラスト確保（明地＝濃ゴールド／eyebrowはさらに濃く） ---- */
.em, .accent, .block__title .em, .sec-title .em, .intro h1 .em,
.acc-group__h, .acc > summary, .acc__body h4,
.step__body h3, .tip h3, .callout h3, .news-tabs button{ color:var(--mf-gold-deep) !important; }
.intro__eyebrow, .eyebrow, .cat-title span{ color:#7d5a1f !important; }

/* ---- 16) カテゴリバッジ：地色が無いものは判別色を補い、白文字を確保 ---- */
.card__cat, .ncat{ color:#FBF7EF !important; background:var(--mf-gold-deep) !important; }

/* ---- 17) 白カード上の金色の小さめテキスト（日付など）を濃ゴールドで可読に ---- */
.hcard__meta time, .hl-card__meta time, .hl-card__meta, .meta time{ color:var(--mf-gold-deep) !important; }
/* 念のため：gold-300(細枠用の明るめ金)が“文字色”で残る箇所を濃ゴールドへ寄せる */
.intro p .em, .block__lead .em{ color:var(--mf-gold-deep) !important; }

/* ---- 18) TOP(index)：変数でなく“ハードコードの紺色”だったセクション背景を羊皮紙へ ----
   （他ページはvar(--navy-*)経由で羊皮紙化済み。indexだけ#0a1322/#0f1d33直書きで紺が残っていた） */
.download, .bg-deep, .comeback, .start, .history{ background:var(--mf-parch) !important; background-image:none !important; }
.bg-mid, .fashion-video{ background:var(--mf-parch2) !important; background-image:none !important; }
.download{ border-top:1px solid var(--mf-line) !important; }
.fashion-video{ border-color:var(--mf-line) !important; }
/* 紺地前提だった小要素（ヒーロー以外）も明地向けに：トラスト系pillの濃紺地→淡い金枠 */
.hero__trust > span{ background:rgba(34,26,18,.42) !important; }
/* QRキャプション等の濃紺文字は明地でも可読なので維持（変更不要） */

/* ---- 19) index：カード/フィーチャー等のハードコード紺(#16294a/#1b3157)を白カード・羊皮紙へ ---- */
.card, .feature{ background:#FFFFFF !important; border:1px solid var(--mf-line) !important; }
.fashion-gallery figure, .marquee img{ background:var(--mf-parch2) !important; }
.feature h3{ color:var(--mf-gold-deep) !important; }
.feature p, .card__body, .card__title{ color:var(--mf-leather) !important; }
/* モバイルの固定CTAバー：紺グラデ→羊皮紙 */
.sticky-cta{ background:linear-gradient(0deg, var(--mf-parch), rgba(251,247,239,.92)) !important; border-top:1px solid var(--mf-line) !important; }

/* ---- 20) comeback：キャンペーン枠の紺グラデ→明カード（金枠・暗文字で可読） ---- */
.campaign{ background:#FFFFFF !important; border:1px solid var(--mf-gold) !important; }
.campaign h3{ color:var(--mf-gold-deep) !important; }
.campaign p, .campaign__lead{ color:var(--mf-leather) !important; }
.campaign .edit-note{ color:var(--mf-taupe) !important; }

/* ---- 21) oshacon：ライトボックスは暗いまま（画像閲覧用）。閉じる×だけ明色に ---- */
.lb__close{ color:#F3E9D2 !important; background:rgba(34,26,18,.6) !important; border-color:rgba(231,217,188,.4) !important; }

/* ---- 22) ヒーローのQR枠は白地のため、キャプション文字は暗インクに戻す（明色化で同化していた） ---- */
.hero__qr{ background:#FFFFFF !important; }
.hero__qr span{ color:var(--mf-ink) !important; }

/* ---- 23) スマホ：ハンバーガーの3本線をボタン中央に（上寄せ＋下の余白を解消） ---- */
@media (max-width:820px){
  .hamburger{ display:flex !important; align-items:center; justify-content:center; }
}

/* ---- 24) スマホ固定CTA：inline要素にwidth:100%が効かず左寄せだったため、block化して中央フル幅に ---- */
.sticky-cta{ text-align:center; }
.sticky-cta .btn-primary{ display:block !important; width:100% !important; box-sizing:border-box; }