@charset "utf-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; height: auto; vertical-align: bottom; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* base */ :root { --root-font-size: 16; } :root { --spacing: 0.05em; } * { letter-spacing: var(--spacing); } body { background: #FFF; color: #FFF; font-family: "Arial", noto-sans-cjk-jp, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: calc( 16 / var(--root-font-size) * 1rem ); font-style: normal; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } html,body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overscroll-behavior-y: none; } body { animation-name: fadeIn; animation-duration: 2s; } a {color: #FFF; text-decoration: none;} a:hover {color: #C9C9C9; text-decoration: none;} a:hover img { filter: alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } a, a:hover, a img, a:hover img { transition: 0.5s 0s ease-in-out; } .clear {clear: both;} .clearfix:after { content: ""; display: block; clear: both; } ::selection { background: #AAA5A1; color: #FFF; } ::-moz-selection { background: #AAA5A1; color: #FFF; } /* layout */ #wrap { width: 100%; background: url("../images/mainBg.png") no-repeat center top; background-size: cover; margin: 0 auto; } .pc { display: inherit!important; } .sp { display: none!important; } @media screen and (max-width: 767px) { .pc { display: none!important; } .sp { display: inherit!important; } } /*----- header -----*/ header { width: 100%; } header div.block { display: flex; justify-content: space-between; width: 100%; padding: 35px 4%; } header div.blockL, header div.blockR { width: calc(50% - 54px - 25px); } header nav ul { display: flex; flex-wrap: wrap; } header nav ul li { letter-spacing: 0.1em; line-height: 25px; padding: 0 2em 0 0; } header .logo { width: 108px; margin: 0 auto; } header div.blockR { display: flex; justify-content: flex-end; margin-top: -10px; } a.reservationBtn { display: inline-block; width: 240px; height: 45px; background: rgba(255, 255, 255, 0.8); border-radius: 22.5px; color: #000; font-size: calc( 14 / var(--root-font-size) * 1rem ); letter-spacing: 0.1em; line-height: 45px; text-align: center; text-indent: 0.1em; } a.reservationBtn:hover { filter: alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } .headerNavFixed { position: fixed; z-index: 999; width: 100%; height: calc(54px + 40px); text-align: center; padding: 20px 0; transition: 1s 0s ease-in-out; } #jsHeader { top: -94px; opacity: 0; } #jsHeader.isShow { top: 0; opacity: 1; } .footerNavFixed { position: fixed; z-index: 999; width: 100%; height: calc(45px + 30px); text-align: center; padding: 15px 0; transition: 1s 0s ease-in-out; } #jsFooter { bottom: -75px; opacity: 0; } #jsFooter.isShow { bottom: 0; opacity: 1; } @media screen and (max-width: 767px) { } /*----- main -----*/ main { display: block; /* IE */ } /*----- news -----*/ main#news { } main#news div.block { display: flex; justify-content: space-between; width: 80%; max-width: 1200px; padding: 25px 0 150px; margin: 0 auto; } main#news div.block div.blockL { width: 30%; padding: 75px 0; } main#news div.block div.blockR { width: 70%; } main#news .mainTtl { letter-spacing: 0.1em; line-height: 2; padding: 0 0 50px; } main#news aside nav ul li { font-size: calc( 12 / var(--root-font-size) * 1rem ); letter-spacing: 0.1em; line-height: 1.5; padding: 0.5em 0; } main#news article { border-bottom: #FFF solid 1px; padding: 75px 15% 75px 0; } main#news article .thumbnail { margin: 0 0 50px; } main#news article .thumbnail img { width: 100%; height: auto; } #news .ttlWrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } main#news article .ttlWrap { margin: 0 0 50px; } #news .ttlWrap .ttl { line-height: 2; } section#news ul li .ttlWrap .ttl { width: calc(100% - 200px); font-size: calc( 15 / var(--root-font-size) * 1rem ); } main#news article .ttlWrap .ttl { padding: 0 30px 0 0; } #news .ttlWrap .information { display: flex; } section#news ul li .ttlWrap .information { width: 200px; } #news .ttlWrap .information p.date, #news .ttlWrap .information ul.category li { font-size: calc( 11 / var(--root-font-size) * 1rem ); letter-spacing: 0.1em; line-height: 2; } #news .ttlWrap .information p.date { color: #C9C9C9; } #news .ttlWrap .information ul.category { display: flex; } #news .ttlWrap .information ul.category li { padding: 0 0 0 30px; } main#news article div.content p { font-size: calc( 14 / var(--root-font-size) * 1rem ); line-height: 2; margin: 0 0 2em; } main#news article div.content p a { text-decoration: underline; } main#news article div.content p a:hover { text-decoration: none; } main#news article div.content figure { margin: 0 0 2em!important; } main#news article div.content figure.size-medium { width: 62.5%; } main#news article div.content img { width: 100%; height: auto; } @media screen and (max-width: 767px) { main#news div.block { display: flex; flex-wrap: wrap; justify-content: space-between; width: 80%; max-width: 1200px; padding: 0 0 75px; margin: 0 auto; } main#news div.block div.blockL { width: 100%; padding: 25px 0; } main#news div.block div.blockR { width: 100%; } main#news .mainTtl { letter-spacing: 0.1em; line-height: 2; padding: 0 0 25px; } main#news aside nav ul li { font-size: calc( 10 / var(--root-font-size) * 1rem ); letter-spacing: 0.1em; line-height: 1.5; padding: 0.5em 0; } main#news article { border-bottom: #FFF solid 1px; padding: 50px 0; } main#news article .thumbnail { margin: 0 0 25px; } main#news article .thumbnail img { width: 100%; height: auto; } #news .ttlWrap { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; } main#news article .ttlWrap { margin: 0 0 25px; } #news .ttlWrap .ttl { width: 100%; line-height: 2; } section#news ul li .ttlWrap .ttl { width: calc(100% - 105px); font-size: calc( 7 / var(--root-font-size) * 1rem ); } main#news article .ttlWrap .ttl { padding: 0 30px 0 0; } #news .ttlWrap .information { display: flex; width: 100%; } section#news ul li .ttlWrap .information { width: 105px; } #news .ttlWrap .information p.date, #news .ttlWrap .information ul.category li { font-size: calc( 10 / var(--root-font-size) * 1rem ); letter-spacing: 0.1em; line-height: 2; } section#news ul li .ttlWrap .information p.date, section#news ul li .ttlWrap .information ul.category li { font-size: calc( 7 / var(--root-font-size) * 1rem ); } #news .ttlWrap .information p.date { color: #C9C9C9; } #news .ttlWrap .information ul.category { display: flex; } #news .ttlWrap .information ul.category li { padding: 0 0 0 10px; } main#news article div.content p { font-size: calc( 10 / var(--root-font-size) * 1rem ); line-height: 2; margin: 0 0 2em; } main#news article div.content p a { text-decoration: underline; } main#news article div.content p a:hover { text-decoration: none; } main#news article div.content figure { margin: 0 0 2em!important; } main#news article div.content figure.size-medium { width: 62.5%; } main#news article div.content img { width: 100%; height: auto; } } /*----- footer -----*/ footer { position: relative; width: 100%; font-size: calc( 14 / var(--root-font-size) * 1rem ); padding: 75px 5%; } footer::after { content: ""; position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100%; background: rgba(111, 76, 94, 0.2); mix-blend-mode: multiply; } footer div.inner { position: relative; z-index: 1; } footer div.block { padding: 0 0 35px; } footer div.block p { line-height: 1.75; text-align: center; text-indent: 0.05em; } footer div.block p.ttl { padding: 0 0 1em; } footer div.block table { line-height: 1.75; } footer div.block table th { padding: 0 1em 0 0; } footer div.block table td { padding: 0 0 0 1em; } footer div.block table td span { font-size: calc( 12 / var(--root-font-size) * 1rem ); } footer div.block p.address span { font-size: calc( 9 / var(--root-font-size) * 1rem ); } footer .center { display: flex; justify-content: center; } footer .copyright { text-align: center; } footer .copyright small { font-size: calc( 9 / var(--root-font-size) * 1rem ); text-indent: 0.05em; } @media screen and (max-width: 767px) { footer { position: relative; width: 100%; font-size: calc( 14 / var(--root-font-size) * 1rem ); padding: 75px 5%; } footer::after { content: ""; position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100%; background: rgba(111, 76, 94, 0.2); mix-blend-mode: multiply; } footer div.inner { position: relative; z-index: 1; } footer div.block { padding: 0 0 35px; } footer div.block p { font-size: calc( 10 / var(--root-font-size) * 1rem ); line-height: 1.75; text-align: center; text-indent: 0.05em; } footer div.block p.ttl { padding: 0 0 1em; } footer div.block table { font-size: calc( 10 / var(--root-font-size) * 1rem ); line-height: 1.75; } footer div.block table th { padding: 0 1em 0 0; } footer div.block table td { padding: 0 0 0 1em; } footer div.block table td span { font-size: calc( 8 / var(--root-font-size) * 1rem ); } footer div.block p.address span { font-size: calc( 8 / var(--root-font-size) * 1rem ); } footer .center { display: flex; justify-content: center; } footer .copyright { text-align: center; } footer .copyright small { font-size: calc( 8 / var(--root-font-size) * 1rem ); text-indent: 0.05em; } } .grecaptcha-badge {visibility: hidden;} /* stalker */ .stalker { pointer-events: none; position: fixed; z-index: 10001; top: -30px; left: -30px; width: 60px; height: 60px; border: #F2EFE7 solid 1px; border-radius: 50%; opacity: 0; mix-blend-mode: multiply; transition: all 0.25s 0s cubic-bezier(0.25, 0.75, 0.25, 1); } /* リンクにホバーした時のスタイル */ .stalker.js-hover { top: -45px; left: -45px; width: 90px; height: 90px; } /* fadeUp */ .fadeUp, .content img { opacity: 0; transition: 1.5s 0s linear; } .fadeUp.isInView, .content img.isInView { opacity: 1; } .fadeUp.blur, .content img { -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); } .fadeUp.blur.isInView, .content img.isInView { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } @media screen and (max-width: 767px) { .fadeUp, .content img { opacity: 0; transition: 1s 0s linear; } } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }