@layer reset, foundation, layout, animation, models, views, utility;

@layer foundation {
  :root {

    --text-main: #333333;
    --text-gold: #baa07a;
    --line: #d5d0ca;
    --bg-beige-light: #f9f8f6;
    --bg-black: #191816;

    --text-sub: #595959;
    --hover-gray: #7d7d7d;
    --text-gold-dark: #a28c68;

    --text-white: #ffffff;
    --bg-beige-dark: #f0ede8;
    --bg-white: #ffffff;

    --tag-gray: #7a766e;

    --hover-gold: #e3dacd;

    --modal-overlay: rgba(0, 0, 0, 0.3);
    --session-overlay-1: rgba(193, 192, 197, 0.2);
    --session-overlay-2: rgba(0, 0, 0, 0.4);

    --color-ink: var(--text-main);
    --color-bg: #ffffff;

    --content-max: 1180px;
    --gutter: 20px;

    --design-max: 1440px;

    --header-h: 60px;

    --ease-hover: ease-out;
    --dur-hover: 0.2s;
    --dur-thumb: 0.35s;
    --dur-sns: 0.3s;

    --dur-accordion: 0.35s;

    --dur-drawer: 0.28s;

    --dur-header: 0.28s;

    --dur-modal: 0.28s;

    --dur-detail: 0.35s;

    --banner-pin: 60vh;

    --sticky-header-h: var(--header-h);

    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    --ease-in-custom: cubic-bezier(0.3, 0, 0.75, 1);
  }

  html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;

    scroll-padding-top: var(--header-h);

    scroll-behavior: smooth;
    background: var(--color-bg);
    color: var(--color-ink);
  }

  body {
    font-family: "Jost", "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
                 "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.8;

    letter-spacing: 0.02em;
  }

  :focus-visible {
    outline: 2px solid;
    outline-offset: 0;
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline-color: #595959;
  }
}

@layer layout {

  .l-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 12px 32px 12px 24px;
    background: #fff;
  }

  @media (max-width: 1032px) {
    :root {
      --header-h: 48px;
    }

    .l-header {
      padding: 0 20px;
    }

    body.is-nav-open .l-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 60;
    }
  }

  .l-header--overlay {

    margin-bottom: -60px;
    justify-content: flex-end;
    padding-right: 24px;
    background: transparent;
    color: #fff;

    transition: translate var(--dur-header) var(--ease-in-out-cubic);
  }

  .l-header--overlay.is-sliding {

    translate: 0 -100%;
  }

  body.is-nav-open .l-header--overlay {
    translate: none;
    transition: none;
  }

  body:not(.is-nav-open) .l-header--overlay:not(.is-scrolled) {
    position: relative;
  }

  .l-header--overlay.is-scrolled {
    padding-right: 32px;
    background: var(--bg-white);
    color: var(--text-main);
  }

  .l-header--overlay.is-scrolled .v-gnav {
    flex: 1;
  }

  @media (max-width: 1032px) {
    .l-header--overlay {
      margin-bottom: -48px;

      padding-right: 20px;
    }

    .l-header--overlay.is-scrolled {
      padding-right: 20px;
    }
  }

  .l-container {
    width: 100%;
    max-width: calc(var(--content-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

@layer animation {
}

@layer models {

  .m-entry {
    max-width: 900px;
    margin-inline: auto;
  }

  .m-entry__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--line);
  }

  .m-entry__title {
    font-weight: 300;
    font-size: 3.6rem;
    line-height: 54px;
    letter-spacing: 0.03em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;
  }

  .m-entry__meta {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .m-entry__date {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 18px;
    letter-spacing: 0.0923em;
    color: var(--text-gold-dark);
    white-space: nowrap;
  }

  .m-entry__head .m-tag-list {
    gap: 16px;
  }

  .m-entry__tag {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 16.5px;
    color: var(--text-sub);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
  }

  .m-entry-body {
    padding-top: 40px;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-main);
  }

  .m-entry-body > p {
    text-box: trim-both cap alphabetic;
  }

  .m-entry-body h2,
  .m-entry-body h3,
  .m-entry-body h4 {

    line-height: 1.5;
    letter-spacing: normal;
    text-box: trim-both cap alphabetic;

    overflow-wrap: break-word;
  }

  .m-entry-body h2 {
    padding: 10px 0 10px 20px;
    border-left: 4px solid var(--text-main);

    font-weight: 300;
    font-size: 2.8rem;
  }

  .m-entry-body h3 {
    font-size: 2.4rem;
  }

  .m-entry-body h4 {
    font-size: 1.8rem;
  }

  .m-entry-body a {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: text-decoration-color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .m-entry-body a:hover {
      text-decoration-color: transparent;
    }
  }

  .m-entry-body > * + * {
    margin-top: 40px;
  }

  .m-entry-body > * + figure {
    margin-top: 80px;
  }

  .m-entry-body figure img {
    height: auto;
    max-height: 640px;
    object-fit: contain;
    margin-inline: auto;
  }

  .m-entry-body :is(iframe, video, embed, object) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border: 0;
  }

  .m-entry-body :is(iframe, embed, object) {
    aspect-ratio: 16 / 9;
  }

  .m-entry-body video {
    aspect-ratio: auto 16 / 9;
    max-height: 640px;
    object-fit: contain;
  }

  .m-entry-body .wp-embed-aspect-21-9 :is(iframe, embed, object) {
    aspect-ratio: 21 / 9;
  }

  .m-entry-body .wp-embed-aspect-18-9 :is(iframe, embed, object) {
    aspect-ratio: 18 / 9;
  }

  .m-entry-body .wp-embed-aspect-4-3 :is(iframe, embed, object) {
    aspect-ratio: 4 / 3;
  }

  .m-entry-body .wp-embed-aspect-1-1 :is(iframe, embed, object) {
    aspect-ratio: 1 / 1;
  }

  .m-entry-body .wp-embed-aspect-9-16 :is(iframe, embed, object) {
    aspect-ratio: 9 / 16;
  }

  .m-entry-body .wp-embed-aspect-1-2 :is(iframe, embed, object) {
    aspect-ratio: 1 / 2;
  }

  @media (max-width: 767px) {
    .m-entry__title {
      font-size: 2.2rem;
      line-height: 1.35;

      letter-spacing: 0.02em;
    }

    .m-entry-body {
      padding-top: 36px;
    }

    .m-entry-body h2 {
      font-size: 2.2rem;
    }

    .m-entry-body h3 {
      font-size: 2rem;
    }

    .m-entry-body > * + * {
      margin-top: 36px;
    }

    .m-entry-body > h2 + *,
    .m-entry-body > h3 + *,
    .m-entry-body > h4 + *,
    .m-entry-body > * + h2,
    .m-entry-body > * + h3,
    .m-entry-body > * + h4 {
      margin-top: 40px;
    }

    .m-entry-body > * + figure {
      margin-top: 60px;
    }
  }

  .m-shop-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    max-width: 900px;
    margin-inline: auto;
    margin-top: 60px;
    padding: 40px;
    background: var(--bg-beige-dark);
  }

  .m-shop-footer__name {
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-main);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  .m-shop-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  @media (max-width: 767px) {
    .m-shop-footer {
      gap: 24px;
      margin-top: 40px;
      padding: 32px 20px;
    }

    .m-shop-footer__name {
      font-size: 1.6rem;
    }
  }

  @media (max-width: 767px) {

    .m-entry--news .m-entry__title {
      line-height: 1.5;
      letter-spacing: 0.03em;
    }
  }

  .m-post-list {
    max-width: 900px;
    margin-inline: auto;
  }

  .m-post-list__item {
    border-bottom: 1px solid var(--line);
  }

  .m-post-list__link {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    padding: 36px 2px;
  }

  .m-post-list__date {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 18px;
    letter-spacing: 0.0923em;
    color: var(--text-gold-dark);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  .m-post-list__title {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;
    transition: color var(--dur-hover) var(--ease-hover);
  }

  @media (max-width: 767px) {
    .m-post-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .m-post-list__link {
      flex-direction: column;
      gap: 18px;
      padding-block: 0 24px;
    }
  }

  @media (hover: hover) and (pointer: fine) {

    .m-post-list__link:hover .m-post-list__title {
      color: var(--hover-gray);
    }
  }

  .m-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 21px;
    padding-inline: 8px;
    background: var(--text-main);
    color: var(--text-white);

    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
                 "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo,
                 sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 13.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;

    will-change: transform;
  }

  .m-label--shop {
    flex: none;
    width: 49px;
    padding-inline: 6px;
  }

  .m-label--fc {
    background: var(--tag-gray);
  }

  .m-label--step {
    font-family: "Jost", sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
  }

  .m-blog-list {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 267px));
    gap: 60px 37px;

    padding-bottom: 40px;
  }

  @media (max-width: 767px) {
    .m-blog-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 23px;
      padding-bottom: 0;
    }
  }

  .m-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;

    height: 100%;

    padding-bottom: 15px;
  }

  .m-blog-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 267 / 178;
    overflow: hidden;
  }

  .m-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--dur-thumb) var(--ease-hover);
  }

  .m-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    padding-inline: 8px;
  }

  .m-blog-card__title {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;
  }

  .m-blog-card__date {
    margin-top: auto;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 18px;
    letter-spacing: 0.0923em;
    color: var(--text-gold-dark);
    text-box: trim-both cap alphabetic;
  }

  .m-blog-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .m-blog-card .m-tag-list {
    position: relative;
    z-index: 1;
  }

  .m-blog-card:has(.m-blog-card__thumb) .m-label {
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (max-width: 767px) {
    .m-blog-card {
      gap: 18px;
      width: auto;
      padding-bottom: 0;
    }

    .m-blog-card__body {
      gap: 18px;
      padding-inline: 0;
    }

    .m-blog-card__title {
      font-size: 1.4rem;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .m-blog-card:hover .m-blog-card__thumb img { scale: 1.055; }
  }

  .m-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .m-tag-list:empty {
    display: none;
  }

  .m-tag-list > li {
    display: flex;
  }

  .m-tag-link {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--text-sub);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 16.5px;
    letter-spacing: 0.02em;
    color: var(--text-sub);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-box: trim-both cap alphabetic;
  }

  .m-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 60px;
  }

  .m-pagination__nums {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .m-pagination__btn {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    padding-bottom: 1px;

    border-bottom: 1px solid transparent;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 13px;
    letter-spacing: 0.02em;
    color: var(--bg-black);
    text-box: trim-both cap alphabetic;

    transition: color var(--dur-hover) var(--ease-hover);
  }

  .m-pagination__btn--current {
    border-bottom-color: #000;
  }

  .m-pagination__ellipsis {
    display: none;
    place-items: center;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 13px;
    letter-spacing: 0.02em;
    color: var(--bg-black);
    text-box: trim-both cap alphabetic;
    user-select: none;
  }

  .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)) .m-pagination__ellipsis--lead  { order: 1; }
  .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)) .m-pagination__btn:not(:nth-child(1 of .m-pagination__btn)):not(:nth-last-child(1 of .m-pagination__btn)) { order: 2; }
  .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)) .m-pagination__ellipsis--trail { order: 3; }
  .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)) .m-pagination__btn:nth-last-child(1 of .m-pagination__btn) { order: 4; }

  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn)) .m-pagination__btn:not(:nth-child(-n+8 of .m-pagination__btn)):not(:nth-last-child(1 of .m-pagination__btn)) {
    display: none;
  }
  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn)) .m-pagination__ellipsis--trail { display: grid; }

  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-last-child(-n+7 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn))) .m-pagination__btn:not(:nth-last-child(-n+8 of .m-pagination__btn)):not(:nth-child(1 of .m-pagination__btn)) {
    display: none;
  }
  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-last-child(-n+7 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn))) .m-pagination__ellipsis--lead { display: grid; }

  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn))):not(:has(.m-pagination__btn--current:nth-last-child(-n+7 of .m-pagination__btn))) .m-pagination__btn:not(:nth-child(1 of .m-pagination__btn)):not(:nth-last-child(1 of .m-pagination__btn)):not(.m-pagination__btn--current):not(.m-pagination__btn--current + .m-pagination__btn):not(.m-pagination__btn--current + .m-pagination__btn + .m-pagination__btn):not(:has(+ .m-pagination__btn--current)):not(:has(+ .m-pagination__btn + .m-pagination__btn--current)) {
    display: none;
  }
  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn))):not(:has(.m-pagination__btn--current:nth-last-child(-n+7 of .m-pagination__btn))) .m-pagination__ellipsis--lead,
  .m-pagination__nums:has(.m-pagination__btn:nth-child(11 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+6 of .m-pagination__btn))):not(:has(.m-pagination__btn--current:nth-last-child(-n+7 of .m-pagination__btn))) .m-pagination__ellipsis--trail { display: grid; }

  .m-pagination__nav {
    display: grid;
    place-items: center;

    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 0.75px solid var(--text-main);
    border-radius: 2px;
  }

  .m-pagination__nav--off {
    border-color: var(--line);
  }

  .m-pagination__nav img {
    width: 12.071px;
    height: 12.071px;

    transition: translate var(--dur-hover) var(--ease-hover);
  }

  .m-pagination__nav--prev img { rotate: -90deg; }
  .m-pagination__nav--next img { rotate: 90deg; }

  @media (hover: hover) and (pointer: fine) {
    a.m-pagination__btn:hover {
      color: var(--hover-gray);
    }

    a.m-pagination__nav--prev:hover img { translate: -4px; }
    a.m-pagination__nav--next:hover img { translate: 4px; }
  }

  @media (max-width: 767px) {
    .m-pagination {
      justify-content: space-between;
    }

    .m-pagination__nums {
      min-width: 0;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }

    .m-pagination__nums::-webkit-scrollbar {
      display: none;
    }

    .m-pagination__nums:has(.m-pagination__btn:nth-child(6 of .m-pagination__btn)) {
      gap: 3px;
    }

    .m-pagination__nums:has(.m-pagination__btn:nth-child(6 of .m-pagination__btn)) .m-pagination__btn,
    .m-pagination__nums:has(.m-pagination__btn:nth-child(6 of .m-pagination__btn)) .m-pagination__ellipsis {
      width: 30px;
    }

    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn)) .m-pagination__btn:not(:nth-child(-n+5 of .m-pagination__btn)):not(:nth-last-child(1 of .m-pagination__btn)) {
      display: none;
    }
    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn)) .m-pagination__ellipsis--trail { display: grid; }

    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-last-child(-n+5 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn))) .m-pagination__btn:not(:nth-last-child(-n+5 of .m-pagination__btn)):not(:nth-child(1 of .m-pagination__btn)) {
      display: none;
    }
    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):has(.m-pagination__btn--current:nth-last-child(-n+5 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn))) .m-pagination__ellipsis--lead { display: grid; }

    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn))):not(:has(.m-pagination__btn--current:nth-last-child(-n+5 of .m-pagination__btn))) .m-pagination__btn:not(:nth-child(1 of .m-pagination__btn)):not(:nth-last-child(1 of .m-pagination__btn)):not(.m-pagination__btn--current):not(.m-pagination__btn--current + .m-pagination__btn):not(:has(+ .m-pagination__btn--current)) {
      display: none;
    }
    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn))):not(:has(.m-pagination__btn--current:nth-last-child(-n+5 of .m-pagination__btn))) .m-pagination__ellipsis--lead,
    .m-pagination__nums:has(.m-pagination__btn:nth-child(8 of .m-pagination__btn)):not(:has(.m-pagination__btn--current:nth-child(-n+5 of .m-pagination__btn))):not(:has(.m-pagination__btn--current:nth-last-child(-n+5 of .m-pagination__btn))) .m-pagination__ellipsis--trail { display: grid; }
  }

  .m-store-nav {
    padding-block: 50px;
    background: var(--bg-beige-light);
  }

  .m-store-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
  }

  .m-store-nav__link {
    display: flex;
    align-items: center;
    height: 22px;
    padding-inline: 24px;
    border-left: 1px solid var(--text-main);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .m-store-nav__list > li:last-child .m-store-nav__link {
    border-right: 1px solid var(--text-main);
  }

  @media (max-width: 767px) {
    .m-store-nav {
      padding-block: 24px;
    }

    .m-store-nav__link {
      padding-inline: 14px;
      font-size: 1.3rem;
    }
  }

  .m-store-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 900px;
    margin-inline: auto;
    padding-top: 80px;
  }

  .m-store-list__group {
    display: flex;
    flex-direction: column;
    gap: 40px;
    scroll-margin-top: 40px;
  }

  .m-store-list__title {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .m-store-list__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 40px;
    padding-bottom: 60px;
  }

  .m-store-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .m-store-link__body {
    min-width: 0;
    padding-top: 4px;
    font-size: 1.8rem;
    line-height: 0;
    text-box: trim-both cap alphabetic;
  }

  .m-store-link__name {
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }

  .m-store-link__note {
    display: inline-block;
    max-width: 100%;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .m-store-link__body {
    transition: color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .m-store-link:hover .m-store-link__body {
      color: var(--hover-gray);
    }
  }

  @media (max-width: 767px) {
    .m-store-list {
      gap: 60px;
      padding-top: 60px;
    }

    .m-store-list__group {
      gap: 24px;
      scroll-margin-top: 60px;
    }

    .m-store-list__items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding-bottom: 0;
    }

    .m-store-link__body {
      padding-top: 5px;
      font-size: 1.3rem;
    }

    .m-store-link__note {
      font-size: 1.2rem;
    }
  }

  .m-store-detail {
    display: flex;
    flex-direction: column;
  }

  .m-store-detail__title {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .m-store-detail__name {
    padding-right: 56px;
    font-weight: 300;
    font-size: 3.6rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .m-store-detail__contents {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    margin-top: 40px;
  }

  .m-store-detail__media {
    display: flex;
    flex: 0 0 400px;
    flex-direction: column;
    gap: 18px;
  }

  .m-store-detail__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
  }

  .m-store-detail__photo {
    position: relative;
    aspect-ratio: 400 / 267;
    overflow: hidden;
    isolation: isolate;
  }

  .m-store-detail__photo > picture {
    position: absolute;
    inset: 0;
  }

  .m-store-detail__photo > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .m-store-detail__photo-default {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    z-index: -1;
    background: var(--bg-beige-dark);
  }

  .m-store-detail__photo:has(> picture img, > img) .m-store-detail__photo-default {
    display: none;
  }

  .m-store-detail__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .m-store-detail__line-text {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt";
    text-box: trim-both cap alphabetic;
  }

  .m-store-detail__line-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 20px 2px 14px;
    border-radius: 2px;
    background: #06c755;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--text-white);
  }

  .m-store-detail__line-btn picture {
    flex-shrink: 0;
  }

  .m-store-detail__line-btn img {
    width: 30px;
    height: 30px;
  }

  .m-store-detail__blog {
    display: flex;
    align-items: flex-start;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .m-store-detail__info-head {
    padding-block: 24px;
    border-top: 1px solid var(--text-main);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt";
    text-box: trim-both cap alphabetic;
  }

  .m-store-detail__rows {
    border-bottom: 1px solid var(--line);
  }

  .m-store-detail__row {
    display: flex;
    padding-block: 24px;
    border-top: 1px solid var(--line);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt";
  }

  .m-store-detail__row dt {
    flex: 0 0 150px;
    text-box: trim-both cap alphabetic;
  }

  .m-store-detail__row dd {
    flex: 1 1 auto;
    max-width: 479px;
    text-box: trim-both cap alphabetic;
  }

  .m-store-detail__manager {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 32px;
  }

  .m-store-detail__manager:not(:has(img)) {
    display: none;
  }

  .m-store-detail__manager-photo {
    position: relative;
    width: 160px;
    height: 160px;
    overflow: hidden;
  }

  .m-store-detail__manager-photo > picture {
    position: absolute;
    inset: 0;
  }

  .m-store-detail__manager-photo > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 32.5%;
  }

  .m-store-detail__manager-name {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt";
    text-box: trim-both cap alphabetic;
  }

  .m-store-detail__actions {
    display: flex;
    gap: 24px;
    padding-top: 16px;
  }

  .m-store-detail__map {
    aspect-ratio: 1180 / 500;
    margin-top: 72px;
  }

  .m-store-detail__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media (max-width: 1080px) {
    .m-store-detail__contents {
      gap: 40px;
    }

    .m-store-detail__actions {
      flex-direction: column;
      gap: 18px;
    }
  }

  @media (max-width: 767px) {

    .m-store-detail__contents,
    .m-store-detail__media,
    .m-store-detail__body {
      display: contents;
    }

    .m-store-detail__photo   { order: 1; margin-top: 32px; }
    .m-store-detail__info    { order: 2; margin-top: 32px; }
    .m-store-detail__line    { order: 3; margin-top: 40px; }

    .m-store-detail__blog    { order: 4; margin-top: 40px; padding-top: 24px; }
    .m-store-detail__map     { order: 5; margin-top: 40px; }
    .m-store-detail__actions { order: 6; margin-top: 40px; padding-top: 0; }

    .m-store-detail__title {
      align-items: flex-start;
    }

    .m-store-detail__name {
      padding-top: 3px;
      padding-right: 0;
      font-size: 2.2rem;
      line-height: 1.35;
    }

    .m-store-detail__photo {
      aspect-ratio: 3 / 2;
    }

    .m-store-detail__line {
      flex-direction: column;
      align-items: stretch;
    }

    .m-store-detail__line-btn {
      height: 40px;
    }

    .m-store-detail__row {
      flex-direction: column;
      gap: 24px;
    }

    .m-store-detail__row dt {
      flex: 0 0 auto;
      width: 80px;
    }

    .m-store-detail__row dd {
      max-width: none;
    }

    .m-store-detail__manager {
      padding-block: 24px;
      border-bottom: 1px solid var(--line);
    }

    .m-store-detail__actions {
      flex-direction: column;
      gap: 18px;
    }

    .m-store-detail__map {
      aspect-ratio: 335 / 380;
    }
  }
}

