/* ============================================================
   public.css - 公開ページ専用スタイル
   ============================================================ */

/* アンカーリンクのスクロールをスムーズに */
html {
    scroll-behavior: smooth;
}

/* フッタからの#area/#category/#newsアンカー遷移時、固定ヘッダに隠れないよう余白 */
#area,
#category,
#news {
    scroll-margin-top: 120px;
}

/* ------------------------------------------------------------
   カラー変数
   ------------------------------------------------------------ */
:root {
    --tc-teal:       #00AEBB;
    --tc-teal-dark:  #006971;
    --tc-teal-light: #e0f7fa;
    --tc-salmon:     #EF856E;
    --tc-yellow:     #FAC03E;
    --tc-gray-bg:    #f4f5f6;
    --tc-text:       #191c1d;
    --tc-muted:      #6c757d;
}

/* ------------------------------------------------------------
   お知らせ帯
   ------------------------------------------------------------ */
.announcement-bar {
    background-color: var(--tc-teal-light);
    color: var(--tc-teal-dark);
    text-align: center;
    font-size: 0.8rem;
    padding: 6px 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1031; /* navbar(1030)より上 */
    line-height: 1.4;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* リンクありの場合 */
.announcement-bar-link {
    color: var(--tc-teal-dark);
    text-decoration: none;
}
.announcement-bar-link:hover {
    color: var(--tc-teal);
    text-decoration: underline;
}

/* お知らせ帯がある場合にbodyのpadding-topを増やす */
body.has-announcement {
    padding-top: 96px; /* 64px(navbar) + 32px(帯) */
}

/* ------------------------------------------------------------
   共通
   ------------------------------------------------------------ */
body {
    color: var(--tc-text);
    padding-top: 64px;
}

a {
    color: var(--tc-teal-dark);
    text-decoration: none;
}
a:hover {
    color: var(--tc-teal);
}

.btn-tc-teal {
    background-color: var(--tc-teal);
    color: #fff;
    border: none;
}
.btn-tc-teal:hover {
    background-color: var(--tc-teal-dark);
    color: #fff;
}

.btn-outline-tc-teal {
    color: var(--tc-teal);
    border-color: var(--tc-teal);
}
.btn-outline-tc-teal:hover {
    background-color: var(--tc-teal);
    color: #fff;
}

/* ------------------------------------------------------------
   ナビゲーション
   ------------------------------------------------------------ */
.navbar-public {
    border-bottom: 1px solid #e9ecef;
}

/* お知らせ帯がある場合はナビバーを帯の高さ分下にずらす */
body.has-announcement .navbar-public {
    top: 32px;
}

/* > で直接の子要素のみに適用（.navbar-logo-area-wrap内のimgには効かない） */
.navbar-public .navbar-brand > img {
    height: 36px;
}

/* エリアページ用ロゴ（pref.php / city.php） */
.navbar-logo-area-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;  /* エリア名をロゴ幅に対して中央揃え */
    height: 36px;         /* 通常ロゴと同じ高さ → ナビバー高さを変えない */
    justify-content: center;
    /* img(26px) + text(約10px) = 36px ぴったり（gapなし） */
}
.navbar-logo-area-wrap img {
    height: 26px; /* logo.pngのTICAMO!と同じ視覚サイズ */
    width: auto;
}
.navbar-area-name {
    font-size: 0.62rem;
    line-height: 1;
    color: #444;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.navbar-public .dropdown-item:hover {
    background-color: var(--tc-teal-light);
    color: var(--tc-teal-dark);
}

/* ヘッダー右ボタン：全角5文字基準の固定幅 */
.btn-nav-fixed {
    min-width: 6rem;
    text-align: center;
}

/* ヘッダー内 エリアドロップダウン トリガーボタン */
.btn-location-nav {
    background: transparent;
    border: 1px solid rgba(0, 105, 113, 0.25);
    color: var(--tc-teal-dark);
    font-size: 0.8rem;
    padding: 4px 10px;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-location-nav:hover,
.btn-location-nav:focus,
.btn-location-nav.show {
    background: var(--tc-teal-light);
    border-color: var(--tc-teal);
    color: var(--tc-teal-dark);
}
.btn-location-nav .location-icon {
    font-size: 0.85rem;
}

/* ヘッダー内 エリアドロップダウン メニュー */
.location-nav-dropdown {
    min-width: 200px;
    padding: 0.5rem 0;
}
.location-nav-dropdown .btn-location-gps {
    justify-content: center;
}

/* ヘッダー内 GPSトグルスイッチ */
.gps-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 2.5em; /* form-switch の input 分の余白 */
}
.gps-toggle-wrap .form-check-input {
    cursor: pointer;
}
/* トグルON時はTICAMOブランドカラー（teal） */
.gps-toggle-wrap .form-check-input:checked {
    background-color: var(--tc-teal);
    border-color: var(--tc-teal);
}
.gps-toggle-wrap .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 105, 113, 0.25);
    border-color: var(--tc-teal);
}
.gps-toggle-wrap .form-check-label {
    cursor: pointer;
    color: var(--tc-teal-dark);
    user-select: none;
}

/* エリアで検索プルダウン（47都道府県・地方ブロック別） */
.nav-pref-dropdown {
    min-width: 200px;
    max-height: 480px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.nav-pref-dropdown .dropdown-header {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--tc-muted);
    padding-top: 0.75rem;
}
.nav-pref-dropdown .dropdown-item {
    font-size: 0.875rem;
    padding: 0.3rem 1.2rem;
}

/* ------------------------------------------------------------
   ヒーローセクション
   ------------------------------------------------------------ */
.hero-section {
    background: #1a1a2e; /* 画像読込前のフォールバック色 */
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 60px 0 80px;
}

/* スライドショー背景コンテナ */
.hero-slides-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 各スライド: 初期状態は透明、activeで表示 */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.hero-slide.active {
    opacity: 1;
}

/* 半透明の暗幕: テキスト・検索バーの可読性を確保 */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1;
}

.hero-section .hero-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25);
    line-height: 1.3;
}

.hero-section .hero-subtitle {
    color: rgba(255,255,255,0.88);
    font-size: 1.05rem;
}

/* 検索バー */
.hero-search-bar {
    background: #fff;
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto;
}

.hero-search-bar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 1rem;
    background: transparent;
    min-width: 0;
}

.hero-search-bar select {
    border: none;
    outline: none;
    background: transparent;
    color: var(--tc-muted);
    font-size: 0.9rem;
    border-left: 1px solid #dee2e6;
    padding-left: 12px;
    max-width: 160px;
}

.hero-search-bar .btn-search {
    background: linear-gradient(135deg, var(--tc-teal), var(--tc-teal-dark));
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 11px 28px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.15s;
}
.hero-search-bar .btn-search:hover {
    opacity: 0.9;
    transform: scale(1.02);
    color: #fff;
}

/* 注目キーワードタグ */
.hero-keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.hero-keywords-label {
    color: rgba(255,255,255,0.75);
    font-size: .82rem;
    white-space: nowrap;
}
.hero-keyword-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50px;
    padding: 4px 14px;
    font-size: .82rem;
    text-decoration: none;
    transition: background 0.2s;
}
.hero-keyword-tag:hover {
    background: rgba(255,255,255,0.28);
    color: #fff;
}

/* ------------------------------------------------------------
   エリアバー（現在地表示）
   ------------------------------------------------------------ */
.location-bar {
    background: var(--tc-yellow);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 8px 0;
    font-size: 0.85rem;
}

.location-icon {
    color: var(--tc-teal-dark);
    font-size: 0.95rem;
}

.location-label {
    color: rgba(0,0,0,0.55);
}

.location-text {
    color: var(--tc-teal-dark);
    font-weight: 600;
}

/* 「現在地を使う」ボタン */
.btn-location-gps {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.25);
    background: transparent;
    color: var(--tc-teal-dark);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.btn-location-gps:hover {
    background: rgba(0,0,0,0.1);
    color: var(--tc-teal-dark);
}

.btn-location-gps.active {
    background: rgba(0,0,0,0.12);
    color: var(--tc-teal-dark);
    border-color: rgba(0,0,0,0.35);
    cursor: default;
}

/* 「エリアを変更」リンク */
.btn-location-change {
    font-size: 0.8rem;
    color: rgba(0,0,0,0.6);
    white-space: nowrap;
}

.btn-location-change:hover {
    color: var(--tc-teal-dark);
}

/* ------------------------------------------------------------
   登録数カウント帯
   ------------------------------------------------------------ */
.stat-strip {
    background: linear-gradient(90deg, var(--tc-teal-light) 0%, #fff 40%, #fff 60%, var(--tc-teal-light) 100%);
    border-bottom: 1px solid #c8eff3;
    padding: 18px 0;
}

/* 数値カウンター帯 */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}
.stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tc-teal-dark);
}
.stat-label {
    font-size: 0.72rem;
    color: var(--tc-muted);
    letter-spacing: 0.05em;
    margin-top: 2px;
}
.stat-divider {
    width: 1px;
    height: 32px;
    background: #c8eff3;
}

/* ------------------------------------------------------------
   ヒーロー内 掲載数カウンター
   ------------------------------------------------------------ */
.hero-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
}
.hero-stat-item {
    text-align: center;
}
.hero-stat-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.hero-stat-label {
    display: block;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.72);
    margin-top: 4px;
    letter-spacing: 0.05em;
}
.hero-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.3);
}

/* ------------------------------------------------------------
   TICAMOとは セクション
   ------------------------------------------------------------ */
.about-ticamo-section {
    background: var(--tc-teal);
    padding: 56px 0;
    color: #fff;
}
.about-ticamo-label {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.8;
}
.about-ticamo-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}
.about-ticamo-body {
    font-size: 1rem;
    color: #fff;
    line-height: 1.9;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* 登録メリット区切り線 */
.about-ticamo-divider {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    margin: 2rem auto;
}

/* 登録メリット 3列 */
.about-ticamo-benefits {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.about-ticamo-benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 160px;
}
.about-ticamo-benefit-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0.75rem;
}
.about-ticamo-benefit-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}
.about-ticamo-benefit-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* モバイル：gap縮小 */
@media (max-width: 575.98px) {
    .about-ticamo-benefits {
        gap: 1.25rem;
    }
    .about-ticamo-benefit-item {
        max-width: 100px;
    }
    .about-ticamo-benefit-desc {
        font-size: 0.72rem;
    }
}

/* ------------------------------------------------------------
   カテゴリクイックナビ
   ------------------------------------------------------------ */
.category-nav-section {
    background: #fff;
    padding: 48px 0 40px;
    border-bottom: 1px solid #e9ecef;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 8px;
    border-radius: 14px;
    color: var(--tc-text);
    border: 1px solid transparent;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    cursor: pointer;
    text-decoration: none;
}

.category-card:hover {
    background: var(--tc-teal-light);
    color: var(--tc-teal-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,174,187,0.15);
    border-color: rgba(0,174,187,0.2);
}

.category-card .cat-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 1.35rem;
    transition: background 0.18s, color 0.18s, transform 0.18s;
}

.category-card:hover .cat-icon {
    transform: scale(1.1);
}

