:root {
  interpolate-size: allow-keywords;

  --color-bg-base:    #031018;
  --color-bg-intro:   #b5def7;
  --color-bg-driver:  #d0f1ff;
  --gradient-seller:  linear-gradient(to bottom, #103c6b, #0e2544);

  --color-navy:       #0f2848;
  --color-blue:       #006bde;
  --color-blue-deep:  #00357a;
  --color-sky:        #00b7ff;
  --color-ice:        #a2e5ff;
  --color-ice-pale:   #b1eaff;
  --color-ice-note:   #cdf1ff;
  --color-accent:     #ade8ff;

  --color-white:      #ffffff;
  --color-black:      #000000;
  --color-gray-light: #f1f1f1;
  --color-gray-tab:   #e1e1e1;
  --color-gray-mid:   #c3c3c3;
  --color-gray:       #999999;
  --color-copyright:  #80808c;
  --color-tab-hover:  #cbe3f0;
  --color-note-bg:    rgba(255,255,255,0.15);
  --shadow-card-sp:   2px 2px 2px rgba(15,40,72,0.10);
  --shadow-card-pc:   5px 5px 5px rgba(15,40,72,0.20);

  --font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-jp:    "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans", sans-serif;
  --font-en:    "Inter", sans-serif;
  --font-num:   "Barlow Condensed", "Inter", sans-serif;

  --container-sp: 335px;
  --container-pc: 1200px;
  --section-px:   clamp(32px, 8.334vw, 120px);
  --header-h: 50px;
  --nav-h:    44px;
}
@media (min-width: 769px) {
  :root { --header-h: 70px; --nav-h: 0px; }
}

html { scroll-padding-top: calc(var(--header-h) + var(--nav-h)); }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ============================================
   UTILITY
   ============================================ */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.u-reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(.2,.7,.2,1),
    transform 0.7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.u-reveal-up.is-revealed {
  opacity: 1;
  transform: none;
}

.u-reveal-chars { display: block; }
.u-reveal-chars__c {
  display: inline-block;
  transform: scaleY(0.2) translateY(10px);
  filter: blur(6px);
  opacity: 0;
  transform-origin: bottom;
  transition:
    transform 0.7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 35ms),
    filter    0.7s ease                     calc(var(--i) * 35ms),
    opacity   0.7s ease                     calc(var(--i) * 35ms);
}
.u-reveal-chars.is-revealed .u-reveal-chars__c {
  transform: none; filter: blur(0); opacity: 1;
}

/* ============================================
   LAYOUT / COMMON
   ============================================ */
.l-container { width: min(var(--container-sp), 100%); margin: 0 auto; }
.l-container--fluid { width: 100%; }
@media (min-width: 769px) {
  .l-container { width: var(--container-pc); max-width: 100%; }
}

.intro,
.driver,
.review,
.seller,
.contents {
  padding: 50px 20px;
}
.driver   { padding-bottom: 20px; }
.review   { padding-top: 20px; }
.contents { padding-top: 60px; }
@media (min-width: 769px) {
  .driver, .review, .seller, .contents {
    padding: 100px var(--section-px);
  }
  .intro {
    padding: 80px var(--section-px);
  }
  .driver   { padding-bottom: 40px; }
  .review   { padding-top: 40px; }
  .contents { padding-bottom: 50px; }
}

.c-eyebrow {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-blue);
  margin-bottom: 8px;
}
.c-eyebrow--light { color: var(--color-ice-pale); }

.c-section-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-navy);
  margin-bottom: 24px;
}
.c-section-heading--light { color: var(--color-white); }

@media (min-width: 769px) {
  .c-eyebrow         { font-size: 18px; }
  .c-section-heading { font-size: 48px; margin-bottom: 50px; }
}

.c-slider-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.c-slider-arrow svg { width: 100%; height: 100%; }
.c-slider-arrow--fill { border: 0; }
.c-slider-arrow:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 769px) {
  .c-slider-arrow { width: 45px; height: 45px; border-width: 2.5px; }
}

