/* ==========================================================================
   固定ページの本文（現行サイトから流し込んだ文章）を、スマホで崩さず読ませるための最低限
   --------------------------------------------------------------------------
   ・現行の本文は「幅を固定した画像」「表でのレイアウト」「改行の連打」で組まれていた。
     ここでは、それをスマホの幅に収めることだけを行う
   ・見た目の作り込み（色・余白・写真の見せ方）はデザインで置き換える
   ========================================================================== */

/* ページの頭の紹介文 */
.entry-content .lead {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* 写真：元の大きさより大きくはせず、画面からはみ出さない */
.entry-content img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ページ内の目次・仲間のページへのメニュー */
.entry-content .page-toc,
.entry-content .page-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.entry-content .page-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem; /* 指で押しやすい高さ */
    padding: 0 var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: 0; /* 角は直角でそろえる（base.css の決まり） */
    text-decoration: none;
}

/* ページ内移動の目印。飛んだ先がヘッダーに隠れないよう、少し上で止める */
.entry-content .anchor {
    display: block;
    scroll-margin-top: 4.5rem;
}

.entry-content [id] {
    scroll-margin-top: 4.5rem;
}

/* 現行で赤字だった強調 */
.entry-content .is-red {
    color: #c00000;
}

/* 囲みの箱 */
.entry-content .note-box {
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: 0; /* 角は直角でそろえる（base.css の決まり） */
}

.entry-content .note-box__title {
    font-weight: 700;
}

/* 見出し */
.entry-content h3 {
    margin-top: var(--space-l);
    font-size: 1.1rem;
}

.entry-content h4 {
    margin-top: var(--space-m);
    font-size: 1rem;
}

/* まとめたページの区画（スポーツ別の競技・つくり方とカスタムの各章） */
.entry-content .merged-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: 1px solid var(--color-line);
}

.entry-content .merged-section > h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

/* 表：現行は写真を並べるために表を使っている所が多い（流し込みのとき layout-table の目印を付けた）。
   スマホでは、その表だけ1列に積む。数字の比較表は base.css の「横に動かせる表」のままにする */
.entry-content .layout-table,
.entry-content .layout-table th,
.entry-content .layout-table td {
    border: 0;
}

@media (max-width: 47.99rem) {
    .entry-content .layout-table,
    .entry-content .layout-table tbody,
    .entry-content .layout-table tr,
    .entry-content .layout-table th,
    .entry-content .layout-table td {
        display: block;
        width: 100%;
    }

    .entry-content .layout-table td + td,
    .entry-content .layout-table tr + tr {
        margin-top: var(--space-m);
    }
}

/* 一覧（ラインアップの仮ページなど） */
.entry-content .lineup-list {
    display: grid;
    gap: var(--space-s);
}

.entry-content .lineup-list a {
    font-weight: 700;
}

/* 地図 */
.entry-content iframe {
    width: 100%;
    min-height: 20rem;
    border: 0;
}

/* お問い合わせ */
.contact-list {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
}

.contact-list__item {
    padding: var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: 0; /* 角は直角でそろえる（base.css の決まり） */
}

.contact-list__title {
    margin-bottom: var(--space-s);
    font-size: 1.1rem;
}

.contact-list__note {
    margin-top: var(--space-s);
    color: var(--color-muted);
    font-size: 0.875rem;
}

/* 会場ページ */
.venue-header__label {
    color: var(--color-muted);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
}

.venue-header__date {
    font-size: 1.5rem;
    font-weight: 700;
}

.venue-header__cta {
    margin-top: var(--space-m);
}

.venue-header__cta .button {
    width: 100%;
}

.venue-content {
    margin-top: var(--space-l);
}

.venue-reserve {
    margin-top: var(--space-l);
    overflow-x: auto; /* 予約表（今の部品）は幅が広いので、表だけ横に動かせるようにする */
}

@media (min-width: 48rem) {
    .contact-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .venue-header__cta .button {
        width: auto;
    }
}

/* 開催予定の一覧ページの区画（これからの開催・これまでの開催会場） */
.trunk-block {
    margin-top: var(--space-xl);
}

/* ---------- 営業カレンダー（template-parts/business-calendar.php） ----------
   店舗案内のページ（明るい地）とトップ案C（黒い壁）の両方で使う。色は変数で受け取る（案Cは front-c.css で上書き）。
   ・営業日のマスに明かりを点ける（白）。お休みは消灯（明るい地では薄いグレー、黒い壁ではそのまま）で数字を薄く。
     TRUNK SHOW（出張・搬入）の日は斜線。今日はマスの内側に枠、過ぎた日は薄く
     （2026-10-06 アツシさん決定「白＝営業日」。それまでは「お休み＝塗りつぶし」で休みを目立たせていた）
   ・休みがまだ入っていない月は、どのマスも光らせない（部品の側で is-open を付けない）
   ・土日も色は変えない（赤は「予約する」だけ）
   ・本文の表の共通指定（.entry-content table＝横に動かせる表・罫線）が効かないよう、.bcal の中に限って書く */
