@charset "utf-8";
/*
共通
*/
:root {
--color-white: #fff;
--color-brown: 79, 73, 65;
--color-beige: 134, 125, 89;
--color-orange: 185, 143, 69;
--color-gold: 190, 175, 133;
--header-height: 0;
--margin-top: 0px;
--margin-bottom: 0px;
--leading-trim: ((1em - 1lh) / 2);
}
@supports not (top: 1lh) {
:root {
--leading-trim: 0px;
}
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
body {
-webkit-text-size-adjust: 100%;
margin: auto;
/* padding-top: var(--header-height); */
color: #333;
font-size: 16px;
letter-spacing: 0;
line-height: 1;
}
abbr, address, article, aside, audio, b, blockquote, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
h1, h2, h3, h4, h5, h6, th { font-weight: normal; margin: 0; }
em { font-style: normal; }
sub { vertical-align: sub; bottom: 0; }
sup { vertical-align: super; top: 0; }
img { width: 100%; max-width: 100%; height: auto; vertical-align: bottom; backface-visibility: hidden; }
svg { width: 100%; max-width: 100%; height: auto; vertical-align: bottom; fill: currentColor; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
li { list-style: none; }
button { border: none; border-radius: 0; background: none; outline: none; -webkit-appearance: initial; appearance: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
.sp-bl, .sp-il, .tablet-bl { display: none !important; }
.tablet .tablet-bl { display: block !important; }
.opa { transition: 0.3s ease-in-out; }
.w100 { width: 100% !important; }
.none { display: none !important }
.visuallyhidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.tj { text-align: justify; }
.cf:before,.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.fl { float: left; }
.fr { float: right; }
.outer {
position: relative;
max-width: 1920px;
margin-inline: auto;
}
.inner {
position: relative;
width: 95%;
max-width: 1500px;
margin-inline: auto;
}
/* フォント */
.wf-zenoldmincho-n4-active {
font-family: "Zen Old Mincho", serif;
font-weight: 400;
}
.wf-amiri-n4-active .amiri {
font-family: "Amiri", serif;
font-weight: 400;
line-height: .5;
}
.bold, b {
font-weight: bold;
}
.medium {
font-weight: 500;
}
/* カラー */
.white { color: var(--color-white); }
.brown { color: rgba(var(--color-brown), 1); }
.beige { color: rgba(var(--color-beige), 1); }
.orange { color: rgba(var(--color-orange), 1); }
/* トラッキング */
.ls0 { letter-spacing: 0; }
.ls50 { letter-spacing: .05em; }
.ls100 { letter-spacing: .1em; }
.ls150 { letter-spacing: .15em; }
.ls200 { letter-spacing: .2em; }
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.grid {
display: grid;
}
.flex.column { flex-direction: column; }
.flex.nowrap { flex-wrap: nowrap; }
.flex.reverse { flex-direction: row-reverse; }
.flex.jc-s { justify-content: flex-start; }
.flex.jc-e { justify-content: flex-end; }
.flex.ai-e { align-items: flex-end; }
.flex.ai-st { align-items: stretch; }
.grid.jc-s { justify-content: start; }
.grid.jc-e { justify-content: end; }
.grid.ai-s { align-items: start; }
.grid.ai-e { align-items: end; }
.grid.ai-st { align-items: stretch; }
.jc-c { justify-content: center; }
.ai-c { align-items: center; }
.fit-right { margin-right: calc(50% - var(--window-half-width)); }
.fit-left { margin-left: calc(50% - var(--window-half-width)); }
@media (hover: hover){
.opa:hover { opacity: 0.7 !important; }
}
@media screen and (max-width: 480px){
.pc { display: none !important; }
.sp-bl { display: block !important; }
.sp-il { display: inline !important; }
.inner { width: calc(320 / 375 * 100%); max-width: 560px; }
}
/*
ヘッダー
*/
.header__content {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
/* background: #fff; */
}
.header__content__group {
flex: 0 1 clamp(160px, calc(260 / 1680 * 100vw), 260px);
box-sizing: border-box;
/* padding: 10px 20px; */
padding-left: 30px;
}
.header__content__group2 {
flex: 1;
}
.header__content__contact {
flex: 0 0 auto;
box-sizing: border-box;
padding-inline: 20px;
}
.header__content__contact-link {
gap: 7px;
}
.header__content__contact-tel {
color: rgba(var(--color-brown), .9);
font-size: clamp(26px, calc(46 / 1680 * 100vw), 46px);
letter-spacing: -.04em;
}
.header__content__contact-tel span {
font-family: "Zen Old Mincho", serif;
font-size: 70%;
vertical-align: .2em;
}
.header__content__contact-tel::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: calc(53 / 46 * 1em);
height: calc(28 / 46 * 1em);
margin-right: calc(2 / 46 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.header__content__contact-time {
font-size: clamp(10px, calc(12 / 1680 * 100vw), 12px);
line-height: 1.5;
margin-block: calc((1.5 - 1) / 2 * -1em);
}
.header__content__cv {
flex: 0 1 clamp(125px, calc(225 / 1680 * 100vw), 225px);
height: 80px;
}
.header__content__menutrigger {
flex: 0 0 80px;
height: 80px;
background: url('data:image/svg+xml;utf8,') no-repeat center/calc(34 / 80 * 100%) auto rgba(51, 51, 51, .2);
touch-action: manipulation;
}
.header__global {
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
z-index: 1001;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100lvh;
background: rgba(65, 59, 50, .9);
}
.header__global[aria-hidden="true"] {
transition: opacity .4s;
opacity: 0;
pointer-events: none;
}
.header__global[aria-hidden="false"] {
transition: opacity .4s;
opacity: 1;
pointer-events: auto;
}
.header__global__container {
position: relative;
max-height: 100%;
overflow-y: auto;
overscroll-behavior-y: none;
}
.header__global__content {
padding-block: 100px;
}
.header__global__list {
gap: 30px 0;
}
.header__global__list-item {
flex: 0 0 auto;
color: rgba(194, 190, 172, 1);
font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
line-height: calc(24 / 20);
}
.header__global__list-item + .header__global__list-item {
border-left: 1px solid rgba(194, 190, 172, .5);
}
.header__global__list-item-link {
height: 100%;
padding-inline: calc(60 / 20 * 1em);
}
.header__global__sub-list {
margin-top: 60px;
gap: 30px 50px;
}
.header__global__sub-list-item-link {
color: rgba(194, 190, 172, 1);
font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
line-height: calc(22 / 20);
white-space: nowrap;
}
.header__global__sub-list-item-link--overview::before {
content: "";
display: inline-block;
vertical-align: -.15em;
width: calc(27 / 20 * 1em);
height: calc(22 / 20 * 1em);
margin-right: calc(10 / 20 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.header__global__sub-list-item-link--price::before {
content: "";
display: inline-block;
vertical-align: -.2em;
width: calc(23 / 20 * 1em);
height: calc(23 / 20 * 1em);
margin-right: calc(11 / 20 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.header__global__cv-wrap {
margin-top: 60px;
gap: 30px 40px;
}
.header__global__cv {
flex: 0 1 clamp(220px, calc(320 / 1200 * 100vw), 320px);
height: 70px;
}
.header__global__cv.btn a {
font-size: clamp(13px, calc(23 / 1200 * 100vw), 23px);
}
.header__global__close {
position: fixed;
z-index: 1002;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: url('data:image/svg+xml;utf8,') no-repeat center/calc(25 / 80 * 100%) auto #413B32;
}
.header__cv {
position: fixed;
z-index: 1000;
top: 50%;
right: 0;
translate: 0 -50%;
width: 80px;
flex-direction: column;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s linear, visibility .3s linear;
}
.header__cv--active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.header__cv__item {
width: 100%;
height: 230px;
}
.header__cv__item.btn a {
font-size: 26px;
writing-mode: vertical-rl;
text-orientation: upright;
}
.header__cv__item--request.btn-request a::before {
width: 30px;
height: 36px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
.header__cv__item--request.btn-request a::after {
content: none;
}
.header__cv__item--reserve.btn-reserve a::before {
width: 30px;
height: 22px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
@media (any-hover: hover){
.header__content__menutrigger {
filter: invert(0);
transition: filter .6s;
}
.header__content__menutrigger:hover {
filter: invert(1);
}
}
@media screen and (max-width: 1200px){
.header__content__group {
flex: 0 1 182px;
/* padding: 10px 20px 8px; */
padding-left: 20px;
}
.header__content__logo {
margin-bottom: 7px;
}
/* .header__content__group2 {
flex: 1 0 100%;
} */
.header__content__contact {
display: none;
}
.header__content__cv {
flex: 1;
height: 60px;
}
.header__content__cv.btn a {
font-size: 18px;
}
.header__content__menutrigger {
flex: 0 0 60px;
height: 60px;
}
.header__global {
height: 100vh;
/* height: calc(100dvh - var(--header-height) + 60px); */
top: 0;
bottom: auto;
}
.header__global__content {
padding-block: 110px;
}
.header__global__list {
width: calc(300 / 380 * 100%);
gap: 0;
}
.header__global__list-item {
flex: 1 0 100%;
font-size: 18px;
}
.header__global__list-item + .header__global__list-item {
border-left: none;
border-top: 1px solid rgba(194, 190, 172, .5);
}
.header__global__list-item-link {
padding: 10px;
box-sizing: border-box;
min-height: 70px;
align-items: flex-start;
text-align: left !important;
}
.header__global__sub-list {
margin-top: 25px;
gap: 20px;
width: calc(280 / 380 * 100%);
justify-content: space-between;
}
.header__global__sub-list-item {
flex: 1;
}
.header__global__sub-list-item-link {
font-size: 18px;
line-height: calc(22 / 18);
display: block;
}
.header__global__cv-wrap {
margin-top: 50px;
gap: 20px 0;
width: calc(300 / 380 * 100%);
}
.header__global__cv {
flex: 1 0 100%;
}
.header__global__cv.btn a {
font-size: 20px;
}
.header__global__close {
top: calc(var(--header-height) - 60px);
width: 60px;
height: 60px;
}
}
@media screen and (max-width: 480px), screen and (max-height: 700px){
.header__cv {
top: auto;
bottom: 0;
translate: 0 0;
width: 100%;
flex-direction: row;
}
.header__cv__item {
width: auto;
height: 60px;
flex: 1;
}
.header__cv__item.btn a {
font-size: 18px;
writing-mode: initial;
text-orientation: initial;
}
.header__cv__item--request.btn-request a::before {
width: calc(30 / 26 * 1em);
height: calc(36 / 26 * 1em);
margin-left: 0;
margin-right: calc(18 / 26 * 1em);
margin-bottom: 0;
}
.header__cv__item--reserve.btn-reserve a::before {
width: calc(30 / 26 * 1em);
height: calc(22 / 26 * 1em);
margin-left: 0;
margin-right: calc(16 / 26 * 1em);
margin-bottom: 0;
}
}
/*
メイン
*/
.main {
overflow-x: clip;
}
/* キャプション */
.photo, .figure {
position: relative;
}
.p-caption, .f-caption {
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
font-size: 12px;
line-height: 1;
text-align: right;
padding: 6px 9px;
text-shadow: 0 0 4px #000;
}
.p-caption.w, .f-caption.w {
color: #fff;
background: rgba(0, 0, 0, .8);
text-shadow: none;
}
.p-caption.b, .f-caption.b {
color: #333;
background: rgba(255, 255, 255, .8);
text-shadow: none;
}
.p-caption.l, .f-caption.l {
left: 0;
right: auto;
text-align: left;
}
.p-caption.t, .f-caption.t {
top: 0;
bottom: auto;
}
.p-caption.r, .f-caption.r {
position: relative;
padding: 0;
text-shadow: none;
margin-top: 10px;
}
@media screen and (max-width: 480px){
.p-caption,.f-caption{
font-size: 10px;
}
}
/* 見出し・本文・注釈 */
.heading {
font-size: clamp(22px, calc(32 / 1200 * 100vw), 32px);
line-height: 1.8125;
margin-block: calc(var(--margin-top) + var(--leading-trim)) calc(var(--margin-bottom) + var(--leading-trim));
}
.subheading {
font-size: clamp(18px, calc(28 / 1200 * 100vw), 28px);
line-height: 1.785714286;
margin-block: calc(var(--margin-top) + var(--leading-trim)) calc(var(--margin-bottom) + var(--leading-trim));
}
.bodycopy {
font-size: clamp(12px, calc(16 / 1200 * 100vw), 16px);
line-height: 2.125;
margin-block: calc(var(--margin-top) + var(--leading-trim)) calc(var(--margin-bottom) + var(--leading-trim));
}
.large-bodycopy {
font-size: clamp(14px, calc(18 / 1200 * 100vw), 18px);
line-height: 2.222222222;
margin-block: calc(var(--margin-top) + var(--leading-trim)) calc(var(--margin-bottom) + var(--leading-trim));
}
.caution {
color: #666;
font-size: clamp(10px, calc(12 / 1200 * 100vw), 12px);
line-height: 2.833333333;
margin-block: calc(var(--margin-top) + var(--leading-trim)) calc(var(--margin-bottom) + var(--leading-trim));
}
.caution-item {
box-sizing: border-box;
padding-left: 1em;
text-indent: -1em;
}
@media screen and (max-width: 480px){
.heading {
font-size: 20px;
line-height: 1.9;
}
.subheading {
font-size: 20px;
line-height: 1.9;
}
.bodycopy {
font-size: 16px;
line-height: 2;
}
.large-bodycopy {
font-size: 16px;
line-height: 2.375;
}
.caution {
font-size: 12px;
line-height: 2;
}
}
/* ページ下部注釈 */
.common-cap {
padding-block: 100px;
}
.common-cap__list {
max-width: 1400px;
}
.common-cap__item {
color: #666;
font-size: 12px;
letter-spacing: .05em;
line-height: 2.333333333;
word-break: break-all;
text-indent: -1em;
box-sizing: border-box;
padding-left: 1em;
}
@media screen and (max-width: 480px){
.common-cap {
padding-block: 50px;
}
.common-cap__item {
line-height: 2;
}
}
/* ボタン */
.btn a,
.btn button {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
width: 100%;
height: 100%;
color: #fff;
background-color: #615B54;
font-size: clamp(16px, calc(22 / 1200 * 100vw), 22px);
letter-spacing: .1em;
line-height: 1.4;
text-align: center;
overflow: hidden;
position: relative;
}
.btn a::before,
.btn button::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: calc(37 / 22 * 1em);
width: calc(9 / 22 * 1em);
height: 100%;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.btn-request a {
background-color: rgba(var(--color-beige), 1);
font-size: clamp(16px, calc(26 / 1680 * 100vw), 26px);
font-weight: 500;
letter-spacing: .2em;
overflow: visible;
}
.btn-request a::before {
position: relative;
left: 0;
width: calc(30 / 26 * 1em);
height: calc(36 / 26 * 1em);
margin-right: calc(18 / 26 * 1em);
background: #E7E5DE;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.btn-request a::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: calc(100 / 26 * 1em);
padding-top: calc(90 / 26 * 1em);
margin-top: calc(30 / 26 * -1em);
margin-left: calc(30 / 26 * -1em);
background: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.btn-reserve a {
background-color: rgba(var(--color-orange), 1);
font-size: clamp(16px, calc(26 / 1680 * 100vw), 26px);
font-weight: 500;
letter-spacing: .2em;
}
.btn-reserve a::before {
position: relative;
left: 0;
width: calc(30 / 26 * 1em);
height: calc(22 / 26 * 1em);
margin-right: calc(16 / 26 * 1em);
background: #F1E9DA;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
/* @media (hover: hover){
} */
@media screen and (max-width: 480px){
.btn a,
.btn button {
font-size: 18px;
}
.btn:not(.btn-request):not(.btn-reserve) a::before,
.btn button::before {
left: calc(20 / 18 * 1em);
width: calc(7 / 18 * 1em);
}
.btn-request a {
font-size: 20px;
}
.btn-request a::after {
width: 50px;
padding-top: 48px;
margin-top: -10px;
margin-left: -10px;
}
.btn-reserve a {
font-size: 20px;
}
}
/* タブ */
.tab {
padding: 0;
border: none;
font: inherit;
color: inherit;
background: none;
appearance: none;
cursor: pointer;
}
.tabpanel[aria-hidden="true"] {
visibility: hidden;
}
/* スライド */
.swiper-button-prev {
left: 0;
}
.swiper-button-next {
right: 0;
transform: rotate(180deg);
}
.swiper-button-next:after,
.swiper-button-prev:after {
content: none;
}
/* モーダル */
.modal {
display: none;
}
.modal.active {
display: block;
}
.modal-overlay {
position: fixed;
z-index: 10000;
top: 0;
left: 0;
width: 100%;
height: calc(100vh + 1px);
height: calc(100dvh + 1px);
display: grid;
grid-template: ". container ." auto / 2.5% minmax(0, 1fr) 2.5%;
place-items: center;
background: rgba(0, 0, 0, .8);
overflow-y: scroll;
overscroll-behavior-y: contain;
}
.modal[aria-hidden="true"] .modal-overlay {
animation: closeModal .3s ease-out;
}
.modal[aria-hidden="false"] .modal-overlay {
animation: openModal .3s ease-out;
}
@keyframes openModal{
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes closeModal{
0% { opacity: 1; }
100% { opacity: 0; }
}
.modal-container {
grid-area: container;
position: relative;
z-index: 1;
max-width: 1200px;
margin-block: 70px;
background: #fff;
}
.modal-close {
position: -webkit-sticky;
position: sticky;
z-index: 2;
top: 0;
left: calc(100% - 70px);
display: block;
width: 70px;
height: 70px;
margin-bottom: -70px;
color: #fff;
background: linear-gradient(45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) no-repeat center/20px auto, linear-gradient(-45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) no-repeat center/20px auto #666;
cursor: pointer;
}
.modal-content {
position: relative;
z-index: 1;
}
.modal-open,
.modal-content-close {
cursor: pointer;
}
@media screen and (max-width: 480px){
.modal-overlay {
grid-template-columns: calc(27.5 / 375 * 100%) minmax(0, 1fr) calc(27.5 / 375 * 100%);
}
.modal-close {
width: 50px;
height: 50px;
margin-bottom: -50px;
}
}
/* スワイプ可能アイコン */
.scroll-hint-icon {
all: initial;
position: absolute;
z-index: 1;
inset: 0;
background: url(../img/common/icon_swipe.svg) no-repeat center/144px auto rgba(79, 73, 65, .8);
opacity: 0;
transition: opacity .3s;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
opacity: 1;
}
.scroll-hint-icon:before,
.scroll-hint-icon:after,
.scroll-hint-text {
display: none;
}
/* 下層ページKV */
.kv {
position: relative;
z-index: 2;
background: rgba(var(--color-brown), 1);
}
.kv__content {
position: relative;
z-index: 1;
height: 100svh;
opacity: 0;
}
.kv__content__photo {
position: absolute;
z-index: 1;
inset: 0;
overflow: hidden;
}
.kv__content__photo img {
height: 100%;
object-fit: cover;
}
.kv__content__desc {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 180px;
}
.kv__content__desc__heading {
height: clamp(48px, calc(68 / 1200 * 100vw), 68px);
}
.kv__content__desc__heading img {
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 1)) drop-shadow(0 0 20px rgba(0, 0, 0, .1)) invert(0);
}
.kv__content__desc__subheading {
font-size: clamp(22px, calc(32 / 1200 * 100vw), 32px);
line-height: 1.625;
margin-block: calc((60 / 32 * 1em) + var(--leading-trim)) calc(var(--leading-trim));
text-shadow: 0 0 6px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, .1);
}
.kv__content__scroll {
position: absolute;
z-index: 3;
bottom: 0;
left: 50%;
translate: -50% 50%;
width: 1px;
height: 160px;
font-size: 0;
background: linear-gradient(0deg, rgba(var(--color-beige), .3), rgba(var(--color-beige), .3)) no-repeat center/100% 100% #fff;
}
.kv__content__scroll::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
translate: -50% -50%;
width: 12px;
height: 12px;
clip-path: polygon(25% 25%, 50% 0%, 75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0% 50%);
background: rgba(var(--color-beige), 1);
animation: kvScroll 3s linear infinite;
}
@keyframes kvScroll{
0% {
top: 0;
opacity: 0;
}
25% {
top: 25%;
opacity: 1;
}
50% {
top: 50%;
opacity: 1;
}
75% {
top: 75%;
opacity: 1;
}
100% {
top: 100%;
opacity: 0;
}
}
@media screen and (max-width: 480px) {
.kv__content {
height: 360px;
}
.kv__content__desc {
padding-bottom: 70px;
}
.kv__content__desc__heading {
height: 29px;
}
.kv__content__desc__heading img {
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)) drop-shadow(0 0 10px rgba(0, 0, 0, .1)) invert(0);
}
.kv__content__desc__subheading {
font-size: 16px;
line-height: 2;
margin-block: calc(20px + var(--leading-trim)) calc(var(--leading-trim));
text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, .1);
}
.kv__content__scroll {
height: 80px;
}
.kv__content__scroll::before {
width: 10px;
height: 10px;
}
}
/*
フッター
*/
.footer__contact {
padding-block: 130px 150px;
}
.footer__contact__copy {
font-size: clamp(28px, calc(40 / 1500 * 100vw), 40px);
line-height: 1.75;
letter-spacing: .1em;
margin-bottom: 100px;
}
.footer__contact__content {
max-width: 1350px;
}
.footer__contact__content__photo {
width: calc(523 / 1350 * 100%);
}
.footer__contact__content__desc {
width: calc(800 / 1350 * 100%);
}
.footer__contact__content__desc__heading {
font-size: clamp(14px, calc(20 / 1500 * 100vw), 20px);
line-height: 1.888888889;
text-wrap: balance;
}
.footer__contact__content__desc__link {
display: block;
width: fit-content;
margin-inline: auto;
margin-top: 20px;
}
.footer__contact__content__desc__link__tel {
color: rgba(var(--color-brown), .9);
font-size: clamp(50px, calc(80 / 1500 * 100vw), 80px);
letter-spacing: -.04em;
}
.footer__contact__content__desc__link__tel span {
font-family: "Zen Old Mincho", serif;
font-size: 70%;
vertical-align: .2em;
}
.footer__contact__content__desc__link__tel::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: calc(88 / 80 * 1em);
height: calc(46 / 80 * 1em);
margin-right: calc(3 / 80 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.footer__contact__content__desc__caution {
font-size: clamp(11px, calc(14 / 1500 * 100vw), 14px);
margin-top: 30px;
}
.footer__contact__content__desc__cv-wrap {
margin-top: 70px;
gap: 30px;
}
.footer__contact__content__desc__cv {
flex: 0 1 clamp(220px, calc(320 / 1500 * 100vw), 320px);
height: 60px;
}
.footer__contact__content__desc__cv a {
font-size: clamp(14px, calc(20 / 1500 * 100vw), 20px);
}
.footer__contact__line {
max-width: 1100px;
margin-top: 150px;
}
.footer__brand__content {
position: relative;
z-index: 1;
padding-block: 160px;
}
.footer__brand__content__photo {
position: absolute;
z-index: -1;
inset: 0;
}
.footer__brand__content__photo img {
height: 100%;
object-fit: cover;
}
.footer__brand__content__heading {
max-width: calc(194 / 18 * 1em);
padding-block: 15px;
font-size: clamp(14px, calc(18 / 1200 * 100vw), 18px);
text-shadow: 0 0 1px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .75), 0 0 10px rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .5);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) no-repeat top center/100% 1px, linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%) no-repeat bottom center/100% 1px;
}
.footer__brand__content__logo {
max-width: 270px;
margin-top: 75px;
}
.footer__brand__content__copy {
font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
line-height: 2;
text-shadow: 0 0 1px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .75), 0 0 10px rgba(0, 0, 0, .5), 0 0 10px rgba(0, 0, 0, .5);
margin-top: calc(65px - ((2 - 1) / 2 * 1em));
margin-bottom: calc((2 - 1) / 2 * -1em);
}
.footer__brand__content__btn {
max-width: 440px;
height: 70px;
margin-top: 45px;
background: #fff;
}
.footer__content {
padding-block: 100px;
color: #DCDBD9;
background: rgba(var(--color-brown), 1);
}
.footer__content__container {
max-width: 1400px;
grid-template: "logo . info . nav" auto / minmax(0, clamp(98px, calc(198 / 1680 * 100vw), 198px)) minmax(0, clamp(30px, calc(64 / 1680 * 100vw), 64px)) minmax(0, 1fr) minmax(0, 30px) minmax(0, 470px);
}
.footer__content__logo {
grid-area: logo;
color: #A49373;
}
.footer__content__info {
grid-area: info;
}
.footer__content__name {
font-size: clamp(14px, calc(18 / 1680 * 100vw), 18px);
}
.footer__content__data {
margin-top: 25px;
}
.footer__content__data-item {
font-size: clamp(12px, calc(16 / 1680 * 100vw), 16px);
line-height: 1.5;
margin-block: calc((1.5 - 1) / 2 * -1em);
}
.footer__content__data-item + .footer__content__data-item {
margin-top: calc(1em - ((1.5 - 1) / 2 * 1em));
}
.footer__content__data-item dt {
width: 6em;
margin-right: .1em;
text-indent: -.5em;
white-space: nowrap;
}
.footer__content__data-item dd {
flex: 1;
}
.footer__content__contact {
margin-top: 40px;
}
.footer__content__contact-name {
font-size: clamp(12px, calc(16 / 1680 * 100vw), 16px);
text-indent: -.5em;
}
.footer__content__contact-link {
width: fit-content;
margin-top: 20px;
gap: 12px;
}
.footer__content__contact-tel {
font-size: clamp(28px, calc(48 / 1680 * 100vw), 48px);
letter-spacing: -.04em;
}
.footer__content__contact-tel span {
font-family: "Zen Old Mincho", serif;
font-size: 70%;
vertical-align: .2em;
}
.footer__content__contact-tel::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: calc(53 / 48 * 1em);
height: calc(28 / 48 * 1em);
margin-right: calc(2 / 48 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.footer__content__contact-caution {
font-size: clamp(10px, calc(12 / 1680 * 100vw), 12px);
line-height: 1.5;
margin-block: calc((1.5 - 1) / 2 * -1em);
}
.footer__content__contact-time {
font-size: clamp(11px, calc(14 / 1680 * 100vw), 14px);
margin-top: 20px;
}
.footer__content__nav {
grid-area: nav;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr;
align-items: start;
height: 100%;
}
.footer__content__nav-list {
/* grid-auto-flow: column; */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: calc(24 / 16 * 1em) 30px;
color: #C2BEAC;
font-size: clamp(12px, calc(16 / 1680 * 100vw), 16px);
padding-bottom: 30px;
border-bottom: 1px solid #726D67;
margin-bottom: 30px;
}
.footer__content__nav-list-item-link {
position: relative;
display: block;
box-sizing: border-box;
padding-left: calc(18 / 16 * 1em);
}
.footer__content__nav-list-item-link::before {
content: "";
position: absolute;
z-index: 1;
top: calc(6 / 16 * 1em);
left: 0;
width: calc(5 / 16 * 1em);
height: calc(5 / 16 * 1em);
border-radius: 100%;
background: currentColor;
}
.footer__content__nav-sub-list {
margin-top: 30px;
border-top: 1px solid #726D67;
padding-top: 30px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(24 / 16 * 1em) 20px;
color: #C2BEAC;
font-size: clamp(12px, calc(16 / 1680 * 100vw), 16px);
}
.footer__content__nav-sub-list-item-link {
position: relative;
display: block;
box-sizing: border-box;
}
.footer__content__nav-sub-list-item-link--overview {
padding-left: calc(32 / 16 * 1em);
}
.footer__content__nav-sub-list-item-link--overview::before {
content: "";
position: absolute;
z-index: 1;
top: calc(1 / 16 * -1em);
left: 0;
width: calc(21.6 / 16 * 1em);
height: calc(17.6 / 16 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.footer__content__nav-sub-list-item-link--price {
padding-left: calc(32 / 16 * 1em);
}
.footer__content__nav-sub-list-item-link--price::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: calc(4 / 16 * 1em);
width: calc(18.4 / 16 * 1em);
height: calc(18.4 / 16 * 1em);
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
mask: url('data:image/svg+xml;utf8,') no-repeat center/100% auto;
}
.footer__content__nav-cv-wrap {
/* margin-top: 45px; */
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 30px;
align-self: end;
}
.footer__content__nav-cv {
height: 60px;
}
.footer__content__nav-cv.btn a {
font-size: clamp(14px, calc(20 / 1680 * 100vw), 20px);
}
.footer__content__nav-cv.btn-request a::after {
width: calc(62 / 20 * 1em);
padding-top: calc(60 / 20 * 1em);
margin-top: calc(30 / 20 * -1em);
margin-left: calc(30 / 20 * -1em);
}
.footer__corporate {
min-height: 100px;
box-sizing: border-box;
padding-block: 20px;
}
.footer__corporate__container {
gap: 20px;
}
.footer__corporate__logo {
flex: 0 0 auto;
}
.footer__corporate__copyright {
flex: 0 0 auto;
font-size: clamp(10px, calc(12 / 1680 * 100vw), 12px);
}
.footer__corporate__copyright br {
display: none;
}
@media screen and (max-width: 1200px){
.footer__content {
padding-top: 90px;
padding-bottom: 80px;
}
.footer__content__container {
grid-template: "logo" auto "." 65px "info" auto "." 65px "nav" auto / minmax(0, 560px);
justify-content: center;
}
.footer__content__logo {
max-width: 198px;
margin-inline: auto;
}
.footer__content__name {
font-size: 18px;
}
.footer__content__data {
margin-top: 30px;
}
.footer__content__data-item {
font-size: 16px;
}
.footer__content__data-item + .footer__content__data-item {
margin-top: calc(30px - ((1.5 - 1) / 2 * 1em));
}
.footer__content__data-item dt {
margin-right: 1.25em;
}
.footer__content__contact {
margin-top: 30px;
}
.footer__content__contact-name {
font-size: 16px;
}
.footer__content__contact-link.flex.nowrap {
margin-top: 20px;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
margin-inline: auto;
}
.footer__content__contact-tel {
font-size: 48px;
}
.footer__content__contact-caution {
font-size: 12px;
line-height: 1.833333333;
margin-block: 0;
}
.footer__content__contact-caution br {
display: none;
}
.footer__content__contact-time {
font-size: 12px;
line-height: 1.833333333;
margin-top: 5px;
text-align: center;
}
.footer__content__nav-list {
grid-auto-flow: row;
grid-template-rows: auto !important;
grid-template-columns: 100%;
gap: 30px 0;
font-size: 16px;
/* width: fit-content;
margin-inline: auto; */
padding-bottom: 0;
border-bottom: none;
margin-bottom: 45px;
}
.footer__content__nav-sub-list {
margin-top: 20px;
padding-top: 20px;
grid-template-columns: 100%;
gap: 15px 0;
font-size: 16px;
max-width: 220px;
margin-inline: auto;
}
.footer__content__nav-cv-wrap {
grid-template-columns: 100%;
gap: 20px 0;
}
.footer__content__nav-cv {
height: 70px;
}
.footer__content__nav-cv.btn a {
font-size: 21px;
}
.footer__content__nav-cv.btn-request a::after {
width: 50px;
padding-top: 48px;
margin-top: -10px;
margin-left: -10px;
}
/* .footer__corporate {
padding-block: 40px;
} */
.footer__corporate__container {
gap: 30px;
justify-content: center;
}
.footer__corporate__logo {
flex: 0 1 max(25%, 284px);
}
.footer__corporate__copyright {
flex: 1 0 100%;
font-size: 10px;
line-height: 1.8;
margin-block: calc((1.8 - 1) / 2 * -1em);
}
.footer__corporate__copyright br {
display: block;
}
}
@media screen and (max-width: 1100px){
.footer__contact__content__photo {
width: min(100%, 562px);
margin: 0 auto 50px;
}
.footer__contact__content__desc {
width: min(100%, 800px);
margin-inline: auto;
}
}
@media screen and (max-width: 480px){
.footer__contact {
padding-block: 80px;
}
.footer__contact__copy {
font-size: 18px;
line-height: 1.888888888888889;
margin-bottom: 40px;
}
.footer__contact__content {
display: block;
max-width: 560px;
}
.footer__contact__content__photo {
width: calc(300 / 320 * 100%);
margin: 0 auto 40px;
}
.footer__contact__content__desc {
width: min(100%,800px);
}
.footer__contact__content__desc__heading {
font-size: 18px;
line-height: 1.888888889;
margin-block: calc((1.888888889 - 1) / 2 * -1em);
}
.footer__contact__content__desc__link__tel {
font-size: 48px;
}
.footer__contact__content__desc__caution {
font-size: 12px;
line-height: 1.833333333;
margin-top: calc(20px - ((1.833333333 - 1) / 2 * 1em));
margin-bottom: calc((1.833333333 - 1) / 2 * -1em);
}
.footer__contact__content__desc__cv-wrap {
margin-top: 30px;
gap: 20px 0;
}
.footer__contact__content__desc__cv {
flex: 1 0 100%;
}
.footer__contact__content__desc__cv a {
font-size: 18px;
}
.footer__contact__content__desc__cv.btn-request a::before {
width: calc(30 / 26 * 1.3em);
height: calc(36 / 26 * 1.3em);
margin-right: calc(18 / 26 * 1.3em);
}
.footer__contact__content__desc__cv.btn-reserve a::before {
width: calc(30 / 26 * 1.3em);
height: calc(22 / 26 * 1.3em);
margin-right: calc(16 / 26 * 1.3em);
}
.footer__contact__line {
max-width: 560px;
margin-top: 60px;
}
.footer__brand__content {
padding-top: 40px;
padding-bottom: 60px;
}
.footer__brand__content__heading {
font-size: 18px;
}
.footer__brand__content__logo {
max-width: 190px;
margin-top: 45px;
}
.footer__brand__content__copy {
font-size: 16px;
margin-top: calc(35px - ((2 - 1) / 2 * 1em));
}
.footer__brand__content__btn {
height: 60px;
margin-top: 30px;
}
}
@media screen and (max-width: 480px), screen and (max-height: 700px){
.footer__corporate {
padding-block: 40px 100px;
}
}
/*
フェードインアニメーション
*/
.fi-u, .fi-d, .fi, .fi-r, .fi-l { visibility: hidden; }
.ti { transform: scale(0.925); }
.ti-u { transform: translate3d(0, 20%, 0) scale(0.975); }
.ti-r { transform: translate3d(10%, 0, 0) scale(0.975); }
.ti-l { transform: translate3d(-10%, 0, 0) scale(0.975); }
.si { overflow: hidden; }
.si img { scale: 1.1; }
/* fade in */
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
.fi.faded { animation-name: fadeIn; animation-fill-mode: both; animation-duration: 1s; visibility: visible !important; opacity: 0; }
/* fade in up */
@keyframes fadeInUp{ from{ opacity: 0; transform: translate3d(0, 20px, 0); } to{ opacity: 1; transform: none; } }
.fi-u.faded { animation-name: fadeInUp; animation-fill-mode: both; animation-duration: 1.5s; visibility: visible !important; opacity: 0; }
/* fade in down */
@keyframes fadeInDown{ from{ opacity: 0; transform: translate3d(0, -20px, 0); } to{ opacity: 1; transform: none; } }
.fi-d.faded { animation-name: fadeInDown; animation-fill-mode: both; animation-duration: 1.5s; visibility: visible !important; opacity: 0; }
/* fade in right */
@keyframes fadeInRight{ from{ opacity: 0; transform: translate(30px,0); } to{ opacity: 1; transform: none; } }
.fi-r.faded { animation-name: fadeInRight; animation-fill-mode: both; animation-duration: 1.5s; visibility: visible !important; opacity: 0; }
/* fade in left */
@keyframes fadeInLeft{ from{ opacity: 0; transform: translate(-30px,0); } to{ opacity: 1; transform: none; } }
.fi-l.faded { animation-name: fadeInLeft; animation-fill-mode: both; animation-duration: 1.5s; visibility: visible !important; opacity: 0; }
/* transform in */
@keyframes translateIn{ from{ transform: scale(0.925); } to{ transform: scale(1); } }
.ti.faded { animation-name: translateIn; animation-fill-mode: both; animation-duration: 1.5s; }
/* transform in up */
@keyframes translateInUp{ from{ transform: translate3d(0, 20%, 0) scale(0.975); } to{ transform: translate3d(0, 0, 0) scale(1); } }
.ti-u.faded { animation-name: translateInUp; animation-fill-mode: both; animation-duration: 1s; }
/* transform in right */
@keyframes translateInRight{ from{ transform: translate3d(10%, 0, 0) scale(0.975); } to{ transform: translate3d(0, 0, 0) scale(1); } }
.ti-r.faded { animation-name: translateInRight; animation-fill-mode: both; animation-duration: 1s; }
/* transform in left */
@keyframes translateInLeft{ from{ transform: translate3d(-10%, 0, 0) scale(0.975); } to{ transform: translate3d(0, 0, 0) scale(1); } }
.ti-l.faded { animation-name: translateInLeft; animation-fill-mode: both; animation-duration: 1s; }
/* scale in */
@keyframes scaleIn{ from{ scale: 1.1; } to{ scale: 1; } }
.si.faded img { animation-name: scaleIn; animation-fill-mode: both; animation-duration: 1.5s; animation-timing-function: ease-out; }
/* アニメーション */
.flash {
position: relative;
overflow: hidden;
}
.flash::before {
content: "";
position: absolute;
z-index: 1;
top: -100%;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(130deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 70%);
animation: flash 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes flash{
0% { top: -100%; left: -100%; }
60% { top: -100%; left: -100%; }
100% { top: 0%; left: 100%; }
}
/*
印刷用
*/
@media print{
body, html {
zoom: .8 !important;
}
h1,
.header,
.footer {
display: none;
}
body {
padding-top: 0;
}
}