��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #001D3B; --color-main1-L: #143D68; --color-main2: #BE9C59; --color-main2-L: #F4E3A3; --color-main3: #930305; --color-dark: #000; --color-light: #FFF; --color-link: #5a36e9; --color-ssp: #847F4F; --color-zenhan: #63A79A; --color-kohan: #A17CBE; --color-all-period: #DD8951; --gradient1: linear-gradient(90deg, #cbb790, #f6ebd4 25% 75%, #cbb790); --gradient2: linear-gradient(90deg, #143d68, #001a36 25% 75%, #143d68); --gradient3: linear-gradient(#930305 30%, #4a0203); --gradient-crown: linear-gradient(-40deg, #c6a147, #ead18c 20%, #edd491 40%, #c4a461 60%, #ddc47b 80%, #ccac4e); --gradient-logo: linear-gradient(90deg, #c7c5a2 1%, #cac9bf 25%, #dbd9c8 36%, #fffcdc 52%, #cecec5 79%, #c7c0af 99%); --gradient-footer: linear-gradient(90deg, #c7c5a2, #fffcdc 50%, #c7c5a2); /* root��pe�fonts */ --font-main: "Shippori Mincho", serif; --font-notes: "Local Noto Sans JP", sans-serif; --font-gothic: "Local Noto Sans JP", sans-serif; --font-en: "Bonheur Royale", 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(15px, 13.239px + 0.469vw, 20px); --length-XXXS: clamp(10px, 8.239px + 0.469vw, 15px); --length-XXXXS: clamp(5px, 3.239px + 0.469vw, 10px); --fs-SS: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); --fs-S: clamp(1.4rem, 1.259rem + 0.601vw, 1.8rem); --fs-MS: clamp(1.5rem, 1.359rem + 0.601vw, 1.9rem); --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); --header-height: 50px; --anchor-offset: 90px; } @media (min-width: 834px) { :root { --header-height: 70px; /* PC */ } } /*qQ��� }*/ body { font-family: var(--font-main); font-weight: 500; font-style: normal; line-height: inherit; color: var(--color-light); font-size: var(--fs-M); background: var(--color-light); /* padding-top: 50px; */ /* navؚU0R */ } @media (min-width:834px) { body { /* padding-top: 70px; */ /* navؚU0R */ } } /* �Q��0�0�0�0�0�0R�v�k */ .header-offset { scroll-margin-top: calc(var(--header-height) + 10px); } /*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(#BE9C59 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-main1); } .fc-key2 { color: var(--color-main2); } .fc-key2-L { color: var(--color-main2-L); } .fc-key3 { color: var(--color-main3); } .fc-hanten { color: var(--color-dark); } .fc-hanten2 { color: var(--color-light); } .bg-key1 { background: var(--color-main1); color: var(--color-light); } .bg-key2 { background: var(--color-main2); color: var(--color-light); } .bg-key3 { background: var(--color-main3); color: var(--color-light); } .bg-zenhan { background: var(--color-zenhan); color: var(--color-light); } .bg-kohan { background: var(--color-kohan); color: var(--color-light); } .bg-all-period { background: var(--color-all-period); color: var(--color-light); } .bg-key1, .bg-key2, .bg-key3, .bg-zenhan, .bg-kohan, .bg-all-period { padding: 0.1em 0.5em; } .ff-en { font-family: var(--font-en); text-transform: uppercase; font-weight: 400; } .ff-gothic { font-family:var(--font-gothic); font-weight: 400; } a { color: var(--color-link); text-decoration: none; transition: .5s; } a:hover { color: var(--color-link); text-decoration: underline; } .notes { text-align: justify; font-family: var(--font-gothic); width: fit-content; padding: 0; margin: 0 auto; } @media (min-width:834px) { .notes { box-sizing: initial; /*paddingR�0RgS*/ margin: 30px auto 0 auto; max-width: 800px; } } 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 { position: fixed; width: 40px; bottom: calc(40px + env(safe-area-inset-bottom)); right: 5px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .5s ease; } #page-top.is-show { opacity: 1; pointer-events: auto; } #page-top img { display: block; width: 100%; height: auto; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .3)); transition: transform .3s ease; } @media (min-width: 834px) { #page-top { width: 50px; right: 15px; } } #page-top a img:hover { transform: scale(1.1); } .img-box-shadow { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); margin-bottom: 8px; } .img-filter-shadow { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3)); } .txt-shadow { text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); } .img-radius { border-radius: clamp(20px, 12.958px + 1.878vw, 40px); } .wide-fit { width: fit-content; margin-inline: auto; } .wide-max250, .wide-max300, .wide-max400, .wide-max500, .wide-max600, .wide-max700, .wide-max800, .wide-max900, .wide-max1000 { margin-inline: auto; } .wide-max250 { max-width: 250px; } .wide-max300 { max-width: 300px; } .wide-max400 { max-width: 400px; } .wide-max500 { max-width: 500px; } .wide-max600 { max-width: 600px; } .wide-max700 { max-width: 700px; } .wide-max800 { max-width: 800px; } .wide-max900 { max-width: 900px; } .wide-max1000 { max-width: 1000px; } .menu-content { border-bottom: 3px solid transparent; border-image: var(--gradient-crown); border-image-slice: 1; margin: 0 auto 2em; padding: 0 0 2em; } .no-wrap span { white-space: nowrap; } /*eQO��#�-------------------------------------*/ .nyukai { /* background: var(--color-light); */ /* border: 2px solid var(--color-ssp); */ /* padding: 1.5em; */ margin: 0 auto; font-family: var(--font-main); color: var(--color-dark); padding-bottom: clamp(15px, 9.718px + 1.408vw, 30px); } @media (min-width:834px) { .nyukai { max-width: 700px; /* padding: 2em; */ } } .btn-nyukai a { display: block; font-family: var(--font-main); font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); text-align: center; text-decoration: none; width: 70vw; max-width: 280px; margin: 0 auto; padding: 1em 0; background: var(--color-ssp); color: var(--color-light); border-radius: 100vmax; transition: 0.5s; /* font-weight: 600; */ } @media (min-width:834px) { .btn-nyukai a { max-width: 320px; padding: 1.2em 0; } } .btn-nyukai a:hover { outline-offset: 0px; transform: scale(1.1); } /*secqQ�-------------------------------------*/ .sec-container { margin-block: 0; margin-inline: auto; max-width: 1000px; padding: var(--length-L) var(--length-XXS) var(--length-XXS); text-align: center; position: relative; } /* MRJS�_JSg���0�0�0�0�Q�R */ .period_zenhan::after { content: 'MRJS�2026.10.31(W)^�11.24 (kp)'; display: inline-block; min-height: 1em; } .period_kohan::after { content: '�_JS�2026.11.25(4l)^�12.20 (�e)'; display: inline-block; min-height: 1em; } .period_all::after { content: 'hQg���2026.10.31(W)^�12.20 (�e)'; display: inline-block; min-height: 1em; } /* sec-kv-------------------------------------*/ #sec-kv { margin: 0 calc(50% - 50vw); } /* sec-Restaurant-------------------------------------*/ #sec_restaurant, #sec_goods { background-image: url(../img/bg_crown_bk.webp), var(--gradient2); background-repeat: repeat, no-repeat; background-size: 50px auto, cover; border-top: 8px solid transparent; border-image: var(--gradient-crown); border-image-slice: 1; } @media (min-width: 640px) { #sec_restaurant, #sec_goods { background-size: auto, cover; } } #sec_goods .sec-container { margin-block: 0; margin-inline: auto; max-width: 1000px; padding: var(--length-L) var(--length-XXS) var(--length-L); text-align: center; position: relative; } /* 'Y���QW01 */ .ttl_main1 { padding-block: var(--length-XS); margin-bottom: var(--length-S); background: url(../img/deco_logo_gold.webp); background-position: center; background-size: contain; background-repeat: no-repeat; } .ttl_main1 h2 { font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem); font-weight: 700; line-height: 1; } .ttl_main1 h3 { font-family: var(--font-en); font-size: clamp(5rem, 3.944rem + 4.507vw, 8rem); line-height: 1; text-transform: capitalize; /* font-weight: 400; */ } .ttl_main1 h2, .ttl_main1 h3 { text-shadow: rgba(0, 0, 0, .5) 0 0 5px; } .ttl_main1.fc-key3 h2, .ttl_main1.fc-key3 h3 { text-shadow: none; } .catch-copy { font-size: clamp(3rem, 2.296rem + 3.005vw, 5rem); background: var(--gradient-crown); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.15em; margin-bottom: 1em; } .catch-copy::after { content: ""; display: block; width: 50px; height: 50px; background: url(../img/deco_crown_gold.webp) center / contain no-repeat; margin: .2em auto 0; } @media (min-width:834px) { .catch-copy::after { width: 80px; height: 80px; } } .wrapper_light, .wrapper_dark, .wrapper_white, .wrapper_white_gold { padding: clamp(30px, 12.394px + 4.695vw, 80px) clamp(15px, -0.845px + 4.225vw, 60px); margin: clamp(80px, 37.746px + 11.268vw, 200px) auto; width: 100%; position: relative; } .wrapper_light { background: repeat url(../img/pattern_stripe_light.webp); color: var(--color-dark); } .wrapper_dark { background: repeat url(../img/pattern_stripe_dark.webp); } .wrapper_white, .wrapper_white_gold { background: var(--color-light); color: var(--color-dark); } /* N NqQ� */ .wrapper_light::before, .wrapper_light::after, .wrapper_dark::before, .wrapper_dark::after, .wrapper_white::before, .wrapper_white::after, .wrapper_white_gold::before, .wrapper_white_gold::after { content: ""; position: absolute; left: 0; width: 100%; height: clamp(30px, 8.873px + 5.634vw, 90px); background-position: center; background-repeat: no-repeat; background-size: 100% auto; pointer-events: none; } /* N */ .wrapper_light::before, .wrapper_dark::before, .wrapper_white_gold::before { top: 0; background-image: url(../img/deco_frame_gold.webp); transform: translateY(-100%); } .wrapper_white::before { top: 0; background-image: url(../img/deco_frame_red.webp); transform: translateY(-100%); } /* N */ .wrapper_light::after, .wrapper_dark::after, .wrapper_white_gold::after { bottom: 0; background-image: url(../img/deco_frame_gold.webp); transform: translateY(100%) scaleY(-1); } .wrapper_white::after { bottom: 0; background-image: url(../img/deco_frame_red.webp); transform: translateY(100%) scaleY(-1); } .logo_canvas { width: min(70vw, 400px); } /* \���QW01:;u�P */ .ttl_sub1 img { width: 100%; max-width: 480px; height: auto; margin-bottom: var(--length-S); } /* \���QW02 */ .ttl_sub2 { margin-block: var(--length-M) var(--length-XS); color: var(--color-main3); } .ttl_sub2 h2 { font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem); font-weight: 700; line-height: 1; } .ttl_sub2 h3 { font-family: var(--font-en); font-size: clamp(3.6rem, 2.755rem + 3.606vw, 6rem); line-height: 1; text-transform: capitalize; /* font-weight: 400; */ margin-bottom: .2em; } .ttl_sub2::before { content: ""; display: block; width: 50px; height: 50px; background: url(../img/deco_crown_gold.webp) center / contain no-repeat; margin: 0 auto .5em; } @media (min-width:834px) { .ttl_sub2::before { width: 80px; height: 80px; } } .grid_container { display: grid; grid-template-columns: 1fr; gap: var(--length-S) var(--length-XS); } @media (min-width:640px) { .grid_container { grid-template-columns: repeat(2, 1fr); } } .grid_container img { /* filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); */ } .date_period { font-size: clamp(1.6rem, 0.966rem + 2.704vw, 3.4rem); line-height: 1.1; font-weight: 700; text-transform: capitalize; margin-bottom: .25em; } .date_period span { font-size: 120%; } /*�0�0�0�0�0�0�0��#�*/ #time-area { margin-block: var(--length-XS); } .btn-timetable { /* width: min(60vw, 320px); */ margin: .5em 0; } .box-timetable { display: none; overflow: hidden; max-height: 0; padding: 1em 1em 2em; transition: max-height 0.5s ease; background: var(--color-main1); border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); margin-bottom: 1em; } .ttl-timetable { font-weight: 700; font-size: var(--fs-L); color: var(--color-main2-L); line-height: 1; margin-block: var(--length-XS); /* background: var(--gradient-crown); */ /* padding: .3em .5em .4em; */ /* border-radius: 100vmax; */ } .ttl-sub-timetable { font-size: 1.8rem; font-weight: 700; line-height: 1.4; color: var(--color-main2-L); padding: .5em 0; margin-bottom: .5em; border-top: 1px solid var(--color-main2-L); } .mon-thu { /* background: #c0e6ff; */ } .weekend { /* background: #fef882; */ } .box-open-hours { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width:961px) { .box-open-hours { grid-template-columns: repeat(2, 1fr); gap: 30px; } } .time-number { font-weight: 500; display: grid; gap: 5px; grid-template-columns: 1fr; font-size: 1.4rem; text-align: left; text-indent: calc(100vw / 6); } @media (min-width:480px) { .time-number { grid-template-columns: repeat(2, 1fr); gap: 10px; text-indent: 0; } } .time-number li { border-bottom: 1px dotted var(--color-dark); } #toggle-timetable { width: min(60vw, 280px); aspect-ratio: 280 / 53; background: url("../img/time-open.svg") no-repeat center center; background-size: contain; border: none; cursor: pointer; display: block; margin: .5em auto; transition: transform 0.3s ease; } #toggle-timetable:hover { transform: scale(1.08); } #toggle-timetable.btn-close { background-image: url("../img/time-close.svg"); } /* �0�0�0�0�0�0�0S0S0~0g0 */ a.reserve-btn img { width: min(70vw, 320px); margin-block: 2em; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4)); } a.reserve-btn img:hover { transform: scale(1.08); /* filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); */ } .cencel_notice { margin: var(--length-S) auto 0; padding: var(--length-XXS); border: 3px solid var(--color-main1); width: fit-content; font-weight: 700; color: var(--color-main1); background: var(--color-light); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .cencel_notice p { text-align: left; margin-left: 1em; text-indent: -1em; } /* sec-collabomenu-------------------------------------*/ #sec_collabomenu { background-image: url(../img/bg_classic_wh.webp), var(--gradient1); background-repeat: repeat, no-repeat; background-size: 50px auto, cover; border-top: 8px solid transparent; border-image: var(--gradient-crown); border-image-slice: 1; } @media (min-width: 640px) { #sec_collabomenu { background-size: auto, cover; } } .ttl_special_menu { background: var(--gradient3); padding: 1em 0; color: var(--color-light); position: relative; margin-block: 3em 1em; margin-inline: calc(-1 * clamp(15px, -0.845px + 4.225vw, 60px)); } .ttl_special_menu::before { content: ""; position: absolute; left: 50%; top: -60px; transform: translateX(-50%); width: 240px; height: 80px; background: url(../img/ttl_specialmenu.webp) center / contain no-repeat; } /* @media (min-width:640px){ .ttl_special_menu::before{ top: -70px; width: 300px; height: 100px; } } */ @media (min-width:834px) { .ttl_special_menu::before { top: -90px; width: 360px; height: 120px; } } .ttl_special_menu h3 { margin-top: .4em; font-family: var(--font-en); font-size: clamp(3rem, 2.225rem + 3.305vw, 5.2rem); text-transform: capitalize; line-height: 1; } .ttl_special_menu h2 { font-size: clamp(1.4rem, 1.189rem + 0.901vw, 2rem); font-weight: 700; line-height: 1; } .shop-perks2 { border-top: 1px solid var(--color-main2); padding: 2em 0; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } .shop-perks2 div { max-width: 600px; margin-inline: auto; } /* �0�0�0�0��#�S0S0K0�0========================= */ /* ===== �0�0�0�0�0�0�0�0�0 �0�0�0�0hT�0 ===== */ .ttl-grand-menu { font-family: var(--font-en); font-size: clamp(4.8rem, 4.096rem + 3.005vw, 6.8rem); color: var(--color-light); text-transform: uppercase; line-height: 1.2; font-weight: 800; } .section-head, .section-head-2 { padding-block: var(--length-XS) 0; margin-block: var(--length-S) 0; } .section-head { border-top: 1px solid var(--color-main2); } .ttl-menu-section { font-family: var(--font-en); font-size: clamp(3.2rem, 2.073rem + 4.808vw, 6.4rem); color: var(--color-main1); text-transform: capitalize; line-height: 1.2; } .ttl-menu-section-ja { font-size: clamp(1.4rem, 1.189rem + 0.901vw, 2rem); color: var(--color-main1); line-height: 1.2; font-weight: 700; margin-bottom: 0.5em; display: flex; align-items: center; justify-content: center; gap: .6em; } .ttl-menu-section-ja::before, .ttl-menu-section-ja::after { content: ""; flex: none; width: 1em; height: 1px; background: currentColor; } .ttl-menu-period { color: var(--color-dark); display: inline-block; font-size: clamp(1.5rem, 1.324rem + 0.751vw, 2rem); font-weight: 700; padding: .1em .5em; line-height: 1.4; width: min(100%, 1000px); color: var(--color-light); margin: .3em auto; } .ttl-menu-number { color: var(--color-dark); font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); font-weight: 700; margin-bottom: var(--length-XXS); } /* ===== �0�0�0�0�0�0�0�0�0��#� ===== */ /* ===== �0�0�0 ===== */ .rail-wrap { position: relative; } .rail, .rail-sq { display: grid; grid-auto-flow: column; gap: var(--length-XXS); /* subgridn0��k0j0�0L��[� */ grid-template-rows: auto /* ;u�P */ auto /* �0�0�0�0 */ auto; /* �Oli>span { color: var(--color-light); display: block; font-family: var(--font-gothic); line-height: 1.2; font-weight: 400; font-size: clamp(1.1rem, 1.065rem + 0.15vw, 1.2rem); margin-top: .5em; } @media (min-width:834px) { .sns-ico-set { gap: 30px; } } .sns-ico-set img { width: calc(100vw / 10); max-width: 40px; height: auto; } @media (min-width:834px) { .sns-ico-set img { width: 50px; } } .notes-foot { font-size: 1.3rem; line-height: 1.6; margin: 0 auto; } @media (min-width:834px) { .notes-foot { font-size: 1.4rem; max-width: 800px; text-align: center; } } .hotel-links { display: flex; flex-direction: column; text-align: center; margin: 20px 0 20px 0; } @media (min-width:834px) { .hotel-links { display: flex; flex-direction: row; justify-content: center; } } .hotel-links a { display: inline-block; padding: 0 1em; color: var(--color-light); text-decoration: none; transition: .3s ease-in-out; margin: 5px 0; } @media (min-width:834px) { .hotel-links a:first-of-type { margin: 0; border-left: 1px solid var(--color-light); border-right: 1px solid var(--color-light); } } .hotel-links a:hover { color: var(--color-main4); } .copyright { text-align: center; font-size: 1.2rem; } @media (min-width:834px) { .copyright { font-size: 1.4rem; } } /* �0�0-------------------------------------*/ .navmenu { position: fixed; top: 0; left: 0; width: 100%; height: 50px; z-index: 1001; } @media (min-width:834px) { .navmenu { height: 70px; } } .navmenu__inner { position: relative; width: 100%; height: 100%; } /* ========================= �0�0�0�0�0�0�0�0�0,gSO ========================= */ .menu { position: absolute; top: 0px; right: 0; width: 38px; height: 38px; z-index: 1; cursor: pointer; display: inline-block; box-sizing: border-box; background: var(--color-main1); border-left: 1px solid var(--color-light); border-bottom: 1px solid var(--color-light); } @media (min-width:768px) { .menu { width: 48px; height: 48px; } } /* ========================= 3,g�} ========================= */ .menu__line { position: absolute; left: 50%; width: 26px; /* �}n0w�U0 */ height: 3px; /* �}n0*YU0 */ background: var(--color-light); transform: translateX(-50%); transition: transform .3s ease, opacity .3s ease, top .3s ease; } @media (min-width:768px) { .menu__line { width: 32px; } } /* ========================= �}n0MOn����� � ========================= */ .menu__line--top { top: 8px; /* Nn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } .menu__line--center { top: 17px; /* -N.Yn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } .menu__line--bottom { top: 25px; /* Nn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } @media (min-width:768px) { .menu__line--top { top: 10px; /* 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: 32px; /* Nn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } } /* ========================= � Yb_Bf ========================= */ .is-open .menu__line--top { top: 18px; /* -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: 18px; /* -N.YMOnk0�cH0�0�centerh0 TX0$Pk0Y0�0 � */ transform: translateX(-50%) rotate(-45deg); } @media (min-width:768px) { .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, 29, 59, 0.9); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; 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: 60px 0 0; box-sizing: border-box; /* display: flex; */ /* justify-content: center; */ } @media (min-width:834px) { .gnav__wrap { padding: 80px 0 0; } } .gnav__menu { list-style: none; padding: 0; margin: 0; color: var(--color-light); text-transform: capitalize; width: min(90vw, 800px); font-weight: 500; margin-inline: auto; } .ttl-nav-main { text-align: center; } .ttl-nav-main img { max-width: 600px; margin-bottom: 1.5em; } .gnav__menu__item { margin: 0; position: relative; } /* �0�0�0��_0�v */ .gnav__menu__item a { padding: var(--length-XXS) 0 var(--length-XXS) 1em; color: var(--color-light); text-decoration: none; line-height: 1; cursor: pointer; position: relative; display: block; } .gnav__menu__item a::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: .8em; height: .8em; background-repeat: no-repeat; background-position: center; background-size: contain; } .grid-nav-secondary { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: .5em; } /* @media (min-width:768px) { .grid-nav-secondary { grid-template-columns: repeat(2, 1fr); gap: 10px; } } */ /* ===== primary ===== */ .nav-primary { font-size: clamp(1.7rem, 1.313rem + 1.653vw, 2.8rem); font-weight: 600; border-top: 1px solid var(--color-light); /* font-family: var(--font-en); */ font-weight: 600; } .nav-primary:last-child { border-bottom: 1px solid var(--color-light); } .nav-primary a::before { background-image: url(../img/triangle_primary.svg); } /* ===== secondary ===== */ .nav-secondary { margin-left: 1em; font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem); } .nav-secondary a { padding: var(--length-XXXXS) 0 var(--length-XXXS) 1em; } .nav-secondary a::before { background-image: url(../img/triangle_secondary.svg); } .gnav__menu__item a:hover { color: var(--color-main2-L); } /* ============== 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; }