/*
 * components.css
 * UI部品（カード・ボタン・フィルター・タグ・バナー等）のスタイル
 */

/* ── ボタン ───────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
    min-height: 44px; /* タップ領域最低44px確保 */
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px);
}

/* プライマリ（赤・CTA） */
.btn--primary {
    background-color: var(--color-action);
    border-color:     var(--color-action);
    color:            var(--color-action-text);
    box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
    background-color: var(--color-action-hover);
    border-color:     var(--color-action-hover);
    color:            var(--color-action-text);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(217, 54, 27, 0.40);
}

/* アウトライン */
.btn--outline {
    background-color: transparent;
    border-color:     var(--color-text-on-dark);
    color:            var(--color-text-on-dark);
}

.btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
    color: var(--color-text-on-dark);
}

/* ゴースト（薄い）*/
.btn--ghost {
    background-color: rgba(0, 0, 0, 0.05);
    border-color:     var(--color-border);
    color:            var(--color-text-sub);
}

.btn--ghost:hover {
    background-color: rgba(0, 0, 0, 0.10);
    text-decoration: none;
    color: var(--color-text);
}

/* 大サイズ */
.btn--lg {
    padding: var(--space-md) var(--space-xl);
    font-size: 1.1rem;
}

/* ── SNSフォローボタン ──────────────────────────── */
.footer-sns__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    min-height: 44px;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.footer-sns__btn:hover {
    opacity: 0.85;
    text-decoration: none;
    transform: translateY(-1px);
}

.footer-sns__btn--x {
    background-color: #000000;
    color: #FFFFFF;
}

.footer-sns__btn--instagram {
    background: linear-gradient(135deg, #e1306c, #833ab4);
    color: #FFFFFF;
}

/* ── 商品カード ───────────────────────────────────── */
.product-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* 商品画像 */
.product-card__img-link {
    display: block;
    position: relative;
    flex-shrink: 0;
}

.product-card__img-wrap {
    aspect-ratio: 1 / 1; /* 縦横比を1:1に固定 */
    overflow: hidden;
    background-color: var(--color-bg-cream);
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.product-card:hover .product-card__img {
    transform: scale(1.03);
}

.product-card__img--placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-border-light);
}

/* バッジ */
.product-card__badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    background-color: var(--color-festival-gold);
    color: var(--color-festival-navy);
}

/* カード本文 */
.product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    flex: 1;
}

.product-card__catch {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    line-height: 1.5;
    /* 長文は基本そのまま見せる方針。保険として8行を超えたら省略（…） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

.product-card__name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    /* タイトルも長め許容。保険として4行で省略（…） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* ── カード文中の装飾クラス一覧 ─────────────────────────────
   items.json の card_catch / card_name 内で使う。例：
   <strong class="card-accent">冷凍いちご</strong>
     card-accent … 赤太字（いちばん目立たせたい語）
     card-bold   … 黒太字
     card-blue   … 青太字
     card-mark   … 黄色マーカー＋黒太字
     card-big    … 少し大きく
     card-small  … 少し小さく
     card-strike … 打ち消し線
     card-faint  … 薄く（補足・小声）
   ─────────────────────────────────────────────────────── */
.card-accent { color: var(--festival-red); font-weight: 800; }
.card-bold   { color: var(--color-text);   font-weight: 800; }
.card-blue   { color: #1565c0;             font-weight: 800; }
.card-mark   { background: linear-gradient(transparent 45%, #ffe34d 45%); color: var(--color-text); font-weight: 800; }
.card-big    { font-size: 1.2em; }
.card-small  { font-size: 0.85em; }
.card-strike { text-decoration: line-through; }
.card-faint  { opacity: 0.6; }

.product-card__name a {
    color: var(--color-text);
}

.product-card__name a:hover {
    color: var(--color-action);
    text-decoration: none;
}

.product-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-action);
}

.product-card__humor {
    font-size: 0.8rem;
    color: var(--color-text-sub);
    font-style: italic;
    border-left: 3px solid var(--color-festival-gold);
    padding-left: var(--space-sm);
    line-height: 1.5;
}

.product-card__btn {
    margin-top: auto; /* ボタンを常に下部に押し込む */
    width: 100%;
}

/* 大カード修飾子（体験ギフト・旅行ページで使用）
   小カード(1:1)に対して横長画像(3:2)で世界観を訴求する */
.product-card--wide .product-card__img-wrap {
    aspect-ratio: 3 / 2;
}

/* 商品説明テキスト（大カードのみ表示・2行で切り捨て） */
.product-card__desc {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 商品個別ページ ──────────────────────────────── */
.product-detail__img-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg-cream);
    aspect-ratio: 1 / 1;
}

.product-detail__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail__img--placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-border-light);
}

.product-detail__info-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.product-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.product-detail__catch {
    font-size: 1rem;
    color: var(--color-text-sub);
    line-height: 1.6;
}

.product-detail__name {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.product-detail__humor {
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-cream);
    border-left: 4px solid var(--color-festival-gold);
    font-style: italic;
    color: var(--color-text-sub);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.product-detail__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-action);
}

.product-detail__source {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-sub);
}

.product-detail__description {
    line-height: 1.9;
    color: var(--color-text);
}

.product-detail__btn {
    width: 100%;
}

