/* ==================================================
   btn
================================================== */

a.btn,
input[type=button].btn{
	width:100%;
	max-width:480px;
	display:block;
	margin:0 auto;
	padding:30px;
	color:#fff;
	text-align:center !important;
	text-decoration:underline;
	border:none;
	border-radius:0;
	background-color:#0d295d;
	transition:all 0.3s linear;
	-webkit-appearance:none;
	appearance:none;
}

a.btn:hover,
input[type=button].btn:hover{
	text-decoration:none;
	background-color:orange;
}

a.btn + p,
input[type=button].btn + p{
	margin-top:15px;
}

a.link{
	position:relative;
	padding:0 0 0 20px;
	text-align:left;
	background:url(../img/arr.png) no-repeat left 0.15em / 10px auto;
}

a.link.pdf:after{
	background:url(../img/icon_pdf.png) no-repeat left 0.4em;
}

a.link.doc:after{
	background:url(../img/icon_doc.png) no-repeat left 0.4em;
}

a.link:after{
	width:31px;
	height:38px;
	content:"";
	position:absolute;
	top:calc(-38px / 2 + 0.3em);
	right:calc(-31px - 15px);
	display:block;
	background-repeat:no-repeat;
	background-position:left 0.4em;
}


/* ==================================================
   topics_list
================================================== */

#contents dl.topics_list{
	width:calc(100% - 180px);
	max-width:960px;
	margin:0 auto 90px;
}

#contents dl.topics_list dt{
	width:calc(5em + 150px + 30px + 60px);
	position:relative;
	margin-top:15px;
	padding:0 60px 0 calc(150px + 30px);
	text-align:left;
}

#contents dl.topics_list dt:before{
	width:150px;
	position:absolute;
	top:-0.5em;
	left:0;
	display:block;
	padding:0.8em 0 0.6em;
	color:#fff;
	font-size:14px;
	text-align:center;
	line-height:1;
	background-color:#0d295d;
}

#contents dl.topics_list dt.topics:before{
	content:"TOPICS";
}

#contents dl.topics_list dt.news:before{
	content:"NEWS";
}

#contents dl.topics_list dt.events:before{
	content:"EVENTS";
}

#contents dl.topics_list dd{
	width:calc(100% - 5em - 150px - 30px - 60px);
	margin-top:15px;
}

@media screen and (max-width:820px){
	#contents dl.topics_list dd{
		width:100%;
	}
}

ul.pager{
	text-align:left;
	padding-top:30px;
	border-top:1px #ccc solid;
}

ul.pager li{
	margin:0 10px 10px 0;
}

ul.pager li a{
	width:3em;
	display:block;
	padding:0.7em 0;
	text-align:center;
	letter-spacing:1;
}

ul.pager li.current{
	width:3em;
	padding:0.7em 0;
	text-align:center;
}

/* ==================================================
   topics_pages
================================================== */

#topics_page h2.sttl{
	max-width:780px;
	margin:0 auto 30px;
}

#topics_page div#topics_text{
	max-width:780px;
	margin:0 auto 60px;
}


/* ==================================================
   faq_list
================================================== */

#contents dl.faq_list{
	margin:0 auto 90px;
	text-align:center;
}

#contents dl.faq_list h3.sttl{
	margin-bottom:30px;
	padding:15px;
	color:#fff;
	font-family:"NSK-TSR-W-ExtraLight";
	font-size:28px;
	text-align:center;
	background-color:#0d295d;
}

#contents dl.faq_list dt{
	width:100%;
	position:relative;
	margin:45px 0 0;
	padding:0 0 30px 90px;
	font-size:24px;
	text-align:left;
	cursor:pointer;
	transition:all 0.3s linear;
}

#contents dl.faq_list dt.open{
	margin-bottom:0;
}

#contents dl.faq_list dt:before{
	content:"Q";
	position:absolute;
	top:-0.3em;
	left:0;
	color:#55698c;
	font-size:60px;
	text-align:center;
	line-height:1;
}

#contents dl.faq_list dt.topics:before{
	content:"TOPICS";
}

#contents dl.faq_list dt.news:before{
	content:"NEWS";
}

/* 元CSSどおり。topics が重複して NEWS を指定しています */
#contents dl.faq_list dt.topics:before{
	content:"NEWS";
}

#contents dl.faq_list dt:hover{
	color:orange;
}

#contents dl.faq_list dd{
	width:calc(100% - 90px);
	display:none;
	position:relative;
	padding-left:180px;
	transition:all 0.3s linear;
}

#contents dl.faq_list dd:before{
	content:"A";
	position:absolute;
	top:0;
	left:calc(1em + 30px);
	color:#55698c;
	font-size:60px;
	text-align:center;
	line-height:1;
	transition:all 0.3s linear;
}

@media screen and (max-width:960px){

	#contents dl.faq_list dd{
		width:100%;
	}

}

@media screen and (max-width:540px){

	#contents dl.faq_list dd{
		width:100%;
		padding-left:90px;
	}

	#contents dl.faq_list dd:before{
		left:0;
	}

}

/* ==================================================
   inquiry
================================================== */

