/* ---------- RESET ---------- */
html {scroll-behavior: smooth;}

	* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: "Hiragino Sans", "Arial", sans-serif;
      line-height: 1.7;
      color: #333;
	  padding-top:0px; 
    }
/* スマホ幅だけ 54px 余白を確保する */
@media (max-width:768px){
  body{ padding-top:0px; }
  html{ font-size: 16px; }  
}

    a {
      color: inherit;
      text-decoration: none;
    }
    img {
      max-width: 100%;
      display: block;
    }
    ul {
      list-style: none;
    }
	.waku{
	border: 1px solid #ddd;
	margin: 0 0 0px 0;
	padding: 0px;
    }  



/* プログレスバー　画面最上部に固定・高さ 1px */
#read-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0;                 /* JS で伸ばす */
  background:#ffbf00;      /* 好きな色 */
  z-index:9999;
}



/* ───── モバイル用ミニヘッダー（遅延表示） ───── */
@media (max-width:768px){
  .m-header{
    position:fixed; top:0; left:0; right:0; height:58px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px;
    background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08);
    transform:translateY(-100%);          /* 画面外からスタート */
    transition:transform .3s ease;
    z-index:900;
  }
  .m-header.show{ transform:none; }       /* 表示状態 */

  .m-header .logo{ font-size:1.2rem; font-weight:700; color:#333; }
  .m-header .m-nav a{ margin-right:15px; font-size:.85rem; font-weight:600; }
  .m-header .cta{ color:#e80000; font-weight:bold; }
}
@media (max-width:768px){
  .m-header .m-nav a{
    color:#333;             /* 任意：ブランドカラーでもOK */
    font-weight:600;
  }
  .m-header .m-nav a:hover{
    color:#e80000;          /* ホバー／タップ時の強調色 */
  }
}



/* ---------- COMMON ---------- */

    /* ここでmax-widthを720pxに変更 */
    .container {
      width: 96%;
      max-width: 720px;
      margin: 0 auto;
      padding: 40px 0px;
    }
    .container p {
      font-size: 1.1rem;
      margin-bottom: 30px;
    }
	


/* PC向け見出し(h2) */
.section-title {
  font-size: 2.0rem !important;
  text-align: center;
  margin-bottom: 60px!important;
  line-height: 1.2;
}

/* スマホ時にタイトルをやや小さく */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.0rem; /* タイトルが自然に1行に収まる程度に調整 */
  }
}

/* PC向けサブ見出し(h3) */
.sub-heading {
      text-align: center;
  font-size: 1.4rem;      /* PC時: やや大きめ */
  font-weight: bold;
  color: #333;
  margin-top: 30px;       /* 上の余白 */
  margin-bottom: 15px;    /* 下の余白 */
  line-height: 1.4;
}

/* スマホ表示（768px以下） */
@media (max-width: 768px) {
  .sub-heading {
    font-size: 1.2rem;    /* スマホで少し小さく */
    margin-top: 20px;
    margin-bottom: 10px;
  }
}

	.text-center {
      display: block;
      margin: 0 auto;
}
.img-center{
  display:block;        /* ブロック化 */
  margin:0 auto 40px;   /* 左右autoで中央 + 下に40px余白例 */
}
    .mb-20 {
      margin-bottom: 20px;
    }
    .mb-30 {
      margin-bottom: 30px;
    }
    .mb-40 {
      margin-bottom: 40px;
    }
	.b {
      font-weight:  bold;
    }
	.red {
	      color: #e74c3c;
    }


.disclaimer {
  font-size: 0.7rem !important;
  color: #666;
  text-align: center; /* 必要なら中央揃え */
  line-height: 1.4;
  margin-top: 10px;
}




/* ---------- DECORATIONS (アンダーライン・マーカー) ---------- */
    .u-l {
      border-bottom-width: 2px;
      border-bottom:dotted 2px #c60;
	  text-underline-offset: 4px;   /* テキストと下線の隙間 */
    }
    .u-m {
      background: linear-gradient(transparent 60%, #f7f787 50%);
      padding: 0 2px; /* 両サイドに少し余白を */
    }




/* ---------- Balloon (吹き出し: 枠線あり & 影なし) ---------- */
    .balloon {
      display: flex;
      align-items: flex-start;
      margin-bottom: 40px;
    }
    .balloon-icon {
      margin-right: 15px;
    }
    .balloon-icon img {
      width: 80px;
      height: 80px;
    min-width: 80px;       /* 最小幅を指定して潰れないようにする */
    min-height: 80px;      /* 最小高さを指定して潰れないようにする */
      object-fit: cover;
      border-radius: 50%;
	  border: 1px solid #ddd;  /* 枠線 */
      background: #ffffff;
    }
    .balloon-text {
      font-size: 1.1rem;
      position: relative;
      background: #f5f5f5;
      border: 1px solid #ddd;  /* 枠線 */
      padding: 14px 20px;
      border-radius: 8px;
      max-width: 90%;
      line-height: 1.8;
      /* box-shadow: none; ← 影なしのためコメントアウト */
    }
    /* 枠付き三角（左向き） - 外側(枠) */
    .balloon-text::before {
      content: "";
      position: absolute;
      left: -20px;
      top: 20px;
      border: 10px solid transparent;
      border-right: 10px solid #ddd;  /* 枠線色 */
      z-index: 1;
    }
    /* 枠付き三角 - 内側(背景色) */
    .balloon-text::after {
      content: "";
      position: absolute;
      left: -18px;
      top: 20px;
      border: 9px solid transparent;
      border-right: 9px solid #f5f5f5;   /* 吹き出し背景色 */
      z-index: 2;
    }
	
	
	
/* ---------- Balloon Right (アイコン右側バージョン) ---------- */
.balloon.right {
  justify-content: flex-end;
  flex-direction: row;
}
.balloon.right .balloon-icon {
  margin-left: 15px;
  margin-right: 0;
  order: 2; /* アイコンを右端に配置 */
}
.balloon.right .balloon-text {
  order: 1; /* 吹き出しを左側に配置 */
}
.balloon.right .balloon-text::before {
  left: auto;
  right: -20px;
  border: 10px solid transparent;
  border-left: 10px solid #ddd;
}
.balloon.right .balloon-text::after {
  left: auto;
  right: -18px;
  border: 9px solid transparent;
  border-left: 9px solid #f5f5f5;
}

/* ---------- 吹き出しアイコン下の名前 ---------- */
.balloon-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 15px;
}

.balloon.right .balloon-icon {
  margin-left: 15px;
  margin-right: 0;
}

.balloon-icon span {
  margin-top: 4px;
  font-size: 0.7rem;
  color: #666;
  text-align: center;
}






/* ---------- HEADER ---------- */
    header {
      background: #111;
      color: #fff;
      text-align: center;
      padding: 5px 0;
    }
    header h1 {
      font-size: 1.8rem;
      font-weight: bold;
    }
    header p {
      font-size: 0.9rem;
      opacity: 0.8;
    }
	