@layer views {

  .v-gtm-noscript {
    display: none;
    visibility: hidden;
  }

  .v-skip-link {
    position: absolute;
    left: -9999px;
  }

  .v-skip-link:focus {
    left: 0;
    top: 0;
    z-index: 100;
    padding: 8px 16px;
    background: var(--color-bg);
  }

  .v-section-head {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .v-section-head:not(:has(.v-section-head__lead)) {
    padding-bottom: 24px;
  }

  .v-section-head__group {
    display: flex;
    flex-direction: column;
    gap: 120px;
  }

  .v-section-head__lead {
    padding-inline: 130px;
    padding-block: 24px;
  }

  .v-section-head__lead > p {
    text-box-edge: cap alphabetic;
  }

  .v-section-head__lead > p:first-child {
    text-box-trim: trim-start;
  }

  .v-section-head__lead > p:last-child {
    text-box-trim: trim-end;
  }

  .v-section-head__lead > p:only-child {
    text-box-trim: trim-both;
  }

  .v-section-head__lead > p + p {
    margin-top: 24px;
  }

  .v-section-head__lead > p:has(+ .v-note) {
    text-box-trim: trim-both;
  }

  .v-section-head__lead > p + .v-note {
    margin-top: 36px;
  }

  .v-section-head__en,
  .v-heading-en,
  .v-cta__en { --cap: 80px; }

  .v-section-head__en img,
  .v-heading-en img,
  .v-cta__en img {
    display: block;
    width: auto;
    height: calc(var(--cap) * 1.2);
    margin-block: calc(var(--cap) * -0.1);
  }

  .v-section-head__en img,
  .v-heading-en img,
  .v-cta__en img,
  .v-thumb__en img,
  .v-blog-link__en img {
    --en-lsb: 0.0833em;
  }

  .v-section-head__en img,
  .v-heading-en img,
  .v-cta__en img,
  .v-thumb__en img,
  .v-blog-link__en img,
  .v-hero__en img,
  .v-suits__en img {
    padding-left: var(--en-lsb, 0px);
  }

  .v-suits__en img { --en-lsb: 0.0133em; }

  .v-hero__en img[src$="/heading_order-suit_w.svg"],
  .v-hero__en img[src$="/heading_order-jacket_w.svg"],
  .v-hero__en img[src$="/heading_order-slacks_w.svg"],
  .v-hero__en img[src$="/heading_order-vest_w.svg"],
  .v-hero__en img[src$="/heading_order-coat_w.svg"],
  .v-hero__en img[src$="/heading_order-formal_w.svg"],
  .v-hero__en img[src$="/heading_order-shirts_w.svg"],

  .v-hero__en img[src$="/heading_contact_w.svg"],
  .v-section-head__en img[src$="/heading_style_g.svg"],
  .v-section-head__en img[src$="/heading_customize_g.svg"] { --en-lsb: 0.054em; }

  .v-section-head__en img[src$="/heading_error_g.svg"] { --en-lsb: 0.09em; }

  .v-hero__en img[src$="/heading_ladies-suits_w.svg"] { --en-lsb: 0.09em; }

  .v-hero__en img[src$="/heading_kids-suits_w.svg"] { --en-lsb: 0.09em; }

  .v-hero__en img[src$="/heading_blog_w.svg"],
  .v-hero__en img[src$="/heading_news_w.svg"],
  .v-hero__en img[src$="/heading_privacy-policy_w.svg"],
  .v-hero__en img[src$="/heading_uniform_w.svg"],
  .v-hero__en img[src$="/heading_fc-recruitment_w.svg"],
  .v-hero__en img[src$="/heading_recruit-hiring_w.svg"],
  .v-hero__en img[src$="/heading_faq_w.svg"],
  .v-section-head__en img[src$="/heading_faq_g.svg"],
  .v-section-head__en img[src$="/heading_profile_g.svg"],
  .v-section-head__en img[src$="/heading_franchise_g.svg"],
  .v-section-head__en img[src$="/heading_flow_g.svg"],
  .v-section-head__en img[src$="/heading_how-to_g.svg"],
  .v-section-head__en img[src$="/heading_benefits_g.svg"],
  .v-section-head__en img[src$="/heading_experience_g.svg"] { --en-lsb: 0.09em; }

  .v-hero__en img[src$="/heading_company_w.svg"],
  .v-hero__en img[src$="/heading_concept_w.svg"],
  .v-hero__en img[src$="/heading_gift-card_w.svg"],
  .v-hero__en img[src$="/heading_store_w.svg"],
  .v-hero__en img[src$="/heading_order-process_w.svg"],
  .v-hero__en img[src$="/heading_on-site-sales_w.svg"],
  .v-section-head__en img[src$="/heading_contact_g.svg"],
  .v-section-head__en img[src$="/heading_quality_g.svg"],
  .v-section-head__en img[src$="/heading_gift-occasions_g.svg"],
  .v-section-head__en img[src$="/heading_contact-form_g.svg"] { --en-lsb: 0.054em; }

  .v-section-head__en img[src$="/heading_access_g.svg"],
  .v-section-head__en img[src$="/heading_three-star-suit_g.svg"],
  .v-section-head__en img[src$="/heading_the-process_g.svg"],
  .v-section-head__en img[src$="/heading_about-section_g.svg"] { --en-lsb: 0.014em; }

  .v-thumb__en img[src$="/thumb_jacket_g.svg"] { --en-lsb: 0px; margin-left: -0.0448em; }
  .v-thumb__en img[src$="/thumb_vest_g.svg"] { --en-lsb: 0.0119em; }
  .v-thumb__en img[src$="/thumb_suits_g.svg"],
  .v-thumb__en img[src$="/thumb_slacks_g.svg"],
  .v-thumb__en img[src$="/thumb_shirts_g.svg"] { --en-lsb: 0.053em; }
  .v-thumb__en img[src$="/thumb_coat_g.svg"] { --en-lsb: 0.0542em; }

  .v-section-head__en,
  .v-heading-en {
    font-weight: 300;
    font-size: 12rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-gold);

    overflow-wrap: anywhere;

    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 1032px) {
    .v-section-head__en:where(:not(:has(img))),
    .v-heading-en:where(:not(:has(img))),
    .v-cta__en:where(:not(:has(img))) {

      font-size: 8rem;

      white-space: normal;
    }
  }

  @media (max-width: 767px) {
    .v-section-head__en,
    .v-heading-en,
    .v-cta__en {

      --cap: 37px;
      font-size: 5.6rem;
      white-space: normal;

      overflow-wrap: anywhere;
    }

    .v-section-head__en:has(img[src$="/heading_gift-occasions_g.svg"]),
    .v-section-head__en:has(img[src$="/heading_three-star-suit_g.svg"]),
    .v-section-head__en:has(img[src$="/heading_contact-form_g.svg"]) {
      --cap: 93px;
    }

    .v-heading-en picture,
    .v-section-head__en picture,
    .v-cta__en picture,

    .v-hero__en picture {

      display: contents;
    }

    .v-section-head__en img,
    .v-heading-en img,
    .v-cta__en img {
      width: auto;
      height: auto;

      max-width: 100%;
      max-height: calc(var(--cap) * 1.2);
    }
  }

  .v-section-head__ja {
    padding-inline: 130px;
    font-weight: 300;
    font-size: 5.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-section-head--loose:not(:has(.v-section-head__lead)) {
    padding-bottom: 72px;
  }

  .v-section-head--loose:has(.v-section-head__lead) {
    padding-bottom: 48px;
  }

  .v-section-head--loose .v-section-head__lead > p {
    max-width: 760px;
  }

  .v-section-head--loose:not(.v-section-head--indent-270) .v-section-head__ja,
  .v-section-head--loose:not(.v-section-head--indent-270) .v-section-head__lead {
    width: 100%;
    max-width: calc(var(--content-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  @media (max-width: 767px) {
    .v-section-head__group {
      gap: 60px;
    }

    .v-section-head__ja {
      padding-inline: 20px;
      font-size: 2.8rem;
    }

    .v-section-head__lead {
      padding-inline: 20px;
      padding-block: 16px 0;
    }

    .v-section-head--loose .v-section-head__lead > p:not(.v-note) {
      font-size: 1.6rem;
    }

    .v-section-head__lead > p + p {
      margin-top: 18px;
    }

    .v-section-head__lead > p + .v-note {
      margin-top: 24px;
    }

    .v-section-head--loose:not(:has(.v-section-head__lead)) {
      padding-bottom: 48px;
    }

    .v-section-head--loose:has(.v-section-head__lead) {
      padding-bottom: 60px;
    }

    .v-section-head--loose .v-section-head__lead > p {
      max-width: none;
    }
  }

  .v-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;
    padding: 94px var(--gutter);
    background: var(--bg-beige-light);
  }

  .v-intro__inner {
    display: flex;
    align-items: flex-start;
    gap: 48px;

    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
  }

  .v-intro__title {
    flex: 0 0 508px;
    min-width: 0;
    font-weight: 300;
    font-size: 5.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-intro__body {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
  }

  .v-intro__lead {
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-intro__lead > p {
    text-box-edge: cap alphabetic;
  }

  .v-intro__lead > p:first-child { text-box-trim: trim-start; }

  .v-intro__lead > p:last-child { text-box-trim: trim-end; }

  .v-intro__lead > p:only-child { text-box-trim: trim-both; }

  .v-intro__lead > p + p {
    margin-top: 24px;
  }

  @media (max-width: 1080px) {

    .v-intro {
      min-height: 0;
      padding: 60px 20px 120px;
    }

    .v-intro__inner {
      flex-direction: column;
      gap: 48px;
    }

    .v-intro__title {
      flex: none;
      font-size: 4.2rem;
    }

    .v-intro__body {
      flex: none;
      width: 100%;
    }

    .v-intro__lead { font-size: 1.8rem; }
  }

  @media (max-width: 767px) {

    .v-intro {
      min-height: 0;
      padding: 60px 20px 120px;
    }

    .v-intro__inner {
      flex-direction: column;
      gap: 36px;
    }

    .v-intro__title { font-size: 2.8rem; }

    .v-intro__body {
      gap: 48px;
      width: 100%;
    }

    .v-intro__lead { font-size: 1.6rem; }

    .v-intro__lead > p + p { margin-top: 18px; }
  }

  .v-intro--lead-tight .v-intro__lead > p + p {
    margin-top: 0;
  }

  @media (max-width: 767px) {
    .v-intro--lead-tight .v-intro__lead > p + p {
      margin-top: 18px;
    }
  }

  .v-point-nums--pad-bottom {
    padding-bottom: 72px;
  }

  @media (max-width: 767px) {
    .v-point-nums--pad-bottom {
      padding-bottom: 0;
    }
  }

  .v-point-nums {
    display: flex;
    flex-direction: column;
    gap: 56px;
    max-width: 900px;
  }

  .v-point-num {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .v-point-num__head {
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  .v-point-num__num {
    flex: 0 0 40px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 5px 0;
  }

  .v-point-num__label {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-gold);
    text-box: trim-both cap alphabetic;
  }

  .v-point-num__no {
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 6.4rem;
    line-height: 1;
    color: var(--text-gold);
    text-box: trim-both cap alphabetic;
  }

  .v-point-num__title {
    flex: 1 0 0;
    min-width: 0;
    padding-bottom: 0;
    min-height: 44.8px;
    align-content: center;
    font-weight: 300;
    font-size: 3.2rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-point-num__text {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-point-nums {
      gap: 60px;
    }

    .v-point-num__num {
      flex-basis: 34px;
      padding-inline: 0;
    }

    .v-point-num__no {
      font-size: 5.6rem;
    }

    .v-point-num__title {
      font-size: 2.2rem;
      min-height: 39.2px;
    }

    .v-point-num__text {
      font-size: 1.4rem;
    }
  }

  .v-media-text {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 80px;
    padding-top: 64px;
  }

  .v-media-text__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex-shrink: 0;
    width: 520px;
    padding-block: 24px;
  }

  .v-media-text__body > p {
    text-box: trim-both cap alphabetic;
  }

  .v-media-text__img {
    flex-shrink: 0;
    width: 696px;
    aspect-ratio: 696 / 464;
  }

  .v-media-text--reverse {
    justify-content: flex-start;
    gap: 93px;
  }

  .v-media-text--reverse .v-media-text__body {
    order: 1;
  }

  .v-media-text--photo {

    --media-text-inset: max(var(--gutter), calc((100% - var(--content-max)) / 2));

    align-items: center;

    padding-top: 0;
    padding-bottom: 41px;
    padding-left: var(--media-text-inset);
  }

  .v-media-text--photo.v-media-text--reverse {
    gap: 80px;
    padding-left: 0;
    padding-right: var(--media-text-inset);
  }

  .v-media-text--photo .v-media-text__body {
    flex: 1 1 534px;
    min-width: 0;
    width: auto;
    padding-block: 0;
  }

  .v-media-text__lead {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .v-media-text--photo .v-media-text__body p {
    max-width: 520px;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.8;
    text-box: trim-both cap alphabetic;
  }

  .v-media-text--photo .v-photo-figure {
    position: relative;
    flex: 1 1 696px;
    min-width: 0;
  }

  .v-media-text--photo .v-photo-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
  }

  .v-media-text--photo.v-media-text--reverse .v-photo-nav {
    left: auto;
    right: 0;
  }

  .v-figure {
    margin-top: 72px;
    aspect-ratio: 1180 / 588;
    overflow: hidden;
  }

  .v-figure picture {
    display: block;
    height: 100%;
  }

  .v-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 767px) {
    .v-figure {
      margin-top: 40px;
      aspect-ratio: 335 / 223;
    }
  }

  .v-step-list {
    display: grid;
    grid-template-columns: repeat(3, 366px);
    gap: 80px 41px;
    padding-top: 64px;
  }

  .v-step {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .v-step__no {

    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1;
    letter-spacing: 0.0417em;
    text-transform: uppercase;
    color: var(--text-gold);
    text-box: trim-both cap alphabetic;
  }

  .v-step__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .v-step__img {
    width: 366px;
    height: 244px;
    overflow: hidden;
  }

  .v-step__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-step__title {
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-step__text {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-step-rows {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .v-step-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .v-step-row__no {
    flex: 0 0 48px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    color: var(--text-gold);
  }

  .v-step-row__label {
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 14px;
    letter-spacing: 0.03em;
    text-align: center;
    text-box: trim-both cap alphabetic;
  }

  .v-step-row__num {
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 6.4rem;
    line-height: 1;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  .v-step-row__card {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 48px;
    min-height: 296px;
    overflow: hidden;
  }

  .v-step-row__card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    pointer-events: none;
  }

  .v-step-row--tall .v-step-row__card {
    min-height: 328px;
  }

  .v-step-row__img {
    flex: 0 0 380px;
    overflow: hidden;
  }

  .v-step-row__img > picture {
    display: contents;
  }

  .v-step-row__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-step-row__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 32px 48px 32px 0;
  }

  .v-step-row__title {
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-step-row__text {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-step-rows {
      gap: 30px;
    }

    .v-step-row {
      gap: 18px;
    }

    .v-step-row__no {
      flex-basis: 34px;
    }

    .v-step-row__num {
      font-size: 5.6rem;
    }

    .v-step-row__card,
    .v-step-row--tall .v-step-row__card {
      flex-direction: column;
      gap: 0;
      min-height: 0;
    }

    .v-step-row__img {
      flex: 0 0 auto;
      width: 100%;
      aspect-ratio: 380 / 253;
    }

    .v-step-row__body {
      gap: 28px;
      padding: 24px 18px;
    }

    .v-step-row__title {
      font-size: 2.2rem;
    }

    .v-step-row__text {
      font-size: 1.4rem;
    }
  }

  .v-image-grid {
    display: flex;
    gap: 8px;
    padding-top: 80px;
  }

  .v-image-grid__main {
    flex-shrink: 0;
    width: 584px;
    height: 588px;
  }

  .v-image-grid__sub {
    display: grid;
    grid-template-columns: repeat(2, 290px);
    gap: 8px;
  }

  .v-image-grid__main img,
  .v-image-grid__sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-thumb {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 290px;
    padding-bottom: 2px;
  }

  .v-thumb__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .v-thumb__en {
    --cap: 25.35px;
    font-weight: 400;
    font-size: 3.8rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-gold);
    text-box: trim-both cap alphabetic;
  }

  .v-thumb__en img {
    display: block;
    width: auto;
    height: calc(var(--cap) * 1.2);
    margin-block: calc(var(--cap) * -0.1);
  }

  .v-thumb__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1143em;
    transition: border-bottom-color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .v-thumb:hover .v-thumb__link { border-bottom-color: transparent; }

    .v-thumb:hover .v-thumb__img img { scale: 1.055; }
  }

  .v-thumb__link img {
    width: 12px;
    height: 12px;
    rotate: 90deg;
  }

  .v-thumb__img {
    width: 290px;
    height: auto;
    aspect-ratio: 290 / 386;
    background: #fff;
    overflow: hidden;

    position: relative;
  }

  .v-thumb__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--dur-thumb) var(--ease-hover);
  }

  .v-thumb--lg { width: 329px; }
  .v-thumb--lg .v-thumb__en { --cap: 28.01px; font-size: 4.2rem; letter-spacing: 0.02em;    }
  .v-thumb--lg .v-thumb__img { width: 329px; height: auto; aspect-ratio: 329 / 438; }

  @media (max-width: 767px) {
    .v-thumb {
      width: 198px;
      gap: 16px;
      padding-bottom: 0;
    }

    .v-thumb__head {
      gap: 16px;
    }

    .v-thumb__en,
    .v-thumb--lg .v-thumb__en {
      --cap: 20px;
      font-size: 3rem;
    }

    .v-thumb__img {
      width: 198px;
      height: auto;
      aspect-ratio: 198 / 264;
    }

    .v-thumb--lg { width: 335px; }

    .v-thumb--lg .v-thumb__img {
      width: 335px;
      height: auto;
      aspect-ratio: 335 / 446;
    }
  }

  .v-link-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.114em;
    transition: border-bottom-color var(--dur-hover) var(--ease-hover);
  }

  .v-link-text img {
    width: 12px;
    height: 12px;
    rotate: 90deg;
    flex-shrink: 0;
  }

  .v-link-text--back img {
    rotate: -90deg;
  }

  @media (hover: hover) and (pointer: fine) {
    .v-link-text:hover {
      border-bottom-color: transparent;
    }
  }

  .v-carousel {
    position: relative;
    display: flow-root;
    --carousel-gutter: 40px;
    --carousel-btn-x: 93px;
  }

  .v-carousel__track {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    padding-inline: var(--carousel-gutter);

    scroll-padding-inline: var(--carousel-gutter);

    overflow-y: hidden;

    padding-bottom: 8px;
    margin-bottom: -8px;

    scrollbar-width: none;
  }

  .v-carousel__track::-webkit-scrollbar { display: none; }

  .v-carousel__track > li {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .v-carousel__btn {
    position: absolute;
    top: var(--carousel-btn-y, 50%);
    translate: 0 -50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--text-main);

    cursor: pointer;

    transition:
      opacity var(--dur-hover) var(--ease-hover),
      visibility var(--dur-hover) var(--ease-hover);
  }

  .v-carousel__btn--prev { left: var(--carousel-btn-x); }
  .v-carousel__btn--next { right: var(--carousel-btn-x); }

  .v-carousel__btn img {
    width: 12.566px;
    height: 6.849px;
    transition: translate var(--dur-hover) var(--ease-hover);
  }
  .v-carousel__btn--prev img { rotate: -90deg; }
  .v-carousel__btn--next img { rotate: 90deg; }

  @media (max-width: 767px) {
    .v-carousel {
      --carousel-gutter: 20px;
      --carousel-btn-x: 10px;
    }

    .v-carousel__track {
      gap: 14px;
    }

    .v-carousel__btn {
      width: 32px;
      height: 32px;
    }

    .v-carousel__btn img {
      width: 8.975px;
      height: 4.892px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .v-carousel__btn--prev:hover img { translate: -4px; }
    .v-carousel__btn--next:hover img { translate: 4px; }
  }

  .v-logo {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 82px;
    height: 22px;
    margin-inline: 14px;
    transition: opacity var(--dur-hover) var(--ease-hover);
  }

  @media (max-width: 1032px) {
    .v-logo {
      width: 80.13px;
      height: 21.906px;
      margin-inline: 0;
    }
  }

  .v-logo img {
    position: absolute;
    display: block;
  }

  .v-logo img:nth-child(1) { inset: 0.25% 81.82% 0 0;            width: 18.18%; height: 99.75%; }
  .v-logo img:nth-child(2) { inset: 43.18% 63.66% 34.11% 29.8%;  width: 6.54%;  height: 22.71%; }
  .v-logo img:nth-child(3) { inset: 0.25% 54.55% 0 27.27%;       width: 18.18%; height: 99.75%; }
  .v-logo img:nth-child(4) { inset: 0.25% 27.28% 0 54.54%;       width: 18.18%; height: 99.75%; }
  .v-logo img:nth-child(5) { inset: 0.25% 0 0 81.81%;            width: 18.19%; height: 99.75%; }
  .v-logo img:nth-child(6) { inset: 43.14% 63.66% 45.48% 15.56%; width: 20.78%; height: 11.38%; }
  .v-logo img:nth-child(7) { inset: 0 27.34% 98.32% 72.66%;      width: 0;      height: 1.68%; }

  .m-store-detail__photo-default .v-logo {
    width: 39.09%;
    height: auto;
    aspect-ratio: 156.375 / 42.75;
    margin-inline: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    a.v-logo:hover { opacity: 0.8; }
  }

  .v-gnav {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .v-gnav__list {
    display: flex;
    align-items: center;
    gap: 40px;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .l-header--overlay .v-gnav__list {
    gap: 30px;
    font-size: 1.4rem;
    letter-spacing: 0.14em;
  }

  .v-gnav__cta {
    padding: 13px 32px;
    border: 1px solid var(--text-main);
    background: var(--text-main);
    color: #fff;
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
    transition:
      background-color var(--dur-hover) var(--ease-hover),
      color var(--dur-hover) var(--ease-hover);
  }

  .l-header--overlay .v-gnav__cta {
    border-width: 2px;
    border-color: #fff;
    background: transparent;
    color: #fff;

  }

  .l-header--overlay.is-switching .v-gnav__cta {
    transition: none;
  }

  .l-header--overlay .v-gnav__logo {
    display: none;
  }

  .l-header--overlay.is-scrolled .v-gnav__logo {
    display: block;
    margin-right: auto;
  }

  @media (max-width: 1032px) {
    body.is-nav-open .l-header--overlay .v-gnav {
      flex: 1;
    }

    body.is-nav-open .l-header--overlay .v-gnav__logo {
      display: block;
      margin-right: auto;
    }
  }

  .l-header--overlay.is-scrolled .v-gnav__list {

    gap: 40px;
    font-size: 1.5rem;
  }

  .l-header--overlay.is-scrolled .v-gnav__cta {
    border-width: 1px;
    border-color: var(--text-main);
    background: var(--text-main);
    color: #fff;
  }

  .v-gnav__toggle {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;

    background: none;
    cursor: pointer;
  }

  .v-gnav__toggle img {
    width: 34.515px;
    height: 20.433px;
  }

  .v-gnav__toggle {
    position: relative;
    z-index: 70;
  }

  .l-header--overlay .v-gnav__toggle img {
    filter: brightness(0) invert(1);
  }

  .l-header--overlay.is-scrolled .v-gnav__toggle img {
    filter: none;
  }

  .l-header--overlay .v-gnav__toggle[aria-expanded="true"] img {
    filter: none;
  }

  .v-gnav__toggle-close { display: none; }

  .v-gnav__toggle[aria-expanded="true"] .v-gnav__toggle-open { display: none; }

  .v-gnav__toggle[aria-expanded="true"] .v-gnav__toggle-close {
    display: block;
    width: 30px;
    height: 18px;
  }

  .v-gnav__panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: 375px;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;

    box-shadow: 0 4px 2px rgba(51, 51, 51, 0.1);

    transition:
      translate var(--dur-drawer) var(--ease-in-out-cubic),
      display var(--dur-drawer) allow-discrete;
  }

  .v-gnav__panel::before {
    content: '';
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    height: 60px;
    background: #fff;
  }

  .v-gnav:not(:has(.v-gnav__toggle[aria-expanded="true"])) .v-gnav__panel {
    display: none;
    translate: 100% 0;
  }

  @starting-style {
    .v-gnav:has(.v-gnav__toggle[aria-expanded="true"]) .v-gnav__panel {
      translate: 100% 0;
    }
  }

  .v-gnav::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-drawer) var(--ease-in-out-cubic),
      visibility var(--dur-drawer) var(--ease-in-out-cubic);
  }

  .v-gnav:has(.v-gnav__toggle[aria-expanded="true"])::after {
    opacity: 1;
    visibility: visible;
  }

  .v-gnav__panel-body {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 0 40px 48px;
    margin-top: 40px;
  }

  .v-gnav__group-title {
    --cap: 26.68px;

    display: flow-root;
    padding-bottom: 20px;
    font-size: 4rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-gold);
    text-box: trim-both cap alphabetic;
  }

  .v-gnav__group-title img {
    display: block;
    width: auto;
    height: calc(var(--cap) * 1.2);
    margin-block: calc(var(--cap) * -0.1);

    margin-left: 0.09em;
  }

  .v-gnav__group-title img[src$="/heading_about_g.svg"] { margin-left: 0.0125em; }

  .v-gnav__group-title img[src$="/heading_news-blog_g.svg"] { margin-left: 0.0833em; }

  .v-gnav__group-title img[src$="/heading_store_g.svg"] { margin-left: 0.054em; }

  .v-gnav__group ul a {
    display: block;
    width: fit-content;
    padding-block: 16px;
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;
  }

  .v-gnav__panel-sns {
    padding: 36px 40px;
    background: var(--bg-beige-light);
  }

  .v-gnav__panel-sns ul {
    display: flex;
    gap: 36px;
  }

  .v-gnav__panel-sns li {
    display: grid;
    place-items: center;
    width: 23px;
    height: 40px;
  }

  @media (hover: hover) and (pointer: fine) {
    .v-gnav__panel-sns a img {
      transition: filter var(--dur-hover) var(--ease-hover);
    }

    .v-gnav__panel-sns a:hover img {
      filter: brightness(2.45098);
    }
  }

  .v-gnav__products {
    background: transparent;
    color: inherit;
    cursor: pointer;

    text-transform: inherit;
    letter-spacing: inherit;
  }

  .v-gnav[data-menu="products"] .v-gnav__group + .v-gnav__group,
  .v-gnav[data-menu="products"] .v-gnav__panel-sns {
    display: none;
  }

  @media (max-width: 1032px) {

    .l-header .v-logo,
    .v-gnav__toggle {
      position: relative;
      z-index: 70;
    }

    .v-gnav__toggle {
      display: grid;
      width: 30px;
      height: 30px;
    }

    .v-gnav__toggle img {
      width: 29.585px;
      height: 17.514px;
    }

    .v-gnav__toggle[aria-expanded="true"] .v-gnav__toggle-close {
      width: 30.135px;
      height: 18.096px;
    }

    .v-gnav__list,
    .v-gnav__cta {
      display: none;
    }

    .v-gnav__panel {
      inset: 0;
      width: auto;
      height: auto;
      box-shadow: none;
    }

    .v-gnav__panel::before {
      height: 48px;
    }

    .v-gnav__panel-body {
      gap: 54px;
      margin-top: 60px;
    }

    .v-gnav[data-menu="products"] .v-gnav__group + .v-gnav__group,
    .v-gnav[data-menu="products"] .v-gnav__panel-sns {
      display: block;
    }
  }

  .v-fixed-cta {
    display: none;
  }

  .v-fixed-cta__btn {
    display: grid;
    place-items: center;
    height: 52px;
    background: var(--bg-white);
    border-top: 1px solid var(--line);
    color: var(--text-main);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  .v-fixed-cta__btn--fill {
    border-top: 0;
    background: var(--text-main);
    color: var(--text-white);
  }

  @media (max-width: 767px) {
    .v-fixed-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      display: grid;
      grid-template-columns: 35% 65%;
      transition: translate var(--dur-drawer) var(--ease-in-out-cubic),
                  opacity var(--dur-hover) var(--ease-hover),
                  visibility var(--dur-drawer) var(--ease-in-out-cubic);
    }

    .v-fixed-cta.is-tucked {
      translate: 0 100%;
      visibility: hidden;
    }

    .v-fixed-cta.is-instant {
      transition: none;
    }

    .v-fixed-cta.is-hidden {
      opacity: 0;
      visibility: hidden;
    }

    body.is-nav-open .v-fixed-cta {
      opacity: 0;
      visibility: hidden;
    }
  }

  @media (hover: hover) and (pointer: fine) {

    .v-gnav__list a,
    .v-gnav__list button,

    .v-gnav__group ul a {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: 8px;
      transition: text-decoration-color var(--dur-hover) var(--ease-hover);
    }

    .v-gnav__list a:hover,
    .v-gnav__list button:hover,
    .v-gnav__group ul a:hover {
      text-decoration-color: currentColor;
    }

    .v-gnav__cta:hover,
    .l-header--overlay .v-gnav__cta:hover {
      background: #fff;
      color: var(--text-main);
    }
  }

  .v-cta {
    position: relative;
    padding-bottom: 160px;
    overflow: hidden;
    color: #fff;
  }

  .v-cta__img {
    position: absolute;
    inset: 0;
  }

  .v-cta__img picture {
    display: contents;
  }

  .v-cta__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
  }

  .v-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25, 24, 22, 0.7);
  }

  .v-cta__head,
  .v-cta__body,
  .v-cta__actions {
    position: relative;
    z-index: 1;
  }

  .v-cta__head {
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding-bottom: 72px;
  }

  .v-cta__en {

    font-weight: 300;
    font-size: 12rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    overflow-wrap: anywhere;
    text-box: trim-both cap alphabetic;
  }

  .v-cta__ja {
    padding-left: 270px;

    width: 100%;
    max-width: var(--design-max);
    margin-inline: auto;
    font-weight: 300;
    font-size: 4.5rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-cta__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 0;
    padding-inline: 270px;

    width: 100%;
    max-width: var(--design-max);
    margin-inline: auto;
  }

  .v-cta__lead > p {
    text-box-edge: cap alphabetic;
  }

  .v-cta__lead > p:first-child {
    text-box-trim: trim-start;
  }

  .v-cta__lead > p:last-child {
    text-box-trim: trim-end;
  }

  .v-cta__lead > p:only-child {
    text-box-trim: trim-both;
  }

  .v-cta__lead > p + p {
    margin-top: 24px;
  }

  .v-cta__note {
    text-box: trim-both cap alphabetic;
  }

  .v-cta__actions {
    display: flex;
    gap: 24px;
    padding-top: 60px;
    padding-inline: 270px;

    width: 100%;
    max-width: var(--design-max);
    margin-inline: auto;
  }

  .v-cta__btn {
    display: grid;
    place-items: center;
    width: 274.5px;
    height: 52px;
    padding-inline: 41px;
    border: 1px solid #fff;
    border-radius: 2px;
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.016em;
    text-box: trim-both cap alphabetic;
    transition:
      background-color var(--dur-hover) var(--ease-hover),
      color var(--dur-hover) var(--ease-hover);
  }

  .v-cta__btn--fill {
    border-color: var(--text-main);
    background: #fff;
    color: var(--text-main);
  }

  @media (max-width: 1080px) {
    .v-cta__body,
    .v-cta__actions {
      padding-right: 32px;
    }
  }

  @media (max-width: 767px) {
    .v-cta {
      padding-bottom: 120px;
    }

    .v-cta::after {
      background: rgba(25, 24, 22, 0.75);
    }

    .v-cta__img img {
      object-position: 61% 50%;
    }

    .v-cta__en {
      font-size: 5.6rem;
    }

    .v-cta__head {
      gap: 60px;
      padding-bottom: 40px;
    }

    .v-cta__ja {
      padding-left: 20px;
      font-size: 2.8rem;
    }

    .v-cta__body {
      padding-inline: 20px;
      font-size: 1.6rem;
    }

    .v-cta__lead > p + p {
      margin-top: 18px;
    }

    .v-cta__actions {
      flex-direction: column;
      gap: 18px;
      padding-top: 40px;
      padding-inline: 20px;
    }

    .v-cta__btn {
      width: 100%;
      padding-inline: 20px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .v-cta__btn:hover {
      background: var(--line);
      color: var(--text-main);
    }

    .v-cta__btn--fill:hover {
      background: var(--text-gold);
      color: var(--text-main);
    }
  }

  .v-cta--concept {
    padding-bottom: 190px;
  }

  .v-cta--concept .v-cta__body {
    padding-top: 24px;
  }

  .v-cta--concept .v-cta__lead > p + p {
    margin-top: 0;
  }

  .v-cta--concept .v-cta__img img {
    object-position: 50% 100%;
  }

  @media (max-width: 767px) {
    .v-cta--concept {
      padding-bottom: 120px;
    }

    .v-cta--concept .v-cta__body {
      padding-top: 0;
    }

    .v-cta--concept .v-cta__img img {
      object-position: 61% 50%;
    }
  }

  @media (max-width: 767px) {
    .v-cta--sp-hide {
      display: none;
    }
  }

  .v-faq {
    max-width: 900px;
  }

  .v-faq__item {
    border-bottom: 1px solid var(--line);
  }

  .v-faq__item:first-child {
    border-top: 1px solid var(--line);
  }

  .v-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 28px 2px;
    list-style: none;
    color: var(--text-main);

    cursor: pointer;

    transition:
      color var(--dur-hover) var(--ease-hover),
      padding-block-end var(--dur-accordion) var(--ease-in-out-cubic);
  }

  .v-faq__q-text {
    flex: 1;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-faq__q::-webkit-details-marker { display: none; }

  .v-faq__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }

  .v-faq__icon img {
    width: auto;
    height: auto;
  }

  .v-faq__icon-minus,
  .v-faq__icon-hover { display: none; }

  .v-faq__item[open]:not(.is-closing) .v-faq__icon-plus { display: none; }

  .v-faq__item[open]:not(.is-closing) .v-faq__icon-minus { display: block; }

  .v-faq__a {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 2px 28px;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-sub);
  }

  .v-faq__a > .v-link-text {
    align-self: flex-start;
  }

  .v-faq__a > p {
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
  }

  .v-faq__item[open] .v-faq__q { padding-bottom: 32px; }

  .v-faq__item[open].is-closing .v-faq__q { padding-bottom: 28px; }

  @media (max-width: 767px) {

    .v-faq__q {
      gap: 6px;
      padding-block: 24px;
    }

    .v-faq__q-text {
      font-size: 1.4rem;
      letter-spacing: 0.02em;
    }

    .v-faq__a {
      gap: 24px;
      padding-bottom: 24px;
      font-size: 1.3rem;
      letter-spacing: 0.02em;
    }

    .v-faq__item[open] .v-faq__q { padding-bottom: 24px; }
    .v-faq__item[open].is-closing .v-faq__q { padding-bottom: 28px; }
  }

  @media (hover: hover) and (pointer: fine) {

    .v-faq__item:not([open]) .v-faq__q:hover { color: var(--hover-gray); }

    .v-faq__item:not([open]) .v-faq__q:hover .v-faq__icon-plus { display: none; }

    .v-faq__item:not([open]) .v-faq__q:hover .v-faq__icon-hover { display: block; }
  }

  .v-faq__item::details-content {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;

    padding-block-start: 8px;
    margin-block-start: -8px;
    opacity: 0;
    transition:
      grid-template-rows var(--dur-accordion) var(--ease-in-out-cubic),
      opacity var(--dur-accordion) var(--ease-in-out-cubic),
      content-visibility var(--dur-accordion) allow-discrete;
  }

  .v-faq__item[open]::details-content {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
  }

  .v-faq__item[open].is-closing::details-content {
    grid-template-rows: minmax(0, 0fr);
    opacity: 0;
  }

  .v-faq__a {
    min-block-size: 0;
  }

  .v-faq-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 900px;
    margin-inline: auto;
  }

  .v-faq-groups {
    display: flex;
    flex-direction: column;
    gap: 120px;
    max-width: 900px;
    margin-inline: auto;
  }

  .v-faq-group {
    scroll-margin-top: 120px;
  }

  .v-group-head {
    padding-bottom: 60px;
    font-weight: 300;
    font-size: 3.6rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-faq-groups {
      gap: 80px;
    }

    .v-faq-group {
      scroll-margin-top: 80px;
    }

    .v-group-head {
      padding-bottom: 40px;
      font-size: 2.2rem;
    }
  }

  .v-group-head--flush {
    padding-bottom: 0;
  }

  .v-list-filter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;

    margin-bottom: 40px;
  }

  .v-list-filter__row {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .v-list-filter__hash {
    font-weight: 400;
  }

  .v-list-filter__label {
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 0;
    color: var(--text-main);
    white-space: nowrap;
    cursor: pointer;
  }

  @media (max-width: 767px) {
    .v-list-filter {
      gap: 32px;
    }

    .v-list-filter__row {

      width: 100%;
      gap: 16px;
    }

    .v-list-filter__label {
      font-size: 1.4rem;
      line-height: 1.6;
      letter-spacing: 0.02em;
    }
  }

  .v-select {
    position: relative;
    width: 300px;
  }

  .v-select__control {
    width: 100%;

    min-height: 48px;

    padding: 0 46px 0 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg-white);
    appearance: none;
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    color: var(--text-main);
    cursor: pointer;
  }

  .v-select__control option {
    color: var(--text-main);
  }

  @supports (-webkit-touch-callout: none) {
    .v-select__control {
      font-size: 1.6rem;
    }
  }

  .v-select__icon {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 12.566px;
    height: 6.849px;
    margin-top: -3.424px;
    rotate: 180deg;
    pointer-events: none;
  }

  @media (max-width: 767px) {
    .v-select {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
    }
  }

  .v-policy {

    max-width: 900px;
    margin-inline: auto;
  }

  .v-policy__lead {
    padding-bottom: 72px;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    text-box: trim-both cap alphabetic;
  }

  .v-policy__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 72px;
  }

  .v-policy__item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
  }

  .v-policy__head {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    text-box: trim-both cap alphabetic;
  }

  .v-policy__body {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 0;
    list-style: disc;
    text-box: trim-both cap alphabetic;
  }

  .v-policy__body li {
    margin-left: 21px;
    line-height: 1.8;
  }

  .v-policy__body a {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: text-decoration-color var(--dur-hover) var(--ease-hover);
  }

  .v-policy__body a img {
    display: inline-block;
    width: 13.125px;
    height: 13.125px;
    margin-left: 4px;
    vertical-align: -1px;
  }

  .v-policy__nowrap {
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .v-policy__body a:hover {
      text-decoration-color: transparent;
    }
  }

  .v-policy__sign {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: right;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-policy__lead {
      padding-bottom: 60px;
      font-size: 1.4rem;
    }

    .v-policy__list {
      gap: 30px;
    }

    .v-policy__head {
      font-size: 1.4rem;
    }

    .v-policy__body {
      font-size: 1.3rem;
    }

    .v-policy__sign {
      font-size: 1.3rem;
    }
  }

  .v-footer {

    --footer-gutter: clamp(20px, 9.0278vw, 130px);
    padding-top: 72px;
    background: var(--bg-black);
    color: #fff;
  }

  .v-footer__inner {
    display: grid;

    grid-template-columns: minmax(0, 320px) minmax(min-content, 1fr);
    padding-inline: var(--footer-gutter);

    width: 100%;
    max-width: var(--design-max);
    margin-inline: auto;

    padding-bottom: 4px;
  }

  .v-footer__nav {
    display: grid;
    grid-template-columns:
      minmax(min-content, 330px)
      minmax(min-content, 330px)
      minmax(min-content, 1fr);
  }

  .v-footer__brand { max-width: 240px; }

  .v-footer__brand .v-logo {
    width: 139px;
    height: 38px;
    margin-inline: 0;
  }

  .v-footer__address {
    padding-block: 19px;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 22px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
  }

  .v-footer__sns {
    display: flex;
    gap: 20px;
  }

  .v-footer__sns li,
  .v-footer__sns a {
    display: grid;
    place-items: center;
  }

  .v-footer__sns li {
    width: 21px;
    height: 36px;
  }

  .v-footer__sns a {
    width: 100%;
    height: 100%;
  }

  .v-footer__sns img {
    width: auto;
    height: auto;
    scale: 1.5;

    transition: filter var(--dur-sns) var(--ease-hover);
  }

  .v-footer__col { min-width: 0; }

  .v-footer__col-title {

    --cap: 13.34px;

    --title-box: 11.67px;

    --title-shift: -0.34px;

    display: flow-root;

    height: var(--title-box);
    font-weight: 400;
    font-size: 2rem;
    line-height: var(--title-box);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-gold);
  }

  .v-footer__col-title img {
    display: block;
    width: auto;
    height: calc(var(--cap) * 1.2);
    margin-top: calc(var(--cap) * -0.1 + var(--title-shift));

    max-width: none;
  }

  .v-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 16.5px;
    letter-spacing: 0.02em;
  }

  .v-footer__col ul + .v-footer__col-title {
    margin-top: 40px;
  }

  .v-footer__col li a {
    display: block;
    width: fit-content;
    padding-bottom: 4px;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  .v-footer__rule {
    height: 1px;
    margin-top: 39px;
    background: rgba(255, 255, 255, 0.1);
  }

  .v-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px var(--footer-gutter);

    width: 100%;
    max-width: var(--design-max);
    margin-inline: auto;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 15px;
    letter-spacing: 0.02em;
  }

  .v-footer__bottom ul {
    display: flex;
    gap: 24px;
  }

  @media (max-width: 1080px) {
    .v-footer__inner {
      grid-template-columns: max-content minmax(min-content, 1fr);
      column-gap: 52px;
    }
  }

  @media (max-width: 767px) {

    .v-footer {
      padding: 48px 20px;
    }

    .v-footer__inner {
      display: block;
      padding-inline: 0;
      padding-bottom: 0;
    }

    .v-footer__brand { width: auto; }

    .v-footer__brand .v-logo {
      width: 114px;
      height: 31.166px;
    }

    .v-footer__address {
      padding-block: 24px;
      font-size: 1.2rem;
      line-height: 2;
      letter-spacing: 0.02em;
      text-box: trim-both cap alphabetic;
    }

    .v-footer__sns { gap: 30px; }

    .v-footer__sns li {
      width: 28px;
      height: 48px;
    }

    .v-footer__sns img { scale: 2; }

    .v-footer__nav {
      display: flex;
      flex-direction: column;
      gap: 48px;
      margin-top: 24px;
      padding-block: 37px 36px;
      border-top: 1px solid rgba(213, 208, 202, 0.1);
    }

    .v-footer__col { width: auto; }

    .v-footer__col-title {

      --cap: 14.007px;
      --title-box: 14px;
      --title-shift: -0.357px;
      font-size: 2.1rem;
      line-height: var(--title-box);
      letter-spacing: 0.02em;
    }

    .v-footer__col ul {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 30px 24px;
      padding-top: 30px;
      font-size: 1.3rem;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .v-footer__col ul + .v-footer__col-title { margin-top: 48px; }

    .v-footer__col li a { padding-bottom: 0; }

    .v-footer__rule {
      margin-top: 0;
      background: rgba(213, 208, 202, 0.1);
    }

    .v-footer__bottom {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 36px;
      padding: 37px 0 0;
      line-height: normal;
    }

    .v-footer__bottom ul {
      flex-wrap: wrap;
      font-size: 1.2rem;
      letter-spacing: 0.02em;
    }

    .v-footer__bottom li,
    .v-footer__bottom > p {
      text-box: trim-both cap alphabetic;
    }

    .v-footer__bottom > p {
      font-size: 0.95rem;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.6);
    }
  }

  @media (hover: hover) and (pointer: fine) {

    .v-footer__col a,
    .v-footer__bottom a {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      transition: text-decoration-color var(--dur-hover) var(--ease-hover);
    }

    .v-footer__col a:hover,
    .v-footer__bottom a:hover {
      text-decoration-color: currentColor;
    }

    .v-footer__sns a:hover img { filter: brightness(0.4902); }
  }

  .v-btn {
    display: grid;
    place-items: center;
    width: 307px;

    max-width: 100%;

    height: 52px;
    padding-inline: 41px;
    border: 1px solid var(--text-main);
    border-radius: 2px;

    background: transparent;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 16.5px;
    letter-spacing: 0.016em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;

    cursor: pointer;

    transition:
      background-color var(--dur-hover) var(--ease-hover),
      color var(--dur-hover) var(--ease-hover);
  }

  .v-btn--fill {
    background: var(--text-main);
    color: var(--text-white);
  }

  .v-btn[aria-disabled="true"],
  .v-btn:disabled {
    border-color: #cecccc;
    background: #cecccc;
    color: var(--text-white);

    cursor: default;
  }

  .v-btn--sp-only {
    display: none;
  }

  @media (max-width: 767px) {

    .m-store-detail__actions .v-btn {
      width: 100%;
    }

    .v-btn--pc-only {
      display: none;
    }

    .v-btn--sp-only {
      display: grid;
    }
  }

  @media (hover: hover) and (pointer: fine) {

    .v-btn:not(:disabled):not([aria-disabled="true"]):hover {
      background: var(--line);
    }

    .v-btn--fill:not(:disabled):not([aria-disabled="true"]):hover {
      background: var(--text-gold);
      color: var(--text-main);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .m-post-list__title,
    .m-blog-card__thumb img,
    .v-link-text,
    .v-thumb__link,
    .v-thumb__img img,
    .v-carousel__btn,
    .v-carousel__btn img,
    .v-photo-nav__btn > img,

    .v-gnav__panel-sns a img,
    .m-pagination__btn,
    .m-pagination__nav img,
    .v-btn,
    .v-logo,
    .v-gnav__cta,
    .v-gnav__list a,
    .v-gnav__list button,
    .v-gnav__group ul a,
    .v-footer__col a,
    .v-footer__bottom a,
    .v-gnav__panel,
    .v-gnav::after,
    .v-cta__btn,
    .v-faq__q,
    .v-footer__sns img,

    .v-fixed-cta,

    .l-header--overlay,

    .m-entry-body a,

    .v-policy__body a,
    .m-store-link__body {
      transition: none;
    }

    html {
      scroll-behavior: auto;
    }

    .v-thumb:hover .v-thumb__img img { scale: 1; }
    .m-blog-card:hover .m-blog-card__thumb img { scale: 1; }

    .v-faq__item::details-content {
      transition: none;
    }
  }
}

