@charset "utf-8";

:root {
    --header-h: 87px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: "Mgen+ 2cp";
    font-weight: normal;
    src: local("mgenplus-2c-regular"),
        url("../fonts/mgenplus-2cp-regular.woff2") format("woff2"),
        url("../fonts/mgenplus-2cp-regular.woff") format("woff");
}

@font-face {
    font-family: "Mgen+ 2cp";
    font-weight: bold;
    src: local("mgenplus-2cp-bold"),
        url("../fonts/mgenplus-2cp-bold.woff2") format("woff2"),
        url("../fonts/mgenplus-2cp-bold.woff") format("woff");
}

@font-face {
    font-family: "Mgen+ 2cp";
    font-weight: 900;
    src: local("mgenplus-2cp-black"),
        url("../fonts/mgenplus-2cp-black.woff2") format("woff2"),
        url("../fonts/mgenplus-2cp-black.woff") format("woff");
}



html {
    height: 100%;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
    background-size: unset;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    overflow: auto;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background-image: url("../img/bg.jpg");
    background-size: cover;
    /* ← これが最重要 */
    background-position: center;
    /* 中央基準で切る */
    background-repeat: no-repeat;
}

header {
    display: none;
}






body,
section,
h1,
h2,
h3,
h4,
h5,
p,
button {
    font-size: 1.4rem;
}

button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    box-shadow: none;
    outline: none;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.container-top {
    width: 100%;
    margin: auto;
}

.center {
    text-align: center;
}

img {
    max-width: 100%;
    vertical-align: middle;
}


#opening {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    overflow: hidden;
    height: 100dvh;
    background-image: url("../img/main_pc_inner2000.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity 2s ease, transform 3s ease;
}

#opening.is-hide {
    opacity: 0;
}

#opening.black {
    background: #000;
}

#opening .opening-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1000000;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-weight: normal;
    letter-spacing: .08em;
    cursor: pointer;

    /* 追加：上から */
    opacity: 0;
    transform: translateY(-30px);
    /* 上にずらす */
    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1);
}

#opening .opening-skip.is-show {
    opacity: 1;
    transform: translateY(0);
    /* 最終位置 */
}

#opening .opening-skip:hover {
    opacity: .85;
}

/* 光の輪 */
.flash-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}



.kv .opening-base {
    position: absolute;
    z-index: 1;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    opacity: 0;
    transition: opacity 1s ease;
}

.kv .opening-base.is-show,
.kv .opening-day.is-show,
.kv .opening-title.is-show,
.kv .opening-img-temp.is-show {
    opacity: 1;
}

.kv .opening-title.is-show {
    transform: translate(-50%, 0);
}

.kv .opening-img-temp.is-hide {
    opacity: 0;
}

.kv .opening-opening {
    position: absolute;
    z-index: 1;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    transition: opacity 1s ease;
}

.kv .opening-day {
    position: absolute;
    z-index: 1;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    transition: opacity 1s ease;
    opacity: 0;
}

.kv .opening-title {
    position: absolute;
    z-index: 1;
    bottom: 10%;
    left: 50%;
    width: 90%;
    opacity: 0;
    transform: translate(-50%, 40px);
    /* ← 下から */
    transition:
        opacity 2s cubic-bezier(.22, 1, .36, 1),
        transform 2s cubic-bezier(.22, 1, .36, 1);
}

.kv .opening-img-temp {
    position: absolute;
    z-index: 0;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    transition: opacity 1s ease;
    opacity: 0;
    height: 100%;
    background: #000;
}

.kv .opening-base img,
.kv .opening-title img,
.kv .opening-img-temp img,
.kv .opening-day img {
    width: 100%;
    height: 100%;
}



.kv .opening-img {
    position: absolute;
    inset: 0;
}

.kv .op-slide {
    position: absolute;
    inset: 0;
}

.kv .op-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.kv .opening-img {
    opacity: 0;
    visibility: hidden;
}

.kv .opening-img.is-ready {
    opacity: 1;
    visibility: visible;
}





.top-banner-layer p a {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: left;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0.014));
    backdrop-filter: blur(4px);
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid #fff;
    padding: 0 20px;
    height: 40px;
}

/* 光線は背面に */
.top-banner-layer p a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: skewX(-20deg);
    animation: shine 3s infinite;

    z-index: 0;
    /* ← 背面 */
    pointer-events: none;
    /* ← クリックにも影響させない */
}



.top-banner-layer p a::before {
    left: 0;
    /* 固定 */
    transform: translateX(-150%) skewX(-20deg);
    animation: shine 3s infinite;
}

/* =============================
   PICK UP バナー
============================= */

.pickup-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    background: #cf2e2e;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 3;
    color: #ffffff;
    padding: 2px 10px 2px 28px;
    text-align: center;
    display: block;
}

.pickup-bar::before {
    content: "i";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: #fff;
    color: #cf2e2e;

    font-size: 12px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* リンク全体 */
.pickup-bar a {
    position: relative;
    flex: 1;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    display: block;
    height: 100%;
}

/* 流れる文字 */
.pickup-text {
    position: absolute;
    white-space: nowrap;
    top: 50%;
    font-weight: 500;
    letter-spacing: .05em;
    animation: marquee 18s linear infinite;
    display: inline-flex;
    align-items: center;
    gap: 8px;

}

#top .pickup-text {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.pickup-text::before {
    content: "";
    width: 30px;
    height: 30px;
    /* 画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;

}

.pickup-text.campaign::before {
    background-image: url("../img/campaign.svg");
}

.pickup-text.info::before {
    background-image: url("../img/info.svg");
}

.pickup-text.special::before {
    background-image: url("../img/special_white.svg");
}

.pickup-text.race::before {
    background-image: url("../img/race_white.svg");
}

.pickup-text.event::before {
    background-image: url("../img/event_white.svg");
}



/* 右 → 左 */
@keyframes marquee {
    0% {
        transform: translate(120%, -50%);
    }

    100% {
        transform: translate(-100%, -50%);
    }
}

.layout-inner {
    display: flex;
    align-items: stretch;
    /* grid-template-columns: 1fr 320px;
    gap: 0px;
    margin-top: 0px; */
}

/* ===== 左 ===== */
.left {
    width: 320px;
    height: 100dvh;
    overflow-y: auto;
    position: sticky;
    top: 0;
}

/* ===== 右 ===== */
.right {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;

}

.right::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 100dvh;

    background-image:
        url("../img/main_pc_inner2000.png"),
        url("../img/main_pc_inner3.jpg");

    background-repeat: no-repeat, no-repeat;
    /* PNGだけ拡大 */
    background-size: 100%, cover;
    /* ← ここ */
    background-position: center, center;
    /* ★ ここ追加 */
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0) 100%);

    z-index: -1;
}