.c-slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.c-slider-dots__dot {
  flex: none;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-navy);
  transition: background 0.3s ease;
}
.c-slider-dots__dot[aria-current="true"] { background: var(--color-navy); }
@media (min-width: 769px) {
  .c-slider-dots { gap: 8px; }
  .c-slider-dots__dot { width: 10px; height: 10px; }
}

.c-accordion__head {
  position: relative;
  display: block;
}
.c-accordion__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}
.c-accordion__icon::before,
.c-accordion__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
}
.c-accordion__icon::before { width: 10px; height: 1.5px; }
.c-accordion__icon::after  { width: 1.5px; height: 10px; transition: transform 0.3s ease; }
.c-accordion[open] .c-accordion__icon::after { transform: scaleY(0); }
.c-accordion::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.c-accordion[open]::details-content { block-size: auto; }

/* ============================================
   HEADER
   ============================================ */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--color-bg-base);
}
.l-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.l-header__logo img {
  display: block;
  width: 112px;
  height: 24px;
}
.l-header__nav,
.l-header__actions { display: none; }

.l-header__menu-btn {
  position: relative;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
}
.l-header__menu-btn > span {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.375s ease;
}
.l-header__menu-btn > span:nth-child(1) { transform: translateY(-4px); }
.l-header__menu-btn > span:nth-child(2) { transform: translateY(4px); transition-delay: 0.1s; }
.l-header.is-menu-open .l-header__menu-btn > span:nth-child(1) { transform: rotate(-30deg); }
.l-header.is-menu-open .l-header__menu-btn > span:nth-child(2) { transform: rotate(30deg); }

.l-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--color-bg-base);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.625s ease, visibility 0s linear 0.625s;
}
.l-header.is-menu-open .l-menu {
  transform: none;
  visibility: visible;
  transition: transform 0.625s ease, visibility 0s;
}
.l-menu__list {
  display: grid;
  gap: 40px;
  justify-items: center;
  padding: 40px 20px;
}
.l-menu__link {
  display: block;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.125s ease;
}
html.is-menu-open { overflow: hidden; }

@media (min-width: 769px) {
  .l-header__inner {
    padding: 0 clamp(20px, 3.125vw, 45px) 0 clamp(20px, 2.083vw, 30px);
  }
  .l-header__logo { flex-shrink: 0; }
  .l-header__logo img { width: 140px; height: 30px; }
  .l-header__menu-btn,
  .l-menu { display: none; }
  .l-header__nav { display: block; margin: 0 auto; }
  .l-header__nav-list { display: flex; }
  .l-header__nav-item {
    position: relative;
    display: block;
    padding: 18px clamp(12px, 1.95vw, 28px) 12px;
    font-size: clamp(11px, 1.2vw, 15px);
    font-weight: 500;
    line-height: 20px;
    color: var(--color-white);
    white-space: nowrap;
    transition: color 0.3s ease;
  }
  .l-header__nav-item.is-active { font-weight: 700; color: var(--color-accent); }
  .l-header__nav-item.is-active::after {
    content: '';
    position: absolute;
    left: clamp(12px, 1.95vw, 28px);
    right: clamp(12px, 1.95vw, 28px);
    bottom: 4px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-accent);
  }
  .l-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 10px);
  }
  .l-header__detail {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: clamp(4px, 0.6vw, 8px);
    height: 30px;
    padding: 0 clamp(8px, 0.9vw, 14px);
    border: 1px solid var(--color-white);
    color: var(--color-white);
    font-size: clamp(11px, 1.05vw, 15px);
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .l-header__detail-arrow { display: none; flex-shrink: 0; }
}
@media (min-width: 1101px) {
  .l-header__detail-arrow { display: block; }
}

.l-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 99;
  height: var(--nav-h);
  background: var(--color-bg-base);
}
.l-nav__list {
  display: flex;
  justify-content: center;
  gap: 40px;
  height: 100%;
}
.l-nav__item {
  position: relative;
  display: block;
  padding: 12px 0 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-white);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.l-nav__item.is-active { font-weight: 700; color: var(--color-accent); }
.l-nav__item.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-accent);
}
@media (min-width: 769px) {
  .l-nav { display: none; }
}

/* ============================================
   HERO
   ============================================ */
