@charset "utf-8";

/* ============================================================
   セクキャバ求人LP
   モバイルファースト（基準 390 x 844）
   現在は 01_hero のみ
   ============================================================ */

:root {
  /* pink */
  --pink-50: #fff6f9;
  --pink-100: #ffeaf1;
  --pink-200: #ffd7e5;
  --pink-300: #ffbdd3;
  --pink-500: #ef6497;
  --pink-600: #de4c84;

  /* base */
  --white: #ffffff;
  --cream: #fffdfb;
  --ink: #55404a;      /* 本文（黒ではなく温かみのある濃茶） */
  --ink-strong: #3f2c35; /* 見出し */
  --ink-muted: #8b7680;

  /* LINE */
  --line-green: #06c755;
  --line-green-dark: #05a948;

  --radius: 16px;
  --shadow-soft: 0 10px 28px rgba(222, 76, 132, 0.12);

  --font-round: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Zen Maru Gothic",
    "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic",
    "Meiryo", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  /* 横スクロール禁止（装飾がはみ出しても発生させない） */
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-round);
  font-size: 16px;
  line-height: 1.8;
  background: var(--white);
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a { text-decoration: none; color: inherit; }

.u-heart {
  color: var(--pink-500);
  font-size: 0.9em;
  margin-left: 0.15em;
}

/* ============================================================
   01_hero
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 20px 0 0;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--pink-100) 0%, rgba(255, 246, 249, 0) 62%),
    linear-gradient(180deg, var(--pink-50) 0%, var(--white) 42%, var(--white) 82%, var(--pink-50) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

/* ---------- 背景装飾 ---------- */

.hero__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deco {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
}

.deco--heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffbdd3' d='M12 21s-8-5.1-8-10.2A4.8 4.8 0 0 1 12 7.6 4.8 4.8 0 0 1 20 10.8C20 15.9 12 21 12 21Z'/%3E%3C/svg%3E");
}

.deco--spark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd7e5' d='M12 0c.6 6.4 5 10.8 12 12-7 1.2-11.4 5.6-12 12-.6-6.4-5-10.8-12-12C7 10.8 11.4 6.4 12 0Z'/%3E%3C/svg%3E");
}

.deco--h1 { top: 44px;  left: -6px;  width: 26px; height: 26px; opacity: .8; transform: rotate(-12deg); }
.deco--h2 { top: 128px; right: 2px;  width: 18px; height: 18px; opacity: .7; transform: rotate(14deg); }
.deco--h3 { top: 300px; left: 6px;   width: 14px; height: 14px; opacity: .55; }
.deco--s1 { top: 20px;  right: 26px; width: 22px; height: 22px; opacity: .9; }
.deco--s2 { top: 92px;  left: 26px;  width: 13px; height: 13px; opacity: .8; }
.deco--s3 { top: 250px; right: -4px; width: 28px; height: 28px; opacity: .7; }
.deco--s4 { top: 430px; left: -8px;  width: 20px; height: 20px; opacity: .55; }

/* ---------- 1. 小さなキャッチ ---------- */

.hero__catch {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--pink-600);
}

.hero__catch span {
  position: relative;
  padding: 0 22px;
}

/* 左右の飾り線 */
.hero__catch span::before,
.hero__catch span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--pink-300);
}
.hero__catch span::before { left: 0;  transform: rotate(60deg); }
.hero__catch span::after  { right: 0; transform: rotate(-60deg); }

/* ---------- 2. メインタイトル ---------- */

.hero__title {
  margin: 0;
  text-align: center;
  /* 「セクキャバって、」が狭い端末でも1行に収まる値 */
  font-size: clamp(26px, 8.2vw, 36px);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-strong);
  text-shadow: 0 2px 0 var(--white), 0 6px 16px rgba(222, 76, 132, .1);
}

.hero__title-line {
  display: block;
}

.hero__title-line--pink {
  color: var(--pink-500);
  /* 「セクキャバって、」の読点で右にズレて見えないよう微調整 */
  margin-left: .35em;
}

/* ---------- 3. サブコピー ---------- */