/* ---------- HERO (ファーストビュー) ---------- */
    .hero {
      background: #fff;
      padding: 0px 0px 0px 0px;
	  margin: -20px 0px 0px 0px;
      text-align: center;
    }
    .hero h2 {
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 1.3;
      margin-bottom: 20px;
    }
    .hero p {
      font-size: 1.2rem;
      margin-bottom: 30px;
    }
    .hero iframe {
      width: 80%;
      height: 315px;
      max-width: 560px;
      margin: 0 auto;
      border: none;
    }

    /* PC・スマホ表示分け用 */
    .pc-only, .sp-only {
      display: none; /* 初期状態では両方とも非表示 */
    }
    /* 768px超（PC相当）の場合：.pc-only を表示 */
    @media (min-width: 769px) {
      .pc-only {
        display: block;
      }
    }
    /* 768px以下（スマホ相当）の場合：.sp-only を表示 */
    @media (max-width: 768px) {
      .sp-only {
        display: block;
      }
    }



/* ---------- PRODUCT SECTIONS (背景あり・背景なし) ---------- */

 /* 背景付き（薄いグレーなど） */
    .product-section-bg {
      background-color: #f9f9f9; /* f9f9f9お好みの色fffef9  */
      padding: 10px 10px;
    }

/* 背景なし（白） */
    .product-section-white {
      background-color: #fff;
      padding: 10px 20px;
    }
	
/* 背景なし（グレー） リスト */
.product-section-bg ul {
  background: #ffffff;
  padding: 20px 25px 5px 25px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 20px 0px 40px 0px;
}

.product-section-bg li {
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
  line-height: 1.8;
}

.product-section-bg li::before {
  content: "▶";
  color: #e74c3c;
  position: absolute;
  left: 0;
  top: 2px;
}

    /* 背景なし（白） リスト */
.product-section-white ul {
  background: #f7f7f7;
  padding: 20px 25px 5px 25px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin: 20px 0px 40px 0px;
}

.product-section-white li {
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
  line-height: 1.8;
}

.product-section-white li::before {
  content: "▶";
  color: #e74c3c;
  position: absolute;
  left: 0;
  top: 2px;
}


/* レイアウト共通 */
    .product-section .container {
      /* 既存 container でもOKだが、重複しないようclass指定 */
      max-width: 720px;
      margin: 0 auto;
    }
    .product-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: center;
    }
    .product-image {
      flex: 0 0 40%;
      min-width: 280px;
    }
    .product-image img {
      width: 100%;
      border-radius: 4px; /* 任意で角丸 */
      display: block;
    }
    .product-desc {
      flex: 1;
      line-height: 1.6;
    }
    .product-desc h3 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .product-desc p {
      margin-bottom: 15px;
    }
    .product-desc ul {
      list-style: disc;
      padding-left: 1.6rem;
      margin-bottom: 15px;
    }

    @media (max-width: 768px) {
      .profile .profile-inner {
        flex-direction: column;
        text-align: center;
      }
      .profile .profile-img, .profile .profile-text {
        flex: none;
        max-width: 100%;
      }
      .profile .profile-text {
        text-align: center;
      }
      .hero iframe {
        width: 100% !important;
        height: 250px !important;
      }
      .plan-wrap {
        flex-direction: column;
      }
      .product-flex {
        flex-direction: column;
      }
      .product-image,
      .product-desc {
        width: 100%;
      }
    }




/* ---------- 鑑定例 ---------- */

.section-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 40px 0;
}

