@charset "utf-8";

*{
    list-style: none;
    text-decoration: none;
    color: inherit;
    font-family: "Noto Sans JP";
    box-sizing: border-box;
    /* border: 1px dotted red; */
}


/* 左から */

.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

.biz-udgothic-regular,
dd{
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  


.sp-only{
    display: none;
}

.yellow-leaf{
    width: 189.27px;
    height: 262.41px;
}
.yellow-leaf img{
    width: 100%;
    height: auto;
}

body{
    background-color: #F8F8E6;
}


h3{
    font-size:2.1875rem;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-style: normal;
    color: #00A63C;
    margin-top: 30px;

}

p{
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
    display: block;
    height: auto;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.875rem;
    color: #6D7B52;
}



.grid{
    display: grid;
}

.flex{
    display: flex;
}

.aic{
    align-items: center;
}

.jcc{
    justify-content: center;
}

.sb{
    justify-content: space-between;
}



/* ヘッダーからメインイメージまで */
header{
    width: 1208px;
    height: auto;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}
.header-logo{
    max-width: 301px;
}
.header-logo img{
    width: 100%;
    height: auto;
}

header nav{
    font-size: 0.9375rem;
    align-items: center;
}

header nav ul li{
    margin-right: 3.0625rem;
}



.gnavi li a{
    display: block;
    padding:10px 0;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}
.gnavi li.drop-down{
    margin-right: 0;
    margin-bottom:20px;
}

/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/
.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
}

.gnavi li.current a,
li.is-current a,
.gnavi li a:hover{
	color:#00A63C;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#00A63C;
    /*アニメーションの指定*/
    transition: all .5s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.is-current a::after,
li.is-current a,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
    pointer-events: none;
}

 
/*2階層目以降は横並びにしない*/

nav ul li{
	position: relative;
}
.gnavi li a.drop-a{
	padding:10px 0;
}
.gnavi li a:hover{
	color:#00A63C;	
}


/*下の階層を持っているulの指定*/
.gnavi li.has-child ul{
    /*絶対配置で位置を指定*/
	position: absolute;
	left:-48px;
	top:41px;
	z-index: 4;
    /*形状を指定*/
	background:#E8E578;
	width:180px;
    border-radius: 5px;
    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s;
    text-align: center;
}

/*hoverしたら表示*/
.gnavi li.has-child:hover > ul,
.gnavi li.has-child ul li:hover > ul,
.gnavi li.has-child:active > ul,
.gnavi li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
  padding: 0;
}
.hero-area{
    position: relative;
    width: 1208px;
    height: auto;
    margin: 11px auto 0;
}

.hero-area img.hero-img{
    width: 100%;
    height: auto;
}

.hero-area .mv-ttl{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
}

.heroarea-wrap{
    position:relative;
    width: 1208px;
    height: auto;
    margin: 0 auto;
}
.heroarea-wrap .mv-ttl{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 500px;
    height: 290px;
    margin: 0;
}



/* セクションの共通指定 */
section{
    width: 975px;
    height: auto;
    margin: 0 auto;
}

/* top-greetingセクションの指定 */

.top_greeting{
    margin-top: 142px;
}
.top_greeting h3{
    margin-top: 52px;
    margin-bottom: 60px;
}
.top_greeting p{
    margin-bottom: 2.519375rem;

}

.top_greeting .top_greeting-img{
    position: relative;
}
.top_greeting .top_greeting-img img{
    width: 100%;
}

.top_greeting .top_greeting-img .right-leaf{
    position: absolute;
    right: -155px;
    top: 602px;
}
.top_greeting .about{
    margin-top: 60px;
    grid-template-columns: 384px 591px;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "h1-area text-area"
    "h2-area text-area";
}

.top_greeting .about h2{
    grid-area: h1-area;
    margin: 0;
    margin-top: 10px;
}
.top_greeting .about h3{
    margin: 0;
    margin-top: 10px;
    grid-area: h2-area;
}
.top_greeting .about p{
    grid-area: text-area;
}


section a.page-link{
    position: relative;
    display: inline-flex;
    margin: 0 auto;
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 700;
    align-items: center;
    color: #6D7B52;

}

section a.page-link:hover{
	color:#00A63C;
}

section a.page-link::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#00A63C;
    /*アニメーションの指定*/
    transition: all .5s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}
.recruit-bnr a.page-link::after{
    width: 42%;
}


/*hoverの設定*/
section a.page-link:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/* トップサービスメニュー */
.top_service{
    position: relative;
    margin-top: 14.1875rem;
    background-color: #E7D4A5;
    width: 100%;
    border-radius: 2%;
}

.top_service h2{
    margin-bottom: 4.168125rem;
}
.top_service .grid{
    width: 975px;
    margin: 0 auto 34px;
    padding-top: 107px;
    grid-template-columns: 384px 591px;
    grid-template-rows: 1fr 92px;
    grid-template-areas: 
    "h1-area brank-area"
    "h2-area text-area";
}
.top_service .grid h2{
    grid-area: h1-area;
}
.top_service .grid h3{
    margin: 0;
    grid-area: h2-area;
}

.top_service .grid p{
    grid-area: text-area;
}

.top_service-menu{
    position: relative;
    width: 975px;
    margin: 0 auto;
    padding-bottom: 118px;
    align-items: center;
    flex-wrap: wrap;
    gap: 37px;
}

.top_service-menu .service{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
}

.top_service-menu .service .service-img{
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 3px 3px 3px rgba(0,0,0,.6);
}

.top_service-menu .service a{
    margin-top: 14px;
}
.top_service-menu .service a img{
    margin-left: 1vw;
}
.top_service .left-leaf{
    position: absolute;
    bottom: 61px;
    left: -155px;
}
/* 採用情報バナー？ */
.recruit-bnr{
    position: relative;
    margin-top: 9.375rem;
    margin-bottom: 100px;
}




.recruit-bnr h3{
    margin: 2.4375rem auto 3.625rem;
}

.recruit-bnr a{
    margin-top: 2.125rem;
}

.recruit_bnr-img{
    width: 975px;
}

.recruit_bnr-img img{
    width: 100%;
}

.recruit-bnr .grid{
    grid-template-columns: 384px 591px;
    grid-template-rows: 112px 92px 49px;
    grid-template-areas: 
    "h1-area brank-area"
    "h2-area text-area"
    "link-area text-area";
    margin-top: 42.89px;
    grid-row-gap: 6px;
}
.recruit-bnr .grid h2{
    grid-area: h1-area;
    margin: 0;
}

.recruit-bnr .grid h2 img{
    width: 271.62px;
}
.recruit-bnr .grid h3{
    margin: 0;
    grid-area: h2-area;
}
.recruit-bnr .grid a{
    margin: 0;
    grid-area: link-area;
}

.recruit-bnr .grid p{
    grid-area: text-area;
}

.recruit-bnr .right-leaf{
    position: absolute;
    bottom: 213px;
    right: -93px;
}

/* お知らせ＆インスタ */
.news-insta{
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 11.581875rem;
    background-color: #E7D4A5;
    padding: 8.375rem 0;
    border-radius: 34px;
    z-index: 2;
}

.news-insta h3{
    font-size:2.1875rem;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-style: normal;
}
.news-insta .news-insta_wrap{
    position: relative;
    width: 975px;
    margin: 0 auto;
    height: auto;
    justify-content: space-between;
}

.news-insta .news-insta_wrap dl{
    width: 450px;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 2.25rem 1.4375rem;
    margin-bottom: 2.375rem;
}

.insta{
    width: 350px;
}

.insta iframe{
    border:none;
    overflow:hidden;
    border-radius: 10px;
}
.news-insta_wrap .yellow-leaf{
    position: absolute;
    bottom: -98px;
    left: -142px;
    z-index: 1;
}