.right.is-top {
    position: relative;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.right-overlay-img {
    position: absolute;
    transform: translateX(-50%);

    bottom: 10%;
    left: 50%;
    width: 90%;
    /* サイズ指定 */
    z-index: 1;
    /* 背景より上 */
}

.right-overlay-bottom-img {
    position: absolute;
    transform: translateX(-50%);

    bottom: 3%;
    left: 50%;
    width: 50%;
    /* サイズ指定 */
    z-index: 1;
    /* 背景より上 */
}

/* フッターを下へ押す */
.right.is-top .right-footer {
    margin-top: auto;

}

footer p {
    font-size: 1rem;
    padding: 1rem;
    margin: 0 1rem;

    text-align: right;
}

.right.is-top footer.right-footer p {
    font-size: 1rem;
    padding: 0;
    margin: 0 1rem;
    text-align: right;
}


.hero-wrap-sp {}


/* 左ナビ：幅固定 */
.hero-wrap .side-menu {
    flex: 0 0 320px;
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 10;
    width: 100%;
}

/* 右KV：残り幅全部 */
.hero-wrap #top-banner {}

/* いま .opening-* を absolute で重ねてるので、kv を基準にする */
.hero-wrap #top-banner .kv {}

.opening-layer {
    display: flex;
    height: 100dvh;
    /* 画面いっぱいはここで決める */
    overflow: hidden;
    /* はみ出し防止 */
    inset: 0;
    z-index: 2;
}

/* もし #top-banner に width:100% や height:100dvh を入れてたら消す/上書き */
#top-banner {
    width: auto;
    height: auto;
}



.side-menu {
    position: fixed;
    width: 35rem;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2.3rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
    z-index: 99;
}

#gnav {
    margin-top: 0rem;
    margin-bottom: 5rem;
}

#gnav ul {
    list-style: none;
}

#gnav ul .disabled {
    opacity: 0.6;
    pointer-events: none;
}

#gnav .nav-first>li>a {
    padding: 1.1rem 1.1rem 1.1rem 2.2rem;
    border-bottom: none;

    background:
        linear-gradient(to right,
            #b8860b,
            #ffd700,
            #fff8dc,
            #ffd700,
            #b8860b) bottom / 100% 1px no-repeat;
}

#gnav .nav-first>li>a:hover {
    color: #d4af37;

}

.nav-second,
.nav-third {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
}

#gnav .nav-second>li {
    margin: 1rem 0 1rem 1.2rem;
}

#gnav .nav-second>li:last-child {
    margin-bottom: 0.8rem;
}

#gnav .nav-second>li a {
    display: flex;
    align-items: center;
}

#gnav .nav-second>li:hover,
#gnav .nav-second>li::after {
    background: rgba(255, 255, 255, 0.1);
}

#gnav .nav-second>li a:hover,
#gnav .nav-second>li a::after {
    color: #d4af37;
}

#gnav .nav-second>li a::before {
    content: "";
    width: 0.8em;
    height: 0.1rem;
    display: inline-block;
    margin-right: 0.8rem;

    background: #d4af37;
}

#gnav .nav-third>li {
    margin: 1.6rem 0 1.6rem 2rem;
}

#gnav .nav-third>li:last-child {
    margin-bottom: 0.4rem;
}

#gnav ul li a {
    text-decoration: none;
    display: block;
    color: #fff;
    font-weight: normal;
}

#gnav .nav-second>li a {
    font-size: 1.2rem;
}

.side-menu .sns {
    margin-top: auto;
    margin-bottom: 2rem;
}

.side-menu .sns ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.side-menu .sns ul li img {
    height: 45px;
}

.side-menu .title a {
    font-weight: bold;
    text-align: center;
    font-size: 2.4rem;

    background: linear-gradient(135deg,
            #8a6b00,
            #f5d76e,
            #fff5b1,
            #f5d76e,
            #8a6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    border: 1px solid;
    border-image: linear-gradient(135deg,
            #8a6b00,
            #f5d76e,
            #fff5b1,
            #f5d76e,
            #8a6b00) 1;

    padding: 1rem;
    display: block;
    text-decoration: none;
}

@keyframes shine {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    60% {
        transform: translateX(250%) skewX(-20deg);
    }

    100% {
        transform: translateX(250%) skewX(-20deg);
    }
}

#gnav a.mult {
    position: relative;
    padding-right: 2rem;
    /* 右にスペース確保 */
}

#gnav a.mult::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
}

#gnav a.mult.race::after {
    background: url('../img/race_yellow.svg') no-repeat center/contain;
}

#gnav a.mult.campaign::after {
    background: url('../img/campaign_yellow.svg') no-repeat center/contain;
}

#gnav a.mult.info::after {
    background: url('../img/info_yellow.svg') no-repeat center/contain;
}

#gnav a.mult.event::after {
    background: url('../img/event_yellow.svg') no-repeat center/contain;
}

#gnav a.mult.special::after {
    background: url('../img/special_yellow.svg') no-repeat center/contain;
}

#gnav a.mult.home::after {
    background: url('../img/home_yellow.svg') no-repeat center/contain;
}

.countdown {
    display: block;
    align-items: center;
    gap: 3px;
    color: #fff;
    margin: 0 auto;
    text-align: right;
}

.countdown p {
    margin: 0;
    display: inline-block;
    font-weight: normal;
    font-size: 0.9rem;
}


.countdown p.countdown-number {
    width: 55px;
    text-align: center;
    background: #fff;
    color: #111111;
}

.opening-news {
    display: flex;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}



/* 親：ここを基準に絶対配置できる */
.opening-news {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    top: 0;
    display: grid;
    padding: 10px;
}