.product-detail__notice,
.product-detail__affiliate-note {
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

/* ── タグ ─────────────────────────────────────────── */
.tag {
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    font-size: 0.75rem;
    border-radius: var(--radius-full);
    line-height: 1.4;
    font-weight: 500;
}

.tag--genre {
    background-color: rgba(232, 163, 32, 0.15);
    color: #7A5A00; /* コントラスト比確保のためダーク系 */
    border: 1px solid rgba(232, 163, 32, 0.4);
}

.tag--scene {
    background-color: rgba(26, 47, 94, 0.10);
    color: var(--color-festival-navy);
    border: 1px solid rgba(26, 47, 94, 0.3);
}

.tag--season {
    background-color: rgba(76, 175, 125, 0.14);
    color: #2f6b4d;
    border: 1px solid rgba(76, 175, 125, 0.4);
}

/* ── 記事本文（items.json の body ブロック描画）─────────────
   商品詳細ページで見出し・段落・本文中画像を組む。 */
.article-body {
    line-height: 1.95;
    color: var(--color-text);
}
.article-body__h2 {
    font-size: clamp(1.15rem, 3.4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.4;
    margin: 1.8em 0 0.6em;
    padding-left: 0.6em;
    border-left: 6px solid var(--festival-red);
}
.article-body__h2:first-child { margin-top: 0.2em; }
.article-body__p {
    margin: 0 0 1.1em;
}
.article-body__figure {
    margin: 1.4em 0;
    text-align: center;
}
.article-body__img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.article-body__caption {
    margin-top: 0.5em;
    font-size: 0.8rem;
    color: var(--color-text-sub);
}

/* 価格が無い（変動する）商品の表示 */
.product-detail__price--ask {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-sub);
}

/* ASP提供バナー（A8の300×250等）を中央に置く枠 */
.product-detail__banner {
    margin: 1.4em 0;
    text-align: center;
}
.product-detail__banner img {
    max-width: 100%;
    height: auto;
}

/* ── ASPバナーの拡大表示 .afi-scale ──────────────────────────
   タグ（<a><img>…）は一切編集せず、外側から見た目のサイズだけ大きくする。
   ・--afi-scale で倍率を指定（既定1.6倍 ≒ 300px→480px）
   ・バナー全体を保ったまま拡大する（切り抜き＝クロップはしない）
     ※クロップはロゴや訴求文を隠すことになり、ASP／広告主の規約に
       抵触するおそれがあるため、このサイトでは行わない方針。
   ・<a> の外にある1×1の計測gifには影響しない（a img だけを対象）
   ──────────────────────────────────────────────────────── */
.afi-scale a img {
    width: min(100%, calc(300px * var(--afi-scale, 1.6)));
    height: auto;
}

/* 記事本文の途中に置くASPバナー */
.article-body__banner {
    margin: 1.7em 0;
    text-align: center;
}
.article-body__banner img {
    max-width: 100%;
    height: auto;
}

/* ── 絞り込みUI ───────────────────────────────────── */
.filter-section {
    background-color: var(--color-bg-cream);
    padding-block: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.filter__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* フィルタの見出し（ジャンル/シーン/季節/エリア/種類）を楽しく。
   先頭にぴょこぴょこ跳ねる✨を付け、色も祭りカラーに */
.filter__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--festival-red);
    letter-spacing: 0.04em;
}
.filter__label::before {
    content: "✨";
    display: inline-block;
    font-size: 0.9em;
    animation: filterLabelBounce 1.4s ease-in-out infinite;
}
@keyframes filterLabelBounce {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-3px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .filter__label::before { animation: none; }
}

.filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.filter__btn {
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    min-height: 36px;
    color: var(--color-text);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.filter__btn:hover,
.filter__btn.is-active {
    background-color: var(--color-festival-navy);
    border-color:     var(--color-festival-navy);
    color:            var(--color-text-on-dark);
}

/* ── 商品件数表示 ────────────────────────────────── */
/* 件数表示：記事がまだ少ないので当面は非表示（将来は表示するかも）。
   要素は残す（aria-live で件数は保持）ので、表示したくなったら display を戻すだけ */
.products-count {
    display: none;
    font-size: 0.9rem;
    color: var(--color-text-sub);
    margin-bottom: var(--space-lg);
}

.products-empty,
.timeline__empty,
.features-empty {
    text-align: center;
    color: var(--color-text-sub);
    padding-block: var(--space-2xl);
}

/* ── SNS埋め込みカード（ファサード） ──────────────── */
.embed-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* 賑やかな背景から浮かせるため軽くシャドウ */
    box-shadow: var(--shadow-card);
    /* CLS防止：初期高さを予約（展開後にautoになる） */
    min-height: 120px;
}

.embed-card__facade {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ── 記事ページ（1カラム）用 ──────────────────────────────────── */
/* リード画像（image_main）。全幅にせず中央に置く */
.product-detail__visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}
.product-detail__visual .product-detail__img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* CTAボタンは幅を絞って中央に */
.product-detail__btn {
    max-width: 480px;
    margin-inline: auto;
}

/* パンくず直下のプロモーション表記：行の高さ0で右端に浮かせる
   （グロメニュー〜記事コンテナ間の距離を変えないため）。
   記事コンテナ(.product-detail max-width:860px)と同じ幅に絞って
   右端を記事の右端に揃える */
