@import url("base.css");
@import url("kv.css");
@import url("history.css");
@import url("sideButton.css");

/* Section navigation buttons (sits between KV and lead) */
.c5-section-nav {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(8px * var(--font-ratio));
  padding: 0;
  margin: calc(-57px * var(--font-ratio)) auto 0;
  position: relative;
  z-index: 5;
  flex-wrap: wrap;
}
.c5-section-nav__btn {
  position: relative;
  display: block;
  width: calc(293px * var(--font-ratio));
  height: calc(57px * var(--font-ratio));
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.c5-section-nav__btn:focus:not(:focus-visible) {
  outline: none;
}
.c5-section-nav__btn img {
  display: block;
  width: 100%;
  height: 100%;
}
.c5-section-nav__btn-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.c5-section-nav__btn:hover .c5-section-nav__btn-hover,
.c5-section-nav__btn:focus-visible .c5-section-nav__btn-hover {
  opacity: 1;
}
@media screen and (max-width: 749px) {
  .c5-section-nav {
    display: none;
  }
}

/* Floating side nav — group appears when the top section nav is out of view;
   promo button is always visible */
.c5-side-nav {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--font-ratio));
  z-index: 50;
}
.c5-side-nav__group {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--font-ratio));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
@media screen and (min-width: 750px) {
  .c5-side-nav.is-visible .c5-side-nav__group {
    opacity: 1;
    pointer-events: auto;
  }
  .c5-side-nav__btn--promo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .c5-side-nav.is-visible .c5-side-nav__btn--promo {
    opacity: 1;
    pointer-events: auto;
  }
}
.c5-side-nav__fab {
  display: none;
}
.c5-side-nav__btn {
  position: relative;
  display: block;
  /* Pure vw — keeps device-pixel size constant under browser zoom (a px cap
     would re-introduce zoom-dependence at higher zoom levels). A px floor via
     max() stops the buttons shrinking to an unusable size on tablet/small
     laptops (e.g. 2.4vw is only ~18px at 768px wide); on large desktops the vw
     branch wins, so nothing changes there. Floor keeps the ~1:3.57 ratio. */
  /* width: 2vw;
  height: 7.14vw;
  width: 2.2vw;
  height: 7.86vw; */
  width: max(38px, 2.4vw);
  height: max(136px, 8.57vw);
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.c5-side-nav__btn:focus:not(:focus-visible) {
  outline: none;
}
.c5-side-nav__btn img {
  display: block;
  width: 100%;
  height: 100%;
}
.c5-side-nav__btn-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.c5-side-nav__btn:hover .c5-side-nav__btn-hover,
.c5-side-nav__btn:focus-visible .c5-side-nav__btn-hover {
  opacity: 1;
}
@media screen and (max-width: 749px) {
  /* Drop the parent's anchored layout; children pin themselves. */
  .c5-side-nav {
    top: auto;
    right: auto;
    transform: none;
    inset: 0;
    pointer-events: none;
  }
  /* Promo button — same width as the FAB on the right; pushed up when the
     back-to-top button becomes visible so they stack instead of overlap. */
  .c5-side-nav__btn--promo {
    position: fixed;
    bottom: 16px;
    right: 10px;
    width: 44px;
    height: 158px;
    pointer-events: auto;
    transition: bottom 0.3s ease;
  }
  body:has(.c5-top-btn.show) .c5-side-nav__btn--promo {
    bottom: 80px;
  }
  /* FAB toggle — bottom-left. Hide-on-KV gating is commented out for now;
     re-enable the `opacity:0 / pointer-events:none` defaults and the
     `.is-visible` rule to bring it back. */
  .c5-side-nav__fab {
    position: fixed;
    bottom: 16px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #3e342b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    pointer-events: auto;
    /* opacity: 0; */
    /* pointer-events: none; */
    -webkit-tap-highlight-color: transparent;
    transition:
      opacity 0.25s ease,
      background 0.25s ease;
  }
  /*
  .c5-side-nav.is-visible .c5-side-nav__fab {
    opacity: 1;
    pointer-events: auto;
  }
  */
  .c5-side-nav__fab:focus:not(:focus-visible) {
    outline: none;
  }
  /* Hamburger icon — three bars; animates to "X" when open */
  .c5-side-nav__fab-icon,
  .c5-side-nav__fab-icon::before,
  .c5-side-nav__fab-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .c5-side-nav__fab-icon {
    position: relative;
    transition: background 0.2s ease;
  }
  .c5-side-nav__fab-icon::before,
  .c5-side-nav__fab-icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition:
      top 0.25s ease,
      transform 0.25s ease;
  }
  .c5-side-nav__fab-icon::before {
    top: -6px;
  }
  .c5-side-nav__fab-icon::after {
    top: 6px;
  }
  .c5-side-nav.is-open .c5-side-nav__fab-icon {
    background: transparent;
  }
  .c5-side-nav.is-open .c5-side-nav__fab-icon::before {
    top: 0;
    transform: rotate(45deg);
  }
  .c5-side-nav.is-open .c5-side-nav__fab-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
  /* Collapsible nav group sits above the FAB */
  .c5-side-nav__group {
    position: fixed;
    bottom: 72px;
    left: 12px;
    gap: 8px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }
  .c5-side-nav.is-open .c5-side-nav__group {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .c5-side-nav__group .c5-side-nav__btn {
    width: 44px;
    height: 158px;
  }
}

/* リード */
.c5-lead {
  position: relative;
}
.c5-lead__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* vertical breathing room around the heading block; horizontal value keeps
     content off the section edge on narrower desktop sizes */
  padding: clamp(64px, 8vw, 100px) clamp(20px, 3vw, 24px);
  position: relative;
}
.c5-lead-desc {
  margin-top: calc(40px * var(--font-ratio));
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  text-align: center;
}
/* first paragraph has no title above it, so drop its top margin (which would
   otherwise collapse out and create a gap above .c5-lead) */
