@charset "UTF-8";

/* 本番の共通CSSと干渉しないよう、すべて .container-inner-lineup 配下に限定している */

.container-inner-lineup {
  --red: #E60012;
  --text: #222;
  --sub: #666;
  --line: #E2DED8;
  --base: #F7F5F2;
  --gap: 20px;
  --header-h: 115px;

  width: 100%;
  overflow: hidden;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
  color: var(--text);
  line-height: 1.8;
  letter-spacing: 0.05em;
  background-color: #fff;
}

.container-inner-lineup *,
.container-inner-lineup *::before,
.container-inner-lineup *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container-inner-lineup img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.container-inner-lineup a {
  color: inherit;
  text-decoration: none;
}

.container-inner-lineup ul {
  list-style: none;
}

.container-inner-lineup .sp-only {
  display: none;
}

/* 共通：セクション見出し */
.container-inner-lineup .section-head {
  margin-bottom: 44px;
  text-align: center;
}

.container-inner-lineup .section-en {
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--red);
  margin-bottom: 8px;
}

.container-inner-lineup .section-title {
  position: relative;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  padding-bottom: 22px;
}

.container-inner-lineup .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 2px;
  background-color: var(--red);
  transform: translateX(-50%);
}

.container-inner-lineup .section-lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
}

/* 共通：メインボタン */
.container-inner-lineup .btn-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  min-height: 60px;
  margin: 0 auto;
  padding: 12px 48px;
  border-radius: 999px;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background-color 0.25s ease;
}

.container-inner-lineup .btn-main::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 18px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) skewX(45deg);
  transition: right 0.25s ease;
}

.container-inner-lineup .btn-main:hover {
  background-color: var(--red);
}

.container-inner-lineup .btn-main:hover::after {
  right: 18px;
}

/* FV */
.container-inner-lineup .fv {
  position: relative;
}

.container-inner-lineup .fv-visual {
  overflow: hidden;
}

/* 2人の中心（元画像の横57%付近）が左右中央に来るよう、少し拡大して左へずらす */
.container-inner-lineup .fv-visual img {
  display: block;
  width: 100%;
  height: clamp(480px, 46vw, 680px);
  object-fit: cover;
  object-position: 50% 75%;
  transform: translateX(-8.3%) scale(1.18);
}

.container-inner-lineup .fv-panel {
  position: relative;
  width: calc(100% - 80px);
  max-width: 800px;
  margin: -120px auto 0;
  padding: 44px 56px 40px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.container-inner-lineup .fv-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: #000;
}

.container-inner-lineup .fv-label span {
  display: inline;
}

.container-inner-lineup .fv-label::after {
  content: "";
  display: none;
  width: 32px;
  height: 2px;
  margin: 18px auto 0;
  background-color: var(--red);
}

.container-inner-lineup .fv-title {
  margin: 10px 0 24px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.container-inner-lineup .fv-title span {
  color: var(--red);
}

/* アンカーリンクのボタンに見えてしまうので、囲みも矢印も付けず、赤い下線だけ添える */
.container-inner-lineup .fv-note {
  display: inline-block;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
}

/* イントロ */
.container-inner-lineup .intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 20px 24px;
  text-align: center;
}

.container-inner-lineup .intro-text {
  font-size: 16px;
  line-height: 2.2;
}

.container-inner-lineup .intro-text + .intro-text {
  margin-top: 16px;
}

/* 目次 */
.container-inner-lineup .toc {
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.container-inner-lineup .toc-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--red);
}

.container-inner-lineup .toc-title::before,
.container-inner-lineup .toc-title::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: var(--red);
}

.container-inner-lineup .toc-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
}

.container-inner-lineup .toc-list a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 18px 12px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.container-inner-lineup .toc-list a::after {
  content: "";
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: translateX(-50%) rotate(45deg);
}

.container-inner-lineup .toc-num {
  font-family: "Jost", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--red);
}

.container-inner-lineup .toc-list a:hover {
  border-color: var(--red);
  background-color: #fff;
  color: var(--red);
}