/* footer */
footer{
    position: relative;
    width: 100%;
    height: 275px;
    background-color: #6D7B52;
}
footer .footer_inner-wrap{
    width: 975px;
    height: 275px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

footer .logo-add{
    flex-direction: column;
}

footer .logo-add p{
    font-size:1rem;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
}

footer nav{
    margin-top: -90px;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

footer nav ul li{
    text-align: left;
    padding-left: 3.0625rem;
}

footer nav ul li ul{
    padding: 0;
}
footer nav ul li li{
    padding: 10px 0 0;
    align-items: left;
    text-align: left;
    font-weight: 300;
}

footer .top{
    position: absolute;
    right: 80px;
    bottom: 40px;
}
footer li{
    flex-direction: column;
    align-items: left;
}
/* お問い合わせフォーム */

.alert-danger{
    color: tomato;
}

#thanks .contact,
#confirm .contact,
#error .contact{
    margin-top: 20vw;
}


.contact h1{
    padding-top: 100px;
}

.contact h2{
    margin-top: 120px;
}

.contact p{
    width: 950px;
    margin: 0;
}

.contact form{
    margin-top: 100px;
}

.contact .form-group{
    margin-top: 39px;
}

.contact .contact-radio{
    font-size: 15px;
    font-weight: 500;
    width: 600px;
    justify-content: space-between;
}

.contact label.col-form-label{
    font-family:"Noto Sans Jp";
    font-size: 17px;
    font-weight: 600;
    width: 375px;
}
.contact input.form-control{
    font-family:"Noto Sans Jp";
    font-size: 15px;
    padding: 15px;
    width: 600px;
    border: none;
    border-radius: 10px;
}

.contact textarea{
    width: 600px;
    border: none;
}
.contact .badge-danger{
    background-color: tomato;
    color: #fff;
    padding: 3px 5px;
    border-radius: 10px;
    font-size: 15px;
    font-family:"Noto Sans Jp";
}

.btn-info{
    padding: 15px;
    border: none;
    background-color: #DDA848;
    color: #fff;
    border-radius: 10px;
}

.btn-primary{
    display: block;
    width: 200px;
    margin: 75px auto;
    background-color: #DDA848;
    color: #fff;
    text-align: center;
    padding: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.tac{
    text-align: center;
}

/********** スマホ対応 ************/
@media (max-width:600px){
    .pc-only{
        display: none;
    }
    .sp-only{
        display: block;
    }
    /* Navbar & Navmenu color */
    .hamburger {
        display: block;
        height: 60px;
        margin-left: auto;
        position: relative;
        z-index: 10;
        width: 60px;
        border: none;
        background-color: transparent;
    }
    .hamburger.-active .hamburger__line {
        background-color: transparent;
    }
    .hamburger.-active .hamburger__line::before {
        top: 0;
        transform: rotate(45deg);
    }
    .hamburger.-active .hamburger__line::after {
        top: 0;
        transform: rotate(-45deg);
    }
    .hamburger.-active .hamburger__text::before {
      content: '閉じる';
    }
    .hamburger__line {
        display: block;
        height: 2px;
        position: absolute;
        top: 6.133333333333333 vw;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        background-color: #6D7B52;
        transition: 0.4s;
    }
    .hamburger__line:before,
    .hamburger__line:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        background-color: #6D7B52;
        transition: inherit;
    }
    .hamburger__line:before {
        top: -1.6vw;
    }
    .hamburger__line:after {
        top: 1.6vw;
    }
    .hamburger__text {
        position: absolute;
        bottom: -2vw;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    /* .hamburger__text::before {
        content: "メニュー";
        text-align: center;
        color: #172e59;
        font-size: 10px;
        font-weight: 900;
    } */
    .header {
    position: fixed;
      width: 100vw;
      height: 14vw;
      z-index: 10;
      top: 0;
      background-color: #F7F7ED;
    }

    .head-logo{
        margin-left: 3vw;
    }

    .header__nav-area {
        position: fixed;
        top: 0;
        left: -100%;
        z-index: 9;
        height: 100vh;
        width: 100vw;
        visibility: hidden;
        padding-top: 60px;
        background-color: #F8F8E6;
        transition: 0.4s;
    }
    .header__nav-area.-active {
        left: 0;
      visibility: visible;
    }
    .global-navigation {
        position: relative;
        padding-top: 40px;
        padding-right: 25px;
        padding-bottom: 120px;
        padding-left: 25px;
    }
    .global-navigation .tel-sp{
        position: absolute;
        top: -16vw;
        left: 0;
        width: 18vw;

    }
    .global-navigation .tel-sp img{
        width: 100%;
    }
    .global-navigation__list > li {
        padding-bottom: 20px;
        border-bottom: 2px solid #e7e9ee;
    }
    .global-navigation__list > li + li {
      margin-top: 20px;
    }
    .global-navigation__link {
      display: flex;
        align-items: center;
        justify-content: space-between;
        color: #00A63C;
        font-weight: 900;
        transition: color 0.4s;
        font-size: 0.875rem;
    }
    .global-navigation__link.-accordion {
        position: relative;
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        padding: 0;
    }
    .global-navigation__link.-accordion::after {
        content: '';
        display: block;
        height: 12px;
        position: absolute;
        top: 50%;
        right: 5px;
        width: 2px;
        background-color: #00A63C;
        transform: translateY(-50%);
        transition: transform 0.4s;
    }
    .global-navigation__link.-accordion::before {
        content: '';
        display: block;
        height: 2px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 12px;
        background-color: #00A63C;
        transform: translateY(-50%);
        
    }
    .global-navigation__link.-active::after {
      transform: translateY(-50%) rotate(-90deg);
    }
    .accordion {
        height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: 0.4s;
    }
    .accordion.-active {
        height: auto;
        padding-top: 30px;
        visibility: visible;
    }
    .accordion__list li {
        font-size: 0.75rem;
    }
    .accordion__list li + li {
         margin-top: 21px;
    }
    .accordion__link {
        color: #6D7B52;
    }

    .mail-tel{
        display: flex;
        width: 100%;
        justify-content: center;
        column-gap: 3vw;
    }
}

@media (max-width:600px){
    h2{
        font-size: 5.8666vw;
        font-family: "kinuta-maruminold-stdn", serif;
        font-weight: 400;
        font-style: normal;
        text-align: center;
    
    }
    
    p{
        display: block;
        width: 90vw;
        height: auto;
        margin: 0 auto;
        font-size: 3.733333333333334vw;
    }
    
}

@media (max-width:600px){
    section{
        width: 100%;
    }
}

.head-logo img{
    width: 100%;
}

@media (max-width:600px){
    header{
        width: 90vw;
        height: 8vw;
        margin: 0 auto;
    }

    .head-logo img{
        width: 45%;
    }
}
    
@media (max-width:600px){
    .hero-area{
        position: relative;
        width: 96vw;
        height: 89vw;
        margin: 14vw auto 0;
        border-radius: 5px;
        overflow: hidden;

    }
}
@media (max-width:600px){
    

    .hero-area{
        position:relative;
        width: 96vw;
        height: 89vw;
        margin: 14vw auto 0;
    }
    .hero-area .mv-ttl{
        width: 60vw;
        position: absolute;
        top: 54vw;
        left: 0;
        z-index: 5;
    }
    
    .hero-area .mv-ttl img{
        width: 100%;
        height: auto;
    }
    .heroarea-wrap{
        position:relative;
        width: 96vw;
        height: 89vw;
        margin: 14vw auto 0;
    }
    .heroarea-wrap .mv-ttl{
        width: 60vw;
        position: absolute;
        top: 54vw;
        left: 0;
        z-index: 5;
    }

    .heroarea-wrap .mv-ttl img{
        width: 100%;
        height: auto;
    }
}


/* greetinngセクション */
@media (max-width:600px){
    .top_greeting{
        margin-top: 5vw;
    }
    .top_greeting h3{
        width: 100%;
        margin: 3vw 0;
    }
    .top_greeting img{
        width: 100%;
    }.top_greeting .about{
        margin: 0 auto;
        grid-template-columns: 300px;
        grid-template-rows: 23vw 16vw 1fr;
        grid-template-areas: 
        "h1-area"
        "h2-area"
        "text-area";
        place-content: center;
        place-items: center;
    }
    
    .top_greeting .about h2{
        grid-area: h1-area;
        margin: 0;
        margin-top: 10px;
    }
    
    .top_greeting .about h2 img{
        width: 30vw;
    }
    .top_greeting .about h3{
        margin: 0;
        margin-top: 10px;
        grid-area: h2-area;
        font-size: 1.375rem;
    }
    .top_greeting .about p{
        grid-area: text-area;
        width: 100%;
    }

    .top_greeting a.page-link{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 14px;
        left: 28vw;
    }
    .top_greeting .top_greeting-img .right-leaf{
        position: absolute;
        right: 0;
        top: 180vw;
        width: 20vw;
        z-index: 10;
    }
    .top_service .left-leaf{
        position: absolute;
        width: 13vw;
        bottom: 0;
        left: -10vw;
    }
}





/* serviceセクション */
@media (max-width:600px){
    .top_service{
        margin-top: 5vw;
        border-radius: 5px;
    }

    .top_service h2{
        width: 40vw;
        margin: 0 auto;
    }
    .top_service h2 img{
        width: 100%;
    }

    .top_service h3{
        width: 90vw;
        margin: 3vw auto;
    }
    .top_service img{
        width: 100%;

    }
    .top_service .grid{
        width: 80vw;
        margin: 0 auto;
        padding-top: 12vw;
        grid-template-columns: 80vw;
        grid-template-rows: 23vw 16vw 1fr;
        grid-template-areas: 
        "h1-area"
        "h2-area"
        "text-area";
    }
    .top_service .grid h2{
        grid-area: h1-area;
    }
    .top_service .grid h3{
        margin: 0;
        grid-area: h2-area;
        width: 100%;
        font-size: 1.375rem;
    }
    
    .top_service .grid p{
        grid-area: text-area;
        width: 100%;
    }

    a.page-link img{
        width: 7vw;
    }
    .top_service-menu{
        width: 80vw;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10vw;
    }
    
    .top_service-menu .service{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .top_service-menu .service a{
        font-size: 14px;
    }
}

/* recruit */
@media (max-width:600px){
    .recruit-bnr{
        margin: 5vw auto 0;
    }
    .recruit-bnr h2{
        width: 90vw;
        margin: 3vw auto;
    }
    .recruit-bnr img{
        width: 100%;
    }

    a.page-link img{
        width: 6vw;
    }
    .recruit-bnr{
        position: relative;
    }
    
    
    
    
    .recruit-bnr h3{
        margin: 2.4375rem auto 3.625rem;
        font-size: 1.375rem;
    }
    
    .recruit-bnr a{
        margin-top: 2.125rem;
    }
    
    .recruit_bnr-img{
        width: 90vw;
        margin: 0 auto;
    }
    
    .recruit_bnr-img img{
        width: 100%;
    }
    
    .recruit-bnr .grid{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: 19vw 41vw 12vw 1fr 10vw;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "text-area"
        "link-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
        padding: 20vw 0;
    }
    .recruit-bnr .grid h2{
        grid-area: h1-area;
        margin: 0 auto;
    }
    .recruit-bnr .grid .recruit_bnr-img{
        grid-area: img-area;
    }
    
    .recruit-bnr .grid h2 img{
        width: 40vw;
    }
    .recruit-bnr .grid h3{
        margin: 0;
        grid-area: h2-area;
    }
    .recruit-bnr .grid a{
        margin: 0 auto;
        grid-area: link-area;
    }
    
    .recruit-bnr .grid p{
        grid-area: text-area;
    }
    
    .recruit-bnr .right-leaf{
        position: absolute;
        bottom: 8vw;
        right: 0;
    }
    .recruit-bnr .right-leaf img{
        width: 20vw;
    }
}


/* お知らせ＆インスタ */
@media (max-width:600px){

    .news-insta{
        margin-top: 10vw;
        padding: 10vw 0;
        border-radius: 5px;
    }
    .news-insta h3{
        font-size: 5.8666vw;
        font-family: "kinuta-maruminold-stdn", serif;
        font-weight: 400;
        font-style: normal;
    }
    .news-insta .news-insta_wrap{
        width: 90vw;
        margin: 0 auto;
        height: auto;
        flex-direction: column;
        justify-content: space-between;
    }
    .news-insta .news-insta_wrap .yellow-leaf{
        width: 20vw;
        bottom: -54vw;
        left: -10vw;
        z-index: -1;
    }
    .news-insta .news-insta_wrap dl{
        width: 90vw;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
        padding: 2.25rem 1.4375rem;
        margin-bottom: 2.375rem;
    }

    .insta{
        width: 90vw;
    }
    .insta iframe{
        border:none;
        overflow:hidden;
        border-radius: 10px;
    }
}

/* お問い合わせフォーム */
@media (max-width:600px){


    .contact h2{
        padding-top: 10vw;
        width: 90vw;
        margin: 0 auto;
        text-align: center;
    }

    .contact h2 img{
        width: 50vw;
    }
    .contact h3{
        margin: 0 auto;
        margin-top: 20vw;
        width: 90vw;
    }
    
    .contact p{
        width: 90vw;
        margin: 0 auto;
    }
    
    .contact form{
        margin-top: 100px;
        width: 90vw;
        margin: 0 auto;
    }
    
    .contact .form-group{
        margin-top: 39px;
        flex-direction: column;
        align-items: start;
    }
    
    .contact .contact-radio{
        font-size: 4vw;
        font-weight: 500;
        width: 90vw;
        flex-wrap: wrap;
        row-gap: 4vw;
        justify-content: space-between;
    }
    
    .contact label.col-form-label{
        font-size: 5vw;
        width: 90vw;
        margin-bottom: 3vw;
    }
    .contact input.form-control{
        font-size: 15px;
        padding: 15px;
        width: 90vw;
        border: none;
        border-radius: 10px;
    }
    
    .contact textarea{
        width: 90vw;
        border: none;
    }
    .contact .badge-danger{
        background-color: tomato;
        color: #fff;
        padding: 3px 5px;
        border-radius: 10px;
        font-size: 15px;
    }
    
    .btn-info{
        padding: 15px;
        border: none;
        background-color: #DDA848;
        color: #fff;
        border-radius: 10px;
    }
    
    .btn-primary{
        display: block;
        width: 200px;
        margin: 75px auto;
        background-color: #DDA848;
        color: #fff;
        text-align: center;
        padding: 15px;
        border: none;
        border-radius: 10px;
    }
    
    .tac{
        text-align: center;
    }
    
}
  /* footer */
@media (max-width:600px){ 
footer{
    position: relative;
    width: 100%;
    height: 275px;
    background-color: #6D7B52;
}
footer .footer_inner-wrap{
    width: 90vw;
    height: 275px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

footer .footer_inner-wrap .logo{
    width: 40vw;
}

footer .footer_inner-wrap .logo img{
    width: 100%;
    height: auto;
}

footer nav{
    margin-top: -90px;
    font-size: 3vw;
    font-weight: 400;
    color: #fff;
    width: 80%;
}

footer nav ul li{
    padding-left: 1vw;
}

footer .top{
    position: absolute;
    right: 5vw;
    bottom: 5vw;
}
}


/* ここから法人概要ページ */

/* 理念 */
.company_policy{
    margin-top: 142px;
}
.company_policy h2{
    margin-top: 19px;
    margin-left: 51px;
    margin-bottom: 60px;
    font-size: 2.1875rem;
    line-height: 67px;
}
.company_policy .company_policy-img{
    position: relative;
}
.company_policy .company_policy-img img{
    width: 100%;
}

.company_policy .company_policy-img .right-leaf{
    position: absolute;
    right: -88px;
    top: 349px;
}

.policy{
   margin-top: 42.89px; 
}

@media (max-width:600px){
    .company_policy{
        margin-top: 10vw;
    }
    .company_policy h3{
        margin-top: 19px;
        margin-left: 51px;
        margin-bottom: 60px;
        font-size: 2.1875rem;
        line-height: 67px;
    }
    .company_policy .company_policy-img{
        position: relative;
        width: 90vw;
        order: 1;
    }

    .company_policy-img img[alt="子供と車いすの高齢女性"]{
        width: 100%;
    }
    
    .policy h2{
        order: 0;
        width: 90vw;
        text-align: center;
        margin: 0 auto;
    }
    
    .policy h2 img{
        width: 25vw;
    }
    .policy h3{
        order:2;
        margin: 5vw 0;
        font-size: 5vw;
        line-height: 1.6;
    }
    
    .company_policy .company_policy-img .right-leaf{
        position: absolute;
        right: -7vw;
        top: 25vw;
    }
    
    .policy{
        flex-direction: column; 
        width: 90vw;
        margin: 0 auto;
    }
}

/* 理念ここまで */


/* ここから4つの柱 */

.pillars{
    background-color: #E7D4A5;
    border-radius: 34px;
    margin-bottom: 100px;
    width: 100%;
    padding: 114px 0;
}


.pillars .pillars-ttl{
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 975px;
    margin: 0 auto;
    margin-bottom: 112px;
}


.pillars .pillars-ttl h3{
    display: inline-block;
    margin-top: 123px;
    width: 542px;
    height: auto;
    line-height: 48px;
}

.pillars .pillars-ttl .right-leaf{
    position: absolute;
    bottom: -80px;
    right: -146px;
}


.pillar-content{
    margin: 0 auto;
    width: 975px;
    margin-bottom: 112px;
    grid-column-gap: 59px;
    grid-row-gap: 27px;
    grid-template-columns: 375px 548.71px;
    grid-template-rows: 100px 1fr;
    grid-template-areas: 
    "h1-area brank"
    "text-area img-area";
}

.pillar-content h2{
    margin: 0 auto;
}
.pillar-content.type2{
    grid-column-gap: 59px;
    grid-row-gap: 27px;
    grid-template-columns: 375px 548.71px;
    grid-template-rows: 158px 1fr;
    grid-template-areas: 
    "h1-area brank"
    "text-area img-area";
}

.pillar-content h2{
    grid-area: h1-area;
}

.pillar-content p{
    grid-area: text-area;
}

.pillar-content .pillar-img{
    grid-area: img-area;
    margin-top: -18px;
}

.pillar-content .pillar-img img{
    width: 100%;
}

#container{
	position: relative;
	z-index: 1;/*header とfooterを手前にするため数字を小さく*/
}
section.fixed{
	position: -webkit-sticky;/*Safari*/
	position: sticky;/*デモ画面の高さを持たすための上下余白*/
}

@media (max-width:600px){
    .pillars{
        background-color: #E7D4A5;
        border-radius: 5px;
        width: 100%;
        padding: 20vw 0;
    }
    
    
    .pillars .pillars-ttl{
        position: relative;
        flex-direction: column;
        align-items: center;
        width: 90vw;
        margin: 0 auto;
        margin-bottom: 10vw;
    }
    
    .pillars-ttl h2{
        width: 90vw;
        margin: 0 auto;
        text-align: center;
    }
    .pillars-ttl h2 img{
        width: 50vw;
    }
    
    .pillars .pillars-ttl h3{
        display: inline-block;
        margin: 10vw 0;
        width: 90vw;
        height: auto;
        line-height: 48px;
        font-size: 4vw;
        line-height: 1.6;
    }
    
    .pillars .pillars-ttl .right-leaf{
        position: absolute;
        bottom: 4vw;
        width: 10vw;
        right: -5vw;
    }
    .pillars .pillars-ttl .right-leaf img{
        width: 100%;
    }
    
    
    .pillar-content{
        margin: 0 auto;
        width: 90vw;
        margin-bottom: 5vw;
        grid-template-columns: 90vw;
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 
        "h1-area"
        "img-area"
        "text-area";
        grid-row-gap: 3vw;
        margin-bottom: 15vw;
    }
    
    .pillar-content h2{
        width: 90vw;
        margin: 0 auto;
        text-align: center;
    }

    .pillar-content h2 img{
        width: 50vw;
        
    }

    .pillar-content.type2{
        margin: 0 auto;
        width: 90vw;
        margin-bottom: 5vw;
        grid-template-columns: 90vw;
        grid-template-rows: repeat(3, auto);
        grid-row-gap: 3vw;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "text-area";
    }
    
    .pillar-content.type2 h2 img{
        width: 40vw;
    }
    .pillar-content.type2.title4 h2 img{
        width: 55vw;
    }

    .pillar-content h2{
        grid-area: h1-area;
    }
    
    .pillar-content p{
        grid-area: text-area;
    }
    
    .pillar-content .pillar-img{
        grid-area: img-area;
        margin: 0;
        width: 90vw;
    }
    .pillar-content .pillar-img img{
        width: 100%;
    }
    
    #container{
        position: relative;
        z-index: 1;/*header とfooterを手前にするため数字を小さく*/
    }
    section.fixed{
        position: -webkit-sticky;/*Safari*/
        position: sticky;/*デモ画面の高さを持たすための上下余白*/
    }
    
}

/* ここまで4つの柱 */

/* メッセージ */
.company_message{
    width: 1021.31px;
    margin: 150px auto 240px;
}

.company_message .message-ttl{
    width: 975px;
    margin: 0 auto 28px;
    align-items: center;
}

.company_message .message-ttl h2{
    margin-left: 26px;
}

.company_message p{
    display: block;
    margin: 30px auto 0;
    width: 975px;
    font-size: 1.2rem;
}

.company_policy-img{
    position: relative;
}
.company_policy-img .right-leaf{
    position: absolute;
    bottom: -1400px;
    right: -120px;
}

.company_policy-img .sign{
    position: absolute;
    bottom: -1315px;
    right: 40px;
}
@media (max-width:600px){
    .company_message{
        width: 95vw;
        margin: 20vw auto;
    }
    
    .company_message .message-ttl{
        width: 90vw;
        margin: 0 auto;
        align-items: center;
        flex-direction: column;
    }

    .company_message .message-ttl h2{
        margin: 0 auto;
        width: 90vw;
        text-align: center;
    }

    .company_message .message-ttl h2 img{
        width: 30vw;
    }
    
    .company_message .message-ttl h3{
        margin: 0 auto;
        font-size: 1.375rem;
    }
    
    .company_message p{
        display: block;
        margin: 5vw auto 0;
        width: 84vw;
        font-size: 3vw;
        line-height: 1.8;
    }
    
    .company_policy-img{
        position: relative;
        width: 90vw;
        margin: 0 auto;
    }
    .company_policy-img img{
        width: 100%;
    }
    .company_policy-img .right-leaf{
        position: absolute;
        width: 20vw;
        bottom: -330vw;
        right: -8vw;
    }
    
    .company_policy-img .sign{
        width: 40vw;
        position: absolute;
        bottom: -320vw;
        right: 6vw;
    }
}
/* ここまでメッセージ */

/* 沿革 */

.history{
    background-color: #E7D4A5;
    width: 100%;
    border-radius: 34px;
    margin-top: 100px;
}

.history h2{
    width: 975px;
    margin: 0 auto;
    padding-top: 80px;
    text-align: center;
}

.history .history-wrap{
    position: relative;
    width: 975px;
    margin: 35px auto 0;
    padding-bottom: 80px;
}

.history .history-wrap .history-line{
    margin-top: 30px;
    margin-right: 10px;
}
.history .history-wrap dl{
    align-items: center;
    grid-template-columns: 288px 675px;
    grid-template-rows: repeat(6, 42px);
    grid-row-gap: 22px;
    grid-template-areas: 
        "dt1 dd1"
        "dt2 dd2"
        "dt3 dd3"
        "dt4 dd4"
        "dt5 dd5"
        "dt6 dd6";}

        .history .history-wrap dl dt{
            font-family: "kinuta-maruminold-stdn", serif;
            font-weight: 400;
            font-size: 2.1875rem;
        }

        .history .history-wrap dl dd{
            border-radius: 30px;
            background-color: #fff;
            padding: 10px 17px;
            color: #6D7B52;
        }

        .history .history-wrap dl .dt1{
            grid-area: dt1;
        }

        .history .history-wrap dl .dt2{
            grid-area: dt2;
        }

        .history .history-wrap dl .dt3{
            grid-area: dt3;
        }

        .history .history-wrap dl .dt4{
            grid-area: dt4;
        }

        .history .history-wrap dl .dt5{
            grid-area: dt5;
        }

        .history .history-wrap dl .dt6{
            grid-area: dt6;
        }

        .history .history-wrap dl .dd1{
            grid-area: dd1;
        }

        .history .history-wrap dl .dd2{
            grid-area: dd2;
        }

        .history .history-wrap dl .dd3{
            grid-area: dd3;
        }

        .history .history-wrap dl .dd4{
            grid-area: dd4;
        }

        .history .history-wrap dl .dd5{
            grid-area: dd5;
        }

        .history .history-wrap dl .dd6{
            grid-area: dd6;
        }

        .history-wrap .yellow-leaf{
            position: absolute;
            bottom: -16px;
            left: -168px;
            z-index: 0;
        }

        @media (max-width:600px){
            .history{
                background-color: #E7D4A5;
                width: 100%;
                border-radius: 5px;
                margin-top: 20vw;
            }
            
            .history h2{
                width: 90vw;
                margin: 0 auto;
                padding-top:10vw;
                text-align: center;
            }
            .history h2 img{
                width: 30vw;
                margin: 0 auto;
                padding-top:10vw;
            }


            
            .history .history-wrap{
                position: relative;
                width: 90vw;
                margin: 0 auto;
                padding-bottom: 10vw;
            }
            
            
            .history .history-wrap dl{
                align-items: center;
                grid-template-columns: 90vw;
                grid-template-rows: repeat(12, auto);
                grid-row-gap: 0;
                grid-template-areas: 
                    "dt1"
                    "dd1"
                    "dt2"
                    "dd2"
                    "dt3"
                    "dd3"
                    "dt4"
                    "dd4"
                    "dt5"
                    "dd5"
                    "dt6"
                    "dd6";}
            
                    .history .history-wrap dl dt{
                        font-family: "kinuta-maruminold-stdn", serif;
                        font-weight: 400;
                        font-size: 6vw;
                        color: #6D7B52;
                    }
            
                    .history .history-wrap dl dd{
                        border-radius: 5px;
                        background-color: #fff;
                        padding: 10px 17px;
                        margin-bottom: 10vw;
                        margin-left: 0;
                        color: #6D7B52;
                    }
            
                    .history .history-wrap dl .dt1{
                        grid-area: dt1;
                    }
            
                    .history .history-wrap dl .dt2{
                        grid-area: dt2;
                    }
            
                    .history .history-wrap dl .dt3{
                        grid-area: dt3;
                    }
            
                    .history .history-wrap dl .dt4{
                        grid-area: dt4;
                    }
            
                    .history .history-wrap dl .dt5{
                        grid-area: dt5;
                    }
            
                    .history .history-wrap dl .dd1{
                        grid-area: dd1;
                    }
            
                    .history .history-wrap dl .dd2{
                        grid-area: dd2;
                    }
            
                    .history .history-wrap dl .dd3{
                        grid-area: dd3;
                    }
            
                    .history .history-wrap dl .dd4{
                        grid-area: dd4;
                    }
            
                    .history .history-wrap dl .dd5{
                        grid-area: dd5;
                    }
            
                    .history-wrap .yellow-leaf{
                        position: absolute;
                        width: 20vw;
                        bottom: -41vw;
                        left: -8vw;
                        z-index: 0;
                    }
        }


        /* 法人概要 */

        .company-company{
            margin-top: 100px;
        }
        .company-company .overview{
            width: 975px;
        }
        .company-company h2{
            text-align: center;
        }

        .overview dl{
            align-items: center;
            grid-template-columns: 300px 675px;
            grid-template-rows: 60px 60px 60px 60px 60px 60px;
            grid-template-areas: 
            "dt1 dd1"
            "dt2 dd2"
            "dt3 dd3"
            "dt4 dd4"
            "dt5 dd5"
            "dt6 dd6";
        }


        .overview dl dt,
        .overview dl dd{
            margin: 0;
            padding: 21px 0;
            border-bottom: 2px solid #00A63C;
            color: #6D7B52;
        }

        .overview dl dt{
            font-family: "kinuta-maruminold-stdn", serif;
            font-size: 1.375rem;
            padding-bottom: 14px;
        }
        .overview dl .dt1{
            grid-area: dt1;
        }

        .overview dl .dt2{
            grid-area: dt2;
        }

        .overview dl .dt3{
            grid-area: dt3;
        }

        .overview dl .dt4{
            grid-area: dt4;
        }

        .overview dl .dt5{
            grid-area: dt5;
        }

        .overview dl .dt6{
            grid-area: dt6;
        }
        @media (max-width:600px){
            .company-company{
                margin-top: 20vw;
            }
            .company-company .overview{
                width: 90vw;
            }
    
            .company-company h2{
                width: 90vw;
                margin: 0 auto;
                text-align: center;
            }
            .company-company h2 img{
                width: 40vw;
            }

            .overview{
                width: 90vw;
                margin: 0 auto;
            }
    
            .overview dl{
                width: 90vw;
                margin: 0 auto;
                align-items: center;
                grid-template-columns: 30vw 60vw;
                grid-template-rows: repeat(6, auto);
                grid-template-areas: 
                "dt1 dd1"
                "dt2 dd2"
                "dt3 dd3"
                "dt4 dd4"
                "dt5 dd5"
                "dt6 dd6";
            }
    
    
            .overview dl dt,
            .overview dl dd{
                margin: 0;
                padding: 21px 0;
                border-bottom: 2px solid #00A63C;
                color: #6D7B52;
            }

            .overview .dd6{
                padding: 12px 0;
            }
    
            .overview dl dt{
                font-family: "kinuta-maruminold-stdn", serif;
                font-size: 1.375rem;
                padding-bottom: 14px;
            }
            .overview dl .dt1{
                grid-area: dt1;
            }
    
            .overview dl .dt2{
                grid-area: dt2;
            }
    
            .overview dl .dt3{
                grid-area: dt3;
            }
    
            .overview dl .dt4{
                grid-area: dt4;
            }
    
            .overview dl .dt5{
                grid-area: dt5;
            }
    
            .overview dl .dt6{
                grid-area: dt6;
            }
        }
        /* ここまで法人概要 */

        /* アクセス */
        .access{
            margin-top: 100px;
            margin-bottom: 100px;
        }

        .access h2{
            margin: 0;
            text-align: center;
        }

        .access iframe{
            margin-top: 40px;
        }

        .access dl.grid{
            align-items: center;
            width: 975px;
            grid-template-columns: 488px 487px;
            grid-template-rows: 60px 60px 60px;
            grid-template-areas: 
            "dt1 dd1"
            "dt2 dd2"
            "dt3 dd3";
            color: #6D7B52;
        }
        .access dl.grid{
            align-items: center;
            width: 975px;
            grid-template-columns: 488px 487px;
            grid-template-rows: repeat(3, auto);
            grid-template-areas: 
            "dt1 dd1"
            "dt2 dd2"
            "dt3 dd3";
            color: #6D7B52;
        }
        .access .area-border{
            justify-content: center;
            align-items: center;
            height: -webkit-fill-available;
            width: auto;
            border-bottom: 2px solid #00A63C;
        }
        .access dl dt{
            font-family: "kinuta-maruminold-stdn", serif;
            font-size: 1.2rem;
            padding:14px 0;
            width: 100%;
        }

        .access dl dd{
            margin: 0;
            border-bottom: 2px solid #00A63C;
            padding: 16px 0;
        }

        @media (max-width:600px){
            .access{
                width: 90vw;
                margin: 20vw auto;
            }
    
            .access h2{
                width: 90vw;
                margin: 0 auto;
                text-align: center;
            }

            .access h2 img{
                width: 40vw;
            }
    
            .access iframe{
                width: 90vw;
            }
    
            .access dl.grid{
                align-items: center;
                width: 90vw;
                margin: 0 auto;
                grid-template-columns: 90vw;
                grid-template-rows: repeat(6, auto);
                grid-template-areas: 
                "dt1"
                "dd1"
                "dt"
                "dd2"
                "dt3"
                "dd3";
                color: #6D7B52;
            }
            .access .area-border{
                justify-content: center;
                align-items: center;
                height: -webkit-fill-available;
                width: auto;
                border-bottom: none;
            }
    
            .access dl dt{
                font-family: "kinuta-maruminold-stdn", serif;
                font-size: 4vw;
                padding:0;
                margin-top: 5vw;
                border: none;
                width: 100%;
            }
    
            .access dl dd{
                margin: 0;
                border-bottom: 1px solid #00A63C;
                font-size: 3vw;
                padding: 2vw;
            }
    
        }

        /* ここから訪問看護ステーションページ！ */

        .sec_point{
            position: relative;
            margin-top: 75px;
            margin-bottom: 123px;
        }

        .sec_point .right-leaf{
            position: absolute;
            bottom: -140px;
            right: -105px;
        }

        .sec_point-img img{
            width: 100%;
        }

        .sec_point img[alt="特徴-Point-"]{
            width: 34%;
        }
        #recruit .sec_point img[alt="特徴-Point-"]{
            width: 18%;
        }
        .point{
            grid-template-columns: 50% 50%;
            grid-template-rows: repeat(2, auto);
            grid-template-areas: 
            "h1-area h3-area"
            "h2-area text-area";
        }

        .point h3 span{
            font-family: "kinuta-maruminold-stdn", serif;
            font-weight: 600;
        }

        #recruit .point{
            text-align: center;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, auto);
            grid-template-areas: 
            "h1-area"
            "h2-area"
            "h3-area";
            justify-content: center;
        }

        .point h2{
            grid-area: h1-area;
        }
        .point h3{
            grid-area: h2-area;
            margin: 0;
        }
        .point h4{
            font-family: "kinuta-maruminold-stdn", serif;
            font-size: 1.375rem;
            font-weight: 400;
            grid-area: h3-area;
            color: #6D7B52;
            margin: 0.67em 0
        }


        .point p{
            margin-top: -84px;
        }
        .point p{
            grid-area: text-area;
        }

        #hair .point p{
            margin: 0;
        }


        .point-container{
            width: 975px;
            grid-auto-rows: 367px;
            grid-template-columns: repeat(auto-fill, 300px);
            grid-column-gap: 33px;
            margin-top: 60px;
        }


        #hair .hair-what{
            text-align: left;
        }

        #hair .hair-what h2{
            text-align: center;
            color: #6D7B52;
            font-family: 'kinuta-maruminold-stdn';
        }

        #hair .hair-what h3{
            font-family: "kinuta-maruminold-stdn", serif;
            font-size: 1.375rem;
            font-weight: 400;
            grid-area: h3-area;
            color: #6D7B52;
            margin: 0.67em auto;
            text-align: center;
        }
        #hair .hair-what p{
            width: 71%;
        }
        #hair .service{
            background-color: #C8D9C8;
            margin-bottom: 10vw;
            padding: 5vw;
        }


        #hair .service .service-ttl h2{
            width: 975px;
        }

        #hair .service-ttl h2 img{
            width: 8vw;
        }
        #hair .service.use .service-ttl h2 img{
            width: 14vw;
        }

        @media (max-width:600px){

            #hair .service .service-ttl h2{
                width: 100%;
            }
    
            #hair .service-ttl h2 img{
                width: 25vw;
            }
            #hair .hair-what p{
                width: 90vw;
            }
            #hair .right-leaf{
                position:absolute;

            }
            #hair .service.use .service-ttl h2 img{
                width: 40vw;
            }


            #hair .hair-what h3{
                font-family: "kinuta-maruminold-stdn", serif;
                font-size: 1.375rem;
                font-weight: 400;
                color: #6D7B52;
                margin: 0.67em 0;
                text-align: left;
                width: 90vw;
                margin: 0 auto;
            }
        }
        

        /* 汎用サービス */        
        
        .service{
            grid-template-columns: 450px 525px;
            grid-template-rows: 1fr 107px;
            grid-template-areas: 
            "h1-area h3-area"
            "h2-area text-area";
            width: 100%;
            border-radius: 34px;
        }
        
        @media (max-width:600px){
            .service{
                grid-template-columns: 450px 525px;
                grid-template-rows: 1fr 107px;
                grid-template-areas: 
                "h1-area h3-area"
                "h2-area text-area";
                width: 100%;
                border-radius: 5px;
                padding-top: 5.5vw;
            }    
        }

        #nursing .service{
            grid-template-columns: 450px 525px;
            grid-template-rows: 1fr 107px;
            grid-template-areas: 
            "h1-area h3-area"
            "h2-area text-area";
            width: 100%;
            border-radius: 34px;
            padding: 70px;
            background-color: #C8D9C8;
        }
        .service h2{
            grid-area: h1-area;
            width: 975px;
            margin: 0 auto;
        }
        .service h2 img{
            display: block;
            margin: 0 auto;
        }
        .service h3{
            grid-area: h2-area;
            margin: 0 auto;
        }
        .service h3{
            font-family: "Noto sans jp", serif;
            font-size: 1.375rem;
            font-weight: 600;
            grid-area: h3-area;
            color: #4d4d4d;
            align-self: end;
        }
        .service p{
            grid-area: text-area;
            font-family: "Noto sans jp";
            color: #4d4d4d;
            text-align: left;
            display: inline-block;
            width: auto;
            margin: 0 auto;
            
        }
        .service-container{
            width: 975px;
            grid-auto-rows: 430px;
            grid-template-columns: repeat(auto-fill, 300px);
            grid-column-gap: 33px;
            grid-row-gap: 40px;
            margin: 60px auto 0;
            text-align: center;
        }
        #recruit .service-container{
            width: 975px;
            grid-auto-rows: 360px;
            grid-template-columns: repeat(auto-fill, 300px);
            grid-column-gap: 33px;
            grid-row-gap: 33px;
            margin: 60px auto 0;
            text-align: center;
        }

        #care .service-container{
            width: 975px;
            grid-auto-rows: 600px;
            grid-template-columns: repeat(auto-fill, 300px);
            grid-column-gap: 33px;
            margin: 60px auto 0;
            text-align: center;
        }

        .service-container h3{
            margin: 16px 0;
        }
        .service-container p{
            font-size: 17px;
            margin: 0;
        }

        /* ご利用の流れ */
        .flow{
            margin: 150px auto;
        }

        .flow h2{
            text-align: center;
        }


        .flow .flow-wrap{
            position: relative;
            width: 975px;
            margin: 35px auto 0;
            padding-bottom: 80px;
        }
        
        .flow .flow-wrap .flow-line{
            margin-top: 30px;
            margin-right: 10px;
        }
        .flow .flow-wrap dl{
            align-items: center;
            grid-template-columns: 298px 665px;
            grid-template-rows: repeat(5,42px);
            grid-row-gap: 102px;
            grid-template-areas: 
                "dt1 dd1"
                "dt2 dd2"
                "dt3 dd3"
                "dt4 dd4"
                "dt5 dd5";}
        #hair .flow .flow-wrap dl{
            align-items: center;
            grid-template-columns: 288px 675px;
            grid-template-rows: repeat(3,42px);
            grid-row-gap: 102px;
            grid-template-areas: 
                "dt1 dd1"
                "dt2 dd2"
                "dt3 dd3";}
        
        #care .flow .flow-wrap dl{
            color: #6D7B52;
            align-items: center;
            grid-template-columns: 288px 675px;
            grid-template-rows: repeat(6,42px);
            grid-row-gap: 102px;
            grid-template-areas: 
                "dt1 dd1"
                "dt2 dd2"
                "dt3 dd3"
                "dt4 dd4"
                "dt5 dd5"
                "dt6 dd6";}
        
                .flow .flow-wrap dl dt{
                    font-family: "Noto sans jp", serif;
                    font-weight: 600;
                    font-size: 1.375rem;
                    color: #4d4d4d;
                }
        
                .flow .flow-wrap dl dd{
                    border-radius: 30px;
                    background-color: #fff;
                    padding: 10px 17px;
                    color: #6D7B52;
                }
        
                .flow .flow-wrap dl .dt1{
                    grid-area: dt1;
                }
        
                .flow .flow-wrap dl .dt2{
                    grid-area: dt2;
                }
        
                .flow .flow-wrap dl .dt3{
                    grid-area: dt3;
                    margin-top: 9px;
                }
        
                .flow .flow-wrap dl .dt4{
                    grid-area: dt4;
                    margin-top: -46px;
                }
        
                .flow .flow-wrap dl .dt5{
                    grid-area: dt5;
                    margin-top: -82px;
                }
        
                .flow .flow-wrap dl .dd1{
                    grid-area: dd1;
                }
        
                .flow .flow-wrap dl .dd2{
                    grid-area: dd2;
                }
        
                .flow .flow-wrap dl .dd3{
                    grid-area: dd3;
                    margin-top: 9px;
                }
        
                .flow .flow-wrap dl .dd4{
                    grid-area: dd4;
                    margin-top: -46px;
                }
        
                .flow .flow-wrap dl .dd5{
                    grid-area: dd5;
                    margin-top: -82px;
                }
        
        
               #care .flow .flow-wrap dl .dt1{
                    grid-area: dt1;
                }
        
               #care .flow .flow-wrap dl .dt2{
                    grid-area: dt2;
                    margin-top: -12px;
                }
        
               #care .flow .flow-wrap dl .dt3{
                    grid-area: dt3;
                    margin-top: -23px;
                }
        
               #care .flow .flow-wrap dl .dt4{
                    grid-area: dt4;
                    margin-top: -53px;
                }
        
               #care .flow .flow-wrap dl .dt5{
                    grid-area: dt5;
                    margin-top: -74px;
                }
        
               #care .flow .flow-wrap dl .dt6{
                    grid-area: dt6;
                    margin-top: -79px;
                }
        
               #care .flow .flow-wrap dl .dd1{
                    grid-area: dd1;
                }
        
               #care .flow .flow-wrap dl .dd2{
                    grid-area: dd2;
                    margin-top: -12px;
                }
        
               #care .flow .flow-wrap dl .dd3{
                    grid-area: dd3;
                    margin-top: -23px;
                }
        
               #care .flow .flow-wrap dl .dd4{
                    grid-area: dd4;
                    margin-top: -53px;
                }
        
               #care .flow .flow-wrap dl .dd5{
                    grid-area: dd5;
                    margin-top: -74px;
                }
        
               #care .flow .flow-wrap dl .dd6{
                    grid-area: dd6;
                    margin-top: -79px;
                }
        
                .flow-wrap .yellow-leaf{
                    position: absolute;
                    bottom: -16px;
                    left: -168px;
                    z-index: 0;
                }

    @media (max-width:600px){
                     /* ご利用の流れ */
        .flow{
            margin: 150px auto;
        }

        .flow h2{
            width: 90vw;
            text-align: center;
        }

        .flow h2 img{
            width: 40vw;
        }

        .flow span::after{
            content: "・";
        }
        .flow .flow-wrap{
            position: relative;
            width: 90vw;
            margin: 35px auto 0;
            padding: 0;
        }
        
        .flow .flow-wrap .flow-line{
            margin-top: 5vw;
            margin-right: 10px;
        }
        .flow .flow-wrap dl{
            align-items: center;
            grid-template-columns: 90vw;
            grid-template-rows: repeat(5, auto auto);
            grid-row-gap: 0;
            grid-template-areas: 
                "dt1" 
                "dd1"
                "dt2"
                "dd2"
                "dt3"
                "dd3" 
                "dt4"
                "dd4"
                "dt5"
                "dd5";}
        


                .flow .flow-wrap dl dd{
                    padding: 0;
                    margin: 0;
                    border-radius: 2px;
                    background-color: #fff;
                    padding: 10px 17px;
                    color: #6D7B52;
                }

                .flow .flow-wrap dl dt{
                    font-weight: 400;
                    font-size: 1.25rem;
                    margin-bottom: 2vw;
                    align-items: center;
                }
                #nursing .flow .flow-wrap dl dt{
                    font-weight: 600;
                    font-size: .9rem;
                    margin-bottom: 2vw;
                }
        
                #nursing .flow .flow-wrap dl dd{
                    font-size: 3vw;
                    background-color: #fff;
                    margin: 0;
                    margin-bottom: 7vw;
                    padding: 3vw;
                    border-radius: 5px;
                }
        
                .flow .flow-wrap dl .dt1{
                    grid-area: dt1;
                }
        
                .flow .flow-wrap dl .dt2{
                    grid-area: dt2;
                    margin: 0;;
                }
        
                .flow .flow-wrap dl .dt3{
                    grid-area: dt3;
                    margin: 0;;
                }
        
                #nursing .flow .flow-wrap dl .dt4{
                    grid-area: dt4;
                    margin-top: 0;
                }
        
                #nursing .flow .flow-wrap dl .dt5{
                    grid-area: dt5;
                    margin-top: 0;
                }
        
                .flow .flow-wrap dl .dd1{
                    grid-area: dd1;
                    margin: 0;
                }
        
                .flow .flow-wrap dl .dd2{
                    grid-area: dd2;
                    margin: 0;
                    
                }
        
                .flow .flow-wrap dl .dd3{
                    grid-area: dd3;
                    margin: 0;
                }
        
                .flow .flow-wrap dl .dd4{
                    grid-area: dd4;
                    margin: 0;
                }
        
                .flow .flow-wrap dl .dd5{
                    grid-area: dd5;
                    margin: 0;
                }
        
        
                }

    @media (max-width:600px){
                     /* ご利用の流れ */
        .flow{
            margin: 150px auto;
        }

        .flow h2{
            width: 90vw;
            text-align: center;
            margin: 0 auto;
        }

        .flow h2 img{
            width: 40vw;
        }


        .flow .flow-wrap{
            position: relative;
            width: 90vw;
            margin: 35px auto 0;
            padding: 0;
        }
        
        #care .flow .flow-wrap .flow-line{
            margin-top: 7vw;
            margin-right: 10px;
        }
        #nursing .flow .flow-wrap .flow-line{
            margin-top: 7vw;
            margin-right: 10px;
        }
        #hair .flow .flow-wrap dl{
            align-items: center;
            grid-template-columns: 90vw;
            grid-template-rows: repeat(3,auto auto);
            grid-row-gap: 0;
            grid-template-areas: 
                "dt1"
                "dd1"
                "dt2"
                "dd2"
                "dt3"
                "dd3";}

        #hair .flow .flow-wrap dl .dt1{
            grid-area: dt1;
            margin-bottom: 2vw;
            margin-top: 0;
        }
        
        #hair .flow .flow-wrap dl .dt2{
             grid-area: dt2;
             margin-bottom: 2vw;
             margin-top: 0;
        }
        
        #hair .flow .flow-wrap dl .dt3{
             grid-area: dt3;
             margin-bottom: 2vw;
             margin-top: 0;
        }
        #hair .flow .flow-wrap dl .dd1{
            grid-area: dd1;
            margin-bottom: 7vw;
            margin-top: 0;
        }

       #hair .flow .flow-wrap dl .dd2{
            grid-area: dd2;
            margin-bottom: 7vw;
            margin-top: 0;
        }

       #hair .flow .flow-wrap dl .dd3{
            grid-area: dd3;
            margin-bottom: 7vw;
            margin-top: 0;
        }

        #care .flow .flow-wrap dl{
            align-items: center;
            grid-template-columns: 90vw;
            grid-template-rows: repeat(6, auto auto);
            grid-row-gap: 0;
            grid-template-areas: 
                "dt1" 
                "dd1"
                "dt2"
                "dd2"
                "dt3"
                "dd3" 
                "dt4"
                "dd4"
                "dt5"
                "dd5"
                "dt6"
                "dd6";
            }
        
                .flow .flow-wrap dl dd{
                    padding: 0;
                    margin: 0;
                    background-color: #fff;
                    color: #6D7B52;
                }
                .flow .flow-wrap dl dt{
                    font-weight: 400;
                    font-size: 1.25rem;
                }
        
                #care .flow .flow-wrap dl dt{
                    font-size: 1rem;
                    font-weight: 600;
                }
                #care .flow .flow-wrap dl dd{
                    font-size: 1rem;
                }
                #care .flow .flow-wrap dl .dt1{
                    grid-area: dt1;
                    margin-bottom: 2vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dt2{
                    grid-area: dt2;
                    margin-bottom: 2vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dt3{
                    grid-area: dt3;
                    margin-bottom: 2vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dt4{
                    grid-area: dt4;
                    margin-bottom: 2vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dt5{
                    grid-area: dt5;
                    margin-bottom: 2vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dt6{
                    grid-area: dt6;
                    margin-bottom: 2vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dd1{
                    grid-area: dd1;
                    margin-bottom: 7vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dd2{
                    grid-area: dd2;
                    margin-bottom: 7vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dd3{
                    grid-area: dd3;
                    margin-bottom: 7vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dd4{
                    grid-area: dd4;
                    margin-bottom: 7vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dd5{
                    grid-area: dd5;
                    margin-bottom: 7vw;
                    margin-top: 0;
                }
        
               #care .flow .flow-wrap dl .dd6{
                    grid-area: dd6;
                    margin-bottom: 7vw;
                    margin-top: 0;
                }
                
                #care .flow .flow-wrap dl dt{
                    margin-bottom: 2vw;
                }

                #care .flow .flow-wrap dl dd{
                    margin: 0;
                    padding: 3vw;
                    border-radius: 5px;
                    margin-bottom: 7vw;
                }
                .flow-wrap .yellow-leaf{
                    position: absolute;
                    bottom: -60vw;
                    left: 0;
                    z-index: 0;
                    width: 20vw;
                }
        
        
                #care .flow-wrap .yellow-leaf{
                    position: absolute;
                    width: 20vw;
                    bottom: -60vw;
                    left: 0;
                    z-index: 0;
                }
                #care .flow-wrap .yellow-leaf img{
                    width: 100%;
                }
                }
        #care .flow .flow-wrap .flow-line{
            margin-right: 10px;
        }


    
            .flow .flow-wrap dl dd{
                border-radius: 30px;
                background-color: #fff;
                padding: 10px 17px;
                color: #4d4d4d;
                font-family: "Noto sans jp";
                font-weight: 400;
                font-size: 1.275rem;
                line-height: 1.6;
            }

            .flow .flow-wrap dl .dt1{
                grid-area: dt1;
            }
    
            .flow .flow-wrap dl .dt2{
                grid-area: dt2;
            }
    
            .flow .flow-wrap dl .dt3{
                grid-area: dt3;
                margin-top: 9px;
            }
    
            .flow .flow-wrap dl .dt4{
                grid-area: dt4;
                margin-top: -46px;
            }
    
            .flow .flow-wrap dl .dt5{
                grid-area: dt5;
                margin-top: -82px;
            }
    
            .flow .flow-wrap dl .dd1{
                grid-area: dd1;
            }
    
            .flow .flow-wrap dl .dd2{
                grid-area: dd2;
            }
    
            .flow .flow-wrap dl .dd3{
                grid-area: dd3;
                margin-top: 9px;
            }
    
            .flow .flow-wrap dl .dd4{
                grid-area: dd4;
                margin-top: -46px;
            }
    
            .flow .flow-wrap dl .dd5{
                grid-area: dd5;
                margin-top: -82px;
            }
            
            .flow-wrap .yellow-leaf{
                position: absolute;
                bottom: -16px;
                left: -168px;
                z-index: 0;
            }
        
        

                #care .flow-wrap .yellow-leaf img{
                    width: 100%;
                }
                

                #nursing .flow-wrap .yellow-leaf{
                    position: absolute;
                    bottom: 0;
                    left: -10vw;
                    width: 10vw;
                    z-index: 0;
                }                

                /* ご対応エリア */
                .support-area{
                    position: relative;
                    width: 100%;
                    height: auto;
                    background-color: #E7D4A5;
                    border-radius: 34px;
                    padding: 70px 0; 
                }
                #hair .support-area{
                    margin-bottom: 10vw;
                }
                .support-area h2{
                    width: 975px;
                    margin: 0 auto;
                    text-align: center;
                }

                .support-area .area-wrap{
                    position: relative;
                    width: 975px;
                    padding: 70px;
                    margin: 36px auto 0;
                    justify-content: space-between;
                    background-color: #fff;
                    border-radius: 34px;
                }

                .support-area .area-wrap h3{
                    font-family: "kinuta-maruminold-stdn", serif;
                    font-weight: 400;
                    font-size: 1.5625rem;
                    color: #6D7B52;
                }
                .support-area .area-wrap ul li{
                    font-family: "BIZ UDGothic", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 1.25rem;
                    line-height: 38px;
                    color: #6D7B52;
                }
                .support-area .area-wrap .yellow-leaf{
                    position: absolute;
                    bottom: -100px;
                    left: -140px;
                    z-index: 1;
                }

                @media (max-width:600px){ 
                .support-area{
                    position: relative;
                    width: 100%;
                    height: auto;
                    background-color: #E7D4A5;
                    border-radius: 5px;
                    padding: 20vw 0; 
                }

                .support-area .tokyo{
                    width: 100%;
                }

                .support-area .kanagawa{
                    width: 100%;
                }

                .support-area h2{
                    width: 40vw;
                    margin: 0 auto;
                }

                .support-area h2 img{
                    width: 100%;
                }

                .support-area .area-wrap{
                    position: relative;
                    width: 90vw;
                    padding: 5vw;
                    margin: 10vw auto 0;
                    flex-direction: column;
                    justify-content: space-between;
                    background-color: #fff;
                    border-radius: 5px;
                    align-items: center;
                }

                .support-area .tokyo-img{
                    width: 90%;
                    margin: 0 auto;
                }
                .support-area .tokyo-img img{
                    width: 100%;
                }
                .support-area .kanagawa-img{
                    width: 60%;
                    margin: 0 auto;
                }
                .support-area .kanagwa-img img{
                    width: 100%;
                }

                .support-area .area-wrap h3{
                    font-family: "Noto Sans Jp", serif;
                    font-weight: 600;
                    font-size: .9rem;
                    color: #6D7B52;
                }
                .support-area .area-wrap ul li{
                    font-family: "Noto Sans Jp", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: .9rem;
                    line-height: 1.5;
                    color: #6D7B52;
                }
                .support-area .area-wrap .yellow-leaf{
                    position: absolute;
                    width: 20vw;
                    bottom: -62vw;
                    left: 0;
                    z-index: 1;
                }}