/* カテゴリアイコン 5色サイクリング（TICAMOパレット派生色） */
.col:nth-child(5n+1) .cat-icon { background: #e0f7fa;              color: var(--tc-teal); }
.col:nth-child(5n+2) .cat-icon { background: #fff8e6;              color: #c9890a; }
.col:nth-child(5n+3) .cat-icon { background: #fdeee9;              color: #c05040; }
.col:nth-child(5n+4) .cat-icon { background: #e6f4f5;              color: var(--tc-teal-dark); }
.col:nth-child(5n+5) .cat-icon { background: rgba(250,192,62,0.15); color: #b07c00; }

.col:nth-child(5n+1) .category-card:hover .cat-icon { background: var(--tc-teal);      color: #fff; }
.col:nth-child(5n+2) .category-card:hover .cat-icon { background: #c9890a;             color: #fff; }
.col:nth-child(5n+3) .category-card:hover .cat-icon { background: #c05040;             color: #fff; }
.col:nth-child(5n+4) .category-card:hover .cat-icon { background: var(--tc-teal-dark); color: #fff; }
.col:nth-child(5n+5) .category-card:hover .cat-icon { background: #b07c00;             color: #fff; }

.category-card .cat-name {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   セクション共通
   ------------------------------------------------------------ */
.section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tc-teal);
    margin-bottom: 4px;
}

.section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tc-text);
}


/* セクションサブタイトル（スマホ非表示・d-none d-md-block で制御） */
.section-subtitle {
    font-size: .8rem;
    color: var(--tc-muted);
    margin-top: 4px;
}

/* セクションタイトル小サイズ（カテゴリナビ用） */
.section-title--sm {
    font-size: 1.1rem;
}

.section-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tc-teal);
}
.section-more:hover {
    color: var(--tc-teal-dark);
}

/* ------------------------------------------------------------
   インフォメーション（2カラムパネル）
   ------------------------------------------------------------ */
.news-section {
    padding: 64px 0;
    background: var(--tc-gray-bg);
}

/* ============================================================
   リアルタイムティッカー
   ============================================================ */
.ticker-wrap {
    height: 220px;
    overflow: hidden;
    position: relative;
}

/* スクロール中は通常速度、ホバー時は一時停止 */
.ticker-track {
    animation: ticker-scroll 40s linear infinite;
}

/* ティッカー行：お知らせパネルと同等のパディング */
.ticker-track .info-list-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
}
.ticker-wrap:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* エリア名バッジ */
.ticker-area {
    display: inline-block;
    font-size: 0.7rem;
    background: #e9ecef;
    color: #495057;
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 4px;
    vertical-align: middle;
}

/* パネル枠 */
.info-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    height: 100%;
}

/* パネルヘッダー */
.info-panel-head {
    padding: 16px 20px;
    border-bottom: 1px solid #e9ecef;
    background: #fafafa;
}

.info-panel-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tc-text);
    margin: 0;
}

/* リスト */
.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.info-list-item {
    border-bottom: 1px solid #f0f0f0;
}

.info-list-item:last-child {
    border-bottom: none;
}

.info-list-item a {
    display: grid;
    /* 日付：固定 / 送り手：固定 / タイトル：残り全部 */
    grid-template-columns: 80px 80px 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    transition: background 0.15s;
}

.info-list-item a:hover {
    background: var(--tc-teal-light);
}

.info-date {
    font-size: 0.75rem;
    color: var(--tc-muted);
    white-space: nowrap;
}

.info-sender {
    font-size: 0.75rem;
    color: var(--tc-teal-dark);
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.info-title {
    font-size: 0.85rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 旧ニュースカード（不要になったが念のため残す） */
.news-card-main {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.25s, transform 0.25s;
}
.news-card-main:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.news-card-main .news-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-card-main .news-img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--tc-teal-light), var(--tc-teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.5rem;
}

.news-card-sub {
    border-radius: 12px;
    border: 1px solid #e9ecef;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    transition: box-shadow 0.2s, transform 0.2s;
    background: #fff;
    height: 100%;
}
.news-card-sub:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
    transform: translateX(3px);
}

.news-card-sub .news-thumb {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-card-sub .news-thumb-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    background: var(--tc-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-teal);
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   注目の商店（横スクロール）
   ------------------------------------------------------------ */
.ranking-scroll-section {
    padding: 56px 0;
    background: var(--tc-gray-bg);
}

/* 矢印付きスクロールラッパー */
.shop-scroll-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 矢印ボタン共通 */
.scroll-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    background: #fff;
    color: var(--tc-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 1;
}
.scroll-btn:hover:not(:disabled) {
    background: var(--tc-teal);
    color: #fff;
    border-color: var(--tc-teal);
    box-shadow: 0 4px 12px rgba(0,174,187,0.3);
}
.scroll-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* スクロールトラック */
.shop-scroll-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* スクロールバーを非表示（スワイプ操作は残す） */
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 8px 4px 12px;
}
.shop-scroll-track::-webkit-scrollbar {
    display: none;
}

/* 個別カード */
.shop-scroll-card {
    flex-shrink: 0;
    width: 180px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
    position: relative;
    transition: box-shadow 0.22s, transform 0.22s;
    display: flex;
    flex-direction: column;
}
.shop-scroll-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

/* カード内 画像エリア */
.scroll-card-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.scroll-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.shop-scroll-card:hover .scroll-card-img-wrap img {
    transform: scale(1.06);
}

/* 画像なしプレースホルダー */
.scroll-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--tc-teal-light), var(--tc-teal));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
}

/* カード内テキストエリア */
.scroll-card-body {
    padding: 10px 12px 12px;
}
.scroll-card-name {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
    color: var(--tc-text);
    /* 長い店名は2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scroll-card-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tc-salmon);
    text-align: right;
    margin-bottom: 2px;
}
.scroll-card-area {
    font-size: 0.72rem;
    color: var(--tc-muted);
    margin-bottom: 0;
}

/* ランクバッジ（左上・金銀銅グラデーション） */
/* NEWバッジ（7日以内に更新された商店に表示） */
.new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #e85d04, #FAC03E);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(232,93,4,0.4);
    z-index: 1;
}

/* ------------------------------------------------------------
   エリアから探すセクション
   ------------------------------------------------------------ */
.area-section {
    padding: 64px 0;
    background: #fff;
}

.area-table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.area-table th {
    color: var(--tc-muted);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    padding-right: 20px;
    vertical-align: top;
    padding-top: 8px;
}

.area-table td {
    line-height: 2.4;
}

/* 都道府県リンク・カテゴリリンク → 共通ピル形ボタン */
.area-table a,
.cat-link-list a {
    display: inline-block;
    color: var(--tc-teal-dark);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 6px;
    background: var(--tc-teal-light);
    border: 1px solid rgba(0,105,113,0.12);
    margin: 3px 3px;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.area-table a:hover,
.cat-link-list a:hover {
    background: var(--tc-teal);
    color: #fff;
    border-color: var(--tc-teal);
    transform: translateY(-1px);
}

/* カテゴリリンク一覧ラッパー */
.cat-link-list {
    line-height: 2.4;
}

/* ------------------------------------------------------------
   検索ページ
   ------------------------------------------------------------ */
.search-header-section {
    padding: 42px 0 38px;
    background: linear-gradient(135deg, var(--tc-teal-dark) 0%, var(--tc-teal) 100%);
    position: sticky;
    top: 64px; /* navbar高さ分 */
    z-index: 100;
}
/* お知らせ帯表示時はnavbar(64px)+帯(32px)分ずらす */
body.has-announcement .search-header-section {
    top: 96px;
}

.search-result-heading {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 0.6rem 0;
}
.search-result-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--tc-text);
}
.search-result-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--tc-muted);
    margin-left: 0.4rem;
}

.search-result-section {
    padding: 32px 0 64px;
    background: var(--tc-gray-bg);
    min-height: 60vh;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.search-keyword {
    font-weight: 700;
    color: var(--tc-text);
}

.search-count {
    font-weight: 700;
    color: var(--tc-teal-dark);
    font-size: 1rem;
}

.search-area {
    color: var(--tc-muted);
    font-size: 0.8rem;
}

/* 商品カード */
.item-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
    height: 100%;
}

.item-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

/* 在庫切れ */
.item-card--out {
    opacity: 0.65;
}

.item-card--out .item-card-img-wrap img,
.item-card--out .item-card-img-placeholder {
    filter: grayscale(60%);
}

.item-card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}

.item-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-muted);
    font-size: 2rem;
}

/* バッジ */
.item-badge {
    position: absolute;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.item-badge--out {
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.item-badge--low {
    top: 8px;
    right: 8px;
    background: rgba(234,88,12,0.85);
    color: #fff;
}

.item-badge--cat {
    bottom: 8px;
    left: 8px;
    background: rgba(0,174,187,0.85);
    color: #fff;
}
/* NEW バッジ（在庫カード・売り場カード共通） */
.item-badge--new {
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, var(--tc-teal), var(--tc-teal-dark));
    color: #fff;
    border-radius: 20px;
    letter-spacing: 0.04em;
}

.item-card-body {
    padding: 10px 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tc-salmon);
    text-align: right;
    margin: 2px 0 0;
}

.item-card-shop,
.item-card-area {
    font-size: 0.72rem;
    color: var(--tc-muted);
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.item-card-distance {
    background: #e85d04;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* 営業中バッジ（リストページ共通） */
.badge-open {
    background: #198754;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   検索結果リスト（商品単位ビュー）
   ------------------------------------------------------------ */
.search-item-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

/* 店舗募集ブロック（0件時） */
.recruit-block {
    background: #fff;
    border: 2px dashed #adb5bd;
    border-radius: 0; /* エリアページの0件募集ブロックは角丸なし */
}
.recruit-block__icon {
    font-size: 3rem;
    color: #f59e0b;
    margin-bottom: 1rem;
}
.recruit-block__heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.75rem;
}
.recruit-block__sub {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 0;
}
.recruit-block__sub strong {
    font-size: 1.15em;
    color: #d97706;
}
.btn-recruit {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
    margin-top: 1.5rem;
    padding: 0.65rem 2rem;
}
.btn-recruit:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #fff;
}

.search-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.search-list-item:last-child {
    border-bottom: none;
}

.search-list-item:hover {
    background: var(--tc-teal-light);
}

/* 在庫切れ */
.search-list-item--out {
    opacity: 0.6;
}

.search-list-item--out .search-list-thumb img {
    filter: grayscale(60%);
}

/* 有料プラン強調（スタンダード以上） */
.search-list-item--featured {
    background: #fffde7;
    border-left: 3px solid #f0a500;
}
.search-list-item--featured:hover {
    background: #fff8c5;
}

/* サムネイル */
.search-list-thumb {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.search-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-list-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-muted);
    font-size: 1.5rem;
}

/* 商店情報エリア（サムネイル横の本文部分） */
.search-list-body {
    flex: 1;
    min-width: 0;
}

/* 商品名 */
.search-list-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    min-width: 0;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* 価格 */
.search-list-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tc-salmon);
    margin: 0;
    white-space: nowrap;
}

/* 商店名・エリア */
.search-list-shop,
.search-list-area {
    font-size: 0.78rem;
    color: var(--tc-muted);
}

/* 新着順時の日付テキスト（2行） */
.search-list-date {
    font-size: 0.72rem;
    color: var(--tc-muted);
    white-space: nowrap;
    text-align: right;
    line-height: 1.6;
}

/* バッジ（インライン） */
.search-list-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.search-list-badge--cat {
    background: #fff;
    color: var(--tc-teal-dark);
    border: 1px solid var(--tc-teal);
}

.search-list-badge--out {
    background: #f0f0f0;
    color: var(--tc-muted);
}
.search-list-badge--low {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

/* 商店まとめカード */
.shop-list-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
    height: 100%;
}

.shop-list-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.shop-list-img-wrap {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--tc-teal-light);
}

.shop-list-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-list-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-teal);
    font-size: 2.5rem;
}

.shop-list-body {
    padding: 14px 16px;
    flex-grow: 1;
}

.shop-list-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shop-list-catch {
    font-size: 0.78rem;
    color: var(--tc-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.shop-list-meta {
    font-size: 0.78rem;
    color: var(--tc-muted);
    margin: 0;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   商品詳細ページ
   ------------------------------------------------------------ */
.item-detail-gallery {
    position: sticky;
    top: 80px; /* navbar高さ + 余白 */
}

.item-detail-main-img-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid #e9ecef;
    aspect-ratio: 1 / 1;
    background: #fff;
}

.item-detail-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s;
}

.item-detail-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-muted);
    font-size: 4rem;
}

/* メインビジュアル用：notice-thumb-placeholder--ticamo と併用時はアイコン・テキストを大きく */
.item-detail-img-placeholder.notice-thumb-placeholder {
    font-size: 4rem;
    gap: 12px;
}
.item-detail-img-placeholder.notice-thumb-placeholder span {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
}

/* 検索結果の72pxサムネ用：TICAMOテキスト非表示でアイコンのみに */
.search-list-thumb-placeholder.notice-thumb-placeholder {
    font-size: 1.4rem;
}
.search-list-thumb-placeholder.notice-thumb-placeholder span {
    display: none;
}

/* 在庫切れオーバーレイ */
.item-detail-out-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* サムネイル */
.item-detail-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.item-detail-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #fff;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.item-detail-thumb.active,
.item-detail-thumb:hover {
    border-color: var(--tc-teal);
}

/* 商品名・価格 */
.item-detail-name {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 12px;
}

.item-detail-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tc-salmon);
    margin-bottom: 8px;
}

.item-detail-price-inquiry {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tc-teal-dark);
    margin-bottom: 8px;
}

.item-detail-price-tax {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--tc-muted);
}

/* 説明文 */
.item-detail-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--tc-text);
    background: var(--tc-gray-bg);
    border-radius: 10px;
    padding: 16px;
}

/* カテゴリバッジ */
.bg-tc-teal-light { background-color: var(--tc-teal-light) !important; }
.bg-tc-teal       { background-color: var(--tc-teal) !important; }
.text-tc-teal     { color: var(--tc-teal-dark) !important; }

/* セクション見出し（ラインアクセント付き） */
.section-title-line {
    font-size: 1.05rem;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tc-teal-light);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* 取扱商店カード（ミニ） */
.shop-mini-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: box-shadow 0.2s, background 0.15s;
    background: #fff;
}

.shop-mini-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    background: var(--tc-teal-light);
}

.shop-mini-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.shop-mini-logo img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e9ecef;
}

.shop-mini-logo-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--tc-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-teal);
    font-size: 1.3rem;
}

.shop-mini-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 2px;
}

.shop-mini-catch {
    font-size: 0.78rem;
    color: var(--tc-muted);
    margin: 0 0 2px;
}

.shop-mini-area {
    font-size: 0.78rem;
    color: var(--tc-muted);
    margin: 0;
}

/* ------------------------------------------------------------
   商店詳細ページ
   ------------------------------------------------------------ */
.shop-cover-wrap {
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tc-teal-light), var(--tc-teal));
}

.shop-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--tc-teal-light), var(--tc-teal));
}

.shop-header-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e9ecef;
    padding: 28px;
    margin-top: -40px; /* カバー画像に重ねる */
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.shop-logo-wrap {
    width: 80px;
    height: 80px;
}

.shop-logo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #e9ecef;
}

.shop-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--tc-teal-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-teal);
    font-size: 2rem;
}

.shop-detail-name {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2px;
}

