��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #B95545; --color-main1-L: #CD857A; --color-main2: #588388; --color-main2-L: #8EC0C5; --color-main3: #8C4712; --color-main3-M: #E3C0A5; --color-main3-L: #FEF6EC; --color-main4: #AD934A; --color-main5: #FFE3EB; --color-main6: #FFFDD8; --color-main7: #FFFF00; --color-dark: #262626; --color-light: #fff; --color-link: #B95545; --color-ssp: #847F4F; /* root��pe�gradident */ --grad-pk: linear-gradient(180deg, #FEF6EC 40%, #E3C0A5); --grad-br: linear-gradient(180deg, #8C4712 40%, #5D2F0C); --grad-rd: linear-gradient(180deg, #B95545 #CD857A 50%, #B95545); /* root��pe�fonts */ --font-main: "Shippori Mincho", serif; --font-notes: "M PLUS Rounded 1c", sans-serif; --font-gothic: "M PLUS Rounded 1c", sans-serif; --font-en: "EB Garamond", serif; } /*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-light); 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, #CD857A 94%, #0000), radial-gradient(farthest-side, #B95545 94%, #0000), #B95545; 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-key7 { color: var(--color-main7); } .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: clamp(20px, 12.958px + 1.878vw, 40px) auto 0; max-width: 820px; } 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.5); margin-bottom: 8px; } .img-filter-shadow { filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5)); } .txt-shadow { text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); ; } .img-radius { border-radius: clamp(12px, 7.775px + 1.127vw, 24px); } .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; } /*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: 800px; 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; } .btn-nyukai a:hover { outline-offset: 0px; transform: scale(1.1); } /* qQ��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-inner img { margin: 0 0 .5em; max-width: 600px; } .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, .item-notes { /* 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: normal; overflow-wrap: normal; } .item-ingredients span { white-space: nowrap; } .item-ingredients::before { content: "0O(uPg�e 0"; display: block; margin: 1em 0 .5em; } .img-shadow-radius { /* box-shadow: 0px 0px 20px rgba(140, 71, 18, 0.3); */ filter: drop-shadow(0px 0px 8px rgba(140, 71, 18, 0.6)); border-radius: clamp(12px, 7.775px + 1.127vw, 24px); } /* KV-------------------------------------*/ .img-kv { margin: 0 auto; width: 100vw; } .img-kv img { object-fit: contain; } /*secqQ�-------------------------------------*/ .sec-container { margin: 0 auto; width: 100%; max-width: 1000px; padding: clamp(40px, 3vw, 60px) clamp(15px, 6vw, 80px); text-align: center; } /*sec-kv------------------------------------*/ #sec-kv { background: var(--grad-pk); } /*sec-intro------------------------------------*/ #sec-intro { background: url(../img/pattern_bear.webp), var(--grad-br); background-repeat: repeat, repeat-x; background-size: 60px, contain; } #sec-intro .sec-container { padding: clamp(30px, 12.394px + 4.695vw, 80px) 15px; } .txt_period { font-size: clamp(2.2rem, 1.707rem + 2.103vw, 3.6rem); font-weight: 800; line-height: 1.2; margin: 1.5em auto; } /*sec-content-------------------------------------*/ #sec-content { background: url(../img/pattern_main.webp); background-repeat: repeat; background-size: clamp(40px, 25.915px + 3.756vw, 80px); background-attachment: fixed; } #sec-content .sec-container { padding: clamp(30px, 12.394px + 4.695vw, 80px) 15px; } .content_wrapper { width: 100%; background: rgba(255, 255, 255, 0.75); border-radius: clamp(50px, 32.394px + 4.695vw, 100px); border-style: solid; border-width: clamp(2px, 1.296px + 0.188vw, 4px); position: relative; padding: 0; box-shadow: 0px 0px 20px rgba(140, 71, 18, 0.3); max-width: 1000px; margin-inline: auto; } .content_wrapper::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -28%); width: clamp(100px, 71.831px + 7.512vw, 180px); aspect-ratio: 120 / 70; } #rooms .content_wrapper::before { background: url(../img/deco-ribbon_rd.webp) no-repeat center / contain; } #drinks .content_wrapper::before { background: url(../img/deco-ribbon_bl.webp) no-repeat center / contain; } #rooms .content_wrapper { border-color: var(--color-main1); } #drinks .content_wrapper { border-color: var(--color-main2); } .ttl_main { margin: clamp(60px, 38.873px + 5.634vw, 120px) auto 0; padding: clamp(15px, 13.239px + 0.469vw, 20px) 1em; color: var(--color-light); line-height: 1.3; } .ttl_main h2 { font-weight: 700; font-size: clamp(1.8rem, 1.377rem + 1.803vw, 3rem); } .ttl_main h3 { font-family: var(--font-en); font-weight: 500; font-size: clamp(2.8rem, 2.096rem + 3.005vw, 4.8rem); text-transform: uppercase; } #rooms .ttl_main { background: var(--color-main1); } #drinks .ttl_main { background: var(--color-main2); } .content_inner { padding: 0 clamp(15px, 20.282px + -1.408vw, 0px) clamp(30px, 19.437px + 2.817vw, 60px); } .ttl_pic { max-width: 800px; margin: clamp(20px, 12.958px + 1.878vw, 40px) 0; } .txt_price { border-bottom: 1px solid var(--color-dark); padding: 0 0 .25em; /* color: var(--color-); */ font-size: clamp(1.6rem, 1.389rem + 0.901vw, 2.2rem); max-width: 800px; margin: 1em auto; font-weight: 700; } .btn-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 3; gap: 20px; margin: 1em auto; } @media (min-width:640px) { .btn-wrapper { gap: 40px; grid-template-columns: repeat(2, 1fr); margin: 2em auto; width: fit-content; } } .btn-wrapper img { max-width: 80vw; } @media (min-width:768px) { .btn-wrapper img { max-width: 360px; } } .btn-wrapper a img { filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4)); transition: .2s ease; } .btn-wrapper a:hover img { filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.4)); transform: scale(1) translate(2px, 2px); } .btns { display: grid; } .value_class { font-weight: 700; font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); } .value_price { font-family: var(--font-en); font-weight: 600; font-size: clamp(2.4rem, 1.977rem + 1.803vw, 3.6rem); text-transform: uppercase; } .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; } } .detail_drink { background: var(--color-light); max-width: 800px; margin: clamp(30px, 19.437px + 2.817vw, 60px) auto; border-radius: clamp(25px, 16.197px + 2.347vw, 50px); padding: 1em; box-shadow: 0px 0px 10px rgba(140, 71, 18, 0.3); } .drink-notice span { background: linear-gradient(transparent 65%, rgba(255, 238, 0, 0.7) 65%); } /*Hr)jh��-------------------------------------*/ #publisher { color: var(--color-dark); padding: 2em 0 1em; background: var(--grad-pk); border-top: 3px solid var(--color-main3); } #publisher img { width: 70vw; max-width: 500px; } .publisher-site { margin: 2em 0; } .publisher-site a { color: var(--color-dark); font-size: clamp(1.4rem, 1.259rem + 0.601vw, 1.8rem); text-decoration: underline; } .publisher-name { font-family: var(--font-gothic); 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-main3); /* border-top: 1px solid var(--color-light); */ } .hotel-name { text-align: center; font-weight: 500; 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: 500; 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-main7); } .copyright { text-align: center; font-size: 1.2rem; } @media (min-width:768px) { .copyright { font-size: 1.4rem; } }