/* =========================================================
   店舗内装プロ LP  -  V4
   v3.css（v2.css + v3追加分）をベースに複製。v3が引き継ぐセクション
   （SUPPORT/PRICE_CASES/WORKS/Q&A/VOICE/REASON/SERVICE/FLOW/ACCESS等）の
   ルールはそのまま残し、FV・DIFFERENCE関連のv3専用ルールのみ末尾で
   v4用に置き換える（v4制作指示書 2章・3章・5章）。
   v2.css / v3.css 本体は一切変更しない。
   ========================================================= */

:root {
  --red: #d8142c;
  --red-dark: #a5091c;
  --gold: #bfa15b;
  --gold-dark: #a98c46;
  --teal: #17b3c0;
  --dark: #2b2b2b;
  --text: #333333;
  --gray-bg: #ececec;
  --gray-line: #dcdcdc;
  --fc-bg: #1b1a17;
  --fc-card: #26241f;
  --max: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    'Noto Sans JP',
    -apple-system,
    BlinkMacSystemFont,
    'Hiragino Kaku Gothic ProN',
    'Meiryo',
    sans-serif;
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* space for sp fixed bar */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.container {
  width: 100%;
  height: auto;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
.container--narrow {
  max-width: 800px;
}

.section {
  padding: 50px 0;
}
.section--gray {
  background: var(--gray-bg);
}
.text--red {
  color: var(--red);
}

.sp-only {
  display: inline;
}
.pc-only {
  display: none;
}

/* v3全体: アンカーCTA(#works等)へのジャンプ先に小さな余白を確保 */
[id] {
  scroll-margin-top: 12px;
}

/* 【2026-09-02 敵対的レビュー P-3の修正に伴い発覚】
   共有の css/style.css は旧LP（sticky header 80px）向けに
   html{scroll-padding-top:96px} と #price-cases,#works,#voice{scroll-margin-top:96px} を持つ。
   v4のヘッダーは position:fixed ではないためどちらも不要で、しかも両方が効くと 96+96=192px の
   空白が飛び先の上に空く（実測: 375pxで #price-cases に飛ぶと見出しが画面の30%地点＝上に242px）。
   FV訴求3点を #price-cases / #difference / #works へのアンカーにした結果この経路が主導線になったので
   打ち消す。style.css は /v2/ も読むため一切触らず、v4のルート要素のクラスに限定してある。 */
html.lp-v4 {
  scroll-padding-top: 12px;
}
html.lp-v4 #price-cases,
html.lp-v4 #works,
html.lp-v4 #voice {
  scroll-margin-top: 12px;
}

/* スクリーンリーダー専用テキスト（FVの<h1>用。画像に焼き込み済みの主コピーを
   テキストとしても持たせるための非表示要素。視覚的な二重表示は避ける） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Section Titles ---------- */
.sec-ttl {
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  font-size: 24px;
  line-height: 1.0;
  margin-bottom: 32px;
}

.sec-ttl__en {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 12px;
}

.marker {
  color: var(--red);
  position: relative;
  padding-top: 8px;
}
.marker::before {
  content: '・・・';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--red);
  font-size: 1em;
  letter-spacing: 2px;
}
.accent {
  color: var(--red);
}

/* =========================================================
     HERO
     ========================================================= */
.hero {
  background: #f2efe9;
  position: relative;
  margin-bottom: 50px;
}
.hero__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.hero__visual img {
  width: 100%;
}
.hero__visual-frame {
  position: relative;
}
.hero__visual-link {
  display: block;
}
.hero__sim-badge {
  position: absolute;
  bottom: calc(16.2% + 14px);
  left: 10%;
  width: 80%;
  height: 17%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.hero__sim-badge:hover,
.hero__sim-badge:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.hero__sim-badge-left,
.hero__sim-badge-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  padding: 10px 12px;
  font-size: 3.6vw;
}
.hero__sim-badge-left {
  background: linear-gradient(180deg, #bc3437, #8f070a);
  color: #fff;
}
.hero__sim-badge-right {
  background: #fff;
  color: #a82023;
}
.hero__sim-badge-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero__sim-badge-shine::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 50%;
  height: 140%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: heroSimBadgeShine 3.6s ease-in-out infinite;
}
@keyframes heroSimBadgeShine {
  0% {
    left: -60%;
  }
  35% {
    left: 130%;
  }
  100% {
    left: 130%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sim-badge-shine::after {
    animation: none !important;
  }
}
.hero__cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 3vw;
  padding: 24px 0 0;
  aspect-ratio: 13 / 5;
}
.cta-btn {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.15s,
    opacity 0.15s;
  width: 80%;
  height: 14vw;
  margin: 0 auto;
}
.cta-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}
.cta-btn--gold {
  background: linear-gradient(180deg, #c9ac6b, #b2924e);
}
.cta-btn--red {
  background: linear-gradient(180deg, #bc3437, #8f070a);
}
.cta-btn__icon {
  width: 8%;
  filter: brightness(0) invert(1);
}
.cta-btn__mail {
  font-size: 28px;
}
.cta-btn__text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  letter-spacing: 0;
}
.cta-btn__text strong {
  font-size: 4.2vw;
  font-weight: 700;
}
.cta-btn__text small {
  font-size: 3vw;
  font-weight: 400;
  opacity: 0.9;
}
.cta-btn__arrow {
  font-size: 16px;
}

/* =========================================================
     WORKS
     ========================================================= */
.works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.works__head .sec-ttl {
  margin-bottom: 0;
}

.works__head .sec-ttl__en {
  text-align: left;
}
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar {
  height: 6px;
}
.carousel::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.works__wrap {
  position: relative;
}
.works__arrow {
  display: none;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gray-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--dark);
  cursor: pointer;
  z-index: 2;
}
.works__arrow:hover {
  background: var(--gray-bg);
}
.works__arrow[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.works__arrow--prev {
  left: -18px;
}
.works__arrow--next {
  right: -18px;
}

.work-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--gray-line);
}
.work-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.work-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card__body {
  padding: 12px 14px 16px;
}
.work-card__meta {
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 8px;
}
.work-card__cat {
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 1px 10px;
  font-size: 10px;
}
.work-card__ttl {
  font-size: 15px;
  font-weight: 700;
  margin: 6px 0 4px;
}
.work-card__txt {
  font-size: 12px;
  color: #888;
}

.more-link {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--dark);
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.more-link__icon {
  width: 20px;
  height: 20px;
}

/* =========================================================
     CTA BAND
     ========================================================= */
