/* =====================================================
   鎌倉新書「お仏壇供養・引き取り専門窓口」LP
   参考サイト風：白基調・温かみのあるアクセント・写真多用
   ===================================================== */

:root {
  --navy: #1B2A4A;
  --brown: #4a3f35;
  --beige-bg: #faf6ef;
  --beige-line: #ece3d2;
  --gold: #C5A059;
  --orange: #FF6B00;
  --orange-dark: #e55f00;
  --orange-pale: #fff3e8;
  --green: #06C755;
  --green-dark: #05ad4a;
  --text: #333333;
  --gray: #767676;
  --border: #e5e5e5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--text);
  font-size: 17px;
  line-height: 1.9;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

.sp-only { display: none; }
.pc-only { display: inline; }
@media (max-width: 768px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 電話CTAの一時非表示（再表示時はこのクラスをHTMLから外す */
.tel-hidden { display: none !important; }

/* 写真注釈 */
.img-note {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #999;
  margin-top: 2px;
}

/* 金額数字 */
.price-num {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
}

/* ---------- スクロールフェードイン ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   ヘッダー（白・参考サイト風）
   ===================================================== */
#site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.header-group {
  font-size: 10px;
  color: var(--gray);
  letter-spacing: .04em;
  line-height: 1.4;
}
.header-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.3;
}
.logo-mark {
  font-family: 'Noto Serif JP', serif;
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
}
.logo-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
}
/* ヘッダーのWEB相談ボタン（電話非表示中の代替導線） */
.header-web-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: linear-gradient(180deg, #14d363 0%, var(--green) 60%, var(--green-dark) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 0 #049740;
  transition: transform .15s ease, box-shadow .15s ease;
}
.header-web-btn:hover { transform: translateY(1px); box-shadow: 0 1px 0 #049740; }
.header-web-btn i { margin-right: 5px; }
.header-web-sub {
  font-size: 10px;
  font-weight: 500;
  opacity: .95;
}

.header-tel { text-align: right; }
.header-tel-copy {
  font-size: 11px;
  color: var(--gray);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.tel-badge {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 3px;
}
.header-tel-number {
  font-size: 26px;
  font-weight: 900;
  color: var(--orange);
  letter-spacing: .02em;
  line-height: 1.2;
}
.header-tel-number i {
  font-size: 17px;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .logo-mark { font-size: 17px; }
  .logo-sub { font-size: 10px; }
  .header-tel { display: none; }
}

/* =====================================================
   SECTION 1：ファーストビュー（白ベース・写真右）
   ===================================================== */
#hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--beige-bg) 100%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/hero-butsudan.jpg') right center / cover no-repeat;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.93) 42%,
    rgba(255,255,255,.55) 70%,
    rgba(255,255,255,.25) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 20px 40px;
}
.hero-main {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 8px;
}
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-photo {
  flex: 0 0 340px;
  text-align: center;
}
.hero-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  background: #fff;
}
.hero-photo .img-note { margin-top: 4px; }
.hero-lead {
  display: inline-block;
  background: linear-gradient(135deg, var(--navy) 0%, #2a3d66 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 20px;
  border-radius: 4px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(27,42,74,.25);
}
.hero-lead i { color: var(--gold); margin-right: 4px; }
.hero-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--navy);
  margin-bottom: 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.hero-title em {
  font-style: normal;
  color: var(--orange);
}
.hero-sub {
  font-size: 20px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 16px;
}
.hero-price {
  display: inline-block;
  background: #fff;
  border: 3px solid var(--orange);
  border-radius: 10px;
  padding: 10px 26px;
  font-size: 18px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(255,107,0,.18);
}
.hero-price strong {
  color: var(--orange);
  margin-left: 6px;
}
.hero-price .price-num { font-size: 40px; }
.price-tax { font-size: 15px; color: var(--gray); }

/* 権威性バッジ */
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  margin-top: 6px;
}
.badge-item {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 12px 12px;
  flex: 1 1 150px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  position: relative;
}
.badge-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, var(--gold), #e8cf8f, var(--gold));
}
.badge-item i {
  font-size: 25px;
  color: var(--gold);
}
.badge-item strong {
  font-size: 17px;
  color: var(--orange);
}