/* リスト初期化 */
.news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


.opening-news .news-list {
    pointer-events: auto;
    /* ボタン押せるように */
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    gap: 10px;
    padding-top: 15%;
    justify-self: end;
    /* ← 右寄せ（親グリッド内で） */
    align-self: start;
    /* ← 上寄せ */
}

.opening-news .news-list button {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    width: 200px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .65);
    background: linear-gradient(120deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0.014));
    backdrop-filter: blur(4px);
    color: #fff;
    text-align: left;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
    font-weight: bold;
}

/* 光るレイヤー（hoverで出す） */
.opening-news .news-list button::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, .25),
            rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 0;
    pointer-events: none;
}

/* 文字は前面 */
.opening-news .news-list button>* {
    position: relative;
    z-index: 1;
}

/* hoverで光る */
.opening-news .news-list button:hover {
    border-color: rgba(255, 255, 255, .95);
    box-shadow: 0 0 18px rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}

.opening-news .news-list button:hover::before {
    opacity: 1;
}

.opening-news .news-list button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-20deg);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.opening-news .news-list button:hover::after {
    opacity: 1;
    animation: btnShine 1s ease;
}

@keyframes btnShine {
    from {
        left: -60%;
    }

    to {
        left: 120%;
    }
}

.opening-news .news-list button {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* 表示状態 */
.opening-news.is-show .news-list button {
    opacity: 1;
    transform: translateX(0);
}

/* ===== モーダル（opening内で表示） ===== */
.news-modal {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: auto;
}

.news-modal.is-open {
    display: block;
}

.news-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .65);
}

.news-modal__panel {
    position: absolute;
    left: 50%;
    top: 4%;
    transform: translateX(-50%);

    width: min(92%, 520px);
    background: rgba(0, 0, 0, .65);
    color: #fff;
    border: 1px solid #d4af37;
    padding: 20px;
    width: 98%;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.news-modal__panel h3 {
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 9px;
    font-size: 1.5rem;
}

.news-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    margin-right: 10px;
}

.fade-up {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .15s ease-out,
        transform .22s cubic-bezier(.2, .8, .2, 1);
}

.fade-up.is-show {
    opacity: 1;
    transform: translateY(0);
}

.disable {
    pointer-events: none;
    /* クリック不可 */
    cursor: not-allowed;
    /* 禁止カーソル */
    opacity: .45;
    /* 薄くする */
    filter: grayscale(60%);
    /* 少し色味落とす（任意） */
}

li.disable,
button.disable,
a.disable {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .45;
    filter: grayscale(60%);
}

#site-main {
    position: relative;
}

.right-wrap {
    margin: auto;
    display: block;
    overflow: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    z-index: 1;
    right: 0;
    height: 100%;
    overflow-y: scroll;
}

.container .contents-innner {
    margin: 0 10px;
    min-height: 1000px;
    background: url(../img/bg_title.png) center top / cover no-repeat;
    position: relative;
    overflow: hidden;
}

/* 黒オーバーレイ */
.container .contents-innner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    /* ← 暗さ調整（0.3〜0.6推奨） */
    z-index: 1;
}

/* 中の文字を前面に出す */
.container .contents-innner>* {
    z-index: 2;
}

.contents-news {
    margin-top: 40px;
    color: #fff;
    z-index: 3;
    position: absolute;
    text-align: 0;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    color: #fff;
    z-index: 3;
    text-align: center;
}

/* =========================
                   右上最上部：メニューボタン
                ========================= */
.hero-menu {
    position: relative;
    z-index: 100;
}

.hero-open-btn {
    position: fixed;
    top: 0;
    right: 0;
    margin: 16px;
    width: 68px;
    height: 68px;
    background: #000;
    border: 3px solid #fff;
    backdrop-filter: blur(8px);
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 70;
    transition: transform .25s ease, background .25s ease, opacity .2s ease;
}

.hero-open-btn:hover {
    background: rgba(0, 0, 0, .96);
}

/* 三本線 */
.hero-open-btn span {
    position: relative;
    width: 34px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
}

.hero-open-btn span::before,
.hero-open-btn span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: transform .35s ease, top .35s ease;
}

.hero-open-btn span::before {
    top: -10px;
}

.hero-open-btn span::after {
    top: 10px;
}

/* 開いている間：右上ボタンは隠す（ドロワー内に✕を置く） */
.hero-menu.is-open .hero-open-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

/* =========================
                   背景（クリックで閉じる）
                ========================= */
.hero-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .50);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
}

.hero-menu.is-open .hero-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* =========================
                   メニュー本体：右から出てきて画面を覆う
                   スクロール可能
                ========================= */
.hero-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 92vw);
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: -18px 0 50px rgba(0, 0, 0, .18);

    transform: translateX(102%);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
    z-index: 10001;

    overflow-y: auto;
    /* ← スクロールできる */
    -webkit-overflow-scrolling: touch;
}

.hero-menu.is-open .hero-drawer {
    transform: translateX(0);
}

.hero-drawer__inner {
    padding: 0px;
}

/* =========================
                   ドロワー内：上部（タイトル＆✕）
                ========================= */
.hero-drawer__top {
    position: sticky;
    top: 0;
    padding: 10px 0 0px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    top: 0;
    padding: 10px 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000;
    padding-right: 0.5rem;

    padding-left: 0.5rem;



}

.hero-drawer__title {
    margin: 0;
    letter-spacing: .10em;
    color: #111;
}

.hero-close-btn {
    width: 54px;
    height: 54px;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 45px;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    color: #fff;
    background: #fff;
    border: 1px solid #fff;
    color: #000;
}




/* =========================
                   メニュー項目（親）
                ========================= */
.hero-nav {
    margin-top: 0px;
    padding: 1rem;
}

.hero-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.hero-nav__item>a,
.hero-nav__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-radius: none;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(17, 17, 17, .08);
    background: rgba(255, 255, 255, 0);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    font-size: inherit;
}

.hero-nav__item>a.home {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    display: inline;
}

a.home .hero-nav__toggle {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    display: inline;
}

.hero-nav__item>a::after {
    content: "›";
    opacity: .6;
    font-weight: 700;
}