.cta-band {
  background: url('../img/v2/contact_bg_sp.jpg') center/cover no-repeat;
  position: relative;
}
.cta-band__overlay {
  background: rgba(20, 20, 20, 0.1);
  padding: 30px 20px;
  text-align: center;
  color: #fff;
}
.cta-band__lead {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
}
.cta-band__tel {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cta-band__tel span {
  font-size: 14px;
  margin-right: 6px;
  font-weight: 500;
}
.cta-band__time {
  font-size: 12px;
  margin-bottom: 14px;
  opacity: 0.9;
}
.cta-band__btn {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 12px 34px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.cta-band__btn:hover {
  background: var(--red-dark);
}

/* =========================================================
     SERVICE
     ========================================================= */
.service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--gray-line);
  border: 1px solid var(--gray-line);
}
.service-card {
  display: block;
  width: 100%;
  background: #fff;
  padding: 28px 22px;
  text-align: center;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.service-card:hover,
.service-card:focus-visible {
  background: var(--gray-bg);
}
.service-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.service-card__icon {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.service-card__icon img {
  max-height: 56px;
  width: auto;
}
.service-card__ttl {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.service-card__txt {
  font-size: 13px;
  color: #666;
  text-align: left;
}
.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-dark);
}
.service-card__more::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--gold-dark);
  border-right: 2px solid var(--gold-dark);
  transform: rotate(45deg);
}

/* =========================================================
     REASON
     ========================================================= */
.reason__list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.reason-item__img img {
  width: 100%;
}
.reason-item__img.img--left {
  transform: translateX(-20px);
}
.reason-item__img.img--right {
  transform: translateX(20px);
}
.reason-item__body {
  margin-top: 0;
}
.reason-item__num {
  margin-top: -20px;
  font-size: 96px;
  font-weight: 500;
  color: #d8d8d8;
  line-height: 1;
  position: relative;
  display: block;
  width: fit-content;
  font-family: 'Helvetica Neue', sans-serif;
}
.reason-item__num.num--right {
  padding-right: 20px;
  margin-left: auto;
}
.reason-item__num.num--left {
  margin-left: 20px;
}

.reason-item__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 2px;
  position: absolute;
  top: 50%;
  left: -2em;
  transform: translateY(-50%);
}
.reason-item__ttl {
  font-size: 19px;
  font-weight: 700;
  margin: 8px 0 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--dark);
  line-height: 1.5;
}
.reason-item__txt {
  font-size: 13px;
  color: #555;
  margin-bottom: 12px;
}

/* =========================================================
     DIFFERENCE
     ========================================================= */
.difference__table {
  text-align: center;
}
.difference__table img {
  margin: 0 auto;
  max-width: 100%;
}

/* =========================================================
     FLOW
     ========================================================= */
.flow__box {
  background: #fff;
  padding: 24px 20px;
}
.flow-step {
  display: flex;
  gap: 16px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--dark);
  position: relative;
}
.flow-step--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.flow-step::after {
  content: '';
  display: block;
  width: 20px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--dark);
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
}
.flow-step--last::after {
  display: none;
}
.flow-step__icon {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
}
.flow-step__icon img {
  width: 80px;
  height: 80px;
}
.flow-step__num {
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
  margin-right: 6px;
}
.flow-step__ttl {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.flow-step__txt {
  font-size: 13px;
  color: #555;
}

/* =========================================================
     VOICE
     ========================================================= */
.voice__wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice__track {
  flex: 1;
}
.voice-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: none;
}
.voice-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.voice-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-card__body {
  padding: 16px;
}
.voice-card__cat {
  font-size: 11px;
  color: #999;
}
.voice-card__ttl {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 10px;
}
.voice-card__txt {
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
}
.voice-card__person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
}
.voice-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
}

/* =========================================================
     FAQ
     ========================================================= */
.faq__list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid #d5d5d5;
}
.faq-item__q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 34px 18px 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-family: inherit;
  color: var(--text);
}
.faq-item__mark {
  color: var(--dark);
  font-weight: 700;
}
.faq-item__mark--a {
  color: var(--red);
}
.faq-item__toggle {
  position: absolute;
  right: 4px;
  top: 20px;
  width: 16px;
  height: 16px;
}
.faq-item__toggle::before,
.faq-item__toggle::after {
  content: '';
  position: absolute;
  background: #666;
  transition: transform 0.2s;
}
.faq-item__toggle::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}
.faq-item__toggle::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}
.faq-item.is-open .faq-item__toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-item__a {
  display: none;
  padding: 0 0 20px;
  font-size: 14px;
}
.faq-item.is-open .faq-item__a {
  display: block;
}
.faq-item__a p {
  display: flex;
  gap: 8px;
}
.faq-item__a-txt {
  color: #555;
  margin-top: 8px;
  padding-left: 24px;
  display: block !important;
}

/* =========================================================
     FAQ CTA (相見積もり大歓迎)
     ========================================================= */
