@charset "UTF-8";

.under-service-content{
margin-bottom: 80px;
}

.under-service-read{
margin-bottom: 40px;
}

.under-service-read p{
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 2em;
}

.under-service-read p.title{
font-size: 18px;
font-weight: 500;
}

.under-service-block{
padding-bottom: 40px;
margin-bottom: 60px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: var(--c-orange-l);
}

.under-service-block.green{
background: var(--c-green-l);
}

.under-service-block .under-service-title{
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
background: var(--c-orange);
color: #fff;
text-align: center;
padding: 15px;
font-size: 21px;
}

.under-service-block.green .under-service-title{
background: var(--c-green);
}


/*title icons*/
.under-service-block .under-service-title.icon-disability01:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/disability/disability_ico01w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-disability02:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/disability/disability_ico02w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-disability03:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/disability/disability_ico03w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-disability04:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/disability/disability_ico04w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-age01:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/age/age_ico01w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-age02:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/age/age_ico02w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-age03:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/age/age_ico03w.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .under-service-title.icon-infant:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/infant/infant_ico01.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-block .layout .item:nth-of-type(2){
padding: 2em;
}

.under-service-block .layout .item:nth-of-type(2) p{
font-size: 14px;
line-height: 2em;
margin: 0;
}

.under-service-facility{
margin: 0 2em;
background: #fff;
padding: 1em;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.under-service-facility .facility-title{
display: block;
text-align: center;
background: #F6F6F6;
padding: 1em 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.under-service-facility .facility-title:before{
content: "";
width: 30px;
height: 24px;
background-image: url(../img/service/service/service_ico01.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -5px;
}

.under-service-facility .item dl dd{
margin: 0;
}

.under-service-facility .item:nth-of-type(2){
padding-top: 1em;
}

.under-service-facility .item:nth-of-type(2) a{
display: block;
color: #000;
font-size: 14px;
margin-bottom: 10px;
}

.under-service-facility .item:nth-of-type(2) a:before{
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: solid 5px transparent;
border-right: solid 5px transparent;
border-bottom: solid 5px transparent;
border-left: solid 5px var(--c-orange);
margin-right: 5px;
}

.green .under-service-facility .item:nth-of-type(2) a:before{
border-left: solid 5px var(--c-green);
}

.under-service-content .provided{
border-top: 2px dashed var(--c-orange);
text-align: center;
}

.under-service-content .provided.green{
border-top: 2px dashed var(--c-green);
}

.under-service-content .provided span{
display: inline-block;
border: 1px solid var(--c-orange);
color: var(--c-orange);
background: #fff;
padding: 15px;
min-width: 230px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.under-service-content .provided.green span{
border: 1px solid var(--c-green);
color: var(--c-green);
}

.provided-list{
list-style: none;
margin: 0;
padding: 0 20px;
}

.provided-list li{
background: #F6F6F6;
padding: 30px;
margin-bottom: 30px;
position: relative;
}

.provided-list li:before{
content: "";
width: 25px;
height: 25px;
background: #ECECEC;
background: linear-gradient(45deg, rgba(236, 236, 236, 1) 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
position: absolute;
top: 0;
right: 0;
-moz-box-shadow: 0px 0px 0px 3px #fff;
-webkit-box-shadow: 0px 0px 0px 3px #fff;
box-shadow: 0px 0px 0px 3px #fff;
}

.provided-list li span{
display: block;
font-size: 14px;
line-height: 2em;
}

.provided-list li span.title{
font-size: 18px;
border-bottom: 2px dotted #D9D9D9;
padding-bottom: 1em;
margin-bottom: 1em;
}

.provided-list li span.title:before{
content: "";
width: 17px;
height: 13px;
background-image: url(../img/service/service/service_check_orange.svg);
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
margin-right: 10px;
vertical-align: -1px;
}

.provided-list.green li span.title:before{
background-image: url(../img/service/service/service_check_green.svg);
}

#disability01,#disability02,#disability03,#age01,#age02,#age03{
display: block;
margin-bottom: 100px;
padding-top: 80px;
margin-top: -80px;
}

#age02 h4{
font-size: 120%;
text-align: center;
}

.service-nav{
list-style: none;
margin: 0 0 80px;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 3%;
}

.service-nav.bottom-nav{
padding-top: 80px;
border-top:1px solid #D0D0D0;
text-align: center;
}

.service-nav li{
display: block;
max-width: 320px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;

flex-basis: 48%;
}

.service-nav li a{
display: block;
position: relative;
border-radius: 20px;
padding: 12px 10px 35px;
text-decoration: none;
color: #000;
text-align: center;
font-size: 75%;
}

.service-nav li a .bg{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%
}

.service-nav li a .bg img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
border-radius: 20px;
-webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2)); /* SafariなどのWebkitブラウザ用 */
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2)); 
}

