@charset "UTF-8";


/* -- slider ----------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	#headline { position: relative; }
	.main_arrow { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0; font-size: 10px;}
	.main_arrow img { width: 40px;}
}
@media screen and (min-width: 768px) and (max-width: 960px) {
	#headline { background: url("../img/common/main_bg.jpg") center 0 no-repeat; background-size: 225%; height: 500px; position: relative; }
	#headline .pc { position: absolute; top: 50px; left: 0; right: 0; margin: 0 auto; width: 700px; }
	.main_arrow { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0;}
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
	#headline { background: url("../img/common/main_bg.jpg") center 0 no-repeat; background-size: 180%; height: 590px; position: relative; }
	#headline .pc { position: absolute; top: 60px; left: 0; right: 0; margin: 0 auto; width: 875px; }
	.main_arrow { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0;}
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
	#headline { background: url("../img/common/main_bg.jpg") center 0 no-repeat; background-size: 160%; height: 650px; position: relative; }
	#headline .pc { position: absolute; top: 50px; left: 0; right: 0; margin: 0 auto; width: 875px; }
	.main_arrow { position: absolute; bottom: 60px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0;}
}
@media screen and (min-width: 1280px) and (max-width: 1499px) {
	#headline { background: url("../img/common/main_bg.jpg") center 0 no-repeat; background-size: 150%; height: 660px; position: relative; }
	#headline .pc { position: absolute; top: 70px; left: 0; right: 0; margin: 0 auto; width: 875px; }
	.main_arrow { position: absolute; bottom: 60px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0;}
}
@media screen and (min-width: 1500px) and (max-width: 1799px) {
	#headline { background: url("../img/common/main_bg.jpg") center 0 no-repeat; background-size: 140%; height: 660px; position: relative; }
	#headline .pc { position: absolute; top: 80px; left: 0; right: 0; margin: 0 auto; width: 875px; }
	.main_arrow { position: absolute; bottom: 60px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0;}
}
@media screen and (min-width: 1800px) {
	#headline { background: url("../img/common/main_bg.jpg") center 0 no-repeat; background-size: cover; height: 695px; position: relative; }
	#headline .pc { position: absolute; top: 80px; left: 0; right: 0; margin: 0 auto; width: 875px; }
	.main_arrow { position: absolute; bottom: 70px; left: 0; right: 0; margin: 0 auto; }
	.main_arrow p { margin-bottom: 0px; line-height: 1.0;}
}

/* -- Structure [Index] -----------------------------------------------------*/
@media screen and (max-width: 767px) {
	section h2 { font-size: 24px; font-weight: 600; text-align: center; color: #0a102c; margin-bottom: 20px; line-height: 1.2; }
	section h2 span.en { font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.5em; color: #54ACE1; }
	section h3 { text-align: center; color: #0a102c; font-weight: bold; margin-bottom: 10px; font-size: 13px; }
	section h3 span { border-bottom: 3px solid #0a102c; padding-bottom: 5px; }
	section h3 span em {font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.2em; color: #54ACE1; font-style: normal; }
	.icon_mark { width: 40px; margin:0 auto 10px;}
	.lead { text-align: left; margin-bottom: 20px; font-size: 15px; }
	.lead span { font-weight: bold; }
	
	.four_list { margin: 20px 0 20px;}
	.four_list li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.four_list li img { width: 70%; margin: 0 15% 20px; }
	.four_list li h4 { font-size: 18px; text-align: center;  font-weight: bold; }
	.four_list li h4 span { font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.2em; }
	.four_list li h6 { font-size: 10px; padding: 1px 0; text-align: center; background: #54ACE1; margin-bottom: 10px; color: #fff; font-weight: bold; }
	.four_list li p { font-size: 15px;}
	.four_list li p span { font-weight: bold; }
	.four_list li p span.small { font-weight: normal; }
	
	.five_list li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.five_list li img { width: 40%; margin: 0 30% 10px; }
	.five_list li h3 { text-align: center; color: #000; font-size: 18px; font-weight: bold; margin-bottom: 20px; }
	.five_list li h6 { text-align: center; margin-bottom: 5px; font-size: 12px; font-family: 'Roboto Condensed', sans-serif; font-weight:700; color: #54ACE1; }	
}
@media screen and (min-width: 768px) {
	section h2 { font-size: 36px; font-weight: 600; text-align: center; color: #0a102c; margin-bottom: 20px; line-height: 1.2; }
	section h2 span.en { font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.5em; color: #54ACE1; }
	section h3 { text-align: center; color: #0a102c; font-weight: bold; margin-bottom: 20px; }
	section h3 span { border-bottom: 3px solid #0a102c; padding-bottom: 5px; }
	section h3 span em {font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.2em; color: #54ACE1; font-style: normal; }
	.icon_mark { text-align: center; margin-bottom: 10px;}
	.lead { text-align: center; margin-bottom: 20px; font-size: 16px; }
	.lead span { font-size: 1.1em; font-weight: bold; }
	
	.four_list { margin: 20px 0 60px;}
	.four_list li { float: left; width: 21%; padding: 0 2%; }
	.four_list li img { width: 80%; margin: 0 10% 20px; }
	.four_list li h4 { font-size: 21px; text-align: center;  font-weight: bold; }
	.four_list li h4 span { font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.2em; }
	.four_list li h6 { font-size: 12px; padding: 1px 0; text-align: center; background: #54ACE1; margin-bottom: 10px; color: #fff; font-weight: bold; }
	.four_list li p { font-size: 16px;}
	.four_list li p span { font-weight: bold; }
	.four_list li p span.small { font-weight: normal; }
	
	.five_list li { float: left; width: 23%; margin-right: 4%; margin-bottom: 20px; }
	.five_list li:nth-child(1) { margin-left: 11.5%;}
	.five_list li:nth-child(3) { margin-right: 11.5%;}
	.five_list li:nth-child(4) { margin-left: 25%;}
	.five_list li:nth-child(5) { margin-right: 25%;}
	.five_list li img { width: 40%; margin: 0 30% 10px; }
	.five_list li h3 { text-align: center; color: #000; font-size: 21px; font-weight: bold; margin-bottom: 20px; }
	.five_list li h6 { text-align: center; margin-bottom: 5px; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; font-weight:700; color: #54ACE1; }	
}
@media screen and (min-width: 768px) and (max-width: 900px) {
	section h2 { font-size: 30px; }
	.five_list li { float: left; width: 30%; margin-right: 3%; margin-bottom: 20px; }
	.five_list li:nth-child(1) { margin-left: 2%;}
	.five_list li:nth-child(3) { margin-right: 2%;}
	.five_list li:nth-child(4) { margin-left: 17.5%;}
	.five_list li:nth-child(5) { margin-right: 17.5%;}
	
	.four_list li h4 { font-size: 18px;}
	.five_list li h3 { font-size: 18px;}
}
/* -- section -----------------------------------------------------*/
@media screen and (max-width: 767px) {
	section { background: #f4f4f4; padding: 4%; }
	section .in { padding: 4%; background: #fff;}
	
	.attention_list li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.at_L { float: left; width: 12%; margin-right: 4%;}
	.at_R { float: left; width: 84%; }
	.at_R h4 { font-size: 18px; font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; }
	.at_R p { font-size: 14px; margin-bottom: 0px; }
	
	.sb_L { margin-bottom: 20px; }
}
@media screen and (min-width: 768px) {
	section .in { position: relative; }
	section#anch01 { background: url("../img/common/second_bg.jpg") center center no-repeat; background-size: cover; }
	section#anch04 { background: #E9E9E9; }
	section#anch08 { background: #F4F4F4;}
	section#anch10 { background: #F4F4F4;}
	section.contactbnr { background: url("../img/common/kon_bg.jpg") 0 0 repeat; padding: 20px 0; } 
	section.contactbnr .in { background: #fff; border-radius: 6px; padding: 20px 40px; }
	section.contactbnr h4 { font-size: 18px; color: #fff; text-align: center; margin-bottom: 10px; }
	section.contactbnr h4 span { font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 1.2em;}
	.h_contact_list li { float: left; margin-right: 20px;}
	.h_contact_list li:nth-child(3) { margin-right: 0px;}
	
	.attention_list { width: 900px; margin: 0 auto; }
	.attention_list li { margin-bottom: 20px; }
	.at_L { float: left; width: 8%; margin-right: 2%;}
	.at_R { float: left; width: 88%; }
	.at_R h4 { font-size: 24px; font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; }
	.at_R p { font-size: 17px; margin-bottom: 0px; }
	
	.support_box {
		position: relative; 
		margin: 0 4%;
		background-color: #ECECEC;
		background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
		-webkit-background-size: 7px 7px;
		padding: 40px;
	}
	.supportTtl { position: absolute; top: -50px; left: 0; right: 0; margin: 0 auto; width: 650px;}
	.support_box .in_in { padding: 40px; background: #fff;}
	.sb_L { float: left; width: 34%; margin-right: 4%; }
	.sb_R { float: left; width: 62%; padding-top: 10px; }
	.sb_R p { font-size: 16px; }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
	section .in { margin: 0 2%; padding: 40px 0;}
	section.contactbnr { padding: 10px 0 20px; }
	section.contactbnr .in { padding: 20px 20px; }
	
	.h_contact_list li:nth-child(1) { width: 90px;}
	.h_contact_list li:nth-child(2) { width: 240px;}
	.h_contact_list li:nth-child(3) { width: 320px;}
	
	.attention_list { width: 700px; margin: 0 auto; }
	
	section#anch04 .in:after { position: absolute; bottom:-20px; left: 0; right: 0; margin: 0 auto; content: ""; width: 0; height: 0; border-style: solid; border-width: 20px 300px 0 300px; border-color: #e9e9e9 transparent transparent transparent;}
	section#anch05 .in { padding-top: 60px; }
	
	.at_R h4 { font-size: 21px;}
}
@media screen and (min-width: 961px) and (max-width: 1024px) {
	section .in { margin: 0 2%; padding: 40px 0; }
	section.contactbnr .in { width: 860px; padding: 20px 20px; margin: 0 auto; }
	
	.h_contact_list li:nth-child(1) { width: 110px;}
	.h_contact_list li:nth-child(2) { width: 290px;}
	.h_contact_list li:nth-child(3) { width: 400px;}
	
	section#anch04 .in:after { position: absolute; bottom:-30px; left: 0; right: 0; margin: 0 auto; content: ""; width: 0; height: 0; border-style: solid; border-width: 30px 450px 0 450px; border-color: #e9e9e9 transparent transparent transparent;}
	section#anch05 .in { padding-top: 70px; }
}
@media screen and (min-width: 1025px) and (max-width: 1279px) {
	section .in { width: 1024px; margin: 0 auto; padding: 40px 0; }
	section.contactbnr .in { width: 920px; margin: 0 auto; }
	section#anch04 .in:after { position: absolute; bottom:-40px; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 40px 512px 0 512px; border-color: #e9e9e9 transparent transparent transparent;}
	section#anch05 .in { padding-top: 80px; }
}
@media screen and (min-width: 1280px) {
	section .in { width: 1260px; margin: 0 auto; padding: 40px 0; }
	section.contactbnr .in { width: 920px; margin: 0 auto; }	
	section#anch04 .in:after { position: absolute; bottom:-40px; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 40px 630px 0 630px; border-color: #e9e9e9 transparent transparent transparent;}
	section#anch05 .in { padding-top: 80px; }
}

/* -- Structure [Index] -----------------------------------------------------*/
@media screen and (max-width: 767px) {
	.tbl01 { width: 100%; border-bottom: 3px solid #B4B4B4; }
	.tbl01 td { padding: 2%; font-size: 15px; border-top: 3px solid #B4B4B4; vertical-align: middle; text-align: center; display: block; }
	.tbl01 th { padding: 2%; font-size: 15px; border-top: 1px solid #B4B4B4; vertical-align: middle; text-align: center; display: block; }
	
	.priceTbl { border-bottom: 2px solid #55ACE1; width: 100%; }
	.priceTbl th { font-size: 16px; padding: 10px; color: #55ACE1; border-top: 2px solid #55ACE1; font-weight: normal; display: block; text-align: center; }
	.priceTbl td { font-size: 16px; padding: 10px; color: #000; border-top: 1px solid #55ACE1; font-weight: bold; display: block; text-align: center; }
	
	section#anch07 p.alC { text-align: left !important; }
	
	.flowStep { width: 100%; }
	.flowStep li { margin-bottom: 20px;}
	.flowStep li dl { margin-bottom: 10px;}
	.flowStep li dl dt { background:#55ACE1; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 16px; text-align: center; border: 1px solid #55ACE1; border-radius: 6px 6px 0 0 ; font-style: italic; padding: 1%; }
	.flowStep li dl dt span { font-size: 1.2; }
	.flowStep li dl dd { color: #55ACE1; font-size: 16px; padding: 1% 2%;  border: 1px solid #55ACE1; background: #fff; border-radius: 0 0 6px 6px; }
	.flowStep li p { margin: 0 10px; font-size: 14px; }
}
@media screen and (min-width: 768px) {
	.tbl01 { width: 700px; margin:0 auto;  }
	.tbl01 td { padding: 20px; font-size: 18px; border-bottom: 3px solid #B4B4B4; vertical-align: middle; width: 30%; text-align: center; }
	.tbl01 th { padding: 20px; font-size: 18px; border-bottom: 1px solid #B4B4B4; vertical-align: middle; text-align: left; width: 70%;}
	
	.priceTbl { width: 760px; margin: 0 auto; }
	.priceTbl th { font-size: 21px; padding: 20px; color: #55ACE1; border-bottom: 2px solid #55ACE1; font-weight: normal;}
	.priceTbl td { font-size: 21px; padding: 20px; color: #000; border-bottom: 2px solid #55ACE1; font-weight: bold; }
	
	.flowStep { width: 960px; margin:0 auto; }
	.flowStep li { margin-bottom: 20px;}
	.flowStep li dl { margin-bottom: 20px;}
	.flowStep li dl dt { float: left; background:#55ACE1; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight:700; font-size: 18px; text-align: center; width: 12%; border: 1px solid #55ACE1; height: 40px; line-height: 40px; border-radius: 20px 0 0 20px; font-style: italic; }
	.flowStep li dl dt span { font-size: 1.2; }
	.flowStep li dl dd { float: left; color: #55ACE1; font-size: 21px; width: 82%; padding: 0 2%;  border: 1px solid #55ACE1; height: 40px; line-height: 40px; background: #fff; border-radius: 0 20px 20px 0; }
	.flowStep li p { margin: 0 20px; }
}
@media screen and (min-width: 768px) and (max-width: 900px) {
	.priceTbl { width: 100%; margin: 0 auto; }
	.flowStep { width: 700px; margin:0 auto; }
	.priceTbl th { font-size: 18px; padding: 20px; color: #55ACE1; border-bottom: 2px solid #55ACE1; font-weight: normal;}
	.priceTbl td { font-size: 18px; padding: 20px; color: #000; border-bottom: 2px solid #55ACE1; font-weight: bold; }
	.flowStep li dl dd { font-size: 18px;}
}
	
@media screen and (max-width: 767px) {
	.scroll-box { border: 1px solid #dedede; padding: 4%; overflow-y: scroll; background: #fff; height: 200px; margin-bottom: 40px;  }
	.scroll-box h3 { text-align-last: center; font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #333;  }
	.scroll-box h4 { font-size: 1.0rem; margin-bottom: 5px; color: #333; }
	.scroll-box p { margin-bottom: 20px; font-size: 0.9rem; color: #333; }

	.tblpp { margin-bottom: 20px;}
	.tblpp th { padding: 5px 10px; text-align: center; font-size: 13px; background: #f4f4f4; border: 1px solid #dedede; font-weight: normal; display: block; }
	.tblpp td { padding: 5px 10px; text-align: left; font-size: 13px; background: #fff; border: 1px solid #dedede; display: block; }
}
@media screen and (min-width: 768px) {
	.scroll-box { border: 1px solid #dedede; padding: 30px 40px; overflow-y: scroll; background: #fff; height: 200px; margin-bottom: 40px;  }
	.scroll-box h3 { text-align-last: center; font-size: 21px; font-weight: bold; margin-bottom: 20px; color: #333;  }
	.scroll-box h4 { font-size: 1.1rem; margin-bottom: 5px; color: #333; }
	.scroll-box p { margin-bottom: 20px; font-size: 0.9rem; color: #333; }	
	
	.tblpp { margin-bottom: 20px;}
	.tblpp th { padding: 5px 10px; text-align: center; font-size: 14px; background: #f4f4f4; border: 1px solid #dedede; font-weight: normal;}
	.tblpp td { padding: 5px 10px; text-align: left; font-size: 14px; background: #fff; border: 1px solid #dedede; }
}