��@charset "UTF-8"; /*root��pe-------------------------------------*/ :root { /* root��pe�color */ --color-main1: #D2E9EF; --color-main2: #EEEEDF; --color-main3: #e5ddc7; --color-main4: #CFAB8D; --color-main5: #5B90AA; --color-main6: #615E54; --color-main7: #F7F6C0; --color-main8: #FFE9F6; --color-main9: #031c3b; --color-dark: #303030; --color-light: #FFF; --color-link: #0f71c6; --color-ssp: #847F4F; /* root��pe�fonts */ --font-main: "Zen Maru Gothic", sans-serif; --font-notes: "Local Noto Sans JP", sans-serif; --font-gothic: "Local Noto Sans JP", sans-serif; --font-en: "Caveat", cursive; --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(15px, 13.239px + 0.469vw, 20px); --length-XXXS: clamp(10px, 8.239px + 0.469vw, 15px); --length-XXXXS: clamp(5px, 3.239px + 0.469vw, 10px); --fs-SS: clamp(1.2rem, 1.130rem + 0.3vw, 1.4rem); --fs-S: clamp(1.4rem, 1.259rem + 0.601vw, 1.8rem); --fs-MS: clamp(1.5rem, 1.359rem + 0.601vw, 1.9rem); --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); } /*qQ��� }*/ body { font-family: var(--font-main); font-weight: 400; font-style: normal; line-height: inherit; color: var(--color-dark); font-size: var(--fs-M); 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: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#eadea6 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-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-key8 { color: var(--color-main8); } .fc-hanten { color: var(--color-light); } .fc-hanten2 { color: var(--color-dark); } /* .bg-key1 { background: var(--color-main1); color: var(--color-light); } .bg-key2 { background: var(--color-main2); color: var(--color-light); } .bg-key3 { background: var(--color-main3); color: var(--color-light); } */ .ff-en { font-family: var(--font-en); text-transform: uppercase; } .ff-gothic { font-family:var(--font-gothic); } a { color: var(--color-link); text-decoration: none; transition: .5s; } a:hover { color: var(--color-link); 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 { position: fixed; width: 40px; bottom: calc(40px + env(safe-area-inset-bottom)); right: 5px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .5s ease; } #page-top.is-show { opacity: 1; pointer-events: auto; } #page-top img { display: block; width: 100%; height: auto; /* filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .3)); */ transition: transform .3s ease; } @media (min-width: 834px) { #page-top { width: 50px; right: 15px; } } #page-top a img:hover { transform: scale(1.1); } .img-box-shadow { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); margin-bottom: 8px; } .img-filter-shadow { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3)); } .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; margin-inline: auto; } .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; } .no-wrap span { white-space: nowrap; } .line-marker { background: linear-gradient(transparent 65%, rgba(255, 255, 0, 0.8)); } /*eQO��#�-------------------------------------*/ .nyukai { background: var(--color-light); border: 1px solid var(--color-ssp); padding: 1.5em; margin: 2em auto 0; font-family: var(--font-main); color: var(--color-dark); padding-bottom: clamp(15px, 9.718px + 1.408vw, 30px); } @media (min-width:834px) { .nyukai { max-width: 700px; padding: 2em; } } .btn-nyukai a { display: block; font-family: var(--font-main); font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); 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: 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); } /*secqQ�-------------------------------------*/ .sec-container { margin-block: 0; margin-inline: auto; max-width: 1000px; padding: var(--length-L) var(--length-XXS) var(--length-XXS); text-align: center; position: relative; } /* sec-kv-------------------------------------*/ #sec_kv { margin: 0 calc(50% - 50vw); } /* sec-intro-------------------------------------*/ #sec_intro { background-image:url(../img/colkboard.webp); background-repeat:repeat; background-size: 200px auto; border-top: 15px solid var(--color-main3); border-bottom: 15px solid var(--color-main3); padding: var(--length-L) var(--length-S); box-shadow: inset 0 12px 10px -10px rgba(0, 0, 0, .6), inset 0 -5px 4px -4px rgba(0, 0, 0, .3); } /* �0�0�0�0 �0�0�0k0�0�0�0�0Yu�0 */ #sec_intro .sec-container { margin-block: 0; margin-inline: auto; max-width: 800px; padding: var(--length-S) var(--length-S); text-align: center; position: relative; background: var(--color-light); box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.3); transform: rotate(-2.5deg); } img.colkpin{ position: absolute; top: 5px; left: 50%; transform: translate(-50%, -50%); width: clamp(30px, 26.479px + 0.939vw, 40px); height: auto; filter: drop-shadow(5px 3px 3px rgba(0, 0, 0, 0.4)); } .catchcopy{ max-width: 500px; margin: 0 auto var(--length-XS) ; } .date_period{ font-size: clamp(1.6rem, 1.248rem + 1.502vw, 2.6rem); font-weight: 900; font-family: var(--font-gothic); line-height: 1.5; } .date_period span{ font-size: 130%; } /* �0�0�0�0�0�0 */ #sec_collaboroom{ background: url(../img/bg_menphis.webp),var(--color-main1); background-repeat: repeat, repeat; background-size: 100%, 100%; padding: var(--length-L) var(--length-XXS); } #sec_collabomenu{ background: url(../img/bg_menphis.webp),var(--color-main2); background-repeat: repeat, repeat; background-size: 100%, 100%; padding: var(--length-L) var(--length-XXS); } #sec_collaboroom .sec-container, #sec_collabomenu .sec-container { margin-inline: auto; max-width: 1000px; padding: 0; text-align: center; position: relative; background: var(--color-light); box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); } /* 'Y���QW01 */ .ttl_main1 { color: var(--color-main6); margin-bottom: var(--length-M); text-align: center; } .ttl_main1 h2 { font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); line-height: 1; margin-top: .5em; } .ttl_main1 h3 { font-family: var(--font-en); font-size: clamp(4rem, 3.014rem + 4.207vw, 6.8rem); line-height: 1; text-transform: capitalize; font-weight: 400; line-height: 1; } .ttl_main2{ margin: 1em auto; width: 75vw; max-width: 400px; } .content-inner, .content-inner_be, .content-inner_bl{ width: 100%; padding: var(--length-S) var(--length-XS); text-align: center; position: relative; } .content-inner_be{ background: var(--color-main2); } .content-inner_bl{ background: var(--color-main1); } .txt_price { padding: 0.1em .8em .3em; color: var(--color-light); font-size: clamp(1.6rem, 1.389rem + 0.901vw, 2.2rem); display: inline-block; margin: 1em auto; font-weight: 700; background: var(--color-main5); border-radius: 100vw; } .btn-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 3; gap: 20px; margin: 1em auto 2em; } @media (min-width:834px) { .btn-wrapper { gap: 40px; grid-template-columns: repeat(2, 1fr); margin: 2em auto; width: fit-content; } } .btn-wrapper img { width: 75vw; max-width: 320px; } .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)); } .btns { display: grid; } .value_class { font-weight: 700; font-size: clamp(1.6rem, 1.459rem + 0.601vw, 2rem); } .value_price { font-weight: 900; font-size: clamp(2.4rem, 1.977rem + 1.803vw, 3.6rem); text-transform: uppercase; } .restaurant-info { display: inline-block; color: var(--color-light); background: var(--color-main4); border-radius: 100vw; padding: .5em 1em; line-height: 1; margin-bottom: .5em; min-width: 10em; } .drink_fusen{ background: var(--color-main7); padding: var(--length-XS) var(--length-XXS); max-width: 800px; margin: var(--length-S) auto; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1), 0px 20px 25px -15px rgba(0, 0, 0, 0.3); } @media (min-width:640px) { .drink_fusen{ padding: var(--length-S) var(--length-S) var(--length-M); } } /* �0�0�0�0�0�0�0�0�0�0�0�0�0�0 */ .ttl_catch_drink{ position: relative; margin: 1em auto 2.5em; width: 70vw; max-width: 400px; /* transform: rotate(-4deg); */ } @media (min-width:768px) { .ttl_catch_drink{ max-width: 480px; } } .ttl_catch_drink_img{ display: block; width: 100%; height: auto; } /* CQSVGh0�[hQk0 TX0'YM0U0g0͑m0�0 */ .check-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* d�D0�0�0�0�0 */ .check-line{ fill: none; stroke: #c41414; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; } /* �0�0�0�0�0g0�0�0�0�0�0�c;u */ .ttl_catch_drink.is-visible .check-line{ animation: draw-check var(--duration) ease-out var(--delay) forwards; } @keyframes draw-check{ to{ stroke-dashoffset: 0; } } .grid_container { margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: var(--length-S) var(--length-XS); max-width: 800px; } @media (min-width:640px) { .grid_container { grid-template-columns: repeat(2, 1fr); } } .grid_container img { /* filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3)); */ } /* FU�T��fNl(u�0�0�0�0 */ .item-name { font-weight: 700; font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem); line-height: 1.4; margin-block: .5em .25em; } .item-name span { white-space: nowrap; } .item-period { font-weight: 700; font-size: clamp(1.6rem, 1.530rem + 0.3vw, 1.8rem); line-height: 1; padding-block: .4em .6em; } .item-price { font-weight: 700; font-size: clamp(1.8rem, 1.730rem + 0.3vw, 2rem); line-height: 1.4; } .item-caption { font-size: clamp(1.4rem, 1.330rem + 0.3vw, 1.6rem); line-height: 1.4; } .item-ingredients, .item-ingredients-add { 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; font-family: var(--font-gothic); } .item-ingredients span, .item-ingredients-add span { white-space: nowrap; } .item-ingredients::before { content: ";�O(uPg�e=�"; display: block; margin-bottom: .2em; } .item-ingredients-add::before { content: ";�%R�mH0=�"; display: block; margin-bottom: .2em; } .item-size { font-size: clamp(1.2rem, 1.165rem + 0.15vw, 1.3rem); font-weight: 400; line-height: 1.2; margin-top: .5em; font-family: var(--font-gothic); font-feature-settings: normal; } .item-size::before { content: ";��0�0�0=�"; } .item-material { font-size: clamp(1.2rem, 1.165rem + 0.15vw, 1.3rem); font-weight: 400; line-height: 1.2; margin-top: .5em; font-family: var(--font-gothic); } .item-material::before { content: ";�Pg�=�"; } /*Hr)jh��-------------------------------------*/ #publisher { text-align: center; padding: var(--length-M) var(--length-XXS); background:#F7F6EC; color: var(--color-dark); } #publisher img { width: min(80vw, 400px); } .publisher-site { font-size: clamp(1.6rem, 1.527rem + 0.36vw, 1.8rem); margin: 1em 0 .5em; } .publisher-site a { color: var(--color-main1-L); } .publisher-name { font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem); margin-top: 2em; } /*footer-------------------------------------*/ footer { font-family: var(--font-main); color: var(--color-light); padding: 2em .5em; margin: 0 auto; text-align: center; background: var(--color-main6); } .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-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-main7); } .copyright { text-align: center; font-size: 1.2rem; } @media (min-width:834px) { .copyright { font-size: 1.4rem; } }