@charset "utf-8";

/* ============================================
   ホビーショップ ハピネス トップページ
   黄色基調のモダンデザイン(モバイルファースト)
   カテゴリ色は旧サイトのイメージカラーを継承
   ============================================ */

/* ---- デザイントークン ---- */
:root {
    --color-bg: #ffffcc;
    --color-surface: #ffffff;
    --color-text: #4a3a28;
    --color-text-sub: #97846c;
    --color-primary: #ffcc33;
    --color-primary-soft: #ffeeaa;
    --color-accent: #ff9900;
    --color-accent-deep: #d97e00;
    --color-line: #f1e5c3;
    --color-footer-bg: #453425;
    --color-footer-text: #ffedb3;
    --radius-card: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 4px 16px rgba(150, 110, 30, 0.12);
    --shadow-pop: 0 8px 20px rgba(150, 110, 30, 0.2);
    --font-base: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    --width-max: 1080px;
    --header-height: 64px;
    --nav-row-height: 44px; /* PCのカテゴリメニュー・ページ内メニューの行高 */
}

html {
    scroll-behavior: smooth;
}

/* ---- リセット・ベース ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    /* 内容が短いページ(空カート等)でもフッターが画面下に張り付くように(stickyフッター) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* mainを伸ばして残り高さを埋め、フッターを最下部へ落とす。内容が長ければ通常どおり下に伸びる */
main {
    flex: 1 0 auto;
}

a {
    color: inherit;
    text-decoration: none;
}

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

ul,
ol {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* display指定のある要素でもhidden属性を必ず効かせる */
[hidden] {
    display: none !important;
}

/* ---- 共通パーツ ---- */
.l-container {
    max-width: var(--width-max);
    margin: 0 auto;
    padding: 0 16px;
}

.c-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.c-heading {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 18px;
    font-weight: 800;
}

.c-heading::before {
    content: "";
    flex: 0 0 6px;
    height: 22px;
    border-radius: 3px;
    background-color: var(--color-primary);
}

.c-button {
    display: inline-block;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.c-button:hover {
    background-color: var(--color-accent);
    color: #ffffff;
}

.c-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.c-button:disabled:hover {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.c-button.is-done {
    background-color: #3c9a46;
    color: #ffffff;
}

.c-button--sub {
    background-color: var(--color-surface);
    border: 2px solid var(--color-line);
}

/* 下線付きのテキストリンク(カテゴリページ・アクセス等で共用。cat色があればそれに染まる) */
.c-more-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    text-decoration: underline;
}

.c-more-link:hover {
    color: var(--color-accent);
}

/* ---- ヘッダー(全幅・追従) ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-surface);
    box-shadow: 0 2px 10px rgba(150, 110, 30, 0.15);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.site-header__logo img {
    height: 46px;
    width: auto;
}

/* ハンバーガーボタン(モバイル) */
.site-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background-color: var(--color-primary-soft);
    cursor: pointer;
}

.site-header__toggle span {
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-text);
}

/* ナビ(モバイルはパネル、デスクトップは横並び) */
.site-header__nav {
    display: none;
}

.site-header__nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 12px 16px 20px;
    background-color: var(--color-surface);
    box-shadow: 0 14px 20px rgba(150, 110, 30, 0.18);
}

.global-menu__item {
    display: block;
    padding: 12px 10px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-line);
}

.global-menu__item:hover {
    color: var(--color-accent-deep);
}

/* 今いるページのメニューを現在地表示にする(ヘッダー1段目・フッター共通) */
.global-menu__item.is-current {
    color: var(--color-accent-deep);
    font-weight: 800;
}

.sns-links {
    display: flex;
    column-gap: 12px;
    margin-top: 14px;
}

/* ---- SNSロゴタイル(ヘッダー・フッター共用) ---- */
.c-brand-tile {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.15s ease;
}

.c-brand-tile:hover {
    transform: scale(1.1);
}

.c-brand-tile svg {
    width: 20px;
    height: 20px;
}

.c-brand-tile--x {
    background-color: #000000;
}

.c-brand-tile--instagram {
    background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee653d 30%, #d42e81 55%, #a843b2 80%, #904c8c 100%);
}

/* ---- ヒーロー(ギャラリー+営業案内) ---- */
.hero {
    display: grid;
    row-gap: 16px;
    margin-top: 12px;
}

/* ---- カルーセル ---- */
.carousel {
    position: relative;
    padding: 16px 0 14px;
    overflow: hidden;
    /* #59 CLS対策: お知らせギャラリーはInstagram掲載を後から描くため初期は空。
     充填時の高さ(画像200 + ドット20 + 上下余白30 = 250px)を先に確保し、
     描画時に下の要素が飛ぶのを防ぐ。主にスマホで効く
     (PCは隣の営業案内カードが行高を決めるため元々シフトは小さい)。 */
    min-height: 250px;
}

.carousel__viewport {
    overflow: hidden;
    touch-action: pan-y;
}

.carousel__track {
    display: flex;
    will-change: transform;
}

.carousel__track.is-animated {
    transition: transform 0.6s ease;
}

.carousel__cell {
    flex: 0 0 360px; /* home.jsのCAROUSEL_CELL_WIDTHと同期必須 */
    text-align: center;
}

.carousel__cell figure > img {
    width: 336px;
    height: 200px;
    object-fit: cover;
}

.carousel__cell figcaption {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.carousel__cell figcaption span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-sub);
}

.carousel__button {
    position: absolute;
    top: 94px; /* 画像(高さ200px)の縦中央に合わせる: 16 + 100 - 22 */
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}

.carousel__button:hover {
    background-color: var(--color-primary-soft);
    transform: scale(1.08);
}

.carousel__button--prev {
    left: 12px;
}

.carousel__button--next {
    right: 12px;
}

.carousel__button::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 3px solid var(--color-accent-deep);
    border-left: 3px solid var(--color-accent-deep);
}

.carousel__button--prev::before {
    transform: translateX(2px) rotate(-45deg);
}

.carousel__button--next::before {
    transform: translateX(-2px) rotate(135deg);
}

.carousel__dots {
    display: flex;
    justify-content: center;
    column-gap: 10px;
    margin-top: 10px;
}

.carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-line);
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        width 0.2s ease;
}

.carousel__dot.is-selected {
    width: 26px;
    background-color: var(--color-accent);
}

/* ---- 営業のご案内 ---- */
.shop-info {
    padding: 20px;
}

