.template_page {
    position: relative;

    .match-banner {
        background: url('/wp-content/themes/custom/assets/images/temlate_page_banner.webp') no-repeat center / cover;
        position: relative;
        overflow: hidden;

        .match-banner-inner {
            position: relative;
            padding: calc(100 / var(--base) * 100vw) 0 calc(134 / var(--base) * 100vw);

            .match-banner-text {
                padding-left: calc(106 / var(--base) * 100vw);
            }

            .match-banner-text,
            .match-banner-subtitle {
                z-index: 10;
            }
        }

        .match-banner-inner::before {
            content: '';
            position: absolute;
            background: url("/wp-content/themes/custom/assets/images/banner_map.png") center center / cover no-repeat;
            width: calc(627 / var(--base) * 100vw);
            height: calc(653 / var(--base) * 100vw);
            top: calc(-90 / var(--base) * 100vw);
            left: calc(-180 / var(--base) * 100vw);
        }

        .match-banner-subtitle {
            font-family: "peckham-press", sans-serif;
            font-size: calc(16 / var(--base) * 100vw);
            position: relative;
            padding-left: calc(8 / var(--base) * 100vw);
            font-weight: 400;
        }

        .match-banner-subtitle::before {
            position: absolute;
            content: '';
            width: calc(2 / var(--base) * 100vw);
            height: calc(14 / var(--base) * 100vw);
            background-color: #FFF;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .match-banner-title {
            margin-top: calc(40 / var(--base) * 100vw);
            font-family: "Noto Sans JP", sans-serif;
            font-weight: bold;
            font-size: calc(35 / var(--base) * 100vw);
            width: calc(783 / var(--base) * 100vw);
            line-height: 1.4;
        }
    }

    .match-banner {
        position: relative;

        .match-banner-subtitle {
            font-family: "peckham-press", sans-serif;
            font-weight: 400;
        }
    }


    /*画像ありの場合*/
    .match-banner.has-image {
        height: calc(362 / var(--base) * 100vw);

        .match-banner-subtitle {
            font-size: calc(16 / var(--base) * 100vw);
            position: relative;
            padding-left: calc(8 / var(--base) * 100vw);

        }

        .match-banner-title {
            margin-top: calc(60 / var(--base) * 100vw);
            width: calc(600 / var(--base) * 100vw);
            word-wrap: break-word;
        }

        .match-banner-image {
            position: absolute;
            top: 0;
            right: 0;

            img {
                width: calc(643 / var(--base) * 100vw);
                height: calc(362 / var(--base) * 100vw);
                object-fit: cover;
            }
        }
    }
}



