��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #997D26; --color-main2: #EC747D; --color-main3: #8577BC; --color-main4: #FEF894; --color-main5: #FEFFD4; --color-main6: #E5E5DF; --color-dark: #000; --color-light: #FFF; --color-link: #8577BC; --color-ssp: #847F4F; --color-zenhan: #EC747D; --color-kohan: #8577BC; --color-gentei: #2BA296; --color-all-period: #F29830; --gradient1: linear-gradient(90deg, #ECECDB, #ffffff 20% 80%, #ECECDB); --gradient2: linear-gradient(-45deg, #150202, #55321f 20%, #441910 40%, #4d3932 60%, #3a2215 80%, #150202 100%); --gradient3: linear-gradient(90deg, #FEFFB4, #FEFFD4 20% 80%, #FEFFB4); --gradient4: linear-gradient(0deg, #ec747d 15%, #8577bc 85%); --gradient5: linear-gradient(90deg, #997d26, #e0d09f 25%, #997d26 50%, #e0d09f 75%, #997d26); --gradient6: linear-gradient(-45deg, #997d26, #e0d09f 50%, #997d26); --gradient-zenhan: linear-gradient(90deg, rgba(236, 116, 124, 0.0), #EC747D 5%, #EC747D 95%, rgba(236, 116, 124, 0.0)); --gradient-kohan: linear-gradient(90deg, rgba(133, 119, 188, 0.0), #8577BC 5%, #8577BC 95%, rgba(2133, 119, 188, 0.0)); --gradient-all: linear-gradient(90deg, rgba(242, 151, 48, 0.0), #F29830 5%, #F29830 95%, rgba(242, 151, 48, 0.0)); /* root��pe�fonts */ --font-main: "Shippori Mincho", serif; --font-notes: "Local Noto Sans JP", "Noto Sans JP", sans-serif; --font-gothic: "Local Noto Sans JP", "Noto Sans JP", sans-serif; --font-en: "Cinzel Decorative", serif; --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-dark); 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(#8577BC 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-key3 { color: var(--color-main3); } .fc-key4 { color: var(--color-main4); } .fc-hanten { color: var(--color-light); } .fc-hanten2 { color: var(--color-dark); } .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-key4 { background: var(--color-main4); color: var(--color-dark); } .bg-key-sp { background: var(--gradient4); color: var(--color-light); } .bg-key1, .bg-key2, .bg-key3, .bg-key4 { padding: 0.1em 0.5em; } .ff-en { font-family: var(--font-en); text-transform: uppercase; font-weight: 700; } 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: 820px; } } 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: 40px; bottom: calc(40px + env(safe-area-inset-bottom)); right: 10px; z-index: 1000; transition: .3s; } @media (min-width:834px) { #page-top img { width: 60px; /* bottom: calc(0px + env(safe-area-inset-bottom)); */ right: 20px; } } #page-top a img:hover { transform: scale(1.05); } .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; } .separate-border { border-top: 2px solid transparent; border-image: var(--gradient5); border-image-slice: 1; margin: 2em auto 0; padding-top: 2em; } .separate-border-dot { border-top: 4px dotted var(--color-main1); margin: 2em auto 0; padding-top: 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); text-align: center; position: relative; } /* MRJS�_JSg���0�0�0�0�Q�R */ .period_zenhan::after { content: 'MRJS�2026.8.22 (W)^�9.16 (4l)'; display: inline-block; min-height: 1em; } .period_kohan::after { content: '�_JS�2026.9.17((g)^�10.12 (g�0]y)'; display: inline-block; min-height: 1em; } .period_all::after { content: 'hQg���2026.8.22 (W)^�10.12 (g�0]y)'; display: inline-block; min-height: 1em; } .period_gentei::after { content: 'g��P��[�2026.10.3 (W)^�10.12 (g�0]y)'; display: inline-block; min-height: 1em; } .ttl_menubook { font-size: var(--fs-LL); color: var(--color-main1); font-family: var(--font-en); text-transform: uppercase; font-weight: 700; border-bottom: 2px solid transparent; border-image: var(--gradient5); border-image-slice: 1; padding-bottom: .25em 2em; /* width: fit-content; */ text-align: center; margin: 2em auto .5em; max-width: 600px; } /* sec-kv-------------------------------------*/ #sec-kv { margin: 0 calc(50% - 50vw); } /* sec-Restaurant-------------------------------------*/ #sec_restaurant, #sec_goods { background: url(../img/pattern-main.webp), var(--gradient1); border-top: 8px solid transparent; border-image: var(--gradient5); border-image-slice: 1; } /* 'Y���QW01 */ .ttl_main1, .ttl_main2 { margin-bottom: var(--length-S); } .ttl_main1 h2, .ttl_main2 h2 { font-size: clamp(1.7rem, 1.200rem + 2.222vw, 3.2rem); font-weight: 700; line-height: 1; } .ttl_main1 h3, .ttl_main2 h3 { font-family: var(--font-en); font-weight: 400; font-size: clamp(3rem, 2.014rem + 4.207vw, 5.8rem); line-height: 1.1; text-transform: capitalize; } .ttl_main1 h2, .ttl_main1 h3 { color: var(--color-main1); } .ttl_main2 h2, .ttl_main2 h3 { color: var(--color-light); } .ttl_main1 h3::after { content: ''; display: block; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; margin-inline: auto; background-image: url('../img/deco-star-pink.svg'); } .ttl_main2 h3::after { content: ''; display: block; width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; margin-inline: auto; background-image: url('../img/deco-star-yellow.svg'); } @media (min-width:768px) { .ttl_main1 h3::after, .ttl_main2 h3::after { width: 60px; height: 60px; } } .ttl_main2 h2 { font-size: clamp(2.2rem, 2rem + 1vw, 3.2rem); font-weight: 700; color: var(--color-light); line-height: 1; } .ttl_main2 h2.ttl_concept { font-size: clamp(1.6rem, 1.107rem + 2.103vw, 3rem); line-height: 1.3; } .wrapper_wh { background: var(--color-light); padding: clamp(30px, 12.394px + 4.695vw, 80px) clamp(15px, -0.845px + 4.225vw, 60px); margin: var(--length-S) auto; box-shadow: 0 0 6px rgba(153, 125, 38, .6), 0 0 12px rgba(153, 125, 38, .3); width: 100%; border: 2px solid transparent; border-image: var(--gradient5); border-image-slice: 1; box-sizing: border-box; } @media (min-width:768px) { .wrapper_wh { box-shadow: 0 0 15px rgba(153, 125, 38, .6), 0 0 30px rgba(153, 125, 38, .3); } } .logo_canvas { width: min(70vw, 400px); } /* ;u�P\���QW01 */ .ttl_sub1 { width: 75vw; max-width: 560px; margin-block: 0 var(--length-S); } /* ;u�P\���QW02 */ .ttl_sub2 { width: 80vw; max-width: 500px; margin-block: var(--length-XS); } .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-family: var(--font-en); 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: 0.5em 0 1em; transition: max-height 0.5s ease; } .ttl-timetable { font-weight: 700; font-size: var(--fs-L); color: var(--color-light); line-height: 1; margin-block: var(--length-XS); background: var(--gradient5); padding: .3em .5em .4em; } .ttl-sub-timetable { font-size: 1.8rem; font-weight: 700; line-height: 1.4; color: var(--color-dark); padding: .3em 0; margin-bottom: .5em; } .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, 380px); margin-block: 2em; /* filter: drop-shadow(3px 3px 0px 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; padding: var(--length-XXS); border: 2px solid #d00000; width: fit-content; font-weight: 700; color: #d00000; background: var(--color-light); } .cencel_notice p { text-align: left; margin-left: 1em; text-indent: -1em; } /* sec-collabomenu-------------------------------------*/ #sec_collabomenu { background: var(--gradient3); border-top: 8px solid transparent; border-image: var(--gradient5); border-image-slice: 1; } .radius_top { border-radius: var(--length-XS) var(--length-XS) 0 0; padding-bottom: .5em; } .radius_btm { border-radius: 0 0 var(--length-XS) var(--length-XS); } /* sec-stay-------------------------------------*/ #sec_stay { background: var(--gradient2); border-top: 8px solid transparent; border-image: var(--gradient5); border-image-slice: 1; } .reserve-container { background: var(--gradient1); padding: clamp(15px, -7.887px + 6.103vw, 80px); margin: var(--length-S) auto; box-shadow: 0 0 15px rgba(0, 0, 0, .8); width: 100%; box-sizing: border-box; } .member_area { border: 3px solid var(--color-main3); } .ippan_area { border: 3px solid var(--color-main2); } .room_price { font-family: var(--font-en); font-weight: 700; font-size: clamp(2.4rem, 1.837rem + 2.404vw, 4rem); margin-bottom: 1em; } .wrapper_tokuten-bf { background: var(--gradient3); padding: clamp(20px, 5.915px + 3.756vw, 60px) clamp(15px, 9.718px + 1.408vw, 30px); margin: var(--length-S) auto; box-shadow: 0 0 15px rgba(0, 0, 0, .8); width: 100%; max-width: 700px; box-sizing: border-box; } /* �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: 4px dotted var(--color-main1); } .ttl-menu-section { font-family: var(--font-en); font-size: clamp(3.2rem, 2.425rem + 3.305vw, 5.4rem); color: var(--color-main1); text-transform: capitalize; line-height: 1.2; font-weight: 400; } .ttl-menu-section-latte { font-family: var(--font-en); font-size: clamp(2.4rem, 1.344rem + 4.507vw, 5.4rem); color: var(--color-main1); text-transform: capitalize; line-height: 1.2; font-weight: 400; } .ttl-menu-period { color: var(--color-dark); display: inline-block; font-size: clamp(1.6rem, 1.389rem + 0.901vw, 2.2rem); font-weight: 700; padding: .1em .5em .2em; width: min(100%, 1000px); color: var(--color-light); margin: .3em auto; } .ttl_zenhan { background: var(--gradient-zenhan); } .ttl_kohan { background: var(--gradient-kohan); } .ttl_all-period { background: var(--gradient-all); } .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: 6px; right: clamp(12px, 3vw, 32px); width: 38px; height: 38px; z-index: 1; cursor: pointer; display: inline-block; box-sizing: border-box; background: var(--gradient6); border: 1px solid var(--color-light); } @media (min-width:768px) { .menu { top: 10px; width: 48px; height: 48px; } } /* ========================= 3,g�} ========================= */ .menu__line { position: absolute; left: 50%; width: 26px; /* �}n0w�U0 */ height: 4px; /* �}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: 9px; /* Nn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } .menu__line--center { top: 18px; /* -N.Yn0�}n0MOn��0�0�0�0�0�0 YH0_0�0����te � */ } .menu__line--bottom { top: 26px; /* 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, 0, 0, 0.8); 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); } /* ============== 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; }