@charset "UTF-8";
/*!
Theme Name: open-cafe
Theme URI: https://shunei-web.tech/
Author: Shunei
Author URI: https://x.com/shunei_web
Description: Cafe site (fictitious)
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: open-cafe
Tags: custom-menu, featured-images, threaded-comments
Copyright notice: GNU General Public License
*/
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-main: #382620;
  --color-accent: #f07317;
  --color-text: var(--color-text-black);
  --color-text-black: #222;
  --color-text-white: #fff;
  --color-text-main: var(--color-main);
  --color-ground: var(--color-ground-light);
  --color-ground-black: #222;
  --color-ground-dark: #eae0d5;
  --color-ground-light: #f3efeb;
  --color-ground-lighter: #f7f6f4;
  --color-ground-lightest: #f8f8f8;
  --color-ground-white: #fff;
  --color-ground-white-translucent: rgb(from #fff r g b / 85%);
  --color-ground-main: var(--color-main);
  --color-overlay-dark: rgb(from #000 r g b / 40%);
  --color-overlay-medium: rgb(from #000 r g b / 30%);
  --color-overlay-light: rgb(from #000 r g b / 20%);
  --color-overlay-gradient: linear-gradient(180deg, rgb(from #000 r g b / 0%) 0%, rgb(from #000 r g b / 80%) 100%);
  --color-decorate-black: #222;
  --color-decorate-gray: #aaa;
  --color-decorate-white: #fff;
  --color-decorate-main: var(--color-main);
  --color-pagination: #d59b71;
  --color-pagination-inactive: #fff;
  --color-button-text: #fff;
  --color-button-ground: #222;
  --color-button-main: var(--color-main);
  --color-button-disable: #888;
  --color-placeholder: #ccc;
  --color-form-text: var(--color-text);
  --color-form-ground: var(--color-ground-white);
  --color-form-border: var(--color-main);
  --color-form-checked: var(--color-accent);
  --color-form-required: var(--color-accent);
  --color-form-decorate: var(--color-main);
  --color-invalid: var(--color-accent, Canvas);
  --drop-shadow-invalid: drop-shadow(0 0 4px rgb(from var(--color-invalid) r g b / 64%));
  --color-focus: var(--color-accent, Canvas);
  --drop-shadow-focus: drop-shadow(0 0 4px rgb(from var(--color-focus) r g b / 64%));
  --color-hover: var(--color-accent, Canvas);
  --opacity: 0.7;
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --leading-trim: calc((1em - 1lh) / 2);
  --spacing-unit: 0.5rem;
  --spacing-xs: calc(var(--spacing-unit) / 2);
  --spacing-sm: var(--spacing-unit);
  --spacing-md: calc(var(--spacing-unit) * 2);
  --spacing-lg: calc(var(--spacing-unit) * 3);
  --spacing-xl: calc(var(--spacing-unit) * 5);
  --spacing-2xl: calc(var(--spacing-unit) * 8);
  --spacing-3xl: calc(var(--spacing-unit) * 13);
  --spacing-xs-trim: calc(var(--spacing-xs) + var(--leading-trim));
  --spacing-sm-trim: calc(var(--spacing-sm) + var(--leading-trim));
  --spacing-md-trim: calc(var(--spacing-md) + var(--leading-trim));
  --spacing-lg-trim: calc(var(--spacing-lg) + var(--leading-trim));
  --spacing-xl-trim: calc(var(--spacing-xl) + var(--leading-trim));
  --spacing-2xl-trim: calc(var(--spacing-2xl) + var(--leading-trim));
  --spacing-3xl-trim: calc(var(--spacing-3xl) + var(--leading-trim));
}

:lang(en) {
  --leading-trim: calc((1cap - 1lh) / 2);
}

:root {
  --viewport-min: 375;
  --viewport-breakpoint: 768;
  --viewport-inner: 1100;
  --viewport-max: 1280;
  --horizontal-spacing-min: 20;
  --horizontal-spacing-max: 90;
  --post-inner: 688;
  --horizontal-spacing: clamp(min(var(--horizontal-spacing-min), var(--horizontal-spacing-max)) * var(--rem-ratio), var(--horizontal-spacing-min) * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (var(--horizontal-spacing-max) - var(--horizontal-spacing-min)) / (var(--viewport-max) - var(--viewport-min)), max(var(--horizontal-spacing-min), var(--horizontal-spacing-max)) * var(--rem-ratio));
  --post-archive-inner: 728;
  --horizontal-gap-spacing-min: 0;
  --horizontal-gap-spacing-max: 72;
  --news-sidebar-inline-size-breakpoint: 200;
  --news-sidebar-inline-size-max: 300;
  --horizontal-gap-spacing: clamp(min(var(--horizontal-gap-spacing-min), var(--horizontal-gap-spacing-max)) * var(--rem-ratio), var(--horizontal-gap-spacing-min) * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (var(--horizontal-gap-spacing-max) - var(--horizontal-gap-spacing-min)) / (var(--viewport-max) - var(--viewport-min)), max(var(--horizontal-gap-spacing-min), var(--horizontal-gap-spacing-max)) * var(--rem-ratio));
  --news-sidebar-inline-size: clamp(min(var(--news-sidebar-inline-size-breakpoint), var(--news-sidebar-inline-size-max)) * var(--rem-ratio), var(--news-sidebar-inline-size-breakpoint) * var(--rem-ratio) + (100dvw - var(--viewport-breakpoint) * 1px) * (var(--news-sidebar-inline-size-max) - var(--news-sidebar-inline-size-breakpoint)) / (var(--viewport-max) - var(--viewport-breakpoint)), max(var(--news-sidebar-inline-size-breakpoint), var(--news-sidebar-inline-size-max)) * var(--rem-ratio));
  --front-page-sidebar-inline-size-max: 200;
  --fluid-ratio-min: calc(1 / var(--viewport-min) * 100dvi);
  --fluid-ratio-breakpoint: calc(1 / var(--viewport-breakpoint) * 100dvi);
  --fluid-ratio-max: calc(1 / var(--viewport-max) * 100dvi);
  --z-background: -1;
  --z-default: 0;
  --z-foreground: 1;
  --z-footer: 90;
  --z-header: 100;
  --z-floating: 150;
  --z-navigation: 200;
  --z-modal: 1000;
  --z-popup: 1100;
  --z-tooltip: 1200;
  --z-notification: 9000;
  --z-loader: 9100;
  --z-dev-tools: 9999;
}

.svg-arrow-prev {
  aspect-ratio: 0.5;
}

.svg-balloon-access {
  aspect-ratio: 1.1592039801;
}

.svg-balloon-gallery {
  aspect-ratio: 1.9047619048;
}

.svg-balloon-pickup {
  aspect-ratio: 1.5412844037;
}

.svg-balloon-special-lunch-set {
  aspect-ratio: 1.9192546584;
}

.svg-instagram {
  aspect-ratio: 0.875;
  margin-block: -7.1428571429%;
}

.svg-logo-light {
  aspect-ratio: 2;
}

.svg-logo {
  aspect-ratio: 1.7849462366;
}

.svg-text-drink {
  aspect-ratio: 3.8636363636;
}

.svg-text-pasta {
  aspect-ratio: 2.72;
}

.svg-text-plus {
  aspect-ratio: 1;
}

.svg-text-salad {
  aspect-ratio: 3.0434782609;
}

.svg-twitter {
  aspect-ratio: 1;
  scale: 1.0833333333;
}

.svg-youtube {
  aspect-ratio: 1.125;
  scale: 1.1666666667;
}

:root {
  --_font-family-base: sans-serif;
  --_font-family-ja-default: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo";
  --_font-family-ja: "Noto Serif JP";
  --font-family-ja: var(--_font-family-ja), var(--_font-family-ja-default), var(--_font-family-base);
  --_font-family-ja-alt: "Kiwi Maru";
  --font-family-ja-alt: var(--_font-family-ja-alt), var(--_font-family-ja-default), var(--_font-family-base);
  --_font-family-en-default: "Helvetica Neue", "Arial";
  --_font-family-en-nav: "Patua One";
  --font-family-en-nav: var(--_font-family-en-nav), var(--_font-family-en-default), var(--_font-family-base);
  --_font-family-en-head: "Amatic SC";
  --font-family-en-head: var(--_font-family-en-head), var(--_font-family-en-default), var(--_font-family-base);
  --_font-family-en-menu: "Damion";
  --font-family-en-menu: var(--_font-family-en-menu), var(--_font-family-en-default), var(--_font-family-base);
  --font-size-rem: 16;
  --rem-ratio: calc(1rem / var(--font-size-rem));
  --font-family: var(--font-family-ja);
  --font-size: var(--font-size-16, 16);
  --line-height: var(--line-height-16-32, 1.6);
  --font-size-10: calc(10 * var(--rem-ratio));
  --font-size-11: calc(11 * var(--rem-ratio));
  --font-size-12: calc(12 * var(--rem-ratio));
  --font-size-14: calc(14 * var(--rem-ratio));
  --font-size-16: calc(16 * var(--rem-ratio));
  --font-size-20: calc(20 * var(--rem-ratio));
  --font-size-24: calc(24 * var(--rem-ratio));
  --font-size-28: calc(28 * var(--rem-ratio));
  --font-size-32: calc(32 * var(--rem-ratio));
  --font-size-40: calc(40 * var(--rem-ratio));
  --font-size-52: calc(52 * var(--rem-ratio));
  --font-size-72: calc(72 * var(--rem-ratio));
  --font-size-12-14: clamp(min(12, 14) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (14 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 14) * var(--rem-ratio));
  --font-size-12-16: clamp(min(12, 16) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 16) * var(--rem-ratio));
  --font-size-14-16: clamp(min(14, 16) * var(--rem-ratio), 14 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 14) / (var(--viewport-max) - var(--viewport-min)), max(14, 16) * var(--rem-ratio));
  --font-size-14-18: clamp(min(14, 18) * var(--rem-ratio), 14 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (18 - 14) / (var(--viewport-max) - var(--viewport-min)), max(14, 18) * var(--rem-ratio));
  --font-size-14-20: clamp(min(14, 20) * var(--rem-ratio), 14 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 14) / (var(--viewport-max) - var(--viewport-min)), max(14, 20) * var(--rem-ratio));
  --font-size-16-20: clamp(min(16, 20) * var(--rem-ratio), 16 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 16) / (var(--viewport-max) - var(--viewport-min)), max(16, 20) * var(--rem-ratio));
  --font-size-16-24: clamp(min(16, 24) * var(--rem-ratio), 16 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 16) / (var(--viewport-max) - var(--viewport-min)), max(16, 24) * var(--rem-ratio));
  --font-size-18-24: clamp(min(18, 24) * var(--rem-ratio), 18 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 18) / (var(--viewport-max) - var(--viewport-min)), max(18, 24) * var(--rem-ratio));
  --font-size-19-32: clamp(min(19, 32) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (32 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 32) * var(--rem-ratio));
  --font-size-20-24: clamp(min(20, 24) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 24) * var(--rem-ratio));
  --font-size-20-28: clamp(min(20, 28) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (28 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 28) * var(--rem-ratio));
  --font-size-24-32: clamp(min(24, 32) * var(--rem-ratio), 24 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (32 - 24) / (var(--viewport-max) - var(--viewport-min)), max(24, 32) * var(--rem-ratio));
  --font-size-28-32: clamp(min(28, 32) * var(--rem-ratio), 28 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (32 - 28) / (var(--viewport-max) - var(--viewport-min)), max(28, 32) * var(--rem-ratio));
  --font-size-32-72: clamp(min(32, 72) * var(--rem-ratio), 32 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (72 - 32) / (var(--viewport-max) - var(--viewport-min)), max(32, 72) * var(--rem-ratio));
  --font-size-40-52: clamp(min(40, 52) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (52 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 52) * var(--rem-ratio));
  --font-size-40-60: clamp(min(40, 60) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 60) * var(--rem-ratio));
  --line-height-10-14: calc(14 / 10);
  --line-height-11-16: calc(16 / 11);
  --line-height-12-17: calc(17 / 12);
  --line-height-12-18: calc(18 / 12);
  --line-height-12-24: calc(24 / 12);
  --line-height-14-19: calc(19 / 14);
  --line-height-14-20: calc(20 / 14);
  --line-height-14-24: calc(24 / 14);
  --line-height-14-28: calc(28 / 14);
  --line-height-16-20: calc(20 / 16);
  --line-height-16-23: calc(23 / 16);
  --line-height-16-24: calc(24 / 16);
  --line-height-16-28: calc(28 / 16);
  --line-height-16-31: calc(31 / 16);
  --line-height-16-32: calc(32 / 16);
  --line-height-18-26: calc(26 / 18);
  --line-height-18-28: calc(28 / 18);
  --line-height-19-23: calc(23 / 19);
  --line-height-20-27: calc(27 / 20);
  --line-height-20-28: calc(28 / 20);
  --line-height-20-29: calc(29 / 20);
  --line-height-20-32: calc(32 / 20);
  --line-height-20-40: calc(40 / 20);
  --line-height-20-45: calc(45 / 20);
  --line-height-24-29: calc(29 / 24);
  --line-height-24-33: calc(33 / 24);
  --line-height-24-34: calc(34 / 24);
  --line-height-24-40: calc(40 / 24);
  --line-height-28-38: calc(38 / 28);
  --line-height-28-40: calc(40 / 28);
  --line-height-28-60: calc(60 / 28);
  --line-height-32-39: calc(39 / 32);
  --line-height-32-40: calc(40 / 32);
  --line-height-32-44: calc(44 / 32);
  --line-height-40-50: calc(50 / 40);
  --line-height-40-55: calc(55 / 40);
  --line-height-52-66: calc(66 / 52);
  --line-height-60-82: calc(82 / 60);
  --line-height-72-91: calc(91 / 72);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:where([hidden]:not([hidden=until-found])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
  -moz-tab-size: 2;
    -o-tab-size: 2;
  scrollbar-gutter: stable;
       tab-size: 2;
}

:where(html:has(dialog:modal[open])) {
  overflow: clip;
}
:where(body) {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  color: inherit;
  font: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  text-wrap: balance;
}

:where(hr) {
  block-size: 0;
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  overflow: visible;
}

:where(dialog) {
  background: none;
  border: none;
  inset: unset;
  max-height: unset;
  max-width: unset;
}

:where(dialog:not([open], [popover])) {
  display: none !important;
}

:where([popover]) {
  background: none;
  border: none;
  color: inherit;
  inset: unset;
}

:where([popover]:not(:popover-open)) {
  display: none !important;
}

:where(:focus-visible) {
  box-shadow: 0 0 0 5px Canvas;
  outline: 3px solid CanvasText;
  outline-offset: 1px;
}

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
  border: 0 !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

*,
*::before,
*::after {
  min-block-size: 0;
  min-inline-size: 0;
}