.shop-info__holiday {
    display: inline-block;
    margin-top: 12px;
    padding: 2px 12px;
    border-radius: 8px;
    background-color: var(--color-primary-soft);
    font-weight: 700;
}

.shop-info__hours-note {
    font-size: 12.5px;
    color: var(--color-text-sub);
}

.shop-info__tel {
    display: block;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-accent-deep);
}

.shop-info__address {
    font-size: 13px;
    color: var(--color-text-sub);
}

.shop-info__note {
    margin-top: 8px;
    font-weight: 700;
    color: #cc4400;
}

/* ---- カテゴリメニュー(イメージカラー継承・等幅) ---- */
/* ---- カテゴリメニュー(PC=ヘッダー直下に吸着するタブ列 / スマホ=ハンバーガー内に表示) ---- */
.category-nav {
    display: none; /* スマホでは .header-categories 側に表示する */
    position: sticky;
    top: var(--header-height);
    z-index: 95;
    height: var(--nav-row-height);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}

.category-nav__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr; /* タブ幅を等分してそろえる */
    height: 100%;
}

.category-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-bottom: 3px solid transparent;
    background-color: var(--cat-pale); /* カテゴリ色の背景は常時表示 */
    color: var(--cat-dark, var(--cat-main)); /* 文字は濃い色(未設定なら主の色) */
    font-size: 13px;
    font-weight: 700;
    transition: border-color 0.15s ease;
}

/* 現在ページ(とホバー)はカテゴリ色の下線で示す */
.category-nav__item:hover,
.category-nav__item.is-current {
    border-bottom-color: var(--cat-main);
}

/* スマホのハンバーガーメニュー内カテゴリ(PCでは非表示) */
.header-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.header-categories .category-nav__item {
    padding: 10px 6px;
    border-bottom: 0;
    border-radius: 10px;
    background-color: var(--cat-pale);
}

.header-categories .category-nav__item.is-current {
    background-color: var(--cat-main);
    color: #ffffff;
}

/* カテゴリのイメージカラー(プラモは青系・ミニ四駆は水色。cat6はインスタ用だったが現在未使用)。
   ここは既定値。管理画面の「TOP設定→カテゴリ設定」で保存すると、settings/site.categoryStylesの色が
   <style id="category-style">(クライアント=common.js applyCategoryColors / SSR=html.mjs injectCategoryStyle)で後勝ち上書きされる。
   文字用の濃い色 --cat-dark の既定は「主の色と同じ」(下の一括定義)。
   ※--cat-dark: var(--cat-main) は使う要素の時点で解決されるので、各.catNが自分の主の色に落ちる。
   これを各.catN自身に持たせないと、bodyの.catNに設定した濃い色がヘッダーの他カテゴリタブへ継承で漏れる */
.cat0,
.cat1,
.cat2,
.cat3,
.cat4,
.cat5,
.cat6,
.cat7,
.cat8 {
    --cat-dark: var(--cat-main);
}
.cat0 {
    --cat-main: #7a5c00;
    --cat-pale: #ffdf70;
} /* TOP(店の基調色の濃い黄。プラレールの淡黄と区別) */
.cat1 {
    --cat-main: #003300;
    --cat-pale: #ccffcc;
}
.cat2 {
    --cat-main: #0066cc;
    --cat-pale: #cce0ff;
}
.cat3 {
    --cat-main: #00cccc;
    --cat-pale: #ccffff;
}
.cat4 {
    --cat-main: #ff00ff;
    --cat-pale: #ffccff;
}
.cat5 {
    --cat-main: #ff9933;
    --cat-pale: #ffffcc;
}
.cat6 {
    --cat-main: #666666;
    --cat-pale: #eeeeee;
} /* SHOPカテゴリ「その他」(ニュートラルなグレー) */
.cat7 {
    --cat-main: #333333;
    --cat-pale: #e8e8e8;
} /* 店長のX(Xブランドの黒系) */
.cat8 {
    --cat-main: #8844aa;
    --cat-pale: #ecdcf7;
} /* SHOPカテゴリ「完成品」(他と被らない紫) */

/* ---- トピックス ---- */
.topics {
    margin-top: 32px;
}

.topics__list {
    display: grid;
    gap: 16px;
    margin-top: 14px;
}

/* #59 CLS対策: トップのTopICsもInstagram掲載を後から描くため初期は空。
   件数が不定で全部は確保できないが、1行ぶん(約360px)を先に確保すると、
   描画時に下の要素が画面内で飛ぶのを抑えられる。トップ専用(#topics-list)。 */
#topics-list {
    min-height: 360px;
}

/* カテゴリページのトピックス枠で、まだ投稿が無いときの案内(グリッド全幅で1行) */
.dept-topics__empty {
    grid-column: 1 / -1;
    margin: 0;
}

.topic-card {
    display: block;
    padding: 12px;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
}

.topic-card__tags {
    display: flex;
    column-gap: 6px;
    min-height: 24px;
}

.topic-card__tag {
    display: inline-block;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-soft);
    color: var(--color-accent-deep);
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
}

.topic-card__frame {
    overflow: hidden;
    margin-top: 8px;
    border-radius: 10px;
}

.topic-card__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.topic-card:hover .topic-card__image {
    transform: scale(1.06);
}

