@charset "UTF-8";
/* カルーセルの進捗率をtransitionで補間できるように型付きカスタムプロパティーとして登録する */
@property --carousel-progress-ratio {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
/* デザイントークン */
:root {
  --primitive-white: #ffffff;
  --primitive-black: #1f1c1c;
  --primitive-gray-50: #f4f4f4;
  --primitive-gray-100: #e9e8e8;
  --primitive-gray-200: #d2d2d2;
  --primitive-gray-300: #b7b6b6;
  --primitive-gray-400: #a3a2a2;
  --primitive-gray-500: #7c7977;
  --primitive-gray-600: #6b6969;
  --primitive-gray-700: #595757;
  --primitive-gray-800: #434040;
  --primitive-gray-900: #2c2a2a;
  --primitive-beige-50: #f5f2ed;
  --primitive-beige-100: #f3f0ea;
  --primitive-beige-300: #dad2c4;
  --primitive-berry-red-50: #fbe8ed;
  --primitive-berry-red-100: #fbdbe4;
  --primitive-berry-red-200: #f4b8c8;
  --primitive-berry-red-300: #ee95ae;
  --primitive-berry-red-400: #e66589;
  --primitive-berry-red-500: #e14772;
  --primitive-berry-red-600: #da194f;
  --primitive-berry-red-700: #bd1644;
  --primitive-berry-red-800: #9b1238;
  --primitive-berry-red-900: #780e2b;
  --primitive-wine-red-50: #f3e9ee;
  --primitive-wine-red-100: #ead8e1;
  --primitive-wine-red-200: #dbbaca;
  --primitive-wine-red-300: #c999b1;
  --primitive-wine-red-400: #b16b8d;
  --primitive-wine-red-500: #a14e77;
  --primitive-wine-red-600: #8a2255;
  --primitive-wine-red-700: #751d48;
  --primitive-wine-red-800: #62183c;
  --primitive-wine-red-900: #4c132f;
  --primitive-sun-red-50: #fceae4;
  --primitive-sun-red-100: #f9ddd3;
  --primitive-sun-red-200: #f7ccbc;
  --primitive-sun-red-300: #f3b39b;
  --primitive-sun-red-400: #ed906e;
  --primitive-sun-red-500: #e97a51;
  --primitive-sun-red-600: #e45926;
  --primitive-sun-red-700: #cf5123;
  --primitive-sun-red-800: #a23f1b;
  --primitive-sun-red-900: #7d3115;
  --primitive-blue-50: #e6f1fa;
  --primitive-blue-100: #b0d4ef;
  --primitive-blue-200: #8ac0e8;
  --primitive-blue-300: #54a3dd;
  --primitive-blue-400: #3391d6;
  --primitive-blue-500: #0075cc;
  --primitive-blue-600: #006aba;
  --primitive-blue-700: #005391;
  --primitive-blue-800: #004070;
  --primitive-blue-900: #003156;
  --primitive-red-50: #f9e6e6;
  --primitive-red-100: #f4d3d3;
  --primitive-red-200: #ebb0b0;
  --primitive-red-300: #e18a8a;
  --primitive-red-400: #d35454;
  --primitive-red-500: #cb3333;
  --primitive-red-600: #be0000;
  --primitive-red-700: #a20000;
  --primitive-red-800: #870000;
  --primitive-red-900: #690000;
  --semantic-background-base: var(--primitive-white);
  --semantic-background-section: var(--primitive-beige-50);
  --semantic-background-backdrop: color-mix(in srgb, var(--primitive-gray-900) 40%, transparent);
  --semantic-background-inverse-base: var(--primitive-gray-900);
  --semantic-background-inverse-section: var(--primitive-gray-700);
  --semantic-surface-primary: var(--primitive-berry-red-600);
  --semantic-surface-primary-hover: var(--primitive-berry-red-700);
  --semantic-surface-primary-pressed: var(--primitive-berry-red-800);
  --semantic-surface-secondary: var(--primitive-gray-600);
  --semantic-surface-secondary-hover: var(--primitive-gray-700);
  --semantic-surface-secondary-pressed: var(--primitive-gray-800);
  --semantic-surface-tertiary: var(--primitive-white);
  --semantic-surface-tertiary-hover: var(--primitive-gray-100);
  --semantic-surface-tertiary-pressed: var(--primitive-gray-200);
  --semantic-surface-disabled-strong: var(--primitive-gray-100);
  --semantic-surface-disabled-weak: var(--primitive-gray-50);
  --semantic-surface-state-error: var(--primitive-red-50);
  --semantic-text-primary: var(--primitive-black);
  --semantic-text-primary-hover: var(--primitive-berry-red-600);
  --semantic-text-primary-pressed: var(--primitive-berry-red-800);
  --semantic-text-secondary: var(--primitive-gray-700);
  --semantic-text-tertiary: var(--primitive-gray-500);
  --semantic-text-accent: var(--primitive-berry-red-600);
  --semantic-text-link: var(--primitive-berry-red-600);
  --semantic-text-link-hover: var(--primitive-berry-red-800);
  --semantic-text-link-pressed-visited: var(--primitive-berry-red-900);
  --semantic-text-disabled: var(--primitive-gray-400);
  --semantic-text-state-error: var(--primitive-red-600);
  --semantic-text-inverse-primary: var(--primitive-white);
  --semantic-text-inverse-secondary: var(--primitive-gray-400);
  --semantic-icon-primary: var(--primitive-black);
  --semantic-icon-secondary: var(--primitive-gray-700);
  --semantic-icon-tertiary: var(--primitive-gray-500);
  --semantic-icon-accent: var(--primitive-berry-red-600);
  --semantic-icon-disabled: var(--primitive-gray-300);
  --semantic-icon-state-error: var(--primitive-red-600);
  --semantic-icon-inverse-primary: var(--primitive-white);
  --semantic-icon-inverse-secondary: var(--primitive-gray-400);
  --semantic-surface-indicator: var(--primitive-gray-600);
  --semantic-surface-floormap-neutral: var(--primitive-gray-300);
  --semantic-surface-floormap-neutral-interactive: var(--primitive-gray-600);
  --semantic-brand-lucua-subtle: var(--primitive-berry-red-300);
  --semantic-brand-lucua: var(--primitive-berry-red-600);
  --semantic-brand-lucua-hover: var(--primitive-berry-red-700);
  --semantic-brand-lucua-pressed: var(--primitive-berry-red-800);
  --semantic-brand-lucua-1100-subtle: var(--primitive-wine-red-300);
  --semantic-brand-lucua-1100: var(--primitive-wine-red-600);
  --semantic-brand-lucua-1100-hover: var(--primitive-wine-red-700);
  --semantic-brand-lucua-1100-pressed: var(--primitive-wine-red-800);
  --semantic-brand-lucua-south-subtle: var(--primitive-sun-red-300);
  --semantic-brand-lucua-south: var(--primitive-sun-red-600);
  --semantic-brand-lucua-south-hover: var(--primitive-sun-red-700);
  --semantic-brand-lucua-south-pressed: var(--primitive-sun-red-800);
  --semantic-border-primary: var(--primitive-black);
  --semantic-border-secondary: var(--primitive-gray-500);
  --semantic-border-tertiary: var(--primitive-gray-200);
  --semantic-border-disabled: var(--primitive-gray-300);
  --semantic-border-focus: var(--primitive-berry-red-600);
  --semantic-border-accent: var(--primitive-berry-red-600);
  --semantic-border-state-error: var(--primitive-red-600);
  /* 面を持つリンクのタップ時のハイライト キーカラーを2割の濃さで敷く */
  --semantic-tap-highlight: color-mix(in srgb, var(--primitive-berry-red-600) 20%, transparent);
  /* Figmaコンポーネント上の直値はVariable由来のPrimitive／Semanticとは分離する */
  --component-navigation-overlay-text: #212121;
  --component-dropdown-trigger-regular-inline-size: var(--grid-mobile-width);
  --component-dropdown-trigger-regular-block-size: var(--space-48);
  --component-dropdown-trigger-small-min-inline-size: calc(var(--space-96) - var(--space-8) + var(--space-2));
  --component-dropdown-trigger-small-block-size: var(--space-40);
  /* file://表示でも欠落しないよう、Dropdown Triggerの色なしマスク形状を共通トークン化する */
  --component-dropdown-icon-language-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 2.75C12.7636 2.75 13.7049 3.47386 14.498 5.23633C15.2596 6.92862 15.75 9.31951 15.75 12C15.75 14.6805 15.2596 17.0714 14.498 18.7637C13.7049 20.5261 12.7636 21.25 12 21.25C11.2364 21.25 10.2951 20.5261 9.50195 18.7637C8.74042 17.0714 8.25 14.6805 8.25 12C8.25 9.31951 8.74042 6.92862 9.50195 5.23633C10.2951 3.47386 11.2364 2.75 12 2.75Z'/%3E%3Cpath d='M3.75 9.25H20.25M3.75 14.75H20.25'/%3E%3C/svg%3E");
  --component-dropdown-icon-chevron-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 4L17 12L9 20' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
  /* file://表示でも欠落しない色なしCloseマスク形状を全コンポーネントで共有する */
  --component-icon-close-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5303 4.53027L4.53027 20.5303L3.46973 19.4697L19.4697 3.46973L20.5303 4.53027Z'/%3E%3Cpath d='M20.5303 19.4697L19.4697 20.5303L3.46973 4.53027L4.53027 3.46973L20.5303 19.4697Z'/%3E%3C/svg%3E");
  --component-chip-min-inline-size-mobile: var(--space-56);
  --component-chip-min-inline-size-desktop: var(--space-64);
  --component-header-bottom: var(--space-32);
  --component-footer-top: var(--space-100);
  --component-list-gap-vertical: var(--space-8);
  --component-button-gap: var(--space-0);
  --component-button-caption-gap: var(--space-12);
  --component-chip-gap: var(--space-8);
  --component-checkbox-gap: var(--space-8);
  --component-anchor-gap-vertical: var(--space-4);
  --component-title-title-gap: var(--space-12);
  --component-title-subtitle-gap: var(--space-8);
  /* 見出し要素自体の下余白はFigmaのセクション下パディングとは分離して管理する */
  --component-heading-1-margin-block-end: var(--space-32);
  --component-heading-2-margin-block-end: var(--space-24);
  --component-heading-3-margin-block-end: var(--space-16);
  --component-heading-4-margin-block-end: var(--space-12);
  --component-heading-5-margin-block-end: var(--space-12);
  --component-heading-6-margin-block-end: var(--space-8);
  /* Figma Heading-2/Lower-Pageのコンテンツ下余白 */
  --component-heading-section-margin-block-end: var(--component-heading-2-margin-block-end);
  /* Figma Space Layout / Mobile 見出しレベル別セクション下パディング */
  --layout-section-padding-heading-1: var(--space-80);
  --layout-section-padding-heading-2: var(--space-80);
  --layout-section-padding-heading-3: var(--space-64);
  --layout-section-padding-heading-4: var(--space-48);
  --layout-section-padding-heading-5: var(--space-32);
  --layout-section-padding-heading-6: var(--space-24);
  --layout-section-padding-inner-large: var(--space-32);
  --layout-section-padding-inner-small: var(--space-24);
  /* Dropdown SheetのPC / SP別最小幅と最大幅はFigma確定後に値を設定して有効化する */
  /* --component-dropdown-sheet-min-inline-size-mobile: ; */
  /* --component-dropdown-sheet-max-inline-size-mobile: ; */
  /* --component-dropdown-sheet-min-inline-size-desktop: ; */
  /* --component-dropdown-sheet-max-inline-size-desktop: ; */
  /* Modal/Mobile annotation: window幅の89.2%、min 286px、max-widthなし */
  --component-modal-inline-size-mobile: 89.2vi;
  --component-modal-min-inline-size-mobile: calc(var(--space-256) + var(--space-32) - var(--space-2));
  --component-modal-min-block-size-mobile: calc(var(--space-128) + var(--space-40));
  --component-modal-max-block-size-mobile: 85dvb;
  --component-modal-default-action-gap-mobile: var(--space-24);
  --component-modal-floating-footer-inline-padding-mobile: calc(var(--space-20) + var(--space-1));
  /* Modal/Desktop annotation: contents幅の65.6%。contents左右24px分の比率は31.488px */
  --component-modal-inline-size-desktop: calc(65.6vi - 31.488px);
  --component-modal-min-inline-size-desktop: calc(var(--space-256) * 2 + var(--space-128) + var(--space-8) - var(--space-2));
  --component-modal-max-inline-size-desktop: calc(var(--space-256) * 3 + var(--space-56));
  --component-modal-min-block-size-desktop: calc(var(--space-256) - var(--space-16));
  --component-modal-max-block-size-desktop: 80dvb;
  --component-modal-default-action-gap-desktop: var(--space-32);
  --font-family-jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Segoe UI", Meiryo, Roboto, "Helvetica Neue", sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-36: 2.25rem;
  --font-size-44: 2.75rem;
  --line-height-flat: 1;
  --line-height-narrow: 1.2;
  --line-height-caption: 1.3;
  --line-height-default: 1.5;
  --letter-spacing-default: 0.04em;
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-68: 68px;
  --space-72: 72px;
  --space-80: 80px;
  --space-84: 84px;
  --space-96: 96px;
  --space-100: 100px;
  --space-120: 120px;
  --space-128: 128px;
  --space-150: 150px;
  --space-256: 256px;
  --radius-999: 999px;
  --grid-mobile-width: calc(var(--space-256) + var(--space-96) - var(--space-4));
  --grid-desktop-width: calc(var(--space-256) * 5 - var(--space-24));
  --layout-desktop-column-width: calc(var(--space-256) + var(--space-128) + var(--space-8));
  --layout-desktop-small-column-width: calc(var(--space-256) + var(--space-28));
  --layout-panel-max-inline-size: calc(var(--space-256) * 3 + var(--space-56));
  --layout-content-narrow-width: calc(var(--space-256) * 4 + var(--space-16));
  /* ビューポート端からコンテンツ列までの入れ子 共通ページガターを正本にする */
  --layout-content-inset: var(--layout-page-gutter);
  /* FVの入れ子もPC中間幅の左右24pxと1256px上限を共有する */
  --layout-fv-inset: var(--layout-page-gutter);
  /* FVの右列の開始位置 拡大スライドの右端にgapを加えた縦ラインに揃える */
  --layout-fv-side-start: calc(var(--layout-fv-inset) + var(--carousel-fv-image-inline-size) + var(--layout-grid-gutter));
  /* Grid-Mobile annotation: content 89.2% / margin 5.4% / gutter 3% */
  --layout-page-gutter: 5.4vi;
  --layout-content-width: calc(var(--viewport-inline-size) - (var(--layout-page-gutter) * 2));
  --layout-grid-column-count: 12;
  --layout-grid-gap: var(--space-12);
  --layout-grid-gutter: 3vi;
  --layout-grid-column-width: calc(
    (var(--layout-content-width) - (var(--layout-grid-gutter) * (var(--layout-grid-column-count) - 1))) /
      var(--layout-grid-column-count)
  );
  /* Header/Mobileは本文ガターから独立させFigmaの左右非対称値を保持する */
  --layout-header-padding-inline-start: var(--space-16);
  --layout-header-padding-inline-end: var(--space-12);
  --layout-panel-radius: var(--space-4);
  --layout-circle-radius: 50%;
  --layout-focus-width: var(--space-2);
  --layout-focus-offset: var(--space-2);
  --layout-focus-radius: var(--space-4);
  --layout-focus-outer-size: calc(var(--layout-focus-width) + var(--layout-focus-offset));
  --layout-image-border-width: var(--space-1);
  /* 左右の内端へ要素を分配する共通アライメント */
  --alignment-justify-space-between: space-between;
  --layout-nav-underline-width: calc(var(--space-4) - var(--space-1));
  --layout-image-overlay-layer: 1;
  --layout-sticky-navigation-layer: 9;
  --layout-header-layer: 10;
  --layout-popover-layer: 20;
  --layout-bottomnav-layer: 30;
  /* 固定バックドロップはボトムナビも覆う ダイアログはトップレイヤーでページ全体を覆う */
  --layout-overlay-layer: 40;
  /* FloatingとPopupの基準Gridと画像比率と局所書体 */
  --floating-popup-font-family: "LUCUA Floating Hiragino", "Hiragino Sans", "Hiragino Kaku Gothic ProN", var(--font-family-jp);
  --floating-popup-font-weight: 300;
  --floating-popup-mobile-gutter: calc(100vi * 21 / 390);
  --floating-popup-mobile-inline-size: calc(100vi * 348 / 390);
  --floating-popup-desktop-inline-size: calc(var(--space-256) + var(--space-128) + var(--space-8));
  --floating-popup-radius: var(--space-8);
  --floating-popup-shadow: var(--space-0) var(--space-4) var(--space-16) rgb(0 0 0 / 20%);
  --floating-popup-close-surface: color-mix(in srgb, var(--semantic-background-inverse-section) 85%, transparent);
  /* 共通Top Layerホスト内の順位。表示した順番には依存させない */
  --layer-floating: 1;
  --layer-cookie: calc(var(--layer-floating) + 1);
  --layer-popup: calc(var(--layer-cookie) + 1);
  --floating-popup-max-block-size: 80dvh;
  --floating-popup-image-ratio: 348 / 264;
  --floating-popup-banner-image-ratio: 348 / 263;
  --floating-popup-button-inline-size: calc(var(--space-256) - var(--space-28));
  --floating-popup-title-size: var(--font-size-16);
  --floating-popup-title-bottom: var(--space-12);
  --floating-popup-padding: var(--space-16);
  --floating-popup-padding-bottom: var(--space-24);
  --floating-popup-slot-gap: var(--space-12);
  --button-layer-base: 0;
  --button-layer-underlay: -1;
  --card-recommend-max-columns: 1;
  --card-recommend-max-inline-size: 348px;
  --card-shopnews-max-inline-size: 138px;
  --card-promotion-max-columns: 2;
  --card-promotion-max-inline-size: 168px;
  --card-sns-panel-max-columns: 3;
  --card-sns-panel-max-inline-size: 108px;
  --card-shop-list-max-columns: 2;
  --card-shop-list-max-inline-size: 166px;
  --card-recommend-image-aspect-ratio: 89 / 67;
  --card-promotion-image-aspect-ratio: 168 / 127;
  --card-shopnews-feed-image-aspect-ratio: 4 / 5;
  --floormap-map-aspect-ratio: 4 / 3;
  --ratio-square: 1;
  --shadow-floating: var(--space-0) var(--space-4) var(--space-8) rgb(0 0 0 / 20%);
  --shadow-modal-floating-footer: var(--space-0) var(--space-0) var(--space-8) rgb(0 0 0 / 20%);
  /* ナビの現在地とホバーを示す下線 レイアウトシフトを避けるためborderではなくbox-shadowで描く */
  --shadow-nav-underline: inset var(--space-0) calc(var(--layout-nav-underline-width) * -1) var(--space-0)
    var(--semantic-border-accent);
  /* パネルの影 */
  --shadow-level-1: var(--space-0) var(--space-2) var(--space-8) rgb(0 0 0 / 30%);
  /* バックドロップのぼかし量 */
  --effect-overlay-blur: var(--space-16);
  /* 基準はease-outと300msとし用途別トークンは基準を参照しPAGE TOPスクロールの時間だけ800msとする */
  --motion-duration: 300ms;
  --motion-easing: ease-out;
  --motion-start-opacity: 0.4;
  --motion-menu-duration: var(--motion-duration);
  --motion-menu-easing: var(--motion-easing);
  --motion-menu-start-opacity: var(--motion-start-opacity);
  /* メニュー表示開始時のY方向の移動量を負数にして最終位置の上側から表示する */
  --motion-menu-start-offset: calc(var(--space-8) * -1);
  --motion-progress-duration: var(--motion-duration);
  --motion-progress-easing: var(--motion-easing);
  /* スクロールバー型インジケーターが右端から左端へ戻る時間 基準時間を共有する */
  --motion-progress-return-duration: var(--motion-duration);
  --motion-scroll-duration: 800ms;
  --motion-scroll-easing: var(--motion-easing);
  --motion-icon-duration: var(--motion-duration);
  --motion-icon-easing: var(--motion-easing);
  /* TOPヒーローカルーセルだけに適用するeaseOutBack */
  --carousel-fv-motion-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --scroll-direction-threshold: var(--space-8);
  /* カルーセルのスライド表示時間はJavaScriptでミリ秒へ変換して使用する */
  --carousel-autoplay-delay: 5000ms;
  /* 任意操作後にオートプレイへ戻るまでの無操作時間 */
  --carousel-autoplay-resume-delay: 30000ms;
  /* FV画像の等倍表示サイズ これを超えて拡大しない 縦は縦横比で決まる */
  --carousel-fv-image-inline-size: calc(var(--space-256) * 2 + var(--space-100) * 2 + var(--space-4));
  --carousel-fv-block-size: calc(var(--space-256) * 2 + var(--space-84) + var(--space-4));
  --carousel-fv-footer-offset: calc(var(--space-256) + var(--space-56) - var(--space-2));
  --carousel-fv-aspect-ratio: 716 / 536;
  /* スクロールバー型インジケーターのつまみ 幅はアクセシビリティ基準の40pxで固定し高さは枠線の内側寸法 */
  --carousel-thumb-block-size: calc(var(--space-8) + var(--space-2));
  /* バーの上限幅 これ以下では親の空き幅に追従する */
  --carousel-scrollbar-max-inline-size: calc(var(--space-256) + var(--space-48));
  --carousel-shopnews-mobile-min-block-size: calc(var(--space-256) + var(--space-84));
  --carousel-shopnews-desktop-min-block-size: calc(var(--space-256) * 2 + var(--space-100) + var(--space-8) + var(--space-2));
  --carousel-swipe-threshold: 48;
  /* TOP FVメイン画像の横振れは廃止 判定距離には影響させない */
  --carousel-fv-swipe-follow-distance: var(--space-0);
  --breakpoint-content-desktop: 768;
  --breakpoint-fv-desktop: 1280;
  --viewport-inline-size: 100vw;
  --viewport-block-size: 100dvb;
  --ratio-full: 100%;
  --ratio-half: 50%;
}

@media (min-width: 768px) {
  :root {
    --component-header-bottom: var(--space-48);
    --component-footer-top: var(--space-120);
    --component-anchor-gap-vertical: var(--space-8);
    --component-button-caption-gap: var(--space-16);
    --component-title-title-gap: var(--space-16);
    --component-title-subtitle-gap: var(--space-12);
    /* Desktopの見出し要素自体の下余白 セクション下パディングとは別管理 */
    --component-heading-1-margin-block-end: var(--space-48);
    --component-heading-2-margin-block-end: var(--space-32);
    --component-heading-3-margin-block-end: var(--space-24);
    --component-heading-4-margin-block-end: var(--space-16);
    --component-heading-5-margin-block-end: var(--space-16);
    --component-heading-6-margin-block-end: var(--space-12);
    /* Figma Space Layout / Desktop 見出しレベル別セクション下パディング */
    --layout-section-padding-heading-1: var(--space-100);
    --layout-section-padding-heading-2: var(--space-100);
    --layout-section-padding-heading-3: var(--space-80);
    --layout-section-padding-heading-4: var(--space-64);
    --layout-section-padding-heading-5: var(--space-48);
    --layout-section-padding-heading-6: var(--space-32);
    --layout-section-padding-inner-large: var(--space-48);
    --layout-section-padding-inner-small: var(--space-24);
    /* Grid-Desktop annotation: 1304px未満は左右24px 以上は1256pxを中央配置 */
    --layout-page-gutter: max(
      var(--space-24),
      calc((var(--viewport-inline-size) - var(--grid-desktop-width)) / 2)
    );
    --layout-content-width: min(
      calc(var(--viewport-inline-size) - (var(--space-24) * 2)),
      var(--grid-desktop-width)
    );
    --layout-grid-gap: var(--space-40);
    /* グリッドの余白は画面幅に対する比率3.2%を基準に32pxから40pxの範囲で変化させる */
    --layout-grid-gutter: clamp(
      var(--space-32),
      calc(3.2vi - 1.536px),
      var(--space-40)
    );
    --card-recommend-max-columns: 3;
    --card-recommend-max-inline-size: 356px;
    --card-shopnews-max-inline-size: 284px;
    --card-promotion-max-columns: 4;
    --card-promotion-max-inline-size: 284px;
    --card-sns-panel-max-columns: 6;
    --card-sns-panel-max-inline-size: 176px;
    --card-shop-list-max-columns: 4;
    --card-shop-list-max-inline-size: 284px;
    --card-promotion-image-aspect-ratio: 284 / 213;
    /* PCのバー上限幅 */
    --carousel-scrollbar-max-inline-size: calc(var(--space-256) * 3 + var(--space-12));
  }
}
@media (min-width: 1024px) {
  :root {
    /* Header/Desktopは左右60px Header/Mobileと同値化しない */
    --layout-header-padding-inline-start: var(--space-60);
    --layout-header-padding-inline-end: var(--space-60);
    --component-dropdown-trigger-regular-inline-size: calc(var(--space-256) * 2 - var(--space-12));
    --component-dropdown-trigger-regular-block-size: var(--space-56);
    --component-dropdown-trigger-small-min-inline-size: calc(var(--space-100) - var(--space-2));
  }
}

/* FloatingとPopupのPC（マークアップの tokens.css の --floating-popup-* の 768px 以上。6.30.0 で取り込み・--cookie-* は使わないので入れない） */
@media (min-width: 768px) {
  :root {
    --floating-popup-image-ratio: 392 / 297;
    --floating-popup-banner-image-ratio: 392 / 297;
    --floating-popup-button-inline-size: calc(var(--space-256) + var(--space-28));
    --floating-popup-title-size: var(--font-size-18);
    --floating-popup-title-bottom: var(--space-16);
    --floating-popup-padding: var(--space-24);
    --floating-popup-padding-bottom: var(--space-32);
    --floating-popup-slot-gap: var(--space-16);
  }
}