/* style.css */
body {
    /* 背景画像のURLを指定 */
    background-image: url(../imges/bak_bes01.jpg);

    /* 背景画像を画面いっぱいに表示 */
    background-size: cover;

    /* 背景を固定にする（スクロールしても背景は動かない） */
    background-attachment: fixed;

    /* 背景画像を中央に配置 */
    background-position: center;

    /* 背景画像を繰り返さない */
    background-repeat: no-repeat;

    /* ページ全体の高さに背景を適用 */
    min-height: 100vh;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Share Tech Mono', monospace;
    max-width: 100%;
}
html {
    scroll-behavior: smooth;
}
body, html { 
    margin:0; padding:0;
    
}
strong.black {
    color: #000000;
    font-weight: 700 !important;
}
.pabox {
    width: 90%;
    padding: 43px 0;
    /* max-width: 100%; */
    margin: auto;
    display: block;
}
img.anim-fade {
    position: absolute;
    bottom: 23px;
}
section#topw {
    margin-bottom: 10%;
}
canvas {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
}
img.haijyubox3 {
    width: 100%;
}
/* デフォルトではスマホ画像を非表示 */
.pc-only {
    display: block;
    width: 100%;
}
.sp-only {
    display: none;
    width: 100%;
}
.goozbox1 img {
    width: 67%;
    /* margin: 0 auto; */
}
.goozbox1 {
    /* width: 100%; */
    text-align: center;
    /* max-width: 1000px; */
}

/* スマホ画面（768px以下）の場合、逆にする */
@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
}
#leftCanvas {
    left: 0;
}
#rightCanvas {
    right: 0;
}
.tikes_box h2 img {
    width: 34%;
    margin: 0 0 30px 0;
}
.tikes_box {
    text-align: center;
}
table {
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 1160px;
    table-layout: fixed;
}
.papu2 {
    color: #fff;
    background: #2b44cd;
}
.onrain {
    margin: 1% auto;
}
details.accordion {
    max-width: 1200px;
    margin: 4rem auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    user-select: none;
}
img.taitol2 {
    width: 65%;
}
summary::marker {
    display: none;
}

.summary-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.title-label {
    font-size: 1.3rem;
    color: #666;
    margin-bottom: 0.2rem;
}

.detail-label {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.summary-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
section.tikes_box {
    margin-bottom: 7%;
}
td.papu {
    background: #9faae6;
    color: #111;
}
.fixed-banner {
    position: absolute;
    right: 23%;
    bottom: 40px;
    z-index: 1;
    display: block;
    width: 13%;
    height: auto;
    transition: opacity 0.3s ease;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.fixed-banner img {
    width: 100%;
    height: auto;
    display: block;
}
.fixed-banner:hover {
    opacity: 0.6; /* 半透明になります */
}
.fixed-banner2 {
    position: absolute;
    right: 5%;
    bottom: 40px;
    z-index: 1;
    display: block;
    width: 17%;
    height: auto;
    transition: opacity 0.3s ease;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.fixed-banner2 img {
    width: 100%;
    height: auto;
    display: block;
}
.fixed-banner2:hover {
    opacity: 0.6; /* 半透明になります */
}
td.green {
    background: #fbd9e4;
    color: #111;
}
.etbox {
    width: 1100px;
    margin: 0 auto;
    padding: 3% 0;
    background: #fff;
    border-radius: 15px;
    margin-bottom: 5%;
}
.soldimg {
    margin-left: 55px;
}
table a {
    color: #111;
}
.toggle-label {
    font-size: 0.95rem;
    color: #666;
}

.toggle-icon {
    font-size: 1.5rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

details[open] .toggle-icon {
    transform: rotate(45deg);
}

.accordion-content {
    text-align: center;
    /* max-height: 0; */
    /* opacity: 0; */
    /* transform: translateY(-10px); */
    /* overflow: hidden; */
    /* transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease; */
    /* padding: 0 1.5rem; */
    /* pointer-events: none; */
    /* margin-bottom: 20%; */
}
.titol {
    text-align: center;
}

.titol h2 {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 1%;
    margin-top: 12%;
}
details[open] .accordion-content {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 1.5rem;
    pointer-events: auto;
    text-align: center;
}
section#hanbabox {
    margin-bottom: 5%;
}


details[open] .accordion-content img {
    opacity: 1;
    transform: translateY(0);
}
/* 下からふわっと出現 */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}
table thead tr {
    background-color: #666;
    color: #fff;
}
table tbody th {
    background: #ff95b9;
    color: #000;
    vertical-align: middle;
}
table th {
    font-size: .85em;
}
table th, table td {
    padding: 1em 10px 1em 1em;
    border-right: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    text-align: center;
    vertical-align: middle;
}
.red1 {
    background: #ff7bac;
    color: #fff;
}
.papu1 {
    background: #7169d6;
    color: #fff;
}
.guli1 {
    background: #646098;
    color: #fff;
}
.news_tex a {
    transition: color 0.3s ease, transform 0.3s ease;
}
.news_tex a:hover {
    color: white;
    transform: scale(1.05);
}
#tikesgoodsbox {
    margin-bottom: 5%;
}

.live-concept {
    margin-top: 10%;
    margin-bottom: 5%;
}
.btn a {
    display: flex
        ;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    height: 60px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    margin: 60px 10px;
    line-height: 24px;
    padding: 40px 20px;
}
.btn a {
    border-radius: 8px;
    border: 1px solid #ee267c;
    background: #ee267c;
    padding: 16px 0;
    width: 300px;
    height: 68px;
    text-align: center;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    transform: translate3d(0, 0, 0);
    transition: .3s ease;
}
.image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1100px; /* 適宜 */
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.seat-link {
    position: absolute;
    display: inline-block;
    padding: 12px 113px;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s;
}

/* 位置調整 - 画像サイズに合わせて%指定 */
.link1 {
    top: 72%;
    left: 54%;
}
.link2 {
    top: 85%;
    left: 50%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .seat-link {
        font-size: 12px;
        padding: 5px 10px;
    }
}
/* モーダル背景 */
.modal {
    display: none; /* 初期は非表示 */
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

/* 拡大画像 */
.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.sora img {
    width: 120% !important;
    height: 120% !important;
}

/* フェードインアニメ */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.bothai3 {
    background: #7169d6 !important;
    border: 1px solid #7169d6 !important;
}
.btn.btn003 {
    display: flex;
    /* margin: 0 auto; */
    /* width: 1000px; */
    justify-content: center;
}
.btn a[href]:hover {
    background: #fff;
    color: #ee267c;
}
.bothai3[href]:hover {
    background: #fff !important;
    color: #7169d6 !important;
}
#toi {
    background: #fff;
    padding-bottom: 8%;
}
section {
    position: relative;
    font: 400 14px / 24px "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
}
.setu02 {
    text-align: center;
}
* {
    box-sizing: border-box;
}
.nav-links a {
    font-size: 20px;
}
#star-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.sek_taitol {
    width: 45%;
}
.news_tex {
    max-width: 70rem;
    margin: 0 auto;
    padding: 1.75rem 5rem;
    background: #f0f1fc;
    border-radius: 10px;
    /* position: relative; */
    z-index: 1;
    margin-bottom: 5%;
}
.news_tex span {
    font-size: 1.75rem;
    margin-right: 32px;
    min-width: 12.5rem;
    translate: 0 -20%;
    font-family: "indivisible", sans-serif;
}
.news_tex a {
    color: #3c32be;
}
/* Opening animation */
.opening {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1s ease-in-out;
}

