@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
/* =====================================================================
   ORIA Journal — テンプレート共通コンポーネント CSS
   oria-journal-template.css
   ---------------------------------------------------------------------
   未検証・要実機確認 — Cocoon実機で検証してから適用。
   記事は公開しない（draftのみ）。

   【このファイルの役割と分離設計】
     このファイルは、ORIA Journal の全テンプレート（front-page / home /
     archive / category-ingredients / single / page-about / 固定ページ）で
     使用する .o-* コンポーネントクラスと :root デザイントークンを定義する。

     oria-brand.css（子テーマ style.css 末尾に追記済みのブランド CSS）との
     分離ルールを厳守すること:

       ✗ global body { … } ルールを含まない
         （body スタイルは oria-brand.css が担当）
       ✗ @import url('https://fonts.googleapis.com/…') を含まない
         （Web フォントは oria-brand.css の @import または
           functions-snippet.php の wp_enqueue_style で読み込み済み）
       ✓ :root トークン（--paper / --ink / --gold 等の短縮エイリアス）を定義する
         （oria-brand.css は --c-* 名で定義しているため名前空間が異なる）
       ✓ .o-* コンポーネントクラスをすべて定義する

   適用: functions-snippet.php 内の wp_enqueue_style 経由で読み込む
         または子テーマ style.css 末尾に
         oria-journal-template.css 追記ここから
         のマーカーを置いてインライン化することも可。
   ===================================================================== */

/* ==========================================================================
   :root — デザイントークン（design/assets/oria.css 1a 準拠・短縮エイリアス）
   oria-brand.css の --c-* 変数と値は同一。名前空間のみ異なる。
   ========================================================================== */
:root {
  --paper:     #FBF7F0;  /* ページ背景 */
  --panel:     #F4EDE2;  /* カード・囲み背景 */
  --panel-2:   #EFE6D7;  /* 濃いパネル */
  --header-bg: #F7F1E8;  /* ヘッダー背景 */
  --ink:       #211E1A;  /* 最暗テキスト / 見出し */
  --navy:      #1E2742;  /* ネイビー（要点 BOX 等） */
  --gold:      #9C7E45;  /* ゴールドアクセント */
  --gold-2:    #C9B894;  /* ゴールド2（ダーク背景上） */
  --text:      #3A332B;  /* 本文テキスト */
  --text-2:    #6E655A;  /* サブテキスト */
  --text-3:    #857B6E;  /* キャプション等 */
  --footer-bg: #322C24;  /* フッター背景 */

  /* フォントエイリアス */
  --mincho:   'Shippori Mincho B1', serif;
  --gothic:   'Zen Kaku Gothic New', system-ui, -apple-system, sans-serif;
  --wordmark: 'Cormorant Garamond', serif;
  --mono:     'JetBrains Mono', ui-monospace, monospace;
}

/* ==========================================================================
   スコープ付き基本リセット（ORIA コンテナ内のみ・Cocoon DOM に非干渉）
   global * { box-sizing } は Cocoon と競合するため使用しない
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

.o-header *, .o-header *::before, .o-header *::after,
.o-footer *, .o-footer *::before, .o-footer *::after,
.o-container *, .o-container *::before, .o-container *::after,
.o-section *, .o-section *::before, .o-section *::after,
.o-cta *, .o-cta *::before, .o-cta *::after,
.o-related *, .o-related *::before, .o-related *::after,
.o-article-header *, .o-article-header *::before, .o-article-header *::after,
.o-figure-wrap *, .o-figure-wrap *::before, .o-figure-wrap *::after,
.o-article-layout *, .o-article-layout *::before, .o-article-layout *::after,
.o-supervisor *, .o-supervisor *::before, .o-supervisor *::after,
.o-faq-section *, .o-faq-section *::before, .o-faq-section *::after,
.o-about-hero *, .o-about-hero *::before, .o-about-hero *::after,
.o-product-lineup *, .o-product-lineup *::before, .o-product-lineup *::after {
  box-sizing: border-box;
}

.o-header img, .o-footer img,
.o-container img, .o-section img, .o-cta img,
.o-related img, .o-article-header img, .o-about-hero img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   フォント / ユーティリティヘルパー
   ========================================================================== */
.o-mincho   { font-family: var(--mincho); }
.o-gothic   { font-family: var(--gothic); }
.o-wordmark { font-family: var(--wordmark); }
.o-mono     { font-family: var(--mono); }

/* ==========================================================================
   レイアウト基盤
   ========================================================================== */
