@charset "utf-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:Arial,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Meiryo,Helvetica,メイリオ,sans-serif;font-size:88%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{color:#000;background-color:transparent;text-decoration:none}a:active,a:hover{color:#000;outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:bottom;max-width:100%;height:auto}svg:not(:root){overflow:hidden}figure{margin:0}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}li{list-style:none}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img {backface-visibility: hidden;}

/*  template style
--------------------------------------------------*/
body {
	font-size: 16px;
	color: #655d5b;
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	margin: auto;
	padding: 0;
	font-family: 'Noto Serif JP','Yu Mincho',YuMincho,serif;
	padding-top: 180px;
}
h1,h2,h3,h4,h5,h6,th { font-weight: normal; }
h1,h2,h3,h4,h5,h6,p,th,td,a {
    font-feature-settings: "palt" 1;
    letter-spacing: .1em;
}
#wrap { position:relative; }
.sp-bl,.sp-il,.tablet-bl { display:none; }
.opa { transition: 0.3s ease-in-out; }
.opa:hover { opacity: 0.85; }
.opa1 { opacity: 1 !important; }
.w100 { width: 100% !important; }
.h100 { height: 100% !important; }
.none { display: none !important }
.cf:before,.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.inner {
	width:95%;
	max-width:1100px;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}

@media screen and (max-width:1100px){
body{
	font-size: 14px;
	padding-top: 60px;
}
}
@media screen and (max-width:768px) {
.pc { display:none !important; }
.sp-bl { display:block; }
.sp-il { display:inline; }
.inner { width:87.5%; max-width:560px; }
}

/* flex */
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.flex.reverse{
	flex-direction: row-reverse;
}

/* btn */
.btn{
	display: block;
	width: 100%;
	height: 60px;
	color: #fff;
	font-size: 18px;
	letter-spacing: .05em;
	line-height: 1;
	text-align: center;
	background: #bfab47;
	box-sizing: border-box;
	margin: auto;
	padding: 20px 10px;
	position: relative;
}
.btn:hover{
	color: #fff;
}
	.btn:before{
		content: "";
		position: absolute;
		z-index: 1;
		right: 20px;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 32px;
		height: 9px;
		background: url(../../img/common/pc/icon_btn.png) no-repeat center/contain;
		transition: .3s ease-in-out;
	}
	.btn:hover:before{
		right: 10px;
	}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	.btn{
		margin-left: 0;
		margin-right: 0;
	}
}
@media screen and (max-width: 768px){
	.btn{
		height: 55px;
		font-size: 16px;
		padding: 19px 10px;
	}
}

/* ttl */
.secTtl{
	color: #231815;
	font-size: 40px;
	line-height: 1.7;
}
	.secTtl span,
	.secTtl span img{
		display: block;
	}
.u-page #main .secTtl{
	font-weight: 300;
}

/* txt */
.secTxt{
	font-size: 16px;
	line-height: 2.375;
}
.u-page .secTxt{
	margin-top: 25px;
}
@media screen and (max-width: 768px){
	.secTtl{
		font-size: 24px;
	}
	.u-page #main .secTtl{
		font-size: 21px;
	}
	.secTxt{
		font-size: 14px;
		text-align: left;
		line-height: 2;
	}
	.u-page .secTxt{
		margin-top: 15px;
	}
	.nowrap br{
		display: none;
	}
}



/*  #header
--------------------------------------------------*/
#header{
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background: #fff;
}
	#header .top{
		position: relative;
		z-index: 2;
		height: 120px;
		background: #fff;
	}
		#header h1{
			width: 360px;
			padding-top: 25px;
		}
		#header .tel{
			flex: 1;
			justify-content: flex-end;
			box-sizing: border-box;
			padding-right: 25px;
			padding-top: 32px;
		}
			#header .number{
				display: block;
				width: 247px;
				margin-right: 17px;
			}
			#header .time{
				width: 250px;
				height: 26px;
				box-sizing: border-box;
				padding: 6px 0;
				font-size: 12px;
				font-weight: 600;
				letter-spacing: .05em;
				line-height: 1;
				text-align: center;
				border: 1px solid #938e8c;
			}
			#header .address{
				font-size: 13px;
				letter-spacing: 0;
				line-height: 1;
				margin-top: 16px;
			}
		#header .mail{
			width: 74px;
		}

	#header .gnavi{
		position: relative;
		z-index: 1;
		height: 60px;
		background: #fff;
		box-sizing: border-box;
		border-top: 1px solid #d3d1d0;
		border-bottom: 1px solid #d3d1d0;
	}
		#header .gnavi ul{
			box-sizing: border-box;
			border-left: 1px solid #d3d1d0;
			border-right: 1px solid #d3d1d0;
			height: 100%;
		}
			#header .gnavi li{
				width: calc(100% / 6);
				box-sizing: border-box;
				align-self: stretch;
			}
			#header .gnavi li + li{
				border-left: 1px solid #d3d1d0;
			}
				#header .gnavi a{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					color: #4f4644;
					font-size: 17px;
					transition: .3s ease-in-out;
				}
				#header .gnavi a:hover{
					background: rgba(191,171,71,.4);
				}
