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

.menu-main{
    background:#fff;
}

.menu-container{
    width:min(1180px,calc(100% - 40px));
    margin:0 auto;
}

/* ==========================================================
Hero
========================================================== */

.page-hero--menu {
    color: #173f5b;
}

.page-hero--menu .page-hero__english {
    color: #477b93;
}

.page-hero--menu .page-hero__title {
    color: #173f5b;
}

.page-hero--menu .page-hero__lead {
    color: #4e585e;
}

.page-hero--menu::before {
    background: #477b93;
}

.page-hero--menu::after {
    background: #477b93;
}

.page-hero--menu .page-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.70) 35%,
            rgba(255,255,255,.30) 60%,
            rgba(255,255,255,.05) 100%
        );
}

/* ==========================================================
Heading
========================================================== */

.menu-heading{
    padding:100px 0 70px;
    text-align:center;
}

.menu-heading__english{
    margin:0;
    color:#b59658;
    letter-spacing:.3em;
    font-size:13px;
    font-weight:700;
}

.menu-heading__title{
    margin:18px 0 28px;
    font-size:42px;
    line-height:1.5;
}

.menu-heading__text{
    max-width:760px;
    margin:auto;
    color:#666;
    line-height:2;
}

.menu-section-title{
    margin:0 0 40px;
    font-size:34px;
    text-align:center;
}

/* ==========================================================
症状ナビ
========================================================== */

.menu-symptom{
    padding:0 0 90px;
}

.menu-symptom__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.menu-symptom__grid a{

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

    min-height:74px;

    background:#fff;

    border:1px solid #d9e2eb;

    border-radius:12px;

    color:#15365c;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.menu-symptom__grid a:hover{

    background:#15365c;

    color:#fff;

    transform:translateY(-4px);

}

/* ==========================================================
診療一覧
========================================================== */

.menu-list{

    padding:0 0 120px;

}

.menu-grid{

    display:grid;

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

    gap:36px;

}

.menu-card{

    overflow:hidden;

    background:#fff;

    border-radius:18px;

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

    transition:.35s;

}

.menu-card:hover{

    transform:translateY(-8px);

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

}

.menu-card__image{

    overflow:hidden;

}

.menu-card__image img{

    width:100%;

    display:block;

    transition:.5s;

}

.menu-card:hover img{

    transform:scale(1.06);

}

.menu-card__content{

    padding:36px;

}

.menu-card__english{

    margin:0;

    color:#b59658;

    font-size:12px;

    letter-spacing:.3em;

}

.menu-card__title{

    margin:14px 0 20px;

    font-size:30px;

    color:#18395f;

}

.menu-card__text{

    margin:0;

    color:#666;

    line-height:2;

}
.menu-card__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:30px;

    padding:16px 34px;

    border:2px solid #15365c;

    border-radius:999px;

    color:#15365c;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.menu-card__button:hover{

    background:#15365c;

    color:#fff;

}

/* ==========================================================
CTA
========================================================== */

.menu-cta{

    padding:120px 0;

    background:#f5f8fb;

}

.menu-cta__box{

    padding:80px;

    border-radius:24px;

    background:#15365c;

    color:#fff;

    text-align:center;

}

.menu-cta__english{

    margin:0;

    color:#d6c28d;

    font-size:13px;

    letter-spacing:.3em;

}

.menu-cta__title{

    margin:18px 0 24px;

    font-size:42px;

    line-height:1.5;

}

.menu-cta__text{

    max-width:700px;

    margin:auto;

    line-height:2;

    opacity:.9;

}

.menu-cta__buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    margin-top:50px;

}

.menu-cta__button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:280px;

    height:66px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.menu-cta__button--web{

    background:#fff;

    color:#15365c;

}

.menu-cta__button--web:hover{

    background:#d6c28d;

    color:#15365c;

}

.menu-cta__button--tel{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.45);

}

.menu-cta__button--tel:hover{

    background:#fff;

    color:#15365c;

}

/* ==========================================================
Animation
========================================================== */

.menu-card{

    opacity:0;

    transform:translateY(50px);

    animation:menuFade .7s ease forwards;

}

.menu-card:nth-child(2){

    animation-delay:.08s;

}

.menu-card:nth-child(3){

    animation-delay:.16s;

}

.menu-card:nth-child(4){

    animation-delay:.24s;

}

.menu-card:nth-child(5){

    animation-delay:.32s;

}

.menu-card:nth-child(6){

    animation-delay:.40s;

}

.menu-card:nth-child(7){

    animation-delay:.48s;

}

.menu-card:nth-child(8){

    animation-delay:.56s;

}

.menu-card:nth-child(9){

    animation-delay:.64s;

}

.menu-card:nth-child(10){

    animation-delay:.72s;

}

.menu-card:nth-child(11){

    animation-delay:.80s;

}

.menu-card:nth-child(12){

    animation-delay:.88s;

}

@keyframes menuFade{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
Tablet
========================================================== */

@media (max-width:1100px){

    .menu-grid{

        grid-template-columns:1fr;

    }

    .menu-heading{

        padding:80px 0 60px;

    }

}

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

@media (max-width:768px){

    .menu-container{

        width:calc(100% - 30px);

    }

    .menu-hero{

        min-height:240px;

    }

    .menu-hero__english{

        font-size:12px;

    }

    .menu-hero__title{

        margin-top:12px;

        font-size:34px;

    }

    .menu-hero__lead{

        margin-top:14px;

        font-size:14px;

        line-height:1.8;

    }

    .menu-heading{

        padding:60px 0 40px;

    }

    .menu-heading__title{

        font-size:29px;

    }

    .menu-heading__text{

        font-size:14px;

        line-height:1.9;

    }

    .menu-section-title{

        margin-bottom:28px;

        font-size:26px;

    }

    .menu-symptom{

        padding-bottom:60px;

    }

    .menu-symptom__grid{

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

        gap:12px;

    }

    .menu-symptom__grid a{

        min-height:58px;

        font-size:14px;

    }

    .menu-list{

        padding-bottom:80px;

    }

    .menu-card__content{

        padding:24px;

    }

    .menu-card__title{

        font-size:24px;

    }

    .menu-card__text{

        font-size:14px;

        line-height:1.9;

    }

    .menu-card__button{

        width:100%;

        margin-top:24px;

    }

    .menu-cta{

        padding:80px 0;

    }

    .menu-cta__box{

        padding:40px 24px;

        border-radius:18px;

    }

    .menu-cta__title{

        font-size:28px;

    }

    .menu-cta__buttons{

        flex-direction:column;

        gap:16px;

        margin-top:32px;

    }

    .menu-cta__button{

        width:100%;

        height:58px;

    }

}