.o-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px);
}
.o-section {
  padding-top:    clamp(30px, 4vw, 68px);
  padding-bottom: clamp(30px, 4vw, 68px);
}
.o-kicker {
  font: 500 11px/1 var(--mono);
  letter-spacing: .22em;
  color: var(--gold);
}
.o-kicker--light { color: var(--gold-2); }

/* セクション見出し行（kicker + 明朝 h2） */
.o-section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.o-section-head h2 {
  font: 600 clamp(20px, 2.4vw, 26px)/1 var(--mincho);
  margin: 0;
}
.o-section-head--rule {
  border-top: 1px solid rgba(33, 30, 26, .14);
  padding-top: 30px;
  margin-bottom: 8px;
}
.o-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.o-section-head--center h2 { line-height: 1.4; }

/* ==========================================================================
   ヘッダー / ナビゲーション
   ========================================================================== */
.o-header {
  background: var(--header-bg);
  border-bottom: 1px solid rgba(156, 126, 69, .28);
}
.o-nav {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 44px);
  padding: 13px 24px 0;
  flex-wrap: wrap;
  margin: 0;
  list-style: none;
}
/* wp_nav_menu が出力する <ul>/<li> 構造を透過 */
.o-nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 44px);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.o-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.o-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 12px/1 var(--gothic);
  letter-spacing: .13em;
  color: var(--text);
  text-decoration: none;
}
.o-nav a[aria-current="page"] { border-bottom: 2px solid var(--gold); }
.o-header__brand { text-align: center; padding: 15px 0 17px; }
.o-header__brand img { display: inline-block; height: 30px; width: auto; }
.o-tagline {
  font: 400 11.5px/1 var(--mincho);
  letter-spacing: .3em;
  color: var(--gold);
  margin-top: 10px;
}


/* スマホ幅（〜600px）: トップのカテゴリナビは非表示にして中央ロゴ＋タグラインのみ。
   2行折り返しでヘッダーが縦に伸びる問題を回避。カテゴリ導線はフッターに集約済み。
   タブレット/PC（601px〜）は従来どおりナビを表示。 */
@media (max-width: 600px) {
  .o-header .o-nav { display: none; }
  .o-header__brand { padding: 20px 0 18px; }
}

/* ==========================================================================
   ヒーロー（トップページ）
   ========================================================================== */
.o-hero {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.o-hero__body {
  flex: 1 1 360px;
  min-width: min(100%, 300px);
}
.o-hero__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.o-hero__label .o-kicker { font-size: 11px; letter-spacing: .2em; }
.o-hero__label .o-rule {
  flex: 1;
  height: 1px;
  background: rgba(156, 126, 69, .4);
}
.o-hero h1 {
  /* 見出しコピー変更（2026-07）に合わせ、長め2行が語中改行せず収まるよう縮小・調整 */
  font: 600 clamp(26px, 2.9vw, 38px)/1.36 var(--mincho);
  margin: 0;
  letter-spacing: .01em;
}
.o-hero h1 .o-em { color: var(--gold); }
.o-hero__lead {
  font: 400 15px/2.1 var(--gothic);
  color: var(--text-2);
  margin: 26px 0 0;
  max-width: 30em;
}
.o-hero__media {
  flex: 1 1 380px;
  min-width: min(100%, 300px);
  position: relative;
}
.o-hero__frame {
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgba(156, 126, 69, .4);
  border-radius: 3px;
}
.o-hero__media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* インライン gold 下線テキストリンク */
.o-link-underline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 13px/1 var(--gothic);
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 8px;
  min-height: 44px;
}
.o-link-underline span { color: var(--gold); }

/* ==========================================================================
   RECOMMEND — ランクリスト
   ========================================================================== */
.o-rank-list { display: block; }
.o-rank-item {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  padding: clamp(18px, 2.4vw, 26px) 4px;
  border-bottom: 1px solid rgba(33, 30, 26, .12);
  text-decoration: none;
}
.o-rank-item .o-rank-no {
  font: 300 clamp(30px, 4vw, 52px)/1 var(--wordmark);
  color: var(--gold-2);
  min-width: 1.4em;
}
.o-rank-item .o-rank-title {
  font: 500 clamp(15px, 1.7vw, 19px)/1.7 var(--mincho);
  color: var(--ink);
  flex: 1;
}
.o-rank-item .o-rank-cat {
  font: 500 11px/1 var(--gothic);
  letter-spacing: .1em;
  color: var(--gold);
  white-space: nowrap;
}
.o-note {
  font: 400 11px/1.6 var(--gothic);
  color: rgba(33, 30, 26, .42);
  margin: 16px 0 0;
}

