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

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

@layer utilities {
  :root {
    --inner-width: 1024px;
    --inner-padding: 20px;
    --transition-duration: 0.3s;
    --breakpoint-sp: 767px;
    --header-height: 68px;

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

    /* 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: rgb(51 51 51);
    --color-text-tertiary: rgb(128 128 128);
    --color-text-disabled: rgb(153 153 153);
    --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: 61px;
    }
  }
}

@layer utilities {
  .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-contents {
    position: relative;
    z-index: 1;
  }
}

/* stylelint-disable property-no-vendor-prefix, property-no-deprecated, selector-not-notation, declaration-property-value-no-unknown -- vendor-supplied reset */

@layer 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;
  }
}

@layer base {
  body {
    /* 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;
  }
}

@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;
    }

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

    .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: var(--color-button-hover);
    }

    .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--pc .c-button__label {
      font-size: 14px;
      letter-spacing: 0.28px;
    }

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

    .c-button--pc.is-text {
      border-bottom-color: var(--color-button-secondary-text);
    }

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

    .c-button.is-icon-circle .c-button__icon-wrap {
      inline-size: var(--button-circle-size);
      block-size: var(--button-circle-size);
      border: 1px solid currentcolor;
      border-radius: 999px;
      padding: 4px;
    }
  }
}

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

    .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 */
    .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 */
    .btn-icon-fav__icon--fill {
      display: none;
    }

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

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

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

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

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

    /* Disabled */

    /* stylelint-disable-next-line no-descending-specificity */
    .btn-icon-fav:disabled,
    .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,
    .c-radio-button__unchecked-focus,
    .c-radio-button__checked-fill,
    .c-radio-button__checked-dot,
    .c-radio-button__checked-focus {
      opacity: 0;
    }

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

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

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

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

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

    .c-radio-button__unchecked {
      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;
    }

    .c-radio-button.is-disabled,
    .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 {
    .typography {
      margin: 0;
      font-family: var(--font-jp);
      color: var(--color-text-primary);
    }

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

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

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

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

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

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

    .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;
    }

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

@layer components {
  @layer atoms {
    .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;
    }

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

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

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

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

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

@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: 4px 0;
      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__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-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__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;
        border: none;
        background-color: 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 {
        background-color: var(--color-text-secondary);
      }

      .c-product-option__button:disabled {
        opacity: 0.5;
        cursor: default;
      }
    }
  }
}

@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;
    }

    /* ── 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-futura);
      font-size: 16px;
      font-weight: 800;
      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 {
    .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);
      }
    }
  }
}

@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;
    }

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

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

@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;
      padding-block: 4px;
      border-bottom: 1px solid var(--color-brand-primary);
      font-family: Poppins, sans-serif;
      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;
    }
  }
}

@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);
    }

    .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;
      align-items: center;
      gap: 8px;
      color: #808080;
      font-family: Poppins, sans-serif;
      font-size: 14px;
      font-weight: 500;
      line-height: 1;
    }

    .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;
    }

    .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__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: 0.7;
    }

    .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 {
      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;
    }

    .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);
    }

    .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: rgba(0, 0, 0, 0.2);
    }

    .c-gallery-image__thumb:hover::before {
      background: rgba(0, 0, 0, 0.1);
    }

    /* PC: サムネイルサイズ 60px */
    @media screen and (width >= 769px) {
      .c-gallery-image__thumbs {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        justify-content: stretch;
        padding-left: 0;
        overflow-x: visible;
      }

      .c-gallery-image__thumb {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        display: block;
      }
    }
  }
}

@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 (width < 769px) {
      .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 header {
    .site-header {
      background-color: var(--color-brand-primary);
      min-height: 60px;
      padding-inline: 16px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;

      @media screen and (width >= 769px) {
        min-height: 68px;
        padding-inline: 65px;
      }
    }

    .site-header__logo {
      line-height: 0;
    }

    .site-header__nav {
      display: flex;
      justify-content: flex-end;
    }

    .header-logo {
      display: inline-block;
    }

    .header-nav-sp {
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 0;

      @media screen and (width >= 1px) and (width <= 768px) {
        display: flex;
      }

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

    .header-nav-sp a,
    .header-nav-sp button,
    .header-nav-pc a,
    .header-nav-pc button {
      color: #000;
      line-height: 0;
    }

    .header-nav-sp__icon {
      display: inline-block;
    }

    .header-nav-pc {
      display: flex;
      align-items: center;
      gap: 16px;
      line-height: 0;

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

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

    .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;
      }
    }

    .menu-button__icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 0;
    }

    .header-nav-pc__icon {
      display: inline-block;
    }

    .menu-button__text {
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%; /* 14px */
      letter-spacing: 0.28px;
    }
  }
}

