@charset "UTF-8";
/* ============================================================================
fair-base-pc.css ── 生地の森 フェアページ共通スタイル（共通設定＋PC用）
----------------------------------------------------------------------------
・毎月のフェアページ（周年感謝祭・季節フェアなど）で共通利用する土台CSS。
・このファイルには「変数・共通レイアウト・PC表示」をまとめています。
スマートフォン用の上書き（640px以下）は fair-base-sp.css 側にあります。
・すべてのセレクタを .fair-page 配下に限定しているため、
既存サイトのCSSと衝突しにくい構成です。
・クラス名の接頭辞は "fair-" で統一しています。
・色・フォント・余白は 1) 基本設定 のカスタムプロパティで一括変更できます。
・ページ固有の色替え（周年カラーなど）は、最後の
12) ページ個別の上書き にまとめて記述してください。
----------------------------------------------------------------------------
★HTML側の読み込み順について（重要）
必ず「pc → sp」の順に2本読み込んでください。
fair-base-sp.css 内の @media (max-width:640px) は、このファイルと同じ
詳細度（.fair-page や .fair-page 要素セレクタ）で値を上書きしているため、
"後から読み込んだ方が勝つ" というCSSの基本ルールで成立しています。
順序を逆にすると640px以下でPC側の指定が勝ってしまい、
スマホ表示が崩れますのでご注意ください。
----------------------------------------------------------------------------
目次（このファイル内）
1) 基本設定（カラー・フォント・余白）
2) ページ共通レイアウト
2-b) 既存サイトCSSの打ち消し（見出しリセット）
2-c) 目次から飛んだときの着地位置（アンカーオフセット）
3) メインビジュアル／導入文
4) 目次（CONTENTS）
5) セクション見出し
6) 本文・注意書き・強調
7) バナー・画像
8) ボタン
9) カードグリッド（商品・作品・回遊バナー）
9-b) 2カラムレイアウト（PC横並び／SP縦並び）
10) 単品紹介ブロック／結び／フッターナビ
11-a) タブレット〜小さめのPC（840px以下）
12) ページ個別の上書き
----------------------------------------------------------------------------
※スマートフォン（640px以下）の上書きは fair-base-sp.css を参照してください。
----------------------------------------------------------------------------
・!important は、既存サイトの共通CSSに上書きされないための保険です。
単独ページで使う場合は外しても表示は変わりません。
========================================================================== */
/* ============================================================================
1) 基本設定（色・フォント・余白） ※フェアごとの変更はここが中心
========================================================================== */
.fair-page {
/* --- カラー --------------------------------------------------------- */
--fair-color-bg: #ffffff; /* ページ背景（白） */
--fair-color-text: #000000; /* 基本の文字色 */
--fair-color-sub: #666666; /* 補足・注意書き */
--fair-color-accent: #9a0000; /* アクセント（強調・ボタン） */
--fair-color-green: #609f93; /* サブアクセント */
--fair-color-line: #e0dcd6; /* 罫線 */
--fair-color-line-cat: #d8d8d8; /* 日付などとの上下の罫線 */
--fair-color-tint: #faf8f5; /* 淡い背景（目次・強調ボックス） */
/* --- フォント ------------------------------------------------------- */
--fair-font-ja: "Quasimoda", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシックPro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic Medium", "メイリオ", Meiryo, Osaka, sans-serif;
--fair-font-mincho: "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "serif";
--fair-font-en: "Quasimoda","Helvetica Neue",Helvetica,Arial,sans-serif;
--fair-font-en-serif: Georgia, "Times New Roman", Times, "Hiragino Mincho ProN", serif; /* 英字セリフ（h2大見出し・結びタイトル用） */
/* --- 幅・余白 ------------------------------------------------------- */
--fair-width: 800px; /* コンテンツ最大幅（PC表示幅） */
--fair-width-text: 680px; /* 本文の最大幅（長文の読みやすさ用） */
--fair-space-sec: 70px; /* セクション間の余白（PC・上下に取るので実質140px分あきます） */
--fair-space-blk: 36px; /* 文章とバナー・ボタン・カードの間の余白 */
--fair-anchor-offset: 120px; /* 目次から飛んだときの着地位置の余白（★下記2-c参照） */
/* --- 基本設定 ------------------------------------------------------- */
background: var(--fair-color-bg);
color: var(--fair-color-text);
font-family: var(--fair-font-ja);
font-size: 15px;
line-height: 1.8; /* 通常の行間 180% */
letter-spacing: 0.8px; /* 通常の文字間 */
-webkit-text-size-adjust: 100%;
font-feature-settings: "palt"; /* 約物を詰める */
}
/* ============================================================================
2) ページ共通レイアウト
========================================================================== */
.fair-page *,
.fair-page *::before,
.fair-page *::after { box-sizing: border-box; }
.fair-page img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.fair-page p,
.fair-page ul,
.fair-page ol,
.fair-page figure,
.fair-page h1,
.fair-page h2,
.fair-page h3 { margin: 0; padding: 0; }
.fair-page ul,
.fair-page ol { list-style: none; }
.fair-page a { color: inherit; text-decoration: none; }
.fair-page a:hover { opacity: .75; transition: opacity .3s; }
/* 中央寄せの共通コンテナ（セクション・目次・結びで共用）
PCはコンテンツ幅ちょうど800px、SPのみ左右に余白を取ります */
.fair-hero,
.fair-lead,
.fair-toc,
.fair-sec,
.fair-closing,
.fair-footnav {
max-width: var(--fair-width);
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
/* ============================================================================
2-b) 既存サイトCSSの打ち消し（見出しリセット） ★本番環境対策
----------------------------------------------------------------------------
・本番テンプレートの共通CSSが h1〜h4 を要素セレクタや
「.○○ h3」などで装飾している場合の影響を打ち消します。
・ここでいったん初期化し、デザインは下の
「.fair-page h3.fair-subsec__title」形式（クラス＋要素で詳細度を上げた指定）
で再設定しています。
・見出し以外（p・ul など）でも影響が出た場合は、同じ要領で
セレクタをこのブロックに追加してください。
========================================================================== */
.fair-page h1,
.fair-page h2,
.fair-page h3,
.fair-page h4 {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: normal !important;
line-height: inherit !important;
letter-spacing: inherit !important;
color: inherit !important;
text-align: inherit !important;
text-indent: 0 !important;
min-height: 0 !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
}
/* 既存CSSが見出しに付ける装飾（アイコン・罫線など）の打ち消し */
.fair-page h1::before, .fair-page h1::after,
.fair-page h2::before, .fair-page h2::after,
.fair-page h3::before, .fair-page h3::after,
.fair-page h4::before, .fair-page h4::after {
content: none !important;
display: none !important;
}
/* ■必要になったときだけ使う追加リセット
本文・リスト・リンクにも既存CSSの影響が出る場合は、
下のコメントを外してください（見出しと同じ考え方です）。
※有効にすると、クラス側の指定（.fair-txt / .fair-note など）も
「.fair-page p.fair-txt { … !important; }」の形に書き換える必要があります。
.fair-page p,
.fair-page ul,
.fair-page ol,
.fair-page li,
.fair-page figure,
.fair-page dl, .fair-page dt, .fair-page dd {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-align: inherit !important;
list-style: none !important;
}
.fair-page li::before, .fair-page li::after,
.fair-page p::before, .fair-page p::after {
content: none !important;
display: none !important;
}
*/
/* ============================================================================
2-c) 目次から飛んだときの着地位置（アンカーオフセット）
----------------------------------------------------------------------------
・そのまま飛ぶとセクション見出しが画面の上端ギリギリ、または
追従ヘッダーの下に隠れてしまうため、id を持つ要素の手前に余白を確保します。
・余白の量は 1) 基本設定 の --fair-anchor-offset で調整できます。
追従ヘッダーがある場合は「ヘッダーの高さ ＋ 40px」程度が目安です。
・scroll-margin-top に未対応の古いブラウザでは、従来どおりの位置に着地します
（表示崩れは起きません）。
========================================================================== */
.fair-page [id] {
scroll-margin-top: var(--fair-anchor-offset);
}
/* ページ全体をなめらかにスクロールさせたい場合は、下の1行を有効にしてください
html { scroll-behavior: smooth; }
*/
/* ============================================================================
3) メインビジュアル／導入文
========================================================================== */
.fair-hero { padding-top: 0; }
.fair-hero__img { width: 100%; }
/* ページタイトル（h1）＝明朝・文字間2px */
.fair-page h1.fair-hero__title {
margin-top: 32px !important;
font-family: var(--fair-font-mincho) !important;
font-size: 30px !important;
font-weight: normal !important;
line-height: 1.6 !important;
letter-spacing: 1.5px !important;
text-align: center !important;
}
.fair-lead {
margin-top: 45px;
line-height: 2.5;
}
/* 導入のキャッチコピー */
.fair-lead__catch {
font-family: var(--fair-font-mincho);
font-size: 20px;
line-height: 2; /* コラム的な行間 200% */
letter-spacing: 1.1px;
text-align: center;
margin-bottom: 15px!important;
}
/* ============================================================================
4) 目次（CONTENTS）
※セクションを増減するときはHTML側の li を追加・削除するだけで対応できます
========================================================================== */
.fair-toc {
margin-top: 56px;
padding: 36px 120px;
font-family: var(--fair-font-mincho) !important;
}
.fair-page h2.fair-toc__title {
font-family: var(--fair-font-mincho) !important;
font-size: 16px !important;
font-weight: normal !important;
letter-spacing: 2px !important;
text-align: center !important;
margin-bottom: 24px !important;
}
.fair-toc__list {
border-top: 1px solid var(--fair-color-line);
background: var(--fair-color-tint);
}
.fair-toc__item { border-bottom: 1px solid var(--fair-color-line); }
.fair-toc__link {
display: flex;
align-items: baseline;
gap: 20px;
padding: 12px 34px 12px 20px;
position: relative;
}
/* 目次の「↓」印 */
.fair-toc__link::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 6px;
height: 6px;
margin-top: -6px;
border-right: 1px solid var(--fair-color-sub);
border-bottom: 1px solid var(--fair-color-sub);
transform: rotate(45deg);
}
/* 目次ラベル（サブタイトル無し・1行表示・明朝） */
.fair-toc__label {
display: block;
font-family: var(--fair-font-mincho);
font-size: 15px;
letter-spacing: 1.5px;
line-height: 1.6;
}
/* ============================================================================
5) セクション見出し
========================================================================== */
.fair-main { display: block;
padding: 0 50px;
}
/* --- セクションの区切り ------------------------------------------------
番号表記をなくしたぶん、余白でセクションの切り替わりを見せています。
あき幅は 1) 基本設定 の --fair-space-sec で調整できます
（上下に同じ値を取るので、実際のあきは指定値の2倍になります）。 */
.fair-sec {
margin-top: var(--fair-space-sec);
padding-top: var(--fair-space-sec);
}
/* 最初のセクションは目次のすぐ下なので上の余白を詰める */
.fair-main > .fair-sec:first-child {
padding-top: 0;
}
.fair-sec__head {
text-align: center;
margin-bottom: var(--fair-space-blk); /* 見出しと次の要素の余白 */
}
.fair-page h2.fair-sec__title {
font-weight: normal !important;
text-align: center !important;
}
/* 日本語リード（見出しの主表記／明朝） */
.fair-page .fair-sec__title .fair-sec__ja_lead {
display: block;
font-family: var(--fair-font-mincho);
font-size: 26px;
/*letter-spacing: 2px;*/
line-height: 1.5;
}
/* 英字リード（見出しの主表記／セリフ体） */
.fair-page .fair-sec__title .fair-sec__en {
display: block;
font-family: var(--fair-font-en-serif);
font-size: 26px;
/*letter-spacing: 2px;*/
line-height: 1.5;
}
/* 日本語キャッチ（サブタイトル／明朝・英字より小さく強弱をつける） */
.fair-page .fair-sec__title .fair-sec__ja {
display: block;
margin-top: 22px;
font-family: var(--fair-font-mincho);
font-size: 16px;
letter-spacing: 1.5px;
line-height: 1.8;
}
/* 大見出しが1つだけのセクション用（英字サブ無し／統合セクションなど） */
.fair-page .fair-sec__title--single .fair-sec__ja {
margin-top: 0;
font-size: 26px;
}
/* 小見出し（h3）を含むサブブロック */
.fair-subsec {
margin-top: 60px;
padding-top: 48px;
border-top: 1px solid var(--fair-color-line);
}
.fair-page h3.fair-subsec__title {
font-family: var(--fair-font-mincho) !important;
font-size: 24px !important;
font-weight: normal !important;
line-height: 1.6 !important;
letter-spacing: 2px !important;
text-align: center !important;
margin-bottom: 18px !important;
}
/* サブブロック内でバナーが先に来る場合の余白 */
.fair-page .fair-subsec .fair-banner + h3.fair-subsec__title { margin-top: var(--fair-space-blk) !important; }
.fair-subsec__catch {
text-align: center;
font-size: 18px;
margin-bottom: 24px!important;
font-family: var(--fair-font-mincho)
}
/* ============================================================================
6) 本文・注意書き・強調
========================================================================== */
.fair-body {
max-width: var(--fair-width-text);
margin: var(--fair-space-blk) auto 0; /* バナー・カードとの間に余白 */
}
/* コラム的な長文ブロック（行間200％） */
.fair-body--column { line-height: 2; }
.fair-txt {
font-size: 15px;
line-height: inherit;
margin-top: 22px!important;
}
.fair-txt:first-child { margin-top: 0; }
.fair-txt--center { text-align: center; }
.fair-txt--em {
font-family: var(--fair-font-mincho);
font-size: 17px;
letter-spacing: 2px;
}
/* リード用のキャッチ（セクション内） */
.fair-catch {
font-family: var(--fair-font-mincho);
font-size: 18px;
letter-spacing: 2px;
text-align: center;
margin-bottom: 8px;
}
/* 強調（ポイント数・クーポン名など） */
.fair-strong {
font-weight: normal;
color: var(--fair-color-accent);
font-size: 1.3em;
}
/* 強調表示（合計ポイントなど） */
.fair-highlight {
margin: 28px 0!important;
padding: 16px 0px!important;
text-align: center;
font-family: var(--fair-font-en);
font-size: 20px;
letter-spacing: 2px;
color: var(--fair-color-accent);
/*background: var(--fair-color-tint)!important;*/
font-weight: bold;
}
/* 枠付きの強調ボックス（開催日など） */
.fair-highlight--box {
/*border: 1px solid var(--fair-color-accent);*/
background: transparent;
padding: 22px 14px;
}
.fair-highlight__date {
font-family: var(--fair-font-ja);
font-size: 16px;
letter-spacing: 1px;
color: var(--fair-color-text);
line-height: 1.8;
}
.fair-highlight__lead {
margin-top: 8px;
font-family: var(--fair-font-en);
font-size: 24px;
letter-spacing: 3px;
}
/* 開催期間・有効期間 */
.fair-term {
margin: 28px 0!important;
text-align: center;
font-size: 15px;
letter-spacing: 1px;
padding: 8px 0!important;
border-top: 1px solid var(--fair-color-line-cat);
border-bottom: 1px solid var(--fair-color-line-cat);
}
/* 注意書き（小さめ・行間150％） */
.fair-note {
margin-top: 24px!important;
font-size: 12px;
line-height: 1.5;
color: var(--fair-color-sub);
}
.fair-note li { margin-top: 4px; }
/*リノクルールアンコール販売エリア*/
.color-box {
padding: 5px 20px 40px;
margin-top: 35px;
background: #eeeeee;
}
.color-box .fair-body {
margin-bottom: -20px;
}
.color-box li {
padding: 10px 0px;
background: #fff;
}
/* ============================================================================
7) バナー・画像
※文章とバナーがくっつかないよう、上下に余白を持たせています
========================================================================== */
.fair-banner {
text-align: center;
margin-top: var(--fair-space-blk);
margin-bottom: var(--fair-space-blk);
}
.fair-banner img { width: 100%; }
/* セクション見出しの直後にバナーが来る場合は見出し側の余白を優先 */
.fair-sec__head + .fair-banner { margin-top: 0; }
/* 画像をランダムに表示するエリア */
.pickup-list {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
/* ===== メインアイテム（1つ目・大きく目立たせる） ===== */
.pickup-item.main {
flex-direction: row;
align-items: stretch;
}
/* 画像3枚をコラージュ風に配置するエリア */
.pickup-item.main .item-img-collage {
position: relative;
width: 100%;
height: 950px;
}
/* 個別の画像。top / left / width で位置とサイズを調整してください */
.pickup-item.main .item-img-collage img {
position: absolute;
object-fit: cover;
}
/* 画像1：大（基準になるメイン画像） */
.pickup-item.main .img-1 {
top: 0px;
left: 0px;
width: 61%;
height: auto;
}
/* 画像2：中（右上あたりに散らす） */
.pickup-item.main .img-2 {
top: 490px;
right: 0px;
width: 49%;
height: auto;
}
/* 画像3：小（下側に散らす） */
.pickup-item.main .img-3 {
top: 580px;
left: 25px;
width: 44%;
height: auto;
}
/* 画像4： */
.pickup-item.main .img-4 {
top: 200px;
left: 495px;
width: 37%;
height: auto;
}
/* ============================================================================
8) ボタン
========================================================================== */
.fair-btnwrap {
margin-top: 40px!important; /* 直前の文章・注意書きと離して押しやすくする */
margin-bottom: 8px;
text-align: center;
}
.fair-btn {
display: inline-block;
min-width: 300px;
max-width: 100%;
padding: 15px 40px 15px 24px;
border: 1px solid var(--fair-color-text);
background: #ffffff;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
position: relative;
transition: background-color .3s, color .3s, border-color .3s;
}
/* ボタンの「→」 */
.fair-btn::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 6px;
height: 6px;
margin-top: -3px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
}
.fair-btn:hover {
opacity: 0.5 !important;
border: 1px solid var(--fair-color-text);
}
/* 補助的なリンクボタン（アクセントの罫線） */
.fair-btn--line {
border-color: var(--fair-color-accent);
color: var(--fair-color-accent);
}
.fair-btn--line:hover {
background: var(--fair-color-accent);
color: #ffffff;
}
/* ボタン下の小さな注記（※マイページへログイン など） */
.fair-btn__note {
display: block;
margin-top: 10px;
font-size: 12px;
line-height: 1.5;
color: var(--fair-color-sub);
}
/* ============================================================================
9) カードグリッド（商品・作品・回遊バナー）
・fair-cards--2 / --3 で列数を変更
・fair-cards--sprow …… SPで「左に画像・右にテキスト」の横並びにする
・fair-cards--wide …… サムネイルを正方形ではなく元画像比率で表示
========================================================================== */
.fair-cards {
display: grid;
gap: 36px 24px;
margin-top: 44px!important; /* 直前の文章との余白 */
margin-bottom: 8px!important;
}
.fair-cards--2 { grid-template-columns: repeat(2, 1fr); }
.fair-cards--3 { grid-template-columns: repeat(3, 1fr); }
.fair-card__link {
display: block;
width: 90%; /* カードの左右に余白をつくる */
margin: 0 auto;
}
/* サムネイル：正方形（読み込み時のレイアウトずれ防止） */
.fair-card__thumb {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--fair-color-tint);
}
.fair-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 回遊バナーなど、元画像の比率のまま見せたい場合 */
.fair-card__thumb--wide {
aspect-ratio: 3 / 2; /* 600 × 400px 用 */
}
/* 画像の下のテキスト */
.fair-card__text {
display: block;
margin-top: 14px;
font-size: 14px;
line-height: 1.7;
text-align: center;
}
.fair-card__head {
display: block;
margin-top: 16px;
font-family: var(--fair-font-mincho);
font-size: 16px;
letter-spacing: 1.5px;
text-align: center;
}
.fair-card__desc {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.7;
color: var(--fair-color-sub);
text-align: center;
}
/* カード内のリンク表記（「○○を見る →」） */
.fair-card__more {
display: block;
margin-top: 12px;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
text-decoration: underline;
text-underline-offset: 6px;
}
.fair-card__more::after { content: " →"; }
/* ============================================================================
9-b) 2カラムレイアウト（PC横並び／SP縦並び）
※特典やオファーを2つ並べて紹介したいときに使用（各itemの中に
fair-banner・fair-body・fair-note などを自由に組み合わせてください）
========================================================================== */
.fair-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 40px;
margin-top: var(--fair-space-blk);
}
.fair-2col__item {
max-width: var(--fair-width-text);
margin: 0 auto;
}
.fair-2col__item .fair-catch {
margin-top: 8px !important;
}
.fair-2col__item .fair-body {
margin-top: 14px;
text-align: center;
}
.fair-2col__item .fair-highlight {
margin: 14px auto !important;
padding: 5px 0px !important;
width: 300px;
}
.fair-2col__item .fair-highlight .fair-highlight__lead {
font-family: var(--fair-font-mincho)!important;
line-height: 2.5;
}
.fair-2col__item .fair-highlight .fair-highlight__lead span {
font-size: 0.6em;
position: relative;
display: inline-block; /* 横幅をテキストに合わせる */
padding-bottom: 4px; /* テキストと線の間の余白 */
color: initial;
}
.fair-2col__item .fair-highlight .fair-highlight__lead span::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* 中央寄せ */
width: 30px; /* 線の長さ */
height: 1px; /* 線の太さ */
background-color: #666666; /* 線の色 */
border-radius: 2px;
}
.fair-2col__item .fair-note {
text-align: left;
}
/* ============================================================================
10) 単品紹介ブロック／結び／フッターナビ
========================================================================== */
/* --- 単品紹介（PCは画像最大500px幅・中央寄せ） ------------------------- */
.fair-item {
max-width: var(--fair-width-text);
margin: 44px auto 0;
text-align: center;
}
.fair-item__thumb {
max-width: 500px; /* PC表示時の画像幅 */
margin: 0 auto!important;
}
.fair-item__body { margin-top: 26px; } /* 画像とテキストの間 */
.fair-item__label {
font-family: var(--fair-font-en);
font-size: 14px;
letter-spacing: 2px;
color: var(--fair-color-accent);
}
.fair-page h3.fair-item__name {
margin-top: 6px !important;
font-size: 16px !important;
font-weight: normal !important;
line-height: 1.7 !important;
letter-spacing: 1px !important;
text-align: center !important;
}
/* --- 結びのあいさつ ---------------------------------------------------- */
.fair-closing {
margin-top: calc(var(--fair-space-sec) + 20px);
padding-top: 60px;
padding-bottom: 60px;
border-top: 1px solid var(--fair-color-line);
text-align: center;
}
/* 指定どおり85％前後で表示 */
.fair-closing__img {
max-width: 70%;
margin: 0 auto!important;
}
.fair-page h2.fair-closing__title {
margin-top: 40px !important; /* 画像とタイトルの間 */
font-family: var(--fair-font-en-serif) !important;
font-size: 22px !important;
font-weight: normal !important;
letter-spacing: 3px !important;
text-align: center !important;
}
.fair-closing__body {
max-width: var(--fair-width-text);
margin: 28px auto 0;
line-height: 2; /* 結び文は行間200％ */
}
/* --- フッターの回遊導線 ------------------------------------------------ */
.fair-footnav {
padding-top: 24px;
padding-bottom: 70px;
}
.fair-footnav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 28px;
}
.fair-footnav__link {
font-size: 13px;
letter-spacing: 1px;
text-decoration: underline!important;
text-underline-offset: 6px;
}
/* ============================================================================
11-a) タブレット〜小さめのPC（840px以下）
※コンテンツが画面端に付かないよう左右に余白を確保するだけの調整
========================================================================== */
@media screen and (max-width: 840px) {
.fair-hero,
.fair-lead,
.fair-toc,
.fair-sec,
.fair-closing,
.fair-footnav {
padding-left: 20px;
padding-right: 20px;
}
}
/* ============================================================================
12) ページ個別の上書き
※そのフェアだけの調整（周年カラーなど）はここに追記してください。
例）21周年感謝祭のみアクセントを変更する場合
.fair-page { --fair-color-accent: #9a0000; }
※SPだけに反映したい個別調整は fair-base-sp.css の末尾に追記してください。
========================================================================== */