/* =========================================================
   hds-mobile-sell.css   v5   (2026-08-02)
   スマホ（〜770px）を「売れるHP」に整えるための追記スタイル
   設計原則：見出しは2行以内で大きく／対象と結果を一文で／
             CTAは1つだけ大きく／書籍バッジはCTAの下に小さく
   ========================================================= */

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

  /* ---- 1. ヘッダーのロゴを圧縮し、最初の一画面を本文に明け渡す ---- */
  #header #logo_image{ padding:4px 0 !important; }
  #header #logo_image h1.logo,
  #header #logo_image .logo{ margin:0 !important; line-height:1 !important; }
  #header img.mobile_logo_image{
    max-height:88px !important;
    height:auto !important;
    width:auto !important;
  }

  /* ---- 2. ヒーロー写真を活かし、その上に白いカードを重ねる ---- */
  body.home #header_slider_wrap{ height:auto !important; min-height:0 !important; }
  body.home #header_slider,
  body.home #header_slider .slick-list,
  body.home #header_slider .slick-track,
  body.home #header_slider .item{ height:auto !important; min-height:0 !important; }

  body.home #header_slider .item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:34px 0 !important;
    background-position:center center !important;
    background-size:cover !important;
  }

  body.home #header_slider .item .caption{
    position:relative !important;
    top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    margin:0 18px !important;
    padding:22px 18px 20px !important;
    box-sizing:border-box !important;
    background:rgba(255,255,255,.93) !important;
    border:1px solid rgba(212,175,55,.5) !important;
    border-radius:12px !important;
    box-shadow:0 10px 30px rgba(90,78,78,.18) !important;
    transform:none !important;
  }

  /* 見出しを、ひとまわり大きく、堂々と */
  body.home #header_slider .item .caption h2.title{
    font-size:26px !important;
    line-height:1.55 !important;
    letter-spacing:.02em !important;
    margin:0 0 12px !important;
  }
  body.home #hds-hero-sub{
    font-size:13.5px !important;
    line-height:1.85 !important;
    margin:0 0 16px !important;
  }
  body.home #header_slider .item .caption a.button{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    font-size:16.5px !important;
    padding:17px 34px 17px 22px !important;
  }
  body.home #header_slider .item .caption .rs-hero-subnote{
    margin-top:10px !important;
    font-size:11.5px !important;
  }


  /* ヒーロー写真がスマホで表示されない件の補正。
     ★ ヒーロー画像を差し替えたときは、下の1行のファイル名も更新すること。 */
  body.home #header_slider .slick-list .slick-track .item{
    background-color:#fbf1f0 !important;
    background-image:url("/wp-content/uploads/2026/07/hero_slider_1600x840_2026-07-25.jpg") !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  /* ---- 3. 書籍バッジは、CTAの下に小さく ---- */
  body.home #header_slider .item .caption .rs-hero-badge.rs-hero-badge{
    order:9 !important;
    transform:none !important;
    margin:14px 0 0 !important;
    padding:8px 10px !important;
    border-radius:8px !important;
    align-items:center !important;
    gap:9px !important;
  }
  /* 左にはみ出して切れていた勲章は、スマホでは外す */
  body.home #header_slider .item .caption .rs-hero-badge.rs-hero-badge::before,
  body.home #header_slider .item .caption .rs-hero-badge.rs-hero-badge::after{
    display:none !important;
  }
  body.home #header_slider .item .caption .rs-hero-badge__cover{
    width:34px !important;
    min-width:34px !important;
    flex:0 0 34px !important;
  }
  body.home #header_slider .item .caption .rs-hero-badge__cover img{
    width:100% !important; height:auto !important; display:block !important;
  }
  body.home #header_slider .item .caption .rs-hero-badge__rank{
    font-size:9.5px !important; padding:2px 7px !important;
  }
  body.home #header_slider .item .caption .rs-hero-badge__title{
    font-size:11.5px !important; line-height:1.45 !important; margin-top:3px !important;
  }
  body.home #header_slider .item .caption .rs-hero-badge__note{
    font-size:9.5px !important; line-height:1.45 !important;
  }
  body.home #header_slider .item .caption .rs-hero-badge__buy{ display:none !important; }

  /* ---- 4. 長い本文を左揃えにして、行末のガタつきを消す ---- */
  .hds-kin__lead,
  .hds-book__lead,
  .hds-top-cta-lead,
  .mk-lead,
  .mk-note,
  .mk-cta p,
  #hds-news-lead{ text-align:left !important; }

  .hds-kin__lead br,
  .mk-lead br,
  .mk-cta p br,
  .hds-book__lead br{ display:none !important; }

  /* ---- 5. 無料KIN診断：入力欄を一画面目に近づける ---- */
  .hds-kin__inner{ padding-top:26px !important; }
  .hds-kin__title{ margin-bottom:14px !important; }
  .hds-kin__lead{
    font-size:14px !important;
    line-height:1.9 !important;
    margin-bottom:14px !important;
  }
  .mk-hero{ padding-bottom:14px !important; }
  .mk-lead{ margin-bottom:10px !important; }

  /* ---- 6. 会社概要など、独自レイアウトの固定ページ ---- */
  /* 本文の柱が細くなりすぎ、見出し下に大きな空白ができていたため整える */
  .post_content .page{ padding:20px 10px 56px !important; }
  .post_content .page .site-header{ padding:26px 0 32px !important; }
  .post_content .page .section{ margin-bottom:48px !important; }
  .post_content .page .page-footer{ padding-top:34px !important; }

}