.opening.fade-out {
    opacity: 0;
    pointer-events: none;
}

.opening-logo {
    width: 300px; /* ロゴサイズ調整 */
    opacity: 0;
    transform: scale(0.9);
    animation: fadeInLogo 1.5s ease forwards;
}

@keyframes fadeInLogo {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spinner + .spinner {
    margin-top: -25px;
}

.spinner {
    width: 180px;
    height: 180px;
    position: relative;
    animation: spin 10s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner-small {
    width: 180px;
    height: 180px;
}

.record-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #3c32be;
    z-index: 1;
    transform: scale(1);
    transition: transform 1.2s ease-in-out;
}

.record-bg.expand {
    transform: scale(60);
}

.record-center-hole,
.spinner svg {
    position: absolute;
    z-index: 2;
    transition: opacity 0.6s ease;
}

.record-center-hole {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hide {
    opacity: 0 !important;
    pointer-events: none;
}

svg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

path {
    fill: none;
}

text {
    fill: white;
    font-size: 7.9px;
    letter-spacing: 0.3em;
    dominant-baseline: middle;
}

.counter, .progress-container {
    transition: opacity 0.5s ease;
    z-index: 10;
}

.fade-early {
    opacity: 0 !important;
    pointer-events: none;
}

.counter {
    position: absolute;
    bottom: 60px;
    font-size: 26px;
    color: #3c32be;
    left: 50%;
    transform: translateX(-50%);
}

.progress-container {
    position: absolute;
    bottom: 30px;
    width: 80vw;
    height: 2px;
    background: #e0e0e0;
    border-radius: 1px;
    left: 50%;
    transform: translateX(-50%);
}
.wf2 {
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    zoom: 1;
    /* text-align: center; */
    /* background: #fff; */
    /* border-radius: 12px; */
}
.progress-bar {
    height: 100%;
    background-color: #3c32be;
    transition: width 0.05s linear;
}

.navbar {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 50px 36px;
    background: url("../imges/menyu.png") center/cover no-repeat;
    z-index: 10;
    font-size: 16px;
    font-family: 'Share Tech Mono', monospace;
    /* box-shadow: 0 2px 4px rgb(0 0 0 / 0.1); */
}
.navbar .logo-img {
    height: 40px;
    width: auto;
    position: absolute;
    left: 25px;
}
.logo {
    font-size: 24px;
    margin-right: 20px;
    color: rgb(203, 163, 115);
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #3F51B5;
    transition: color 0.3s;
    white-space: nowrap;
    font-family: "Cormorant Infant", serif;
    letter-spacing: 0.2em;
    font-size: 56px;
    -webkit-font-smoothing: antialiased;
}

.nav-links a:hover {
    color: #a58a65;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    margin-left: 20px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: rgb(203, 163, 115);
    transition: 0.3s;
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 30px;
    cursor: pointer;
    z-index: 100;
}

.bar {
    width: 30px;
    height: 4px;
    background-color: #333;
    margin: 4px 0;
    border-radius: 2px;
    transition: 0.4s ease;
}

/* アクティブ時（X型に変形） */
.hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}
/* レイヤーを中央寄せ */
.hero-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

/* 背景は①でOK（省略） */

/* ロゴ：切れないサイズに。containでトリミング防止 */
.hero .hero-logo img {
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 日付：ロゴと別に調整可能 */
.hero .hero-date > img {
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 小さい画面のとき、さらに安全マージン（任意） */
@media (max-height: 600px) {
    .hero .hero-logo img  { max-height: 28vh; }
    .hero .hero-date > img{ max-height: 30vh; }
}
@media (max-height: 560px) {
    .hero-date .fixed-banner  { width: clamp(100px, 12vw, 220px); right: 18%; }
    .hero-date .fixed-banner2 { width: clamp(100px, 14vw, 240px); right: 3%;  }
    .hero-date .scroll-down   { bottom: 12px; }
}


/* OK：背景だけフルブリードでカバー */
.hero .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-section h2 {
    font-size: 32px;
    margin-bottom: 90px;
    color: rgb(203, 163, 115);
}

.news-section li {
    font-size: 16px;
    padding: 30px 0;
    border-bottom: 1px solid #3c32be;
}

.news-section li:last-child {
    border-bottom: none;
}

.loop {
    display: flex;
    margin-bottom: -55px;
    overflow: hidden;
}

.loop1 {
    transform: rotate(-5deg);
}
.loop2 {
    transform: rotate(5deg);
}
.loop__text {
    padding-right: 1.444vw;
    color: #fff;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-family: "Valky", serif;
    font-size: 3.75rem;
    white-space: nowrap;
    line-height: 1;
    animation: loopText 10s linear infinite;
    will-change: transform;
}

@keyframes loopText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.loop__text2 {
    margin-top: 7%;
    padding-right: 1.444vw;
    color: #fff;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-family: "Valky", serif;
    font-size: 3.75rem;
    white-space: nowrap;
    line-height: 1;
    animation: loopText2 10s linear infinite;
    will-change: transform;
}

@keyframes loopText2 {
    100% { transform: translateX(0); }
    0% { transform: translateX(-100%); }
}
.ttai_1 {
    margin-top: 8%;
    margin-bottom: 1%;
}
.ttai_1 img {
    width: 25%;
}
.parallax-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image: url('../imges/bak_bes01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -3;
    pointer-events: none;
}

.parallax-wrapper {
    position: relative;
    width: 100%;
    height: 9000px; /* 追従範囲を十分長く */
    z-index: 0;
    overflow: visible;
}

.parallax-layer2 {
    position: absolute;
    width: 100%;
    top: 83%;
    left: 0;
    will-change: transform;
    pointer-events: none;
}

.parallax-layer2 img {
    display: block;
    width: 100%;
    height: auto;
}

.star-html {
    position: fixed;
    font-size: 24px;
    color: white;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    opacity: 0.6;
    animation-name: twinkle;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes twinkle {
    0% { opacity: 0.2; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

@font-face {
    font-family: "Valky";
    src: url("../font/Valky.otf") format("opentype");
    font-display: swap;
}
table img {
    width: 100%;
}
@font-face {
    font-family: "gitson";
    src: url("../font/gitson.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "indivisible";
    src: url("../font/indivisible.otf") format("opentype");
    font-display: swap;
}
@font-face {
    font-family: "cilager";
    src: url("../font/cilager.otf") format("opentype");
    font-display: swap;
}

.live-concept {
    position: relative;
    padding: 80px 20px;
    background-color: #f0f1fc;
    text-align: center;
}

.concept-title {
    color: #a58a65;
    font-size: 56px;
    font-family: 'Valky', serif;
    margin-bottom: 40px;
    letter-spacing: 0.15em;
}

.concept-line {
    /* font-family: 'Hiragino Mincho ProN', 'Yu Mincho', '游明朝', 'Times New Roman', serif; */
    font-size: 14px;
    line-height: 2;
    color: #111;
    margin: 4px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
    letter-spacing: 0.1em;
}

.concept-line.visible {
    opacity: 1;
    transform: translateY(0);
}

footer {
    background-color: #03A9F4;
    color: white;
    text-align: center;
    padding: 20px 10px 10px;
    z-index: 10;
    position: relative;
}

footer .sns-icons {
    margin-bottom: 10px;
}

footer img.logo {
    width: 350px;
    display: block;
    margin: 32px auto 73px;
}

footer .sns-icons img {
    width: 50px;
    margin: 15px 10px;
}

footer .copyright {
    font-size: 12px;
    line-height: 1.6;
    font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
}

.concept-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.concept-star {
    position: absolute;
    z-index: 11;
    opacity: 0.8;
    user-select: none;
}

.star-left {
    left: 5%;
}

.star-left.slow {
    top: 20%;
}

.star-left.fast {
    top: 60%;
}

.star-right {
    right: 5%;
    top: 40%;
}

.slow   { --speed: 0.2; }
.medium { --speed: 0.4; }
.fast   { --speed: 0.8; }

.size-s { width: 40px; }
.size-m { width: 70px; }
.size-l { width: 100px; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}
/* スクロールダウンアニメーション（右端縦文字＋線） */
.scroll-down {
    position: absolute;
    right: 15px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 20px;
    color: #fff;
    text-orientation: mixed;
    z-index: 50;
    animation: fadeIn 1s ease-out;
}

.scroll-down span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}
.news_tex ul {
    overflow: auto;
    /*height: 280px; */
}
.scroll-down .line {
    width: 2px;
    height: 85px;
    background: #aaa;
    position: relative;
    overflow: hidden;
}

.scroll-down .line::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: scrollLineAnim 1.5s infinite;
    opacity: 0.6;
}

@keyframes scrollLineAnim {
    0% { top: -100%; }
    100% { top: 100%; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* セクションのふわっとアニメーション */
.section-fade {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.section-fade.visible {
    opacity: 1;
    transform: translateY(0);
}
.cursor-stalker {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10000;
    font-size: 24px;
    color: white;
    opacity: 0.7;
    transition: transform 0.1s ease-out;
    mix-blend-mode: difference; /* ←暗い背景でも見えやすくする */
}
@media (max-width: 768px) {
    .nav-links a {
        opacity: 0;
        transform: translateX(30px);
        animation: linkFadeIn 0.4s ease forwards;
    }

    .nav-links.active a {
        animation-delay: calc(var(--order) * 0.1s);
    }

    @keyframes linkFadeIn {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}
#top {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
}

.parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-layer svg {
    width: 40%;
    height: auto;
}
.fixed-foreground {
    position: absolute;
    bottom: -11px;
    right: 0;
    z-index: 10; /* パララックスレイヤーより上に */
    pointer-events: none; /* ボタンなどと重ならないようにする */
}
/* ハンバーガーメニュー表示 */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 27px;
    cursor: pointer;
    z-index: 20;
}

.hamburger span {
    height: 3px;
    width: 100%;
    background-color: #3c32be;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(11px, 11px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ナビゲーションメニュー */
.nav-links {
    position: absolute;
    top: 0px;
    right: 0px;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 60px 15px 15px 25px;
    display: none;
    width: 440px;
    height: 100vh;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.nav-links.active {
    display: flex;
    animation: slideFadeIn 0.4s ease forwards;
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.nav-links {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.nav-links.active {
    opacity: 1;
    pointer-events: auto;
}

body.loaded .main {
    display: block;
}
.livese {
    color: rgb(255, 255, 255);
    width: 1200px;
    font-size: 20px;
    background: rgb(77, 77, 77);
    margin: 0px auto 22px;
    padding: 14px;
}
.tyuuibox {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
}
strong.rekou {
    color: #f00;
    font-weight: 700 !important;
}
.wf {
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    zoom: 1;
    text-align: center;
    background: #fff;
    border-radius: 12px;
}

/* ヒーロー全体 */
.hero {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 各レイヤー */
.hero-layer {
    position: absolute;
    inset: 0;
}

.hero-layer img,
.hero-layer .hero-ui {
    opacity: 0;
    transform: translateY(16px);
}

/* 背景 → ズームアウトしながら */
@keyframes bgZoomOut {
    0%   { opacity: 0; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

/* フェードイン（上下移動込み） */
@keyframes fadeUpIn {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 発火シーケンス */
body.is-hero-ready .hero-bg img {
    animation: bgZoomOut 1.2s ease-out forwards;
    animation-delay: 0s;
}
body.is-hero-ready .hero-logo img {
    animation: fadeUpIn 1s ease-out forwards;
    animation-delay: 0.6s;
}
body.is-hero-ready .hero-date img,
body.is-hero-ready .hero-date .hero-ui {
    animation: fadeUpIn 1s ease-out forwards;
    animation-delay: 1.2s;
}

/* UI配置は従来通り */
.hero-date .scroll-down {
    position: absolute;
    right: 15px;
    bottom: 30px;
}
.hero-date .fixed-banner  { right: 23%; bottom: 40px; width: 13%; position: absolute; }
.hero-date .fixed-banner2 { right: 5%;  bottom: 40px; width: 17%; position: absolute; }
/* ロゴサイズ */
.hero-logo img {
    width: 100%;      /* 好みの大きさ */
    max-width: 100%;
    height: auto;
}

/* 日付サイズ */
.hero-date > img {
    width: 100%;      /* 好みの大きさ */
    max-width: 100%;
    height: auto;
}

/* ===== hero-ui 内の要素は影響を受けないように別指定 ===== */
.hero-date .hero-ui {
    position: absolute;
    inset: 0;
    pointer-events: none; /* wrapperはクリック無効、子要素は有効 */
}

.hero-date .hero-ui .scroll-down,
.hero-date .hero-ui .fixed-banner,
.hero-date .hero-ui .fixed-banner2 {
    pointer-events: auto; /* 個別要素はクリック可能 */
}

/* scroll-down はオリジナルサイズ維持 */
.hero-date .hero-ui .scroll-down {
    right: 15px;
    bottom: 100px;
    font-size: 20px; /* ここで調整可能 */
}

/* バナー類も元サイズのまま */
.hero-date .hero-ui .fixed-banner {
    right: 20%;
    bottom: 40px;
    width: 12%;
    position: absolute;
}
.hero-date .hero-ui .fixed-banner2 {
    right: 3%;
    bottom: 40px;
    width: 16%;   /* お好みで調整 */
    position: absolute;
}
/* 上にズレる指定を打ち消し */
.hero { top: 0 !important; }

/* 画面にぴったり、縦が極端に低い端末でも最低高さを少し確保 */
.hero {
    position: relative;
    width: 100%;
    height: 100svh;       /* モバイルのUI高さを考慮するsvh */
    min-height: 520px;    /* 極端な低さでの破綻を軽減（好みで調整） */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ===== 背景を完全に白に固定 ===== */
html, body {
    background: #fff !important;
    background-image: none !important;
    background-attachment: initial !important;
}

/* もしHTML側を触らない場合でも強制で非表示にする */
.parallax-bg,
#star-canvas {
    display: none !important;
}

/* （保険）セクション単位で背景を継いでしまうのを予防 */
section#top,
.hero {
    background: transparent !important; /* 白いbodyをそのまま見せる */
}
/* ===== Prologue Section ===== */
#prologue {
    position: relative;
    min-height: clamp(360px, 60vh, 720px);
    display: grid;
    place-items: center;
    padding: clamp(40px, 8vmin, 96px) 20px;
    /* 背景画像を引く（差し替え可） */
    background-image: url('../imges/bg2.png'); /* 画像パスを入れてください */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* 必要なら薄いオーバーレイ（明度調整） */
#prologue::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15); /* 明るめ背景なら薄く、暗めなら 0.35 などに */
    z-index: 0;
}

.prologue__inner {
    position: relative;
    z-index: 1;
    max-width: min(135ch, 90vw);
    text-align: center;
}

/* 明朝体（システム優先） */
.prologue-line {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "Noto Serif JP", "Times New Roman", serif;
    font-weight: 500;
    font-size: clamp(16px, 2.2vmin, 22px);
    letter-spacing: 0.08em;
    color: #111;
    margin: 0 0 0.6em;
    opacity: 0;                 /* 初期は非表示 */
    transform: translateY(18px);
    transition: opacity .9s ease, transform .9s ease;
    will-change: opacity, transform;
}

/* 表示状態（JSで付与） */
.prologue-line.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 文字が背景に溶ける場合はシャドウを軽く */
@media (prefers-contrast: no-preference) {
    #prologue[data-shadow="on"] .prologue-line {
        text-shadow: 0 1px 2px rgba(0,0,0,.25);
    }
}

/* モバイル余白と読みやすさ微調整 */
@media (max-width: 768px) {
    #prologue {
        padding: 56px 16px;
    }
    .prologue-line {
        line-height: 1.9;
    }
}
/* ===== Prologue ライン調整（ゆっくり／細く・短く） ===== */
#prologue {
    /* お好みはここだけ変えればOK */
    --prologue-line-w: clamp(140px, 40%, 520px); /* ← 短く：本文幅の40%（最小140px, 最大520px） */
    --prologue-line-h: 1px;                      /* ← 細く：1px（0.5〜2pxで調整可） */
    --prologue-line-dur: 1.8s;                   /* ← ゆっくり：アニメ時間 */
    --prologue-line-delay-top: 0.25s;            /* 上の線の開始遅延 */
    --prologue-line-delay-bottom: 0.55s;         /* 下の線の開始遅延（少し後） */
    --prologue-line-ease: cubic-bezier(.19,.8,.22,1);
}

/* ライン（中心から左右に伸びる） */
#prologue .prologue__inner {
    position: relative;
    padding-block: 75px;
}
#prologue .prologue__inner::before,
#prologue .prologue__inner::after{
    content:"";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center center;
    width: var(--prologue-line-w);
    height: var(--prologue-line-h);
    background: #111;
    opacity: .9;
    transition-property: transform;
    transition-timing-function: var(--prologue-line-ease);
    transition-duration: var(--prologue-line-dur);
}
#prologue .prologue__inner::before{ top: 0;    transition-delay: var(--prologue-line-delay-top); }
#prologue .prologue__inner::after { bottom: 0; transition-delay: var(--prologue-line-delay-bottom); }

/* 可視化トリガー（IntersectionObserverで data-revealed="1" が付く） */
#prologue[data-revealed="1"] .prologue__inner::before,
#prologue[data-revealed="1"] .prologue__inner::after{
    transform: translateX(-50%) scaleX(1);
}

/* モバイルではさらに短めに（任意） */
@media (max-width: 768px) {
    #prologue { --prologue-line-w: clamp(120px, 54%, 420px); }
}
/* ===== Prologue 文字サイズ 少し大きめに ===== */
#prologue .prologue-line{
    /* 以前: clamp(16px, 2.2vmin, 22px) くらい → 10〜25%増し */
    font-size: clamp(18px, 2.8vmin, 25px);
}

/* モバイルはもう少し大きめに（任意） */
@media (max-width: 768px){
    #prologue .prologue-line{
        font-size: clamp(18px, 3.2vmin, 30px);
        line-height: 1.9;
    }
}
/* 既存の文字サイズ指定を上書きして画像表示に最適化 */
.news-section h2 {
    margin-bottom: clamp(32px, 6vmin, 90px);
    font-size: 0; /* テキストが混ざっても出ないよう保険 */
}

/* 画像サイズはレスポンシブに中央寄せ */
.news-title img {
    display: block;
    width: clamp(220px, 40vw, 520px); /* 好みで調整 */
    height: auto;
    margin-left: 17%;
}
/* === NEWS 見出し画像をニュース枠に左揃え === */
.news-section {
    /* .news_tex と同じ幅/パディングをここにも共有しておくと管理しやすい */
    --news-max: 70rem;   /* .news_tex の max-width と同じ */
    --news-pad: 5rem;    /* .news_tex の左右パディングと同じ */
}

/* h2 コンテナ自体を .news_tex と同じセンタリング幅にしつつ、左に 5rem 寄せる */
.news-section .news-title {
    max-width: var(--news-max);
    margin: 0 auto clamp(32px, 0vmin, 90px); /* 下余白は好みで */
}

/* 画像は左寄せ（中央寄せ解除） */
.news-section .news-title img {
    display: block;
    margin: 0;                                /* 中央寄せ解除 */
    width: clamp(220px, 40vw, 520px);         /* お好みで調整 */
    height: auto;
}

/* モバイルは .news_tex の左右パディングが広すぎるので少し詰める */
@media (max-width: 768px) {
    .news-section { --news-pad: 1.25rem; }    /* 例：20px 相当 */
    .news-section .news-title { margin-bottom: 48px; }
    .news-section .news-title img { width: clamp(180px, 60vw, 360px); }
}
#news_area\ NEWS {
    margin-top: 80px;
    margin-bottom: 20%;
}
.news_tex span {
    background: #2b44cd;
    color: #fff;
    padding: 5px 12px;
}
/* ===== Footer credits ===== */
footer {
    position: relative; /* 右下固定バッジ用に必要 */
}

.footer-credits{
    max-width: 980px;
    margin: 0 auto 40px;      /* SNSアイコンとの間に余白 */
    text-align: center;
    color: #fff;
    padding: 0 16px;
}

.fc-label{
    font-size: 13px;
    letter-spacing: .15em;
    opacity: .9;
    margin: 18px 0 10px;
}

.fc-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    margin-bottom: 40px;
}

.fc-row img{
    width: auto;
    object-fit: contain;
    filter: none; /* 白抜きが必要なら brightness(0) invert(1); に変更 */
}



/* プライバシーポリシー */
.fc-privacy{
    margin-top: 20px;
    line-height: 1.8;
}
.fc-privacy small{
    display: block;
    font-size: 12px;
    opacity: .9;
    margin-bottom: 6px;
}
.fc-privacy a{
    display: inline-block;
    font-size: 12px;
    color: #fff;
    text-decoration: underline;
    word-break: break-all; /* 長URLの折返し */
    opacity: .95;
}

/* 右下のリンク画像バッジ */
.footer-badge{
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-block;
    transition: opacity .25s ease;
    z-index: 2;
}
.footer-badge img{
    width: clamp(80px, 12vw, 140px);
    height: auto;
    display: block;
}
.footer-badge:hover{ opacity: .8; }

/* モバイル微調整 */
@media (max-width: 768px){
    .footer-credits{ margin-bottom: 32px; }
    .fc-label{ margin: 16px 0 8px; }
}
/* ===== Footer ロゴのサイズを完全統一 ===== */
:root{
    /* 好みで 28〜34px 程度。vwを混ぜて少しだけ可変にしています */
    --footer-logo-h: clamp(24px, 2.8vw, 32px);
}

.footer-credits .fc-row img{
    width: auto;
    max-width: min(40vw, 220px);
    object-fit: contain;
    display: block;
}

/* 主催だけ大きくしていた旧スタイルを打ち消す */
.footer-credits .fc-row--two img{
    height: var(--footer-logo-h) !important;
}
/* 左下バナー（TOP内だけ） */
.hero-date .hero-ui .fixed-banner-left{
    position: absolute;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px));
    width: clamp(110px, 14vw, 240px);  /* お好みで */
    z-index: 3;
    display: block;
    transition: opacity .3s ease, transform .2s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,.35);
}
.hero-date .hero-ui .fixed-banner-left img{
    width: 100%;
    height: auto;
    display: block;
}
.hero-date .hero-ui .fixed-banner-left:hover{
    opacity: .75;
    transform: translateY(-2px);
}

/* モバイルで少し小さくしたい場合（任意） */
@media (max-width: 480px){
    .hero-date .hero-ui .fixed-banner-left{
        width: clamp(96px, 22vw, 180px);
    }
}
/* これに .fixed-banner-left を追加 */
.hero-date .hero-ui .scroll-down,
.hero-date .hero-ui .fixed-banner,
.hero-date .hero-ui .fixed-banner2,
.hero-date .hero-ui .fixed-banner-left {
    pointer-events: auto;  /* ←左バナーもクリック可に */
}
/* 左下バナーの見た目・位置 */
.hero-date .hero-ui .fixed-banner-left {
    position: absolute;
    left: 3%;
    bottom: 40px;
    width: 12%;
    z-index: 20;                 /* 画像や装飾より前面に */
    display: block;
    transition: opacity .3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,.35);
}
.hero-date .hero-ui .fixed-banner-left img {
    width: 100%;
    height: auto;
    display: block;
}
.hero-date .hero-ui .fixed-banner-left:hover {
    opacity: .6;
}

