/* ========================================
   Toprunner Product Page Styles (Template aligned)
   ======================================== */

.product-toprunner-page .ehps-hero {
  background-image: url('../images/products/pro_back.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.product-toprunner-page .ehps-hero .page-title,
.product-toprunner-page .ehps-hero .page-subtitle {
  color: var(--color-white);
}

.product-toprunner3-solar-page .toprunner-solar-title-break-sp {
  display: none;
}

.product-toprunner-oil-page .toprunner-oil-title-break-sp {
  display: none;
}

/* PC版のみ: pages.css の section マイナスマージンで上枠線が隠れるため、このページでは無効化 */
@media (min-width: 769px) {
  .product-toprunner-page .main-content > section {
    margin-top: 0;
  }
}

/*
 * ≪ブロック余白（product-toprunner-1 / product-toprunner3-solar 共通）
 *
 * DOM: .ehps-main-box > .toprunner-hero + .ehps-section（≪見出しブロックのみ）
 * 1ブロック = .ehps-section-header + .section-divider + 本文（flex gap: sm で一体）
 * ブロック間 = 次の .ehps-section の margin-top（≪の上）。ehps.css の main-box gap は使わない
 *
 * 以前の不具合: ≪主要特徴≫内に .ehps-section を入れ子にしており、
 * 「ブロック間用」の余白が子項目にも誤適用されていた
 */
.product-toprunner-page {
  --toprunner-block-gap: var(--spacing-4xl);
  --toprunner-block-gap-first: var(--spacing-3xl);
}

.product-toprunner-page .ehps-main-box {
  gap: 0;
}

.product-toprunner-page .ehps-main-box > .ehps-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--toprunner-block-gap) 0 0;
  padding: 0;
}

.product-toprunner-page .ehps-main-box > .toprunner-hero + .ehps-section {
  margin-top: var(--toprunner-block-gap-first);
}

.product-toprunner-page .ehps-main-box > .ehps-section .ehps-section-header {
  margin: 0;
}

.product-toprunner-page .ehps-main-box > .ehps-section .section-divider {
  margin: 0 0 var(--spacing-md);
}

.product-toprunner-page .ehps-main-box > .ehps-section > p,
.product-toprunner-page .ehps-main-box > .ehps-section > .toprunner-note,
.product-toprunner-page .ehps-main-box > .ehps-section > .toprunner-spec-figure,
.product-toprunner-page .ehps-main-box > .ehps-section > .tx5000-cta,
.product-toprunner-page .ehps-main-box > .ehps-section > .toprunner-downloads {
  margin: 0;
}

/* ≪主要特徴≫など大ブロック内の h3 小見出し（.ehps-section ではない） */
.product-toprunner-page .toprunner-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin: 0;
  width: 100%;
}

.product-toprunner-page .toprunner-feature-item h3.section-title {
  margin: 0 0 var(--spacing-xs);
}

.product-toprunner-page .toprunner-feature-item p,
.product-toprunner-page .toprunner-feature-item ul {
  margin: 0;
}

.product-toprunner-page .toprunner-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--spacing-2xl);
  align-items: center;
  margin: 0;
}

.product-toprunner-page .toprunner-hero-left {
  width: 100%;
}

.product-toprunner-page .product-hero-main-image {
  display: block;
  width: 100%;
  height: auto;
  border: none;
}

.product-toprunner-page .toprunner-hero-badges {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: center;
}

.product-toprunner-page .toprunner-hero-badge {
  height: 110px;
  width: auto;
}

.product-toprunner-page .toprunner-hero-right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: flex-start;
  text-align: left;
}