@layer utility {

  @media (max-width: 767px) {
    .u-pc-only {
      display: none;
    }
  }

  .u-sp-only {
    display: none;
  }

  @media (max-width: 767px) {
    .u-sp-only {
      display: revert;
    }
  }
}

@layer layout {

  body.is-nav-open {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--scroll-y, 0px) * -1);
    width: 100%;
    overflow: hidden;
    padding-right: var(--scrollbar-w, 0px);
  }

}

@layer views {

  .v-carousel__btn:disabled {
    opacity: 0;
    visibility: hidden;
  }
}

@layer views {

  .v-banner {
    position: relative;
    min-height: 811px;
    overflow: hidden;
    color: var(--text-white);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .v-banner-pin {

    min-height: calc(var(--banner-h) + var(--banner-pin));

    --banner-h: max(700px, calc(100vh - var(--sticky-header-h)));
  }

  .v-banner-pin > .v-banner {
    position: sticky;
    top: var(--sticky-header-h);

    min-height: var(--banner-h);
  }

  @media (max-width: 767px) {
    .v-banner-pin {
      --banner-h: max(667px, calc(100vh - var(--sticky-header-h)));
    }
  }

  .v-banner__img {
    position: absolute;
    inset: 0;
  }

  .v-banner__img picture {
    display: contents;
  }

  .v-banner__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 45.34%,
      rgba(0, 0, 0, 0.5) 58.186%
    );
  }

  .v-banner__en {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    color: var(--text-white);
  }

  .v-banner__body {
    position: relative;
    margin-top: 200px;
    margin-left: max(0px, min(845px, 100% - 595px));
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 72px;
  }

  .v-banner__text {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .v-banner__lead {
    font-weight: 300;
    font-size: 5.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-banner__desc {
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-banner.is-reveal .v-banner__body,
  .v-suits__head.is-reveal .v-suits__title,
  .v-suits__head.is-reveal .v-suits__lead,
  .v-lineup__intro.is-reveal {
    opacity: 0;
    translate: 0 24px;
  }

  .v-banner.is-reveal.is-revealed .v-banner__body,
  .v-suits__head.is-reveal.is-revealed .v-suits__title,
  .v-suits__head.is-reveal.is-revealed .v-suits__lead,
  .v-lineup__intro.is-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.8s var(--ease-out-cubic),
      translate 0.8s var(--ease-out-cubic);
  }

  @media (max-width: 767px) {
    .v-banner__en {
      --cap: 93px;
    }
  }

  @media (max-width: 767px) {

    .v-banner {
      min-height: 667px;
    }

    .v-banner::after {
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 35.897%,
        rgba(0, 0, 0, 0.3) 48.835%
      );
    }

    .v-banner__body {
      align-self: stretch;
      margin-top: 342px;
      margin-left: 0;
      padding-inline: 20px;
      gap: 44px;
    }

    .v-banner__text {
      gap: 32px;
    }

    .v-banner__lead { font-size: 2.8rem; }
    .v-banner__desc { font-size: 1.6rem; }
  }

  .v-banner--lineup::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 43.75%,
      rgba(0, 0, 0, 0.6) 64.904%
    );
  }

  .v-banner--lineup .v-banner__body {
    gap: 48px;
  }

  .v-banner--suits {
    min-height: 844px;
  }

  @media (max-width: 767px) {
    .v-banner--suits {
      min-height: 667px;
    }
  }

  .v-banner--suits::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6) 35.096%,
      rgba(0, 0, 0, 0) 64.871%
    );
  }

  .v-banner--suits .v-banner__body {
    margin-left: 76px;
  }

  @media (max-width: 767px) {

    .v-banner--product .v-banner__body {
      margin-top: auto;
      margin-bottom: 80px;
      margin-left: 0;
      gap: 60px;
    }

    .v-banner--product .v-banner__text {
      gap: 40px;
    }

    .v-banner--product .v-banner__desc {
      font-weight: 400;
      font-size: 1.4rem;
    }

    .v-banner--lineup::after {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 33.654%,
        rgba(0, 0, 0, 0) 65.385%,
        rgba(0, 0, 0, 0.6) 100%
      );
    }

    .v-banner--suits::after {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 26.923%,
        rgba(0, 0, 0, 0) 45.192%,
        rgba(0, 0, 0, 0) 71.635%,
        rgba(0, 0, 0, 0.6) 100%
      );
    }

    .v-banner--order::after {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.6) 47.596%,
        rgba(0, 0, 0, 0) 71.154%,
        rgba(0, 0, 0, 0.6) 100%
      );
    }
  }
}