/* 画面が低い/狭いときの微調整（任意） */
@media (max-height: 560px){
    .hero-date .hero-ui .fixed-banner-left{ bottom: 12px; }
}
@media (max-width: 768px){
    .hero-date .hero-ui .fixed-banner-left{
        width: clamp(110px, 28vw, 220px);
        left: 4%;
        bottom: 16px;
    }
}


.edge-item{
    position: absolute;
    width: clamp(120px, 14vw, 260px);   /* 共通サイズ：ここで統一 */
    opacity: 0.9;
    will-change: transform;
    transform: translate3d(0,0,0);
}
/* 回転の見え方を強くする：支点をさらに外へ */
.edge-item.left  { transform-origin: -40% 50% !important; }
.edge-item.right { transform-origin: 140% 50% !important; }
.edge-item.left{
    left: -2vw;               /* ほんの少しはみ出すと“端に貼ってる感”が出る */
    transform-origin: left center;
}

.edge-item.right{
    right: -2vw;
    transform-origin: right center;
}

@media (max-width: 768px){
    .edge-item{ width: clamp(96px, 22vw, 180px); }
}

/* モーション弱めたい人向け（OS設定が「動きを減らす」） */
@media (prefers-reduced-motion: reduce){
    .edge-item{ transition: none !important; }
}
/* ===== SP ONLY ===== */
@media (max-width: 768px) {
    /* ロゴと日付：スマホで安全に自動縮小 */
    .hero .hero-logo img {
        width: 154%;
        height: auto;
        max-width: 153vw;
        max-height: 98vh;
        object-fit: contain;
        position: absolute;
        top: 18%;
    }
    .hero .hero-date > img {
        width: 206%;
        height: auto;
        max-width: 195vw;
        max-height: 72vh;
        object-fit: contain;
        position: absolute;
        top: 14%;
    }

    /* バナー群：右の2つ→縦並び、その下に左バナー */
    .hero-date .hero-ui {
        position: absolute;
        display: flex;
        flex-direction: column;   /* 縦並び */
        align-items: center;    /* 右寄せで揃える */
        gap: 10px;
        pointer-events: none;     /* ラッパーは無効、子で有効化 */
        z-index: 50;              /* 前面に */
    }

    /* 各バナーは通常フローにしてタップしやすく */
    .hero-date .hero-ui .fixed-banner,
    .hero-date .hero-ui .fixed-banner2,
    .hero-date .hero-ui .fixed-banner-left {
        position: static;                     /* PCのabsoluteを打ち消し */
        width: clamp(140px, 38vw, 220px);     /* 端末幅に応じて可変 */
        pointer-events: auto;                 /* タップ可能に */
    }

    /* 並び順（右① → 右② → 左） */
    .hero-date .hero-ui .fixed-banner      { order: 1; }
    .hero-date .hero-ui .fixed-banner2     { order: 2; }
    .hero-date .hero-ui .fixed-banner-left { order: 3; }

    /* スクロールガイドはスマホでは邪魔なら非表示 */
    .hero-date .hero-ui .scroll-down { display: none; }
}
/* ===== SP: バナー位置を日付の下に ===== */
@media (max-width: 768px) {
    /* ラッパーの全画面フィット（inset:0）を解除して、日付の下あたりに配置 */
    .hero-date .hero-ui {
        position: absolute;
        inset: auto;                         /* ← 既存の inset:0 を打ち消し */
        top: clamp(52vh, 90vh, 96vh);      /* ← 日付の下あたり。好みで上下に調整OK */
        transform: translateX(-50%);
        width: min(92vw, 380px);             /* 横幅・タップ余白を確保 */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;                /* ラッパは無効、子で有効化 */
        z-index: 50;
    }

    /* 子バナーは通常フローに（上書きのため !important 付与） */
    .hero-date .hero-ui .fixed-banner,
    .hero-date .hero-ui .fixed-banner2,
    .hero-date .hero-ui .fixed-banner-left {
        position: static !important;
        width: clamp(140px, 38vw, 220px);
        pointer-events: auto;
    }

    /* 並び順（右1 → 右2 → 左） */
    .hero-date .hero-ui .fixed-banner      { order: 1; }
    .hero-date .hero-ui .fixed-banner2     { order: 2; }
    .hero-date .hero-ui .fixed-banner-left { order: 3; }

    /* スクロールガイドはSPで隠す */
    .hero-date .hero-ui .scroll-down { display: none !important; }
}
/* ===== SP: バナー画像サイズをまとめて調整 ===== */
@media (max-width: 768px) {
    /* ここで数値を変えるだけで3つの幅が一括で変えられます */
    .hero-date .hero-ui {
        /* 例：全て同じサイズにする */
        --bnr-w-1: clamp(250px, 40vw, 230px); /* 右① */
        --bnr-w-2: clamp(250px, 40vw, 230px); /* 右② */
        --bnr-w-l: clamp(250px, 40vw, 230px); /* 左   */
    }

    /* 既存のレイアウト（縦並び）はそのまま。幅だけ上書き */
    .hero-date .hero-ui .fixed-banner {
        position: static !important;
        width: var(--bnr-w-1) !important;
    }
    .hero-date .hero-ui .fixed-banner2 {
        position: static !important;
        width: var(--bnr-w-2) !important;
    }
    .hero-date .hero-ui .fixed-banner-left {
        position: static !important;
        width: var(--bnr-w-l) !important;
    }
    .news-title img {
        margin-left: 0;
    }
    h2.news-title {
        padding-left: 24px;
    }
    .news_tex span {
        font-size: 1rem;
        margin-right: 14px;
    }
    
    .seibox {
        width: 65% !important;
    }
    /* 画像の縦横比は維持 */
    .hero-date .hero-ui .fixed-banner img,
    .hero-date .hero-ui .fixed-banner2 img,
    .hero-date .hero-ui .fixed-banner-left img {
        width: 100%;
        height: auto;
        display: block;
    }
}
/* === Edge Parallax をフッター手前で切る＆背面へ === */
.edge-parallax{
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: var(--edge-doc-h, 100vh) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 9 !important;   /* ← ここを 9 に（header/footer は z=10） */
}
footer{ position: relative; z-index: 10; }
/* ========== 特典グッズ枠 ========== */
.perk-goods {
    margin-top: 28px;
}
.perk-goods__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 2.2vw, 20px);
}
.perk-goods__item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.perk-goods__item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}
.perk-goods__item:hover img {
    transform: scale(1.03);
}
/* 中段の1枠を全幅に */
.perk-goods__item--wide {
    grid-column: 1 / -1;
}
/* 右端に小さく表示 */
.perk-goods__note {
    margin-top: 8px;
    font-size: 12px;
    color: #000;
    text-align: right;
    letter-spacing: .02em;
}

