/* ============================================================
    pc-hara_zukuri_basic_set.css（PC/タブレット版）
    ※ 肚づくり基本セット.css と同一の内容です（PC版.html基準、クラス名のみ pc- に統一）。
    ※ タブレット幅（768px〜1023px）・PC幅（1024px〜）のレスポンシブ対応を含みます。
    ============================================================ */

/* 1. [基礎設定 / Global Styles]
    - サイト全体のフォント、背景色、スクロール挙動を定義。
    - モバイル時のタップハイライト無効化や水平スクロール禁止処理を含みます。 */
body {
    margin: 0; padding: 0; 
    background-color: #f5f5f0; 
    color: #2d2d2d;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    position: relative; 
    overflow-x: hidden; 
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth; /* スムーズスクロールを有効化 */
}

/* 2. [質感ノイズ / Texture Overlay]
    - SVGのfractalNoiseを使用した微細なノイズレイヤー。
    - pointer-events: none により、下の要素の操作を妨げません。 */
body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04; pointer-events: none; z-index: 9998; 
}

/* 15-0. [既存セクションのフォント統一]
    - Inter指定がある価格表示(.price-display)は継承より優先されるため、
        数字部分はInterのまま維持される。 */
#anchor1, #anchor2 {
    font-family: 'DNP 秀英角ゴシック銀 Std', sans-serif;
}
/* anchor1とanchor2の間隔だけを詰める（他の余白には影響させない） */
#anchor1 {
    padding-bottom: 40px;
}

/* 15. [製品紹介セクション / Product Section Base] */
.product-section {
    padding: 10px 0 100px;
    background-color: #f5f5f0;
    position: relative;
    z-index: 1;
}
.product-box {
    background-color: #ffffff;
    margin: 0 20px;
    padding: 50px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    position: relative; 
}

/* 16. [製品ラベル / Circular Badge]
    - 右上に配置される円形ラベル（基本セット/単品）。 */