.faq-cta {
  position: relative;
  background: linear-gradient(135deg, var(--fc-card) 0%, var(--fc-bg) 100%);
  padding: 48px 0;
  overflow: hidden;
}
.faq-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: faqCtaShine 5s ease-in-out infinite;
  pointer-events: none;
}
.faq-cta.will-animate {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.faq-cta.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.faq-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.faq-cta__headline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.faq-cta__headline > span {
  white-space: nowrap;
}
.faq-cta__sep {
  opacity: 0.5;
  font-weight: 500;
  margin: 0 2px;
}
.faq-cta__accent {
  display: inline-block;
  color: var(--gold);
  font-weight: 900;
  text-shadow: 0 0 10px rgba(191, 161, 91, 0.5);
  animation: faqCtaGlow 3s ease-in-out infinite;
}
@keyframes faqCtaGlow {
  0%, 85%, 100% { filter: brightness(1); }
  92% { filter: brightness(1.6) drop-shadow(0 0 6px rgba(191, 161, 91, 0.8)); }
}
@keyframes faqCtaShine {
  0% { left: -60%; }
  40% { left: 130%; }
  100% { left: 130%; }
}
.faq-cta__btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}
.faq-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s, filter 0.15s;
  animation: faqCtaPulseGlow 2.4s ease-in-out infinite;
}
.faq-cta__btn--form {
  animation-delay: 1.2s;
}
@keyframes faqCtaPulseGlow {
  0%, 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15), 0 0 0 6px rgba(255, 255, 255, 0.08); }
}
.faq-cta__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.faq-cta__btn--tel {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.faq-cta__btn--form {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
}
.faq-cta__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.faq-cta__btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.faq-cta__btn--form .faq-cta__btn-text {
  align-items: center;
}
.faq-cta__btn-num {
  font-size: 20px;
  font-weight: 900;
  font-feature-settings: 'tnum' 1;
}
.faq-cta__btn-label {
  font-size: 16px;
  font-weight: 900;
}
.faq-cta__btn-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .faq-cta.will-animate {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .faq-cta::before,
  .faq-cta__accent,
  .faq-cta__btn {
    animation: none !important;
  }
  .faq-cta__btn {
    transition: none;
  }
}

/* =========================================================
     ACCESS
     ========================================================= */
.access__inner {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.access__map {
  background: #d5d5d5;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 18px;
}
.access__map iframe {
  width: 100%;
  height: 100%;
}
.access__logo {
  margin-bottom: 24px;
}
.access__logo img {
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
}
.access__list {
  border-top: 1px solid #e0e0e0;
}
.access__row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
  font-weight: 500;
}
.access__row dt {
  flex: 0 0 80px;
}
.access__row dd {
  flex: 1;
}
.access__row a {
  color: var(--dark);
}
.access__more {
  text-align: center;
  margin-top: 24px;
}

/* =========================================================
     CONTACT TEL
     ========================================================= */
.contact-tel {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 32px;
}
.contact-tel__ttl {
  font-size: 18px;
  font-weight: 700;
  padding-block: 16px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 16px;
}
.contact-tel__num {
  font-size: 30px;
  font-weight: 700;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.contact-tel__icon {
  width: 26px;
}
.contact-tel__label {
  font-size: 15px;
  color: var(--dark);
}
.contact-tel__time {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* =========================================================
     CONTACT MAIL
     ========================================================= */
.contact-mail {
  padding-top: 0;
}
.contact-mail__ttl {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding-block: 16px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 24px;
}
.contact-mail__note {
  font-size: 12px;
  color: #666;
  margin-bottom: 24px;
}
.req {
  color: var(--red);
}
.form__group {
  margin-bottom: 18px;
}
.form__group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.form__group input,
.form__group textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  font-size: 17px;
  font-family: inherit;
  background: #fafafa;
  margin-top: 6px;
}
.form__group input:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
}
.form__group textarea {
  resize: vertical;
}
.form__agree {
  margin: 22px 0;
}
.form__agree input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  cursor: pointer;
}
.form__agree-txt {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}
.form__agree-txt a {
  color: var(--red);
  text-decoration: underline;
}
.form__submit {
  text-align: center;
  margin-top: 8px;
}
.contact-mail input[type='submit'] {
  background-color: var(--red);
  background-image: url('../img/v2/arrow.svg');
  background-size: 8px;
  background-position: right 32px center;
  background-repeat: no-repeat;
  color: #fff;
  border: none;
  border-radius: 28px;
  padding: 0 60px;
  font-size: 17px;
  font-weight: 700;
  width: 80%;
  height: 56px;
  line-height: 56px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  position: relative;
}
.contact-mail input[type='submit']:hover {
  background-color: var(--red-dark);
}

/* =========================================================
     SP FIXED BAR
     ========================================================= */
.sp-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  background-color: #fff;
  padding: 8px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}
.sp-bar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  font-size: 3.8vw;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 4px;
}
.sp-bar__btn img {
  width: 12%;
  margin-inline: 2%;
}
.sp-bar__btn--tel {
  background: var(--gray-bg);
  color: var(--dark);
}
.sp-bar__btn--mail {
  background: var(--red);
  color: #fff;
}
.sp-bar__btn--mail img {
  filter: brightness(0) invert(1);
}

/* =========================================================
     SERVICE MODAL
     ========================================================= */
.service-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.service-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 8, 0.72);
}
.service-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.service-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.service-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}
.service-modal__head {
  padding: 30px 28px 24px;
  background: linear-gradient(135deg, var(--fc-card) 0%, var(--fc-bg) 100%);
  border-radius: 14px 14px 0 0;
  text-align: center;
}
.service-modal__icon {
  width: 96px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-modal__icon img {
  max-width: 80px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.service-modal__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 6px;
}
.service-modal__title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}
.service-modal__body {
  padding: 24px 28px 28px;
}
.service-modal__lead {
  font-size: 14.5px;
  line-height: 1.8;
  margin-bottom: 18px;
}
.service-modal__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-modal__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.service-modal__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.service-modal__note {
  font-size: 12.5px;
  color: #888;
  border-top: 1px dashed var(--gray-line);
  padding-top: 14px;
  margin-bottom: 20px;
}
.service-modal__works-link {
  display: block;
  margin: -4px 0 20px;
}
.service-modal__works-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 9px;
}
.service-modal__works-thumbs img {
  width: 33.333%;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  transition: opacity 0.15s, transform 0.15s;
}
.service-modal__works-link:hover .service-modal__works-thumbs img {
  opacity: 0.82;
}
.service-modal__works-caption {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dark);
}
.service-modal__works-caption span {
  font-size: 16px;
  line-height: 1;
}
.service-modal__actions {
  display: flex;
  flex-direction: column;
}
.service-modal__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  padding: 11px 14px;
  border-radius: 8px;
}
.service-modal__cta:hover {
  background: var(--red-dark);
}
.service-modal__cta-topic {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.85;
}
.service-modal__cta-action {
  font-size: 15px;
  font-weight: 700;
}