/* 対応エリア注記 */
.hero-area-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 16px;
  max-width: 100%;
  background: rgba(255,255,255,.92);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--brown);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.hero-area-note i {
  color: var(--gold);
  font-size: 16px;
  align-self: center;
}
.hero-area-note strong {
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
}
.area-note-small {
  font-size: 12px;
  color: var(--gray);
}

/* =====================================================
   CTAボックス（受付女性の丸写真つき・参考サイト風）
   ===================================================== */
.cta-wrap {
  background: #fff;
  padding: 34px 20px;
}
.cta-wrap-beige { background: var(--beige-bg); }
.cta-box {
  max-width: 880px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fff8f1 0%, var(--orange-pale) 100%);
  border: 2px solid var(--orange);
  border-radius: 14px;
  padding: 26px 30px 28px;
  box-shadow: 0 6px 20px rgba(255,107,0,.13);
  position: relative;
}
.cta-box::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255,107,0,.35);
  border-radius: 10px;
  pointer-events: none;
}
.cta-box-title {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: 20px;
  position: relative;
}
.cta-box-title em {
  font-style: normal;
  color: var(--orange);
}
.cta-box-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cta-operator {
  flex-shrink: 0;
  text-align: center;
}
.cta-operator img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  margin: 0 auto 8px;
}
.cta-operator figcaption {
  font-size: 14px;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.5;
}
.cta-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-block { width: 100%; }
.cta-micro {
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.micro-badge {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cta-micro { white-space: nowrap; }
.badge-orange { background: var(--orange); }
.badge-green { background: var(--green); }

.cta-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  line-height: 1.3;
  box-shadow: 0 4px 0 rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  filter: brightness(1.05);
}
.cta-btn > i { font-size: 24px; flex-shrink: 0; }
.cta-btn-text {
  text-align: left;
  font-size: 28px;
  letter-spacing: .02em;
}
.cta-btn-text small {
  display: block;
  font-size: 14px;
  font-weight: 700;
  opacity: .95;
  letter-spacing: 0;
}
.cta-btn-web .cta-btn-text { font-size: 21px; }
.cta-arrow {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.cta-btn-tel {
  background: linear-gradient(180deg, #ff8226 0%, var(--orange) 55%, var(--orange-dark) 100%);
  box-shadow: 0 4px 0 #c95400;
  animation: pulse-btn 3s infinite;
}
.cta-btn-tel:hover { box-shadow: 0 2px 0 #c95400; }
.cta-btn-web {
  background: linear-gradient(180deg, #14d363 0%, var(--green) 55%, var(--green-dark) 100%);
  box-shadow: 0 4px 0 #049740;
}
.cta-btn-web:hover { box-shadow: 0 2px 0 #049740; }

@keyframes pulse-btn {
  0%, 88%, 100% { transform: scale(1); }
  90% { transform: scale(1.015); }
  93% { transform: scale(.995); }
  96% { transform: scale(1.01); }
}

/* =====================================================
   セクション共通
   ===================================================== */
.section { padding: 64px 0; }
.section-beige { background: var(--beige-bg); }

.section-title {
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.55;
  margin-bottom: 44px;
  position: relative;
  padding-bottom: 24px;
  overflow-wrap: anywhere;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--orange), var(--gold));
}
.section-title::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  opacity: .6;
}
.section-title em {
  font-style: normal;
  color: var(--orange);
}
.title-small {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--gray);
  margin-bottom: 4px;
}

/* =====================================================
   SECTION 2：お悩み共感（アイコンカード型）
   ===================================================== */
.problem-photo {
  max-width: 460px;
  margin: -14px auto 26px;
  text-align: center;
}
.problem-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.12);
}
.problem-photo .img-note { margin-top: 4px; }

.problem-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 780px;
  margin: 0 auto;
}
.problem-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-left: 5px solid var(--orange);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.problem-card-wide { grid-column: 1 / -1; }
.problem-card-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--orange-pale);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.problem-card p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}
.problem-card strong { color: var(--orange); }