/* Instagram掲載トピックスの「詳細を見る」ボタン(リンク風) */
.topic-card__detail {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Instagram掲載トピックスはカード全面が押せる(全文モーダルを開く)。キーボード操作時はフォーカスの枠を出す */
.topic-card--ig {
    cursor: pointer;
}

.topic-card--ig:focus-visible {
    outline: 2px solid var(--color-accent-deep);
    outline-offset: 2px;
}

/* IG掲載の枠(表示サイズ＋トリミング). 枠でクロップし、中の画像にtransformで拡大/位置を適用 */
.ig-frame {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* 採用枠なし=従来どおり中央カバー */
.ig-frame__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* 採用枠あり=写真をwidth(=100/枠幅%)倍に拡大しtranslateでずらし、枠内だけを見せる(位置x/yは割合) */
.ig-frame__img--crop {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    max-width: none; /* 全体のimg{max-width:100%}に潰されないように(枠幅より大きく拡大するため) */
    object-fit: fill;
    transform-origin: top left;
}

/* スライダーは高さを200pxで固定(均一)、横幅は形状で決まる(中央寄せ)
   ※16:9=356pxがセル幅360pxに収まる前提。高さを変えるときはセル幅と矢印topも見直す */
.ig-frame--slider {
    display: inline-block;
    height: 200px;
    vertical-align: middle;
}

/* トピックスは幅いっぱいで、高さは形状で決まる */
.ig-frame--topics {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.ig-frame.ig-shape-square {
    aspect-ratio: 1 / 1;
}

.ig-frame.ig-shape-landscape {
    aspect-ratio: 4 / 3;
}

.ig-frame.ig-shape-wide {
    aspect-ratio: 16 / 9;
}

.topic-card__lines {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

/* ---- 更新情報+動画 ---- */
.l-columns {
    display: grid;
    gap: 16px;
    margin-top: 32px;
}

.news {
    padding: 20px;
}

/* スマホ(縦積み)は380pxでスクロール。PCでは home.js が動画カードの高さに合わせて max-height を上書きする */
.news__scroll {
    max-height: 380px;
    overflow: auto;
    margin-top: 10px;
}

.news__row {
    display: flex;
    column-gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--color-line);
}

.news__date {
    flex: 0 0 78px;
    font-size: 12px;
    color: var(--color-text-sub);
    padding-top: 2px;
}

.news__label {
    font-size: 13px;
    font-weight: 700;
}

.news__label:hover {
    color: var(--color-accent-deep);
    text-decoration: underline;
}

/* 更新情報が1件も無いときの案内 */
.news__empty {
    padding: 9px 2px;
    font-size: 13px;
    color: var(--color-text-sub);
}

/* ---- お店紹介動画 ---- */
.video {
    padding: 20px;
}

.video .c-heading a:hover {
    color: var(--color-accent-deep);
}

.video__player {
    margin-top: 14px;
}

.video__player iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
}

/* ---- 下層ページ共通テーマ(main.page-theme.catN でイメージカラーを全体に適用) ---- */
.page-theme .c-heading::before {
    background-color: var(--cat-main, var(--color-primary));
}

.page-theme .makers__list li {
    border-bottom-color: var(--cat-pale, var(--color-line));
}

/* ---- 下層ページ: 紹介カード(カラーはcatクラスで指定) ---- */
.page-hero {
    display: grid;
    gap: 16px;
    padding: 24px 20px;
    margin-top: 16px;
    background: linear-gradient(130deg, var(--color-surface) 45%, var(--cat-pale, var(--color-primary-soft)) 135%);
}

.page-hero__title {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 24px;
    font-weight: 800;
    color: var(--cat-dark, var(--cat-main, var(--color-text)));
}

.page-hero__title::before {
    content: "";
    flex: 0 0 8px;
    height: 28px;
    border-radius: 4px;
    background-color: var(--cat-main, var(--color-primary));
}

.page-hero__lead {
    margin-top: 10px;
    font-weight: 700;
}

.page-hero__image {
    width: 100%;
    max-width: 380px;
    border-radius: 12px;
    justify-self: center;
    box-shadow: var(--shadow-card);
}

/* ---- 下層ページ: ページ内メニュー(スマホ=折返しチップ / PC=カテゴリメニュー直下に吸着するタブ列) ---- */
.sub-menu {
    /* 上下余白はバー本体に持たせる(__inner側だとl-containerのpadding指定に上書きされる) */
    padding: 12px 0;
    background-color: var(--color-surface);
    box-shadow: 0 2px 8px rgba(150, 110, 30, 0.12);
}

.sub-menu__inner {
    display: flex;
    flex-wrap: wrap; /* スマホは横スクロールさせず折り返す */
    gap: 8px;
}

.sub-menu__item {
    padding: 8px 14px;
    border-radius: 10px;
    background-color: var(--cat-pale, var(--color-primary-soft));
    color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.sub-menu__item:hover {
    background-color: var(--cat-main, var(--color-accent-deep));
    color: #ffffff;
}

/* 前後の記事が無いときのタブ(押せない・薄く表示。ブログ記事ページで使用) */
.sub-menu__item.is-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ページ送りタブ(ブログ一覧の前の20件/次の20件)はbutton要素。aタブと同じ見た目にする */
button.sub-menu__item {
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* スマホではショップ行きボタンをヘッダーに常駐させ、チップ側は隠す(PCでは逆) */
.sub-menu__item--shop {
    display: none;
}

.header-shop-link {
    margin-left: auto;
    margin-right: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    background-color: var(--cat-pale, var(--color-primary-soft));
    color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    font-size: 12.5px;
    font-weight: 700;
}

/* ---- 下層ページ: セクション・取扱いメーカー(共通の余白) ---- */
.dept-section,
.makers {
    margin-top: 24px;
    padding: 24px 20px;
    /* 吸着ヘッダーに隠れない位置へスクロールさせる(PCは@mediaで上書き) */
    scroll-margin-top: calc(var(--header-height) + 16px);
}

.dept-section__lines {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.9;
}

/* ---- 下層ページ: セクション内の話題ブロック(小見出し+画像+本文) ---- */
.dept-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--cat-pale, var(--color-line));
}

.dept-block__title {
    display: inline-block;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    background-color: var(--cat-pale, var(--color-primary-soft));
    color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    font-size: 14px;
    font-weight: 800;
}

/* カテゴリのコンテンツ写真枠。表示サイズ(比率)=ig-shape-*、トリミング=画像のtransform、
   位置=下記dept-align-*。大きくなりすぎない標準サイズ(最大480px)に収める(TOP掲載のig-frameを流用) */
.ig-frame--dept {
    display: block;
    max-width: min(100%, 480px);
    margin-top: 14px;
    border: 1px solid var(--color-line);
}

/* 写真の位置(admin「写真の位置」で左寄せ/中央/右寄せを切替) */
.ig-frame--dept.dept-align-left {
    margin-right: auto;
}

.ig-frame--dept.dept-align-center {
    margin-left: auto;
    margin-right: auto;
}

.ig-frame--dept.dept-align-right {
    margin-left: auto;
}

.makers__list {
    columns: 2;
    column-gap: 28px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
}

.makers__list li {
    padding: 6px 2px;
    border-bottom: 1px dashed var(--color-line);
    break-inside: avoid;
}

.makers__note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--color-text-sub);
}

