:root {
  --color-red: #fb3f3f;
  --color-blue: #0e90df;
  --color-orange: #fc9902;
  --color-green: #4eb824;
  --color-dark: #20202c;
  --color-white: #ffffff;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-num: "Outfit", sans-serif;
}

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

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

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-jp);
  color: var(--color-dark);
  background: var(--color-white);
  min-width: 320px;
  overflow-x: hidden;
}

.pc-only { display: block !important; }
.sp-only { display: none !important; }

/* ============ Header ============ */
.site-header {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 40px;
  height: 80px;
}

.site-header__logo img {
  width: 173.85px;
  height: 39.78px;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.site-header__right.pc-only { display: flex !important; }

.header-badge {
  background: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 16px;
  color: var(--color-red);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 18px;
  white-space: nowrap;
}

.header-badge__label {
  font-size: 13px;
  letter-spacing: 0.04em;
}

.header-badge__strong {
  font-size: 18px;
  letter-spacing: 0.04em;
}

.header-actions {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 34px;
}

.header-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  white-space: nowrap;
}

.header-phone__label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-dark);
}

.header-phone__number {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--color-blue);
  text-decoration: none;
}

.header-cta {
  display: flex;
  height: 100%;
}

.header-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 200px;
  padding: 10px 16px;
  white-space: nowrap;
  color: var(--color-white);
  text-decoration: none;
  text-align: center;
}

.header-cta__tel { background: var(--color-orange); }
.header-cta__line { background: var(--color-green); }

.header-cta small {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.header-cta strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* ============ Layout helpers ============ */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.c-red { color: var(--color-red); }
.c-blue { color: var(--color-blue); }
.c-orange { color: var(--color-orange); }
.c-green { color: var(--color-green); }

/* ============ Hero ============ */
.hero {
  position: relative;
  z-index: 0;
  background: #fff;
  overflow: hidden;
  padding: 40px 0 56px;
}

.hero__bg-map {
  position: absolute;
  top: -26px;
  left: 25.5%;
  width: 34%;
  aspect-ratio: 655 / 572;
  background: url("assets/hero-map-vector.svg") no-repeat center / contain;
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 48px;
}

.hero__text { flex: 1 1 56%; }

.hero__tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.hero__tabs span {
  background: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 26px);
  letter-spacing: 0.04em;
  padding: 10px 18px;
}