.hero-nav__item>a:hover {
    transform: translateY(-1px);

}

.hero-nav__item>a:hover::after {}

.hero-nav__item>a:focus,
.hero-nav__toggle:focus,
.hero-subnav a:focus {}

/* =========================
                   サブメニュー（折りたたみ）
                ========================= */
.hero-nav__toggle {
    border: none;
    border-bottom: none;
    background: linear-gradient(to right, #b8860b, #ffd700, #fff8dc, #ffd700, #b8860b) bottom / 100% 1px no-repeat;
}

.hero-nav__toggle .chev {
    display: inline-block;
    transition: transform .25s ease;
    font-size: 40px;
}

.hero-nav__item.is-subopen .hero-nav__toggle .chev {
    transform: rotate(180deg);
}

.hero-subnav {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 30px;
    display: none;
    gap: 8px;
}

.hero-nav__item.is-subopen .hero-subnav {
    display: inline-block;
    justify-content: start;
    justify-items: start;
    width: 100%;
}

.hero-subnav a {
    display: flex;
    align-items: center;
    padding: 12px 12px;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    margin-right: 20px;
    border: 1px solid rgba(17, 17, 17, .06);
    transition: background .2s ease, transform .2s ease;
    justify-content: flex-start;
}

.hero-subnav a::before {
    content: "";
    width: 0.8em;
    height: 0.1rem;
    display: inline-block;
    margin-right: 0.8rem;
    background: #d4af37;
}




.hero-subnav a:hover {
    color: #fff;
}

.hero-subnav a:hover::after {
    opacity: 1;
}

.hero-nav__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.hero-nav__toggle .icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
}

.hero-nav__toggle.race .icon {
    background: url('../img/race_yellow.svg') no-repeat center/contain;
}

.hero-nav__toggle.campaign .icon {
    background: url('../img/campaign_yellow.svg') no-repeat center/contain;
}

.hero-nav__toggle.info .icon {
    background: url('../img/info_yellow.svg') no-repeat center/contain;
}

.hero-nav__toggle.event .icon {
    background: url('../img/event_yellow.svg') no-repeat center/contain;
}

.hero-nav__toggle.special .icon {
    background: url('../img/special_yellow.svg') no-repeat center/contain;
}

.hero-nav__toggle.home .icon {
    background: url('../img/home_yellow.svg') no-repeat center/contain;
}



.hero-subnav li {
    width: 100%;
}

/* ▾ を右端へ押し出す */
.hero-nav__toggle .chev {
    margin-left: auto;
}

.hero-nav__item button:hover {
    color: #d4af37;
}


.hero-subnav a:hover,
.hero-subnav a::after {
    background: rgba(255, 255, 255, 0.1);
}

.hero-subnav a:hover,
.hero-subnav a::after {
    color: #d4af37;
}

.hero-drawer__top a {
    width: 60%;
    padding: 10px;
}

.hero-drawer__top a {
    font-weight: bold;
    text-align: center;
    font-size: 2.4rem;
    background: linear-gradient(135deg, #8a6b00, #f5d76e, #fff5b1, #f5d76e, #8a6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 1px solid;
    border-image: linear-gradient(135deg, #8a6b00, #f5d76e, #fff5b1, #f5d76e, #8a6b00) 1;
    padding: 0.5rem;
    display: block;
    text-decoration: none;
    background: #000;
}

.hero-drawer .countdown {
    text-align: right;
    margin-right: 7px;
    margin-top: 3rem;
}


.hero-drawer .sns {
    margin-top: 2rem;
    margin-bottom: 10px;
    padding: 1rem;
}

.hero-drawer .sns ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    /* ← ここ変更 */
    gap: 16px;
}

.hero-drawer .sns ul li img {
    height: 45px;
}

.hero-drawer .logo {
    width: 100%;
    text-align: end;
    padding: 1rem;
}

.hero-drawer .logo img {
    width: 70%;
}

#heroOpenBtn {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .45s ease,
        transform .45s ease;
    /* ← 表示はゆっくり */
}

#heroOpenBtn.is-hide {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity .2s ease,
        transform .2s ease;
    /* ← 非表示は速く */
}

.kaisai {
    padding: 3rem 1rem;
    padding-top: 3rem;

}

.kaisai a,
.kaisai a img {
    display: block;
    margin: 0 auto;
}

.kaisai a {
    font-weight: bold;
    text-align: center;
    font-size: 2.4rem;
    background: linear-gradient(135deg, #8a6b00, #f5d76e, #fff5b1, #f5d76e, #8a6b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 1px solid;
    border-image: linear-gradient(135deg, #8a6b00, #f5d76e, #fff5b1, #f5d76e, #8a6b00) 1;
    padding: 1rem;
    background: #000;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

/* ===== モーダル内：お知らせリスト ===== */
.news-feed {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

/* 1件のカード */
.news-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 24px;
    border: none;
    background: #fff;

    text-decoration: none;
    border: none;
    color: #333;
    margin-bottom: 1rem;
}

a.news-link:first-child {
    margin-top: 1rem;
}

a.news-link:last-child {
    margin-bottom: 1rem;
}


/* 日付 */
.news-time {
    flex: none;
    font-size: 1.1rem;
    color: #333;
    white-space: nowrap;
}

/* タグ */
.news-tags {
    display: flex;
    flex: none;
    gap: .25rem;
    list-style: none;
    padding-left: 0;
    margin: 0;
    align-items: center;
}

.news-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 1rem;
    color: #333;
    align-items: center;
    line-height: 1;
    width: 75px;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
}

.news-tag.news {
    background: #ff7070;
    color: #fff;
}

.news-tag.campaign {
    background: #22bb6d;
    color: #fff;
}

.news-tag.special {
    background: #007ab3cc;
    color: #fff;
}

.news-title {
    flex: auto;
    font-size: 1.3rem;
    margin: 0;
    overflow: hidden;
    flex: auto;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;

}


/* 矢印 */
.news-arrow {
    flex: none;
    font-size: 22px;
    opacity: .85;
    transform: translateY(-1px);
}

.news-tags__item {
    display: flex;
    /* ← これ重要 */
    align-items: center;
    /* ← 中央固定 */
}

.news-btn__arrow {
    font-size: 18px;
    opacity: .8;
    transition: transform .2s ease;
    margin-right: 5px;
}

.news-btn:hover .news-btn__arrow {
    transform: translateX(4px);
}

#sub .pickup-text {
    top: 18%;
    animation: inherit;
}

#sub .top-banner-layer p a {
    padding: 50px 50px 50px 20px;
}

