��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #4B2D23; --color-main2: #000000; --color-dark: #2d0b00; --color-light: #FFF; --color-link: #ff8f17; --color-ssp: #847F4F; /* root��pe�gradient */ --grad-angle: 90deg; --grad-bg-blue: linear-gradient(var(--grad-angle), #29406b 10%, #447299 50%, #29406b 90%); --grad-bg-beige: linear-gradient(var(--grad-angle), #ffffff, #fbeacb 50%, #ffffff); --grad-gold1: linear-gradient(var(--grad-angle), #f0b33c 0%, #f7e3b0 25%, #bc843a 60%, #e7ca90 87%, #f8e6ae 100%); --grad-gold1-vertical: linear-gradient(180deg, #f0b33c 0%, #f7e3b0 25%, #bc843a 60%, #e7ca90 87%, #f8e6ae 100%); --grad-gold2: linear-gradient(135deg, #c28c59 0%, #dcae7a 10%, #9b7a5b 20%, #f6c68b 30%, #d5a36f 40%, #713c1d 53%, #f6c68b 64%, #2a160c 74%, #c28c59 83%, #713c1d 100%); --grad-d-blue: linear-gradient(var(--grad-angle), #000017, #1e2b4e 50%, #000017); --grad-d-brown: linear-gradient(var(--grad-angle), #2d0b00, #4b2319 50%, #2d0b00); /* root��pe�fonts */ --font-main: "Local Noto Serif JP", "Noto Serif JP", serif; --font-gothic: "Local Noto Sans JP", "Noto Sans JP", sans-serif; /* root��pe�length */ --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); /* root��pe�font-size */ --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); /* root��pe�menu-offset */ --header-height: 50px; --anchor-offset: 90px; } /* PC�0�0ؚU0 */ /* @media (min-width: 834px) { :root { --header-height: 70px; } } */ /*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 */ } /* navؚU0R */ /* @media (min-width:834px) { body { padding-top: 70px; } } */ /* �Q��0�0�0�0�0�0R�v�k */ .header-offset { scroll-margin-top: calc(var(--header-height) + 0px); } /*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(#29406b 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-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; */ } .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: 840px; } } 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-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; } /*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); } .collabo-logo{ width: min(80vw, 800px); } /* sec-intro/sec-room-menu/sec-lounge/sec-drink-------------------------------------*/ #sec-intro, #sec-room-menu, #sec-lounge, #sec-drink { background-image: url(../img/main_pattern.webp), var(--grad-bg-blue); background-repeat: repeat, no-repeat; background-position: left top, center; background-size: auto, cover; position: relative; padding: var(--length-M) var(--length-XS); border-top: clamp(5px, 1.479px + 0.939vw, 15px) solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; color: var(--color-light); } /* sec-illust/#sec-rooms/#sec-hall--------------------------------*/ #sec-illust, #sec-rooms, #sec-hall { background: var(--grad-bg-beige); position: relative; padding: var(--length-M) var(--length-XS); border-top: clamp(5px, 1.479px + 0.939vw, 15px) solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; } .ttl_period{ width: min(45vw, 240px); } /* ̀of�0�0�0 */ .logo_bg_wh, .logo_bg_br { background-size: contain; background-repeat: no-repeat; background-position: center center; } .logo_bg_wh, .logo_bg_br { background-image: url(../img/mark_wh.svg); } .logo_bg_br { background-image: url(../img/mark_br.svg); } /* �0�0�0�NM0�0�0�0�0��#� */ .ball_frame { width: 100%; box-sizing: border-box; max-width: 1000px; margin: var(--length-M) auto; text-align: center; } .frame_general1, .frame_general2 { width: 100%; box-sizing: border-box; max-width: 1000px; margin: var(--length-M) auto; filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5)); text-align: center; } .ball_frame, .frame_general1, .frame_general2 { color: var(--color-light); } .ball_frame_top img, .ball_frame_btm img { width: 100%; height: auto; } .ball_frame_middle { padding: 0 clamp(15px, -14.930px + 7.981vw, 100px); background-size: 100%; background-repeat: repeat-y; } #room1 .ball_frame_middle { background-image: url(../img/room1_middle_sp.webp) } #room2 .ball_frame_middle { background-image: url(../img/room2_middle_sp.webp) } #room3 .ball_frame_middle { background-image: url(../img/room3_middle_sp.webp) } #room4 .ball_frame_middle { background-image: url(../img/room4_middle_sp.webp) } #room5 .ball_frame_middle { background-image: url(../img/room5_middle_sp.webp) } #room6 .ball_frame_middle { background-image: url(../img/room6_middle_sp.webp) } .frame_general1>.ball_frame_middle { background-image: url(../img/general1_middle_sp.webp) } .frame_general2>.ball_frame_middle { background-image: url(../img/general2_middle_sp.webp) } @media (min-width:430px) { #room1 .ball_frame_middle { background-image: url(../img/room1_middle.webp) } #room2 .ball_frame_middle { background-image: url(../img/room2_middle.webp) } #room3 .ball_frame_middle { background-image: url(../img/room3_middle.webp) } #room4 .ball_frame_middle { background-image: url(../img/room4_middle.webp) } #room5 .ball_frame_middle { background-image: url(../img/room5_middle.webp) } #room6 .ball_frame_middle { background-image: url(../img/room6_middle.webp) } .frame_general1>.ball_frame_middle { background-image: url(../img/general1_middle.webp) } .frame_general2>.ball_frame_middle { background-image: url(../img/general2_middle.webp) } } .date_period { font-size: clamp(1.6rem, 1.037rem + 2.404vw, 3.2rem); font-weight: 700; padding-bottom: 1em; } .date_period span { font-size: 120%; } @media (min-width:640px) { .date_period span { font-size: 140%; } } .date_period::after { content: ""; display: block; width: 100%; height: 8px; margin-top: .12em; background: url("../img/line_gold.svg") center / 100% auto no-repeat; } /* &q6��0�0�0�0 */ .frame_brown { position: relative; width: 100%; max-width: 1000px; box-sizing: border-box; margin: var(--length-M) auto; padding: var(--length-S) clamp(15px, 8vw, 100px); background: var(--grad-d-brown); color: var(--color-light); text-align: center; filter: drop-shadow(0 0 6px rgba(60, 25, 0, 0.5)); /* YtP�} */ border: clamp(4px, 1.887px + 0.563vw, 10px) solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; } /* &q6��0�0�0�0 �QtP�} */ .frame_brown::before { content: ""; position: absolute; inset: clamp(6px, 0.56vw, 12px); border: 2px solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; pointer-events: none; } /* Nl(u�0�0�0�0�0�0�0 */ .ttl_label_gold { background: var(--grad-gold1); padding: .3em .5em; display: block; color: var(--color-dark); margin: 0 auto 1em; width: fit-content; line-height: 1.2; font-size: clamp(2.2rem, 1.918rem + 1.202vw, 3rem); font-weight: 600; } @media (min-width:768px) { .ttl_label_gold { padding: .3em 1em; } } .ttl_label_brown { width: fit-content; background: var(--color-dark); padding: .1em .8em .2em; line-height: 1; display: block; color: var(--color-light); border-radius: 9999px; border: 1px solid var(--color-light); margin: 0 auto .2em; width: fit-content; font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); } a.btn_links img { width: min(70vw, 360px); display: block; margin: 2em auto 0; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); transition: .3s ease; } .ttl_main_line { max-width: 800px; display: block; margin-inline: auto; } .grid-illustration { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); } .grid-illustration img { filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)); } /* sec-rooms */ .room_menu_grid { background: url(../img/mark_wh_w_sp.svg); background-size: contain; background-position: center center; background-repeat: no-repeat; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: var(--length-S) 0; max-width: 800px; margin-inline: auto; } @media (min-width:640px) { .room_menu_grid { background: url(../img/mark_wh_w.svg); background-size: contain; background-position: center center; background-repeat: no-repeat; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: var(--length-M) 0; } } .room_menu_grid img { filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.7)); } .img_gold_shadow { border: 4px solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } .amenity_grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width:768px) { .amenity_grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 20px; } .amenity_grid div:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; } .amenity_grid div:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; } .amenity_grid div:nth-of-type(3) { grid-area: 2 / 1 / 3 / 3; } .amenity_grid div:nth-of-type(4) { grid-area: 3 / 1 / 4 / 2; } .amenity_grid div:nth-of-type(5) { grid-area: 3 / 2 / 4 / 3; } } .amenity_name { display: block; width: fit-content; margin: .5em auto; padding: .3em 1em .4em; font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--color-light); border: clamp(2px, 1.296px + 0.188vw, 4px) solid transparent; border-radius: 9999px; background: linear-gradient(var(--color-main1), var(--color-main1)) padding-box, var(--grad-gold1) border-box; } .ttl_toys { position: relative; display: block; width: fit-content; margin-inline: auto; padding-inline: 2.2em; font-size: clamp(1.8rem, 1.307rem + 2.103vw, 3.2rem); line-height: 1.2; text-align: center; } .ttl_toys::before, .ttl_toys::after { content: ""; position: absolute; top: 50%; width: 1.4em; aspect-ratio: 1 / 1; background: url(../img/deco1.svg) no-repeat center / contain; transform: translateY(-50%); } .ttl_toys::before { left: 0; } .ttl_toys::after { right: 0; } .about_gacha { padding: 1em .8em; background: var(--color-light); margin: var(--length-XS) auto; color: var(--color-main2); font-family: var(--font-gothic); max-width: 800px; } .ttl_gold_round { display: block; margin: .5em auto; padding: .25em 1.5em .35em; font-size: clamp(1.6rem, 1.177rem + 1.803vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--color-dark); border: 3px solid transparent; border-image-slice: 1; border-radius: 9999px; background: var(--grad-gold1) padding-box, var(--grad-gold1-vertical) border-box; } @media (min-width:640px) { .ttl_gold_round { width: fit-content; padding: .25em 3em .35em; } } .grid-col-2, .grid-col-3 { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 800px; margin: 1em auto; } @media (min-width:640px) { .grid-col-2 { grid-template-columns: repeat(2, 1fr); gap: 40px; } .grid-col-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .item-card { margin: 0 auto var(--length-XXS); text-align: center; } .item-name { font-weight: 700; 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.3; font-weight: 400; margin-top: .5em; word-break: normal; overflow-wrap: normal; } .item-ingredients span{ white-space: nowrap; } .item-ingredients::before { content: "0O(uPg�e 0"; display: block; margin-bottom: .2em; } .item-size, .item-notes { 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�"; } /*slick�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; } /* �0�0�0�0;u�Pn0Bf */ .ttl-slide img { max-width: 500px; margin-inline: auto; } .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; margin-bottom: var(--length-XS); border: clamp(3px, 1.944px + 0.282vw, 6px) solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } .name-lounge { display: block; width: fit-content; margin: .5em auto; padding: .25em 1.5em .35em; font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--color-dark); border: 3px solid transparent; border-image-slice: 1; border-radius: 9999px; background: var(--grad-gold1) padding-box, var(--grad-gold1-vertical) border-box; } .slick-prev, .slick-next { top: 36%; width: clamp(24px, 15.549px + 2.254vw, 48px); /* �wpS;u�P(u */ height: clamp(24px, 15.549px + 2.254vw, 48px); /* �wpS;u�P(u */ z-index: 10; } @media screen and (min-width:600px) { .slick-prev, .slick-next { top: 45%; } } @media screen and (min-width:834px) { .slick-prev, .slick-next { top: 45%; } } @media screen and (min-width:600px) { .slick-prev { left: -52px; } .slick-next { right: -52px; } } .slick-prev:before, .slick-next:before { /* �wpS�0�0�0 */ /* color: var(--color-main1); font-size: 30px; */ content: none; } /* @media screen and (min-width:600px) { .slick-prev:before, .slick-next:before { font-size: 36px; } } */ /* �wpS;u�Pk0Y0�0 */ .slick-prev img, .slick-next img { display: block; width: 100%; height: auto; } .slick-dots li button:before { font-size: 10px; top: 5px; left: 50%; transform: translateX(-50%); color: #000; } .slick-dots li.slick-active button:before { opacity: 1; color: var(--color-light); } /*end�0�0�0�0�0*/ /*IKEPRI259}�N-------------------------------------*/ #aboutikepri25 { background: var(--color-main2); color: var(--color-light); } #aboutikepri25 .sec-container { margin-inline: auto; padding: var(--length-XS) var(--length-XXS); text-align: center; width: min(100%, 1000px); } .ttl-about-ikepri { margin: 1em 0 3em 0; } .ttl-about-ikepri img { width: 80vw; max-width: 500px; } .ikepri-description { font-size: 1.6rem; font-weight: 600; } .greeting-haruki { display: flex; flex-direction: column; gap: 0; margin: 2em auto 1em auto; } @media screen and (min-width:834px) { .greeting-haruki { flex-direction: row-reverse; max-width: 780px; } } .haruki-img { margin: 0 auto; align-self: center; } .haruki-img img { width: 40vw; } @media screen and (min-width:834px) { .haruki-img img { height: 280px; width: auto; } } .haruki-text { padding: 1em; color: var(--color-dark); background-color: #f5f7cb; border-radius: 1em; /* font-family: var(--font-serif); */ } @media screen and (min-width:834px) { .haruki-text { position: relative; display: inline-block; margin-right: 30px; padding: 1.5em 2em; border-radius: 1em; background-color: #f5f7cb; text-align: justify; font-size: 1.6rem; line-height: 1.5; } .haruki-text::after { content: ""; position: absolute; top: 40%; right: 0; border-style: solid; border-width: 10px 0 10px 30px; border-color: transparent transparent transparent #f5f7cb; translate: 100% -50%; transform: skew(0, -15deg); transform-origin: left; } } .ttl-haruki { font-size: 2rem; font-weight: 800; line-height: 1.4; margin-bottom: 1em; } .ttl-haruki span { font-size: 80%; } .txt-haruki { font-weight: 600; text-align: justify; } .twitter-area { margin: 2em auto 1em auto; width: 90vw; } @media screen and (min-width: 834px) { .twitter-area { max-width: 680px; } } .ttl-twitter { width: 40vw; margin: 1em auto; display: block; } @media screen and (min-width: 600px) { .ttl-twitter { max-width: 300px; } } .timeline { margin: 0 auto 2em auto; width: 100%; position: relative; } @media screen and (min-width: 834px) { .timeline { max-width: 600px; } } /* X�W�0��0n0E^�0��k0T�0[0�0 */ .timeline .twitter-timeline, .timeline iframe { width: 100% !important; min-width: 100% !important; } /* ��0��01YWeBfn0�N�fh�:y */ .timeline-fallback { min-height: 220px; padding: 24px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; background: #000; /* border: 1px solid rgba(255, 255, 255, 0.5); */ color: #FFF; border-radius: 20px; } .timeline-fallback__text { margin: 0 0 12px; line-height: 1.7; } .timeline-fallback__link a { display: inline-block; padding: 0.8em 1.4em; border: 1px solid #FFF; color: #FFF; text-decoration: none; transition: opacity 0.3s; } .timeline-fallback__link a:hover { opacity: 0.7; } .ttl-loungeuse-note { font-size: 1.8rem; font-weight: 700; text-align: center; color: var(--color-light); margin: 3em 0 0 0; line-height: 1.1; } /*Hr)jh��-------------------------------------*/ #publisher { background: var(--grad-bg-beige); position: relative; padding: var(--length-M) var(--length-XS); border-top: clamp(5px, 1.479px + 0.939vw, 15px) solid transparent; border-bottom: clamp(5px, 1.479px + 0.939vw, 15px) solid transparent; border-image: var(--grad-gold2); border-image-slice: 1; } #publisher img { width: min(80vw, 500px); } .publisher-site { font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem); margin: 2em 0; } .publisher-site a { color: var(--color-main2); } .publisher-name { font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem); color: var(--color-main2); } /*footer-------------------------------------*/ footer { color: var(--color-main2); padding: 2em .5em; margin: 0 auto; text-align: center; background: #e4e4e4; /* border-top: 1px solid var(--color-light); */ } .hotel-name { text-align: center; font-weight: 700; font-size: 1.6rem; line-height: 1.4; } @media (min-width:834px) { .hotel-name { font-size: 2.2rem; } } .sns-nameE { text-align: center; font-weight: 700; font-size: 2.2rem; line-height: 1.4; } @media (min-width:834px) { .sns-nameE { font-size: 3rem; } } .sns-nameJ { text-align: center; font-weight: 500; font-size: 1.6rem; line-height: 1.4; } @media (min-width:834px) { .sns-nameJ { font-size: 2.2rem; } } .sns-ico-set { display: flex; gap: 12px; justify-content: center; margin: 20px auto 30px auto; } .sns-ico-set>li>span { color: var(--color-main2); 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-main2); 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-main2); border-right: 1px solid var(--color-main2); } } .hotel-links a:hover { color: var(--color-link); } .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.9); */ /* 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: 6px; right: clamp(12px, 3vw, 32px); width: 38px; height: 38px; z-index: 1; cursor: pointer; display: inline-block; box-sizing: border-box; background: rgba(0, 19, 55, 0.8); } @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, 19, 55, 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: uppercase; width: min(90vw, 1000px); font-weight: 400; margin-inline: auto; } .ttl-nav-main { text-align: center; } .ttl-nav-main img { max-width: 600px; margin-bottom: 1em; } .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: 5px; 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.8rem, 1.448rem + 1.502vw, 2.8rem); font-weight: 600; border-top: 1px solid #515b7c; } .nav-primary:last-child { border-bottom: 1px solid #515b7c; } .nav-primary a::before { background-image: url(../img/triangle_primary.svg); } /* ===== secondary ===== */ .nav-secondary { margin-left: 1em; font-size: clamp(1.4rem, 1.118rem + 1.202vw, 2.2rem); } .nav-secondary a { padding: var(--length-XXXS) 0 var(--length-XXXS) 1em; } .nav-secondary a::before { background-image: url(../img/triangle_secondary.svg); } .gnav__menu__item a:hover { color: var(--color-link); } /* ============== 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; }