/* ============================================================
   モバイル専用スタイル  ／  max-width: 640px
   PC表示（641px以上）は一切変更しない

   cascade 順：stile.css → mobile.css → <style>タグ
   <style>タグ の同 spec ルールが mobile.css を上書きするため
   競合箇所は !important または高詳細度セレクタで対応
============================================================ */

/* モバイル改行タグ：PC では非表示 */
.sp-only { display: none; }

@media (max-width: 640px) {



  /* ════════════════════════════════════════
     HEADER — 固定解除・CTA非表示
  ════════════════════════════════════════ */
  .hd { position: static !important; }
  .hd-cta { display: none !important; }
  .hd-name { margin: -5px 0 !important; }

  /* ════════════════════════════════════════
     STRIP
  ════════════════════════════════════════ */
  /* 1. line-height 1.5 */
  .strip { line-height: 1.5; }
  /* PC上部のstripを非表示にし、hero-in最下部の複製を表示 */
  .strip:not(.strip-sp) { display: none !important; }
  .strip-sp {
    display: block !important;
    line-height: 1.5;
    margin-top: 20px;
    margin-left: -24px !important;
    margin-right: -24px !important;
  }

  .hero-in{padding: 30px 24px 0px !important;}


  /* ════════════════════════════════════════
     HERO FLAG リボン
  ════════════════════════════════════════ */
  .hero-flag {
    width: calc(100% - 36px);
    margin-left: auto; margin-right: auto;
    text-align: center; font-size: 14px;
    box-sizing: border-box; white-space: nowrap;
  }
  .hero-flag::before { left: -18px; }
  .hero-flag::after  { right: -18px; }
  .hero-emblem-l, .hero-emblem-r { height: 22px; flex-shrink: 0; }
  .hero-emblem-l { margin-right: 4px; }
  .hero-emblem-r { margin-left: 4px; }

  .hero-h1 .l1 { font-size: 20px !important; }
  .hero-h1 .l2 { font-size: 29px !important; }
  .hero-h1 .l3 { font-size: 30px; margin-top: -32px; margin-bottom: 10px !important; }
  .hero-btn  { font-size: 16px; margin-left: auto; margin-right: auto; }
  .hero-note { font-size: 12px; margin-bottom: 20px; margin-left: 62px;}
  .hero { background-size: cover; background-position: 58% center !important; }

  /* ════════════════════════════════════════
     HERO AREA BADGE
  ════════════════════════════════════════ */
  /* 2. 文字に合わせた横幅（100% 展開を防ぐ） */
  .hero-cos-row { min-height: 0; margin: 20px  0;}
  .hero-area-badge {
    position: relative;        /* ::before の基準 */
    transform: none;
    top: auto; right: auto;
    width: fit-content;        /* コンテンツ幅に収縮 */
    min-width: 0;
    border-radius: 12px;
    padding-right: 14px;
  }

  /* CTA に向けて下向き三角 */
  .hero-area-badge::before {
    display: block;
    content: '';
    position: absolute;
    bottom: -9px; left: 24px;
    width: 16px; height: 16px;
    background: #f5f4f3;
    border-right: 1px solid #1f9d72;
    border-bottom: 1px solid #1f9d72;
    transform: rotate(45deg);
  }

  .area-pin   { width: 22px; }
  .area-label { font-size: 10px; margin-bottom: 0; }
  .area-main  { font-size: 13px; margin-bottom: 0; }
  .area-note  { font-size: 9px; padding: 4px 6px; }

  /* ════════════════════════════════════════
     ABOUT BALLOON
     ・アイコンをバルーン左上へ absolute 配置
     ・::before を float で確保し右側にテキストを流す
     ・テキストはアイコン下まで続いてよい
     ・競合：<style>タグ の 640px ルールを !important / 高詳細度で上書き
  ════════════════════════════════════════ */
  /* 3. about-balloon-row は基準点 */
  .about-balloon-row {
    position: relative;          /* about-icon-left の absolute 基準 */
    flex-direction: column;
    align-items: flex-start;
  }

  /* アイコンをバルーン左上に絶対配置
     詳細度 0,2,0 → <style>タグの 0,1,0 より高く確実に優先 */
  .about-balloon-row .about-icon-left {
    position: absolute;
    top: 26px;           /* balloon border(3) + padding-top(22) ≈ 25px に合わせ */
    left: 24px;          /* balloon border(3) + padding-left(18) ≈ 21px に合わせ */
    width: 80px;
    margin: 0;
    z-index: 5;
  }
  .about-balloon-outer { width: 100%; }

  /* バルーン本体：float プレースホルダでアイコン分を確保
     padding は !important で <style>タグを上書き */
  .about-balloon-outer .about-balloon {
    padding: 22px 18px 18px 18px !important;
    text-align: left;
    overflow: hidden;   /* float クリアフィックス */
  }
  /* 上向きしっぽは不要 */
  .about-balloon-outer .about-balloon::after { display: none !important; }

  /* 6. about-balloon p フォントサイズ 14px */
  .about-balloon p { font-size: 16px !important; }

  /* ════════════════════════════════════════
     SUB ALERT（先着順リボン）
     4. リボンとテキストの重なり解消
        ・リボンは 70×70px に縮小しコーナーへ
        ・padding-right でテキストをリボン外へ
  ════════════════════════════════════════ */
    .sa-ribbon span {left: -20px!important; top: 20px!important;    width: 150px;    font-size: 11px; line-height: 11px; padding: 10px 0 !important;}
  .sa-body h3{margin-top:10px !important;}
  .sub-alert{padding: 28px 35px 20px 32px !important;}

  /* ════════════════════════════════════════
     MID CV — mci 番号を mci-name の左横に整列
     5. align-items: flex-start で番号を上揃えにして
        mci-name と横並びに見せる
        競合：stile.css の align-items:center を !important で上書き
  ════════════════════════════════════════ */
  .mci-l { align-items: flex-start !important; }
  .mci-n  { margin-top: 2px; }   /* mci-name テキストのベースラインに合わせ微調整 */

  /* ════════════════════════════════════════
     ELEC TREND
     6. padding 変更
  ════════════════════════════════════════ */
  .elec-trend { padding: 76px 20px 64px; }

  /* ════════════════════════════════════════
     CASE HDR
     7. padding-right を 28px に変更
        競合：stile.css の @media(max-width:560px) ルール(110px)を
              !important で上書き
  ════════════════════════════════════════ */
  .case-hdr { padding-right: 28px !important; flex-direction: row-reverse !important; }
  .case-hdr > div:not(.case-hdr-icons) { align-items: flex-end !important; }

  /* ════════════════════════════════════════
     SAVING（費用対効果）
     8. sv-ttl 15px / sv-num 32px（stile.css の 16px/46px を上書き）
  ════════════════════════════════════════ */
  /* <style>タグ側に media query なしで 16px/46px が定義されているため
     mobile.css がそのまま負けてしまう。!important で確実に上書き */
  .sv-ttl { font-size: 15px !important; }
  .sv-num { font-size: 40px !important; }
  .sv-num .sv-sm { font-size: 25px !important; }
  .saving { padding:20px 15px  !important;}
  .sv-note{ font-size: 12px !important; }

  /* ════════════════════════════════════════
     見出し画像 モバイル版サイズ・位置
  ════════════════════════════════════════ */
  .hdg1   img { width: 50% !important; }
  .hdg1-2 img { width: 118%; margin-left: -33px; margin-top: -20px !important;  }
  .hdg2   img { width: 115%; margin-left: -18px !important; }
  .hdg2-2 img { width: 85%; margin-left: 0 !important; }
  .hdg2-3 img { width: 108%; margin: -20px 0px 0px -13px !important; }

  .hdg3   img { width: 100% ;margin-left: -28px!important;  }
  .hdg3-2 img { width: 115% ;margin-left: -28px!important;  }

  /* ════════════════════════════════════════
     CASE FOOT
     9. フォントサイズ 12px（stile.css の 16px を確実に上書き）
  ════════════════════════════════════════ */
  .case-foot { font-size: 12px !important; }

  /* ════════════════════════════════════════
     SIT CARD — sit-rec 横揃え
  ════════════════════════════════════════ */
 .sit-a h4,
.sit-b h4,
.sit-c h4,
.sit-d h4 {
  width: 100%;  min-height: 70px;  margin-bottom: 0 !important;}
  .sit-rec {  padding: 10px 20px;  line-height: 1.4  !important; }

  /* ════════════════════════════════════════
     INSIGHT
  ════════════════════════════════════════ */
  .insight { padding: 20px 0; gap: 0; }
  .ins-body { font-size: 16px; }

  /* ════════════════════════════════════════
     CHECKLIST
  ════════════════════════════════════════ */
  .chk-c span { line-height: 0.75; font-size: 16px !important;}
  .chk-c strong{font-size: 18px !important;}

  /* ════════════════════════════════════════
     SERVICE CARDS
  ════════════════════════════════════════ */
  .sc-strip-note { text-align: left !important;}
  .sf-txt span   { line-height: 0.75; }

  /* sc-cta：stile.css の @media(max-width:768px) 24px ルールを !important で上書き */
  .sc-cta { font-size: 17px !important; line-height: 1.2; }

  /* ════════════════════════════════════════
     REV CARD
     10. アイコン左上配置 + 星を横に並べ下からテキスト
         競合：stile.css の position:absolute を !important で上書き
  ════════════════════════════════════════ */
  .rev-card {
    padding: 14px 16px !important;
    font-size: 16px !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 10px !important;
  }
  /* stile.css の position:absolute / transform を !important で解除 */
  .rev-icon {
    position: static  !important;
    transform: none   !important;
    grid-column: 1;
    grid-row: 1;
    align-self: start;   /* 左上 */
  }
  .rev-icon img { width: 42px; height: 42px; }
  .rev-stars {
    grid-column: 2; grid-row: 1;
    align-self: center; margin-bottom: 0;
  }
  .rev-txt  { grid-column: 1 / 3; grid-row: 2; margin-top: 8px; font-size: 16px !important; }
  .rev-meta { grid-column: 1 / 3; grid-row: 3; }

  /* ════════════════════════════════════════
     SITUATION CARDS
     11. sit-rec ボタンの縦位置を揃える
         ・sit-card は既に flex-direction:column（stile.css）
         ・h4 { flex:1 } で h4 が伸び、sit-rec が常に同一縦位置に
         ・height は !important で stile.css の 34px を上書き
         ・<style>タグ の 680px ルールで 2 カラムグリッドは確保済み
  ════════════════════════════════════════ */
  .sit-card   { display: flex !important; flex-direction: column !important; }
  .sit-card h4 { flex: none; }
  .sit-rec    { height: 45px !important; font-size: 14px; }

}

/**/
.fit-b.fok ul li,
.fit-b.fng ul li
{font-size: 14px !important;}




/*選び方セクション*/
.sit-ic {
    width: 86px;    height: 86px;
    display: flex;    align-items: center;    justify-content: center;
    margin: -6px auto 10px;    flex-shrink: 0 !important;}

/**/
    .upd{  padding:13px 20px !important;;
}

/**/
.sub-cta a{   padding:13px 50px 13px 13px !important;}
.sub-cta a::after{  width:36px !important;}