#sub #coming .pickup-text {
    transform: translateX(40px);
    font-size: 2rem;
    opacity: 1;
    border-bottom: 3px solid #fff;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;
}

#sub #coming .pickup-text.is-show {
    transform: translateX(0);
    opacity: 1;
}


#sub .top-banner-layer p a::before {
    animation: none;
    animation-name: shine;
    animation-duration: 1.2s;
    /* 光る速さ */
    animation-delay: 0.3s;
    /* ← 遅らせる時間 */
    animation-iteration-count: 1;
    /* ← 1回だけ */
    animation-fill-mode: forwards;
    /* ← 終了後そのまま */
}

/* 背景レイヤーだけ固定 */
#sub .kv .opening-img {
    position: fixed;
    /* ←ここが肝 */
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* 背景なのでクリック邪魔しない */
}

#sub .hero-wrap #top-banner {}

#sub .opening-contents {
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    transform: translateX(60px);
    /* ← ここ重要 */
    opacity: 0;
    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

#sub .opening-contents.is-show {
    transform: translateX(0);
    opacity: 1;
    transform: translateX(0px);
}

#sub .none-opening-contents {
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    opacity: 1;
    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}



#sub .opening-contents article {
    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    min-height: 100px;
    width: 98%;
    padding: 0rem;
    margin-bottom: 1rem;
    min-height: 100px;
    margin: 0 auto;
    padding: 2rem;
    margin-bottom: 3rem;
}

#sub .none-opening-contents article {
    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    min-height: 100px;
    width: 98%;
    padding: 0rem;
    margin-bottom: 1rem;
    min-height: 100px;
    margin: 0 auto;
    padding: 2rem;
    margin-bottom: 3rem;
    margin-top: 1rem;
}

#sub .none-opening-contents article b {
    font-weight: normal;
}

table.release {
    border-collapse: collapse;
    width: 100%;
    min-width: 1100px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}

table.release th,
table.release td {
    padding: 8px;
    vertical-align: top;
    font-size: 1.1rem;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}





.tbl_header {
    background-color: #fff;
}

.week_sat {
    background-color: #d3f2ff;
}

.week_sun {
    background-color: #ffeafb;
}

.soldtime {
    color: #ff5252;
}

.allday {
    color: #18A180;
}

.table-scroll {
    overflow-x: auto;
}

.tbl_header:first-child {
    width: 10%;
}

.tbl_header:nth-child(2) {
    width: 15%;
}

.tbl_header:nth-child(3),
.tbl_header:nth-child(4),
.tbl_header:nth-child(5),
.tbl_header:nth-child(6),
.tbl_header:nth-child(7),
.tbl_header:nth-child(8) {
    width: 12.5%;
}

#sub .opening-contents article:first-of-type {
    margin-top: 1rem;
}

#sub .opening-contents {
    width: 100%;
}

#sub .top-banner-layer p a {
    border-bottom: none;
}

#sub .news-time {
    font-size: 1.3rem;
}

#sub .news-tag {
    padding: 9px 8px;
    width: 90px;
}

#sub .news-link {
    margin-bottom: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0);
}



.news-contents {
    text-align: left;
    color: #333;
    padding-bottom: 1rem;
}

.news-contents h4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.news-contents .contents {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.news-contents .contents p {
    font-size: 1.2rem;
}

.type2 dt {
    background: #2656a7;
    color: #fff;
    padding: 1rem;
}

.type2 dt {
    background: #2656a7;
    color: #fff;
    padding: 1rem;
}

.type2 dd {
    background: #fff;
    padding: 1rem;
}

.type2 dd ul {
    padding-left: 2rem;
}

/* メイン */
.right-main {
    flex: 1;
    /* ← コンテンツが少なくても下に押す */
}

/* フッター */
.right-footer {
    padding: 10px;
    background: #000;
    color: #fff;
    margin-top: auto;
}

#sub #coming {
    height: 100px;
}

footer .right-footer {
    top: 50%;
    animation: marquee 18s linear infinite;
    position: initial;
}

/* 初期：右にズラして透明 */
#sub .opening-contents article {
    transform: translateX(60px);
    opacity: 0;
    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;
    will-change: transform, opacity;
}

/* 表示時 */
#sub .opening-contents article.is-inview {
    transform: translateX(0);
    opacity: 1;
}



.hero-drawer__top a.hero-home-btn {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    text-decoration: none;
    padding: 0px;
    border: none;
}

.hero-drawer__top a.hero-home-btn img {
    width: 54px;
    height: 54px;
}


#top-banner-menu {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
}

.top-banner-menu-list {
    display: flex;
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 97%;
    justify-content: flex-start;
    position: relative;
}

.top-banner-menu-list li {
    flex: 1;
}

.top-banner-menu-list a {
    display: block;
    text-align: center;
    padding: 0.5rem 0.1rem;
    background: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s;
    font-size: 1.2rem;
    border: 1px solid #fff;

}

.top-banner-menu-list li {
    display: flex;
    align-items: stretch;
}

.top-banner-menu-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 5px;
}

.top-banner-menu-list>li a:hover {
    background: rgb(0 178 87 / 80%);
    color: #fff;
    border: 1px solid #22bb6d;
}


.news-contents {
    position: relative;
    /* ← これ必須 */
}



.news-title>span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* ← これが2行制限 */
    overflow: hidden;
    padding-right: 3rem;
}

.archive .news-contents h4 {
    border-bottom: none;
    padding: 0px;
}

.archive .news-contents {
    padding-bottom: 0px;
}

#sub .opening-contents.archive article {
    padding: 1rem;
    margin-bottom: 1rem;
}

.news-title span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive .news-contents::after {
    content: "›";
    position: absolute;
    right: 15px;
    top: 0%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(107 134 172 / 80%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    border: 4px double #ffffff;
}

#sub .opening-contents.archive article:hover {
    /* background: rgba(51, 51, 51, 0.9); */
    /* transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); */
}