/* 基本情報ボックス（右カラム） */
.shop-info-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shop-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.shop-info-icon {
    color: var(--tc-teal);
    width: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.shop-detail-catch {
    color: var(--tc-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.shop-detail-desc {
    color: var(--tc-text);
    font-size: 0.9rem;
    line-height: 1.8;
}

.shop-map-wrap {
    width: 100%;
    height: 240px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* ------------------------------------------------------------
   マップ＋ギャラリー統合レイアウト（group.php）
   ------------------------------------------------------------ */

/* マップカラム：親行の高さに追従させる */
/* マップ＆ギャラリーを包む全幅背景帯 */
.group-map-band {
    background: #f0f9f8;
    margin-top: 2.5rem;
    padding: 2.5rem 0 3rem;
}

.group-map-gallery-row {
    /* row 内で各カラムを等高にするため stretch を使う */
    align-items: stretch;
}

/* マップ本体：統合レイアウト時は高さを親に合わせる */
.group-map-gallery-row .shop-map-wrap {
    height: 100%;
    min-height: 240px;
}

/* ギャラリーカラム：flexbox で縦3枚を均等配置 */
.group-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ギャラリー1枚分のフレーム（16:9固定比率） */
.group-gallery-thumb {
    overflow: hidden;
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
}

/* ギャラリー画像本体 */
.group-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.2s ease, transform 0.2s ease;
}

/* ホバー：明度上げ＋微小スケール */
.group-gallery-thumb:hover img {
    filter: brightness(1.08);
    transform: scale(1.03);
}

/* ホバー影（フレーム側に付ける） */
.group-gallery-thumb:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* スマホ時：マップは固定高さ、ギャラリーは3枚横並び */
@media (max-width: 991.98px) {
    .group-gallery-col {
        flex-direction: row;
    }
    .group-map-gallery-row .shop-map-wrap {
        height: 260px;
        min-height: unset;
    }
}


/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   TOPページ 店舗・団体向け CTA セクション（フッタ手前）
   ------------------------------------------------------------ */
.index-cta-section {
    background: linear-gradient(180deg, var(--tc-teal-light) 0%, #b8e4e8 100%);
    padding: 64px 0;
    border-top: 1px solid rgba(0, 105, 113, 0.1);
}

.index-cta-col {
    text-align: center;
}

.index-cta-label {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--tc-teal-dark);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.index-cta-title {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: var(--tc-text);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.index-cta-sub {
    font-size: 0.9rem;
    color: var(--tc-muted);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.index-cta-divider {
    width: 1px;
    height: 180px;
    background: rgba(0, 105, 113, 0.2);
}

.index-cta-btn-primary {
    background-color: var(--tc-teal);
    color: #fff;
    border: 2px solid var(--tc-teal);
    padding: 10px 24px;
    transition: background-color 0.2s, border-color 0.2s;
}

.index-cta-btn-primary:hover {
    background-color: var(--tc-teal-dark);
    border-color: var(--tc-teal-dark);
    color: #fff;
}

.index-cta-btn-outline {
    background-color: transparent;
    color: var(--tc-teal-dark);
    border: 2px solid var(--tc-teal);
    padding: 10px 24px;
    transition: background-color 0.2s, color 0.2s;
}

.index-cta-btn-outline:hover {
    background-color: var(--tc-teal);
    color: #fff;
}

/* ------------------------------------------------------------
   フッター（公開ページ用）
   左にロゴブロック / 右にリンク群（3カラム）を寄せる
   ------------------------------------------------------------ */
.footer-public {
    background: linear-gradient(180deg, var(--tc-teal) 0%, var(--tc-teal-dark) 100%);
    color: rgba(255,255,255,0.7);
    padding: 64px 0 28px;
}

.footer-public a {
    color: rgba(255,255,255,0.65);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-public a:hover {
    color: #fff;
}

/* 上段：ロゴ（左詰め） と リンク群（右詰め）を両端に配置 */
.footer-public .footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

/* 左：ロゴブロック */
.footer-public .footer-brand {
    flex: 0 0 auto;
    max-width: 280px;
}
.footer-public .footer-logo img {
    height: 32px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.footer-public .footer-tagline {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.8;
}

/* 右：リンク群（3カラム横並び・右詰め） */
.footer-public .footer-links {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 56px;
}
.footer-public .footer-col {
    min-width: 150px;
}

/* 見出し（コンテンツ / 店舗オーナー様へ 等） */
.footer-public .footer-heading {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 14px;
}
/* 同カラム内で2ブロック目の見出し（ご利用案内・商工団体） */
.footer-public .footer-heading--stack {
    margin-top: 28px;
}

/* メニューリスト */
.footer-public .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-public .footer-menu li {
    margin-bottom: 10px;
}
.footer-public .footer-menu li:last-child {
    margin-bottom: 0;
}

/* コピーライト */
.footer-public .footer-copy {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 48px;
}

/* タブレット以下：リンク群を左詰めに切り替え */
@media (max-width: 991px) {
    .footer-public .footer-main {
        flex-direction: column;
        gap: 40px;
    }
    .footer-public .footer-links {
        justify-content: flex-start;
        gap: 40px 48px;
    }
}

/* モバイル：カラム幅を2列相当に */
@media (max-width: 575px) {
    .footer-public {
        padding: 48px 0 24px;
    }
    .footer-public .footer-links {
        gap: 32px;
    }
    .footer-public .footer-col {
        flex: 1 1 45%;
        min-width: 0;
    }
}

/* ------------------------------------------------------------
   レスポンシブ調整
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .hero-section {
        min-height: 380px;
        padding: 48px 0 60px;
    }
    .hero-section .hero-title {
        font-size: 1.6rem;
    }
    .hero-search-bar {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 12px;
    }
    .hero-search-bar select {
        border-left: none;
        border-top: 1px solid #dee2e6;
        padding-left: 0;
        padding-top: 8px;
        width: 100%;
        max-width: 100%;
    }
    .hero-search-bar .btn-search {
        width: 100%;
        text-align: center;
    }
}

/* ------------------------------------------------------------
   エリアページ共通（都道府県TOP / 市区町村TOP）
   ------------------------------------------------------------ */

/* ページヘッダー帯 */
.area-page-header {
    background: linear-gradient(135deg, var(--tc-teal-dark) 0%, var(--tc-teal) 100%);
    color: #fff;
    padding: 32px 0 28px;
}
.area-page-header .breadcrumb-item a {
    color: rgba(255,255,255,.75);
}
.area-page-header .breadcrumb-item.active,
.area-page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.55);
}
.area-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 8px 0 4px;
}
.area-page-count {
    font-size: .9rem;
    opacity: .85;
    margin: 0;
}

/* 左カラム：サイドパネル外ラッパー（sticky はここに集約） */
.area-side-sticky {
    position: sticky;
    top: 80px;
}

/* 左カラム：サイドパネル */
.area-side-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
}
.area-side-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}

/* 市区町村リスト */
.area-city-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
.area-city-list li {
    border-bottom: 1px solid #f0f0f0;
}
.area-city-list li:last-child {
    border-bottom: none;
}
.area-city-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 4px;
    font-size: .88rem;
    color: var(--tc-text);
    transition: color .15s;
}
.area-city-list a:hover {
    color: var(--tc-teal);
}
.area-city-list a.active {
    color: var(--tc-teal);
    font-weight: 700;
}

/* 商店数バッジ */
.area-city-count {
    background: var(--tc-teal-light);
    color: var(--tc-teal-dark);
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* レスポンシブ：スマホではstickyを解除 */
@media (max-width: 991px) {
    .area-side-sticky {
        position: static;
    }
    .area-city-list {
        max-height: 200px;
    }
}

/* ------------------------------------------------------------
   コンテンツページ共通（ニュース / お知らせ）
   ------------------------------------------------------------ */

/* ページヘッダー帯 */
.content-page-header {
    background: var(--tc-teal);
    padding: 30px 0;
}
.content-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ニュース一覧リスト（カードスタイル） */
.content-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.content-news-item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.content-news-item:hover {
    border-color: var(--tc-teal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.content-news-link {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    color: var(--tc-text);
    text-decoration: none;
}
.content-news-link:hover {
    color: var(--tc-text);
}

/* サムネイル（スクエア固定・画像なしはTICAMOプレースホルダー） */
.content-news-thumb {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    overflow: hidden;
    background: var(--tc-gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.4rem;
    position: relative;
}
.content-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* モバイル：サムネを小さく */
@media (max-width: 575px) {
    .content-news-thumb {
        width: 64px;
        height: 64px;
    }
    .content-news-link {
        padding: 12px;
        gap: 12px;
    }
}

/* 右サイドバー バナーエリア */
.notices-sidebar-banner {
    background: linear-gradient(135deg, #c44d00, #FAC03E);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
.notices-sidebar-banner .banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}
.notices-sidebar-banner .banner-sub {
    font-size: 0.82rem;
    opacity: 0.9;
    margin-bottom: 16px;
}
.notices-sidebar-banner .banner-btn {
    background: #fff;
    color: #c44d00;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}
.notices-sidebar-banner .banner-btn:hover {
    background: #fff3ee;
    color: #c44d00;
}

/* 団体ページ右サイドバー バナーエリア */
.group-sidebar-banner {
    background: linear-gradient(135deg, #3a0ca3, #4361ee);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}
.group-sidebar-banner .banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}
.group-sidebar-banner .banner-sub {
    font-size: 0.82rem;
    opacity: 0.9;
    margin-bottom: 16px;
}
.group-sidebar-banner .banner-btn {
    background: #fff;
    color: #3a0ca3;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}
.group-sidebar-banner .banner-btn:hover {
    background: #ede9fe;
    color: #3a0ca3;
}

/* 本文エリア：縦並びでメタ→タイトル→メタの3層構造 */
.content-news-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

/* 上段：日付＋NEWバッジ */
.content-news-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.content-news-date {
    font-size: .78rem;
    color: var(--tc-muted);
    line-height: 1.2;
}
.content-news-new {
    background: var(--tc-salmon);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}

/* 中段：タイトル（最も大きく強調） */
.content-news-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    color: var(--tc-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.content-news-link:hover .content-news-title {
    color: var(--tc-teal);
}

/* 下段：発信元バッジ＋発信者名 */
.content-news-meta-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.content-news-sender {
    font-size: .78rem;
    color: var(--tc-muted);
}

/* モバイル：タイトルを少し小さく */
@media (max-width: 575px) {
    .content-news-title {
        font-size: .92rem;
    }
}

/* 発信元バッジ */
.badge-notice-admin {
    background-color: var(--tc-teal);
    color: #fff;
}
.badge-notice-group {
    background-color: var(--tc-salmon);
    color: #fff;
}
.badge-notice-shop {
    background-color: var(--tc-yellow);
    color: #333;
}

/* ============================================================
   お知らせ一覧 フィルター・件数・空状態
   ============================================================ */

/* フィルターピル */
.notices-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.notices-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid #dee2e6;
    background: #fff;
    color: var(--tc-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
}
.notices-filter-pill:hover {
    border-color: var(--tc-teal);
    color: var(--tc-teal);
    background: var(--tc-teal-light);
}
.notices-filter-pill.is-active {
    background: var(--tc-teal);
    border-color: var(--tc-teal);
    color: #fff;
}
.notices-filter-pill.is-active:hover {
    background: var(--tc-teal-dark, var(--tc-teal));
    color: #fff;
}
/* 各タイプ別アクティブ色 */
.notices-filter-pill--admin.is-active {
    background: var(--tc-teal);
    border-color: var(--tc-teal);
}
.notices-filter-pill--group.is-active {
    background: var(--tc-salmon);
    border-color: var(--tc-salmon);
}
.notices-filter-pill--shop.is-active {
    background: var(--tc-yellow);
    border-color: var(--tc-yellow);
    color: #333;
}

/* 件数ヘッダー */
.notices-count-header {
    padding: 8px 0 10px;
    border-bottom: 2px solid var(--tc-gray-bg);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.notices-count-num {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tc-text);
}
.notices-count-unit {
    font-size: .85rem;
    color: var(--tc-muted);
    margin-left: 2px;
}

/* 空状態 */
.notices-empty {
    text-align: center;
    padding: 48px 16px;
    background: var(--tc-gray-bg);
    border-radius: 10px;
    color: var(--tc-muted);
}
.notices-empty-icon {
    font-size: 2.6rem;
    color: #c8c8c8;
    margin-bottom: 12px;
}
.notices-empty-text {
    font-size: .95rem;
    margin-bottom: 16px;
}

/* 記事詳細 */
.content-article {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 24px;
}
.content-article-date {
    font-size: .82rem;
    color: var(--tc-muted);
    margin-bottom: 4px;
}
.content-article-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--tc-teal-light);
}

/* 記事内画像 */
/* お知らせ詳細：画像サムネイルグリッド（クリックでGLightbox拡大） */
.notice-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.notice-thumb-item {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    flex-shrink: 0;
}
.notice-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s;
}
.notice-thumb-item:hover img {
    opacity: 0.85;
}

/* 記事本文 */
.content-article-body {
    font-size: .95rem;
    line-height: 1.85;
    color: var(--tc-text);
}

/* お知らせ詳細：発信元ブロック（shop-band風） */
.notice-sender-band {
    background: var(--tc-gray-bg);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
}
.notice-sender-band-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tc-teal);
    margin-bottom: 14px;
}
.notice-sender-band-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.notice-sender-logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notice-sender-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.notice-sender-logo-placeholder {
    font-size: 1.4rem;
    color: #adb5bd;
}
.notice-sender-info {
    flex: 1;
    min-width: 0;
}
.notice-sender-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tc-text);
    margin-bottom: 6px;
}
.notice-sender-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.82rem;
    color: #6c757d;
}
.notice-sender-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.notice-sender-action {
    flex-shrink: 0;
    align-self: center;
}
@media (max-width: 575px) {
    .notice-sender-action {
        width: 100%;
    }
    .notice-sender-action .btn {
        width: 100%;
        text-align: center;
    }
}

/* 前後ナビゲーション */
.content-article-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid #ebebeb;
}
.content-article-nav-prev,
.content-article-nav-next {
    flex: 1;
    font-size: .85rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.content-article-nav-next {
    text-align: right;
}
.content-article-nav a {
    color: var(--tc-teal-dark);
}
.content-article-nav-list {
    flex-shrink: 0;
    font-size: .85rem;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: var(--tc-text);
}
.content-article-nav-list:hover {
    background: var(--tc-teal-light);
}

/* レスポンシブ */
@media (max-width: 575px) {
    .content-article {
        padding: 20px 16px;
    }
    .content-article-title {
        font-size: 1.1rem;
    }
}

/* ------------------------------------------------------------
   加盟商店カード（group.php）
   ------------------------------------------------------------ */
.member-shop-card {
    display: block;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    text-decoration: none;
    color: var(--tc-text);
    transition: box-shadow .2s, transform .2s;
    background: #fff;
}
.member-shop-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
    color: var(--tc-text);
}

/* カバー画像部分 */
.member-shop-cover {
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: var(--tc-gray-bg);
    position: relative;
}
.member-shop-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.member-shop-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* カード下部の情報エリア */
.member-shop-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
}

/* 加盟店一覧カード - 下端オーバーレイ（キャッチコピー＋店名） */
.member-shop-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 8px 6px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.40) 55%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
.member-shop-overlay-catch {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.82);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}
.member-shop-overlay-name {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ロゴ小画像 */
.member-shop-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.member-shop-info {
    flex: 1;
    min-width: 0;
}
.member-shop-name {
    font-size: .92rem;
    font-weight: 700;
    margin: 0 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.member-shop-catch {
    font-size: .8rem;
    color: var(--tc-muted);
    margin: 0 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.member-shop-meta {
    font-size: .75rem;
    color: var(--tc-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ------------------------------------------------------------
   マイページ
   ------------------------------------------------------------ */
.mypage-profile-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    position: sticky;
    top: 80px;
}
.mypage-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tc-teal-light);
    color: var(--tc-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.mypage-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.mypage-email {
    font-size: .8rem;
    color: var(--tc-muted);
    margin-bottom: 4px;
    word-break: break-all;
}
.mypage-since {
    font-size: .75rem;
    color: var(--tc-muted);
    margin-bottom: 12px;
}
.mypage-points {
    background: var(--tc-gray-bg);
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.mypage-points-num {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
}
.mypage-points-label {
    font-size: .8rem;
    color: var(--tc-muted);
}
.mypage-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.mypage-nav-item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .88rem;
    color: var(--tc-text);
    text-decoration: none;
    transition: background .15s;
}
.mypage-nav-item:hover,
.mypage-nav-item.active {
    background: var(--tc-teal-light);
    color: var(--tc-teal-dark);
}
.mypage-nav-item.text-danger:hover {
    background: #fde8e8;
    color: #c0392b;
}
/* ナビ内セパレーター */
.mypage-nav hr {
    border-color: #e0e0e0;
    opacity: 1;
    margin: 4px 0;
}

/* お気に入りショートカットカード（ダッシュボード） */
.mypage-shortcut-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    text-decoration: none;
    color: var(--tc-text);
    font-size: .9rem;
    font-weight: 500;
    transition: background .15s, border-color .15s;
}
.mypage-shortcut-card:hover {
    background: var(--tc-teal-light);
    border-color: var(--tc-teal);
    color: var(--tc-teal-dark);
}

/* 小サイズカード（マイページ 5列グリッド用） */
.member-shop-card-sm .member-shop-cover {
    height: 80px;
}
.member-shop-card-sm .member-shop-body {
    padding: 6px 8px;
    gap: 6px;
}
.member-shop-card-sm .member-shop-name {
    font-size: .78rem;
    margin-bottom: 1px;
}
.member-shop-card-sm .member-shop-catch {
    font-size: .72rem;
    margin-bottom: 0;
}
.member-shop-card-sm .member-shop-logo {
    width: 28px;
    height: 28px;
    margin-top: 2px;
}

/* ============================================================
   ユーザーアクションバー（商店・商品詳細ページ）
   ============================================================ */
.shop-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* アクションボタン共通 */
.btn-shop-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #6c757d;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.btn-shop-action:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

/* お気に入りON */
.btn-shop-action.fav-active {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff5f5;
}
.btn-shop-action.fav-active:hover {
    background: #fee2e2;
}

/* 行ったよON */
.btn-shop-action.visit-active {
    border-color: #22c55e;
    color: #22c55e;
    background: #f0fdf4;
}
.btn-shop-action.visit-active:hover {
    background: #dcfce7;
}

/* 機能説明アイコン（未ログイン時） */
.btn-shop-action-help {
    display: inline-flex;
    align-items: center;
    color: #adb5bd;
    font-size: 1.1rem;
    cursor: default;
    padding: 7px 4px;
}
.btn-shop-action-help:hover {
    color: #6c757d;
}

/* 通報ボタンは右寄せ */
.btn-shop-report {
    margin-left: auto;
    color: #adb5bd;
}
.btn-shop-report:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff5f5;
}

/* ============================================================
   マイページ拡張スタイル（お気に入り・履歴・エリア設定）
   ============================================================ */

/* セクション共通 */
.mypage-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}
.mypage-section h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tc-text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tc-teal-light);
}

