@charset "UTF-8";
/* =======================================================
   広島ガスＷＥＢモール 紹介セクション v7（DOKODEMO_ABISU-512 追加依頼対応）
   2026-07-16: #1注記削除 / #2中央揃え・文言変更 / #3ロゴハート
   #4ガスキー笑顔 / #5#6ボタン矢印 / #7グリーン化(見本#51b163)
   #8化粧直し（ボタン立体感・カード角丸影・チェック緑バッジ）
   2026-07-17: 今津さん追加依頼（7/17 13:24コメント）
     「PC版のみ」対象5行のfont-sizeを+2px（詳細は下記各セレクタのコメント）
     .up-d_wm2-lead / .up-d_wm2-accent / .up-d_wm2-lead2 / .up-d_wm2-check
     の【基本（PC）ルールのみ】を変更。751px以下のSP用font-sizeは
     下部 @media (max-width:750px) 内で別途明示指定済みのため無変更・無影響。
   2026-07-27: 今津さん追加依頼（SP版のみ2点・PC無変更）
     ①「自分で選ぶ」「任せる」カード内テキストを中央寄せ
       → SPメディアクエリ内に .up-d_wm2-route-card { text-align: center; } を追加
     ②キャラクター（ガスキー）を見出しテキストの右上に配置
       → SPメディアクエリ内 .up-d_wm2-mascot-img を static中央 → absolute右上に変更
         （PC用の left:76% を left:auto で打ち消さないと right:0 が効かない点に注意）
         top/right/width の数値は参考画像からの目測。プレビューで微調整可
   ======================================================= */