#sub .opening-contents.archive article:hover,
#sub .opening-contents.archive article:hover * {
    /* color: #fff; */
}

.entry-content p {
    margin-bottom: 1.5em;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;
    letter-spacing: 0.08em;

    background: #000;
    color: #fff;
    text-decoration: none;

    border: 1px solid #d4af37;
    ;
    border-radius: 0;
    /* ← 完全な四角 */

    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    min-width: 400px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 1rem;
    background: linear-gradient(120deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .8));
}

.btn-back::before {
    content: "››";
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    transform: translateY(-8px);
}

.btn-back:hover {
    background: rgb(0 98 178 / 0.5);
    border: 1px solid #0062b2;
}

.cp-list li .cp-num {
    background: #3DB9D8;
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.9em;
    margin-right: 10px;
    white-space: nowrap;
    width: 100px;
    text-align: center;
}

.cp-num {
    background: #3DB9D8;
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.9em;
    margin-right: 10px;
    white-space: nowrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#sub .opening-contents article.news {
    border-top: 5px solid rgba(255, 112, 112, 0.8);
}

#sub .opening-contents article.special {
    border-top: 5px solid hsla(199, 100%, 35%, 1);
}

#sub .opening-contents article.campaign {
    border-top: 5px solid rgba(34, 187, 109, 0.8);
}

#sub .opening-contents article.event {
    border-top: 5px solid rgb(255 64 119 / 80%);
}

.fade-item {
    transform: translateX(60px);
    opacity: 0;
    transition: transform .6s ease, opacity .6s ease;
    /* ←忘れずに */
}

.fade-item.is-inview {
    transform: translateX(0);
    opacity: 1;
}

.top-banner-menu-list>li a.active {
    background: rgb(0 178 87 / 80%);
    color: #fff;
    border: 1px solid #22bb6d;
}

.top-banner-menu-list.info>li a.active {
    background: hwb(217.67deg 14.9% 34.51%);
    color: #fff;
    border: 1px solid hwb(217.67deg 14.9% 34.51%);
}

.top-banner-menu-list.info>li a:hover {
    background: hwb(217.67deg 14.9% 34.51%);
    color: #fff;
    border: 1px solid hwb(217.67deg 14.9% 34.51%);
}

#special .top-banner-menu-list>li a.active {
    background: hsla(199, 100%, 35%, 0.8);
    color: #fff;
    border: 1px solid #007ab3cc;
}

#event .top-banner-menu-list>li a.active {
    background: rgb(255 64 119 / 80%);
    color: #fff;
    border: 1px solid rgb(255 64 119 / 80%);

}

#sub .opening-contents .list-item {
    z-index: 1;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

#sub .opening-contents .list-contents {

    margin-bottom: 1rem;
    min-height: 100px;
    width: 98%;
    padding: 0rem;
    margin-bottom: 1rem;
    min-height: 100px;
    margin: 0 auto;
    padding: 2rem;
    margin-bottom: 3rem;
    margin-top: 1rem;
}

#special .opening-contents .list-contents {

    width: 100%;
}

/* ul を5列グリッド */
#sub .opening-contents .cp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* liをカードとして高さ揃え */
#sub .opening-contents .cp-list>li {
    height: 100%;
}

/* aをカードの“箱”にする */
#sub .opening-contents .cp-list>li>a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    background: #fff;
}

/* titleエリア：高さを揃えたいなら min-height を入れる */
#sub .opening-contents .cp-list .title {
    padding: 10px 12px;
    min-height: 84px;
    display: flex;
    gap: 6px;
}

#sub .opening-contents .cp-list .cp-num {
    font-size: 0.8rem;
}

#sub .opening-contents .cp-list .title p {
    margin: 0;
    line-height: 1.35;

    /* 長文が来てもカードが暴れないように（任意） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 2行で省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
}

/* 画像枠：比率固定（これで画像サイズ差で高さが変わらない） */
#sub .opening-contents .cp-list .img-area {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形にしたい */
    /* aspect-ratio: 4 / 3; */
    /* 横長にしたいならこっち */
    overflow: hidden;
}

/* 画像を枠にフィット */
#sub .opening-contents .cp-list .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 締切バッジ（任意で見やすく） */
#sub .opening-contents .cp-list .deadline {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

/* hover（任意） */
#sub .opening-contents .cp-list>li>a {
    color: #333;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1),
        box-shadow .6s cubic-bezier(.22, 1, .36, 1),
        color .4s ease;
}

#sub .opening-contents .cp-list>li>a:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    color: #333;
}

#sub .cp-list .title {
    display: flex;
    align-items: center;
    gap: 8px;
    /* ← 2つの間隔 */
    flex-wrap: wrap;
    /* ← 下のpを折り返すため */
}

#sub .cp-list .title p {
    flex-basis: 100%;
    /* ← pは必ず次の行へ */
    margin: 0;
}

#sub .opening-contents .list-contents {
    padding: 0.5rem;
}

#sub .opening-contents.none {
    display: none;
}


.top-banner-menu-list a.disable {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .45;
    filter: grayscale(60%);
}

.deadline {
    color: #cf2e2e;
}

/* -------------------------
   横並びラッパー
------------------------- */
.coming-toggle-wrap {
    position: absolute;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    top: 60px;
    margin: 0 1rem;
    height: 36px;
}

/* -------------------------
   ボタン基本
------------------------- */
.coming-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 14px;
    background: #ffd700;
    color: #000;
    cursor: pointer;
    font-weight: bold;
    width: 120px;
}

/* ホバー */
.coming-toggle:hover {
    background: rgba(207, 46, 46, 0.7);
    background: #cf2e2e;
    color: #ffd700;
}

/* -------------------------
   矢印
------------------------- */
.coming-toggle .arrow {
    font-size: 12px;
    transition: transform .3s ease;
}

/* 開いた状態 */
.coming-toggle[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

.coming-layer {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 95px;

    background: rgba(0, 0, 0, 0.7);
    padding: 1rem;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .35s ease, visibility .35s ease;
    transform: translateX(-60px);

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1),
        visibility .35s;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
}