.c5-lead-desc:first-child {
  margin-top: 0;
}
/* Lead heading hierarchy (small label → large headline → body) */
.c5-lead__inner .c5-lead-desc--eyebrow {
  font-family: var(--font-family-sans);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.c5-lead__inner .c5-lead-desc--title {
  font-family: var(--font-family-sans);
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-top: 0;
}
/* Body paragraph (the description after the title) — give it a generous
   gap below the title and constrain its width so long lines don't sprawl
   across the full 1200px container. */
.c5-lead__inner
  .c5-lead-desc:not(.c5-lead-desc--eyebrow):not(.c5-lead-desc--title) {
  margin-top: clamp(28px, 3.5vh, 56px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}

@media screen and (max-width: 749px) {
  figure {
    margin: 0;
  }
  .c5-lead {
    padding: calc(56px * var(--font-ratio)) calc(20px * var(--font-ratio)) 0
      calc(20px * var(--font-ratio));
    /* margin-bottom: calc(40px * var(--font-ratio)); */
  }
  /* .c5-lead already pads top/bottom on phones — zero the inner's vertical
     padding here so we don't double up and create huge empty space. */
  .c5-lead__inner {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .c5-lead__inner .c5-lead-desc--eyebrow {
    font-family: var(--font-family-sans);
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
    margin-bottom: unset;
  }
  .c5-lead__inner .c5-lead-desc--title {
    font-family: var(--font-family-sans);
    font-size: calc(22 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-weight: 700;
    margin-top: 0;
  }
  .c5-lead-desc {
    margin-top: calc(30px * var(--font-ratio));
    font-size: calc(15 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
}

/* コンテンツ */
.c5-content {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 calc(150px * var(--font-ratio));
}
/* Landing offset for the 系列特色 bottom-nav anchor (#c5-content) on mobile.
   The scroll handler in script.js honors scroll-margin-top, so this is the
   single knob: increase it for more space above the section's top image
   (it must clear the ~53px fixed header). */
@media screen and (max-width: 749px) {
  #c5-lead {
    scroll-margin-top: 50px;
  }
  #c5-compare {
    scroll-margin-top: 50px;
  }
  #c5-content {
    scroll-margin-top: 50px;
  }
}

.c5-content-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(100px * var(--font-ratio)) calc(100px * var(--font-ratio))
    calc(160px * var(--font-ratio));
  position: relative;
}
.c5-content.four .c5-content-container {
  justify-content: center;
}
.c5-content-container::after {
  content: "";
  width: 100vw;
  height: 70%;
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  z-index: -1;
}
@media screen and (min-width: 750px) {
  .c5-content.one .c5-content-container::after {
    background: url(../img/tab/01/bg_02_pc.webp) no-repeat top center / cover;
    top: calc(250px * var(--font-ratio));
  }
  .c5-content.three .c5-content-container::after {
    background: url(../img/tab/03/bg_02_pc.webp) no-repeat top center / cover;
    top: calc(250px * var(--font-ratio));
  }
  .c5-content.four .c5-content-container::after {
    background: url(../img/tab/04/bg_02_pc.webp) no-repeat top center / cover;
    top: 0;
    height: 120%;
  }
  .c5-content.four .c5-tab-content__item--wfm6 {
    padding-inline: calc(40px * var(--font-ratio));
  }
}
.c5-content-logo {
  width: calc(270px * var(--font-ratio));
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 0.5s,
    filter 0.9s;
  transition-timing-function: cubic-bezier(0.82, 0.14, 0.83, 0.67);
}
.c5-content.one .c5-content-title {
  width: calc(380px * var(--font-ratio));
}
.c5-content.three .c5-content-title {
  width: calc(260px * var(--font-ratio));
}
.c5-content.four .c5-content-title {
  width: calc(832px * var(--font-ratio));
}
@media screen and (min-width: 750px) {
  .c5-content.one .c5-content-title {
    padding-top: calc(64px * var(--font-ratio));
  }
  .c5-content.three .c5-content-title {
    padding-top: calc(105px * var(--font-ratio));
  }
}
.c5-content .c5-content-title {
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 0.5s,
    filter 0.9s;
  transition-timing-function: cubic-bezier(0.82, 0.14, 0.83, 0.67);
}
.c5-content .c5-content-title.fade-in {
  opacity: 1;
  filter: blur(0px);
}
.c5-content .c5-content-logo.fade-in {
  opacity: 1;
  filter: blur(0px);
}
.c5-content .c5-content-text {
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity 0.5s,
    filter 0.9s;
  transition-timing-function: cubic-bezier(0.82, 0.14, 0.83, 0.67);
}
.c5-content .c5-content-text.fade-in {
  opacity: 1;
  filter: blur(0px);
}

@media screen and (min-width: 2300px) {
  .c5-content-container::after {
    background-color: #000;
    background-size: contain;
  }
}
@media screen and (max-width: 749px) {
  .c5-content {
    width: 100%;
    padding: 0 calc(20px * var(--font-ratio));
  }
  .c5-content-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;
    gap: calc(40px * var(--font-ratio));
    padding: calc(60px * var(--font-ratio)) 0 calc(80px * var(--font-ratio));
  }
  .c5-content-container::after {
    content: "";
    width: 100vw;
    height: 100%;
    position: absolute;
    left: calc(50% - 50vw);
    z-index: -1;
  }
  .c5-content.one .c5-content-container::after {
    background: url(../img/tab/01/bg_02_sp.webp) no-repeat top center / 100%;
    top: calc(124px * var(--font-ratio));
  }
  .c5-content.three .c5-content-container::after {
    background: url(../img/tab/03/bg_02_sp.webp) no-repeat top center / 100%;
    top: calc(128px * var(--font-ratio));
  }
  .c5-content.four .c5-content-container::after {
    background: url(../img/tab/04/bg_02_sp.webp) no-repeat top center / 100%;
    top: calc(86px * var(--font-ratio));
  }
  .c5-content .c5-content-title {
    align-self: flex-start;
    /* margin-left: calc(15px * var(--font-ratio)); */
  }
  .c5-content-logo {
    width: calc(178px * var(--font-ratio));
  }
  .c5-content.one .c5-content-title {
    width: calc(230px * var(--font-ratio));
  }
  .c5-content.three .c5-content-title {
    width: calc(155px * var(--font-ratio));
  }
  .c5-content.four .c5-content-title {
    width: calc(236px * var(--font-ratio));
  }
}
.c5-tab-btn {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: calc(400px * var(--font-ratio));
  padding: calc(12px * var(--font-ratio)) 0 calc(8px * var(--font-ratio));
  border-radius: 20px 20px 0 0;
  position: relative;
}
.c5-tab-btn img {
  width: calc(194px * var(--font-ratio));
}
.c5-tab-btn[data-prod="wh"] {
  border-color: var(--color-ocher);
  border-style: solid;
  border-width: 1px 1px 0px 1px;
}
.c5-tab-btn[data-prod="wf"] {
  border-color: var(--color-gray04);
  border-style: solid;
  border-width: 1px 1px 0px 1px;
  align-items: center;
}
.c5-tab-btn::after {
  content: "";
  width: 100%;
  height: calc(100% + 1px);
  border-radius: 20px 20px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}
.c5-tab[data-prod="wh"] .c5-tab-btn[data-prod="wh"]::after {
  background-color: var(--color-light-ocher);
  transition: 0.3s;
  z-index: -1;
}
.c5-tab[data-prod="wf"] .c5-tab-btn[data-prod="wf"]::after {
  background-color: var(--color-light-blue);
  transition: 0.3s;
  z-index: -1;
}
.c5-tab[data-prod="wf"] .c5-tab-btn[data-prod="wh"]::after {
  background-color: transparent;
  transition: 0.3s;
  z-index: -1;
}
.c5-tab[data-prod="wh"] .c5-tab-btn[data-prod="wf"]::after {
  background-color: transparent;
  transition: 0.3s;
  z-index: -1;
}
@media screen and (max-width: 749px) {
  .c5-tab-btn {
    gap: 2%;
    width: 49%;
    padding: calc(10px * var(--font-ratio)) 0;
    font-size: calc(19 / var(--root-font-size) * var(--font-ratio) * 1rem);
    border-radius: 15px 15px 0 0;
    font-weight: 500;
  }
  .c5-tab-btn img {
    width: calc(118px * var(--font-ratio));
  }
  .c5-tab-btn::after {
    border-radius: 15px 15px 0 0;
  }
}
.c5-tab-content {
  position: relative;
  padding-bottom: calc(120px * var(--font-ratio));
}
.c5-tab-content::before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  z-index: -1;
}
.c5-tab-content.wh::before {
  border-top: 1px solid var(--color-ocher);
  background: linear-gradient(
    to bottom,
    var(--color-light-ocher) 0,
    var(--color-black) 300px,
    var(--color-black) 100%
  );
}
.c5-tab-content.wf::before {
  /* border-top: 1px solid var(--color-gray03); */
  background: linear-gradient(
    to bottom,
    var(--color-light-blue) 0,
    var(--color-dark-brown) 300px,
    var(--color-dark-brown) 100%
  );
}
/* Opt-out for sections that reuse .c5-tab-content.wf typography but should
   NOT carry the dark gradient backdrop (e.g. the Noise Cancelling section
   that uses its own bg.png layer behind the line). */