.up-d_wm2 {
  --c-main: #00B3EC;        /* 見出しの青（ブランド青） */
  --c-main-deep: #00B3EC;
  --c-red: #e8403f;         /* 「安心」の赤 */
  --c-arrow: #a8d8b1;       /* 下向き矢印（見本グリーンの淡色） */
  --c-btn: #51b163;         /* ボタン（先方見本グリーン） */
  --c-btn-hi: #5cbd6e;
  --c-btn-lo: #46a458;
  --c-card-border: #e2e2e2;
  --c-text: #1A1311;

  margin: 0;
  padding: 56px 24px 64px;
  background: #ffffff;
  color: var(--c-text);
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  line-height: 1.7;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.up-d_wm2 * {
  box-sizing: border-box;
}

.up-d_wm2-inner {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

/* --- リード見出し1（はじめてでも安心。…） --- */
/* 2026-07-17 PC版のみ +2px（24px→26px） 対象行1「はじめてでも安心。広島ガスWEBモルなら」 */
.up-d_wm2-lead {
  margin: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* 2026-07-17 PC版のみ +2px（30px→32px） 対象行1中の強調語「安心」 */
.up-d_wm2-accent {
  font-style: normal;
  font-size: 32px;
  font-weight: 800;
  color: var(--c-red);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* サイトTOPロゴと同じ「流れる赤ハート」(inline svg) */
.up-d_wm2-heart {
  display: inline-block;
  vertical-align: -0.04em;
  line-height: 1;
}

.up-d_wm2-heart svg {
  display: inline-block;
  width: 2.1em;
  height: auto;
  vertical-align: baseline;
}

/* --- リード見出し2（商品選びから工事まで…） --- */
/* 2026-07-17 PC版のみ +2px（20px→22px） 対象行2「商品選びから工事までまとめておまかせ」 */
.up-d_wm2-lead2 {
  margin-top: 18px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-main);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* --- チェックリスト（緑の丸バッジで安心感を強調） --- */
.up-d_wm2-checks {
  width: fit-content;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
}

/* 2026-07-17 PC版のみ +2px（17px→19px） 対象行3〜5「相談・見積無料」「工事まで広島ガスグループが対応」「契約まで費用なし」 */
.up-d_wm2-check {
  position: relative;
  margin-top: 10px;
  padding-left: 34px;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.up-d_wm2-check:first-child {
  margin-top: 0;
}

.up-d_wm2-check::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--c-btn);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 23px;
  text-align: center;
}

/* --- 大見出し（まずは方法をお選びください）＋マスコット ---
   #2対応: 右余白を撤去し、上部見出しと同じ中央基準に揃える */
.up-d_wm2-choose {
  position: relative;
  margin-top: 44px;
  padding-right: 0;
  text-align: center;
}

.up-d_wm2-choose-title {
  margin: 0;
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--c-main-deep);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* --- 導線2カラム（自分で選ぶ / 任せる） --- */
.up-d_wm2-routes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 28px;
}

/* マスコット（ガスキー笑顔）: 見出し右側に寄り添わせる */
.up-d_wm2-mascot-img {
  position: absolute;
  top: -18px;
  left: 76%;
  width: 84px;
  z-index: 1;
}

.up-d_wm2-mascot-img img {
  display: block;
  width: 100%;
  height: auto;
}

.up-d_wm2-route {
  display: grid;
  grid-template-rows: 1fr auto auto;
}

.up-d_wm2-route-card {
  padding: 20px;
  border: 1px solid var(--c-card-border);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.up-d_wm2-route:last-child .up-d_wm2-route-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
}

.up-d_wm2-route-tag {
  display: inline-block;
  width: fit-content;
  padding: 2px 16px;
  border-radius: 999px;
  background: #eef7f0;
  font-size: 15px;
  font-weight: 800;
  color: #37934a;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.up-d_wm2-route-desc {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* 下向きブロック矢印（グリーン淡色でボタンへ視線誘導） */
.up-d_wm2-route-arrow {
  width: 46px;
  height: 40px;
  margin-top: 14px;
  margin-inline: auto;
  background: var(--c-arrow);
  clip-path: polygon(30% 0, 70% 0, 70% 52%, 100% 52%, 50% 100%, 0 52%, 30% 52%);
}

/* CTAボタン（#7グリーン化 #5#6矢印 #8立体感） */
.up-d_wm2-route-btn {
  margin-top: 14px;
}

.up-d_wm2-route-btn a {
  position: relative;
  display: block;
  padding: 17px 44px 17px 28px;
  background: linear-gradient(180deg, var(--c-btn-hi) 0%, var(--c-btn) 55%, var(--c-btn-lo) 100%);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(81, 177, 99, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-align: center;
  text-decoration: none;
  font-size: 21px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.3;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.up-d_wm2-route-btn a::after {
  content: "➤";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75em;
  transition: transform 0.2s ease;
}

.up-d_wm2-route-btn a:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(81, 177, 99, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.up-d_wm2-route-btn a:hover::after {
  transform: translate(4px, -50%);
}

/* =======================================================
   レスポンシブ（〜750px）
   ======================================================= */
@media screen and (max-width: 750px) {
  .up-d_wm2 {
    padding: 40px 16px 48px;
  }

  .up-d_wm2-lead {
    font-size: 19px;
    line-height: 1.55;
  }

  .up-d_wm2-accent {
    font-size: 24px;
  }

  .up-d_wm2-lead2 {
    margin-top: 14px;
    font-size: 16px;
  }

  .up-d_wm2-check {
    font-size: 15px;
    padding-left: 30px;
  }

  .up-d_wm2-check::before {
    width: 21px;
    height: 21px;
    font-size: 13px;
    line-height: 21px;
  }

  /* 2026-07-27 ②SPのみ改: 見出しとガスキーをflex横並び・垂直中央に
     （absolute重ねだと画像の白背景がテキストに被るため方式変更。
      アイコンはflex-shrink:0で64px固定、テキスト側はclampで自動縮小） */
  .up-d_wm2-choose {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .up-d_wm2-choose-title {
    /* 1行キープ優先: 画面幅に応じて縮小（320px幅でもアイコンと共存できる下限15px） */
    font-size: clamp(15px, 4.8vw, 24px);
    min-width: 0;
    white-space: nowrap;
  }

  .up-d_wm2-mascot-img {
    position: static;
    flex-shrink: 0;
    width: 64px;
    margin: 0;
  }

  .up-d_wm2-routes {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 22px;
  }

  /* 2026-07-27 ①SPのみ: 「自分で選ぶ」「任せる」カード内テキストを中央寄せ
     （タグはinline-blockなのでtext-alignで中央に寄る。説明文も同時に中央化） */
  .up-d_wm2-route-card {
    text-align: center;
  }

  .up-d_wm2-route-btn a {
    font-size: 18px;
    padding: 15px 40px 15px 22px;
  }
}

/* =======================================================
   お申し込みの流れ（置換ブロック内に再構築した分）
   ======================================================= */
.step-image img {
  width: 100%;
  height: auto;
}

.step-image.is-pc {
  display: block;
}

.step-image.is-sp {
  display: none;
}

@media screen and (max-width: 750px) {
  .step-image.is-pc {
    display: none;
  }

  .step-image.is-sp {
    display: block;
  }
}

[data-element-id] .step-image.is-sp {
  display: block;
}

.up-d_removed-step {
  margin: 0;
  padding: 0;
}

#up-d_products-anchor {
  padding-top: 36px;
  margin-top: -36px;
  pointer-events: none;
}

@media screen and (max-width: 750px) {
  #up-d_products-anchor {
    padding-top: 0;
    margin-top: 0;
  }
}

/* ===== 2026-07-19 追記: ライブのスタイル17にのみ存在していた追記分を控えに反映 =====
   （v4適用時に消えてしまったSP改行対応。7/16のSP調整で追加されたもの） */
.up-d_wm2-br-sp {
  display: none;
}

.up-d_wm2-nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 750px) {
  .up-d_wm2-br-sp {
    display: inline;
  }
}