@import url( https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP|Cardo|Anton&display=swap );

/* HTMLのベース指定部分 */
* { 
	font-size :16px; line-height:2.0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0px; letter-spacing:.1em;
	font-family: 'Noto Sans JP', sans-serif, 'YuGothicM', 'YuGothic', 'Hiragino Kaku Gothic Pro', 'Osaka', 'MS PGothic', 'sans-serif'; font-weight:100;
}
html { width:100%; min-height: 100%; position: relative; }
body { width:100%;  display:block; margin:0; padding:0px; color:#444; line-height: 1.25em; }
@media screen and (max-width: 768px) {
	* { font-size : 1.8vw; }
	*.pc{ display:none; }
}
@media screen and (max-width: 480px) {
	* { font-size : 3.5vw; }
	*.pc{ display:none; }
}
a { color:#555; text-decoration:none; cursor:pointer; }
dl, dt, dd, ul, ol, li, div, h1, h2, h3, h4, h5, h6, p { padding:0; margin:0; font-weight:normal; }
li{ list-style-type:none; }
hr{ clear:both; border:0; margin:0; }
img{vertical-align:middle;}
h1{font-size: 20px;}
button, label{cursor:pointer;}
button:hover, label:hover{ opacity:.8; }
th{ font-weight:normal; }
input, textarea, select { border:solid 1px #555; }
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
	br{ line-height:1px; }
}

#loader{ display:block; position: fixed; width:100%; height:100%; top:0; left:0; z-index:99; background:#fff; }

header{ display:block; position: fixed; width:100%; height:100px; top:0; left:0; z-index:98; background:#fff; padding:10px; transition: all .5s; box-shadow: 0 1px 10px 0 rgba(0,0,0,.2); }
header>ol{ display:table; table-layout:fixed; width:100%; height:100%; }
header>ol>li{ display:table-cell; vertical-align: middle; padding:0 30px; }
header>ol>li:nth-of-type(1){ width:50%; }
header>ol>li:nth-of-type(2){ text-align:right; white-space: nowrap; }
header>ol>li>div{ display:block; height:80px; width:100%; background:url("./img/logo_bk.png") center left no-repeat; background-size: contain; }
header>ol>li>nav{ display: inline-block; text-align: right; }
header>ol>li>nav>a{ display: inline-block; padding:0 .8em; font-family: 'Noto Serif JP'; font-size:.9em; }
header>ol>li>a{ display: inline-block; padding:0 .8em; }
header.transparent{ background: linear-gradient(#000, transparent ); box-shadow:none; }
header.transparent>ol>li>div{ background:url("./img/logo_wh.png") center left no-repeat; background-size: contain; }
header.transparent>ol>li a{ color:#fff; }
header div#nav-toggle{ display:none; }
@media screen and (max-width: 768px) {
	header{ height:10vw; padding:1vw; box-shadow: 0 1px 1vw 0 rgba(0,0,0,.2);}
	header>ol>li{ padding:0 3vw; }
	header>ol>li>div{ height:8vw; }
}
@media screen and (max-width: 480px) {
	header{ height:14vw; padding:1vw;  }
	header>ol>li>div{ height:12vw; }
	header>ol>li:nth-of-type(2){ width:0; padding:0; }
	header>ol>li:nth-of-type(2)>a{ position: absolute; top:1vw; left:1vw; width:12vw; height:12vw; line-height:12vw; text-align: center; padding:0; }
	header>ol>li>nav{ position:fixed; z-index:-2; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.95); padding:0; overflow:hidden;
		display:none; flex-wrap: wrap; justify-content:center; align-items:center; align-content:center; opacity:1;  }
	header>ol>li>nav>a{ display:block; width:100%; text-align: center; line-height:14vw; font-size:1.2em; }

	header.open nav{ animation: openmenu .5s ease-in-out both; display:flex; }
	header.open>ol>li>div{ background:url("./img/logo_wh.png") center left no-repeat; background-size: contain; }
	header.open>ol>li a{ color:#fff; }
	header div#nav-toggle{ display:block; position:absolute; top:1vw; right:1vw; width: 12vw; height: 12vw; cursor: pointer; }
	header div#nav-toggle div {position: relative; }
	header div#nav-toggle span {display: block; position: absolute; height: .5vw; width: 7vw; background:#000; left:2vw; }
	header.transparent div#nav-toggle span { background:#fff; }
	header div#nav-toggle span:nth-of-type(1) {top: 3.5vw; transition: .35s ease-in-out; }
	header div#nav-toggle span:nth-of-type(2) {top: 5.5vw; }
	header div#nav-toggle span:nth-of-type(3) {top: 7.5vw; transition: .35s ease-in-out; }
	header.open div#nav-toggle span{ background:#fff; }
	header.open div#nav-toggle span:nth-of-type(1) {top: 5.5vw; transform: rotate(315deg); }
	header.open div#nav-toggle span:nth-of-type(2) {height: 0;}
	header.open div#nav-toggle span:nth-of-type(3) {top: 5.5vw; transform: rotate(-315deg); }
}
@keyframes openmenu { 0% { display:flex; } 1% { opacity:0; } 100% {  opacity:1; } }




footer{width:100%; background-color:#161616; padding:5em 1em 1em 1em; }
footer *{ color:#fff; font-family:"Cardo","Noto Serif JP"; }
footer>div{ width:100% ; max-width:1000px; margin:0 auto; text-align: center; }

footer>div#foot_menu>nav{ display: block; width:100%; }
footer>div#foot_menu>nav a{position: relative; display:inline-block; line-height: 1.6em; margin:0 2em; }
footer>div#foot_menu>nav a:before{position: absolute; left:-1em; top:0; content: "\f105"; font-family:"FontAwesome"; margin-right: 10px; color:#ccc6a9; transition: all .4s ; }
footer>div#foot_menu>nav a:after{ position: absolute; bottom: 0; left: 0; content: ""; width: 0; height: 1px; background: #9b9780; transition: all .4s ;}
footer>div#foot_menu>nav a:hover:before{ left:-.8em; }
footer>div#foot_menu>nav a:hover:after{ width: 100%; }

footer>div#foot_sns{ padding:5em 0 0 0; }
footer>div#foot_sns>ul{ display: table; table-layout:fixed; margin:0 auto; }
footer>div#foot_sns>ul>li{ display: table-cell; vertical-align: middle; padding:5px; }
footer>div#foot_sns>ul>li>a{position: relative ; display: inline-block; vertical-align: middle; width: 50px; height:50px; text-align: center; border-radius: 50%; border: 1px solid #444; }
footer>div#foot_sns>ul>li>a:before{content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto ; width:0; height: 0; background:rgba(255,255,255,.1); border-radius:50% ; transition:all .3s; }
footer>div#foot_sns>ul>li>a:hover:before{ width:100%; height:100%; }
footer>div#foot_sns>ul>li>a>img{position: absolute; top:0; left:0; right: 0;bottom: 0; margin:auto; display:inline-block; width:60%; height:60%; text-align:center; z-index: 1;}

footer>div#foot_copy{ padding:5em 0 0 0; }
footer>div#foot_copy>a>img{ width:20em; padding:4em; border: 1px solid #fff; }
footer>div#foot_copy>p{ font-size: .8em; color:#c7c7c7; padding-top:3em; }
@media screen and (max-width: 768px) {

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



/*--topボタン--*/
#to_top{ position:fixed; width: 60px; height: 60px; right:20px; bottom:20px; display:block; background:rgba(0,0,0,.5); z-index: 90; border:1px solid #444; text-align:center; }
#to_top:after{content:"\f106"; font-family:"FontAwesome"; font-size:24px; display:block; line-height:58px; color:#cdb99c; }
@media screen and (max-width: 768px) {
	#to_top{ width: 6vw; height: 6vw; right:2vw; bottom:2vw; }
	#to_top:after{ font-size:2.4vw; line-height:5.8vw; }
}
@media screen and (max-width: 480px) {
	#to_top{ width: 12vw; height: 12vw; right:4vw; bottom:4vw; }
	#to_top:after{ font-size:4.8vw; line-height:10.6vw; }
}

a.bt_reserve{ display: block; width: 100%; max-width: 500px; margin:1em auto; background: #000; color:#fff; text-align: center; padding:.5em 0; }
a.bt_reserve:hover{ opacity: .8; }

.content{ padding:0; }
@media screen and (max-width: 768px) {
	.content{ padding:0; }
}
@media screen and (max-width: 480px) {
	.content{ padding:0; }
}


.content h2{ font-size:3.0em; font-family:"Cardo"; }
.content .bt{ display:block; width:100%; line-height:50px; background:#fff; text-align: center; position: relative; border: 1px solid #222; }
.content .bt:before{ content:""; position: absolute; top:0; right:0; width:100%; height:100%; background:#222; transition: all .3s; z-index:2; }
.content .bt:after{ content:"\f138"; font-family:FontAwesome; position: absolute; display:inline-block; right:15px; z-index:1; color:#af9e78; }
.content .bt>span{ color:#fff; font-family:"Noto Serif JP"; position: relative; z-index:3; }
.content .bt:hover{ border: 1px solid #af9e78; }
.content .bt:hover>span{ color:#af9e78; }
.content .bt:hover:before{ width:0; }
@media screen and (max-width: 768px) {
	.content .bt{ line-height:5vw; }
	.content .bt:after{ right:1.5vw; }
}
@media screen and (max-width: 480px) {
	.content h2{ font-size:2.0em; }
	.content .bt{ line-height:12vw; }
	.content .bt:after{ right:3vw; }
}

.content #contact{ background:#666; color:#fff; padding:150px 0; position: relative; overflow: hidden;  }
.content #contact:before{ content:""; display: block; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(transparent, #999); z-index:1; }
.content #contact>div:nth-of-type(1){ position: absolute; top:0; left:0; width:100%; height:100vh; background:url("./img/inc_contact.jpg") center center no-repeat; background-size:cover; z-index:0; }
.content #contact>div:nth-of-type(2){ width:100%; max-width:1000px; margin:0 auto; text-align: center; position: relative; z-index:2;}
.content #contact>div>h2{ text-shadow: 1px 1px 5px rgba(0,0,0,.5); }
.content #contact>div>p{ font-family: 'Noto Serif JP'; margin-bottom:50px; text-shadow: 1px 1px 3px rgba(0,0,0,.5); }
.content #contact>div>a{ max-width:400px; margin:0 auto; }
@media screen and (max-width: 768px) {
	.content #contact{ padding:15vw 0; }
	.content #contact>div>p{ margin-bottom:5vw; }
	.content #contact>div>a{ max-width:40vw; }
}
@media screen and (max-width: 480px) {
	.content #contact{ padding:30vw 0; }
	.content #contact>div>p{ margin-bottom:10vw; }
	.content #contact>div>a{ max-width:80%; }
}

.inview.fadein{ opacity:0; transition: opacity 2.5s;  }
.inview.fadein.view{ opacity:1; }
.inview.fadeup{ opacity:0; transform:translateY(50px); transition: all 2.5s; }
.inview.fadeup.view{ opacity:1; transform:translateY(0); }





/* top page */
article#mainvisual{ position: relative; width:100%; height:100vh; border: 10px solid #fff; display:flex; flex-wrap: wrap; justify-content: center; align-items:center; align-content:center; overflow: hidden; }
article#mainvisual:before{ content:""; display: block; position: absolute; width:100%; height:100%; background: radial-gradient(transparent, #000); z-index:1; }
article#mainvisual div{ position: absolute; top:0; left: 0; width: 100%; height: 100vh; background:url("./img/main_visual.jpg") center center; background-size:cover; z-index:0; }
article#mainvisual dl{ position: relative; z-index:2; color:#fff; }
article#mainvisual dl dt{ font-size:1.5em; text-align: center; text-shadow: 2px 2px 10px rgba(0,0,0,1); }
article#mainvisual dl dt span{  font-size:3em; font-family: 'Noto Serif JP'; }
article#mainvisual dl dd{ text-align: center; text-shadow: 2px 2px 5px rgba(0,0,0,.5); }
article#mainvisual dl dd span{ display: block; font-size:1.3em; }
@media screen and (max-width: 768px) {
	article#mainvisual dl dt{ text-shadow: 2px 2px 1vw rgba(0,0,0,1); }
	article#mainvisual dl dd{ text-align: center; text-shadow: 2px 2px .5vw rgba(0,0,0,.5); }
}
@media screen and (max-width: 480px) {
	article#mainvisual{ height:80vh; }
	article#mainvisual dl dt{ font-size:1.5em; text-shadow: 2px 2px 1vw rgba(0,0,0,1); padding:5vw 0; }
	article#mainvisual dl dt span{ display:block;  font-size:1.2em; font-family: 'Noto Serif JP'; line-height:1.0em; }
	article#mainvisual dl dd{ text-align: center; text-shadow: 2px 2px .5vw rgba(0,0,0,.5); }
	article#mainvisual dl dd span{ font-size:1.0em; }
}





.content#top #about{ padding:100px 0; }
.content#top #about>dl{ display:table; width:100%; max-width:1000px; margin:0 auto; table-layout: fixed; border-collapse: separate; border-spacing:0 50px; }
.content#top #about>dl>dt{ display:table-cell; text-align: center; vertical-align: middle; border-right: 1px solid #cccc; }
.content#top #about>dl>dt h2{ color:#b9b9b9; }
.content#top #about>dl>dd{ display:table-cell; padding:50px 50px; }
.content#top #about>dl>dd>p{ padding:10px 10px 30px 10px; font-family: 'Noto Serif JP'; }
@media screen and (max-width: 768px) {
	.content#top #about{ padding:10vw 0; }
	.content#top #about>dl{ border-spacing:0 5vw; }
	.content#top #about>dl>dd{ display:table-cell; padding:5vw 5vw; }
	.content#top #about>dl>dd>p{ padding:1vw 1vw 3vw 1vw; }
}
@media screen and (max-width: 480px) {
	.content#top #about{ padding:10vw 0; }
	.content#top #about>dl{ display:block; width:90%; margin:0 auto; padding:5vw 0; }
	.content#top #about>dl>dt{ display:block; border:0; border-bottom: 1px solid #ccc; }
	.content#top #about>dl>dd{ display:block; padding:5vw; text-align: center; }
	.content#top #about>dl>dd>p{ padding:1vw 1vw 3vw 1vw; }
}

.content#top #menu{ padding:100px 0; position: relative; overflow: hidden; color:#fff; }
.content#top #menu:before{ content:""; position: absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,.3); z-index:1; }
.content#top #menu>div:nth-of-type(1){ position: absolute; top:0; left:0; width:100%; height:150vh; background:url("./img/top_menu.jpg") center center no-repeat; background-size:cover; z-index:0; }
.content#top #menu>div:nth-of-type(2){ width:100%; max-width:600px; margin:0 auto; position: relative; z-index:2; padding:50px; }


.content#top #menu>div *{ font-family: 'Noto Serif JP'; }
.content#top #menu>div>h3{ font-size: 1.5em; margin-top:1em; padding:0 1em; background: rgba(255,255,255,.2); }
.content#top #menu>div>div{ border: 1px solid rgba(255,255,255,.2); padding:1em; }
.content#top #menu>div>div table{ width: 100%; }
.content#top #menu>div>div table th{ width: 50%; text-align: left; }
.content#top #menu>div>div table td{ width: 50%; text-align: right; }
@media screen and (max-width: 480px) {
.content#top #menu>div:nth-of-type(1){ height:200vh; }
}



.content#top #access{ padding:150px 0; }
.content#top #access dl{ width:100%; max-width:1000px; margin:0 auto; }
.content#top #access dl dt h2{ color:#b9b9b9; text-align: center; }
.content#top #access dl dd { text-align: center; }
.content#top #access dl dd div{ text-align: center; padding:3em 0; }
.content#top #access dl dd iframe{ display: block; width:100%; height:30em; border:0; }
@media screen and (max-width: 768px) {
	.content#top #access{ padding:15vw 0; }
}
@media screen and (max-width: 480px) {

}