/* ▼ 表示状態 */
.coming-layer.is-show {
    opacity: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.coming-toggle:hover,
.coming-toggle[aria-expanded="true"] {
    background: #cf2e2e;
    color: #ffd700;
}

/* 内側を基準にする */
.coming-layer__inner {
    height: 100%;
    display: flex;
    flex-direction: column;

    min-height: 0;
    /* ← これ超重要（ないとスクロール効かない） */
}

/* ×ボタンを右上に出す */
.coming-layer__close {
    position: absolute;
    top: 8px;
    left: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    font-size: 28px;
    line-height: 1;

    color: #fff;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;

    cursor: pointer;
    z-index: 2;
}

.layer-content {
    padding: 1rem;
    margin-top: 50px;
}

.layer-content h3 {
    border-bottom: 1px solid #fff;
}

.coming-layer .scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    padding-bottom: 40px;
    /* ← 好きな余白 */
}

.news-link .title {
    width: 100%;
    border-bottom: 1px solid #333;
}

.news-title span {
    border-bottom: 1px solid #333;
    font-weight: normal;
    width: 100%;
}

/* タイトルは普通のブロック */
.news-item.special h5 {
    margin-bottom: 16px;
}

/* 動画＋テーブルだけ横並び */
.news-item.special .special-inner {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* 重要：flex内のはみ出し防止 */
.news-item.special>* {
    min-width: 0;
}

/* 動画：PCは50% */
.news-item.special iframe {
    width: 50%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* 560×315と同じ比率 */
    flex: 0 0 auto;
}

/* テーブル側：残り幅。崩れたら横スクロール */
.news-item.special .race-table-wrap {
    flex: 1 1 50%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* テーブルは無理に潰さず、最低幅を確保（調整してOK） */
.news-item.special .race-table-wrap .race_member {
    width: max-content;
    min-width: 500px;
}

.race_member {
    border-collapse: collapse;
    /* ← 超重要 */
    width: 100%;
}

.race_member th,
.race_member td {
    border: 1px solid #333;
    padding: 1px;
    text-align: center;
    background: #fff;
}

.num-1 {
    color: #404040 !important;
    background: #fff !important;
}

.num-2 {
    color: #fff !important;
    background: #404040 !important;
}

.num-3 {
    color: #fff !important;
    background: #E61717 !important;
}

.num-4 {
    color: #fff !important;
    background: #0066CC !important;
}

.num-5 {
    color: #404040 !important;
    background: #F0C518 !important;
}

.num-6 {
    color: #fff !important;
    background: #228900 !important;
}

.num-7 {
    color: #404040 !important;
    background: #FF9500 !important;
}

.num-8 {
    color: #404040 !important;
    background: #F28ABD !important;
}

.num-9 {
    color: #fff !important;
    background: #822BD9 !important;
}

.w60 {
    width: 60px;
}

.w70 {
    width: 70px;
}

.race_member th.name,
.race_member td.name {
    text-align: left;
    padding: 0 1rem;
}

.race_member th.blue,
.race_member td.blue {
    background: #3478ae;
    color: #fff;
}

#special .top-banner-menu-list>li a:hover {
    background: hsla(199, 100%, 35%, 0.8);
    color: #fff;
    border: 1px solid #007ab3cc;
}

#event .top-banner-menu-list>li a:hover {
    background: rgb(255 64 119 / 80%);
    color: #fff;
    border: 1px solid rgb(255 64 119 / 80%);
}

#sub #special .opening-contents article {
    transform: none;
    opacity: 1;
    transition: none;
    will-change: auto;
}

.top-banner-menu-list {
    display: flex;
    flex-wrap: wrap;
    /* ← これ重要 */
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 95%;
}

.top-banner-menu-list {
    margin-left: 12px;
}

#special .top-banner-menu-list>li:first-child {
    margin-left: 0;
}



#special .top-banner-menu-list li {
    width: calc((100% - 9px) / 7);
    flex: none;
}

#special .top-banner-menu-list.box03 li {
    flex: 1 1 0;
    min-width: 0;
}

.update {
    margin-left: 12px;
    font-weight: normal;
}

.race_member th.name a,
.race_member td.name a {
    color: #333;
    text-decoration: none;
}

.race_member th.name a:hover,
.race_member td.name a:hover {
    color: #007ab3;
}

dd ul li.none {
    list-style: none;
}

dd ul li a {
    color: #333;
    text-decoration: underline;
    text-underline-offset: 6px;
    display: block;
}

dd ul li a.disabled {
    opacity: .45;
}

dd ul li a:hover {
    color: #333;
    text-decoration: underline;
    text-underline-offset: 6px;
}

dd ul li h5 {}

.red {
    color: #ff2525;
}

.top {
    margin-top: 4rem;
}

#sub .time-table {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


#sub .top-banner-menu-list.race>li a.active {
    background: rgb(255 64 119 / 80%);
    border: 1px solid rgb(255 64 119 / 80%);
}

#sub .top-banner-menu-list.race>li a:hover {
    background: rgb(255 64 119 / 80%);
    border: 1px solid rgb(255 64 119 / 80%);
}

.time-table table.release thead th {
    background: #007ab3;
    color: #fff;
}

.time-table table.release thead td {
    background: #bec3c5;
}

#sub .opening-contents article.race {
    border-top: 5px solid rgb(255 64 119 / 80%);
}

#sub .none-opening-contents article.race {
    border-top: 5px solid rgb(255 64 119 / 80%);
}

table.release th.white-right,
table.release td.white-right {
    border-right: 1px solid #fff;
}

.sub-tab-menu {
    display: flex;
    gap: 8px;
    list-style: none;
    align-items: stretch;
}

.sub-tab-menu li {
    flex: 1;
    display: flex;

}

.sub-tab-menu.box3 li {
    width: calc(100% / 3);
    flex: none;
}

.sub-tab-menu.box6 li {
    width: calc(100% / 6);
    flex: none;
}

.sub-tab-menu.box7 li {
    width: calc(100% / 7);
    flex: none;
}

.sub-tab-menu button {
    appearance: none;
    border: none;
    background: #eee;
    padding: 8px 16px;
    cursor: pointer;
    width: 100%;
    font-weight: normal;
    font-size: 1.2rem;
    width: 100%;
    height: 100%;
    color: #333;
}

