/* ============================================================
   クロミルリサーチ LP - First View
   ============================================================ */

:root{
  --navy:        #0f284b;   /* 見出しの濃紺 */
  --navy-pill:   #0c2470;   /* ピル / ボタンの紺 */
  --navy-deep:   #00113d;   /* チェック円の濃紺 */
  --red:         #b3201f;   /* 強調赤（浮気調査など） */
  --red-banner1: #9b1d14;   /* 警告バナー（明） */
  --red-banner2: #74140d;   /* 警告バナー（暗） */
  --gold-1:      #b8893a;
  --gold-2:      #e9d090;
  --gold-3:      #c9a24b;
  --yellow:      #ffe600;   /* マーカー */
  --ink:         #16182c;   /* 見出しの黒（やや紺） */
  --red2:        #bb2722;   /* セクション2の赤 */
  --yellow2:     #f6e84a;   /* セクション2マーカー */
  --navy2:       #0b1d48;   /* ステップ見出しの紺 */
  --circle-red:  #a8201a;   /* 番号サークルの赤 */
  --gold-text:   #c8ac6e;   /* 3STEP の金 */
  --card-bg:     #ffffff;   /* カード地色（白） */
  --cream-bg:    #f1efe5;   /* セクション3の地色（クリーム） */
  --serif-ink:   #1e1a1a;   /* セクション3の文字（黒） */
  --red-uline:   #b21f1b;   /* 赤の下線 */
  --gold-deep:   #b8913c;   /* 金文字（濃） */
  --gold-lite:   #dcbb63;   /* 金文字（明） */
  --cream:       #fdf8f1;
  --peach-top:   #fdfaf4;
  --peach-bot:   #f8efe1;
  --maxw: 500px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background:#000;                 /* スクショ同様、外側は黒地 */
  color:var(--navy);
  line-height:1.4;
}

.lp{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  position:relative;
  background:linear-gradient(180deg, var(--peach-top) 0%, var(--peach-bot) 100%);
  overflow:hidden;
}

img{ display:block; max-width:100%; height:auto; }

/* ============================================================
   Header
   ============================================================ */
.lp-header{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  padding:14px 20px;
}
.lp-header__logo{ width:clamp(40px,9vw,46px); height:auto; }
.lp-header__brand{
  font-weight:700;
  font-size:clamp(20px,5.6vw,28px);
  letter-spacing:.04em;
  color:var(--navy);
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  background-color:var(--peach-top);
  isolation:isolate;
}
.hero__bg{
  position:absolute;
  inset:0;
  background:url("assets/bg_firstview_clean_gold.png") top center / 100% auto no-repeat;
  z-index:0;
}
.hero__bg::after{                  /* 画像下端から下地へなじませる */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:34%;
  background:linear-gradient(180deg, rgba(251,242,230,0) 0%, var(--peach-top) 78%);
}

.hero__person{
  position:absolute;
  right:0;
  top:clamp(22px,6.4vw,36px);
  width:38%;
  max-width:193px;
  z-index:1;
  pointer-events:none;
}

.hero__inner{
  position:relative;
  z-index:2;
  padding:22px 20px 0;
}

