/* =========================================
ROOT
========================================= */

:root{

    --bg-base:#FDF5E6;
    --main-rose:#E9967A;
    --main-rose-alpha:rgba(233,150,122,0.12);
    --sub-sage:#7E9A86;
    --text-charcoal:#4A433F;
    --white:#FFFFFF;

    --font-serif:'Shippori Mincho', serif;
    --font-sans:'Noto Sans JP', sans-serif;

    --ease-elastic:cubic-bezier(0.34,1.56,0.64,1);
    --ease-biophilic:cubic-bezier(0.23,1,0.32,1);

    --shadow-soft:
        0 10px 40px rgba(74,67,63,0.08),
        0 2px 10px rgba(74,67,63,0.04);

    --radius-lg:40px;
    --radius-md:24px;
}

/* =========================================
RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{

    background:
        radial-gradient(circle at top left, rgba(233,150,122,0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(126,154,134,0.12), transparent 30%),
        linear-gradient(180deg,#faf6ef 0%, #fffaf7 100%);

    color:var(--text-charcoal);

    font-family:var(--font-sans);

    line-height:1.9;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:min(1200px, calc(100% - 48px));
    margin:auto;
}

/* ==========================
HERO
========================== */
.hero-content{
    position:relative;
    height:65vh;
    min-height:550px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero-content-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-content-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.20)
    );
}

.hero-content-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:700px;
}
/* =========================================
2026 FLOAT EFFECT
========================================= */

.float-light{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;
}

.float-light::before,
.float-light::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    filter:blur(90px);

    opacity:.25;
}

.float-light::before{

    background:rgba(233,150,122,0.45);

    top:-180px;
    left:-140px;

    animation:floatA 14s ease-in-out infinite;
}

.float-light::after{

    background:rgba(126,154,134,0.35);

    right:-160px;
    bottom:-220px;

    animation:floatB 16s ease-in-out infinite;
}

@keyframes floatA{

    0%{
        transform:translate(0,0);
    }

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

    100%{
        transform:translate(0,0);
    }
}

@keyframes floatB{

    0%{
        transform:translate(0,0);
    }

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

    100%{
        transform:translate(0,0);
    }
}

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

.contact-btn{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 44px;

    border-radius:999px;

    background:var(--main-rose);

    color:white;

    font-weight:700;

    border:none;

    cursor:pointer;

    box-shadow:var(--shadow-soft);

    transition:
        transform .5s var(--ease-elastic),
        box-shadow .5s ease;
}

.btn-main:hover{

    transform:translateY(-6px);

    box-shadow:
        0 24px 50px rgba(233,150,122,0.25);
}

.btn-main::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.45),
            transparent
        );

    transform:translateX(-120%);

    transition:1s ease;
}

.btn-main:hover::before{

    transform:translateX(120%);
}

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

.contact-hero{

    position:relative;

    height:75vh;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.contact-hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.contact-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.18)
    );

}

.contact-hero-content{

    position:relative;

    z-index:2;

    max-width:650px;

    color:#fff;

}

.contact-hero-content h1{

    font-family:'Shippori Mincho',serif;

    font-size:clamp(36px,4vw,54px);

    font-weight:500;

    line-height:1.7;

    margin:20px 0 25px;

}

.contact-hero-content p{

    line-height:2.2;

    font-size:16px;

}

/*=========================================
INTRO
=========================================*/

.contact-intro .section-desc{

    max-width:620px;

    margin:20px auto 0;

}

/*=========================================
MENU
=========================================*/

.contact-menu-grid{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:20px;

}

.contact-menu-card{

    display:block;

    padding:45px;

    background:#fff;

    border-radius:30px;

    border:1px solid #F2ECE6;

    box-shadow:0 15px 45px rgba(0,0,0,.05);

    transition:.35s;

}

.contact-menu-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.menu-label{

    display:inline-block;

    color:#E9967A;

    font-size:12px;

    font-weight:700;

    letter-spacing:.28em;

    margin-bottom:18px;

}

.contact-menu-card h3{

    font-family:'Shippori Mincho',serif;

    font-size:28px;

    font-weight:500;

    color:#4A433F;

    margin-bottom:18px;

    line-height:1.5;

}

.contact-menu-card p{

    color:#6F6660;

    line-height:2;

    font-size:15px;

}

/* ========================================
TABLET
======================================== */

@media(max-width:1000px){

    .contact-menu-grid{

        grid-template-columns:repeat(2, 1fr);

        gap:20px;

    }

}
/*=========================================
SP
=========================================*/