/* お客様の声 */

.interview{
    margin-top: 100px;
    width: 100%;
}

.interview h2{
    width: 975px;
    height: auto;
    margin: 0 auto;
}

.interview h3{
    width: 975px;
    line-height: 48px;
    height: auto;
    margin: 0 auto;
}

/*==================================================
メインスライダーのためのcss
===================================*/
.hero-slider {
    position:relative;
      z-index: 1;
      /*↑\z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  }
  /*　背景画像設定　*/
  
 .hero-slider .slider-item01 {
      background:url(./img/common/top_mv-img@2x.webp);
  }
  
 .hero-slider .slider-item02 {
      background:url(./img/common/top_mv-img@2x.webp);
  }
  
 .hero-slider .slider-item03 {
      background:url(./img/common/top_mv-img@2x.webp);
  }
  
 .hero-slider .slider-item {
      width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
      height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      background-repeat: no-repeat;/*背景画像をリピートしない*/
      background-position: center;/*背景画像の位置を中央に*/
      background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
  }
  
  /*矢印の設定*/
  .hero-slider .slick-prev, 
  .slick-next {
    display: none;
  }
  .slick-prev, 
  .slick-next {
      position: absolute;
      z-index: 3;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      border-top: 2px solid #fff;/*矢印の色*/
      border-right: 2px solid #fff;/*矢印の色*/
      height: 25px;
      width: 25px;
  }
  
  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      transform: rotate(-135deg);
  }
  
  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      transform: rotate(45deg);
  }
  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
      position: relative;
      z-index: 3;
      text-align:center;
      margin:-50px 0 0 0;/*ドットの位置*/
  }
  
  .slick-dots li {
      display:inline-block;
      margin:0 5px;
  }
  
  .slick-dots button {
      color: transparent;
      outline: none;
      width:8px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:50%;
      background:#fff;/*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button{
      background:#333;/*ドットボタンの現在地表示の色*/
  }