:where(body) {
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

:where([type=button], [type=reset], [type=submit]) {
  all: unset;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
}

:where([type=checkbox]) {
  cursor: pointer;
}

:where(input, button, textarea, select) {
  display: block flow;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

:where(iframe) {
  border: none;
}

:where(a) {
  text-decoration: none;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: var(--ease-out-expo);
}
:where(a):focus-visible {
  opacity: var(--opacity);
}

:where(img, svg, video) {
  inline-size: 100%;
  pointer-events: none;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: inherit;
}

:where(h1, h2, h3) {
  line-height: var(--line-height);
  text-wrap: revert;
}

:where(dialog) {
  color: var(--color-text);
}

:where(input, textarea)::-moz-placeholder {
  color: var(--color-placeholder);
}

:where(input, textarea)::placeholder {
  color: var(--color-placeholder);
}

:where(:focus:not(:focus-visible)) {
  box-shadow: unset;
  filter: unset;
  outline: unset;
}

:where(:focus-visible) {
  box-shadow: unset;
  filter: var(--drop-shadow-focus);
  outline: unset;
}

:where(:user-invalid) {
  border-color: var(--color-invalid) !important;
  filter: var(--drop-shadow-invalid);
}

:where(address, cite) {
  font-style: unset;
}
:where([href*="tel:"]):where(body.is-desktop *) {
  color: inherit;
  cursor: unset;
  pointer-events: none;
  text-decoration: none;
}
:where([type=text], [type=email], [type=tel], [type=url], [type=search], [type=password]) {
  --_border-width: 1px;
  --_min-inline-size: 335px;
  --_padding-block: calc(12px - var(--_border-width)) calc(13px - var(--_border-width));
  --_padding-inline: calc(16px - var(--_border-width)) calc(16px - var(--_border-width));
  background: var(--color-form-ground);
  border: var(--_border-width) solid var(--color-form-border);
  border-radius: 6px;
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: var(--line-height-16-23);
  max-inline-size: 100%;
  min-inline-size: max(var(--_min-inline-size), 100%);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  field-sizing: content;
}
@supports (field-sizing: content) {
  :where([type=text], [type=email], [type=tel], [type=url], [type=search], [type=password]) {
    resize: none;
  }
  :where(textarea) {
    resize: none;
  }
}

:where([type=radio]) {
  background: var(--color-form-ground);
  block-size: var(--_outer-size);
  border: var(--_border-width) solid var(--color-form-border);
  border-radius: calc(infinity * 1px);
  inline-size: var(--_outer-size);
  position: relative;
}
label:has(:where([type=radio])) {
  --_outer-size: 24px;
  --_inner-size: 12px;
  --_border-width: 1px;
  --_column-gap: 10px;
  display: block flex;
  -moz-column-gap: var(--_column-gap);
  align-items: center;
       column-gap: var(--_column-gap);
}
:where([type=radio]):checked::before {
  aspect-ratio: 1;
  background: var(--color-form-checked);
  border: var(--_border-width) solid transparent;
  border-radius: calc(infinity * 1px);
  content: "";
  inline-size: var(--_inner-size);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  position: absolute;
  translate: -50% -50%;
}
:where([type=radio]) + span {
  color: var(--color-text-main);
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: var(--line-height-16-23);
}

:where([type=checkbox]) {
  background: var(--color-form-ground);
  block-size: var(--_outer-size);
  border: var(--_border-width) solid var(--color-form-border);
  border-radius: 4px;
  display: block grid;
  inline-size: var(--_outer-size);
  position: relative;
}
label:has(:where([type=checkbox])) {
  --_outer-size: 24px;
  --_border-width: 1px;
  --_width: 2px;
  --_short: 9px;
  --_long: 14px;
  --_column-gap: 10px;
  display: block flex;
  -moz-column-gap: var(--_column-gap);
  align-items: center;
       column-gap: var(--_column-gap);
}
:where([type=checkbox]):checked::before, :where([type=checkbox]):checked::after {
  background: var(--color-form-checked);
  border-radius: calc(infinity * 1px);
  content: "";
  left: calc(50% - 0.7071067812 * (var(--_long) - var(--_short)) / 2);
  pointer-events: none;
  position: absolute;
  rotate: -135deg;
  top: calc(50% + 0.7071067812 * (var(--_long) + var(--_width)) / 2);
  transform-origin: left top;
  z-index: var(--z-foreground);
}
:where([type=checkbox]):checked::before {
  block-size: var(--_width);
  inline-size: var(--_short);
}
:where([type=checkbox]):checked::after {
  block-size: var(--_long);
  inline-size: var(--_width);
}
:where([type=checkbox]) + span {
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: var(--line-height-16-23);
}

:where(textarea) {
  --_min-rows: 7;
  --_max-rows: 20;
  --_min-block-size: 200px;
  --_min-inline-size: 335px;
  --_border-width: 1px;
  --_padding-block-start: calc(12px - var(--_border-width));
  --_padding-block-end: calc(12px - var(--_border-width));
  --_padding-inline-start: calc(16px - var(--_border-width));
  --_padding-inline-end: calc(16px - var(--_border-width));
  background: var(--color-form-ground);
  border: var(--_border-width) solid var(--color-form-border);
  border-radius: 6px;
  font-size: var(--font-size-16);
  font-weight: 500;
  inline-size: max(var(--_min-inline-size), 100%);
  line-height: var(--line-height-16-23);
  max-block-size: calc(var(--_max-rows) * 1lh + var(--_padding-block-start) + var(--_padding-block-end));
  max-inline-size: 100%;
  min-block-size: max(var(--_min-rows) * 1lh + var(--_padding-block-start) + var(--_padding-block-end), var(--_min-block-size));
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
  padding-inline: var(--_padding-inline-start) var(--_padding-inline-end);
  resize: block;
  field-sizing: content;
}

:where(select) {
  --_border-width: 1px;
  --_min-inline-size: 335px;
  --_padding-block: calc(16px - var(--_border-width) + 1px) calc(16px - var(--_border-width) + 1px);
  --_padding-inline: calc(16px - var(--_border-width)) calc(16px - var(--_border-width));
  background: var(--color-form-ground);
  border: 1px solid var(--color-form-border);
  border-radius: 8px;
  font-size: var(--font-size-16);
  font-weight: 500;
  line-height: var(--line-height-16-23);
  max-inline-size: 100%;
  min-inline-size: max(var(--_min-inline-size), 100%);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
}

.form__select-arrow {
  --_width: 3px;
  --_length: 12px;
  --_inline-size: 52px;
  display: block grid;
  position: relative;
}
.form__select-arrow::before, .form__select-arrow::after {
  background: var(--color-form-ground);
  border-radius: calc(infinity * 1px);
  content: "";
  left: calc(100% - 0.7071067812 * (var(--_length) - var(--_length)) / 2 - var(--_inline-size) / 2);
  pointer-events: none;
  position: absolute;
  rotate: -135deg;
  top: calc(50% + 0.7071067812 * (var(--_length) + var(--_width)) / 2);
  transform-origin: left top;
  z-index: calc(var(--z-foreground) + 1);
}
.form__select-arrow::before {
  block-size: var(--_width);
  inline-size: var(--_length);
}
.form__select-arrow::after {
  block-size: var(--_length);
  inline-size: var(--_width);
}

.form__select-arrow-background::before {
  background: var(--color-form-decorate);
  border-end-end-radius: 8px;
  border-start-end-radius: 8px;
  content: "";
  display: block grid;
  inline-size: var(--_inline-size);
  inset-block: 0;
  inset-inline-end: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-foreground);
}

.form__field {
  display: block grid;
  row-gap: 8px;
}
.form__field:has([type=radio]) {
  row-gap: 22px;
}

.form__label {
  display: block flex;
  -moz-column-gap: 8px;
  align-items: center;
  color: var(--color-text-main);
       column-gap: 8px;
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: var(--line-height-16-23);
}
.form__label:where(.form__field:has([required], [aria-required], [type=radio], [class*=required]) *)::after {
  background: var(--color-form-required);
  border-radius: 0.1818181818em;
  color: var(--color-text-white);
  content: "必須";
  font-size: var(--font-size-11);
  font-weight: 500;
  line-height: var(--line-height-11-16);
  padding-block: 0.0909090909em 0.1818181818em;
  padding-inline: 0.5454545455em;
}

.site {
  align-items: start;
  display: grid;
  grid-template: "header" auto "first-view" auto "main" 1fr "sidebar" auto "footer" auto/auto;
  min-block-size: 100dvb;
  overflow: hidden;
}

.site-header {
  grid-area: header;
  position: relative;
  z-index: var(--z-header);
}

.site-first-view {
  grid-area: first-view;
}

.site-main {
  grid-area: main;
}

.site-sidebar {
  grid-area: sidebar;
}

.site-footer {
  grid-area: footer;
  position: relative;
  z-index: var(--z-footer);
}

.no-sidebar .site {
  display: grid;
  grid-template: "header" auto "first-view" auto "main" 1fr "footer" auto/auto;
}

.l-section {
  position: relative;
}

.l-section__inner {
  box-sizing: initial;
  margin-inline: auto;
  max-inline-size: calc(var(--viewport-inner) * 1px);
  padding-inline: var(--horizontal-spacing);
}

.l-background {
  inset: 0;
  position: absolute;
  z-index: var(--z-background);
}

.l-background__content {
  block-size: 100%;
  position: relative;
}

.l-primary-section {
  position: relative;
}

.l-primary-section__inner {
  box-sizing: initial;
  margin-inline: auto;
  max-inline-size: calc(var(--viewport-inner) * 1px);
  padding-inline: var(--horizontal-spacing);
}

.l-secondary-section {
  position: relative;
}

.l-secondary-section__inner {
  box-sizing: initial;
  margin-inline: auto;
  max-inline-size: calc(var(--viewport-inner) * 1px);
  padding-inline: var(--horizontal-spacing);
}

.breadcrumb {
  --_margin-block-start: clamp(min(4, 16) * var(--rem-ratio), 4 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 4) / (var(--viewport-max) - var(--viewport-min)), max(4, 16) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.breadcrumb__inner {
  --horizontal-spacing: clamp(min(10, var(--horizontal-spacing-max)) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (var(--horizontal-spacing-max) - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, var(--horizontal-spacing-max)) * var(--rem-ratio));
}

.breadcrumb__content {
  --_column-gap: clamp(min(6, 16) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 16) * var(--rem-ratio));
  display: block flex;
  flex-wrap: wrap;
  -moz-column-gap: var(--_column-gap);
  color: var(--color-text-main);
       column-gap: var(--_column-gap);
  font-size: var(--font-size-12-14);
  font-weight: 700;
  line-height: var(--line-height-12-17);
}

.wpcf7-radio {
  display: block grid;
  row-gap: 16px;
}

.wpcf7-list-item {
  margin: revert;
}

.wpcf7-not-valid-tip,.wpcf7-spinner {
  inset-block-start: 100%;
  inset-inline-start: 0;
  position: absolute;
}

.wpcf7-response-output {
  display: none;
}

.grecaptcha-badge {
  bottom: 74px !important;
  z-index: var(--z-floating);
}

/* Text meant only for screen readers. */
.screen-reader-text {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  word-wrap: normal !important;
  border: 0;
}
.screen-reader-text:focus {
  display: block;
  height: auto;
  left: 5px;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
  clip: auto !important;
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip-path: none;
  color: #21759b;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

.alignleft {
  /* rtl:ignore */
  float: left;
  margin-bottom: 1.5em;
  /* rtl:ignore */
  margin-right: 1.5em;
}

.alignright {
  /* rtl:ignore */
  float: right;
  margin-bottom: 1.5em;
  /* rtl:ignore */
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

.gallery {
  display: grid;
  grid-gap: 1.5em;
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption,.sticky {
  display: block;
}

.updated:not(.published) {
  display: none;
}

.c-block-end-border-heading {
  border-block-end: 1px solid;
  padding-block-end: 12px;
}

.c-block-end-border-heading--none {
  border-block-end: revert;
  padding-block-end: revert;
}

.c-block-end-short-border-heading {
  --_border-width: 1;
  padding-block-end: calc((20 + var(--_border-width)) * 1px);
  position: relative;
}
.c-block-end-short-border-heading::before {
  background: currentcolor;
  block-size: calc(var(--_border-width) * 1px);
  content: "";
  inline-size: 32px;
  inset-block-end: 0;
  inset-inline-start: 0;
  position: absolute;
}

.c-block-end-short-border-heading.-none,
.c-block-end-short-border-heading--none {
  padding-block-end: revert;
}
.c-block-end-short-border-heading.-none::before,
.c-block-end-short-border-heading--none::before {
  content: revert;
}

.c-concept-media {
  position: relative;
}
.c-concept-media > div {
  align-items: center;
  display: block grid;
  grid-template-areas: "content" "image";
}
.c-concept-media.-image-1 {
  --_padding-block-end: clamp(min(36, 80) * var(--rem-ratio), 36 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 36) / (var(--viewport-max) - var(--viewport-min)), max(36, 80) * var(--rem-ratio));
  padding-block-end: var(--_padding-block-end);
}
.c-concept-media.-image-1::after {
  --_block-size: clamp(min(239, 520) * var(--rem-ratio), 239 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (520 - 239) / (var(--viewport-max) - var(--viewport-min)), max(239, 520) * var(--rem-ratio));
  background: var(--color-ground-dark);
  block-size: var(--_block-size);
  content: "";
  inline-size: 49.0666666667dvi;
  inset-block-end: 0;
  inset-inline-end: 0;
  position: absolute;
  z-index: var(--z-background);
}
.c-concept-media.-image-2 {
  --_padding-block-end: clamp(min(20, 60) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 60) * var(--rem-ratio));
  padding-block-end: var(--_padding-block-end);
}
.c-concept-media.-image-2::after {
  --_block-size: clamp(min(227, 437) * var(--rem-ratio), 227 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (437 - 227) / (var(--viewport-max) - var(--viewport-min)), max(227, 437) * var(--rem-ratio));
  background: var(--color-ground-dark);
  block-size: var(--_block-size);
  content: "";
  inline-size: 75.7333333333dvi;
  inset-block-end: 0;
  inset-inline-start: calc(50% - 50dvi);
  position: absolute;
  z-index: var(--z-background);
}
.c-concept-media.-image-3 {
  --_padding-block-end: clamp(min(48, 100) * var(--rem-ratio), 48 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 48) / (var(--viewport-max) - var(--viewport-min)), max(48, 100) * var(--rem-ratio));
  padding-block-end: var(--_padding-block-end);
}
.c-concept-media.-image-3::after {
  --_block-size: clamp(min(100, 199) * var(--rem-ratio), 100 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (199 - 100) / (var(--viewport-max) - var(--viewport-min)), max(100, 199) * var(--rem-ratio));
  background: var(--color-ground-dark);
  block-size: var(--_block-size);
  content: "";
  inline-size: 89.3333333333dvi;
  inset-block-end: 0;
  inset-inline-end: calc(50% - 50dvi);
  position: absolute;
  z-index: var(--z-background);
}

.c-concept-media__content {
  grid-area: content;
}

.c-concept-media__heading {
  font-size: var(--font-size-20-28);
  font-weight: 700;
  line-height: var(--line-height-20-40);
}

.c-concept-media__body {
  --_margin-block-start: clamp(min(32, 26) * var(--rem-ratio), 32 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (26 - 32) / (var(--viewport-max) - var(--viewport-min)), max(32, 26) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.c-concept-media__text {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-14-28);
}

.c-concept-media__image {
  grid-area: image;
  margin-block-start: var(--_margin-block-start);
  margin-block-start: 36px;
}
.c-concept-media__image > div {
  block-size: 100%;
  padding-block: 0;
  position: relative;
}
.c-concept-media__image:where(.c-concept-media.-image-1 *) > div {
  aspect-ratio: 1.8206521739;
}
.c-concept-media__image:where(.c-concept-media.-image-1 *) figure:nth-of-type(1) img {
  aspect-ratio: 1.597826087;
  inline-size: 87.7611940299%;
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-concept-media__image:where(.c-concept-media.-image-2 *) > div {
  aspect-ratio: 1.1921708185;
}
.c-concept-media__image:where(.c-concept-media.-image-2 *) figure:nth-of-type(1) img {
  aspect-ratio: 1.3349056604;
  inline-size: 84.4776119403%;
  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 67%;
     object-position: 50% 67%;
}
.c-concept-media__image:where(.c-concept-media.-image-2 *) figure:nth-of-type(2) img {
  aspect-ratio: 1.3260869565;
  inline-size: 54.6268656716%;
  inset-block-end: 0;
  inset-inline-start: 0;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 45%;
     object-position: 50% 45%;
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) > div {
  --_gap: clamp(min(11, 20) * var(--rem-ratio), 11 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 11) / (var(--viewport-max) - var(--viewport-min)), max(11, 20) * var(--rem-ratio));
  display: block grid;
  gap: var(--_gap);
  grid-template-areas: "image-1 image-1" "image-2 image-3";
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) figure:nth-of-type(1) {
  grid-area: image-1;
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) figure:nth-of-type(1) img {
  aspect-ratio: 1.6028708134;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) figure:nth-of-type(2) {
  grid-area: image-2;
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) figure:nth-of-type(2) img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) figure:nth-of-type(3) {
  grid-area: image-3;
}
.c-concept-media__image:where(.c-concept-media.-image-3 *) figure:nth-of-type(3) img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-dotted-line {
  --_default-margin-block-start: clamp(min(22, 20) * var(--rem-ratio), 22 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 22) / (var(--viewport-max) - var(--viewport-min)), max(22, 20) * var(--rem-ratio));
  --_default-margin-block-end: clamp(min(22, 36) * var(--rem-ratio), 22 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (36 - 22) / (var(--viewport-max) - var(--viewport-min)), max(22, 36) * var(--rem-ratio));
  --_default-background-position: clamp(min(1, -4) * var(--rem-ratio), 1 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-4 - 1) / (var(--viewport-max) - var(--viewport-min)), max(1, -4) * var(--rem-ratio));
  --_block-size: var(--c-dotted-line-block-size, 3px);
  --_margin-block-start: var(--c-dotted-line-margin-block-start, var(--_default-margin-block-start));
  --_margin-block-end: var(--c-dotted-line-margin-block-end, var(--_default-margin-block-end));
  --_margin-inline-start: var(--c-dotted-line-margin-inline-start, 0);
  --_margin-inline-end: var(--c-dotted-line-margin-inline-end, 0);
  --_color: var(--c-dotted-line-color, var(--color-decorate-main));
  --_space: var(--c-dotted-line-space, calc(11 / 3));
  --_background-position: var(--c-dotted-line-background-position, var(--_default-background-position));
}
.c-dotted-line::after {
  --_background-size: calc(var(--_space) * var(--_block-size)) var(--_block-size);
  background-image: radial-gradient(circle, currentcolor calc(var(--_block-size) / 2), transparent calc(var(--_block-size) / 2));
  background-position: var(--_background-position);
  background-repeat: repeat-x;
  background-size: var(--_background-size);
  block-size: var(--_block-size);
  color: var(--_color);
  content: "";
  display: block;
  margin-block: var(--_margin-block-start) var(--_margin-block-end);
  margin-inline: var(--_margin-inline-start) var(--_margin-inline-end);
}

.c-double-line-heading {
  --_border-width-1: var(--double-line-heading-border-width-1, 1px);
  --_border-color-1: var(--double-line-heading-border-color-1, currentcolor);
  --_border-offset: calc(var(--double-line-heading-border-offset, 2px) + var(--_border-width-1));
  --_border-offset-color: var(--double-line-heading-border-offset-color, var(--color-ground-light));
  --_border-width-2: calc(var(--double-line-heading-border-width-2, 2px) + var(--_border-offset));
  --_border-color-2: var(--double-line-heading-border-color-2, currentcolor);
  position: relative;
}
.c-double-line-heading::before {
  box-shadow: 0 var(--_border-width-1) 0 0 var(--_border-color-1), 0 var(--_border-offset) 0 0 var(--_border-offset-color), 0 var(--_border-width-2) 0 0 var(--_border-color-2), 0 calc(var(--_border-width-1) * -1) 0 0 var(--_border-color-1), 0 calc(var(--_border-offset) * -1) 0 0 var(--_border-offset-color), 0 calc(var(--_border-width-2) * -1) 0 0 var(--_border-color-2);
  content: "";
  inset-block: var(--_border-width-2);
  inset-inline: 0;
  position: absolute;
}

.c-first-view-heading {
  --_row-gap: clamp(min(0, 6) * var(--rem-ratio), 0 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (6 - 0) / (var(--viewport-max) - var(--viewport-min)), max(0, 6) * var(--rem-ratio));
  align-content: center;
  color: var(--color-text-white);
  display: block grid;
  justify-items: center;
  row-gap: var(--_row-gap);
}

.c-first-view-heading__main {
  --_letter-spacing: clamp(min(6.4, 14.4) * var(--rem-ratio), 6.4 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (14.4 - 6.4) / (var(--viewport-max) - var(--viewport-min)), max(6.4, 14.4) * var(--rem-ratio));
  font-family: var(--font-family-en-head);
  font-size: var(--font-size-32-72);
  font-weight: 700;
  letter-spacing: var(--_letter-spacing);
  line-height: var(--line-height-32-40);
  margin-inline-end: calc(var(--_letter-spacing) * -1);
}

.c-first-view-heading__sub {
  --_letter-spacing: clamp(min(0.96, 1.28) * var(--rem-ratio), 0.96 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (1.28 - 0.96) / (var(--viewport-max) - var(--viewport-min)), max(0.96, 1.28) * var(--rem-ratio));
  font-size: var(--font-size-12-16);
  font-weight: 700;
  letter-spacing: var(--_letter-spacing);
  line-height: var(--line-height-12-17);
  margin-inline-end: calc(var(--_letter-spacing) * -1);
}