.hero__sub {
  margin: 12px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

/* ---------- 4. キャラクター＋リボン ---------- */

.hero__figure {
  position: relative;
  margin: 10px auto 0;
  width: min(300px, 82%);
}

/* キャラクター背後のやわらかい光 */
.hero__figure-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 46%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 229, .85) 0%, rgba(255, 214, 229, 0) 66%);
}

.hero__heroine {
  position: relative;
  z-index: 1;
  width: 100%;
  /* 元画像(900x1350)のうち、顔〜胸元までを見せて下部の鞄部分を自然な位置でカット */
  aspect-ratio: 900 / 1030;
  object-fit: cover;
  object-position: top center;
  margin-inline: auto;
  font-size: 13px;
  color: var(--ink-muted);
  /* 下端をページ背景へなじませ、切り取り線を目立たせない */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

/* 補足（リボン）: キャラクターの足元に重ねる */
.hero__ribbon {
  position: relative;
  z-index: 2;
  margin: -14px auto 0;
  width: max-content;
  max-width: 100%;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pink-500) 0%, var(--pink-600) 100%);
  color: var(--white);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(222, 76, 132, .28);
}

.hero__ribbon .u-heart { color: #ffe3ee; }

/* ---------- 5. 安心ポイント ---------- */

.hero__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.hero__point {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--pink-200);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  color: var(--ink-strong);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}

/* チェックマーク */
.hero__point::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ef6497' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m4 12.5 5.5 5.5L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 6. LINE CTA ---------- */

.hero__cta {
  margin-top: 20px;
}

.hero__cta-lead {
  margin: 0 0 8px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #16d363 0%, var(--line-green) 55%, var(--line-green-dark) 100%);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(6, 199, 85, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-line:active {
  transform: translateY(1px);
  box-shadow: 0 5px 12px rgba(6, 199, 85, .3);
}

.btn-line:focus-visible {
  outline: 3px solid var(--pink-500);
  outline-offset: 3px;
}

.btn-line__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  color: var(--line-green);
}

.btn-line__icon svg {
  width: 21px;
  height: 21px;
}

.hero__cta-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------- スクロール誘導 ---------- */

.hero__scroll {
  margin: 22px 0 0;
  padding-bottom: 34px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--pink-500);
}

.hero__scroll span {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}

/* 下向きの矢印 */
.hero__scroll span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border-right: 1.5px solid var(--pink-300);
  border-bottom: 1.5px solid var(--pink-300);
  transform: rotate(45deg);
  animation: scroll-hint 2.4s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%, 60%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .9; }
  30%           { transform: rotate(45deg) translate(3px, 3px); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll span::after { animation: none; }
  .btn-line { transition: none; }
}

/* ---------- 小さい端末（〜360px） ---------- */

@media (max-width: 360px) {
  .hero__ribbon { font-size: 12.5px; padding: 8px 14px; }
  .hero__point  { font-size: 13.5px; }
  .btn-line     { font-size: 17px; }
}

/* ---------- タブレット以上（今回は最低限の調整のみ） ---------- */

@media (min-width: 768px) {
  .hero__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   02_what-is-sexy-cabaret
   ============================================================ */

.what-is {
  position: relative;
  /* 01_heroの終端(pink-50)からの自然な続きになるよう同系色で開始 */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--pink-50) 0%, var(--white) 26%, var(--white) 100%);
}

.what-is__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.what-is__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し ---------- */

.what-is__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 7.2vw, 29px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-strong);
}

.what-is__title-heart {
  flex: none;
  font-size: 0.62em;
  color: var(--pink-300);
}

.what-is__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 3. 説明カード ---------- */

.what-is__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.what-is__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.what-is__card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pink-300) 0%, var(--pink-500) 100%);
  color: var(--white);
  font-size: 15px;
}

.what-is__card-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-strong);
}

/* ---------- 4. 小さな安心メッセージ ---------- */

.what-is__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}

.what-is__note-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  /* 顔がきちんと収まる位置 */
  object-position: 50% 14%;
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(222, 76, 132, .2);
}

.what-is__note-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--pink-200);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

/* 吹き出しの三角形（アイコン側を指す） */
.what-is__note-bubble::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: var(--white);
  border-left: 1px solid var(--pink-200);
  border-bottom: 1px solid var(--pink-200);
  transform: rotate(45deg);
}

