@charset "UTF-8";
:root {
    /* --pri-rgb:248 182 45; */
    --pri-rgb:248 182 45;
    --pri-dark-rgb:255 180 114;
    --sec-rgb:77 208 98;
    --sec-light-rgb:140 198 109;


    --pri:rgb(var(--pri-rgb));
    --pri-dark:rgb(var(--pri-dark-rgb));
    --sec:rgb(var(--sec-rgb));
    --sec-light:rgb(var(--sec-light-rgb));

    --black:#3F2F1A;
    --gray:#707070;
    --white:#FFFFFF;
    
    --bg-color:#F8F8F8;
    --trans:0.5s ease;

    --header-z-index:100;

    --left-space:60px;
    --content-width:min(1250px, 95vw);
    /* viewport:1280-1500px  60-100px */
    --content-inline-gap:clamp(3.75rem, calc(-10.795rem + 18.182vw), 6.25rem);

    --zenkaku-ant:"Zen Kaku Gothic Antique", sans-serif;
    --zenkaku-new:"Zen Kaku Gothic New", sans-serif;

    /* .fixedで使用する画像の設定  アスペクト比：495/367 */
    /* viewport:1280-1500px  360-445.5px */
    --fixed-img-w:clamp(22.5rem, calc(-8.591rem + 38.864vw), 27.844rem);
    --fixed-img-h:calc(var(--fixed-img-w) / 495 * 367);
    --fixed-gradient-range:19rem;   /* グラデーションの距離 */
    --fixed-gradient-start:10em;    /* グラデーションの開始位置 */
}
html {
    background-color:var(--pri);
    font-size:16px;
    line-height:1.8;
    font-family:var(--zenkaku-new);
    color:var(--black);
    font-weight:500;
    scroll-behavior:smooth;
    overscroll-behavior:none;
}
body {
    position:relative;
    overscroll-behavior:none;
    font-size:18px;
    z-index:0;
}
*,*:before,*:after { margin:0; padding:0; box-sizing:border-box;}
:is(h1, h2, h3, h4, h5, h6) { margin:0; padding:0;}
a { text-decoration: none;}
a[href^="tel"] { pointer-events:none;}
a:is(:link, :visited) { color:inherit;}
address { font-style:normal;}
:where(ol, ul) { list-style: none;}
img { height: auto; max-width: 100%; vertical-align: bottom;}
section { position:relative; z-index:0;}
section + section { margin-top:140px;}
.pc { display:block;}
.sm { display:none;}


.abs_before, .abs_after { position:relative;}
.abs_before:before,
.abs_after:after { content:""; position:absolute; display:block; background:url() no-repeat center / contain; pointer-events:none;}


.btn { width:fit-content; font-size:20px;}
.btn a {
    --gap:17px;
    --padding:13px;

    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:var(--gap);
    padding:var(--padding) var(--padding) var(--padding) calc(var(--padding) + var(--gap));
    color:var(--white);
    font-size:20px;
    background-color:var(--sec);
    border-radius:100vmax;

    &:before,
    &:after {
        --w:1.9em;

        content:"";
        display:block;
        width:1.9em;
        height:auto;
        aspect-ratio:1;
        border-radius:100vmax;
    }
    &:before { 
        position:absolute;
        inset:50% calc(var(--padding) + var(--w) / 2) auto auto;
        background-color:var(--sec);
        mask:
            url(../image/icon_arrow.svg) no-repeat 50% center / 42.5% auto,
            url(../image/icon_arrow.svg) no-repeat -100% center / 42.5% auto;
        translate:50% -50%;
        z-index:2;
        transition:mask-position var(--trans);
    }
    &:after {
        background-color:var(--white);
        z-index:1;
    }

    @media (any-hover:hover) {
        &:hover:before {
            mask-position:200% center, 50% center;
        }
    }
}