.hero__heading-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.hero__heading {
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.hero__heading-line1 {
  display: block;
  font-size: clamp(28px, 3.4vw, 48px);
}

.hero__heading-line1 small { font-size: 0.86em; font-weight: 900; }

.hero__heading-line2 {
  display: block;
  font-size: clamp(28px, 3.4vw, 48px);
}

.hero__heading-line2 strong { font-size: 1.18em; }

.hero__badge {
  flex-shrink: 0;
  width: clamp(88px, 8vw, 118px);
  height: clamp(88px, 8vw, 118px);
  border-radius: 50%;
  border: 2px solid var(--color-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
}

.hero__badge-label {
  background: var(--color-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 40px;
  padding: 3px 10px;
  white-space: nowrap;
}

.hero__badge-percent {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-red);
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.15;
  background: linear-gradient(to bottom, transparent 52%, #f2ff41 52%, #f2ff41 88%, transparent 88%);
  padding: 0 3px;
}

.hero__badge-percent small { font-size: 0.6em; }

.hero__badge-off {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-red);
  font-size: clamp(16px, 1.5vw, 22px);
}

.hero__lead {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  color: #333;
  margin-bottom: 28px;
}

.hero__stats {
  display: flex;
  gap: 24px;
}

.hero__stat-label {
  font-weight: 700;
  font-size: clamp(11px, 0.95vw, 14px);
  margin-bottom: 4px;
  white-space: nowrap;
}

.hero__stat-num {
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.15;
}

.hero__stat-num--lg {
  font-family: var(--font-num);
  color: var(--color-orange);
  font-size: clamp(28px, 2.4vw, 34px);
  letter-spacing: 0.02em;
}

.hero__stat-num--orange { color: var(--color-orange); font-weight: 900; }
.hero__stat-num--lg2 { font-size: clamp(20px, 1.7vw, 24px); }

.hero__photo {
  flex: 1 1 44%;
}

.hero__photo img {
  width: 100%;
  height: clamp(280px, 32vw, 460px);
  object-fit: cover;
  border-radius: 40px 0 0 40px;
}

/* ============ Trade-in banner ============ */
.tradein {
  background: var(--color-blue);
  padding: 10px 20px;
}

.tradein__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tradein__pill {
  background: #fff;
  color: var(--color-blue);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  border-radius: 55px;
  padding: 10px 20px;
  white-space: nowrap;
}

.tradein__text {
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.tradein__amount {
  font-family: var(--font-num);
  font-weight: 900;
  color: #f2ff41;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.tradein__amount strong { font-size: 2.2em; font-weight: 900; letter-spacing: 0.02em; }

/* ============ CTA row ============ */
.cta-row { padding: 40px 0; }

.cta-row__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.cta-row__phone {
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}

.cta-row__phone-label {
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.cta-row__phone-number {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.04em;
  color: var(--color-blue);
  text-decoration: none;
  white-space: nowrap;
}

/* chevron.svg は stroke="white"。色付きボタン内はこのままで正しく、
   白背景のパーツでは chevron-blue.svg に差し替える */
.chevron {
  display: inline-block;
  width: 8px;
  height: 11px;
  background: url("assets/chevron.svg") no-repeat center / contain;
  margin-left: 12px;
  vertical-align: middle;
}

.cases__more .chevron,
.cases__card-title .chevron {
  background-image: url("assets/chevron-blue.svg");
}

.cta-btn {
  position: relative;
  width: 352px;
  height: 66px;
  margin-top: 18px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}

.cta-btn--blue { background: var(--color-blue); }
.cta-btn--orange { background: linear-gradient(180deg, #fc9902 0%, #fc6a02 100%); }
.cta-btn--green { background: linear-gradient(180deg, #4eb824 0%, #1d8b31 100%); }

.cta-btn__badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid currentColor;
  border-radius: 14px;
  padding: 6px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  white-space: nowrap;
}

.cta-btn--blue .cta-btn__badge { border-color: var(--color-blue); }
.cta-btn--orange .cta-btn__badge { border-color: var(--color-orange); }
.cta-btn--green .cta-btn__badge { border-color: var(--color-green); }

.cta-btn__label {
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cta-btn--blue .cta-btn__label { font-family: var(--font-num); font-size: 26px; }
.cta-btn--orange .cta-btn__label,
.cta-btn--green .cta-btn__label { font-family: var(--font-jp); }

/* ============ Area coverage ============ */
.area { padding: 0 0 40px; }

.area__box {
  background: #fefaef;
  border-radius: 4px;
  padding: 24px 60px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.area__map {
  position: relative;
  flex-shrink: 0;
  width: 320px;
}

.area__map-svg { width: 100%; }

.area__pin {
  position: absolute;
  left: 56%;
  top: 60%;
  width: 40%;
  text-align: center;
}

.area__pin-photo {
  width: 100%;
  aspect-ratio: 153/113;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 4px;
}

.area__pin-text {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
}

.area__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.area__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.area__flash {
  background: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 55px;
  padding: 8px 20px;
  align-self: flex-start;
}

.area__heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.area__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #213440;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  padding: 7px 10px 7px 12px;
}

.triangle {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: url("assets/triangle.svg") no-repeat center / contain;
  transform: rotate(90deg);
}

.area__heading {
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.04em;
  color: var(--color-dark);
}

.area__highlight {
  display: inline-block;
  font-weight: 700;
  font-size: 22px;
  border-bottom: 12px solid #f2ff41;
  padding-bottom: 2px;
  align-self: flex-start;
}

.area__desc {
  font-size: 17px;
  line-height: 1.7;
  color: #333;
}

/* ============ Trouble grid ============ */
.trouble {
  background: #eefaff;
  padding: 50px 0 70px;
}

.trouble__head {
  text-align: center;
  margin-bottom: 48px;
}

.trouble__heading {
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 42px);
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 20px;
}

.trouble__desc {
  font-size: clamp(14px, 1.05vw, 18px);
  color: #333;
}

.trouble__grid {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.trouble__item {
  background: #fff;
  border-radius: 50%;
  width: 171.6px;
  height: 171.6px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
}

.trouble__item p {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.trouble__icon { width: 54px; height: 54px; }
.trouble__icon--weak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 54px;
  height: 54px;
}
.trouble__icon--weak img { width: 8px; height: 30px; }
.trouble__icon--smell { transform: rotate(-17.42deg); }

/* ============ Wave divider ============ */
.wave-divider {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 22px solid #eefaff;
  margin: 0 auto;
}

/* ============ Pricing / area coverage detail ============ */
.pricing { padding: 40px 0 60px; }

.pricing__head { text-align: center; margin-bottom: 32px; }

.pricing__lead {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
}

.pricing__heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.pricing__badge {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--color-blue);
  color: #f2ff41;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing__heading {
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.4;
}

.pricing__desc {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  max-width: 720px;
  margin: 0 auto;
}

.pricing__box {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 40px 60px;
  text-align: center;
}

.pricing__box-heading {
  font-weight: 900;
  font-size: 28px;
  margin-bottom: 16px;
}

.pricing__box-desc {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 28px;
}

.pricing__cards {
  display: flex;
  gap: 24px;
}

.pricing__card {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  text-align: left;
}

.pricing__card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  margin-bottom: 16px;
  object-fit: cover;
}

.pricing__card-photo--placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f5f5f5 10px, #f5f5f5 20px);
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999;
  font-size: 13px;
  padding: 8px;
}

.pricing__card-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
}

.pricing__card-price {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-red);
  font-size: 30px;
  margin-bottom: 10px;
}

.pricing__card-price span {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
}

.pricing__card-note {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}

/* ============ Flow (ご相談の流れ) ============ */
.flow {
  background: #eefaff;
  padding: 50px 0 60px;
  text-align: center;
}

.flow__heading {
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 40px);
  margin-bottom: 20px;
}

.flow__desc {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 32px;
}

.flow__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.flow__step {
  flex: 1;
  max-width: 280px;
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  text-align: left;
}

.flow__step-num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  color: var(--color-blue);
  font-family: var(--font-num);
  margin-bottom: 10px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.flow__step-num span { font-size: 13px; }
.flow__step-num strong { font-size: 26px; }

.flow__step-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}

.flow__step-desc {
  font-size: 13px;
  color: #333;
  line-height: 1.7;
}

.flow__arrow {
  flex-shrink: 0;
  align-self: center;
  width: 20px;
  height: 20px;
  background: url("assets/chevron.svg") no-repeat center / contain;
  opacity: 0.6;
}

.flow__ctas {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.flow__ctas .cta-btn { position: relative; margin-top: 24px; }

/* ============ Case studies ============ */
.cases { padding: 50px 0 60px; text-align: center; }

.cases__heading {
  font-weight: 900;
  color: var(--color-blue);
  font-size: clamp(28px, 2.8vw, 42px);
  margin-bottom: 16px;
}

.cases__desc {
  font-size: 16px;
  color: #333;
  margin-bottom: 32px;
}

.cases__grid {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  text-align: left;
}

.cases__card {
  flex: 1;
  display: block;
  text-decoration: none;
  color: var(--color-dark);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cases__card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.cases__card-photo--placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f5f5f5 10px, #f5f5f5 20px);
  border-bottom: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}

.cases__card-date {
  font-size: 13px;
  color: #888;
  padding: 16px 16px 0;
}

.cases__card-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  /* 右は絶対配置のシェブロン分を確保し、長いタイトルが重ならないようにする */
  padding: 4px 36px 16px 16px;
  position: relative;
}

.cases__card-title .chevron { position: absolute; right: 16px; bottom: 18px; }

/* 開閉ボタンを展開後もカードの下に保つため column-reverse で summary を最後に描画 */
.cases__more-wrap {
  display: flex;
  flex-direction: column-reverse;
}

.cases__more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  font-weight: 700;
  border-radius: 24px;
  padding: 12px 28px;
  text-decoration: none;
  margin-bottom: 48px;
  list-style: none;
  cursor: pointer;
}

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

.cases__more-label--close { display: none; }
.cases__more-wrap[open] .cases__more-label--open { display: none; }
.cases__more-wrap[open] .cases__more-label--close { display: inline; }
.cases__more-wrap[open] .cases__more .chevron--down { transform: rotate(-90deg); }

.cases__grid--extra { margin-bottom: 24px; }

/* mask/背景色は .chevron 側で定義済み。ここは向きの指定のみ
   （background ショートハンドを再指定すると background-color が消えて不可視になる） */
.chevron--down {
  transform: rotate(90deg);
}

.cases__cta {
  position: relative;
  background: url("assets/cv-bg-cases-pc.jpg") center / cover no-repeat, var(--color-blue);
  border-radius: 4px;
  padding: 60px 60px 40px;
  text-align: left;
  overflow: hidden;
}

.cases__cta-badge {
  position: absolute;
  top: -20px;
  left: 40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cases__cta-badge small { font-size: 10px; font-weight: 400; margin-top: 2px; }

.cases__cta-heading {
  color: #fff;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 32px);
  margin: 0 0 16px 150px;
}

.c-yellow { color: #f2ff41; }

.cases__cta-desc {
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.cases__cta-card {
  background: #fff;
  border-radius: 4px;
  padding: 24px 40px;
  text-align: center;
}

.cases__cta-phone-label {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.cases__cta-phone {
  display: block;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 42px;
  color: var(--color-blue);
  text-decoration: none;
  margin-bottom: 16px;
  white-space: nowrap;
}

.cases__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.cases__cta-buttons .cta-btn { position: relative; margin-top: 0; }

/* ============ Reviews ============ */
.reviews {
  background: #eefaff;
  padding: 50px 0 60px;
  text-align: center;
}

.reviews__heading {
  font-weight: 900;
  font-size: clamp(26px, 2.6vw, 40px);
  margin-bottom: 16px;
}

.reviews__desc {
  font-size: 16px;
  color: #333;
  margin-bottom: 32px;
}

.reviews__carousel-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviews__track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px;
  text-align: left;
}

.review-card {
  scroll-snap-align: start;
  flex: 0 0 260px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.review-card__name { font-weight: 700; font-size: 16px; text-align: center; }

.review-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: #333;
  flex: 1;
}

.review-card__text a { color: var(--color-blue); }

.review-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.review-card__stars { color: #fbbc04; letter-spacing: 2px; }

.review-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #888;
}

.google-g {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(#4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
  color: transparent;
  font-size: 0;
}

.reviews__arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #999;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============ Areas served (キッチン/トイレ/浴室) ============ */
.areas-served { padding: 50px 0 60px; text-align: center; }

.areas-served__heading {
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.5;
  margin-bottom: 16px;
}

.areas-served__desc {
  font-size: 16px;
  color: #333;
  margin-bottom: 32px;
}

.areas-served__grid {
  display: flex;
  gap: 24px;
}

.areas-served__item { flex: 1; }

.areas-served__photo {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  margin-bottom: 16px;
  object-fit: cover;
}

.areas-served__photo--placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f5f5f5 10px, #f5f5f5 20px);
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}

.areas-served__label {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-blue);
  margin-bottom: 8px;
}

.areas-served__note { font-size: 14px; color: #333; }

/* ============ Features (選ばれる理由) ============ */
.features {
  background: #fdf8ee;
  padding: 60px 0;
}

.features__head {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
}

.features__watermark {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(50px, 7vw, 110px);
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: -0.6em;
}

.features__kicker {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 12px;
  position: relative;
}

.features__heading {
  font-weight: 900;
  font-size: clamp(26px, 2.8vw, 42px);
  position: relative;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 40px;
}

.feature-row--reverse { flex-direction: row-reverse; }

.feature-row__photo {
  flex: 1 1 38%;
  max-width: 380px;
  aspect-ratio: 7/4;
  border-radius: 4px;
  object-fit: cover;
}

.feature-row__photo--placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f8f8f8 10px, #f8f8f8 20px);
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
}

.feature-row__body {
  flex: 1 1 55%;
  background: #fff;
  padding: 24px 40px;
  text-align: center;
}

.feature-row__num {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-orange);
  font-size: 40px;
  margin-bottom: 8px;
}

.feature-row__title {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 16px;
}

.feature-row__desc {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.brands-box {
  background: #fff;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
}

.brands-box__text { flex: 1; }

.brands-box__heading {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.brands-box__desc {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
}

.brands-box__logos {
  flex: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
}

.brands-box__logos img {
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* ============ Coverage (対応市区町村) ============ */
.coverage {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
}

.coverage__bg {
  position: absolute;
  left: -8%;
  top: 0;
  width: 45%;
  height: 100%;
  background: url("assets/area-map.svg") no-repeat center / contain;
  opacity: 0.35;
  z-index: 0;
}

.coverage__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.coverage__heading {
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 38px);
  margin-bottom: 20px;
}

.coverage__desc {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.coverage__highlight {
  display: inline-block;
  font-weight: 700;
  font-size: 22px;
  background: linear-gradient(transparent 60%, #ffff00 60%);
  margin-bottom: 32px;
}

.coverage__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 8px;
}

.coverage__line {
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: var(--color-blue);
}

.coverage__sub2 {
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
}

.coverage__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.coverage__tags span {
  border: 1px solid var(--color-blue);
  color: var(--color-dark);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
}

/* ============ FAQ ============ */
.faq { padding: 60px 0; text-align: center; }

.faq__heading {
  font-weight: 900;
  font-size: clamp(26px, 2.8vw, 42px);
  margin-bottom: 16px;
}

.faq__desc {
  font-size: 16px;
  color: #333;
  margin-bottom: 32px;
}

.faq__list {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__item {
  background: #eefaff;
  border: 1px solid transparent;
  border-radius: 4px;
}

.faq__item[open] {
  background: #fff;
  border-color: var(--color-blue);
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 17px;
  position: relative;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  width: 14px;
  height: 8px;
  background: url("assets/chevron-blue.svg") no-repeat center / contain;
  transform: rotate(90deg);
}

.faq__item[open] summary::after { transform: rotate(-90deg); }

.faq__q {
  color: var(--color-blue);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  flex-shrink: 0;
}

.faq__a {
  display: flex;
  gap: 16px;
  padding: 0 24px 24px 24px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.faq__a-mark {
  color: var(--color-blue);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 26px;
  flex-shrink: 0;
}

.faq__a p { font-size: 15px; line-height: 1.8; color: #333; }

/* ============ Final CTA ============ */
.final-cta {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}

.final-cta__bg {
  position: absolute;
  inset: 0;
  background: url("assets/cv-bg-bottom-pc.jpg") center / cover no-repeat, var(--color-blue);
  z-index: 0;
}

.final-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.final-cta__heading {
  color: #fff;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 32px);
  margin-bottom: 24px;
}

.final-cta__card {
  background: #fff;
  border-radius: 4px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 40px;
}

.final-cta__phone {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 16px;
}

/* ============ Footer ============ */
.site-footer {
  background:
    radial-gradient(ellipse 900px 260px at top right, rgba(255,255,255,0.16), transparent 70%),
    #263465;
  padding: 24px 0;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer__links {
  display: flex;
  gap: 32px;
}

.site-footer__links a {
  color: #fff;
  text-decoration: underline;
  font-size: 14px;
}

.site-footer__copy {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
}

/* ============ SP header ============ */
@media (max-width: 768px) {
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }
  .cta-btn.sp-only { display: flex !important; }

  /* SP用の電話CTAは日本語文言。26px は電話番号(数字フォント)前提のサイズで
     幅の狭い .cases__cta-card 内や320〜360px端末で見切れるため調整する */
  .cta-btn--blue.sp-only .cta-btn__label {
    font-family: var(--font-jp);
    font-size: 20px;
    letter-spacing: 0.02em;
  }

  .site-header {
    padding-left: 20px;
    height: 60px;
  }

  .site-header__logo img {
    width: 123.85px;
    height: 28.34px;
  }

  .site-header__right,
  .site-header__right.pc-only { display: none !important; }

  .container { padding: 0 20px; }

  .hero { padding: 20px 0 32px; }

  .hero__bg-map {
    top: -3%;
    left: 20%;
    width: 55%;
  }

  .hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }
  .hero__text { text-align: center; width: 100%; }
  .hero__tabs { justify-content: center; }
  .hero__heading-row { justify-content: center; }
  .hero__stats { justify-content: center; }
  .hero__lead { text-align: center; }

  .hero__tabs { gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .hero__tabs span { font-size: 14px; padding: 6px 10px; }

  .hero__heading-row { gap: 10px; margin-bottom: 14px; }
  .hero__heading-line1,
  .hero__heading-line2 { font-size: 26px; }
  .hero__heading-line2 strong { font-size: 1.25em; }

  .hero__badge { width: 80px; height: 80px; }
  .hero__badge-label { font-size: 9px; padding: 3px 8px; }
  .hero__badge-percent { font-size: 30px; }
  .hero__badge-off { font-size: 15px; }

  .hero__lead { font-size: 13px; margin-bottom: 16px; }

  .hero__stats { gap: 12px; }
  .hero__stat-label { font-size: 10px; }
  .hero__stat-num { font-size: 13px; }
  .hero__stat-num--lg { font-size: 30px; }
  .hero__stat-num--lg2 { font-size: 20px; }

  .hero__photo img {
    height: auto;
    border-radius: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

  .tradein { padding: 16px 20px; }
  .tradein__inner { flex-direction: column; gap: 6px; }
  .tradein__pill { font-size: 12px; padding: 4px 14px; }
  .tradein__text { font-size: 17px; gap: 6px; }
  .tradein__amount { font-size: 8px; }
  .tradein__amount strong { font-size: 2em; }

  .cta-row { padding: 24px 0; }
  .cta-row__inner { flex-direction: column; align-items: center; gap: 0; }
  .cta-row__phone { margin-bottom: 8px; }
  .cta-row__phone-number { font-size: 32px; }
  .cta-btn { width: 100%; max-width: 352px; }

  .area { padding: 0 0 24px; }
  .area__box { flex-direction: column; padding: 24px 15px; gap: 16px; }
  .area__map { width: 260px; margin: 0 auto; }
  .area__pin { left: 48%; top: 52%; width: 48%; }
  .area__pin-text { font-size: 11px; }
  .area__content { gap: 16px; width: 100%; }
  .area__flash { font-size: 12.6px; padding: 7px 14px; }
  .area__tag { font-size: 11.2px; }
  .area__heading { font-size: 28px; }
  .area__heading-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .area__heading { width: 100%; }
  .area__highlight { font-size: 21.6px; border-bottom-width: 8px; display: block; width: 100%; }
  .area__desc { font-size: 16px; }

  .trouble { padding: 40px 0 50px; }
  .trouble__head { margin-bottom: 32px; }
  .trouble__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    justify-content: center;
  }
  .trouble__item { width: 108px; height: 108px; gap: 8px; margin: 0 auto; }
  .trouble__item p { font-size: 12px; }
  .trouble__icon { width: 34px; height: 34px; }
  .trouble__icon--weak { width: 34px; height: 34px; gap: 4px; }
  .trouble__icon--weak img { width: 5px; height: 19px; }

  .wave-divider { border-left-width: 20px; border-right-width: 20px; border-top-width: 15px; }

  .pricing { padding: 24px 0 40px; }
  .pricing__head { margin-bottom: 24px; text-align: left; }
  .pricing__lead { font-size: 16px; text-align: center; }
  .pricing__heading-row { align-items: flex-start; justify-content: flex-start; gap: 10px; }
  .pricing__badge { width: 50px; height: 50px; font-size: 10px; }
  .pricing__heading { font-size: 22px; }
  .pricing__desc { font-size: 14px; }
  .pricing__box { padding: 24px 16px; }
  .pricing__box-heading { font-size: 22px; }
  .pricing__box-desc { font-size: 13px; margin-bottom: 20px; }
  .pricing__cards { flex-direction: column; gap: 16px; }

  .flow { padding: 32px 0 40px; }
  .flow__heading { font-size: 26px; margin-bottom: 12px; }
  .flow__desc { font-size: 13px; margin-bottom: 20px; }
  .flow__steps { flex-direction: column; gap: 0; margin-bottom: 24px; }
  .flow__step { max-width: none; }
  .flow__arrow--down { width: 100%; height: 20px; margin: 8px 0; transform: rotate(90deg); }
  .flow__ctas { flex-direction: column; gap: 0; }
  .flow__ctas .cta-btn { width: 100%; }

  .cases { padding: 32px 0 40px; }
  .cases__heading { font-size: 24px; margin-bottom: 12px; }
  .cases__desc { font-size: 14px; margin-bottom: 20px; }
  .cases__grid { flex-direction: column; gap: 16px; margin-bottom: 20px; }
  .cases__more { margin-bottom: 32px; font-size: 14px; padding: 10px 24px; }
  .cases__cta {
    padding: 40px 20px 24px;
    background: url("assets/cv-bg-cases-sp.jpg") center / cover no-repeat, var(--color-blue);
  }
  .cases__cta-badge { width: 74px; height: 74px; font-size: 11px; left: 16px; top: -14px; }
  .cases__cta-heading { margin-left: 0; margin-top: 40px; font-size: 24px; }
  .cases__cta-desc { font-size: 13px; }
  .cases__cta-card { padding: 20px 16px; }
  .cases__cta-phone { font-size: 32px; }
  .cases__cta-buttons { flex-direction: column; gap: 0; }
  .cases__cta-buttons .cta-btn { width: 100%; margin-top: 16px; }

  .reviews { padding: 32px 0 40px; }
  .reviews__heading { font-size: 26px; margin-bottom: 12px; }
  .reviews__desc { font-size: 14px; margin-bottom: 20px; }
  .review-card { flex: 0 0 85%; }

  .areas-served { padding: 32px 0 40px; }
  .areas-served__heading { font-size: 24px; margin-bottom: 12px; }
  .areas-served__desc { font-size: 14px; margin-bottom: 20px; }
  .areas-served__grid { flex-direction: column; gap: 32px; }

  .features { padding: 40px 0; }
  .features__head { margin-bottom: 24px; }
  .features__watermark { font-size: 40px; }
  .features__kicker { font-size: 14px; }
  .features__heading { font-size: 26px; }
  .feature-row, .feature-row--reverse { flex-direction: column; gap: 16px; margin-bottom: 28px; }
  .feature-row__photo { width: 100%; }
  .feature-row__body { padding: 16px 20px; }
  .feature-row__num { font-size: 32px; }
  .feature-row__title { font-size: 19px; }
  .feature-row__desc { font-size: 14px; }
  .brands-box { flex-direction: column; padding: 20px; gap: 20px; }
  .brands-box__heading { font-size: 17px; text-align: center; }
  .brands-box__desc { font-size: 13px; text-align: center; }
  .brands-box__logos { padding: 12px; }
  .brands-box__logos img { max-width: 280px; }

  .coverage { padding: 32px 0; }
  .coverage__bg { width: 80%; left: -20%; opacity: 0.3; }
  .coverage__heading { font-size: 24px; }
  .coverage__desc { font-size: 14px; text-align: left; }
  .coverage__highlight { font-size: 19px; margin-bottom: 24px; }
  .coverage__sub { font-size: 20px; gap: 10px; }
  .coverage__line { max-width: 40px; }
  .coverage__tags span { font-size: 13px; padding: 6px 12px; }

  .faq { padding: 32px 0; }
  .faq__heading { font-size: 26px; }
  .faq__desc { font-size: 14px; margin-bottom: 20px; }
  .faq__item summary { font-size: 15px; padding: 16px 40px 16px 16px; }
  .faq__q { font-size: 22px; }
  .faq__a { padding: 0 16px 20px 16px; }
  .faq__a-mark { font-size: 22px; }
  .faq__a p { font-size: 14px; }

  .final-cta { padding: 24px 0; }
  .final-cta__bg { background: url("assets/cv-bg-bottom-sp.jpg") center / cover no-repeat, var(--color-blue); }
  .final-cta__heading { font-size: 22px; margin-bottom: 16px; }
  .final-cta__card { padding: 16px; }
  .final-cta__phone { max-width: none; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__links { flex-direction: column; gap: 10px; }
}

/* ========== SP追従バナー ========== */
.sp-fixed-foot { display:none; }
@media screen and (max-width:768px) {
  .sp-fixed-foot {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:9999;
    box-shadow:0 -2px 10px rgba(0,0,0,.15);
  }
  .sp-fixed-foot__btn {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:8px 4px; text-decoration:none; color:#fff; gap:2px;
  }
  .sp-fixed-foot__btn--orange { background:linear-gradient(180deg,#f7931e,#e67e22); }
  .sp-fixed-foot__btn--blue { background:linear-gradient(180deg,#2196f3,#1565c0); }
  .sp-fixed-foot__btn--green { background:linear-gradient(180deg,#4eb824,#388e3c); }
  .sp-fixed-foot__icon img { width:22px; height:22px; }
  .sp-fixed-foot__label { font-size:12px; font-weight:700; }
  .sp-fixed-foot__sub { font-size:9px; opacity:.85; }
  /* 追従バナー分の余白 */
  body.sp-fixed-active { padding-bottom:72px; }
}

/* ========== page-top ========== */
#page-top { z-index:998; }

/* ============ SP CTA Phone (コールデータバンク対応) ============ */
.cta-sp-phone {
  text-align: center;
  width: 100%;
  max-width: 352px;
  margin: 0 auto;
}
.cta-sp-phone__label {
  font-weight: 700;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}
.cta-sp-phone__number {
  display: block;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 32px;
  color: var(--color-blue);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* ============ Duct cleaning（ダクトクリーニング）2026-09-18 追加 ============ */
.duct {
  padding: 50px 0 60px;
  background: var(--color-white);
}
.duct__head {text-align: center; margin-bottom: 28px;}
.duct__heading {
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.5;
  margin-bottom: 16px;
}
.duct__lead {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  max-width: 860px;
  margin: 0 auto;
}
.duct__figure {margin-bottom: 28px; text-align: center;}
.duct__photo {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}
.duct__effects {
  max-width: 720px;
  margin: 0 auto 28px;
  background: #eefaff;
  border-radius: 4px;
  padding: 20px 28px;
}
.duct__effects-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--color-blue);
  margin-bottom: 10px;
}
.duct__effects-list {
  margin: 0 0 12px;
  padding-left: 1.4em;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}
.duct__method {font-size: 13px; color: #666;}
.duct__box {background: #f5f5f5; border-radius: 8px; padding: 32px 40px;}
.duct__box-heading {
  font-weight: 900;
  font-size: 24px;
  text-align: center;
  margin-bottom: 8px;
}
.duct__box-desc {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 20px;
}
.duct__cards {display: flex; gap: 24px;}
.duct__card {flex: 1; background: #fff; border-radius: 4px; padding: 20px 18px;}
.duct__card-title {font-weight: 700; font-size: 17px; margin-bottom: 6px;}
.duct__card-price {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-red);
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.duct__card-price span {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark);
  margin-left: 2px;
}
.duct__card-note {font-size: 13px; color: #666; line-height: 1.6;}
.duct__notes {
  list-style: none;
  margin-top: 20px;
  font-size: 13px;
  color: #444;
  line-height: 1.9;
  text-align: left;
}
.duct__notes li {padding-left: 1.2em; text-indent: -1.2em;}
.duct__more {text-align: center; margin-top: 24px;}
.duct__link {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.duct__link::after {content: " \2192";}

/* 料金表に足した1行 */
.pricing__box-duct a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (max-width:768px) {
  .duct {padding: 32px 0 40px;}
  .duct__head {margin-bottom: 20px;}
  .duct__heading {font-size: 22px;}
  .duct__lead {font-size: 14px; text-align: left;}
  .duct__figure {margin-bottom: 20px;}
  .duct__effects {padding: 16px 18px; margin-bottom: 20px;}
  .duct__effects-title {font-size: 15px;}
  .duct__effects-list {font-size: 14px;}
  .duct__box {padding: 20px 16px;}
  .duct__box-heading {font-size: 20px;}
  .duct__box-desc {font-size: 13px; text-align: left;}
  .duct__cards {flex-direction: column; gap: 14px;}
  .duct__card-title {font-size: 16px;}
  .duct__card-price {font-size: 26px;}
  .duct__notes {font-size: 12px;}
  .duct__link {font-size: 14px;}
}

/* ============ 施工事例：カードを3カラムに揃える（2026-09-24 調整） ============ */
/* 既存は display:flex のため、7枚を開くとPCで横1列に潰れていた。
   グリッドに変えて、開いた後も3カラム（3＋6＝最大9件）で並ぶようにする */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ============ 施工事例：一覧への導線（2026-09-24 追加） ============ */
.cases__all {text-align: center;}

/* details の中。開いたときに、カードと「閉じる」の間に出る */
.cases__all--inner {margin-bottom: 24px;}

/* details の外。閉じている間だけ出す（開いたら中側と二重になるので消す）
   margin-top    : .cases__more の margin-bottom（PC48px／SP32px）を打ち消す
   margin-bottom : 直後の .cases__cta は margin-top を持たず、さらに
                   .cases__cta-badge が top:-20px で上にはみ出すため、
                   ここで余白を取らないとボタンが青いブロックに接する */
.cases__all--outer {margin-top: -24px; margin-bottom: 48px;}
.cases__more-wrap[open] + .cases__all--outer {display: none;}
.cases__all-btn {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--color-blue);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-blue);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}
.cases__all-btn::after {content: " \2192";}

@media screen and (max-width:768px) {
  .cases__grid {grid-template-columns: 1fr; gap: 16px;}
  .cases__all--inner {margin-bottom: 16px;}
  .cases__all--outer {margin-top: -16px; margin-bottom: 32px;}
  .cases__all-btn {
    display: block;
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
  }
}


/* ============ B案：「もっと見る」を開いたときだけ一覧ボタンを出す ============ */
.cases__all--outer {display: none;}


/* ============ 施工事例：LP内で読み進める（2026-10-09 変更） ============
   「愛知県の施工事例をすべて見る」で一覧ページへ送るのをやめ、
   「さらに20件見る」でその場に20件ずつ足していく形に変更した。
   .cases__more-wrap は column-reverse で「閉じる」を最下部に出していたが、
   追加ボタンを「カードの下・閉じるの上」に置く必要があるので order で明示する */
.cases__more-wrap { flex-direction: column; }
.cases__grid--extra { order: 1; }
.cases__all--inner  { order: 2; }
.cases__more        { order: 3; }

/* a から button に差し替わるので、ブラウザ既定の見た目を打ち消す */
button.cases__all-btn {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button.cases__all-btn[disabled] { opacity: .5; cursor: default; }

/* ページ遷移ではないので矢印を下向きにする */
.cases__all-btn.cases__all-btn--more::after { content: " \2193"; }

/* 追加読み込み時にブラウザがスクロール位置を自動補正しないようにする
   （補正が働くと、追加した20件が画面の上へ流れてしまう） */
.cases__more-wrap { overflow-anchor: none; }