/* ==========================================================================
   LATEST — フィーチャーカード + カードグリッド
   ========================================================================== */
.o-feature-card {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  background: var(--paper);
  border: 1px solid rgba(156, 126, 69, .22);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: clamp(20px, 2.6vw, 34px);
}
.o-feature-card--panel { background: var(--panel); }
.o-feature-card__img {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
  width: 100%;
  height: clamp(240px, 30vw, 360px);
  object-fit: cover;
}
.o-feature-card__body {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
  padding: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0;
}
.o-feature-card__body h3 {
  font: 600 clamp(20px, 2.5vw, 30px)/1.55 var(--mincho);
  color: var(--ink);
  margin: 18px 0 0;
}
.o-feature-card__body h2 {
  font: 600 clamp(20px, 2.5vw, 30px)/1.55 var(--mincho);
  color: var(--ink);
  margin: 18px 0 0;
}
.o-feature-card__body p {
  font: 400 14px/2 var(--gothic);
  color: var(--text-2);
  margin: 16px 0 0;
}
.o-tag-outline {
  display: inline-block;
  font: 500 10.5px/1 var(--gothic);
  letter-spacing: .14em;
  color: var(--gold);
  border: 1px solid rgba(156, 126, 69, .5);
  padding: 5px 11px;
  border-radius: 2px;
}
.o-date {
  display: block;
  font: 400 11px/1 var(--mono);
  color: rgba(33, 30, 26, .45);
  margin-top: 22px;
}

.o-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.o-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(156, 126, 69, .2);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}
.o-card__fig {
  aspect-ratio: 3/2;
  background: linear-gradient(135deg, #F0E7D8, #E7DAC6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.o-card__fig .o-fig-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(156, 126, 69, .32);
  border-radius: 2px;
}
.o-card__fig .o-fig-label {
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .18em;
  color: rgba(156, 126, 69, .85);
  text-align: center;
  padding: 0 12px;
}
.o-card__fig .o-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  font: 500 10px/1 var(--gothic);
  letter-spacing: .1em;
  color: var(--gold);
  background: var(--paper);
  padding: 5px 9px;
  border-radius: 2px;
}
.o-card__body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.o-card__body h3 {
  font: 500 15.5px/1.7 var(--mincho);
  color: var(--ink);
  margin: 0 0 10px;
}
.o-card__body p {
  font: 400 12.5px/1.85 var(--gothic);
  color: var(--text-3);
  margin: 0 0 16px;
  flex: 1;
}
.o-card__body .o-date { font-size: 10.5px; margin-top: 0; }

/* ==========================================================================
   EXPLORE — キーワードグリッド
   ========================================================================== */
.o-keyword-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(20px, 2.6vw, 36px);
}
.o-keyword-group__title {
  font: 600 13px/1 var(--mincho);
  color: var(--ink);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--gold);
  margin-bottom: 15px;
}
.o-keyword-group__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.o-keyword-group__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 13px/1 var(--gothic);
  color: var(--text-2);
  text-decoration: none;
}

/* ==========================================================================
   LINE 先行登録 CTA
   ========================================================================== */
.o-cta {
  position: relative;
  background: linear-gradient(115deg, #EFE6D7, #E6DAC4);
  overflow: hidden;
}
.o-cta__komorebi {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 46%;
  height: 170%;
  pointer-events: none;
  background:
    radial-gradient(circle at 58% 28%, rgba(58, 51, 43, .07), transparent 36%),
    radial-gradient(circle at 80% 56%, rgba(58, 51, 43, .06), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(58, 51, 43, .05), transparent 24%);
}
.o-cta__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 58px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
.o-cta__body {
  flex: 1 1 420px;
  min-width: min(100%, 300px);
}
.o-cta__head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.o-cta__head img { height: 34px; width: auto; }
.o-cta__badge {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--gold);
  border: 1px solid rgba(156, 126, 69, .5);
  padding: 6px 12px;
  border-radius: 30px;
}
.o-cta h2 {
  font: 600 clamp(24px, 3.2vw, 40px)/1.5 var(--mincho);
  color: var(--navy);
  margin: 0;
  letter-spacing: .02em;
}
.o-cta__lead {
  font: 400 13.5px/1.95 var(--gothic);
  color: var(--text-2);
  margin: 18px 0 0;
  max-width: 28em;
}
.o-cta__media {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
}
.o-cta__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.o-btn-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  background: var(--navy);
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 46px;
  border: 1.5px solid rgba(201, 184, 148, .55);
  box-shadow: 0 12px 28px rgba(30, 39, 66, .26);
  min-height: 44px;
}
.o-btn-line__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 9px;
  font: 700 8.5px/1 var(--mono);
  color: var(--navy);
  letter-spacing: .02em;
}
.o-btn-line__label {
  font: 600 clamp(14px, 1.7vw, 18px)/1 var(--gothic);
  color: #F7F1E8;
  letter-spacing: .04em;
}
.o-btn-line__arrow { font: 400 18px/1; color: var(--gold-2); }

