@charset "UTF-8";

html,body{font-size: 16px;}
article{font-family: YakuHanJP,'Noto Sans JP', sans-serif;letter-spacing: 0.05em;}

@media screen and (min-width: 769px) and (max-width: 1064px) {
html,body{font-size: 1.5vw;}
}

@media screen and (max-width: 768px) {
html,body{font-size: 13px;}
figure img{width: 100%;}
}

/* メイン */
main .main_wrap{height: calc(46.875vw - 10px);overflow: hidden;}
main figure img{width: 100%;}
main h2{width: 100%;position: absolute;text-align: center;top: 10%;margin: 0 auto;opacity: 0;animation: 3s fadeInDown 0.5s forwards;}
main h2 img{width: 80%;}
main i{position: absolute;display: block;opacity: 0;}
main i:nth-of-type(1){width: 17%;right: 12.5%;bottom: 40%;animation: 2s fukidashi 1s forwards;}
main i:nth-of-type(2){width: 17.5%;right: 23.4%;bottom: 9%;animation: 2s fukidashi 1.5s forwards;}
main i:nth-of-type(3){width: 18%;right: 1.5%;bottom: 2.4%;animation: 2s fukidashi 2s forwards;}
main i:nth-of-type(4){width: 4.5%;right: 0;bottom: 36%;animation: 2s fukidashi 2.5s forwards;}
main .main_wrap + p{font-size: 1.75rem;text-align: center;padding: 1em 0;line-height: 1.8;animation-name: fadeIn;}

@keyframes fukidashi {
0% {transform: scale(1);opacity: 0.1;}
10% {transform: scale(1.1);opacity: 0.1;}
50% {transform: scale(0.9);opacity: 0.5;}
80% {transform: scale(1);opacity: 0.8;}
100% {transform: scale(1);opacity: 1;}
}

@media screen and (min-width: 1920px) {
main h2 img{max-width: 1500px;}
}

@media screen and (max-width: 768px) {
main .main_wrap{height: 100vw;}
main figure{height: 100%;}
main figure img{width: auto;height: 100%;left: 60%;transform: translateX(-50%);max-width: none;}
main h2{width: 100%;}
main i:nth-of-type(1){width: 30%;right: 50%;bottom: 28%;}
main i:nth-of-type(2){width: 30%;right: 30%;bottom: -3%;}
main i:nth-of-type(3){width: 30%;right: -3%;bottom: 8%;}
main i:nth-of-type(4){width: 7%;right: 0;bottom: 36%;}
main .main_wrap + p{font-size: 1.3rem;text-align: center;padding: 1em 0;line-height: 1.8;animation-name: fadeIn;}
}


/* コンテンツ共通 */
.style_tit{display: flex;align-items: flex-end;font-size: 1.75rem;padding-bottom: 0.2em;overflow: hidden;}/* font-size: 28px; */
.style_tit > span{font-family: "Open Sans", sans-serif;font-size: 1.3rem;font-style: italic;font-weight: 500;line-height: 1;border-bottom: 1px solid;}
.style_tit > span big{font-size: 1.9em;font-weight: 500;font-style: italic;vertical-align: -0.03em;line-height: 1;}
.style_tit > div{padding-left: 0.7em;letter-spacing: 0.1em;}
.style_tit > div div{display: inline-block;animation-name: fadeIn;animation-delay: 0.5s;}
.style_tit > div span{height: 1px;width: 100%;position: absolute;left: 0;bottom: 0;display: block;animation-name: scaleX_l;}
.style_tit > div i{height: 1px;width: 1500px;position: absolute;left: 0.7em;bottom: calc(-0.2em + 1px);display: block;animation-name: scaleX_r;}

