@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');

/* MEMO */
/* HTML背景(濃いめのグレー)：#c6c6c6 */
/* SECTION背景(薄めのグレー)：#e0e0e0 */

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; }
footer, header, nav, section { display:block; }
div, nav, section, dl, ul { overflow:hidden; }
ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
form, input,select,textarea { vertical-align:middle; box-sizing:border-box; }
input, button, textarea, select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }

/*================================================
 *  タグ定義
 ================================================*/
* { line-height:1.6; font-size:16px; }
html { background-color:#c6c6c6; }
body { margin:0 auto; -webkit-text-size-adjust:none; color:#333333; }
body, textarea, input { font-family:'Noto Sans JP', sans-serif; }
a { background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); color:#333333; }
a:hover, a:focus { text-decoration:none; outline:none; }
a:hover, input[type="submit"]:hover { opacity:0.7; }
h2 { font-size:28px; }
h3, h3 span { font-size:24px; }
p { margin-bottom:0.5em; }
p:last-child { margin-bottom:0; }
li { margin-left:1.5em; }
th { white-space:nowrap; }
img, video { max-width:100%; }
section { min-height:500px; background-color:#f6f6f6; }
iframe { display:block; }

/*================================================
 *  ヘッダ・ナビ
 ================================================*/
/* ロゴ */
header { display:flex; justify-content:space-between; align-items:center; height:90px; padding-left:30px; padding-right:30px; background-color:white; }
header h1 { flex:1; }
header h1 a { display:flex; align-items:center; }
header h1 a span { font-size:24px; font-weight:400; letter-spacing:-0.1em; line-height:1; }
header h1 a span.header_location { font-size:32px; margin-left:0.2em; }
header h1 a img { margin-left:10px; }
header a.button { display:flex; justify-content:center; align-items:center; margin-left:0; margin-right:0; height:60px; width:150px; }
header a.button div p { margin-bottom:0; }
header a.button div p.reservation_en { font-size:85%; }

/*  メニュー */
nav ul { display:flex; justify-content:center; flex-wrap:wrap; overflow:hidden; }
nav ul li, nav ul li a { height:70px; }
nav ul li { display:block; text-align:center; margin-left:0; flex:1; }
nav ul li a { display:block; width:100%; border:0; color:white; }
nav ul li a div.nav_text_top { font-size:16px; padding-top:10px; }
nav ul li a div.nav_text_bottom { font-size:14px; }
nav ul li a:hover { color:white; opacity:1; }
nav ul.menu_fix { position:fixed; z-index:1000; top:0; left:0; right:0; background-color:#fcfcfc; }
section.menu_fix { margin-top:70px; }

/* スマホメニュー */
div.sp_menu_button { display:none; position:absolute; z-index:2; top:60px; right:20px; width:40px; height:60px; cursor:pointer; }
div.sp_menu_button div, div.sp_menu_button div span { display:inline-block; transition:all .4s; box-sizing:border-box; }
div.sp_menu_button div { position:relative; width:40px; height:35px; }
div.sp_menu_button div span { position:absolute; left:0; width:100%; height:4px; border-radius:4px; }
div.sp_menu_button div span:nth-of-type(1) { top:5px; }
div.sp_menu_button div span:nth-of-type(2) { top:15px; }
div.sp_menu_button div span:nth-of-type(3) { top:25px; }
div.sp_menu_button.active div span:nth-of-type(1) { -webkit-transform:translateY(10px) rotate(-45deg); transform:translateY(10px) rotate(-45deg); }
div.sp_menu_button.active div span:nth-of-type(2) { opacity:0; }
div.sp_menu_button.active div span:nth-of-type(3) { -webkit-transform:translateY(-10px) rotate(45deg); transform:translateY(-10px) rotate(45deg); }
div.sp_menu_button p { font-size:13px; line-height:13px; text-align:center; }

/*================================================
 *  フッタ
 ================================================*/
footer { text-align:center; padding:20px 0; }
footer ul { display:flex; justify-content:center; flex-wrap:wrap; overflow:hidden; }
footer ul li, footer ul li a { height:80px; }
footer ul li { display:block; text-align:center; margin-left:0; flex:1; }
footer ul li a { display:block; }
footer ul li a div.nav_text_top { font-size:16px; padding-top:15px; }
footer ul li a div.nav_text_bottom { font-size:12px; }
footer div.footer_main { display:flex; justify-content:space-between; padding-top:30px; border-top:1px solid #ddd; }
a.copyright { display:block; margin-top:40px; }
footer nobr:after { margin-right:20px; content:' '; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
#page-top { position:fixed; bottom:20px; right:10vw; background-color:#148e00; border:1px solid white; z-index:2; opacity:0.95; }
#page-top a { display:block; width:60px; height:60px; background:url("images/common_totop.png"); }
#page-top a:hover { text-decoration:none; opacity:0.7; }

/*================================================
 *  ページ共通
 ================================================*/
/* ブロック構造 */
.inner { width:900px; margin:0 auto; }
.content_block { margin:50px auto; }
.content_block.backcolor, .content_block.backcolor dd a { margin:0; padding-top:50px; padding-bottom:50px; color:white; }
.center { text-align:center; }
img.center { display:block; margin-left:auto; margin-right:auto; }
.left { text-align:left; }
.right { text-align:right; }
.object_fit { background-size:cover; background-position:center center; background-repeat:no-repeat; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.backcolor { color:white; }
.backcolor .button, .button.backcolor { background-color:white; color:black; text-align:center; }
.page_top_text { padding:15px 0; box-shadow:0 3px 3px #ccc; }
.page_top_text h2 { margin-bottom:0; }
.page_top_img { position:relative; height:480px; display:flex; justify-content:center; align-items:center; }
.page_top_img div { display:inline-block; padding:20px 50px; text-align:center; background-color:rgba(0,0,0,0.8); color:white; }
.page_top_img div h2 { font-size:36px; margin-bottom:0.2em; }
.page_top_img div p { font-size:18px; margin-bottom:0; font-weight:bold; }
.button { display:block; width:200px; margin-left:auto; margin-right:auto; height:50px; line-height:50px; color:white; text-align:center; }

/* 文字装飾 */
.underconst { text-align:center; color:red; margin-top:100px; font-size:32px; }
.serif { font-family:"Noto Serif Jp", serif; }
.indent { text-indent:1em; }
span.nobr { white-space:nowrap; display:inline-block; }
.error { color:red; }
.error404 { margin-top:200px; margin-bottom:200px; font-size:24px; }
.letter_space { letter-spacing:0.25em; }
a.outlink::after { content:'🔗'; margin-left:10px; }
.empha { font-weight:bold; }
.lead { text-align:center; font-size:20px; font-weight:bold; }
.radio { margin:2px 0; }
.radio input[type="radio"] { position:absolute; opacity:0;}
.radio input[type="radio"] + .radio-label:before { content:''; background:#f4f4f4; border-radius:100%; border:1px solid #b4b4b4; display:inline-block; width:1em; height:1em; position:relative; top:-0.1em; margin-right:0.5em; vertical-align:middle; cursor:pointer; text-align:center; transition:all 250ms ease; }
.radio input[type="radio"]:checked + .radio-label:before { background-color:#3197EE; box-shadow:inset 0 0 0 4px #f4f4f4; }
.radio input[type="radio"]:focus + .radio-label:before { outline:none; border-color:#3197EE; }
.radio input[type="radio"]:disabled + .radio-label:before { box-shadow:inset 0 0 0 4px #f4f4f4; border-color:#b4b4b4; background:#b4b4b4; }
.radio input[type="radio"] + .radio-label:empty:before { margin-right:0; }

/*================================================
 *  ページ別定義
 ================================================*/
/* TOPページ */
div.top_of_top { position:relative; height:calc(100vh - 160px); min-height:500px; }
div.top_of_top img { display:block; }
div.top_image_text { display:flex; justify-content:center; position:absolute; top:50px; left:0; right:0; margin-bottom:0; padding:25px; color:#006ab8; text-align:center; }
div.top_image_text h2 { display:flex; justify-content:center; flex-wrap:wrap; padding:8px; letter-spacing:-1px; background-color:rgba(255,255,255,0.9); box-shadow:0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff; }
div.top_image_text h2 span { font-size:24px; font-weight:400; }
div.top_image_special { position:absolute; top:175px; left:0; right:0; padding:10px 0; background-color:rgba(255,255,255,0.9); box-shadow:0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff; }
div.top_image_special h2 { letter-spacing:-1px; font-size:18px; margin-bottom:1em; }
div.top_image_special p { padding:0 25px; }
div.top_image_reserve { position:absolute; bottom:25px; left:0; right:0; margin-bottom:0; background-color:white; padding:20px 0; }
div.top_reserve_form_data { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
div.top_reserve_form_data_sub { display:flex; justify-content:center; align-items:center; margin-left:10px; margin-right:10px; margin-bottom:10px; }
div.top_reserve_form_data_sub select { padding:5px; border:1px solid #dddddd; color:rgba(0,0,0,0); text-shadow:0 0 0 #000; }
div.top_reserve_form_data_date { display:flex; justify-content:center; align-items:center; }
div.top_reserve_form_data_date select { display:block; }
div.top_reserve_form_data_date option { border:0; }
div.top_reserve_form_data_sub span.text_s { margin-right:5px; }
div.top_reserve_form_data_sub input[type="submit"] { width:150px; padding:10px; margin-left:20px; color:white; }
ul.top_reserve_links { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-top:10px; width:400px; margin-left:auto; margin-right:auto; }
ul.top_reserve_links li { margin:0; }
div.top_lead { box-shadow:0 3px 3px #ccc; }
div.top_point { display:flex; justify-content:space-between; flex-wrap:wrap; }
div.top_point a { display:block; width:400px; text-align:center; color:white; }
div.top_point a:nth-child(-n+2) { margin-bottom:40px; }
div.top_point a h3 { padding:10px; font-size:16px; }
div.top_point a img { display:block; margin-left:auto; margin-right:auto; }
h2.top_news_title { text-align:center; margin-bottom:1em; }

/* NEWS関連(TOPとNEWS両ページ共通) */
div.news dl { display:inline-block; }
div.news dl dt, div.news dl dd { float:left; margin-bottom:15px; font-size:16px; }
div.news dl dt:last-of-type, div.news dl dd:last-of-type { margin-bottom:0; }
div.news dl dt { clear:left; width:100px; margin-right:20px; text-align:left; }
div.news dl dd { width:calc(100% - 120px); text-align:left; }

/* ROOMSページ */
div.rooms div.lead { display:flex; justify-content:center; align-items:center; }
div.rooms div.lead div.room_lead_text { margin-right:50px; }
div.room_type { background-color:white; }
div.room_type:not(:last-child) { margin-bottom:25px; }
div.room_type img { float:left; display:block; }
div.room_data h3 { margin-top:20px; }
div.room_title_en { font-size:14px; text-align:center; }
div.room_detail { margin-top:40px; }
div.room_notice { text-align:left; padding:25px 50px; background-color:white; }
div.room_notice dl { display:flex; justify-content:flex-start; }
div.room_notice dl:not(:last-child) { margin-bottom:50px; }
div.room_notice dl dt { flex-shrink:0; }
div.room_notice dl dd { margin-left:30px; }
div.room_facility { background-color:white; }
div.room_facility:not(:last-child) { margin-bottom:25px; }
div.room_facility div { padding:25px 50px; }
div.room_facility h3 { margin-bottom:1em; }
div.room_facility ul { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
div.room_facility ul li { margin:5px 10px; display:block; width:180px; height:40px; line-height:40px; background-color:#f2f2f2; border-radius:5px; color:#333333; }

/* FACILITIESページ */
div.facilities_item { background-color:white; display:flex; justify-content:flex-start; align-items:center; }
div.facilities_item:not(:last-child) { margin-bottom:25px; }
div.facilities_item img { display:block; flex-shrink:0; }
div.facilities_data { padding:25px; flex-shrink:0; width:calc(100% - 450px); }
div.facilities_data:first-child { width:calc(100% - 50px); }
div.facilities_data h3 { margin-bottom:1em; }
div.facilities_restaurant_menu { margin:20px auto; width:400px; }
div.facilities_restaurant_menu h4 { padding:10px 0; }
div.facilities_restaurant_menu_food { padding:10px 0; }
.facilities_restaurant_menu_food_notice { font-size:14px; }
div.facilities_restaurant_open_notice p { text-align:left; padding-left:2em; text-indent:-2em; font-size:12px; }
ul.facilities_detail { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
ul.facilities_detail li { margin:5px 10px; display:block; width:180px; height:40px; line-height:40px; background-color:#f2f2f2; border-radius:5px; color:#333333; }

/* ACCESSページ */
div.access_google { margin-bottom:50px; height:450px; }
div.access_item { background-color:white; padding:25px; }
div.access_item:not(:last-child) { margin-bottom:25px; }
div.access_item h3 { margin-bottom:1em; }
div.access_data:not(:last-child) { margin-bottom:1em; }
div.access_data h4 { font-size:18px; margin-bottom:1em; }

/* SIGHTSEEINGページ */
div.sightseeing_item { background-color:white; padding:25px; }
div.sightseeing_item:not(:last-child) { margin-bottom:25px; }
div.sightseeing_title a { display:block; padding:5px 20px; margin:10px auto 20px; width:120px; }
div.sightseeing_data iframe { margin-top:25px; }
div.sightseeing_notice { background-color:#eeeeee; padding:10px; }


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:960px) {

/* 共通 */
.inner { width:calc(100% - 40px); }

/* TOPページ */
header { padding-left:20px; padding-right:20px; }
div.top_point a { width:calc(50% - 20px); }
div.top_point a img { width:100%; }

/* ROOMSページ */
div.room_notice, div.room_facility div { padding:25px; }

/* FACILITIESページ */
div.facilities_item img { width:300px; }
div.facilities_data { padding:10px 20px; width:calc(100% - 300px - 40px); }
div.facilities_data:first-child { width:calc(100% - 40px); }
div.facilities_data h3 { margin-bottom:10px; }
div.facilities_restaurant_menu { margin:5px auto; }
div.facilities_restaurant_menu h4 { padding:5px 0; }
div.facilities_restaurant_menu_food { padding:5px 0; }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット横
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:800px) {

/* 共通 */
h2 { font-size:24px; }
h3, h3 span { font-size:18px; }
section { min-height:400px; }
.content_block { margin-top:25px; margin-bottom:25px; }
.content_block.backcolor { padding-top:25px; padding-bottom:25px; }

/* ヘッダ */
header h1 a span { font-size:20px; }
header h1 a span.header_location { font-size:24px; }
header h1 a img { height:20px; }

/* TOPページ */
div.top_image_reserve { width:calc(100% - 20px); padding-top:10px; padding-bottom:10px; }
div.top_reserve_form_data > div { margin-left:5px; margin-right:5px; }
div.top_reserve_form_data input[type="submit"] { margin-left:10px; width:100px; }
.radio input[type="radio"] + .radio-label::before { margin-right:2px; }
div.top_point a:nth-child(-n+2) { margin-bottom:25px; }

/* NEWSページ */
div.news dl { margin-left:10px; margin-right:10px; }

/* ROOMSページ */
div.rooms div.lead div.room_lead_text { margin-right:20px; }
div.rooms div.lead img { width:80px; flex-shrink:0; }
div.room_type img { width:280px; }
div.room_data h3 { margin-top:10px; }
div.room_detail { margin-top:20px; }
div.room_notice dl:not(:last-child) { margin-bottom:25px; }
div.room_notice dl dd { margin-left:15px; }
div.room_notice img { width:60px; }

/* FACILITIESページ */
div.facilities_item img { width:220px; }
div.facilities_data { padding:10px; width:calc(100% - 220px - 20px); }
div.facilities_data:first-child { width:calc(100% - 20px); }
div.facilities_restaurant_menu { margin:5px auto; width:320px; }
div.facilities_restaurant_menu h4 { padding:2px 0; }
div.facilities_restaurant_menu_food { padding:2px 0; }
div.facilities_restaurant_menu_food p { font-size:14px; }

/* ACCESSページ */
div.access_google { height:300px; }

/* SIGHTSEEINGページ */
div.sightseeing_item { padding-left:10px; padding-right:10px; }
div.sightseeing_data p { text-align:left; }

/* フッタ */
footer div.footer_main { display:block; }
div.footer_outer_link { margin-top:40px; }
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ大
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:640px) {

/* 共通 */

/* ヘッダ */
header { display:block; padding-top:20px; padding-bottom:20px; }
header a.button { margin-left:auto; margin-right:auto; margin-top:20px; }

/* メニュー */
div.sp_menu_button { display:block; }
nav { display:none; }
nav ul.inner { width:100%; display:flex; flex-wrap:wrap; border-bottom:1px solid white; }
nav ul.inner li { width:calc(50% - 1px); flex:auto; border-top:1px solid white; }
nav ul.inner li, nav ul.inner li a { height:55px; }
nav ul li a div.nav_text_top { padding-top:5px; }
nav ul.inner li:nth-child(2n) { border-left:1px solid white; }

/* TOPページ */
div.top_of_top { position:static; min-height:500px; height:auto; }
div.top_image { position:relative; height:calc(100vh - 130px); }
div.top_image_special { top:200px; }
div.top_image_special h2 { font-size:16px; }
div.top_image_special p { line-height:1.3; }
div.top_image_special p span { font-size:14px; }
div.top_image_reserve { position:static; width:100%; padding-top:20px; padding-bottom:20px; }
div.top_point a { width:400px; margin-left:auto; margin-right:auto; margin-bottom:25px; }
div.top_point a:last-child { margin-bottom:0; }

/* ROOMSページ */
div.room_type { width:100%; max-width:400px; margin-left:auto; margin-right:auto; }
div.room_type img { float:none; width:100%; }
div.room_data { float:none; }
div.room_detail { margin-bottom:10px; }
div.room_notice, div.room_facility div { padding:10px; }

/* FACILITIESページ */
div.facilities_item { display:block; width:100%; background-color:white; }
div.facilities_item img { width:100%; max-width:320px; display:block; margin:10px auto 0; float:none; }
div.facilities_data { width:calc(100% - 20px); float:none; }
div.facilities_restaurant_menu { width:calc(100% - 2px); }

/* ACCESSページ */
div.access_item { padding:10px; }
div.access_data p { text-align:left; }

/* SIGHTSEEINGページ */

}


/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  スマホ小
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:480px) {

/* 共通 */

/* ヘッダ */
header h1 a span { font-size:18px; }
header h1 a span.header_location { font-size:20px; }
header h1 a img { height:18px; margin-left:5px; }

/* メニュー */

/* TOPページ */
div.top_image_text h2 span { font-size:18px; }
div.top_image_reserve { padding:10px 0; }
ul.top_reserve_links { width:auto; display:block; margin-top:0; margin-left:20px; margin-right:20px; text-align:center; }
div.news dl.top_news { width:100%; margin-left:0; margin-right:0; }
div.news dl.top_news dt { margin-right:0; }

/* NEWSページ */
div.news dl dt { float:none; width:100%; margin-bottom:5px; }
div.news dl dd { float:none; width:calc(100% - 10px); margin-left:10px; }

/* ROOMSページ */
div.rooms div.lead { display:block; }
div.rooms div.lead div.room_lead_text { margin-right:0; margin-bottom:20px; }
div.room_notice dl { display:block; }
div.room_notice dl dd { margin-left:5px; }
div.room_notice img { width:50px; }
div.room_facility ul { display:block; text-align:left; font-size:0; }
div.room_facility ul li { width:auto; white-space:nowrap; display:inline-block; padding:0; margin:0; height:auto; line-height:1.6; background-color:transparent; }
div.room_facility ul li:not(:last-child):after { content:'、'; }

/* SIGHTSEEINGページ */
div.sightseeing_title a { margin:5px auto 10px; }
div.sightseeing_data iframe { margin-top:10px; }

/* フッタ */
footer { padding-bottom:100px; }
footer ul.inner { flex-wrap:wrap; padding-bottom:20px; }
footer ul.inner li { width:calc(50% - 1px); flex:auto; }
footer ul.inner li, footer ul.inner li a { height:55px; }
footer ul li a div.nav_text_top { padding-top:5px; }


/* ページの戻り */
#page-top { right:5vw; } 
#page-top a:hover { opacity:1; }
}