/* ==========================================================================
   パンくずリスト
   ========================================================================== */
.o-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font: 400 11px/1 var(--gothic);
  color: rgba(33, 30, 26, .5);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.o-breadcrumb a { text-decoration: none; color: rgba(33, 30, 26, .5); }
.o-breadcrumb__sep { color: var(--gold); }
.o-breadcrumb__current { color: var(--ink); }

/* ==========================================================================
   記事一覧ページ — ヒーロー / フィルターバー / タブ / ページネーション
   ========================================================================== */
.o-articles-hero {
  border-bottom: 1px solid rgba(33, 30, 26, .14);
  padding-bottom: clamp(20px, 2.6vw, 30px);
}
.o-articles-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  justify-content: space-between;
}
.o-articles-hero h1 {
  font: 600 clamp(28px, 3.6vw, 46px)/1.2 var(--mincho);
  margin: 14px 0 0;
  letter-spacing: .02em;
}
.o-articles-hero p {
  font: 400 14px/2 var(--gothic);
  color: var(--text-2);
  margin: 14px 0 0;
  max-width: 34em;
}
.o-articles-hero__count {
  font: 400 12px/1 var(--mono);
  color: rgba(33, 30, 26, .5);
  white-space: nowrap;
}

.o-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.o-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 11px/1 var(--mono);
  color: rgba(33, 30, 26, .5);
}
.o-sort__val { color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }

.o-tabs { display: flex; flex-wrap: wrap; gap: 9px; }
.o-tabs__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 12px/1 var(--gothic);
  letter-spacing: .06em;
  color: var(--text);
  text-decoration: none;
  padding: 10px 17px;
  border-radius: 30px;
  border: 1px solid rgba(33, 30, 26, .2);
}
.o-tabs__item--active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.o-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.o-pagination__prev,
.o-pagination__next {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 13px/1 var(--mono);
  color: rgba(33, 30, 26, .4);
  text-decoration: none;
  padding: 11px 14px;
}
.o-pagination__next { color: var(--ink); border-bottom: 1px solid var(--gold); }
.o-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 400 13px/1 var(--mono);
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(33, 30, 26, .18);
}
.o-pagination__item--active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 500;
}
.o-pagination__ellipsis {
  font: 400 13px/1 var(--mono);
  color: rgba(33, 30, 26, .4);
  padding: 0 6px;
}

/* ==========================================================================
   記事詳細ページ — ヘッダー / タグ / H1 / リード / メタ
   ========================================================================== */
[data-anchor] { scroll-margin-top: 24px; }

.o-article-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 4vw, 48px) 0;
}
.o-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}
.o-article-tag--filled {
  font: 500 11px/1 var(--gothic);
  letter-spacing: .12em;
  color: #fff;
  background: var(--navy);
  padding: 7px 13px;
  border-radius: 2px;
  display: inline-block;
}
.o-article-tag--outline {
  font: 500 11px/1 var(--gothic);
  letter-spacing: .12em;
  color: var(--gold);
  border: 1px solid rgba(156, 126, 69, .5);
  padding: 6px 12px;
  border-radius: 2px;
  display: inline-block;
}
.o-article-h1 {
  font: 600 clamp(26px, 3.6vw, 46px)/1.5 var(--mincho);
  margin: 0;
  letter-spacing: .01em;
  max-width: 18em;
}
.o-article-lead {
  font: 400 15px/2.1 var(--gothic);
  color: var(--text-2);
  margin: 24px 0 0;
  max-width: 40em;
}
.o-article-lead b { color: var(--ink); font-weight: 500; }
.o-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: 22px;
  border-top: 1px solid rgba(33, 30, 26, .12);
}
.o-article-meta__item { font: 400 11px/1 var(--mono); color: rgba(33, 30, 26, .5); }
.o-article-meta__spacer { flex: 1; }
.o-article-meta__supervisor { font: 400 11px/1 var(--gothic); color: rgba(33, 30, 26, .5); }