/* 目次（追従） */
.container-inner-lineup .about,
.container-inner-lineup .lineup,
.container-inner-lineup .campaign,
.container-inner-lineup .coordinate {
  scroll-margin-top: calc(var(--header-h) + 48px);
}

.container-inner-lineup .toc-float {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  z-index: 100;
  max-width: calc(100% - 24px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, top 0.3s ease;
}

/* 下スクロールでヘッダーが隠れたとき、目次を画面上へ上げる */
.container-inner-lineup .toc-float.is-raised {
  top: 12px;
}

.container-inner-lineup .toc-float.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.container-inner-lineup .toc-float-list {
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.container-inner-lineup .toc-float-list::-webkit-scrollbar {
  display: none;
}

.container-inner-lineup .toc-float-list li {
  flex-shrink: 0;
}

.container-inner-lineup .toc-float-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.container-inner-lineup .toc-float-num {
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--red);
  transition: color 0.25s ease;
}

.container-inner-lineup .toc-float-list a:hover,
.container-inner-lineup .toc-float-list a.is-current {
  background-color: var(--red);
  color: #fff;
}

.container-inner-lineup .toc-float-list a:hover .toc-float-num,
.container-inner-lineup .toc-float-list a.is-current .toc-float-num {
  color: #fff;
}

/* ReDのインナーとは？ */
.container-inner-lineup .about {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 20px 88px;
}

.container-inner-lineup .about-block + .about-block,
.container-inner-lineup .feature-item + .about-block {
  margin-top: 80px;
}

.container-inner-lineup .about-label {
  width: fit-content;
  margin: 0 auto 32px;
  padding: 5px 1em;
  border-style: solid;
  border-color: var(--red);
  border-width: 2px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.15em;
  color: var(--red);
  text-align: center;
}

.container-inner-lineup .about-label--short {
  padding-inline: 2.2em;
}

.container-inner-lineup .about-text {
  font-size: 15px;
  line-height: 2;
}

.container-inner-lineup .about-text--center {
  text-align: center;
}

.container-inner-lineup .about-catch {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
}

/* コアテクノロジー */
.container-inner-lineup .about-tech {
  display: grid;
  grid-template-columns: 1fr 52%;
  grid-template-areas:
    "head img"
    "text img";
  align-content: center;
  column-gap: 56px;
  row-gap: 24px;
}

.container-inner-lineup .about-tech-head {
  grid-area: head;
  align-self: end;
}

.container-inner-lineup .about-tech-img {
  grid-area: img;
  align-self: center;
}

.container-inner-lineup .about-tech-img img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.container-inner-lineup .about-tech-text {
  grid-area: text;
}

.container-inner-lineup .about-tech-sub {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.container-inner-lineup .about-tech-logo {
  display: block;
  width: 280px;
  margin: 0 auto;
}

/* さらっと一枚で血行促進（このページの見出し・本文の尺に合わせる） */
.container-inner-lineup .feature-item-head {
  margin-bottom: 40px;
  text-align: center;
}

.container-inner-lineup .feature-item-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.container-inner-lineup .feature-item-text {
  font-size: 15px;
  line-height: 2;
}

.container-inner-lineup .feature-item-content {
  margin-top: 0;
  padding: 0;
}

.container-inner-lineup .feature-item-content-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.container-inner-lineup .feature-tech-head {
  text-align: center;
}

.container-inner-lineup .feature-tech-head .feature-col-text {
  margin-bottom: 0;
}

.container-inner-lineup .feature-tech-row {
  display: flex;
  align-items: center;
  gap: 56px;
}

.container-inner-lineup .feature-col-left {
  flex: 0 0 56%;
  width: 56%;
}

.container-inner-lineup .feature-col-right {
  flex: 0 0 44%;
  width: 44%;
  text-align: center;
}

.container-inner-lineup .feature-tech-title {
  width: fit-content;
  margin: 0 auto 32px;
  padding: 5px 1em;
  border-style: solid;
  border-color: var(--red);
  border-width: 2px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.15em;
  color: var(--red);
  text-align: center;
}

.container-inner-lineup .feature-col-label {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.container-inner-lineup .feature-logo {
  display: block;
  width: 280px;
  margin: 0 auto 24px;
}

.container-inner-lineup .feature-photo {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.container-inner-lineup .feature-col-text {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 2;
}

.container-inner-lineup .feature-col-heading {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
}

.container-inner-lineup .feature-diagram {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* 動画（ブラトップ特集と同じUI） */
.container-inner-lineup .movie {
  margin-top: 80px;
  margin-bottom: 80px;
}

.container-inner-lineup .movie-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border-radius: 20px;
  background-color: #F7F7F7;
}

.container-inner-lineup .movie-text {
  flex: 1;
  text-align: center;
}

.container-inner-lineup .movie-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #333333;
}

.container-inner-lineup .movie-thumb {
  position: relative;
  display: block;
  flex: 0 0 53%;
  width: 53%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000;
  cursor: pointer;
}

.container-inner-lineup .movie-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container-inner-lineup .movie-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.container-inner-lineup .movie-thumb:hover .movie-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.container-inner-lineup .movie-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container-inner-lineup .movie-modal[hidden] {
  display: none;
}

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

.container-inner-lineup .movie-modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.container-inner-lineup .movie-modal-inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  padding: 10px;
  background-color: #fff;
}

.container-inner-lineup .movie-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.container-inner-lineup .movie-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.container-inner-lineup .movie-modal-close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.container-inner-lineup .movie-modal-close::before,
.container-inner-lineup .movie-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 2px;
  background-color: #fff;
}

.container-inner-lineup .movie-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.container-inner-lineup .movie-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 効果効能 */
.container-inner-lineup .mechan {
  margin-top: 48px;
  color: var(--red);
}

.container-inner-lineup .mechan-title {
  margin-bottom: 25px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
}

.container-inner-lineup .mechan-title span {
  display: inline-block;
}

.container-inner-lineup .mechan-list {
  margin-top: 30px;
  margin-bottom: 5px;
  border: 2px solid var(--red);
  border-radius: 10px;
}

.container-inner-lineup .mechan-list-item {
  display: flex;
  position: relative;
  padding: 20px;
}

.container-inner-lineup .mechan-list-item:not(:last-child) {
  border-bottom: 2px solid var(--red);
}

.container-inner-lineup .mechan-list-item:not(:last-child)::before,
.container-inner-lineup .mechan-list-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(50% - 191.5px);
  width: 0;
  height: 0;
  border: 25px solid transparent;
  transform: translateX(-50%);
  pointer-events: none;
}

