@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&display=swap");

/* ---------------------------------------------------
Base Layout
------------------------------------------------------ */
/*smooth scroll*/
html {scroll-behavior: smooth;}

/*common*/
#htlContents {min-width: auto !important; margin: 0 auto !important;}
#htlMainContent { width: 1920px !important; max-width: 100%; margin: 0 auto!important;}

#r_wrapper{position: relative; font-family: "游明朝", YuMincho, "ヒラギノ明朝ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 1.8;}

/*header*/
#r_header{ position: absolute; width: 1920px; top: 0; z-index:10; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); background: rgba(255, 255, 255, 0.8); z-index: 2; }
#r_header .inner { width: 1080px; height:75px; margin: 0 auto; position: relative;}
#r_header #h_logo { float: left; margin-top: 20px; display: block; }
#r_header #h_logo:hover { opacity: 0.75; }
#r_header #h_nav { float: right; margin-top: 22px; font-size: 0; text-align: center; text-align: center; display: flex; justify-content: space-between;}
#r_header #h_nav li { display: inline-block; font-size: 16px; padding: 0 10px; }
#r_header #h_nav li:last-child { padding-right: 0; }
#r_header #h_nav li a { color: #000; transition: color .6s ease-in-out; display: flex; flex-direction: column; justify-content: center; line-height: 1.5; letter-spacing: 0.02em; position: relative; border-bottom: 2px transparent solid;}
#r_header #h_nav #h_nav06 a { border-bottom: 2px #003078 solid; padding: 0 15px;}
#r_header #h_nav li a:hover { border-bottom: 2px #9b9782 solid; text-decoration: none; }

.meal #r_header #h_nav #h_nav01 a,
.bath #r_header #h_nav #h_nav02 a,
.room #r_header #h_nav #h_nav03 a,
.facilities #r_header #h_nav #h_nav04 a,
.access #r_header #h_nav #h_nav05 a { border-bottom: 2px #9b9782 solid; }

#visual #main_img { position: relative; height: 700px; width: 100%; }
#visual #main_img > p,
#visual #main_img > h1 { left: 0; position: absolute; top: 0; z-index: 1; }
#visual #main_img > h1 { -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; white-space: nowrap; color: #fff; font-size: 40px; text-shadow: 0 0 10px #000; }
#visual #main_img > p { -webkit-transform: none; -ms-transform: none; transform: none; width: fit-content; top: calc(50% + 45px); left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; white-space: nowrap; background: #000; color: #fff; padding: 0 40px; font-family: 'Marcellus', serif; font-size: 11px; }
#visual #main_img .photo { width: 1920px; position: relative; overflow: hidden; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
#visual #main_img .photo img { width: 100%; height: 100%; object-fit: cover;}

#r_contents img { width: 100%; height: auto; object-fit: contain;}
#r_contents .anchor { padding-top: 120px; margin-top: -120px; }

