/* Theme Name: Customizable Theme URI: http://fasterthemes.com/wordpress-themes/customizable Author: FasterThemes Author URI: http://fasterthemes.com/ Description: Customizable is a WordPress responsive cooperate theme based on Twitter bootstrap framework which can be used for personal or corporate websites. Customizable is a free WordPress theme with premium functionality and design. Customizable Pro version is a paid version which has several other options like 6 color schemes, different page templates, more Google Fonts options etc. Version: 2.1.3 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Tags: right-sidebar, one-column, two-columns, fluid-layout, responsive-layout, full-width-template, theme-options, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, translation-ready Text Domain: customizable This theme, like WordPress, is licensed under the FasterThemes. Use it to make something cool, have fun, and share what you've learned with others. */ @import url(//fonts.googleapis.com/css?family=Cabin:400,700); #site-header { text-align:center; width:100%; } .bypostauthor { } .clear { clear: both; } .clearl { clear: left; } .clearr { clear: right; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } /***** * * * * * / /* Headings */ h1, h2, h3, h4, h5, h6 { clear: both; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } /*トップ案内 */ #ec { text-align: center; margin: 20px 0 60px; } #ec.popup-inner { padding: 70px 0 50px 0; } #ec .btn-gradient-radius { display: inline-block; padding: 7px 20px; text-decoration: none; color: #FFF; background-color: #465846; transition: .4s; } #ec .btn-gradient-radius:hover { background-image: linear-gradient(45deg, #07d9ff 0%, #5f6bff 100%); } #ec h2 { margin: 20px 0 40px; line-height: 40px; color: #084569; } #ec h2 span { display: block; } #ec h2 span.sp { display: inline; } #ec ul { margin-top: 50px; padding: 0 60px; } #ec ul li { list-style: none; text-align: left; } #ec .touch { font-size: 20px; font-weight: normal; line-height: 30px; text-align: center; } #ec .touch span { display: block; } #ec .info { font-size: 2rem; font-family: "Open Sans", "Helvetica Neue", Helvetica, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif; color: #333; margin-bottom: 0; text-align: center; } #ec p img { margin-top: 20px; } #ec .en { text-transform: uppercase; font-size: 12px; font-weight: bold; letter-spacing: 0.5px; font-style: italic; font-family: 'Roboto', "Gill sans", Lato; } #ec p a.arrow-button { font-size: 14px; font-weight: 400; background-color: #d2394e; color: #fff; padding: 8px 60px; text-decoration: none; font-family: 'Roboto', "Gill sans", Lato; position: relative; justify-content: center; align-items: center; letter-spacing: 0.5px; transition: .4s; } #ec p.cov { display: inline-block; } #ec p.cov a.arrow-button { background: none; border-bottom: 1px solid #d2394e; padding-bottom: 5px; color: #d2394e; padding: 0; } #ec p a:hover.arrow-button { background-color: #d2394edd; } #ec p.cov a:hover.arrow-button { background: none; } #ec .arrow-button:before, #ec .arrow-button:after{ content: ''; display: block; position: absolute; top: 50%; right: 40px; height: 1px; background: #fff; } #ec .arrow-button:before{ width: 40px; transform: translate(30px, 0px); } #ec .arrow-button:after{ width: 12px; transform-origin: right center; transform: translate(30px, 0px) rotate(25deg); } .popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; visibility: hidden; transition: .6s; } .popup p a { text-decoration: underline; color: #2f6b79; } .popup p a:hover { text-decoration: none; } .popup.is-show { opacity: 1; visibility: visible; } .popup-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; max-width: 600px; padding: 50px 0; background-color: #fff; z-index: 2; } .popup-inner img { width: 100%; } .close-btn { position: absolute; right: 0; top: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; } .close-btn i { font-size: 20px; color: #333; } .black-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1; cursor: pointer; } @media screen and (max-width: 896px) { #ec { /*display: none;*/ margin: 20px 0 20px; } .popup.is-show { overflow: scroll; } .popup-inner { padding: 25px 10px; overflow: scroll; margin-top: 30px; margin-bottom: 30px; } #ec .info { font-size: 1.5rem; } #ec h2 { font-size: 1.8rem; line-height: 2.5rem; margin: 20px 0; } #ec.popup-inner { padding: 15px 10px; } #ec h2 span.sp { display: block; } #ec ul { padding: 0px; margin-top: 20px; } #ec ul li { font-size: 1.2rem; } #ec .touch { font-size: 15px; line-height: 25px; } #ec .en { display: none; } #ec .touch span { display: initial; } #ec p a.arrow-button { font-size: 12px; } } /*BERTH内EC*/ #berth #ec, #berth #website { margin-top: 80px; } #berth #ec p, #berth #website p { display: block; } #berth #ec p a.arrow-button, #berth #website p a.arrow-button { font-size: 15px; background-color: #e62e47; color: #fff; padding: 10px 10px; text-decoration: none; font-family: 'Roboto', "Gill sans", Lato; position: relative; justify-content: center; align-items: center; letter-spacing: 0.5px; transition: .4s; font-weight: bold; border-radius: 28px; width: 300px; display: block; text-align: center; margin: 10px auto; } #berth #ec p a:hover.arrow-button, #berth #website p a:hover.arrow-button { opacity: 0.8; } #berth #ec .arrow-button:before, #berth #ec .arrow-button:after, #berth #website .arrow-button:before, #berth #website .arrow-button:after { content: ''; display: block; position: absolute; top: 50%; right: 40px; height: 1px; background: #fff; } #berth #ec .arrow-button:before, #berth #website .arrow-button:before{ width: 0px; transform: none; } #berth #ec .arrow-button:after, #berth #website .arrow-button:after{ width: 0px; transform-origin: right center; transform: none; } @media screen and (max-width: 896px){ #berth #ec, #berth #website { margin-top: 50px; } #berth #ec p a.arrow-button, #berth #website p a.arrow-button { font-size: 14px; padding: 8px 10px; width: 220px; } } /* Text elements */ p { margin-bottom: 1.5em; font-family: "Open Sans", "Helvetica Neue", Helvetica, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif; line-height: 26px; } ul { list-style: disc; } ul li { margin-bottom: 5px; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; border-left: 5px solid #00BEE0 !important; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } blockquote { color: #767676; font-size: 19px; font-style: italic; font-weight: 300; line-height: 1.2631578947; margin-bottom: 24px; } blockquote cite, blockquote small { color: #2b2b2b; font-size: 16px; font-weight: 400; line-height: 1.5; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote strong, blockquote b { font-weight: 400; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } figure { margin: 0; } embed, iframe, object, video { margin-bottom: 24px; max-width: 100%; } p > embed, p > iframe, p > object, span > embed, span > iframe, span > object { margin-bottom: 0; } ::selection { background: #00BEE0;; color: #fff; text-shadow: none; } ::-moz-selection { background: #00BEE0;; color: #fff; text-shadow: none; } table, th, td { border: 1px solid rgba(0, 0, 0, 0.1); } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin-bottom: 24px; width: 100%; } caption, th, td { font-weight: normal; text-align: left; } th { border-width: 0 1px 1px 0; font-weight: bold; } td { border-width: 0 1px 1px 0; } .section_post td, .section_post th { padding: 8px; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in all browsers */ } select { max-width: 275px !important; padding: 5px; margin-top: 15px !important; white-space: normal; word-wrap: break-word; overflow: auto; } button, input { line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; text-align: center; } /*** * * * * * * */ img { border: none; } a { text-decoration: none; } a:hover, a:focus { text-decoration: none; } .wrapper { width: 100%; height: auto; margin: 0; padding: 0; float: left; max-width: 100%; background-color: #f6f6f6; } /*.fade-in { opacity: 0; } .fade-in.fadeIn { opacity: 1!important; transition: opacity .3s; -webkit-transition: opacity .3s; }*/ .home #wrap { display: none; } .customize-container { width: 1230px; margin-top: 100px; } .single .customize-container { width: 1170px; margin-top: 0px; } .page .main_section .customize-container { margin-top: 50px; width: 95%; } .page-slug-en .main_section .customize-container,.page-slug-tw .main_section .customize-container { width: 100%; padding: 0; } .home #wrapper { overflow: scroll; -webkit-overflow-scrolling: touch; } #loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #ffffff; z-index: 1001; } #loader { display: none; /*margin-top: -100px; margin-left: -100px;*/ text-align: center; color: #fff; z-index: 1100; } #loader img { width: 20%; max-width: 300px; position: fixed; top: 0; bottom: 70px; left: 0; right: 0; margin: auto; } #loader img { width: 32px; } header { position: relative; } .page header { width: 100%; height: 100%; } .page header #header-inner { background-size: 100% auto; max-height: 860px; } .page header #header-inner:before { content:""; display: block; padding-top: 40%; max-height: 860px; } .page-slug-calendar header #header-inner:before { padding-top: 0; } .page header #header-inner #lead { position: absolute; /*top:115px;*/ top: 40%; left: 30px; color: #ffffff; } .page header #header-inner #lead h2 { font-family: 'Roboto', sans-serif; font-size: 3vw; line-height: 1em; margin: 10px 0 0; text-align: left; } .page header #header-inner #lead p { text-align: left; margin: 0; font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; } .page header #header-inner #lead p.sub { margin: 8px 0 10px; font-style: italic; letter-spacing: 1px; font-size: 2rem; } .page header #header-inner #lead p.time { font-size: 1.6rem; line-height: 2rem; letter-spacing: 1.5px; margin-top: 20px; } header #menu_header { height: 85px; width: 100%; opacity: 0.9; z-index: 100; } header #menu_header #menu_logo { float: left; margin-bottom: 0; /* background: #0d1e26; */ left: 30px; top: 10px; position: relative; } .home header #menu_header #menu_logo { top: 20px; } header #menu_header #menu_logo img { width: 200px; } header #language { height: 100%; position: absolute; background-color: /* #f6f6f6 */ rgba(255,255,255,0.9); left: 0; width: 56px; } header #language ul { margin: 0; padding: 0; display: block; } header #language ul li { list-style: none; font-weight: bold; padding: 50px 20px; text-align: center; margin-bottom: 0; } .page-slug-en header #language ul li, .page-slug-tw header #language ul li { font-family: helvetica, meiryo, sans-serif; } header #language ul.icon { border-top: 1px solid; margin: 0px 8px 20px; bottom: 30px; position: absolute; } header #language ul.icon li { padding: 30px 10px 10px; } header #language ul.icon li.dj { padding: 30px 9px 10px; } header #language ul li a { color: #333333; } header #language ul li a:hover { color: #aaaaaa; -webkit-transition: all ease .3s; -moz-transition: all ease .3s; transition: all ease .3s; } header #language ul li.selected { background-color: #1d3038; } header #language ul li.selected span { color: #dedede; } header form#to-book { z-index: 100; } #top_header ul { margin: 0; padding: 0; } #top_header .top .box-left { position: absolute; z-index: 100; left: 3%; top: 75px; /*background-color: #5e9b9e9c;*/ background-color:#72b19452; padding: 1%; /*mix-blend-mode: multiply;*/ } #top_header .top .cover { height: 85%; width: 80%; position: absolute; right: 30px; top: 60px; margin-right: -30px; background-color: #dddddd; } #top_header .top .box-right { background: url(https://backpackersjapan.co.jp/citan/img/header_top1.jpg) no-repeat top center transparent; background-size: cover; position: relative; width: 100%; height: 100%; left: 30px; top: -30px; } #top_header .box-right p { margin-bottom: 0; margin-top: -30px; } #top_header ul li { list-style: none; margin: 0; padding: 0; position: relative; } #top_header ul li .text { color: #111111; font-size: 5.7rem; line-height: 6rem; font-family: 'Roboto', sans-serif; font-style: italic; letter-spacing: 3px; margin-bottom: 5px; } #top_header .top .text { } #top_header ul li .sub { color: #111111; font-family: "Times New Roman", Garamond, serif; font-style: italic; font-weight: bold; font-size: 1.4rem; } #top_header .top { width: 100vw; margin: 0; height: 75vh; border-top: 0px solid #00BEE0; max-height: 750px; } #top_header .middle-title { position: absolute; bottom: 148px; left: 80px; } @media screen and (max-width: 768px) { #top_header .middle-title { /*bottom: 132px;*/ display: none; } } #top_header .middle-title p { font-family: 'Roboto', "Gill sans", Lato; } #top_header .middle { width: 660px; height: 55px; overflow: hidden; background: linear-gradient(-45deg,#296b68 25%,transparent 25%,transparent 50%,#296b68 50%,#296b68 75%,transparent 75%,transparent); background: -webkit-linear-gradient(-45deg,#296b68 25%,transparent 25%,transparent 50%,#296b68 50%,#296b68 75%,transparent 75%,transparent); background-size: 3px 3px; position: absolute; bottom: 115px; left: 50px; } #top_header .middle-right { width: 450px; height: 70px; text-align: center; position: absolute; /*bottom: 32px;*/ top: 86.5%; right: 0px; display: table; } #top_header .recruit { position: absolute; background-color: rgba(29,44,61,0.9); padding: 5px 35px; right: 20px; top: -50px; } #top_header .recruit a { color: #ffffff; font-size: 13px; position: relative; padding-right: 1em; transition: all .3s; } #top_header .recruit a span::after { position: absolute; top: 50%; right: -7px; content: ''; margin-top: -5px; border: 7px solid transparent; border-left-color: #fff; border-top-width: 5px; border-bottom-width: 5px; transition: all .3s; } #top_header .recruit a.button:hover span { } #top_header .recruit a.button:hover span::after { opacity: 0.3; } #top_header .recruit a.button:hover { color: rgba(255, 255, 255, 0.3); text-decoration: none; } #top_header .middle-right .movie { font-family: "Times New Roman", Garamond, serif; font-size: 2.2rem; background-color: #ed6941; mix-blend-mode: multiply; margin: 0; vertical-align: middle; display: table-cell; } #top_header .middle-right .movie .btn { color: #ffffff; padding: 6px 40px 6px 12px; background: url(https://backpackersjapan.co.jp/citan/img/play2.png) no-repeat center right; background-size: 30px; } #top_header .middle #to-book { top: 0; } #top_header .bottom { width: 100vw; float: left; /*height: 75vh;*/ height: 100vh; border-top: 0px solid #00BEE0; background-size: cover; top: 80px; } #top_header .bottom .cover { /*height: 80%;*/ height: 70%; width: 75%; position: absolute; left: 30px; top: 30px; margin-left: -30px; background-color: #dddddd; } #top_header .bottom .box-left { background: url(https://backpackersjapan.co.jp/citan/img/header_top3.jpg) no-repeat top center transparent; background-size: cover; position: relative; width: 100%; height: 100%; z-index: 0; left: -30px; top: -30px; } #top_header .bottom .box-left p { margin: 0; } #top_header .bottom .box-right { background: none; width: auto; text-align: right; right: 6%; /*top: 100px;*/ top: 10%; height: auto; position: absolute; } #top_header .bottom .box-right p { margin-top: 0; } #top_header .bottom .box-bottom { width: 750px; height: 300px; background-color: #fff100b0; mix-blend-mode: normal; text-align: center; position: absolute; /*bottom: 70px;*/ top: 50%; right: 0px; display: table; z-index: 99; } #top_header .bottom .box-bottom .news { width: 100%; margin: auto; position: absolute; /* top: 0px; */ bottom: 0px; height: auto; left: 0px; right: 0px; padding-right: 5%; padding-bottom: 10%; } #top_header .bottom .box-bottom .news h2 { text-align: right; font-family: 'Roboto', sans-serif; color: rgba(162, 29, 29, 0.75); padding-right: 5px; margin-bottom: 15px; } #top_header .bottom .box-bottom .news .title h4 { text-align: right; line-height:20px; line-height: 22px; font-size: 1.65rem; margin-top: 10px; } #top_header .bottom .box-bottom .news .title h4 a { color: #000000; border-bottom: 1px dashed #555555; } #top_header .bottom .box-bottom .news .title h4 a:hover { border-bottom: 0px; } #top_header .bottom .box-bottom .news .entry-title { font-style: italic; } #top_header .bottom .box-bottom .news .date { font-size: 1.3rem; } #top_header .news-sp { display: none; } .home #top_header, .page-slug-en #top_header, .page-slug-tw #top_header { margin-top: 0px; padding-top: 0px; position: relative; overflow: hidden; width: 100%; } a.btn-hover { display: inline-block; width: auto; margin: 25px 0px 40px; padding: 10px 60px; border: 1px solid #1d3038; background: rgb(29, 48, 56, 0.1); color: #1d3038; text-align: center; text-decoration: none; line-height: 1; transition: .2s; border-radius: 30px; font-size: 1.5rem; font-family: "Times New Roman", Garamond, serif; font-style: italic; } /*a.btn-hover:hover { border: 1px solid #ffffff; transition: .2s; }*/ a.spread { position: relative; z-index: 2; overflow: hidden; } a.spread::after { display: block; content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 0; height: 0; margin: 0; border-radius: 50%; background: rgba(255,255,255,.8); transition: .2s; } a.spread:hover::after { width: 300px; height: 300px; margin: -125px 0 0 -135px;} #header-inner { text-align: center; left: 0; right: 0; } .home #header-inner { position: absolute; left: 0px; } .page #header-inner, .archive #header-inner, .single #header-inner { position: relative; } #header-inner .logo img { width: 125px; } .page-slug-en #header-inner, .page-slug-tw #header-inner { position: absolute; left: 0px; } .home header .logo, .page-slug-en header .logo, .page-slug-tw header .logo { width: 20%; height: 50%; padding-top: 0px; margin: auto; position: absolute; top: 0; bottom: 70px; left: 0; right: 0; } .home header .logo img, .page-slug-en header .logo img, .page-slug-tw header .logo img { width: 100%; max-width: 300px; position: absolute; top: 0; bottom: 0px; left: 0px; /* bottom: -50px; left: 0; */ right: 0; margin: auto; } .home header .logo h1, .page-slug-en header .logo h1, .page-slug-tw header .logo h1 { color:#00BEE0; font-size: 25px; color: #333333; font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; font-weight: normal; } .logo h6 { color:#bbb; } .page_icon { position: absolute; right: 0; } .page_icon ul li { list-style: none; float: left; margin: 0 10px; } .page_icon ul li img { width: 25px; } .page_logo { margin-top: 30px; } .page_logo img { /* width: 250px; */ width: 135px; } .home header .open, .page-slug-en header .open, .page-slug-tw header .open { text-align: center; position: absolute; color: #ffffff; left: 0px; right: 0; /* bottom: 20px; */ bottom: 50px; } .home header .open h3, .page-slug-en header .open h3, .page-slug-tw header .open h3 { font-family: Futura, "Gill sans", Lato; font-size: 3.2rem; letter-spacing: 5px; } .home header .open p, .page-slug-en header .open p, .page-slug-tw header .open p { font-size: 1.8rem; letter-spacing: 1.5px; margin-top: 10px; margin-bottom: 20px; } .home header .open .scroll, .page-slug-en header .open .scroll, .page-slug-tw header .open .scroll { vertical-align: bottom; text-align: center; height: 60px; } .home header .open .scroll p, .page-slug-en header .open .scroll p, .page-slug-tw header .open .scroll p { height: 30px; font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; } .home header .open .scroll img, .page-slug-en header .open .scroll img, .page-slug-tw header .open .scroll img { width: 70px; } .header_right { width: 85%; height: auto; margin: 10px auto 0; padding: 0; } .page .header_right, .archive .header_right, .single .header_right { margin-top: 35px; position: relative; } .page-slug-en .header_right, .page-slug-tw .header_right { margin: 10px auto 0; } #menu_header .lang { position: relative; top: 25px; float: right; font-style: italic; } .home #menu_header .lang, .page-slug-en #menu_header .lang, .page-slug-tw #menu_header .lang { top: 33px; } #menu_header .lang span { color: #aaaaaa; width: 50px; font-size: 1.5rem; font-family: 'Roboto', sans-serif; letter-spacing: 2px; display: inline-block; text-align: center; } #menu_header .lang span.choosen { color: #1d3038; } #menu_header .lang a:hover span { color: #1d3038; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s; } #menu_header a.menuig img { width: 22px; margin-top: -3px; } .customize-menu { width: 100%; margin: 0 auto; padding: 0px 0; } .customize-menu > ul { padding: 0; text-align: center; } /* .page .customize-menu > ul, .archive .customize-menu > ul, .single .customize-menu > ul { text-align: right; } */ .customize-menu > ul li:hover > ul { display: block; } .customize-menu > ul > li { display: inline-block; position: relative; margin: 0 10px; } .page .customize-menu > ul > li, .archive .customize-menu > ul > li, .single .customize-menu > ul > li { margin: 0 10px; } .page-slug-en .customize-menu > ul > li, .page-slug-tw .customize-menu > ul > li { margin: 0 10px; } .customize-menu ul li a { border: 0px solid rgba(0,0,0,0); color: #333333; display: inline-block; padding: 10px 15px; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-family: 'Roboto', "Gill sans", Lato; } /* .customize-menu ul li.coffee a { pointer-events: none; color: #999999!important; } .customize-menu ul li.coffee a span { color: #999999!important; } */ .home .customize-menu ul li a, .page-slug-en .customize-menu ul li a, .page-slug-tw .customize-menu ul li a { color: #111111; } .customize-menu ul { text-align: left; position: absolute; left: 20%; /*padding: 25px 0;*/ padding: 10px 0; } .home .customize-menu ul, .page-slug-en .customize-menu ul, .page-slug-tw .customize-menu ul { padding: 25px 0; } .page-slug-hostelen .customize-menu ul, .page-slug-coffeeen .customize-menu ul, .page-slug-bardiningen .customize-menu ul, .page-slug-accessen .customize-menu ul, .page-slug-bookingen .customize-menu ul, .page-slug-dj-scheduleen .customize-menu ul, .page-slug-faqen .customize-menu ul, .page-slug-hosteltw .customize-menu ul, .page-slug-coffeetw .customize-menu ul, .page-slug-bardiningtw .customize-menu ul, .page-slug-accesstw .customize-menu ul, .page-slug-bookingtw .customize-menu ul, .page-slug-musictw .customize-menu ul, .page-slug-faqtw .customize-menu ul { padding: 18px 0; } .customize-menu ul li a span { font-size: 1rem; color: #333333; } .customize-menu ul li a { text-align: center; line-height: 2rem; } .home .customize-menu ul li a span, .page-slug-en .customize-menu ul li a span, .page-slug-tw .customize-menu ul li a span { color: #333333; font-size: 1rem; } .customize-menu ul li a:hover, .customize-menu ul li a:focus, .customize-menu ul li.current-menu-item a, .customize-menu ul li.current_page_item a { color: #246679; border: 0px solid #7e7e7e; border-radius: 3px; } .home .customize-menu ul li a:hover, .page-slug-en .customize-menu ul li a:hover, .page-slug-tw .customize-menu ul li a:hover { color: #1d3038; } .customize-menu > ul li > ul { display: none; margin: 0; padding: 0px; position: absolute; top: 41px; z-index: 9; border: 1px solid #7e7e7e; border-radius: 3px; background-color: #2d2d2d; } .customize-menu > ul li > ul li { list-style: none; min-width: 160px; text-align: left; position: relative; } .customize-menu > ul li > ul ul { left: 100%; position: absolute; top: 0; } .customize-menu > ul li > ul li a { background-image: url("images/li.png"); background-repeat: no-repeat; background-position: 10px 15px; padding: 5px 15px 5px 25px; text-transform: capitalize; width: 100%; } .customize-menu > ul li > ul li a:hover, .customize-menu > ul li > ul li.current-menu-item a, .customize-menu > ul li > ul li.current_page_item a { border: 0px solid rgba(0,0,0,0); } #scroll { text-align: center; font-size: 1.5rem; } #scroll p a { color: #333333; } .icon-color { background-color: #00bee0; } .search_box { width: 19%; height: auto; margin: 0; padding-top: 6px; float: right; position: relative; } .search_box input { width: 100%; height: 34px; color: #FFF; padding-left: 5px; border-radius: 3px; background-color: #2e2e2e; border: none; } .search_box input[type="button"] { background: url(images/search-icon.png) no-repeat 1px 8px; margin-left: -28px; width: 25px; cursor: pointer; position: absolute; float: right; top: 6px; right: 5px; } .customize-breadcrumb { width: 100%; height: auto; margin: 30px 0; padding: 30px 0 20px 0; float: left; max-width: 100%; background: url(images/city.jpg) top center; background-size: cover; } .customize-breadcrumb .customize-container { margin-top: 70px; height: 120px; } .customize-breadcrumb h1 { color: #FFF; font-family: Futura, "Gill sans", Lato, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; font-size: 30px; text-transform: capitalize; font-weight: normal; letter-spacing: 3px; text-align: center; margin-bottom: 5px; } .customize-breadcrumb ol { display :none; float: left; color: #FFF; padding: 0; text-align: center; width: 100%; font-size: 18px; font-weight: normal; text-transform: capitalize; } .customize-breadcrumb ol li { list-style: none; display: inline; } .customize-breadcrumb li { color: #00bee0; } .customize-breadcrumb a { color: #fff; } /*Section css part start*/ .main_section { width: 100%; height: auto; margin: 0 auto; padding: 50px 0; float: none; max-width: 1350px; } .page .main_section { padding: 0; max-width: 100%; max-width: 1500px; } .single .main_section { padding-top: 0; } .home .main_section, .page-slug-en .main_section, .page-slug-tw .main_section { max-width: 100%; padding: 0; } .home #main { padding-top: 0px; } .page-slug-en #main, .page-slug-tw #main { padding-top: 0px; } .home #primary, .page-slug-en #primary, .page-slug-tw #primary { max-width: 1850px; width: 100%; margin: 0 auto; padding: 0 50px; } .left_section { width: 62.4%; height: auto; margin: 0; padding: 0; float: left; max-width: 100%; } .section_post { width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 80px; float: left; max-width: 100%; border-bottom: 0px dotted #a4a4a4; } .page-slug-calendar .section_post { overflow: visible; } .left_section .sub-contents { overflow: hidden; clear: both; } .left_section .sub-contents ul { padding: 0; } .left_section .sub-contents ul li { list-style: none; float: left; } .section_post > h3 { margin: 20px 0; padding: 0; color: #212121; font-size: 24px; width: 100%; font-weight:bolder; } .archive .section_post h3 a, .category .section_post h3 a { color: #246679; font-weight: normal; } .archive .section_post h3 a:hover, .category .section_post h3 a:hover { color: #aaaaaa; } .section_post img { max-width: 100%; height: auto; padding-top: 34px; padding-bottom:10px; } .page .section_post img { padding-top: 0px; padding-bottom: 0px; } .wp-caption img{ padding:0px !important; } .section_post > h4 { margin-bottom: 10px; padding: 0; color: #212121; font-size: 16px; width: 100%; } .section_post span { margin: 0px 0 0px 0; padding: 0; color: #212121; font-size: 16px; font-weight: normal; } .section_post .content { margin: 120px 0 0px 0; padding: 0; color: #333333; font-size: 17px; font-weight: normal; line-height: 24px; } .archive .section_post .content, .category .section_post .content { margin-top: 35px; } .single .section_post .content { margin-top: 20px; } .page .section_post .content { margin-top: 0px; } .section_post p.wp-caption-text { margin:0px !important;} .section_post a.read-more { padding: 5px 20px; margin: 23px 0; color: #FFF; background-color: #00bee0; border-radius: 0px; font-size: 13px; font-weight: normal; box-shadow: 0 0 1px #000 inset; float: left; } .section_post a:hover { color: #2a6496; } .archive .section_post a.read-more, .category .section_post a.read-more { font-family: Futura, "Gill sans", Lato, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; color: #ffffff; padding: 7px 50px; background-color: #1d3038; font-size: 13px; letter-spacing: 2px; } .archive .section_post a:hover.read-more, .category .section_post a:hover.read-more { background-color: #2d4c59; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; transition: all ease .8s; } .pagination { width: 100%; margin: 28px 0 58px 0; padding: 0; float: right; text-align: center; } .pagination ul { margin: 0; padding: 0; } .pagination ul li { margin: 0; padding: 0 5px; list-style: none; display: inline; } .pagination ul li a { margin: 0; padding: 5px 12px; border-radius: 3px; border: 1px solid #c9c9c9; color: #212121; font-size: 15px; } .pagination ul li a:hover, a.select, .pagination .active a { border: 1px solid #00bee0; } .pagination .active a { cursor: default; } .subscribe { width: 100%; height: auto; margin: 0; padding: 20px 0; float: left; max-width: 100%; background-color: #00bee0; } .subscribe p { margin: 0; float: left; padding: 0; color: #fff; font-size: 14px; font-weight: normal; width: 75%; } .subscribe h3 { width: 75%; margin: 5px 0 0px 0; float: left; padding: 0; color: #fff; font-size: 18px; text-transform: uppercase; font-weight: normal; } .subscribe a:hover { color: #000; } .subscribe a { padding: 15px 20px; margin: 0px 0; color: #f6f6f6; background-color: #00d2f7; font-size: 16px; font-weight: normal; float: right; text-transform: uppercase; } /*Section css part end*/ /*Top page*/ .main_section .welcome { text-align: center; margin-top: 80px; font-size: 26px; font-family: "Roboto Slab", "Times New Roman", Garamond, "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-style: italic; letter-spacing: 2px; } .home .main_section, .page-slug-en .main_section, .page-slug-tw .main_section { position: relative; } #wanted { border: 1px solid #dedede; width: 300px; height: 245px; position: absolute; top: -75px; right: 110px; text-align: center; } #wanted h4 { font-family: Futura, "Gill sans", Lato; margin-top: 30px; color: #ffffff; font-size: 18px; letter-spacing: 5px; } #music_link { text-align: center; } #music_link .link a span { background: url(https://backpackersjapan.co.jp/citan/image/dj_w.png) no-repeat left center; background-size: contain; padding-left: 27px; } #music_link .link a { font-family: Futura, "Gill sans", Lato; color: #ffffff; padding: 7px 75px; background-color: #1d3038; font-size: 14px; display: inline-block; letter-spacing: 2px; } #music_link .link a:hover { background-color: #2d4c59; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; transition: all ease .8s; } #news { width: 500px; margin: 0 auto; text-align: center; } #news h2 { font-size: 1.6rem; font-family: Futura, "Gill sans", Lato; letter-spacing: 2px; text-align: center; margin: 75px 0 25px; } /*#news h2 .waku { padding: 5px 50px; border: 1px solid #333333; }*/ #news h4 { font-size: 1.5rem; line-height: 25px; margin-bottom: 10px; } #news h4 a { color:#333333; border-bottom: 1px dotted; } #news h4 a:hover { border-bottom: 0; } #story { width: 100%; background: url(https://backpackersjapan.co.jp/citan/image/story-bg.jpg) no-repeat top center transparent; height: 600px; overflow: hidden; } #story .box { width: 50%; margin: 50px auto 0; max-width: 1000px; background: url(https://backpackersjapan.co.jp/citan/image/contents-bg.png) repeat top left transparent; padding: 50px 50px 0; height: 500px; } #story .box h3 { text-align: center; font-size: 2.5rem; margin-bottom: 30px; font-family: "Open Sans"; letter-spacing: 3px; } #concept { width: 100%; height: auto; overflow: hidden; color: #333333; background: url(https://backpackersjapan.co.jp/toco/img/bg2.png); margin-top: -62px; padding-top: 62px; } #concept .concept_inner { width: 90%; margin: 0 auto; max-width: 1500px; } #concept h3 { margin: 80px 20px 0; } #concept h3, #concept h3 span { text-align: center; font-size: 3rem; font-family: Futura, "Gill sans", Lato, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; letter-spacing: 1px; color: #333333; font-weight: bold; } #concept span.sub { display: block; text-align: center; font-style: italic; font-family: "Roboto Slab", "Times New Roman", Garamond, "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-size: 1.6rem; font-weight: normal; margin-top: 28px; margin-bottom: 1.5em; } #concept .box_jp, #concept .box_en { width: 50%; margin: 50px 0; height: auto; float: left; padding: 0 5%; box-sizing: border-box; text-align: left; margin: 40px 0 80px; } #concept .box_jp { border-right: 1px solid #aaa; } #concept .box_jp p, #concept .box_en p { font-size: 16px; text-align: left; line-height: 3rem; margin-bottom: 20px; } #main .parallax { min-height: 450px; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } #main .parallax h4 { color: #ffffff; font-size: 4rem; font-family: 'Oswald', sans-serif; letter-spacing: 4px; margin: auto; text-align: center; top: 200px; position: relative; } #floor { background: url(https://backpackersjapan.co.jp/citan/img/floor_cover.jpg) ; } #basement { background: url(https://backpackersjapan.co.jp/citan/img/basement_cover.jpg) ; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /*#shooting { text-align: center; margin-top: 40px; } #shooting .btn-gradient-radius { display: inline-block; padding: 7px 20px; border-radius: 25px; text-decoration: none; color: #FFF; background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%); transition: .4s; } #shooting .btn-gradient-radius:hover { background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%); }*/ #shooting a { padding: 3px 8px; background: #ffffff; color: #333333; font-weight: bold; transition: .4s; } #shooting a:hover { padding: 3px 8px; background: #ffffff; opacity: 0.7; } #features { margin: 60px auto 200px; max-width: 1500px; } #features h2 { font-size: 1rem; font-family: Futura, "Gill sans", Lato; letter-spacing: 2px; text-align: center; margin-bottom: 50px; } #features h2 .waku { padding: 5px 50px; border: 1px solid #333333; } #features h3 span { display: block; font-size: 1.3rem; letter-spacing: 1px; margin-bottom: 5px; } #features h3 { font-size: 4rem; letter-spacing: 4px; font-family: "Gill sans", Lato; font-style: italic!important; border-bottom: 1px solid #111111; } #features p.seemore { text-align: left; margin-top: 30px; } #features p.seemore a { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; color: #ffffff; font-style: italic; padding: 7px 50px; background-color: #1d3038; font-size: 14px; } #features p.seemore a:hover { background-color: #2d4c59; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; transition: all ease .8s; } #features .curled-box { border-radius: 50%; height: 80px; width: 80px; border: solid 1px #1d3038; text-align: center; position: absolute; } #features .curled-box p.floor { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; color: #1d3038; font-size: 2.3rem; font-style: italic; margin-top: 24px; letter-spacing: 1px; text-align: center; } #features .floor { padding: 5px 15px 5px 15px; background: #ffffff; display: inline-block; margin: 0 0 20px -10px; } #features .floor p { margin-bottom: 0; font-family: Futura, "Gill sans", Lato; font-size: 1.4rem; letter-spacing: 3px; } #features .parent { display: flex; align-items: center; } #features .coffee .parent { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } #features .hostel { margin-bottom: 100px; overflow: hidden; } .page-slug-en #scenes .hostel p, .page-slug-tw #scenes .hostel p { font-size: 16px; } #features .hostel h3 { margin-bottom: 20px; display: block; padding-bottom: 10px; } #features .hostel .left { width: 50%; margin-bottom: 2.5rem; } #features .hostel .left p { margin-bottom: 0; } #features .hostel .right { width: 50%; margin-top: 0px; position:relative; padding: 0 4% 0 3%; } #features .hostel .right .curled-box { top: -100px; } #features .scenes { clear: both; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; } #features .scenes .element { width: 33%; } #features .hostel p.info { margin-top: 15px; text-align: center; border: 1px dotted #b39918; background-color: #e5e82b1a; padding: 0 10px; } #features .coffee { clear: both; margin-bottom: 100px; overflow: hidden; } #features .coffee .floor p { text-align: left; } #features .coffee h3 { margin-bottom: 20px; letter-spacing: 2px; } #features .coffee .left { width: 50%; padding: 0 3% 0 4%; margin-top: 0px; position:relative; } #features .coffee .left p { width: 100%; } #features .coffee .left .curled-box { top: -100px; left: 0; } #features .coffee .right { width: 50%; margin-bottom: 2.5rem; } #features .coffee .right p { margin-bottom: 0; } #features .vertical { height: 120px; width: 1px; border-right: 1px solid #999999; margin: 0 auto 80px; } #features .lounge { margin-bottom: 100px; overflow: hidden; margin-top: 50px; } #features .lounge h3 { margin-bottom: 20px; display: block; padding-bottom: 10px; } #features .lounge .left { width: 50%; margin-bottom: 2.5rem; } #features .lounge .left p { margin-bottom: 0; } #features .lounge .right { width: 50%; margin-top: 0px; position:relative; padding: 0 4% 0 3%; } #features .lounge .right .curled-box { top: -100px; } #features .stairs { text-align: center; overflow: hidden; } #features .stairs h3 { border-bottom: 0px; } #features .stairs .left { width: 30%; float: left; clear: both; margin-bottom: 100px; } #features .stairs .center { width: 30%; float: left; } #features .basement { clear: both; overflow: hidden; width: 90%; margin: 0 auto; } #features .basement .floor { display: block; background: none; margin: none; padding: none; } #features .basement .floor p { text-align: center; font-size: 2rem; margin-bottom: 0px; } #features .basement .left { width: 50%; float: left; padding-top: 40px; } #features .basement .left p { width: 90%; margin: 0 auto; } #features .basement .right { width: 50%; float: right; padding-top: 40px; } #features .basement .right p { width: 90%; margin: 0 auto; } #features .basement h3 { font-size: 3rem; letter-spacing: 2px; text-align: center; margin-bottom: 25px; border-bottom: 0px; } #features .basement .bardining { background: url(https://backpackersjapan.co.jp/preview/image/top-bardining.jpg) no-repeat top center transparent; height: 400px; background-size: cover; width: 100%; overflow: hidden; position: relative; } #features .basement .bardining h3 { color: #ffffff; font-size: 7rem; position: absolute; top: 42%; left: 0; right: 0; } #features .basement .box.bottom { clear: both; overflow: hidden; } #features .basement p.seemore { text-align: center; margin-top: 60px; } #event { width: 90%; margin: 0px auto 75px; overflow: hidden; padding: 70px 0 0; } #event h2 { font-size: 1rem; font-family: Futura, "Gill sans", Lato; letter-spacing: 2px; text-align: center; margin-bottom: 50px; } #event h2 .waku { padding: 5px 50px; border: 1px solid #333333; } #event .inner { display: flex; justify-content: space-between; } #event .sub { font-size: 1.5rem; margin-bottom: 75px; } #event .entry { width: 30%; margin: 0 3%; overflow: hidden; } #event .entry-inner { position: relative; text-align: center; background-color: #fff; } #event .entry .entry-inner .thumb { height: auto; overflow: hidden; border: 10px solid #fff; } #event .entry .thumb img { width: 100%; height: 13vw; max-width: 100%; max-height: 100%; object-fit: cover; } #event .entry-inner .title { font-family: Florsn, "Gill sans", "Gill sans MT", Lato, Calibri, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; font-weight: 600; text-align: left; position: relative; background: rgb(255, 255, 255); margin: 0px 0px; padding: 10px 20px; } #event .entry-inner .title h4 { padding: 8px 0 5px; margin: 0; text-align: left; } #event .entry-inner .title a { color: #111111; font-size: 16px; letter-spacing: 1px; font-weight: normal; } #event .entry-inner .title .date { position: absolute; bottom: 10px; left: 20px; font-size: 1.3rem; } #event p.seemore { text-align: center; margin-top: 50px; } #event p.seemore a { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; color: rgb(255, 255, 255); font-style: italic; background-color: rgb(29, 48, 56); font-size: 14px; padding: 7px 50px; } /*page*/ .page h2 { line-height: 35px; font-family: Futura, "Gill sans", Lato; letter-spacing: 2px; text-align: center; margin-bottom: 50px; } .page h2 .waku { font-size: 1rem; padding: 5px 50px; border: 1px solid #333333; } .page .box.left { float: left; width: 50%; } .page .box.right { float: right; width: 50%; } .page h2 .sub { text-align: center; } .page h3 { font-family: Futura, "Gill sans", Lato; letter-spacing: 2px; } .page-slug-hostel #header-inner, .page-slug-hostelen #header-inner, .page-slug-hosteltw #header-inner { background: url(https://backpackersjapan.co.jp/citan/img/hostel_cover3.jpg) no-repeat center bottom transparent; } #hostel .bestrate { text-align: center; } #hostel .bestrate p img { width: 90px; margin-top: 30px; } #hostel .bestrate p { color: #111111; } #hostel h3 { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; } #hostel .about h3 { color: #ffffff; display: inline-block; background-color: #1c2d34; } #hostel .parent { display: flex; justify-content: space-between; align-items: center; } #hostel #morning .parent.bottom, #berth #coffee .parent.middle { align-items: flex-start; padding: 20px 0 80px; } #hostel .about .box.left { width: 45%; padding: 3%; text-align:left; margin-top: -110px; z-index: 100; } #hostel .about .box.right { width: 55%; text-align: left; font-size: 1.6rem; margin: -50px 0 0 0; padding: 10px 1% 10px 5%; border-left: 1.1px solid #666666; } #hostel .about .box.right p { color: #1c2d34; margin-bottom: 10px; } #hostel .about .box.left h3 { font-size: 4rem; font-style: normal; letter-spacing: 1px; margin: 0 0 25px -10px; padding: 3px 0 3px 10px; } #hostel .about .box.left p { color: #1c2d34; font-size: 1.5rem; } .page-slug-hostelen #hostel .about .box.left h3 { font-size: 3.25rem; font-style: normal; letter-spacing: 1px; margin: 0 0 25px -10px; padding: 3px 10px 3px 10px; } .page-slug-hostelen #hostel .about .box.left p { font-size: 1.6rem; line-height: 2.4rem; } .page-slug-hostelen #hostel .about .box.right { font-size: 1.5rem; padding: 0px 1% 10px 5%; } #hostel .cover { background-size: cover; height: 450px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3%; margin-top: 150px; display:table; } #hostel .cover .wrap { display: table-cell; vertical-align: middle; } #hostel p.note { text-align: center; margin-top: 20px; color: #000000; } #hostel #information .cover { background: url(https://backpackersjapan.co.jp/citan/img/information.jpg) no-repeat center center transparent; background-size: cover;} #hostel #information .parent { display: inline-block; } #hostel #rooms .cover { background: url(https://backpackersjapan.co.jp/citan/img/room.jpg) no-repeat center center transparent; background-size: cover;} #hostel #facility .cover { background: url(https://backpackersjapan.co.jp/citan/img/amenity.jpg) no-repeat center bottom transparent; background-size: cover;} #hostel #plans .cover { background: url(https://backpackersjapan.co.jp/citan/img/package.jpg) no-repeat center bottom transparent; background-size: cover;} #hostel #rooms .box.right { float: none; } #hostel #information { margin-top: 30px; } #hostel #information .left { width: 50%; padding: 0 25px; margin-top: 50px; } #hostel #information .right { width: 50%; padding: 0 25px; margin-top: 50px; } #hostel #information h2, #hostel #rooms h2, #hostel #facility h2, #hostel #plans h2 { color: #ffffff; font-size: 6rem; font-family: 'Oswald', sans-serif; text-align: center; letter-spacing: 3px; margin-bottom: 10px; } #hostel #information p.sub, #hostel #rooms p.sub, #hostel #facility p.sub { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; font-size: 1.5rem; text-align: center; } #hostel #facility h2 { color: #ffffff; } #hostel #facility p.sub { color: #ffffff; } #hostel #information .left h3, #hostel #information .right h3 { text-align: center; margin-bottom: 30px; font-family: 'Gill Sans', Roboto, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; font-size: 2.5rem; letter-spacing: 3px; } #hostel #rooms { margin-top: 75px; clear: both; font-size: 16px; } #hostel #rooms .title h3 { color: #ffffff; margin-bottom: 20px; /*margin-left: -80px;*/ } #hostel #rooms .title .sub { color: #ffffff; /*margin-left: -80px;*/ } #hostel #rooms .title h3 span { background-color: rgba(29,45,52,0.9); font-size: 4.5rem; color: #ffffff; padding: 0 50px; font-family: 'Gill Sans', Helvetica, Roboto, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; font-style: italic; } #hostel #rooms .title .sub span { background-color: rgba(29,45,52,0.9); font-size: 1.75rem; color: #ffffff; padding: 0 50px; } #hostel #rooms #dorm, #hostel #rooms #female, #hostel #rooms #twin, #hostel #rooms #single, #hostel #rooms #qdouble, #hostel #rooms #kdouble, #hostel #rooms #family { overflow: hidden; clear: both; padding: 50px 0; } #hostel #rooms .box.left { width: 75%; height: 565px; } #hostel #rooms .md { background: url(https://backpackersjapan.co.jp/preview/image/mixed.jpg) no-repeat center center transparent; } #hostel #rooms .fd { background: url(https://backpackersjapan.co.jp/preview/image/female.jpg) no-repeat center center transparent; } #hostel #rooms .tw { background: url(https://backpackersjapan.co.jp/preview/image/twin.jpg) no-repeat left center transparent; } #hostel #rooms .sg { background: url(https://backpackersjapan.co.jp/citan/img/single.jpg) no-repeat right top -30px transparent; } @media (min-width:1600px) { #hostel #rooms .tw { background: url(https://backpackersjapan.co.jp/preview/image/twin.jpg) no-repeat center center transparent; } } #hostel #rooms .dtw { background: url(https://backpackersjapan.co.jp/citan/img/deluxtwin2109.jpg) no-repeat center center transparent; } #hostel #rooms .qdb { background: url(https://backpackersjapan.co.jp/preview/image/double.jpg) no-repeat center center transparent; } #hostel #rooms .kdb { background: url(https://backpackersjapan.co.jp/preview/image/king.jpg) no-repeat center center transparent; } #hostel #rooms .quad { background: url(https://backpackersjapan.co.jp/citan/img/quad.jpg) no-repeat center center transparent; } #hostel #rooms #quad .fee br.sp { display: none; } #hostel #rooms .right .price { display: inline-block; background-color: rgba(255,255,255, 0.9); padding: 10px 20px; /*margin-left: -80px;*/ } #hostel #rooms .right { padding-left: 0px; margin-left: -80px; } #hostel #rooms .right .sub { font-family: Futura, "Gill sans", Lato; } #hostel #rooms .box .sub { text-align: left; } #hostel #rooms .box img { padding: 0; } #hostel #rooms .box p.fee { margin-bottom: 10px; } #hostel #rooms #qdouble .box p.price, #hostel #rooms #kdouble .box p.price { line-height: 20px; } #hostel #rooms .text { margin-top: 30px; padding: 30px 20px; overflow: hidden; /*margin-left: -80px;*/ background-color: rgba(255,255,255,0.9); width: 90%; } #hostel #rooms .text ul { padding: 0; margin-left: 30px; } #hostel #rooms .text ul li { list-style-type: circle; float: left; padding-right: 30px; text-align: left; } @media (max-width:1550px) { #hostel #rooms .title h3 { margin-bottom: 0px; } #hostel #rooms .title h3 span { font-size:3.5rem; padding: 0 10px; } #hostel #rooms .title .sub span { padding: 0 10px; } #hostel #rooms .text { width: auto; } } @media (max-width: 1350px) { #hostel #rooms .title h3 { margin-bottom: 0px; padding: 0 10px; background-color: rgba(29,45,52,0.9); display: inline-block; } #hostel #rooms .title h3 span { font-size:3.5rem; padding: 0px; background: none; } } #hostel .vacancy { margin-top: 75px; margin-bottom: 125px; text-align: center; } #hostel .vacancy p.waku a { font-size: 1.3rem; font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; color: rgb(255, 255, 255); background-color: rgb(170, 170, 170); padding: 10px 75px; border-width: 1px; border-style: solid; border-color: rgb(102, 102, 102); border-image: initial; } #hostel .vacancy p.waku a { font-family: 'Gill Sans', Roboto, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; display: inline-block; width: 30%; padding: 0.4em; text-align: center; text-decoration: none; color: #fff; background:#1a3e40; border-bottom:4px solid #223130; border-radius: 4px; transition: .2s; color: #fff; } #hostel .vacancy p.waku a:hover { cursor: pointer; text-decoration: none; background:#223130; transform: translate3d(0, 4px, 0); transition: .2s; border-bottom: none; } #hostel .vacancy p.info { font-size: 1.4rem; } @media (max-width: 480px) { #hostel .vacancy p.waku a { padding: 3px 20px; width: auto; } } #hostel #plans #stocks { margin-top: 30px; } #hostel #plans #stocks p { text-align: center; font-size: 16px; margin: 35px 0 10px 0; } #hostel #plans #stocks hr { border-bottom: 2px solid #ccc; border-left: none; border-right: none; border-top: none; margin: 50px auto; opacity: 0.7; width: 2em; border-color: #000000; } #hostel #plans #stocks .parent { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; flex-wrap: wrap; } #hostel #plans #stocks .parent .children { width: 50%; padding: 0 5%; } #hostel #plans #stocks .parent .children h5 { font-weight: bold; text-align: center; font-size: 1.3rem; } #hostel #plans .more { font-size: 1.4rem; text-align: right; font-style: italic; } #hostel #plans p.center { text-align: center; } #hostel #plans .button { font-size: 1.3rem; display: inline-block; width: 30%; padding: 0.4em; text-align: center; text-decoration: none; color: #fff; background:#074c48; border-bottom:4px solid #143e3b; border-radius: 4px; transition: .2s; color: #fff; } #hostel #plans .button:hover { cursor: pointer; text-decoration: none; background:#143e3b; transform: translate3d(0, 4px, 0); transition: .2s; border-bottom: none; } #hostel #plans #stocks .parent .children .line { margin-top: -18px; width: 100%; position: relative; height: 15px; left: 0; top: 0%; background: linear-gradient(-45deg,#14584c 25%,transparent 25%,transparent 50%,#14584c 65%,#14584c 75%,transparent 75%,transparent); background: -webkit-linear-gradient(-45deg,#14584c 25%,transparent 25%,transparent 50%,#14584c 65%,#14584c 75%,transparent 75%,transparent); background-size: 3px 3px; } #hostel #facility .wrap { width: 35%; } #hostel #facility { } #hostel #facility .left { width: 50%; padding: 0 25px; margin-top: 50px; } #hostel #facility .right { width: 50%; padding: 0 25px; margin-top: 50px; } #hostel #facility h3 { text-align: center; font-size: 2.5rem; letter-spacing: 3px; font-family: 'Gill Sans', Roboto, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; margin-bottom: 2rem; } #hostel #amenity { max-width: 750px; margin: 50px auto; } #hostel #amenity h3 { text-align: center; font-size: 2.5rem; letter-spacing: 3px; font-family: 'Gill Sans', Roboto, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; margin-bottom: 2rem; } #hostel #fee { margin-top: 75px; } #hostel #fee h3 { text-align: center; font-size: 2.5rem; letter-spacing: 3px; font-family: 'Gill Sans', Roboto, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; margin-bottom: 2rem; } #hostel #fee ul { padding: 0px; width: 600px; margin: 40px auto 0; text-align: center; } #hostel #fee ul li { /* list-style: none; */ display: inline-block; margin: 20px 15px 0; padding: 3px 15px; border: 1px solid #aaaaaa; width: 160px; } #hostel #fee ul li span.price { display: block; font-family: "Roboto Slab", "Times New Roman", Garamond, "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-size: 1.5rem; font-style: italic; } .page-slug-coffee #header-inner, .page-slug-coffeeen #header-inner, .page-slug-coffeetw #header-inner { background: url(https://backpackersjapan.co.jp/citan/img/cafe_cover.jpg) no-repeat center bottom transparent; } .page-slug-coffee #header-inner #berth_logo, .page-slug-coffeeen #header-inner #berth_logo, .page-slug-coffeetw #header-inner #berth_logo { position: absolute; right: 20px; bottom: 20px; } .page-slug-coffee #header-inner #berth_logo img, .page-slug-coffeeen #header-inner #berth_logo img, .page-slug-coffeetw #header-inner #berth_logo img { width: 175px; } #berth { max-width: 1950px; margin: 0 auto; } #berth h3 { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; } #berth .about h3 { color: #ffffff; display: inline-block; background-color: #1c2d34; } #berth .parent { display: flex; justify-content: space-between; align-items: center; overflow: hidden; } #berth .about.parent { overflow: visible; } #berth #morning .parent.bottom, #berth #coffee .parent.middle { align-items: flex-start; padding: 20px 0 60px; } #berth .about .box.left { width: 45%; padding: 3%; text-align:left; margin-top: -110px; z-index: 100; } #berth .about .box.left .logo { display: none; } #berth .about .box.right { width: 55%; text-align: left; font-size: 1.6rem; margin: -50px 0 0 0; padding: 10px 1% 10px 5%; border-left: 1.1px solid #666666; } #berth .about .box.right p { color: #1c2d34; margin-bottom: 10px; } #berth .about .box.left h3 { font-size: 4rem; font-style: normal; letter-spacing: 1px; margin: 0 0 25px -10px; padding: 3px 0 3px 10px; } #berth .about .box.left p { color: #1c2d34; font-size: 1.5rem; } .page-slug-coffeeen #berth .about .box.left h3 { font-size: 3.25rem; font-style: normal; letter-spacing: 1px; margin: 0 0 25px -10px; padding: 3px 10px 3px 10px; } .page-slug-coffeeen #berth .about .box.left p { font-size: 1.6rem; line-height: 2.4rem; } .page-slug-coffeeen #berth .about .box.right { font-size: 1.5rem; padding: 10px 1% 10px 5%; } #berth .cover { background: url(https://backpackersjapan.co.jp/citan/img/morning19.jpg) no-repeat center center transparent; background-size:cover; height: 550px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3%; margin-top: 150px; display: table; } #berth .cover .wrap { display: table-cell; vertical-align: middle; } #berth .cover h3 { color: #ffffff; font-size: 6rem; font-family: 'Oswald', sans-serif; margin: auto; text-align: center; } #berth #morning .parent.top, #berth #coffee .parent.top, #berth #beans .parent.top { margin-top: 125px; background-color: #ffffff; } #berth .box.left { width: 50%; text-align: left; } #berth #morning .parent .box.right h4, #berth #coffee .parent .box.right h4, #berth #beans .parent .box.right h4 { color: #333333; font-size: 4rem; font-style: normal; letter-spacing: 1px; font-family: Roboto, 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; margin-bottom: 22px; font-style: italic; text-align: center; padding-bottom: 15px; border-bottom: 1px solid #999999; } #berth .box.left p { margin-bottom: 0; } #berth .box.right { width: 50%; text-align:left; padding: 0 3%; } .page-slug-coffeeen #coffee .box.right { line-height: 2.4rem; } #berth #morning h5, #berth #coffee h5, #berth #contact h5 { color: #333333; font-size: 2rem; text-align: center; font-family: "Gill sans", "Gill sans MT", Helvetica, "Robato", Calibri, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; letter-spacing: 3px; margin-top: 80px; } #berth #morning .time, #berth #coffee .time { font-size: 1.5rem; margin-bottom: 30px; letter-spacing: 2px; text-align:center; } #berth #morning .menu, #berth #coffee .menu { text-align: center; text-decoration: none; line-height:1; } #berth #morning .menu a, #berth #coffee .menu a { color: #ffffff; display: inline-block; padding: 10px 55px; border: 0px solid #333; border-radius: 20px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 1.6rem; font-weight: bold; font-style: normal; background-color: #6f8484; } #berth #morning .bottom .box.left { padding: 0 1.5%; } #berth #morning .bottom .box.right { padding: 0 1.5%; } #berth #coffee { text-align: center; } #berth #coffee .cover { background: url(https://backpackersjapan.co.jp/citan/img/coffee.jpg) no-repeat center top transparent; background-size:cover; height: 550px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3%; } #berth #beans .cover { background: url(https://backpackersjapan.co.jp/citan/img/guest.jpg) no-repeat center top transparent; background-size:cover; height: 550px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3%; } #berth #coffee .parent.bottom { clear: both; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; margin-top: 15px; } #berth #coffee .parent .children { width: 33%; } #berth #coffee .middle .box.left { padding: 0 1.5%; } #berth #coffee .middle .box.right { padding: 0 1.5%; } #berth #coffee .sub-plan { border: 1px dashed #AF6D0B; display: inline-block; padding: 2px 20px; margin-top: 15px; font-size: 1.4rem; background-color: rgba(226, 188, 82, 0.38) } #berth #coffee .sub-plan a { color: #333333; } #berth dl { margin-top: 0px; } #berth dl dt { font-weight: normal; line-height: 1.5em; margin: 0; } #berth dl dt span { font-size: 1.2rem; margin-left: 15px; color: #777777; } #berth dl dd { font-size: 16px; border-bottom: 1px solid #ddd; line-height: 1.6; margin: -1.5em 0 0.8em 18em; text-align: right; } #berth #coffee .parent.top { margin-top: 125px; background-color: #ffffff; } #berth #contact { text-align: center; } #berth #contact h5 { margin-bottom: 50px; } /* #coffee .box.left { width: 50%; text-align:left; } #coffee .box.right h3 { color: #333333; } #coffee .box.left p { margin-bottom: 0; } #coffee .box.left.bottom { width: 50%; text-align:left; padding: 3%; } #coffee .box.left.bottom p { color: #ffffff; } #coffee .box.right.bottom { width: 50%; text-align:left; padding: 0; } #coffee .box.right.bottom p { margin-bottom: 0; } #coffee #berth { margin: 0 auto; overflow: hidden; } #coffee #berth .left { width: 100%; height: 400px; } #coffee #berth .left.bg { background: url(https://backpackersjapan.co.jp/citan/image/berth-bg.jpg) no-repeat bottom right transparent; background-size: cover; } #coffee #berth .left .logo { position: absolute; width: 100%; text-align: center; top: 80px; } #coffee #berth .left .logo img { width: 250px; } #coffee #berth .bg { position: relative; } #coffee #berth .right { width: 100%; text-align: center; padding-top: 70px; } #coffee #berth .right .text { font-weight: bold; } #coffee #berth .right .text p { line-height: 36px; letter-spacing: 2.2px; } #coffee #berth .right .open h3 { font-size: 10px; } #coffee #about { margin-top: 50px; text-align: center; } #coffee #about h2 { margin-bottom: 30px; } #coffee #about h3 { font-size: 1.8rem; } #coffee #about .time { font-family: Futura, "Gill sans", Lato; font-size: 1.8rem; margin-top: 10px; letter-spacing: 1.5px; font-weight: bold; } #coffee #about .text { font-size: 1.3rem; font-weight: bold; line-height: 20px; } #coffee #menu { width: 750px; margin: 0 auto; margin-top: 125px; } #coffee #menu .logo { text-align: center; } #coffee #menu .logo img { width: 135px; } #coffee #menu h3 { text-align: center; font-family: Futura, "Gill sans", Lato; font-size: 1.5rem; letter-spacing: 5px; margin-top: 55px; } #coffee #menu .time { text-align: center; font-size: 1.7rem; letter-spacing: 3px;} #coffee #menu .with { text-align: center; } #coffee #menu .with img { width: 60px; margin: 0 15px; } #coffee #menu .with img.week { width: 150px; } #coffee #menu h4 { font-size: 2.7rem; letter-spacing: 2px; } #coffee #menu h3.special { margin: 80px 0 30px; font-size: 1.8rem; letter-spacing: 2px; } #coffee #menu .left { width: 42%; float: left; margin-top: 55px; } #coffee #menu .right { width: 42%; float: right; margin-top: 55px; } */ .page-slug-bardining #header-inner, .page-slug-bardiningen #header-inner, .page-slug-bardiningtw #header-inner { background: url(https://backpackersjapan.co.jp/citan/img/bar_cover2.jpg) no-repeat center top transparent; } .page-slug-bardining header #header-inner #lead, .page-slug-bardiningen header #header-inner #lead, .page-slug-bardiningtw header #header-inner #lead { position: absolute; top: 40%; left: 30px; color: #ffffff; } .fadeIn { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: fadeIn; animation-name: fadeIn; visibility: visible !important; } @-webkit-keyframes fadeIn { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } #select .element a img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; } #select .element a img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.9; } .sa { opacity: 0; transition: all .5s ease; } .sa.show { opacity: 1; transform: none; } .sa--lr { transform: translate(-100px, 0); } .sa--rl { transform: translate(100px, 0); } .sa--up { transform: translate(0, 100px); } #bardining { max-width: 1950px; margin: 0 auto; } #bardining h3 { font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; } #bardining .lounge h3 { color: #ffffff; display: inline-block; background-color: #1c2d34; } #bardining .parent { display: flex; justify-content: space-between; align-items: center; max-width: 1950px; margin: 0 auto; overflow: hidden; } #bardining .lounge.parent { overflow: visible; } #bardining .lounge .box.left { width: 45%; text-align:left; padding: 3%; margin-top: -110px; z-index: 100; } #bardining .lounge .box.right { width: 55%; text-align: left; font-size: 1.6rem; margin: -50px 0 0 0; padding: 0px 1% 10px 5%; border-left: 1.1px solid #666666; } #bardining .lounge .box.right p { color: #1c2d34; margin-bottom: 10px; } #bardining .lounge .box.left h3 { font-size: 4rem; font-style: normal; letter-spacing: 1px; margin: 0 0 25px -10px; padding: 3px 0 3px 10px; } #bardining .lounge .box.left p { color: #1c2d34; font-size: 1.5rem; } .page-slug-bardiningen #bardining .lounge .box.left h3 { font-size: 3.25rem; font-style: normal; letter-spacing: 1px; margin: 0 0 25px -10px; padding: 3px 10px 3px 10px; } .page-slug-bardiningen #bardining .lounge .box.left p { font-size: 1.6rem; line-height: 2.4rem; } .page-slug-bardiningen #bardining .lounge .box.right { font-size: 1.5rem; padding: 10px 1% 10px 5%; } #bardining #select ul { display: flex; justify-content: space-around; padding-left: 0; margin: 80px 0; } #bardining #select li { list-style: none; text-align: center; width: 30%; } #bardining #select li img { width: 95px; } #bardining #bar, #bardining #bunkbed, #bardining #dining, #bardining #dj { background: url(https://backpackersjapan.co.jp/citan/img/stone_bg.jpg) repeat center bottom transparent; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3% 70px; } #bardining #bar .bg, #bardining #dining .bg, #bardining #dj .bg { background: url(https://backpackersjapan.co.jp/citan/img/paper_bg.jpg) repeat center bottom transparent; height: 600px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3%; } #bardining #bar .cover { background: url(https://backpackersjapan.co.jp/citan/img/bardining1.jpg) no-repeat center center transparent; background-size: cover; height: 600px; z-index: 1000; padding: 0px 50px; margin: 50px 0 0; position: relative; top: 70px; } #bardining #bar .cover h3 { color: #111111; font-size: 16rem; font-family: 'Oswald', sans-serif; position: absolute; bottom: -50px; left: 15px; letter-spacing: 6px; } #bardining .parent { max-width: 1500px; } #bardining #bar .parent.top { margin-top: 200px; background: url(https://backpackersjapan.co.jp/citan/img/paper_bg.jpg) repeat center bottom transparent; } #bardining .box.left { width: 50%; text-align: center; } #bardining .parent .box.right h4 { color: #333333; font-size: 4rem; font-style: normal; letter-spacing: 1px; font-family: Roboto, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; font-style: italic; margin-bottom: 22px; text-align: center; padding-bottom: 15px; border-bottom: 1px solid #999999; } #bardining .box.left p { margin-bottom: 0; } #bardining .box.right { width: 50%; text-align: left; padding: 20px 3% 0; } #bardining .box.left .photo { text-align: left; } #bardining .box.right .photo { text-align: right; } #bardining .parent .box.left h4 { color: #ffffff; font-size: 2rem; text-align: center; font-family: "Gill sans", "Gill sans MT", Helvetica, "Robato", Calibri, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; letter-spacing: 4px; } #bardining .parent .box.left .sub { font-size: 1.5rem; margin-bottom: 30px; letter-spacing: 2px; } #bardining .parent .box.left .time { margin-bottom: 22px; } #bardining .parent .box.left .menu { display: inline-block; padding: 10px 55px; text-align: center; text-decoration: none; line-height:1; transition: .3s; border-radius: 20px; font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; font-size: 1.6rem; font-weight: normal; font-style: italic; } .page-slug-bardiningen #bar .box.right p { line-height: 2.4rem; } #bardining a.btn-hover { border: 1px solid #ffffff; background: rgb(255, 255, 255, 0.1); color: #ffffff; } #bardining .parent.bottom { background-color: #1c2d34; } #bardining .bottom .box.left { width: 50%; padding: 3%; } #bardining .bottom .box.left p { color: #ffffff; } #bardining .bottom .box.right { width: 50%; text-align:left; padding: 0; } #bardining .bottom .box.right p { margin-bottom: 0; } #bardining #bunkbed { background: none; } #bardining #bunkbed .right { padding: 3%; text-align: center; } #bardining #bunkbed .right .pick { font-family: 'Oswald', sans-serif; font-size: 2rem; text-decoration: underline; color: #777777; } #bardining #bunkbed .right h4 { font-family: 'Markazi Text', serif; font-size: 4.5rem; margin-bottom: 30px; } .page-slug-bardiningen #dining .box.right p { line-height: 2.4rem; } #bardining #dining .cover { background: url(https://backpackersjapan.co.jp/citan/img/bardining2.jpg) no-repeat center top transparent; background-size: cover; height: 600px; z-index: 1000; padding: 0px 50px; margin: 50px 0 0; position: relative; top: 70px; } #bardining #dining .cover h3 { color: #111111; font-size: 14rem; font-family: 'Oswald', sans-serif; position: absolute; bottom: -100px; left: 15px; letter-spacing: 6px; } #bardining #dining .parent.top { margin-top: 265px; background: url(https://backpackersjapan.co.jp/citan/img/paper_bg.jpg) repeat center bottom transparent; } #bardining #dining #menu { margin-top: 80px; } #bardining #dining #menu h5 { color: #333333; font-size: 2rem; text-align: center; font-family: "Gill sans", "Gill sans MT", Helvetica, "Robato", Calibri, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; letter-spacing: 3px; margin-bottom: 10px; } #bardining #dining #menu .sub { font-size: 1.5rem; margin-bottom: 30px; letter-spacing: 2px; text-align:center; font-family: "Gill sans", "Gill sans MT", Helvetica, "Robato", Calibri, 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; font-style: italic; } #bardining #dining #menu .parent { clear: both; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #bardining #dining #menu .children { width: 25%; } #bardining #dining #menu .children img { margin: 2px 4px; } #bardining #dining .fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } figure.photo { font-family: 'Gill Sans', Arial, sans-serif; position: relative; float: left; overflow: hidden; width: 100%; color: #000000; text-align: center; } figure.photo * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.photo img { opacity: 1; width: 100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.photo:after { background: #ffffff; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; content: ''; opacity: 0.75; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } figure.photo figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } figure.photo h2,figure.photo p { margin: 0; width: 100%; opacity: 0; } figure.photo h2 { padding: 0 30px; font-weight: 400; text-transform: uppercase; } figure.photo p { padding: 0 50px; font-size: 0.8em; font-weight: 500; } figure.photo a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.photo:hover img, figure.photo.hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } figure.photo:hover:after, figure.photo.hover:after { -webkit-transform: scaleX(1); transform: scaleX(1); } figure.photo:hover figcaption h2, figure.photo.hover figcaption h2, figure.photo:hover figcaption p, figure.photo.hover figcaption p { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } figure.photo:hover figcaption h2, figure.photo.hover figcaption h2 { opacity: 1; } figure.photo:hover figcaption p, figure.photo.hover figcaption p { opacity: 0.7; } .page-slug-bardiningen #dj .box.right p { line-height: 2.4rem; } #bardining #dj .cover { background: url(https://backpackersjapan.co.jp/citan/img/djlounge.jpg) no-repeat center top transparent; background-size: cover; height: 600px; z-index: 1000; padding: 0px 50px; margin: 50px 0 0; position: relative; top: 70px; } #bardining #dj .cover h3 { color: #111111; font-size: 14rem; font-family: 'Oswald', sans-serif; position: absolute; bottom: -100px; left: 15px; letter-spacing: 6px; } #bardining #dj .parent.top { margin-top: 200px; background-color: #ffffff; } #bardining #dj .box.right { text-align: center; } #bardining #dj .parent .box.right .schedule { display: inline-block; padding: 10px 55px; text-align: center; text-decoration: none; line-height:1; transition: .3s; border-radius: 20px; font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, serif; font-size: 1.6rem; font-weight: normal; font-style: italic; text-align: center; } #bardining #dj .parent .box.right a.btn-hover { border: 1px solid #1d3038; background: rgb(29, 48, 56, 0.1); color: #1d3038; margin: 25px 0px 20px; } .page #access h2 { margin-bottom: 30px; } .section_post #access #map img { padding-top: 0px; } .page-slug-access header #header-inner:before, .page-slug-accessen header #header-inner:before, .page-slug-accesstw header #header-inner:before { content:""; display: block; padding-top: 35px; max-height: 860px; } #access .sp { display: none; } #access #map { position: relative; text-align: center; } #access #map .tabs__content { margin-bottom: 50px; } #access #map .ui-tabs-panel { border-top: 0px; margin-bottom: 50px; } #access #map #picture img { max-image: 1000px; } #access #map ul { padding: 0; overflow: hidden; margin: 0 auto 50px; width: 200px; font-family: Futura, "Gill sans", Lato; font-size: 1rem; letter-spacing: 2px;} #access #map ul li { text-align: center; float: left; list-style: none; } #access #map ul li.ui-tabs-selected { } #access #map ul li a { color: #333333; background-color: rgba(255,255,255,0.8); width: 100px; display: block; } #access #map ul li.ui-tabs-selected a { color: #ffffff; background-color: #1d3038; } #access #map ul li a:hover { opacity: 0.5; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; transition: all ease .8s; } #access #map .text { text-align: center; margin-bottom: 5px; } #access #map #picture p { margin-bottom: 0; } #access #address { text-align: center; } #access h2 span.sub { text-align: center; margin-top: 0; display: block; } #access #transfer { text-align: center; margin-top: 80px; } #access #transfer h3 { font-size: 1.8rem; } #access #transfer .from { margin: 40px 0; padding-bottom: 40px; border-bottom: 1px dashed #333333; } #access #transfer .to {margin: 40px 0; } .page-slug-booking, .page-slug-bookingen, .page-slug-bookingtw { background-color: #e8e8e8; } .page-slug-booking .main_section, .page-slug-bookingen .main_section, .page-slug-bookingtw .main_section { padding-bottom: 175px; } .page-slug-booking h2, .page-slug-bookingen h2, .page-slug-bookingtw h2 { margin-bottom: 20px; } .page-slug-booking #header-inner, .page-slug-bookingen #header-inner, .page-slug-bookingtw #header-inner { background: url(https://backpackersjapan.co.jp/citan/img/booking_cover.jpg) no-repeat center bottom transparent; } .page-slug-booking .main_section .customize-container, .page-slug-bookingen .main_section .customize-container, .page-slug-bookingtw .main_section .customize-container { margin-top: 0px; } #booking .parent { position: relative; background-color: #ffffff; width: 100vw; position: relative; left: 50%; right: 50%; padding-bottom: 75px; margin-left: -50vw; margin-right: -50vw; display: flex; } #booking .parent.bottom { background: none; } #booking h2 { text-align: left; z-index: 999; position: relative; top: -15px; } #booking .parent.bottom h2 { top: -45px; } #booking .parent.bottom .sub { margin-top: -30px; } #booking h2 .waku { border: none; font-size: 3rem; color: #ffffff; background-color: #2c3638; font-style: italic; } #booking .sub { text-align: left; } #booking .cover { background: url(https://backpackersjapan.co.jp/citan/img/booking.jpg) no-repeat center bottom transparent; background-size: cover; height: 550px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 3%; margin-top: 0px; display: table; } #booking #note { width: 100%; margin: 0 auto; } #booking #note p.sub { text-align: left; padding-left: 50px; font-style: italic; } #booking .box.left { float: none; width: 70%; padding-left: 50px; } #booking .box.right { width: 30%; } #booking ul li { margin-bottom: 10px; } #booking #booking_modal { padding-top: 8rem; } #booking #external_site_guide { display: none; } #booking_stay .post-667 { padding-top: 100px; } #booking_stay h4 { max-width: 1024px; margin: 0 auto; } @media only screen and (min-width: 768px) { #booking_stay .sticky_table table { max-height: inherit; } } @media only screen and (min-width: 768px) { #booking_stay .total-table { max-width: 1024px; margin: 0 auto; } } /* Bnr -----------------------------------------*/ #booking .full { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .Bnr { position: absolute; right: 10px; margin: 0 auto; width: 350px; display: none; font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,sans-serif !important; } .Bnr .Bnr__img { position: fixed; bottom: 0; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); z-index: 1000; } .Bnr__img__inner { width: 350px; height: 270px; box-sizing:border-box; padding: 10px 20px; background-color: rgba(37, 64, 72,.9); } .Bnr .Bnr__img__inner a { display: block; } .Bnr .Bnr__img p.close { position: absolute; right: 10px; top:10px; opacity: .7; } .Bnr .Bnr__img p.close a { display: block; width: 20px; height: 25px; text-align: center; } .Bnr .Bnr__img p.close a span { display: block; width: 1px; height: 1px; overflow: hidden; } .Bnr .Bnr__img p.close a i { font-size: 20px; z-index: 888; color: #fff; } .Bnr .Bnr__img　p.close { } .Bnr .Bnr__img .title { text-align: center; } .Bnr .Bnr__img .title .bg { color: #ffffff; font-weight: bold; background: url(https://backpackersjapan.co.jp/citan/img/buil_w.png) no-repeat center left transparent; background-size: 20px; padding-left: 30px; } #booking .Bnr .Bnr__img .box.left { padding: 0; width: 140px; } #booking .Bnr .Bnr__img .box.right { width: 150px; display: block; padding-top: 20px; border-top: 2px dashed #fff;} #booking .Bnr .Bnr__img .box.right p { color: #ffffff; font-size: 15px; } #booking .Bnr .Bnr__img .box.right p a { background-color: #828282; color: #ffffff; border-radius: 15px; text-align: center; font-size: 13px; } .Bnr .Bnr__img .left img { width: 140px; float: left; padding-left: 0; } #booking #tab-booking .lead1 { margin-top: 30px; margin-bottom: 0px; font-weight: bold; font-size: 1.5rem; text-align: center; } #booking #tab-booking .lead2 { margin-top: 0px; margin-bottom: 100px; font-weight: bold; font-size: 1.5rem; text-align: center; } #booking #tab-booking .pc { display: block; } #booking #tab-booking .sp { display: none; } #booking .parent.plan { padding-bottom: 20px; } #booking .plan a { color:#42b6ca; text-decoration: underline; } #booking .plan a:hover { text-decoration: none; } #booking .plan .box.left { width: 50%; } #booking .plan .box.right { width: 40%; margin-left: 10%; margin-top: 100px; } #booking .plan .box.right img { width: 375px; } #booking .plan .box.right a:hover img { opacity: 0.8; } .page-slug-contact-us #header-inner { display: none; } #contact { text-align: center; } #contact h3 { margin-top: 50px; } @media (max-width: 1200px) { .Bnr { display: none!important; } #booking .exlink { display: block; width: 100%; max-width: 650px; padding: 30px 50px; margin: 0 auto; background: #ffffff; text-align: center; margin-top: 80px; } #booking .exlink .title { text-align: center; } #booking .exlink .title .bg { font-weight: bold; background: url(https://backpackersjapan.co.jp/citan/img/buil.png) no-repeat center left transparent; background-size: 20px; padding-left: 30px; } #booking .exlink a { background-color: rgba(67,100,95,1); border-radius: 25px; padding: 10px 20px; color: #ffffff; } #booking #tab-booking .pc { display: none; } #booking #tab-booking .sp { display: block; } .page-slug-bookingtw #booking #tab-booking .pc { display: block; } } @media (min-width: 1200px) { #booking .exlink { display: none; } } .page-slug-dj-schedule #header-inner, .page-slug-dj-scheduleen #header-inner, .page-slug-dj-scheduletw #header-inner { background: url(https://backpackersjapan.co.jp/citan/img/music_coverb.jpg) no-repeat center bottom transparent; } #music dl { margin-top: 0px; margin: 0 auto; text-align: center; } #music dl dt { font-weight: normal; line-height: 1.5em; margin: 0; text-align: center; position: relative; } #music dl dt span { font-size: 1.2rem; margin-left: 15px; color: #777777; } #music dl dd { font-size: 16px; border-bottom: 1px solid #ddd; line-height: 1.6; margin: 0em 0 1.8em; text-align: center; position: relative; padding-bottom: 0.8em; } #music { width: 100%; margin: 0 auto; max-width: 1000px; } #music #title { background: url(https://backpackersjapan.co.jp/citan/image/music-bg.jpg) no-repeat bottom center transparent; background-size: cover; width: 100%; height: 300px; margin: 0 auto; max-width: 1000px; position: relative; } #music #title h2 { color: #ffffff; top: 130px; position: absolute; left: 0; right: 0; font-style: italic; } #music #title h2 span { display: block; color: #ffffff; } #music #vision { text-align: center; margin-top: 50px;} #music #vision p { font-weight: bold; font-size: 1.6rem; letter-spacing: 1px; line-height: 27px; } #music #vision h3 { font-size: 1.8rem; font-family: Futura, "Gill sans", Lato; } #music #event { text-align: center; margin-top: 100px; } #music #event h2 { margin-bottom: 35px; } #music #event p { font-size: 1.6rem; font-weight: bold; } #music #event p span { font-size: 1.3rem; } #music #schedule { margin-top: 100px; } #music #column { height: 400px; max-width: 980px; margin: 0 auto; } #music .box.left { width: 25%; text-align: center; height: 400px; background: #dcdcdc; } #music .box.left .calender { margin-top: 115px; } #music .box.left .calender img { width: 55px; } #music .box.left h2 { margin-top: 0px; color: #111; font-size: 1.6rem; text-align: center; line-height: 20px; padding-left: 0px; margin-bottom: 3px; border-bottom: 1px solid; padding-bottom: 5px; display: inline-block; } #music .box.left .sub { color: #777777; font-size: 1.3rem; } #music .box.right { width: 75%; padding: 30px 50px 50px; height: 400px; overflow-y: scroll; background-color: #ffffff; } #music .box.right h3 { margin-top: 30px; font-size: 1.8rem; margin-bottom: 50px; } #music .box.right h4 { font-family: Futura, "Gill sans", Lato; font-size: 1.5rem; margin-bottom: 20px; letter-spacing: 1px; } #music .box.right p { font-size: 1.3rem; } #music .box.right p a { color: #333333; border-bottom: 1px dotted; padding-bottom: 1px; margin-left: 30px; } #music .box.right p a:hover { color: #333333; border-bottom: 0px; } #music .box.right p a.sub { margin-left: 0px; } #music .box.right::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } #music .box.right::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); } .single-mec-events .mec-events-meta-group-countdown { display: none; } #music .mec-event-calendar-classic .mec-calendar-side .mec-calendar-table { min-height: inherit; } .page-slug-faq #header-inner, .page-slug-faqen #header-inner, .page-slug-faqtw #header-inner { display: none; } #faq h3 { margin-top: 50px; margin-bottom: 20px; font-size: 2rem; letter-spacing: 0; padding: 5px 10px; display: inline-block; } #faq h3.book { background-color: #f3e68c; } #faq h3.facility { background-color: #f7bfa5; } #faq ul { list-style: none; padding-left: 5px; } #faq ul li::before { content:"-"; padding-right: 5px; } #faq ul li { } #faq ul li a { color: #607d8b; } #faq ul li a:hover { color: #111111; } .remodal h1 { text-align: left; font-size: 2.5rem; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed; font-style: italic; line-height: 3.5rem; } .remodal p { text-align: left; } .page.page-slug-privacy-policy header #header-inner, .page.page-slug-privacy-policyen header #header-inner { display: none; } .note { padding: 0 20px; } .note p { font-size: 100%; line-height: 1.8; } .note a { color: #666666; } .note h1 { font-size: 150%; } .note h2 { font-size: 90%; font-weight: normal; font-family: '游ゴシック Medium', 'Yu Gothic Medium','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif; line-height: 1.8; padding-top: 4em; padding-bottom: 0.8em; text-align: left; } .note h2.page-sub { padding-top: 0.5em; padding-bottom: 3em; } @media screen and (max-width:834px) { .note p { font-size: 93%; } .note h2 { font-size: 100%; } } /*sidebar css part start*/ .side_bar { width: 300px; margin: 45px 0 0 0; padding: 0; float: right; max-width: 100%; } .single .side_bar { margin-top: 10px; } .side_bar h3 { color: rgb(52, 52, 52); font-size: 18px; font-weight: normal; margin: 10px 0 5px 0; } .widget{ width: 100%; height: auto; padding: 0; margin-bottom: 14px; float: left; max-width: 100%; } .widget_search input { border: 1px solid #c9c9c9; width: 100%; height: 37px; margin: 0; padding: 0 5px; float: left; font-style: italic; font-size: 14px; } .widget_search input[type="submit"] { width: 30px; height: 37px; background: url(images/search_side.png) no-repeat 0 9px; float: left; margin-left: -30px; border: none; display:none; } .widget .sub-menu { margin: 0; padding-left: 20px; } .widget ul { float: left; margin: 0; padding: 0; width: 100%; } .widget ul li { width: 100%; padding: 3px 0; list-style: none; font-size: 15px; font-weight: normal; border-bottom: 1px solid #c5c5c5; } .widget ul li a { color: #181818; font-size: 15px; font-weight: normal; } .top_footer .widget ul li a, .top_footer .widget-title{ color: #FFFFFF;} #brand_btn { color: #FFF; font-size: 14px; font-weight: normal; padding: 5px 10px; background-color: #00bee0; float: left; margin: 20px 0 0px 0px; } #design_btn { margin: 20px 10px; float: left; color: #FFF; font-size: 14px; font-weight: normal; padding: 5px 10px; background-color: #00bee0; } #brand_btn:hover, #design_btn:hover { color: #000; } .widget_recent_entries ul { list-style: none; margin: 0; padding: 0; } .widget_recent_entries ul li { width: 100%; height: auto; padding: 10px 0; margin: 0; float: left; max-width: 100%; border-bottom: 1px solid #c5c5c5; } .widget_recent_entries ul li img { float: left; margin-right: 10px; max-width: 70px; height: auto; } .widget_recent_entries ul li p { color: #181818; font-size: 15px; font-weight: normal; } .widget_recent_entries ul li span { color: #636363; font-size: 15px; font-weight: normal; font-style: italic; } /*sidebar css part end*/ /*footer part start*/ .main_footer { width: 100%; height: auto; margin: 0; padding: 0; float: left; max-width: 100%; margin-top: 0px; position: relative; } .main_footer .top_footer .container { position: relative; } .main_footer .top_footer .left .logo img { width: 150px; } .top_footer { width: 100%; height: auto; margin: 0; padding: 0px 0px 20px 0px; float: left; max-width: 100%; background-color: #1c1c1c; } .top_footer #boshu { margin-top: 50px; } .top_footer #boshu a { padding: 10px 30px; background: #ffffff; color: #333; border-radius: 2px; } .top_footer .left img { width: 330px; } .top_footer .customize-container { position: relative; } .top_footer .left { color: #ffffff; padding-top: 75px; } .top_footer .left a { margin-right: 15px; } .top_footer .left a img { width: 26px; } .top_footer .left .link a { padding: 0 10px; color:#ffffff; margin: 0; } .top_footer .left .link a:hover { } .top_footer .right { position: absolute; right: 0; bottom: 0; } .top_footer .right a { margin-left: 50px; } .top_footer .right a img { width: 160px; } .top_footer .right p .toco img { margin-top: 33px; } .footer-widget ul { margin: 0; padding: 0; } .footer-widget h3 { margin: 26px 0; font-size: 16px; color: #f6f6f6; text-transform: uppercase; display: inline-block; } .footer-widget li { margin: 0; padding: 2px 15px;list-style: none; font-size: 14px; font-weight: normal; color: #c8c8c8; } .arrow { background: url(images/arrow.png) no-repeat 0px 6px !important; width: 100%; margin: 5px 0 !important; float: left; } .arrow div { width: 100%; float: left; } .news_update label, .footer-widget { color: #FFF; font-size: 14px; color: #c8c8c8; } .social_icon { list-style: none; float: left; } .social_icon li { float: left; padding: 0 5px; margin: 0; transition: ease 0.5s; -webkit-transition: ease 0.3s; } .social_icon li:hover { margin-top: -5px; cursor: pointer; } .social_icon li h3 { margin: 12px 0 23px 0; font-size: 16px; color: #f6f6f6; text-transform: uppercase; } .bottom_footer { width: 100%; height: auto; margin: 0; padding: 20px 0; float: left; max-width: 100%; background-color: #2a2a2a; } .bottom_footer .customize-container { margin-top: 30px; } .bottom_footer p { text-align: center; padding: 0; margin: 0px 0; color: #b3b3b3; font-size: 14px; font-weight: normal; } .bottom_footer ul { float: right; margin: 0; padding: 0; } .bottom_footer ul.icon { display: none; margin-bottom: 20px; } .bottom_footer ul li { float: left; margin: 0; padding: 0; list-style: none; border-right: 0px solid #b3b3b3; } .bottom_footer ul li img { width: 25px; } .bottom_footer ul li:last-child { border-right: none; } .bottom_footer ul li a { padding: 0 15px; color: #b3b3b3; font-size: 14px; font-weight: normal; } .bottom_footer ul li a:hover { color: #00bee0; } .address_li { padding-left: 0 !important; } /*footer css part ending*/ /** customizable gallery * ----------------------------------------------------------------------------- */ .gallery img { margin: 0; padding:0; } .gallery { margin-bottom: 20px; } .gallery-item { float: left; margin: 0 4px 4px 0; overflow: hidden; position: relative; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 48%; max-width: -webkit-calc(50% - 4px); max-width: calc(50% - 4px); } .gallery-columns-3 .gallery-item { max-width: 32%; max-width: -webkit-calc(33.3% - 4px); max-width: calc(33.3% - 4px); } .gallery-columns-4 .gallery-item { max-width: 23%; max-width: -webkit-calc(25% - 4px); max-width: calc(25% - 4px); } .gallery-columns-5 .gallery-item { max-width: 19%; max-width: -webkit-calc(20% - 4px); max-width: calc(20% - 4px); } .gallery-columns-6 .gallery-item { max-width: 15%; max-width: -webkit-calc(16.7% - 4px); max-width: calc(16.7% - 4px); } .gallery-columns-7 .gallery-item { max-width: 13%; max-width: -webkit-calc(14.28% - 4px); max-width: calc(14.28% - 4px); } .gallery-columns-8 .gallery-item { max-width: 11%; max-width: -webkit-calc(12.5% - 4px); max-width: calc(12.5% - 4px); } .gallery-columns-9 .gallery-item { max-width: 9%; max-width: -webkit-calc(11.1% - 4px); max-width: calc(11.1% - 4px); } .gallery-columns-1 .gallery-item:nth-of-type(1n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n) { margin-right: 0; } .gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1), .gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1), .gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1), .gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) { clear: left; } .gallery-caption { background-color: rgba(0, 0, 0, 0.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; line-height: 1.5; margin: 0; max-height: 50%; opacity: 0; padding: 6px 8px; position: absolute; bottom: 0; left: 0; text-align: left; width: 100%; } .gallery-caption:before { content: ""; height: 100%; min-height: 49px; position: absolute; top: 0; left: 0; width: 100%; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } .wp-caption { background: #00BEE0; max-width: 100%; margin-bottom: 14px; padding: 5px; text-align: center; } .wp-caption a { border-bottom: none; } .wp-caption img { margin: 0; max-width: 100%; height: auto; } .wp-caption.alignleft { margin-right: 20px; } .wp-caption.alignright { margin-left: 20px; } .wp-caption.alignnone { width: 100%!important; overflow: hidden; } .wp-caption.alignnone img { margin: 0 auto; max-width: 100%!important; } .wp-caption-text { color: #fff; font-size: 14px; font-weight: bold; padding: 8px 0 8px 0; margin: 0; } .sticky { } .gallery-caption { color: #fff; } /* PRASHANT JAYSWAL */ #comments li { list-style: none outside none; clear:both; } .comments-title { margin: 10px 0; } .post-comment a { cursor: default !important; } .post-comment a:hover { color: #00BEE0 !important; } a.more { color: #000; font-size: 15px; font-weight: bold; margin-right: 1%; } a.more:hover { color: #00BEE0; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-title { font-size: 18px; font-weight: normal; text-transform: uppercase; } .avtar { float: left; margin-right: 10px; } .fn a, a.reply { color: #00BEE0; text-transform: uppercase; } .comment-respond { margin-top: 40px; padding-left: 15px; } .comment-form input, .comment-form textarea { padding: 5px 10px; color: #000; border: 1px solid #00BEE0; background: #ececec; width: 50%; } .comment-form textarea { width: 70%; } .comment-form input[type='submit'] { background-color: #00BEE0; color: #e7e5e5; width: auto; padding:5px !important; } .form-submit { width: 50%; margin-left:70px; } .comment-reply-title { font-size: 18px; } .comment-reply-link { float: right; } #comments li article { padding: 10px; } .customizable-nav-next, .customizable-nav-previous { padding-bottom: 20px; padding-top: 10px } li.menu-divider:last-child {display:none;} .customizable-not-found { padding: 20px 0; } .customizable-not-found p { font-size:34px; } #wp-calendar, #wp-calendar th, #wp-calendar td { border-width:0px; } .side_bar .children { padding-left:25px; } .side_bar .children li{ border-bottom:none; } .side_bar .sub-menu li{ border-bottom:none; } .site-description { text-align: center; } .side_bar .tagcloud a { border: 1px solid #000; color: #000; font-size: 100% !important; } .top_footer .tagcloud a { border: 1px solid rgb(229, 229, 229); color: #fff; font-size: 85% !important; } .tagcloud a { border-radius: 8px; display: inline-block; margin-bottom: 10px; margin-right: 6px; padding: 5px 8px; text-decoration: none; transition: all 0.17s ease-in-out 0s; } .tagcloud { text-align: left; } .tagcloud a:hover { border: 1px solid #2a6496; color: #2a6496; } /**** H O M E - P A G E L *****/ .no-padding { padding:0px !important; } .no-padding-left{ padding-left:0px !important; } .no-padding-right{ padding-right:0px !important } .customizable-home-title h6 { font-size: 13px; margin: 0; text-align: center; width: 100%; } .customizable-home-title h6:after { border-top: 1px solid #6E6E6E; content: " "; display: inline-block; margin: 0 0 5px; width: 25%; } .customizable-home-title h6:before { border-top: 1px solid #6E6E6E; content: " "; display: inline-block; margin: 0 0 5px; width: 25%; } .customizable-home-title h6 img{ vertical-align: top; } .customizable-home-title{ margin-bottom:20px; margin-top:20px; } .customizable-home-title h1{ font-size:20px; color:#212121; text-align:center; font-weight:bold; text-transform:uppercase; } .customizable-home-icom{ margin-bottom:20px; } .customizable-home-icom .customizable-post{ padding-bottom: 20px; padding-top: 10px; text-align:center; } .customizable-home-icom .customizable-post:hover{ background-color:#fafafa; border-bottom:1px solid #CCC; } .customizable-home-icom .back-icon{ background-color: rgb(0, 190, 224); height: 50px; margin: 21px auto; padding: 2px 0; transform: rotate(45deg); width: 50px; } .customizable-home-icom .back-icon img{ color: rgb(118, 118, 118); height: 20px; margin: 12px auto; transform: rotate(-45deg); width: 20px; } .icon-center { color: #767676; margin: 11px 0 !important; } .customizable-home-icom h1{ font-size:16px; color:#212121; text-transform:uppercase; } .customizable-home-icom p{ font-size:14px; color:#6b6b6b; line-height: 25px; padding-top: 15px; } /****** customizable-latest-post *********/ .post-blog{ margin-bottom: 20px; margin-top: 20px; width:100%; } .post-blog:hover{ background-color:#FAFAFA; } .post-blog h2 a{ font-size:16px; color:#428bca; text-transform:inherit; } .post-blog h2 a:hover{ color:#2A6496; text-decoration:none; } .post-blog span{ font-size:13px; color:#212121; font-weight:normal; } .post-blog p{ font-size:13px; color:#212121; font-weight:normal; text-align:justify; } .post-blog .post-comment{ border-top:1px dotted #d7d7d7; padding-bottom: 10px !important; padding-top: 10px !important; border-bottom: 1px solid #CCCCCC; } /**************/ .download-theme{ background-color:#00bee0; padding: 10px 0 !important; margin-top: 30px; } .download-theme p{ color:#FFF; margin: 10px 0; font-size:18px; } .download-button { background-color: #00D2F7; border-color: rgba(0, 0, 0, 0); border-radius: 1px; color: #FFFFFF; margin: 5px 0 !important; } .download-button:hover{ background-color: #FFFFFF; border: 1px solid #00D2F7; border-radius: 1px; color: #00D2F7; } .post-comment a{ color:#000; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } .rslides { margin: 0 auto; } .events { list-style: none; } .callbacks_container { position: relative; float: left; width: 100%; margin-bottom:20px; } .rslides_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 52%; left: 0; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 38px; background: transparent url("images/themes.gif") no-repeat left top; margin-top: -45px; } .rslides_nav:active { opacity: 1.0; } .rslides_nav.next { left: auto; background-position: right top; right: 0; } .customizable-postcat{ clear:both; } .form-allowed-tags { display: none; } .comment-form label{ width:65px; } .customizable-default-pagination { clear: both; display: table; margin-bottom: 15px; padding: 15px !important; width: 100%; } .customizable-previous-link { color: #428bca; float: left; } .customizable-previous-link a { color: #428bca; } .customizable-previous-link a:hover { color: #2a6496; } .customizable-next-link { color: #428bca; float: right; } .customizable-next-link a { color: #428bca; } .customizable-next-link a:hover { color: #2a6496; } /******************************/ @media (min-width:1920px) { #loader img { max-width: auto; } .home header .logo img, .page-slug-en header .logo img, .page-slug-tw header .logo img { max-width: auto; } } @media (max-width:1350px) { .header_right { width: 90%; } .customize-menu ul { left: 21%; } .customize-menu > ul > li { margin: 0 2px; } .page .customize-menu > ul > li, .archive .customize-menu > ul > li, .single .customize-menu > ul > li { margin: 0 2px; } .customize-menu ul li a { padding: 10px 10px; } #menu_header .lang span { width: 40px; } } @media (max-width:1250px) { .page #header-inner, .archive #header-inner, .single #header-inner { width: 100%; } .home header .open h3, .page-slug-en header .open h3, .page-slug-tw header .open h3 { font-size: 3rem; } .home header .open p, .page-slug-en header .open p, .page-slug-tw header .open p { font-size: 1.7rem; } .header_right { width: 97%; } .customize-container{ width:auto; } .single .customize-container{ width:970px; } .main_section #concept .box { width: 75%; } .main_section #concept .box h3 span.sub { display: block; } #features .hostel .right { padding-right: 0; } #features .hostel .left { } #features .coffee .left { margin-top: 0px; padding-left: 0; } #features .lounge .right { padding-right: 0; } /*.page_logo { width: 200px; } .page_logo img { width: 200px; } .customize-menu ul li a { padding: 10px 10px; } */ } @media (min-width:1200px) { .hamburger .hamburger__icon, .hamburger .hamburger__icon:before, .hamburger .hamburger__icon:after { background-color: #dd0000; } .fat-nav { display: none; } .customize-menu .menu { display: block; } } @media (max-width:1200px) { header .sp { display: block; z-index: 9999; position: relative; } .customize-menu .menu { display: none; z-index: 9999; } header .spmenu{ height: 20px; position: fixed; right: 20px; /*top: 36px;*/ margin-top: 36px; width: 30px; z-index: 9999; } .menu__line{ background: #009688; display: block; height: 2px; position: absolute; transition:transform .3s; width: 100%; } .menu__line--center{ top: 9px; } .menu__line--bottom{ bottom: 0; } .menu__line--top.active{ top: 8px; transform: rotate(45deg); } .menu__line--center.active{ transform:scaleX(0); } .menu__line--bottom.active{ bottom: 10px; transform: rotate(135deg); } .gnav{ background: rgba(0,0,0,0.9); display: none; height: 100%; position: fixed; width: 100%; z-index: 300; } .gnav__wrap{ align-items:center; display: flex; height: 100%; justify-content: left; position: fixed; width: 100%; } .gnav__menu__item{ margin: 40px 0; list-style: none; font-family: 'Roboto', "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif; font-size: 1.5rem; letter-spacing: 2px; } .gnav__menu__item a{ color: #fff; font-size: 2em; font-weight: bold; padding: 40px; text-decoration: none; transition: .5s; } .gnav__menu__item span { color: #ffffff; font-size: 1.3rem; } .gnav__menu__item a:hover{ color: #666; } .gnav__menu__item a.menuig img { width: 35px; } #top_header .recruit { display: none; } /*180925*/ .gnav__menu__item.wanted { display: block; } #menu_header .lang { right: 75px; } } @media (max-width:1200px) and (min-width:896px) { #features .floor { position: absolute; right: 10px; top: 10px; } #features .coffee .floor { right: 5%; } #features .parent { overflow: hidden; } #features .hostel .parent .box.left, #features .coffee .parent .box.right, #features .lounge .parent .box.left { overflow: hidden; width: 50%;/* トリミングしたい枠の幅 */ height: 411px;/* トリミングしたい枠の高さ */ position: relative; } #features .hostel .parent .box.left img, #features .coffee .parent .box.right img, #features .lounge .parent .box.left img { position: absolute; /*top: 50%; left: 50%;*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; max-width: initial; } #berth #morning .parent.top, #berth #coffee .parent.top, #berth #beans .parent.top { overflow: hidden; } #berth #morning .top .box.left, #berth #coffee .top .box.left, #berth #beans .top .box.left { overflow: hidden; width: 45%;/* トリミングしたい枠の幅 */ height: 411px;/* トリミングしたい枠の高さ */ position: relative; } #berth #morning .top .box.right, #berth #coffee .top .box.right, #berth #beans .top .box.right { overflow: hidden; width: 55%; } #berth #morning .top .box.left img, #berth #coffee .top .box.left img, #berth #beans .top .box.left img { position: absolute; /*top: 50%; left: 50%;*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; max-width: initial; } #bardining .top .box.left, #bardining .bottom .box.right { overflow: hidden; width: 50%;/* トリミングしたい枠の幅 */ height: 411px;/* トリミングしたい枠の高さ */ position: relative; } #bardining .top .box.right p, #bardining .bottom .box.left p { font-size: 1.65rem; } #bardining .top .box.left img, #bardining .bottom .box.right img { position: absolute; /*top: 50%; left: 50%;*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%; max-width: initial; } #bardining figure.photo h2 { font-size: 2rem; line-height: 2rem; margin-bottom: 10px; } #bardining figure.photo p { line-height: 1.5rem; } } @media (max-width:1200px) and (min-width:690px) { .page header #header-inner #lead p.sub { margin-top: 0px; } .page header #header-inner #lead p.time { margin-top: 0px; } .page header #header-inner #lead { bottom: 24%; top: inherit; } #hostel .about .box.left { width: 100%; /*margin-top: -100px;*/ } #hostel .about .box.right { display: none; } #berth .about .box.left { width: 100%; /*margin-top: -100px;*/ } #berth .about .box.right { display: none; } #bardining .lounge .box.left { width: 100%; /*margin-top: -100px;*/ } #bardining .lounge .box.right { display: none; } #booking .box.left { width: 100%; padding: 0 2%; } #booking .parent.plan { display: flex; flex-wrap: wrap; justify-content: center; } #booking .plan .box.left { width: 100%; padding: 0 2%; } #booking .plan .box.right { width: 100%; padding: 0 2%; display: block; text-align: center; margin-left: 0; } #booking .box.right { display: none; } } @media (min-width:1200px) { .sp { display: none; } .customize-menu .menu { display: block; } .gnav__menu__item.wanted { display: none; } /*180925*/ } @media(min-width:1000px) and (max-height:700px) { header #language ul li { font-size: 14px; padding: 30px 20px; } #loader img { width: 18%; } #loader img { width: 32px; } .home header .logo, .page-slug-en header .logo, .page-slug-tw header .logo { width: 18%; } .home .scroll, .page-slug-en .scroll, .page-slug-tw .scroll { display: none; } } @media (min-width: 992px) { .top_footer .container { width: 97%; } } @media (min-width: 1200px) { .top_footer .container { width: 1170px; } } @media(max-width:1000px) and (min-width:896px) { .home #primary, .page-slug-en #primary, .page-slug-tw #primary { padding: 0 25px; } /*180831*/ #features .hostel .parent .box.left { width: 40%; } #features .hostel .parent .box.right { width: 60%; } #features .coffee .parent .box.left { width: 60%; } #features .coffee .parent .box.right { width: 40%; } #features .lounge .parent .box.left { width: 40%; } #features .lounge .parent .box.right { width: 60%; } } @media(max-width:1000px) and (min-width:690px) { .main_footer .top_footer .left .logo { width: auto!important; } .main_footer .top_footer .left .logo img { width: 150px; } .top_footer .left { text-align: center; } .top_footer #boshu { margin-top: 0px; position: absolute; top: 90px; left: 20px; } .top_footer #boshu a { padding: 5px 20px; border-radius: 1px; } .top_footer .container { width: 100%; } .top_footer .right { position: inherit; text-align: center; } #event { width: 95%; } #event .inner { display: inherit; } #event .entry { width: 65%; float: none; margin: 0 auto 75px; max-width: 400px; } #event .entry .entry-inner .thumb { width: auto; border: 0px solid #ffffff; height: auto; } #event .entry .thumb img { width: 100%; margin: 0 0; height: auto; } #event .entry-inner .title { background: #ffffff; margin: 0 0 12px; } } @media(max-width:1000px) and (min-width:767px) { #bardining .modal-contents .inner ul li span { display: block; } } @media(max-width:895px) and (min-width:690px) { .page_logo { margin-top: 30px; position: absolute; left: 0; right: 0; } #concept h3 span { display: block; } } @media (max-width:991px) { .single .customize-container { width:auto; } .customize-menu ul li a { font-size: 14px; } .header_right .lang span { width: 40px; } .page_icon ul li img { width: 23px; } .left_section, .side_bar { padding-left: 15px; padding-right: 15px; width: 100%; } .logo, .header_right { width:100%; position:relative; } #hostel #information .left, #hostel #information .right { width: 100%; } #hostel #information ul { padding-left: 0; } #hostel #information ul li { margin-bottom: 10px; } #hostel #rooms .right { margin-top: 30px; /*text-align: center;*/ padding-left: 0px; } #hostel #rooms .right .text ul li { min-width: 120px; } #hostel #facility .left, #hostel #facility .right { width: 100%; } #hostel #fee ul { width: 100% } #hostel #fee ul li { width: 120px; font-size: 1.2rem; margin: 20px 5px 0 5px; } } @media (max-width:991px) and (min-width:896px) { #hostel { width: 100%; } /*180822 */ #hostel #rooms .title h3 span { font-size: 3rem; } #hostel #rooms .text p { font-size: 1.6rem; line-height: 2.35rem; } } @media screen and (max-width: 895px) { .home #language, .page-slug-en #language, .page-slug-tw #language { display: none; } .page_icon { display: none; } .home #sphone { display: block; position: absolute; top: 25px; left: 25px; line-height: 25px; } .page-slug-en #sphone, .page-slug-tw #sphone { display: block; position: absolute; top: 25px; left: 25px; } #sphone .lang span { color: #1d3038; background-color: #ffffff; width: 50px; font-size: 1rem; font-family: Futura, "Gill sans", Lato; letter-spacing: 2px; display: inline-block; text-align: center; } #sphone .lang span.choosen { color: #aaaaaa; background-color: #1d3038; } #sphone .lang a:hover span { color: #aaaaaa; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s; } /* nav-wrap */ .menu-wrap { position: relative; } .menu-wrap * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* menu icon */ #menu-trigger { cursor: pointer; display: block; height: auto; margin-top:-5px; margin-bottom:0px; } header .spmenu { margin-top: 36px; } /*180822*/ #menu_header .lang { } #top_header .recruit { right: 0px; top: 85px; } /*180922*/ .main_section #concept .box { padding: 35px 20px 50px; } .main_section #concept .box p { font-size: 16px; } .page-slug-en #concept span.sub, .page-slug-tw #concept span.sub { font-size: 1.2rem; letter-spacing: 0; } .page-slug-en #concept .box_jp, .page-slug-tw #concept .box_jp { display: none; } .page-slug-en #concept .box_en, .page-slug-tw #concept .box_en { display: block; width: 100%; border-right: 0px solid #aaa; padding: 0; } .page-slug-en #primary, .page-slug-tw #primary { padding: 0; } #access #map .address { font-size: 1.2rem; } #access #transfer h3 { margin-bottom: 30px; } #booking #note { width: 100%; } .page header, .archive header, .single header { overflow: visible; } .page-slug-en header, .page-slug-tw header { overflow: hidden; } .page .header_right, .archive .header_right, .single .header_right { margin-top: 0px; } .customize-menu ul li a { color: #ffffff; } .customize-menu ul li a span { color: #ffffff; } } @media screen and (min-width: 895px) { .home #sphone { display: none; } .page-slug-en #sphone, .page-slug-tw #sphone { display: none; } .customize-menu { display: block !important; } } @media screen and (max-width: 767px) { .tagcloud { text-align: center; padding-left:7px; } .customizable-home-icom .back-icon{ width: 24%; } #loader img { width: 40%; } #loader img { width: 32px; } .home header .logo, .page-slug-en header .logo, .page-slug-tw header .logo { width: 40%; } .logo img{ display: inline !important; } .open .pre { font-size: 1.3rem !important; line-height: 35px !important; letter-spacing: 2px !important; } #bardining #barpage .modal-contents .inner .left, #bardining #diningpage .modal-contents .inner .right { width: 100%; padding-top: 75px; } #bardining #barpage .modal-contents .inner .right, #bardining #diningpage .modal-contents .inner .left { width: 100%; position: inherit; padding: 110px 0; } #bardining #barpage .modal-contents .inner .right .cr, #bardining #diningpage .modal-contents .inner .left .cr { width: 80%; margin: 30px auto 0; } #bardining .modal-contents .inner ul { margin: 10px 0 35px; width: 75%; margin: 10px auto 35px; } #bardining .btn-back { display: none; } #bardining .btn-back-m { display: block; } #bardining .btn-back-m p { text-align: center; font-family: Futura, "Gill sans", Lato; cursor: pointer; } #music #schedule_pc { display: none; } #music #schedule_sp { display: block; } } @media screen and (min-width: 768px) { #music #schedule_pc { display: block; } #music #schedule_sp { display: none; } } @media (min-width:691px) and (max-width: 768px) { #top_header .middle { height: 100px; } } @media (min-width:691px) { #top_header .middle-right .movie span { /*display: none;*/ } #top_header .news-sp { display: none; } } @media (max-width:895px) { #concept .sub { margin-top: 30px; } #concept .box_jp { width: 100%; border-right: 0px solid #aaa; padding: 0; } #concept .box_en { display: none; } .home #primary { padding: 0; } #features .scenes { flex-wrap: wrap; }/*180815*/ #features .scenes .element { width: 100%; } #features .floor { border: 1px solid #777777; } #features .floor p { font-size: 1.75rem; } #features .parent { flex-wrap: wrap; } #features { width: 100%; margin-top: 50px; } #features .hostel { margin-bottom: 50px; } #features .hostel .left { width: 100%; min-width: inherit; margin: 0 auto 20px; height: auto; padding-right: 0; float: none; } #features .hostel .right { width: 95%; margin: 0 auto; float: none; padding: 0 4%; } #features .hostel .right h3 { text-align: center; padding-right: 0; } #features .hostel .right .seemore { text-align: center; } #features .floor { padding: 0px 10px; margin: 0 0 5px 0; } #features .hostel p.info { margin-top: 0px; border: 0px; background-color: #e87a2b2b; padding: 10px 12px; line-height: 22px; font-size: 1.2rem; } #features .coffee .right { width: 100%; margin: 0 auto 20px; height: auto; padding-right: 0; float: none; } #features .coffee .left { width: 95%; margin: 0 auto; float: none; padding: 0 4%; } #features .coffee .left p { width: 100%; } #features .coffee .left h3 { text-align: center; padding-right: 0; } #features .coffee .left .seemore { text-align: center; } #features .lounge .left { width: 100%; margin: 0 auto 20px; height: auto; padding-right: 0; float: none; } #features .lounge .right { width: 95%; margin: 0 auto; float: none; } #features .basement { width: 100%; } #features .basement .bardining { height: 200px; } #features .basement .bardining h3 { font-size: 4rem; } #features .basement .left { width: 95%; float: none; margin: 0 auto; } #features .basement .right { width: 95%; float: none; margin: 0 auto; } #features .lounge h3 { text-align: center; } #features .lounge .right .seemore { text-align: center; } #event { width: 95%; } #event .inner { display: inherit; } #event .entry { width: 65%; float: none; margin: 0 auto 75px; max-width: 400px; } #event .entry .entry-inner .thumb { width: auto; border: 0px solid #ffffff; height: auto; } #event .entry .thumb img { width: 100%; margin: 0 0; height: auto; } #event .entry-inner .title { background: #ffffff; margin: 0 0 12px; } #hostel .cover { height: 300px; }/*180815*/ #hostel #information h2, #hostel #rooms h2, #hostel #facility h2, #hostel #plans h2 { font-size: 4rem; line-height: 4.5rem; } #hostel .parent { flex-wrap: wrap; } #hostel #rooms .cover { background: url(https://backpackersjapan.co.jp/citan/img/room.jpg) no-repeat right bottom transparent; } #hostel #information .cover, #hostel #rooms .cover, #hostel #facility .cover { background-size: cover; } #hostel #rooms .box.left, #hostel #rooms .box.right { width: 100%; } #hostel #rooms .box { background-size: cover; } #hostel #rooms .box.left { height: 350px; } #hostel #rooms .box.right { margin-left: 0; } #hostel #facility .left, #hostel #facility .right { padding: 0; } #hostel #rooms .right .price { background: none; padding: 0; } #hostel #rooms .text { margin-top: 0; padding: 20px 0 0 0; border-top: 1px dashed; background: none; } #hostel #rooms #quad .fee br.sp { display: block; } #hostel #plans #stocks .parent .children { width: 100%; } #hostel #plans .button { width: 180px; font-size: 1.3rem; margin-top: 50px; } #hostel #plans .more { display: none; } .page-slug-coffee #header-inner #berth_logo, .page-slug-coffeeen #header-inner #berth_logo, .page-slug-coffeetw #header-inner #berth_logo { display: none; }/*180815*/ #berth #morning .cover, #berth #coffee .cover, #berth #beans .cover { height: 300px; }/*180815*/ #berth .parent { flex-wrap: wrap; } #berth #morning .parent.top, #berth #coffee .parent.top, #berth #beans .parent.top { background-color: inherit; margin-top: 55px; } #berth .box.left, #berth .bottom .box.left { width: 100%; } #berth .box.right, #berth .bottom .box.right { width: 100%; } #berth #morning .parent .box.right h4, #berth #coffee .parent .box.right h4, #berth #beans .parent .box.right h4 { font-size: 3rem; margin-top: 15px; } #berth #morning .bottom .box.right, #berth #coffee .middle .box.right { padding: 0; } #berth #morning .bottom .box.left, #berth #coffee .middle .box.left { padding: 0; } #berth dl dt { font-size: 1.5rem; line-height: 1em; } #berth dl dt span { font-size: 1rem; display: block; margin-left: 0; } #berth dl dd { font-size: 13px; line-height: 1.6; margin: -1.5em 0 0.8em 0; } #berth #coffee .parent .children { width: 100%; margin-bottom: 5px; } .sa--lr { opacity: 0; transform: translate(0, 40px); }/*180815*/ .sa--rl { opacity: 0; transform: translate(0, 40px); } .sa--up { opacity: 0; transform: translate(0, 40px); } .home .box.sa.show { opacity: 1; transform: none; }/*180825*/ .home .box.sa--lr { opacity: 0; transform: translate(0, 20px); } .home .box.sa--rl { opacity: 0; transform: translate(0, 20px); } .home .box.sa--up { opacity: 0; transform: translate(0, 20px); } .scenes .sa.show { opacity: 1; transform: none; }/*180825*/ .scenes .sa--lr { opacity: 1; transform: translate(0, 0px); } .scenes .sa--rl { opacity: 1; transform: translate(0, 0px); } .scenes .sa--up { opacity: 1; transform: translate(0, 0px); } .scenes .element { margin-bottom: 10px; } #bardining #bar .cover, #bardining #dining .cover, #bardining #dj .cover { height: 350px; } /*180815*/ #bardining #bar .bg, #bardining #dining .bg, #bardining #dj .bg { height: 350px; } #bardining .parent { flex-wrap: wrap; } #bardining .parent .box.left h4 { margin-top: 15px; } #bardining .bottom.parent { flex-direction: column-reverse; } #bardining .box.left, #bardining .bottom .box.left { width: 100%; } #bardining .box.right, #bardining .bottom .box.right { width: 100%; } #bardining #bar .parent.top { background: none; } #bardining #dining .parent.top { margin-top: 165px; background: none; } #bardining #bar .cover h3 { font-size: 20vw; } #bardining #dining .cover h3 { bottom: -55px; left: 0; font-size: 20vw; } #bardining #bunkbed .right h4 { line-height: 4rem; } #bardining #dining #menu .children { width: 50%; } figure.photo figcaption { display: none; } #bardining #dj .cover h3 { font-size: 20vw; } #bardining #dj .parent.top { background: none; } .page-slug-access header #header-inner, .page-slug-accessen header #header-inner, .page-slug-accesstw header #header-inner { min-height: 0px; display: none; } /*180815*/ #access .sp { display: block; } #access #address .sp.gm { margin: 10px 0px 0; font-size: 12px; border: 1px solid; display: inline-block; padding: 2px 20px; } #access #address .sp.gm a { color: #333333; } #access .from { display: none; } #access .to { display: none; } #access #map iframe { display: none; } #booking .box.left { width: 100%; padding: 10px; } #booking .box.right { width: 0%; } #booking .parent.plan { padding-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; } #booking .plan .box.left { width: 95%; padding-left: 15px; padding-right: 15px; float: left; } #booking .plan .box.right { width: 95%; padding-left: 15px; padding-right: 15px; clear: left; margin-left: 0%; } #booking .plan .box.right img { width: auto; } #booking h2 { text-align: center; top: -30px; } #booking h2 .waku { font-size: 1.75rem; top: -25px; } } @media (max-width:690px) { .logo { text-align:center; } .search_box { display: table; float: none; margin: 0 auto; width: 92%; } .subscribe { text-align:center; padding-bottom:30px; } .subscribe p { width:100%; } .subscribe h3 { width:100%; margin-bottom:30px; } .subscribe a { clear:both; float:none; } .footer-widget ul { margin: 0px 0px 20px 0px; } .top_footer .left { text-align: center; } .top_footer #boshu { margin-top: 30px; } .top_footer #boshu a { padding: 5px 20px; font-size: 1.5rem; } .main_footer .top_footer .left .logo img { width: 100px; } .top_footer .right { position: relative; margin-top: 40px; text-align: center; } .top_footer .right a { margin-left: 25px; } .top_footer .right p img { width: 25%; } .top_footer .right p .toco { margin-left: 10px; } .top_footer .right p .toco img { margin-top: 20px; } .bottom_footer p { text-align:center; width:100%; } .bottom_footer ul { width:100%; text-align:center; margin:10px 0px; } .bottom_footer ul li { float:none; display:inline; } .bottom_footer ul.icon { display: block; } .main_section #concept .box { padding: 35px 10px 50px; } .main_section #concept .box p { font-size: 15px; } header #menu_header #menu_logo { left: 10px; top: 17px; } /*180815*/ header #menu_header #menu_logo img { width: 140px; } header .spmenu { height: 20px; /*top: 26px;*/ margin-top: 23px; width: 27px; } .home header .spmenu { margin-top: 33px; } .menu__line--center { top: 9px; } .gnav__menu__item { margin: 20px 0; font-size: 1rem; } .gnav__menu__item a { padding: 0px; margin-right: 10px; } #top_header .top { height: 85vh; max-height: none; } #top_header .top .cover { height: 35%; width: 100%; margin-right: 0; right: 0; top: 0px; position: relative; }/*180818*/ #top_header .top .box-right { left: 0px; top: 0px; } #top_header .top .box-left { position: relative; top: -4%; background-color: inherit; padding: 0; mix-blend-mode: inherit; } #top_header ul { overflow: hidden; } #top_header ul li .text { font-size: 8.4vw; line-height: 10vw; font-weight: 700; margin-bottom: 0; } #top_header ul li .sub { font-size: 2.2vw; } #top_header .middle { width: 100%; position: relative; height: 120px; left: 0; top: 0%; /*top: 67%; bottom: 10%;*/ background: linear-gradient(-45deg,#68968e 25%,transparent 25%,transparent 50%,#68968e 50%,#68968e 75%,transparent 75%,transparent); background: -webkit-linear-gradient(-45deg,#68968e 25%,transparent 25%,transparent 50%,#68968e 50%,#68968e 75%,transparent 75%,transparent); background-size: 3px 3px; } #top_header .middle-right { width: 100%; height: 80px; right: 0px; left: 0; margin: 0 auto; top: -7px; position: relative; background: #233a3f; border-top: 3px solid #212d2f; } #top_header .middle-right .movie { font-size: 4vw; background-color: initial; top: 17px; position: absolute; left: 0px; mix-blend-mode: inherit; right: 0; } #top_header .middle-right .movie .btn { color: #ffffff;position: relative; right: 0; left: 0; margin: 0 auto; font-size: 4vw; font-family: Helvetica, 'Roboto'; font-weight: 700; top: 3px; line-height: 6vw; /*background: url(https://backpackersjapan.co.jp/preview/img/play.png) no-repeat right center;*/ background-size: 20px 20px; padding-right: 25px; padding-left: 0px; margin-right: -25px; } #top_header .middle-right .movie .btn span { /*display: block;*/ font-family: Times; font-size: 4vw; font-weight: normal; } #top_header .bottom { top: 0; height: 82vh; } #top_header .bottom .cover { left: 0px; top: 10px; margin-left: 0px; background: none; width: 90%; height: 40%; position: relative; } #top_header .bottom .box-left { top: 0px; left: 0px; } #top_header .bottom .box-right { top: 5%; position: relative; z-index: 99; } #top_header .bottom .box-bottom { top: 35%; width: 100%; height: 50%; z-index: 98; } /*#top_header .bottom .box-bottom .news { border: dashed 5px; height: 150px; width: 85%; margin: 30px auto 0; z-index: 1000; position: absolute; bottom: 0; left: 0; right: 0; }*/ #menu_header .lang { top: 20px; } /*180922*/ .home #menu_header .lang { top: 30px; } #top_header .bottom .box-bottom .news { display: none; } #top_header .news-sp { display: block; height: auto; padding-bottom: 100px; text-align: center; width: 90%; margin: auto; } #top_header .news-sp h2 { margin-bottom: 20px; } #top_header .news-sp h4 { font-size: 3.5vw; margin-bottom: 15px; text-align: left; line-height: 5vw; } #top_header .news-sp h4::before { content: "・"; } #top_header .news-sp { display: block; height: auto; padding-bottom: 100px; text-align: center; width: 90%; margin: auto; } #top_header .news-sp h4 a { color: #555555; } #concept { padding-top: 30px; } /*180815*/ #concept h3 { margin: 20px 0; font-size: 5.7vw; } #concept .br { display: block; margin-top: 10px; font-size: 5.7vw; } #main .parallax { background-position: center top !important; background-attachment: scroll; min-height: 250px; display: table; width: 100%; }/*180815*/ #main .parallax h4 { display: table-cell; top: 0; vertical-align: middle; } #hostel { width: 100%; } .page header #header-inner { background-size: cover; min-height: 400px; background-position: -160px bottom; } /*180815*/ .page-slug-bardining header #header-inner, .page-slug-bardiningen header #header-inner, .page-slug-bardiningtw header #header-inner { background-size: cover; min-height: 400px; background-position: -160px top; } .page-slug-hostel #header-inner, .page-slug-hostelen #header-inner, .page-slug-hosteltw #header-inner { background-image: url(https://backpackersjapan.co.jp/citan/img/hostel_cover_sp3.jpg); }/*180825*/ .page-slug-coffee #header-inner, .page-slug-coffeeen #header-inner, .page-slug-coffeetw #header-inner { background-image: url(https://backpackersjapan.co.jp/citan/img/cafe_cover_sp.jpg); } .page-slug-bardining #header-inner, .page-slug-bardiningen #header-inner, .page-slug-bardiningtw #header-inner { background-image: url(https://backpackersjapan.co.jp/citan/img/bar_cover_sp.jpg); } .page-slug-booking #header-inner, .page-slug-bookingen #header-inner, .page-slug-bookingtw #header-inner { background-image: url(https://backpackersjapan.co.jp/citan/img/booking_cover_sp.jpg); } .page-slug-dj-schedule #header-inner, .page-slug-dj-scheduleen #header-inner, .page-slug-dj-scheduletw #header-inner { background-image: url(https://backpackersjapan.co.jp/citan/img/music_cover_sp.jpg); } .page header #header-inner #lead { top: 32%; left: 0px; padding: 0 20px; right: 0px; } .page-slug-coffee header #header-inner #lead, .page-slug-coffeeen header #header-inner #lead, .page-slug-coffeetw header #header-inner #lead { top: 35%; } .page header #header-inner #lead h2 { text-align: center; } .page header #header-inner #lead p.sub { text-align: center; line-height: 2rem; margin-top: 0px; } .page-slug-bardining .section_post, .page-slug-bardiningen .section_post, .page-slug-bardiningtw .section_post { padding: 0; margin: 0; } /*180815*/ .page-slug-bardining header #header-inner #lead, .page-slug-bardiningen header #header-inner #lead, .page-slug-bardiningtw header #header-inner #lead { bottom: 180px; } .page header #header-inner #lead h2 { font-size: 9vw; font-weight: 700; } .page #header-inner #lead p.time { display: none; } .category-event #header-inner { display: none; } #hostel .about .box.left h3 { font-size: 6.5vw; display: block; text-align: center; } #hostel .about .box.right { display: none; } #hostel .about .box.left { width: 100%; margin-top: -85px; } #berth .about .box.left h3 { font-size: 2.75rem; display: block; text-align: center; } #berth .about .box.left .logo { display: block; margin-bottom: 15px; } #berth .about .box.left .logo img { width: 50%; } #berth .about .box.right { display: none; } #berth .about .box.left { width: 100%; margin-top: -85px; } #bardining .lounge .box.left h3 { font-size: 6.5vw; display: block; text-align: center; } #bardining .lounge .box.right { display: none; } #bardining .lounge .box.left { width: 100%; margin-top: -85px; } #bardining .inner { width: 100%; height: auto; overflow: hidden; } #bardining .bg { height: 200px; } #bardining .left.bg { width: 100%; background-position: center center; } #bardining .right.bg { width: 100%; background-position: center center; } #bardining .box { top: 75px; } #bardining .box h3 { font-size: 3rem; } #bardining .box .time { font-size: 1.2rem; } #access #map .text { text-align: left; } .page #header-inner, .archive #header-inner { height: 170px } .single #header-inner { height: 0px } .single .section_post .content { margin-top: 20px; } .page_logo { position: absolute; left: 0; right: 0; top: 20px; margin-top: 0px; } #coffee #berth { height: auto; } #coffee #berth .left { height: 300px; } #coffee #berth .left .logo { top: 50px; } #coffee #berth .left .logo img { width: 200px; } #coffee #berth .right { width: 90%; margin: 0 auto; } #coffee #berth .right .text p { font-size: 1.4rem; line-height: 36px; letter-spacing: 1px; } #coffee #about { width: 90%; margin: 0 auto; } #coffee #menu { width: 80%; margin: 0 auto; } #music #title { height: 200px; } #music #title h2 { top: 70px; } #music #vision { padding: 0 30px; } #music #vision p { font-size: 1.4rem; } #music .schedule { width: 95%; } #music .box.left { width: 100%; height: 200px; } #music .box.right { width: 100%; } #music .box.left .calender { margin-top: 30px; } #faq h3 { margin-top: 20px; text-align: center; } #faq ul li { margin-bottom: 15px; } } @media (max-width:690px) and (min-height: 950px) { #top_header .top { height: 65vh; } } @media (max-width:690px) and (min-height: 1150px) { #top_header .top { height: 50vh; } } @media screen and (max-width: 600px) { .rslides_nav { top: 47%; } .customize-breadcrumb h1{ font-size: 21px; } .customize-breadcrumb ol{ font-size: 14px; } #loader { } #loader img { width: 50%; bottom: 70px; } #loader img { width: 32px; bottom: 0px; } .home header .logo, .page-slug-en header .logo, .page-slug-tw header .logo { width: 50%; } .home header .open h3, .page-slug-en header .open h3, .page-slug-tw header .open h3 { font-size: 2rem; letter-spacing: 3px; } .home header .open p, .page-slug-en header .open p, .page-slug-tw header .open p { font-size: 1rem; letter-spacing: 1.5px; } #news { width: 90%; } .main_section #concept .box { width: 95%; padding: 50px 14px; } .main_section #concept .box .et::before { content: "\A" ; white-space: pre ; } .main_section #concept .box h3 span.sub { display: block; margin-top: 5px; } .main_section #concept .box h3 span.jp { font-size: 2rem; } .main_section #concept .box p { font-size: 1.2rem; line-height: 22px; } .page header, .archive header, .single header { overflow: visible; } .page-slug-en header, .page-slug-tw header { overflow: hidden; } .page .header_right, .archive .header_right, .single .header_right { margin-top: 0px; } .page_icon { display: none; } .page_logo { top: 50px; } .page_logo img { width: 120px; } .customize-menu ul li a { color: #ffffff; } .customize-menu ul li a span { color: #ffffff; } } @media(min-width:320px) and (max-width:480px) { .customizable-home-icom .back-icon { width:30%; } .customizable-home-icom .back-icon img { margin-right: 7px !important; } /* .home header .open { bottom: 75px; } */ .main_section #concept .box h3 span.sub { font-size: 2.2rem; } #top_header .middle { bottom: 2%; } /*180818*/ /*#top_header .top { height: 90vh; }*/ /*#top_header .top .cover { height: 37.5%; }*/ } @media(min-width:480px) and (max-width:600px) { .customizable-home-icom .back-icon{ width:17%; } } @media(min-width:500px) and (max-width:600px) { .customizable-home-icom .back-icon{ width:13%; } } @media(min-width:601px) and (max-width:767px) { .customizable-home-icom .back-icon{ width:11% ; } } @media(min-width:768px) and (max-width:1024px) { .download-theme .btn-group{float: right;} .customize-menu > ul{margin-top: 15px; /*text-align: left;*/} .customize-menu > ul > li{margin-bottom: 5px;} .logo{ width:30% !important; } .customizable-home-icom .back-icon{ width:32%; } .post-blog { float: left; margin: 5px; width: 100%; } .post-blog img{ width:100%; } .customizable-home-title { clear: both; } .customizable-home-icom .customizable-post{ width:32%; float:left; } .buttone-left, .post-comment-set{ float:left; } .customizable-home-icom .back-icon img{ margin-right:2px !important; } .post-blog .post-comment{ display: flex; } .post-comment-set { float: left; width: 50%; } } @media(min-width:1023px) and (max-width:1280px) { .customizable-home-icom .back-icon{ width:23%; } } @media(min-width:980px) and (max-width:1023px) { .customizable-home-icom .back-icon img{ margin-right:23px !important; } } @media(min-height: 737px) and (max-width:480px) { #top_header .top { height: 60vh; } #top_header .bottom { margin-top: -75px; } }