.section-item {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-left: 6px solid #888; /* カテゴリ感を出す強調線 */
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.section-item h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.section-item p {
  margin: 0px 0px 30px 0px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #555;
}

/* ── .section-item 内の画像 ────────────────────────── */
.section-item img{
  display:block;          /* 中央寄せ用にブロック要素化           */
  margin:20px auto 40px;     /* 左右中央 + 下余白                     */

  /* ★ サイズ調整 ★
     ① 幅を％指定にするとカード幅に応じて自動で伸縮
     ② max-width で “広がり過ぎ” を防ぐ
     （数値はお好みで変更してください）              */
  width:80%;              /* カード幅に対するパーセント指定         */
  max-width:100%;        /* これ以上は拡大しない                  */

  height:auto;            /* アスペクト比を保持                    */
    /* ▼ 見栄えアップ用スタイル ▼ */
  border-radius:8px;                       /* 角丸   */
  box-shadow:0 6px 12px rgba(0,0,0,0.10);  /* ふわっと立体感 */

  transition:transform .3s ease,           /* ホバーで少し浮かせる演出 */
             box-shadow  .3s ease;
}

/* 例：スマホなど画面幅が狭い時はフルサイズにしたい場合 */
@media (max-width: 600px){
  .section-item img{
    width:100%;
    max-width:100%;
  }
}



/* ---------- タイムフロー ---------- */
/* タイムライン全体 */
.timeline {
  position: relative;
  margin-top: 60px;
}

/* 縦線（太さを変更する場合は width: 3px; などに） */
.timeline::before {
  content: "";
  position: absolute;
  left: 30px;       /* ラインのX座標 */
  top: 0;
  bottom: 0;
  width: 8px;       /* 縦線の太さ：4px */
  background: #eee; /* 薄いグレー */
}

/* 各ステップ */
.timeline-step {
  position: relative;
  margin-bottom: 60px;
}

/* 丸マーカー（太さはborderの太さで調整可能） */
.timeline-step::before {
  content: "";
  position: absolute;
  left: 25px;          /* ライン中央(30px)より -5px */
  top: 20px;           /* カードの開始位置に合わせる */
  width: 14px;
  height: 14px;
  background: #fff;
  border: 3px solid #ccc;
  border-radius: 50%;
  z-index: 2;          /* マーカーを前面に */
}

/* 横線（カードへ繋ぐ線）の太さを変えたければheightで調整 */
.timeline-step::after {
  content: "";
  position: absolute;
  left: 39px;          /* 25 + 14 = 39 */
  top: 26px;           /* 20 + (14/2)=26 でマーカー中央 */
  width: 21px;         /* カード margin-left(60) - 39 = 21 */
  height: 2px;         /* 横線の太さ：2px */
  background: #ccc;
  z-index: 1;
}

/* カード本体 */
.timeline-card {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 20px;
  margin-left: 60px;   /* 縦線 + マーカーから離す */
}

/* タブ部分（四隅にアールをつける） */
.timeline-tab {
  position: absolute;
  top: -1.2em;          /* カード上部からやや飛び出させる */
  left: 20px;
  background: #777;     /* もう少し薄くするなら #666, #777 など */
  color: #fff;
  font-weight: bold;
  font-size: 1.0rem;
  padding: 6px 12px;
  border-radius: 8px;   /* 四隅にアール */
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

/* カードの本文 */
.timeline-body {
  padding: 20px 0 0px 0px;
}

.timeline-body p {
  margin-bottom: 20px;
  line-height: 1.8;
}

/* カード内タイトル (見出し) */
.card-title {
  font-size: 1.4rem;  /* 少し大きめ */
  font-weight: bold;  /* 太字 */
  margin-bottom: 24px;/* 下の余白 */
  color: #333;        /* 好みで */
}

/* ★ 枠なし & 背景なし 版の箇条書き */

.timeline-body ul {
  /* 枠や背景を削除 */
  background: none;
  border: none;
  margin: 30px 0 20px 0;
  /* パディングを少し調整 */
  padding: 0 0 5px 0;
}

.timeline-body li {
  font-size: 1.1rem;
  margin-bottom: 18px;
  padding-left: 25px;
  position: relative;
  line-height: 1.8;
}

/* 矢印のデザイン */
.timeline-body li::before {
  content: "▶";
  color: #e74c3c;
  position: absolute;
  left: 0;
  top: 2px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  /* 縦線を左に寄せる */
  .timeline::before {
    left: 15px;
    /* width: 3px; ←太さを変えても可 */
  }
  /* 丸マーカー */
  .timeline-step::before {
    left: 10px;
  }
  /* 横線の位置/長さ */
  .timeline-step::after {
    left: 24px;  /* 10 + 14=24 */
    top: 26px;   /* 中央を合わせる */
    width: 21px; /* 例: margin-left(45) - 24=21 (後述) */
    /* height: 2px;  ← 太さはそのまま */
  }
  /* カード margin */
  .timeline-card {
    margin-left: 45px; /* カード全体を少し小さめに左マージン */
    max-width: 85%;    /* 幅を少し狭めるなど好みで */
  }
  .timeline-tab {
    left: 10px;
  }
}





/* ----------家族プラン説明カード ---------- */

/* === 基本配色 (温かみを持たせたベージュ基調) === */
:root{
  --uc-bg: #fffef9;
  --uc-card: #ffffff;
  --uc-border: #e2d8c7;
  --uc-accent: #c40000;
  --uc-text: #333;
}

/* 全体セクション */
.use-case{
  background: var(--uc-bg);
  padding: 50px 20px;
}

/* ---------- カード ---------- */
.uc-card{
  background: var(--uc-card);
  border: 1px solid var(--uc-border);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  padding: 25px 30px;
  margin-bottom: 40px;
}

.uc-bullet{
  display:block;               /* 中央寄せを有効にするためブロック化 */
  margin:20px auto 40px;       /* 左右中央 & 上下マージン            */

  /* サイズ調整（％指定＋上限で“伸縮＆広がり過ぎ防止”）  */
  width:80%;
  max-width:100%;
  height:auto;                 /* アスペクト比を保持                 */

  /* 見映えアップ */
  border-radius:8px;                          /* 角丸          */
  box-shadow:0 6px 12px rgba(0,0,0,0.10);     /* ふわっと影   */
  transition:transform .3s ease,
             box-shadow  .3s ease;            /* ホバー演出   */
}
.uc-bullet:hover{
  transform:translateY(-4px);                 /* ちょっと浮く */
  box-shadow:0 10px 16px rgba(0,0,0,0.15);    /* 影を深く     */
}



/* カード上部帯 + アイコン */
.uc-head{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.uc-icon{
  font-size: 1.8rem;
  margin-right: 10px;
}
.uc-title{
  font-size: 2.0rem !important;
  text-align: center;
  margin-bottom: 15px!important;
  line-height: 1.2;
}

/* 特徴リスト */
/* ── ベースはそのまま ───────────────────── */
.uc-list{
  background:#faf5ee;
  border:1px solid var(--uc-border,#e4d9cd);
  border-radius:8px;
  padding:18px 20px 18px 20px;
  margin:18px 0;
}
.uc-list li{
  position:relative;
  margin-bottom:30px;
  padding-left:28px;        /* ✔ と本文の間隔を調整 */
  line-height:1.7;
}
.uc-list li::before{         /* チェックマーク */
  content:"✔";
  color:var(--uc-accent,#c40000);
  position:absolute;
  left:0;top:0.15em;
  font-weight:bold;
}

/* ── 見出しと本文を分離 ───────────────── */
.uc-term{
  display:block;            /* 改行して見出し行に */
  font-weight:700;          /* 太字（太角ゴシックを指定している場合は継承） */
  font-size:1.1rem;        /* 見出しだけやや大きく */
  margin-bottom:8px;
}

.uc-desc{
  display:block;            /* 説明行 */
  font-size:1.05rem;
  color:#555;
}

/* ── 最後の li の下マージンを除去すると締まる ─ */
.uc-list li:last-child{margin-bottom:18px;}



/*────────────────────
 ▼ 見出し「▼ 家族向け ─ 質問例」など
────────────────────*/
.uc-subttl {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--uc-accent);      /* 赤系アクセントカラー */
  margin: 28px 0 12px;
  position: relative;
  padding-left: 26px;
}
.uc-subttl::before{            /* 先頭の ▼ マークを装飾 */
  content: "▼";
  position: absolute;
  left: 0; top: 0;
  color: var(--uc-accent);
  font-size: 1.1rem;
}

/*────────────────────
 質問リスト (例示：qa-list)
────────────────────*/
.qa-list{
  background: #fff8f2;         /* 温かみのある薄ベージュ */
  border: 1px solid var(--uc-border);
  border-radius: 8px;
  padding: 18px 22px 8px;
  margin-bottom: 20px;
}
.qa-list li{
  position: relative;
  margin-bottom: 12px;
  padding-left: 26px;
  line-height: 1.7;
}
.qa-list li::before{           /* Qマーカー（赤い？アイコン） */
  content: "Q";
  font-family: "Kosugi Maru","Noto Sans JP",sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: var(--uc-accent);
  border-radius: 3px;
  padding: 2px 5px;
  position: absolute;
  left: 0; top: 0;
}

/*────────────────────
 既存 リスト(.uc-list) と質問リストの間隔調整
────────────────────*/
.uc-list + .uc-subttl{margin-top:32px;}   /* 特徴リスト後にサブ見出しが来た場合 */
.qa-list li:last-child{margin-bottom:0;}

@media(max-width:768px){
  .uc-title{font-size:1.2rem;}
  .uc-card{padding:20px;}
  .uc-list{padding:15px 18px 5px;}
}









/* ----------特典 ---------- */


/*──────────────────────────
  基本カラー（既存 --uc-* と揃える）
──────────────────────────*/
:root{
  --bo-nus-bg:   #ffffff;
  --bonus-card: #ffffff;
  --bonus-border:#e2d8c7;
  --bonus-accent:#c40000;
}

/* 外枠 */
.bonus-area{
  background: var(--bonus-bg);
  padding: 60px 0px;
  display: grid;                /* PC 2 カラム/スマホ 1 カラム */
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 30px;
}

/* カード本体 */
.bonus-card{
  position: relative;
  background: var(--bonus-card);
  border: 1px solid var(--bonus-border);
  border-radius: 10px;
  padding: 40px 30px 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* 上部 赤帯リボン */
.bonus-ribbon{
  position: absolute;
  top: -14px; left: 20px;
  background: var(--bonus-accent);
  color:#fff;
  font-size: .9rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 6px 6px 0 0;
}

/* タイトル */
.bonus-title{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bonus-accent);
  margin-bottom: 18px;
  line-height: 1.4;
}

/* 箇条書き */
.bonus-list{
  background:#faf5ee;
  border:1px solid var(--bonus-border);
  border-radius:8px;
  padding:20px 22px 10px;
  margin:22px 0;
}
.bonus-list li{
  position:relative;
  margin-bottom:10px;
  padding-left:26px;
  line-height:1.7;
}
.bonus-list li::before{
  content:"✔";
  position:absolute;
  left:0;top:0;
  color:var(--bonus-accent);
  font-weight:700;
}



/* すべての画面幅で 1 カラム化 */
.bonus-area{
  display: flex;          /* grid から flex に切替えても良い */
  flex-direction: column; /* 上から下へ縦積み */
  gap: 30px;              /* カード間の余白はそのまま維持 */
}

/* カード幅を親いっぱいに */
.bonus-card{
  width: 100%;
}

/* 画像ラッパー : 中央寄せ＋下余白 */
.bonus-img{
  text-align:center;   /* 横中央 */
  margin-bottom:24px;  /* タイトルとの間隔 */
}

/* 画像自体 : 最大幅だけ指定してレスポンシブ */
.bonus-img img{
  width:100%;          /* 親の幅に追従 */
  max-width:300px;     /* 大き過ぎない上限を自由に設定 */
  height:auto;
  display:inline-block;
}


/* レスポンシブ調整 */
@media(max-width:768px){
  .bonus-card{padding:30px 22px 25px;}
  .bonus-title{font-size:1.3rem;}
}





/* ----------300万円ストーリー ---------- */

/*─────────────────────
  色変数（既存と合わせる）
─────────────────────*/
:root{
  --case-bg:      #fffef9;   /* ほんのり明るいベージュ */
  --case-border:  #e8dfd0;
  --case-accent:  #c40000;   /* 既存の赤 */
}

/* 外枠カード */
.case-story{
  background: var(--case-bg);
  border: 1px solid var(--case-border);
  border-radius: 10px;
  padding: 48px 32px;
  margin: 60px auto;
  max-width: 720px;          /* ページの他コンテンツと幅を合わせる */
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
}

/* メイン見出し */
.case-head{
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.45;
  color: #333;
  text-align: center;
  margin-bottom: 28px;
}

/* “300万円” を強調 */
.case-num{
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--case-accent);
}

/* 小見出し */
.case-sub{
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--case-accent);
  text-align: center;
  margin: 40px 0 22px;
}

/* 箇条書きボックス */
.case-bullets{
  background: #ffffff !important;
  border: 1px solid var(--case-border);
  border-radius: 8px;
  padding: 22px 26px 10px;
  margin-bottom: 36px;
}
.case-bullets li{
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.7;
}
.case-bullets li::before{
  content: "✔";
  position: absolute;
  left: 0; top: 0;
  color: var(--case-accent);
  font-weight: 700;
}

/* 脚注（※） */
.case-note{
  font-size: 0.85rem !important;
  line-height: 1.7;
  color: #555;
  text-align: left;
}

/*──────── レスポンシブ調整 ────────*/
@media(max-width: 768px){
  .case-head{font-size: 1.65rem;}
  .case-num{font-size: 2rem;}
  .case-sub{font-size: 1.3rem;}
  .case-story{padding: 38px 24px;}
}





/* ───────── CUSTOM BULLET LIST ───────── */
.feature-list{
  background:#fffaf4;            /* わずかに温かみのある下地 */
  border:1px solid #e8dfd0;
  border-radius:10px;
  padding:28px 32px 14px;
  margin:40px 0;                 /* 上下に余白 */
}
.feature-list li{
  position:relative;
  padding-left:34px;             /* マーカー分のインデント */
  margin-bottom:18px;
  line-height:1.8;
  font-size:1.05rem;
}

/* ✔ マーカー（before 疑似要素） */
.feature-list li::before{
  content:"✔";
  position:absolute;
  left:0; top:0;
  font-weight:700;
  font-size:1.2rem;
  color:#c40000;                 /* 既存アクセント赤 */
}

/* ───────── MEDIA QUERY (スマホ調整) ───────── */
@media(max-width:768px){
  .feature-list{
    padding:22px 22px 10px;
  }
  .feature-list li{font-size:1rem;}
}





/* ───────── 中見出し (####) デザイン ─────────
   使い方：
   <h4 class="sub-heading">そもそも、このレベルのコーチング…</h4>
------------------------------------------------------------------- */
.sub-heading{
  font-family: "M PLUS 1p", "Noto Sans JP", sans‑serif; /* 太角ゴシック系 */
  font-weight: 700;
  color:#c40000;               /* 既存アクセント赤 */
  font-size:clamp(1.35rem,1.15rem + .5vw,1.7rem); /* PC↔SP自動可変 */
  line-height:1.45;
  margin:2.8rem 0 1.2rem;      /* 上下余白 */
  letter-spacing:.02em;
}

/* スマホ（幅≤480px）の最小フォントを少し下げる場合だけ */
@media(max-width:480px){
  .sub-heading{font-size:1.25rem;}
}





/* ----------お客様の声 ---------- */

.voice-section {
  background: #f9f9f9;
  padding: 50px 20px;
}
.voice-section .container {
  max-width: 720px;
  margin: 0 auto;
}


/* カード全体 */
.voice-card {
  margin-bottom: 40px;       /* カード間の余白 */
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  background: #fff;
  overflow: hidden;          /* 上部ラインと角丸を整合させるため */
  position: relative;
}

/* 上部カラーライン */
.voice-accent {
  width: 100%;
  height: 4px;           /* ラインの厚み */
  background: #e74c3c;   /* お好みのカラー */
  border-radius: 8px 8px 0 0; /* カード上の丸角 */
}

/* カード中身 */
.voice-content {
  padding: 30px;
  background: #fff;
  border-radius: 0 0 8px 8px; /* 下角の丸み */
}

/* 上部: キャッチコピー & ユーザー情報 */
.voice-top {
  margin-bottom: 20px;
}

.voice-label {
  display: inline-block;
  background: #e74c3c;   /* ラベルの背景色を好みで変更可 */
  color: #fff;          /* 文字色（白） */
  font-size: 1.0rem;   /* 少し小さめの文字サイズ */
  font-weight: bold;
  padding: 6px 10px;     /* 内側余白 */
  border-radius: 4px;   /* 角を丸めてバッジ風 */
  margin-bottom: 12px;   /* 下のh3との余白 */
}

.voice-catch {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  margin: 10px 0 40px 0;
  color: #333;
  text-align: center;
}

.voice-user {
  display: flex;           /* アイコン + テキストを横並び */
  align-items: center;     /* 垂直方向の中央揃え */
  gap: 8px;                /* アイコンと名前の隙間 */
  font-size: 0.95rem;      /* 全体の文字サイズ(例) */
  color: #666;             /* 色味はお好みで */
  margin-top: 6px;         /* h3 との間に少し余白 */
}

.user-icon {
  width: 48px;             /* SNSアイコンの大きさ */
  height: 48px;            /* 正方形に */
  border-radius: 50%;      /* 丸くする */
  object-fit: cover;       /* アイコン画像をトリミングしてフィット */
}

/* Q&A部分 */
.voice-qa {
  margin-top: 10px;
}

.qa-item {
  margin-bottom: 40px;
}

.qa-question {
  font-size: 1.1rem;
  background: #f9f9f9;
  border-left: 3px solid #e74c3c;
  padding: 8px 12px;
  font-weight: bold;
  color: #333;
  border-radius: 4px;
  margin-bottom: 20px;
}

.qa-answer p {
  margin-bottom: 18px;
  line-height: 1.6;
  color: #444;
}





/* ---------- デモ動画 ---------- */

.video-section {
  background: #fff; /* 必要に応じて調整 */
  padding: 50px 20px;
}
.video-section .container {
  max-width: 720px;
  margin: 0 auto;
}


/* 動画一覧を縦に並べる */
.video-list {
  display: flex;
  flex-direction: column;
  gap: 30px; /* カード間の余白 */
}

/* 各動画カード */
.video-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 動画タイトル */
.video-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

/* 簡単な説明文 */
.video-desc {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #555;
}

/* 動画iframeのラップ */
.video-frame {
  text-align: center;   /* 中央揃え (iframe自体に margin:auto; でも可) */
  margin-bottom: 15px;  /* 下に余白 */
}

/* 折りたたみのデザイン */
.toggle-details {
  margin-top: 10px;
  text-align: center;
}

/* summaryボタン */
.toggle-summary {
  display: inline-block;
  background-color: #e74c3c;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  font-size: 0.95rem;
}

/* デフォルト矢印を消す (Chrome等) */
.toggle-summary::-webkit-details-marker {
  display: none;
}

/* 折りたたまれた本文 */
.toggle-content {
  margin-top: 10px;
  line-height: 1.6;
  color: #444;
  text-align: left;
}

/* （OPEN時のsummary色を変えたい場合）
details[open] .toggle-summary {
  background: #d63e2b;
}
*/




/* ---------- PLAN (商品プラン2つ紹介) ---------- */

/* プランの2カラムグリッド */
.plan-grid {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 40px;               /* カード間の余白 */
  margin-top: 40px;
}

.plan-card {
  width: 100%;               /* 横幅いっぱいに */
  max-width: 720px;          /* 好みで制限（中央寄せされます） */
  margin: 0 auto;            /* 中央に表示 */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 35px 65px 30px 65px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
}
/* -------------------------------
   plan-card ─ スマホ幅でパディング調整
   ------------------------------- */
@media (max-width: 600px){      /* 目安：iPhone 15 Pro が 393px */
  .plan-card{
    /* 上下 28px・左右 20px に縮める例 */
    padding: 28px 20px 28px 20px;
  }
}


/* カード上部に太い帯を表示 */
.plan-card::before {
  content: "";
  position: absolute;
  top: 0;                  /* カードの上端 */
  left: 0;
  width: 100%;             /* 横幅いっぱい */
  height: 8px;             /* 帯の太さ（好みで変更） */
  background: #e74c3c;     /* カラー(赤) – 好みに応じて変更 */
  border-radius: 8px 8px 0 0;  /* カード上角を丸める */
  z-index: 1;              /* 前面に表示 */
}

.plan-card-img {
  text-align: center; /* この要素内で中央揃え */
  margin-bottom: 15px; /* 画像下の余白 (任意) */
}

.plan-card-img img {
  display: inline-block; /* インライン要素扱いで text-align:center; が効きやすい */
  max-width: 100%;      /* 画像の上限サイズ (必要に応じて調整) */
  height: auto;          /* アスペクト比を維持 */
  margin: 0 auto;        /* 念のため horizontal center */
}

.plan-title {
  font-size: 1.4rem !important;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;

}

.plan-desc {
  font-size: 1.1rem;
  margin-bottom: 15px;
  line-height: 1.6;
    text-align: left;

}




/* ── 価格上の“限定&通常価格”ラベル ───────────────────── */
.plan-regular{
  text-align:center;
  font-size:0.7rem !important;        /* ← ここを 0.8～0.9rem に下げて調整 */
  font-weight:700;
  margin:0px 0 0 0px;        /* 行高さが詰まるので -6px くらいがバランス◎ */
}
.plan-regular .limit{
  color:#e74c3c;            /* ★ 赤字にする */
}
.plan-regular del{
  color:#999;
  margin-left:4px;
  text-decoration:line-through;
}

/* 限定＋打ち消し価格（上の行） */
.plan-card .plan-regular{
  font-size:0.8rem !important;
  font-weight:500;
  margin:0px 0 8px;   /* ← ★ここを調整：上-4px / 下2px */
}

/* メイン価格（下の行） */
.plan-card .plan-price{
  margin-top:0;        /* ← 余計な余白をゼロに */
  /* 既存の font-size や color はそのまま */
}


/* 価格表示 */
.plan-price {
  font-size:2.0rem !important;
  font-weight:700;   /* 太字 */
  color:#e74c3c;
  margin-bottom:20px;
  text-align:center; /* 中央揃え */
    }
	
.plan-price-s {
  font-size:1.3rem !important;
  font-weight:700;   /* 太字 */
  color:#e74c3c;
  margin-bottom:20px;
  text-align:center; /* 中央揃え */
    }
	
/* 税込 */
.plan-price span.font-s {
  font-size: 0.7rem !important;
  font-weight: normal;
  color: #333;
}

/* 分割払い注記（小さく・黒字） */
.plan-price .install-note{
    display:block;
    font-size:0.7rem !important; /* ←追加 */
    font-weight:normal;
    color:#333;
    line-height:1.4;
    margin-top:4px;　/* 読みやすさ用 */
}



/* ── ％OFF バッジ ─────────────────── */
.plan-price .price-off{
  display:inline-block;
  vertical-align:middle;   /* ① ベースラインではなく中央揃えへ */
  position:relative;       /* ↓微調整用 */
  top:4px;                /* ② さらに 2px 上へ持ち上げる —— 好みに合わせて ± 調整 */
  margin-right:6px;
  padding:1px 6px 0;       /* ③ 下パディングを 0 or 1px にすると余白が揃いやすい */
  font-size:.6rem;
  font-weight:500;
  color:#fff;
  background:#e74c3c;
  border-radius:4px;
}




/* ── プラン内「顧客の声」吹き出し ───────────────── */
/* ── 吹き出し本体 ───────────────── */
.plan-voice{
  display:flex;align-items:center;gap:10px;   /* ←→ と吹き出しの間隔 */
  justify-content:center;                     /* 中央寄せ */
}

.plan-balloon{
  position:relative;
  width:620px;            /* 幅を固定（お好みで）   */
  min-height:140px;       /* ★ここを増減して高さ調整 */
  padding:14px 16px 22px; /* 下は三角 + 星/プロフィール行の余裕 */
  border:1px solid #ccc;
  border-radius:8px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  text-align:left;
  display:flex;           /* 中身を縦に揃える        */
  flex-direction:column;
  justify-content:flex-start;
  margin:0 0 30px 0;

}


/* ▼ 下向き三角 */
/* ▼ 外側：枠線色で 1 px 大きい三角 */
.balloon-tail{
  position:absolute;
  left:80%;
  bottom:-10px;                 /* ← ★ -10px に変更（枠線ぶん下げる） */
  transform:translateX(-50%);
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #ccc;   /* ← 枠線と同色 (#ccc) */
  pointer-events:none;
}

/* ▼ 内側：1 px 小さい吹き出し色（三角内側） */
.balloon-tail::after{
  content:"";
  position:absolute;
  left:-9px; top:-10px;          /* ← 外側より 1 px 上へ */
  width:0;height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:9px solid #fff;    /* ← 吹き出し背景色 */
}



/* ── テキスト・星・プロフィール行 ─ */
.plan-balloon p{
  margin:0 0 10px 0 !important;    /* ← 標準マージンを完全に打ち消す */
}
.review-msg{font-size: 0.85rem !important; margin:0 0 40px 0;font-weight:400;line-height:1.4;}
.review-info{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#555;}
.user-ico{width:20px;height:20px;border-radius:50%;object-fit:cover;}
.review-title{
  font-size: 1.0rem !important;
  font-weight:700;
  margin:0px 0px 20px 0;      /* タイトル下の余白 */
  line-height:1.4;
}


/* --- 星ベースクラス --- */
.star{
  width:16px;          /* ★ここを好きな値に */
  height:16px;         /* ★ここも同じ値に   */
  background-size:contain;   /* 必ず残す */
  display:inline-block;
  margin-right:0px;    /* 星同士の隙間。大きさに合わせて調整 */
}
.star.full  {background-image:url("./img/star-full.svg");}
.star.half  {background-image:url("./img/star-half.svg");}
.star.empty {background-image:url("./img/star-empty.svg");}


/* 評価テキストを微調整 */
.rating-num{
  font-size:.85rem;             /* 星より少し小さめ */
  line-height:1;                /* 余計な上下余白を消す */
  color:#666;
    margin-left:10px;           /* ← 星グループとテキストの間隔 */
}

.voice-stars{
  display:inline-flex;          /* インライン扱いのまま横並び */
  align-items:center;           /* 垂直中央揃えでズレなし */
  gap:0px;                      /* 星⇔数値の間隔 (お好みで) */
    margin-bottom:8px;            /* 数値を変えて調整 */
}


/* ── ← → ボタン ─ */
.voice-prev,.voice-next{
  border:none;background:#f5f5f5;
  width:20px;height:20px;border-radius:50%;
  font-size:1rem;font-weight:bold;line-height:28px;
  cursor:pointer;color:#666;
  transition:background .2s,color .2s;
}

/* ─── ← → ボタンを吹き出しに重ねる ───────────── */
.plan-voice{position:relative;}

.voice-prev,
.voice-next{
  position:absolute;
  top:40%; transform:translate(-50%,-50%);  /* 枠の中央 */
  width:20px;height:20px;border-radius:50%;
  border:2px solid #ddd;
  background:#fff;
  font-size:0.8rem;font-weight:bold;
  color:#666;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  transition:background .2s,border-color .2s,color .2s;
}
.voice-prev{ left:1px; }   /* ← 枠線にちょうど重なる距離を調整 */
.voice-next{ right:-20px; }

.voice-prev:hover,
.voice-next:hover{
  background:#ffdd15;border-color:#ffdd15;color:#333;
}

@media(max-width:600px){ .plan-balloon{width:100%;} }

/* ── ボタン下テキスト ───────────────── */

.plan-s {
  font-size:0.9rem !important;
  font-weight:700;   /* 太字 */
  color:#e74c3c;
  margin-bottom:10px;
	text-align:center; /* 中央揃え */
    }

/* ── リスト ───────────────── */

.plan-features::before {
  content: "鑑定内容";
  display: block;
  font-size: 1.4rem;
	font-weight: bold;
	text-align:center;
  margin-bottom: 10px;
  color: #333;
}

/* リストにマーク(例: ✔)を付ける */
.plan-features {
  margin: 0;
  padding: 20px 30px 10px 30px !important;
  list-style: none; /* デフォルトの丸を無効化 */
}

.plan-features li {
  font-size:1.0rem;        /* 通常フォントサイズ */
  position: relative;
  line-height: 1.6;
  margin-bottom: 10px;
  padding-left: 30px; /* マーク分の余白 */
}
.plan-features li::before {
  content: "✔";       /* 任意のアイコン */
  position: absolute;
  left: 0;
  top: -3px;
  color: #4caf50;      /* アイコン色(緑系) */
  font-size: 0.9rem;     /* マークの大きさ */
  transform: translateY(2px); 
}


/* CTAボタン */
/*==================================================
  CTAボタン（申込ボタン）デザイン ＋ 動きまとめ
==================================================*/

/* ボタンを中央に寄せる親コンテナ ------------------------- */
.plan-cta{
  text-align:center;
}

/* ボタン本体（通常時） ------------------------------------ */
.plan-cta .cta-btn{
  /* 幅を100%に */
  width: 100%;
  /* パディングを含めて幅を制御する */
  box-sizing: border-box;
  /* ブロック要素にして幅100%を確実に反映 */
  display: block;
  background:#ffdd15;      /* 通常背景色 */
  color:#333;              /* 通常文字色 */
  font-size:1.1rem;        /* 通常フォントサイズ */
  font-weight:bold;
  padding:10px 40px;
  margin-bottom: 20px;
  border-radius:5px;
  position:relative;       /* ホバー文字用の基準 */
  overflow:hidden;         /* 中の要素がはみ出さないように */
  transition:
    background-color .25s ease,
    transform .25s ease;
  text-decoration:none;
}

/* ───── ボタン内テキスト２種類 ───── */

/* デフォルト表示のテキスト */
.cta-txt-default{
  display:inline-block;
  transition:opacity .25s ease, transform .25s ease;
}

.cta-txt-default .cta-note{
  display:block;        /* ※改行を維持 */
  margin-top:-3px;      /* -3〜-5px で微調整 */
  font-size:0.6em;     /* 小さくしたい指定もここで */
  font-weight:normal; 
}

/* ホバー時に現れるテキスト（最初は非表示） */
.cta-txt-hover{
  position:absolute;
  left:50%;
  top:50%;
    white-space:nowrap;   /* 行を折り返さない */
  transform:translate(-50%,-50%) scale(0.9);
  opacity:0;
  font-size:0.9rem;     /* ホバー時の文字サイズ */
  padding:4px 8px; 
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;   /* ホバー文字でクリック判定が狂わないように */
}

/* ───── ホバー時の変化 ───── */
.plan-cta .cta-btn:hover{
  background:#ffb323;     /* ホバー背景色 */
  transform: translateY(-3px) scale(1.03);   /* ほんのり浮く&拡大 */
  box-shadow:0 8px 14px rgba(0,0,0,0.20);    /* 影を深く          */
  opacity:1;                                 /* 既存の 0.8 → 1    */
}

/* デフォルト文字をフェードアウト */
.plan-cta .cta-btn:hover .cta-txt-default{
  opacity:0;
  transform:translateY(10%);
}

/* ホバー文字をフェードイン */
.plan-cta .cta-btn:hover .cta-txt-hover{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}


/* 3) “キラッ” と光る演出（右→左を走る細いグラデ帯） */
.plan-cta .cta-btn::after{
  content:"";
  position:absolute;
  top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(
              120deg,
              transparent 0%,
              rgba(255,255,255,0.6) 35%,
              rgba(255,255,255,0.0) 65%
            );
  transform:skewX(-20deg);                /* 斜め帯にする */
  transition: left .6s ease;
}
.plan-cta .cta-btn:hover::after{
  left:100%;                               /* 右へ流れる   */
}

/* 4) “鼓動” アニメ（常時ゆっくり明滅） --------------*/
@keyframes pulse{
  0%   {box-shadow:0 0 0 0 rgba(255,221,21,.6);}
  70%  {box-shadow:0 0 0 16px rgba(255,221,21,0);}
  100% {box-shadow:0 0 0 0 rgba(255,221,21,0);}
}
.plan-cta .cta-btn.pulse{
  animation:pulse 2.2s infinite;
}


/* サービス内容の枠 */
.service-included {
  position: relative;   /* 擬似要素配置のため */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 40px;
  margin: 40px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;     /* 角丸に合わせて帯を綺麗に収める */
}

/* ★上部に赤い帯を配置（高さ8px、幅100%） */
.service-included::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;           /* 帯の太さ (調整可) */
  background: #e74c3c;   /* 赤 */
  border-radius: 8px 8px 0 0; /* 上角丸 */
  z-index: 1;
}

/* タイトル */
.service-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  position: relative; /* 帯とのz-index競合を防ぐため */
  z-index: 2;
}

/* service-item */
.service-item {
  margin-bottom: 20px;
}
/* 既存ルールはそのまま。チェックマークだけ追加 */
.service-item-title{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:10px;
  color:#333;
}

/* 先頭に赤いチェックマークを付加 */
.service-item-title::before{
  content:"✔";          /* マーク */
  color:#c40000;        /* 既存アクセント赤などに合わせて変更可 */
  margin-right:0.45em;  /* タイトルとの間隔 */
}

.service-item p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* レスポンシブ(768px以下で1カラムに) */
@media (max-width: 768px) {
  .plan-grid {
    flex-direction: column; 
  }
  .plan-card {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
}




/* ====== 参加にあたっての注意事項：より目立つ配色 ====== */

/* 外枠 ─ クリーム × オレンジで温かみをプラス */
.notice-box{
  background:#FFFef9;      /* ほんのり明るいベージュ */
  border:1px solid #FFA94D;/* オレンジ寄りの枠色で“注意”を強調 */
  border-radius:8px;
    padding:30px 25px 30px 25px;

}

/* タイトルもアクセントカラーに合わせる（任意） */
.notice-box .notice-title{
  font-size:1.4rem;
  color:#CC5300;           /* 濃いめオレンジ */
    text-align: center;
	  margin-bottom:14px;


}

/* リストのカード部分（白＋淡オレンジ枠） */
.notice-box .notice-list{
  background:#FFFFFF;
  border:1px solid #FFD8A6;/* 外枠より少し淡いトーン */
  border-radius:6px;
  padding:25px 25px 25px 25px;
  margin:0;
  list-style:none;
}

/* 行頭マークを濃いオレンジで目立たせる */
.notice-box .notice-list li{
  position:relative;
  padding-left:32px;
  margin-bottom:14px;
  line-height:1.75;
  font-size:1rem;
}
.notice-box .notice-list li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  color:#FF7B00;           /* 目を引くビビッドオレンジ */
  font-weight:bold;
  font-size:1.2rem;
  line-height:1.2;
}
.notice-box .notice-list li:last-child{margin-bottom:0;}







/* ---------- 購入後フロー ---------- */

.flow-section {
  background: #fff; /* 背景色はお好みで */
  padding: 50px 20px;
}
.flow-section .container {
  max-width: 720px;
  margin: 0 auto;
}


/* 全体を縦に並べる */
.flow-list {
  margin-top: 20px;
    position: relative; /* 念のための指定 */
}

/* 個々の項目をカード風に */
.flow-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 0px 20px;
  align-items: flex-start;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 左カラム(ピクトグラム) */
.flow-picto {
  flex: 0 0 auto;      /* PC時に左カラムの幅を自動 */
  text-align: center;  /* PC時には画像を中央揃えにもできる */
}
.flow-picto img {
  width: 150px;     /* 画像の大きさ（例） */
  height: auto;
  display: block;
  margin: 0 auto;  /* 中央寄せ */
}

.flow-text h3 {
  font-size: 1.4rem;   /* 少し大きめ */
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 0.5em; /* 適度な下余白 */
  color: #333;         /* テキストカラー */
}

.flow-text {
  flex: 1;         /* 残り領域を右カラムが使う */
}

/* カード間の三角矢印 */
/* 最後の .flow-item 以外に矢印を表示 */
.flow-item:not(:last-child) {
  margin-bottom: 60px; /* 余白をやや大きくして三角のスペース確保 */
  position: relative;  /* 三角をabsolute配置するため */
}

.flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;               /* 横中央に配置 */
  bottom: -20px;          /* カードの下端より少し下へ */
  transform: translateX(-50%); /* 中心揃え */

  /* 下向き三角形 (例: 幅=20px, 高さ=20px) */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ccc; /* 矢印色をお好みに変更 */
}


