@charset "utf-8";
/*||||||||||||||||||||||||||||||||||||||||||||||||||
----------------------------------------------------

			RESET

----------------------------------------------------
||||||||||||||||||||||||||||||||||||||||||||||||||||*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,label,textarea,p,blockquote,table,caption,tbody,tfoot,thead,th,td,option,figure,figcaption{
	margin:0;
	padding:0;}

fieldset,img,abbr,acronym{border:0;}

ol,ul{list-style:none;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

a,ins,del{text-decoration: none;}

a {
	display: inline-block;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;}

img{
	display: inline-block;
	width: 100%;
	height: auto;
	border: 0;
	margin: 0;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;}

object,embed,th,td{vertical-align: top;}

/***CLEAR FIX***/
.clf::after {
	content: "";
	display: block;
	clear: both;}

/***NO iOS STYLE***/
input[type="submit"],
input[type="button"],
input[type="reset"] {
-webkit-appearance: none;}
/*||||||||||||||||||||||||||||||||||||||||||||||||||
----------------------------------------------------

			COMMON

----------------------------------------------------
||||||||||||||||||||||||||||||||||||||||||||||||||||*/
* {
	box-sizing: border-box;
	outline: none;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
	font-size: 15px;
	font-weight:400;
	color: #333;
}
html{
	overflow-x: hidden;
	overflow-y: auto;
}
body{
	opacity: 0;
	padding: 0;
	font-size: 15px;
	color: #333;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
body.show{
	opacity: 1;
}
.link_btn a{
	width: 100%;
	max-width: 230px;
	display: block;
	margin: 0 auto;
	padding: 8px 0 7px 0;
	background: #00759C;
	border-radius: 45px;
	box-shadow: 6px 6px 0 #86CAB6;
	position: relative;
	overflow: hidden;
	transition: all .6s;
}
.link_btn a::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 45px;
	margin: auto;
	width: 60px;
	height: 60px;
	background: #86CAB6;
	transform: scale(0);
	transition: 0.6s ease all;
	z-index: 0;
}
.link_btn a svg{
	width: 100%;
	max-width: 130px;
	display: block;
	margin: 0 auto;
	position: relative;
}
.link_btn a svg g{
	fill: #fff;
	transition: all .3s;
	z-index: 1;
}
.fadeup{
	opacity: 0;
	transform: translateX(30px);
}
.fadeup.anim_active{
animation: .8s fadeup forwards;
}
@-webkit-keyframes fadeup {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes fadeup {
	0% {
		opacity: 0;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@media all and (min-width:769px) {
	.link_btn a{
		max-width: 391px;
		padding: 27px 0 26px 0;
	}
	.link_btn a svg{
		max-width: 215px;
	}
	.link_btn a:hover{
		box-shadow: 6px 6px 0 #00759C;
	}
	.link_btn a:hover::before{
		transform: scale(8);
	}
	.link_btn a:hover svg g{
		fill: #00759C;
	}
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||
----------------------------------------------------

			HEADER / FOOTER

----------------------------------------------------
||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/***HEADER***/
#header{
	width: 100%;
	height: 21vw;
	min-height: 62px;
	background: url("../images/header/header_bg_sp.png") no-repeat center top;
	background-size: cover;
}
#header .header_logo{
	width: 100%;
	max-width: 75px;
	margin: 0 auto;
	padding-top: 8;
}

/***FOOTER***/
#footer{
	margin-top: -9%;
	padding: 51px 0 89px 0;
	background: url("../images/footer/footer_bg_sp.png") no-repeat center top;
	background-size: cover;
	position: relative;
}
#footer::before{
	content: "";
	width: 87.713vw;
	max-width: 258px;
	height: 19.7vw;
	max-height: 50px;
	background: url("../images/footer/bottom.svg") no-repeat center center;
	background-size: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#footer .footer_logo{
width: 100%;
max-width: 195px;
margin: 0 auto;
}
@media all and (min-width:769px) {
	/***HEADER***/
	#header{
		width: 100%;
		height: 12vw;
		min-height: 148px;
		background: url("../images/header/header_bg_pc.png") no-repeat center top;
		background-size: cover;
	}
	#header .header_logo{
		max-width: 167px;
		padding-top: 20px;
	}
	/***FOOTER***/
	#footer{
		margin-top: -5.7%;
		padding: 218px 0 325px 0;
		background: url("../images/footer/footer_bg_pc.png") no-repeat center top;
		background-size: cover;
	}
	#footer::before{
		width: 100%;
		max-width: 1123px;
		max-height: 222px;
	}
	#footer .footer_logo{
		max-width: 413px;
		}
}
@media all and (min-width:1230px) {
	#header .header_logo{
		padding-top: 1.5%;
	}
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||
----------------------------------------------------

			HOME