/* ========== プレミアム特典枠 ========== */
.premium-perks {
    margin-top: 10px;
    padding: clamp(16px, 2.6vw, 24px);
    border-radius: 16px;
    background: rgb(108 188 255 / 15%); /* 薄い水色系（サイトの世界観になじむ半透明） */
    box-shadow: 0 0 0 1px rgba(180, 220, 255, 0.28) inset;
    backdrop-filter: blur(2px);
}
.premium-perks__head {
    margin-bottom: 14px;
}
.premium-perks__title {
    margin: 0;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #9bc0fd;
}
/* 2列 → スマホで1列 */
.premium-perks__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 16px);
}
.premium-perks__item {
    color: #fff;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.45); /* 半透明黒 */
    padding: clamp(12px, 2.2vw, 16px);
    line-height: 1.55;
    letter-spacing: .02em;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* 注意書きは水色枠の外・右端に小さく */
.premium-perks__disclaimer {
    margin-top: 8px;
    font-size: 12px;
    color: #000;
    text-align: right;
    letter-spacing: .02em;
}

/* ====== レスポンシブ ====== */
@media (max-width: 768px) {
    .perk-goods__grid {
        grid-template-columns: 1fr; /* スマホは縦一列 */
    }
    .premium-perks__list {
        grid-template-columns: 1fr; /* スマホは縦一列 */
    }
    .premium-perks__disclaimer,
    .perk-goods__note {
        text-align: left; /* スマホでは左寄せに */
    }
}

/* 枠の外タイトル（左寄せ） */
.premium-perks__title-outside {
    margin: 28px 0 0px;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    color: #5d95f1;
}
/* バッジを左上に置くための余白確保＋位置指定 */
.premium-perks{
    position: relative;
    padding-top: clamp(44px, 5.2vw, 56px); /* バッジぶん上側を空ける */
}

/* 左上バッジ */
.premium-perks__badge{
    position: absolute;
    top: clamp(10px, 1.8vw, 14px);
    left: clamp(12px, 2vw, 18px);
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px; /* ピル型 */
    letter-spacing: .03em;
    white-space: nowrap;
    pointer-events: none;
}

/* モバイル最適化 */
@media (max-width: 768px){
    .premium-perks__title-outside{
        margin: 22px 0 8px;
        text-align: left; /* 念のため */
    }
    .premium-perks{
        padding-top: clamp(38px, 7vw, 48px);
    }
    .premium-perks__badge{
        top: 10px;
        left: 12px;
        font-size: 11px;
        padding: 6px 10px;
    }
}
/* ▼ バッジを枠なし・黒太字のテキストだけに */
.premium-perks__badge{
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;         /* 黒 */
    font-weight: 700;               /* 太字 */
    border-radius: 0 !important;    /* 角丸解除 */
    padding: 0 !important;          /* 余白なし（テキストのみ） */
    line-height: 1.2;
}
/* もっと大きく（デスクトップ～タブレット） */
.premium-perks__badge {
    font-size: clamp(19px, 5.6vw, 17px);
    font-weight: 800;
    line-height: 2.15;
    letter-spacing: .02em;
    top: clamp(12px, 2.2vw, 18px);
    left: clamp(14px, 2.4vw, 22px);
}

/* バッジ分の上余白も増やす（重なり防止） */
.premium-perks{
    padding-top: clamp(60px, 8vw, 92px);
}

/* スマホでは少し抑えつつ改行許可 */
@media (max-width: 480px){
    .premium-perks__badge{
        font-size: clamp(18px, 5.2vw, 26px);
        white-space: normal; /* 長い場合は改行OK */
        line-height: 1.25;
    }
}

/* 親をグリッド化して子要素を縦に積む（右寄せ） */
.hero .hero-ui{
    display: grid;
    justify-items: end;  /* 右に寄せる */
    align-content: start;
    gap: 12px;
}

/* スクロール誘導の位置が崩れる場合は固定配置に */
.hero .hero-ui .scroll-down{
    position: absolute;
    left: 112%;
    transform: translateX(-50%);
    bottom: 24px;
}
/* トップの2バナーを縦並び・右寄せに */
.hero .hero-ui .fixed-banner,
.hero .hero-ui .fixed-banner2{
    display: block;            /* 横並び防止 */
    float: none;               /* 念のためリセット */
    width: clamp(140px, 18vw, 220px);
    margin-left: auto;         /* 右寄せ */
}
.hero .hero-ui .fixed-banner2{
    margin-top: 12px;          /* 2枚目の上下間隔 */
}
/* ===== TOP右側の2バナーを縦並びに（ヒーロー内だけ） ===== */

/* 親：右下に固定しつつ縦積み */
.hero-date .hero-ui{
    position: absolute !important;
    inset: auto !important;      /* 全画面の被せを解除 */
    right: 5% !important;        /* バナー群の基準位置（お好みで） */
    bottom: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    pointer-events: none;         /* ラッパは無効、子で有効化（既存方針を踏襲） */
}

/* 子：クリック可に */
.hero-date .hero-ui > a{
    pointer-events: auto;
}

/* バナーを通常フロー（縦積み）に戻す＆位置指定を無効化 */
.hero-date .hero-ui .fixed-banner,
.hero-date .hero-ui .fixed-banner2{
    position: static !important;  /* ← これが肝！absoluteを打ち消す */
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: clamp(140px, 18vw, 285px) !important;  /* 幅はお好みで */
}

/* 2枚目の間隔 */
.hero-date .hero-ui .fixed-banner2{
    margin-top: 12px !important;
}
/* ===== モバイル最終上書き：TOPの2バナーを縦並び＆サイズ安定 ===== */
@media (max-width: 768px) {
    /* 競合しているカスタムプロパティを無効化（幅は直接指定に切替） */
    .hero-date .hero-ui {
        --bnr-w-1: initial;
        --bnr-w-2: initial;
        --bnr-w-l: initial;
    }

    /* バナー群の親：右下に固定して縦積み */
    .hero-date .hero-ui{
        position: absolute !important;
        left: auto !important;
        right: 4% !important;       /* 位置は好みで調整（例: 3%〜6%） */
        top: auto !important;
        bottom: 20px !important;    /* 例: 16〜32px */
        transform: none !important; /* 以前の translateX(-50%) を無効化 */
        width: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important; /* 右寄せ */
        gap: 10px !important;

        pointer-events: none !important; /* ラッパ無効、子で有効化 */
        z-index: 60 !important;
    }

    /* 子アンカー：通常フロー＋タップ可にしてサイズを安定させる */
    .hero-date .hero-ui > a{
        position: static !important;
        width: clamp(140px, 42vw, 220px) !important; /* ←正しいclamp: min ≤ max */
        pointer-events: auto !important;
    }

    /* 2枚目の間隔 */
    .hero-date .hero-ui .fixed-banner2{
        margin-top: 10px !important;
    }

    /* スクロール誘導はSPでは非表示（重なり防止） */
    .hero-date .hero-ui .scroll-down{
        display: none !important;
    }
}
/* ===== SP ONLY: ロゴと日付の“下に”バナー2枚を中央・縦並び ===== */
@media (max-width: 768px){

    /* hero-date を縦フロー化（= 日付画像 → バナー群 の順で並ぶ） */
    #top .hero-date{
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    /* 日付画像は通常フローに */
    #top .hero-date > img{
        position: static !important;
        height: auto !important;
    }

    /* バナーラッパーを通常フロー＆中央寄せに */
    #top .hero-date .hero-ui{
        position: static !important;     /* 既存の absolute/inset を無効化 */
        inset: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;  /* 縦並び */
        align-items: center !important;     /* 中央 */
        gap: 10px !important;
        pointer-events: auto !important;
        width: auto !important;
        z-index: 5 !important;
    }

    /* 2つのバナーを同じ幅で縦に */
    #top .hero-date .fixed-banner,
    #top .hero-date .fixed-banner2{
        position: static !important;    /* right/bottom 指定を殺す */
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        width: min(64vw, 320px) !important;  /* 好みで 56–72vw の範囲に */
    }

    /* スクロール誘導は邪魔なら非表示 */
    #top .hero-date .scroll-down{
        display: none !important;
    }

    /* （保険）ロゴが大きすぎて被る場合は次の2行も有効化
    #top .hero-logo img{ position: static !important; width: min(84vw, 680px) !important; height:auto !important; }
    */
}