@layer components {
  @layer header {
    .site-header-top {
      background-color: var(--color-brand-primary);
      min-height: 98px;
      position: relative;
      z-index: 2;
    }

    .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;
    }

    .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;
    }

    .site-header-top__logo {
      position: absolute;
      left: 50%;
      top: 22px;
      transform: translateX(-50%);
      line-height: 0;
    }

    .site-header-top__logo img {
      width: 206px;
      height: auto;
      display: block;
    }

    .site-header-top__nav {
      display: flex;
      align-items: center;
      gap: 20px;
      position: relative;
      z-index: 2;
    }

    .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;
    }

    .site-header-top__guide-button:hover {
      background-color: rgb(255 255 255 / 35%);
    }

    .site-header-top__guide-icon {
      flex-shrink: 0;
    }

    .site-header-top__icons {
      display: flex;
      align-items: center;
      gap: 16px;
      line-height: 0;
    }

    .site-header-top__icons--sp {
      display: none;
    }

    .site-header-top__icons a,
    .site-header-top__icons button {
      color: var(--color-text-primary);
      line-height: 0;
    }

    .site-header-top__icons button {
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    @media screen and (1px <= width <= 767px) {
      .site-header-top {
        min-height: 60px;
      }

      .site-header-top__inner {
        min-height: 60px;
        justify-content: flex-end;
        padding-inline: 16px;
      }

      .site-header-top__tagline {
        display: none;
      }

      .site-header-top__logo {
        position: absolute;
        left: 12px;
        top: 16px;
        transform: none;
        z-index: 3;
      }

      .site-header-top__logo img {
        width: 153px;
        height: 72px;
      }

      .site-header-top__nav {
        gap: 12px;
      }

      .site-header-top__nav--pc {
        display: none;
      }

      .site-header-top__icons--sp {
        display: flex;
        gap: 12px;
        position: relative;
        z-index: 2;
      }

      .site-header-top__guide-button {
        display: none;
      }

      .site-header-top__icons .site-header-top__icon {
        width: 24px;
        height: 24px;
      }
    }
  }
}

@layer components {
  @layer footer {
    /* ── Outer wrapper ── */
    .footer {
      background-color: #000;
      color: #fff;
      width: 100%;
    }

    .footer__content {
      padding: 44px 30px 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }

    /* ── Brand block: logo + SNS ── */
    .footer__brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;
    }

    .footer__logo {
      display: block;
    }

    .footer__sns-list {
      display: flex;
      align-items: center;
      gap: 20px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .footer__sns-item {
      display: flex;
    }

    /* ── Main navigation ── */
    .footer__nav-main-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      list-style: none;
      margin: 0;
      padding: 12px 0;
    }

    .footer__nav-main-link {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.32px;
    }

    .footer__nav-main-link:hover {
      color: var(--color-brand-primary);
    }

    /* ── Sub navigation ── */
    .footer__nav-sub-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .footer__nav-sub-item {
      display: flex;
      align-items: center;
    }

    /* .footer__nav-sub-item + .footer__nav-sub-item:not(:last-child)::after { */
    .footer__nav-sub-item:not(:last-child)::after {
      content: "｜";
      color: #fff;
      font-size: 14px;
      line-height: 1.5;
      padding: 0 8px;
    }

    .footer__nav-sub-link {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.28px;
    }

    .footer__nav-sub-link:hover {
      color: var(--color-brand-primary);
    }

    /* ── Payment icons ── */
    .footer__payment {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;

      /* hide scrollbar visually */
      scrollbar-width: none;
    }

    .footer__payment::-webkit-scrollbar {
      display: none;
    }

    .footer__payment-icon {
      flex-shrink: 0;
      width: 28px;
      height: 17.5px;
      background-color: #b2b2b2;
      border-radius: 2px;
    }

    /* ── Copyright ── */
    .footer__copyright {
      width: 100%;
      border-top: 1px solid #fff;
      padding: 16px 30px;
      text-align: center;
    }

    .footer__copyright small {
      font-family: Poppins, sans-serif;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      color: #fff;
    }

    /* ── SNS icon links ── */
    .sns-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }

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