.c-hamburger-icon {
  --_button-size: 60;
  --_transition-duration: 0.5s;
  aspect-ratio: 1;
  display: block flow;
  inline-size: calc(var(--_button-size) * 1px);
  position: relative;
}

.c-hamburger-icon__icon {
  --_inline-size: 27;
  --_block-size: 16;
  --_border-width: 2;
  --_cross-rotate: 45deg;
  --_x-rotate: 180deg;
  block-size: calc(var(--_block-size) * 1px);
  display: block grid;
  grid-template-areas: "bar1" "bar2" "bar3";
  place-content: space-between center;
  transition-duration: var(--_transition-duration);
  transition-property: rotate;
  transition-timing-function: var(--ease-out-sine);
}
.c-hamburger-icon__icon:where(.c-hamburger-icon.is-active *) {
  rotate: 1 0 0 var(--_x-rotate);
}
.c-hamburger-icon__icon span {
  background: var(--color-decorate-white);
  block-size: calc(var(--_border-width) * 1px);
  border-radius: calc(infinity * 1px);
  inline-size: calc(var(--_inline-size) * 1px);
  transition-duration: var(--_transition-duration);
  transition-property: background-color, opacity, rotate;
  transition-timing-function: var(--ease-out-sine);
}
.c-hamburger-icon__icon span:where(.c-hamburger-icon.is-active *) {
  background: var(--color-decorate-main);
}
.c-hamburger-icon__icon span:where(.c-hamburger-icon.is-active *):nth-of-type(1) {
  opacity: 0;
}
.c-hamburger-icon__icon span:where(.c-hamburger-icon.is-active *):nth-of-type(2) {
  rotate: z calc(var(--_cross-rotate) * -1);
  translate: 0 calc(var(--_border-width) / 2 / 2 * -1px);
}
.c-hamburger-icon__icon span:where(.c-hamburger-icon.is-active *):nth-of-type(3) {
  rotate: z var(--_cross-rotate);
  translate: 0 calc((var(--_block-size) - var(--_border-width)) / 2 * -1px);
}
.c-hamburger-icon__icon span:nth-of-type(1) {
  grid-area: bar1;
}
.c-hamburger-icon__icon span:nth-of-type(2) {
  grid-area: bar2;
}
.c-hamburger-icon__icon span:nth-of-type(3) {
  grid-area: bar3;
}

.c-hamburger-icon__background {
  background: var(--color-decorate-main);
  border-radius: calc(infinity * 1px);
  display: block flow;
  inset: 0;
  position: absolute;
  transition-duration: var(--_transition-duration);
  transition-property: background-color;
  transition-timing-function: var(--ease-out-sine);
  z-index: var(--z-background);
}
.c-hamburger-icon__background:where(.c-hamburger-icon.is-active *) {
  background: var(--color-decorate-white);
}

.c-hover-press-button {
  display: block grid;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  min-inline-size: 295px;
  padding-block: 24px 31px;
  padding-inline: 15px 21px;
  position: relative;
  transition-duration: 0.5s;
  transition-property: padding;
  transition-timing-function: var(--ease-out-expo);
  z-index: var(--z-foreground);
}
.c-hover-press-button::before {
  background: var(--color-button-ground);
  content: "";
  inset-block: 0 6px;
  inset-inline: 0 6px;
  position: absolute;
  transition-duration: 0.5s;
  transition-property: inset;
  transition-timing-function: var(--ease-out-expo);
  z-index: var(--z-background);
}
.c-hover-press-button::after {
  border-block-end: 1px solid var(--color-button-ground);
  border-inline-end: 1px solid var(--color-button-ground);
  content: "";
  inset-block: 6px 0;
  inset-inline: 6px 0;
  position: absolute;
  z-index: calc(var(--z-background) - 1);
}
.c-hover-press-button:focus-visible {
  opacity: revert;
  padding-block: 30px 25px;
  padding-inline: 21px 15px;
}
.c-hover-press-button:focus-visible::before {
  inset-block: 6px 0;
  inset-inline: 6px 0;
}
.c-hover-press-button.-letter-spacing-1em {
  --_letter-spacing: 1em;
}
.c-hover-press-button__text {
  color: var(--color-button-text);
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: var(--line-height-16-23);
  margin-inline-end: calc(var(--_letter-spacing, 0) * -1);
  text-align: center;
}
.c-hover-press-button__text:where(.c-hover-press-button.-letter-spacing-1em *) {
  letter-spacing: var(--_letter-spacing, 0);
}
.c-hover-press-button__text:where(.c-hover-press-button.-arrow *) {
  position: relative;
}
.c-hover-press-button__text:where(.c-hover-press-button.-arrow *)::after {
  background-image: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.21227 6.00091L5.86892 0.824286C6.04369 0.635919 6.04369 0.331047 5.86892 0.141275C5.7855 0.0508805 5.67171 0 5.55298 0C5.43424 0 5.32046 0.0508805 5.23703 0.141275L0.131076 5.65836C-0.0436919 5.84743 -0.0436919 6.15301 0.131076 6.34138L5.23703 11.8585C5.4118 12.0475 5.69414 12.0468 5.86892 11.8585C6.04369 11.6708 6.04369 11.3652 5.86892 11.1755L1.21225 6.00093L1.21227 6.00091Z" fill="%23fff"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  inline-size: 8px;
  inset-block: 0;
  inset-inline-end: var(--_letter-spacing, 0);
  position: absolute;
  scale: -1 1;
}

.c-hover-press-input-button {
  --_letter-spacing: 0;
  display: block grid;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  position: relative;
}
.c-hover-press-input-button :where([type=button], [type=reset], [type=submit]) {
  color: var(--color-button-text);
  font-size: var(--font-size-16);
  font-weight: 700;
  letter-spacing: var(--_letter-spacing);
  line-height: var(--line-height-16-23);
  min-inline-size: 295px;
  padding-block: 24px 31px;
  padding-inline: 15px calc(21px + var(--_letter-spacing) * -1);
  text-align: center;
  transition-duration: 0.5s;
  transition-property: padding;
  transition-timing-function: var(--ease-out-expo);
}
.c-hover-press-input-button::before {
  background: var(--color-button-ground);
  content: "";
  inset-block: 0 6px;
  inset-inline: 0 6px;
  position: absolute;
  transition-duration: 0.5s;
  transition-property: inset;
  transition-timing-function: var(--ease-out-expo);
  z-index: var(--z-background);
}
.c-hover-press-input-button::after {
  border-block-end: 1px solid var(--color-button-ground);
  border-inline-end: 1px solid var(--color-button-ground);
  content: "";
  inset-block: 6px 0;
  inset-inline: 6px 0;
  position: absolute;
  z-index: calc(var(--z-background) - 1);
}
.c-hover-press-input-button:where(.c-hover-press-input-button:has(:where([type=button], [type=reset], [type=submit]):focus-visible)) :where([type=button], [type=reset], [type=submit]) {
  opacity: revert;
  padding-block: 30px 25px;
  padding-inline: 21px calc(15px + var(--_letter-spacing) * -1);
}
.c-hover-press-input-button:where(.c-hover-press-input-button:has(:where([type=button], [type=reset], [type=submit]):focus-visible))::before {
  inset-block: 6px 0;
  inset-inline: 6px 0;
}
.c-hover-press-input-button.-letter-spacing-1em {
  --_letter-spacing: 1em;
}

.c-inline-start-border-heading {
  --_padding-inline-start: clamp(min(12, 16) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 16) * var(--rem-ratio));
  --_border-width: clamp(min(4, 6) * var(--rem-ratio), 4 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (6 - 4) / (var(--viewport-max) - var(--viewport-min)), max(4, 6) * var(--rem-ratio));
  border-inline-start: var(--_border-width) solid;
  padding-inline-start: var(--_padding-inline-start);
}

.c-inline-start-border-heading--none {
  border-inline-start: revert;
  padding-inline-start: revert;
}

.c-lunch-set-card {
  display: block grid;
  grid-row: span 2;
  grid-template-areas: "thumbnail" "text";
  grid-template-rows: subgrid;
  place-items: center center;
  row-gap: 0;
}

.c-lunch-set-card__text {
  grid-area: text;
  margin-block-start: 4px;
}
.c-lunch-set-card__text svg {
  --_block-size: clamp(min(12, 25) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (25 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 25) * var(--rem-ratio));
  block-size: var(--_block-size);
  color: var(--color-text-main);
  inline-size: auto;
}

.c-lunch-set-card__thumbnail {
  grid-area: thumbnail;
}
.c-lunch-set-card__thumbnail img {
  aspect-ratio: 1.024691358;
  -o-object-fit: contain;
     object-fit: contain;
}

.c-menu-card {
  display: block grid;
  grid-row: span 3;
  grid-template-areas: "thumbnail" "title" "content";
  grid-template-rows: subgrid;
  row-gap: 0;
}
.c-menu-card .entry-header {
  grid-area: title;
}
.c-menu-card .entry-title {
  --_margin-block-start: clamp(min(8, 12) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 12) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}
.c-menu-card .post-thumbnail {
  grid-area: thumbnail;
}
.c-menu-card .entry-content {
  grid-area: content;
  margin: revert;
}

.c-menu-card__title {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-14-20);
}
.c-menu-card__title:where(.c-menu-card.-ground-menu *) {
  font-size: var(--font-size-14-20);
  line-height: var(--line-height-14-20);
}

.c-menu-card__thumbnail img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
.c-menu-card__thumbnail:where(.c-menu-card.-ground-menu *) {
  --_padding: clamp(min(5, 8) * var(--rem-ratio), 5 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (8 - 5) / (var(--viewport-max) - var(--viewport-min)), max(5, 8) * var(--rem-ratio));
  background: var(--color-ground-white);
  padding: var(--_padding);
}

.c-menu-card__price {
  font-family: var(--_font-family-en-menu);
  font-size: var(--font-size-24);
  font-weight: 400;
  line-height: var(--line-height-24-33);
  text-align: center;
}
.c-menu-card__price:where(.c-menu-card.-ground-menu *) {
  font-size: var(--font-size-24-32);
  line-height: var(--line-height-24-33);
  text-align: revert;
}

.c-page-navigation .page-links {
  align-items: center;
  display: block flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.c-page-navigation .post-page-numbers {
  align-items: center;
  aspect-ratio: 1;
  background: var(--color-ground-white);
  border: 1px solid;
  border-radius: calc(infinity * 1px);
  display: block grid;
  font-size: var(--font-size-16);
  font-weight: 500;
  justify-content: center;
  line-height: var(--line-height-16-23);
  min-block-size: 40px;
}
.c-page-navigation :where(.prev, .next) {
  display: block grid;
}
.c-page-navigation :where(.prev, .next)::before {
  aspect-ratio: 0.5;
  background-image: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.21227 6.00091L5.86892 0.824286C6.04369 0.635919 6.04369 0.331047 5.86892 0.141275C5.7855 0.0508805 5.67171 0 5.55298 0C5.43424 0 5.32046 0.0508805 5.23703 0.141275L0.131076 5.65836C-0.0436919 5.84743 -0.0436919 6.15301 0.131076 6.34138L5.23703 11.8585C5.4118 12.0475 5.69414 12.0468 5.86892 11.8585C6.04369 11.6708 6.04369 11.3652 5.86892 11.1755L1.21225 6.00093L1.21227 6.00091Z" fill="%23382620"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inline-size: 6px;
}
.c-page-navigation .next {
  scale: -1 1;
}
.c-page-navigation .current {
  background: var(--color-ground-main);
  border-color: var(--color-ground-main);
  color: var(--color-text-white);
}

.c-pagetop {
  aspect-ratio: 1;
  background: var(--color-ground-white);
  border-radius: calc(infinity * 1px);
  display: block grid;
  inline-size: 44px;
  place-items: center;
  position: relative;
}
.c-pagetop::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.21227 6.00091L5.86892 0.824286C6.04369 0.635919 6.04369 0.331047 5.86892 0.141275C5.7855 0.0508805 5.67171 0 5.55298 0C5.43424 0 5.32046 0.0508805 5.23703 0.141275L0.131076 5.65836C-0.0436919 5.84743 -0.0436919 6.15301 0.131076 6.34138L5.23703 11.8585C5.4118 12.0475 5.69414 12.0468 5.86892 11.8585C6.04369 11.6708 6.04369 11.3652 5.86892 11.1755L1.21225 6.00093L1.21227 6.00091Z" fill="%23382620"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  inline-size: 12px;
  inset-block: 0;
  position: absolute;
  rotate: 90deg;
}

.c-pagination .nav-links {
  display: flex;
  -moz-column-gap: 12px;
  align-items: center;
       column-gap: 12px;
  justify-content: center;
}
.c-pagination .nav-links:not(:has(.prev))::before {
  aspect-ratio: 1;
  content: "";
  inline-size: 40px;
}
.c-pagination .nav-links:not(:has(.next))::after {
  aspect-ratio: 1;
  content: "";
  inline-size: 40px;
}
.c-pagination .page-numbers {
  align-items: center;
  aspect-ratio: 1;
  background: var(--color-ground-white);
  border: 1px solid;
  border-radius: calc(infinity * 1px);
  display: block grid;
  font-size: var(--font-size-16);
  font-weight: 500;
  justify-content: center;
  line-height: var(--line-height-16-23);
  min-block-size: 40px;
}
.c-pagination .page-numbers:where(.prev, .next)::before {
  aspect-ratio: 0.5;
  background-image: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.21227 6.00091L5.86892 0.824286C6.04369 0.635919 6.04369 0.331047 5.86892 0.141275C5.7855 0.0508805 5.67171 0 5.55298 0C5.43424 0 5.32046 0.0508805 5.23703 0.141275L0.131076 5.65836C-0.0436919 5.84743 -0.0436919 6.15301 0.131076 6.34138L5.23703 11.8585C5.4118 12.0475 5.69414 12.0468 5.86892 11.8585C6.04369 11.6708 6.04369 11.3652 5.86892 11.1755L1.21225 6.00093L1.21227 6.00091Z" fill="%23382620"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inline-size: 6px;
}
.c-pagination .page-numbers:where(.prev, .next).next {
  scale: -1 1;
}
.c-pagination .current {
  background: var(--color-ground-main);
  border-color: var(--color-ground-main);
  color: var(--color-text-white);
}

.c-pasta-card {
  --_row-gap: clamp(min(6, 16) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 16) * var(--rem-ratio));
  align-content: start;
  display: block grid;
  grid-template-areas: "thumbnail" "title";
  row-gap: var(--_row-gap);
}

.c-pasta-card__title {
  --_column-gap: clamp(min(6, 12) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 12) * var(--rem-ratio));
  display: block flex;
  grid-area: title;
  -moz-column-gap: var(--_column-gap);
  align-items: start;
       column-gap: var(--_column-gap);
  font-size: var(--font-size-14-18);
  font-weight: 700;
  line-height: var(--line-height-14-20);
}

.c-pasta-card__number {
  --_padding-block-start: clamp(min(0, 4) * var(--rem-ratio), 0 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (4 - 0) / (var(--viewport-max) - var(--viewport-min)), max(0, 4) * var(--rem-ratio));
  --_padding-block-end: clamp(min(1, 6) * var(--rem-ratio), 1 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (6 - 1) / (var(--viewport-max) - var(--viewport-min)), max(1, 6) * var(--rem-ratio));
  align-items: center;
  background: var(--color-ground-black);
  color: var(--color-text-white);
  display: block grid;
  flex-shrink: 0;
  font-family: var(--font-family-en-nav);
  font-size: var(--font-size-19-32);
  font-weight: 400;
  inline-size: calc(1lh + var(--_padding-block-start) + var(--_padding-block-end));
  justify-content: center;
  line-height: var(--line-height-19-23);
  margin-block-start: 2px;
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
}

.c-pasta-card__thumbnail {
  grid-area: thumbnail;
}
.c-pasta-card__thumbnail img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-pickup-post-card__content {
  --_padding: clamp(min(12, 16) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 16) * var(--rem-ratio));
  align-items: center;
  background: var(--color-ground-white-translucent);
  display: block grid;
  gap: 10px 16px;
  grid-template-areas: "thumbnail body" "thumbnail header";
  grid-template-columns: minmax(auto, 120px) minmax(195px, 1fr);
  padding: var(--_padding);
  position: relative;
}

.c-pickup-post-card__thumbnail {
  grid-area: thumbnail;
}
.c-pickup-post-card__thumbnail img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-pickup-post-card__category-label {
  color: var(--color-text-white);
  font-size: var(--font-size-12);
  font-weight: 700;
  inset-block-start: 8px;
  inset-inline-start: -8px;
  line-height: var(--line-height-12-17);
  position: absolute;
}

.c-pickup-post-card__header {
  align-self: start;
  grid-area: header;
}

.c-pickup-post-card__title {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-size: var(--font-size-12-14);
  font-weight: 700;
  line-height: var(--line-height-12-18);
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.c-pickup-post-card__body {
  align-self: end;
  grid-area: body;
}

.c-pickup-post-card__meta {
  font-size: var(--font-size-12);
  font-weight: 500;
  line-height: var(--line-height-12-17);
}

.c-pickup-post-card__balloon {
  --_inset-block-start: clamp(min(-40, -76) * var(--rem-ratio), -40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-76 - -40) / (var(--viewport-max) - var(--viewport-min)), max(-40, -76) * var(--rem-ratio));
  inset-block-start: var(--_inset-block-start);
  inset-inline-end: 0;
  position: absolute;
}
.c-pickup-post-card__balloon svg {
  --_inline-size: clamp(min(125, 168) * var(--rem-ratio), 125 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (168 - 125) / (var(--viewport-max) - var(--viewport-min)), max(125, 168) * var(--rem-ratio));
  inline-size: var(--_inline-size);
}

.c-post-card__link:focus-visible {
  opacity: revert;
}

.c-post-card__content {
  block-size: 100%;
  display: block grid;
  grid-template-areas: "thumbnail" "header" "body";
  grid-template-rows: auto 1fr auto;
  position: relative;
}
.c-post-card__content:is(.c-post-card.-front-page *) {
  block-size: revert;
}

