��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #FF8808; --color-main2: #01FCF5; --color-main3: #457E7E; --color-main4: #003231; --color-dark: #000; --color-light: #fff; --color-link: #FF8808; --color-ssp: #847F4F; --color-thirteen: #4C3C3C; --color-thirteen-L: #755C5C; --color-stellea: #00956E; --color-stellea-L: #A5E6DA; --color-Adam: #32B9FF; --color-Adam-L: #99DDFF; --color-Jeanne: #FFE050; --color-Jeanne-L: #FFEC99; /* root��pe�fonts */ --font-main: "Local Noto Sans JP", "Noto Sans JP", 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: "Chakra Petch", sans-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-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, #01FCF5 94%, #0000), radial-gradient(farthest-side, #94e9e6 94%, #0000), #01FCF5; 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-Jeanne-L); } .fc-hanten { color: var(--color-light); } .fc-hanten2 { color: var(--color-dark); } /* .ff-deco { font-family: var(--font-deco); } */ .ff-en { font-family: var(--font-en); } a { color: var(--color-link); text-decoration: none; transition: .5s; } a:hover { color: var(--color-link); text-decoration: underline; /* 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:834px) { .notes { box-sizing: initial; /*paddingR�0RgS*/ margin: 30px auto 0 auto; max-width: 700px; } } ul.notes li { font-size: 1.4rem; font-weight: 400; margin: 0.5em auto 0 auto; margin-left: 1em; text-indent: -1em; line-height: 1.6; text-align: justify; } @media (min-width:834px) { ul.notes li { font-size: 1.4rem; } } #page-top img { position: fixed; width: 45px; bottom: 20px; right: 10px; z-index: 99999; transition: .3s; } @media (min-width:834px) { #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)); } .img-radius { border-radius: clamp(20px, 12.958px + 1.878vw, 40px); } .wide-max500, .wide-max600, .wide-max700, .wide-max800, .wide-max900, .wide-max1000 { margin-inline: auto; } .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; margin: 40px auto 0 auto; font-family: var(--font-main); margin: 2em auto; color: var(--color-blk); } @media (min-width:834px) { .nyukai { max-width: 700px; padding: 2em; } } .btn-nyukai a { display: block; font-family: var(--font-main); font-size: 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); } /* KV-------------------------------------*/ .img-kv { margin: 0 auto; width: 100vw; } .img-kv img { object-fit: contain; } /*secqQ�-------------------------------------*/ .sec-container { margin: 0 auto; max-width: 1000px; padding: 0 20px 40px; text-align: center; } @media (min-width:834px) { .sec-container { padding: 0 0 80px; } } /*sec-intro-------------------------------------*/ #sec-intro { background: url(../img/bg_intro.webp); background-repeat: repeat; } #sec-intro .sec-container { margin: 0 auto; padding: 60px 20px; text-align: center; } @media (min-width:834px){ #sec-intro .sec-container { padding: 80px 0; } } .main-copy { background-image: url(../img/bg_logo_.webp); background-repeat: no-repeat; background-size: 300px; background-position: center center; } /*sec-main-------------------------------------*/ #sec-main { background-image: url(../img/bg_main.webp); background-repeat: repeat-y; background-size: contain; } .ttl-main { margin-inline: calc(50% - 50vw); background-image: url(../img/bg_ttl-sec.webp); background-repeat: repeat; color: var(--color-light); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); padding: clamp(1rem, 0.296rem + 3.005vw, 3rem); border-bottom: 4px solid var(--color-dark); position: relative; margin-bottom: clamp(30px, 12.394px + 4.695vw, 80px); } .ttl-main::after { position: absolute; content: ""; top: 100%; left: 50%; transform: translateX(-50%); border-top: clamp(24px, 17.662px + 1.69vw, 42px) solid var(--color-dark); border-right: clamp(24px, 17.662px + 1.69vw, 42px) solid transparent; border-left: clamp(24px, 17.662px + 1.69vw, 42px) solid transparent; } .ttl-main p { font-size: clamp(3rem, 2.296rem + 3.005vw, 5rem); text-transform: uppercase; font-family: var(--font-en); font-style: italic; font-weight: 700; line-height: 1.2; margin-bottom: .2em; } .ttl-main h2 { font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem); font-weight: 700; margin-bottom: .5em; } .sub-ttl { background-image: url(../img/bg_ttl.webp); background-repeat: no-repeat; background-size: clamp(300px, 236.620px + 16.901vw, 480px); background-position: center center; padding: 2em 1em; margin-block: 2em 0; } .sub-ttl p { font-size: clamp(2.8rem, 2.166rem + 2.704vw, 4.6rem); text-transform: uppercase; font-family: var(--font-en); font-weight: 700; line-height: 1.2; } .sub-ttl h3 { font-size: clamp(1.6rem, 1.318rem + 1.202vw, 2.4rem); font-weight: 700; margin-bottom: .5em; } .period { font-family: var(--font-en); font-weight: 700; font-size: clamp(2rem, 1.437rem + 2.404vw, 3.6rem); color: var(--color-main1); text-transform: capitalize; } .period span { font-size: 150%; } .ttl-shubetsu1, .ttl-shubetsu2 { background: var(--color-dark); color: var(--color-light); font-weight: 600; font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem); padding: .4em; border-left: 8px solid; border-right: 8px solid; margin: 1em 0 .5em; } .ttl-shubetsu1 { border-color: var(--color-main2); } .ttl-shubetsu2 { border-color: var(--color-main1); margin-top: 3em; } .number-price { font-family: var(--font-en); font-weight: 700; font-size: clamp(2.8rem, 2.307rem + 2.103vw, 4.2rem); color: var(--color-main1); } .btn-block { margin: 1em auto; } .btn-block img { width: 80vw; max-width: 360px; margin-bottom: .5em; } .bf-tokuten { padding: 1em; border: 2px solid var(--color-main3); background: var(--color-light); max-width: 700px; margin: 2em auto; } .item-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; justify-content: center; margin: 2em auto; } @media (min-width:834px) { .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 { /* 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-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; } @media (min-width:834px) {} .notice-wrapper { max-width: 1000px; background: #E0F5FF; padding: 0 1em 1em; box-shadow: 0px 0px 8px rgba(3, 117, 175, 0.4); margin: 3em auto; } @media (min-width:834px) { .notice-wrapper { padding: .5em 2em 2em; } } .cafe-notice{ background: var(--color-light); padding: 1em; border: 3px solid var(--color-main3); width: fit-content; margin-inline: auto; border-radius: 1em; } @media (min-width:768px){ .cafe-notice{ padding: 1.5em 3em; } } .drink-cate { color: var(--color-main3); padding: .5em; margin-top: 3em; line-height: 1.2; } .drink-cate-name { display: flex; justify-content: center; align-items: center; font-size: clamp(2.6rem, 1.825rem + 3.305vw, 4.8rem); text-align: center; text-transform: uppercase; font-family: var(--font-en); font-style: italic; font-weight: 700; } .drink-cate-name::before, .drink-cate-name::after { content: ''; width: 30px; height: 4px; background-color: var(--color-main1); } .drink-cate-name::before { margin-right: 15px; } .drink-cate-name::after { margin-left: 15px; } .drink-wrapper { margin: 0 calc(50% - 50vw); } @media (min-width:640px) { .drink-wrapper { margin: 0 auto 40px; max-width: 800px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; justify-content: center; } } .drink-inner { padding: 20px; background-repeat: repeat; background-size: clamp(6px, 5.296px + 0.188vw, 8px); } .jeanne { background-color: var(--color-Jeanne); background-image: url(../img/bg_dot_70.webp); } .adam { background-color: var(--color-Adam); background-image: url(../img/bg_dot_30.webp); } .thirteen { background-color: var(--color-thirteen); background-image: url(../img/bg_dot_20.webp); } .stellea { background-color: var(--color-stellea); background-image: url(../img/bg_dot_20.webp); } .novelty-wrapper { margin: 1em auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; justify-content: space-between; } @media (min-width:640px) { .novelty-wrapper { grid-template-columns: repeat(4, 1fr); } } /*Hr)jh��-------------------------------------*/ #publisher { color: var(--color-light); padding: 2em 0 1em; background: url(../img/bg_copyright.webp); background-repeat: repeat; } #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-light); 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-main4); 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: 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: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; 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-main1); } .copyright { text-align: center; font-size: 1.2rem; } @media (min-width:768px) { .copyright { font-size: 1.4rem; } }