/* =====================================================
   Challenge GYM
   style.css
===================================================== */

/* ---------- Google Fonts ---------- */

body{
    font-family:'Noto Sans JP',sans-serif;
    color:#334155;
    background:#FFF9F2;
    overflow-x:hidden;
}

.font-kids{
    font-family:'Kiwi Maru',cursive;
}

/* ---------- Brand Color ---------- */

:root{

    --orange:#F97316;
    --orange-dark:#EA580C;
    --yellow:#FDBA12;
    --cream:#FFF9F2;
    --text:#334155;

}

/* ---------- Selection ---------- */

::selection{

    background:#FDBA12;
    color:white;

}

/* ---------- Scroll ---------- */

html{

    scroll-behavior:smooth;

}

body::-webkit-scrollbar{

    width:10px;

}

body::-webkit-scrollbar-thumb{

    background:var(--orange);
    border-radius:20px;

}

body::-webkit-scrollbar-track{

    background:#FFEFD9;

}

/* =====================================================
HEADER
===================================================== */

.header{

    position:fixed;
    top:0;
    width:100%;
    transition:.35s;
    background:rgba(255,255,255,0);
    backdrop-filter:blur(0px);

}

.header.active{

    background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);

    box-shadow:

    0 8px 30px rgba(0,0,0,.08);

}

.header a{

    transition:.25s;

}

.header nav a{

    position:relative;

}

.header nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:3px;

    background:var(--orange);

    border-radius:99px;

    transition:.35s;

}

.header nav a:hover::after{

    width:100%;

}

/* =====================================================
HERO
===================================================== */

.hero{

    position:relative;

}

/* Background */

.hero-slider{

    background-image:url(images/hero-main.jpg);

    background-size:cover;

    background-position:center;

    animation:heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(20,20,20,.35),

    rgba(20,20,20,.45)

    );

}

/* 水玉 */

.pattern{

    opacity:.08;

    background-image:

    radial-gradient(circle,var(--yellow) 2px,transparent 2px);

    background-size:40px 40px;

}

/* Hero Title */

.hero-title{

    text-shadow:

    0 8px 25px rgba(0,0,0,.18);

}

.hero-title span{

    display:block;

}

/* ガラスカード */

.glass{

    background:rgba(255,255,255,.86);

    backdrop-filter:blur(12px);

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

}

/* Hero写真 */

.hero-photo{

    position:relative;

}

.hero-photo::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    background:var(--yellow);

    border-radius:36px;

    top:18px;

    left:18px;

    z-index:-1;

}

.photo-main{

    transition:.6s;

}

.hero-photo:hover .photo-main{

    transform:scale(1.03);

}

/* Event Card */

.hero-card{

    position:absolute;

    bottom:-40px;

    left:-40px;

    background:white;

    padding:30px;

    border-radius:28px;

    max-width:320px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.12);

}

/* Scroll */

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator span{

    display:block;

    width:3px;

    height:70px;

    background:white;

    position:relative;

    overflow:hidden;

}

.scroll-indicator span::after{

    content:"";

    position:absolute;

    top:-100%;

    width:100%;

    height:100%;

    background:var(--yellow);

    animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

    to{

        top:100%;

    }

}

/* =====================================================
ABOUT
===================================================== */

.section-en{

    color:var(--orange);

    font-weight:900;

    letter-spacing:.35em;

    font-size:.9rem;

    margin-bottom:14px;

}

.section-title{

    font-size:clamp(2rem,4vw,3.5rem);

    font-weight:900;

    position:relative;

    display:inline-block;

}

/* ブラシライン */

.section-title::after{

    content:"";

    position:absolute;

    left:5%;

    bottom:-10px;

    width:90%;

    height:12px;

    background:

    linear-gradient(

    90deg,

    #FDBA12,

    #F97316

    );

    border-radius:999px;

    opacity:.28;

}

.section-subtitle{

    margin-top:30px;

    color:#64748B;

    font-size:1.1rem;

}

/* About写真 */

#about img{

    transition:.5s;

}

#about img:hover{

    transform:

    translateY(-8px)

    scale(1.02);

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}

/* =====================================================
PROGRAM
===================================================== */

#program{

    position:relative;

}

#program::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle,#FDBA12 2px,transparent 2px);

    background-size:42px 42px;

    opacity:.05;

    pointer-events:none;

}

.step-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    background:#FFF2DD;

    color:var(--orange);

    font-size:.85rem;

    font-weight:800;

    border-radius:999px;

    letter-spacing:.12em;

}

#program img{

    border-radius:32px;

    transition:.45s;

    box-shadow:

    0 15px 45px rgba(0,0,0,.08);

}

#program img:hover{

    transform:

    translateY(-8px)

    scale(1.03);

    box-shadow:

    0 30px 70px rgba(0,0,0,.16);

}

#program h3{

    position:relative;

    display:inline-block;

}

#program h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:75%;

    height:8px;

    background:#FDBA12;

    border-radius:99px;

    opacity:.35;

}

