@charset "UTF-8";
/* CSS Document */
html { width: 100%;height: 100%;margin: 0;	padding: 0;} 
body{width:100%;height: 100%;margin:0;padding:0;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;-webkit-text-size-adjust: 100%;}
body.fixed {	position: fixed;height: 100vh;}
.clearfix:after {	content: "";	clear: both;	display: block;}
:hover{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
.gothic{font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/*ローディング
#loading{  width: 100vw;  height: 100vh;  background-color: #fff;  display: flex;  justify-content: center;  align-items: center;  position: fixed;  top: 0;  left: 0;  z-index: 100;}
#loading img{  width: 100px;}
@media screen and (min-width: 768px) {  #loading img{    width: 120px;  }}
*/
.loading {  position: fixed;  z-index: 100;  top: 0;  right: 0;  bottom: 0;  left: 0;  background: #fff;}
.loading__img {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);text-align: center}
.loading__img img{width:50%;max-width:300px;}

/*サイト本体*/
header {width: 100%; height: 100vh;position: relative;	  }
header h1{width:500px;margin: 0;padding: 0;text-align: left; position:absolute;top:50px;right:50%;z-index:2;}
header h1 img{width:80px;}

.swiper-container {padding: 0px 0 ; position:absolute;top:0;left:0%;width:100%;height:100vh;z-index:0}
.swiper-container .swiper-wrapper{padding: 0px 0 ; margin: 0; width:100%;height:100vh;}   
.swiper-container .swiper-wrapper .swiper-slide{padding: 0px 0 ; margin: 0; width:100%;height:100vh;}
.swiper-container .swiper-wrapper #image01{background:url("../img/image01.jpg") no-repeat;background-position: 50% 50% ;background-size: cover}
.swiper-container .swiper-wrapper #image02{background:url("../img/image02.jpg") no-repeat;background-position: 50% 50% ;background-size:cover}
.swiper-container .swiper-wrapper .swiper-slide .swiper {  position: relative;  width:700px;height:100vh;margin: 0 auto;}

#text01-1 img,#text01-2 img,#text01-3 img,#text01-4 img,#text01-5 img,#text02-1 img,#text02-2 img,#text02-3 img{width: 100%;}
.swiper-slide-active #text01-1 {  animation:text01 2.5s ease 0s 1 normal;}
.swiper-slide-active #text01-2 {  animation:text01 4.0s ease 0s 1 normal;}
.swiper-slide-active #text01-3 {  animation:text01 5.5s ease 0s 1 normal;}
.swiper-slide-active #text01-4 {  animation:text01 7.0s ease 0s 1 normal;}
.swiper-slide-active #text01-5 {  animation:text01 8.5s ease 0s 1 normal;}
.swiper-slide-active #text02-1 {  animation:text01 2.0s ease 0s 1 normal;}
.swiper-slide-active #text02-2 {  animation:text01 4.0s ease 0s 1 normal;}
.swiper-slide-active #text02-3 {  animation:text01 6.0s ease 0s 1 normal;}
@keyframes text01{0%,25%{transform:translateX(-10px);opacity:0;}100%{transform:translateX(0px);opacity: 1; }}

/*通常コンテンツ*/
main{width: 100%;padding:50px 0;background: white;}

main #container{width:1000px;margin: 0 auto 2px auto;}

main #container #what{width:500px;height:500px; margin:0;padding:0;float: left}
main #container #what div{position:relative;width:100%;height: 100%;background: #1a2a32}
main #container #what div h2{position: absolute;top:40%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 30px;letter-spacing: 3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #container #what div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size: 20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
main #container #what div div{position: absolute;top: 0%;left: 0;margin: 0;padding: 0;	width:100%;	height:100%;background: rgba(26,42,50,0.8);z-index: 1}
main #container #what div figure{position: absolute;top: 0%;left: 0;	overflow: hidden;display: block;	width:100%;	height:100%; margin:0;padding:0;text-align: center; z-index:0}
main #container #what div figure img { object-fit: cover;width:100%;	height:100%;display: block;	transition: 0.5s;}

main #container div{width:498px;height:500px; margin:0;padding:0;float:right}

main #container div #message{width:100%;height:249px; margin:0 0 2px 0;padding:0;}
main #container div #message div{position:relative;width:100%;height: 100%;background: #492a29}
main #container div #message div h2{position: absolute;top:35%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 30px;letter-spacing: 3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #container div #message div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size: 20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
main #container div #message div div{position: absolute;top: 0%;left: 0;margin: 0;padding: 0;	width:100%;	height:100%;background: rgba(73,42,41,0.7);z-index: 1}
main #container div #message div figure{position: absolute;top: 0%;left: 0;	overflow: hidden;display: block;	width:100%;	height:100%; margin:0;padding:0;text-align: center; z-index:0}
main #container div #message div figure img {object-fit: cover;	width:100%;	height:100%; display: block;	transition: 0.5s;}

main #container div #course{width:100%;height:249px ; margin:0px 0 0 0;padding:0;}
main #container div #course div{position:relative;width:100%;height: 100%;background: #5e624f}
main #container div #course div h2{position: absolute;top:28%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 30px;letter-spacing: 3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #container div #course div h3{position: absolute;top:66%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
main #container div #course div div{position: absolute;top: 0%;left: 0;margin: 0;padding: 0;	width:100%;	height:100%;background: rgba(94,98,79,0.7);z-index: 1}
main #container div #course div figure{position: absolute;top: 0%;left: 0;	overflow: hidden;display: block;	width:100%;	height:100%; margin:0;padding:0;text-align: center; z-index:0}
main #container div #course div figure img {  object-fit: cover;  	width:100%;	height:100%;display: block;	transition: 0.5s;}

main #sub{width:1000px;margin: 0 auto 50px auto;}

main #sub #column{width:500px;height:100px; margin:0 2px 2px 0;padding:0;float: left}
main #sub #column div{position:relative;width:100%;height: 100%;background: #282b3d}
main #sub #column div:hover{opacity: 0.5}
main #sub #column div h2{position: absolute;top:25%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 26px;letter-spacing:3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #sub #column div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}

main #sub #reservation{width:498px;height:100px; margin:0 0px 2px 0;padding:0;float: left}
main #sub #reservation div{position:relative;width:100%;height: 100%;background: #280018}
main #sub #reservation div:hover{opacity: 0.5}
main #sub #reservation div h2{position: absolute;top:25%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 26px;letter-spacing:3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #sub #reservation div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}

main #sub #access{width:500px;height:100px; margin:0 2px 0 0;padding:0;float: left}
main #sub #access div{position:relative;width:100%;height: 100%;background: #7d6536}
main #sub #access div:hover{opacity: 0.5}
main #sub #access div h2{position: absolute;top:25%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 26px;letter-spacing:3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #sub #access div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}

main #sub #contact{width:498px;height:100px; margin:0;padding:0;float: left}
main #sub #contact div{position:relative;width:100%;height: 100%;background: #7d6536}
main #sub #contact div:hover{opacity: 0.5}
main #sub #contact div h2{position: absolute;top:25%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:26px;letter-spacing:3px;font-weight: normal;	transition: 0.5s;z-index: 2}
main #sub #contact div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}

main #banner{width:1000px;margin: 0 auto;}
main #banner a img{height:88px;}
main #banner a:hover{opacity:0.5;}

main article section div a{display: block;position: absolute;top: 0;left: 0;height:100%; width: 100%;z-index: 3 }
main article section div:hover{cursor: pointer}
main article section div:hover h2,main article section div:hover h3{opacity: 0.5;transform: scale(0.95, 0.95);}
main article section div:hover div{display: none}
main article section div:hover figure img{opacity: 0.1;	transform: scale(1.1, 1.1);}

footer{width:100%;padding:20px 0;text-align:center;background:#5e624f;}
footer small{font-size:12px;color:white;vertical-align: top}
footer small img{width:120px;padding-left: 4px;}

#page-top{ display:block;width:70px;height:54px;padding-top:16px; font-size:24px;text-align: center;text-decoration: none; color:white;position:fixed;right:20px;bottom:20px;background: #433a2b; z-index: 9999;}
#page-top:hover{opacity:0.5;}

/**アニメーション******************/
.animation,.animation2{}
.fadeInDown { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.0s; -ms-animation-duration:1.0s; animation-duration:1.0s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important;}
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); } 30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); }}
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } 30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }}
.fadeInUp { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.8s; -ms-animation-duration:1.8s; animation-duration:1.8s; -webkit-animation-name:fadeInUp; animation-name:fadeInUp; visibility: visible !important;}
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); }30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); }}
@keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }}


