.header-inner {
  padding: 4px 4px; /* 全体を少しコンパクトに */
}

body {
  margin: 0;
  padding-bottom: 120px; /* ボタンに被らない余白 */
  font-family: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 500; 
}

/* タイトルやボタンなどは、さらに太くするとロゴっぽくて可愛くなります */
h1, h2, h3, .btn-main, .fixed-cta {
  font-weight: 800; /* ExtraBold */
}

.fixed-cta {
  display: flex !important;
  visibility: visible !important;
  position: fixed !important; /* 画面に固定 */
  left: 0 !important;
  bottom: 0 !important;       /* 下端に密着 */
  width: 100% !important;
  height: 100px ;
  z-index: 999999 !important; /* 絶対に最前面 */
}

  .fixed-cta{
    display: flex !important;
    flex-direction: row !important; /* ←横並びにする */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .fixed-cta__btn{
    flex: 1 !important;  /* ←2つを同じ幅に */
    min-width: 0;        /* ←これがないと崩れることがある */
    white-space: nowrap; /* ←文字を折り返さない */
  }


.fixed-cta__btn--sub {
  background: #f8fafc;
  color: #3E8BC9;
  border: 1px solid #e2e8f0 !important;
}

.fixed-cta__btn--main {
  background: linear-gradient(135deg, #FF9D00, #FF5500) !important;
  color: #fff !important;
  position: relative;
}

/* 吹き出し（1分で完了） */
.fixed-cta__btn--main::before {
  content: "＼ 1分で完了 ／";
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: #E60012;
  color: #FFFF00;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: bold;
  white-space: nowrap;
}

/* ロゴを小さく */
.header-logo img {
  height: 28px;   /* ← SPはこれくらいがちょうどいい */
}

.header-tel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 2px 10px;
  min-height: 28px;
  border-radius: 30px;

  background: #3E8BC9;        /* 背景なし */
  color: #fff;

  font-size: 12px;
  font-weight: 500;
}

/* 背景の余白をなくす */
  .heroback {
    padding: 0;

  }

  /* 画像を画面いっぱいに */
  .hero-slider img {
    max-width: 100%; /* 90%制限を解除してフル幅に */
    width: 100%;
    border-radius: 0; /* もし角丸をつけていたらスマホでは直角に戻す */
    box-shadow: none; /* スマホでは影なしでフラットに */
  }

.banner1{
    width: 100%;
    margin: 0;                   /* PCで中央寄せしてたなら解除 */
    display: block;
    padding-top: 16px;
  }

  .banner1 img{
    display: block;
    width: 100%;
    max-width: none;             /* PCでmax-width指定してたら解除 */
    height: auto;
  }


.campaign-btn {
  width: 40%;
  max-width: 360px;
  font-size: 16px;
  padding: 14px 0;
}
.pain-section {
    padding: 60px 16px;
    background-color: #4ac2c3;/* スマホでもしっかりグレーに */
  }

  .pain-container {
display: contents; 
  }

  .pain-box {
    padding: 24px 16px;
    min-height: 280px;
  }

.pain-box--check {
    grid-column: 1 / -1; /* 横幅いっぱいに */
    order: 1;            /* 1番上に表示 */
    padding-bottom: 50px; /* ★下にイラストが重なる分の余白を空ける */
    z-index: 1;
  }

  .pain-title {
    font-size: 21px;
    margin-bottom: 20px;
  }
/* --- mobile.css 修正版：シンプルで見やすいチェックリストデザイン --- */

  /* 1. 親枠の設定（グリッドで整理） */
  .pain-inner {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右2列（イラスト用） */
    gap: 10px;
    padding-bottom: 0 !important;
    position: relative;
  }

  /* コンテナの枠を無視して中身を並べ替え可能にする */
  .pain-container {
    display: contents; 
  }

  /* --- 順序1：お悩みリストのエリア --- */
  .pain-box--check {
    grid-column: 1 / -1; /* 横幅いっぱいに */
    order: 1;            /* 1番上 */
    padding-bottom: 20px;
    background: transparent; /* 背景なしでスッキリ */
    border: none; /* 枠線もなし */
    box-shadow: none; /* 影もなし */
    padding: 0;
  }

  /* --- リストのデザイン（ここを大きく変更！） --- */
  .pain-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }

 /* リスト本体のデザイン（ズーンと暗く） */
  .pain-list li {
    /* 文字色を白にする */
    color: #FFFFFF !important; 
    
    /* 背景色：暗いグレー（不安な感じ） */
    background: #5a6a7b; 
    
    /* 左端のライン：さらに暗い色で重さを出す */
    border-left: 6px solid #1F2937;
    
    /* その他の設定は維持 */
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 4px;
    padding: 16px 16px 16px 24px;
    margin-bottom: 12px;
    
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: left;
    
    /* 影を濃くして、地面に張り付いている感を出す */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    
    transform: rotate(-1deg);
  }

  /* 2つ目は色を変える（くすんだ紫系で「悩み」を強調） */
  .pain-list li:nth-child(even) {
    transform: rotate(1deg);
    
    /* 背景色：彩度の低い紫（淀んだ空気感） */
    background: #7a7c92; 
    
    /* ライン色 */
    border-left-color: #2D2E38;
  }

  /* アイコンや矢印は非表示のまま */
  .pain-list li::before,
  .pain-list li::after {
    display: none !important;
  }

  .pain-illust {
    display: block !important;
    position: static !important; /* 自由に配置 */
    order: 2;            /* リストと解決策の間 */
    
    /* ★ここを調整しました */
    width: 90px;         /* サイズを少し小さく */
    height: auto;
    margin-top: -115px;   /* 上にずらして、付箋のすぐ下に配置 */
    z-index: 10;
    
    /* 左右中央寄せ */
    margin-left: auto;
    margin-right: auto;
  }

  /* 女性（左側）- 微調整 */
  .pain-illust--left {
    grid-column: 1;
    justify-self: center;
    transform: rotate(-5deg) translateX(-45px); /* 少し中央寄りに */
  }

  /* 男性（右側）- 微調整 */
  .pain-illust--right {
    grid-column: 2;
    justify-self: center;
    transform: rotate(5deg) translateX(45px); /* 少し中央寄りに */
  }