@layer views {

  .v-modal[open] {
    display: flex;
    flex-direction: column;
  }

  .v-modal {
    position: relative;
    width: min(1200px, 100% - 40px);
    max-width: none;

    max-height: min(640px, 100% - 40px);
    padding: 0;
    border: 0;
    background: var(--bg-beige-light);
    color: var(--text-main);
    overflow: hidden;
  }

  .v-modal::backdrop {
    background: var(--modal-overlay);
  }

  .v-modal {
    opacity: 0;
    transition:
      opacity var(--dur-modal) var(--ease-in-out-cubic),
      display var(--dur-modal) allow-discrete,
      overlay var(--dur-modal) allow-discrete;
  }

  .v-modal[open] {
    opacity: 1;
  }

  @starting-style {
    .v-modal[open] {
      opacity: 0;
    }
  }

  .v-modal[open].is-closing {
    opacity: 0;
  }

  .v-modal::backdrop {
    opacity: 0;
    transition:
      opacity var(--dur-modal) var(--ease-in-out-cubic),
      display var(--dur-modal) allow-discrete,
      overlay var(--dur-modal) allow-discrete;
  }

  .v-modal[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    .v-modal[open]::backdrop {
      opacity: 0;
    }
  }

  .v-modal[open].is-closing::backdrop {
    opacity: 0;
  }

  .v-modal__content {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 80px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .v-modal__close {
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    cursor: pointer;
  }

  .v-modal.is-opened-by-pointer .v-modal__close:focus-visible {
    outline: none;
  }

  .v-modal__panel[hidden] {
    display: none;
  }

  .v-modal__head {
    padding: 80px 80px 72px;
  }

  .v-modal__title-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .v-modal__no {
    flex: 0 0 40px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 50%;
    background: var(--text-gold);
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--text-main);
    text-box: trim-both cap alphabetic;
  }

  .v-modal__title {
    font-weight: 300;
    font-size: 5.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-modal__lead {

    padding-top: 48px;

    font-weight: 300;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-modal-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 31px;
    padding-inline: 80px;
  }

  .v-modal-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .v-modal-card__img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-white);
  }

  .v-modal-card__img picture {
    display: contents;
  }

  .v-modal-card__img img {
    width: 88.44%;
    height: 88.44%;
    object-fit: cover;
  }

  .v-modal-card__name {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {

    .v-modal {
      width: min(335px, 100% - 40px);
      max-height: calc(100% - 40px);
    }

    .v-modal__content {
      padding-bottom: 60px;
    }

    .v-modal__close {
      right: 13px;
      top: 2px;
    }

    .v-modal__head {
      padding: 60px 20px 48px;
    }

    .v-modal__title { font-size: 2.8rem; }

    .v-modal__title-row { gap: 8px; }

    .v-modal__no {
      flex-basis: 28px;
      height: 28px;
      font-size: 1.33rem;
    }

    .v-modal__lead {
      padding-top: 30px;
      font-size: 1.6rem;
    }

    .v-modal-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px 15.5px;
      padding-inline: 20px;
    }

    .v-modal-card__name {
      font-size: 1.4rem;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .v-modal__close img {
      transition: opacity var(--dur-hover) var(--ease-hover);
    }

    .v-modal__close:hover img {
      opacity: 0.8;
    }
  }
}

