@charset "utf-8";

.mon { font-family: 'montserrat', sans-serif;}
.helvetica { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}
/*
a:visited,
a:link { color: inherit;}
*/


body { position: relative; min-width: 1200px; margin: 0 auto;}
.btns { display: block; width: 320px; border: 1px solid #9a8b68; padding: 25px 0; font-size: 14px; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; text-align: center; letter-spacing: 0.04em; color: #bdb28f; font-weight: 500;}
.btns:hover { background: #fff;}
.btns.white:hover { color: #fff; background: #9a8b68;}
.btns.top { fill:#bdb28f;}
.btns.top svg { width: 31px; height: auto;}
.btns.top:hover { fill: #fff; background: #9a8b68;}

.view { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-weight: 500; letter-spacing: 0.04em; color: #bdb28f; text-decoration: underline; text-decoration-color: #bdb28f; text-underline-offset: 9px;}


#fv { position: relative;}
#fv .scroll { position: absolute; bottom: 0; left: 40px; z-index: 2; font-size: 10px; letter-spacing: 0.4em; writing-mode: vertical-rl;}
#fv .scroll:after { content: ""; display: inline-block; width: 1px; height: 80px; background-color: #000; margin-top: 13px; animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}
#fv h2 { font-size: 20px; margin-bottom: 50px; font-weight: 500; letter-spacing: 0.2em; text-align: center;}
#fv h2 span { display: block; font-size: 60px; font-weight: 500; letter-spacing: 0; margin-bottom: 11px;}
#fv h2 img { display: block; margin: 0 auto 16px;}
#fv .fv { width: 90%; height: 400px; float: right;}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


.bg_grey { background: url(../images/common/pattern_01.png) left top;}



nav ol { width: 70%; display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; padding: 145px 0 63px;}
nav ol li { font-size: 10px; letter-spacing: 0.04em; color: #000;}
nav ol li:not(:last-of-type)::after { content: "-"; margin: 0 .6em; color: #000;}

#bread { padding: 20px 0 0 ; }
#bread ol li { display: inline-block; position: relative; padding-left: 32px;}
#bread ol li:first-child { padding: 0; }
#bread ol li:not(:first-child)::before { content: ""; width: 10px; height: 1px; background: #221815; position: absolute; top: 9px; left: 8px;}
#bread ol li a { font-size: 12px; }
#bread ol li strong { font-size: 12px;  }


.slick-slider { display: none;}
.slick-slider.slick-initialized { display: block;}


/*-------------- header --------------*/

header { /* position: fixed; */position: absolute; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 25px 40px 0; /* margin-bottom: -170px; */ min-width: 1200px; z-index: 100;}
header .h_l { position: relative; display: flex; align-items: center; z-index: 1;} 
header h1 { margin-top: 13px;}
header .h_l p { font-size: 12px; letter-spacing: 0.04em; line-height: 1.5; color: #fff; padding: 0 0 0 35px;}
header .h_l.black p { color: #000;}
header .h_r { display: flex; flex-flow: row-reverse; align-items: center;}
header .h_icn { display: flex; align-content: flex-start;}
header .h_icn a { display: block; width: 80px; padding: 5px 0 6px; text-align: center; border-right: 1px solid #898989;}
header .h_icn a:last-child { border-right: none;}
header .reservation { display: inline-block; width: 180px; line-height: 40px; text-align: center; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.2em; background-color: #8c0000; }

header a:visited,
header a:link{ color: #fff; }


header .menu { display: inline-block; position: relative; width: 42px; height: 22px; cursor: pointer; z-index: 99; margin-left: 20px;}
header .menu span { position: absolute; display: block; width: 100%; height: 2px; background-color: #fff; transition: 0.5s;}
header .menu span:nth-of-type(1) { top: 0;}
header .menu span:nth-of-type(2) { width: 80%; top: 10px;}
header .menu span:nth-of-type(3) { bottom: 0;}
header .menu p { font-size: 12px; color: #fff; position: absolute; bottom: -20px; left: 0; opacity: 1; font-weight: 300;}
header .menu.black span { background-color: #000;}
header .menu.black p { color: #000;}

header .menu.close span {}
header .menu.close span:nth-of-type(1) { transform: translate(0%,10px) rotate(45deg); background-color: #fff;}
header .menu.close span:nth-of-type(2) { opacity: 0;}
header .menu.close span:nth-of-type(3) { transform: translate(0%,-10px) rotate(-45deg); background-color: #fff;}


/*-------------- ヘッダースクロール --------------*/

header.scroll { position: fixed; background: #fff; padding: 20px 40px; animation: DownAnime 0.5s forwards;}
header.black.scroll { background: #000;}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

header.scroll h1 { margin-top: 0;}
header.scroll h1 img { width: 40px; height: auto;}
header.scroll .h_l p { padding-top: 0;}
/*-------------- ハンバーガーメニュー --------------*/

#modalArea { position: fixed; display: none; z-index: 99; width: 100%; height: 100vh; background: #000 ;}
#modalArea .menu { display: inline-block; position: relative; width: 42px; height: 22px; cursor: pointer; z-index: 99; margin-left: 20px;}
#modalArea .menu span { position: absolute; display: block; width: 100%; height: 2px; background-color: #fff; transition: 0.5s;}
#modalArea .menu span:nth-of-type(1) { top: 0; transform: translate(0%,10px) rotate(45deg); background-color: #fff;}
#modalArea .menu span:nth-of-type(2) { bottom: 0; transform: translate(0%,-10px) rotate(-45deg); background-color: #fff;}

#modalArea .flex { display: flex; justify-content: center;}
#modalArea .left { width: 50%; height: 100vh; background: url(../images/common/bg_menu2.jpg) no-repeat left center / cover;}
#modalArea .right { width: 50%; height: 100vh; text-align: center; color: #fff; padding: 90px 0; overflow: auto;}
#modalArea .right img { margin-bottom: 60px;}
#modalArea .right ul:before { display: block; content: ""; width: 500px; height: 1px; background: #313131; margin: 0 auto 60px;} 
#modalArea .right ul { margin-bottom: 57px;}
#modalArea .right li { }
#modalArea .right li p { font-size: 18px; color: gray; font-weight: 400; line-height: 2.667; letter-spacing: 0.04em;}
#modalArea .right li a { font-size: 18px; font-weight: 400; line-height: 2.667; letter-spacing: 0.04em;}
#modalArea .right li a:visited,
#modalArea .right li a:link{ color: #fff; }
#modalArea .right .btns { display: block; width: 320px; border: 0px; padding: 25px 0; margin: 0 auto; font-size: 16px; text-align: center; letter-spacing: 0.2em; color: #fff; font-weight: 700; background: #8c0000;}


/*-------------- stay --------------*/

#bottom_stay { padding: 111px 25px 100px; border-top: 1px solid #c9c9c9;}
#bottom_stay .flex { display: flex; justify-content: center; margin-bottom: 61px;}
#bottom_stay .flex div { width: 475px; padding: 51px 0 0px; text-align: center;}
#bottom_stay .flex div a { display: block;}
#bottom_stay .flex div p { font-size: 40px; font-weight: 700; letter-spacing: 0.2em; color: #fff; margin-bottom: 20px;}
#bottom_stay .flex div p img { display: block; margin: 13px auto 0; }
#bottom_stay .flex div .view { display: inline-block; border-bottom: 1px solid #bdb28f; padding-bottom: 10px;}
#bottom_stay .flex .stay { background: url(../images/common/pic_stay.jpg) no-repeat center top / cover;}
#bottom_stay .flex .day { background: url(../images/common/pic_dayuse.jpg) no-repeat center top / cover; margin: 0 20px;}
#bottom_stay .flex .dinner { background: url(../images/common/pic_denner.jpg) no-repeat center top / cover;}
#bottom_stay .btns { margin: 0 auto; padding: 22px 0;}



/*-------------- footer --------------*/

.access { padding: 100px 0 50px; background: url(../images/common/pattern_01.png) left top;}
.access h3 { font-size: 30px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 46px; text-align: center;}
.access h3 span { display: block; font-size: 16px; font-weight: 300; letter-spacing: 0.06em; margin-top: 17px;}
.access .flex { display: flex; justify-content: center;}
.access .flex a { display: block; margin: 0 20px; }
.access .flex a img {  margin-bottom: 26px; }
.access .flex a p { font-size: 19px; font-feature-settings: "palt"; font-weight: 500; letter-spacing: 0.08em;}
.access .flex a p img { margin: -4px 9px 0 0; margin-bottom: 0;}


footer { position: relative; background: #000 url(../images/common/bg_footer.jpg) no-repeat center center / cover; color: #fff; padding: 50px 0 30px;}
footer .footInner { width: 95%; margin: 0 auto;}
footer a:visited,
footer a:link { color: inherit;}
footer .fortop { position: absolute; top: 70px; right: 30px; font-size: 10px; letter-spacing: 0.1em;font-family: "athelas", serif; font-weight: 400; writing-mode: vertical-rl;}
footer .fortop:before { display: inline-block; content: ""; width: 1px; height: 80px; margin-bottom: 15px; background-color: #fff;}
footer .f_top { display: flex; align-items: center; margin-bottom: 80px; padding-bottom: 50px; border-bottom: 1px solid #626262;}
footer .f_top img { margin-right: 60px;}
footer .f_top p { font-size: 16px; line-height: 2; letter-spacing: 0.04em;}

footer .f_nav { display: flex; justify-content: space-between; margin-bottom: 80px;}
footer .f_nav p { font-size: 15px; line-height: 1.867; letter-spacing: 0.04em;}
footer .f_nav p span { display: block; margin-top: 15px;}
footer .f_nav nav { display: flex; justify-content: center; width: 660px;}
footer .f_nav nav div { border-left: 1px solid #626262; padding: 9px 45px 9px 40px;}
footer .f_nav nav p { position: relative; display: block; color: gray; font-size: 15px; line-height: 1; margin-bottom: 20px;}
footer .f_nav nav a { position: relative; display: block; color: #fff; font-size: 15px; margin-bottom: 20px;}
footer .f_nav nav a:last-child { margin-bottom: 0px;}
footer .f_nav nav p:before,
footer .f_nav nav p:after,
footer .f_nav nav a:before,
footer .f_nav nav a:after { content: "";}
footer .f_nav nav p:before,
footer .f_nav nav a:before { display: inline-block; width: 13px; height: 13px; border: 1px solid #fff; border-radius: 50%; vertical-align: -2px; margin-right: 10px;}
footer .f_nav nav p:after,
footer .f_nav nav a:after { position: absolute; top: 7.5px; left: 4px; border-top: solid 1px #fff; border-right: solid 1px #fff; width: 4px; height: 4px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}

footer .access_box,footer .access_box2 { display: flex; justify-content: center; align-items: center; width: 1100px; margin: 0 auto;}
footer .access_box a,footer .access_box2 a { display: block; width: 250px; font-size: 15px; text-align: center; background: #000; border: 1px solid #626262; margin: 0 10px 18px;}


footer .access_box2 { margin-bottom: 50px;}
footer .access_box2 a { margin-bottom: 0; background: #fff; line-height: 90px;}
footer .access_box .booking { background: #8c0000; border: 0px; padding: 20px 0 20px;}
footer .access_box .booking img { margin-bottom: 10px;}
footer .access_box a:nth-of-type(2) { padding: 17px 0 19px;}
footer .access_box a:nth-of-type(2) img { margin-bottom: 6px;}
footer .access_box a:nth-of-type(3) { padding: 18px 0 19px;}
footer .access_box a:nth-of-type(3) img { margin-bottom: 7px;}
footer .access_box .yorozu {  background: #fff; border: 0px; padding: 20px 0 20px; cursor: default;}
footer .access_box2 a:nth-of-type(1) { /* padding: 22px 0 21px; */}
footer .access_box2 a:nth-of-type(2) {/*  padding: 14px 0 12px; */ margin-bottom: 0;}
footer .access_box2 a:nth-of-type(3) { /* padding: 14px 0 19px; */ margin-bottom: 0;}
footer .access_box2 .yorozu { display: none;}

footer .access_box2 .nouzei { position: relative; background: #fff; /* padding: 30px 0 29px; */ margin-bottom: 0; cursor: pointer;}
footer .access_box2 .rakuten { position: relative; background: #fff; /* padding: 30px 0 29px; */ margin-bottom: 0; cursor: pointer;}

/*
footer .access_box2 .nouzei:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(83, 83, 83,0.9); z-index: 1;}
footer .access_box2 .nouzei p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); font-size: 20px; letter-spacing: 1.9em; font-weight: 500; color: #fff; white-space: nowrap; padding-left: 12%; z-index: 2;}
*/


footer .f_bottom { display: flex; justify-content: space-between; align-items: flex-end; flex-flow: row-reverse;}
footer .f_icn { text-align: center;}
footer .f_icn a { margin: 0 12.5px;}
footer .privacy { text-align: center; margin-bottom: 20px;}
footer .privacy a { font-size: 10px; font-weight: 400; letter-spacing: 0.04em; margin-right: 1em;}
footer .privacy a:last-child { padding-left: 1em; border-left: 1px solid #888;}
footer .copy { font-size: 10px; font-weight: 200; text-align: center;}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	
	body { min-width: auto;}
	#fv { }
	#fv h2 { font-size: 18px; margin-bottom: 20px;}
	#fv h2 span { font-size: 45px; margin-bottom: 15px;}
	#fv .fv { width: 90%; height: 200px;}

	#fv .scroll { display: none; position: absolute; bottom: 46px; left: 4%; z-index: 2;}
	#fv .scroll:after { content: ""; display: inline-block; width: 1px; height: 80px; background-color: #fff; margin-top: 13px; animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}
	
	.btns { display: block; width: 80%; margin: 0 auto; padding: 18px 0; font-size: 12px; background-color: #fff;}

	
		
	nav ol { width: 90%; display: flex; flex-wrap: wrap; list-style: none; padding: 115px 0 35px;}
	
	
	
	
	
	/*-------------- header --------------*/
	
	header { position: fixed; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 20px 13px 0; margin-bottom: -170px; min-width: auto; z-index: 100;}
	header h1 { margin-top: 0;}
	header h1 img { width: 80px; height: auto;}
	header .h_r { display: block;}
	header .h_rr { margin-bottom: 18px; text-align: right;}
	header .h_icn { display: flex;}
	header .h_icn a { display: block; width: auto; padding: 3px 18px;}
	header .h_icn a:first-child { padding-left: 16px;}
	header .h_icn a:last-child { padding-right: 0;}
	header .reservation { width: 111px; line-height: 30px; font-size: 12px;}
	
	header .menu { display: inline-block; position: relative; width: 35px; height: 17px; cursor: pointer; z-index: 99; margin-left: 15px;}
	header .menu span { position: absolute; display: block; width: 100%; height: 1px; background-color: #fff; transition: 0.5s;}
	header .menu span:nth-of-type(1) { top: 0;}
	header .menu span:nth-of-type(2) { width: 80%; top: 8px;}
	header .menu span:nth-of-type(3) { bottom: 0;}
	header .menu p { font-size: 8px; letter-spacing: 0.22em; bottom: -12px; left: 0; opacity: 1; font-weight: 300;}
	
	header .menu.close span:nth-of-type(1) { transform: translate(0%,7px) rotate(45deg); background-color: #fff;}
	
	
	/*-------------- ヘッダースクロール --------------*/

	header.scroll { background: #fff; padding: 20px 40px; animation: DownAnime 0.5s forwards;}
	header.black.scroll { background: #000;}
	
	@keyframes DownAnime{
	  from {
	  	opacity: 0;
		transform: translateY(-170px);
	  }
	  to {
	  	opacity: 1;
		transform: translateY(0);
	  }
	}
	
	header.scroll h1 { margin-top: 0;}
	header.scroll h1 img { width: 80px;}
	
	/*-------------- ハンバーガーメニュー --------------*/
	
	#modalArea { height: 102vh; background: #000 url(../images/common/bg_menu_sp.jpg) no-repeat left center / cover; overflow: scroll;}
	#modalArea .flex { display: block;}
	#modalArea .left { display: none;}
	#modalArea .right { width: 100%; padding-top: 44px; padding-bottom: 100px;}
	#modalArea .right img { width: 30%; height: auto; margin-bottom: 35px;}
	#modalArea .right ul:before { display: block; content: ""; width: 80%; background: #313131; margin: 0 auto 17px;} 

	#modalArea .right ul { margin-bottom: 21px;}
	#modalArea .right li { }
	#modalArea .right li p { font-size: 18px; line-height: 2.778;}
	#modalArea .right li a { font-size: 18px; line-height: 2.778;}
	#modalArea .right .btns { width: 75%; border: 0px; padding: 16px 0; margin: 0 auto; font-size: 15px; background: #8c0000;}
		
	/*-------------- stay --------------*/
	
	#bottom_stay { padding: 50px 0;}
	#bottom_stay .flex { display: block; margin-bottom: 50px;}
	#bottom_stay .flex div { width: 90%; margin: 0 auto; padding: 35px 0 33px;}
	#bottom_stay .flex div p { font-size: 30px; margin-bottom: 20px;}
	#bottom_stay .flex div p img { width: auto; height: 7px; margin-top: 13px; }
	#bottom_stay .flex div .view { font-size: 12px; margin-bottom: 0;}
	#bottom_stay .flex div .view img { width: auto; height: 8.5px;}
	#bottom_stay .flex .stay { background: url(../images/common/pic_stay.jpg) no-repeat center top / cover; margin-bottom: 20px;}
	#bottom_stay .flex .day { background: url(../images/common/pic_dayuse.jpg) no-repeat center top / cover; margin-bottom: 20px;}
	#bottom_stay .flex .dinner { background: url(../images/common/pic_denner.jpg) no-repeat center top / cover;}
	#bottom_stay .btns { width: 75%; margin: 0 auto; padding: 18px 0;}
	#bottom_stay .btns img { width: auto; height: 8.5px;}
	
	/*-------------- footer --------------*/
	
	.access { padding: 50px 0 50px;}
	.access h3 { font-size: 25px; margin-bottom: 20px;}
	.access h3 span { font-size: 12px; margin-top: 10px;}
	.access .flex { display: block;}
	.access .flex a { margin-bottom: 25px;}
	.access .flex a:last-child { margin-bottom: 0;}
	.access .flex a img { height: auto; width: 100%; margin-bottom: 10px;}
	.access .flex a p { font-weight: 400; font-size: 15px;}
	.access .flex a p img { width: 15px; height: auto; margin-right: 3px;}

	footer { position: relative; background-color: #000; color: #fff; padding: 44px 0 30px;}
	footer .footInner { width: 90%;}
	footer a:visited { color: inherit;}
	footer .fortop { position: absolute; top: 70px; right: 30px; letter-spacing: 0.1em; font-weight: 300; writing-mode: vertical-rl;}
	footer .f_top { display: block; margin-bottom: 40px; padding-bottom: 38px; text-align: center;}
	footer .f_top img { width: 34%; height: auto; margin: 0 auto 21px;}
	footer .f_top p { font-size: 13px; line-height: 1.769;  padding-top: 0;}

	footer .f_nav { display: block; margin-bottom: 50px;}
	footer .f_nav p { font-size: 12.5px; line-height: 1.8; margin-bottom: 50px;}
	footer .f_nav p span { font-size: 13.5px; margin-top: 14px;}
	footer .f_nav nav { display: flex; justify-content: space-between; width: 100%;}
	footer .f_nav nav div { border-left: 0px; padding: 0; width: 50%;}
	footer .f_nav nav p { font-size: 13px; line-height: 1; margin-bottom: 20px;}
	footer .f_nav nav a { font-size: 13px; margin-bottom: 20px;}
	footer .f_nav nav a:last-child { margin-bottom: 0px;}
	footer .f_nav nav p:before,
	footer .f_nav nav a:before { width: 10px; height: 10px; vertical-align: 0; margin-right: 8px;}
	footer .f_nav nav p:after,
	footer .f_nav nav a:after { top: 5px; left: 2.5px; width: 4px; height: 4px;}
	
	footer .f_nav nav .PC { display: none;}
	
	footer .access_box,footer .access_box2 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;}
	footer .access_box2 { margin-bottom: 50px;}
	footer .access_box a,footer .access_box2 a { display: flex; justify-content: center; align-items: center; width: 49%; text-align: center; margin: 0 0 10px;}
	footer .access_box2 a { display: block; line-height: 60px;}
	footer .access_box p { font-size: 12.5px; line-height: 1.8; text-align: left;}
	footer .access_box .booking { width: 100%; padding: 22px 0 20.5px;}
	footer .access_box .booking img { width: 17px; height: auto; margin: 0 8.5px 0 0;}
	footer .access_box a:nth-of-type(2) { padding: 9px 0;}
	footer .access_box a:nth-of-type(2) img { width: 18.5px; height: auto; margin: 0 6.5px 0 0;}
	footer .access_box a:nth-of-type(3) { padding: 9px 0;}
	footer .access_box a:nth-of-type(3) img { width: 20px; height: auto; margin: 0 8px 0 0;}
	footer .access_box .yorozu { display: none;}
	footer .access_box2 a:nth-of-type(1) { /* padding: 16px 0 15px; */}
	footer .access_box2 a:nth-of-type(1) img { width: 82px; height: auto;}
	footer .access_box2 a:nth-of-type(2) { /* padding: 12px 0; */ margin-bottom: 10px;}
	footer .access_box2 a:nth-of-type(2) img { width: 31px; height: auto;}
	footer .access_box2 a:nth-of-type(3) { /* padding: 14px 0 15px; */ margin-bottom: 10px;}
	footer .access_box2 a:nth-of-type(3) img { width: 86.5px; height: auto;}
	footer .access_box2 .yorozu {  background: #fff; border: 0px; display: block;}
	footer .access_box2 .nouzei { /* padding: 21.5px 0 21.5px; */ margin-bottom: 10px;}
	footer .access_box2 .nouzei img { width: 116px; height: auto;}
	footer .access_box2 .nouzei p { font-size: 13px; letter-spacing: 1.6em; font-weight: 500; color: #fff; padding-left: 12%;}
	footer .access_box2 .rakuten { position: relative; background: #fff; /* padding: 30px 0 29px; */ margin-bottom: 0;}
	footer .access_box2 .rakuten img { width: 116px; height: auto;}
	
	footer .f_bottom { display: block; }
	footer .f_icn { text-align: center; margin-bottom: 50px;}
	footer .f_icn a { margin: 0 15px;}
	footer .copy { line-height: 1.5; text-align: center;}
	
	
}