@charset "utf-8";

/*===============================================
●サイト共通スタイルシート
===============================================*/
/* title
---------------------------------------- */
/* titLogo */
.titLogo {position: relative;}
.titLogo:after {
	content: "";
	display: block;
	width: 3em;
	height: 1px;
	position: absolute;
	left: 50%;
	margin-left: -1.5em;
	background-color: #17234D;
}
.titLogo div {margin: 0 auto 1em;}
.titLogo {text-align: center;}
.noLine {padding-bottom: 0!important;}
.noLine .titLogo:after {height: 0;}

/* tit01 */
.tit01 p, .tit03 p {text-align: center;}
.tit01 p, .tit02 p, .tit03 p, .tit05 {
	line-height: 1.5em;
	letter-spacing: 0.2em;
	font-family: "adobe-garamond-pro";
}
.tit01 h3, .tit03 h3 {text-align: center;}

/* tit02 */
.tit02 {border-bottom: #ddd 1px solid;}

/* tit03 */
.tit03 [class^="icon-"] {
	display: block;
	font-size: 2.3em;
	text-align: center;
	margin-bottom: 0.5em;
}

/* tit04 */
.tit04 p {
	text-align: center;
	margin-bottom: 1em;
}
.tit04 h2, .tit05, .tit07 {
	text-align: center;
	font-family: "FOT-筑紫明朝 Pr6 M";
}

/* tit08 */
.tit08 {text-align: center;}
.tit08 span {
	display: inline-block;
	line-height: 1.2em;
	letter-spacing: 0.2em;
	padding: 0 1em;
	border-left: #17234D 1px solid;
	border-right: #17234D 1px solid;
	font-family: "adobe-garamond-pro";
}

/* openText */
.openText a, .openText span {
	display: block;
	color: #fff!important;
	text-decoration: none;
	padding: 1em;
	position: relative;
	background-color: #17234D;
}
.openText a:after {
	content: "\eaf9";
	font-size: 1.3em;
	width: 1em;
	line-height: 1em;
	text-align: center;
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -0.5em;
	border: #fff 1px solid;
	border-radius: 100%;
	font-family: "icomoon";
}
.openText a.closeText:after {content: "\eaf8";}
body.questions .openText a:after {
	content: "";
	border: none;
}

/* button
---------------------------------------- */
/* btn01 */
.btn01 a, .btn01 button,
.btn02 a, .btn02 button,
.btn03 a, .btn03 button,
.btn04 a, .btn04 button,
.btn05 a, .btn05 button,
.btn06 a, .btn06 button{
	width: 100%;
	display: block;
	max-width: 300px;
	line-height: 1.2em;
	text-align: center;
	text-decoration: none;
	padding: 1em 0;
	background-color: transparent;
}
a:hover .arrowInner,
button:hover .arrowInner {width: 2.7em;}
.btn01 a, .btn01 button {
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.7);
	border: rgba(255, 255, 255, 0.7) 1px solid;
}

/* btn01 */
.btn01 a:hover,
.btn01 button:hover {background-color: rgba(255, 255, 255, 0.2);}