/* ---- SHOPページ: 絞り込み ---- */
.shop-filters {
    margin-top: 16px;
    /* 3段目「商品検索」タブでここへスクロールしたとき、吸着ヘッダーに隠れない位置へ
     (スマホは吸着がヘッダーのみ。PCはカテゴリメニュー+3段目タブぶんを@mediaで加算) */
    scroll-margin-top: calc(var(--header-height) + 16px);
}

/* 検索欄+検索ボタン。外枠(角丸ピル)の中に入力欄と検索ボタンを収める(ボタンは枠内右端) */
.shop-search {
    display: flex;
    align-items: center;
    padding: 4px;
    border: 2px solid var(--color-line);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
}

.shop-search:focus-within {
    border-color: var(--color-accent);
}

.shop-filters__search {
    flex: 1;
    min-width: 0;
    border: 0; /* 枠は親の.shop-searchに持たせる */
    background: transparent;
    padding: 8px 16px;
    font: inherit;
    color: inherit;
}

.shop-filters__search:focus {
    outline: none;
}

/* 検索ボタン(枠内の右端に収まる小さめの丸ボタン) */
.shop-search__button {
    flex: 0 0 auto;
    padding: 8px 20px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.filter-chip {
    padding: 6px 16px;
    border: 2px solid var(--cat-main, var(--color-accent-deep));
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.filter-chip:not(.is-active):hover {
    background-color: var(--cat-pale, var(--color-primary-soft));
}

.filter-chip.is-active {
    background-color: var(--cat-main, var(--color-accent-deep));
    color: #ffffff;
}

.filter-chips--tags {
    margin-top: 8px;
}

.filter-chip--tag {
    padding: 4px 14px;
    font-size: 13px;
}

/* ---- SHOPページ: 商品一覧 ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
    /* ページ切替時に吸着バーへ隠れない位置へ戻す(PCは@mediaで上書き) */
    scroll-margin-top: calc(var(--header-height) + 60px);
}

/* 商品一覧のページ切替(前の20件・次の20件) */
.product-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
    margin-top: 20px;
}

.product-pager__status {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-sub);
}

.product-pager__button {
    padding: 8px 18px;
    font-size: 13px;
}

.product-pager__button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* スマホは「← 前」、PCは「← 前の20件」を表示する */
.product-pager__label-long {
    display: none;
}

.product-grid__empty {
    grid-column: 1 / -1;
    padding: 30px 0;
    text-align: center;
    color: var(--color-text-sub);
}

.product-card {
    display: flex;
    flex-direction: column;
    row-gap: 6px;
    padding: 10px;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.product-card:hover {
    box-shadow: var(--shadow-pop);
}

.product-card__frame {
    overflow: hidden;
    border-radius: 10px;
}

.product-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-card__image {
    transform: scale(1.05);
}

/* 画像未設定・読み込み失敗時のプレースホルダー(カード・商品ページ・カート共用) */
.product-card__image--empty,
.product-detail__image--empty,
.cart__image--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-soft);
    color: var(--color-text-sub);
    font-size: 13px;
    font-weight: 700;
}

.product-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.product-card__tag {
    padding: 1px 10px;
    border-radius: var(--radius-pill);
    background-color: var(--cat-pale, var(--color-primary-soft));
    color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    font-size: 11px;
    font-weight: 700;
}

.product-card__badge {
    padding: 1px 10px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-accent-deep);
    font-size: 11px;
    font-weight: 700;
}

.product-card__badge--soldout {
    border-color: #cc4444;
    background-color: #ffecec;
    color: #bb2222;
}

/* セールは売り切れ(淡)と区別できる濃い赤の塗りつぶし */
.product-card__badge--sale {
    border-color: #cc4444;
    background-color: #cc4444;
    color: #ffffff;
}

.product-card__maker {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-sub);
}

.product-card__name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.product-card__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-accent-deep);
}

/* 1人あたりの注文上限の案内(orderLimitのある商品だけ) */
.product-card__limit {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-sub);
}

/* セール価格の適用中は価格を赤に、元値は打ち消し線で添える */
.product-card__price--sale {
    color: #cc4444;
}

.product-card__price-old {
    margin-right: 6px;
    color: var(--color-text-sub);
    font-size: 12px;
    font-weight: 700;
    text-decoration: line-through;
}

.product-card__add {
    padding: 8px 10px;
    font-size: 13px;
    text-align: center; /* 売り切れ時はリンク(a要素)になるため中央寄せを明示 */
}

/* 「詳細はこちら」ボタン(カートに入れるの上・少し控えめ) */
.product-card__detail-link {
    padding: 7px 10px;
    font-size: 12px;
    text-align: center;
}

/* ---- 商品個別ページ(p.html / 本番は /p/(商品ID).html) ---- */
.product-detail {
    padding: 24px;
    margin-top: 16px; /* 検索欄との間に余白(見出し→検索欄と同じ間隔) */
}

.product-detail__layout {
    display: grid;
    gap: 20px;
}

/* PCは写真と情報の2カラム */
@media (min-width: 900px) {
    .product-detail__layout {
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
        gap: 28px;
    }
}

.product-detail__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

/* 商品個別ページの複数写真: メイン画像の下にサムネイルを並べ、タップでメインを切替 */
.product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.product-gallery__thumb {
    width: 64px;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid var(--color-line);
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
}

.product-gallery__thumb.is-active {
    border-color: var(--color-accent);
}

.product-gallery__thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.product-detail__name {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}

/* 見出し+値の1行(モーダルと同じ体裁・ページ用に少し大きめ) */
.product-detail__row {
    display: flex;
    gap: 10px;
    align-self: stretch;
    font-size: 14px;
    line-height: 1.6;
}

.product-detail__row-label {
    flex: 0 0 5.5em;
    font-weight: 700;
    color: var(--color-text-sub);
}

.product-detail__row-value {
    flex: 1;
    min-width: 0;
    font-weight: 700;
}

.product-detail__price {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-accent-deep);
}

/* 詳細は店側が書いたまま(改行含む)を表示する */
.product-detail__notes {
    margin: 0;
    font-weight: 400;
    white-space: pre-wrap;
}

/* 店側が入力した説明文は、改行・空行・スペースをそのまま表示する(カテゴリ説明・ページ上部の紹介文・アクセス・法定ページ本文・ブログ本文で共用) */
.topic-card__lines,
.page-hero__lead,
.dept-section__lines,
.access-map__lines,
.blog-article__paragraph,
.legal-doc__text,
.legal-doc__body {
    white-space: pre-wrap;
}

