@charset "UTF-8";
html { overflow-y: scroll; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

img { vertical-align: bottom; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

li { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select { *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend { color: #000; }

del, ins { text-decoration: none; }

/******************************************************
 BASE 
******************************************************/
body { background: #fff; font-family: "游ゴシック Medium","YuGothic,YuGothicM","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; }

p { line-height: 180%; color: #000; }

table { font-size: inherit; font: 100%; }

pre, code, kbd, samp, tt { font-family: monospace; *font-size: 108%; line-height: 100%; }

.cf::after { content: ""; display: block; clear: both; }

.note { font-size: 10px; line-height: 160%; }

.imgauto img { width: 100%; height: auto; }

.aw { display: inline-block; }

sup { font-size: 8px; vertical-align: top; }

/******************************************************
 DRAWER 
******************************************************/
header { display: none; }
@media screen and (max-width: 768px) { header { display: block; } }

.drawer-nav { background: #c7e5ec; }
.drawer-nav .drawer-menu { padding: 0 15px 15px 15px; }
.drawer-nav .drawer-menu li { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.drawer-nav .drawer-menu li a { display: block; text-align: center; text-decoration: none; font-size: 15px; color: #000; line-height: 100%; padding: 20px 10px; position: relative; font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; }
.drawer-nav .drawer-menu li a span { position: relative; z-index: 5; }
.drawer-nav .drawer-menu li a::after { content: ""; position: absolute; bottom: 0; z-index: 0; left: 0%; height: 10%; width: 100%; background: rgba(255, 240, 0, 0.8); opacity: 0; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }
.drawer-nav .drawer-menu li a:hover::after { opacity: 1; }
.drawer-nav .drawer-menu li a.current::after { opacity: 1; }
.drawer-nav .hnav { padding: 0 15px; font-size: 0; }
.drawer-nav .hnav li { display: inline-block; margin-right: 7px; }
.drawer-nav .hnav li:last-child { margin-right: 0; }

.drawer-overlay { background-color: rgba(255, 255, 255, 0.7); }

.drawer-hamburger { top: 0; margin: 0; padding: 0; height: 50px; width: 50px; }

.drawer-hamburger-icon { margin-top: 0px; }

.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { width: 30px; height: 2px; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); background-color: #004f7c; }

/******************************************************
 header 
******************************************************/
main { /**padding-top: 100px;**/ }
@media screen and (max-width: 768px) { main { padding-top: 50px; } }

.head { background: #c7e5ec; width: 100%; }
.head .headBody { height: 90px; width: 95%; box-sizing: border-box; max-width: 1300px; margin: auto; position: relative; }
.head .headBody::after { content: ''; display: block; clear: both; }
.head .headBody h1 { position: absolute; left: 290px; top: 50%; transform: translateY(-50%); font-size: 11px; white-space: nowrap; line-height: 180%; }
@media screen and (max-width: 900px) { .head .headBody h1 { display: none; } }
.head .headBody .logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.head .headBody .logo a { display: block; }
@media screen and (max-width: 768px) { .head .headBody .logo img { height: 30px; width: auto; } }
.head .headBody .hnav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0; }
@media screen and (max-width: 768px) { .head .headBody .hnav { display: none; } }
.head .headBody .hnav li { display: inline-block; margin-left: 10px; }
.head .headBody .hnav li a { display: block; width: 40px; height: 40px; -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; }
.head .headBody .hnav li a:hover { opacity: 0.5; }
@media screen and (max-width: 768px) { .head { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }
  .head .headBody { height: 50px; } }

/******************************************************
 gnav 
******************************************************/
.gnav { width: 100%; background: #f4f2e7; }
@media screen and (max-width: 768px) { .gnav { display: none; } }
.gnav ul { font-size: 0; max-width: 1300px; width: 95%; margin: auto; padding: 0px 0 15px 0; text-align: center; }
.gnav ul li { display: inline-block; width: 13.43%; position: relative; overflow: hidden; vertical-align: top; margin-right: 0.9983%; margin-top: 15px; }
.gnav ul li:last-child { margin-right: 0; }
@media screen and (max-width: 1000px) { .gnav ul li { width: 23.8%; margin-right: 1.6%; }
  .gnav ul li:nth-child(4n) { margin-right: 0; } }
.gnav ul li a { display: block; height: 85px; position: relative; overflow: hidden; box-sizing: border-box; border: 1px solid #ccc; background: #fff; width: 100%; font-size: 13px; line-height: 100%; border-radius: 10px; }
.gnav ul li a .txt { position: absolute; color: #000; top: 55%; left: 50%; transform: translateX(-50%) translateY(-50%); white-space: nowrap; z-index: 5; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.gnav ul li a .txt .l-t { font-size: 20px; font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; display: block; text-align: center; }
.gnav ul li a .txt .s-t { font-size: 13px; font-family: "游ゴシック Medium","YuGothic,YuGothicM","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; display: block; text-align: center; margin-top: 10px; }
.gnav ul li a::before { position: absolute; content: ""; width: 28px; height: 28px; z-index: 3; top: 0; left: 50%; border-radius: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.gnav ul li a::after { position: absolute; content: ""; width: 100%; height: 3px; z-index: 0; bottom: 0; left: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.gnav ul li a:hover .txt, .gnav ul li a.current .txt { color: #fff; }
.gnav ul li a:hover::before, .gnav ul li a.current::before { background: #fff !important; }
.gnav ul li a:hover::after, .gnav ul li a.current::after { height: 100%; }
.gnav ul li a .bg { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.gnav ul li.top a::before, .gnav ul li.top a::after { background: #fff000; }
.gnav ul li.gourmet a::before, .gnav ul li.gourmet a::after { background: #ff9000; }
.gnav ul li.live a::before, .gnav ul li.live a::after { background: #5ad8e0; }
.gnav ul li.property a::before, .gnav ul li.property a::after { background: #f5202a; }
.gnav ul li.spot a::before, .gnav ul li.spot a::after { background: #41ba85; }
.gnav ul li.guide a::before, .gnav ul li.guide a::after { background: #ab66c7; }
.gnav ul li.access a::before, .gnav ul li.access a::after { background: #36569d; }
@media screen and (max-width: 600px) { .gnav ul { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  .gnav ul li { width: 50%; border-top: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2); box-sizing: border-box; }
  .gnav ul li:nth-child(2n) { border-right: none; } }
@media screen and (max-width: 768px) { .gnav.top-n { display: none; } }

/******************************************************
 pagename 
******************************************************/
/******************************************************
 contents 
******************************************************/
.contents { margin: auto; padding: 60px 0; max-width: 1100px; width: 90%; }
@media screen and (max-width: 600px) { .contents { padding: 40px 0; } }

.body { margin: auto; max-width: 1000px; width: 100%; box-sizing: border-box; }

/******************************************************
 footer 
******************************************************/
footer { background: #637075; }
footer .f-midashi { border-bottom: 1px solid rgba(255, 255, 255, 0.3); text-align: center; padding-bottom: 20px; }
footer .f-midashi .f-txts { display: block; font-size: 20px; font-weight: bold; color: #fff; padding: 30px 0; }
@media screen and (max-width: 600px) { footer .f-midashi .f-txts { font-size: 16px; padding: 20px 0 10px; } }
footer .body .txt { margin-top: 50px; width: 45%; float: left; }
footer .body .txt h5, footer .body .txt p { color: #fff; }
footer .body .txt .f-name { font-weight: bold; font-size: 24px; }
footer .body .txt .f-read { font-size: 13px; margin-top: 10px; }
footer .body .txt .f-tel, footer .body .txt .f-mail { margin-top: 30px; }
footer .body .txt .f-tel img, footer .body .txt .f-mail img { width: 100%; height: auto; max-width: 300px; }
footer .body .map { margin-top: 50px; width: 50%; float: right; }
footer .body .map .gmap { position: relative; padding-bottom: 64%; height: 0; overflow: hidden; }
footer .body .map .gmap iframe, footer .body .map .gmap object, footer .body .map .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media screen and (max-width: 600px) { footer .body .txt { margin-top: 40px; width: 100%; float: none; }
  footer .body .txt h5, footer .body .txt p { text-align: center; }
  footer .body .txt .f-name { font-size: 20px; }
  footer .body .txt .f-read { font-size: 12px; }
  footer .body .txt .f-tel, footer .body .txt .f-mail { margin-top: 20px; }
  footer .body .map { margin-top: 40px; width: 100%; float: none; } }

.copyright { text-align: center; padding: 30px 20px; font-size: 11px; }

.pagetop { position: fixed; bottom: 16px; right: 16px; width: 46px; }