@layer layout {

  body.is-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--scroll-y, 0px) * -1);
    width: 100%;
    overflow: hidden;
    padding-right: var(--scrollbar-w, 0px);
  }
}

@layer views {

  .v-suits__photo {
    position: sticky;

    top: var(--header-h);

    margin-bottom: min(0px, calc(844px - (100vh - var(--header-h))));

    height: max(844px, calc(100vh - var(--header-h)));
    overflow: hidden;
  }

  .v-suits__photo > picture {
    position: absolute;
    inset: 0;
  }

  .v-suits.is-veil .v-suits__photo::before,
  .v-lineup.is-veil .v-lineup__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--session-overlay-2);
    backdrop-filter: blur(18px);
    opacity: var(--fx-veil, 0);
  }

  .v-suits.is-veil .v-suits__photo::before {
    z-index: 3;
  }

  .v-suits.is-veil .v-suits__panel,
  .v-lineup.is-veil .v-lineup__panel {
    background: transparent;
    backdrop-filter: none;
  }

  .v-suits.is-veil .v-suits__head,
  .v-lineup.is-veil .v-lineup__head {
    opacity: calc(1 - var(--fx-head, 0));
  }

  .v-suits__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6) 35.096%,
      rgba(0, 0, 0, 0) 64.871%
    );
  }

  .v-suits__photo > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-suits__head {
    position: relative;
    z-index: 4;

    color: var(--text-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;
  }

  .v-suits__en {
    color: var(--text-white);
  }

  .v-suits__title {
    margin-top: 120px;

    margin-left: 76px;
    font-weight: 300;
    font-size: 5.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;
    text-box: trim-both cap alphabetic;
  }

  .v-suits__lead {
    margin-left: 76px;
    margin-top: 48px;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-box: trim-both cap alphabetic;
  }

  .v-suits__note {
    position: fixed;
    left: 76px;
    right: 76px;
    bottom: 24px;
    z-index: 2;
    gap: 4px;
    color: var(--text-white);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-note, 0.4s) ease-out,
                visibility 0s linear var(--dur-note, 0.4s);
  }

  .v-suits__note.is-shown {

    opacity: var(--fx-note, 1);
    visibility: visible;
    transition: opacity var(--dur-note, 0.4s) ease-out,
                visibility 0s linear 0s;
  }

  .v-suits__note.is-shown.is-fading {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .v-suits__note,
    .v-suits__note.is-shown,
    .v-suits__note.is-shown.is-fading {
      transition: none;
    }
  }

  .v-suits__panel {
    display: flex;
    align-items: flex-start;

    gap: min(54px, 100vw * 54 / 1440);

    padding-block: 160px 281px;
    padding-left: min(130px, 100vw * 130 / 1440);

    position: relative;
    z-index: 1;
    background: var(--session-overlay-2);
    color: var(--text-white);
    backdrop-filter: blur(18px);
  }

  .v-suits__body {
    display: flex;
    flex-direction: column;
    gap: 40px;

    flex: 560 1 0;

    margin-top: 48px;
  }

  .v-suits__cta {
    align-self: flex-start;
  }

  .v-suits__text {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-block: 24px;
  }

  .v-suits__text > p {
    text-box: trim-both cap alphabetic;
  }

  .v-suits__figure {
    flex: 696 1 0;
  }

  .v-suits__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 696 / 464;
  }

  .v-suits__carousel {
    --carousel-gutter: 0px;
  }

  .v-suits__carousel .v-carousel__track {
    gap: 0;
  }

  .v-suits__carousel .v-carousel__track > li {
    width: 100%;
  }

  .v-photo-nav__btn:disabled {
    cursor: default;
  }

  .v-photo-nav {

    display: flex;
    width: fit-content;
    align-items: center;
    gap: 20px;
    padding-top: 8px;
    color: var(--text-white);
  }

  .v-photo-nav__btn {
    --photo-nav-arrow-w: 17.016px;
    --photo-nav-arrow-h: 9.274px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;

    background: none;
    cursor: pointer;
    position: relative;
  }

  .v-photo-nav__btn::before {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - 24px) / 2));
  }

  .v-photo-nav__btn > img {
    grid-area: 1 / 1;
    width: var(--photo-nav-arrow-w);
    height: var(--photo-nav-arrow-h);
  }

  .v-photo-nav__btn--prev > img { rotate: -90deg; }
  .v-photo-nav__btn--next > img { rotate: 90deg; }

  .v-photo-nav__count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    width: 70px;
    height: 25px;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;

    font-variant-numeric: tabular-nums;
  }

  .v-photo-nav__slash {
    width: 20px;
    height: 0;
    flex-shrink: 0;
    margin-inline: calc((11.472px - 20px) / 2);
    border-top: 0.8px solid currentColor;
    rotate: -55deg;
  }

  .v-suits__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 1032px) {
    .v-suits__figure {
      min-width: 0;
    }
  }

  @media (max-width: 767px) {
    .v-suits__photo {
      height: max(667px, calc(100vh - var(--header-h)));
      margin-bottom: min(0px, calc(667px - (100vh - var(--header-h))));
    }

    .v-suits__en {
      --cap: 93px;
    }

    .v-suits__head {
      gap: 0;
      padding-bottom: 0;
    }

    .v-suits__title {
      margin-top: 60px;
      margin-left: 0;
      padding-inline: 20px;
      font-size: 2.8rem;
    }

    .v-suits__lead {
      margin-left: 0;
      margin-top: 32px;
      padding-inline: 20px;
      font-size: 1.6rem;
    }

    .v-suits__note {
      left: 20px;
      right: 20px;
      bottom: calc(24px + 53px);
    }

    .v-suits.is-veil .v-suits__photo::before {
      backdrop-filter: blur(24px);
    }

    .v-suits__panel {
      display: block;
      height: auto;
      padding: 56px 20px 120px;
      backdrop-filter: blur(24px);
    }

    .v-suits__body {
      gap: 32px;
      width: auto;
      margin-top: 0;
    }

    .v-suits__text {
      gap: 32px;
      padding-block: 0;
      font-size: 1.6rem;
    }

    .v-suits__cta {
      margin-top: 12px;
    }

    .v-suits__figure {
      width: auto;
      margin-top: 40px;
    }

    .v-suits__img {
      width: 100%;
      height: 223px;
      overflow: hidden;
    }

    .v-suits__img img {
      height: 230px;
    }

    .v-photo-nav__btn {

      --photo-nav-arrow-w: 12.566px;
      --photo-nav-arrow-h: 6.849px;
      width: 14px;
      height: 14px;
    }

    .v-photo-nav {
      gap: 18px;
    }

    .v-photo-nav__count {
      width: auto;
      gap: 12px;
      font-size: 1.2rem;
    }

    .v-photo-nav__slash {
      width: 14px;
      margin-inline: calc((8.03px - 14px) / 2);
    }
  }
}

