@charset "UTF-8";
/* ==========================================================================
1. 基本設定（リセット・共通）
========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* スクロールバーによる横揺れ防止 */
  scrollbar-gutter: stable;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #ffffff;
  color: #343434;
}
/* ページ全体のコンテナ */
.product-page {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  position: relative;
}
/* ==========================================================================
2. ヘッダー関連（ハンバーガーメニュー等）
========================================================================== */
/* ハンバーガーメニューの線の色（黒に固定） */
.product-page .hamburger-line {
  background-color: #343434 !important;
}
/* メニュー展開時（×印）の線の色 */
.product-page .hamburger.active .hamburger-line {
  background-color: white !important;
}
/* ==========================================================================
3. メインレイアウト
========================================================================== */
/* コンテンツ全体の囲い */
.product-main-content {
  padding-top: 130px; /* ヘッダーの高さ分 */
  max-width: 1920px;
  margin: 0 auto;
}
/* 商品情報のメインコンテナ（画像とテキストの並び） */
.product-container {
  display: grid;
  /* 画像側を最大540pxに、残り（1fr）をテキスト側に */
  grid-template-columns: minmax(300px, 540px) 1fr;
  gap: 60px;         /* 画像とテキストの間の余白 */
  max-width: 1200px; /* 全体の最大幅（中央寄せ用） */
  margin: 0 auto;
  padding: 0 20px 80px;
  align-items: start; /* 画像とテキストの高さを揃える */
}
/* ==========================================================================
4. 画像エリア
========================================================================== */
/* 画像の比率を維持する枠 */
.product-image-wrapper {
  position: relative;
  aspect-ratio: 660 / 780;
  height: auto;
  align-self: auto;
}
/* 商品画像本体（マスク処理込み） */
.product-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
}
/* ==========================================================================
5. 商品詳細テキストエリア
========================================================================== */
.product-info {
  padding-top: 50px;
}
/* 医薬部外品等のバッジ */
.product-badge {
  background: #343434;
  color: #ffffff;
  padding: 6px 20px;
  border-radius: 10000px;
  font-size: 13px;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 20px;
}
/* 商品名（英語） */
.product-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
/* 商品名（日本語） */
.product-subtitle {
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
/* キャッチコピー */
.product-headline {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
}
/* 商品説明文 */
.product-description {
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
.product-description p {
  margin-bottom: 0;
}
/* SP専用要素（現在は非表示設定） */
.product-description-sp,
.product-headline-sp {
  display: none;
}
/* ==========================================================================
6. 価格・購入ボタン
========================================================================== */
/* 価格表示ボックス */
.product-price-box {
  border: 1px solid #343434;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-bottom: 5px;
}
.product-price-label {
  font-size: 15px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.product-price-value {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.product-price-unit {
  font-size: 15px;
  letter-spacing: 0.05em;
  margin-left: 10px;
  white-space: nowrap;
}
/* ボタン（楽天・Amazon）のグループ */
.product-button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 20px;
}
.product-button {
  background: #343434;
  color: #ffffff;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background 0.3s ease;
  border: none;
  cursor: pointer;
}
.product-button:hover {
  background: #555555;
}
/* ==========================================================================
7. アコーディオン機能（全成分・使い方）
========================================================================== */
.product-accordion-item {
  padding: 0;
}
/* 見出し部分 */
.product-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #343434; /* 下線固定 */
  padding: 25px 0;
}
/* プラス・マイナスアイコン */
.product-accordion-icon {
  font-size: 15px;
  transition: transform 0.3s ease;
}
.product-accordion-icon::before {
  content: '＋';
}
.product-accordion-icon.open::before {
  content: '×';
}
/* 中身の開閉アニメーション（Grid使用） */
.product-accordion-content {
  display: grid;
  grid-template-rows: 0fr; /* 初期状態は閉じる */
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
  overflow: hidden;
  visibility: hidden; /* 閉じている時は完全に隠す */
}
/* 開いた時の状態 */
.product-accordion-content.open {
  grid-template-rows: 1fr;
  visibility: visible;
}
/* Grid計算用のインナー */
.product-accordion-content > div {
  min-height: 0;
}
/* アコーディオン内のテキスト余白 */
.product-accordion-content p {
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 23px;
  letter-spacing: 0.05em;
}
/* ==========================================================================
8. レスポンシブデザイン（メディアクエリ統合）
========================================================================== */

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

  /* タイトル：26px（900px時）→ 40px（1200px時） / margin: 14px → 20px */
  .product-title {
    font-size: clamp(26px, 4.67vw - 16px, 40px);
    line-height: clamp(36px, 4.67vw - 6px, 50px);
    margin-bottom: clamp(14px, 2vw - 4px, 20px);
  }

  /* サブタイトル：13px（900px時）→ 15px（1200px時） / margin: 20px → 30px */
  .product-subtitle {
    font-size: clamp(13px, 0.67vw + 7px, 15px);
    margin-bottom: clamp(20px, 3.33vw - 10px, 30px);
  }

  /* キャッチコピー：15px（900px時）→ 20px（1200px時） / margin: 16px → 25px */
  .product-headline {
    font-size: clamp(18px, 1.67vw + 0px, 20px);
    line-height: clamp(23px, 2vw + 5px, 29px);
    margin-bottom: clamp(16px, 3vw - 11px, 25px);
  }

  /* 説明文：13px（900px時）→ 15px（1200px時） / margin: 20px → 30px */
  .product-description {
    font-size: clamp(13px, 0.67vw + 7px, 15px);
    line-height: clamp(20px, 1vw + 11px, 23px);
    margin-bottom: clamp(20px, 3.33vw - 10px, 30px);
  }

  /* 価格金額：20px（900px時）→ 25px（1200px時） */
  .product-price-value {
    font-size: clamp(20px, 1.67vw + 5px, 25px);
  }

  /* 価格ラベル・単位：13px（900px時）→ 15px（1200px時） */
  .product-price-label,
  .product-price-unit {
    font-size: clamp(13px, 0.67vw + 7px, 15px);
  }

  /* 価格ボックス：padding・gap もぬるっと */
  .product-price-box {
    padding: 20px clamp(10px, 2vw + 4px, 40px);
    gap: clamp(15px, 3vw + 5px, 50px);
  }

  /* ボタン：16px（900px時）→ 19px（1200px時） */
  .product-button {
    font-size: clamp(16px, 1vw + 7px, 19px);
    padding: clamp(16px, 1.33vw + 4px, 20px);
  }

  /* アコーディオン見出し・本文：13px（900px時）→ 15px（1200px時） */
  .product-accordion-header {
    font-size: clamp(13px, 0.67vw + 7px, 15px);
    padding: clamp(18px, 2.33vw + 0px, 25px) 0;
  }
  .product-accordion-content p {
    font-size: clamp(13px, 0.67vw + 7px, 15px);
    line-height: clamp(20px, 1vw + 11px, 23px);
    padding-top: clamp(14px, 2vw - 4px, 20px);
    padding-bottom: clamp(14px, 2vw - 4px, 20px);
  }
}

/* --- スマホサイズ（900px以下） --- */
@media (max-width: 900px) {
  .product-main-content {
    padding-top: 72px;
  }
  /* レイアウトを縦1列に */
  .product-container {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 20px 80px;
  }
  .product-image-wrapper {
    height: auto;
  }
  .product-info {
    padding-top: 50px;
  }
  /* テキストサイズの調整 */
  .product-title {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: 0.05em;
  }
  .product-subtitle {
    font-size: 15px;
  }
  .product-description {
    font-size: 15px;
  }
  /* 価格表示をスマホ用に最適化 */
  .product-price-box {
    padding: 16px 10px;
    flex-direction: row;
    justify-content: space-around;
    gap: 12px;
  }
  .product-price-label {
    order: initial;
    font-size: 14px;
  }
  .product-price-value {
    order: initial;
    font-size: 22px;
  }
  .product-price-unit {
    order: initial;
    font-size: 14px;
    margin-left: 0;
  }
  /* ボタンを縦並びに */
  .product-button-group {
    grid-template-columns: 1fr;
  }
  /* フッター関連の調整 */
  .product-footer {
    padding: 40px 20px;
  }
  .product-footer-content {
    flex-direction: column;
    gap: 40px;
  }
  .product-footer-logo {
    width: 143px;
  }
}