.product-box::after {
    content: none;
    position: absolute;
    top: -30px;    
    right: -10px;  
    width: 80px;
    height: 80px;
    background-color: #189bbc;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 4px 10px rgba(24, 155, 188, 0.3);
    z-index: 2;
}
.product-name-title { font-size: 30px; font-weight: 700; color: #1a2a40; margin: 0; line-height: 1.2; text-align: left; }

/* 見出し(サンレム錠剤/メルゲン錠剤)の右横に製品画像を配置するための行 */
.product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.product-title-img {
    width: 25%;
    flex-shrink: 0;
}
.product-title-img img { width: 100%; height: auto; display: block; }

/* 17. [製品情報フレックスレイアウト（白い箱） / Product Flex Block] */
.product-flex-block { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-top: 30px; 
    gap: 0px; 
    position: relative; 
    z-index: 1; 
}
.product-info-left { flex: 1; font-size: 13px; color: #666666; line-height: 1.6; text-align: left; }
.product-info-left p { margin: 0; }
.spacer-1em { height: 1em; }

/* 18. [⚫︎：ドット装飾 / Colored Dots] */
.dot1 {
    color: #bda16b; 
    font-weight: 900; 
    margin-right: 1px; 
}

.dot2 {
    color: #189bbc; 
    font-weight: 900; 
    margin-right: 1px; 
}

.product-img-right { 
    width: 25%; 
    margin-top: 10px; 
}

.product-img-right img { width: 100%; height: auto; display: block; }

/* 19. [詳しく見るボタン / Detail Button] */
.detail-link {
    display: block;
    width: fit-content;
    margin: 15px auto 0;
    padding: 10px 50px;
    text-align: center;
    color: #1a2a40;
    background-color: #d3d3d3;
    border: 1px solid #1a2a40;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: background-color 0.3s, color 0.3s;
}
/* PC（カーソルを持つ端末）でのみホバー時に色を反転させる */
@media (hover: hover) {
    .detail-link:hover {
        background-color: #1a2a40;
        color: #ffffff;
    }
}

/* 20. [区切り線とメイン画像 / Lines and Main Images] */
.horizontal-line { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 20px 0; position: relative; z-index: 1; }

.main-product-img { width: 100%; margin: 25px 0 40px; position: relative; z-index: 1; }
.main-product-img img { width: 100%; height: auto; display: block; }

/* 21. [価格表示 / Price Display]
    - baseline により数字と単位の底辺を揃えています。 */
.price-display {
    display: flex;             /* 横並びにする設定 */
    justify-content: center;   /* ★ これで中央揃えになります */
    align-items: baseline;     /* 数字と「円」の下を揃える */
    gap: 4px;                  /* 数字と「円」の間の隙間 */
    margin: 15px 0;        /* 下の補足との間を狭く */
    width: 100%;               /* 幅いっぱいに広げて中央を計算させる */
    position: relative;
    z-index: 1;
}
/* 価格の下の注釈用スタイル */
.price-note {
    /* 1. テキストを左揃えにする */
    text-align: left;
    
    /* 2. 横幅をボタンの設定（calc(100% - 60px)）と完全に一致させる */
    width: 95%; 
    max-width: 450px;
    
    /* 3. margin: auto でボタンと同じように中央に配置する */
    /* これにより「中央に配置されたボタンの左端」と位置が揃います */
    margin: 0px auto 15px; 
    
    /* その他（既存のスタイルを維持） */
    font-size: 12px; 
    line-height: 1.5; /* 行間を少し作ると読みやすくなります */
    color: #2d2d2d;
    position: relative;
    z-index: 1;
}

.price-display { font-family: 'Inter', sans-serif; color: #1a2a40; display: flex; align-items: baseline; gap: 4px; position: relative; z-index: 1; flex-wrap: nowrap; white-space: nowrap; }
/* SafariはChromeと異なり、コンマ「,」を数字内の改行可能点として扱うため、
   .price-displayの幅が窮屈になると「20,400」の途中や「合計」の文字間で
   改行されてしまう。white-space:nowrapで明示的に折り返しを禁止する。 */
.price-num { font-size: 30px; font-weight: 800; white-space: nowrap; }
.price-unit-yen { font-size: 18px; font-weight: 700; white-space: nowrap; }
.price-tax-shipping { font-size: 12px; font-weight: 400; color: #2d2d2d; margin-left: 5px; white-space: nowrap; }

/* 22. [カートボタン / Cart Button]
    - transition によるホバーアクションを含みます。 */
.cart-button-container { margin-top: 5px; position: relative; z-index: 1; }
.cart-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background-color: #1a2a40; color: #ffffff; text-decoration: none;
    padding: 18px; border-radius: 5px; font-weight: 500; font-size: 16.5px;
    transition: opacity 0.3s;
}
.cart-btn:hover { opacity: 0.9; }

.cart-icon-svg { width: 20px; height: 20px; fill: #ffffff; }

/* 定期申込カートボタン共通】 */
/* 【定期申込カートボタン共通】 
    形状・フォント・アニメーションを .cart-btn のデザインに統一 */
.btn-cart, .btn-subs { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; /* .cart-btnに合わせる */
    
    /* サイズ・形状（.cart-btnのデザインを適用） */
    padding: 18px; 
    border-radius: 5px; 
    
    /* テキスト設定（.cart-btnのデザインを適用） */
    color: #ffffff; 
    text-decoration: none; 
    font-weight: 700;
    font-size: 16.5px;
    
    /* 動作（.cart-btnのアニメーションを適用） */
    border: none; 
    cursor: pointer; 
    transition: opacity 0.3s;
    
    /* 構造上の配置（元コードの制約を維持） */
    position: relative;
    z-index: 2;
    width: 100%; 
    max-width: 340px; 
    margin: 20px auto;
}

/* ホバー時の挙動を統一 */
.btn-cart:hover, .btn-subs:hover { 
    opacity: 0.9; 
}

/* 【背景色】現行のカラーをそのまま維持 */
.btn-cart { 
    background-color: #1a2a40; 
}

.btn-subs { 
    background-color: #bda16b; 
    margin-bottom: 40px; 
}

/* 【SVGアイコン】現行のサイズとカラー設定をそのまま維持 */
.btn-cart svg, .btn-subs svg { 
    width: 20px; 
    height: 20px; 
    fill: currentColor; 
}

/* 16-2. 【お届け注釈】 */
.delivery-notice {
    text-align: center;
    margin: -35px auto 40px;
    max-width: 340px; /* .btn-subsのmax-widthに合わせる */
    white-space: nowrap; /* 折り返さず、JSでフォントサイズを自動調整する */
    overflow: hidden; /* 調整前に一瞬はみ出すのを防ぐ保険 */
    font-size: 15px;
    color: #666666;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 16-3. 【お届け注釈：強調部分】 */
.highlight-date {
    font-weight: 700;    /* 太字にします */
    color: #bda16b;      /* ゴールド（またはサイトのメインカラー）で強調 */
    font-size: 17px;     /* 少し文字を大きくするとより目立ちます */
}

/* 24. [セクション誘導バナー / Section Navigation Banner]
    - 定期購入エリアへのナビゲーションデザイン。 */
.section-nav-banner {
    margin: 20px 20px 30px;
    text-align: center;
}
/* --- 定期購入エリアの見出し（2行中央揃えの確定設定） --- */
.section-nav-title {
    text-align: center;      /* 文字を中央に */
    line-height: 1.6;        /* 行間を少し広めに（1.5〜1.6が綺麗です） */
    display: block !important; /* 強制的にブロック要素にして改行を有効化 */
    margin: 0 auto 15px;
    font-size: 14px;         /* 下の（）部分のサイズ */
    color: #1a2a40;          /* 色を統一 */
}

.section-nav-title::before, 
.section-nav-title::after {
    display: none;           /* 文字を大きくした際は、線がない方がスッキリします */
}

/* 「定期購入」の大きな文字 */
.highlight-size {
    font-size: 18px;         /* 16pxよりもう少し大きくするとインパクトが出ます */
    font-weight: 700;        /* しっかり太く */
    display: inline-block;   /* 余白制御のため */
    margin-bottom: 5px;      /* 下の（）との隙間 */
    letter-spacing: 0.1em;   /* 文字間隔を広げて高級感を出す */
    color: #1a2a40;
}

/* 25. [定期申込のゴールドボタン / Gold Button Styles] */
.gold-outline-btn {
    display: inline-block;
    padding: 12px 70px;
    white-space: nowrap; /* 文字を絶対に改行させない */
    border: 1px solid #bda16b;
    background-color: #bda16b;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s;
    letter-spacing: 0.05em;
}
.gold-outline-btn:hover {
    background-color: #bda16b;
    color: #fff;
}

/* 26. [TOPへ戻るボタン / To Top Button]
    - スクロール状況に応じて visibility/opacity をJSで制御する前提。 */
.totop-button {
    position: fixed;
    right: 20px;         /* 右端からの距離 */
    bottom: 20px;        /* 下端からの距離 */
    width: 54px;      /* 指定のサイズ */
    height: 54px;     /* 指定のサイズ */
    background-color: #bda16b; /* 指定の背景色 */
    color: #ffffff;      /* 白文字 */
    border-radius: 50%;  /* 正円にする */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 10px;     /* 文字の大きさ */
    font-weight: 200;
    z-index: 9999;       /* 他の要素より手前に表示 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* 軽く影をつけて浮かせます */
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    cursor: pointer;
    opacity: 0;          /* 最初は隠しておく（JSで表示させる場合） */
    visibility: hidden;
    text-align: center;  
}

/* ボタン表示用クラス */
.totop-button.is-show {
    opacity: 1;
    visibility: visible;
}

/* 29. [フェードインアニメーション / Intersection Observer Animations]
    - .is-visible クラスが付与された際、product-box が下から浮き上がる。 */
.product-section {
    overflow: hidden; 
}

/* 実際にアニメーションさせる「白い箱」 Product Flex Blockの初期状態 */
.fade-in-section .product-box {
    opacity: 0;            /* 最初は透明 */
    transform: translateY(40px); /* 40px下に下げておく */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 0.8秒かけて変化 */
    will-change: opacity, transform;
}

/* 画面内に入った（親にis-visibleがついた）時の「白い箱」 Product Flex Blockの状態 */
.fade-in-section.is-visible .product-box {
    opacity: 1;            /* 不透明にする */
    transform: translateY(0);    /* 元の位置に戻る */
}

/* ABOUT以降：要素自身に付与して、画面に入るたびに個別に下からフェードインさせる */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ABOUTは最初から画面内にあるためIntersectionObserverがすぐ発火するが、
    6番目の画像（x_top_m_tsubu.png）のポップイン完了（1.7s開始＋0.6s＝2.3秒後）
    より少し余韻を持たせてフェードイン開始を遅らせる */
.pc-fv-about-heading.scroll-reveal,
.pc-fv-about-text.scroll-reveal {
    transition-delay: 2.6s;
}

/* 同じセッションで2回目以降のアクセス：<html>に.lp4-no-animが付与され、
   ファーストビューのポップイン／scroll-revealの連鎖アニメーションを止めて
   最初から全表示にする（付与自体はbody.tpl先頭の同期スクリプトで実施） */
.lp4-no-anim .pc-fv-haraset-img,
.lp4-no-anim .pc-fv-sanlem-mergen-img,
.lp4-no-anim .pc-fv-sanlem-img,
.lp4-no-anim .pc-fv-mergen-img,
.lp4-no-anim .pc-fv-top-tsubu-img,
.lp4-no-anim .pc-fv-top-m-tsubu-img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
.lp4-no-anim .scroll-reveal,
.lp4-no-anim .fade-in-section .product-box {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.lp4-no-anim .pc-fv-about-heading.scroll-reveal,
.lp4-no-anim .pc-fv-about-text.scroll-reveal {
    transition-delay: 0s !important;
}

/* 33. [スマホ版ファーストビュー / SP First View]
    - iPhone 14 Pro Max（430×932）を基準に、位置・サイズをすべて画面比率（vh/vw）に変換。
        画面サイズが違う端末でも同じ配分で配置され、ABOUT本文の下端まで1画面に収まるようにしている。
    - 全体を60px相当ヘッダー側に詰め、ABOUT本文の下に余白が残るよう圧縮している。
    - ヘッダーは position:fixed のオーバーレイ（高さ0）のため、画面最上部(0px)を基準に配置する。 */
.pc-fv-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh; /* ブラウザのアドレスバー分を考慮した安全な画面高さ */
    overflow: hidden;
}
/* x_mergen.png 〜 x_top_tsubu.png の6点を「最初に配置した間隔感覚」のまま
    1ブロック（上端148.66px・下端623.48px、高さ約474.48px）として扱い、
    ヘッダー(72px)〜ブロック、ブロック〜ABOUT開始位置(約699.8px)の余白が
    どちらも約76.66pxの等間隔になるよう、ブロックごと位置を再計算している。 */
.pc-fv-mergen-img {
    position: absolute;
    top: 14.34%;  /* 133.66 ÷ 932 × 100（148.66pxから15px上げ） */
    right: 8.14%; /* 35 ÷ 430 × 100 */
    width: 43.02%; /* 185 ÷ 430 × 100 */
    height: auto; /* 縦は等倍 */
}
.pc-fv-sanlem-img {
    position: absolute;
    top: 19.71%;  /* 183.66 ÷ 932 × 100（198.66pxから15px上げ） */
    left: 0;      /* 画面左端とぴったり合わせる */
    width: 66.28%; /* 285 ÷ 430 × 100 */
    height: auto; /* 縦は等倍 */
}
.pc-fv-top-m-tsubu-img {
    position: absolute;
    top: 33.12%;  /* 308.66 ÷ 932 × 100（323.66pxから15px上げ） */
    right: 4.19%; /* 18 ÷ 430 × 100 */
    width: 25.35%; /* 109 ÷ 430 × 100 */
    height: auto; /* 縦は等倍 */
}
.pc-fv-haraset-img {
    position: absolute;
    top: 48.14%;  /* 448.66 ÷ 932 × 100（428.66pxから20px下げ） */
    left: 10.47%; /* 45 ÷ 430 × 100 */
    width: 34.88%; /* 150 ÷ 430 × 100 */
    height: auto; /* 縦は等倍 */
}
.pc-fv-sanlem-mergen-img {
    position: absolute;
    top: 63.16%;  /* 588.66 ÷ 932 × 100（568.66pxから20px下げ） */
    left: 10.47%; /* 45 ÷ 430 × 100 */
    width: 34.88%; /* 150 ÷ 430 × 100 */
    height: auto; /* 縦は等倍 */
}
.pc-fv-top-tsubu-img {
    position: absolute;
    top: 44.93%;  /* 418.66 ÷ 932 × 100（433.66pxから15px上げ） */
    right: 6.98%; /* 30 ÷ 430 × 100 */
    width: 31.40%; /* 135 ÷ 430 × 100 */
    height: auto; /* 縦は等倍 */
}
/* iPhone SE（幅375px）以外の端末では、x_haraset.svg / x_sanlem_mergen.svg を
    10%アップ（150px→165px相当）。SEはこの対象から除外し現状サイズを維持。 */
@media (min-width: 381px) {
    .pc-fv-haraset-img,
    .pc-fv-sanlem-mergen-img {
        width: 38.37%; /* 165 ÷ 430 × 100（150pxの10%アップ） */
    }
}
/* ページTOPの6画像：読み込み時に、指定順で「ぽん！」と拡大しながら浮かび上がる */
@keyframes fvPopIn {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.04); } /* 一度大きめに弾ませる（控えめに） */
    80%  { opacity: 1; transform: scale(0.98); } /* 少し戻って */
    100% { opacity: 1; transform: scale(1); }    /* 元のサイズに収まる。表示状態を維持 */
}
.pc-fv-haraset-img {
    animation-name: fvPopIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0.2s; /* 1番目 */
    animation-fill-mode: both;
}
.pc-fv-sanlem-mergen-img {
    animation-name: fvPopIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0.5s; /* 2番目 */
    animation-fill-mode: both;
}
.pc-fv-sanlem-img {
    animation-name: fvPopIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0.8s; /* 3番目 */
    animation-fill-mode: both;
}
.pc-fv-mergen-img {
    animation-name: fvPopIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 1.1s; /* 4番目 */
    animation-fill-mode: both;
}
.pc-fv-top-tsubu-img {
    animation-name: fvPopIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 1.4s; /* 5番目 */
    animation-fill-mode: both;
}
.pc-fv-top-m-tsubu-img {
    animation-name: fvPopIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 1.7s; /* 6番目 */
    animation-fill-mode: both;
}
/* 画像ブロック（x_top_tsubu.png下端 ≈608px）〜画面下端までの領域を
    flexboxで中央揃えにし、ABOUT見出し＋本文の「1セット」の上下の余白が
    画面の高さに関わらず常に均等になるようにする（iPhone SE含む全スマホ対応）。 */
.pc-fv-lower-area {
    position: absolute;
    top: 65.24%; /* 608 ÷ 932 × 100：画像ブロックの下端（x_top_tsubu.png） */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10.47%; /* 45 ÷ 430 × 100：左右余白 */
    box-sizing: border-box;
}
.pc-fv-about-heading {
    margin: 0;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.15em;
}
.pc-fv-about-text {
    margin: 0;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #2d2d2d;
}
/* iPhone SE以外のみ、ABOUTと本文の間に20pxの間隔を設ける */
@media (min-width: 381px) {
    .pc-fv-about-text {
        margin-top: 20px;
    }
}

/* 33-T/34-T. [タブレット版ファーストビュー / Tablet First View]（768px〜1023px）
    左：タイトルロゴ＋ABOUT文、右：製品ビジュアルの2カラム構成に変更。
    子要素の絶対配置はすべて.pc-fv-section（幅・高さ）基準の割合で統一している。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pc-fv-section {
        max-width: 900px;
        margin: 0 auto;
        height: 100vh;
        height: 100svh;
        min-height: 640px;
        max-height: 760px;
        /* cqw単位（コンテナ幅基準の%）を使うためのクエリコンテナ化。
            position:absoluteのtopは本来「高さ」基準だが、cqwなら常に「幅」基準になるため、
            margin基準で配置したx_haraset.svgの角と誤差なく揃えられる。 */
        container-type: inline-size;
    }
    /* --- 「1まとまり」固定配置（PC版と同じ考え方）---
        PC版で固定したバランスを、タブレット幅（768px基準）に合わせて縮小し、
        x_haraset.svgの上端を画面上部から150pxに固定。他5枚も同じ縮小率で
        相対位置を保ったまま配置している。ABOUT（.pc-fv-lower-area以下）は
        今回は対象外のため、直前の設定のまま変更していない。 */
    .pc-fv-haraset-img,
    .pc-fv-sanlem-img,
    .pc-fv-mergen-img,
    .pc-fv-top-m-tsubu-img,
    .pc-fv-top-tsubu-img,
    .pc-fv-sanlem-mergen-img {
        position: absolute;
        display: block;
        margin: 0;
        left: 50%;
        right: auto;
        bottom: auto;
    }
    .pc-fv-haraset-img {
        top: calc(50% - 174px);
        margin-left: -121px;
        width: 242px;
    }
    .pc-fv-sanlem-mergen-img {
        top: calc(50% + 36px);
        margin-left: -121px;
        width: 242px;
    }
    /* ABOUTはPC版と同様、左カラムではなくセクション全体の横幅の中で中央揃えにする。
        本文をwhite-space:nowrapにするため、widthは固定%ではなくfit-contentにして
        文章の実際の幅に合わせる（margin autoのままセンタリングは維持）。 */
    /* x_sanlem_mergen.svg（top:360px、高さ約14.5px→下端約374.5px）の80px下に配置 */
    .pc-fv-lower-area {
        position: absolute;
        top: calc(50% + 131px);
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-50%);
        display: block;
        width: fit-content;
        margin: 0;
        padding: 0;
    }
    .pc-fv-about-heading {
        text-align: center;
    }
    .pc-fv-about-text {
        white-space: nowrap;
        text-align: center;
    }
    /* POP IN順：haraset(0.2s)→wordmark(0.5s)→x_sanlem.png(0.8s)→x_mergen.png(1.1s)
        →x_pc_top_tsubu.png(1.4s)→x_pc_top_m_tsubu.png(1.7s) */
    .pc-fv-sanlem-img {
        top: calc(50% - 270px);
        margin-left: -308px;
        width: 138px;
        animation-delay: 1.4s;
    }
    .pc-fv-mergen-img {
        top: calc(50% + 35px);
        margin-left: 167px;
        width: 104px;
        animation-delay: 1.7s;
    }
    .pc-fv-top-m-tsubu-img {
        top: calc(50% - 146px);
        margin-left: 178px;
        width: 173px;
        animation-delay: 1.1s;
    }
    .pc-fv-top-tsubu-img {
        top: calc(50% - 35px);
        margin-left: -418px;
        width: 240px;
        animation-delay: 0.8s;
    }
    .pc-fv-about-heading {
        font-size: 26px;
    }
    .pc-fv-about-text {
        font-size: 15px;
        margin-top: 16px;
    }
}