/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
}

/* .slider .interview-content {
    width:975px;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    /* height:auto;
} */ 

.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #FEE687;/*矢印の色*/
    border-right: 2px solid #FEE687;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 18.5%;
    transform: rotate(-135deg);
    z-index: 1;
    top: 420px;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 18.5%;
    transform: rotate(45deg);
    z-index: 1;
    top: 420px;
}
.hero-slider .slick-prev, 
.slick-next {
    border-top: 2px solid transparent;/*矢印の色*/
    border-right: 2px solid transparent;/*矢印の色*/
}
/*ドットナビゲーションの設定*/

.slick-dots li{
    display: none;
}

@media (min-width:600px){
    .slick-dots {
    display: block;
    text-align:center;
    padding: 0;
    position: absolute;
    bottom: 0;
    left: 46%;
}

.slick-dots li{
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    /* width:8px;ドットボタンのサイズ */
    height: 15px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
    border: 1px solid #B2C2C4;
    font-size: 1px;
}

.slick-dots .slick-active button{
    background:#00A63C;/*ドットボタンの現在地表示の色*/
}
}

.interview .slider  .interview-content{
    width: 820px;
    height: 750px;
    background-color: #fff;
}


.interview-wrap{
    position: relative;
    width: 975px;
    height: 750px;
    margin: 40px auto 0;
    padding: 0 77px;
    background-color: #fff;
    border-radius: 34px;

}
.interview-wrap .right-leaf{
    position: absolute;
    bottom: -11px;
    right: -26px;
}
.interview-content{
    margin: 0 auto;
    grid-template-columns: 375px 375px;
    grid-template-rows: 150px 100px 425px;
    grid-template-areas: 
    "h4-area h4-area"
    "img-area h5-area"
    "img-area text-area";
    grid-column-gap: 70px;
}
#recruit .interview-content{
    margin: 0 auto;
    grid-template-columns: 375px 375px;
    grid-template-rows: 80px 70px 100px 425px;
    grid-template-areas: 
    "h4-area h4-area"
    "job-area job-area"
    "img-area h5-area"
    "img-area text-area";
    grid-column-gap: 70px;
}