/* =========================================================
     CASE MODAL（WORKSカードクリックで開く事例スライド）
     ========================================================= */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.case-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 8, 0.72);
}
.case-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.case-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}
.case-modal__close:hover {
  background: rgba(0, 0, 0, 0.55);
}
.case-modal__slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #000;
}
.case-modal__slides {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
}
.case-modal__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.case-modal__arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}
.case-modal__arrow--prev {
  left: 10px;
}
.case-modal__arrow--next {
  right: 10px;
}
.case-modal__dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.case-modal__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.case-modal__dot.is-active {
  background: #fff;
}
.case-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 44px 18px 24px;
  border-bottom: 1px solid var(--gray-line);
}
.case-modal__head-left {
  min-width: 0;
}
.case-modal__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
  margin-bottom: 6px;
}
.case-modal__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
}
.case-modal__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
.case-modal__meta-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12.5px;
  white-space: nowrap;
}
.case-modal__meta-row dt {
  color: #888;
  font-weight: 500;
}
.case-modal__meta-row dd {
  color: var(--text);
  font-weight: 700;
}
.case-modal__actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 18px 24px 24px;
}
.case-modal__cta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  color: #fff;
  padding: 11px 14px;
  border-radius: 8px;
}
.case-modal__cta--tel {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.case-modal__cta--form {
  background: linear-gradient(180deg, var(--red), var(--red-dark));
}
.case-modal__cta:hover {
  opacity: 0.9;
}
.case-modal__cta-label {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.9;
}
.case-modal__cta-sub {
  font-size: 15px;
  font-weight: 700;
}

/* =========================================================
     TABLET  (>= 768px)
     ========================================================= */
@media (min-width: 768px) {
  body {
    font-size: 16px;
    padding-bottom: 0;
  }

  .section {
    padding: 70px 0;
  }
  .sp-only {
    display: none;
  }
  .pc-only {
    display: inline;
  }

  .sec-ttl {
    font-size: 30px;
    margin-bottom: 44px;
  }
  .sec-ttl--inline {
    text-align: left;
    display: flex;
    align-items: baseline;
    flex-direction: row-reverse;
    gap: 10px;
    width: fit-content;
  }
  .sec-ttl--inline .sec-ttl__en {
    margin-bottom: 0;
  }

  /* hero */
  .hero {
    background: url('images/main_bg.jpg') center/cover no-repeat;
    margin-bottom: 0;
  }
  .hero__inner {
    position: relative;
  }
  .hero__visual img {
    width: 100%;
    height: 409px;
    object-fit: cover;
  }
  .hero__sim-badge {
    flex-direction: row;
    bottom: 90px;
    left: calc(50% - 364px);
    width: 395px;
    height: 68px;
  }
  .hero__sim-badge-left,
  .hero__sim-badge-right {
    padding: 11px 12px;
    font-size: 13px;
  }
  .hero__cta {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 20px 20px;
    aspect-ratio: unset;
    width: 768px;
    margin: 0 auto;
  }
  .cta-btn {
    flex: 0 1 26%;
    height: 40px;
    margin-inline: 0;
  }
  .cta-btn__text strong {
    font-size: 17px;
  }
  .cta-btn__text small {
    font-size: 11px;
  }

  /* works */
  .work-card {
    flex: 0 0 240px;
  }
  .works__wrap--scrollable .works__arrow {
    display: flex;
  }
  /* 無効化時はカードとの重なり(pointer-events:noneによるクリック素通り)を防ぐため完全に非表示にする */
  .works__wrap--scrollable .works__arrow[disabled] {
    display: none;
  }

  /* service */
  .service__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-card {
    padding: 34px 26px;
  }

  /* reason */
  .reason__list {
    gap: 70px;
  }
  .reason-item {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .reason-item__img {
    flex: 0 0 48%;
    overflow: hidden;
  }
  .reason-item__img img {
    height: 320px;
    object-fit: cover;
  }
  .reason-item__body {
    flex: 1;
    margin-top: 0;
  }
  .reason-item--reverse {
    flex-direction: row-reverse;
  }
  .reason-item--reverse .reason-item__body {
    text-align: left;
  }
  .reason-item__num {
    font-size: 80px;
  }
  .reason-item__ttl {
    font-size: 22px;
  }
  .reason-item__txt {
    font-size: 14px;
  }

  /* flow */
  .flow__box {
    padding: 40px 50px;
  }
  .flow-step {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .flow-step::after {
    left: calc(50% - 10px);
  }

  /* voice */
  .voice-card {
    flex: 0 0 calc((100% - 48px) / 3);
  }
  .voice__wrap {
    gap: 16px;
  }

  /* faq */
  .faq__list {
    width: 728px;
    margin: 0 auto;
  }
  .faq-item__q {
    font-size: 16px;
  }
  .faq-item__a p {
    font-size: 16px;
  }

  /* faq cta */
  .faq-cta {
    padding: 56px 0;
  }
  .faq-cta__headline {
    font-size: 18px;
    margin-bottom: 28px;
  }
  .faq-cta__btns {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .faq-cta__btn {
    flex: 0 1 320px;
  }

  /* access */
  .access__inner {
    flex-direction: row;
    gap: 40px;
  }
  .access__map {
    flex: 0 0 50%;
    height: 300px;
  }
  .access__info {
    flex: 1;
  }

  /* contact tel */
  .contact-tel__num {
    font-size: 40px;
  }

  /* sp bar hidden on pc */
  .sp-bar {
    display: none;
  }

  /* case modal */
  .case-modal__panel {
    max-width: 560px;
  }
  .case-modal__slider {
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
     DESKTOP  (>= 960px)
     ========================================================= */
@media (min-width: 960px) {
  .container {
    padding: 0 30px;
  }
  .work-card {
    flex: 0 0 260px;
  }
  .work-card__ttl {
    font-size: 16px;
  }
  .works__arrow--prev {
    left: -20px;
  }
  .works__arrow--next {
    right: -20px;
  }

  .hero__visual img {
    height: 505px;
  }
  .hero__sim-badge {
    left: calc(50% - 450px);
    width: 448px;
    height: 76px;
    bottom: 118px;
  }
  .hero__sim-badge-left,
  .hero__sim-badge-right {
    padding: 14px 12px;
    font-size: 17px;
  }
  .hero__cta {
    width: 960px;
    padding: 20px 30px 28px;
    justify-content: flex-start;
    gap: 16px;
  }
  .hero__cta .cta-btn {
    flex: 0 1 24%;
    height: 56px;
  }

  /* cta band */
  .cta-band {
    background-image: url('../img/v2/contact_bg.jpg');
  }
  .cta-band__overlay {
    padding: 34px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
  }
  .cta-band__lead {
    font-size: 26px;
    margin-bottom: 0;
    text-align: left;
  }
  .cta-band__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cta-band__tel {
    font-size: 32px;
  }

  .reason-item__img {
    flex: 0 0 60%;
    overflow: hidden;
  }
  .reason-item__img img {
    height: auto;
    object-fit: contain;
  }
}

@media (min-width: 1200px) {
  .hero__visual img {
    height: 584px;
  }
  .hero__sim-badge {
    left: calc(50% - 520px);
    width: 515px;
    height: 86px;
    bottom: 134px;
  }
  .hero__sim-badge-left,
  .hero__sim-badge-right {
    padding: 16px 14px;
    font-size: 19px;
  }
  .hero__cta {
    width: 1100px;
    padding: 24px 30px 40px;
  }
}


/* =========================================================================
   ここから v3 追加分（v3制作指示書 2章の並べ替え・新設・圧縮に対応）
   ========================================================================= */

/* FV関連のv3専用ルール（.hero__compare* / .v3-fv-jump-links*）はv4では削除。
   v4のFVは.v4-hero*として全面差し替え（本ファイル末尾「v4追加分」を参照）。
   v3.1送りだったDIFFERENCEの画像+3行要約(.difference__summary)も同様に
   v4-difference*のテキスト比較表に置き換えるため削除。 */

/* ---------- 融資・物件支援（新設 #startup-support） ---------- */
.startup-support__lead {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 24px;
}
.startup-support__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-line);
  border: 1px solid var(--gray-line);
}
.startup-support__grid .service-card {
  padding: 20px 14px;
}
.startup-support__grid .service-card__icon {
  height: 44px;
  margin-bottom: 10px;
}
.startup-support__grid .service-card__icon img {
  max-height: 44px;
}
.startup-support__grid .service-card__ttl {
  font-size: 14px;
  margin-bottom: 6px;
}
.startup-support__grid .service-card__txt {
  font-size: 12px;
}

/* ---------- 費用の実数（新設 #price-cases） ---------- */
/* 【2026-09-02 P-4】相場レンジ。白背景のセクション上で埋もれないよう薄い地と枠を持たせる。 */
.v3-price-cases__range {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  background: var(--gray-bg);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.v3-price-cases__range strong {
  font-weight: 900;
  color: var(--red);
}
.v3-price-cases__lead {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  text-align: center;
}
.v3-price-cases__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v3-price-cases__table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}
.v3-price-cases__table caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}
.v3-price-cases__table th,
.v3-price-cases__table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--gray-line);
  text-align: center;
  vertical-align: middle;
}
.v3-price-cases__table thead th {
  background: var(--dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.v3-price-cases__table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}
.v3-price-cases__table tbody th a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.v3-price-cases__before {
  color: #888;
  text-decoration: line-through;
  white-space: nowrap;
}
.v3-price-cases__after {
  color: var(--red);
  font-weight: 700;
  white-space: nowrap;
}
.v3-price-cases__table tbody tr:nth-child(even) {
  background: #fafafa;
}
/* 打消し表示・出典: 本文と同じフォントサイズ・同じ文字色で、金額表の直下に配置 */
.v3-price-cases__disclaimer {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
}
.v3-price-cases__source {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* ---------- 各セクション末尾のアンカーCTA（5本） ---------- */
.section-cta {
  text-align: center;
  margin-top: 36px;
}
.section-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}
.section-cta__btn:hover {
  background: var(--red-dark);
}

/* ---------- REASON圧縮版 ---------- */
.reason--compact .reason__list {
  gap: 28px;
}
.reason--compact .reason-item__ttl {
  font-size: 17px;
  margin: 6px 0 10px;
  padding-bottom: 10px;
}
.reason--compact .reason-item__txt {
  font-size: 13px;
  margin-bottom: 0;
}
.reason--compact .reason-item__num {
  font-size: 72px;
  margin-top: -12px;
}

/* ---------- SERVICE圧縮版（残り4項目・2列グリッド） ---------- */
.service__grid--compact {
  grid-template-columns: repeat(2, 1fr);
}
.service__grid--compact .service-card {
  padding: 18px 14px;
}
.service__grid--compact .service-card__icon {
  height: 40px;
  margin-bottom: 8px;
}
.service__grid--compact .service-card__icon img {
  max-height: 40px;
}
.service__grid--compact .service-card__ttl {
  font-size: 13px;
  margin-bottom: 4px;
}
.service__grid--compact .service-card__txt {
  font-size: 11.5px;
}
.service__grid--compact .service-card__more {
  margin-top: 8px;
}

/* ---------- FLOW圧縮版（横並び1行×6・矢印/イラスト廃止） ---------- */
.flow-compact__list {
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  overflow: hidden;
}
.flow-compact__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-line);
}
.flow-compact__step:last-child {
  border-bottom: none;
}
.flow-compact__badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-compact__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.flow-compact__ttl {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.flow-compact__txt {
  font-size: 12px;
  color: #666;
}

/* ---------- 任意項目バッジ（v3フォームの店舗名/相談内容） ---------- */
.opt {
  display: inline-block;
  color: #888;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0 6px;
  margin-left: 4px;
  vertical-align: middle;
}
.form__group--optional label {
  font-weight: 500;
}

/* ---------- TABLET / DESKTOP ---------- */
@media (min-width: 768px) {
  .startup-support__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .startup-support__grid .service-card {
    padding: 28px 24px;
  }
  .startup-support__grid .service-card__ttl {
    font-size: 16px;
  }
  .startup-support__grid .service-card__txt {
    font-size: 13px;
  }

  .v3-price-cases__table {
    font-size: 15px;
  }
  .v3-price-cases__table th,
  .v3-price-cases__table td {
    padding: 16px 14px;
  }

  .service__grid--compact {
    grid-template-columns: repeat(4, 1fr);
  }

  .flow-compact__step {
    padding: 16px 20px;
  }
  .flow-compact__ttl {
    font-size: 16px;
  }
  .flow-compact__txt {
    font-size: 13px;
  }
}

/* =========================================================================
   ここから v4 追加分（v4制作指示書 3章・4章・5章・6章に対応）
   ========================================================================= */

/* ---------- FV（cabaret-club型を参照実装として新規実装。3章） ---------- */
.v4-hero {
  position: relative;
  height: 570px;
  min-height: 570px;
  max-height: 570px;
  overflow: hidden;
  display: grid;
  background: #0b0705;
  color: #fff;
}
/* 【2026-08-28 実機診断で発覚・修正】.v4-hero__bg-imgをgrid-area:1/1のグリッドアイテムとして
   stretchさせる方式は、PC幅で img が 1265×1687px まで膨張しheroからはみ出す実害があった
   （gridのstretchが常に効くとは限らないことが実機検証で判明。詳細は
   reports/2026-08-28_allmake_v4-FV背景画像の調整指示.md）。
   position:absolute + inset:0 による直接指定に切り替え、heroの実サイズへ強制的に
   一致させる方式へ変更した（実機でPC幅 1265×1687→1265×570に一致することを確認済み）。 */
.v4-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* <picture>はdisplay:contentsのまま維持（レイアウトツリーへの影響を消しておくため）。
   position:absoluteの containing block 探索は position 指定のある祖先まで遡るので、
   <picture>のdisplay値そのものはもう配置に影響しない。 */
.v4-hero__bg picture {
  display: contents;
}
.v4-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  /* Ken Burns: 表示中じわっとズームインし続ける（写真に動きと迫力を出す）。
     ズームは.v4-hero__bg側のoverflow:hiddenでFVの570px枠からはみ出さない。
     元がスマホ縦長・4:3横長など様々な事例写真をobject-fit:coverで570px枠に
     合わせている時点で既にかなりトリミングされているため、ズーム幅は控えめにする
     （1.05→1.16だと「何の写真か分からない」ほど寄ってしまうとユーザー指摘があり縮小）。 */
  transform: scale(1);
  transform-origin: center;
  transition: opacity 1.4s ease, transform 6.5s ease-out;
}
.v4-hero__bg-img.is-active {
  opacity: 1;
  transform: scale(1.06);
}
/* 上は写真をそのまま見せ、テキストが乗る下側だけ暗くするグラデーション。
   写真の明暗によらず下側の文字コントラストを確保しつつ、写真自体の見栄えを殺さない
   （旧: 全面一律の濃いオーバーレイだと明るい写真が真っ黒に沈んでいた。ユーザー指摘で変更）。
   スライドごとに濃度は変えない（3-4 #6の「固定」はグラデーションの形自体を指す）。 */