.c-post-card__thumbnail {
  grid-area: thumbnail;
  overflow: hidden;
}
.c-post-card__thumbnail img {
  aspect-ratio: 1.595959596;
  -o-object-fit: cover;
     object-fit: cover;
  transition-duration: 0.5s;
  transition-property: scale;
  transition-timing-function: var(--ease-out-expo);
}
.c-post-card__thumbnail img:is(.c-post-card.-latest *) {
  aspect-ratio: 1.6028708134;
}
.c-post-card__thumbnail img:is(.c-post-card__link:focus-visible *) {
  scale: 1.1;
}

.c-post-card__category-label {
  --open-cafe-padding-block-start: clamp(min(2, 4) * var(--rem-ratio), 2 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (4 - 2) / (var(--viewport-max) - var(--viewport-min)), max(2, 4) * var(--rem-ratio));
  --open-cafe-padding-inline-start: clamp(min(10, 14) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (14 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 14) * var(--rem-ratio));
  --open-cafe-padding-inline-end: clamp(min(6, 8) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (8 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 8) * var(--rem-ratio));
  --_inset-block-start: clamp(min(10, 16) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 16) * var(--rem-ratio));
  --open-cafe-padding-block-end: calc(3 * var(--rem-ratio));
  color: var(--color-text-white);
  font-size: var(--font-size-12-14);
  font-weight: 700;
  inset-block-start: var(--_inset-block-start);
  inset-inline-start: -8px;
  line-height: var(--line-height-12-17);
  position: absolute;
}
.c-post-card__category-label:is(.c-post-card.-related *), .c-post-card__category-label:is(.c-post-card.-front-page *) {
  --_inset-block-start: clamp(min(10, 12) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 12) * var(--rem-ratio));
  font-size: var(--font-size-12);
  line-height: var(--line-height-12-17);
}
.c-post-card__category-label:is(.c-post-card.-latest *) {
  --open-cafe-padding-block-start: calc(4 * var(--rem-ratio));
  --open-cafe-padding-block-end: calc(3 * var(--rem-ratio));
  --_inset-block-start: clamp(min(19, 20) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 20) * var(--rem-ratio));
  font-size: var(--font-size-12-16);
  line-height: var(--line-height-12-17);
}

.c-post-card__header {
  --_margin-block-start: clamp(min(8, 11) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (11 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 11) * var(--rem-ratio));
  grid-area: header;
  margin-block-start: var(--_margin-block-start);
}
.c-post-card__header:is(.c-post-card.-related *) {
  --_margin-block-start: clamp(min(8, 10) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (10 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 10) * var(--rem-ratio));
}
.c-post-card__header:is(.c-post-card.-front-page *) {
  --_margin-block-start: clamp(min(6, 10) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (10 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 10) * var(--rem-ratio));
}
.c-post-card__header:is(.c-post-card.-latest *) {
  --_margin-block-start: clamp(min(10, 16) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 16) * var(--rem-ratio));
}

.c-post-card__title {
  -webkit-line-clamp: 4;
  display: -webkit-box;
  font-size: var(--font-size-12-16);
  font-weight: 700;
  line-height: var(--line-height-12-18);
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.c-post-card__title:is(.c-post-card.-latest *) {
  font-size: var(--font-size-14-20);
  line-height: var(--line-height-14-24);
}

.c-post-card__body {
  --_margin-block-start: clamp(min(7, 12) * var(--rem-ratio), 7 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 7) / (var(--viewport-max) - var(--viewport-min)), max(7, 12) * var(--rem-ratio));
  grid-area: body;
  margin-block-start: var(--_margin-block-start);
}
.c-post-card__body:is(.c-post-card.-related *), .c-post-card__body:is(.c-post-card.-front-page *) {
  --_margin-block-start: clamp(min(8, 10) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (10 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 10) * var(--rem-ratio));
}
.c-post-card__body:is(.c-post-card.-latest *) {
  --_margin-block-start: calc(10 * var(--rem-ratio));
}

.c-post-card__excerpt {
  font-size: var(--font-size-12-14);
  font-weight: 400;
  line-height: var(--line-height-12-18);
}

.c-post-card__meta {
  font-size: var(--font-size-12-14);
  font-weight: 500;
  line-height: var(--line-height-12-17);
}
.c-post-card__meta:is(.c-post-card.-related *) {
  font-size: var(--font-size-12);
  line-height: var(--line-height-12-17);
}
.c-post-card__meta:is(.c-post-card.-latest *) {
  --_margin-block-start: clamp(min(10, 12) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 12) * var(--rem-ratio));
  font-size: var(--font-size-12-14);
  line-height: var(--line-height-12-17);
  margin-block-start: var(--_margin-block-start);
}

.c-post-navigation {
  font-size: var(--font-size-14-16);
  font-weight: 700;
  line-height: var(--line-height-14-24);
}
.c-post-navigation .nav-links {
  position: relative;
}
.c-post-navigation .nav-prev,
.c-post-navigation .nav-next,
.c-post-navigation .nav-archive {
  --_border-width: 1;
}
.c-post-navigation .nav-prev a,
.c-post-navigation .nav-next a,
.c-post-navigation .nav-archive a {
  border: calc(var(--_border-width) * 1px) solid transparent;
  color: var(--color-text-main);
  display: block flow;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  padding-block: calc((8 - var(--_border-width)) * 1px);
}
.c-post-navigation .nav-prev,
.c-post-navigation .nav-next {
  inset-block: 0;
  position: absolute;
}
.c-post-navigation .nav-prev a,
.c-post-navigation .nav-next a {
  padding-inline: calc((16 - var(--_border-width)) * 1px);
  position: relative;
}
.c-post-navigation .nav-prev a::before,
.c-post-navigation .nav-next a::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.21227 6.00091L5.86892 0.824286C6.04369 0.635919 6.04369 0.331047 5.86892 0.141275C5.7855 0.0508805 5.67171 0 5.55298 0C5.43424 0 5.32046 0.0508805 5.23703 0.141275L0.131076 5.65836C-0.0436919 5.84743 -0.0436919 6.15301 0.131076 6.34138L5.23703 11.8585C5.4118 12.0475 5.69414 12.0468 5.86892 11.8585C6.04369 11.6708 6.04369 11.3652 5.86892 11.1755L1.21225 6.00093L1.21227 6.00091Z" fill="%23382620"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  inline-size: 6px;
  inset-block: 0;
  position: absolute;
}
.c-post-navigation .nav-prev,.c-post-navigation .nav-prev a::before {
  inset-inline-start: 0;
}
.c-post-navigation .nav-next {
  inset-inline-end: 0;
}
.c-post-navigation .nav-next a::before {
  inset-inline-end: 0;
  scale: -1 1;
}
.c-post-navigation .nav-archive a {
  --_padding-inline: clamp(min(28, 36) * var(--rem-ratio), 28 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (36 - 28) / (var(--viewport-max) - var(--viewport-min)), max(28, 36) * var(--rem-ratio));
  border-color: var(--color-text-main);
  margin-inline: auto;
  padding-inline: calc(var(--_padding-inline) - var(--_border-width) * 1px);
}

.c-product-card {
  align-content: start;
  display: block grid;
  grid-template-areas: "thumbnail" "head" "body";
}
.c-product-card.-special {
  grid-column: span 2/span 2;
  grid-row: span 2/span 2;
}

.c-product__thumbnail {
  grid-area: thumbnail;
}
.c-product__thumbnail img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-product__head {
  --_margin-block-start: clamp(min(8, 12) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 12) * var(--rem-ratio));
  grid-area: head;
  margin-block-start: var(--_margin-block-start);
}
.c-product__head:where(.c-product-card.-special *) {
  margin-block-start: 12px;
}

.c-product__title {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-14-20);
}
.c-product__title:where(.c-product-card.-special *) {
  font-size: var(--font-size-20-24);
  line-height: var(--line-height-20-29);
}

.c-product__body {
  grid-area: body;
}

.c-product__price {
  font-family: var(--font-family-en-menu);
  font-size: var(--font-size-24);
  font-weight: 400;
  line-height: var(--line-height-24-33);
  margin-inline-end: 4px;
  text-align: center;
}
.c-product__price:where(.c-product-card.-special *) {
  font-size: var(--font-size-28-32);
  line-height: var(--line-height-28-38);
  margin-inline-end: 5px;
}

.c-product__button {
  margin-block-start: 12px;
}

.c-product__button-link {
  margin-inline: auto;
}

.c-products-message-card {
  --_padding-block-start: clamp(min(37, 80) * var(--rem-ratio), 37 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 37) / (var(--viewport-max) - var(--viewport-min)), max(37, 80) * var(--rem-ratio));
  --_padding-block-end: clamp(min(40, 80) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 80) * var(--rem-ratio));
  --_border-width: 4;
  background: var(--color-ground-white);
  border: calc(var(--_border-width) * 1px) solid var(--color-decorate-main);
  padding-block: calc(var(--_padding-block-start) - var(--_border-width) * 1px) calc(var(--_padding-block-end) - var(--_border-width) * 1px);
  position: relative;
}
.c-products-message-card::before {
  border: 1px solid var(--color-decorate-main);
  content: "";
  inset: calc((10 - var(--_border-width)) * 1px);
  pointer-events: none;
  position: absolute;
}

.c-products-message-card__inner {
  --_padding-inline: clamp(min(40, 60) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 60) * var(--rem-ratio));
  padding-inline: calc(var(--_padding-inline) - var(--_border-width) * 1px);
}

.c-products-message-card__media-content {
  display: block grid;
}

.c-products-message-card__heading {
  color: var(--color-text-main);
  font-size: var(--font-size-16-24);
  font-weight: 700;
  line-height: var(--line-height-16-28);
  text-align: center;
}

.c-products-message-card__message {
  color: var(--color-text-main);
  font-size: var(--font-size-12-16);
  font-weight: 500;
  line-height: var(--line-height-12-24);
}

.c-products-message-card__image {
  margin-block-start: 34px;
}
.c-ribbon-heading {
  --_background: var(--color-ground-black);
  background: var(--_background);
  color: var(--color-text-white);
  font-size: var(--font-size-14-18);
  font-weight: 700;
  line-height: var(--line-height-14-20);
  padding-block: 5px 7px;
  padding-inline: 23px;
  position: relative;
}
.c-ribbon-heading::before, .c-ribbon-heading::after {
  background: var(--_background);
  block-size: 100%;
  clip-path: polygon(100% 0%, 72% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  content: "";
  inline-size: 29px;
  inset-block-start: 6px;
  position: absolute;
  z-index: var(--z-foreground);
}
.c-ribbon-heading::before {
  inset-inline-start: -18px;
  scale: -1 1;
}
.c-ribbon-heading::after {
  inset-inline-end: -18px;
}

.c-ribbon-label {
  --_padding-block-start: var(--open-cafe-padding-block-start, calc(2 * var(--rem-ratio)));
  --_padding-block-end: var(--open-cafe-padding-block-end, calc(3 * var(--rem-ratio)));
  --_padding-inline-start: var(--open-cafe-padding-inline-start, calc(10 * var(--rem-ratio)));
  --_padding-inline-end: var(--open-cafe-padding-inline-end, calc(6 * var(--rem-ratio)));
  background: var(--color-decorate-black);
  display: block flow;
  inset-inline-start: 0;
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
  padding-inline: var(--_padding-inline-start) var(--_padding-inline-end);
  position: relative;
}
.c-ribbon-label::before {
  background: var(--color-decorate-black);
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  content: "";
  inline-size: 16px;
  inset-block: 0;
  inset-inline-end: 0;
  position: absolute;
  translate: 50%;
}
.c-ribbon-label::after {
  background: var(--color-decorate-gray);
  content: "";
  inline-size: 50%;
  inset-block: 0;
  inset-inline-start: 0;
  position: absolute;
  rotate: 25deg;
  transform-origin: left bottom;
  z-index: var(--z-background);
}
.c-ribbon-label span {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.c-section-heading {
  --_row-gap: clamp(min(4, 7) * var(--rem-ratio), 4 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (7 - 4) / (var(--viewport-max) - var(--viewport-min)), max(4, 7) * var(--rem-ratio));
  align-content: center;
  display: block grid;
  justify-items: center;
  row-gap: var(--_row-gap);
}

.c-section-heading__main {
  --_letter-spacing: clamp(min(4, 10.4) * var(--rem-ratio), 4 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (10.4 - 4) / (var(--viewport-max) - var(--viewport-min)), max(4, 10.4) * var(--rem-ratio));
  font-family: var(--font-family-en-head);
  font-size: var(--font-size-40-52);
  font-weight: 700;
  letter-spacing: var(--_letter-spacing);
  line-height: var(--line-height-40-50);
  margin-inline-end: calc(var(--_letter-spacing) * -1);
}

.c-section-heading__sub {
  font-size: var(--font-size-12-14);
  font-weight: 700;
  line-height: var(--line-height-12-17);
}

.c-shop-card__title {
  --_padding-inline-start: clamp(min(8, 16) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 16) * var(--rem-ratio));
  border-inline-start: 6px solid;
  color: var(--color-text-main);
  font-size: var(--font-size-20-24);
  font-weight: 700;
  line-height: var(--line-height-20-29);
  padding-inline-start: var(--_padding-inline-start);
}

.c-shop-card__body {
  --_margin-block-start: clamp(min(20, 24) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 24) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}
.c-shop-card__body:where(.c-shop-card.-footer *) {
  margin-block-start: revert;
}

.c-shop-card__map {
  --_padding: clamp(min(5, 10) * var(--rem-ratio), 5 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (10 - 5) / (var(--viewport-max) - var(--viewport-min)), max(5, 10) * var(--rem-ratio));
  aspect-ratio: 1.7819148936;
  background: var(--color-ground-white);
  display: block grid;
  padding: var(--_padding);
}
.c-shop-card__map iframe {
  block-size: 100%;
  inline-size: 100%;
}

.c-shop-card__content {
  --_margin-block-start: clamp(min(18, 22) * var(--rem-ratio), 18 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (22 - 18) / (var(--viewport-max) - var(--viewport-min)), max(18, 22) * var(--rem-ratio));
  display: block grid;
  margin-block-start: var(--_margin-block-start);
  row-gap: 19px;
}
.c-shop-card__content:where(.c-shop-card.-footer *) {
  margin-block-start: 40px;
}

.c-shop-card__address,
.c-shop-card__info {
  --_row-gap: clamp(min(19, 23) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (23 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 23) * var(--rem-ratio));
  display: block grid;
  row-gap: var(--_row-gap);
}

.c-shop-card__block {
  --_border-width: 1;
  border-block-end: calc(var(--_border-width) * 1px) solid;
  display: block flex;
  padding-block-end: calc((12 - var(--_border-width)) * 1px);
}

.c-shop-card__label {
  min-inline-size: 80px;
}

.c-shop-card__label,.c-shop-card__value {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-14-24);
}

.c-simple-button {
  --_padding-block: clamp(min(6, 8) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (8 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 8) * var(--rem-ratio));
  --_padding-inline: clamp(min(16, 24) * var(--rem-ratio), 16 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 16) / (var(--viewport-max) - var(--viewport-min)), max(16, 24) * var(--rem-ratio));
  --_border-width: 1;
  background: var(--color-button-ground);
  border: calc(var(--_border-width) * 1px) solid var(--color-button-ground);
  color: var(--color-button-text);
  display: block flow;
  font-size: var(--font-size-12-14);
  font-weight: 700;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  line-height: var(--line-height-12-17);
  padding-block: calc(var(--_padding-block) - var(--_border-width) * 1px);
  padding-inline: calc(var(--_padding-inline) - var(--_border-width) * 1px);
  text-align: center;
  transition-duration: 0.5s;
  transition-property: color, background-color;
  transition-timing-function: var(--ease-out-expo);
}
.c-simple-button:focus-visible {
  background: var(--color-button-text);
  color: var(--color-button-ground);
  opacity: revert;
}

.c-tab-button {
  --_min-block-size: clamp(min(64, 69) * var(--rem-ratio), 64 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (69 - 64) / (var(--viewport-max) - var(--viewport-min)), max(64, 69) * var(--rem-ratio));
  align-items: center;
  background: var(--color-button-disable);
  color: var(--color-button-text);
  display: block grid;
  font-size: var(--font-size-14-16);
  font-weight: 700;
  line-height: var(--line-height-14-19);
  min-block-size: var(--_min-block-size);
  padding-block: 13px;
  padding-inline: 13px;
  position: relative;
  text-align: center;
  transition-duration: 0.5s;
  transition-property: background-color;
  transition-timing-function: var(--ease-out-expo);
}
.c-tab-button:focus-visible {
  background: var(--color-button-main);
  opacity: revert;
}
.c-tab-button::before {
  border: 1px solid var(--color-decorate-white);
  content: "";
  inset: 4px;
  position: absolute;
}
.c-tab-button.-current {
  background: var(--color-button-main);
}

.c-text-menu {
  align-items: center;
  display: block flex;
  font-size: var(--font-size-20);
  font-weight: 400;
  justify-content: space-between;
  line-height: var(--line-height-20-27);
}

.c-text-menu__title {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-14-20);
}

.c-text-menu__price {
  font-family: var(--font-family-en-menu);
  font-size: var(--font-size-20);
  font-weight: 400;
  line-height: var(--line-height-20-27);
}

.c-tiny-post-card__content {
  align-items: center;
  display: block grid;
  gap: 10px 14px;
  grid-template-areas: "thumbnails title" "thumbnails time";
  grid-template-columns: min(38.4615384615%, 100px) 1fr;
}
.c-tiny-post-card__content:not(:first-of-type) {
  margin-block-start: 16px;
}

.c-tiny-post-card__header {
  grid-area: title;
}

.c-tiny-post-card__title {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-14-24);
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.c-tiny-post-card__thumbnail {
  grid-area: thumbnails;
}
.c-tiny-post-card__thumbnail img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-tiny-post-card__body {
  font-size: var(--font-size-12);
  font-weight: 500;
  grid-area: time;
  line-height: var(--line-height-12-17);
}

