* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:#f5f5f5;
    color:#151515;
    font-family:"Noto Sans JP",sans-serif;
    -webkit-text-size-adjust:100%
}

.page {
    background:#fff;
    width:100%;
    max-width:1040px;
    margin:auto;
    padding-bottom:calc(clamp(95px,25.87vw,269px) + env(safe-area-inset-bottom) + 30px)
}

.intro {
    text-align:center;
    font-size:clamp(15px,3.75vw,39px);
    font-weight:700;
    line-height:1.77;
    padding:12px 7% 0;
    margin-bottom:90px
}

.intro p {
    margin:0 0 1em
}

.intro p+p {
    margin-top:1em
}

.event {
    margin:0 5% 145px
}

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

.event-copy {
    text-align:center;
    margin-top:30px;
    font-size:clamp(15px,3.75vw,39px);
    font-weight:700;
    line-height:1.77
}

.event-copy p {
    margin:0 0 36px
}

.detail {
    display:flex;
    width:83.12%;
    min-height:clamp(42px,10.3vw,107px);
    margin:0 auto;
    align-items:center;
    justify-content:center;
    border-radius:100px;
    color:#fff;
    text-decoration:none;
    font-size:clamp(15px,3.2vw,33px);
    letter-spacing:.07em;
    transition:filter .2s,transform .2s
}

.detail[href]:hover {
    filter:brightness(1.08);
    transform:translateY(-2px)
}

.detail:focus-visible,.ticket-bar a:focus-visible {
    outline:4px solid #0749a7;
    outline-offset:5px
}