.item-pr-row {
    position: relative;
    height: 0;
    max-width: 860px;
    margin-inline: auto;
}
/* TOPページ用：コンテンツ全幅（タイムライン＋サイドバー）の右端に揃える。
   content-max に絞ることで、右端がサイドバー右端とぴったり一致する
   （max-width:none だと .container の制限を外して窓の端まで行ってしまう） */
.item-pr-row--wide {
    max-width: var(--content-max);
}
.item-pr-note {
    position: absolute;
    right: 0;
    top: 2px;   /* 記事ページ：パンくず直下＝記事枠の外側上に出す（枠の位置は不変） */
    margin: 0;
    text-align: right;
}
/* TOPページ（--wide）だけ、右端をサイドバー中央あたりへ寄せ、縦位置は従来のまま */
.item-pr-row--wide .item-pr-note {
    right: 33px;
    top: 32px;
}

/* ══════════════════════════════════════════════════════════════
   「へぇ〜ええやん！」ボタン（いいね）と演出
   カウントはサーバー共通、押した記録は端末ごと（heee.js 参照）
   ══════════════════════════════════════════════════════════════ */
.heee-wrap {
    text-align: center;
    padding-top: var(--space-xs);
}
.heee-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1.3em;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 800;
    color: #7a3c1d;
    background: linear-gradient(180deg, #fffdf3 0%, #ffe9c4 100%);
    border: 2px solid var(--festival-red);
    border-bottom-width: 4px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.heee-btn:hover {
    box-shadow: 0 4px 12px rgba(226, 84, 58, 0.35);
    /* 「押して！」と誘うように、ぷるぷる弾み続ける */
    animation: heeeInvite 0.6s ease-in-out infinite;
}
/* ハートもホバー中はドキドキ拍動 */
.heee-btn:hover .heee-btn__icon {
    animation: heeeHeartBeat 0.6s ease-in-out infinite;
}
@keyframes heeeInvite {
    0%, 100% { transform: translateY(0) rotate(0); }
    30%      { transform: translateY(-4px) rotate(-3deg); }
    60%      { transform: translateY(-1px) rotate(3deg); }
}
@keyframes heeeHeartBeat {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.3); }
    50%      { transform: scale(1.05); }
    70%      { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
    .heee-btn:hover,
    .heee-btn:hover .heee-btn__icon { animation: none; }
}
/* ハートアイコンは大きめに（ハートと分かるように） */
.heee-btn__icon {
    font-size: 1.35em;
    line-height: 1;
}
/* カウント表示（現在は非表示運用。3〜4桁でもボタンが横に伸びるだけで崩れない） */
.heee-btn__count {
    min-width: 1.6em;
    padding: 0.05em 0.5em;
    background: var(--festival-red);
    color: #fff;
    border-radius: 999px;
    font-size: 0.85em;
    white-space: nowrap;
}
/* カウント非表示指定（config の HEEE_SHOW_COUNT=false のとき付く）。
   数字はサーバー(likes.json)に貯まり続ける。表示したくなったら config を true に */
.heee--nocount .heee-btn__count {
    display: none;
}
/* 押済み：うっすら達成感 */
.heee-btn.is-liked {
    background: linear-gradient(180deg, #ffe9c4 0%, #ffd9a0 100%);
}

/* ── 小型版（タイムラインカードの右上に置く。少し大きめに）──── */
.embed-card--sns,
.embed-card--html {
    position: relative;   /* ミニボタンの配置基準 */
}
.heee-wrap--mini {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 0;
    z-index: 2;           /* 埋め込みより前面 */
}
.heee-btn--mini {
    font-size: 0.9rem;
    padding: 0.4em 1em;
    gap: 0.35em;
}
.heee-btn--mini .heee-btn__icon {
    font-size: 1.45em;
}
/* クリック時のぷるん（heee.js が付け直す） */
.heee-btn.is-pop {
    animation: heeeBtnPop 0.45s ease;
}
@keyframes heeeBtnPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.25) rotate(-4deg); }
    65%  { transform: scale(0.92) rotate(3deg); }
    100% { transform: scale(1); }
}