@media screen and (max-width: 1100px){
	#header{
		height: auto;
		border-bottom: 1px solid #d3d1d0;
	}
	#header .pc{
		display: none !important;
	}
	#header .sp-bl{
		display: block;
	}
	#header .inner{
		width: 100%;
		max-width: none;
	}
	#header .top{
		flex-wrap: nowrap;
		align-items: center;
		height: 60px;
	}
	#header h1{
		width: auto;
		flex: 1;
		padding-top: 0;
		padding-left: 10px;
		box-sizing: border-box;
	}
	#header h1 img{
		display: block;
		width: 40vw;
		max-width: 280px;
	}
	#header .tel{
		flex: initial;
		width: 60px;
		padding: 0;
		margin-right: 1px;
	}
	#header .number{
		width: 100%;
		margin: 0;
	}
	#header .mail{
		width: 60px;
		margin-right: 1px;
	}
	#header .gbtn{
		width: 60px;
		height: 60px;
		background: url(../../img/common/sp/btn_menu.png) no-repeat center/100% auto #bfab47;
		cursor: pointer;
		transition: .3s;
		position: relative;
	}
	#header .gbtn.active{
		background-image: url(../../img/common/sp/btn_close.png);
	}
		#header .hamburger{
			position: absolute;
			left: 0;
			right: 0;
			top: 13px;
			margin: auto;
			width: 20px;
			height: 14px;
		}
			#header .hamburger span{
				display: block;
				width: 100%;
				height: 2px;
				background: #fff;
				position: absolute;
				left: 0;
				top: 0;
				transition: .3s ease-in-out;
			}
			#header .hamburger span + span{
				top: 6px;
			}
			#header .hamburger span + span + span{
				top: auto;
				bottom: 0;
			}
			#header .gbtn.active .hamburger span{
				transform: rotate(45deg);
				top: 6px;
			}
			#header .gbtn.active .hamburger span + span{
				opacity: 0;
				transform: none;
			}
			#header .gbtn.active .hamburger span + span + span{
				opacity: 1;
				transform: rotate(-45deg);
				top: auto;
				bottom: 6px;
			}
	#header .gnavi{
		position: fixed;
		top: -100%;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		border: none;
		background: rgba(0,0,0,.85);
		padding-top: 60px;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		transition: 1s cubic-bezier(0.19, 1, 0.26, 0.96);
	}
	#header .gnavi.active{
		top: 0;
	}
	#header .gnavi ul{
		border: none;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style:none;
	}
	#header .gnavi ul::-webkit-scrollbar{
		display: none;
	}
	#header .gnavi li{
		width: 100%;
	}
	#header .gnavi li + li{
		border: none;
		position: relative;
	}
	#header .gnavi li + li:before {
	    content: "";
	    position: absolute;
	    left: 0;
	    right: 0;
	    width: 14px;
	    height: 1px;
	    background: #666;
	    margin: auto;
	}
	#header .gnavi a{
		color: #fff;
		font-size: 15px;
	}
	#header .gnavi a:hover{
		background: rgba(0,0,0,0);
	}
}
@media screen and (max-width: 374px){
	#header h1 img{
		width: 37vw;
	}
}



/*  #main
--------------------------------------------------*/
#main{
	text-align: center;
}
	#u-mv{
		position: relative;
		margin-bottom: 50px;
	}
		#u-mv .mvImg{
			width: 100%;
			height: 400px;
			justify-content: center;
			align-items: center;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
			#u-mv h2{
				color: #fff;
				font-size: 48px;
				font-weight: 300;
				letter-spacing: .13em;
				line-height: 1;
			}
			#u-mv h2.fadeIn{
				animation-delay: .5s;
				animation-duration: 1s;
			}
				#u-mv h2 span{
					display: block;
					margin: 20px auto 0;
				}
					#u-mv h2 span img{
						display: block;
					}

		#u-mv .bread{
			padding-top: 20px;
			padding-bottom: 20px;
			justify-content: flex-start;
		}
			#u-mv .bread li{
				color: #918b8a;
				font-size: 12px;
				line-height: 1;
			}
			#u-mv .bread li + li{
				margin-left: 12px;
				padding-left: 16px;
				position: relative;
			}
			#u-mv .bread li + li:before{
				content: "";
				position: absolute;
				left: 0;
				top: 1px;
				width: 7px;
				height: 10px;
				background: url(../../img/common/pc/icon_bread.png) no-repeat center/contain;
			}
				#u-mv .bread li a{
					color: #bfab47;
					line-height: 1;
				}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	#u-mv h2{
		line-height: 1.4;
	}
}
@media screen and (max-width: 768px){
	#u-mv{
		margin-bottom: 30px;
	}
	#u-mv .mvImg{
		height: 200px;
	}
	#u-mv h2{
		font-size: 28px;
	}
}

