@charset "utf-8";

/*------------------------------------------
reset
------------------------------------------*/
*{
	margin: 0;
	padding: 0;
}
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
p,div,ul,li,h1,h2,h3,img,dl,dt,dd{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*----------------------
common parts
-----------------------*/
img{
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
li{
	list-style: none;
}
.clearfix::after{
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	overflow: hidden;
	line-height: 0;
	content: ".";
}
.note{
	color: #ff0000;
	padding-left: 1em;
	text-indent: -1em;
}
.bg-blue{
	width: 100%;
	background: #f7fafb;
}
.mt10{
	margin-top: 10px;
}
.mt40{
	margin-top: 40px;
}
.mb10{
	margin-bottom: 10px;
}
.mb40{
	margin-bottom: 40px;
}
.al-center{
	text-align: center;
}
.red{
	color: #ff0000;
}
/*---------------------
 link
---------------------*/
a:link{
	color: #3f3a39;
	text-decoration: none;
	background: transparent;
	outline: none;
}
a:visited{
	color: #3f3a39;
	text-decoration: none;
	background: transparent;
	outline: none;
}
a:hover{
	color: #fd8232;
	transition: 0.5s;
	text-decoration: none;
	background: transparent;
}
/*---------------------
 keyframes
---------------------*/
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes rotate {
	0% { transform: rotate(0deg);}
	100% { transform: rotate(360deg);}
}
@keyframes FadeUp{
	0%{ opacity: 0; transform: translateY(50px);}
	50%{ opacity: 1;}
	100%{ opacity: 1; transform: translateY(0);}
}
@keyframes NumFadeUp{
	0%{ opacity: 0; transform: translateY(30px); }
	50%{ opacity: 1;}
	100%{ opacity: 1; transform: translateY(0); }
}
@keyframes RegurationFadeUp{
	0%{ opacity: 0; transform: translateY(30px); }
	50%{ opacity: 1;}
	100%{ opacity: 1; transform: translateY(0); }
}
@keyframes Scale{
	0%{ opacity: 0; transform: scale(0); }
	100%{ opacity: 1; transform: scale(1); }
}

/*------------------------------------------
 pc
------------------------------------------*/
@media print, screen and (min-width: 769px){
	body{
		font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 15px;
		color: #1a1c1d;
		background: #ffffff;
		margin: 0;
		padding: 0;
		line-height: 1.8;
		animation: fadeIn 1.5s ease 0s 1 normal;
	}
	/*---------------------
	 header
	---------------------*/
	#header{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px 0;
	}
	#header h1{
		width: 10.4166%;;
		max-width: 125px;
	}
	#nav{
		width: 75%;;
		max-width: 900px;
	}
	#nav ul{
		display: flex;
		justify-content: space-around;
		font-weight: bold;
	}
	#nav ul li{
		margin: 0 10px;
	}
	#header .info{
		width: 14%;
		max-width: 168px;
	}
	/*---------------------
	 common
	---------------------*/
	.inner{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 50px 0;
	}
	h2{
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}
	h3{
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40px;
	}
	h4{
		font-size: 20px;
		margin-bottom: 30px;
	}
	h4 span{
		position: relative;
	}
	h4 span::after{
		display: block;
		content: "";
		width: 40px;
		height: 8px;
		background: url("../images/icon-h4.png") no-repeat;
		position: absolute;
		top: 100%;
		left: 0;
	}
	h5{
		font-size: 16px;
		font-weight: normal;
		margin-bottom: 15px;
	}
	.sub-ttl{
		font-size: 14px;
		color: #285d74;
		font-weight: bold;
		text-align: center;
		margin-bottom: 60px;
	}
	table{
		width: 100%;
		max-width: 1200px;
		border-collapse: collapse;
	}
	table th{
		background: #285d74;
		padding: 10px;
		color: #ffffff;
		font-weight: normal;
		white-space: nowrap;
		border-left: solid 1px #d3e7ef;
	}
	table th:first-child{
		border-left: none;
	}
	table th:last-child{
		border-right: solid 1px #285d74;
	}
	table td{
		background: #ffffff;
		padding: 10px;
		border: solid 1px #d3e7ef;
		text-align: center;
	}
	/*---------------------
	 footer
	---------------------*/
	#footer{
		width: 100%;
		background: #d3e7ef;
		position: relative;
		margin-top: 120px;
	}
	#footer::before{
		content: "";
		display: block;
		width: 100%;
		height: 26px;
		background: url("../images/bg-footer.png") repeat-x;
		position: absolute;
		top: -26px;
		left: 0;
	}
	#footer .foot-inner{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 50px 0;
	}
	#footer .foot-inner .info{
		width: 29.1666%;
		max-width: 350px;
	}
	#footer .foot-inner .info > p{
		margin-top: 10px;
	}
	#footer .foot-inner .info .tel span img{
		display: inline-block;
		vertical-align: middle;
		padding-left: 15px;
	}
	#footer .foot-inner .choka{
		width: 20.8333%;
		max-width: 250px;
	}
	#footer .foot-inner .choka img{
		transition-duration: 0.5s;
	}
	#footer .foot-inner .choka img:hover{
		box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
 		transform: translateY(-10px);
 		transition-duration: 0.5s;
	}
	#footer .foot-inner table{
		width: 41.6666%;
		max-width: 500px;
		border-collapse: collapse;
	}
	#footer .foot-inner table th{
		background: #285d74;
		padding: 10px;
		color: #ffffff;
		font-weight: normal;
		white-space: nowrap;
		border-left: solid 1px #d3e7ef;
	}
	#footer .foot-inner table th:first-child{
		text-align: left;
		border-left: none;
	}
	#footer .foot-inner table td{
		background: #ffffff;
		padding: 10px;
		border-top: solid 1px #d3e7ef;
		border-left: solid 1px #d3e7ef;
		text-align: center;
	}
	#footer .foot-inner table td:first-child{
		text-align: left;
		border-left: none;
	}
	#footer .copy{
		background: #2f3d42;
		padding: 20px 0;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}
	/*--------------------------------
		pagetop
	--------------------------------*/
	#pagetop{
		position: fixed;
		width: 32px;
		height: 32px;
		right: 50px;
		bottom: 150px;
		z-index: 2;
		cursor: pointer;
	}
	/*---------------------
	 btn
	---------------------*/
	a.btn:link,
	a.btn:visited{
		display:block;
		width: 250px;
		margin: 40px auto 0 auto;
		padding: 15px 0;
		background-color: #8a8a39;
		background-image: url("../images/icon-arrow-white.png");
		background-repeat: no-repeat;
		background-position: 92% 50%;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}
	a.btn::before,
	a.btn::after{
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	a.btn::before,
	a.btn::after {
		box-sizing: border-box;
		transition: all .3s;
	}
	a.btn::after{
		top: -100%;
		width: 100%;
		height: 100%;
	}
	a.btn:hover{
		color: #ffffff;
	}
	a.btn:hover::after{
		top: 0;
		background: #fdce71;
	}
	a.btn-map:link,
	a.btn-map:visited{
		display:block;
		width: 250px;
		margin: 10px 0;
		padding: 15px 0;
		background-color: #8a8a39;
		background-image: url("../images/icon-arrow-white.png");
		background-repeat: no-repeat;
		background-position: 92% 50%;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}
	a.btn-map::before,
	a.btn-map::after{
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	a.btn-map::before,
	a.btn-map::after {
		box-sizing: border-box;
		transition: all .3s;
	}
	a.btn-map::after{
		top: -100%;
		width: 100%;
		height: 100%;
	}
	a.btn-map:hover{
		color: #ffffff;
	}
	a.btn-map:hover::after{
		top: 0;
		background: #fdce71;
	}
	/*---------------------
	 rotaition
	---------------------*/
	.rotaition{
		animation: rotate 50s linear infinite;
	}
	/*--------------------------------
	anime-scale
	--------------------------------*/
	.anime-scale{ opacity: 0; }
	.anime-scale.active{ opacity: 1; animation: Scale 1.5s ease 1 forwards; }
	
	/*--------------------------------
	js-FadeUp
	--------------------------------*/
	.js-fadeup{ opacity: 0; }
	.js-fadeup.active{ animation: FadeUp 1.5s ease 0.0s 1 forwards; }
	
	/*--------------------------------
	fadeup(js-numfadeup)
	--------------------------------*/
	.js-numfadeup{ opacity: 0; }
	.js-numfadeup:nth-child(1).active{ animation: NumFadeUp 1.2s ease 0.0s 1 forwards; }
	.js-numfadeup:nth-child(2).active{ animation: NumFadeUp 1.2s ease 0.3s 1 forwards; }
	.js-numfadeup:nth-child(3).active{ animation: NumFadeUp 1.2s ease 0.6s 1 forwards; }
	.js-numfadeup:nth-child(4).active{ animation: NumFadeUp 1.2s ease 0.8s 1 forwards; }
	.js-numfadeup:nth-child(5).active{ animation: NumFadeUp 1.2s ease 1.0s 1 forwards; }
	
	/*--------------------------------
	fadeup(js-regurationfadeup)
	--------------------------------*/
	.js-regurationfadeup{ opacity: 0; }
	.js-regurationfadeup:nth-child(1).active{ animation: RegurationFadeUp 1.0s ease 0.0s 1 forwards; }
	.js-regurationfadeup:nth-child(2).active{ animation: RegurationFadeUp 1.0s ease 0.2s 1 forwards; }
	.js-regurationfadeup:nth-child(3).active{ animation: RegurationFadeUp 1.0s ease 0.4s 1 forwards; }
	.js-regurationfadeup:nth-child(4).active{ animation: RegurationFadeUp 1.0s ease 0.6s 1 forwards; }
	.js-regurationfadeup:nth-child(5).active{ animation: RegurationFadeUp 1.0s ease 0.8s 1 forwards; }
	.js-regurationfadeup:nth-child(6).active{ animation: RegurationFadeUp 1.0s ease 1.0s 1 forwards; }
	.js-regurationfadeup:nth-child(7).active{ animation: RegurationFadeUp 1.0s ease 1.2s 1 forwards; }
	.js-regurationfadeup:nth-child(8).active{ animation: RegurationFadeUp 1.0s ease 1.4s 1 forwards; }
	.js-regurationfadeup:nth-child(9).active{ animation: RegurationFadeUp 1.0s ease 1.6s 1 forwards; }
	
	/*---------------------
	  display: none;
	---------------------*/
	.sp-br,
	#sp-nav-area,
	.sp-logo,
	.sp-nav-btn,
	#sp-nav{
		display: none;
		visibility: hidden;
	}
}

