@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

/*=============

基本設定

==============*/
:root{
    --width: 1440;

    --txt_color: #3D4434;
    --corporate_color: #335208;
    --shirayuri_color: #A7D38D;
    --hibari_color: #855E44;
    --gray: #B8B8B8;
    --accent: #FFA00F;
    --blue: #BCF0E4;
    --bg_1: #D4E8B8;
    --bg_2: #F1F3CA;
    --bg_3: #FFF8E4;
    --bg_white: #fff;

    --width-nomal: calc(1100 / var(--width) * 100vw);
    --padding-100: calc(100 / var(--width) * 100vw);
    --padding-80: calc(80 / var(--width) * 100vw);
    --padding-50: calc(50 / var(--width) * 100vw);
    --padding-30: calc(30 / var(--width) * 100vw);
    --padding-20: calc(20 / var(--width) * 100vw);
    --padding-10: calc(10 / var(--width) * 100vw);

    --font-size-mid: calc(18 / var(--width) * 100vw);
    --font-size-big: calc(20 / var(--width) * 100vw);
}
/* ===== 余白 ====== */
.cont_nomal{
    max-width: var(--width-nomal);
    margin: 0 auto;
}
.p_50_top{
    padding-top: var(--padding-50);
}
.p_50_bottom{
    padding-bottom: var(--padding-50);
}
.p_100_top{
    padding-top: var(--padding-100);
}
.p_100_bottom{
    padding-bottom: var(--padding-100);
}
html{
    font-size: 17px;
    scroll-behavior: smooth;
}
/* ページ内リンク調整用 */
.anchor{
    margin-top: -100px;
    padding-top: 100px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: .07rem;
    line-height: 180%;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--txt_color);
}
main{
    overflow: hidden;
}
a{
    text-decoration: none;
    display: inline-block;
    color: inherit;
}
a:hover{
    opacity: .8;
}
img{
    width: 100%;
    max-width: 100%;
    height: auto;
}
.flex{
    display: flex;
}
.column{
    flex-direction: column;
}
ol li,
ul li{
    list-style: none;
}
.sp{
    display: none;
}
/* ===== 画像の保存防止対策 ===== */
img{
    /* PCの右クリック禁止 */
    pointer-events: none;
    /* SPの長押し保存禁止 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
    /* 画像のドラッグ保存禁止 */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}