/* 左の縦見出しセル内のレイアウト */
.ticket-head { padding: 0; }
.ticket-head__inner{
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦中央 */
    align-items: center;     /* 横中央 */
    gap: 12px;
    height: 100%;
    padding: 12px;
}

/* 白文字・白枠・角丸ボタン */
.btn-outline-white{
    display: inline-block;
    padding: 10px 16px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;  /* 角丸 */
    font-weight: 700;
    line-height: 1;
}
.btn-outline-white:hover{
    background: #fff;
    color: #111;
}
/* ===== Safari上ズレ固定パック（最終行に追加） ===== */

/* まず body/html の余白と背景の保険（白が覗かないよう任意色） */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #000; /* 好みで変更可。白帯が見える場合の保険 */
}

/* ヒーローの高さを “JSで決める--vh” で固定（iOSアドレスバー揺れ対策） */
#top,
.hero {
    margin: 0 !important;
    padding: 0 !important;
    height: calc(var(--vh, 1svh) * 100) !important;
    min-height: 0 !important;
    position: relative !important;
    top: 0 !important;
    background: #000; /* 背景画像の下に黒を敷く（保険） */
}

/* 背景レイヤーを画面にピタッと（親の余白に影響されない） */
.hero .hero-bg {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
}
.hero .hero-bg img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Safari のサブピクセル隙間を抑える保険 */
    transform: translateZ(0);
    will-change: transform;
}

