@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/

#main{ font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500;}
.mincho{ letter-spacing: 1px; font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-weight: normal;}
.blue{color: #2e6da4;}
.tab_on{display: none;}
.sph_on{display: none;}

.sec_ttl_wrap{ text-align: center; margin: 0 auto;}
.sec_ttl_wrap .en{color: #42cbe3; font-size: 24px; font-weight: 700;}
.sec_ttl_wrap .sec_ttl{ font-size: 28px;font-weight: 500;}

/*-------------------------
__mv
-------------------------*/
#main .mv{ width: 100%; height: auto; background: url("./images/mv_bg.jpg"); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; position: relative;}
#main .mv .mv_inner{ padding: 130px 50px 0;}
#main .mv .mv_inner .mv_ttl_flex{ display: flex; gap: 70px; align-items: center; margin: 0 auto; max-width: 1000px;}
#main .mv .mv_inner .mv_ttl_flex .mv_ill_wrap{ width: 290px; height: auto;}
#main .mv .mv_inner .mv_ttl_flex .mv_ill_wrap img{ width: 100%; height: auto; vertical-align: bottom;}
#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap{ width: calc(100% - 350px);}
#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_subttl{ font-size: 32px; font-weight: 900; margin-bottom: 10px; color: #2e6da4; line-height: 1;}
#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl{ font-size: 100px; line-height: 1.2; font-weight: 700; letter-spacing: 4px; text-shadow: 0px 0px 5px rgba(250, 250, 250, 0.8), 0px 0px 10px rgba(250, 250, 250, 0.8), 0px 0px 10px rgba(250, 250, 250, 0.8);}
#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl span{ font-size: 98px; letter-spacing: 1px;}
#main .mv .obi{ padding: 40px 0; background: #2e6da4; font-size: 36px; color: #fff; text-align: center; font-weight: 900;}
/*-------------------------
__topic_path
-------------------------*/
#main .topic_path{clear:both; box-sizing: border-box; background: #F2F6F7;}
#main .topic_path ul{width:100%;text-align:left;max-width: 1100px; margin: 0 auto; padding: 20px 50px;}
#main .topic_path li{font-size:14px;line-height:1.4;font-weight:700;color:#000;vertical-align:top;display:inline-block;}
#main .topic_path li:before{content:">";color:#000;font-weight:400;margin-left:5px;margin-right:5px;}
#main .topic_path li:first-child:before{content:"";margin:0;}
#main .topic_path li a{font-weight:400;color:#3EADBD;;text-decoration:underline;}
#main .topic_path li a:hover{text-decoration:none;}

/*-------------------------
__block01
-------------------------*/
#block01{ background: #F2F6F7;}
#block01 .inner{ padding: 50px 50px 70px; max-width: 1100px; box-sizing: border-box; margin: 0 auto; text-align: center;}
#block01 .inner .blo_ttl{ font-size: 32px; font-weight: 900;}
#block01 .inner .bg_w{background: #fff;}
#block01 .inner .bg_w ul{ text-align: left; margin: 0 auto; max-width: 770px; font-size: 22px; font-weight: 700; padding: 40px 0;}
#block01 .inner .bg_w ul li{}
#block01 .inner .arrow_wrap{ margin: 50px auto 40px;}
#block01 .inner h3{ font-size: 32px; line-height: 1.6;}

/*-------------------------
__block02
-------------------------*/
#block02::before {content:"";display:block;position:fixed;top:0;left:0;z-index:-2;width:100%;height:100vh;background-repeat:no-repeat;background-position:top;background-image:url("./images/worries_bg.jpg");background-size:cover;}
#block02 .inner{ padding: 160px 0 200px;}
#block02 .inner .sec_ttl_wrap{}
#block02 .inner .sec_ttl_wrap .sec_ttl span{ position: relative; color: #fff;}
#block02 .inner .sec_ttl_wrap .sec_ttl span::before,
#block02 .inner .sec_ttl_wrap .sec_ttl span::after{ position: absolute; content: ""; background: url("images/worries_ttl_dec@2x.png")no-repeat; width: 36px; height: 39px; background-size: 100%;}
#block02 .inner .sec_ttl_wrap .sec_ttl span::before{ left: -50px; top: 50%;transform: translateY(-50%)}
#block02 .inner .sec_ttl_wrap .sec_ttl span::after{ right: -50px; top: 50%; transform: scale(-1, 1) translateY(-50%);}
#block02 .inner .flex_wrap{ max-width: 1200px; padding: 120px 50px 0; box-sizing: border-box; margin: 0 auto;}
#block02 .inner .flex_wrap ul{ display: flex; justify-content: space-between; align-items: stretch; gap: 30px;}
#block02 .inner .flex_wrap ul li{ background: #fff; position: relative; width: calc(25% - 22.5px); padding: 80px 20px 20px; box-sizing: border-box;}
#block02 .inner .flex_wrap ul li .ill_wrap{position: absolute; left: 50%; transform: translateX(-50%); top: -50px;}
#block02 .inner .flex_wrap ul li .ill_wrap img{}
#block02 .inner .flex_wrap ul li p{ font-size: 18px; font-weight: 700; line-height: 1.4;}

/*-------------------------
__block03
-------------------------*/
#block03{ background: #fff;}
#block03 .inner{ padding: 130px 50px 60px; max-width: 910px; box-sizing: border-box; margin: 0 auto;}
#block03 .inner .kome{ text-align: center; margin-top: 30px;}
#block03 .inner .sec_ttl_wrap{ position: relative; max-width: 460px; padding-bottom: 50px;}
#block03 .inner .sec_ttl_wrap .abs_wrap{ position: absolute; content: ""; bottom: 0;}
#block03 .inner .sec_ttl_wrap .abs01{ left: -60px;}
#block03 .inner .sec_ttl_wrap .abs02{ right: -100px;}

#block03 .inner .item_wrap{ margin-bottom: 80px;}
#block03 .inner .item_wrap .item{ background: #f2f6f7; border: 1px solid #dee7e9; padding: 20px 40px; display: flex; gap: 25px; align-items: center; margin-bottom: 20px; line-height: 1.6;}
#block03 .inner .item_wrap .item:last-child{ margin-bottom: 0;}
#block03 .inner .item_wrap .item .icon_wrap{ width: 30px;}
#block03 .inner .item_wrap .item .icon_wrap img{}
#block03 .inner .item_wrap .item p{ width: calc(100% - 25px); font-weight: 700; font-size: 18px;}
#block03 .inner .item_wrap .item p .blue{ color: #33a1db; font-size: 20px;}

#block03 .inner .item_wrap h3{ font-size: 14px;}
#block03 .inner .item_wrap h3 .blue{ font-weight: 900; font-size: 32px;}
#block03 .inner .item_wrap .dl_wrap{ display: flex; justify-content: space-between; gap:10px;}
#block03 .inner .item_wrap .dl_wrap dl{ width: calc(50% - 5px); text-align: center; font-weight: 700;}
#block03 .inner .item_wrap .dl_wrap dl dt{ background: #33a1db; border: 1px solid #33a1db; color: #fff; margin-bottom: 10px; font-size: 20px;}
#block03 .inner .item_wrap .dl_wrap dl dd{ background: #f2f6f7; border: 1px solid #dee7e9; font-size: 20px;}
#block03 .inner .item_wrap .dl_wrap dl dd .num{ font-size: 28px;}
#block03 .inner .item_wrap .dl_wrap dl dd .small{ font-size: 18px; color: #000;}

#block03 .inner .link_wrap .a_wrap{ max-width: 500px; margin: 0 auto;}
#block03 .inner .link_wrap .a_wrap a{ font-size: 20px; font-weight: 700;text-align: center; width: 100%; color: #fff; padding: 20px 10px; display: block; transition: .3s; background: linear-gradient(150deg, rgba(194, 217, 78, 1) 0%, rgba(113, 175, 78, 1) 25%, rgba(51,161,219,1) 50%, rgba(194, 217, 78, 1) 100%); background-size: 200% 100%; border-radius: 5px;}

@media screen and (min-width:768px) {
	#block03 .inner .link_wrap .a_wrap a:hover{ background-position: 100% 0; text-decoration: none; transform: scale(1.05);}
}
@media screen and (max-width:1199px) {
	/*-------------------------
	__mv
	-------------------------*/
	#main .mv .mv_inner{ padding: 80px 50px 0;}
	#main .mv .mv_inner .mv_ttl_flex{ gap: 50px; max-width: 812px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ill_wrap{ width: 255px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap{ width: calc(100% - 305px);}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_subttl{ font-size: 30px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl{ font-size: 70px; }
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl span{ font-size: 68px;}
	#main .mv .obi{ font-size: 30px;}
}
@media screen and (max-width:960px) {
	.tab_on{display: block;}
	/*-------------------------
	__mv
	-------------------------*/
	#main .mv .mv_inner .mv_ttl_flex{ gap: 10px; max-width: 652px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ill_wrap{ width: 200px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap{ width: calc(100% - 210px);}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_subttl{ font-size: 26px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl{ font-size: 68px; }
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl span{ font-size: 66px;}
	#main .mv .obi{ font-size: 27px; padding: 20px 0; line-height: 1.4;}
	/*-------------------------
	__block01
	-------------------------*/
	#block01 .inner .blo_ttl{ line-height: 1.6;margin-bottom: 20px; font-size: 30px;}
	#block01 .inner .bg_w ul{ max-width: 630px; font-size: 18px; padding: 20px 0;}
	/*-------------------------
	__block02
	-------------------------*/
	#block02 .inner{ padding: 80px 0 120px;}
	#block02 .inner .flex_wrap{ padding: 100px 50px 0;}
	#block02 .inner .flex_wrap ul{ flex-wrap: wrap; gap: 90px 30px;}
	#block02 .inner .flex_wrap ul li{ width: calc(50% - 15px); padding: 50px 20px 20px;}
	#block02 .inner .flex_wrap ul li .ill_wrap{ width: 80px;}
	#block02 .inner .flex_wrap ul li p{ font-size: 16px;}
}
@media screen and (max-width:767px) {
	.sec_ttl_wrap .en{ font-size: 20px; line-height: 1.6; margin-bottom: 10px;}
	.sec_ttl_wrap .sec_ttl{ font-size: 21px; line-height: 1.6;}
	.sph_on{display: block;}
	/*-------------------------
	__mv
	-------------------------*/
	#main .mv .mv_inner{ padding: 60px 20px 0 0;}
	#main .mv .mv_inner .mv_ttl_flex{ gap: 10px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ill_wrap{ width: 30%;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap{ width: calc(70% - 10px);}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_subttl{ font-size: 3.9vw;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl{ font-size: 9vw; letter-spacing: 4px;}
	#main .mv .mv_inner .mv_ttl_flex .mv_ttl_wrap .mv_ttl span{ font-size: 8.98vw;}
	#main .mv .obi{ font-size: 20px; padding: 10px 0;}
	/*-------------------------
	__topic_path
	-------------------------*/
	#main .topic_path ul{ padding: 10px 20px;}
	/*-------------------------
	__block01
	-------------------------*/
	#block01 .inner{ padding: 0 20px 50px;}
	#block01 .inner .blo_ttl{ font-size: 24px;}
	#block01 .inner .bg_w ul{ max-width: initial; font-size: 14px; padding: 20px;}
	#block01 .inner .bg_w ul li{ text-indent: -1em; padding-left: 1em; line-height: 1.6; margin-bottom: 12px;}
	#block01 .inner .arrow_wrap{ margin: 30px auto 20px; width: 80px;}
	#block01 .inner h3{ font-size: min(5.4vw, 30px);}

	/*-------------------------
	__block02
	-------------------------*/
	#block02 .inner .flex_wrap{ padding: 100px 20px 0;}
	#block02 .inner{ padding: 50px 0 60px;}
	#block02 .inner .sec_ttl_wrap .sec_ttl span::before,
	#block02 .inner .sec_ttl_wrap .sec_ttl span::before{ left: -72px;}
	#block02 .inner .flex_wrap{ padding: 60px 20px 0;}
	#block02 .inner .flex_wrap ul{ gap: 50px 20px;}
	#block02 .inner .flex_wrap ul li{ width: calc(50% - 10px); padding: 40px 20px 20px;}
	#block02 .inner .flex_wrap ul li .ill_wrap{top: -30px; width: 60px;}
	#block02 .inner .flex_wrap ul li p{ font-size: 14px;}

	/*-------------------------
	__block03
	-------------------------*/
	#block03 .inner{ padding: 50px 20px;}
	#block03 .inner .kome{ text-align: left; margin-top: 10px; font-size: 14px; line-height: 1.4;}
	#block03 .inner .sec_ttl_wrap{ max-width: 300px; padding-bottom: 20px;}
	#block03 .inner .sec_ttl_wrap .abs01{ left: -10px; width: 70px;}
	#block03 .inner .sec_ttl_wrap .abs02{ right: -30px; width: 90px;}
	#block03 .inner .item_wrap{ margin-bottom: 30px;}
	#block03 .inner .item_wrap .item{padding: 20px; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center;}
	#block03 .inner .item_wrap .item .icon_wrap{ width: 20px;}
	#block03 .inner .item_wrap .item p{ width: 100%; font-size: 16px; text-align: center;}
	#block03 .inner .item_wrap .item p .blue{ font-size: 18px;}
	#block03 .inner .item_wrap h3 .blue{ font-size: 24px;}
	#block03 .inner .item_wrap .dl_wrap dl dt{ margin-bottom: 10px; font-size: 16px;}
	#block03 .inner .item_wrap .dl_wrap dl dd{ font-size: 16px;}
	#block03 .inner .item_wrap .dl_wrap dl dd .num{ font-size: 20px;}
	#block03 .inner .item_wrap .dl_wrap dl dd .small{ font-size: 14px;}
}
@media screen and (max-width:499px) {
	/*-------------------------
	__block03
	-------------------------*/
	#block03 .inner .item_wrap .dl_wrap{ flex-wrap: wrap; gap:10px;}
	#block03 .inner .item_wrap .dl_wrap dl{ width: 100%;}
}
@media screen and (max-width:374px) {
	/*-------------------------
	__mv
	-------------------------*/
	#main .mv .mv_inner{ padding: 60px 10px 0 0;}
	#main .mv .obi{ font-size: 16px;}
	/*-------------------------
	__block01
	-------------------------*/
	#block01 .inner .blo_ttl{ font-size: 20px;}
	/*-------------------------
	__block03
	-------------------------*/
	#block03 .inner .sec_ttl_wrap .abs01{ left: 5; width: 50px;}
	#block03 .inner .sec_ttl_wrap .abs02{ right: -10px; width: 68px;}
	#block03 .inner .item_wrap .item{padding: 10px;}
	#block03 .inner .item_wrap .item p .blue{ font-size: 16px;}
	#block03 .inner .link_wrap .a_wrap a{ font-size: 16px;}
}