/* ===== データリストのスタイル ===== */
summary{
    list-style: none;
    cursor: pointer;
}
summary::-webkit-details-marker{
    display:none; /*safari用*/
}
/* ===== テキスト ===== */
.en{
    font-family: "Roboto", sans-serif;
    font-size: calc(25 / var(--width) * 100vw);
    color: var(--corporate_color);
}
h2{
    font-size: calc(50 / var(--width) * 100vw);
    line-height: 100%;
}
h2.dot{
    position: relative;
    padding-left: 2rem;
    margin-bottom: var(--padding-30);
}
h2.dot .en{
    margin-top: 10px;
}
h2.dot::before{
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background: var(--accent);
    border-radius: 100vh;
    position: absolute;
    top: calc(50% - 1.5rem);
    left: .25rem;
}
h3{
    line-height: 100%;
}
/* ===== 縦書き文字 ===== */
.tate{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.tate span{
    background: #fff;
    display: block;
    padding: 5px 10px;
    font-size: calc(30 / var(--width) * 100vw);
    height: fit-content;
    letter-spacing: .7rem;
    line-height: 100%;
    height: -webkit-fit-content;
    white-space: nowrap;
}
.orange_txt{
    color: var(--accent);
}
.green_txt{
    color: var(--corporate_color);
}
.s_txt{
    color: var(--shirayuri_color);
}
.h_txt{
    color: var(--hibari_color);
}
.bg_1{
    background: var(--bg_1);
}
.bg_2{
    background: var(--bg_2);
}
.bg_3{
    background: var(--bg_3);
}
.bg_brown{
    background: #F4E9CE;
}
.bg_white{
    background: var(--bg_white);
}
/* ===== ヘッダーとの調整のため余白追加 ===== */
main{
    padding-top: 6%;
    padding-bottom: calc(98 / var(--width) * 100vw);
}
/* ===== トップと採用以外の採用バナー余白調整 ===== */
.lower #recruit_banner{
    padding-bottom: calc(98 / var(--width) * 100vw);
    margin-bottom: calc(-98 / var(--width) * 100vw);
}
/* ===== アニメーション ===== */
.in-view.fade-in{
    animation: fade-in 1.5s ease;
}
@keyframes fade-in{
    from{
        opacity: 0;
        transform: translateY(50px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
.element.mv-fade-in{
    animation: mv-fade-in 2s ease;
    animation-play-state: paused;
}
@keyframes mv-fade-in{
    from{
        opacity: 0;
        transform: translateY(30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
.right-in-animation{
    animation: right-in 3s;
    animation-play-state: paused;
}
@keyframes right-in{
    0%{
        transform: translateX(1000px);
    }
    80%{
        transform: translateX(1000px);
    }
    90%{
        transform: translate(-30px);
    }
    100%{
        transform: translateX(0);
    }
}
.left-in-animation{
    animation: left-in 3s;
    animation-play-state: paused;
}
@keyframes left-in{
    0%{
        transform: translateX(-1000px);
    }
    80%{
        transform: translateX(-1000px);
    }
    90%{
        transform: translate(40px);
    }
    100%{
        transform: translateX(0);
    }
}

@media screen and (max-width: 768px){
    *{
        font-size: 16px;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
}
@media screen and (max-width: 480px){
    *{
        font-size: 15px;
    }
}
/* マウスオーバー */
.trans-sankaku .sankaku{
    transition: .5s ease;
}
.trans-sankaku:hover .sankaku{
    transform: translateX(5px);
}
.trans-sankaku:hover{
    opacity: 1;
}

/* ==========================

header

===========================-*/

header{
    background: url(../images/common/header_bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: -5%;
    padding-bottom: 5%;
    /* position: relative; */
    z-index: 999;
    position: sticky;
    top: 0;
}
header nav.pc_nav{
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-20) var(--padding-50) 0;
    background: #fff;
}
header nav.pc_nav li img{
    width: calc(40 / var(--width) * 100vw);
    margin: 0 auto;
}
header .pc_nav ol li a span{
    line-height: 100%;
    font-size: 15px;
}
header nav.pc_nav ol{
    gap: var(--padding-50);
    text-align: center;
    line-height: 130%;
}

/* ==========================

footer

===========================-*/

footer{
    background: #fff;
    position: relative;
}
footer::before{
    content: "";
    background: url(../images/common/footer_bg.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 100%;
    height: calc(98 / var(--width) * 100vw);
    position: absolute;
    left: 0;
    top: calc(-95 / var(--width) * 100vw);
}
footer .copy{
    background: var(--corporate_color);
    padding: var(--padding-30) 0;
    text-align: center;
    font-family: "Roboto", sans-serif;
}
footer .copy small{
    color: #fff;
}
footer .nav-w{
    justify-content: space-between;
    padding: var(--padding-50) 0;
}
footer .link-nav{
    gap: calc(50 / var(--width) * 100vw);
}
footer .link-nav ul li .gray{
    color: var(--gray);
}
footer .corporation_nav a{
    text-decoration: underline;
}

/* ==========================

recruit-banner

===========================-*/

#recruit_banner .cont_nomal{
    padding: var(--padding-100) 0;
}
#recruit_banner .cont{
    align-items: flex-end;
}
#recruit_banner .midashi{
    gap: calc(20 / var(--width) * 100vw);
    margin: 0 0 0 auto;
    width: fit-content;
}
#recruit_banner .midashi h3{
    width: fit-content;
    background: #fff;
    font-size: calc(40 / var(--width) * 100vw);
    padding: calc(15 / var(--width) * 100vw) var(--padding-10);
}
#recruit_banner .cont img{
    width: 60%;
}
#recruit_banner .cont .txt-w{
    margin-bottom: calc(90 / var(--width) * 100vw);
    gap: calc(50 / var(--width) * 100vw);
    position: absolute;
    right: calc((100vw - var(--width-nomal)) / 2);
    border-radius: 3vh;
}
#recruit_banner .cont .txt-w p{
    text-align: center;
    width: 80%;
    margin: 0 0 0 auto;
}
#recruit_banner .cont .txt-w a{
    background: var(--accent);
    color: #fff;
    justify-content: space-between;
    padding: calc(15 / var(--width) * 100vw) var(--padding-20);
    border-radius: 100vh;
    width: 60%;
    align-items: center;
    margin: 0 0 0 30%;
}
#recruit_banner .cont .txt-w .txt{
    color: #fff;
}
#recruit_banner .cont .txt-w a img{
    width: 2rem;
}
#recruit_banner .cont .txt-w a .sankaku{
    background: #fff;
    width: 1rem;
    height: 1rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#recruit_banner .cont img{
    animation: img-scale 5.5s ease-in-out infinite;
}
@keyframes img-scale{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.02);
    }
    100%{
        transform: scale(1);
    }
}

/* ==========================

contact-banner

===========================-*/

#contact_banner .content-w{
    background: #fff;
    border-radius: calc(30 / var(--width) * 100vw);
    padding-left: var(--padding-80);
    padding-right: var(--padding-80);
}
#contact_banner .content-w p{
    text-align: center;
    margin-bottom: var(--padding-50);
    font-size: var(--font-size-mid);
}
#contact_banner .content-w .cont-in{
    justify-content: space-between;
    align-items: center;
}
#contact_banner .tel-cont{
    align-items: center;
    gap: var(--padding-20);
}
#contact_banner .tel-cont .en{
    align-items: center;
    gap: .5rem;
}
#contact_banner .tel-cont .hours{
    background: var(--shirayuri_color);
    color: #fff;
    padding: calc(5 / var(--width) * 100vw) var(--padding-30);
    border-radius: 100vh;
}
#contact_banner .tel-cont a{
    font-size: calc(50 / var(--width) * 100vw);
}
#contact_banner .tel-cont img{
    width: calc(45 / var(--width) * 100vw);
}
#contact_banner .contact-link{
    background: var(--accent);
    /* color: #fff; */
    font-size: calc(30 / var(--width) * 100vw);
    padding: var(--padding-20) var(--padding-50);
    border-radius: calc(30 / var(--width) * 100vw);
    align-items: center;
    justify-content: space-around;
    width: 45%;
}
#contact_banner .contact-link span{
    color: #fff;
}
#contact_banner .contact-link img{
    width: calc(64 / var(--width) * 100vw);
    transition: .2s ease;
}
#contact_banner .contact-link:hover{
    opacity: 1;
}
#contact_banner .contact-link:hover img{
    transform: scale(1.2);
}