/* 空状態メッセージ */
.mypage-empty {
    color: var(--tc-muted);
    font-size: .875rem;
    text-align: center;
    padding: 20px 0;
}

/* min-width:0 ユーティリティ（flexの文字切れ防止） */
.min-width-0 {
    min-width: 0;
}

/* ============================================================
   アカウント設定 - 危険ゾーン（account.php）
   ============================================================ */

/* 危険ゾーンセクション: 赤系の控えめなボーダーで通常セクションと区別する */
.account-danger-zone {
    border-color: #f5c6cb;
    background: #fff8f8;
}

/* 危険ゾーン見出し: 赤系カラーで視覚的に強調 */
.account-danger-zone__title {
    color: #dc3545 !important;
    border-bottom-color: #f5c6cb !important;
}

/* セキュリティ設定タブ: mypage-sectionのpaddingを0にしているため
   タブヘッダー部分をカード内に自然に収める */
.mypage-section .nav-tabs {
    border-bottom: none;
}
.mypage-section .nav-tabs .nav-link {
    color: var(--tc-muted);
    font-size: .875rem;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    transition: color 0.18s, background 0.18s;
}
.mypage-section .nav-tabs .nav-link:hover {
    color: var(--tc-teal-dark);
    background: var(--tc-teal-light);
}
.mypage-section .nav-tabs .nav-link.active {
    color: var(--tc-teal-dark);
    font-weight: 700;
    background: #fff;
    border-color: #e0e0e0 #e0e0e0 #fff;
}

/* お気に入り登録日バッジ（カード画像右下） */
.fav-date-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.52);
    color: #fff;
    font-size: .62rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
    letter-spacing: 0.02em;
}
/* 商品サムネイル（56px角）の場合は相対配置ラッパーが必要 */
.mypage-item-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

/* ------------------------------------------------------------
   お知らせリスト
   ------------------------------------------------------------ */
.mypage-notice-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mypage-notice-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.mypage-notice-item:last-child {
    border-bottom: none;
}
.mypage-notice-date {
    font-size: .75rem;
    color: var(--tc-muted);
    white-space: nowrap;
    padding-top: 2px;
    min-width: 76px;
}
.mypage-notice-title {
    font-size: .875rem;
    font-weight: 600;
    color: var(--tc-text);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
}
.mypage-notice-title:hover {
    color: var(--tc-teal);
}
.mypage-notice-sender {
    font-size: .75rem;
    color: var(--tc-muted);
}

/* ------------------------------------------------------------
   お気に入り商店カード（✕ボタン付き）
   ------------------------------------------------------------ */
.card-with-remove {
    position: relative;
}
.card-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: .7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background .15s;
    z-index: 5;
}
.card-remove-btn:hover {
    background: #ef4444;
}

/* ------------------------------------------------------------
   お気に入り商品カード
   ------------------------------------------------------------ */