/* ==========================================================================
   リード図版（820px 幅）
   ========================================================================== */
.o-figure-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(26px, 3.4vw, 46px) clamp(20px, 4vw, 48px) 0;
}
.o-figure-wrap figure {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(33, 30, 26, .12);
  border-radius: 5px;
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 4px 24px rgba(33, 30, 26, .05);
}
.o-figure-cap {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}
.o-figure-note { font: 400 11.5px/1.8 var(--gothic); color: var(--text-3); margin: 14px 0 0; }

/* ==========================================================================
   記事 2カラム レイアウト（本文 + TOC サイドバー）
   ========================================================================== */
.o-article-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) clamp(20px, 4vw, 48px) clamp(20px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap-reverse;
  gap: clamp(30px, 4vw, 60px);
  align-items: flex-start;
}
.o-article-col { flex: 3 1 460px; min-width: min(100%, 300px); max-width: 720px; }

/* ==========================================================================
   プロース本文タイポグラフィ（.o-prose 内）
   ========================================================================== */
.o-prose h2 {
  font: 600 clamp(20px, 2.4vw, 27px)/1.6 var(--mincho);
  margin: 36px 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--navy);
}
.o-prose h2:first-child { margin-top: 0; }
.o-prose h3 { font: 600 17px/1.7 var(--mincho); color: var(--ink); margin: 28px 0 14px; }
.o-prose p { font: 400 15px/2.25 var(--gothic); color: var(--text); margin: 0 0 20px; }
.o-prose p:last-child { margin-bottom: 0; }
.o-prose b,
.o-prose strong { font-weight: 500; }

/* ==========================================================================
   コールアウト（要点ボックス — ネイビー背景）
   ========================================================================== */
.o-callout {
  background: var(--navy);
  color: #F7F1E8;
  border-radius: 6px;
  padding: clamp(20px, 3vw, 30px);
}
.o-callout .o-kicker { color: var(--gold-2); }
.o-callout__head { margin-bottom: 16px; }
.o-callout__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.o-callout__list li {
  position: relative;
  padding-left: 24px;
  font: 400 14px/1.85 var(--gothic);
  color: #EDE6D8;
}
.o-callout__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
}

/* POINT コールアウト（gold 左罫インライン） */
.o-point {
  background: var(--panel);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  padding: 22px 24px;
  margin: 0 0 30px;
}
.o-point__head {
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 12px;
}
.o-point p { font: 500 14.5px/2 var(--mincho); color: var(--ink); margin: 0; }

/* ==========================================================================
   テーブル（横スクロールラッパー付き）
   ========================================================================== */
