/* --------------------------------------------------------------------------
   1. Root Variables & Base Reset
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-text-main: #222222;
  --color-accent: #ff9c00;
  --color-bg-glay: #878996;
  --color-bg-medium-gray: #979aa2;
  --color-bg-light-gray: #e8e8e8;
  --color-bg-white: #ffffff;
  --color-bg-navy: #1c2e8b;
  --color-table-fill: #f5f5f5;
  --color-table-header: #f0f0f0;
  --color-pill-black: #000000;
  --color-pill-white: #ffffff;
  --color-pill-gray: #b4b4b4;
  --color-pill-navy: #1f2d5c;

  /* Typography */
  --fs-72s: clamp(3.959rem, 3.779rem + 0.902vw, 4.5rem);
  --fs-64s: clamp(3.459rem, 3.279rem + 0.902vw, 4rem);
  --fs-56s: clamp(2.959rem, 2.779rem + 0.902vw, 3.5rem);
  --fs-48s: clamp(2.459rem, 2.279rem + 0.902vw, 3rem);
  --fs-40s: clamp(1.959rem, 1.779rem + 0.902vw, 2.5rem);
  --fs-32s: clamp(1.459rem, 1.279rem + 0.902vw, 2rem);
  --fs-24s: clamp(1.229rem, 1.139rem + 0.452vw, 1.5rem);
  --fs-20s: clamp(0.979rem, 0.889rem + 0.452vw, 1.25rem);
  --fs-16s: clamp(0.865rem, 0.820rem + 0.225vw, 1rem);
  --fs-14s: clamp(0.74rem, 0.695rem + 0.225vw, 0.875rem);

  --fs-72: clamp(3.418rem, 3.057rem + 1.803vw, 4.5rem);
  --fs-64: clamp(2.918rem, 2.557rem + 1.803vw, 4rem);
  --fs-56: clamp(2.418rem, 2.057rem + 1.803vw, 3.5rem);
  --fs-48: clamp(1.918rem, 1.557rem + 1.803vw, 3rem);
  --fs-40: clamp(1.418rem, 1.057rem + 1.803vw, 2.5rem);
  --fs-32: clamp(1.188rem, 0.917rem + 1.353vw, 2rem);
  --fs-24: clamp(0.959rem, 0.779rem + 0.902vw, 1.5rem);
  --fs-20: clamp(0.844rem, 0.709rem + 0.677vw, 1.25rem);
  --fs-16: clamp(0.729rem, 0.639rem + 0.452vw, 1rem);

  --fs-72l: clamp(2.877rem, 2.336rem + 2.705vw, 4.5rem);
  --fs-64l: clamp(2.377rem, 1.836rem + 2.705vw, 4rem);
  --fs-56l: clamp(1.877rem, 1.336rem + 2.705vw, 3.5rem);
  --fs-48l: clamp(1.377rem, 0.836rem + 2.705vw, 3rem);
  --fs-40l: clamp(1.147rem, 0.696rem + 2.255vw, 2.5rem);
  --fs-32l: clamp(0.918rem, 0.557rem + 1.803vw, 2rem);
  --fs-24l: clamp(0.824rem, 0.599rem + 1.127vw, 1.5rem);
  --fs-20l: clamp(0.709rem, 0.529rem + 0.902vw, 1.25rem);

  --fs-72xl: clamp(2.335rem, 1.613rem + 3.608vw, 4.5rem);
  --fs-64xl: clamp(1.835rem, 1.113rem + 3.608vw, 4rem);
  --fs-56xl: clamp(1.335rem, 0.613rem + 3.608vw, 3.5rem);
  --fs-48xl: clamp(1.106rem, 0.475rem + 3.157vw, 3rem);
  --fs-40xl: clamp(0.877rem, 0.336rem + 2.705vw, 2.5rem);
  --fs-32xl: clamp(0.782rem, 0.376rem + 2.03vw, 2rem);
  --fs-24xl: clamp(0.688rem, 0.417rem + 1.353vw, 1.5rem);

  /* Layout */
  --container-max-width: 1280px;
  --container-x: clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 7vw, 80px);
  --section-y-large: clamp(72px, 9vw, 120px);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
  color: var(--color-text-main);
  line-height: 1.7;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. Utility Classes
   -------------------------------------------------------------------------- */

/* Typography */
.ff-mincho { font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; }
.ff-gothic { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif; }

.fs-72s { font-size: var(--fs-72s); }
.fs-64s { font-size: var(--fs-64s); }
.fs-56s { font-size: var(--fs-56s); }
.fs-48s { font-size: var(--fs-48s); }
.fs-40s { font-size: var(--fs-40s); }
.fs-32s { font-size: var(--fs-32s); }
.fs-24s { font-size: var(--fs-24s); }
.fs-20s { font-size: var(--fs-20s); }
.fs-16s { font-size: var(--fs-16s); }
.fs-14s { font-size: var(--fs-14s); }

.fs-72 { font-size: var(--fs-72); }
.fs-64 { font-size: var(--fs-64); }
.fs-56 { font-size: var(--fs-56); }
.fs-48 { font-size: var(--fs-48); }
.fs-40 { font-size: var(--fs-40); }
.fs-32 { font-size: var(--fs-32); }
.fs-24 { font-size: var(--fs-24); }
.fs-20 { font-size: var(--fs-20); }
.fs-16 { font-size: var(--fs-16); }

.fs-72l { font-size: var(--fs-72l); }
.fs-64l { font-size: var(--fs-64l); }
.fs-56l { font-size: var(--fs-56l); }
.fs-48l { font-size: var(--fs-48l); }
.fs-40l { font-size: var(--fs-40l); }
.fs-32l { font-size: var(--fs-32l); }
.fs-24l { font-size: var(--fs-24l); }
.fs-20l { font-size: var(--fs-20l); }

.fs-72xl { font-size: var(--fs-72xl); }
.fs-64xl { font-size: var(--fs-64xl); }
.fs-56xl { font-size: var(--fs-56xl); }
.fs-48xl { font-size: var(--fs-48xl); }
.fs-40xl { font-size: var(--fs-40xl); }
.fs-32xl { font-size: var(--fs-32xl); }
.fs-24xl { font-size: var(--fs-24xl); }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: #ffffff; }

/* Spacing */
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: clamp(0.063rem, 0rem + 0.313vw, 0.25rem); }
.mb-8 { margin-bottom: clamp(0.125rem, 0rem + 0.625vw, 0.5rem); }
.mb-16 { margin-bottom: clamp(0.25rem, 0rem + 1.25vw, 1rem); }
.mb-20 { margin-bottom: clamp(0.313rem, 0rem + 1.563vw, 1.25rem); }
.mb-24 { margin-bottom: clamp(0.375rem, 0rem + 1.875vw, 1.5rem); }
.mb-32 { margin-bottom: clamp(0.5rem, 0rem + 2.5vw, 2rem); }
.mb-40 { margin-bottom: clamp(0.625rem, 0rem + 3.125vw, 2.5rem); }
.mb-48 { margin-bottom: clamp(0.75rem, 0rem + 3.75vw, 3rem); }
.mb-56 { margin-bottom: clamp(0.875rem, 0rem + 4.375vw, 3.5rem); }
.mb-64 { margin-bottom: clamp(1rem, 0rem + 5vw, 4rem); }
.mb-72 { margin-bottom: clamp(1.125rem, 0rem + 5.625vw, 4.5rem); }
.mb-80 { margin-bottom: clamp(1.25rem, 0rem + 6.25vw, 5rem); }

/* Visual Helpers */
.bg-white-box {
  background-color: #ffffff;
  color: #222222;
  display: inline-block;
  padding: 0.1em 0.1em;
  line-height: 1.3;
  vertical-align: middle;
}

.bg-blck-box {
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  padding: 0.1em 0.1em;
  line-height: 1.3;
  vertical-align: middle;
}

.text-chobo {
  position: relative;
  display: inline-block;
}

.text-chobo::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000000;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   3. Common Layout & Components
   -------------------------------------------------------------------------- */

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-x);
}

.container--medium { max-width: 1000px; }
.container--small { max-width: 800px; }

/* Sections */
.section { padding-block: var(--section-y); }

/* Section Colors */
.section--gray { background: var(--color-bg-glay); }
.section--medium-gray { background: var(--color-bg-medium-gray); }
.section--light-gray { background: var(--color-bg-light-gray); }
.section--white { background: var(--color-bg-white); }
.section--navy { background: var(--color-bg-navy); }

/* Grid System */
.grid {
  display: grid;
  gap: 32px;
}

.grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--center { align-items: center; }

@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .grid--2col,
  .grid--3col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Typography Components */
.section-title {
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-weight: 600;
  font-size: var(--fs-56l);
  line-height: 1.3;
  text-align: center;
  margin-top: 0;
}

.section-title__note {
  text-align: center;
  font-size: clamp(0.625rem, 0.583rem + 0.208vw, 0.75rem);
  margin-top: 0;
}

.eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px clamp(0.5rem, 0rem + 2.5vw, 2rem);
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.btn--hero {
  background: linear-gradient(180deg, #ffbc00 0%, #ff9c00 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(1.1rem, 0.8rem + 0.8vw, 1.4rem);
  padding-block: clamp(10px, 1.5vw, 14px);
  padding-inline: clamp(28px, 6vw, 60px);
  border-radius: 50px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 15px rgba(255, 156, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s;
}

.btn--hero:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255, 156, 0, 0.8);
}

.btn--hero-final {
  display: inline-block;
  width: clamp(280px, 80vw, 500px);
  border: none;
  background: none;
  padding: 0;
  margin-inline: auto;
}

.btn--hero-final__img {
  width: 100%;
  height: auto;
  display: block;
}

.btn--hero__arrow {
  background: #ffffff;
  color: #ff9c00;
  border-radius: 50%;
  width: clamp(24px, 4vw, 36px);
  height: clamp(24px, 4vw, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 0.8rem + 0.4vw, 1.4rem);
  font-weight: 900;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Pills & Tables
   -------------------------------------------------------------------------- */

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.pill {
  padding: 8px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: #333333;
  font-size: 0.85rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Header & Footer
   -------------------------------------------------------------------------- */

.header {
  padding: 16px 0;
}

.header__inner {
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 32px;
  width: auto;
}

.footer {
  padding: 24px 0;
  background: #f0f0f0;
  text-align: center;
}

.footer__copy {
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Section divider
   -------------------------------------------------------------------------- */

.section-divider-next {
  position: relative;
  --divider-top-height: clamp(1.25rem, 0rem + 6.25vw, 4.9rem);
  padding-top: calc(var(--section-y) + var(--divider-top-height));
}

.section-divider-next::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: var(--divider-top-height);
  background: #ffffff;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  pointer-events: none;
  z-index: 0;
}

.section-divider-next > * {
  position: relative;
  z-index: 1;
}

.section-divider-next2 {
  position: relative;
  --divider-top-height: clamp(1.25rem, 0rem + 6.25vw, 4.9rem);
  padding-top: calc(var(--section-y) + var(--divider-top-height));
}

.section-divider-next2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: var(--divider-top-height);
  background: var(--color-bg-light-gray);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  pointer-events: none;
  z-index: 0;
}

.section-divider-next2 > * {
  position: relative;
  z-index: 1;
}

.section-divider-next-hero {
  position: relative;
  --divider-top-height: clamp(1.25rem, 0rem + 6.25vw, 4rem);
  padding-top: calc(var(--section-y) + var(--divider-top-height));
}

.section-divider-next-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: var(--divider-top-height);
  background: #7d8090;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  pointer-events: none;
  z-index: 0;
}

.section-divider-next-hero > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   01. HERO SECTION - CLEAN FIX
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: radial-gradient(circle at 60% 40%, #8e9198 0%, #6d7078 100%);
  padding: 120px 0 160px;
  overflow: hidden;
}

.hero__layout {
  position: relative;
  z-index: 5;
}

/* --------------------------------------------------
   Background & Decorations
   -------------------------------------------------- */

.hero__bg-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

.hero__bg-line img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__badge-japan {
  position: absolute;
  top: clamp(0.625rem, -0.208rem + 4.167vw, 2.125rem);
  right: clamp(0.625rem, -0.208rem + 4.167vw, 2.125rem);
  width: clamp(4.5rem, 1.250rem + 5.078vw, 5.313rem);
  z-index: 10;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* --------------------------------------------------
   Grid Layout (PC Default)
   -------------------------------------------------- */

.hero__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "text   visual"
    "badge  visual"
    "cta    cta";
  align-items: center;
  gap: 0 32px;
}

.hero__text-group {
  grid-area: text;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 5;
  padding-top: 20px;
}

.hero__features {
  grid-area: badge;
  display: flex;
  gap: 16px;
  margin-left: -8px;
  margin-top: 32px;
  align-items: flex-start;
}

.hero__visual {
  grid-area: visual;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -110px;
  z-index: 2;
}

.hero__cta-wrapper {
  grid-area: cta;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 60px;
  position: relative;
  z-index: 10;
}

/* --------------------------------------------------
   Component Details
   -------------------------------------------------- */