/* btn02 */
.btn02 a,
.btn02 button {border: #17234D 1px solid;}
.btn02 .arrowInner span {background-color: #17234D;}

/* btn03 */
.btn03 a,
.btn03 button {
	color: #fff!important;
	border:  #fff 1px solid;
}
.btn03 .arrowInner span {background-color: #fff;}
.btn03 a:hover,
.btn03 button:hover {
	color: #17234D!important;
	background-color: #fff;
}
.btn03 a:hover .arrowInner span,
.btn03 button:hover .arrowInner span {background-color: #17234D;}

/* btn04 */
.btn04 a,
.btn04 button {
	color: #666;
	border: #aaa 1px solid;
	background-color: rgba(255, 255, 255, 0.3);
}
.btn04 a:hover,
.btn04 button:hover {background-color: rgba(255, 255, 255, 0.5);}
.btn04 .arrowInner span {background-color: #666;}

/* btn05 */
.btn05 a,
.btn05 button {
	color: #fff!important;
	border: #17234D 1px solid;
	background-color: #17234D;
}
.btn05 a:hover,
.btn05 button:hover {background-color: rgba(23, 35, 77, 0.8);}
.btn05 .arrowInner span {background-color: #fff;}

/* btn06 */
.btn06 a,
.btn06 button {
	color: #fff!important;
	border: #976802 1px solid;
	background-color: #976802;
}
.btn06 a:hover,
.btn06 button:hover {background-color: rgba(151, 104, 2, 0.8);;}
.btn06 .arrowInner span {background-color: #fff;}

/* centerBtn */
.centerBtn a,
.centerBtn button {margin: 0 auto;}

/* btnArrow */
.btnArrow {
	width: 3em;
	display: inline-block;
}
.arrowInner,
.arrowInner span {
	display: inline-block;
	transition-duration: .6s;
	transition-timing-function: cubic-bezier(.075,.82,.165,1);
	-webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1);
}
.arrowInner {
	width: 2em;
	height: 0.6em;
	position: relative;
	margin-left: 1em;
}
.leftArrow .arrowInner {margin: 0 1em 0 0;}
.arrowInner span {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 1px;
}
.arrowInner .line01 {left: 0;}
.arrowInner .line02 {
	width: 1em;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform-origin: right bottom;
	-webkit-transform-origin: right bottom;
}
.leftArrow .arrowInner .line02 {
	left: 0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform-origin: left top;
	-webkit-transform-origin: left top;
}
.leftArrow a:hover  .arrowInner .line01 {
	right: 1em;
	left: -1em;
}
.leftArrow a:hover  .arrowInner .line02 {left: -1em;}

/* arrowLink */
.arrowLink a {
	display: block;
	text-align: center;
}
.arrowLink {text-align: center;}
.arrowLink .btnArrow {margin-left: -1em;}
.arrowLink .arrowInner span {background-color: #17234D;}
.arrowLink .whiteArrow span {background-color: #fff;}

/* bgImage
---------------------------------------- */
.bgImage, .bgImage02 {
	width: 100%;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.bgImage:after, .bgImage02:after {
	content: "";
	display: block;
	width: 100%;
}
/* imageThin */
.imageThin .bgImage:after, .imageThin .bgImage02:after {padding-top: 30%;}

/* text
---------------------------------------- */
.catch {
	line-height: 2em;
	text-align: center;
	font-family: "FOT-筑紫明朝 Pr6 M";
}

/* accessBox
---------------------------------------- */
#accessBox #googleMap {width: 100%;}
#accessBox address {
	text-align: center;
	line-height: 2em;
}

/* backgroundcolor */
.bgcolorGray {
	background-color: #d6d5d6;
}

/* textCenter */
.textCenter {
	text-align: center;
}

/* form
---------------------------------------- */
form .changeBtn {
	background-color: #17234C;
	color: #fff;
	cursor: pointer;
	line-height: 25px;
	display: inline-block;
	width: 25px;
	text-align: center;
	border: 1px solid #17234C;
}
form #decBtn.changeBtn {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
form #incBtn.changeBtn {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* title
	---------------------------------------- */
	/* titLogo */
	.titLogo {margin-bottom: 4em!important;}
	.titLogo:after {bottom: -2em;}
	.titLogo div {max-width: 60%;}
	.titLogo .catch {font-size: 1.25em!important;}
	
	/* tit01 */
	.tit01 {margin-bottom: 2em;}
	.tit01 p, .tit02 p, .tit03 p, .tit04 h2, .tit05 {font-size: 1.5em;}
	
	/* tit02 */
	.tit02 {
		text-align: center;
		padding-bottom: 20px;
		margin-bottom: 25px;
	}
	.tit02 p {text-align: center;}
	
	/* tit03 */
	.tit03 {
		text-align: center;
		margin-bottom: 2em;
	}
	
	/* tit04, tit05 */
	.tit04, .tit05 {padding: 3em 0;}
	
	/* tit06 */
	.tit06 {font-size: 1.35em;}
	
	/* tit07 */
	.tit07 {font-size: 2.85em;}
	
	/* tit08 */
	.tit08 {
		font-size: 1.5em;
		margin:0  0 1em;
	}
	
	/* .openText */
	.openText a, .openText span {
		font-size: 1.15em;
		margin-bottom: 2em;
	} 
	
	/* button
	---------------------------------------- */
	.btnTable {width: 100%;}
	.btnTable td {
		width: 100%;
		display: block;
		margin-bottom: 0.7em;
	}

	/* mainImage
	---------------------------------------- */
	#mainImageM span:after,
	.mainImageW span:after,
	.mainImageS span:after {padding-top: 70%;}
	.mainImageMenu {margin: 0 -1em;}
	.mainImageMenu span:after {padding-top: 45%;}

	/* mainImageBox
	---------------------------------------- */
	#mainImageBox header {padding: 4em 0 2.8em;}
	
	/* contents
	---------------------------------------- */
	.contents01 {padding: 3.5em 0;}
	.contents02 {padding-bottom: 3.5em!important;}	
	.sec01 {padding-bottom: 3em;}
	
	/* text
	---------------------------------------- */
	.catch {margin-bottom: 1.5em;}
	.lead {padding: 0 20px;}

	/* accessBox
	---------------------------------------- */
	#accessBox #googleMap {height: 450px;}
	#accessBox section {padding: 2.5em;}
	#accessBox address {margin-bottom: 1.5em;}
	#accessBox .btn02 a {margin: 0 auto;}
	
}
/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* title
	---------------------------------------- */
	/* titLogo */
	.titLogo {margin-bottom: 7em!important;}
	.titLogo:after {bottom: -3.5em;}
	.titLogo div {
		max-width: 30%;
		margin-bottom: 3em;
	}
	.titLogo .catch {font-size: 1.5em!important;}
	
	/* tit01 */
	.tit01 {margin-bottom: 4em;}
	.tit01 p, .tit02 p, .tit03 p  {font-size: 2.3em;}

	/* tit02 */
	.tit02 {
		padding-bottom: 30px;
		margin-bottom: 35px;
	}
	
	/* tit03 */
	.tit03 {margin-bottom: 2.3em;}
	
	/* tit04, tit05 */
	.tit04, .tit05 {padding: 3.2em 0;}
	.tit04 h2, .tit05 {font-size: 2.85em;}
	
	/* tit06 */
	.tit06 {
		font-size: 1.7em;
		line-height: 1.3em;
	}
	
	/* tit08 */
	.tit08 {
		font-size: 2.85em;
		margin: 0 0 1em;
	}
	
	/* .openText */
	.openText a, .openText span {
		font-size: 1.28em;
		margin-bottom: 2em;
	}
	
	/* button
	---------------------------------------- */
	.btnTable {
		width: 610px;
		margin: 0 auto;
	}
	.btnTable tr td:nth-child(1) {
		width: 300px;
		padding-right: 10px;
	}

	/* mainImage
	---------------------------------------- */
	#mainImageM span:after {padding-top: 46%;}
	.mainImageW span:after,
	.mainImageMenu span:after {padding-top: 30%;}
	.mainImageS span:after {padding-top: 54.5%;}
	.mainImageS {
		max-width: 1080px;
		width: 100%;
		margin: 2em auto 0;
		padding: 0 10px;
	}
	.bgImage {
		opacity : 0!important;
		transform : translate(0, 20px);
		transition : all 600ms;
	}
	.bgImage.imageFade {
		opacity : 1!important;
		transform : translate(0, 0);
	}
	
	/* mainImageBox
	---------------------------------------- */
	#mainImageBox header {padding: 10em 0 12em;}
	
	/* contents
	---------------------------------------- */
	.contents01 {padding: 6em 0;}
	.contents02 {padding-bottom: 8em!important;}
	.sec01 {padding-bottom: 6em;}
	
	/* text
	---------------------------------------- */
	.catch {
		font-size: 1.15em;
		margin-bottom: 1.7em;
	}
	.lead {text-align: center;}

	/* accessBox
	---------------------------------------- */
	#accessBox #googleMap {height: 600px;}
	#accessBox section {padding: 7em 10px;}
	#accessBox address {margin-bottom: 3em;}
}