/*===========================================================================
*   .info_box
===========================================================================*/
header + .info_box {
    display:flex;
    align-items:center;
    position:absolute;
    inset-inline:auto 28px;
    padding-block:32px;
    /* viewport:1280-1500px  30-65px */
    padding-inline:0 clamp(1.875rem, calc(-10.852rem + 15.909vw), 4.063rem);
    background-color:rgb(255 255 255 / 0.75);
    backdrop-filter:blur(6px) brightness(1.17);
    border:solid 2px var(--sec-light);
    border-radius:60px;
    z-index:calc(var(--header-z-index) + 1);
}
.info_box {

    &:after {
        width:144px;
        height:auto;
        aspect-ratio:143.73/122.18;
        background-image:image-set(
            url(../image/icon_bird@2x.webp) 2x type("image/webp"),
            url(../image/icon_bird.webp) 1x type("image/webp"),
            url(../image/icon_bird@2x.png) 2x,
            url(../image/icon_bird.png) 1x
        );
        background-image:-webkit-image-set(
            url(../image/icon_bird@2x.webp) 2x type("image/webp"),
            url(../image/icon_bird.webp) 1x type("image/webp"),
            url(../image/icon_bird@2x.png) 2x,
            url(../image/icon_bird.png) 1x
        );
        inset:auto 0 84.5% auto;
    }

    & .midashi {
        /* viewport:1350-1500px  30-52.5px */
        margin-block:clamp(1.875rem, calc(-10.781rem + 15vw), 3.281rem);
        font-size:25px;
        font-weight:bold;
        color:var(--sec);
        writing-mode:vertical-rl;
        line-height:1;
    }
    & p:nth-of-type(1) { line-height:1.5;}
    & p:nth-of-type(2) { line-height:1.75;}
    & a[href^="tel"] {
        display:flex;
        align-items:center;
        justify-content:center;
        gap:0.25em;
        margin-block:4px 14.5px;
        color:var(--sec);
        font-size:48px;
        font-weight:bold;
        line-height:1.45;
    }
    & a[href^="tel"]:before {
        content:"";
        display:block;
        width:1em;
        height:1em;
        background-color:currentColor;
        mask:url(../image/icon_tel.svg) no-repeat center / contain;
        -webkit-mask:url(../image/icon_tel.svg) no-repeat center / contain;
    }
    & .calendar {
        width:100%;
        margin-bottom:20px;
        font-size:17px;
        line-height:1.65;

        & tr + tr :is(th, td) { border-top:solid 1px var(--gray);}
        & :is(th, td) { padding:0.25em 0.75em;}
        & :is(th, td):first-of-type { text-align:center;}
        & :is(.c, .b) { position:relative;}
        & :is(.c, .b):before {
            content:"";
            position:absolute;
            width:1em;
            inset:50% auto auto 50%;
            translate:-50% -50%;
        }
        & .c:before { height:1em; border-radius:50%; background-color:var(--pri);}
        & .b:before { height:0.175em; background-color:var(--gray);}
    }
}


@media (width < 768px){
    br.pc { display:none;}
    br.sp { display:block;}
}

@media (any-hover:hover) {
    a:hover { opacity:0.75;}
}
@media (any-hover:active) {
    a:active { opacity:0.75;}
}


/*===========================================================================
*   header
===========================================================================*/
.header_btn { display:none;}
header {
    position:fixed;
    /* viewpot:1280-1500px  40-70px */
    inset:45px clamp(2.5rem, calc(-8.409rem + 13.636vw), 4.375rem) auto auto;
    z-index:var(--header-z-index);

    & a {
        display:flex;
        justify-content:center;
        align-items:center;
        width:170px;
        line-height:1.45;
        font-size:20px;
        font-weight:500;
    }
    & a:not(.green) { padding-block:17.5px; border-top:solid 1px var(--sec-light);}
    & a.home { gap:0.75em;}
    & .home:before {
        content:"";
        display:block;
        width:1em;
        height:auto;
        aspect-ratio:18.7/14.54;
        background-color:currentColor;
        mask:url(../image/icon_home.svg) no-repeat center / contain;
    }
    & a.active.home:before { content:url(../image/icon_home.svg); line-height:1;}

    & a.green {
        gap:0.75em;
        padding:0.75em;
        background-color:var(--sec);
        border-radius:1em;
        font-size:18px;
        color:#fff;
    }
    & a:is(.access, .recruit):before { line-height:1;}
    & a.access { margin-top:1.7777em;}
    & a.recruit { margin-top:0.8333em;}
    & a:is(.access, .recruit):before {
        content:"";
        display:block;
        height:auto;
        background-color:#fff;
        mask:url() no-repeat center / contain;
    }
    & a.access:before { width:17.5px; aspect-ratio:17.5/24; mask-image:url(../image/icon_access.svg);}
    & a.recruit:before { width:20px; aspect-ratio:1; mask-image:url(../image/icon_recruit.svg);}
}