.product-toprunner-page .toprunner-hero-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.product-toprunner-page .toprunner-release {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.product-toprunner-page .toprunner-feature-grid {
  display: block;
}

.product-toprunner-page .toprunner-spec-table {
  display: none;
}

.product-toprunner-page .toprunner-spec-figure {
  margin-top: 0;
  text-align: center;
}

.product-toprunner-page .toprunner-spec-figure img {
  width: 100%;
  height: auto;
  max-width: 960px;
}

.product-toprunner-page .toprunner-spec-note {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.product-toprunner-page .toprunner-note {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.product-toprunner-page .toprunner-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  text-align: center;
  margin-top: var(--spacing-lg);
}

.product-toprunner-page .toprunner-downloads .btn {
  display: inline-block;
  margin: 0;
}

/* 暗テーマ：ehps 他商品と同様の暗いグレー＋白文字に統一 */
.product-toprunner-page .content-box,
.product-toprunner-page .ehps-main-box {
  background-color: var(--color-gray-300);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-none);
  padding: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}

.product-toprunner-page .ehps-main-box .toprunner-hero-title,
.product-toprunner-page .ehps-main-box .toprunner-release,
.product-toprunner-page .ehps-main-box .toprunner-spec-note,
.product-toprunner-page .ehps-main-box .toprunner-note,
.product-toprunner-page .ehps-main-box .section-title,
.product-toprunner-page .ehps-main-box .section-subtitle,
.product-toprunner-page .ehps-main-box p {
  color: var(--color-white);
}

.product-toprunner-page .ehps-main-box .section-divider {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 資料ダウンロード（PDF）: 白い罫線ボタンに統一 */
.product-toprunner-page .ehps-main-box .toprunner-downloads .btn-primary {
  color: var(--color-white);
  background-color: transparent;
  border: 2px solid var(--color-white);
}

.product-toprunner-page .ehps-main-box .toprunner-downloads .btn-primary:hover {
  color: var(--color-gray-300);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

/* product-toprunner3-solar: 他ページと共通のボタンスタイル */
.product-toprunner-page .ehps-main-box .tx5000-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-primary,
.product-toprunner-page .ehps-main-box .tx5000-cta .btn-contact {
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-xl);
  box-sizing: border-box;
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-primary {
  color: var(--color-white);
  background-color: transparent;
  border: 2px solid var(--color-white);
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-primary:hover {
  color: var(--color-gray-300);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-contact {
  background: linear-gradient(to bottom, #ffffff, #808080);
  color: #000;
  border: none;
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-contact:hover {
  color: #555;
}

.product-toprunner-page .ehps-main-box .tx5000-cta .btn-contact:hover::before {
  opacity: 0.5;
}

.product-toprunner-page .section-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-lg);
  margin-bottom: 8px;
  text-align: left;
}

.product-toprunner-page .section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.product-toprunner-page .section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-gray-600);
  margin: 0;
  font-style: italic;
}

.product-toprunner-page .section-divider {
  width: 100%;
  height: 1px;
  background-color: #d1d5db;
  margin-bottom: var(--spacing-md);
}

.product-toprunner-page main p {
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
}

@media (max-width: 991px) {
  .product-toprunner-page .toprunner-feature-grid {
    display: block;
  }

  .product-toprunner-page .toprunner-hero {
    display: block;
  }

  .product-toprunner-page .toprunner-hero-right {
    align-items: flex-start;
    text-align: left;
  }

  .product-toprunner-page .toprunner-hero-badges {
    flex-direction: row;
    gap: var(--spacing-md);
  }
}

/* ========================================
   Accordion Styles (CSS Only)
   ======================================== */

.product-toprunner-page .spec-accordion {
  margin-top: var(--spacing-xl);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-none);
  background-color: var(--color-white);
}

.product-toprunner-page .ehps-main-box .spec-accordion {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.product-toprunner-page .spec-accordion-checkbox {
  display: none;
}

.product-toprunner-page .spec-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  cursor: pointer;
  background-color: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-300);
  transition: background-color var(--transition-base);
}

.product-toprunner-page .ehps-main-box .spec-accordion-header {
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.product-toprunner-page .spec-accordion-header:hover {
  background-color: var(--color-gray-100);
}

.product-toprunner-page .ehps-main-box .spec-accordion-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.product-toprunner-page .spec-accordion-checkbox:checked + .spec-accordion-header {
  background-color: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-300);
}

.product-toprunner-page .ehps-main-box .spec-accordion-checkbox:checked + .spec-accordion-header {
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.product-toprunner-page .spec-accordion-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.product-toprunner-page .ehps-main-box .spec-accordion-title {
  color: var(--color-white);
}

.product-toprunner-page .spec-accordion-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
  color: var(--color-gray-600);
}

.product-toprunner-page .ehps-main-box .spec-accordion-icon {
  color: var(--color-white);
}

.product-toprunner-page .spec-accordion-checkbox:checked + .spec-accordion-header .spec-accordion-icon {
  transform: rotate(180deg);
}

.product-toprunner-page .spec-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.product-toprunner-page .spec-accordion-checkbox:checked ~ .spec-accordion-content {
  max-height: 2000px;
}

.product-toprunner-page .spec-accordion-body {
  padding: var(--spacing-xl);
}

.product-toprunner-page .ehps-main-box .spec-accordion-body {
  color: var(--color-white);
}

.product-toprunner-page .spec-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs);
  row-gap: 4px;
  text-align: left;
}