.problem-answer { text-align: center; margin-top: 30px; }
.problem-answer-arrow {
  color: var(--orange);
  font-size: 30px;
  margin-bottom: 10px;
  animation: bounce-down 1.6s infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
.problem-answer-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.8;
}
.problem-answer-text em {
  font-style: normal;
  color: var(--orange);
  border-bottom: 3px solid var(--gold);
}

/* =====================================================
   SECTION 3：6つの理由
   ===================================================== */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.reason-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  padding: 28px 22px 22px;
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.reason-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.reason-card p.reason-num,
.reason-num {
  position: absolute;
  top: -12px;
  left: 18px;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  padding: 2px 14px;
  border-radius: 999px;
  line-height: 1.5;
}
.reason-num span {
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
  color: #fff;
}
.reason-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--orange-pale);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 6px auto 14px;
}
.reason-card h3 {
  font-size: 21px;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: center;
}
.reason-card h3 small {
  display: block;
  font-size: 14px;
  color: var(--gray);
  font-weight: 700;
  margin-top: 3px;
}
.reason-card p { font-size: 15.5px; color: #555; }

.reason-photos {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  margin-top: 48px;
}
.reason-photo {
  flex: 0 1 420px;
  text-align: center;
}
.reason-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(0,0,0,.14);
  margin: 0 auto;
  background: #fff;
}
.reason-photo figcaption {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
}
.reason-photo figcaption i { color: var(--orange); margin-right: 4px; }

/* =====================================================
   SECTION 4：料金
   ===================================================== */
/* 仏壇サイズ別費用ビジュアル */
.size-visual {
  max-width: 740px;
  margin: 0 auto 30px;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  padding: 22px 24px 18px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.size-visual-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 14px;
}
.size-visual-title i {
  color: var(--orange);
  margin-right: 8px;
}
.size-visual img {
  max-width: 560px;
  width: 100%;
  margin: 0 auto 12px;
  border-radius: 8px;
}
.size-visual-note {
  font-size: 15px;
  color: var(--gray);
  text-align: left;
  display: inline-block;
}

.price-card {
  max-width: 740px;
  margin: 0 auto 24px;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.price-card-title {
  background: linear-gradient(135deg, var(--navy) 0%, #2a3d66 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 22px;
  border-bottom: 3px solid var(--gold);
}
.price-card-title i {
  color: var(--gold);
  margin-right: 10px;
}
.price-card-title small { font-size: 12px; font-weight: 500; margin-left: 4px; }
.price-table {
  width: 100%;
  border-collapse: collapse;
}
.price-table th, .price-table td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--beige-line);
  font-size: 18px;
  text-align: left;
  vertical-align: middle;
}
.price-table tr:last-child th,
.price-table tr:last-child td { border-bottom: none; }
.price-table th {
  width: 44%;
  background: var(--beige-bg);
  color: var(--navy);
  font-weight: 700;
}
.price-table-head th,
.price-table-head td {
  background: #efe7d6;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  padding-top: 10px;
  padding-bottom: 10px;
}
.price-table th small { display: block; font-size: 13px; font-weight: 500; color: var(--gray); }
.price-table td strong { color: var(--orange); }
.price-table td .price-num { font-size: 30px; }
.price-table td small { display: block; font-size: 14px; color: var(--gray); }
.price-free { font-weight: 700; color: var(--brown); }
.price-free strong { color: var(--orange); font-size: 20px; }

.price-action-copy {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--brown);
  margin-top: 34px;
}

/* その他よく一緒にご依頼いただくメニュー */
.other-menu {
  max-width: 740px;
  margin: 38px auto 0;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.other-menu-title {
  background: linear-gradient(135deg, var(--brown) 0%, #5f5245 100%);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  padding: 14px 22px;
  border-bottom: 3px solid var(--gold);
}
.other-menu-title i {
  color: var(--gold);
  margin-right: 10px;
}
.other-menu-list { padding: 6px 22px; }
.other-menu-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--beige-line);
}
.other-menu-item:last-child { border-bottom: none; }
.other-menu-photo {
  flex-shrink: 0;
}
.other-menu-photo img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.other-menu-body { flex: 1; min-width: 0; }
.other-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 5px;
}
.other-menu-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.other-menu-name i {
  color: var(--orange);
  margin-right: 8px;
  width: 20px;
  text-align: center;
}
.other-menu-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
  white-space: nowrap;
}
.other-menu-price strong { color: var(--orange); }
.other-menu-price .price-num { font-size: 24px; }
.other-menu-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.75;
}

