/* ==========================================================
   AdKuru サービスサイト
   コンセプト … まるごと人事（お悩み → 解決／まるっと任せられる）
   文章・かわいさ … ibma（丸い太字、1語だけ大きく、紙吹雪、コーラルの面）
   ベースの色 … 【AdKuru採用】サービス紹介資料の紺
   ========================================================== */

:root {
  --navy: #254793;
  --navy-deep: #1a3470;
  --ink: #102a56;
  --text-sub: #3c4a66;
  --mute: #747578;
  --line: #d9dee8;
  --pale: #e8ebf3;
  --bg: #eef3fc;
  --bg-soft: #f5f8ff;
  --grid: linear-gradient(rgba(37, 71, 147, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 71, 147, .06) 1px, transparent 1px);
  --white: #fff;

  --coral: #ff7b72;
  --coral-deep: #e5544b;
  --coral-pale: #ffe4e1;
  --yellow: #f7ce0f;
  --yellow-pale: #fff6cf;
  --mint: #3fb795;
  --sky: #5b9bea;
  --pink: #f2868f;

  --radius: 20px;
  --container: 1080px;
  --shadow: 0 10px 30px rgba(16, 42, 86, .08);

  --ff-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-round: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-en: "Montserrat", "Noto Sans JP", sans-serif;
  --ff-num: "Oswald", "Montserrat", sans-serif;
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; font-family: var(--ff-ja); font-size: 16px; font-weight: 500; line-height: 1.8;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--ff-round); font-weight: 900; line-height: 1.45; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
.container--narrow { --container: 820px; }
.center { margin-top: 36px; text-align: center; }
.sp { display: none; }
.note { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--mute); }
.note--c { text-align: center; }

/* ---------- セクションの土台 ---------- */
.sec { position: relative; padding: 100px 0; background-color: var(--bg); background-image: var(--grid); background-size: 24px 24px; }
.sec--white { background: var(--bg-soft); }
.sec-head { margin-bottom: 52px; text-align: center; }
.sec-head__en {
  display: inline-block; transform: rotate(-4deg);
  font-family: var(--ff-en); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
}
.sec-head__ttl { margin-top: 6px; font-size: 34px; }
.sec-head__lead { margin-top: 20px; font-size: 16px; color: var(--text-sub); }
.hl { color: var(--navy); }
/* 1語だけ大きく（ibmaの「共感」） */
.big { position: relative; display: inline-block; margin: 0 .05em; font-size: 1.3em; line-height: 1; color: var(--coral); }


/* ---------- ボタン ---------- */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 300px; height: 64px; padding: 0 36px; border-radius: 999px;
  background: var(--navy); color: var(--white); font-size: 17px; font-weight: 900;
  box-shadow: 0 6px 0 var(--navy-deep); transition: transform .15s, box-shadow .15s;
}
.pbtn::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.pbtn:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--navy-deep); }
.fbtn {
  position: relative; display: block; width: 100%; height: 56px; border: 0; border-radius: 999px;
  background: var(--coral); color: var(--white); font-size: 17px; font-weight: 900;
  box-shadow: 0 5px 0 var(--coral-deep); transition: transform .15s, box-shadow .15s;
}
.fbtn:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-deep); }
.fbtn__time { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); font-size: 11px; }

/* ---------- ヘッダー ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 28px;
  height: 72px; padding: 0 24px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); transition: box-shadow .2s;
}
.header.is-scrolled { box-shadow: 0 4px 20px rgba(16, 42, 86, .08); }
.logo { display: flex; flex-direction: column; line-height: 1.1; }
.logo small { font-size: 11px; font-weight: 700; color: var(--navy); }
.logo b { font-family: var(--ff-en); font-size: 26px; font-weight: 800; }
.gnav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 700; }
.gnav a:hover { color: var(--coral); }
.hbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--white); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.hbtn svg { width: 18px; }
.hbtn:hover { background: var(--navy); }

/* ---------- 01 FV ---------- */
.fv {
  position: relative; overflow: hidden; padding: 124px 0 76px;
  background-color: var(--bg);
  background-image: var(--grid);
  background-size: 24px 24px;
}
.fv__inner { position: relative; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; }
.fv__label { display: inline-block; padding: 4px 14px; border-radius: 4px; background: var(--navy); color: var(--white); font-size: 14px; font-weight: 700; }
.fv__title { margin: 18px 0 14px; font-size: 46px; line-height: 1.35; }
.mark { color: var(--navy); background: linear-gradient(transparent 68%, rgba(247, 206, 15, .55) 68%); }
.fv__mood { display: inline-block; margin-bottom: 12px; padding: 4px 16px; border-radius: 999px; background: var(--yellow-pale); color: #6b5300; font-family: var(--ff-round); font-size: 15px; font-weight: 700; }
.fv__lead { font-size: 17px; font-weight: 700; }
.fv__lead strong { color: var(--navy); font-weight: 900; }

.badges { display: flex; gap: 16px; margin-top: 26px; }
.badge { position: relative; width: 150px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.badge::before, .badge::after {
  content: ""; position: absolute; top: 10px; width: 30px; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 90'%3E%3Cg fill='%23c9a54a'%3E%3Cpath d='M24 88C10 76 4 56 8 30' fill='none' stroke='%23c9a54a' stroke-width='2'/%3E%3Cellipse cx='6' cy='30' rx='4' ry='9' transform='rotate(-15 6 30)'/%3E%3Cellipse cx='4' cy='46' rx='4' ry='9' transform='rotate(-30 4 46)'/%3E%3Cellipse cx='7' cy='62' rx='4' ry='9' transform='rotate(-45 7 62)'/%3E%3Cellipse cx='14' cy='76' rx='4' ry='9' transform='rotate(-60 14 76)'/%3E%3Cellipse cx='16' cy='38' rx='3.5' ry='8' transform='rotate(25 16 38)'/%3E%3Cellipse cx='17' cy='54' rx='3.5' ry='8' transform='rotate(15 17 54)'/%3E%3Cellipse cx='21' cy='69' rx='3.5' ry='8' transform='rotate(5 21 69)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.badge::before { left: 0; }
.badge::after { right: 0; transform: scaleX(-1); }
.badge__sm { font-size: 12px; font-weight: 700; line-height: 1.3; }
.badge__num { font-family: var(--ff-num); font-size: 38px; font-weight: 600; line-height: 1.1; color: var(--navy); }
.badge__num small { font-family: var(--ff-ja); font-size: 14px; font-weight: 900; }

.media { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 14px 20px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.media__ttl { flex: none; font-size: 13px; font-weight: 900; color: var(--coral); }
.media__list { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--ff-en); font-size: 14px; font-weight: 700; }

/* ---------- フォーム ---------- */
.lead-form { padding: 26px 24px 22px; border-radius: var(--radius); background: var(--white); box-shadow: 0 16px 48px rgba(16, 42, 86, .14); }
.lead-form__ttl { text-align: center; font-family: var(--ff-round); font-size: 16px; font-weight: 900; line-height: 1.5; }
.lead-form__ttl span { display: block; font-size: 22px; color: var(--navy); }
.lead-form__sub { margin-top: 6px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--mute); }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 16px 0 14px; }
.steps li { padding: 6px 0; border-radius: 8px; background: var(--pale); text-align: center; font-size: 12px; font-weight: 700; color: var(--mute); }
.steps li.is-on { background: var(--navy); color: var(--white); }
.field { display: block; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.field legend, .field__lbl { display: block; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 700; }
.field em, .field i { margin-left: 6px; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-style: normal; vertical-align: 1px; }
.field em { background: var(--coral); color: var(--white); }
.field i { background: var(--pale); color: var(--mute); }
.field input, .field textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fafbfd; font: inherit; font-size: 15px; color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); background: var(--white); }
.is-err { border-color: var(--coral) !important; box-shadow: 0 0 0 2px rgba(255, 123, 114, .25); border-radius: 10px; }
.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.chips--3 { grid-template-columns: repeat(3, 1fr); }
.chips button { padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); font-size: 13px; font-weight: 700; line-height: 1.3; transition: all .15s; }
.chips button:hover { border-color: var(--navy); }
.chips button.is-on { border-color: var(--navy); background: var(--navy); color: var(--white); }
.agree { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13px; }
.agree a { color: var(--navy); text-decoration: underline; }
.agree input { width: 18px; height: 18px; accent-color: var(--navy); }
.lead-form__back { display: block; margin: 12px auto 0; border: 0; background: none; font-size: 13px; color: var(--mute); text-decoration: underline; }
.lead-form__err { margin-bottom: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--coral-deep); }
.lead-form__note { margin-top: 12px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--mute); }
.lead-form--wide { padding: 32px 40px 28px; }
.lead-form--wide .chips { grid-template-columns: repeat(4, 1fr); }
.lead-form--wide .chips--3 { grid-template-columns: repeat(3, 1fr); }
.lead-form--wide .fbtn { max-width: 420px; margin: 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- 02 できること ---------- */
#service { overflow: hidden; }
.can { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.can__item { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 22px; border-radius: 22px; background: var(--white); border-top: 6px solid var(--c); box-shadow: var(--shadow); }
.can__no { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; background: var(--c); color: var(--white); font-family: var(--ff-en); font-size: 14px; font-weight: 800; }
.can__item b { font-family: var(--ff-round); font-size: 19px; font-weight: 900; line-height: 1.4; }
.can__item > span:last-child { font-size: 14px; line-height: 1.6; color: var(--text-sub); }
.can__note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--mute); }

