@charset "UTF-8";

body { margin: 0; padding: 0; background: #fff; font-family: Helvetica,'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif; text-shadow: 1px 1px 0 #fff; line-height: 1.5; -webkit-text-size-adjust: none; }
img { border: 0; -ms-interpolation-mode: bicubic; }
form { margin: 0; padding: 0; }
a { outline: none; }
a:link { color: #; text-decoration: none; }
a:visited { color: #; text-decoration: none; }
a:hover { color: #; text-decoration: underline; }
.clearfix { *zoom: 1; }
.clearfix:after { content: ''; display: block; clear: both; height: 0; }

/* メニュー */
div#globalHeader { display: grid; grid-template-rows: 80px; grid-template-columns: 30% 40% 30%; }
div.globalNavigation { position: fixed; width: 100%; height: 52px; grid-row: 1/2; grid-column: 1/2; z-index: 1000; transition: background-color 0.3s ease-in-out; }
.menu { list-style: none; position: absolute; width: 100%; height: auto; top: 0; margin-top: 52px; padding: 0 0 10px 0; clear: both; background: #006934; transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; transform: scale(1, 0); transform-origin: top; }
.menu-btn:checked ~ .menu { transform: scale(1, 1); transform-origin: top; transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; }
.menu a { text-decoration: none; font-weight: 500; letter-spacing: 2px; font-size: 16px; text-transform: capitalize; color: #ddd; opacity: 0; transition: 0.5s; }
.menu li { border-top: 1px solid #fff; padding: 15px 0; margin: 0 54px; opacity: 0; transition: 0.5s; }
.menu li:first-child { border-top: none; }
.menu-btn:checked ~ .menu a,
.menu-btn:checked ~ .menu li { opacity: 1; transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s; }
.menu-btn { display: none; }
.menu-icon { display: inline-block; position: relative; cursor: pointer; padding: 24px 14px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.navicon { background: #006934; display: block; height: 3px; width: 26px; position: relative; transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; }
.navicon:before,
.navicon:after { content: ""; display: block; height: 100%; width: 100%; position: absolute; background: #006934; transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; }
.navicon:before { top: 9px; }
.navicon:after { bottom: 9px; }
.menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); }
.menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); }
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before { top: 0; }
.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { bottom: 0; }
.menu-btn:checked ~ .menu-icon .navicon { background: rgba(0, 0, 0, 0); transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s; }

div.main { grid-row: 1/2; grid-column: 2/3; padding: 10px 0 0 0; }
div.reserve { grid-row: 1/2; grid-column: 3/4; padding: 20px 10px 0 0; text-align: right; width: auto; height: auto; z-index: 1001; }
a.logo img { width: 150px; height: auto;  }
a.reservation img { width: 90px; height: auto; }

/* トップページ */
div#room_images { background: #006934; text-align: center; }
div#room_images img { width: 90%; margin: 50px 0 50px 0;  }
div#comment { text-align: center; }
img.title_image { width: 90%; margin: 50px 0 0 0;  }
div#comment h2 { font-size: 180%; margin: 10px 0 0 0;  }
div.text { width: 90%; margin: 0 auto; text-align: left; }
img.learn_more { width: 60%; margin: 20px 0 30px 0; }

/* フッター */
div#globalFooter { border-top: 2px solid #000; width: 90%; padding: 0 0 20px 0; margin: 0 auto; text-align: center; }
.footer_logo { width: 70%; margin: 20px 0 0 0; }
.map { margin: 20px 0 20px 0; position: relative; width: 100%; height: 0; padding-top: 75%; }
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
div#globalFooter div.copy p { margin: 0; padding: 0; font-size: 90%; color: #666;}

/* ABOUT */
div.attention_text { width: 80%; border: 3px solid #006934; margin: 0 auto 20px auto; padding: 10px; text-align: left; }
img.step { width: 60%; margin: 30px 0 0 0; }
div#reserve_images { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr auto 1fr; grid-template-columns: 50% 50%; }
div#reserve_images span { color: #006934; font-weight: bold; }
div#reserve_images img { width: 95%; height: auto;  }
div#area01 { grid-row: 1 / 2; grid-column: 1 / 2; text-align: center; padding-bottom: 20px; }
div#area02 { grid-row: 1 / 2; grid-column: 2 / 3; text-align: center; padding-bottom: 20px; }
div#area03 { grid-row: 2 / 3; grid-column: 1 / 2; text-align: center; padding-bottom: 20px; }
div#area04 { grid-row: 2 / 3; grid-column: 2 / 3; text-align: center; padding-bottom: 20px; }
div#area05 { grid-row: 3 / 4; grid-column: 1 / 2; text-align: center; padding-bottom: 20px; }
div#area06 { grid-row: 3 / 4; grid-column: 2 / 3; text-align: center; padding-bottom: 20px; }
div#area07 { grid-row: 4 / 5; grid-column: 1 / 2; text-align: center; padding-bottom: 20px; }
div#area08 { grid-row: 4 / 5; grid-column: 2 / 3; text-align: center; padding-bottom: 20px; }
div#area09 { grid-row: 5 / 6; grid-column: 1 / 2; text-align: center; padding-bottom: 20px; }
div#area10 { grid-row: 5 / 6; grid-column: 2 / 3; text-align: center; padding-bottom: 20px; }
div#area11 { grid-row: 6 / 7; grid-column: 1 / 3; text-align: center; padding-bottom: 20px; }
div#area12 { grid-row: 7 / 8; grid-column: 1 / 2; text-align: center; padding-bottom: 20px; }
div#area13 { grid-row: 7 / 8; grid-column: 2 / 3; text-align: center; padding-bottom: 20px; }

/* FLOOR */
div#floor_images { background: #006934; text-align: center; }
img.floor_image { width: 70%; margin: 20px 0 -15px 0;  }
img.floor_photo { width: 90%; margin: 0 0 20px 0;  }
div#floor_images h2 { font-size: 140%; margin: 0 0 5px 0; color: #fff; }
div.floor_text { width: 90%; margin: 0 auto 30px auto; text-align: left; color: #fff; }

div#floor_photo_only { display: grid; grid-template-rows: auto auto; grid-template-columns: 50% 50%; }
div#floor_photo_only img { width: 90%; height: auto;  }
div#floor_area01 { grid-row: 1 / 2; grid-column: 1 / 2; text-align: center; padding-bottom: 5px; }
div#floor_area02 { grid-row: 1 / 2; grid-column: 2 / 3; text-align: center; padding-bottom: 5px; }
div#floor_area03 { grid-row: 2 / 3; grid-column: 1 / 2; text-align: center; padding-bottom: 5px; }
div#floor_area04 { grid-row: 2 / 3; grid-column: 2 / 3; text-align: center; padding-bottom: 5px; }

.bottom_border { border-bottom: 2px solid #fff; }

div#floor_amenities { display: grid; grid-template-rows: auto auto; grid-template-columns: 50% 50%; color: #fff; width: 90%; margin: 0 auto; }
div#floor_amenities01 { grid-row: 1 / 2; grid-column: 1 / 2; text-align: left; padding-bottom: 25px; }
div#floor_amenities02 { grid-row: 1 / 2; grid-column: 2 / 3; text-align: left; padding-bottom: 25px; }
div#floor_amenities03 { grid-row: 2 / 3; grid-column: 1 / 2; text-align: left; padding-bottom: 25px; }