.bcal {
    --bcal-ink: var(--color-text);          /* 数字の基本の色・消灯のマスの今日の枠 */
    --bcal-paper: var(--color-bg);          /* 地（マスとマスのすき間も同じ色） */
    --bcal-muted: var(--color-muted);       /* 曜日・注記 */
    --bcal-open: #fff;                      /* 営業日のマス（明かり） */
    --bcal-open-ink: var(--color-text);     /* 営業日の数字・今日の枠 */
    --bcal-open-edge: var(--color-line);    /* 営業日のマスの縁（明るい地で白いマスを見分けるため） */
    --bcal-off: #dadade;                    /* お休みのマス（消灯）。白い営業日のマスと見分けられる濃さ */
    --bcal-off-ink: var(--color-muted);     /* お休みの数字。#dadade の上で約4.8:1 */
    --bcal-line: rgba(24, 24, 27, 0.45);    /* TRUNK SHOW のマスの枠・凡例の枠 */
    --bcal-hatch: rgba(24, 24, 27, 0.22);   /* TRUNK SHOW の斜線 */

    margin-top: var(--space-s);
}

.bcal .bcal__months {
    position: relative; /* 下の注意を参照 */
    display: grid;
    gap: 1.75rem;
}

/* 🔴 マスの中の読み上げ用の文字（screen-reader-text＝絶対配置で画面から隠す）が、横に送る入れ物の外を基準に
   置かれると、入れ物で隠れずにページの幅を広げ、スマホで横スクロールが出た（2026-10-06 アツシさんの指摘。
   375px の画面でページの幅が 616px＝来月の表の位置まで広がっていた）。マスと入れ物を配置の基準にして、中に閉じ込める */
.bcal .bcal__day {
    position: relative;
}

/* キーボードで選んだとき（スマホで横に送る入れ物）だけ枠を出す */
.bcal .bcal__months:focus-visible {
    outline: 2px solid var(--bcal-ink);
    outline-offset: 4px;
}

.bcal .bcal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.bcal .bcal__grid {
    display: table;
    width: 100%;
    margin-top: 0.625rem;
    overflow: visible;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--font-latin);
    font-variant-numeric: tabular-nums;
}

.bcal .bcal__grid th {
    padding: 0 0 0.375rem;
    border: 0;
    color: var(--bcal-muted);
    font-family: var(--font-base);
    font-size: 0.75rem;
    font-weight: 400;
    text-align: center;
}

/* マスとマスの間は、地と同じ色の枠ですき間を作る */
.bcal .bcal__day {
    height: 2.375rem;
    padding: 0;
    border: 2px solid var(--bcal-paper);
    font-size: 0.875rem;
    text-align: center;
}

.bcal .bcal__day.is-open {
    background: var(--bcal-open);
    box-shadow: inset 0 0 0 1px var(--bcal-open-edge);
    color: var(--bcal-open-ink);
    font-weight: 700;
}

.bcal .bcal__day.is-off {
    background: var(--bcal-off);
    color: var(--bcal-off-ink);
}

.bcal .bcal__day.is-trunk {
    background: repeating-linear-gradient(135deg, var(--bcal-hatch) 0 2px, transparent 2px 6px), var(--bcal-off);
    box-shadow: inset 0 0 0 1px var(--bcal-line);
    color: var(--bcal-off-ink);
}

/* 今日：マスの内側に枠（下線だけでは見つけにくかった＝審査3回目の指摘）。
   消灯のマスでは数字の色の枠、明かりの点いたマスでは営業日の数字の色の枠 */
.bcal .bcal__day.is-today {
    outline: 2px solid var(--bcal-ink);
    outline-offset: -5px;
    color: var(--bcal-ink);
    font-weight: 700;
}

.bcal .bcal__day.is-today.is-open {
    outline-color: var(--bcal-open-ink);
    color: var(--bcal-open-ink);
}

.bcal .bcal__day.is-past {
    opacity: 0.35;
}

.bcal .bcal__pending {
    margin: 0.5rem 0 0;
    color: var(--bcal-muted);
    font-size: 0.8125rem;
}

.bcal .bcal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 0;
    padding: 0;
    color: var(--bcal-muted);
    font-size: 0.8125rem;
    list-style: none;
}

.bcal .bcal__key::before {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.5rem;
    content: "";
    vertical-align: -0.125em;
}

.bcal .bcal__key.is-open::before {
    background: var(--bcal-open);
    box-shadow: inset 0 0 0 1px var(--bcal-open-edge);
}

.bcal .bcal__key.is-off::before {
    background: var(--bcal-off);
    box-shadow: inset 0 0 0 1px var(--bcal-line);
}

.bcal .bcal__key.is-trunk::before {
    background: repeating-linear-gradient(135deg, var(--bcal-hatch) 0 2px, transparent 2px 6px), var(--bcal-off);
    box-shadow: inset 0 0 0 1px var(--bcal-line);
}

.bcal .bcal__source {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

/* スマホ：2か月を縦に積むと店舗案内が約560px伸びたので、横に並べて指で送る（触れたときだけ動く。自動では動かない）。
   来月の左端が少し見えて、横に続くと分かる。左右は画面の端まで使う（本文の余白 --gutter のぶん外へ出す） */
@media (max-width: 47.99rem) {
    .bcal .bcal__months {
        grid-auto-columns: 88%;
        grid-auto-flow: column;
        gap: 1.25rem;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .bcal .bcal__months::-webkit-scrollbar {
        display: none;
    }

    .bcal .bcal__month {
        scroll-snap-align: start;
    }
}

/* タブレットより広い画面：今月と来月を横に並べる */
@media (min-width: 48rem) {
    .bcal .bcal__months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}