.service-nav.bottom-nav li a .bg img{
object-position: top;
border-radius: 20px;
}

.service-nav li a:after{
content: "";
width: 60px;
height: 60px;
background-image: url(../img/service/service/service_arrow_orange.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
bottom: 0;
left: calc(50% - 30px);
z-index: 1;
-webkit-transform: translateY(50%) scale(1,-1);
transform: translateY(50%) scale(1,-1);
}

.service-nav.bottom-nav li a:after{
content: "";
width: 60px;
height: 60px;
background-image: url(../img/service/service/service_arrow_orange.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 3px;
left: calc(50% - 30px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.service-nav.green li a:after{
background-image: url(../img/service/service/service_arrow_green.svg);
}

.service-nav.green.bottom-nav li a:after{
background-image: url(../img/service/service/service_arrow_green.svg);
}

.service-nav li a>img{
height: 30px;
margin-bottom: 10px;
}

.service-nav li a>img.car{
height: 45px;
margin-top: 2.5px;
margin-bottom: 12.5px;
}



@media (min-width: 768px) {
    .under-service-content{
    margin-bottom: 120px;
    }

    .under-service-read{
    margin-bottom: 100px;
    text-align: center;
    }

    .under-service-read p{
    font-size: 16px;
    }

    .under-service-read p.title{
    font-size: 26px;
    }

    .under-service-block{
    padding-bottom: 60px;
    margin-bottom: 100px;
    }

    .under-service-block .under-service-title{
    text-align: center;
    padding: 20px;
    font-size: 34px;
    }

    /*title icons*/
    .under-service-block .under-service-title.icon-disability01:before{
    width: 54px;
    height: 43px;
    margin-right: 20px;
    vertical-align: -10px;
    }

    .under-service-block .under-service-title.icon-disability02:before{
    width: 43px;
    height: 43px;
    margin-right: 20px;
    vertical-align: -10px;
    }

    .under-service-block .under-service-title.icon-disability03:before{
    width: 51px;
    height: 40px;
    margin-right: 20px;
    vertical-align: -8px;
    }

    .under-service-block .under-service-title.icon-infant:before{
    content: "";
    width: 42px;
    height: 48px;
    margin-right: 20px;
    vertical-align: -10px;
    }

    .under-service-block .layout{
    padding: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-pack: space-between;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-direction: row-reverse;
    }

    .under-service-block .layout .item:nth-of-type(1){
    flex-basis: 47%;
    }

    .under-service-block .layout .item:nth-of-type(1) img{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    }

    .under-service-block .layout .item:nth-of-type(2){
    flex-basis: 47%;
    padding: 0;
    }

    .under-service-block .layout .item:nth-of-type(2) p{
    font-size: 16px;
    }

    .under-service-facility{
    margin: 0 60px;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 30px;
    }

    .under-service-facility .item:nth-of-type(1){
    width: 215px;
    }

    .under-service-facility .item:nth-of-type(2){
    width: calc(100% - 245px);
    padding-top: 0;
    }

    .under-service-facility .facility-title{
    display: block;
    padding: 1.5em 0;
    }

    .under-service-facility .item:nth-of-type(2) a{
    display: inline-block;
    font-size: 16px;
    margin-right: 30px;
    margin-bottom: 15px;
    }

    .under-service-content .provided{
    margin-bottom: 30px;
    }

    .under-service-content .provided span{
    padding: 15px;
    min-width: 480px;
    font-size: 28px;
    }

    .provided-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    }

    .provided-list li{
    flex-basis:31%;
    padding: 30px 0;
    margin-right: 3.5%;
    margin-bottom: 40px;
    position: relative;
    }

    .provided-list li:nth-child(3n){
    margin-right: 0;
    }


    .provided-list li span{
    display: block;
    font-size: 16px;
    line-height: 2em;
    padding: 0 40px;
    text-align: justify;
    }

    .provided-list li span.title{
    font-size: 20px;
    margin-left: 40px;
    margin-right: 40px;
    padding: 0 0 1em;
    margin-bottom: 1em;
    }

    #disability01,#disability02,#disability03,#age01,#age02,#age03{
    padding-top: 100px;
    margin-top: -100px;
    }

    #age02 h4{
    font-size: 160%;
    }

    .service-nav{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: space-between;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    .service-nav li{
    flex-basis: 32%;
    margin-bottom: 0;
    }

    .service-nav.col4{
    gap: 10px 3%;
    }

    .service-nav.col4 li{
    flex-basis: 22.75%;
    }

    .service-nav li a{
    padding: 40px 0;
    font-size: 100%;
    }

    .service-nav li a>img{
    height: 50px;
    }

}


@media (min-width: 1024px) {
}