@charset "utf-8";

/* ============================================================
   ルート変数 & 基本設定
   ============================================================ */
:root {
  --comic: #f3ea21;
  --gold: #f4da5f;
  --pale: #faf1a4;
  --cream: #fcf5d9;
  --orange: #ea6601;
  --orange-d: #d75c00;
  --red: #e60012;
  --red-d: #c3000f;
  --blue: #1414e6;
  --ink: #151515;
  --yl: #fff23f;
  --f-gothic: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --f-round: var(--f-gothic);
  /* 明朝体。見出し向けの太いウェイトを持つ「しっぽり明朝 B1」を基本にする */
  --f-mincho: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
  html {
    font-size: calc(100vw / 48);
  }
}

body {
  margin: 0;
  background: #efefef;
  font-family: var(--f-gothic);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

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

ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lp {
  max-width: 48rem;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1024px) {
  .lp {
    margin: 1.25rem auto;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  }
}

/* ------------------------------------------------------------
   共通ユーティリティ
------------------------------------------------------------ */
.rd {
  color: var(--red);
}

.or {
  color: var(--orange);
}

.bl {
  color: var(--blue);
}

.yl {
  color: var(--yl);
}

.u {
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .16em;
}

.pro__warning-underline {
  text-decoration-color: var(--orange);
}

.mk {
  background: linear-gradient(transparent 56%, var(--yl) 56%, var(--yl) 94%, transparent 94%);
}

.zigzag {
  text-decoration: underline wavy var(--red);
  text-decoration-thickness: .06em;
  text-underline-offset: .18em;
}

.d {
  display: block;
  border-bottom: 2px dotted var(--ink);
  padding-bottom: .12em;
  margin-bottom: .22em;
}

.d:last-child {
  border-bottom: 0;
}

.nw {
  display: block;
  white-space: nowrap;
}

/* 手書き風ゆらぎ */
.rough,
.rough-s {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.rough::before,
.rough-s::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rb, #fff);
  border: var(--rw, .25rem) solid var(--rc, var(--ink));
  border-radius: var(--rr, .9rem);
}

.rough::before {
  filter: url(#rough);
}

.rough-s::before {
  filter: url(#rough-s);
}

/* 吹き出し */
.balloon {
  position: relative;
  background: var(--bal, #fff);
  border: .28rem solid var(--ink);
  border-radius: 1rem;
}

.balloon::before,
.balloon::after {
  content: "";
  position: absolute;
  left: var(--tx, 16%);
}

.balloon::before {
  bottom: -2.1rem;
  width: 3.2rem;
  height: 2.2rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 38% 100%);
}

.balloon::after {
  bottom: -1.45rem;
  margin-left: .32rem;
  width: 2.4rem;
  height: 1.5rem;
  background: var(--bal, #fff);
  clip-path: polygon(0 0, 100% 0, 38% 100%);
}

/* キラキラ（スパークル）。#sparkle を大小ランダムに散らして使う。
   塗りつぶし（黄＋細い黒フチ）と、線だけの 2 種類。 */
.spark {
  position: absolute;
  z-index: 1;
  width: 2.4rem;
  aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
  fill: #ffea00;
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 1;
}

.spark--line {
  fill: none;
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 1.3;
}

.chevron-down {
  position: relative;
  /* 本家 3.jpg 実測: 黒帯 18px + 三角 107px = 125px */
  height: 3.75rem;
  background: linear-gradient(var(--ink) 0 .54rem, transparent .54rem);
}

.chevron-down::after {
  content: "";
  position: absolute;
  /* 三角は黒帯の下端から始まる（本家は帯と三角が段差なく繋がる） */
  top: .54rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.36rem;
  height: 3.21rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.chevron-up {
  height: 3.6rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 22%, 50% 100%, 0 22%);
}

.chevron-up--white {
  background: #fff;
}

/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */
.hd {
  position: relative;
  height: 5.4rem;
  background: #000;
  z-index: 5;
}

.hd__logo {
  position: absolute;
  top: .82rem;
  left: .92rem;
  width: 12rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  padding: 0 .52rem .18rem;
  color: var(--comic);
  background: var(--comic);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 61% 82%, 57% 100%, 50% 83%, 43% 100%, 39% 82%, 0 100%);
  font-family: var(--f-round);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.1em;
  filter: drop-shadow(.08rem .08rem 0 #000);
  isolation: isolate;
}

.hd__logo::before {
  content: "";
  position: absolute;
  inset: .22rem .22rem .3rem;
  z-index: -1;
  background: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 61% 80%, 57% 98%, 50% 81%, 43% 98%, 39% 80%, 0 100%);
}

.brand-logo__aircon {
  font-size: 1.53rem;
  -webkit-text-stroke: .035rem currentColor;
  white-space: nowrap;
}

.brand-logo__king {
  font-size: 1.18rem;
  white-space: nowrap;
}

.brand-logo__wind {
  position: relative;
  width: 1.42rem;
  height: 1rem;
  flex: none;
}

.brand-logo__wind::before {
  content: "";
  position: absolute;
  left: -.08rem;
  top: .1rem;
  width: 1.25rem;
  height: .7rem;
  border: .16rem solid currentColor;
  border-left: 0;
  border-radius: 0 .5rem .5rem 0;
  transform: skewX(17deg);
}

.brand-logo__wind i {
  position: absolute;
  left: -.5rem;
  width: .72rem;
  height: .12rem;
  background: currentColor;
  transform: skewX(-22deg);
}

.brand-logo__wind i:nth-child(1) {
  top: .14rem;
}

.brand-logo__wind i:nth-child(2) {
  top: .44rem;
  left: -.68rem;
  width: .92rem;
}

.brand-logo__wind i:nth-child(3) {
  top: .74rem;
}

.hd__tel {
  position: absolute;
  top: 1.05rem;
  right: 1.05rem;
  width: 16.6rem;
}

@media (min-width: 1024px) {
  .hd__logo {
    left: 2.5rem;
  }

  .hd__tel {
    right: 2.5rem;
  }
}

.telblock {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--comic);
}

.telblock__icon {
  position: relative;
  display: block;
  /* viewBox 106:100 と同じ比率にして余白が出ないようにする */
  width: 2.6rem;
  height: 2.45rem;
  flex: none;
  fill: var(--comic);
}

.telblock__handset {
  position: absolute;
  left: .15rem;
  bottom: .05rem;
  width: 1.35rem;
  height: 2rem;
  border: .4rem solid var(--comic);
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: .35rem .2rem .65rem .55rem;
  transform: rotate(-25deg);
}

.telblock__handset::before,
.telblock__handset::after {
  content: "";
  position: absolute;
  width: .72rem;
  height: .42rem;
  background: var(--comic);
  border-radius: .15rem;
}

.telblock__handset::before {
  left: -.35rem;
  top: -.25rem;
  transform: rotate(18deg);
}

.telblock__handset::after {
  right: -.22rem;
  bottom: -.3rem;
  transform: rotate(18deg);
}

.telblock__chat {
  position: absolute;
  right: -.15rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  width: 1.8rem;
  height: 1.18rem;
  background: var(--comic);
  border-radius: 50%;
}

.telblock__chat::after {
  content: "";
  position: absolute;
  left: .2rem;
  bottom: -.35rem;
  border-style: solid;
  border-width: .38rem .38rem 0 0;
  border-color: var(--comic) transparent transparent transparent;
  transform: rotate(12deg);
}

.telblock__chat i {
  width: .18rem;
  height: .18rem;
  border-radius: 50%;
  background: #000;
}

.telblock__body {
  flex: 1;
  min-width: 0;
}

.telblock__num {
  display: block;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 1.86rem;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.telblock__hours {
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: .18rem;
  justify-content: flex-end;
}

.telblock__hours i {
  display: block;
  width: 2.4rem;
  height: .16rem;
  background: currentColor;
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero {
  position: relative;
  height: 29.85rem;
  background: var(--comic);
  overflow: hidden;
}

.hero__rays {
  position: absolute;
  inset: -18% -12%;
  background:
    repeating-conic-gradient(from 0deg at 50% 45%, var(--ink) 0deg .95deg, transparent .95deg 4.6deg),
    repeating-conic-gradient(from 2.2deg at 50% 45%, var(--ink) 0deg .45deg, transparent .45deg 7.1deg);
}

.hero__ac {
  position: absolute;
  left: 30.0rem;
  top: -6.8rem;
  width: 29.5rem;
  z-index: 7;
}

.hero__box {
  position: absolute;
  left: 2.1rem;
  top: 10.05rem;
  width: 43.15rem;
  height: 19.15rem;
  background: var(--ink);
  clip-path: polygon(.6% 2.2%, 99.2% 0, 100% 96.5%, 96% 99.2%, 3% 100%, 0 96%);
}

.hero__box::after {
  content: "";
  position: absolute;
  inset: .42rem;
  background: #fff;
  clip-path: polygon(.5% 1.5%, 99.5% 0, 100% 96.5%, 96% 99.5%, 3% 100%, 0 96%);
}

.aircon-banner {
  position: absolute;
  left: .68rem;
  top: -.6rem;
  width: 18.65rem;
  height: 12.6rem;
  z-index: 6;
  padding-top: 2rem;
  background: #e21e26;
  color: #fff;
  text-align: center;
  clip-path: polygon(0% 12%, 100% 0%, 99% 72%, 59% 74%, 44% 86%, 59% 84%, 33% 100%, 40% 87%, 28% 89%, 34% 76%, 0% 77%);
  filter: drop-shadow(.2rem .26rem 0 rgba(0, 0, 0, .55));
  /* 3 行すべてに影を付けて文字を浮かせる。
     em 指定なので大きい「業務用エアコン」の行だけ影も比例して太くなる。 */
  /* 2 枚重ねて隙間を埋め、くっきりした真っ黒の影にする */
  text-shadow: .05em .07em 0 #000, .09em .12em 0 #000;
}

.aircon-banner .small {
  display: block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .01em;
}

.aircon-banner .main {
  display: block;
  margin-top: .5rem;
  font-size: 2.28rem;
  font-weight: 900;
  color: var(--comic);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}

.aircon-banner .sub {
  display: block;
  margin-top: .55rem;
  font-size: 1.62rem;
  font-weight: 900;
  line-height: 1;
}

.hero__cap {
  position: absolute;
  left: 20.25rem;
  top: 1.75rem;
  width: 16.1rem;
  height: 2.94rem;
  z-index: 5;
  padding: .42rem 0 0 1.5rem;
  background: var(--ink);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 3%, 99% 82%, 86% 96%, 62% 84%, 40% 100%, 18% 86%, 0 94%);
}

.hero__bolt {
  position: absolute;
  left: 18.55rem;
  top: 2.15rem;
  width: 2.1rem;
  height: 7.4rem;
  z-index: 4;
  background: var(--ink);
  clip-path: polygon(62% 0, 8% 46%, 58% 40%, 0 100%, 46% 44%, 96% 50%);
}

.hero__num {
  position: absolute;
  left: 18.9rem;
  top: 2.2rem;
  width: 27.15rem;
  height: 8.65rem;
  z-index: 3;
  padding: 3.75rem 0 0 2.5rem;
  background: var(--orange);
  clip-path: polygon(3% 30%, 100% 0, 100% 94%, 0 100%, 1% 62%, 4% 56%);
  white-space: nowrap;
}

.hero__num b {
  display: inline-block;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 4.15rem;
  font-style: italic;
  line-height: .74;
  color: var(--yl);
  letter-spacing: -.05em;
  -webkit-text-stroke: .34rem var(--ink);
  paint-order: stroke fill;
  transform: scaleX(.92);
  transform-origin: left center;
}

.hero__num span {
  display: inline-block;
  margin-left: -.75rem;
  font-size: 2.05rem;
  font-weight: 900;
  font-style: italic;
  color: #fff;
  letter-spacing: -.02em;
  -webkit-text-stroke: .26rem var(--ink);
  paint-order: stroke fill;
}

.hero__num span i {
  font-style: italic;
  letter-spacing: .04em;
}

.hero__coupon {
  position: absolute;
  left: 2.3rem;
  top: 10.85rem;
  width: 25rem;
  z-index: 5;
  background: #ef1018;
  border: .42rem solid var(--ink);
  border-radius: .8rem;
  transform: rotate(2deg);
  filter: drop-shadow(.2rem .3rem 0 rgba(0, 0, 0, .3));
}

.hero__coupon::before {
  content: "";
  position: absolute;
  inset: .42rem;
  border: .17rem dashed #fff;
  border-radius: .5rem;
}

.coupon__max {
  position: absolute;
  left: 2.5rem;
  top: 2.65rem;
  writing-mode: vertical-rl;
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: .42rem var(--ink);
  paint-order: stroke fill;
}

.coupon__num {
  position: absolute;
  left: 6.6rem;
  top: 1.15rem;
  display: block;
  width: 16.8rem;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 12.5rem;
  line-height: .8;
  letter-spacing: -.03em;
  color: #fff;
  -webkit-text-stroke: .58rem var(--ink);
  paint-order: stroke fill;
  transform: scaleX(.8);
  transform-origin: left top;
}

.coupon__pct {
  position: absolute;
  right: 1.55rem;
  top: 2.05rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #fff;
  transform: scaleX(.8);
  transform-origin: right top;
}

.coupon__pct i {
  font-family: var(--f-round);
  font-style: normal;
  font-weight: 900;
  font-size: 9.1rem;
  line-height: .72;
  -webkit-text-stroke: .5rem var(--ink);
  paint-order: stroke fill;
}

.coupon__pct em {
  margin-top: -.15rem;
  font-family: var(--f-round);
  font-style: normal;
  font-weight: 900;
  font-size: 4.7rem;
  line-height: .78;
  letter-spacing: -.02em;
  -webkit-text-stroke: .42rem var(--ink);
  paint-order: stroke fill;
}

.hero__flag {
  position: absolute;
  left: 31.5rem;
  top: 13.2rem;
  width: 11.35rem;
  height: 3.31rem;
  z-index: 5;
  display: grid;
  place-items: center;
  background: var(--comic);
  border: .22rem solid var(--ink);
  border-radius: .3rem;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .01em;
}

.hero__flag::after {
  content: "";
  position: absolute;
  left: 3.4rem;
  top: 100%;
  width: 3.7rem;
  height: 2.4rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.pie {
  position: absolute;
  left: 31.65rem;
  top: 16.3rem;
  z-index: 4;
  width: 10.7rem;
  height: 10.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .34) .11rem, transparent .12rem) 0 0 / .44rem .44rem,
    conic-gradient(from -7deg,
      var(--ink) 0 1.3deg,
      #d3d3d3 1.3deg 13deg,
      var(--ink) 13deg 14.3deg,
      #f16a00 14.3deg 360deg);
  border: .26rem solid var(--ink);
  display: grid;
  place-items: center;
}

.pie__num {
  position: relative;
  z-index: 2;
  font-family: var(--f-round);
  font-weight: 900;
  font-size: 4.4rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -.06em;
  padding: 0 .06em;
  -webkit-text-stroke: .72rem var(--ink);
  paint-order: stroke fill;
  transform: scaleX(.9);
}

.pie__num span {
  font-size: .56em;
}

.chip {
  /* var(--red) より少し朱色寄りで淡い赤 */
  --chip-red: #eb4833;
  position: absolute;
  top: 24.2rem;
  height: 5.95rem;
  z-index: 5;
  padding-top: .6rem;
  background: var(--yl);
  border: .2rem solid var(--ink);
  border-radius: .2rem;
  transform: skewX(-8deg);
  text-align: center;
  line-height: 1;
}

.chip--a {
  left: 5.1rem;
  width: 12rem;
}

.chip--b {
  left: 17.5rem;
  width: 12.3rem;
}

.chip b {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  font-style: italic;
  color: var(--chip-red);
  letter-spacing: .01em;
}

.chip--b>b:first-child {
  font-size: 2.25rem;
}

.chip .lg {
  margin-top: .55rem;
  font-size: 2.6rem;
}

.chip--b span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .25rem;
  margin-top: .8rem;
}

.chip--b span i {
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 900;
  color: var(--chip-red);
}

.chip--b .md {
  display: inline;
  font-size: 2rem;
}

/* ------------------------------------------------------------
   SEC 02 : 事例価格
------------------------------------------------------------ */
.sec-example {
  position: relative;
  padding: 2.1rem 1.2rem 2.6rem;
  background: linear-gradient(#fff 0 15%, #fefecc 33%, #fffe89 55%, #fffe4c 78%, #fdfa0b 100%);
  border-bottom: .35rem solid var(--ink);
  text-align: center;
  padding-top: 2.6rem;
}

.toshiba-style {
  color: #E60012;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1;
  transform: scaleX(1.12);
  display: inline-block;
  margin-right: .8rem;
}

.ex__lead {
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: -.02em;
  text-align: left;
  padding-left: 2.2rem;
}

.ex__units {
  margin: .4rem 0 0;
  text-align: center;
}

.ex__units img {
  display: block;
  width: 44rem;
  height: auto;
  margin: 0 auto;
}

.ex__price {
  position: relative;
}

.ex__list-cap {
  font-size: 1.42rem;
  font-weight: 900;
}

.ex__yen {
  font-size: 1.3rem;
  font-weight: 900;
}

/* 位置・大きさ・色は css/hero-fidelity.css の「SEC02 事例価格」ブロックが持つ。 */
.ex__arrow {
  position: relative;
  isolation: isolate;
}

.ex__arrow-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ex__arrow-outline {
  /* Keep a deliberate white channel between the outer contour and red face. */
  fill: #fff;
  stroke: #c9c3a7;
  stroke-width: 2;
  stroke-linejoin: round;
}

.ex__arrow-face {
  fill: #df1c26;
}

.ex__burst {
  position: absolute;
  z-index: 4;
  top: -1.2rem;
  right: -.4rem;
  width: 28.5rem;
  aspect-ratio: 1024 / 626;
}










.ex__after {
  position: relative;
  z-index: 3;
  width: 16.4rem;
  margin: -1.3rem 0 0 -.6rem;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 900;
}







.ex_mascot {
  position: absolute;
  width: 18rem;
  height: auto;
  top: 10.75rem;
  right: -11.1rem;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ex__final {
    transform: translateY(-.6rem);
  }
}

/* ------------------------------------------------------------
   CTA ボタン
------------------------------------------------------------ */
.cta-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-top: 1rem;
}

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: 1.05rem 1rem 1.15rem;
  border-radius: 6rem;
  background: linear-gradient(#7ed321 0 6%, #4cae0d 6% 48%, #2f8f00 52% 94%, #57b41a 94%);
  border: .34rem solid var(--ink);
  box-shadow: 0 .25rem 0 rgba(0, 0, 0, .35);
  color: #fff;
  transition: opacity .2s;
}

.sec-example .cta,
.cta--bottom {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  animation: cta-pulse 2s infinite;
}

@keyframes cta-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {

  .sec-example .cta,
  .cta--bottom {
    animation: none;
  }
}

a.cta:hover {
  opacity: .85;
}

.cta__free {
  position: absolute;
  left: -.6rem;
  top: -1.0rem;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.2rem;
  background: #fff;
  border: .2rem solid #d8d8d8;
  border-radius: 50% 50% 46% 54% / 52% 48% 50% 50%;
  color: var(--orange);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  transform: rotate(-8deg);
  box-shadow: 0 .15rem .2rem rgba(0, 0, 0, .25);
}

.cta__label {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 .12rem .1rem rgba(0, 0, 0, .35);
}

.cta__arrow {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  border: .18rem solid #fff;
  border-radius: 50%;
  position: relative;
}

.cta__arrow::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: .8rem solid #fff;
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
}

.cta--mini {
  width: 16.6rem;
  padding: .55rem .6rem .6rem 1.9rem;
  border-width: .24rem;
}

.cta--mini .cta__free {
  width: 2.5rem;
  height: 2.1rem;
  font-size: .92rem;
  border-width: .14rem;
  top: -.5rem;
  left: -.2rem;
}

.cta--mini .cta__label {
  font-size: 1.3rem;
  white-space: nowrap;
}

.cta--mini .cta__arrow {
  width: 1.35rem;
  height: 1.35rem;
  border-width: .12rem;
}

.cta--mini .cta__arrow::after {
  border-left-width: .48rem;
  border-top-width: .3rem;
  border-bottom-width: .3rem;
}

/* ------------------------------------------------------------
   SEC 03 : 激安還元フェア
------------------------------------------------------------ */
.sec-fair {
  background: var(--pale);
  padding-bottom: 2rem;
  text-align: center;
}

.fair__ribbon {
  --rb: var(--orange);
  /* 本家 3.jpg 実測: 外周 x87..1512 / y148..401、角丸 84px、フチ 11.7px */
  --rr: 2.52rem;
  --rw: .39rem;
  margin: .66rem 2.6rem 0;
  /* 本家は中身が箱の中心より 17px 左に寄っているので、右の padding だけ厚くする */
  padding: 1.95rem 1.83rem 1.83rem .9rem;
  text-align: center;
  color: #fff;
  /* 本家は線端が角の角ゴシック。丸ゴシックの M PLUS Rounded 1c ではなく同骨格の 1p */
  font-family: "M PLUS 1p", var(--f-gothic);
  font-size: 1.845rem;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* 本家はフチの下側だけ倍の太さ（上下左右 12px / 下だけ 24px）。影ではなく線そのものが太い */
.fair__ribbon::before {
  /* 外周も下へ 12px 伸ばす（本家の外周は y148..413 と下に厚い） */
  inset: 0 0 -.36rem;
  border-width: .39rem .39rem .75rem;
  filter: url(#rough-ribbon);
}

.fair__kanji {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* 本家の空き: 「に」の右 48px / 枠の右 40px */
  margin: 0 .44rem 0 .74rem;
}

.fair__kanji i {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 本家実測: 枠線 9px / セル 119.5x128 / 4 セル＋右線で 487x128 */
  width: 3.585rem;
  height: 3.84rem;
  border: .27rem solid #fff;
  border-right: none;
  font-style: normal;
  font-size: 2.52rem;
  font-weight: 900;
  line-height: 1;
  box-sizing: border-box;
}

.fair__kanji i:last-child {
  /* box-sizing:border-box なので、右フチのぶんだけ幅も足す */
  width: 3.855rem;
  border-right: .27rem solid #fff;
}

/* 本家は 4 字の字送り(121.3px)が枠のピッチ(119.5px)より広く、
   1 字目ほど枠の中で左に寄る。padding-right で同じだけ左へ送る。 */
.fair__kanji i:nth-child(1) {
  padding-right: .3rem;
}

.fair__kanji i:nth-child(2) {
  padding-right: .18rem;
}

.fair__kanji i:nth-child(3) {
  padding-right: .06rem;
}

.fair__ribbon em {
  font-style: normal;
  /* 本家の「!!」は字面 33x50・2 本の間隔 20px と細身 */
  font-size: 1.11em;
  letter-spacing: -.085em;
  margin-left: -.15rem;
  display: inline-block;
  transform: scaleX(.88);
  transform-origin: left center;
}

.fair__title {
  margin: 2.2rem 1.9rem 1.8rem;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.fair__title-1 {
  display: block;
}

.fair__title-1 b {
  font-size: 1.8em;
  letter-spacing: -.02em;
}

.fair__title-2 {
  display: block;
  margin-top: .4rem;
  font-size: 2.8rem;
}

.fair__title-2 .dotted {
  background: linear-gradient(transparent 74%, var(--comic) 74%, var(--comic) 96%, transparent 96%);
  text-emphasis: dot var(--ink);
  -webkit-text-emphasis: dot var(--ink);
  text-emphasis-position: over;
  -webkit-text-emphasis-position: over;
}

.fair__title-2 em {
  font-style: normal;
}

/* 相見積・お値段くぐります */
.price-appeal {
  font-family: sans-serif;
  font-weight: 900;
  color: #000;
  /* リボンと同じ幅いっぱいに置き、各行は両端揃えで横幅いっぱいに広げる */
  display: block;
  margin: 0 1.2rem;
  padding: 3.2rem 0 4.4rem;
  line-height: 1;
}

/* 1 行しかないので text-align-last で字間を均等に配ってフル幅にする */
.price-appeal__line1,
.price-appeal__line2 {
  text-align: justify;
  /* text-align-last: justify; */
  letter-spacing: 0;
  padding-left: 2rem
}

.price-appeal__line1 {
  font-size: 2.5rem;
  margin: 0;
}

.price-appeal__line1 .large {
  font-size: 5rem;
  vertical-align: bottom;
  margin-right: 0.8rem;
}

.price-appeal__line2 {
  font-size: 4.2rem;
  margin: 1.2rem 0 0 0;
  text-align: left;
  white-space: nowrap;
}

.dot {
  position: relative;
  display: inline-block;
}

.dot::before {
  content: "●";
  position: absolute;
  top: -0.75em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.35em;
  line-height: 1;
}

.marker {
  background: linear-gradient(transparent 65%, #ffff00 65%);
}

.note-card {
  --rr: 1.1rem;
  --rw: .28rem;
  position: relative;
  margin: 0 1.5rem 1.4rem;
  padding: 1.5rem 1.3rem 1.2rem;
  overflow: hidden;
  text-align: left;
}

.note-card::after {
  content: "";
  position: absolute;
  inset: .35rem;
  z-index: -1;
  background: repeating-linear-gradient(#fff 0 1.62rem, #cfd6e0 1.62rem 1.68rem);
  border-radius: .8rem;
}

.note-card__head {
  float: left;
  width: 8.2rem;
  margin-right: .5rem;
}

.checkmark {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.8rem;
}

.checkmark span {
  position: absolute;
  left: .88rem;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  font-family: var(--f-round);
  letter-spacing: .01em;
  z-index: 2;
}

.checkmark svg {
  width: 10.08rem;
  height: auto;
}

.checkno {
  font-family: var(--f-round);
  font-size: 4.6rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
}

.note-card__txt {
  overflow: hidden;
  padding-top: .2rem;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: .01em;
}

.note-card__fig {
  position: relative;
  clear: both;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 5.4rem;
  margin-top: .9rem;
}

.pointhand {
  width: 4.4rem;
  margin-bottom: 1.4rem;
}

.note-card__char {
  position: absolute;
  right: -.9rem;
  bottom: -1.3rem;
  width: 5.4rem;
}

.note-card__fig--doc {
  justify-content: center;
  min-height: 7.6rem;
}

.doctag {
  width: 7.2rem;
}

.usage {
  position: relative;
  margin-top: 2.4rem;
  padding: 0 .8rem;
}

.usage__ac {
  position: absolute;
  left: -1.6rem;
  top: -1.6rem;
  width: 10.4rem;
  z-index: 2;
}

.usage__band {
  --rb: var(--ink);
  --rc: var(--ink);
  --rr: .5rem;
  margin: 0 0 0 4.6rem;
  padding: 1rem 1rem 1.1rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: .02em;
}

.usage__list {
  display: flex;
  gap: .5rem;
  margin-top: 1.4rem;
  padding: 0 .3rem;
}

.usage__list li {
  --rb: var(--yl);
  --rr: .5rem;
  --rw: .24rem;
  flex: 1;
  padding: 2.05rem .1rem 2.1rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.area {
  position: relative;
  margin-top: 2rem;
  padding: 0 1.4rem;
  text-align: left;
}

.area__title {
  position: relative;
  z-index: 0;
  isolation: isolate;
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.area__title em {
  position: relative;
  font-style: normal;
  font-size: 1.4em;
  color: #ea3f16;
  -webkit-text-stroke: .2rem var(--ink);
  paint-order: stroke fill;
  letter-spacing: -.04em;
}

.area__list {
  --rb: #e5f2ec;
  --rr: .9rem;
  --rw: .3rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: .75rem 1.5rem;
  width: 26.9rem;
  margin-top: 2.9rem;
  padding: 1.5rem 1.4rem 1.6rem;
}

.area__list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.4rem;
  font-weight: 900;
  white-space: nowrap;
}

.area__list li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}

.area__map {
  position: absolute;
  right: .4rem;
  bottom: 1rem;
  width: 18.5rem;
  z-index: 1;
}

/* ------------------------------------------------------------
   SEC 04 : なぜ安い？
------------------------------------------------------------ */
.sec-why {
  background: var(--gold);
}

.why__head {
  padding: 2.6rem 1.3rem 1.9rem;
  text-align: center;
  border-bottom: .45rem solid var(--ink);
  padding-top: 1.9rem;
  padding-bottom: .3rem;
}

.q-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1rem .95rem;
  background: #fff;
  border-radius: 4rem;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.q-mark {
  font-family: var(--f-round);
  font-size: 1.6em;
  font-weight: 900;
  line-height: .75;
}

.why__h2 {
  margin-top: 1.4rem;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.outline {
  display: inline-block;
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: 0 .35rem;
  color: var(--ink);
  -webkit-text-stroke: .1rem var(--ink);
  paint-order: stroke fill;
}

.outline::before {
  content: "";
  position: absolute;
  inset: -.15rem 0 -.05rem;
  border: .2rem solid #fff;
  z-index: -1;
}

.why__body {
  position: relative;
  padding: 1.5rem 1.3rem 1.8rem;
  background: #e7e8e3;
}

.why__chip {
  --rb: var(--comic);
  --rr: .3rem;
  --rw: .26rem;
  width: max-content;
  margin: 0 auto;
  padding: .6rem 1.8rem .7rem;
  font-size: 2rem;
  font-weight: 900;
  transform: rotate(-1.6deg);
}

.why__warn {
  margin-top: -2.4rem;
  font-family: var(--f-mincho);
  /* 明朝はゴシックより字幅が広いので、1 行目が折り返さないサイズに合わせる */
  font-size: 4.6rem;
  /* Shippori Mincho B1 の最太。900 だと合成ボールドで明朝の抑揚が潰れる */
  font-weight: 800;
  line-height: 1.13;
  text-align: center;
  letter-spacing: -.12em;
  /* コンクリート背景から浮かせるための白フチ */
  -webkit-text-stroke: .3rem #fff;
  paint-order: stroke fill;
}

.why__bar {
  margin-top: .9rem;
  padding: .4rem 0 .5rem;
  background: linear-gradient(to bottom, #5a5a5a 0%, #333333 80%, #1a1a1a 100%);
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  text-shadow: 0 .1rem .15rem rgba(0, 0, 0, .45);
}

.why__exp {
  position: relative;
  padding-top: .8rem;
  min-height: 15rem;
}

.cause {
  position: relative;
  margin-top: 1.6rem;
}

.cause__flag {
  --rb: var(--ink);
  --rc: var(--ink);
  --rr: .3rem;
  position: relative;
  z-index: 3;
  width: max-content;
  margin: 0 auto -.6rem;
  padding: .25rem 2.6rem .35rem;
  color: var(--comic);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.cause__list {
  --rb: #f2f1ed;
  --rr: .3rem;
  --rw: .34rem;
  padding: 1.6rem 1.2rem 1.4rem;
}

.cause__list li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: -.02em;
}

.cause__list .x {
  color: var(--red);
  font-size: 1.2em;
  font-weight: 900;
}

/* ------------------------------------------------------------
   SEC 05 : 工事のプロ
------------------------------------------------------------ */
.sec-pro {
  background: #fff;
}

.pro__head {
  position: relative;
  z-index: 1;
  padding: 0 1.3rem 5.8rem;
  background: var(--gold);
  padding-bottom: 3.6rem;
}

.pro__head::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: -2.75rem;
  left: 0;
  height: 2.8rem;
  background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.pro__head>* {
  position: relative;
  z-index: 1;
}

.stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 7rem;
  margin: -.9rem 0 .9rem;
  border: .42rem solid #dc4413;
  border-radius: 50%;
  color: #dc4413;
  font-size: 3.35rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: .07rem .07rem 0 rgba(220, 68, 19, .24);
  transform: rotate(-6deg);
}

.stamp::after {
  content: "";
  position: absolute;
  inset: .3rem;
  border: .12rem solid #dc4413;
  border-radius: inherit;
  pointer-events: none;
}

.pro__lead {
  width: 30rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.58;
  /* letter-spacing: -.03em; */
}

.pro__line1,
.pro__line2,
.pro__line3 {
  white-space: nowrap;
}

.pro__line3 {
  padding-bottom: .18em;
  border-bottom: .15rem dotted var(--ink);
}

.pro__balloon {
  position: absolute;
  z-index: 2;
  right: .75rem;
  top: -1.85rem;
  width: 12.8rem;
  padding: .8rem .5rem 1rem;
  background: #fff;
  border: .34rem solid var(--ink);
  color: var(--ink);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 900;
  transform: rotate(-.6deg);
}

.pro__char {
  position: absolute;
  z-index: 3;
  right: -.05rem;
  bottom: -.45rem;
  width: 13rem;
}

.pro__balloon::before {
  left: 1.2rem;
  bottom: -2.1rem;
  width: 3.7rem;
  height: 2.3rem;
  margin: 0;
  background: var(--ink);
  transform: none;
  clip-path: polygon(0 0, 100% 0, 78% 100%);
}

.pro__balloon::after {
  left: 1.55rem;
  bottom: -1.47rem;
  width: 2.8rem;
  height: 1.72rem;
  margin: 0;
  background: #fff;
  transform: none;
  clip-path: polygon(0 0, 100% 0, 76% 100%);
}

.pro__em {
  display: inline-block;
  line-height: 1;
}

.pro__em--medium {
  font-size: 1.12em;
}

.pro__em--large {
  font-size: 1.2em;
}

.pro__em--hero {
  font-size: 1.45em;
  letter-spacing: -.08em;
}

.pro__body {
  position: relative;
  z-index: 0;
  padding: 5.15rem 1.3rem 4.9rem;
  background-color: #fffef8;
  background-image: repeating-linear-gradient(45deg, transparent 0 .45rem, rgba(248, 219, 85, .23) .45rem .61rem);
  text-align: center;
  overflow: hidden;
}

/* 下のセクションの黄色が円のように盛り上がって覗く部分。
   左右と下は .pro__body の overflow: hidden で切り落とされるので、
   太い黒フチを一周付けても「円を切った」上側の弧だけが見える。 */
.pro__body::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -3.7rem;
  left: -6%;
  height: 6.8rem;
  background: var(--comic);
  border: .34rem solid var(--ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.pro__installer {
  position: absolute;
  z-index: 0;
  right: .25rem;
  top: .7rem;
  width: 10rem;
}

.pro__sub,
.pro__h2 {
  position: relative;
  z-index: 1;
}

/* 見出しの左右に散らすキラキラ。位置は .pro__body 基準の % 指定。 */
.pro__body .spark--a { left: 3.5%;  top: 10.5%; width: 2.9rem; }
.pro__body .spark--b { left: 13%;   top: 18.5%; width: 1.5rem; }
.pro__body .spark--c { left: 2%;    top: 31%;   width: 2.1rem; }
.pro__body .spark--d { left: 8.5%;  top: 40%;   width: 2.7rem; }
.pro__body .spark--e { left: 89%;   top: 31.5%; width: 2.8rem; }
.pro__body .spark--f { left: 81%;   top: 39%;   width: 1.5rem; }
.pro__body .spark--g { left: 92%;   top: 46%;   width: 2rem; }
.pro__body .spark--h { left: 73%;   top: 12%;   width: 1.6rem; }

/* 点を付ける文字のグループ */
.dot-text>span {
  position: relative;
  display: inline-block;
}

/* 上の点のスタイル */
.dot-text>span::before {
  content: "•";
  /* 点の記号（丸） */
  position: absolute;
  top: -0.6em;
  /* 点の上位置（文字との距離を調整できます） */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5em;
  /* ★ここで点のサイズを自由に小さくできます（数値はお好みで調整してください） */
  line-height: 1;
  color: #000;
  /* 点の色 */
}

.pro__sub {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.8rem;
  font-weight: 900;
}

.slash-l,
.slash-r {
  width: .8rem;
  height: 1.6rem;
  background: var(--ink);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

.slash-r {
  transform: scaleX(-1);
}

.pro__h2 {
  margin-top: .5rem;
  font-size: 4.2rem;
  font-weight: 900;
  white-space: nowrap;
}

.pro__balloon2 {
  --bal: var(--cream);
  position: relative;
  width: max-content;
  margin: 1.8rem auto 2rem;
  padding: .6rem 2rem;
  font-size: 2rem;
  font-weight: 900;
}

/* Reference callout: the tail is a centered, symmetric V rather than an
   offset triangle.  The cream inset preserves a clean black outline. */
.pro__balloon2::before {
  left: 50%;
  bottom: -2.05rem;
  width: 3.2rem;
  height: 2.05rem;
  margin: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

.pro__balloon2::after {
  left: 50%;
  bottom: -1.45rem;
  width: 2.35rem;
  height: 1.5rem;
  margin: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

.pro__list li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem .2rem 1rem;
  border-bottom: .16rem dashed #555;
  text-align: left;
}

.pro__list li:first-child {
  border-top: .16rem dashed #555;
}

.thumb {
  flex: none;
  width: 3.6rem;
}

.pro__list p {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   SEC 06 : 元気でんきについて
------------------------------------------------------------ */
.sec-genki {
  position: relative;
  z-index: 1;
  margin-top: -1.25rem;
  padding: 3rem 1.2rem 2rem;
  background: var(--comic);
  border-radius: 50% 50% 0 0 / 1.45rem 1.45rem 0 0;
}

.genki__band {
  --rb: var(--ink);
  --rc: var(--ink);
  --rr: .35rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0 1rem;
  padding: 1rem;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
}

.genki__band img {
  width: 16rem;
}

.genki__h2 {
  margin: 2rem 0 1.5rem;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 900;
}

.genki__card {
  --rr: .8rem;
  --rw: .34rem;
  position: relative;
  padding: 1.4rem 1.1rem 1.5rem;
  background: #fff;
}

.genki__checks li {
  display: flex;
  gap: .7rem;
  margin-bottom: 1.2rem;
}

.cbox {
  flex: none;
  width: 2.4rem;
  margin-top: .2rem;
}

.genki__checks p {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.4;
}

.genki__badges {
  display: flex;
  gap: .6rem;
  margin-top: 1.6rem;
}

.genki__badges li {
  flex: 1;
  text-align: center;
}

.genki__tab {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem 0.3rem 0 0;
}

.genki__box {
  --rb: #fef8d6;
  --rw: 0.2rem;
  --rr: 0.4rem;
  padding: 0.8rem 0.4rem;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.3;
}

.genki__box b {
  font-size: 1.8rem;
  color: var(--red);
}

.genki__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  position: relative;
}

.genki__char {
  width: 7rem;
}

.genki__msg {
  --rb: #fff;
  --rr: 0.6rem;
  --rw: 0.25rem;
  padding: 1rem 1.2rem;
  font-size: 1.5rem;
  font-weight: 900;
  text-align: center;
}

.genki__ac {
  width: 8rem;
}

/* ------------------------------------------------------------
   SEC 07 : 回答 (A1, A2, A3) & 会社概要
------------------------------------------------------------ */
.sec-again {
  padding: 2rem 1.2rem 1rem;
  background: var(--gold);
  text-align: center;
}

.again__chip {
  --rb: var(--comic);
  --rr: 0.3rem;
  --rw: 0.2rem;
  display: inline-block;
  padding: 0.4rem 1.2rem;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.again__h2 {
  margin-top: 1rem;
  font-size: 2.5rem;
  font-weight: 900;
}

.sec-answer {
  padding: 1.5rem 1.2rem 2rem;
  background: var(--gold);
}

.ans {
  --rb: #fff;
  --rr: 0.8rem;
  --rw: 0.28rem;
  margin-bottom: 2rem;
  padding: 1.5rem 1.2rem;
}

.ans__head {
  font-size: 1.8rem;
  font-weight: 900;
  border-bottom: 0.2rem solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.ans__head b {
  font-size: 2.4rem;
  color: var(--red);
  margin-right: 0.4rem;
}

.ans__body {
  position: relative;
}

.inline-genki {
  display: inline-block;
  height: 1.5rem;
  vertical-align: middle;
}

.ans__txt {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.6;
}

.ans__balloon {
  --rb: var(--cream);
  --rr: 0.5rem;
  --rw: 0.18rem;
  position: absolute;
  right: 6rem;
  top: 0;
  padding: 0.6rem;
  font-size: 1.1rem;
  text-align: center;
}

.ans__char {
  position: absolute;
  right: 0;
  top: 0;
  width: 5.5rem;
}

.reuse {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.reuse__badge {
  --rb: var(--comic);
  --rr: 0.3rem;
  --rw: 0.2rem;
  padding: 0.5rem 0.8rem;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
}

.reuse__ac {
  width: 7rem;
}

.ans__memo {
  --rb: #f1f8e9;
  --rr: 0.5rem;
  --rw: 0.2rem;
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.2rem;
}

.ans__memo-tag {
  background: var(--ink);
  color: #fff;
  padding: 0.2rem 0.6rem;
  font-size: 0.9rem;
  border-radius: 0.2rem;
}

.ans__orange {
  --rb: #fff3e0;
  --rr: 0.5rem;
  --rw: 0.2rem;
  margin-top: 1rem;
  padding: 1rem;
  font-size: 1.2rem;
  position: relative;
}

.ans__char2 {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 4.5rem;
}

.ans__figs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.ans__ac1,
.ans__ac2 {
  width: 7rem;
}

.ans__circle {
  --rb: var(--comic);
  --rr: 50%;
  --rw: 0.2rem;
  width: 7rem;
  height: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
}

.sec-profile {
  padding: 2rem 1.2rem;
  background: var(--pale);
}

.prof {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.prof__row {
  display: table-row;
  border-bottom: 1px dashed #aaa;
}

.prof dt,
.prof dd {
  display: table-cell;
  padding: 0.8rem 0.5rem;
  font-size: 1.2rem;
}

.prof dt {
  font-weight: 900;
  width: 25%;
}

.prof__logo {
  height: 1.4rem;
  vertical-align: middle;
}

.prof__photos {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}

.prof__photos img {
  width: 100%;
  display: block;
  border-radius: 0.4rem;
  border: 2px solid var(--ink);
}

/* ------------------------------------------------------------
   SEC 08 : 強み・自信
------------------------------------------------------------ */
.sec-conf {
  padding: 1.6rem 1.2rem 3rem;
  background:
    repeating-linear-gradient(90deg, rgb(248 210 81 / .23) 0 .14rem, transparent .14rem .5rem),
    #fffef8;
  color: var(--ink);
  position: relative;
}

.conf__head {
  min-height: 12.4rem;
  text-align: center;
  position: relative;
  margin: 0 auto 1.65rem;
  max-width: 38rem;
}

.conf__char {
  position: absolute;
  z-index: 1;
  top: -.7rem;
  /* mascot-r.png の透明余白を考慮し、人物部分を見出し横へ配置する。 */
  left: -14.4rem;
  width: 36rem;
  max-width: none;
}

.conf__flag {
  position: absolute;
  isolation: isolate;
  top: .3rem;
  right: .35rem;
  width: min(30rem, 82%);
  padding: .72rem 1.5rem .82rem 2.5rem;
  color: var(--ink);
  font-family: var(--f-round);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  transform: rotate(-1.8deg);
}

/* 手描き風の吹き出し。左端はマスコットへ向かうしっぽ（三角）。
   黒い下地の上に一回り小さい黄色を重ねて均一な黒フチを作り、
   親側の rough フィルタで全体を手描き風に揺らす。
   （clip-path は filter より後に適用されるため、両者は別の階層に分けている） */
.conf__flag-bg {
  --flag-shape: polygon(8.5% 3%, 100% 0, 97.5% 96%, 7% 100%, 7.7% 72%, 0 47%, 8.2% 22%);
  /* 内側（黄色）はしっぽの先端だけ引っ込め、鋭角部でもフチが痩せないようにする */
  --flag-shape-in: polygon(8.5% 3%, 100% 0, 97.5% 96%, 7% 100%, 7.7% 72%, 1.7% 47%, 8.2% 22%);
  position: absolute;
  z-index: -1;
  inset: 0 0 0 -1.9rem;
  filter: url(#rough-s);
}

.conf__flag-bg::before,
.conf__flag-bg::after {
  content: "";
  position: absolute;
}

.conf__flag-bg::before {
  inset: 0;
  background: var(--ink);
  clip-path: var(--flag-shape);
}

.conf__flag-bg::after {
  inset: .25rem;
  background: var(--yl);
  clip-path: var(--flag-shape-in);
}

/* 文字は斜体（手書きの勢い）。 */
.conf__flag span {
  display: inline-block;
  transform: skewX(-9deg);
}

.conf__h2 {
  position: absolute;
  right: .2rem;
  bottom: .4rem;
  width: 84%;
  font-size: clamp(2.6rem, 10vw, 4rem);
  font-weight: 900;
  letter-spacing: -.11em;
  line-height: 1;
  text-align: center;
  text-shadow: .16rem .16rem 0 #f6e0bd;
}

.conf__h2 .rd {
  color: var(--red);
}

.conf__h2 em {
  font-style: normal;
}

.conf__list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 38rem;
  margin: 0 auto;
}

.conf__list li {
  position: relative;
  padding-top: .85rem;
}

.conf__tab {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: baseline;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  padding: .32rem .75rem .28rem;
  border-radius: .75rem .75rem 0 0;
}

.conf__tab b {
  color: var(--yl);
  font-size: 1.8rem;
  line-height: .8;
  margin-left: .15rem;
}

.conf__box {
  --rb: var(--orange);
  --rc: var(--ink);
  --rr: .8rem;
  --rw: .28rem;
  padding: 1.25rem 1rem .95rem;
  color: #fff;
  font-size: clamp(1.38rem, 5vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: .04rem .04rem 0 rgb(0 0 0 / .15);
}

.conf__box .yl {
  color: var(--yl);
}

.conf__box .conf__sub {
  padding-top: .5rem;
  border-top: .16rem dotted rgb(255 255 255 / .8);
}

.conf__sub {
  font-size: clamp(.9rem, 3.35vw, 1.25rem);
  margin-top: .55rem;
  color: #fff;
}

.conf__foot {
  margin: 2.5rem -1.2rem 0;
  min-height: 22rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: url("../images/haikei-2.png") center top / 100% 100% no-repeat;
  padding: 0 2rem 2.4rem;
  text-align: center;
}

.conf__chevron {
  position: relative;
  height: 8.3rem;
  margin: 0 -2rem 1rem;
}

.conf__visit {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  align-items: end;
  column-gap: .85rem;
  max-width: 43rem;
  min-height: 10.4rem;
  /* V字の境界に人物の頭が少し重なる位置まで、案内ブロック全体を上げる */
  margin: -5rem auto 1.15rem;
  text-align: left;
}

.conf__suit {
  align-self: end;
  width: 27rem;
  max-width: none;
  margin: 0;
  transform: translateX(-6.5rem);
}

.conf__balloon {
  position: relative;
  align-self: center;
  margin: 0;
  padding: 1.05rem 1.1rem 1.12rem;
  border: .32rem solid var(--ink);
  border-radius: 1rem;
  background: #fff3a7;
  font-size: clamp(1.55rem, 4.25vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1.32;
  text-align: center;
}

.conf__balloon::before,
.conf__balloon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
}

.conf__balloon::before {
  left: -2.3rem;
  border-top: 1.55rem solid transparent;
  border-right: 2.3rem solid var(--ink);
  border-bottom: 1.55rem solid transparent;
}

.conf__balloon::after {
  left: -1.65rem;
  border-top: 1.12rem solid transparent;
  border-right: 1.7rem solid #fff3a7;
  border-bottom: 1.12rem solid transparent;
}

.conf__txt {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  font-size: clamp(1.28rem, 3.45vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.58;
}

.conf__txt .d {
  padding-bottom: .13em;
  margin-bottom: .28em;
  border-bottom-width: .14rem;
}

.conf__txt .mk {
  color: var(--red);
  background: linear-gradient(transparent 57%, var(--yl) 57% 92%, transparent 92%);
}

.sec-conf .cta--bottom {
  width: min(100%, 44rem);
  margin: 2.25rem auto 0;
}

/* 事例セクションの CTA も下部 CTA と同じ大きさで見せる */
.sec-conf .cta--bottom,
.sec-example .cta {
  padding-top: 1.25rem;
  padding-bottom: 1.38rem;
}

.sec-conf .cta--bottom .cta__label,
.sec-example .cta .cta__label {
  font-size: clamp(2.35rem, 6vw, 3rem);
}

.sec-conf .cta--bottom .cta__arrow,
.sec-example .cta .cta__arrow {
  width: 2.75rem;
  height: 2.75rem;
}

.sec-conf .cta--bottom .cta__free,
.sec-example .cta .cta__free {
  border-color: #d7e3a1;
  box-shadow: 0 .15rem .2rem rgba(0, 0, 0, .28), inset 0 0 0 .16rem #fff23f;
}

@media (max-width: 430px) {
  .conf__foot {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .conf__chevron {
    margin-right: -1rem;
    margin-left: -1rem;
    height: 6.5rem;
  }

  .conf__visit {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    column-gap: .55rem;
    min-height: 8.1rem;
    margin-top: -7rem;
  }

  .conf__suit {
    width: 18rem;
    transform: translateX(-4.2rem);
  }

  .conf__balloon {
    padding: .75rem .5rem .8rem;
    border-width: .24rem;
  }

  .conf__balloon::before {
    left: -1.35rem;
    border-top-width: 1rem;
    border-right-width: 1.35rem;
    border-bottom-width: 1rem;
  }

  .conf__balloon::after {
    left: -1.02rem;
    border-top-width: .73rem;
    border-right-width: 1.08rem;
    border-bottom-width: .73rem;
  }
}

/* ------------------------------------------------------------
   SEC 09 : 満足度 / お客様の声
------------------------------------------------------------ */
.sec-sat {
  padding: 2rem 1.2rem;
  background: var(--comic);
}

.sat__card {
  --rb: #fff;
  --rr: 0.8rem;
  --rw: 0.3rem;
  padding: 1.5rem 1rem;
}

.sat__top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sat__flag {
  --rb: var(--ink);
  --rr: 0.3rem;
  --rw: 0.2rem;
  color: #fff;
  padding: 0.4rem 1.5rem;
  font-size: 1.5rem;
}

.pie--lg {
  width: 12rem;
  height: 12rem;
  margin: 1rem 0;
}

.sat__logo img {
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
}

.sat__txt {
  font-size: 1.3rem;
  font-weight: 900;
  margin: 1rem 0;
}

.sat__note {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}

.sat__sum {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.5;
  border-top: 2px dashed #ccc;
  padding-top: 1rem;
}

.voices {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.voices li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.voices img {
  width: 5rem;
  flex: none;
}

.voices p {
  --rb: #f9f9f9;
  --rr: 0.5rem;
  --rw: 0.18rem;
  padding: 0.8rem;
  font-size: 1.2rem;
  font-weight: 900;
}

.voices .big {
  font-size: 1.4rem;
}

/* ------------------------------------------------------------
   SEC 10 : 電話 CTA & フォーム
------------------------------------------------------------ */
.sec-tel {
  padding: 2rem 1.2rem;
  background: #fff;
}

.tel__pills {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tel__pills li {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--cream);
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  border: 2px solid var(--ink);
  font-size: 1.3rem;
  font-weight: 900;
}

.doctag--sm {
  width: 4rem;
}

.nohand {
  width: 3.5rem;
}

.telcard {
  display: block;
  background: var(--ink);
  color: var(--comic);
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.telcard__num {
  font-family: var(--f-round);
  font-size: 2.8rem;
  font-weight: 900;
  display: block;
}

.telcard__hours {
  font-size: 1.1rem;
  color: #fff;
  display: block;
  margin-top: 0.3rem;
}

.telcard__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.8rem;
  border-radius: 0.6rem;
}

.truck {
  width: 4.5rem;
}

.telcard__msg {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
}

.telcard__char {
  width: 4.5rem;
}

.formwrap {
  width: 100%;
  padding: 2rem 1rem;
  background: #f4f4f4;
}

.formwrap iframe {
  width: 100%;
  min-height: 800px;
  border: none;
}

/* ------------------------------------------------------------
   Check 01：見積もりCTAブロックのレイアウト調整
------------------------------------------------------------ */
.note-card--estimate .note-card__txt {
  font-size: 2.6rem;
  line-height: 1.3;
  transform: translateX(-.6rem);
}

.note-card--comparison .note-card__txt {
  font-size: 2.25rem;
  line-height: 1.3;
}

.note-card__fig--estimate {
  position: relative;
  display: block;
  min-height: 8rem;
  /* 本文を大きくしたぶんだけ詰めて、指の線と CTA の位置を据え置く */
  margin-top: -.2rem;
  padding: 0;
}

.note-card__fig--estimate .pointhand {
  position: absolute;
  left: 20%;
  top: -1rem;
  z-index: 2;
  width: 4.5rem;
  height: auto;
  margin: 0;
  pointer-events: none;
}

.note-card__fig--estimate .cta--mini {
  position: absolute;
  left: 42%;
  top: 2.15rem;
  z-index: 1;
  width: 20rem;
  max-width: none;
  margin: 0;
}

.note-card__fig--estimate .cta--mini .cta__label {
  font-size: 1.45rem;
}

.note-card__fig--estimate .cta--mini .cta__free {
  left: -1.3rem;
}

.note-card__fig--doc .doctag {
  width: 10.7rem;
  /* 右寄り。右端まで詰めると窮屈なので、画像 1 枚ぶんの余白を残す位置に置く */
  transform: translateX(7.3rem);
}

.note-card__fig--estimate .note-card__char {
  position: absolute;
  /* CTAの右横に収める。 */
  top: 0;
  right: .4rem;
  bottom: auto;
  z-index: 2;
  width: 4rem;
  max-width: none;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* ------------------------------------------------------------
   フロー・ステップ & 見積もりCTA (.flow-step)
------------------------------------------------------------ */
.flow-step {
  position: relative;
  text-align: center;
  padding: 1.5rem 1rem;
  background: #fff;
  border-radius: .8rem;
  margin: 1.5rem auto;
}

.step-title {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 1rem;
}

.step-title .highlight {
  color: var(--red);
  background: linear-gradient(transparent 60%, var(--yl) 60%);
  padding: 0 .2em;
}

.step-title .target-text {
  color: var(--orange);
  font-size: 1.1em;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.arrow-icon {
  display: block;
  max-width: 6rem;
  margin: .5rem auto 1rem;
  height: auto;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 28rem;
  padding: 1rem 1.5rem;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  border-radius: 6rem;
  background: linear-gradient(#7ed321 0 6%, #4cae0d 6% 48%, #2f8f00 52% 94%, #57b41a 94%);
  border: .34rem solid var(--ink);
  box-shadow: 0 .25rem 0 rgba(0, 0, 0, .35);
  transition: opacity .2s, transform .2s;
  animation: cta-pulse 2s infinite;
}

.btn-green:hover {
  opacity: .85;
}

/* Usage-and-area white background transition */
.sec-fair {
  padding-bottom: 0;
}

.fair__lower {
  margin-top: 3.4rem;
  padding-bottom: 3rem;
  background: linear-gradient(to bottom, var(--pale) 0 2.1rem, #fff 2.1rem 100%);
}

.fair__lower .usage {
  margin-top: 0;
}

/* Area expansion title emphasis */
.area__title {
  font-size: 2.65rem;
  line-height: 1.08;
  padding-bottom: .6rem;
}

.area__title em {
  z-index: 1;
  display: inline-block;
  margin-left: .04em;
  font-size: 2.15em;
  line-height: .82;
  -webkit-text-stroke: .16rem var(--ink);
  text-shadow: .12rem .16rem 0 var(--ink);
}

.area__title em::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -.18em;
  bottom: -.22em;
  left: -.14em;
  height: .42em;
  border-radius: 50%;
  background: var(--comic);
  transform: rotate(-4deg);
}

/* Why section texture and emphasis */
.outline {
  padding: 0 .08em;
  color: #fff;
  -webkit-text-stroke: .13rem var(--ink);
  text-shadow: .04rem .06rem 0 rgba(255, 255, 255, .75);
}

.outline::before {
  display: none;
}

.why__body {
  background-color: #e7e8e3;
  background-image: url('../images/haikei-layout.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: .2rem;
}

/* Why section finishing details */
.outline {
  z-index: 1;
  -webkit-text-stroke: .16rem var(--ink);
  paint-order: stroke fill;
  text-shadow: none;
}

.outline::before {
  content: '\0021';
  display: block;
  inset: auto;
  top: -.58em;
  left: -.3em;
  z-index: 2;
  border: 0;
  color: #fff;
  font-family: var(--f-round);
  font-size: .64em;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: .08em var(--ink);
  paint-order: stroke fill;
  transform: rotate(-14deg);
}

/* Outline surprise mark and refreshed doctor */
.outline::before {
  display: none;
}

.outline__surprise {
  position: absolute;
  top: -.62em;
  left: -.48em;
  z-index: 2;
  width: 1.08em;
  height: .9em;
  object-fit: contain;
  object-position: center;
}

.pro__char {
  object-fit: contain;
}

/* Final emphasis refinements */
.why__reason {
  display: inline-block;
  font-size: 2em;
  line-height: .82;
  vertical-align: -.08em;
}

.why__chip {
  position: relative;
  top: -3.5rem;
  transform: rotate(-5deg);
  font-size: 2.5rem;
  padding: .5rem 1.5rem;
}

/* Requested illustration and section-layer refinements */
.sec-pro>.chevron-up {
  position: relative;
  z-index: 2;
}

.pro__head::before,
.pro__head::after {
  bottom: -3.5rem;
  height: 7.5rem;
}

.pro__head::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  background-color: #fffef8;
  background-image: repeating-linear-gradient(45deg, transparent 0 .45rem, rgba(248, 219, 85, .23) .45rem .61rem);
  pointer-events: none;
}

.pro__head::after {
  bottom: -3.5rem;
  height: 7.5rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.pro__char {
  right: 3.25rem;
  bottom: 2.2rem;
}

.pro__installer {
  top: 3.8rem;
}

.pro__body {
  padding-top: 5.2rem;
  padding-bottom: 2.1rem;
}

.note-card__fig--estimate .note-card__char {
  /* イラストの切れ目をカードの下端（枠線の内側）にぴったり合わせる。
     top が残っていると bottom が無視されるので明示的に解除する。 */
  top: auto;
  bottom: -1.3rem;
  width: 6.25rem;
}

/* ロゴを含む帯部分の縦位置揃え */
.genki__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  /* 文字とロゴの間隔 */
}

/* 会社ロゴは元画像を切り抜かず、比率を保って表示する。 */
.genki__logo-frame {
  position: relative;
  flex: 0 1 7.65rem;
  width: 7.65rem;
  min-width: 0;
  aspect-ratio: 1024 / 268;
}

.genki__band .genki__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* 工事のプロ実績セクション：提示デザインに合わせた強い見出しと方眼カード */
.sec-genki {
  margin-top: 0;
  padding: 0 1.2rem 2rem;
  border-radius: 0;
  padding-bottom: 4.1rem;
}

.genki__band {
  --rw: 0;
  --rr: 0;
  min-height: 6.55rem;
  margin: 0 3.55rem;
  padding: .55rem 1.15rem 1.05rem;
  gap: .32em;
  font-size: 2.15rem;
  line-height: 1;
}

.genki__band::before {
  background: var(--ink);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  filter: none;
}

.genki__band::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -2.15rem;
  left: 50%;
  width: 3.25rem;
  height: 2.55rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 66% 30%, 100% 48%, 27% 100%, 43% 62%, 0 48%, 33% 28%);
  transform: translateX(-50%);
}

.genki__logo-frame {
  flex-basis: 15.3rem;
  width: 15.3rem;
  height: auto;
}

.genki__band .genki__logo-img {
  width: 100%;
}

/* 狭い画面では、固定余白の合計で見出しやロゴが押し出されないようにする。 */
@media (max-width: 430px) {

  html,
  body {
    overflow-x: hidden;
  }

  .genki__band {
    min-height: 5.9rem;
    margin-right: 1rem;
    margin-left: 1rem;
    padding-right: .6rem;
    padding-left: .6rem;
    gap: .16em;
    font-size: 2.6rem;
  }

  .genki__logo-frame {
    flex: 0 1 15.3rem;
    width: 15.3rem;
    max-width: 42%;
  }
}

.genki__h2 {
  margin: 3.2rem 0 2rem;
  font-size: 2.55rem;
  line-height: 1.25;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.genki__card {
  --rr: .28rem;
  --rw: .44rem;
  padding: 3.05rem 2.25rem 2.5rem;
}

.genki__card::before {
  background-color: #fff;
  background-image:
    linear-gradient(rgb(218 218 218 / .78) 1px, transparent 1px),
    linear-gradient(90deg, rgb(218 218 218 / .78) 1px, transparent 1px);
  background-size: .75rem .75rem;
}

.genki__checks li {
  gap: .85rem;
  margin-bottom: 2.4rem;
}

.cbox {
  width: 2.7rem;
  margin-top: .12rem;
}

/* チェックの印は強調色で統一する。 */
.cbox path {
  stroke: var(--red);
}

.genki__checks p {
  font-size: 2.05rem;
  line-height: 1.36;
  letter-spacing: -.04em;
}

.genki__badges {
  gap: 1rem;
  margin-top: 2.3rem;
}

.genki__tab {
  position: relative;
  z-index: 1;
  min-width: 10.75rem;
  padding: .42rem .58rem .52rem;
  border-radius: 0;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
  filter: drop-shadow(0 .2rem 0 var(--ink));
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}

.genki__tab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.25rem -.3rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
}

.genki__tab::after {
  display: none;
}

.genki__badges li {
  position: relative;
}

.genki__badges li::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1.9rem;
  left: 50%;
  width: 1.25rem;
  height: 1.1rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 64% 37%, 92% 52%, 23% 100%, 39% 61%, 0 47%, 34% 29%);
  transform: translateX(-50%);
}

.genki__box {
  --rw: .3rem;
  --rr: .22rem;
  min-height: 10rem;
  padding: 2.15rem .35rem .7rem;
  font-size: 1.18rem;
  line-height: 1.28;
  position: relative;
  z-index: 1;
}

.genki__box::before {
  background-color: #fffdf0;
  background-image: repeating-linear-gradient(45deg, transparent 0 .42rem, rgb(245 218 100 / .16) .42rem .58rem);
}

.genki__box b {
  font-size: 3.25rem;
  line-height: .95;
}

.genki__box b.sm {
  font-size: 1.95rem;
}

/* 「設立20年」は枠内の中央に置く。 */
.genki__badges li:first-child .genki__box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem .35rem;
  text-align: center;
}

.genki__box i {
  font-size: 1.08rem;
  font-style: normal;
}

/* ------------------------------------------------------------
   Rear-half image placeholders & speech balloons
   Keep illustration/photo areas replaceable without relying on raster assets.
------------------------------------------------------------ */
.media-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: .35rem;
  border: .16rem dashed #777;
  border-radius: .42rem;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .4), rgb(255 255 255 / .08)),
    repeating-linear-gradient(-45deg, #e8e8e3 0 .45rem, #deded8 .45rem .9rem);
  color: #656565;
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  letter-spacing: .02em;
}

.media-slot--mascot {
  background:
    linear-gradient(135deg, rgb(255 255 255 / .6), rgb(255 255 255 / .12)),
    repeating-linear-gradient(-45deg, #e9e9e4 0 .35rem, #deded8 .35rem .7rem);
}

.media-slot--avatar {
  border-radius: 50%;
  font-size: .66rem;
}

.company-logo {
  display: inline-flex;
  width: 3.55em;
  max-width: 100%;
  line-height: 1;
  vertical-align: -.12em;
}

.company-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.speech-bubble {
  --speech-bg: var(--rb, #fff);
  position: relative;
  isolation: isolate;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -.62rem;
  left: 1.25rem;
  width: 1.28rem;
  height: 1.28rem;
  background: var(--speech-bg);
  border-right: var(--rw, .2rem) solid var(--ink);
  border-bottom: var(--rw, .2rem) solid var(--ink);
  transform: rotate(45deg);
}

.speech-bubble--right::after {
  right: 1.25rem;
  left: auto;
}

.genki__char.media-slot {
  width: 7rem;
  height: 7rem;
}

.genki__msg.speech-bubble::after {
  bottom: -.62rem;
}

.ans__char.media-slot {
  width: 5.5rem;
  height: 5.5rem;
}

.ans__char2.media-slot {
  width: 4.5rem;
  height: 4.5rem;
}

/* A1: the reference uses a single black title rail followed by graph paper,
   rather than the generic framed answer card used by A2/A3. */
.sec-again {
  position: relative;
  padding: 2.65rem 1.2rem 1.15rem;
  padding-top: 4.2rem;
  padding-bottom: 1.9rem;
}

.again__chip {
  --rb: var(--ink);
  --rc: var(--ink);
  --rr: 0;
  --rw: 0;
  position: absolute;
  z-index: 2;
  top: 1.45rem;
  left: 50%;
  min-width: 10.8rem;
  margin: 0;
  padding: .28rem 1.05rem .48rem;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%) skewX(-8deg);
}

.again__chip::before {
  border: 0;
  border-radius: 0;
}

.again__chip::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -.72rem;
  width: 1.35rem;
  height: 1rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 38% 100%);
  transform: translateX(-50%) skewX(8deg);
}

.sec-again .q-pill {
  padding: .72rem 1rem .86rem;
  font-size: 2.22rem;
}

.again__h2 {
  position: relative;
  display: inline-block;
  margin-top: 1.55rem;
  padding-bottom: .9rem;
  font-size: 2.45rem;
  letter-spacing: -.05em;
}

.again__h2::before,
.again__h2::after {
  content: "";
  position: absolute;
  height: .28rem;
  background: var(--ink);
  border-radius: 100%;
}

.again__h2::before {
  bottom: .32rem;
  left: -.2rem;
  width: 13.2rem;
  transform: rotate(-.6deg);
}

.again__h2::after {
  right: -.1rem;
  bottom: .31rem;
  width: 10.6rem;
  transform: rotate(.7deg);
}

.sec-again+.sec-answer {
  padding-top: .8rem;
}

.ans--a1 {
  position: relative;
  margin: 0 0 2rem;
  padding: 0;
  background:
    linear-gradient(#0000 1.12rem, rgb(21 21 21 / .12) 1.19rem, #0000 1.25rem),
    linear-gradient(90deg, #0000 1.12rem, rgb(21 21 21 / .1) 1.19rem, #0000 1.25rem),
    #fff;
  background-size: 1.25rem 1.25rem;
  border: .3rem solid var(--ink);
  border-top: 0;
  overflow: visible;
}

.ans--a1 .ans__head {
  display: flex;
  align-items: end;
  min-height: 5.45rem;
  margin: 0 -.3rem;
  padding: .55rem 1rem .65rem;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: .85rem .85rem 0 0;
  font-size: 2.05rem;
  line-height: 1;
  letter-spacing: -.08em;
}

.ans--a1 .ans__head b {
  flex: none;
  margin: 0 .38rem -.52rem -1.05rem;
  color: #fff;
  font-family: var(--f-round);
  font-size: 4.45rem;
  font-weight: 900;
  letter-spacing: -.14em;
  line-height: .82;
  -webkit-text-stroke: .22rem var(--ink);
  paint-order: stroke fill;
}

.ans--a1 .ans__head b i {
  font-style: normal;
}

.ans--a1 .ans__head span {
  padding-bottom: .08rem;
  white-space: nowrap;
}

.ans--a1 .ans__head em {
  color: var(--yl);
  font-style: normal;
}

.ans--a1 .ans__body {
  min-height: 13.3rem;
  padding: 1.25rem 1.85rem 1rem;
}

.ans--a1 .ans__txt {
  position: relative;
  z-index: 1;
  width: 21.4rem;
  font-size: 1.55rem;
  line-height: 1.53;
  letter-spacing: -.06em;
}

.ans--a1 .ans__txt .d {
  border-bottom-color: rgb(21 21 21 / .7);
  margin-bottom: .25em;
}

.ans--a1 .ans__balloon {
  --rb: var(--gold);
  isolation: isolate;
  top: .35rem;
  right: 8rem;
  width: 10.8rem;
  min-height: 10.25rem;
  padding: 1.5rem .45rem 1rem;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.25;
}

/* A1 の吹き出しは丸形＋右下のしっぽ。しっぽを別要素で足すと丸い本体の縁から
   浮いてしまうため、.conf__flag-bg と同じ手法で本体としっぽを一続きの多角形と
   して描く。黒い下地の上に一回り小さい黄色を重ねて均一な黒フチを作り、
   ラッパー側の rough フィルタで輪郭全体をまとめて手描き風に揺らす。 */
.ans__balloon-bg {
  --bubble: polygon(100.0% 42.9%, 98.3% 54.0%, 93.3% 64.3%, 88.3% 70.5%,
      96.2% 95.5%, 71.1% 81.8%, 62.9% 84.3%, 50.0% 85.8%, 37.1% 84.3%,
      25.0% 80.0%, 14.6% 73.2%, 6.7% 64.3%, 1.7% 54.0%, 0.0% 42.9%, 1.7% 31.8%,
      6.7% 21.4%, 14.6% 12.6%, 25.0% 5.7%, 37.1% 1.5%, 50.0% 0.0%, 62.9% 1.5%,
      75.0% 5.7%, 85.4% 12.6%, 93.3% 21.4%, 98.3% 31.8%);
  /* 内側（黄色）はしっぽの先端も内側へ引っ込め、鋭角部でフチが痩せないようにする */
  --bubble-in: polygon(97.9% 42.9%, 96.3% 53.5%, 91.5% 63.4%, 86.1% 70.1%,
      92.8% 91.5%, 71.4% 79.7%, 62.5% 82.5%, 50.0% 83.9%, 37.6% 82.5%,
      26.0% 78.4%, 16.1% 71.9%, 8.5% 63.4%, 3.7% 53.5%, 2.1% 42.9%, 3.7% 32.3%,
      8.5% 22.4%, 16.1% 13.9%, 26.0% 7.4%, 37.6% 3.3%, 50.0% 1.9%, 62.4% 3.3%,
      74.0% 7.4%, 83.9% 13.9%, 91.5% 22.4%, 96.3% 32.3%);
  position: absolute;
  z-index: -1;
  inset: 0 0 -1.7rem;
  filter: url(#rough-s);
}

.ans__balloon-bg::before,
.ans__balloon-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ans__balloon-bg::before {
  background: var(--ink);
  clip-path: var(--bubble);
}

.ans__balloon-bg::after {
  background: var(--rb);
  clip-path: var(--bubble-in);
}

.ans--a1 .ans__char {
  position: absolute;
  z-index: 1;
  right: 1.1rem;
  bottom: -.05rem;
  width: 7.7rem;
  max-width: none;
}

.prof__photos .media-slot {
  width: 100%;
  aspect-ratio: 1.42;
  font-size: 1.05rem;
}

.conf__char.media-slot {
  width: 6rem;
  height: 6rem;
  margin: 0 auto;
}

.conf__suit.media-slot {
  width: 7rem;
  height: 7rem;
}

.conf__balloon.speech-bubble {
  --speech-bg: #fff;
  width: max-content;
  margin: 0 auto 1.25rem;
  padding: .7rem 1.2rem;
  border: .22rem solid var(--ink);
  border-radius: .55rem;
  background: #fff;
}

.conf__balloon.speech-bubble::after {
  left: 1.3rem;
  bottom: -.7rem;
  --rw: .18rem;
}

.voices .media-slot {
  flex: none;
  width: 5rem;
  height: 5rem;
}

.voices p.speech-bubble {
  --speech-bg: #f9f9f9;
}

.voices p.speech-bubble::after {
  top: 50%;
  bottom: auto;
  left: -.62rem;
  transform: translateY(-50%) rotate(135deg);
  --rw: .18rem;
}

.telcard__char.media-slot {
  width: 4.5rem;
  height: 4.5rem;
  border-color: rgb(255 255 255 / .38);
  background:
    linear-gradient(135deg, rgb(255 255 255 / .12), rgb(255 255 255 / .03)),
    repeating-linear-gradient(-45deg, #555 0 .35rem, #454545 .35rem .7rem);
  color: #dedede;
}

.ans--a1 .ans__char {
  top: auto;
}

/* A2: reference layout — black title rail, graph-paper panel, and two-column body. */
.ans--a2 {
  position: relative;
  margin: 0 0 2rem;
  padding: 0;
  overflow: visible;
  border: .3rem solid var(--ink);
  border-top: 0;
  background:
    linear-gradient(#0000 1.12rem, rgb(21 21 21 / .12) 1.19rem, #0000 1.25rem),
    linear-gradient(90deg, #0000 1.12rem, rgb(21 21 21 / .1) 1.19rem, #0000 1.25rem),
    #fff;
  background-size: 1.25rem 1.25rem;
}

.ans--a2::before {
  display: none;
}

.ans--a2 .ans__head {
  display: flex;
  align-items: end;
  min-height: 5.45rem;
  margin: 0 -.3rem;
  padding: .55rem 1rem .65rem;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: .85rem .85rem 0 0;
  font-size: 2.05rem;
  line-height: 1;
  letter-spacing: -.08em;
}

.ans--a2 .ans__head b {
  flex: none;
  margin: 0 .38rem -.52rem -1.05rem;
  color: #fff;
  font-family: var(--f-round);
  font-size: 4.45rem;
  font-weight: 900;
  letter-spacing: -.14em;
  line-height: .82;
  -webkit-text-stroke: .22rem var(--ink);
  paint-order: stroke fill;
}

.ans--a2 .ans__head b i,
.ans--a2 .ans__head em {
  font-style: normal;
}

.ans--a2 .ans__head span {
  padding-bottom: .08rem;
  white-space: nowrap;
}

.ans--a2 .ans__head em {
  color: var(--yl);
}

.ans--a2 .ans__body {
  display: grid;
  grid-template-columns: 13.65rem minmax(0, 1fr);
  column-gap: 1.05rem;
  row-gap: 1.25rem;
  padding: 1.3rem 1.35rem 1.55rem;
}

.ans--a2 .reuse {
  grid-row: 1 / span 2;
  position: relative;
  display: block;
  min-height: 16.3rem;
  margin: 0;
}

.ans--a2 .reuse__badge {
  position: absolute;
  z-index: 2;
  top: -.8rem;
  left: -1.05rem;
  display: grid;
  width: 6.35rem;
  height: 6.35rem;
  place-items: center;
  padding: 0;
  border: .23rem solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-family: var(--f-round);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.08em;
  transform: rotate(-8deg);
}

.ans--a2 .reuse__badge::before {
  display: none;
}

.ans--a2 .reuse__ac {
  position: absolute;
  top: 3.65rem;
  left: .4rem;
  width: 12.85rem;
  max-width: none;
}

.ans--a2 .ans__txt {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: .1rem;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.53;
  letter-spacing: -.07em;
}

.ans--a2 .ans__txt .d {
  margin-bottom: .24em;
  border-bottom-color: rgb(21 21 21 / .75);
}

.ans--a2 .ans__memo {
  grid-column: 2;
  position: relative;
  min-height: 8.6rem;
  margin: 0;
  padding: 1.1rem 1.1rem 1rem 6.35rem;
  border-radius: .65rem;
  background: var(--gold);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -.055em;
}

.ans--a2 .ans__memo::before {
  content: none;
}

.ans--a2 .ans__memo::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4.95rem;
  left: -3.6rem;
  width: 7rem;
  border-top: .22rem dotted var(--ink);
  transform: rotate(-3deg);
}

.ans--a2 .ans__memo-tag {
  position: absolute;
  z-index: 1;
  top: 2.2rem;
  left: -2.7rem;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--f-round);
  font-size: 2.45rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.12em;
  transform: rotate(-8deg);
}

.ans--a2 .ans__memo p {
  position: relative;
  z-index: 1;
}

.ans--a2 .ans__orange {
  grid-column: 1 / -1;
  position: relative;
  min-height: 9.45rem;
  margin: 0;
  padding: 1rem;
  border: .34rem solid var(--orange);
  border-radius: .85rem;
  background: #fff;
  font-size: 1.36rem;
  font-weight: 900;
  line-height: 1.48;
  letter-spacing: -.065em;
}

.ans--a2 .ans__orange p {
  position: relative;
  z-index: 1;
}

.ans--a2 .ans__char2 {
  position: absolute;
  right: -.65rem;
  bottom: -.27rem;
  display: block;
  width: 8.25rem;
  height: 10.1rem;
  overflow: hidden;
}

.ans--a2 .ans__char2 img {
  position: absolute;
  top: 0;
  left: -17.4rem;
  width: 43.5rem;
  max-width: none;
  height: auto;
}

@media (max-width: 430px) {
  .ans--a2 .ans__body {
    grid-template-columns: 12.6rem minmax(0, 1fr);
    column-gap: .8rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .ans--a2 .reuse__ac {
    width: 12rem;
  }

  .ans--a2 .ans__memo {
    padding-left: 5.85rem;
    font-size: 1.12rem;
  }

  .ans--a2 .ans__memo-tag {
    left: -2.45rem;
    font-size: 2.2rem;
  }

  .ans--a2 .ans__orange {
    padding-right: 1rem;
    font-size: 1.28rem;
  }

  .ans--a2 .ans__char2 {
    right: -1.1rem;
    width: 7.35rem;
    height: 8.9rem;
  }
}

/* A3: reference layout — black title rail, graph-paper panel, product pair. */
.ans--a3 {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: .3rem solid var(--ink);
  border-top: 0;
  background:
    linear-gradient(#0000 1.12rem, rgb(21 21 21 / .12) 1.19rem, #0000 1.25rem),
    linear-gradient(90deg, #0000 1.12rem, rgb(21 21 21 / .1) 1.19rem, #0000 1.25rem),
    #fff;
  background-size: 1.25rem 1.25rem;
}

.ans--a3::before {
  display: none;
}

.ans--a3 .ans__head {
  display: flex;
  align-items: end;
  min-height: 5.45rem;
  margin: 0 -.3rem;
  padding: .55rem 1rem .65rem;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: .85rem .85rem 0 0;
  font-size: 2.05rem;
  line-height: 1;
  letter-spacing: -.08em;
}

.ans--a3 .ans__head b {
  flex: none;
  margin: 0 .38rem -.52rem -1.05rem;
  color: #fff;
  font-family: var(--f-round);
  font-size: 4.45rem;
  font-weight: 900;
  letter-spacing: -.14em;
  line-height: .82;
  -webkit-text-stroke: .22rem var(--ink);
  paint-order: stroke fill;
}

.ans--a3 .ans__head b i {
  font-style: normal;
}

.ans--a3 .ans__head em {
  color: var(--yl);
  font-style: normal;
}

.ans--a3 .ans__head span {
  padding-bottom: .08rem;
  white-space: nowrap;
}

.ans--a3 .ans__body--a3 {
  min-height: 30rem;
  padding: 1.25rem 1.65rem 1.5rem;
}

.ans--a3 .ans__txt {
  position: relative;
  z-index: 2;
  /* Reserve a clear column for the callout on the right. */
  width: 27rem;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.53;
  letter-spacing: -.06em;
}

.ans--a3 .ans__txt .d {
  width: fit-content;
  max-width: 100%;
  margin-bottom: .24em;
  border-bottom-color: rgb(21 21 21 / .75);
}

/* A3 は各文の幅だけに罫線を引き、段落末も省略しない。 */
.ans--a3 .ans__txt .d:last-child {
  border-bottom: 2px dotted rgb(21 21 21 / .75);
}

.ans--a3 .ans__txt--gap {
  margin-top: 3.4rem;
}

.ans--a3 .ans__figs {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

.ans--a3 .ans__ac1,
.ans--a3 .ans__ac2 {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  height: auto;
}

/* 天井カセット：透明余白の大きい素材のため、実像が右上に収まる倍率と位置に調整 */
.ans--a3 .ans__ac1 {
  top: -3.2rem;
  right: -20.15rem;
  width: 39rem;
}

/* 室外機：実像が本文の右下・丸バッジの背面に全体が見えるよう調整 */
.ans--a3 .ans__ac2 {
  top: 9.7rem;
  right: -12.75rem;
  width: 27rem;
}

.ans--a3 .ans__circle {
  --rb: var(--gold);
  --rr: 50%;
  --rw: .24rem;
  position: absolute;
  z-index: 3;
  top: 11.8rem;
  /* Keep the callout in the product column, clear of the copy on the left. */
  right: 10rem;
  display: flex;
  width: 6.5rem;
  height: 6.5rem;
  padding: .4rem;
  border: .24rem solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.08em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ans--a3 .ans__circle::before {
  display: none;
}

.ans--a3 .ans__circle b {
  display: block;
  font-size: 1.12em;
  white-space: nowrap;
}

.ans--a3 .ans__circle>span {
  display: block;
  white-space: nowrap;
}

/* clip-path は filter より後に適用されるため、星型は ::before に持たせて
   親側の drop-shadow で黒フチを描く */
.ans--a3 .spark {
  z-index: 2;
  width: 2.4rem;
  background: none;
  clip-path: none;
  filter:
    drop-shadow(.09rem 0 0 var(--ink)) drop-shadow(-.09rem 0 0 var(--ink)) drop-shadow(0 .09rem 0 var(--ink)) drop-shadow(0 -.09rem 0 var(--ink));
}

.ans--a3 .spark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yl);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

.ans--a3 .spark--d {
  top: 2.1rem;
  right: 13.3rem;
}

.ans--a3 .spark--e {
  top: 5.3rem;
  right: 14.55rem;
  width: 1.7rem;
}

/* ------------------------------------------------------------
   SEC 10 : 電話 CTA — 参考デザインに合わせた最終案内
------------------------------------------------------------ */
.sec-tel {
  position: relative;
  isolation: isolate;
  padding: 1.85rem 1.55rem 2.45rem;
  background: #fff;
}

.sec-tel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 21.7rem;
  left: 0;
  width: calc(100% - 4.85rem);
  height: 14.45rem;
  background: #fff13b;
}

.tel__pills {
  gap: 1.65rem;
  margin: 0 0 2.1rem;
}

.tel__pills li {
  min-height: 8.35rem;
  gap: 1.35rem;
  padding: .8rem 1.8rem .8rem 1.5rem;
  border: .3rem solid var(--ink);
  border-radius: 5rem;
  background: #fff900;
  box-shadow: 0 .34rem 0 rgb(21 21 21 / .18);
  font-family: var(--f-round);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.065em;
}

.tel__pills li p {
  position: relative;
  z-index: 1;
  flex: 1;
}

.tel__pills .bl {
  color: #1111ed;
}

.tel-pill__art {
  flex: none;
  object-fit: contain;
}

.tel-pill__art--note {
  width: 8.15rem;
  height: 6.3rem;
}

.tel-pill__art--ng {
  width: 7.1rem;
  height: 6.7rem;
}

.telcard {
  isolation: isolate;
  z-index: 1;
  overflow: visible;
  padding: 0;
  border: .3rem solid var(--ink);
  border-radius: .8rem;
  background: #fff;
  color: var(--ink);
  text-align: center;
}

.telcard__clip {
  position: absolute;
  z-index: 3;
  top: -4.4rem;
  left: -4.3rem;
  width: 12.5rem;
  height: 10.75rem;
  object-fit: contain;
}

.telcard__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.05rem;
  min-height: 9.25rem;
  padding: 1.45rem 1.4rem 1rem 4.9rem;
}

.telcard .telblock__icon {
  width: 4.03rem;
  height: 3.8rem;
  fill: #1111ed;
}

.telcard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.telcard__num {
  display: block;
  color: #1111ed;
  font-family: "Montserrat", var(--f-round);
  font-size: 3.55rem;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.telcard__hours {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: .75rem;
  color: #1111ed;
  font-family: var(--f-round);
  font-size: 1.62rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.telcard__hours i {
  display: block;
  width: 4.55rem;
  height: .25rem;
  background: #1111ed;
}

.telcard__bottom {
  position: relative;
  justify-content: flex-start;
  gap: 1.5rem;
  min-height: 8.9rem;
  margin: 0;
  padding: 1.25rem 10.9rem 1.25rem 5rem;
  border-top: .18rem solid var(--ink);
  border-radius: 0;
  background: #fff;
}

.telcard .truck {
  width: 5.5rem;
  flex: none;
}

.telcard__msg {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-family: var(--f-round);
  font-size: 1.48rem;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.telcard__msg mark {
  padding: 0 .08em;
  background: #fff13b;
  color: inherit;
}

.telcard__char {
  position: absolute;
  right: -.55rem;
  bottom: 0;
  width: 9.3rem;
  height: 8.65rem;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 430px) {
  .sec-tel {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .tel__pills li {
    min-height: 7.8rem;
    gap: 1rem;
    padding-right: 1.3rem;
    padding-left: 1.1rem;
    font-size: 1.55rem;
  }

  .tel-pill__art--note {
    width: 7.25rem;
  }

  .tel-pill__art--ng {
    width: 6.35rem;
  }

  .telcard__top {
    gap: .75rem;
    padding-left: 3.9rem;
  }

  .telcard .telblock__icon {
    width: 3.5rem;
    height: 3.3rem;
  }

  .telcard__num {
    font-size: 3.1rem;
  }

  .telcard__hours {
    gap: .65rem;
    font-size: 1.4rem;
  }

  .telcard__hours i {
    width: 3.7rem;
  }

  .telcard__bottom {
    gap: 1rem;
    min-height: 8.2rem;
    padding-right: 9.3rem;
    padding-left: 3.6rem;
  }

  .telcard .truck {
    width: 4.6rem;
  }

  .telcard__msg {
    font-size: 1.25rem;
  }

  .telcard__char {
    right: 0;
    width: 8rem;
    height: 7.7rem;
  }
}

/* ------------------------------------------------------------
   見積依頼フォーム
------------------------------------------------------------ */
/* 本家: iframe の上余白 mt-16(64px) + qubo 側の左右余白（左 7.5px / 右 15px）。幅は 768px いっぱい */
.formwrap {
  width: auto;
  margin: 0 -1.55rem -2.45rem; /* 親 .sec-tel の余白を打ち消して 768px 幅いっぱいにする */
  padding: 4rem .95rem 3.4rem .45rem;
  background: #fff;
}

.estimate-form__title,
.privacy h3 {
  position: relative;
  margin: 0 0 1.35rem;
  padding-left: 1.4rem;
  color: #2c2c2c;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.35;
}

.estimate-form__title::before {
  content: "";
  position: absolute;
  top: .08rem;
  bottom: .08rem;
  left: 0;
  width: .5rem;
  background: #f27620;
}

.estimate-form {
  border-top: .08rem solid #d6d6d6;
  border-left: .08rem solid #d6d6d6;
}

.estimate-form__row {
  display: grid;
  grid-template-columns: 11.55rem minmax(0, 1fr); /* qubo のラベル列 184.8px */
  min-height: 4.8rem;
  border-right: .08rem solid #d6d6d6;
  border-bottom: .08rem solid #d6d6d6;
}

.estimate-form__row>label,
.estimate-form__row>span {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 3.35rem .9rem 1rem;
  background: #fff4eb;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.estimate-form__row>label b,
.privacy__agree b {
  display: inline-block;
  position: absolute;
  right: .8rem;
  margin: 0;
  padding: .15rem .55rem .2rem;
  background: #ed622d;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* メールアドレスは文字数が多いため、必須バッジを通常フローに置く。 */
.estimate-form__row>label[for="email"] {
  display: flex;
  justify-content: space-between;
  gap: .35rem;
  padding-right: .75rem;
  font-size: .96rem;
}

.estimate-form__row>label[for="email"] b {
  position: static;
  right: auto;
  flex: none;
  margin: 0;
}

.estimate-form__row>div {
  display: flex;
  align-items: center;
  padding: .8rem 1rem;
  background: #fff;
}

.estimate-form input[type="text"],
.estimate-form input[type="email"],
.estimate-form input[type="tel"],
.estimate-form textarea {
  width: 100%;
  min-width: 0;
  border: .08rem solid #c9c9c9;
  border-radius: .2rem;
  background: #fff;
  box-shadow: inset 0 .06rem .12rem rgb(0 0 0 / .05);
  font: inherit;
}

.estimate-form input[type="text"],
.estimate-form input[type="email"],
.estimate-form input[type="tel"] {
  height: 2.7rem;
  padding: .35rem .55rem;
}

.estimate-form__row--address {
  min-height: 15.8rem;
}

.estimate-form__row--address>div {
  align-items: flex-start;
}

.estimate-form__address {
  display: block !important;
  width: 100%;
}

.estimate-form__address p {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .55rem;
  font-size: .95rem;
}

.estimate-form__address p:last-child {
  margin-bottom: 0;
}

.estimate-form__address p>span {
  flex: none;
}

.estimate-form__address p>label {
  flex: 0 0 6.35rem;
}

.estimate-form__address #postal {
  width: 9rem;
}

.estimate-form__address #prefecture {
  width: 9rem;
}

.estimate-form__address button {
  flex: none;
  height: 2.7rem;
  padding: 0 .95rem;
  border: 0;
  border-radius: .2rem;
  background: #174453;
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
}

.estimate-form__row--message {
  min-height: 8rem;
}

.estimate-form__row--message>div {
  align-items: stretch;
}

.estimate-form textarea {
  min-height: 5.7rem;
  padding: .55rem;
  resize: vertical;
}

.estimate-form__row--files {
  min-height: 10rem;
}

.estimate-form__row--files>div {
  display: block;
}

.estimate-form__files {
  width: 100%;
}

.estimate-form__files label {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .65rem;
  font-size: .9rem;
}

.estimate-form__files input[type="file"] {
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: .82rem;
}

.estimate-form__files p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
}

.privacy {
  margin-top: 3.1rem;
}

.privacy h3 {
  margin-bottom: 1.3rem;
  padding-left: 2rem;
}

.privacy h3::before {
  content: "⚡";
  position: absolute;
  top: -.18rem;
  left: 0;
  width: auto;
  height: auto;
  background: transparent;
  color: #ed6b1a;
  font-family: sans-serif;
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1;
}

.privacy__text {
  max-height: 6rem;
  margin-bottom: 1rem;
  padding: .45rem .9rem .75rem .75rem;
  overflow-y: auto;
  font-size: .88rem;
  line-height: 1.85;
}

.privacy__agree {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 3rem;
  padding: .8rem 1.25rem;
  background: #eff7fc;
  font-size: .87rem;
  font-weight: 700;
}

.privacy__agree b {
  position: static;
  grid-column: 1;
  justify-self: start;
  right: auto;
  margin: 0;
}

.privacy__consent {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  white-space: nowrap;
}

.privacy__consent input {
  width: .9rem;
  height: .9rem;
  margin: 0;
}

.estimate-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 22rem);
  min-height: 4.1rem;
  margin: 3rem auto 0;
  border: 0;
  border-radius: 99rem;
  background: #72bd1f;
  box-shadow: inset 0 -.17rem 0 rgb(0 0 0 / .14);
  color: #fff;
  font-family: var(--f-round);
  font-size: 1.25rem;
  font-weight: 900;
}

.estimate-form__submit::before {
  content: "›";
  margin-right: 2.2rem;
  font-family: sans-serif;
  font-size: 3rem;
  font-weight: 300;
  line-height: .5;
}

@media (max-width: 430px) {
  .formwrap {
    padding-right: .8rem;
    padding-left: .8rem;
  }

  .estimate-form__row {
    grid-template-columns: 10rem minmax(0, 1fr);
  }

  .estimate-form__row>label,
  .estimate-form__row>span {
    gap: .35rem;
    padding: .75rem 2.85rem .75rem .55rem;
    font-size: .84rem;
  }

  .estimate-form__row>label b {
    right: .4rem;
    padding-right: .35rem;
    padding-left: .35rem;
    font-size: .68rem;
  }

  .estimate-form__row>label[for="email"] {
    padding-right: .45rem;
    font-size: .75rem;
  }

  .estimate-form__row>div {
    padding: .65rem;
  }

  .estimate-form__address p {
    gap: .35rem;
    font-size: .75rem;
  }

  .estimate-form__address p>label {
    flex-basis: 4.8rem;
  }

  .estimate-form__address #postal,
  .estimate-form__address #prefecture {
    width: 5.4rem;
  }

  .estimate-form__address button {
    padding: 0 .45rem;
    font-size: .72rem;
  }

  .estimate-form__files label {
    display: block;
    font-size: .75rem;
  }

  .estimate-form__files input[type="file"] {
    display: block;
    margin-top: .25rem;
  }
}

@media (max-width: 430px) {
  .ans--a3 .ans__body--a3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .ans--a3 .ans__txt {
    width: 27rem;
    font-size: 1.49rem;
  }

  .ans--a3 .ans__circle {
    font-size: 1.33rem;
  }
}

/* A1〜A3 見出し：揺らぎフィルタを使わず、切れのない角丸カードに統一。 */
.ans--a1,
.ans--a2,
.ans--a3 {
  margin: 0 0 2rem;
  border: .3rem solid var(--ink);
  border-radius: .85rem;
  overflow: hidden;
}

.ans--a1 .ans__head,
.ans--a2 .ans__head,
.ans--a3 .ans__head {
  align-items: center;
  min-height: 5.7rem;
  margin: 0;
  padding: .6rem 1.2rem .7rem;
  border-radius: 0;
}

.ans--a1 .ans__head b,
.ans--a2 .ans__head b,
.ans--a3 .ans__head b {
  margin: 0 .55rem 0 0;
  font-size: 4.1rem;
  line-height: .9;
}

.ans--a1 .ans__head span,
.ans--a2 .ans__head span,
.ans--a3 .ans__head span {
  padding: 0;
}

/* 元気でんき実績：オレンジの見出し札と案内バナーに再構成。 */
.genki__badges {
  gap: 1.35rem;
  margin-top: 3.1rem;
}

.genki__tab {
  min-width: 11.5rem;
  padding: .5rem .75rem .58rem;
  border: .24rem solid var(--ink);
  background: var(--orange);
  filter: none;
  font-size: 1.14rem;
  transform: rotate(.4deg);
}

.genki__tab::before {
  display: none;
}

.genki__badges li::after {
  top: 2.15rem;
}

.genki__box {
  --rw: .34rem;
  --rr: .52rem;
  min-height: 10.4rem;
  padding-top: 2.35rem;
}

.genki__foot {
  display: grid;
  grid-template-columns: 8.3rem minmax(0, 1fr) 9.5rem;
  grid-template-rows: 11.9rem;
  align-items: end;
  margin: 2.15rem -.25rem 0;
  isolation: isolate;
}

.genki__char-frame {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  width: 8.3rem;
  height: 11.45rem;
  margin: 0 0 .1rem -.35rem;
}

.genki__char {
  position: absolute;
  top: 1rem;
  /* mascot-r.png の人物部分は画像の中央にあるため、透明余白を差し引いて配置する。 */
  left: -14.1rem;
  width: 36rem;
  max-width: none;
}

.genki__msg {
  grid-column: 2 / 4;
  grid-row: 1;
  position: relative;
  z-index: 1;
  isolation: isolate;
  align-self: end;
  min-height: 8.1rem;
  margin: 0 1.15rem .5rem -.55rem;
  padding: 1.25rem 8.65rem 1rem 3.25rem;
  border: .38rem solid var(--ink);
  border-radius: 1.35rem;
  background-color: var(--orange);
  background-image: radial-gradient(rgb(255 210 90 / .72) .1rem, transparent .12rem);
  background-size: .55rem .55rem;
  color: #fff;
  font-family: var(--f-round);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.08em;
  text-align: center;
  transform: skewX(-8deg);
}

.genki__msg::before {
  content: "";
  position: absolute;
  /* 普通の吹き出しの三角形。 */
  z-index: 0;
  top: 2.35rem;
  /* 根元の重なりは輪郭をつなぐ最小限に留める。 */
  left: -2.05rem;
  width: 2.2rem;
  height: 3rem;
  background: var(--ink);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.genki__msg::after {
  content: "";
  position: absolute;
  /* 内側は枠線を隠せる分だけ本体へ重ねる。 */
  z-index: 2;
  top: 2.65rem;
  left: -1.6rem;
  width: 1.8rem;
  height: 2.4rem;
  background: var(--orange);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.genki__msg>span {
  display: block;
  position: relative;
  z-index: 3;
  transform: skewX(8deg);
  -webkit-text-stroke: .12rem var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
}

.genki__msg-top {
  color: var(--comic);
}

.genki__ac-frame {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  z-index: 3;
  width: 10.2rem;
  height: 8.4rem;
  margin: 0 -2.55rem 5.65rem 0;
}

.genki__ac {
  position: absolute;
  top: rem;
  left: -11.5rem;
  width: 33rem;
  max-width: none;
}

@media (max-width: 430px) {
  .genki__foot {
    grid-template-columns: 7.9rem minmax(0, 1fr) 8.9rem;
  margin-top: .5rem;
}

  .genki__char-frame {
    width: 7.9rem;
  }

  .genki__msg {
    margin-right: .75rem;
    padding-right: 7.75rem;
    padding-left: 3rem;
    font-size: 2.7rem;
  min-height: 10.2rem;
  margin-bottom: 0;
}

  .genki__ac-frame {
    margin-right: 0;
  }
}

/* Area title spacing / scale and reason outline emphasis */
.area__title em {
  margin-left: .24em;
  font-size: 2.45em;
}

.why__reason {
  padding: 0 .06em;
  font-weight: 400;
  -webkit-text-stroke: .72rem var(--ink);
  paint-order: stroke fill;
}

/* 元気でんき: 本家実測に合わせた級数（監査 2026-09-08） */
.genki__h2 .rd { font-size: 1.4em; }
.genki__msg-top { font-size: 3.4rem; }
.genki__box i { color: var(--red); }

/* 監査 2026-09-08: セクション個別の実測値 */
.cause__list .x { line-height: 1; }
.sec-again .q-pill { font-size: 2.6rem; }
.sec-again .q-mark { font-size: 1.9em; }
.pro__h2 > span { font-size: .6em; }