/* Typography */
.hero__copy-group {
  font-feature-settings: "palt";
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero__copy-tight {
  letter-spacing: -0.2em;
  line-height: 1.2;
}

.hero__copy-tight .text-chobo {
  margin-right: -0.05em;
}

.hero__copy-line-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hero__align-base {
  line-height: 1;
  transform: translateY(2px);
}

.hero__heading-main {
  font-size: clamp(3.5rem, 2.750rem + 3.75vw, 5.75rem);
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  white-space: nowrap;
}

.hero__break {
  display: none;
}

/* Logo */
.hero__logo-wrap {
  width: 100%;
  max-width: 320px;
}

.hero__logo-wrap img {
  width: 100%;
}

/* Feature Badges */
.hero__feature-item {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__feature-item:hover {
  transform: translateY(-5px);
}

.hero__feature-item--low {
  margin-top: 40px;
}

.hero__feature-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(7.5rem, 6.667rem + 4.167vw, 10rem);
  height: 100%;
  object-fit: contain;
  z-index: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Socks Image */
.hero__socks-img {
  width: clamp(28.125rem, 8.125rem + 31.25vw, 33.125rem);
  max-width: 900px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  transform-origin: center center;
}

/* Shadow */
.hero__shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 40px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  filter: blur(25px);
  z-index: 1;
}

/* CTA Button */
.btn--hero-final {
  display: inline-block;
  max-width: 440px;
  width: 100%;
}

.btn--hero-final__img {
  width: 100%;
  height: auto;
  transition: transform 0.2s, filter 0.2s;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.btn--hero-final:hover .btn--hero-final__img {
  transform: scale(1.02);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}

/* ==================================================
   Media Queries
   ================================================== */

/* Tablet & Mobile Layout (Max 1024px) */
@media (max-width: 1024px) {
  .hero {
    padding: 15px 0 80px;
    background: radial-gradient(circle at 70% 20%, #8e9198 0%, #6d7078 100%);
  }

  /* Typography Adjustments */
  .hero .fs-40 { font-size: clamp(1.188rem, -0.021rem + 6.04vw, 2.875rem); }
  .hero .fs-56l { font-size: clamp(1.625rem, 0.014rem + 8.054vw, 3.875rem); }
  .hero .bg-white-box { padding: 0; }

  .hero__copy-tight .text-chobo { margin-right: 0; }
  .hero__copy-tight { font-size: 0.9em; }
  .hero__copy-group { margin-top: 3px; }

  .hero__heading-main {
    font-size: clamp(2.813rem, -0.051rem + 14.318vw, 6.813rem);
    line-height: 0.9;
    letter-spacing: -1px;
    white-space: normal;
  }

  .hero__break { display: block; }

  /* Logo */
  .hero__logo-wrap { width: 100%; }

  .hero__logo-wrap img {
    width: clamp(7.063rem, 0.038rem + 35.123vw, 16.875rem);
    margin: 10px 0 0 5px;
  }

  /* Layout Structure */
  .hero__inner {
    display: block;
    position: relative;
    width: clamp(44.125rem, 34.889rem + 19.216vw, 47.188rem);
    padding-bottom: 20px;
    margin: 0 auto;
  }

  .hero__text-group {
    position: relative;
    z-index: 10;
    max-width: none;
    margin-bottom: clamp(3.75rem, 2.408rem + 6.711vw, 5.625rem);
  }

  .hero__badge-japan {
    width: clamp(1.875rem, -0.004rem + 9.396vw, 4.5rem);
  }

  /* Visual (Absolute Positioning) */
  .hero__visual {
    position: absolute;
    top: -10px;
    right: clamp(-3.75rem, -17.533rem + 62.651vw, 12.5rem);
    width: 100%;
    max-width: 320px;
    height: auto;
    z-index: 1;
    margin: 0;
    display: block;
  }

  .hero__socks-img {
    width: clamp(16.25rem, 3.722rem + 62.64vw, 33.75rem);
    height: auto;
  }

  .hero__shadow { display: none; }

  /* Features */
  .hero__features {
    position: relative;
    z-index: 5;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
  }

  .hero__feature-item {
    width: clamp(5.938rem, 2.358rem + 17.897vw, 10.938rem);
    height: clamp(5.938rem, 2.358rem + 17.897vw, 10.938rem);
  }

  .hero__feature-item--low { margin-top: 20px; }
  .hero__feature-bg { width: 150px; }

  /* CTA */
  .hero__cta-wrapper {
    position: relative;
    z-index: 10;
    margin-top: 20px;
  }
}

/* Mobile Layout (Max 767px) */
@media (max-width: 767px) {
  .hero {
    padding: 15px 0 80px;
    background: radial-gradient(circle at 70% 20%, #8e9198 0%, #6d7078 100%);
  }

  .hero__inner {
    width: 100%;
  }
}

/* Small Screen Adjustment */
@media (max-width: 352px) {
  .hero__visual {
    right: clamp(-2.75rem, 7.573rem + -51.613vw, -3.75rem);
  }
}

/* PC Specific Layout (Min 1025px) */
@media (min-width: 1025px) {
  .hero__logo-wrap {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__features {
    justify-self: center;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   02. PROBLEM SECTION
   -------------------------------------------------------------------------- */

.problem__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  align-items: center;
  gap: 40px;
}

.problem__left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem__heading-row {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.problem__heading {
  margin: 0;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.05em;
  color: #222222;
}

.problem__decoration {
  display: block;
  width: clamp(40px, 4vw, 56px);
  height: auto;
}

.problem__right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.problem__visual {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Tablet + Mobile (Max 1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .problem__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 20px;
  }

  .problem__heading-row {
    gap: 16px;
  }

  .problem__right {
    justify-content: center;
  }

  .problem__visual {
    width: clamp(260px, 80vw, 560px);
    height: auto;
  }

  .problem__heading {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   03. CAUSE SECTION
   -------------------------------------------------------------------------- */

.cause__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: -1px;
}

.cause__image {
  width: 100%;
}

.cause__image img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 690px;
}

.cause__text {
  text-align: center;
}

.cause__text p {
  margin: 0;
}

.cause__text p + p {
  margin-top: 8px;
}

.cause__text p.bg-blck-box {
  margin: 8px 0;
  display: inline-block;
  padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   Tablet + Mobile (Max 1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .cause__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    text-align: center;
  }

  .cause__image {
    text-align: center;
  }

  .cause__image img {
    width: clamp(260px, 80vw, 690px);
    margin: 0 auto;
  }

  .cause__text {
    text-align: center;
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   04. SOLUTION INTRO
   -------------------------------------------------------------------------- */

.solution-intro {
  position: relative;
  overflow: hidden;
  background-image: url("../img/solution-intro/solution_intro_bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.solution-intro__inner {
  position: relative;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  align-items: center;
  column-gap: 40px;
}

.solution-intro__left {
  text-align: center;
  color: var(--color-text-main);
}

.solution-intro__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.3;
}

.mr-16 {
  margin-right: 16px;
}

.solution-intro .bg-white-box {
  margin: 0 4px;
  padding: 0 0.1em;
}

.solution-intro__highlight {
  color: #ffffff;
  margin: 0;
  font-weight: 700;
}

.solution-intro__image {
  position: relative;
  text-align: right;
}

.solution-intro__image img {
  width: clamp(12.188rem, 6.979rem + 26.042vw, 27.813rem);
  max-width: 500px;
  height: auto;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.solution-intro__image::before {
  content: "";
  position: absolute;
  bottom: 10px;
  right: -10px;
  width: 400px;
  height: 100px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  filter: blur(30px);
  z-index: 0;
}

.solution-intro__image::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -310px;
  width: 650px;
  height: 650px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.45) 20%,
    rgba(255, 255, 255, 0.25) 30%,
    rgba(255, 255, 255, 0) 70%
  );
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Tablet & Mobile (Max 1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .solution-intro__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    text-align: center;
  }

  .solution-intro__left {
    width: 100%;
  }

  .solution-intro__row {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
  }

  .solution-intro__image {
    text-align: center;
  }

  .solution-intro__image img {
    max-width: clamp(12.188rem, 6.979rem + 26.042vw, 27.813rem);
  }

  .solution-intro__image::before {
    content: "";
    position: absolute;
    bottom: clamp(0rem, -0.284rem + 1.422vw, 0.625rem);
    right: clamp(5rem, 0.164rem + 24.182vw, 15.625rem);
    width: clamp(11.25rem, 4.991rem + 31.294vw, 25rem);
    height: clamp(3.125rem, 1.703rem + 7.112vw, 6.25rem);
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    filter: blur(30px);
    z-index: 0;
  }

  .solution-intro__image::after {
    content: "";
    position: absolute;
    bottom: -50px;
    right: clamp(-6.25rem, -9.095rem + 14.225vw, 0rem);
    width: clamp(25rem, 17.888rem + 35.562vw, 40.625rem);
    height: clamp(25rem, 17.888rem + 35.562vw, 40.625rem);
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.45) 20%,
      rgba(255, 255, 255, 0.25) 30%,
      rgba(255, 255, 255, 0) 70%
    );
    z-index: 0;
  }
}

/* --------------------------------------------------------------------------
   05. TECHNOLOGY
   -------------------------------------------------------------------------- */

.technology__card {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px;
  background-color: #dcdcde;
}

.technology__card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.512fr);
  gap: 5px;
  align-items: center;
}

.technology__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.technology__heading {
  text-align: center;
  line-height: 1.1;
}

.technology__heading p {
  margin: 0 0 8px;
}

.technology__main {
  max-width: 450px;
  align-self: center;
}

.technology__main img {
  display: block;
  width: 100%;
  height: auto;
}

.technology__features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 16px;
}

.technology-item {
  max-width: 330px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}

.technology-item--achilles {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 330px;
  width: 100%;
}

.technology-item__thumb img {
  display: block;
  width: 100px;
  height: auto;
}

.technology-item__body {
  position: relative;
  padding-left: 12px;
  height: 100%;
}

.technology-item__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #fffd22;
}

.technology-item--cross .technology-item__body::before {
  background: #01d2ff;
}

.technology-item--achilles .technology-item__body::before {
  background: #22fd4c;
}

.technology-item--three-toe .technology-item__body::before {
  background: #ffc502;
}

.technology-item__title {
  margin: 0 0 4px;
  font-size: clamp(0.813rem, -0.938rem + 2.734vw, 1.25rem);
}

.technology-item__text {
  margin: 0;
  font-size: clamp(0.688rem, 0.667rem + 0.104vw, 0.75rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Tablet & Mobile (Max 1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .technology__card-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .technology__left {
    align-items: center;
  }

  .technology__main {
    max-width: 360px;
  }

  .technology__features {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 16px;
  }

  .technology-item {
    max-width: 100%;
  }

  .technology-item--three-toe {
    grid-column: auto;
    justify-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .technology__features {
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 16px;
  }

  .technology__heading {
    margin-bottom: 8px;
  }

  .technology-item__thumb img {
    width: 80px;
  }
}

/* --------------------------------------------------------------------------
   06. TAPING MECHANISM
   -------------------------------------------------------------------------- */

.taping-mechanism__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.taping-mechanism__figure {
  flex: 0 0 auto;
  width: 620px;
}

.taping-mechanism__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.taping-mechanism__text {
  flex: 0 0 auto;
  width: 650px;
  margin-left: -80px;
  position: relative;
  z-index: 1;
  padding: 40px 30px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.taping-mechanism__heading p {
  margin: 0 0 5px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -1px;
}

.taping-mechanism__heading p:last-child {
  margin-bottom: 0;
}

.taping-mechanism__heading .text-chobo {
  margin-right: -0.2em;
}

.taping-mechanism__heading .text-white {
  color: #ffffff;
}

.align-bottom {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.taping-mechanism__body {
  margin-top: 32px;
  line-height: 1.7;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.taping-mechanism__figure--sp {
  display: none;
}

/* --------------------------------------------------------------------------
   Tablet & Mobile (Max 1159px)
   -------------------------------------------------------------------------- */

@media (max-width: 1159px) {
  .taping-mechanism__inner {
    flex-direction: column;
    gap: 24px;
  }

  .taping-mechanism__figure {
    display: none;
  }

  .taping-mechanism__text {
    width: 100%;
    max-width: 700px;
    margin-left: 0;
    padding: 0px 24px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .taping-mechanism__figure--sp {
    display: block;
    margin: 16px auto 0;
    max-width: 620px;
  }

  .taping-mechanism__figure--sp img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .taping-mechanism__text {
    padding: 0px 16px;
  }

  .taping-mechanism__body {
    margin-top: 24px;
  }

  .taping-mechanism__figure--sp {
    max-width: 480px;
  }
}

/* --------------------------------------------------------------------------
   07. HEEL MISALIGNMENT
   -------------------------------------------------------------------------- */

.heel-misalignment__inner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  align-items: center;
  justify-content: center;
  column-gap: 56px;
}

.heel-misalignment__left {
  width: 100%;
  text-align: left;
}

.heel-misalignment__left p {
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.heel-misalignment__right {
  width: 100%;
  max-width: 750px;
}

.heel-misalignment__right img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Tablet + Mobile (Max 1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .heel-misalignment__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    text-align: center;
  }

  .heel-misalignment__left {
    text-align: center;
  }

  .heel-misalignment__right {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   08. HEEL IMPACT
   -------------------------------------------------------------------------- */

.heel-impact {
  background: #d1d1d5;
}

/* --------------------------------------------------
   上段：ベネフィット一覧
   -------------------------------------------------- */

.heel-impact__benefits {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 400px));
  gap: 20px;
  justify-content: center;
}

/* カード（benefit） */
.benefit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(9.688rem, -1.771rem + 16.667vw, 11.563rem);
  align-items: start;
  padding: 45px 0px 18px;
  overflow: hidden;
  background-color: transparent;
}

/* 背景数字 */
.benefit__bg {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 90px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.benefit__bg img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.benefit__content {
  position: relative;
  z-index: 1;
  padding-right: 12px;
  min-width: 0;
}

.benefit__title {
  margin: 0 0 12px;
  line-height: 1.4;
  min-height: 2.8em;
}

.benefit__text {
  margin: 0;
  line-height: 1.7;
}

/* 右画像エリア */
.benefit__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 185px;
  margin-top: 10px;
}

.benefit__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
   中段：見出し
   -------------------------------------------------- */

.heel-impact__heading {
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.04em;
}

.heel-impact__heading p {
  margin: 0;
}

/* --------------------------------------------------
   下段：詳細エリア
   -------------------------------------------------- */

.heel-impact__detail {
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 550px) minmax(0, 670px);
  gap: 40px;
  align-items: center;
  justify-content: center;
}

/* 左：図解 */
.heel-impact__diagram {
  width: 100%;
  max-width: 550px;
}

.heel-impact__diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右：テキスト */
.heel-impact__text {
  width: 100%;
  max-width: 670px;
  line-height: 1.7;
}

/* --------------------------------------------------
   レスポンシブ対応
   -------------------------------------------------- */

/* Tablet (Max 1099px) */
@media (max-width: 1099px) {
  .heel-impact__benefits {
    grid-template-columns: minmax(0, 1fr);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .benefit {
    grid-template-columns: 1fr 140px;
    background: rgba(255, 255, 255, 0.3);
    align-items: center;
    padding: 22px 18px 18px;
  }

  .benefit__image {
    margin-top: 0;
    max-width: 140px;
  }

  .heel-impact__detail {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .heel-impact__diagram {
    margin: 0 auto;
  }

  .heel-impact__text {
    text-align: left;
    margin: 0 auto;
  }

  .heel-impact__heading {
    padding: 16px 0;
  }
}

/* Mobile (Max 600px) */
@media (max-width: 600px) {
  .benefit {
    gap: 10px;
  }

  .benefit__content {
    padding-right: 0;
  }

  .benefit__image {
    margin: 16px auto 0;
    width: 180px;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   09. CONCEPT
   -------------------------------------------------------------------------- */

.concept {
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

/* --------------------------------------------------
   Background
   -------------------------------------------------- */

.concept__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(80, 80, 80, 0.2) 0%, rgba(50, 50, 50, 0.4) 100%);
  z-index: 0;
}

.concept__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/concept/bg-concept.webp") center / cover no-repeat;
  opacity: 1.6;
  background-size: cover;
  background-position: center top;
  z-index: -1;
}

.concept__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.313rem, 0rem + 1.563vw, 1.25rem);
}

/* --------------------------------------------------
   Headline & Logo
   -------------------------------------------------- */

.concept__headline {
  margin: 0 auto;
}

.concept__eyebrow {
  margin: 0;
  color: #000000;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.concept__tagline {
  margin: 0;
  position: relative;
  z-index: 2;
  margin-top: -0.2em;
}

.concept__tagline .bg-white-box {
  color: #000000;
}

.concept__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 20px;
}

.concept__logo img {
  max-width: clamp(13.75rem, 7.750rem + 30vw, 31.75rem);
  height: auto;
  display: block;
  width: clamp(200px, 80vw, 500px);
}

/* --------------------------------------------------
   Content Area
   -------------------------------------------------- */

.concept__content {
  display: grid;
  grid-template-columns: 1fr minmax(0, 690px);
  align-items: center;
  gap: 40px;
  margin-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Text Area */
.concept__text-area {
  display: flex;
  justify-content: center;
}

.concept__copy {
  margin: 0;
  line-height: 2;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  word-break: keep-all;
}

.concept__copy-em {
  font-weight: 700;
  color: #ffffff;
}

/* Visual Area */
.concept__visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.concept__visual img {
  width: 100%;
  max-width: 690px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 1;
}

.concept__visual::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -5%;
  height: 20%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 0;
}

/* --------------------------------------------------
   Tablet (768px - 1200px)
   -------------------------------------------------- */

@media (max-width: 1200px) {
  .concept__content {
    grid-template-columns: 1fr 1fr;
    gap: 0px;
  }

  .concept__visual img {
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .concept__bg::before {
    background-size: cover;
    background-position: center top;
  }

  .concept__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 690px;
    padding: 0 16px;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   10. POSTURE COMPARISON
   -------------------------------------------------------------------------- */

.posture-comparison__frame {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px;
  display: grid;
  grid-template-columns: minmax(0, 0.53fr) minmax(0, 0.47fr);
  align-items: center;
  justify-items: center;
  column-gap: 16px;
}

.posture-comparison__text {
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.posture-comparison__line {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  line-height: 1.3;
  justify-content: center;
}

.posture-comparison__visual {
  background: transparent;
  padding: 0;
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

.posture-comparison__group {
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
  background: linear-gradient(135deg, #e8e8e8 0%, #c4c2ca 100%);
  padding: 0 0 10px 0;
}

.posture-comparison__label {
  display: block;
  width: 100%;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

.posture-comparison__label--left {
  background: #0d0d0d;
}

.posture-comparison__label--right {
  background: #8a8c94;
}

.posture-comparison__img-wrap {
  width: 100%;
}

.posture-comparison__img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Tablet (Max 1023px)
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .posture-comparison__frame {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding: 20px;
  }

  .posture-comparison__visual {
    max-width: 800px;
  }

  .posture-comparison__group {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   11. SWING TEST
   -------------------------------------------------------------------------- */

.swing-test {
  padding: 80px 0;
}

.swing-test__panel {
  margin: 0 auto;
  padding: 60px 40px;
  max-width: 1280px;
}

/* Base Resets */
.swing-test img {
  max-width: 100%;
  height: auto;
}

.swing-test__text-col,
.swing-test__img-col {
  min-width: 0;
}

/* --------------------------------------------------
   Common Layout
   -------------------------------------------------- */

.swing-test__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 40px);
  margin-bottom: 100px;
}

.swing-test__row:last-child {
  margin-bottom: 0;
}

.swing-test__row--reverse {
  flex-direction: row-reverse;
}

/* Text Column */
.swing-test__text-col {
  text-align: center;
}

.swing-test__heading {
  line-height: 1.4;
  margin: 0;
  color: #1a1a1a;
}

.swing-test__desc {
  line-height: 1.5;
  margin-top: 24px;
  text-align: left;
}

/* Utilities */
.line-group {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1.2;
}

.align-base {
  transform: translateY(0.1em);
}

/* --------------------------------------------------
   Row Ratios
   -------------------------------------------------- */

/* Row 01 */
.swing-test__row--01 .swing-test__text-col {
  flex: 1 1 53%;
  word-break: keep-all;
}

.swing-test__row--01 .swing-test__img-col {
  flex: 1 1 60%;
}

/* Row 02 */
.swing-test__row--02 .swing-test__img-col {
  flex: 1 1 55%;
}

.swing-test__row--02 .swing-test__text-col {
  flex: 1 1 45%;
  text-align: left;
}

.swing-test__row--02 .swing-test__heading {
  text-align: center;
}

.swing-test__row--02 .swing-test__logo-box img {
  width: 100%;
  display: block;
}

/* Row 03 */
.swing-test__row--03 {
  justify-content: center;
  gap: clamp(30px, 5vw, 60px);
}

.swing-test__row--03 .swing-test__text-col {
  flex: 1 1 35%;
}

.swing-test__row--03 .swing-test__img-col {
  flex: 1 1 65%;
}

.swing-test__row--03 .swing-test__heading .line-group:last-child {
  white-space: nowrap;
}

/* Row 04 */
.swing-test__row--04 .swing-test__img-col {
  flex: 1 1 55%;
}

.swing-test__row--04 .swing-test__text-col {
  flex: 1 1 45%;
}

/* Row 05 */
.swing-test__row--05 .swing-test__text-col {
  flex: 1 1 55%;
}

.swing-test__row--05 .swing-test__img-col {
  flex: 1 1 45%;
}

/* --------------------------------------------------
   Visual Components
   -------------------------------------------------- */

/* Pattern A: Grid Visual */
.swing-test__grid-visual {
  display: block;
  width: 100%;
}

.swing-test__label-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}

.swing-test__image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
}

.swing-test__image-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 315 / 455;
  object-fit: cover;
  display: block;
}

/* Pattern B: Single Visual */
.swing-test__single-visual {
  display: block;
  width: 100%;
}

.swing-test__image-full img {
  width: 100%;
  display: block;
}

/* Labels */
.swing-test__label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 6px 0;
  width: 100%;
}

.swing-test__label--black {
  background: #000000;
}

.swing-test__label--gray {
  background: #888888;
}

/* Data Stack (Row 04) */
.swing-test__data-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.swing-test__data-item {
  position: relative;
}

.swing-test__data-item .swing-test__label {
  width: 100%;
  display: flex;
  padding: 6px 0;
}

.swing-test__data-item img {
  width: 100%;
  display: block;
}

.swing-test__note {
  margin-top: 16px;
  line-height: 1.4;
  color: #555555;
  text-align: left;
}

/* Result Box */
.swing-test__result-box {
  display: inline-block;
  margin-top: 16px;
  position: relative;
  padding: 0 10px;
  white-space: nowrap;
}

.swing-test__result-box::before,
.swing-test__result-box::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(30px, 5vw, 60px);
  height: 1px;
  background: #000000;
}

.swing-test__result-box::before {
  left: -3%;
  transform: translateX(-100%) translateY(-50%) rotate(45deg);
}

.swing-test__result-box::after {
  right: -3%;
  transform: translateX(100%) translateY(-50%) rotate(-45deg);
}

/* Layout Adjustments */
.swing-test__row--04 .swing-test__note {
  margin-bottom: -4em;
  position: relative;
  z-index: 0;
}

.swing-test__row--04 .swing-test__text-col {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------
   Tablet & Mobile (Max 1023px)
   -------------------------------------------------- */

@media (max-width: 1023px) {
  .swing-test__panel {
    padding: 40px 20px;
  }

  .inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .swing-test__row,
  .swing-test__row--reverse {
    flex-direction: column;
    gap: 32px;
    margin-bottom: clamp(3.125rem, 1.703rem + 7.112vw, 6.25rem);
  }

  .swing-test__text-col,
  .swing-test__img-col {
    width: 100%;
    flex: auto;
    text-align: center;
  }

  .swing-test__desc {
    text-align: center;
  }

  .swing-test__label-row {
    gap: 2px;
  }

  .swing-test__image-row {
    gap: 2px;
  }

  .swing-test__image-row img {
    height: clamp(15.625rem, 6.237rem + 46.942vw, 36.25rem);
    aspect-ratio: auto;
  }

  .swing-test__row--04 .swing-test__note {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   12. PROFESSIONAL ENDORSEMENT
   -------------------------------------------------------------------------- */

.professional-endorsement {
  padding: 90px 0 96px;
  color: #1a1a1a;
  text-align: center;
}

.professional-endorsement__heading {
  margin: 0 auto 32px;
  display: inline-block;
  text-align: center;
}

.professional-endorsement__heading p:not(.professional-endorsement__note) {
  margin: 0;
  line-height: 1.3;
  text-shadow: 1.5px 1.5px 0px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 255, 255, 0.5);
}

.professional-endorsement__note {
  margin-top: 8px;
  text-align: right;
  display: block;
}

/* --------------------------------------------------
   Card Layout
   -------------------------------------------------- */

.professional-endorsement__card {
  margin: 0 auto;
  padding: 32px 32px;
  max-width: 1100px;
}

.professional-endorsement__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  grid-template-areas:
    "photo name"
    "photo body";
  column-gap: 32px;
  align-items: stretch;
}

/* Photo Area */
.professional-endorsement__photo {
  grid-area: photo;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.professional-endorsement__photo img {
  width: clamp(15.625rem, 13.207rem + 12.091vw, 20.938rem);
  height: auto;
  object-fit: contain;
  display: block;
}

/* Name Area */
.professional-endorsement__name-area {
  grid-area: name;
  padding: 20px 20px 10px;
  text-align: center;
}

.professional-endorsement__name {
  margin: 0;
}

.professional-endorsement__role {
  margin-left: 6px;
  font-weight: 400;
}

/* Body Area */
.professional-endorsement__body-area {
  grid-area: body;
  padding: 0 20px 20px;
  text-align: left;
}

.professional-endorsement__title {
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: 0.2em;
}

.professional-endorsement__body {
  line-height: 1.85;
}

.professional-endorsement__body p {
  margin: 0 0 14px;
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .professional-endorsement {
    padding: 70px 0 80px;
  }

  .professional-endorsement__card {
    padding: 24px 16px;
  }

  .professional-endorsement__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .professional-endorsement__name-area {
    order: 1;
    margin-bottom: 0;
    padding: 20px;
  }

  .professional-endorsement__photo {
    order: 2;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .professional-endorsement__body-area {
    order: 3;
    padding: 20px 0;
  }

  .professional-endorsement__heading p:not(.professional-endorsement__note) {
    margin: 0;
    line-height: 1.3;
    text-shadow: 0.5px 0.5px 0px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 255, 255, 0.5);
  }
}

/* --------------------------------------------------------------------------
   13. TAPING DETAIL
   -------------------------------------------------------------------------- */

.taping-detail__top {
  margin: 0 auto 100px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 690px) 1fr;
  grid-template-rows: min-content min-content;
  grid-template-areas:
    "img head"
    "img desc";
  align-content: center;
  align-items: center;
  gap: 0 60px;
}

.taping-detail__ankle {
  grid-area: img;
}

.taping-detail__headline {
  grid-area: head;
  text-align: center;
  margin-bottom: 0;
}

.taping-detail__description {
  grid-area: desc;
  margin-top: 24px;
  margin-bottom: 0;
  line-height: 1.8;
  text-align: left;
}

.taping-detail__ankle img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.taping-detail__tight-text {
  letter-spacing: -0.1em;
  display: block;
  margin-bottom: 0;
  line-height: 1.2;
}

.taping-detail__tight-text .text-chobo {
  margin-right: -0.1em;
}

.taping-detail__headline .fs-42,
.taping-detail__headline .fs-40 {
  display: block;
  margin-bottom: 0;
}

/* --------------------------------------------------
   Bottom Block
   -------------------------------------------------- */

.taping-detail__bottom {
  margin: 0 auto;
  text-align: center;
}

.taping-detail__title {
  margin-bottom: 40px;
  line-height: 1.4;
}

.taping-detail__title p {
  margin: 0;
}

.taping-detail__content {
  display: grid;
  grid-template-columns: 160px minmax(0, 600px);
  justify-content: center;
  align-items: center;
  gap: 80px;
  text-align: left;
}

.taping-detail__socks img {
  width: 160px;
  display: block;
  margin: 0 auto;
}

.taping-detail__copy {
  line-height: 1.8;
  margin: 0;
}

/* --------------------------------------------------
   Responsive
   -------------------------------------------------- */

/* Laptop to Tablet (Max 1200px) */
@media (max-width: 1200px) {
  .taping-detail__top {
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
}

/* Tablet Portrait (Max 900px) */
@media (max-width: 900px) {
  .taping-detail__top {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0;
    margin-bottom: 60px;
  }

  /* Headline */
  .taping-detail__headline {
    order: 1;
    position: relative;
    z-index: 10;
    margin-bottom: -70px;
  }

  /* Image */
  .taping-detail__ankle {
    order: 2;
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto 32px;
  }

  /* Description */
  .taping-detail__description {
    order: 3;
    text-align: left;
    max-width: 600px;
  }

  /* Bottom Block */
  .taping-detail__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 600px;
    margin: 0 auto;
  }

  .taping-detail__socks img {
    margin: 0 auto;
    width: 140px;
  }

  .pc-br {
    display: none;
  }
}

/* Mobile (Max 767px) */
@media (max-width: 767px) {
  /* Inherits styles from base or variables */
}

/* --------------------------------------------------------------------------
   14. ARCH SUPPORT
   -------------------------------------------------------------------------- */

.arch-support {
  color: #1a1a1a;
}

.arch-support__inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

/* --------------------------------------------------
   Top Layout
   -------------------------------------------------- */

.arch-support__top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  text-align: center;
}

/* Left: Text Area */
.arch-support__heading-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #1a1a1a;
}

.arch-support__heading-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 15px;
}

.arch-support .bg-white-box {
  margin: 0 0.1em;
  padding: 0 0.1em;
}

/* Right: Visual Area */
.arch-support__visual-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.arch-support__socks-img {
  width: 480px;
}

.arch-support__socks-img img {
  width: clamp(18.438rem, 15.458rem + 14.896vw, 27.375rem);
  height: auto;
  display: block;
}

.arch-support__socks-caption {
  color: #ffffff;
  line-height: 1.6;
}

/* --------------------------------------------------
   Bottom Box
   -------------------------------------------------- */

.arch-support__box {
  background: #dcdcde;
  width: 640px;
  height: 450px;
  margin: 0 auto;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.arch-support__compare-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.arch-support__figure {
  width: 280px;
  margin: 0;
}

.arch-support__figure-cap {
  background: #1a1a1a;
  color: #ffffff;
  padding: 8px 0;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.2;
}

.arch-support__figure-cap--gray {
  background: #999999;
}

.arch-support__figure-img {
  background: #eeeeee;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.arch-support__figure-img img {
  width: 280px;
  height: auto;
  display: block;
}

.arch-support__box-caption {
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
}

/* --------------------------------------------------
   Responsive (Max 1100px)
   -------------------------------------------------- */

@media (max-width: 1100px) {
  .arch-support__top {
    flex-direction: column;
    gap: clamp(0rem, -0.833rem + 4.167vw, 2.5rem);
  }

  .arch-support .fs-56 {
    font-size: 32px !important;
  }

  .arch-support .fs-42 {
    font-size: 24px !important;
  }

  .arch-support__socks-img {
    width: 100%;
    max-width: 480px;
  }

  .arch-support__box {
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 30px 20px;
  }

  .arch-support__compare-row {
    flex-direction: row;
    gap: 10px;
  }

  .arch-support__figure {
    width: 48%;
  }

  .arch-support__figure-img img {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   15. MATERIAL QUALITY
   -------------------------------------------------------------------------- */

.material-quality {
  padding: 80px 0;
  color: #1a1a1a;
}

/* --------------------------------------------------
   Grid Layout
   -------------------------------------------------- */

.material-quality__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 600px));
  gap: 24px;
  justify-content: center;
  margin: 0 auto 40px;
}

/* --------------------------------------------------
   Card Common
   -------------------------------------------------- */

.material-card {
  border: 1px solid #000000;
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Header Area */
.material-card__header {
  margin: 0;
  line-height: 1.4;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.material-card__title {
  margin: 0;
}

.fs-42 {
  font-size: 4.2rem;
}

.material-card__title span {
  display: inline-block;
  margin-top: 4px;
}

/* Image Area Common */
.material-card__image {
  margin: 0 0 24px;
  height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.material-card__image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Image Specifics */
.material-card:nth-child(1) .material-card__image {
  align-items: flex-start;
  margin-top: -20px;
  margin-bottom: 60px;
}

.material-card:nth-child(1) .material-card__image img {
  max-width: 200px;
}

.material-card:nth-child(2) .material-card__image img {
  max-width: 200px;
}

/* Description Area */
.material-card__body {
  line-height: 1.6;
  text-align: left;
  width: 100%;
}

.material-card__body p {
  margin: 0 0 16px;
}

.material-card__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
   Cordura Section
   -------------------------------------------------- */

.material-quality__cordura {
  width: 100%;
  max-width: 950px;
  min-height: 350px;
  height: auto;
  padding: 40px 20px;
  margin: 0 auto;
  background-color: #d9d9d9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.material-quality__cordura p {
  margin: 0;
  line-height: 1.6;
  word-break: keep-all;
}

/* --------------------------------------------------
   Responsive
   -------------------------------------------------- */

@media (max-width: 1024px) {
  .material-quality__grid {
    grid-template-columns: minmax(0, 600px);
    width: 100%;
  }

  .material-quality__cordura {
    max-width: 600px;
  }
}

@media (max-width: 767px) {
  .material-card {
    padding: 32px 20px;
  }

  .material-card__header {
    min-height: clamp(5.625rem, 2.940rem + 13.423vw, 9.375rem);
    margin-bottom: 24px;
  }

  .material-card__title.fs-42 {
    font-size: 2.4rem !important;
  }

  .material-card__title .fs-56 {
    font-size: 3.2rem !important;
  }

  .material-quality__cordura .fs-42 {
    font-size: 2.4rem !important;
  }

  .material-quality__cordura .fs-56 {
    font-size: 3.2rem !important;
  }

  .material-quality__cordura {
    min-height: auto;
    padding: 40px 16px;
  }

  .material-card__image {
    height: clamp(11.25rem, 5.881rem + 26.846vw, 18.75rem);
  }

  .material-card:nth-child(1) .material-card__image {
    margin-bottom: clamp(1.25rem, -0.540rem + 8.949vw, 3.75rem);
  }
}

/* --------------------------------------------------------------------------
   16. THREE TOE STRUCTURE
   -------------------------------------------------------------------------- */

.three-toe-structure {
  color: #ffffff;
}

.three-toe-structure__header {
  text-align: center;
}

.three-toe-structure__sub {
  margin: 0;
  letter-spacing: 0.05em;
  color: var(--color-text-main);
}

.three-toe-structure__title {
  margin: 0;
  line-height: 1;
}

.three-toe-structure__body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin: 0 auto;
}

.three-toe-structure__text {
  text-align: center;
  line-height: 1.7;
}

.three-toe-structure__image-wrap {
  position: relative;
  flex-shrink: 0;
}

.three-toe-structure__image-wrap img {
  width: clamp(180px, 22vw, 260px);
  height: auto;
  display: block;
}

.three-toe-structure__note {
  position: absolute;
  bottom: 20px;
  right: -60px;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .three-toe-structure__body {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .three-toe-structure__note {
    position: absolute;
    bottom: 0px;
    right: -60px;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   17. ANTIBACTERIAL DEODORANT
   -------------------------------------------------------------------------- */

.antibacterial-heading {
  text-align: center;
  line-height: 1.3;
  margin-top: 0;
}

.antibacterial-heading span {
  display: inline-block;
}

.antibacterial__inner {
  gap: 32px;
  align-items: center;
  justify-items: center;
}

.antibacterial__tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.antibacterial__tag img {
  width: 100%;
  max-width: 470px;
  height: auto;
}

.antibacterial__text {
  line-height: 1.7;
  max-width: 560px;
}

/* --------------------------------------------------
   Desktop (Min 1024px)
   -------------------------------------------------- */

@media (min-width: 1024px) {
  .antibacterial__inner {
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: 24px;
  }
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .antibacterial__inner {
    text-align: center;
  }

  .antibacterial__text {
    text-align: left;
    margin: 0 auto;
  }

  .antibacterial__tag img {
    margin-top: 20px;
    max-width: 350px;
  }
}

/* --------------------------------------------------------------------------
   18. FINAL CTA
   -------------------------------------------------------------------------- */

.final-cta {
  color: #ffffff;
}

.final-cta__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

.final-cta__left {
  flex: 1;
  text-align: right;
  min-width: 300px;
}

.final-cta__heading {
  line-height: 1.5;
  margin: 0;
  white-space: nowrap;
}

.final-cta__right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.final-cta__card {
  background: #ffffff;
  padding: 20px 20px;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: clamp(34.375rem, 20.313rem + 29.297vw, 43.75rem);
  max-width: 100%;
}

.final-cta__card-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 0 20px;
}

.final-cta__features {
  font-size: clamp(1rem, 0.583rem + 2.083vw, 2.25rem);
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.final-cta__feature-text {
  margin: 0;
}

.final-cta__cross {
  display: block;
  font-size: 2rem;
  margin: 0 0 8px;
  color: #1a1a1a;
}

.final-cta__images {
  display: block;
}

.final-cta__img-main {
  width: clamp(10rem, 6.250rem + 18.75vw, 21.25rem);
  height: auto;
  display: block;
  filter: drop-shadow(-5px 5px 10px rgba(0, 0, 0, 0.15));
}

/* --------------------------------------------------
   Tablet (Max 1199px)
   -------------------------------------------------- */

@media (max-width: 1199px) {
  .final-cta__inner {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .final-cta__left {
    text-align: center;
    width: 100%;
  }

  .final-cta__right {
    width: 100%;
    justify-content: center;
  }

  .final-cta__heading {
    white-space: nowrap;
  }

  .final-cta__br {
    display: none;
  }
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .final-cta__card {
    padding: 24px clamp(0.25rem, 0rem + 1.25vw, 1rem);
    width: 100%;
    max-width: 640px;
  }

  .final-cta__card-body {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0rem + 1.25vw, 1rem);
    text-align: left;
  }

  .final-cta__features {
    font-size: clamp(1rem, 0.583rem + 2.083vw, 2.25rem);
    line-height: 1;
  }

  .final-cta__cross {
    margin: 4px 0;
    display: inline-block;
    transform: rotate(90deg);
  }

  .final-cta__img-main {
    margin: 0;
  }

  .final-cta .btn--hero-final {
    margin-top: 24px;
    height: auto;
    font-size: 20px;
  }
}

/* --------------------------------------------------------------------------
   19. THREE TOE BENEFITS
   -------------------------------------------------------------------------- */

.three-toe-benefits__heading-wrap {
  text-align: center;
  width: 100%;
}

.three-toe-benefits__heading {
  line-height: 1.4;
  display: inline-block;
  text-align: center;
  margin: 0 auto clamp(1.418rem, 1.057rem + 1.803vw, 2.5rem);
}

.three-toe-benefits__heading-sub {
  color: #ffffff;
}

.three-toe-benefits__heading-main {
  color: #1a1a1a;
  display: inline-block;
  margin-top: 8px;
}

/* Main Box */
.three-toe-benefits__box {
  margin: 0 auto;
  padding: 60px 40px 20px;
}

/* Grid Layout (PC Base) */
.three-toe-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.three-toe-benefits__col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.three-toe-benefits__col--center {
  justify-content: center;
  align-items: center;
}

.three-toe-benefits__visual img {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 40px;
}

/* Benefit Item */
.benefit-item {
  position: relative;
}

.benefit-item__bg-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -10%);
  z-index: 0;
  opacity: 0.08;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.benefit-item__bg-text span {
  display: block;
  text-align: center;
  color: #ffffff;
}

.benefit-item__bg-img {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefit-item__bg-img img {
  width: auto;
  height: 72px;
  display: block;
}

.benefit-item__content {
  position: relative;
  z-index: 1;
}

.benefit-item__title {
  margin: 0 0 16px;
  line-height: 1.3;
  color: var(--color-text-main);
  text-align: center;
  word-break: keep-all;
}

.benefit-item__desc {
  width: 100%;
  line-height: 1.5;
}

/* --------------------------------------------------
   PC (Min 1024px)
   -------------------------------------------------- */

@media (min-width: 1024px) {
  .benefit-item__title {
    min-height: calc(1.3em * 3);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .benefit-item__desc {
    min-height: calc(1.5em * 4);
  }
}

/* --------------------------------------------------
   Tablet & Mobile (Max 1023px)
   -------------------------------------------------- */

@media (max-width: 1023px) {
  .three-toe-benefits__box {
    padding: 24px 24px;
  }

  .three-toe-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
  }

  .three-toe-benefits__col--center {
    order: -1;
  }

  .three-toe-benefits__visual img {
    max-width: 320px;
    margin: 0 auto;
  }

  .benefit-item__title,
  .benefit-item__desc {
    min-height: 0;
  }

  .benefit-item__content {
    max-width: 420px;
    margin: 0 auto;
  }

  .benefit-item__desc {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   20. USE CASES
   -------------------------------------------------------------------------- */

.use-cases {
  color: #1a1a1a;
}

.use-cases__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0 0 64px;
}

.use-cases__heading-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}

.use-cases__list {
  gap: 20px;
  align-items: flex-start;
  letter-spacing: -0.02em;
}

.use-case {
  position: relative;
  text-align: center;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.use-case__bg-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

.use-case__bg-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.use-case__content {
  position: relative;
  z-index: 1;
}

.use-case__title {
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.use-case__text {
  margin: 0;
  line-height: 1.6;
  color: #1a1a1a;
}

/* --------------------------------------------------
   PC (Min 1024px)
   -------------------------------------------------- */

@media (min-width: 1024px) {
  .use-case {
    min-height: 14rem;
  }

  .use-case__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --------------------------------------------------
   Tablet & Mobile (Max 1023px)
   -------------------------------------------------- */

@media (max-width: 1023px) {
  .use-cases__heading {
    margin-bottom: 40px;
    gap: 4px;
  }

  .use-cases__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .use-case {
    padding: 24px 10px;
    min-height: 0;
  }

  .use-case__bg-icon {
    width: 140px;
  }
}

/* --------------------------------------------------------------------------
   21. COMPARISON QUESTION
   -------------------------------------------------------------------------- */

.comparison-question__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
  gap: 0;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* --------------------------------------------------
   Left Block
   -------------------------------------------------- */

.comparison-question__left {
  text-align: center;
  padding: 20px 0;
}

.comparison-question__heading {
  position: relative;
  display: inline-block;
  letter-spacing: -0.15rem;
  line-height: 1.5;
  padding: 0 40px;
  margin: 0 0 32px;
  white-space: nowrap;
}

.l-mark {
  position: absolute;
  width: clamp(1.25rem, 0.833rem + 2.083vw, 2.5rem);
  height: clamp(1.25rem, -0.625rem + 9.375vw, 6.875rem);
  border: 3px solid #1a1a1a;
}

.l-mark--top-left {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.l-mark--bottom-right {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.comparison-question__body {
  line-height: 1.6;
}

.comparison-question__body p {
  margin: 0;
}

/* --------------------------------------------------
   Right Block
   -------------------------------------------------- */

.comparison-question__right {
  display: flex;
  justify-content: center;
}

.comparison-box {
  width: 100%;
  max-width: 600px;
  background: var(--color-bg-light-gray);
  padding: 40px 24px 36px;
  text-align: center;
  border-radius: 8px;
}

/* Alert Header */
.comparison-box__header {
  margin-bottom: 24px;
  text-align: center;
}

.comparison-box__alert-text {
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 1.4;
}

.comparison-box__alert-text-body {
  position: relative;
  z-index: 1;
}

.comparison-box__alert-icon {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: -20px;
  width: 72px;
  height: auto;
  z-index: 0;
}

.comparison-box__alert-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* Table Area */
.comparison-box__table-wrap {
  background: #ffffff;
  margin-bottom: 24px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  border: 2px solid #dcdcdc;
  padding: 16px 8px;
  vertical-align: middle;
}

.comparison-table thead th {
  padding: 5px 0;
  font-weight: 600;
}

.bg-gray {
  background: #888888;
}

.bg-black {
  background: #1a1a1a;
}

.row-label {
  background: #ffffff;
  font-weight: 600;
  width: 25%;
}

.comparison-table td {
  text-align: left;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cell-text {
  display: inline-block;
  line-height: 1.4;
}

/* Icons */
.icon-cross {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: clamp(1.125rem, 0.917rem + 1.042vw, 1.75rem);
  height: clamp(1.125rem, 0.917rem + 1.042vw, 1.75rem);
  border-radius: 50%;
  background-color: #999999;
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
}

.icon-check {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: clamp(1.125rem, 0.917rem + 1.042vw, 1.75rem);
  height: clamp(1.125rem, 0.917rem + 1.042vw, 1.75rem);
  border-radius: 50%;
  background-color: #1a1a1a;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
}

.comparison-box__footer {
  margin: 0;
  letter-spacing: -0.05rem;
  word-break: keep-all;
}

/* --------------------------------------------------
   Tablet & Mobile (Max 1099px)
   -------------------------------------------------- */

@media (max-width: 1099px) {
  .comparison-question__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    max-width: 640px;
    margin: 0 auto;
  }

  .comparison-question__left {
    padding: 0;
  }

  .comparison-question__heading {
    white-space: normal;
  }

  .comparison-box {
    width: 100%;
    max-width: 100%;
    padding: 32px 20px 28px;
  }

  .comparison-box__alert-icon {
    width: 64px;
  }

  .comparison-box__alert-text {
    text-align: center;
  }
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .comparison-box {
    padding: 24px 12px 20px;
  }

  .comparison-question__heading {
    padding: 0 24px;
  }

  .comparison-question__body p {
    margin-bottom: 24px;
  }

  .comparison-box__header {
    flex-direction: column;
    gap: 8px;
  }

  .comparison-box__alert-text {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   22. DEVELOPER INTRO
   -------------------------------------------------------------------------- */

.developer-introduction {
  color: #ffffff;
}

.developer-introduction .section-title {
  color: var(--color-text-main);
}

.developer-introduction__inner {
  margin: 0 auto;
  gap: 40px;
  align-items: center;
  justify-items: center;
}

.developer-introduction__inner.grid--2col {
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr);
}

.developer-introduction__text {
  line-height: 1.6;
  width: 100%;
  max-width: 520px;
}

.developer-introduction__text p {
  margin-top: 0;
}

.developer-introduction__name {
  text-align: center;
}

.developer-introduction__block-title {
  margin: 0 0 2px;
}

.developer-introduction__aff {
  line-height: 1.5;
}

.developer-introduction__bio {
  margin-top: 24px;
}

.developer-introduction__photo {
  text-align: center;
}

.developer-introduction__photo img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .developer-introduction__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: left;
  }

  .developer-introduction__photo {
    order: 1;
    text-align: center;
    margin-bottom: 0;
  }

  .developer-introduction__text {
    order: 2;
    max-width: none;
  }

  .developer-introduction__photo img {
    width: clamp(160px, 44.7vw + 16.8px, 360px);
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   23. USER TESTIMONIALS
   -------------------------------------------------------------------------- */

.user-testimonials__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.testimonial-block {
  background: #d6d7db;
  padding: 32px 32px;
  max-width: 1100px;
}

.testimonial-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  grid-template-areas:
    "photo name"
    "photo body";
  column-gap: 32px;
  align-items: stretch;
}

.testimonial-block__inner--right {
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  grid-template-areas:
    "name photo"
    "body photo";
}

.testimonial-block__photo {
  grid-area: photo;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-block__photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.testimonial-block__name {
  grid-area: name;
  text-align: center;
}

.testimonial-block__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.6;
  padding: 0 16px;
}

.testimonial-block__profile-label {
  text-align: center;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  letter-spacing: 0.18em;
}

.testimonial-block__profile {
  list-style: disc;
  padding-left: 1.2em;
  margin: 0;
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .testimonial-block {
    padding: 24px 16px;
  }

  .testimonial-block__inner,
  .testimonial-block__inner--right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .testimonial-block__name {
    order: 1;
    align-self: center;
  }

  .testimonial-block__photo {
    order: 2;
    max-width: 340px;
    margin: 0 auto;
  }

  .testimonial-block__body {
    order: 3;
    padding: 0;
  }

  .testimonial-block__photo img {
    max-width: clamp(10rem, 1.946rem + 40.268vw, 21.25rem);
  }
}

/* --------------------------------------------------------------------------
   24. BRAND STORY
   -------------------------------------------------------------------------- */

.brand-story__inner {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
  color: #ffffff;
}

.brand-story__text {
  margin: 0 0 16px;
}

.brand-story__text .bg-white-box {
  display: inline;
  padding: 0.2em 0.4em;
  background-color: #ffffff;
  color: var(--color-text-main);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 767px) {
  .brand-story__inner {
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------------------
   25. PRODUCT NOTES
   -------------------------------------------------------------------------- */

.product-notes__block {
  max-width: 800px;
  line-height: 1.7;
  margin: 0 auto clamp(1rem, 0rem + 5vw, 4rem);
}

.product-notes__list {
  padding-left: 1.2em;
  margin: 0;
}

.product-notes__list li {
  margin-bottom: 8px;
}

.product-notes__spec {
  max-width: 700px;
  margin: 0 auto;
}

.product-notes__table {
  width: 100%;
  border-collapse: collapse;
}

.product-notes__table th,
.product-notes__table td {
  border: 1px solid #919191;
  padding: 12px 16px;
  line-height: 1.5;
}

.product-notes__table th {
  width: 120px;
  background: #f5f5f5;
  text-align: left;
  font-weight: 700;
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .product-notes__block {
    padding-inline: 8px;
    line-height: 1.5;
  }

  .product-notes__spec {
    padding-inline: 8px;
  }

  .product-notes__list {
    padding-left: 1em;
  }
}

/* --------------------------------------------------------------------------
   26. PRODUCT VARIATIONS
   -------------------------------------------------------------------------- */

.product-variations .container--small {
  max-width: 1100px;
}

.product-variations .section-title {
  margin-bottom: 8px;
}

.product-variations__subhead,
.product-variations__color-head {
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
}

:root {
  --pv-img-pc: 240px;
  --pv-img-tb: 210px;
  --pv-img-sp: 160px;
  --pv-gap-x: clamp(1.25rem, 0.833rem + 2.083vw, 2.5rem);
  --pv-gap-y: 24px;
}

/* --------------------------------------------------
   Versions (Upper)
   -------------------------------------------------- */

.product-variations__versions {
  display: flex;
  justify-content: center;
  gap: var(--pv-gap-x);
  margin-bottom: 64px;
}

.product-variations__version {
  text-align: center;
  margin: 0;
  width: var(--pv-img-pc);
}

.product-variations__image-wrap {
  width: var(--pv-img-pc);
  height: var(--pv-img-pc);
  margin: 0 auto 16px;
}

.product-variations__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-variations__type {
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  line-height: 1.2;
}

.product-variations__desc {
  line-height: 1.4;
}

/* --------------------------------------------------
   Colors (Middle)
   -------------------------------------------------- */

.product-variations__colors {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.product-variations__color-group {
  text-align: center;
}

.product-variations__color-count {
  margin: 0 0 16px;
  line-height: 1.2;
}

.product-variations__color-row {
  display: flex;
  justify-content: center;
  gap: var(--pv-gap-x);
}

.product-variations__color-row figure {
  margin: 0;
}

.product-variations__color-row figcaption {
  margin-top: 8px;
}

.product-variations__color-row--short {
  display: flex;
  justify-content: center;
  gap: var(--pv-gap-x);
}

/* --------------------------------------------------
   Price Table (Lower)
   -------------------------------------------------- */

.product-variations__table-wrap {
  margin: 30px auto 40px;
  max-width: 860px;
  width: 100%;
}

.product-variations__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-light-gray);
  font-size: clamp(0.825rem, 0.188rem + 2.188vw, 1.938rem);
}

.product-variations__table th,
.product-variations__table td {
  border: 4px solid var(--color-bg-medium-gray);
  padding: 18px 12px;
  text-align: center;
  vertical-align: middle;
}

.product-variations__table thead th {
  background: var(--color-bg-light-gray);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.229rem + 2.604vw, 2.313rem);
}

.product-variations__table tbody th {
  background: var(--color-bg-light-gray);
  font-weight: 300;
  width: clamp(4rem, 0.771rem + 11.146vw, 9.688rem);
  font-size: clamp(0.825rem, 0.188rem + 2.188vw, 1.938rem);
}

/* --------------------------------------------------
   Color Pills
   -------------------------------------------------- */

.product-variations__pill-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 auto;
}

.color-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.color-pill--black {
  background: var(--color-pill-black);
  color: #ffffff;
}

.color-pill--white {
  background: var(--color-pill-white);
  color: #000000;
  border-color: #000000;
}

.color-pill--gray {
  background: var(--color-pill-gray);
  color: #000000;
}

.color-pill--navy {
  background: var(--color-pill-navy);
  color: #ffffff;
}

/* --------------------------------------------------
   Tablet & Mobile (Max 1023px)
   -------------------------------------------------- */

@media (max-width: 1023px) {
  .product-variations__image-wrap {
    width: var(--pv-img-tb);
    height: var(--pv-img-tb);
  }

  .product-variations__version,
  .product-variations__color-row--short figure {
    width: var(--pv-img-tb);
  }

  .product-variations__color-row--short {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--pv-gap-y);
    column-gap: var(--pv-gap-x);
    max-width: calc(var(--pv-img-tb) * 2 + var(--pv-gap-x));
    margin-left: auto;
    margin-right: auto;
  }

  .product-variations__pill-wrap {
    max-width: 200px;
  }
}

/* --------------------------------------------------
   Mobile (Max 767px)
   -------------------------------------------------- */

@media (max-width: 767px) {
  .product-variations__image-wrap {
    width: var(--pv-img-sp);
    height: var(--pv-img-sp);
  }

  .product-variations__versions {
    flex-direction: column;
    align-items: center;
    gap: var(--pv-gap-y);
    margin-bottom: 40px;
  }

  .product-variations__version {
    display: flex;
    align-items: flex-start;
    gap: var(--pv-gap-x);
    text-align: left;
    max-width: 480px;
    width: 100%;
  }

  .product-variations__version .product-variations__image-wrap {
    margin: 0;
    flex-shrink: 0;
  }

  .product-variations__version figcaption {
    flex: 1;
  }

  .product-variations__color-row {
    gap: var(--pv-gap-x);
  }

  .product-variations__color-row--short {
    max-width: calc(var(--pv-img-sp) * 2 + var(--pv-gap-x));
  }

  .product-variations__color-row--short figure {
    width: calc(50% - (var(--pv-gap-x) / 2));
  }

  .product-variations__color-row--short .product-variations__image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* --------------------------------------------------
   Responsive Adjustment (1024px - 1180px)
   -------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1180px) {
  .product-variations {
    --pv-img-pc: 200px;
    --pv-gap-x: 24px;
  }

  .product-variations__image-wrap {
    width: var(--pv-img-pc);
    height: var(--pv-img-pc);
  }

  .product-variations__version {
    width: var(--pv-img-pc);
    height: auto;
  }

  .product-variations__versions,
  .product-variations__color-row,
  .product-variations__color-row--short {
    gap: var(--pv-gap-x);
  }
}

/* =========================================================
   スクロールアニメーション共通
   data-animate 属性の付いた要素に適用
   ========================================================= */

main.lp-trysox [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* 画面に入ったら表示状態に */
main.lp-trysox [data-animate].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 種類別の初期位置（必要に応じて使う） */
main.lp-trysox [data-animate="fade-left"] {
  transform: translateX(-24px);
}

main.lp-trysox [data-animate="fade-right"] {
  transform: translateX(24px);
}

main.lp-trysox [data-animate="fade-up"] {
  transform: translateY(24px);
}

/* 画面に入ったときの共通最終状態 */
main.lp-trysox [data-animate].is-inview {
  transform: translate(0, 0);
}

/* 簡易ディレイ（0,1,2,3ステップ） */
main.lp-trysox [data-animate][data-delay="1"] { transition-delay: 0.15s; }
main.lp-trysox [data-animate][data-delay="2"] { transition-delay: 0.30s; }
main.lp-trysox [data-animate][data-delay="3"] { transition-delay: 0.45s; }

/* 使用上の注意事項のリストだけ、黒丸リストを復活させる */
main.lp-trysox .product-notes__list {
  list-style: disc;               /* 黒丸 */
  list-style-position: outside;   /* 通常の位置 */
  padding-left: 1.5em;            /* 左のインデントを少し広めに */
}

main.lp-trysox .product-notes__list li {
  margin-bottom: 0.5em;
}