.p-archive-menu {
  --_margin-block-start: clamp(min(60, 80) * var(--rem-ratio), 60 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 60) / (var(--viewport-max) - var(--viewport-min)), max(60, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-archive-menu__genre-tabs {
  display: block grid;
  gap: 12px 13px;
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  max-inline-size: 842px;
}

.p-archive-menu__body {
  --_row-gap: clamp(min(24, 40) * var(--rem-ratio), 24 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 24) / (var(--viewport-max) - var(--viewport-min)), max(24, 40) * var(--rem-ratio));
  --_column-gap: clamp(min(19, 40) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 40) * var(--rem-ratio));
  --_margin-block-start: clamp(min(60, 80) * var(--rem-ratio), 60 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 60) / (var(--viewport-max) - var(--viewport-min)), max(60, 80) * var(--rem-ratio));
  display: block grid;
  gap: var(--_row-gap) var(--_column-gap);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--_margin-block-start);
}

.p-archive-products {
  --_margin-block-start: clamp(min(48, 80) * var(--rem-ratio), 48 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 48) / (var(--viewport-max) - var(--viewport-min)), max(48, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-archive-products__body {
  --_column-gap: clamp(min(19, 40) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 40) * var(--rem-ratio));
  display: block grid;
  gap: 40px var(--_column-gap);
  grid-template-columns: repeat(2, 1fr);
}

.p-archive-products__message {
  --_margin-block-start: clamp(min(60, 100) * var(--rem-ratio), 60 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 60) / (var(--viewport-max) - var(--viewport-min)), max(60, 100) * var(--rem-ratio));
}

.p-archive-products__message,.p-archive-shop {
  margin-block-start: var(--_margin-block-start);
}

.p-archive-shop {
  --_margin-block-start: clamp(min(48, 80) * var(--rem-ratio), 48 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 48) / (var(--viewport-max) - var(--viewport-min)), max(48, 80) * var(--rem-ratio));
}

.p-archive-shop__inner {
  max-inline-size: 688px;
}

.p-archive-shop__content {
  --_row-gap: clamp(min(61, 122) * var(--rem-ratio), 61 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (122 - 61) / (var(--viewport-max) - var(--viewport-min)), max(61, 122) * var(--rem-ratio));
  display: block grid;
  row-gap: var(--_row-gap);
}

.p-categories__content {
  background: var(--color-ground-lightest);
  padding-block: 20px;
  padding-inline: 20px;
}

.p-categories__header {
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: var(--line-height-20-29);
}

.p-categories__list {
  display: block grid;
  margin-block-start: 20px;
  row-gap: 16px;
}

.p-categories__item {
  color: var(--color-text-main);
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: var(--line-height-16-23);
  padding-inline-start: 12px;
  position: relative;
}
.p-categories__item::before {
  background-image: url('data:image/svg+xml;utf8,<svg width="6" height="12" viewBox="0 0 6 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.21227 6.00091L5.86892 0.824286C6.04369 0.635919 6.04369 0.331047 5.86892 0.141275C5.7855 0.0508805 5.67171 0 5.55298 0C5.43424 0 5.32046 0.0508805 5.23703 0.141275L0.131076 5.65836C-0.0436919 5.84743 -0.0436919 6.15301 0.131076 6.34138L5.23703 11.8585C5.4118 12.0475 5.69414 12.0468 5.86892 11.8585C6.04369 11.6708 6.04369 11.3652 5.86892 11.1755L1.21225 6.00093L1.21227 6.00091Z" fill="%23000"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  inline-size: 6px;
  inset-block: 0;
  inset-inline-start: 0;
  position: absolute;
  scale: -1 1;
}

.p-concept {
  --_margin-block-start: clamp(min(48, 80) * var(--rem-ratio), 48 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 48) / (var(--viewport-max) - var(--viewport-min)), max(48, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-concept__section:not(:first-of-type) {
  --_margin-block-start: clamp(min(75, 100) * var(--rem-ratio), 75 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 75) / (var(--viewport-max) - var(--viewport-min)), max(75, 100) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-contact-form__name,.p-contact-form__email,.p-contact-form__phone,.p-contact-form__inquiry-content {
  margin-block-start: 40px;
}

.p-contact-form__privacy-notice {
  --_margin-block-start: clamp(min(18, 40) * var(--rem-ratio), 18 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 18) / (var(--viewport-max) - var(--viewport-min)), max(18, 40) * var(--rem-ratio));
  color: var(--color-text-main);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-14-24);
  margin-block-start: var(--_margin-block-start);
}

.p-contact-form__submit-button {
  --_margin-block-start: clamp(min(38, 40) * var(--rem-ratio), 38 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 38) / (var(--viewport-max) - var(--viewport-min)), max(38, 40) * var(--rem-ratio));
  display: block grid;
  justify-content: center;
  margin-block-start: var(--_margin-block-start);
}

.p-contact-thanks {
  --_margin-block-start: clamp(min(54, 80) * var(--rem-ratio), 54 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 54) / (var(--viewport-max) - var(--viewport-min)), max(54, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-contact-thanks__inner {
  max-inline-size: 688px;
}

.p-contact-thanks__heading h1 {
  color: var(--color-text-main);
  font-size: var(--font-size-20-28);
  font-weight: 700;
  line-height: var(--line-height-20-29);
  text-align: center;
}

.p-contact-thanks__message {
  --_margin-block-start: clamp(min(26, 28) * var(--rem-ratio), 26 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (28 - 26) / (var(--viewport-max) - var(--viewport-min)), max(26, 28) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}
.p-contact-thanks__message p {
  color: var(--color-text-main);
  font-size: var(--font-size-14-16);
  font-weight: 500;
  line-height: var(--line-height-14-24);
}

.p-contact {
  --_margin-block-start: clamp(min(54, 80) * var(--rem-ratio), 54 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 54) / (var(--viewport-max) - var(--viewport-min)), max(54, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-contact__inner {
  max-inline-size: 688px;
}

.p-contact__heading h1 {
  color: var(--color-text-main);
  font-size: var(--font-size-20-28);
  font-weight: 700;
  line-height: var(--line-height-20-29);
  text-align: center;
}

.p-contact__message {
  --_margin-block-start: clamp(min(26, 28) * var(--rem-ratio), 26 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (28 - 26) / (var(--viewport-max) - var(--viewport-min)), max(26, 28) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}
.p-contact__message p {
  color: var(--color-text-main);
  font-size: var(--font-size-14-16);
  font-weight: 500;
  line-height: var(--line-height-14-24);
}

.p-contact__form {
  --_margin-block-start: clamp(min(60, 80) * var(--rem-ratio), 60 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 60) / (var(--viewport-max) - var(--viewport-min)), max(60, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-drawer-menu {
  background: var(--color-ground-main);
  block-size: 100dvb;
  color: var(--color-text-white);
  opacity: 0;
  overflow-y: auto;
  padding-block: 10px 55px;
  padding-inline: 13px;
  transition-duration: 0.5s;
  transition-property: visibility, opacity;
  transition-timing-function: var(--ease-out-expo);
  visibility: hidden;
}
.p-drawer-menu.is-active {
  opacity: 1;
  visibility: visible;
}

.p-drawer-menu__logo {
  inline-size: 128px;
}
.p-drawer-menu__container {
  margin-block-start: 56px;
  margin-inline-start: 27px;
  min-inline-size: 322px;
}

.p-drawer-menu__menu {
  display: block grid;
  row-gap: 32px;
}
.p-drawer-menu__menu .menu-item {
  font-family: var(--font-family-en-nav);
  font-size: var(--font-size-24);
  font-weight: 400;
  line-height: var(--line-height-24-29);
}
.p-drawer-menu__menu a {
  align-items: end;
  display: block flex;
}
.p-drawer-menu__menu a span:nth-of-type(1) {
  letter-spacing: 0.12em;
}
.p-drawer-menu__menu a span:nth-of-type(2) {
  font-family: var(--font-family-ja);
  font-size: var(--font-size-10);
  font-weight: 500;
  line-height: var(--line-height-10-14);
  margin-block-end: 0.4em;
}
.p-drawer-menu__menu a span:nth-of-type(2)::before {
  content: "／";
  margin-inline: 0.9em 1.2em;
}

.p-drawer-menu__sns {
  margin-block-start: 57px;
}

.p-drawer-menu__overlay {
  background: var(--color-overlay-medium);
  inset: 0;
  opacity: 0;
  position: fixed;
  transition-duration: 0.5s;
  transition-property: visibility, opacity;
  transition-timing-function: var(--ease-out-expo);
  visibility: hidden;
}
#js-drawer.is-active ~ .p-drawer-menu__overlay {
  opacity: 1;
  visibility: visible;
}

.p-first-view {
  --_padding-block-start: clamp(min(32, 100) * var(--rem-ratio), 32 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 32) / (var(--viewport-max) - var(--viewport-min)), max(32, 100) * var(--rem-ratio));
  --_padding-block-end: clamp(min(31, 100) * var(--rem-ratio), 31 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 31) / (var(--viewport-max) - var(--viewport-min)), max(31, 100) * var(--rem-ratio));
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
}

.p-first-view__image {
  inset: 0;
  position: absolute;
}
.p-first-view__image img {
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-first-view__image img:where(.p-first-view.-menu *) {
  -o-object-position: 50% 0;
     object-position: 50% 0;
}
.p-first-view__image img:where(.p-first-view.-shop *) {
  -o-object-position: 50% 37%;
     object-position: 50% 37%;
}
.p-first-view__image img:where(.p-first-view.-gift *) {
  -o-object-position: 50% 13%;
     object-position: 50% 13%;
}
.p-first-view__image img:where(.p-first-view.-contact *) {
  -o-object-position: 50% 81%;
     object-position: 50% 81%;
}
.p-first-view__image img:where(.p-first-view.-contact-thanks *) {
  -o-object-position: 50% 90%;
     object-position: 50% 90%;
}

.p-first-view__decoration {
  background: var(--color-overlay-dark);
  inset: 0;
  position: absolute;
}
.p-first-view__decoration::before, .p-first-view__decoration::after {
  border: solid var(--color-decorate-white);
  content: "";
  position: absolute;
}
.p-first-view__decoration::before {
  border-width: 2px;
  inset: 6px;
}
.p-first-view__decoration::after {
  border-width: 1px;
  inset: 11px;
}

.p-footer {
  margin-block-start: 160px;
}

.p-footer__access {
  padding-block: 80px;
}

.p-footer__access-inner {
  max-inline-size: calc(var(--post-inner) * 1px);
}

.p-footer__access-head {
  position: relative;
}

.p-footer__access-body {
  margin-block-start: 40px;
}

.p-footer__access-balloon {
  --_inset-block-start: clamp(min(-122, -131) * var(--rem-ratio), -122 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-131 - -122) / (var(--viewport-max) - var(--viewport-min)), max(-122, -131) * var(--rem-ratio));
  --_inset-inline-start: clamp(min(-30, -117) * var(--rem-ratio), -30 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-117 - -30) / (var(--viewport-max) - var(--viewport-min)), max(-30, -117) * var(--rem-ratio));
  inset-block-start: var(--_inset-block-start);
  inset-inline-start: calc(50% + var(--_inset-inline-start) - var(--viewport-min) / 2 * 1px);
  position: absolute;
}
.p-footer__access-balloon svg {
  --_inline-size: clamp(min(200, 233) * var(--rem-ratio), 200 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (233 - 200) / (var(--viewport-max) - var(--viewport-min)), max(200, 233) * var(--rem-ratio));
  inline-size: var(--_inline-size);
}

.p-footer__access-background {
  background: var(--color-ground-dark);
}

.p-footer__bg-bread {
  --_inset-block-start: clamp(min(-100, -181) * var(--rem-ratio), -100 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-181 - -100) / (var(--viewport-max) - var(--viewport-min)), max(-100, -181) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-37, -93) * var(--rem-ratio), -37 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-93 - -37) / (var(--viewport-max) - var(--viewport-min)), max(-37, -93) * var(--rem-ratio));
  --_inset-inline-end: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(191, 389) * var(--rem-ratio), 191 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (389 - 191) / (var(--viewport-max) - var(--viewport-min)), max(191, 389) * var(--rem-ratio));
  aspect-ratio: 1.0413983441;
  background-image: url(./img/bg-bread.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-end: var(--_inset-inline-end);
  position: absolute;
}

.p-footer__end {
  color: var(--color-text-white);
  padding-block: 44px 14px;
}

.p-footer__copy {
  margin-block-start: 41px;
}
.p-footer__copy small {
  display: block flow;
  font-size: var(--font-size-12);
  font-weight: 500;
  line-height: var(--line-height-12-24);
  text-align: center;
}

.p-footer__end-background {
  background: var(--color-ground-main);
}

.p-footer__bg-coffee-beans {
  --_inset-block-start: clamp(min(-56, -151) * var(--rem-ratio), -56 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-151 - -56) / (var(--viewport-max) - var(--viewport-min)), max(-56, -151) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-36, -85) * var(--rem-ratio), -36 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-85 - -36) / (var(--viewport-max) - var(--viewport-min)), max(-36, -85) * var(--rem-ratio));
  --_inset-inline-start: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(128, 341) * var(--rem-ratio), 128 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (341 - 128) / (var(--viewport-max) - var(--viewport-min)), max(128, 341) * var(--rem-ratio));
  aspect-ratio: 1.1173184358;
  background-image: url(./img/bg-coffee-beans.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-start: var(--_inset-inline-start);
  position: absolute;
  scale: -1 1;
}

.p-front-page-concept {
  --_padding-block-start: clamp(min(120, 220) * var(--rem-ratio), 120 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (220 - 120) / (var(--viewport-max) - var(--viewport-min)), max(120, 220) * var(--rem-ratio));
  --_padding-block-end: clamp(min(120, 240) * var(--rem-ratio), 120 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (240 - 120) / (var(--viewport-max) - var(--viewport-min)), max(120, 240) * var(--rem-ratio));
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
}

.p-front-page-concept__inner {
  max-inline-size: 1150px;
}

.p-front-page-concept__media {
  --_padding-block-end: clamp(min(73, 100) * var(--rem-ratio), 73 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 73) / (var(--viewport-max) - var(--viewport-min)), max(73, 100) * var(--rem-ratio));
  padding-block-end: var(--_padding-block-end);
}

.p-front-page-concept__text-content {
  grid-area: text-content;
}

.p-front-page-concept__heading {
  justify-items: start;
}

.p-front-page-concept__body {
  --_margin-block-start: clamp(min(34, 48) * var(--rem-ratio), 34 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (48 - 34) / (var(--viewport-max) - var(--viewport-min)), max(34, 48) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-front-page-concept__lead {
  font-size: var(--font-size-20-28);
  font-weight: 700;
  line-height: var(--line-height-20-40);
}

.p-front-page-concept__text-contents {
  --_margin-block-start: clamp(min(31, 48) * var(--rem-ratio), 31 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (48 - 31) / (var(--viewport-max) - var(--viewport-min)), max(31, 48) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-front-page-concept__text {
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-14-28);
}
.p-front-page-concept__text:not(:first-of-type) {
  margin-block-start: 1lh;
}

.p-front-page-concept__button {
  display: block grid;
  justify-content: center;
  margin-block-start: 56px;
}

.p-front-page-concept__image-content {
  grid-area: image-content;
}

.p-front-page-concept__thumbnail {
  margin-block-start: 80px;
  margin-inline: calc(50% - 50dvi);
  position: relative;
}
.p-front-page-concept__thumbnail img {
  aspect-ratio: 0.7875;
  inline-size: 84%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-front-page-concept__rectangle {
  --_inset-block-end: clamp(min(120, 240) * var(--rem-ratio), 120 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (240 - 120) / (var(--viewport-max) - var(--viewport-min)), max(120, 240) * var(--rem-ratio));
  --_block-size: clamp(min(100, 300) * var(--rem-ratio), 100 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (300 - 100) / (var(--viewport-breakpoint) - var(--viewport-min)), max(100, 300) * var(--rem-ratio));
  background: var(--color-ground-dark);
  block-size: var(--_block-size);
  content: "";
  inline-size: 94.6666666667%;
  inset-block-end: var(--_inset-block-end);
  inset-inline-start: 0;
  position: absolute;
}

.p-front-page-concept__coffee-beans {
  --_inset-block-start: clamp(min(-20, 16) * var(--rem-ratio), -20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - -20) / (var(--viewport-max) - var(--viewport-min)), max(-20, 16) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-17, -40) * var(--rem-ratio), -17 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-40 - -17) / (var(--viewport-max) - var(--viewport-min)), max(-17, -40) * var(--rem-ratio));
  --_inset-inline-end: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(145, 296) * var(--rem-ratio), 145 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (296 - 145) / (var(--viewport-max) - var(--viewport-min)), max(145, 296) * var(--rem-ratio));
  aspect-ratio: 1.1173184358;
  background-image: url(./img/bg-coffee-beans.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-end: var(--_inset-inline-end);
  position: absolute;
}

.p-front-page-gallery {
  --_padding-block-start: clamp(min(60, 80) * var(--rem-ratio), 60 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 60) / (var(--viewport-max) - var(--viewport-min)), max(60, 80) * var(--rem-ratio));
  --_padding-block-end: clamp(min(100, 80) * var(--rem-ratio), 100 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 100) / (var(--viewport-max) - var(--viewport-min)), max(100, 80) * var(--rem-ratio));
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
}

.p-front-page-gallery__balloon-gallery {
  --_inset-block-start: clamp(min(-57, -21) * var(--rem-ratio), -57 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-21 - -57) / (var(--viewport-max) - var(--viewport-min)), max(-57, -21) * var(--rem-ratio));
  --_inset-inline-start: clamp(min(209, 342) * var(--rem-ratio), 209 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (342 - 209) / (var(--viewport-max) - var(--viewport-min)), max(209, 342) * var(--rem-ratio));
  --_inline-size: clamp(min(200, 266) * var(--rem-ratio), 200 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (266 - 200) / (var(--viewport-max) - var(--viewport-min)), max(200, 266) * var(--rem-ratio));
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-start: var(--_inset-inline-start);
  inset-inline-start: calc(50% - var(--_inset-inline-start));
  position: absolute;
}
.p-front-page-gallery__balloon-gallery svg {
  color: var(--color-text-black);
}

.p-front-page-gallery__body {
  margin-block-start: 40px;
}

.p-front-page-gallery__instagram-feed #sbi_images {
  --_gap: clamp(min(19, 24) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 24) * var(--rem-ratio));
  display: block grid !important;
  gap: var(--_gap);
  grid-template-columns: repeat(2, 1fr) !important;
  padding: unset !important;
  width: unset !important;
}