.hero { background: var(--color-bg-base); }
.hero__kv-img { width: 100%; }

/* ============================================
   INTRO
   ============================================ */
.intro {
  background: var(--color-bg-intro);
  color: var(--color-navy);
  text-align: center;
}
.intro__heading {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 16px;
}
.intro__marker {
  background: linear-gradient(transparent 58%, var(--color-white) 58%, var(--color-white) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.intro__lead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
}
.intro__note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.36px;
  text-align: right;
}
/* SPで1行に収める：約物詰め＋字間0、狭い画面では幅に合わせて縮小（最大12px） */
.intro__note-text {
  font-size: min(12px, calc((100vw - 40px) / 28));
  font-feature-settings: "palt";
  letter-spacing: 0;
}
.intro__note-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (min-width: 769px) {
  .intro__heading { font-size: 32px; margin-bottom: 24px; }
  .intro__lead    { font-size: 24px; margin-bottom: 40px; }
  .intro__note    { flex-direction: row; justify-content: flex-end; gap: 10px; }
  .intro__note-text { font-size: inherit; font-feature-settings: normal; letter-spacing: inherit; }
  .intro__br--sp  { display: none; }
}

.intro-photo { position: relative; display: block; background: var(--color-bg-base); }
.intro-photo__img { width: 100%; }
.intro-photo__link {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: rgb(255 255 255 / 0);
  transition: background 0.3s ease;
}
.intro-photo__link--driver { left: 0; }
.intro-photo__link--seller { right: 0; }
.intro-photo__link:focus-visible { outline-offset: -2px; }

/* ============================================
   DRIVER
   ============================================ */
.driver { background: var(--color-bg-driver); }

.driver__box { background: var(--color-white); }

.driver__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
.driver__tab {
  height: 30px;
  background: var(--color-gray-tab);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.3;
  transition: background 0.25s ease, color 0.25s ease;
}
.driver__tab.is-active {
  background: var(--color-navy);
  color: var(--color-white);
}

.driver__panel:focus-visible { outline-offset: -2px; }

.driver__slider { position: relative; padding: 24px 0 16px; }
.driver__hint {
  position: absolute;
  top: var(--hint-top, 50%);
  right: 8px;
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.driver__hint.is-hidden { opacity: 0; visibility: hidden; }
.driver__viewport {
  grid-area: list;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
}
.driver__list {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: min(297px, 100vw - 112px);
  gap: 16px;
  width: max-content;
  padding: 0 16px 12px;
}
.driver__arrow,
.driver__dots { display: none; }
.driver__arrow--prev { grid-area: prev; }
.driver__arrow--next { grid-area: next; }
.driver__dots { grid-area: dots; }

.driver__card {
  display: grid;
  grid-template-columns: 97px minmax(0, 200px);
  justify-content: center;
  scroll-snap-align: start;
}
.driver__bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
}
.driver__bubble::before {
  content: '';
  position: absolute;
  top: 48px;
  left: -11px;
  width: 16px;
  height: 24px;
  background: var(--color-gray-light);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.driver__role {
  display: grid;
  place-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 10px 10px 0 0;
  background: var(--color-blue-deep);
  /* 最長の補足「(商品企画・マーケティング)」が1行に収まるよう、帯の内幅(100vw - 225px)に合わせて縮小 */
  font-size: clamp(10px, calc((100vw - 225px) / 13), 13px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: var(--color-white);
}
.driver__role-sub { display: inline-block; }
.driver__comment {
  flex: 1;
  margin: 0;
  min-height: 121px;
  padding: 10px 12px 12px;
  border-radius: 0 0 10px 10px;
  background: var(--color-gray-light);
  color: var(--color-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.driver__person {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 90px;
  height: 114px;
  margin-top: 15px;
  margin-right: 7px;
}
.driver__person > picture { display: block; height: 100%; }
.driver__person-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 769px) {
  .driver__tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .driver__tab  { height: 48px; font-size: 16px; letter-spacing: 1.6px; }

  .driver__slider {
    --per-page: 3;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 45px;
    grid-template-areas:
      "prev list next"
      ".    dots .";
    column-gap: clamp(16px, 2.1vw, 30px);
    row-gap: 28px;
    align-items: center;
    padding: 50px clamp(16px, 2.43vw, 35px) 30px;
  }
  .driver__viewport {
    align-self: start;
    overflow: hidden;
    scroll-snap-type: none;
  }
  .driver__list {
    --gap: 20px;
    grid-template-rows: none;
    grid-auto-columns: calc((100% - (var(--per-page) - 1) * var(--gap)) / var(--per-page));
    gap: var(--gap);
    width: auto;
    padding: 0;
    align-items: start;
    transform: translateX(calc(var(--page, 0) * -1 * (100% + var(--gap))));
    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
  }
  .driver__list.is-instant { transition: none; }
  .driver__arrow { display: grid; }
  .driver__hint { display: none; }
  .driver__dots { display: flex; }
  .driver__slider.is-single .driver__arrow,
  .driver__slider.is-single .driver__dots { display: none; }

  .driver__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    justify-content: stretch;
  }
  .driver__bubble { grid-column: 1; grid-row: 1; }
  .driver__bubble::before {
    top: auto;
    bottom: -9px;
    left: 50%;
    width: 26px;
    height: 16px;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .driver__role { min-height: 32px; padding: 5px 10px; font-size: 14px; }
  .driver__comment {
    min-height: 156px;
    padding: 16px 20px 20px;
    font-size: 13px;
    line-height: 1.7;
  }
  .driver__person {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(143px, 100%);
    height: 143px;
    margin: 9px 0 0; /* 吹き出しの三角(下に9pxはみ出す)と重ならないよう下げる */
  }
}
@media (min-width: 1200px) {
  .driver__slider { --per-page: 4; }
}

/* ============================================
   REVIEW
   ============================================ */
.review {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-driver);
}
.review__bg {
  position: absolute;
  inset: 0;
}
.review__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review__inner { position: relative; }

.review__heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-blue);
  margin-bottom: 24px;
}

