@charset "UTF-8";

:root {
  --pw: 1400;
  --sw: 780;
  --artboard-pw: 500;
  --artboard-sw: 780;
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);

  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

@media (min-width: 781px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

@media (min-width: 1401px) {
  :root {
    --variable: 1px;
  }
}

.p-feature {
  --base-font-color: #1f1f1f;
  --color-accent: #d57584;
  --color-note: #333;
  --color-note-weak: #aa979b;
  --color-gold: #ad9e60;
  --color-marquee: #d36c88;
  --color-line: #e3b9c2;

  --lp-font-ja: lato, ryo-gothic-plusn, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: lato, Verdana, Helvetica, Arial, sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .05em;

  --z-base: 1;
  --z-sticky: 10;
  --z-modal-overlay: 1000;
  --z-modal: 1010;
}

.lp_contents {
  position: relative;

  /* isolation: isolate; */
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    font-feature-settings: "palt";
  }

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

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  & :where(a, button):focus-visible {
    outline: calc(3 * var(--rem, 1px)) solid var(--color-accent);
    outline-offset: calc(3 * var(--rem, 1px));
  }
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

#footer,
footer,
#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents {
  & .u-d-lg {
    @media (max-width: 780px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 781px) {
      display: none !important;
    }
  }
}

.lp_contents {
  & .accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--transition-timing);
  }
}