@layer pages {
  /* ===== FV (First View) — SP base ===== */

  .fv {
    position: relative;
    background-color: var(--color-brand-primary);
  }

  .fv__hero {
    display: grid;
    height: 600px;

    /* SP: [images][right-rail] */
    grid-template-columns: 1fr 30px;
    grid-template-areas: "kv rail-right";
    align-items: stretch;
  }

  /* ---- Images ---- */

  .fv__kv-wrap {
    grid-area: kv;
    position: relative;
  }

  .fv__kv {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fv__kv-item {
    block-size: 300px;
    overflow: hidden;
  }

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

  /* ---- Vertical rails ---- */

  .fv__rail {
    overflow: hidden;
    position: relative;
  }

  .fv__rail--left {
    display: none; /* hidden on SP */
    grid-area: rail-left;
  }

  .fv__rail--right {
    grid-area: rail-right;
  }

  /* Two groups stacked vertically — seamless infinite scroll */
  .fv__rail-track {
    display: flex;
    flex-direction: column;
    block-size: max-content;
  }

  .fv__rail-track--up {
    animation: fv-rail-up var(--fv-rail-duration, 22s) linear infinite;
  }

  .fv__rail-track--down {
    animation: fv-rail-down var(--fv-rail-duration, 22s) linear infinite;
  }

  .fv__rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-block: 8px;
  }

  .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;
  }

  .fv__rail-icon {
    color: #fff;
    flex-shrink: 0;
    rotate: 90deg;
  }

  /* ---- Info panel ---- */

  .fv__info {
    position: absolute;
    inset-inline: 20px;
    inset-block-end: 30px;
    min-block-size: 96px;
    width: calc(100vw - 40px);
    border: 1px solid #000;
    border-radius: 0 20px 20px;
    background-color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    color: #000;
    text-decoration: none;
  }

  .fv__info-label {
    position: absolute;
    inset-block-start: -28px;
    inset-inline-start: -1px;
    min-block-size: 28px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    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: 4px 16px 0;
  }

  .fv__info-text {
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .fv__info-arrow {
    color: #000;
    flex-shrink: 0;
  }

  /* ---- Search sticker (hidden on SP) ---- */

  .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) {
    .fv__rail-track {
      animation: none;
    }
  }

  /* ===== PC ===== */

  @media screen and (width >= 769px) {
    .fv {
      /* height: auto; */
    }

    .fv__hero {
      /* max-inline-size: 1280px; */
      margin-inline: auto;
      height: 630px; /* TODO: あとで画面幅いっぱいにするかも */

      /* PC: [left-rail][images][right-rail] */
      grid-template-columns: 50px 1fr 50px;
      grid-template-areas: "rail-left kv rail-right";
    }

    .fv__rail--left {
      display: block;
    }

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

    .fv__kv-item {
      block-size: 630px;
    }

    .fv__info {
      inset-inline: 36px auto; /* shorthand for the above two */
      inset-block-end: 30px;
      inline-size: 522px;
    }

    /* Search sticker */
    .fv__search-sticker {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      inset-block-end: 20px;
      inset-inline-end: 20px;
      inline-size: 160px;
      block-size: 160px;
      border-radius: 50%;
      background-color: var(--color-accent-yellow-primary);
      border: 2px solid #000;
      text-decoration: none;
      color: #000;
      gap: 6px;
      transition: opacity 0.2s;
    }

    .fv__search-sticker:hover {
      opacity: 0.85;
    }

    .fv__search-sticker-icon {
      display: flex;
    }

    .fv__search-sticker-text {
      font-family: var(--font-jp);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
    }
  }
}

@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-family: var(--font-jp);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding-block: 4px;
    color: var(--color-text-primary);
  }

  .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;
  }

  .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);
  }

  /* ── CardSlider context overrides ── */
  .pg-home-pickup .c-card-slider {
    --c-card-slider-gap: 20px;
  }

  .pg-home-pickup .c-card-slider .c-product-card {
    flex: 0 0 224px;
    scroll-snap-align: start;
  }

  /* ── "もっとみる" ── */
  .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 var(--color-text-primary);
    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 .c-card-slider {
      --c-card-slider-gap: 36px;

      inline-size: 100%;
    }

    .pg-home-pickup .c-card-slider .c-product-card {
      flex: 1 0 0;
      scroll-snap-align: none;
    }

    .pg-home-pickup__more-sp {
      display: none;
    }

    .pg-home-pickup__more-pc {
      display: flex;
      align-self: flex-end;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--color-text-primary);
    }

    .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;
  }

  .pg-home-search-guide__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .pg-home-search-guide__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);
  }

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

  .pg-home-search-guide__chip-item {
    margin: 0;
  }

  .pg-home-search-guide__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;
  }

  @media screen and (width >= 769px) {
    .pg-home-search-guide__inner {
      padding-inline: 0;
    }
  }
}

