@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&family=Public+Sans:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,body{font-family: YakuHanJP, 'Poppins', 'Noto Sans JP', sans-serif;}

:root {--main_color: #53c9c3;}
a{text-decoration: underline;color: #000;}

@media screen and (min-width: 769px) {
html,body{font-size: 16px;line-height: 1.5;}
.sp{display: none;}
.contents_wrap{max-width: 1060px;margin: 0 auto;padding: 0 2em;}
.note{font-size: 0.8em;}
a:hover{text-decoration: none;}
}

@media screen and (max-width: 768px) {
html,body{font-size: 3.5vw;line-height: 1.4;}
.pc{display: none;}
.contents_wrap{max-width: 100%;padding: 0 1em;}
img{width: 100%;}
}

/*||||||||||||||||| ヘッダー |||||||||||||||||*/

header{background: var(--main_color);width: 100%;z-index: 1000;padding: 0 1em;}
header .header_wrap{display: flex;justify-content: space-between;max-width: 1500px;margin: 0 auto;align-items: center;color: #fff;}
header h1{padding: 1.5em 0;display: flex;align-items: flex-end;}
header h1 img{width: 15em;}
header h1 p{font-size: 0.95em;margin: 0 0 0.5em 1em;}
header .company{text-align: right;}
header .company small{font-size: 0.6em;display: block;line-height: 1.2;}
header .company p{font-size: 1em;display: block;line-height: 1.2;}
header .company big{font-size: 1.2em;display: block;line-height: 1.2;}
header .company big img{width: 150px;}

@media only screen and (max-width: 768px) {
header h1{padding: 1em 0;flex-wrap: wrap;width: 65%;}
header h1 p{font-size: 0.8em;margin: 0.5em 0 0 0;}
header .company{width: 35%;}
header .company small{font-size: 0.75em;}
header .company p{font-size: 1.05em;}
header .company big{font-size: 1.1em;}
}

/*||||||||||||||||| コンテンツ部分 |||||||||||||||||*/
main{background: linear-gradient(to bottom,#cbefed 60%,#fff);text-align: center;color: var(--main_color);}
main::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to right,#fff 50%,transparent 50%);}
main .contents_wrap{background: linear-gradient(to right,#fff 85%,transparent 85%);padding: 5em 0;z-index: 1;}
main .main_img{width: 34.375em;margin: 0 auto;}
main .main_size{width: 15.3125em;position: absolute;bottom: 2em;left: 1em;}
main .contents_tit + p{margin-top: 0.2em;animation-name: fadeInUp;line-height: 1.7;}

.contents_tit{font-size: 2em;text-align: center;letter-spacing: 0.1em;padding-left: 0.1em;font-weight: 500;animation-name: fadeInUp;color: var(--main_color);}
.contents_tit + *{margin-top: 2em;}

#features{background: url("../img/features_bk.webp") no-repeat center center/cover;color: #fff;padding: 5em 0;}
#features .contents_tit{color: #fff;}
.features_item{display: flex;justify-content: center;flex-wrap: wrap;}
.features_item > li{margin-top: 1em;width: calc(50% - 0.5em);animation-name: fadeInRight;}
.features_item > li figure{display: flex;align-items: center;}
.features_item > li figure figcaption{margin: 0 1em;font-size: 1.3em;}
.features_item > li figure img{width: 22em;}

#merit{background: linear-gradient(to bottom,#fff,#ccefed);}
#merit::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to right,transparent 50%,#fff 50%);}
#merit .contents_wrap{background: linear-gradient(to right,transparent 15%,#fff 15%);padding: 5em 0;z-index: 1;}
.merit_item{display: flex;justify-content: center;flex-wrap: wrap;}
.merit_item > li{margin-top: 1em;width: calc(50% - 0.5em);animation-name: fadeInRight;}
.merit_item > li .frame{width: 22em;border-radius: 1.5em;height: 100%;}
.merit_item > li .frame h3{font-size: 1.7em;line-height: 1;white-space: nowrap;}
.merit_item > li .frame h3 + p{font-size: 0.8em;margin-top: 0.5em;}
.merit_item > li.bk_white .frame{border: 1px solid var(--main_color);background: #fff;color: var(--main_color);}
.merit_item > li.bk_light .frame{border: 1px solid #d4f1f0;background: #d4f1f0;color: var(--main_color);}
.merit_item > li.bk_dark .frame{border: 1px solid var(--main_color);background: var(--main_color);color: #fff;}
.merit_item > li.num .frame{text-align: center;display: flex;flex-direction: column;justify-content: center;}
.merit_item > li.column2 .frame{display: flex;justify-content: space-between;padding: 1.2em 1em;}
.merit_item > li.column2 .frame dt{width: 49%;}
.merit_item > li.column2 .frame dd{width: 49%;align-self: center;}
.merit_item > li.column2 .frame h3{font-size: 1.3em;}
.merit_item > li.column1 .frame{padding: 1.2em 1em;}
.merit_item > li.column1 .frame h3{font-size: 1.3em;}
.cap_w{font-size: 0.5em;position: absolute;right: 1em;bottom: 0.5em;color: #fff;}
.cap_o{font-size: 0.5em;margin-top: 0.5em;}

#sdgs{background: linear-gradient(to bottom,#cbefed,#cbefed);}
#sdgs::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to right,transparent 50%,#fff 50%);}
#sdgs .contents_wrap{background: linear-gradient(to right,transparent 15%,#fff 15%);padding: 5em 1em;z-index: 1;margin-top: 0;}
#sdgs .contents_tit{background: var(--main_color);color: #fff;height: 4.8em;display: flex;justify-content: center;align-items: center;}
#sdgs .contents_tit::before{content: "";max-width: 40em;height: 3.8em;margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: url("../img/sdgs_logo_pc.svg") no-repeat left 0.5em center/contain;}
.sdgs_item{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;}
.sdgs_item > dt{width: 7.5em;animation-name: fadeInUp;}
.sdgs_item > dd{width: calc(100% - 10.5em);animation-name: fadeInRight;}
.sdgs_item > dd h3{font-size: 1.5em;}
.sdgs_item > dd h3 + p{margin-top: 0.5em;}

#example{padding-bottom: 5em;}
.example_wrap{background: var(--main_color);padding: 5em 0;color: #fff;}
#example .contents_tit{color: #fff;}
.example_item figure{margin: 1em 0.5em 0;width: 28em;}
.slick-arrow{width: 2.2em;height: 4.2em;position: absolute;top: 0;bottom: 0;margin: auto 0;cursor: pointer;z-index: 2;}
.prev_btn{left: 1.5em;}
.next_btn{right: 1.5em;}
.example_company{background: linear-gradient(to bottom,var(--main_color) 45%,transparent 45%);display: none;}
.example_company_item{display: flex;justify-content: space-between;align-items: flex-end; max-width: 1660px;padding: 0 1em;margin: 0 auto;}
.example_company_item > dt{width: 61.25%;animation-name: fadeInUp;opacity: 0;}
.example_company_item > dt h3{color: #fff;text-align: center;font-size: 1.5em;}
.example_company_item > dt h3 + figure{margin-top: 2.5em;}
.example_company_item > dd{width: 33%;animation-name: fadeInUp;}

#support{padding: 5em 0;}
#support .contents_tit{color: #000;}
.support_item{background: #e5f7f6;border-radius: 2em;padding: 3em 4em;animation-name: fadeInUp;text-align: center;font-size: 1.1em;}
input[type=text],input[type=email],input[type=tel],textarea{box-sizing: border-box;width: 100%;padding: 0.7em 0.5em;border-radius: 0.6em;border: 1px solid var(--main_color);margin-top: 0.7em;}
.support_item p{text-align: left;}
.support_item p strong{background: var(--main_color);color: #fff;font-size: 0.8em;display: inline-block;padding: 0.1em 0.8em;margin-right: 1em;}
.support_item p:nth-of-type(n+2){margin-top: 1.5em;}
label[for=privacy_btn]{margin-top: 2em;display: inline-block;}
input[type=submit]{width: 13em;color: #fff;border: none;padding: 0.7em 1.5em;margin: 2em auto 0;text-align: right;border-radius: 1.5em;background: var(--main_color);font-size: 1.1em;display: block;transition: 0.3s all;cursor: pointer;}

@media only screen and (min-width: 769px) {
.features_item > li:nth-of-type(odd){margin-right: 1em;display: flex;justify-content: flex-end;animation-name: fadeInLeft;}
.features_item > li:nth-of-type(odd) figure figcaption{order: 1;}
.features_item > li:nth-of-type(odd) figure img{order: 2;}
.merit_item > li:nth-of-type(odd){margin-right: 1em;display: flex;justify-content: flex-end;animation-name: fadeInLeft;}
.sdgs_item > *:nth-of-type(n+2){margin-top: 3em;}
.example_item::before{content: "";display: block;width: 15%;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to right,var(--main_color) 40%,transparent);z-index: 1;}
.example_item::after{content: "";display: block;width: 15%;height: 100%;position: absolute;right: 0;top: 0;background: linear-gradient(to right,transparent,var(--main_color) 60%);z-index: 1;}
.example_company_item > dd{animation-delay: 0.3s;}
input[type=submit]:hover{opacity: 0.6;}
}

@media only screen and (min-width: 769px) and (max-width: 1000px) {
html,body{font-size: 1.2vw;}
main .main_size{left: 10em;}
#merit .contents_wrap{background: linear-gradient(to right,transparent 12.5%,#fff 12.5%);}
#sdgs .contents_wrap{background: linear-gradient(to right,transparent 12.5%,#fff 12.5%);}
}


@media only screen and (max-width: 768px) {
main .contents_wrap{}
main .main_img{width: 80vw;}
main .main_size{width: 50vw;margin: 1.5em auto 2em;position: static;}

.contents_tit{font-size: 1.85em;}
.contents_tit + *{margin-top: 1em;}

#features{padding: 3em 0;}
.features_item > li{margin-top: 1.5em;width: 70vw;animation-name: fadeInUp;}
.features_item > li figure{flex-wrap: wrap;}
.features_item > li figure figcaption{margin: 0.5em 0 0 0;font-size: 1.3em;text-align: center;width: 100%;}

#merit .contents_wrap{padding: 3em 0;}
.merit_item > li{margin-top: 1em;width: 90vw;animation-name: fadeInUp;}
.merit_item > li .frame{width: 100%;height: auto;}
.merit_item > li:nth-of-type(1) .frame,
.merit_item > li:nth-of-type(5) .frame{min-height: 11em;}
.merit_item > li.column2 .frame dd{align-self: flex-end;}
.merit_item > li .frame h3 + p{margin-top: 0.7em;font-size: 0.9em;}
.cap_w{font-size: 0.6em;}
.cap_o{font-size: 0.6em;}

#sdgs .contents_wrap{padding: 3em 1em;}
#sdgs .contents_tit{height: auto;padding: 0.9em 0 0.7em 0;flex-direction: column;}
#sdgs .contents_tit::before{max-width: none;width: 9.375em;height: 1.125em;margin: 0 auto 0.3em;position: static;background: url("../img/sdgs_logo_sp.svg") no-repeat center center/contain;}
.sdgs_item{justify-content: center;}
.sdgs_item > dt{width: 6em;}
.sdgs_item > dd{width: 90vw;animation-name: fadeInUp;margin-top: 1em;}
.sdgs_item > dt:nth-of-type(n+2){margin-top: 2.5em;}
.sdgs_item > dd h3{font-size: 1.4em;}
.sdgs_item > dd h3 + p{margin-top: 0.5em;line-height: 1.7;}

#example{padding-bottom: 3em;}
.example_wrap{padding: 3em 0;}
.example_item li{display: flex;justify-content: space-between;padding: 0 1em;}
.example_item figure{margin: 1em 0 0 0;width: 49%;}
.example_company{background: linear-gradient(to bottom,var(--main_color) 70%,transparent 70%);}
.example_company_item{flex-wrap: wrap;justify-content: center;}
.example_company_item > dt{width: 100%;order: 2;margin-top: 1.5em;}
.example_company_item > dt h3{font-size: 1.4em;}
.example_company_item > dd{width: 50vw;order: 1;}

#support{padding: 3em 0;}
.support_item{border-radius: 1.5em;padding: 1.5em 1.5em;}
input[type=text],input[type=email],input[type=tel],textarea{padding: 0.5em 0.5em;border-radius: 0.5em;}
input[type=submit]{width: 13em;color: #fff;border: none;padding: 0.7em 1.5em;margin: 2em auto 0;text-align: right;border-radius: 1.5em;background: var(--main_color);font-size: 1.1em;display: block;transition: 0.3s all;cursor: pointer;}

}


/*||||||||||||||||| フッター |||||||||||||||||*/
footer{padding: 1em 1em 2em;}
footer .copyright{font-size: 0.8em;text-align: center;}

@media only screen and (max-width: 768px) {
footer .copyright{font-size: 0.7em;}
}


/* 追加 */
#support textarea{
  width: 100% !important;
  height: 200px !important;
  border: 1px solid #53c9c3;
}
.policy_ttl{
  text-align: center;
  margin-top: 1.5em;
}
.policy{
  background: #FFF;
  border: 1px solid #53c9c3;
  border-radius: 0.6em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 15px 10px;
  height: 150px;
  overflow: auto;
}
.policy_text{
  font-size: 15px;
}