/* ==========================

top-page

===========================-*/

/* ===== MV ===== */
#front .fv-txt-w{
    flex-direction: row-reverse;
    padding: 0 calc(170 / var(--width) * 100vw);
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
#front .fv-w{
    padding-bottom: 300px;
}
#front .tate{
    gap: 1rem;
}
/* マスク部分 */
.mv-slide{
    width: 80%;
    -webkit-mask-image: url('../images/common/mv_mask.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: url('../images/common/mv_mask.svg');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}
.mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    z-index: 0;
    transition: opacity 1s ease-in-out;
}
.slideshow {
    position: relative;
    width: 100%;
    height: auto;
}
.thumbBtn {
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50vw;
}
.thumbBtn li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.thumbBtn li.active {
    background: var(--gray);
}
/* 追従イラスト */
.follow-illust .right-illust{
    position: fixed;
    width: 13%;
    right: 0;
    bottom: 3%;
    z-index: 99;
}
.follow-illust .left-illust{
    position: fixed;
    left: 0;
    width: 13%;
    bottom: 15%;
    z-index: 99;
}

/* ===== お知らせ ===== */
#front .info-w{
    padding: var(--padding-50);
    border-radius: calc(30 / var(--width) * 100vw);
}
#front .info-w .filter-buttons{
    display: flex;
    gap: calc(20 / var(--width) * 100vw);
}
.filter-buttons [data-filter="all"],
.filter-buttons [data-filter="shirayuri"],
.filter-buttons [data-filter="hibari"]{
    border: none;
    padding: var(--padding-10) var(--padding-20) var(--padding-10) calc((30 / var(--width) * 100vw) + var(--padding-20) + var(--padding-20));
    border-radius: 100vh;
    color: #fff;
    font-size: var(--font-size-mid);
    position: relative;
}
.filter-buttons [data-filter="all"]::before,
.filter-buttons [data-filter="shirayuri"]::before,
.filter-buttons [data-filter="hibari"]::before{
    content: "";
    width: calc(30 / var(--width) * 100vw);
    height: calc(30 / var(--width) * 100vw);
    display: block;
    position: absolute;
    left: var(--padding-20);
    top: calc(50% - (15 / var(--width) * 100vw));
}
.filter-buttons [data-filter="all"]::before{
    background-image: url(../images/common/button_icon_all.svg);
    background-size: 100% 100%;
}
.filter-buttons [data-filter="shirayuri"]::before{
    background-image: url(../images/common/button_icon_shirayuri.svg);
    background-size: 100% 100%;
}
.filter-buttons [data-filter="hibari"]::before{
    background-image: url(../images/common/button_icon_hibari.svg);
    background-size: 100% 100%;
}
.filter-buttons [data-filter="all"]{
    background: var(--gray);
}
.filter-buttons [data-filter="shirayuri"]{
    background: var(--shirayuri_color);
}
.filter-buttons [data-filter="hibari"]{
    background: var(--hibari_color);
}
.filter-buttons [data-filter="all"]:hover,
.filter-buttons [data-filter="shirayuri"]:hover,
.filter-buttons [data-filter="hibari"]:hover{
    opacity: .8;
}
#front button{
    cursor: pointer;
}
#front summary{
    gap: calc(40 / var(--width) * 100vw);
    padding: calc(30 / var(--width) * 100vw) var(--padding-20);
    border-bottom: solid 1px var(--gray);
    color: var(--corporate_color);
    position: relative;
    cursor: pointer;
}
#front details[open] summary::after{
    transform: rotate(90deg);
}
#front summary::after{
    content: "";
    width: calc(20 / var(--width) * 100vw);
    height: calc(20 / var(--width) * 100vw);
    display: block;
    background: var(--corporate_color);
    position: absolute;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    right: var(--padding-10);
    top: calc(50% - (10 / var(--width) * 100vw));
    transition: .3s;
}
#front summary .cat-all{
    color: var(--gray);
    font-size: var(--font-size-mid);
}
#front summary .cat-shirayuri{
    color: var(--shirayuri_color);
    font-size: var(--font-size-mid);
}
#front summary .cat-hibari{
    color: var(--hibari_color);
    font-size: var(--font-size-mid);
}
#front summary .date{
    font-family: "Roboto", sans-serif;
    font-size: var(--font-size-mid);
}
#front summary .ttl{
    font-size: var(--font-size-mid);
    width: 70%;
}
#front .content{
    padding: var(--padding-30);
    border-bottom: 1px solid var(--gray);
}
#front .content a{
    text-decoration: underline;
}
#front summary .ttl,
#front summary .date{
    color: var(--corporate_color);
}