.lp_contents {
  & .modal {
    position: fixed;
    z-index: var(--z-modal-overlay);
    inset: 0;
    display: none;
    padding-block: calc(30 * var(--rem, 1px));
    background: rgb(0 0 0 / .7);

    &.is-open {
      display: block;
    }
  }

  & .modal_outside {
    width: 100%;
    max-width: calc(670 * var(--rem, 1px));
    height: 80%;
    margin-inline: auto;
    background: #fff;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  & .modal__body {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.lp_contents {
  & .ani-inview {
    translate: 0 30px;
    transition: opacity 1s var(--transition-timing), translate 1s var(--transition-timing);

    &.is-active {
      translate: 0 0;
    }
  }
}

html.js .lp_contents {
  & .ani-inview {
    opacity: 0;

    &.is-active {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .ani-inview {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

.lp_contents {
  & .layout-inner {
    position: relative;
  }

  & .lp_contents_bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;

    & img {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      object-fit: cover;
    }
  }

  & .p-mv,
  & .p-marquee,
  & .p-filter,
  & .p-products {
    position: relative;
    z-index: var(--z-base);
  }

  & .p-mv {
    padding-top: calc(100 * var(--rem));
    text-align: center;
  }

  & .p-mv__crown {
    width: calc(60 * var(--rem));
    margin-inline: auto;
  }

  & .p-mv__ttl {
    margin-top: calc(23 * var(--rem));

    & img {
      width: calc(780 * var(--rem));
    }
  }

  & .p-mv__lead {
    margin-top: calc(19 * var(--rem));
    font-size: calc(28 * var(--rem));
    line-height: 2.2;
    letter-spacing: .125em;
    white-space: nowrap;
  }

  & .p-mv__emblem {
    width: calc(464 * var(--rem));
    margin-top: calc(66 * var(--rem));

    margin-inline: auto;
  }

  & .p-mv__note {
    width: calc(700 * var(--rem));
    margin-top: calc(22 * var(--rem));
    margin-inline: auto;
    color: var(--color-note-weak);
    font-size: calc(20 * var(--rem));
    line-height: 2;
    letter-spacing: .1em;
    white-space: nowrap;
  }
}

.lp_contents {
  & .p-marquee {
    overflow: hidden;
    width: 100%;
    height: calc(80 * var(--rem));
    margin-top: calc(40 * var(--rem));
    background: rgb(211 108 136 / .4);
  }

  & .p-marquee__track {
    display: flex;
    align-items: center;

    width: max-content;
    height: 100%;
    animation: p-marquee var(--marquee-duration, 50s) linear infinite;
  }

  & .p-marquee__item {
    margin-right: calc(27 * var(--rem));
    color: #fff;
    font-size: calc(32 * var(--rem));
    letter-spacing: .05em;
    white-space: nowrap;
  }

  & .p-marquee__sep {
    flex: 0 0 auto;
    width: calc(32 * var(--rem));
    height: calc(34 * var(--rem));
    margin-right: calc(39 * var(--rem));
    background: url("/Page/Lp/SB_bestcosme/img/261001/marquee_sep.png") center / contain no-repeat;
  }
}

@keyframes p-marquee {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .p-marquee__track {
    animation: none;
  }

  .lp_contents .p-marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lp_contents .p-marquee::-webkit-scrollbar {
    display: none;
  }
}

.lp_contents {
  & .p-filter {
    padding-top: calc(99 * var(--rem));
  }

  & .p-filter__category {
    display: flex;
    margin-left: calc(26 * var(--rem));
  }

  & .p-filter__category-item {
    width: calc(var(--w) * var(--rem));

    & + & {
      margin-left: calc(10 * var(--rem));
    }
  }

  & .p-filter__category-btn {
    display: grid;
    place-items: center;
    width: 100%;
    /* height: calc(66 * var(--rem)); */
    border: 1px solid var(--color-accent);
    border-radius: calc(33 * var(--rem));
    color: var(--color-accent);
    font-size: calc(36 * var(--rem));
    line-height: 1.8;
    letter-spacing: .125em;
    white-space: nowrap;

    &[aria-pressed="true"] {
      background: var(--color-accent);
      color: #fff;
    }
  }

  & .p-filter__year {
    display: flex;
    margin-top: calc(96 * var(--rem));
    border-bottom: calc(4 * var(--rem)) solid var(--color-line);
    gap: calc(4 * var(--rem));
  }

  & .p-filter__year-item {
    position: relative;
    width: calc(195 * var(--rem));
    z-index: 0;
  }

  & .p-filter__year-btn {
    width: 100%;

    height: calc(139 * var(--rem));
    padding-bottom: calc(0 * var(--rem));
    font-size: calc(32 * var(--rem));
    line-height: 1.8;
    letter-spacing: .125em;
    text-align: center;
    white-space: nowrap;

    &[aria-pressed="true"] {
      background: var(--color-accent);
      color: #fff;
    }
  }

  & .p-filter__year-item:nth-of-type(2)::before {
    position: absolute;
    content: "";
    background: var(--color-line);
    width: calc(4 * var(--rem));
    height: calc(100 * var(--rem));
    top: 50%;
    left: calc(-4 * var(--rem));
    transform: translateY(-50%);
    z-index: 1;
  }

  & .p-filter__year-item:nth-of-type(2)::after {
    position: absolute;
    content: "";
    background: var(--color-line);
    width: calc(4 * var(--rem));
    height: calc(100 * var(--rem));
    top: 50%;
    right: calc(-4 * var(--rem));
    transform: translateY(-50%);
    z-index: 1;
  }

  & .p-filter__year-item:nth-of-type(3)::after {
    position: absolute;
    content: "";
    background: var(--color-line);
    width: calc(4 * var(--rem));
    height: calc(100 * var(--rem));
    top: 50%;
    right: calc(-4 * var(--rem));
    transform: translateY(-50%);
    z-index: 1;
  }
}

.lp_contents {
  & .p-products {
    padding-top: calc(81 * var(--rem));

    padding-bottom: calc(70 * var(--rem));
  }

  & .p-products__divider {
    width: calc(780 * var(--rem));
    margin-top: calc(98 * var(--rem));

    &[hidden] {
      display: none;
    }

    &[data-prev="face_stylist"] {
      margin-top: calc(112 * var(--rem));
    }

    &[data-prev="euphoric"] {
      margin-top: calc(90 * var(--rem));
    }

    &[data-prev="lip_glaze"] {
      margin-top: calc(101 * var(--rem));
    }
  }

  & .p-product {
    margin-top: calc(80 * var(--rem));

    &.is-first {
      margin-top: 0;
    }
  }

  & .p-product {
    &[hidden] {
      display: none;
    }
  }

  & .p-product__visual {
    position: relative;
    height: calc(670 * var(--rem));
  }

  & .p-product__visual::before {
    content: "";
    position: absolute;
    top: calc(20 * var(--rem));
    left: calc(120 * var(--rem));
    width: calc(630 * var(--rem));
    height: calc(630 * var(--rem));
    border-radius: 50%;
    background: rgb(255 255 255 / .35);
  }

  & .p-product__photo {
    position: absolute;
    z-index: var(--z-base);
    top: calc(90 * var(--rem));
    left: calc(220 * var(--rem));
    width: calc(540 * var(--rem));
  }

  & .p-product__arch {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: calc(780 * var(--rem));
  }

  & .p-product__award {
    position: absolute;
    z-index: calc(var(--z-base) + 1);
    top: calc(20 * var(--rem));
    left: calc(20 * var(--rem));
    display: flex;
    align-items: flex-start;
    gap: calc(10 * var(--rem));

    &[hidden] {
      display: none;
    }

    & img {
      width: calc(112 * var(--rem));
    }
  }

  & .p-product__colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: calc(70 * var(--rem));
    row-gap: calc(19 * var(--rem));
    margin-top: calc(40 * var(--rem));
    padding-inline: calc(90 * var(--rem));
  }

  & .p-product[data-product="face_stylist"] .p-product__colors {
    column-gap: calc(60 * var(--rem));
    padding-inline: calc(45 * var(--rem));
  }

  & .p-product__color {
    width: calc(90 * var(--rem));

    &[hidden] {
      display: none;
    }
  }

  & .p-product__color-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  & .p-product__crown {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-accent);

    &.is-empty {
      visibility: hidden;
    }

    & img {
      width: calc(32 * var(--rem));
    }
  }

  & .p-product.is-no-crown .p-product__crown {
    display: none;
  }

  & .p-product.is-no-crown .p-product__colors {
    margin-top: calc(45 * var(--rem));
  }

  & .p-product.is-no-crown .p-product__swatch {
    margin-top: 0;
  }

  & .p-product__crown-num {
    min-height: calc(22 * var(--rem));
    margin-top: calc(9 * var(--rem));
    font-size: calc(22 * var(--rem));
    line-height: 1;
    letter-spacing: .125em;
    white-space: nowrap;
  }

  & .p-product__swatch {
    width: calc(90 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }

  & .p-product[data-product="euphoric"] .p-product__swatch {
    border-radius: 50%;
  }

  & .p-product__color-num {
    margin-top: calc(9 * var(--rem));
    font-size: calc(28 * var(--rem));
    line-height: 1.8;
    letter-spacing: .125em;
  }

  & .p-product__color-btn[aria-pressed="true"] .p-product__swatch {
    outline: calc(2 * var(--rem)) solid var(--color-accent);
    outline-offset: calc(4 * var(--rem));
  }

  & .p-product__name {
    margin-top: calc(41 * var(--rem));
    font-size: calc(36 * var(--rem));
    line-height: 1.8;
    letter-spacing: .125em;
    text-align: center;
    white-space: nowrap;
  }

  & .p-product__colors[hidden] + .p-product__name {
    margin-top: calc(81 * var(--rem));
  }

  & .p-product__price {
    margin-top: calc(18 * var(--rem));
    font-size: calc(28 * var(--rem));
    line-height: 1;
    letter-spacing: .125em;
    text-align: center;
  }

  & .p-product__detail {
    margin-top: calc(43 * var(--rem));
    margin-inline: auto;
    width: calc(440 * var(--rem));

    & a {
      display: grid;
      place-items: center;
      width: calc(440 * var(--rem));
      height: calc(74 * var(--rem));
      background: var(--color-accent);
      color: #fff;
      font-size: calc(28 * var(--rem));
      letter-spacing: .1em;
    }

    & a span {
      position: relative;
      width: 100%;
      text-align: center;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(24 * var(--rem));
        width: calc(14 * var(--rem));
        height: calc(14 * var(--rem));
        border-top: calc(2 * var(--rem)) solid #fff;
        border-right: calc(2 * var(--rem)) solid #fff;
        rotate: 45deg;
        translate: 0 -50%;
      }
    }
  }

  & .p-product__more {
    margin-top: calc(64 * var(--rem));
    text-align: center;
  }

  & .p-product__more-btn {
    position: relative;
    padding-right: calc(30 * var(--rem));
    border-bottom: 1px solid currentcolor;
    font-size: calc(28 * var(--rem));
    line-height: 1.885;
    letter-spacing: .125em;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      width: calc(20 * var(--rem));
      height: 1px;
      background: currentcolor;
    }

    &::after {
      rotate: 90deg;
    }

    &[aria-expanded="true"]::after {
      rotate: 0deg;
    }
  }

  & .p-product__records {
    margin-top: calc(68 * var(--rem));
    text-align: center;

    &[hidden] {
      display: none;
    }
  }

  & .p-product__records-name {
    width: calc(520 * var(--rem));
    margin-inline: auto;
    color: var(--color-accent);
    font-size: calc(30 * var(--rem));
    line-height: 1.8;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  & .p-product__records-term {
    display: inline-block;
    margin-top: calc(8 * var(--rem));
    padding-bottom: calc(4 * var(--rem));
    border-bottom: calc(2 * var(--rem)) solid var(--color-accent);
    font-size: calc(28 * var(--rem));
    line-height: 1.8;
    letter-spacing: .125em;
  }

  & .p-product__records-list {
    margin-top: calc(17 * var(--rem));
    color: var(--color-note);
    font-size: calc(24 * var(--rem));
    line-height: 1.8;
    letter-spacing: .075em;

    white-space: nowrap;

    & li + li {
      margin-top: calc(10 * var(--rem));
    }
  }

  & .p-product__records-dot {
    display: inline-block;
    width: calc(10 * var(--rem));
    height: calc(10 * var(--rem));
    margin-right: calc(10 * var(--rem));
    background: var(--color-accent);
    vertical-align: calc(3 * var(--rem));
  }
}

.lp_contents {
  & .modal {
    padding-block: calc(30 * var(--rem));

    background: rgb(209 130 154 / .3);
  }

  & .modal_outside {
    position: absolute;
    max-width: calc(740 * var(--rem));
  }

  & .p-modal__close {
    position: absolute;
    z-index: calc(var(--z-modal) + 1);
    top: calc(29 * var(--rem));
    right: calc(31 * var(--rem));
    width: calc(42 * var(--rem));
  }

  & .modal__body {
    padding: calc(119 * var(--rem)) calc(80 * var(--rem)) calc(60 * var(--rem));
  }

  & .p-modal__viewer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & .p-modal__frame {
    position: relative;
    width: calc(582 * var(--rem));
    height: calc(582 * var(--rem));
    border: 1px solid var(--color-accent);
  }

  & .p-modal__photo {
    width: 101%;
    transform-origin: center;
    transition: transform .3s var(--transition-timing);
  }

  & .p-modal__frame.is-grabbing .p-modal__photo {
    transition: none;
  }

  & .p-modal__frame {
    overflow: hidden;
  }

  & .p-modal__frame.is-zoom {
    cursor: grab;
    touch-action: none;
  }

  & .p-modal__frame.is-grabbing {
    cursor: grabbing;
  }

  & .p-modal__zoom {
    position: absolute;
    z-index: var(--z-base);
    right: calc(14 * var(--rem));
    bottom: calc(14 * var(--rem));
    width: calc(60 * var(--rem));
  }

  & .p-modal__nav {
    position: absolute;
    top: 50%;
    width: calc(24 * var(--rem));
    translate: 0 -50%;

    &.p-modal__nav--prev {
      left: calc(-50 * var(--rem));
    }

    &.p-modal__nav--next {
      right: calc(-50 * var(--rem));
    }
  }

  & .p-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: calc(26 * var(--rem));
    padding-inline: calc(20 * var(--rem)) calc(20 * var(--rem));
  }

  & .p-modal__thumbs {
    display: flex;
    gap: calc(20 * var(--rem));
  }

  & .p-modal__thumb {
    display: block;
    width: calc(90 * var(--rem));
    padding-bottom: calc(20 * var(--rem));
    border-bottom: calc(4 * var(--rem)) solid transparent;

    &[aria-pressed="true"] {
      border-bottom-color: var(--color-accent);
    }
  }

  & .p-modal__name {
    font-size: calc(30 * var(--rem));
    line-height: 1.8;
    letter-spacing: .05em;
    white-space: nowrap;

    & span {
      display: block;
    }
  }

  & .p-modal__detail {
    margin-top: calc(28 * var(--rem));
    margin-inline: auto;
    width: calc(440 * var(--rem));

    & a {
      display: grid;
      place-items: center;
      width: calc(440 * var(--rem));
      height: calc(74 * var(--rem));
      background: var(--color-accent);
      color: #fff;
      font-size: calc(28 * var(--rem));
      letter-spacing: .1em;
    }

    & a span {
      position: relative;
      width: 100%;
      text-align: center;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(24 * var(--rem));
        width: calc(14 * var(--rem));
        height: calc(14 * var(--rem));
        border-top: calc(2 * var(--rem)) solid #fff;
        border-right: calc(2 * var(--rem)) solid #fff;
        rotate: 45deg;
        translate: 0 -50%;
      }
    }
  }

  & .p-modal__awards {
    margin-top: calc(69 * var(--rem));
    padding-top: calc(71 * var(--rem));
    border-top: 1px dashed var(--color-accent);
    text-align: center;

    &[hidden] {
      display: none;
    }
  }

  & .p-modal__awards-set[hidden] {
    display: none;
  }

  & .p-modal__awards-label {
    margin-top: calc(60 * var(--rem));
    color: var(--color-accent);
    font-size: calc(30 * var(--rem));
    line-height: 1.8;
    letter-spacing: .1em;
    white-space: nowrap;

    .p-modal__awards-set > &:first-child {
      margin-top: 0;
    }
  }

  & .p-modal__awards-year {
    display: inline-block;
    margin-top: calc(10 * var(--rem));
    padding-bottom: calc(6 * var(--rem));
    border-bottom: calc(2 * var(--rem)) solid var(--color-accent);
    color: var(--color-note);
    font-size: calc(24 * var(--rem));
    line-height: 1.8;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  & .p-modal__awards-list {
    margin-top: calc(22 * var(--rem));
    color: var(--color-note);
    font-size: calc(24 * var(--rem));
    line-height: 1.8;
    letter-spacing: .05em;
    white-space: nowrap;

    & li + li {
      margin-top: calc(28 * var(--rem));
    }
  }

  & .p-modal__awards-dot {
    display: inline-block;
    width: calc(10 * var(--rem));
    height: calc(10 * var(--rem));
    margin-right: calc(10 * var(--rem));
    background: var(--color-accent);
    vertical-align: calc(3 * var(--rem));
  }
}

.lp_contents {
  & .p-pagetop {
    position: fixed;
    z-index: var(--z-sticky);
    right: calc(20 * var(--rem));
    bottom: calc(40 * var(--rem));
    width: calc(80 * var(--rem));
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--transition-timing);

    &.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    @media (min-width: 781px) {
      right: calc(40 * var(--rem-pc));
      bottom: calc(40 * var(--rem-pc));
      width: calc(80 * var(--rem-pc));
    }
  }
}