/* ── 演出オーバーレイ（クリック時に body 直下へ追加→自動削除）── */
.heee-fx {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;   /* 下のページ操作を妨げない */
}
/* 太鼓連打（ヒーローと同じ2枚を高速交互＝叩いているように見せる） */
.heee-fx__taiko {
    position: relative;
    width: min(46vw, 260px);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
    animation: heeeTaikoIn 1.6s ease both;
}
.heee-fx__taiko img {
    display: block;
    width: 100%;
    height: auto;
}
.heee-fx__pose-b {
    position: absolute;
    inset: 0;
}
.heee-fx__pose-a { animation: heeeFlipA 0.24s steps(1) infinite; }
.heee-fx__pose-b { animation: heeeFlipB 0.24s steps(1) infinite; }
@keyframes heeeFlipA { 0%,49.9%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes heeeFlipB { 0%,49.9%{opacity:0;} 50%,100%{opacity:1;} }

/* ドン（音の表現）を単体で大きく出す演出 */
.heee-fx__don-solo {
    width: min(56vw, 320px);
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
    animation: heeeDonSolo 1.6s ease both;
}
@keyframes heeeDonSolo {
    0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
    14%  { transform: scale(1.3) rotate(4deg);   opacity: 1; }
    26%  { transform: scale(1) rotate(-2deg);    opacity: 1; }
    78%  { transform: scale(1) rotate(0);        opacity: 1; }
    100% { transform: scale(1.12);               opacity: 0; }
}

/* 大吉画像：普通→ちょっと大きく→普通→ちょっと大きく */
.heee-fx__daikichi {
    width: min(60vw, 340px);
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
    animation: heeeDaikichi 1.6s ease both;
}
@keyframes heeeDaikichi {
    0%   { transform: scale(0.4); opacity: 0; }
    12%  { transform: scale(1);   opacity: 1; }
    32%  { transform: scale(1.12); }           /* ちょっと大きく */
    50%  { transform: scale(1); }              /* 普通 */
    68%  { transform: scale(1.12); }           /* もう一回大きく */
    84%  { transform: scale(1); }              /* 普通 */
    100% { transform: scale(1); opacity: 0; }
}
@keyframes heeeTaikoIn {
    0%   { transform: scale(0.3);  opacity: 0; }
    12%  { transform: scale(1.1);  opacity: 1; }
    22%  { transform: scale(1);    opacity: 1; }
    80%  { transform: scale(1);    opacity: 1; }
    100% { transform: scale(0.85); opacity: 0; }
}
/* ランダム文字（大吉！など）。太鼓の上でドンと出る */
.heee-fx__text {
    position: absolute;
    top: 24%;
    left: 0; right: 0;
    text-align: center;
    font-weight: 900;
    font-size: clamp(2.2rem, 9vw, 4.5rem);
    color: #fff;
    letter-spacing: 0.06em;
    text-shadow:
        -4px -4px 0 var(--festival-red),  4px -4px 0 var(--festival-red),
        -4px  4px 0 var(--festival-red),  4px  4px 0 var(--festival-red),
         0    6px 14px rgba(0, 0, 0, 0.4);
    animation: heeeTextPop 1.6s ease both;
}
@keyframes heeeTextPop {
    0%   { transform: scale(0) rotate(-12deg);   opacity: 0; }
    14%  { transform: scale(1.35) rotate(3deg);  opacity: 1; }
    26%  { transform: scale(1) rotate(-1deg);    opacity: 1; }
    78%  { transform: scale(1);                  opacity: 1; }
    100% { transform: scale(1.1) translateY(-20px); opacity: 0; }
}
/* キャンセル（へぇ〜解除）時の「サッ…」（仮。後日画像に差し替え可） */
.heee-fx__cancel {
    font-size: clamp(1.6rem, 6vw, 3rem);
    font-weight: 900;
    color: #7a8699;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    animation: heeeCancel 0.9s ease-in both;
}
@keyframes heeeCancel {
    0%   { transform: translateX(-20px) scale(1);   opacity: 0; }
    20%  { transform: translateX(0) scale(1);        opacity: 1; }
    100% { transform: translateX(160px) scale(0.7);  opacity: 0; }
}
/* へぇ〜解除時の悲しい顔画像（30%の確率で出る。heee.js の SAD_CHANCE 参照） */
.heee-fx__sad {
    width: min(40vw, 220px);
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3));
    animation: heeeSad 1.3s ease both;
}
@keyframes heeeSad {
    0%   { transform: scale(0.6) translateY(10px); opacity: 0; }
    18%  { transform: scale(1) translateY(0);      opacity: 1; }
    80%  { transform: scale(1) translateY(0);      opacity: 1; }
    100% { transform: scale(0.95) translateY(6px); opacity: 0; }
}

/* サイドバーPR枠のバナーを中央寄せ（縦長スカイスクレイパー等） */
.sidebar__section .timeline-ad,
.sidebar__section .timeline-ad__banner {
    text-align: center;
}
/* サイドバー内のPR広告は、外側の .sidebar__section が既に枠なので
   広告自身の embed-card 由来の枠（枠線・影・背景・余白）を消して二重枠をなくす。 */
.sidebar__section .timeline-ad {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
    min-height: 0;
    overflow: visible;
}
/* 広告バナーの中央寄せ。
   reset.css で img { display:block } にしているため、画像はブロック要素になり
   親の text-align:center では中央に来ない（text-align はインライン要素専用）。
   そこで <a> をブロック化し、画像自身を margin-inline:auto で中央へ寄せる。 */
.sidebar__section .timeline-ad__banner a {
    display: block;
}
.sidebar__section .timeline-ad__banner img,
.sidebar__section .timeline-ad__img {
    margin-inline: auto;
}
/* サイドバーPRは見出しに「📢 PR」があるので、広告右上の「広告」ラベルは重複＝非表示。
   （タイムライン内の広告では見出しが無いのでラベルは残す＝この打ち消しはサイドバー限定） */
.sidebar__section .timeline-ad__label {
    display: none;
}

