/* ============================================================
   Smash VOC LP
   デザイン: Figma「Smash_VOC」(PC 1280px / SP 320px)
   ブレークポイント: 〜767px = SP / 768px〜 = PC（1023px以下はメニューをハンバーガーに）
   ============================================================ */

:root {
  --pink: #f44786;
  --pink-pale: #f9e4ee;
  --yellow: #fdbf09;
  --yellow-pale: #fff6dc;
  --cream: #fff9e7;
  --orange: #f98446;
  --orange-pale: #fbeee6;
  --gray-bg: #e1e1e1;
  --text: #111;
  --text-sub: #575757;
  --blue: #5a86f0;
  --rainbow: linear-gradient(90deg, #f0367c 0%, #f5683c 16%, #f6c63c 34%, #d9e04c 48%, #7ccf7a 62%, #4fb3e6 80%, #2a55d6 100%);
  --hd-h: 81px;
  --font: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: var(--hd-h);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.sp, .sp-xs { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.pk { color: var(--pink); }
.gy { color: #8a8a8a; }

/* マーカー（見出しの黄色い下線） */
.mk {
  background: linear-gradient(transparent 62%, rgba(253, 191, 9, .82) 62%, rgba(253, 191, 9, .82) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .12em;
}
.mk-s {
  background: linear-gradient(transparent 78%, rgba(253, 191, 9, .82) 78%, rgba(253, 191, 9, .82) 96%, transparent 96%);
  font-weight: 700;
}

/* ---------- 見出し ---------- */
.ttl-xl { font-size: 46px; font-weight: 900; line-height: 1.5; text-align: center; letter-spacing: .02em; }
.ttl-l { font-size: 40px; font-weight: 700; line-height: 1.5; text-align: center; letter-spacing: .02em; }
.ttl-2line { text-align: center; }
.ttl-2line__sub { display: block; font-size: 27px; font-weight: 700; line-height: 1.6; }
.ttl-2line__main { display: block; font-size: 40px; font-weight: 900; line-height: 1.5; }
.ttl-deco { position: relative; width: fit-content; margin-left: auto; margin-right: auto; }
.ttl-deco::before, .ttl-deco::after {
  content: ""; position: absolute; top: 50%; width: 59px; height: 73px; margin-top: -44px;
  background: url(../img/voc2026/deco_lines_yellow.svg) no-repeat center / contain;
}
.ttl-deco::before { left: -84px; }
.ttl-deco::after { right: -84px; transform: scaleX(-1); }

/* ---------- ピル（小さなラベル） ---------- */
.pill {
  display: block; width: fit-content; margin: 0 auto 10px; padding: 5px 26px;
  border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-align: center;
}
.pill--pink { background: var(--pink); color: #fff; padding-inline: 38px; }
.pill--yellow { background: var(--yellow); color: #fff; font-size: 20px; }
.pill--cream { background: #fbe08a; color: #000; }
.pill--wide { font-size: 24px; letter-spacing: .2em; padding: 0 52px; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  border: 0; border-radius: 999px; font-family: inherit; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2a55d6; outline-offset: 3px; }
.btn__arw { font-weight: 500; transform: scaleX(.7); }
.btn__num { font-size: 1.18em; margin-right: -.55em; }
.btn--sm .btn__num { font-size: 1.1em; margin-right: -.4em; }
.btn--pink {
  color: #fff;
  background: linear-gradient(180deg, #f283ab 0%, #ea5f93 48%, #e34a84 100%);
  box-shadow: 0 3px 6px rgba(190, 40, 100, .35), inset 0 -2px 0 rgba(0, 0, 0, .06);
}
.btn--line {
  color: #000;
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--rainbow) border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
}
.btn--blue {
  color: #fff;
  background: linear-gradient(180deg, #7896f3 0%, #5a78e2 100%);
  box-shadow: 0 3px 6px rgba(60, 90, 200, .35);
}
.btn--yline {
  color: #e9a900; background: #fff; border: 1.5px solid var(--yellow);
  width: 210px; max-width: 100%; height: 38px; font-size: 18px; font-weight: 700;
}
.btn--sm { height: 36px; padding: 0 20px; font-size: 14px; }
.btn--md { height: 46px; padding: 0 30px; font-size: 17px; }
.btn--lg { height: 57px; padding: 0 36px; font-size: 22px; }
.btn--spark { position: relative; }
.btn--spark::before {
  content: ""; position: absolute; left: -36px; top: -12px; width: 31px; height: 37px;
  background: url(../img/voc2026/deco_lines_pink.svg) no-repeat center / contain;
}
.cta-main { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta-note { font-size: 14px; font-weight: 500; color: var(--pink); letter-spacing: .08em; line-height: 1.4; }
.cta-note--dark { color: #000; font-size: 16px; }

/* ============================================================
   ヘッダー
   ============================================================ */
.hd { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background: #fff; border-bottom: 1px solid #ddd; }
.hd__in { display: flex; align-items: center; height: var(--hd-h); max-width: 1120px; margin: 0 auto; padding: 0 20px; gap: 28px; }
.hd__logo { flex: none; display: block; line-height: 0; }
.hd__logo img { width: 113px; height: auto; }
.hd__name { margin-left: -14px; font-size: 18px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.hd__nav { flex: 1; min-width: 0; display: flex; justify-content: flex-end; margin-right: 20px; }
.hd__nav > ul { display: flex; align-items: center; gap: 22px; }
.hd__nav li { position: relative; }
.hd__nav > ul > li > a, .hd__nav > ul > li > span {
  display: block; padding: 8px 0 7px; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat center bottom / 70% 2px;
  transition: background-size .2s ease;
}
.hd__nav > ul > li > a:hover, .hd__has-sub:hover > span, .hd__has-sub:focus-within > span { background-size: 100% 2px; }
.hd__sub {
  position: absolute; top: 100%; left: -14px; min-width: 210px; padding: 8px 0; background: #fff; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transform: translateY(4px); transition: .15s ease;
}
.hd__has-sub:hover .hd__sub, .hd__has-sub:focus-within .hd__sub { opacity: 1; visibility: visible; transform: none; }
.hd__sub a { display: block; padding: 9px 16px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.hd__sub a:hover { background: var(--cream); }
.hd__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.hd__burger { display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hd__burger span { position: absolute; left: 9px; width: 26px; height: 2px; background: #555; transition: .2s ease; }
.hd__burger span:nth-child(1) { top: 13px; }
.hd__burger span:nth-child(2) { top: 21px; }
.hd__burger span:nth-child(3) { top: 29px; }
.hd__burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd__burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.spmenu { position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100vh - var(--hd-h)); overflow-y: auto; background: #fff; border-top: 1px solid #eee; box-shadow: 0 10px 20px rgba(0, 0, 0, .12); padding: 8px 24px 28px; }
.spmenu > ul > li { border-bottom: 1px solid #eee; }
.spmenu a, .spmenu__label { display: block; padding: 14px 4px; font-size: 15px; text-decoration: none; }
.spmenu__label { color: #777; font-size: 13px; padding-bottom: 4px; }
.spmenu ul ul a { padding: 10px 4px 10px 18px; }
.spmenu__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
.spmenu__cta .btn { display: inline-flex; padding: 0 20px; width: 100%; max-width: 300px; height: 50px; font-size: 17px; }

/* ============================================================
   FV
   ============================================================ */
.fv { background: #fff; padding: 36px 0 56px; overflow: hidden; }
.fv__in { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; grid-template-areas: "txt visual" "cta visual"; column-gap: 0; align-items: start; }
.fv__txt { grid-area: txt; position: relative; z-index: 1; }
.fv__visual { grid-area: visual; position: relative; margin-left: -76px; }
.fv__visual img { width: 556px; max-width: none; }
.fv__cta { grid-area: cta; display: flex; align-items: flex-start; gap: 26px; margin-top: 38px; padding-left: 48px; position: relative; z-index: 1; }
.fv__label { display: inline-block; padding: 7px 21px; border-radius: 999px; background: #fdeeb6; font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; margin-top: 8px; }
.fv__ttl { margin-top: 12px; }
.fv__ttl-sub { display: block; font-size: 27px; font-weight: 700; line-height: 2.3; letter-spacing: .02em; }
.fv__ttl-main { display: block; font-size: 42px; font-weight: 900; line-height: 68px; letter-spacing: .02em; white-space: nowrap; }
.fv__ttl-main small { font-size: .78em; font-weight: 900; }
.fv__lead { margin-top: 22px; font-size: 20px; line-height: 30px; letter-spacing: .03em; }
.fv__note { display: none; }

/* ============================================================
   課題
   ============================================================ */
.problem { background: var(--gray-bg); padding: 44px 0 36px; }
.problem .inner { max-width: 1180px; }
.problem__ttl { text-align: center; }
.problem__ttl-sub { display: block; font-size: 27px; font-weight: 700; line-height: 1.9; letter-spacing: .04em; }
.problem__ttl-sub em { font-style: normal; -webkit-text-emphasis: filled dot var(--yellow); text-emphasis: filled dot var(--yellow); -webkit-text-emphasis-position: over right; text-emphasis-position: over right; }
.problem__ttl-main { display: block; font-size: 40px; font-weight: 900; line-height: 1.5; letter-spacing: .03em; }
.problem__body { display: grid; grid-template-columns: minmax(0, 729px) minmax(0, 412px); gap: 0 14px; justify-content: center; align-items: center; margin-top: 36px; }
.problem__list { display: flex; flex-direction: column; gap: 9px; }
.problem__list li { background: #fff url(../img/voc2026/icon_exclaim.svg) no-repeat 12px 50% / 34px auto; border: 1px solid #9a9a9a; border-radius: 10px; padding: 12px 12px 12px 54px; min-height: 86px; display: flex; flex-direction: column; justify-content: center; }
.problem__list h3 { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
.problem__list p { font-size: 18px; font-weight: 500; line-height: 23px; letter-spacing: .03em; margin-top: 2px; }

/* ============================================================
   解決
   ============================================================ */
.solution { background: #fff; overflow: hidden; }
.bridge { background: var(--gray-bg); clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%); height: 132px; padding-top: 12px; text-align: center; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .12)); }
.bridge p { font-size: 27px; font-weight: 500; line-height: 1.6; letter-spacing: .04em; }
.bridge img { display: block; margin: 2px auto 0; }
.solution .ttl-xl { margin-top: 18px; }
.solution__lead { margin-top: 8px; font-size: 27px; font-weight: 700; line-height: 68px; text-align: center; letter-spacing: .02em; }
.solution__body { display: grid; grid-template-columns: 358px 1fr; gap: 0 44px; max-width: 912px; margin: 26px auto 0; align-items: start; }
.solution__phone { margin-bottom: -96px; }
.solution__cards { display: flex; gap: 34px; padding-top: 66px; }
.side { position: relative; flex: 1; border: 2px solid #f7c9d9; border-radius: 10px; padding: 46px 14px 32px; text-align: center; }
.side__tag {
  position: absolute; top: -62px; left: 50%; transform: translateX(-50%);
  width: 212px; height: 50px; display: flex; align-items: center; justify-content: center;
  background: var(--pink); color: #fff; border-radius: 8px; font-size: 26px; font-weight: 700; letter-spacing: .22em; text-indent: .22em;
}
.side__tag::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -9px; border: 9px solid transparent; border-top: 14px solid var(--pink); border-bottom: 0; }
.side__bulb { display: block; margin: 0 auto 12px; }
.side__head { font-size: 20px; font-weight: 500; line-height: 29px; letter-spacing: .08em; }
.side__arw { display: block; margin: 20px auto 22px; }
.side__txt { font-size: 17px; font-weight: 500; line-height: 29px; letter-spacing: .03em; text-align: left; width: fit-content; margin: 0 auto; }

/* ============================================================
   比較表
   ============================================================ */
.compare { background: #fff; padding: 122px 0 78px; }
.cmp { max-width: 990px; margin: 46px auto 0; }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 19.5% 38% 42.5%; }
.cmp__h { display: flex; justify-content: center; padding-bottom: 12px; }
.cmp__h b { display: inline-flex; align-items: center; justify-content: center; min-width: 224px; height: 37px; border-radius: 999px; font-size: 18px; font-weight: 500; letter-spacing: .06em; }
.cmp__h--old b { background: #e4e4e4; }
.cmp__h--new b { background: var(--yellow); min-width: 276px; font-weight: 700; }
.cmp__row > span { display: flex; align-items: center; min-height: 50px; padding: 8px 12px; font-size: 18px; line-height: 1.35; letter-spacing: .04em; border-bottom: 1px solid #bdbdbd; }
.cmp__row:last-child > span { border-bottom: 0; }
.cmp__label { color: #797979; padding-left: 14px !important; }
.cmp__old { color: #797979; background: #f5f5f5; }
.cmp__old::before { content: ""; flex: none; width: 12px; height: 12px; margin: 0 26px 0 28px; background: url(../img/voc2026/icon_cmp_x.svg) no-repeat center / contain; }
.cmp__new { background: var(--cream); font-weight: 700; border-bottom-color: #e6dcb8 !important; }
.cmp__new::before { content: ""; flex: none; width: 21px; height: 21px; margin: 0 16px 0 22px; background: url(../img/voc2026/icon_cmp_check.svg) no-repeat center / contain; }

/* ============================================================
   体験版
   ============================================================ */
.movie { background: var(--cream); padding: 40px 0 60px; text-align: center; }
.movie__box { max-width: 720px; margin: 24px auto 0; }
.movie__box video { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--text-sub); }
.spinner { width: 20px; height: 20px; border: 3px solid #e6e6e6; border-top-color: var(--pink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- チャット（体験版本体） --- */
.chat-app { max-width: 560px; margin: 28px auto 0; text-align: left; scroll-margin-top: calc(var(--hd-h) + 16px); }
.chat-app-inner { background: #fff; border: 2px solid #3a3a3a; border-radius: 22px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.chat-header { padding: 14px 18px 12px; border-bottom: 1px solid #e6e6e6; background: #fafafa; }
.store-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.store-name-row strong { font-size: 16px; font-weight: 700; line-height: 1.4; }
.store-category { font-size: 12px; font-weight: 700; color: #b98600; background: var(--yellow-pale); border-radius: 999px; padding: 2px 10px; }
.store-category:empty, .price-level:empty { display: none; }
.store-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-sub); }
.rating { color: #e39a00; font-weight: 700; }
.price-level { border: 1px solid #ddd; border-radius: 999px; padding: 0 8px; }
.chat-body { min-height: 320px; max-height: 480px; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.message-row { display: flex; align-items: flex-start; gap: 10px; animation: pop .25s ease both; }
.message-row.user { justify-content: flex-end; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; }
.message { max-width: 78%; padding: 10px 14px; border-radius: 10px; font-size: 15px; line-height: 1.6; }
.message p { margin: 0; }
.message.bot { background: #fff; border: 1px solid #dcdcdc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.message.user { background: var(--pink); color: #fff; font-weight: 700; border-radius: 8px; }
.chat-choices { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 18px; }
.chat-choices:empty { padding: 0 0 10px; }
.choice {
  position: relative; flex: 1 1 calc(50% - 4px); min-height: 44px; padding: 8px 30px 8px 14px; text-align: left;
  background: #fff; border: 1.5px solid #555; border-radius: 6px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.choice::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left: 9px solid #555; border-right: 0; }
.choice:hover:not(:disabled), .choice.selected { background: var(--pink); border-color: var(--pink); color: #fff; }
.choice:hover:not(:disabled)::after, .choice.selected::after { border-left-color: #fff; }
.choice:disabled { opacity: .5; cursor: default; }
.choice-next { flex: 1 1 100%; height: 44px; margin-top: 4px; font-size: 16px; }
.choice-next:disabled { filter: grayscale(1); opacity: .5; cursor: default; transform: none; }
.final-card { margin: 4px 0 10px; padding: 18px 18px 16px; background: var(--cream); border: 2px solid var(--yellow); border-radius: 12px; text-align: center; animation: pop .25s ease both; }
.final-card__ttl { font-size: 18px; font-weight: 700; line-height: 1.5; }
.final-card__txt { margin-top: 8px; font-size: 15px; line-height: 1.7; text-align: left; }
.final-card .btn { margin-top: 14px; height: 50px; padding: 0 28px; font-size: 18px; max-width: 100%; }
.final-card .cta-note { margin-top: 8px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   できること
   ============================================================ */
.feat { background: #fff; padding-top: 60px; }
.feat__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 504px); gap: 40px; align-items: center; max-width: 920px; padding-bottom: 28px; }
.feat__intro .pill { margin: 0 auto 6px; }
.feat__intro .ttl-xl { line-height: 83px; white-space: nowrap; }
.ftabs { display: flex; align-items: flex-end; justify-content: center; max-width: 648px; margin: 0 auto; padding: 0 2px; height: 58px; }
.ftab {
  flex: 1; height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px 10px 0 0; font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: .04em; text-decoration: none;
  box-shadow: inset 0 -3px 4px -2px rgba(0, 0, 0, .1); transition: height .15s ease;
}
.ftab img { width: auto; height: 28px; }
.ftab:hover { height: 52px; }
.ftab[aria-current="true"] { height: 56px; box-shadow: 2px -1px 5px rgba(0, 0, 0, .14); position: relative; z-index: 1; }
.ftab--listen { background: var(--yellow-pale); color: var(--yellow); }
.ftab--understand { background: var(--orange-pale); color: var(--orange); font-size: 22px; }
.ftab--act { background: var(--pink-pale); color: var(--pink); }
.fpanel { scroll-margin-top: calc(var(--hd-h) + 8px); padding-top: 22px; }
.fpanel__bg { padding: 30px 20px; }
.fpanel--listen .fpanel__bg { background: var(--yellow-pale); }
.fpanel--understand .fpanel__bg { background: var(--orange-pale); }
.fpanel--act .fpanel__bg { background: var(--pink-pale); }
.fpanel__card { max-width: 1020px; margin: 0 auto; padding: 34px 30px 38px; background: #fff; border-radius: 22px; text-align: center; }
.fpanel__ttl { display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; color: #211715; }
.fpanel__num { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; font-size: 34px; font-weight: 500; letter-spacing: 0; }
.fpanel--listen .fpanel__num { background: var(--yellow); }
.fpanel--understand .fpanel__num { background: var(--orange); }
.fpanel--act .fpanel__num { background: var(--pink); }
.fpanel__lead {
  display: inline-block; margin-top: 20px; padding: 12px 46px; border: 2px solid transparent; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, var(--rainbow) border-box;
  font-size: 27px; font-weight: 500; line-height: 40px; letter-spacing: .1em;
}
.fpanel__fig { margin: 36px auto 0; }
.fpanel__fig--listen { max-width: 929px; }
.fpanel__fig--understand { max-width: 960px; }
.plan-note { margin-top: 10px; font-size: 12px; line-height: 1.6; text-align: right; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; max-width: 908px; margin: 40px auto 6px; text-align: left; }
.act { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px 20px 18px; background: #fff7fa; border: 2px solid var(--pink); border-radius: 10px; }
.act img { flex: none; width: 58px; height: 58px; }
.act > div { flex: 1; min-width: 0; padding-top: 10px; }
.act h4 { font-size: 20px; font-weight: 700; line-height: 33px; letter-spacing: .06em; padding-bottom: 5px; border-bottom: 1px solid var(--pink); }
.act p { position: relative; margin-top: 6px; padding-left: 28px; font-size: 16px; font-weight: 500; line-height: 30px; letter-spacing: .04em; }
.act p::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 1.5px; background: var(--pink); }
.act p::after { content: ""; position: absolute; left: 10px; top: 10px; width: 8px; height: 8px; border-top: 1.5px solid var(--pink); border-right: 1.5px solid var(--pink); transform: rotate(45deg); }

/* ============================================================
   レポート
   ============================================================ */
.report { background: #fff; padding: 52px 0 46px; }
.report .inner { max-width: 1047px; }
.report__fig { margin-top: 36px; }

/* ============================================================
   活用シーン
   ============================================================ */
.scenes { background: var(--cream); padding: 28px 0 56px; }
.scenes__wrap { position: relative; margin-top: 30px; }
.scenes__list { display: grid; grid-template-columns: repeat(3, 269px); gap: 22px 30px; justify-content: center; padding: 0 20px; }
.scenes__list li { line-height: 0; }
.scenes__btn, .scenes__dots { display: none; }

/* ============================================================
   始め方
   ============================================================ */
.howto { background: #fff; padding: 38px 0 60px; }
.howto .ttl-l { margin-top: 2px; }
.howto__lead { text-align: center; font-size: 20px; line-height: 42px; }
.steps { position: relative; max-width: 800px; margin: 28px auto 0; padding-left: 38px; }
.steps::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 62px; width: 4px; background: var(--yellow); }
.steps li { position: relative; display: grid; grid-template-columns: 44px 70px minmax(0, 1fr); column-gap: 8px; align-items: start; padding-bottom: 34px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: -38px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); }
.steps__num { font-size: 60px; font-weight: 700; line-height: 1; margin-top: -14px; text-align: center; }
.steps__ic { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin-top: -6px; border-radius: 50%; background: var(--yellow-pale); }
.steps__txt { padding-left: 6px; }
.steps__txt h3 { font-size: 30px; font-weight: 700; line-height: 1.35; letter-spacing: .04em; margin-top: -2px; }
.steps__txt p { margin-top: 8px; padding-left: 6px; font-size: 18px; font-weight: 400; line-height: 25px; letter-spacing: .03em; }
.howto__fig { max-width: 975px; margin: 46px auto 0; }

/* ============================================================
   料金
   ============================================================ */
.price { position: relative; background: var(--cream); padding: 118px 0 70px; }
.price::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 82px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 12%, 50% 100%, 0 12%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .08)); }
.price__lead { margin-top: 18px; text-align: center; font-size: 18px; line-height: 1.5; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 318px)); gap: 16px; justify-content: center; align-items: start; margin-top: 30px; }
.plan { position: relative; background: #fff; border: 2px solid #d2d2d2; border-radius: 12px; }
.plan--basic { border: 3px solid #e9588f; }
.plan__badge { position: absolute; z-index: 2; left: -48px; top: -36px; width: 110px; height: auto; max-width: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .15)); }
.plan__hd { padding: 9px 10px 4px; border-radius: 9px 9px 0 0; background: #ececec; text-align: center; }
.plan--basic .plan__hd { background: var(--pink-pale); }
.plan__tag { display: inline-block; padding: 1px 18px; border-radius: 999px; background: #d6d6d6; color: #6a6a6a; font-size: 14px; line-height: 1.5; letter-spacing: .04em; }
.plan--basic .plan__tag { background: #f8cfe0; color: var(--pink); }
.plan__hd h3 { font-size: 27px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
.plan__bd { padding: 22px 18px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.plan__price { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 86px; }
.plan__first { padding: 5px 7px; border: 1.5px solid #f29bbb; border-radius: 7px; background: #fff0f5; color: var(--pink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.plan__zero { color: var(--pink); font-size: 62px; font-weight: 900; line-height: 1; }
.plan__zero span { font-size: 38px; font-weight: 700; margin-right: 2px; }
.plan__tri { border: 8px solid transparent; border-left: 11px solid #bdbdbd; border-right: 0; }
.plan__after { text-align: left; line-height: 1.2; }
.plan__after small { display: block; font-size: 14px; font-weight: 700; }
.plan__after b { display: block; font-size: 33px; font-weight: 700; letter-spacing: .02em; }
.plan__after span { display: block; margin-top: 2px; font-size: 13px; white-space: nowrap; font-weight: 700; color: #898989; }
.plan:not(.plan--basic) .plan__after { text-align: center; }
.plan__qr { display: flex; align-items: center; justify-content: center; gap: 20px; width: 222px; max-width: 100%; margin: 12px auto 0; padding: 4px 0; border-radius: 8px; background: #f3f3f3; }
.plan--basic .plan__qr { background: var(--pink-pale); }
.plan__qr img { width: 50px; height: 50px; padding: 9px; border-radius: 50%; background: #fff; }
.plan__qr span { font-size: 20px; font-weight: 500; letter-spacing: .08em; }
.plan__qr b { color: var(--pink); font-size: 38px; font-weight: 700; margin: 0 6px 0 14px; line-height: 1; }
.plan__checks { margin: 16px 0 12px; text-align: left; width: fit-content; }
.plan__checks li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; margin-bottom: 5px; }
.plan__checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 13px; background: url(../img/voc2026/icon_check_price.svg) no-repeat center / contain; }
.plan--basic .btn--lg { width: 276px; max-width: 100%; padding: 0 10px; }
.plan .btn--yline { margin-top: 16px; }
.plan__note { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--text-sub); }
.plan__ask { width: 222px; max-width: 100%; padding: 26px 0 22px; border-radius: 10px; background: #f3f3f3; }
.plan__ask p { font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.plan__ask p::after { content: ""; display: block; width: 44px; height: 1px; margin: 10px auto 12px; background: #000; }
.plan__ask span { font-size: 16px; font-weight: 700; color: #898989; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: #fff; padding: 46px 0 76px; }
.faq .ttl-l { margin-top: 2px; }
.faq__list { max-width: 980px; margin: 22px auto 0; }
.faq__item { position: relative; padding: 20px 20px 18px 96px; border-bottom: 1px solid #f2d573; }
.faq__item dt { position: relative; font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: .06em; }
.faq__item dt::before { content: "Q"; position: absolute; left: -62px; top: -9px; width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: #fff; font-size: 25px; font-weight: 700; line-height: 44px; text-align: center; letter-spacing: 0; }
.faq__item dd { position: relative; margin-top: 8px; padding-left: 36px; font-size: 16px; font-weight: 400; line-height: 26px; letter-spacing: .04em; }
.faq__item dd::before { content: "A."; position: absolute; left: 6px; top: 0; color: var(--yellow); font-size: 18px; font-weight: 500; }
.faq__more { display: none; }

/* ============================================================
   最終CTA
   ============================================================ */
section.last { background: var(--yellow); padding: 36px 0 40px; text-align: center; }
.last__ttl {
  display: inline-block; padding: 10px 52px; border: 2px solid transparent; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, var(--rainbow) border-box;
  font-size: 30px; font-weight: 700; line-height: 1.5; letter-spacing: .08em;
}
.last__lead { margin-top: 20px; font-size: 21px; line-height: 1.6; letter-spacing: .04em; }
.last__cta { display: flex; align-items: flex-start; justify-content: center; gap: 28px; margin-top: 20px; padding-left: 20px; }
.last .btn--md { height: 50px; font-size: 20px; padding: 0 34px; margin-top: 3px; }
.last .btn--lg { font-size: 24px; padding: 0 40px; }
.last__dl { margin-top: 30px; }
.last__dl a { font-size: 18px; font-weight: 900; color: #3f3f3f; letter-spacing: .04em; text-underline-offset: 4px; }

/* ============================================================
   フッター
   ============================================================ */
.ft { background: #fff; font-size: 13px; }
.ft__legal { background: #fafafa; padding: 22px 20px; }
.ft__legal ul { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.ft__legal a { color: #666; }
.ft__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-top: 44px; padding-bottom: 30px; }
.ft__col p { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ft__col li { margin-bottom: 8px; }
.ft__col a { color: #444; text-decoration: none; }
.ft__col a:hover, .ft__legal a:hover { color: var(--pink); }
.ft__copy { padding: 16px 20px 24px; text-align: center; font-size: 12px; color: #888; }

/* ============================================================
   タブレット（768〜1099px）
   ============================================================ */
@media (max-width: 1099px) {
  .hd__nav, .hd__try { display: none; }
  .hd__in { justify-content: space-between; }
  .hd__cta { margin-left: auto; }
  .hd__burger { display: block; }
  .fv__in { grid-template-columns: minmax(0, 1fr) 40%; }
  .fv__visual { margin-left: -30px; }
  .fv__visual img { width: 100%; max-width: 100%; }
  .fv__ttl-sub { font-size: 2.2vw; }
  .fv__ttl-main { font-size: 3.9vw; line-height: 1.5; }
  .fv__lead { font-size: 1.8vw; line-height: 1.6; }
  .fv__cta { flex-wrap: wrap; }
  .ttl-deco::before { left: -70px; }
  .ttl-deco::after { right: -70px; }
  .solution__body { grid-template-columns: 300px 1fr; gap: 0 24px; }
  .solution__cards { gap: 18px; }
  .side__tag { width: 180px; font-size: 22px; }
  .side__txt, .side__head { font-size: 17px; }
  .cmp__row > span { font-size: 16px; }
  .cmp__old::before { margin: 0 12px 0 10px; }
  .cmp__new::before { margin: 0 10px 0 8px; }
  .cmp__h b { min-width: 0 !important; padding: 0 24px; }
  .feat__intro .ttl-xl { font-size: 38px; line-height: 1.7; }
  .fpanel__lead { font-size: 22px; padding: 10px 30px; }
  .act h4 { font-size: 18px; }
  .act p { font-size: 15px; }
  .steps__txt h3 { font-size: 26px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .plan__badge { left: -20px; top: -44px; width: 92px; }
  .plan__hd h3 { font-size: 22px; }
  .plan__price--free { flex-wrap: wrap; }
  .plan--basic .btn--lg { font-size: 17px; height: 50px; }
  .plan__ask p { font-size: 21px; }
  .ttl-l { font-size: 34px; }
  .ttl-xl { font-size: 40px; }
  .scenes__list { grid-template-columns: repeat(3, minmax(0, 269px)); gap: 16px; }
  .last__ttl { font-size: 26px; padding: 10px 34px; }
}

/* ============================================================
   スマホ（〜767px）
   ============================================================ */
@media (max-width: 767px) {
  .hd__name { margin-left: -2px; font-size: 13px; }
  :root { --hd-h: 56px; }
  .sp, .sp-xs { display: inline; }
  .pc { display: none; }
  body { font-size: 14px; }
  .inner { padding: 0 20px; }

  .ttl-xl { font-size: 25px; line-height: 1.45; }
  .ttl-deco { white-space: nowrap; }
  .ttl-deco.ttl-xl { font-size: min(25px, 6.2vw); }
  .ttl-l { font-size: 24px; line-height: 1.45; }
  .ttl-2line__sub { font-size: 16px; }
  .ttl-2line__main { font-size: 24px; }
  .ttl-deco::before, .ttl-deco::after { width: 30px; height: 37px; margin-top: -22px; }
  .ttl-deco::before { left: -40px; }
  .ttl-deco::after { right: -40px; }
  .pill { font-size: 15px; padding: 4px 24px; }
  .pill--yellow { font-size: 15px; }
  .pill--wide { font-size: 16px; padding: 1px 36px; }

  .btn--lg { height: 52px; font-size: 18px; padding: 0 30px; }
  .btn--md { height: 44px; font-size: 16px; padding: 0 28px; }
  .btn--spark::before { left: -26px; top: -8px; width: 22px; height: 26px; }
  .cta-note { font-size: 13px; }

  /* ヘッダー */
  .hd__in { height: var(--hd-h); padding: 0 8px 0 14px; gap: 8px; }
  .hd__logo img { width: 78px; }
  .hd__cta .btn--sm { height: 32px; padding: 0 12px; font-size: 12px; gap: .4em; }
  .hd__cta .btn--sm .btn__arw { display: none; }

  /* FV */
  .fv { padding: 16px 0 34px; }
  .fv__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .fv__label { font-size: 14px; padding: 4px 22px; margin-top: 0; }
  .fv__ttl { margin-top: 8px; }
  .fv__ttl-sub { font-size: 15px; line-height: 1.6; }
  .fv__ttl-main { font-size: 24px; line-height: 1.55; margin-top: 2px; white-space: normal; }
  .fv__lead { margin-top: 12px; font-size: 14px; line-height: 1.55; letter-spacing: 0; }
  .fv__visual { margin: 14px -20px 0; width: calc(100% + 40px); max-width: 420px; }
  .fv__visual img { width: 100%; }
  .fv__note { display: block; color: var(--pink); font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: .02em; text-align: center; white-space: nowrap; }
  .fv__note br { display: none; }
  .fv__note--1 { position: absolute; left: 0; right: 0; top: -4px; }
  .fv__note--2 { position: absolute; top: 73%; left: 54%; text-align: left; }
  .fv__note--2 br { display: inline; }
  .fv__visual { padding-top: 22px; }
  .fv__cta { flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; padding-left: 0; }
  .fv__cta .btn--lg { min-width: 270px; }
  .fv__cta .btn--md { min-width: 226px; }

  /* 課題 */
  .problem { padding: 26px 0 22px; }
  .problem__ttl-sub { font-size: 16px; line-height: 2; }
  .problem__ttl-main { font-size: 24px; line-height: 1.55; }
  .problem__body { display: block; margin-top: 10px; }
  .problem__img { max-width: 340px; margin: 0 auto; }
  .problem__list { margin: 20px auto 0; max-width: 400px; gap: 10px; }
  .problem__list li { padding: 10px 10px 10px 48px; background-position: 8px 22px; background-size: 30px auto; min-height: 0; }
  .problem__list h3 { font-size: 16px; }
  .problem__list p { font-size: 14px; line-height: 1.5; }

  /* 解決 */
  .bridge { height: 78px; padding-top: 8px; }
  .bridge p { font-size: 15px; }
  .bridge img { width: 22px; height: auto; margin-top: 0; }
  .solution { padding-bottom: 28px; }
  .solution .ttl-xl { margin-top: 12px; }
  .solution__lead { margin-top: 8px; font-size: 14px; line-height: 1.6; }
  .solution__body { display: block; margin-top: 14px; }
  .solution__phone { width: 245px; margin: 0 auto; }
  .solution__cards { flex-direction: column; gap: 34px; padding-top: 34px; max-width: 320px; margin: 0 auto; }
  .side { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 10px; padding: 26px 12px 20px; }
  .side__tag { top: -18px; width: 124px; height: 30px; font-size: 16px; border-radius: 6px; }
  .side__tag::after { margin-left: -6px; border-width: 6px; border-top-width: 9px; }
  .side__bulb { width: 38px; height: 38px; margin: 0; }
  .side__head { font-size: 16px; line-height: 1.5; text-align: left; }
  .side__arw { grid-column: 1 / -1; width: 24px; height: auto; margin: 12px auto 14px; }
  .side__txt { grid-column: 1 / -1; font-size: 15px; line-height: 1.6; text-align: center; }

  /* 比較表 */
  .compare { padding: 30px 0 30px; }
  .cmp { margin-top: 20px; }
  .cmp__head { display: none; }
  .cmp__head, .cmp__row { grid-template-columns: 22% 37% 41%; }
  .cmp__row > span { min-height: 50px; padding: 8px 4px 8px 0; font-size: 14px; line-height: 1.3; letter-spacing: .02em; }
  .cmp__label { font-size: 13px !important; padding-left: 2px !important; }
  .cmp__old::before { width: 10px; height: 10px; margin: 0 8px 0 8px; }
  .cmp__new::before { width: 16px; height: 16px; margin: 0 6px 0 6px; }
  .cmp__row > .cmp__new { border-bottom-color: #bdbdbd !important; }

  /* 体験版 */
  .url-form label { text-align: center; }
  .input-row { flex-direction: column; align-items: center; gap: 10px; }
  .input-row input { width: 100%; flex: none; }
  .input-row .btn { height: 40px; padding: 0 24px; font-size: 14px; }
  .chat-app { margin-top: 20px; }
  .chat-body { max-height: 420px; padding: 14px 12px 6px; }
  .avatar { width: 40px; height: 40px; }
  .message { font-size: 14px; max-width: 80%; }
  .choice { font-size: 14px; }
  .final-card .btn { font-size: 16px; padding: 0 20px; width: 100%; }

  /* できること */
  .feat { padding-top: 22px; }
  .feat__intro { display: block; padding-bottom: 6px; }
  .feat__intro .ttl-xl { line-height: 1.45; margin-top: 12px; }
  .feat__cycle { max-width: 330px; margin: 14px auto 0; }
  .ftabs { height: 40px; padding: 0; max-width: none; }
  .ftab { height: 32px; font-size: 15px; gap: 4px; border-radius: 8px 8px 0 0; }
  .ftab img { height: 16px; }
  .ftab:hover { height: 32px; }
  .ftab[aria-current="true"] { height: 38px; }
  .ftab--understand { font-size: 13px; }
  .fpanel { padding-top: 10px; }
  .fpanel__bg { padding: 14px 12px 12px; }
  .fpanel__card { padding: 16px 10px 14px; border-radius: 12px; }
  .fpanel__ttl { font-size: 24px; gap: 10px; }
  .fpanel__num { width: 34px; height: 34px; font-size: 19px; }
  .fpanel__lead { margin-top: 10px; padding: 8px 22px; font-size: 15px; line-height: 1.45; letter-spacing: .04em; border-radius: 30px; }
  .fpanel__fig { margin-top: 18px; }
  .fpanel__fig--listen { max-width: 275px; }
  .fpanel__fig--understand { max-width: 277px; }
  .plan-note { font-size: 12px; }
  .acts { grid-template-columns: 1fr; gap: 10px; margin: 16px auto 4px; max-width: 320px; }
  .act { padding: 10px 12px 12px 8px; gap: 8px; border-width: 1.5px; }
  .act img { width: 34px; height: 34px; margin-top: 2px; }
  .act > div { padding-top: 0; }
  .act h4 { font-size: 16px; line-height: 1.6; padding-bottom: 3px; }
  .act p { font-size: 14px; line-height: 1.45; margin-top: 6px; padding-left: 24px; }
  .act p::before { top: 9px; width: 14px; }
  .act p::after { top: 6px; left: 8px; width: 6px; height: 6px; }
  .act--3 { order: 2; }
  .act--2 { order: 3; }
  .act--4 { order: 4; }

  /* レポート */
  .report { padding: 28px 0 20px; }
  .report__fig { max-width: 291px; margin: 20px auto 0; }

  /* 活用シーン */
  .scenes { padding: 22px 0 22px; }
  .scenes__wrap { margin-top: 16px; }
  .scenes__list {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 4px calc((100% - 250px) / 2) 8px; scrollbar-width: none; justify-content: flex-start;
  }
  .scenes__list::-webkit-scrollbar { display: none; }
  .scenes__list li { flex: 0 0 250px; scroll-snap-align: center; opacity: .45; transition: opacity .25s ease; }
  .scenes__list li.is-active { opacity: 1; }
  .scenes__list img { width: 100%; }
  .scenes__btn { display: block; position: absolute; z-index: 2; top: 50%; margin-top: -22px; width: 36px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .scenes__btn::before { content: ""; position: absolute; top: 12px; border: 10px solid transparent; }
  .scenes__btn--prev { left: calc(50% - 125px - 34px); }
  .scenes__btn--prev::before { left: 2px; border-right: 13px solid var(--yellow); border-left: 0; }
  .scenes__btn--next { right: calc(50% - 125px - 34px); }
  .scenes__btn--next::before { right: 2px; border-left: 13px solid var(--yellow); border-right: 0; }
  .scenes__btn:disabled { opacity: .25; cursor: default; }
  .scenes__dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
  .scenes__dots span { width: 8px; height: 8px; border-radius: 50%; background: #cfcfcf; transition: background .2s ease; }
  .scenes__dots span.is-active { background: var(--yellow); }

  /* 始め方 */
  .howto { padding: 24px 0 26px; }
  .howto .ttl-l { margin-top: 8px; }
  .howto__lead { font-size: 14px; line-height: 2; }
  .steps { margin-top: 14px; padding-left: 36px; max-width: 420px; }
  .steps::before { left: 11px; top: 16px; bottom: 60px; width: 3px; }
  .steps li { display: block; padding: 12px 12px 12px 12px; margin-bottom: 14px; background: var(--cream); border-radius: 8px; }
  .steps li:last-child { padding-bottom: 12px; margin-bottom: 0; }
  .steps li::before { left: -36px; top: 14px; width: 25px; height: 25px; }
  .steps__num { position: absolute; left: -36px; top: 14px; width: 25px; margin: 0; font-size: 15px; line-height: 25px; }
  .steps__ic { float: left; width: 30px; height: 30px; margin: 0 8px 0 0; background: none; }
  .steps__ic img { max-height: 26px; width: auto; }
  .steps__txt { padding-left: 0; }
  .steps__txt h3 { font-size: 16px; line-height: 30px; margin-top: 0; }
  .steps__txt p { clear: both; padding: 6px 0 0; margin: 0; font-size: 14px; line-height: 1.55; }
  .howto__fig { max-width: 286px; margin-top: 22px; }

  /* 料金 */
  .price { padding: 52px 0 34px; }
  .price::before { height: 34px; }
  .price__lead { margin-top: 10px; font-size: 14px; }
  .plans { grid-template-columns: minmax(0, 320px); gap: 18px; margin-top: 42px; }
  .plan__badge { left: -14px; top: -40px; width: 88px; }
  .plan__hd h3 { font-size: 22px; }
  .plan__bd { padding: 16px 16px 20px; }
  .plan__price--free { flex-wrap: nowrap; }
  .plan__zero { font-size: 54px; }
  .plan__zero span { font-size: 32px; }
  .plan__after b { font-size: 28px; }
  .plan__after span { font-size: 12px; letter-spacing: -.02em; }
  .plan--basic .btn--lg { font-size: 18px; height: 52px; }
  .plan__note { font-size: 13px; }
  .plan__ask p { font-size: 22px; }

  /* FAQ */
  .faq { padding: 26px 0 34px; }
  .faq__list { margin-top: 10px; }
  .faq__item { padding: 14px 4px 12px 40px; }
  .faq__item dt { font-size: 15px; line-height: 1.5; letter-spacing: .02em; }
  .faq__item dt::before { left: -38px; top: -3px; width: 28px; height: 28px; font-size: 16px; line-height: 27px; }
  .faq__item dd { margin-top: 6px; padding-left: 26px; font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
  .faq__item dd::before { left: 0; font-size: 16px; }
  .faq__list:not(.is-open) .faq__item--more { display: none; }
  .faq__more { display: block; width: 100%; height: 48px; margin: 4px auto 0; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  .faq__more::before { content: ""; position: absolute; left: 50%; top: 10px; width: 16px; height: 16px; margin-left: -8px; border-right: 2.5px solid var(--yellow); border-bottom: 2.5px solid var(--yellow); transform: rotate(45deg); }
  .faq__more[aria-expanded="true"] { display: none; }

  /* 最終CTA */
  section.last { padding: 22px 0 26px; }
  .last__ttl { font-size: 18px; padding: 8px 26px; letter-spacing: .06em; border-radius: 40px; }
  .last__lead { margin-top: 14px; font-size: 14px; }
  .last__cta { flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; padding-left: 0; }
  .last .btn--lg { font-size: 18px; min-width: 270px; padding: 0 30px; }
  .last .btn--md { font-size: 16px; height: 44px; min-width: 226px; margin-top: 0; }
  .cta-note--dark { font-size: 13px; }
  .last__dl { margin-top: 18px; }
  .last__dl a { font-size: 15px; }

  /* フッター */
  .ft__legal ul { gap: 10px 24px; }
  .ft__in { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-top: 30px; }
  .ft__logo { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 359px) {
  .hd__name { display: none; }
}

/* ===== フォーム・送信完了ページ（page_voc2026_form.php） ===== */
.vocf { background: var(--cream); padding: 56px 20px 80px; }
.vocf__in { max-width: 760px; margin: 0 auto; }
.vocf__ttl { font-size: 32px; font-weight: 900; line-height: 1.4; text-align: center; letter-spacing: .04em; }
.vocf__body { margin-top: 28px; background: #fff; border-radius: 16px; padding: 40px 48px; box-shadow: 0 4px 20px rgba(0, 0, 0, .05); font-size: 16px; line-height: 1.8; }
.vocf__body > p { margin: 0 0 1em; }
.vocf__body a { color: var(--blue); }
.vf__row { margin: 0 0 20px; }
.vocf .vf__row br { display: none; } /* Contact Form 7 が自動で入れる改行を消して、余白をそろえる */
.vocf .vf__label + .wpcf7-form-control-wrap { margin-top: 10px; }
.vf__row > label, .vf__label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.vf__req, .vf__opt { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.vf__req { background: var(--pink); color: #fff; }
.vf__opt { background: #e9e9e9; color: #555; }
.vocf .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.vocf input[type="text"], .vocf input[type="email"], .vocf input[type="tel"], .vocf select, .vocf textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: #333;
}
.vocf textarea { min-height: 160px; resize: vertical; }
.vocf input:focus, .vocf select:focus, .vocf textarea:focus { outline: 2px solid var(--pink); outline-offset: 1px; border-color: transparent; }
.vocf .wpcf7-radio { display: flex; flex-direction: column; gap: 8px; }
.vocf .wpcf7-list-item { margin: 0; }
.vocf .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.vocf .wpcf7-acceptance { font-size: 15px; }
.vf__submit { margin-top: 28px; text-align: center; }
.vocf input[type="submit"] {
  min-width: 300px; height: 60px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--pink); color: #fff;
  font: inherit; font-size: 18px; font-weight: 700; letter-spacing: .04em; cursor: pointer; box-shadow: 0 4px 12px rgba(244, 71, 134, .3);
}
.vocf input[type="submit"]:hover { filter: brightness(1.05); }
.vocf input[type="submit"]:disabled { opacity: .5; cursor: default; }
.vocf .wpcf7-not-valid-tip { margin-top: 4px; font-size: 13px; color: #d93a5e; }
.vocf .wpcf7-response-output { margin: 20px 0 0 !important; padding: 12px 16px !important; border-radius: 8px; font-size: 14px; }
.vocf .wpcf7-spinner { display: block; margin: 12px auto 0; }
.vf__note { margin-top: 16px; font-size: 13px; color: #666; text-align: center; }
.vocf__back { margin-top: 28px; text-align: center; }
/* 本文に入れたボタン（ボタンブロック）を、LPのピンクのボタンにそろえる */
.vocf .wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 20px; }
.vocf .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 300px; min-height: 60px; padding: 0 32px;
  border: 0; border-radius: 999px; background: var(--pink); color: #fff !important;
  font-size: 18px; font-weight: 700; letter-spacing: .04em; text-decoration: none; box-shadow: 0 4px 12px rgba(244, 71, 134, .3);
}
.vocf .wp-block-button__link:hover { filter: brightness(1.05); }
.vocf .is-style-outline .wp-block-button__link { background: #fff; color: #333 !important; border: 2px solid #333; box-shadow: none; }
@media (max-width: 767px) {
  .vocf { padding: 32px 16px 56px; }
  .vocf__ttl { font-size: 24px; }
  .vocf__body { margin-top: 20px; padding: 24px 18px; font-size: 15px; }
  .vocf input[type="submit"] { width: 100%; min-width: 0; height: 56px; font-size: 17px; }
  .vocf .wp-block-button, .vocf .wp-block-button__link { width: 100%; min-width: 0; }
  .vocf .wp-block-button__link { min-height: 56px; font-size: 17px; }
}