/* ====== ごあいさつ ===== */
#greeting .bg_3{
    /* border-top-left-radius: 50%; */
    /* border-top-right-radius: 50%; */
    padding-bottom: calc(200 / var(--width) * 100vw);
    margin-top: calc(var(--padding-100) + 326px);
    position: relative;
    z-index: 1;
}
#greeting .bg_3::after{
    content: "";
    background-image: url(../images/common/greeting-bg.svg);
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: center top;
    position: absolute;
    top: -22%;
    left: 0;
    width: 100vw;
    height: 22%;
    z-index: -1;
}
#greeting .dot-center{
    text-align: center;
    margin-bottom: var(--padding-50);
}
#greeting .dot-center .en{
    margin-top: var(--padding-10);
}
.greeting-image{
    border-radius: calc(30 / var(--width) * 100vw);
    overflow: hidden;
    width: 60%;
    margin: 0 auto;
}
.greeting-illust{
    width: 80%;
    margin: 0 auto;
}
.greeting-w p{
    text-align: center;
    margin: var(--padding-50) auto;
}
/* イラストのスライダー */
.slider-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-top: calc(-145 / var(--width) * 100vw);
    margin-bottom: calc(145 / var(--width) * 100vw);
    position: relative;
    z-index: 1;
}
.slider-track {
    display: flex;
    gap: calc(30 / var(--width) * 100vw);
}
.slide {
    width: calc(290 / var(--width) * 100vw);
    flex-shrink: 0;
    border-radius: 100%;
}