.tab {
	height: 60px;
	line-height: 60px;
}
	.tab .goldBox,
	.tab .silverBox {
		font-size: 18px;
		width: 50%;
		position: relative;
		height: 60px;
		transition: 1s;
	}
	.tab .goldBox {
		background-color: #BFAB47;
	}
	.tab .silverBox {
		background-color: #918B8A;
	}
		.tab .goldBox:hover,
		.tab .silverBox:hover {
			opacity: 0.8;
			transition: 1s;
		}
		.tab a {
			display: block;
			color: #fff;
		}
		.tab .goldBox .arrow,
		.tab .silverBox .arrow {
			position: absolute;
			top: 0;
			right: 0;
			max-width: 60px;
			width: 10.9091%;
			height: 100%;
		}
		.tab .goldBox .arrow {
			background-color: #CBBC6C;
		}
		.tab .silverBox .arrow {
			background-color: #BDBAB9;
		}
		.tab .arrow:after {
			content: "";
			background-image: url(../../img/common/pc/arrow_under.png);
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
			max-width: 60px;
			width: 100%;
			height: 100%;
			display: inline-block;
			transition: 1s;
		}
		.tab a:hover .arrow:after{
			transition: 1s;
			transform: translateY(10px);    
		}

		.tab .arrowUp {
			position: absolute;
			top: 0;
			right: 0;
			max-width: 60px;
			width: 10.9091%;
			height: 100%;
			background-color: #BDBAB9;
		}
		.tab .arrowUp:after {
			content: "";
			background-image: url(../../img/common/pc/arrow_up.png);
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
			max-width: 60px;
			width: 100%;
			height: 100%;
			display: inline-block;
			transition: 1s;
		}
		.tab a:hover .arrowUp:after{
			transition: 1s;
			transform: translateY(-10px);    
		}
@media screen and (max-width: 768px) {
	.tab .goldBox,
	.tab .silverBox {
	    font-size: 14px;
	    padding-right: 7%;
	    box-sizing: border-box;
	}
		.tab .goldBox .arrow,
		.tab .silverBox .arrow {
			max-width: 40px;
			width: 28.5716%;
		}
		.tab a:hover .arrow:after {
    		transform: translateY(0);
		}
	.tab .arrowUp {
		max-width: 40px;
		width: 28.5716%;
	}
		.tab a:hover .arrowUp:after{
			transform: translateY(0);    
		}
}
@media screen and (max-width: 414px){
	.tab{
		height: auto;
	}
		.tab .goldBox,
		.tab .silverBox {
		    /*font-size: 12px;*/
		    width: 100%;
		    padding-right: 8%;
		    box-sizing: border-box;
		}
			.tab .goldBox .arrow,
			.tab .silverBox .arrow {
			    max-width: 30px;
			    width: 21.4286%;
			}
			.tab a:hover .arrow:after {
	    		transform: translateY(0);
			}
		.tab .arrowUp {
		    max-width: 30px;
		    width: 21.4286%;
		}
			.tab a:hover .arrowUp:after{
				transform: translateY(0);    
			}
}




