/* ========================================
slick
======================================== */

/* LINEUPslick
============================== */
.LINEUPslick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}

.LINEUPslick-slider.LINEUPslick-initialized {
  max-height: none;
}

.LINEUPslick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.LINEUPslick-list:focus {
  outline: none;
}

.LINEUPslick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.LINEUPslick-slider .LINEUPslick-track,
.LINEUPslick-slider .LINEUPslick-list {
  transform: translate3d(0, 0, 0);
}

.LINEUPslick-track {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

.LINEUPslick-vertical .LINEUPslick-track {
  display: block;
}

.LINEUPslick-loading .LINEUPslick-track {
  visibility: hidden;
}

.LINEUPslick-loading .LINEUPslick-track {
  visibility: hidden;
}

.LINEUPslick-slide {
  display: none;
  min-height: 1px;
}

.LINEUPslick-slide a {
  outline: none;
}

[dir="rtl"] .LINEUPslick-slide {
  float: right;
}

.LINEUPslick-slide img {
  display: block;
  width: 100%;
}

.LINEUPslick-slide.LINEUPslick-loading img {
  display: none;
}

.LINEUPslick-slide.dragging img {
  pointer-events: none;
}

.LINEUPslick-initialized .LINEUPslick-slide {
  display: block;
  outline: none;
}

.LINEUPslick-loading .LINEUPslick-slide {
  visibility: hidden;
}

.LINEUPslick-vertical .LINEUPslick-slide {
  display: block;
  height: auto;
}

/* Arrows */
.LINEUPslick-arrow {
  position: relative;
  top: 0;
  z-index: 10;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  outline: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--key-color);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: all .2s ease-out;
  appearance: none;
}

.LINEUPslick-arrow:hover {
  opacity: .7;
}

.LINEUPslick-arrow.LINEUPslick-next {
  order: 1;
}

.LINEUPslick-arrow svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dots */
.LINEUPslick-dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8px + var(--slope-1px) * 2);
  width: 100%;

  --color: var(--base-color);
}

.LINEUPslick-dots > li {
  display: block;
  opacity: 1;
}

.LINEUPslick-dots > li button {
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  width: 9px;
  aspect-ratio: 1 / 1;
  padding: 0;
  outline: none;
  border: 1px solid var(--color);
  border-radius: 100%;
  background: transparent;
  font-size: 0;
  cursor: pointer;
  appearance: none;
}

.LINEUPslick-dots > li.LINEUPslick-active button {
  background: var(--color);
}

/* ========================================
styles
======================================== */

/* LINEUP-ROOT
============================== */
.LINEUP-ROOT {
  --vw: 1vw;
  --slope-1px: clamp(0px, -0.95663px + 0.2551vw, 1px);
  --leading-trim: calc((1em - 1lh) / 2);
  --inner-padding: 15px;
  --icon-zoom: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.18 22.28"><path fill="%23fff" fill-rule="nonzero" d="M9.86 19.8a9.91 9.91 0 0 1 0-19.82 9.92 9.92 0 0 1 6.97 16.92 1.23 1.23 0 0 1-1.74-1.75 7.47 7.47 0 0 0 0-10.51 7.32 7.32 0 0 0-5.23-2.18 7.43 7.43 0 0 0 0 14.87 8.02 8.02 0 0 0 1.94-.26 1.24 1.24 0 0 1 .63 2.39 9.7 9.7 0 0 1-2.57.34Zm11.09 2.48a1.22 1.22 0 0 1-.87-.36l-4.99-5.02a1.23 1.23 0 0 1 1.74-1.75l4.99 5.02a1.24 1.24 0 0 1-.87 2.11Zm-8.01-11.15H6.78a1.24 1.24 0 1 1 0-2.48h6.16a1.24 1.24 0 0 1 0 2.48Zm-3.08 3.1a1.25 1.25 0 0 1-1.24-1.24V6.8a1.24 1.24 0 1 1 2.47 0v6.19a1.24 1.24 0 0 1-1.23 1.24Z"/></svg>');
  container: CMN-LINEUP / inline-size;
  box-sizing: border-box;
  color: var(--base-color, #333);
  line-height: 1.75;
}

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

.LINEUP-ROOT *[data-lineup-anchor-id] {
  scroll-margin-top: var(--header-height, 0px);
}

.LINEUP-ROOT img {
  display: block;
  max-width: 100%;
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-ROOT * {
    --slope-1px: clamp(0px, -0.95663px + 0.2551cqw, 1px);
  }
}

/* LINEUP-COMMON-models
=============================== */
.LINEUP-COMMON-models {
  margin-top: calc(25px + var(--slope-1px) * 25);
}

.LINEUP-COMMON-models__head {
  font-size: calc(18px + var(--slope-1px) * 2);
  font-weight: bold;
  margin-top: var(--leading-trim);
  margin-bottom: 1em;
}

/* LINEUP-COMMON-list
=============================== */
.LINEUP-COMMON-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(140px + var(--slope-1px) * 110), 1fr));
  gap: calc(7px + var(--slope-1px) * 6);
}

