@layer reset, base, layout, components, pages, utilities;

@layer components {
  @layer atoms, molecules, header, footer;
}

@layer reset {
  /* stylelint-disable property-no-vendor-prefix, property-no-deprecated, selector-not-notation, declaration-property-value-no-unknown -- vendor-supplied reset */
  /*** The new CSS reset - version 1.11.3 (last updated 25.8.2024) ***/

  *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
  }

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

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  a,
  button {
    cursor: revert;
  }

  ol,
  ul,
  menu,
  summary {
    list-style: none;
  }

  ol {
    counter-reset: revert;
  }

  img {
    max-inline-size: 100%;
    max-block-size: 100%;
  }

  table {
    border-collapse: collapse;
  }

  input,
  textarea {
    -webkit-user-select: auto;
  }

  textarea {
    white-space: revert;
  }

  meter {
    -webkit-appearance: revert;
    appearance: revert;
  }

  :where(pre) {
    all: revert;
    box-sizing: border-box;
  }

  ::placeholder {
    color: unset;
  }

  :where([hidden]) {
    display: none;
  }

  :where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
  }

  :where([draggable="true"]) {
    -webkit-user-drag: element;
  }

  :where(dialog:modal) {
    all: revert;
    box-sizing: border-box;
  }

  ::-webkit-details-marker {
    display: none;
  }
}
/* swiper のベーススタイルはここで一度だけ import する。
   各コンポーネント側で import すると components や pages などの
   上位レイヤーに重複展開され、コンポーネント側の上書き
   （例: product-card-02 の非スライダー時 grid レイアウト）が効かなくなる */

@layer base {
  /**
 * Swiper 12.1.4
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: April 29, 2026
 */

  :root {
    --swiper-theme-color: #007aff;
    /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
  }
  :host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }
  .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    /* Fix of Webkit flickering */
    z-index: 1;
    display: block;
  }
  .swiper-vertical > .swiper-wrapper {
    flex-direction: column;
  }
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
  }
  .swiper-android .swiper-slide,
  .swiper-ios .swiper-slide,
  .swiper-wrapper {
    transform: translate3d(0px, 0, 0);
  }
  .swiper-horizontal {
    touch-action: pan-y;
  }
  .swiper-vertical {
    touch-action: pan-x;
  }
  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
  }
  .swiper-slide-invisible-blank {
    visibility: hidden;
  }
  /* Auto Height */
  .swiper-autoheight,
  .swiper-autoheight .swiper-slide {
    height: auto;
  }
  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }
  .swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  /* 3D Effects */
  .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
  }
  .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
  }
  .swiper-3d {
    perspective: 1200px;
    .swiper-slide,
    .swiper-cube-shadow {
      transform-style: preserve-3d;
    }
  }

  /* CSS Mode */
  .swiper-css-mode {
    > .swiper-wrapper {
      overflow: auto;
      scrollbar-width: none; /* For Firefox */
      -ms-overflow-style: none; /* For Internet Explorer and Edge */
      &::-webkit-scrollbar {
        display: none;
      }
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: start start;
    }
    &.swiper-horizontal {
      > .swiper-wrapper {
        scroll-snap-type: x mandatory;
      }
      > .swiper-wrapper > .swiper-slide:first-child {
        margin-inline-start: var(--swiper-slides-offset-before);
        scroll-margin-inline-start: var(--swiper-slides-offset-before);
      }
      > .swiper-wrapper > .swiper-slide:last-child {
        margin-inline-end: var(--swiper-slides-offset-after);
      }
    }
    &.swiper-vertical {
      > .swiper-wrapper {
        scroll-snap-type: y mandatory;
      }
      > .swiper-wrapper > .swiper-slide:first-child {
        margin-block-start: var(--swiper-slides-offset-before);
        scroll-margin-block-start: var(--swiper-slides-offset-before);
      }
      > .swiper-wrapper > .swiper-slide:last-child {
        margin-block-end: var(--swiper-slides-offset-after);
      }
    }
    &.swiper-free-mode {
      > .swiper-wrapper {
        scroll-snap-type: none;
      }
      > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: none;
      }
    }
    &.swiper-centered {
      > .swiper-wrapper::before {
        content: "";
        flex-shrink: 0;
        order: 9999;
      }
      > .swiper-wrapper > .swiper-slide {
        scroll-snap-align: center center;
        scroll-snap-stop: always;
      }
    }
    &.swiper-centered.swiper-horizontal {
      > .swiper-wrapper > .swiper-slide:first-child {
        margin-inline-start: var(--swiper-centered-offset-before);
      }
      > .swiper-wrapper::before {
        height: 100%;
        min-height: 1px;
        width: var(--swiper-centered-offset-after);
      }
    }
    &.swiper-centered.swiper-vertical {
      > .swiper-wrapper > .swiper-slide:first-child {
        margin-block-start: var(--swiper-centered-offset-before);
      }
      > .swiper-wrapper::before {
        width: 100%;
        min-width: 1px;
        height: var(--swiper-centered-offset-after);
      }
    }
  }

  /* Slide styles start */
  /* 3D Shadows */
  .swiper-3d {
    .swiper-slide-shadow,
    .swiper-slide-shadow-left,
    .swiper-slide-shadow-right,
    .swiper-slide-shadow-top,
    .swiper-slide-shadow-bottom,
    .swiper-slide-shadow,
    .swiper-slide-shadow-left,
    .swiper-slide-shadow-right,
    .swiper-slide-shadow-top,
    .swiper-slide-shadow-bottom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }
    .swiper-slide-shadow {
      background: rgba(0, 0, 0, 0.15);
    }
    .swiper-slide-shadow-left {
      background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
    .swiper-slide-shadow-right {
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
    .swiper-slide-shadow-top {
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
    .swiper-slide-shadow-bottom {
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
  }
  .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent;
  }
  .swiper:not(.swiper-watch-progress),
  .swiper-watch-progress .swiper-slide-visible {
    .swiper-lazy-preloader {
      animation: swiper-preloader-spin 1s infinite linear;
    }
  }
  .swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff;
  }
  .swiper-lazy-preloader-black {
    --swiper-preloader-color: #000;
  }
  @keyframes swiper-preloader-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  /* Slide styles end */
}

@layer base {
  /* @import "./_reset.css"; */

  /*
省略時の三点リーダーをつかうためのフォントを定義する。
EllipsisFont は Arial/Helvetica のみで、他の文字は var(--font-general) を使う。
三点リーダーの文字コードは U+2026 で、Arial/Helvetica には含まれるが、var(--font-general) には含まれないため、三点リーダーの文字コードだけを EllipsisFont で上書きする。
Androidでは、Arial/Helvetica が使えないため、三点リーダーが表示されない場合がある。

使いたくなったらコメントアウトを外して使用してください。


*/

  @font-face {
    font-family: "EllipsisFont";
    src: local("Arial"), local("Helvetica");
    unicode-range: U+2026;
  }

  html {
    scroll-behavior: smooth;

    /* 固定ヘッダー（.l-header）分 + 余白ぶんアンカーの着地位置を下げる */

    /* scroll-padding-block-start: calc(var(--header-height) + 16px); */

    scroll-padding-block-start: calc(var(--header-height));
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    /* font-family: "EllipsisFont", var(--font-general); */

    /* Article/Regular/M */
    font-family: var(--font-general);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 28.8px */
    letter-spacing: 0.32px;
  }

  /* a {
    transition-duration: 0.3s;
  } */

  a:not([class]):hover {
    opacity: 0.7;
  }

  button {
    cursor: pointer;
  }
}
/* デザイントークン（:root のカスタムプロパティのみ）はレイヤー外 */

:root {
  --inner-width: 1024px;
  --inner-padding: 20px;
  --header-height: 68px;
  --scrollbar-width: 20px; /* js で検出してもいい */
  --transition-duration: 0.3s;

  /* text size */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* z-index */
  --z-header: 100;
  --z-header-content: 101;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 90;
  --z-menu-under-header: 90;
  --z-page-float: 20;

  /* font-family */
  --font-futura: futura-pt, sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-en: var(--font-futura);
  --font-en-headding: "Futura PT", sans-serif;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-general: var(--font-jp), var(--font-en);

  /* Brand */
  --color-brand-primary: #53c197;
  --color-brand-secondary: #68d6ac;

  /* Supporting */
  --color-support-cyan-primary: #a2dbf0;
  --color-support-cyan-secondary: #aee2f6;
  --color-support-orange-primary: #f6a764;
  --color-support-orange-secondary: #ffb16e;

  /* Background */
  --color-bg-canvas: #fff;
  --color-bg-surface: #f4efef;
  --color-bg-subtle: #ebe7e7;

  /* Text */
  --color-text-primary: #000;
  --color-text-secondary: #333;
  --color-text-tertiary: #808080;
  --color-text-disabled: #999;
  --color-text-highlight: #25a07d;

  /* Accent */
  --color-accent-yellow-primary: #f6eb50;
  --color-accent-yellow-secondary: #f7ef7a;
  --color-link-primary: #2a82d5;

  /* Status */
  --color-status-error-primary: #de5141;
  --color-status-error-strong: #c03323;
  --color-status-error-soft: #ffe1de;

  /* Button */
  --color-button-primary-bg: var(--color-text-primary);
  --color-button-primary-text: var(--color-bg-canvas);
  --color-button-secondary-bg: var(--color-bg-canvas);
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-secondary-border: var(--color-text-primary);
  --color-button-hover: var(--color-text-highlight);
  --color-button-hover-text: var(--color-bg-canvas);
  --color-button-disabled: #999;

  /* Legacy aliases (keep for compatibility) */
  --color-base-green: #5fd8aa;
  --color-base-blue: #9cd5ea;
  --color-base-skyblue: #8fcfe6;
  --color-base-orange: #f0a15e;
  --color-accent-red: #ed3288;
  --color-accent-yellow: #f3e84d;
}

@media screen and (1px <= width <= 768px) {
  :root {
    --header-height: 60px;
  }
}
/* l- レイアウトクラス。components/pages から上書きできるよう components より下位 */

@layer layout {
  .l-inner {
    max-inline-size: calc(var(--inner-width) + var(--inner-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--inner-padding);
  }

  .l-inner--wide {
    max-inline-size: 1080px;
  }

  .l-inner--narrow {
    --inner-width: 700px;

    max-inline-size: calc(var(--inner-width) + var(--inner-padding) * 2);
  }

  .l-inner--full {
    max-inline-size: none;
    padding-inline: 0;
  }

  .l-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    width: 100%;
    z-index: var(--z-header);

    /* トップページの FV 上ヘッダー（HeaderTop）はページと一緒にスクロールで流す */
    &:is(.is-top) {
      position: absolute;
    }
  }

  /*
  トップページ専用の追従ヘッダー（中身は一般ページと同じ Header）。
  HeaderTop とは別要素で常に fixed のまま transform で出し入れするため、
  fixed への切り替え用の段階制御（sentinel）は不要。
  非表示中は visibility: hidden + inert（js側で制御）でフォーカス・SRから除外する。
*/
  .l-header--floating {
    z-index: var(--z-header-content);
    transform: translateY(-102%);
    visibility: hidden;
    transition:
      transform 0.3s ease,
      visibility 0.3s;

    &:is(.is-show) {
      transform: translateY(0);
      visibility: visible;
    }
  }

  .l-contents {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    padding-top: var(--header-height, 60px);

    @media screen and (width >= 769px) {
      padding-top: var(--header-height);
    }
  }
}

@layer components {
  /* Atoms */
}

@layer components {
  @layer atoms {
    .c-button {
      --button-height: 48px;
      --button-padding-inline: 40px;
      --button-gap: 8px;
      --button-bg: var(--color-button-primary-bg);
      --button-text: var(--color-button-primary-text);
      --button-border: transparent;
      --button-weight: 700;
      --button-font-size: 16px;
      --button-icon-size: 24px;
      --button-circle-size: 26px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--button-gap);
      min-height: var(--button-height);
      padding-inline: var(--button-padding-inline);
      border: 1px solid var(--button-border);
      border-radius: 1000px;
      background-color: var(--button-bg);
      color: var(--button-text);
      text-decoration: none;
      white-space: nowrap;
      transition:
        background-color var(--transition-duration),
        color var(--transition-duration),
        border-color var(--transition-duration);
    }

    .c-button--size-s {
      --button-height: 38px;
      --button-font-size: 14px;
      --button-weight: 500;
      --button-icon-size: 18px;
    }

    .c-button--size-xs {
      --button-height: 28px;
      --button-padding-inline: 0;
      --button-gap: 4px;
      --button-font-size: 14px;
      --button-weight: 500;
      --button-icon-size: 18px;
    }

    .c-button--primary {
      --button-bg: var(--color-button-primary-bg);
      --button-text: var(--color-button-primary-text);
      --button-border: transparent;
    }

    .c-button--secondary-fill {
      --button-bg: var(--color-button-secondary-bg);
      --button-text: var(--color-button-secondary-text);
      --button-border: var(--color-button-secondary-border);
    }

    .c-button--secondary-outline {
      --button-bg: transparent;
      --button-text: var(--color-button-secondary-text);
      --button-border: var(--color-button-secondary-border);
    }

    .c-button__label {
      font-size: var(--button-font-size);
      font-style: normal;
      font-weight: var(--button-weight);
      line-height: 100%;
      letter-spacing: calc(var(--button-font-size) * 0.02);
    }

    .c-button__icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--button-icon-size);
      block-size: var(--button-icon-size);
      flex-shrink: 0;
    }

    .c-button__icon {
      inline-size: 100%;
      block-size: 100%;
      display: block;
      color: currentcolor;
    }

    /* iconCircle prop: アイコンを丸枠で囲む（円26px − 枠2px − padding8px = アイコン16px） */
    .c-button.is-icon-circle .c-button__icon-wrap {
      inline-size: var(--button-circle-size);
      block-size: var(--button-circle-size);
      padding: 4px;
      border: 1px solid currentcolor;
      border-radius: 50%;
    }

    .c-button:hover,
    .c-button.is-hover {
      --button-bg: var(--color-button-hover);
      --button-text: var(--color-button-hover-text);
      --button-border: #000;
    }

    .c-button--secondary-fill:hover,
    .c-button--secondary-fill.is-hover,
    .c-button--secondary-outline:hover,
    .c-button--secondary-outline.is-hover {
      --button-bg: var(--color-button-hover);
      --button-text: var(--color-button-hover-text);
      --button-border: #000;
    }

    .c-button.is-disabled,
    .c-button:disabled {
      --button-bg: var(--color-button-disabled);
      --button-text: var(--color-button-hover-text);
      --button-border: var(--color-button-disabled);

      pointer-events: none;
    }

    .c-button--secondary-fill.is-disabled,
    .c-button--secondary-fill:disabled,
    .c-button--secondary-outline.is-disabled,
    .c-button--secondary-outline:disabled {
      --button-bg: var(--color-button-secondary-bg);
      --button-text: var(--color-button-disabled);
      --button-border: var(--color-button-disabled);
    }

    .c-button.is-text {
      min-height: auto;
      border: 0;
      border-bottom: 1px solid currentcolor;
      border-radius: 0;
      background-color: transparent;
      color: var(--color-button-secondary-text);
      padding-block: 4px;
    }

    .c-button--primary.is-text:hover,
    .c-button--primary.is-text.is-hover,
    .c-button--secondary-fill.is-text:hover,
    .c-button--secondary-fill.is-text.is-hover,
    .c-button--secondary-outline.is-text:hover,
    .c-button--secondary-outline.is-text.is-hover {
      color: var(--color-button-hover);
    }

    .c-button.is-text.is-disabled,
    .c-button.is-text:disabled {
      background-color: transparent;
      color: var(--color-button-disabled);
    }

    .c-button--size-xs .c-button__label {
      font-size: 14px;
    }

    .c-button--size-xs.c-button--primary .c-button__label,
    .c-button--size-xs.c-button--secondary-fill .c-button__label,
    .c-button--size-xs.c-button--secondary-outline .c-button__label,
    .c-button--size-xs.c-button--link-primary .c-button__label {
      font-size: 14px;
      letter-spacing: 0.28px;
    }

    /* pc: PC 表示用のテキスト+丸囲み矢印リンク（Figma 895:17756。下線なし・16px） */
    .c-button--pc {
      --button-bg: transparent;
      --button-text: var(--color-button-secondary-text);
      --button-border: transparent;
      --button-gap: 8px;
      --button-font-size: 16px;
    }

    .c-button--size-xs.c-button--pc .c-button__label {
      font-size: 16px;
      letter-spacing: 0.32px;
    }

    .c-button--link-primary {
      --button-bg: var(--color-link-primary);
      --button-text: var(--color-bg-canvas);
      --button-border: transparent;
    }

    .c-button--pc.is-text {
      border-block-end: 0;
      padding-block: 0;
    }

    .c-button--link-primary.is-text {
      --button-gap: 2px;

      color: var(--color-link-primary);
      padding-block: 2px;
    }

    .c-button--pc.is-text:hover,
    .c-button--pc.is-text.is-hover {
      color: var(--color-button-hover);
    }

    .c-button--link-primary.is-text:hover,
    .c-button--link-primary.is-text.is-hover {
      color: var(--color-button-hover);
    }
  }
}

@layer components {
  @layer atoms {
    /* ButtonIconFavorite — 40×40 circular icon button (Figma: 895:17765) */

    .c-btn-icon-fav {
      --btn-icon-fav-size: 40px;
      --btn-icon-fav-icon-size: 20px;
      --btn-icon-fav-border-color: var(--color-text-primary);
      --btn-icon-fav-color: var(--color-text-primary);

      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--btn-icon-fav-size);
      block-size: var(--btn-icon-fav-size);
      flex-shrink: 0;
      border: 1px solid var(--btn-icon-fav-border-color);
      border-radius: 100px;
      background-color: var(--color-bg-canvas);
      color: var(--btn-icon-fav-color);
      text-decoration: none;
      cursor: pointer;
      transition:
        color var(--transition-duration),
        border-color var(--transition-duration);
    }

    /* Icon wrappers */
    .c-btn-icon-fav__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--btn-icon-fav-icon-size);
      block-size: var(--btn-icon-fav-icon-size);
      flex-shrink: 0;
    }

    /* Default: show outline, hide fill */
    .c-btn-icon-fav__icon--fill {
      display: none;
    }

    /* Active (on): show fill, hide outline */
    .c-btn-icon-fav.is-active .c-btn-icon-fav__icon--outline {
      display: none;
    }

    .c-btn-icon-fav.is-active .c-btn-icon-fav__icon--fill {
      display: inline-flex;
    }

    /* Hover (not disabled): show fill icon, green color */
    .c-btn-icon-fav:not(:disabled, .is-disabled):hover .c-btn-icon-fav__icon--outline,
    .c-btn-icon-fav.is-hover:not(.is-disabled) .c-btn-icon-fav__icon--outline {
      display: none;
    }

    .c-btn-icon-fav:not(:disabled, .is-disabled):hover .c-btn-icon-fav__icon--fill,
    .c-btn-icon-fav.is-hover:not(.is-disabled) .c-btn-icon-fav__icon--fill {
      display: inline-flex;
    }

    .c-btn-icon-fav:not(:disabled, .is-disabled):hover,
    .c-btn-icon-fav.is-hover:not(.is-disabled) {
      --btn-icon-fav-color: var(--color-text-highlight);
    }

    /* Disabled */

    /* stylelint-disable-next-line no-descending-specificity */
    .c-btn-icon-fav:disabled,
    .c-btn-icon-fav.is-disabled {
      --btn-icon-fav-border-color: #b2b2b2;
      --btn-icon-fav-color: #b2b2b2;

      pointer-events: none;
      cursor: default;
    }
  }
}

@layer components {
  @layer atoms {
    .c-radio-button {
      --radio-unchecked-fill: #fff;
      --radio-unchecked-stroke: #999;
      --radio-checked-fill: #000;
      --radio-checked-dot: #fff;
      --radio-focused-stroke: #000;
      position: relative;
      inline-size: 24px;
      block-size: 24px;
      display: inline-grid;
      place-items: center;
      vertical-align: middle;
    }

    .c-radio-button__input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    .c-radio-button__control {
      position: relative;
      inline-size: 24px;
      block-size: 24px;
      display: grid;
      place-items: center;
    }

    .c-radio-button__svg {
      inline-size: 24px;
      block-size: 24px;
      display: block;
    }

    .c-radio-button__unchecked-focus {
      opacity: 0;
      fill: var(--radio-unchecked-fill);
      stroke: var(--radio-focused-stroke);
      stroke-width: 2px;
    }

    .c-radio-button__checked-fill {
      opacity: 0;
      fill: var(--radio-checked-fill);
    }

    .c-radio-button__checked-dot {
      opacity: 0;
      fill: var(--radio-checked-dot);
    }

    .c-radio-button__checked-focus {
      opacity: 0;
      fill: none;
      stroke: var(--radio-focused-stroke);
      stroke-width: 1px;
    }

    .c-radio-button__unchecked {
      fill: var(--radio-unchecked-fill);
      stroke: var(--radio-unchecked-stroke);
      stroke-width: 1px;
      opacity: 1;
    }

    .c-radio-button__input:focus-visible + .c-radio-button__control .c-radio-button__unchecked,
    .c-radio-button.is-focus .c-radio-button__unchecked {
      opacity: 0;
    }

    .c-radio-button__input:focus-visible + .c-radio-button__control .c-radio-button__unchecked-focus,
    .c-radio-button.is-focus .c-radio-button__unchecked-focus {
      opacity: 1;
    }

    .c-radio-button__input:checked + .c-radio-button__control .c-radio-button__unchecked,
    .c-radio-button__input:checked + .c-radio-button__control .c-radio-button__unchecked-focus,
    .c-radio-button.is-checked .c-radio-button__unchecked,
    .c-radio-button.is-checked .c-radio-button__unchecked-focus {
      opacity: 0;
    }

    .c-radio-button__input:checked + .c-radio-button__control .c-radio-button__checked-fill,
    .c-radio-button__input:checked + .c-radio-button__control .c-radio-button__checked-dot,
    .c-radio-button.is-checked .c-radio-button__checked-fill,
    .c-radio-button.is-checked .c-radio-button__checked-dot {
      opacity: 1;
    }

    .c-radio-button__input:checked:focus-visible + .c-radio-button__control .c-radio-button__checked-focus,
    .c-radio-button.is-checked.is-focus .c-radio-button__checked-focus {
      opacity: 1;
    }

    .c-radio-button.is-error {
      --radio-unchecked-fill: #ffe1de;
      --radio-unchecked-stroke: #de5141;
      --radio-checked-fill: #de5141;
      --radio-checked-dot: #ffe1de;
      --radio-focused-stroke: #de5141;
    }

    .c-radio-button.is-disabled {
      --radio-unchecked-fill: #e5e5e5;
      --radio-unchecked-stroke: #999;
      --radio-checked-fill: #999;
      --radio-checked-dot: #e5e5e5;
      --radio-focused-stroke: #999;

      cursor: not-allowed;
    }

    .c-radio-button.is-disabled .c-radio-button__input {
      cursor: not-allowed;
    }

    .c-radio-button-with-label {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      min-inline-size: 0;
      cursor: pointer;
    }

    .c-radio-button-with-label * {
      cursor: inherit;
    }

    .c-radio-button-with-label__control {
      flex: none;
    }

    .c-radio-button-with-label__text-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-inline-size: 0;
    }

    .c-radio-button-with-label__label {
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
    }

    .c-radio-button-with-label__hint {
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #4d4d4d;
    }

    .c-radio-button-with-label.is-error .c-radio-button-with-label__label,
    .c-radio-button-with-label.is-error .c-radio-button-with-label__hint {
      color: var(--color-status-error-primary);
    }

    .c-radio-button-with-label.is-disabled .c-radio-button-with-label__label,
    .c-radio-button-with-label.is-disabled .c-radio-button-with-label__hint {
      color: #808080;
    }

    .c-radio-button-with-label.is-disabled,
    .c-radio-button-with-label.is-disabled * {
      cursor: not-allowed;
    }
  }
}

@layer components {
  @layer atoms {
    /* ----------------------------------------
  .c-radio-option
  // src/components/forms/RadioOption.astro
---------------------------------------- */

    .c-radio-option {
      position: relative;
      inline-size: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      gap: 16px;
      align-items: center;
    }

    .c-radio-option__input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    .c-radio-option__content {
      min-inline-size: 0;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-radio-option__control {
      position: relative;
      inline-size: 24px;
      block-size: 24px;
      display: grid;
      place-items: center;
      flex: none;
    }

    .c-radio-option__control::before {
      content: "";
      position: absolute;
      inset: 3px;
      border: 1.5px solid var(--color-text-primary);
      border-radius: 999px;
      background-color: var(--color-bg-canvas);
    }

    .c-radio-option__control::after {
      content: "";
      position: absolute;
      inline-size: 8px;
      block-size: 8px;
      border-radius: 999px;
      background-color: var(--color-text-primary);
      opacity: 0;
      transform: scale(0.75);
      transition:
        opacity var(--transition-duration),
        transform var(--transition-duration);
    }

    .c-radio-option__input:checked + .c-radio-option__content + .c-radio-option__control::after {
      opacity: 1;
      transform: scale(1);
    }

    .c-radio-option__input:focus-visible + .c-radio-option__content + .c-radio-option__control::before,
    .c-radio-option.is-focus .c-radio-option__control::before {
      border-color: var(--color-text-primary);
      box-shadow: 0 0 0 2px rgb(0 0 0 / 20%);
    }

    .c-radio-option.is-error .c-radio-option__control::before {
      border-color: var(--color-status-error-primary);
    }

    .c-radio-option.is-error .c-radio-option__input:checked + .c-radio-option__content + .c-radio-option__control::after {
      background-color: var(--color-status-error-primary);
    }

    .c-radio-option__input:disabled + .c-radio-option__content + .c-radio-option__control::before {
      border-color: #b2b2b2;
    }

    .c-radio-option__input:disabled + .c-radio-option__content + .c-radio-option__control::after {
      background-color: #b2b2b2;
    }

    .c-radio-option.is-disabled {
      cursor: not-allowed;
    }

    .c-radio-option.is-disabled .c-radio-option__input {
      cursor: not-allowed;
    }
  }
}

@layer components {
  @layer atoms {
    .c-check-button {
      --check-unchecked-fill: #fff;
      --check-unchecked-stroke: #999;
      --check-checked-fill: #000;
      --check-icon-fill: #fff;
      --check-focused-stroke: #000;

      position: relative;
      inline-size: 24px;
      block-size: 24px;
      display: inline-grid;
      place-items: center;
      vertical-align: middle;
    }

    .c-check-option {
      --check-unchecked-bg: #fff;
      --check-unchecked-border: #999;
      --check-checked-bg: #000;
      --check-icon-color: #fff;
      --check-focus-color: #000;
      --check-shape-radius: 4px;

      position: relative;
      inline-size: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      gap: 16px;
      align-items: center;
    }

    .c-check-option.is-round {
      --check-shape-radius: 999px;
    }

    .c-check-button.is-error,
    .c-check-option.is-error {
      --check-unchecked-fill: #ffe1de;
      --check-unchecked-stroke: #de5141;
      --check-checked-fill: #de5141;
      --check-icon-fill: #fff;
      --check-focused-stroke: #de5141;
      --check-unchecked-bg: #ffe1de;
      --check-unchecked-border: #de5141;
      --check-checked-bg: #de5141;
      --check-icon-color: #fff;
      --check-focus-color: #de5141;
    }

    .c-check-button__input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    .c-check-button__control {
      position: relative;
      inline-size: 24px;
      block-size: 24px;
      display: grid;
      place-items: center;
      pointer-events: none;
    }

    .c-check-button__svg {
      inline-size: 24px;
      block-size: 24px;
      display: block;
      pointer-events: none;
    }

    .c-check-button__unchecked {
      fill: var(--check-unchecked-fill);
      stroke: var(--check-unchecked-stroke);
      opacity: 1;
    }

    .c-check-button__unchecked-focus {
      opacity: 0;
      fill: var(--check-unchecked-fill);
      stroke: var(--check-focused-stroke);
      stroke-width: 2px;
    }

    .c-check-button__checked-fill {
      opacity: 0;
      fill: var(--check-checked-fill);
    }

    .c-check-button__checked-icon,
    .c-check-button__indeterminate-icon {
      opacity: 0;
      fill: var(--check-icon-fill);
    }

    .c-check-button__checked-focus {
      opacity: 0;
      fill: none;
      stroke: var(--check-focused-stroke);
    }

    .c-check-button.is-focus .c-check-button__unchecked,
    .c-check-button__input:checked + .c-check-button__control .c-check-button__unchecked,
    .c-check-button__input:indeterminate + .c-check-button__control .c-check-button__unchecked {
      opacity: 0;
    }

    .c-check-button.is-focus .c-check-button__unchecked-focus,
    .c-check-button__input:checked + .c-check-button__control .c-check-button__unchecked-focus,
    .c-check-button__input:indeterminate + .c-check-button__control .c-check-button__unchecked-focus {
      opacity: 1;
    }

    .c-check-button__input:checked + .c-check-button__control .c-check-button__checked-fill,
    .c-check-button__input:checked + .c-check-button__control .c-check-button__checked-icon,
    .c-check-button__input:indeterminate + .c-check-button__control .c-check-button__checked-fill,
    .c-check-button__input:indeterminate + .c-check-button__control .c-check-button__indeterminate-icon {
      opacity: 1;
    }

    .c-check-button__input:indeterminate + .c-check-button__control .c-check-button__checked-icon {
      opacity: 0;
    }

    .c-check-button__input:disabled + .c-check-button__control .c-check-button__checked-focus {
      stroke: #999;
    }

    .c-check-button__input:checked:focus-visible + .c-check-button__control .c-check-button__checked-focus,
    .c-check-button__input:indeterminate:focus-visible + .c-check-button__control .c-check-button__checked-focus {
      opacity: 1;
    }

    .c-check-button__input:focus-visible + .c-check-button__control .c-check-button__unchecked {
      opacity: 0;
    }

    .c-check-button__input:focus-visible + .c-check-button__control .c-check-button__unchecked-focus {
      opacity: 1;
    }

    .c-check-option__control {
      position: relative;
      inline-size: 18px;
      block-size: 18px;
      border: 1px solid var(--check-unchecked-border);
      border-radius: var(--check-shape-radius);
      background-color: var(--check-unchecked-bg);
      display: grid;
      place-items: center;
      justify-self: end;
      pointer-events: none;
    }

    .c-check-option__control::after {
      content: "";
      position: absolute;
      inset: -2px;
      border: 1px solid var(--check-focus-color);
      border-radius: calc(var(--check-shape-radius) + 2px);
      opacity: 0;
    }

    .c-check-option__icon {
      position: absolute;
      color: var(--check-icon-color);
      opacity: 0;
    }

    .c-check-option__icon--check {
      inline-size: 9px;
      block-size: 5px;
      border-inline-start: 2px solid currentcolor;
      border-block-end: 2px solid currentcolor;
      transform: translateY(-1px) rotate(-45deg);
    }

    .c-check-option__icon--indeterminate {
      inline-size: 10px;
      block-size: 2px;
      border-radius: 999px;
      background-color: currentcolor;
    }

    .c-check-option__input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }

    .c-check-option__content {
      min-inline-size: 0;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-check-option.is-focus .c-check-option__control {
      border-width: 2px;
      border-color: var(--check-focus-color);
    }

    .c-check-option__input:focus-visible + .c-check-option__content + .c-check-option__control {
      border-color: var(--check-focus-color);
    }

    .c-check-option__input:indeterminate + .c-check-option__content + .c-check-option__control .c-check-option__icon--check {
      opacity: 0;
    }

    .c-check-option__input:indeterminate + .c-check-option__content + .c-check-option__control .c-check-option__icon--indeterminate {
      opacity: 1;
    }

    .c-check-option__input:checked + .c-check-option__content + .c-check-option__control,
    .c-check-option__input:indeterminate + .c-check-option__content + .c-check-option__control {
      background-color: var(--check-checked-bg);
      border-color: var(--check-checked-bg);
    }

    .c-check-option__input:checked + .c-check-option__content + .c-check-option__control .c-check-option__icon--check {
      opacity: 1;
    }

    .c-check-option__input:checked:focus-visible + .c-check-option__content + .c-check-option__control {
      border-width: 1px;
    }

    .c-check-option__input:indeterminate:focus-visible + .c-check-option__content + .c-check-option__control {
      border-width: 1px;
    }

    .c-check-option__input:checked:focus-visible + .c-check-option__content + .c-check-option__control::after,
    .c-check-option__input:indeterminate:focus-visible + .c-check-option__content + .c-check-option__control::after {
      opacity: 1;
    }

    .c-check-button__input:disabled,
    .c-check-option__input:disabled {
      cursor: not-allowed;
    }

    .c-check-button__input:disabled + .c-check-button__control .c-check-button__unchecked {
      fill: #ffe1de;
      stroke: #de5141;
    }

    .c-check-button__input:disabled + .c-check-button__control .c-check-button__unchecked-focus {
      fill: #ffe1de;
      stroke: #de5141;
    }

    .c-check-button__input:disabled + .c-check-button__control .c-check-button__checked-fill {
      fill: #999;
    }

    .c-check-button__input:disabled + .c-check-button__control .c-check-button__checked-icon,
    .c-check-button__input:disabled + .c-check-button__control .c-check-button__indeterminate-icon {
      fill: #e5e5e5;
    }

    .c-check-button-with-label {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      min-inline-size: 0;
      cursor: pointer;
    }

    .c-check-button-with-label * {
      cursor: inherit;
    }

    .c-check-button-with-label__control {
      flex: none;
    }

    .c-check-button-with-label__text-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-inline-size: 0;
    }

    .c-check-button-with-label__label {
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
    }

    .c-check-button-with-label__hint {
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #4d4d4d;
    }

    .c-check-button-with-label.is-error .c-check-button-with-label__label,
    .c-check-button-with-label.is-error .c-check-button-with-label__hint {
      color: var(--color-status-error-primary);
    }

    .c-check-button-with-label.is-disabled .c-check-button-with-label__label,
    .c-check-button-with-label.is-disabled .c-check-button-with-label__hint {
      color: #808080;
    }

    .c-check-button-with-label.is-disabled,
    .c-check-button-with-label.is-disabled * {
      cursor: not-allowed;
    }
  }
}

@layer components {
  @layer atoms {
    .c-field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }

    .c-field-group__label {
      padding: 0;
    }

    .c-field-group__content {
      margin-top: 8px;
    }
  }
}

@layer components {
  @layer atoms {
    .c-form-field-label {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #000;
    }

    .c-form-field-label__required {
      color: var(--color-status-error-strong);
    }
  }
}

@layer components {
  @layer atoms {
    .c-label-value {
      display: flex;
      flex-direction: column;
      gap: 4px;
      inline-size: 100%;
    }

    .c-label-value__label {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #666;
    }

    .c-label-value__value {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #000;

      /* word-break: break-word; */
    }
  }
}

@layer components {
  @layer atoms {
    /* ===== Select Box ===== */

    .c-select-box {
      position: relative;
      display: inline-block;
      width: 100%;
    }

    /* ===== Trigger ===== */

    .c-select-box__trigger {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      height: 48px;
      padding: 12px;
      background: #fff;
      border: 1px solid #b2b2b2;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
    }

    .c-select-box__trigger-main {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .c-select-box__trigger:focus-visible {
      outline: none;
      border-width: 2px;
      border-color: #000;
    }

    .c-select-box__trigger-label {
      flex: 1;
      min-width: 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.32px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .c-select-box__leading-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }

    /* 値が選択されているとき */
    .c-select-box.has-value .c-select-box__trigger-label {
      color: #000;
    }

    .c-select-box.has-value .c-select-box__leading-icon {
      color: #000;
    }

    .c-select-box__trigger-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;

      /* transition: transform 0.2s ease; */
    }

    /* 開いているときキャレットを回転 */
    .c-select-box.is-open .c-select-box__trigger-icon {
      transform: rotate(180deg);
    }

    .c-select-box.is-open .c-select-box__trigger {
      border-width: 2px;
      border-color: #000;
    }

    /* ===== Disabled ===== */

    .c-select-box.is-disabled .c-select-box__trigger {
      background: #e5e5e5;
      pointer-events: none;
      cursor: not-allowed;
    }

    .c-select-box.is-disabled .c-select-box__trigger-label {
      color: #999;
    }

    .c-select-box.is-disabled .c-select-box__trigger-icon {
      color: #999;
    }

    .c-select-box.is-disabled .c-select-box__leading-icon {
      color: #999;
    }

    /* ===== Error ===== */

    .c-select-box.is-error .c-select-box__trigger {
      background: #ffe1de;
      border-color: #de5141;
    }

    .c-select-box.is-error .c-select-box__trigger-label {
      color: #c03323;
    }

    .c-select-box.is-error .c-select-box__trigger-icon {
      color: #de5141;
    }

    .c-select-box.is-error .c-select-box__leading-icon {
      color: #de5141;
    }

    .c-select-box.is-error .c-select-box__trigger:focus-visible {
      border-width: 2px;
      border-color: #de5141;
    }

    .c-select-box.is-error.is-open .c-select-box__trigger {
      border-width: 2px;
      border-color: #de5141;
    }

    /* ===== Panel (floating) ===== */

    .c-select-box__panel {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      z-index: 100;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 4px 0;
      max-block-size: 240px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* hidden 属性が付いているときは確実に非表示 */
    .c-select-box__panel[hidden] {
      display: none;
    }

    /* ===== Option ===== */

    .c-select-box__option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 48px;
      padding: 12px;
      background: #fff;
      border: none;
      cursor: pointer;
      text-align: left;
    }

    .c-select-box__option:hover,
    .c-select-box__option:focus-visible {
      background: var(--color-bg-surface);
      outline: none;
    }

    .c-select-box__option.is-disabled {
      cursor: default;
      pointer-events: none;
    }

    .c-select-box__option-label {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.32px;
      color: #000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .c-select-box__option.is-disabled .c-select-box__option-label {
      color: #999;
    }

    .c-select-box__option-check {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      visibility: hidden;
    }

    .c-select-box__option.is-selected .c-select-box__option-check {
      visibility: visible;
    }

    /* ===== Select Box with Label ===== */

    .c-select-box-with-label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .c-select-box-with-label__caption {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.24px;
      color: #000;
    }

    .c-select-box-with-label.is-error .c-select-box-with-label__caption {
      color: #de5141;
    }
  }
}

@layer components {
  @layer atoms {
    .c-text-input {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      inline-size: 100%;
      block-size: 48px;
      padding-inline: 12px;
      border: 1px solid #b2b2b2;
      border-radius: 8px;
      background: #fff;
    }

    .c-text-input__leading-icon {
      flex-shrink: 0;
      inline-size: 24px;
      block-size: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #808080;
      line-height: 1;
    }

    .c-text-input__input {
      inline-size: 100%;
      min-inline-size: 0;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;

      /* color: #808080; */
    }

    .c-text-input__input::placeholder {
      color: #999;
    }

    .c-text-input__input:focus-visible {
      outline: 0;
    }

    .c-text-input:has(.c-text-input__input:focus-visible),
    .c-text-input.is-focus {
      border-color: #000;
      outline: 1px solid #000;
      outline-offset: -2px;
    }

    .c-text-input.is-disabled {
      background: #e5e5e5;
      cursor: not-allowed;
    }

    .c-text-input.is-disabled .c-text-input__leading-icon,
    .c-text-input.is-disabled .c-text-input__input::placeholder {
      color: #999;
    }

    .c-text-input.is-disabled .c-text-input__input {
      cursor: not-allowed;
      color: #999;
    }

    .c-text-input.is-error {
      border-color: #de5141;
      background: #ffe1de;
    }

    .c-text-input.is-error .c-text-input__input,
    .c-text-input.is-error .c-text-input__leading-icon,
    .c-text-input.is-error .c-text-input__input::placeholder {
      color: #c03323;
    }

    .c-text-input.is-error:has(.c-text-input__input:focus-visible),
    .c-text-input.is-error.is-focus {
      border-color: #de5141;
      outline: 1px solid #de5141;
      outline-offset: -2px;
    }

    .c-text-input-with-label {
      display: inline-flex;
      flex-direction: column;
      gap: 8px;
      inline-size: 100%;
    }

    .c-text-input-with-label__field-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .c-text-input-with-label__caption {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #4d4d4d;
    }

    .c-text-input-with-label.is-error .c-text-input-with-label__caption {
      color: #c03323;
    }

    .c-text-input-with-label.is-disabled .c-text-input-with-label__label,
    .c-text-input-with-label.is-disabled .c-text-input-with-label__caption {
      color: #666;
    }

    .c-password-input {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      inline-size: 100%;
      block-size: 48px;
      padding-inline: 12px;
      border: 1px solid #b2b2b2;
      border-radius: 8px;
      background: #fff;
    }

    .c-password-input__leading-icon {
      flex-shrink: 0;
      inline-size: 24px;
      block-size: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #808080;
      line-height: 1;
    }

    .c-password-input__input {
      flex: 1;
      min-inline-size: 0;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #808080;
    }

    .c-password-input__input::placeholder {
      color: #808080;
    }

    .c-password-input__toggle {
      flex-shrink: 0;
      inline-size: 24px;
      block-size: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #808080;
      line-height: 1;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .c-password-input__toggle:focus-visible {
      outline: 0;
    }

    .c-password-input:has(.c-password-input__input:focus-visible),
    .c-password-input:has(.c-password-input__toggle:focus-visible),
    .c-password-input.is-focus {
      border-color: #000;
      outline: 1px solid #000;
      outline-offset: -2px;
    }

    .c-password-input.is-disabled {
      background: #e5e5e5;
      cursor: not-allowed;
    }

    .c-password-input.is-disabled .c-password-input__input::placeholder,
    .c-password-input.is-disabled .c-password-input__leading-icon {
      color: #999;
    }

    .c-password-input.is-disabled .c-password-input__input {
      cursor: not-allowed;
      color: #999;
    }

    .c-password-input.is-disabled .c-password-input__toggle {
      cursor: not-allowed;
      color: #999;
    }

    .c-password-input.is-error {
      border-color: #de5141;
      background: #ffe1de;
    }

    .c-password-input.is-error .c-password-input__input,
    .c-password-input.is-error .c-password-input__input::placeholder,
    .c-password-input.is-error .c-password-input__leading-icon,
    .c-password-input.is-error .c-password-input__toggle {
      color: #c03323;
    }

    .c-password-input.is-error:has(.c-password-input__input:focus-visible),
    .c-password-input.is-error:has(.c-password-input__toggle:focus-visible),
    .c-password-input.is-error.is-focus {
      border-color: #de5141;
      outline: 1px solid #de5141;
      outline-offset: -2px;
    }

    .c-password-input__caption {
      margin-block: 4px 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #4d4d4d;
    }

    .c-password-input.is-error + .c-password-input__caption {
      color: #c03323;
    }

    .c-password-input.is-disabled + .c-password-input__caption {
      color: #666;
    }

    .c-password-input-with-label {
      display: inline-flex;
      flex-direction: column;
      gap: 8px;
      inline-size: 100%;
    }

    .c-password-input-with-label__field-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .c-password-input-with-label__caption {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #4d4d4d;
    }

    .c-password-input-with-label.is-error .c-password-input-with-label__caption {
      color: #c03323;
    }

    .c-password-input-with-label.is-disabled .c-password-input-with-label__label,
    .c-password-input-with-label.is-disabled .c-password-input-with-label__caption {
      color: #666;
    }
  }
}

@layer components {
  @layer atoms {
    .c-text-area-wrap {
      display: inline-flex;
      flex-direction: column;
      gap: 4px;
      inline-size: 100%;
      max-inline-size: 100%;
    }

    .c-text-area {
      position: relative;
      display: inline-flex;
      align-items: flex-start;
      inline-size: 100%;
      min-block-size: 144px;
      padding: 12px;
      border: 1px solid #b2b2b2;
      border-radius: 8px;
      background: #fff;
    }

    .c-text-area__input {
      inline-size: 100%;
      min-inline-size: 0;
      min-block-size: 120px;
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      resize: none;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #000;
    }

    .c-text-area__input::placeholder {
      color: #999;
    }

    .c-text-area:has(.c-text-area__input:focus-visible),
    .c-text-area.is-focus {
      border-color: #000;
      outline: 1px solid #000;
      outline-offset: -2px;
    }

    .c-text-area.is-disabled {
      background: #e5e5e5;
    }

    .c-text-area.is-disabled,
    .c-text-area.is-disabled .c-text-area__input {
      cursor: not-allowed;
    }

    .c-text-area.is-disabled .c-text-area__input,
    .c-text-area.is-disabled .c-text-area__input::placeholder {
      color: #999;
    }

    .c-text-area.is-error {
      border-color: #de5141;
      background: #ffe1de;
    }

    .c-text-area.is-error .c-text-area__input,
    .c-text-area.is-error .c-text-area__input::placeholder {
      color: #c03323;
    }

    .c-text-area.is-error:has(.c-text-area__input:focus-visible),
    .c-text-area.is-error.is-focus {
      border-color: #de5141;
      outline: 1px solid #de5141;
      outline-offset: -2px;
    }

    .c-text-area__resize-handle {
      position: absolute;
      right: 3px;
      bottom: 3px;
      width: 10px;
      height: 10px;
      pointer-events: auto;
      cursor: nwse-resize;
      touch-action: none;
      background:
        linear-gradient(135deg, transparent 55%, #b2b2b2 56%, #b2b2b2 64%, transparent 65%) 0 0 / 100% 100% no-repeat,
        linear-gradient(135deg, transparent 40%, #b2b2b2 41%, #b2b2b2 49%, transparent 50%) 0 0 / 100% 100% no-repeat;
      opacity: 0.9;

      /* spサイズのときは display none */
      @media screen and (1px <= width <= 768px) {
        display: none;
      }
    }

    .c-text-area.is-disabled .c-text-area__resize-handle {
      pointer-events: none;
      cursor: not-allowed;
    }

    .c-text-area__counter {
      margin: 0;
      text-align: right;
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #999;
    }

    .c-text-area.is-error + .c-text-area__counter {
      color: #c03323;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    .c-text-area.is-error .c-text-area__resize-handle {
      background:
        linear-gradient(135deg, transparent 55%, #de5141 56%, #de5141 64%, transparent 65%) 0 0 / 100% 100% no-repeat,
        linear-gradient(135deg, transparent 40%, #de5141 41%, #de5141 49%, transparent 50%) 0 0 / 100% 100% no-repeat;
    }

    .c-text-area-with-label {
      display: inline-flex;
      flex-direction: column;
      gap: 8px;
      inline-size: 100%;
    }

    .c-text-area-with-label__field-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .c-text-area__meta:has(.c-text-area__counter),
    .c-text-area-with-label__meta:has(.c-text-area-with-label__counter) {
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr auto;
    }

    .c-text-area__caption,
    .c-text-area-with-label__caption {
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #999;
    }

    /* stylelint-disable-next-line no-descending-specificity */
    .c-text-area__counter,
    .c-text-area-with-label__counter {
      margin: 0;
      text-align: right;
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #999;
      white-space: nowrap;
    }

    .c-text-area.is-error .c-text-area__caption,
    .c-text-area-with-label.is-error .c-text-area-with-label__caption {
      color: #c03323;
    }

    .c-text-area.is-error .c-text-area__counter,
    .c-text-area-with-label.is-error .c-text-area-with-label__counter {
      color: #c03323;
    }

    .c-text-area.is-disabled .c-text-area__label,
    .c-text-area.is-disabled .c-text-area__caption {
      color: #999;
    }

    .c-text-area-with-label.is-disabled .c-text-area-with-label__label,
    .c-text-area-with-label.is-disabled .c-text-area-with-label__caption {
      color: #999;
    }
  }
}

@layer components {
  @layer atoms {
    .c-typography {
      margin: 0;
      font-family: var(--font-jp);
      color: var(--color-text-primary);
    }

    .c-typography--headline-22 {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-typography--title-16 {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-typography--body-16 {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-typography--body-14 {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-typography--label-12 {
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-typography--caption-12 {
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-typography--link-14 {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      color: var(--color-link-primary);
      text-decoration: none;
      border-bottom: 1px solid currentcolor;
      padding-block: 2px;
    }

    .c-typography--link-14:hover {
      opacity: 0.7;
    }
  }
}

@layer components {
  @layer atoms {
    .c-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding-inline: 12px;
      border-radius: 999px;
      white-space: nowrap;
      text-decoration: none;
      font-family: var(--font-jp);
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-badge--category-theme {
      background-color: var(--color-support-cyan-secondary);
      color: var(--color-text-primary);
      font-weight: 500;
    }

    .c-badge--category-single {
      background-color: var(--color-support-orange-secondary);
      color: var(--color-text-primary);
      font-weight: 500;
    }

    .c-badge--option {
      background-color: var(--color-bg-surface);
      color: var(--color-text-primary);
      padding-inline: 14px;
      font-weight: 500;
    }

    .c-badge--option-muted {
      background-color: transparent;
      color: #999;
      border: 1px solid #999;
      padding-inline: 14px;
      font-weight: 500;
    }

    .c-badge--hash {
      background-color: var(--color-bg-surface);
      color: #333;
      font-weight: 400;

      &:hover {
        background-color: var(--color-text-highlight);
        color: #fff;
      }
    }
  }
}

@layer components {
  @layer atoms {
    .c-info-link {
      position: relative;
      border: 1px solid currentColor;
      border-radius: 0 20px 20px;
      background-color: #fff;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      color: #000;
      text-decoration: none;
      transition: all 0s;
    }

    button.c-info-link:hover,
    a.c-info-link:hover {
      color: var(--color-brand-primary);
    }

    .c-info-link__info-label {
      position: absolute;
      inset-block-start: -28px;
      inset-inline-start: -1px;
      min-block-size: 28px;
      border: 1px solid #000;
      border-bottom: none;
      border-radius: 20px 20px 0 0;
      background-color: var(--color-base-orange);
      color: #fff;
      font-family: var(--font-en);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.02em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 16px 0;
    }

    .c-info-link:hover .c-info-link__info-label {
      border-color: var(--color-brand-primary);
    }

    .c-info-link__info-text {
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-info-link__info-arrow {
      color: currentColor;
      flex-shrink: 0;
    }
  }
}

@layer components {
  @layer atoms {
    /* ── SNS icon links ── */
    .c-sns-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: opacity 0.2s ease;
      color: currentColor;
    }

    .c-sns-icon:hover {
      opacity: 0.7;
    }
  }
}

@layer components {
  @layer atoms {
    /* ----------------------------------------
  Quantity stepper: c-qty-stepper
---------------------------------------- */

    .c-qty-stepper {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .c-qty-stepper__btn {
      display: flex;
      inline-size: 18px;
      block-size: 18px;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      overflow: hidden;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-qty-stepper__count {
      inline-size: min(40px, 80px);
      block-size: 26px;
      background: white;
      border: 1px solid #e5e5e5;
      border-radius: 2px;
      padding: 2px 4px;
      font-size: 16px;
      font-family: var(--font-en);
      text-align: center;
      line-height: 1;
      letter-spacing: 0.04em;
      appearance: textfield;
    }

    .c-qty-stepper__count.is-error {
      border-color: var(--color-status-error-strong);
    }

    .c-qty-stepper__count::-webkit-outer-spin-button,
    .c-qty-stepper__count::-webkit-inner-spin-button {
      margin: 0;
      appearance: none;
    }
  }
}

@layer components {
  @layer atoms {
    /* stylelint-disable selector-class-pattern */
    .c-howto-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 32px 20px;
      border: 1px solid var(--color-text-primary);
      border-radius: 0 20px 20px;
      background-color: var(--color-bg-canvas);
    }

    .c-howto-card__label {
      position: absolute;
      inset-block-start: -28px;
      inset-inline-start: -1px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-block-size: 28px;
      padding: 6px 16px 5px;
      border: 1px solid var(--color-text-primary);
      border-bottom: none;
      border-radius: 20px 20px 0 0;
      background-color: #f0a15e;
      font-family: var(--font-poppins);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: #fff;
      white-space: nowrap;
    }

    .c-howto-card__heading {
      font-family: var(--font-jp);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
    }

    /* ----------------------------------------
  .c-howto-card--theme-01
---------------------------------------- */

    .c-howto-card--theme-01 {
      padding-bottom: 40px;

      @media screen and (width >= 769px) {
        padding-inline: 40px;
      }

      .c-howto-card__body {
        display: flex;
        flex-direction: column;
        gap: 40px;

        @media screen and (width >= 769px) {
          flex-direction: row;
          gap: 16px;
          justify-content: center;
        }
      }
    }

    .c-howto-card--theme-01__group {
      max-inline-size: 286px;
      margin-inline: auto;
      position: relative;
      width: 100%;

      @media screen and (width >= 769px) {
        margin: 0;
        max-inline-size: 302px;
        padding-inline: 16px;
      }
    }

    .c-howto-card--theme-01__group-title {
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
      background-color: #f7ef7a;
      border-radius: 1000px;
      border: 1px solid;
      min-height: 34px;
      padding: 2px 16px;

      span {
        display: inline-block;
        translate: 0 2px;
      }
    }

    .c-howto-card--theme-01__group-body {
      margin-top: 20px;
      font-size: 16px;
      letter-spacing: 0.02em;
      font-weight: 500;
      line-height: 1.5;

      ul {
        li {
          margin: 4px 0;
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 2px;

          svg {
            margin-block-start: 4px;
          }
        }
      }
    }

    .c-howto-card--theme-01__group-image {
      position: absolute;
      top: 18px;
      right: 0;
      z-index: 1;

      @media screen and (width >= 769px) {
        right: 8px;
      }

      &.c-howto-card--theme-01__image-02 {
        top: 20px;
        right: -20px;
      }
    }

    /* ----------------------------------------
  .c-howto-card--theme-02
---------------------------------------- */
    .c-howto-card--theme-02 {
      gap: 30px;

      @media screen and (width >= 769px) {
        padding-inline: 40px;
      }
    }

    .c-howto-card--theme-02__step-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 400px;
      margin-inline: auto;

      @media screen and (width >= 769px) {
        flex-direction: row;
        gap: 16px;
        justify-content: center;
        max-width: 100%;
      }
    }

    .c-howto-card--theme-02__step {
      display: grid;
      grid-template-columns: 1fr 120px;
      gap: 12px;

      @media screen and (width >= 769px) {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-inline-size: 143px;
        width: 100%;
      }
    }

    .c-howto-card--theme-02__step-body {
      text-align: center;
      padding-block: 6px;

      @media screen and (width >= 769px) {
        padding-block: 0;
      }
    }

    .c-howto-card--theme-02__step-badge {
      text-align: center;
      line-height: 1;

      & > span {
        background-color: #f7ef7a;
        border: 1px solid;
        min-height: 21px;
        min-width: 73px;
        padding: 1px 4px;
        border-radius: 1000px;
        font-family: var(--font-poppins);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }

    .c-howto-card--theme-02__step-title {
      margin: 8px 0;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;

      @media screen and (width >= 769px) {
        font-size: 16px;
      }
    }

    .c-howto-card--theme-02__step-text {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .c-howto-card--theme-02__step-image {
      line-height: 0;

      img {
        width: 100%;
        height: auto;
      }
    }

    /* ----------------------------------------
  .c-howto-card--theme-03
---------------------------------------- */

    .c-howto-card--theme-03 {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "title"
        "image"
        "text";
      gap: 24px;
      padding-inline: 24px;

      @media screen and (width >= 769px) {
        grid-template-columns: 1fr 280px;
        gap: 24px 30px;
        align-items: center;
        grid-template-areas:
          "title image"
          "text image";
        padding-inline: 40px;
      }
    }

    .c-howto-card--theme-03__heading {
      grid-area: title;

      @media screen and (width >= 769px) {
        margin-block-start: auto;
      }
    }

    .c-howto-card--theme-03__text {
      grid-area: text;
      line-height: 1.5;
      letter-spacing: 0.02em;
      font-size: 16px;
      font-weight: 400;

      @media screen and (width >= 769px) {
        margin-block-end: auto;
      }
    }

    .c-howto-card--theme-03__image {
      grid-area: image;
      text-align: center;
      line-height: 0;
    }

    /* ----------------------------------------
  .c-howto-card--tanpin-01
---------------------------------------- */

    .c-howto-card--tanpin-01 {
      padding-bottom: 40px;

      @media screen and (width >= 769px) {
        padding-inline: 40px;
      }

      .c-howto-card__body {
        display: flex;
        flex-direction: column;
        gap: 40px;

        @media screen and (width >= 769px) {
          flex-direction: row;
          gap: 16px;
          justify-content: center;
        }
      }
    }

    .c-howto-card--tanpin-01__group {
      max-inline-size: 286px;
      margin-inline: auto;
      position: relative;
      width: 100%;

      @media screen and (width >= 769px) {
        margin: 0;
        max-inline-size: 302px;
        padding-inline: 16px;
      }
    }

    .c-howto-card--tanpin-01__group-title {
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
      background-color: #f7ef7a;
      border-radius: 1000px;
      border: 1px solid;
      min-height: 34px;
      padding: 2px 16px;

      span {
        display: inline-block;
        translate: 0 2px;
      }
    }

    .c-howto-card--tanpin-01__group-body {
      margin-top: 20px;
      font-size: 16px;
      letter-spacing: 0.02em;
      font-weight: 500;
      line-height: 1.5;

      ul {
        li {
          margin: 4px 0;
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 2px;

          svg {
            margin-block-start: 4px;
          }
        }
      }
    }

    .c-howto-card--tanpin-01__group-image {
      position: absolute;
      top: 18px;
      right: 0;
      z-index: 1;

      @media screen and (width >= 769px) {
        right: 8px;
      }

      &.c-howto-card--tanpin-01__image-02 {
        top: 20px;
        right: -20px;
      }
    }

    /* ----------------------------------------
  .c-howto-card--tanpin-02
---------------------------------------- */
    .c-howto-card--tanpin-02 {
      gap: 30px;

      @media screen and (width >= 769px) {
        padding-inline: 40px;
      }
    }

    .c-howto-card--tanpin-02__step-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 400px;
      margin-inline: auto;

      @media screen and (width >= 769px) {
        flex-direction: row;
        gap: 16px;
        justify-content: center;
        max-width: 100%;
      }
    }

    .c-howto-card--tanpin-02__step {
      display: grid;
      grid-template-columns: 1fr 120px;
      gap: 12px;

      @media screen and (width >= 769px) {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-inline-size: 143px;
        width: 100%;
      }
    }

    .c-howto-card--tanpin-02__step-body {
      text-align: center;
      padding-block: 6px;

      @media screen and (width >= 769px) {
        padding-block: 0;
      }
    }

    .c-howto-card--tanpin-02__step-badge {
      text-align: center;
      line-height: 1;

      & > span {
        background-color: #f7ef7a;
        border: 1px solid;
        min-height: 21px;
        min-width: 73px;
        padding: 1px 4px;
        border-radius: 1000px;
        font-family: var(--font-poppins);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }

    .c-howto-card--tanpin-02__step-title {
      margin: 8px 0;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;

      @media screen and (width >= 769px) {
        font-size: 16px;
      }
    }

    .c-howto-card--tanpin-02__step-text {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
    }

    .c-howto-card--tanpin-02__step-image {
      line-height: 0;

      img {
        width: 100%;
        height: auto;
      }
    }

    /* ----------------------------------------
  .c-howto-card--tanpin-03
---------------------------------------- */
    .c-howto-card--tanpin-03 {
      gap: 30px;
      padding-inline: 16px;
      padding-bottom: 22px;

      .c-howto-card--tanpin-03__body {
        overflow-x: auto;
        margin-inline: -16px;
        padding-bottom: 10px;

        @media screen and (width >= 769px) {
          overflow-x: visible;
          margin-inline: 0;
        }
      }

      .c-howto-card-item-list {
        display: inline-flex;
        justify-content: flex-start;
        gap: 16px;
        padding-inline: 16px;
        padding-block-end: 16px;

        @media screen and (width >= 769px) {
          padding-block-end: 0;
          display: flex;
          gap: 40px;
          justify-content: center;
          flex-wrap: wrap;
        }
      }

      .c-howto-card-item {
        text-align: center;
        width: 200px;
        flex: 0 0 auto;

        @media screen and (width >= 769px) {
          max-width: 160px;
        }
      }

      .c-howto-card-item__image {
        line-height: 1;
      }

      .c-howto-card-item__image img {
        width: 100%;
        height: auto;
      }

      .c-howto-card-item__title {
        margin-block: 12px;
      }

      .c-howto-card-item__title-chip {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.02em;
        display: inline-block;
        text-align: center;
        background-color: #f7ef7a;
        border-radius: 1000px;
        border: 1px solid;
        min-height: 34px;
        padding: 2px 4px;
        min-width: 184px;

        @media screen and (width >= 769px) {
          min-width: 144px;
        }

        span {
          display: inline-block;
          translate: 0 2px;
        }
      }

      .c-howto-card-item__text {
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
      }
    }
  }
}

@layer components {
  @layer atoms {
    .c-search-scene {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
    }

    .c-search-scene__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.02em;
      text-align: center;
      color: var(--color-text-primary);
    }

    .c-search-scene__chips {
      list-style: none;
      margin: 0;
      padding: 0;
      inline-size: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 8px;
    }

    .c-search-scene__chip-item {
      margin: 0;
    }

    .c-search-scene__chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-text-primary);
      background-color: var(--color-bg-canvas);
      border-radius: 50px;
      padding: 11px 20px 13px;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      text-decoration: none;
      color: var(--color-text-primary);
      white-space: nowrap;

      &:hover {
        border-color: transparent;
        background-color: var(--color-text-highlight);
        color: #fff;
      }
    }
  }
}

@layer components {
  @layer atoms {
    .c-search-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
    }

    .c-search-item__title {
      font-family: var(--font-jp);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.02em;
      text-align: center;
    }

    .c-search-item__grid {
      inline-size: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      justify-items: center;

      @media screen and (width >= 769px) {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
      }
    }

    .c-search-item__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      inline-size: 100%;
      max-inline-size: 103px;
      text-decoration: none;
      color: var(--color-text-primary);
    }

    .c-search-item__thumb {
      display: block;
      inline-size: 100%;
      aspect-ratio: 1;
      border-radius: 100%;
      border: 1px solid var(--color-text-primary);
      object-fit: cover;
    }

    .c-search-item__label {
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0;
      text-align: center;
      inline-size: 100%;
    }

    .c-search-item__item:hover {
      color: var(--color-text-highlight);

      .c-search-item__thumb {
        border-color: var(--color-text-highlight);
      }
    }
  }
}

@layer components {
  @layer atoms {
    .c-app-banner {
      background-color: var(--color-support-cyan-primary);
      padding: 12px 0;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
    }
  }
}

@layer components {
  /* Molecules */
}

@layer components {
  @layer molecules {
    .c-graphic-title {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      text-align: center;
    }

    .c-graphic-title__subtitle {
      margin: 0;
      border-bottom: 1px solid var(--color-text-primary);
      padding: 2px 0 4px;
      font-family: var(--font-poppins);
      font-size: 18px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0;
      color: var(--color-text-primary);
    }

    .c-graphic-title__title {
      position: relative;
      margin: 0;
      font-family: var(--font-jp);
      font-size: 32px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
    }

    .c-graphic-title__visual {
      display: block;
    }

    .c-graphic-title__visual :where(svg, img) {
      display: block;
      max-inline-size: 100%;
      block-size: auto;
    }

    .c-graphic-title__visual--pc {
      display: none;

      @media screen and (width >= 769px) {
        display: block;
      }
    }

    .c-graphic-title__visual--sp {
      display: block;

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .c-graphic-title__sr-only {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-heading {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .c-section-heading > :is(h1, h2, h3, h4, p) {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-section-heading__sub {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }
  }
}

@layer components {
  @layer molecules {
    /* パンくずリスト(Breadcrumbs.astro)。SP では非表示。 */

    .c-breadcrumbs {
      display: none;
    }

    @media screen and (width >= 769px) {
      .c-breadcrumbs {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 32px 65px 0;
        font-family: var(--font-jp);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--color-text-primary);
      }

      .c-breadcrumbs a {
        color: inherit;
        text-decoration: none;

        &:hover {
          color: var(--color-button-hover);
          opacity: 1;
        }
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-page-navigation
  // ページ上部の Back / Skip ナビゲーション
---------------------------------------- */

    .c-page-navigation {
      padding-block: 16px;

      .c-button.is-text {
        border: none;
      }
    }

    .c-page-navigation__inner {
      display: flex;
      justify-content: space-between;
    }
  }
}

@layer components {
  @layer molecules {
    .c-product-option {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .c-product-option.is-disabled {
      cursor: default;
    }

    .c-product-option__label {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-inline-end: 8px;
      cursor: pointer;
      flex: 1 1 auto;
    }

    .c-product-option.is-disabled .c-product-option__label {
      cursor: default;
    }

    .c-product-option__thumb {
      position: relative;
      flex: none;
      inline-size: 80px;
      block-size: 80px;
      border-radius: 8px;
      overflow: hidden;
    }

    .c-product-option__thumb img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    .c-product-option__thumb.is-disabled::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 8px;
      background: rgb(0 0 0 / 30%);
    }

    .c-product-option__meta {
      flex: 1 1 auto;
      min-inline-size: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
    }

    .c-product-option__title {
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
    }

    .c-product-option__title.is-disabled {
      color: var(--color-text-tertiary);
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }

    .c-product-option__status {
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-product-option__status.is-neutral {
      color: var(--color-text-tertiary);
    }

    .c-product-option__status.is-error {
      color: var(--color-status-error-primary);
    }

    .c-product-option__status.is-link {
      color: var(--color-link-primary);
    }

    .c-product-option__radio {
      flex: none;
      margin-inline-start: auto;
      display: flex;
      align-items: center;
    }

    /* PC版ボタン */
    .c-product-option__button {
      display: none;
    }

    @media screen and (width >= 769px) {
      .c-product-option {
        gap: 16px;
        padding-inline-end: 8px;
      }

      .c-product-option__label {
        padding-inline-end: 0;
      }

      .c-product-option__radio {
        display: none;
      }

      .c-product-option__button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        gap: 8px;
        padding-inline: 40px;
        padding-block: 16px;
        inline-size: auto;
        height: 48px;
        background-color: var(--color-text-primary);
        border: 1px solid var(--color-text-primary);
        border-radius: 1000px;
        color: var(--color-bg-canvas);
        font-family: var(--font-jp);
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.02em;
        cursor: pointer;

        /* transition: background-color 0.2s ease; */
        white-space: nowrap;
      }

      .c-product-option__button:not(:disabled):hover {
        border: 1px solid var(--color-text-primary);
        background-color: var(--color-text-highlight);
      }

      .c-product-option__button:disabled,
      .c-product-option__button[aria-disabled="true"] {
        opacity: 0.5;
        cursor: default;
        pointer-events: none;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-product-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    /* ── Media area ─────────────────────────── */

    .c-product-card__media {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .c-product-card__main-image {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      width: 100%;
    }

    .c-product-card__main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Sub-images (theme only) */

    .c-product-card__sub-images {
      display: flex;
      gap: 4px;
    }

    .c-product-card__sub-image {
      flex: 1;
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }

    .c-product-card__sub-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Title ──────────────────────────────── */

    .c-product-card__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .c-product-card:hover {
      .c-product-card__tag,
      .c-product-card__title,
      .c-product-card__price,
      .c-product-card__meta .c-badge {
        color: var(--color-text-highlight);
      }
    }

    /* ── Meta row (badge + price) ───────────── */

    .c-product-card__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .c-product-card__price {
      font-family: var(--font-en);
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text-primary);
      white-space: nowrap;
    }

    /* ── Tags ───────────────────────────────── */

    .c-product-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .c-product-card__tag {
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
      color: #808080;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@layer components {
  @layer molecules {
    /* カードを flex(column) にすると、swiper/css の .swiper-wrapper { height: 100% } と
   flex アイテムの高さ計算が干渉して dots が .swiper の overflow: hidden に
   クリップされるため、通常フロー + マージンで組む */
    .c-product-card-02 {
      text-decoration: none;
      position: relative;
    }

    /* カード全体のリンク。お気に入りボタン（__favorite）はこのリンクの外の兄弟要素 */
    .c-product-card-02__link {
      display: block;
      color: inherit;
      text-decoration: none;
    }

    .c-product-card-02__body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 12px;
    }

    .c-product-card-02__favorite {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
    }

    /* ── Media area ─────────────────────────────
  マークアップは Swiper 互換のフラット構造（メイン + サブが swiper-slide の並び）。
  Swiper 非初期化時（.swiper-initialized なし）は CSS Grid で
  「メイン大 + 右にサブ縦3枚」のレイアウトを再現する。
  Swiper 初期化時は swiper/css と Swiper のインラインスタイルに任せる。
─────────────────────────────────────────── */

    .c-product-card-02__media {
      max-width: 100%;
    }

    .c-product-card-02__media:not(.swiper-initialized) {
      .c-product-card-02__images {
        display: grid;
        grid-template-columns: 74.683% 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 4px 6px;
        height: auto;

        @media screen and (width >= 769px) {
          gap: 4px;
        }
      }

      .c-product-card-02__image.is-main {
        grid-row: 1 / -1;
        aspect-ratio: 1 / 1;
        height: auto;
      }
    }

    .c-product-card-02__image {
      overflow: hidden;
      position: relative;
    }

    .c-product-card-02__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;

      /* リンク内画像のネイティブドラッグがスワイプと干渉しないようにする */
      -webkit-user-drag: none;
      user-select: none;
    }

    /* dots（スライダー時のみ表示。スタイルは .is-2-columns ブロック側で定義） */
    .c-product-card-02__pagination {
      display: none;
    }

    /* ── Title ──────────────────────────────── */

    .c-product-card-02__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* ── Meta row (badge + price) ───────────── */

    .c-product-card-02__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .c-product-card-02__price {
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 700;
      color: var(--color-text-primary);
      white-space: nowrap;
    }

    /* ── Tags ───────────────────────────────── */

    .c-product-card-02__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .c-product-card-02__tag {
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
      color: #808080;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── Hover ──────────────────────────────── */

    .c-product-card-02:hover {
      .c-product-card-02__tag,
      .c-product-card-02__title,
      .c-product-card-02__price,
      .c-product-card-02__meta .c-badge {
        color: var(--color-text-highlight);
      }
    }

    /* ----------------------------------------
  .is-out-of-stock
  在庫切れのときに .is-out-of-stock がつく。
  - 暗幕はメイン・サブすべての画像に ::after で敷く
    （スライダー時は各スライドに乗るので、スワイプしても暗いまま）
  - 「入荷待ち」テキストはスライドの中ではなく media 直下に置き、
    メイン画像の位置に固定表示する（スワイプしても動かない）
---------------------------------------- */
    .c-product-card-02.is-out-of-stock {
      .c-product-card-02__image::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgb(0 0 0 / 30%);
      }

      .c-product-card-02__out-of-stock-label {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;

        /* スワイプ操作を妨げない */
        pointer-events: none;

        @media screen and (width >= 769px) {
          /* カード内のメイン画像の上に表示する必要がある。 */
          width: 74.683%;
        }
      }
    }

    /* ----------------------------------------
  SP × 2カラム表示（.c-product-grid.is-2-columns 配下）
  画像エリアは Swiper のスライダーになり、画像下に dots が出る。
  Swiper の init / destroy は js（productGrid.ts）が行うので、
  ここでは 2カラム時の見た目だけを定義する。
  PC は 2カラム表示でも通常レイアウトのまま。
---------------------------------------- */

    @media screen and (1px <= width <= 768px) {
      .c-product-grid.is-2-columns .c-product-card-02 {
        .c-product-card-02__body {
          margin-top: 8px;
        }

        /* Figma の2カラムデザインにはお気に入りボタンが描かれていないが、仕様上は表示する。
       非表示にする場合は以下を有効化する。 */

        /* .c-product-card-02__favorite {
      display: none;
    } */

        .c-product-card-02__pagination {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          margin-top: 12px;
          mix-blend-mode: multiply;
        }

        /* スライドが1枚以下のとき Swiper (watchOverflow) が付与する */
        .c-product-card-02__pagination.swiper-pagination-lock {
          display: none;
        }

        .c-product-card-02__pagination .swiper-pagination-bullet {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: rgb(128 128 128 / 50%);
        }

        .c-product-card-02__pagination .swiper-pagination-bullet-active {
          background-color: #000;
        }

        .c-product-card-02__title {
          font-size: 14px;
        }

        .c-product-card-02__price {
          font-size: 16px;
        }

        /* スライダー時、「入荷待ち」テキストはスライダー全面（正方形の画像領域）に重ねる。
       dots 領域（画像の下）には掛からないよう aspect-ratio で高さを画像に合わせる */
        &.is-out-of-stock .c-product-card-02__out-of-stock-label {
          width: 100%;
          height: auto;
          aspect-ratio: 1 / 1;
        }
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* 商品リンクカード（.c-product-link-card）
   CMS 本文（.c-cms）内に差し込む商品詳細へのリンク。 */
    .c-product-link-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 500px;
      padding: 16px;
      background-color: var(--color-bg-surface);
      color: var(--color-text-primary);
      text-decoration: none;
    }

    .c-product-link-card:hover {
      .c-product-link-card__title,
      .c-product-link-card__price,
      .c-product-link-card__meta .c-badge {
        color: var(--color-text-highlight);
      }
    }

    /* ── Media area（メイン 1/1 + サブ3枚、全体 350/260.5） ── */

    .c-product-link-card__media {
      display: flex;
      gap: 6px;
      width: 100%;
      aspect-ratio: 350 / 260.5;
    }

    .c-product-link-card__main-image {
      aspect-ratio: 1 / 1;
      block-size: 100%;
      overflow: hidden;
    }

    .c-product-link-card__main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .c-product-link-card__sub-images {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .c-product-link-card__sub-image {
      flex: 1 1 0;
      overflow: hidden;
    }

    .c-product-link-card__sub-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Title ── */

    .c-product-link-card__title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    /* ── Meta row (badge + price) ── */

    .c-product-link-card__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .c-product-link-card__price {
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 700;
      white-space: nowrap;
    }
  }
}

@layer components {
  @layer molecules {
    .c-marquee {
      background-color: var(--color-brand-primary);
      color: var(--color-bg-canvas);
      overflow: hidden;
      display: flex;
      align-items: center;
      padding-block: 8px;
    }

    .c-marquee__track {
      display: flex;
      width: max-content;
      flex-shrink: 0;
      animation: c-marquee-scroll var(--marquee-duration, 24s) linear infinite;
    }

    .c-marquee__group {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
      padding-inline: 10px;
    }

    .c-marquee__item {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      white-space: nowrap;
      font-family: var(--font-jp), var(--font-en);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
    }

    .c-marquee__icon {
      display: inline-flex;
      color: inherit;
    }

    @keyframes c-marquee-scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .c-marquee__track {
        animation: none;
        transform: translateX(0);
      }
    }

    .c-marquee--bold {
      padding-block: 12px;
      min-height: 50px;
    }

    .c-marquee--news {
      padding-block: 12px;

      .c-marquee__group {
        gap: 3em;
        padding-inline: 1.5em;
      }

      .c-marquee__item {
        font-weight: 500;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-card-slider {
      display: flex;
      gap: var(--c-card-slider-gap, 16px);
      overflow-x: auto;
      scrollbar-width: none;
      padding-inline: 24px;
      padding-block-end: 4px;

      @media screen and (width >= 769px) {
        overflow-x: visible;
        padding-inline: 0;
      }
    }

    .c-card-slider::-webkit-scrollbar {
      display: none;
    }

    .c-card-slider__more-sp {
      flex: 0 0 120px;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-decoration: none;
      color: var(--color-text-primary);
      scroll-snap-align: start;

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .c-card-slider__more-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 48px;
      block-size: 48px;
      border: 1px solid var(--color-text-primary);
      border-radius: 100px;
    }

    .c-card-slider__more-text {
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
    }

    .c-card-slider__more-pc:hover {
      .c-card-slider__more-text,
      .c-card-slider__more-circle {
        color: var(--color-text-highlight);
        border-color: var(--color-text-highlight);
      }
    }

    .c-section-editors-picks__more-pc-wrapper {
      display: none;

      @media screen and (width >= 769px) {
        display: flex;
        justify-content: flex-end;
        margin-top: 30px;
      }
    }

    .c-card-slider__more-pc {
      display: none;

      @media screen and (width >= 769px) {
        display: flex;
        align-self: flex-end;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--color-text-primary);
      }

      .c-card-slider__more-circle {
        inline-size: 26px;
        block-size: 26px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-feature-card {
      --c-feature-card-corner-size: 48px;
      --c-feature-card-corner-bg: #fff;
      --c-feature-card-corner-stroke: #000;

      display: flex;
      flex-direction: column;
      gap: 4px;
      text-decoration: none;
      color: var(--color-text-primary);
    }

    .c-feature-card__thumb-wrap {
      position: relative;
      padding: 8px;
    }

    .c-feature-card__corner {
      position: absolute;
      z-index: 1;
      inline-size: var(--c-feature-card-corner-size);
      block-size: var(--c-feature-card-corner-size);
      pointer-events: none;
    }

    .c-feature-card__corner--top-left {
      inset-block-start: 0;
      inset-inline-start: 0;
    }

    .c-feature-card__corner--bottom-right {
      inset-block-end: 0;
      inset-inline-end: 0;
      transform: rotate(180deg);
    }

    .c-feature-card__corner-svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
    }

    .c-feature-card__corner-fill {
      fill: var(--c-feature-card-corner-bg);
    }

    .c-feature-card__corner-line {
      stroke: var(--c-feature-card-corner-stroke);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .c-feature-card__thumb {
      display: block;
      width: 100%;
      aspect-ratio: 234 / 292.5;
      object-fit: cover;
      border-radius: 20px;
    }

    .c-feature-card__body {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-inline: 8px;
    }

    .c-feature-card__label {
      display: inline-flex;
      max-width: fit-content;
      align-items: center;
      border-bottom: 1px solid var(--color-brand-primary);
      font-family: var(--font-poppins);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: var(--color-brand-primary);
      text-transform: uppercase;
      white-space: nowrap;
    }

    .c-feature-card__title {
      font-family: var(--font-jp);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-feature-card:hover {
      color: var(--color-brand-primary);
    }
  }
}

@layer components {
  @layer molecules {
    .c-modal {
      --modal-panel-width: 350px;
      --modal-panel-max-height: min(calc(100dvh - 32px), 544px);

      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
      transition:
        opacity 0.24s ease,
        visibility 0.24s ease;
    }

    body.is-modal-open {
      overflow: hidden;
    }

    .c-modal.is-open {
      visibility: visible;
      pointer-events: auto;
      opacity: 1;
    }

    .c-modal__overlay {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      background: rgb(0 0 0 / 50%);
    }

    .c-modal__panel {
      position: relative;
      z-index: 1;
      inline-size: min(100%, var(--modal-panel-width));
      max-block-size: var(--modal-panel-max-height);
      overflow: visible;
      transform: translateY(10px);
      transition: transform 0.24s ease;
    }

    .c-modal__inner {
      max-block-size: var(--modal-panel-max-height);
      overflow: hidden;
      border-radius: 16px;
    }

    .c-modal__panel-header {
      block-size: 68px;
      padding-inline: 16px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: var(--color-bg-surface);
    }

    .c-modal__close {
      inline-size: 24px;
      block-size: 24px;
      border: 0;
      padding: 0;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--color-text-primary);

      &:hover {
        color: var(--color-brand-primary);
      }
    }

    .c-modal__close--absolute {
      position: absolute;
      inset-block-start: -28px;
      inset-inline-end: 0;
      z-index: 2;
      color: #fff;
    }

    .c-modal__close--absolute:hover {
      color: var(--color-brand-primary);
    }

    .c-modal.is-open .c-modal__panel {
      transform: translateY(0);
    }

    @media screen and (width >= 769px) {
      .c-modal {
        padding: 32px 24px;
      }

      .c-modal__panel {
        max-block-size: 100%;
      }

      .c-modal__inner {
        max-block-size: 100%;
      }

      .c-modal__close--absolute {
        inset-block-start: -32px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-magazine-card {
      --c-magazine-card-corner-size: 48px;
      --c-magazine-card-corner-bg: #fff;
      --c-magazine-card-corner-stroke: #000;

      display: flex;
      flex-direction: column;
      gap: 12px;
      text-decoration: none;
      color: var(--color-text-primary);

      &:hover {
        color: var(--color-text-highlight);

        .c-magazine-card__meta {
          color: var(--color-text-highlight);
        }
      }
    }

    .c-magazine-card__thumb-wrap {
      position: relative;
      padding: 8px;
    }

    .c-magazine-card__thumb {
      display: block;
      inline-size: 100%;
      aspect-ratio: 900 / 520;
      object-fit: cover;
      border-radius: 20px;
    }

    .c-magazine-card__corner {
      position: absolute;
      z-index: 1;
      inline-size: var(--c-magazine-card-corner-size);
      block-size: var(--c-magazine-card-corner-size);
      pointer-events: none;
    }

    .c-magazine-card__corner--top-left {
      inset-block-start: 0;
      inset-inline-start: 0;
    }

    .c-magazine-card__corner--bottom-right {
      inset-block-end: 0;
      inset-inline-end: 0;
      transform: rotate(180deg);
    }

    .c-magazine-card__corner-svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
    }

    .c-magazine-card__corner-fill {
      fill: var(--c-magazine-card-corner-bg);
    }

    .c-magazine-card__corner-line {
      stroke: var(--c-magazine-card-corner-stroke);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .c-magazine-card__body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-inline: 12px 8px;
    }

    .c-magazine-card__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .c-magazine-card__meta {
      display: flex;
      justify-content: space-between;
      /* flex-wrap: wrap; */
      align-items: center;
      gap: 8px;
      color: #808080;
      font-family: var(--font-poppins);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
    }

    /* カテゴリは基本1つだが、複数の可能性がある（配列で渡す） */
    .c-magazine-card__categories {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .c-magazine-card__category,
    .c-magazine-card__date {
      /* white-space: nowrap; */
    }

    @media screen and (width >= 769px) {
      .c-magazine-card__meta {
        color: #999;
        font-size: 16px;
      }

      .c-magazine-card__body {
        padding-inline: 0;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-gallery-image {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
    }

    .c-gallery-image__stage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }

    .c-gallery-image__stage .swiper-wrapper,
    .c-gallery-image__slide {
      width: 100%;
      height: 100%;
      line-height: 0;
    }

    .c-gallery-image__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* SP: prev/nextボタン非表示 */
    .c-gallery-image__arrow {
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      color: currentcolor;
      z-index: 10;
      transition: opacity var(--transition-duration);
    }

    .c-gallery-image__arrow:hover {
      opacity: 1;
      color: var(--color-text-highlight);
    }

    .c-gallery-image__arrow.is-prev {
      left: 10px;
    }

    .c-gallery-image__arrow.is-next {
      right: 10px;
    }

    /* PC: prev/nextボタン表示 */
    @media screen and (width >= 769px) {
      .c-gallery-image__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
      }
    }

    /* サムネイル領域 */
    .c-gallery-image__thumbs {
      --thumbnail-size: 66px;
      --scroll-bar-height: 6px;

      display: flex;
      gap: 4px;
      padding-left: 4px;
      padding-right: 0;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      list-style: none;
      margin: 0;
      line-height: 1;

      @media screen and (width >= 769px) {
        height: calc(var(--thumbnail-size) + var(--scroll-bar-height));
      }
    }

    .c-gallery-image__thumbs::-webkit-scrollbar {
      display: none;
    }

    .c-gallery-image__thumb {
      flex-shrink: 0;
      position: relative;
      width: 48px;
      height: 48px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: opacity var(--transition-duration);
      overflow: hidden;
    }

    .c-gallery-image__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* サムネイルはオーバーレイで選択状態を表示 */
    .c-gallery-image__thumb::before {
      content: "";
      position: absolute;
      inset: 0;
      background: transparent;
      transition: background var(--transition-duration);
      pointer-events: none;
    }

    .c-gallery-image__thumb.is-current::before {
      background: rgb(0 0 0 / 20%);
    }

    .c-gallery-image__thumb:hover {
      opacity: 0.7;
    }

    /* .c-gallery-image__thumb:hover::before {
  background: rgb(0 0 0 / 10%);
} */

    /* SP: テーマ詳細などでサムネイルをドットナビへ切り替える */
    @media screen and (1px <= width <= 768px) {
      .c-gallery-image--mobile-dot .c-gallery-image__thumbs {
        justify-content: center;
        gap: 8px;
        padding: 8px 0 0;
        overflow-x: visible;
        position: absolute;
        bottom: 16px;
        inset-inline: 0;
        z-index: 50;
      }

      .c-gallery-image--mobile-dot .c-gallery-image__thumb {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgb(0 0 0 / 15%);
        overflow: visible;
      }

      .c-gallery-image--mobile-dot .c-gallery-image__thumb img {
        display: none;
      }

      .c-gallery-image--mobile-dot .c-gallery-image__thumb::before {
        display: none;
      }

      .c-gallery-image--mobile-dot .c-gallery-image__thumb.is-current {
        background: #000;
      }
    }

    /* PC: サムネイルサイズ 60px */
    @media screen and (width >= 769px) {
      .c-gallery-image__thumbs {
        padding-left: 0;
        overflow-x: scroll !important;
      }

      .c-gallery-image__thumbs:hover {
        scrollbar-width: thin;
      }

      .c-gallery-image__thumbs:hover::-webkit-scrollbar {
        display: block;
        height: 6px;
      }

      .c-gallery-image__thumb {
        width: 60px;
        height: 60px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-read-more {
      position: relative;
    }

    .c-read-more__body {
      display: flex;
      flex-direction: column;
    }

    .c-read-more__fade {
      display: none;
    }

    .c-read-more__button {
      display: none;
      align-items: center;
      justify-content: space-between;
      inline-size: 230px;
      min-block-size: 48px;
      padding: 0 40px 0 50px;
      border: 1px solid var(--color-text-primary);
      border-radius: 1000px;
      background-color: var(--color-bg-surface);
      color: var(--color-text-primary);
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-read-more__button-text {
      text-align: center;
      flex: 1;
    }

    .c-read-more__button-icon {
      display: flex;
      transition: transform var(--transition-duration);
    }

    @media screen and (1px <= width <= 768px) {
      .c-read-more {
        padding-block-end: 72px;
      }

      .c-read-more:not(.is-expanded) .c-read-more__body {
        max-block-size: 320px;
        overflow: hidden;
      }

      .c-read-more:not(.is-expanded) .c-read-more__fade {
        display: block;
        position: absolute;
        inset-inline: 0;
        inset-block-end: 56px;
        block-size: 96px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
        pointer-events: none;
      }

      .c-read-more:not(.is-expanded) .c-read-more__button {
        position: absolute;
        inset-inline: 50%;
        inset-block-end: 20px;
        transform: translateX(-50%);
        display: flex;
        z-index: 1;
      }

      .c-read-more.is-expanded .c-read-more__button {
        display: flex;
        margin: 20px auto 0;
      }

      .c-read-more:not(.is-expanded) .c-read-more__button:hover {
        opacity: 0.85;
      }

      .c-read-more.is-expanded .c-read-more__button {
        opacity: 1;
      }

      .c-read-more.is-expanded .c-read-more__button-icon {
        transform: rotate(180deg);
      }
    }

    @media screen and (width >= 769px) {
      .c-read-more {
        padding-block-end: 0;
      }

      .c-read-more__fade,
      .c-read-more__button {
        display: none !important;
      }

      .c-read-more__body {
        max-block-size: none;
        overflow: visible;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-accordion {
      border-bottom: 1px solid var(--color-text-primary);
    }

    .c-accordion__summary {
      min-block-size: 56px;
      padding: 16px 4px 16px 0;
      display: flex;
      align-items: center;
      gap: 24px;
      cursor: pointer;
      user-select: none;
    }

    .c-accordion__title {
      flex: 1 1 auto;
      min-inline-size: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-accordion__icon {
      inline-size: 18px;
      block-size: 18px;
      flex: none;
      position: relative;
      display: grid;
      place-items: center;
    }

    .c-accordion__icon-plus {
      color: var(--color-text-primary);
    }

    .c-accordion__icon-minus {
      color: var(--color-text-primary);
      display: none;
    }

    /*
  開閉によるアイコンの変化。
  jsを使うときは details.open の状態変化のタイミングが違うので、
  data-accordion-closing 属性でも制御する。
*/
    .c-accordion[open] .c-accordion__icon-plus {
      display: none;
    }

    .c-accordion[open] .c-accordion__icon-minus {
      display: block;
    }

    .c-accordion[data-accordion-closing="true"] .c-accordion__icon-plus {
      display: block;
    }

    .c-accordion[data-accordion-closing="true"] .c-accordion__icon-minus {
      display: none;
    }

    .c-accordion__body {
      padding: 0 4px 24px 0;
    }

    .c-accordion__body > p {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    .c-accordion__body > ul {
      margin: 0;
      padding-inline-start: 21px;
      list-style: disc;
    }

    .c-accordion__body > ol {
      margin: 0;
      padding-inline-start: 21px;
      list-style: decimal;
    }

    .c-accordion__body > li {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    .c-accordion__body strong {
      font-weight: 700;
    }

    .c-accordion__body em {
      font-weight: 700;
      color: var(--color-text-highlight);
    }
  }
}

@layer components {
  @layer molecules {
    .c-product-summary {
      display: grid;
      gap: 12px;
      grid-template-columns: 92px 1fr;
    }

    .c-product-summary__image {
      padding-top: 2px;
      line-height: 1;
    }

    .c-product-summary__image img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

    .c-product-summary__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .c-product-summary__sku {
      font-size: 14px;
      color: #808080;
      font-weight: 400;
      margin: 0 0 4px;
      letter-spacing: 0.28px;
      line-height: 1.5;
    }

    .c-product-summary__title {
      margin: 0 0 4px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      align-self: stretch;
      letter-spacing: 0.02em;

      /* 二行 */

      /* height: calc(16px * 1.5 * 2); */

      height: auto;
      overflow: hidden;
    }

    .c-product-summary__variation {
      font-size: 14px;
      line-height: 1.5;
      margin: 0;
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-slide-panel
  <details>/<summary> ベースのスライドトグル。
  現在はネイティブの details 動作のみ。
  将来の JS アニメーション追加のために
  data-slide-panel-closing 属性フックを用意してある。
---------------------------------------- */

    .c-slide-panel {
      background: var(--color-bg-surface);
      border-radius: 16px;
      inline-size: 100%;
    }

    /* ヘッダー（summary 要素） */
    .c-slide-panel__header {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px;
      min-block-size: 50px;
      cursor: pointer;
      user-select: none;

      &::-webkit-details-marker {
        display: none;
      }

      /* &:hover {
    .c-slide-panel__caret {
      color: var(--color-text-highlight);
    }
  } */
    }

    /* ギフトチケット・メッセージカード用：白い上ボーダー */
    .c-slide-panel__header--border {
      min-block-size: 80px;
      border-top: 2px solid white;
    }

    /* ヘッダー内テキスト領域 */
    .c-slide-panel__header-body {
      flex: 1 0 0;
      min-inline-size: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* タイトル行（タイトル + チェックアイコン） */
    .c-slide-panel__title-row {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    /* デフォルト：14px medium（このテーマで選べる商品） */
    .c-slide-panel__title {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1;
      color: black;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* subtitle が存在するとき → 16px bold（ギフトチケット・メッセージ） */
    .c-slide-panel:has(.c-slide-panel__subtitle) .c-slide-panel__title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    /* 完了チェックアイコン */
    .c-slide-panel__check {
      color: var(--color-text-highlight);
      flex-shrink: 0;
    }

    /* サブタイトル（価格表示）：Futura Heavy */
    .c-slide-panel__subtitle {
      font-family: var(--font-en);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      color: black;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* キャレットアイコン */
    .c-slide-panel__caret {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }

    .c-slide-panel[open] > .c-slide-panel__header > .c-slide-panel__caret {
      transform: rotate(180deg);
    }

    /* JS アニメーション用：閉じ中はキャレットを戻す */
    .c-slide-panel[data-slide-panel-closing="true"] > .c-slide-panel__header > .c-slide-panel__caret {
      transform: rotate(0deg);
    }

    /* ボディ（スロットコンテンツ） */
    .c-slide-panel__body {
      /*
   * 将来のアニメーション実装用フック：
   * JS で data-slide-panel-closing 属性を付与し、
   * grid-template-rows トリックでスライドアニメーションを追加できる。
   *
   * display: grid;
   * grid-template-rows: 0fr;
   * transition: grid-template-rows 0.3s ease;
   *
   * .c-slide-panel[open] > & { grid-template-rows: 1fr; }
   */

      padding: 0 0 6px;
    }

    /* ----------------------------------------
  c-slide-panel-item-card
  スライドパネル内の横スクロールカード
  （テーマ内商品・ギフトチケット・メッセージデザイン共通）
---------------------------------------- */

    /* 横スクロールの矢印ナビ（JS で .c-slide-panel-scroll を包む） */
    .c-slide-panel-scroll-nav {
      position: relative;
    }

    .c-slide-panel-scroll-nav__btn {
      /* SP では非表示。PC かつスクロール発生時のみ表示 */
      display: none;
      position: absolute;
      inset-block-start: 50%;
      transform: translateY(-50%);
      z-index: 1;
      inline-size: 48px;
      block-size: 48px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: rgb(0 0 0 / 70%);
      color: white;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: opacity 0.2s ease;
    }

    .c-slide-panel-scroll-nav__btn--prev {
      inset-inline-start: 8px;
    }

    .c-slide-panel-scroll-nav__btn--next {
      inset-inline-end: 8px;
    }

    .c-slide-panel-scroll-nav__btn:disabled {
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (width >= 769px) {
      .c-slide-panel-scroll-nav.is-scrollable .c-slide-panel-scroll-nav__btn {
        display: flex;
      }
    }

    .c-slide-panel-scroll {
      overflow-x: auto;
      overflow-y: clip;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    .c-slide-panel-scroll:hover {
      scrollbar-width: thin;
      scrollbar-color: #888 transparent;
    }

    .c-slide-panel-scroll:hover::-webkit-scrollbar {
      display: block;
      height: 6px;
    }

    /* @media (hover: hover) and (pointer: fine) {
  .c-slide-panel-scroll {
    cursor: grab;
  }

  .c-slide-panel-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .c-slide-panel-scroll.is-dragging * {
    user-select: none;
  }
} */

    .c-slide-panel-scroll__list {
      display: inline-flex;
      gap: 12px;
      align-items: flex-start;
      padding-inline: 20px;
      padding-bottom: 10px;
    }

    /* 各カード */
    .c-slide-panel-item-card {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      inline-size: 120px;
      background: white;
      padding: 8px;
      cursor: pointer;
      border: 2px solid white;
    }

    .c-slide-panel-item-card:has(input:checked) {
      border: 2px solid var(--color-brand-primary);
    }

    .c-slide-panel-item-card__image {
      aspect-ratio: 1;
      inline-size: 100%;
      overflow: hidden;
      position: relative;

      img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }
    }

    .c-slide-panel-item-card__title {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: 0.02em;
      color: #333;

      /* 2行 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ギフトチケット・メッセージ内のカードタイトル（少し大きい） */
    .c-slide-panel-item-card--ticket .c-slide-panel-item-card__title {
      font-size: 14px;
      line-height: 1.5;
    }

    .c-slide-panel-item-card__price {
      font-family: var(--font-en);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      color: black;
    }

    .c-slide-panel-item-card__meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .c-slide-panel-item-card__meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* 「あなたが追加」バッジ */
    .c-slide-panel-item-card__added-badge {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      background: var(--color-brand-primary);

      span {
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.02em;
        color: white;
        white-space: nowrap;
      }
    }

    .c-slide-panel-item-card--simple {
      padding: 0;
      border: none;
      background: none;
      inline-size: 104px;
      gap: 12px;
    }

    /* ----------------------------------------
  c-slide-panel-section
  メッセージパネル内の各セクション
---------------------------------------- */

    /* セクション見出し（1. デザインを選ぶ 等） */
    .c-slide-panel-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
    }

    .c-slide-panel-section__heading {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
      list-style-position: inside;
      list-style-type: decimal;
    }

    /* 「利用しない」ラジオ行 */
    .c-slide-panel-section__radio-row {
      display: flex;
      gap: 8px;
      align-items: center;
      padding-block: 8px;
      cursor: pointer;
      border-radius: 8px;
      inline-size: 100%;
      background: none;
      border: none;
      text-align: left;
    }

    .c-slide-panel-section__radio-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .c-slide-panel-section__radio-label {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1;
      color: black;
    }

    .c-slide-panel-section__radio-note {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1;
      color: #c03323;
    }

    .c-slide-panel-section .c-slide-panel-scroll {
      line-height: 1;
      font-size: 0;
      margin-right: -16px;
    }

    .c-slide-panel-section .c-slide-panel-scroll__list {
      padding-inline-start: 0;
      line-height: 1;
    }

    /* メッセージ入力カード（受取人ごと） */
    .c-slide-panel-message-card {
      background: white;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px 16px 20px;
    }

    .c-slide-panel-message-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .c-slide-panel-message-card__preview-btn {
      display: flex;
      gap: 2px;
      align-items: center;
      justify-content: center;
      padding-block: 4px;
      background: none;
      border: none;
      border-bottom: 1px solid #333;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1;
      color: #333;

      &:hover {
        color: var(--color-text-highlight);
        border-color: var(--color-text-highlight);
      }
    }

    .c-slide-panel-message-card__badge {
      background: #f7ef7a;
    }

    .c-slide-panel-message-card__form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .c-slide-panel-message-card__for-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .c-slide-panel-message-card__for-label {
      flex-shrink: 0;
      font-size: 16px;
      font-weight: 400;
      color: black;
    }

    .c-slide-panel-message-card__textarea-note {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #999;
    }

    .c-slide-panel-message-card__for-input input {
      /* scale: 0.875; */
      /* transform-origin: left; */
    }

    /* ----------------------------------------
  PC時、テキストインプットを14pxのフォントサイズにする
---------------------------------------- */
    @media screen and (width >= 769px) {
      .c-slide-panel-message-card__form .c-text-input__input {
        font-size: 14px;
      }

      .c-slide-panel-message-card__form .c-text-area__input {
        font-size: 14px;
      }
    }

    /* ----------------------------------------
  SP時、テキストインプットを14px相当のフォントサイズにする
---------------------------------------- */
    @media screen and (1px <= width <= 768px) {
      .c-slide-panel-message-card__form .c-text-input__input {
        min-width: 114%;
        scale: 0.875;
        transform-origin: left;
      }

      .c-slide-panel-message-card__form .c-text-area {
        padding: 0 12px;
        display: flex;
        flex-direction: column;
      }

      .c-slide-panel-message-card__form .c-text-area__input {
        min-width: 114%;
        padding: 0 5px 0 3px;
        scale: 0.875;
        transform-origin: left;
        flex: 1;
      }
    }

    /* ----------------------------------------
  ticket/pouch 共通プレビューボタン
---------------------------------------- */

    .c-slide-panel-ticket-preview {
      inline-size: 24px;
      block-size: 24px;
      padding: 0;
      border: none;
      background: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: black;
    }

    .c-slide-panel-ticket-preview--overlay {
      position: absolute;
      inset-inline-end: 4px;
      inset-block-end: 4px;
    }

    /* ----------------------------------------
  巾着ラッピング
---------------------------------------- */

    .c-slide-panel-section--pouch {
      padding-block-start: 8px;
    }

    .c-slide-panel-section__radio-row--plain {
      /* padding-block: 16px; */
    }

    .c-slide-panel-section__radio-label--md {
      font-size: 16px;
      letter-spacing: 0.02em;
    }

    /* ----------------------------------------
  手さげ袋
---------------------------------------- */

    .c-slide-panel-section--paper-bag {
      padding-block-start: 8px;
    }

    .c-slide-panel-paper-bag-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-end;
      inline-size: 100%;
    }

    .c-slide-panel-paper-bag-row__image-wrap {
      position: relative;
      inline-size: 100px;
      block-size: 100px;
      overflow: hidden;
      flex-shrink: 0;

      img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }
    }

    .c-slide-panel-paper-bag-row__body {
      flex: 1 0 0;
      min-inline-size: 0;
      min-block-size: 100px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
    }

    .c-slide-panel-paper-bag-row__title {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #333;
    }

    .c-slide-panel-paper-bag-row__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .c-slide-panel-paper-bag-row__price {
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: black;
    }

    .c-slide-panel-section--paper-bag .c-qty-stepper__btn {
      inline-size: 24px;
      block-size: 24px;
    }

    .c-slide-panel-section--paper-bag .c-qty-stepper__count {
      inline-size: 40px;
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  Cart image preview modal
---------------------------------------- */

    .c-cart-image-preview-modal-root .c-modal__inner {
      border-radius: 16px;
      background: white;
    }

    .c-cart-image-preview-modal-root .c-modal__panel {
      overflow: hidden;
    }

    .c-cart-image-preview-modal {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      min-block-size: 300px;
      padding-top: 44px;
      color: black;
    }

    .c-cart-image-preview-modal__header {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 16px 4px;
    }

    .c-cart-image-preview-modal__close,
    .c-cart-image-preview-modal__nav {
      inline-size: 24px;
      block-size: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      background: transparent;
      color: black;
      cursor: pointer;
    }

    .c-cart-image-preview-modal__header-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-cart-image-preview-modal__stage {
      position: relative;
      inline-size: 100%;
      padding: 8px 14px 0;
    }

    .c-cart-image-preview-modal__swiper {
      inline-size: 100%;
      min-inline-size: 0;
      overflow: hidden;
    }

    .c-cart-image-preview-modal__swiper .swiper-wrapper {
      display: flex;
    }

    .c-cart-image-preview-modal__swiper .swiper-slide {
      display: grid;
      place-items: center;
    }

    .c-cart-image-preview-modal__image {
      display: block;
      inline-size: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

    .c-cart-image-preview-modal__close[hidden],
    .c-cart-image-preview-modal__nav[hidden] {
      display: none;
    }

    .c-cart-image-preview-modal__content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
      text-align: left;
      inline-size: 100%;
      padding: 8px 14px 14px;
    }

    .c-cart-image-preview-modal__title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: black;
    }

    .c-cart-image-preview-modal__price {
      margin: 0;
      font-family: var(--font-en);
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      color: black;
    }

    @media screen and (1px <= width <= 768px) {
      .c-cart-image-preview-modal-root .c-modal {
        padding: 16px 8px;
      }
    }

    @media screen and (width >= 769px) {
      .c-cart-image-preview-modal-root .c-modal {
        padding: 24px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  Cart message preview modal
---------------------------------------- */

    .c-cart-message-preview-modal-root .c-modal__inner {
      border-radius: 0;
      background: transparent;
    }

    .c-cart-message-preview-modal-root .c-modal__panel {
      overflow: hidden;
    }

    .c-cart-message-preview-modal {
      position: relative;
      padding-top: 32px;
      color: black;
    }

    .c-cart-message-preview-modal__close {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 2;
      inline-size: 32px;
      block-size: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      border: none;
      background: transparent;
      color: white;
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-cart-message-preview-modal__scroll {
      max-block-size: min(100dvh - 72px, 600px);
      overflow: clip auto;
    }

    .c-cart-message-preview-modal__card {
      inline-size: 100%;
    }

    .c-cart-message-preview-modal__image-wrap {
      aspect-ratio: 1000 / 740;
      inline-size: 100%;
      background: #508bb2;
      overflow: hidden;
    }

    .c-cart-message-preview-modal__image {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    .c-cart-message-preview-modal__body {
      background: white;
    }

    .c-cart-message-preview-modal__for-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      inline-size: 100%;
    }

    .c-cart-message-preview-modal__for {
      font-family: var(--font-en);
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
    }

    .c-cart-message-preview-modal__to {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-cart-message-preview-modal__message {
      margin: 0;
    }

    .c-cart-message-preview-modal__fade {
      display: none;
    }

    .c-cart-message-preview-modal__note {
      display: none;
    }

    .c-cart-message-preview-modal[data-message-type="egift"] .c-cart-message-preview-modal__body {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 36px 20px;
    }

    .c-cart-message-preview-modal[data-message-type="egift"] .c-cart-message-preview-modal__message {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.7;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .c-cart-message-preview-modal[data-message-type="egift"] .c-cart-message-preview-modal__fade {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      display: block;
      block-size: 66px;
      background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 80%) 85.577%);
      pointer-events: none;
    }

    .c-cart-message-preview-modal[data-message-type="delivery"] .c-cart-message-preview-modal__body {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-block-size: 254px;
      padding: 20px;
    }

    .c-cart-message-preview-modal[data-message-type="delivery"] .c-cart-message-preview-modal__for-row {
      justify-content: flex-start;
      gap: 4px;
    }

    .c-cart-message-preview-modal[data-message-type="delivery"] .c-cart-message-preview-modal__for,
    .c-cart-message-preview-modal[data-message-type="delivery"] .c-cart-message-preview-modal__to {
      font-size: 12px;
    }

    .c-cart-message-preview-modal[data-message-type="delivery"] .c-cart-message-preview-modal__message {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: left;
    }

    .c-cart-message-preview-modal[data-message-type="delivery"] .c-cart-message-preview-modal__note {
      display: flex;
      align-items: center;
      /* justify-content: center; */
      inline-size: 100%;
      padding: 8px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: white;
    }

    @media screen and (1px <= width <= 768px) {
      .c-cart-message-preview-modal-root .c-modal {
        padding: 0;
      }

      .c-cart-message-preview-modal-root .c-modal__panel {
        inline-size: 100%;
        max-block-size: 100dvh;
      }
    }

    @media screen and (width >= 769px) {
      .c-cart-message-preview-modal-root .c-modal {
        padding: 24px;
      }

      .c-cart-message-preview-modal-root .c-modal__panel {
        border-radius: 0;
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  Theme lineup detail modal
---------------------------------------- */
    .c-theme-lineup-detail-modal-root {
      --modal-padding: 32px;
      --modal-height-pc: 586px;
      --modal-height-sp: calc(100svh - 100px);
      --modal-height: var(--modal-height-sp);
      --modal-inner-height: calc(var(--modal-height) - var(--modal-padding) * 2);

      @media screen and (width >= 769px) {
        --modal-height: var(--modal-height-pc);
        --modal-inner-height: calc(var(--modal-height) - var(--modal-padding) * 2);
      }
    }

    .c-theme-lineup-detail-modal-root .c-modal__inner {
      border-radius: 16px;
      background: white;
      overflow: visible;
    }

    .c-theme-lineup-detail-modal-root .c-modal__panel {
      overflow: visible;
    }

    .c-theme-lineup-detail-modal {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;

      /* max-block-size: min(100dvh - 24px, 860px); */
      max-block-size: var(--modal-height);
      color: #000;
    }

    .c-theme-lineup-detail-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 16px 12px;
    }

    .c-theme-lineup-detail-modal__close,
    .c-theme-lineup-detail-modal__nav {
      inline-size: 24px;
      block-size: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      background: transparent;
      color: #000;
      cursor: pointer;
    }

    .c-theme-lineup-detail-modal__header-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-theme-lineup-detail-modal__scroll {
      min-block-size: 0;
      overflow-y: auto;
      padding: 0 16px 96px;
    }

    .c-theme-lineup-detail-modal__content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .c-theme-lineup-detail-modal__gallery-column {
      display: flex;
      flex-direction: column;
      gap: 12px;

      @media screen and (width >= 769px) {
        gap: 0;
      }
    }

    .c-theme-lineup-detail-modal__gallery {
      gap: 12px;
    }

    .c-theme-lineup-detail-modal__gallery .c-gallery-image__stage {
      aspect-ratio: 1 / 1;
    }

    .c-theme-lineup-detail-modal__gallery .c-gallery-image__slide {
      position: relative;
    }

    .c-theme-lineup-detail-modal__gallery .c-gallery-image__arrow {
      display: none;
    }

    .c-theme-lineup-detail-modal__slide-note {
      position: absolute;
      z-index: 1;
      inset-block-end: 12px;
      inset-inline: 0;
      text-align: center;

      span {
        background: rgb(0 0 0 / 20%);
        color: #fff;
        padding: 6px 12px;
        border-radius: 1000px;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 400;
        font-size: 12px;
        white-space: nowrap;
        display: inline-block;
      }
    }

    .c-theme-lineup-detail-modal__title {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #000;
    }

    .c-theme-lineup-detail-modal__subtitle {
      margin: 4px 0 0;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: rgb(51 51 51 / 80%);
    }

    .c-theme-lineup-detail-modal__specs {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: rgb(77 77 77 / 70%);
      padding: 22px 0;
      margin: 22px 0;
      border-top: 1px solid rgb(178 178 178 / 30%);
      border-bottom: 1px solid rgb(178 178 178 / 30%);
    }

    .c-theme-lineup-detail-modal__detail-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding-inline: 4px;

      @media screen and (width >= 769px) {
        height: var(--modal-inner-height);
        overflow-y: scroll;
        padding-inline: 0;
        display: block;
        padding-right: var(--scrollbar-width);
      }
    }

    .c-theme-lineup-detail-modal__heading {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .c-theme-lineup-detail-modal__cms {
      padding-block: 8px;
    }

    .c-theme-lineup-detail-modal__cms h2 {
      font-size: 18px;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-theme-lineup-detail-modal__cms figcaption {
      color: #808080;
    }

    .c-theme-lineup-detail-modal__cta-pc {
      display: none;
    }

    .c-theme-lineup-detail-modal__footer {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: 5;
      pointer-events: none;
    }

    .c-theme-lineup-detail-modal__footer-gradient {
      display: flex;
      flex-direction: column;
      justify-content: center;
      block-size: 96px;
      padding: 18px 20px 20px;
      background: linear-gradient(180deg, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 80%) 85.577%);
      pointer-events: none;
    }

    .c-theme-lineup-detail-modal__footer .c-theme-lineup-detail-modal__cta {
      inline-size: 100%;
      pointer-events: auto;
    }

    .c-theme-lineup-detail-modal__cta-error-note {
      margin-top: 4px;
      font-size: 12px;
      letter-spacing: 0.02em;
      font-weight: 400;
      color: #c03323;
      text-align: center;
    }

    @media screen and (1px <= width <= 768px) {
      .c-theme-lineup-detail-modal-root .c-modal {
        padding: 16px 8px;
      }

      .c-theme-lineup-detail-modal-root .c-modal__panel {
        inline-size: min(100vw - 16px, 350px);
      }

      .c-theme-lineup-detail-modal__gallery .c-gallery-image__thumbs {
        padding-top: 0;
      }
    }

    @media screen and (width >= 769px) {
      .c-theme-lineup-detail-modal-root .c-modal {
        padding: 24px;
      }

      .c-theme-lineup-detail-modal {
        overflow: visible;
        padding: 32px;
      }

      .c-theme-lineup-detail-modal__header {
        padding: 0;
      }

      .c-theme-lineup-detail-modal__header-actions {
        display: none;
      }

      .c-theme-lineup-detail-modal__close {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: -30px;
        inline-size: 20px;
        block-size: 20px;
        color: #fff;

        svg {
          width: 20px;
          height: 20px;
        }

        &:hover {
          color: var(--color-text-highlight);
        }
      }

      .c-theme-lineup-detail-modal__scroll {
        overflow: initial;
        padding: 0;
        height: 100%;
        height: calc(var(--modal-height) - 60px);
      }

      .c-theme-lineup-detail-modal__content {
        display: grid;
        grid-template-columns: 388px 1fr;
        gap: 40px;
        align-items: start;
        height: fit-content;
      }

      .c-theme-lineup-detail-modal__gallery .c-gallery-image__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
      }

      .c-theme-lineup-detail-modal__gallery .c-gallery-image__thumb {
        width: 58px;
        height: 58px;
      }

      .c-theme-lineup-detail-modal__gallery .c-gallery-image__thumbs {
        overflow-x: hidden;
        gap: 4px;
      }

      .c-theme-lineup-detail-modal__gallery .c-gallery-image__thumb::before {
        background: transparent;
      }

      .c-theme-lineup-detail-modal__gallery .c-gallery-image__thumb.is-current::before {
        background: rgb(0 0 0 / 20%);
      }

      .c-theme-lineup-detail-modal__title {
        font-size: 24px;
      }

      .c-theme-lineup-detail-modal__subtitle {
        font-size: 16px;
      }

      .c-theme-lineup-detail-modal__cta-pc {
        display: block;
        padding: 10px 16px 0;

        .c-button {
          inline-size: 100%;
        }

        .c-theme-lineup-detail-modal__cta-error-note {
          line-height: 1;
          text-align: center;
        }
      }

      .c-theme-lineup-detail-modal__footer {
        display: none;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-pager {
      inline-size: min(100%, 342px);
      margin-inline: auto;
      padding: 20px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-primary);
      margin-top: 24px;
      gap: 8px;

      @media screen and (width >= 769px) {
        margin-top: 40px;
        padding: 20px 0;
      }
    }

    .c-pager a:not([class]) {
      display: flex;
      width: 36px;
      height: 36px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      border-radius: 50%;
      border: 1px solid transparent;
    }

    .c-pager a:not([class]):hover {
      opacity: 1;
      color: var(--color-text-highlight);
      border: 1px solid var(--color-text-highlight);
    }

    .c-pager .is-arrow {
      display: flex;
      width: 24px;
      height: 24px;
      justify-content: center;
      align-items: center;
      color: var(--color-text-primary);
    }

    .c-pager .is-arrow:hover {
      color: var(--color-text-highlight);
    }

    .c-pager .is-arrow--prev {
      margin-right: auto;
    }

    .c-pager .is-arrow--next {
      margin-left: auto;
    }

    .c-pager span.is-dots {
      display: grid;
      place-items: center;
    }

    .c-pager span.is-current {
      inline-size: 36px;
      block-size: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--font-futura);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      border: 1px solid var(--color-text-primary);
    }

    .c-pager span[aria-hidden="true"] {
      inline-size: 16px;
      block-size: auto;
      border-radius: 0;
    }
  }
}

@layer components {
  @layer molecules {
    .c-toast {
      position: fixed;
      z-index: var(--z-toast);
      inset-inline: 0;
      bottom: 16px;
      width: min(calc(100% - 24px), 350px);
      margin-inline: auto;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(24px);
      transition:
        transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.2s ease,
        visibility 0.2s ease;
    }

    .c-toast.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .c-toast__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 16px;
      border-radius: 8px;
      color: #fff;
    }

    .c-toast.is-default .c-toast__inner {
      background-color: var(--color-link-primary);
    }

    .c-toast.is-error .c-toast__inner {
      background-color: var(--color-status-error-primary);
    }

    .c-toast__content {
      min-width: 0;
    }

    .c-toast__message-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .c-toast__status-icon {
      flex: 0 0 auto;
    }

    .c-toast__message {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
    }

    .c-toast__description {
      margin: 4px 0 0 32px;
      font-size: 12px;
      line-height: 1.4;
    }

    .c-toast__close {
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: transparent;
      color: inherit;
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    @media screen and (width >= 769px) {
      .c-toast {
        bottom: 24px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-secondary-gift-card {
      min-inline-size: 0;
    }

    .c-secondary-gift-card:hover {
      color: var(--color-brand-primary);
    }

    .c-secondary-gift-card:hover .c-secondary-gift-card__brand {
      color: var(--color-brand-primary);
    }

    .c-secondary-gift-card__inner {
      display: block;
      color: inherit;
      text-decoration: none;
    }

    .c-secondary-gift-card__thumb {
      position: relative;
      inline-size: 100%;
      aspect-ratio: 200 / 200;
      overflow: hidden;
      background-color: var(--color-bg-subtle);
    }

    .c-secondary-gift-card__thumb img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    .c-secondary-gift-card__soldout {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background-color: rgb(0 0 0 / 40%);
      color: var(--color-bg-canvas);
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-secondary-gift-card__title {
      margin: 8px 0 0;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-secondary-gift-card__brand {
      margin: 4px 0 0;
      color: var(--color-text-secondary);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    @media screen and (width >= 769px) {
      .c-secondary-gift-card__brand {
        font-size: 14px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-choose-a-gift {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .c-section-choose-a-gift__copy {
      padding-block: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    .c-section-choose-a-gift__lead {
      margin: 0;
      text-align: center;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-section-choose-a-gift__sp-deadline-chip {
      margin: 0;
      border-radius: 999px;
      padding: 12px 20px;
      background-color: var(--color-accent-yellow-secondary);
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      color: #333;
    }

    .c-section-choose-a-gift__sp-deadline {
      text-align: center;
      letter-spacing: 0.02em;
      font-weight: 400;
    }

    .c-section-choose-a-gift__sp-deadline strong {
      color: var(--color-status-error-strong);
      font-weight: 700;
    }

    .c-section-choose-a-gift__hero-image {
      aspect-ratio: 272 / 272;
      inline-size: 100%;
    }

    @media screen and (1px <= width <= 768px) {
      .c-section-choose-a-gift__hero-image {
        margin-inline: -24px;
        inline-size: auto;
      }
    }

    .c-section-choose-a-gift__hero-image img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    .c-section-choose-a-gift__topic {
      margin: 0;
      background-color: var(--color-bg-canvas);
      padding: 28px 0 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .c-section-choose-a-gift__topic-header {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .c-section-choose-a-gift__topic-eyebrow {
      margin: 0;
      color: var(--color-text-tertiary);
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-section-choose-a-gift__topic-title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-section-choose-a-gift__topic-description {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    @media screen and (width >= 769px) {
      .c-section-choose-a-gift {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 40px;
        margin-bottom: 60px;
      }

      .c-section-choose-a-gift__hero-image-container {
        grid-column: 1;
        grid-row: 1 / 3;
        aspect-ratio: unset;
        align-self: stretch;
        inline-size: 100%;
        margin: 0;
      }

      .c-section-choose-a-gift__hero-image img {
        block-size: 100%;
      }

      .c-section-choose-a-gift__copy {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        gap: 24px;
        justify-content: flex-start;
      }

      .c-section-choose-a-gift__lead {
        line-height: 1.5;
      }

      .c-section-choose-a-gift__sp-deadline-chip {
        display: none;
      }

      .c-section-choose-a-gift__sp-deadline {
        display: none;
      }

      .c-section-choose-a-gift__topic {
        grid-column: 2;
        grid-row: 2;
        background-color: var(--color-bg-surface);
        border-radius: 20px;
        padding: 24px;
        gap: 8px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-gift-list {
      padding: 24px 0 0;
    }

    .c-section-gift-list__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      margin-bottom: 24px;
    }

    .c-section-gift-list__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 36px 12px;
    }

    .c-section-gift-list__pager {
      inline-size: min(100%, 342px);
      margin-inline: auto;
      padding: 20px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-primary);
      margin-top: 24px;
      gap: 8px;
    }

    .c-section-gift-list__pager a:not([class]) {
      display: flex;
      width: 36px;
      height: 36px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      border-radius: 50%;
      border: 1px solid transparent;
    }

    .c-section-gift-list__pager a:not([class]):hover {
      opacity: 1;
      color: var(--color-text-highlight);
      border: 1px solid var(--color-text-highlight);
    }

    .c-section-gift-list__pager .is-arrow {
      display: flex;
      width: 24px;
      height: 24px;
      justify-content: center;
      align-items: center;
      color: var(--color-text-primary);
    }

    .c-section-gift-list__pager .is-arrow:hover {
      color: var(--color-text-highlight);
    }

    .c-section-gift-list__pager .is-arrow--prev {
      margin-right: auto;
    }

    .c-section-gift-list__pager .is-arrow--next {
      margin-left: auto;
    }

    .c-section-gift-list__pager span.is-dots {
      display: grid;
      place-items: center;
    }

    .c-section-gift-list__pager span.is-current {
      inline-size: 36px;
      block-size: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--font-futura);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      border: 1px solid var(--color-text-primary);
    }

    .c-section-gift-list__pager span[aria-hidden="true"] {
      inline-size: 16px;
      block-size: auto;
      border-radius: 0;
    }

    @media screen and (width >= 769px) {
      .c-section-gift-list {
        padding-top: 0;
      }

      .c-section-gift-list__title {
        font-size: 22px;
        margin-bottom: 40px;
      }

      .c-section-gift-list__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 36px 20px;
      }

      .c-section-gift-list__pager {
        margin-top: 40px;
        padding: 20px 0;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-thanks-card {
      background-color: var(--color-bg-surface);
      padding-block: 48px;
    }

    .c-section-thanks-card__inner {
      padding-inline: 30px;
      text-align: center;

      @media screen and (width >= 769px) {
        --padding-inline: calc(var(--inner-padding) + 46px);

        padding-inline: var(--padding-inline);
        max-inline-size: calc(900px + var(--padding-inline) * 2 - 46px - 46px);
        margin-inline: auto;
      }
    }

    .c-section-thanks-card__layout {
      @media screen and (width >= 769px) {
        display: grid;
        grid-template:
          "cta image" auto
          "share image" 1fr / 1fr 398px;
        gap: 0 60px;
      }
    }

    .c-section-thanks-card__cta {
      margin-bottom: 20px;

      @media screen and (width >= 769px) {
        grid-area: cta;
        margin-bottom: 40px;
      }
    }

    .c-section-thanks-card__eyebrow {
      margin-bottom: 10px;
      text-align: center;
    }

    .c-section-thanks-card__balloon {
      margin-bottom: 11px;
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-block-size: 45px;
      min-inline-size: 264px;
      padding: 14px 20px 11px;
      border: 1px solid var(--color-text-primary);
      border-radius: 100px;
      background-color: var(--color-accent-yellow-secondary);
      font-family: var(--font-poppins);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: var(--color-text-primary);
    }

    .c-section-thanks-card__balloon svg {
      position: absolute;
      inset-block-start: calc(100% - 1px);
      inset-inline-start: 50%;
      inline-size: 14px;
      block-size: 13px;
      transform: translateX(-50%);
    }

    .c-section-thanks-card__copy {
      text-align: center;
    }

    .c-section-thanks-card__image-wrap {
      margin-bottom: 40px;
      display: block;

      @media screen and (width >= 769px) {
        grid-area: image;
        margin-bottom: 0;
      }
    }

    .c-section-thanks-card__image-wrap img {
      inline-size: min(100%, 398px);
    }

    .c-section-thanks-card__share-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;

      @media screen and (width >= 769px) {
        grid-area: share;
      }
    }

    .c-section-thanks-card__line-share {
      inline-size: min(100%, 314px);
      min-block-size: 48px;
      border-radius: 999px;
      background-color: #00c44b;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.02em;

      @media screen and (width >= 769px) {
        inline-size: 100%;
      }

      &:hover {
        background-color: #00a63c;
      }
    }

    .c-section-thanks-card__line-icon {
      color: currentcolor;
      inline-size: 32px;
      block-size: 32px;
    }

    .c-section-thanks-card__share-row {
      display: inline-flex;
      align-items: center;
      gap: 20px;
    }

    .c-section-thanks-card__share-row > p {
      margin: 0;
      font-family: var(--font-poppins);
      line-height: 1;
      letter-spacing: 0;
    }

    .c-section-thanks-card__sns-list {
      display: inline-flex;
      align-items: center;
      gap: 20px;
    }

    .c-section-thanks-card__sns-list .c-sns-icon {
      color: var(--color-text-primary);

      &:hover {
        color: var(--color-text-highlight);
        opacity: 1;
      }
    }

    .c-section-thanks-card__download.c-button.is-text {
      padding: 4px;
    }

    .c-section-thanks-card__download .c-button__icon-wrap {
      --button-icon-size: 24px;

      inline-size: var(--button-icon-size);
      block-size: var(--button-icon-size);
    }

    .c-section-thanks-card__download .c-button__label {
      font-size: 16px;
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  .c-keyword-search
  キーワード検索入力（KeywordSearch.astro）。
  商品一覧のツールバーとサイトメニューで共用。
  ×クリアの動作は js（keywordSearch.ts）。
  （元は _product-toolbar.css にあったものを共用化のため移動）
---------------------------------------- */
    .c-keyword-search {
      width: 100%;
      border: 1px solid #999;
      border-radius: 9999px;
      padding: 6px 16px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      min-height: 44px;

      /* クリアボタン（絶対配置）の基準 */
      position: relative;

      &:has(.c-keyword-search__input:focus) {
        outline: 1px solid #000;
      }
    }

    .c-keyword-search__button {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c-keyword-search__icon {
      color: #999;
    }

    .c-keyword-search__input {
      /* 1fr トラック内で min-content 幅（padding 込み）に引きずられて
     コンテナが広がらないようにする */
      min-inline-size: 0;

      /* ×ボタン（24px + 余白）の分を最初から確保しておく。
     入力の有無で padding を切り替えるとレイアウトが動くため常時確保 */
      padding-inline-end: 32px;
    }

    .c-keyword-search__input::placeholder {
      color: #999;
    }

    /* 入力クリアボタン。入力があるときだけ表示する
   （表示制御は CSS のみ。クリア動作は js: keywordSearch.ts）
   絶対配置なので出現してもレイアウトは動かない */
    .c-keyword-search__clear {
      display: none;
      position: absolute;
      inset-inline-end: 16px;
      inset-block-start: 50%;
      transform: translateY(-50%);
      align-items: center;
      justify-content: center;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--color-text-primary);
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-keyword-search:has(.c-keyword-search__input:not(:placeholder-shown)) .c-keyword-search__clear {
      display: flex;
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  .c-product-toolbar-sp
---------------------------------------- */
    .c-product-toolbar-sp {
      padding: 20px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      border-bottom: 1px solid #000;
    }

    .c-product-toolbar-sp__activity-filters {
      margin-inline: -16px;
      overflow-x: auto;
    }

    /* ----------------------------------------
  .c-product-toolbar-pc
---------------------------------------- */

    .c-product-toolbar-pc {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .c-product-toolbar-pc__keyword-search {
      /* margin-inline: auto だと grid アイテムの stretch が効かず
     幅が中身の fit-content 依存になり、入力内容で幅が揺れる。
     width + justify-self で 294px 固定・中央寄せにする */
      width: 100%;
      max-width: 294px;
      justify-self: center;
    }

    /* ----------------------------------------
  .c-activity-filters
---------------------------------------- */
    .c-activity-filters {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;

      @media screen and (width >= 769px) {
        display: block;
      }
    }

    /* SP ツールバー内では横スクロールさせるため inline-grid にする */
    .c-product-toolbar-sp__activity-filters .c-activity-filters {
      padding-inline: 16px;
      display: inline-grid;
    }

    .c-activity-filters__button {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .c-activity-filters__filters {
      .c-search-filters {
        display: flex;
        gap: 8px;

        @media screen and (width >= 769px) {
          flex-wrap: wrap;
        }
      }

      .c-search-filter {
        display: inline-grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px;
        background-color: var(--color-bg-surface);
        border-radius: 1000px;
        min-height: 38px;
        padding: 2px 16px;
        font-size: 14px;
        letter-spacing: 0.02em;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            color: #fff;
            background-color: var(--color-text-highlight);
          }
        }
      }

      .c-search-filter__remove-button {
        line-height: 0;
      }

      .c-search-filter-link {
        display: inline-grid;
        place-items: center;
        gap: 8px;
        background-color: var(--color-bg-surface);
        border-radius: 1000px;
        min-height: 38px;
        padding: 2px 16px;
        font-size: 14px;
        letter-spacing: 0.02em;
        line-height: 1;
        white-space: nowrap;

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            color: #fff;
            background-color: var(--color-text-highlight);
          }
        }
      }
    }

    /* ----------------------------------------
  .c-results-nav
---------------------------------------- */

    .c-results-nav {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-results-nav__count {
      display: flex;
      align-items: baseline;
      line-height: 1;
      gap: 4px;
    }

    .c-results-nav__count-number {
      font-size: 22px;
      font-weight: 700;
      font-family: var(--font-en);
    }

    .c-results-nav__count-label {
      font-size: 16px;
      font-weight: 500;
      font-family: var(--font-poppins);
    }

    .c-results-nav__sort {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .c-results-nav__sort-button {
      display: flex;
      place-items: center;
    }

    .c-results-nav__sort-label {
      font-size: 14px;
      font-weight: 500;
    }

    .c-results-nav__view {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .c-results-nav__view-button {
      color: #b2b2b2;
      display: flex;
      place-items: center;

      &.is-active {
        color: #000;
      }
    }

    /* ----------------------------------------
  .c-results-nav-pc
---------------------------------------- */

    .c-results-nav-pc {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-results-nav-pc__count {
      display: flex;
      align-items: baseline;
      line-height: 1;
      gap: 4px;
    }

    .c-results-nav-pc__count-number {
      font-size: 32px;
      font-weight: 700;
      font-family: var(--font-en);
    }

    .c-results-nav-pc__count-label {
      font-size: 20px;
      font-weight: 500;
      font-family: var(--font-poppins);
    }

    .c-results-nav-pc__nav {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .c-results-nav-pc__nav-button {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-results-nav-pc__nav-button-label {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .c-results-nav-pc__sort {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;
    }

    .c-results-nav-pc__sort-button {
      display: flex;
      place-items: center;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-results-nav-pc__sort-button-label {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  .c-product-toolbar-02
---------------------------------------- */
    .c-product-toolbar-02 {
      border-bottom: 1px solid #000;
      padding: 18px var(--inner-padding);

      @media screen and (width >= 769px) {
        padding: 20px 0;
      }
    }

    /* ----------------------------------------
  .c-results-nav-02
---------------------------------------- */

    .c-results-nav-02 {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .c-results-nav-02__count {
      display: flex;
      align-items: baseline;
      line-height: 1;
      gap: 4px;
    }

    .c-results-nav-02__count-number {
      font-size: 22px;
      font-family: var(--font-en);
      /* font-weight: 700; */

      @media screen and (width >= 769px) {
        font-size: 32px;
      }
    }

    .c-results-nav-02__count-label {
      font-size: 16px;
      font-weight: 500;
      font-family: var(--font-poppins);

      @media screen and (width >= 769px) {
        font-size: 20px;
      }
    }

    .c-results-nav-02__nav {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }

    .c-results-nav-02__nav-button {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-results-nav-02__nav-button-label {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .c-results-nav-02__sort {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 4px;
    }

    .c-results-nav-02__sort-button {
      display: flex;
      place-items: center;
      gap: 4px;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-results-nav-02__sort-button-label {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;

      @media screen and (width >= 769px) {
        font-size: 16px;
      }
    }

    .is-with-view-switch .c-results-nav-02__sort-button-label {
      font-size: 14px;

      @media screen and (width >= 769px) {
        font-size: 16px;
      }
    }

    /* グリッド表示の切り替えボタン（ProductToolbar02 の showViewSwitch で opt-in）。
   カラム切替は SP のみの機能（productGrid.ts 参照）のため、PC では非表示にする */
    .c-results-nav-02__view {
      display: flex;
      align-items: center;
      gap: 8px;

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .c-results-nav-02__view-button {
      color: #b2b2b2;
      display: flex;
      place-items: center;

      &.is-active {
        color: #000;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-product-grid {
      display: grid;

      /* 1fr は minmax(auto, 1fr) の意味になり、カード内の swiper（flex横並び）の
     固有コンテンツ幅でトラックが際限なく広がってしまうため、minmax(0, 1fr) で最小値を0に固定する */
      grid-template-columns: minmax(0, 1fr);
      gap: 56px;

      @media screen and (width >= 769px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 56px 36px;
      }

      &.is-2-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 16px;

        @media screen and (width >= 769px) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 56px 36px;
        }
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-product-sort-menu
  商品一覧ページの並べ替えメニュー。右からスライドインするドロワー。
  開閉は js（productSortMenu.ts）が .is-open と body.is-product-sort-menu-open を付け外しする。
  SP / PC 共通で同一寸法（パネル幅 320px）。
---------------------------------------- */

    .c-product-sort-menu {
      position: fixed;
      inset: 0;
      z-index: var(--z-drawer);
      pointer-events: none;
      visibility: hidden;

      /* 閉じるとき: スライドアウト(0.28s)が終わってから hidden にする。
     開くとき(.is-open)は delay 0 で即 visible（直後の focus() を成功させるため） */
      transition: visibility 0s linear 0.28s;
    }

    .c-product-sort-menu__overlay {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      background-color: rgb(0 0 0 / 50%);
      opacity: 0;
      transition: opacity 0.28s ease;
      cursor: pointer;
    }

    .c-product-sort-menu__panel {
      position: absolute;
      inset-block: 30px 0;
      inset-inline-end: 0;

      /* ×ボタン（パネル左外 35px）が画面外に出ないよう保険をかける */
      inline-size: min(320px, calc(100dvw - 55px));
      background-color: #fff;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.28s ease;
    }

    .c-product-sort-menu.is-open {
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;

      .c-product-sort-menu__overlay {
        opacity: 1;
      }

      .c-product-sort-menu__panel {
        transform: translateX(0);
      }
    }

    /* ── 閉じるボタン（パネルの左外側） ─────── */

    .c-product-sort-menu__close {
      position: absolute;
      inset-inline-start: -35px;
      inset-block-start: 9px;
      inline-size: 24px;
      block-size: 24px;
      border: 0;
      padding: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* ── ヘッダー ───────────────────────────── */

    .c-product-sort-menu__header {
      display: flex;
      align-items: center;
      block-size: 60px;
      flex-shrink: 0;
      padding-inline: 24px 16px;
      border-block-end: 1px solid #666;
    }

    .c-product-sort-menu__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
    }

    /* ── 選択肢リスト ───────────────────────── */

    .c-product-sort-menu__list {
      flex: 1;
      padding-block-start: 12px;
      overflow-y: auto;
    }

    .c-product-sort-menu__option {
      display: flex;
      align-items: center;
      gap: 4px;
      inline-size: 100%;
      block-size: 48px;
      padding: 8px 24px;
      border: 0;
      background: transparent;
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: start;
      color: var(--color-text-primary);
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* チェックアイコンは非選択時も 18px の枠を維持してラベル位置を揃える */
    .c-product-sort-menu__option-check {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 18px;
      block-size: 18px;
      flex-shrink: 0;
      visibility: hidden;
    }

    .c-product-sort-menu__option.is-selected {
      color: var(--color-text-highlight);

      .c-product-sort-menu__option-check {
        visibility: visible;
      }
    }

    /* ── フッター（確定ボタン） ─────────────── */

    .c-product-sort-menu__footer {
      flex-shrink: 0;
      padding: 20px;
      border-block-start: 1px solid var(--color-text-primary);
      background-color: #fff;
    }

    .c-product-sort-menu__apply {
      inline-size: 100%;
    }

    /* ── 背景スクロールロック ───────────────── */

    body.is-product-sort-menu-open {
      overflow: hidden;
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-product-filter-menu
  商品一覧ページの絞り込みメニュー。SP/PC 共通の単一DOM。
  - SP: 右からスライドインするドロワー（c-product-sort-menu と同パターン）。
        セクションはアコーディオン（初期すべて閉）
  - PC: ヘッダー下から全幅ドロップダウン。セクションは常時展開の3カラム。
        フッターバーの下の残り領域がオーバーレイ（クリックで閉じる）
  開閉・選択・スライダーは js（productFilterMenu.ts）が制御する。
  セクション/カテゴリーの開閉コンテンツは display ではなく block-size で隠す
  （js の height 実測アニメと PC の常時展開強制を両立させるため）。
---------------------------------------- */

    .c-product-filter-menu {
      position: fixed;
      inset: 0;
      z-index: var(--z-drawer);
      pointer-events: none;
      visibility: hidden;

      /* 閉じるとき: スライドアウト(0.28s)が終わってから hidden にする。
     開くとき(.is-open)は delay 0 で即 visible（直後の focus() を成功させるため） */
      transition: visibility 0s linear 0.28s;
    }

    .c-product-filter-menu__overlay {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      background-color: rgb(0 0 0 / 50%);
      opacity: 0;
      transition: opacity 0.28s ease;
      cursor: pointer;
    }

    .c-product-filter-menu__panel {
      position: absolute;
      inset-block: 30px 0;
      inset-inline-end: 0;

      /* ×ボタン（パネル左外 35px）が画面外に出ないよう保険をかける */
      inline-size: min(320px, calc(100dvw - 55px));
      background-color: #fff;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.28s ease;
    }

    .c-product-filter-menu.is-open {
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;

      .c-product-filter-menu__overlay {
        opacity: 1;
      }

      .c-product-filter-menu__panel {
        transform: translateX(0);
      }
    }

    /* ── 閉じるボタン（SP: パネルの左外側） ── */

    .c-product-filter-menu__close {
      position: absolute;
      inset-inline-start: -35px;
      inset-block-start: 9px;
      inline-size: 24px;
      block-size: 24px;
      border: 0;
      padding: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* ── ヘッダー ───────────────────────────── */

    .c-product-filter-menu__header {
      display: flex;
      align-items: center;
      block-size: 60px;
      flex-shrink: 0;
      padding-inline: 24px 16px;
      border-block-end: 1px solid #666;
    }

    .c-product-filter-menu__title {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
    }

    /* ── 本文（セクション群） ───────────────── */

    .c-product-filter-menu__body {
      flex: 1;
      overflow-y: auto;
      padding-inline: 16px;
    }

    .c-product-filter-menu__section {
      border-block-end: 1px solid var(--color-text-primary);
    }

    .c-product-filter-menu__section-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      inline-size: 100%;
      block-size: 52px;
      padding-inline: 8px;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--color-text-primary);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--color-text-highlight);
        }
      }
    }

    .c-product-filter-menu__section-title {
      flex: 1;
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: start;
    }

    .c-product-filter-menu__section-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 18px;
      block-size: 18px;
      flex-shrink: 0;
    }

    .c-product-filter-menu__icon-minus {
      display: none;
    }

    .c-product-filter-menu__section.is-open {
      .c-product-filter-menu__icon-plus {
        display: none;
      }

      .c-product-filter-menu__icon-minus {
        display: block;
      }
    }

    /* 開閉コンテンツ（js が inline の block-size でアニメーションする） */
    .c-product-filter-menu__section-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.26s ease;
    }

    /* 開いているセクションは overflow を解除する
   （価格スライダーの「上限なし」ラベルが右端で見切れないように。
     開閉アニメーション中だけ js が inline style で hidden を当てる） */
    .c-product-filter-menu__section.is-open > .c-product-filter-menu__section-content {
      block-size: auto;
      overflow: visible;
    }

    .c-product-filter-menu__options {
      padding-block-end: 12px;
    }

    /* ── 選択行（チェック + ラベル） ────────── */

    .c-product-filter-menu__option {
      display: flex;
      align-items: center;
      gap: 4px;
      inline-size: 100%;
      block-size: 40px;
      padding-inline: 16px 24px;
      border: 0;
      background: transparent;
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: start;
      color: var(--color-text-primary);
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* チェックアイコンは非選択時も 18px の枠を維持してラベル位置を揃える */
    .c-product-filter-menu__option-check {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 18px;
      block-size: 18px;
      flex-shrink: 0;
      visibility: hidden;
    }

    .c-product-filter-menu__option.is-selected {
      color: var(--color-text-highlight);

      .c-product-filter-menu__option-check {
        visibility: visible;
      }
    }

    /* ── 価格帯スライダー ───────────────────── */

    .c-product-filter-menu__price {
      padding: 46px 20px 24px;
    }

    .c-product-filter-menu__price-track {
      position: relative;
      block-size: 4px;
      border-radius: 100px;
      background-color: #d9d9d9;
    }

    .c-product-filter-menu__price-range {
      position: absolute;
      inset-block: 0;
      background-color: #4d4d4d;
    }

    .c-product-filter-menu__price-handle {
      position: absolute;
      inset-block-start: 50%;
      inline-size: 16px;
      block-size: 16px;
      border-radius: 50%;
      background-color: #4d4d4d;
      transform: translate(-50%, -50%);
      touch-action: none;
      cursor: grab;

      &:active {
        cursor: grabbing;
      }
    }

    .c-product-filter-menu__price-label {
      position: absolute;
      inset-block-end: calc(100% + 10px);
      inset-inline-start: 50%;
      transform: translateX(-50%);
      font-family: var(--font-en);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
      color: var(--color-text-primary);
      pointer-events: none;
    }

    /* 「上限なし」表示のとき */
    .c-product-filter-menu__price-label.is-text {
      font-family: var(--font-jp);
      font-size: 12px;
    }

    /* ── カテゴリー階層 ─────────────────────── */

    .c-product-filter-menu__categories {
      padding-block-end: 12px;
    }

    .c-product-filter-menu__category-header {
      display: flex;
      align-items: center;
      gap: 8px;
      block-size: 40px;
    }

    .c-product-filter-menu__category-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      min-inline-size: 0;
      border: 0;
      padding: 0;
      background: transparent;
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: start;
      color: var(--color-text-primary);
      cursor: pointer;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--color-text-highlight);
        }
      }
    }

    .c-product-filter-menu__category.is-checked .c-product-filter-menu__category-toggle {
      color: var(--color-text-highlight);

      .c-product-filter-menu__option-check {
        visibility: visible;
      }
    }

    .c-product-filter-menu__select-all {
      flex-shrink: 0;
      border: 1px solid #6aa7e2;
      border-radius: 100px;
      padding: 4px 10px;
      background: transparent;
      font-family: var(--font-jp);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-link-primary);
      white-space: nowrap;
      cursor: pointer;
    }

    /* すべて選択ボタンは小カテゴリー展開中のみ表示 */
    .c-product-filter-menu__category:not(.is-open) .c-product-filter-menu__select-all {
      display: none;
    }

    .c-product-filter-menu__category-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.26s ease;
    }

    .c-product-filter-menu__category.is-open > .c-product-filter-menu__category-content {
      block-size: auto;
    }

    .c-product-filter-menu__category-content .c-product-filter-menu__options {
      padding-block-end: 8px;
    }

    /* ── フッター ───────────────────────────── */

    .c-product-filter-menu__footer {
      flex-shrink: 0;
      background-color: var(--color-bg-surface);
      padding: 24px 32px 22px;
    }

    .c-product-filter-menu__count {
      margin: 0;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      line-height: 1;
      color: var(--color-text-primary);
    }

    .c-product-filter-menu__count-number {
      font-family: var(--font-en);
      font-size: 22px;
      font-weight: 700;
    }

    .c-product-filter-menu__count-unit {
      font-family: var(--font-en);
      font-size: 16px;
      font-weight: 500;
    }

    .c-product-filter-menu__count-text {
      font-family: var(--font-jp);
      font-size: 12px;
    }

    .c-product-filter-menu__actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-block-start: 12px;
    }

    .c-product-filter-menu__apply {
      inline-size: 100%;
    }

    .c-product-filter-menu__reset {
      border: 0;
      padding: 0;
      background: transparent;
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.5;
      color: var(--color-text-primary);
      text-decoration: underline;
      text-underline-offset: 4px;
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* ── 背景スクロールロック ───────────────── */

    body.is-product-filter-menu-open {
      overflow: hidden;
    }

    /* ----------------------------------------
  PC（width >= 769px）
  ヘッダー下から全幅ドロップダウン。
  - コンテナをヘッダー下（--header-height）から下に限定し overflow: hidden にする。
    → パネルの translateY(-100%) はコンテナ上端でクリップされ、
      ヘッダーの下から生えるように見える。オーバーレイは残り領域のみ暗くなる
  - z-index はヘッダー（100）より下の 90
  - セクションは常時展開・タイトル行は無効化。カテゴリー階層の開閉は SP と同じ
---------------------------------------- */

    @media screen and (width >= 769px) {
      .c-product-filter-menu {
        inset: var(--header-height) 0 0;
        z-index: var(--z-menu-under-header);
        overflow: hidden;
      }

      .c-product-filter-menu__panel {
        inset: 0 0 auto;
        inline-size: 100%;
        max-block-size: 100%;
        transform: translateY(-100%);
      }

      .c-product-filter-menu.is-open .c-product-filter-menu__panel {
        transform: translateY(0);
      }

      .c-product-filter-menu__close,
      .c-product-filter-menu__header {
        display: none;
      }

      /* 3カラム（342 + 282 + 288 + gap 56×2 = 1024 = --inner-width） */
      .c-product-filter-menu__body {
        display: grid;
        grid-template-columns: 342px 282px 288px;
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 横スクロールを無くす場合 */
        grid-template-rows: auto auto;
        column-gap: 56px;
        align-content: start;
        inline-size: 100%;
        max-inline-size: var(--inner-width);
        margin-inline: auto;
        padding-block: 56px 40px;
        padding-inline: var(--inner-padding);
      }

      .c-product-filter-menu__section--types {
        grid-column: 1;
        grid-row: 1;
      }

      .c-product-filter-menu__section--price {
        grid-column: 1;
        grid-row: 2;
        margin-block-start: 36px;
      }

      .c-product-filter-menu__section--scenes {
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      .c-product-filter-menu__section--categories {
        grid-column: 3;
        grid-row: 1 / span 2;
      }

      /* セクションは常時展開・境界線なし・±アイコンなし・タイトル行は無効 */
      .c-product-filter-menu__section {
        border-block-end: 0;
      }

      .c-product-filter-menu__section-toggle {
        pointer-events: none;
        block-size: 48px;
        padding-inline: 0;
      }

      .c-product-filter-menu__section-icon {
        display: none;
      }

      .c-product-filter-menu__section-content {
        block-size: auto !important;
        overflow: visible;
        transition: none;
      }

      /* フッターバー: count 左 / ボタン右 を 1024 幅の中で両端寄せ */
      .c-product-filter-menu__footer {
        block-size: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block: 0;
        padding-inline: max(var(--inner-padding), calc((100% - var(--inner-width)) / 2 + var(--inner-padding)));
      }

      .c-product-filter-menu__count {
        justify-content: flex-start;
      }

      .c-product-filter-menu__actions {
        flex-direction: row-reverse;
        gap: 20px;
        margin-block-start: 0;
      }

      .c-product-filter-menu__apply {
        --button-height: 38px;
        --button-padding-inline: 0;
        --button-font-size: 14px;
        --button-icon-size: 18px;

        inline-size: 180px;
      }

      .c-product-filter-menu__reset {
        inline-size: 180px;
        block-size: 38px;
        border: 1px solid var(--color-text-primary);
        border-radius: 1000px;
        background-color: #fff;
        font-size: 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .c-product-filter-menu,
      .c-product-filter-menu__overlay,
      .c-product-filter-menu__panel,
      .c-product-filter-menu__section-content,
      .c-product-filter-menu__category-content {
        transition: none;
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-site-menu
  Layout.astro ページのグローバルメニュー。
  ヘッダーの「メニューを開く」で右からスライドインするドロワー。
  開閉は js（siteMenu.ts）が .is-open / body.is-site-menu-open を制御する。
  展開行（〜からさがす）は自前のディスクロージャー（button + grid-template-rows）。
---------------------------------------- */

    .c-site-menu {
      position: fixed;
      inset: 0;
      z-index: var(--z-drawer);
      pointer-events: none;
      visibility: hidden;

      /* 閉じるとき: スライドアウト(0.28s)が終わってから hidden にする。
     開くとき(.is-open)は delay 0 で即 visible（直後の focus() を成功させるため） */
      transition: visibility 0s linear 0.28s;
    }

    body.is-site-menu-open {
      overflow: hidden;
    }

    .c-site-menu__overlay {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      background-color: rgb(0 0 0 / 50%);
      opacity: 0;
      transition: opacity 0.28s ease;
      cursor: pointer;
    }

    .c-site-menu__panel {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: min(345px, calc(100dvw - 45px));
      background-color: var(--color-bg-surface);
      padding: 24px;
      overflow-y: auto;
      overscroll-behavior: contain;
      display: flex;
      flex-direction: column;
      gap: 24px;
      transform: translateX(100%);
      transition: transform 0.28s ease;
    }

    .c-site-menu.is-open {
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;

      .c-site-menu__overlay {
        opacity: 1;
      }

      .c-site-menu__panel {
        transform: translateX(0);
      }
    }

    .c-site-menu__header {
      display: flex;
      justify-content: flex-end;
    }

    .c-site-menu__close {
      inline-size: 24px;
      block-size: 24px;
      border: 0;
      padding: 0;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--color-text-primary);
      cursor: pointer;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* ── ログイン・検索 ───────────── */

    .c-site-menu__actions {
      padding: 12px 8px 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .c-site-menu__login {
      block-size: 44px;
      border-radius: 100px;
      background-color: #000;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-inline: 16px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      white-space: nowrap;

      &:hover {
        background-color: var(--color-text-highlight);
      }
    }

    /* 検索入力は KeywordSearch.astro（.c-keyword-search）を共用。
   パネル背景（#f4efef）上なので入力欄だけ白背景にする */
    .c-site-menu__keyword-search {
      background-color: #fff;

      ::placeholder {
        font-size: 14px;
        translate: 0 -1px;
      }

      .c-keyword-search__clear,
      .c-keyword-search__icon {
        width: 18px;
        height: 18px;
      }
    }

    /* ── ナビ ───────────── */

    .c-site-menu__section {
      border-bottom: 1px solid #000;
      padding-bottom: 16px;
    }

    .c-site-menu__section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-block: 16px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;

      & > svg {
        flex: none;
      }
    }

    .c-site-menu__link {
      min-block-size: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 8px 8px 16px;
      font-size: 14px;
      line-height: 1.4;

      & > svg {
        flex: none;
      }

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-site-menu__link--arrow {
      font-weight: 500;
    }

    /* 展開行（ディスクロージャー）
   開閉は js（siteMenu.ts）が .is-open / aria-expanded をトグルするだけで、
   高さのアニメーションは grid-template-rows: 0fr → 1fr で行う */

    .c-site-menu__group-toggle {
      inline-size: 100%;
      min-block-size: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 8px 8px 16px;
      border: 0;
      background: transparent;
      color: inherit;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      text-align: left;
      cursor: pointer;

      & > svg {
        flex: none;
      }

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .c-site-menu__group-icon--minus {
      display: none;
    }

    .c-site-menu__group.is-open {
      .c-site-menu__group-icon--plus {
        display: none;
      }

      .c-site-menu__group-icon--minus {
        display: block;
      }
    }

    .c-site-menu__group-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.26s ease;

      & > .c-site-menu__sublist {
        overflow: hidden;
        min-block-size: 0;
      }
    }

    .c-site-menu__group.is-open .c-site-menu__group-body {
      grid-template-rows: 1fr;
    }

    @media (prefers-reduced-motion: reduce) {
      .c-site-menu__group-body {
        transition: none;
      }
    }

    .c-site-menu__sublink {
      min-block-size: 40px;
      display: flex;
      align-items: center;
      padding: 8px 8px 8px 32px;
      font-size: 14px;
      line-height: 1.4;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    /* ── SNS ───────────── */

    .c-site-menu__sns {
      padding-block: 16px;
      display: flex;
      align-items: center;
      gap: 16px;

      .c-sns-icon {
        &:hover {
          opacity: 1;
          color: var(--color-text-highlight);
        }
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-home-pickup-slider
  トップページ pickup セクション専用のカードスライダー（HomePickupSlider.astro）。
  - SP: viewport の overflow スクロール（行末に「もっとみる」カード）
  - PC: js（homePickupSlider.ts）が Swiper 化。4枚表示・4枚ずつページ送り。
        4枚以下のときは watchOverflow によりボタンが自動非表示（.swiper-button-lock）
  幅・ギャップの数値は旧 .pg-home-pickup .c-card-slider スコープの値を引き継いでいる。
---------------------------------------- */

    .c-home-pickup-slider {
      --home-pickup-slider-gap: 20px;
    }

    .c-home-pickup-slider__viewport {
      overflow-x: auto;
      scrollbar-width: none;
      padding-inline: 24px;
      padding-block-end: 4px;
    }

    .c-home-pickup-slider__viewport::-webkit-scrollbar {
      display: none;
    }

    .c-home-pickup-slider__track {
      gap: var(--home-pickup-slider-gap);
    }

    .c-home-pickup-slider .c-product-card {
      flex: 0 0 224px;
      scroll-snap-align: start;
    }

    @media screen and (width >= 769px) {
      .c-home-pickup-slider {
        inline-size: 100%;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .c-home-pickup-slider__viewport {
        overflow: hidden;
        padding-inline: 0;
        padding-block-end: 0;
      }

      .c-home-pickup-slider__track {
        /* PC は Swiper の spaceBetween（margin）で間隔を付けるため gap は使わない */
        gap: 0;
      }

      .c-home-pickup-slider .c-product-card {
        /* Swiper が inline style で width を指定するため flex-basis を無効化する */
        flex: 0 0 auto;
        scroll-snap-align: none;
      }

      .c-home-pickup-slider__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }

      .c-home-pickup-slider__nav {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .c-home-pickup-slider__nav-button {
        inline-size: 48px;
        block-size: 48px;
        border: 1px solid currentColor;
        border-radius: 999px;
        padding: 0;
        background: transparent;
        display: grid;
        place-items: center;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: opacity 0.2s ease;

        &:hover {
          color: var(--color-text-highlight);
        }

        /* Swiper (Navigation) が端で付与する */
        &.swiper-button-disabled {
          opacity: 0.3;
          pointer-events: none;
        }

        /* Swiper (watchOverflow) がスライド不要のとき付与する */
        &.swiper-button-lock {
          display: none;
        }
      }
    }
  }
}

@layer components {
  /* Modal */
}

@layer components {
  @layer molecules {
    .c-modal-shipping-status-guide {
      background-color: var(--color-bg-canvas);
    }

    .c-modal-shipping-status-guide__header {
      padding: 24px 24px 20px;
      background-color: var(--color-bg-surface);
      text-align: center;
    }

    .c-modal-shipping-status-guide__title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-shipping-status-guide__subtitle {
      margin: 4px 0 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-shipping-status-guide__steps {
      display: flex;
      flex-direction: column;
      gap: 36px;
      padding: 36px 24px;
    }

    .c-modal-shipping-status-guide__step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
    }

    .c-modal-shipping-status-guide__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-inline-size: 82px;
      padding: 4px 16px;
      border-radius: 100px;
      background-color: var(--color-brand-primary);
      color: var(--color-bg-canvas);
      font-family: var(--font-poppins);
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
    }

    .c-modal-shipping-status-guide__step-title {
      margin: 0;
      color: var(--color-brand-primary);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-shipping-status-guide__step-copy {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    @media screen and (width >= 769px) {
      .c-modal--confirmation .c-modal__panel {
        inline-size: 350px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-modal-shipping-and-costs {
      background-color: var(--color-bg-canvas);
      max-block-size: var(--modal-panel-max-height);
      overflow-y: auto;

      @media screen and (width >= 769px) {
        max-block-size: 80vh;
      }
    }

    .c-modal-shipping-and-costs__header {
      padding: 24px 24px 20px;
      background-color: var(--color-bg-surface);
      text-align: center;
    }

    .c-modal-shipping-and-costs__title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-shipping-and-costs__subtitle {
      margin: 4px 0 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-shipping-and-costs__body {
      padding: 24px 24px 20px;

      @media screen and (width >= 769px) {
        padding: 24px 40px 30px;
      }
    }

    .c-modal-shipping-and-costs__column {
      @media screen and (width >= 769px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }
    }

    .c-modal-shipping-and-costs__group {
      max-inline-size: 310px;
      margin-inline: auto;
      position: relative;
      width: 100%;
    }

    .c-modal-shipping-and-costs__group:first-child {
      padding-bottom: 16px;

      @media screen and (width >= 769px) {
        padding-bottom: 0;
      }
    }

    .c-modal-shipping-and-costs__group:not(:first-child) {
      margin-top: 24px;

      @media screen and (width >= 769px) {
        margin-top: 0;
      }
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .c-modal-shipping-and-costs.--tanpin .c-modal-shipping-and-costs__group:not(:first-child) {
      margin: 0;
    }

    .c-modal-shipping-and-costs__group-title {
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
      color: var(--color-text-highlight);
      background-color: #fff;
      border-radius: 1000px;
      border: 1px solid;
      min-height: 34px;
      padding: 2px 16px;

      span {
        display: inline-block;
        translate: 0 2px;
      }
    }

    .c-modal-shipping-and-costs__group-body {
      margin-top: 20px;
      font-size: 14px;
      letter-spacing: 0;
      font-weight: 400;
      line-height: 1.5;

      @media screen and (width >= 769px) {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 16px;
        gap: 16px;
      }

      ul {
        li {
          margin: 4px 0;
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 2px;

          svg {
            margin-block-start: 2px;
          }
        }
      }
    }

    .c-modal-shipping-and-costs__group-image {
      position: absolute;
      top: 18px;
      right: 0;
      z-index: 1;
      line-height: 0;

      @media screen and (width >= 769px) {
        position: static;
        text-align: center;
      }

      &.c-modal-shipping-and-costs__image-01 {
        img {
          @media screen and (width >= 769px) {
            width: auto;
            height: 187px;
          }
        }
      }

      &.c-modal-shipping-and-costs__image-02 {
        top: 20px;
        right: -20px;

        img {
          @media screen and (width >= 769px) {
            width: auto;
            height: 187px;
          }
        }
      }
    }

    .c-modal-shipping-and-costs__note {
      margin-top: 24px;
      font-size: 12px;
      letter-spacing: 0.02em;
      font-weight: 400;
      line-height: 1.5;
    }

    #modal-shipping-and-costs {
      .c-modal__panel {
        --modal-panel-width: 350px !important;

        @media screen and (width >= 769px) {
          --modal-panel-width: 600px !important;
        }
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-modal-product-cart {
      --modal-panel-max-height: min(calc(100dvh - 32px), 744px);
    }

    .c-modal-product-cart__content {
      flex: 1 1 auto;
      min-block-size: 0;
      overflow: auto;
      padding: 16px 16px 12px;
      background-color: var(--color-bg-canvas);
    }

    .c-modal-product-cart__scroll-wrapper {
      overflow: auto;
      max-block-size: 390px; /* magic number */

      @media screen and (width >= 769px) {
        max-block-size: 470px; /* magic number */
        padding-right: var(--scrollbar-width, 18px);
      }
    }

    .c-modal-product-cart__options {
      display: grid;
      gap: 8px;
    }

    .c-modal-product-cart__note {
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: var(--color-text-secondary);
      font-weight: 400;
      text-align: center;
      margin-top: 14px;
    }

    .c-modal-product-cart__footer {
      flex: none;
      padding: 16px 36px 20px;
      background-color: var(--color-bg-canvas);
      border-block-start: 1px solid var(--color-text-primary);
    }

    .c-modal-product-cart__button {
      inline-size: 100%;
    }

    @media screen and (width >= 769px) {
      .c-modal-product-cart__content {
        padding: 24px;
      }

      .c-modal-product-cart__options {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .c-modal-product-cart__footer {
        border-block-start: none;
        padding-top: 0;
      }

      .c-modal-product-cart__button {
        display: none;
      }

      .c-modal-product-cart__note {
        margin-top: 0;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-modal-alcohol .c-modal__panel {
      background-color: #fff;
      padding: 32px 24px;
      border-radius: 16px;
    }

    .c-modal-alcohol__content {
      text-align: center;
    }

    .c-modal-alcohol__header {
      display: grid;
      gap: 8px;
    }

    .c-modal-alcohol__title {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-alcohol__note {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-modal-alcohol__image {
      line-height: 1;
      margin-block: 24px;
    }

    .c-modal-alcohol__question {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .c-modal-alcohol__actions {
      margin-top: 30px;
      inline-size: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .c-modal-alcohol__action {
      inline-size: 100%;
    }
  }
}

@layer components {
  @layer molecules {
    /*
  ギフト説明モーダル（テーマ / タンピン共通）
  SP: 本文（画像+テキスト）がスライダー（src/scripts/modules/giftAboutModal.ts で Swiper 化）
  PC: スライド枚数ぶんのカラムの静的表示
*/

    .c-modal-gift-about {
      --modal-panel-max-height: min(100dvh - 64px, 860px);

      .c-modal__close.c-modal__close--absolute {
        @media screen and (width >= 769px) {
          inset-block-start: 0;
          inset-inline-end: -32px;
        }
      }
    }

    .c-modal-gift-about__content {
      background-color: #fff;
      max-block-size: var(--modal-panel-max-height);
      overflow-y: auto;

      @media screen and (width >= 769px) {
        padding-bottom: 20px;
      }
    }

    .c-modal-gift-about__header {
      background-color: var(--color-bg-surface);
      padding: 24px 24px 20px;
      text-align: center;
    }

    .c-modal-gift-about__title {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-gift-about__body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;

      @media screen and (width >= 769px) {
        gap: 30px;
      }
    }

    .c-modal-gift-about__lead {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;

      & > em {
        font-style: normal;
        font-weight: 700;
        color: var(--gift-about-lead-accent, #50b2d6);
      }
    }

    .c-modal-gift-about__slider {
      inline-size: 100%;
    }

    .c-modal-gift-about__slide {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .c-modal-gift-about__image {
      inline-size: 100%;
      block-size: auto;

      /* aspect-ratio: 1130 / 875; */

      /* object-fit: cover; */
    }

    .c-modal-gift-about__text {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;

      @media screen and (width >= 769px) {
        font-size: 14px;
      }

      & em {
        font-style: normal;
        font-weight: 700;
        color: var(--color-text-highlight);
      }
    }

    .c-modal-gift-about__pagination {
      display: none;
    }

    @media screen and (width >= 769px) {
      .c-modal-gift-about__track {
        display: flex;
        align-items: flex-start;
        gap: 20px;
      }

      .c-modal-gift-about__slide {
        flex: 1 1 0;
        min-inline-size: 0;
      }
    }

    @media screen and (1px <= width <= 768px) {
      .c-modal-gift-about__pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        mix-blend-mode: multiply;
      }

      /* スライドが1枚以下のとき Swiper (watchOverflow) が付与する */
      .c-modal-gift-about__pagination.swiper-pagination-lock {
        display: none;
      }

      .c-modal-gift-about__pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: rgb(128 128 128 / 50%);
      }

      .c-modal-gift-about__pagination .swiper-pagination-bullet-active {
        background-color: #000;
      }
    }
  }
}

@layer components {
  @layer molecules {
    /* ----------------------------------------
  c-modal-cart-delete-confirm
  // カート・商品詳細（theme_detail）で共用する削除確認モーダル
---------------------------------------- */

    .c-modal-cart-delete-confirm {
      max-width: 350px;
      padding: 32px 24px;
      background-color: #fff;
    }

    .c-modal-cart-delete-confirm__header {
      margin-bottom: 28px;
    }

    .c-modal-cart-delete-confirm__title {
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
    }

    .c-modal-cart-delete-confirm__buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    /* ----------------------------------------
  c-modal-cart-purchase-confirm
---------------------------------------- */

    .c-modal-cart-purchase-confirm {
      max-width: 350px;
      padding: 32px 24px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    .c-modal-cart-purchase-confirm__group {
      padding-block: 8px;
    }

    .c-modal-cart-purchase-confirm__group-header {
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .c-modal-cart-purchase-confirm__group-title {
      font-weight: 700;
    }

    .c-modal-cart-purchase-confirm__list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .c-modal-cart-purchase-confirm__list li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 8px;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.02em;

      strong {
        font-weight: 700;
        color: var(--color-status-error-primary);
      }
    }

    .c-modal-cart-purchase-confirm__submit {
      display: flex;
      justify-content: center;
    }

    /* NOTE: .c-modal-cart-purchase-confirm__submit .c-cart-button は
   .c-cart-button（pages/08_cart）との同一レイヤーでの上書き関係（カスケード）を保つため
   pages/08_cart/_00_common.css に残している */

    /* ----------------------------------------
  c-modal-cart-purchase-confirm-other
  // id="modal-cart-purchase-confirm-sold"
  // id="modal-cart-purchase-confirm-stockout"
  // で使用するスタイル
---------------------------------------- */

    .c-modal-cart-purchase-confirm-other {
      max-width: 350px;
      padding: 32px 24px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 26px;
      text-align: center;
    }

    .c-modal-cart-purchase-confirm-other__header {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-modal-cart-purchase-confirm-other__body {
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.02em;

      & > p:not(:last-child) {
        margin-block-end: 1.5em;
      }

      strong {
        font-weight: 700;
        color: var(--color-status-error-primary);
      }
    }

    /* NOTE: .c-modal-cart-purchase-confirm-other__submit .c-cart-button は
   .c-cart-button（pages/08_cart）との同一レイヤーでの上書き関係（カスケード）を保つため
   pages/08_cart/_00_common.css に残している */
  }
}

@layer components {
  /* CMS */
}

@layer components {
  @layer molecules {
    /* CMSエリア（.c-cms） */

    .c-cms {
      padding-block: 8px;
      width: 100%;
    }

    /* 要素間の余白は gap ではなく隣接兄弟マージンで管理する。
   既定マージンの除去は :where() で詳細度を落とし、後続ルールと衝突させない */
    .c-cms > :where(*) {
      margin: 0;
    }

    .c-cms > * + * {
      margin-block-start: 24px;
    }

    .c-cms > h2 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-cms > h3 {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .c-cms > p {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    .c-cms > ul,
    .c-cms > ol {
      padding: 0;
      margin-inline-start: 24px;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    .c-cms > ul {
      list-style: disc;
    }

    .c-cms > ol {
      list-style: decimal;
    }

    .c-cms > p:has(> img),
    .c-cms > figure {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .c-cms > p:has(> img) > img,
    .c-cms > figure > img {
      display: block;
      width: 100%;
      aspect-ratio: 1200 / 900;
      object-fit: cover;
    }

    .c-cms > p:has(> img) > img + span,
    .c-cms > p:has(> img) > img + caption,
    .c-cms > figure > figcaption {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.7;
      color: #808080;
      letter-spacing: 0.02em;
    }
  }
}

@layer components {
  @layer molecules {
    .c-spec {
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.5; /* 21px */
      letter-spacing: 0.02em;

      @media screen and (width >= 769px) {
        background-color: var(--color-bg-surface);
        padding: 32px;
        border-radius: 20px;
      }
    }

    .c-spec > h2 {
      margin-block-end: 8px;
      font-size: 16px;
    }

    .c-spec > h2:not(:first-child) {
      margin-block-start: 32px;
    }
  }
}

@layer components {
  /* Molecules section */
}

@layer components {
  @layer molecules {
    .c-section-related-items {
      padding: 50px 0;

      @media screen and (width >= 769px) {
        padding: 60px 0;
      }

      .l-inner {
        @media screen and (1px <= width <= 768px) {
          padding: 0;
        }
      }

      .c-card-slider {
        gap: 16px;

        @media screen and (width >= 769px) {
          /* justify-content: center; */
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 36px;
        }
      }

      .c-product-card {
        flex: 0 0 160px;
        scroll-snap-align: start;

        @media screen and (width >= 769px) {
          flex: 0 0 224px;
        }
      }
    }

    .c-section-related-items__slider {
      margin-top: 40px;

      @media screen and (width >= 769px) {
        margin-top: 40px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-editors-picks {
      padding: 50px 0;

      @media screen and (width >= 769px) {
        padding: 60px 0;
      }

      .l-inner {
        @media screen and (1px <= width <= 768px) {
          padding: 0;
        }
      }

      .c-card-slider {
        gap: 16px;

        @media screen and (width >= 769px) {
          justify-content: center;
        }
      }

      .c-feature-card {
        --c-feature-card-corner-bg: var(--color-bg-canvas);

        flex: 0 0 230px;
        scroll-snap-align: start;

        @media screen and (width >= 769px) {
          flex: 1 0 0;
          scroll-snap-align: none;
        }
      }
    }

    .c-section-editors-picks__slider {
      margin-top: 40px;

      @media screen and (width >= 769px) {
        margin-top: 40px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-howto-tanpin {
      --inner-width: 700px;

      padding-block: 60px 60px;
      background-color: var(--color-support-cyan-secondary);
    }

    .c-section-howto-tanpin__heading {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      margin-bottom: 60px;
    }

    .c-section-howto-tanpin__eyebrow {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-block-size: 31px;
      padding: 10px 20px;
      border: 1px solid var(--color-text-primary);
      border-radius: 100px;
      background-color: #d7f1fb;
      font-family: var(--font-poppins);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      color: var(--color-text-primary);
    }

    .c-section-howto-tanpin__eyebrow svg {
      position: absolute;
      inset-block-start: calc(100% - 1px);
      inset-inline-start: 50%;
      inline-size: 14px;
      block-size: 13px;
      transform: translateX(-50%);
    }

    .c-section-howto-tanpin__title-visual--pc {
      display: none;

      @media screen and (width >= 769px) {
        display: block;
      }
    }

    .c-section-howto-tanpin__title-visual--sp {
      display: block;

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .c-section-howto-tanpin__cards {
      .c-howto-card:not(:last-child) {
        margin-bottom: 60px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-howto-theme {
      --inner-width: 700px;
      padding-block: 60px 60px;
      background-color: var(--color-support-cyan-secondary);
    }

    .c-section-howto-theme__heading {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      margin-bottom: 60px;
    }

    .c-section-howto-theme__eyebrow {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-block-size: 31px;
      padding: 10px 20px;
      border: 1px solid var(--color-text-primary);
      border-radius: 100px;
      background-color: #d7f1fb;
      font-family: var(--font-poppins);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      color: var(--color-text-primary);
    }

    .c-section-howto-theme__eyebrow svg {
      position: absolute;
      inset-block-start: calc(100% - 1px);
      inset-inline-start: 50%;
      inline-size: 14px;
      block-size: 13px;
      transform: translateX(-50%);
    }

    .c-section-howto-theme__title-visual--pc {
      display: none;

      @media screen and (width >= 769px) {
        display: block;
      }
    }

    .c-section-howto-theme__title-visual--sp {
      display: block;

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .c-section-howto-theme__cards {
      .c-howto-card:not(:last-child) {
        margin-bottom: 60px;
      }
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-shopping-guide {
      background-color: var(--color-bg-surface);
      padding-block: 50px;

      .l-inner {
        --inner-width: 900px;
      }
    }

    .c-section-shopping-guide__title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .c-section-shopping-guide__title > span {
      flex: 1;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.5;
    }

    .c-section-shopping-guide__content {
      border-top: 1px solid var(--color-text-primary);

      /* .c-accordion__body li:not(:last-child) {
    margin-block-end: 1em;
  } */
    }

    .c-section-shopping-guide__card-list {
      /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(106px, 1fr)); */
      display: flex;
      /* flex-wrap: wrap; */
      justify-content: center;
      gap: 8px;
      margin-block: 24px;

      @media screen and (width >= 769px) {
        justify-content: flex-start;
      }
    }

    .c-section-shopping-guide__card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      max-width: 106px;
      width: 33%;

      @media screen and (width >= 769px) {
        gap: 8px;
        padding-block: 16px;
      }
    }

    .c-section-shopping-guide__card-image {
      line-height: 0;
    }

    .c-section-shopping-guide__button {
      margin-top: 24px;
      text-align: right;
    }

    .c-section-shopping-guide__button .c-button {
      padding-inline: 24px;
    }
  }
}

@layer components {
  @layer molecules {
    .c-section-search {
      background-color: var(--color-bg-surface);
      padding-block: 60px 80px;
    }

    .c-section-search__inner {
      max-inline-size: var(--inner-width);
      margin-inline: auto;
      padding-inline: 24px;
      display: flex;
      flex-direction: column;
      gap: 32px;

      @media screen and (width >= 769px) {
        padding-inline: 0;
        gap: 74px;
      }
    }
  }
}

@layer components {
  /* header, footer */
}

@layer components {
  @layer header {
    .c-site-header {
      background-color: var(--color-brand-primary);
      min-height: 60px;
      padding-inline: 16px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      border-bottom: 1px solid #000;

      @media screen and (width >= 769px) {
        min-height: 68px;
        padding-inline: 65px;
      }
    }

    .c-site-header__logo {
      line-height: 0;
    }

    .c-site-header__nav {
      display: flex;
      justify-content: flex-end;
    }

    .header-logo {
      display: inline-block;

      &:hover {
        opacity: 0.7;
      }
    }

    .c-header-nav-sp {
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 0;

      @media screen and (1px <= width <= 768px) {
        display: flex;
      }

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .c-header-nav-sp a,
    .c-header-nav-sp button,
    .c-header-nav-pc a,
    .c-header-nav-pc button {
      color: #000;
      line-height: 0;
    }

    .c-header-nav-sp__icon {
      display: inline-block;
    }

    .c-header-nav-pc {
      display: flex;
      align-items: center;
      gap: 16px;
      line-height: 0;

      @media screen and (1px <= width <= 768px) {
        display: none;
      }

      @media screen and (width >= 769px) {
        display: flex;
      }

      button:not([class]),
      a:not([class]) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    .c-menu-button {
      margin-right: 4px;
      display: inline-flex;
      padding: 12px 24px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 1000px;
      border: 1px solid;

      &:hover {
        background-color: #ffffff80;
      }
    }

    .c-menu-button__icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 0;
    }

    .c-header-nav-pc__icon {
      display: inline-block;
    }

    .c-menu-button__text {
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%; /* 14px */
      letter-spacing: 0.28px;
    }
  }
}

@layer components {
  @layer header {
    .c-site-header-top {
      background-color: var(--color-brand-primary);
      min-height: 98px;
      position: relative;
      z-index: 2;
    }

    .c-site-header-top__inner {
      min-height: 98px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      max-inline-size: none;
      padding-inline: 65px;
    }

    .c-site-header-top__tagline {
      margin: 0;
      font-family: var(--font-jp);
      font-size: 18px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.04em;
      color: var(--color-text-primary);
      white-space: nowrap;
      position: relative;
      z-index: 2;
    }

    .c-site-header-top__logo {
      position: absolute;
      left: 50%;
      top: 22px;
      transform: translateX(-50%);
      line-height: 0;
      transition:
        all 0s,
        opacity 0s;
    }

    .c-site-header-top__logo img {
      width: 206px;
      height: auto;
      display: block;
    }

    .c-site-header-top__nav {
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
      z-index: 2;
    }

    .c-site-header-top__guide-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 48px;
      padding-inline: 24px;
      border: 1px solid var(--color-text-primary);
      border-radius: 1000px;
      color: var(--color-text-primary);
      text-decoration: none;
      background-color: transparent;
      transition: background-color 0s;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .c-site-header-top__guide-button:hover {
      background-color: rgb(255 255 255 / 35%);
    }

    .c-site-header-top__guide-icon {
      flex-shrink: 0;
    }

    .c-site-header-top__icons {
      display: flex;
      align-items: center;
      gap: 16px;
      line-height: 0;
    }

    .c-site-header-top__icons--sp {
      display: none;
    }

    .c-site-header-top__icons a {
      color: var(--color-text-primary);
      line-height: 0;
    }

    .c-site-header-top__icons button {
      color: var(--color-text-primary);
      line-height: 0;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    @media screen and (1px <= width <= 768px) {
      .c-site-header-top {
        min-height: 60px;
      }

      .c-site-header-top__inner {
        min-height: 60px;
        justify-content: flex-end;
        padding-inline: 16px;
      }

      .c-site-header-top__tagline {
        display: none;
      }

      .c-site-header-top__logo {
        position: absolute;
        left: 12px;
        top: 16px;
        transform: none;
        z-index: 3;
      }

      .c-site-header-top__logo img {
        width: 153px;
        height: 72px;
      }

      .c-site-header-top__nav {
        gap: 12px;
      }

      .c-site-header-top__nav--pc {
        display: none;
      }

      .c-site-header-top__icons--sp {
        display: flex;
        gap: 12px;
        position: relative;
        z-index: 2;
      }

      .c-site-header-top__guide-button {
        display: none;
      }

      .c-site-header-top__icons .c-site-header-top__icon {
        width: 24px;
        height: 24px;
      }
    }
  }
}

@layer components {
  @layer footer {
    /* ── Outer wrapper ── */
    .c-footer {
      background-color: #000;
      color: #fff;
      width: 100%;
    }

    .c-footer__content {
      padding: 44px 30px 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }

    /* ── Brand block: logo + SNS ── */
    .c-footer__brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;
    }

    .c-footer__logo {
      display: block;
    }

    .c-footer__sns-list {
      display: flex;
      align-items: center;
      gap: 20px;
      list-style: none;
      margin: 0;
      padding: 0;

      li a {
        &:hover {
          opacity: 1;
          color: var(--color-text-highlight);
        }
      }
    }

    .c-footer__sns-item {
      display: flex;
    }

    .c-footer__sns-item .c-sns-icon {
      color: #fff;
    }

    /* ── Main navigation ── */
    .c-footer__nav-main-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      list-style: none;
      margin: 0;
      padding: 12px 0;
    }

    .c-footer__nav-main-link {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.32px;
    }

    .c-footer__nav-main-link:hover {
      color: var(--color-brand-primary);
    }

    /* ── Sub navigation ── */
    .c-footer__nav-sub-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .c-footer__nav-sub-item {
      display: flex;
      align-items: center;
    }

    /* .c-footer__nav-sub-item + .c-footer__nav-sub-item:not(:last-child)::after { */
    .c-footer__nav-sub-item:not(:last-child)::after {
      content: "｜";
      color: #fff;
      font-size: 14px;
      line-height: 1.5;
      padding: 0 8px;
    }

    .c-footer__nav-sub-link {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.28px;
    }

    .c-footer__nav-sub-link:hover {
      color: var(--color-brand-primary);
    }

    /* ── Payment icons ── */
    .c-footer__payment {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;

      /* hide scrollbar visually */
      scrollbar-width: none;
    }

    .c-footer__payment::-webkit-scrollbar {
      display: none;
    }

    .c-footer__payment-icon {
      flex-shrink: 0;
      width: 28px;
      height: 17.5px;
      background-color: #b2b2b2;
      border-radius: 2px;
    }

    /* ── Copyright ── */
    .c-footer__copyright {
      width: 100%;
      border-top: 1px solid #fff;
      padding: 16px 30px;
      text-align: center;
    }

    .c-footer__copyright small {
      font-family: var(--font-poppins);
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      color: #fff;
    }
  }
}

@layer pages {
  /* ===== FV (First View) — SP base ===== */

  .pg-home-fv {
    --fv-rail-track-width: 50px;
    --fv-rail-duration: 22s;
    position: relative;
    background-color: var(--color-brand-primary);
  }

  .pg-home-fv__hero {
    display: grid;

    /* block-size: calc(100svh - var(--header-height, 60px) - 30px); */
    block-size: 600px;

    /* min-block-size: 600px; */

    /* SP: [images][right-rail] */
    grid-template-columns: 1fr 30px;
    grid-template-areas: "kv rail-right";
    align-items: stretch;
  }

  /* ---- Images ---- */

  .pg-home-fv__kv-wrap {
    grid-area: kv;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .pg-home-fv__kv {
    height: 100%;
    position: relative;
    z-index: 0;
  }

  .pg-home-fv__kv .swiper,
  .pg-home-fv__kv .swiper-wrapper,
  .pg-home-fv__kv .swiper-slide {
    block-size: 100%;
  }

  .pg-home-fv__kv-slide picture {
    display: block;
    block-size: 100%;
  }

  .pg-home-fv__kv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- Vertical rails ---- */

  .pg-home-fv__rail {
    overflow: hidden;
    position: relative;
  }

  .pg-home-fv__rail--left {
    display: none; /* hidden on SP */
    grid-area: rail-left;
  }

  .pg-home-fv__rail--right {
    grid-area: rail-right;
  }

  /* Two groups stacked vertically — seamless infinite scroll */
  .pg-home-fv__rail-track {
    display: flex;
    flex-direction: column;
    block-size: max-content;
  }

  .pg-home-fv__rail-track--up {
    animation: fv-rail-up var(--fv-rail-duration) linear infinite;
  }

  .pg-home-fv__rail-track--down {
    animation: fv-rail-down var(--fv-rail-duration) linear infinite;
  }

  .pg-home-fv__rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 8px;
  }

  .pg-home-fv__rail-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-family: var(--font-jp), var(--font-en);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    writing-mode: sideways-rl;
    white-space: nowrap;
    line-height: 1;
  }

  .pg-home-fv__rail-icon {
    color: #fff;
    flex-shrink: 0;
    rotate: 90deg;
  }

  /* ---- Info panel ---- */

  .pg-home-fv__info {
    position: absolute;
    inset-inline: 20px;
    inset-block-end: 25px;
    width: calc(100vw - 40px);
  }

  /* ---- Search sticker (hidden on SP) ---- */

  .pg-home-fv__search-sticker {
    display: none;
  }

  /* ===== Animations ===== */

  /* Scrolls upward: 0 → -50% */
  @keyframes fv-rail-up {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-50%);
    }
  }

  /* Scrolls downward: -50% → 0 */
  @keyframes fv-rail-down {
    from {
      transform: translateY(-50%);
    }

    to {
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-home-fv__rail-track {
      animation: none;
    }
  }

  /* ===== PC ===== */

  @media screen and (width >= 769px) {
    .pg-home-fv {
      /* height: auto; */
    }

    .pg-home-fv__hero {
      /* max-inline-size: 1280px; */
      margin-inline: auto;

      /* min-block-size: calc(100vh - var(--header-height, 98px) - 50px); */
      block-size: 630px;

      /* PC: [left-rail][images][right-rail] */
      grid-template-columns: 50px 1fr 50px;
      grid-template-areas: "rail-left kv rail-right";
    }

    .pg-home-fv__rail--left {
      display: block;
    }

    .pg-home-fv__info {
      inset-inline: calc(36px + var(--fv-rail-track-width)) var(--fv-rail-track-width);
      inset-block-end: 30px;
      inline-size: 522px;
    }

    /* Search sticker */
    .pg-home-fv__search-sticker {
      display: block;
      position: absolute;
      z-index: 1;
      bottom: 19px;
      right: 19px;
    }

    .fv-search-sticker {
      width: 176px;
      display: inline-block;
      transition: translate 0.3s;
    }

    .fv-search-sticker:hover {
      translate: 0 -5px;
    }

    .fv-search-sticker__inner {
      width: 100%;
      height: 100%;
      aspect-ratio: 1;
      display: block;
      position: relative;
    }

    .fv-search-sticker__inner img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .fv-search-sticker__inner img:first-child {
      animation: rotation 40s infinite linear;
    }

    .fv-search-sticker:hover .fv-search-sticker__inner img:first-child {
      animation-play-state: paused;
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
  }
}

@layer pages {
  .pg-home-pickup {
    padding-block: 60px;
  }

  .pg-home-pickup__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .pg-home-section-title {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pg-home-section-title__subtitle {
    font-weight: 700;
    letter-spacing: 0.02em;
    padding-block: 4px;
    text-align: center;
  }

  .pg-home-section-title__heading {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-jp);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--color-text-primary);
  }

  .pg-home-pickup__info-btn {
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--color-link-primary);
  }

  /* ── Tabblock (汎用 — タブ + コンテンツの切り替えブロック) ── */
  .pg-home-tabblock {
    display: flex;
    flex-direction: column;
    gap: 0;
    inline-size: 100%;
  }

  .pg-home-tabblock__contents {
    margin-inline: -24px;
  }

  @media screen and (width >= 769px) {
    .pg-home-tabblock__contents {
      margin-inline: 0;
    }
  }

  .pg-home-tabblock__panel {
    display: none;
  }

  .pg-home-tabblock__panel.is-active {
    display: block;
  }

  /* ── Tabs ── */
  .pg-home-pickup__tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 20px;

    /* Extend past inner padding to reach section edges on SP */
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .pg-home-pickup__tabs::-webkit-scrollbar {
    display: none;
  }

  .pg-home-pickup__tab {
    appearance: none;
    background: none;
    border: none;
    border-block-end: 1px solid var(--color-text-primary);
    padding: 16px 14px;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #4d4d4d;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;

    &:hover {
      color: var(--color-text-highlight);
    }
  }

  .pg-home-pickup__tab.is-active {
    border-block-end: 2px solid var(--color-text-primary);
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    font-weight: 900;
    color: var(--color-text-primary);

    /* padding-inline: 16px; */
  }

  .pg-home-pickup--theme {
    padding-top: 80px;
  }

  .pg-home-pickup--theme .pg-home-pickup__tab.is-active {
    background-color: var(--color-support-cyan-secondary);
  }

  .pg-home-pickup--tanpin .pg-home-pickup__tab.is-active {
    background-color: var(--color-support-orange-secondary);
  }

  /* ── "もっとみる" ── */
  .pg-home-pickup__more-sp {
    flex: 0 0 120px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-primary);
    scroll-snap-align: start;
  }

  .pg-home-pickup__more-pc {
    display: none;
  }

  .pg-home-pickup__more-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border: 1px solid currentColor;
    border-radius: 100px;
  }

  .pg-home-pickup__more-text {
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  @media screen and (width >= 769px) {
    .pg-home-pickup__inner {
      padding-inline: 0;
      align-items: center;
    }

    .pg-home-section-title {
      gap: 16px;
    }

    .pg-home-section-title__subtitle {
      font-size: 18px;
      letter-spacing: 0.02em;
    }

    .pg-home-section-title__heading {
      font-size: 36px;
    }

    .pg-home-pickup__tabs {
      inline-size: 100%;
      overflow-x: visible;
      margin-inline: 0;
      padding-inline: 0;
      margin-bottom: 36px;
    }

    .pg-home-pickup__tab {
      flex: 1 0 0;
      text-align: center;
    }

    .pg-home-pickup__more-sp {
      display: none;
    }

    .pg-home-pickup__more-pc {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--color-text-primary);

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .pg-home-pickup__more-pc .pg-home-pickup__more-circle {
      inline-size: 26px;
      block-size: 26px;
    }

    .pg-home-pickup__more-pc .pg-home-pickup__more-text {
      font-weight: 500;
      font-size: 16px;
      line-height: 1;
    }
  }
}

@layer pages {
  .pg-home-search-guide {
    background-color: var(--color-bg-surface);
    padding-block: 60px;
  }
}

@layer pages {
  .pg-home-features {
    padding-block: 60px;
    background-color: var(--color-bg-canvas);
  }

  .pg-home-features__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Slider wrapper: negative margin so slider bleeds to screen edges on SP */
  .pg-home-features__slider-wrap {
    margin-inline: -24px;
  }

  /* FeatureCard sizing inside this slider context */
  .pg-home-features .c-feature-card {
    --c-feature-card-corner-bg: var(--color-bg-canvas);

    flex: 0 0 230px;
    scroll-snap-align: start;
  }

  /* "もっとみる" — SP (last item inside scroll) */
  .pg-home-features__more-sp {
    flex: 0 0 120px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-primary);
    scroll-snap-align: start;
  }

  .pg-home-features__more-pc {
    display: none;
  }

  .pg-home-features__more-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border: 1px solid currentColor;
    border-radius: 100px;
  }

  .pg-home-features__more-text {
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  @media screen and (width >= 769px) {
    .pg-home-features__inner {
      padding-inline: 0;
      align-items: center;
    }

    .pg-home-features__slider-wrap {
      inline-size: 100%;
      margin-inline: 0;
    }

    .pg-home-features .c-feature-card {
      flex: 1 0 0;
      scroll-snap-align: none;
    }

    .pg-home-features__more-sp {
      display: none;
    }

    .pg-home-features__more-pc {
      display: flex;
      align-self: flex-end;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--color-text-primary);

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .pg-home-features__more-pc .pg-home-features__more-circle {
      inline-size: 26px;
      block-size: 26px;
    }

    .pg-home-features__more-pc .pg-home-features__more-text {
      font-weight: 500;
      font-size: 16px;
      line-height: 1;
    }
  }
}

@layer pages {
  .pg-home-howto {
    padding-block: 60px 80px;
    background-color: var(--color-support-cyan-secondary);
  }

  .pg-home-howto__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .pg-home-howto__title {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
  }

  .pg-home-howto__eyebrow {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-block-size: 31px;
    padding: 10px 20px;
    border: 1px solid var(--color-text-primary);
    border-radius: 100px;
    background-color: #d7f1fb;
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-primary);
  }

  .pg-home-howto__eyebrow svg {
    position: absolute;
    inset-block-start: calc(100% - 1px);
    inset-inline-start: 50%;
    inline-size: 14px;
    block-size: 13px;
    transform: translateX(-50%);
  }

  .pg-home-howto__grid {
    inline-size: 100%;

    /* grid-template-columns: 1fr; */
  }

  .pg-home-howto__grid-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .pg-home-howto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 16px 24px;
    border: 1px solid var(--color-text-primary);
    border-radius: 0 20px 20px;
    background-color: var(--color-bg-canvas);
    margin-bottom: 60px;
  }

  .pg-home-howto-card--methods {
    gap: 30px;
  }

  .pg-home-howto-card--options {
    padding-inline: 0;
    margin-bottom: 0;
  }

  .pg-home-howto-card__heading {
    font-family: var(--font-jp);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-home-howto-card--options .pg-home-howto-card__heading {
    margin-bottom: 30px;

    @media screen and (width >= 769px) {
      margin-bottom: 0;
    }
  }

  .pg-home-howto-card__label {
    position: absolute;
    inset-block-start: -28px;
    inset-inline-start: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 28px;
    padding: 6px 16px 5px;
    border: 1px solid var(--color-text-primary);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    background-color: #f0a15e;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
  }

  .pg-home-howto__gift-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }

  .pg-home-howto__gift-type {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .pg-home-howto__gift-figure {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 102px;
  }

  .pg-home-howto__gift-figure--theme img:first-child {
    inline-size: 84px;
    block-size: 102px;
  }

  .pg-home-howto__gift-question {
    position: absolute;
    inset-block-start: 33px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-family: var(--font-poppins);
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
  }

  .pg-home-howto__gift-figure--single img:first-child {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: calc(50% + 8px);
    inline-size: 57px;
    block-size: auto;
    transform: rotate(10deg);
    transform-origin: center;
  }

  .pg-home-howto__gift-figure--single img:last-child {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% - 67px);
    inline-size: 96px;
    block-size: auto;
    transform: rotate(-20deg);
    transform-origin: center;
  }

  .pg-home-howto__gift-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    inline-size: 100%;
  }

  .pg-home-howto__pill {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-block-size: 34px;
    inline-size: 100%;
    padding: 3px 12px 5px;
    border: 1px solid var(--color-text-primary);
    border-radius: 100px;
    background-color: #f7ef7a;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-home-howto__caption {
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .pg-home-howto__methods {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-inline: 12px;
    padding-bottom: 40px;

    @media screen and (width >= 769px) {
      gap: 40px;
      padding-inline: 0;
      padding-bottom: 0;
    }
  }

  .pg-home-howto__method {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }

  .pg-home-howto__method-pill {
    position: relative;
    overflow: visible;
    padding-inline: 20px;
  }

  .pg-home-howto__method-figure {
    position: absolute;
    z-index: 1;
    inset-inline-end: -13px;
    inset-block-start: 14px;

    /* pointer-events: none; */
  }

  .pg-home-howto__method-figure--02 {
    inset-inline-end: -50px;
  }

  .pg-home-howto__bullets {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pg-home-howto__bullet {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 2px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .pg-home-howto__bullet-icon {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    margin-top: 4px;
  }

  .pg-home-howto__bullet-icon path,
  .pg-home-howto__bullet-icon circle {
    stroke: var(--color-text-primary);
  }

  .pg-home-howto__options-wrap {
    /* カードの padding-inline: 16px を打ち消して画面端まで広げる */

    /* margin-inline: -16px; */
    overflow: hidden;
  }

  .pg-home-howto__options {
    display: flex;
    gap: 16px;
    overflow: auto clip;
    scrollbar-width: none;
  }

  .pg-home-howto__options::before,
  .pg-home-howto__options::after {
    content: "";
    flex: 0 0 16px;
  }

  .pg-home-howto__option {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .pg-home-howto__option-image {
    display: block;
    inline-size: 100%;
    max-inline-size: 200px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
  }

  .pg-home-howto__option-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    inline-size: 100%;

    @media screen and (width >= 769px) {
      gap: 10px;
    }
  }

  .pg-home-howto__option-price {
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  .pg-home-howto__link-text--pc {
    display: none;
  }

  .pg-home-howto__link-text--sp {
    display: inline;
  }

  .pg-home-howto__link {
    align-self: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    &:hover {
      color: var(--color-text-highlight);
    }
  }

  @media screen and (1px <= width <= 768px) {
    .pg-home-howto__link {
      align-self: center;
      justify-content: center;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--color-text-primary);
      font-family: var(--font-jp);
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
      border-bottom: 1px solid var(--color-text-primary);
      padding: 6px 0;
    }

    .pg-home-howto__link-circle svg {
      width: 16px;
      height: 16px;
    }

    .pg-home-howto-card--options .pg-home-howto-card__wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .pg-home-howto-card--options .pg-home-howto__link {
      margin-top: 30px;
    }
  }

  @media screen and (width >= 769px) {
    .pg-home-howto__link {
      align-self: flex-end;
      justify-content: flex-start;
    }

    .pg-home-howto__link-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 26px;
      block-size: 26px;
      border: 1px solid currentColor;
      border-radius: 100px;
    }
  }

  @media screen and (width >= 769px) {
    .pg-home-howto {
      padding-block: 60px 80px;
    }

    .pg-home-howto__inner {
      padding-inline: 0;
      gap: 60px;
    }

    .pg-home-howto__title {
      inline-size: 100%;
    }

    .pg-home-howto__grid {
      gap: 60px;
      display: grid;
      grid-template-areas: "gifts methods" "options options";
      grid-template-columns: 1fr 1fr;
      align-items: self-start;
    }

    .pg-home-howto-card {
      padding: 32px 20px 24px;
      margin: 0;
    }

    .pg-home-howto-card--methods {
      padding: 32px 16px 40px;
    }

    .pg-home-howto-card--options {
      max-width: 712px;
      width: 100%;
      margin: 0 auto;
      padding: 32px 40px;
      grid-area: options;
    }

    .pg-home-howto-card--options .pg-home-howto-card__wrapper {
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
    }

    .pg-home-howto__gift-types {
      gap: 0;
    }

    .pg-home-howto__gift-type {
      gap: 20px;
    }

    .pg-home-howto__gift-copy {
      padding-inline: 8px;
    }

    .pg-home-howto__method {
      gap: 20px;
      padding-inline: 16px;
    }

    .pg-home-howto__method-figure {
      inset-inline-end: 10px;
      inset-block-start: 12px;
    }

    .pg-home-howto__method-figure--02 {
      inset-inline-end: 10px;
      inset-block-start: 12px;
    }

    .pg-home-howto__options-wrap {
      margin-inline: 0;
      overflow: visible;
    }

    .pg-home-howto__options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      inline-size: 100%;
      overflow-x: visible;
    }

    .pg-home-howto__options::before,
    .pg-home-howto__options::after {
      display: none;
    }

    .pg-home-howto__option {
      flex: unset;
      inline-size: 200px;
      gap: 16px;
    }

    .pg-home-howto__link {
      align-self: flex-end;
      justify-content: flex-start;
    }

    .pg-home-howto__link-text--pc {
      display: inline;
    }

    .pg-home-howto__link-text--sp {
      display: none;
    }

    .pg-home-howto__option-price {
      white-space: nowrap;
    }
  }
}

@layer pages {
  .pg-home-category {
    background-color: var(--color-bg-surface);
    padding-block: 60px;
  }
}

@layer pages {
  .pg-home-editor-picks {
    background-color: var(--color-bg-canvas);
    padding-block: 60px 36px;
  }

  .pg-home-editor-picks__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .pg-home-editor-picks__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-inline: 4px;
    color: var(--color-text-primary);
  }

  .pg-home-editor-picks__subtitle {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-home-editor-picks__title {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
  }

  .pg-home-editor-picks__subtitle--pc,
  .pg-home-editor-picks__title--pc {
    display: none;
  }

  .pg-home-editor-picks__groups {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pg-home-editor-picks__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-home-editor-picks__group-head {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    position: relative;

    /* border-bottom: 1px solid var(--color-text-primary); */

    padding-inline: 20px 12px;

    &::after {
      position: absolute;
      left: var(--inner-padding);
      content: "";
      display: block;
      flex: 1 1 auto;
      background-color: var(--color-text-primary);
      height: 1px;
      width: calc(100% - var(--inner-padding));
    }
  }

  .pg-home-editor-picks__group-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px 4px;
    font-family: var(--font-jp);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-home-editor-picks__more-pc {
    display: none;
  }

  .pg-home-editor-picks__slider-wrap {
    inline-size: 100%;
  }

  .pg-home-editor-picks__slider {
    --c-card-slider-gap: 20px;

    padding-inline: 20px;
    padding-block-end: 0;
  }

  .pg-home-editor-picks__product {
    flex: 0 0 224px;
    scroll-snap-align: start;
  }

  .pg-home-editor-picks__more-sp {
    flex: 0 0 120px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-primary);
    scroll-snap-align: start;
  }

  .pg-home-editor-picks__more-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    border: 1px solid currentColor;
    border-radius: 100px;
  }

  .pg-home-editor-picks__more-circle--sp {
    inline-size: 48px;
    block-size: 48px;
  }

  .pg-home-editor-picks__more-text {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  @media screen and (width >= 769px) {
    .pg-home-editor-picks {
      padding-block: 80px 36px;
    }

    .pg-home-editor-picks__title-wrap {
      gap: 16px;
    }

    .pg-home-editor-picks__subtitle {
      font-size: 18px;
    }

    .pg-home-editor-picks__subtitle--sp,
    .pg-home-editor-picks__title--sp {
      display: none;
    }

    .pg-home-editor-picks__subtitle--pc,
    .pg-home-editor-picks__title--pc {
      display: inline;
    }

    .pg-home-editor-picks__groups {
      gap: 56px;
      padding-block: 0 40px;
    }

    .pg-home-editor-picks__group {
      gap: 36px;
    }

    .pg-home-editor-picks__group-head {
      border-bottom: 1px solid var(--color-text-primary);
      padding-inline: 0 12px;
      gap: 10px;

      &::after {
        display: none;
      }
    }

    .pg-home-editor-picks__more-pc {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding-block: 8px;
      text-decoration: none;
      color: var(--color-text-primary);
      font-family: var(--font-jp);
      font-size: 16px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.02em;
      white-space: nowrap;

      &:hover {
        color: var(--color-text-highlight);
      }
    }

    .pg-home-editor-picks__slider {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 36px;
      overflow-x: visible;
      padding-inline: 0;
    }

    .pg-home-editor-picks__product {
      flex: 1 1 auto;
      min-inline-size: 0;
    }

    .pg-home-editor-picks__more-sp {
      display: none;
    }
  }
}

@layer pages {
  .pg-home-mag {
    background-color: var(--color-bg-surface);
    padding-block: 60px;
  }

  .pg-home-mag__inner {
    /* max-inline-size: calc(var(--inner-width) + var(--inner-padding) * 2); */
    margin-inline: auto;

    /* padding-inline: var(--inner-padding); */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .pg-home-mag__title-wrap {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .pg-home-mag__subtitle {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-text-primary);
  }

  .pg-home-mag__logo {
    display: block;
    inline-size: 208px;
    block-size: auto;
  }

  .pg-home-mag__slider-wrap {
    inline-size: 100%;
    overflow: hidden;
  }

  .pg-home-mag__slider {
    --c-card-slider-gap: 24px;

    padding-inline: var(--inner-padding);
    padding-block-end: 0;
  }

  .pg-home-mag__card {
    --c-magazine-card-corner-bg: var(--color-bg-surface);

    flex: 0 0 300px;
    scroll-snap-align: start;
  }

  .pg-home-mag__more {
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text-primary);
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;

    &:hover {
      color: var(--color-text-highlight);
    }
  }

  .pg-home-mag__more--sp {
    flex: 0 0 120px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    scroll-snap-align: start;
  }

  .pg-home-mag__more-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    border: 1px solid currentColor;
    border-radius: 100px;
  }

  .pg-home-mag__more-circle--sp {
    inline-size: 48px;
    block-size: 48px;
  }

  .pg-home-mag__more-text {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  @media screen and (width >= 769px) {
    .pg-home-mag {
      padding-block: 80px;
    }

    .pg-home-mag__inner {
      max-inline-size: calc(var(--inner-width) + var(--inner-padding) * 2);
      margin-inline: auto;
      padding-inline: var(--inner-padding);
      gap: 40px;
      align-items: flex-end;
    }

    .pg-home-mag__title-wrap {
      gap: 17px;
    }

    .pg-home-mag__more {
      align-self: flex-end;
      display: inline-flex;
    }

    .pg-home-mag__more--sp {
      display: none;
    }

    .pg-home-mag__slider {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      overflow-x: visible;
      inline-size: 100%;
    }

    .pg-home-mag__card {
      flex: 1 1 auto;
      min-inline-size: 0;
    }
  }
}

@layer pages {
  .pg-home-app-intro {
    background-color: var(--color-brand-secondary);
    padding-block: 60px;
  }

  .pg-home-app-intro__inner {
    /* max-inline-size: var(--inner-width); */
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ---- Title ---- */

  .pg-home-app-intro__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
  }

  @media screen and (width >= 769px) {
    .pg-home-app-intro__title-wrap {
      margin-bottom: 52px;
    }
  }

  .pg-home-app-intro__speech-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: #afecd4;
    border: 1px solid #000;
    border-radius: 100px;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-home-app-intro__speech-bubble svg {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .pg-home-app-intro__heading {
    margin: 0;
    padding-block-start: 6px; /* room for the bubble tail */
    font-family: var(--font-jp);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-text-primary);
  }

  /* ---- Feature cards ---- */

  .pg-home-app-intro__features {
    inline-size: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    gap: calc(80px - 28px); /* account for the feature badge that overflows above */
    margin-bottom: 84px;
  }

  .pg-home-app-intro__feature-card {
    position: relative;
    background: var(--color-bg-canvas);
    border: 1px solid #000;
    border-radius: 0 20px 20px;
    padding: 24px 20px;
    margin-block-start: 28px; /* space for the badge that overflows above */
    min-block-size: 170px;
  }

  .pg-home-app-intro__feature-card--01 .pg-home-app-intro__feature-illust {
    inset-block-end: -52px;
    inset-inline-end: -11px;
    width: 115px;
  }

  .pg-home-app-intro__feature-card--02 .pg-home-app-intro__feature-illust {
    inset-block-end: -17px;
    inset-inline-end: -8px;
    width: 126px;
  }

  .pg-home-app-intro__feature-card--03 .pg-home-app-intro__feature-illust {
    inset-block-end: -86px;
    inset-inline-end: -22px;
    width: 170px;
  }

  @media screen and (width >= 769px) {
    .pg-home-app-intro__feature-card--01 .pg-home-app-intro__feature-illust {
      inset-block-end: -52px;
      inset-inline-end: -11px;
    }

    .pg-home-app-intro__feature-card--02 .pg-home-app-intro__feature-illust {
      inset-block-end: -27px;
      inset-inline-end: -8px;
    }

    .pg-home-app-intro__feature-card--03 .pg-home-app-intro__feature-illust {
      inset-block-end: -86px;
      inset-inline-end: -42px;
    }
  }

  .pg-home-app-intro__feature-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -1px;
    transform: translateY(-100%);
    background: var(--color-base-orange);
    border: 1px solid #000;
    border-block-end: none;
    border-radius: 20px 20px 0 0;
    padding: 6px 16px 2px;
    font-family: var(--font-poppins), var(--font-jp);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
    min-block-size: 28px;
  }

  .pg-home-app-intro__feature-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-home-app-intro__feature-title {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-home-app-intro__feature-text {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-home-app-intro__feature-illust {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: 100px;
  }

  .pg-home-app-intro__feature-illust img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  /* ---- Download ---- */

  .pg-home-app-intro__download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .pg-home-app-intro__download-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .pg-home-app-intro__download-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 20px;
    background: var(--color-accent-yellow-secondary);
    border-radius: 100px;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    white-space: nowrap;
  }

  .pg-home-app-intro__download-text {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-text-primary);
  }

  .pg-home-app-intro__download-qr {
    display: none;
  }

  .pg-home-app-intro__download-stores {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .pg-home-app-intro__store-link img {
    display: block;
    block-size: 70px;
    inline-size: auto;
  }

  /* ---- PC ---- */

  @media screen and (width >= 769px) {
    .pg-home-app-intro__features {
      flex-direction: row;
      align-items: flex-start;
      gap: 30px;
      max-inline-size: 990px;
      width: 100%;
    }

    .pg-home-app-intro__feature-card {
      flex: 0 0 310px;
      overflow: visible;
    }

    .pg-home-app-intro__feature-body {
      max-inline-size: 100%; /* no illustration constraint needed on PC */
    }

    .pg-home-app-intro__feature-illust {
      inline-size: 130px;
    }

    .pg-home-app-intro__download {
      flex-direction: row;
      align-items: flex-end;
      gap: 24px;
    }

    .pg-home-app-intro__download-qr {
      display: block;
      flex-shrink: 0;
    }

    .pg-home-app-intro__download-qr img {
      display: block;
      inline-size: 100px;
      block-size: 100px;
    }

    .pg-home-app-intro__download-stores {
      display: none;
    }
  }
}

@layer pages {
  /* ============================================================
   dōzoとは（/about/）
   ============================================================ */
  .pg-about .c-breadcrumbs {
    background-color: #f4efef;
  }

  /* ── イントロ（Concept） ── */

  .pg-about-intro {
    background-color: #f4efef;
    padding-block: 60px;
  }

  .pg-about-intro .l-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pg-about-intro__characters {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    padding-inline-start: 10px;
    margin-block: 60px;
  }

  .pg-about-intro__characters img {
    display: block;
  }

  .pg-about-intro__lead {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-align: center;
  }

  /* ── ２種類のギフト（About dōzo） ── */

  .pg-about-types {
    padding-block: 40px 60px;
    background-color: #f4efef;
  }

  .pg-about-types .l-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .pg-about-types__content {
    inline-size: 318px;
    max-inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .pg-about-types__catch {
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  .pg-about-types__catch-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-types__catch-line {
    position: relative;
    flex: none;
    inline-size: 25px;
    block-size: 43px;
  }

  .pg-about-types__catch-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    inline-size: 50px;
    border-block-start: 1px solid var(--color-text-primary);
    transform: translate(-50%, -50%) rotate(60deg);
  }

  .pg-about-types__catch-line--right::before {
    transform: translate(-50%, -50%) rotate(-60deg);
  }

  .pg-about-types__cards {
    display: flex;
    align-items: flex-end;
    inline-size: 100%;
  }

  .pg-about-types__card {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .pg-about-types__figure img {
    display: block;
  }

  .pg-about-types__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    inline-size: 100%;
    padding-inline: 8px;
  }

  .pg-about-types__pill {
    margin: 0;
    inline-size: 100%;
    border: 1px solid var(--color-text-primary);
    border-radius: 100px;
    padding: 4px 12px 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;

    /* &:hover {
    background-color: var(--color-text-highlight);
    color: #fff;
  } */

    /* PCサイズではアンカーリンクにしない */
    @media screen and (min-width: 769px) {
      pointer-events: none;
    }
  }

  .pg-about-types__pill--theme {
    background-color: var(--color-support-cyan-secondary);
  }

  .pg-about-types__pill--tanpin {
    background-color: var(--color-support-orange-secondary);
  }

  .pg-about-types__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
  }

  /* ── テーマギフト / タンピンギフト 共通ブロック ── */

  .pg-about-gift {
    padding-block: 60px 40px;
  }

  .pg-about-gift--theme {
    background-color: var(--color-support-cyan-secondary);
  }

  .pg-about-gift--tanpin {
    background-color: var(--color-support-orange-secondary);
  }

  .pg-about-gift .l-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .pg-about-gift__heading {
    align-items: center;
    padding-block-end: 30px;
  }

  .pg-about-gift__lead {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 12px;
  }

  /* 吹き出しラベル付きカルーセルパネル */

  .pg-about-gift__panel {
    position: relative;
    inline-size: 100%;
    background-color: var(--color-bg-canvas);
    border: 1px solid var(--color-text-primary);
    border-radius: 0 20px 20px;
    padding-block: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (width >= 769px) {
      inline-size: 800px;
      max-inline-size: 100%;
      padding-block: 40px;
      gap: 30px;
    }
  }

  /* パネル内タイトル(PC デザインのみに存在するため u-pc-only で出力) */

  .pg-about-gift__panel-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-gift__panel-title-catch {
    font-size: 16px;
  }

  .pg-about-gift__panel-title-name {
    font-size: 22px;
  }

  .pg-about-gift__panel-label {
    position: absolute;
    left: -1px;
    bottom: calc(100% - 1px);
    margin: 0;
    display: inline-flex;
    padding: 9px 16px 7px;
    background-color: var(--color-text-highlight);
    color: var(--color-bg-canvas);
    border: 1px solid var(--color-text-primary);
    border-block-end: 0;
    border-radius: 20px 20px 0 0;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  /* SP: Swiper スライダー（aboutGiftSlider.ts / data-about-gift-slider）
   PC: Swiper を destroy して折返しグリッド */

  .pg-about-gift__slider {
    inline-size: 100%;
  }

  @media screen and (1px <= width <= 768px) {
    .pg-about-gift__slider {
      /* .swiper の overflow: hidden が padding-box で効くため、
       スライド幅 = パネル幅 - 40px（Figma の 310px 相当） */
      padding-inline: 20px;
    }
  }

  .pg-about-gift__slides {
    display: flex;

    @media screen and (width >= 769px) {
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px 20px;
      padding-inline: 20px;
      width: auto;
    }
  }

  .pg-about-gift__slide {
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (width >= 769px) {
      flex: 0 0 236px;

      /* swiper/css の .swiper-slide { height: 100% } が stretch を無効化し、
       テキスト行数の差で画像の縦位置がガタつくため打ち消す */
      block-size: auto;
    }
  }

  .pg-about-gift__slide-text {
    margin: 0;
    min-block-size: 72px;
    align-content: flex-end;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;

    @media screen and (width >= 769px) {
      font-size: 14px;
      flex: 1;

      /* PC デザインでは行数の少ないテキストは上下中央(SP は下寄せ) */
      align-content: center;
    }
  }

  .pg-about-gift__slide-text strong {
    font-weight: 700;
    color: var(--color-text-highlight);
  }

  .pg-about-gift__slide-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .pg-about-gift__slide-image--bordered {
    border: 1px solid var(--color-text-primary);
  }

  .pg-about-gift__dots {
    display: none;
  }

  @media screen and (1px <= width <= 768px) {
    .pg-about-gift__dots {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      margin-block-start: 20px;
      mix-blend-mode: multiply;
    }

    /* スライドが1枚以下のとき Swiper (watchOverflow) が付与する */
    .pg-about-gift__dots.swiper-pagination-lock {
      display: none;
    }

    .pg-about-gift__dots .swiper-pagination-bullet {
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background-color: #b2b2b2; /* Figma: B2B2B2（トークン未定義） */
    }

    .pg-about-gift__dots .swiper-pagination-bullet-active {
      background-color: var(--color-text-primary);
    }
  }

  /* 贈り方 */

  .pg-about-gift__howto {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    padding-block-start: 24px;
    padding-inline: 16px;
  }

  .pg-about-gift__howto-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding-block: 8px;
  }

  .pg-about-gift__howto-title {
    margin: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-about-gift__howto-sub {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-gift__howto-cards {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (width >= 769px) {
      inline-size: 700px;
      max-inline-size: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
  }

  .pg-about-gift__howto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding-block-end: 16px;
  }

  .pg-about-gift__howto-pill {
    margin: 0;
    inline-size: 100%;
    background-color: var(--color-accent-yellow-secondary);
    border: 1px solid var(--color-text-primary);
    border-radius: 100px;
    padding: 4px 12px 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-gift__howto-figure {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
  }

  .pg-about-gift__howto-figure img {
    /* position: absolute; */
    display: block;
    max-inline-size: none;
    block-size: auto;
  }

  .pg-about-gift__howto-figure--sns {
    top: 17px;
    right: 8px;
    inline-size: 89px;
    block-size: 150px;
    /* background-color: red; */
  }

  .pg-about-gift__howto-figure--sns img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pg-about-gift__howto-figure--ticket {
    top: 20px;
    right: -14px;
    inline-size: 144px;
    block-size: 150px;

    @media screen and (width >= 769px) {
      top: 22px;
      right: -4px;
    }
  }

  .pg-about-gift__howto-figure--ticket img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pg-about-gift__howto-features {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pg-about-gift__howto-features li {
    display: flex;
    gap: 2px;
    align-items: flex-start;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-about-gift__howto-check {
    display: flex;
    flex: none;
    padding-block-start: 4px;
  }

  .pg-about-gift__howto-check svg {
    display: block;
  }

  .pg-about-gift__howto-note {
    margin: 0;
    inline-size: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
  }

  /* アコーディオン（c-accordion の about 用オーバーライド） */

  .pg-about-gift__faq {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;

    @media screen and (width >= 769px) {
      inline-size: 700px;
      max-inline-size: 100%;
    }
  }

  .pg-about-accordion {
    background-color: rgb(255 255 255 / 50%);
    border-radius: 16px;
    border-block-end: 0;
  }

  .pg-about-accordion .c-accordion__summary {
    min-block-size: 60px;
    padding: 16px;
    gap: 12px;
  }

  .pg-about-accordion .c-accordion__title {
    font-weight: 700;
  }

  .pg-about-accordion .c-accordion__body {
    padding: 0 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pg-about-gift__faq strong {
    font-weight: 700;
    color: var(--color-text-highlight);
  }

  .pg-about-accordion__steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block-end: 8px;

    @media screen and (width >= 769px) {
      flex-direction: row;
      justify-content: center;
      gap: 16px;
    }
  }

  .pg-about-accordion__step {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;

    @media screen and (width >= 769px) {
      flex-direction: column;
      flex: 0 0 145px;
    }
  }

  .pg-about-accordion__step-body {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .pg-about-accordion__step-badge {
    margin: 0;
    background-color: var(--color-accent-yellow-secondary);
    border: 1px solid var(--color-text-primary);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--font-poppins);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .pg-about-accordion__step-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-accordion__step-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-accordion__step-image {
    flex: none;
    display: block;
    border-radius: 16px;

    @media screen and (width >= 769px) {
      width: 145px;
      height: 145px;
      aspect-ratio: 1;
    }
  }

  .pg-about-accordion__options {
    display: flex;
    gap: 8px;
    inline-size: 100%;

    @media screen and (width >= 769px) {
      gap: 24px;
      justify-content: center;
    }
  }

  .pg-about-accordion__option {
    flex: 1;
    min-inline-size: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;

    @media screen and (width >= 769px) {
      flex: 0 0 177px;
    }
  }

  .pg-about-accordion__option img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
  }

  .pg-about-accordion__option figcaption {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-about-accordion__lists {
    inline-size: 100%;
  }

  .pg-about-accordion__list-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  .pg-about-accordion__lists ul {
    margin: 0;
    padding-inline-start: 21px;
    list-style: disc;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  .pg-about-accordion__lists ul + .pg-about-accordion__list-title {
    margin-block-start: 25px;
  }

  .pg-about-accordion__table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-about-accordion__table th,
  .pg-about-accordion__table td {
    border: 1px solid rgb(255 255 255 / 50%);
    padding: 10px;
    text-align: center;
    font-weight: 400;
    vertical-align: middle;
  }

  .pg-about-accordion__table thead th {
    font-weight: 700;
    background-color: var(--color-accent-yellow-secondary);
    width: 25%;

    @media screen and (width >= 769px) {
      width: 33%;
    }
  }

  .pg-about-accordion__table tbody th {
    background-color: var(--color-support-cyan-secondary);
  }

  .pg-about-accordion__table thead th:first-child {
    background-color: var(--color-support-cyan-secondary);
    inline-size: 150px;

    @media screen and (width >= 769px) {
      width: 33%;
    }
  }

  .pg-about-accordion__table tbody td {
    background-color: #eee; /* Figma: EEEEEE（トークン未定義） */
  }

  .pg-about-accordion__more {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    margin-bottom: 14px;

    .c-button.is-text {
      /* border-bottom: none; */
    }
  }

  /* ── みんなの感想（User’s Voice） ── */

  .pg-about-voice {
    padding-block: 40px 60px;
    background-color: #f4efef;

    @media screen and (width >= 769px) {
      padding-block: 80px;
    }
  }

  .pg-about-voice .l-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pg-about-voice__slider {
    margin-block-start: 40px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;

    @media screen and (width >= 769px) {
      display: block;
      column-count: 3;
      column-gap: 24px;
      inline-size: min(900px, calc(100% - 40px));
      margin-inline: auto;
      overflow: visible;
    }
  }

  .pg-about-voice__slider::-webkit-scrollbar {
    display: none;
  }

  /* 端の余白は padding ではなく flex スペーサーで確保（AGENTS.md Pitfalls） */
  .pg-about-voice__slider::before,
  .pg-about-voice__slider::after {
    content: "";
    flex: 0 0 4px;
  }

  @media screen and (width >= 769px) {
    .pg-about-voice__slider::before,
    .pg-about-voice__slider::after {
      display: none;
    }
  }

  /* 吹き出しラベルの張り出し分（29px）はラッパーの padding で流し込みに確保する
   （PC のカラム分割でラベルが前のカラム末尾へスライスされるのを防ぐ） */
  .pg-about-voice__item {
    flex: 0 0 320px;
    display: flex;
    padding-block-start: 29px;

    @media screen and (width >= 769px) {
      display: block;
      margin-block-end: 27px;
      break-inside: avoid;
    }
  }

  .pg-about-voice__card {
    position: relative;
    inline-size: 100%;
    background-color: var(--color-bg-canvas);
    border: 1px solid var(--color-text-primary);
    border-radius: 0 20px 20px;
    padding: 20px;
  }

  .pg-about-voice__card-label {
    position: absolute;
    left: -1px;
    bottom: calc(100% - 1px);
    margin: 0;
    display: inline-flex;
    padding: 9px 16px 7px;
    background-color: var(--color-brand-primary);
    color: var(--color-bg-canvas);
    border: 1px solid var(--color-text-primary);
    border-block-end: 0;
    border-radius: 20px 20px 0 0;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .pg-about-voice__card-label--receiver {
    background-color: var(--color-accent-yellow-secondary);
    color: var(--color-text-primary);
  }

  .pg-about-voice__card-text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }
}

@layer pages {
  .pg-secondary-layout-body {
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-body.is-secondary-menu-open {
    overflow: hidden;
  }

  .pg-secondary-layout {
    min-block-size: 100dvh;
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-layout-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-page-float);
    block-size: 60px;
    padding-inline: 16px;
    border-block-end: 1px solid var(--color-text-primary);
    background-color: var(--color-brand-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .pg-secondary-layout-header__logo {
    display: inline-flex;
  }

  .pg-secondary-layout-header__logo:hover {
    opacity: 0.7;
  }

  .pg-secondary-layout-header__logo img {
    display: block;
    inline-size: 80px;
    block-size: 38px;
  }

  .pg-secondary-layout-header__right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .pg-secondary-layout-header__deadline {
    display: none;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 7px 20px 9px;
    border-radius: 999px;
    background-color: var(--color-accent-yellow-secondary);
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-secondary-layout-header__menu {
    inline-size: 24px;
    block-size: 24px;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--color-text-primary);
  }

  @media screen and (width >= 769px) {
    .pg-secondary-layout-header {
      block-size: 68px;
      padding-inline: 65px;
    }

    .pg-secondary-layout-header__logo img {
      inline-size: 90px;
      block-size: 43px;
    }

    .pg-secondary-layout-header__deadline {
      display: inline-flex;
    }

    .pg-secondary-layout-header__menu {
      inline-size: 30px;
      block-size: 30px;

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

@layer pages {
  .pg-secondary-body {
    margin: 0;
  }

  .pg-secondary-body--login {
    background-color: #e1d9d9;
  }

  .pg-secondary-marquee {
    inline-size: 100%;
    block-size: 50px;
    overflow: hidden;
    background-color: var(--color-brand-primary);
  }

  .pg-secondary-marquee__track {
    --duration: 22s;

    inline-size: max-content;
    block-size: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-inline: 16px;
    animation: pg-secondary-marquee-scroll var(--duration) linear infinite;
  }

  .pg-secondary-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-bg-canvas);
    white-space: nowrap;
  }

  .pg-secondary-marquee__icon {
    color: currentColor;
  }

  .pg-secondary-submit {
    inline-size: min(100%, 300px);
    display: flex;
    place-content: center;
    padding: 14px 24px;
    min-block-size: 60px;
    background-color: var(--color-text-primary);
    color: var(--color-bg-canvas);
    border-radius: 1000px;
    font-weight: 700;
  }

  /* disabled */
  .pg-secondary-submit:disabled,
  .pg-secondary-submit.is-disabled {
    background-color: #b2b2b2;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* hover */
  .pg-secondary-submit:hover,
  .pg-secondary-submit.is-hover {
    background-color: var(--color-brand-primary, #000);
  }

  .pg-secondary-action-button {
    inline-size: min(100%, 300px);
    min-block-size: 56px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid var(--color-text-primary);
    border-radius: 1000px;
    text-decoration: none;
    color: var(--color-text-primary);
    background-color: var(--color-accent-yellow-secondary);
  }

  .pg-secondary-action-button:hover {
    background-color: var(--color-brand-primary);
  }

  .pg-secondary-action-button__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-align: center;
    font-family: var(--font-jp);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .pg-secondary-action-button__icon {
    color: var(--color-text-primary);
  }

  .pg-secondary-section-about {
    padding-block: 60px;
  }

  .pg-secondary-section-about__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: 24px;
  }

  .pg-secondary-section-about__lead {
    text-align: center;
    margin-block: 30px;
  }

  /* Slider wrapper: negative margin so slider bleeds to screen edges on SP */
  .pg-secondary-section-about__slider-wrap {
    margin-inline: -24px;
  }

  /* FeatureCard sizing inside this slider context */
  .pg-secondary-section-about .c-feature-card {
    --c-feature-card-corner-bg: var(--color-bg-canvas);

    flex: 0 0 230px;
    scroll-snap-align: start;
  }

  /* "もっとみる" — SP (last item inside scroll) */
  .pg-secondary-section-about__more-sp {
    flex: 0 0 120px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text-primary);
    scroll-snap-align: start;
  }

  .pg-secondary-section-about__more-pc {
    display: none;
  }

  .pg-secondary-section-about__more-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border: 1px solid var(--color-text-primary);
    border-radius: 100px;
  }

  .pg-secondary-section-about__more-text {
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }

  @media screen and (width >= 769px) {
    .pg-secondary-section-about__inner {
      padding-inline: 0;
      align-items: center;
    }

    .pg-secondary-section-about__slider-wrap {
      inline-size: 100%;
      margin-inline: 0;
    }

    .pg-secondary-section-about .c-feature-card {
      flex: 1 0 0;
      scroll-snap-align: none;
    }

    .pg-secondary-section-about__more-sp {
      display: none;
    }

    .pg-secondary-section-about__more-pc {
      display: flex;
      justify-content: flex-end;
    }

    .pg-secondary-section-about__more-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--color-text-primary);
    }

    .pg-secondary-section-about__more-link:hover {
      color: var(--color-brand-primary);
    }

    .pg-secondary-section-about__more-link:hover .pg-secondary-section-about__more-circle {
      border-color: var(--color-brand-primary);
    }

    .pg-secondary-section-about__more-pc .pg-secondary-section-about__more-circle {
      inline-size: 26px;
      block-size: 26px;
    }

    .pg-secondary-section-about__more-pc .pg-secondary-section-about__more-text {
      font-weight: 500;
      font-size: 16px;
      line-height: 1;
    }
  }

  @keyframes pg-secondary-marquee-scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }
}

@layer pages {
  .pg-secondary-login {
    min-block-size: 100dvh;
    inline-size: min(100%, 390px);
    margin-inline: auto;
    padding-bottom: 62px;

    /* padding-block: 20px 24px; */
    --secondary-login-dog-delay: 1080ms;
    --secondary-login-dog-duration: 5000ms;
    --secondary-login-message-delay: calc(var(--secondary-login-dog-delay) + var(--secondary-login-dog-duration) - 3000ms);
    --secondary-login-message-delay-2: calc(var(--secondary-login-dog-delay) + 2500ms);
  }

  .pg-secondary-login__spotlight {
    margin-top: -10px;
    line-height: 0;
    text-align: center;
    opacity: 0;
    animation: secondary-login-spotlight-in 480ms ease-out 80ms forwards;
  }

  .pg-secondary-login__contents {
    text-align: center;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    z-index: 1;
    font-size: 0;
    line-height: 1;
  }

  .pg-secondary-login__logo {
    opacity: 0;
    animation: secondary-login-message-fade-in 480ms ease-out var(--secondary-login-message-delay) forwards;
  }

  .pg-secondary-login__lead {
    opacity: 0;
    animation: secondary-login-message-fade-in 480ms ease-out var(--secondary-login-message-delay) forwards;
    margin: 16px 0 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    position: relative;
    z-index: 1;
    animation-delay: var(--secondary-login-message-delay-2);
  }

  .pg-secondary-login__hero {
    position: relative;
    z-index: 0;
  }

  .pg-secondary-login__hero-image-wrap {
    text-align: center;
    margin-top: 34px;
  }

  .pg-secondary-login__hero-image-wrap img {
    left: -5px;
    position: relative;
    opacity: 0;
    transform: translateY(-56px);
    animation: secondary-login-dog-drop var(--secondary-login-dog-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--secondary-login-dog-delay) forwards;
    will-change: transform, opacity;
  }

  @keyframes secondary-login-spotlight-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes secondary-login-dog-drop {
    from {
      opacity: 0;
      transform: translateY(-56px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes secondary-login-message-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-secondary-login__spotlight,
    .pg-secondary-login__logo,
    .pg-secondary-login__lead,
    .pg-secondary-login__hero-image-wrap img {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .pg-secondary-login__auth {
    margin-top: 30px;
  }

  .pg-secondary-login__fields {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline: 36px;
  }

  .pg-secondary-login__field {
    inline-size: 100%;
    min-block-size: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 20px;
    border: 1px solid rgb(178 178 178 / 30%);
    border-radius: 12px;
    background-color: #f5f5f5;
  }

  .pg-secondary-login__field-label {
    inline-size: 100px;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
  }

  .pg-secondary-login__field-input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    padding: 0;
    background-color: transparent;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
  }

  .pg-secondary-login__field-input:focus {
    outline: none;
  }

  .pg-secondary-login__field-icon {
    color: var(--color-text-secondary);
  }

  .pg-secondary-login__field-toggle {
    flex: 0 0 auto;
    inline-size: 18px;
    block-size: 18px;
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
  }

  .pg-secondary-login__field-toggle:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .pg-secondary-login__cta {
    margin-top: 30px;
  }

  .pg-secondary-login__deadline {
    margin: 24px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
  }

  .pg-secondary-login__contact {
    text-align: center;
    margin-top: 20px;
  }

  .pg-secondary-login__contact-link {
    display: inline-block;
    padding: 6px 2px 8px;
    border-bottom: 1px solid;
    font-size: 14px;
    line-height: 1;
    transition: border-color 0s;
  }

  .pg-secondary-login__contact-link:hover {
    border-color: transparent;
  }
}

@layer pages {
  .pg-secondary-message {
    min-block-size: 100dvh;
    background-color: var(--color-bg-surface);
    position: relative;
  }

  .pg-secondary-message__content {
    padding: 16px 16px 142px;
    inline-size: min(100%, 390px);
    margin-inline: auto;
  }

  .pg-secondary-message-card {
    --pg-secondary-message-card-corner-size: 58px;
    --pg-secondary-message-card-corner-bg: var(--color-bg-surface);
    --pg-secondary-message-card-corner-stroke: var(--color-text-primary);

    position: relative;
    padding: 8px;
  }

  .pg-secondary-message-card__corner {
    position: absolute;
    z-index: 1;
    inline-size: var(--pg-secondary-message-card-corner-size);
    block-size: var(--pg-secondary-message-card-corner-size);
    pointer-events: none;
  }

  .pg-secondary-message-card__corner--top-left {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .pg-secondary-message-card__corner--bottom-right {
    inset-block-end: 0;
    inset-inline-end: 0;
    transform: rotate(180deg);
  }

  .pg-secondary-message-card__corner-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .pg-secondary-message-card__corner-fill {
    fill: var(--pg-secondary-message-card-corner-bg);
  }

  .pg-secondary-message-card__corner-line {
    stroke: var(--pg-secondary-message-card-corner-stroke);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .pg-secondary-message-card__panel {
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-message-card__image-wrap {
    aspect-ratio: 358 / 265;
    overflow: hidden;
    background-color: #508bb2;
  }

  .pg-secondary-message-card__image-wrap img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .pg-secondary-message-card__body {
    padding: 36px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pg-secondary-message-card__for {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
  }

  .pg-secondary-message-card__for-label {
    translate: 0 1px;
  }

  .pg-secondary-message-card__for-name {
    font-family: var(--font-jp);
    font-weight: 700;
  }

  .pg-secondary-message-card__text {
    margin: 0;
    text-align: center;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
  }

  .pg-secondary-message__sticky-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #fff 88.173%);
    padding: 90px 16px 36px;
    z-index: 10;
  }

  .pg-secondary-message__cta {
    inline-size: min(100%, 318px);
    pointer-events: auto;
  }

  .pg-secondary-message__cta-download-sp {
    pointer-events: auto;
    text-align: center;
    margin-top: 12px;
  }

  .pg-secondary-message__cta-download-pc {
    display: none;
  }

  @media screen and (width >= 769px) {
    .pg-secondary-message__cta-download-sp {
      display: none;
    }

    .pg-secondary-message__cta-download-pc {
      display: block;
      text-align: right;
      margin-bottom: 6px;
      margin-top: 10px;
    }
  }

  @media screen and (width >= 769px) {
    .pg-secondary-message {
      --pg-secondary-message-shell-width: 540px;

      inline-size: 100%;
    }

    .pg-secondary-message__content {
      max-inline-size: var(--pg-secondary-message-shell-width);
      margin-inline: auto;
      padding: 0 0 120px;
      width: 100%;
    }

    .pg-secondary-message-card {
      --pg-secondary-message-card-corner-size: 72px;
    }

    .pg-secondary-message-card__image-wrap {
      aspect-ratio: 420 / 310;
    }

    .pg-secondary-message__sticky-cta {
      /* inset-inline: 50% auto; */
      /* transform: translateX(-50%); */
      /* inline-size: calc(var(--pg-secondary-message-shell-width) - 8px * 2); */
      width: 100%;
      padding: 90px 35px 36px;
    }
  }

  /* haisou page specific button */
  .pg-secondary-message-haisou__cta {
    max-inline-size: 318px;
    inline-size: min(100%, 390px);
    min-block-size: 56px;
    margin-inline: auto;
    display: grid;
    grid-template-areas: "text icon";
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid var(--color-text-primary);
    border-radius: 1000px;
    text-decoration: none;
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
  }

  .pg-secondary-message-haisou__cta:hover {
    background-color: var(--color-text-primary);
    color: var(--color-bg-surface);
  }

  .pg-secondary-message-haisou__cta-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .pg-secondary-message-haisou__cta-title {
    margin: 0;
    font-family: var(--font-jp);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.36px;
  }

  .pg-secondary-message-haisou__cta-subtitle {
    margin: 0;
    font-family: var(--font-jp);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.24px;
  }
}

@layer pages {
  .pg-secondary-theme__main {
    padding-bottom: 56px;
    overflow: hidden;
  }

  .pg-secondary-theme__inner {
    padding-inline: var(--inner-padding);
  }

  .pg-secondary-theme-howto {
    background-color: var(--color-support-cyan-secondary);
    padding: 56px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .pg-secondary-theme-howto__title {
    margin: 0;
    border-radius: 999px;
    padding: 8px var(--inner-padding) 12px;
    background-color: var(--color-accent-yellow-secondary);
    font-family: var(--font-jp);
    font-size: 22px;
    inline-size: 250px;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .pg-secondary-theme-howto__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 24px;
  }

  .pg-secondary-theme-howto__steps {
    margin: 0;
    padding: 0 8px 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-secondary-theme-howto__steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-secondary-theme-howto__steps span {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: var(--color-text-highlight);
    color: var(--color-bg-canvas);
    font-family: var(--font-poppins);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .pg-secondary-theme-howto__guide {
    --button-bg: var(--color-button-secondary-bg);
    --button-text: var(--color-button-secondary-text);
    --button-border: var(--color-button-secondary-border);

    inline-size: min(100%, 312px);
    block-size: 48px;
    border: 1px solid var(--button-border);
    border-radius: 1000px;
    background-color: var(--button-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px;
    color: var(--button-text);
    text-decoration: none;
  }

  .pg-secondary-theme-howto__guide:hover {
    --button-bg: var(--color-button-hover);
    --button-text: var(--color-button-hover-text);
  }

  .pg-secondary-theme-howto__guide span {
    flex: 1;
    text-align: center;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .pg-secondary-theme-howto__illustration {
    /* inline-size: min(100%, 300px); */
  }

  @media screen and (width >= 769px) {
    .pg-secondary-theme__main {
      padding-block: 80px;
    }

    .pg-secondary-theme__inner {
      max-width: calc(900px + var(--inner-padding) * 2);
      margin: 0 auto;
      padding-inline: var(--inner-padding);
    }

    .pg-secondary-theme-howto {
      padding: 60px var(--inner-padding) 80px;
      gap: 50px;
    }

    .pg-secondary-theme-howto__content {
      flex-direction: row;
      gap: 20px;
      align-items: center;
      display: flex;
      justify-content: center;
    }

    .pg-secondary-theme-howto__steps {
      gap: 24px;
    }

    .pg-secondary-theme-howto__steps li {
      font-size: 20px;
    }

    .pg-secondary-theme-howto__illustration {
      inline-size: auto;
    }

    .pg-secondary-theme-howto__guide {
      inline-size: 350px;
    }
  }
}

@layer pages {
  /* CMSエリア（.pg-secondary-detail-summary__cms-body） */
  .pg-secondary-detail-summary__cms-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    padding-block: 8px;
    width: 100%;
  }

  .pg-secondary-detail-summary__cms-body > h2 {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-secondary-detail-summary__cms-body > p {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-secondary-detail-summary__cms-body > p:has(> img),
  .pg-secondary-detail-summary__cms-body > figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .pg-secondary-detail-summary__cms-body > p:has(> img) > img,
  .pg-secondary-detail-summary__cms-body > figure > img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 900;
    object-fit: cover;
  }

  .pg-secondary-detail-summary__cms-body > p:has(> img) > img + span,
  .pg-secondary-detail-summary__cms-body > p:has(> img) > img + caption,
  .pg-secondary-detail-summary__cms-body > figure > figcaption {
    font-family: var(--font-jp);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    color: #808080;
    letter-spacing: 0.02em;
  }

  .pg-secondary-detail {
    min-block-size: 100dvh;
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-detail__inner {
    max-inline-size: calc(1024px + var(--inner-padding) * 2);
    margin-inline: auto;
  }

  .pg-secondary-detail-hero {
    padding-bottom: 40px;
    margin-bottom: 36px;
  }

  .pg-secondary-detail-summary {
    padding-inline: var(--inner-padding);
    padding-block-start: 32px;
  }

  .pg-secondary-detail-tag {
    background-color: var(--color-accent-yellow-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 14px */
    color: var(--color-text-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-block-size: 38px;
    gap: 8px;
    padding: 7px 10px;
  }

  .pg-secondary-detail-summary__tag {
    display: none;
  }

  .pg-secondary-detail-summary__heading {
    margin-bottom: 32px;
  }

  .pg-secondary-detail-summary__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-secondary-detail-summary__brand {
    margin-top: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.36px;
  }

  .pg-secondary-detail-summary__cta {
    margin-block-end: 8px;
    text-align: center;
  }

  .pg-secondary-detail-summary__cta .c-button {
    inline-size: min(100%, 318px);
  }

  .pg-secondary-detail-summary__cta .c-button:disabled {
    background-color: #b2b2b2;
  }

  .pg-secondary-detail-summary__sticky-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    border-top: 1px solid #000;

    /* padding: 48px 16px calc(16px + env(safe-area-inset-bottom)); */
    padding: 20px 16px;
    background: #fff;
    z-index: var(--z-page-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
    pointer-events: none;
  }

  .pg-secondary-detail-summary__sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .pg-secondary-detail-summary__sticky-cta .c-button {
    inline-size: 100%;
    pointer-events: auto;
  }

  .pg-secondary-detail-summary__decos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    line-height: 1;
    margin-top: 66px;
  }

  .pg-secondary-detail-summary__body {
    display: flex;
    flex-direction: column;
    padding-top: 40px;
  }

  .pg-secondary-detail-spec {
    margin-block-start: 40px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    letter-spacing: 0.28px;

    @media screen and (width >= 769px) {
      margin-block-start: 0;
    }
  }

  .pg-secondary-detail-spec > h2 {
    margin-block-end: 8px;
    font-size: 16px;
  }

  .pg-secondary-detail-spec > h2:not(:first-child) {
    margin-block-start: 32px;
  }

  .pg-secondary-detail-related {
    padding: 40px 0;
  }

  .pg-secondary-detail-related__inner {
    margin-inline: auto;
    padding-inline: var(--inner-padding);
  }

  .pg-secondary-detail-related__title {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
  }

  .pg-secondary-detail-related__back {
    text-align: center;
    margin-top: calc(16px + 40px);
  }

  .pg-secondary-alcohol-modal .c-modal__panel {
    background-color: #ebebeb;
    border-radius: 0;
  }

  @media screen and (1px <= width <= 768px) {
    /* .pg-secondary-detail {
    padding-block-end: 96px;
  } */

    .pg-secondary-detail-related__container {
      margin-inline: calc(-1 * var(--inner-padding));
    }

    .pg-secondary-detail-related__grid {
      overflow-x: auto;
      scrollbar-width: none;
      padding-inline: var(--inner-padding);
      display: flex;
      gap: 24px;
    }

    .pg-secondary-detail-related__container .c-secondary-gift-card {
      flex: 0 0 200px;
      scroll-snap-align: start;
    }
  }

  @media screen and (width >= 769px) {
    .pg-secondary-detail-summary__sticky-cta {
      display: none;
    }

    .pg-secondary-detail__inner {
      padding: 32px var(--inner-padding) 80px;
    }

    .pg-secondary-detail-hero__column {
      display: grid;
      grid-template-columns: minmax(0, 482px) minmax(0, 1fr);
      gap: 60px;
      align-items: start;
    }

    .pg-secondary-detail-hero__tag {
      display: none;
    }

    .pg-secondary-detail-gallery {
      gap: 12px;
      position: sticky;
      top: calc(var(--header-height) + 24px);
      align-self: start;
    }

    .pg-secondary-detail-tag {
      display: inline-flex;
      border-radius: 1000px;
      padding: 8px 24px;
      color: #000;
    }

    .pg-secondary-detail-summary {
      gap: 20px;
      padding: 0;
    }

    .pg-secondary-detail-summary__brand {
      font-size: 18px;
    }

    .pg-secondary-detail-summary__tag {
      display: block;
      margin-bottom: 20px;
    }

    .pg-secondary-detail-summary__heading {
      margin-bottom: 40px;
    }

    .pg-secondary-detail-summary__title {
      font-size: 28px;
    }

    .pg-secondary-detail-summary__cta .c-button {
      inline-size: 100%;
    }

    .pg-secondary-detail-summary__decos {
      display: none;
    }

    .pg-secondary-detail-summary__body {
      gap: 36px;
    }

    .pg-secondary-detail-spec {
      background-color: var(--color-bg-surface);
      padding: 32px;
      border-radius: 20px;
    }

    .pg-secondary-detail-related {
      padding: 60px 0;
    }

    .pg-secondary-detail-related__inner {
      max-inline-size: calc(1024px + var(--inner-padding) * 2);
      gap: 32px;
    }

    .pg-secondary-detail-related__title {
      font-size: 22px;
      margin-bottom: 40px;
    }

    .pg-secondary-detail-related__grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 36px 20px;
    }

    /*
    pg-secondary-detail-related__grid .c-secondary-gift-card はPCサイズでは4つまでしか表示しないようにする。cssでdisplay: none;を使用して、5つ目以降の.c-secondary-gift-cardを非表示にする。
  */

    .pg-secondary-detail-related__grid .c-secondary-gift-card:nth-child(n + 5) {
      display: none;
    }

    .pg-secondary-detail-related__back {
      margin-top: 80px;
    }
  }
}

@layer pages {
  .pg-secondary-receive-modal__content {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding: 16px 16px 12px;
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-receive-modal__options {
    display: grid;
    gap: 8px;
  }

  .pg-secondary-receive-modal__footer {
    flex: none;
    border-block-start: 1px solid var(--color-text-primary);
    padding: 16px 36px 20px;
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-receive-modal__button {
    inline-size: 100%;
  }

  @media screen and (width >= 769px) {
    .pg-secondary-receive-modal__content {
      padding: 24px;
    }

    .pg-secondary-receive-modal__options {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pg-secondary-receive-modal__footer {
      display: none;
    }
  }
}

@layer pages {
  .pg-secondary-form__main {
    padding: 60px 0;
  }

  .pg-secondary-form__inner {
    max-inline-size: calc(700px + var(--inner-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--inner-padding);
  }

  .pg-secondary-form__header {
    display: flex;
    justify-content: center;
  }

  .pg-secondary-form__content {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .pg-secondary-form__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-secondary-form__stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-secondary-form__delivery-estimate-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-secondary-form__delivery-estimate-sub {
    font-size: 12px;
    color: #4d4d4d;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    margin-top: 4px;
  }

  .pg-secondary-form__form {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  .pg-secondary-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-secondary-form__confirm-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .pg-secondary-form__grid {
    display: grid;
    gap: 12px;
  }

  .pg-secondary-form__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-secondary-form__control {
    inline-size: 100%;
  }

  .pg-secondary-form__postal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .pg-secondary-form__postal-button {
    min-block-size: 48px;
    padding: 12px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background-color: #333;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .pg-secondary-form__postal-button:hover {
    background-color: var(--color-brand-primary);
  }

  .pg-secondary-form__agreement-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 48px;
  }

  .pg-secondary-form__agreement-heading {
    margin: 0;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.32px;
  }

  .pg-secondary-form__agreement-text-wrap {
    padding: 20px 10px;
    border: 1px solid #b2b2b2;
    max-block-size: 235px;
  }

  .pg-secondary-form__agreement-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    overflow: auto;
    max-block-size: calc(235px - 40px);
  }

  .pg-secondary-form__agreement-text > h1 {
    margin: 0 0 1em;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-secondary-form__agreement-text > p {
    margin: 1.5em 0;
  }

  .pg-secondary-form__agreement-check {
    display: flex;
    justify-content: center;
  }

  .pg-secondary-form__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 16px;
  }

  .pg-secondary-form__back {
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-decoration: underline;
  }

  .pg-secondary-form__back:hover {
    opacity: 1;
    color: var(--color-brand-primary);
  }

  @media screen and (width >= 769px) {
    .pg-secondary-form__main {
      padding: 80px 0;
    }
  }

  /* ===== Confirm Form ===== */

  .pg-secondary-form--confirm .pg-secondary-form__inner {
    max-inline-size: calc(660px + var(--inner-padding) * 2);
  }

  .pg-secondary-form--confirm .pg-secondary-form__content {
    margin-top: 56px;
    gap: 56px;
  }

  .pg-secondary-form--confirm .pg-secondary-form__form {
    gap: 56px;
  }

  /* ===== Complete Form ===== */

  .pg-secondary-form--complete .pg-secondary-form__main {
    padding: 0;
  }

  .pg-secondary-form-complete {
    padding: 60px 0 40px;
  }

  .pg-secondary-form-complete__inner {
    margin-inline: auto;
    padding-inline: var(--inner-padding, 24px);
  }

  .pg-secondary-form-complete__lead {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    margin-block: 24px;
  }

  .pg-secondary-form-complete__actions {
    text-align: right;

    @media screen and (width >= 769px) {
      text-align: center;
    }
  }
}

@layer pages {
  .pg-secondary-guide__main {
    padding: 60px var(--inner-padding) 80px;
  }

  .pg-secondary-guide__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
  }

  .pg-secondary-guide__header {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }

  .pg-secondary-guide__content {
    inline-size: 100%;
  }

  .pg-secondary-guide__content .c-accordion {
    background-color: var(--color-bg-canvas);
  }

  .pg-secondary-guide__content .c-accordion li + li {
    margin-top: 0;
  }

  .pg-secondary-guide__about-us {
    background-color: var(--color-bg-surface);
  }

  .pg-secondary-guide__about-us .c-feature-card {
    --c-feature-card-corner-bg: var(--color-bg-surface);
  }

  @media screen and (width >= 769px) {
    .pg-secondary-guide__main {
      padding-block: 80px 96px;
    }

    .pg-secondary-guide__content {
      max-inline-size: 720px;
      margin-inline: auto;
    }
  }
}

@layer pages {
  .pg-secondary-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    pointer-events: none;
  }

  .pg-secondary-menu__overlay {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  .pg-secondary-menu__panel {
    position: relative;
    inset-inline: 0;
    margin-inline: auto;
    background: var(--color-bg-surface);
    opacity: 1;
    transform: translateY(-100%);
    transition:
      transform 0.5s ease,
      opacity 1s ease;
  }

  .pg-secondary-menu.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .pg-secondary-menu.is-open .pg-secondary-menu__overlay {
    opacity: 1;
  }

  .pg-secondary-menu.is-open .pg-secondary-menu__panel {
    opacity: 1;
    transform: translateY(0);
  }

  .pg-secondary-menu__panel-header {
    block-size: 68px;
    padding-inline: 16px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .pg-secondary-menu__close {
    inline-size: 24px;
    block-size: 24px;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--color-text-primary);

    &:hover {
      color: var(--color-text-highlight);
    }
  }

  .pg-secondary-menu__panel-content {
    padding: 12px 40px 60px;
    margin-inline: auto;
  }

  .pg-secondary-menu__lead {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .pg-secondary-menu__meta-wrap {
    margin-block-start: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px;
    gap: 12px;
    align-items: end;
  }

  .pg-secondary-menu__meta-list {
    display: grid;
    gap: 36px;
  }

  .pg-secondary-menu__meta-item {
    margin: 0;
    display: grid;
    gap: 8px;
  }

  .pg-secondary-menu__meta-item dt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-secondary-menu__meta-item dd {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-secondary-menu__illustration {
    inline-size: 80px;
    block-size: 131px;
  }

  .pg-secondary-menu__illustration img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .pg-secondary-menu__actions {
    margin-block-start: 40px;
    display: grid;
    gap: 20px;
  }

  .pg-secondary-menu__actions .c-button {
    padding-inline: 10px;
  }

  @media screen and (width >= 769px) {
    .pg-secondary-menu__panel-header {
      padding-inline: 16px;
    }

    .pg-secondary-menu__panel-content {
      padding-inline: var(--inner-padding);

      /* max-inline-size: calc(275px + var(--inner-padding) * 2); */
      max-inline-size: calc(360px + var(--inner-padding) * 2);
    }

    .pg-secondary-menu__actions {
      max-inline-size: 310px;
      margin: 40px auto 0;
    }

    .pg-secondary-menu__actions .c-button {
      padding-inline: 20px;
    }
  }
}

@layer pages {
  .pg-sec-shipping-footer {
  }

  .pg-sec-shipping-footer__action {
    display: flex;
    justify-content: center;
    margin-block-end: 30px;
  }

  .pg-sec-shipping-footer__button {
    max-inline-size: 300px;
    min-height: 60px;
    inline-size: min(100%, 390px);
  }

  .pg-sec-shipping-footer-link {
    text-align: center;
  }

  .pg-sec-shipping-footer-link__action {
    text-decoration: underline;
    font-size: 14px;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
  }

  .pg-sec-shipping-footer-link__action:hover {
    opacity: 1;
    color: var(--color-text-highlight);
  }

  .pg-sec-shipping-gift-id {
    text-align: center;

    span {
      font-size: 14px;
      color: #666;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.5;
      display: inline-flex;
      padding: 3px 8px;
      justify-content: center;
      align-items: center;
      border: 1px solid;
    }
  }

  .c-sec-shipping-delivery-estimate__text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .c-sec-shipping-delivery-estimate__sub {
    font-size: 12px;
    color: #4d4d4d;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-top: 4px;
    line-height: 1.5;
  }

  .c-sec-shipping-delivery-estimate__select {
    margin-top: 16px;
  }

  .pg-sec-shipping-delivery-address {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-sec-shipping-delivery-address__name {
    font-weight: 700;
    font-size: 16px;
  }
}

@layer pages {
  .pg-sec-shipping-login {
    min-block-size: 100dvh;
    background-color: var(--color-bg-surface);
    position: relative;
    padding-block: 56px;
  }

  .pg-sec-shipping-login__inner {
    inline-size: min(100%, 390px);
    margin-inline: auto;
  }

  .pg-sec-shipping-login__header {
    margin-block-end: 40px;
  }

  .pg-sec-shipping-login__description {
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
    margin-block-end: 32px;
  }

  .pg-sec-shipping-login__fields {
    padding-inline: 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-end: 32px;
  }

  .pg-sec-shipping-login__action {
    display: flex;
    justify-content: center;
    margin-block-end: 32px;
  }

  .pg-sec-shipping-login__button {
    max-inline-size: 300px;
    inline-size: min(100%, 390px);
  }
}

@layer pages {
  .pg-sec-shipping-status {
    min-block-size: 100dvh;
  }

  .pg-sec-shipping-status__main {
    padding-block: 56px;

    @media screen and (width >= 769px) {
      padding-block: 80px;
    }
  }

  .pg-sec-shipping-status__inner {
    padding-inline: var(--inner-padding, 24px);
    inline-size: min(100%, calc(700px + var(--inner-padding, 24px) * 2));
    margin-inline: auto;
  }

  .pg-sec-shipping-status__id {
    margin-top: 24px;
  }

  .pg-sec-shipping-status__info {
    padding: 36px 24px;
    border-radius: 16px;
    background: var(--color-bg-surface);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-block: 56px;
  }

  .pg-sec-shipping-status__info-image {
    line-height: 1;
  }

  .pg-sec-shipping-status__info-title {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .pg-sec-shipping-status__info-data {
    font-size: 14px;
    line-height: 1.5;
  }

  .pg-sec-shipping-status__info > p:not([class]) {
    line-height: 1.5;
  }

  .pg-sec-shipping-status__info > p:not([class]) strong {
    font-weight: 700;
    color: var(--color-status-error-strong);
  }

  .pg-sec-shipping-status__info-button {
    --button-padding-inline: 20px;

    inline-size: min(100%, 194px);
  }

  .pg-sec-shipping-status__info--warning {
    border: 2px solid var(--color-status-error-strong);
    background: #ffe1de;
    gap: 24px;
  }

  .pg-sec-shipping-status__info--warning .pg-sec-shipping-status__info-title {
    color: var(--color-status-error-strong);
  }

  .pg-sec-shipping-status__info--warning .pg-sec-shipping-status__info-data > p {
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .pg-sec-shipping-status__info--warning .pg-sec-shipping-status__info-data > p:first-child {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  .pg-sec-shipping-status__stack {
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin-block-end: 72px; /* 56 + 16 */
  }

  .pg-sec-shipping-status__stack-section {
    .c-section-heading {
      margin-block-end: 16px;
    }

    .c-product-summary__title {
      height: auto;
    }
  }

  .pg-sec-shipping-status__product-action {
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }

  .pg-sec-shipping-status__product-button {
    inline-size: min(100%, 194px);
  }
}

@layer pages {
  .pg-sec-shipping-reselect__main {
    padding-bottom: 56px;
    overflow: hidden;
  }

  .pg-sec-shipping-reselect__main:has(.c-marquee),
  .pg-sec-shipping-reselect__main:has(.pg-secondary-marquee) {
    padding-bottom: 0;

    .c-marquee,
    .pg-secondary-marquee {
      margin-top: 56px;
    }
  }

  .pg-sec-shipping-reselect__inner {
    padding-inline: var(--inner-padding);
  }

  .pg-sec-shipping-reselect .c-section-choose-a-gift__gift-id {
    margin-top: 0;
  }

  @media screen and (width >= 769px) {
    .pg-sec-shipping-reselect__main {
      padding-block: 80px;
    }

    .pg-sec-shipping-reselect__main:has(.c-marquee),
    .pg-sec-shipping-reselect__main:has(.pg-secondary-marquee) {
      padding-block: 80px 0;

      .c-marquee,
      .pg-secondary-marquee {
        margin-top: 80px;
      }
    }

    .pg-sec-shipping-reselect__inner {
      max-width: calc(900px + var(--inner-padding) * 2);
      margin: 0 auto;
      padding-inline: var(--inner-padding);
    }
  }

  .pg-sec-shipping-reselect-form__main {
    padding-block: 60px;

    @media screen and (width >= 769px) {
      padding-block: 80px;
    }
  }

  .pg-sec-shipping-reselect-form__id {
    margin-top: 24px;
  }

  .pg-sec-shipping-reselect-form__inner {
    max-inline-size: calc(700px + var(--inner-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--inner-padding);
  }

  .pg-sec-shipping-reselect-form__stack {
    margin-block: 48px 64px; /* 48 + 16 */
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .pg-sec-shipping-reselect-form__stack-section {
    .c-section-heading {
      margin-block-end: 16px;
    }
  }

  .pg-sec-shipping-reselect-complete__inner {
    max-inline-size: calc(700px + var(--inner-padding) * 2);
    margin-inline: auto;
    padding-inline: var(--inner-padding);
  }

  .pg-sec-shipping-reselect-complete__stack {
    margin-block: 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;

    @media screen and (width >= 769px) {
      margin-block: 40px;
      gap: 40px;
    }
  }

  .pg-sec-shipping-reselect-complete__message {
    padding-block: 60px;

    @media screen and (width >= 769px) {
      padding-block-start: 80px;
    }
  }

  .pg-sec-shipping-reselect-complete__header {
    display: flex;
    justify-content: center;
  }

  .pg-sec-shipping-reselect-complete__id {
    margin-top: 24px;
  }

  .pg-sec-shipping-reselect-complete__lead {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    margin-block: 32px 24px;
  }

  .pg-sec-shipping-reselect-complete__stack-section {
    .c-section-heading {
      margin-block-end: 16px;
    }
  }

  .pg-sec-shipping-reselect-complete__actions {
    text-align: center;
  }
}

@layer pages {
  .pg-cart__main {
    padding-top: 56px;

    @media screen and (width >= 769px) {
      padding-top: 80px;
    }
  }

  .pg-cart:has(.c-page-navigation) .pg-cart__main {
    padding-top: 26px;

    @media screen and (width >= 769px) {
      padding-top: 80px;
    }
  }

  .pg-cart__inner {
    --inner-padding: 20px;
    --inner-width: 700px;
    --min-inline-size: calc(var(--inner-width) + var(--inner-padding) * 2);

    padding-inline: var(--inner-padding);
    inline-size: min(100%, var(--min-inline-size));
    margin-inline: auto;
  }

  .pg-cart__column {
    @media screen and (width >= 769px) {
      display: grid;
      gap: 60px;
      grid-template-columns: 1fr 342px;
      align-items: start;
    }
  }

  .pg-cart__column-left {
    @media screen and (width >= 769px) {
      padding-bottom: 30px;
      max-width: 500px;
    }
  }

  .pg-cart__column-right {
    padding-bottom: 56px;

    @media screen and (width >= 769px) {
      position: sticky;
      top: calc(var(--header-height) + 40px);
      padding-bottom: 80px;
    }
  }

  .pg-cart__inner:has(.pg-cart__column) {
    --inner-padding: 20px;
    --inner-width: calc(342px + 60px + 500px);
    --min-inline-size: calc(var(--inner-width) + var(--inner-padding) * 2);
  }

  .pg-cart__header {
    margin-bottom: 56px;

    @media screen and (width >= 769px) {
      margin-bottom: 24px;
    }
  }

  /* ----------------------------------------
  .c-cart-button
  // カートページで広く使われるボタンのスタイル
---------------------------------------- */

  .c-cart-button {
    display: flex;
    place-items: center;
    justify-content: center;
    padding: 5px 24px;
    min-block-size: 38px;
    background-color: var(--color-text-primary);
    color: var(--color-bg-canvas);
    border-radius: 1000px;
    font-weight: 700;
    font-size: 14px;
    min-width: 147px;
    line-height: 1.5;
    border: 1px solid var(--color-text-primary);
  }

  .c-cart-button:hover {
    background-color: var(--color-brand-primary, #000);
    color: var(--color-bg-canvas);
  }

  .c-cart-button--secondary {
    background-color: var(--color-bg-canvas);
    color: var(--color-text-primary);
    border: 1px solid var(--color-text-primary);
  }

  /* ----------------------------------------
  Cart item card: pg-cart-item-01
---------------------------------------- */

  .pg-cart-item-01 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid #666;
    padding: 24px 0;

    @media screen and (width >= 769px) {
      padding: 24px 20px;
    }
  }

  .pg-cart-item-01__main {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px 10px;
    align-items: start;

    @media screen and (width >= 769px) {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
  }

  .pg-cart-item-01__image {
    flex-shrink: 0;
    inline-size: 82px;
    block-size: 82px;

    @media screen and (width >= 769px) {
      inline-size: 100px;
      block-size: 100px;
    }

    img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .pg-cart-item-01__body {
    display: contents;

    @media screen and (width >= 769px) {
      flex: 1 0 0;
      min-inline-size: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-self: stretch;
    }
  }

  .pg-cart-item-01__header {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    column-gap: 10px;
    align-items: start;
    height: 100%;

    @media screen and (width >= 769px) {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
  }

  .pg-cart-item-01__info {
    flex: 1 0 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-cart-item-01__title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: black;
  }

  .pg-cart-item-01__variant {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: black;
  }

  .pg-cart-item-01__warning {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #de5141;
  }

  .pg-cart-item-01__delete {
    flex-shrink: 0;
    display: flex;
    inline-size: 18px;
    block-size: 18px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
  }

  .pg-cart-item-01__footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0;

    @media screen and (width >= 769px) {
      padding-block: 4px;
    }
  }

  .pg-cart-item-01__meta {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .pg-cart-item-01__price {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: black;
  }

  .pg-cart-item-01--error {
    position: relative;

    &::before {
      /* margin: 0 -24px; */
      background-color: #ffe1de80;
      content: "";
      height: 100%;
      position: absolute;
      inset: 0;
      left: -24px;
      right: -24px;
      z-index: -1;

      @media screen and (width >= 769px) {
        left: 0;
        right: 0;
      }
    }
  }

  .pg-cart-item-01__error-message {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #c03323;
    text-align: right;
  }

  .pg-cart-item-01__error-delete-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    background-color: #c03323;
    font-size: 14px;
    padding: 4px 16px;
    border-radius: 1000px;
    min-block-size: 32px;
    min-inline-size: 110px;
  }

  /* ----------------------------------------
  Subtotal
---------------------------------------- */

  .pg-cart__subtotal {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
  }

  .pg-cart__subtotal-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    padding: 8px;
  }

  .pg-cart__subtotal-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .pg-cart__subtotal-price {
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }

  .pg-cart__subtotal-note {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  /* ----------------------------------------
  Previously in cart section
---------------------------------------- */

  .pg-cart__prev-section {
    background: var(--color-bg-surface);
    padding-block: 56px;

    @media screen and (width >= 769px) {
      padding-block: 80px;
    }

    .c-product-card__title {
      font-size: 14px;
    }
  }

  .pg-cart__prev-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    padding-inline: 24px;

    @media screen and (width >= 769px) {
      text-align: center;
      margin-bottom: 40px;
    }
  }

  .pg-cart__prev-slider-wrapper {
    overflow-x: auto;
    scrollbar-width: none;

    @media screen and (width >= 769px) {
      overflow-x: visible;
    }
  }

  .pg-cart__prev-slider {
    display: inline-flex;
    gap: 16px;
    padding-block-end: 8px;
    justify-content: flex-start;
    padding-inline: 24px;

    @media screen and (width >= 769px) {
      display: flex;
      justify-content: center;
      padding-inline: 0;
    }

    .c-product-card {
      flex-shrink: 0;
      inline-size: 150px;

      @media screen and (width >= 769px) {
        inline-size: 160px;
      }
    }
  }

  /* ----------------------------------------
  Terms box
---------------------------------------- */
  .pg-cart-terms-box {
    padding: 20px 10px;
    border: 1px solid rgb(178 178 178 / 30%);
    overflow-y: auto;
  }

  .pg-cart-terms-box__heading {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
  }

  .pg-cart-terms-box__body {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    height: 156px;

    & > p {
      margin-block-end: 1.5em;
    }

    & > h2 {
      font-weight: 500;
    }

    &::after {
      content: "";
      display: block;
      block-size: 1px;
    }
  }

  /* ----------------------------------------
  pg-cart-submit
---------------------------------------- */

  .pg-cart-submit {
    inline-size: min(100%, 300px);
    display: flex;
    place-content: center;
    padding: 14px 24px;
    min-block-size: 60px;
    background-color: var(--color-text-primary);
    color: var(--color-bg-canvas);
    border-radius: 1000px;
    font-weight: 700;
    text-align: center;
  }

  /* disabled */
  .pg-cart-submit:disabled,
  .pg-cart-submit.is-disabled {
    background-color: #b2b2b2;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* hover */
  .pg-cart-submit:hover,
  .pg-cart-submit.is-hover {
    background-color: var(--color-brand-primary, #000);
  }

  /* ----------------------------------------
  pg-cart-guest-submit
  // ゲストとして購入 のほか
  // 前の画面に戻る などのリンクに使う
  // 名前変更するかも。
---------------------------------------- */

  .pg-cart-guest-submit {
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-decoration: underline;
  }

  .pg-cart-guest-submit:hover {
    opacity: 1;
    color: var(--color-brand-primary);
  }

  /* ----------------------------------------
  c-modal-cart-* 本体は components/_modal-cart.css へ移動。
  以下の 2 ルールは .c-cart-button（pages レイヤー）との
  同一レイヤーでの上書き関係（カスケード）を保つためここに残す。
---------------------------------------- */

  .c-modal-cart-purchase-confirm__submit .c-cart-button {
    block-size: 48px;
    inline-size: 176px;
    font-size: 16px;
  }

  .c-modal-cart-purchase-confirm-other__submit .c-cart-button {
    display: inline-flex;
    min-inline-size: 178px;
  }

  /* ----------------------------------------
  pg-cart-stepper
---------------------------------------- */

  .pg-cart-stepper {
    margin-bottom: 56px;
    position: relative;

    @media screen and (width >= 769px) {
      margin-bottom: 40px;
    }
  }

  .pg-cart-stepper__list {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: fit-content;
    margin-inline: auto;

    &::before {
      content: "";
      display: block;
      block-size: 8px;
      background-color: var(--color-bg-surface);
      margin-block-end: 20px;
      top: 16px;
      left: 40px;
      right: 40px;
      position: absolute;
      z-index: -1;
    }
  }

  .pg-cart-stepper__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    inline-size: 80px;
    text-align: center;
  }

  /* .pg-cart-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(50% + 20px);
  inline-size: calc(100% - 40px);
  block-size: 2px;
  background-color: var(--color-bg-surface);
  z-index: -1;
} */

  .pg-cart-stepper__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 9999px;
    background-color: var(--color-bg-surface);
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .pg-cart-stepper__label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-cart-stepper__item.is-current .pg-cart-stepper__index,
  .pg-cart-stepper__item[aria-current="step"] .pg-cart-stepper__index {
    background-color: var(--color-support-cyan-primary);
  }

  /* ----------------------------------------
  pg-cart-shipping-order
---------------------------------------- */

  .pg-cart-shipping-order {
    margin-top: 30px;
  }

  .pg-cart-shipping-order__delivery {
    background-color: var(--color-bg-surface);
    padding: 20px;
    border-radius: 16px;
  }

  .pg-cart-shipping-order__delivery-heading {
    margin-block-end: 24px;
  }

  .pg-cart-shipping-order__delivery-title {
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 18px;
    line-height: 1.5;
  }

  .pg-cart-shipping-order__delivery-text {
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 14px;
    color: #4d4d4d;
    line-height: 1.5;
  }

  .pg-cart-shipping-order__delivery-options {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-block: 24px;
  }

  .pg-cart-shipping-order__items {
    padding: 16px;

    .pg-cart-item-02:not(:last-child) {
      border-bottom: 1px solid #000;
    }
  }

  .pg-cart-shipping-order__items-heading {
    font-weight: 700;
  }

  /* ----------------------------------------
  pg-cart-shipping-summary
---------------------------------------- */

  .pg-cart-shipping-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-cart-shipping-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    line-height: 1;
  }

  .pg-cart-shipping-summary__value {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    &.is-ja {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: 16px;
    }
  }

  .pg-cart-shipping-summary__divider {
    border: none;
    border-top: 1px solid #000;
    margin-block: 0;
  }

  /* ----------------------------------------
  pg-cart-item-02
---------------------------------------- */

  .pg-cart-item-02 {
    padding: 16px 0;
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }

  .pg-cart-item-02__image {
    position: relative;
  }

  .pg-cart-item-02__image img {
    display: block;
    inline-size: 82px;
    block-size: 82px;
    object-fit: cover;
  }

  .pg-cart-item-02__count {
    position: absolute;
    top: -6px;
    left: -6px;
    line-height: 1;
    z-index: 1;

    span {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 1000px;
      background-color: #000;
      color: var(--color-bg-canvas);
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-en);
    }
  }

  .pg-cart-item-02__body {
    display: flex;
    flex-direction: column;
  }

  .pg-cart-item-02__title {
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;

    /* 1行 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pg-cart-item-02__meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
  }

  .pg-cart-item-02__price {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .pg-cart-item-02__text {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  /* ----------------------------------------
  pg-cart-shipping-subtotal-box
---------------------------------------- */

  .pg-cart-shipping-subtotal-box {
    border: 1px solid #000;
    background-color: #fff;
  }

  .pg-cart-shipping-subtotal-box__total {
    padding: 24px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;

    dl {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    dd {
      font-family: var(--font-en);
      font-size: 24px;
      font-weight: 700;
      line-height: 1;
    }
  }

  .pg-cart-shipping-subtotal-box__table {
    border-top: 1px solid #000;
    padding: 24px;

    dl {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2px 5px;
      align-items: center;
      font-size: 14px;

      dt {
        grid-column: 1 / 2;
        font-size: 14px;
      }

      dd {
        grid-column: 2 / 3;
        font-family: var(--font-en);
        font-size: 18px;
        text-align: right;
        font-weight: 700;

        &.is-ja {
          font-family: var(--font-jp);
          font-weight: 700;
          font-size: 14px;
        }
      }
    }
  }

  .pg-cart-shipping-subtotal-box__actions {
    background-color: var(--color-bg-surface);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;

    .c-button:not(.c-button--size-xs) {
      width: 100%;
    }
  }

  /* ----------------------------------------
  pg-cart-shipping-subtotal-box
  .pg-cart-wrapping ページで使用する
---------------------------------------- */
  .pg-cart-item-group {
  }

  .pg-cart-item-group__selects {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-cart-item-group__summary {
    margin-block: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
  }

  .pg-cart-item-group__summary-value {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    &.is-ja {
      font-family: var(--font-jp);
      font-weight: 400;
      font-size: 16px;
    }
  }

  /* ----------------------------------------
  .pg-cart-wrapping-card
  // pg-cart-review ページで使用する
---------------------------------------- */

  .pg-cart-wrapping-card {
    background-color: #fff;
    display: grid;
    grid-template-areas:
      "image details"
      "message message";
    grid-template-columns: 70px 1fr;
    padding: 8px;
  }

  .pg-cart-wrapping-card__image {
    grid-area: image;
    inline-size: 70px;
    block-size: 70px;

    img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .pg-cart-wrapping-card__details {
    grid-area: details;
    padding-inline-start: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    line-height: 1.5;
    font-weight: 400;
  }

  .pg-cart-wrapping-card__details-sub {
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .pg-cart-wrapping-card__details-title {
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  .pg-cart-wrapping-card__details-price {
    font-family: var(--font-en);
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 700;
  }

  .pg-cart-wrapping-card__message {
    grid-area: message;
    border-top: 1px solid #e5e5e5;
    margin-top: 8px;
    padding-top: 12px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-cart-wrapping-card__message-text {
    /* 一行 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@layer pages {
  .pg-cart-top {
    .pg-cart__header {
      @media screen and (width >= 769px) {
        margin-bottom: 40px;
      }
    }

    .c-section-heading {
      margin-bottom: 24px;
    }

    .pg-cart__main {
      padding-bottom: 56px;
      overflow: hidden;
    }

    /* ----------------------------------------
  Cart items list
---------------------------------------- */

    .pg-cart__items {
      border-top: 1px solid black;
      margin-bottom: 24px;
    }

    /* ----------------------------------------
  Purchase section
---------------------------------------- */

    /* ----------------------------------------
  Shipping options
---------------------------------------- */

    .pg-cart__shipping-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }

    .c-cart-shipping-option {
      display: flex;
      gap: 14px;
      align-items: center;
      padding: 24px 20px;

      /* border: 1px solid black; */

      outline: 1px solid black;
      border-radius: 16px;
      cursor: pointer;
      background: white;
      inline-size: 100%;

      &:has(input[type="radio"]:checked) {
        /* border: 2px solid var(--color-brand-primary); */

        /* border-color: transparent; */
        outline: 2px solid var(--color-brand-primary);
      }

      &:has(input[type="radio"]:disabled) {
        background-color: #e5e5e5;
        cursor: not-allowed;
      }
    }

    .c-cart-shipping-option__body {
      flex: 1 0 0;
      min-inline-size: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .c-cart-shipping-option__name-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .c-cart-shipping-option__name {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
      color: black;
    }

    .c-cart-shipping-option__desc {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1;
      color: #808080;
    }

    .c-cart-shipping-option__price-group {
      display: flex;
      gap: 12px;
      flex-direction: column;

      @media screen and (width >= 769px) {
        align-items: center;
        flex-direction: row;
      }
    }

    .c-cart-shipping-option__price {
      font-family: var(--font-en);
      font-size: 22px;
      font-weight: 700;
      line-height: 1;
      color: black;
    }

    .c-cart-shipping-option__price-detail {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.4;
      color: #4d4d4d;

      @media screen and (width >= 769px) {
        /* 横並びにしたとき、価格の カンマ の分だけずれて見えるので調整 */
        translate: 0 2px;

        li {
          display: inline;

          &:not(:last-child)::after {
            content: "＋";
            display: inline-block;
            margin-inline: 4px;
          }
        }
      }
    }

    .c-cart-shipping-option__error-message {
      color: #c03323;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.5;
    }

    /* ----------------------------------------
  Warning banner
---------------------------------------- */

    .c-cart-warning-banner {
      text-align: center;
    }

    .c-cart-warning-banner a {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      align-self: center;
      padding: 6px 12px;
      background: #ffe1de;
      border: 1px solid #c03323;
      border-radius: 4px;
      text-decoration: none;

      &:hover {
        opacity: 0.7;
      }
    }

    .c-cart-warning-banner__text {
      font-size: 13px;
      font-weight: 500;
      line-height: normal;
      color: #c03323;
      white-space: nowrap;
    }

    .c-cart-warning-banner__icon {
      translate: 0 1px;
    }
  }

  .pg-cart-top__section {
    padding-top: 36px;
    /* display: flex;
    flex-direction: column;
    gap: 24px; */

    &:first-of-type {
      padding-top: 0;
    }
  }

  .pg-cart-top__section--items {
    margin-bottom: 56px;

    @media screen and (width >= 769px) {
      margin-bottom: 40px;
    }
  }

  .pg-cart-top__section--shipping {
    margin-bottom: 56px;

    @media screen and (width >= 769px) {
      margin-bottom: 40px;
    }
  }

  .pg-cart-top__purchase {
  }

  .pg-cart-top__terms {
  }

  .pg-cart-top__terms-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .pg-cart-top__terms-box {
    margin-bottom: 36px;
  }

  .pg-cart-top__agree {
    margin: 36px 0;
    text-align: center;
  }

  .pg-cart-top__notes {
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-inline: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-cart-top__btns {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    padding-top: 16px;
  }
}

@layer pages {
  .pg-cart-shipping {
  }

  .pg-cart-shipping__section {
    margin: 56px 0;
  }

  .pg-cart-shipping-options-simple {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block: 24px;
  }

  .pg-cart-shipping-option-simple {
    display: grid;
    grid-template-columns: 24px 1fr;
    place-items: center start;
    padding: 24px;
    gap: 14px;
    border: 1px solid #b2b2b2;
    /* border: 1px solid rgb(178 178 178/30%); */
    border-radius: 8px;
    cursor: pointer;

    &:hover,
    &:has(input[type="radio"]:checked) {
      outline: 2px solid var(--color-brand-primary);
      border-color: transparent;
    }
  }

  .pg-cart-shipping-option-simple__title {
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .pg-cart-shipping-options-other .c-form-field-label {
    font-weight: 700;
  }
}

@layer pages {
  .pg-cart-wrapping {
    .pg-cart__column-left {
      padding-bottom: 56px;
      @media screen and (width >= 769px) {
        padding-bottom: 80px;
      }
    }
  }

  .pg-cart-wrapping__section {
    .pg-cart-item-group {
      margin-block: 56px;
    }
  }
  .pg-cart-wrapping__section-no-wrapping {
  }

  .pg-cart-wrapping__no-wrapping-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }

  .pg-cart-wrapping__no-wrapping-items {
    border-top: 1px solid #000;
  }

  .pg-cart-wrapping__no-wrapping-items .pg-cart-item-02 {
    border-bottom: 1px solid #666;
  }
}

@layer pages {
  .pg-cart-review {
    .pg-cart__column-left {
      padding-bottom: 56px;

      @media screen and (width >= 769px) {
        padding-bottom: 80px;
      }
    }
  }

  .pg-cart-review__section {
    padding: 24px 0;
    margin-block: 56px 0;

    &:first-of-type {
      margin-top: 0;
    }

    .c-section-heading {
      margin-bottom: 24px;
    }
  }

  .pg-cart-review__groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-cart-review-group {
    background-color: var(--color-bg-surface);
    padding: 20px 16px;
    border-radius: 16px;

    .pg-cart-item-02 {
      padding-block: 0;
    }
  }

  .pg-cart-review-group__info {
    margin-top: 24px;
  }

  .pg-cart-review-group__info-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .pg-cart-review-group__info-title {
    font-weight: 700;
  }

  .pg-cart-review-group__info-button {
    color: #2a82d5;
    text-decoration: underline;
    font-size: 14px;
    letter-spacing: 0.02em;

    &:hover {
      opacity: 1;
      color: var(--color-button-hover);
    }
  }

  .pg-cart-review-group__info-wrappings {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-cart-review-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .c-section-heading {
      margin-bottom: 0;
    }
  }

  .pg-cart-review-heading__button {
    color: #2a82d5;
    text-decoration: underline;
    font-size: 14px;
    letter-spacing: 0.02em;

    &:hover {
      opacity: 1;
      color: var(--color-button-hover);
    }
  }

  .pg-cart-review-info {
    display: flex;
    flex-direction: column;
    margin-block: 24px 0;
  }

  .pg-cart-review-info__title {
    font-weight: 700;
  }

  .pg-cart-review-info__note {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #808080;
  }

  .pg-cart-review-shipping-data {
    padding: 20px 16px;
    border-top: 1px solid #000;
    margin-top: 30px;
  }

  .pg-cart-review-shipping-data__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .pg-cart-review-shipping-data__title {
    font-weight: 700;
    font-size: 18px;
  }

  .pg-cart-review-shipping-data__button {
    color: #2a82d5;
    text-decoration: underline;
    font-size: 14px;
    letter-spacing: 0.02em;

    &:hover {
      opacity: 1;
      color: var(--color-button-hover);
    }
  }

  .pg-cart-review-shipping-data__text {
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #666;
  }
}

@layer pages {
  /*
  テーマ詳細・単品詳細はこちら .pg-product-detail で管理する。
  テーマ詳細は .pg-product-detail--theme
  単品詳細は .pg-product-detail--tanpin
*/
}

@layer pages {
  .pg-product-detail {
  }

  .pg-product-detail__main {
    padding-bottom: 36px;

    @media screen and (width >= 769px) {
      padding-bottom: 80px;
    }
  }

  .pg-product-detail__search {
    display: none;

    @media screen and (width >= 769px) {
      display: block;
    }
  }

  .pg-product-detail__column {
    @media screen and (width >= 769px) {
      display: grid;
      grid-template-columns: minmax(0, 482px) minmax(0, 1fr);
      gap: 60px;
      align-items: start;
    }
  }

  .pg-product-detail__column-left {
    @media screen and (width >= 769px) {
      position: sticky;
      top: calc(var(--header-height) + 24px);
      align-self: start;
    }
  }

  .pg-product-detail__column-right {
    @media screen and (width >= 769px) {
      gap: 20px;
      padding: 0;
    }
  }

  .pg-product-detail__column-gallery {
    margin-inline: calc(var(--inner-padding) * -1);

    @media screen and (width >= 769px) {
      margin-inline: 0;
    }
  }

  /* ----------------------------------------
  .pg-product-detail-hero
---------------------------------------- */
  .pg-product-detail-hero__gallery {
    margin-inline: calc(var(--inner-padding) * -1);

    @media screen and (width >= 769px) {
      margin-inline: 0;
    }
  }

  .pg-product-detail-hero__main {
    padding-block: 32px 48px; /* 32 + 16 */

    @media screen and (width >= 769px) {
      padding-block: 0 20px;
    }
  }

  .pg-product-detail-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pg-product-detail-hero__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-block: 12px 8px;

    @media screen and (width >= 769px) {
      font-size: 28px;
      margin-block: 12px;
    }
  }

  .pg-product-detail-hero__group-01 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;

    @media screen and (width >= 769px) {
      display: block;
      margin: 12px 0;
    }
  }

  .pg-product-detail-hero__favorite--pc {
    display: none;

    @media screen and (width >= 769px) {
      display: block;
    }
  }

  .pg-product-detail-hero__favorite--sp {
    display: block;

    @media screen and (width >= 769px) {
      display: none;
    }
  }

  .pg-product-detail-hero__excerpt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
    @media screen and (width >= 769px) {
      font-size: 18px;
    }
  }

  .pg-product-detail-hero__group-02 {
    margin-block: 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding-inline: 4px;

    @media screen and (width >= 769px) {
      display: block;
      margin-block: 0 40px;
    }
  }

  .pg-product-detail-hero__price {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 8px;

    @media screen and (width >= 769px) {
      flex-direction: row;
      align-items: flex-end;
    }
  }

  .pg-product-detail-hero__price-value {
    font-family: var(--font-en);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;

    @media screen and (width >= 769px) {
      font-size: 32px;
    }
  }

  .pg-product-detail-hero__price-label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;

    @media screen and (width >= 769px) {
      font-size: 14px;
      translate: 0 -2px;
    }
  }

  .pg-product-detail-hero__button {
    @media screen and (1px <= width < 390px) {
      width: 210px;
    }

    @media screen and (width >= 769px) {
      margin-top: 40px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
    }

    .c-button {
      width: 100%;
      max-width: 240px;

      @media screen and (width >= 769px) {
        max-width: 100%;
      }
    }
  }

  .pg-product-detail-hero__shipping {
    border-top: 1px solid;
    padding: 16px 0 0;

    @media screen and (width >= 769px) {
      color: #4d4d4d;
      padding: 16px 4px 0;
    }
  }

  .pg-product-detail-hero__shipping-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pg-product-detail-hero__shipping-texts {
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    padding-bottom: 16px;
    margin-top: 10px;

    ul {
      li {
        padding-left: 1.2em;

        &::before {
          content: "・";
          display: inline-block;
          margin-left: -1.2em;
        }
      }
    }
  }

  .pg-product-detail-hero__shipping-button {
    text-align: right;
  }

  /* ----------------------------------------
  .pg-product-detail-recommend
---------------------------------------- */

  .pg-product-detail-recommend {
    background-color: var(--color-bg-surface);
    padding: 32px;
    border-radius: 20px;
  }

  .pg-product-detail-recommend__title {
    margin-bottom: 16px;
    text-align: center;
    line-height: 1;
  }

  .pg-product-detail-recommend__texts {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.02em;
  }

  /* ----------------------------------------
  .pg-product-detail-lineup
---------------------------------------- */
  .pg-product-detail-lineup {
  }

  .pg-product-detail-lineup__note {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }

  /* ----------------------------------------
  .pg-product-detail-lineup-box
---------------------------------------- */
  .pg-product-detail-lineup-box {
    background-color: var(--color-bg-surface);
    padding: 40px 0 0;
    margin-inline: calc(var(--inner-padding) * -1);

    @media screen and (width >= 769px) {
      border-radius: 24px;
      margin-inline: 0;
    }

    .c-graphic-title__title {
      max-width: 274px;

      @media screen and (width >= 769px) {
        max-width: 100%;
      }
    }
  }

  .pg-product-detail-lineup-box__basic {
    padding: 40px 16px 24px;

    @media screen and (width >= 769px) {
      padding-inline: 43px;
    }
  }

  .pg-product-detail-lineup-box__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 4px;
    place-items: center;
    margin: 8px 0;

    &::before,
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 3px;
      background-color: #fff;
    }
  }

  .pg-product-detail-lineup-box__divider-icon {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background-color: #fff;
    color: #e1d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pg-product-detail-lineup-box__title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;

    @media screen and (width >= 769px) {
      justify-content: center;
      margin-bottom: 24px;
    }

    & > span {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.02em;

      @media screen and (width >= 769px) {
        font-size: 22px;
      }

      & > span {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;

        @media screen and (width >= 769px) {
          font-size: 18px;
        }
      }
    }
  }

  .pg-product-detail-lineup-box__additional {
    padding: 24px 16px;

    @media screen and (width >= 769px) {
      padding: 24px 40px;
    }
  }

  .pg-product-detail-lineup-box__additional-layout {
    @media screen and (width >= 900px) {
      display: grid;
      grid-template-columns: 474px 1fr;
      gap: 32px;
      align-items: center;
      grid-template-areas:
        "grid text"
        "grid action";

      .pg-product-detail-lineup-box__additional-grid {
        grid-area: grid;
      }

      .pg-product-detail-lineup-box__additional-text {
        grid-area: text;
        margin-top: auto;
        margin-bottom: 0;
      }

      .pg-product-detail-lineup-box__additional-action {
        grid-area: action;
        margin: 0 0 auto;
        text-align: left;
      }
    }
  }

  .pg-product-detail-lineup-box__additional .pg-product-detail-lineup-box__title {
    margin-bottom: 8px;

    @media screen and (width >= 769px) {
      margin-bottom: 24px;
    }
  }

  .pg-product-detail-lineup-box__additional-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-product-detail-lineup-box__additional-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .pg-product-detail-lineup-box__additional-action {
    text-align: center;
    margin-block: 8px;
  }

  /* ----------------------------------------
  .pg-product-detail-info
---------------------------------------- */
  .pg-product-detail-info {
    margin-top: 32px;
    padding-block: 16px;

    @media screen and (width >= 769px) {
      margin-top: 40px;
    }

    .l-inner {
      @media screen and (width >= 769px) {
        --inner-width: 900px;
      }
    }
  }

  .pg-product-detail-info__decos {
    display: flex;
    justify-content: center;
    gap: 20px;

    @media screen and (width >= 769px) {
      display: none;
    }
  }

  .pg-product-detail-info__recommend {
    margin-block: 40px;
  }

  .pg-product-detail-info__spec {
    margin: 40px 0;
    padding-top: 16px;
    border-top: 1px solid #b2b2b2;

    @media screen and (width >= 769px) {
      border-top: none;
      padding-top: 0;
    }
  }

  .pg-product-detail-info__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 8px;
    margin: 40px 0;

    @media screen and (width >= 769px) {
      margin: 60px 0;
    }
  }

  .pg-product-detail-info__sns {
    text-align: center;
    margin: 40px 0;
    font-weight: 500;

    nav {
      margin-top: 20px;
    }

    ul {
      line-height: 1;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    li a {
      &:hover {
        opacity: 1;
        color: var(--color-text-highlight);
      }
    }
  }

  .pg-product-detail-info__signature {
  }

  .pg-product-detail-info__signature-sign {
    text-align: center;

    span:first-child {
      font-family: var(--font-poppins);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    a:last-child,
    span:last-child {
      font-size: 16px;
      font-weight: 500;
      text-decoration-line: underline;
    }

    a:hover {
      color: var(--color-text-highlight);
      opacity: 1;
    }
  }

  .pg-product-detail__editors-picks {
    border-top: 1px solid var(--color-text-primary);
  }

  /* ----------------------------------------
  .pg-product-detail-cta
---------------------------------------- */
  .pg-product-detail__sticky-cta {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-page-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s ease;
    pointer-events: none;
    background-color: #fff;

    @media screen and (width >= 769px) {
      display: none;
    }
  }

  .pg-product-detail__sticky-cta.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .pg-product-detail-cta {
    padding: 16px 20px 20px;
  }

  .pg-product-detail-cta__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 244px);
    gap: 8px;
    max-width: 400px;
    margin-inline: auto;

    @media screen and (1px < width < 769px) {
      grid-template-columns: 1fr minmax(0, 234px);
    }
  }

  .pg-product-detail-cta__price {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 8px;

    @media screen and (width >= 769px) {
      flex-direction: row;
      align-items: flex-end;
    }
  }

  .pg-product-detail-cta__value {
    font-family: var(--font-en);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .pg-product-detail-cta__label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  .pg-product-detail-cta__button {
    .c-button {
      width: 100%;
      max-width: 240px;
      pointer-events: auto;

      @media screen and (width >= 769px) {
        max-width: 100%;
      }
    }
  }

  /* ----------------------------------------
  .pg-product-detail-lineup-list
---------------------------------------- */
  .pg-product-detail-lineup-list {
    position: relative;
  }

  .pg-product-detail-lineup-list__viewport {
    margin-inline: calc(16px * -1);
    padding-inline: 16px;
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .pg-product-detail-lineup-list__list {
    @media screen and (1px <= width <= 768px) {
      display: flex;
      gap: 12px;
      width: max-content;
    }
  }

  .pg-product-detail-lineup-list__nav {
    display: none;
  }

  /* ----------------------------------------
  .pg-product-detail-lineup-card
---------------------------------------- */

  .pg-product-detail-lineup-card {
    flex: 0 0 150px;
    width: 150px;
  }

  .pg-product-detail-lineup-card--basic {
    .pg-product-detail-lineup-card__title {
      font-size: 12px;
      font-weight: 400;

      /* // 二行 */
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  @media screen and (width >= 769px) {
    .pg-product-detail-lineup-list {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: start;
      gap: 22px;
      align-items: center;
    }

    .pg-product-detail-lineup-list__viewport {
      margin-inline: 0;
      padding-inline: 0;
      width: min(100%, 798px);
      justify-self: center;
      overflow: hidden;
    }

    .pg-product-detail-lineup-list__list {
      /* width: 100%; */
    }

    .pg-product-detail-lineup-list__nav {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 999px;
      background-color: rgb(0 0 0 / 70%);
      color: #fff;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .pg-product-detail-lineup-list__nav:hover {
      opacity: 0.4;
    }

    .pg-product-detail-lineup-list__nav.swiper-button-disabled {
      opacity: 0.4;
      pointer-events: none;
    }
  }

  .pg-product-detail-lineup-card__detail-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .pg-product-detail-lineup-card__image {
    display: block;
    inline-size: 100%;
    margin-bottom: 12px;
    line-height: 1;
    overflow: hidden;
  }

  .pg-product-detail-lineup-card__image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: opacity 0.2s ease;
  }

  .pg-product-detail-lineup-card__image-check {
    display: none;
  }

  .pg-product-detail-lineup-card__title {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
    transition: color 0.2s ease;
  }

  .pg-product-detail-lineup-card__text {
    width: 100%;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.5;
    transition: color 0.2s ease;
    margin-top: 8px;

    /* 2行で省略 */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pg-product-detail-lineup-card__detail-trigger:focus-visible {
    outline: 2px solid var(--color-text-highlight);
    outline-offset: 2px;
  }

  .pg-product-detail-lineup-card__action {
    margin-top: 12px;
  }

  .pg-product-detail-lineup-card__button {
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    background-color: #fff;
    border: none;
    border-radius: 1000px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 27px;
    min-width: 63px;
    cursor: pointer;
  }

  .pg-product-detail-lineup-card__button--add {
    background-color: var(--color-bg-surface);
  }

  .pg-product-detail-lineup-card__button--detail {
    cursor: pointer;
  }

  .pg-product-detail-lineup-card__button:hover {
    opacity: 1;
    background-color: var(--color-text-highlight);
    color: #fff;
  }

  .pg-product-detail-lineup-card__button--delete {
    color: #fff;
    background-color: #999;
  }

  /* .is-selected */
  .pg-product-detail-lineup-card.is-selected {
    .pg-product-detail-lineup-card__image {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgb(0 0 0 / 30%);
        z-index: 1;
      }

      .pg-product-detail-lineup-card__image-check {
        position: absolute;
        inset: 0;
        margin: auto;
        z-index: 2;
        color: #fff;
        display: block;
      }
    }
  }

  .pg-product-detail-lineup-card__detail-trigger:hover .pg-product-detail-lineup-card__image img,
  .pg-product-detail-lineup-card--detail:hover .pg-product-detail-lineup-card__image img {
    /* opacity: 0.7; */
  }

  .pg-product-detail-lineup-card__detail-trigger:hover .pg-product-detail-lineup-card__title,
  .pg-product-detail-lineup-card__detail-trigger:hover .pg-product-detail-lineup-card__text,
  .pg-product-detail-lineup-card--detail:hover .pg-product-detail-lineup-card__title,
  .pg-product-detail-lineup-card--detail:hover .pg-product-detail-lineup-card__text {
    color: var(--color-text-highlight);
  }

  .pg-product-detail-lineup-card--detail:hover .pg-product-detail-lineup-card__button--detail {
    opacity: 1;
    background-color: var(--color-text-highlight);
    color: #fff;
  }

  /* ----------------------------------------
  .pg-product-detail-lineup-card-02
---------------------------------------- */
  .pg-product-detail-lineup-card-02 {
    position: relative;
  }

  .pg-product-detail-lineup-card-02__image {
    line-height: 0;
  }

  .pg-product-detail-lineup-card-02__image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .pg-product-detail-lineup-card-02__title {
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-block: 12px;

    /* 2行で省略 */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pg-product-detail-lineup-card-02__button {
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    background-color: #fff;
    border-radius: 1000px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 27px;
    min-width: 63px;

    &:hover {
      opacity: 1;
      background-color: var(--color-text-highlight);
      color: #fff;
    }
  }

  .pg-product-detail-lineup-card-02__button--add {
    background-color: var(--color-bg-surface);
  }

  .pg-product-detail-lineup-card-02__button--detail {
    cursor: pointer;
  }

  .pg-product-detail-lineup-card-02__button--delete {
    color: #fff;
    background-color: #999;
  }

  .pg-product-detail-lineup-card-02__delete-button {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: -8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: var(--color-text-highlight);
    }
  }

  /*
追加するボタン
追加されたら、.pg-product-detail-lineup-card-02 になる
*/
  .pg-product-detail-lineup-card-03 {
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border: 1px dashed #000;
    background: #fff;
    gap: 4px;
    line-height: 1;

    &:hover {
      .pg-product-detail-lineup-card-03__text {
        background-color: var(--color-text-highlight);
        color: #fff;
      }
    }
  }

  .pg-product-detail-lineup-card-03__text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background-color: var(--color-bg-subtle);
    border-radius: 1000px;
    padding: 8px 12px;
  }
}

@layer pages {
  .pg-product-detail--theme {
    .pg-product-detail-hero {
      @media screen and (width >= 769px) {
        padding-block: 32px 24px;
        margin-bottom: 60px;
      }
    }

    .pg-product-detail-hero__column {
      display: block;

      @media screen and (width >= 769px) {
        display: grid;
        grid-template-columns: 482px 1fr;
        gap: 60px;
      }
    }
  }
}

@layer pages {
  .pg-product-detail--gift {
    .c-graphic-title {
      @media screen and (1px < width < 769px) {
        padding: 28px 0;
      }
    }

    .pg-product-detail__main {
      padding: 20px 0 80px;

      @media screen and (width >= 769px) {
        padding: 60px 0 80px;
      }

      .l-inner {
        --inner-width: 940px;
      }
    }

    .pg-product-detail__header {
      margin-bottom: 20px;
    }

    .pg-product-detail-gift-group {
      padding: 20px 0;
      margin-inline: calc(var(--inner-padding) * -1);
      padding-inline: calc(var(--inner-padding));

      @media screen and (width >= 769px) {
        margin-inline: 0;
        padding-inline: 0;
        padding-block: 50px;
      }
    }

    .pg-product-detail-gift-group--additional {
      background-color: var(--color-bg-surface);
      margin-block: 12px 0;

      @media screen and (width >= 769px) {
        border-radius: 24px;
        display: none;
      }
    }

    .pg-product-detail-gift-additional-lineup {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;

      @media screen and (width >= 769px) {
        max-inline-size: 500px;
        margin-inline: auto;
      }
    }

    .pg-product-detail-gift-group__header {
      margin-bottom: 12px;

      @media screen and (width >= 769px) {
        text-align: center;
        margin-bottom: 18px;
      }
    }

    .pg-product-detail-gift-group__title {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px;

      @media screen and (width >= 769px) {
        display: inline-grid;
      }

      & > span {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.02em;

        @media screen and (width >= 769px) {
          font-size: 22px;
        }

        & > span {
          font-size: 13px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.02em;

          @media screen and (width >= 769px) {
            font-size: 18px;
          }
        }
      }
    }

    .pg-product-detail-gift-group__title-icon {
      @media screen and (width >= 769px) {
        width: 30px;
        height: 30px;
        display: inline-block;
        translate: 0 1px;
      }
    }

    .pg-product-detail-gift-group-02 {
      padding: 50px 0 30px;
      display: flex;
      flex-direction: column;
      gap: 40px;

      @media screen and (width >= 769px) {
        gap: 60px;
        padding: 60px 0;
      }
    }

    .pg-product-detail-gift-group-02__title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
    }

    .pg-product-detail-gift-lineup__title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;
      margin-bottom: 16px;

      @media screen and (width >= 769px) {
        margin-bottom: 22px;
        padding-left: 70px;
      }
    }

    .pg-product-detail-gift-cta-area {
      position: fixed;
      z-index: var(--z-page-float);
      inset-inline: 0;
      inset-block-end: 0;
    }

    /* pg-product-detail-gift-cta-group-01 は sp */
    .pg-product-detail-gift-cta-group-01 {
      border-top: 1px solid #000;
      padding: 12px 36px;
      background-color: #fff;
      text-align: center;

      @media screen and (width >= 769px) {
        display: none;
      }
    }

    .pg-product-detail-gift-cta-group-01__text {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.02em;
      margin-top: 8px;
      line-height: 1.5;
    }

    .pg-product-detail-gift-cta-group-02 {
      border-top: 1px solid #000;
      padding: 20px 36px;
      background-color: var(--color-bg-surface);
      text-align: center;

      @media screen and (1px <= width <= 768px) {
        display: none;
      }
    }

    .pg-product-detail-gift-cta-group-02__inner {
      display: flex;
      justify-content: center;
      gap: 40px;
    }

    .pg-product-detail-gift-cta-group-02__grid {
      max-inline-size: 332px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .pg-product-detail-gift-cta-group-02__button-wrap {
      padding-top: 12px;
    }

    .pg-product-detail-gift-cta-group-02__text {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.02em;
      margin-top: 8px;
      line-height: 1.5;
    }
  }
}

@layer pages {
  .pg-product-detail--tanpin {
    .pg-product-detail__column {
      @media screen and (width >= 769px) {
        padding-block: 32px 0;
      }
    }

    .pg-product-detail-hero__price-label {
      text-align: center;

      @media screen and (width >= 769px) {
        text-align: start;
      }
    }

    .pg-product-detail-info {
      padding-block: 0;
    }
  }
}

@layer pages {
  /*
  商品一覧 .pg-products で管理する。
  差分があるかもしれないので 00_common.css を使う。
*/
}

@layer pages {
  .pg-products {
  }

  .pg-products__main {
    padding-top: 56px;
  }

  .pg-products__search {
    margin-top: 24px;
  }

  .pg-products__products {
    padding: 24px 0;

    @media screen and (width >= 769px) {
      padding: 40px 0;
    }
  }

  .pg-products__related-items,
  .pg-products__editors-picks {
    border-top: 1px solid #000;
  }
}

@layer pages {
  /*
  マイページ .pg-mypage で管理する。
  差分があるかもしれないので 00_common.css を使う。
  注文履歴ページなどは .pg-mypage.pg-mypage-egift, .pg-mypage.pg-mypage-shipping などで管理する。
*/
}

@layer pages {
  .pg-mypage {
    .l-inner {
      --inner-width: 840px;
    }
  }

  .pg-mypage__main {
    padding-top: 60px;
    padding-bottom: 46px;
  }

  .pg-mypage__subjects .c-accordion__body {
    padding-block-end: 36px;
  }

  .pg-mypage__title {
    margin-bottom: 46px;
  }

  .pg-mypage__favorite-slider {
    margin-inline: calc(var(--inner-padding) * -1);
    padding-block-end: 22px;

    @media screen and (width >= 769px) {
      margin-inline: 0;
    }

    &.c-card-slider {
      padding-inline: var(--inner-padding);

      @media screen and (width >= 769px) {
        padding-inline: 0;
      }
    }

    .c-product-card {
      flex: 0 0 160px;

      @media screen and (width >= 769px) {
        flex: 1;
      }
    }
  }

  .pg-mypage__account-info {
    padding: 20px 16px;

    .pg-mypage-info-group {
      &:not(:first-child) {
        border-top: 1px solid #000;
        padding-top: 24px;
        margin-top: 24px;
      }

      .pg-mypage-group {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        margin-top: 24px;
        line-height: 1.4;
        letter-spacing: 0.02em;

        &:first-child {
          margin-top: 0;
        }
      }

      .pg-mypage-group__value {
        font-size: 16px;
      }

      .pg-mypage-group-02 {
        font-size: 14px;
        font-weight: 500;
        color: #000;
        margin-top: 24px;
        line-height: 1.4;
        letter-spacing: 0.02em;

        &:first-child {
          margin-top: 0;
        }
      }

      .pg-mypage-group-02__value {
        margin-top: 2px;
      }
    }

    .pg-mypage-info-group__title {
      font-weight: 700;
    }

    .pg-mypage-info-group__button {
      margin-top: 24px;

      & > a {
        min-inline-size: 170px;
        padding: 5px 20px;
        border-radius: 1000px;
        border: 1px solid #000;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        font-weight: 700;

        &:hover {
          background-color: var(--color-text-highlight);
          color: #fff;
          opacity: 1;
        }
      }
    }
  }

  .pg-mypage__footer {
    padding: 40px 0;
  }

  .pg-mypage__footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  .pg-mypage__footer-button {
    min-inline-size: 105px;
    padding: 8px 20px;
    border-radius: 1000px;
    border: 1px solid #000;
    line-height: 1.2;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 700;

    &:hover {
      background-color: var(--color-text-highlight);
      color: #fff;
    }
  }

  .pg-mypage__footer-link {
    font-size: 13px;
    font-weight: 500;

    &:hover {
      color: var(--color-text-highlight);
    }
  }

  .pg-mypage__history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;

    @media screen and (width >= 769px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }

  .pg-mypage__history-more {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  .pg-mypage-history-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background-color: var(--color-bg-surface);
    color: #000;
    transition: color var(--transition-duration);

    &:hover {
      color: var(--color-text-highlight);
    }
  }

  .pg-mypage-history-card__info {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-mypage-history-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .pg-mypage-history-card__total {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .pg-mypage-history-card__price {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .pg-mypage-history-card__arrow {
    flex: none;
    inline-size: 27px;
    block-size: 27px;

    & > svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
    }
  }
}

@layer pages {
  /*
  注文履歴詳細（eギフト・配送）共通スタイル
  .pg-mypage.pg-mypage-order.pg-mypage-egift / .pg-mypage.pg-mypage-order.pg-mypage-shipping
*/

  .pg-mypage.pg-mypage-order {
    .l-inner {
      --inner-width: 500px;
    }

    .pg-mypage__main {
      padding-top: 20px;
      padding-bottom: 40px;

      @media screen and (width >= 769px) {
        padding-top: 40px;
      }
    }
  }

  .pg-mypage-order__back {
    margin-bottom: 46px;

    & > a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.02em;

      &:hover {
        color: var(--color-text-highlight);
      }
    }
  }

  .pg-mypage-order__header {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 700;
    line-height: 1.5;

    @media screen and (width >= 769px) {
      align-items: center;
    }
  }

  .pg-mypage-order__number {
    display: flex;
    gap: 16px;
    font-size: 24px;
    letter-spacing: 0.02em;
  }

  .pg-mypage-order__meta {
    display: flex;
    gap: 8px;
    font-size: 14px;
    letter-spacing: 0.02em;
  }

  /* ── 注文合計 ───────────── */

  .pg-mypage-order__summary {
    background-color: var(--color-bg-surface);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 46px;
  }

  /* pcでのみ表示させる */
  .pg-mypage-order__summary-header-label {
    display: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-block: 80px 30px;

    @media screen and (width >= 769px) {
      display: block;
    }
  }

  .pg-mypage-order__summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .pg-mypage-order__summary-title {
      display: flex;
      align-items: flex-end;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.02em;

      & > span {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.02em;
      }
    }

    .pg-mypage-order__summary-total {
      font-family: var(--font-en);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }
  }

  .pg-mypage-order__summary-rows {
    border-top: 1px solid #000;
    padding: 24px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-mypage-order__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 1;

    &.is-discount .pg-mypage-order__summary-price {
      color: #de5141;
    }
  }

  .pg-mypage-order__summary-price {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    min-inline-size: 100px;
    text-align: right;
  }

  .pg-mypage-order__summary-tax {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 1;

    .pg-mypage-order__summary-tax-price {
      display: inline-flex;
      align-items: center;
    }
  }

  /* ── ボタン ───────────── */

  .pg-mypage-order__actions {
    padding-inline: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media screen and (width >= 769px) {
      padding-inline: 50px;
    }

    .c-button {
      inline-size: 100%;
    }
  }

  /* ── 注文商品 ───────────── */

  .pg-mypage-order__products {
    padding-block: 40px;
    margin-top: 40px;
  }

  .pg-mypage-order__section-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
  }

  .pg-mypage-order__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ── 発送元（配送のみ） ───────────── */

  .pg-mypage-order__shipment {
    border-top: 1px solid #000;
    padding: 8px 0 40px;
  }

  .pg-mypage-order__shipment-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-block: 12px;

    & > svg {
      flex: none;
    }
  }

  .pg-mypage-order__shipment-heading {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-mypage-order__shipment-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-mypage-order__shipment-note {
    font-size: 14px;
    color: #666;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .pg-mypage-order__shipment-status {
    padding: 8px 0 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    .pg-mypage-order__shipment-status-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
    }

    .pg-mypage-order__shipment-status-text {
      font-size: 14px;
      line-height: 1.5;
      padding-bottom: 8px;
    }

    .c-button {
      margin-top: 12px;
    }
  }

  /* ── お支払い状況・住所 ───────────── */
  .pg-mypage-order__info-wrapper {
    &.u-pc-only {
      margin-block-start: 60px;
    }
  }

  .pg-mypage-order__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 46px;

    .pg-mypage-order__info-title {
      font-weight: 700;
      line-height: 1.4;
    }
  }

  .pg-mypage-order__info--shipping {
    margin-top: 0;
    margin-bottom: 32px;
  }

  .pg-mypage-order__return {
    margin-top: 46px;
    padding-block: 30px;
    display: flex;
    justify-content: center;

    & > a {
      font-size: 13px;
      font-weight: 500;
      text-decoration: underline;

      &:hover {
        color: var(--color-text-highlight);
      }
    }
  }

  /* ── 商品カード ───────────── */

  .pg-mypage-order-item {
    background-color: var(--color-bg-surface);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .pg-mypage-order-item__product {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .pg-mypage-order-item__quantity {
    position: absolute;
    top: -6px;
    left: -6px;
    inline-size: 24px;
    block-size: 24px;
    background-color: #000;
    border-radius: 100px;
    color: #fff;
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
  }

  .pg-mypage-order-item__image {
    inline-size: 82px;
    block-size: 82px;
    flex: none;
    object-fit: cover;
  }

  .pg-mypage-order-item__detail {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .pg-mypage-order-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 8px;
  }

  .pg-mypage-order-item__code {
    font-size: 12px;
    line-height: 1;
  }

  .pg-mypage-order-item__title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pg-mypage-order-item__variant {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-top: -4px;
  }

  /* メッセージカード */

  .pg-mypage-order-item__message {
    background-color: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .pg-mypage-order-item__message-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #333;
    font-size: 14px;
    letter-spacing: 0.02em;

    .pg-mypage-order-item__message-recipient {
      line-height: 1;
    }

    .pg-mypage-order-item__message-body {
      line-height: 1.5;
    }
  }

  .pg-mypage-order-item__message-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .c-button {
      inline-size: 100%;
    }

    @media screen and (width >= 769px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 12px;
      padding-inline: 0;

      .pg-mypage-order-item__line-button {
        grid-column: 1 / -1;
      }
    }
  }

  .pg-mypage-order-item__line-button.c-button,
  .pg-mypage-order-item__line-button.c-button:hover {
    --button-bg: #00c44b;
    --button-bg-hover: #00a63c;
    --button-text: #fff;
    --button-border: transparent;
  }

  .pg-mypage-order-item__line-button.c-button:hover {
    --button-bg: var(--button-bg-hover, #00a63c);
  }

  .pg-mypage-order-item__message-actions--confirm {
    align-items: center;
    gap: 12px;

    .c-button {
      inline-size: auto;
      min-inline-size: 180px;
    }

    @media screen and (width >= 769px) {
      display: flex;
      flex-direction: column;
    }
  }

  .pg-mypage-order-item__message-note {
    font-size: 12px;
    color: #666;
    line-height: 1;
    text-align: center;
  }

  .pg-mypage-order-item__deadline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    &.is-alert {
      color: #c03323;
    }
  }

  .pg-mypage-order-item__deadline-row {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;

    & > svg {
      flex: none;
    }
  }

  .pg-mypage-order-item__deadline-note {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  /* 小計 */

  .pg-mypage-order-item__subtotals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    padding-block: 4px;
  }

  .pg-mypage-order-item__subtotal-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
  }

  .pg-mypage-order-item__subtotal-price {
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    min-inline-size: 100px;
    text-align: right;
  }
}

@layer pages {
  .pg-mypage-wishlist {
  }

  .pg-mypage-wishlist__main {
    padding-top: 56px;
    padding-bottom: 56px;

    @media screen and (width >= 769px) {
      padding-top: 80px;
    }
  }

  .pg-mypage-wishlist__title {
    margin-bottom: 48px;

    @media screen and (width >= 769px) {
      margin-bottom: 40px;
    }
  }

  .pg-mypage-wishlist__search {
    margin-bottom: 48px;

    @media screen and (width >= 769px) {
      margin-bottom: 20px;
    }

    .l-inner {
      @media screen and (1px < width <= 768px) {
        max-width: 100%;
        padding: 0;
      }
    }

    .c-product-toolbar-02 {
      @media screen and (width >= 769px) {
        border-bottom: none;
      }
    }
  }

  .pg-mypage-wishlist__editors-picks,
  .pg-mypage-wishlist__related-items {
    border-top: 1px solid #000;
  }

  .pg-mypage-wishlist__main:has(.pg-mypage-wishlist__noitem) {
    @media screen and (width >= 769px) {
      min-height: 670px; /* magic number */
    }

    .pg-mypage-wishlist__title {
      margin-bottom: 24px;

      @media screen and (width >= 769px) {
        margin-bottom: 40px;
      }
    }
  }

  .pg-mypage-wishlist__noitem {
    text-align: center;
  }

  .pg-mypage-wishlist__noitem-text {
    line-height: 1.5;
    margin-top: 16px;
    margin-bottom: 24px;
  }
}

@layer pages {
  /*
  特集一覧 .pg-editors-picks / 特集詳細 .pg-editors-picks-detail で管理する。
*/
}

@layer pages {
  /* ----------------------------------------
  特集一覧 .pg-editors-picks
---------------------------------------- */
  .pg-editors-picks {
  }

  .pg-editors-picks__main {
    padding-block: 56px;

    .l-inner {
      @media screen and (1px <= width <= 768px) {
        padding-inline: 16px;
      }
    }
  }

  .pg-editors-picks__grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 8px;

    @media screen and (width >= 769px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 50px 16px;
      margin-top: 80px;
    }
  }

  .pg-editors-picks__grid .c-feature-card {
    --c-feature-card-corner-bg: var(--color-bg-canvas);
  }

  /* spでは、トップページや他と違い、フォントサイズが小さくなる */
  .pg-editors-picks__grid .c-feature-card__title {
    @media screen and (1px <= width <= 768px) {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .pg-editors-picks__main .c-pager {
    margin-top: 56px;
  }

  .pg-editors-picks__related-items {
    @media screen and (width >= 769px) {
      border-top: 1px solid #000;
    }
  }
}

@layer pages {
  /* ----------------------------------------
  特集詳細 .pg-editors-picks-detail
---------------------------------------- */
  .pg-editors-picks-detail {
  }

  .pg-editors-picks-detail__main {
    padding-top: 24px;

    @media screen and (width >= 769px) {
      padding-top: 56px;
    }
  }

  /* ----------------------------------------
  特集サムネイル + タイトルブロック
  SP: 縦積み（画像は左右 16px の余白）
  PC: 画像(324px) 左 + タイトル/リード 右 の2カラム
---------------------------------------- */
  .pg-editors-picks-detail__feature {
    @media screen and (1px <= width <= 768px) {
      padding-inline: 24px;
    }

    @media screen and (width >= 769px) {
      display: flex;
      align-items: flex-start;
      gap: 32px;
    }
  }

  /* FeatureCard の __thumb-wrap と同構造（8px の内側余白 + 四隅の飾り） */
  .pg-editors-picks-detail__thumb-wrap {
    position: relative;
    padding: 8px;

    @media screen and (width >= 769px) {
      /* 画像 324px + 左右の padding 8px */
      flex: 0 0 340px;
      width: 340px;
    }
  }

  /* FeatureCard の corner モチーフの 58px 版（classPrefix で流用） */
  .pg-editors-picks-detail__corner {
    --pg-editors-picks-detail-corner-size: 58px;

    position: absolute;
    z-index: 1;
    inline-size: var(--pg-editors-picks-detail-corner-size);
    block-size: var(--pg-editors-picks-detail-corner-size);
    pointer-events: none;
  }

  .pg-editors-picks-detail__corner--top-left {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .pg-editors-picks-detail__corner--bottom-right {
    inset-block-end: 0;
    inset-inline-end: 0;
    transform: rotate(180deg);
  }

  .pg-editors-picks-detail__corner-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .pg-editors-picks-detail__corner-fill {
    fill: var(--color-bg-canvas);
  }

  .pg-editors-picks-detail__corner-line {
    stroke: #000;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .pg-editors-picks-detail__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
  }

  .pg-editors-picks-detail__header {
    margin-top: 16px;

    @media screen and (width >= 769px) {
      margin-top: 8px;
      flex: 1 1 0;
      min-width: 0;
    }
  }

  .pg-editors-picks-detail__label {
    display: inline-flex;
    max-width: fit-content;
    align-items: center;
    border-bottom: 1px solid var(--color-brand-primary);
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--color-brand-primary);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pg-editors-picks-detail__title {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;

    @media screen and (width >= 769px) {
      margin-top: 16px;
      font-size: 28px;
    }
  }

  .pg-editors-picks-detail__lead {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.04em;

    /* 段落間の余白 = 空行1行ぶん */
    p + p {
      margin-top: calc(1em * 1.7);
    }

    @media screen and (width >= 769px) {
      margin-top: 16px;
    }
  }

  /* ----------------------------------------
  商品リスト（商品一覧ページと同構造）
---------------------------------------- */
  .pg-editors-picks-detail__search {
    margin-top: 40px;

    .c-results-nav-02__sort {
      margin-left: auto;
    }

    .l-inner {
      @media screen and (1px <= width <= 768px) {
        max-width: 100%;
        padding-inline: 0;
      }
    }
  }

  .pg-editors-picks-detail__products {
    padding: 24px 0 56px;

    @media screen and (width >= 769px) {
      padding: 40px 0;
    }
  }

  .pg-editors-picks-detail__editors-picks,
  .pg-editors-picks-detail__related-items {
    border-top: 1px solid #000;
  }
}

@layer pages {
  /*
  マガジン一覧 .pg-magazine / マガジン詳細 .pg-magazine-detail で管理する。
*/
}

@layer pages {
  /* ----------------------------------------
  マガジン一覧 .pg-magazine
---------------------------------------- */
  .pg-magazine {
  }

  .pg-magazine__main {
    padding-block: 56px;

    .l-inner {
      @media screen and (1px <= width <= 768px) {
        padding-inline: 16px;
      }
    }
  }

  /* Figma のロックアップはサブタイトル 16px（コンポーネント既定は 18px） */
  .pg-magazine__main .c-graphic-title__subtitle {
    font-size: 16px;
  }

  /* ----------------------------------------
  カテゴリチップ列
---------------------------------------- */
  .pg-magazine__categories {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 8px;
  }

  .pg-magazine__category {
    display: inline-flex;
    align-items: center;
    block-size: 38px;
    padding-inline: 16px;
    border-radius: 1000px;
    background-color: var(--color-bg-surface);
    font-family: var(--font-poppins);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;

    /* active（.is-active / aria-current）はデザイン上、通常と同一スタイル */

    &:hover {
      background-color: var(--color-text-highlight);
      color: #fff;
    }
  }

  /* ----------------------------------------
  マガジンカードリスト
---------------------------------------- */
  .pg-magazine__grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;

    @media screen and (width >= 769px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 48px 36px;
    }
  }

  /* Figma マガジン_1列: メタは PC でも Poppins Medium 14 / text-tertiary */
  .pg-magazine__grid .c-magazine-card__meta {
    font-size: 14px;
  }

  .pg-magazine__main .c-pager {
    margin-top: 56px;
  }
}

@layer pages {
  /* ----------------------------------------
  マガジン詳細 .pg-magazine-detail
---------------------------------------- */
  .pg-magazine-detail {
  }

  .pg-magazine-detail__main {
    padding-block-end: 56px;

    @media screen and (width >= 769px) {
      padding-block: 56px;
    }
  }

  /* 記事カラム: PC は 800px センター */
  .pg-magazine-detail__article {
    @media screen and (width >= 769px) {
      max-width: 800px;
      margin-inline: auto;
    }
  }

  /* サムネイル: SP フルブリード 390×225（角丸なし）、PC 800×462 */
  .pg-magazine-detail__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 390 / 225;
    object-fit: cover;

    @media screen and (width >= 769px) {
      aspect-ratio: 800 / 462;
    }
  }

  /* 本文まわり: PC は記事カラムのさらに内側 752px（左右 24px） */
  .pg-magazine-detail__inner {
    margin-top: 24px;
    padding-inline: var(--inner-padding);

    @media screen and (width >= 769px) {
      margin-top: 32px;
      padding-inline: 24px;
    }
  }

  /* ----------------------------------------
  記事ヘッダー
---------------------------------------- */
  .pg-magazine-detail__header {
    padding-bottom: 40px;
    margin-bottom: 36px;
    border-bottom: 1px solid #000;
  }

  .pg-magazine-detail__category {
    margin: 0;
    font-family: var(--font-poppins);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-brand-primary);
  }

  .pg-magazine-detail__title {
    margin: 16px 0 0;
    font-family: var(--font-jp);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-magazine-detail__meta {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-primary);
  }

  .pg-magazine-detail__date {
    font-family: var(--font-poppins);
    font-weight: 400;
  }

  .pg-magazine-detail__editor {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px;
  }

  .pg-magazine-detail__editor-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ----------------------------------------
  本文（.c-cms 流用）
---------------------------------------- */
  .pg-magazine-detail__body {
    margin-top: 24px;
  }

  /* ----------------------------------------
  SNS シェア
---------------------------------------- */
  .pg-magazine-detail__share {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .pg-magazine-detail__share-title {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-primary);
  }

  .pg-magazine-detail__share-icons {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /* ----------------------------------------
  サブセクション
---------------------------------------- */
  .pg-magazine-detail__related-items,
  .pg-magazine-detail__articles {
    border-top: 1px solid #000;
  }

  .pg-magazine-detail__articles {
    padding-block: 50px;

    @media screen and (width > 769px) {
      padding-block: 60px;
    }

    /* SP はスライダーをフルブリードにする（左右余白は .c-card-slider 側の 24px） */
    .l-inner {
      @media screen and (1px <= width <= 768px) {
        padding-inline: 0;
      }
    }
  }

  /* Figma のロックアップはサブタイトル 16px（コンポーネント既定は 18px） */
  .pg-magazine-detail__articles .c-graphic-title__subtitle {
    font-size: 16px;
  }

  /* 他の記事: SP 横スクロール（カード 300px / gap 24px）、PC 3カラム */
  .pg-magazine-detail__articles-slider {
    --c-card-slider-gap: 24px;

    margin-top: 30px;
    padding-block-end: 0;

    @media screen and (width >= 769px) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 36px;
    }

    .c-magazine-card {
      @media screen and (1px <= width <= 768px) {
        flex: 0 0 300px;
        scroll-snap-align: start;
      }
    }
  }

  /* Figma マガジン_1列: メタは PC でも Poppins Medium 14 / text-tertiary */
  .pg-magazine-detail__articles-slider .c-magazine-card__meta {
    font-size: 14px;
    color: var(--color-text-tertiary);
  }
}

@layer pages {
  /*
  ラッピングについて .pg-wrapping で管理する。
*/
}

@layer pages {
  /* ----------------------------------------
  ラッピングについて .pg-wrapping
---------------------------------------- */
  .pg-wrapping {
  }

  .pg-wrapping__main {
    background-color: var(--color-support-cyan-secondary);
    padding-block: 56px;
  }

  /* ----------------------------------------
  イントロ（タイトル + リード）
---------------------------------------- */
  .pg-wrapping__intro {
    text-align: center;
  }

  /* Figma のロックアップはサブタイトル 16px / サブタイトル-タイトル間 12px */
  .pg-wrapping__intro .c-graphic-title {
    gap: 12px;
  }

  .pg-wrapping__intro .c-graphic-title__subtitle {
    font-size: 16px;
  }

  .pg-wrapping__lead {
    margin: 16px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-wrapping__note {
    margin: 16px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
  }

  /* ----------------------------------------
  オプションカード群
---------------------------------------- */
  .pg-wrapping__options {
    margin-top: 64px;

    @media screen and (width >= 769px) {
      max-inline-size: 800px;
      margin-inline: auto;
    }
  }

  .pg-wrapping__group {
    padding-block-end: 24px;
  }

  .pg-wrapping__group + .pg-wrapping__group {
    margin-block-start: 64px;
  }

  /* カード本体。左上だけ角丸なし（タブが乗る） */
  .pg-wrapping__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding-block: 28px 20px;
    background-color: var(--color-bg-canvas);
    border: 1px solid var(--color-text-primary);
    border-radius: 0 20px 20px;

    @media screen and (width >= 769px) {
      padding-block: 30px;
    }
  }

  /* カード左上のタブ。カードの枠線と一体に見せる */
  .pg-wrapping__card-tag {
    position: absolute;
    bottom: 100%;
    left: -1px;
    margin: 0;
    padding: 12px 16px 8px;
    background-color: var(--color-support-orange-primary);
    border: 1px solid var(--color-text-primary);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    font-family: var(--font-poppins);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
  }

  .pg-wrapping__card-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding-inline: 20px;
    text-align: center;
  }

  .pg-wrapping__card-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-wrapping__card-price {
    margin: 0;
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
  }

  .pg-wrapping__card-desc {
    margin: 0;
    padding-inline: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--color-text-primary);
  }

  /* 対応商品 / 送り方（SP 縦積み、PC 横並び） */
  .pg-wrapping__card-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding-inline: 20px;

    @media screen and (width >= 769px) {
      flex-direction: row;
      justify-content: center;
      gap: 40px;
    }
  }

  .pg-wrapping__card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pg-wrapping__card-meta-label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
  }

  .pg-wrapping__send-badge {
    background-color: var(--color-accent-yellow-secondary);
  }

  /* ----------------------------------------
  画像スライダー
  - SP: overflow-x スクロール
  - PC: js（wrappingMediaSlider.ts）が Swiper 化。3枚表示・3枚ずつページ送り
---------------------------------------- */
  .pg-wrapping__media {
    position: relative;
    inline-size: 100%;
  }

  .pg-wrapping__media-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 20px;

    @media screen and (width >= 769px) {
      overflow: hidden;

      /* margin-inline: 60px; */
      margin-inline: 58px;
      padding-inline: 0;
    }
  }

  .pg-wrapping__media-viewport::-webkit-scrollbar {
    display: none;
  }

  .pg-wrapping__media-track {
    gap: 20px;

    @media screen and (1px < width <= 768px) {
      &::after {
        content: "";
        flex: 0 0 10px;
      }
    }

    @media screen and (width >= 769px) {
      /* PC は Swiper の spaceBetween（margin）で間隔を付けるため gap は使わない */
      gap: 0;
    }
  }

  /* CMS 連携で実画像に差し替わるダミー枠（市松模様 + "image"） */
  .pg-wrapping__media-item {
    flex: 0 0 250px;
    aspect-ratio: 1;
    scroll-snap-align: start;
    line-height: 1;

    @media screen and (width >= 769px) {
      /* Swiper が inline style で width を指定するため flex-basis を無効化する */
      flex: 0 0 auto;
      scroll-snap-align: none;
    }
  }

  .pg-wrapping__media-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    inline-size: 48px;
    block-size: 48px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background-color: var(--color-text-primary);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 1;

    &:hover {
      background-color: var(--color-text-highlight);
    }

    /* Swiper (Navigation) が端で付与する。デザイン上、端では非表示 */
    &.swiper-button-disabled {
      display: none;
    }

    /* Swiper (watchOverflow) がスライド不要のとき付与する */
    &.swiper-button-lock {
      display: none;
    }
  }

  .pg-wrapping__media-nav--prev {
    left: 30px;
  }

  .pg-wrapping__media-nav--next {
    right: 30px;
  }

  /* ----------------------------------------
  QA アコーディオン（c-accordion をこのページ用に再スタイル）
---------------------------------------- */
  .pg-wrapping__faq {
    margin-block-start: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    @media screen and (width >= 769px) {
      max-inline-size: 700px;
      margin-inline: auto;
    }
  }

  .pg-wrapping-accordion {
    border-bottom: none;
    border-radius: 16px;
    background-color: rgb(255 255 255 / 50%);
  }

  .pg-wrapping-accordion .c-accordion__summary {
    min-block-size: 60px;
    padding: 16px;
    gap: 12px;
  }

  .pg-wrapping-accordion .c-accordion__title {
    font-weight: 700;
  }

  .pg-wrapping-accordion .c-accordion__body {
    padding: 0 20px 16px;
  }
}

@layer pages {
  /* dev 配下(開発用、本番組み込み対象外)のページ CSS。クラスはすべて pg-dev- プレフィックス。 */
}

@layer pages {
  /* dev 配下の展示ページ共通シェル(forms / modal / accordion / toast / pager / breadcrumbs)。
   dev 専用 CSS はすべて pg-dev- プレフィックス(開発用。本番組み込み対象外)。 */

  .pg-dev-showcase {
    padding: 32px 16px 64px;
  }

  .pg-dev-showcase__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-dev-showcase__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-dev-showcase__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
  }

  .pg-dev-showcase__section {
    margin-bottom: 48px;
  }

  .pg-dev-showcase__section-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .pg-dev-showcase__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }

  .pg-dev-showcase__row + .pg-dev-showcase__row {
    margin-top: 16px;
  }

  .pg-dev-showcase__row--column {
    flex-direction: column;
    align-items: stretch;
    max-width: 480px;
  }

  .pg-dev-showcase__note {
    margin-top: 12px;
    font-size: 12px;
    color: #666;
  }

  .pg-dev-showcase__link {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-text-highlight);
    text-decoration: underline;
  }

  /* モーダル展示のダミー中身(c-modal__inner は背景を持たないため、利用側が背景ごと持つ) */
  .pg-dev-showcase__modal-body {
    background-color: #fff;
    padding: 24px 20px 28px;
  }

  .pg-dev-showcase__modal-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
  }

  .pg-dev-showcase__modal-text {
    font-size: 13px;
    line-height: 1.7;
  }

  .pg-dev-showcase__modal-text + .pg-dev-showcase__modal-text {
    margin-top: 8px;
  }

  @media (width >= 769px) {
    .pg-dev-showcase {
      padding: 48px 32px 88px;
    }

    .pg-dev-showcase__title {
      font-size: 40px;
    }

    .pg-dev-showcase__lead {
      margin-bottom: 48px;
      font-size: 18px;
    }

    .pg-dev-showcase__section {
      margin-bottom: 56px;
    }

    .pg-dev-showcase__section-title {
      font-size: 24px;
    }
  }
}

@layer pages {
  .pg-dev-components-buttons {
    padding: 32px 16px 64px;
  }

  .pg-dev-components-buttons__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-dev-components-buttons__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-dev-components-buttons__lead {
    margin-bottom: 24px;
    color: #444;
  }

  .pg-dev-components-buttons__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 24px;
    margin-top: 24px;
  }

  .pg-dev-components-buttons__section-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .pg-dev-components-buttons__row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: center;
    padding-block: 8px;
  }

  .pg-dev-components-buttons__state {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .pg-dev-components-buttons__group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-buttons {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-buttons__lead {
      margin-bottom: 28px;
    }

    .pg-dev-components-buttons__row {
      grid-template-columns: 120px 1fr;
      gap: 16px;
      padding-block: 10px;
    }

    .pg-dev-components-buttons__group {
      gap: 16px;
    }
  }
}

@layer pages {
  .pg-dev-components-index {
    padding: 32px 16px 64px;
  }

  .pg-dev-components-index__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-dev-components-index__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-dev-components-index__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
  }

  .pg-dev-components-index__section {
    margin-bottom: 48px;
  }

  .pg-dev-components-index__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .pg-dev-components-index__section-description {
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
  }

  .pg-dev-components-index__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pg-dev-components-index__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background-color: #fff;
    text-decoration: none;
    color: #000;
    transition:
      border-color var(--transition-duration),
      background-color var(--transition-duration);
  }

  .pg-dev-components-index__card:hover {
    border-color: var(--color-text-highlight);
    background-color: #fafbfa;
  }

  .pg-dev-components-index__card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-dev-components-index__card-description {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-index {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-index__title {
      font-size: 40px;
    }

    .pg-dev-components-index__lead {
      margin-bottom: 48px;
      font-size: 18px;
    }

    .pg-dev-components-index__section {
      margin-bottom: 56px;
    }

    .pg-dev-components-index__section-title {
      font-size: 28px;
    }

    .pg-dev-components-index__grid {
      gap: 10px;
    }

    .pg-dev-components-index__card {
      padding: 14px 16px;
      gap: 14px;
    }

    .pg-dev-components-index__card-title {
      font-size: 16px;
    }

    .pg-dev-components-index__card-description {
      font-size: 13px;
    }
  }
}

@layer pages {
  .pg-dev-components-icons {
    padding: 32px 0 64px;
  }

  .pg-dev-components-icons__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-dev-components-icons__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
  }

  .pg-dev-components-icons__lead code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 14px;
    color: #c41a16;
  }

  .pg-dev-components-icons__section {
    margin-bottom: 48px;
  }

  .pg-dev-components-icons__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .pg-dev-components-icons__section-description {
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
  }

  .pg-dev-components-icons__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Icon grid */
  .pg-dev-components-icons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 4px;
  }

  .pg-dev-components-icons__grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background-color: #fafbfa;
    min-width: 0;
  }

  .pg-dev-components-icons__grid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .pg-dev-components-icons__grid-icon img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .pg-dev-components-icons__grid-name {
    font-size: 10px;
    color: #666;
    text-align: center;
    line-height: 1.3;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .pg-dev-components-icons__item {
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 20px;
  }

  .pg-dev-components-icons__item-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .pg-dev-components-icons__item-code {
    display: block;
    background-color: #f5f5f5;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 13px;
    color: #c41a16;
    margin-bottom: 16px;
    width: fit-content;
  }

  .pg-dev-components-icons__item-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .pg-dev-components-icons__item-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .pg-dev-components-icons__item-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background-color: #fafbfa;
  }

  .pg-dev-components-icons__item-size {
    font-size: 12px;
    color: #666;
    font-weight: 600;
  }

  .pg-dev-components-icons__colors {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 20px;
  }

  .pg-dev-components-icons__color-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 80px;
  }

  .pg-dev-components-icons__color-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    background-color: #f5f5f5;
  }

  .pg-dev-components-icons__color-label {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.4;
  }

  .pg-dev-components-icons__code {
    background-color: #f5f5f5;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.5;
  }

  .pg-dev-components-icons__code code {
    font-family: "Courier New", monospace;
    color: #333;
  }

  .pg-dev-components-icons__subsection-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 20px;
  }

  .pg-dev-components-icons__props-table {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    overflow: hidden;
  }

  .pg-dev-components-icons__props-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px 1fr;
    border-bottom: 1px solid #e1e1e1;
  }

  .pg-dev-components-icons__props-row:last-child {
    border-bottom: none;
  }

  .pg-dev-components-icons__props-header {
    background-color: #f5f5f5;
  }

  .pg-dev-components-icons__props-cell {
    padding: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
  }

  .pg-dev-components-icons__props-header .pg-dev-components-icons__props-cell {
    font-weight: 700;
  }

  .pg-dev-components-icons__props-cell code {
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 2px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    color: #c41a16;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-icons {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-icons__title {
      font-size: 40px;
    }

    .pg-dev-components-icons__lead {
      margin-bottom: 48px;
      font-size: 18px;
    }

    .pg-dev-components-icons__section {
      margin-bottom: 56px;
    }

    .pg-dev-components-icons__section-title {
      font-size: 28px;
    }

    .pg-dev-components-icons__list {
      gap: 40px;
    }

    .pg-dev-components-icons__item {
      padding: 28px;
    }

    .pg-dev-components-icons__item-row {
      gap: 24px;
    }

    .pg-dev-components-icons__props-row {
      grid-template-columns: 120px 100px 100px 1fr;
    }

    .pg-dev-components-icons__props-cell {
      padding: 14px;
      font-size: 14px;
    }
  }
}

@layer pages {
  .pg-dev-components-typography {
    padding: 32px 16px 64px;
  }

  .pg-dev-components-typography__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-dev-components-typography__title {
    margin-bottom: 8px;
  }

  .pg-dev-components-typography__lead {
    margin-bottom: 28px;
    color: #444;
  }

  .pg-dev-components-typography__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 20px;
  }

  .pg-dev-components-typography__section-title {
    margin-bottom: 12px;
  }

  .pg-dev-components-typography__example {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #fff;
  }

  .pg-dev-components-typography__table {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
  }

  .pg-dev-components-typography__row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 2fr;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid #e1e1e1;
  }

  .pg-dev-components-typography__row:first-child {
    border-top: 0;
  }

  .pg-dev-components-typography__row--head {
    background-color: #f5f5f5;
    font-weight: 700;
  }

  .pg-dev-components-typography__row p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-typography {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-typography__section {
      padding-top: 24px;
      margin-top: 24px;
    }

    .pg-dev-components-typography__example {
      padding: 24px;
      gap: 12px;
    }

    .pg-dev-components-typography__row {
      padding: 14px 16px;
    }
  }
}

@layer pages {
  .pg-dev-components-badge {
    padding: 32px 16px 64px;
  }

  .pg-dev-components-badge__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-dev-components-badge__title {
    margin-bottom: 8px;
  }

  .pg-dev-components-badge__lead {
    margin-bottom: 28px;
    color: #444;
  }

  .pg-dev-components-badge__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 20px;
  }

  .pg-dev-components-badge__section-title {
    margin-bottom: 12px;
  }

  .pg-dev-components-badge__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 8px;
    align-items: center;
    padding: 16px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #fff;
  }

  .pg-dev-components-badge__row--hash {
    gap: 16px 8px;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-badge {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-badge__section {
      padding-top: 24px;
      margin-top: 24px;
    }

    .pg-dev-components-badge__row {
      padding: 20px;
    }
  }
}

@layer pages {
  .pg-dev-components-button-icon-fav {
    padding-block: 40px;
  }

  .pg-dev-components-button-icon-fav__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: var(--inner-padding);
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .pg-dev-components-button-icon-fav__lead {
    margin-block-start: -24px;
    color: var(--color-text-secondary);
  }

  .pg-dev-components-button-icon-fav__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-dev-components-button-icon-fav__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
  }

  .pg-dev-components-button-icon-fav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

@layer pages {
  .pg-dev-components-product-card {
    padding: 32px 0 64px;
  }

  .pg-dev-components-product-card__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-dev-components-product-card__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
  }

  .pg-dev-components-product-card__lead code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 14px;
    color: #c41a16;
  }

  .pg-dev-components-product-card__section {
    margin-bottom: 64px;
  }

  .pg-dev-components-product-card__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .pg-dev-components-product-card__section-description {
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
  }

  .pg-dev-components-product-card__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  @media screen and (1px <= width <= 768px) {
    .pg-dev-components-product-card__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }
}

@layer pages {
  .pg-dev-components-radio-button {
    padding: 32px 16px 64px;
  }

  .pg-dev-components-radio-button__inner {
    max-inline-size: 1080px;
    margin-inline: auto;
  }

  .pg-dev-components-radio-button__title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .pg-dev-components-radio-button__lead {
    margin: 0 0 24px;
    color: #444;
  }

  .pg-dev-components-radio-button__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 24px;
    margin-top: 24px;
  }

  .pg-dev-components-radio-button__section-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-dev-components-radio-button__sub-title {
    margin: 20px 0 12px;
    font-size: 16px;
    font-weight: 700;
  }

  .pg-dev-components-radio-button__anatomy {
    display: grid;
    gap: 16px;
    padding: 20px;
    background-color: var(--color-bg-surface);
    border-radius: 8px;
  }

  .pg-dev-components-radio-button__anatomy-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pg-dev-components-radio-button__anatomy-row .pg-dev-components-radio-button__state-name {
    margin: 0;
    min-inline-size: 220px;
  }

  .pg-dev-components-radio-button__state-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pg-dev-components-radio-button__state-item {
    padding: 12px;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
  }

  .pg-dev-components-radio-button__state-name {
    margin: 0 0 2px;
    font-size: 12px;
    color: #666;
  }

  .pg-dev-components-radio-button__example-card {
    padding: 20px;
    border-radius: 8px;
    background-color: var(--color-bg-surface);
  }

  .pg-dev-components-radio-button__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .pg-dev-components-radio-button__fieldset + .pg-dev-components-radio-button__fieldset {
    margin-top: 24px;
  }

  .pg-dev-components-radio-button__fieldset legend {
    margin-bottom: 12px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
  }

  .pg-dev-components-radio-button__example-row {
    display: grid;
    gap: 12px;
  }

  .pg-dev-components-radio-button__example-row.is-3col,
  .pg-dev-components-radio-button__example-row.is-4col {
    grid-template-columns: 1fr;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-radio-button {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-radio-button__state-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
    }

    .pg-dev-components-radio-button__example-row.is-3col {
      grid-template-columns: repeat(3, minmax(0, 200px));
    }

    .pg-dev-components-radio-button__example-row.is-4col {
      grid-template-columns: repeat(4, minmax(0, 200px));
    }
  }
}

@layer pages {
  .pg-dev-components-check-button {
    padding: 32px 16px 64px;
  }

  .pg-dev-components-check-button__inner {
    max-inline-size: 1080px;
    margin-inline: auto;
  }

  .pg-dev-components-check-button__title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .pg-dev-components-check-button__lead {
    margin: 0 0 24px;
    color: #444;
  }

  .pg-dev-components-check-button__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 24px;
    margin-top: 24px;
  }

  .pg-dev-components-check-button__section-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-dev-components-check-button__sub-title {
    margin: 20px 0 12px;
    font-size: 16px;
    font-weight: 700;
  }

  .pg-dev-components-check-button__shape-title {
    margin: 12px 0 10px;
    font-size: 14px;
    font-weight: 700;
  }

  .pg-dev-components-check-button__anatomy {
    display: grid;
    padding: 20px;
    background-color: var(--color-bg-surface);
    align-items: center;
    gap: 12px;
  }

  .pg-dev-components-check-button__anatomy-row .pg-dev-components-check-button__state-name {
    margin: 0;
    min-inline-size: 220px;
  }

  .pg-dev-components-check-button__state-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pg-dev-components-check-button__state-item {
    padding: 12px;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
  }

  .pg-dev-components-check-button__state-name {
    margin: 0 0 2px;
    font-size: 12px;
    color: #666;
  }

  @media screen and (width >= 769px) {
    .pg-dev-components-check-button {
      padding: 48px 32px 88px;
    }

    .pg-dev-components-check-button__state-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
    }
  }
}

@layer pages {
  /* /dev/components/select-box/ のページ CSS(旧: ページ内スコープドスタイルから移設)。 */

  .pg-dev-select-box__inner {
    max-width: 800px;
    margin-inline: auto;
    padding: 48px var(--inner-padding);
  }

  .pg-dev-select-box__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .pg-dev-select-box__lead {
    font-size: 14px;
    color: #666;
    margin-bottom: 48px;
  }

  .pg-dev-select-box__section {
    margin-bottom: 48px;
    border-top: 2px solid #eee;
    padding-top: 24px;
  }

  .pg-dev-select-box__section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
  }

  .pg-dev-select-box__row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
  }

  .pg-dev-select-box__state {
    width: 180px;
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    padding-top: 14px;
  }

  .pg-dev-select-box__group {
    flex: 1;
  }

  .pg-dev-select-box__group--full {
    width: 100%;
  }

  .pg-dev-select-box__item--narrow {
    width: 318px;
  }

  .pg-dev-select-box__item--full {
    width: 100%;
  }

  .pg-dev-select-box__demo-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .pg-dev-select-box__submit {
    padding: 10px 24px;
    background: var(--color-brand-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
  }
}

@layer pages {
  /* /dev/components/text-input/ のページ CSS(旧: ページ内スコープドスタイルから移設)。 */

  .pg-dev-text-input__inner {
    max-width: 800px;
    margin-inline: auto;
    padding: 48px var(--inner-padding);
  }

  .pg-dev-text-input__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .pg-dev-text-input__lead {
    font-size: 14px;
    color: #666;
    margin-bottom: 48px;
  }

  .pg-dev-text-input__section {
    margin-bottom: 48px;
    border-top: 2px solid #eee;
    padding-top: 24px;
  }

  .pg-dev-text-input__section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
  }

  .pg-dev-text-input__row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
  }

  .pg-dev-text-input__state {
    width: 180px;
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    padding-top: 14px;
  }

  .pg-dev-text-input__group {
    flex: 1;
    max-width: 299px;
  }
}

@layer pages {
  /* /dev/components/text-area/ のページ CSS(旧: ページ内スコープドスタイルから移設)。 */

  .pg-dev-text-area__inner {
    max-width: 800px;
    margin-inline: auto;
    padding: 48px var(--inner-padding);
  }

  .pg-dev-text-area__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .pg-dev-text-area__lead {
    font-size: 14px;
    color: #666;
    margin-bottom: 48px;
  }

  .pg-dev-text-area__section {
    margin-bottom: 48px;
    border-top: 2px solid #eee;
    padding-top: 24px;
  }

  .pg-dev-text-area__section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
  }

  .pg-dev-text-area__row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
  }

  .pg-dev-text-area__state {
    width: 180px;
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    padding-top: 14px;
  }

  .pg-dev-text-area__group {
    flex: 1;
    max-width: 301px;
    max-width: 100%;
  }
}

@layer pages {
  .pg-dev-design-colors {
    padding: 32px 16px 72px;
  }

  .pg-dev-design-colors__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-dev-design-colors__title {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .pg-dev-design-colors__lead {
    margin-bottom: 36px;
    max-width: 760px;
    color: #444;
    font-size: 15px;
    line-height: 1.75;
  }

  .pg-dev-design-colors__section {
    margin-top: 36px;
  }

  .pg-dev-design-colors__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .pg-dev-design-colors__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-dev-design-colors__section-note {
    color: #666;
    font-size: 13px;
  }

  .pg-dev-design-colors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
  }

  .pg-dev-design-colors__grid--dense {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .pg-dev-design-colors__card {
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
  }

  .pg-dev-design-colors__card--dense {
    padding: 9px;
  }

  .pg-dev-design-colors__swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .pg-dev-design-colors__swatch.is-border {
    border: 1px solid #ddd;
  }

  .pg-dev-design-colors__sample {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .pg-dev-design-colors__name {
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
  }

  .pg-dev-design-colors__token {
    display: block;
    margin-bottom: 2px;
    color: #1f7f66;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .pg-dev-design-colors__value {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
  }

  @media screen and (width >= 769px) {
    .pg-dev-design-colors {
      padding: 48px 32px 90px;
    }

    .pg-dev-design-colors__title {
      font-size: 42px;
    }

    .pg-dev-design-colors__lead {
      font-size: 16px;
      margin-bottom: 42px;
    }

    .pg-dev-design-colors__section {
      margin-top: 44px;
    }

    .pg-dev-design-colors__grid {
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 14px;
    }

    .pg-dev-design-colors__grid--dense {
      grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    }

    .pg-dev-design-colors__swatch {
      height: 84px;
    }
  }
}

@layer pages {
  .pg-dev-debug-index {
    padding: 32px 16px 72px;
  }

  .pg-dev-debug-index__inner {
    max-width: 980px;
    margin-inline: auto;
  }

  .pg-dev-debug-index__header {
    margin-bottom: 28px;
  }

  .pg-dev-debug-index__title {
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-weight: 700;
  }

  .pg-dev-debug-index__lead {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
  }

  .pg-dev-debug-index__groups {
    display: grid;
    gap: 20px;
  }

  .pg-dev-debug-index__group {
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  }

  .pg-dev-debug-index__group-title {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
  }

  .pg-dev-debug-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
  }

  .pg-dev-debug-index__link {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    text-decoration: none;
    background-color: #fff;
    color: #111;
    transition:
      border-color var(--transition-duration),
      background-color var(--transition-duration);
  }

  .pg-dev-debug-index__link:hover {
    border-color: var(--color-brand-primary);
    background-color: #f7fcf9;
  }

  .pg-dev-debug-index__label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
  }

  .pg-dev-debug-index__path {
    color: #1f7f66;
    font-size: 12px;
    line-height: 1.4;
    font-family: var(--font-en);
  }

  .pg-dev-debug-index__note {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
  }

  @media screen and (width >= 769px) {
    .pg-dev-debug-index {
      padding: 48px 24px 88px;
    }

    .pg-dev-debug-index__title {
      font-size: 42px;
    }

    .pg-dev-debug-index__lead {
      font-size: 16px;
    }

    .pg-dev-debug-index__group {
      padding: 18px;
    }

    .pg-dev-debug-index__group-title {
      font-size: 20px;
    }

    .pg-dev-debug-index__link {
      grid-template-columns: 200px 300px 1fr;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
    }

    .pg-dev-debug-index__label {
      font-size: 12px;
    }

    .pg-dev-debug-index__path,
    .pg-dev-debug-index__note {
      font-size: 12px;
    }
  }
}
/* u- ユーティリティは最優先レイヤー */

@layer utilities {
  /* ユーティリティクラス(u- プレフィックス)。
   layer(utilities) はレイヤー宣言の最後 = 最優先のため、!important は不要。 */

  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .u-pc-only {
    @media screen and (1px <= width <= 768px) {
      display: none;
    }
  }

  .u-sp-only {
    @media screen and (width >= 769px) {
      display: none;
    }
  }
}