.product-detail__cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.product-detail__notfound {
    margin: 16px 0;
    line-height: 1.8;
}

.product-detail__back {
    display: inline-block;
    margin-top: 20px;
}

/* ---- 店長ブログ: 記事一覧(blog.html)・記事本文(b.html)共通 ---- */
/* main(l-container)はflex項目。中身が狭い記事ページで自動マージンにより縮まないよう
   幅を100%に固定し、他ページと同じ最大幅・全幅にする */
.blog-main {
    width: 100%;
}

/* 本文＋サイドバーの2カラム。スマホは1カラム(本文が先)。PCはサイドバーを左に置く */
.blog-layout {
    display: grid;
    gap: 20px;
    margin-top: 16px;
}

@media (min-width: 900px) {
    .blog-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }
    .blog-sidebar {
        grid-column: 1;
        grid-row: 1;
    }
    .blog-content {
        grid-column: 2;
        grid-row: 1;
    }
}

/* ---- 店長ブログ: サイドバー(カテゴリ・最近の記事・過去記事) ---- */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-sidebar__section {
    padding: 16px;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.blog-sidebar__heading {
    font-size: 14px;
    font-weight: 800;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
}

.blog-sidebar__list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-sidebar__link {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent-deep);
}

.blog-sidebar__link:hover {
    text-decoration: underline;
}

/* ---- 店長ブログ: 一覧の検索(キーワード・期間) ---- */
.blog-search {
    margin-top: 16px;
    padding: 16px 20px;
}

.blog-search__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.blog-search__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-search__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-sub);
}

.blog-search__input {
    padding: 8px 10px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
}

.blog-search__button {
    font-size: 14px;
}

/* 絞り込み中の表示(「◯◯の記事」＋すべての記事) */
.blog-search__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.blog-search__active:not(:empty) {
    margin-bottom: 12px;
}

.blog-search__active-label {
    font-weight: 800;
}

/* ---- 店長ブログ: コメント ---- */
.blog-comments {
    margin-top: 20px;
    padding: 24px;
}

.blog-comments__heading {
    margin-bottom: 12px;
}

.blog-comments__empty {
    color: var(--color-text-sub);
    font-weight: 700;
}

.blog-comment {
    padding: 14px 0;
    border-top: 1px dashed var(--color-line);
}

.blog-comment__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.blog-comment__name {
    font-weight: 800;
}

.blog-comment__date {
    font-size: 12px;
    color: var(--color-text-sub);
}

.blog-comment__body {
    margin-top: 6px;
    line-height: 1.8;
}

/* 店主からの返信(コメントの下にぶら下げる) */
.blog-comment__reply {
    margin-top: 10px;
    margin-left: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--color-primary-soft);
}

.blog-comment__reply-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-accent-deep);
}

.blog-comment__reply-body {
    margin-top: 4px;
    line-height: 1.8;
}

.blog-comments__form-wrap {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
}

.blog-comments__form-title {
    font-size: 15px;
    font-weight: 800;
}

.blog-comments__note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-sub);
}

.blog-comments__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.blog-comments__submit {
    align-self: flex-start;
}

.blog-comments__msg {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--color-primary-soft);
    font-weight: 700;
}

/* 一覧はTOPトピックスと同じ .topics__list / .topic-card を流用(見た目を揃える)。
   ブログ固有はタイトルと写真なしの枠だけ足す。
   上端はサイドバーと揃える(.topics__listのmargin-topを打ち消す) */
.blog-list {
    margin-top: 0;
}

.blog-list__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-sub);
    font-weight: 700;
}

/* カードのタイトル(トピックスには無いのでブログだけ足す) */
.blog-card__title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}

/* 書き出しは2行で省略(カードの高さをそろえる) */
.blog-card__excerpt {
    margin-top: 6px;
    color: var(--color-text-sub);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 写真の無い記事は基調色の枠だけ(装飾を足しすぎない) */
.topic-card__frame--empty {
    aspect-ratio: 3 / 2;
    background: linear-gradient(130deg, var(--color-primary-soft), var(--color-primary));
}

/* ---- 店長ブログ: ページ送り ---- */
.blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.blog-pager:empty {
    margin-top: 0;
}

.blog-pager__button {
    font-size: 13px;
}

.blog-pager__status {
    font-weight: 700;
    color: var(--color-text-sub);
}

/* ---- 店長ブログ: 記事本文(b.html) ---- */
/* 上端はサイドバーと揃える(margin-topなし) */
.blog-article {
    padding: 28px 24px;
}

.blog-article__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-line);
}

.blog-article__date {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-sub);
}

.blog-article__title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;
}

.blog-article__heading {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-top: 28px;
    font-size: 19px;
    font-weight: 800;
}

.blog-article__heading::before {
    content: "";
    flex: 0 0 6px;
    height: 22px;
    border-radius: 3px;
    background-color: var(--color-primary);
}

.blog-article__paragraph {
    margin-top: 16px;
    line-height: 1.9;
}

/* 段落の文字寄せ(管理画面で選ぶ・左は既定)。プレビュー(admin.css)と同じクラス名 */
.blog-align-center {
    text-align: center;
}

.blog-align-right {
    text-align: right;
}

/* 本文写真。表示サイズ(特大/大/中/小)は管理画面で選ぶ。中央寄せで最大幅を切り替える */
.blog-article__figure {
    margin-top: 20px;
}

.blog-article__img {
    width: 100%;
    border-radius: 12px;
}

.blog-figure--sm {
    max-width: 260px;
}

.blog-figure--md {
    max-width: 420px;
}

.blog-figure--lg {
    max-width: 620px;
}

.blog-figure--xl {
    max-width: 100%;
}

.blog-article__notfound {
    margin: 16px 0;
    line-height: 1.8;
}

.blog-article__back {
    display: inline-block;
    margin-top: 28px;
}

/* ---- 予約カレンダー(カテゴリページのコンテンツ内・閲覧版) ----
   店内スペースが選ばれたコンテンツに、月カレンダー+その日の時間割(10〜22時)と「予約する」ボタンを出す */
.pubcal {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--color-line, #e5d9b8);
    border-radius: 12px;
    background-color: #ffffff;
}

.pubcal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.pubcal__heading {
    font-size: 15px;
    font-weight: 800;
}

.pubcal__reserve {
    padding: 8px 22px;
    font-size: 14px;
}

.pubcal__layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pubcal__month {
    flex: 0 0 230px;
}