.o-table-wrap { overflow-x: auto; margin: 0 0 30px; -webkit-overflow-scrolling: touch; }
.o-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.7 var(--gothic);
  min-width: min(100%, 420px);
}
.o-table thead tr { background: var(--navy); color: #F7F1E8; }
.o-table thead th { text-align: left; padding: 13px 14px; font-weight: 500; }
.o-table tbody tr:nth-child(odd) { background: #fff; }
.o-table tbody tr:nth-child(even) { background: var(--paper); }
.o-table tbody tr { border-bottom: 1px solid rgba(33, 30, 26, .12); }
.o-table td { padding: 13px 14px; color: var(--text-2); }

/* ==========================================================================
   番号付きリスト（ステップ 1-2-3）
   ========================================================================== */
.o-num-list {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: o-num;
}
.o-num-list li {
  position: relative;
  padding: 0 0 16px 44px;
  font: 400 14.5px/2 var(--gothic);
  color: var(--text);
  counter-increment: o-num;
}
.o-num-list li:last-child { padding-bottom: 0; }
.o-num-list li::before {
  content: counter(o-num);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-2);
  font: 500 12px/28px var(--mono);
  text-align: center;
  display: block;
}
.o-num-list b { font-weight: 500; }

/* ==========================================================================
   まとめ（サマリーボックス）
   ========================================================================== */
.o-summary {
  background: var(--panel);
  border: 1px solid rgba(156, 126, 69, .3);
  border-radius: 5px;
  padding: 22px 24px;
  margin: 0 0 8px;
}
.o-summary__head {
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 10px;
}
.o-summary p { font: 400 14px/2 var(--gothic); color: var(--text); margin: 0; }

/* ==========================================================================
   TOC サイドバー
   ========================================================================== */
.o-toc { flex: 1 1 200px; min-width: 180px; position: sticky; top: 20px; }
.o-toc__box {
  border: 1px solid rgba(33, 30, 26, .12);
  border-radius: 5px;
  background: #fff;
  padding: 20px 20px 22px;
}
.o-toc__head {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .16em;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}
.o-toc__nav { display: flex; flex-direction: column; gap: 13px; }
.o-toc__nav a { font: 400 12.5px/1.6 var(--gothic); color: var(--text); text-decoration: none; }
.o-toc__sub {
  font-size: 12px !important;
  color: var(--text-3) !important;
  padding-left: 12px;
  border-left: 1px solid rgba(156, 126, 69, .4);
}
.o-toc__actions {
  border-top: 1px solid rgba(33, 30, 26, .1);
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  gap: 10px;
}
.o-toc__actions a {
  flex: 1;
  text-align: center;
  font: 400 11px/1 var(--gothic);
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid rgba(33, 30, 26, .18);
  padding: 0;
  border-radius: 2px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   監修者ボックス
   ========================================================================== */
.o-supervisor {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px) clamp(34px, 4vw, 56px);
}
.o-supervisor__box {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(33, 30, 26, .12);
  border-radius: 5px;
  padding: clamp(20px, 2.6vw, 28px);
}
.o-supervisor__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EDE4D4, #DDCEB6);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 300 22px/1 var(--wordmark);
  color: var(--gold);
}
.o-supervisor__body { flex: 1 1 240px; min-width: min(100%, 220px); }
.o-supervisor__label {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.o-supervisor__name { font: 500 15px/1.5 var(--mincho); color: var(--ink); display: block; }
.o-supervisor__note { font: 400 12.5px/1.85 var(--gothic); color: var(--text-2); margin: 8px 0 0; }

/* ==========================================================================
   FAQ セクション
   ========================================================================== */
.o-faq { display: flex; flex-direction: column; gap: 14px; }

.o-faq-section {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(6px, 2vw, 20px) clamp(20px, 4vw, 48px) clamp(34px, 4.5vw, 58px);
}
.o-faq-section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.o-faq-section__head h2 { font: 600 clamp(20px, 2.4vw, 27px)/1 var(--mincho); margin: 0; }

.o-faq-item {
  background: #fff;
  border: 1px solid rgba(33, 30, 26, .12);
  border-radius: 5px;
  padding: 20px 22px;
}
.o-faq-q {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  font: inherit;
  color: inherit;
}
.o-faq-q__letter { font: 600 16px/1.3 var(--wordmark); color: var(--gold); flex: none; min-width: 18px; }
.o-faq-q__text { font: 600 15px/1.7 var(--mincho); color: var(--ink); margin: 0; }
.o-faq-a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(33, 30, 26, .08);
  font: inherit;
  color: inherit;
}
.o-faq-a__letter { font: 600 16px/1.3 var(--wordmark); color: var(--navy); flex: none; min-width: 18px; }
.o-faq-a__text { font: 400 13.5px/1.95 var(--gothic); color: var(--text-2); margin: 0; }

/* ==========================================================================
   関連記事セクション
   ========================================================================== */
.o-related { background: var(--panel); border-top: 1px solid rgba(156, 126, 69, .22); }
.o-related__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(34px, 4.5vw, 64px) clamp(20px, 4vw, 48px);
}
.o-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.o-related__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(156, 126, 69, .2);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}
.o-related__fig {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #F0E7D8, #E7DAC6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.o-related__fig-frame { position: absolute; inset: 10px; border: 1px solid rgba(156, 126, 69, .32); }
.o-related__fig-label {
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .16em;
  color: rgba(156, 126, 69, .85);
}
.o-related__fig-cat {
  position: absolute;
  top: 11px;
  left: 11px;
  font: 500 10px/1 var(--gothic);
  letter-spacing: .08em;
  color: var(--gold);
  background: #fff;
  padding: 5px 9px;
  border-radius: 2px;
}
.o-related__body { padding: 16px 17px 18px; }
.o-related__body h3 { font: 500 14.5px/1.65 var(--mincho); color: var(--ink); margin: 0 0 10px; }

/* ==========================================================================
   成分辞典ページ（ingredients.html）
   ========================================================================== */
.o-ingredient-hero {
  text-align: center;
  max-width: 42em;
  margin: 0 auto;
  padding-bottom: clamp(24px, 3vw, 38px);
}
.o-ingredient-hero .o-kicker { letter-spacing: .24em; }
.o-ingredient-hero h1 {
  font: 600 clamp(28px, 3.6vw, 48px)/1.3 var(--mincho);
  margin: 14px 0 0;
  letter-spacing: .04em;
}
.o-ingredient-hero p { font: 400 14px/2.1 var(--gothic); color: var(--text-2); margin: 16px auto 0; }

.o-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  background: #fff;
  border: 1px solid rgba(33, 30, 26, .16);
  border-radius: 44px;
  padding: 13px 22px;
}
.o-search__icon { font-size: 15px; line-height: 1; color: var(--gold); flex: none; }
.o-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: 400 13px/1.4 var(--gothic);
  color: var(--ink);
  min-width: 0;
  min-height: 44px;
}

