/*
theme name: Original Theme
theme uri:
description:
Author:
version:2026
*/


/*------------------------------------------------------------
RESET
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure { margin: 0; padding: 0; border: 0; outline: 0; font-size: 1em; box-sizing:border-box;}
body, table, input, textarea, select, option { font-family: 'Noto Sans JP',sans-serif; font-size: 1em; box-sizing:border-box; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; }

html{ overflow-y:scroll; }

img{ vertical-align:middle;}
img{vertical-align:middle;max-width:100%; height:auto;}
img {
width: inherit\9;
max-width: 100%\9;
height: auto\9;
}
table{border-collapse:collapse;}

.wrap{ overflow:hidden; }

iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: none;
display: block;
}



/*------------------------------------------------------------
LINK
------------------------------------------------------------*/
a{ text-decoration:none; }
a:hover {text-decoration:none; }


/*------------------------------------------------------------
TEXTS
------------------------------------------------------------*/
.bold{font-weight:bold;}
.right{text-align:right;}
.center{text-align:center; }
.large{ font-size:1.2em; }

/*------------------------------------------------------------
MARGINS
------------------------------------------------------------*/

.mb0{ margin-bottom:0px !important; }


/* ============================================================
   style.css — 共通リセット / デザイントークン（PC/SP共通・reset程度）
   奥の細道のおと｜合同会社奥の細道企画

   構成:
   1. CSS変数（カラー / フォント / 角丸 / 影 / 余白スケール）
   2. リセット & ベース要素
   3. ユーティリティ（u-visually-hiddenのみ）

   コンポーネント/ページ固有のスタイルは置かない。
   モバイルファーストのベースは sp.css、768px以上の上書きは pc.css に記述する。
   ブレイクポイントは 768px に統一。

   クラス命名: c-（共通コンポーネント）/ p-（ページ固有）/ u-（汎用ユーティリティ）
   のプレフィックスを使い、区切りは常にハイフン1つ（BEMの __ / -- は使わない）。
   見た目のバリエーションは1要素1クラスで完結させ、修飾子クラスの重ね掛けはしない。
   ============================================================ */

/* ---------- 1. CSS変数 ---------- */
:root {
  /* カラー：紙（背景） */
  --color-paper-0: #FFFFFF;
  --color-paper-1: #FFFFFF;
  --color-paper-2: #f7f7f0;
  --color-paper-3: #F8F8FF;

  /* カラー：ウッド（ブランドのオレンジ系アクセント） */
  --color-wood-900: #575757;
  --color-wood-800: #696969;
  --color-wood-700: #FF8C00;
  --color-wood-600: #FFA733;
  --color-wood-500: #FFB84D;

  /* カラー：ゴールド（アンティークゴールドのアクセント） */
  --color-gold-700: #836636;
  --color-gold-600: #9C7B40;
  --color-gold-500: #B6964F;
  --color-gold-400: #C9AE6C;
  --color-gold-200: #E5D7B0;

  /* カラー：グリーン（カテゴリーバッジ用） */
  --color-green-700: #4F7942;
  --color-green-200: #E1EAD9;

  /* カラー：レッド（カテゴリーバッジ用） */
  --color-red-700: #B33A3A;
  --color-red-200: #F5DCDC;

  /* カラー：インク（本文color。純黒は使用しない） */
  --color-ink-900: #131313;
  --color-ink-700: #3e3e3e;
  --color-ink-500: #696969;
  --color-ink-400: #999;
  --color-ink-300: #bbb;
  --color-ink-200: #eee;
  --color-ink-100: #f2f2f2;

  /* カラー：ライン */
  --color-line-hair: #E0D5BD;
  --color-line-soft: #D6C8AC;
  --color-line-gold: rgba(156, 123, 64, 0.45);

  /* カラー：暗色背景上のテキスト（フッター等） */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-mut: #E8E8E8;
  --color-border-on-dark: rgba(255, 255, 255, 0.22);

  /* セマンティックエイリアス */
  --color-bg-page: var(--color-paper-1);
  --color-bg-recessed: var(--color-paper-2);
  --color-surface-card: var(--color-paper-0);
  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: var(--color-ink-500);
  --color-text-muted: var(--color-ink-400);
  --color-accent: var(--color-wood-700);
  --color-link: var(--color-ink-700);
  --color-link-hover: var(--color-wood-500);

  /* フォント */
  --font-mincho-display: 'Zen Old Mincho', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-mincho: 'Shippori Mincho', 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-ui: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  /* 行間（倍数指定） */
  --lh-tight: 1.3;
  --lh-heading: 1.4;
  --lh-body: 1.7;
  --lh-relaxed: 1.75;

  /* 字間 */
  --ls-heading: 0.06em;
  --ls-body: 0.06em;
  --ls-label: 0.22em;

  /* 余白スケール（4/8の倍数のみ使用） */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;

  /* コンテナ幅 */
  --content-max: 1180px;
  --content-medium: 1000px;
  --content-narrow: 720px;

  /* 角丸 */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* 影 */
  --shadow-sm: 0 2px 8px rgba(37, 19, 16, 0.06);
  --shadow-md: 0 6px 22px rgba(37, 19, 16, 0.09);
  --shadow-frame: 0 2px 0 var(--color-paper-0), 0 0 0 1px var(--color-line-soft), 0 14px 36px rgba(37, 19, 16, 0.12);

  /* モーション */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-base: 240ms;

  /* ヘッダー高さ（既定値。SP/PCの実値は sp.css / pc.css で上書き） */
  --header-height: 64px;
}

/* ---------- 2. リセット & ベース要素 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-mincho-display);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-soft);
}

a:hover {
  color: var(--color-link-hover);
}

img {
  display: block;
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

/* ---------- 3. ユーティリティ ---------- */
/* スクリーンリーダー専用テキスト。特定のコンポーネントに属さないため唯一残すユーティリティ */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}