/* 33-P/34-P. [PC版ファーストビュー / PC First View]（1024px〜）
    左：タイトルロゴ＋ABOUT文、右：製品ビジュアルの2カラム構成。
    1600px幅を上限にコンテナを中央寄せし、その内側の割合で全要素を配置する。 */
@media (min-width: 1024px) {
    .pc-fv-section {
        max-width: 1600px;
        margin: 0 auto;
        height: 100vh;
        height: 100svh;
        /* 6画像＋ABOUTを固定pxで配置する「1まとまり」に変更したため、
            高さも画面幅に依存しない固定値になる（本文末尾は約684px）。 */
        min-height: 700px;
    }
    /* --- ここから「1まとまり」固定配置 ---
        x_haraset.svg / x_sanlem_mergen.svg / x_sanlem.png / x_mergen.png /
        x_pc_top_tsubu.png / x_pc_top_m_tsubu.png / ABOUT の現在のバランス（1440px時点の
        実測値）をそのままpx値として固定し、画面幅が変わっても崩れない「1つのまとまり」にした。
        水平位置はセクション中央（left:50%）からのオフセット（margin-left）で統一。
        x_haraset.svgの上端を画面上部から90pxに固定し、他要素は元の相対位置を保ったまま
        合わせて移動している（例: wordmarkは元々haraset上端+298pxだったので90+298=388px）。 */
    .pc-fv-haraset-img,
    .pc-fv-sanlem-mergen-img,
    .pc-fv-lower-area,
    .pc-fv-sanlem-img,
    .pc-fv-mergen-img,
    .pc-fv-top-m-tsubu-img,
    .pc-fv-top-tsubu-img {
        position: absolute;
        display: block;
        margin: 0;
        left: 50%;
        right: auto;
        bottom: auto;
    }
    .pc-fv-haraset-img {
        top: calc(50% - 252px);
        margin-left: -161px;
        width: 322px;
    }
    .pc-fv-sanlem-mergen-img {
        top: calc(50% + 28px);
        margin-left: -161px;
        width: 322px;
    }
    /* POP IN順：haraset(0.2s)→wordmark(0.5s)→x_sanlem.png(0.8s)→x_mergen.png(1.1s)
        →x_pc_top_tsubu.png(1.4s)→x_pc_top_m_tsubu.png(1.7s) */
    .pc-fv-sanlem-img {
        top: calc(50% - 342px);
        margin-left: -410px;
        width: 184px;
        animation-delay: 1.4s;
    }
    .pc-fv-mergen-img {
        top: calc(50% + 27px);
        margin-left: 222px;
        width: 138px;
        animation-delay: 1.7s;
    }
    .pc-fv-top-m-tsubu-img {
        top: calc(50% - 215px);
        margin-left: 237px;
        width: 230px;
        animation-delay: 1.1s;
    }
    .pc-fv-top-tsubu-img {
        top: calc(50% - 67px);
        margin-left: -557px;
        width: 320px;
        animation-delay: 0.8s;
    }
    .pc-fv-lower-area {
        top: calc(50% + 136px);
        width: fit-content;
        transform: translateX(-50%);
        padding: 0;
    }
    .pc-fv-about-heading {
        font-size: 32px;
        text-align: center;
    }
    .pc-fv-about-text {
        font-size: 16px;
        line-height: 1.8;
        margin-top: 20px;
        text-align: center;
        white-space: nowrap;
    }
}

