/* =====================================
   レスポンシブの基本設定
===================================== */
/* box-sizing: border-box をすべての要素に適用 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* =====================================
   プロの品質：ユーザビリティ向上
===================================== */
/* スクロールを滑らかにする（PC/タブレット） */
html {
  scroll-behavior: smooth;
}
/* スマホでリンクをタップした時の青いハイライトを無効化 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* =====================================
   基本設定とフォント
===================================== */
body {
  /* 明朝体を基本に設定し、標準サイズを定義 */
  font-family: 'Hiragino Mincho ProN', 'serif'; 
  font-size: 15px; 
  line-height: 1.8;
  color: #333;
}

/* =====================================
   LP冒頭（イントロメッセージ）: 余白と区切り線の調整
===================================== */
.intro-message {
  text-align: center;
  padding: 60px 16px; 
  /* ↓↓↓ 修正: 線より下の余白は ::after に任せるため削除 ↓↓↓ */
  padding-bottom: 0; 
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.intro-message::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background-color: #ccc;
  margin: 40px auto; /* ↓↓↓ 修正: 上下40pxのマージンに統一 ↓↓↓ */
}

.intro-message p {
  /* ... (既存のスタイルを維持) ... */
  font-family: inherit;
  
  /* ↓↓↓ 段落間のマージンを追加し、区切りを明確にする ↓↓↓ */
  margin-bottom: 1.5em; 
}

/* 最後の段落は下マージンを解除 */
.intro-message p:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .intro-message p {
    font-size: 13px;
    line-height: 1.6;
  }
}

/* =====================================
   メインセクション (main-content): セクション間の余白を明確化
===================================== */
.main-content {
  /* ↓↓↓ 修正: 線がこのセクションの上部余白を兼ねるように調整 ↓↓↓ */
  padding-top: 0; 
  padding-bottom: 60px; 
  margin: 0 auto;
}

@media (max-width: 600px) {
  .main-content {
    padding-top: 40px; 
    padding-bottom: 40px;
  }
}


/* =====================================
   商品名と金額: 整列とフォントの調整
===================================== */

/* 商品行全体: 上下ボーダーで商品を区切る */
.product-row {
  max-width: 600px;
  margin: 0 auto;
  /* ↓↓↓ 修正: 左右パディングの管理を max-width のみで行うために、一旦リセット ↓↓↓ */
  /* padding: 8px 16px; の記述を削除（または0に）*/
  padding-left: 0;
  padding-right: 0;
}

/* 最後の商品の下線は不要（キャプションの前） */
.main-content .product-row:last-of-type {
    border-bottom: none;
}

.product-row .product-link {
  padding: 8px 16px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease; /* ホバー効果のアニメーション設定を追加 */
}

.product-row .product-link:hover {
  opacity: 0.85; /* ホバーで少し透明にする */
}

/* 商品名 (h1.product-name): 少し大きくし、強調 */
.product-name {
    /* ↓↓↓ フォントを少し大きくし、読みやすく ↓↓↓ */
    font-size: 0.9rem; 
    font-weight: 500; /* 標準より少し太く */
    color: #333;
    letter-spacing: 0.05em;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0; 
    white-space: normal; 
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
 
    letter-spacing: 0.08em; /* 文字間隔を少し広げる */
}


/* 金額＋Check (div.price-check) */
.price-check {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; 
  white-space: nowrap; 
}

/* 金額とチェックボタンのフォントを統一・強調 */
.price-check .price,
.price-check .check-btn {
  /* ↓↓↓ Playfair Display を適用し、高級感を出す ↓↓↓ */
  font-family: 'Playfair Display', serif; 
  font-size: 0.9rem; 
  font-weight: 700;
  text-decoration: none;
}