/* ── ページ先頭へ戻るボタン（右下に固定・スクロールで出現） ──────── */
.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    /* 祭りの赤＋白フチ：紺のフッター・昼のクリーム・夜の黒、どの背景でも沈まない
       （テーマ別に分けたくなったら body.theme-day / body.theme-night で上書きする） */
    border: 3px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: var(--festival-red);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    z-index: 900;
    /* 初期は非表示。JS が .is-visible を付けたらふわっと出す */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.scroll-top.is-visible {
    opacity: 0.92;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top:hover {
    background: #f28c1e;   /* 橙（ホバー時。ユーザー好み） */
    color: #fff;
    opacity: 1;
}
/* スマホは篝火（body::after）が非表示なので邪魔にならない。少し小さめに */
@media (max-width: 600px) {
    .scroll-top { width: 44px; height: 44px; right: 14px; bottom: 14px; }
}

/* 紙吹雪（中央から放射状に飛ぶ。方向は JS が --tx / --ty で指定） */
.heee-confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: heeeConfetti var(--dur, 1.2s) ease-out both;
}
@keyframes heeeConfetti {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx, 0), calc(var(--ty, 0) + 160px)) rotate(660deg) scale(0.6); opacity: 0; }
}

/* ── 記事下の関連記事（タグ一致から自動選出） ─────────────────── */
.related-items {
    padding-block: var(--space-xl) 0;
}
.related-items__grid {
    margin-top: var(--space-md);
}
/* 関連記事はカード小さめでOKなのでPCは4列のまま
   （.products-grid の3列指定より詳細度を上げて上書き） */
@media (min-width: 1024px) {
    .products-grid.related-items__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── 特集ページ：シーン指定時の「このシーンの記事」見出し ──────── */
.feature-scene-items__heading {
    margin-top: var(--space-2xl);
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
}

/* ── 特集詳細：一覧へ戻るボタン（テキストリンクより目立たせる） ──── */
.back-link__btn {
    display: block;
    max-width: 320px;
    margin-inline: auto;
    text-align: center;
}

/* エリアの選択肢はボタンが多く縦に伸びやすいので、少し小さくして詰める */
.filter__group--region .filter__btn {
    font-size: 0.78rem;
    padding: 0.3em 0.7em;
}

/* おでかけページ用：フィルタ4グループを1行に並べる。
   幅の配分は どうする？20％・季節20％・どこ行く？30％・目的30％
   （ボタンが増えないグループを狭く、増えるグループを広く。
     どこ行く？が北九州/南九州などで増えたら 1.5fr の数字を大きくして調整）。
   グループの並び順は odekake.php の $filterGroups で指定（genre→season→region→scene）。
   ※セレクタを .filter.filter--grid4 と2重にして詳細度を上げている。
     後から読み込まれる layout.css の .filter { display:flex } に負けないため */
@media (min-width: 768px) {
    .filter.filter--grid4 {
        display: grid;
        /* 幅の配分：どうする？16% / 季節13% / どこ行く？40% / 目的31%
           （見出しやボタンが折り返さないよう微調整中。どこ行く？が増えたら 40 を大きくして再調整） */
        grid-template-columns: minmax(0, 16fr) minmax(0, 13fr) minmax(0, 40fr) minmax(0, 31fr);
        column-gap: var(--space-lg);
        row-gap: var(--space-md);
        align-items: start;
    }
    /* layout.css（1024px〜）の .filter__group { min-width:200px } が
       狭い列を押し広げてしまうので、grid内では解除する。
       縦積み用の「2個目以降に margin-top」も解除（1行配置で先頭だけ上にズレる原因） */
    .filter.filter--grid4 .filter__group {
        min-width: 0;
    }
    .filter.filter--grid4 .filter__group + .filter__group {
        margin-top: 0;
    }
}

/* ── 広告カード内の横スライドショー（SUZURI自社グッズ等）──────────
   ads.json の html でこう書くと、中身が自動で横に流れ続ける：
     <div class="ad-slider"><div class="ad-slider__track">（同じ一式を2回並べる）</div></div>
   ・同じ一式を2回並べる＝半分動いた所で先頭に戻るとつながって見える（無限ループ）
   ・マウスを乗せると一時停止（クリックしやすいように）
   ・「動きを減らす」設定の人には流さず、手で横スクロールできる形にする */
.ad-slider {
    overflow: hidden;
    max-width: 100%;
}
.ad-slider__track {
    display: flex;
    width: max-content;
    animation: adSlide 30s linear infinite;
}
.ad-slider__track > * {
    flex: 0 0 auto;
    margin-right: 14px;   /* カード間の隙間（gapではなくmarginにして -50% でぴったりループさせる） */
}
.ad-slider:hover .ad-slider__track {
    animation-play-state: paused;
}
@keyframes adSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ad-slider { overflow-x: auto; }
    .ad-slider__track { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   無限スクロール（infinite-scroll.js）
   ══════════════════════════════════════════════════════════════ */
/* まだスクロールが届いていないカード（JSが付与。JS無効なら全件表示） */
.is-deferred {
    display: none !important;
}
/* 追加読み込みの番兵（見えないが、ここに近づくと次が表示される） */
.scroll-sentinel {
    height: 1px;
}

/* ══════════════════════════════════════════════════════════════
   一覧ページ上部の絞り込みパネル（折りたたみ式 <details>）
   初期状態は閉じ。開くと中の .filter（layout.css 側で横並び）が出る。
   ══════════════════════════════════════════════════════════════ */
.filter-panel {
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

/* 開閉バー */
.filter-panel__summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;              /* タップ領域を確保 */
    font-weight: 700;
    cursor: pointer;
    list-style: none;              /* 既定の三角マーカーを消す */
    user-select: none;
}
.filter-panel__summary::-webkit-details-marker { display: none; }

/* 右端の開閉アイコン（開くと反転） */
.filter-panel__summary::after {
    content: '▼';
    font-size: 0.75em;
    color: var(--color-text-sub);
    transition: transform var(--transition-fast);
}
.filter-panel[open] .filter-panel__summary::after {
    transform: rotate(180deg);
}

.filter-panel__hint {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-text-sub);
}
.filter-panel[open] .filter-panel__hint { visibility: hidden; }

.filter-panel__body {
    padding: 0 var(--space-md) var(--space-md);
}

/* 「すべて」ボタン（data-filter-value が空）はその行を横幅いっぱいに使う */
.filter__options .filter__btn[data-filter-value=""] {
    flex-basis: 100%;
}

/* 絞り込みグループを、種類ごとに淡い背景色のブロックにして
   「どこからどこまでが1つのフィルタか」を見た目で分かりやすくする */
.filter__group {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.filter__group + .filter__group { margin-top: var(--space-sm); }
.filter__group--genre  { background: rgba(232, 169, 32, 0.10); }   /* 山吹 */
.filter__group--scene  { background: rgba(226, 84, 58, 0.08); }    /* 朱 */
.filter__group--season { background: rgba(76, 175, 125, 0.10); }   /* 緑 */
.filter__group--region { background: rgba(59, 165, 216, 0.10); }   /* 空色 */

/* ── タイムラインのツールバー（「へぇ〜したものだけ」トグル）─── */
.timeline-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-md);
}
.heee-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.4em 1em;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-sub);
    background: var(--color-bg);
    border: 4px solid var(--color-festival-navy);  /* 太く・濃くして目立たせる */
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.heee-filter-toggle:hover { border-color: var(--festival-red); }
.heee-filter-toggle.is-on {
    color: #fff;
    background: var(--festival-red);
    border-color: var(--festival-red);
}