.template_contents {
    max-width: calc(1080 / var(--base) * 100vw);
    margin: calc(110 / var(--base) * 100vw) auto calc(100 / var(--base) * 100vw);
    display: grid;
    grid-template-columns: calc(228 / var(--base) * 100vw) calc(700 / var(--base) * 100vw);
    gap: calc(112 / var(--base) * 100vw);
    padding: 0 calc(20 / var(--base) * 100vw);


    h2 {
        font-size: calc(20 / var(--base) * 100vw);
        letter-spacing: 0;
        font-weight: bold;
        line-height: calc(35 / var(--base) * 100vw);
        border-bottom: calc(1 / var(--base) * 100vw) solid #000;
        padding-bottom: calc(20 / var(--base) * 100vw);
        /* 下余白を半分に（70→35） */
        margin-bottom: calc(35 / var(--base) * 100vw)
    }

    h2:last-child {
        margin-bottom: 0;
    }

    h3 {
        font-size: calc(18 / var(--base) * 100vw);
        font-weight: bold;
        letter-spacing: 0;
        /* border-left:calc(9 / var(--base) * 100vw) solid #001B5B; */
        position: relative;
        /* #001B5B */
        padding-left: calc(25 / var(--base) * 100vw);
        line-height: calc(31 / var(--base) * 100vw);
        margin-bottom: calc(30 / var(--base) * 100vw)
    }

    h3:last-child {
        margin-bottom: 0;
    }

    h3::before {
        position: absolute;
        content: '';
        border-left: calc(9 / var(--base) * 100vw) solid #001B5B;
        width: calc(9 / var(--base) * 100vw);
        height: 100%;
        left: 0;
    }

    h4 {
        font-size: calc(16 / var(--base) * 100vw);
        font-weight: bold;
        line-height: calc(28 / var(--base) * 100vw);
        margin-bottom: calc(20 / var(--base) * 100vw)
    }

    h4:last-child {
        margin-bottom: 0;
    }

    /* 本文パーツ（.text-block）内のテキストリンクだけに色を付ける（WYSIWYG／SCF出力に適用）*/
    /* 表パーツ内のリンクは後方の「.stadium-dl dd a」ルールでカバー */
    /* 外部から持ち込んだコンポーネント（独自クラスのボタン等）には影響させない */
    .text-block a:not([class]) {
        color: #009EB4;
        text-decoration: underline;
        transition: color 0.2s ease;
    }

    /* テキストリンクのホバー：濃紺(#001B5B)に変化 */
    .text-block a:not([class]):hover,
    dl.stadium-dl dd a:hover,
    .col-info .tel a:hover {
        color: #001B5B;
    }

    .filter_action_link a{
        color: inherit!important;
        text-decoration: none!important;
    }

    /* ボタン（.filter_action_link ピルボタン）のアニメーションホバー：
       背景を濃紺(#001B5B)へ変化させ、わずかに浮かせる */
    .filter_action_link {
        /* スマホで長文がはみ出さないよう、コンテナ幅で折り返す */
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        /* 上余白を半分に（index.cssの41px→20.5px、template内のみ上書き） */
        margin-top: 20.5px;
        transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .filter_action_link:hover {
        background-color: #001B5B;
        transform: translateY(calc(-2 / var(--base) * 100vw));
        box-shadow: 0 calc(6 / var(--base) * 100vw) calc(16 / var(--base) * 100vw) rgba(0, 27, 91, 0.25);
    }

    .text-block {
        margin-bottom: calc(35 / var(--base) * 100vw);

        p {
            font-size: calc(14 / var(--base) * 100vw);
            font-weight: 400;
            line-height: calc(26 / var(--base) * 100vw);
        }

        /* 段落(Enter)間の余白を控えめに詰める。
           -6pxだと太字の擬似見出しや画像入り段落までくっつくため-3pxに緩和。
           行間(line-height 26px)は維持し、折り返し行は影響なし */
        p + p {
            margin-top: calc(-3 / var(--base) * 100vw);
        }

        /* 画像を含む段落は前後のテキストとくっつかないよう余白を確保
           （上のp+pの負マージンより詳細度が高く、画像段落だけ別扱いになる） */
        p:has(img) {
            margin-top: calc(16 / var(--base) * 100vw);
            margin-bottom: calc(16 / var(--base) * 100vw);
        }

        /* 14ptの大きめ文字を含む段落＝擬似見出し。見出しらしく上に余白（先頭は除く） */
        p:has(span[style*="font-size: 14pt"]):not(:first-child) {
            margin-top: calc(20 / var(--base) * 100vw);
        }

        /* 擬似見出しの直後の段落は詰めず、見出しと本文の間に余白を空ける */
        p:has(span[style*="font-size: 14pt"]) + p {
            margin-top: calc(10 / var(--base) * 100vw);
        }
    }

    .text-block:last-child {
        margin-bottom: 0;
    }

    /* ビジュアルエディタで挿入した画像に、左寄せ／中央／右寄せの配置を反映する */
    .text-block img {
        max-width: 100%;
        height: auto;
    }

    /* float した画像を内包してレイアウト崩れを防ぐ（clearfix） */
    .text-block::after {
        content: '';
        display: table;
        clear: both;
    }

    .text-block .alignleft {
        float: left;
        margin: 0 calc(24 / var(--base) * 100vw) calc(16 / var(--base) * 100vw) 0;
    }

    .text-block .alignright {
        float: right;
        margin: 0 0 calc(16 / var(--base) * 100vw) calc(24 / var(--base) * 100vw);
    }

    .text-block .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .text-block .alignnone {
        height: auto;
    }

    /* 背景色／ボーダー色が指定された本文パーツ（装飾ラッパー）の内側余白 */
    .text-block--decorated {
        padding: calc(24 / var(--base) * 100vw) calc(30 / var(--base) * 100vw);
        border-radius: calc(4 / var(--base) * 100vw);
    }

    /* ----- 本文パーツ内のリスト（ul / ol）：アビスパ福岡カラーで装飾 ----- */
    /* 濃紺 #001B5B × ティール #0096B2。マーカーに個性を集約し本文は静かに保つ */
    .text-block ul,
    .text-block ol {
        margin: calc(24 / var(--base) * 100vw) 0;
        padding-left: 0;
        list-style: none;
        font-size: calc(14 / var(--base) * 100vw);
        line-height: calc(26 / var(--base) * 100vw);
    }

    .text-block li {
        position: relative;
        margin-bottom: calc(12 / var(--base) * 100vw);
    }

    .text-block li:last-child {
        margin-bottom: 0;
    }

    /* ul（番号なし）：シンプルな濃紺の丸マーカー */
    .text-block ul > li {
        padding-left: calc(24 / var(--base) * 100vw);
    }

    .text-block ul > li::before {
        content: '';
        position: absolute;
        left: 0;
        top: calc(8.5 / var(--base) * 100vw);
        width: calc(9 / var(--base) * 100vw);
        height: calc(9 / var(--base) * 100vw);
        background: #001B5B;
        border-radius: 50%;
    }

    /* ol（番号あり）：濃紺の四角の中央に数字（上下左右中央） */
    .text-block ol {
        counter-reset: tb-ol-counter;
    }

    .text-block ol > li {
        padding-left: calc(36 / var(--base) * 100vw);
        counter-increment: tb-ol-counter;
        min-height: calc(26 / var(--base) * 100vw);
    }

    .text-block ol > li::before {
        content: counter(tb-ol-counter);
        position: absolute;
        left: 0;
        top: calc(2 / var(--base) * 100vw);
        width: calc(22 / var(--base) * 100vw);
        height: calc(22 / var(--base) * 100vw);
        /* flex で上下左右ともに中央寄せ */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #001B5B;
        color: #fff;
        font-size: calc(12 / var(--base) * 100vw);
        font-weight: 700;
        line-height: 1;
        text-align: center;
    }

    /* ネストしたリスト：上下余白を詰める */
    .text-block ul ul,
    .text-block ul ol,
    .text-block ol ul,
    .text-block ol ol {
        margin: calc(10 / var(--base) * 100vw) 0;
    }

    /* ネストした ul：中抜きの小さい丸で階層を表現 */
    .text-block ul ul > li::before {
        width: calc(8 / var(--base) * 100vw);
        height: calc(8 / var(--base) * 100vw);
        background: transparent;
        border: calc(1.5 / var(--base) * 100vw) solid #001B5B;
        top: calc(9 / var(--base) * 100vw);
    }

    /* ----- 本文パーツ内の表（table） ----- */
    /* デフォルトの見た目は他の表（濃紺ヘッダー＋ゼブラ）に合わせる。
       !important を使わないため、クラシックエディタで付けたインラインCSSが優先される */
    .text-block table {
        width: 100%;
        border-collapse: collapse;
        margin: calc(20 / var(--base) * 100vw) 0;
        font-size: calc(14 / var(--base) * 100vw);
        line-height: calc(22 / var(--base) * 100vw);
        /* box(.text-block--decorated)に背景色があっても透けないようデフォルトは白 */
        background-color: #fff;
    }

    .text-block table th,
    .text-block table td {
        padding: calc(14 / var(--base) * 100vw) calc(20 / var(--base) * 100vw);
        border: calc(1 / var(--base) * 100vw) solid #e0e0e0;
        text-align: left;
        /* セル内容を上揃えではなく上下中央に揃える */
        vertical-align: middle;
        /* デフォルトの背景色は白（クラシックエディタのインライン指定があればそちら優先） */
        background-color: #fff;
    }

    .text-block table th {
        background-color: #001f54;
        color: #fff;
        font-weight: bold;
    }

    /* 交互行のグレー（ゼブラ）はセル単位で適用。
       グレーが当たらないセルは上の白がデフォルトで残る */
    .text-block table tr:nth-child(even) td,
    .text-block table tr:nth-child(even) th {
        background-color: #f7f7f7;
    }

    /* ----- 本文パーツ内の画像のはみ出し防止 ----- */
    /* キャプション（[caption]）の固定幅で横にはみ出すのを防ぐ */
    .text-block .wp-caption {
        max-width: 100%;
        height: auto;
    }

    /* ----- リンク付き画像のホバーで5%ズームアップ ----- */
    /* リンクで囲まれた画像のはみ出しをクリップする枠。
       max-width:100% を付けて画像の固定幅(width属性)による横はみ出しも防ぐ */
    .text-block a:has(img) {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        line-height: 0;
        /* 角丸キャプション等とズーム枠の角を揃える */
        border-radius: calc(4 / var(--base) * 100vw);
    }

    /* 中央寄せ(.aligncenter)画像にリンクを付けると、imgのmargin:autoが効かず
       a(inline-block)が左に残るため、ラップしているa自体を中央寄せにする */
    .text-block a:has(> img.aligncenter) {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .text-block a:has(img) img {
        display: block;
        max-width: 100%;
        height: auto;
        transition: transform 0.4s ease;
        will-change: transform;
    }

    .text-block a:has(img):hover img {
        transform: scale(1.05);
    }

    /*一枚画像*/
    .single-image {
        display: flex;
        justify-content: center;
        margin-bottom: calc(35 / var(--base) * 100vw);

        img {
            /* トリミングせず元画像の比率のまま表示（成り行き） */
            max-width: 100%;
            height: auto;
        }
    }

    .single-image:last-child {
        margin-bottom: 0;
    }

    /*２カラム画像（左右に画像を1枚ずつ並べる）*/
    .two-column-images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(20 / var(--base) * 100vw);
        width: calc(700 / var(--base) * 100vw);
        margin: 0 auto calc(35 / var(--base) * 100vw);

        .col-left img,
        .col-right img {
            display: block;
            /* 幅に合わせて全体表示（トリミングなし・元画像の比率を維持） */
            width: 100%;
            height: auto;
        }
    }

    .two-column-images:last-child {
        margin-bottom: 0;
    }

    /*カラムカード（PCは最大3列）*/
    .column-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: calc(30 / var(--base) * 100vw);
        width: calc(700 / var(--base) * 100vw);
        margin: 0 auto calc(35 / var(--base) * 100vw);
    }

    .column-cards:last-child {
        margin-bottom: 0;
    }

    .column-card {
        display: flex;
        flex-direction: column;
    }

    /*写真：トリミングなしで成り行き表示*/
    .column-card-image {
        margin-bottom: calc(12 / var(--base) * 100vw);

        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    /*説明文*/
    .column-card-text {
        font-size: calc(14 / var(--base) * 100vw);
        line-height: 1.7;
        margin-bottom: calc(12 / var(--base) * 100vw);
    }

    /*小見出し＋項目のグレーボックス*/
    .column-card-detail {
        background-color: #e9e9e9;
        padding: calc(14 / var(--base) * 100vw);
        margin-top: auto;
    }

    .column-card-subtitle {
        font-size: calc(14 / var(--base) * 100vw);
        font-weight: bold;
        margin-bottom: calc(8 / var(--base) * 100vw);
    }

    .column-card-items {
        font-size: calc(14 / var(--base) * 100vw);
        line-height: 1.7;
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            position: relative;
            padding: calc(6 / var(--base) * 100vw) 0 calc(6 / var(--base) * 100vw) calc(14 / var(--base) * 100vw);
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        }

        /* 行頭の「・」 */
        li::before {
            content: "・";
            position: absolute;
            left: 0;
        }

        li:last-child {
            border-bottom: none;
        }
    }

    /*ギャラリー*/
    .gallery-wrapper {
        /* margin-bottom: calc(70 / var(--base) * 100vw); */
        width: calc(700 / var(--base) * 100vw);
        margin: 0 auto calc(35 / var(--base) * 100vw);
    }

    .gallery-wrapper:last-child {
        margin-bottom: 0;
    }

    .gallery_main {
        width: calc(800 / var(--base) * 100vw);
        height: calc(450 / var(--base) * 100vw);
        overflow: hidden;
    }

    .nav-item {
        width: calc(240 / var(--base) * 100vw);
        height: calc(107 / var(--base) * 100vw);
        margin: 0 calc(6 / var(--base) * 100vw);
        cursor: pointer;

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

    .main-item {
        width: 100%;
        height: calc(450 / var(--base) * 100vw);

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

    .gallery-dots {
        margin-top: calc(20 / var(--base) * 100vw);
    }

    .gallery-dots .slick-dots {
        position: static;
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .gallery-dots .slick-dots li {
        width: calc(30 / var(--base) * 100vw);
        height: calc(6 / var(--base) * 100vw);
        margin: 0 calc(4 / var(--base) * 100vw);
    }

    .gallery-dots .slick-dots li button {
        width: 100%;
        height: 100%;
        padding: 0;
        border: none;
        background: #ccc;
        cursor: pointer;
        font-size: 0;
        line-height: 0;
    }

    .gallery-dots .slick-dots li.slick-active button {
        background: #00a0b0;
    }

    .slick-dotted.slick-slider {
        margin-bottom: calc(12 / var(--base) * 100vw);
    }

    .slick-dots li button:before {
        content: unset;
    }

    .gallery-nav {
        margin: 0 calc(-6 / var(--base) * 100vw);
    }

    .gallery-main.js-slick-main {
        position: relative;
    }


    .gallery-main .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: calc(32 / var(--base) * 100vw);
        /* ボタンの横幅 */
        height: calc(32 / var(--base) * 100vw);
        /* ボタンの縦幅 */
        background-color: #00a0b0;
        /* カンプの水色 */
        border: none;
        cursor: pointer;
        text-indent: calc(-9999 / var(--base) * 100vw);
        /* 元の文字（Next/Previous）を非表示に */
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
    }

    .gallery-main .slick-arrow:hover {
        opacity: 0.8;
    }

    /* 矢印の内側の「く」の字をCSSで作成 */
    .gallery-main .slick-arrow::before {
        content: '';
        display: block;
        width: calc(8 / var(--base) * 100vw);
        height: calc(8 / var(--base) * 100vw);
        border-top: calc(2 / var(--base) * 100vw) solid #fff;
        /* 矢印の色は白 */
        border-left: calc(2 / var(--base) * 100vw) solid #fff;
    }

    /* 左ボタン */
    .gallery-main .slick-prev {
        left: calc(-55 / var(--base) * 100vw);
    }

    .gallery-main .slick-prev::before {
        transform: rotate(-45deg);
        margin-left: calc(3 / var(--base) * 100vw);
    }

    /* 右ボタン */
    .gallery-main .slick-next {
        right: calc(-55 / var(--base) * 100vw);
    }

    .gallery-main .slick-next::before {
        transform: rotate(135deg);
        margin-right: calc(3 / var(--base) * 100vw);
    }

    /* movie*/
    .video-block {
        margin-bottom: calc(35 / var(--base) * 100vw);
        /* display: flex;
        justify-content: center; */

        iframe {
            width: calc(700 / var(--base) * 100vw);
            height: calc(450 / var(--base) * 100vw);
        }
    }

    .video-block:last-child {
        margin-bottom: 0;
    }


    /*スタジアム情報*/
    .stadium-info {
        margin-bottom: calc(35 / var(--base) * 100vw);
    }

    .stadium-info:last-child {
        margin-bottom: 0;
    }

    dl.stadium-dl {
        display: flex;
        align-items: flex-start;

        dt,
        dd {
            padding: calc(20 / var(--base) * 100vw) calc(40 / var(--base) * 100vw);
            font-size: calc(14 / var(--base) * 100vw);
            line-height: calc(22 / var(--base) * 100vw);
            word-break: break-all;
        }

        dt {
            width: calc(280 / var(--base) * 100vw);
            font-weight: bold;
        }

        dd {
            width: calc(680 / var(--base) * 100vw);

            /*表内リンクの色（カスタムフィールドのWYSIWYG出力に適用）*/
            a {
                color: #009EB4;
                text-decoration: underline;
            }
        }

        .stadium-map {
            margin-top: calc(12 / var(--base) * 100vw);


        }

        iframe {
            width: calc(500 / var(--base) * 100vw);
            height: calc(500 / var(--base) * 100vw);
        }
    }

    dl:nth-child(even) {
        background: #F7F7F7;
    }


    /**/
    .shops-table-wrapper {
        width: 100%;
        margin: calc(20 / var(--base) * 100vw) 0 calc(90 / var(--base) * 100vw) 0;
        font-size: calc(14 / var(--base) * 100vw);
        line-height: 1.6;
    }

    .shops-table-wrapper:last-child {
        margin: calc(20 / var(--base) * 100vw) 0 0 0;
    }

    .shops-table-header {
        display: flex;
        background-color: #001f54;
        /* カンプに合わせた濃紺 */
        color: #fff;
        font-weight: bold;
        text-align: center;
    }

    .shop-row {
        display: flex;
        align-items: center;
        border-bottom: calc(1 / var(--base) * 100vw) solid #eee;
        padding: calc(15 / var(--base) * 100vw) 0;
    }

    .shop-row:nth-child(even) {
        background-color: #f8f9fa;
    }

    .col-name {
        width: 25%;
        padding: 0 calc(20 / var(--base) * 100vw);
    }

    .col-address {
        width: 45%;
        padding: 0 calc(20 / var(--base) * 100vw);
    }

    .col-info {
        width: 30%;
        padding: 0 calc(20 / var(--base) * 100vw);
    }

    .shops-table-header>div {
        padding: calc(15 / var(--base) * 100vw) calc(20 / var(--base) * 100vw);
    }

    .col-info .tel a {
        color: #00a0b0;
        text-decoration: underline;
    }
}

/*目次*/
.toc-container {
    width: 100%;
    max-width: calc(600 / var(--base) * 100vw);
    /* カンプに合わせた適正幅に調整してください */
    border-top: calc(3 / var(--base) * 100vw) solid #001B5B;
    /* 上部ライン（ネイビーに統一）。※現状セレクタは .toc-container だが実DOMは .table-of-contents のため未適用 */
    margin: calc(20 / var(--base) * 100vw) 0;
    font-family: sans-serif;
}

/* 見出しタイトル */
.toc-title {
    font-size: calc(14 / var(--base) * 100vw);
    /* 本文に合わせてレギュラー＋文字色はネイビーに統一 */
    font-weight: 400;
    color: #001B5B;
    /* padding: 0 0 calc(10 / var(--base) * 100vw) 0; */
    text-align: left;
    position: relative;
}

.toc-title::after {
    position: absolute;
    content: '';
    height: calc(0.5 / var(--base) * 100vw);
    top: calc(11 / var(--base) * 100vw);
    /* タイトル下の区切り線もネイビーに統一 */
    background: #001B5B;
    width: calc(191 / var(--base) * 100vw);
    transform: translateY(-50%);
    left: calc(37 / var(--base) * 100vw);
}

/* 目次リストのリセット */
.toc-list,
.toc-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* 大見出し（h2）のスタイル */
.toc-item-h2 {
    position: relative;
    border-top: calc(1 / var(--base) * 100vw) solid #001B5B;
    padding: calc(15 / var(--base) * 100vw) calc(40 / var(--base) * 100vw) calc(15 / var(--base) * 100vw) 0;
}

.toc-item-h2>a {
    color: #001B5B;
    font-weight: 400;
    font-size: calc(14 / var(--base) * 100vw);
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.toc-toggle-btn {
    position: absolute;
    top: calc(20 / var(--base) * 100vw);
    right: calc(10 / var(--base) * 100vw);
    width: calc(12 / var(--base) * 100vw);
    height: calc(12 / var(--base) * 100vw);
    border-top: calc(2 / var(--base) * 100vw) solid #001B5B;
    border-right: calc(2 / var(--base) * 100vw) solid #001B5B;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.toc-item-h2.is-open .toc-toggle-btn {
    transform: rotate(-45deg);
    top: calc(24 / var(--base) * 100vw);
}

.toc-sub-list {
    display: none;
    margin-top: calc(10 / var(--base) * 100vw);
}

.toc-item-h3 {
    border-top: calc(1 / var(--base) * 100vw) solid #001B5B;
    /* 上下に余白を入れる（下0だとテキストが下線に密着してしまう） */
    padding: calc(12 / var(--base) * 100vw) 0 calc(12 / var(--base) * 100vw) calc(30 / var(--base) * 100vw);
}

.toc-item-h3 a {
    color: #001B5B;
    font-weight: 400;
    font-size: calc(14 / var(--base) * 100vw);
    text-decoration: none;
    display: block;
}

.toc-list>li:last-child {
    border-bottom: calc(1 / var(--base) * 100vw) solid #001B5B;
}

.toc-list>li:first-child {
    /* 最初の項目は上線だけ消す（border:noneだと項目1個のとき下線も消えてしまう） */
    border-top: none;
}



/* --- スマホ（レスポンシブ） --- */
@media (max-width: 768px) {
    .template_page {
        .match-banner {
            /* height: calc(98 / var(--base) * 100vw); */
            /* padding: calc(20 / var(--base) * 100vw) 0; */
            padding: 0;
            background: url('/wp-content/themes/custom/assets/images/temlate_page_banner.webp') no-repeat left / cover;
            min-height: calc(100 / var(--base) * 100vw);

            .match-banner-title {
                font-size: calc(14 / var(--base) * 100vw);
                margin-top: calc(12 / var(--base) * 100vw);
                width: auto;
            }

            .match-banner-subtitle {
                font-size: calc(9 / var(--base) * 100vw);
            }

            .match-banner-subtitle::before {
                height: calc(6 / var(--base) * 100vw);
            }

            .match-banner-inner {
                padding: 0;

                .match-banner-text {
                    padding-left: calc(20 / var(--base) * 100vw);
                }
            }

            .match-banner-inner::before {
                width: calc(157 / var(--base) * 100vw);
                height: calc(164 / var(--base) * 100vw);
                top: calc(-20 / var(--base) * 100vw);
                left: calc(-43 / var(--base) * 100vw);
            }
        }

        /*画像ありの場合*/
        .match-banner.has-image {
            /* タイトルが複数行(最大4行)になっても見切れないよう、固定高ではなく最小高にして縦に伸ばす */
            /* PC用ルールの height(SPでは362px相当) を打ち消し、内容に応じて伸縮させる */
            height: auto;
            min-height: calc(100 / var(--base) * 100vw);
            /* 上下の余白を均一にする */
            padding: calc(16 / var(--base) * 100vw) 0;

            .match-banner-subtitle {
                font-size: calc(9 / var(--base) * 100vw);
                /* 上端の余白を padding 分だけに揃えるため、先頭要素の上マージンを消す */
                margin-top: 0;
            }

            .match-banner-subtitle::before {
                width: calc(2 / var(--base) * 100vw);
            }

            .match-banner-title {
                margin-top: calc(16 / var(--base) * 100vw);
                width: calc(180 / var(--base) * 100vw);
            }

            .match-banner-image {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;

                img {
                    width: calc(178 / var(--base) * 100vw);
                    /* バナー全高にして中央でトリミング表示 */
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }
    }

    .shops-table-header {
        display: none;
    }

    .shop-row {
        display: block;
        padding: 20px;
    }

    .col-name,
    .col-address,
    .col-info {
        width: 100%;
        padding: 0;
        margin-bottom: 10px;
    }

    .col-name {
        font-size: 16px;
    }

    .template_contents {
        display: block;
        padding: 0 20px;
        margin: calc(30 / var(--base) * 100vw) auto calc(60 / var(--base) * 100vw);

        .table-of-contents {
            display: none;
        }

        h2 {
            font-size: calc(20 / var(--base) * 100vw);
            /* 下余白を半分に（40→20） */
            margin-bottom: calc(20 / var(--base) * 100vw);
            line-height: calc(28 / var(--base) * 100vw);
        }

        h2:last-child {
            margin-bottom: 0;
        }

        h3 {
            margin-bottom: calc(20 / var(--base) * 100vw);
            line-height: calc(28 / var(--base) * 100vw);
        }

        h3::before {
            border-left: calc(4 / var(--base) * 100vw) solid #001B5B;
        }

        h3:last-child {
            margin-bottom: 0;
        }

        .text-block {
            margin-bottom: calc(20 / var(--base) * 100vw);
        }

        .text-block:last-child {
            margin-bottom: 0;
        }

        /* スマホでは画像を幅いっぱいに収める（はみ出し防止） */
        .text-block img {
            max-width: 100%;
            height: auto;
        }

        /* スマホでは回り込み(float)を解除して縦積みにし、margin分のはみ出しを防ぐ。
           左/中央/右の寄せ方向はブロック揃えで維持する */
        .text-block .alignleft {
            float: none;
            display: block;
            margin: 0 auto calc(16 / var(--base) * 100vw) 0;
        }

        .text-block .alignright {
            float: none;
            display: block;
            margin: 0 0 calc(16 / var(--base) * 100vw) auto;
        }

        .text-block .aligncenter {
            float: none;
            display: block;
            margin: 0 auto calc(16 / var(--base) * 100vw);
        }

        /* キャプション付き画像のインライン幅によるはみ出しも防ぐ */
        .text-block .wp-caption {
            max-width: 100%;
        }

        /* 3列以上（3列目のセルが存在する）の表だけ、スマホで横スクロールさせる。
           PHPで全ての表は .table-scroll でラップ済み。:has(:nth-child(3))で列数を判定し、
           2列以下は対象外＝従来どおり縦に収まる。表自体は display:table のままなので
           高さが正しく計算され、縦方向の見切れが起きない */
        .table-scroll:has(td:nth-child(3)),
        .table-scroll:has(th:nth-child(3)) {
            overflow-x: auto;
            /* 縦方向はスクロールさせない（x指定だけだとyがautoに昇格するため明示） */
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .table-scroll:has(td:nth-child(3)) > table,
        .table-scroll:has(th:nth-child(3)) > table {
            /* セルを折り返さず本来の幅を保たせ、ビューポートをはみ出させてスクロールを発生させる */
            white-space: nowrap;
            width: auto;
            min-width: 100%;
        }

        .single-image {
            margin-bottom: calc(20 / var(--base) * 100vw);

            img {
                /* トリミングせず成り行き表示 */
                max-width: 100%;
                height: auto;
            }
        }

        .single-image:last-child {
            margin-bottom: 0;
        }

        /*２カラム画像*/
        .two-column-images {
            gap: calc(12 / var(--base) * 100vw);
            width: 100%;
            margin: 0 auto calc(20 / var(--base) * 100vw);

            .col-left img,
            .col-right img {
                /* 幅フィット（トリミングなし）。高さ固定を解除して比率維持 */
                height: auto;
            }
        }

        .two-column-images:last-child {
            margin-bottom: 0;
        }

        /*カラムカード（SPは2列）*/
        .column-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: calc(16 / var(--base) * 100vw);
            width: 100%;
            margin: 0 auto calc(20 / var(--base) * 100vw);
        }

        .column-card-image {
            margin-bottom: calc(10 / var(--base) * 100vw);
        }

        .column-card-text {
            font-size: calc(13 / var(--base) * 100vw);
            margin-bottom: calc(10 / var(--base) * 100vw);
        }

        .column-card-detail {
            padding: calc(12 / var(--base) * 100vw);
        }

        .column-card-subtitle {
            font-size: calc(13 / var(--base) * 100vw);
            margin-bottom: calc(6 / var(--base) * 100vw);
        }

        .column-card-items {
            font-size: calc(13 / var(--base) * 100vw);
        }


        .gallery-main.js-slick-main {
            padding: 0;
        }

        .gallery-main .slick-prev {
            left: calc(-10 / var(--base) * 100vw);
        }

        .gallery-main .slick-next {
            right: calc(-10 / var(--base) * 100vw);
        }

        .slick-dotted.slick-slider {
            margin-bottom: calc(5 / var(--base) * 100vw);
        }

        .gallery-wrapper {
            width: calc(337 / var(--base) * 100vw);
            margin: 0 auto calc(20 / var(--base) * 100vw);
        }


        .main-item {
            height: calc(190 / var(--base) * 100vw);

            img {
                height: unset;
            }
        }

        .nav-item {
            height: calc(44 / var(--base) * 100vw);
        }

        .gallery-dots {
            margin-top: calc(16 / var(--base) * 100vw);
        }

        .gallery-dots .slick-dots li {
            width: calc(28 / var(--base) * 100vw);
        }

        .gallery-nav {
            margin: 0 calc(-6 / var(--base) * 100vw);
        }

        .video-block {
            margin-bottom: calc(20 / var(--base) * 100vw);

            iframe {
                /* width: calc(337 / var(--base) * 100vw); */
                width: 100%;
                height: calc(190 / var(--base) * 100vw);
            }
        }

        dl.stadium-dl {

            dt,
            dd {
                padding: calc(20 / var(--base) * 100vw) calc(14 / var(--base) * 100vw);
                line-height: calc(20 / var(--base) * 100vw);
            }

            dt {
                width: calc(102 / var(--base) * 100vw);
            }

            dd {
                width: calc(251 / var(--base) * 100vw);
            }

            .stadium-map {
                margin-top: calc(12 / var(--base) * 100vw);


            }

            iframe {
                /* width: calc(209 / var(--base) * 100vw); */
                width: 100%;
                height: calc(202 / var(--base) * 100vw);
            }

        }

        /*スタジアム情報*/
        .stadium-info {
            margin-bottom: calc(20 / var(--base) * 100vw);
        }

        .shops-table-header {
            align-items: center;
        }

        .col-name,
        .col-address,
        .col-info {
            width: calc(117 / var(--base) * 100vw);
            margin-bottom: 0;
            font-size: calc(14 / var(--base) * 100vw);
            padding: 0 calc(14 / var(--base) * 100vw);
        }

        .col-info {
            .tel {
                word-break: break-all;
            }
        }
    }



}