.mypage-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    text-decoration: none;
    color: var(--tc-text);
}
.mypage-item-card:last-child {
    border-bottom: none;
}
.mypage-item-card:hover {
    color: var(--tc-teal-dark);
}
.mypage-item-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.mypage-item-thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--tc-gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.mypage-item-name {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mypage-item-price {
    font-size: .8rem;
    color: var(--tc-teal-dark);
    font-weight: 700;
    margin-bottom: 2px;
}
.mypage-item-shop {
    font-size: .75rem;
    color: var(--tc-muted);
}
/* 商品カードの✕ボタンは右端に */
.mypage-item-card .card-remove-btn {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    background: rgba(0,0,0,.25);
}

/* ------------------------------------------------------------
   行ったよ／リクエスト／通報 履歴リスト
   ------------------------------------------------------------ */
.mypage-history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* 履歴の行コンテナ：左にアイコン、中央に情報、右に日付・操作 */
.mypage-history-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 8px;
    border-bottom: 1px solid #eef0f2;
    transition: background-color .18s ease;
}
.mypage-history-item:last-child {
    border-bottom: none;
}
.mypage-history-item:hover {
    background-color: #fafbfc;
}
/* 種別を示すアイコン（38px円形）。タブ別に色違いの薄背景 */
.mypage-history-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
    margin-top: 1px;
}
.mypage-history-icon-request {
    background: #e0f4f3;
    color: var(--tc-teal-dark, #0d8a8a);
}
.mypage-history-icon-report {
    background: #f1f3f5;
    color: #868e96;
}
/* 旧 .mypage-history-logo（店舗ロゴ用）も残しておく：行ったよ画面で使用 */
.mypage-history-logo {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--tc-gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.mypage-history-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.mypage-history-logo-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--tc-gray-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1rem;
    flex-shrink: 0;
}
.mypage-history-info {
    flex: 1;
    min-width: 0;
}
/* 履歴メイン：商品名・通報理由など */
.mypage-history-main {
    font-size: .95rem;
    font-weight: 600;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
    line-height: 1.3;
}
/* 履歴サブ：メーカー・店舗名など */
.mypage-history-sub {
    font-size: .78rem;
    color: var(--tc-muted, #868e96);
    margin-bottom: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mypage-history-sep {
    margin: 0 .4em;
    color: #cfd4d8;
}
/* 店舗名リンク：通常はミュート色、hoverでアクセントカラー */
.mypage-history-shoplink {
    color: var(--tc-muted, #868e96);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}
.mypage-history-shoplink:hover {
    color: var(--tc-teal-dark, #0d8a8a);
    border-bottom-color: var(--tc-teal-dark, #0d8a8a);
}
/* 削除済み店舗：取り消し線で示す */
.mypage-history-shop-deleted {
    color: #adb5bd;
    text-decoration: line-through;
}
/* 日付：右側に小さく薄く */
.mypage-history-date {
    font-size: .72rem;
    color: #adb5bd;
    flex-shrink: 0;
    white-space: nowrap;
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}
/* 取り消しボタン：アウトラインで控えめ、hoverで赤に */
.mypage-history-cancel-btn {
    font-size: .72rem;
    padding: 4px 10px;
    white-space: nowrap;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    flex-shrink: 0;
    line-height: 1.2;
}
.mypage-history-cancel-btn:hover:not(:disabled) {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff5f5;
}
.mypage-history-cancel-btn:disabled {
    opacity: .6;
    cursor: wait;
}

/* スマホ：日付を改行して下に逃がす */
@media (max-width: 575.98px) {
    .mypage-history-item {
        flex-wrap: wrap;
        padding: 12px 4px;
        gap: 10px;
    }
    .mypage-history-info {
        flex: 1 1 calc(100% - 52px);
    }
    .mypage-history-date {
        order: 3;
        flex-basis: 100%;
        padding-top: 0;
        padding-left: 52px;
    }
    .mypage-history-cancel-btn {
        order: 2;
        margin-left: auto;
    }
}

/* ------------------------------------------------------------
   マイエリア設定
   ------------------------------------------------------------ */
.mypage-area-card {
    background: var(--tc-gray-bg);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.mypage-area-current {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--tc-teal-dark);
}
.mypage-area-badge {
    display: inline-block;
    font-size: .7rem;
    background: var(--tc-teal);
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ------------------------------------------------------------
   SNSシェアボタン（公開ページ共通）
   ------------------------------------------------------------ */
.hero-share-label {
    font-size: .8rem;
    color: rgba(255,255,255,.7);
}
/* 各ボタン共通 */
.btn-sns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
}
.btn-sns:hover {
    color: #fff;
    opacity: .85;
    transform: translateY(-2px);
}
/* LINE */
.btn-sns-line       { background: #06c755; }
/* X（旧Twitter） */
.btn-sns-x          { background: #000; }
/* Facebook */
.btn-sns-facebook   { background: #1877f2; }
/* Instagram（グラデーション） */
.btn-sns-instagram  {
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* SNSボタン 小サイズ（エリアバー内など） */
.btn-sns-sm {
    width: 30px;
    height: 30px;
    font-size: .85rem;
}

/* フッター用SNSボタン（モノクロシンプル・濃いティール背景上） */
.btn-sns-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}
.btn-sns-footer:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

/* ------------------------------------------------------------
   業種ラベルバッジ（検索結果・itemカード）
   ------------------------------------------------------------ */
/* おすすめバッジ（有料プラン店舗） */
.search-list-badge--rec {
    background: #fef08a;
    color: #854d0e;
    border: 1px solid #f0a500;
}

/* 検索結果のバッジ */
.search-list-badge--type {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    font-size: .7rem;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
/* ============================================================
   ページネーション（TICAMOカラー・全公開ページ共通）
   ============================================================ */
.pagination {
    gap: 3px;
}
.page-link {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
    color: var(--tc-teal);
    border-color: #dee2e6;
    border-radius: 6px !important;
    transition: background 0.15s, color 0.15s;
}
.page-link:hover {
    background: var(--tc-teal-light);
    color: var(--tc-teal-dark);
    border-color: var(--tc-teal);
}
.page-item.active .page-link {
    background: var(--tc-teal);
    border-color: var(--tc-teal);
    color: #fff;
}
.page-item.disabled .page-link {
    color: #adb5bd;
    border-color: #dee2e6;
    background: #fff;
}

/* ============================================================
   検索グリッドカード（search.php リデザイン）
   ============================================================ */

/* グリッドコンテナ */
.search-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 767px) {
    .search-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* カードベース */
.search-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: 0; /* 検索結果カードは角丸なし */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow 0.2s;
}
.search-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    color: inherit;
    text-decoration: none;
}

/* 画像エリア */
.search-card__img-wrap {
    position: relative;
    height: 160px; /* 画像なし時もプレースホルダーの高さを確保 */
}
.search-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 画像上バッジ共通 */
.search-card__badge {
    position: absolute;
    font-size: 0.67rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.6;
}
/* おすすめバッジ（左上） */
.search-card__badge--rec {
    top: 8px;
    left: 8px;
    background: #f0a500;
    color: #fff;
}
/* 在庫切れバッジ（右上） */
.search-card__badge--out {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
/* あとわずかバッジ（右上） */
.search-card__badge--low {
    top: 8px;
    right: 8px;
    background: #f97316;
    color: #fff;
}

/* テキストエリア */
.search-card__body {
    padding: 10px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 商品名（最大2行） */
.search-card__name {
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 価格 */
.search-card__price {
    font-size: 0.9rem;
    color: #c0392b;
    font-weight: 700;
}
/* ご来店特価 */
.search-card__price--hidden {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
}

/* カテゴリ・業種タグ */
.search-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.search-card__tag {
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--tc-teal);
    color: var(--tc-teal);
    white-space: nowrap;
}
.search-card__tag--type {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* 店舗名（下寄せ） */
.search-card__shop {
    font-size: 0.78rem;
    color: #444;
    margin-top: auto;
    gap: 4px;
}
.search-card__shop > span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.search-card__date {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--tc-muted);
}

/* エリア + 距離 */
.search-card__meta {
    font-size: 0.73rem;
    color: #888;
}

/* プラン差別化 */
/* スタンダードプラン */
.search-card--featured {
    background: #fffde7;
    border-color: #f0a500;
}
.search-card--featured:hover {
    background: #fff8c5;
}
/* プレミアムプラン（将来用） */
.search-card--premium {
    background: #fffbeb;
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px #fbbf24;
}
.search-card--premium:hover {
    background: #fef3c7;
}
/* 在庫切れ */
.search-card--out {
    opacity: 0.62;
}

/* ============================================================
   aboutページ（私たちの想い）LP風セクション
   ============================================================ */

/* 全幅セクション共通パディング */
.about-section {
    padding: 72px 0;
}
.about-section--sm {
    padding: 56px 0;
}

/* ビジョンセクション（teal-dark背景） */
.about-vision {
    background: var(--tc-teal-dark);
    color: #fff;
}
.about-vision--hero {
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.26) 36%, rgba(0, 0, 0, 0.08) 64%, rgba(0, 0, 0, 0) 100%),
        url('../img/about_hero.png') center center / cover no-repeat;
    min-height: 560px;
    display: flex;
    align-items: center;
}
.about-vision .section-label {
    color: var(--tc-teal-light);
}
.about-vision .section-title {
    color: #fff;
    font-size: 1.8rem;
}
.about-vision-lead {
    color: rgba(255,255,255,0.82);
    font-size: 1rem;
    line-height: 1.9;
    max-width: 620px;
    margin: 0 auto;
}

/* 課題提起セクション（白背景） */
.about-problem {
    background: #fff;
}
.about-problem-text {
    font-size: 1rem;
    line-height: 1.9;
    max-width: 680px;
    margin: 0 auto;
    color: var(--tc-text);
}

/* こだわりセクション（グレー背景） */
.about-values {
    background: var(--tc-gray-bg);
}
.about-value-card {
    text-align: center;
    padding: 1.5rem 1rem;
}
.about-value-icon {
    font-size: 2rem;
    color: var(--tc-teal);
    margin-bottom: 1rem;
}
.about-value-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.about-value-text {
    font-size: 0.88rem;
    color: var(--tc-muted);
    line-height: 1.7;
    margin: 0;
}

/* aboutページ H2：大きめ明朝体（Noto Serif JP） */
.about-h2 {
    font-family: 'Noto Serif JP', 'Yu Mincho', '游明朝', 'Hiragino Mincho ProN', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
@media (max-width: 575px) {
    .about-h2 {
        font-size: 1.5rem;
    }
}

/* 悪循環・好循環サイクル図 */
.about-cycle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    max-width: 720px;
    margin: 2rem auto 0;
}
.about-cycle-item {
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tc-text);
    white-space: nowrap;
}
.about-cycle--bad .about-cycle-item {
    border-color: #f5c2c7;
    background: #fff5f5;
    color: #842029;
}
.about-cycle--good .about-cycle-item {
    border-color: var(--tc-teal-light);
    background: #f0feff;
    color: var(--tc-teal-dark);
}
.about-cycle-arrow {
    color: var(--tc-muted);
    font-size: 1rem;
}

/* 未来像セクション（teal-light背景） */
.about-future {
    background: var(--tc-teal-light);
}
.about-future-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.75rem 1.5rem;
    height: 100%;
}
.about-future-icon {
    font-size: 1.8rem;
    color: var(--tc-teal);
    margin-bottom: 0.75rem;
}
.about-future-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--tc-teal-dark);
}
.about-future-text {
    font-size: 0.88rem;
    color: var(--tc-muted);
    line-height: 1.8;
    margin: 0;
}

/* できることセクション（グレー背景） */
.about-features {
    background: var(--tc-gray-bg);
}
.about-feature-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.75rem 1.5rem;
    height: 100%;
}
.about-feature-header {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--tc-teal-light);
}
.about-feature-header i {
    color: var(--tc-teal);
}
.about-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.about-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tc-text);
    margin-bottom: 0.6rem;
}
.about-feature-list li:last-child {
    margin-bottom: 0;
}
.about-feature-list .fa-circle-check {
    color: var(--tc-teal);
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* CTAセクション（白背景） */
.about-cta {
    background: #fff;
}
.about-cta-inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}
.about-cta-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.about-cta-text {
    font-size: 1rem;
    color: var(--tc-muted);
    margin-bottom: 1.5rem;
}

/* TOPページ横スクロールカードのラベル */
.scroll-card-type-label {
    font-size: .68rem;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: 1px 6px;
    display: inline-block;
    margin-top: 2px;
}

/* ============================================================
   静的ページ共通スタイル（about / privacy / terms / faq 等）
   ============================================================ */

/* メインコンテンツ領域 */
.static-content {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--tc-text);
}

/* セクション見出し（h2） */
.static-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    border-left: 4px solid var(--tc-teal);
    padding-left: 0.75rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
.static-content h2:first-child {
    margin-top: 0;
}

/* サブセクション見出し（h3） */
.static-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tc-text);
    border-bottom: 1px dashed #ccc;
    padding-bottom: 0.3rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* 本文テキスト */
.static-content p {
    margin-bottom: 1rem;
}
.static-content ul,
.static-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.static-content li {
    margin-bottom: 0.3rem;
}

/* 定義テーブル（会社概要・特商法表記など） */
.static-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.static-table th,
.static-table td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
    text-align: left;
}
.static-table th {
    width: 30%;
    color: var(--tc-muted);
    font-weight: 600;
    white-space: nowrap;
    background: var(--tc-gray-bg);
}
@media (max-width: 575px) {
    .static-table th,
    .static-table td {
        display: block;
        width: 100%;
    }
    .static-table th {
        border-bottom: none;
        padding-bottom: 0.2rem;
    }
}

/* サイドバーウィジェット共通 */
.sidebar-widget {
    margin-bottom: 1.5rem;
}
.sidebar-widget-body {
    padding: 1rem;
}

/* バナー・広告スペース */
.sidebar-banner {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid #e9ecef;
    transition: opacity 0.2s;
}
.sidebar-banner:last-child {
    margin-bottom: 0;
}
.sidebar-banner:hover {
    opacity: 0.85;
}
.sidebar-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* 広告プレースホルダー（画像未設定時） */
.sidebar-banner-placeholder {
    background: var(--tc-gray-bg);
    border: 2px dashed #ced4da;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 250px;
    color: var(--tc-muted);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    gap: 0.4rem;
}

/* 関連リンク一覧 */
.sidebar-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-link-list li {
    border-bottom: 1px solid #f0f0f0;
}
.sidebar-link-list li:last-child {
    border-bottom: none;
}
.sidebar-link-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.25rem;
    font-size: 0.88rem;
    color: var(--tc-text);
    text-decoration: none;
    transition: color 0.15s;
}
.sidebar-link-list a:hover {
    color: var(--tc-teal);
}
.sidebar-link-list .fa-chevron-right {
    font-size: 0.65rem;
    color: var(--tc-teal);
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================================
   商店向けLPページ（lp/shop/）
   ============================================================ */

/* Heroセクション */
.lp-hero {
    background: linear-gradient(135deg, var(--tc-teal-dark) 0%, var(--tc-teal) 100%);
    padding: 80px 0 70px;
    color: #fff;
    text-align: center;
}
.lp-hero--shop {
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0.04) 62%, rgba(0, 0, 0, 0) 100%),
        url('../img/lp_shop_hero.png') center center / cover no-repeat;
    min-height: 460px;
    display: flex;
    align-items: center;
}
.lp-hero--group {
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0.04) 62%, rgba(0, 0, 0, 0) 100%),
        url('../img/lp_group_hero.png') center center / cover no-repeat;
    min-height: 460px;
    display: flex;
    align-items: center;
}
.lp-hero-catch {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 1rem;
}
.lp-hero-sub {
    font-size: 1rem;
    opacity: 0.88;
    margin-bottom: 2rem;
    line-height: 1.8;
}
.lp-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.95);
    color: var(--tc-teal-dark);
    font-weight: 600;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1.2rem;
    font-size: 0.85rem;
    margin-bottom: 1.75rem;
    letter-spacing: 0.05em;
    position: relative;
}
/* 下向きしっぽ */
.lp-hero-badge::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-top-color: rgba(255,255,255,0.95);
    border-bottom: 0;
}

/* お悩みセクション */
.lp-section {
    padding: 72px 0;
}
.lp-section--sm {
    padding: 52px 0;
}
.lp-pain-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 640px;
}
.lp-pain-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid #e9ecef;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    line-height: 1.65;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.lp-pain-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(32,178,140,0.13);
    border-color: var(--tc-teal);
}
.lp-pain-list li .pain-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #fdeee9;
    color: var(--tc-salmon);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 機能一覧 */
.lp-feature-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    height: 100%;
    border: 2px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.lp-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(32,178,140,0.15);
    border-color: var(--tc-teal);
}
.lp-feature-icon {
    font-size: 2rem;
    color: var(--tc-teal);
    margin-bottom: 0.75rem;
}
.lp-feature-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--tc-teal-dark);
}
.lp-feature-text {
    font-size: 0.82rem;
    color: var(--tc-muted);
    line-height: 1.65;
    margin: 0;
}