/* 35. [ABOUT下カルーセル / Carousel below ABOUT]
    - .pc-fv-section（1画面固定）の外側に配置し、上部レイアウトの計算に影響しないようにする。
    - BOXを横スクロールで表示。角丸つき。 */
.pc-carousel-section {
    background-color: #f5f5f0;
    padding: 30px 0 40px;
}
/* カルーセル前の見出し。BASIC SETと同じフォント設定・左右余白45px */
.pc-carousel-heading {
    margin: 0;
    padding: 0 45px;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.15em;
    box-sizing: border-box;
}
.pc-carousel-text-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 32px;
    padding: 0 45px;
    box-sizing: border-box;
}
.pc-carousel-text-img {
    display: block;
    height: 22.5px; /* テキスト(15px×line-height1.5=約22.5px)の高さに合わせる */
    width: auto;
}
.pc-carousel-text {
    margin: 0;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #2d2d2d;
}
.pc-carousel {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 左右の余白を「(画面幅の半分) - (BOX幅の半分)」にすることで、
        一番端のBOXも中央までスクロールして止まれるようにする */
    padding: 0 calc(50% - 92.5px);
    scroll-snap-type: x mandatory;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox：スクロールバー非表示 */
}
.pc-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari：スクロールバー非表示 */
}
/* カルーセル下のドット誘導（⚪︎5つ、中央に来たBOXのドットが大きくなる） */
.pc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}
.pc-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d3d3d3;
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
.pc-carousel-dot.is-active {
    background-color: #1a2a40;
    transform: scale(1.7);
}
.pc-carousel-box {
    position: relative;
    flex: 0 0 185px;
    width: 185px;
    height: 270px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    scroll-snap-align: center;
    cursor: pointer;
    /* transitionはここでは指定しない。.scroll-revealのopacity/transform 0.8sを
        そのまま使うことで、他のスライドイン要素と動きを完全に統一する
        （以前はこことホバー用ルールで0.15s/0.25sに上書きされ、動きだけ速くなっていた）。 */
}
/* タップ時の視覚フィードバック（誤タップ判定されなかった通常タップのみ付与） */
.pc-carousel-box.is-pressed {
    transform: scale(0.96);
}
/* PCでは横スクロールのカルーセルをやめ、5つのBOXを中央寄せで固定配置にする
    （BOX列の位置はここが基準）。スクロール位置を示すドットも不要なので非表示にする。 */