.v4-hero__scrim {
  /* 【2026-09-02 敵対的レビュー P-1で発覚・修正】
     このscrimは中身のない<span>なので display:inline のままでは面積0になり、
     グラデーションが1pxも描画されない。さらに親 .v4-hero__bg は 2026-08-28 の修正で
     display:grid をやめて position:absolute になっており、grid-area 自体が既に失効していた。
     実測: scrimの矩形は 0×0px。背景写真をcanvasに描いて帯ごとの最悪コントラストを測ると
     H1・サブ見出しの帯は白文字に対し gym 1.04/1.28 : sauna 1.00/1.01 : club 1.00/1.02 で、
     3スライドとも「白文字と見分けがつかない画素」を含んでいた（設計どおりscrimが効けば5.60:1）。
     position:absolute + inset:0 で面積を親に一致させる。
     ADR 0035 決定10「背景に固定のダークオーバーレイを敷く（明るい業種写真に切り替わった際の
     白文字の可読性確保）」の実装条件そのもの。 */
  position: absolute;
  inset: 0;
  /* 【2026-09-02 敵対的レビュー P-1（続き）】ストップを引き直した。
     scrimを描画させた（上記）だけでは足りなかった。旧ストップは 32%まで 0.05→0.10 と
     ほぼ透明で、hero570pxに対する各要素の実測位置は バッジ13〜19% / H1 20.5〜33.5% /
     サブ見出し35.3〜42.6% / 訴求3点44〜76% / CTA 77〜88%。つまり
     **素のテキスト（H1・サブ見出し）が最も薄く、不透明カードとCTAで既に守られている下半分が濃い**
     という逆配分になっていた。実測濃度は H1帯 0.08→0.12・サブ見出し帯 0.15→0.27 で、
     ADR 0041 が前提に置いた表（H1 0.18→0.52 / サブ見出し 0.56→0.63）とは2〜4倍ずれていた
     （同ADRの濃度表は旧ストップからの計算値ですらなく、実測でもない）。
     結果、scrim描画後も 3:1未満の画素が sauna のH1帯で10.9%残っていた。
     下のストップは ADR 0041 が意図した濃度プロファイルを実際に満たすように置き直したもの。
     写真が効く最上部（0〜14%＝gymのLEDライン・clubのシャンデリアの位置）は 0.05→0.10 のまま
     据え置き、ランプの立ち上がりだけを H1 の直前へ前倒ししている。 */
  background: linear-gradient(
    180deg,
    rgba(4, 3, 2, 0.05) 0%,
    rgba(4, 3, 2, 0.1) 14%,
    rgba(4, 3, 2, 0.16) 20%,
    rgba(4, 3, 2, 0.52) 34%,
    rgba(4, 3, 2, 0.63) 43%,
    rgba(4, 3, 2, 0.72) 58%,
    rgba(4, 3, 2, 0.86) 80%,
    rgba(4, 3, 2, 0.92) 100%
  );
  pointer-events: none;
}
/* FV内のテキスト・リンク・ボタンは position:static のまま(通常フロー)。
   背景レイヤーとの重ね合わせは grid-area の例外のみで実現し、absoluteは使わない（3-2 #10） */