/*  #footer
--------------------------------------------------*/
#footer{
	text-align: center;
}
	#footer .inquiry{
		background: #231815;
		padding-top: 80px;
		padding-bottom: 100px;
	}
		#footer .secTtl{
			color: #d3d1d0;
		}
			#footer .secTtl span{
				width: 63px;
				margin: 8px auto 0;
			}
		#footer .contacts{
			max-width: 880px;
			margin-top: 46px;
		}
			#footer .contacts > li{
				width: 45.454545%;
				color: #bdbab9;
			}
				#footer .contacts h4{
					font-size: 18px;
					line-height: 1.66;
				}
					#footer .contacts h4 span{
						display: block;
						font-size: 14px;
					}
				#footer .contacts a{
					display: block;
					width: 100%;
					height: 70px;
					box-sizing: border-box;
					border: 1px solid #918b8a;
					color: #d3d1d0;
					line-height: 1;
					margin-top: 23px;
					transition: .3s ease-in-out;
				}
				#footer .contacts a.mail{
					background: url(../../img/common/pc/icon_mailBtn.png) no-repeat left calc(50% - 6em) center/27px auto;
					padding-top: 23px;
					padding-bottom: 23px;
					padding-left: 32px;
					font-size: 21px;
				}
				#footer .contacts a.tel{
					background: url(../../img/common/pc/icon_telBtn.png) no-repeat left calc(50% - 4em) center/23px auto;
					padding-top: 21px;
					padding-bottom: 21px;
					padding-left: 32px;
					font-size: 24px;
				}
				#footer .contacts a:hover{
					background-color: rgba(255,255,255,.2);
				}

	#footer .info{
		padding-top: 88px;
		padding-bottom: 70px;
	}
		#footer .info h3{
			max-width: 442px;
			margin: auto;
		}
		#footer .info .address{
			font-size: 14px;
			line-height: 2;
			margin-top: 20px;
		}

	#footer .bottom{
		background: #e9e8e8;
		padding-top: 80px;
		padding-bottom: 70px;
	}
		#footer .sitemap{
			justify-content: center;
		}
			#footer .sitemap > li + li:before{
				content: "｜";
				padding: 0 5px;
			}
				#footer .sitemap a{
					color: #655d5b;
					font-size: 14px;
					letter-spacing: .06em;
					line-height: 1;
				}
		#footer .copyright{
			font-size: 12px;
			letter-spacing: .06em;
			line-height: 1;
			margin-top: 50px;
		}
@media screen and (max-width: 768px){
	#footer .inquiry{
		padding-top: 40px;
		padding-bottom: 60px;
	}
	#footer .contacts{
		justify-content: center;
		margin-top: 25px;
	}
	#footer .contacts > li{
		width: 100%;
	}
	#footer .contacts > li + li {
	    margin-top: 35px;
	}
	#footer .contacts h4{
		font-size: 16px;
		letter-spacing: .05em;
	}
	#footer .contacts h4 span{
		font-size: 12px;
		letter-spacing: 0;
	}
	#footer .contacts a{
		max-width: 280px;
		height: 60px;
		margin-top: 18px;
		margin-left: auto;
		margin-right: auto;
	}
	#footer .contacts a.mail{
		font-size: 16px;
		padding-top: 20px;
		padding-bottom: 20px;
		background-position: left calc(50% - 5.8em) center;
		background-size: 22px auto;
	}
	#footer .contacts a.tel{
		font-size: 18px;
		padding-top: 18px;
		padding-bottom: 18px;
		padding-left: 26px;
		background-position: left calc(50% - 3.9em) center;
		background-size: 18px auto;
	}
	#footer .info{
		padding-top: 44px;
		padding-bottom: 35px;
	}
	#footer .info h3{
		width: 80%;
	}
	#footer .info .address{
		font-size: 12px;
		margin-top: 12px;
	}
	#footer .bottom{
		padding-top: 20px;
		padding-bottom: 20px;
		padding-bottom: calc(20px + constant(safe-area-inset-bottom));
		padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}
	#footer .copyright{
		font-size: 11px;
		margin-top: 0;
	}
}



/*  Universal animation
--------------------------------------------------*/
.animated {
	animation-duration: .5s;
	animation-fill-mode: both;
}

/* fade in */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.fadeIn {
	animation-name: fadeIn;
	animation-fill-mode:both;
	animation-duration:.5s;
	visibility: visible !important;
	opacity: 0;
}


/* fade in up */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 1;
		transform: none; 
	}
}
.fadeInUp {
	animation-name: fadeInUp;
	animation-fill-mode:both;
	animation-duration:.5s;
	visibility: visible !important;
	opacity: 0;
}


/* fade in right */
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate(30px,0); 
	}
	to {
		opacity: 1;
		transform: none; 
	}
}
.fadeInRight {
	animation-name: fadeInRight;
	animation-fill-mode:both;
	animation-duration:.5s;
	visibility: visible !important;
	opacity: 0;
}


/* fade in left */
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate(-30px,0); 
	}
	to {
		opacity: 1;
		transform: none; 
	}
}
.fadeInLeft {
	animation-name: fadeInLeft;
	animation-fill-mode:both;
	animation-duration:.5s;
	visibility: visible !important;
	opacity: 0;
}


/* fade out */
@keyframes fadeOut {
	from { opacity: 1; } 
	to { opacity: 0; }
}
.fadeOut { animation-name: fadeOut; }