/* プランカード */
.lp-plan-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    height: 100%;
    position: relative;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.lp-plan-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.lp-plan-card--recommended {
    border-color: var(--tc-teal);
    box-shadow: 0 4px 18px rgba(32,178,140,0.18);
}
.lp-plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tc-teal);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
}
.lp-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--tc-teal-dark);
}
.lp-plan-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--tc-teal);
    margin-bottom: 0.25rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-plan-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--tc-muted);
}
.lp-plan-price-note {
    font-size: 0.78rem;
    color: var(--tc-muted);
    margin-bottom: 1.25rem;
}
.lp-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    flex: 1; /* リストが残スペースを埋め、ボタンを底揃えにする */
}
.lp-plan-features li {
    font-size: 0.85rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-plan-features li:last-child {
    border-bottom: none;
}
.lp-plan-features .fa-check {
    color: var(--tc-teal);
    flex-shrink: 0;
}
.lp-plan-features .fa-minus {
    color: #ced4da;
    flex-shrink: 0;
}

/* プランカード：人気プラン（ダークティール） */
.lp-plan-row {
    padding-top: 1.5rem; /* バッジ飛び出し14px＋浮き上がり6px分の余白 */
}
.lp-plan-card--popular {
    background: linear-gradient(145deg, #006971, #004a50);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 36px rgba(0, 105, 113, 0.38);
    transform: translateY(-6px);
}
.lp-plan-card--popular .lp-plan-badge {
    background: #fff;
    color: var(--tc-teal-dark);
}
.lp-plan-card--popular .lp-plan-name {
    color: #fff;
}
.lp-plan-card--popular .lp-plan-price {
    color: #fff;
}
.lp-plan-card--popular .lp-plan-price span {
    color: rgba(255, 255, 255, 0.65);
}
.lp-plan-card--popular .lp-plan-price-note {
    color: rgba(255, 255, 255, 0.65);
}
.lp-plan-card--popular .lp-plan-features li {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* 登録件数・画像枚数タグ */
.lp-plan-limit-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    background: #f4f6f8;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
}
.lp-plan-card--popular .lp-plan-limit-box {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}
.lp-plan-limit-item {
    color: var(--tc-teal-dark);
    white-space: nowrap;
}
.lp-plan-card--popular .lp-plan-limit-item {
    color: rgba(255, 255, 255, 0.9);
}

/* 機能リスト：含む / 含まない */
.lp-feat-in .fa-check {
    color: var(--tc-teal);
    flex-shrink: 0;
}
.lp-plan-card--popular .lp-feat-in .fa-check {
    color: #7ffee8;
}
.lp-feat-out {
    opacity: 0.45;
}
.lp-feat-out .fa-xmark {
    color: #adb5bd;
    flex-shrink: 0;
}
.lp-plan-card--popular .lp-feat-out {
    color: rgba(255, 255, 255, 0.5);
}

/* 機能詳細比較テーブル */
.lp-compare-wrap {
    background: #fff;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}
.lp-compare-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.lp-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.865rem;
}
.lp-compare-table thead th {
    padding: 0.7rem 1rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    border-bottom: 2px solid var(--tc-teal-light);
    text-align: center;
    white-space: nowrap;
}
.lp-compare-feature-col {
    text-align: left !important;
    width: 40%;
}
.lp-compare-popular-col {
    background: var(--tc-teal-light);
    color: var(--tc-teal-dark) !important;
}
thead .lp-compare-popular-col {
    border-radius: 8px 8px 0 0;
}
.lp-compare-table tbody td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #f0f2f4;
    text-align: center;
    vertical-align: middle;
}
.lp-compare-table tbody tr:last-child td {
    border-bottom: none;
}
.lp-compare-table tbody td:first-child {
    text-align: left;
}
.lp-compare-table tbody td:first-child small {
    display: block;
    color: var(--tc-muted);
    font-size: 0.75rem;
    margin-top: 0.1rem;
}
.lp-compare-table tbody .lp-compare-popular-col {
    background: rgba(0, 174, 187, 0.06);
}
.lp-compare-category td {
    background: #f6f8fa !important;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--tc-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.45rem 1rem !important;
    text-align: left !important;
    border-bottom: none;
}
.lp-icon-check {
    color: var(--tc-teal);
    font-size: 1rem;
}
.lp-icon-xmark {
    color: #ced4da;
    font-size: 0.9rem;
}

/* ============================================================
   プレミアム団体PR枠（/pref/・/city/）
   ============================================================ */
.premium-group-section {
    padding: 3rem 0;
}
.premium-group-card {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f7fafb 100%);
    border: 1px solid #e4eaec;
    border-radius: 0; /* エリアページのPR団体カードは角丸なし */
    box-shadow: 0 10px 32px rgba(0, 105, 113, 0.10);
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.premium-group-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #c9a14b 0%, #f3d97a 50%, #c9a14b 100%);
}
.premium-group-card:hover {
    box-shadow: 0 14px 40px rgba(0, 105, 113, 0.18);
    transform: translateY(-2px);
}
.premium-group-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    background: linear-gradient(135deg, #c9a14b, #b8862d);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.32rem 0.85rem;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(184, 134, 45, 0.35);
}
.premium-group-link {
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}
.premium-group-thumb-wrap {
    flex: 0 0 38%;
    max-width: 38%;
    min-height: 260px;
    background: #f0f4f5;
    position: relative;
    overflow: hidden;
}
.premium-group-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform 0.4s;
}
.premium-group-thumb--logo {
    object-fit: contain;
    padding: 1.5rem;
    background: #fff;
}
.premium-group-card:hover .premium-group-thumb {
    transform: scale(1.04);
}
.premium-group-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    color: var(--tc-teal-dark);
    font-size: 4rem;
}
.premium-group-body {
    flex: 1;
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.65rem;
}
.premium-group-area {
    font-size: 0.82rem;
    color: var(--tc-muted);
    margin: 0;
}
.premium-group-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    margin: 0;
    line-height: 1.35;
}
.premium-group-catch {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.5;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.premium-group-desc {
    font-size: 0.88rem;
    color: var(--tc-muted);
    margin: 0;
    line-height: 1.65;
    /* 3行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.premium-group-more {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    color: var(--tc-teal);
    font-weight: 700;
    font-size: 0.9rem;
    transition: gap 0.2s;
}
.premium-group-card:hover .premium-group-more {
    color: var(--tc-teal-dark);
}
.premium-group-card:hover .premium-group-more .fa-arrow-right {
    transform: translateX(3px);
}
.premium-group-more .fa-arrow-right {
    transition: transform 0.2s;
}

@media (max-width: 767px) {
    .premium-group-link {
        flex-direction: column;
    }
    .premium-group-thumb-wrap {
        flex: 0 0 auto;
        max-width: 100%;
        height: 200px;
        min-height: 200px;
    }
    .premium-group-body {
        padding: 1.5rem 1.5rem 1.75rem;
    }
    .premium-group-name {
        font-size: 1.25rem;
    }
    .premium-group-badge {
        top: 12px;
        left: 12px;
        font-size: 0.65rem;
        padding: 0.25rem 0.7rem;
    }
}

/* 3ステップ */
.lp-step-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.lp-step-item {
    flex: 1 1 220px;
    max-width: 280px;
    text-align: center;
}
.lp-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--tc-teal);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}
.lp-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--tc-teal-dark);
}
.lp-step-text {
    font-size: 0.82rem;
    color: var(--tc-muted);
    line-height: 1.65;
}
.lp-step-arrow {
    font-size: 1.6rem;
    color: var(--tc-teal);
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 18px; /* ステップ番号の丸（52px）の中央に合わせる */
    display: flex;
    align-items: center;
}
.lp-step-arrow::before,
.lp-step-arrow::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tc-teal-light);
}
@media (max-width: 575px) {
    .lp-step-arrow { display: none; }
}

/* FAQ */
.lp-faq-item {
    border-bottom: 1px solid #e9ecef;
    padding: 1.1rem 0;
}
.lp-faq-item:first-child {
    border-top: 1px solid #e9ecef;
}
.lp-faq-q {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tc-teal-dark);
    margin-bottom: 0.5rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.lp-faq-q::before {
    content: "Q";
    background: var(--tc-teal);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
}
.lp-faq-a {
    font-size: 0.88rem;
    color: var(--tc-muted);
    line-height: 1.7;
    padding-left: 1.75rem;
    margin: 0;
}

/* 団体タイプ別訴求カード */
.lp-org-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    height: 100%;
    border: 2px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.lp-org-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(32,178,140,0.15);
    border-color: var(--tc-teal);
}
.lp-org-icon {
    font-size: 1.8rem;
    color: var(--tc-teal);
    flex-shrink: 0;
    width: 2.5rem;
    text-align: center;
    margin-top: 2px;
}
.lp-org-body {
    flex: 1;
}
.lp-org-type {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    margin-bottom: 0.5rem;
}
.lp-org-text {
    font-size: 0.85rem;
    color: var(--tc-muted);
    line-height: 1.7;
    margin: 0;
}

/* LP ビジョンタグライン */
.lp-vision-tagline {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
    color: var(--tc-teal-dark);
    letter-spacing: 0.08em;
    display: block;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
}

/* LP CTA最終 */
.lp-cta {
    background: #0d2f33;
    padding: 64px 0;
    color: #fff;
    text-align: center;
}
.lp-cta-title {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.lp-cta-sub {
    font-size: 0.92rem;
    opacity: 0.85;
    margin-bottom: 2rem;
    line-height: 1.8;
}
.lp-cta-col {
    text-align: center;
}
.lp-cta-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    opacity: 0.65;
    margin-bottom: 0.75rem;
}
.lp-cta-divider {
    width: 1px;
    height: 180px;
    background: rgba(255, 255, 255, 0.2);
}
.lp-cta .btn {
    background: #fff;
    color: var(--tc-teal-dark);
    border: 2px solid #fff;
    font-weight: 700;
}
.lp-cta .btn:hover {
    background: var(--tc-teal-light);
    border-color: var(--tc-teal-light);
    color: var(--tc-teal-dark);
}

/* ============================================================
   人気の商店ランキング（5列グリッド）
   ============================================================ */

/* 5カラムグリッド（tablet:3列 / sp:2列） */
.shop-rank-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
@media (max-width: 991px) {
    .shop-rank-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
    .shop-rank-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ------------------------------------------------------------
   人気の店舗 横スクロール（TOP10・一度に5枚表示）
   ------------------------------------------------------------ */
/* ラッパー（矢印ボタン配置の基準） */
.shop-rank-scroll-wrap {
    position: relative;
}

/* スクロールトラック（flex横並び＋scroll-snap） */
.shop-rank-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding-bottom: 4px;
    /* スクロールバー非表示 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.shop-rank-scroll::-webkit-scrollbar { display: none; }

/* 各カードの幅（PC:5枚 / tablet:3枚 / sp:2枚） */
.shop-rank-scroll > .shop-rank-card {
    flex: 0 0 calc((100% - 16px * 4) / 5);
    scroll-snap-align: start;
}
@media (max-width: 991px) {
    .shop-rank-scroll > .shop-rank-card {
        flex: 0 0 calc((100% - 16px * 2) / 3);
    }
}
@media (max-width: 575px) {
    .shop-rank-scroll { gap: 10px; }
    .shop-rank-scroll > .shop-rank-card {
        flex: 0 0 calc((100% - 10px) / 2);
    }
}

/* ◀▶ ボタン（カードに重ねるため position:absolute） */
.shop-rank-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    color: #fac03e;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.shop-rank-scroll-prev { left: -8px; }
.shop-rank-scroll-next { right: -8px; }
.shop-rank-scroll-btn:hover:not(:disabled) {
    background: #fac03e;
    color: #fff;
}
/* 端まで来たら非表示（pointer-eventsも切る） */
.shop-rank-scroll-btn:disabled {
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------
   団体ページ 売り場（カテゴリ別アイル）
   ・「商店街＝ひとつの大きなスーパー」の売り場を、カテゴリ単位の
     横スクロール棚（.shop-rank-scroll を流用）として縦に積む
   ------------------------------------------------------------ */
/* 売り場セクション：見出し＋サブテキストのまとめブロック */
.sales-floor-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 4px solid var(--tc-teal);
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    margin-bottom: 24px;
}
.sales-floor-heading__title {
    /* アイコン色をティールに固定（inline style 不要にする） */
    color: var(--tc-text);
}
.sales-floor-heading__title i {
    color: var(--tc-teal);
}
.sales-floor-intro {
    color: var(--tc-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 24px;
}
/* heading内での余白はgapで制御するため margin-bottom を上書き */
.sales-floor-heading .sales-floor-intro {
    margin-bottom: 0;
}
.sales-floor-heading .sales-floor-intro i {
    color: var(--tc-teal);
    font-size: 0.85rem;
}
/* 1売り場（カテゴリ）のかたまり */
.sales-floor-aisle {
    /* 上罫線でカテゴリを視覚的に区切る（最初の1つは不要なので :first-child で除外） */
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
    margin-bottom: 0;
}
.sales-floor-aisle:first-child,
.sales-floor-heading + .sales-floor-aisle {
    padding-top: 0;
    border-top: none;
}
/* アイル下余白（棚とその次のアイル見出しの間） */
.sales-floor-aisle .shop-rank-scroll-wrap {
    margin-bottom: 24px;
}
/* アイル見出し行（カテゴリ名＋件数 ／ すべて見る） */
.sales-floor-aisle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    /* モバイルで折返す場合も「すべて見る」が独立した行に落ちるよう wrap は許容しない */
    flex-wrap: nowrap;
}
.sales-floor-aisle-title {
    font-size: 1.0rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    /* 長いカテゴリ名は省略（「すべて見る」を押しやすくするため） */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.sales-floor-aisle-title i {
    color: var(--tc-teal);
    flex-shrink: 0;
}
.sales-floor-aisle-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--tc-muted);
    /* 件数表示は省略しない（3文字程度なので問題なし） */
    flex-shrink: 0;
}
/* 「すべて見る」リンク：既存の .section-more に合わせたスタイル */
.sales-floor-more {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tc-teal);
    text-decoration: none;
    flex-shrink: 0;
    /* タップ対象を最低44pxに確保 */
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 0;
    transition: color 0.18s;
}
.sales-floor-more:hover {
    color: var(--tc-teal-dark);
}
/* 在庫カードの価格行（notice-card 本文に追加） */
/* 売り場は左カラム（col-lg-8）と幅が狭いので、PCでは1画面4枚に調整 */
@media (min-width: 992px) {
    .sales-floor .shop-rank-scroll > .shop-rank-card {
        flex: 0 0 calc((100% - 16px * 3) / 4);
    }
}

/* ------------------------------------------------------------
   売り場カード（floor-card）：画像サムネイルのみ＋下端オーバーレイ
   ・本文エリアを廃して省スペース化。店名・商品名は画像下端に重ねる
   ・上部バッジ（NEW=左上 / 在庫切れ=右上）とは干渉しない
   ------------------------------------------------------------ */
