/* Theme Name: Avada Child Description: Avada Child Theme Author: ThemeFusion Template: Avada Version: 1.0.0 */ @charset "UTF-8"; /* ---------------------------------------------------------- 緊急リセット & Avada強制上書きコード ※これをstyle.cssの最上部に配置 ---------------------------------------------------------- */ /* 1. 上部の黒い線（管理バー）を完全に消す */ #wpadminbar { display: none !important; } html { margin-top: 0 !important; } /* 2. 左右の余白を消して画面幅いっぱいに広げる */ html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden; /* 横スクロールバー防止 */ } /* 3. Avadaやブラウザの余計な枠組みを解除 */ #wrapper, #main, .fusion-row, #content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* 4. 画像のサイズ崩れ防止 */ img { max-width: 100%; height: auto; vertical-align: bottom; /* 画像下の謎の隙間を消す */ } /* 5. Avada干渉対策リセット */ body, html, #wrapper, #main { line-height: normal !important; /* 元のデザインに合わせて調整 */ letter-spacing: normal !important; -webkit-font-smoothing: auto !important; } /* 6. ボックスサイズの計算方法を強制統一 */ *, *::before, *::after { box-sizing: border-box !important; } /* 7. 余計なマージン削除 */ p { margin-bottom: 0 !important; } /* mixin ========================================================= */ .mt0 { margin-top: 0px !important; } .mb0 { margin-bottom: 0px !important; } .pt0 { padding-top: 0px !important; } .pl0 { padding-left: 0px !important; } .pb0 { padding-bottom: 0px !important; } .mt5 { margin-top: 5px !important; } .mb5 { margin-bottom: 5px !important; } .pt5 { padding-top: 5px !important; } .pl5 { padding-left: 5px !important; } .pb5 { padding-bottom: 5px !important; } .mt10 { margin-top: 10px !important; } .mb10 { margin-bottom: 10px !important; } .pt10 { padding-top: 10px !important; } .pl10 { padding-left: 10px !important; } .pb10 { padding-bottom: 10px !important; } .mt15 { margin-top: 15px !important; } .mb15 { margin-bottom: 15px !important; } .pt15 { padding-top: 15px !important; } .pl15 { padding-left: 15px !important; } .pb15 { padding-bottom: 15px !important; } .mt20 { margin-top: 20px !important; } .mb20 { margin-bottom: 20px !important; } .pt20 { padding-top: 20px !important; } .pl20 { padding-left: 20px !important; } .pb20 { padding-bottom: 20px !important; } .mt25 { margin-top: 25px !important; } .mb25 { margin-bottom: 25px !important; } .pt25 { padding-top: 25px !important; } .pl25 { padding-left: 25px !important; } .pb25 { padding-bottom: 25px !important; } .mt30 { margin-top: 30px !important; } .mb30 { margin-bottom: 30px !important; } .pt30 { padding-top: 30px !important; } .pl30 { padding-left: 30px !important; } .pb30 { padding-bottom: 30px !important; } .mt35 { margin-top: 35px !important; } .mb35 { margin-bottom: 35px !important; } .pt35 { padding-top: 35px !important; } .pl35 { padding-left: 35px !important; } .pb35 { padding-bottom: 35px !important; } .mt40 { margin-top: 40px !important; } .mb40 { margin-bottom: 40px !important; } .pt40 { padding-top: 40px !important; } .pl40 { padding-left: 40px !important; } .pb40 { padding-bottom: 40px !important; } .mt45 { margin-top: 45px !important; } .mb45 { margin-bottom: 45px !important; } .pt45 { padding-top: 45px !important; } .pl45 { padding-left: 45px !important; } .pb45 { padding-bottom: 45px !important; } .mt50 { margin-top: 50px !important; } .mb50 { margin-bottom: 50px !important; } .pt50 { padding-top: 50px !important; } .pl50 { padding-left: 50px !important; } .pb50 { padding-bottom: 50px !important; } .mt55 { margin-top: 55px !important; } .mb55 { margin-bottom: 55px !important; } .pt55 { padding-top: 55px !important; } .pl55 { padding-left: 55px !important; } .pb55 { padding-bottom: 55px !important; } .mt60 { margin-top: 60px !important; } .mb60 { margin-bottom: 60px !important; } .pt60 { padding-top: 60px !important; } .pl60 { padding-left: 60px !important; } .pb60 { padding-bottom: 60px !important; } .mt65 { margin-top: 65px !important; } .mb65 { margin-bottom: 65px !important; } .pt65 { padding-top: 65px !important; } .pl65 { padding-left: 65px !important; } .pb65 { padding-bottom: 65px !important; } .mt70 { margin-top: 70px !important; } .mb70 { margin-bottom: 70px !important; } .pt70 { padding-top: 70px !important; } .pl70 { padding-left: 70px !important; } .pb70 { padding-bottom: 70px !important; } .mt75 { margin-top: 75px !important; } .mb75 { margin-bottom: 75px !important; } .pt75 { padding-top: 75px !important; } .pl75 { padding-left: 75px !important; } .pb75 { padding-bottom: 75px !important; } .mt80 { margin-top: 80px !important; } .mb80 { margin-bottom: 80px !important; } .pt80 { padding-top: 80px !important; } .pl80 { padding-left: 80px !important; } .pb80 { padding-bottom: 80px !important; } .mt85 { margin-top: 85px !important; } .mb85 { margin-bottom: 85px !important; } .pt85 { padding-top: 85px !important; } .pl85 { padding-left: 85px !important; } .pb85 { padding-bottom: 85px !important; } .mt90 { margin-top: 90px !important; } .mb90 { margin-bottom: 90px !important; } .pt90 { padding-top: 90px !important; } .pl90 { padding-left: 90px !important; } .pb90 { padding-bottom: 90px !important; } .mt95 { margin-top: 95px !important; } .mb95 { margin-bottom: 95px !important; } .pt95 { padding-top: 95px !important; } .pl95 { padding-left: 95px !important; } .pb95 { padding-bottom: 95px !important; } .mt100 { margin-top: 100px !important; } .mb100 { margin-bottom: 100px !important; } .pt100 { padding-top: 100px !important; } .pl100 { padding-left: 100px !important; } .pb100 { padding-bottom: 100px !important; } /* 汎用クラス ========================================================= */ .underline { text-decoration: underline; } /* リセット ========================================================= */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; background: #FFF; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; } a.has-line { text-decoration: underline; } a.has-line:hover { text-decoration: none; } a.notel { cursor: text; } /* change colours to suit your needs */ ins { background-color: #ff9; color: #000; text-decoration: none; } /* change colours to suit your needs */ mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } /* change border colour to suit your needs */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } img, iframe { vertical-align: bottom; max-width: 100%; } /* 基本設定 ========================================================= */ body { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight: 400; line-height: 1.6; color: #000; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 767px) { body { font-size: 12px; } } h1, h2, h3, h4, h5, h6 { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-weight: 400; color: #000; line-height: 1.6; } p { margin: 0; line-height: 2; } p + p { margin-top: 2em; } ul, dl, figure { margin: 0; padding: 0; } dt { font-weight: normal; } li { list-style: none; } a { color: #000; transition: .4s; } a:hover { color: #333333; text-decoration: none; } a:hover img { opacity: 1; } em { font-style: normal; } table { border-collapse: collapse; } ::-moz-selection { color: #fff; background-color: #76664f; } ::selection { color: #fff; background-color: #76664f; } ruby > rt { -webkit-transform: translateY(40%); transform: translateY(40%); } /* 表示・非表示 ----------------------------------------------- */ .hidden { display: none; } @media (max-width: 959px) { .hidden-tab { display: none !important; } } @media (max-width: 767px) { .hidden-sp { display: none !important; } } @media (max-width: 479px) { .hidden-ss { display: none !important; } } @media (min-width: 960px) { .visible-tab { display: none !important; } } @media (min-width: 768px) { .visible-sp { display: none !important; } } @media (min-width: 480px) { .visible-ss { display: none !important; } } /* 基本 body ========================================================= */ .com-container-01 { max-width: 1200px; box-sizing: content-box; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } @media (max-width: 959px) { .com-container-01 { padding-right: 16px; padding-left: 16px; } } .com-container-02 { max-width: 1000px; box-sizing: content-box; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } @media (max-width: 959px) { .com-container-02 { padding-right: 16px; padding-left: 16px; } } .com-container-03 { max-width: 1200px; margin-right: auto; margin-left: auto; } .com-container-04 { width: 100%; overflow: hidden; } [class*="com-container-"] [class*="com-container-"] { padding-right: 0; padding-left: 0; } /* 中ページ layout ----------------------------------------------- */ #content { overflow-x: hidden; } #main { display: block; overflow: hidden; background-color: #efeae5; } #main .uk-container { box-sizing: content-box; } /* パーツ ========================================================= */ /* 共通パーツ ----------------------------------------------- */ /* リンク・ボタン -------------------------------------- */ a img { transition: .4s; opacity: 1; } a img:hover { opacity: .8; } /* セクション間の隙間 ----------------------------------------------- */ .com-mt-01 { margin-top: 150px !important; } @media (max-width: 959px) { .com-mt-01 { margin-top: 100px !important; } } .com-mt-02 { margin-top: 100px !important; } @media (max-width: 959px) { .com-mt-02 { margin-top: 70px !important; } } .com-mt-03 { margin-top: 70px !important; } @media (max-width: 959px) { .com-mt-03 { margin-top: 50px !important; } } .com-mt-04 { margin-top: 40px !important; } @media (max-width: 959px) { .com-mt-04 { margin-top: 30px !important; } } .com-mt-05 { margin-top: 20px !important; } @media (max-width: 959px) { .com-mt-05 { margin-top: 15px !important; } } .com-mt-0 { margin-top: 0 !important; } .com-pt-0 { padding-top: 0 !important; } .com-pb-0 { padding-bottom: 0 !important; } /* アニメーション ----------------------------------------------- */ [class*="animate-"] { opacity: 0; } @media (min-width: 960px) { .delay-01 { transition-delay: 0.3s !important; } } @media (min-width: 960px) { .delay-02 { transition-delay: 0.6s !important; } } @media (min-width: 960px) { .delay-03 { transition-delay: 0.9s !important; } } @media (min-width: 960px) { .delay-04 { transition-delay: 1.2s !important; } } @media (min-width: 960px) { .delay-05 { transition-delay: 1.5s !important; } } .animate-fadein { transition: 1s ease opacity; } .animate-fadein.inview { opacity: 1; } .animate-slide { transition: 1s ease; transition-delay: .34s; transform: scale(0.9) translateY(50px); } .animate-slide.inview { opacity: 1; transform: scale(1) translateY(0); } @keyframes fluffy { /* 0% { transform: rotateZ(5deg) scale(0.9); } 25% { transform: rotateZ(-6deg) scale(1); } 50% { transform: rotateZ(5deg) scale(0.9); } 75% { transform: rotateZ(-4deg) scale(.95); } 100% { transform: rotateZ(5deg) scale(0.9); }*/ 0% { transform: rotateZ(5deg) scale(0.9); } 25% { transform: rotateZ(0) scale(1); } 50% { transform: rotateZ(-5deg) scale(0.9); } 75% { transform: rotateZ(0) scale(1); } 100% { transform: rotateZ(5deg) scale(0.9); } } .animate-fluffy { transition: 1s ease; transition-delay: 1s; } .animate-fluffy.inview { opacity: 1; animation: fluffy 5s infinite; } /* パネル -------------------------------------- */ /* テキストカラー -------------------------------------- */ .com-color-01 { color: #000000; } .com-color-02 { color: #76664f; } .com-color-03 { color: #a4a4a4; } .com-color-04 { color: #f5f5f4; } .com-color-05 { color: #e7d614; } .com-color-06 { color: #efeae5; } .com-color-07 { color: #F00 !important; } /* 背景色 -------------------------------------- */ .com-bg-01 { background-color: #FFF; } /* テキスト寄せ -------------------------------------- */ .text-center { text-align: center; } .text-right { text-align: right; } /* 画像 -------------------------------------- */ /* テーブル -------------------------------------- */ /* リスト -------------------------------------- */ /* スクロールのターゲット（header固定分スクロールをずらすため） -------------------------------------- */ .scroll-target { display: block; } @media (min-width: 960px) { .scroll-target { margin-top: -90px; padding-top: 90px; } } /* slick -------------------------------------- */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; outline: none; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide a { outline: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-arrow { z-index: 5; position: absolute; top: 50%; transform: translateY(-50%); width: 31px; height: 60px; padding: 0; text-indent: -9999px; border: none; background-color: transparent; background-image: url(../img/common/slider_arrow_w.png); background-repeat: no-repeat; background-position: center; background-size: auto; outline: none; cursor: pointer; transition: .4s; } @media (max-width: 767px) { .slick-arrow { width: 15.5px; height: 30px; background-size: 15.5px auto; } } .slick-arrow.slick-next { right: 20px; } @media (max-width: 767px) { .slick-arrow.slick-next { right: 10px; } } .slick-arrow.slick-prev { left: 20px; transform: translateY(-50%) rotate(180deg); } @media (max-width: 767px) { .slick-arrow.slick-prev { left: 10px; } } .slick-arrow:hover { opacity: .7; } .arrow-b .slick-arrow { background-image: url(../img/common/slider_arrow_b.png); } .slick-dots { margin-top: 35px; display: flex; justify-content: center; width: 100%; } .slick-dots li { width: 50px; height: 2px; margin: 0 5px; border: none; border-radius: none; appearance: none; -webkit-appearance: none; font-size: 0; line-height: 1; outline: none; background: #5f5341; transition: .4s; /*追加*/ position: relative; cursor: pointer; } .slick-dots li.slick-active, .slick-dots li:hover, .slick-dots li.hover { background: #e7d614; } @media (max-width: 767px) { .slick-dots li { width: 25px; height: 1px; margin: 0 3px; } } .slick-dots li:before { content: ''; display: block; position: absolute; width: 100%; height: 20px; top: -10px; left: 0; } .slick-dots button { display: none; } /* header ========================================================= */ #gnav-sub { z-index: 99; position: absolute; top: 40px; right: 3.7634408602%; width: 80px; line-height: 1; /*body.index & { top: auto; bottom: 30px; }*/ /*body.is-menu-open & { position: fixed!important; }*/ } @media (max-width: 959px) { #gnav-sub { width: 50px; top: 20px; right: 16px; } } #gnav-sub li + li { margin-top: 10px; } @media (max-width: 959px) { #gnav-sub li + li { margin-top: 5px; } } #gnav-sub a { font-size: 12px; color: #fff; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; display: block; text-align: center; } @media (max-width: 959px) { #gnav-sub a { font-size: 10px; } } #gnav-sub .reservation a { letter-spacing: 0; padding-bottom: 18px; text-shadow: rgba(0, 0, 0, 0.9) 0 0 13px, rgba(0, 0, 0, 0.3) 0 0 13px; position: relative; } #gnav-sub .reservation a:after { content: ''; display: block; width: 100%; height: 8px; background-color: #FFF; box-shadow: rgba(0, 0, 0, 0.3) 0 0 13px; position: absolute; bottom: 0; left: 0; } #gnav-sub .lang a { letter-spacing: .4em; padding-left: 7px; text-shadow: rgba(0, 0, 0, 0.9) 0 0 10px, rgba(0, 0, 0, 0.3) 0 0 10px; } #gnav-sub .lang.current a { position: relative; } #gnav-sub .lang.current a:before { content: ''; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background-color: #63bd0b; left: 10px; top: 50%; margin-top: -3px; } @media (max-width: 959px) { #gnav-sub .lang.current a:before { left: 0; } } #sns-sp { z-index: 99; position: absolute; bottom: 16px; right: 16px; display: flex; text-align: center; } #sns-sp li + li { margin-top: 10px; } .kv-fullscreen #sns-sp { bottom: 66px; } #h-reservation-btn { cursor: pointer; width: 100px; height: 90px; display: flex; justify-content: center; align-items: center; margin-left: 25px; color: #000; position: relative; } #h-reservation-btn::before { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform-origin: center; background: url("../img/common/reserve_bg.jpg") no-repeat center center/cover; content: ''; transition: .8s ease-in-out; } #h-reservation-btn span { display: block; } #h-reservation-btn span:nth-child(2) { opacity: 0; } #h-reservation-btn .r-inner { position: relative; line-height: 1.3em; height: 1.3em; overflow: hidden; } #h-reservation-btn .r-inner span { transition: .3s ease-in-out; } #h-reservation-btn:hover::before { width: 160px; height: 160px; top: -33px; left: -28px; border-radius: 100%; transform: rotate(180deg); } #h-reservation-btn:hover .r-inner span { transform: translateY(-100%); } #h-reservation-btn:hover .r-inner span:nth-child(2) { opacity: 1; } #menu-btn { display: block; position: absolute; z-index: 101; top: 40px; left: 3.7634408602%; width: 80px; height: 80px; } @media (max-width: 959px) { #menu-btn { top: 20px; left: 16px; left: calc(16px + constant(safe-area-inset-left)); left: calc(16px + env(safe-area-inset-left)); width: 40px; height: 40px; } } #menu-btn::before, #menu-btn::after { position: absolute; left: 50%; top: 30px; width: 80px; height: 8px; background: #FFF; content: ''; transition: transform .5s; box-shadow: rgba(0, 0, 0, 0.15) 0 0 13px; } @media (max-width: 959px) { #menu-btn::before, #menu-btn::after { top: 20px; width: 40px; height: 4px; } } #menu-btn::before { transform: translate(-50%, 0); } #menu-btn::after { transform: translate(-50%, 0); } #menu-btn span { width: 100%; display: block; text-align: center; font-size: 12px; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; position: absolute; left: 0; top: 0; color: #FFF; text-shadow: rgba(0, 0, 0, 0.9) 0 0 13px, rgba(0, 0, 0, 0.3) 0 0 13px; } @media (max-width: 959px) { #menu-btn span { font-size: 10px; } } body.is-menu-open #menu-btn { z-index: 112; position: fixed !important; } body.is-menu-open #menu-btn span { display: none; } body.is-menu-open #menu-btn::before, body.is-menu-open #menu-btn::after { box-shadow: 0 0 0; } body.is-menu-open #menu-btn::before { transform: translate(-50%, -50%) rotate(45deg); } body.is-menu-open #menu-btn::after { transform: translate(-50%, -50%) rotate(-45deg); } #logo-sp { max-width: 260px; width: calc(100% - 180px); margin: auto; position: absolute; z-index: 101; top: 20px; left: 0; right: 0; } #lang-btn { display: block; position: absolute; z-index: 101; top: 0; right: 0; right: calc(0px + constant(safe-area-inset-right)); right: calc(0px + env(safe-area-inset-right)); width: 75px; height: 30px; text-align: center; line-height: 30px; font-size: 11px; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; letter-spacing: .1em; color: #fff; background: #000; cursor: pointer; } #lang-btn:after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; transform: rotate(45deg); margin-left: 5px; transform-origin: right center; transition: all 0.5s; } #lang-btn:hover { background-color: #a4a4a4; color: #000; } #lang-btn:hover:after { border-color: #000; } #lang-btn:hover + .lang-choice { border-top: 1px solid #f5f5f4; } #lang-btn.active:after { transform-origin: center center; transform: rotate(-135deg); } #lang-btn + .lang-choice { position: absolute; top: 30px; right: 0; display: none; } #lang-btn + .lang-choice ul li { width: 75px; border-bottom: 1px solid #f5f5f4; } #lang-btn + .lang-choice ul li:last-child { border-bottom: none; } #lang-btn + .lang-choice ul li a { width: 100%; display: block; height: 30px; line-height: 30px; background-color: #a4a4a4; font-size: 11px; text-align: center; } #lang-btn + .lang-choice ul li a:hover { background-color: #f5f5f4; } /* パンくず ========================================================= */ #pankuzu { display: flex; margin-top: 1em; } #pankuzu > span, #pankuzu a { font-size: 14px; letter-spacing: .05em; color: #76664f; font-family: font-family-04; } #pankuzu > span::after, #pankuzu a::after { padding: 0 .5em; content: '>'; } #pankuzu > span:last-child::after, #pankuzu a:last-child::after { content: ''; } /* pagetop ========================================================= */ #pagetop { position: absolute; right: 3.7634408602%; bottom: 100%; height: 180px; width: 1em; margin-left: auto; transition: all .5s ease-in-out; cursor: pointer; } @media (max-width: 767px) { #pagetop { height: 70px; } } #pagetop span { color: #76664f; padding-bottom: 60px; font-size: 20px; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; width: 20px; line-height: 20px; } @media (max-width: 767px) { #pagetop span { font-size: 13px; } } #pagetop::after { margin: auto; display: block; width: 1px; height: 50px; background: #76664f; content: ''; animation: pagetop-line 4s ease-in-out infinite; } @media (max-width: 767px) { #pagetop::after { animation: pagetop-line-sp 4s ease-in-out infinite; } } @keyframes pagetop-line { 0% { height: 150px; } 100% { height: 0; } } @keyframes pagetop-line-sp { 0% { height: 50px; } 100% { height: 0; } } /* footer ========================================================= */ footer { position: relative; color: #fff; background: linear-gradient(0deg, #e1d5d4, #dbd4cc, #00f2fe, #4facfe); background-size: 600% 600%; -webkit-animation: Gradient 10s ease infinite alternate; -moz-animation: Gradient 10s ease infinite alternate; animation: Gradient 10s ease infinite alternate; /*margin-top: 100px; @media (max-width: 767px) { margin-top: 50px; }*/ } @media (max-width: 959px) { footer { padding-bottom: 60px; } } footer.autumn-winter { background: linear-gradient(0deg, #e1d5d4, #dbccb6, #c9a9df, #cc91a3); background-size: 600% 600%; -webkit-animation: Gradient 10s ease infinite alternate; -moz-animation: Gradient 10s ease infinite alternate; animation: Gradient 10s ease infinite alternate; } @-webkit-keyframes Gradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @-moz-keyframes Gradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @keyframes Gradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } #footer-news { color: #fff; background: #76664f; } #footer-news.top-footer { margin-top: 105px; } #footer-news .flex { display: flex; flex-wrap: wrap; } #footer-news .flex > .tit { width: 100px; color: #FFF; text-align: center; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; letter-spacing: .05em; } @media (min-width: 960px) { #footer-news .flex > .tit { display: flex; align-items: center; justify-content: center; height: 49px; } } @media (max-width: 959px) { #footer-news .flex > .tit { width: 100%; box-sizing: border-box; padding: .5em 0; } } @media (min-width: 960px) { #footer-news .flex > div { min-width: 0; flex: 1; } } @media (max-width: 959px) { #footer-news .flex > div { width: 100%; } } #footer-news .flex > .js-news-more-btn { color: #FFF; text-align: center; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; line-height: 1.6; font-size: 15px; cursor: pointer; } @media (max-width: 767px) { #footer-news .flex > .js-news-more-btn { font-size: 12px; } } @media (min-width: 960px) { #footer-news .flex > .js-news-more-btn { width: 100px; color: #FFF; display: flex; align-items: center; justify-content: center; height: 49px; } } @media (max-width: 959px) { #footer-news .flex > .js-news-more-btn { width: 100%; display: block; padding: .5em 0; } } .footer-news-list { padding: 11px 0; } @media (max-width: 959px) { .footer-news-list { padding: 0 0; } } .footer-news-list.visible-all li:nth-child(n + 2) { height: auto; max-height: 1000px; opacity: 1; } .footer-news-list.visible-all li + li { margin-top: 8px; } .footer-news-list li:nth-child(n + 2) { transition: .4s; height: 0; max-height: 0; opacity: 0; overflow: hidden; } .footer-news-list a { display: flex; flex-wrap: wrap; font-size: 14px; width: 100%; padding: 3px 0; color: #fff; letter-spacing: .05em; } @media (min-width: 960px) { .footer-news-list a { align-items: center; } } @media (max-width: 959px) { .footer-news-list a { font-size: 12px; } } .footer-news-list .date { box-sizing: border-box; width: 137px; padding-left: 20px; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; } @media (max-width: 959px) { .footer-news-list .date { padding-left: 0; width: 100%; } } @media (min-width: 960px) { .footer-news-list .txt { min-width: 0; flex: 1; } } @media (max-width: 959px) { .footer-news-list .txt { width: 100%; } } .footer-news-list .txt span { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .footer-news-list .details { position: relative; text-align: center; width: 100px; color: #FFF; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; } .footer-news-list .details::after { position: absolute; right: 0; top: 50%; width: 14px; height: 1px; background: #FFF; content: ''; } #footer-main { color: #FFF; padding-top: 70px; padding-bottom: 80px; /*#banner-center-footer { text-align: center; padding-top: 80px; @media (max-width: 959px) { padding-top: 40px; } .bn{ text-align: center; @media (max-width:767px){//SP max-width: 600px; margin-left: auto; margin-right: auto; } + .bn{ margin-top: 40px; @media (max-width:767px){//SP margin-top: 20px; } } } .flex{ @media (min-width:768px){ display: flex; justify-content: space-between; .bn{ width: calc((100% - 30px)/2); + .bn{ margin-top: 0; } } } } }*/ } @media (max-width: 959px) { #footer-main { padding-top: 40px; padding-bottom: 40px; } } @media (min-width: 768px) { #footer-main .col-01 { display: flex; justify-content: space-between; } } @media (max-width: 767px) { #footer-main .col-01 { text-align: center; } } #footer-main .logo img { width: 280px; } @media (max-width: 959px) { #footer-main .logo img { width: 200px; } } #footer-main .hotel-info { font-size: 15px; } @media (max-width: 767px) { #footer-main .hotel-info { margin-top: 25px; text-align: left; max-width: 355px; margin-left: auto; margin-right: auto; } } #footer-main .address, #footer-main .tel { margin-top: 0; letter-spacing: .1em; } @media (max-width: 767px) { #footer-main .address, #footer-main .tel { font-size: 14px; } } #footer-main .tel { font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; } #footer-main .tel a { color: #FFF; } #footer-main .contact { margin-top: .5em; } #footer-main .contact a { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; width: 150px; height: 20px; border-radius: 15px; letter-spacing: .1em; text-align: center; border: #FFF 1px solid; text-align: center; color: #FFF; transition: .5s; font-size: 13px; } @media (max-width: 767px) { #footer-main .contact a { margin-left: auto; margin-right: auto; /*padding-left: 1em;*/ } } body:not(.is-touchdevice) #footer-main .contact a:hover, #footer-main .contact a.hover { background-color: #FFF; color: #76664f; } #footer-main #banner-center-footer { padding-top: 80px; max-width: 1446px; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { #footer-main #banner-center-footer { max-width: 600px; margin-left: auto; margin-right: auto; padding-top: 40px; } } #footer-main #banner-center-footer .slide_box .box { float: none; display: block; } #footer-main #banner-center-footer .slide_box .box .bn_slider { height: auto; /*padding-left: 14px;*/ display: none; } #footer-main #banner-center-footer .slide_box .box .bn_slider.slick-initialized { display: block; } #footer-main #banner-center-footer .slide_box .box .bn_slider li { margin-right: 0; margin-left: 0; display: flex; height: auto; flex-direction: column; align-items: center; justify-content: center; max-width: 709px; margin-left: 14px; margin-right: 14px; } #footer-main #banner-center-footer .slide_box:hover .slick-arrow { opacity: 1; } #footer-main #banner-center-footer .slick-arrow { background-image: url("../img/common/slider_arrow_b.png"); opacity: 0; } @media (max-width: 767px) { #footer-main #banner-center-footer .slick-arrow { opacity: 1; } } #footer-main #banner-center-footer .slick-prev { left: -40px; } @media (max-width: 767px) { #footer-main #banner-center-footer .slick-prev { left: 0px; } } #footer-main #banner-center-footer .slick-next { right: -40px; } @media (max-width: 767px) { #footer-main #banner-center-footer .slick-next { right: 0px; } } #footer-nav { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; margin-top: 70px; font-size: 14px; line-height: 20px; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; } @media (max-width: 959px) { #footer-nav { margin-top: 40px; line-height: 2.1; } } #footer-nav li::after { content: '/'; margin: 0 .2em; } @media (max-width: 959px) { #footer-nav li::after { margin: 0 .5em; } } #footer-nav li:last-child::after { display: none; } #footer-nav a { color: #FFF; } .copy { text-align: center; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; } /* メニュー ========================================================= */ #menu { overflow: hidden; opacity: 0; position: fixed; top: 0; left: 0; bottom: 0; color: #fff; background: linear-gradient(0deg, #e1d5d4, #dbd4cc, #00f2fe, #4facfe); background-size: 600% 600%; -webkit-animation: Gradient 10s ease infinite alternate; -moz-animation: Gradient 10s ease infinite alternate; animation: Gradient 10s ease infinite alternate; z-index: -999; transition: .5s; } @media (min-width: 960px) { #menu { width: 50%; } } @media (max-width: 959px) { #menu { width: 100%; } } #menu.autumn-winter { background: linear-gradient(0deg, #e1d5d4, #dbccb6, #c9a9df, #cc91a3); background-size: 600% 600%; -webkit-animation: Gradient 10s ease infinite alternate; -moz-animation: Gradient 10s ease infinite alternate; animation: Gradient 10s ease infinite alternate; } #menu .inner { position: relative; box-sizing: content-box; overflow-y: scroll; box-sizing: border-box; height: 100vh; } @media (min-width: 960px) { #menu .inner { padding: 6.25vh 7% 23.5294117647vh; } } @media (max-width: 959px) { #menu .inner { padding: 6.25vh 16px 23.5294117647vh; } } #menu .inner a { color: #FFF; } body:not(.is-touchdevice) #menu .inner { width: calc(100% + 17px); } @media (min-width: 960px) { body:not(.is-touchdevice) #menu .inner { padding-right: calc(70/1000*100% + 17px); } } @media (max-width: 959px) { body:not(.is-touchdevice) #menu .inner { padding-right: calc(16px + 17px); } } body.is-menu-open #menu { z-index: 100; opacity: 1; } .menu-logo { text-align: center; } .menu-logo img { max-width: 260px; width: calc(100% - 180px); } #gnav { margin-top: 20px; text-align: center; font-size: 70px; } #gnav ul { margin-top: 60px; margin-top: 4.4117647059vh; } #gnav li { width: 100%; color: #FFF; font-size: 50px; font-size: 3.6764705882vh; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; line-height: 1; } #gnav li.jp { font-size: 40px; font-size: 2.9411764706vh; } #gnav li + li { margin-top: 25px; margin-top: 1.8382352941vh; } #gnav li.reservation { position: relative; } #gnav li.reservation:after { content: ''; display: block; background-color: #e7d614; width: 100px; height: 6px; margin: 0 auto; } #sub { margin-top: 90px; margin-top: 6.6176470588vh; display: flex; justify-content: space-between; } #sub * { box-sizing: border-box; } #sub li { color: #FFF; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; font-size: 20px; font-size: 1.4705882353vh; } #sub li a { padding-left: .5em; padding-right: .5em; display: block; text-decoration: underline; } #sub li + li { margin-top: 20px; margin-top: 1.4705882353vh; } #call { margin-top: 100px; margin-top: 7.3529411765vh; text-align: center; } #call span { font-size: 20px; font-size: 1.4705882353vh; letter-spacing: -.05em; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; margin-right: 1em; } #call a { font-size: 60px; font-size: 4.4117647059vh; text-decoration: underline; } body.is-menu-open #menu { opacity: 1; z-index: 110; } #footer-contact { position: fixed; bottom: 0; right: 0; left: 0; display: flex; z-index: 100; opacity: 1; transition: opacity .5s; /*body.is-kv-show & { visibility: hidden; opacity: 0; }*/ } #footer-contact a { height: 50px; display: flex; align-items: center; justify-content: center; } #footer-contact .reservation-open-btn { flex: 2; background: #e7d614; /*position: relative;*/ display: flex; align-items: center; justify-content: center; /*&:before{ content: ''; display: block; width: 21px; height: 21px; background: url("../img/common/icon-calender.png") no-repeat center center / contain; position: absolute; top: 50%; left: calc(60 / 960 * 100vw); transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }*/ } #footer-contact .reservation-open-btn img { width: 21px; height: 21px; } #footer-contact .reservation-open-btn a { color: #76664f; font-size: 10px; font-weight: bold; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; text-align: center; padding-left: calc(60 / 960 * 100vw); } #footer-contact .tel-btn { flex: 1; width: 25%; background: #efeae5; } #footer-contact .map-btn { flex: 1; width: 25%; background: #76664f; } /* モーダル ========================================================= */ .modal-overlay { opacity: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: -999; transition: .5s; } /* 予約 ========================================================= */ #right-reservation { position: fixed; z-index: 100; right: 0; bottom: 0; background-color: #efeae5; width: 100%; max-width: 950px; height: 90px; opacity: 1; transition: all .5s; } #right-reservation * { color: #76664f; box-sizing: border-box; } #right-reservation .reservation-form { display: flex; width: 100%; height: 100%; } #right-reservation .right-reservation-inputs { display: flex; width: 100%; justify-content: space-between; } #right-reservation .right-reservation-inputs > div { display: flex; justify-content: space-between; flex-basis: 180px; max-width: 180px; height: 100%; padding: 20px; } #right-reservation .right-reservation-inputs > div.col-01 { padding-left: 50px; } #right-reservation .right-reservation-inputs > div.col-03 { width: 20%; max-width: 20%; padding: 0; } #right-reservation .right-reservation-inputs > div.text { display: flex; flex-direction: column; justify-content: space-evenly; position: relative; padding: 0 0 0 35px; } #right-reservation .right-reservation-inputs > div.text h3 { width: 230px; flex-shrink: 0; line-height: 1; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; font-size: 22px; display: flex; justify-content: center; align-items: center; } #right-reservation .right-reservation-inputs > div.text h3.is-hide-panel { content: ''; display: block; background: #76664f url("../img/common/icon-calender-white-text.png") no-repeat center center/114px; width: 174px; height: 90px; cursor: pointer; margin-left: -134px; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } #right-reservation .right-reservation-inputs > div.text h3.is-hide-panel:before { display: none; } #right-reservation .right-reservation-inputs > div.text h4 { width: 230px; flex-shrink: 0; line-height: 1; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: 16px; display: flex; justify-content: center; align-items: center; font-weight: bold; } #right-reservation .right-reservation-inputs > div.text:before { content: ''; display: block; margin-right: .5em; width: 34px; height: 32px; background: url("../img/common/icon-calender.png") no-repeat center center/contain; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } #right-reservation .right-reservation-inputs dt { font-size: 14px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; } #right-reservation .right-reservation-inputs input { -webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit; outline: none; background-color: transparent; border: none; border-radius: 0; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; } #right-reservation #checkin-date { font-size: 28px; text-align: left; } #right-reservation #number-of-night { font-size: 24px; text-align: center; width: 2em; } #right-reservation .right-reservation-night { width: 100%; } #right-reservation .right-reservation-night dd { display: flex; justify-content: space-between; align-items: center; } #right-reservation .btnspinner { font-size: 28px; cursor: pointer; font-weight: bold; } #right-reservation .right-reservation-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; font: inherit; outline: none; background-color: transparent; border: none; border-radius: 0; cursor: pointer; background-color: #e7d614; font-size: 18px; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; font-weight: bold; width: 100%; height: 100%; padding: 20px; display: flex !important; justify-content: center; align-items: center; } /* メンバー会員用 ----------------------------------------------- */ .mem-bottom { margin-bottom: 100px; } @media (max-width: 959px) { .mem-bottom { margin-bottom: 70px; } } .mem-list { padding-left: 15px; margin-top: 40px; line-height: 2; } @media (max-width: 959px) { .mem-list { margin-top: 20px; } } .mem-list li { list-style-type: '※'; } .member .com-btn-01.width-02 { font-size: 22px; width: 300px; height: 50px; line-height: 50px; background-color: #000; color: #fff; } .member .com-btn-01.width-02:hover { border: 1px solid #6f6f6f; color: #000; background-color: transparent; } @media (max-width: 767px) { .member .com-btn-01.width-02 { width: 100%; font-size: 12px; height: 100%; background-color: transparent; color: #000; } .member .com-btn-01.width-02:hover { color: #fff; background-color: #000; } } .member .com-btn-01:before { position: absolute; bottom: 50px; left: 50%; width: 1px; height: 50px; background: #6f6f6f; content: ''; transition: .5s ease-in-out; } /* IE11 */ /*_:-ms-lang(x)::-ms-backdrop, .modal-reservation-select { padding: 0 0 0 .5em; }*/ /* データピッカー ----------------------------------------------- */ .ui-datepicker-inline { width: 100% !important; border: none !important; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; } .ui-datepicker-header { background: transparent !important; border: none !important; } .ui-datepicker-next { border: none !important; background: none !important; text-align: center; font-weight: bold !important; cursor: pointer; } .ui-datepicker-next.ui-state-disabled { cursor: default; } .ui-datepicker-next::after { content: '>'; } .ui-datepicker-next span { display: none !important; } .ui-datepicker-prev { border: none !important; background: none !important; text-align: center; font-weight: bold !important; cursor: pointer; } .ui-datepicker-prev.ui-state-disabled { cursor: default; } .ui-datepicker-prev::after { content: '<'; } .ui-datepicker-prev span { display: none !important; } .ui-datepicker td { padding: 0 !important; } .ui-datepicker td a { color: #000 !important; } .ui-state-default { text-align: center !important; border-color: transparent !important; background: transparent !important; } .ui-state-default.ui-state-selected { background: #eee !important; } .ui-state-default.ui-state-active { background: #d5d5d5 !important; border-color: #000 !important; } .ui-datepicker-current-day .ui-state-highlight { background: #d5d5d5 !important; } .kt-unselectable { pointer-events: none; } /* テンプレート（template-01.html,template-02.html）で使っているパーツ ========================================================= */ /* セクション ----------------------------------------------- */ .com-section-01 { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 767px) { .com-section-01 { padding-top: 50px; padding-bottom: 50px; } } .com-section-02 { padding-top: 20px; padding-bottom: 20px; } @media (max-width: 767px) { .com-section-02 { padding-top: 10px; padding-bottom: 10px; } } .com-section-03 { padding-bottom: 100px; } @media (max-width: 767px) { .com-section-03 { padding-bottom: 50px; } } /* 見出し -------------------------------------- */ .com-tit-01 { font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; font-size:56px; line-height: 0.75em; position: relative; z-index: 1; } @media (max-width: 960px) { .com-tit-01 { font-size: 7.8vw; } } .com-tit-01:after { display: block; width: 80px; height: 1px; content: ''; margin: 20px auto 0px; background: #e7d614; } .com-tit-01.center { text-align: center; } .com-tit-01.center:after { margin-left: auto; margin-right: auto; } .com-tit-02 { font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; margin-bottom: 0.5333333333em; text-align: center; font-size:56px; line-height: 1; } @media (max-width: 767px) { .com-tit-02 { font-size: 35px; } } .com-tit-02::before { display: block; width: 80px; height: 1px; content: ''; margin: 0 auto 20px; background: #e7d614; } .com-tit-03 { font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; font-size: 45px; margin-bottom: .5em; letter-spacing: .1em; line-height: 1.2; } @media (max-width: 767px) { .com-tit-03 { font-size: 26px; } } .com-tit-04 { font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; margin-bottom: .5em; font-size: 24px; letter-spacing: .1em; } @media (max-width: 767px) { .com-tit-04 { font-size: 20px; } } [class*="com-tit-"] .number { font-family: "Times New Roman", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", 'Noto Serif JP', serif; } /* ボタン ----------------------------------------------- */ .com-btn-01 { box-sizing: border-box; position: relative; display: block; margin-top: 50px; margin-right: auto; margin-left: auto; cursor: pointer; text-align: center; padding: 0 .5em; max-width: 100%; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-size: 0.875rem; letter-spacing: .1em; color: #000; background: transparent; outline: none; border: transparent 1px solid; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; transition: .4s; } @media (max-width: 767px) { .com-btn-01 { width: 100%; margin-top: 50px; height: 50px; line-height: 50px; font-size: 12px; font-size: 0.75rem; } } .com-btn-01::before { position: absolute; bottom: 29px; left: 50%; width: 1px; height: 50px; background: #6f6f6f; content: ''; transition: .5s ease-in-out; } @media (max-width: 767px) { .com-btn-01::before { bottom: 49px; height: 30px; } } @media (max-width: 767px) { .com-btn-01::after { position: absolute; top: 0; left: 50%; width: 75px; height: 1px; background: #000000; content: ''; margin-left: -37px; } } body:not(.is-touchdevice) .com-btn-01:hover, .com-btn-01.hover { border-color: #6f6f6f; } @media (max-width: 767px) { body:not(.is-touchdevice) .com-btn-01:hover, .com-btn-01.hover { background: #000000; color: #fff; border-color: #000000; } } body:not(.is-touchdevice) .com-btn-01:hover::before, .com-btn-01.hover::before { height: 0; } .com-btn-01.mt-01 { margin-top: 100px; } @media (max-width: 767px) { .com-btn-01.mt-01 { margin-top: 50px; } } .com-btn-01.width-01 { width: 160px; } @media (max-width: 767px) { .com-btn-01.width-01 { width: 100%; } } .com-btn-01.width-02 { width: 200px; } @media (max-width: 767px) { .com-btn-01.width-02 { width: 100%; } } @media (max-width: 767px) { .com-btn-01.more-btn::after { display: none; } } .com-btn-02 { display: flex; justify-content: center; align-items: center; width: 200px; height: 30px; margin-top: 60px; letter-spacing: .1em; text-align: center; background: #eeeeee; text-align: center; } @media (max-width: 767px) { .com-btn-02 { width: 100%; height: 40px; margin-top: 45px; } } @media (min-width: 768px) { .com-btn-02.width-01 { width: 300px; } } .com-btn-03 { box-sizing: border-box; position: relative; display: flex; justify-content: center; align-items: center; width: 225px; height: 30px; margin-top: 25px; letter-spacing: .1em; text-align: center; border: #a4a4a4 1px solid; text-align: center; } @media (max-width: 767px) { .com-btn-03 { width: 100%; padding-left: 1em; height: 40px; margin-top: 25px; } } .com-btn-03::after { display: inline-block; font-size: 0; line-height: 1; transition: .3s; width: 11.5px; height: 7.5px; background: url(../img/common/arrow_04.svg) no-repeat center; background-size: contain; content: ''; } @media (min-width: 768px) { .com-btn-03::after { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); } } @media (max-width: 767px) { .com-btn-03::after { padding-left: 5px; } } @media (min-width: 768px) { body:not(.is-touchdevice) .com-btn-03:hover::after, .com-btn-03.hover::after { transform: translateY(0); } } @media (max-width: 767px) { body:not(.is-touchdevice) .com-btn-03:hover::after, .com-btn-03.hover::after { transform: translateY(25%); } } .modal-map-overlay { opacity: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: -999; transition: .5s; } .modal-map-overlay .close { z-index: 100; position: absolute; right: 0; top: 0; width: 45px; height: 45px; cursor: pointer; transition: opacity; } .modal-map-overlay .close::before, .modal-map-overlay .close::after { position: absolute; top: 50%; left: 50%; width: 30px; height: 1px; background: #fff; margin-left: -15px; content: ''; } .modal-map-overlay .close::before { transform: rotate(45deg); } .modal-map-overlay .close::after { transform: rotate(-45deg); } .modal-map-overlay .close:hover { opacity: .7; } .modal-map-overlay .loader { position: fixed; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); } body.is-map-open .modal-map-overlay { opacity: 1; z-index: 110; } #modal-map { display: inline-block; z-index: -999; position: fixed; opacity: 0; transition: .3s; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: auto; height: auto; overflow: auto; box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px; /* .inner { position: relative; text-align: center; display: inline-block; vertical-align: middle; box-sizing: border-box; height: 100%; overflow: scroll; padding: 50px 0; }*/ } body.is-map-open #modal-map { opacity: 1; height: auto; z-index: 111; } .com-btn-04 { box-sizing: border-box; background-color: transparent; color: #76664f; border: 1px solid #76664f; border-radius: 20px; width: 260px; height: 38px; line-height: 40px; /*font-size: 18px;*/ letter-spacing: 0.03em; display: block; margin: 0 auto; position: relative; z-index: 10; text-align: center; padding-left: 10px; padding-right: 10px; transition: .4s; } @media (max-width: 767px) { .com-btn-04 { white-space: normal; /* 改行許可 */ word-wrap: break-word; /* 長い単語の改行 */ } } .com-btn-04:hover { background-color: #76664f; color: #fff; border: 1px solid transparent; border-radius: 20px; } .com-btn-04_rev { border-radius: 20px; border: 1px solid transparent; width: 230px; height: 38px; line-height: 40px; /*font-size: 18px;*/ letter-spacing: 0.03em; background-color: #e7d614; display: block; margin: 0 auto; color: #fff; position: relative; z-index: 10; text-align: center; padding-left: 10px; padding-right: 10px; transition: .4s; } @media (max-width: 767px) { .com-btn-04_rev { width: 160px; font-size: 15px; } } .com-btn-04_rev:hover { background-color: transparent; color: #e7d614; border: 1px solid #e7d614; border-radius: 20px; } /* グリッド ----------------------------------------------- */ .com-grid-01 { display: flex; flex-wrap: wrap; margin-left: -50px; margin-top: -50px; /* &.col-2-tab { > * { @media (max-width: 959px) { width: 50%; } } } &.col-3-tab { > * { @media (max-width: 959px) { width: calc(100% / 3.001); } } } &.col-4-tab { > * { @media (max-width: 959px) { width: 25%; } } } &.col-2-sp { > * { @media (max-width: 767px) { width: 50%; } } } &.col-3-sp { > * { @media (max-width: 767px) { width: calc(100% / 3.001); } } } &.col-4-sp { > * { @media (max-width: 767px) { width: 25%; } } }*/ } .com-grid-01 > * { width: 100%; box-sizing: border-box; } @media (max-width: 959px) { .com-grid-01 { margin-left: -20px; } } .com-grid-01 > * { padding-left: 50px; margin-top: 50px; } @media (max-width: 959px) { .com-grid-01 > * { padding-left: 20px; } } .com-grid-01.col-2 > * { width: 50%; } @media (max-width: 767px) { .com-grid-01.col-2 > * { width: 100%; } } .com-grid-01.col-3 > * { width: calc(100% / 3.001); } @media (max-width: 959px) { .com-grid-01.col-3 > * { width: 50%; } } @media (max-width: 479px) { .com-grid-01.col-3 > * { width: 100%; } } .com-grid-01.col-4 > * { width: 25%; } @media (max-width: 959px) { .com-grid-01.col-4 > * { width: 50%; } } @media (min-width: 1200px) { .com-grid-01.margin-l { margin-left: -70px; } } @media (min-width: 1200px) { .com-grid-01.margin-l > * { padding-left: 70px; } } .com-grid-02 { display: flex; flex-wrap: wrap; } .com-grid-02 > * { width: 100%; box-sizing: border-box; } .com-grid-02 > div a { display: block; } @media (min-width: 1024px) { .com-grid-02 > div { width: calc((100% - 6px)/3); margin-bottom: 3px; margin-left: 3px; } .com-grid-02 > div:nth-child(3n+1) { margin-left: 0; } .com-grid-02 > div:nth-last-child(-n+3) { margin-bottom: 0; } .com-grid-02 > div a { padding-bottom: 50px; } } @media (max-width: 1023px) { .com-grid-02 > div { width: 50%; } .com-grid-02 > div a { padding-bottom: 30px; } } .com-grid-02 > div .image { position: relative; } .com-grid-02 > div .bg { position: relative; overflow: hidden; } .com-grid-02 > div .bg .yuragi-canvas { position: absolute; top: 0; left: 0; transform: scale(1.005); z-index: 0; } .com-grid-02 > div .bg .yuragi-image { position: relative; z-index: 1; transition: all .5s; } .com-grid-02 > div .text { color: #FFF; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; padding-left: 15.015015015%; padding-right: 15.015015015%; } .com-grid-02 > div .text h3 { font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; padding: 20px 0 20px 1.5vw; box-sizing: border-box; border-left: solid 1px #FFF; font-size: 3.25vw; color: #FFF; max-width: 100%; line-height: 1; letter-spacing: -.03em; } .com-grid-02 > div .text h3 span { font-size: 1.5vw; } .com-grid-02 > div .text h3 span.fz-45 { font-size: 2.25vw; } .com-grid-02 > div .text h3 span.fz-42 { font-size: 2.1vw; } @media (max-width: 767px) { .com-grid-02 > div .text h3 { padding: 10px 0 10px 1.5vw; font-size: 4.8vw; } .com-grid-02 > div .text h3 span { font-size: 3.4666666667vw; } .com-grid-02 > div .text h3 span.fz-45 { font-size: 4vw; } .com-grid-02 > div .text h3 span.fz-42 { font-size: 3.7333333333vw; } } .com-grid-02 > div .text p { font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; font-size: 14px; line-height: 16/14; padding: 0 1.5vw; box-sizing: border-box; } @media (max-width: 767px) { .com-grid-02 > div .text p { font-size: 12px; line-height: 1.2; } } @media (max-width: 568px) { .com-grid-02 > div .text p { font-size: 10px; } } .com-grid-02 > div a:hover .yuragi-image:not(.is-ie) { opacity: 0; } .com-grid-02 > div:nth-child(1) { background-color: #e7d614; } .com-grid-02 > div:nth-child(2) { background-color: #bab3a7; } .com-grid-02 > div:nth-child(3) { background-color: #d2cbbb; } .com-grid-02 > div:nth-child(4) { background-color: #bab3a7; } .com-grid-02 > div:nth-child(5) { background-color: #b59782; } .com-grid-02 > div:nth-child(6) { background-color: #e8e5e2; } .com-grid-02 > div:nth-child(7) { background-color: #e7d614; /*20250812追記*/ } body.is-sp-tab-ua .com-grid-02 > div .bg .yuragi-image { transition: all 0s; } /* アイテム ----------------------------------------------- */ .com-item-01 { box-sizing: border-box; padding: 1em; border: #eeeeee 1px solid; } .com-grid-01 .com-item-01 { height: 100%; } .com-item-01 figure { text-align: center; margin-bottom: 1em; } .com-item-01 p { text-align: center; color: #76664f; letter-spacing: .1em; line-height: 1.7142857143; } @media (min-width: 768px) { .com-item-01 p { font-size: 14px; } } .com-item-02 { letter-spacing: .1em; } .com-item-02 .tit { margin-bottom: 1em; font-size: 18px; } @media (max-width: 959px) { .com-item-02 .tit { text-align: center; } } @media (max-width: 768px) and (min-width: 767px) { .com-item-02 .tit { letter-spacing: -.01em; } } .com-item-02 figure { float: left; width: 28.4482758621%; margin-right: 22px; } @media (max-width: 959px) { .com-item-02 figure { float: none; width: 100%; margin: 0; } } .com-item-02 figure img { width: 100%; } .com-item-02 .txt { padding-left: 185px; } @media (max-width: 959px) { .com-item-02 .txt { padding: 0; margin-top: 30px; } } .com-item-02 .txt p { font-size: 12px; line-height: 1.6666666667; } @media (max-width: 959px) { .com-item-02 .txt p { line-height: 2.5; } } .com-item-03 { padding: 16px; border: #979797 1px solid; letter-spacing: .1em; } .com-item-03::after { display: table; height: 0; content: ''; font-size: 0; line-height: 1; clear: both; } .com-item-03 .tit { margin-bottom: 1em; font-size: 18px; } @media (min-width: 960px) { .com-item-03 .tit { float: right; width: 66.2962962963%; } } @media (max-width: 959px) { .com-item-03 .tit { text-align: center; margin-bottom: 2em; } } @media (min-width: 960px) { .com-item-03 figure { float: left; width: 29.6296296296%; } } @media (max-width: 959px) { .com-item-03 figure { float: none; width: 100%; margin: 0; } } .com-item-03 figure img { width: 100%; } @media (min-width: 960px) { .com-item-03 .txt { float: right; width: 66.2962962963%; } } @media (max-width: 959px) { .com-item-03 .txt { padding: 0; margin-top: 30px; } } .com-item-03 .txt p { font-size: 12px; line-height: 1.6666666667; } @media (max-width: 959px) { .com-item-03 .txt p { line-height: 2.5; } } .com-item-04 { display: block; } .com-item-04 figure { position: relative; margin-bottom: 1em; } .com-item-04 figure img { width: 100%; } .com-item-04 .tit { font-size: 16px; } @media (min-width: 960px) { .com-item-04 .tit { margin-bottom: .2em; } } @media (max-width: 959px) { .com-item-04 .tit { font-size: 15px; } } .com-item-04 .txt { font-size: 16px; } @media (max-width: 959px) { .com-item-04 .txt { font-size: 15px; } } a.com-item-04 figure::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.35); content: ''; opacity: 0; transition: .4s; } body:not(.is-touchdevice) a.com-item-04:hover figure::after, a.com-item-04.hover figure::after { opacity: 1; } .com-item-05 header { margin-bottom: 50px; } @media (max-width: 768px) { .com-item-05 header { margin-bottom: 20px; } } .com-item-05 header .status { color: #a4a4a4; font-size: 0; } .com-item-05 header .status li { display: inline-block; font-size: 20px; } .com-item-05 header .status li.date { margin-right: 1em; } .com-item-05 header h3 { font-size: 35px; line-height: 1.6; font-weight: normal; } @media (max-width: 1024px) { .com-item-05 header h3 { font-size: 30px; } } @media (max-width: 768px) { .com-item-05 header h3 { font-size: 22px; } } .com-item-05 figure { text-align: center; } /* ローカルナビ ----------------------------------------------- */ .com-local-nav-01 { display: flex; flex-wrap: wrap; margin-top: -15px; } .com-local-nav-01 > * { width: 100%; box-sizing: border-box; } .com-local-nav-01 li { margin-top: 15px; border-left: #bebebe 1px solid; } .com-local-nav-01 li:last-child { border-right: #bebebe 1px solid; } @media (max-width: 767px) { .com-local-nav-01 li { width: 100%; } } .com-local-nav-01 a { position: relative; display: flex; align-items: center; justify-content: center; height: 45px; box-sizing: border-box; padding: 0 10px 10px; line-height: 1.2; letter-spacing: .1em; font-family: font-family-04; color: #76664f; } @media (max-width: 767px) { .com-local-nav-01 a { height: 35px; padding-bottom: 13px; font-size: 12px; } } .com-local-nav-01 a::after { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: block; line-height: 1; font-size: 0; width: 24.5px; height: 12.5px; background: url(../img/common/arrow_01.svg) no-repeat center; background-size: contain; content: ''; transition: .2s; } @media (max-width: 767px) { .com-local-nav-01 a::after { width: 14.7px; height: 7.5px; } } body:not(.is-touchdevice) .com-local-nav-01 a:hover, .com-local-nav-01 a.hover, .com-local-nav-01 a.active { letter-spacing: .2em; } body:not(.is-touchdevice) .com-local-nav-01 a:hover::after, .com-local-nav-01 a.hover::after, .com-local-nav-01 a.active::after { bottom: 2px; } @media (min-width: 768px) { .com-local-nav-01.col-5 li { width: 20%; } } @media (min-width: 768px) { .com-local-nav-01.col-4 li { width: 25%; } } @media (min-width: 768px) { .com-local-nav-01.col-3 li { width: calc(100% / 3.001); } } @media (min-width: 768px) { .com-local-nav-01.col-2 li { width: 50%; } } @media (max-width: 767px) { .com-local-nav-01.col-2-sp li { width: 50%; } } @media (max-width: 767px) { .com-local-nav-01.col-2-sp li:nth-child(2n) { border-right: #bebebe 1px solid; } } @media (max-width: 767px) { .com-local-nav-01:not(.col-2-sp) li { border-right: #bebebe 1px solid; } } /* 画像つきナビ ----------------------------------------------- */ .com-img-nav-01 { display: flex; flex-wrap: wrap; margin-top: -30px; margin-left: -30px; } .com-img-nav-01 > * { width: 100%; box-sizing: border-box; } @media (max-width: 767px) { .com-img-nav-01 { margin-left: -15px; } } .com-img-nav-01 li { margin-top: 30px; padding-left: 30px; } @media (max-width: 767px) { .com-img-nav-01 li { padding-left: 15px; } } .com-img-nav-01.col-2 li { width: 50%; } @media (max-width: 767px) { .com-img-nav-01.col-2 li { width: 100%; } } .com-img-nav-01.col-3 li { width: calc(100% / 3.001); } @media (max-width: 767px) { .com-img-nav-01.col-3 li { width: 50%; } } .com-img-nav-01 figure { position: relative; } .com-img-nav-01 figure:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background: #000; transition: .4s; content: ''; } .com-img-nav-01 figure img { width: 100%; } .com-img-nav-01 figcaption { position: absolute; right: 30%; bottom: 0; left: 0; font-size: 16px; color: rgba(255, 255, 255, 0.7); letter-spacing: .05em; padding: 0 1em 1em 3em; } @media (max-width: 767px) { .com-img-nav-01 figcaption { padding-left: 4em; font-size: 12px; } } .com-img-nav-01 figcaption::before { position: absolute; left: 16px; top: .5em; width: 24.5px; height: 12px; background: url(../img/common/arrow_02.svg) no-repeat center; background-size: cover; content: ''; } @media (max-width: 767px) { .com-img-nav-01 figcaption::before { transform: scale(0.9); } } .com-img-nav-01 a { display: block; } .com-img-nav-01 a:hover figure::after { opacity: .35; } .com-img-nav-01 a:hover img { opacity: 1; } .com-img-nav-02 { display: flex; flex-wrap: wrap; margin-top: -30px; margin-left: -70px; } .com-img-nav-02 > * { width: 100%; box-sizing: border-box; } @media (max-width: 959px) { .com-img-nav-02 { margin-left: -30px; } } @media (max-width: 767px) { .com-img-nav-02 { margin-left: -15px; } } .com-img-nav-02 li { margin-top: 30px; padding-left: 70px; } @media (max-width: 959px) { .com-img-nav-02 li { padding-left: 30px; } } @media (max-width: 767px) { .com-img-nav-02 li { padding-left: 15px; } } .com-img-nav-02.col-2 li { width: 50%; } .com-img-nav-02.col-3 li { width: calc(100% / 3.001); } @media (max-width: 767px) { .com-img-nav-02.col-3 li { width: 50%; } } .com-img-nav-02 figure { position: relative; } .com-img-nav-02 figure:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background: rgba(0, 0, 0, 0.35); transition: .4s; content: ''; } .com-img-nav-02 figure img { width: 100%; } .com-img-nav-02 span { position: relative; display: block; margin-top: 1em; font-size: 16px; color: #464646; padding: 0 1em 1em 2em; } @media (max-width: 767px) { .com-img-nav-02 span { padding-left: 2.4em; font-size: 12px; } } .com-img-nav-02 span::before { position: absolute; left: 0px; top: .5em; width: 24.5px; height: 12px; background: url(../img/common/arrow_03.svg) no-repeat center; background-size: cover; content: ''; } @media (max-width: 767px) { .com-img-nav-02 span::before { transform: scale(0.9); } } .com-img-nav-02 a { display: block; } .com-img-nav-02 a:hover figure::after { opacity: 1; } .com-img-nav-02 a:hover img { opacity: 1; } /* faqナビ ----------------------------------------------- */ .faq-nav-01 { display: flex; flex-wrap: wrap; margin-top: -15px; } .faq-nav-01 > * { width: 100%; box-sizing: border-box; } .faq-nav-01 li { margin-bottom: 30px; border-right: #bebebe 1px solid; } .faq-nav-01 li:first-child { border-left: #bebebe 1px solid; } .faq-nav-01 li:nth-child(3n+4) { border-left: #bebebe 1px solid; } @media (min-width: 768px) { .faq-nav-01 li:nth-child(3n+1):nth-last-child(-n+3), .faq-nav-01 li:nth-child(3n+1):nth-last-child(-n+3) ~ li { margin-bottom: 0; } } @media (max-width: 767px) { .faq-nav-01 li { width: 100%; } .faq-nav-01 li:first-child { border-left: #bebebe 1px solid; } .faq-nav-01 li:nth-child(n+2) { border-left: #bebebe 1px solid; } .faq-nav-01 li:last-child { margin-bottom: 0; } } .faq-nav-01 a { position: relative; display: flex; align-items: center; justify-content: center; height: 45px; box-sizing: border-box; padding: 0 10px 10px; line-height: 1.2; letter-spacing: .1em; font-family: font-family-04; color: #76664f; } @media (max-width: 767px) { .faq-nav-01 a { height: 35px; padding-bottom: 13px; font-size: 12px; } } .faq-nav-01 a::after { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: block; line-height: 1; font-size: 0; width: 24.5px; height: 12.5px; background: url(../img/common/arrow_01.svg) no-repeat center; background-size: contain; content: ''; transition: .2s; } @media (max-width: 767px) { .faq-nav-01 a::after { width: 14.7px; height: 7.5px; } } body:not(.is-touchdevice) .faq-nav-01 a:hover, .faq-nav-01 a.hover, .faq-nav-01 a.active { letter-spacing: .2em; } body:not(.is-touchdevice) .faq-nav-01 a:hover::after, .faq-nav-01 a.hover::after, .faq-nav-01 a.active::after { bottom: 2px; } @media (min-width: 768px) { .faq-nav-01.col-5 li { width: 20%; } } @media (min-width: 768px) { .faq-nav-01.col-4 li { width: 25%; } } @media (min-width: 768px) { .faq-nav-01.col-3 li { width: calc(100% / 3.001); } } @media (min-width: 768px) { .faq-nav-01.col-2 li { width: 50%; } } @media (max-width: 767px) { .faq-nav-01.col-2-sp li { width: 50%; } } @media (max-width: 767px) { .faq-nav-01.col-2-sp li:nth-child(2n) { border-right: #bebebe 1px solid; } } @media (max-width: 767px) { .faq-nav-01:not(.col-2-sp) li { border-right: #bebebe 1px solid; } } /* スライダー -------------------------------------- */ .com-slider-box-01 .slick-dots { position: absolute; right: 0; bottom: 24px; left: 0; z-index: 1; } @media (max-width: 767px) { .com-slider-box-01 .slick-dots { bottom: auto; position: relative; margin-top: 16px; } } .com-slider-box-01 img { width: 100%; } .com-slider-box-01 .slick-arrow { z-index: 5; position: absolute; top: 50%; transform: translateY(-50%); width: 51px; height: 74px; background-image: url(../img/common/slider_arrow_shadow.png); } @media (max-width: 767px) { .com-slider-box-01 .slick-arrow { width: 25.5px; height: 37px; background-size: 25.5px auto; } } .com-slider-box-01 .slick-arrow.slick-next { right: auto; left: calc(50% + 610px); } @media (max-width: 1330px) { .com-slider-box-01 .slick-arrow.slick-next { left: auto; right: 10px; } } .com-slider-box-01 .slick-arrow.slick-prev { left: auto; right: calc(50% + 610px); transform: translateY(-50%) rotate(180deg); } @media (max-width: 1330px) { .com-slider-box-01 .slick-arrow.slick-prev { right: auto; left: 10px; } } .com-slider-box-02 { max-width: 1100px; margin-right: auto; margin-left: auto; padding-bottom: 55px; } @media (max-width: 767px) { .com-slider-box-02 { padding-bottom: 20px; } } .com-slider-box-02 .slick-dots { position: absolute; right: 0; bottom: -55px; left: 0; z-index: 1; } @media (min-width: 768px) { .com-slider-box-02 .slick-dots { justify-content: flex-start; } } @media (max-width: 767px) { .com-slider-box-02 .slick-dots { bottom: -20px; } } .com-slider-box-02 .slick-dots li { margin: 0 10px 0 0; } @media (max-width: 767px) { .com-slider-box-02 .slick-dots li { margin-right: 6px; } } .com-slider-box-02 .slick-arrow { z-index: 5; position: absolute; top: 50%; transform: translateY(-50%); width: 51px; height: 74px; } @media (max-width: 1330px) { .com-slider-box-02 .slick-arrow { background-image: url(../img/common/slider_arrow_shadow.png); } } @media (max-width: 767px) { .com-slider-box-02 .slick-arrow { width: 25.5px; height: 37px; background-size: 25.5px auto; } } .com-slider-box-02 .slick-arrow.slick-next { right: auto; left: calc(50% + 610px); } @media (max-width: 1330px) { .com-slider-box-02 .slick-arrow.slick-next { left: auto; right: 10px; } } .com-slider-box-02 .slick-arrow.slick-prev { left: auto; right: calc(50% + 610px); transform: translateY(-50%) rotate(180deg); } @media (max-width: 1330px) { .com-slider-box-02 .slick-arrow.slick-prev { right: auto; left: 10px; } } .com-slider-box-03 { display: flex; flex-wrap: wrap; width: 123.5%; } .com-slider-box-03::after { display: table; height: 0px; clear: both; font-size: 0; line-height: 1; } @media (max-width: 959px) { .com-slider-box-03 { width: 100%; } } .com-slider-box-03.reverse { flex-direction: row-reverse; margin-right: 0; margin-left: auto; float: right; } .com-slider-box-03 .col-01 { width: 42.5101214575%; padding-bottom: 47px; } @media (max-width: 959px) { .com-slider-box-03 .col-01 { width: 100%; padding-bottom: 33px; } } .com-slider-box-03 .col-02 { flex: 1; box-sizing: border-box; padding: 30px 60px 0; } @media (min-width: 960px) { .com-slider-box-03 .col-02 { display: flex; flex-direction: column; justify-content: center; } } @media (max-width: 959px) { .com-slider-box-03 .col-02 { width: 100%; padding: 45px 16px 0; } .com-slider-box-03 .col-02 .upper { padding: 0 30px; } } .com-slider-box-03 .col-03 { width: 31.1740890688%; align-self: flex-end; } .com-slider-box-03 .slider-01 { overflow: hidden; } .com-slider-box-03 .slider-01 figure { overflow: hidden; } .com-slider-box-03 .slider-01 img { object-fit: cover; width: 100%; height: 100%; transition: 5s; transform: scale(1.2); } .com-slider-box-03 .slider-01 .slick-current img { transform: scale(1); } .com-slider-box-03 .slider-01 .slick-dots { position: absolute; bottom: 24px; } .com-slider-box-03 .slider-02 .animate-zoom-out { transform: scale(1) !important; opacity: 1 !important; } .com-slider-box-03 .slick-arrow { width: 40px; height: 40px; top: auto; bottom: 10px; background-image: url(../img/common/slider_arrow_square.png); } @media (max-width: 959px) { .com-slider-box-03 .slick-arrow { z-index: 5; position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); width: 51px; height: 74px; background-image: url(../img/common/slider_arrow_shadow.png); } } @media (max-width: 767px) { .com-slider-box-03 .slick-arrow { width: 25.5px; height: 37px; background-size: 25.5px auto; } } .com-slider-box-03 .slick-arrow.slick-next { right: 0; left: auto; transform: none; } @media (max-width: 959px) { .com-slider-box-03 .slick-arrow.slick-next { right: 10px; } } .com-slider-box-03 .slick-arrow.slick-prev { right: 41px; left: auto; transform: rotate(180deg); } @media (max-width: 959px) { .com-slider-box-03 .slick-arrow.slick-prev { right: auto; left: 10px; } } .com-slider-box-03.reverse .slick-arrow.slick-next { right: 0; left: 41px; } .com-slider-box-03.reverse .slick-arrow.slick-prev { right: auto; left: 0; } _:-ms-lang(x)::-ms-backdrop, .com-slider-box-03 .col-02 { display: block; } .com-slider-box-04 { max-width: 1000px; } @media (max-width: 767px) { .com-slider-box-04 { padding-bottom: 16px; } } .com-slider-box-04 .slick-dots { position: absolute; right: 0; bottom: 24px; left: 0; z-index: 1; } @media (min-width: 768px) { .com-slider-box-04 .slick-dots { justify-content: flex-end; } } @media (max-width: 767px) { .com-slider-box-04 .slick-dots { bottom: -16px; } } .com-slider-box-04 .slick-dots li { margin: 0 10px 0 0; } @media (max-width: 767px) { .com-slider-box-04 .slick-dots li { margin-right: 6px; } } /* パネル ----------------------------------------------- */ .com-panel-01 { display: flex; flex-wrap: wrap; flex-direction: row-reverse; } .com-panel-01 > header { width: 29.1666666667%; text-align: center; } @media (max-width: 959px) { .com-panel-01 > header { width: 100%; } } .com-panel-01 > div { flex: 1; } @media (max-width: 959px) { .com-panel-01 > div { flex: none; width: 100%; } } .com-panel-01 .tit { display: inline-block; text-align: left; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; font-size: 18px; line-height: 60px; letter-spacing: .2em; } @media (max-width: 959px) { .com-panel-01 .tit { line-height: 32px; margin-bottom: 1em; } } .com-panel-01 .txt { margin-top: 3em; } .com-panel-01 .flex { display: flex; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 959px) { .com-panel-01 .flex > * { width: 100%; } } @media (max-width: 959px) { .com-panel-01 .flex .btn { margin-top: 20px; } } .com-panel-01 .flex:first-child .txt { margin-top: 0; } .com-panel-02 { max-width: 1200px; margin-right: auto; margin-left: auto; } .com-panel-02 > * { padding-right: 20px; padding-left: 20px; } @media (max-width: 767px) { .com-panel-02 > * { padding-right: 16px; padding-left: 16px; } } .com-panel-02 .tit { margin-bottom: 1.5em; padding-bottom: 1em; font-size: 16px; border-bottom: #a4a4a4 1px solid; } .com-panel-02 .grid { display: flex; flex-wrap: wrap; margin-left: -30px; } .com-panel-02 .grid > * { width: 100%; box-sizing: border-box; } .com-panel-02 .grid > * { width: 50%; padding-left: 30px; } @media (max-width: 767px) { .com-panel-02 .grid > * { width: 100%; } } .com-panel-02 .btns { display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .com-panel-02 .btns > * { margin-right: 35px; } } @media (max-width: 767px) { .com-panel-02 .btns > * { width: 100%; } } .com-panel-03 { position: relative; padding-top: 100px; padding-bottom: 100px; /*> div { width: 50%; box-sizing: border-box; @media (max-width: 767px) { width: 100%; } }*/ } @media (max-width: 767px) { .com-panel-03 { padding-top: 45px; padding-bottom: 45px; } } .com-panel-03:first-child { padding-top: 0; } .com-panel-03 .header .tit { text-align: left; display: inline-block; font-size: 36px; letter-spacing: .1em; line-height: 2; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; } @media (max-width: 767px) { .com-panel-03 .header .tit { font-size: 25px; line-height: 1.6; } } .com-panel-03 .header small { margin-top: 1em; display: block; } @media (max-width: 959px) { .com-panel-03 .header small { font-size: 11px; } } @media (max-width: 767px) { .com-panel-03 .txt { margin-top: 35px; } } .com-panel-03 .txt p { line-height: 2.5; display: inline-block; text-align: left; } @media (max-width: 767px) { .com-panel-03 .txt p { line-height: 2; } } .com-panel-03 .com-btn-01 { position: absolute; top: 0; right: -60px; } @media (max-width: 1160px) { .com-panel-03 .com-btn-01 { right: 20px; } } @media (max-width: 767px) { .com-panel-03 .com-btn-01 { position: relative; right: 0; margin-top: 75px; } } .com-panel-04 { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; } @media (min-width: 960px) { .com-panel-04 { max-width: 380px; margin-right: auto; margin-left: auto; } } @media (max-width: 1300px) { .com-panel-04 { display: block; } } .com-panel-04 .upper { flex: 1; } .com-panel-04 .lower { margin-top: 70px; } .com-panel-04 .header { text-align: center; /*@media (min-width: 960px) { min-height: 250px; }*/ } .com-panel-04 .tit { font-size: 36px; letter-spacing: .1em; line-height: 2; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; } @media (max-width: 767px) { .com-panel-04 .tit { font-size: 25px; line-height: 1.6; } } .com-panel-04 .tit .number { font-family: "Times New Roman", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", 'Noto Serif JP', serif; } .com-panel-04 .txt { margin-top: 30px; letter-spacing: .05em; } .com-panel-04 dl { display: flex; flex-wrap: wrap; margin-top: 30px; letter-spacing: .2em; } @media (max-width: 767px) { .com-panel-04 dl { margin-top: 25px; } } .com-panel-04 dt { width: 75px; } @media (max-width: 767px) { .com-panel-04 dt { width: 60px; } } .com-panel-04 dt::after { content: ' |'; } .com-panel-04 dd { width: calc(100% - 75px); } @media (max-width: 767px) { .com-panel-04 dd { width: calc(100% - 60px); } } _:-ms-lang(x)::-ms-backdrop, .com-panel-04 { display: block; } .com-panel-05 figure img { width: 100%; } .com-panel-05 figure + .tit { margin-top: 1.2em; } .com-panel-05 .tit { margin: 0 0 1em; font-size: 22px; letter-spacing: .12em; } @media (max-width: 767px) { .com-panel-05 .tit { font-size: 18px; } } .com-panel-05 .lower { margin-top: 70px; } .com-panel-05 dl { display: flex; flex-wrap: wrap; margin-top: 30px; letter-spacing: .2em; } @media (max-width: 767px) { .com-panel-05 dl { margin-top: 25px; } } .com-panel-05 dt { width: 75px; } @media (max-width: 767px) { .com-panel-05 dt { width: 60px; } } .com-panel-05 dt::after { content: ' |'; } .com-panel-05 dd { width: calc(100% - 75px); } @media (max-width: 767px) { .com-panel-05 dd { width: calc(100% - 60px); } } .com-panel-06::after { display: table; height: 0px; clear: both; font-size: 0; content: ''; } .com-panel-06 .box-01 { letter-spacing: .1em; } @media (min-width: 768px) { .com-panel-06 .box-01 { float: left; width: 50%; padding-top: 80px; } } .com-panel-06 .box-01 .tit { margin-bottom: 2em; font-size: 28px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; line-height: 1.2; } @media (max-width: 767px) { .com-panel-06 .box-01 .tit { margin-bottom: 1.4em; font-size: 25px; text-align: center; } } .com-panel-06 .box-01 .tit small { font-size: 80%; } @media (min-width: 768px) { .com-panel-06 .box-02 { float: right; width: 41.6666666667%; } } @media (max-width: 767px) { .com-panel-06 .box-02 { margin-top: 40px; } } @media (max-width: 767px) { .com-panel-06 .box-02 figure { text-align: center; } } .com-panel-06 .box-02 .detail { margin-top: 60px; padding-top: 1.5em; border-top: #a4a4a4 1px solid; } @media (max-width: 767px) { .com-panel-06 .box-02 .detail { margin-top: 40px; } } .com-panel-06 .box-02 .detail.is-open { padding-bottom: 30px; border-bottom: #a4a4a4 1px solid; } @media (max-width: 767px) { .com-panel-06 .box-02 .detail.is-open .detail-content { height: auto; max-height: 1000px; opacity: 1; } } @media (max-width: 767px) { .com-panel-06 .box-02 .detail-content { transition: .4s; height: 0; max-height: 0; opacity: 0; overflow: hidden; } } @media (min-width: 768px) { .com-panel-06 .box-03 { float: left; width: 50%; margin-top: 110px; } } @media (max-width: 767px) { .com-panel-06 .box-03 { margin-top: 50px; text-align: center; } } .com-panel-07 { display: flex; justify-content: space-between; flex-wrap: wrap; } .com-panel-07.reverse { flex-direction: row-reverse; } @media (max-width: 959px) { .com-panel-07 > * { width: 100% !important; } .com-panel-07 > * + * { margin-top: 30px; } } .com-panel-07 .text { width: 37.5%; } .com-panel-07 .text.middle { align-self: center; } .com-panel-07 .text h3 { font-size: 24px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; } .com-panel-07 .image { width: 54.1666666667%; text-align: center; } .com-panel-08 { /*&.sp-lead{ @media (max-width: 959px){ display: block; .col-01{ p{ margin-top: 70px; } } } @media (min-width: 960px) { display: none; } }*/ } .com-panel-08, .com-panel-08 * { box-sizing: border-box; } @media (min-width: 960px) { .com-panel-08 { display: flex; max-width: 80%; margin-left: auto; margin-right: 0; } .com-panel-08 .col-01 { position: relative; z-index: 1; max-width: 300px; margin-right: 5.625%; } .com-panel-08 .col-01 h2 { word-break: keep-all; width: max-content; } .com-panel-08 .col-01 p { padding-left: 15px; } .com-panel-08 .col-02 { width: 75.625%; } .com-panel-08 .change_sp { display: none; } } @media (max-width: 959px) { .com-panel-08 { max-width: 100%; padding-left: 16px; padding-right: 16px; text-align: center; /*display: none;*/ } .com-panel-08 .com-tit-01:after { margin-left: auto; margin-right: auto; } .com-panel-08 .col-02 { margin-top: 30px; } .com-panel-08 .change_pc { display: none; } } .com-panel-08 h2 { margin-bottom: 50px; } @media (max-width: 969px) { .com-panel-08 h2 { margin-bottom: 30px; } } @media (max-width: 969px) { .com-panel-08 p { text-align: left; margin-top: 70px; margin-left: 30px; margin-right: 30px; } .com-panel-08 p.top { margin-top: 30px; } } .com-panel-08 .animate-from-right { transform: translateX(50%); transition: 2s ease-out transform,2s ease-out opacity,3s ease-out box-shadow; transition-delay: .5s; box-shadow: 0 0 0 0 transparent; } .com-panel-08 .animate-from-right.inview { transform: translateX(0); opacity: 1; box-shadow: -50px 50px 0 0 rgba(186, 179, 167, 0.51); } /* テーブル ----------------------------------------------- */ .com-line-01 { border-color: #eeeeee; } /* テーブル ----------------------------------------------- */ .com-table-01 { letter-spacing: .1em; line-height: 2.3333333333; } .com-table-01 > div { display: flex; flex-wrap: wrap; } .com-table-01 dt { width: 120px; } @media (max-width: 767px) { .com-table-01 dt { width: 90px; } } .com-table-01 dd { flex: 1; } .com-table-02 { background: #f5f6f4; border: #eeeeee 1px solid; } .com-table-02 > div { display: flex; flex-wrap: wrap; } @media (min-width: 480px) { .com-table-02 > div.large-nowrap { flex-wrap: nowrap; } .com-table-02 > div.large-nowrap > dt { flex-shrink: 0; } } .com-table-02 > div + div dt { border-top: #eeeeee 1px solid; } @media (max-width: 479px) { .com-table-02 > div + div dt { border: none; } } .com-table-02 > div + div dd { border-top: #eeeeee 1px solid; } @media (max-width: 479px) { .com-table-02 > div + div dd { border: none; } } .com-table-02 dt { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 200px; padding: 1em; text-align: center; color: #000; line-height: 1.6; background: #bab3a7; } @media (max-width: 767px) { .com-table-02 dt { width: 150px; } } @media (max-width: 479px) { .com-table-02 dt { width: 100%; } } @media (max-width: 479px) { .com-table-02 dt + dd { border: none; } } .com-table-02 dd { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1em 2em; font-size: 14px; line-height: 2.3571428571; color: #76664f; border-color: #a4a4a4; border-style: solid; } @media (max-width: 767px) { .com-table-02 dd { font-size: 12px; } } .com-table-03 { display: flex; width: 100%; } .com-table-03 > div { width: 100%; display: flex; flex-direction: column; } .com-table-03 > div dt { width: auto; padding: .5em; } @media (max-width: 767px) { .com-table-03 > div dt { height: 4em; } } .com-table-03 > div dd { padding: .5em; line-height: 1.2; } .com-table-04 { display: flex; flex-wrap: wrap; margin-top: 30px; letter-spacing: .2em; } @media (max-width: 767px) { .com-table-04 { margin-top: 25px; } } .com-table-04 dt { width: 75px; } @media (max-width: 767px) { .com-table-04 dt { width: 60px; } } .com-table-04 dt::after { content: ' |'; } .com-table-04 dd { width: calc(100% - 75px); } @media (max-width: 767px) { .com-table-04 dd { width: calc(100% - 60px); } } .terms-figure-01 { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; } .terms-figure-01 + .terms-figure-01 { margin-top: 50px; } .terms-figure-01 .caption { display: block; margin-bottom: .8em; font-size: 16px; font-size: 1rem; font-weight: 700; letter-spacing: .15em; line-height: 1.64; } @media (max-width: 1024px) { .terms-figure-01 .caption { font-size: 13px; font-size: 0.8125rem; } } .terms-figure-01 table { width: 100%; font-weight: 400; font-size: 15px; font-size: 0.9375rem; border: #a4a4a4 1px solid; background: rgba(245, 245, 244, 0.7); } @media (max-width: 1024px) { .terms-figure-01 table { font-size: 13px; font-size: 0.8125rem; } } @media (max-width: 767px) { .terms-figure-01 table { font-size: 12px; font-size: 0.75rem; } } .terms-figure-01 table th, .terms-figure-01 table td { border: #a4a4a4 1px solid; vertical-align: middle; text-align: center; line-height: 1.4; box-sizing: border-box; } .terms-figure-01 table th { padding: .5em; font-weight: 400; background: rgba(164, 164, 164, 0.3); } .terms-figure-01 table th span.tategaki { vertical-align: middle; display: inline-block; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; vertical-align: middle; word-break: keep-all; } .terms-figure-01 table.table-01 .col-01 { width: 65px; } @media (max-width: 1024px) { .terms-figure-01 table.table-01 .col-01 { width: 34px; } } .terms-figure-01 table.table-01 .col-02 { width: 65px; } @media (max-width: 1024px) { .terms-figure-01 table.table-01 .col-02 { width: 34px; } } .terms-figure-01 table.table-01 tbody td { padding: 30px 50px; text-align: left; } @media (max-width: 1024px) { .terms-figure-01 table.table-01 tbody td { padding: 20px 24px; } } .terms-figure-01 table.table-02 { border-collapse: collapse; table-layout: fixed; height: 100%; /*.col-02 { width: 65px; @media (max-width: 1024px) { width: 35px; } @media (max-width: 767px) { width: 120px; } }*/ } .terms-figure-01 table.table-02 th.tit { padding: 0; background: rgba(164, 164, 164, 0.3) url("../img/clause/line.png") no-repeat center; background-size: 100% 100%; border: #a4a4a4 1px solid; } .terms-figure-01 table.table-02 th.tit > div { position: relative; min-height: 80px; } @media (max-width: 1024px) { .terms-figure-01 table.table-02 th.tit > div { min-height: 70px; } } @media (max-width: 767px) { .terms-figure-01 table.table-02 th.tit > div { min-height: 75px; } } .terms-figure-01 table.table-02 th.tit span { margin: 0 !important; position: absolute; line-height: 1.2; } @media (max-width: 767px) { .terms-figure-01 table.table-02 th.tit span { font-size: 12px; font-size: 0.75rem; } } .terms-figure-01 table.table-02 th.tit span:nth-of-type(1) { right: .5em; top: .2em; text-align: right; } .terms-figure-01 table.table-02 th.tit span:nth-of-type(2) { left: .5em; bottom: .2em; text-align: left; } .terms-figure-01 table.table-02 thead th { padding: 1.5em 1em; } @media (max-width: 1024px) { .terms-figure-01 table.table-02 thead th { padding: 2em 1em; } } @media (max-width: 767px) { .terms-figure-01 table.table-02 thead th { padding: .5em .2em; } } .terms-figure-01 table.table-02 td { padding: 1.5em .5em; } .terms-figure-01 table.table-02 th.wide { letter-spacing: .8em; } @media (max-width: 767px) { .terms-figure-01 table.table-02 th.small { font-size: 11px; font-size: 0.6875rem; letter-spacing: -.12em; } } .terms-figure-01 table.table-02 .col-01 { width: 228px; } @media (max-width: 1024px) { .terms-figure-01 table.table-02 .col-01 { width: 115px; } } @media (max-width: 767px) { .terms-figure-01 table.table-02 .col-01 { width: 105px; } } .terms-figure-01 p { margin-top: 1em; line-height: 1.7333333333; font-weight: 400; } @media (max-width: 1024px) { .terms-figure-01 p { font-size: 13px; font-size: 0.8125rem; } } .terms-figure-01 .att { margin-top: 1em; display: flex; } .terms-figure-01 .att span { line-height: 1.7; width: 3em; font-weight: 400; font-size: 15px; font-size: 0.9375rem; } @media (max-width: 767px) { .terms-figure-01 .att span { font-size: 13px; font-size: 0.8125rem; } } .terms-figure-01 .att p { padding: 0; flex: 1; margin: 0; } /* リスト ----------------------------------------------- */ /*小さい文字の●リスト*/ .com-list-01 li { position: relative; padding-left: 1.5em; line-height: 1.6666666667; font-size: 12px; } .com-list-01 li::before { position: absolute; left: 0; top: 4px; content: '●'; font-size: 6px; } /*各種olリスト*/ .com-list-02 { padding-left: 1em; padding-right: 1em; counter-reset: number; /*ナンバリングをリセット*/ list-style: none; /*自動で数字をつけない*/ /*ナンバリングol　1.　2.　3.*/ /*ナンバリングol　(1)　(2)　(3)*/ /*ナンバリングol　(イ)　(ロ)　(ハ)*/ /*ナンバリングol　(a)(b)(c)*/ /*ナンバリングol　一　二　三*/ } .com-list-02 li { position: relative; /*数字がinsideにならないように*/ padding-left: 2em; /*数字がinsideにならないように*/ } .com-list-02 li:before { counter-increment: number; /*カウンターの名前をつける*/ content: counter(number); /*名前のカウンターの数字をcontentで足す*/ position: absolute; /*数字がinsideにならないように*/ top: 0; /*数字がinsideにならないように*/ left: 0; /*数字がinsideにならないように*/ } .com-list-02 ol { /*ナンバリングolの中のデザイン上のパディングを消す*/ padding-left: 0; padding-right: 0; } .com-list-02.dots > li:before { content: counter(number) "."; } .com-list-02.parenthesis > li:before { content: "(" counter(number) ")"; } .com-list-02.iroha > li { padding-left: 2.5em; } .com-list-02.iroha > li:before { content: "(" counter(number,katakana-iroha) ")"; } .com-list-02.lower-alpha > li { padding-left: 2em; } .com-list-02.lower-alpha > li:before { content: "(" counter(number,lower-alpha) ")"; } .com-list-02.kanji > li { padding-left: 2.5em; } .com-list-02.kanji > li:before { content: counter(number,cjk-ideographic); } /*ドット「・」リスト*/ .com-list-03 li { position: relative; padding-left: 1.5em; } .com-list-03 li::before { position: absolute; left: 0; top: 4px; content: '・'; font-size: 6px; } /* キービジュアル ----------------------------------------------- */ @keyframes line { 0% { height: 0; bottom: 50px; } 50% { height: 50px; bottom: 0; } 100% { height: 0; bottom: 0; } } .kv .inner { position: relative; height: 500px; } @media (max-width: 767px) { .kv .inner { height: 300px; } } .kv .tit { box-sizing: border-box; position: absolute; z-index: 1; left: 50%; width: 100%; padding-right: 16px; padding-left: 16px; text-align: center; color: #fff; font-size: 65px; letter-spacing: .1em; text-shadow: rgba(0, 0, 0, 0.5) 0 0 13px, rgba(0, 0, 0, 0.3) 0 0 13px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; } @media (min-width: 768px) { .kv .tit { top: 50%; transform: translate(-50%, -50%); } } @media (max-width: 767px) { .kv .tit { bottom: 90px; transform: translateX(-50%); font-size: 35px; } } .kv figure { height: 100%; } .kv figure img { z-index: 0; position: absolute; width: 100%; height: 100%; object-fit: cover; max-width: none; font-family: 'object-fit: cover'; } .kv-fullscreen > .inner { position: relative; } .kv-fullscreen .tit-01 { position: absolute; left: 5%; bottom: 70px; font-size: 50px; line-height: 1.2; letter-spacing: .05em; color: #fff; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.9) 0 0 13px, rgba(0, 0, 0, 0.3) 0 0 13px; } @media (max-width: 1300px) { .kv-fullscreen .tit-01 { text-align: center; left: 50%; bottom: 173px; font-size: 37px; transform: translateX(-50%); } } @media (max-width: 1024px) { .kv-fullscreen .tit-01 { font-size: 25px; } } @media (max-width: 959px) { .kv-fullscreen .tit-01 { /*left: 50%;*/ bottom: 77px; /*font-size: 25px; transform: translateX(-50%);*/ } } .kv-fullscreen .tit-01 span { font-size: 70%; } .kv-fullscreen .tit-01 small { display: block; margin-top: 1em; font-size: 14px; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #fff; text-shadow: rgba(0, 0, 0, 0.9) 0 0 7px, rgba(0, 0, 0, 0.3) 0 0 7px, rgba(0, 0, 0, 0.3) 0 0 7px; } @media (max-width: 1300px) { .kv-fullscreen .tit-01 small { text-align: center; } } @media (max-width: 1024px) { .kv-fullscreen .tit-01 small { font-size: 12px; } } .kv-fullscreen .tit-01:after { display: block; margin: 40px auto 0; width: 379px; height: 50px; background: url(../img/common/kv_tit_bg_01.png) no-repeat center; content: ''; } @media (max-width: 1024px) { .kv-fullscreen .tit-01:after { width: 185px; height: 25px; margin-top: 20px; background-size: 185px auto; } } .kv-fullscreen .scroll-btn { position: absolute; bottom: 47px; left: 50%; transform: translateX(-50%); box-sizing: border-box; display: block; padding-bottom: 50px; } .kv-fullscreen .scroll-btn span { display: block; margin-right: auto; margin-left: auto; cursor: pointer; text-align: center; padding: 0 .5em; max-width: 100%; width: 120px; height: 30px; line-height: 30px; font-size: 14px; font-size: 0.875rem; letter-spacing: .1em; color: #fff; background: transparent; outline: none; border: transparent 1px solid; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; transition: .4s; } @media (max-width: 767px) { .kv-fullscreen .scroll-btn span { width: 100%; margin-top: 50px; height: 50px; line-height: 50px; font-size: 12px; font-size: 0.75rem; } } .kv-fullscreen .scroll-btn::after { position: absolute; bottom: 0; left: 50%; width: 1px; height: 50px; background: #6f6f6f; content: ''; transition: .5s ease-in-out; animation: line 2.5s ease infinite; } body:not(.is-touchdevice) .kv-fullscreen .scroll-btn:hover span, .kv-fullscreen .scroll-btn.hover span { border-color: #fff; } body:not(.is-touchdevice) .kv-fullscreen .scroll-btn:hover span::before, .kv-fullscreen .scroll-btn.hover span::before { height: 0; } .kv-fullscreen .scroll-btn.mt-01 { margin-top: 100px; } @media (max-width: 767px) { .kv-fullscreen .scroll-btn.mt-01 { margin-top: 50px; } } .kv-fullscreen .slick-dots { position: relative; margin-top: -26px; display: flex; justify-content: center; } @media (max-width: 959px) { .kv-fullscreen .slick-dots { margin-top: 20px; } } .kv-fullscreen .slick-dots li { width: 50px; height: 2px; margin: 0 5px; border: none; border-radius: none; appearance: none; -webkit-appearance: none; font-size: 0; line-height: 1; outline: none; transition: .4s; } @media (max-width: 767px) { .kv-fullscreen .slick-dots li { width: 25px; height: 1px; margin: 0 3px; } } .kv-fullscreen .slick-dots button { display: none; } .animate-zoom-out { transform: scale(1.2) !important; opacity: 0; transition: opacity 1s, transform 5s; } .animate-zoom-out.inview { transform: scale(1) !important; opacity: 1; } /* 全画面キービジュアルスライダー ----------------------------------------------- */ .kv-slider { height: 100%; } .kv-slider li { display: none; } .kv-slider li:first-of-type { display: block; } .kv-slider.slick-initialized li { display: block; } @media (min-width: 960px) { .kv-slider { min-height: 600px; } } @media (max-width: 959px) { .kv-slider { min-height: 400px; } } .kv-slider .slick-slider, .kv-slider .slick-list { height: 100%; } .kv-slider .slick-track, .kv-slider .slick-slide { height: 100%; } .kv-slider .slick-slide { overflow: hidden; } .kv-slider img { object-fit: cover; width: 100%; height: 100%; transition: 5s; transform: scale(1.2); font-family: 'object-fit: cover'; } .kv-slider .slick-current img { transform: scale(1); } /* トップページ ========================================================= */ /* opening ----------------------------------------------- */ #opening-movie { width: 100%; height: 100vh; position: relative; } body:not(.is-kv-show) #opening-movie { display: none; } #opening-movie .video-wrap { overflow: hidden; position: relative; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } #opening-movie .video-wrap video { position: absolute; top: 50%; left: 50%; display: block; width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */ height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); } #opening-movie .video-wrap video.is-sp { width: 46.20535714285714vh; /* 207：448 の幅→207 ÷ 448＝ 46.20535714285714% */ height: 216.4251207729469vw; /* 207：448の幅 → 448 ÷ 207 = 216.4251207729469% */ } #opening-movie #opening-scroll { position: absolute; left: 0; bottom: 30px; z-index: 0; width: 100%; animation: scroll 1.5s ease 0s infinite; cursor: pointer; } #opening-movie #opening-scroll p { color: #FFF; position: relative; text-align: center; } #opening-movie #opening-scroll p:after { content: ''; display: block; width: 30px; height: 30px; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; transform: rotate(45deg); transform-origin: center center; margin: -15px auto 0; } @keyframes scroll { 0% { bottom: 30px; } 100% { bottom: 20px; } } /* special-notice ----------------------------------------------- */ #special-notice { background-color: #e2d7d5; text-align: center; } #special-notice .notice-block { border-bottom: 1px solid #bcb4b2; } #special-notice .notice-block:last-child { border-bottom: 0; } #special-notice .notice-block a { display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; color: #76664f; font-size: 14px; } @media (max-width: 767px) { #special-notice .notice-block a { font-size: 12px; } } #special-notice .notice-block a p { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #special-notice .notice-block a p:before { content: ''; display: inline-block; vertical-align: text-bottom; width: 21px; height: 21px; background: url("../img/index/notice-icon.png") no-repeat center center/contain; margin-right: 10px; } @media (max-width: 767px) { #special-notice .notice-block a p:before { width: 16px; height: 16px; } } /* ローディング ----------------------------------------------- */ body.is-loading { position: fixed; top: 0; left: 0; right: 0; height: 100vh; overflow: hidden; } /* Safari用のハックは、Chromeに適用されないようにする */ @supports (-webkit-touch-callout: none) { body.is-loading { /* Safari用のハック */ height: -webkit-fill-available; } } .loading { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 99999; top: 0; left: 0; background: linear-gradient(0deg, #e1d5d4, #dbd4cc, #00f2fe, #4facfe); background-size: 600% 600%; -webkit-animation: Gradient 10s ease infinite alternate; -moz-animation: Gradient 10s ease infinite alternate; animation: Gradient 10s ease infinite alternate; } .loading.autumn-winter { background: linear-gradient(0deg, #e1d5d4, #dbccb6, #c9a9df, #cc91a3); background-size: 600% 600%; -webkit-animation: Gradient 10s ease infinite alternate; -moz-animation: Gradient 10s ease infinite alternate; animation: Gradient 10s ease infinite alternate; } /* Safari用のハックは、Chromeに適用されないようにする */ @supports (-webkit-touch-callout: none) { .loading { /* Safari用のハック */ height: -webkit-fill-available; } } .loading-logo { width: 80%; max-width: 312px; opacity: 0; animation: blink 1.5s infinite linear; } @-webkit-keyframes Gradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @-moz-keyframes Gradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @keyframes Gradient { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 50% 0%; } } @keyframes blink { 50% { opacity: 1; } } /* 共通 スライダー ----------------------------------------------- */ .index-slider-01 { overflow: hidden; } /* keyvisual ----------------------------------------------- */ #index-kv { position: relative; background-color: #FFF; } #index-kv .video-wrap { overflow: hidden; /*position: relative; top: 0; left: 0;*/ /*z-index: -1;*/ width: 100%; height: 100%; } #index-kv .video-wrap video { position: absolute; top: 50%; left: 50%; display: block; width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */ height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); } #index-kv .video-wrap video.is-sp { width: 46.20535714285714vh; /* 207：448 の幅→207 ÷ 448＝ 46.20535714285714% */ height: 216.4251207729469vw; /* 207：448の幅 → 448 ÷ 207 = 216.4251207729469% */ } #index-kv .kv-slider, #index-kv .kv-slider * { height: 100%; min-height: 550px; /*@media (max-width: 959px) { height: calc(100vh - 50px); }*/ /*@media (min-width: 960px) { //height: 100vh; min-height: 600px; }*/ /* @media (max-width: 959px) { //height: 100%; min-height: 400px; }*/ } @media (max-width: 959px) and (max-height: 479px) { #index-kv .kv-slider, #index-kv .kv-slider * { min-height: 400px; } } #index-kv > .inner { overflow: hidden; position: relative; min-height: 550px; /* @media (min-width: 960px) { //height: 100vh; min-height: 600px; }*/ /*@media (max-width: 959px) { //height: 100%; min-height: 400px; }*/ } @media (max-width: 959px) and (max-height: 479px) { #index-kv > .inner { min-height: 400px; } } #index-kv .kv-txt { z-index: 100; position: absolute; left: 10%; bottom: 15%; color: #fff; line-height: 3.3333333333; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; text-shadow: #000 0 0 9px,#000 0 0 9px,#000 0 0 9px; max-height: calc(100vh - (138/320*100vh) - 50px); } @media (max-width: 959px) { #index-kv .kv-txt { left: 50%; bottom: 70px; transform: translateX(-50%); font-size: 18px; line-height: 1.8333333333; } } #index-kv .kv-txt .newyear-tit { display: block; margin-left: 20px; } #index-kv .kv-txt .newyear-tit img { max-height: calc(100vh - (138/320*100vh) - 50px); } @media (max-width: 768px) and (min-width: 375px) and (min-height: 768px) { #index-kv .kv-txt.kv-txt-newyear { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } #index-kv .kv-txt.kv-txt-newyear .newyear-tit { margin-left: auto; margin-bottom: 20px; } } #index-kv .on-text { position: absolute; z-index: 100; left: 0; top: 50%; transform: translateY(-50%); width: 100%; padding: 0 3.7634408602%; box-sizing: border-box; } @media (max-width: 959px) { #index-kv .on-text { top: auto; transform: translateY(0); bottom: 130px; } } #index-kv .text-copy { text-align: center; font-size: 80px; line-height: 1; color: #FFF; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; text-shadow: 0 0 5px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 0, 0, 0.25); } @media (max-width: 1366px) { #index-kv .text-copy { font-size: 5.8565153734vw; } } @media (max-width: 767px) { #index-kv .text-copy { font-size: 36px; } } @media (max-width: 428px) { #index-kv .text-copy { font-size: 8.4112149533vw; } } #index-kv .mv-copy { /* 描画位置の指定 */ max-width: 934px; padding-top: 6.4239828694%; position: relative; margin: auto; text-align: center; } #index-kv .mv-copy .draw { /* 描画範囲の指定 */ width: 100%; height: 100%; top: 0; left: 0; position: absolute; /*drawアニメーションの設定*/ fill: none; stroke: #fff; /*マスクは黒を透明 白を描画色で表示される。ストロークはを白、クリップするimgが描画色になる*/ visibility: hidden; } #index-kv .mv-copy .draw path { /* 線の描画太さ*/ stroke-width: 10px; } #index-kv .mv-usp { margin-top: 120px; display: flex; align-items: center; flex: 1; } @media (max-width: 767px) { #index-kv .mv-usp { margin-top: 15vh; } } @media (max-height: 600px) { #index-kv .mv-usp { margin-top: 20px; } } #index-kv .mv-usp * { box-sizing: border-box; } #index-kv .mv-usp .logo { width: 25%; padding-right: 5.376344086%; } #index-kv .mv-usp ul { display: flex; flex-wrap: wrap; flex: 3; width: 75%; } @media (max-width: 959px) { #index-kv .mv-usp ul { width: 100%; } } @media (min-width: 960px) { #index-kv .mv-usp ul li { width: 33.3333%; border-left: 1px solid #FFF; } } @media (max-width: 959px) { #index-kv .mv-usp ul li { width: 100%; } #index-kv .mv-usp ul li + li { margin-top: 30px; } } #index-kv .mv-usp ul a { color: #FFF; display: block; padding: 0 4.0983606557%; } #index-kv .mv-usp ul a h3 { font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; font-size: 65px; color: #FFF; display: inline-block; position: relative; line-height: 1; } #index-kv .mv-usp ul a h3:after { content: ''; display: inline-block; position: absolute; width: 0; height: 3px; background-color: #e7d614; left: 0; bottom: 0; z-index: -1; } #index-kv .mv-usp ul a:hover h3:after { animation: lineAnimetion .5s ease-out forwards; } #index-kv .mv-usp ul a p { font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; font-size: 14px; letter-spacing: .1em; } @media (min-width: 960px) { #index-kv .mv-usp ul a p { margin-top: 30px; } } @media (max-width: 959px) { #index-kv .mv-usp ul a { display: flex; align-items: center; justify-content: center; padding-left: 0; } #index-kv .mv-usp ul a h3, #index-kv .mv-usp ul a p { flex-grow: 0; flex-shrink: 0; } #index-kv .mv-usp ul a h3 { width: 50%; text-align: left; order: 2; padding-left: 10px; border-left: 1px solid #fff; font-size: 30px; } #index-kv .mv-usp ul a p { width: 50%; text-align: right; order: 1; padding-right: 10px; font-size: 10px; line-height: 1.2; } } @media (max-height: 600px) { #index-kv .mv-usp ul a p { line-height: 1; } } @keyframes lineAnimetion { 0% { width: 0; } 100% { width: 100%; } } /* バナー ----------------------------------------------- */ #banner-pc { z-index: 101; position: absolute; left: 30px; bottom: 30px; /*@media (max-width: 959px) { top: auto; bottom: 30px; }*/ width: 120px; } #banner-center { text-align: center; } #banner-center .bn { text-align: center; } @media (max-width: 767px) { #banner-center .bn { max-width: 600px; margin-left: auto; margin-right: auto; } } #banner-center .bn + .bn { margin-top: 40px; } @media (max-width: 767px) { #banner-center .bn + .bn { margin-top: 20px; } } @media (min-width: 768px) { #banner-center .flex { display: flex; justify-content: space-between; } #banner-center .flex .bn { width: calc((100% - 30px)/2); } #banner-center .flex .bn + .bn { margin-top: 0; } } #banner-slider { max-width: 1446px; } @media (max-width: 767px) { #banner-slider { max-width: 600px; margin-left: auto; margin-right: auto; } } #banner-slider .slide_box .box { float: none; display: block; } #banner-slider .slide_box .box .bn_slider { height: auto; /*padding-left: 14px;*/ display: none; } #banner-slider .slide_box .box .bn_slider.slick-initialized { display: block; } #banner-slider .slide_box .box .bn_slider li { margin-right: 0; margin-left: 0; display: flex; height: auto; flex-direction: column; align-items: center; justify-content: center; max-width: 709px; margin-left: 14px; margin-right: 14px; } #banner-slider .slide_box:hover .slick-arrow { opacity: 1; } #banner-slider .slick-arrow { background-image: url("../img/common/slider_arrow_b.png"); opacity: 0; } @media (max-width: 767px) { #banner-slider .slick-arrow { opacity: 1; } } #banner-slider .slick-prev { left: -40px; } @media (max-width: 767px) { #banner-slider .slick-prev { left: -10px; } } #banner-slider .slick-next { right: -40px; } @media (max-width: 767px) { #banner-slider .slick-next { right: -10px; } } /* 動画モーダル ----------------------------------------------- */ .modal-overlay { opacity: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: -999; transition: .5s; } .modal-reservation-close { z-index: 100; position: absolute; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; transition: .4s; background: #e7d614; border-radius: 50%; } @media (max-width: 959px) { .modal-reservation-close { width: 45px; height: 45px; } } .modal-reservation-close::before, .modal-reservation-close::after { position: absolute; top: 50%; left: 50%; width: 30px; height: 2px; background: #000000; margin-left: -15px; content: ''; } .modal-reservation-close::before { transform: rotate(45deg); } .modal-reservation-close::after { transform: rotate(-45deg); } .modal-reservation-close:hover { opacity: .7; } .modal-banner { cursor: pointer; } #modal-movie { overflow: auto; opacity: 0; z-index: -999; position: fixed; transition: .5s; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: calc(100% - 32px); max-width: 1200px; max-height: calc(100vh - 32px); border-radius: 15px; /* @media (max-height: 720px) { top: 16px; bottom: 16px; transform: translateX(-50%); }*/ } #modal-movie .inner { box-sizing: border-box; padding: 30px 30px 0; } @media (max-width: 959px) { #modal-movie .inner { padding: 25px 25px 0; } } body.is-video-open #modal-movie { opacity: 1; z-index: 111; } body.is-video-open #modal-movie #video { width: 100%; background-size: cover; } body.is-video-open .modal-overlay { opacity: 1; z-index: 110; } body.is-sp-tab-ua #modal-movie { width: auto; height: auto; max-height: calc(100vh - 5vh); } body.is-sp-tab-ua.is-yoko #modal-movie { max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); } body.is-sp-tab-ua.is-tate #modal-movie { width: calc(100% - 20px); margin-left: auto; margin-right: auto; top: 50%; bottom: auto; left: 0; right: 0; transform: translateY(-50%); } .block-bg { transition: all .5s; } #index-01 { padding-top: 70px; padding-bottom: 170px; /*goto キャンペーンここから*/ /*goto キャンペーンここまで*/ } @media (max-width: 959px) { #index-01 { padding-top: 50px; padding-bottom: 50px; } } #index-01 .goto { width: 100%; max-width: 1200px; margin: 0 auto 100px; text-align: center; box-sizing: border-box; } #index-01 .goto ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } #index-01 .goto ul li { flex-basis: 48.75%; max-width: 585px; } #index-01 .goto ul li p { font-size: 15px; margin-top: 20px; } @media screen and (max-width: 1024px) { #index-01 .goto { margin-bottom: 50px; } #index-01 .goto ul { display: block; } #index-01 .goto ul li { margin-left: auto; margin-right: auto; } #index-01 .goto ul li:first-child { margin-bottom: 30px; } #index-01 .goto ul li p { margin-top: 10px; } } #index-01 .sp-lead p { margin-top: 30px; } #index-01-video, #index-01-video-sp { width: 100%; } #index-07 { padding-top: 130px; padding-bottom: 30px; } @media screen and (max-width: 959px) { #index-07 { padding-top: 50px; padding-bottom: 50px; } } #index-07 .sp-lead p { margin-top: 30px; } #index-08 { /*.sp_view{ @media screen and (min-width: 960px) { display: none; } @media screen and (max-width: 959px) { display: block; .main_text{ width: 100%; padding: 0; p{ margin-top: 30px; } } } }*/ } @media screen and (max-width: 959px) { #index-08 { padding-top: 50px; padding-bottom: 50px; } } @media screen and (max-width: 959px) { #index-08 .change_pc { display: none; } } @media screen and (min-width: 960px) { #index-08 .change_sp { display: none; } } #index-08 .cuisine, #index-08 .sp_view { display: flex; justify-content: space-between; /*align-items: center;*/ width: 100%; position: relative; /*.slider_cuisine01,.slider_cuisine02{ max-width: 550px; } .slider_cuisine03{ max-width: 314px; } .slider_cuisine01{ margin-right: 40px; } .slick-vertical{ .slick-slide{ border: none; } }*/ } @media screen and (max-width: 1199px) { #index-08 .cuisine, #index-08 .sp_view { justify-content: center; } } @media screen and (max-width: 959px) { #index-08 .cuisine, #index-08 .sp_view { flex-direction: column; /*padding-left: 16px; padding-right: 16px;*/ } } @media screen and (max-width: 959px) { #index-08 .cuisine h2, #index-08 .sp_view h2 { text-align: center; margin-bottom: 50px; } #index-08 .cuisine h2:after, #index-08 .sp_view h2:after { margin-left: auto; margin-right: auto; } } @media screen and (min-width: 960px) { #index-08 .cuisine .main_text, #index-08 .sp_view .main_text { display: flex; flex-direction: column; align-items: center; padding-left: 4.75vw; padding-right: 10.75vw; width: 40.25vw; } } @media screen and (max-width: 959px) { #index-08 .cuisine .main_text.change_pc, #index-08 .sp_view .main_text.change_pc { display: none; } } @media screen and (min-width: 960px) { #index-08 .cuisine .main_text.change_sp, #index-08 .sp_view .main_text.change_sp { display: none; } } #index-08 .cuisine .main_text p, #index-08 .sp_view .main_text p { margin-top: 70px; padding-left: 20px; } @media screen and (max-width: 959px) { #index-08 .cuisine .main_text p, #index-08 .sp_view .main_text p { margin-top: 30px; padding-left: 0; margin-left: 30px; margin-right: 30px; } } @media screen and (min-width: 960px) { #index-08 .cuisine .cuisine_img, #index-08 .sp_view .cuisine_img { width: 15.7vw; height: clamp(400px, 30vw, 600px); } } @media screen and (max-width: 1199px) { #index-08 .cuisine .cuisine_img, #index-08 .sp_view .cuisine_img { display: none; } } #index-08 .cuisine .cuisine_img img, #index-08 .sp_view .cuisine_img img { width: 100%; height: 100%; object-fit: cover; } #index-08 .split-slideshow { position: relative; overflow: hidden; width: 57vw; } @media screen and (min-width: 960px) { #index-08 .split-slideshow { width: 57vw; } } @media screen and (max-width: 959px) { #index-08 .split-slideshow { width: 100%; height: clamp(400px, 30vw, 600px); } } #index-08 .split-slideshow .slideshow { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #index-08 .split-slideshow .slideshow .slider { z-index: 2; } #index-08 .split-slideshow .slideshow .slider * { outline: none; } #index-08 .split-slideshow .slideshow .slider .item { /*height: 600px;*/ height: clamp(400px, 30vw, 600px); position: relative; overflow: hidden; border: none; } #index-08 .split-slideshow .slideshow .slider .item .text { display: none; } #index-08 .split-slideshow .slideshow .slider .item img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #index-08 .split-slideshow .slideshow.slideshow-right { position: absolute; top: 0; left: 0; z-index: 1; width: 50%; pointer-events: none; } #index-08 .split-slideshow .slideshow.slideshow-right .slider { left: 0; position: absolute; width: 100%; } #index-08 .split-slideshow .slideshow.slideshow-right .slider .item { width: 200% !important; } #index-02 { margin-top: 50px; } #index-02 h2 { margin-bottom: 30px; } #index-03 { padding-top: 100px; padding-bottom: 70px; position: relative; } @media (max-width: 959px) { #index-03 { padding-top: 70px; padding-bottom: 50px; } } @media (min-width: 960px) { #index-03 { padding-right: 3.2051282051%; } } #index-03 .com-container-01 { max-width: 1200px; } @media (max-width: 767px) { #index-03-slider { max-width: calc(100% - 32px); } } #index-03-slider .slide-panel { background-color: #FFF; color: #76664f; } @media (min-width: 768px) { #index-03-slider .slide-panel { display: flex; align-items: center; padding: 30px 0; } #index-03-slider .slide-panel > div { width: 50%; } } @media (max-width: 767px) { #index-03-slider .slide-panel { padding: 30px 20px; } } @media (min-width: 768px) { #index-03-slider .slide-panel .col-01 { padding-left: 50px; } #index-03-slider .slide-panel .col-01 h3, #index-03-slider .slide-panel .col-01 p, #index-03-slider .slide-panel .col-01 .btn-more { padding-left: 30px; } } @media (max-width: 767px) { #index-03-slider .slide-panel .col-01 header h3, #index-03-slider .slide-panel .col-01 header p { padding-left: 10px; } #index-03-slider .slide-panel .col-01 figure { margin-bottom: 30px; text-align: center; } } #index-03-slider .slide-panel .col-01 .tit { font-size: 28px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; line-height: 1.2; margin-bottom: 20px; } @media (max-width: 767px) { #index-03-slider .slide-panel .col-01 .tit { font-size: 20px; } } #index-03-slider .slide-panel .col-01 .text { font-size: 16px; line-height: 30/16; } @media (max-width: 767px) { #index-03-slider .slide-panel .col-01 .text { font-size: 13px; } } #index-03-slider .slide-panel .col-01 .btn-more { margin-top: 80px; } @media (max-width: 767px) { #index-03-slider .slide-panel .col-01 .btn-more { margin-top: 20px; } } #index-03-slider .slide-panel .col-01 .btn-more a { display: flex; align-items: center; justify-content: center; max-width: 180px; height: 35px; background-color: #e7d614; color: #76664f; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; font-size: 20px; line-height: 1; border: 2px solid transparent; border-radius: 17.5px 17.5px 17.5px 17.5px; position: relative; overflow: hidden; } @media (max-width: 767px) { #index-03-slider .slide-panel .col-01 .btn-more a { font-size: 16px; margin-left: auto; margin-right: auto; } } #index-03-slider .slide-panel .col-01 .btn-more a:before { content: ""; animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite; background-color: #fff; width: 140%; height: 100%; transform: skewX(-45deg); top: 0; left: -160%; opacity: 0.5; position: absolute; } #index-03-slider .slide-panel header { margin-bottom: 50px; } @media (max-width: 767px) { #index-03-slider .slide-panel header { margin-bottom: 30px; } } #index-03-slider .slide-panel header h3 { border-left: 1px solid #76664f; font-size: 120px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; color: #76664f; line-height: 1; } @media (max-width: 960px) { #index-03-slider .slide-panel header h3 { font-size: 12.5vw; } } #index-03-slider .slide-panel header p { font-size: 16px; font-family: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif; line-height: 18/16; } @media (max-width: 767px) { #index-03-slider .slide-panel header p { font-size: 13px; line-height: 1; } } #index-03-slider .slide-panel .col-02 { text-align: center; } @media (min-width: 768px) { #index-03-slider .slide-panel .col-02 { padding: 0 30px; } } @media (max-width: 767px) { #index-03-slider .slide-panel .col-02 { display: none; } } #index-03-slider .slide-panel .col-02 figure { border-radius: 15px; overflow: hidden; } #index-03-slider .slick-slide:not(.slick-loading) img { display: inline-block; } /* 光の動き */ @keyframes shine { 0% { left: -160%; opacity: 0; } 70% { left: -160%; opacity: 0.5; } 71% { left: -160%; opacity: 1; } 100% { left: -20%; opacity: 0; } } #index-06 { padding-top: 135px; max-width: 1499px; margin-right: auto; margin-left: auto; } @media (max-width: 767px) { #index-06 { max-width: 600px; margin-left: auto; margin-right: auto; } } #index-06 header { margin-bottom: 40px; } #index-06 header h2 { margin-bottom: 10px; } #index-06 header p { text-align: center; color: #76664f; font-size: 18px; } #index-06 .plan_slide_box .box { float: none; display: block; } #index-06 .plan_slide_box .box .plan_slider { height: auto; } #index-06 .plan_slide_box .box .plan_slider .slick-list { /*padding-left: 62.5px;*/ } #index-06 .plan_slide_box .box .plan_slider .slick-list li { margin-right: 0; margin-left: 0; display: flex; height: auto; flex-direction: column; align-items: center; justify-content: center; max-width: 670px; margin-right: 39.75px; margin-left: 39.75px; position: relative; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 80%; background-color: #bab3a7; padding: 15px 40px 20px 25px; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text h4 { color: #fff; font-size: 20px; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text p { color: #fff; font-size: 22px; line-height: 1.4; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text:after { content: ""; display: block; width: 19px; height: 10px; background: url(../img/common/arrow_plan.png) no-repeat center; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); right: 15px; } @media (max-width: 959px) { #index-06 .plan_slide_box .box .plan_slider .slick-list li { margin-right: 20px; margin-left: 20px; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text { width: 70%; padding: 10px 35px 15px 20px; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text h4 { font-size: 16px; } #index-06 .plan_slide_box .box .plan_slider .slick-list li .plan_text p { font-size: 14px; } } @media (max-width: 767px) { #index-06 .plan_slide_box .box .plan_slider .slick-list li { margin-right: 15px; margin-left: 15px; } } #index-06 .slide_box { padding-top: 65px; max-width: 1446px; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { #index-06 .slide_box { max-width: 600px; margin-left: auto; margin-right: auto; } } #index-06 .slide_box .box { float: none; display: block; } #index-06 .slide_box .box .bn_slider { height: auto; /*padding-left: 14px;*/ } #index-06 .slide_box .box .bn_slider li { margin-right: 0; margin-left: 0; display: flex; height: auto; flex-direction: column; align-items: center; justify-content: center; max-width: 709px; margin-left: 14px; margin-right: 14px; } #index-06 .slide_box:hover .slick-arrow { opacity: 1; } #index-06 .slick-arrow { background-image: url("../img/common/slider_arrow_b.png"); opacity: 0; } @media (max-width: 767px) { #index-06 .slick-arrow { opacity: 1; } } #index-06 .slick-prev { left: -40px; } @media (max-width: 767px) { #index-06 .slick-prev { left: 0; } } #index-06 .slick-next { right: -40px; } @media (max-width: 767px) { #index-06 .slick-next { right: 0; } } #index-04 { padding: 250px 0 170px; } @media (max-width: 959px) { #index-04 { padding: 50px 0; } } #index-04 header { margin-bottom: 40px; } #index-04 header h2 { margin-bottom: 15px; } #index-04 header p { text-align: center; color: #76664f; font-size: 18px; font-family: "Baskerville", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", "Noto Serif JP", serif; } #index-04 * { box-sizing: border-box; } #index-04 h2 { margin-bottom: 30px; } #index-04 ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } @media (min-width: 768px) { #index-04 ul + ul { margin-top: 3px; } } @media (min-width: 768px) { #index-04 ul li { width: calc((100% - 6px)/3); margin-bottom: 3px; margin-left: 3px; } #index-04 ul li:nth-child(3n+1) { margin-left: 0; } #index-04 ul li:nth-last-child(-n+3) { margin-bottom: 0; } } @media (max-width: 767px) { #index-04 ul li { width: 100%; } } #index-04 ul li a { position: relative; display: block; } #index-04 ul li a figure { padding-top: 49.6240601504%; position: relative; } #index-04 ul li a figure img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; font-family: "object-fit: cover;"; } #index-04 ul .txt { height: 70px; padding: 0 25px; display: flex; align-items: center; } @media (max-width: 767px) { #index-04 ul .txt { height: 40px; } } #index-04 ul .txt p { width: 100%; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #index-04 #instafeed { /*p{ font-size: 16px; color: $color-02; position: relative; padding-left: 45px; @media (max-width: 767px){ font-size: 13px; padding-left: 30px; } &:before{ content: ''; display: block; background: url("../img/index/ico_instagram_feed.png") no-repeat center center / contain; width: 24px; height: 24px; position: absolute; top: 50%; margin-top: -13px; left: 0; @media (max-width: 767px){ width: 20px; height: 20px; margin-top: -10px; } } }*/ } #index-04 #instafeed li { /*&:nth-child(1) .txt{ background-color: #e8e5e2; } &:nth-child(2) .txt{ background-color: #bab3a7; } &:nth-child(3) .txt{ background-color: #d2cbbb; }*/ position: relative; } #index-04 #instafeed li:hover p { opacity: 1; } @media (min-width: 768px) { #index-04 #instafeed li { width: calc((100% - 45px)/4); margin-bottom: 20px; margin-left: 15px; /*&:nth-last-child(-n+4){ margin-bottom: 0; }*/ } #index-04 #instafeed li:nth-child(4n+1) { margin-left: 0; } } @media (max-width: 767px) { #index-04 #instafeed li { width: 50%; } } #index-04 #instafeed li a { position: relative; display: block; } #index-04 #instafeed li a figure { padding-top: 120.3007518797%; position: relative; } #index-04 #instafeed li a figure img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; font-family: "object-fit: cover;"; } #index-04 #instafeed li a p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: #FFF; opacity: 0; transition: .5s; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; } #index-04 #instafeed li a p span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } #index-04 #instafeed li a p:before { content: ''; display: block; background: url("../img/index/ico_instagram_feed.png") no-repeat center center/contain; width: 24px; height: 24px; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } @media (max-width: 767px) { #index-04 #instafeed li a p:before { width: 20px; height: 20px; margin-top: -10px; } } #index-04 #blogfeed { border-bottom: 50px solid #dbd4cc; } #index-04 #blogfeed li:nth-child(1) .txt { background-color: #bab3a7; } #index-04 #blogfeed li:nth-child(2) .txt { background-color: #e8e5e2; } #index-04 #blogfeed li:nth-child(3) .txt { background-color: #bfa28f; } #index-04 #blogfeed p { font-size: 16px; color: #76664f; } @media (max-width: 767px) { #index-04 #blogfeed p { font-size: 13px; } } #index-04 #activity li:nth-child(1) .txt { background-color: #bab3a7; } #index-04 #activity li:nth-child(2) .txt { background-color: #bfa28f; } #index-04 #activity li:nth-child(3) .txt { background-color: #e8e5e2; } #index-04 #activity p { color: #000; font-size: 20px; } @media (max-width: 767px) { #index-04 #activity p { font-size: 16px; } } #index-05 { padding-top: 100px; } @media (max-width: 767px) { #index-05 { padding-top: 45px; padding-bottom: 100px; } } #index-05 * { box-sizing: border-box; } #index-05 .flex { display: flex; } @media (max-width: 767px) { #index-05 .flex { flex-direction: column; } #index-05 .flex > div { width: 100%; } } @media (min-width: 768px) { #index-05 .col-01 { width: 62.7%; } } @media (max-width: 767px) { #index-05 .col-01 { order: 2; margin-top: 30px; } } #index-05 .col-02 { text-align: center; } @media (min-width: 768px) { #index-05 .col-02 { width: 37.3%; padding: 0 9.3833780161%; display: flex; flex-direction: column; justify-content: center; align-items: center; } } @media (max-width: 767px) { #index-05 .col-02 { order: 1; padding: 0 16px; } } #index-05 h2 { margin-bottom: 100px; } @media (max-width: 960px) { #index-05 h2 { margin-bottom: 50px; } } @media (max-width: 767px) { #index-05 h2 { margin-bottom: 30px; } } .iframe-wrap { position: relative; padding-top: 68.8995215311%; filter: sepia(30%); width: 100%; } .iframe-wrap iframe { position: absolute; top: 0; left: 0; filter: grayscale(100%); width: 100%; height: 100%; } /* /トップページ ========================================================= */ /* プライバシーポリシー ========================================================= */ .com-texts-01 { counter-reset: number; } .com-texts-01 section + section { margin-top: 30px; } @media (max-width: 767px) { .com-texts-01 section + section { margin-top: 20px; } } .com-texts-01 section h4 { margin-bottom: 1em; } .com-texts-01 section p { text-indent: 1em; } .com-texts-01 section p, .com-texts-01 section ol, .com-texts-01 section ul, .com-texts-01 section dl { margin-top: 1em; } .com-texts-01 section p:first-child, .com-texts-01 section ol:first-child, .com-texts-01 section ul:first-child, .com-texts-01 section dl:first-child { margin-top: 0; } .com-texts-01 .count h4 { position: relative; padding-left: 2em; border-left: 3px solid #76664f; border-bottom: 1px solid #76664f; } .com-texts-01 .count h4:before { counter-increment: number; content: counter(number); position: absolute; top: 0; left: .5em; } /* /プライバシーポリシー ========================================================= */ /* 250611 mv画像位置調整 ----------------------------------------------- */ .img-right { object-position: right center; object-fit: cover; } /*# sourceMappingURL=style.css.map */ /* ========================================= Offers (プラン一覧) のスタイル修正 ========================================= */ /* スライダー全体の調整 */ .plan_slider { width: 100%; margin: 0 auto; } /* 各スライド（画像の枠） */ .plan_slider li { position: relative; /* 文字を上に重ねるために必須 */ margin: 0 10px; /* スライド間の隙間 */ overflow: hidden; /* 角丸などがはみ出ないように */ } /* 画像自体の調整 */ .plan_slider img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; /* ホバー時の動き */ } /* テキスト部分（画像の上に重ねる帯） */ .plan_text { position: absolute; /* 画像の上に配置 */ bottom: 0; /* 下揃え */ left: 0; width: 100%; background-color: rgba(180, 168, 153, 0.9); /* 薄い茶色の背景（透過） */ color: #fff; /* 白文字 */ padding: 15px 20px; box-sizing: border-box; z-index: 2; } /* テキスト内の見出し */ .plan_text h4 { font-size: 14px; margin: 0 0 5px 0; font-weight: normal; opacity: 0.9; font-family: 'Cormorant', serif; /* サイトのフォントに合わせる */ } /* テキスト内の本文 */ .plan_text p { font-size: 16px; margin: 0; line-height: 1.4; } /* 矢印（→）のような装飾があればここに追加 */ .plan_text::after { content: "→"; /* 簡易的な矢印 */ position: absolute; right: 20px; bottom: 50%; transform: translateY(50%); font-size: 18px; color: #fff; } /* 横スクロール禁止の修正 */ html, body { overflow-x: hidden; width: 100%; } /* ---------------------------------------------------------- 右下予約バー（#right-reservation）修正版 v2 ---------------------------------------------------------- */ /* 1. バー全体の枠組み */ #right-reservation { position: fixed; bottom: 0px; right: 0; width: 100%; max-width: 960px; height: 100px; background-color: #f2f0eb; z-index: 9999; box-shadow: 0 0 15px rgba(0,0,0,0.1); } /* 2. 中身を横並びにする */ .right-reservation-inputs { display: flex; align-items: center; height: 100%; width: 100%; } /* 3. 左側のテキスト部分（Check Availability等） */ .right-reservation-inputs .text { width: 30%; /* 幅を少し広げる */ padding-left: 20px; display: flex; flex-direction: column; justify-content: center; /* 上下中央寄せ */ line-height: 1; } /* 「Check Availability」の文字調整（JSで制御されるh3） */ .right-reservation-inputs .text h3 { padding: 0; line-height: 1 !important; color: #594a38; } /* 「公式サイトが最安値」の位置調整 */ .right-reservation-inputs .text h4 { margin: 0 !important; padding: 0 !important; font-weight: bold; color: #594a38; line-height: 1 !important; position: relative; top: -2px; /* 微調整で少し上に上げる */ } /* 4. 中央の入力エリア（Check In, N of Night） */ .right-reservation-inputs .col-01 { width: 30%; /* 日付用に幅を確保 */ border-left: 1px solid #dcdcdc; padding-left: 15px; padding-right: 5px; /* 右側にも余白 */ display: flex; flex-direction: column; justify-content: center; overflow: hidden; /* はみ出し防止 */ } .right-reservation-inputs .col-02 { width: 20%; border-left: 1px solid #dcdcdc; padding-left: 10px; display: flex; flex-direction: column; justify-content: center; } /* 右端のボタンエリア */ .right-reservation-inputs .col-03 { width: 20%; height: 100%; } /* 5. 定義リストのリセット */ #right-reservation dl, #right-reservation dt, #right-reservation dd { margin: 0 !important; padding: 0 !important; list-style: none; } /* ラベル（Check Inなど） */ #right-reservation dt { font-family: "Cormorant", serif; font-size: 13px; color: #8c8172; margin-bottom: 3px !important; line-height: 1; } /* 6. 日付入力欄の文字サイズ調整（ここが重要） */ #right-reservation input[type="text"].checkin_date { background: transparent !important; border: none !important; width: 100% !important; font-family: "Cormorant", serif; font-size: 24px !important; /* 30pxだと切れるので24pxに縮小 */ color: #594a38 !important; line-height: 1.2 !important; height: auto !important; padding: 0 !important; letter-spacing: -0.5px; /* 文字間を少し詰める */ } /* 泊数カウンターなど他のinput */ #right-reservation input.nights-counter { background: transparent !important; border: none !important; font-family: "Cormorant", serif; font-size: 24px !important; color: #594a38 !important; width: 40px !important; text-align: center; padding: 0 !important; } /* 7. 泊数の＋－ボタン */ .right-reservation-night dd { display: flex; align-items: center; } .btnspinner { background: none; border: none; font-size: 18px; color: #8c8172; cursor: pointer; padding: 0 8px; width: auto !important; } /* 8. 検索ボタン */ .right-reservation-button { width: 100%; height: 100%; background-color: #dedc36; border: none; cursor: pointer; font-family: "Cormorant", serif; font-size: 22px; color: #594a38; } /* ---------------------------------------------------------- 英語トップページの余白・崩れ修正 ---------------------------------------------------------- */ /* 英語ページ(en)の場合も余白をゼロにする */ body.page-template-default, body.page { margin: 0 !important; padding: 0 !important; } /* コンテンツ幅の強制修正 */ #content, #main { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden; /* 横スクロール防止 */ }