----------------------------------------------------
||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/***MAIN VISUAL***/
#main .main_visual_wrap{
	padding: 0 10px 10% 10px;
}
/*TITLE*/
#main .title_wrap.pc{
	display: none;
}
#main .title_wrap{
	margin-bottom: 46px;
}
#main .title_wrap .title_text{
	max-width: 69.6vw;
    margin: -16px auto 10px auto;
}
#main .title_wrap .sub_title_text{
	width: 59.375vw;
	position: absolute;
	top: 76vw;
    left: 20px;
	z-index: 1;
}
/**MV - MAIN**/
#main .mv_main{
	width: 100%;
	position: relative;
}
#main .mv_main::before{
	content: "";
    width: 52.188vw;
    height: 46.25vw;
    background: url(../images/main/mv/map_sp.svg) no-repeat center center;
    background-size: 100%;
    position: absolute;
    top: -25%;
    left: -20px;
    z-index: -1;
}
/*LIST*/
#main .mv_main .point_wrap{
	display: none;
}
/*IMPORTANT*/
#main .mv_main .important_wrap{
	width: 91%;
    margin: -10px auto 0 27px;
}
#main .mv_main .important_wrap .caution_wrap{
	width: 100%;
	max-width: 71.688vw;
    margin: -47px 0 0 3px;
}
#main .mv_main .important_wrap .caution_wrap .caution_item{
	margin-bottom: 3%;
}
#main .mv_main .important_wrap .caution_wrap .caution_item:last-child{
	margin-bottom: 0;
}
/***EXPLANATION***/
#main .explanation_wrap{
	position: relative;
}
#main .explanation_wrap::before{
	content: "";
	width: 100%;
	height: 750px;
	background: url("../images/main/explanation/explanation_top_bg_sp.jpg") no-repeat center top;
	background-size: cover;
	position: absolute;
	top: 0;
	z-index: -1;
}
#main .explanation_wrap::after{
	content: "";
	width: 100%;
	height: 104%;
	background: #FEEAB4;
	position: absolute;
	top: 0;
	z-index: -2;
}
#main .explanation_wrap .link_btn{
	margin-bottom: 14%;
}
#main .explanation_wrap .contents{
	width: 100%;
	max-width: 880px;
	margin: 0 auto 71px auto;
	padding: 0 10px;
	position: relative;
}
#main .explanation_wrap .contents .link_btn{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4%;
}
/***Q & A***/
#main .explanation_wrap .qa_wrap{
	max-width: 821px;
	margin: 0 auto;
}
#main .explanation_wrap .qa_wrap .qa_item:nth-child(1){
	margin-bottom: 10px;
}
#main .explanation_wrap .qa_wrap .qa_item:nth-child(2){
	margin-bottom: 40px;
}
#main .explanation_wrap .qa_wrap .qa_item:nth-child(3){
	margin-bottom: 40px;
}