.c5-content--plain .c5-tab-content::before {
  background: none;
  border-top: none;
}

.c5-tab-content::after {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  z-index: -1;
}
.c5-tab-content.wh::after {
  background: var(--color-black);
}
.c5-tab-content.wf::after {
  background: var(--color-black);
}
.c5-tab-content.wh[aria-hidden="false"]::after,
.c5-tab-content.wf[aria-hidden="false"]::after {
  animation: fadeout 0.3s linear 0s forwards;
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.c5-tab-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--font-ratio));
}
.c5-tab-content.wh .c5-tab-title-container {
  padding: calc(70px * var(--font-ratio)) 0;
}
.c5-tab-content.wf .c5-tab-title-container {
  padding: calc(85px * var(--font-ratio)) 0;
}
.c5-tab-content .c5-tab-title {
  font-size: calc(56 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: var(--font-family-sans);
  font-weight: 600;
}
/* English eyebrow stacked above the Chinese chapter title within
   .c5-tab-title-container. The container itself is a horizontal flex with the
   product image, so we wrap the two text lines in their own column-flex stack
   to stack them vertically without disturbing the product-image layout. */
.c5-tab-title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--font-ratio));
}
.c5-tab-title-eyebrow {
  margin: 0;
  font-size: calc(28 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: var(--font-family-sans);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1;
}
.c5-tab-title sup {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 0.1em;
}
/* Footnote block under a chapter title (e.g. the "Noise Cancelling /
   世界一流的降噪效果" section's IEC test-result disclosures). Centered,
   muted, smaller text mirroring .c5-tab-content__item-note sizing. */
.c5-tab-title-notes {
  text-align: center;
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: var(--font-family-sans);
  margin: calc(20px * var(--font-ratio)) auto calc(50px * var(--font-ratio));
  max-width: 1200px;
  padding: 0 calc(16px * var(--font-ratio));
}
.c5-tab-title-notes p {
  margin: 0;
  line-height: 1.75;
}
.c5-content .c5-tab-content.wh .c5-img {
  width: calc(244px * var(--font-ratio));
}
.c5-content .c5-tab-content.wf .c5-img {
  width: calc(210px * var(--font-ratio));
}
.c5-tab-content.wh .c5-tab-line {
  position: absolute;
  top: calc(85px * var(--font-ratio));
  left: 0;
  z-index: -1;
}
.c5-tab-content.wf .c5-tab-line {
  position: absolute;
  top: calc(60px * var(--font-ratio));
  left: 0;
  z-index: -1;
}
/* Optional decorative background layered BELOW .c5-tab-line. Only the
   second content-three section (Noise Cancelling) ships with this element,
   so the rule no-ops where it isn't present. z-index: -1 matches the line
   and the parent .c5-tab-content::before gradient — DOM order then keeps
   the stack as: gradient → bg → line. */
.c5-tab-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.c5-tab-bg img {
  width: 100%;
  max-width: 1500px;
  height: auto;
  display: block;
}
@media screen and (max-width: 749px) {
  /* Full-bleed on mobile — escape any parent horizontal padding and span
     the whole viewport width, mirroring the .c5-tab-content::before pattern. */
  .c5-tab-bg {
    width: 100vw;
    left: calc(50% - 50vw);
  }
  .c5-tab-bg img {
    max-width: none;
  }
}
@media screen and (max-width: 749px) {
  .c5-tab-content {
    padding-bottom: 0;
  }
  .c5-tab-content.wh::before {
    background: linear-gradient(
      to bottom,
      var(--color-light-ocher) 0,
      var(--color-black) 250px,
      var(--color-black) 100%
    );
  }
  .c5-tab-content.wf::before {
    background: linear-gradient(
      to bottom,
      var(--color-light-blue) 0,
      var(--color-dark-brown) 250px,
      var(--color-dark-brown) 100%
    );
  }
  /* Mobile opt-out — keep .c5-content--plain (e.g. Noise Cancelling) free
     of the gradient backdrop here too, since the mobile rule above would
     otherwise win due to source order. */
  .c5-content--plain .c5-tab-content::before {
    background: none;
    border-top: none;
  }
  /* Mobile breathing space above .c5-content--plain — on phones the
     previous content-three section ends flush against this one, but on PC
     the gradient backdrops naturally separate them. */
  .c5-content--plain {
    margin-top: calc(40px * var(--font-ratio));
  }
  .c5-tab-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
  }
  .c5-tab-title-eyebrow {
    font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-tab-content.wh .c5-tab-title-container {
    gap: calc(15px * var(--font-ratio));
    padding: calc(24px * var(--font-ratio)) 0 calc(40px * var(--font-ratio));
  }
  .c5-tab-content.wf .c5-tab-title-container {
    gap: calc(8px * var(--font-ratio));
    padding: calc(18px * var(--font-ratio)) 0 calc(20px * var(--font-ratio));
  }
  .c5-tab-content .c5-tab-title {
    font-size: calc(22 / var(--root-font-size) * var(--font-ratio) * 1rem);
    text-align: center;
  }
  .c5-content .c5-tab-content.wh .c5-img {
    width: calc(132px * var(--font-ratio));
    margin-bottom: calc(-40px * var(--font-ratio));
  }
  .c5-content .c5-tab-content.wf .c5-img {
    width: calc(114px * var(--font-ratio));
  }
  .c5-tab-content.wh .c5-tab-line {
    position: absolute;
    top: calc(60px * var(--font-ratio));
    left: 0;
  }
  .c5-tab-content.wf .c5-tab-line {
    position: absolute;
    top: calc(45px * var(--font-ratio));
    left: 0;
    z-index: -1;
  }
}

.c5-tab-content__flex {
  display: flex;
  justify-content: space-between;
}
.c5-tab-content__flex .c5-tab-content__item {
  width: 48%;
}
.c5-tab-content__item.wide .c5-tab-content__item-desc {
  width: 54%;
  margin-top: 0;
}
/* .c5-tab-content__item.wide .c5-tab-content__flex {
  margin-top: calc(20px * var(--font-ratio));
} */
.c5-tab-content__item.wide figure {
  width: 51.5%;
}
.c5-tab-content__item {
  padding: calc(60px * var(--font-ratio)) calc(40px * var(--font-ratio))
    calc(60px * var(--font-ratio));
  border-radius: 20px;
  background: #1d1b19;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}
.c5-tab-content__item-title {
  /* bookmark */
  font-size: calc(32 / var(--root-font-size) * var(--font-ratio) * 0.8rem);
  /* font-size: 24px; */
  line-height: 1.2;
  margin-bottom: calc(14px * var(--font-ratio));
  font-family: var(--font-family-sans);
  text-align: center;
}
.c5-tab-content__item-desc {
  margin-top: calc(20px * var(--font-ratio));
  font-size: calc(18 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: var(--font-family-sans);
  font-weight: 300;
  text-wrap: pretty;
}
@media screen and (min-width: 750px) {
  .c5-tab-content__item-desc span {
    line-height: 2;
  }
  .c5-tab-content__item.c5-pt-60-pc {
    padding-top: calc(60px * var(--font-ratio));
  }
}
@media screen and (max-width: 749px) {
  .c5-tab-content__flex {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .c5-tab-content__flex .c5-tab-content__item {
    width: 100%;
  }
  .c5-tab-content__item {
    padding: calc(36px * var(--font-ratio)) calc(22px * var(--font-ratio))
      calc(32px * var(--font-ratio));
    border-radius: 20px;
    background: #1d1b19;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  }
  .c5-tab-content__item-title {
    font-size: calc(19 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-tab-content__item-desc {
    margin-top: calc(18px * var(--font-ratio));
    font-size: calc(14 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  /* Eyebrow → title separator on mobile (sit flush by default; the airy
     label-then-headline rhythm needs a small explicit gap on phones). */
  .c5-content.three .c5-tab-content__item-eyebrow,
  .c5-content.four .c5-tab-content__item-eyebrow {
    margin: calc(8px * var(--font-ratio)) 0 0;
  }
  .c5-tab-content__item.wide .c5-tab-content__item-desc {
    width: 100%;
  }
  .c5-tab-content__item.wide figure {
    width: 100%;
  }
}
@media screen and (max-width: 749px) {
  .c5-tab-content__item + .c5-tab-content__item {
    margin-top: calc(25px * var(--font-ratio));
  }
  .c5-tab-content [data-item="item"] {
    opacity: 0;
    transform: translateY(10%);
    transition: 0.5s;
  }
}
@media screen and (min-width: 750px) {
  .c5-tab-content__item + .c5-tab-content__item {
    margin-top: calc(40px * var(--font-ratio));
  }
  .c5-tab-content [data-item="item"] {
    opacity: 0;
    transform: translateY(10%);
    transition: 0.5s;
  }
  .c5-tab-content .c5-tab-content__flex [data-item="item"]:nth-child(2) {
    transition-delay: 0.2s;
  }
}
.c5-tab-content .fade-in[data-item="item"] {
  opacity: 1;
  transform: translateY(0);
}

.c5-tab-content__item-note {
  margin-top: calc(20px * var(--font-ratio));
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: var(--font-family-sans);
}
.c5-tab-content__item-note li {
  padding-left: 1rem;
  text-indent: -1rem;
}

@media screen and (max-width: 749px) {
  .c5-tab-content__item-note {
    margin-top: calc(20px * var(--font-ratio));
    font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 1rem);
    font-family: var(--font-family-sans);
  }
  .c5-tab-content__item-note li {
    padding-left: 1rem;
    text-indent: -1rem;
  }
  .c5-content.one
    .c5-tab-content.wf
    .c5-tab-content__item
    .c5-tab-content__flex
    div {
    width: 100%;
  }
  .c5-content.one
    .c5-tab-content.wf
    .c5-tab-content__item
    .c5-tab-content__flex
    figure {
    width: 100%;
  }
}
picture.c5-tab-content__item {
  padding: 0;
}

/* タブ切り替え */
.c5-tab-content.wh {
  display: none;
}
.c5-tab-content.wf {
  display: none;
}
.c5-tab[data-prod="wh"] .c5-tab-content.wh {
  display: block;
}
.c5-tab[data-prod="wf"] .c5-tab-content.wf {
  display: block;
}

/* 商品詳細 */
.c5-product {
  background-color: var(--color-dark-white);
  max-width: 1500px;
  margin: 0 auto;
  padding: calc(100px * var(--font-ratio)) calc(150px * var(--font-ratio))
    calc(90px * var(--font-ratio));
  color: #000;
  position: relative;
}
.c5-product::after {
  content: "";
  width: 100vw;
  height: 100%;
  background-color: var(--color-dark-white);
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  z-index: -1;
}
/* ====================================
   Compare Button
   ==================================== */

/* アロー */
@media screen and (max-width: 749px) {
  .c5-product {
    background-color: var(--color-dark-white);
    margin: 0 auto;
    padding: calc(60px * var(--font-ratio)) calc(20px * var(--font-ratio));
  }
}

/* バナー */

/* サムネイル */

/* 非表示 */

/* ステータス */

/* メイン：画像とボタン */

/* 左：画像 */

.c5-audio__img[hidden] {
  display: none !important;
}

/* 右：ボタン */

/* モードボタン */

/* 再生ボタン */

.c5-video-thumb {
  position: relative;
  cursor: pointer;
  /* width: 42%; */
}
@media screen and (max-width: 749px) {
  .c5-video-thumb {
    width: 100%;
  }
}
.c5-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(81, 81, 81, 0.95);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.c5-video-modal.show {
  display: flex;
  opacity: 1;
}

.c5-video-modal__content {
  position: relative;
  width: 70%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 749px) {
  .c5-video-modal__content {
    width: 90%;
  }
}
.c5-video-modal__embed {
  width: 100%;
  height: 100%;
}

.c5-video-modal__embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.c5-video-modal__close {
  position: absolute;
  width: 72px;
  height: 16px;
  top: -30px;
  right: 0;
  cursor: pointer;
  z-index: 10;
}
.c5-video-modal__close:hover {
  opacity: 0.7;
}

.c5-top-btn {
  position: fixed;
  width: 60px;
  height: 60px;
  /* Base offset is layout-owned: pages with a fixed bottom bar (v2) raise
     --top-btn-base to clear it; JS adds the footer-overlap delta via
     --top-btn-overlap instead of overwriting `bottom`. */
  bottom: calc(var(--top-btn-base, 20px) + var(--top-btn-overlap, 0px));
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

.c5-top-btn.show {
  opacity: 1;
  pointer-events: auto;
}

@media screen and (max-width: 749px) {
  .c5-top-btn {
    width: 40px;
    height: 40px;
    right: 10px;
    /* bottom stays calc(var(--top-btn-base, 20px) + overlap) — pages without a
       bottom bar keep the 20px default; v2 overrides --top-btn-base. */
  }
}

.c5-playbtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.c5-playbtn__line {
  position: relative;
  width: calc(68px * var(--font-ratio));
  height: calc(68px * var(--font-ratio));
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  transition: transform 0.4s ease;
  z-index: 1;
}

.c5-playbtn__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 0;
  height: 0;
  border-left-style: solid;
  border-left-color: #fff;
  border-left-width: calc(24px * var(--font-ratio));
  border-top-style: solid;
  border-top-color: transparent;
  border-top-width: calc(14px * var(--font-ratio));
  border-bottom-style: solid;
  border-bottom-color: transparent;
  border-bottom-width: calc(14px * var(--font-ratio));
  z-index: 0;
}

@media (hover: hover) and (min-width: 750px) {
  .c5-video-thumb:hover .c5-playbtn__line {
    transform: scale(1.3);
  }
}
@media screen and (max-width: 749px) {
  .c5-playbtn__line {
    width: calc(50px * var(--font-ratio));
    height: calc(50px * var(--font-ratio));
  }

  .c5-playbtn__icon {
    top: 50%;
    left: 50%;
    border-left: 16px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }
}

/* Article Main Container */

/* Article Reviews */
/* Modal Base */
.c5-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 1000;
  margin: 0 auto;
}
.c5-modal.show {
  display: block;
}

/* Modal Close Button */

/* Modal Header */
/* Modal Lead */
/* Modal Section Content */

/* Sand Pink Main Container */
/* content three — audio article layout */
.c5-content.three .c5-tab-content__flex {
  align-items: center;
}
.c5-content.three .c5-tab-content__item.wide .c5-tab-content__body {
  width: 45%;
}
.c5-content.three
  .c5-tab-content__item.wide
  .c5-tab-content__body
  .c5-tab-content__item-desc {
  width: 100%;
}
.c5-content.three .c5-tab-content__item.wide figure img {
  width: 100%;
  border-radius: 20px;
}
/* Lead item's image (the 4-portrait mastering-engineers composite) is much
   wider than tall, so the figure naturally renders shorter than the body
   beside it (eyebrow + title + desc + video thumbs). Stretch the figure to
   match the body's height and center the image vertically inside so the
   two columns feel balanced without cropping the portraits. */
.c5-content.three .c5-tab-content__item--lead .c5-tab-content__flex {
  align-items: stretch;
}
.c5-content.three .c5-tab-content__item--lead figure {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.c5-content.three .c5-tab-content__item-eyebrow,
.c5-content.four .c5-tab-content__item-eyebrow {
  font-size: calc(16 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-family: var(--font-family-sans);
  font-weight: 400;
  color: var(--color-gray04);
}
.c5-content.three .c5-tab-content__item-title,
.c5-content.four .c5-tab-content__item-title {
  text-align: left;
  text-wrap: pretty;
}
.c5-content.three .c5-tab-content__item-desc,
.c5-content.four .c5-tab-content__item-desc {
  text-align: left;
}
/* Responsive line-break utilities: <br class="pc-only"> only breaks on PC,
   <br class="sp-only"> only breaks on mobile. Mobile-first — PC break hidden by
   default so phones keep the natural text flow. */
.pc-only {
  display: none;
}
@media screen and (min-width: 750px) {
  .pc-only {
    display: inline;
  }
}

/* Content four — Wearability chapter */
.c5-content.four .c5-tab-content.wf::before {
  border-top: none;
  background: none;
}
.c5-content.four .c5-chapter.c5-chapter--wearability {
  height: auto;
  padding: calc(120px * var(--font-ratio)) 0 calc(160px * var(--font-ratio));
}
.c5-content.four .c5-chapter.c5-chapter--wearability::before {
  background: url(../new-images/wearability/bg_chapter.webp) no-repeat bottom
    center / cover;
  height: calc(100% + 220px * var(--font-ratio));
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.c5-content.four .c5-chapter.c5-chapter--wearability .c5-chapter__eyebrow {
  margin: 0 0 calc(6px * var(--font-ratio));
  font-family: var(--font-family-sans);
  font-size: calc(20 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 400;
  color: var(--color-gray04);
}
.c5-content.four .c5-chapter.c5-chapter--wearability .c5-chapter__title {
  width: auto;
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: calc(56 / var(--root-font-size) * var(--font-ratio) * 1rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.c5-content.four .c5-chapter--wearability + .c5-tab-content__flex {
  position: relative;
  z-index: 1;
  margin-top: calc(-120px * var(--font-ratio));
}
@media screen and (max-width: 749px) {
  .c5-content.four .c5-chapter.c5-chapter--wearability {
    padding: calc(60px * var(--font-ratio)) calc(20px * var(--font-ratio))
      calc(100px * var(--font-ratio));
  }
  .c5-content.four .c5-chapter.c5-chapter--wearability .c5-chapter__title {
    font-size: calc(22 / var(--root-font-size) * var(--font-ratio) * 1rem);
  }
  .c5-content.four .c5-chapter--wearability + .c5-tab-content__flex {
    margin-top: calc(-60px * var(--font-ratio));
  }
}

.c5-content.three .c5-content__videos {
  display: flex;
  gap: calc(20px * var(--font-ratio));
  margin-top: calc(16px * var(--font-ratio));
}
.c5-content.three .c5-content__video {
  width: 50%;
}
.c5-content.three .c5-content__video .c5-video-thumb {
  display: block;
  width: 100%;
}
.c5-content.three .c5-content__video .c5-video-thumb img {
  width: 100%;
}
.c5-content.three .c5-content__video-caption {
  margin-top: calc(4px * var(--font-ratio));
  /* font-size: 12px; */
  /* bookmark */
  font-size: calc(12 / var(--root-font-size) * var(--font-ratio) * 0.8rem);
  font-family: var(--font-family-sans);
  font-weight: 300;
  text-align: center;
}
@media screen and (max-width: 749px) {
  .c5-content.three .c5-tab-content__item.wide .c5-tab-content__body {
    width: 100%;
  }
  .c5-content.three .c5-tab-content__item.wide figure {
    width: 100%;
  }
}
/* content three lead item — lock body to image height */
@media screen and (min-width: 750px) {
  .c5-content.three .c5-tab-content__item--lead .c5-tab-content__flex {
    position: relative;
    display: block;
  }
  .c5-content.three .c5-tab-content__item--lead figure {
    margin: 0;
  }
  .c5-content.three .c5-tab-content__item--lead .c5-tab-content__body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .c5-content.three .c5-tab-content__item--lead .c5-content__videos {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .c5-content.three .c5-tab-content__item--lead .c5-content__video {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .c5-content.three
    .c5-tab-content__item--lead
    .c5-content__video
    .c5-video-thumb {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  .c5-content.three
    .c5-tab-content__item--lead
    .c5-content__video
    .c5-video-thumb
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* content three video thumbnail border */
.c5-content.three .c5-content__video .c5-video-thumb {
  border: 1px solid #ffffff;
  border-radius: 20px;
  overflow: hidden;
}