.container-inner-lineup .mechan-list-item:not(:last-child)::before {
  z-index: 2;
  top: calc(100% - 3px);
  border-top-color: #fff;
}

.container-inner-lineup .mechan-list-item:not(:last-child)::after {
  top: calc(100% - 1px);
  border-top-color: var(--red);
}

.container-inner-lineup .mechan-list-body {
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  padding-inline: 10px;
}

.container-inner-lineup .mechan-list-body::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 200px;
  height: 5px;
  background-color: #fff;
  transform: translateX(-50%);
}

.container-inner-lineup .mechan-list-item:last-child .mechan-list-body::after {
  content: none;
}

.container-inner-lineup .mechan-list-txt {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-align: center;
}

.container-inner-lineup .mechan-list-img {
  flex-shrink: 0;
  width: 383px;
}

.container-inner-lineup .mechan-list-img img {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.container-inner-lineup .mechan-note {
  font-size: 16px;
  letter-spacing: 0.05em;
  text-align: right;
}

.container-inner-lineup .mechan-subtitle {
  margin: 45px 0 25px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--red);
  text-align: center;
}

.container-inner-lineup .mechan-image {
  max-width: 820px;
  margin-inline: auto;
}

.container-inner-lineup .mechan-image img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

/* 素材 */
.container-inner-lineup .about-material {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.container-inner-lineup .about-material-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--base);
}

.container-inner-lineup .about-material-head {
  position: relative;
  padding: 40px 24px 0;
}

