@charset "utf-8";

/* mainimage */
#mainvisual{position: relative;overflow: hidden;width: 100%;}
#mainvisual h2{position: absolute;z-index: 2;display: flex;width: 68.683%;bottom: -10px;left: 5%;}
.mainimage{width: 100%;}
/* 共通 */
.contents_imgbg{background: url("../../common/img/layer_bk.webp") center 30%/100%;}
.inner{max-width: 1000px;margin: 0 auto;width: 90%;}
.contents_item{margin-top: 100px;}
.contents_tit{text-align: center;font-size: 1.5em;color: #5c6e72;letter-spacing: 0.1em;font-weight: 500;}
.contents_tit + p{text-align: center;letter-spacing: 0.05em;line-height: 1.8;font-size: 18px;margin-top: 2em;}
.contents_tit + p ~ figure{margin-top: 70px;}
.contents_tit_s{font-size: 1.5em;color: #5c6e72;letter-spacing: 0.1em;font-weight: 500;text-align: center;}
.contents_tit_s + p{font-size: 15px;margin-top: 0.7em;line-height: 1.7;}
.note{font-size: 10px;margin-top: 1.5em;}
sup{font-size:0.6em;margin-bottom:0.5em;}

@media screen and (max-width: 767px){
/* mainimage */
.mainvisual h2{width: 65.10416666666667%;position: absolute;bottom: 0px;left: -10px;}
.mainimage{width: 100%;}
/* 共通 */
.contents_item{margin-top: 60px;}
.contents_tit{font-size: 22px;}
.contents_tit + p{font-size: 15px;margin-top: 1.5em;}
.contents_tit + p ~ figure{margin-top: 30px;}
.contents_tit_s{font-size: 18px;}
.contents_tit_s + p{font-size: 13px;}
.note{font-size: 8px;vertical-align: top;}
}

#intro{padding-top: 150px;}
#contents{padding: 100px 0;}
.anchor_link{display: flex;justify-content: space-between;margin-top: 50px;}
.anchor_link > a{background: #5c6e72;color: #fff;text-align: center;padding: 20px 0 60px;width: 18%;position: relative;text-decoration: none;border: 1px solid #5c6e72;transition: 0.5s all;}
.anchor_link > a i{font-size: 32px;line-height: 1;}
.anchor_link > a i::before{content: "";display: inline-block;margin-right: 0.5em;width: 1px;height: 0.8em;background: #fff;vertical-align: -0.1em;}
.anchor_link > a i::after{content: "";display: inline-block;margin-left: 0.5em;width: 1px;height: 0.8em;background: #fff;vertical-align: -0.1em;}
.anchor_link > a i + p{font-size: 0.9em;margin-top: 0.5em;line-height: 1.4;}
.anchor_link > a::after{content: "";width: 1.6em;height: 1em;display: block;margin: 0 auto;background: url("../img/arrow.svg") no-repeat center center/contain;position: absolute;left: 0;right: 0;bottom: 20px;transition: 0.5s all;}
.merit_item{display: flex;justify-content: space-between;padding-top: 70px;flex-direction: column;}
.merit_tit{font-size: 20px;border-bottom: 1px solid #5c6e72;color: #5c6e72;padding-bottom: 0.3em;}
.merit_tit big{font-size: 2.1em;line-height: 1;}
.merit_item:nth-of-type(even) i{position: absolute;top: 5%;right: 0;}
.merit_item:nth-of-type(odd) i{position: absolute;top: 5%;left: 0;}
.item_tit{font-size: 22px;color: #5c6e72;letter-spacing: 0.1em;font-weight: 500;margin-top: 25px;width: 60%;line-height: 1.7;}
.item_tit + p{font-size: 15px;margin-top: 0.7em;line-height: 1.8;width: 35%;}
.merit_item .cap_w{color: #FFF;position: absolute;bottom: 2%;right: 2%;font-size: 12px;}
.merit_item .cap_l{right: unset;lef:2%;}
#merit1 img{max-width:500px;}
#merit1 .item_tit + p{width: 45%;}

/* .merit_item > dd{width: 36.5%;}
.merit_item > dt{width: 59.6%;margin-left: 2.5%;}
.merit_item > dd figure figcaption{position: absolute;bottom: 10px;font-size: 12px;}
.merit_item > dd figure:nth-of-type(1) figcaption{right: 10px;}
.merit_item > dd figure:nth-of-type(1)::before{content: "";display: block;background: #dbdcdd;width: 59%;height: 81%;position: absolute;left: -30%;bottom: -15%;z-index: -1;}
.merit_item > dd figure:nth-of-type(2){border: 8px solid #fff;width: 68.77%;margin: -30% 0 0 -57%;}
.merit_item > dd figure:nth-of-type(2) figcaption{left: 10px;} */


@media screen and (min-width: 768px){
.anchor_link > a:hover{background: #8b9da0;}
.anchor_link > a:hover::after{transform: translateY(10px);}
.merit_item:nth-of-type(even) {width: 100%;margin: 0 2.5% 0 0;order: 2;display: flex;flex-wrap: wrap;justify-content: flex-end;align-content: flex-start;padding-bottom: 30px;}
.merit_item:nth-of-type(odd) {width: 100%;margin: 0 2.5% 0 0;order: 2;display: flex;flex-wrap: wrap;justify-content: flex-end;align-content: flex-start;padding-bottom: 30px;}
.merit_item:nth-of-type(even) .merit_tit{text-align: left;width: 100%;}
.merit_item:nth-of-type(odd) .merit_tit{text-align: right;width: 100%;}
.merit_item:nth-of-type(odd) .item_tit{font-size: 22px;color: #5c6e72;letter-spacing: 0.1em;font-weight: 500;margin-top: 25px;width: 60%;line-height: 1.7;margin-left: 66%;}
.merit_item:nth-of-type(odd) .item_tit + p{font-size: 15px;margin-top: 0.7em;line-height: 1.8;width: 35%;margin-left: 66%;}
/* .merit_item:nth-of-type(even)  dd figure:nth-of-type(1)::before{left: auto;right: -30%;}
.merit_item:nth-of-type(even) > dd figure:nth-of-type(1) figcaption{right: auto;left: 10px;}
.merit_item:nth-of-type(even) > dd figure:nth-of-type(2){margin: -30% -57% 0 auto;}
.merit_item:nth-of-type(even) > dd figure:nth-of-type(2) figcaption{left: auto;right: 10px;} */
}

@media screen and (max-width: 767px){
#mainvisual h2{width: 67.25%;bottom: 0;left: 0;}
#intro{padding-top: 50px;}
#contents{padding: 50px 0;}
.anchor_link{flex-wrap: wrap;margin-top: 20px;gap: 5px 2%;justify-content: center;}
.anchor_link > a{padding: 10px 0 30px;width: 32%;}
.anchor_link > a i{font-size: 22px;}
.anchor_link > a i + p{font-size: 12px;}
.anchor_link > a::after{bottom: 10px;font-size: 12px;}
.merit_item{flex-direction: column; padding-top: 40px;}
.merit_item > dt{width: 100%;margin-left: 0;}
.merit_tit{font-size: 16px;padding-bottom: 0.3em;}
.item_tit{font-size: 17px;letter-spacing: 0.1em;margin-top: 15px;width: 100%;line-height: 1.7;}
.item_tit + p{font-size: 13px;line-height: 1.7;width: 100%;}
#merit1 img{max-width:100%;}
#merit1 .item_tit + p{width: 100%;}

/* .merit_item > dd{width: 65%;align-self: flex-end;margin-top: 15px;}
.merit_item > dd figure figcaption{font-size: 10px;bottom: 5px;}
.merit_item > dd figure:nth-of-type(2){border: 6px solid #fff;} */
.merit_item i{position: unset;margin-top:20px;}
.merit_item:nth-of-type(even) i{position: unset;}
.merit_item:nth-of-type(odd) i{position: unset;}

}


.flow_bk {background: #fff;padding:5px 0;max-width:1000px;margin:70px auto;}
.flow_bk figure{max-width:500px;margin: 70px auto;}

@media screen and (max-width: 767px){
.flow_bk {max-width:96%;}
.flow_bk figure{max-width:90%;margin: 40px auto;}


}