@media (min-width: 1024px) {
    .pc-carousel {
        overflow-x: visible;
        scroll-snap-type: none;
        justify-content: center;
        padding: 0;
    }
    .pc-carousel-box {
        scroll-snap-align: none;
    }
    .pc-carousel-dots {
        display: none;
    }
    /* MORE見出し・サブテキストをABOUTのタイトルロゴと同様、画面全体の中央揃えにする
        （左揃えのBOX列基準は廃止）。 */
    .pc-carousel-heading {
        padding-left: 45px;
        padding-right: 45px;
        text-align: center;
    }
    .pc-carousel-text-row {
        padding-left: 45px;
        padding-right: 45px;
        justify-content: center;
    }
}
/* PC（マウスカーソルを持つ端末）でのみ、カーソルを乗せるとBOXが少し浮き上がり、
    影が強まる（リフトアップ）演出にする。.pc-carouselはoverflow-x:autoの影響で
    縦方向も暗黙的にクリップされるため、浮き上がり分が見切れないよう解除する。 */
@media (min-width: 1024px) and (hover: hover) {
    .pc-carousel {
        overflow-y: visible;
    }
    /* opacity/transformの0.8sは.scroll-revealと完全に同じ値を維持しつつ、
        box-shadowだけ短いduration（0.25s）を追加する。 */
    .pc-carousel-box {
        transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.25s ease-out;
    }
    .pc-carousel-box:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
    }
}
/* BOX3の中身：画像をBOX全体いっぱいに広げる */
.pc-box3-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 19px; /* .pc-carousel-boxの角丸(20px)から枠線1px分を差し引き */
}
/* BOX4の中身：画像をBOX全体いっぱいに広げる */
.pc-box4-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 19px; /* .pc-carousel-boxの角丸(20px)から枠線1px分を差し引き */
}
/* BOX5の中身：画像は横幅いっぱい・高さは等倍（BOX全体は覆わない） */
.pc-box5-img {
    display: block;
    width: 100%;
    height: auto;
}
/* BOX3中央の見出し：縦横中央配置、テキスト自体は左揃え。画像に重なるため
    視認性を確保する白文字＋テキストシャドウにしている。 */
.pc-box3-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    margin: 0;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}

/* タップできることを示すヒントアイコン（＋） */
.pc-carousel-box-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #1a2a40;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* BOX1の中身：右上に縦書きテキスト、中央に画像、下に見出し */
.pc-box1-vert-text {
    position: absolute;
    top: 15px;
    right: 15px;
    writing-mode: vertical-rl;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #2d2d2d;
}
.pc-box1-img {
    display: block;
    margin: 50px auto 40px; /* 全体を20px上げるため70pxから変更 */
    width: 60.5%;
    height: auto;
    aspect-ratio: 855 / 603; /* x_sanlem.pngの実寸。読み込み前から高さを確保し、読み込み完了時のガタつきを防ぐ */
}
.pc-box1-heading {
    margin: 0;
    padding: 0 15px;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #2d2d2d;
}
.pc-box1-text {
    margin: 15px 0 0;
    padding: 0 15px;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #666666;
}

/* BOX2の中身：BOX1と同じ構成。x_mergen.pngはx_sanlem.pngより30%小さく、
    底辺の位置（148.94px）を揃えている。 */
.pc-box2-vert-text {
    position: absolute;
    top: 15px;
    right: 15px;
    writing-mode: vertical-rl;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #2d2d2d;
}
.pc-box2-img {
    display: block;
    margin: 55.9px auto 40px; /* 画像の底辺とメルゲン見出しの縦位置をBOX1に揃えたうえで、全体を20px上げるため75.9pxから変更 */
    width: 55%;
    height: auto;
    aspect-ratio: 599 / 430; /* x_mergen.pngの実寸。読み込み前から高さを確保し、読み込み完了時のガタつきを防ぐ */
}
.pc-box2-heading {
    margin: 0;
    padding: 0 15px;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #2d2d2d;
}
.pc-box2-text {
    margin: 6px 0 0;
    padding: 0 15px;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #666666;
}
/* BOXタイルの本文は最大2行でクランプ（はみ出た分は自動で省略）。
    モーダル側（同じクラスを全文表示に使う）には影響させないよう、
    .pc-carousel-boxの子孫に限定している。 */
.pc-carousel-box .pc-box1-text,
.pc-carousel-box .pc-box2-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* 3行目は常に固定で「・・・続きを読む」を表示する */
.pc-box-readmore {
    margin: 2px 0 0;
    padding: 0 15px;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #888888;
}

/* BOX下の見出し＋本文。ABOUTと同じフォント設定・左右余白45pxで統一。
    上余白は「ABOUT＋本文ブロックの上下の余白（約72.25px、iPhone 14 Pro Max基準の
    flexbox中央揃えから算出）＋30px」＝約102pxに設定。 */
.pc-basicset-block {
    margin-top: 102px;
    padding: 0 45px;
    box-sizing: border-box;
}
.pc-basicset-heading {
    margin: 0;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.15em;
}
.pc-basicset-item {
    margin-top: 32px;
}
/* 見出し＋英字サブラベルの2行分の高さに画像を合わせる。
    flexのstretchでは画像本来の巨大なサイズが優先されてしまったため、
    高さを直接指定する方式に変更（横幅は比率を保って自動計算） */
.pc-basicset-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* 画像の横幅がサンレム・メルゲンで異なるため、固定幅の枠内で
    画像を中央揃えにする。これによりテキスト側の左端は常に揃い、
    画像は枠の中央（＝互いの中央）に揃う。 */