/* LINEUP-COMMON-car
=============================== */
.LINEUP-COMMON-car {
  border: 1px solid var(--border-color, #ccc);
  background: #fff;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(20px + var(--slope-1px) * 10) calc(10px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 5);
}

.LINEUP-COMMON-car__head {
  margin-bottom: 1.5em;
  min-height: 0%;
}

.LINEUP-COMMON-car__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.LINEUP-COMMON-car__name {
  font-size: calc(14px + var(--slope-1px) * 3);
  font-weight: bold;
  text-align: center;
  line-height: 1.41176;
  margin-top: var(--leading-trim);
  padding-bottom: 0.70588em;
  border-bottom: 1px solid var(--border-color, #ccc);
  margin-bottom: 1em;
}

.LINEUP-COMMON-car__name span {
  display: inline-block;
}

.LINEUP-COMMON-car__text {
  flex-grow: 1;
  font-size: calc(12px + var(--slope-1px) * 2);
  margin-block: var(--leading-trim);
  line-height: 1.71429;
  align-self: center;
}

.LINEUP-COMMON-car__foot {
  margin-top: calc(14px + var(--slope-1px) * 10);
}

.LINEUP-COMMON-car__link + .LINEUP-COMMON-car__link {
  margin-top: calc(5px + var(--slope-1px) * 4);
}

.LINEUP-COMMON-car__button {
  font-size: calc(13px + var(--slope-1px) * 2);
  font-weight: bold;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 3.33333em;
  width: 100%;
  height: 3.33333em;
  color: #fff;
  background: var(--key-color, #c00);
  border: 0;
  transition: all .3s ease-out;
}

@container CMN-LINEUP (width > 768px) {
  .LINEUP-COMMON-car__button {
    max-width: 13.33333em;
  }
}

.LINEUP-COMMON-car__button > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .9em;
  height: .9em;
  margin-left: .35em;
}

.LINEUP-COMMON-car__button:hover {
  opacity: .7;
}

.LINEUP-COMMON-car__button._detail {
  background: transparent;
  border: 1px solid var(--base-color, #333);
  color: var(--base-color, #333);
}

.LINEUP-COMMON-car__button._detail:hover {
  opacity: 1;
  background: var(--base-color, #333);
  color: #fff;
}

.LINEUP-COMMON-car__button.is-disabled {
  opacity: .2;
  pointer-events: none;
}

/* LINEUP-DETAIL-contents
============================== */
.LINEUP-DETAIL-contents {
  position: relative;
  padding-block: calc(40px + var(--slope-1px) * 20);
}

.LINEUP-DETAIL-contents:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(50% - var(--vw) * 50);
  width: calc(var(--vw) * 100);
  height: 100%;
  background: var(--bg-color, #f2f2f2);
}

.LINEUP-DETAIL-contents__inner {
  --inner-padding: calc(15px + var(--slope-1px) * 45);
  --paddding-inline: min(var(--inner-padding), calc((var(--vw) * 100 - 100cqw) / 4));
  position: relative;
  background: #fff;
  padding: calc(25px + var(--slope-1px) * 15) var(--paddding-inline) calc(36px + var(--slope-1px) * 44);
  border-radius: 10px;
  width: calc(100% + var(--paddding-inline) * 2);
  left: calc(var(--paddding-inline) * -1);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-contents__inner {
    --inner-padding: calc(15px + var(--slope-1px) * 15);
    --paddding-inline: var(--inner-padding);
    width: 100%;
    left: 0;
  }
}

/* LINEUP-DETAIL-header
============================== */
.LINEUP-DETAIL-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: calc(24px + var(--slope-1px) * 2);
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.LINEUP-DETAIL-header__carname {
  font-size: calc(24px + var(--slope-1px) * 8);
  font-weight: bold;
  margin-block: var(--leading-trim);
  line-height: 1.2;
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-header__carname {
    margin-bottom: 0;
    padding-bottom: .2em;
    border-bottom: 1px solid var(--border-color, #ccc);
  }
}

.LINEUP-DETAIL-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px calc(26px + var(--slope-1px) * 4);
}

/* LINEUP-DETAIL-anchor
============================== */
.LINEUP-DETAIL-anchor {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-block: var(--leading-trim);
  font-size: calc(14px + var(--slope-1px) * 1);
  font-weight: 500;
  transition: opacity .2s;
}

.LINEUP-DETAIL-anchor:hover {
  opacity: .7;
}

.LINEUP-DETAIL-anchor:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1px solid #636363;
  border-bottom: 1px solid #636363;
  border-bottom-right-radius: 1px;
  rotate: 45deg;
  translate: 0 -2px;
}

body:not(:has(.LINEUP-DETAIL-campaign)) .LINEUP-DETAIL-anchor[href="#campaign"] {
  display: none;
}

/* LINEUP-DETAIL-anchor-button
============================== */
.LINEUP-DETAIL-anchor-button {
  width: 185px;
  height: 44px;
  border-radius: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  gap: 10px;
  color: #fff;
  position: relative;
  background: var(--key-color, #c00);
  transition: opacity .2s;
}

.LINEUP-DETAIL-anchor-button:hover {
  opacity: .8;
}

.LINEUP-DETAIL-anchor-button:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-bottom-right-radius: 1px;
  rotate: 45deg;
  translate: 0 -2px;
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-anchor-button {
    width: 100%;
  }
  .LINEUP-DETAIL-anchor-button:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.5em;
    margin: auto 0;
  }
}

/* LINEUP-DETAIL-image
============================== */
.LINEUP-DETAIL-image__main img {
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
}

.LINEUP-DETAIL-image__sub {
  margin-top: calc(12px + var(--slope-1px) * 4);
}

/* LINEUP-DETAIL-thumb
============================== */
.LINEUP-DETAIL-thumb__list {
  width: 100%;
  display: grid;
  gap: calc(7px + var(--slope-1px) * 9);
  grid-template-columns: repeat(3, 1fr);
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-thumb__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.LINEUP-DETAIL-thumb__item a {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 10px;
  transition: opacity .2s;
  position: relative;
}

.LINEUP-DETAIL-thumb__item a:hover {
  opacity: .7;
}

.LINEUP-DETAIL-thumb__item a:before {
  content: "";
  display: block;
  width: 100%;
  height: 31.91489%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(51, 51, 51, 0.6) 0%, rgba(51, 51, 51, 0) 100%);
}

.LINEUP-DETAIL-thumb__item a:after {
  content: "";
  width: calc(16px + var(--slope-1px) * 6);
  height: calc(16px + var(--slope-1px) * 6);
  background: var(--icon-zoom) 50% 50%/contain no-repeat;
  position: absolute;
  right: calc(10px + var(--slope-1px) * 5);
  bottom: calc(10px + var(--slope-1px) * 5);
}

.LINEUP-DETAIL-thumb__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.LINEUP-DETAIL-thumb__item p {
  display: none;
}

/* LINEUP-DETAIL-button
============================== */
.LINEUP-DETAIL-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  appearance: none;
  outline: none;
  font-size: calc(14px + var(--slope-1px) * 1);
  border: 1px solid;
  border-radius: 44px;
  width: 240px;
  height: 44px;
  background: transparent;
  color: inherit;
  position: relative;
  max-width: min(240px, 100%);
}

.LINEUP-DETAIL-button[data-lineup-toggle-for]:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 23px;
  margin-block: auto;
  width: 10px;
  height: 10px;
  background: linear-gradient(to left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

.LINEUP-DETAIL-button[data-lineup-toggle-for].is-expanded:after {
  background: linear-gradient(to bottom, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

/* LINEUP-DETAIL-overview
============================== */
.LINEUP-DETAIL-overview {
  width: 820px;
  max-width: 100%;
  margin-inline: auto;
  margin-top: calc(48px + var(--slope-1px) * 17);
}

.LINEUP-DETAIL-overview__lead {
  font-size: calc(20px + var(--slope-1px) * 6);
  font-weight: bold;
  line-height: 1.7;
  margin-block: var(--leading-trim);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.LINEUP-DETAIL-overview__text {
  font-size: calc(14px + var(--slope-1px) * 2);
  margin-top: 1.875em;
  margin-bottom: var(--leading-trim);
}

.LINEUP-DETAIL-overview__nav {
  display: grid;
  gap: 16px 32px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: calc(38px + var(--slope-1px) * 32);
}

.LINEUP-DETAIL-overview__nav:not(:has(.LINEUP-DETAIL-hinted-button)) {
  display: none;
}

@container CMN-LINEUP (width > 768px) {
  .LINEUP-DETAIL-overview__nav:not(:has(.LINEUP-DETAIL-hinted-button:nth-child(2))) {
    grid-template-columns: 100%;
    max-width: 50%;
    margin-inline: auto;
  }
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-overview__nav {
    grid-template-columns: 100%;
  }
}

/* LINEUP-DETAIL-hinted-button
============================== */
.LINEUP-DETAIL-hinted-button {
  text-decoration: none;
  margin-top: 24px;
  position: relative;
}

.LINEUP-DETAIL-hinted-button__sub {
  display: block;
  text-align: center;
  font-size: calc(12px + var(--slope-1px) * 1);
  color: currentColor;
  margin-block: var(--leading-trim) calc(var(--leading-trim) + 10px);
  z-index: 1;
}

.LINEUP-DETAIL-hinted-button__main {
  width: 100%;
  font-size: calc(17px + var(--slope-1px) * 5);
  height: calc(60px + var(--slope-1px) * 12);
  border-radius: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  position: relative;
  border: 1px solid var(--base-color, #333);
  background: #fff;
  color: currentColor;
  transition: all .3s ease-out;
}

.LINEUP-DETAIL-hinted-button:hover .LINEUP-DETAIL-hinted-button__main {
  opacity: .8;
}

.LINEUP-DETAIL-hinted-button._filled .LINEUP-DETAIL-hinted-button__main {
  border: 0;
  background: var(--key-color, #c00);
  color: #fff;
}

.LINEUP-DETAIL-hinted-button[data-lineup-anchor-for] .LINEUP-DETAIL-hinted-button__main:after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-bottom-right-radius: 1px;
  rotate: 45deg;
  translate: 0 -2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(20px + var(--slope-1px) * 30);
  margin: auto 0;
}

/* LINEUP-DETAIL-banner
============================== */
.LINEUP-DETAIL-banner {
  font-size: calc(14px + var(--slope-1px) * 2);
  text-decoration: none;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 60px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #ccc);
  width: 100%;
  padding: 50px;
  margin-top: calc(32px + var(--slope-1px) * 8);
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-banner {
    padding: 23px;
    grid-template-columns: 100%;
  }
}

.LINEUP-DETAIL-banner__image img {
  width: 300px;
  max-width: 100%;
  margin-inline: auto;
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-banner__contents {
    max-width: fit-content;
    width: 100%;
    justify-self: center;
  }
}

.LINEUP-DETAIL-banner__head {
  font-size: calc(18px + var(--slope-1px) * 6);
  font-weight: bold;
  margin-block: var(--leading-trim);
  line-height: 1.25;
}

.LINEUP-DETAIL-banner__body {
  margin-top: 1em;
}

.LINEUP-DETAIL-banner__foot {
  text-decoration: underline;
}

.LINEUP-DETAIL-banner:hover .LINEUP-DETAIL-banner__foot {
  text-decoration: none;
}

/* LINEUP-DETAIL-bodycolor
============================== */
.LINEUP-DETAIL-bodycolor {
  margin-top: calc(40px + var(--slope-1px) * 26);
  padding-top: calc(47px + var(--slope-1px) * 33);
  border-top: 1px solid var(--border-color, #ccc);
  overflow: hidden;
}

/* LINEUP-DETAIL-bodycolor-list
============================== */
.LINEUP-DETAIL-bodycolor-list {
  width: calc(630px + var(--slope-1px) * 210);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible !important;
  margin-bottom: calc(30px + var(--slope-1px) * 5);
  display: block;
}

.LINEUP-DETAIL-bodycolor-list .LINEUPslick-list {
  overflow: visible;
}

.LINEUP-DETAIL-bodycolor-list .LINEUPslick-track {
  overflow: hidden;
}

.LINEUP-DETAIL-bodycolor-list__item {
  font-size: calc(12px + var(--slope-1px) * 2);
  padding: 0 2em;
}

.LINEUP-DETAIL-bodycolor-list .LINEUPslick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: block;
}

/* LINEUP-DETAIL-bodycolor-item
============================== */
.LINEUP-DETAIL-bodycolor-item {
  width: 100%;
  text-align: center;
}

.LINEUP-DETAIL-bodycolor-item span {
  display: block;
  margin-top: 1em;
}

/* LINEUP-slick-control
============================== */
.LINEUP-slick-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.LINEUP-slick-control .LINEUPslick-arrow {
  border: 0;
  border-radius: 0;
  background: none;
  appearance: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .2s ease-out;
}

.LINEUP-slick-control .LINEUPslick-arrow:hover {
  opacity: .7;
}

.LINEUP-slick-control .LINEUP-slick-prev {
  order: -1;
  rotate: 180deg;
}

.LINEUP-slick-control .LINEUP-slick-next {
  order: 1;
}

.LINEUP-slick-control .LINEUP-slick-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.LINEUP-slick-control .LINEUP-slick-dots button {
  display: block;
  appearance: none;
  outline: none;
  border: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  font-size: 0;
  border-radius: 8px;
  background: var(--border-color, #ccc);
  cursor: pointer;
  transition: opacity .2s ease-out;
}

.LINEUP-slick-control .LINEUP-slick-dots button:hover {
  opacity: .7;
}

.LINEUP-slick-control .LINEUP-slick-dots .LINEUPslick-active button {
  background: var(--key-color, #c00);
}

/* LINEUP-DETAIL-section-wrapper
============================== */
.LINEUP-DETAIL-section-wrapper {
  padding-block: calc(40px + var(--slope-1px) * 40);
}

/* LINEUP-DETAIL-section
============================== */
.LINEUP-DETAIL-section:not(:first-child) {
  margin-top: calc(68px + var(--slope-1px) * 26);
}

.LINEUP-DETAIL-section__head {
  margin-bottom: calc(26px + var(--slope-1px) * 6);
}

/* LINEUP-DETAIL-title
============================== */
.LINEUP-DETAIL-title {
  font-size: calc(22px + var(--slope-1px) * 4);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: var(--leading-trim);
}

.LINEUP-DETAIL-title span {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* LINEUP-DETAIL-caution
============================== */
.LINEUP-DETAIL-caution {
  margin-top: calc(40px + var(--slope-1px) * 8);
}

.LINEUP-DETAIL-caution__toggle {
  display: flex;
  justify-content: center;
}

.LINEUP-DETAIL-caution__body {
  font-size: calc(12px + var(--slope-1px) * 1);
  line-height: 2;
  margin-top: 1.5em;
  display: none;
}

.LINEUP-DETAIL-caution__text a {
  text-decoration: underline;
}

.LINEUP-DETAIL-caution__text a:hover {
  text-decoration: none;
}

.LINEUP-DETAIL-caution__text > p {
  margin-block: var(--leading-trim);
}

.LINEUP-DETAIL-caution__text > p + p {
  margin-top: 2em;
}

/* LINEUP-DETAIL-tab
============================== */

.LINEUP-DETAIL-tab {
  margin-bottom: calc(32px + var(--slope-1px) * 8);
  border-bottom: 1px solid var(--border-color, #ccc);
  display: flex;
  justify-content: center;
  gap: calc(24px + var(--slope-1px) * 8);
}

.LINEUP-DETAIL-tab__button {
  font-size: calc(13px + var(--slope-1px) * 4);
  font-weight: 700;
  line-height: 1;
  background: transparent;
  appearance: none;
  outline: none;
  color: currentColor;
  padding: 0 0 1em;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.LINEUP-DETAIL-tab__button.is-current {
  color: var(--key-color, #c00);
  border-bottom-color: currentColor;
  pointer-events: none;
}

.LINEUP-DETAIL-tab-conatiner {
  display: none;
}

.LINEUP-DETAIL-tab-conatiner.is-current {
  display: block;
}

.LINEUP-DETAIL-tab-conatiner > p:not(:first-child) {
  display: none;
}


/* LINEUP-DETAIL-campaign
============================== */
.LINEUP-DETAIL-campaign .CMN-CMP-link {
  display: block;
  text-decoration: none;
  transition: opacity .2s ease-out;
}

.LINEUP-DETAIL-campaign .CMN-CMP-link:hover {
  opacity: .7;
}

.LINEUP-DETAIL-campaign__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(28px + var(--slope-1px) * 6);
}

@container CMN-LINEUP (width < 768px) {
  .LINEUP-DETAIL-campaign__list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

.LINEUP-DETAIL-campaign__item {
  max-width: 360px;
  justify-self: center;
}

.LINEUP-DETAIL-campaign__text {
  font-weight: 500;
  font-size: calc(14px + var(--slope-1px) * 1);
  margin-top: 1em;
  margin-bottom: var(--leading-trim);
  line-height: 1.71429;
}

/* LINEUP-DETAIL-modal
============================== */
.LINEUP-DETAIL-modal {
  position: fixed;
  z-index: 999999;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  --inner-padding: 50px;
  display: block;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s, visibility .4s;
}

.LINEUP-DETAIL-modal.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal {
    --inner-padding: 30px;
  }
}

.LINEUP-DETAIL-modal__padding {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.LINEUP-DETAIL-modal__inner {
  width: 1100px;
  max-width: 96%;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal__inner {
    position: relative;
  }
}

.LINEUP-DETAIL-modal__body {
  overflow-y: auto;
  max-height: 100svh;
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal__body {
    margin-top: 50px;
    max-height: calc(100svh - 50px);
  }
}

.LINEUP-DETAIL-modal__close {
  position: absolute;
  top: 30px;
  right: 30px;
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal__close {
    top: 10px;
    right: var(--inner-padding);
  }
}

.LINEUP-DETAIL-modal__close button {
  width: 30px;
  height: 30px;
  font-size: 0;
  appearance: none;
  outline: none;
  border: 0;
  color: #fff;
  rotate: 45deg;
  cursor: pointer;
  background: linear-gradient(to left, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(to bottom, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal__close button {
    width: 20px;
    height: 20px;
  }
}

/* LINEUP-DETAIL-modal-slider
============================== */
.LINEUP-DETAIL-modal-slider {
  padding-inline: var(--inner-padding);
}

.LINEUP-DETAIL-modal-slider .LINEUPslick-list {
  border-radius: 10px;
}

.LINEUP-DETAIL-modal-slider__item {
  position: relative;
}

.LINEUP-DETAIL-modal-slider__item > img {
  width: 100%;
  border-radius: 10px;
}

.LINEUP-DETAIL-modal-slider__item > p {
  padding-top: 16px;
  color: #fff;
  font-size: calc(13px + var(--slope-1px) * 3);
  line-height: calc(22px + var(--slope-1px) * 6);
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .LINEUP-DETAIL-modal-slider__item > p {
    background: rgba(0, 0, 0, 0.4);
    padding: 20px 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

.LINEUP-DETAIL-modal-slider .LINEUPslick-arrow {
  border: 0;
  border-radius: 0;
  background: none;
  appearance: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s ease-out;
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal-slider .LINEUPslick-arrow {
    width: 23px;
    height: 23px;
  }
}

.LINEUP-DETAIL-modal-slider .LINEUPslick-arrow:hover {
  opacity: .7;
}

.LINEUP-DETAIL-modal-slider-prev {
  position: absolute;
  left: 0;
  top: 0;
  margin-top: calc(25% - var(--inner-padding) * 0.5);
  transform: translateY(-50%);
}

.LINEUP-DETAIL-modal-slider-prev svg {
  rotate: 180deg;
}

.LINEUP-DETAIL-modal-slider-next {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: calc(25% - var(--inner-padding) * 0.5);
  transform: translateY(-50%);
}

.LINEUP-DETAIL-modal-slider-thumb {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .LINEUP-DETAIL-modal-slider-thumb {
    margin-top: 30px;
    grid-template-columns: repeat(2, 1fr);
  }
}

.LINEUP-DETAIL-modal-slider-thumb > li {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 10px;
}

.LINEUP-DETAIL-modal-slider-thumb > li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}