@layer views {

  .v-section-head--cta {
    padding-bottom: 48px;
  }

  .v-section-head--cta .v-section-head__ja,
  .v-section-head--cta .v-section-head__lead {

    --cta-max: 900px;

    width: 100%;
    max-width: calc(var(--cta-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .v-section-head--cta .v-section-head__ja {
    font-size: 4.5rem;
  }

  .v-section-actions {
    display: flex;
    gap: 24px;
    padding-inline: 270px;

    width: 100%;
    max-width: var(--design-max);
    margin-inline: auto;
  }

  .v-content-section:has(.v-section-head--cta) .v-section-actions {

    --cta-max: 900px;

    max-width: calc(var(--cta-max) + var(--gutter) * 2);
    padding-inline: var(--gutter);
  }

  .v-profile {
    display: flex;
    flex-direction: column;
    gap: 40px;

    max-width: 900px;
    margin-inline: auto;
  }

  .v-profile__row {
    display: flex;
    align-items: flex-start;
    padding-bottom: 41px;
    border-bottom: 1px solid var(--line);

    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
  }

  .v-profile__label {
    flex: 0 0 200px;
    text-box: trim-both cap alphabetic;
  }

  .v-profile__value {
    flex: 1 1 auto;
    min-width: 0;
    text-box: trim-both cap alphabetic;
    overflow-wrap: break-word;
  }

  .v-access {
    display: flex;
    flex-direction: column;
    gap: 72px;
  }

  .v-access__head {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-bottom: 24px;
  }

  .v-access__name {
    padding-bottom: 0;
  }

  .v-access__address {
    min-width: 0;
    font-size: 1.8rem;
    line-height: 1.8;
    text-box: trim-both cap alphabetic;
  }

  .v-access__map {
    aspect-ratio: 1180 / 500;
  }

  .v-access__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .v-cta--sp-only {
    display: none;
  }

  @media (max-width: 767px) {

    .v-section-head--cta .v-section-head__ja {

      padding-inline: var(--gutter);
      font-size: 2.8rem;
    }

    .v-section-head--cta .v-section-head__lead {
      padding-inline: var(--gutter);
    }

    .v-section-head--cta {
      padding-bottom: 40px;
    }

    .v-section-head--cta .v-section-head__lead > p {
      font-weight: 400;
      font-size: 1.4rem;
    }

    .v-section-actions {
      flex-direction: column;
      gap: 18px;
      padding-inline: var(--gutter);
    }

    .v-section-actions .v-btn {
      width: 100%;
    }

    .v-profile {
      gap: 24px;
    }

    .v-profile__row {
      flex-direction: column;
      gap: 20px;
      padding-bottom: 24px;
      font-size: 1.4rem;
    }

    .v-profile__label {
      flex: 0 0 auto;
    }

    .v-profile__value {
      color: var(--text-sub);
    }

    .v-access {
      gap: 60px;
    }

    .v-access__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }

    .v-access__name {
      padding-bottom: 40px;
    }

    .v-access__address {
      font-weight: 400;
      font-size: 1.4rem;
      color: var(--text-sub);
    }

    .v-access__map {
      aspect-ratio: 335 / 380;
    }

    .v-cta--sp-only {
      display: revert;
    }
  }
}

@layer views {

  .v-lineup__photo {
    position: sticky;
    top: var(--header-h);

    min-height: max(811px, calc(100vh - var(--header-h)));
    margin-bottom: min(0px, calc(811px - (100vh - var(--header-h))));
    overflow: hidden;
  }

  .v-lineup__photo > picture {
    position: absolute;
    inset: 0;
  }

  .v-lineup__photo > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-lineup__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 110px;
  }

  .v-lineup__en {
    color: var(--text-white);
  }

  .v-lineup__intro {
    display: flex;
    flex-direction: column;
    gap: 40px;

    width: min(530px, 100% - 71px);
    margin-left: max(0px, min(845px, 100% - 595px));
    color: var(--text-white);
  }

  .v-lineup__title {
    font-weight: 300;
    font-size: 5.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    font-feature-settings: "palt" 1;

    text-box: trim-both cap alphabetic;
  }

  .v-lineup__lead {
    padding-top: 40px;
    text-box: trim-both cap alphabetic;
  }

  .v-lineup__panel {
    position: relative;
    z-index: 1;
    padding: 90px 0 187px;
    background: var(--session-overlay-2);
    backdrop-filter: blur(18px);
    color: var(--text-white);
  }

  .v-lineup__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(290px, 1fr));
    gap: 15px;
    padding-inline: 40px;
    max-width: 1440px;
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    scroll-padding-inline: 40px;
  }

  .v-lineup__row::-webkit-scrollbar { display: none; }

  .v-lineup__row > li {
    scroll-snap-align: start;
  }

  .v-lineup__row .v-thumb--lg,
  .v-lineup__row .v-thumb--lg .v-thumb__img {
    width: auto;
  }

  .v-lineup__row .v-thumb--lg .v-thumb__img {
    align-self: stretch;
    height: auto;
    aspect-ratio: 329 / 438;
  }

  @media (max-width: 1032px) {
    .v-lineup__row {
      grid-template-columns: repeat(2, 1fr);

      row-gap: 40px;
    }
  }

  .v-lineup__rows {
    --carousel-btn-x: 16px;
    --carousel-btn-y: calc(50% + 42.51px);
  }

  .v-lineup__scroll {
    margin-top: 90px;
    --carousel-btn-x: 16px;
    --carousel-btn-y: 277px;
  }

  .v-lineup__scroll .v-carousel__track {
    justify-content: safe center;
  }

  @media (max-width: 767px) {

    .v-lineup__photo {
      min-height: max(667px, calc(100vh - var(--header-h)));
      margin-bottom: min(0px, calc(667px - (100vh - var(--header-h))));
    }

    .v-lineup__head {
      gap: clamp(40px, 100svh - var(--header-h) - 52px - 40px - 347px, 245px);
    }

    .v-lineup__intro {
      gap: 32px;
      width: auto;
      margin-left: 0;
      padding-left: 20px;
    }

    .v-lineup__title {
      font-size: 2.8rem;
      white-space: normal;
    }

    .v-lineup__lead {
      padding-top: 0;
      font-size: 1.6rem;
      white-space: normal;
    }

    .v-lineup__panel {
      padding: 56px 0 120px;
    }

    .v-lineup__row {
      display: flex;
      gap: 20px;
      padding-inline: 20px;
      overflow-x: auto;

      overflow-y: hidden;

      scrollbar-width: none;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 20px;
    }

    .v-lineup__row::-webkit-scrollbar { display: none; }

    .v-lineup__row > li {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }

    .v-lineup__row .v-thumb--lg,
    .v-lineup__row .v-thumb--lg .v-thumb__img {
      width: 100%;
    }

    .v-lineup__rows {
      --carousel-btn-x: 10px;
      --carousel-btn-y: calc(50% + 35.5px);
    }

    .v-lineup__scroll {
      margin-top: 64px;
      --carousel-btn-x: 10px;
      --carousel-btn-y: 203px;
    }
  }

  @media (max-width: 767px) {
    .v-lineup__en {
      --cap: 93px;
    }
  }
}