.o-index {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(33, 30, 26, .12);
  border-bottom: 1px solid rgba(33, 30, 26, .12);
  padding: clamp(16px, 2vw, 22px) 0;
}
.o-index__label { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--gold); }
.o-index__link {
  display: inline-block;
  font: 500 12.5px/1 var(--mincho);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  min-height: 44px;
  line-height: 44px;
}

/* 成分カード（基本） */
.o-ingredient-card {
  background: #fff;
  border: 1px solid rgba(156, 126, 69, .25);
  border-radius: 6px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.o-ingredient-card .o-inci {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(33, 30, 26, .42);
  overflow-wrap: anywhere;
  margin: 12px 0 0;
}
.o-ingredient-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.o-ingredient-card__name { font: 600 18px/1.4 var(--mincho); color: var(--ink); margin: 0; }
.o-ingredient-card__reading {
  font: 400 11px/1 var(--gothic);
  letter-spacing: .08em;
  color: var(--gold);
  margin-top: 7px;
}
.o-ingredient-card__tag {
  font: 500 9.5px/1 var(--gothic);
  letter-spacing: .08em;
  color: var(--navy);
  background: #EEE6D8;
  padding: 6px 9px;
  border-radius: 2px;
  white-space: nowrap;
  flex: none;
}
.o-ingredient-card__desc {
  font: 400 12.5px/1.9 var(--gothic);
  color: var(--text-2);
  margin: 12px 0 16px;
  flex: 1;
}
.o-ingredient-card__more {
  font: 500 11px/1 var(--gothic);
  letter-spacing: .06em;
  color: var(--gold);
}
.o-ingredient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* ==========================================================================
   成分詳細ページ（ingredient.html）
   ========================================================================== */
.o-ingredient-h1 {
  font: 600 clamp(30px, 4.2vw, 52px)/1.3 var(--mincho);
  margin: 18px 0 0;
  letter-spacing: .02em;
}
.o-ingredient-reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 12px;
}
.o-ingredient-reading__yomi { font: 400 13px/1 var(--gothic); letter-spacing: .08em; color: var(--gold); }
.o-ingredient-reading__inci { font: 400 11px/1 var(--mono); color: rgba(33, 30, 26, .5); }

.o-quickfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(14px, 2vw, 22px);
  background: var(--panel);
  border: 1px solid rgba(156, 126, 69, .25);
  border-radius: 6px;
  padding: clamp(18px, 2.4vw, 26px);
}
.o-quickfacts dt { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--gold); margin: 0 0 7px; }
.o-quickfacts dd { font: 500 14px/1.6 var(--mincho); color: var(--ink); margin: 0; }
.o-quickfacts-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(26px, 3.4vw, 42px) clamp(20px, 4vw, 48px) 0;
}

.o-ingredient-main {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 58px) clamp(20px, 4vw, 48px) 0;
}

.o-bullet-list {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.o-bullet-list li {
  position: relative;
  padding-left: 26px;
  font: 400 14.5px/2 var(--gothic);
  color: var(--text);
}
.o-bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.o-ingredient-related {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 64px) clamp(20px, 4vw, 48px) 0;
}
.o-ingredient-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

/* ==========================================================================
   About ページ（about.html）
   ========================================================================== */