/* 画像下端の情報オーバーレイ（黒グラデーションで可読性を確保） */
.floor-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0) 100%);
    /* クリックは親<a>に委ねる */
    pointer-events: none;
}
/* 店名（極小・うっすら白） */
.floor-card-shop {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 商品名（小・太字・白） */
.floor-card-name {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 在庫切れカードは軽くグレーアウト */
.floor-card--out .notice-thumb-img {
    filter: grayscale(0.4);
    opacity: 0.7;
}

/* ------------------------------------------------------------
   検索ページ 商店街内検索バナー（団体スコープ）
   ・group.php「この売り場をすべて見る」からの遷移時に表示
   ------------------------------------------------------------ */
.search-group-scope {
    background: var(--tc-teal-light);  /* rgba より明度が安定した既存変数に統一 */
    border: 1px solid rgba(0, 174, 187, 0.45);
    border-radius: 10px;
    padding: 9px 14px;
}
.search-group-scope-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
}
.search-group-scope-clear {
    /* ピル形ボタン風にして「解除できる」ことを明示 */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tc-muted);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 3px 10px;
    background: #fff;
    transition: color 0.18s, border-color 0.18s;
}
.search-group-scope-clear:hover {
    color: var(--tc-teal-dark);
    border-color: var(--tc-teal);
}

/* タイトル行（店名/商品名 左 + ♥ 右詰め） */
.rank-card-title-row {
    display: flex !important;          /* -webkit-box を上書き */
    -webkit-line-clamp: unset !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.rank-card-title-row > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rank-heart {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--tc-muted);
    white-space: nowrap;
}
.rank-heart .fa-heart {
    color: #e74c3c;
    margin-right: 2px;
}

/* ---- 期間タブ ---- */
.rank-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border-bottom: 2px solid #e8eaed;
}
.rank-tab {
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tc-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.rank-tab:hover {
    color: var(--tc-teal);
}
.rank-tab.active {
    color: var(--tc-teal);
    border-bottom-color: var(--tc-teal);
}

/* ランキングバッジ（王冠＋テキスト） */
.shop-rank-badge {
    font-size: 0.70rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* ============================================================
   ランキングリボン（1〜3位用・フラッグ型）
   - サムネイル左上から下に垂れる短い旗
   - 下端はV字にカット（ノッチ）
   - 王冠＋順位の2段構成
   - サムネイル内に収まる（はみ出しなし）
   ============================================================ */
.rank-ribbon {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 3;

    width: 34px;
    min-height: 50px;
    padding: 6px 2px 14px; /* 下にパディング多め＝ノッチ分の余白 */

    /* 王冠と順位を縦2段に */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;

    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: 0;

    /* 下端をV字にカット（フラッグ型） */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        50% calc(100% - 8px),
        0 100%
    );

    /* 軽いドロップシャドウで浮かせる */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

/* 順位ごとの色：高級感のあるメタリックグラデーション */
/* ゴールド：白っぽい光沢を抑えて文字可読性キープ */
.rank-ribbon--gold {
    background: linear-gradient(
        135deg,
        #6B5010 0%,
        #B8941F 30%,
        #D4AF37 50%,
        #B8941F 70%,
        #6B5010 100%
    );
}
/* シルバー */
.rank-ribbon--silver {
    background: linear-gradient(
        135deg,
        #4A4A4A 0%,
        #8E8E8E 30%,
        #B0B0B0 50%,
        #8E8E8E 70%,
        #4A4A4A 100%
    );
}
/* ブロンズ（銅） */
.rank-ribbon--bronze {
    background: linear-gradient(
        135deg,
        #5A2A0A 0%,
        #9C5A24 30%,
        #B87333 50%,
        #9C5A24 70%,
        #5A2A0A 100%
    );
}

/* 明るい部分でも文字が読めるよう影を追加 */
.rank-ribbon {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 0 1px rgba(0, 0, 0, 0.6);
}

/* 王冠アイコン（上段） */
.rank-ribbon i {
    font-size: 0.9rem;
    line-height: 1;
}

/* 順位テキスト（下段・「1位」） */
.rank-ribbon-num {
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
}

/* .shop-rank-placeholder は廃止。notice-thumb-placeholder--ticamo に統一 */

/* ============================================================
   週間人気ランキング（旧リスト形式・削除済みのため予備）
   ============================================================ */
.ranking-section {
    padding: 60px 0;
    background: #fff;
}

/* ランキング全体リスト */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 各ランキングカード */
.ranking-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    color: var(--tc-text);
    transition: box-shadow 0.2s, transform 0.2s;
}
.ranking-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    transform: translateY(-2px);
    color: var(--tc-text);
}

/* 1位カードは少し強調 */
.ranking-card:first-child {
    border-color: #D4AF37;
    background: linear-gradient(135deg, #fffef5 0%, #fff 100%);
}

/* 順位バッジ */
.rank-badge {
    font-size: 2rem;
    font-weight: 900;
    min-width: 44px;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

/* 画像エリア */
.rank-img-wrap {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--tc-gray-bg);
}
.rank-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像なしプレースホルダー */
.rank-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--rank-color, var(--tc-teal)) 0%, color-mix(in srgb, var(--rank-color, var(--tc-teal)) 60%, #fff) 100%);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
}

/* テキスト情報 */
.rank-info {
    flex: 1;
    min-width: 0;
}
.rank-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rank-area {
    font-size: 0.78rem;
    color: var(--tc-muted);
    margin-bottom: 2px;
}
.rank-copy {
    font-size: 0.8rem;
    color: var(--tc-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* スタッツ（商品数・お気に入り） */
.rank-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.rank-stat-item {
    font-size: 0.78rem;
    color: var(--tc-muted);
    white-space: nowrap;
}

@media (max-width: 575px) {
    .rank-badge { font-size: 1.5rem; min-width: 32px; }
    .rank-img-wrap { width: 56px; height: 56px; }
    .rank-stats { display: none; }
}

/* ============================================================
   お知らせカード（ふーぽ風・4列×2段グリッド）
   ============================================================ */

/* 4カラムグリッド（tablet:2列 / sp:2列） */
.notice-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991px) {
    .notice-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .notice-card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* 個別カード */
.notice-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0; /* pref/city/search/pref の各カードは角丸なし */
    overflow: hidden;
    border: 1px solid #e8eaed;
    color: var(--tc-text);
    transition: box-shadow 0.2s, transform 0.2s;
}
.notice-card.floor-card {
    border-radius: 0;
}
.notice-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.11);
    transform: translateY(-3px);
    color: var(--tc-text);
}

/* ---- サムネイルエリア（4:3比率） ---- */
.notice-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--tc-gray-bg);
    flex-shrink: 0;
}
.notice-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.notice-card:hover .notice-thumb-img {
    transform: scale(1.04);
}

/* 画像なしプレースホルダー（アイコン＋TICAMOテキスト） */
.notice-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,0.9);
    font-size: 1.6rem;
}
.notice-thumb-placeholder span {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    opacity: 0.9;
}
/* 黄色背景（TICAMOロゴのA文字色）＋白テキスト */
.notice-thumb-placeholder--ticamo {
    background: var(--tc-yellow);
    color: #fff;
}

/* ---- バッジ（サムネイル左上） ---- */
.notice-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    color: #fff;
    line-height: 1.4;
}
.notice-badge--shop  { background: var(--tc-teal); }
.notice-badge--group { background: var(--tc-salmon); }
.notice-badge--admin { background: var(--tc-teal-dark); }

/* ---- カード本文 ---- */
.notice-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* 発信者名 */
.notice-sender-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* タイトル */
.notice-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* 日付 */
.notice-card-date {
    font-size: 0.70rem;
    color: var(--tc-muted);
    margin: 0;
    margin-top: 4px;
}

/* ------------------------------------------------------------
   TOPページ 読み物セクション
   ------------------------------------------------------------ */
.article-top-section {
    padding: 64px 0;
    background: #fff; /* 前後のgray-bgセクションと差別化 */
}

/* カード全体（aタグ） */
.article-top-card {
    display: block;
    color: var(--tc-text);
    transition: opacity .18s;
}
.article-top-card:hover {
    opacity: .75;
    color: var(--tc-text);
}

/* サムネイル */
.article-top-thumb {
    position: relative;
    width: 100%;
    padding-top: 62%; /* 横長アスペクト比 */
    overflow: hidden;
    background: var(--tc-gray-bg);
}
.article-top-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-top-thumb .notice-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: 1.8rem;
}

/* Newバッジ（サムネイル左上・コーナーリボン） */
.article-top-badge-new {
    position: absolute;
    top: 14px;
    left: -24px;
    width: 88px;
    background: var(--tc-teal);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    padding: 3px 0;
    transform: rotate(-45deg);
    border-radius: 0;
    line-height: 1.4;
    z-index: 2;
    /* .article-badge-new の right/top 指定を上書き */
    right: auto;
}

/* テキストエリア */
.article-top-body {
    padding: 10px 4px 0;
}
.article-top-date {
    font-size: .72rem;
    color: var(--tc-muted);
    margin: 0 0 4px;
}
.article-top-title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* モバイル：2列 → md以上で4列（Bootstrap col-6 col-md-3で対応済み） */

/* ------------------------------------------------------------
   マガジンレイアウト（オーナーインタビュー・TOP）
   ------------------------------------------------------------ */
.article-magazine-main {
    color: var(--tc-text);
    transition: opacity .18s;
}
.article-magazine-main:hover { opacity: .75; color: var(--tc-text); }

.article-magazine-main-thumb {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
    background: var(--tc-gray-bg);
}
.article-magazine-main-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-magazine-main-thumb .notice-thumb-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    font-size: 2rem;
}
.article-magazine-main-body { padding: 12px 4px 0; }
.article-magazine-main-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-magazine-sub {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    color: var(--tc-text);
    transition: opacity .18s;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tc-border);
    min-height: 0;
}
.article-magazine-sub:last-child { border-bottom: none; padding-bottom: 0; }
.article-magazine-sub:hover { opacity: .75; color: var(--tc-text); }

.article-magazine-sub-thumb {
    position: relative;
    flex-shrink: 0;
    width: 40%;
    overflow: hidden;
    background: var(--tc-gray-bg);
}
.article-magazine-sub-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-magazine-sub-thumb .notice-thumb-placeholder {
    position: absolute;
    inset: 0;
    font-size: 1.2rem;
}
.article-magazine-sub-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 0;
}
.article-magazine-sub-title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 2px 0 0;
}

/* スマホ：サムネイル幅を絞り、アスペクト比 4:3 に固定 */
@media (max-width: 991.98px) {
    .article-magazine-sub {
        align-items: flex-start;
    }
    .article-magazine-sub-thumb {
        width: 32%;
        aspect-ratio: 4 / 3;
    }
}

/* ------------------------------------------------------------
   コンテンツリスト（グルメ・イベント・おでかけ・TOP）
   ------------------------------------------------------------ */
.article-list-item {
    color: var(--tc-text);
    padding: 14px 10px;
    border-bottom: 1px solid var(--tc-border);
    border-radius: 6px;
    transition: background .15s;
}
.article-list-item:first-child { border-top: 1px solid var(--tc-border); }
.article-list-item:hover { background: #f0fafb; color: var(--tc-text); }

.article-list-thumb {
    width: 88px;
    height: 62px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--tc-gray-bg);
    position: relative;
}
.article-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-list-thumb .notice-thumb-placeholder {
    position: absolute;
    inset: 0;
    font-size: 1rem;
}
.article-list-title {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 3px 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------
   読み物記事詳細ページ
   ------------------------------------------------------------ */

/* Newバッジ（fupo.jp風） */
.article-badge-new {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    background: var(--tc-salmon);
    border-radius: 4px;
    padding: 1px 7px;
    vertical-align: middle;
    line-height: 1.8;
}

/* サムネイル */
.article-thumbnail-wrap {
    width: 100%;
    overflow: hidden;
    background: var(--tc-gray-bg);
}
.article-thumbnail-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 420px;
    object-fit: cover;
}

/* 著者行 */
.content-article-author {
    font-size: .82rem;
    margin-bottom: 16px;
}

/* TinyMCE本文 */
.article-tinymce-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px auto;
}
.article-tinymce-body h2 {
    font-size: 1.15rem;
    font-weight: 700;
    border-left: 4px solid var(--tc-teal);
    padding-left: 10px;
    margin: 28px 0 12px;
}
.article-tinymce-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 20px 0 8px;
}
.article-tinymce-body a {
    color: var(--tc-teal-dark);
}
.article-tinymce-body blockquote {
    border-left: 3px solid var(--tc-teal-light);
    padding: 8px 16px;
    color: var(--tc-muted);
    margin: 16px 0;
    background: var(--tc-gray-bg);
    border-radius: 0 6px 6px 0;
}

/* サイドバー見出し */
.sidebar-heading {
    font-size: .9rem;
    font-weight: 700;
    color: var(--tc-text);
    border-bottom: 2px solid var(--tc-teal-light);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* 関連記事カード */
.article-related-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--tc-text);
    transition: opacity .15s;
}
.article-related-card:hover {
    opacity: .75;
}
.article-related-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--tc-gray-bg);
}
.article-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-related-thumb .notice-thumb-placeholder {
    width: 100%;
    height: 100%;
    font-size: 1rem;
}
.article-related-body {
    flex: 1;
    min-width: 0;
}
.article-related-date {
    font-size: .72rem;
    color: var(--tc-muted);
    margin: 0 0 4px;
}
.article-related-title {
    font-size: .82rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   エリアヒーロー（pref.php / city.php）
   ============================================================ */
.area-hero-section {
    background: linear-gradient(135deg, var(--tc-teal-dark) 0%, var(--tc-teal) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 48px 0 56px;
    color: #fff;
}
/* 写真差し替え時のグラデーションオーバーレイ（背景画像に重なる） */
.area-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,105,113,0.82) 0%, rgba(0,174,187,0.65) 100%);
    pointer-events: none;
}
.area-hero-section .container {
    position: relative;
    z-index: 2;
}