.gradient-1 {
    background:linear-gradient(100deg,#0073ba,#00a650,#b1ce00)
}

.gradient-2 {
    background:linear-gradient(100deg,#005b96,#9535e8,#ff5484)
}

.gradient-3 {
    background:linear-gradient(100deg,#80c500,#f6ae00,#c52200)
}

.gradient-7 {
    background:linear-gradient(100deg,#00b85e,#0052bc,#0037c2)
}

.soon {
    background:#c8c8c8;
    font-family:"Barlow Condensed",sans-serif;
    font-weight:700;
    letter-spacing:.15em
}

.unconfigured {
    cursor:default
}

.ticket-bar {
    position:fixed;
    z-index:20;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(100%,1040px);
    background:#ffc600;
    padding-bottom:env(safe-area-inset-bottom)
}

.ticket-bar a,.ticket-bar span {
    display:block
}

.ticket-bar img {
    display:block;
    width:100%;
    height:auto
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}

.motion-ready .reveal {
    opacity:0;
    transform:translateY(35px);
    transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)
}

.motion-ready .reveal.is-visible {
    opacity:1;
    transform:none
}

.loader[hidden] {
    display:none
}

.loader {
    position:fixed;
    inset:0;
    z-index:100;
    background:#fff;
    display:grid;
    place-items:center;
    transition:opacity .45s
}

.loader.is-done {
    opacity:0;
    pointer-events:none
}

.loader-inner {
    text-align:center;
    width:min(76%,420px);
    --progress:0%
}

.loader-word {
    position:relative;
    display:inline-block;
    color:#e0e0e0;
    font-size:clamp(26px,5vw,44px);
    font-weight:700;
    white-space:nowrap
}

.loader-word>span {
    position:absolute;
    inset:0;
    color:transparent;
    background:linear-gradient(90deg,#0077bf,#00ad60,#aaca00);
    background-clip:text;
    -webkit-background-clip:text;
    clip-path:inset(0 calc(100% - var(--progress)) 0 0)
}

.loader-percent {
    display:block;
    font:24px "Barlow Condensed",sans-serif;
    margin:16px
}

.loader-track {
    height:3px;
    background:#eee
}

.loader-track i {
    display:block;
    width:var(--progress);
    height:100%;
    background:linear-gradient(90deg,#0077bf,#00ad60,#aaca00);
    transition:width .15s
}

@media(max-width:767px) {
    .intro {
        margin-bottom:40px
    }

    .event {
        margin-bottom:65px
    }

    .event-copy {
        margin-top:15px
    }

    .event-copy p {
        margin-bottom:24px
    }

    .motion-ready .reveal {
        transform:translateY(22px)
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

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

    .loader {
        transition:none
    }

}

/* 固定バナーの背景とプレートはCSS、文字のみ透過PNG */
.ticket-bar {
    background:linear-gradient(110deg,#ff4052,#ea8100 43%,#8fce00);
    padding-top:clamp(15px,3.4vw,35px);
    padding-bottom:calc(clamp(14px,3.2vw,33px) + env(safe-area-inset-bottom))
}

.ticket-bar .ticket-content {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(6px,1.4vw,15px)
}

.ticket-bar .ticket-heading {
    width:65%;
    height:auto
}

.ticket-bar .ticket-label {
    display:block;
    width:70%;
    background:white;
    border-radius:clamp(5px,.9vw,10px);
    padding:clamp(6px,1.3vw,14px) clamp(8px,2vw,21px);
    transform:rotate(-1deg);
    box-shadow:0 5px 15px #55330022
}

.ticket-label img {
    width:100%;
    height:auto
}

.hero {
    width:100%;
    margin:0 0 clamp(24px,5vw,52px)
}

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

/* AIデザインに合わせた固定チケット背景のギザギザ */
.ticket-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 13px;
    background: inherit;
    clip-path: polygon(0 100%, 0 65%, 2.5% 0, 5% 65%, 7.5% 0, 10% 65%, 12.5% 0, 15% 65%, 17.5% 0, 20% 65%, 22.5% 0, 25% 65%, 27.5% 0, 30% 65%, 32.5% 0, 35% 65%, 37.5% 0, 40% 65%, 42.5% 0, 45% 65%, 47.5% 0, 50% 65%, 52.5% 0, 55% 65%, 57.5% 0, 60% 65%, 62.5% 0, 65% 65%, 67.5% 0, 70% 65%, 72.5% 0, 75% 65%, 77.5% 0, 80% 65%, 82.5% 0, 85% 65%, 87.5% 0, 90% 65%, 92.5% 0, 95% 65%, 97.5% 0, 100% 65%, 100% 100%);
    pointer-events: none;
}

/* 支給PNGの比率を維持し、ボタン全体をクリック領域にする */
.ticket-bar .ticket-link {
    display: block;
    width: 84%;
    margin: 0 auto;
}
.ticket-bar .ticket-button-image {
    display: block;
    width: 100%;
    height: auto;
}

/* 画面幅に応じた改行。PC/SPで同じ詳細度にして確実に切り替える。 */
br.sponly {
    display: none !important;
}

br.pconly {
    display: inline !important;
}

@media (min-width: 768px) {
    .intro,
    .event-copy {
        font-size: clamp(10.125px, 2.53125vw, 26.325px);
    }
}

@media (max-width: 767px) {
    br.sponly {
        display: inline !important;
    }

    br.pconly {
        display: none !important;
    }

    /* 84% × 1.1。画像だけでなくクリック領域も拡大する。 */
    .ticket-bar .ticket-link {
        width: 92.4%;
    }

    /* 固定ボタンの拡大分も本文末尾の余白に含める。 */
    .page {
        padding-bottom: calc(32.7vw + 55px + env(safe-area-inset-bottom));
    }
}

/* 本文中・本文直下の補足テキスト。ボタン用spanは除外する。 */
.event-copy p span,
.event-copy > span:not(.detail) {
    font-size: 70%;
}

/* PCのみ：直前の上下余白の50%、ボタン幅の80% */
@media (min-width: 768px) {
    .ticket-bar {
        padding-top: clamp(5.25px, 1.19vw, 12.25px);
        padding-bottom: calc(clamp(4.9px, 1.12vw, 11.55px) + env(safe-area-inset-bottom));
    }

    .ticket-bar .ticket-link {
        width: 57.12%; /* 前版の71.4% × 0.8 */
    }
}

/* サッカースクール：参考画像の赤→オレンジ→黄 */
.gradient-5 {
    background: linear-gradient(90deg, #fd2435, #fd7224, #ecb428);
}