��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #F8E0D8; --color-main2: #85473D; --color-main3: #d5d2c6; --color-main4: #D1E2E2; --color-main5: #588787; --color-dark: #433D2F; --color-light: #FFFFFF; --color-link: #C74B21; --color-prince: #8E8248; --gradient-gold: linear-gradient(90deg, rgba(210, 192, 114, 1), rgba(240, 234, 208, 1) 50%, rgba(210, 192, 114, 1)); --gradient-white: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6) 98%, rgba(255, 255, 255, 0)); /* root��pe�fonts */ --font-main: "Shippori Mincho", serif; --font-gothic: "Local Noto Sans JP", "Noto Sans JP", sans-serif; --font-en: "Dancing Script", cursive; --length-XL: clamp(60px, 38.873px + 5.634vw, 120px); --length-L: clamp(50px, 32.394px + 4.695vw, 100px); --length-M: clamp(40px, 25.915px + 3.756vw, 80px); --length-S: clamp(30px, 19.437px + 2.817vw, 60px); --length-XS: clamp(20px, 12.958px + 1.878vw, 40px); --length-XXS: clamp(10px, 6.479px + 0.939vw, 20px); --fs-SS: clamp(1.2rem, 1.059rem + 0.601vw, 1.6rem); --fs-S: clamp(1.4rem, 1.259rem + 0.601vw, 1.8rem); --fs-M: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); --fs-L: clamp(1.8rem, 1.518rem + 1.202vw, 2.6rem); --fs-LL: clamp(2rem, 1.648rem + 1.502vw, 3rem); } /*qQ��� }*/ body { font-family: var(--font-main); font-weight: 500; font-style: normal; line-height: inherit; color: var(--color-dark); font-size: var(--fs-M); background: var(--color-light); } /*Loading S0S0K0�0*/ /* Loading Block */ #loading { width: 100vw; height: 100vh; transition: all 1s; background-color: var(--color-dark); position: fixed; top: 0; left: 0; z-index: 999999; display: grid; place-content: center; place-items: center; } /* Hide Loading Block */ .loaded { opacity: 0; visibility: hidden; } /* loading anime �0�0�0o0loaderg0*/ .loader { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#85473D 0 0); background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; animation: l1 1s infinite linear; } @keyframes l1 { 0% {background-size: 20% 100%,20% 100%,20% 100%} 33% {background-size: 20% 10% ,20% 100%,20% 100%} 50% {background-size: 20% 100%,20% 10% ,20% 100%} 66% {background-size: 20% 100%,20% 100%,20% 10% } 100%{background-size: 20% 100%,20% 100%,20% 100%} } /*Loading S0S0~0g0*/ #container { margin-inline: auto; } .fc-key1 { color: var(--color-main2); } .fc-key2 { color: var(--color-main5); } .fc-hanten { color: var(--color-light); } .fc-hanten2 { color: var(--color-dark); } .ff-en { font-family: var(--font-en); } a { color: var(--color-link); text-decoration: none; transition: .5s; } a:hover { color: var(--color-link); text-decoration: underline; /* opacity: .7; */ } .notes { text-align: justify; font-family: var(--font-gothic); width: 100%; padding: 0; margin: 0 auto; } @media (min-width:834px) { .notes { box-sizing: initial; /*paddingR�0RgS*/ margin: 30px auto 0 auto; max-width: 700px; } } ul.notes li { font-size: var(--fs-SS); font-weight: 400; margin: 0.5em auto 0 auto; margin-left: 1em; text-indent: -1em; line-height: 1.6; text-align: justify; } #page-top img { position: fixed; width: 25px; bottom: calc(40px + env(safe-area-inset-bottom)); right: 10px; z-index: 99999; transition: .3s; } @media (min-width:834px) { #page-top img { width: 30px; /* bottom: calc(0px + env(safe-area-inset-bottom)); */ right: 20px; } } #page-top a img:hover { transform: scale(1.05); } /*secqQ�-------------------------------------*/ .sec-container { margin: 0 auto; max-width: 1000px; padding: 0; text-align: center; position: relative; } @media (min-width:834px) { .sec-container { padding: 0; } } .ttl-category { font-family: var(--font-en); font-size: clamp(5rem, 8vw, 9rem); text-transform: capitalize; text-shadow: 2px 2px rgba(133, 71, 61, .6); color: var(--color-light); -webkit-text-stroke: 4px var(--color-dark); text-stroke: 1px var(--color-dark); paint-order: stroke; } /* sec-kv-------------------------------------*/ #sec-kv { background: var(--color-main1); height: 100svh; } #sec-kv h2 { writing-mode: vertical-rl; text-align: left; font-size: clamp(2.4rem, 1.977rem + 1.803vw, 3.6rem); font-weight: 600; position: absolute; top: 1em; left: calc(100vw / 16); line-height: 1.2; z-index: 5; } #sec-kv h2 span { display: inline-flex; background: var(--color-light); padding: .3em .1em .2em 0; margin: .2em; letter-spacing: .3rem; } #sec-kv .sec-container { position: relative; height: 100svh; } .kv-frame { position: relative; height: 100svh; overflow: hidden; margin: 0 calc(50% - 50vw); } .kv-01, .kv-02, .kv-03, .kv-04 { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0; will-change: opacity, transform; } .kv-01, .kv-02, .kv-03,.kv-04 { animation: slide-animation 24s linear infinite 0s; } .kv-01 { background-image: url('../img/img_kv1.webp'); } .kv-02 { background-image: url('../img/img_kv2.webp'); animation-delay: 6s; } .kv-03 { background-image: url('../img/img_kv3.webp'); animation-delay: 12s; } .kv-04 { background-image: url('../img/img_kv4.webp'); animation-delay: 18s; } @keyframes slide-animation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 20% { opacity: 1; transform: scale(1.1); } 40%, 100% { opacity: 0; transform: scale(1.2); } } /* sec-intro-------------------------------------*/ #sec-intro { background: var(--color-main1); background-image: url("../img/bg_grunge.webp"); background-blend-mode: color-burn; background-repeat: repeat; } #sec-intro .sec-container { padding: var(--length-XL) var(--length-XXS); } .ttl-intro { display: grid; grid-template-columns: clamp(60px, 38.873px + 5.634vw, 120px) 1fr clamp(60px, 38.873px + 5.634vw, 120px); /* justify-content: stretch; */ align-items: center; max-width: 1000px; gap: var(--length-XXS); width: fit-content; margin-inline: auto; } .ttl-intro div:first-of-type { transform: scale(-1, 1); } #sec-intro h2 { font-size: var(--fs-LL); line-height: 1.4; letter-spacing: 0.2rem; } @media (min-width:834px) { #sec-intro h2 { letter-spacing: 0.5rem; } } /* sec-scene-------------------------------------*/ #sec-scene { background: var(--color-main1); } .scene-container { display: grid; gap: 14px; margin: 0 calc(50% - 50vw); } @media (min-width:834px){ .scene-container { gap: 10px; } } .scene-inner { background: var(--color-main4); display: grid; } .scene-img { height: 100%; } .scene-img img { height: 100%; object-fit: cover; /* display: block; */ } .scene-description { padding: 1em 1.5em; text-align: left; } .scene-num { font-family: var(--font-en); font-size: clamp(3.6rem, 3.037rem + 2.404vw, 5.2rem); text-align: left; text-transform: capitalize; line-height: 1.1; font-weight: 400; } .scene-name { font-size: var(--fs-L); font-weight: 700; text-indent: -.5em; margin-bottom: .25em; } .scene-recommend { display: flex; flex-flow: column wrap; gap: .5em; margin: 1em 0; } .ttl-scene-recommend { position: relative; display: flex; align-items: center; height: 30px; line-height: 1; padding: 0 1rem; background-color: var(--color-main5); color: var(--color-light); font-size: 13px; text-align: center; width: fit-content; font-family: var(--font-gothic); letter-spacing: .2rem; } .ttl-scene-recommend::after { position: absolute; top: 0; width: 0px; height: 0px; border-color: var(--color-main5) transparent; border-style: solid; content: ''; } .ttl-scene-recommend::after { right: -12px; border-width: 16px 13px 15px 0px; } a.link-stay, a.link-food { display: flex; font-size: var(--fs-M); transition: .3s ease; width: fit-content; padding-top: .5em; color: var(--color-main2); font-weight: 700; text-decoration: none; } a.link-stay::before, a.link-food::before { font-size: var(--fs-M); font-family: "Material Icons Outlined"; margin: 0 .3em 0 0; font-weight: 400; text-decoration: none; } a.link-stay::before { content: "\ea45"; } a.link-food::before { content: "\e56c"; } a.link-stay:hover, a.link-food:hover { text-decoration: none; transform: translateX(5px); } @media (min-width:834px) { .scene-inner { grid-template-columns: repeat(2, 1fr); align-items: center; overflow: hidden; } /* vPpeju�v�]�S�0eQ�0�fH0 */ .scene-inner:nth-of-type(even) .scene-img { order: 2; } .scene-inner:nth-of-type(even) .scene-description { order: 1; } .scene-description { padding: 1em 2em; } } /* sec-stay-------------------------------------*/ #sec-stay { background: var(--color-main1); background-image: url("../img/bg_grunge.webp"); background-blend-mode: color-burn; background-repeat: repeat; border-top: 8px solid transparent; border-image: var(--gradient-gold); border-image-slice: 1; /* �! S0�0L0�_� */ } #sec-stay .sec-container { padding: var(--length-XL) var(--length-XS); } .txt-lead { text-align: justify; } @media screen and (min-width:640px) { .txt-lead { text-align: center; } } .ico-category img { width: min(40vw, 140px); height: auto; margin-bottom: 1em; } .ph-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1em; margin: 2em 0; } @media (min-width:640px) { .ph-grid { grid-template-columns: repeat(2, 1fr); } } .btn-container { display: flex; flex-flow: column wrap; } @media (min-width:834px) { .btn-container { flex-flow: row wrap; } } .plan-period { font-weight: 700; text-align: center; margin: 1em 0; } .plan-period span { display: block; } .plan-description { font-size: var(--fs-S); text-align: justify; max-width: 640px; margin: 0 auto; width: fit-content; } .plan-price { font-size: var(--fs-LL); font-weight: 800; text-align: center; line-height: 1.4; margin: 1em auto; } .plan-price span { font-size: var(--fs-SS); font-weight: 500; display: block; } .plan-features-ttl { display: block; background: var(--color-dark); font-size: var(--fs-S); font-weight: 700; padding: .2em 2em; border-radius: 8px; margin: 1em 0 .5em; color: var(--color-light); } @media (min-width:640px) { .plan-features-ttl { display: inline-block; } } .menu-features-ttl { display: block; background: var(--color-dark); font-size: var(--fs-S); font-weight: 700; padding: .2em 2em; border-radius: 9999px; margin: 1em 0 .5em; color: var(--color-light); } @media (min-width:640px) { .menu-features-ttl { display: inline-block; } } .plan-features { max-width: 800px; width: fit-content; margin: 0 auto 2em; } .plan-features li { margin: .75em auto 0 auto; margin-left: 1em; text-indent: -1em; line-height: 1.6; text-align: justify; list-style-type: disc; list-style-position: inside; } /* qQ��0�0�0 */ .btn-stayplan, .btn-foodplan { background: var(--color-main5); color: var(--color-light); border-radius: 9999px; display: flex; align-items: center; gap: clamp(10px, 2.5vw, 16px); width: min(82vw, 420px); padding: clamp(14px, 3vw, 20px) clamp(22px, 5vw, 32px); font-size: var(--fs-S); font-weight: 700; line-height: 1.2; position: relative; cursor: pointer; text-decoration: none; margin-block: 2em 1em; margin-inline: auto; text-align: left; } .btn-general1 { background: var(--color-main2); color: var(--color-light); border-radius: 9999px; display: flex; align-items: center; gap: clamp(10px, 2.5vw, 16px); width: min(82vw, 420px); padding: clamp(14px, 3vw, 20px) clamp(22px, 5vw, 32px); font-size: var(--fs-S); font-weight: 700; line-height: 1.2; position: relative; cursor: pointer; text-decoration: none; margin-block: 2em 1em; margin-inline: auto; text-align: left; } .btn-general2, .btn-general3 { background: var(--color-light); border-radius: 9999px; display: flex; align-items: center; gap: clamp(10px, 2.5vw, 16px); width: min(82vw, 420px); padding: clamp(14px, 3vw, 20px) clamp(22px, 5vw, 32px); font-size: var(--fs-S); font-weight: 700; line-height: 1.2; position: relative; cursor: pointer; text-decoration: none; margin-block: 2em 1em; margin-inline: auto; text-align: left; } .btn-general2 { color: var(--color-dark); border: 1px solid var(--color-dark); } .btn-general3 { color: var(--color-link); border: 1px solid var(--color-link); } /* �]�0�0�0�0 */ .btn-stayplan::before, .btn-foodplan::before { content: ""; width: clamp(30px, 6vw, 48px); height: clamp(30px, 6vw, 48px); flex-shrink: 0; } /* �S�wpS */ .btn-stayplan::after, .btn-foodplan::after, .btn-general1::after { content: ""; width: clamp(30px, 6vw, 48px); height: clamp(30px, 6vw, 48px); background: url("../img/btn_arrow_wh.svg") no-repeat center/contain; flex-shrink: 0; margin-left: auto; } .btn-stayplan:hover, .btn-foodplan:hover, .btn-general1:hover { text-decoration: none; color: var(--color-light); transform: scale(1.02); } .btn-general2::after, .btn-general3::after { content: ""; width: clamp(30px, 6vw, 48px); height: clamp(30px, 6vw, 48px); flex-shrink: 0; margin-left: auto; } .btn-general2::after { background: url("../img/btn_arrow_dark.svg") no-repeat center/contain; } .btn-general3::after { background: url("../img/btn_arrow_red.svg") no-repeat center/contain; } .btn-general2:hover, .btn-general3:hover { text-decoration: none; transform: scale(1.02); } .btn-general2:hover { color: var(--color-dark); } .btn-general3:hover { color: var(--color-link); } /*�]�0�0�0�0*/ .btn-stayplan::before { background: url("../img/btn_ico_bed.svg") no-repeat center/contain; } .btn-foodplan::before { background: url("../img/btn_ico_dinner.svg") no-repeat center/contain; } /* sec-options-------------------------------------*/ #sec-options { background: var(--color-main1); background-image: url("../img/bg_grunge.webp"); background-blend-mode: color-burn; background-repeat: repeat; border-top: 8px solid transparent; border-image: var(--gradient-gold); border-image-slice: 1; /* �! S0�0L0�_� */ } #sec-options .sec-container { padding: var(--length-XL) var(--length-XS); } /* sec-restaurant-------------------------------------*/ #sec-restaurant { background-color: var(--color-main3); background-image: url("../img/bg_tile.webp"); background-repeat: repeat; background-size: 30px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-image: var(--gradient-gold); border-image-slice: 1; /* �! S0�0L0�_� */ } @media (min-width:640px) { #sec-restaurant { background-size: 40px; } } #sec-restaurant .sec-container { padding: var(--length-XL) 0; } .restaurant-container { background: var(--gradient-white); padding: var(--length-XL) 1em var(--length-XS); border-radius: 50vw 50vw 0 0; margin: 2em calc(50% - 50vw) 0; } .restaurant-inner { width: 100%; max-width: 1000px; margin-inline: auto; } .ttl-restaurant-inner { padding: var(--length-M) 0; } .restaurant-sub { font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); font-weight: 700; margin-bottom: .25em; } .restaurant-sub-name,.restaurant-name { color: var(--color-main2); font-weight: 800; font-size: clamp(2.2rem, 1.848rem + 1.502vw, 3.2rem); line-height: 1.6; display: block; } @media (min-width:834px){ .restaurant-sub-name,.restaurant-name { margin-inline: .2em; display: inline-block; } } .restaurant-description { text-align: justify; } @media (min-width:640px) { .restaurant-description { text-align: center; } } .ttl-restaurant-logo { width: 70vw; max-width: 360px; margin: .75em auto; } .restaurant-ph-rail { display: grid; grid-template-columns: repeat(1, 1fr); gap: 8px; margin: 2em auto; } @media (min-width:640px) { .restaurant-ph-rail { grid-template-columns: repeat(3, 1fr); gap: 16px; } } .restaurant-ph-rail img { object-fit: cover; aspect-ratio: 3 / 2; } .recommend-arrow { background: var(--color-main2); color: var(--color-light); font-weight: 700; position: relative; padding: .5em 1em; border-radius: .5em; margin-bottom: 1em; line-height: 1.3; margin-inline: auto; width: 100%; } .recommend-arrow::after { position: absolute; content: ''; top: 100%; left: calc(50% - 15px); border: 15px solid transparent; border-top: 15px solid var(--color-main2); width: 0; height: 0; } @media (min-width:834px) { .recommend-arrow { width: fit-content; padding: .5em 2em; min-width: 600px; } } .plan-detail-container { background: var(--color-light); box-shadow: 0 0 12px rgba(0, 0, 0, 0.3); padding: 2em 1em; margin: var(--length-S) auto; /* border-radius: var(--length-XXS); */ } @media (min-width:834px) { .plan-detail-container { padding: 3em 1em; } } .plan-detail-container h2 { position: relative; display: inline-block; padding: 0.5em 1em; /* �0�0�0Rn0YO}v */ text-align: center; line-height: 1.3; font-weight: 800; font-size: var(--fs-LL); color: var(--color-main2); margin-bottom: 1em; } .plan-detail-container h2::before, .plan-detail-container h2::after { content: ""; position: absolute; top: 0; width: 14px; height: 100%; border-top: 1px solid var(--color-main2); border-bottom: 1px solid var(--color-main2); } .plan-detail-container h2::before { left: 0; border-left: 1px solid var(--color-main2); } .plan-detail-container h2::after { right: 0; border-right: 1px solid var(--color-main2); } .plan-detail-container h3 { font-size: var(--fs-S); } .restaurant-plan-description { text-align: justify; } .plan-photo img { width: min(100%, 640px); margin: 1em auto; aspect-ratio: 3 / 2; object-fit: cover; } /* ===== photo-railS0S0K0�0 �*gO(u===== */ .rail-wrap { position: relative; margin-block: 1.5em 1em; } .rail { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 0 1em; scrollbar-width: none; -ms-overflow-style: none; } .rail::-webkit-scrollbar { display: none; } /* ===== card��Qwn00 � ===== */ /* �0�0�0�1�g�0�0�0 ���R�0 */ .card { flex: 0 0 92%; max-width: 720px; scroll-snap-align: start; background: transparent; border: none; overflow: hidden; } .card-media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===== � � �0�0�0 ===== */ .rail-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 1); background: rgba(0, 0, 0, .8); backdrop-filter: blur(8px); color: var(--color-light); font-size: 16px; line-height: 1; display: grid; place-items: center; cursor: pointer; border-radius: 9999px; font-family: var(--font-gothic); font-weight: 700; } .rail-prev { left: 6px; } .rail-next { right: 6px; } .rail-nav.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } /* ===== �0�0�0�0�0�2�g�[�0 ===== */ @media (min-width: 768px) { .card { flex-basis: 52%; max-width: none; } } /* ===== PC�2d0JS�2.5�g � ===== */ @media (min-width: 1024px) { .card { flex-basis: 40%; max-width: none; } } /* ===== photo-railS0S0~0g0 ===== */ .options-plus { position: relative; padding: 2em 1.5em 1em; margin-block: 3em 1em; margin-inline: auto; max-width: 600px; background: rgba(255, 225, 215, 0.4); border: 1px solid var(--color-main2); font-size: var(--fs-S); box-shadow: 4px 6px 0 var(--color-main2); } .options-plus > h4 { position: absolute; display: inline-block; top: -.25em; left: 50%; transform: translate(-50%, -50%); font-size: var(--fs-SS); font-family: var(--font-gothic); background: var(--color-main2); color: var(--color-light); padding: .5em 1em .6em; border-radius: 999px; line-height: 1.4; width: min(60vw,380px); } .options-plus p { text-align: justify; } .options-plus img { max-width: 400px; margin-block: 1em; } /* sec-outro-------------------------------------*/ #sec-outro { background: url(../img/img_landscape.webp); background-repeat: no-repeat; background-size: cover; background-position: center; } #sec-outro .sec-container { padding: var(--length-L) 0; } .hotel-logo img { width: min(65vw, 380px); margin: 1em 0; } .sns-container { display: flex; justify-content: center; gap: 30px; } .sns-container img { width: min(10vw, 55px); } /* sec-access-------------------------------------*/ #sec-access { background: var(--color-main4); } #sec-access .sec-container { padding: var(--length-L) 0 0; } .access-container { display: flex; flex-direction: column; width: fit-content; margin-inline: auto; } @media (min-width:640px) { .access-container { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; margin-bottom: 2em; } .access-container div { text-align: left; } } .ttl-access { text-transform: capitalize; font-size: clamp(4rem, 3.296rem + 3.005vw, 6rem); font-family: var(--font-en); line-height: 1; font-weight: 400; } #sec-access iframe { margin: var(--length-M) calc(50% - 50vw) 0; width: 100vw; } /* sec-links-------------------------------------*/ #sec-links { background-color: var(--color-light); border-top: 8px solid transparent; border-image: var(--gradient-gold); border-image-slice: 1; /* �! S0�0L0�_� */ } #sec-links .sec-container { padding: var(--length-L) 0; } .links-container { padding: 1em 2em; display: flex; gap: 1.5em; flex-direction: column; } .links-inner { width: fit-content; display: flex; gap: 0; flex-direction: column; } @media (min-width:640px) { .links-inner { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; } } .copyright { text-align: center; font-size: var(--fs-SS); margin-top: 2em; } /* �0�0-------------------------------------*/ .navmenu { position: relative; } /* ========================= �0�0�0�0�0�0�0�0�0,gSO ========================= */ .menu { position: fixed; top: 15px; right: clamp(12px, 3vw, 32px); width: 48px; /* �0�0�0hQSOn0�v�_*/ height: 48px; /* �0�0�0hQSOn0�v�_*/ z-index: 1001; cursor: pointer; display: inline-block; border-radius: 50%; border: 1px solid var(--color-light); background: rgba(0, 0, 0, 0.65); box-sizing: border-box; } /* ========================= 3,g�} ========================= */ .menu__line { position: absolute; left: 50%; width: 24px; /* �}n0w�U0 */ height: 3px; /* �}n0*YU0 */ background: var(--color-light); transform: translateX(-50%); transition: transform .3s ease, opacity .3s ease, top .3s ease; } /* ========================= �}n0MOn����� � ========================= */ .menu__line--top { top: 13px; /* Nn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } .menu__line--center { top: 21px; /* -N.Yn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } .menu__line--bottom { top: 29px; /* Nn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } /* ========================= � Yb_Bf ========================= */ .is-open .menu__line--top { top: 21px; /* -N.YMOnk0�cH0�0�centerh0 TX0$Pk0Y0�0 � */ transform: translateX(-50%) rotate(45deg); } .is-open .menu__line--center { opacity: 0; } .is-open .menu__line--bottom { top: 21px; /* -N.YMOnk0�cH0�0�centerh0 TX0$Pk0Y0�0 � */ transform: translateX(-50%) rotate(-45deg); } /* ============== overlay nav ============== */ .gnav { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.8); /* ���� */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; /* �0�0�0�0�0L0�_��j0h0M0 */ overflow: auto; } .gnav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; } /* -N����0�0�0�0g0��X0j0D0��W � */ .gnav__wrap { min-height: 100%; padding: 80px 24px 40px; box-sizing: border-box; display: flex; justify-content: center; } .gnav__menu { width: min(90vw, 640px); list-style: none; padding: 0; margin: 0; } .gnav__menu__item { margin: 0; } /* �0�0�0��_0�v */ .gnav__menu__item a { display: block; padding: 10px; color: var(--color-light); text-decoration: none; font-size: clamp(2.8rem, 2.448rem + 1.502vw, 3.8rem); line-height: 1.3; border-bottom: 1px solid #CCC; } .gnav__menu__item.menu__en a { text-transform: capitalize; font-family: var(--font-en); font-weight: 400; } .gnav__menu__item a:hover { opacity: .6; color: var(--color-main4); } /* �0�0*/ .gnav__menu__item.menu__sub a { padding-left: 1.5em; font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); } /* ============== NK0�0�k0u0�0c0h0�QY0 ============== */ .gnav__menu__item { opacity: 0; transform: translateY(-10px); } .gnav.is-open .gnav__menu__item { animation: gnavItem .1s ease forwards; } @keyframes gnavItem { to { opacity: 1; transform: translateY(0); } } /* ��D0_0h0M0�juk0�QY0�0�0�0�0�0�0�0 */ .gnav.is-open .gnav__menu__item:nth-child(1) { animation-delay: .04s; } .gnav.is-open .gnav__menu__item:nth-child(2) { animation-delay: .08s; } .gnav.is-open .gnav__menu__item:nth-child(3) { animation-delay: .12s; } .gnav.is-open .gnav__menu__item:nth-child(4) { animation-delay: .16s; } .gnav.is-open .gnav__menu__item:nth-child(5) { animation-delay: .20s; } .gnav.is-open .gnav__menu__item:nth-child(6) { animation-delay: .24s; } .gnav.is-open .gnav__menu__item:nth-child(7) { animation-delay: .28s; } .gnav.is-open .gnav__menu__item:nth-child(8) { animation-delay: .32s; } .gnav.is-open .gnav__menu__item:nth-child(9) { animation-delay: .36s; } .gnav.is-open .gnav__menu__item:nth-child(10) { animation-delay: .38s; } /* ============== body lock (openBf�0�0�0�0�0U0[0j0D0) ============== */ body.is-menu-open { overflow: hidden; } /* zz�0�0�0�0�0�0�0�0�bF0�f�0�0�0�0 */ .gnav__bg { position: absolute; inset: 0; } /*zz�0�0�0�0�0�0�0g0w��yW0j0D0�0F0n0�Oz�*/ html.is-no-smooth { scroll-behavior: auto !important; }