/*===========================================================================
*   footer
===========================================================================*/
footer {
    width:calc(100% - var(--left-space));
    margin-left:var(--left-space);
    margin-bottom:100px;
    padding:85px 0 60px var(--content-inline-gap);
    border-radius:100px 0 0 100px;
    background-color:var(--white);

    & .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:50px; width:calc(100% - var(--fixed-img-w));}
    & .map { width:min(640px, 100%); border-radius:50px; overflow:clip;}
    & .map iframe { width:100%; height:auto; aspect-ratio:64/48;}
    & .info_box {

        & a[href^="tel"] { justify-content:start; margin-block:0; line-height:1.5;}
        & .calendar { margin-top:1.765em;}
        & p { font-size:16px;}
        & p:nth-of-type(1) { margin-top:2.375em;}
    }
    & .copy { margin-top:3em; font-size:14px;}
}



/*===========================================================================
*   main
===========================================================================*/
main {
    margin-left:var(--left-space);

    & section.bg_white { background-color:var(--bg-color); border-radius:68px 0 0 68px;}
    & section:has(.fv)  { border-top-left-radius:0px;}
}
.content_container { margin-inline:0 max(calc(100vw - var(--content-width) - 16px), var(--fixed-img-w));}
.content_container:not(.news) h2 {
    /* viewport:1280-1500px  67.5-90px */
    margin-block:clamp(4.219rem, calc(-3.963rem + 10.227vw), 5.625rem);
    writing-mode:vertical-rl;
    font-size:50px;
    font-weight:bold;
    color:var(--sec);
    letter-spacing:0.12em;
    line-height:1.2;
}


/*===========================================================================
*   .fixed
===========================================================================*/
.fixed {

    & .fixed_cover {
        position:absolute;
        inset:calc(100vh - var(--fixed-img-h)) 0 auto auto;
        width:var(--fixed-img-w);
        height:calc(var(--fixed-img-h) + var(--fixed-gradient-range));
        background-image:linear-gradient(
            to bottom,
            var(--bg-color) 0%,
            var(--bg-color) calc(100% - var(--fixed-gradient-start)),
            transparent 100%
        );
        clip-path:polygon(
            68.6356% 0%,
            100% 0%,
            100% 100%,
            0% 100%,
            0% 36.1941%
        );
        z-index:calc(var(--header-z-index) - 1);
    }
    & img {
        position:fixed;
        inset:auto 0 0 auto;
        width:var(--fixed-img-w);
        z-index:calc(var(--header-z-index) - 2);
    }
}


/*===========================================================================
*   .fv
===========================================================================*/
.fv {
    position:relative;
    
    & h1 { padding:2rem 0px 2rem 37px;}
    & .mainimg {
        display:block;
        width:min(100% - 235px, 1500px);
        height:697px;
        object-fit:cover;
        object-position:center right;
        border-radius:0 300px 300px 0;
    }
    & .catch {
        margin-top:-1lh;
        /* viewport:1280-1500px  36-45px */
        font-size:clamp(2.25rem, calc(-1.023rem + 4.091vw), 2.813rem);
        font-weight:bold;
        color:var(--sec);
    }
    & .catch_sub {
        line-height:2.25;
        /* viewport:1280-1500px  16-20px */
        font-size:clamp(1rem, calc(-0.455rem + 1.818vw), 1.25rem);
    }
    & :is(.catch, .catch_sub) { margin-left:var(--content-inline-gap);}
}