/* ============================================================
   medicine.css — 製品一覧ページ レスポンシブ拡張（試作）
   ------------------------------------------------------------
   - デスクトップ表示（HTML内の確認用 <style>）は維持する。
     本ファイルは <style> の後に読み込み、T/M の差分のみ上書きする。
   - Figma: Desktop 134:2 / Tablet 806:84 / Mobile 805:66
   - Breakpoints: タブレット ≤768px / モバイル ≤480px
   - 本番CSSはメディアートにて調整。ここでは挙動の骨子を実装する。
   ============================================================ */

/* 医薬品一覧テーブルの横スクロール枠（下地）。
   デスクトップ(>940px)ではコンテナ(1000px)内に収まりスクロールは発生しない。 */
.MedicineTable__scroll { position: relative; width: 100%; }

/* 表頭を縦スクロールに追従（sticky）。
   デスクトップ(>940px)は横スクロール枠が無いため、ページスクロールで
   ビューポート上端に固定される。2段ヘッダーは2段目を1段目の直下に固定する。 */
.MedicineTable thead th { position: sticky; top: 0; z-index: 3; }
.MedicineTable thead tr:nth-child(2) th { top: 38px; }
.MedicineTable thead .MedicineTable__nameHead { z-index: 5; }

/* プレビュー用ヘッダー検索ボックスの flex はみ出し防止（min-width:0 で200px枠内に収める） */
.Header__search { min-width: 0; }
.Header__search input { min-width: 0; }