/* スマホ対応 */
@media (max-width: 768px) {
  .flow-item {
    flex-direction: column;   /* 縦並び */
    align-items: flex-start;  /* 上揃え */
  }

  .flow-picto {
    width: 100%;             /* 幅を100%に */
    text-align: center;      /* 画像を親要素内で中央寄せ */
    margin-bottom: 10px;
  }
}





/* ---------- FAQ ---------- */
.faq {
  background: #fff;　/* 枠線色 */
  padding: 50px 0;
  font-size: 1.1rem;
}

.faq dl {
  margin: 0 auto;
}

.faq-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #fafafa;
}

.faq-item dt,
.faq-item dd {
  position: relative;
  padding-left: 3.0em;
  line-height: 1.8em;
  margin-bottom: 15px;
}

.faq-item dt {
   font-weight:  bold;
 }
	
.faq-item dt::before,
.faq-item dd::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  height: 1.8em;
  font-weight: bold;
  text-align: center;
  line-height: 1.8em;
  border-radius: 4px;
}

.faq-item dt::before {
  content: 'Q';
  background: #333;
  color: #fff;
  border: 1px solid #333;

}

.faq-item dd::before {
  content: 'A';
  background: #fff;
  color: #333;
  border: 1px solid #333;
}

.faq-item dd {
  margin-bottom: 0; /* 最後の回答の余白調整 */
}