@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 var(--color-text-primary);
    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);
    }

    .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;
  }

  .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: Poppins, sans-serif;
    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;
  }

  .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: Poppins, sans-serif;
    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: Poppins, sans-serif;
    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: 36px;
    inline-size: 100%;
    padding: 4px 12px 6px;
    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;
  }

  .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%;
  }

  .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;
  }

  @media screen and (width < 769px) {
    .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 var(--color-text-primary);
      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 {
      padding-bottom: 16px;
      inline-size: 100%;
    }

    .pg-home-howto__grid {
      gap: 60px 36px;
      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__methods {
      gap: 40px;
    }

    .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;
    }

    .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;
  }

  .pg-home-category__inner {
    max-inline-size: var(--inner-width);
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

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

  .pg-home-category__grid {
    inline-size: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-items: center;
  }

  .pg-home-category__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);
  }

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

  .pg-home-category__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%;
  }

  @media screen and (width >= 769px) {
    .pg-home-category__inner {
      padding-inline: 128px;
    }

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

@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 var(--color-text-primary);
    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: 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;
    }

    .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;
  }

  .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 var(--color-text-primary);
    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-direction: column;
    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 {
  .pg-about .mainvisual {
    background-color: blue;
    color: red;
  }
}

@layer pages {
  .pg-components-buttons {
    padding: 32px 16px 64px;
  }

  .pg-components-buttons__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-components-buttons__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-components-buttons__lead {
    margin-bottom: 24px;
    color: #444;
  }

  .pg-components-buttons__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 24px;
    margin-top: 24px;
  }

  .pg-components-buttons__section-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .pg-components-buttons__row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: center;
    padding-block: 8px;
  }

  .pg-components-buttons__state {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .pg-components-buttons__group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  @media screen and (width >= 769px) {
    .pg-components-buttons {
      padding: 48px 32px 88px;
    }

    .pg-components-buttons__lead {
      margin-bottom: 28px;
    }

    .pg-components-buttons__row {
      grid-template-columns: 120px 1fr;
      gap: 16px;
      padding-block: 10px;
    }

    .pg-components-buttons__group {
      gap: 16px;
    }
  }
}

@layer pages {
  .pg-components-index {
    padding: 32px 16px 64px;
  }

  .pg-components-index__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-components-index__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-components-index__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
  }

  .pg-components-index__section {
    margin-bottom: 48px;
  }

  .pg-components-index__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .pg-components-index__section-description {
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
  }

  .pg-components-index__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pg-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-components-index__card:hover:not([data-disabled]) {
    border-color: #25a07d;
    background-color: #fafbfa;
  }

  .pg-components-index__card[data-disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pg-components-index__card-icon {
    font-size: 20px;
    line-height: 1.2;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .pg-components-index__card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-components-index__card-description {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
  }

  .pg-components-index__card-badge {
    display: inline-block;
    padding: 2px 6px;
    background-color: #f0f0f0;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-decoration: none;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  @media screen and (width >= 769px) {
    .pg-components-index {
      padding: 48px 32px 88px;
    }

    .pg-components-index__title {
      font-size: 40px;
    }

    .pg-components-index__lead {
      margin-bottom: 48px;
      font-size: 18px;
    }

    .pg-components-index__section {
      margin-bottom: 56px;
    }

    .pg-components-index__section-title {
      font-size: 28px;
    }

    .pg-components-index__grid {
      gap: 10px;
    }

    .pg-components-index__card {
      padding: 14px 16px;
      gap: 14px;
    }

    .pg-components-index__card-icon {
      font-size: 22px;
    }

    .pg-components-index__card-title {
      font-size: 16px;
    }

    .pg-components-index__card-description {
      font-size: 13px;
    }
  }
}

@layer pages {
  .pg-components-icons {
    padding: 32px 0 64px;
  }

  .pg-components-icons__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-components-icons__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
  }

  .pg-components-icons__lead code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 14px;
    color: #c41a16;
  }

  .pg-components-icons__section {
    margin-bottom: 48px;
  }

  .pg-components-icons__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .pg-components-icons__section-description {
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
  }

  .pg-components-icons__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Icon grid */
  .pg-components-icons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 4px;
  }

  .pg-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-components-icons__grid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .pg-components-icons__grid-icon img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .pg-components-icons__grid-name {
    font-size: 10px;
    color: #666;
    text-align: center;
    line-height: 1.3;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .pg-components-icons__item {
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 20px;
  }

  .pg-components-icons__item-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .pg-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-components-icons__item-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .pg-components-icons__item-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .pg-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-components-icons__item-size {
    font-size: 12px;
    color: #666;
    font-weight: 600;
  }

  .pg-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-components-icons__color-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 80px;
  }

  .pg-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-components-icons__color-label {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.4;
  }

  .pg-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-components-icons__code code {
    font-family: "Courier New", monospace;
    color: #333;
  }

  .pg-components-icons__subsection-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 20px;
  }

  .pg-components-icons__props-table {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    overflow: hidden;
  }

  .pg-components-icons__props-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px 1fr;
    border-bottom: 1px solid #e1e1e1;
  }

  .pg-components-icons__props-row:last-child {
    border-bottom: none;
  }

  .pg-components-icons__props-header {
    background-color: #f5f5f5;
  }

  .pg-components-icons__props-cell {
    padding: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
  }

  .pg-components-icons__props-header .pg-components-icons__props-cell {
    font-weight: 700;
  }

  .pg-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-components-icons {
      padding: 48px 32px 88px;
    }

    .pg-components-icons__title {
      font-size: 40px;
    }

    .pg-components-icons__lead {
      margin-bottom: 48px;
      font-size: 18px;
    }

    .pg-components-icons__section {
      margin-bottom: 56px;
    }

    .pg-components-icons__section-title {
      font-size: 28px;
    }

    .pg-components-icons__list {
      gap: 40px;
    }

    .pg-components-icons__item {
      padding: 28px;
    }

    .pg-components-icons__item-row {
      gap: 24px;
    }

    .pg-components-icons__props-row {
      grid-template-columns: 120px 100px 100px 1fr;
    }

    .pg-components-icons__props-cell {
      padding: 14px;
      font-size: 14px;
    }
  }
}

