@charset "utf-8";

#breadcrumb.sp_b{display:none!important;}


main{color:#595959;font-family: YakuHanJP_Noto,'Noto Sans JP', sans-serif;font-weight: 400;overflow:hidden;}
main a{transition:opacity 0.2s;}
main a:hover{opacity:0.8;}
.wfull{width:100%;padding:0;}
.w950{max-width:980px;padding:0 15px;margin:0 auto;}
.pcview{display:block;}
.spview{display:none;}

@media screen and (max-width: 750px) {
.wfull{min-width: unset;}
.w950{width:100%;padding:0 4vw;}
.pcview{display:none;}
.spview{display:block;}
}


.head_area{margin-top:10px;}
.head_area .tt_nav{}
.head_area .tt_nav ul{display: flex;justify-content: space-between;}
.head_area .tt_nav ul li{width:20%;text-align: center;border-left:1px solid #BABABA;}
.head_area .tt_nav ul li:last-child{border-right:1px solid #BABABA;}

.head_area .tt_nav ul li a{color:#17A57C;font-weight: 700;font-size:14px;display: block;height:100%;padding:15px 0 30px;transition: background 0.2s;position:relative;}
.head_area .tt_nav ul li a:hover{text-decoration: none;background:#E7F6F1;opacity:1;}
.head_area .tt_nav ul li a::after{content:"";display: block;position: absolute;bottom:10px;left:50%;transform: translateX(-50%);background-image: url(../images/arrow.svg);width:20px;height:10px;background-size: contain;background-repeat: no-repeat;pointer-events: none;transition:bottom 0.1s linear;}
.head_area .tt_nav ul li a:hover::after{bottom:8px;}

@media screen and (max-width: 750px) {
.head_area{margin-top:0;}
.head_area>div{margin:0 -4vw;width: calc(100% + 8vw);}
.head_area .tt_nav{padding:0 4vw;}
.head_area .tt_nav ul{display: block;}
.head_area .tt_nav ul li{width:100%;text-align: left;border:none;border-bottom:1px solid #bababa;}
.head_area .tt_nav ul li:last-child{border-right:none;}
.head_area .tt_nav ul li a{font-size:4.2vw;padding:0.8em 0;}
.head_area .tt_nav ul li a::after{bottom:50%;left:unset;transform: translateY(50%);width:4vw;height:2vw;right:0;}
.head_area .tt_nav ul li a:hover::after{bottom:50%;}
}

.sec_title{color:#17A57C;font-size: 24px;font-weight: 700;}
@media screen and (max-width: 750px) {
.sec_title{font-size: 5.3vw;}
}


#about{padding:55px 0 50px;}
#about .flex{display: flex;justify-content: space-between;align-items: center;}
#about .img{flex-shrink: 0;width:37%;max-width: 355px;margin-right: 4%;}
#about h2+p{font-size: 16px;line-height:1.9;margin: 0.9em 0;text-align: justify;}
#about h2+p+p{font-size: 14px;text-indent: -1em;padding-left: 1em;line-height:1.9;text-align: justify;}

@media screen and (max-width: 750px) {
#about{padding: 15vw 0;}
#about .flex{flex-direction: column-reverse;}
#about .img{width:76vw;max-width: unset;margin-right:0;margin-top: 7vw;}
#about h2{text-align: center;}
#about h2+p{font-size: 4.2vw;margin: 0.7em 0;}
#about h2+p+p{font-size: 3.7vw;}
}


#use{background: #DAEDD9;padding:70px 0;}
#use h2.sec_title{text-align: center;margin-bottom:40px;}
#use .example{display: flex;align-items: stretch;justify-content: space-between;margin-bottom:30px;}
#use .example .case{width: 22%;display: flex;justify-content: space-between;align-items: stretch;}
#use .example .time{width: 55%;display: flex;justify-content: center;align-items: center;flex-shrink: 0;}
#use .example .time img{width: 100%;}
#use .example .time picture{flex-shrink: 0;width: 100%;}
#use .example .span{display: flex;flex-direction: column;justify-content: space-between;flex-flow: column;position: relative;width: 100%;text-align: center;padding-right:20px;}
#use .example .span:before{content:"";display: block;position: absolute;width:6px;height:100%;top:0;left:40%;transform: translateX(-50%);}
#use .example .span p{background: #DAEDD9;position: relative;z-index: 2;font-size: 14px;font-weight: 700;}
#use .example .span p:nth-of-type(1){padding-bottom:0.4em;}
#use .example .span p:nth-of-type(2){padding-top:0.4em;}
#use .example .box{background:#fff;width: 78%;display: flex;justify-content: space-between;align-items: center;padding:20px 20px 20px 35px;}
#use .example .box .img{width:190px;flex-shrink: 0;margin-left:40px;}
#use .example .box img{width: 100%;}
#use .example .box .txt{flex:1;}
#use .example .box h3{font-size: 18px;font-weight: 700;margin-bottom: 0.4em;}
#use .example .box ul+h3{margin-top:1em;}
#use .example .box ul{font-size: 14px;line-height: 1.9;}
#use .example .box ul li{text-indent: -1em;padding-left: 1em;text-align: justify;}
#use .example .box ul li::before{content:"・";font-family: 'Noto Sans JP', sans-serif;}
#use .example.pink .box{align-items: flex-start;}
#use .example.blue{margin-bottom:50px!important;}
#use .example.pink h3{color:#F97D7D;}
#use .example.blue h3{color:#0D85BA;}
#use .example.green h3{color:#00A7AF;}
#use .example.pink .span{color:#F97D7D;}
#use .example.blue .span{color:#0D85BA;}
#use .example.green .span{color:#00A7AF;}
#use .example.pink .span:before{background:#F97D7D;}
#use .example.blue .span:before{background:#0D85BA;}
#use .example.green .span:before{background:#00A7AF;}
@media screen and (max-width: 750px) {
#use{padding:12vw 0;}
#use h2.sec_title{margin-bottom:8vw;}
#use .example{margin-bottom:8vw;}
#use .example .case{width: 30%;flex-direction: column;padding-right: 5vw;}
#use .example .time{width: 100%;display: block;margin-bottom:2vw;}
#use .example .span{height:100%;text-align: center;padding-right:0;}
#use .example .span p{font-size: 3.7vw;}
#use .example .span:before{width:1.6vw;left:50%;}
#use .example .box{width: 70%;display: block;padding:4vw;}
#use .example .box .img{width:100%;margin-left:0;margin-top:2vw;}
#use .example .box h3{font-size: 4.5vw;text-align: center;}
#use .example .box ul+h3{margin-top:1.2em;}
#use .example .box ul{font-size: 3.7vw;line-height: 1.7;}
#use .example.blue{margin-bottom:10vw!important;}
}


#use .campaign h2{text-align: center;font-size: 16px;margin-bottom: 0.7em;}
#use .campaign .img{width: 550px;margin: 0 auto;background:#fff;border:1px solid #999;}
#use .campaign .img img{width: 100%;}
#use .campaign .img a{display: block;}
@media screen and (max-width: 750px) {
#use .campaign h2{font-size: 3.7vw;}
#use .campaign .img{width: 100%;}
}


#think{background: #F4F4F4;}
#think .title{background:#56B79B;}
#think .title h2{text-align: center;color:#fff;font-size: 28px;font-weight: 700;padding: 1em 0;}
#think .think_inner{padding:50px 0 80px;}
#think h3{text-align: center;margin-bottom:1em;}
#think .num{text-align: center;font-size: 48px;font-weight: 700;color:#DAEDD9;line-height: 1;margin-bottom:0.4em;}
#think h4{text-align: center;font-size: 20px;color:#17A57C;font-weight: 700;}
#think h4+p{font-size: 14px;text-align: justify;line-height: 1.8;}
#think .know ol{display: flex;justify-content: space-between;align-items: stretch;}
#think .know ol li{background: #fff;width: calc((100% - 50px) / 3);padding:30px 25px;}
#think .know h4{height:3.5em;}
#think .features{margin-top:60px;}
#think .features ol{display: flex;justify-content: space-between;align-items: stretch;flex-wrap: wrap;gap:30px;}
#think .features ol li{background: #fff;width:calc((100% - 30px) / 2);display: flex;justify-content: space-between;align-items: center;padding:30px 0px 30px 25px;}
#think .features h4{margin-bottom:0.5em;}
#think .features ol li .img{flex-shrink: 0;width: 180px;margin-left:20px;}
#think .features ol li .img img{width: 100%;}

@media screen and (max-width: 750px) {
#think .title h2{font-size: 6vw;padding: 0.7em 0;}
#think .think_inner{padding:10vw 0 10vw;}
#think .num{font-size: 12vw;margin-bottom:0.4em;}
#think h4{font-size: 5vw;}
#think h4+p{font-size: 3.7vw;}
#think .know ol{display: block;}
#think .know ol li{width: 100%;padding:6vw 5vw;margin-bottom:5vw;}
#think .know h4{height:auto;margin-bottom:0.5em;}
#think .features{margin-top:9vw;}
#think .features ol{display: block;}
#think .features ol li{width:100%;padding:6vw 0 6vw 5vw;margin-bottom:5vw;}
#think .features ol li .img{width: 36vw;margin-left:0;}
}

.footer_area{padding:80px 0 140px;}
#info{background:#56B79B;color:#fff;padding:35px 0;}
#info h2{font-size: 24px;font-weight: 700;text-align: center;margin-bottom: 0.6em;}
#info h2+p{text-align: center;font-size: 14px;line-height: 1.9;}
#info h2+p+p{text-align: center;font-size: 20px;font-weight: 700;margin-top: 1.2em;}
#info p a{display: block;color:#fff;margin-top: 0.2em;}
#info p a:hover{opacity: 1;}

#privacy{background:#F4F4F4;margin-top: 45px;padding:35px 70px;}
#privacy h2{font-size: 24px;font-weight: 700;text-align: center;margin-bottom: 0.6em;}
#privacy ul{background:#63B55D;color:#fff;padding:25px 45px;}
#privacy ul li{text-align: justify;text-indent: -1em;padding-left: 1em;line-height: 1.8;}
#privacy ul li::before{content:"・";font-family: 'Noto Sans JP', sans-serif;}
#privacy .policy_link{text-align: center;margin-top: 30px;}
#privacy .policy_link a{color:#0DAD00;text-decoration: underline;}
#privacy .policy_link a::after{content:"";display: inline-block;background-image: url(../images/arrow_right.svg);width:6px;height:10px;background-size: contain;background-repeat: no-repeat;margin-left: 8px;}

@media screen and (max-width: 750px) {
.footer_area{padding:12vw 0 15vw;margin:0 -4vw;width: calc(100% + 8vw);}
#info{padding:7vw 4vw;}
#info h2{font-size: 5vw;margin-bottom: 0.7em;}
#info h2+p{font-size: 3.7vw;line-height: 1.8;text-align: justify;}
#info h2+p+p{font-size: 4.2vw;margin-top: 1.5em;}
#privacy{margin-top: 10vw;padding:7vw 4vw 8vw;}
#privacy h2{font-size: 5vw;margin-bottom: 0.7em;}
#privacy ul{padding:5vw 5vw 5vw 4vw;}
#privacy ul li{font-size: 3.7vw;line-height: 1.7;}
#privacy .policy_link{margin-top: 6vw;}
#privacy .policy_link a{font-size: 3.7vw;}
#privacy .policy_link a::after{width:1.3vw;height:2.6vw;margin-left: 2vw;}
}



