#program .grid{

    position:relative;

}

#program .grid::before{

    content:"";

    position:absolute;

    top:40px;

    bottom:40px;

    left:50%;

    width:3px;

    background:

    linear-gradient(

        var(--yellow),

        var(--orange)

    );

    opacity:.18;

}

@media(max-width:1024px){

#program .grid::before{

display:none;

}

}

/* =====================================================
COACH
===================================================== */

#coach{

    position:relative;

}

#coach::after{

    content:"Challenge";

    position:absolute;

    right:-40px;

    top:80px;

    font-size:12rem;

    font-weight:900;

    color:#F8F8F8;

    z-index:0;

    pointer-events:none;

}

#coach .grid{

    position:relative;

    z-index:2;

}

#coach img{

    border-radius:36px;

    transition:.45s;

    box-shadow:

    0 20px 60px rgba(0,0,0,.1);

}

#coach img:hover{

    transform:scale(1.02);

}

.coach-title{

    display:inline-block;

    margin-bottom:16px;

    font-weight:900;

    color:var(--orange);

    position:relative;

}

.coach-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:100%;

    height:5px;

    background:#FDBA12;

    opacity:.35;

    border-radius:99px;

}

.coach-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    color:#64748B;

    line-height:1.8;

}

.coach-list li{

    position:relative;

    padding-left:22px;

}

.coach-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:11px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--orange);

}

/* =====================================================
SAFETY
===================================================== */

.safety-card{

    background:white;

    padding:36px;

    border-radius:28px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:

    0 12px 40px rgba(0,0,0,.06);

}

.safety-card:nth-child(even){

    transform:translateY(25px);

}

.safety-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(249,115,22,.08),

    transparent

    );

}

.safety-card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}

.safety-card h3{

    margin-bottom:14px;

    font-size:1.3rem;

    font-weight:900;

}

.safety-card p{

    color:#64748B;

    line-height:1.9;

}

/* =====================================================
INFORMATION
===================================================== */

.info-table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

    0 15px 45px rgba(0,0,0,.08);

}

.info-table tr{

    border-bottom:

    1px solid #F1F5F9;

}

.info-table th{

    width:150px;

    background:#FFF4E8;

    color:var(--orange);

    font-weight:800;

    padding:22px;

    text-align:left;

}

.info-table td{

    padding:22px;

    line-height:1.9;

}

#access img{

    transition:.45s;

}

#access img:hover{

    transform:

    rotate(-1deg)

    scale(1.03);

}

/* =====================================================
APPLICATION
===================================================== */

#apply{

    position:relative;

    overflow:hidden;

}

#apply::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(

    rgba(255,255,255,.15),

    transparent 70%

    );

    top:-250px;

    right:-180px;

}

#apply img{

    transition:.45s;

}

#apply img:hover{

    transform:

    scale(1.05)

    rotate(-2deg);

}

#apply a{

    transition:.3s;

    box-shadow:

    0 15px 40px rgba(0,0,0,.15);

}

#apply a:hover{

    transform:

    translateY(-4px);

    background:#FFF7ED;

}

#apply a:active{

    transform:translateY(2px);

}

/* =====================================================
FOOTER
===================================================== */

footer{

    position:relative;

}

.footer-title{

    color:white;

    font-weight:800;

    margin-bottom:18px;

    letter-spacing:.08em;

}

footer p{

    color:#CBD5E1;

    line-height:1.9;

}

footer a{

    transition:.3s;

}

footer a:hover{

    color:white;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

        90deg,

        var(--yellow),

        var(--orange)

    );

}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:768px){

.safety-card:nth-child(even){

transform:none;

}

#coach::after{

display:none;

}

.info-table th{

display:block;

width:100%;

padding-bottom:6px;

}

.info-table td{

display:block;

padding-top:0;

}

}

/* =====================================================
ANIMATION
===================================================== */

/* 初期状態 */

.fade-up,
.fade-left,
.fade-right,
.fade-scale,
.fade-rotate{

    opacity:0;

    transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,1,.36,1);

    will-change:transform,opacity;

}

/* 下から */

.fade-up{

    transform:
    translateY(60px);

}

/* 左 */

.fade-left{

    transform:
    translateX(-80px);

}

/* 右 */

.fade-right{

    transform:
    translateX(80px);

}

/* 拡大 */

.fade-scale{

    transform:
    scale(.92);

}

/* 少し回転 */

.fade-rotate{

    transform:
    translateY(50px)
    rotate(-4deg);

}

/* 表示 */

.is-visible{

    opacity:1;

    transform:
    none;

}

/* =====================================================
BRUSH EFFECT
===================================================== */

.brush{

    position:relative;

    display:inline-block;

    z-index:1;

}

.brush::before{

    content:"";

    position:absolute;

    left:-8px;
    right:-8px;
    bottom:4px;

    height:18px;

    background:

    linear-gradient(
        90deg,
        #FDBA12,
        #F97316
    );

    opacity:.28;

    border-radius:100px;

    transform-origin:left center;

    transform:scaleX(0);

}