.pubcal__month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pubcal__title {
    font-weight: 800;
}

.pubcal__nav {
    padding: 2px 10px;
    border: 1px solid #dccf9e;
    border-radius: 8px;
    background-color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pubcal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pubcal__weekday {
    font-size: 11px;
    text-align: center;
    color: #8a7b52;
}

/* 日付マス: 本日=背景色 / 過ぎた日=薄く / 予約あり=青系の色付け / 選択中=枠線 */
.pubcal__day {
    padding: 5px 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.pubcal__day.is-past {
    color: #bbbbbb;
}

.pubcal__day.is-booked {
    background-color: #e9f3ff;
    color: #1565c0;
}

.pubcal__day.is-past.is-booked {
    background-color: #f2f7fd;
    color: #9db8d4;
}

.pubcal__day.is-today {
    background-color: #cfe8ff;
}

.pubcal__day.is-selected {
    border-color: #1565c0;
}

.pubcal__timeline {
    flex: 1;
    min-width: 0;
    overflow-x: auto; /* スマホは横スクロールで見る */
}

.pubcal__daylabel {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #8a7b52;
}

.pubcal__hours {
    position: relative;
    height: 18px;
    min-width: 520px;
}

.pubcal__hour {
    position: absolute;
    top: 0;
    left: var(--pos); /* PCは横位置(スマホはmediaでtopに切り替え) */
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #8a7b52;
}

.pubcal__hour--first {
    transform: none;
}

.pubcal__hour--last {
    transform: translateX(-100%);
}

/* 1行=1レーン(定員の人数分の行を出す)。72列=10分刻み(管理画面の予約カレンダーと同じ) */
.pubcal__lane {
    display: grid;
    grid-template-columns: repeat(72, 1fr);
    grid-template-rows: 30px;
    min-width: 520px;
    border-right: 1px solid #b5b5b5;
    border-bottom: 1px solid #d9d9d9;
}

.pubcal__lane:first-of-type {
    border-top: 1px solid #b5b5b5;
}

.pubcal__cell {
    grid-row: 1;
    grid-column: var(--cell) / span 3; /* PCは列(スマホはmediaで行に切り替え) */
    border-left: 1px dashed #d9d9d9;
}

.pubcal__cell--hour {
    border-left: 1px solid #b5b5b5;
}

.pubcal__cell.is-past {
    background-color: #f5f5f5;
}

/* 予約できない時間帯(枠外)=斜線の網掛け */
.pubcal__cell.is-closed {
    background-color: #f0f0f0;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0, 0, 0, 0.05) 4px, rgba(0, 0, 0, 0.05) 8px);
}

/* 予約の帯(中身は見せない)。終了済みはグレー */
.pubcal__block {
    z-index: 1;
    grid-row: 1;
    grid-column: var(--from) / var(--to); /* PCは列(スマホはmediaで行に切り替え) */
    margin: 4px 0;
    border: 1px solid #7fb3e8;
    border-radius: 6px;
    background-color: #d7eaff;
}

.pubcal__block.is-past {
    border-color: #c4c4c4;
    background-color: #e8e8e8;
}

.pubcal__note {
    margin-top: 8px;
    font-size: 12px;
    color: #8a7b52;
}

/* スマホはカレンダーと時間割を縦に積む */
@media (max-width: 700px) {
    .pubcal__layout {
        flex-direction: column;
    }

    .pubcal__month {
        flex: none;
        width: 100%;
        max-width: 300px;
    }

    /* 時間割を縦型に(時間が上→下・レーンは横に並べる)=横スクロールを避ける */
    .pubcal__timeline {
        overflow-x: hidden;
    }

    .pubcal__chart {
        display: flex;
        align-items: stretch;
        gap: 0;
    }

    .pubcal__hours {
        width: 24px;
        height: 480px;
        min-width: 0;
        flex: none;
        margin-right: 4px; /* 時刻の数字とグリッドの間だけ少し空ける */
    }

    .pubcal__hour {
        top: var(--pos);
        left: 0;
        transform: translateY(-50%);
    }

    .pubcal__hour--first {
        transform: translateY(0);
    }

    .pubcal__hour--last {
        transform: translateY(-100%);
    }

    .pubcal__lane {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(72, 1fr);
        height: 480px;
        min-width: 0;
        flex: 1;
        border-top: none;
        border-right: none;
        border-bottom: 1px solid #d9d9d9; /* 下辺(22時)を閉じる */
        border-left: 1px solid #d9d9d9; /* 列の区切り線 & 左辺を閉じる */
    }

    .pubcal__lane:last-of-type {
        border-right: 1px solid #d9d9d9; /* 右端の列の右辺を閉じる */
    }

    .pubcal__cell {
        grid-row: var(--cell) / span 3;
        grid-column: 1;
        border-top: 1px dashed #d9d9d9;
        border-left: none;
    }

    .pubcal__cell--hour {
        border-top: 1px solid #b5b5b5;
        border-left: none;
    }

    .pubcal__block {
        grid-row: var(--from) / var(--to);
        grid-column: 1;
        margin: 0 4px;
    }
}

/* ---- 予約フォーム: 予約できる時間帯の案内(対象を選ぶと出る) ---- */
.reserve-slot-hint {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--color-primary-soft, #fff6d6);
    font-size: 14px;
    font-weight: 700;
}

/* ---- 予約フォーム: 満員の時間帯の知らせ(対象と利用日を選ぶと出る) ---- */
.reserve-full-note {
    padding: 10px 14px;
    border-radius: 10px;
    background-color: #fde8e8;
    color: #c0392b;
    font-size: 14px;
    font-weight: 700;
}

/* ---- 案内モーダル(カートの注文完了・SHOPの削除済み/非公開案内で共用。common.js createNoticeDialog) ---- */
.complete-dialog {
    margin: auto; /* グローバルリセットで消える中央寄せを戻す */
    max-width: min(92vw, 440px);
    border: 0;
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-pop);
}

.complete-dialog::backdrop {
    background-color: rgba(60, 40, 10, 0.45);
}

.complete-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    font-weight: 700;
    line-height: 1.7;
}

.complete-dialog__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.complete-dialog__actions .c-button {
    padding: 8px 24px;
    font-size: 14px;
}

/* ---- Instagram詳細モーダル(トピックス等のタップで開く) ---- */
.ig-modal {
    margin: auto; /* グローバルリセットで消える中央寄せを戻す */
    max-width: min(92vw, 460px);
    border: 0;
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow-pop);
}

