@charset "utf-8";

/* =========================================================
   サツマ薬局オンラインショップ
   商品詳細 PC専用 v3

   ファイル:
   satuma_pc_product_detail.css

   対象:
   body.plg_Raku2_LC_Page_Products_Detail

   前提:
   ・PC商品情報レイアウト = テンプレートE
   ・旧左ナビゲーションはレイアウトから解除済み

   v3変更:
   ・Fancyboxの前へ／次へのページ送り記号を復旧
   ・Fancybox内部要素へのposition上書きを削除
   ・拡大レイヤーのz-index調整のみ維持

   v2から維持:
   ・Fancybox拡大画像をPC共通ヘッダーより前面へ
   ・画像拡大時はヘッダーを含むページ全体を暗転
   ・商品詳細全体を最大1200pxへ整理
   ・商品ページ上部だけ画像／購入情報の2カラム
   ・メイン商品画像は大きく維持
   ・複数の説明画像 .sub_photo を2列化
   ・説明画像クリックによるFancybox拡大を維持
   ・商品説明以降の全幅1カラム構造を維持

   変更しないもの:
   ・商品URL
   ・商品画像URL
   ・商品名
   ・商品コード
   ・価格
   ・ポイント
   ・在庫／発送表示
   ・通常購入処理
   ・定期購入処理
   ・数量
   ・カート処理
   ・お気に入り
   ・商品お問い合わせ
   ・form / action / name / id / hidden
   ・JavaScript
   ・商品説明本文
   ・SHOPPING GUIDE
   ・SP版
========================================================= */


/* =========================================================
   商品詳細ページ全体
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail #container {
  width: calc(100% - 40px) !important;
  max-width: 1200px !important;
  min-width: 940px !important;
  margin: 28px auto 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_Detail #main_column.colnum1 {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.plg_Raku2_LC_Page_Products_Detail #undercolumn {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   商品詳細エリア
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail #detailarea {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   テンプレートE
   上部だけ画像／商品情報の2カラム
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail #detail_type_e {
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
  column-gap: 42px !important;
  row-gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start !important;
  box-sizing: border-box !important;
}


/* =========================================================
   左：商品画像
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc {
  float: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-content: start !important;
  box-sizing: border-box !important;
}


/* =========================================================
   メイン商品画像
   1枚目は2列分を使用
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc > .photo {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc > .photo a {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc > .photo img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   サブ画像／説明画像

   実DOM確認済み:
   div.sub_photo
     └ a[rel="fancybox_group"]
         └ img
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc > .sub_photo {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc > .sub_photo > a {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  cursor: zoom-in !important;
}

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc > .sub_photo img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
}


/* スマレジ既存の拡大案内は現状維持 */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailleftbloc
.picture_message {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: #675b54 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}


/* =========================================================
   右：商品情報／購入エリア

   内部DOM・購入処理は変更しない
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailrightbloc {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}


/* 商品名 */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailrightbloc h2 {
  margin-top: 0 !important;
  color: #2c221d !important;
  line-height: 1.5 !important;
}


/* テーブルが右カラムを突き抜けないようにする */

body.plg_Raku2_LC_Page_Products_Detail
#detail_type_e #detailrightbloc table {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* =========================================================
   商品説明以降

   テンプレートEの全幅構造は維持
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#detailarea img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   Fancybox

   PC共通ヘッダー・メガメニューより前面へ。

   重要:
   #fancybox-left
   #fancybox-right
   #fancybox-close
   等の内部配置には一切触れない。
   Fancybox標準CSSのabsolute配置をそのまま使用する。
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#fancybox-overlay {
  z-index: 200000 !important;
}

body.plg_Raku2_LC_Page_Products_Detail
#fancybox-wrap {
  z-index: 200010 !important;
}

body.plg_Raku2_LC_Page_Products_Detail
#fancybox-loading {
  z-index: 200020 !important;
}


/* =========================================================
   フォーカス
========================================================= */

body.plg_Raku2_LC_Page_Products_Detail
#detailarea a:focus-visible,

body.plg_Raku2_LC_Page_Products_Detail
#detailarea input:focus-visible,

body.plg_Raku2_LC_Page_Products_Detail
#detailarea select:focus-visible,

body.plg_Raku2_LC_Page_Products_Detail
#detailarea button:focus-visible {
  outline: 2px solid rgba(139, 30, 30, 0.30) !important;
  outline-offset: 2px !important;
}


/* =========================================================
   狭いPC画面
   SP版には読み込ませない
========================================================= */

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

  body.plg_Raku2_LC_Page_Products_Detail #container {
    width: calc(100% - 24px) !important;
    min-width: 956px !important;
  }

  body.plg_Raku2_LC_Page_Products_Detail #detail_type_e {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    column-gap: 30px !important;
  }

  body.plg_Raku2_LC_Page_Products_Detail
  #detail_type_e #detailleftbloc {
    gap: 10px !important;
  }
}