.interview-content h4{
    grid-area: h4-area;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 2.1875rem;
    color: #6D7B52;
}

#recruit .interview-content p.job{
    grid-area: job-area;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    margin-top: 0.5rem;
    line-height: 1.2;
    color: #6D7B52;
}
    

.interview-content h5{
    grid-area: h5-area;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #6D7B52;
}

#recruit .interview-content h5{
    grid-area: h5-area;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #00A63C;
}

.interview-content .interview-img{
    grid-area: img-area;
}
.interview-content p.text-area{
    grid-area: text-area;
}


/* 在籍スタッフ */

.staff{
    width: 100%;
    margin-top: 100px;
    padding: 70px 0;
    background-color: #C8D9C8;
    border-radius: 34px;
}

.staff .staff_ttl{
    width: 975px;
    margin: 0 auto;
}


.staff .staff_ttl h2{
    width: 475px;
    margin: 0 auto;
}
.staff .staff_ttl h3{
    text-align: center;
}


.staff .staff-container{
    position: relative;
    text-align: center;
    justify-content: space-between;
}
#nursing .staff .staff-container{
    position: relative;
    text-align: center;
    justify-content: space-around;
}
#hair .staff .staff-container{
    position: relative;
    text-align: center;
    justify-content: space-around;
}
#care .staff .staff-container{
    position: relative;
    text-align: center;
    justify-content: space-around;
}
.staff .staff-container .left-leaf{
    position: absolute;
    bottom: -60px;
    left: -120px;
}