/* =====================================================
   SECTION 5：事例（写真つき）
   ===================================================== */
.case-card {
  max-width: 880px;
  margin: 0 auto 34px;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.case-title {
  background: linear-gradient(135deg, var(--navy) 0%, #2a3d66 100%);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
  border-bottom: 3px solid var(--gold);
}
.case-label {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 3px 15px;
  border-radius: 999px;
}
.case-body {
  display: flex;
  gap: 24px;
  padding: 24px;
}
.case-photo {
  flex: 0 0 300px;
}
.case-photo img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}
.case-photo figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray);
  text-align: center;
}
.case-info { flex: 1; min-width: 0; }
.case-detail > div {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--beige-line);
  font-size: 16px;
}
.case-detail dt {
  flex-shrink: 0;
  width: 130px;
  font-weight: 700;
  color: var(--navy);
}
.case-detail dt i { color: var(--orange); margin-right: 6px; width: 15px; }
.case-detail dd { color: #444; }

.case-price {
  margin-top: 16px;
  background: var(--beige-bg);
  border: 1px solid var(--beige-line);
  border-radius: 10px;
  padding: 16px 20px;
}
.case-price h4 {
  font-size: 16px;
  color: var(--navy);
  border-left: 4px solid var(--orange);
  padding-left: 10px;
  margin-bottom: 10px;
}
.case-price ul li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  padding: 7px 0;
  border-bottom: 1px dotted #d8ceba;
}
.case-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  font-weight: 700;
  color: var(--navy);
  font-size: 17px;
}
.case-total strong { color: var(--orange); }
.case-total .price-num { font-size: 32px; }
.case-total strong small { font-size: 14px; font-weight: 700; }

/* =====================================================
   SECTION 6：お客様の声（顔写真つき）
   ===================================================== */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.voice-card {
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.voice-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.voice-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--beige-line);
  flex-shrink: 0;
}
.voice-user {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}
.voice-user span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
}
.voice-stars {
  color: #f5a623;
  font-size: 17px;
  letter-spacing: .12em;
}
.voice-card blockquote {
  font-size: 16px;
  color: #444;
  background: var(--beige-bg);
  border-radius: 10px;
  padding: 17px 19px;
  position: relative;
}

/* =====================================================
   SECTION 7：ご利用の流れ
   ===================================================== */
.flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.flow-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 12px;
  padding: 24px 16px 20px;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.flow-step:not(:last-child)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 15px;
  z-index: 1;
}
.flow-num {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}
.flow-num span { font-size: 20px; }
.flow-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--orange-pale);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
.flow-step h3 {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.5;
}
.flow-step p { font-size: 14.5px; color: #555; }

.flow-photos {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 22px;
  margin-top: 40px;
}
.flow-image {
  flex: 0 1 320px;
  text-align: center;
}
.flow-image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
  margin: 0 auto;
  background: #fff;
}
.flow-image figcaption {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
}

/* =====================================================
   SECTION 8：FAQ
   ===================================================== */
