��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #F18101; --color-main1-d: #EC6800; --color-main1-l: #FFE8CE; --color-dark: #000; --color-light: #FFF; --color-link: #F18101; --color-ssp: #847F4F; --color-karasuno: #FFA500; --color-aobajosai: #75EAC3; --color-nekoma: #E2263A; --color-inarizaki: #6E1E2F; --gradient-room1: linear-gradient(90deg, #FFA500 0% 50%, #75EAC3 50% 100%); --gradient-room2: linear-gradient(90deg, #FFA500 0% 50%, #6E1E2F 50% 100%); --gradient-room3: linear-gradient(90deg, #FFA500 0% 50%, #E2263A 50% 100%); /* root��pe�fonts */ --font-main: "IBM Plex Sans JP", sans-serif; --font-gothic: "IBM Plex Sans JP", sans-serif; --font-en: "Sofia Sans Condensed", sans-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(10px, 6.479px + 0.939vw, 20px); --length-XXXS: clamp(8px, 7.296px + 0.188vw, 10px); --fs-SS: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); --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); --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(#F18101 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-d); } .fc-key2 { color: var(--color-main1); } .fc-hanten { color: var(--color-light); } .fc-hanten2 { color: var(--color-dark); } .ff-en { font-family: var(--font-en); text-transform: uppercase; font-weight: 800; } a { color: var(--color-link); text-decoration: none; transition: .5s; } a:hover { color: var(--color-link); text-decoration: underline; /* opacity: .7; */ } .link-text a { color: var(--color-dark); 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 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.5); margin-bottom: 8px; } .img-filter-shadow { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5)); } .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; } .wide-max400, .wide-max500, .wide-max600, .wide-max700, .wide-max800, .wide-max900, .wide-max1000 { margin-inline: auto; } .wide-max400 { width: min(80vw, 400px); } .wide-max500 { width: min(80vw, 500px); } .wide-max600 { width: min(80vw, 600px); } .wide-max700 { width: min(80vw, 700px); } .wide-max800 { width: min(80vw, 800px); } .wide-max900 { width: min(80vw, 900px); } .wide-max1000 { width: min(80vw, 1000px); } /*secqQ�-------------------------------------*/ .sec-container { margin-block: 0; margin-inline: auto; max-width: 1000px; padding: 0; text-align: center; position: relative; } /* sec-kv-------------------------------------*/ #sec-kv { margin: 0 calc(50% - 50vw); } /* sec-intro-------------------------------------*/ #sec-intro { background: url(../img/intro_bg.webp); background-position: center right; background-size: cover; background-repeat: no-repeat; position: relative; padding: var(--length-L) var(--length-XS); } /* sec-ikepri25-------------------------------------*/ #sec-ikepri25 { border: 10px solid var(--color-dark); background: url(../img/pattern-main.webp); background-repeat: repeat; background-size: 30px; } @media (min-width:834px) { #sec-ikepri25 { border: 20px solid var(--color-dark); background-size: 40px; } } #sec-ikepri25 .sec-container { padding: 0 var(--length-XXS) var(--length-M); } /* sec-ikepri CANVAS-------------------------------------*/ #sec-ikepricanvas { border: 10px solid var(--color-main1); background: url(../img/pattern-main-l.webp), var(--color-dark); background-repeat: repeat; background-size: 30px; color: var(--color-light); } @media (min-width:834px) { #sec-ikepricanvas { border: 20px solid var(--color-main1); background-size: 40px; } } #sec-ikepricanvas .sec-container { padding: 0 var(--length-XXS); } .ttl-colabo-25, .ttl-colabo-canvas { overflow: hidden; padding: var(--length-S) 0; background-repeat: no-repeat; background-position: 0 0; background-size: 50%; margin: 0; display: grid; place-content: center; place-items: center; } .ttl-colabo-25 { background-color: var(--color-dark); background-image: url(../img/halftone_or.webp); } .ttl-colabo-canvas { background-color: var(--color-main1); padding: var(--length-S) 0; background-image: url(../img/halftone_bk.webp); } @media (min-width:834px) { .ttl-colabo-25, .ttl-colabo-canvas { background-size: contain; } } .ttl-colabo-25 img, .ttl-colabo-canvas img { width: min(70vw, 900px); } .ttl-en-ball { text-transform: uppercase; font-size: clamp(4.2rem, 3.285rem + 3.906vw, 6.8rem); font-family: var(--font-en); display: block; line-height: 1; margin-top: 1.5em; position: relative; font-weight: 800; } .ttl-en-ball::after { display: block; content: url(../img/ball.webp); margin-inline: auto; margin-bottom: .25em; } .ikepri-period { font-family: var(--font-en); font-size: clamp(2.4rem, 1.766rem + 2.704vw, 4.2rem); line-height: 1; font-weight: 800; } .ikepri-period span { font-size: clamp(4.2rem, 3.285rem + 3.906vw, 6.8rem); } .frame-chusen { background: var(--color-main1); padding: var(--length-S) var(--length-XXS); border: 5px solid var(--color-dark); margin-block: var(--length-S); color: var(--color-light); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); } .frame-ippan { background: var(--color-dark); padding: var(--length-S) var(--length-XXS); border: 5px solid var(--color-main1); margin-block: var(--length-S); color: var(--color-light); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); } @media (min-width:640px) { .frame-chusen { padding: var(--length-M); border: 10px solid var(--color-dark); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3); } .frame-ippan { padding: var(--length-M); border: 10px solid var(--color-main1); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3); } } .ttl-underline-wh, .ttl-underline-or { font-weight: 600; font-size: clamp(2.4rem, 2.118rem + 1.202vw, 3.2rem); display: inline-block; line-height: 1.2; margin-bottom: 1em; } .ttl-underline-wh::after, .ttl-underline-or::after { content: ""; display: block; height: 5px; } .ttl-underline-wh { color: var(--color-light); } .ttl-underline-wh::after { background-color: var(--color-light); } .ttl-underline-or { color: var(--color-main1-d); } .ttl-underline-or::after { background-color: var(--color-main1-d); } .ttl-en-underline-or { font-size: clamp(2.8rem, 2.307rem + 2.103vw, 4.2rem); font-family: var(--font-en); color: var(--color-dark); display: inline; text-transform: uppercase; background: linear-gradient(transparent 70%, var(--color-main1) 70%, var(--color-main1) 85%, transparent 0%); font-weight: 800; } a.refer-btn img { width: min(70vw, 320px); margin-block: 2em; filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.4)); } a.refer-btn img:hover { transform: translate(3px, 3px) scale(1); filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); } a.btn-orange { display: block; width: min(70vw, 320px); background: var(--color-main1); color: var(--color-light); text-decoration: none; padding: 1.5em .5em; margin-inline: auto; margin-block-start: 1.5em; border-radius: 999px; border: 1px solid var(--color-light); line-height: 1; } a.btn-orange:hover { background-color: var(--color-light); color: var(--color-main1-d); border: 1px solid var(--color-main1); } .grid-illustration { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-block: var(--length-XS); } @media (min-width:640px) { .grid-illustration { grid-template-columns: repeat(4, 1fr); } } .grid-r-2 { display: grid; gap: clamp(30px, 33.521px + -0.939vw, 20px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-r-4 { display: grid; gap: clamp(30px, 33.521px + -0.939vw, 20px); grid-template-columns: repeat(2, 1fr); margin-top: 16px; } @media (min-width:640px) { .grid-r-4 { grid-template-columns: repeat(4, 1fr); } } .grid-r-2 img, .grid-r-4 img { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5)); } .ttl-category-bk, .ttl-category-or { overflow: hidden; padding: var(--length-XS) 0; background-repeat: no-repeat; background-position: 0 0; background-size: 25%; margin: 2em 0 1em; display: grid; place-content: center; place-items: center; } .ttl-category-bk { background-color: var(--color-dark); background-image: url(../img/halftone_or.webp); } .ttl-category-or { background-color: var(--color-main1); background-image: url(../img/halftone_wh.webp); } .ttl-category-bk h2, .ttl-category-or h2 { text-transform: uppercase; font-size: clamp(3.8rem, 2.744rem + 4.507vw, 6.8rem); font-family: var(--font-en); color: var(--color-light); text-align: center; line-height: 1; font-weight: 800; } @media (min-width:834px) { .ttl-category-bk, .ttl-category-or { background-size: contain; } } .room-btn-container { display: grid; gap: 12px; margin-block: 2em; } @media (min-width:640px) { .room-btn-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } } a.btn-rooms:hover { transform: rotateY(30deg); } .room-detail { padding: var(--length-XXS) 0 var(--length-XS); background: var(--color-light); border: 5px solid transparent; margin-block: 2em; } @media (min-width:834px) { .room-detail { border: 10px solid transparent; margin-block: 3em; } } #room1 { border-image: var(--gradient-room1); border-image-slice: 1; } #room2 { border-image: var(--gradient-room2); border-image-slice: 1; } #room3 { border-image: var(--gradient-room3); border-image-slice: 1; } /* �0�0�0�0�0�0�0�0�0============ */ .simple-carousel { margin: 0 auto; padding: 1em .25em; background: var(--color-main1-l); } .simple-rail-wrap { position: relative; } .simple-rail { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 6px 4px 14px; scrollbar-width: none; -ms-overflow-style: none; } .simple-rail::-webkit-scrollbar { display: none; } /* ===== card ===== */ .simple-card { flex: 0 0 92%; max-width: 720px; scroll-snap-align: start; background: transparent; border: none; overflow: hidden; } .simple-media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; } .simple-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5)); } /* ===== navigation ===== */ .simple-rail-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .8); color: var(--color-light); font-size: 12px; display: grid; place-items: center; cursor: pointer; } .simple-prev { left: 5px; } .simple-next { right: 5px; } .simple-rail-nav.is-disabled { opacity: .3; pointer-events: none; } /* ===== tablet ===== */ @media (min-width:640px) { .simple-rail-nav { width: 42px; height: 42px; font-size: 15px; } .simple-card { flex-basis: 43%; max-width: none; } } /* ===== pc 2.5�g ===== */ @media (min-width:1024px) { .simple-card { flex-basis: 40%; max-width: none; } } .item-card { margin: 0 auto var(--length-S); text-align: center; color: var(--color-dark); } .item-name { font-weight: 600; font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); line-height: 1.4; margin-block: .5em .25em; } .item-price { font-weight: 600; font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); line-height: 1.4; } .item-caption { font-size: clamp(1.4rem, 1.330rem + 0.3vw, 1.6rem); line-height: 1.4; } .item-ingredients { font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); line-height: 1.2; font-weight: 400; } .item-ingredients::before { content: ";�O(uPg�e=�"; } .item-size { font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); font-weight: 400; line-height: 1.2; margin-top: .5em; } .item-size::before { content: ";��0�0�0=�"; } /*�0�0�0�0�0*/ .slide-items { width: min(80vw, 700px); margin: var(--length-S) auto; } .ttl-slide { text-align: center; font-family: var(--font-en); font-size: clamp(3rem, 1.944rem + 4.507vw, 6rem); color: var(--color-dark); display: inline; text-transform: uppercase; font-weight: 800; } .ttl-slide span { background: linear-gradient(transparent 70%, var(--color-main1) 70%, var(--color-main1) 85%, transparent 0%); } .img-slide img { height: auto; object-fit: cover; } .name-lounge { font-size: clamp(1.5rem, 1.183rem + 1.352vw, 2.4rem); font-weight: 700; text-align: center; margin: 10px 0 0; } .slick-prev, .slick-next { top: 40%; } @media screen and (min-width:600px) { .slick-prev, .slick-next { top: 45%; } } @media screen and (min-width:834px) { .slick-prev, .slick-next { top: 48%; } } @media screen and (min-width:600px) { /* PCg0n0�wpSMOn��te */ .slick-prev { left: -45px; } .slick-next { right: -30px; } } .slick-prev:before, .slick-next:before { /* �wpS�0�0�0 */ color: var(--color-main1); font-size: 24px; } @media screen and (min-width:600px) { .slick-prev:before, .slick-next:before { font-size: 36px; } } .slick-dots li button:before { font-size: 10px; top: 5px; left: 50%; transform: translateX(-50%); color: #333; } .slick-dots li.slick-active button:before { opacity: 1; color: var(--color-main1); } /*end�0�0�0�0�0*/ .capsule-inner { margin-block: var(--length-S) 0; padding-block: var(--length-S) var(--length-XS); border-top: 2px dotted var(--color-dark); } .capsule-inner img { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5)); } @media (min-width:640px) { .capsule-inner { border-top: 4px dotted var(--color-dark); } } .howto-toy { background: var(--color-light); padding: var(--length-XS); margin: var(--length-XS) auto; color: var(--color-dark); border: 2px solid var(--color-dark); } /*�0�0�0�0�0�0�0��#�*/ .btn-timetable { width: min(70vw, 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: 400; font-size: clamp(2.8rem, 2.727rem + 0.36vw, 3rem); color: var(--color-main1); line-height: 1; padding: .2em 0 0; } .ttl-sub-timetable { font-size: 1.8rem; font-weight: 700; line-height: 1.4; background: var(--color-light); color: var(--color-dark); padding: .3em 0; margin-bottom: .5em; } .box-open-hours { display: grid; grid-template-columns: repeat(1, 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: repeat(1, 1fr); font-size: 1.6rem; 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: clamp(240px, 70%, 320px); aspect-ratio: 320 / 67; background: url("../img/time-open.webp") 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.webp"); } .inner-bg-or { background: var(--color-main1-l); } .halftone-container { background: var(--color-light); padding: var(--length-S) var(--length-XS); margin: var(--length-S) auto; width: min(90vw, 1000px); background-image: url(../img/halftone_gray.webp); background-repeat: no-repeat; background-position: top center; background-size: 75%; } @media (min-width:834px) { .halftone-container { padding: var(--length-S) var(--length-M); } } .halftone-container h2, .halftone-container h3 { color: var(--color-dark); font-family: var(--font-en); text-align: center; text-transform: uppercase; line-height: 1; font-weight: 800; } .halftone-container h2 { font-size: clamp(3.2rem, 2.073rem + 4.808vw, 6.4rem); margin-bottom: var(--length-XS); } .halftone-container h3 { font-size: clamp(2rem, 1.296rem + 3.005vw, 4rem); } .menu-book { display: grid; grid-template-columns: repeat(1, 1fr); width: min(100%, 700px); margin-inline: auto; margin-bottom: var(--length-XS); gap: var(--length-XXS); } @media (min-width:640px) { .menu-book { grid-template-columns: repeat(2, 1fr); } } /* �0�0�0�0�0�0�0;u�P'Yϑ�0�0�0(u */ #menu-area { content-visibility: auto; contain-intrinsic-size: 3000px; } /* ===== �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 solid 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-light); text-transform: uppercase; line-height: 1.2; font-weight: 800; } .ttl-menu-period { color: var(--color-dark); display: inline-block; background: rgba(255, 255, 255, 0.85); font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); font-weight: 600; padding: .2em 1em; width: min(100%, 700px); border-radius: 999px; } .ttl-menu-number { color: var(--color-light); font-size: clamp(1.8rem, 1.589rem + 0.901vw, 2.4rem); font-weight: 600; 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-main1); } .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; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); 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: 3px; right: clamp(12px, 3vw, 32px); width: 48px; height: 48px; z-index: 1; cursor: pointer; display: inline-block; box-sizing: border-box; } @media (min-width:834px) { .menu { top: 10px; } } /* ========================= 3,g�} ========================= */ .menu__line { position: absolute; left: 50%; width: 40px; /* �}n0w�U0 */ height: 4px; /* �}n0*YU0 */ background: var(--color-light); transform: translateX(-50%); transition: transform .3s ease, opacity .3s ease, top .3s ease; } /* ========================= �}n0MOn����� � ========================= */ .menu__line--top { top: 12px; /* 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: 30px; /* 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; 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 40px; } } .gnav__menu { display: grid; grid-template-columns: repeat(1, 1fr); list-style: none; padding: 0; margin: 0; color: var(--color-light); text-transform: uppercase; gap: 10px; width: min(90vw, 1000px); font-weight: 400; } @media (min-width:1024px) { .gnav__menu { grid-template-columns: repeat(2, 1fr); gap: 60px; } } .gnav__menu ul.nav-ikepricanvas { margin-top: 2em; } @media (min-width:1024px) { .gnav__menu ul.nav-ikepricanvas { margin-top: 0; } } .ttl-nav-main { font-family: var(--font-en); font-size: clamp(2.4rem, 1.977rem + 1.803vw, 3.6rem); border-top: 1px solid var(--color-light); border-bottom: 1px solid var(--color-light); padding-block: var(--length-XXS); position: relative; padding-left: var(--length-XXXS); padding-right: calc(clamp(110px, 18vw, 200px) + 10px); margin-bottom: .5em; } @media (min-width:1024px) { .ttl-nav-main { padding-block: var(--length-XS); } } .ttl-nav-main::after { content: ""; position: absolute; top: 50%; right: var(--length-XXXS); translate: 0 -50%; /*.ttl-nav-mainn0padding-righth0T�0[0�0S0h0 */ width: clamp(110px, 18vw, 200px); aspect-ratio: 400 / 230; background-repeat: no-repeat; background-position: center; background-size: contain; } .nav-ikepri25 .ttl-nav-main::after { background: url("../img/logo_ikepri25.webp") no-repeat center/contain; } .nav-ikepricanvas .ttl-nav-main::after { background: url("../img/logo_canvas.webp") no-repeat center/contain; } .gnav__menu__item { margin: 0; font-family: var(--font-en); position: relative; } /* �0�0�0��_0�v */ .gnav__menu__item a { display: inline-block; padding: var(--length-XXS); color: var(--color-light); text-decoration: none; line-height: 1; /* cursor: pointer; */ position: relative; display: inline-block; padding-left: 1em; } .gnav__menu__item a span { font-weight: 400; margin-left: .5em; font-size: 90%; } .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; } /* ===== primary ===== */ .nav-primary { font-size: clamp(2rem, 1.648rem + 1.502vw, 3rem); font-weight: 700; } .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::before { background-image: url(../img/triangle_secondary.svg); } .gnav__menu__item a:hover { /* opacity: .6; */ color: var(--color-main1); } /* ============== NK0�0�k0u0�0c0h0�QY0 ============== */ /* .gnav__menu { opacity: 0; transform: translateY(-10px); } .gnav.is-open .gnav__menu__item { animation: gnavItem .1s ease forwards; } */ /* ============== 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; }