.v4-hero__inner {
  grid-area: 1 / 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 20px 22px;
}
.v4-hero__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  /* 明るい写真でも金文字が沈まないよう、半透明ではなくほぼ不透明な地を敷く */
  background: rgba(18, 13, 7, 0.85);
  border: 1px solid #f0dd93;
  color: #f0dd93;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.v4-hero__title {
  font-size: clamp(24px, 7.6vw, 32px);
  line-height: 1.3;
  font-weight: 900;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.v4-hero__title .v4-hero__accent {
  color: #f0dd93;
}
/* 【2026-08-31 docs/adr/0038続き】サブ見出し新設。価格訴求(実問い合わせ・広告CVR・競合調査の
   3データが一致して支持)をH1直下で言い切る。文字量が多いH1より視認性を保つため少し小さく・
   細めのウェイトにする。 */
.v4-hero__subtitle {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* 【2026-09-02 grillingで確定・docs/adr/0040】訴求3点は不透明カード＋2段テキスト。
   経緯: ピル型チップ（11.5px）→ 板なしの素テキスト（12.5px/500）と試したが、後者はFV内で唯一
   「小さい・細い・背景の板なし」の組み合わせになり、背景写真の上で読めなかった。
   この位置（heroの66〜78%）のscrimは既に0.64〜0.82あり暗い側なので、原因はscrimではなく字の
   細さ・小ささだった。逆に言えばscrimで写真が8割方隠れている帯なので、ここに板を敷いても
   写真の見え方はほとんど損なわない（写真が効いているのは上半分＝scrim 0.05〜0.35の領域）。
   参照実装 /cabaret-club/ と同じ「不透明カード＋前置き/主張の2段」に揃えてある。
   塗り・枠の値は .v4-hero__badge とほぼ同値（差は3/255）で、FV内の質感は揃う。 */
.v4-hero__points {
  display: flex;
  /* モバイルは縦積み・全幅（カード335px）。PCは横並び3枚（下の768pxブロック） */
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
/* 【2026-09-02 P-3/P-6】<li>は器に徹し、カードの実体は中の<a>。こうすることで
   カード全面（335×58px）がタップ領域になる。a{color:inherit;text-decoration:none} が
   既に効いているので、リンク化しても色・下線は変わらない。 */
.v4-hero__point-item {
  display: flex;
}
.v4-hero__point {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  background: rgba(21, 16, 11, 0.85);
  border: 1px solid rgba(240, 221, 147, 0.55);
  border-radius: 8px;
  /* 右は矢印のぶん広く取る（下の ::after は position:absolute なのでカード幅には効かない） */
  padding: 10px 32px 10px 14px;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* 【2026-09-02】リンク化しただけでは「押せる感じがしない」というユーザー指摘への対応。
   ラベル右に矢印を置き、微小なループで可動性を示す。

   ADR 0041 決定3 は「アイコンは入れない」としており、その根拠は
   「PCの1枚あたりテキスト幅185px（カード213px − padding 28px）に対し3枚目が181px必要で、
   アイコン20px＋隙間8pxを足すと157pxとなり2px足りず折れる」だった。
   これは訴求3点が `flex: 1 1 0`（等幅）だった時点の計算で、同ADR 決定6 で `flex: 1 1 auto` に
   変えた現行レイアウトには当てはまらない。768pxでの実測は
   カード幅 187 / 193 / 261px・実テキスト幅 107 / 113 / 181px で、**各カードに横余り50px**、
   行全体では149px余っている。矢印11px＋余白18pxを足しても3枚目は折れない（4幅で実測確認）。
   なお決定3が却下したのは「左に置く20pxのアイコン」であり、
   「押せることを示す右の矢印」は当時の検討対象に入っていない。 */
.v4-hero__point::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #f0dd93;
  /* 【2026-09-03 docs/adr/0048 決定7】アニメーションは主CTA(.v4-hero__cta-main)だけに寄せた。
     主従を決めた以上、動きも主に集める。FV内で動くものが4つ並ぶと主が埋もれる。
     矢印そのものは残すので「押せる」ことは伝わる。 */
}
@keyframes v4-point-nudge {
  0%,
  55%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(5px);
  }
}
/* 押した瞬間の手応え。タッチには hover が無いので :active を主、hover は hover 可能な環境のみ */
.v4-hero__point:active {
  background: rgba(42, 33, 21, 0.95);
  border-color: rgba(240, 221, 147, 0.95);
}
@media (hover: hover) {
  .v4-hero__point:hover {
    background: rgba(42, 33, 21, 0.95);
    border-color: rgba(240, 221, 147, 0.95);
  }
  .v4-hero__point:hover::after {
    animation: none;
    transform: translateX(5px);
  }
}
/* 実績バッジも #works へのリンクなので同じ手がかりを与える。
   ただしFV内で動くものを4つに増やさないため、こちらは静止の矢印にする。 */
.v4-hero__badge {
  position: relative;
  padding-right: 26px;
}
.v4-hero__badge::after {
  content: "→";
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 10.5px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .v4-hero__cta-main::after {
    animation: none;
  }
}
/* 2段にしたのは可読性だけでなく幅の都合でもある。「相見積もり歓迎・概算はその場で」のような
   「・」で繋いだ複合文は、PCの1枚213px（テキスト幅185px）に1行では収まらないが、
   前置きと主張に割ると両方収まる。nowrapは3点とも実測で185px以内に収まることを確認済み。 */
.v4-hero__point-sub {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.v4-hero__point-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  white-space: nowrap;
}
/* 【2026-09-03 grillingで確定・docs/adr/0048】主＝費用シミュレーター(全幅・2段)、
   副＝電話/メール(2分割・1行)。375pxでFVは content 507px/570px で余白63pxしかなく、
   3案を実測して「主=全幅2段＋副=2分割1行(+30px)」を採った(縦積みは+118pxで55px超過、
   副をテキストリンクにする案は今回の指摘そのものを電話とフォームに移すだけ)。 */
.v4-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
/* 主CTA。色は金 #f0dd93。5案を実レンダリングして比較した。金はFVのバッジ・訴求カードの枠と
   地続きで馴染み、かつ「赤=フォーム」というページ全体の規則(固定バー・セクションCTA・
   セグメントCTAで計10箇所以上)を壊さない。3つとも暗地+金枠にする案は訴求3点と同化して
   4枚目のカードにしか見えず却下した。 */
.v4-hero__cta-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f0dd93;
  color: #141210;
  border-radius: 8px;
  padding: 12px 34px 12px 16px;
  transition: background-color 0.2s ease;
}
.v4-hero__cta-main-sub {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.78;
}
.v4-hero__cta-main-lead {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}
.v4-hero__cta-main::after {
  content: "→";
  position: absolute;
  right: 13px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  animation: v4-point-nudge 1.8s ease-in-out infinite;
}
.v4-hero__cta-main:active {
  background: #e3cd7c;
}
@media (hover: hover) {
  .v4-hero__cta-main:hover {
    background: #e3cd7c;
  }
  .v4-hero__cta-main:hover::after {
    animation: none;
    transform: translateX(5px);
  }
}
/* 副CTA。赤が主を食わないよう、色ではなく面積(主=全幅)とウェイト(主張15px/900 vs 副13px/700)で
   主を勝たせる。塗りつぶしのボタンなので矢印は付けない(訴求3点と違い、板と誤認される形ではない)。 */
