/* ==============================================================
   KURE EC 追加カスタムCSS
   --------------------------------------------------------------
   本番URL   : //gigaplus.makeshop.jp/kureEC/assets/css/custom.css
   ローカル  : HTML/_site/_gigaplus/assets/css/custom.css
   読み込み  : MakeShop「共通headタグ管理」で <link> 追加済
                （PC・SP両方で読み込まれる）

   役割：
     MakeShop標準テンプレート（編集不可）の上に被せる追記用CSS。
     新規スタイルは、必ずこのファイルへ追記する運用とする。
     - インラインstyle・HTML内<style>は使わない
     - import.css / shopdetail.css 等のシステムCSSは編集不可
     - ローカルで編集 → CMSの本ファイルにアップして反映

   セクション構成：
     1. 商品詳細ページ
        - 用途 見出し（.section-heading）
        - 製品説明 見出し（.detailExtTxt h2）
     2. お買い物方法ページ（flow.html / page3.html）
        - Stepごとのスクショ画像サイズ制御
          （.flow_image_pc / .flow_image_sp）
     3. Q&Aページ（faq.html / page1.html）
        - SP版本文リンクの下線（視認性向上）
   ============================================================== */


/* ===== 1. 商品詳細ページ ===== */

/* 用途 見出し */
.section-heading {
  padding-bottom: 0;
}
.section-heading h4 {
  padding: 2px 8px;
  background: #c00;
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  display: inline-block;
}

/* 製品説明 見出し */
#detail .detailExtTxt h2 {
  margin-bottom: 0;
  padding-top: 1em;
  padding-bottom: 8px;
}
.detailExtTxt h2 span {
  background: #c00;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
}


/* ===== 2. お買い物方法ページ flow.html / page3.html ===== */

/* Step2以降のスクショ画像サイズ制御
   HTML側で <img class="flow_image flow_image_pc"> （PC）
          <img class="flow_image flow_image_sp"> （SP）
   と付与することで適用される */

/* PC版（flow.html）：横幅を300pxに制限 */
.flow_image_pc {
  max-width: 300px;
  height: auto;
  display: block;
}
/* SP版（page3.html）：画面幅いっぱい */
.flow_image_sp {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ===== 3. Q&Aページ faq.html / page1.html ===== */

/* SP版（page1.html）Q&A本文内リンク：視認性のため下線を付与
   PC版はシステムCSS側で既に下線表示されているため、
   SP表示時（max-width:768px）のみ適用する */
@media screen and (max-width: 768px) {
  .faq_a a {
    text-decoration: underline;
  }
}