#form_page p.outline::after {
	width: 100%;
	content: "";
	display: block;
	margin: 30px auto;
	padding: calc(100%*0.0511 - 10px*0.0511 - 60px*0.0511 + 30px) 30px 30px;
	border: 5px #ebebeb solid;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: calc(100% - 60px) auto;
	background-image: url(../img/flow1.png);
	background-color:#fff;
}
#form_page.form_confirm p.outline:after{background-image:url(../img/flow2.png);}
#form_page.form_thanks  p.outline:after{background-image:url(../img/flow3.png);}

@media screen and (max-width:768px){
	#form_page p.outline::after{padding-top: calc(100%*100/715 - 10px*100/715 - 60px*100/715 + 30px)}
	#form_page.form_input   p.outline:after{background-image:url(../img/flow_sp1.png);}
	#form_page.form_confirm p.outline:after{background-image:url(../img/flow_sp2.png);}
	#form_page.form_thanks  p.outline:after{background-image:url(../img/flow_sp3.png);}
}
dl#form{
	max-width:1024px;
	margin:10px auto 30px;
	padding-bottom:30px;
	letter-spacing:-0.4em;
	border-top:1px #ccc solid;
}
dl#form *{
	letter-spacing:normal;
}
dl#form dt,
dl#form dd{
	display:inline-block;
	*display:inline;
	margin-top:30px;
	padding-top:30px;
	vertical-align:top;
	letter-spacing:normal;
	zoom:1;
	border-top:1px #ccc solid;
}
dl#form dt:nth-child(2),
dl#form dd:nth-child(3){
	border-top:none;
}
dl#form dt{
	width:45%;
	min-height:26px;
	padding:30px 5% 0 0;
	padding-left: calc(3em + 20px);
	text-indent: calc(-3em - 20px);
}
dl#form dt::before{
	width:3em;
	content:"必須";
	display:inline-block;
	margin:0 10px 0 0;
	padding:15px 5px;
	color:white;
	text-align:center;
	text-indent: 0;
	line-height:1;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	background-color:#ff8200;
}
dl#form dt.option:before{
	content:"任意";
	background-color:#afafaf;
}
dl#form dd{
	width:55%;
}
dl#form h2.ttl{
	margin:90px 0 60px;
	padding:15px 0 15px 20px;
	font-size:24px;
	font-weight:bold;
	line-height:1;
	letter-spacing:normal;
	border-left:5px #006cb5 solid;
}
dl#form dd input[type="text"],textarea,select,input[type="tel"]{
	width:100%;
	margin-bottom:1px;
	padding:10px;
	font-size:100%;
	border:3px #e1e1e1 solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
dl#form dd select{
	width:auto;
	max-width:100%;
}
dl#form dd input#zip{
	width:10em;
	margin:0 10px 10px 0;
}
dl#form dd select#pref{
	width:10em;
	margin-bottom:10px;
	padding:10px 10px 7px;
	background-color:white;
}

dl#form dd span.radio,
dl#form dd span.checkbox{
	display:block;
	margin-right:15px;
	margin-bottom:5px;
	white-space:nowrap;
}
dl#form dd input[type="radio"],
dl#form dd input[type="checkbox"]{
	width: 24px;
	height: 24px;
	margin-top:-5px;
}
dl#form dd input[type="checkbox"]{
	margin-top:1px;
	margin-right:15px;
}
@media screen and (max-width: 1054px){
	dl#form dt{
	}
	dl#form dd{
	}
	dl#form dd input[type="text"],textarea{
	}
}
@media screen and (max-width: 730px){
	dl#form dt{
		width:auto;
		display:block;
		margin: 15px 0;
		padding:15px 0 0 65px;
		background-position:left 18px;
	}
	dl#form dt.option{
		background-position:left 18px;
	}
	dl#form dd{
		width:100%;
		margin-top:0;
		padding-top:0;
		border-top:none;
	}
}
@media screen and (max-width: 540px){
	#form_page p.outline::after {
		border: none!important;
		background-size:100% auto;
		background-color:transparent;
	}
}
@media screen and (max-width: 420px){
	dl#form h2.ttl {
	  font-size: 20px;
	}
}


/* privacy*/
input#policy{
	margin-left:0;
}
label[for="policy"] {
	display: block;
	margin-top: -1.8em;
	margin-left: 2em;
	margin-bottom:5px;
}
dt.policy + dd p{
	margin-bottom:15px;
}


/* submit */
div#submit{
	width: 100vw;
	margin: 30px 0 60px calc(-50vw + 50%);
	padding:45px 0 40px;
	background-color:#ebebeb;
}

div#submit p.note{
	font-size:100%;
	text-align:center;
}
@media screen and (max-width: 510px){
	.button {
		min-width:240px;
		padding:12px 15px 9px;
	}
	div#submit p.note{
		text-align:left;
	}
}

/* errer */
div.error_box{
	margin:30px auto;
	padding:20px;
	color:red;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	border:5px #e1e1e1 solid;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
@media screen and (max-width: 960px){
	div.error_box{
		font-size:16px;
	}
}
@media screen and (max-width: 510px){
	div.error_box{
		font-size:14px;
	}
}


/* thanks */

.form_thanks div#form_complete{
	text-align:center;
}

#form_page.form_thanks #section_inquiry div#form_complete p.outline{
	max-width:780px;
	margin:0 auto;
}

.form_thanks p.thanks{
	text-align:center;
}