.p-front-page-gallery__button {
  --_padding-block-start: clamp(min(40, 60) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 60) * var(--rem-ratio));
  display: block grid;
  justify-content: center;
  padding-block-start: var(--_padding-block-start);
}

.p-front-page-gallery__background {
  background: var(--color-ground-dark);
}

.p-front-page-grand-menu-drink {
  display: block grid;
  padding-inline: 20px;
  row-gap: 40px;
}

.p-front-page-grand-menu-drink__image {
  display: none;
}
.p-front-page-grand-menu-drink__image img {
  --_padding: clamp(min(5, 8) * var(--rem-ratio), 5 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (8 - 5) / (var(--viewport-max) - var(--viewport-min)), max(5, 8) * var(--rem-ratio));
  aspect-ratio: 1;
  padding: var(--_padding);
  -o-object-fit: cover;
  background: var(--color-ground-white);
     object-fit: cover;
}

.p-front-page-grand-menu-drink__genres {
  display: contents;
}

.p-front-page-grand-menu-drink__genre-heading {
  --_padding-block-end: clamp(min(10, 12) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (12 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 12) * var(--rem-ratio));
  border-block-end: 1px solid;
  font-size: var(--font-size-16);
  font-weight: 700;
  line-height: var(--line-height-16-23);
  padding-block-end: var(--_padding-block-end);
}

.p-front-page-grand-menu-drink__genre-body {
  display: block grid;
  margin-block-start: 12px;
  padding-inline-end: 3px;
  row-gap: 8px;
}

.p-front-page-grand-menu {
  --_padding-block-start: clamp(min(119, 159) * var(--rem-ratio), 119 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (159 - 119) / (var(--viewport-max) - var(--viewport-min)), max(119, 159) * var(--rem-ratio));
  --_padding-block-end: clamp(min(186, 240) * var(--rem-ratio), 186 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (240 - 186) / (var(--viewport-max) - var(--viewport-min)), max(186, 240) * var(--rem-ratio));
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
}

.p-front-page-grand-menu__body {
  margin-block-start: 40px;
}

.p-front-page-grand-menu__genres {
  --_row-gap: clamp(min(40, 100) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (100 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 100) * var(--rem-ratio));
  display: block grid;
  row-gap: var(--_row-gap);
}

.p-front-page-grand-menu__genre-heading {
  --_padding-block-start: clamp(min(7, 10) * var(--rem-ratio), 7 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (10 - 7) / (var(--viewport-max) - var(--viewport-min)), max(7, 10) * var(--rem-ratio));
  --_padding-block-end: clamp(min(8, 9) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (9 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 9) * var(--rem-ratio));
  --_padding-inline-start: clamp(min(10, 21) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (21 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 21) * var(--rem-ratio));
  font-size: var(--font-size-20-24);
  font-weight: 700;
  line-height: var(--line-height-20-29);
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
  padding-inline-start: var(--_padding-inline-start);
}

.p-front-page-grand-menu__genre-body {
  --_row-gap: clamp(min(19, 40) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 40) * var(--rem-ratio));
  --_column-gap: clamp(min(19, 34) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (34 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 34) * var(--rem-ratio));
  --_margin-block-start: clamp(min(20, 24) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 24) * var(--rem-ratio));
  display: block grid;
  gap: var(--_row-gap) var(--_column-gap);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--_margin-block-start);
}
.p-front-page-grand-menu__genre-body:where(.p-front-page-grand-menu__genre.-drink *) {
  grid-template-columns: revert;
}

.p-front-page-grand-menu__button {
  --_margin-block-start: clamp(min(40, 54) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (54 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 54) * var(--rem-ratio));
  display: block grid;
  justify-content: center;
  margin-block-start: var(--_margin-block-start);
}

.p-front-page-grand-menu__background-rectangle {
  --_inset-block-start: clamp(min(368, 543) * var(--rem-ratio), 368 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (543 - 368) / (var(--viewport-max) - var(--viewport-min)), max(368, 543) * var(--rem-ratio));
  --_inset-block-end: clamp(min(120, 160) * var(--rem-ratio), 120 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (160 - 120) / (var(--viewport-max) - var(--viewport-min)), max(120, 160) * var(--rem-ratio));
  background: var(--color-ground-dark);
  inline-size: 73.0666666667%;
  inset-block: var(--_inset-block-start) var(--_inset-block-end);
  inset-inline-end: 0;
  position: absolute;
}

.p-front-page-grand-menu__background-coffee-leaves {
  --_inset-block-start: clamp(min(-53, -83) * var(--rem-ratio), -53 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-83 - -53) / (var(--viewport-max) - var(--viewport-min)), max(-53, -83) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-14, -37) * var(--rem-ratio), -14 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-37 - -14) / (var(--viewport-max) - var(--viewport-min)), max(-14, -37) * var(--rem-ratio));
  --_inset-inline-start: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(132, 274) * var(--rem-ratio), 132 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (274 - 132) / (var(--viewport-max) - var(--viewport-min)), max(132, 274) * var(--rem-ratio));
  aspect-ratio: 0.9349349349;
  background-image: url(./img/bg-coffee-leaves-2.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-start: var(--_inset-inline-start);
  position: absolute;
  rotate: -45deg;
  scale: -1 1;
}

.p-front-page-grand-menu__background-coffee-beans {
  --_inset-block-end: clamp(min(26, 48) * var(--rem-ratio), 26 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (48 - 26) / (var(--viewport-max) - var(--viewport-min)), max(26, 48) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-40, -134) * var(--rem-ratio), -40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-134 - -40) / (var(--viewport-max) - var(--viewport-min)), max(-40, -134) * var(--rem-ratio));
  --_inset-inline-end: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(169, 390) * var(--rem-ratio), 169 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (390 - 169) / (var(--viewport-max) - var(--viewport-min)), max(169, 390) * var(--rem-ratio));
  aspect-ratio: 1.1846785226;
  background-image: url(./img/bg-coffee-beans-2.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-end: var(--_inset-block-end);
  inset-inline-end: var(--_inset-inline-end);
  position: absolute;
}

.p-front-page-main-visual__heading {
  --_inline-size: clamp(min(128, 166) * var(--rem-ratio), 128 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (166 - 128) / (var(--viewport-max) - var(--viewport-min)), max(128, 166) * var(--rem-ratio));
  inline-size: var(--_inline-size);
  inset-block-start: 10px;
  inset-inline-start: 13px;
  position: absolute;
}

.p-front-page-main-visual__logo-light {
  color: var(--color-text-white);
}

.p-front-page-main-visual__logo {
  display: none;
}

.p-front-page-main-visual__lead {
  --_inset-inline-start: clamp(min(20, 56) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (56 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 56) * var(--rem-ratio));
  --_letter-spacing: clamp(min(2.24, 2.8) * var(--rem-ratio), 2.24 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (2.8 - 2.24) / (var(--viewport-max) - var(--viewport-min)), max(2.24, 2.8) * var(--rem-ratio));
  color: var(--color-text-white);
  font-size: var(--font-size-16-20);
  font-weight: 700;
  inset-block-start: 125px;
  inset-inline-start: var(--_inset-inline-start);
  letter-spacing: var(--_letter-spacing);
  line-height: var(--line-height-16-32);
  position: absolute;
}

.p-front-page-main-visual__slider {
  position: relative;
  z-index: var(--z-background);
}
.p-front-page-main-visual__slider .swiper-slide {
  position: relative;
}
.p-front-page-main-visual__slider .swiper-slide::after {
  background: var(--color-overlay-light);
  block-size: 100%;
  content: "";
  inset-block-end: 0;
  inset-inline: 0;
  position: absolute;
}
.p-front-page-main-visual__slider .swiper-slide img {
  block-size: 100dvb;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-front-page-main-visual__slider .swiper-slide[class*=-active] img,
.p-front-page-main-visual__slider .swiper-slide[class*=-prev] img {
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-name: zoom-up;
  animation-timing-function: linear;
}
.p-front-page-main-visual__slider .swiper-pagination {
  --swiper-pagination-bottom: 12px;
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-color: var(--color-pagination);
  --swiper-pagination-bullet-inactive-color: var(--color-pagination-inactive);
  --swiper-pagination-bullet-inactive-opacity: 1;
  display: block flex;
  left: 20px !important;
  -moz-column-gap: 16px;
       column-gap: 16px;
  text-align: revert;
}

.p-front-page-main-visual__pickup-post {
  --_inset-block-end: clamp(min(32, 23) * var(--rem-ratio), 32 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (23 - 32) / (var(--viewport-max) - var(--viewport-min)), max(32, 23) * var(--rem-ratio));
  inset-block-end: var(--_inset-block-end);
  inset-inline-end: 0;
  position: absolute;
}

.p-front-page-main-visual__pickup-post-inner {
  margin-inline: calc(var(--horizontal-spacing-min) * 1px);
  max-inline-size: 388px;
}

.p-front-page-main-visual__rectangle {
  --_block-size: clamp(min(0, 60) * var(--rem-ratio), 0 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 0) / (var(--viewport-max) - var(--viewport-min)), max(0, 60) * var(--rem-ratio));
  background: var(--color-ground-dark);
  block-size: var(--_block-size);
  content: "";
  inline-size: 91.1111111111%;
  inset-block-end: calc(var(--_block-size) * -1);
  inset-inline-end: 0;
  position: absolute;
}

.p-front-page-news {
  --_padding-block-start: clamp(min(116, 120) * var(--rem-ratio), 116 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (120 - 116) / (var(--viewport-max) - var(--viewport-min)), max(116, 120) * var(--rem-ratio));
  padding-block-start: var(--_padding-block-start);
}

.p-front-page-news__body {
  margin-block-start: 40px;
}

.p-front-page-news__posts-group {
  --_row-gap: clamp(min(19, 32) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (32 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 32) * var(--rem-ratio));
  --_column-gap: clamp(min(19, 43) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (43 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 43) * var(--rem-ratio));
  display: block grid;
  gap: var(--_row-gap) var(--_column-gap);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: 22px;
}

.p-front-page-news__button {
  --_padding-block-start: clamp(min(40, 60) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 60) * var(--rem-ratio));
  display: block grid;
  justify-content: center;
  padding-block-start: var(--_padding-block-start);
}

.p-front-page-news__background-plate {
  --_inset-block-start: clamp(min(-9, -144) * var(--rem-ratio), -9 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-144 - -9) / (var(--viewport-max) - var(--viewport-min)), max(-9, -144) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-52, -87) * var(--rem-ratio), -52 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-87 - -52) / (var(--viewport-max) - var(--viewport-min)), max(-52, -87) * var(--rem-ratio));
  --_inset-inline-start: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(204, 354) * var(--rem-ratio), 204 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (354 - 204) / (var(--viewport-max) - var(--viewport-min)), max(204, 354) * var(--rem-ratio));
  aspect-ratio: 1.1049429658;
  background-image: url(./img/bg-plate.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-start: var(--_inset-inline-start);
  position: absolute;
  scale: -1 1;
}

.p-front-page-side-navigation {
  padding-block: 120px 12px;
  padding-inline: 17px;
}

.p-front-page-side-navigation__navigation {
  margin-block-start: 53px;
}

.p-front-page-side-navigation__sns {
  margin-block-start: 63px;
}

.p-front-page-special-lunch-set {
  --_padding-block-start: clamp(min(56, 81) * var(--rem-ratio), 56 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (81 - 56) / (var(--viewport-max) - var(--viewport-min)), max(56, 81) * var(--rem-ratio));
  --_padding-block-end: clamp(min(63, 80) * var(--rem-ratio), 63 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 63) / (var(--viewport-max) - var(--viewport-min)), max(63, 80) * var(--rem-ratio));
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
}

.p-front-page-special-lunch-set__inner {
  --horizontal-spacing: clamp(min(var(--horizontal-spacing-min), 50) * var(--rem-ratio), var(--horizontal-spacing-min) * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (50 - var(--horizontal-spacing-min)) / (var(--viewport-max) - var(--viewport-min)), max(var(--horizontal-spacing-min), 50) * var(--rem-ratio));
  max-inline-size: 1180px;
}

.p-front-page-special-lunch-set__heading {
  text-align: center;
}

.p-front-page-special-lunch-set__body {
  --_padding-block-start: clamp(min(39, 60) * var(--rem-ratio), 39 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 39) / (var(--viewport-max) - var(--viewport-min)), max(39, 60) * var(--rem-ratio));
  --_padding-block-end: clamp(min(20, 41) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (41 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 41) * var(--rem-ratio));
  --_margin-block-start: clamp(min(62, 59) * var(--rem-ratio), 62 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (59 - 62) / (var(--viewport-max) - var(--viewport-min)), max(62, 59) * var(--rem-ratio));
  background: var(--color-ground-white);
  margin-block-start: var(--_margin-block-start);
  margin-inline: calc(50% - 50dvi);
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
  position: relative;
}

.p-front-page-special-lunch-set__body-title {
  display: block grid;
  inset-block-start: -20px;
  inset-inline: 0;
  justify-content: center;
  position: absolute;
}

.p-front-page-special-lunch-set__body-inner {
  --_padding-inline: clamp(min(20, 40) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 40) * var(--rem-ratio));
  padding-inline: var(--_padding-inline);
}

.p-front-page-special-lunch-set__pasta-cards {
  display: block grid;
  gap: 22px 19px;
  grid-template-columns: repeat(2, 1fr);
}

.p-front-page-special-lunch-set__description {
  --_padding-inline: clamp(min(7, 70) * var(--rem-ratio), 7 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (70 - 7) / (var(--viewport-max) - var(--viewport-min)), max(7, 70) * var(--rem-ratio));
  --_margin-block-start: clamp(min(20, 57) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (57 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 57) * var(--rem-ratio));
  background: var(--color-ground-lighter);
  border-radius: 8px;
  margin-block-start: var(--_margin-block-start);
  padding-block: 21px 20px;
  padding-inline: var(--_padding-inline);
}

.p-front-page-special-lunch-set__set-cards {
  --_column-gap: clamp(min(36, 93) * var(--rem-ratio), 36 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (93 - 36) / (var(--viewport-max) - var(--viewport-min)), max(36, 93) * var(--rem-ratio));
  display: block grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: var(--_column-gap);
       column-gap: var(--_column-gap);
}

.p-front-page-special-lunch-set__set-card {
  position: relative;
}
.p-front-page-special-lunch-set__set-card:not(:first-of-type)::before {
  --_inline-size: clamp(min(13, 26) * var(--rem-ratio), 13 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (26 - 13) / (var(--viewport-max) - var(--viewport-min)), max(13, 26) * var(--rem-ratio));
  --_inset-inline-start: clamp(min(36, 93) * var(--rem-ratio), 36 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (93 - 36) / (var(--viewport-max) - var(--viewport-min)), max(36, 93) * var(--rem-ratio));
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml;utf8,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1945 25.9542L10.9552 25.3823C10.7073 25.1535 10.5421 24.8676 10.4595 24.5244C10.3769 24.1813 10.2942 23.8572 10.2116 23.5521L10.5834 18.4048L10.4595 15.5451L10.5834 14.5156H9.59199L7.23737 14.63L7.11344 14.5156H1.90848L0.669209 13.9437C0.421353 13.6387 0.235463 13.3146 0.111535 12.9714C-0.0123929 12.6282 -0.0330476 12.266 0.0495716 11.8847L0.669209 10.7409C0.917064 10.5884 1.18557 10.4549 1.47474 10.3405C1.7639 10.2261 2.07372 10.1308 2.40419 10.0546H7.60915L9.09628 10.1689L10.3356 10.0546L10.4595 6.50858L10.3356 2.27628C10.4182 1.97125 10.5214 1.67576 10.6454 1.38979C10.7693 1.10383 10.9139 0.846459 11.0791 0.617684C11.4096 0.388912 11.7607 0.217332 12.1325 0.102948C12.5043 -0.0114394 12.8967 -0.030503 13.3098 0.0457554L14.5491 0.617684C15.0448 2.10471 15.272 3.66798 15.2307 5.30752C15.1894 6.94706 15.21 8.56753 15.2927 10.1689L18.2669 10.2833L21.1173 10.1689C21.7782 10.3215 22.5011 10.3977 23.286 10.3977C24.0709 10.3977 24.7525 10.5884 25.3308 10.9696C25.5786 11.2747 25.7645 11.5988 25.8885 11.9419C26.0124 12.2851 26.033 12.6473 25.9504 13.0286L25.3308 14.1725C24.8351 14.4775 24.2981 14.6681 23.7197 14.7444C23.1414 14.8206 22.5218 14.8588 21.8608 14.8588L18.6387 14.63L17.1516 14.7444L15.4166 14.63L15.2927 17.9472L15.4166 19.0911C15.334 20.1587 15.2927 21.2453 15.2927 22.3511C15.2927 23.4568 15.0035 24.4672 14.4252 25.3823C14.0947 25.6111 13.7436 25.7827 13.3718 25.8971C13 26.0114 12.6076 26.0305 12.1945 25.9542Z" fill="%23382620"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  inline-size: var(--_inline-size);
  inset-block-start: 43%;
  inset-inline-start: calc((var(--_inset-inline-start) + var(--_inline-size)) / 2 * -1);
  position: absolute;
}

.p-front-page-special-lunch-set__set-description {
  display: block grid;
  justify-content: center;
  margin-block-start: 21px;
  text-align: center;
}

.p-front-page-special-lunch-set__set-description-title {
  font-size: var(--font-size-16-20);
  font-weight: 700;
  line-height: var(--line-height-16-23);
}

.p-front-page-special-lunch-set__set-description-price {
  font-family: var(--font-family-en-menu);
  font-size: var(--font-size-40-60);
  font-weight: 400;
  line-height: var(--line-height-40-55);
  margin-block-start: -3px;
}
.p-front-page-special-lunch-set__set-description-price.c-dotted-line {
  --c-dotted-line-margin-inline-start: clamp(min(12, -3) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-3 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, -3) * var(--rem-ratio));
  --c-dotted-line-margin-inline-end: clamp(min(12, 0) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (0 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 0) * var(--rem-ratio));
  --c-dotted-line-block-size: 4px;
  --c-dotted-line-margin-block-start: 4px;
  --c-dotted-line-margin-block-end: 11px;
  --c-dotted-line-color: var(--color-text-black);
  --c-dotted-line-space: calc(12 / 4);
  --c-dotted-line-background-position: -2px;
}