.lp_contents {
  & .layout-rail--left .p-rail-mv {
    --rem: calc(var(--rem-pc) * .484);

    text-align: center;
  }

  & .p-rail-mv__crown {
    width: calc(60 * var(--rem));
    margin-inline: auto;
  }

  & .p-rail-mv__ttl {
    margin-top: calc(23 * var(--rem));

    & img {
      width: calc(780 * var(--rem));
    }
  }

  & .p-rail-mv__lead {
    margin-top: calc(19 * var(--rem));
    font-size: calc(28 * var(--rem));
    line-height: 2.2;
    letter-spacing: .125em;
    white-space: nowrap;
  }

  & .layout-rail--right .p-rail-nav {
    --rem: calc(var(--rem-pc) * .47);
  }

  & .p-rail-nav__category {
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--rem));
    justify-content: center;

    width: calc(480 * var(--rem));

    & li {
      width: calc(var(--w) * var(--rem));
    }
  }

  & .p-rail-nav__year {
    margin-top: calc(60 * var(--rem));
    text-align: center;

    & li + li {
      margin-top: calc(28 * var(--rem));
    }
  }

  & .p-rail-nav__btn {
    font-size: calc(36 * var(--rem));
    line-height: 1.8;
    letter-spacing: .125em;
    white-space: nowrap;
  }

  & .p-rail-nav__category .p-rail-nav__btn {
    display: grid;
    place-items: center;
    width: 100%;
    height: calc(66 * var(--rem));
    border: 1px solid var(--color-accent);
    border-radius: calc(33 * var(--rem));
    color: var(--color-accent);

    &[aria-pressed="true"] {
      background: var(--color-accent);
      color: #fff;
    }
  }

  & .p-rail-nav__year .p-rail-nav__btn {
    padding-bottom: calc(6 * var(--rem));
    border-bottom: calc(3 * var(--rem)) solid transparent;
    font-size: calc(32 * var(--rem));

    &[aria-pressed="true"] {
      border-bottom-color: var(--color-accent);
      color: var(--color-accent);
    }
  }
}

.lp_contents {
  & .layout-columns {
    @media (min-width: 781px) {
      display: grid;
    }

    &.layout-columns--col-3 {
      @media (min-width: 781px) {
        grid-template-columns: 1fr calc(var(--artboard-pw) * var(--rem-pc)) 1fr;
      }
    }

    &.layout-columns--col-2 {
      @media (min-width: 781px) {
        grid-template-columns: 1fr calc(var(--artboard-pw) * var(--rem-pc));
      }
    }
  }

  & .layout-rail {
    display: none;

    @media (min-width: 781px) {
      position: sticky;
      top: 0;
      z-index: var(--z-sticky);
      display: grid;
      place-items: center;
      height: 100dvh;
      padding-top: var(--header-height, 0px);
    }
  }

  & .layout-primary {
    min-width: 0;
  }

  & .layout-inner {
    display: flow-root;
    width: calc(var(--artboard-sw) * var(--rem));
    margin-inline: auto;
  }
}