.what-is__note-text {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
}

.what-is__note-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-muted);
}

@media (min-width: 768px) {
  .what-is__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   03_conversation-anxiety
   ============================================================ */

.talk {
  position: relative;
  /* 02の白背景から、また淡いピンクへ戻して章の切り替わりを示す */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--white) 0%, var(--pink-50) 18%, var(--pink-50) 100%);
}

.talk__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.talk__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・リード文 ---------- */

.talk__title {
  margin: 0;
  text-align: center;
  /* <br>で2行に固定しているため、350px幅コンテナ内で1行目が
     折り返さない上限まで最大値を抑える（430px幅でも3行化しないように） */
  font-size: clamp(22px, 6vw, 25px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-strong);
}

.talk__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}

.talk__supplement {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-muted);
}

/* ---------- 3. 比較カード ---------- */

.talk__compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.talk__compare-card {
  padding: 16px 10px;
  border-radius: var(--radius);
  text-align: center;
}

.talk__compare-card--general {
  border: 1px solid var(--pink-200);
  background: var(--cream);
}

.talk__compare-card--sexykyaba {
  border: 1px solid var(--pink-300);
  background: linear-gradient(160deg, var(--pink-100) 0%, var(--cream) 100%);
  box-shadow: var(--shadow-soft);
}

.talk__compare-label {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-muted);
}

.talk__compare-card--sexykyaba .talk__compare-label {
  color: var(--pink-600);
}

.talk__compare-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink-strong);
}

/* ---------- 4. ふんわりしたアイコン表現 ---------- */

.talk__traits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.talk__trait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid var(--pink-200);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.talk__trait-icon {
  flex: none;
  font-size: 18px;
  line-height: 1;
}

.talk__trait-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
}

/* ---------- 小さな結論 ---------- */

.talk__highlight {
  margin: 20px auto 0;
  max-width: 300px;
  padding: 12px 18px;
  border: 1px solid var(--pink-300);
  border-radius: 999px;
  background: var(--pink-100);
  color: var(--pink-600);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 5. 安心メッセージ ---------- */

.talk__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.talk__note-icon {
  flex: none;
  font-size: 15px;
  color: var(--pink-500);
}

.talk__note-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
  text-align: center;
}

@media (min-width: 768px) {
  .talk__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   04_difference-from-health-service
   ============================================================ */

.health {
  position: relative;
  /* 03の淡いピンクから、いったん白へ戻して章の切り替わりを示す */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--pink-50) 0%, var(--white) 20%, var(--white) 100%);
}

.health__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.health__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・本文 ---------- */

.health__title {
  margin: 0;
  text-align: center;
  font-size: clamp(23px, 6.4vw, 27px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-strong);
}

.health__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}

.health__body {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-muted);
}

/* ---------- 3. 安心カード ---------- */

.health__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.health__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.health__card-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m4 12.5 5.5 5.5L20 6'/%3E%3C/svg%3E") no-repeat center / 14px,
    linear-gradient(180deg, var(--pink-300) 0%, var(--pink-500) 100%);
}

.health__card-text {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-strong);
}

/* ---------- 4. やさしい説明文 ---------- */

.health__summary {
  margin: 20px auto 0;
  max-width: 300px;
  padding: 12px 18px;
  border: 1px solid var(--pink-300);
  border-radius: 999px;
  background: var(--pink-100);
  color: var(--pink-600);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 5. 安心メッセージ ---------- */

.health__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.health__note-icon {
  flex: none;
  font-size: 15px;
  color: var(--pink-500);
}

.health__note-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
  text-align: center;
}

@media (min-width: 768px) {
  .health__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   05_benefits
   ============================================================ */

.benefits {
  position: relative;
  /* 04の白背景から、再び淡いピンクへ戻して章の切り替わりを示す */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--white) 0%, var(--pink-50) 18%, var(--pink-50) 100%);
}

.benefits__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.benefits__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・リード文 ---------- */

.benefits__title {
  margin: 0;
  text-align: center;
  font-size: clamp(23px, 6.4vw, 27px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-strong);
}

.benefits__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 4. 8項目の2列グリッド ---------- */

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.benefits__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--pink-200);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}

