/* マネク 診断LP
   配色はCanvaのパレット（コーラル／セージ／クリーム）をそのまま使用 */
:root{
  --coral:#E54E0C;
  --coral-2:#F97346;
  --cream:#FFF3DF;
  --cream-2:#FFE4C4;
  --beige:#E6C6A4;
  --ink:#2b2622;
  --ink-sub:#6b625b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:17px; line-height:1.8; letter-spacing:.04em;
  -webkit-text-size-adjust:100%;
  padding-bottom:92px;   /* 画面下の固定CTAに隠れないように */
}
img{display:block; width:100%; height:auto}
.wrap{max-width:600px; margin:0 auto; background:#fff}

/* ── FV ───────────────────────────────── */
.fv{position:relative; line-height:0}
.fv__img{width:100%}

/* 焼き込みボタンの真上に重ねる透過ボタン。
   位置・幅は％なので、画面幅が変わってもズレない。 */
.fv__btn{
  position:absolute; display:block; z-index:2; line-height:0;
  -webkit-tap-highlight-color:transparent;
  animation:btnFloat 2.6s ease-in-out infinite;
  will-change:transform;
}
.fv__btn img{width:100%; filter:drop-shadow(0 8px 18px rgba(229,78,12,.30))}
.fv__btn:active{transform:scale(.985)}
@keyframes btnFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){ .fv__btn{animation:none} }

/* ── 診断の中身 ＋ 再CTA ─────────────── */
.close{
  background:linear-gradient(180deg,#fff 0%,var(--cream) 22%);
  padding:34px 20px 30px; text-align:center; overflow:hidden;
}

.check__title{
  margin:0 0 6px; font-size:23px; font-weight:800; letter-spacing:.03em;
}
.check__title small{
  display:block; margin-top:6px;
  font-size:12.5px; font-weight:600; letter-spacing:.1em;
  color:var(--coral); 
}

/* 3項目：白いパネルに区切り線。カードを並べるより締まって見える */
.check{
  max-width:480px; margin:18px auto 24px;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 24px rgba(160,110,70,.10);
  text-align:left;
}
.check__row{
  display:flex; align-items:flex-start; gap:15px;
  padding:18px 22px;
  border-top:1px solid rgba(230,198,164,.45);
}
.check__row:first-child{border-top:0}

.check__icon{
  flex:none; width:36px; height:36px; margin-top:1px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--coral-2),var(--coral));
  color:#fff; font-size:17px; font-weight:800;
  display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(229,78,12,.28);
  letter-spacing:0;
}
.check__text{display:block}
.check__q{
  display:block; font-size:16.5px; font-weight:700; line-height:1.55;
  letter-spacing:.02em;
}
.check__q b{color:var(--coral)}
.check__sub{
  display:block; margin-top:3px;
  font-size:12px; font-weight:500; line-height:1.6;
  color:var(--ink-sub); letter-spacing:.03em;
}

/* 文字サイズを大きく（高安さん指摘） */
.close__ribbon{
  display:inline-block; background:var(--cream-2); color:var(--ink);
  font-size:18px; font-weight:800; letter-spacing:.04em;
  padding:8px 24px; border-radius:6px; margin-bottom:14px;
}

/* 下部CTAは影のぶんを内側に収める */
/* 下部CTAはFVと同じボタン画像を使う（フォント・色・矢印まで完全に同じ） */
.close__btnzone{max-width:500px; margin:0 auto; padding:6px 0}
.close__btn{position:static; display:block; line-height:0}

/* LINEはLINE色（高安さん指摘） */
.line{color:#06C755; font-weight:800}
.close__note{margin-top:10px; font-size:13px; font-weight:600}

/* ── フッター（contact-lpA と同じ）──────── */
footer{background:#fff; padding:22px 20px 26px; text-align:center; font-size:12px; color:var(--ink-sub)}
footer nav{margin-bottom:10px}
footer nav a{color:var(--ink-sub); text-decoration:underline; margin:0 9px}
footer .copy{letter-spacing:.06em}

@media (min-width:601px){ .wrap{box-shadow:0 0 40px rgba(0,0,0,.06)} }