/* ====== 施設紹介 ===== */
/*共通*/
.facility-content-w{
    position: relative;
    z-index: 1;
    padding: 6%;
    gap: 5%;
    justify-content: space-between;
    align-items: flex-end;
}
.facility-content-w::before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: calc(100% - 90px);
    background: #fff;
    left: 0;
    z-index: -1;
    top: calc(90 / var(--width) * 100vw);
    border-radius: calc(30 / var(--width) * 100vw);
    /* height: calc(100% - 70px);
    top: calc(70 / var(--width) * 100vw); */
}
.facility-content-w .left-cont img{
    border-radius: calc(30 / var(--width) * 100vw);
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* margin-bottom: 10%; */
    margin-bottom: 14%;
}
.facility-content-w .right-cont{
    width: 70%;
    gap: calc(40 / var(--width) * 100vw);
}
.facility-content-w a img{
    width: calc(30 / var(--width) * 100vw);
}
.facility-content-w a .sankaku{
    width: 1rem;
    height: 1rem;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.facility-content h3{
    align-items: center;
    gap: var(--padding-20);
    padding-bottom: 1rem;
}
.facility-content h3 img{
    width: calc(60 / var(--width) * 100vw);
}
.facility-content h3 .flex{
    gap: var(--padding-10);
}
.facility-content-w .right-cont h3 .min-txt{
    font-size: calc(20 / var(--width) * 100vw);
    line-height: 100%;
}
.facility-content-w .right-cont h3 .big-txt{
    font-size: calc(40 / var(--width) * 100vw);
    line-height: 100%;
}
.facility-content-w .right-cont a .link-txt{
    color: #fff;
}
.cont-s .left-cont::after{
    animation: flick-animation 3.5s infinite;
}
@keyframes flick-animation{
    0%{
        transform: translateY(-10px);
    }
    5%{
        transform: translateX(0);
    }
    10%{
        transform: translateY(-10px);
    }
    15%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}
.cont-h .left-cont::after{
    animation: flick-animation02 3.5s infinite;
}
@keyframes flick-animation02{
    0%{
        transform: translateX(0);
    }
    49%{
        transform: translate(0);
    }
    50%{
        transform: translateY(-10px);
    }
    55%{
        transform: translateX(0);
    }
    60%{
        transform: translateY(-10px);
    }
    65%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}
/* しらゆり */
.cont-s .left-cont{
    position: relative;
}
.cont-s .left-cont::after{
    content: "";
    display: block;
    background: url(../images/common/shirayuri-before.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: calc(205 / var(--width) * 100vw);
    height: calc(189 / var(--width) * 100vw);
    position: absolute;
    bottom: 0;
    right: 0;
}
.cont-s .left-cont img{
    border: var(--shirayuri_color) calc(10 / var(--width) * 100vw) solid;
}
.cont-s h3{
    border-bottom: var(--shirayuri_color) 7px dotted;
}
.cont-s .right-cont a{
    background: var(--shirayuri_color);
    padding:calc(15 / var(--width) * 100vw) calc(30 / var(--width) * 100vw);
    border-radius: 100vh;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    gap: calc(30 / var(--width) * 100vw);
}
.cont-s .right-cont a::before{
    background: url(../images/common/button_icon_shirayuri.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 2rem;
    top: calc(15 / var(--width) * 100vw);
}
/* ひばり */
.cont-h .left-cont{
    position: relative;
}
.cont-h .left-cont::after{
    content: "";
    display: block;
    background: url(../images/common/hibari-before.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: calc(190 / var(--width) * 100vw);
    height: calc(175 / var(--width) * 100vw);
    position: absolute;
    bottom: 0;
    right: 0;
}
.cont-h .left-cont img{
    border: var(--hibari_color) calc(10 / var(--width) * 100vw) solid;
}
.cont-h h3{
    border-bottom: var(--hibari_color) 7px dotted;
}
.cont-h .right-cont a{
    background: var(--hibari_color);
    padding:calc(15 / var(--width) * 100vw) calc(20 / var(--width) * 100vw);
    border-radius: 100vh;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    gap: calc(30 / var(--width) * 100vw);
}
.cont-h .right-cont a::before{
    background: url(../images/common/button_icon_hibari.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    left: 2rem;
    top: calc((15 / var(--width) * 100vw) + 1rem);
}
.cont-h .left-cont{
    order: 2;
}
.cont-h .right-cont{
    order: 1;
}

/* ====== 法人概要 ===== */
.corporate-w{
    gap: calc(30 / var(--width) * 100vw);
}
.table-w{
    background: #fff;
    border-radius: calc(30 / var(--width) * 100vw);
    padding: var(--padding-30) var(--padding-50);
}
.corporate_table{
    width: 100%;
    border-collapse: collapse;
}
.corporate_table a{
    text-decoration: underline;
}
.corporate_table th,
.corporate_table td{
    padding: var(--padding-30) var(--padding-10);
}
.corporate_table tr:not(:last-child) th,
.corporate_table tr:not(:last-child) td{
    border-bottom: 1px solid var(--gray);
}
.corporate_table th{
    font-size: var(--font-size-big);
    color: var(--corporate_color);
    text-align: left;
    width: 20%;
}

/* ====== お問い合わせフォーム ===== */
.form-w{
    gap: var(--padding-50);
}
.form-w .form_cont_w{
    gap: calc(30 / var(--width) * 100vw);
}
.form-w .form_cont_w p{
    text-align: center;
}
.form-w .form_cont_w .tel-w{
    background: var(--accent);
    border-radius: 100vh;
    padding: var(--padding-30) var(--padding-50);
    text-align: center;
    align-items: center;
    gap: calc(15 / var(--width) * 100vw);
    width: 80%;
    margin: 0 auto;
}
.form-w .form_cont_w .tel-w .time-txt{
    color: #fff;
}
.form-w .form_cont_w .tel-w .flex{
    align-items: center;
    gap: 1rem;
}
.form-w .form_cont_w .tel-w .flex .tel-txt{
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: calc(45 / var(--width) * 100vw);
}
.form-w .form_cont_w .tel-w .flex img{
    width: calc(45 / var(--width) * 100vw);
}
/* フォーム */
.input-form{
    background: #fff;
    border-radius: calc(30 / var(--width) * 100vw);
    padding: var(--padding-50) var(--padding-50);
}
.input-form small{
    color: var(--gray);
    font-size: 14px;
}
.form-w .form_cont_w form p{
    text-align: left;
    padding: var(--padding-30) 0;
    border-bottom: 1px solid var(--gray);
}
.form-w .form_cont_w form .last-check p,
.form-w .form_cont_w form p:nth-of-type(7){
    border-bottom: none;
}
.form-w .form_cont_w form .input-ttl{
    width: 25%;
    display: block;
    color: var(--corporate_color);
    font-size: var(--font-size-mid);
}
.form-w .form_cont_w form .last-check{
    width: fit-content;
    margin: 0 auto;
}
label:not(input[type="radio"]),
.form-w .form_cont_w form p:nth-of-type(3){
    display: flex;
    align-items: center;
}
.input-form .cont-area{
    width: 75%;
}
input::placeholder,
textarea::placeholder{
    color: var(--gray);
    font-size: .9rem;
    padding: 0 .5rem;
}
textarea{
    padding: 1rem;
}
input,
textarea{
    border: none;
    background: #F0F0F0;
}
.form-w form p span .wpcf7-radio{
    display: inline-block;
}
input[type="text"],
input[type="tel"],
input[type="email"]{
    border-radius: 100vh;
    height: 2.5rem;
    padding: 0 1rem;
    width: 100%;
}
textarea{
    border-radius: calc(30 / var(--width) * 100vw);
    width: 100%;
}
.form-w .form_cont_w form p .button{
    display: block;
    margin: 0 auto;
    background: var(--corporate_color);
    color: #fff;
    padding: 1rem 3rem;
    border-radius: 100vh;
    cursor: pointer;
}
.form-w .form_cont_w form p .button:hover{
    opacity: .8;
}
.wpcf7-spinner{
    display: none;
}
.wpcf7-not-valid-tip{
    font-size: .7rem;
}
.wpcf7-list-item label{
    gap: .5rem;
}
.wpcf7-list-item label a{
    text-decoration: underline;
}
input[type="radio"]{
    position: relative;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--corporate_color);
    border-radius: 50%;
    vertical-align: -2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="radio"]:checked:before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--corporate_color);
    content: "";
}

/* ==========================

レスポンシブ

===========================-*/
@media screen and (max-width: 1266px){
    #front .fv-w{
        padding-bottom: 250px;
    }
    /* ==========================
    トップ__施設紹介
    ===========================-*/
    .facility-content-w.cont-s .left-cont img{
        margin-bottom: 20%;
    }
}
@media screen and (min-width: 769px) and (max-width: 1182px){

    /* ==========================
    トップ__施設紹介
    ===========================-*/
    .facility-content-w.cont-s .left-cont img,
    .facility-content-w.cont-h .left-cont img{
        margin-bottom: 0;
    }
    .facility-content-w::before{
        display: none;
    }
    .facility-content-w{
        background: #fff;
        border-radius: calc(30 / var(--width) * 100vw);
        align-items: center;
    }
    .facility-content-w.cont-s{
        margin-bottom: 5%;
    }
}
/* ==========================

max-width: 1024px

===========================-*/
@media screen and (max-width: 1024px) and (min-width: 769px){
    :root{
        --width: 1024;

        --width-nomal: calc(800 / var(--width) * 100vw);
        --padding-100: calc(70 / var(--width) * 100vw);
        --padding-80: calc(50 / var(--width) * 100vw);
        --padding-50: calc(30 / var(--width) * 100vw);
        --padding-30: calc(20 / var(--width) * 100vw);
        --padding-20: calc(10 / var(--width) * 100vw);
        --padding-10: calc(5 / var(--width) * 100vw);

        --font-size-mid: clamp(15px, 2vw, 20px);
        --font-size-big: calc(25 / var(--width) * 100vw);
    }
    /* ==========================
    header
    ===========================-*/
    header{
        background-size: 100% 107%;
    }
    /* ==========================
    recruit-banner
    ===========================-*/
    #recruit_banner .midashi h3{
        font-size: calc(30 / var(--width) * 100vw);
    }
    #recruit_banner .cont .txt-w{
        margin-bottom: 0;
    }
    #recruit_banner .cont .txt-w p{
        width: 65%;
    }
    /* ==========================
    top
    ===========================-*/
    #front .fv-w{
        padding-bottom: 50px;
    }
    /* ====== お知らせ ===== */
    #front summary .ttl,
    #front summary .date,
    #front summary .cat-hibari,
    #front summary .cat-shirayuri,
    #front summary .cat-all{
        font-size: clamp(15px, 2vw, 20px);
    }
    #front summary{
        gap: calc(20 / var(--width) * 100vw);
    }
    #front summary .ttl{
        width: 65%;
    }
    /* ====== ごあいさつ ===== */
    #greeting .bg_3{
        margin-top: calc(var(--padding-100) + 200px);
    }
    /* ====== 法人概要 ===== */
    .corporate_table th{
        font-size: clamp(15px, 2vw, 20px);
    }
    /* ====== 問い合わせフォーム ===== */
    .form-w .form_cont_w form .input-ttl{
        font-size: clamp(15px, 2vw, 20px);
    }
}
/* ==========================

max-width: 768px

===========================-*/
@media screen and (max-width: 768px){
    :root{
        --width: 768;

        --width-nomal: calc(600 / var(--width) * 100vw);
        --padding-100: calc(50 / var(--width) * 100vw);
        --padding-80: calc(40 / var(--width) * 100vw);
        --padding-50: calc(30 / var(--width) * 100vw);
        --padding-30: calc(20 / var(--width) * 100vw);
        --padding-20: calc(10 / var(--width) * 100vw);
        --padding-10: calc(5 / var(--width) * 100vw);

        --font-size-mid: calc(20 / var(--width) * 100vw);
        --font-size-big: calc(25 / var(--width) * 100vw);
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }

    /* ==========================
    ハンバーガー🍔
    ===========================-*/
    /* チェックされている時にbodyにクラスを付与してスクロール制御 */
    .no-scroll{
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    header{
        position: sticky;
        top: 0;
        margin-bottom: -11%;
        padding-bottom: 11%;
    }
    header .sp_nav{
        justify-content: space-between;
        display: flex;
        align-items: center;
        padding: .5rem 5%;
        background: #fff;
    }
    header .sp_nav .menu-btn{
        display: flex;
        flex-direction: column;
        width: fit-content;
        gap: .7rem;
    }
    header .sp_nav .menu-btn span{
        width: 4rem;
        height: 5px;
        background: var(--corporate_color);
        border-radius: 100vh;
    }
    #menu-btn{
        display: none;
    }
    /* 3本線の動き */
    #menu-btn ~ .menu-btn span{
        transition: .3s;
    }
    #menu-btn:checked ~ .menu-btn span{
        transition: .3s;
    }
    #menu-btn ~ .menu-btn.rotate{
        transition: .4s;
        transform: rotate(0);
    }
    #menu-btn:checked ~ .menu-btn.rotate{
        transform: rotate(180deg);
        transition: .4s;
    }
    #menu-btn:checked ~ .menu-btn span:nth-of-type(1){
        transform: rotate(45deg) translateY(12px) translateX(13px);
        background: var(--accent);
    }
    #menu-btn:checked ~ .menu-btn span:nth-of-type(2){
        opacity: 0;
    }
    #menu-btn:checked ~ .menu-btn span:nth-of-type(3){
        transform: rotate(-45deg) translateY(-10px) translateX(10px);
        background: var(--accent);
    }
    /* メニュー */
    header .sp_nav ol{
        gap: var(--padding-50);
        position: fixed;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        top: 15%;
        transition: .4s;
        z-index: 9999;
        padding: 10%;
    }
    header .sp_nav ol::before{
        content: "";
        background: url(../images/common/sp_nav_illust.svg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 35%;
        height: 42%;
        position: absolute;
        bottom: 17%;
        right: -5%;
    }
    header .sp_nav ol li a img{
        width: 3rem;
        height: 3rem;
        object-fit: contain;
    }
    header .sp_nav ol li a{
        gap: 1rem;
        align-items: center;
    }
    header .sp_nav ol li a span,
    header .sp_nav ol li a{
        font-size: var(--font-size-big);
    }
    #menu-btn:checked ~ ol{
        right: 0;
        transition: .4s;
    }

    /* ==========================
    recruit-banner
    ===========================-*/
    #recruit_banner .cont{
        flex-direction: column;
        align-items: center;
    }
    #recruit_banner .cont .txt-w{
        position: unset;
    }
    #recruit_banner .cont img{
        width: 100%;
    }
    #recruit_banner .cont .txt-w{
        margin-top: -15%;
    }
    #recruit_banner .cont .txt-w p,
    #recruit_banner .cont .txt-w a{
        margin: 0 auto;
    }

    /* ==========================
    contact-banner
    ===========================-*/
    #contact_banner .content-w .cont-in{
        flex-direction: column;
        gap: var(--padding-50);
    }
    #contact_banner .tel-cont a{
        font-size: calc(60 / var(--width) * 100vw);
        line-height: 100%;
    }
    #contact_banner .tel-cont img{
        width: calc(50 / var(--width) * 100vw);
    }
    #contact_banner .contact-link{
        width: 100%;
        flex-direction: row-reverse;
        padding: var(--padding-50);
    }
    #contact_banner .contact-link span{
        font-size: var(--font-size-big);
    }
    #contact_banner .tel-cont .hours{
        font-size: var(--font-size-mid);
    }

    /* ==========================
    footer
    ===========================-*/
    footer .nav-w{
        flex-direction: column;
        gap: var(--padding-50);
    }
    footer::before{
        height: calc(140 / var(--width) * 100vw);
    }

    /* ==========================
    top-page
    ===========================-*/
    .mv-slide{
        -webkit-mask-image: url('../images/common/sp_mask.svg');
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: cover;
        mask-image: url('../images/common/sp_mask.svg');
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
    }
    #front .fv-w{
        padding-bottom: 250px;
    }
    .thumbBtn{
        bottom: -94vw;
    }
    #front .fv-txt-w{
        justify-content: space-between;
        padding: 20% 5% 0;
    }
    .mv-slide{
        width: 90%;
    }
    /* 追従イラスト */
    .follow-illust{
        position: relative;
    }
    .follow-illust .right-illust{
        width: 20%;
        bottom: -2%;
    }
    .follow-illust .left-illust{
        width: 18%;
        bottom: unset;
        top: 17%;
    }
    /* ====== おしらせ ===== */
    #front summary{
        flex-wrap: wrap;
        gap: var(--padding-10);
    }
    #front summary .ttl{
        width: 90%;
    }
    /* ====== ごあいさつ ===== */
    #greeting .bg_3::after{
        top: -17%;
    }
    .greeting-image{
        width: 100%;
    }
    .greeting-illust{
        width: 100%;
    }
    /* スライド */
    .slide{
        width: calc(190 / var(--width) * 100vw);
    }
    .slider-container{
        margin-bottom: calc(50 / var(--width) * 100vw);
        margin-top: calc(-95 / var(--width) * 100vw);
    }
    /* ====== 施設紹介 ===== */
    .facility-content-w{
        flex-direction: column;
    }
    .facility-content-w .right-cont{
        width: 100%;
    }
    .facility-content h3 .flex{
        flex-direction: row;
        align-items: center;
    }
    .cont-s .right-cont a,
    .cont-h .right-cont a{
        margin: 0 auto;
    }
    .facility-content h3{
        width: fit-content;
        margin: 0 auto;
    }
    .cont-h .right-cont{
        order: 2;
    }
    /* ====== 法人概要 ===== */
    .corporate_table th{
        font-size: var(--font-size-mid);
    }
    /* ====== 問い合わせ ===== */
    .form-w .form_cont_w .tel-w .flex .tel-txt{
        line-height: 100%;
    }
    .form-w{
        gap: var(--padding-30);
    }
}
/* ==========================

max-width: 480px

===========================-*/
@media screen and (max-width: 480px){
    :root{
        --width: 480;

        --width-nomal: calc(450 / var(--width) * 100vw);
        --padding-100: calc(50 / var(--width) * 100vw);
        --padding-80: calc(40 / var(--width) * 100vw);
        --padding-50: calc(30 / var(--width) * 100vw);
        --padding-30: calc(20 / var(--width) * 100vw);
        --padding-20: calc(10 / var(--width) * 100vw);
        --padding-10: calc(5 / var(--width) * 100vw);

        --font-size-mid: calc(18 / var(--width) * 100vw);
        --font-size-big: calc(20 / var(--width) * 100vw);
    }
    .tate span{
        font-size: calc(20 / var(--width) * 100vw);
        letter-spacing: .4rem;
    }
    h2{
        font-size: calc(35 / var(--width) * 100vw);
    }
    h2.dot .en{
        line-height: 100%;
        margin-top: 5px;
    }
    h2.dot::before{
        top: calc(50% - .8rem);
        width: .7rem;
        height: .7rem;
    }
    .en{
        font-size: calc(20 / var(--width) * 100vw);
    }
    table tr td{
        font-size: 14px;
    }
    /* ==========================
    ハンバーガー🍔
    ===========================-*/
    header .sp_nav .logo-img{
        width: 50%;
    }
    header .sp_nav .menu-btn span{
        width: 3rem;
        height: 3px;
    }
    header .sp_nav ol{
        top: 12%;
    }
    header .sp_nav ol li a img{
        width: 2.5rem;
        height: 2.5rem;
    }

    /* ==========================
    header
    ===========================-*/
    header{
        background: url(../images/common/sp_header_bg.svg);
        background-repeat: no-repeat;
        background-size: 100%;
    }

    /* ==========================
    recruit-banner
    ===========================-*/
    #recruit_banner .midashi{
        margin: 0 auto;
        position: relative;
    }
    #recruit_banner .midashi h3{
        font-size: calc(25 / var(--width) * 100vw);
    }
    #recruit_banner .cont .txt-w p{
        width: 100%;
    }
    #recruit_banner .cont .txt-w a img{
        width: 1.5rem;
    }
    #recruit_banner .cont .txt-w{
        margin-bottom: unset;
    }
    #recruit_banner .cont .txt-w a .sankaku{
        width: .7rem;
        height: .7rem;
    }
    #recruit_banner .cont .txt-w a{
        padding: calc(15 / var(--width) * 100vw) var(--padding-30);
        width: 65%;
    }

    /* ==========================
    contact-banner
    ===========================-*/
    #contact_banner .tel-cont a{
        font-size: calc(50 / var(--width) * 100vw);
    }
    #contact_banner .contact-link span{
        font-size: var(--font-size-mid);
    }
    #contact_banner .tel-cont .hours,
    #contact_banner .content-w p{
        font-size: unset;
    }

    /* ==========================
    footer
    ===========================-*/
    footer .nav-w{
        padding: var(--padding-50) var(--padding-30);
    }
    footer .link-nav{
        flex-direction: column;
    }
    footer::before{
        background-size: 130% 100%;
        top: calc(-85 / var(--width) * 100vw);
        background-position: center;
    }
    footer .corporation_nav .nav_logo{
        width: 50%;
    }

    /* ==========================
    トップ
    ===========================-*/
    /* ====== MV ===== */
    #front .fv-w{
        padding-bottom: 0;
        margin-top: 5%;
    }
    #front .tate{
        gap: .5rem;
        writing-mode: unset;
        /* width: fit-content; */
    }
    #front .fv-txt-w{
        flex-direction: column;
        justify-content: space-between;
        height: 105vw;
    }
    .tate span{
        font-size: calc(23 / var(--width) * 100vw);
        letter-spacing: .1rem;
        width: fit-content;
    }
    #front .fv-txt-w{
        padding: 10% 5% 0;
    }
    .follow-illust{
        display: none;
    }
    /* スライド */
    .mv-slide{
        width: 100%;
    }

    /* ====== お知らせ ===== */
    .top_info{
        margin-top: 10%;
    }
    #front .info-w .filter-buttons{
        flex-wrap: wrap;
    }
    #front button{
        width: 45%;
        padding: var(--padding-20) var(--padding-20) var(--padding-20) calc((30 / var(--width) * 100vw) + var(--padding-20) + var(--padding-20));
    }
    .filter-buttons.p_50_bottom{
        padding-bottom: 0;
    }
    #front summary::after{
        width: calc(15 / var(--width) * 100vw);
        height: calc(15 / var(--width) * 100vw);
    }
    #front summary .ttl{
        font-size: unset;
    }

    /* ====== あいさつ ===== */
    #greeting .bg_3{
        margin-top: calc(var(--padding-10) + 150px);
        padding-bottom: calc(140 / var(--width) * 100vw);
    }
    #greeting .bg_3::after{
        top: -11%;
    }

    /* ====== 施設紹介 ===== */
    .facility-content-w::before{
        height: calc(100% - 60px);
    }
    .cont-s .left-cont::after{
        width: calc((205 / var(--width) * 100vw) / 1.5);
        height: calc((189 / var(--width) * 100vw) / 1.5);
        bottom: 3%;
    }
    .facility-content-w.cont-h{
        margin-top: 10%;
    }
    .cont-h .left-cont::after{
        width: calc((190 / var(--width) * 100vw) / 1.5);
        height: calc((175 / var(--width) * 100vw) / 1.5);
        bottom: 3%;
    }
    .facility-content-w.cont-h h3{
        gap: var(--padding-30);
    }
    .facility-content-w.cont-h h3 .flex{
        flex-direction: column;
        align-items: start;
    }
    .facility-content-w .right-cont h3 .big-txt{
        line-height: 100%;
    }
    /* ====== 法人概要 ===== */
    .corporate_table th, .corporate_table td{
        display: block;
        width: 100%;
    }
    .corporate_table tr:not(:last-child) th{
        border: none;
    }
    /* ====== 問い合わせフォーム ===== */
    .form-w .form_cont_w .tel-w{
        width: 100%;
    }
    .form-w .form_cont_w .tel-w .flex .tel-txt{
        font-size: calc(40 / var(--width) * 100vw);
    }
    .form-w .form_cont_w .tel-w{
        gap: 0;
    }

}