.benefits__item::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ef6497' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m4 12.5 5.5 5.5L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 5. 小さな安心メッセージ ---------- */

.benefits__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.benefits__note-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(222, 76, 132, .2);
}

.benefits__note-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--pink-200);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.benefits__note-bubble::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: var(--white);
  border-left: 1px solid var(--pink-200);
  border-bottom: 1px solid var(--pink-200);
  transform: rotate(45deg);
}

.benefits__note-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
}

@media (min-width: 768px) {
  .benefits__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   06_salary
   ============================================================ */

.salary {
  position: relative;
  /* 05の淡いピンクから、いったん白へ戻して章の切り替わりを示す */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--pink-50) 0%, var(--white) 20%, var(--white) 100%);
}

.salary__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.salary__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・リード文 ---------- */

.salary__title {
  margin: 0;
  text-align: center;
  font-size: clamp(23px, 6.4vw, 27px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-strong);
}

.salary__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 4. 給与条件カード ---------- */

.salary__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 22px;
}

.salary__card {
  padding: 14px 10px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.salary__card-label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-muted);
}

.salary__card-value {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--pink-600);
  letter-spacing: .01em;
}

/* ---------- 5. 1日イメージカード ---------- */

.salary__example {
  margin-top: 20px;
  padding: 18px 16px;
  border: 1px solid var(--pink-300);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--pink-100) 0%, var(--cream) 100%);
  box-shadow: var(--shadow-soft);
}

.salary__example-badge {
  margin: 0 0 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink-600);
}

.salary__example-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.salary__example-row {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--white);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
}

.salary__example-row--total {
  margin-top: 4px;
  border: 1px solid var(--pink-300);
  background: var(--white);
  color: var(--pink-600);
}

.salary__example-caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ---------- 6. 安心メッセージ ---------- */

.salary__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
}

.salary__note-icon {
  flex: none;
  font-size: 15px;
  color: var(--pink-500);
}

.salary__note-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
  text-align: center;
}

@media (min-width: 768px) {
  .salary__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   07_trial-story
   ============================================================ */

.story {
  position: relative;
  /* 06の白背景から、再び淡いピンクへ戻して章の切り替わりを示す */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--white) 0%, var(--pink-50) 18%, var(--pink-50) 100%);
}

.story__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.story__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・リード文 ---------- */

.story__title {
  margin: 0;
  text-align: center;
  font-size: clamp(23px, 6.4vw, 27px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-strong);
}

.story__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 4. 縦タイムライン ---------- */

.story__timeline {
  position: relative;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

/* 丸数字の中心を貫く縦線 */
.story__timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 17px;
  bottom: 17px;
  width: 2px;
  background: var(--pink-200);
}

.story__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
}

.story__step--last {
  padding-bottom: 0;
}

.story__step-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pink-300) 0%, var(--pink-500) 100%);
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(222, 76, 132, .22);
}

.story__step-text {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--pink-200);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.story__step--last .story__step-num {
  background: linear-gradient(180deg, var(--pink-500) 0%, var(--pink-600) 100%);
}

.story__step--last .story__step-text {
  border-color: var(--pink-300);
  color: var(--pink-600);
}

/* ---------- 5. 強調カード ---------- */

.story__highlight {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--pink-300);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--pink-100) 0%, var(--cream) 100%);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.story__highlight-text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--pink-600);
  letter-spacing: .01em;
}

/* ---------- 6. 安心メッセージ ---------- */

.story__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.story__note-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(222, 76, 132, .2);
}

.story__note-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--pink-200);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.story__note-bubble::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: var(--white);
  border-left: 1px solid var(--pink-200);
  border-bottom: 1px solid var(--pink-200);
  transform: rotate(45deg);
}

.story__note-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
}