/* 前景UIだけ safe-area を考慮（背景に影響させない） */
.hero-date .hero-ui {
    padding:
        max(env(safe-area-inset-top), 0px)
        max(env(safe-area-inset-right), 0px)
        calc(max(env(safe-area-inset-bottom), 0px) + 12px)
        max(env(safe-area-inset-left), 0px) !important;
}

/* デスクトップSafariの稀な1px白帯を物理的に潰す */
@supports (-webkit-hyphens: none) {
    .hero .hero-bg::after {
        content: "";
        position: absolute;
        top: -1px; left: -1px; right: -1px; bottom: -1px;
        background: inherit; /* 画像縁を1pxだけ外側に伸ばす */
        z-index: -1;
    }
}

/* iOS Safari では 100svh/min-height の補助 */
@supports (-webkit-touch-callout: none) {
    #top, .hero {
        min-height: -webkit-fill-available !important;
    }
}
/* === Safariの上ズレ確定修正 === */
.hero {
    padding: 0 !important;                 /* ← これが本丸。safe-areaのpaddingを殺す */
}

.hero .hero-bg {
    position: absolute !important;         /* 念のため固定 */
    top: 0; right: 0; bottom: 0; left: 0;  /* 画面にピタッ */
}

/* === Safariのヒーロー上ズレ・黒/白帯 防止 最終オーバーライド === */