/*footer*/
#r_footer_wrap { padding-top: 350px; position: relative; }
#r_footer_wrap:before { content: ''; background: url(../img/common/f_bg.jpg) bottom no-repeat; background-size: cover; width: 100%; height: 350px; position: absolute; top: 0; left: 0; }
#r_footer_wrap #pagetop { display: block; text-align: center; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", "Osaka", "Verdana", "Helvetica", "Arial", "ＭＳ Ｐゴシック", sans-serif; color: #438cd0; font-size: 13px; position: absolute; top: 30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
#r_footer_wrap #pagetop span { display: block; margin: 10px auto 0; }
#r_footer_wrap #f_top { padding: 50px 0; }
#r_footer_wrap #f_nav { width: 700px; padding: 0 0 0 50px; margin: 0 auto; position: relative; }
#r_footer_wrap #f_nav ul { font-size: 0; }
#r_footer_wrap #f_nav ul li { display: inline-block; text-align: left; margin-bottom: 10px; vertical-align: top; width: 21%; }
#r_footer_wrap #f_nav ul li:nth-child(4n + 1) { width: 37%; }
#r_footer_wrap #f_nav ul li a { font-size: 14px; background: url(../img/common/nav_arrow_black.png) no-repeat left; padding-left: 15px; color: #000; }
#r_footer_wrap #f_bottom { background: #000; padding: 40px 0 50px; color: #fff; }
#r_footer_wrap #f_container { width: 1100px; padding: 0 10px; box-sizing: border-box; margin: 0 auto; position: relative; display: table; }
#r_footer_wrap #f_logo { padding-top: 10px; display: table-cell; vertical-align: top; width: 53%; position: relative; }
#r_footer_wrap #f_logo a { display: inline-block; margin-right: 35px; vertical-align: middle; }
#r_footer_wrap #f_logo a:hover { opacity: 0.75;}
#r_footer_wrap #f_logo address { display: inline-block; font-size: 14px; vertical-align: middle; font-style: normal; }
#r_footer_wrap #f_reserve { display: table-cell; vertical-align: middle; text-align: center; width: 47%; background: #1c1c1c; padding: 25px 20px; }
#r_footer_wrap #f_tel { float: left; }
#r_footer_wrap #f_tel .tel-link { font-size: 20px; line-height: 1.2; color: #fff; display: inline-block; }
#r_footer_wrap #f_tel .tel-link em { font-size: 30px; font-style: normal;}
#r_footer_wrap #f_tel p { font-size: 12px; margin-top: 10px; text-align: left; }
#r_footer_wrap #f_tel .tel-link + p { text-align: right; margin: 0; }
#r_footer_wrap #f_reserve ul { float: right; width: 220px; }
#r_footer_wrap #f_reserve ul li:first-child { margin-bottom: 5px; }
#r_footer_wrap #f_reserve ul li a { display: block; font-size: 17px; height: 50px; line-height: 50px; color: #fff; }
#r_footer_wrap #f_reserve ul li a:hover { text-decoration: none; opacity: 0.75; }
#r_footer_wrap #f_reserve ul li:first-child a { background: #1e53a4; }
#r_footer_wrap #f_reserve ul li:last-child a { background: #5b5b5b; }
#copyright { font-size: 12px; color: #898787; position: absolute; bottom: auto; left: calc(50% - 290px); }


/* ---------------------------------------------------
Top page
------------------------------------------------------ */

.home #r_header { background: none; }
.home #r_contents { padding: 60px 0 0;}

/*main slide*/
.home #r_header #h_logo img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.home #r_header #h_nav li a { color: #fff; }
.home #visual { margin: 0 auto; }
.home #visual #main_img { width: 100%; height: 900px; }
.home #visual #main_img .vis { left: 0; position: absolute; top: 0; z-index: 1; width: 100%; }
.home #visual #main_img .vis img { width: 100%; height: 100%; object-fit: cover;}
.home #visual #main_img #slide { position: relative; overflow: hidden; width: 1920px; height: 900px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}
.home #visual #main_img > h1 { margin-top: 160px; }
.home #visual #main_img > h1 img { width: 325px; height: auto; }
.home #visual #main_img > p { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; z-index: 1; font-size: 22px; line-height: 2.2; letter-spacing: 0.05em; left: 50%; top: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-shadow: 0 0 10px #000; margin-top: -180px; background: transparent; padding: 0; width: auto; text-align: left; font-family: "游明朝", YuMincho, "ヒラギノ明朝ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.home #main_img .logo { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);  width: 330px; text-align: center; }
.home #main_img .logo img { width: 100%;}

.home #rec .rec_list { width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; padding-bottom: 100px; }
.home #rec .rec_list > div { width: 340px; display: flex; flex-direction: column; }
.home #rec .rec_list > div a { display: flex; flex-direction: column; height: 100%; }
.home #rec .rec_list > div .txt { margin: 10px 0 20px; font-size: 14px; color: #000; }
.home #rec .rec_list > div .btn { margin: auto 0 0 0; background: #1e53a4; color: #fff; text-align: center; height: 35px; display: flex; align-items: center; justify-content: center;}
.home #rec .rec_list > div a:hover { text-decoration: none; opacity: 0.75; }


/* ---------------------------------------------------
Low page
------------------------------------------------------ */

.meal.season #cnav { padding-bottom: 40px; background: #fcfbf5; }