/* 1. ボックスをFlexboxにして、上から順に並べる設定にする */
  .pain-box--message {
    display: flex !important;
    flex-direction: column !important; /* 縦並び */
    align-items: center !important;    /* 中央揃え */
    justify-content: flex-start !important;
    
    padding: 40px 16px 20px !important; /* 上は矢印用の余白 */
    height: auto !important;            /* 高さは中身に合わせて自動で伸ばす */
    background: #ffffff !important;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    margin-top: 60px !important;
    position: relative !important;
    overflow: visible !important;
    
    /* 並び順の確保 */
    order: 3 !important; 
  }
.pain-box--message::before {
    content: "";
    position: absolute;
    top: -53px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 25px 0 25px;
    border-color: #F59E0B transparent transparent transparent;
    filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1));
    z-index: 10;
    animation: arrowBounce 1s infinite alternate ease-in-out;
  }

  /* 3. テキストエリア（前面に表示） */
  .pain-message-content {
    position: relative;
    z-index: 5; /* 画像より手前に表示 */
    width: 100%;
  }

.pain-catch {
    font-size: 23px !important; /* ★サイズダウン（以前は大きすぎました） */
    line-height: 1.5 !important;
    width: 100%;
    margin-bottom: 10px !important;
    text-align: center !important;
  }

  .pain-catch .highlight {
    background: linear-gradient(transparent 60%, #FFF500 60%) !important;
    padding: 0 4px;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  
  .pain-note {
    font-size: 16px;
    color: #4B5563;
    margin-bottom: 20px !important; /* 画像との隙間 */
    text-align: center !important;
    margin-top: 0 !important;
    line-height: 1.6;
  }

.pain-message-visual {
    position: static !important; /* ★ここが重要：自由に動く設定を解除 */
    width: 180px !important;     /* スマホで見やすいサイズ */
    height: auto !important;
    margin: 0 auto !important;   /* 中央寄せ */
    
    /* 余計な設定をリセット */
    transform: none !important;
    opacity: 1 !important;
    z-index: 1;
  }
  
  .pain-message-visual img {
    width: 100%;
    display: block;
    height: auto;
  }
  .pain-list li br {
  display: none;
}

/* 1. お悩みリスト（一番上） */
  .pain-box--check {
    order: 1 !important;
  }

  /* 2. イラスト（真ん中） */
  .pain-illust {
    order: 2 !important;
  }

  /* 3. 解決策ボックス（一番下） ★ここが重要！ */
  .pain-box--message {
    order: 3 !important;
  }

    .service-section {
    padding: 60px 16px;
  }

  .service-grid {
    flex-direction: column;
    gap: 40px;
  }

  .service-card {
    padding: 30px 20px;
  }

  .service-lead {
    min-height: auto;
  }

 .service-footer-check {
  flex-direction: column;
  text-align: left;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  gap: 4px;
  font-weight: 600;
}

.service-points li {
  font-size: 17px;
  margin-bottom: 6px;
}

  .service-footer {
  text-align: center;
  border-top: 1px solid;
  padding-top: 0px; }

  .service-footer-note {
    margin-bottom: 0;
    font-size: 18px;
  }
  
  .sp-only { display: block; }

  .plan-section {
    padding: 60px 16px;
  }

  .section-title {
    font-size: 18px;
    margin-bottom: 18px;
  }

  .plan-grid {
    grid-template-columns: 1fr; /* スマホは1列（読みやすさ優先） */
    gap: 16px;
  }

  .plan-card {
    padding: 24px;
  }

  .plan-visual {
    gap: 4px; /* スマホは間隔を狭く */
  }
  
  .plan-visual-img {
    width: 64px;  /* スマホでは少し小さく */
    height: 64px;
  }
  
  .plan-visual-plus {
    font-size: 16px;
  }

  .plan-tagline{
    font-size: 16px;
  }

  .plan-content li{
    font-size: 16px;
  }

  .section-lead {
    font-size: 22px;
  }

 /* Voice Section (New Design) --- */

  
.voice-section {
    /* PCと同様のグラデーションを適用 */
    background: radial-gradient(circle at center, #FFF9F0 30%, #FFD1A4 100%) !important;
  }

  .voice-header {
    margin-bottom: 40px;
  }

  .voice-main-title {
    font-size: 24px;
    letter-spacing: 0;
    line-height: 32px;
  }

  .voice-body {
    font-size: 16px;
  }
  /* --- 行のレイアウト（縦積みに変更） --- */
  .voice-row {
    flex-direction: column; /* 常に縦並び */
    gap: 20px;
    margin-bottom: 60px;
    border-bottom: 1px solid #eee; /* スマホでは区切り線を入れると見やすい */
    padding-bottom: 60px;
  }

  /* 最後の要素だけ線と余白を消す */
  .voice-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* 逆向き指定を解除（常に 画像→テキスト の順） */
  .voice-row--reverse {
    flex-direction: column; 
  }

  /* 画像エリア */
  .voice-img-wrap {
    width: 100%;
  }

  .voice-img-inner {
    max-width: 280px; /* スマホでの画像サイズ */
    margin: 0 auto;   /* 中央寄せ */
    /* スマホでもぼかしを入れる */
    box-shadow: inset 0 0 30px 15px #FDFCF8;
  }

  /* 引用符の位置調整 */
  .voice-content::before {
    font-size: 80px;
    top: -40px;
    left: 0;
  }

  /* 見出し */
  .voice-heading {
    font-size: 18px;
    margin-top: 10px;
    letter-spacing: 1px;
    font-weight: 500;
  }

  /* タグ */
  .voice-tags {
    flex-wrap: wrap;
  }

 .cta-section {
    padding: 60px 16px;
  }

  .cta-inner {
    padding: 40px 24px;
    border-radius: 20px;
  }

  .cta-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
    letter-spacing: 1px;
  }

    .micro-copy {
    font-size: 12px;
  }

 .cta-price-wrapper {
    flex-direction: column; /* 縦並び */
    gap: 20px;
  }
  
  /* 写真を価格の下、または上に移動させたい場合 */
  /* ここでは価格の下に表示されます */

  .cta-features ul {
    flex-direction: column; /* リストも縦並びで見やすく */
    gap: 12px;
    align-items: center; /* 中央揃え */
  }

  .cta-price-main strong {
    font-size: 50px;
  }

  .cta-price-main span {
  font-size: 18px;
  font-weight: bold;
}

  .cta-content {
    flex-direction: column-reverse;
    gap: 30px;
    text-align: center;
    padding-bottom: 30px;
  }

  .cta-features li {
    display: inline-block; /* スマホでは横並びっぽくして高さを抑える */
    text-align: left;
  }


  .btn-main {
    font-size: 20px;
    padding: 20px;
  }

  .btn-sub {
    width: 100%;
    max-width: 420px; /* btn-mainと揃える */
  }

  .cta-standard-price ul {
    flex-direction: column;
    gap: 8px;
  }

  .cta-reassurance{
    font-size: 15px;
  }
  .footer-section {
    padding: 50px 16px 20px;
  }

  .footer-links {
    flex-direction: column; /* スマホでは縦並び */
    gap: 16px;
  }

    .pain-section,
  .service-section,
  .plan-section,
  .voice-section,
  .cta-section {
    padding: 80px 16px !important;
  }

  .service-img-placeholder{
    background: #fff;
  }