@charset "UTF-8";
/* CSS Document */

body { margin: 0; color: #212121; font-weight: 400; font-family: "M PLUS 1p", sans-serif; line-height: 180%; background: #fff; position: relative; }
img { max-width: 100%; }

.tmpl * { zoom: 1; margin: 0; padding: 0; text-align: left; list-style-type: none; outline: none; border: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; }
.tmpl h1,.tmpl h2,.tmpl h3,.tmpl h4,.tmpl h5 { font-weight: 600; }
.tmpl img { max-width: 100%; height: auto; vertical-align: bottom; border: none; }
.tmpl a:not(.grad_btn) { color: #292727; text-decoration: none; }
.tmpl a:not(.grad_btn):hover { opacity: 0.5; transition: 0.3s ease-in-out; }
.tmpl a img:hover { opacity: 0.5; transition: 0.3s ease-in-out; }
.tmpl table,.tmpl tr,.tmpl td { margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0; box-sizing: border-box; }
.tmpl th { margin: 0; padding: 0; font-weight: normal; box-sizing: border-box; }
.tmpl table tr:nth-of-type(2n+1) { background-color: #fff; }
.tmpl table th { border: none; background-color: #fff; }
.tmpl table td { border: none; }

@media screen and (min-width: 861px) {
body { font-size: 18px; }
.com_wid { margin-left: auto; margin-right: auto; width: 90%; max-width: 1170px; }
.sml_wid { margin-left: auto; margin-right: auto; width: 90%; max-width: 1000px; }
.vsl_wid { margin-left: auto; margin-right: auto; width: 90%; max-width: 800px; }
.sp { display: none; }
}
@media screen and (max-width: 860px) {
body { font-size: 14px; }
.com_wid { margin-left: auto; margin-right: auto; width: 90%; }
.sml_wid { margin-left: auto; margin-right: auto; width: 90%; }
.vsl_wid { margin-left: auto; margin-right: auto; width: 90%; }
.pc { display: none; }
}







/* ヘッダー */
@media screen and (min-width: 1141px) {
#head_wrap { position: relative; width: 100%; background: #fff; z-index: 1000; }
#head_wrap.is-fixed { position: fixed; top: 0; left: 0; animation: fadeSlideDown 0.4s ease forwards; }
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
#head_wrap dl { display: flex; justify-content: space-between; align-items: center; margin: 15px auto; width: 95%; }
#head_wrap ul { display: flex; justify-content: flex-end; align-items: center; }
#head_wrap li { margin: 0 0 0 50px; }
#head_wrap li:last-child a { display: inline-block; padding: 10px 40px; color: #fff; border-radius: 50px; background: #00A800; }
}
@media screen and (max-width: 1140px) {
#head_wrap { padding: 15px 0; background: #fff; }
#head_wrap h1 { width: 100%; text-align: center; }
#head_wrap dd { display: none; }
}





/* フッター */
@media screen and (min-width: 861px) {
#foot_wrap { margin-top: 150px; padding: 0 0 30px 0; background: linear-gradient( to bottom, transparent 0, transparent 70px, #1493d6 70px, #1493d6 100% ); position: relative; }
#foot_wrap::before { display: block; content: ""; width: 100%; height: 108px; background: url(images/foot_01.png) no-repeat center center; }
#foot_wrap .box { margin: 70px 0 0 0; color: #fff; }
#foot_wrap h3 { font-size: 40px; font-weight: 500; text-align: center; line-height: 100%; }
#foot_wrap h4 { display: flex; justify-content: center; align-items: center; margin: 25px 0 0 0; font-family: "Roboto", sans-serif; font-size: 60px; font-weight: 900; line-height: 66.667%; }
#foot_wrap h4::before { display: block; content: ""; width: 41px; height: 53px; background: url(images/foot_02.png) no-repeat center center; }
#foot_wrap dl { display: flex; justify-content: center; align-items: center; margin: 35px 0 0 0; }
#foot_wrap dt { margin: 0 25px 0 0; font-size: 24px; }
#foot_wrap .copyright { margin: 50px 0 0 0; text-align: center; }
}
@media screen and (max-width: 860px) {
#foot_wrap { margin-top: 70px; padding: 0 2.5% 40px 2.5%; background: linear-gradient( to bottom, transparent 0, transparent 30px, #1493d6 30px, #1493d6 100% ); position: relative; }
#foot_wrap::before { display: block; content: ""; width: 100%; height: 83px; background: url(images/foot_01_sp.png) no-repeat center center; }
#foot_wrap .box { margin: 40px 0 0 0; color: #fff; }
#foot_wrap h3 { font-size: 33px; font-weight: 500; text-align: center; line-height: 100%; }
#foot_wrap a { display: block; margin: 30px auto; max-width: 334px; }
#foot_wrap dt { margin: 0 0 0 0; font-size: 24px; text-align: center; }
#foot_wrap dd { margin: 10px 0 5px 0; line-height: 214.286%; text-align: center; }
#foot_wrap .copyright { text-align: center; }
}





/* トップ */
.js-hl { opacity: 0; }
.js-hl span { display: block; opacity: 0; }
.js-hl.is-show { animation: hl-main 0.8s ease forwards; animation-delay: 0.15s; }
.js-hl.is-show span { animation: hl-sub 0.6s ease forwards; }
@keyframes hl-sub {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hl-main {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}


@media screen and (min-width: 861px) {
h2.hl { margin: 0 0 50px 0; font-size: 40px; font-weight: 500; text-align: center; line-height: 100%; }
h2.hl span { display: block; color: #00A800; font-size: 18px; font-weight: 500; text-align: center; line-height: 222.222%; }

#top_wrap .sec_01 { background: url(images/top_01.jpg) no-repeat center bottom; background-size: cover; }
#top_wrap .sec_01 .box { margin: 0 auto; padding: 200px 0; width: 90%; max-width: 900px; }
#top_wrap .sec_01 h2 { font-size: 48px; font-weight: 500; text-align: left; line-height: 145.833%; }
#top_wrap .sec_01 h2 span { text-align: left; }
#top_wrap .sec_01 p { margin: 25px 0 0 0; font-family: "Noto Sans JP"; font-size: 24px; font-weight: 700; line-height: 191.667%; }

#top_wrap .bg { padding: 0 0 85px 0; position: relative; }
#top_wrap .bg::after { content: ""; width: 100%; height: 1100px; background: url(images/top_07.png) no-repeat center; background-size: 100% 1100px; position: absolute; bottom: 60px; left: 0; z-index: 0; }

#top_wrap .sec_02 { margin: 80px 0 0 0; padding: 0 0 130px 0; position: relative; overflow: hidden; z-index: 2; }
#top_wrap .sec_02 p { width: 50%; max-width: 615px; line-height: 222.222%; }
#top_wrap .sec_02 .box { position: absolute; top: 50%; left: 40%; transform: translate(-50%, -50%) translateX(80%); }
#top_wrap .sec_02 .box img { width: 1057px; max-width: none; animation: floatY 4s ease-in-out infinite; }
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
#top_wrap .sec_02 h2 { text-align: left; }
#top_wrap .sec_02 h2 span { text-align: left; }

#top_wrap .sec_03 { position: relative; z-index: 2; }
#top_wrap .sec_03 dl { display: flex; justify-content: space-between; align-items: center; }
#top_wrap .sec_03 dl:first-child { flex-direction: row-reverse; margin: 0 0 90px 0; }
#top_wrap .sec_03 dt { width: 48%; text-align: center; }
#top_wrap .sec_03 dd { padding: 80px 40px; width: 48%; background: #fff; border: 3px solid #F3F4F5; border-radius: 30px; }
#top_wrap .sec_03 h2 { margin: 0 0 30px 0; text-align: left; }
#top_wrap .sec_03 h2 span { text-align: left; }

#top_wrap .sec_04 { margin-top: 65px; background: url(images/top_05.png) no-repeat right top 15px; }
#top_wrap .sec_04 .box { margin: 60px 0 0 0; }
#top_wrap .sec_04 dl { display: flex; padding: 20px 0; border-bottom: solid 1px #BECDF8; position: relative; }
#top_wrap .sec_04 dl::after { position: absolute; content: " "; display: block; border-bottom: solid 1px #1493D6; bottom: -1px; width: 50px; }
#top_wrap .sec_04 dt { padding: 0 0 0 20px; width: 235px; }
#top_wrap .sec_04 dd { flex: 1; }
#top_wrap .sec_04 .arrow { display: flex; align-items: center; color: #1493D6; }
#top_wrap .sec_04 .arrow::after { content: ""; margin: 0 0 0 7px; width: 17px; height: 17px; background: url(images/top_22.png) no-repeat center center; }

#top_wrap .sec_05 { margin-top: 90px; background: url(images/top_06.png) no-repeat right 60px top 15px; }
#top_wrap .sec_05 ul { display: flex; flex-wrap: wrap; margin: 0 0 0 -25px; }
#top_wrap .sec_05 li { margin: 0 0 50px 25px; width: calc(100%/3 - 25px); }
#top_wrap .sec_05 h3 { margin: 15px 0 0 0; }

#top_wrap .sec_06 { margin-top: 160px; }
#top_wrap .sec_06 .box { margin: 60px 0 0 0; }
#top_wrap .sec_06 dl { display: flex; padding: 20px 0; border-bottom: solid 1px #BECDF8; position: relative; }
#top_wrap .sec_06 dl::after { position: absolute; content: " "; display: block; border-bottom: solid 1px #1493D6; bottom: -1px; width: 50px; }
#top_wrap .sec_06 dt { padding: 0 0 0 20px; width: 235px; }
#top_wrap .sec_06 dd { flex: 1; }
#top_wrap .sec_06 ol li { margin: 0 0 0 1em; list-style-type: disc; }

#top_wrap .sec_07 { margin-top: 160px; }
#top_wrap .sec_07 ul { display: flex; justify-content: space-between; margin: 15px 0 0 0; }
#top_wrap .sec_07 ul > li { width: calc(100%/5 - 10px); }
#top_wrap .sec_07 ol > li { margin: 0 0 0 1em; list-style-type: disc; }
#top_wrap .sec_07 li { font-size: 16px; }

#top_wrap .sec_08 { margin-top: 125px; text-align: center; }
}
@media screen and (max-width: 860px) {
h2.hl { margin: 0 0 30px 0; font-size: 33px; font-weight: 500; text-align: center; line-height: 121.212%; }
h2.hl span { display: block; color: #00A800; font-size: 12px; font-weight: 500; text-align: center; line-height: 250%; }

#top_wrap .sec_01 { background: url(images/top_01_sp.jpg) no-repeat center bottom; background-size: cover; }
#top_wrap .sec_01 .box { margin: 0 auto; padding: 100px 0 300px 0; width: 90%; max-width: 900px; }
#top_wrap .sec_01 h2 { font-size: 33px; font-weight: 500; line-height: 151.515%; }
#top_wrap .sec_01 p { margin: 50px 0 0 0; font-family: "Noto Sans JP"; font-size: 24px; font-weight: 700; line-height: 158.333%; }

#top_wrap .bg { padding: 0 0 40px 0; background: url(images/top_07.svg) no-repeat center bottom; background-size: 400%; }

#top_wrap .sec_02 { margin: 80px 0 0 0; }
#top_wrap .sec_02 .box { margin: 10px 0 0 0; height: 360px; position: relative; overflow: hidden; }
#top_wrap .sec_02 .box img { width: 520px; max-width: none; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0) translateX(30%); animation: floatY 4s ease-in-out infinite; }
@keyframes floatY {
  0% { transform: translate(-50%, 0) translateX(30%) translateY(0); }
  50% { transform: translate(-50%, 0) translateX(30%) translateY(-20px); }
  100% { transform: translate(-50%, 0) translateX(30%) translateY(0); }
}
#top_wrap .sec_02 h2 { text-align: left; }
#top_wrap .sec_02 h2 span { text-align: left; }

#top_wrap .sec_03 { margin-top: 30px; }
#top_wrap .sec_03 dl { display: flex; flex-direction: column-reverse; }
#top_wrap .sec_03 dt { margin: 0 0 10px 0; padding: 0 15px; }
#top_wrap .sec_03 dl:first-child dt { text-align: right; }
#top_wrap .sec_03 dt img { width: 40%; }
#top_wrap .sec_03 dd { margin: 0 0 10px 0; padding: 30px; background: #fff; border: 3px solid #F3F4F5; border-radius: 30px; }
#top_wrap .sec_03 h2 { margin: 0 0 20px 0; text-align: left; }
#top_wrap .sec_03 h2 span { text-align: left; }

#top_wrap .sec_04 { margin-top: 40px; background: url(images/top_05.png) no-repeat right top 45px; background-size: 27px 19px; }
#top_wrap .sec_04 h2 { margin: 0; }
#top_wrap .sec_04 .box { margin: 15px 0 0 0; }
#top_wrap .sec_04 dl { display: flex; padding: 20px 0; border-bottom: solid 1px #BECDF8; position: relative; }
#top_wrap .sec_04 dl::after { position: absolute; content: " "; display: block; border-bottom: solid 1px #1493D6; bottom: -1px; width: 50px; }
#top_wrap .sec_04 dt { width: 95px; }
#top_wrap .sec_04 dd { flex: 1; }
#top_wrap .sec_04 .arrow { display: flex; align-items: center; color: #1493D6; }
#top_wrap .sec_04 .arrow::after { content: ""; margin: 0 0 0 7px; width: 16px; height: 16px; background: url(images/top_22.png) no-repeat center center; background-size: 100% 100%; }

#top_wrap .sec_05 { margin-top: 100px; background: url(images/top_06.png) no-repeat right 20px top 35px; background-size: 10px 27px; }
#top_wrap .sec_05 ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
#top_wrap .sec_05 li { margin: 0 0 35px 0; width: 46%; }
#top_wrap .sec_05 h3 { margin: 10px 0 0 0; font-size: 16px; line-height: 150%; }

#top_wrap .sec_06 { margin-top: 65px; }
#top_wrap .sec_06 h2 { margin: 0; }
#top_wrap .sec_06 .box { margin: 15px 0 0 0; }
#top_wrap .sec_06 dl { display: flex; padding: 20px 0; border-bottom: solid 1px #BECDF8; position: relative; }
#top_wrap .sec_06 dl::after { position: absolute; content: " "; display: block; border-bottom: solid 1px #1493D6; bottom: -1px; width: 50px; }
#top_wrap .sec_06 dt { width: 95px; }
#top_wrap .sec_06 dd { flex: 1; }
#top_wrap .sec_06 ol li { margin: 0 0 0 1em; list-style-type: disc; }

#top_wrap .sec_07 { margin-top: 100px; }
#top_wrap .sec_07 .sp { margin: 15px 0 0 0; text-align: center; }

#top_wrap .sec_08 { margin-top: 75px; text-align: center; }
}