#nursing .recruit-bnr{
    margin-bottom: 100px;
}


/* 運営規定 */

.or h2{
    font-family: 'kinuta-maruminold-stdn';
    font-weight: 400;
    color: #6D7B52;
    font-size: 3rem;
}

.or{
    margin-bottom: 5vw;
    text-align: center;
}
.or a{
    margin: 0 auto;
    text-align: center;
    text-decoration: underline;
    color: #4d4d4d;
    font-size: 1.375rem;
}
.or a::hover{
    animation-delay: .1s;
    color:blue;
}

@media (max-width:600px){
    .or h2{
        font-size: 2rem;
    }
    .or a{
        font-size: 1rem;
    }
}

/* リクルート */
.nummber{
    background-color: #C8D9C8;
    width: 100%;
    border-radius: 34px;
    padding: 100px 0;
}

.nummber .nummber-ttl{
    width: 950px;
    margin: 0 auto;
    text-align: center;
}

.jobtype{
    margin: 150px auto;
}

.service-img{
    width: 100%;
}
.service-img img{
    width: 100%;
    border-radius: 20px;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
.nummber .service-img img,
.jobtype .service-img img{
    box-shadow: none;
}



/* モーダル */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}


/* モーダルのレイアウト */

.job-description dl{
    grid-template-columns: 30% 70%;
    grid-template-rows: repeat(13,auto);
    grid-template-areas: 
    "dt1 dd1"
    "dt2 dd2"
    "dt3 dd3"
    "dt4 dd4"
    "dt5 dd5"
    "dt6 dd6"
    "dt7 dd7"
    "dt8 dd8"
    "dt9 dd9"
    "dt10 dd10"
    "dt11 dd11"
    "dt12 dd12"
    "dt13 dd13";
    align-items: center;
    border-top: #00A63C 1px solid;
}

.job-description dt{
    display: flex;
    align-items: center;
    text-align: left;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #6D7B52;
}

.job-description .area-border{
    justify-content: center;
    align-items: center;
    height: -webkit-fill-available;
    width: auto;
    border-bottom: 1px solid #00A63C;
}
.job-description dd{
    display: flex;
    align-items: center;
    color: #6D7B52;
    line-height: 1.4;
    margin: 0;
    padding: 0 1vw;
    border-bottom: 1px solid #00A63C;
}

.job-description .dd1{
    grid-area: dd1;}

.job-description .dd2{
    grid-area: dd2;}

.job-description .dd3{
    grid-area: dd3;}

.job-description .dd4{
    grid-area: dd4;}

.job-description .dd5{
    grid-area: dd5;}

.job-description .dd6{
    grid-area: dd6;}

.job-description .dd7{
    grid-area: dd7;}

.job-description .dd8{
    grid-area: dd8;}

.job-description .dd9{
    grid-area: dd9;}

.job-description .dd10{
    grid-area: dd10;}

.job-description .dd11{
    grid-area: dd11;}

.job-description .dd12{
    grid-area: dd12;}
.job-description .dd13{
    grid-area: dd13;}

.job-description .dt1{
    grid-area: dt1;}

.job-description .dt2{
    grid-area: dt2;}

.job-description .dt3{
    grid-area: dt3;}

.job-description .dt4{
    grid-area: dt4;}

.job-description .dt5{
    grid-area: dt5;}

.job-description .dt6{
    grid-area: dt6;}

.job-description .dt7{
    grid-area: dt7;}

.job-description .dt8{
    grid-area: dt8;}

.job-description .dt9{
    grid-area: dt9;}

.job-description .dt10{
    grid-area: dt10;}

.job-description .dt11{
    grid-area: dt11;}

.job-description .dt12{
    grid-area: dt12;}
.job-description .dt13{
    grid-area: dt13;}

    .job-description .dt1,
    .job-description .dd1{
        height: 15vw;
    }
    .job-description .dt3,
    .job-description .dd3{
        height: 14vw;
    }
    .job-description .dt4,
    .job-description .dd4{
        height: 20vw;
    }
    .job-description .dt5,
    .job-description .dd5{
        height: 14vw;
    }
    .job-description .dt7,
    .job-description .dd7{
        height: 14vw;
    }
    .job-description .dt8,
    .job-description .dd8{
        height: 13vw;
    }
    .job-description .dt9,
    .job-description .dd9{
        height: 14vw;
    }
    .job-description .dt10,
    .job-description .dd10{
        height: 14vw;
    }
    .job-description .dt13,
    .job-description .dd13{
        height: 13vw;
    }
    .job-description dt,
    .job-description dd{
        height: 12vw;
    }


.job-description a{
    text-decoration: under-line;
}
.job-description a:hover{
    color: aqua;
}

.recruit_btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: block;
    padding: 20px 10px;
    text-align: center;
    outline: none;
    width: 30%;
    border-radius: 5px;
    /*アニメーションの指定*/   
    transition: ease .2s;
    margin: 5vw auto;
    background-color: #DDA848;
}
.recruit_btn span{
    position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
    font-size: 1.0625rem;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
    content: '';
   /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
   /*色や形状*/
    background: #00A63C;/*背景色*/
    width: 100%;
   height: 100%;
   /*アニメーション*/
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
   transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
   transform-origin:left top;
   transform:scale(1, 1);
}

@media (max-width:600px){
    /* モーダルのレイアウト */
.modaal-container{
    max-width: 375px;
}
.modaal-inner-wrapper{
    padding: 0;
}
.job-description dl{
    grid-template-columns: 30% 70%;
    grid-template-rows: repeat(13,auto);
    grid-template-areas: 
    "dt1 dd1"
    "dt2 dd2"
    "dt3 dd3"
    "dt4 dd4"
    "dt5 dd5"
    "dt6 dd6"
    "dt7 dd7"
    "dt8 dd8"
    "dt9 dd9"
    "dt10 dd10"
    "dt11 dd11"
    "dt12 dd12"
    "dt13 dd13";
    align-items: center;
    border-top: #00A63C 1px solid;
}

.job-description dt,
.job-description dd{
    height: 30vw;
}

.job-description dt{
    display: flex;
    align-items: center;
    text-align: left;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 3.8vw;
    color: #6D7B52;
}

.job-description .area-border{
    justify-content: center;
    align-items: center;
    width: auto;
    border-bottom: 1px solid #00A63C;
}
.job-description dd{
    color: #6D7B52;
    line-height: 1.4;
    margin: 0;
    border-bottom: 1px solid #00A63C;
    font-size: 3vw;
}

.job-description dd p{
    font-size: 3vw;
    line-height: 1.4;
}

.job-description .dd1{
    grid-area: dd1;}

.job-description .dd2{
    grid-area: dd2;}

.job-description .dd3{
    grid-area: dd3;}

.job-description .dd4{
    grid-area: dd4;}

.job-description .dd5{
    grid-area: dd5;}

.job-description .dd6{
    grid-area: dd6;}

.job-description .dd7{
    grid-area: dd7;}

.job-description .dd8{
    grid-area: dd8;}

.job-description .dd9{
    grid-area: dd9;}

.job-description .dd10{
    grid-area: dd10;}

.job-description .dd11{
    grid-area: dd11;}

.job-description .dd12{
    grid-area: dd12;}
.job-description .dd13{
    grid-area: dd13;}

.job-description .dt1{
    grid-area: dt1;}

.job-description .dt2{
    grid-area: dt2;}

.job-description .dt3{
    grid-area: dt3;}

.job-description .dt4{
    grid-area: dt4;}

.job-description .dt5{
    grid-area: dt5;}

.job-description .dt6{
    grid-area: dt6;}

.job-description .dt7{
    grid-area: dt7;}

.job-description .dt8{
    grid-area: dt8;}

.job-description .dt9{
    grid-area: dt9;}

.job-description .dt10{
    grid-area: dt10;}

.job-description .dt11{
    grid-area: dt11;}

.job-description .dt12{
    grid-area: dt12;}
.job-description .dt13{
    grid-area: dt13;}

.job-description .dt1,
.job-description .dd1{
    height: 40vw;
}
.job-description .dt3,
.job-description .dd3{
    height: 28vw;
}
.job-description .dt4,
.job-description .dd4{
    height: 90vw;
}
.job-description .dt5,
.job-description .dd5{
    height: 35vw;
}
.job-description .dt6,
.job-description .dd6{
    height: 42vw;
}
.job-description .dt7,
.job-description .dd7{
    height: 30vw;
}
.job-description .dt8,
.job-description .dd8{
    height: 37vw;
}
.job-description .dt9,
.job-description .dd9{
    height: 30vw;
}
.job-description .dt10,
.job-description .dd10{
    height: 37vw;
}
.job-description .dt12,
.job-description .dd12{
    height: 45vw;
}
.job-description .dt13,
.job-description .dd13{
    height: 30vw;
}
.job-description dt,
.job-description dd{
    height: 30vw;
}

.job-description a{
    text-decoration: under-line;
}
.job-description a:hover{
    color: aqua;
}

.recruit_btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: block;
    padding: 20px 10px;
    text-align: center;
    outline: none;
    width: 60%;
    border-radius: 5px;
    /*アニメーションの指定*/   
    transition: ease .2s;
    margin: 5vw auto;
    background-color: #DDA848;
}
.recruit_btn span{
    position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
    font-size: 4vw;
}
}

    /* デイサービス */
    .point-block{
        padding: 100px;
        text-align: center;
    }
    
    .point-block h2{
        text-align: center;
        margin: 0 auto 30px;
    }

@media (max-width:600px){
    .point-block{
        padding: 10vw 0;
        margin: 0 auto;
        width: 90vw;
        text-align: center;
    }
    
    .point-block h2{
        text-align: center;
        margin: 0 auto;
        width: 24vw;
    }
    .point-block h2 img{
        width: 100%;
    }
}

#day .sec_point{
    width: 100%;
}
#day .sec_point .sec_point-img{
    width: 975px;
    margin: 0 auto;
}
#day .sec_point .point{
    width: 975px;
    margin: 0 auto;
}

#day .sec_point .point-container{
    width: 975px;
    margin: 0 auto;
}
    .point3{
        margin-top: 10vw;
        width: 100%;
        background-color: #C8D9C8;
        border-radius: 5px;
    }
#day .sec_point .right-leaf{
    position: absolute;
    right: 0;
    bottom: 0;

}

#day .service{
    padding: 5vw 0;
    background-color: #E7D4A5;
}

.point-card p{
    font-family: 'Noto Sans Jp';
    font-weight: 600;
    color: #4d4d4d;
}
.point-img img{
    width: 100%;
    border-radius: 20px;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}


@media (max-width:600px){
    #day .service{
        margin-top: 50vw;
        background-color: #E7D4A5;
        padding: 20vw 0;
    }
        
}