@media screen and (min-width:1051px) {
    .button,header article{display: none}
  
    #text01-1{position:absolute; width:35px;left:490px;top:15%;}
    #text01-2{position:absolute; width:35px;left:410px;top:15%;}
    #text01-3{position:absolute; width:35px;left:330px;top:15%;}
    #text01-4{position:absolute; width:35px;left:250px;top:15%;}
    #text01-5{position:absolute; width:35px;left:170px;top:15%;}
    
    #text02-1{position:absolute; width:35px;left:45%;top:15%;}
    #text02-2{position:absolute; width:70px;left:32%;top:15%;}
    #text02-3{position:absolute; width:35px;left:20%;top:15%;}
    /*
    #text01-1{position:absolute; width:28px;left:490px;top:10%;}
    #text01-2{position:absolute; width:28px;left:410px;top:10%;}
    #text01-3{position:absolute; width:28px;left:330px;top:10%;}
    #text01-4{position:absolute; width:28px;left:250px;top:10%;}
    #text01-5{position:absolute; width:28px;left:170px;top:10%;}
    
    #text02-1{position:absolute; width:28px;left:40%;top:10%;}
    #text02-2{position:absolute; width:58px;left:30%;top:10%;}
    #text02-3{position:absolute; width:58px;left:18%;top:10%;}
    */    
	
	main #book{background:#F6F3EA;padding:50px 0;margin: 0 auto 50px auto}
	main #book #inner{width: 1000px;margin: 0 auto;}
	main #book #inner p{text-align:center;font-size: 22px;letter-spacing: 2px;color:#282b3d;}
	main #book #inner p span{display:block;font-size: 30px;}
	main #book #inner figure{width:100%;margin: 0 auto 30px auto;padding: 0px 0;text-align: center}
	main #book #inner figure img{box-shadow:0px 1px 5px #888082; }
	main #book #inner a{display: block;width:500px;margin: 0 auto;padding: 20px 0;background:#282b3d;color: white; text-align:center;font-size: 20px;letter-spacing: 2px;text-decoration: none;}
	main #book #inner a:hover{ opacity: 0.5;}
}