@layer pages {
  .pg-components-typography {
    padding: 32px 16px 64px;
  }

  .pg-components-typography__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-components-typography__title {
    margin-bottom: 8px;
  }

  .pg-components-typography__lead {
    margin-bottom: 28px;
    color: #444;
  }

  .pg-components-typography__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 20px;
  }

  .pg-components-typography__section-title {
    margin-bottom: 12px;
  }

  .pg-components-typography__example {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #fff;
  }

  .pg-components-typography__table {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
  }

  .pg-components-typography__row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 2fr;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid #e1e1e1;
  }

  .pg-components-typography__row:first-child {
    border-top: 0;
  }

  .pg-components-typography__row--head {
    background-color: #f5f5f5;
    font-weight: 700;
  }

  .pg-components-typography__row p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  @media screen and (width >= 769px) {
    .pg-components-typography {
      padding: 48px 32px 88px;
    }

    .pg-components-typography__section {
      padding-top: 24px;
      margin-top: 24px;
    }

    .pg-components-typography__example {
      padding: 24px;
      gap: 12px;
    }

    .pg-components-typography__row {
      padding: 14px 16px;
    }
  }
}

@layer pages {
  .pg-components-badge {
    padding: 32px 16px 64px;
  }

  .pg-components-badge__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-components-badge__title {
    margin-bottom: 8px;
  }

  .pg-components-badge__lead {
    margin-bottom: 28px;
    color: #444;
  }

  .pg-components-badge__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 20px;
    margin-top: 20px;
  }

  .pg-components-badge__section-title {
    margin-bottom: 12px;
  }

  .pg-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-components-badge__row--hash {
    gap: 16px 8px;
  }

  @media screen and (width >= 769px) {
    .pg-components-badge {
      padding: 48px 32px 88px;
    }

    .pg-components-badge__section {
      padding-top: 24px;
      margin-top: 24px;
    }

    .pg-components-badge__row {
      padding: 20px;
    }
  }
}

@layer pages {
  .pg-components-button-icon-fav {
    padding-block: 40px;
  }

  .pg-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-components-button-icon-fav__lead {
    margin-block-start: -24px;
    color: var(--color-text-secondary);
  }

  .pg-components-button-icon-fav__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-components-button-icon-fav__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
  }

  .pg-components-button-icon-fav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}

@layer pages {
  .pg-components-product-card {
    padding: 32px 0 64px;
  }

  .pg-components-product-card__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }

  .pg-components-product-card__lead {
    margin-bottom: 40px;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
  }

  .pg-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-components-product-card__section {
    margin-bottom: 64px;
  }

  .pg-components-product-card__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .pg-components-product-card__section-description {
    margin-bottom: 24px;
    color: #666;
    font-size: 14px;
  }

  .pg-components-product-card__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  @media screen and (1px <= width <= 767px) {
    .pg-components-product-card__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }
}