/* デイサービス特徴セクション */
@media (max-width:600px){
    .sec_point{
        position: relative;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }

    .sec_point .right-leaf{
        position: absolute;
        bottom: -140px;
        right: -105px;
    }

    #day .sec_point .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
        margin: 0 auto;
    } 

    #day .sec_point .sec_point-img{
        width: 90vw;
        margin: 0 auto;
    }

    .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
    }

    .point .sec_point-img{
        width: 90vw;
        grid-area: img-area;
    }
    .point .sec_point-img img{
        width: 90vw;
    }
    .point h2{
        grid-area: h1-area;
        width: 90vw;
        text-align: center;
        margin: 0;
    }
    .point h2 img{
        width: 20vw;
    }
    .point h2{
        grid-area: h2-area;
        width: 90vw;
        margin: 0;
    }
    .point h3{
        font-family: "kinuta-maruminold-stdn", serif;
        font-size: 1.375rem;
        font-weight: 400;
        grid-area: h3-area;
        color: #6D7B52;
        align-self: end;
        width: 90vw;
        margin: 0;
        line-height: 1.7;
    }
    .point p{
        grid-area: text-area;
        font-size: 3.3vw;
        font-weight: 600;
    }

    .point-container{
        width: 90vw;
        grid-auto-rows: 367px;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-column-gap: 33px;
        margin-top: 60px;
    }
    #day .sec_point .point-container{
        width: 90vw;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(auto-fill, 42.5vw);
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        margin: 4vw auto 0;
    }
    #day .sec_point .point-container img{
        width: 100%;
    }
    .point-card p{
        width: 100%;
        font-size: 3vw;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: .8vw;
        font-family: 'Noto Sans Jp';
    }
    
    #day .point-block:last-child h2{
        width: 30vw;
    }
    #day .point-block:nth-of-type(2) h2{
        width: 60vw;
    }
    #day .sec_point .right-leaf{
        position: absolute;
        right: 0;
        bottom: 21vw;
        
    }
    #day .sec_point .right-leaf img{
        width: 15vw;
        
    }
}
#hair .service.use h1 img{
    width: 25vw;
}
#hair .service .service-container .service-card .step{
    text-align: left;
}
#hair .service .service-container .service-card .step img{
    width: 6vw;
}
/* ナースステーション特徴セクション */
@media (max-width:600px){
    .sec_point{
        position: relative;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }

    #nursing .sec_point .right-leaf{
        position: absolute;
        width: 20vw;
        bottom: -10vw;
        right: 0;
    }
    #nursing .sec_point .right-leaf img{
        width: 100%;
    }

    .sec_point .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
        margin: 0 auto;
    } 

    .sec_point .sec_point-img{
        width: 90vw;
        margin: 0 auto;
    }
    
    .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
    }
    
    .point .sec_point-img{
        width: 90vw;
        grid-area: img-area;
    }
    .point .sec_point-img img{
        width: 90vw;
    }
    .point h1{
        grid-area: h1-area;
        width: 90vw;
        text-align: center;
        margin: 0;
    }
    #recruit .sec_point img[alt="特徴-Point-"],
    .sec_point img[alt="特徴-Point-"]{
        width: 27vw;
    }
    .point h2{
        grid-area: h2-area;
        width: 90vw;
        margin: 0;
    }
    .point h3{
        font-family: "kinuta-maruminold-stdn", serif;
        font-size: 1.375rem;
        font-weight: 400;
        grid-area: h3-area;
        color: #6D7B52;
        align-self: end;
        width: 90vw;
        margin: 0;
        line-height: 1.7;
    }
    .point p{
        grid-area: text-area;
        font-size: 3.3vw;
        font-weight: 600;
    }

    .point-container{
        width: 90vw;
        grid-auto-rows: 367px;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-column-gap: 33px;
        margin-top: 60px;
    }
     .sec_point .point-container{
        width: 90vw;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(auto-fill, 42.5vw);
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        margin: 4vw auto 0;
    }
    .sec_point .point-container img{
        width: 100%;
    }
    .point-card p{
        width: 100%;
        font-size: 3vw;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: .8vw;
    }
    

    #nursing .service{
        border-radius: 5px;
        padding: 5vw 0;
        margin-top: 20vw;
    }
    .service-container{
        width: 90vw;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(auto-fill, 42.5vw);
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        margin: 4vw auto 0;
    }
    .service-container img{
        width: 100%;
    }
    .service-card h3{
        width: 100%;
        font-size: 4vw;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: .8vw;
        margin: 0;
    }
    .service-card p{
        width: 100%;
        font-size: 3vw;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: .8vw;
    }
    #hair .use .service-container{
        width: 90vw;
        grid-auto-rows: 1fr;
        grid-column-gap: 5vw;
        grid-template-columns: none;
        grid-row-gap: 12vw;
        margin: 4vw auto 0;
        justify-content: center;
    }
    #hair .service.use h1 img{
        width: 40vw;
    }
    #hair .service .service-container .service-card .step img{
        width: 18vw;
    }
}
/* ケアプランセンター特徴セクション */
@media (max-width:600px){
    .sec_point{
        position: relative;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }

    #care .sec_point .right-leaf{
        position: absolute;
        width: 20vw;
        bottom: 0;
        right: 0;
    }

    .sec_point .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
        margin: 0 auto;
    } 
    #recruit .sec_point .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
        margin: 0 auto;
    } 

    .sec_point .sec_point-img{
        width: 90vw;
        margin: 0 auto;
    }

    .point{
        width: 90vw;
        grid-template-columns: 90vw;
        grid-template-rows: auto;
        grid-template-areas: 
        "h1-area"
        "img-area"
        "h2-area"
        "h3-area"
        "text-area";
        margin: 5vw auto;
        grid-row-gap: 2vw;
        align-items: center;
    }

    .point .sec_point-img{
        width: 90vw;
        grid-area: img-area;
    }
    .point .sec_point-img img{
        width: 90vw;
    }
    .point h2{
        grid-area: h1-area;
        width: 90vw;
        text-align: center;
        margin: 0;
    }
    .point h2 img{
        width: 20vw;
    }
    .point h3{
        grid-area: h2-area;
        width: 90vw;
        margin: 0 auto;
        text-align: center;
    }
    .point h4{
        font-family: "kinuta-maruminold-stdn", serif;
        font-size: 4.5vw;
        font-weight: 400;
        grid-area: h3-area;
        color: #6D7B52;
        align-self: end;
        width: 90vw;
        margin: 0;
        line-height: 1.7;
    }
    .point p{
        grid-area: text-area;
        font-size: 3.3vw;
        font-weight: 400;
        margin-top: 0;
    }

    .point-container{
        width: 90vw;
        grid-auto-rows: 367px;
        grid-template-columns: repeat(auto-fill, 300px);
        grid-column-gap: 33px;
    }
     .sec_point .point-container{
        width: 90vw;
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(auto-fill, 42.5vw);
        grid-column-gap: 5vw;
        grid-row-gap: 5vw;
        margin: 4vw auto 0;
    }
    .sec_point .point-container img{
        width: 100%;
    }
    .point-card p{
        width: 100%;
        font-size: 3vw;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: .8vw;
    }
    

    #care .service{
        border-radius: 5px;
        padding: 20vw 0;
        margin-top: 20vw;
    }
    #care .service-container,
    #hair .service-container{
        width: 74vw;
        grid-auto-rows: 1fr;
        grid-row-gap:5vw;
        grid-template-columns: none;
        margin: 4vw auto 0;
    }
    #care .service-card h3,
    #hair .service-card h3{
        font-size: 1rem;
    }
    #care .service-card p,
    #hair .service-card p{
        font-size: 1rem;
    }
    .service-container img{
        width: 100%;
    }
    .service-card h3{
        width: 100%;
        font-size: 2.6vw;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: .8vw;
        margin: 1.5vw 0;
    }
    .service-card p{
        width: 100%;
        font-size: 2.6vw;
        line-height: 1.2;
        font-weight: 400;
        letter-spacing: .8vw;
    }
}

.service-info dl{
    position: relative;
    width: 975px;
    margin: 50px auto 0;
    align-items: center;
    grid-template-columns: 30% 70%;
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
     "dt1 dd1"
     "dt2 dd2"
     "dt3 dd3"
     "dt4 dd4"
     "dt5 dd5";
    background-color: #fff;
    border-radius: 34px;
}
.service-info .area-border{
    width: auto;
    height: 8vw;
    border-bottom: 1px solid #00A63C;
}


.service-info .dt1{
    grid-area: dt1;
}
.service-info .dt2{
    grid-area: dt2;
}
.service-info .dt3{
    grid-area: dt3;
}
.service-info .dt4{
    grid-area: dt4;
}
.service-info .dt5{
    grid-area: dt5;
}

.service-info .dd1{
    grid-area: dd1;
}
.service-info .dd2{
    grid-area: dd2;
}
.service-info .dd3{
    grid-area: dd3;
}
.service-info .dd4{
    grid-area: dd4;
}
.service-info .dd5{
    grid-area: dd5;
}

.service-info dt{
    display: flex;
    align-items: center;
    width: 100%;
    height: 8vw;
    padding-left: 5vw;
}

.service-info dd{
    display: flex;
    align-items: center;
    margin: 0;
    height: 8vw;
    /* padding: 30px 0; */
    width: 100%;
    border-bottom: 1px solid #00A63C;
}

.service-info dl .area-border:nth-of-type(5){
    border: none;
}
.service-info .dd5{
    border: none;
}

.service-info .yellow-leaf{
    position: absolute;
    bottom: -134px;
    left: -150px;
    z-index: 1;
}



/* 一日の流れ */
.flow_oneday{
    margin-bottom: 100px;
}
.flow_oneday h2 img{
    display: block;
    margin: 0 auto;
}
.one-day{
    width: 297px;
    justify-content: space-between;
}

.am-pm{
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #6D7B52;
    justify-content: space-around;
}

.am-pm h3{
    display: inline-block;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #6D7B52;
    justify-content: space-around;
}


.oneday-container{
    width: 950px;
    justify-content: space-between;
}
.oneday-time{
    width: 297px;
    justify-content: space-between
}

.oneday-contents{
    margin-top: 12px;
    width: 527px;
    border-top: 1px solid #00A63C;
}

.oneday-contents div{
    border-bottom: 1px solid #00A63C;
}

.oneday-contents div:nth-of-type(1) p{
    padding: 63px 0;
}
.oneday-contents div:nth-of-type(2) p{
    padding: 27px 0;
}
.oneday-contents div:nth-of-type(3) p{
    padding: 27px 0;
}

.oneday-time p{
    text-align: center;
    display: inline-block;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.2rem;
}


.flow_oneday .flow-line{
    margin-top: 9px;
}

.AM9{
    margin-top: 122px;
}
.PM12{
    margin-top: 267px;
}

.PM1{
    padding-left: 8px;
}
.PM2{
    padding-left: 8px;
    margin-top: 122px;
}
.PM4{
    padding-left: 8px;
    margin-top: 267px;
}
@media (max-width:600px){
    /* 一日の流れ */
.flow_oneday{
    width: 90vw;
    margin: 0 auto;
}
.one-day{
    width: 90vw;
    margin: 0 auto;
    justify-content: space-between;
}
.flow_oneday h2{
    width: 100%;
    text-align: center;
}
.flow_oneday h2 img{
    width: 40vw;
}

.oneday-time .morning{
    width: 42.5vw;
}


.am-pm{
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #6D7B52;
    justify-content: space-around;
}

.am-pm h3{
    display: inline-block;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.375rem;
    color: #6D7B52;
    justify-content: space-around;
}


.oneday-container{
    width: 85vw;
    justify-content: space-between;
    flex-direction: column;
}
.oneday-time{
    width: 42.5vw;
    justify-content: space-between;
    position: relative;
}

.oneday-contents{
    position: absolute;
    margin-top: -3vw;
    width: 90vw;
    border-top: 1px solid #00A63C;
}

.oneday-contents div{
    border-bottom: 1px solid #00A63C;
}

.oneday-contents div p{
    font-weight: 500;
}

.oneday-contents div:nth-of-type(1) p{
    padding: 15vw 0;
    text-align: center;
}
.oneday-contents div:nth-of-type(2) p{
    padding: 15vw 0;
}
.oneday-contents div:nth-of-type(3) p{
    padding: 20vw 0;
    text-align: center;
}

.oneday-time p{
    text-align: center;
    display: inline-block;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 1.2rem;
    width: 42.5vw;
}



.AM9{
    margin-top: 30vw;
}
.PM12{
    margin-top: 102vw;
}

.PM1{
    padding-left: 8px;
}
.PM2{
    padding-left: 8px;
    margin-top: 30vw;
}
.PM4{
    padding-left: 8px;
    margin-top: 102vw;
}
}

/* サービススマホ */
@media (max-width:600px){

    .service h2{
        width: 90vw;
        margin: 10vw auto;
        text-align: center;
    }

    .service h2 img{
        width: 38vw;
    }

    .service-info dl{
    position: relative;
    width: 90vw;
    margin: 5vw auto 0;
    align-items: center;
    grid-template-columns: 40% 60%;
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
     "dt1 dd1"
     "dt2 dd2"
     "dt3 dd3"
     "dt4 dd4"
     "dt5 dd5";
    background-color: #fff;
    border-radius: 5px;
}
.service-info .area-border{
    width: auto;
    height: 28vw;
    border-bottom: 1px solid #00A63C;
}

.service-info dt{
    display: flex;
    align-items: center;
    width: 100%;
    height: 28vw;
    padding-left: 5vw;
}
.service-info dd{
    margin: 0;
    height: 28vw;
    padding-right: 5vw;
    width: 100%;
    border-bottom: 1px solid #00A63C;
}

.service-info dl dd:nth-of-type(5){

    border: none;
}


.service-info .yellow-leaf{
    position: absolute;
    width: 20vw;
    bottom: -66vw;
    left: -5vw;
    z-index: 1;

}
}

/* 数字でみる */
@media (max-width:600px){
.nummber{
    border-radius: 5px;
    padding: 20vw 0;
    margin-top: 20vw;
}

.nummber .nummber-ttl{
    width: 90vw;
}
.nummber-ttl h1{
    width: 30vw;
    margin: 0 auto;
}
.nummber-ttl h1 img{
    width: 100%;
}

#recruit .service-container{
    width: 90vw;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(auto-fill, 42.5vw);
    grid-column-gap: 5vw;
    grid-row-gap: 5vw;
    margin: 4vw auto 0;
}
.service-container img{
    width: 100%;
}

}