/* ══════════════════════════════════════════════════════════════
   カードサムネイルにASPの画像アフィリタグをそのまま使う場合（.afi-thumb）
   ・タグは編集しない。<a> はタグ自身が持つので、詳細ページの <a> では包まない
   ・切り抜かず、カード幅いっぱいに“全体”を表示する
   ・<a> の外にある1×1の計測gifはレイアウトに影響させない
   ══════════════════════════════════════════════════════════════ */
/* 1:1（.product-card__img-wrap）と 3:2（.product-card--wide .product-card__img-wrap）の
   固定比率を両方とも解除する。後者は詳細度(0,2,0)なので同等以上で上書きする */
.product-card .product-card__img-wrap--afi,
.product-card--wide .product-card__img-wrap--afi {
    aspect-ratio: auto;
    height: auto;
}
.afi-thumb {
    position: relative;            /* PICKUPバッジの基準 */
    display: block;
    line-height: 0;                /* 画像下の余白を消す */
}
.afi-thumb a {
    display: block;
}
.afi-thumb a img {
    width: 100%;
    height: auto;
    display: block;
}
.afi-thumb > img {                 /* 1×1 の計測gif */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── SNS / 生HTML 埋め込みカード ─────────────────────────────────
   コメントと埋め込みを同じ幅の内側ボックス（.embed-card__inner）に入れて
   中央寄せする。コメントはその中で左揃え＝埋め込み（X等）の左端に揃う。 */
.embed-card--sns,
.embed-card--html {
    padding: var(--space-md);
}
/* Xの標準幅に合わせた内側ボックス（これを中央に置く） */
.embed-card__inner {
    max-width: 550px;
    margin-inline: auto;
}
/* 生HTML埋め込み（楽天/campfire/suzuri等）は画像を大きく見せたいので広め */
.embed-card--html .embed-card__inner {
    max-width: 700px;
}
.embed-card--sns .embed-card__comment,
.embed-card--html .embed-card__comment {
    margin: 0 0 var(--space-sm);
    font-weight: 700;
    line-height: 1.6;
    text-align: left;      /* 左揃え（内側ボックス＝埋め込みの左端基準） */
    padding-right: 6em;    /* 右上のへぇ〜ボタンとの間に余白（かぶり防止＋ボタン左の間） */
}
/* CAMPFIRE/SUZURI等の生HTMLカードは、Xより一言の左右余白を均等寄りに。
   左に少しマージンを足し、右は空きすぎないよう詰める（へぇ〜ボタン分だけ少し確保）*/
.embed-card--html .embed-card__comment {
    padding-left: 3em;
    padding-right: 3.5em;
}

/* 引用元ラベル（CAMPFIRE / SUZURI / 楽天 など。Xは付けない）。
   カード上部の帯として、左〜中央だけ色をのせ（右はカードの白に溶ける）オシャレに。
   負のマージンでカード端まで広げ、overflow:hidden の角丸で自然にクリップされる */
.embed-card__source {
    display: block;
    margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm);
    padding: 0.5em 6em 0.5em var(--space-md);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--src-text, #555);
    background: linear-gradient(90deg,
        var(--src-a, rgba(120, 120, 120, 0.22)) 0%,
        var(--src-b, rgba(120, 120, 120, 0.10)) 24%,
        rgba(255, 255, 255, 0) 52%);
}
.embed-card__source--campfire { --src-text: #c24a10; --src-a: rgba(232, 93, 26, 0.30); --src-b: rgba(232, 93, 26, 0.13); }
.embed-card__source--suzuri   { --src-text: #0b7d7d; --src-a: rgba(17, 160, 160, 0.30); --src-b: rgba(17, 160, 160, 0.13); }
.embed-card__source--booth    { --src-text: #b23a6b; --src-a: rgba(252, 76, 130, 0.28); --src-b: rgba(252, 76, 130, 0.12); }
.embed-card__source--rakuten  { --src-text: #b00000; --src-a: rgba(191, 0, 0, 0.22);  --src-b: rgba(191, 0, 0, 0.10); }
.embed-card__source--amazon   { --src-text: #b25900; --src-a: rgba(255, 153, 0, 0.30); --src-b: rgba(255, 153, 0, 0.13); }
.embed-card__source--youtube  { --src-text: #c00000; --src-a: rgba(255, 0, 0, 0.20);   --src-b: rgba(255, 0, 0, 0.08); }
.embed-card__source--note     { --src-text: #158a6f; --src-a: rgba(0, 170, 140, 0.24); --src-b: rgba(0, 170, 140, 0.10); }
.embed-card__embed {
    display: flex;
    justify-content: center;
    /* zoom で拡大した埋め込みが幅を超えたら、レイアウトを壊さず横スクロールに逃がす */
    max-width: 100%;
    overflow-x: auto;
}
/* X埋め込みは中央寄せ */
.embed-card__embed .twitter-tweet {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* 楽天/Amazon/iframe等がはみ出さないように */
.embed-card__embed img,
.embed-card__embed iframe {
    max-width: 100%;
}

/* ── タイムライン内の広告ボックス（N件おきに挿入）───────────── */
.timeline-ad {
    position: relative;
    padding: var(--space-md);
    text-align: center;
    min-height: 0; /* embed-card の min-height:120px を打ち消す */
}
.timeline-ad__label {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.62rem;
    color: var(--color-text-sub);
    background: rgba(0, 0, 0, 0.06);
    border-radius: 3px;
    padding: 1px 6px;
    letter-spacing: 0.05em;
}
.timeline-ad__banner img,
.timeline-ad__img {
    max-width: 100%;
    height: auto;
}
.timeline-ad__placeholder {
    padding: var(--space-lg) var(--space-md);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-sub);
}
.timeline-ad__title { font-weight: 700; margin-bottom: 0.3em; }
.timeline-ad__text  { font-size: 0.85rem; }

.embed-card__facade-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.embed-card__platform-badge {
    display: inline-block;
    padding: var(--space-2xs) var(--space-sm);
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--color-bg-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-sub);
}

/* 投稿のトピック見出し（facade_text） */
.embed-card__headline {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-text);
}

/* ファサードサムネイル画像 */
.embed-card__thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.embed-card__comment {
    font-size: 1.02rem;   /* 0.95→1.02：ほんの少しだけ大きく */
    line-height: 1.7;
    color: var(--color-text);
}

.embed-card__load-btn {
    align-self: flex-start;
}

.embed-card__unavailable {
    font-size: 0.85rem;
    color: var(--color-text-sub);
}

/* 埋め込みウィジェットの崩れ防止 */
.embed-card__placeholder {
    max-width: 100%;
    overflow: hidden;
}

.embed-card__placeholder iframe,
.embed-card__placeholder blockquote {
    max-width: 100% !important;
    width: 100% !important;
}

/* ── シーンバナー ─────────────────────────────────── */
.scene-banner {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.scene-banner__link {
    display: block;
    text-decoration: none;
}

.scene-banner__inner {
    position: relative;
    min-height: 160px;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .scene-banner__inner {
        min-height: 200px;
    }
}

/* 背景画像（CSS変数で差し替え可） */
.scene-banner__bg {
    position: absolute;
    inset: 0;
    background-image: var(--banner-img, none);
    background-size: cover;
    background-position: center;
    background-color: var(--color-festival-navy); /* 画像未設定時の代替 */
}

.scene-banner__bg--placeholder {
    background: linear-gradient(135deg, var(--color-festival-navy), var(--color-festival-red));
}

/* テキストエリア：半透明下地で可読性を確保（チラシ組版の定石） */
.scene-banner__text {
    position: relative;
    z-index: 1;
    padding: var(--space-lg) var(--space-xl);
    background-color: var(--color-bg-overlay);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.scene-banner__headline {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    color: var(--color-text-on-dark);
    line-height: 1.3;
}

.scene-banner__subtext {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.scene-banner__cta {
    align-self: flex-start;
    margin-top: var(--space-xs);
}

/* ── 特集カード ───────────────────────────────────── */
.feature-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    /* グリッドで行の高さに揃えられた時、白背景（__body）を下端まで満たすため
       縦flexにして子を伸ばす（短いカードの下側が透明になって角Rが見えなくなる対策） */
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.feature-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.feature-card__img-wrap {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background-color: var(--color-bg-cream);
}

.feature-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.feature-card:hover .feature-card__img {
    transform: scale(1.03);
}

.feature-card__img--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-festival-navy), var(--color-festival-red));
}

.feature-card__body {
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-bg);
    flex: 1;   /* 白背景をカード下端まで伸ばす（角Rを揃える） */
}

.feature-card__title {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.feature-card__lead {
    font-size: 0.9rem;
    color: var(--color-text-sub);
    line-height: 1.7;
}

/* ── 特集ヒーロー ─────────────────────────────────── */
.feature-hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: flex-end;
    color: var(--color-text-on-dark);
}

@media (min-width: 768px) {
    .feature-hero {
        min-height: 360px;
    }
}

.feature-hero__bg {
    position: absolute;
    inset: 0;
    background-image: var(--feature-hero-img, none);
    background-size: cover;
    background-position: center;
    background-color: var(--color-festival-navy);
}

.feature-hero__bg--placeholder {
    background: linear-gradient(135deg, var(--color-festival-navy), var(--color-festival-red));
}

.feature-hero__text {
    position: relative;
    z-index: 1;
    padding-block: var(--space-xl);
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    width: 100%;
}

.feature-hero__title {
    font-size: clamp(1.4rem, 4vw, 2.5rem);
    color: var(--color-text-on-dark);
    margin-bottom: var(--space-sm);
    /* 文字縁取りで背景に関わらず読める状態を確保 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 16px rgba(0,0,0,0.4);
}

.feature-hero__lead {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/* ════════════════════════════════════════════════════════════════
   右サイドバー（PC専用：1024px〜 / layout-main の2列目）
   ════════════════════════════════════════════════════════════════ */

/* サイドバー全体 */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* SP では timeline の下に積まれる。PC で layout-main の右カラムになる。 */
}

/* 各ウィジェット枠 */
.sidebar__section {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

/* ウィジェット見出し */
.sidebar__heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-festival-navy);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-festival-navy);
}

/* ── シーン別クイックリンク ──────────────────────── */
.sidebar__scene-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.sidebar__scene-link {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
    background-color: rgba(0, 31, 91, 0.06);
    border-radius: var(--radius-btn);
    color: var(--color-festival-navy);
    transition: background-color var(--transition);
    white-space: nowrap;
}

.sidebar__scene-link:hover {
    background-color: rgba(0, 31, 91, 0.18);
    text-decoration: none;
}

/* ── 広告エリア ──────────────────────────────────── */
.sidebar__ad-area {
    min-height: 250px;
    background-color: var(--color-bg-cream);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-sub);
    font-size: 0.8rem;
}

/* ── ピックアップ商品リスト ──────────────────────── */
.sidebar__pickup-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar__pickup-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.sidebar__pickup-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* サムネイル（画像あり / プレースホルダー共通） */
.sidebar__pickup-img,
.sidebar__pickup-img--placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    object-fit: cover;
}

