@charset "utf-8"; /* =================================================== Reset ====================================================== */ #customer_header *, #customer_footer * { -webkit-box-sizing: content-box; box-sizing: content-box;} #customer_header h1, #customer_header h2, #customer_header h3, #customer_header h4, #customer_header h5, #customer_header h6, #customer_footer h1, #customer_footer h2, #customer_footer h3, #customer_footer h4, #customer_footer h5, #customer_footer h6 { margin: 0; } #customer_header ul, #customer_header ol, #customer_header li, #customer_footer ul, #customer_footer ol, #customer_footer li { padding: 0; margin: 0; list-style-type: none;} #customer_header dl, #customer_footer dl { padding: 0; margin: 0;} #customer_header p, #customer_footer p { padding: 0; margin: 0;} /* =================================================== Custom CSS ※ 予約番自体のコンテンツに影響するのを避けるため、 　必ず #customer_header または #customer_footer からの継承で記述してください。 ====================================================== */ body { min-width: 1100px; color: #000; } #customer_header, #customer_footer { font-size: 12px; font-weight: normal; line-height: 1.5; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック", sans-serif; -webkit-text-size-adjust: 100%; position: relative; } #customer_header #header_wrap, #customer_header #nav_wrap, #customer_footer #footer_wrap { padding: 0; margin: 0; } #customer_header h1, #customer_header h2, #customer_header h3, #customer_header h4, #customer_header h5, #customer_header h6, #customer_footer h1, #customer_footer h2, #customer_footer h3, #customer_footer h4, #customer_footer h5, #customer_footer h6 { line-height: 1; } #customer_header div, #customer_footer div { box-sizing: border-box;} #customer_header dt, #customer_footer dt { font-weight: normal; } #customer_header #header, #customer_header #gnav ul, #customer_footer #footer { width: 1100px; max-width: 100%; padding: 0; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } #customer_header .inner, #customer_footer .inner { position: relative; max-width: 1100px; width: 100%; margin: 0 auto;} #customer_header a, #customer_footer a { color: #000; text-decoration: none;} #customer_header a:hover, #customer_footer a:hover { color: #000; text-decoration: underline;} #customer_header a img, #customer_footer a img { transition: opacity .5s; -webkit-backface-visibility:hidden; backface-visibility:hidden; } #customer_header a:hover img, #customer_footer a:hover img { opacity: 0.7; } #customer_header img, #customer_footer img { max-width: 100%; height: auto; width: auto\9; border: 0; vertical-align: bottom; } #customer_header .ofi, #customer_footer .ofi { object-fit: cover;} #customer_header .ver_sp, #customer_footer .ver_sp { display: none;} @media screen and (orientation:landscape) { body { width: 100%;} } @media screen and (max-width: 1100px) { #customer_header .inner, #customer_header .inner { padding: 0 3%; } } @media screen and (max-width: 600px) { body { min-width: 0; } #customer_header, #customer_footer { font-size: 14px; line-height: 1; letter-spacing: normal; } #customer_header .ver_pc, #customer_footer .ver_pc { display: none;} #customer_header .ver_sp, #customer_footer .ver_sp { display: inline-block;} #webc_con { padding: 0 0 100px;} } /* Header ------------------------------------------------------ */ #customer_header #header_wrap { position: relative; width: 100%; background-color: rgba(255,255,255,0.9); } #customer_header #header { width: 1000px; max-width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } #customer_header #header h1 { margin: 24px 0 15px; } #customer_header #h_nav { position: relative; } @media screen and (max-width: 600px) { #customer_header #header { width: 94%; } #customer_header #header h1 { position: relative; width: 53%; margin: 10px 0; z-index: 100;} #customer_header #header #h_nav { width: 100%; padding: 0; } } /* G-nav ------------------------------------------------------ */ #customer_header #gn_home, #customer_header #close_top, #customer_header #close_bot, #customer_header #gn_lang { display: none;} #customer_header #gnav ul{ padding: 14px 0 12px; width: 742px; } #customer_header #gnav li{ float: left; border-right: 1px solid #bfbfbf; box-sizing: border-box;} #customer_header #gnav li:last-child{ border-right:0;} #customer_header #gnav li a{ display:block; padding: 2px 15px;} #customer_header #gnav #gn_01 a { padding-left: 0;} #customer_header #gnav li a span { display: none;} #customer_header #gnav li#gn_home{ display: none;} #customer_header #gnav li#gn_08{ border-right: none;} #customer_header #gnav .reserve { display: inline-block; width: 150px; margin: 10px 135px 0 0; padding: 5px 0; color: #fff; font-size: 14px; font-family: YuMincho, "游明朝", "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","游明朝",YuMincho,"ＭＳ Ｐ明朝",serif; text-align: center; background-color: #7c7234; float: right; } #customer_header #gnav .reserve:hover { text-decoration: none; opacity: 0.7; } #customer_header #gnav #lang { position: absolute; right: 0; width: 120px; margin: 10px 0 0; padding: 7px 0 4px 0; border: 1px solid #c8c8c8; text-align: center; box-sizing: border-box; background-color: #fff; box-sizing: border-box; } #customer_header #gnav #lang span { display: none;} #customer_header #gnav #lang_list{ position:absolute; top:100%; left: -1px; width: 120px; max-width: 120px; height: 0; overflow: hidden; padding:0; margin:0; clear:both; z-index:999999; transition: all 0.75s; } #customer_header #gnav #lang:hover #lang_list { height: 180px; overflow: auto; } #customer_header #gnav #lang_list li{ float: none; width: 100%!important; height: 30px; padding:0; margin:0; border-bottom:1px solid #c8c8c8; border-left:1px solid #c8c8c8; border-right: 1px solid #c8c8c8; text-align: center!important; margin-top: 0!important; background-color: #fff; } #customer_header #gnav #lang_list li a { height: 30px; text-indent: -9999px; } #customer_header #gnav #lang_list li:nth-of-type(1) { border-top: 1px solid #c8c8c8; background:url(../img/lg_en.png) no-repeat center center; background-color: #fff;} #customer_header #gnav #lang_list li:nth-of-type(2) { background:url(../img/lg_tw.png) no-repeat center center; background-color: #fff;} #customer_header #gnav #lang_list li:nth-of-type(3) { background:url(../img/lg_cn.png) no-repeat center center; background-color: #fff;} #customer_header #gnav #lang_list li:nth-of-type(4) { border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; background:url(../img/lg_ko.png) no-repeat center center; background-color: #fff;} #customer_header #gnav #lang_list li:nth-of-type(5) { border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; background:url(../img/lg_es.png) no-repeat center center; background-color: #fff;} #customer_header #gnav #lang_list li:nth-of-type(6) { border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; background:url(../img/lg_fr.png) no-repeat center center; background-color: #fff;} #customer_header #gnav #lang_list li:last-child a { height: 25px;} #customer_header #gnav #lang_list li:hover a { opacity: 0.4; background-color: #F9F6F2;} #lang2{ display: none;} @media screen and (max-width: 600px) { #customer_header #gnav { width: 100%; height: 100%; padding: 0; position: fixed; top: 0; left: 0; z-index: 10000; background: none; pointer-events: none; transition: all .5s; opacity: 0; visibility: hidden; } #customer_header #gnav_inner { height: 100vh; background: rgba(255,255,255,0.95); z-index: 10000; position: relative; } #customer_header #gnav:target { pointer-events: auto; opacity: 1; visibility: visible; } #customer_header #gnav #gnav_inner > ul { float: none; width: 92%; margin: 0 auto; padding: 0 0 25px;} #customer_header #gnav #gnav_inner > ul li:not(.close_menu) { display: block; float: left!important; width: 50% !important; height: auto; padding: 0; margin: 0; font-size: 15px; float: none; line-height: 2; border-bottom: 1px solid #c9bea7; border-right: 0; background: url(../img/gnav_arrow.png)no-repeat 5px center; background-size: 6px;} #customer_header #gnav #gnav_inner > ul li#gn_home { display: none;} #customer_header #gnav #gnav_inner > ul li:not(#close_bot) a { display: block; width: 100% !important; height: auto; padding: 10px 5px 10px 20px; color: #242220; font-family: YuMincho, "游明朝", "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","游明朝",YuMincho,"ＭＳ Ｐ明朝",serif; text-decoration: none; text-align: left; text-indent: 0; line-height: 1.8; white-space: normal; background: none !important; box-sizing: border-box;} #customer_header #gnav li { text-align: center; } #customer_header #gnav #gn_01 a, #customer_header #gnav li#gn_05 a { padding: 5px 20px;} #customer_header #gnav li#gn_05 { clear: none;} #customer_header #gnav li:last-child { border-bottom: 1px solid #c9bea7;} #customer_header #gnav #gnav_inner > ul li img { display: none;} #customer_header #gnav #gnav_inner > ul li a span { display: block;} #customer_header #gnav li#close_bot { display: block; width: 100% !important; margin: 0; padding: 20px 0; font-size: 23px; font-family: YuMincho, "游明朝", "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","游明朝",YuMincho,"ＭＳ Ｐ明朝",serif; color: #4b462d; border-bottom: 1px solid #c9bea7; border-right: none; background: url(../img/close_icon.png)no-repeat right 19px; background-size: 27px; } #customer_header #gnav .reserve { float: none; display: block; width: 92%; margin: 0 auto; padding: 25px 0; font-size: 18px; } #customer_header #gnav #lang { position: static; max-width: inherit; width: 100%; margin: 25px auto 0; padding: 0 0 15px; border: none; background: #e2dfcb; pointer-events: none;} #customer_header #gnav #lang >img { display: none;} #customer_header #gnav #lang span, #customer_header #gnav #lang_list { display: block;} #customer_header #gnav #lang span { padding: 19px 0; color: #7c7234; font-size: 14px; font-family: YuMincho, "游明朝", "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","游明朝",YuMincho,"ＭＳ Ｐ明朝",serif;} #customer_header #gnav #lang_list { float: none; display: block; position: static; float: none; width: 92%; height: auto; margin: 0 auto; pointer-events: auto; max-width: none; transition: none; } #customer_header #gnav #lang_list li { float: left; margin: 0 0 2%; height: 51px; background: #fff !important; border: none !important; width: 49% !important; font-size: 15px; font-family: YuMincho, "游明朝", "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","游明朝",YuMincho,"ＭＳ Ｐ明朝",serif;} #customer_header #gnav #lang_list li:nth-child(even) { float: right;} #customer_header #gnav #lang_list li a { padding: 18px 10px; height: auto; color: #422309; text-indent: initial; } #customer_header #gnav #lang_list li:last-child a { height: auto;} #customer_header #lang2{ display: block; position: absolute; top: 100%; right: 3%; width: 110px; height: 34px; margin: 10px 0 0; } #customer_header #lang2 > a { width: 100%; padding: 9px 0 6px 0; border: 1px solid #c8c8c8; text-align: center; box-sizing: border-box; background-color: #fff; } #customer_header #lang2 > a:nth-child(1) { position: absolute; display: inline-block; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } #customer_header #lang2 > a:nth-child(2) { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; } #customer_header #header_wrap:target #lang2 a:nth-child(1) { z-index: 2; position: relative; } #customer_header #header_wrap:target #lang2 #lang_list2 { height: 180px; overflow: auto; } #customer_header #lang_list2{ position:absolute; top:100%; left: 0; width:110px; padding:0; margin:0; z-index:999999; overflow: hidden; height: 0; transition: all .5s; scrollbar-width: none; } #customer_header #lang_list2::-webkit-scrollbar{ display:none; } #customer_header #lang_list2 li{ width: 100%!important; height: 30px; padding:0; margin:0; border-bottom:1px solid #c8c8c8; border-left:1px solid #c8c8c8; border-right: 1px solid #c8c8c8; text-align: center!important; margin-top: 0!important; background-color: #fff; box-sizing: border-box;} #customer_header #lang_list2 li a { height: 30px; text-indent: -9999px; display: block; padding: 2px 15px;} #customer_header #lang_list2 li:nth-of-type(1) { border-top: 1px solid #c8c8c8; background:url(../img/lg_en.png) no-repeat center center; background-color: #fff;} #customer_header #lang_list2 li:nth-of-type(2) { background:url(../img/lg_tw.png) no-repeat center center; background-color: #fff;} #customer_header #lang_list2 li:nth-of-type(3) { background:url(../img/lg_cn.png) no-repeat center center; background-color: #fff;} #customer_header #lang_list2 li:nth-of-type(4) { border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; background:url(../img/lg_ko.png) no-repeat center center; background-color: #fff;} #customer_header #lang_list2 li:nth-of-type(5) { border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; background:url(../img/lg_es.png) no-repeat center center; background-color: #fff;} #customer_header #lang_list2 li:nth-of-type(6) { border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; background:url(../img/lg_fr.png) no-repeat center center; background-color: #fff;} #customer_header #lang_list2 li:last-child a { height: 25px;} #customer_header #lang_list2 li:hover a { opacity: 0.4; background-color: #F9F6F2;} } /* page title */ #customer_header #title { background: url(../img/title.jpg)no-repeat center top; width: 1000px; max-width: 100%; height: 230px; margin: 0 auto; } #customer_header h2{ padding: 80px 0 0; font-size: 24px; text-align: center;} /* breadcrumb */ #customer_header #breadcrumb{ width: 1000px; margin: 10px auto 25px; padding: 0; max-width: 100%; font-size: 12px; text-align: right;} #customer_header #breadcrumb li{ display: inline; margin: 0; padding: 0; line-height: 1.6; background: none;} #customer_header #breadcrumb li:before{ display: inline-block; margin: 0 5px; content: ">";} #customer_header #breadcrumb li:first-child:before{ display: none;} #customer_header #breadcrumb li a { color: #baa48a; text-decoration: none;} #customer_header #breadcrumb li a:hover { text-decoration: underline;} #customer_header #breadcrumb li:nth-of-type(2) a { color: #000; } @media screen and (max-width: 600px) { #customer_header #breadcrumb{ margin: 20px auto; width: 94%; } #customer_header #title { background-position: -230px 0px; } } /* --------------------------------------------------- Sp_nav ------------------------------------------------------ */ #customer_header #sp_nav { display: none;} @media screen and (max-width: 600px) { #customer_header #sp_nav { display: table; position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; z-index: 9999; border-top: 1px solid #c0bab1; background-color: #3f4613;} #customer_header #sp_nav p { display: table-cell; vertical-align: middle; width: 28%; height: 40px; text-align: center;} #customer_header #sp_nav p:nth-of-type(1) { width: 40%; background-color: #147268; border-right: 1px solid #efefef;} #customer_header #sp_nav p:nth-of-type(2) { width: 21%; background-color: #8b8143; border-right: 1px solid #efefef;} #customer_header #sp_nav p:nth-of-type(3) { width: 21%; background-color: #8b8143;} #customer_header #sp_nav p:nth-of-type(4) { width: 18%; background-color: #fff; padding: 10px 1% 2px;} #customer_header #sp_nav p img { zoom: .5;} #customer_header #sp_nav p a, #customer_header #sp_nav p .tel-link { display: block; padding: 10px 1%;} #customer_header #sp_nav p:nth-of-type(3) a { padding: 5px 10%;} #webc_con.webc_clr_blk .webc_language { background: #fff; } } /* --------------------------------------------------- clear ------------------------------------------------------ */ #customer_header #nav_wrap:after, #customer_header #gnav:after, #customer_header #gnav ul:after, #customer_header #gnav #lang_list:after, #customer_header #breadcrumbs:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}