.style_main{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 1.5rem;animation-name: fadeInUp;}
.style_main_tit{font-size: 3.75rem;text-shadow: 0 0 0.05em #fff,0 0 0.05em #fff,0 0 0.05em #fff,0 0 0.05em #fff,0 0 0.05em #fff,0 0 0.05em #fff,0 0 0.05em #fff;line-height: 1;width: 100%;padding-left: 1.2rem;z-index: 1;letter-spacing: 0.1em;margin-bottom: -0.4em;}/* font-size: 60px; */
.style_main > p{font-size: 1.5rem;border-top: 10px solid;padding-top: 0.5em;width: 37.6%;margin: 0 auto;margin-top: 2.5rem;line-height: 1.7;}/* font-size: 24px; */
.style_main > figure{width: 58.6%;}

.style_lead{text-align: center;font-size: 1.5rem;line-height: 1.7;margin-top: 2rem;animation-name: fadeInUp;}/* font-size: 24px; */
.style_lead > li{display: inline-block;padding: 0 2.5rem;}
.style_lead > li::before{content: "";display: block;width: 2px;height: 100%;transform: rotate(-15deg);position: absolute;left: 0;bottom: 0;}
.style_lead > li::after{content: "";display: block;width: 2px;height: 100%;transform: rotate(15deg);position: absolute;right: 0;bottom: 0;}

.style_img{display: flex;justify-content: center;}
.style_img > figure{margin-top: 2rem;animation-name: fadeInUp;}
.style_img > figure:nth-of-type(2){margin-left: 2.34%;}

#style1 .style_plan{margin-top: -3.5rem;text-align: center;animation-name: fadeInUp;}
#style2 .style_plan{margin-top: -1.5rem;text-align: center;animation-name: fadeInUp;}

.data_area{margin-top: 3rem;background: #fff;padding: 2rem;animation-name: fadeInUp;}
.data_tit{font-family: "Open Sans", sans-serif;font-style: italic;font-weight: 500;line-height: 1;font-size: 2.5em;text-align: center;}/* font-size: 40px; */
.data_area p{font-size: 1.125em;}
.data_tit + p{margin-top: 1.5em;}
.data_item{display: flex;justify-content: space-between;flex-wrap: wrap;}
.data_item > *{width: 48%;border-radius: 1rem;border: 5px solid;padding: 0.8rem;margin-top: 1.5rem;}
.data_item > * figure{text-align: center;}

p + figure{margin-top: 1em;}
figure + p{margin-top: 1em;}

@keyframes scaleX_l {
0% {transform: scaleX(0);transform-origin: left;}
100% {transform: scale(1);transform-origin: left;}
}
@keyframes scaleX_r {
0% {transform: scaleX(0);transform-origin: right;}
100% {transform: scale(1);transform-origin: right;}
}

@media screen and (min-width: 769px) {
.style_img > figure:nth-of-type(2){animation-delay: 0.3s;}
}

@media screen and (max-width: 768px) {
.style_main{display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 1.5rem;animation-name: fadeInUp;}
.style_main_tit{font-size: 1.7rem;padding-left: 0;letter-spacing: 0;margin-bottom:0;}/* font-size: 60px; */
.style_main > p{font-size: 1.2rem;border-top: 5px solid;padding-top: 0.5em;width: 100%;margin: 0;margin-top: 1rem;}/* font-size: 24px; */
.style_main > figure{width: 100%;}

.style_lead{font-size: 1.15rem;margin-top: 2rem;padding: 0 }/* font-size: 24px; */
.style_lead > li{display: inline-block;padding: 0 1.2rem;}
.style_lead > li::before{transform: rotate(-10deg);}
.style_lead > li::after{transform: rotate(10deg);}

#style1 .style_plan{margin-top: 2rem}
#style2 .style_plan{margin-top: 2rem}

.data_area{margin-top: 2rem;padding: 1.2rem 1rem;}
.data_tit{font-size: 1.8em;}/* font-size: 40px; */
.data_area p{font-size: 1em;}
.data_tit + p{margin-top: 1em;}
.data_item > *{width: 100%;border-radius: 1rem;border: 3px solid;padding: 0.5rem;margin-top: 1.2rem;animation-name: fadeInUp;}
}


/* STYLE1 */
#style1{background: #faf8ef;}
#style1 .style_tit span{color: #3a87cd;border-bottom-color: #3a87cd;}
#style1 .style_tit div span{background: #3a87cd;}
#style1 .style_tit div i{background: #3a87cd;}
#style1 .style_main > p{border-top-color: #9dc3e6;}
#style1 .style_lead > li{color: #3a87cd;}
#style1 .style_lead > li::before{background: #3a87cd;}
#style1 .style_lead > li::after{background: #3a87cd;}
#style1 .data_tit{color: #3a87cd;}
#style1 h5.data_tit{color: #3a87cd;margin-top:30px;text-align: left;text-decoration: underline;text-decoration-color: #FF9800;line-height: 1.25;}
#style1 .data_item > *{border-color: #9dc3e6;}

@media screen and (min-width: 769px) {
#style1 .data_item > *:nth-of-type(2){animation-delay: 0.3s;}
}

/* STYLE2 */
#style2{background: #efede1;}
#style2 .style_tit span{color: #8fc21f;border-bottom-color: #8fc21f;}
#style2 .style_tit div span{background: #8fc21f;}
#style2 .style_tit div i{background: #8fc21f;}
#style2 .style_main > p{border-top-color: #bee39e;}
#style2 .style_lead > li{color: #8fc21f;}
#style2 .style_lead > li::before{background: #8fc21f;}
#style2 .style_lead > li::after{background: #8fc21f;}
#style2 .data_tit{color: #8fc21f;}
#style2 h5.data_tit{color: #8fc21f;margin-top:30px;text-align: left;text-decoration: underline;text-decoration-color: #FF9800;line-height: 1.25;}
#style2 .data_item > *{width: 100%;border-color: #8fc21f;}



/* And more!! */
#and_more{background: url("../img/and_more_main.webp") no-repeat center center/cover;height: 42.5rem;padding: 0;margin-top: 9.375em;}
#and_more .wrap1024{overflow: hidden;height: 100%;}
.and_more_tit{text-align: center;position: absolute;font-family: "Open Sans", sans-serif;font-size: 5em;font-style: italic;color: #fff;font-weight: 600; text-shadow: 0 0 0.05em #999,0 0 0.05em #999,0 0 0.05em #999,0 0 0.05em #999;width: 100%;left: 0;top: -0.6em;line-height: 1;animation-name: fadeInUp;}/* font-size: 80px; */
.and_more_tit img{width: 480px;}
.and_more_item{margin-left: 40%;padding-top: 3.5rem;}
.and_more_lead{font-size: 1.75em;line-height: 1.8;animation-name: fadeInUp;}/* font-size: 28px; */
.and_more_img{display: flex;justify-content: center; flex-wrap: wrap;width: 31.25rem;}
.and_more_img figure{animation-name: fadeIn;}
.and_more_img figure:nth-of-type(1){width: 16.375rem;}
.and_more_img figure:nth-of-type(2){width: 16.313rem;margin-left: -3rem;animation-delay: 0.3s;}
.and_more_img figure:nth-of-type(3){width: 14.688rem;margin-top: -4rem;animation-delay: 0.6s;}
.and_more_img i{width: 16.438rem; position: absolute;right: -8rem;bottom: -0.5rem;animation-name: fadeInLeft_s;animation-delay: 0.8s;}

@media screen and (max-width: 768px) {
#and_more{background: url("../img/and_more_main.webp") no-repeat 40% bottom/200% #ededef;height: 40rem;margin-top: 5em;}
.and_more_tit{font-size: 3.5em;}/* font-size: 80px; */
.and_more_tit img{width: 64%;}
.and_more_item{margin-left: 0;padding-top: 3rem;}
.and_more_lead{font-size: 1.2em;line-height: 1.8;}/* font-size: 28px; */
.and_more_img{flex-wrap: wrap;width: 31.25em;font-size: 2.5vw;}
.and_more_img figure{animation-name: fadeIn;}
.and_more_img figure:nth-of-type(1){width: 16.375em;}
.and_more_img figure:nth-of-type(2){width: 16.313em;margin-left: -3em;}
.and_more_img figure:nth-of-type(3){width: 14.688em;margin-top: -4em;}
.and_more_img i{width: 16.438em;right: -6em;bottom: -5em;}
}

/* Know-How */
#know-how{background: #f7f7f7;padding-bottom: 80px;margin-top: 80px;}
.know-how_tit{text-align: center;font-family: "Open Sans", sans-serif;font-size: 5em;font-style: italic;color: #fff;font-weight: 600; text-shadow: 0 0 0.05em #999,0 0 0.05em #999,0 0 0.05em #999,0 0 0.05em #999;width: 100%;line-height: 1;animation-name: fadeInUp;}/* font-size: 80px; */
.know-how_item{display: flex;justify-content: space-between;margin-top: 2rem;}
.know-how_lead{font-size: 1.75em;line-height: 1.8;animation-name: fadeInUp;}/* font-size: 28px; */
.know-how_item > dt{width: 48.83%;}
.know-how_item > dt figure{margin-top: 1.5rem;animation-name: fadeInUp;}
.know-how_item > dt figure i{width: 16.5rem;position: absolute;left: 5%;bottom: -30%;animation-name: fadeInUp;animation-delay: 0.3s;}
.know-how_item > dd{width: 48.83%;animation-name: fadeInUp;}

@media screen and (min-width: 769px) {
.know-how_item > dd{animation-delay: 0.3s;}
}

@media screen and (max-width: 768px) {
#know-how{padding-bottom: 40px;margin-top: 40px;}
.know-how_tit{font-size: 3.5em;}/* font-size: 80px; */
.know-how_item{flex-wrap: wrap;margin-top: 1.5rem;}
.know-how_lead{font-size: 1.2em;line-height: 1.8;animation-name: fadeInUp;}/* font-size: 28px; */
.know-how_item > dt{width: 100%;}
.know-how_item > dt figure{margin-top: 1.5rem;}
.know-how_item > dt figure i{width: 52%;}
.know-how_item > dd{width: 100%;text-align: center;margin-top: 7rem;}
}

span.marker {background: linear-gradient(transparent 75%, #fff799 75%);font-weight: bold; }

.style1_btn{width:460px;margin:30px auto;}
.style1_btn small{display: block;font-size: 18px;padding: 5px 0 0 0;border-top: none;margin-bottom: 7px;}
.style1_btn a{width: 600px;padding:10px 0;color:#ffffff;font-size: 21px;line-height: 120%;text-align: center;text-decoration: none;background: linear-gradient(172deg, #3a87cd 0%, #3a87cd 50%, #2F5597 50%, #2F5597 100%);display: block;position:relative;-webkit-transition: 0.3s ease-out;-moz-transition: 0.3s ease-out;-o-transition: 0.3s ease-out;transition: 0.3s ease-out;border:1px solid #faf8ef}
.style1_btn a:hover{color:#3a87cd;background: #ffffff;border:1px solid #3a87cd;}
.style1_btn a i{position: absolute;left: 10px;font-size: 18px;text-decoration: underline;}

.style2_btn{width:460px;margin:30px auto;}
.style2_btn small{display: block;font-size: 18px;padding: 5px 0 0 0;border-top: none;margin-bottom: 7px;}
.style2_btn a{width: 600px;padding:10px 0;color:#ffffff;font-size: 21px;line-height: 120%;text-align: center;text-decoration: none;background: linear-gradient(172deg, #8fc23c 0%, #8fc23c 50%, #70972F 50%, #70972F 100%);display: block;position:relative;-webkit-transition: 0.3s ease-out;-moz-transition: 0.3s ease-out;-o-transition: 0.3s ease-out;transition: 0.3s ease-out;border:1px solid #faf8ef}
.style2_btn a:hover{color:#8fc21f;background: #ffffff;border:1px solid #8fc21f;}
.style2_btn a i{position: absolute;left: 10px;font-size: 18px;text-decoration: underline;}

@media screen and (max-width: 768px) {
.style1_btn{width:100%;}
.style1_btn a{width: 100%;font-size: 16px;}
.style1_btn small{font-size:13px;}
.style2_btn{width: 100%;}
.style2_btn a{width: 100%;font-size: 16px;}
.style2_btn small{font-size:13px;}
}