@media screen and (min-width:701px) and ( max-width:1050px) {
    .button,header article{display: none}
   
    header h1{width:80px;margin: 0;padding: 0;text-align: left; position:absolute;top:50px;right:inherit;left: 5%; z-index:2;}
    header h1 img{width:100%;}
    
    .swiper-container {padding: 0px 0 ; position:absolute;top:0;left:0%;width:100%;height:100%;z-index:0}
    .swiper-container .swiper-wrapper{padding: 0px 0 ; margin: 0; width:100%;height:100%;}   
    .swiper-container .swiper-wrapper .swiper-slide{padding: 0px 0 ; margin: 0; width:100%;height:100%;}
    .swiper-container .swiper-wrapper #image01{background:url("../img/image01.jpg") no-repeat;background-position: 50% 100% ;background-size:cover}
    .swiper-container .swiper-wrapper #image02{background:url("../img/image02.jpg") no-repeat;background-position: 50% 00% ;background-size:cover}
    .swiper-container .swiper-wrapper .swiper-slide .swiper {  position: relative;  width:40%;height:100%;margin: 0 auto;}
    
    #text01-1{position:absolute; width:30px;left:85%;top:12%;}
    #text01-2{position:absolute; width:30px;left:65%;top:12%;}
    #text01-3{position:absolute; width:30px;left:45%;top:12%;}
    #text01-4{position:absolute; width:30px;left:25%;top:12%;}
    #text01-5{position:absolute; width:30px;left:5%;top:12%;}
    
    #text02-1{position:absolute; width:30px;left:65%;top:12%;}
    #text02-2{position:absolute; width:60px;left:38%;top:12%;}
    #text02-3{position:absolute; width:30px;left:13%;top:15%;}
        
    main #container{width:96%;margin: 0 auto 2px auto;}
    
    main #container #what{width:50%;height:300px; margin:0;padding:0;float: left}
    main #container #what div h2{position: absolute;top:35%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 30px;letter-spacing: 3px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #container #what div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size: 20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #container div{width:49.8%;height:300px; margin:0;padding:0;float:right}
    
    main #container div #message{width:100%;height:49.9%; margin:0 0 0.2% 0;padding:0;}
    main #container div #message div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 30px;letter-spacing: 3px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #container div #message div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size: 20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #container div #course{width:100%;height:49.9% ; margin:0px 0 0 0;padding:0;}
    main #container div #course div h2{position: absolute;top:18%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:28px;letter-spacing: 3px;line-height: 32px; font-weight: normal;	transition: 0.5s;z-index: 2}
    main #container div #course div h3{position: absolute;top:60%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
        
    main #sub{width:96%;margin: 0 auto 50px auto;}
    
    main #sub #column{width:50%;height:120px; margin:0 0.2% 2px 0;padding:0;float: left}
    main #sub #column div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #column div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #sub #reservation{width:49.8%;height:120px; margin:0 0% 2px 0;padding:0;float: left}
    main #sub #reservation div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #reservation div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}

    main #sub #access{width:50%;height:120px; margin:0 0.2% 0 0;padding:0;float: left}
    main #sub #access div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #access div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}

    main #sub #contact{width:49.8%;height:120px; margin:0;padding:0;float: left}
    main #sub #contact div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #contact div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:3px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #banner{width:50%;margin: 0 auto;}
    main #banner a img{width: 100%; height:auto;}

    main #book{background:#F6F3EA;padding:50px 0;margin: 0 auto 50px auto}
	main #book #inner{width:90%;margin: 0 auto;}
	main #book #inner p{text-align:center;font-size: 20px;letter-spacing: 1px;color:#282b3d;}
	main #book #inner p span{display:block;font-size: 30px;}
	main #book #inner figure{width:80%;margin: 0 auto 30px auto;padding: 0px 0;text-align: center}
	main #book #inner figure img{width:100%;box-shadow:0px 1px 5px #888082; }
	main #book #inner a{display: block;width:500px;margin: 0 auto;padding: 20px 0;background:#282b3d;color: white; text-align:center;font-size: 20px;letter-spacing: 2px;text-decoration: none;}
	main #book #inner a:hover{ opacity: 0.5;}
}