/* 市区町村ピルナビ */
.area-city-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.area-city-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 50px;
    font-size: 0.82rem;
    color: #444;
    text-decoration: none;
    background: #fff;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.area-city-pill:hover {
    background: var(--tc-teal-light);
    border-color: var(--tc-teal);
    color: var(--tc-teal-dark);
}
.area-city-pill.active {
    background: var(--tc-teal);
    border-color: var(--tc-teal);
    color: #fff;
}
.area-city-pill-count {
    font-size: 0.72rem;
    background: var(--tc-teal);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
}
.area-city-pill.active .area-city-pill-count {
    background: rgba(255,255,255,0.3);
}

/* ============================================================
   サイドCTAパネル（右端固定・縦長2分割ボタン）
   ============================================================ */
.side-cta-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    width: 44px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
    box-shadow: -2px 2px 10px rgba(0,0,0,.20);
}

/* 上段・下段共通 */
.side-cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    text-decoration: none;
    color: #fff;
    gap: 8px;
    height: 170px;
    transition: filter .2s;
}
.side-cta-item:hover {
    color: #fff;
    filter: brightness(1.12);
    text-decoration: none;
}

/* 上段：ユーザー向け（ティール） */
.side-cta-item--user {
    background: var(--tc-teal);
    border-bottom: 1px solid rgba(255,255,255,.25);
}

/* 下段：店舗向け（サーモン） */
.side-cta-item--shop {
    background: var(--tc-salmon);
}

/* アイコン */
.side-cta-item i {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* 縦書きテキスト */
.side-cta-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-align: center;
}

/* スマホでは非表示 */
@media (max-width: 767.98px) {
    .side-cta-panel {
        display: none;
    }
}

/* ============================================================
   インデックスバナー（ユーザー登録 / 店舗オーナー向け）
   画像差し替え時は .index-banner 内に <picture> を追加する
   ============================================================ */
.index-banner {
    position: relative;
    overflow: hidden;
    max-width: 970px;
    margin: 2.5rem auto; /* 上下余白 + 左右中央揃え */
    border-radius: 8px;
}
.index-banner--user {
    background: linear-gradient(120deg, var(--tc-teal-dark) 0%, var(--tc-teal) 100%);
}
.index-banner--shop {
    background: linear-gradient(120deg, #bf4f38 0%, var(--tc-salmon) 100%);
}

/* 背景装飾アイコン（薄く大きく表示） */
.index-banner-deco {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

/* コンテンツ行：PC は横並び・高さ90px固定（970×90バナー相当） */
.index-banner-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 90px;
    position: relative;
    z-index: 1;
}

.index-banner-text {
    flex: 1;
    min-width: 0;
}
.index-banner-head {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1.4;
}
.index-banner-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* CTAボタン */
.index-banner-btn {
    flex-shrink: 0;
    white-space: nowrap;
    background: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.5rem 1.5rem;
}
.index-banner--user .index-banner-btn {
    color: var(--tc-teal-dark);
}
.index-banner--shop .index-banner-btn {
    color: #bf4f38;
}
.index-banner-btn:hover {
    background: rgba(255, 255, 255, 0.88);
}

/* モバイル：縦積み・640×200比率・フル幅・角丸なし */
@media (max-width: 767.98px) {
    .index-banner {
        max-width: 100%;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .index-banner-body {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        /* 画面幅 × (200÷640) で640×200比率の高さを再現。コンテンツが超えた場合は自動拡張 */
        min-height: calc(100vw * 200 / 640);
        padding: 1.25rem 1rem;
        gap: 0.75rem;
    }
    .index-banner-deco {
        font-size: 4rem;
        right: -8px;
        color: rgba(255, 255, 255, 0.05);
    }
}

/* ============================================================
   プレミアムスポット（pref.php / city.php ピルナビ直下）
   ============================================================ */
.premium-spot-wrap {
    padding: 12px 0 16px;
    background: #fffbeb;
    border-bottom: 2px solid #fbbf24;
}
.premium-spot-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b45309;
    margin-bottom: 8px;
}
.premium-spot-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1.5px solid #fbbf24;
    border-radius: 12px;
    overflow: hidden;
    color: var(--tc-text);
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(251,191,36,0.15);
}
.premium-spot-card:hover {
    box-shadow: 0 6px 20px rgba(251,191,36,0.3);
    transform: translateY(-2px);
    color: var(--tc-text);
}
.premium-spot-thumb {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    overflow: hidden;
    background: var(--tc-gray-bg);
}
@media (max-width: 575px) {
    .premium-spot-thumb { width: 96px; height: 72px; }
}
.premium-spot-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.premium-spot-card:hover .premium-spot-thumb-img {
    transform: scale(1.04);
}
.premium-spot-body {
    flex: 1;
    padding: 12px 16px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
@media (max-width: 575px) {
    .premium-spot-body { padding: 10px 12px 10px 0; }
}
.premium-spot-name {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.premium-spot-catch {
    font-size: 0.82rem;
    color: var(--tc-muted);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.premium-spot-cta {
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
    margin-top: 4px;
}

/* ------------------------------------------------------------
   LP サポートオプションカード（lp_group.php ⑦.5）
   .lp-org-card をベースに border-top アクセントを追加
   ------------------------------------------------------------ */
.lp-support-card {
    border-left: 4px solid var(--tc-teal);
}

/* 末尾注記テキスト */
.lp-support-note {
    font-size: 0.88rem;
    color: var(--tc-muted);
    line-height: 1.7;
}

/* ⑤ ご利用開始までの流れ ステップカード */
.lp-howto-card {
    background: #fff;
    border-radius: 14px;
    border-top: 3px solid var(--tc-teal);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    height: 100%;
    position: relative; /* コネクター用のpositionコンテキスト */
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.lp-howto-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    transform: translateY(-3px);
}

/* ステップ番号バッジ */
.lp-howto-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tc-teal);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

/* Font Awesomeアイコン */
.lp-howto-icon {
    font-size: 1.75rem;
    color: var(--tc-teal);
    margin-bottom: 0.9rem;
    line-height: 1;
}

/* ステップタイトル */
.lp-howto-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--tc-teal-dark);
    margin-bottom: 0.5rem;
}

/* ステップ説明文 */
.lp-howto-text {
    font-size: 0.82rem;
    color: var(--tc-muted);
    line-height: 1.7;
    margin-bottom: 0;
}

/* カード間コネクター矢印（lgサイズ以上のみ・4列用） */
@media (min-width: 992px) {
    .col-lg-3:not(:last-child) .lp-howto-card::after {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 1.1rem;
        color: var(--tc-teal);
        position: absolute;
        top: 50%;
        right: -22px;
        transform: translateY(-50%);
        z-index: 1;
        opacity: 0.7;
    }
}

/* カード間コネクター矢印（mdサイズ以上のみ・3列用） */
@media (min-width: 768px) {
    .col-md-4:not(:last-child) .lp-howto-card::after {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 1.1rem;
        color: var(--tc-teal);
        position: absolute;
        top: 50%;
        right: -22px;
        transform: translateY(-50%);
        z-index: 1;
        opacity: 0.7;
    }
}

/* ------------------------------------------------------------
   LP FAQ アコーディオン（lp_shop.php / lp_group.php 共通）
   ------------------------------------------------------------ */

/* アコーディオンアイテム：カード感を出すためにBootstrapデフォルトを上書き */
.lp-faq-accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Bootstrap accordion-item の隣接border（flush感）を消す */
.lp-faq-accordion .accordion-item + .accordion-item {
    border-top: 1px solid #e9ecef;
}

/* ヘッダーボタン */
.lp-faq-accordion-btn {
    background-color: #fff;
    color: var(--tc-teal-dark);
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 1.25rem 1rem 3rem;
    border-radius: 8px !important;
    box-shadow: none !important;
    position: relative;
}

/* 開いている状態（背景・文字色はそのまま） */
.lp-faq-accordion-btn:not(.collapsed) {
    border-radius: 8px 8px 0 0 !important;
}

/* Bootstrapのchevronを非表示 */
.lp-faq-accordion-btn::after {
    display: none;
}

/* 頭の「+」アイコン */
.lp-faq-accordion-btn::before {
    content: '+';
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--tc-teal);
    line-height: 1;
}

/* 開いているときは「−」に */
.lp-faq-accordion-btn:not(.collapsed)::before {
    content: '−';
}

/* 回答エリア */
.lp-faq-accordion-body {
    background-color: #fff;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.8;
    padding: 1rem 1.25rem 1.25rem;
}

/* ------------------------------------------------------------
   お知らせウィジェット（group.php 右カラム）
   .notice-widget でラップすることで info-list 系クラスを上書き
   ------------------------------------------------------------ */
.notice-widget {
    overflow: hidden;
}

/* ティール背景のヘッダーバー */
.notice-widget__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: var(--tc-teal);
    color: #fff;
}

.notice-widget__icon {
    font-size: 1rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.notice-widget__title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* リストをヘッダーと一体化させるラッパー */
.notice-widget .info-list {
    background: #fff;
    border: 1px solid #e0f7fa;
    border-top: none;
}

/* 区切り線をティール極薄色に */
.notice-widget .info-list-item {
    border-bottom-color: #e0f7fa;
}

/* 左端にティールアクセントバー */
.notice-widget .info-list-item a {
    position: relative;
    grid-template-columns: 76px 1fr;
    padding: 12px 16px 12px 20px;
}

.notice-widget .info-list-item a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--tc-teal);
    opacity: 0;
    transition: opacity 0.18s;
}

.notice-widget .info-list-item a:hover::before {
    opacity: 1;
}

/* 日付（ベーススタイルに戻す） */
.notice-widget .info-date {
    font-size: 0.75rem;
    color: var(--tc-muted);
    white-space: nowrap;
}

/* タイトル列（団体名サブテキスト + タイトル本文） */
.notice-widget .info-title {
    font-size: 0.83rem;
    line-height: 1.4;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.notice-widget .info-title .text-muted {
    font-size: 0.72rem;
    color: var(--tc-teal-dark) !important;
    font-weight: 600;
    margin-bottom: 1px;
}

/* 団体お知らせ：店舗名サブテキストがない分、上下パディングを増やして加盟店と行高を揃える */
.notice-widget--group .info-list-item a {
    padding-top: 17px;
    padding-bottom: 17px;
}

/* 加盟団体リスト：日付列なしで団体名を全幅表示 */
.notice-widget--members .info-list-item a {
    grid-template-columns: 1fr;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ============================================================
   ラリーエリアカード（pref.php 商店会・商工会グリッド内）
   .notice-card と同じグリッドセルに収まるサイズ設計
   ============================================================ */
.rally-area-card {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    /* アクセントカラーの枠線でグループカードと差別化 */
    border: 1px solid #f3d085;
    color: var(--tc-text);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
    background: #fff;
}
.rally-area-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    transform: translateY(-3px);
    color: var(--tc-text);
}

/* ---- サムネイルエリア（notice-thumb-wrap と同じ 4:3 比率） ---- */
.rally-area-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
    /* 画像なし時のフォールバック: teal → 深紺グラデ */
    background:
        linear-gradient(160deg, #00AEBB 0%, #006971 55%, #003d4a 100%);
    background-size: cover;
    background-position: center;
}
/* 画像ありのときは上から暗めオーバーレイを重ねてバッジを読みやすく */
.rally-area-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.32) 0%,
        rgba(0,0,0,0.08) 55%,
        rgba(0,0,0,0.18) 100%
    );
}
.rally-area-card:hover .rally-area-card__thumb {
    /* ホバーで画像を微拡大（notice-card と同様の演出） */
    background-size: 104%;
}

/* ---- バッジ（サムネイル左上） ---- */
.rally-area-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1; /* ::after オーバーレイより前面 */
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    /* 白背景 + teal文字で明確に目立たせる */
    background: rgba(255,255,255,0.95);
    color: var(--tc-teal-dark);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

/* ---- カード本文（やや暖色系の背景でグループカードと差別化） ---- */
.rally-area-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    background: #fffbf0;
}

/* 主催団体名 */
.rally-area-card__org {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* ラリー名（メイン見出し） */
.rally-area-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* サムネイル下部オーバーレイ（期間・キャッチ） */
.rally-area-card__thumb-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 6px 10px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* 開催期間（オーバーレイ内・白テキスト） */
.rally-area-card__period {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.92);
    margin: 0;
}

/* キャッチコピー（オーバーレイ内・白イタリック） */
.rally-area-card__catch {
    font-size: 0.66rem;
    font-style: italic;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    margin: 0;
}

/* ============================================================
   エリア店舗マップページ（public/map.php）
   ============================================================ */

/* ------------------------------------------------------------
   地図コンテナ
   ------------------------------------------------------------ */
/* Leaflet の地図要素に角丸・影・最低高さを設定 */
.area-map-container {
    height: 400px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    border: 1px solid #e9ecef;
}

/* タブレット以下では少し低くして縦スペースを節約 */
@media (max-width: 767.98px) {
    .area-map-container {
        height: 280px;
        border-radius: 0;
    }
}

/* ------------------------------------------------------------
   地図セクションの余白
   ------------------------------------------------------------ */
.map-section {
    padding: 60px 0 40px;
    background: var(--tc-gray-bg);
}

/* ------------------------------------------------------------
   業種バッジ（店舗カード右上・map.php専用）
   notice-badge を継承しつつ右寄せにする
   ------------------------------------------------------------ */
.map-industry-badge {
    left: auto;
    right: 8px;
    background: var(--tc-teal);
    color: #fff;
}