@charset "UTF-8";
/*===========================================================================
*   top
===========================================================================*/
.fv .catch {
    margin-top:-0.5lh;
    /* viewport:768-960px */
    font-size:100px;
    letter-spacing:0.1em;

    & small { font-size:0.675em;}
}


/*==================================================
*   .news
==================================================*/
.content_container.news {
    position:relative;
    margin-block:185px;
    padding:4em 4em 4em var(--content-inline-gap);
    background-color:var(--white);
    border-radius: 0 100px 100px 0;

    & h2 { font-size:26px;}
    & ul {
        display:grid;
        grid-template-columns:auto auto 1fr;
        align-items:baseline;
        gap:2em 1em;
        margin-top:2em;
        font-size:15px;
    }
    & li { display:contents;}
    & :is(.day, .cont) { font-size:18px;}
    & .type { padding-inline:1.5em; color:var(--white); letter-spacing:0.05em; text-align:center; border-radius:100vmax;}
    & .type.green { background-color:var(--sec);}
    & .type.orange { background-color:var(--pri);}

    & .btn { position:absolute; inset:3em 2em auto auto;}
}


/*==================================================
*   .about, guide
==================================================*/
:is(.about, .guide) { display:flex;}

.about {

    & h3 { margin-bottom:1em; font-size:38px;}
    & .btn { margin:2em 0 -1em auto;}
}

.guide {
    margin-top:225px;
    padding-bottom:190px;

    & .wrap { width:100%;}
    & .boxs {
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:34px 57px;
    }
    & .boxs + div { margin-top:2.36em; font-size:22px;}
    & .box {
        display:grid;
        grid-template-columns:150px 1fr;
        align-items:center;
        gap:0;
        padding:2em 1.5555em;
        background:var(--white);
        border-radius:50px;
    }
    & .img { justify-self:center; width:auto; height:110px;}
    & .img img { width:auto; height:100%;}
    & h3 { justify-self:center; font-size:25px; font-weight:500; text-align:center;}
    & .btn { margin-top:2em;}
}
@media (width < 1500px){
    .guide  {

        & .boxs { grid-template-columns:min(600px, 100%); gap:15px;}
    }
}



/*==================================================
*   .adm
==================================================*/
section:has(.adm) { margin-block:0; padding-block:50px; background:linear-gradient(to right, transparent, #FFFAEF);}
section:has(.adm) + section { margin-top:0px;}
.adm {
    /* display:flex;
    align-items:center;
    flex-wrap:wrap;
    margin-inline:0 auto; */
    display:grid;
    grid-template:
        ".  . slider ." 1fr
        "h2 t slider ." auto
        ".  . slider ." 1fr / auto auto auto 1fr;
    margin-inline:0 auto;
    
    & h2 { grid-area:h2; color:inherit!important;}
    & .adm_start { grid-area:t;}
    & .adm_end { grid-area:slider;}


    & h3 { text-wrap:nowrap; font-size:38px; letter-spacing:-0.05em; line-height:1.6;}
    & .text { width:95%; margin-top:1.6em;}
    & .btn { margin-top:2em;}

    & .adm_wrap { display:flex;}
    & .adm_start { width:24em;}
    & .adm_end { container:adm / inline-size; position:relative; width:450px; margin-left:90px; z-index:1;}
    & .adm_end_wrap {
        /* 画像のアスペクト比：450/277 */
        --gap:50px;
        --mask-flow:to bottom;
        --mask-gradient-pos:10%;

        height:calc((100cqw / 450 * 277) * 2 + var(--gap));
        /* red は任意の色で問題なし */
        mask:linear-gradient(
            var(--mask-flow),
            transparent 0%,
            red var(--mask-gradient-pos),
            red calc(100% - var(--mask-gradient-pos)),
            transparent 100%);
        -webkit-mask:linear-gradient(
            var(--mask-flow),
            transparent 0%,
            red var(--mask-gradient-pos),
            red calc(100% - var(--mask-gradient-pos)),
            transparent 100%);
    }
    & .slick-list { height:100%!important;}
    & .slide img { width:100%; height:auto; aspect-ratio:450/277; object-fit:cover; border-radius:100px;}
    & .slide + .slide { margin-top:var(--gap);}
}
@media (width < 1700px){
    .adm {
        grid-template:
            "h2 t" auto
            "h2 slider" 1fr / auto 1fr;
        width:calc(100% - var(--fixed-img-w));

        & .adm_start { width:min(600px, 100%);}
        & .adm_end { margin-left:0px; margin-top:30px;}
        & .adm_end_wrap { height:calc((100cqw / 450 * 277) * 1.5 + var(--gap));}
        & .text { width:100%;}
    }
}