.product-toprunner-page .spec-list-items li {
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

.product-toprunner-page .ehps-main-box .spec-list-items li {
  color: var(--color-white);
}

.product-toprunner-page .spec-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-black);
  text-decoration: none;
  font-size: var(--font-size-base);
  transition: color 0.2s ease;
  text-align: left;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

.product-toprunner-page .ehps-main-box .spec-link {
  color: var(--color-white);
}

.product-toprunner-page .spec-link:hover {
  color: var(--color-black);
  text-decoration: underline;
}

.product-toprunner-page .ehps-main-box .spec-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

.product-toprunner-page .spec-link-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-black);
}

.product-toprunner-page .ehps-main-box .spec-link-icon {
  color: var(--color-white);
}

@media (max-width: 768px) {
  .product-toprunner-page {
    --toprunner-block-gap: var(--spacing-3xl);
    --toprunner-block-gap-first: var(--spacing-2xl);
  }

  .product-toprunner3-solar-page .toprunner-solar-title-break-sp {
    display: initial;
  }

  .product-toprunner-oil-page .toprunner-oil-title-break-sp {
    display: initial;
  }

  .product-toprunner3-solar-page .ehps-hero .page-title,
  .product-toprunner-oil-page .ehps-hero .page-title {
    line-height: 0.95;
  }

  .product-toprunner3-solar-page .ehps-hero .page-subtitle,
  .product-toprunner-oil-page .ehps-hero .page-subtitle {
    width: calc(100% - var(--spacing-xl));
    font-size: clamp(0.8125rem, 3.4vw, 1rem);
    line-height: 1.25;
    margin-top: calc(var(--font-size-3xl) * 0.95 + var(--spacing-xs));
  }

  .product-toprunner3-solar-page .product-hero-main-image,
  .product-toprunner-oil-page .product-hero-main-image {
    margin-inline: auto;
  }

  .product-toprunner3-solar-page .toprunner-hero-badges,
  .product-toprunner-oil-page .toprunner-hero-badges {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    align-items: center;
  }

  .product-toprunner-page .toprunner-feature-list {
    gap: var(--spacing-md);
  }

  .product-toprunner-page .toprunner-hero-badge {
    height: 80px;
  }

  .product-toprunner3-solar-page .toprunner-hero-badge,
  .product-toprunner-oil-page .toprunner-hero-badge {
    height: clamp(64px, 18vw, 96px);
    width: auto;
    max-width: none;
    object-fit: contain;
  }

  .product-toprunner3-solar-page .toprunner-release,
  .product-toprunner-oil-page .toprunner-release {
    align-self: stretch;
    width: 100%;
    text-align: center;
  }

  .product-toprunner3-solar-page .toprunner-hero-title,
  .product-toprunner-oil-page .toprunner-hero-title {
    align-self: stretch;
    width: 100%;
    text-align: center;
    line-height: 1.05;
  }

  .product-toprunner3-solar-page .ehps-section-header,
  .product-toprunner-oil-page .ehps-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
  }

  .product-toprunner3-solar-page .ehps-section-header .section-title,
  .product-toprunner-oil-page .ehps-section-header .section-title {
    width: 100%;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(1.3125rem, 6.2vw, var(--font-size-3xl));
    line-height: 1.35;
  }

  .product-toprunner3-solar-page .ehps-section-header .section-subtitle,
  .product-toprunner-oil-page .ehps-section-header .section-subtitle {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    font-size: clamp(0.8125rem, 3.6vw, 1rem);
    line-height: 1.3;
  }

  .product-toprunner-page .spec-list-items {
    grid-template-columns: repeat(2, 1fr);
  }
}