/* ---------- POSTSCRIPT (追伸1〜3) ---------- */
.postscript {
  background: #f9f9f9;　/* 枠線色 */
  padding: 0px 0px;
}
.postscript-box {
  margin-bottom: 60px;
}
.postscript-box h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
  font-weight: bold;
}
.postscript-box p {
  line-height: 1.6;
}



/* ---------- AI活用、未活用 ---------- */

.comparison-section {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 40px 0;
}


.comparison-title {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

.comparison-content {
  text-align: center;
}

.comparison-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* 各枠のデフォルト */
.comparison-box {
  flex: 1;
  min-width: 280px;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  background-color: #fff;
}

/* タイトル部分 */
.comparison-title {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  color: #333;
}

/* コンテンツ部分 */
.comparison-content {
  /* タイトルと画像は中央寄せ */
  text-align: center;
  margin-bottom: 20px;
}
.comparison-content img {
  display: block;
  margin: 0 auto; 
  display: block; 
  width: 80%;
  height: auto;
}
.comparison-content p {
  text-align: left;
  margin: 0 auto;   /* 必要ならブロック幅を指定しつつセンターに配置 */
  max-width: 90%;  /* 読みやすい幅を指定するなど */
}

/* AIを導入するボックス: わずかに背景をグレー寄りに */
.ai-use {
  background: linear-gradient(
    to bottom, 
    #fafafa 0%, 
    #fff 100%
  );
}

/* AIを導入しないボックス: 背景は完全な白でもOK */
.ai-no-use {
  background-color: #fff;
}


/* ---------- FOOTER ---------- */
    footer {
      background: #111;
      color: #ccc;
      text-align: center;
      padding: 10px 0;
      font-size: 0.9rem;
	  margin-top: -80px;
    }
    footer p {
      margin-bottom: 5px;
      opacity: 0.8;
    }
    footer a {
      color: #ccc;
      text-decoration: underline;
      font-size: 0.9rem;
    }
    footer a:hover {
      opacity: 0.7;
    }

/* ─── メディアクラス ───────────── */
.pc-only{display:block;}
.sp-only{display:none;}
@media(max-width:768px){
  .pc-only{display:none;}
  .sp-only{display:block;}
}




/* ─────────────────────────────────────────────
   ページ内ナビ（.float-menu）フルセット
──────────────────────────────────────────── */
.float-menu{
  position:fixed;
  top:40px;                 /* 上からの距離 */
  right:20px;               /* 右からの距離 */
  z-index:999;

  width:200px;
  background:rgba(255,255,255,.40); /* 半透明ホワイト */
  backdrop-filter:blur(6px);        /* 背景ぼかし */
  border:1px solid rgba(0,0,0,.07);
  border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  padding:14px 12px;

  opacity:0;               /* 最初は非表示（フェード用） */
  visibility:hidden;
  transform:translateY(20px);
  transition:opacity .4s ease, transform .4s ease;
}

/* スクロール後に付くクラス（JS 側で .show を付与） */
.float-menu.show{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* ───────── レイアウト ───────── */
.float-menu ul{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
}

.float-menu ul::before{
  content:"";
  position:absolute;
  left:3px;                      /* 丸の中央に合わせる */
  top:11px;                      /* 11px = 丸の中心 (8+3) */
  height:calc(100% - 22px);      /* 上下 11px ずつ差し引く */
  width:1px;
  background:#d0d0d0;
}

.float-menu li+li{margin-top:10px;}

/* ── CTA ボタン（リスト外） ───────────────── */
.float-menu .cta-link{
  display:block;
  margin:12px 0 0; 
  padding:10px 14px;
  font-weight:bold;
  font-size:.9rem;
  text-align:center;
  background:#ffdd15;      /* 通常背景色 */
  color:#333; 
  border-radius:4px;
  transition:background .15s;
}
.float-menu .cta-link:hover{background:#ffb000;}


/* ───────── リンク共通 ───────── */
.float-menu a{
  position:relative;
  display:block;
  font-size:.85rem;
  line-height:1.4;
  color:#333;
  padding-left:22px;        /* 赤丸ぶんインデント */
  text-decoration:none;
  border-radius:4px;
  transition:background .15s;
}
.float-menu .cta-link:visited,
.float-menu .cta-link:active,
.float-menu .cta-link.active{   /* JS で .active が付いた場合も保護 */
  color:#333 !important;        /* ← 好きな色に */
}
.float-menu a:hover{
  background:rgba(0,0,0,.05);
}

/* 赤丸マーカー */

.float-menu a:not(.cta-link)::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e80000;
}


/* ───────── CTA（申込）リンク ───────── */
.float-menu a.primary{
  font-weight:bold;
  color:#fff;
  background:#ffbf00;
  padding:8px 10px;
  text-align:center;
}
.float-menu a.primary::before{display:none;}
.float-menu a.primary:hover{background:#ffb000;}

/* ───────── 現在位置ハイライト ─────────
   ※ JS 側で該当リンクに .active を付与してください
──────────────────────────────── */
.float-menu a.active{
  font-weight:bold;
  color:#e80000;
}
.float-menu a.active::before{
  background:#ffbf00;       /* 黄色に変更（自由に） */
  transform:scale(1.4);     /* 少し大きく */
}




/* ─── ハンバーガーアイコン ───────────────── */
.hamburger{
  position:fixed;
  top:10px;                  /* 画面右上に固定 */
  right:16px;
  width:26px; height:20px;
  padding:0; border:none;
  background:transparent;
  cursor:pointer;
  z-index:1001;              /* モバイルメニューより前面 */
}
.hamburger span{
  display:block;
  width:100%; height:4px;
  background:#333;           /* 線の色 */
  margin:5px 0;
  border-radius:2px;
  transition:.3s;
}

/* 開いたときに「×」に変形 */
.hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

.mobile-menu{
  flex-direction: column;   /* ← 追加 */
  gap: 32px;                /* メニューと CTA の間隔（お好みで） */
  position:fixed;
  inset:0;                 /* top/right/bottom/left:0 */
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0; visibility:hidden;
  transition:.3s;
}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu ul{list-style:none;margin:0;padding:0;text-align:center;}
.mobile-menu li+li{margin-top:24px;}
.mobile-menu a{
  font-size:1.2rem;
  color:#333;
  text-decoration:none;
}
.mobile-menu a.primary{font-weight:bold;color:#e74c3c;}



/* ── CTA ボタン（モバイルメニュー内） ───────────────── */
.mobile-menu .cta-link{
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: bold;
  background: #ffdd15;   /* 通常時の黄色 */
  color: #333;
  border-radius: 6px;
  transition: background .15s;
}
.mobile-menu .cta-link:hover{
  background: #ffb000;   /* ホバー時の濃い黄色 */
}

.mobile-menu a:not(.cta-link){
  font-size: 1.2rem;
  color: #333;
  text-decoration: none;
}



/* ── スマホ専用スティッキー CTA ───────────────────── */
@media (max-width: 768px){
  body{ padding-bottom: 48px; }   /* ← CTA 60px + 余裕 20px など */
}


@media (max-width: 768px){
  .sticky-cta{
    position: fixed;
    left: 0; bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	display: flex;                    /* 左=価格 / 中=メッセ / 右=ボタン */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #ffbf00;
    color: #fff; font-weight: bold;
    text-decoration: none;
    transform: translateY(100%);      /* 初期は画面外 */
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
  }
  .sticky-cta.show{
    transform: none;
    opacity: 1;
  }

  .sticky-cta .cta-price{
    font-size: .9rem;
    white-space: nowrap;
	 line-height: 1.2;
  }
  .sticky-cta .cta-price small{
      white-space: nowrap;
font-size: .8rem;}

  .sticky-cta .cta-msg{
    flex: 1; font-size: .8rem; line-height: 1.2;
  }

  .sticky-cta .cta-btn{
    background:#e80000; border-radius:4px;
    padding:6px 15px; font-size:.9rem;
    white-space: nowrap;
  }
  .sticky-cta:active{opacity:.85;}   /* タップフィードバック */
}