/***USE***/
#main .use_wrap{
	padding: 10px 0 80px 0;
	position: relative;
}
#main .use_wrap .contents{
	width: 100%;
	max-width: 862px;
	margin: 0 auto;
	padding: 18.5% 10px 0 10px;
}
#main .use_wrap::before{
	content: "";
	width: 100%;
	height: 104%;
	background: url("../images/main/use/howto_bg_sp.png") no-repeat center top;
	background-size: cover;
	background-color: #FEEAB4;
	position: absolute;
	top: 0;
	z-index: -1;
}
#main .use_wrap .bottom .link_btn{
	position: absolute;
	bottom: -10px;
	left: 0;
	right: 0;
}
/***SP CONTENTS***/
#main .sp_contents{
	padding: 37px 10px 15% 10px;
	background: #FEEAB4;
}

#main .sp_contents .title_text{
	width: 87%;
	margin: 0 auto 8px auto;
}
@media all and (min-width:769px) {
	/***MAIN VISUAL***/
	#main .main_visual_wrap{
		padding-bottom: 0;
	}
	/*TITLE*/
	#main .title_wrap.sp{
		display: none;
	}
	#main .title_wrap.pc{
		display: block;
		padding-top: 10px;
	}
	#main .title_wrap{
		max-width: 827px;
		margin: 0 auto 35px auto;
		position: relative;
	}
	#main .title_wrap .title_text{
		max-width: 620px;
		margin-left: 95px;
		margin-bottom: 24px;
	}
	#main .title_wrap .sub_title_text{
		width: 100%;
		max-width: 572px;
		margin: 0 auto;
		top: unset;
		bottom: 17px;
		left: unset;
		right: 12px;
	}
	/**MV - MAIN**/
	#main .mv_main{
		max-width: 811px;
		display: flex;
		justify-content: center;
		margin: 0 auto;
	}
	#main .mv_main::before{
		width: 619px;
		height: 534px;
		background: url("../images/main/mv/map_pc.svg") no-repeat center center;
		background-size: 100%;
		position: absolute;
		top: -48px;
		left: unset;
		right: 0;
	}
	/*LIST*/
	#main .mv_main .point_wrap{
		display: block;
		width: 100%;
		max-width: 400px;
	}
	#main .mv_main .point_wrap .point_item{
		margin-bottom: 10px;
	}
	#main .mv_main .point_wrap .point_item:last-child{
		margin-bottom: 0;
	}
	/*IMPORTANT*/
	#main .mv_main .important_wrap{
		width: 100%;
		max-width: 381px;
	}
	#main .mv_main .important_text {
		padding-top: 110px;
	}
	#main .mv_main .important_wrap .caution_wrap{
		max-width: 326px;
		margin: -24px 0 0 8px;
	}
	/***EXPLANATION***/
	#main .explanation_wrap{
		padding-top: 7vw;
	}
	#main .explanation_wrap::before{
		content: "";
		height: 683px;
		background: url("../images/main/explanation/explanation_top_bg_pc.jpg") no-repeat center top;
		background-size: cover;
	}
	#main .explanation_wrap .contents{
		width: 100%;
		margin: 0 auto 67px auto;
	}
	#main .explanation_wrap .link_btn{
		margin-bottom: 75px;
	}
	#main .explanation_wrap .contents .link_btn{
		display: none;
	}
	/***Q & A***/
	#main .explanation_wrap .qa_wrap .qa_item:nth-child(1),
	#main .explanation_wrap .qa_wrap .qa_item:nth-child(2),
	#main .explanation_wrap .qa_wrap .qa_item:nth-child(3){
		margin-bottom: 0;
	}
	/***USE***/
	#main .use_wrap{
		padding: 4% 0 130px 0;
		position: relative;
	}
	#main .use_wrap .contents{
		width: 100%;
		max-width: 862px;
		margin: 0 auto;
		padding: 4% 0 0 0;
	}
	#main .use_wrap::before{
		content: "";
		width: 100%;
		height: 104%;
		background: url("../images/main/use/howto_bg_pc.png") no-repeat center top;
		background-size: cover;
		background-color: #FEEAB4;
		position: absolute;
		top: 0;
		z-index: -1;
	}
	#main .use_wrap .bottom .link_btn{
		position: absolute;
		bottom: -33px;
		left: 0;
		right: 0;
	}
	/***SP CONTENTS***/
	#main .sp_contents{
		display: none;
	}
}