/* ---------- 03 お悩み → 解決 ---------- */
.worry { padding: 100px 0; background: linear-gradient(160deg, #4f84e0, var(--navy)); }
.sec-head--on-color .sec-head__en,
.sec-head--on-color .sec-head__ttl,
.sec-head--on-color .sec-head__lead { color: var(--white); }
.sec-head--on-color .sec-head__lead { font-weight: 700; }
.sec-head--on-color .big { color: var(--yellow); }
.worry__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; column-gap: 24px; max-width: 1000px; margin: 0 auto; }
.worry__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.worry__card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px 26px; border-radius: 24px; background: var(--white); text-align: center;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .06);
}
.worry__img { width: 100%; max-width: 240px; }
.worry__img img { width: 100%; height: 170px; object-fit: contain; }
.worry__ttl { margin-top: 16px; font-size: 20px; color: var(--ink); }
.worry__txt { margin-top: 10px; text-align: left; font-size: 14px; line-height: 1.75; color: var(--text-sub); }
.worry__arrow { justify-self: center; width: 0; height: 0; margin: 14px 0 12px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 16px solid var(--white); }
.worry__answer { position: relative; padding: 18px 18px 16px; border-radius: 18px; background: var(--yellow-pale); border: 3px solid var(--yellow); font-size: 15px; line-height: 1.7; }
.worry__answer b { color: var(--coral-deep); }
.worry__tag { display: block; width: fit-content; margin-bottom: 6px; padding: 1px 12px; border-radius: 999px; background: var(--coral); color: var(--white); font-family: var(--ff-round); font-size: 13px; font-weight: 900; }
.worry__banner {
  max-width: 760px; margin: 44px auto 0; padding: 18px 24px; border-radius: 999px; background: var(--yellow);
  text-align: center; font-family: var(--ff-round); font-size: 28px; font-weight: 900; color: var(--ink); box-shadow: 0 8px 0 rgba(0, 0, 0, .08);
}
.worry__banner small { font-size: .75em; }

/* ---------- 04 CTA ---------- */
.cta-band { position: relative; overflow: hidden; padding: 76px 0; background-color: #dde8fb; background-image: var(--grid); background-size: 24px 24px; }
.cta-band .container { position: relative; }
.cta-band__ttl { text-align: center; font-size: 28px; }
.cta-band__ttl::before { content: "\\"; margin-right: 14px; color: var(--coral); font-weight: 500; }
.cta-band__ttl::after { content: "/"; margin-left: 14px; color: var(--coral); font-weight: 500; }
.cta-card__img { width: 220px; height: auto; }
.cta-card { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 560px; margin: 30px auto 0; padding: 30px 28px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.cta-card .pbtn { width: 100%; min-width: 0; }
.checks li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.checks li + li { margin-top: 8px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); }
.checks li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }

/* ---------- 05 強み ---------- */
.chev { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 860px; margin: 0 auto 64px; }
.chev li {
  display: flex; align-items: center; justify-content: center; height: 54px; margin-left: -6px;
  color: var(--white); font-family: var(--ff-round); font-size: 16px; font-weight: 900;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.chev li:nth-child(1) { margin-left: 0; background: var(--navy); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.chev li:nth-child(2) { background: var(--coral); }
.chev li:nth-child(3) { background: #e0b400; }
.chev li:nth-child(4) { background: var(--mint); }
.point { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.point + .point { margin-top: 84px; }
.point--rev .point__visual { order: 2; }
.point__num { font-family: var(--ff-num); font-size: 72px; font-weight: 500; line-height: 1; color: var(--c); }
.point__ttl { position: relative; margin: 10px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 26px; }
.point__ttl::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 3px; border-radius: 2px; background: var(--c); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tags li { padding: 4px 12px; border-radius: 999px; background: var(--coral-pale); font-size: 13px; font-weight: 700; color: #c4473e; }
.list4 { display: grid; gap: 10px; margin-top: 18px; }
.list4 li { padding: 12px 16px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow); font-size: 14px; line-height: 1.6; }
.list4 b { display: block; font-family: var(--ff-round); font-size: 15px; color: var(--navy); }

/* 画面イメージ（素材がないためCSSで描く） */
.mock { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 360px; padding: 32px; border-radius: 24px; background: linear-gradient(135deg, var(--pale), #dfe5f2); }
.mock__cap { margin-top: 10px; text-align: center; font-size: 12px; color: var(--mute); }
.mock__arrow { flex: none; width: 40px; color: var(--navy); }
.phone { width: 160px; padding: 8px; border-radius: 26px; background: var(--ink); box-shadow: 0 16px 32px rgba(16, 42, 86, .25); }
.phone--2 { transform: translateY(26px); }
.phone__scr { position: relative; display: flex; flex-direction: column; height: 290px; overflow: hidden; border-radius: 19px; background: var(--white); }
.ad { justify-content: flex-end; padding: 16px 14px; color: var(--white); }
.ad--a { background: linear-gradient(180deg, rgba(16, 42, 86, .1), rgba(16, 42, 86, .85)), linear-gradient(135deg, #7f98cf, #3a5aa3); }
.ad--b { background: linear-gradient(160deg, var(--yellow), #f6dd8e 55%, var(--white)); color: var(--ink); }
.ad__tag { position: absolute; top: 12px; left: 12px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 10px; font-weight: 700; }
.ad b { font-size: 19px; line-height: 1.35; }
.ad__cta { margin-top: 12px; padding: 7px 0; border-radius: 999px; background: var(--coral); color: var(--white); text-align: center; font-size: 11px; font-weight: 700; }
.lp { gap: 8px; padding-bottom: 14px; }
.lp__hero { padding: 34px 12px 26px; background: var(--navy); color: var(--white); text-align: center; font-size: 15px; font-weight: 900; line-height: 1.4; }
.lp__row { height: 9px; margin: 2px 14px 0; border-radius: 4px; background: var(--pale); }
.lp__row--s { width: 55%; }
.lp__btn { margin: auto 14px 0; padding: 8px 0; border-radius: 999px; background: #06c755; color: var(--white); text-align: center; font-size: 11px; font-weight: 700; }
.chat { gap: 8px; padding: 14px 10px; background: #8ca4c9; }
.chat span { max-width: 88%; padding: 7px 10px; border-radius: 12px; font-size: 10.5px; line-height: 1.5; }
.chat__in { align-self: flex-start; background: var(--white); }
.chat__out { align-self: flex-end; background: #a6e38f; }
.cal { width: 100%; max-width: 360px; padding: 20px; border-radius: 16px; background: var(--white); box-shadow: 0 16px 32px rgba(16, 42, 86, .18); }
.cal__head { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 900; }
.cal__list li { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--pale); font-size: 14px; font-weight: 700; }
.cal__st { padding: 2px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 12px; }
.cal__st--sub { background: var(--pale); color: var(--navy); }

/* ---------- 06 SNS広告とは（比較表） ---------- */
.table-wrap { overflow-x: auto; }
.ctable, .otable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ctable { max-width: 940px; margin: 0 auto; }
.otable { min-width: 760px; }
.ctable th, .ctable td, .otable th, .otable td { padding: 18px 14px; border-bottom: 1px solid var(--pale); text-align: center; font-size: 15px; line-height: 1.55; }
.ctable thead th, .otable thead th { background: var(--mute); color: var(--white); font-family: var(--ff-round); font-weight: 900; }
.ctable thead th:first-child, .otable thead th:first-child { background: var(--white); }
.ctable tbody th, .otable tbody th { width: 150px; background: var(--navy); color: var(--white); font-family: var(--ff-round); font-weight: 900; }
.ctable td, .otable td { color: #555a63; }
.ctable .is-main, .otable .is-main { background: var(--coral-pale); color: var(--coral-deep); font-weight: 900; }
.ctable thead .is-main, .otable thead .is-main { background: var(--coral); color: var(--white); font-size: 18px; }
.otable small { display: block; font-size: 12px; color: var(--mute); }
.otable .is-main small { color: var(--coral-deep); }
.scroll-hint { display: none; }
.reason__img { display: block; width: 300px; height: auto; margin: -12px auto 32px; }

/* ---------- 07 実績 ---------- */
.case { max-width: 960px; margin: 0 auto; }
.case__no { text-align: center; font-family: var(--ff-en); font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--coral); }
.case__ttl { display: flex; align-items: center; gap: 18px; margin: 4px 0 28px; text-align: center; font-size: 22px; }
.case__ttl::before, .case__ttl::after { content: ""; flex: 1; height: 1px; background: var(--ink); opacity: .3; }
.case__body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: center; }
.case__nums { display: flex; align-items: center; gap: 14px; }
.case__before { flex: none; padding: 16px 18px; border-radius: 14px; background: #eef0f4; text-align: center; color: #555a63; }
.case__arrow { flex: none; width: 40px; color: var(--coral); }
.case__after { flex: 1; display: grid; gap: 10px; }
.case__after > div { padding: 12px 18px; border: 3px solid var(--coral); border-radius: 16px; background: var(--white); text-align: center; }
.case__k { font-size: 13px; font-weight: 700; }
.case__v { font-size: 16px; font-weight: 900; line-height: 1.2; }
.case__v b { margin: 0 2px; font-family: var(--ff-num); font-size: 52px; font-weight: 500; }
.case__after .case__v { color: var(--coral-deep); }
.case__s { font-size: 12px; }
.case__meta div { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pale); }
.case__meta dt { flex: none; width: 104px; padding: 2px 0; border-radius: 6px; background: var(--pale); text-align: center; font-size: 13px; font-weight: 700; }
.case__meta dd { margin: 0; font-size: 15px; font-weight: 700; }
.report { margin-top: 72px; padding: 36px; border-radius: 24px; background: #e3ecfa; }
.report__ttl { margin-bottom: 24px; text-align: center; font-size: 22px; }
.report__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.report__list li { padding: 22px; border-radius: var(--radius); background: var(--white); text-align: center; }
.report__list svg { width: 40px; margin: 0 auto 10px; color: var(--coral); }
.report__list b { display: block; margin-bottom: 6px; font-family: var(--ff-round); font-size: 16px; }
.report__list span { font-size: 14px; line-height: 1.6; color: var(--text-sub); }

/* ---------- 08 流れ ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 18px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); text-align: center; }
.flow li + li::before { content: ""; position: absolute; left: -13px; top: 50%; width: 12px; height: 16px; transform: translateY(-50%); background: var(--coral); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.flow__no { font-family: var(--ff-num); font-size: 30px; line-height: 1; color: var(--coral); }
.flow b { margin: 10px 0 6px; font-family: var(--ff-round); font-size: 17px; }
.flow p { flex: 1; font-size: 13px; line-height: 1.6; }
.flow__day { margin-top: 12px; padding: 2px 12px; border-radius: 999px; background: var(--yellow-pale); color: #6b5300; font-size: 12px; font-weight: 700; }
.flow__free { margin-top: 28px; text-align: center; font-family: var(--ff-round); font-size: 18px; font-weight: 900; }

/* ---------- 09 料金 ---------- */
.offer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 30px; padding: 22px 32px; border-radius: var(--radius); background: var(--navy); color: var(--white); }
.offer__sm { display: inline-block; padding: 0 10px; border-radius: 4px; background: var(--coral); font-size: 13px; font-weight: 900; }
.offer__ttl { margin-top: 6px; font-family: var(--ff-round); font-size: 24px; font-weight: 900; }
.offer__ttl b { color: var(--yellow); }
.offer__slots { display: flex; align-items: center; gap: 18px; }
.slots { display: flex; gap: 8px; }
.slots li { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--white); border-radius: 50%; font-size: 15px; font-weight: 900; }
.slots li.is-taken { background: var(--white); color: var(--navy); }
.offer__left { text-align: center; font-size: 18px; font-weight: 900; line-height: 1.2; }
.offer__left b { display: block; font-family: var(--ff-num); font-size: 34px; font-weight: 500; color: var(--yellow); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { position: relative; padding: 30px 24px 22px; border: 2px solid var(--pale); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); text-align: center; }
.plan--main { border-color: var(--navy); background: var(--navy); color: var(--white); transform: translateY(-10px); }
.plan__rec { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 3px 18px; border-radius: 999px; background: var(--coral); color: var(--white); font-size: 13px; font-weight: 900; }
.plan__en { font-family: var(--ff-en); font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--coral); }
.plan--main .plan__en { color: var(--yellow); }
.plan__name { margin-top: 2px; font-size: 18px; }
.plan__was { margin-top: 14px; font-size: 13px; text-decoration: line-through; opacity: .7; }
.plan__price { font-size: 18px; font-weight: 900; line-height: 1.1; }
.plan__price small { margin-right: 4px; font-size: 15px; }
.plan__price b { margin-right: 2px; font-family: var(--ff-num); font-size: 64px; font-weight: 600; }
.plan__inc { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.plan--main .plan__inc { color: var(--yellow); }
.plan__for { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: left; font-size: 14px; line-height: 1.6; }
.plan--main .plan__for { border-color: rgba(255, 255, 255, .3); }
.plan__more { margin-top: 14px; text-align: left; font-size: 14px; }
.plan__more summary { padding: 8px; border-radius: 10px; background: var(--pale); text-align: center; font-size: 13px; font-weight: 700; color: var(--navy); list-style: none; cursor: pointer; }
.plan--main .plan__more summary { background: rgba(255, 255, 255, .14); color: var(--white); }
.plan__more summary::-webkit-details-marker { display: none; }
.plan__more summary::after { content: "＋"; margin-left: 6px; }
.plan__more[open] summary::after { content: "−"; }
.plan__k { margin: 14px 0 4px; font-size: 13px; font-weight: 900; }
.dots li { position: relative; padding-left: 14px; line-height: 1.7; }
.dots li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dots li.off { opacity: .4; text-decoration: line-through; }
.zero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.zero li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.zero span { font-size: 13px; font-weight: 700; line-height: 1.4; }
.zero b { font-family: var(--ff-num); font-size: 32px; font-weight: 600; line-height: 1; color: var(--navy); white-space: nowrap; }
.zero b small { font-family: var(--ff-ja); font-size: 13px; }
.zero .zero__none { font-family: var(--ff-round); font-size: 22px; font-weight: 900; color: var(--coral); }

/* ---------- 11 FAQ ---------- */
.faq details { border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.faq details + details { margin-top: 12px; }
.faq summary { position: relative; padding: 18px 56px; font-family: var(--ff-round); font-size: 16px; font-weight: 900; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 20px; top: 14px; font-family: var(--ff-en); font-size: 22px; color: var(--coral); }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { position: relative; padding: 0 24px 20px 56px; font-size: 15px; }
.faq details p::before { content: "A"; position: absolute; left: 21px; top: -4px; font-family: var(--ff-en); font-size: 22px; font-weight: 800; color: var(--navy); }

/* ---------- 12 最終フォーム ---------- */
.contact .sec-head__ttl { font-size: 30px; }

/* ---------- フッター ---------- */
.footer { padding: 48px 0 110px; background: var(--ink); color: var(--white); }
.footer__inner { display: flex; justify-content: space-between; gap: 32px; }
.logo--w small { color: #c8d1d9; }
.footer__company { margin-top: 10px; font-size: 13px; opacity: .8; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 24px; max-width: 560px; font-size: 14px; }
.footer__nav a:hover { text-decoration: underline; }
.footer__copy { margin-top: 32px; text-align: center; font-size: 12px; opacity: .6; }
.spbar { display: none; }

/* ---------- 下層ページ ---------- */
.page { padding: 132px 0 96px; background: var(--white); }
.page__title { margin: 6px 0 36px; font-size: 30px; }
.prose h2 { margin: 32px 0 10px; font-size: 19px; }
.prose p, .prose li { font-size: 15px; }
.prose p + p { margin-top: 10px; }
.prose ul { margin: 8px 0; }
.prose li { position: relative; padding-left: 16px; }
.prose li::before { content: ""; position: absolute; left: 3px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }
.thanks { text-align: center; }
.thanks p { margin-top: 14px; }
.thanks .pbtn { margin-top: 36px; }

/* ==========================================================
   タブレット
   ========================================================== */
@media (max-width: 1080px) {
  .gnav { display: none; }
  .hbtn { margin-left: auto; }
  .fv__inner { grid-template-columns: 1fr; }
  .fv__form { width: 100%; max-width: 520px; margin: 0 auto; }
  .worry__list { gap: 14px; }
  .worry__ttl { font-size: 17px; }
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .flow li:nth-child(4)::before { display: none; }
  .zero { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   スマホ
   ========================================================== */
@media (max-width: 768px) {
  body { font-size: 15px; }
  html { scroll-padding-top: 64px; }
  .container { width: calc(100% - 32px); }
  .pc { display: none; }
  .sp { display: inline; }
  br.sp { display: block; }

  .header { height: 60px; padding: 0 16px; }
  .logo small { font-size: 10px; }
  .logo b { font-size: 22px; }
  .hbtn { height: 38px; padding: 0 14px; font-size: 13px; }
  .hbtn svg { width: 16px; }

  .sec, .worry { padding: 64px 0; }
  .sec-head { margin-bottom: 32px; }
  .sec-head__ttl { font-size: 23px; }
  .sec-head__lead { font-size: 14px; text-align: left; }
  .sec-head--on-color .sec-head__lead { text-align: center; }
  .pbtn { width: 100%; min-width: 0; height: 58px; padding: 0 20px; font-size: 16px; }

  .fv { padding: 88px 0 48px; }
  .fv__title { font-size: 26px; }
  .fv__mood { font-size: 13px; }
  .fv__lead { font-size: 15px; }
  .badges { justify-content: space-between; gap: 4px; }
  .badge { width: 33%; height: 96px; }
  .badge::before, .badge::after { top: 12px; width: 20px; height: 72px; }
  .badge__sm { font-size: 10px; }
  .badge__num { font-size: 28px; }
  .badge__num small { font-size: 11px; }
  .media { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; }
  .lead-form { padding: 22px 16px 18px; }
  .lead-form--wide { padding: 22px 16px; }
  .lead-form--wide .chips { grid-template-columns: repeat(2, 1fr); }
  .grid2 { grid-template-columns: 1fr; }

  .can { grid-template-columns: 1fr 1fr; gap: 10px; }
  .can__item { padding: 18px 14px; border-radius: 16px; }
  .can__no { width: 32px; height: 32px; font-size: 12px; }
  .can__item b { font-size: 15px; }
  .can__item > span:last-child { font-size: 12px; }

  .worry__list { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 26px; }
  .worry__item { grid-row: auto; grid-template-rows: none; }
  .worry__img img { height: 150px; }
  .reason__img { width: 240px; }
  .cta-card__img { width: 180px; }
  .worry__ttl { font-size: 19px; }
  .worry__banner { margin-top: 32px; padding: 14px 16px; font-size: 19px; }

  .cta-band { padding: 52px 0; }
  .cta-band__ttl { font-size: 20px; }
  .cta-band__ttl::before { margin-right: 8px; }
  .cta-band__ttl::after { margin-left: 8px; }
  .cta-card { padding: 24px 18px; }
  .checks li { font-size: 14px; }

  .chev { margin-bottom: 44px; }
  .chev li { height: 46px; margin-left: -3px; font-size: 12px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
  .chev li:nth-child(1) { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
  .point { grid-template-columns: 1fr; gap: 24px; }
  .point + .point { margin-top: 56px; }
  .point--rev .point__visual { order: 0; }
  .point__num { font-size: 52px; }
  .point__ttl { font-size: 21px; }
  .mock { min-height: 0; gap: 10px; padding: 22px 12px 34px; }
  .phone { width: 128px; padding: 6px; border-radius: 22px; }
  .phone__scr { height: 232px; border-radius: 16px; }
  .ad b { font-size: 15px; }
  .mock__arrow { width: 26px; }

  .ctable th, .ctable td { padding: 12px 6px; font-size: 12px; }
  .ctable tbody th { width: 64px; }
  .ctable thead .is-main { font-size: 13px; }
  .scroll-hint { display: block; margin-bottom: 8px; text-align: right; font-size: 12px; color: var(--mute); }

  .case__ttl { gap: 10px; font-size: 17px; }
  .case__body { grid-template-columns: 1fr; gap: 20px; }
  .case__nums { flex-direction: column; }
  .case__arrow { width: 30px; transform: rotate(90deg); }
  .case__after { width: 100%; }
  .case__v b { font-size: 44px; }
  .report { margin-top: 48px; padding: 24px 16px; }
  .report__ttl { font-size: 18px; }
  .report__list { grid-template-columns: 1fr; gap: 12px; }

  .flow { grid-template-columns: 1fr; gap: 18px; }
  .flow li { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 16px; text-align: left; }
  .flow li + li::before { display: block !important; left: 50%; top: -15px; width: 16px; height: 12px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .flow b { margin: 0; }
  .flow p { flex-basis: 100%; margin-top: 6px; }
  .flow__day { margin-top: 8px; }
  .flow__free { text-align: left; font-size: 15px; }

  .offer { flex-direction: column; align-items: flex-start; padding: 20px; }
  .offer__ttl { font-size: 19px; }
  .plans { grid-template-columns: 1fr; gap: 28px; }
  .plan--main { order: -1; transform: none; }
  .zero li { padding: 12px; }
  .zero b { font-size: 26px; }

  .faq summary { padding: 16px 44px 16px 46px; font-size: 15px; }
  .faq summary::before { left: 16px; top: 12px; }
  .faq details p { padding: 0 16px 18px 46px; font-size: 14px; }
  .faq details p::before { left: 17px; }
  .contact .sec-head__ttl { font-size: 21px; }

  .footer__inner { flex-direction: column; }
  .footer__nav { justify-content: flex-start; }

  .spbar {
    display: grid; place-items: center; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
    height: 52px; border-radius: 999px; background: var(--coral); color: var(--white); font-weight: 900; font-size: 15px;
    box-shadow: 0 6px 18px rgba(16, 42, 86, .2); transform: translateY(140%); transition: transform .25s;
  }
  .spbar.is-show { transform: none; }
}


/* ==========================================================
   v5（2026-10-06）
   ========================================================== */
.sec-head__sub { margin-top: 10px; font-family: var(--ff-round); font-size: 18px; font-weight: 900; color: var(--navy); }
.sec-head__lead b { color: var(--coral-deep); font-weight: 900; }
.sec-head__pre { display: inline-block; margin: 4px 0 2px; padding: 3px 14px; border-radius: 999px; background: var(--coral-pale); color: var(--coral-deep); font-size: 13px; font-weight: 900; }

/* お悩み：イラストは解決側 */
.worry__card { justify-content: center; }
.worry__ttl { margin-top: 4px; }
.worry__answer { display: flex; flex-direction: column; align-items: center; text-align: left; }
.worry__ans-img { width: 100%; max-width: 220px; height: 130px; object-fit: contain; margin-bottom: 10px; }
.worry__answer p { width: 100%; }

/* 強み：制作費0円 */
.point__free { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--yellow-pale); border: 2px solid var(--yellow); font-size: 14px; }
.point__free b { display: block; font-family: var(--ff-round); font-size: 18px; color: var(--coral-deep); }

/* 強み：認知獲得から面接まで */
.allin { margin-top: 88px; }
.allin__ttl { margin-bottom: 26px; text-align: center; font-size: 24px; }
.allin__ttl::before { content: "＼"; margin-right: 12px; color: var(--coral); font-weight: 500; }
.allin__ttl::after { content: "／"; margin-left: 12px; color: var(--coral); font-weight: 500; }
.steps5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.steps5 li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.steps5__head {
  width: calc(100% + 14px); height: 60px; margin-left: -14px; display: grid; place-items: center; padding: 0 16px 0 24px;
  background: var(--gray-blue); color: var(--ink); font-weight: 900; font-size: 15px; line-height: 1.3;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
}
.steps5 li:first-child .steps5__head { width: 100%; margin-left: 0; padding-left: 18px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.steps5 img { width: 140px; height: 112px; object-fit: contain; margin: 22px 0 14px; }
.steps5 li > p:last-child { padding: 0 12px; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.steps5__head { background: var(--navy); color: var(--white); }

/* 流れ：イラスト */
.flow__img { width: 120px; height: 86px; object-fit: contain; margin: 10px 0 2px; }

/* 料金：対応範囲を常に表示 */
.plan__scope { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); text-align: left; font-size: 14px; }
.plan--main .plan__scope { border-color: rgba(255, 255, 255, .3); }
.plan__price { margin-top: 14px; }

@media (max-width: 1080px) {
  .steps5 { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .steps5__head, .steps5 li:first-child .steps5__head { width: 100%; margin-left: 0; padding: 0 12px; clip-path: none; border-radius: 8px; }
}
@media (max-width: 768px) {
  .sec-head__sub { font-size: 15px; }
  .worry__ans-img { height: 110px; }
  .allin { margin-top: 60px; }
  .allin__ttl { font-size: 17px; }
  .steps5 { grid-template-columns: 1fr 1fr; gap: 16px 10px; }
  .steps5__head { height: 52px; font-size: 14px; }
  .steps5 img { width: 120px; height: 96px; margin: 14px 0 8px; }
  .steps5 li > p:last-child { padding: 0; font-size: 12px; }
  .flow__img { width: 90px; height: 64px; margin: 0; }
}

/* お悩み → SNS広告で解決 へつなぐ一文 */
.worry__list { grid-template-rows: auto; }
.worry__item { grid-row: auto; grid-template-rows: none; display: flex; }
.worry__card { flex: 1; }
#reason { padding-top: 72px; }
.bridge { margin-bottom: 56px; text-align: center; font-family: var(--ff-round); font-size: 30px; font-weight: 900; line-height: 1.5; color: var(--ink); }
.bridge span { color: var(--navy); background: linear-gradient(transparent 68%, rgba(247, 206, 15, .55) 68%); }
@media (max-width: 768px) {
  .bridge { margin-bottom: 36px; font-size: 22px; }
  #reason { padding-top: 52px; }
}

/* お悩みカードにイラスト */
.worry__card { justify-content: flex-start; }
.worry__card .worry__img { width: 100%; max-width: 240px; margin-bottom: 8px; }
.worry__card .worry__img img { width: 100%; height: 160px; object-fit: contain; }

/* 青 → 方眼の切り替えを大きな下向き三角に */
.worry { position: relative; z-index: 2; padding-bottom: 150px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 50% 100%, 0 calc(100% - 90px)); }
#reason { margin-top: -90px; padding-top: 150px; }
@media (max-width: 768px) {
  .worry { padding-bottom: 90px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px)); }
  #reason { margin-top: -44px; padding-top: 84px; }
  .worry__card .worry__img img { height: 140px; }
}

/* ==========================================================
   v6 SNS広告とは（解決3列・3つの強み・メリット・比較・帯）
   ========================================================== */
.bridge { font-size: 36px; }
.bridge span { background: none; color: var(--navy); }
.solve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
.solve__col { display: flex; flex-direction: column; }
.solve__ttl { font-size: 21px; line-height: 1.6; }
.solve__ttl span { color: var(--navy); }
.solve__img { display: grid; place-items: center; height: 200px; margin: 18px 0; border-radius: 16px; background: #e6edfb; }
.solve__img img { width: 80%; height: 170px; object-fit: contain; }
.solve__txt { flex: 1; font-size: 14px; line-height: 1.95; color: var(--text-sub); }
.solve__txt b { color: var(--ink); }
.solve__cmp { margin: 22px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.solve__cmp div { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 12px 16px; }
.solve__cmp div + div { border-top: 1px solid var(--line); background: #f3f6fd; }
.solve__cmp dt { padding: 4px 0; border-radius: 6px; background: var(--pale); text-align: center; font-size: 12px; font-weight: 700; color: var(--mute); }
.solve__cmp dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mute); }
.solve__cmp .is-sns dt { background: var(--navy); color: var(--white); }
.solve__cmp .is-sns dd { font-weight: 700; color: var(--ink); }

.sub-ttl { margin: 88px 0 28px; text-align: center; font-size: 26px; }
.sub-ttl::before { content: "＼"; margin-right: 14px; color: var(--navy); font-weight: 500; }
.sub-ttl::after { content: "／"; margin-left: 14px; color: var(--navy); font-weight: 500; }

.rows3 { display: grid; gap: 14px; }
.rows3 li { display: grid; grid-template-columns: 84px 1fr 180px; gap: 26px; align-items: center; padding: 18px 28px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.rows3__no { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #c8d1d9; color: var(--navy); font-family: var(--ff-num); font-size: 30px; }
.rows3 h4 { margin: 0; font-size: 20px; font-weight: 900; }
.rows3 p { margin-top: 6px; font-size: 14px; line-height: 1.75; color: var(--text-sub); }
.rows3 img { width: 180px; height: 110px; object-fit: contain; }

.merit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.merit li { display: flex; flex-direction: column; align-items: center; padding: 26px 22px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); text-align: center; }
.merit__pill { padding: 8px 28px; border-radius: 999px; background: #c8d1d9; color: var(--ink); font-family: var(--ff-round); font-size: 20px; font-weight: 900; }
.merit img { width: 100%; height: 160px; object-fit: contain; margin: 18px 0; }
.merit li > p:last-child { font-size: 14px; line-height: 1.75; color: var(--text-sub); }

#reason .ctable thead .is-main { background: var(--navy); color: var(--white) !important; }
#reason .ctable .is-main { background: #e6edfb; color: var(--navy); }
.band { margin-top: 24px; padding: 18px 24px; border-radius: 10px; background: var(--navy); color: var(--white); text-align: center; font-family: var(--ff-round); font-size: 20px; font-weight: 900; }

@media (max-width: 1080px) {
  .solve { grid-template-columns: 1fr; gap: 48px; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  .bridge { font-size: 23px; }
  .solve__ttl { font-size: 18px; }
  .sub-ttl { margin-top: 60px; font-size: 18px; }
  .sub-ttl::before { margin-right: 8px; }
  .sub-ttl::after { margin-left: 8px; }
  .rows3 li { grid-template-columns: 52px 1fr; gap: 14px; padding: 16px; }
  .rows3__no { width: 52px; height: 52px; font-size: 20px; }
  .rows3 h4 { font-size: 16px; }
  .rows3 img { display: none; }
  .merit { grid-template-columns: 1fr; }
  .merit__pill { font-size: 17px; }
  .band { font-size: 15px; padding: 14px 16px; }
}

/* 背景を交互に：方眼あり（.sec）／方眼なし（.sec--white・CTA） */
.cta-band { background-color: var(--bg-soft); background-image: none; }
.sec--white { background-color: var(--bg-soft); background-image: none; }

/* 交互の差をはっきり：方眼＝明るい青＋方眼／無地＝少し濃い青 */
.sec, .fv { background-color: #f3f6fd; }
.sec--white, .cta-band { background-color: #e1e9f9; background-image: none; }

/* だからSNS広告での採用がおすすめです：丸デザイン */
.merit { gap: 36px; }
.merit li { padding: 0; background: none; box-shadow: none; }
.merit__circle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 330px; aspect-ratio: 1; margin: 0 auto; padding: 24px;
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow);
}
.merit__no { font-family: var(--ff-num); font-size: 34px; line-height: 1; color: var(--navy); }
.merit__ttl { margin-top: 10px; font-family: var(--ff-round); font-size: 22px; font-weight: 900; color: var(--ink); }
.merit__ttl b { color: var(--navy); }
.merit__circle img { width: 70%; height: 130px; margin: 16px 0 0; object-fit: contain; }
.merit__txt { max-width: 320px; margin: 22px auto 0; font-size: 14px; line-height: 1.85; color: var(--text-sub); text-align: center; }
@media (max-width: 768px) {
  .merit { gap: 40px; }
  .merit__circle { max-width: 280px; }
  .merit__ttl { font-size: 19px; }
  .merit__circle img { height: 110px; }
}
@media (max-width: 768px) { .sub-ttl { font-size: 15px; letter-spacing: 0; } .sub-ttl::before { margin-right: 4px; } .sub-ttl::after { margin-left: 4px; } }
.container--faq { --container: 960px; }

/* 無料相談：TimeRexへ遷移するボックス */
.book { padding: 30px 26px 24px; border-radius: var(--radius); background: var(--white); box-shadow: 0 16px 48px rgba(16, 42, 86, .14); text-align: center; }
.book__ttl { font-family: var(--ff-round); font-size: 16px; font-weight: 900; line-height: 1.5; }
.book__ttl span { display: block; font-size: 24px; color: var(--navy); }
.book__sub { margin-top: 8px; font-size: 13px; color: var(--mute); }
.book__list { display: grid; gap: 8px; margin: 20px 0 22px; text-align: left; }
.book__list li { position: relative; padding: 10px 12px 10px 38px; border-radius: 10px; background: #f3f6fd; font-size: 14px; font-weight: 700; }
.book__list li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--navy); }
.book__list li::after { content: ""; position: absolute; left: 17px; top: 50%; width: 6px; height: 4px; margin-top: -3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.book__btn { display: grid; place-items: center; text-decoration: none; }
.book--wide { max-width: 620px; margin: 0 auto; padding: 36px 40px 28px; }
@media (max-width: 768px) { .book, .book--wide { padding: 24px 16px 20px; } .book__ttl span { font-size: 21px; } }

/* 予約ポップアップ */
dialog.modal {
  width: min(760px, calc(100% - 28px)); max-height: min(88vh, 900px); padding: 0; border: 0;
  border-radius: 24px; background: var(--white); box-shadow: 0 24px 70px rgba(10, 35, 80, .28); overflow: hidden;
}
dialog.modal::backdrop { background: rgba(16, 42, 86, .55); backdrop-filter: blur(3px); }
.modal__hd { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #eef3fc; }
.modal__hd h2 { font-size: 17px; font-weight: 900; }
.modal__hd span { padding: 5px 11px; border: 1px solid var(--navy); border-radius: 6px; background: var(--white); color: var(--navy); font-size: 12px; font-weight: 700; }
.modal__x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--text-sub); cursor: pointer; }
.modal__x svg { width: 16px; height: 16px; }
.modal__bd { max-height: calc(88vh - 72px); overflow-y: auto; padding: 18px 22px 24px; }
.modal__pre { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.modal__pre li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #eef3fc; color: var(--navy); font-size: 12px; font-weight: 700; }
.modal__fb { margin-top: 12px; padding: 22px 20px; border: 1px dashed var(--line); border-radius: 12px; background: #f6f8fd; text-align: center; }
.modal__fb[hidden] { display: none; }
.modal__fb p { font-size: 13px; line-height: 1.8; color: var(--text-sub); }
.modal__fb .fbtn { display: grid; place-items: center; max-width: 320px; margin: 14px auto 0; }
@media (max-width: 768px) {
  .modal__hd { padding: 14px 16px; }
  .modal__hd h2 { font-size: 15px; }
  .modal__hd span { display: none; }
  .modal__bd { padding: 14px 14px 20px; }
}


/* ===== できること：丸イラスト＋自動で右→左に流れるカルーセル ===== */
.can-marquee { overflow: hidden; margin: 0 calc(50% - 50vw); padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.can { display: flex; gap: 0; width: max-content; animation: can-flow 48s linear infinite; }
.can-marquee:hover .can { animation-play-state: paused; }
@keyframes can-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.can__item { flex: 0 0 280px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 22px; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
.can__circle { display: grid; place-items: center; width: 236px; aspect-ratio: 1; border-radius: 50%; background: var(--white); border: 1px solid #d6dbe6; }
.can__circle img { width: 62%; height: auto; }
.can__ttl { display: inline-block; margin-top: 24px; padding-bottom: 6px; border-bottom: 2px solid var(--navy); color: var(--navy); font-family: var(--ff-round); font-size: 24px; font-weight: 900; line-height: 1.4; }
.can__txt { margin-top: 16px; font-size: 15px; line-height: 1.9; color: var(--text); }
.can__txt em { font-style: normal; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .can { animation-duration: 160s; } }
@media (max-width: 767px) {
  .can { display: flex; grid-template-columns: none; gap: 0; animation-duration: 36s; }
  .can__item { flex-basis: 210px; padding: 0 14px; }
  .can__circle { width: 170px; }
  .can__ttl { margin-top: 16px; font-size: 18px; }
  .can__txt { margin-top: 10px; font-size: 13px; }
}

/* ===== CTA：左イラスト／右テキスト＋ボタン（タイトルは中央） ===== */
.cta-card { flex-direction: row; align-items: center; gap: 48px; max-width: 920px; padding: 40px 48px; }
.cta-card__img { flex: 0 0 340px; width: 340px; }
.cta-card__body { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.cta-card__lead { font-family: var(--ff-round); font-size: 20px; font-weight: 900; line-height: 1.6; color: var(--navy); }
.cta-card .checks { margin: 0; }
@media (max-width: 767px) {
  .cta-card { flex-direction: column; gap: 18px; padding: 24px 18px; }
  .cta-card__img { flex: none; width: 200px; }
  .cta-card__lead { font-size: 16px; text-align: center; }
}

/* ===== CTA：白カードをなくし、背景に直接のせる ===== */
.cta-card { background: none; box-shadow: none; border-radius: 0; padding: 10px 0 0; }
@media (max-width: 767px) { .cta-card { padding: 6px 0 0; } }
.cta-card__note { margin-top: -6px; text-align: center; font-size: 12px; color: var(--mute); }
.contact .cta-card { margin-top: 10px; }

/* ===== 導入の流れ：左から順番にパッと表示 ===== */
.js-anim .flow li { opacity: 0; transform: translateX(-40px) scale(.85); }
.js-anim .flow.is-in li { animation: flow-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * .35s); }
@keyframes flow-pop { from { opacity: 0; transform: translateX(-40px) scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-anim .flow li { opacity: 1; transform: none; } .js-anim .flow.is-in li { animation: none; } }

/* ===== できること：アニメーションをやめて静止配置（3列×2段） ===== */
.can-marquee { overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
.can { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; width: auto; animation: none; }
.can__item[aria-hidden="true"] { display: none; }
.can__item { padding: 0 8px; }
@media (max-width: 767px) {
  .can { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 8px; animation: none; }
  .can__item { padding: 0; }
  .can__circle { width: min(150px, 100%); }
}
.can__note { margin-top: 36px; }

/* ===== できること：PCは横一列（6列）にぎゅっと ===== */
@media (min-width: 1024px) {
  #service .container { --container: 1240px; }
  .can { grid-template-columns: repeat(6, 1fr); gap: 0 14px; }
  .can__item { padding: 0; }
  .can__circle { width: min(160px, 100%); }
  .can__circle img { width: 66%; }
  .can__ttl { margin-top: 16px; font-size: 17px; white-space: nowrap; }
  .can__txt { margin-top: 10px; font-size: 13px; line-height: 1.75; }
}

/* ===== ヘッダー：ナビを中央揃え ===== */
@media (min-width: 1081px) {
  .header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .gnav { margin: 0; justify-content: center; }
  .hbtn { justify-self: end; }
}

/* ===== CTAボタン：白地＋枠線、ホバーで枠色の全面塗りに反転 ===== */
.cbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; max-width: 440px; min-height: 68px; padding: 12px 64px; border: 2px solid var(--navy); border-radius: 999px; background: var(--white); color: var(--navy); font-family: var(--ff-round); font-size: 18px; font-weight: 900; letter-spacing: .04em; text-decoration: none; overflow: hidden; isolation: isolate; transition: color .35s ease; }
.cbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
.cbtn:hover, .cbtn:focus-visible { color: var(--white); }
.cbtn:hover::before, .cbtn:focus-visible::before { transform: scaleX(1); }
.cbtn__ic { flex: none; width: 30px; height: 30px; }
.cbtn__arr { position: absolute; right: 22px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); transition: transform .35s ease; }
.cbtn:hover .cbtn__arr { transform: translate(4px, -50%); }
.center .cbtn, .book .cbtn { margin: 0 auto; }
.cta-card .cbtn { max-width: none; }
@media (prefers-reduced-motion: reduce) { .cbtn, .cbtn::before, .cbtn__arr { transition: none; } }
@media (max-width: 767px) {
  .cbtn { min-height: 60px; gap: 12px; padding: 10px 52px; font-size: 16px; }
  .cbtn__ic, .cbtn__arr { width: 26px; height: 26px; }
  .cbtn__arr { right: 16px; }
}
@media (min-width: 768px) { .cbtn { font-size: 20px; } .cbtn__ic, .cbtn__arr { width: 34px; height: 34px; } }
.cbtn__tx { white-space: nowrap; }
.book .cbtn { gap: 10px; padding: 12px 50px 12px 24px; font-size: 18px; }
.book .cbtn .cbtn__arr { right: 16px; }

/* ===== 実績：BEFORE→AFTERでわかりやすく ===== */
.case2 { max-width: 980px; margin: 0 auto; padding: 40px 44px 44px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.case2__hd { text-align: center; }
.case2__ttl { display: inline-block; padding: 6px 22px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 17px; font-weight: 900; }
.case2__sub { margin-top: 16px; font-family: var(--ff-round); font-size: 26px; font-weight: 900; line-height: 1.5; color: var(--ink); }
.case2__ba { display: grid; grid-template-columns: 1fr auto 1.5fr; align-items: stretch; gap: 20px; margin-top: 32px; }
.case2__col { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 20px; border-radius: 18px; text-align: center; }
.case2__col--before { background: #eef0f4; color: #555a63; }
.case2__col--after { border: 3px solid var(--coral); background: #fff6f5; }
.case2__lbl { font-family: var(--ff-en); font-size: 15px; font-weight: 800; letter-spacing: .1em; }
.case2__lbl span { display: block; margin-top: 2px; font-family: var(--ff-round); font-size: 13px; letter-spacing: 0; }
.case2__col--after .case2__lbl { color: var(--coral-deep); }
.case2__big { font-size: 18px; font-weight: 900; line-height: 1.1; }
.case2__big small { display: block; margin-bottom: 4px; font-size: 13px; }
.case2__big b { margin: 0 3px; font-family: var(--ff-num); font-size: 60px; font-weight: 500; }
.case2__col--after .case2__big { color: var(--coral-deep); }
.case2__nums { display: flex; justify-content: center; gap: 28px; }
.case2__info { display: grid; gap: 6px; margin-top: auto; font-size: 14px; font-weight: 700; }
.case2__info span { display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: 6px; background: rgba(0, 0, 0, .06); font-size: 12px; }
.case2__arrow { align-self: center; width: 40px; color: var(--coral); }
@media (max-width: 767px) {
  .case2 { padding: 26px 16px 22px; }
  .case2__ttl { font-size: 14px; padding: 5px 16px; }
  .case2__sub { font-size: 18px; }
  .case2__ba { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .case2__arrow { justify-self: center; width: 30px; transform: rotate(90deg); }
  .case2__big b { font-size: 46px; }
  .case2__nums { gap: 18px; }
}

/* ===== 文字色の整理：本文・見出しは濃紺（--ink）に統一、強調はピンク ===== */
.logo small, .lead-form__ttl span, .list4 b, .cal__st--sub, .slots li.is-taken, .plan__inc, .plan__more summary,
.sec-head__sub, .rows3__no, #reason .ctable .is-main, .book__ttl span, .modal__hd span, .modal__pre li,
.can__ttl, .cta-card__lead { color: var(--ink); }
.faq details p::before { color: var(--coral); }
.hl, .mark, .bridge span, .solve__ttl span, .merit__ttl b, .merit__no, .badge__num, .zero b,
.sub-ttl::before, .sub-ttl::after { color: var(--coral); }
.fv__lead strong, .case2__sub b { color: var(--coral-deep); }

/* ===== ピンク強調を一部紺に戻す（解決3列・おすすめ丸・実績・比較の見出し） ===== */
.solve__ttl span, .merit__ttl b, .merit__no, #case .hl, #compare .hl { color: var(--ink); }

/* ===== 強み：モックをイラストに差し替え ===== */
.point__visual--img { display: grid; place-items: center; padding: 36px 40px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.point__visual--img img { width: 100%; max-width: 380px; height: 260px; object-fit: contain; }
@media (max-width: 767px) { .point__visual--img { padding: 24px; } .point__visual--img img { height: 200px; } }

/* ===== できること：ホバーで少し浮く ===== */
.can__item { transition: transform .3s ease; }
.can__circle { transition: box-shadow .3s ease; }
.can__item:hover { transform: translateY(-8px); }
.can__item:hover .can__circle { box-shadow: 0 14px 28px rgba(16, 42, 86, .12); }
@media (prefers-reduced-motion: reduce) { .can__item, .can__circle { transition: none; } }

/* ===== 料金に他社比較を統合 ===== */
.price-cmp { margin-top: 96px; }
.price-cmp .sec-head__ttl { font-size: 26px; }
#price .table-wrap + .note { margin-bottom: 40px; }
@media (max-width: 767px) { .price-cmp { margin-top: 64px; } .price-cmp .sec-head__ttl { font-size: 19px; } }
.price-cmp .hl { color: var(--ink); }


/* ===== FV右：SNS広告採用のイメージイラスト（人が動く） ===== */
.fv__inner { grid-template-columns: 1fr 540px; gap: 32px; }
.fv__artwrap { width: 540px; height: 500px; }
.fv-art { position: relative; width: 540px; height: 500px; --fvink: #102a56; }
.fv-art__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fv-art__lines path { stroke: #9fb2d9; stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.fv-art__lines circle { fill: var(--coral); }

.fv-art__phone { position: absolute; left: 50%; top: 50%; z-index: 2; width: 176px; margin: -170px 0 0 -88px; padding: 12px 10px 14px; border: 6px solid var(--fvink); border-radius: 28px; background: var(--white); box-shadow: 0 24px 48px rgba(16, 42, 86, .18); animation: fva-float 4s ease-in-out infinite; }
.fv-art__bar { display: flex; align-items: center; gap: 6px; }
.fv-art__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 9px/1 var(--ff-en); }
.fv-art__bar p { font-size: 9px; line-height: 1.3; }
.fv-art__bar b { display: block; color: var(--fvink); }
.fv-art__bar small { color: var(--mute); }
.fv-art__video { position: relative; height: 170px; margin-top: 8px; padding: 12px; border-radius: 12px; background: linear-gradient(160deg, #4f74c9, #254793 60%, #1a3470); color: #fff; overflow: hidden; }
.fv-art__video p { position: absolute; left: 12px; bottom: 12px; font-size: 15px; font-weight: 900; line-height: 1.35; }
.fv-art__play { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); animation: fva-pulse 1.6s ease-in-out infinite; }
.fv-art__play::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 9px solid var(--navy); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.fv-art__acts { display: flex; gap: 10px; margin: 8px 2px; }
.fv-art__acts span { width: 14px; height: 14px; border: 2px solid var(--fvink); border-radius: 50%; }
.fv-art__acts .fv-art__like { border-color: var(--coral); background: var(--coral); border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.85); animation: fva-beat 1.2s ease-in-out infinite; }
.fv-art__cta { padding: 7px 0; border-radius: 999px; background: #06c755; color: #fff; text-align: center; font-size: 11px; font-weight: 900; }
.fv-art__heart { position: absolute; right: -6px; bottom: 90px; width: 16px; height: 16px; background: var(--coral); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); opacity: 0; animation: fva-heart 3s ease-out infinite; }
.fv-art__heart--2 { right: 8px; animation-delay: 1s; background: var(--yellow); }
.fv-art__heart--3 { right: -14px; animation-delay: 2s; }

.fv-art__p { position: absolute; z-index: 1; width: 170px; margin: 0; text-align: center; }
.fv-art__disc { display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: var(--white); box-shadow: 0 12px 28px rgba(16, 42, 86, .1); }
.fv-art__disc img { width: 76%; height: 76%; object-fit: contain; }
.fv-art__p figcaption { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fv-art__p--1 { left: 0; top: 0; }
.fv-art__p--2 { right: 0; top: 0; }
.fv-art__p--3 { left: 0; bottom: 0; }
.fv-art__p--4 { right: 0; bottom: 0; }
.fv-art__p--1 img { animation: fva-walk 2.4s ease-in-out infinite; }
.fv-art__p--2 img { animation: fva-sway 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.fv-art__p--3 img { animation: fva-nod 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.fv-art__p--4 img { animation: fva-bob 2.6s ease-in-out infinite .4s; }
.fv-art__p--2 .fv-art__disc { animation: fva-bob 3.6s ease-in-out infinite .8s; }
.fv-art__p--3 .fv-art__disc { animation: fva-bob 3.4s ease-in-out infinite 1.2s; }

.fv-art__toast { position: absolute; z-index: 3; padding: 6px 12px 6px 28px; border-radius: 10px; background: var(--white); box-shadow: 0 8px 20px rgba(16, 42, 86, .14); color: var(--fvink); font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; animation: fva-toast 6s ease-in-out infinite; }
.fv-art__toast::before { content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #06c755; }
.fv-art__toast--1 { left: 120px; bottom: 150px; }
.fv-art__toast--2 { right: 96px; bottom: 150px; animation-delay: 3s; }
.fv-art__toast--2::before { background: var(--coral); }

@keyframes fva-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fva-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fva-walk { 0%, 100% { transform: translateX(-6px) translateY(0); } 25% { transform: translateX(-2px) translateY(-3px); } 50% { transform: translateX(6px) translateY(0); } 75% { transform: translateX(2px) translateY(-3px); } }
@keyframes fva-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fva-nod { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.03); } 60% { transform: translateY(0) scale(1); } }
@keyframes fva-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
@keyframes fva-beat { 0%, 100% { transform: rotate(-45deg) scale(.85); } 30% { transform: rotate(-45deg) scale(1.05); } }
@keyframes fva-heart { 0% { opacity: 0; transform: translate(0, 0) rotate(-45deg) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -120px) rotate(-45deg) scale(1); } }
@keyframes fva-toast { 0%, 8% { opacity: 0; transform: translateY(10px) scale(.9); } 14%, 42% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .fv-art *, .fv-art *::after { animation: none !important; } .fv-art__toast { opacity: 1; } }

@media (max-width: 1080px) { .fv__artwrap { margin: 8px auto 0; } }
@media (max-width: 600px) {
  .fv__artwrap { width: 340px; height: 315px; }
  .fv-art { transform: scale(.63); transform-origin: 0 0; }
}
@media (min-width: 1081px) {
  .fv .container { --container: 1280px; }
  .fv__inner { grid-template-columns: 1fr 500px; gap: 24px; }
  .fv__artwrap { width: 500px; height: 463px; }
  .fv-art { transform: scale(.926); transform-origin: 0 0; }
}
@media (max-width: 1080px) { .fv__inner { grid-template-columns: 1fr; } }

/* ===== FV右：アイソメトリックのSNS採用イラスト ===== */
.fv__artwrap { width: auto; height: auto; }
.fv__scene { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
@media (min-width: 1081px) {
  .fv__inner { grid-template-columns: 1fr 600px; gap: 8px; }
  .fv__artwrap { width: 600px; height: auto; margin-right: -40px; }
}
@media (max-width: 600px) { .fv__artwrap { width: auto; height: auto; margin: 4px -16px 0; } }

/* ===== FVコピー：シンプル版 ===== */
.fv__label { font-size: 16px; padding: 5px 16px; }
.fv__title { margin: 20px 0 0; line-height: 1.2; }
.fv__catch { display: block; font-size: 52px; }
.fv__brand { display: block; margin-top: 6px; font-family: var(--ff-en); font-size: 84px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.fv__sub { margin-top: 26px; font-size: 22px; font-weight: 900; color: var(--ink); }
.fv__lead2 { display: inline-block; margin-top: 14px; padding: 6px 18px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow); font-size: 17px; font-weight: 700; color: var(--ink); }
@media (max-width: 767px) {
  .fv__label { font-size: 14px; }
  .fv__catch { font-size: 32px; }
  .fv__brand { font-size: 54px; }
  .fv__sub { margin-top: 18px; font-size: 17px; }
  .fv__lead2 { font-size: 14px; }
}
.fv__catch { display: inline-flex; align-items: center; font-size: 34px; white-space: nowrap; }
.fv__catch::before { content: "＼"; margin-right: 10px; color: var(--coral); font-weight: 500; }
.fv__catch::after { content: "／"; margin-left: 10px; color: var(--coral); font-weight: 500; }
.fv__catch .mark { margin-left: .3em; }
.fv__brand { margin-top: 10px; }
.fv__cta { margin-top: 30px; max-width: 420px; }
@media (max-width: 767px) {
  .fv__catch { font-size: 20px; }
  .fv__catch::before { margin-right: 4px; }
  .fv__catch::after { margin-left: 4px; }
  .fv__cta { margin-top: 22px; max-width: none; }
}

/* ===== FV：青系の背景＋方眼、吹き出し ===== */
.fv { background-color: #c9daf7; background-image: linear-gradient(rgba(37, 71, 147, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 71, 147, .1) 1px, transparent 1px), linear-gradient(120deg, #d9e5fb 0%, #c3d6f6 55%, #aac5f2 100%); background-size: 24px 24px, 24px 24px, auto; }
.fv__bubble { position: relative; display: inline-block; margin-top: 18px; padding: 12px 26px; border: 3px solid var(--coral); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 20px; font-weight: 900; box-shadow: 0 8px 20px rgba(16, 42, 86, .14); }
.fv__bubble::after { content: ""; position: absolute; left: 40px; bottom: -13px; width: 20px; height: 20px; background: var(--white); border-right: 3px solid var(--coral); border-bottom: 3px solid var(--coral); transform: rotate(45deg); }
@media (max-width: 767px) { .fv__bubble { font-size: 15px; padding: 10px 16px; } }

/* ===== FV：AdKuru を1文字ずつ波打たせる（ループ） ===== */
.fv__brandin { display: inline-flex; }
.fv__brandin span { display: inline-block; animation: brand-wave 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i) * .1s); }
@keyframes brand-wave { 0%, 40%, 100% { transform: translateY(0); color: var(--ink); } 15% { transform: translateY(-16px); color: var(--navy); } 25% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fv__brandin span { animation: none; } }

/* ===== 他社比較：AdKuru列を広く ===== */
.otable { table-layout: fixed; }
.otable .otable__main { width: 26%; }
.otable thead .is-main { font-size: 22px; }
.otable td.is-main { font-size: 18px; }
.otable th, .otable td { overflow-wrap: anywhere; }
.otable__cr span { display: block; font-size: 14px; }
.otable__cr span + span { margin-top: 8px; }
.otable__cr b { display: block; font-weight: inherit; }

/* ===== FV微調整：アドクル表記・吹き出し位置・［］あしらい・CTA文字位置 ===== */
.fv__brand { display: flex; align-items: flex-end; gap: 14px; }
.fv__kana { margin-bottom: 10px; font-family: var(--ff-ja); font-size: 22px; font-weight: 900; letter-spacing: .12em; color: var(--ink); }
.fv__bubble { margin: 0 0 22px; }
.fv__subin { position: relative; display: inline-block; padding: 6px 22px; }
.fv__subin::before, .fv__subin::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12px; border: 3px solid var(--coral); }
.fv__subin::before { left: 0; border-right: 0; }
.fv__subin::after { right: 0; border-left: 0; }
.cbtn { padding: 12px 96px 12px 40px; }
@media (max-width: 767px) {
  .fv__brand { gap: 8px; }
  .fv__kana { margin-bottom: 6px; font-size: 15px; }
  .fv__bubble { margin-bottom: 16px; }
  .fv__subin { padding: 4px 14px; }
  .fv__subin::before, .fv__subin::after { width: 9px; border-width: 2px; }
  .cbtn { padding: 10px 78px 10px 28px; }
}
@media (max-width: 767px) { .fv__brand { margin-top: 18px; } }