/*------------------------------------------
 font-size 切り替え
------------------------------------------*/
@media print, screen and (max-width: 990px){
	#nav{
		font-size: 11px;
	}
}
	
/*------------------------------------------
 sp
------------------------------------------*/
@media screen and (max-width: 768px){
	body{
		font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 15px;
		color: #1a1c1d;
		background: #ffffff;
		margin: 0;
		padding: 0;
		line-height: 1.8;
		animation: fadeIn 1.5s ease 0s 1 normal;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
	/*---------------------
	 header
	---------------------*/
	#header{
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 100%;
		margin: 0 auto 20px auto;
		padding: 10px;
	}
	#header h1{
		width: 100%;
		max-width: 100px;
	}
	/*---------------------
	  nav
	---------------------*/
	#sp-nav-area{
		min-height: 66px;
		padding: 0 10px;
	}
	/*---------------------
	  hamburger icon
	---------------------*/
	/* ハンバーガーアイコン & 動作 */
	.sp-nav-btn{
		display: block;
		position: fixed;
		width: 50px;
		height: 90px;
		top: 0;
		right: 5px;
		cursor: pointer;
		z-index: 3;
		background: #ffffff;
		text-align: center;
		padding-top: 20px;
	}
	.sp-nav-btn i{
		display: block;
		position: relative;
		width: 35px;
		height: 2px;
		background: #1a1c1d;
		transition: background 0.5s;
		left: 8px;
		top: 22px;
	}
	.sp-nav-btn i:before{
		content: "";
		position: absolute;
		display: block;
		width: 35px;
		height: 2px;
		background: #1a1c1d;
		transform: rotate(0deg);
		transition: all 0.3s !important;
		transform: translateY(8px);
		top: 1px;
	}
	.sp-nav-btn i:after{
		content: "";
		position: absolute;
		display: block;
		width: 35px;
		height: 2px;
		background: #1a1c1d;
		transform: rotate(0deg);
		transition: all 0.3s !important;
		transform: translateY(-8px);
		top: -1px;
	}
	.sp-nav-btn span{
		position: absolute;
		color: #1a1c1d;
		font-size: 9px;
		font-weight: bold;
		width: 100%;
		right: 0;
		bottom: 3px;
		text-align: center;
	}
	/*---------------------
	  hamburger open
	---------------------*/
	.sp-nav-btn.is-open{
		background: #ffffff;
		z-index: 4;
	}
	.sp-nav-btn.is-open i{
		background: #ffffff;
	}
	.sp-nav-btn.is-open i:before{
		transform: translateY(0px) rotate(45deg);
		position: absolute;
		top: 0;
		background: #285d74;
	}
	.sp-nav-btn.is-open i:after{
		transform: translateY(0px) rotate(-45deg);
		position: absolute;
		top: 0;
		background: #285d74;
	}
	.sp-nav-btn.is-open span{
		color: #285d74;
	}
	/*---------------------
	  menu
	---------------------*/
	#sp-nav{
		display: none;
		position: fixed;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 120px 20px 20px 20px;
		background: rgba(40,93,116,0.8);
		z-index: 3;
		text-align: center;
		overflow-y: auto;
		box-sizing: border-box;
	}
	#sp-nav > ul{
		display: block;
	}
	#sp-nav > ul > li a,
	#sp-nav > ul > li a:visited,
	#sp-nav > ul > li a:hover{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		margin-bottom: 2%;
		padding: 20px;
		border: double 4px #285d74;
		background-color: #f8f6ef;
		text-align: left;
		font-weight: bold;
		text-decoration: none;
	}
	#sp-nav .tel a{
		display: block;
		width: 100%;
		margin-top: 3px;
		padding: 20px;
		background: #f8f6ef;
		border: solid 5px #285d74;
	}
	
	/*---------------------
	 common
	---------------------*/
	.inner{
		width: 100%;
		margin: 0 auto;
		padding: 50px 20px;
	}
	h2{
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}
	h3{
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40px;
	}
	h4{
		font-size: 20px;
		margin-bottom: 40px;
	}
	h4 span{
		position: relative;
	}
	h4 span::after{
		display: block;
		content: "";
		width: 40px;
		height: 8px;
		background: url("../images/icon-h4.png") no-repeat;
		position: absolute;
		top: 100%;
		left: 0;
	}
	h5{
		font-size: 15px;
		margin-bottom: 10px;
	}
	.sub-ttl{
		font-size: 14px;
		color: #285d74;
		font-weight: bold;
		text-align: center;
		margin-bottom: 60px;
	}
	table{
		width: 100%;
	border-collapse: collapse;
	}
	table th{
		background: #285d74;
		padding: 10px;
		color: #ffffff;
		font-weight: normal;
		white-space: nowrap;
		border-left: solid 1px #d3e7ef;
	}
	table th:first-child{
		border-left: none;
	}
	table th:last-child{
		border-right: solid 1px #285d74;
	}
	table td{
		background: #ffffff;
		padding: 10px;
		border: solid 1px #d3e7ef;
		text-align: center;
	}
	/*---------------------
	 footer
	---------------------*/
	#footer{
		width: 100%;
		background: #d3e7ef;
		position: relative;
		margin-top: 90px;
	}
	#footer::before{
		content: "";
		display: block;
		width: 100%;
		height: 26px;
		background: url("../images/bg-footer.png") repeat-x center center;
		position: absolute;
		top: -26px;
		left: 0;
	}
	#footer .foot-inner{
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 30px 10px;
	}
	#footer .foot-inner .info{
		width: 100%;
		text-align: center;
	}
	#footer .foot-inner .info > p{
		margin-top: 30px;
	}
	#footer .foot-inner .info .tel span img{
		display: inline-block;
		vertical-align: middle;
		padding-left: 15px;
	}
	#footer .foot-inner .choka{
		width: 100%;
		max-width: 250px;
		margin: 40px auto;
	}
	#footer .foot-inner .choka img{
		transition-duration: 0.5s;
	}
	#footer .foot-inner .choka img:hover{
		box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
 		transform: translateY(-10px);
 		transition-duration: 0.5s;
	}
	#footer .foot-inner table{
		width: 100%;
		border-collapse: collapse;
	}
	#footer .foot-inner table th{
		background: #285d74;
		padding: 10px;
		color: #ffffff;
		font-weight: normal;
		white-space: nowrap;
		border-left: solid 1px #d3e7ef;
	}
	#footer .foot-inner table th:first-child{
		text-align: left;
		border-left: none;
	}
	#footer .foot-inner table td{
		background: #ffffff;
		padding: 10px;
		border-top: solid 1px #d3e7ef;
		border-left: solid 1px #d3e7ef;
		text-align: center;
	}
	#footer .foot-inner table td:first-child{
		text-align: left;
		border-left: none;
	}
	#footer .copy{
		width: 100%;
		background: #2f3d42;
		padding: 20px 0;
		text-align: center;
		color: #ffffff;
		font-size: 14px;
	}
	/*--------------------------------
		pagetop
	--------------------------------*/
	#pagetop{
		position: fixed;
		width: 32px;
		height: 32px;
		right: 10px;
		bottom: 50px;
		z-index: 2;
		cursor: pointer;
	}
	/*---------------------
	 btn
	---------------------*/
	a.btn:link,
	a.btn:visited{
		display:block;
		width: 250px;
		margin: 40px auto 0 auto;
		padding: 15px 0;
		background-color: #8a8a39;
		background-image: url("../images/icon-arrow-white.png");
		background-repeat: no-repeat;
		background-position: 92% 50%;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}
	a.btn::before,
	a.btn::after{
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	a.btn::before,
	a.btn::after {
		box-sizing: border-box;
		transition: all .3s;
	}
	a.btn::after{
		top: -100%;
		width: 100%;
		height: 100%;
	}
	a.btn:hover{
		color: #ffffff;
	}
	a.btn:hover::after{
		top: 0;
		background: #fdce71;
	}
	a.btn-map:link,
	a.btn-map:visited{
		display:block;
		width: 250px;
		margin: 30px auto;
		padding: 15px 0;
		background-color: #8a8a39;
		background-image: url("../images/icon-arrow-white.png");
		background-repeat: no-repeat;
		background-position: 92% 50%;
		color: #ffffff;
		text-align: center;
		text-decoration: none;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}
	a.btn-map::before,
	a.btn-map::after{
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	a.btn-map::before,
	a.btn-map::after {
		box-sizing: border-box;
		transition: all .3s;
	}
	a.btn-map::after{
		top: -100%;
		width: 100%;
		height: 100%;
	}
	a.btn-map:hover{
		color: #ffffff;
	}
	a.btn-map:hover::after{
		top: 0;
		background: #fdce71;
	}
	/*---------------------
	  display: none;
	---------------------*/
	#nav,
	#header .info,
	.pc-br{
		display: none;
		visibility: hidden;
	}

}