@charset "UTF-8";

/* --------------------------------------------------
	[よくある質問]
-------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

@media screen and (min-width: 741px), print {
	body.page_faq {
		background: url(../../faq/images/title_img_pc.jpg) center top no-repeat;
	}
	body.page_faq header {
		background-color: rgba(255,255,255,0.8);
	}
	.title_pc {
		width: 364px;
		height: 255px;
		background: url(../../faq/images/title_pc.png) no-repeat;
	}
	.topic_path {
		margin-top: 20px;
	}
	.faq_nav {
		margin-bottom: 55px;
	}
	.faq_nav .lead {
		margin: 35px 0 40px;
		font-size: 142%;
	}
	.faq_nav li {
		float: left;
		width: 33.3%;
	}
	.faq_nav li a {
		display: block;
		border-left: solid 1px #8f8f8f;
		text-align: center;
		text-decoration: none;
		font-size: 120%;
		color: #ee7b32;
	}
	.faq_nav li:last-child a {
		border-right: solid 1px #8f8f8f;
	}
	.faq_list dt:hover {
		color: #EE7B32;
	}
}

@media screen and (max-width: 740px) {
	body.page_faq {
		background: url(../../faq/images/title_img_sp.jpg) center top no-repeat;
		background-size: 100% auto;
	}
	body.page_faq .header {
		background-color: rgba(255,255,255,0.8);
	}
	.title_sp {
		margin: 5em 10% 1em;
	}
	.faq_nav ul {
		margin-top: 1em;
	}
	.faq_nav li {
		float: left;
		width: calc(33.3% - 2px);
		height: 3em;
		border-left: solid 1px #8f8f8f;
		text-align: center;
	}
	.faq_nav li a {
		display: block;
		padding-top: 0.8em;
	}
	.faq_nav li:nth-child(2) a {
		padding-top: 0;
	}
	.faq_nav li:last-child {
		border-right: solid 1px #8f8f8f;
	}
	.faq_nav li a {
		display: block;
		font-size: 90%;
		text-decoration: none;
		color: #ee7b32;
	}
}

.faq_wrap {
	margin-bottom: 70px;
}
.faq_catttl {
	padding-bottom: 0.25em;
	margin-bottom: 1.25em;
	border-bottom: solid 1px #ee7b32;
	font-size: 160%;
	color: #4d4d4d;
}
.faq_list {
	font-size: 112.5%;
}
.faq_list > *:after {
	content: "";
	display: block;
	clear: both;
}
.faq_list small {
	vertical-align: top;
	font-size: 70%;
}
.faq_list dt {
	position: relative;
	min-height: 2em;
	margin-top: 1em;
	border-bottom: solid 1px #ccc;
	padding: 1em 3.5em 1.5em 3.5em;
	cursor: pointer;
	transition: border-bottom-color 0.5s;
}
.faq_list dt.open {
	border-bottom-color: #fff;
	color: #EE7B32;
}
.faq_list dt:after {
	content: "▼";
	position: absolute;
	display: inline-block;
	top: 50%;
	right: 1.5em;
	transform: translate(0,-50%);
	color: #ccc;
}
.faq_list dt.open:after {
	content: "▲";
}
.faq_list dd {
	position: relative;
	display: none;
	padding: 1em 1.25em 2em 6em;
	border-bottom: solid 1px #a8a8a8;
}
.faq_list .faq_blt {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	border: solid 1px #EE7B32;
	border-radius: 50%;
	text-align: center;
	font-family: 'Roboto Mono', monospace;
	font-size: 100%;
}
.faq_list .faq_blt.faq_q {
	background-color: #EE7B32;
	color: #fff;
}
.faq_list .faq_blt.faq_a {
	left: 2.5em;
	color: #EE7B32;
}

@media screen and (min-width: 741px), print {
	.page_title {
		display: inline-block;
		min-width: 320px;
		margin-bottom: 45px;
		padding-bottom: 15px;
		background: url(../images/title_bg_m.png) left bottom no-repeat;
		font-size: 140%;
		letter-spacing: 0.1em;
	}
}

@media screen and (max-width: 740px) {
	.page_title {
		margin-bottom: 1em;
		padding-bottom: 15px;
		background: url(../images/title_bg_m.png) center bottom no-repeat;
		text-align: center;
		font-size: 140%;
		letter-spacing: 0.05em;
	}
	.faq_wrap {
		margin: 0;
		padding-top: 50px;
	}
	.faq_catttl {
		padding-bottom: 0.25em;
		font-size: 140%;
	}
	.faq_list dt {
		padding: 0.5em 2.5em 1.5em 3em;
	}
	.faq_list dd {
		padding: 0.5em 2.5em 1.5em 4em;
	}
	.faq_list .faq_blt.faq_q {
		left: 0;
	}
	.faq_list .faq_blt.faq_a {
		left: 1em;
	}
	.faq_list dt:after {
		right: 0.75em;
	}
}