.ig-modal::backdrop {
    background-color: rgba(60, 40, 10, 0.45);
}

.ig-modal__gallery {
    position: relative;
}

.ig-modal__image {
    width: 100%;
    border-radius: 10px;
}

/* カルーセル投稿の前後送りボタン(画像の左右に重ねる) */
.ig-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--color-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(60, 40, 10, 0.25);
}

.ig-modal__nav--prev {
    left: 8px;
}

.ig-modal__nav--next {
    right: 8px;
}

/* 今何枚目か(例 2 / 5)を画像右下に小さく出す */
.ig-modal__count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.ig-modal__text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.ig-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* ---- SHOPページ: カート ---- */
.cart {
    margin-top: 24px;
    padding: 20px;
    /* 「カートを見る」で吸着バーに隠れない位置へスクロールさせる */
    scroll-margin-top: calc(var(--header-height) + 60px);
}

.cart__empty {
    margin-top: 10px;
    color: var(--color-text-sub);
}

.cart__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--color-line);
}

/* 商品写真(商品ページへのリンク) */
.cart__thumb {
    flex: 0 0 auto;
}

.cart__image {
    display: block;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.cart__image--empty {
    width: 64px;
    height: 48px;
    border-radius: 8px;
    font-size: 10px;
}

.cart__info {
    flex: 1;
    min-width: 0;
}

.cart__name {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.cart__name:hover {
    text-decoration: underline;
}

.cart__unit {
    font-size: 12px;
    color: var(--color-text-sub);
}

.cart__stepper {
    display: flex;
    align-items: center;
    column-gap: 6px;
}

.cart__step {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-line);
    border-radius: 50%;
    background-color: var(--color-surface);
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cart__step:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-deep);
}

/* 上限(在庫数・1人◯点まで)に達したとき、＋はそれ以上押せない */
.cart__step:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.cart__qty {
    min-width: 22px;
    text-align: center;
    font-weight: 800;
}

.cart__remove {
    border: 0;
    background: none;
    color: var(--color-text-sub);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.cart__remove:hover {
    color: #cc4400;
}

.cart__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.cart__total {
    font-size: 16px;
    font-weight: 800;
}

/* ---- SHOPページ: ご注文フォーム ---- */
.order {
    margin-top: 20px;
    padding: 20px;
}

.order__notice {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: var(--color-primary-soft);
    font-size: 13px;
    font-weight: 700;
}

.order__notice li {
    padding: 2px 0;
}

.order__items-heading {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 800;
}

.order__items {
    margin-top: 6px;
    font-size: 13px;
}

.order__item--total {
    margin-top: 6px;
    font-weight: 800;
}

.order__form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.order__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-sub);
}

.order__input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-line);
    border-radius: 10px;
    background-color: var(--color-surface);
    font: inherit;
    color: inherit;
}

.order__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.order__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* スパム対策のハニーポット欄。画面外に置いて人には見せない(display:noneだと一部ボットが避けるため画面外配置) */
.order__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* プライバシーポリシー同意のチェック欄(#37→§12.102でチェックボックス化。注文・お問い合わせ・コメントで共用) */
.order__consent {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

/* チェックは押しやすい大きさに(スマホ・高齢のお客様向け) */
.order__consent-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.order__consent-link {
    color: var(--color-accent-deep);
    font-weight: 700;
    text-decoration: underline;
}

.order__mail-note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-text-sub);
}

.order__success {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: #e3f6e6;
    color: #21703a;
    font-weight: 700;
}

.order__error {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background-color: #fde8e4;
    color: #b3401f;
    font-weight: 700;
}

/* ---- トップ: アクセス(Googleマップ)。ACCESSメニューの遷移先 ---- */
.access-map {
    margin-top: 32px;
    padding: 20px;
    /* 吸着ヘッダーに隠れない位置へスクロールさせる(PCは@mediaで上書き) */
    scroll-margin-top: calc(var(--header-height) + 16px);
}

.access-map__lines {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
}

.access-map__frame {
    display: block;
    width: 100%;
    height: 320px;
    margin-top: 14px;
    border: 0;
    border-radius: 10px;
}

/* ---- スクロールでふわっと表示 ---- */
.js-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- フッター(全幅) ---- */
.site-footer {
    margin-top: 48px;
    padding: 36px 0 20px;
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

.site-footer__inner {
    display: grid;
    gap: 28px;
}

.site-footer__logo {
    height: 48px;
    width: auto;
}

.site-footer__name {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 800;
}

.site-footer__line {
    font-size: 13px;
    opacity: 0.9;
}

.site-footer__nav {
    display: grid;
    gap: 4px;
    align-content: start;
}

.site-footer__link {
    width: fit-content;
    font-weight: 700;
}

.site-footer__link:hover {
    text-decoration: underline;
}

/* 法定ページ(特定商取引法・プライバシーポリシー)へのリンク(#36/#37)。メニューより控えめに出す */
.site-footer__link--legal {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
}

/* メニューの並びと法定リンクの間に少し隙間を空ける(最初の法定リンクだけ) */
.site-footer__link:not(.site-footer__link--legal) + .site-footer__link--legal {
    margin-top: 8px;
}

.site-footer__sns {
    display: flex;
    column-gap: 12px;
    align-items: start;
}

.site-footer__legal {
    margin-top: 28px;
    padding: 14px 16px 0;
    border-top: 1px solid rgba(255, 237, 179, 0.25);
    font-size: 11px;
    text-align: center;
    opacity: 0.85;
}

/* ---- 法定ページ(特定商取引法 law.html・プライバシーポリシー privacy.html) ---- */
.legal-doc {
    display: grid;
    gap: 26px;
    margin-top: 20px;
    padding: 20px;
}

.legal-doc__section {
    display: grid;
    gap: 10px;
}

.legal-doc__text {
    font-size: 14px;
    line-height: 1.9;
}

.legal-doc__list {
    display: grid;
    gap: 8px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.8;
}

/* 項目名+説明の表(スマホは縦積み・PCは2列=下の@media) */
.legal-doc__table {
    border-top: 1px solid var(--color-line);
}

.legal-doc__row {
    display: grid;
    gap: 2px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--color-line);
}

.legal-doc__term {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text-sub);
}

.legal-doc__body {
    font-size: 14px;
    line-height: 1.8;
}