/* プレビュー用ヘッダーのアイコンボタン（T/M で表示） */
.Header__icon { display: none; background: none; border: none; cursor: pointer;
  color: #005CC5; font-size: 20px; padding: 8px; line-height: 1; }

/* ============================================================
   Tablet: ≤768px
   Figma 806:84 に準拠（SubNav は中央寄せ折返し、表は横スクロール）
   ============================================================ */

/* ===== PC基準スタイル（旧・各HTMLインラインstyleを外部化。
   モバイル上書きが打ち消されないよう @media より前に配置） ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; color: #212121; background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ===== Header（プレビュー用。本番では バナーヘッダー モジュールに置き換え） ===== */
.Header { width: 100%; border-top: 4px solid #005CC5; }
.Header__bar { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 40px; border-bottom: 1px solid #ccc; }
.Header__logos { display: flex; align-items: center; gap: 20px; }
.Header__logos img:first-child { width: 59px; height: 30px; object-fit: contain; }
.Header__logos img:last-child { width: 96px; height: 30px; object-fit: contain; }
.Header__nav { display: flex; align-items: center; gap: 20px; }
.Header__nav a { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #000; line-height: 20px; }
.Header__nav a i { font-size: 14px; color: #005CC5; }
.Header__members { display: flex; align-items: center; gap: 8px; }
.Header__members a { display: inline-block; background: #005CC5; color: #fff; font-size: 11px; font-weight: 700; padding: 7px 14px; border-radius: 2px; border: 1px solid #005CC5; line-height: 14px; }
.Header__search { display: flex; align-items: center; width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 0 8px 0 10px; }
.Header__search input { flex: 1; border: none; outline: none; font-size: 12px; color: #999; font-family: 'Noto Sans JP', sans-serif; background: transparent; }
.Header__search button { font-size: 11px; color: #1F78D9; white-space: nowrap; cursor: pointer; border: none; background: none; }

/* ===== SubNav（製品情報セクション二次ナビ） ===== */
.SubNav { border-bottom: 1px solid #ccc; }
.SubNav__list { max-width: 1000px; margin: 0 auto; display: flex; justify-content: center; list-style: none; flex-wrap: wrap; }
.SubNav__item a { display: flex; align-items: center; gap: 5px; padding: 16px 20px; font-size: 18px; color: #212121; }
.SubNav__item.is-active a { color: #005CC5; border-bottom: 3px solid #005CC5; font-weight: 700; }

/* ===== Main ===== */
.Main { max-width: 1000px; margin: 0 auto; padding: 24px 0 80px; }

/* ===== TopicPath（パンくず） ===== */
.TopicPath { display: flex; list-style: none; font-size: 13px; color: #828282; line-height: 20px; gap: 4px; margin-bottom: 24px; }
.TopicPath a { color: #828282; }
.TopicPath a:hover { text-decoration: underline; }
.TopicPath li + li::before { content: '>'; margin-right: 4px; }

/* ===== Footer（プレビュー用。本番では バナーフッター モジュールに置き換え） ===== */
.Footer { max-width: 1000px; margin: 40px auto 0; background: #f5f5f5; padding: 16px 20px; }
.Footer__links { font-size: 11px; color: #828282; margin-bottom: 6px; }
.Footer__links a { color: #828282; }
.Footer__copyright { font-size: 11px; color: #828282; }

/*
製品情報トップ
 */

/* ===== ProductContent ===== */
.ProductContent__title { font-size: 28px; font-weight: 700; line-height: 40px; letter-spacing: 0.56px; padding: 20px 15px; background: #fafafa; position: relative; margin-bottom: 32px; }
.ProductContent__title::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: calc(100% - 20px); background: #005CC5; }

/* ===== KanaNav（50音検索バー） ===== */
.KanaNav { border: 1px solid #e8e7e7; border-radius: 4px; padding: 16px 20px; margin-bottom: 32px; }
.KanaNav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; }
.KanaNav__item a,
.KanaNav__item span { display: inline-block; min-width: 60px; text-align: center; padding: 6px 14px; font-size: 15px; font-weight: 700; border-radius: 999px; }
.KanaNav__item a { color: #005CC5; background: #fff; border: 1px solid #005CC5; }
.KanaNav__item a:hover { background: #005CC5; color: #fff; }
.KanaNav__item.is-disabled span { color: #bdbdbd; background: #f5f5f5; border: 1px solid #e0e0e0; cursor: default; }

/* ===== MedicineTable（医療用医薬品一覧） ===== */
.MedicineTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.MedicineTable thead th { background: #005CC5; color: #fff; font-weight: 700; line-height: 1.4; padding: 10px 6px; border: 1px solid #fff; text-align: center; vertical-align: middle; }
.MedicineTable__nameHead { width: 210px; text-align: left; padding-left: 12px; }
.MedicineTable__nameHead span { display: block; font-size: 11px; font-weight: 400; margin-top: 4px; }
.MedicineTable__groupRow th { background: #eef2f6; color: #005CC5; font-weight: 700; font-size: 14px; text-align: left; padding: 6px 12px; border: 1px solid #e8e7e7; }
.MedicineTable tbody td,
.MedicineTable__name { border: 1px solid #e8e7e7; padding: 12px 6px; vertical-align: middle; }
.MedicineTable__name { text-align: left; padding-left: 12px; font-weight: 400; }
.MedicineTable__name a { color: #005CC5; text-decoration: underline; }
.MedicineTable__name a:hover { text-decoration: none; }
.MedicineTable__cell { text-align: center; white-space: nowrap; }
.MedicineTable__pdf { display: inline-flex; align-items: center; gap: 5px; background: #d0021b; color: #fff; font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: 3px; }
.MedicineTable__pdf:hover { opacity: 0.85; }
.MedicineTable__view { display: inline-flex; align-items: center; gap: 5px; background: #f0f0f0; color: #212121; font-size: 12px; padding: 5px 10px; border-radius: 3px; border: 1px solid #d8d8d8; }
.MedicineTable__view:hover { background: #e6e6e6; }
.MedicineTable__view i { font-size: 10px; color: #005CC5; }
.MedicineTable__faq { display: inline-flex; align-items: center; color: #005CC5; font-size: 12px; font-weight: 700; padding: 5px 12px; border: 1px solid #005CC5; border-radius: 3px; }
.MedicineTable__faq:hover { background: #005CC5; color: #fff; }
.MedicineTable__none { color: #bdbdbd; }

/* ===== RecommendLinks（おすすめリンク） ===== */
.RecommendLinks { margin-top: 56px; }
.RecommendLinks__title { font-size: 20px; font-weight: 700; line-height: 30px; padding-left: 12px; position: relative; margin-bottom: 20px; }
.RecommendLinks__title::before { content: ''; position: absolute; left: 0; top: 3px; width: 4px; height: calc(100% - 6px); background: #005CC5; }
.RecommendLinks__banners { display: flex; gap: 20px; flex-wrap: wrap; }
.RecommendLinks__banner { display: block; width: 320px; max-width: 100%; border-radius: 4px; overflow: hidden; }
.RecommendLinks__banner img { width: 100%; height: auto; display: block; }
.RecommendLinks__banner:hover { opacity: 0.85; }

/*
製品情報＞製品詳細ページ
 */

/* ===== 製品H1 ===== */
.ProductH1 { font-size: 28px; font-weight: 700; line-height: 40px; letter-spacing: 0.56px; padding: 20px 15px; background: #fafafa; position: relative; }
.ProductH1::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: calc(100% - 20px); background: #005CC5; }
.ProductH1Separator { height: 1px; background: #e0e0e0; margin: 0 0 32px; }

/* ===== 2カラムレイアウト ===== */
.ProductLayout { display: flex; gap: 30px; align-items: flex-start; }
.ProductLayout__side { width: 200px; flex-shrink: 0; }
.ProductLayout__main { flex: 1; min-width: 0; }

/* ===== サイドバー（製品名一覧） ===== */
.ProductSidebar__title { font-size: 16px; font-weight: 700; padding: 8px 12px; line-height: 24px; }
.ProductSidebar__group { font-size: 16px; color: #828282; padding: 4px 12px; border-bottom: 1px solid #e8e7e7; }
.ProductSidebar__list { list-style: none; }
.ProductSidebar__item a { display: block; padding: 6px 12px; font-size: 14px; line-height: 18px; color: #005CC5; border-bottom: 1px solid #f0f0f0; }
.ProductSidebar__item a:hover { text-decoration: underline; }
.ProductSidebar__item.is-active a { color: #212121; font-weight: 700; background: #f0f6fd; }

/* ===== 製品明細 ===== */
.ProductDetail__generic { font-size: 14px; color: #828282; line-height: 24px; margin-bottom: 20px; }

/* 緊急・安全性情報バー */
.UrgentNotices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.UrgentNotice { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 2px; }
.UrgentNotice.-emergency { background: #fdecec; }
.UrgentNotice.-safety { background: #fff4e5; }
.UrgentNotice__badge { flex-shrink: 0; padding: 3px 9px; font-size: 14px; font-weight: 700; color: #fff; border-radius: 2px; line-height: 19px; }
.UrgentNotice.-emergency .UrgentNotice__badge { background: #d32f2f; }
.UrgentNotice.-safety .UrgentNotice__badge { background: #ed6c00; }
.UrgentNotice__text { font-size: 14px; color: #005CC5; text-decoration: underline; }

/* 製品リンクボタン（お知らせ一覧 / FAQ） */
.ProductLinkButtons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ProductLinkButtons a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #005CC5; border-radius: 2px; color: #005CC5; font-size: 14px; padding: 6px 16px; line-height: 18px; }
.ProductLinkButtons a:hover { background: #005CC5; color: #fff; }

/* アンカーナビ */
.AnchorNav { display: flex; gap: 24px; flex-wrap: wrap; list-style: none; margin-bottom: 24px; }
.AnchorNav a { display: inline-flex; align-items: center; gap: 6px; color: #005CC5; font-size: 16px; font-weight: 700; }
.AnchorNav a i { font-size: 14px; }
.AnchorNav a:hover { text-decoration: underline; }

/* タブコンテンツ（青枠ボックス） */
.TabContent { border: 1px solid #cfe0f2; border-radius: 4px; padding: 24px; }

/* 見出し */
.ProductSection { margin-bottom: 8px; }
.ProductSection__h2 { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; line-height: 34px; padding: 4px 0 4px 15px; position: relative; margin: 24px 0 20px; }
.ProductSection__h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; background: #005CC5; border-radius: 2px; }
.ProductSection__h2:first-child { margin-top: 0; }
.ProductSection__h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; line-height: 22px; padding-left: 15px; position: relative; margin: 24px 0 16px; }
.ProductSection__h3.-bar::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; background: #005CC5; border-radius: 2px; }
.ProductSection__h3.-plain { padding-left: 0; }

/* 剤形ギャラリー（大画像＋サムネイル） */
.Gallery { margin-bottom: 24px; }
.Gallery__main { width: 330px; }
.Gallery__mainImg { width: 330px; height: 250px; background: #dfeaf6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.Gallery__mainImg img { width: 100%; height: 100%; object-fit: contain; }
.Gallery__thumbs { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 12px; list-style: none; align-items: flex-start; }
.Gallery__thumb { width: 96px; cursor: pointer; }
.Gallery__thumbImg { display: block; width: 96px; height: 72px; border: 1px solid #ccc; overflow: hidden; background: #f5f5f5; }
.Gallery__thumb.is-active .Gallery__thumbImg { border: 2px solid #005CC5; }
.Gallery__thumbImg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.Gallery__thumbCap { font-size: 12px; color: #595959; line-height: 1.4; margin-top: 5px; text-align: center; word-break: break-word; }

/* 剤型写真 / 包装写真 */
.PhotoBlock { margin-bottom: 20px; }
.PhotoBlock__label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.PhotoRow { display: flex; gap: 12px; flex-wrap: wrap; list-style: none; }
.PhotoRow__item { width: 110px; }
.PhotoRow__img { width: 110px; height: 82px; background: #ededed; overflow: hidden; }
.PhotoRow__img img { width: 100%; height: 100%; object-fit: cover; }
.PhotoRow__cap { font-size: 12px; line-height: 19px; margin-top: 6px; }

/* 書類リンク 2列グリッド */
.DocGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 24px; }
.DocLink { display: flex; align-items: center; gap: 10px; border: 1px solid #005CC5; border-radius: 2px; padding: 6px 16px; color: #005CC5; font-size: 16px; line-height: 24px; }
.DocLink:hover { background: #f0f6fd; }
.DocLink .-pdf { color: #d32f2f; }
.DocLink__ext { margin-left: auto; color: #005CC5; font-size: 14px; }

/* 単独書類ラベル（患者向け資材 等） */
.DocLabel { font-size: 14px; font-weight: 700; margin-bottom: 8px; }

/* お知らせ */
.NoticeList { list-style: none; }
.NoticeList__row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid #e8e7e7; align-items: flex-start; }
.NoticeBadge { flex-shrink: 0; display: inline-block; min-width: 150px; text-align: center; background: #005CC5; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 2px; line-height: 19px; }
.NoticeBadge.-other { background: #9e9e9e; }
.NoticeList__content { flex: 1; }
.NoticeList__content a { display: block; color: #005CC5; text-decoration: none; font-size: 14px; line-height: 25px; }
.NoticeList__content a:hover { text-decoration: underline; }
.NoticeList__content span { display: block; font-size: 14px; color: #212121; line-height: 25px; }

/* 関連資材 / 予備枠 リンクグリッド */
.LinkGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 24px 0; padding: 0; list-style: none; }
.LinkGrid__item { display: flex; }
.LinkGrid a { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; border: 1px solid #005CC5; border-radius: 2px; padding: 8px 16px; background: #fff; color: #005CC5; font-size: 15px; line-height: 1.5; }
.LinkGrid a:hover { background: #f0f6fd; text-decoration: none; }
.LinkGrid a i { font-size: 16px; flex: 0 0 auto; }
.LinkGrid a i.-pdf { color: #d32f2f; }
.LinkGrid__label { flex: 1 1 auto; min-width: 0; }
.LinkGrid__ext { flex: 0 0 auto; margin-left: auto; color: #005CC5; }

/* 仕様テーブル（貯法・有効期間 / 製品コード） */
.SpecTable { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.SpecTable th { text-align: left; font-weight: 400; color: #333; background: #fafafa; padding: 8px 12px; border: 1px solid #e8e7e7; vertical-align: top; font-size: 15px; width: 160px; }
.SpecTable td { padding: 8px 12px; border: 1px solid #e8e7e7; font-size: 15px; }
.SpecTable.-code th { width: 240px; }

/* 包装別コード・GS1コード */
.PackCard { border: 1px solid #e8e7e7; border-radius: 6px; padding: 20px 24px; margin-bottom: 16px; }
.PackCard__title { font-size: 16px; font-weight: 700; line-height: 22px; margin-bottom: 16px; }
.PackCard__codes { list-style: none; }
.PackCard__codes li { font-size: 14px; color: #333; line-height: 25px; }
.PackCard__gs1 { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 16px; }
.PackCard__unitLabel { font-size: 14px; font-weight: 700; line-height: 19px; }
.PackCard__gs1val { font-size: 14px; color: #333; line-height: 19px; }
.PackCard__barcode { width: 240px; height: 48px; margin-top: 6px; background: #fff; }
.PackCard__barcode img { width: 240px; height: 48px; object-fit: contain; }

/* AG情報 */
.AGList { list-style: none; }
.AGList a { display: flex; align-items: center; gap: 8px; color: #005CC5; font-size: 14px; }
.AGList a i { font-size: 12px; }

/* 同一成分薬 */
.SameComponent { margin-top: 32px; }
.SameComponent__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.SameComponent__list { list-style: none; }
.SameComponent__list li { font-size: 14px; line-height: 30px; }
.SameComponent__list a { color: #005CC5; }
.SameComponent__list a::before { content: '・'; color: #212121; }
.SameComponent__list a:hover { text-decoration: underline; }

/* 製品ページへのバナー（製品詳細 最下部） */
.ProductBottomBanner { margin: 40px 0 0; }
.ProductBottomBanner a { display: inline-block; max-width: 474px; width: 100%; }
.ProductBottomBanner img { width: 100%; height: auto; display: block; }
.ProductBottomBanner a:hover { opacity: .85; }


/* ===== タブレット/モバイル レスポンシブ（上書き） ===== */
@media (max-width: 768px) {

  /* --- 全体コンテナ：最大幅を解除し左右padding(24px) --- */
  .SubNav__list { max-width: 100%; }
  .Main { max-width: 100%; padding: 24px 24px 60px; }
  .Footer { max-width: 100%; }

  /* --- プレビュー用ヘッダー：はみ出す要素を隠しアイコン化（本番はCMSモジュール） --- */
  .Header__bar { padding: 12px 16px; }
  .Header__logos { gap: 12px; }
  .Header__nav,
  .Header__members,
  .Header__search { display: none; }
  .Header__icon { display: inline-flex; align-items: center; justify-content: center; }

  /* --- SubNav：中央寄せの折返し（アクティブは青下線/太字を維持） --- */
  .SubNav__list { padding: 0 8px; }
  .SubNav__item a { padding: 14px 16px; font-size: 16px; }

  /* --- 見出し・50音バー --- */
  .ProductContent__title { font-size: 24px; line-height: 34px; }
  .KanaNav__item a,
  .KanaNav__item span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 56px; min-height: 44px; padding: 6px 14px;
  }

  /* 医薬品一覧テーブルの横スクロールは ≤940px ブロックで定義（下記） */
  /* おすすめリンクはタブレットでは2列維持（Figma準拠） */
}

/* ============================================================
   医薬品一覧テーブル：横スクロール（≤940px）
   - コンテナに収まらない幅になる時点で横スクロールを有効化。
   - 製品名列は左に固定（スクロール中も製品名が見える）。
   - 表頭 sticky（上記 base ルール）と併用し、行数が多くても見出しを追える。
   ============================================================ */
@media (max-width: 940px) {
  .MedicineTable__scroll {
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .MedicineTable__scroll::-webkit-scrollbar { height: 10px; }
  .MedicineTable__scroll::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 5px; }

  /* 表は最小幅を保持（潰さず横スクロール） */
  .MedicineTable { min-width: 880px; }

  /* 製品名列を左に固定 */
  .MedicineTable__nameHead,
  .MedicineTable__name { position: sticky; left: 0; z-index: 2; background: #fff; }
  .MedicineTable thead .MedicineTable__nameHead { background: #005CC5; z-index: 5; }
  .MedicineTable__groupRow th { background: #eef2f6; }
}

/* ============================================================
   Mobile: ≤480px
   Figma 805:66 に準拠（SubNav 2列グリッド、表は横スクロール枠、
   50音折返し、おすすめリンク縦1列）
   ============================================================ */
@media (max-width: 480px) {

  .Main { padding: 20px 16px 48px; }

  /* --- SubNav：2列グリッド（各タブ幅50%）。アクティブは青下線/太字 --- */
  .SubNav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }
  .SubNav__item a {
    justify-content: center;
    padding: 14px 8px;
    font-size: 16px;
    border-bottom: 1px solid #ececec;
  }
  .SubNav__item.is-active a {
    color: #005CC5;
    border-bottom: 3px solid #005CC5;
    font-weight: 700;
  }

  /* --- 見出し --- */
  .ProductContent__title { font-size: 22px; line-height: 32px; padding: 16px 14px; }

  /* --- 50音バー：折返し・各ボタン44pxタップ領域 --- */
  .KanaNav { padding: 14px 12px; }
  .KanaNav__list { gap: 10px; }
  .KanaNav__item a,
  .KanaNav__item span { min-width: 60px; min-height: 44px; font-size: 15px; }

  /* --- テーブル：製品名列を狭めモバイルでも見やすく --- */
  .MedicineTable { min-width: 720px; }
  .MedicineTable__nameHead,
  .MedicineTable__name { width: 150px; }

  /* --- おすすめリンク：縦1列 --- */
  .RecommendLinks__banners { flex-direction: column; }
  .RecommendLinks__banner { width: 100%; }

  /* --- フッター：余白調整 --- */
  .Footer { padding: 16px; }
}

/* ============================================================
   医薬品情報 詳細ページ レスポンシブCSS（追記ブロック）
   対象: /product/medicine/pentasa-granule/ ・ /product/medicine/_template/
   ------------------------------------------------------------
   ■ 衝突回避方針
     - このブロックの全ルールを body.MedicineDetail 配下にスコープしている。
       一覧ページ（上記の一覧用ルール群 = body に MedicineDetail 無し）には一切影響しない。
     - 一覧用の未スコープ共通ルール（.Main / .SubNav__list / .Header__* 等）は
       詳細ページにも適用されるが、詳細ページで差分が必要な箇所は
       .MedicineDetail .X（詳細度が上）で上書きしているため破綻しない。
   ■ ブレークポイント（DESIGN.md §9: 360/480/768/940 準拠）
     - <=940: 2カラム維持のままコンテナ余白を確保（横はみ出し防止）
     - <=768: 2カラム→縦積み（本文=上 / 製品索引=下）、SubNav 2列グリッド 等
     - <=480: 余白・文字サイズをモバイル最適化（本文は最小16pxを維持）
   ============================================================ */

/* ========== 詳細ページ <=940px（タブレット。2カラム維持＋余白確保） ========== */
@media (max-width: 940px) {
  .MedicineDetail .Main { padding-left: 24px; padding-right: 24px; }

  /* 2カラムのサイドバー幅と余白を圧縮して本文の可読幅を確保 */
  .MedicineDetail .ProductLayout { gap: 24px; }
  .MedicineDetail .ProductLayout__side { width: 180px; }
}

/* ========== 詳細ページ <=768px（モバイル: 縦積み・SubNav 2列 等） ========== */
@media (max-width: 768px) {
  /* --- コンテナ余白（幅100% + T24パディング相当） --- */
  .MedicineDetail .Main { padding: 24px 24px 56px; }

  /* --- SubNav: 2列グリッド・左寄せ（Figma 794:447 / 799:619 準拠） --- */
  .MedicineDetail .SubNav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: none;
    padding: 0;
  }
  .MedicineDetail .SubNav__item a {
    justify-content: flex-start;
    padding: 14px 16px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }
  .MedicineDetail .SubNav__item:nth-child(odd) a { border-right: 1px solid #eee; }
  .MedicineDetail .SubNav__item.is-active a {
    color: #005CC5;
    border-bottom: 3px solid #005CC5;
    font-weight: 700;
  }

  /* --- H1 --- */
  .MedicineDetail .ProductH1 { font-size: 22px; line-height: 32px; padding: 16px 14px; }
  .MedicineDetail .ProductH1Separator { margin-bottom: 24px; }

  /* --- 2カラム → 縦積み（本文=上 / 製品索引=下） --- */
  .MedicineDetail .ProductLayout { flex-direction: column; gap: 0; }
  .MedicineDetail .ProductLayout__main { order: 1; width: 100%; }
  .MedicineDetail .ProductLayout__side {
    order: 2;
    width: 100%;
    margin-top: 32px;
    border-top: 1px solid #e8e7e7;
    padding-top: 8px;
  }

  /* --- 青枠タブコンテンツの内側余白圧縮 --- */
  .MedicineDetail .TabContent { padding: 16px; }

  /* --- 剤形ギャラリー: 大画像は幅100%（比率維持）、サムネは横スクロールで潰さない --- */
  .MedicineDetail .Gallery__main { width: 100%; }
  .MedicineDetail .Gallery__mainImg { width: 100%; height: auto; aspect-ratio: 330 / 250; }
  .MedicineDetail .Gallery__thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .MedicineDetail .Gallery__thumb { flex: 0 0 auto; }

  /* --- 剤型/包装写真（テンプレート）: 横スクロールで潰さない --- */
  .MedicineDetail .PhotoRow {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .MedicineDetail .PhotoRow__item { flex: 0 0 auto; }

  /* --- 書類リンク2列 → 1列 / 関連資材グリッド → 1列 --- */
  .MedicineDetail .DocGrid,
  .MedicineDetail .LinkGrid { grid-template-columns: 1fr; }

  /* --- 仕様テーブル: 2列（ラベル/値）維持＋ table-fixed で溢れ防止 --- */
  .MedicineDetail .SpecTable { table-layout: fixed; }
  .MedicineDetail .SpecTable th {
    width: 40%;
    font-size: 14px;
    padding: 8px 10px;
    word-break: break-word;
  }
  .MedicineDetail .SpecTable td {
    font-size: 14px;
    padding: 8px 10px;
    word-break: break-word;
  }
  .MedicineDetail .SpecTable.-code th { width: 48%; }

  /* --- お知らせ: バッジ幅を圧縮（本文と横並び維持） --- */
  .MedicineDetail .NoticeList__row { gap: 12px; }
  .MedicineDetail .NoticeBadge { min-width: 120px; font-size: 12px; }

  /* --- 包装別GS1カード: 1列・バーコードは可読幅で表示 --- */
  .MedicineDetail .PackCard { padding: 16px; }
  .MedicineDetail .PackCard__gs1 { gap: 20px; }
  .MedicineDetail .PackCard__unit { width: 100%; }
  .MedicineDetail .PackCard__barcode { width: 100%; max-width: 280px; height: auto; }
  .MedicineDetail .PackCard__barcode img { width: 100%; height: auto; }
}

/* ========== 詳細ページ <=480px（スモールモバイル最適化。本文16px維持） ========== */
@media (max-width: 480px) {
  .MedicineDetail .Main { padding: 16px 16px 48px; }

  .MedicineDetail .ProductH1 { font-size: 20px; line-height: 30px; }

  .MedicineDetail .SubNav__item a { padding: 12px; font-size: 15px; }

  .MedicineDetail .TabContent { padding: 12px; }

  .MedicineDetail .ProductSection__h2 { font-size: 20px; line-height: 28px; }
  .MedicineDetail .ProductSection__h3 { font-size: 16px; }

  /* お知らせ/FAQ ボタンは全幅で押しやすく */
  .MedicineDetail .ProductLinkButtons a { width: 100%; justify-content: center; }

  .MedicineDetail .NoticeBadge { min-width: 100px; }

  .MedicineDetail .SpecTable.-code th { width: 50%; }
}



#kmbusercheckDialog {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
}
#kmbusercheckDialog-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: #000;
  opacity: 0.5;
}
#kmbusercheckDialog__inner {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  overflow: auto;
  background: #fff;
}
#kmbusercheckDialog__inner .CheckContent {
  padding: 100px 15px;
}
@media screen and (max-width: 768px) {
  #kmbusercheckDialog__inner .CheckContent {
    padding: 15px;
  }
}


@media screen and (max-width: 767px) {
  #kmbusercheckDialog {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
  }
  #kmbusercheckDialog-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #000;
    opacity: 0.5;
  }
  #kmbusercheckDialog__inner {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    overflow: auto;
    background: #fff;
  }
  #kmbusercheckDialog__inner .CheckContent {
    padding: 100px 15px;
  }
}
@media screen and (max-width: 767px) and (max-width: 768px) {
  #kmbusercheckDialog__inner .CheckContent {
    padding: 15px;
  }
}


.CheckContent {
  margin: 0 auto;
  padding: 0 10px;
  max-width: 1000px;
}
.CheckContent__title {
  font-size: 1.25rem;
  position: relative;
  margin-bottom: 20px;
  padding: 0 0 6px 15px;
  background: url(/common/images/icon_dot01.svg) no-repeat 0 5px;
  background-size: 4px 16px;
}
.CheckContent__title::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 100%;
  width: 128px;
  height: 2px;
  background-color: #005cc5;
  z-index: 2;
  content: "";
}
.CheckContent__title::after {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #d9e7f6;
  z-index: 1;
  content: "";
}
.CheckContent__summary {
  font-size: 0.812rem;
  margin-bottom: 20px;
}
.CheckContent__sec {
  padding: 20px;
  background-color: #efefef;
}
.CheckContent__secTitle {
  font-size: 1.25rem;
  margin: 10px 0 30px;
  text-align: center;
}
.CheckContent__secContents {
  display: flex;
  justify-content: space-between;
}
.CheckContent__secContentsContent {
  position: relative;
  padding: 30px 30px 25px;
  width: 49%;
  background-color: #fff;
}
.CheckContent__secContentsContent dt {
  font-size: 1.25rem;
  margin-bottom: 30px;
  text-align: center;
}
.CheckContent__secContentsContent li {
  margin-bottom: 15px;
}
.CheckContent__secContentsContent li a {
  font-size: 0.812rem;
  display: block;
  padding: 6px 20px 3px;
  border-radius: 3px;
  background-color: #005cc5;
  color: #fff;
  text-align: center;
  text-decoration: none;
  position: relative;
  padding: 10px 25px 10px 10px;
  transition: opacity 0.5s ease-out;
}
.CheckContent__secContentsContent li a:hover {
  opacity: 0.6;
}
.CheckContent__secContentsContent li a::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -8px;
  width: 10px;
  height: 16px;
  background: url(/common/images/icon_arrow15.svg) no-repeat 0 0;
  background-size: 10px 16px;
  content: "";
}
.CheckContent__secContentsContent:nth-child(2) li a {
  background-color: #aaa;
}

@media screen and (max-width: 480px) {

  .CheckContent__secTitle {
    display: none;
  }
  .CheckContent__secContents {
    display: block;
  }
  .CheckContent__secContents .CheckContent__secContent {
    width: 100%;
  }
  .CheckContent__secContents .CheckContent__secContent:not(:last-child) {
    margin-bottom: 50px;
  }
  .CheckContent__secContents .CheckContent__secContent:not(:last-child)::after {
    display: block;
    position: absolute;
    bottom: -30px;
    left: -20px;
    width: calc(100% + 40px);
    height: 10px;
    background-color: #fff;
    content: "";
  }
  .CheckContent__secContents .CheckContent__secContent li a {
    font-size: 0.875rem;
  }
  .CheckContent__secContents .CheckContent__secContent:nth-child(2) li a {
    background-color: #f08300;
  }
}



@media screen and (max-width: 767px) {
  .CheckContent {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 1000px;
  }
  .CheckContent__title {
    font-size: 1.25rem;
    position: relative;
    margin-bottom: 20px;
    padding: 0 0 6px 15px;
    background: url(/common/images/icon_dot01.svg) no-repeat 0 5px;
    background-size: 4px 16px;
  }
  .CheckContent__title::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 100%;
    width: 128px;
    height: 2px;
    background-color: #005cc5;
    z-index: 2;
    content: "";
  }
  .CheckContent__title::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #d9e7f6;
    z-index: 1;
    content: "";
  }
  .CheckContent__summary {
    font-size: 0.812rem;
    margin-bottom: 20px;
  }
  .CheckContent__sec {
    padding: 20px;
    background-color: #efefef;
  }
  .CheckContent__secTitle {
    font-size: 1.25rem;
    margin: 10px 0 30px;
    text-align: center;
  }
  .CheckContent__secContents {
    display: flex;
    justify-content: space-between;
  }
  .CheckContent__secContentsContent {
    position: relative;
    padding: 30px 30px 25px;
    width: 49%;
    background-color: #fff;
  }
  .CheckContent__secContentsContent dt {
    font-size: 1.25rem;
    margin-bottom: 30px;
    text-align: center;
  }
  .CheckContent__secContentsContent li {
    margin-bottom: 15px;
  }
  .CheckContent__secContentsContent li a {
    font-size: 0.812rem;
    display: block;
    padding: 6px 20px 3px;
    border-radius: 3px;
    background-color: #005cc5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    position: relative;
    padding: 10px 25px 10px 10px;
    transition: opacity 0.5s ease-out;
  }
  .CheckContent__secContentsContent li a:hover {
    opacity: 0.6;
  }
  .CheckContent__secContentsContent li a::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -8px;
    width: 10px;
    height: 16px;
    background: url(/common/images/icon_arrow15.svg) no-repeat 0 0;
    background-size: 10px 16px;
    content: "";
  }
  .CheckContent__secContentsContent:nth-child(2) li a {
    background-color: #aaa;
  }
}



@media screen and (max-width: 767px) and (max-width: 480px) {
  .CheckContent__secTitle {
    display: none;
  }
  .CheckContent__secContents {
    display: block;
  }
  .CheckContent__secContents .CheckContent__secContent {
    width: 100%;
  }
  .CheckContent__secContents .CheckContent__secContent:not(:last-child) {
    margin-bottom: 50px;
  }
  .CheckContent__secContents .CheckContent__secContent:not(:last-child)::after {
    display: block;
    position: absolute;
    bottom: -30px;
    left: -20px;
    width: calc(100% + 40px);
    height: 10px;
    background-color: #fff;
    content: "";
  }
  .CheckContent__secContents .CheckContent__secContent li a {
    font-size: 0.875rem;
  }
  .CheckContent__secContents .CheckContent__secContent:nth-child(2) li a {
    background-color: #f08300;
  }
}