/* チェックボタン: サイズを調整し、目立たせる */
.price-check .check-btn {
/* Playfair Display を適用し、高級感を出す */
  font-family: 'Playfair Display', serif; 
  /* ↓↓↓ 修正: ボタン内の文字は商品名と同じサイズで統一感を出す ↓↓↓ */
  font-size: 0.9rem; 
  font-weight: 700;
  text-decoration: none;
  background-color: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
.price-check .check-btn:hover {
  opacity: 0.7;
}

/* 価格のフォントサイズを商品名よりわずかに大きくする */
.price-check .price {
  /* Playfair Display を適用し、高級感を出す */
  font-family: 'Playfair Display', serif; 
  /* ↓↓↓ 修正: 商品名(0.9rem)より大きく、視線を集める ↓↓↓ */
  font-size: 1rem; 
  font-weight: 700;
  text-decoration: none;
}


/* =====================================
   商品キャプション（雑誌風）
===================================== */
.product-caption {
  max-width: 400px;
  /* ↓↓↓ 余白を調整し、画像・リストとの区切りを明確化 ↓↓↓ */
  margin: 40px auto; 
  text-align: justify;
  font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 0.9rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: #333;
  color: #555; /* 色を少し濃くする */
}

@media (max-width: 600px) {
  .product-caption {
   /* ↓↓↓ 修正: 左右のパディングを増やし、内側の幅を狭くする ↓↓↓ */
    padding-left: 32px !important;
    padding-right: 32px !important; 
    
    /* max-width: 100% を再定義し、パディングによるはみ出しを防ぐ */
    max-width: 100% !important;
    font-size: 0.85rem;
    line-height: 1.6; 
    text-align: justify;
    margin-top: 20px; /* スマホ時の上部余白を調整 */
    margin-bottom: 30px;
  }
}

/* =====================================
   フローティングリンク（固定）
===================================== */
/* (既存のスタイルを維持/統一) */
.floating-link {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 8px 16px;
  font-size: 0.75rem;
  border-radius: 20px;
  text-decoration: none;
  z-index: 1000;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.floating-link:hover {
  opacity: 1;
  background-color: #000;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 500px) {
  .floating-link {
    font-size: 0.65rem;
    padding: 6px 12px;
    bottom: 16px;
    right: 16px;
  }
}

/* =====================================
   その他（トップ画像/アニメーション）
===================================== */
.main-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.example {
  position: relative;
}
.fade-in-section {
    /* 修正1: アニメーション時間を3秒から0.8秒に短縮し、メリハリをつける */
    transition: opacity 2.0s ease, transform 2.0s ease; 
    transition-property: opacity, transform;
    /* デフォルトの遅延時間は0秒（トップ画像などに適用） */
    transition-delay: 0s;
}

.fade-in-section:not(.visible) {
    opacity: 0;
    transform: translateY(20px);
}
.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ↓↓↓ 修正2: 各要素に明確な時間差を設定 ↓↓↓ */

/* イントロメッセージ (delay-1) */
.delay-1 {
    transition-delay: 0.5s; 
}

/* 商品１セクション (delay-2) */
/* delay-2 の時間を長くし、次の要素との差を明確にする */
.delay-2 {
    transition-delay: 1.0s;
}

/* 商品２セクション (delay-3) */
/* 新たに delay-3 を追加 */
.delay-3 {
    transition-delay: 1.5s; 
}

/* =====================================
   スマホでの調整 (600px以下)
===================================== */
@media (max-width: 600px) {
  /* 商品リストの横並び設定は維持しつつ、サイズを調整 */
  .product-row {
    flex-direction: row; 
    /* ↓↓↓ 左右のパディングは product-link で管理するため削除 ↓↓↓ */
    padding: 0; /* 6px 16px から 0 に変更 */
  }

/* 1. product-row の flex を解除し、縦積みにする */
    .product-row .product-link {
        /* ↓↓↓ 修正: 横並び（flex）からブロック要素（縦並び）に変更 ↓↓↓ */
        display: block; 
        
        /* padding は維持 (6px 16px) */
    }
    /* 2. 商品名：幅いっぱいに使う */
    .product-name {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important; /* ↓↓↓ 修正: 価格との間隔を詰める ↓↓↓ */
        text-align: left !important;
        width: 100% !important;
    }

    /* 3. 金額とチェックボタン：右寄せにしてコンパクトに見せる */
    .price-check {
        /* ↓↓↓ 修正: float を使って右寄せにするか、width 100% で右寄せにする ↓↓↓ */
        display: flex; /* 横並びは維持 */
        justify-content: flex-end; /* 右端に寄せる */
        gap: 4px;
        width: 100%;
        margin-top: 0;
    }

  /* product-caption のスマホ設定をクリーンアップ */
  .product-caption {
    padding: 0 16px; /* 左右16pxの余白を確保 */
    max-width: 100%; /* 親要素の幅に追従 */
  }
  .price-check .price,
    .price-check .check-btn {
        font-size: 0.8rem !important;
    }

  .price-check {
    gap: 4px; /* 間隔を詰める */
  }
}


/* =====================================
   画像カルーセル (商品ごとのスライド) : 最適化されたCSS
===================================== */

/* 1. 画像カルーセル全体を囲むコンテナ (元.main-image-wrapperの代わり) */
.carousel-wrapper-inner {
  position: relative;
  /* 💡 修正なし: PCでの表示幅を600pxまでに制限する */
  max-width: 600px; 
  margin: 0 auto;
  overflow: hidden; 
  padding: 0; 
}


/* 2. スライドアイテムを横に並べるトラック */
.carousel-track-inner {
  /* display: flex; はそのまま */
  display: flex;
  /* 💡 修正: トラックの幅は画像を横に並べるために必要なだけ広げる */
  width: 100%; 
  transition: transform 0.4s ease-in-out; 
  position: relative; 
}

/* 3. 個々の画像アイテム */
.slide-image-item {
  /* 💡 最重要修正: 画像アイテムの幅を、常に親要素（トラック）の 100% の幅に強制する */
  /* ここが抜けていると、画像は元のピクセルサイズで表示されてしまいます */
  width: 100%; 
  min-width: 100%; 
  flex-shrink: 0;
  position: relative;
  /* 画像の縦横比を 1500:1800 (5:6) に統一 */
  padding-top: 120%; 
  height: 0; 
  overflow: hidden; 
}

/* 4. 画像自体のサイズを、スライドアイテムの幅に強制的に合わせる */
.slide-image-item .main-image {
    width: 100%; 
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /* 💡 修正: 画像をコンテナいっぱいに広げ、必要なら切り抜き */
    object-fit: cover; 
    /* 💡 追加: わずかな隙間やはみ出しを防ぐため、少しだけ拡大して確実に覆う */
    transform: scale(1.001); 
}

/* 4. ドットナビゲーション（目立たないデザイン） */
.carousel-dots-nav-inner {
  position: absolute; /* 画像上に重ねて配置 */
  bottom: 10px; /* 画像の下端から10px上 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10; 
}

.carousel-dots-nav-inner .dot-inner {
  display: inline-block;
  width: 6px; /* 小さなサイズ */
  height: 6px;
  margin: 0 3px;
  border-radius: 50%;
  background-color: #fff; /* 画像の上で視認しやすい白 */
  opacity: 0.5; /* 半透明で目立たなくする */
  transition: opacity 0.3s;
}

/* 5. 現在表示中のドット */
.carousel-dots-nav-inner .dot-inner.active {
  opacity: 1.0; 
  background-color: #ccc; /* アクティブは少し濃い色 */
}

/* スマホ対応 */
@media (max-width: 600px) {
  .carousel-dots-nav-inner {
    bottom: 8px;
  }
}

/* =====================================
   💡 追加: 画像カルーセル (矢印ボタン)
===================================== */

/* 矢印ボタン（左右共通） */
.carousel-arrow {
  position: absolute;
  top: 50%; /* 上下中央 */
  transform: translateY(-50%);
  z-index: 20; /* ドットより手前 */
  background-color: rgba(255, 255, 255, 0.4); /* 目立たない半透明の白 */
  border: none;
  border-radius: 50%; /* 丸くする */
  width: 30px;
  height: 30px;
  cursor: pointer;
  opacity: 1; /* 普段は透明 */
  transition: opacity 0.3s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* カル―セルにマウスオーバーした時だけ矢印を表示 */
.carousel-wrapper-inner:hover .carousel-arrow {
  opacity: 1;
}

/* 矢印ボタン（左） */
.carousel-arrow.prev {
  /* コンテナの左パディング(16px) + 少し内側(4px) */
  left: 20px; 
}

/* 矢印ボタン（右） */
.carousel-arrow.next {
  /* コンテナの右パディング(16px) + 少し内側(4px) */
  right: 20px;
}

/* 矢印ボタン内のSVGアイコン */
.carousel-arrow svg {
  width: 12px;
  height: 12px;
  fill: #333; /* アイコンの色 */
}


/* =====================================
   💡 最終修正: 画像はみ出しの強制調整 (PC)
===================================== */

/* 1. カルーセルラッパーが確実に横幅を制限し、はみ出しを隠す */
.carousel-wrapper-inner {
    /* max-widthが効かない場合に備えて、widthも明示的に設定（画面幅の100%だが、max-widthで制限される） */
    width: 100%; 
    max-width: 600px !important; /* 💡 最強の強制力で600pxに制限 */
    /* 念のため、はみ出しを確実に隠す */
    overflow: hidden !important; 
}

/* 2. トラック内の画像アイテムが親要素の幅を絶対にはみ出さないようにする */
.slide-image-item {
    /* 💡 最強の強制力で100%幅に固定 */
    width: 100% !important; 
    min-width: 100% !important;
}

/* 3. 画像自体がコンテナからはみ出さないように、強制的な transform を削除 */
.slide-image-item .main-image {
    /* 💡 修正: はみ出しの原因となる可能性のある scale を削除/上書き */
    transform: none !important; 
}