.container-inner-lineup .about-material-img {
  position: relative;
  width: 196px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.container-inner-lineup .about-material-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.container-inner-lineup .about-material-body {
  flex: 1;
  padding: 24px 36px 36px;
  text-align: center;
}

.container-inner-lineup .about-material-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.container-inner-lineup .about-material-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: 16px auto 18px;
  background-color: var(--red);
}

.container-inner-lineup .about-material-text {
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}

/* シーンや季節 */
.container-inner-lineup .about-scene {
  display: block;
  margin-top: 48px;
}

.container-inner-lineup .about-scene img {
  display: block;
  width: 100%;
}

.container-inner-lineup .about-more {
  margin-top: 40px;
}

/* ラインアップ */
.container-inner-lineup .lineup {
  padding: 88px 20px;
  background-color: var(--base);
}

.container-inner-lineup .lineup > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.container-inner-lineup .lineup-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 840px;
  margin-bottom: 64px;
}

.container-inner-lineup .lineup-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 60px;
  padding: 10px 36px 10px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.container-inner-lineup .lineup-nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: translateY(-75%) rotate(45deg);
}

.container-inner-lineup .lineup-nav a:hover {
  border-color: var(--red);
  color: var(--red);
}

.container-inner-lineup .lineup-group {
  scroll-margin-top: calc(var(--header-h) + 80px);
}

.container-inner-lineup .lineup-group + .lineup-group {
  margin-top: 80px;
}

.container-inner-lineup .lineup-group-title {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

.container-inner-lineup .lineup-group-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  border-top: 8px solid var(--red);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  transform: translateX(-50%);
}

.container-inner-lineup .lineup-more {
  margin-top: 40px;
}

/* アコーディオン */
.container-inner-lineup .acc + .acc {
  margin-top: 16px;
}

.container-inner-lineup .acc-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 14px 64px 14px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.container-inner-lineup .acc-btn::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 20px;
  margin-right: 14px;
  border-radius: 2px;
  background-color: var(--red);
}

.container-inner-lineup .acc-btn:hover {
  border-color: #BFB8AF;
}

.container-inner-lineup .acc-icon {
  position: absolute;
  top: 50%;
  right: 24px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.container-inner-lineup .acc-icon::before,
.container-inner-lineup .acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--text);
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.container-inner-lineup .acc-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.container-inner-lineup .acc-btn[aria-expanded="true"] .acc-icon::after {
  transform: translateY(-50%) rotate(0deg);
}

.container-inner-lineup .acc-panel {
  overflow: hidden;
  transition: height 0.4s ease;
}

.container-inner-lineup .acc-panel[hidden] {
  display: none;
}

.container-inner-lineup .acc-panel > * {
  margin-top: 20px;
  margin-bottom: 16px;
}

