@charset "utf-8";
.indent{padding-left:1em; text-indent:-1em;line-height:1.4em;}
.menuList .menutxt{font-weight:bold!important;line-height:1.4em;margin:0 0 5px;}


.section *, .section *::before, .section *::after {
	word-break: break-all;
	box-sizing: border-box;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.areaTit { margin-top: 3em; }
	
@media screen and (min-width: 900px) {
	.sp{display: none!important;}
	#wrap { padding: 80px 0; }
	header h1 a { height: 30px; background-size: cover; }
	header h1 a { height: 30px; background-size: cover; }
	#gnav { display: none; }

	.close.btn {
		display: block;
		width: 40%;
		color: #666;
		text-align: center;
		line-height: 40px;
		border: 0.5px solid #ddd;
		border-radius: 4px;
		margin: 0 auto;
		position: relative;
		left: -15px;
		cursor: pointer;
	}
	.close.btn:hover {
		border-color: inherit;
	}

}
@media screen and (max-width: 900px) {
	.pc {display: none!important;}
	.menuList > li > a span{color:#f00;}

	#wrap {
		background: #f7f7f7;
		font-weight: 300;
		padding-bottom: 150px !important;
	}
	#fixedBanner { display: none; }
	.areaTit { font-size: 16px; font-weight: 400; }

	.close.btn {
		display: block;
		width: 40%;
		color: #444;
		text-align: center;
		line-height: 40px;
		border: 0.5px solid #ccc;
		border-radius: 4px;
		margin: 0 auto;
		position: relative;
	}
}



/* menuList
------------------------------- */
.menuList {
	background: #fff;
	box-shadow: 0 0 1px #ccc;
}
.menuList > li:not(:last-child) { border-bottom: 0.5px solid #ddd; }
.menuList > li > a {
	display: block;
	color: inherit;
	font-style: normal;
	text-decoration: none;
	padding: 0.8em 8% 0.8em 4%;
	position: relative;
}
.menuList > li > a::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-top: none;
	border-left: none;
	position: absolute;
	right: 4%;
	top: 50%;
	margin: -6px 0 0;
	opacity: 0.5;
}
@media screen and (min-width: 900px) {

	.menuList { margin: 0 0 30px; }
	.menuList > li > a {
		font-size: 16px;
		padding: 1.2em 30px;
	}
	.menuList > li > a span{color:#f00;}
	.menuList > li > a::after { transform: rotate(-45deg); }
	.menuList > li > a[href^="#"]::after { transform: rotate(45deg); }
	.menuList > li > a:hover,
	.menuList > li > a span:hover {
		background: #e9537d;
		color: #fff;
		border-color: transparent;
	}
	.menuList > li > a:hover::before,
	.menuList > li > a:hover::after { color: #fff; }

	.menuList > li > a.open {
		background: #e9537d;
		color: #fff;
		border-color: transparent;
	}
	.menuList > li > a.open::before { color: #fff; }
	.menuList > li > a.open::after { transform: rotate(225deg); }

	.menuList .modal {
		display: none;
		font-size: 14px;
		line-height: 1.8;
		padding: 0 30px 30px;
		position: relative;
		-webkit-transition: none;
		transition: none;
	}
	.menuList .modal .tab {
		text-align: center;
	}
	.menuList .modal .tab li {
		display: inline-block;
		padding: 30px 10px 10px;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}
	.menuList .modal .tab li.current {
		color: #e9537d;
		font-weight: bold;
		border-color: #e9537d;
	}
	.menuList .modal .attentionList { margin: 0 0 20px; }
}
@media screen and (max-width: 900px) {
	.menuList { margin: 0 -5.5% 30px; }
	.menuList > li > a { font-size: 15px; }
	.menuList > li > a::after { transform: rotate(-45deg); }
}


/* stepList
------------------------------- */
@media screen and (min-width: 900px) {
	.modalTit { display: none; }
	.stepList {
		padding: 15px;
		margin: 0 -30px;

		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	.stepList > li {
		width: 246px;
		background: #f7f7f7;
		padding: 20px 15px;
		margin: 0 16px 20px 0;
		position: relative;
	
		counter-increment: step;
	}
	.stepList > li:after{
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 13px 0 13px 16px;
		border-color: transparent transparent transparent #f7f7f7;
		position: absolute;
		top: 50%;
		right: -14px;
		margin-top: -7px;
	}
	.stepList > li:nth-child(3n){ margin-right: 0; }
	.stepList > li:last-child:after,
	.stepList > li:nth-child(3n):after{ display: none; }
	.stepList > li .tit { font-weight: bold; text-align: center; margin: 0 0 10px; }
	.stepList > li .tit::before,
	.stepList > li .txt:first-of-type::before { content: counter(step) '.'; }

	.stepList > li .ph { width: 130px; text-align: center; line-height: 0; margin: 0 auto 10px; }
	.stepList > li .txt { font-size: 13px; margin: 5px 0; }
	.stepList > li .btn a { min-width: 0; width: 100%; font-size: 12px; line-height: inherit; padding: 5px; margin: 5px 0; }
	.stepList > li .linkList a { font-size: 13px; }

	.stepList li .ph.two { width: 100%; }
	.stepList li .ph.two span { display: inline-block; width: 105px; font-size: 10px; line-height: 1.5em; text-align: center; }
	.stepList li .ph.two i { font-style: normal; }

}
@media screen and (max-width: 900px) {
	.stepList { margin: 0 0 20px; }
	.stepList > li {
		clear: left;
	    background: #fff;
	    box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    padding: 10px 4%;
	    margin-bottom: 10px;
	    position: relative;
	}
	.stepList .tit {
	    font-size: 14px;
	    text-align: center;
	    line-height: 2em;
	    border-bottom: 0.5px solid #ddd;
	    padding: 0 0 8px;
	    margin: 0 0 13px;
	}
	.stepList .txt {
	    font-size: 13px;
	    margin: 0 0 5px;
	}
	.stepList .ph {
	    width: 60px;
	    float: left;
	    padding: 0 5px;
	    margin: 0 10px 0 0;
	}
	.stepList .ph + .txt { padding-left: 70px; }
	.stepList .appDl a {
		display: block;
		clear:left;
		text-align: center;
	}
	.stepList .appDl img { width:180px; }
	.stepList li:after {
	    content: "";
	    position: absolute;
	    bottom: -10px;
	    left: 50%;
	    margin-left: -10px;
	    display: block;
	    width: 0px;
	    height: 0px;
	    border-style: solid;
	    border-width: 13px 10px 0 10px;
	    border-color: #fff transparent transparent transparent;
	}
	.stepList li:last-child:after { display: none; }
	.stepList .subTxt {  }
	.stepList .btn .main {
		line-height: 34px;
		margin-top: 15px;
	}
}



/* faqList
------------------------------- */
.faqList {
	background: #fff;
	box-shadow: 0 0 1px #ccc;
}
.faqList dt {
	counter-increment: num;
	font-size: 15px;
	padding: 0.8em 40px 0.8em 45px;
	cursor: pointer;
	position: relative;
}
.faqList dt:not(:first-of-type) { border-top: 0.5px solid #ddd; }
.faqList dt::before {
	content: 'Q' counter(num);
	display: inline-block;
	width: 30px;
	font-family: HelveticaNeue, Arial;
	font-weight: bold;
	text-align: right;
	position: absolute;
	left: 10px;
	top: 0.8em;
	opacity: 0.5;
}
.faqList dt.open { 
	background: #e9537d;
	color: #fff;
	border-color: transparent;
}
.faqList dt.open::before { color: #fff; }
.faqList dt::after {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid;
	border-top: none;
	border-left: none;
	position: absolute;
	right: 4%;
	top: 50%;
	margin: -6px 0 0;
	opacity: 0.5;
	transform: rotate(45deg);
}
.faqList dt.open::after { transform: rotate(225deg); }
.faqList dd {
	display: none;
	font-size: 14px;
	line-height: 1.8;
	padding: 1.5em 15px 1.5em 45px;
	position: relative;
	-webkit-transition: none;
	transition: none;
}
.faqList dd::before {
	content: 'A';
	color: #e9537d;
	font-family: HelveticaNeue, Arial;
	font-weight: bold;
	position: absolute;
	left: 20px;
	top: 1.5em;
}
@media screen and (min-width: 900px) {
	.faqList { margin: 0 0 30px; }
	.faqList dt {
		font-size: 16px;
		padding: 1.2em 50px 1.2em 70px;
	}
	.faqList dt::before { top: 1.1em; left: 25px; }
	.faqList dt:hover {
		background: #e9537d;
		color: #fff;
		border-color: transparent;
	}
	.faqList dt:hover::before,
	.faqList dt:hover::after { color: #fff; }
	.faqList dd { padding-left: 70px; }
	.faqList dd::before { left: 25px; font-size: 16px; }
	.faqList .ph { width: 600px; margin: 0 auto 15px; }
}
@media screen and (max-width: 900px) {
	.faqList { margin: 0 -5.5% 30px; }
	.faqList .ph { width: 200px; margin: 0 auto 15px; }
	.faqList .btn .main {
		line-height: 34px;
		margin-top: 15px;
	}
	.faqList .close.btn {
		line-height: 34px;
		left: -20px;
	}
}



/* modal
------------------------------- */
@media screen and (max-width: 900px) {
	.modal {
		width: 100%;
		height: 100%;
		background: #f0f0f0;
		padding: 50px 0 0;
		position: fixed;
		left: 0;
		top: 150%;
		z-index: 1000;
	}
	.modal.open { top: 0; }
	.modal .inner {
		max-height: 100%;
		padding: 0 5% 30px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.modal .modalTit {
		width: 100%;
		background: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
		box-shadow: 0 0 1px rgba(0,0,0,0.3);
		position: absolute;
		left: 0;
		top: 0;
		z-index:9;
	}
	/* close */
	.modal .close.icon {
		display: inline-block;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
	}
	.modal .close.icon::before,
	.modal .close.icon::after {
		content: '';
		display: inline-block;
		width: 1.5em;
		border-top: 2px solid;
		margin-top: -1px;
		position: absolute;
		right: 10px;
		top: 50%;
	}
	.modal .close.icon::before { transform: rotate(45deg); }
	.modal .close.icon::after { transform: rotate(-45deg); }

	/* tab */
	.modal .tab {
		text-align: center;
		margin: 0 -5.5% 10px;
	}
	.modal .tab li {
		display: inline-block;
		font-size: 11px;
		line-height: 38px;
		padding: 5px 10px 0;
		border-bottom: 2px solid transparent;
	}
	.modal .tab li.current {
		color: #e9537d;
		font-weight: bold;
		border-color: #e9537d;
	}
}