/* お客様の声 */
@media (max-width:600px){

    .interview h2{
        width: 90vw;
        text-align: center;
    }
    .interview h2 img{
        width: 40vw;
    }

    .interview{
        margin-top: 100px;
        width: 100%;
    }
    
    
    .interview h3{
        width: 90vw;
        line-height: 1.25;
        height: auto;
        margin: 0 auto;
        font-size: 1.375rem;
    }
    .interview .slider  .interview-content{
        width: 80vw;
        height: 81vw;
        background-color: #fff;
    }
    
    
    .interview-wrap{
        position: relative;
        width: 90vw;
        height: auto;
        margin: 40px auto 0;
        padding: 0 5vw;
        background-color: #fff;
        border-radius: 5px;
    
    }
    .interview-wrap .right-leaf{
        position: absolute;
        bottom: 2vw;
        right: -3vw;
    }
    .interview-wrap .right-leaf img{
        width: 10vw;
    }
    .interview-content{
        margin: 0 auto;
        grid-template-columns: 40vw 40vw;
        grid-template-rows: 15vw 15vw 47vw;
        grid-template-areas: 
        "h4-area h4-area"
        "img-area h5-area"
        "img-area text-area";
        grid-column-gap: 3vw;
    }

    .interview-img{
        width: 40vw;
    }

    .interview-img img{
        width: 100%;
    }
    .interview-content h4{
        grid-area: h4-area;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: "kinuta-maruminold-stdn", serif;
        font-weight: 400;
        font-size: 4vw;
        color: #6D7B52;
        margin-top: 5vw;
    }
    .interview-content h5{
        grid-area: h5-area;
        font-family: "kinuta-maruminold-stdn", serif;
        font-weight: 400;
        font-size: 3vw;
        color: #6D7B52;
        margin: 0;
        line-height: 1.5;
    }
    .interview-content .interview-img{
        grid-area: img-area;
    }
    .interview-content p.text-area{
        grid-area: text-area;
        font-size: 2vw;
    }
    .interview-content p{
        width: 37vw;
        font-size: 2vw;
        line-height: 1.5;
    }
    .interview-content .houkan{
        margin-top: -2vw;
    }
    .slick-prev {/*戻る矢印の位置と形状*/
        left: 2vw;
        transform: rotate(-135deg);
        z-index: 1;
        top: 50vw;
    }
    
    .slick-next {/*次へ矢印の位置と形状*/
        right: 2vw;
        transform: rotate(45deg);
        z-index: 1;
        top: 50vw;
    }


#recruit .interview-content{
    margin: 0 auto;
    grid-template-columns: 40vw 40vw;
    grid-template-rows: 8vw 7vw 15vw 47vw;
    grid-template-areas: 
    "h4-area h4-area"
    "job-area job-area"
    "img-area h5-area"
    "img-area text-area";
    grid-column-gap: 3vw;
}



.interview-content h4{
    grid-area: h4-area;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 4vw;
    color: #6D7B52;
    margin-top: 2vw;
}

#recruit .interview-content p.job{
    grid-area: job-area;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 3vw;
    color: #6D7B52;
    width: 100%;
    margin-top: -1vw;
}
    


#recruit .interview-content h5{
    grid-area: h5-area;
    font-family: "kinuta-maruminold-stdn", serif;
    font-weight: 400;
    font-size: 3vw;
    color: #00A63C;
}

.interview-content .interview-img{
    grid-area: img-area;
}
.interview-content p.text-area{
    grid-area: text-area;
}

.jobtype{
    margin: 150px auto;
}

.job-ttl{
    width: 90vw;
    margin: 0 auto;
}
.job-ttl h2{
    width: 40vw;
    margin: 0 auto;
}
.job-ttl h2 img{
    width: 100%;
}

    
}

/* スタッフスマホ */
@media (max-width:600px){
    /* 在籍スタッフ */

.staff{
    width: 100%;
    margin-top: 20vw;
    padding: 20vw 0;
    background-color: #C8D9C8;
    border-radius: 5px;
}

.staff .staff_ttl{
    width: 90vw;
    margin: 0 auto;
    text-align: center;
}

.staff .staff_ttl h2{
    width: 45vw;
    text-align: center;
    margin: 0 auto;
}
.staff .staff_ttl h2 img{
    width: 100%;
}

.staff .staff_ttl h3{
    width: 100%;
    margin: 5vw 0;
    font-size: 1.375rem;
    line-height: 1.25;
}

.staff .staff-container{
    position: relative;
    text-align: center;
    justify-content: space-evenly;
    width: 90vw;
}
.staff .staff-container .left-leaf{
    position: absolute;
    width: 15vw;
    bottom: -19vw;
    left: -5vw;
}
.staff .staff-container .left-leaf img{
    width: 100%;
}

.staff-card{
    width: 27vw;
}
.staff-card p{
    font-size: 3vw;
    width: 27vw;
    line-height: 1.5;
}

.staff-card img{
    width: 100%;
    height: auto;
}

#nursing .recruit-bnr{
    margin-bottom: 100px;
}
}

/* -------------------------------------料金表 */

#hair .price{
    margin-bottom: 10vw;
}

/*tabの形状*/
.price-wrapper{
    background-color: #fff;
    border-radius: 15px;
}

.tab{
	display: flex;
    align-items: center;
    justify-content: center;
}

.tab li{
    display: flex;
    align-items: center;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
    font-family: "Noto Sans Jp", serif;
    font-weight: 600;
    font-size: 2.2rem;
    color: #6D7B52;
}

.tab li a img{
    width: 2.2rem;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
}


/*エリアの表示非表示と形状*/
.tab-area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.tab-area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.price h2{
    text-align: center;
}

.price h2 img{
    width: 10vw;
}

@media (max-width:600px){
    .price h2 img{
        width: 30vw;
    }
}

.price table{
    width: 100%;
}

.price h3{
    text-align: center;
}

.price table tr{
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.price table th,
.price table td{
    display: block;
    width: 50%;
    margin: 20px 0;
}

.price table th{
    text-align-last: left;
    font-family: "Noto Sans Jp", serif;
    font-weight: 600;
    font-size: 1.5625rem;
    color: #4d4d4d;
}
.price table td{
    text-align: right;
    font-family: "Noto Sans Jp", serif;
    font-weight: 400;
    font-size: 1.5625rem;
    color: #6D7B52;
}

.price-notes ul{
    font-family: "Noto Sans Jp", sans-serif;
    font-weight: 400;
    display: block;
    height: auto;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.875rem;
    color: #6D7B52;
    padding: 0;
}
.price-notes ul li{
    margin-bottom: 1vw;
}
.tab-area h3{
    font-family: 'Noto Sans Jp';
}
@media (max-width:600px){
    .tab li a{
        display: block;
        background:#ddd;
        margin:0 2px;
        padding:10px 20px;
        font-family: "Noto Sans Jp", serif;
        font-weight: 400;
        font-size: 4vw;
        color: #6D7B52;
    }

    .tab li a img{
        width: 5vw;
    }

    .tab-area {
        display: none;/*はじめは非表示*/
        opacity: 0;/*透過0*/
        background: #fff;
        padding:20px 20px;
    }

    .tab-area h3{
        font-family: 'Noto Sans Jp';
        font-size: 1.375rem;
    }
    .price h1 img{
        width: 30vw;
    }
    .price table th{
        font-size: 4vw;
    }
    .price table td{
        font-size: 4vw;
    }
    .price-notes ul{
        font-size: 3vw;
        line-height: 1.875rem;
    }
}

/* ---------------------------------------hair一日の流れ */
.time-schedule ul{
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
    display: block;
    height: auto;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.875rem;
    color: #6D7B52;
    padding: 0;
}
.time-schedule ul li{
    margin-bottom: 1vw;
}
@media (max-width:600px){
    .time-schedule ul{
        font-family: "BIZ UDGothic", sans-serif;
        font-weight: 400;
        display: block;
        height: auto;
        margin: 0 auto;
        font-size: 4vw;
        line-height: 1.875rem;
        color: #6D7B52;
        padding: 4vw;
    }
}
/*　---------------------------------------注意事項 */
.notes{
    margin-bottom: 10vw;
}

.notes h2{
    text-align: center;
}

.notes h2 img{
    width: auto;
}

.notes ul{
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
    display: block;
    height: auto;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.875rem;
    color: #6D7B52;
}
.notes ul li{
    margin-bottom: 2vw;
}

@media (max-width:600px){
    .notes h2 img{
        width: 40vw;
    }
    .notes ul{
        font-family: "BIZ UDGothic", sans-serif;
        font-weight: 400;
        display: block;
        height: auto;
        margin: 0 auto;
        font-size: 4vw;
        line-height: 6vw;
        color: #6D7B52;
        padding: 0 15px;
    }
}

/* ----------------------------訪問理容お問い合わせ */
.hair-contact h2{
    text-align: center;
}

.hair-contact h2 img{
    width: auto;
}
.hair-contact p{
    text-align: center;
    margin-bottom: 2vw;
}

.hair-contact table{
    margin: 0 auto;
    padding: 5vw 5vw 3vw 5vw;
    background-color: #fff;
    border-radius: 15px;
}

.hair-contact tr{
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    border-collapse: separate;
    border-spacing: 3vw 1vw;
}
.hair-contact tr th{
    display: flex;
    justify-content: space-between;
    width: 40%;
    font-family: 'Noto Sans Jp';
    font-size: 1.375rem;
    font-weight: 500;
    color: #6D7B52;
    margin-bottom: 2vw;
}

.hair-contact tr th span::after{
    content: "│";
}

.hair-contact tr td{
    width: 60%;
    margin-bottom: 2vw;
}
.hair-contact tr td,
.hair-contact tr td a{
    font-family: 'Noto Sans Jp';
    font-size: 1.375rem;
    font-weight: 500;
    color: #6D7B52;
}

@media (max-width:600px){
    .hair-contact h2 img{
        width: 50vw;
    }
    .hair-contact tr th{
        font-size: 4vw;
    }
    .hair-contact tr td,
.hair-contact tr td a{
    font-size: 3vw;
}
}
.container {
    width: 975px;
    padding: 40px 0;
    margin-inline: auto;
    /* カウンターをリセット */
    counter-reset: step-index;
  }
@media (max-width:600px){
    .container{
        width: 100%;
    }
}
  
  .step {
    display: flex;
    position: relative;
    padding-bottom: 40px;
    align-items: center;
    /* カウンターを増やす */
    counter-increment: step-index;
  }
  @media (max-width:600px){
    .step{
        flex-direction: column;
        align-items: baseline;
    }
  }
  
  /* 縦線の描画 */
  .step:not(:last-child)::before {
    position: absolute;
    top: 23px;
    left: 0.43rem;
    width: 3px;
    height: 100%;
    content: "";
    background-color: #c3ed64;
  }
  
  @media (max-width:600px){
    .step:not(:last-child)::before{
        top: 30px;
    }
  }
  .step-title {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    align-items: center;
    font-weight: bold;
    color: #202a56;
    width: 30%;
    font-size: 22px;
  }
  @media (max-width:600px){
    .step-title{
        width: auto;
    }
  }
  
  .step-title::before {
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    content: '';
    background-color: #00a63c;
    border-radius: 50%;
  }
  
  .step-text {
    padding: 15px 0 15px 50px;
    font-size: 20px;
    line-height: 1.5;
    color: #202a56;
    width: 70%;
    background-color: #fff;
    border-radius: 30px;
  }
  @media (max-width:600px){
    .step-text{
        width: 80%;
        padding: 15px;
    }
  }

/* 福利厚生 */

  .benefit h2{
    text-align: center;
  }
  @media (max-width:600px){
    .benefit h2 img{
        width: 40%;
    }
  }
  .benefit-wrap{
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
  }
  @media (max-width:600px){
    .benefit-wrap{
        gap: 30px;
    }
  }
  .benefit-card1,
  .benefit-card2{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 30px 80px 1fr;
    border-radius: 32px;
    box-shadow: 0 3px 6px rgba(0,0,0,.1);
    box-sizing: border-box;
    padding: 25px;
    background-color: #fff;
    grid-template-areas: 
    "title"
    "icon"
    "text";
    gap: 15px;
  }
  .b-card_title{grid-area: title;}
  .b-card_icon{
    grid-area: icon;
    max-height: 100%;
    margin: 0 auto;
}
  .b-card_text{
    grid-area: text;
    width: auto;
}

  .benefit-card1 h3,
  .benefit-card2 h3{
    margin: 0;
    text-align: center;
    font-size: 25px;
    font-family:"kinuta-maruminold-stdn";    
    color: #00A63C;
  }

  @media (max-width:600px){
    .benefit-card1 h3,
    .benefit-card2 h3{
        font-size: 20px;
  }

  }

  .benefit-card1{
    width: 450px;
    height: 399px;
  }

  .benefit-card2{
    width: 450px;
    height: 522px;
  }
@media (max-width:600px){
    .benefit-card1,
    .benefit-card2{
        width: 90%;
        height: auto;
        padding: 20px;
    }
}
/*ヘッダーにある１行のお知らせ
---------------------------------------------------------------------------*/
.new-top * {margin: 0;padding: 0;}

/*ブロック全体*/
.new-top {
    position: relative;
	width: 1208px;
	display: flex;
	align-items: center;
    margin: 30px auto 0;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: #fff;	/*背景色。*/
	border-radius: 5px;	/*角を丸くする*/
    z-index: 8;
}

/*マウスオン時に透明度を80%に*/
.new-top a:hover {
	opacity: 0.8;
}

/*「お知らせ」の見出し*/
.new-top h2 {
	font-size: 1rem;
	font-weight: normal;
	background: #DDA848;	/*背景色*/
	color: #fff;		/*文字色*/
	border-radius: 3px;	/*角を少しだけ丸く*/
	margin-right: 1rem;	/*右に空けるスペース。テキストブロックとの間に空けるスペースです。*/
	padding: 0 1rem;	/*見出し内の余白。上は0で、左右に１文字分。*/
}

/*テキストのブロック*/
.new-top .text {
	flex: 1;
	
	/*以下4行は、末尾を...として１行にまとめる為のスタイル*/
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.new-top img{
    position: absolute;
    bottom: 0;
    right: 30px;
    z-index: 10;
    width: 100px;
    height: auto;
}
@media (max-width:600px){
    .new-top{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .new-top .text{
        font-size: 0.9rem;
    }
    .new-top img{
        right: 5px;
        width: 50px;
    }
}