@layer pages {
  .pg-components-radio-button {
    padding: 32px 16px 64px;
  }

  .pg-components-radio-button__inner {
    max-inline-size: 1080px;
    margin-inline: auto;
  }

  .pg-components-radio-button__title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .pg-components-radio-button__lead {
    margin: 0 0 24px;
    color: #444;
  }

  .pg-components-radio-button__section {
    border-top: 1px solid #e1e1e1;
    padding-top: 24px;
    margin-top: 24px;
  }

  .pg-components-radio-button__section-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-components-radio-button__sub-title {
    margin: 20px 0 12px;
    font-size: 16px;
    font-weight: 700;
  }

  .pg-components-radio-button__anatomy {
    display: grid;
    gap: 16px;
    padding: 20px;
    background-color: #f4efef;
    border-radius: 8px;
  }

  .pg-components-radio-button__anatomy-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pg-components-radio-button__anatomy-row .pg-components-radio-button__state-name {
    margin: 0;
    min-inline-size: 220px;
  }

  .pg-components-radio-button__state-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pg-components-radio-button__state-item {
    padding: 12px;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
  }

  .pg-components-radio-button__state-name {
    margin: 0 0 2px;
    font-size: 12px;
    color: #666;
  }

  .pg-components-radio-button__example-card {
    padding: 20px;
    border-radius: 8px;
    background-color: #f4efef;
  }

  .pg-components-radio-button__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .pg-components-radio-button__fieldset + .pg-components-radio-button__fieldset {
    margin-top: 24px;
  }

  .pg-components-radio-button__fieldset legend {
    margin-bottom: 12px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
  }

  .pg-components-radio-button__example-row {
    display: grid;
    gap: 12px;
  }

  .pg-components-radio-button__example-row.is-3col,
  .pg-components-radio-button__example-row.is-4col {
    grid-template-columns: 1fr;
  }

  @media screen and (width >= 769px) {
    .pg-components-radio-button {
      padding: 48px 32px 88px;
    }

    .pg-components-radio-button__state-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
    }

    .pg-components-radio-button__example-row.is-3col {
      grid-template-columns: repeat(3, minmax(0, 200px));
    }

    .pg-components-radio-button__example-row.is-4col {
      grid-template-columns: repeat(4, minmax(0, 200px));
    }
  }
}

@layer pages {
  .pg-secondary-menu {
    position: fixed;
    inset: 0;
    z-index: 40;
    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);
  }

  .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: 40px;
    }

    .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-design-colors {
    padding: 32px 16px 72px;
  }

  .pg-design-colors__inner {
    max-width: 1080px;
    margin-inline: auto;
  }

  .pg-design-colors__title {
    margin-bottom: 10px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .pg-design-colors__lead {
    margin-bottom: 36px;
    max-width: 760px;
    color: #444;
    font-size: 15px;
    line-height: 1.75;
  }

  .pg-design-colors__section {
    margin-top: 36px;
  }

  .pg-design-colors__head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    margin-bottom: 14px;
  }

  .pg-design-colors__section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
  }

  .pg-design-colors__section-note {
    color: #666;
    font-size: 13px;
  }

  .pg-design-colors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
  }

  .pg-design-colors__grid--dense {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .pg-design-colors__card {
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #fff;
  }

  .pg-design-colors__card--dense {
    padding: 9px;
  }

  .pg-design-colors__swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    border-radius: 6px;
    margin-bottom: 8px;
  }

  .pg-design-colors__swatch.is-border {
    border: 1px solid #ddd;
  }

  .pg-design-colors__sample {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .pg-design-colors__name {
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
  }

  .pg-design-colors__token {
    display: block;
    margin-bottom: 2px;
    color: #1f7f66;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .pg-design-colors__value {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
  }

  @media screen and (width >= 769px) {
    .pg-design-colors {
      padding: 48px 32px 90px;
    }

    .pg-design-colors__title {
      font-size: 42px;
    }

    .pg-design-colors__lead {
      font-size: 16px;
      margin-bottom: 42px;
    }

    .pg-design-colors__section {
      margin-top: 44px;
    }

    .pg-design-colors__grid {
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 14px;
    }

    .pg-design-colors__grid--dense {
      grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    }

    .pg-design-colors__swatch {
      height: 84px;
    }
  }
}

@layer pages {
  .pg-debug-index {
    padding: 32px 16px 72px;
  }

  .pg-debug-index__inner {
    max-width: 980px;
    margin-inline: auto;
  }

  .pg-debug-index__header {
    margin-bottom: 28px;
  }

  .pg-debug-index__title {
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-weight: 700;
  }

  .pg-debug-index__lead {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
  }

  .pg-debug-index__groups {
    display: grid;
    gap: 20px;
  }

  .pg-debug-index__group {
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    padding: 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  }

  .pg-debug-index__group-title {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
  }

  .pg-debug-index__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
  }

  .pg-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-debug-index__link:hover {
    border-color: var(--color-brand-primary);
    background-color: #f7fcf9;
  }

  .pg-debug-index__label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
  }

  .pg-debug-index__path {
    color: #1f7f66;
    font-size: 12px;
    line-height: 1.4;
    font-family: var(--font-en);
  }

  .pg-debug-index__note {
    color: #666;
    font-size: 12px;
    line-height: 1.4;
  }

  @media screen and (width >= 769px) {
    .pg-debug-index {
      padding: 48px 24px 88px;
    }

    .pg-debug-index__title {
      font-size: 42px;
    }

    .pg-debug-index__lead {
      font-size: 16px;
    }

    .pg-debug-index__group {
      padding: 18px;
    }

    .pg-debug-index__group-title {
      font-size: 20px;
    }

    .pg-debug-index__link {
      grid-template-columns: 180px 200px 1fr;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
    }

    .pg-debug-index__label {
      font-size: 14px;
    }

    .pg-debug-index__path,
    .pg-debug-index__note {
      font-size: 13px;
    }
  }
}