/* 商品カード */
.container-inner-lineup .item-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.container-inner-lineup .item {
  display: flex;
  flex-direction: column;
  width: calc((100% - var(--gap) * 3) / 4);
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.container-inner-lineup .item--wide {
  width: calc((100% - var(--gap)) / 2);
}

.container-inner-lineup .item-visual {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #f2f2f2;
}

.container-inner-lineup .item-visual img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* 2枚並びの画像を、通常カード1枚分の画像と同じ高さに揃える */
.container-inner-lineup .item--wide .item-visual {
  container-type: inline-size;
}

.container-inner-lineup .item--wide .item-visual img {
  height: calc((100cqw - var(--gap)) * 2 / 3);
  aspect-ratio: auto;
}

.container-inner-lineup .item-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 2px 12px;
  border-radius: 999px;
  background-color: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.container-inner-lineup .item-visual--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: repeating-linear-gradient(-45deg, #EEECE9 0 10px, #E6E3DF 10px 20px);
}

.container-inner-lineup .item-soon {
  padding: 10px 28px;
  border-radius: 999px;
  background-color: #fff;
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.container-inner-lineup .item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 24px;
  text-align: center;
}

.container-inner-lineup .item-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.container-inner-lineup .item-name span {
  display: block;
}

.container-inner-lineup .item-colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.container-inner-lineup .item-colors li {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
}

.container-inner-lineup .item-colors .is-white { background-color: #FFFFFF; }
.container-inner-lineup .item-colors .is-black { background-color: #030303; }
.container-inner-lineup .item-colors .is-beige { background-color: #C2B2A2; }
.container-inner-lineup .item-colors .is-greige { background-color: #CCBFB7; }
.container-inner-lineup .item-colors .is-greige02 { background-color: #B6A6A3; }
.container-inner-lineup .item-colors .is-charcoal { background-color: #635F62; }
.container-inner-lineup .item-colors .is-burgundy { background-color: #592637; }
.container-inner-lineup .item-colors .is-offwhite { background-color: #FFFCF7; }
.container-inner-lineup .item-colors .is-moss { background-color: #034F6B; }
.container-inner-lineup .item-colors .is-wine { background-color: #69222C; }
.container-inner-lineup .item-colors .is-gray { background-color: #4B4345; }
.container-inner-lineup .item-colors .is-pink { background-color: #E8CACE; }
.container-inner-lineup .item-colors .is-brown { background-color: #85695E; }

.container-inner-lineup .item-price {
  margin: 10px 0 18px;
  font-size: 16px;
  font-weight: 500;
}

.container-inner-lineup .item-price span {
  font-size: 12px;
}

.container-inner-lineup .item-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 220px;
  min-height: 42px;
  margin-top: auto;
  padding: 8px 32px;
  border: 1px solid var(--red);
  border-radius: 999px;
  background-color: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.container-inner-lineup .item-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.container-inner-lineup .item-btn:hover {
  background-color: #fff;
  color: var(--red);
}

.container-inner-lineup .item-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: auto;
}

.container-inner-lineup .item-btns .item-btn {
  flex: 1;
  max-width: 240px;
  margin-top: 0;
  padding-inline: 20px 32px;
}

/* レビュー（ReviCo）。中のスタイルは review.css（TOPページから移植） */
/* タブとレビュー枠をまとめて包む。角丸は白い枠側（review.css の .top-section--review--body-i）で持つ。
   overflow は、中のタブの margin-top がパネル側と相殺されないように残している */
.container-inner-lineup .review-slot {
  overflow: hidden;
}

/* お得な情報 */
.container-inner-lineup .campaign {
  padding: 88px 20px;
}

.container-inner-lineup .campaign-inner {
  max-width: 760px;
  margin: 0 auto;
}

.container-inner-lineup .campaign-title {
  margin-bottom: 32px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

.container-inner-lineup .campaign-title span {
  display: block;
  font-size: 18px;
}

/* おまとめ価格ページのFV */
.container-inner-lineup .campaign-visual {
  display: block;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.container-inner-lineup .campaign-visual-img img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 360px;
  object-fit: cover;
}

.container-inner-lineup .campaign-visual-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(600px, calc(100% - 48px));
  padding: 48px 0 44px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.container-inner-lineup .campaign-visual-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--red);
}

.container-inner-lineup .campaign-visual-title::before,
.container-inner-lineup .campaign-visual-title::after {
  content: "";
  flex-shrink: 0;
  width: 41px;
  height: 4px;
  margin-inline: -11px;
  background-color: var(--red);
}

.container-inner-lineup .campaign-visual-title::before {
  transform: rotate(62.85deg) scaleY(-1);
}

.container-inner-lineup .campaign-visual-title::after {
  transform: rotate(117.15deg);
}

.container-inner-lineup .campaign-visual-lead {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.container-inner-lineup .campaign-text {
  margin: 32px 0 48px;
  font-size: 15px;
  line-height: 2;
  text-align: center;
}

.container-inner-lineup .campaign-offer {
  position: relative;
  padding: 48px 32px 28px;
  border: 2px solid var(--red);
  border-radius: 12px;
}

.container-inner-lineup .campaign-offer-lead {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 4px 28px;
  border-radius: 999px;
  background-color: var(--red);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.container-inner-lineup .campaign-offer-lead::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  z-index: -1;
  width: 12px;
  height: 12px;
  background-color: var(--red);
  transform: translateX(-50%) rotate(45deg);
}

.container-inner-lineup .campaign-offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left body right";
  align-items: center;
  gap: 36px;
}

.container-inner-lineup .campaign-offer-items {
  display: flex;
  align-items: center;
  gap: 14px;
}

.container-inner-lineup .campaign-offer-items--left {
  grid-area: left;
  justify-content: flex-end;
}

.container-inner-lineup .campaign-offer-items--right {
  grid-area: right;
  justify-content: flex-start;
}

/* 画像は商品の周りの余白を切り落としてあるので、高さで揃える。
   ただしトップスと同じ高さだとレギンスだけ実物より短く見えるので、ボトムスは高めにする */
.container-inner-lineup .campaign-offer-items img {
  display: block;
  flex: none;
  width: auto;
  height: 96px;
}

.container-inner-lineup .campaign-offer-items--right img:last-child {
  height: 112px;
}

.container-inner-lineup .campaign-offer-body {
  grid-area: body;
  text-align: center;
}

.container-inner-lineup .campaign-offer-target {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.container-inner-lineup .campaign-offer-target span {
  margin-right: 2px;
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 500;
}

.container-inner-lineup .campaign-offer-note {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sub);
  text-align: center;
}

.container-inner-lineup .campaign-offer-rate {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  color: var(--red);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
}

.container-inner-lineup .campaign-offer-num {
  font-size: 72px;
  letter-spacing: 0.02em;
}

.container-inner-lineup .campaign-offer-off {
  font-size: 44px;
}

.container-inner-lineup .campaign-merit {
  margin-top: 56px;
}

.container-inner-lineup .campaign-merit-title {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.container-inner-lineup .campaign-merit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.container-inner-lineup .campaign-merit-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-radius: 8px;
  background-color: var(--base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.container-inner-lineup .campaign-merit-list span {
  flex-shrink: 0;
  font-family: "Jost", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--red);
}

.container-inner-lineup .campaign-copy {
  margin: 56px 0 24px;
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
  text-align: center;
}

/* おすすめの組み合わせ */
.container-inner-lineup .coordinate {
  padding: 0 20px 88px;
  background-color: var(--base);
}

.container-inner-lineup .coordinate-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
}

.container-inner-lineup .coordinate-item {
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}

.container-inner-lineup .coordinate-scene img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.container-inner-lineup .coordinate-body {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.container-inner-lineup .coordinate-product {
  flex: 0 0 112px;
  margin-top: -64px;
  border: 4px solid #fff;
  border-radius: 8px;
  background-color: #ECEBE9;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.container-inner-lineup .coordinate-product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.container-inner-lineup .coordinate-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.container-inner-lineup .coordinate-name span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--sub);
}

.container-inner-lineup .coordinate-cta {
  margin-top: 64px;
  text-align: center;
}

/* タブレット */
@media screen and (max-width: 1024px) {
  .container-inner-lineup .mechan-list-item:not(:last-child)::before,
  .container-inner-lineup .mechan-list-item:not(:last-child)::after {
    left: calc(50% - 150px);
  }

  .container-inner-lineup .mechan-list-txt {
    font-size: 19px;
  }

  .container-inner-lineup .mechan-list-img {
    width: 300px;
  }

  .container-inner-lineup .fv-panel {
    margin-top: -96px;
    padding: 36px 32px 32px;
  }

  .container-inner-lineup .fv-title {
    font-size: 28px;
  }

  .container-inner-lineup .about-tech {
    column-gap: 36px;
  }

  .container-inner-lineup .toc-float-list a {
    gap: 6px;
    padding: 10px 14px;
    font-size: 12px;
  }

  .container-inner-lineup .about-material {
    gap: 24px;
  }

  .container-inner-lineup .about-material-body {
    padding: 22px 24px 28px;
  }

  .container-inner-lineup .coordinate-list {
    gap: 20px;
  }

  .container-inner-lineup .coordinate-body {
    gap: 14px;
    padding: 16px;
  }

  .container-inner-lineup .coordinate-product {
    flex-basis: 96px;
  }
}