@media (min-width: 768px) {
  .story__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   08_faq
   ============================================================ */

.faq {
  position: relative;
  /* 07の淡いピンクから、いったん白へ戻して章の切り替わりを示す */
  padding: 4px 0 44px;
  background: linear-gradient(180deg, var(--pink-50) 0%, var(--white) 18%, var(--white) 100%);
}

.faq__inner {
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.faq__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・リード文 ---------- */

.faq__title {
  margin: 0;
  text-align: center;
  font-size: clamp(23px, 6.4vw, 27px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-strong);
}

.faq__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 4. FAQアコーディオン ---------- */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.faq__item {
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.faq__item[open] {
  border-color: var(--pink-300);
}

.faq__question {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 40px 12px 16px;
  color: var(--ink-strong);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

/* 開閉シェブロン */
.faq__question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--pink-500);
  border-bottom: 2px solid var(--pink-500);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.faq__item[open] .faq__question::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

.faq__question:focus-visible {
  outline: 2px solid var(--pink-500);
  outline-offset: -2px;
}

.faq__answer {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .faq__question::after { transition: none; }
}

@media (min-width: 768px) {
  .faq__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   09_line-cta
   ============================================================ */

.cta {
  position: relative;
  overflow: hidden;
  /* 08の白背景から、最後に淡いピンクへ戻して締めくくりの余韻を出す */
  padding: 4px 0 48px;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--pink-100) 0%, rgba(255, 246, 249, 0) 62%),
    linear-gradient(180deg, var(--white) 0%, var(--pink-50) 20%, var(--pink-50) 100%);
}

.cta__inner {
  position: relative;
  z-index: 1;
  width: min(350px, calc(100% - 40px));
  margin-inline: auto;
}

.cta__label {
  margin-bottom: 8px;
}

/* ---------- 2. 見出し・リード文 ---------- */

.cta__title {
  margin: 0;
  text-align: center;
  font-size: clamp(23px, 6.4vw, 27px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-strong);
}

/* 「♡」だけが行頭に孤立しないよう「大丈夫♡」を分割禁止にする */
.cta__title-nowrap {
  white-space: nowrap;
}

.cta__lead {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 4. キャラクター丸アイコン＋吹き出し ---------- */

.cta__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.cta__note-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 14%;
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(222, 76, 132, .2);
}

.cta__note-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--pink-200);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.cta__note-bubble::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -6px;
  width: 11px;
  height: 11px;
  background: var(--white);
  border-left: 1px solid var(--pink-200);
  border-bottom: 1px solid var(--pink-200);
  transform: rotate(45deg);
}

.cta__note-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-strong);
}

/* ---------- 5. 安心チェックリスト ---------- */

.cta__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.cta__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--pink-200);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  color: var(--ink-strong);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.cta__check::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ef6497' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m4 12.5 5.5 5.5L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 6. LINE CTA ---------- */

.cta__button-wrap {
  margin-top: 26px;
}

.cta__button-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-muted);
}

/* ---------- 7. 小さな注記 ---------- */

.cta__footnote {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---------- 8. 問い合わせ情報・応募資格 ---------- */

.cta__contact {
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--pink-200);
  border-radius: var(--radius);
  background: var(--white);
}

.cta__contact-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cta__contact-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.6;
}

.cta__contact-label {
  flex: none;
  width: 5.5em;
  margin: 0;
  color: var(--ink-muted);
  font-weight: 700;
}

.cta__contact-value {
  margin: 0;
  color: var(--ink-strong);
  font-weight: 700;
}

.cta__contact-link {
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--pink-300);
}

.cta__contact-eligibility {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--pink-100);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
}

@media (min-width: 768px) {
  .cta__inner { width: min(430px, calc(100% - 48px)); }
}

/* ============================================================
   lp-header
   ============================================================ */

.lp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--pink-100);
}

.lp-header-logo img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.lp-header-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--ink-strong);
}

@media (min-width: 768px) {
  .lp-header { padding: 16px 24px 14px; }
}

/* ============================================================
   lp-footer
   ============================================================ */

.lp-footer {
  padding: 28px 20px 36px;
  background: var(--pink-50);
  border-top: 1px solid var(--pink-100);
  text-align: center;
}

.lp-footer-brand {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: 0.04em;
}

.lp-footer-address,
.lp-footer-hours {
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.8;
}

.lp-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.lp-footer-links a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--pink-300);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-strong);
  background: var(--white);
  letter-spacing: 0.03em;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lp-footer-links a:hover {
  background: var(--pink-100);
  border-color: var(--pink-500);
}