.pc-basicset-title-img-slot {
    width: 71px; /* サンレム画像の実測横幅（高さ50px時）に合わせる */
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.pc-basicset-title-img {
    display: block;
    height: 50px;
    width: auto;
    margin-left: 6px; /* 枠内で少し右に詰める */
}
.pc-basicset-title-img-mergen {
    height: 42px;
    margin-top: 10px; /* ほんの少し下げる */
}
.pc-basicset-subheading {
    margin: 0;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #000000;
}
.pc-basicset-sublabel {
    margin: 2px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #666666;
}
.pc-basicset-text {
    margin: 10px 0 0;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #2d2d2d;
}
.pc-basicset-text-gray {
    font-weight: normal;
    font-size: 14.5px;
    color: #bda16b;
}
.pc-basicset-text-spaced {
    display: inline-block;
    margin-top: 10px;
}

/* MORE・・・／BASIC SETの見出し・本文をABOUTと同じサイズに統一（タブレット／PC）。
    無条件の元定義（上記）より後に書くことで、同じ詳細度でも確実に上書きされるようにしている。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pc-carousel-heading,
    .pc-basicset-heading {
        font-size: 26px;
    }
    .pc-carousel-text,
    .pc-basicset-text {
        font-size: 15px;
    }
    /* MORE見出し・サブテキストを画面全体の中央揃えにする（PC版と同じ方針）。
        カルーセル本体（.pc-carousel/.pc-carousel-box/.pc-carousel-dots）は
        指示により現状のスクロール式のまま変更しない。 */
    .pc-carousel-heading {
        text-align: center;
    }
    .pc-carousel-text-row {
        justify-content: center;
    }
    /* BASIC SETの見出しを中央揃えにし、下部のサンレム・メルゲンを
        横並び2列＋点線区切りにする（PC版と同じ方針、タブレット幅にあわせて数値を調整）。 */
    .pc-basicset-block {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 30px;
    }
    .pc-basicset-heading {
        text-align: center;
        flex-basis: 100%;
        width: 100%;
    }
    .pc-basicset-item {
        flex: 1 1 0;
        margin-top: 50px;
        padding-right: 24px;
        text-align: center;
    }
    .pc-basicset-item + .pc-basicset-item {
        margin-left: 0;
        padding-left: 24px;
        padding-right: 0;
        border-left: 1px dashed #999999;
    }
    /* 画像とテキストをひとまとまりとして中央揃え（画像はテキストのすぐ左に詰める） */
    .pc-basicset-title-row {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 58px; /* サンレム画像58px・メルゲン画像49pxで高さが違うため大きい方に統一 */
    }
    .pc-basicset-text {
        margin-top: 24px;
    }
    /* 「手軽にそのまま飲める〜」と「溶かしてさらりと飲める〜」の左端を揃える */
    .pc-basicset-text-gray:first-of-type {
        margin-left: -9px;
    }
    /* メルゲン側の本文をサンレム側の強調テキストと同じサイズにし、左揃え＋左右対称の余白に */
    .pc-basicset-item:last-child .pc-basicset-text {
        font-size: 14.5px;
        text-align: left;
    }
    /* 「お客様のライフスタイルに合わせて〜」だけ左揃えにする（上のgray2行は中央揃えのまま維持）。
        display:inline-blockのため、text-alignは自身の中身（2行）だけに作用する。
        フォントサイズはメルゲン側本文（.pc-basicset-item:last-child .pc-basicset-text）と揃える。 */
    .pc-basicset-text-spaced {
        text-align: left;
        font-size: 14.5px;
    }
    /* サンレム/メルゲンの見出し・英字ラベルをBASIC SET見出しより小さい範囲で拡大 */
    .pc-basicset-subheading {
        font-size: 24px;
    }
    .pc-basicset-sublabel {
        font-size: 13px;
    }
    .pc-basicset-title-img-slot {
        width: 80px;
    }
    .pc-basicset-title-img {
        height: 58px;
    }
    .pc-basicset-title-img-mergen {
        height: 49px;
    }
    /* ページ下部の購入BOX（サンレム錠剤/メルゲン錠剤、サンレム粉末/メルゲン錠剤）を
        横並び2列にする（PC版と同じ方針。タブレットは45px余白基準で中央寄せ）。 */
    .product-sections-row {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        margin: 0 45px;
    }
    .product-sections-row .product-section {
        flex: 1 1 0;
        padding: 10px 0 40px;
    }
    .product-sections-row .product-box {
        margin: 0;
    }
    /* x_first_tsubu.pngとx_first_kona.pngのアスペクト比差による高さのズレを解消 */
    .product-sections-row .product-title-row {
        align-items: flex-end;
        height: 110px;
    }
    .product-sections-row .product-title-img {
        width: auto;
    }
    .product-sections-row .product-title-img img {
        width: auto;
        height: 85px;
    }
    .product-sections-row .product-title-img img[src="x_first_kona.png"] {
        height: 110px;
    }
    .product-sections-row .product-title-row > div:first-child {
        margin-left: 20px;
    }
    /* 2列化でカラムが狭くなり、商品名（30px）が単語の途中で折り返っていたため縮小 */
    .product-sections-row .product-name-title {
        font-size: 22px;
    }
    .product-sections-row .product-info-left {
        margin-left: 14px;
    }
    .product-sections-row .product-box {
        padding-top: 30px;
    }
    .product-sections-row .detail-link {
        margin-top: 25px;
    }
    /* 購入する（ネイビー）ボタンの横幅を、定期便を申し込むボタンに統一 */
    .product-sections-row .cart-btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}