.p-front-page-special-lunch-set__set-description-date {
  font-size: var(--font-size-12-14);
  font-weight: 700;
  line-height: var(--line-height-12-17);
}

.p-front-page-special-lunch-set__balloon {
  --_inset-block-start: clamp(min(-235, -70) * var(--rem-ratio), -235 * var(--rem-ratio) + (100dvw - var(--viewport-breakpoint) * 1px) * (-70 - -235) / (var(--viewport-max) - var(--viewport-breakpoint)), max(-235, -70) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-19, 27) * var(--rem-ratio), -19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (27 - -19) / (var(--viewport-max) - var(--viewport-min)), max(-19, 27) * var(--rem-ratio));
  --_inset-inline-end: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(206, 308) * var(--rem-ratio), 206 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (308 - 206) / (var(--viewport-max) - var(--viewport-min)), max(206, 308) * var(--rem-ratio));
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-end: var(--_inset-inline-end);
  position: absolute;
}
.p-front-page-special-lunch-set__balloon svg {
  color: var(--color-text-black);
  -o-object-fit: contain;
     object-fit: contain;
}

.p-front-page-special-lunch-set__background {
  background: var(--color-ground-dark);
}

.p-front-page-special-lunch-set__coffee-leaves {
  --_inset-block-start: clamp(min(-181, -131) * var(--rem-ratio), -181 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-131 - -181) / (var(--viewport-max) - var(--viewport-min)), max(-181, -131) * var(--rem-ratio));
  --_center-inline-position: clamp(min(-33, -34) * var(--rem-ratio), -33 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (-34 - -33) / (var(--viewport-max) - var(--viewport-min)), max(-33, -34) * var(--rem-ratio));
  --_inset-inline-end: calc(50% - min(max(50dvi, var(--viewport-min) / 2 * 1px), var(--viewport-max) / 2 * 1px) + var(--_center-inline-position));
  --_inline-size: clamp(min(119, 201) * var(--rem-ratio), 119 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (201 - 119) / (var(--viewport-max) - var(--viewport-min)), max(119, 201) * var(--rem-ratio));
  aspect-ratio: 0.8810572687;
  background-image: url(./img/bg-coffee-leaves.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  inline-size: var(--_inline-size);
  inset-block-start: var(--_inset-block-start);
  inset-inline-end: var(--_inset-inline-end);
  position: absolute;
}

.p-front-page__side-navigation {
  display: none;
}

.p-header__menu-button {
  --_inset-block-start: clamp(min(10, 20) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 20) * var(--rem-ratio));
  --_inset-inline-end: clamp(min(10, 20) * var(--rem-ratio), 10 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 10) / (var(--viewport-max) - var(--viewport-min)), max(10, 20) * var(--rem-ratio));
  inset-block-start: var(--_inset-block-start);
  inset-inline-end: var(--_inset-inline-end);
  position: fixed;
  z-index: calc(var(--z-navigation) + 1);
}
.p-header__menu-button:is(body:not(:has(#js-side-navigation)) *) {
  opacity: 1;
  visibility: visible;
}

.p-header__menu {
  inset-block: 0;
  inset-inline-end: 0;
  position: fixed;
  z-index: var(--z-navigation);
}

.p-new-posts__content {
  background: var(--color-ground-lightest);
  padding-block: 20px;
  padding-inline: 20px;
}

.p-new-posts__header {
  font-size: var(--font-size-20);
  font-weight: 700;
  line-height: var(--line-height-20-29);
}

.p-new-posts__body {
  margin-block-start: 20px;
}

.p-new-posts__list {
  display: block grid;
  row-gap: 16px;
}

.p-news-sidebar {
  --_row-gap: clamp(min(40, 60) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 60) * var(--rem-ratio));
  --_padding-block-start: clamp(min(60, 116) * var(--rem-ratio), 60 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (116 - 60) / (var(--viewport-max) - var(--viewport-min)), max(60, 116) * var(--rem-ratio));
  display: block grid;
  padding-block-start: var(--_padding-block-start);
  row-gap: var(--_row-gap);
}

.p-news .page-header {
  --_margin-block-start: clamp(min(48, 80) * var(--rem-ratio), 48 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 48) / (var(--viewport-max) - var(--viewport-min)), max(48, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}
.p-news .page-title {
  color: var(--color-text-main);
  font-size: var(--font-size-20-24);
  font-weight: 700;
  line-height: var(--line-height-20-29);
}
.p-news .navigation {
  margin-block-start: 40px;
}

.p-news__body {
  --_row-gap: clamp(min(24, 40) * var(--rem-ratio), 24 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 24) / (var(--viewport-max) - var(--viewport-min)), max(24, 40) * var(--rem-ratio));
  --_column-gap: clamp(min(19, 40) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 40) * var(--rem-ratio));
  --_margin-block-start: clamp(min(40, 24) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (24 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 24) * var(--rem-ratio));
  display: block grid;
  gap: var(--_row-gap) var(--_column-gap);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--_margin-block-start);
}

.p-news__pagination-inner {
  padding-inline: revert;
}

.p-pagetop {
  --_inset-block-end: clamp(min(6, 20) * var(--rem-ratio), 6 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 6) / (var(--viewport-max) - var(--viewport-min)), max(6, 20) * var(--rem-ratio));
  --_inset-inline-end: clamp(min(8, 20) * var(--rem-ratio), 8 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (20 - 8) / (var(--viewport-max) - var(--viewport-min)), max(8, 20) * var(--rem-ratio));
  inset-block-end: var(--_inset-block-end);
  inset-inline-end: var(--_inset-inline-end);
  position: fixed;
}

.p-related-posts {
  --_margin-block-start: clamp(min(100, 120) * var(--rem-ratio), 100 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (120 - 100) / (var(--viewport-max) - var(--viewport-min)), max(100, 120) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}

.p-related-posts__inner {
  max-inline-size: 680px;
}

.p-related-posts__heading {
  color: var(--color-text-main);
  font-size: var(--font-size-20-28);
  font-weight: 700;
  line-height: var(--line-height-20-29);
  text-align: center;
}

.p-related-posts__body {
  --_row-gap: clamp(min(20, 40) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 40) * var(--rem-ratio));
  --_column-gap: clamp(min(19, 40) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 40) * var(--rem-ratio));
  --_margin-block-start: clamp(min(40, 60) * var(--rem-ratio), 40 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 40) / (var(--viewport-max) - var(--viewport-min)), max(40, 60) * var(--rem-ratio));
  display: block grid;
  gap: var(--_row-gap) var(--_column-gap);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--_margin-block-start);
}

.p-side-navigation__menu {
  display: block grid;
  row-gap: 31px;
}
.p-side-navigation__menu span {
  display: block flow;
  text-align: center;
}
.p-side-navigation__menu span:first-of-type {
  font-family: var(--font-family-en-nav);
  font-size: var(--font-size-16);
  font-weight: 400;
  letter-spacing: 0.125em;
  line-height: var(--line-height-16-20);
  margin-inline-end: -2px;
}
.p-side-navigation__menu span:last-of-type {
  font-size: var(--font-size-10);
  font-weight: 500;
  line-height: var(--line-height-10-14);
  margin-block-start: 6px;
}