.review__slider {
  position: relative;
  --w-cur: 240px;
  --w-side: 240px;
  --ratio: 0.5625; /* 高さ/幅（16:9） */
}
.review__viewport {
  width: calc(100% - 96px);
  margin: 0 auto;
  overflow: hidden;
}
.review__track {
  display: flex;
  align-items: center;
  gap: 20px;
  height: calc(var(--w-cur) * var(--ratio));
  transform: translateX(var(--x, 0px));
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.review__item {
  flex: 0 0 var(--w-side);
  transition: flex-basis 0.5s cubic-bezier(.2,.7,.2,1);
}
.review__item.is-current { flex-basis: var(--w-cur); }
.review__track.is-instant,
.review__track.is-instant .review__item { transition: none; }
.review__link {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / var(--ratio);
  background: var(--color-bg-base);
}
/* YouTubeサムネイル(sddefault)は4:3で上下に黒帯入り。16:9枠にcoverで敷き、黒帯分をトリミング */
.review__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .review__item.is-current .review__link:hover .review__thumb { transform: scale(1.04); }
}
.review__arrow {
  position: absolute;
  top: calc(var(--w-cur) * var(--ratio) / 2);
  transform: translateY(-50%);
}
.review__arrow--prev { left: 0; }
.review__arrow--next { right: 0; }
/* テキスト幅は中央のサムネイル幅に合わせる */
.review__caption {
  width: min(var(--w-cur), 100%);
  min-height: 1.45em;
  margin: 8px auto 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: var(--color-navy);
}
.review__dots { margin-top: 16px; }
/* 動画1本のみ（矢印なし）は矢印分の余白を取らない */
.review__slider.is-single .review__viewport { width: 100%; max-width: none; }

@media (min-width: 769px) {
  .review__heading {
    font-size: 20px;
    color: var(--color-navy);
    margin-bottom: 50px;
  }
  .review__viewport {
    width: 1040px;
    max-width: calc(100% - 2 * (45px + clamp(16px, 2.5vw, 36px)));
  }
  /* 1400px幅で2行に収まるよう、文字サイズは変えずに約物詰め(palt)と字間で文字幅を調整 */
  .review__caption {
    margin-top: 9px;
    font-size: 14px;
    font-feature-settings: "palt";
    letter-spacing: -0.01em;
  }
  .review__br--sp { display: none; }
  .review__dots { margin-top: 19px; }
}