/* --- ピル --- */
.hero__pill{
  display:inline-block;
  background:linear-gradient(180deg,#16307f 0%, var(--navy-pill) 100%);
  color:#fff;
  font-weight:700;
  font-size:clamp(15px,4.2vw,21px);
  letter-spacing:.02em;
  padding:9px 20px;
  border-radius:999px;
  box-shadow:0 3px 7px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

/* --- 見出し --- */
.hero__headline{
  margin-top:14px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.hero__headline .line{ display:block; }
.line--1{ font-size:clamp(23px,6.8vw,34px); line-height:1.15; }
.line--2{
  display:flex;
  align-items:baseline;
  line-height:1.05;
  margin:2px 0 4px;
}
.line--3{ font-size:clamp(25px,7.6vw,38px); line-height:1.15; }

.mark-red{ color:var(--red); font-style:normal; }

.line--2 .mark-red{
  font-size:clamp(37px,11.2vw,56px);
  letter-spacing:.02em;
}
.line--2 .suffix{
  font-size:clamp(18px,5.2vw,26px);
  color:var(--navy);
  margin-left:2px;
}

/* マーカー（黄色のアンダーライン） */
.marker{
  position:relative;
  background:linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%);
  padding:0 .04em;
}

/* --- 警告バナー --- */
.alert{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  margin:14px 0 0;
  padding:11px 16px;
  background:linear-gradient(90deg, var(--red-banner2) 0%, var(--red-banner1) 45%, var(--red-banner1) 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}
.alert__icon{ width:clamp(22px,5.4vw,28px); height:auto; flex:none; }
.alert__text{
  color:#fff;
  font-weight:700;
  font-size:clamp(14px,4vw,20px);
  letter-spacing:.005em;
}

/* --- バッジ３点 --- */
.badges{
  position:relative;
  z-index:2;
  list-style:none;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(8px,2.6vw,16px);
  padding:26px 14px 0;
}
.badges__item{
  flex:1 1 0;
  min-width:0;
  max-width:152px;
}
.badges__item img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
}

/* ============================================================
   Points (gold frame)
   ============================================================ */
.points{
  position:relative;
  z-index:2;
  padding:34px 18px 0;
}
.points__frame{
  background:url("assets/frame_gold_border.png") center / 100% 100% no-repeat;
  padding:26px 22px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.point{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.point__icon{ width:clamp(34px,8.6vw,44px); height:auto; flex:none; margin-top:2px; }
.point__text{
  font-weight:700;
  color:var(--navy);
  font-size:clamp(15px,4.4vw,22px);
  line-height:1.42;
}
.point__text .mark-red{ font-weight:700; }

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative;
  z-index:2;
  padding:26px 18px 30px;
}
.cta__btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-decoration:none;
  background:url("assets/button_base_navy_gold.png") center / 100% 100% no-repeat;
  aspect-ratio:666 / 126;
  width:100%;
  padding:0 20px;
  border-radius:60px;
  transition:transform .15s ease, filter .15s ease;
  animation:cta-pulse 2.4s ease-in-out infinite;
}
.cta__icon{
  width:clamp(38px,9.6vw,50px);
  height:auto;
  flex:none;
}
.cta__label{
  color:#fff;
  font-weight:700;
  font-size:clamp(18px,5.4vw,27px);
  letter-spacing:.06em;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cta__label--gold{
  background:linear-gradient(180deg,#f7e6ad 0%,#eccb72 48%,#cda44c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.cta__arrow{
  color:#fff;
  font-size:clamp(22px,6vw,30px);
  font-weight:400;
  margin-left:2px;
}
.cta__btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.cta__btn:active{ transform:translateY(1px); }

@keyframes cta-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.025); }
}

/* ============================================================
   Section 2 : 3 STEP
   ============================================================ */
.steps{
  position:relative;
  z-index:2;
  background:#f6f9fd url("assets/bg_step_section_polygon.png") center top / 100% 100% no-repeat;
  padding:30px 20px 42px;
}

/* --- 見出し --- */
.steps__heading{
  font-family:"Noto Serif JP", serif;
  text-align:center;
  color:var(--ink);
  font-weight:500;
  line-height:1.42;
  padding-top:4px;
}
.steps__line{
  display:block;
  font-size:clamp(22px,6.7vw,33px);
}
.hl-red{ color:var(--red2); font-weight:700; }
.marker2{
  background:linear-gradient(transparent 24%, var(--yellow2) 24%, var(--yellow2) 90%, transparent 90%);
  padding:0 .03em;
}

/* --- ピル --- */
.steps__pill{
  display:block;
  width:fit-content;
  max-width:94%;
  margin:22px auto 0;
  text-align:center;
  font-family:"Noto Sans JP", sans-serif;
  background:linear-gradient(180deg,#173255 0%,#0e244c 100%);
  color:#fff;
  font-weight:500;
  font-size:clamp(15px,4.2vw,21px);
  letter-spacing:.01em;
  padding:13px 26px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(20,40,70,.18);
}
.steps__pill-num{
  color:var(--gold-text);
  font-weight:700;
  margin-left:.12em;
  letter-spacing:.02em;
}

/* --- ステップカード --- */
.steps__list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.step{
  display:flex;
  align-items:center;
  gap:clamp(10px,3.2vw,18px);
  padding:18px 20px;
  border:1px solid transparent;
  border-radius:15px;
  background:
    linear-gradient(var(--card-bg),var(--card-bg)) padding-box,
    linear-gradient(135deg,#e9d59a,#c8a24c 45%,#e4cf8c 70%,#c39a44) border-box;
  box-shadow:0 4px 10px rgba(40,60,90,.10);
}
.step__num{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(56px,15.5vw,76px);
  height:clamp(56px,15.5vw,76px);
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #c5332b 0%, var(--circle-red) 68%);
  color:#fff;
  font-family:"Noto Serif JP", serif;
  font-weight:500;
  font-size:clamp(30px,8.8vw,46px);
  line-height:1;
  box-shadow:0 3px 6px rgba(120,20,15,.32);
}
.step__body{ font-family:"Noto Serif JP", serif; min-width:0; }
.step__title{
  color:var(--navy2);
  font-weight:700;
  font-size:clamp(19px,5.7vw,29px);
  line-height:1.18;
  white-space:nowrap;
}
.step__desc{
  margin-top:6px;
  color:#2c3350;
  font-weight:400;
  font-size:clamp(12px,3.4vw,17px);
  line-height:1.45;
}
.step__text{
  font-weight:500;
  font-size:clamp(15px,4.35vw,22px);
  line-height:1.42;
}
.step__text .navy{ color:var(--navy2); }
.step__text .hl-red{ color:var(--red2); font-weight:700; }
.en{ font-family:"Noto Sans JP", sans-serif; }

/* Step 1 : 端末モック入りカード画像を使用 */
.step--line{
  position:relative;
  border:0;
  border-radius:15px;
  background:url("assets/icon_kuromiru_official_logo.png") center / 100% 100% no-repeat;
  box-shadow:0 4px 10px rgba(40,60,90,.10);
  aspect-ratio:727 / 178;
  align-items:center;
  padding:0 26% 0 clamp(10px,3.2vw,16px);
}
.step--line .step__body{ flex:1 1 auto; }

/* ============================================================
   Section 3 : お悩み
   ============================================================ */
.worry{
  position:relative;
  z-index:2;
  background:var(--cream-bg);
  padding:30px 20px 0;
  font-family:"Noto Serif JP", serif;
}

/* 共通：金グラデ文字 */
.gold{
  background:linear-gradient(180deg, var(--gold-lite) 0%, var(--gold-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* --- 見出し --- */
.worry__heading{
  text-align:center;
  color:var(--serif-ink);
  font-weight:700;
  font-size:clamp(17px,5.1vw,25px);
  white-space:nowrap;
  letter-spacing:.01em;
}
.uline-red{
  background:linear-gradient(var(--red-uline),var(--red-uline)) left bottom / 100% 2px no-repeat;
  padding-bottom:.05em;
}

/* --- カード --- */
.worry__card{
  margin-top:18px;
  padding:22px 22px 22px;
  border:1px solid transparent;
  border-radius:18px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#e9d59a,#c8a24c 45%,#e4cf8c 70%,#c39a44) border-box;
  box-shadow:0 5px 14px rgba(70,60,40,.10);
}
.worry__divider{ padding:6px 6px 18px; }
.worry__divider img{
  display:block;
  width:82%;
  max-width:340px;
  height:auto;
  margin:0 auto;
}

.worry__list{
  list-style:none;
  margin:0;
  padding:0 4px;
  display:flex;
  flex-direction:column;
  gap:clamp(16px,4.2vw,22px);
}
.worry__item{
  display:flex;
  align-items:flex-start;
  gap:clamp(12px,3.4vw,18px);
}
.worry__check{
  flex:none;
  width:clamp(28px,7.4vw,38px);
  height:auto;
  margin-top:.18em;
}
.worry__text{
  color:var(--serif-ink);
  font-weight:500;
  font-size:clamp(16px,4.6vw,23px);
  line-height:1.5;
}

.worry__photo{
  display:block;
  width:100%;
  margin-top:20px;
  border-radius:12px;
  aspect-ratio:719 / 520;
  object-fit:cover;
  object-position:center bottom;
}

/* --- リード文 --- */
.worry__lead{
  text-align:center;
  color:var(--serif-ink);
  margin:24px 0 26px;
  line-height:1.4;
}
.worry__lead-1{
  display:block;
  font-weight:500;
  font-size:clamp(19px,5.4vw,26px);
}
.worry__lead-2{
  display:block;
  font-weight:500;
  font-size:clamp(17px,4.9vw,24px);
}

/* --- 紺バナー（全幅） --- */
.worry__banner{
  margin:0 -20px;
  background:linear-gradient(180deg,#14315a 0%,#0e224a 100%);
  padding:20px 18px;
  text-align:center;
}
.worry__banner p{
  color:#fff;
  font-weight:500;
  font-size:clamp(15px,4.4vw,22px);
  line-height:1.45;
}

/* ============================================================
   Section 4 : サポート内容
   ============================================================ */
.support{
  position:relative;
  z-index:2;
  background:var(--cream-bg);
  padding:26px 0 0;
  font-family:"Noto Serif JP", serif;
}

/* --- カード（チェック3点） --- */
.support__card{
  margin:0 20px;
  padding:20px 22px 24px;
  border:1px solid transparent;
  border-radius:16px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#e9d59a,#c8a24c 45%,#e4cf8c 70%,#c39a44) border-box;
  box-shadow:0 5px 14px rgba(70,60,40,.10);
}
.support__divider{ padding:2px 6px 16px; }
.support__divider img{ display:block; width:78%; max-width:320px; height:auto; margin:0 auto; }

.support__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(14px,3.8vw,20px);
}
.support__item{ display:flex; align-items:center; gap:clamp(10px,3vw,15px); }
.support__check{ flex:none; width:clamp(26px,6.8vw,34px); height:auto; }
.support__text{
  color:#16315e;
  font-weight:400;
  font-size:clamp(15px,4.4vw,22px);
  line-height:1.3;
  white-space:nowrap;
}
.support__text .em{ color:#0e2247; font-weight:700; }

/* --- 特徴3ボックス --- */
.support__features{
  list-style:none;
  margin:16px 20px 0;
  padding:0;
  display:flex;
  gap:clamp(8px,2.4vw,12px);
}
.feature{
  flex:1 1 0;
  min-width:0;
  background:#fff;
  border:1.5px solid #0e2247;
  border-radius:9px;
  padding:14px 6px 12px;
  text-align:center;
}
.feature__icon{
  width:clamp(46px,13vw,64px);
  height:auto;
  margin:0 auto 8px;
  display:block;
}
.feature__title{
  color:#0e2247;
  font-weight:700;
  font-size:clamp(14px,3.9vw,19px);
  line-height:1.2;
  letter-spacing:.01em;
}
.feature__sub{
  margin-top:3px;
  color:#16315e;
  font-weight:400;
  font-size:clamp(8px,2.25vw,10.5px);
  letter-spacing:-.01em;
  line-height:1.25;
  white-space:nowrap;
}

/* --- 相談員写真＋オーバーレイ --- */
.support__visual{
  position:relative;
  margin:22px 0 0;
  width:100%;
}
.support__photo{
  display:block;
  width:100%;
  aspect-ratio:750 / 430;
  object-fit:cover;
  object-position:center 60%;
}
.support__overlay{
  position:absolute;
  left:7%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  line-height:1.34;
  font-weight:500;
  font-size:clamp(19px,5.6vw,28px);
  text-shadow:0 1px 6px rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.7);
}
.support__overlay .ov-1,
.support__overlay .ov-2,
.support__overlay .ov-3{
  display:block;
  white-space:nowrap;
  color:#0e2247;
}
.support__overlay .em{ color:#0e2247; font-weight:700; }
.support__overlay .gold{
  font-weight:700;
  background:linear-gradient(180deg,#c2922f 0%,#9a6c18 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 1px 2px rgba(60,44,10,.5);
}

/* --- 締めテキスト（白地） --- */
.support__closing{
  background:#fff;
  text-align:center;
  padding:30px 20px 36px;
  line-height:1.42;
}
.cl-1, .cl-2{
  display:block;
  color:#0e2247;
  font-weight:700;
  font-size:clamp(21px,6vw,30px);
}
.cl-red{ color:#a8201a; }

/* ============================================================
   Section 5 : 口コミ＆比較
   ============================================================ */
.proof{
  position:relative;
  z-index:2;
  background:#f6f1e8;
  padding:26px 20px 36px;
  font-family:"Noto Serif JP", serif;
}

/* --- 口コミカード --- */
.review{
  border:1.5px solid #c6a64f;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 10px rgba(60,50,30,.10);
  margin-bottom:22px;
}
.review__head{
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  background:linear-gradient(180deg,#102a52,#0c1d40);
  padding:14px 16px 16px;
}
.review__avatar{
  flex:none;
  width:clamp(54px,14vw,68px);
  height:clamp(54px,14vw,68px);
  border-radius:50%;
  object-fit:cover;
  border:2px solid #c6a64f;
}
.review__titlewrap{ flex:1 1 auto; min-width:0; }
.review__title{
  font-weight:500;
  line-height:1.34;
  font-size:clamp(15px,4.4vw,21px);
  color:#fff;
}
.rv-gold{
  background:linear-gradient(180deg,#ecdcae 0%,#cbae6e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.review__who{
  position:absolute;
  right:14px;
  bottom:8px;
  color:#fff;
  font-size:clamp(10px,2.8vw,13px);
  font-weight:400;
}
.review__body{
  color:#1c1616;
  font-weight:400;
  font-size:clamp(13px,3.6vw,16px);
  line-height:1.7;
  padding:16px 18px 18px;
}

/* --- 見出し（失敗しないために） --- */
.compare__heading{
  text-align:center;
  color:#0e2247;
  font-weight:700;
  line-height:1.2;
  margin-top:8px;
}
.compare__heading .ch-1{ display:block; font-size:clamp(28px,8vw,40px); }
.compare__heading .ch-1 .ch-small{ font-size:.66em; }
.compare__heading .ch-2{ display:block; font-size:clamp(28px,8vw,40px); margin-top:2px; }
.ch-red{
  color:var(--red2);
  font-size:1.18em;
}
.compare__sub{
  text-align:center;
  color:#0e2247;
  font-weight:500;
  font-size:clamp(15px,4.4vw,21px);
  margin:14px 0 18px;
}
.cmp-red{ color:var(--red2); font-weight:700; }

/* --- 比較ボックス共通 --- */
.cmp-box{ position:relative; }
.cmp-box__head{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 20px 7px 9px;
  border-radius:9px;
  color:#fff;
  font-weight:700;
  font-size:clamp(15px,4.4vw,21px);
  margin-bottom:14px;
  font-family:"Noto Sans JP", sans-serif;
}
.cmp-box__head--navy{ background:linear-gradient(180deg,#13305c,#0c1d40); }
.cmp-box__head--red{ background:linear-gradient(180deg,#b6291f,#971a12); }
.cmp-box__no{
  flex:none;
  width:1.5em; height:1.5em;
  border-radius:50%;
  background:#fff;
  color:#0c1d40;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.82em;
}
.cmp-box__head--red .cmp-box__no{ color:#971a12; }

/* 個人で探す場合 */
.cmp-box--solo{
  background:#f6f6fb;
  border:1px solid #dcdce6;
  border-radius:13px;
  padding:14px 16px 16px;
}
.cmp-list{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
.cmp-list li{
  display:flex;
  align-items:center;
  gap:13px;
  color:#16213f;
  font-weight:500;
  font-size:clamp(14px,4vw,19px);
  padding:7px 0;
}
.cmp-num{
  flex:none;
  width:clamp(24px,6.4vw,30px); height:clamp(24px,6.4vw,30px);
  border-radius:50%;
  background:#0e2247;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700; font-size:clamp(13px,3.5vw,16px);
}

/* クロミルと探す場合 */
.cmp-box--ours{
  margin-top:0;
  background:#fff;
  border:1.5px solid #c0302a;
  border-radius:13px;
  padding:14px 16px 16px;
}
.cmp-check{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
.cmp-check li{
  display:flex;
  align-items:center;
  gap:11px;
  color:#16213f;
  font-weight:500;
  font-size:clamp(15px,4.4vw,21px);
  padding:8px 0;
}
.cmp-check img{ flex:none; width:clamp(20px,5.2vw,26px); height:auto; }

/* イラスト */
.cmp-illust{ position:absolute; pointer-events:none; }
.cmp-illust--worried{ right:8px; bottom:10px; width:clamp(84px,23vw,118px); z-index:0; }
.cmp-illust--relieved{ right:6px; bottom:8px; width:clamp(84px,23vw,118px); z-index:0; }

/* 矢印 */
.cmp-arrow{
  width:0; height:0; margin:8px auto 14px;
  border-left:26px solid transparent;
  border-right:26px solid transparent;
  border-top:18px solid #0d2149;
}

/* --- 締め --- */
.compare__closing{
  text-align:center;
  color:#0e2247;
  font-weight:700;
  line-height:1.45;
  margin-top:22px;
}
.compare__closing .cc-1{ display:block; font-size:clamp(15px,4.4vw,21px); }
.compare__closing .cc-2{ display:block; font-size:clamp(19px,5.4vw,27px); margin-top:2px; }
.cc-red{ color:var(--red2); }

/* ============================================================
   Section 6 : サービスの流れ
   ============================================================ */
.flow{
  position:relative;
  z-index:2;
  background:#eaf0f7 url("assets/wave.png") center top / cover no-repeat;
  padding:34px 20px 48px;
  font-family:"Noto Serif JP", serif;
}

/* --- 見出し（紺の箱） --- */
.flow__heading{
  display:block;
  width:fit-content;
  margin:0 auto 30px;
  background:linear-gradient(180deg,#16315c 0%, #0c1d40 100%);
  color:#fff;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:700;
  font-size:clamp(22px,6.4vw,32px);
  letter-spacing:.10em;
  padding:13px 34px;
  border-radius:8px;
  text-align:center;
  box-shadow:0 4px 10px rgba(12,29,64,.22), inset 0 0 0 1px rgba(255,255,255,.16);
}

/* --- ステップ一覧 --- */
.flow__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(28px,7vw,38px);
}

/* --- ステップカード --- */
.flow-step{
  position:relative;
  display:grid;
  grid-template-columns:clamp(44px,12vw,56px) 1fr;
  grid-template-areas:
    "num   title"
    "icon  desc";
  column-gap:clamp(12px,3.4vw,18px);
  row-gap:clamp(8px,2.2vw,12px);
  align-items:start;
  padding:clamp(18px,5vw,24px) clamp(18px,5vw,24px);
  background:#fff;
  border:1px solid #e7dcc4;
  border-radius:16px;
  box-shadow:0 5px 14px rgba(70,60,40,.10);
}

/* カード間の紺い下向き三角 */
.flow-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(-1 * clamp(28px,7vw,38px) / 2 - 7px);
  transform:translateX(-50%);
  width:0; height:0;
  border-left:17px solid transparent;
  border-right:17px solid transparent;
  border-top:15px solid #0e2247;
}

/* 番号サークル */
.flow-step__num{
  grid-area:num;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(40px,11vw,52px);
  height:clamp(40px,11vw,52px);
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%, #c5332b 0%, var(--circle-red) 68%);
  color:#fff;
  font-family:"Noto Serif JP", serif;
  font-weight:500;
  font-size:clamp(17px,4.8vw,23px);
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 3px 6px rgba(120,20,15,.30);
}

/* タイトル */
.flow-step__title{
  grid-area:title;
  align-self:center;
  color:#14223f;
  font-weight:700;
  font-size:clamp(20px,5.6vw,28px);
  line-height:1.2;
  letter-spacing:.02em;
}

/* アイコン */
.flow-step__icon{
  grid-area:icon;
  align-self:center;
  justify-self:center;
  width:clamp(48px,12.6vw,62px);
  height:auto;
}

/* 本文 */
.flow-step__desc{
  grid-area:desc;
  color:#2a2320;
  font-weight:400;
  font-size:clamp(13px,3.7vw,17px);
  line-height:1.66;
}
.flow-red{ color:var(--red2); font-weight:500; }

/* ============================================================
   Section 7 : 選ばれる理由
   ============================================================ */
.reasons{
  position:relative;
  z-index:2;
  background:#ffffff;
  padding:36px 20px 40px;
  font-family:"Noto Serif JP", serif;
}

/* --- 見出し --- */
.reasons__heading{
  text-align:center;
  font-weight:700;
  line-height:1.28;
  letter-spacing:.05em;
  margin-bottom:26px;
}
.reasons__heading .rs-line1{
  display:block;
  color:var(--navy);
  font-size:clamp(25px,7.4vw,37px);
}
.reasons__heading .rs-line2{
  display:block;
  color:var(--navy);
  font-size:clamp(28px,8.4vw,42px);
  margin-top:4px;
}
.reasons__heading .rs-red{ color:var(--red); }

/* --- リスト --- */
.reasons__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(20px,5vw,26px);
}

/* --- カード --- */
.reason{
  position:relative;
  overflow:hidden;
  background:#f6f4ee;
  border-radius:14px;
  padding:24px 22px 26px;
  min-height:clamp(238px,64vw,320px);
  box-shadow:0 4px 10px rgba(60,50,30,.07);
}

/* 円形写真（透過PNG・右端でクリップ） */
.reason__photo{
  position:absolute;
  z-index:0;
  top:50%;
  right:clamp(-18px,-3.4vw,-8px);
  transform:translateY(-50%);
  width:clamp(144px,40vw,196px);
  height:auto;
  pointer-events:none;
}

/* 見出し行（番号＋タイトル） */
.reason__head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:clamp(12px,3.4vw,16px);
  padding-right:clamp(112px,33vw,168px);
}
.reason__num{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(50px,13vw,62px);
  height:clamp(56px,14.5vw,70px);
  background:var(--navy);
  color:#fff;
  font-family:"Noto Serif JP", serif;
  font-weight:500;
  font-size:clamp(25px,6.8vw,33px);
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 2px 5px rgba(15,40,75,.25);
}
.reason__title{
  color:var(--navy);
  font-weight:700;
  font-size:clamp(21px,6.1vw,31px);
  line-height:1.24;
  letter-spacing:.01em;
  word-break:keep-all;
}
.reason__title .rs-red{ color:var(--red); }

/* 本文 */
.reason__desc{
  position:relative;
  z-index:1;
  margin-top:clamp(18px,5vw,26px);
  color:#1e1a1a;
  font-weight:400;
  font-size:clamp(15px,4.4vw,20px);
  line-height:1.85;
}

/* ============================================================
   Section 8 : 最終CTA ＆ 会社概要
   ============================================================ */
.final{ position:relative; z-index:2; }

/* --- 最終CTA（金ウェーブ背景） --- */
.final__cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#fdfaf3 url("assets/bg_final_cta_gold_wave.png") top center / 100% 100% no-repeat;
  padding:26px 18px 46px;
  font-family:"Noto Serif JP", serif;
}

/* 紺ピル */
.final__pill{
  position:relative;
  z-index:2;
  display:inline-block;
  background:linear-gradient(180deg,#15326a 0%, #0c1d44 100%);
  color:#fff;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:500;
  font-size:clamp(13px,3.7vw,17px);
  line-height:1.5;
  letter-spacing:.02em;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 4px 10px rgba(12,29,68,.25);
}

/* 相談員の写真 */
.final__person{
  position:absolute;
  z-index:1;
  top:2px;
  right:clamp(-8px,-1.8vw,0px);
  width:clamp(138px,35.5vw,188px);
  height:auto;
  pointer-events:none;
}

/* 見出し */
.final__headline{
  position:relative;
  z-index:2;
  margin-top:18px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:.02em;
}
.final__headline .fh-1,
.final__headline .fh-2{ display:block; line-height:1.22; }
.final__headline .fh-1{ font-size:clamp(30px,8.6vw,44px); }
.final__headline .fh-2{ font-size:clamp(30px,8.6vw,44px); margin-top:2px; }
.final__headline .fh-red{
  color:var(--red);
  font-size:1.18em;
  letter-spacing:.01em;
}

.final__sub{
  position:relative;
  z-index:2;
  margin-top:10px;
  color:var(--navy);
  font-weight:400;
  font-size:clamp(14px,4vw,18px);
  letter-spacing:.01em;
}

/* 特徴3ボックス */
.final__features{
  position:relative;
  z-index:2;
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  gap:clamp(8px,2.4vw,12px);
}
.ffeat{
  flex:1 1 0;
  min-width:0;
  background:#fff;
  border-radius:12px;
  padding:16px 5px 14px;
  text-align:center;
  box-shadow:0 4px 11px rgba(20,30,60,.13);
}
.ffeat__icon{
  width:clamp(48px,13vw,66px);
  height:auto;
  margin:0 auto 8px;
  display:block;
}
.ffeat__title{
  color:var(--navy);
  font-weight:700;
  font-size:clamp(15px,4.2vw,20px);
  line-height:1.2;
  letter-spacing:.02em;
}
.ffeat__sub{
  margin-top:4px;
  color:#16315e;
  font-family:"Noto Sans JP", sans-serif;
  font-weight:400;
  font-size:clamp(8.5px,2.35vw,11px);
  line-height:1.25;
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* CTAボタン */
.final__btn{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,2.6vw,14px);
  text-decoration:none;
  width:100%;
  margin-top:26px;
  padding:16px 20px;
  border-radius:999px;
  border:2.5px solid transparent;
  background:
    linear-gradient(180deg,#1c3c78 0%,#0c2150 58%,#0a1c46 100%) padding-box,
    linear-gradient(180deg,#f3dca0 0%,#c59a45 60%,#e7c878 100%) border-box;
  box-shadow:0 9px 20px rgba(8,22,55,.38);
  animation:cta-pulse 2.4s ease-in-out infinite;
}
.final__btn::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  border:1px solid rgba(229,199,123,.55);
  pointer-events:none;
}
.final__btn-icon{
  flex:none;
  width:clamp(40px,10.5vw,52px);
  height:auto;
  display:flex;
}
.final__btn-icon img{ width:100%; height:auto; }
.final__btn-label{
  color:#fdf6e6;
  font-weight:500;
  font-size:clamp(20px,5.7vw,28px);
  letter-spacing:.12em;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.final__btn-arrow{
  color:#fdf6e6;
  font-size:clamp(24px,6.4vw,32px);
  font-weight:400;
  margin-left:-2px;
}

/* --- 会社概要 --- */
.company{
  background:linear-gradient(180deg,#fffdf8 0%, #fdf5e9 100%);
  padding:34px 22px 42px;
  font-family:"Noto Serif JP", serif;
}
.company__heading{
  text-align:center;
  color:var(--navy);
  font-weight:500;
  font-size:clamp(24px,7vw,34px);
  letter-spacing:.10em;
}
.company__divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:12px 0 26px;
}
.company__divider::before,
.company__divider::after{
  content:"";
  width:clamp(56px,17vw,86px);
  height:1px;
  background:linear-gradient(90deg,transparent,#c9a24b);
}
.company__divider::after{ background:linear-gradient(90deg,#c9a24b,transparent); }
.company__divider span{
  width:9px; height:9px;
  border:1px solid #c19a3f;
  background:linear-gradient(135deg,#e9d090,#b8893a);
  transform:rotate(45deg);
  flex:none;
}

.company__table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #d6e0ec;
  font-size:clamp(13px,3.7vw,16px);
}
.company__table th,
.company__table td{
  border:1px solid #d6e0ec;
  vertical-align:middle;
  padding:clamp(14px,4vw,18px) clamp(11px,3.2vw,16px);
  line-height:1.65;
}
.company__table th{
  width:34%;
  background:#eef2f8;
  color:var(--navy);
  font-weight:500;
  text-align:center;
  letter-spacing:.04em;
  white-space:nowrap;
}
.company__table td{
  color:#1e1a1a;
  font-weight:400;
  text-align:left;
}
.company__table tr:last-child th{ white-space:nowrap; }
.company__table .biz{ font-size:clamp(11px,3.1vw,13px); line-height:1.7; }

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .cta__btn{ animation:none; }
}