@layer views {

  .v-photo-figure {
    display: flex;
    flex-direction: column;

    --carousel-gutter: 0px;
  }

  .v-photo-figure .v-carousel__track {
    gap: 0;
  }

  .v-photo-figure .v-carousel__track > li {
    width: 100%;
  }

  .v-photo-figure__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  .v-photo-figure__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .v-photo-nav--light {
    color: var(--text-main);
  }

  @media (hover: hover) and (pointer: fine) {
    .v-photo-nav__btn > img {
      transition: filter var(--dur-hover) var(--ease-hover);
    }

    .v-photo-nav__btn:hover > img {
      filter: brightness(0.490196);
    }

    .v-photo-nav--light .v-photo-nav__btn:hover > img {
      filter: brightness(2.45098);
    }
  }

  .v-point-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 80px;
  }

  .v-point-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .v-point-card__text {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.6;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {

    .v-media-text--photo {
      flex-direction: column;

      align-items: stretch;
      gap: 0;
      padding: 0 var(--gutter);
    }

    .v-media-text--photo.v-media-text--reverse {
      gap: 0;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
    }

    .v-media-text--photo .v-media-text__body {
      display: contents;
    }

    .v-media-text--photo .v-media-text__body p {
      max-width: none;
      font-size: 1.6rem;
    }

    .v-media-text__lead {
      display: block;
    }

    .v-media-text--photo .v-media-text__lead > p {
      text-box-edge: cap alphabetic;
      text-box-trim: none;
    }

    .v-media-text--photo .v-media-text__lead > p:first-child {
      text-box-trim: trim-start;
    }

    .v-media-text--photo .v-media-text__lead > p:last-child {
      text-box-trim: trim-end;
    }

    .v-media-text--photo .v-media-text__lead > p:only-child {
      text-box-trim: trim-both;
    }

    .v-media-text--photo .v-media-text__lead > p + p {
      margin-top: 18px;
    }

    .v-media-text--photo .v-photo-figure {
      position: static;
      flex: none;
      margin-top: 60px;
    }

    .v-media-text--photo .v-photo-nav {
      position: static;
    }

    .v-media-text--point .v-point-num__head {
      order: 1;
    }

    .v-media-text--point .v-photo-figure {
      order: 2;
      margin-top: 16px;
    }

    .v-media-text--photo.v-media-text--point .v-media-text__body > p {
      order: 3;
      margin-top: 16px;
      font-size: 1.4rem;
    }

    .v-point-cards {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 60px;
    }

    .v-point-card {
      gap: 16px;
    }

    .v-point-card__text {
      line-height: 1.8;
    }

    .v-lineup--sp-hide {
      display: none;
    }
  }
}

