��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #E73562; --color-main1-L: #FFEFF3; --color-main2: #329E97; --color-main2-L: #DFF0EF; --color-main3: #FEF894; --color-main3-L: #FFFCCA; --color-main4: #BEA27A; --color-main5: #FFE3EB; --color-main6: #ffff00; --color-dark: #000; --color-light: #fff; --color-link: #E73562; --color-ssp: #847F4F; --color-ranma-otoko: #0081CC; --color-ranma-onna: #E60012; /* root��pe�fonts */ --font-main: "M PLUS Rounded 1c", sans-serif; /* --font-deco: "Kaisei Decol", 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:"Coiny", system-ui; } /*qQ��� }*/ body { font-family: var(--font-main); font-weight: 500; font-style: normal; line-height: inherit; color: var(--color-dark); font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); background: var(--color-light); } /*Loading S0S0K0�0*/ /* Loading Block */ #loading { width: 100vw; height: 100vh; transition: all 1s; background-color: var(--color-dark); position: fixed; top: 0; left: 0; z-index: 999999; display: grid; place-content: center; place-items: center; } /* Hide Loading Block */ .loaded { opacity: 0; visibility: hidden; } /* loading anime �0�0�0o0loaderg0*/ .loader { width: 40px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(farthest-side, #0081CC 94%, #0000), radial-gradient(farthest-side, #6cb6e1 94%, #0000), #0081CC; background-position: center; background-repeat: no-repeat; animation: l4 1.5s infinite; } @keyframes l4 { 0% { background-size: 0 0, 0 0 } 30%, 50% { background-size: 0 0, 120% 120% } 80%, 100% { background-size: 120% 120%, 120% 120% } } /*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-key5 { color: var(--color-main5); } .fc-key6 { color: var(--color-main6); } .fc-hanten { color: var(--color-light); } .fc-hanten2 { color: var(--color-dark); } .ff-en { font-family: var(--font-en); } a { color: var(--color-link); text-decoration: underline; transition: .5s; } a:hover { color: var(--color-link); text-decoration: none; /* opacity: .7; */ } a:hover img { box-shadow: none; filter: none; } .notes { text-align: justify; font-family: var(--font-notes); width: fit-content; padding: 0; margin: 0 auto; } @media (min-width:768px) { .notes { box-sizing: initial; /*paddingR�0RgS*/ margin: 30px auto 0 auto; max-width: 800px; } } ul.notes li { font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); font-weight: normal; 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: 45px; bottom: 20px; right: 10px; z-index: 99999; transition: .3s; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2)); } @media (min-width:768px) { #page-top img { width: 55px; bottom: 40px; right: 20px; } } #page-top a img:hover { transform: scale(1.1); } .img-box-shadow { box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4); margin-bottom: 8px; } .img-filter-shadow { filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4)); } .txt-shadow{ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);; } .img-radius { border-radius: clamp(12px, 7.775px + 1.127vw, 24px); } .wide-max400, .wide-max500, .wide-max600, .wide-max700, .wide-max800, .wide-max900, .wide-max1000 { margin-inline: auto; } .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; } /*eQO��#�-------------------------------------*/ .nyukai { /* background: var(--color-light); */ /* border: 2px solid var(--color-ssp); */ /* padding: 1.5em; */ font-family: var(--font-main); margin: 0 auto 1em; color: var(--color-dark); } @media (min-width:768px) { .nyukai { max-width: 700px; /* padding: 2em; */ } } .btn-nyukai a { display: block; font-family: var(--font-main); font-size: 1.6rem; text-align: center; text-decoration: none; width: 60vw; 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: 500; */ } .btn-nyukai a:hover { outline-offset: 0px; transform: scale(1.1); } /* �0�0�0�09}�N-------------------------------------*/ .item-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; justify-content: center; margin: 2em auto; } @media (min-width:768px) { .item-wrapper { max-width: 800px; gap: 40px; } } .item-name { font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem); font-weight: 600; line-height: 1.2; margin: .5em; } .item-price { font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); font-weight: 600; line-height: 1.2; } .item-size,.item-material { /* font-family: var(--font-gothic); */ 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=�"; margin-right: .5em; } .item-material:before { content: ";� }Pg=�"; margin-right: .5em; } .item-ingredients { /* font-family: var(--font-gothic); */ font-size: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); font-weight: 400; line-height: 1.2; word-break: keep-all; } .item-ingredients::before { content: "0O(uPg�e 0"; display: block; margin: 1em 0 .5em; } /* KV-------------------------------------*/ .img-kv { margin: 0 auto; width: 100vw; } .img-kv img { object-fit: contain; } /*secqQ�-------------------------------------*/ .sec-container { margin: 0 auto; max-width: 1000px; padding: clamp(40px, 3vw, 60px) clamp(15px, 6vw, 80px); text-align: center; } /*sec-intro------------------------------------*/ #sec-intro{ background-image: url(../img/bg_dot_30.webp); background-repeat: repeat; background-color: var(--color-main4); } /*sec-room-------------------------------------*/ #sec-room { background: url(../img/bg_abstract_pink.webp); background-color: var(--color-main3); background-repeat: repeat-y; background-size: contain; } #sec-room .sec-container { margin: 0 auto; max-width: 1000px; padding: 0 15px 40px; text-align: center; } @media (min-width:768px) { #sec-room.sec-container { padding: 0 0 60px; } } .room_period { background: var(--color-main2); padding: clamp(30px, 3vw, 60px) clamp(20px, 6vw, 80px); margin: 0 calc(50% - 50vw) clamp(30px, 3vw, 60px); } .period { font-family: var(--font-en); font-size: clamp(1.8rem, 1.166rem + 2.704vw, 3.6rem); color: var(--color-light); text-transform: capitalize; } .period span { font-size: 130%; } .btn-wrapper { display: flex; flex-direction: column; justify-content: center; gap: 15px; margin: 1em auto .5em; } @media (min-width:480px) { .btn-wrapper { display: flex; flex-direction: row; gap: 30px; margin: 2em auto .5em; } } .btn-wrapper img { max-width: 70vw; } @media (min-width:768px) { .btn-wrapper img { max-width: 360px; } } .btn-wrapper a img { filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.4)); transition: .2s ease-in; } .btn-wrapper a:hover img { filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4)); transform: scale(1) translate(3px, 3px); } .room_detail_wrapper{ background: var(--color-light); border-radius: clamp(20px, 1.5vw, 30px); max-width: 1000px; position: relative; padding: clamp(40px, 2vw, 60px) clamp(15px, 6vw, 80px); /* �!�0�0�0�0;u�P�0 Nk0o00�QW0 */ margin-top: clamp(60px, 3vw, 90px); } /* �0�0�0�0�0�0�0 */ .ttl-main{ position: absolute; top: clamp(-40px, -2vw, -60px); left: 50%; transform: translateX(-50%); z-index: 10; line-height: 1; } .ttl-main img{ display: block; width: clamp(300px, 80vw, 900px); height: auto; } /* �0�0�0�0�0hQSO�0�0�0�0�0;u�Pn0 N~0g0 NR0�0 */ .room_detail_inner{ padding-top:clamp(50px, 6vw, 110px); } /* �0�0�0�0�0�0 */ .sub-ttl, .sub-ttl2{ text-align: center; } .sub-ttl img{ width: 60vw; height: auto; max-width: 320px; margin-block: clamp(30px, 3vw, 60px); } .sub-ttl2 img{ width: 75vw; height: auto; max-width: 650px; margin-block: clamp(40px, 4vw, 80px); } .refer_wrapper_member, .refer_wrapper_ippan{ padding: clamp(12px, 3vw, 40px); border-radius: 20px; margin: clamp(15px, 3vw, 40px) auto; } .refer_wrapper_member{ border: 4px solid var(--color-main1); background: var(--color-main1-L); } .refer_wrapper_ippan{ border: 4px solid var(--color-main2); background: var(--color-main2-L); } .room-price{ font-family: var(--font-en); font-size: clamp(2.8rem, 2.518rem + 1.202vw, 3.6rem); } .amenity-wrapper{ margin:clamp(30px, 3vw, 60px) auto; max-width: 800px; display: grid; gap: clamp(40px, 25.915px + 3.756vw, 80px); grid-template-columns: repeat(1, 1fr); justify-content: center; } @media (min-width:768px){ .amenity-wrapper{ display: grid; grid-template-columns: repeat(2, 1fr); justify-content: space-between; } } #sec-drink { background: url(../img/bg_abstract_blue.webp); background-color: var(--color-main5); background-repeat: repeat-y; background-size: contain; border-top: 8px solid var(--color-main4); } #sec-drink .sec-container { margin: 0 auto; max-width: 1000px; padding: 20px 15px 30px; text-align: center; } @media (min-width:768px) { #sec-drink .sec-container { padding: 60px 0; } } /*Hr)jh��-------------------------------------*/ #publisher { /* color: var(--color-light); */ padding: 2em 0 1em; background: var(--color-main3); } #publisher img { width: 70vw; max-width: 360px; } .publisher-site { font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem); margin: 2em 0; } .publisher-site a { color: var(--color-dark); text-decoration: underline; } .publisher-name { font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem); } /*footer-------------------------------------*/ footer { font-family: var(--font-main); color: var(--color-light); padding: 2em 1em; margin: 0 auto; text-align: center; background: var(--color-main2); /* 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:768px) { .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:768px) { .sns-nameE { font-size: 3rem; } } .sns-nameJ { text-align: center; font-weight: 500; font-size: 1.6rem; line-height: 1.4; } @media (min-width:768px) { .sns-nameJ { font-size: 2.2rem; } } .sns-ico-set { display: flex; gap: 16px; justify-content: center; margin: 20px auto 30px auto; } .sns-ico-set>li>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:768px) { .sns-ico-set { gap: 30px; } } .sns-ico-set img { width: calc(100vw / 10); max-width: 40px; height: auto; } @media (min-width:768px) { .sns-ico-set img { width: 50px; } } .notes-foot { font-size: 1.3rem; line-height: 1.6; margin: 0 auto; width: fit-content; } @media (min-width:768px) { .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:768px) { .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:768px) { .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-main6); } .copyright { text-align: center; font-size: 1.2rem; } @media (min-width:768px) { .copyright { font-size: 1.4rem; } }