@media(max-width:768px){

.contact-hero{

    min-height:420px;

    height:46vh;

}

.contact-hero-content h1{

    font-size:27px;

}

.contact-menu-grid{

    grid-template-columns:1fr;

    gap:15px;

}

.contact-menu-card{

    padding:30px;

}

.contact-menu-card h3{

    font-size:24px;

}

}
/*=========================================
CONTACT SECTION
=========================================*/

.contact-section-head{

    text-align:center;

    margin-bottom:60px;

}

.contact-form-card{

    max-width:900px;

    margin:auto;

    padding:55px;

    background:#fff;

    border-radius:35px;

    border:1px solid #F2ECE6;

    box-shadow:0 20px 60px rgba(0,0,0,.05);

}

/*=========================================
FORM
=========================================*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.form-group{

    margin-bottom:28px;

}

.form-group label{

    display:block;

    font-weight:600;

    margin-bottom:12px;

    color:#4A433F;

}

.required{

    color:#E9967A;

    font-size:12px;

    margin-left:8px;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #E8E2DC;

    border-radius:16px;

    font-size:15px;

    background:#fff;

    transition:.3s;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    outline:none;

    border-color:#E9967A;

    box-shadow:0 0 0 4px rgba(233,150,122,.12);

}

.contact-submit{

    text-align:center;

    margin-top:40px;

}

/*=========================================
SP
=========================================*/

@media(max-width:768px){

.contact-form-card{

    padding:30px 22px;

    border-radius:24px;

}

.form-grid{

    grid-template-columns:1fr;

    gap:0;

}

}

/*=========================================
CLASS SELECT
=========================================*/

.class-select-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin-top:20px;

}

.class-card{

    display:block;

    padding:30px;

    border:1px solid #E8E2DC;

    border-radius:22px;

    cursor:pointer;

    transition:.35s;

    background:#fff;

}

.class-card:hover{

    border-color:#E9967A;

    transform:translateY(-4px);

}

.class-card input{

    margin-bottom:18px;

    transform:scale(1.2);

}

.class-card h3{

    font-family:'Shippori Mincho',serif;

    font-size:26px;

    font-weight:500;

    margin-bottom:15px;

    color:#4A433F;

}

.class-card p{

    line-height:2;

    color:#6F6660;

    font-size:15px;

}

/*========================
SP
========================*/

@media(max-width:768px){

.class-select-grid{

    grid-template-columns:1fr;

}

.class-card{

    padding:22px;

}

.class-card h3{

    font-size:22px;

}

}
/*=========================================
RADIO CARD
=========================================*/

.radio-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:18px;

}

.radio-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 22px;

    border:1px solid #E8E2DC;

    border-radius:18px;

    cursor:pointer;

    transition:.3s;

    background:#fff;

}

.radio-card:hover{

    border-color:#E9967A;

    background:#FFF8F5;

}

.radio-card input{

    transform:scale(1.2);

}

.radio-card span{

    font-size:15px;

    color:#4A433F;

}

/*==========================
SP
==========================*/

@media(max-width:768px){

.radio-grid{

    grid-template-columns:1fr;

}

.radio-card{

    padding:16px 18px;

}

}
/*=========================================
SUPPORT
=========================================*/

.contact-support{

    background:#FCF8F5;

}

.support-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.support-card{

    background:#fff;

    border-radius:30px;

    padding:55px;

    text-align:center;

    border:1px solid #F1E9E4;

    box-shadow:0 18px 45px rgba(0,0,0,.05);

    transition:.35s;

}

.support-card:hover{

    transform:translateY(-8px);

}

.support-en{

    display:block;

    color:#E9967A;

    font-size:12px;

    font-weight:700;

    letter-spacing:.3em;

    margin-bottom:20px;

}

.support-card h3{

    font-family:'Shippori Mincho',serif;

    font-size:30px;

    font-weight:500;

    color:#4A433F;

    margin-bottom:20px;

}

.support-card p{

    line-height:2;

    color:#6F6660;

    margin-bottom:35px;

}

/*=========================================
SP
=========================================*/

@media(max-width:768px){

.support-grid{

    grid-template-columns:1fr;

}

.support-card{

    padding:35px 25px;

}

.support-card h3{

    font-size:24px;

}

}
/* ========================================
企業向けフォーム
======================================== */

#corporate-form .radio-card{

    min-height:60px;

    line-height:1.8;

}

#corporate-form .radio-card span{

    line-height:1.8;

}


/* ========================================
企業向けフォーム SP
======================================== */

@media(max-width:768px){

    #corporate-form .radio-grid{

        gap:12px;

    }

    #corporate-form .radio-card{

        padding:16px 18px;

        align-items:flex-start;

    }

    #corporate-form .radio-card span{

        font-size:14px;

        line-height:1.8;

    }

}