/* ヒーロー自体に余白を作らない（背景はパディングの影響を受けない） */
#top,
.hero {
    margin: 0 !important;
    padding: 0 !important;
    height: 100svh !important;   /* iOS16+ 安定 */
    min-height: 0 !important;    /* 既存の min-height を無効化 */
    position: relative !important;
    top: 0 !important;
}

/* iOS Safari（古め）補助。fill-available が勝って伸びるケースを潰す */
@supports (-webkit-touch-callout: none) {
    #top, .hero {
        height: -webkit-fill-available !important; /* 端末の実表示領域にぴったり */
        min-height: 0 !important;
    }
}

/* 背景レイヤーを“セクション全面”に確実にフィットさせる */
.hero .hero-bg {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden; /* サブピクセルはみ出しの保険 */
}

/* 画像のサブピクセル隙間対策：上下左右を1pxずつはみ出させる */
.hero .hero-bg img {
    position: absolute !important;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    transform: translateZ(0);  /* Safariの描画最適化 */
    backface-visibility: hidden;
}

/* 背景だけは safe-area のパディング影響を受けない（前景UIだけで使う） */
.hero-date .hero-ui {
    padding:
        max(env(safe-area-inset-top), 0px)
        max(env(safe-area-inset-right), 0px)
        calc(max(env(safe-area-inset-bottom), 0px) + 12px)
        max(env(safe-area-inset-left), 0px) !important;
}

/* 競合を無効化：以前追加した“背景側”のsafe-area/padding系が残っていれば打ち消す */
body.is-hero-ready .hero-bg img,
body.is-hero-ready .hero-logo img,
body.is-hero-ready .hero-date img,
.hero { padding: 0 !important; }

/* デスクトップSafariの1px白帯（稀）も物理的に潰す保険 */
@supports (-webkit-hyphens: none) {
    .hero .hero-bg::after {
        content: "";
        position: absolute;
        top: -1px; left: -1px; right: -1px; bottom: -1px;
        background: inherit;
        pointer-events: none;
    }
}