@charset "utf-8";

/* ==================================================
   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;
	background-color:#0d295d;
	transition:all 0.3s linear;
	&: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;
	&.pdf:after{
		background:url(../img/icon_pdf.png) no-repeat left 0.4em;
	}
	&.doc:after{
		background:url(../img/icon_doc.png) no-repeat left 0.4em;
	}
	&: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;
	& dt{
		width:calc(5em + 150px + 30px + 60px);
		position:relative;
		margin-top:15px;
		padding:0 60px 0 calc(150px + 30px);
		text-align:left;
		&: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;
		}
		&.topics:before{content:"TOPICS";}
		&.news:before{content:"NEWS";}
		&.events:before{content:"EVENTS";}
	}
	& 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;
	& li{
		margin:0 10px 10px 0;
		& a{
			width:3em;
			display:block;
			padding:0.7em 0;
			text-align:center;
			letter-spacing:1;
		}
		&.current{
			width:3em;
			padding:0.7em 0;
			text-align:center;
		}
	}
}

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

/* ==================================================
   topics_pages
================================================== */
#topics_page{
	& h1.sttl{
		max-width:780px;
		margin:0 auto 30px;
	}
	& div#topics_text{
		max-width:780px;
		margin:0 auto 60px;
	}
}


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

#contents dl.faq_list{
	margin:0 auto 90px;
	text-align:center;
	& h2.sttl{
		margin-bottom:30px;
		padding:15px;
		color:#fff;
		font-family:"NSK-TSR-W-ExtraLight";
		font-size:28px;
		text-align:center;
		background-color:#0d295d;
	}
	& dt{
		width:100%;
		position:relative;
		margin:45px 0 0 0;
		padding:0 0 30px 90px;
		font-size:24px;
		text-align:left;
		cursor:pointer;
		transition:all 0.3s linear;
		&.open{
			margin-bottom:0;
		}
		&:before{
			content:"Q";
			position:absolute;
			top:-0.3em;
			left:0;
			color:#55698c;
			font-size:60px;
			text-align:center;
			line-height:1;
		}
		&.topics:before{content:"TOPICS";}
		&.news:before{content:"NEWS";}
		&.topics:before{content:"NEWS";}
		&:hover{
			color:orange;
		}
	}
	& dd{
		width:calc(100% - 90px);
		display:none;
		position:relative;
		padding-left:180px;
		transition:all 0.3s linear;
		&: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;
			&: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:13px 5px;
	color:white;
	text-align:center;
	text-indent: 0;
	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: 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 30px 40px;
	background-color:#ebebeb;
}

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

/* errer */
p.err{
	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;
}

/* thanks */
.form_thanks div#form_complete{
	text-align:center;
}
#form_page.form_thanks #section_inquery {
  & div#form_complete {
    & p.outline {
      max-width: 780px;
      margin: 0 auto;
    }
  }
}
.form_thanks p.thanks{
	text-align:center;
}