.sub-tab-menu button.active {
    background: hwb(0deg 0% 100% / 80%);
    color: #fff;
    font-weight: normal;
}

#sub .opening-contents.tab article:first-of-type {
    margin-top: 0;
}

#sub #special .opening-contents .sub-tab-menu {}

.sub-tab-div {
    width: 98%;
    margin: 0 auto;
}

#sub .opening-contents article.min500 {
    min-height: 500px;
}

.special-inner-div {
    display: none;
    margin-bottom: 1rem;
}

.special-inner-div.active {
    display: block;
}

table.release.racer th,
table.release.racer td {
    vertical-align: middle;
}



table.release.racer tbody tr td:first-child {
    width: 80px;
}

table.release.racer tbody tr td:nth-child(2) a {
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.news-contents .contents table.release th p,
.news-contents .contents table.release td p {
    font-size: 1.1rem;
}

.news-contents .contents table.release th p.small,
.news-contents .contents table.release td p.small {
    font-size: 90%;
}

table.release.racer tbody tr td .bold {
    font-weight: bold;
}

table.release.racer thead {
    background: #007ab3;
    color: #fff;
}

.news-contents .contents table.release th.center,
.news-contents .contents table.release td.center {
    text-align: center;
}

.parking-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.parking-modal.is-show {
    display: block;
}

.parking-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.parking-modal__content {
    position: relative;
    width: min(1000px, calc(100% - 32px));
    max-height: 85vh;
    margin: 5vh auto 0;
    background: #fff;
    padding: 28px 20px 24px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.parking-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #111;
    color: #fff;
    line-height: 1;
    cursor: pointer;
}

.parking-modal__title {
    margin: 0 0 20px;
    padding-right: 50px;
    font-weight: 700;
    text-align: center;
}

.parking-modal__table-wrap {
    overflow-x: auto;
}

.parking-table table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #fff;
}

.parking-table th,
.parking-table td {
    border: 1px solid #222;
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
}

.parking-table th:first-child,
.parking-table td:first-child {
    text-align: left;
    width: 48%;
}

.parking-table thead th {
    background: #2656a7;
    font-weight: normal;
    color: #fff;
}

.parking-table .is-closed {
    color: #ff2525;
}

.parking-modal__notes {
    margin-top: 20px;
}

.parking-modal__notes p {
    margin: 0 0 10px;
    font-size: 80%;
    margin-bottom: 0;
}

.parking-modal__notes .is-red {
    color: #ff2525;
}

body.is-modal-open {
    overflow: hidden;
}

.notes p {
    position: relative;
    padding-left: 1.4em;
}

.notes p::before {
    content: "※";
    position: absolute;
    left: 0;
}

.menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-bottom: 1rem;
}



.menu-list li {
    display: flex;
    align-items: stretch;
}

.menu-list.box2 li {
    flex: none;
    width: calc((100% - 9px) / 2);
}

.menu-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: 5px;
    background: #e8e8e8;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
}

.menu-list li a.active {
    background: hsla(199, 100%, 35%, 0.8);
    color: #fff;
}

.tab-panel {
    display: none;
}

.tab-panel.bus-show {
    display: block;
}

.sub-tab-panel {
    display: none;
}

.sub-tab-panel.sub-show {
    display: block;
}

.sub-tab-panel table {
    margin-top: 1rem;
}

.parking-table .sub-tab-panel table {
    width: 100%;
    min-width: auto;
}

.parking-table#hiratsuka {
    min-width: inherit;
}

.parking-table#atsugi {
    min-width: inherit;
}

.parking-table#hiratsuka table tbody tr td.time,
.parking-table#atsugi table tbody tr td.time {
    width: 20%;
    background: #e8e8e8;
    padding: 0rem 0.5rem;
}

.parking-table#hiratsuka table tbody tr td.data,
.parking-table#atsugi table tbody tr td.data {
    width: 80%;
    text-align: left;
    padding: 0rem 0.5rem;
    color: #333;
}

#sub .opening-contents.print {
    padding: 0.5rem;
}


.disc-num {
    list-style: none;
    /* デフォルトの・を消す */
    counter-reset: num;
    /* カウンター初期化 */
    padding-left: 0;
}

.disc-num li {
    counter-increment: num;
    /* カウントアップ */
    position: relative;
    padding-left: 2em;
}

.disc-num li::before {
    content: counter(num, cjk-ideographic);
    /* ←これが①②になる */
    position: absolute;
    left: 0;
}

.number-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.number-list li {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

/* 丸数字 */
.number-list .num {
    width: 40px;
    height: 40px;
    background: hsla(199, 100%, 35%, 0.8);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}


.number-list .content p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

.number-list .content h4 {
    padding: 0rem;
    color: #2656a7;
}


.number-list .title {
    display: flex;
    align-items: center;
    gap: 30px;
    /* ←これが「最初と最後にスペース」 */
}

/* 左側（提出期限） */
.number-list .label {
    white-space: nowrap;
}

/* 右側（●月●日〜） */
.number-list .value {
    flex: 1;
}

/* 番号との間隔を統一 */
.number-list li {
    display: flex;
    gap: 16px;
    /* ←①②と本文の距離を固定 */
}

.number-list .content ul {
    padding: 0rem;
    padding-left: 1rem;
}

.number-list .content ul li {
    list-style: disc;
    margin-bottom: 0;
    display: list-item;
    list-style: disc;
    font-size: 1.2rem;
    /* margin-bottom: 12px; */
}

.digital {
    width: 60%;
    margin-bottom: 1rem;
}

@media only screen and (max-width:1000px) {
    .top-banner-menu-list a {
        font-size: 1rem;
    }

    .left {
        display: none;
        /* 左は使わない */
    }

    .sp-only {
        display: block;
    }

    #special .top-banner-menu-list.box03 li {
        flex: none;
        width: calc((100% - 9px) / 3);
    }
}


/* 4Kとか超広い画面 */
@media (min-width: 2000px) {
    .right-overlay-img {
        left: 50%;
        width: 70%;
        bottom: 15%;
    }

    .right-overlay-bottom-img {
        bottom: 3%;
        left: 50%;
        width: 40%;
    }
}