@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: 20;
    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 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);
  }

  .pg-secondary-layout__breadcrumbs {
    display: none;
  }

  @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;
    }

    .pg-secondary-menu__panel-header {
      padding-inline: 40px;
    }

    .pg-secondary-layout__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);
    }

    .pg-secondary-layout__breadcrumbs a {
      color: inherit;
      text-decoration: none;
    }
  }
}

@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;
  }

  .c-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);
  }

  .c-secondary-action-button:hover {
    background-color: var(--color-brand-primary);
  }

  .c-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;
  }

  .c-secondary-action-button__icon {
    color: var(--color-text-primary);
  }

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

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

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

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

  .c-radio-option__control::before,
  .c-secondary-radio-button__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,
  .c-secondary-radio-button__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,
  .c-secondary-radio-button__input:checked + .c-secondary-radio-button__content + .c-secondary-radio-button__control::after {
    opacity: 1;
    transform: scale(1);
  }

  .c-radio-option__input:focus-visible + .c-radio-option__content + .c-radio-option__control::before,
  .c-secondary-radio-button__input:focus-visible + .c-secondary-radio-button__content + .c-secondary-radio-button__control::before,
  .c-radio-option.is-focus .c-radio-option__control::before,
  .c-secondary-radio-button.is-focus .c-secondary-radio-button__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,
  .c-secondary-radio-button.is-error .c-secondary-radio-button__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,
  .c-secondary-radio-button.is-error .c-secondary-radio-button__input:checked + .c-secondary-radio-button__content + .c-secondary-radio-button__control::after {
    background-color: var(--color-status-error-primary);
  }

  .c-radio-option__input:disabled + .c-radio-option__content + .c-radio-option__control::before,
  .c-secondary-radio-button__input:disabled + .c-secondary-radio-button__content + .c-secondary-radio-button__control::before {
    border-color: #b2b2b2;
  }

  .c-radio-option__input:disabled + .c-radio-option__content + .c-radio-option__control::after,
  .c-secondary-radio-button__input:disabled + .c-secondary-radio-button__content + .c-secondary-radio-button__control::after {
    background-color: #b2b2b2;
  }

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

  .c-radio-option.is-disabled .c-radio-option__input,
  .c-secondary-radio-button.is-disabled .c-secondary-radio-button__input {
    cursor: not-allowed;
  }

  @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; */
  }

  .pg-secondary-login__spotlight {
    padding-top: 20px;
    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: 112px;
    left: 0;
    right: 0;
    z-index: 1;
    font-size: 0;
    line-height: 1;
  }

  .pg-secondary-login__lead {
    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;
  }

  .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 5000ms cubic-bezier(0.22, 1, 0.36, 1) 1080ms 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);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-secondary-login__spotlight,
    .pg-secondary-login__hero-image-wrap img {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .pg-secondary-login__fields {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline: 36px;
    margin-top: 40px;
  }

  .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 span {
    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 190px;
      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__intro {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .pg-secondary-theme__intro-copy {
    padding-block: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .pg-secondary-theme__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;
  }

  .pg-secondary-theme__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;
  }

  .pg-secondary-theme__hero-image {
    aspect-ratio: 272 / 272;
    inline-size: 100%;
  }

  @media screen and (width < 769px) {
    .pg-secondary-theme__hero-image {
      margin-inline: -24px;
      inline-size: auto;
    }
  }

  .pg-secondary-theme__hero-image img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .pg-secondary-theme-topic {
    margin: 0;
    background-color: var(--color-bg-canvas);
    padding: 28px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .pg-secondary-theme-topic__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-secondary-theme-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;
  }

  .pg-secondary-theme-topic__title {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-secondary-theme-topic__description {
    margin: 0;
    font-family: var(--font-jp);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  .pg-secondary-theme-gifts {
    padding: 24px 0 0;
  }

  .pg-secondary-theme-gifts__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;
  }

  .pg-secondary-theme-gifts__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 12px;
  }

  .c-secondary-gift-card {
    min-inline-size: 0;
  }

  .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-family: var(--font-jp);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .pg-secondary-theme-gifts__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;
  }

  .pg-secondary-theme-gifts__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;
  }

  .pg-secondary-theme-gifts__pager a:not([class]):hover {
    opacity: 1;
    color: var(--color-text-highlight);
    border: 1px solid var(--color-text-highlight);
  }

  .pg-secondary-theme-gifts__pager .is-arrow {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    color: var(--color-text-primary);
  }

  .pg-secondary-theme-gifts__pager .is-arrow:hover {
    color: var(--color-text-highlight);
  }

  .pg-secondary-theme-gifts__pager .is-arrow--prev {
    margin-right: auto;
  }

  .pg-secondary-theme-gifts__pager .is-arrow--next {
    margin-left: auto;
  }

  .pg-secondary-theme-gifts__pager span.is-dots {
    display: grid;
    place-items: center;
  }

  .pg-secondary-theme-gifts__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);
  }

  .pg-secondary-theme-gifts__pager span[aria-hidden="true"] {
    inline-size: 16px;
    block-size: auto;
    border-radius: 0;
  }

  .pg-secondary-theme-howto {
    background-color: var(--color-support-cyan-secondary);
    padding: 56px var(--inner-padding);
    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;
    margin-bottom: 16px;
  }

  .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__intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 40px;
      margin-bottom: 60px;

      /* padding: 80px 190px 0; */
    }

    .pg-secondary-theme__hero-image-container {
      grid-column: 1;
      grid-row: 1 / 3;
      aspect-ratio: unset;
      align-self: stretch;
      inline-size: 100%;
      margin: 0;
    }

    .pg-secondary-theme__hero-image img {
      block-size: 100%;
    }

    .pg-secondary-theme__intro-copy {
      grid-column: 2;
      grid-row: 1;
      padding: 0;
      gap: 26px;
      justify-content: flex-start;
    }

    .pg-secondary-theme__lead {
      line-height: 1.5;
    }

    .pg-secondary-theme__deadline-chip {
      display: none;
    }

    .pg-secondary-theme-topic {
      grid-column: 2;
      grid-row: 2;
      background-color: var(--color-bg-surface);
      border-radius: 20px;
      padding: 24px;
      gap: 8px;
    }

    .pg-secondary-theme-gifts {
      padding-top: 0;
    }

    .pg-secondary-theme-gifts__title {
      font-size: 22px;
      margin-bottom: 40px;
    }

    .pg-secondary-theme-gifts__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 36px 20px;
    }

    .c-secondary-gift-card__brand {
      font-size: 14px;
    }

    .pg-secondary-theme-gifts__pager {
      margin-top: 40px;
      padding: 20px 0;
    }

    .pg-secondary-theme-howto {
      padding: 60px var(--inner-padding) 80px;
      gap: 50px;
    }

    .pg-secondary-theme-howto__content {
      flex-direction: row;
      gap: 40px;
      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 > figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .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 > 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;
    font-size: 18px;
    letter-spacing: 0.36px;
  }

  .pg-secondary-detail-summary__cta {
    margin-block-end: 8px;
  }

  .pg-secondary-detail-summary__cta .c-button {
    inline-size: min(100%, 350px);
  }

  .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;
    padding: 48px 16px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, #fff 58.173%);
    z-index: 20;
    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__actions {
    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: 48px;
  }

  .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;
  }

  .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);
  }

  @media screen and (width < 769px) {
    /* .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, 510px) minmax(0, 1fr);
      gap: 48px;
      align-items: start;
    }

    .pg-secondary-detail-hero__tag {
      display: none;
    }

    .pg-secondary-detail-gallery {
      position: sticky;
      inset-block-start: 116px;
      gap: 12px;
    }

    .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__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__actions {
      justify-content: flex-start;
    }

    .pg-secondary-detail-summary__body {
      gap: 36px;
    }

    .pg-secondary-detail-spec {
      background-color: var(--color-bg-surface, #f4efef);
      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 {
    position: fixed;
    inset: 0;
    z-index: 60;
    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;
  }

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

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

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

  .pg-secondary-receive-modal__panel {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 350px);
    max-block-size: min(calc(100dvh - 32px), 544px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--color-bg-canvas);
    transform: translateY(10px);
    transition: transform 0.24s ease;
  }

  .pg-secondary-receive-modal.is-open .pg-secondary-receive-modal__panel {
    transform: translateY(0);
  }

  .pg-secondary-receive-modal__content {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: auto;
    padding: 16px 16px 12px;
  }

  .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 {
      padding: 32px 24px;
    }

    .pg-secondary-receive-modal__panel {
      inline-size: min(100%, 700px);
      max-block-size: 100%;
    }

    .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;
    }
  }
}