.faq-list { max-width: 740px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--beige-line);
  border-radius: 10px;
  margin-bottom: 13px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q, .faq-a {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
}
.faq-q { background: var(--navy); color: #fff; }
.faq-a { background: var(--orange); color: #fff; }
.faq-item summary i {
  margin-left: auto;
  color: var(--orange);
  transition: transform .3s ease;
}
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 0 20px 17px;
}
.faq-answer p { font-size: 16.5px; color: #444; padding-top: 4px; }

/* =====================================================
   SECTION 9：最終CTA
   ===================================================== */
.final-cta {
  background: linear-gradient(160deg, var(--navy) 0%, #131f38 100%);
  padding: 56px 0 60px;
  text-align: center;
}
.final-cta-copy {
  font-family: 'Noto Serif JP', serif;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.9;
  margin-bottom: 28px;
}
.final-cta-copy em {
  font-style: normal;
  color: var(--gold);
}
.cta-wrap-final { background: transparent; padding: 0; }

/* =====================================================
   フッター
   ===================================================== */
#site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  color: var(--gray);
  padding: 34px 0 120px; /* 固定バー分の余白 */
  text-align: center;
  font-size: 13px;
}
.footer-company {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.footer-company span { font-size: 12px; font-weight: 500; color: var(--gold); }
.footer-license { margin-bottom: 14px; font-size: 13px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 16px;
}
.footer-nav a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-nav a:hover { color: var(--orange); }
.footer-copyright { font-size: 11px; color: #aaa; }

@media (min-width: 769px) {
  #site-footer { padding-bottom: 34px; }
}

/* =====================================================
   スマホ固定追従CTAバー（768px以下のみ表示）
   ===================================================== */
#fixed-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(4px);
  box-shadow: 0 -3px 12px rgba(0,0,0,.1);
  transform: translateY(110%);
  transition: transform .4s ease;
}
#fixed-cta-bar.is-shown { transform: translateY(0); }

.fixed-cta {
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #FFFFFF;
  font-weight: 700;
  text-align: left;
  border-radius: 10px;
  padding: 8px 14px;
  line-height: 1.4;
}
.fixed-cta-tel {
  background: linear-gradient(180deg, #ff8226 0%, var(--orange) 60%, var(--orange-dark) 100%);
  box-shadow: 0 3px 0 #c95400;
  animation: pulse-fixed 3s infinite;
}
.fixed-cta-web {
  background: linear-gradient(180deg, #14d363 0%, var(--green) 60%, var(--green-dark) 100%);
  box-shadow: 0 3px 0 #049740;
  animation: pulse-fixed 3s infinite;
}
.fixed-cta-operator {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
  flex-shrink: 0;
  background: #fff;
}
.fixed-cta-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fixed-cta-micro {
  font-size: 11px;
  font-weight: 500;
  opacity: .97;
  white-space: nowrap;
}
.fixed-cta-main {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
}
.fixed-cta-main i { font-size: 15px; margin-right: 4px; }
.fixed-cta-arrow {
  margin-left: auto;
  font-size: 15px;
  opacity: .9;
  flex-shrink: 0;
}

@keyframes pulse-fixed {
  0%, 88%, 100% { transform: scale(1); }
  90% { transform: scale(1.04); }
  93% { transform: scale(.98); }
  96% { transform: scale(1.03); }
}

@media (max-width: 768px) {
  #fixed-cta-bar { display: flex; }
}

/* =====================================================
   レスポンシブ（〜768px）
   ===================================================== */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.85; }
  .container { padding: 0 16px; }
  .section { padding: 46px 0; }
  .section-title {
    font-size: 23px;
    line-height: 1.6;
    margin-bottom: 30px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .title-small { font-size: 13px; line-height: 1.6; }

  /* FV */
  .hero-bg { background-position: 78% center; }
  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.9) 55%,
      rgba(255,255,255,.72) 100%);
  }
  .hero-content { padding: 32px 16px 28px; }
  .hero-lead { font-size: 14px; padding: 6px 14px; }
  .hero-title { font-size: 27px; line-height: 1.55; }
  .hero-sub { font-size: 16px; line-height: 1.7; }
  .hero-main {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 4px;
  }
  .hero-photo {
    flex: none;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .hero-price {
    font-size: 14px;
    padding: 8px 12px;
    white-space: nowrap;
  }
  .hero-price strong { margin-left: 3px; }
  .hero-price .price-num { font-size: 25px; }
  .price-tax { font-size: 12px; }
  .badge-list { gap: 8px; }
  .badge-item {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    padding: 10px 6px;
    font-size: 12px;
  }
  .badge-item strong { font-size: 15px; }
  .hero-area-note { margin-top: 12px; padding: 9px 12px; font-size: 12px; }
  .hero-area-note strong { font-size: 16px; }
  .area-note-small { font-size: 11px; }

  /* CTAボックス */
  .cta-wrap { padding: 26px 14px; }
  .cta-box { padding: 20px 16px 22px; }
  .cta-box-title { font-size: 20px; }
  .cta-box-inner { flex-direction: column; gap: 14px; }
  .cta-operator img { width: 108px; height: 108px; }
  .cta-actions { width: 100%; }
  .cta-btn { padding: 13px 14px; }
  .cta-btn-text { font-size: 24px; }
  .cta-btn-web .cta-btn-text { font-size: 18px; }
  .cta-micro { font-size: 12px; gap: 5px; }
  .micro-badge { font-size: 11px; padding: 2px 7px; }

  /* お悩み */
  .problem-cards { grid-template-columns: 1fr; gap: 12px; }
  .problem-card { padding: 14px 15px; gap: 13px; }
  .problem-card-icon { width: 50px; height: 50px; font-size: 21px; }
  .problem-card p { font-size: 16px; line-height: 1.7; }
  .problem-answer-text { font-size: 21px; line-height: 1.75; }

  /* 理由 */
  .reason-grid { grid-template-columns: 1fr; gap: 22px; }
  .reason-card { padding: 26px 18px 20px; }
  .reason-photos { flex-direction: column; align-items: center; gap: 22px; margin-top: 36px; }
  .reason-photo { flex: none; width: 100%; max-width: 420px; }
  .reason-photo img { height: 240px; }

  /* 料金 */
  .size-visual { padding: 16px 14px 14px; }
  .size-visual-title { font-size: 18px; }
  .size-visual-note { font-size: 14px; }
  .price-table th, .price-table td { padding: 13px 14px; font-size: 16px; }
  .price-table td .price-num { font-size: 25px; }
  .price-action-copy { font-size: 16px; line-height: 1.8; }
  .other-menu { margin-top: 30px; }
  .other-menu-title { font-size: 17px; padding: 12px 16px; }
  .other-menu-list { padding: 4px 16px; }
  .other-menu-item { padding: 14px 0; gap: 12px; align-items: flex-start; }
  .other-menu-photo img { width: 74px; height: 74px; }
  .other-menu-name { font-size: 16px; }
  .other-menu-price .price-num { font-size: 21px; }
  .other-menu-desc { font-size: 14px; }
  .problem-photo { max-width: 340px; margin: -6px auto 22px; }

  /* 事例 */
  .case-title { font-size: 17px; flex-wrap: wrap; gap: 8px; padding: 13px 16px; }
  .case-body { flex-direction: column; padding: 16px; gap: 14px; }
  .case-photo { flex: none; }
  .case-detail > div { flex-direction: column; gap: 1px; font-size: 15px; }
  .case-detail dt { width: auto; }
  .case-price { padding: 13px 15px; }
  .case-price ul li { font-size: 15px; }
  .case-total { flex-direction: column; align-items: flex-end; gap: 0; }
  .case-total .price-num { font-size: 27px; }

  /* 声 */
  .voice-grid { grid-template-columns: 1fr; gap: 16px; }
  .voice-photo { width: 76px; height: 76px; }
  .voice-user { font-size: 16px; }
  .voice-card blockquote { font-size: 15px; padding: 14px 15px; }

  /* 流れ */
  .flow-list { grid-template-columns: 1fr; gap: 26px; }
  .flow-step:not(:last-child)::after {
    content: "\f078";
    top: auto;
    bottom: -22px;
    right: 50%;
    transform: translateX(50%);
  }
  .flow-photos { flex-direction: column; align-items: center; gap: 18px; margin-top: 32px; }
  .flow-image { flex: none; width: 100%; max-width: 380px; }
  .flow-image img { height: 220px; }

  /* FAQ */
  .faq-item summary { font-size: 16px; padding: 15px 14px; gap: 10px; }
  .faq-answer { padding: 0 14px 15px; gap: 10px; }
  .faq-answer p { font-size: 15px; }

  /* 最終CTA */
  .final-cta { padding: 42px 0 46px; }
  .final-cta-copy { font-size: 21px; line-height: 1.8; }
}