@layer views {

  .v-media-texts {
    display: flex;
    flex-direction: column;
    gap: 80px;
  }

  @media (max-width: 767px) {
    .v-media-texts {
      gap: 60px;
    }
  }
}

@layer models {

  .m-reward-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .m-reward-link {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 16px 24px;
    border-left: 1px solid var(--text-gold);
    background: var(--bg-beige-dark);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
  }

  .m-reward-item__body {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .m-reward-item__name {
    min-block-size: 56px;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-box: trim-both cap alphabetic;
  }

  .m-reward-item__amount {
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-box: trim-both cap alphabetic;
  }

  .m-reward-link img {
    flex-shrink: 0;
    width: 12.071px;
    height: 12.071px;
    rotate: 90deg;
  }

  .m-reward-link {
    transition: background-color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .m-reward-link:hover {
      background: var(--hover-gold);
    }
  }

  @media (max-width: 767px) {
    .m-reward-list {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .m-reward-item__body {
      gap: 18px;
    }

    .m-reward-item__name {
      min-block-size: 0;
      font-size: 1.4rem;
    }

    .m-reward-item__amount {
      font-size: 1.3rem;
    }
  }
}

@layer views {

  .v-note {
    display: flex;
    align-items: flex-start;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }

  .v-note__mark {
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
  }

  .v-note__text {
    flex: 1 0 0;
    min-width: 0;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 767px) {
    .v-note {
      font-size: 1.1rem;
    }
  }

  .v-point-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .v-point-block > * + * {
    margin-top: 40px;
  }

  .v-point-block > .v-link-text + .v-note {
    margin-top: 24px;
  }

  .v-point-block > .v-note,
  .v-point-block > .m-reward-list {
    align-self: stretch;
  }

  .v-point-block > .v-point-num + .m-reward-list {
    margin-top: 56px;
  }

  .v-point-block > .m-reward-list + .v-link-text {
    margin-top: 64px;
  }

  .v-point-nums--wide {
    max-width: none;
  }

  .v-point-nums--wide .v-point-num {
    max-width: 900px;
  }

  @media (max-width: 767px) {
    .v-point-block > .v-point-num + .m-reward-list,
    .v-point-block > .m-reward-list + .v-link-text {
      margin-top: 40px;
    }
  }

  .v-link-text--external img {
    width: 13.125px;
    height: 13.125px;
    rotate: none;
  }

  .v-media-text--emblem {
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding-top: 0;

    width: 100%;
    max-width: calc(var(--content-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .v-media-text--emblem .v-media-text__body {

    flex: 0 1 674px;
    min-width: 0;
    gap: 60px;
    padding-block: 0;
    padding-right: 80px;
  }

  .v-media-text--emblem .v-media-text__link {
    align-self: flex-start;
  }

  .v-media-text--emblem .v-media-text__img {
    display: block;

    flex: 0 1 506px;
    min-width: 0;
    width: auto;
    aspect-ratio: 382 / 509;
  }

  .v-media-text--emblem .v-media-text__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 767px) {

    .v-media-text--emblem {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding-inline: var(--gutter);
    }

    .v-media-text--emblem .v-media-text__body {
      display: contents;
    }

    .v-media-text--emblem .v-media-text__text {
      width: 100%;
    }

    .v-media-text--emblem .v-media-text__text > p {
      font-size: 1.6rem;
    }

    .v-media-text--emblem .v-note {
      align-self: stretch;
      margin-top: 60px;
    }

    .v-media-text--emblem .v-media-text__link {
      margin-top: 48px;
    }

    .v-media-text--emblem .v-media-text__img {

      flex: 0 0 auto;
      width: 100%;
      margin-top: 48px;
      aspect-ratio: 590 / 768;
    }
  }

  .v-media-text__text > p {
    text-box-edge: cap alphabetic;
  }

  .v-media-text__text > p:first-child { text-box-trim: trim-start; }

  .v-media-text__text > p:last-child { text-box-trim: trim-end; }

  .v-media-text__text > p:only-child { text-box-trim: trim-both; }

  .v-media-text__text > p + p {
    margin-top: 24px;
  }

  @media (max-width: 767px) {
    .v-media-text__text > p + p {
      margin-top: 18px;
    }
  }

  @media (max-width: 767px) {
    .v-section-head--sp-tight:not(:has(.v-section-head__lead)) {
      padding-bottom: 40px;
    }
  }

  .v-content-section:not(:has(.v-section-actions)) .v-section-head--cta,
  .v-content-section:not(:has(.v-section-actions)) .v-section-head--cta .v-section-head__lead {
    padding-bottom: 0;
  }
}

@layer views {

  .v-section-head--indent-270 .v-section-head__ja,
  .v-section-head--indent-270 .v-section-head__lead {

    --error-max: 900px;

    width: 100%;
    max-width: calc(var(--error-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .v-content-section:has(.v-section-head--indent-270) .v-section-actions {
    --error-max: 900px;

    max-width: calc(var(--error-max) + var(--gutter) * 2);
    padding-inline: var(--gutter);
  }

  .v-section-actions--point {
    padding-inline: 0;
    margin-block: 80px 72px;
  }

  @media (max-width: 767px) {
    .v-section-actions--point {
      margin-block: 60px 0;
    }
  }

  .v-section-actions--point .v-btn {
    padding-inline: 0;

    height: auto;
    min-height: 52px;
    white-space: normal;
  }

  .v-section-actions {
    align-items: flex-start;
  }

  @media (max-width: 767px) {
    .v-section-head--indent-270 .v-section-head__ja,
    .v-section-head--indent-270 .v-section-head__lead {
      padding-inline: var(--gutter);
      max-width: none;
    }
  }
}

@layer models {

  .m-outlink-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .m-outlink-head__name {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-box: trim-both cap alphabetic;
  }

  .m-outlink-head__amount {
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-box: trim-both cap alphabetic;
  }

  .m-outlink-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .m-outlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 16px;
    border: 1px solid var(--line);
    background: var(--bg-white);
    color: #000;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  .m-outlink__text {
    text-box: trim-both cap alphabetic;
  }

  .m-outlink img {
    flex-shrink: 0;
    width: 13.125px;
    height: 13.125px;
  }

  .m-outlink {
    transition: background-color var(--dur-hover) var(--ease-hover);
  }

  @media (hover: hover) and (pointer: fine) {
    .m-outlink:hover {
      background: var(--hover-gold);
    }
  }

  @media (max-width: 767px) {
    .m-outlink-head {
      gap: 18px;
    }

    .m-outlink-head__name {
      font-size: 1.4rem;
    }

    .m-outlink-head__amount {
      font-size: 1.3rem;
    }

    .m-outlink-list {
      margin-top: 16px;
    }

    .m-outlink {
      padding: 20px 16px;
      font-size: 1.4rem;
    }
  }
}

@layer views {

  .v-modal--outlink {
    width: min(377px, 100% - 40px);
    max-height: calc(100% - 40px);
    border-left: 1px solid var(--text-gold);
    background: var(--bg-beige-dark);
  }

  .v-modal--outlink .v-modal__content {
    padding: 59px 24px 40px;
  }

  .v-modal--outlink .v-modal__close {
    right: 19.5px;
    top: 11.5px;
  }

  @media (max-width: 767px) {
    .v-modal--outlink {
      width: min(335px, 100% - 40px);
    }

    .v-modal--outlink .v-modal__content {
      padding: 55px 24px 24px;
    }

    .v-modal--outlink .v-modal__close {
      right: 17px;
      top: 2px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .m-reward-link,
    .m-outlink,

    .v-modal {
      transition: none;
    }

    .v-modal::backdrop {
      transition: none;
    }
  }
}