/* トップページのヒーロー（画像を使わずコードで描画）
   デザイン基準：PC 1363×580、SP 750×938。
   --u は基準幅 1px 相当。.image をコンテナにして、画像と同じ比率で拡大縮小する。 */
.hero .image:has(.hc) {
  container-type: inline-size;
}

.hc {
  --u: calc(100cqw / 1363);
  --sky: #2aa9e1;
  --orange: #f7920e;
  --ink: #1a1a1a;
  --blue: #008756;
  position: relative;
  aspect-ratio: 1363 / 580;
  overflow: hidden;
  /* 草原：手前と奥の丘を楕円で重ね、地平線に向かって明るくなる空の上に置く */
  background:
    radial-gradient(55% 20% at 95% 106%, #56ad35 99.5%, transparent 100%),
    radial-gradient(45% 24% at 5% 104%, #6fc043 99.5%, transparent 100%),
    radial-gradient(80% 34% at 75% 106%, #8fd156 99.5%, transparent 100%),
    radial-gradient(70% 38% at 30% 105%, #b3e27a 99.5%, transparent 100%),
    linear-gradient(180deg, var(--sky) 0%, #62c3ec 35%, #b4e4f5 58%, #e6f6d6 70%);
  color: var(--ink);
  font-family: "Rounded Mplus 1c", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.hc *,
.hc *::before,
.hc *::after {
  box-sizing: border-box;
}

.hc p {
  margin: 0;
}

.hc > * {
  position: absolute;
}

.hc img {
  display: block;
  height: auto;
  max-width: none;
}

.hc .hc-sp {
  display: none;
}

/* 白フチ文字 */
.hc .hc-stroke {
  -webkit-text-stroke: calc(9 * var(--u)) #fff;
  paint-order: stroke fill;
}

.hc .o {
  color: var(--orange);
}

/* ---------- 見出し ---------- */
.hc-title {
  left: calc(290 * var(--u));
  width: calc(546 * var(--u));
  top: calc(28 * var(--u));
  text-align: center;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .18));
}

.hc-title .l1,
.hc-title .l2 {
  display: block;
  white-space: nowrap;
}

.hc-title .l1 {
  font-size: calc(46 * var(--u));
  letter-spacing: .04em;
}

.hc-title .l1 small {
  font-size: calc(32 * var(--u));
  letter-spacing: .02em;
}

.hc-title .l2 {
  margin-top: calc(22 * var(--u));
  font-size: calc(44 * var(--u));
  letter-spacing: .04em;
}

.hc-title .l2 .num {
  font-size: calc(66 * var(--u));
  letter-spacing: 0;
}

.hc-title .l2 small {
  font-size: calc(32 * var(--u));
}

.hc-title .l2 .big {
  font-size: calc(50 * var(--u));
}

/* ---------- 3つの丸 ---------- */
.hc-points {
  top: calc(172 * var(--u));
  left: calc(338 * var(--u));
  display: flex;
  align-items: center;
}

.hc-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(212 * var(--u));
  height: calc(212 * var(--u));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 40, 90, .18);
  text-align: center;
}

.hc-point:nth-child(3) {
  margin-top: calc(-14 * var(--u));
}

.hc-times {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  flex: none;
  margin: 0 calc(-16 * var(--u));
  z-index: 1;
}

.hc-point .zero {
  flex-direction: row;
  display: flex;
  align-items: flex-end;
  gap: calc(4 * var(--u));
}

.hc-point .zero .lbl {
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  margin-bottom: calc(26 * var(--u));
  text-align: left;
}

.hc-point .zero .n {
  font-size: calc(118 * var(--u));
  font-family: "Arial Rounded MT Bold", "Rounded Mplus 1c", sans-serif;
  color: var(--orange);
  line-height: .9;
}

.hc-point .zero .yen {
  font-size: calc(26 * var(--u));
  margin-bottom: calc(12 * var(--u));
}

.hc-point .sub {
  font-size: calc(30 * var(--u));
  margin-bottom: calc(10 * var(--u));
}

.hc-point .main {
  color: var(--orange);
  font-size: calc(50 * var(--u));
  line-height: 1.12;
}

.hc-point .main.xl {
  font-size: calc(74 * var(--u));
}

/* ---------- 右の雲の吹き出し ---------- */
.hc-bubble {
  top: calc(186 * var(--u));
  left: calc(1022 * var(--u));
  width: calc(186 * var(--u));
  height: calc(132 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(16 * var(--u));
  line-height: 1.55;
}

.hc-bubble svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hc-bubble p {
  position: relative;
  padding-top: calc(4 * var(--u));
}

.hc-bubble .o {
  font-size: calc(18 * var(--u));
}

/* ---------- 雲・鳥 ---------- */
.hc-cloud {
  fill: #fff;
}

.hc-cloud.c1 { top: calc(34 * var(--u)); left: calc(48 * var(--u)); width: calc(80 * var(--u)); }
.hc-cloud.c2 { top: calc(104 * var(--u)); left: calc(38 * var(--u)); width: calc(140 * var(--u)); }
.hc-cloud.c3 { top: calc(196 * var(--u)); left: calc(1214 * var(--u)); width: calc(90 * var(--u)); }

.hc-birds {
  top: calc(424 * var(--u));
  left: calc(1222 * var(--u));
  width: calc(56 * var(--u));
}

/* ---------- 街並み・キャラクター ---------- */
.hero .image .hc-town {
  top: calc(318 * var(--u));
  left: calc(262 * var(--u));
  width: calc(1060 * var(--u));
  /* 草原の画像の下端と左右端を背景の丘へなじませる */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 96%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

.hero .image .hc-mascot {
  top: calc(180 * var(--u));
  left: calc(108 * var(--u));
  width: calc(206 * var(--u));
  filter: drop-shadow(0 0 calc(3 * var(--u)) #fff) drop-shadow(0 0 calc(2 * var(--u)) #fff);
}


/* ---------- 最安値に挑戦中 ---------- */
.hc-challenge {
  top: calc(450 * var(--u));
  left: calc(376 * var(--u));
  font-size: calc(22 * var(--u));
  letter-spacing: .04em;
  white-space: nowrap;
  -webkit-text-stroke: calc(7 * var(--u)) #fff;
  paint-order: stroke fill;
}

.hc-challenge .big {
  font-size: calc(28 * var(--u));
}

/* ---------- 実績バッジ ---------- */
.hc-badges {
  top: calc(490 * var(--u));
  left: calc(310 * var(--u));
  display: flex;
  gap: calc(22 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-badge {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(64 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(72 * var(--u));
  background: #fff;
  white-space: nowrap;
}

.hc-badge .tag {
  position: absolute;
  top: calc(12 * var(--u));
  left: 0;
  display: flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(4 * var(--u));
  background: #f7931e;
  color: #fff;
  font-size: calc(16 * var(--u));
  clip-path: polygon(0 0, calc(100% - 12 * var(--u)) 0, 100% 50%, calc(100% - 12 * var(--u)) 100%, 0 100%);
}

.hc-badge .desc {
  font-size: calc(14 * var(--u));
  line-height: 1.3;
  margin-right: calc(10 * var(--u));
}

.hc-badge .desc small {
  font-size: calc(11 * var(--u));
}

.hc-badge .n {
  color: var(--orange);
  font-size: calc(42 * var(--u));
  font-family: "Arial Rounded MT Bold", "Rounded Mplus 1c", sans-serif;
}

.hc-badge .unit {
  font-size: calc(16 * var(--u));
  margin: calc(14 * var(--u)) 0 0 calc(6 * var(--u));
}

/* ================= SP（750×938） ================= */
@media screen and (max-width: 768px) {
  .hc {
    --u: calc(100cqw / 750);
    aspect-ratio: 750 / 938;
  }

  .hc .hc-pc {
    display: none;
  }

  .hc .hc-sp {
    display: block;
  }

  .hc .hc-stroke {
    -webkit-text-stroke: calc(11 * var(--u)) #fff;
  }

  .hc-title {
    top: calc(40 * var(--u));
    left: 0;
    width: 100%;
  }

  .hc-title .l1 { font-size: calc(50 * var(--u)); letter-spacing: .02em; }
  .hc-title .l1 small { font-size: calc(36 * var(--u)); }
  .hc-title .l2 { margin-top: calc(30 * var(--u)); font-size: calc(50 * var(--u)); letter-spacing: .02em; }
  .hc-title .l2 .num { font-size: calc(92 * var(--u)); }
  .hc-title .l2 small { font-size: calc(36 * var(--u)); }
  .hc-title .l2 .big { font-size: calc(58 * var(--u)); }

  .hc-points {
    top: calc(240 * var(--u));
    left: calc(28 * var(--u));
  }

  .hc-point {
    width: calc(208 * var(--u));
    height: calc(208 * var(--u));
  }

  .hc-point:nth-child(3) {
    margin-top: 0;
  }

  .hc-times {
    width: calc(58 * var(--u));
    height: calc(58 * var(--u));
    margin: 0 calc(-10 * var(--u));
  }

  /* SP 専用：吹き出しとコピー */
  .hc-free {
    top: calc(478 * var(--u));
    left: calc(300 * var(--u));
    font-size: calc(28 * var(--u));
    color: #ffc961;
    transform: rotate(-7deg);
    -webkit-text-stroke: calc(5 * var(--u)) #049849;
    paint-order: stroke fill;
    white-space: nowrap;
  }

  .hc-lines {
    top: calc(446 * var(--u));
    left: calc(240 * var(--u));
    width: calc(420 * var(--u));
  }

  .hc-consult {
    top: calc(540 * var(--u));
    left: calc(330 * var(--u));
    width: calc(392 * var(--u));
    text-align: center;
    font-size: calc(44 * var(--u));
    line-height: 1.25;
    color: var(--orange);
    -webkit-text-stroke: calc(12 * var(--u)) #fff;
    paint-order: stroke fill;
    filter:
      drop-shadow(calc(2 * var(--u)) 0 0 var(--orange))
      drop-shadow(calc(-2 * var(--u)) 0 0 var(--orange))
      drop-shadow(0 calc(2 * var(--u)) 0 var(--orange))
      drop-shadow(0 calc(-2 * var(--u)) 0 var(--orange));
  }

  .hc-challenge {
    top: calc(684 * var(--u));
    left: calc(336 * var(--u));
    font-size: calc(32 * var(--u));
    line-height: 1.5;
    -webkit-text-stroke: calc(9 * var(--u)) #fff;
  }

  .hc-challenge .big {
    font-size: calc(46 * var(--u));
  }

  .hc-challenge br {
    display: inline;
  }

  .hc-cloud.c1 { top: calc(486 * var(--u)); left: calc(56 * var(--u)); width: calc(110 * var(--u)); }

  .hero .image .hc-town {
    top: calc(730 * var(--u));
    left: calc(-190 * var(--u));
    width: calc(560 * var(--u));
  }

  .hero .image .hc-mascot {
    top: calc(556 * var(--u));
    left: calc(96 * var(--u));
    width: calc(196 * var(--u));
  }


  .hc-badges {
    top: calc(842 * var(--u));
    left: calc(10 * var(--u));
    gap: calc(12 * var(--u));
  }

  .hc-badge {
    height: calc(64 * var(--u));
    padding: 0 calc(8 * var(--u)) 0 calc(62 * var(--u));
  }

  .hc-badge .tag {
    top: calc(14 * var(--u));
    left: calc(-4 * var(--u));
    height: calc(36 * var(--u));
    padding: 0 calc(14 * var(--u)) 0 calc(6 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .hc-badge .desc { font-size: calc(15 * var(--u)); margin-right: calc(6 * var(--u)); }
  .hc-badge .n { font-size: calc(40 * var(--u)); }
}

@media screen and (min-width: 769px) {
  .hc-challenge br {
    display: none;
  }
}

/* 見出しを丸3つと同じ中心線（ヒーロー中央）にそろえる */
.hc-title {
  left: 0;
  width: 100%;
}

/* ---------- 実績バッジ：文字を大きく（見やすさ改善） ---------- */
.hc-badges { top: calc(478 * var(--u)); left: calc(250 * var(--u)); gap: calc(20 * var(--u)); }
.hc-badge { height: calc(84 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(92 * var(--u)); border-radius: calc(6 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .12); }
.hc-badge .tag { top: calc(18 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(22 * var(--u)); }
.hc-badge .desc { font-size: calc(19 * var(--u)); line-height: 1.25; margin-right: calc(10 * var(--u)); }
.hc-badge .desc small { font-size: calc(15 * var(--u)); }
.hc-badge .n { font-size: calc(54 * var(--u)); }
.hc-badge .unit { font-size: calc(21 * var(--u)); margin-top: calc(18 * var(--u)); }

/* SP：3つを縦並びカード（タグ／説明／数字）にして文字を大きく */
@media screen and (max-width: 768px) {
  .hc-badges { top: calc(790 * var(--u)); left: calc(16 * var(--u)); right: calc(16 * var(--u)); gap: calc(12 * var(--u)); }
  .hc-badge {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    height: calc(136 * var(--u));
    padding: calc(34 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
    white-space: nowrap;
  }
  .hc-badge .tag {
    top: 0; left: 0; right: 0;
    height: calc(34 * var(--u));
    justify-content: center;
    padding: 0;
    font-size: calc(24 * var(--u));
    clip-path: none;
    border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0;
  }
  .hc-badge .desc { font-size: calc(22 * var(--u)); margin: 0 0 calc(2 * var(--u)); text-align: center; }
  .hc-badge .desc br { display: none; }
  .hc-badge .desc small { font-size: calc(17 * var(--u)); }
  .hc-badge .n { font-size: calc(52 * var(--u)); line-height: 1; }
  .hc-badge .unit { font-size: calc(22 * var(--u)); margin: 0 0 0 calc(2 * var(--u)); }
}
@media screen and (max-width: 768px) {
  .hc-badges { top: calc(814 * var(--u)); }
  .hc-badge {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: baseline;
    height: calc(116 * var(--u));
    padding-top: calc(36 * var(--u));
  }
  .hc-badge .desc { flex-basis: 100%; }
  .hc-badge .n { font-size: calc(50 * var(--u)); }
}

/* 「回収相場を毎月チェックし〜」とバッジの間に余白 */
.hc-challenge { top: calc(436 * var(--u)); }
.hc-badges { top: calc(488 * var(--u)); }
@media screen and (max-width: 768px) {
  .hc-challenge { top: calc(666 * var(--u)); }
  .hc-badges { top: calc(818 * var(--u)); }
}