.legal-doc__links {
    display: grid;
    gap: 6px;
    padding-left: 20px;
    font-size: 13px;
}

.legal-doc__link {
    color: var(--color-accent-deep);
    font-weight: 700;
    text-decoration: underline;
}

.legal-doc__updated {
    font-size: 12px;
    text-align: right;
    color: var(--color-text-sub);
}

@media (min-width: 900px) {
    .legal-doc__row {
        grid-template-columns: 240px 1fr;
        gap: 16px;
        padding: 14px 6px;
    }

    .legal-doc__term {
        font-size: 14px;
    }
}

/* ---- JavaScript無効時の案内 ---- */
.noscript-note {
    padding: 24px 16px;
    text-align: center;
}

/* ============================================
   タブレット以上
   ============================================ */
@media (min-width: 600px) {
    .topics__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   デスクトップ
   ============================================ */
@media (min-width: 900px) {
    body {
        font-size: 16px;
    }

    .l-container {
        padding: 0 24px;
    }

    /* カテゴリメニューは吸着バーに表示(ハンバーガー内のカテゴリは隠す) */
    .category-nav {
        display: block;
    }

    .header-categories {
        display: none;
    }

    /* ページ内メニューはカテゴリメニュー直下に吸着するタブ列にする */
    .sub-menu {
        position: sticky;
        top: calc(var(--header-height) + var(--nav-row-height));
        z-index: 90;
        height: var(--nav-row-height);
        padding: 0;
    }

    .sub-menu__inner {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
        height: 100%;
    }

    .sub-menu__item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        background-color: transparent;
        font-size: 14px;
    }

    .sub-menu__item:hover {
        border-bottom-color: var(--cat-main, var(--color-accent-deep));
        /* 背景はカテゴリ色をかなり薄めて敷く(color-mix未対応ブラウザは1行目が効く) */
        background-color: var(--cat-pale, var(--color-primary-soft));
        background-color: color-mix(in srgb, var(--cat-pale, var(--color-primary-soft)) 35%, var(--color-surface));
        color: var(--cat-dark, var(--cat-main, var(--color-accent-deep)));
    }

    /* PCではショップ行きボタンもタブ列に表示し、ヘッダー側は隠す */
    .sub-menu__item--shop {
        display: flex;
    }

    .header-shop-link {
        display: none;
    }

    .dept-section,
    .makers {
        /* 吸着ヘッダー+カテゴリメニュー+ページ内メニューに隠れない位置 */
        scroll-margin-top: calc(var(--header-height) + var(--nav-row-height) * 2 + 14px);
    }

    .cart {
        scroll-margin-top: calc(var(--header-height) + var(--nav-row-height) + 60px);
    }

    /* PCはヘッダー+カテゴリメニュー+3段目タブが吸着するぶん下げる(商品検索タブの着地位置) */
    .shop-filters {
        scroll-margin-top: calc(var(--header-height) + var(--nav-row-height) * 2 + 16px);
    }

    .access-map {
        scroll-margin-top: calc(var(--header-height) + var(--nav-row-height) + 14px);
    }

    /* ページ切替ボタンはPCでは件数つきの長い表記にする */
    .product-pager__label-long {
        display: inline;
    }

    .product-pager__label-short {
        display: none;
    }

    /* ナビを常時表示・ハンバーガー非表示 */
    .site-header__toggle {
        display: none;
    }

    .site-header__nav,
    .site-header__nav.is-open {
        display: flex;
        position: static;
        align-items: center;
        column-gap: 20px;
        padding: 0;
        box-shadow: none;
    }

    .global-menu {
        display: flex;
        column-gap: 6px;
    }

    .global-menu__item {
        padding: 8px 14px;
        border-bottom: 0;
        border-radius: var(--radius-pill);
    }

    .global-menu__item:hover {
        color: inherit;
        background-color: var(--color-primary-soft);
    }

    .global-menu__item.is-current {
        background-color: var(--color-primary-soft);
        color: var(--color-accent-deep);
    }

    .sns-links {
        margin-top: 0;
    }

    .site-header .c-brand-tile {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .hero {
        grid-template-columns: 1fr 340px;
        column-gap: 20px;
        align-items: stretch;
        margin-top: 16px;
    }

    .topics__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .l-columns {
        grid-template-columns: 1.4fr 1fr;
        column-gap: 20px;
        align-items: start;
    }

    .site-footer__inner {
        grid-template-columns: 1.2fr 1fr auto;
        column-gap: 40px;
    }

    .page-hero {
        grid-template-columns: 1.2fr 1fr;
        align-items: center;
        padding: 28px;
    }

    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        scroll-margin-top: calc(var(--header-height) + var(--nav-row-height) + 60px);
    }

    .page-hero__title {
        font-size: 28px;
    }

    .makers__list {
        columns: 3;
    }
}

/* ============================================
   アニメーションを減らす設定の利用者向け
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .carousel__track.is-animated {
        transition: none;
    }

    .topic-card,
    .topic-card__image,
    .category-nav__item,
    .sub-menu__item,
    .c-brand-tile,
    .carousel__button {
        transition: none;
    }
}

/* 囲み(dept-block)の文字の寄せ(小見出し・説明文)。未設定=左は従来どおりクラスなし */
.dept-block--text-center {
    text-align: center;
}

.dept-block--text-right {
    text-align: right;
}

/* ---- ヘッダーのカートアイコン(全ページ常駐・赤丸=カートの点数・2026-07-11) ---- */
.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto; /* 右側(ハンバーガー/ナビの手前)へ寄せる */
    margin-right: 10px;
    border-radius: 10px;
    color: var(--color-accent-deep);
}

.header-cart:hover {
    background-color: var(--color-primary-soft);
}

.header-cart .cart-icon {
    width: 26px;
    height: 26px;
}

/* 赤丸の点数(0個のときはhidden属性で消える) */
.header-cart__badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #e53935;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* カテゴリページの「販売商品はこちら」がカートアイコンの後ろに並ぶときは、
   右寄せ(margin-left:auto)をアイコン側に任せる(auto余白の二重取りで間延びしないように) */
.header-cart ~ .header-shop-link {
    margin-left: 0;
}

/* SHOP3段目「カートを見る」タブのカートマーク(文言の前に付く) */
.sub-menu__item--cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sub-menu__item--cart .cart-icon {
    width: 17px;
    height: 17px;
    flex: none;
}