.sidebar__pickup-img--placeholder {
    background: linear-gradient(135deg, var(--color-festival-navy), var(--color-festival-red));
}

.sidebar__pickup-body {
    flex: 1;
    min-width: 0; /* flex child のテキスト折り返しを許可 */
}

.sidebar__pickup-name {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 2px;
    /* 2行で切り捨て */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar__pickup-name a {
    color: var(--color-text);
}

.sidebar__pickup-name a:hover {
    color: var(--color-action);
    text-decoration: none;
}

.sidebar__pickup-price {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-action);
}

/* ── X フォローCTA ───────────────────────────────── */
.sidebar__follow-cta {
    text-align: center;
}

.sidebar__follow-lead {
    font-size: 0.85rem;
    color: var(--color-text-sub);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

/* X（旧Twitter）の公式カラーに合わせた黒ボタン */
.sidebar__follow-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background-color: #000;
    color: #fff;
    border-radius: var(--radius-btn);
    font-size: 0.9rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.sidebar__follow-btn:hover {
    background-color: #333;
    text-decoration: none;
    color: #fff;
}


/* ── ブランドラベル（ヘッダーロゴ内のサイト名テキスト）──────────── */
.site-brand-label {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 0.7rem + 1vw, 1.4rem);
    color: var(--text-on-dark);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    letter-spacing: 0.05em;
    line-height: 1.3;
    display: block;
}

/* よろしいでんがな表示時（体験・旅行ページ）── 黄色で強調 */
.site-brand-label.is-yoro {
    color: var(--festival-yellow);
    font-size: clamp(0.8rem, 0.6rem + 1.2vw, 1.4rem);
}

/* ── ページヒーロー画像（体験・旅行ページのヘッダー下帯）──────── */
.site-page-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--festival-navy);
    /* 画像未配置時はグラデーションで代替 */
    background-image: linear-gradient(135deg, var(--festival-navy) 0%, var(--festival-blue) 100%);
}

.site-page-hero__picture {
    display: block;
    width: 100%;
}

.site-page-hero__img {
    display: block;
    width: 100%;
    height: clamp(140px, 20vw, 260px);
    object-fit: cover;
    object-position: center;
}

/* 画像の上に重ねるキャッチコピー帯 */
.site-page-hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 31, 91, 0.45);
    padding: var(--gap);
}

.site-page-hero__catch {
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.8rem + 2vw, 2rem);
    color: var(--festival-yellow);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.4;
}