.v4-hero__cta-row {
  display: flex;
  gap: 8px;
}
.v4-hero__cta-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 10px 6px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.3;
  transition: filter 0.2s ease;
}
.v4-hero__cta-btn-label {
  font-size: 13px;
  font-weight: 700;
}
.v4-hero__cta-btn-note {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.8;
}
.v4-hero__cta-btn--tel {
  background: #fff;
  color: #141210;
}
.v4-hero__cta-btn--form {
  background: var(--red);
  color: #fff;
}
.v4-hero__cta-btn:active {
  filter: brightness(0.92);
}
@media (hover: hover) {
  .v4-hero__cta-btn:hover {
    filter: brightness(0.92);
  }
}
/* 375px未満の調整。320pxでの実測(折り返さない状態の実幅)は
   主張「あなたの店の相場がその場で出る」15px=243px に対し使える幅230px、
   副ラベル「メールで見積を依頼」13px=128px に対し使える幅124px で、どちらも折り返して
   FVの余白が6pxまで縮んでいた。文言は docs/adr/0048 決定6 で確定しているので字送りで吸収する。
   調整後: 主張13.5px=221px(使える幅234px) / 副ラベル12px=119px(使える幅124px)。 */
@media (max-width: 374px) {
  .v4-hero__cta-main {
    padding-right: 30px;
  }
  .v4-hero__cta-main::after {
    right: 12px;
  }
  .v4-hero__cta-main-lead {
    font-size: 13.5px;
  }
  .v4-hero__cta-btn-label {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .v4-hero__inner {
    /* width:100% は必須。.v4-hero__inner は .v4-hero（display:grid）のグリッドアイテムだが、
       margin:0 auto を持つ要素には justify-items の stretch が適用されないため、
       width を指定しないと幅が「中身の max-content」になる。実際、訴求3点をカード化して
       中身が短くなった際に inner が 720px→571px に縮み、カード幅が想定213pxではなく164pxに
       なってテキストがカードからはみ出す不具合が出た（2026-09-02）。 */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 32px 28px;
    gap: 16px;
  }
  .v4-hero__title {
    font-size: clamp(32px, 3.8vw, 46px);
  }
  .v4-hero__subtitle {
    font-size: 18px;
  }
  /* PCは横並び3枚。縦積みのままだと訴求3点だけで189px使い、hero 570pxに対する残り余白が
     20pxしかなくなる（フォントのレンダリング差や将来のコピー追加ではみ出す水準）。
     横並びなら58pxで済み、余白は151px残る。 */
  .v4-hero__points {
    flex-direction: row;
  }
  /* basisは0ではなくauto。3枚は文字数が違い（主張の実測幅は98/86/181px）、等幅にすると
     3枚目の「自社施工100%・全国対応」だけがカードからはみ出す。autoなら中身の量に応じて
     3枚目が自然に広く取る（cabaret-clubのPCレイアウトと同じ考え方）。
     min-width:0 は付けない。nowrapの下で min-width:auto（＝min-content）が
     テキスト幅を下回る縮小を防いでくれるため。 */
  /* 【2026-09-02 P-3/P-6】アンカー化で<li>が1階層増えたため、PCで横幅を分け合う主体は
     <li>（.v4-hero__point-item）側になる。basisをautoにする理由・min-width:0を付けない理由は
     上のコメントのとおりで、値は据え置き。 */
  .v4-hero__point-item {
    flex: 1 1 auto;
  }
  .v4-hero__point {
    flex: 1 1 auto;
  }
  .v4-hero__cta {
    max-width: 440px;
  }
  .v4-hero__cta-main-lead {
    font-size: 17px;
  }
  .v4-hero__cta-btn {
    padding: 12px 10px;
  }
  .v4-hero__cta-btn-label {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-hero__bg-img {
    transition: none;
    transform: none;
  }
}

/* ---------- セグメント分岐タブ（4章） ---------- */
.v4-seg {
  padding: 26px 0;
  background: #fdf8ee;
  border-bottom: 1px solid var(--gray-line);
}
.v4-seg__lead {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 14px;
}
.v4-seg__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 0;
}
.v4-seg__tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--gray-line);
  border-bottom: none;
  background: #efe7d6;
  color: #8a8070;
}
.v4-seg__tab.is-active {
  background: #fff;
  color: var(--red);
  border-color: var(--red);
}
:root {
  /* 320px幅で3パネルの実高さを実測し、その最大値（複数店舗・法人タブ 455.69px）に
     安全マージンを足した値（4-2-1）。実測方法: .v4-segのcontainerのmax-widthを
     一時的に固定し、min-height無効化＋全パネル表示状態でgetBoundingClientRect().height
     を計測（本文フォントは固定pxのみでvwを使わないため、コンテナ幅の固定で
     実ビューポート幅と同じ折り返しが再現できる）。 */
  --v4-seg-panel-h: 468px;
}
@media (min-width: 360px) {
  :root {
    /* 360px幅での実測最大値 413.19px + マージン */
    --v4-seg-panel-h: 428px;
  }
}
@media (min-width: 768px) {
  :root {
    /* 768px幅相当（コンテナ幅720px・padding 22px/32px）での実測最大値 339.09px + マージン */
    --v4-seg-panel-h: 352px;
  }
}
.v4-seg__panel {
  display: none;
  min-height: var(--v4-seg-panel-h);
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 0 8px 8px 8px;
  padding: 18px 16px;
}
.v4-seg__panel.is-active {
  display: flex;
}
.v4-seg__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}
.v4-seg__points {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.v4-seg__points li {
  position: relative;
  padding-left: 1.1em;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text, #333);
}
.v4-seg__points li::before {
  content: "・";
  position: absolute;
  left: 0;
}
.v4-seg__points strong {
  color: var(--red);
}
.v4-seg__cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
}
@media (min-width: 768px) {
  .v4-seg .container {
    max-width: 720px;
  }
  .v4-seg__panel {
    padding: 22px 32px;
  }
}