.is-visible .brush::before{

    animation:

    brushDraw

    .8s ease-out forwards;

}

@keyframes brushDraw{

    to{

        transform:scaleX(1);

    }

}

/* =====================================================
FLOATING DECORATION
===================================================== */

.float-circle{

    position:absolute;

    border-radius:50%;

    animation:

    floating

    8s ease-in-out infinite;

}

.float-circle.orange{

    background:#F97316;

    opacity:.08;

}

.float-circle.yellow{

    background:#FDBA12;

    opacity:.10;

}

@keyframes floating{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-18px);

}

100%{

transform:
translateY(0px);

}

}

/* =====================================================
PHOTO FRAME
===================================================== */

.photo-frame{

    position:relative;

    display:inline-block;

}

.photo-frame::before{

    content:"";

    position:absolute;

    inset:16px -16px -16px 16px;

    background:#FDBA12;

    border-radius:36px;

    z-index:-1;

    transition:.4s;

}

.photo-frame:hover::before{

    transform:

    rotate(-2deg)

    scale(1.02);

}

.photo-frame img{

    display:block;

    border-radius:32px;

    transition:.45s;

}

.photo-frame:hover img{

    transform:

    rotate(1deg)

    scale(1.02);

}

/* =====================================================
PAPER TEXTURE
===================================================== */

.paper{

    position:relative;

}

.paper::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.05;

    mix-blend-mode:multiply;

    background-image:

    radial-gradient(circle at 20% 20%,#000 1px,transparent 1px),
    radial-gradient(circle at 80% 30%,#000 .8px,transparent .8px),
    radial-gradient(circle at 50% 80%,#000 1px,transparent 1px);

    background-size:

    140px 140px,
    180px 180px,
    220px 220px;

}

/* =====================================================
RIBBON
===================================================== */

.ribbon{

    display:inline-block;

    background:#F97316;

    color:white;

    padding:

    10px 26px;

    font-weight:900;

    border-radius:999px;

    transform:

    rotate(-2deg);

    box-shadow:

    0 12px 24px rgba(0,0,0,.12);

}

/* =====================================================
BUTTON
===================================================== */

.btn-main{

    position:relative;

    overflow:hidden;

    transition:.3s;

}

.btn-main::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transform:skewX(-25deg);

}

.btn-main:hover{

    transform:

    translateY(-4px);

}

.btn-main:hover::before{

    left:150%;

    transition:.7s;

}

.btn-main:active{

    transform:

    translateY(2px);

}

/* =====================================================
CARD
===================================================== */

.card{

    transition:.35s;

}

.card:hover{

    transform:

    translateY(-10px);

    box-shadow:

    0 30px 60px rgba(0,0,0,.12);

}

/* =====================================================
IMAGE HOVER
===================================================== */

.zoom{

    overflow:hidden;

    border-radius:32px;

}

.zoom img{

    transition:

    transform .7s ease;

}

.zoom:hover img{

    transform:

    scale(1.08);

}

/* =====================================================
SECTION DIVIDER
===================================================== */

.wave{

    position:relative;

}

.wave::after{

    content:"";

    position:absolute;

    bottom:-2px;

    left:0;

    width:100%;

    height:80px;

    background:

    radial-gradient(circle at 20px -8px,
    transparent 24px,
    #FFF9F2 25px);

    background-size:40px 40px;

}

/* =====================================================
TITLE MOTION
===================================================== */

.section-title{

    overflow:hidden;

}

.section-title span{

    display:inline-block;

    transform:

    translateY(110%);

}

.is-visible .section-title span{

    animation:

    titleUp

    .8s

    cubic-bezier(.22,1,.36,1)

    forwards;

}

@keyframes titleUp{

to{

transform:translateY(0);

}

}

/* =====================================================
PHOTO SHADOW
===================================================== */

.soft-shadow{

box-shadow:

0 20px 50px rgba(0,0,0,.08);

transition:.45s;

}

.soft-shadow:hover{

box-shadow:

0 35px 80px rgba(0,0,0,.18);

}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

.hero-card{

position:relative;

left:auto;

bottom:auto;

margin-top:24px;

max-width:none;

}

.hero-title{

font-size:90%;

}

.photo-frame::before{

display:none;

}

.wave::after{

display:none;

}

.ribbon{

font-size:.85rem;

padding:8px 18px;

}

}

.current{

    color:var(--orange);

    font-weight:700;

}

.ripple{

    position:absolute;

    width:12px;

    height:12px;

    background:rgba(255,255,255,.5);

    border-radius:50%;

    transform:translate(-50%,-50%);

    animation:ripple .7s ease-out;

    pointer-events:none;

}

@keyframes ripple{

    from{

        opacity:.6;
        transform:translate(-50%,-50%) scale(0);

    }

    to{

        opacity:0;
        transform:translate(-50%,-50%) scale(18);

    }

}