@media (min-width: 1024px) {
    .pc-carousel-heading,
    .pc-basicset-heading {
        font-size: 32px;
    }
    .pc-carousel-text,
    .pc-basicset-text {
        font-size: 16px;
        line-height: 1.8;
    }
    /* BASIC SETの見出しをMORE・ABOUTと同様、画面全体の中央揃えにする。
        さらに下部のサンレム・メルゲンを、白いBOXと同様に横並び2列にする
        （白背景は付けず配置だけ変更。見出しはflex-basis:100%で単独の行にする）。
        左右のpaddingは下の白いBOX列（product-sections-row）と同じ計算式に統一。 */
    /* MORE見出しの上の余白（30px）を、BASIC SETの上の余白（102px）と揃える */
    .pc-carousel-section {
        padding-top: 102px;
    }
    .pc-basicset-block {
        padding-left: calc((100% - 985px) / 2);
        padding-right: calc((100% - 985px) / 2);
        display: flex;
        flex-wrap: wrap;
        /* セクション下の余白を追加 */
        padding-bottom: 40px;
    }
    .pc-basicset-heading {
        text-align: center;
        flex-basis: 100%;
        width: 100%;
    }
    .pc-basicset-item {
        flex: 1 1 0;
        /* 見出しとの間の余白を追加（40px→70px） */
        margin-top: 70px;
        padding-right: 40px;
    }
    /* margin-leftを使わず左右対称のpaddingのみにすることで、白いBOX列の左辺〜右辺の
        全幅をちょうど2等分し、区切り線が全体の真ん中に来るようにする
        （以前はmargin-left:40pxの分だけ区切り線が中心より右にずれていた）。 */
    .pc-basicset-item + .pc-basicset-item {
        padding-left: 40px;
        padding-right: 0;
        border-left: 1px dashed #999999;
    }
    /* サンレム・メルゲンそれぞれのカラム内で、画像・文章ともに中央揃えにする */
    .pc-basicset-item {
        text-align: center;
    }
    /* 画像とテキストが離れすぎないよう、画像＋テキストをひとまとまりとして
        中央揃えにする（画像はテキストのすぐ左に詰める）。
        このままだとグループ全体の中心＝テキストの中心ではなく右にずれるため、
        画像とテキストの相対位置を保ったままグループ全体を左に平行移動し、
        テキスト側がセクションの中央に来るようにする（実測に基づき2つで個別調整）。 */
    .pc-basicset-title-row {
        display: flex;
        justify-content: center;
        align-items: center;
        /* サンレム画像65px・メルゲン画像55pxで高さが違うため、行の高さを
            大きい方（65px）に統一し、「サンレム/メルゲン」の文字位置を揃える */
        height: 65px;
    }
    /* title-rowと本文の間の余白を広げる（10px→28px） */
    .pc-basicset-text {
        margin-top: 28px;
    }
    .pc-basicset-item:first-of-type .pc-basicset-title-row {
        transform: translateX(-51px);
    }
    .pc-basicset-item:last-child .pc-basicset-title-row {
        transform: translateX(-71.5px);
    }
    /* メルゲン側の本文を「手軽にそのまま〜」（14.5px）と同じフォントサイズにし、
        上端の高さを揃える。 */
    .pc-basicset-item:last-child .pc-basicset-text {
        font-size: 14.5px;
        text-align: left;
        /* 左側（区切り線からの40px）と同じだけ右側にも余白を設ける */
        padding-right: 40px;
    }
    /* 「手軽にそのまま飲める〜」と「溶かしてさらりと飲める〜」は文字数が1文字違うため、
        中央揃えのままだと左端が微妙にずれる。1行目を少し左にずらして左端を揃える。 */
    .pc-basicset-text-gray:first-of-type {
        margin-left: -11px;
    }
    /* 「お客様のライフスタイルに合わせて〜」だけ左揃えにする（上のgray2行は中央揃えのまま維持）。
        display:inline-blockのため、text-alignは自身の中身（2行）だけに作用する。
        フォントサイズはメルゲン側本文（.pc-basicset-item:last-child .pc-basicset-text）と揃える。 */
    .pc-basicset-text-spaced {
        text-align: left;
        font-size: 14.5px;
    }
    /* サンレム/メルゲンの見出し・英字ラベルをBASIC SET見出し（32px）より小さい範囲で拡大。
        見出しの高さが増える分、左の画像サイズも同じ比率（20px→26pxは1.3倍）で拡大し、
        画像中央揃え用スロット幅も画像の実測比率に合わせて広げる。 */
    .pc-basicset-subheading {
        font-size: 26px;
    }
    .pc-basicset-sublabel {
        font-size: 14px;
    }
    .pc-basicset-title-img-slot {
        width: 92px;
    }
    .pc-basicset-title-img {
        height: 65px;
    }
    .pc-basicset-title-img-mergen {
        height: 55px;
    }
    /* ページ下部の購入BOX（サンレム錠剤/メルゲン錠剤、サンレム粉末/メルゲン錠剤）を
        横並び2列にする。左右の余白はMORE・BASIC SETと同じ計算式で揃え、
        白いBOXの幅は「画面幅－左右余白」を2等分した残りになる。 */
    .product-sections-row {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        margin: 0 calc((100% - 985px) / 2);
    }
    .product-sections-row .product-section {
        flex: 1 1 0;
        padding: 10px 0 60px;
    }
    .product-sections-row .product-box {
        margin: 0;
    }
    /* x_first_tsubu.png（272×237）とx_first_kona.png（234×329）でアスペクト比が
        大きく異なり、幅基準（25%）だと画像の高さが揃わず、見出し行の高さが
        BOXごとに変わって以降の要素が全部ズレていた。画像を高さ基準の固定サイズにし、
        行の下端で揃えることで、2つのBOXの高さを一致させる。 */
    .product-sections-row .product-title-row {
        align-items: flex-end;
        /* x_first_kona.png（130px）を収められるよう、行の高さを2BOX共通で130pxに固定。
            x_first_tsubu.png側は100pxのまま（下端揃えなので上に余白ができるだけ）。 */
        height: 130px;
    }
    .product-sections-row .product-title-img {
        width: auto;
    }
    .product-sections-row .product-title-img img {
        width: auto;
        height: 100px;
    }
    /* x_first_kona.pngだけサイズアップ（tsubu.pngは変更しない） */
    .product-sections-row .product-title-img img[src="x_first_kona.png"] {
        height: 130px;
    }
    /* 見出しテキスト（サンレム錠剤/メルゲン錠剤 側）を右に30px移動。両BOX共通。 */
    .product-sections-row .product-title-row > div:first-child {
        margin-left: 30px;
    }
    /* 商品情報テキスト（内容量・価格の箇条書き）を右に20px移動（30pxから10px戻す）。両BOX共通。 */
    .product-sections-row .product-info-left {
        margin-left: 20px;
        /* フォントサイズを少しUP（13px→14px） */
        font-size: 14px;
    }
    /* BOX内側の上部余白を50px→30pxに詰める */
    .product-sections-row .product-box {
        padding-top: 30px;
    }
    /* 「どんな製品？」ボタンの上の余白を15px→35pxに広げる */
    .product-sections-row .detail-link {
        margin-top: 35px;
    }
    /* 購入する（ネイビー）ボタンの横幅を、定期便を申し込むボタン（幅340px・中央寄せ）に統一 */
    .product-sections-row .cart-btn {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        /* .btn-subsはbox-sizing:border-boxだがcart-btnはcontent-boxのままで、
            padding18px分（左右36px）だけ実際の幅がズレていたため揃える */
        box-sizing: border-box;
    }
}

/* 36. [カルーセルBOX用モーダル / Carousel Box Modal]
    - 全BOX共通の1つのモーダルを使い回し、タップされたBOXの内容だけ差し替える。 */
.pc-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
.pc-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.pc-modal {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 480px; /* スマホの画面幅より確実に広く取り、20pxの余白が上限にぶつからないようにする */
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px 40px 30px;
    box-sizing: border-box;
    transform: translateY(20px);
    transition: transform 0.3s;
}
.pc-modal:has(.pc-box5-modal-hero) {
    padding-left: 40px;
    padding-right: 40px;
}
.pc-modal-overlay.is-open .pc-modal {
    transform: translateY(0);
}
.pc-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #2d2d2d;
    cursor: pointer;
}
.pc-modal-content {
    position: relative;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #2d2d2d;
}
/* モーダル内の本文・見出しサイズを統一（BOXタイル側のサイズには影響させない）。
    本文は16pxに統一し、見出しはそれに対してバランスの良い大きめサイズにする。
    今後BOX2以降のテンプレートを追加する際も、見出しは *-heading、本文は *-text の
    クラス名にしておけば自動的にこのサイズが適用される。 */
.pc-modal-content h3,
.pc-modal-content [class$="-heading"] {
    font-size: 22px;
    line-height: 1.4;
}
.pc-modal-content p,
.pc-modal-content [class$="-text"] {
    font-size: 16px;
    line-height: 1.7;
}
/* モーダル1・2内の画像だけ20%縮小（BOXタイル側の.pc-box1-img/.pc-box2-imgには影響させない） */
.pc-modal-content .pc-box1-img {
    width: 48.4%; /* 60.5%の80% */
}
.pc-modal-content .pc-box2-img {
    width: 44%; /* 55%の80% */
}