/* ---------- DIFFERENCE: 一般化比較テーブル（5章。画像は使わない） ---------- */
.v4-difference__lead {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}
.v4-difference__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v4-difference__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}
.v4-difference__table th,
.v4-difference__table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--gray-line);
  vertical-align: top;
  text-align: left;
}
.v4-difference__table thead th {
  background: var(--dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.v4-difference__table tbody th {
  white-space: nowrap;
  font-weight: 700;
  color: var(--dark);
  background: #faf6ea;
}
.v4-difference__us {
  color: var(--red);
  font-weight: 700;
}
.v4-difference__them {
  color: #666;
}
.v4-difference__table tbody tr:nth-child(even) {
  background: #fafafa;
}
.v4-difference__note {
  margin-top: 14px;
  font-size: 12px;
  color: #777;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .v4-difference__table {
    font-size: 15px;
  }
  .v4-difference__table th,
  .v4-difference__table td {
    padding: 16px 14px;
  }
}

/* ---------- フローティングCTA（6章） ---------- */
:root {
  /* .sp-bar は font-size:3.8vw で高さが可変のため、実測値をJSでこの変数に書き戻す。
     JS実行前・無効時のフォールバックとして375px前後での概算値を入れておく（6-4） */
  --v4-spbar-h: 70px;
}
.v4-float-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--v4-spbar-h) + 8px);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  /* 固定要素の合計占有(ヘッダー+.sp-bar+本要素)が画面高の20%以内に収まるよう、
     縦paddingを切り詰めてある（6-3・10-1b）。 */
  padding: 6px 6px 6px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.v4-float-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.v4-float-cta__link {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
}
.v4-float-cta__close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-bg);
  color: #888;
  font-size: 16px;
  line-height: 1;
}
@media (min-width: 768px) {
  .v4-float-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v4-float-cta {
    transition: none;
  }
}