@media screen and (max-width:700px) {
    .loading__img img{width:50%;max-width:200px;}
    
    header article{width:160px;height: 80px; margin:0;padding:0px 0;position: fixed;top:0;right: 0;z-index:5}
    header article a:hover{opacity: 0.5}
    
    header article > a{display: block; text-decoration:none;width:80px;height:50px;padding:30px 0 0 0px;margin: 0;float: left;/*position: absolute;top:0px;right: 80px;*/background:rgba(40,0,24,1.0);text-align: center;letter-spacing: 0px; font-size:18px;color: white; cursor:pointer;}
        
    header article nav{display: none;	width: 100%;	height:100vh;	position:fixed;	top:80px;left: 0;background:rgba(255,255,255,0.9);}
    header article nav div{width:100%;margin:0 auto;padding:0;position: fixed;top: 80px;left:0%;height:75vh;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}
    
    header article nav div #access{display:block;text-decoration:none;width:87%;margin:0 auto 2px auto;padding:16px 0 16px 3%;background:#7d6536; font-size:16px;letter-spacing:2x;color:white;border-radius: 5px;}
    header article nav div #contact{display: block; text-decoration:none;width:87%; margin:0 auto 0px auto;padding:16px 0 16px 3%;background:#7d6536;font-size: 16px;letter-spacing:2x;background-size:16px auto;color: white;border-radius: 5px;}
    header article nav div #reservation{display: block; text-decoration:none;width:87%; margin:0 auto 2px auto;padding:16px 0 16px 3%;font-size: 16px;letter-spacing:2x;background: #280018;font-size: 16px;letter-spacing:2px;color: white;border-radius: 5px;}
    header article nav div #column{display: block; text-decoration:none;width:87%; margin:0 auto 2px auto;padding:16px 0 16px 3%;font-size: 16px;letter-spacing:2x;background:#282b3d;font-size: 16px;letter-spacing:2px;color: white;border-radius: 5px;}
    
    header article nav div ul{margin:10px 0 0px 0;padding: 0;list-style: none}
    header article nav div ul li{width: 90%; margin: 0 auto 2px auto;font-size:16px;letter-spacing: 2px;}
    header article nav div ul li a{display: block; text-decoration:none;padding:16px 0% 16px 3%;/*border-bottom: 1px dashed #5e624f;color: #5e624f;*/color: white;border-radius: 5px; background:#5e624f }
    
    .button{display:block;/*position: fixed;	right:0%;top:0px;*/width:80px;height:80px;float: right}
    .button div{position: relative;right:0%;top:0px;width: 80px;height:60px;padding:20px 0 0 0px;margin: 0 0 0 auto;cursor:pointer;text-align: center;letter-spacing: 1px; font-size:14px;color: white; background:#5e624f;}
    .button div:hover{opacity: 0.5;}
    .button div span {display:block;position: absolute;	height:2px;border-radius: 2px;	width:50%;	background:white;right:25%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button div span:nth-child(1) {	top:52%;}
    .button div span:nth-child(2) {	top:60%;}
    .button div span:nth-child(3) {	top:68%;}    
    
    .open .button div{ background: white;} 
    .open .button div span{display:block;}
    .open .button div span:nth-child(1) {	top: 50%;	-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg); background:#5e624f}
    .open .button div span:nth-child(2) {	width: 0;	left: 50%;}
    .open .button div span:nth-child(3) {	top:50%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg); background:#5e624f}
    .open nav {	display: block;	animation-duration: 0.6s;	animation-name: fade-in;z-index:4;} 
    .open .button{background:rgba(94,98,79,0.9);}
    
    @keyframes fade-in { from { opacity:0.1;}        to { opacity:1;}    }    
    
    header h1{width:40%; margin: 0;padding: 0;text-align: left; position:absolute;top:30px;right:50%;z-index:2;}
    header h1 img{width: 50px;}
    
    .swiper-container {padding: 0px 0 ; position:absolute;top:0;left:0%;width:100%;height:100vh;z-index:0}
    .swiper-container .swiper-wrapper{padding: 0px 0 ; margin: 0; width:100%;height:100%;}   
    .swiper-container .swiper-wrapper .swiper-slide{padding: 0px 0 ; margin: 0; width:100%;height:100%;}
    .swiper-container .swiper-wrapper #image01{background:url("../img/image01.jpg") no-repeat;background-position: 50% 100% ;background-size:cover}
    .swiper-container .swiper-wrapper #image02{background:url("../img/image02.jpg") no-repeat;background-position: 50% 00% ;background-size:cover}
    .swiper-container .swiper-wrapper .swiper-slide .swiper {  position: relative;  width:60%;height:100%;margin: 0 auto;}
    
    #text01-1{position:absolute; width:25px;left:88%;top:120px;}
    #text01-2{position:absolute; width:25px;left:73%;top:120px;}
    #text01-3{position:absolute; width:25px;left:58%;top:120px;}
    #text01-4{position:absolute; width:25px;left:43%;top:120px;}
    #text01-5{position:absolute; width:25px;left:28%;top:120px;}
    
    #text02-1{position:absolute; width:25px;left:75%;top:120px;}
    #text02-2{position:absolute; width:50px;left:50%;top:120px;}
    #text02-3{position:absolute; width:25px;left:30%;top:120px;}
    
    main {padding:30px 0;}
    
    main #container{width:90%;margin: 0 auto 0px auto;}
    
    main #container #what{width:100%;height:150px; margin:0 auto 2px auto;padding:0;float:inherit}
    main #container #what div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:24px;letter-spacing: 0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #container #what div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size: 20px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #container div{width:100%;height:auto; margin:0;padding:0;float:inherit}
    
    main #container div #message{width:100%;height:150px; margin:0 auto 2px auto;padding:0;}
    main #container div #message div h2{position: absolute;top:30%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:24px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #container div #message div h3{position: absolute;top:55%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size: 20px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #container div #course{width:100%;height:150px ; margin:0 auto 2px auto;padding:0;}
    main #container div #course div h2{position: absolute;top:20%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:24px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #container div #course div h3{position: absolute;top:70%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:20px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}
        
    main #sub{width:90%;margin: 0 auto 30px auto;}
    
    main #sub #column{width:100%;height:80px; margin:0 auto 2px auto;padding:0;float:inherit}
    main #sub #column div h2{position: absolute;top:20%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #column div h3{position: absolute;top:50%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:18px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #sub #reservation{width:100%;height:80px; margin:0 auto 2px auto;padding:0;float:inherit}
    main #sub #reservation div h2{position: absolute;top:20%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #reservation div h3{position: absolute;top:50%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:18px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}

    main #sub #access{width:100%;height:80px; margin:0 auto 2px auto;padding:0;float:inherit}
    main #sub #access div h2{position: absolute;top:20%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size: 22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #access div h3{position: absolute;top:50%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:18px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}

    main #sub #contact{width:100%;height:80px; margin:0 auto 2px auto;padding:0;float:inherit}
    main #sub #contact div h2{position: absolute;top:20%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: white;font-size:22px;letter-spacing:0px;font-weight: normal;	transition: 0.5s;z-index: 2}
    main #sub #contact div h3{position: absolute;top:50%;left:0;width:100%;margin: 0;padding: 0; text-align: center; color: #bbbaaa;font-size:18px;letter-spacing:0px;font-weight: normal;transition: 0.5s;z-index: 2}
    
    main #banner{width:90%;margin: 0 auto;}
    main #banner a img{width: 100%; height:auto;}
	
	main #book{background:#F6F3EA;padding:30px 0;margin: 0 auto 30px auto}
	main #book #inner{width:100%;margin: 0 auto;}
	main #book #inner p{width:90%;margin: 0 auto 20px auto;padding: 0px 0;text-align:center;font-size: 15px;letter-spacing: 1px;color:#282b3d;}
	main #book #inner p span{display:block;font-size: 20px;}
	main #book #inner figure{width:70%;margin: 0 auto 30px auto;padding: 0px 0;text-align: center}
	main #book #inner figure img{width:100%;box-shadow:0px 1px 5px #888082; }
	main #book #inner a{display: block;width:80%;margin: 0 auto;padding: 20px 0;background:#282b3d;color: white; text-align:center;font-size: 18px;letter-spacing: 0px;text-decoration: none;}
	main #book #inner a:hover{ opacity: 0.5;}
    
    #page-top{ display:block;width:70px;height:54px;padding-top:16px; font-size:24px;text-align: center;text-decoration: none; color:white;position:fixed;right:20px;bottom:80px;background: #433a2b; z-index: 9999;}
    footer{width:100%;padding:14px 0 80px 0 !important;text-align:center;background:#5e624f;}
}

/*TEL*/
@media screen and (min-width:701px){
	.footer_area{		display: none;}	
}
@media screen and (max-width:700px) {
    .footer_area {    position: fixed;    bottom: 0;    left: 0;    width: 100%;    background-color: rgba( 26, 42, 50, 0.9);	z-index: 10000;}
    .footer_area .footer_area_inner {/*position: relative;*/ width:90%;    margin: 0px auto;    padding: 10px 0;	}
    /*
    .footer_area .footer_area_inner .footer_area_inner_btn {   width: 100%;   margin: 0px auto;    padding: 11px 0;    font-size: 20px;    font-weight: bold;    margin-left: 15px;	line-height: 1.3;    }
    */
    .inquiry_btn {float: left;background-color: #5e624f; -webkit-border-radius: 3px; display: block; color: #FFFFFF !important;text-align: center; text-decoration: none;width:49%;margin: 0 auto;padding: 15px 0 20px 0;    font-size: 18px;letter-spacing: 2px ;line-height: 18px;}
    .inquiry_btn:before{content:"";display:inline-block;width:18px;height:20px; margin:0px 10px 0 0; background:url("../img/tel02.png") no-repeat; background-position: 0% 100%;background-size:100% auto;}
    
    .inquiry_contact {float:right;  background-color:#7d6536; -webkit-border-radius: 3px; display: block; color: #FFFFFF !important;text-align: center; text-decoration: none;width:49%;margin: 0 auto;padding: 15px 0 20px 0;    font-size: 18px;letter-spacing: 2px ;line-height: 18px;}
    .inquiry_contact:before{content:"";display:inline-block;width:18px;height:20px; margin:0px 10px 0 0; background:url("../img/contact.png") no-repeat; background-position: 0% 100%;background-size:100% auto;}
    
    /*
    #siteBottom{	margin-bottom: 85px;}
    */
}