.o-about-hero {
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.o-about-hero__text {
  flex: 1 1 380px;
  min-width: min(100%, 300px);
  padding: clamp(34px, 5vw, 84px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.o-about-hero__text h1 {
  font: 600 clamp(30px, 4.4vw, 56px)/1.42 var(--mincho);
  margin: 22px 0 0;
  letter-spacing: .02em;
  color: var(--navy);
}
.o-about-hero__text p {
  font: 400 15px/2.2 var(--gothic);
  color: var(--text-2);
  margin: 26px 0 0;
  max-width: 30em;
}
.o-about-hero__tagline {
  font: 400 12px/1 var(--wordmark);
  font-style: italic;
  letter-spacing: .22em;
  color: var(--gold);
  margin-top: 30px;
}
.o-about-hero__media { flex: 1 1 380px; min-width: min(100%, 300px); }
.o-about-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: center 22%;
}

.o-philo-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 56px) clamp(30px, 4vw, 52px);
}
.o-philo-section__head { text-align: center; padding-bottom: clamp(28px, 3vw, 40px); }
.o-philo-section__head h2 {
  font: 600 clamp(22px, 3vw, 36px)/1.7 var(--mincho);
  margin: 18px 0 0;
  letter-spacing: .03em;
  color: var(--ink);
}
.o-philosophy-rule { width: 48px; height: 1px; background: var(--gold); margin: clamp(28px, 3vw, 40px) auto 0; }
.o-philo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.o-philo-item h3 { font: 600 16px/1.8 var(--mincho); color: var(--navy); margin: 0 0 12px; }
.o-philo-item p  { font: 400 14px/2.15 var(--gothic); color: var(--text-2); margin: 0; }

.o-statement {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 56px);
}
.o-statement p {
  font: 500 clamp(17px, 2.2vw, 24px)/2.1 var(--mincho);
  color: var(--ink);
  margin: 0;
  letter-spacing: .02em;
}

.o-product-lineup { background: var(--navy); color: #EDE6D8; }
.o-product-lineup__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(38px, 5vw, 76px) clamp(20px, 4vw, 56px);
}
.o-product-lineup__head { text-align: center; margin-bottom: clamp(26px, 3vw, 42px); }
.o-product-lineup__head h2 {
  font: 600 clamp(22px, 2.8vw, 34px)/1.4 var(--mincho);
  color: #FBF7F0;
  margin: 14px 0 0;
}
.o-product-lineup__img {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 5px;
}
.o-product-lineup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.o-product-item { text-align: center; }
.o-product-item__name { font: 500 14px/1.5 var(--mincho); color: #FBF7F0; }
.o-product-item__spec { font: 400 11px/1.6 var(--mono); color: var(--gold-2); margin-top: 7px; }
.o-product-item__desc { font: 400 11.5px/1.7 var(--gothic); color: rgba(237, 230, 216, .7); margin-top: 8px; }

/* ==========================================================================
   フッター
   ========================================================================== */
.o-footer { background: var(--footer-bg); color: #D9CFBE; }
.o-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 68px) clamp(20px, 4vw, 56px) clamp(28px, 3vw, 40px);
}
.o-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 80px);
  justify-content: space-between;
}
.o-footer__brand { flex: 1 1 280px; min-width: min(100%, 240px); }
.o-footer__brand img { display: inline-block; height: 26px; width: auto; }
.o-footer__brand p {
  font: 400 13px/2 var(--mincho);
  color: #C9C0B0;
  margin: 22px 0 0;
  max-width: 24em;
}
.o-footer__cols { display: flex; gap: clamp(40px, 6vw, 90px); flex-wrap: wrap; }
.o-footer__col { display: flex; flex-direction: column; gap: 14px; }
.o-footer__col-head { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--gold); }
.o-footer a { color: #D9CFBE; text-decoration: none; }
.o-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 13px/1 var(--gothic);
  color: #D9CFBE;
}
.o-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  border-top: 1px solid rgba(217, 207, 190, .18);
  margin-top: clamp(30px, 4vw, 50px);
  padding-top: 24px;
}
.o-footer__legal a { font: 400 11px/1 var(--gothic); color: rgba(217, 207, 190, .7); }
.o-footer__spacer { flex: 1; }
.o-footer__copy { font: 400 11px/1 var(--mono); color: rgba(217, 207, 190, .5); }

/* =====================================================================
   ORIA chrome override（モックの header/footer を採用）
   Cocoon標準の #header / #footer を視覚的に隠す（wp_head/wp_footerは温存）。
   モックの .o-header は wp_body_open、.o-footer は wp_footer で注入する。
   ===================================================================== */
body.home #header,
#header.header,
#footer.footer { display: none !important; }
/* 注入した .o-header / .o-footer をページ最上部/最下部に自然配置 */
.o-header { position: relative; z-index: 5; }
.o-footer { position: relative; z-index: 5; }
/* Cocoonのヘッダーコンテナ全体（#navi グローバルナビ含む）を隠す */
#header-container { display: none !important; }
/* 旧デザインの遺物: content-bottom ウィジェットのフロントサブコピー
   （h3.oria-front-subcopy「紫外線を正しく知り…メディア。」）を隠す。
   新デザインには無い要素。ウィジェット自体は温存＝可逆。 */
.oria-front-subcopy,
.widget_custom_html .oria-front-subcopy { display: none !important; }