/* ============================================
   SELLER
   ============================================ */
.seller { background: var(--gradient-seller); }

.seller__br--sp { display: inline; }
.seller__br--pc { display: none; }

.seller__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 8px;
  padding: 24px 16px 17px;
  background: var(--color-white);
  box-shadow: var(--shadow-card-sp);
  color: var(--color-navy);
}

.seller__title {
  display: flex;
  align-items: center; /* 「その1/2」を見出しの縦中央に揃える */
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.3;
}
.seller__no {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  padding-bottom: 1px;
  border-bottom: 1.5px solid var(--color-navy);
  font-size: 10px;
  color: var(--color-navy);
}
.seller__no-num {
  margin-left: 1px;
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 15px;
}
.seller__title-text {
  font-size: 14px;
  letter-spacing: 0.42px;
  color: var(--color-blue);
}
.seller__title-num { font-size: 26px; }
.seller__marker {
  background: linear-gradient(transparent 68%, var(--color-ice) 68%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.seller__title-rate {
  white-space: nowrap;
  font-family: var(--font-num);
  line-height: 1; /* SPで2行になったとき、大きい数字で行間が広がらないようにする */
}
.seller__title-rate-num { font-weight: 500; font-size: 28px; color: var(--color-blue); }
.seller__title-rate-pct { font-weight: 700; font-size: 15px; color: var(--color-navy); }

.seller__q {
  margin: 0;
  position: relative;
  padding-left: 23px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.seller__q::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 21px;
  background: url(/images/special/icepro/voice/seller_ico_q.svg) no-repeat center / contain;
}

.seller__charts {
  display: grid;
  gap: 35px;
}
.seller__chart-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.3;
  color: var(--color-blue);
}
.seller__chart-title::before,
.seller__chart-title::after {
  content: '';
  width: 60px;
  height: 1.5px;
  background: currentColor;
}

.seller__pie {
  position: relative;
  width: min(266px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.seller__pie-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.seller__pie-seg { stroke: var(--color-white); stroke-width: 1.13; stroke-linejoin: round; }
.seller__pie-seg:nth-child(1) { fill: var(--color-blue); }
.seller__pie-seg:nth-child(2) { fill: var(--color-sky); }
.seller__pie-seg:nth-child(3) { fill: var(--color-ice); }
.seller__pie-seg:nth-child(4) { fill: var(--color-gray-mid); }
.seller__pie-seg:nth-child(5) { fill: var(--color-gray); }
.seller__pie--single .seller__pie-seg:nth-child(2) { fill: var(--color-ice); }
.seller__pie-sweep {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 50;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);
}
.seller__pie.is-drawn .seller__pie-sweep { stroke-dashoffset: 0; }

.seller__pie-label {
  position: absolute;
  left: 55.4%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: 40%;
  color: var(--color-white);
}
.seller__pie-label--1 { top: 16%; }
.seller__pie-label--2 { top: 58%; }
.seller__pie-label.is-placed {
  display: block;
  width: max-content;
  text-align: center;
  transform: translate(-50%, -50%);
}
.seller__pie-label.is-placed .seller__pie-text { display: block; }
.seller__pie-text {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.seller__pie-num {
  font-family: var(--font-num);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.9;
}
.seller__pie-pct {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}

.seller__summary {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--color-gray-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.seller__cols {
  display: grid;
  gap: 20px;
}
.seller__col + .seller__col {
  padding-top: 20px;
  border-top: 1px solid var(--color-gray-mid);
}
.seller__recommend {
  position: relative;
  margin-top: 16px;
}
.seller__recommend-rate {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 56%;
  transform: translateX(-26%);
  color: var(--color-white);
}
.seller__recommend-tag {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.36px;
  line-height: 1.3;
}
.seller__recommend-value {
  display: block;
  font-family: var(--font-num);
  white-space: nowrap;
}
.seller__recommend-num { font-weight: 500; font-size: 74px; line-height: 0.9; }
.seller__recommend-pct { font-weight: 700; font-size: 37px; }

.seller__ranking {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}
.seller__ranking li {
  position: relative;
  padding-left: 23px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  counter-increment: rank;
}
.seller__ranking li::before {
  content: counter(rank);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-white);
  font-size: 11px;
  line-height: 1;
}

.seller__note {
  margin-top: 16px;
  border: 1px solid var(--color-white);
  background: var(--color-note-bg);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.seller__note .c-accordion__head { padding: 12px 40px 12px 16px; }
.seller__note .c-accordion__body { padding: 0 16px 14px; }
.seller__note + .seller__card { margin-top: 24px; }

@media (min-width: 769px) {
  .seller__br--sp { display: none; }
  .seller__br--pc { display: inline; }

  .seller__card {
    gap: 40px;
    margin-bottom: 24px;
    padding: 32px clamp(24px, 3.47vw, 50px) 40px;
    box-shadow: var(--shadow-card-pc);
  }
  .seller__title { align-items: center; gap: 28px; }
  .seller__no {
    margin-top: 0;
    padding-bottom: 2px;
    border-bottom-width: 2px;
    font-size: 27px;
  }
  .seller__no-num { margin-left: 3px; font-size: 42px; }
  .seller__title-text { font-size: clamp(24px, 2.3vw, 33px); letter-spacing: 0.99px; }
  .seller__title-num  { font-size: clamp(44px, 4.45vw, 64px); }
  .seller__title-rate { line-height: inherit; }
  .seller__title-rate-num { font-size: clamp(44px, 4.45vw, 64px); }
  .seller__title-rate-pct { font-size: clamp(24px, 2.3vw, 33px); }
}
/* 1480px未満（スクロールバー幅込み）で見出し末尾の「。」だけが折り返さないよう、約物（、「」。）を半角幅に詰める */
@media (min-width: 769px) and (max-width: 1479px) {
  .driver__heading,
  .seller__heading { font-feature-settings: "halt"; }
}
/* 1480px未満（スクロールバー幅込み）で「…販売員：98%」が98%の手前で折り返さないよう、文字サイズは変えずに余白を詰める */
@media (min-width: 769px) and (max-width: 1479px) {
  .seller__title { gap: clamp(14px, 1.94vw, 28px); }
  .seller__title-text { letter-spacing: 0.3px; font-feature-settings: "halt"; }
}
@media (min-width: 769px) {
  .seller__q {
    padding-left: 34px;
    font-size: 18px;
  }
  .seller__q::before { width: 18px; height: 30px; }

  .seller__charts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 14px;
  }
  .seller__chart-title {
    --gap: clamp(6px, 0.83vw, 12px);
    gap: var(--gap);
    margin-bottom: 16px;
    font-size: clamp(16px, 1.67vw, 24px);
    white-space: nowrap;
  }
  /* 線の長さは最長の「ブレーキ性能」（6文字≒7em）が収まる幅に3項目そろえる */
  .seller__chart-title::before,
  .seller__chart-title::after { flex: 0 0 clamp(12px, calc((100% - 7em - 2 * var(--gap)) / 2), 70px); width: auto; height: 2px; }
  .seller__pie { width: min(350px, 100%); }
  .seller__pie-text { font-size: clamp(12px, 1.11vw, 16px); }
  .seller__pie-num  { font-size: clamp(40px, 5vw, 72px); }
  .seller__pie-pct  { font-size: clamp(20px, 2.57vw, 37px); }

  .seller__summary {
    padding: 24px 32px;
    font-size: 15px;
    line-height: 1.7;
  }

  .seller__ranking { gap: 18px; margin-top: 36px; }
  .seller__ranking li {
    padding-left: 36px;
    font-size: 16px;
    line-height: 1.6;
  }
  .seller__ranking li::before {
    top: 0;
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .seller__recommend {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-top: 16px;
    padding-left: 18px;
  }
  .seller__recommend .seller__pie {
    flex: 0 0 clamp(180px, 19.1vw, 275px);
    width: auto;
    margin: 0;
  }
  .seller__recommend-rate {
    position: static;
    width: auto;
    transform: none;
  }
  .seller__recommend-tag {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 3px;
    background: var(--color-ice);
    color: var(--color-navy);
    line-height: 1.2;
  }
  .seller__recommend-num { font-size: clamp(120px, 14.5vw, 208px); color: var(--color-blue); }
  .seller__recommend-pct { font-size: clamp(60px, 7.38vw, 106px); color: var(--color-navy); }

  .seller__note {
    margin-top: 20px;
    border: 0;
    background: none;
    color: var(--color-ice-note);
  }
  .seller__note .c-accordion__head {
    float: left;
    margin-right: 4px;
    padding: 0;
    pointer-events: none;
  }
  .seller__note .c-accordion__icon { display: none; }
  .seller__note .c-accordion__body { padding: 0; }
  .seller__note + .seller__card { margin-top: 44px; }
}
@media (min-width: 1200px) {
  .seller__cols {
    grid-template-columns: 636fr 464fr;
    gap: 0;
  }
  .seller__col + .seller__col {
    padding: 0 0 0 30px;
    border-top: 0;
    border-left: 1.5px solid var(--color-gray-mid);
  }
}

/* ============================================
   CONTENTS
   ============================================ */
.contents { background: var(--color-bg-base); }

.contents__heading {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-white);
}
.contents__list {
  display: grid;
  gap: 14px;
}
.contents__banner {
  display: block;
  transition: transform 0.25s ease;
}
.contents__banner-pic {
  display: block;
  aspect-ratio: 380 / 179;
  overflow: hidden;
}
.contents__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.contents__banner-label {
  position: relative;
  display: block;
  height: 26px;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  line-height: 26px;
  text-align: center;
}
.contents__banner-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

@media (min-width: 769px) {
  .contents__heading { margin-bottom: 30px; font-size: 28px; }
  .contents__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.08vw, 30px);
  }
  .contents__banner-label {
    height: 30px;
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: 30px;
  }
  .contents__banner-arrow { right: 20px; }
}

/* ============================================
   FOOTER
   ============================================ */
.l-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px 40px;
  background: var(--color-bg-base);
}
.l-footer__logo { width: 112px; height: 24px; }
.l-footer__copyright {
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-copyright);
  text-align: center;
}
@media (min-width: 769px) {
  .l-footer { gap: 10px; padding: 24px 60px 50px; }
  .l-footer__logo { width: 140px; height: 30px; }
  .l-footer__copyright { font-size: 11px; }
}