/* BOX3のモーダル：上下に画像（横幅いっぱい・高さ等倍）、中央に見出し＋本文2段落 */
.pc-box3-modal-img {
    display: block;
    width: 80%;
    height: auto;
    aspect-ratio: 2655 / 600; /* x_pc_box3_pop1/2.pngの実寸。読み込み前から高さを確保し、読み込み完了時のガタつきを防ぐ */
    margin: 40px auto 0; /* 中央揃え */
}
.pc-box3-modal-img:first-child {
    margin-top: 0;
}
.pc-box3-modal-heading {
    margin: 24px 0 0;
    text-align: center;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #000000;
}
.pc-box3-modal-text {
    width: 80%;
    margin: 40px auto 0; /* 画像と横幅・中央揃えを統一 */
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    color: #2d2d2d;
}
/* 本文同士の間だけ、1行分の余白に詰める */
.pc-box3-modal-text + .pc-box3-modal-text {
    margin-top: 16px;
}
/* BOX3のモーダルだけ、本文15px・見出し18pxに変更（他のモーダルには影響させない） */
.pc-modal-content .pc-box3-modal-heading {
    font-size: 18px;
}
.pc-modal-content .pc-box3-modal-text {
    font-size: 15px;
}

/* BOX4のモーダル：上部に画像、下に本文4段落。3段落目と4段落目の間は
    （改行）指定があったため、他の段落間より広めの余白にしている。 */
.pc-box4-modal-img {
    display: block;
    width: 60%; /* モーダル3と同様に40%小さく */
    height: auto;
    aspect-ratio: 996 / 509; /* x_box4_pop.pngの実寸。読み込み前から高さを確保し、読み込み完了時のガタつきを防ぐ */
    margin: 0 auto; /* 中央揃え */
}
.pc-box4-modal-text {
    margin: 16px 0 0;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    color: #2d2d2d;
}
.pc-box4-modal-text-break {
    margin-top: 32px;
}

/* BOX5のモーダル：本文は画像(x_box5_pop1.png)より長いため、重ねると
    画像の文字にかぶってしまう。画像の下に自然に続ける配置に変更し、
    左余白（画像内の縦書きテキストと横位置を揃えるイメージ）だけ残している。
    背景がほぼ白のため、文字色は黒（テキストシャドウなし）にしている。
    2枚目の画像(x_box5_pop2.png)はモーダル下部・右寄せに配置。 */
.pc-box5-modal-hero {
    width: 100%;
}
.pc-box5-modal-hero-img {
    display: block;
    width: 93.5%; /* 85%からさらに10%大きく */
    height: auto;
    aspect-ratio: 1170 / 718; /* x_pc_box5_pop1.pngの実寸。読み込み前から高さを確保し、読み込み完了時のガタつきを防ぐ */
}
.pc-box5-modal-hero-text {
    /* margin-topのパーセンテージは「要素の横幅」基準で計算されるため、
        画像の高さ（横幅に比例＝height:auto）と同じ基準で連動してスケールする。
        これにより画面幅が変わっても「食文化」から本文までの位置関係が一定に保たれる。
        x_box5_pop1.png（1016×844px）の実測値から、
        画像の高さ＝横幅の83.07%、「食文化」の下端＝横幅の21.66%の位置だが、
        画像自体をwidth:93.5%に縮小したため、コンテナ横幅基準では
        画像の高さ＝77.67%（83.07%×0.935）、「食文化」の下端＝20.25%（21.66%×0.935）。
        本文の開始位置をそこから30px下にしたいので、
        margin-top = -(77.67% + 16px padding) + (20.25% + 30px) = -57.42% + 14px */
    margin-top: calc(-57.42% + 14px);
    padding: 16px 12px 0 16%; /* 左側は画像内の縦書きテキストを避けつつ、できるだけ幅を確保 */
    box-sizing: border-box;
    position: relative; /* 画像の上に重なって表示されるようにする */
}
.pc-box5-modal-text {
    margin: 0;
    text-align: left;
    font-family: 'DNP 秀英角ゴシック銀 Std', 'Noto Sans JP', sans-serif;
    color: #000000;
}
/* モーダル共通ルール（[class$="-text"]、font-size:16px）より詳細度を上げて確実に上書きする */
.pc-modal-content .pc-box5-modal-text {
    font-size: 14.5px;
}
.pc-box5-modal-text-break {
    margin-top: 20px;
}
.pc-box5-modal-pop2 {
    display: block;
    /* 画像差し替え（横に長い新画像、高さは旧画像とほぼ同じ）に伴い、
        高さは変えずに横幅だけ新しい実寸比に合わせて拡大。
        旧: 941×334 → 新: 1345.0096×334.2636（高さがほぼ同じなので
        width% = 旧50% × (1345/941) ≈ 71.47%）。 */
    width: 71.47%;
    height: auto;
    aspect-ratio: 1345.0096 / 334.2636; /* x_pc_box5_pop2.pngの実寸（差し替え後）。読み込み前から高さを確保し、読み込み完了時のガタつきを防ぐ */
    margin: 30px 20px 15px auto; /* 右端ギリギリから20px左へ */
}

/* BOX1・BOX2の縦見出し：閉じるボタン（✖️）付近の高さまで引き上げ、
    フォントサイズ22pxで表示する。BOXタイル側には影響させない。
    top位置は実機確認のうえ !important で確定した実測値（要因は特定できていない）。
    文字数差（BOX1:6文字／BOX2:13文字）によりtopの必要な値が異なるため、
    BOX1・BOX2それぞれ個別に指定している。 */
.pc-modal-content .pc-box1-vert-text,
.pc-modal-content .pc-box2-vert-text {
    font-size: 22px;
}
.pc-modal-content .pc-box1-vert-text {
    top: -65px !important;
    right: 35px !important;
    font-size: 24px;
}
/* BOX2は文字数が多く（13文字）縦の列が長く伸びすぎるため、
    BOX1（6文字）より小さいフォントサイズにして列の長さを抑える。
    top:-100pxはモーダル上辺を超えて見切れてしまっていたため、
    見切れない範囲の-30pxに戻している。 */
.pc-modal-content .pc-box2-vert-text {
    top: -30px !important;
    right: 35px !important;
    font-size: 20px;
}
/* モーダル1・2の「サンレム」「メルゲン」見出しを中央揃えに（BOXタイル側は左揃えのまま） */
.pc-modal-content .pc-box1-heading,
.pc-modal-content .pc-box2-heading {
    text-align: center;
}

/* モーダルの横幅をPC・タブレットで拡大し、内容が一画面に収まりやすくする
    （元の480pxはスマホ基準のため、SP版では別ファイル管理なのでここは触ってよい）。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pc-modal {
        max-width: 600px;
    }
}
@media (min-width: 1024px) {
    .pc-modal {
        max-width: 740px;
    }
}