.p-single {
  --_margin-block-start: clamp(min(48, 80) * var(--rem-ratio), 48 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (80 - 48) / (var(--viewport-max) - var(--viewport-min)), max(48, 80) * var(--rem-ratio));
  margin-block-start: var(--_margin-block-start);
}
.p-single h1,
.p-single .entry-title {
  color: var(--color-text-main);
  font-size: var(--font-size-20-28);
  font-weight: 700;
  line-height: var(--line-height-20-28);
}
.p-single h1:has(+ *),
.p-single .entry-title:has(+ *) {
  --_margin-block-end: clamp(min(25, 40) * var(--rem-ratio), 25 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 25) / (var(--viewport-max) - var(--viewport-min)), max(25, 40) * var(--rem-ratio));
  margin-block-end: var(--_margin-block-end);
}
.p-single h1:not(.entry-title) {
  --_margin-block-start: clamp(min(75, 97) * var(--rem-ratio), 75 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (97 - 75) / (var(--viewport-max) - var(--viewport-min)), max(75, 97) * var(--rem-ratio));
}
.p-single h1:not(.entry-title),.p-single h2 {
  margin-block-start: var(--_margin-block-start);
}
.p-single h2 {
  --_padding-inline-start: clamp(min(12, 16) * var(--rem-ratio), 12 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (16 - 12) / (var(--viewport-max) - var(--viewport-min)), max(12, 16) * var(--rem-ratio));
  --_margin-block-start: clamp(min(75, 97) * var(--rem-ratio), 75 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (97 - 75) / (var(--viewport-max) - var(--viewport-min)), max(75, 97) * var(--rem-ratio));
  border-inline-start: 4px solid;
  color: var(--color-text-main);
  font-size: var(--font-size-18-24);
  font-weight: 700;
  line-height: var(--line-height-18-28);
  padding-inline-start: var(--_padding-inline-start);
}
.p-single h2:has(+ *) {
  margin-block-end: 18px;
}
.p-single h3 {
  border-block-end: 1px solid;
  color: var(--color-text-main);
  font-size: var(--font-size-16-20);
  font-weight: 700;
  line-height: var(--line-height-16-24);
  margin-block-start: 54px;
  padding-block-end: 12px;
}
.p-single h3:has(+ *) {
  margin-block-end: 20px;
}
.p-single h4 {
  color: var(--color-text-main);
  font-size: var(--font-size-14-16);
  font-weight: 700;
  line-height: var(--line-height-14-24);
  margin-block-start: 54px;
}
.p-single h4:has(+ *) {
  margin-block-end: 15px;
}
.p-single p,
.p-single pre {
  font-size: var(--font-size-14-16);
  font-weight: 500;
  line-height: var(--line-height-14-28);
  margin-block-start: 15px;
}
.p-single p:has(+ *),
.p-single pre:has(+ *) {
  margin-block-end: 15px;
}
.p-single :where(h1, h2, h3, h4, h5, h6) + p {
  margin-block-start: revert;
}
.p-single ul,
.p-single ol {
  font-size: var(--font-size-14-16);
  font-weight: 500;
  line-height: var(--line-height-14-20);
  margin-block-start: 28px;
  margin-inline-start: 34px;
}
.p-single ul:has(+ *),
.p-single ol:has(+ *) {
  margin-block-end: 28px;
}
.p-single ul li,
.p-single ol li {
  position: relative;
}
.p-single ul li:not(:first-of-type),
.p-single ol li:not(:first-of-type) {
  margin-block-start: 8px;
}
.p-single ul li::before {
  content: "・";
  inset-block: 0;
  inset-inline-start: -1em;
  position: absolute;
}
.p-single ol {
  list-style: revert;
}
.p-single figure {
  margin-bottom: unset;
  padding: revert;
  text-align: revert;
}
.p-single figure:has(img) {
  margin-block-start: 36px;
}
.p-single figure:has(img):has(+ *) {
  margin-block-end: 36px;
}
.p-single figure:has(blockquote), .p-single figure:has(table) {
  margin-block-start: 32px;
}
.p-single figure:has(blockquote):has(+ *), .p-single figure:has(table):has(+ *) {
  margin-block-end: 32px;
}
.p-single blockquote {
  --_padding-block-start: clamp(min(20, 35) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (35 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 35) * var(--rem-ratio));
  --_padding-block-end: clamp(min(25, 40) * var(--rem-ratio), 25 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 25) / (var(--viewport-max) - var(--viewport-min)), max(25, 40) * var(--rem-ratio));
  --_padding-inline: clamp(min(24, 40) * var(--rem-ratio), 24 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 24) / (var(--viewport-max) - var(--viewport-min)), max(24, 40) * var(--rem-ratio));
  background: var(--color-ground-lightest);
  padding-block: var(--_padding-block-start) var(--_padding-block-end);
  padding-inline: var(--_padding-inline);
}
.p-single blockquote > :first-child {
  margin-block-start: 0;
}
.p-single blockquote > :last-child {
  margin-block-end: 0;
}
.p-single cite {
  display: block flow;
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--line-height-14-20);
  margin-block-start: 15px;
  margin-inline-end: 20px;
  text-align: end;
}
.p-single cite:has(+ *) {
  margin-block-end: 15px;
}
.p-single details {
  margin-block-start: 32px;
}
.p-single details:has(+ *) {
  margin-block-end: 32px;
}
.p-single summary {
  font-size: var(--font-size-14-16);
  font-weight: 500;
  line-height: var(--line-height-14-28);
}
.p-single summary:has(+ *) {
  margin-block-end: 14px;
}
.p-single th {
  font-size: var(--font-size-14-16);
  font-weight: 700;
  line-height: var(--line-height-14-28);
}
.p-single td {
  font-size: var(--font-size-14-16);
  font-weight: 500;
  line-height: var(--line-height-14-28);
}
.p-single .entry-header {
  margin-block-start: 24px;
}
.p-single .entry-meta {
  --_margin-block-start: clamp(min(25, 40) * var(--rem-ratio), 25 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 25) / (var(--viewport-max) - var(--viewport-min)), max(25, 40) * var(--rem-ratio));
  display: block flex;
  -moz-column-gap: 20px;
       column-gap: 20px;
  margin-block-start: var(--_margin-block-start);
}
.p-single .entry-meta__separate {
  color: var(--color-text-main);
}
.p-single .posted-on {
  flex-shrink: 0;
}
.p-single .posted-on,.p-single .posted_in {
  align-self: center;
  color: var(--color-text-main);
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-14-20);
}
.p-single .posted_in {
  display: block flex;
  flex-wrap: wrap;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.p-single .entry-content {
  margin-block-start: 36px;
}
.p-single .entry-content > :first-child {
  margin-block-start: 0;
}
.p-single .entry-content > :last-child {
  margin-block-end: 0;
}
.p-single .navigation {
  margin-block-start: 32px;
}
.p-single .navigation:has(+ *) {
  margin-block-end: 32px;
}

.p-single__inner {
  max-inline-size: 688px;
}

.p-sns {
  --_grid-length: 30px;
  align-items: center;
  display: block grid;
  grid-template-columns: repeat(3, var(--_grid-length));
  inline-size: 175px;
  justify-content: space-between;
  margin-inline: auto;
}
.p-sns.-footer {
  --_grid-length: 24px;
  inline-size: 136px;
}

.u-flip-x {
  scale: -1 1;
}

.u-flip-y {
  scale: 1 -1;
}

.u-flip-xy {
  scale: -1 -1;
}

.u-hidden {
  display: none;
}

.u-separate {
  border: 1px solid;
  margin-block: var(--spacing-lg);
}

.u-separate-block {
  inline-size: 1px;
  position: relative;
}
.u-separate-block::before {
  background: currentcolor;
  content: "";
  inset-block: 5%;
  inset-inline: 0;
  position: absolute;
}

.u-text-wrap {
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

@media not screen and (min-width: 576px){
  .u-hidden-sm-down {
    display: none;
  }
}

@media screen and (min-width: 576px){
  .p-archive-menu__body {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-front-page-grand-menu-drink {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 48px;
         column-gap: 48px;
  }
  .p-front-page-grand-menu-drink__image {
    display: block flow;
  }
  .u-hidden-sm-up {
    display: none;
  }
}

@media not screen and (min-width: 768px){
  .u-hidden-md-down {
    display: none;
  }
  .u-hidden-down {
    display: none;
  }
}

@media screen and (min-width: 768px){
  :where([href*="tel:"]) {
    color: inherit;
    cursor: unset;
    pointer-events: none;
    text-decoration: none;
  }
  :where(textarea) {
    --_min-block-size: 240px;
  }
  .form__field {
    grid-template-columns: minmax(170px, auto) 1fr;
    -moz-column-gap: 28px;
         column-gap: 28px;
  }
  .form__label:where(.form__field:has([type=radio]) *) {
    align-self: start;
  }
  .form__label:where(.form__field:has(textarea) *) {
    align-self: start;
    margin-block-start: 13px;
  }
  .site {
    grid-template: "header header" auto "first-view first-view" auto "main sidebar" 1fr "footer footer" auto/auto auto;
  }
  .l-primary-section__inner:where(body:not(.no-sidebar) *) {
    margin-inline-end: revert;
    max-inline-size: calc(var(--post-archive-inner) * 1px);
    padding-inline-end: var(--horizontal-gap-spacing);
  }
  .l-secondary-section__inner:where(body:not(.no-sidebar) *) {
    margin-inline-start: revert;
    max-inline-size: var(--news-sidebar-inline-size);
    padding-inline-start: revert;
  }
  .breadcrumb__content {
    line-height: var(--line-height-14-20);
  }
  .c-concept-media > div {
    grid-template-areas: "content image";
    grid-template-columns: 389px 1fr;
    -moz-column-gap: 6.4545454545%;
         column-gap: 6.4545454545%;
  }
  .c-concept-media.-image-1 {
    --_padding-block-start: clamp(min(0, 40) * var(--rem-ratio), 0 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (40 - 0) / (var(--viewport-max) - var(--viewport-min)), max(0, 40) * var(--rem-ratio));
    padding-block-start: var(--_padding-block-start);
  }
  .c-concept-media.-image-1::after {
    inline-size: 31.25dvi;
    inset-inline-end: calc(50% - 50dvi);
  }
  .c-concept-media.-image-2 > div {
    grid-template-areas: "image content";
    grid-template-columns: 1fr 389px;
  }
  .c-concept-media.-image-2::after {
    inline-size: 45.3125dvi;
  }
  .c-concept-media.-image-3::after {
    inline-size: 76.875dvi;
  }
  .c-concept-media__heading {
    line-height: var(--line-height-28-60);
  }
  .c-concept-media__image {
    margin-block-start: revert;
  }
  .c-concept-media__image:where(.c-concept-media.-image-1 *) > div {
    aspect-ratio: 1.6;
  }
  .c-concept-media__image:where(.c-concept-media.-image-1 *) figure:nth-of-type(1) img {
    aspect-ratio: 1.6;
    inline-size: 100%;
  }
  .c-concept-media__image:where(.c-concept-media.-image-2 *) > div {
    aspect-ratio: 1.1918063315;
  }
  .c-concept-media__image:where(.c-concept-media.-image-2 *) figure:nth-of-type(1) img {
    aspect-ratio: 1.3333333333;
    inline-size: 84.375%;
  }
  .c-concept-media__image:where(.c-concept-media.-image-2 *) figure:nth-of-type(2) img {
    aspect-ratio: 1.3307984791;
    inline-size: 54.6875%;
  }
  .c-first-view-heading__main {
    line-height: var(--line-height-72-91);
  }
  .c-first-view-heading__sub {
    line-height: var(--line-height-16-23);
  }
  .c-hover-press-button {
    min-inline-size: 286px;
  }
  .c-hover-press-input-button :where([type=button], [type=reset], [type=submit]) {
    min-inline-size: 286px;
  }
  .c-lunch-set-card__thumbnail img {
    aspect-ratio: 1.0256410256;
  }
  .c-menu-card__title:where(.c-menu-card.-ground-menu *) {
    line-height: var(--line-height-20-29);
  }
  .c-menu-card__price:where(.c-menu-card.-ground-menu *) {
    line-height: var(--line-height-32-44);
  }
  .c-pasta-card__title {
    line-height: var(--line-height-18-26);
  }
  .c-pasta-card__number {
    line-height: var(--line-height-32-39);
    margin-block-start: revert;
  }
  .c-pickup-post-card__title {
    line-height: var(--line-height-14-24);
  }
  .c-post-card__thumbnail img {
    aspect-ratio: 1.5962441315;
  }
  .c-post-card__thumbnail img:is(.c-post-card.-front-page *) {
    aspect-ratio: 1.6037735849;
  }
  .c-post-card__thumbnail img:is(.c-post-card.-latest *) {
    aspect-ratio: 1.5987460815;
  }
  .c-post-card__category-label {
    line-height: var(--line-height-14-20);
  }
  .c-post-card__category-label:is(.c-post-card.-latest *) {
    line-height: var(--line-height-16-23);
  }
  .c-post-card__title {
    line-height: var(--line-height-16-24);
  }
  .c-post-card__title:is(.c-post-card.-latest *) {
    line-height: var(--line-height-20-32);
  }
  .c-post-card__excerpt {
    line-height: var(--line-height-14-24);
  }
  .c-post-card__meta {
    line-height: var(--line-height-14-20);
  }
  .c-post-card__meta:is(.c-post-card.-front-page *) {
    font-size: var(--font-size-12);
    line-height: var(--line-height-12-17);
  }
  .c-post-card__meta:is(.c-post-card.-latest *) {
    line-height: var(--line-height-14-20);
  }
  .c-post-navigation {
    line-height: var(--line-height-16-31);
  }
  .c-product__head:where(.c-product-card.-special *) {
    margin-block-start: 13px;
  }
  .c-product__title:where(.c-product-card.-special *) {
    line-height: var(--line-height-24-34);
  }
  .c-product__price:where(.c-product-card.-special *) {
    line-height: var(--line-height-32-44);
  }
  .c-products-message-card__content {
    --_column-gap: clamp(min(20, 60) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 20) / (var(--viewport-max) - var(--viewport-min)), max(20, 60) * var(--rem-ratio));
    display: block grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: var(--_column-gap);
    align-items: center;
         column-gap: var(--_column-gap);
  }
  .c-products-message-card__heading {
    line-height: var(--line-height-24-40);
    text-align: revert;
  }
  .c-products-message-card__message {
    line-height: var(--line-height-16-32);
  }
  .c-products-message-card__image {
    margin-block-start: unset;
  }
  .c-ribbon-heading {
    line-height: var(--line-height-18-26);
    padding-block: 6px 5px;
    padding-inline: 19px;
  }
  .c-ribbon-heading::before, .c-ribbon-heading::after {
    inline-size: 35px;
    inset-block-start: 7px;
  }
  .c-ribbon-heading::before {
    inset-inline-start: -20px;
  }
  .c-ribbon-heading::after {
    inset-inline-end: -20px;
  }
  .c-section-heading__main {
    line-height: var(--line-height-52-66);
  }
  .c-section-heading__sub {
    line-height: var(--line-height-14-20);
  }
  .c-shop-card__title {
    line-height: var(--line-height-24-34);
  }
  .c-shop-card__map {
    aspect-ratio: 1.7777777778;
  }
  .c-shop-card__content {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 5.8139534884%;
         column-gap: 5.8139534884%;
  }
  .c-simple-button {
    line-height: var(--line-height-14-20);
  }
  .c-tab-button {
    line-height: var(--line-height-16-20);
  }
  .p-archive-menu__genre-tabs {
    gap: 14px;
    grid-template-columns: repeat(4, 1fr);
  }
  .p-archive-products__body {
    grid-template-columns: repeat(4, 1fr);
  }
  .p-contact-form__privacy-notice {
    line-height: var(--line-height-14-20);
  }
  .p-contact-thanks__heading h1 {
    line-height: var(--line-height-28-40);
  }
  .p-contact-thanks__message p {
    line-height: var(--line-height-16-23);
  }
  .p-contact__heading h1 {
    line-height: var(--line-height-28-40);
  }
  .p-contact__message p {
    line-height: var(--line-height-16-23);
  }
  .p-first-view__image img:where(.p-first-view.-gift *) {
    -o-object-position: 50% 20%;
       object-position: 50% 20%;
  }
  .p-first-view__image img:where(.p-first-view.-contact *) {
    -o-object-position: 50% 83%;
       object-position: 50% 83%;
  }
  .p-first-view__image img:where(.p-first-view.-contact-thanks *) {
    -o-object-position: 50% 83%;
       object-position: 50% 83%;
  }
  .p-first-view__decoration::before {
    inset: 10px;
  }
  .p-first-view__decoration::after {
    inset: 16px;
  }
  .p-footer__end {
    padding-block: 43px 16px;
  }
  .p-footer__copy {
    margin-block-start: 40px;
  }
  .p-footer__bg-coffee-beans {
    scale: revert;
  }
  .p-front-page-concept__inner {
    --_horizontal-spacing: clamp(min(var(--horizontal-spacing-min), 130) * var(--rem-ratio), var(--horizontal-spacing-min) * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (130 - var(--horizontal-spacing-min)) / (var(--viewport-max) - var(--viewport-min)), max(var(--horizontal-spacing-min), 130) * var(--rem-ratio));
    padding-inline-end: var(--_horizontal-spacing);
    padding-inline-start: revert;
  }
  .p-front-page-concept__media {
    display: block grid;
    grid-template-areas: "image-content text-content";
    grid-template-columns: 600fr 470fr;
    -moz-column-gap: 6.9565217391%;
    align-items: center;
         column-gap: 6.9565217391%;
  }
  .p-front-page-concept__lead {
    line-height: var(--line-height-28-60);
  }
  .p-front-page-concept__button {
    justify-content: revert;
    margin-block-start: 54px;
  }
  .p-front-page-concept__thumbnail {
    margin-block-start: revert;
    margin-inline: revert;
  }
  .p-front-page-concept__thumbnail img {
    aspect-ratio: 0.7853403141;
    inline-size: revert;
  }
  .p-front-page-concept__rectangle {
    inline-size: 92.96875%;
  }
  .p-front-page-gallery__instagram-feed #sbi_images {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .p-front-page-grand-menu__genre-heading {
    line-height: var(--line-height-24-34);
  }
  .p-front-page-grand-menu__genre-body {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-front-page-grand-menu__genre-body:where(.p-front-page-grand-menu__genre.-drink *) {
    display: block flow;
  }
  .p-front-page-grand-menu__background-rectangle {
    inline-size: 80%;
  }
  .p-front-page-grand-menu__background-coffee-leaves {
    rotate: -43deg;
  }
  .p-front-page-news__posts {
    --_column-gap: clamp(min(19, 37) * var(--rem-ratio), 19 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (37 - 19) / (var(--viewport-max) - var(--viewport-min)), max(19, 37) * var(--rem-ratio));
    display: block grid;
    grid-template-columns: 510fr 553fr;
    -moz-column-gap: var(--_column-gap);
         column-gap: var(--_column-gap);
  }
  .p-front-page-news__posts-group {
    margin-block-start: revert;
  }
  .p-front-page-special-lunch-set__body {
    margin-inline: revert;
  }
  .p-front-page-special-lunch-set__pasta-cards {
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  .p-front-page-special-lunch-set__pasta-cards > :nth-child(2n) {
    margin-block-start: 41px;
  }
  .p-front-page-special-lunch-set__description {
    --_column-gap: clamp(min(0, 60) * var(--rem-ratio), 0 * var(--rem-ratio) + (100dvw - var(--viewport-min) * 1px) * (60 - 0) / (var(--viewport-max) - var(--viewport-min)), max(0, 60) * var(--rem-ratio));
    --_padding-inline-start: clamp(min(20, 84) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-breakpoint) * 1px) * (84 - 20) / (var(--viewport-max) - var(--viewport-breakpoint)), max(20, 84) * var(--rem-ratio));
    --_padding-inline-end: clamp(min(20, 70) * var(--rem-ratio), 20 * var(--rem-ratio) + (100dvw - var(--viewport-breakpoint) * 1px) * (70 - 20) / (var(--viewport-max) - var(--viewport-breakpoint)), max(20, 70) * var(--rem-ratio));
    display: block grid;
    grid-template-columns: 1fr 220px;
    -moz-column-gap: var(--_column-gap);
         column-gap: var(--_column-gap);
    padding-block: 25px 20px;
    padding-inline: var(--_padding-inline-start) var(--_padding-inline-end);
  }
  .p-front-page-special-lunch-set__set-description {
    align-content: center;
    margin-block-start: revert;
  }
  .p-front-page-special-lunch-set__set-description-title {
    line-height: var(--line-height-20-29);
    text-align: end;
  }
  .p-front-page-special-lunch-set__set-description-price {
    line-height: var(--line-height-60-82);
    margin-block-start: 2px;
  }
  .p-front-page-special-lunch-set__set-description-date {
    line-height: var(--line-height-14-20);
    text-align: end;
  }
  .p-news .page-title {
    line-height: var(--line-height-24-34);
  }
  .p-news__body {
    padding-inline-start: 8px;
  }
  .p-news__pagination-inner {
    padding-inline: var(--horizontal-spacing);
  }
  .p-news__pagination-inner:where(body:not(.no-sidebar) *) {
    padding-inline-end: var(--horizontal-gap-spacing);
  }
  .p-news__pagination-content {
    padding-inline-start: 8px;
  }
  .p-related-posts__heading {
    line-height: var(--line-height-28-40);
  }
  .p-related-posts__body {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-single h1,
  .p-single .entry-title {
    line-height: var(--line-height-28-40);
  }
  .p-single h2 {
    border-inline-start: 6px solid;
    line-height: var(--line-height-24-34);
  }
  .p-single h3 {
    line-height: var(--line-height-20-29);
    margin-block-start: 56px;
  }
  .p-single h4 {
    line-height: var(--line-height-16-23);
    margin-block-start: 56px;
  }
  .p-single p,
  .p-single pre {
    line-height: var(--line-height-16-32);
  }
  .p-single ul,
  .p-single ol {
    line-height: var(--line-height-16-23);
    margin-inline-start: 36px;
  }
  .p-single cite {
    margin-inline-end: revert;
  }
  .p-single summary {
    line-height: var(--line-height-16-32);
  }
  .p-single th {
    line-height: var(--line-height-16-32);
  }
  .p-single td {
    line-height: var(--line-height-16-32);
  }
  .p-sns.-footer,.p-sns.-side {
    --_grid-length: 18px;
    inline-size: 115px;
  }
  .u-hidden-md-up {
    display: none;
  }
  .u-hidden-up {
    display: none;
  }
}

@media not screen and (min-width: 1024px){
  .u-hidden-lg-down {
    display: none;
  }
}

@media screen and (min-width: 1024px){
  .p-archive-menu__body {
    grid-template-columns: repeat(4, 1fr);
  }
  .p-front-page-grand-menu-drink {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-front-page-grand-menu-drink__image {
    display: none;
  }
  .p-front-page-main-visual__heading {
    inline-size: 166px;
    inset-block-start: 27px;
    inset-inline-start: calc((18 - var(--front-page-sidebar-inline-size-max)) * 1px);
  }
  .p-front-page-main-visual__logo-light {
    display: none;
  }
  .p-front-page-main-visual__logo {
    display: block flow;
  }
  .p-front-page-main-visual__lead {
    inset-block-end: 61px;
    inset-block-start: revert;
    line-height: var(--line-height-20-45);
    margin-block: -8px;
  }
  .p-front-page-main-visual__slider .swiper-slide::after {
    background: var(--color-overlay-gradient);
    block-size: 45.9863945578%;
  }
  .p-front-page-main-visual__slider .swiper-slide img {
    block-size: max(735px, 100dvb);
  }
  .p-front-page-main-visual__slider .swiper-pagination {
    --swiper-pagination-bottom: 16px;
  }
  .p-front-page__first-view {
    display: block grid;
    grid-template-columns: calc(var(--front-page-sidebar-inline-size-max) * 1px) 1fr;
  }
  .p-front-page__side-navigation {
    display: block;
  }
  .u-hidden-lg-up {
    display: none;
  }
}

@media not screen and (min-width: 1280px){
  .u-hidden-xl-down {
    display: none;
  }
}

@media screen and (min-width: 1280px){
  .p-front-page-grand-menu-drink {
    grid-template-columns: 343fr 687fr;
    -moz-column-gap: 62px;
         column-gap: 62px;
    padding-inline-end: 8px;
    padding-inline-start: revert;
  }
  .p-front-page-grand-menu-drink__image {
    display: block flow;
  }
  .p-front-page-grand-menu-drink__genres {
    display: block grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 48px;
         column-gap: 48px;
  }
  .u-hidden-xl-up {
    display: none;
  }
}

@media (any-hover: hover){
  :where(a):hover:not(:disabled) {
    opacity: var(--opacity);
  }
  .c-hover-press-button:hover:not(:disabled) {
    opacity: revert;
    padding-block: 30px 25px;
    padding-inline: 21px 15px;
  }
  .c-hover-press-button:hover:not(:disabled)::before {
    inset-block: 6px 0;
    inset-inline: 6px 0;
  }
  .c-hover-press-input-button:where(.c-hover-press-input-button:has(:where([type=button], [type=reset], [type=submit]):hover:not(:disabled))) :where([type=button], [type=reset], [type=submit]) {
    opacity: revert;
    padding-block: 30px 25px;
    padding-inline: 21px calc(15px + var(--_letter-spacing) * -1);
  }
  .c-hover-press-input-button:where(.c-hover-press-input-button:has(:where([type=button], [type=reset], [type=submit]):hover:not(:disabled)))::before {
    inset-block: 6px 0;
    inset-inline: 6px 0;
  }
  .c-post-card__link:hover:not(:disabled) {
    opacity: revert;
  }
  .c-post-card__thumbnail img:is(.c-post-card__link:hover:not(:disabled) *) {
    scale: 1.1;
  }
  .c-simple-button:hover:not(:disabled) {
    background: var(--color-button-text);
    color: var(--color-button-ground);
    opacity: revert;
  }
  .c-tab-button:hover:not(:disabled) {
    background: var(--color-button-main);
    opacity: revert;
  }
}

@media (prefers-reduced-motion: no-preference){
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
  :where(html:focus-within) {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled){
  /* ======================================================
  // フェードイン、ふわっと表示する
  // ------------------------------------------------------ */
  [data-scroll-animation=fade-in] {
    transition-duration: 1s;
    transition-property: opacity;
    transition-timing-function: ease;
  }
  [data-scroll-animation=fade-in]:not([data-animated]) {
    opacity: 0;
  }
  /* ======================================================
  // フェードイン、ふわっと消失する
  // ------------------------------------------------------ */
  [data-scroll-animation=fade-out] {
    transition-duration: 1s;
    transition-property: opacity;
    transition-timing-function: ease;
  }
  [data-scroll-animation=fade-out][data-animated] {
    opacity: 0;
  }
  /* ======================================================
  // フェードイン、スライドアップ、下からふわっと表示する
  // ------------------------------------------------------ */
  [data-scroll-animation=fade-in-slide-up] {
    transition-duration: 1s;
    transition-property: opacity, translate;
    transition-timing-function: ease-in-out;
  }
  [data-scroll-animation=fade-in-slide-up]:not([data-animated]) {
    opacity: 0;
    translate: 0 40px;
  }
  /* ======================================================
  // フェードイン、スケールアップ、拡大しながらふわっと表示する
  // ------------------------------------------------------ */
  [data-scroll-animation=fade-in-scale-up] {
    transition-duration: 1s;
    transition-property: opacity, scale;
    transition-timing-function: var(--ease-out-expo);
  }
  [data-scroll-animation=fade-in-scale-up]:not([data-animated]) {
    opacity: 0;
    scale: 0.9;
  }
  /* ======================================================
  // フェードイン、要素の活性化
  // ------------------------------------------------------ */
  [data-scroll-animation=fade-in-activate] {
    transition-duration: 1s;
    transition-property: visibility, opacity;
    transition-timing-function: ease;
  }
  [data-scroll-animation=fade-in-activate]:not([data-animated]) {
    opacity: 0;
    visibility: hidden;
  }
  /* ======================================================
  // フェードアウト、要素の不活性化
  // ------------------------------------------------------ */
  [data-scroll-animation=fade-out-inactivate] {
    transition-duration: 1s;
    transition-property: visibility, opacity;
    transition-timing-function: ease;
  }
  [data-scroll-animation=fade-out-inactivate][data-animated] {
    opacity: 0;
    visibility: hidden;
  }
  /* ======================================================
  // 跳ねるアニメーション
  // ------------------------------------------------------ */
  @keyframes bounce {
    0% {
      translate: 0 0;
    }
    16.6% {
      animation-timing-function: ease-in;
      translate: 0 -20px;
    }
    33.3% {
      translate: 0 0;
    }
    49.8% {
      animation-timing-function: ease-in;
      translate: 0 -14px;
    }
    66.4% {
      translate: 0 0;
    }
    83% {
      animation-timing-function: ease-in;
      translate: 0 -4px;
    }
    100% {
      translate: 0 0;
    }
  }
  /* ======================================================
  // ズームアップアニメーション
  // ------------------------------------------------------ */
  @keyframes zoom-up {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.15);
    }
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  ::before,
  ::after,
  ::backdrop {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
  }
}