/* ============================================
   HOVER
   ============================================ */
@media (hover: hover) {
  .l-header__nav-item:hover,
  .l-nav__item:hover { color: var(--color-accent); }
  .l-menu__link:hover { border-color: var(--color-accent); }
  .l-header__detail:hover { background: var(--color-white); color: var(--color-bg-base); }

  .intro__note-link:hover { text-decoration: underline; }
  .intro-photo__link:hover { background: rgb(255 255 255 / 0.12); }

  .driver__tab:not(.is-active):hover { background: var(--color-tab-hover); }

  .c-slider-arrow:not(:disabled):hover { background: var(--color-navy); color: var(--color-white); }
  .c-slider-dots__dot:not([aria-current="true"]):hover { background: var(--color-ice); }

  .contents__banner:hover { transform: translateY(-2px); }
  .contents__banner:hover .contents__banner-img { transform: scale(1.06); }
  .contents__banner:hover .contents__banner-arrow { transform: translate(4px, -50%); }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .u-reveal-up { opacity: 1; transform: none; transition: none; }
  .u-reveal-chars__c { transform: none; filter: none; opacity: 1; transition: none; }
  .c-accordion::details-content { transition: none; }
  .c-accordion__icon::after,
  .l-header__menu-btn > span,
  .l-menu,
  .l-menu__link,
  .c-slider-arrow,
  .c-slider-dots__dot,
  .l-header__nav-item,
  .l-header__detail,
  .l-nav__item,
  .intro-photo__link,
  .driver__tab,
  .driver__list,
  .driver__hint,
  .review__track,
  .review__item,
  .review__thumb,
  .contents__banner,
  .contents__banner-img,
  .contents__banner-arrow { transition: none; }
  .seller__pie-sweep { stroke-dashoffset: 0; transition: none; }
}