@charset "utf-8";

@font-face {
  font-family: "851TegakiZatsu";
  src: url("../fonts/851-tegaki-zatsu.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CenturyGothicLocal";
  src: url("../fonts/centurygothic.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "GoogleSansLocal";
  src: url("../fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "CenturyGothicLocal";
  src: url("../fonts/centurygothic_bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

/* Reference-driven header/hero overrides. Only aircon1.png is used as raster art. */

:root {
  /* 本家の見出しは角ばった太ゴシック（写植）。手元で最も近いのが Noto Sans JP 900。
     丸ゴシックの --f-gothic とは別物なので、本家に寄せる箇所だけこちらを使う。 */
  --f-square: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  /* ---- 文言ごとの書体 ----------------------------------------------
     1 行 1 文言。ここだけ差し替えれば、その文言だけ書体を変えられる。
     （--f-square = 角ゴシック / --f-round = 丸ゴシック / 直接フォント名も可）
     ------------------------------------------------------------------ */
  --f-badge-small: var(--f-square);              /* エアコン販売王がお届けする */
  --f-badge-main:  var(--f-square);              /* 業務用エアコン */
  --f-badge-sub:   var(--f-square);              /* 専門サイト */
  --f-cap:         var(--f-square);              /* エアコン累計販売台数 */
  --f-num:         "RocknRoll One", var(--f-round); /* 38,000 */
  --f-unit:        var(--f-square);              /* 台 */
  --f-rest:        var(--f-square);              /* 以上!! */
  --f-cp-max:      var(--f-square);              /* 最大 */
  --f-cp-num:      "Lato", var(--f-round);       /* 92 */
  --f-cp-pct:      "Lato", var(--f-round);       /* % */
  --f-cp-off:      var(--f-round);               /* OFF */
  --f-sat-label:   "Zen Kaku Gothic New", var(--f-square); /* お客様満足度 */
  --f-sat-num:     "Quicksand", var(--f-round);  /* 95.8% */
  --f-chip:        var(--f-square);              /* リースも / OK / 初期費用 / 0円 */
  --f-chip-note:   var(--f-square);              /* リースなら */
}

.hd {
  height: 5.76rem;
}

.hd__logo {
  top: 1.0625rem;
  left: 2.295rem;
  width: 14rem;
  height: 4.4rem;
  padding: 0;
  overflow: hidden;
  background: transparent;
  clip-path: none;
  filter: none;
}

.hd__logo::before {
  display: none;
}

.hd__logo img {
  position: absolute;
  top: -1.45rem;
  left: -.75rem;
  width: 15rem;
  max-width: none;
  height: auto;
}

.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 {
  top: 1.5rem;
  right: 2.6rem;
  width: 15.9rem;
}

.telblock__icon {
  position: relative;
  display: block;
  width: 2.8rem;
  height: 2.45rem;
  flex: none;
}

.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__num {
  font-size: 1.78rem;
  letter-spacing: -.08em;
  transform: scaleX(.985);
  transform-origin: left center;
}

.hero {
  /* 下段のリース／初期費用カードを切らずに収める。 */
  height: 31.2rem;
  /* 吹き出しの右上の角だけは本家と同じくヘッダー側へ .5rem ほど出る。
     hero__rays と hero__ac は従来どおり hero の矩形で切る必要があるため、
     overflow:hidden ではなく「右上に切り欠きを足した clip-path」で切っている。 */
  overflow: visible;
  clip-path: polygon(0 0, 13.3rem 0, 13.3rem -.62rem, 20.15rem -.62rem, 20.15rem 0, 100% 0, 100% 100%, 0 100%);
  /* .hd が z-index:5 の黒帯なので、切り欠きから出した角を隠さないよう 1 段上に置く。
     clip-path があるためヒーローの他の要素がヘッダーに被ることはない。 */
  z-index: 6;
}

.hero__ac {
  /* 商品画像は元の配置に戻す。 */
  left: 30.0rem;
  top: -5.15rem;
  width: 28.5rem;
  z-index: 7;
}

.hero__box {
  left: 0;
  top: 0;
  width: 47.5rem;
  height: 32.3rem;
  background: url("../images/hero-card-frame.png") center top / contain no-repeat;
  clip-path: none;
}

.hero__box::after {
  display: none;
}

/* .aircon-banner（吹き出しバッジ）はファイル末尾の専用ブロックで一括定義する。 */

/* .hero__cap / .hero__cap-copy はファイル末尾の専用ブロックで一括定義する。 */

.hero__bolt {
  display: none;
}

/* .hero__num / .hero__num-copy はファイル末尾の専用ブロックで一括定義する。 */











/* ============================================================
   SEC 09 : Customer satisfaction — reference-driven redesign
   The customer-image slots intentionally remain empty/replaceable.
   ============================================================ */
.sec-sat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.6rem 2.5rem 1.8rem;
  background:
    repeating-conic-gradient(from -6deg at 50% 50%, rgb(255 255 255 / .7) 0deg 1deg, transparent 1.1deg 7deg),
    var(--comic);
}

.sat__rays {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .65;
  background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 1.7rem, rgb(255 255 255 / .42) 1.74rem 1.82rem, transparent 1.86rem 3.25rem);
}

.sat__card {
  --rb: var(--ink);
  --rc: var(--ink);
  --rr: .55rem;
  --rw: .3rem;
  position: relative;
  min-height: 62rem;
  padding: 2.3rem 2rem 1.7rem;
  background: #fff;
  border: 0;
}

/* The shared rough filter paints a full black surface at this large scale.
   Keep the hand-drawn treatment for smaller elements, but use a crisp framed
   white sheet here so the information on the right stays visible. */
.sat__card.rough::before {
  display: block;
  inset: -.02rem;
  z-index: 2;
  background: transparent;
  border: .42rem solid var(--ink);
  border-radius: 1.15rem;
  filter: url(#rough-s);
  pointer-events: none;
}

.sat__card.rough > * {
  position: relative;
  z-index: 3;
}

.sat__card.rough::after {
  content: "";
  position: absolute;
  inset: .02rem -.42rem -.48rem .02rem;
  z-index: 1;
  border-radius: 1.15rem;
  background: transparent;
  border-right: .7rem solid rgb(18 18 18 / .94);
  border-bottom: .7rem solid rgb(18 18 18 / .94);
  pointer-events: none;
}

/* Keep the chart/title layer anchored to the sheet rather than the padded
   content box; its children already carry their own stacking levels. */
.sat__card.rough > .sat__top {
  position: static;
}

.sat__top {
  display: block;
  min-height: 21.35rem;
}

/* Black title plinth behind the chart, matching the reference's pennant-like
   silhouette while keeping the explanatory copy on top. */
.sat__top::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -.9rem;
  left: .95rem;
  width: 20rem;
  height: 8.55rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 59%, 50% 100%, 0 56%);
  filter: drop-shadow(.34rem .42rem 0 rgb(18 18 18 / .9));
}

.sat__flag {
  --rb: var(--comic);
  --rc: var(--ink);
  --rr: 0;
  --rw: .28rem;
  position: absolute;
  z-index: 5;
  top: -1.25rem;
  left: .85rem;
  width: 19.7rem;
  padding: 1rem .65rem 1.7rem;
  background: var(--comic);
  color: var(--ink);
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  text-align: center;
}

/* The flag already has its own framed shape; the generic rough pseudo would
   add a second offset line and leave a white channel at the corners. */
.sat__flag.rough-s::before {
  display: none;
}

.sat__flag {
  border: .28rem solid var(--ink);
  border-radius: .65rem;
  box-sizing: border-box;
}

.sat__flag::after {
  display: none;
}

.sec-sat .pie--lg {
  position: absolute;
  z-index: 2;
  top: 4.9rem;
  left: 1.9rem;
  width: 17.4rem;
  height: 17.4rem;
  margin: 0;
  border-width: .35rem;
  box-shadow: .6rem .72rem 0 var(--ink);
}

/* The supplied reference uses a clean gray slice and gives the depth to the
   entire pie through its heavy lower-right black drop shadow. */
.sec-sat .pie--lg::after {
  display: none;
}

.sec-sat .pie--lg .pie__num {
  position: absolute;
    top: 3.4rem;
    width: 27rem;
    font-size: 11rem;
    text-align: center;
    transform: scaleX(.8);
    white-space: nowrap;
    text-shadow: .70rem .550rem 0 #000, .405rem .255rem 0 #000, .300rem .300rem 0 #000, .195rem .255rem 0 #000, .150rem .150rem 0 #000, .195rem .045rem 0 #000, .300rem 0 0 #000, .405rem .045rem 0 #000;
    /* Century Gothic이 실행 환경에 없을 때도 기하학적이고 곧은 숫자 형태를 유지한다. */
    font-family: "Rubik", "Google Sans", "GoogleSansLocal", Arial, sans-serif !important;
    font-weight: 500 !important;
}

.sec-sat .pie--lg .pie__num span {
  margin-left: .05em;
  font-size: .5em;
  font-family: inherit !important;
}

.sat__desc {
  position: relative;
  z-index: 3;
  width: 17.7rem;
  margin-left: auto;
}

.sat__logo {
  position: relative;
  display: inline-block;
  margin: .45rem 0 1.12rem;
  width: 18.7rem;
  height: 6.4rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
}

.sat__title-image {
  display: block;
  width: 17.7rem;
  height: auto !important;
  margin: 0 auto;
  max-width: none;
  filter: none;
}

.sat__logo::after {
  display: none;
}

.sat__logo .company-logo {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  width: 5.3em;
  vertical-align: baseline;
}

.sat__txt {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -.075em;
}

.sat__txt .d {
  width: 100%;
  max-width: 17.7rem;
  padding-bottom: .05em;
  margin-bottom: .08em;
  border-bottom: .12rem dashed var(--ink);
}

.sat__note {
  width: 17.7rem;
  margin: 1.25rem 0 0;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.04em;
}

.sat__note span {
  display: block;
}

.sat__note .note-line {
  padding-left: 1.05em;
}

.sat__sum {
  margin: .6rem 0 1.7rem;
  padding: 1.1rem 1rem 1.2rem;
  border: 0;
  background: #fff4d6;
  font-size: 1.48rem;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -.065em;
}

.sat__sum .rd {
  margin: 0 .08em;
  font-size: 1.15em;
  line-height: .8;
}

.sat__sum .rd:first-of-type {
  font-size: 1.52em;
}

.voices {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 0;
}

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

.voices .voice__avatar {
  display: block;
  position: relative;
  z-index: 2;
  flex: none;
  width: 7rem;
  height: 7rem;
  margin-right: -2.3rem;
  border-radius: 50%;
  object-fit: cover;
  transform: translateX(-2rem);
}

.voices p,
.voices p.speech-bubble {
  --rb: var(--orange);
  --rc: var(--ink);
  --rr: .72rem;
  --rw: .3rem;
  flex: 1;
  min-height: 6.25rem;
  padding: .8rem 1rem .8rem 3.5rem;
  background: var(--orange);
  color: #fff;
  border-radius: .72rem;
  overflow: hidden;
  box-shadow: .34rem .42rem 0 rgb(18 18 18 / .9);
  font-size: 1.38rem;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.075em;
}

.voices p.speech-bubble::after {
  display: none;
}

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

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

/* SEC 09/10 parity pass (origin_2.jpg vs new_2.jpg).  The reference uses a
   taller white satisfaction sheet, roomier orange testimonials, and taller
   yellow CTA pills at the mobile 48rem canvas width. */
.sat__card {
  min-height: 67rem;
  padding-bottom: 2.1rem;
  border-width: .42rem;
  border-radius: 1.15rem;
  box-shadow: none;
}

.sat__top {
  min-height: 23.1rem;
}

.sat__sum {
  margin-top: .9rem;
  margin-bottom: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.35rem;
  font-size: 1.38rem;
}

.voices {
  gap: 1.45rem;
}

.voices p,
.voices p.speech-bubble {
  min-height: 7.3rem;
  margin-left: -1.6rem;
  padding-top: .95rem;
  padding-bottom: .95rem;
  font-size: 1.58rem;
  line-height: 1.32;
}

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

.tel__pills li {
  min-height: 8.1rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  font-size: 2rem;
}

.sec-sat {
  padding-top: 3.6rem;
  padding-right: 2.5rem;
  padding-bottom: 3.5rem;
  padding-left: 2.5rem;
}

.tel__pills {
  gap: 2rem;
  margin-right: 1.3rem;
  margin-left: 1.3rem;
}

.sec-tel {
  padding-top: 2.45rem;
  padding-right: 1.55rem;
  padding-left: 1.55rem;
}

.sec-tel .telcard {
  margin-right: .2rem;
  margin-left: 1.6rem;
}

.sec-tel::before {
  left: 1.75rem;
  top: 22.25rem;
  width: 42rem;
  height: 14rem;
}

.telcard__top {
  min-height: 7.7rem;
  padding-top: 1rem;
  padding-bottom: .75rem;
  transform: translateX(-1.5rem);
}

.telcard__bottom {
  min-height: 6.9rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
  padding-left: 1.2rem;
}

.telcard .truck {
  width: 6.3rem;
}

.telcard__char {
  right: 0;
  height: 8.6rem;
}

/* Satisfaction copy uses the same condensed Japanese bold face as the
   supplied title asset; enlarge the testimonial circles to overlap the card
   corners like the reference. */
.sec-sat .pie__num,
.sec-sat .sat__txt,
.sec-sat .sat__note,
.sec-sat .sat__sum,
.sec-sat .voices p {
  font-family: "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
}

.sec-sat .voices .voice__avatar {
  width: 8.5rem;
  height: 8.5rem;
  margin-right: -3.35rem;
  transform: translateX(-2.25rem);
}

.tel-pill__art--note {
  width: 8.15rem;
  height: 6.3rem;
  position: relative;
  left: 1.25rem;
  transform: none;
}

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

.sec-tel .tel__pills li {
  font-size: 2.2rem;
}

.sec-tel .telcard__num {
  font-size: 4rem;
  font-weight: 800;
}

.sec-tel .telcard .telblock__icon {
  width: 8rem;
  height: 7.5rem;
  flex: none;
}

.sec-tel .telcard .truck {
  width: 8.4rem;
  height: auto;
  transform: translateX(1rem);
}

.sec-tel .telcard__hours {
  font-size: 1.9rem;
  font-weight: 800;
}

.sec-tel .telcard__msg {
  font-size: 1.82rem;
  font-weight: 800;
}

.sec-tel .telcard__clip {
  top: -4.7rem;
  left: -5.8rem;
}

/* The reference has no black top border beneath the overlapping clip. */
.sec-tel .telcard::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -.32rem;
  left: -.32rem;
  width: 10.8rem;
  height: 6.05rem;
  border-radius: .8rem 0 0 0;
  background: #fff;
  pointer-events: none;
}

.sec-tel::before {
  top: 21.5rem;
  height: 15.2rem;
}

@media (max-width: 430px) {
  .sec-sat {
    padding: 1.6rem 2.2rem 1.6rem;
  }

  .sat__card {
    min-height: 59rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }

  .sat__flag {
    left: .55rem;
    width: 18.2rem;
    font-size: 2rem;
  }

  .sec-sat .pie--lg {
    top: 4.45rem;
    left: -1.5rem;
    width: 19.4rem;
    height: 19.4rem;
  }

  .sec-sat .pie--lg .pie__num {
    top: 4.3rem;
    left: -6rem;
    width: 26rem;
    font-size: 9.35rem;
  }

  .sat__desc {
    width: 17.7rem;
  }

  .sat__logo {
    font-size: 2.08rem;
  }

  .sat__txt {
    font-size: 1.27rem;
  }

  .sat__note {
    width: 17.5rem;
    font-size: .73rem;
  }

  .sat__sum {
    font-size: 1.37rem;
  }

  .voices .voice__avatar {
    width: 6.35rem;
    height: 6.35rem;
    margin-right: -2.05rem;
  }

  .voices p,
  .voices p.speech-bubble {
    min-height: 5.8rem;
    padding: .68rem .75rem .68rem 3.05rem;
    font-size: 1.22rem;
  }

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

/* ============================================================
   HERO ─ 「業務用エアコン専門サイト」吹き出しバッジ
   ------------------------------------------------------------
   本家 https://aircon-hanbai.jp/gyoumuyou_bk20260903/ の
   1_1.jpg + 1_2.jpg を縦に繋いだ原寸画像（幅 1600px ＝ 1rem 33.3333px）から
   1px 単位で実測して合わせている。数値を触るときは必ず実測値と対で更新すること。

   吹き出し四隅（原寸 px）  左上 38.9,233.3 / 右上 648.1,183.8
                            右下 573.4,444.0 / 左下 50.3,486.1
   稲妻（同）               358.2,461.3 → 288.0,502.6 → 377.6,525.9 → 319.0,562.5
                            → 346.2,528.6 → 217.6,520.7 → 278.6,467.7
   黒フチ 7.5px(.225rem)、その黒を右下へ 7.5px ずらした影
   赤 #e91c21 ／ 黄 #ffff00 ／ 文字の影は右下へ 4px(.12rem)
   文字は 3 行とも -3.9deg。字面の縦横比が本家に合うよう scaleX で長体にする。
   書体は本家が写植のため完全一致しないが、角ゴシックでは Noto Sans JP 900 が最も近い。
   ============================================================ */
.aircon-banner {
  left: 1.167rem;
  top: -.246rem;
  width: 18.276rem;
  height: 11.361rem;
  z-index: 8;
  padding: 0;
  overflow: visible;
  background: transparent;
  clip-path: none;
  filter: none;
  text-align: left;
  isolation: isolate;
}

/* 赤い本体。クリップ形状には border が効かないので、黒は別の疑似要素で描く。 */
.aircon-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #e91c21;
  clip-path: polygon(0% 13.07%, 100% 0%, 87.74% 68.71%, 52.41% 73.28%, 40.89% 84.18%, 55.60% 90.34%, 45.98% 100%, 50.44% 91.05%, 29.33% 88.96%, 39.35% 74.97%, 1.87% 79.83%);
}

/* 黒フチ 7.5px と、右下 7.5px へずらした版ズレ影。どちらも黒なので 1 枚にまとめる。
   （clip-path は filter より後に効くので drop-shadow は切り落とされてしまう。
     そのため「各辺を 7.5 + max(0, 法線・(7.5,7.5)) だけ外へ動かした多角形」＝
     フチと影の和集合を、頂点座標として直接埋め込んでいる。
     % を一律に広げる方法では中央から遠い辺ほどフチが太くなり本家と形が変わる。） */
.aircon-banner::before {
  content: "";
  position: absolute;
  inset: -1.5rem;
  z-index: -2;
  background: var(--ink);
  clip-path: polygon(5.95% 19.35%, 95.78% 8.53%, 84.29% 67.84%, 53.46% 71.51%, 46.89% 77.24%, 59.40% 82.06%, 40.62% 98.51%, 47.52% 85.25%, 28.54% 83.53%, 36.28% 73.56%, 7.70% 76.97%);
}

/* 3 行とも本家と同じ -3.9deg。transform-origin を左上に固定しているので
   left / top はそのまま「回転前の文字ボックスの左上」＝位置合わせの基準になる。 */
.aircon-banner .small,
.aircon-banner .main,
.aircon-banner .sub {
  position: absolute;
  z-index: 1;
  display: block;
  /* style.css 側の margin-top（.5rem / .55rem）を必ず打ち消す。
     詳細度を .aircon-banner .main と同じにしてあるので、後勝ちで効く。 */
  margin: 0;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: .128rem .128rem 0 var(--ink);
  transform-origin: 0 0;
}

.aircon-banner .small {
  font-family: var(--f-badge-small);
  left: 2.446rem;
  top: 1.905rem;
  font-size: 1.031rem;
  letter-spacing: .0737em;
  transform: rotate(-3.9deg) scaleX(.9009);
}

.aircon-banner .main {
  font-family: var(--f-badge-main);
  left: 1.516rem;
  top: 3.344rem;
  color: #ff0;
  font-size: 2.376rem;
  letter-spacing: .0426em;
  transform: rotate(-3.9deg) scaleX(.8657);
}

.aircon-banner .sub {
  font-family: var(--f-badge-sub);
  left: 5.011rem;
  top: 6.026rem;
  font-size: 1.810rem;
  letter-spacing: .0277em;
  transform: rotate(-3.9deg) scaleX(.9194);
}

/* Hero satisfaction badge: build the same hard, offset print shadow as the
   source badge.  The label's folded black plinth sits behind the chart, while
   the pie and its number are each visibly pressed down to the lower right. */







/* A single face keeps body copy, display type, and call-to-action labels in
   the same friendly comic register.  Logos remain image assets. */
.toshiba-style,
.price-appeal,
.telcard__num {
  font-family: var(--f-round);
}

/* 受付時間行（本家実測に合わせる） */
.telblock__hours { font-size: .78rem; margin-top: 0; gap: .25rem; }
.telblock__hours i { width: 3.3rem; height: .125rem; }

/* ============================================================
   HERO ─ 「エアコン累計販売台数 / 38,000台以上!!」
   ------------------------------------------------------------
   本家 1_1.jpg + 1_2.jpg（原寸 1600px 幅 = 1rem 33.3333px）からの実測値。
   もとは背景ラスタ haikei-card.png にオレンジ帯と黒フラッグが焼き込まれていて
   位置・形・色が本家と違ったため、画像からは消して（images/hero-card-frame.png）
   ここで CSS 図形として描き直している。数値を触るときは実測値と対で更新すること。

   オレンジ帯   面 x 653.5..1544 / y 319..548、左端は右向きの V 切り欠き（頂点 694,434）
                色 #f24b1e、黒フチ 12px ＋ 右下 10px の版ズレ影
   黒フラッグ   平行四辺形 696.7,241 → 1231.8,241 → 1206.5,342 → 672.5,342（左へ 13.5deg）
                しっぽ 886.4,342 → 857.5,382 → 943.3,342、色 #000（フチ・影なし）
   フラッグ文字 白・角ゴシック・イタリック、字面 x 719..1180 / y 273..313
   数字         38,000 と 台 は黄 #f3ea21、以上!! は白。すべてイタリックで
                黒フチ 4px ＋ 右下の黒影。字面 38,000 は x 740..1170 / y 395..520、
                台 x 1175..1238 / y 454..516、以 x 1245..1307 / y 457..516
   ============================================================ */

/* オレンジ帯。空の装飾要素なので ::after に面、::before にフチ＋影を描く。 */
.hero__num {
  left: 19.605rem;
  top: 3.810rem;
  width: 26.715rem;
  height: 6.870rem;
  z-index: 2;
  padding: 0;
  background: transparent;
  clip-path: none;
  isolation: isolate;
}

.hero__num::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f24b1e;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, .06% 100%, 4.55% 50.22%);
}

/* 黒フチ 12px と右下 10px の版ズレ影は同じ黒なので 1 枚にまとめる
   （clip-path は filter より後に効くため drop-shadow は切り落とされる。
     各辺を 12 + max(0, 法線・(10,10)) だけ外へ動かした多角形＝両者の和集合）。 */
.hero__num::before {
  content: "";
  position: absolute;
  inset: -1.2rem;
  z-index: -2;
  background: #000;
  clip-path: polygon(2.38% 9.06%, 98.15% 9.06%, 98.15% 94.17%, 2.07% 94.17%, 6.98% 50.16%);
}

/* 黒フラッグ（吹き出しのしっぽ付き）。フチも影も無いので要素に直接描く。 */
.hero__cap {
  left: 20.175rem;
  top: 1.470rem;
  width: 16.779rem;
  height: 4.233rem;
  z-index: 3;
  padding: 0;
  background: #000;
  clip-path: polygon(4.33% 0%, 100% 0%, 95.48% 71.58%, 48.42% 71.58%, 33.08% 100%, 38.24% 71.58%, 0% 71.58%);
}

/* フラッグの白文字。本家は角ゴシックのイタリック。 */
.hero__cap-copy {
  position: absolute;
  left: 21.480rem;
  top: 2.334rem;
  z-index: 9;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--f-cap);
  font-size: 1.291rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .076em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 「38,000 台 以上!!」。3 つとも字面の位置を実測値へ直接合わせたいので、
   ヒーロー原点に貼った空の入れ物の中で個別に絶対配置する
   （transform: scaleX はレイアウト幅を変えないので、flex 並びだと後続がずれる）。 */
.hero__num-copy {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  font-family: var(--f-round);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.hero__num-copy b,
.hero__num-copy .unit,
.hero__num-copy .rest {
  position: absolute;
  display: block;
  margin: 0;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  /* 本家は黒フチ 4px（両側 8px の中心揃え）＋右下 (8,13)px の黒影。 */
  -webkit-text-stroke: .24rem #000;
  paint-order: stroke fill;
  text-shadow: .24rem .39rem 0 #000;
}

.hero__num-copy b {
  left: 21.930rem;
  top: 5.550rem;
  color: #f3ea21;
  /* 本家の書体は写植。字面 430x125 に重ねて不一致率を測った結果 RocknRoll One が最も近い
     （36.7%。次点 Mochiy Pop One 45.6%、M PLUS Rounded 1c 700 は 55.4%）。 */
  font-family: var(--f-num);
  font-size: 4.132rem;
  font-weight: 400;
  letter-spacing: 0;
  transform: scaleX(.8274);
  transform-origin: left top;
}

.hero__num-copy .unit {
  left: 34.980rem;
  top: 7.680rem;
  color: #f3ea21;
  font-family: var(--f-unit);
  font-size: 2.010rem;
  font-weight: 700;
  letter-spacing: 0;
}

.hero__num-copy .rest {
  left: 37.080rem;
  top: 7.650rem;
  color: #fff;
  font-family: var(--f-rest);
  font-size: 2.010rem;
  font-weight: 800;
  letter-spacing: 0;
}

.hero__num-copy .rest i {
  font-style: italic;
  /* 本家は「!!」だけ字間が広い（送り 33px 相当）。 */
  letter-spacing: .21em;
}

/* ============================================================
   HERO ─ 92%OFF クーポン / お客様満足度 / リースもOK・初期費用 チップ
   ------------------------------------------------------------
   本家 1_2.jpg（原寸 1600px 幅 = 1rem 33.3333px）からの実測値。
   クーポン  四隅 105.0,546.3 / 1045.4,605.7 / 1019.4,1002.2 / 80.1,945.8
             ＝ 942.2×400.3 を右へ 3.61deg 回転。赤 #ff0000、**黒フチも影も無し**。
             白い破線は内側へ 上20 右17.5 下15 左30.5px、線 2.5px、破線 14px／間隔 23px。
   ラベル    枠 x1070..1452 / y633..724、黄 #f3ea21・黒フチ 6px、
             下に台形の台座（下辺は 22.8%..78.0%、高さ 47px）。
   円グラフ  中心 1263.5,923.5 / 外半径 183.5（フチ 6px）、右下 9px の黒影。
             オレンジ #ea6501＋白の網点、上に灰色のくさび（4.2%）。
   チップ    枠 A x188..558 / B x600..968.7、y1004..1202、skewX(-15deg)、
             黄 #f3ea21・黒フチ 6.5px・右下 14px の黒影。文字は赤 #f14c1f のイタリック。
   ============================================================ */

/* ---- 92%OFF クーポン ---- */
.hero__coupon {
  left: 3.150rem;
  top: 10.629rem;
  width: 28.266rem;
  height: 12.009rem;
  z-index: 5;
  background: #f00;
  border: 0;
  border-radius: .55rem;
  transform: rotate(3.61deg);
  transform-origin: left top;
  filter: none;
}

/* 白い破線。CSS の dashed は破線長を指定できないので、
   4 辺それぞれを repeating-linear-gradient で描いて本家の 14px/23px に合わせる。 */
.hero__coupon::before {
  content: "";
  position: absolute;
  inset: .60rem .525rem .45rem .915rem;
  border: 0;
  border-radius: .35rem;
  background-image:
    repeating-linear-gradient(to right, #fff 0 .42rem, transparent .42rem 1.11rem),
    repeating-linear-gradient(to bottom, #fff 0 .42rem, transparent .42rem 1.11rem),
    repeating-linear-gradient(to right, #fff 0 .42rem, transparent .42rem 1.11rem),
    repeating-linear-gradient(to bottom, #fff 0 .42rem, transparent .42rem 1.11rem);
  background-size: 100% .075rem, .075rem 100%, 100% .075rem, .075rem 100%;
  background-position: 0 0, 100% 0, 0 100%, 0 0;
  background-repeat: no-repeat;
}

.coupon__max {
  left: 2.424rem;
  top: 2.995rem;
  writing-mode: vertical-rl;
  font-family: var(--f-cp-max);
  font-size: 3.440rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  -webkit-text-stroke: .75rem #211b1b;
  paint-order: stroke fill;
}

.coupon__num {
  left: 5.61rem;
  top: -.350rem;
  width: auto;
  font-family: var(--f-cp-num);
  font-size: 12.000rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  -webkit-text-stroke: .85rem #211b1b;
  paint-order: stroke fill;
  transform: scaleX(.985);
  transform-origin: left top;
}

.coupon__pct {
  left: 20.340rem;
  right: auto;
  top: .300rem;
  display: block;
  transform: none;
  color: #fff;
}

.coupon__pct i {
  display: block;
  font-family: var(--f-cp-pct);
  font-size: 8.210rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  -webkit-text-stroke: .85rem #211b1b;
  paint-order: stroke fill;
  transform: scaleX(.96);
  transform-origin: left top;
}

.coupon__pct em {
  display: block;
  margin: -.83rem 0 0 -.09rem;
  font-family: var(--f-cp-off);
  font-size: 3.690rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  letter-spacing: -.01em;
  -webkit-text-stroke: .75rem #211b1b;
  paint-order: stroke fill;
  transform: scaleX(.91);
  transform-origin: left top;
}

/* ---- お客様満足度ラベル ----
   本家実測（1600px 原寸）: 黄の面 x1076..1440 / y639..718、黒フチ 5.5px
   → 枠 x1070..1445.5（375px）/ y633..724（91px）。
   さらに右 7px・下 7.5px の版ズレ影（黒）が付く。文字の字面は x1118..1399 / y658..701。
   z-index を 3 にしているのは、台座（::after）を円グラフ（z-index 4）の裏へ
   回すため。本家も台座の下端は円に隠れている。 */
.hero__flag {
  left: 32.100rem;
  top: 13.230rem;
  width: 11.280rem;
  height: 2.730rem;
  z-index: 3;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: #f3ea21;
  border: .165rem solid #000;
  border-radius: .12rem;
  box-shadow: .21rem .225rem 0 #000;
  color: #000;
  font-family: var(--f-sat-label);
  font-size: 1.400rem;
  font-weight: 900;
  letter-spacing: .038em;
  line-height: 1;
}

/* ラベルの下の台座。本家は影の下端 y731.5 から x1080..1450（370px）で始まり、
   左右とも 1 行あたり 2.053px ずつ内へ寄る台形。下端は円グラフの裏に隠れる。 */
.hero__flag::after {
  content: "";
  position: absolute;
  left: .135rem;
  top: 100%;
  margin-top: .390rem;
  width: 11.100rem;
  height: 1.755rem;
  background: #000;
  clip-path: polygon(0 0, 100% 0, 67.57% 100%, 32.43% 100%);
}

/* ---- 円グラフ ---- */
.hero > .pie {
  left: 32.400rem;
  top: 16.440rem;
  width: 11.010rem;
  height: 11.010rem;
  z-index: 4;
  box-sizing: border-box;
  border: .18rem solid #000;
  border-radius: 50%;
  box-shadow: .27rem .27rem 0 #000;
  /* 網点は正方格子ではなく、横 17.7px・縦 12px の格子を半セットずらして重ねた
     千鳥（斜めに並んで見える）。実測: 行内 17.7px 間隔、6px ごとに半ピッチずれた行。
     位置は本家のドット中心 (1194, 1029.5) に合わせてある。 */
  background:
    radial-gradient(circle, rgb(255 255 255 / .55) .050rem, transparent .078rem)
      .3645rem .105rem / .531rem .36rem,
    radial-gradient(circle, rgb(255 255 255 / .55) .050rem, transparent .078rem)
      .099rem .285rem / .531rem .36rem,
    #ea6501;
  display: grid;
  place-items: center;
}

/* 灰のくさび（4.2%）。本家は外周まで届いておらず、半径 164.8px で切れていて
   その外側（164.8..177.5）は黒。網点もくさびには掛からないので、
   円の背景（網点）より上に別レイヤーとして重ねる。 */
.hero > .pie .pie__wedge {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from -15.7deg, #000 0 15.5deg, transparent 15.5deg);
}

.hero > .pie .pie__wedge::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9.888rem;
  height: 9.888rem;
  margin: -4.944rem 0 0 -4.944rem;
  border-radius: 50%;
  background: conic-gradient(from -15.7deg, #cbcbcb 0 15.5deg, transparent 15.5deg);
}

/* 「95.8%」本家実測（1600px 原寸・白い字面の外接矩形）
     9 x1101..1176 / 5 x1185..1256 / . x1265..1281 / 8 x1285..1362 / % x1376..1423
     数字 y861..994（字面高 134）、% y911..993（高さ 83・ベースラインは数字と共通）
   黒フチは上/左 5px・右 15px・下 10px ＝ フチ 5px ＋ 右下 (10,5)px の版ズレ影。 */
.hero > .pie .pie__num {
  position: absolute;
  z-index: 2;
  left: -.060rem;
  top: 2.610rem;
  width: auto;
  margin: 0;
  text-align: left;
  font-family: var(--f-sat-num);
  font-size: 5.516rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.070em;
  color: #fff;
  -webkit-text-stroke: .33rem #000;
  paint-order: stroke fill;
  /* 版ズレ影。text-shadow は「塗りだけ」を落とすので（フチは影に乗らない）、
     フチと同じ 5px ぶん太らせた影＝(10,5) を中心に半径 5px へ 8 方向ずらして重ねる。
     結果、黒は 左/上 5.5px・右 15px・下 10px になり本家と一致する。 */
  text-shadow:
    .450rem .150rem 0 #000, .405rem .255rem 0 #000,
    .300rem .300rem 0 #000, .195rem .255rem 0 #000,
    .150rem .150rem 0 #000, .195rem .045rem 0 #000,
    .300rem 0       0 #000, .405rem .045rem 0 #000;
  transform: scaleX(.887);
  transform-origin: left top;
  white-space: nowrap;
}

.hero > .pie .pie__num span {
  display: inline-block;
  margin-left: .135rem;
  font-size: .6465em;
  transform: scaleX(.923);
  transform-origin: left center;
}

/* 小数点。本家は 17x19px で、書体そのままだと大きく左に寄るので個別に詰める。 */
.hero > .pie .pie__num i {
  display: inline-block;
  position: relative;
  left: -.068rem;
  top: -.090rem;
  margin-right: -.271rem;
  font-style: normal;
  transform: scale(.81, .79);
  transform-origin: center bottom;
}

/* ---- リースもOK / 初期費用 チップ ---- */
.chip {
  --chip-red: #f14c1f;
  top: 24.360rem;
  height: 5.940rem;
  z-index: 5;
  box-sizing: border-box;
  padding: 0;
  background: #f3ea21;
  border: .21rem solid #000;
  border-radius: .1rem;
  box-shadow: .45rem .45rem 0 #000;
  transform: skewX(-15deg);
  text-align: center;
  line-height: 1;
}

.chip--a { left: 5.640rem; width: 11.100rem; }
.chip--b { left: 18.000rem; width: 11.060rem; }

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

.chip .lg {
  font-size: 2.795rem;
}

.chip--a > b:first-child { margin-top: .300rem; }
.chip--a .lg { margin-top: -.060rem; }
.chip--b > b:first-child { margin-top: .270rem; font-size: 1.850rem; }
.chip--b span { display: block; margin-top: .270rem; }

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

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

/* 円グラフの区切り線。本家は「中心から伸びる一定太さの直線」で、
   conic-gradient の細い扇（外周ほど太くなる）とは形が違う。左 13px / 右 6px。 */
.hero > .pie::before,
.hero > .pie::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 1;
  height: 5.325rem;
  background: #000;
  transform-origin: 50% 100%;
}

.hero > .pie::before { width: .39rem; transform: translateX(-50%) rotate(-15.7deg); }
.hero > .pie::after  { width: .18rem; transform: translateX(-50%) rotate(-.2deg); }

/* ============================================================================
   SEC02 事例価格 ─ 値引き札（本家 2.jpg を 1600px 原寸で実測して再現）

   座標系: 1rem = 1600/48 = 33.3333px。以下のコメントの px は本家 2.jpg 内の値。
   .ex__stage の左上 = LP 左端 x0 / 本家 y651（「税込定価」の字面上端）。
   中身はすべて絶対配置。位置は「字面（インク）の左上」を狙って合わせてある。
   ---------------------------------------------------------------------------
   書体は文言ごとに CSS 変数へ出してあるので、1 行差し替えれば変更できる。
============================================================================ */

:root {
  /* 本家の事例価格まわりの和文は角ばった太ゴシック。マスク重ね合わせで
     Murecho 900 が最も近かった（税込定価 15.7% / 万円 11.6% / 値引き 24.4%）。 */
  --f-ex-jp:  "Murecho", var(--f-square);
  /* 数字は Rubik 700 が最も近い（144 で 16.2%、1,571,900 で 24.2%）。 */
  --f-ex-num: "Rubik", "Arial Black", var(--f-round);

  --ex-red:      #e61e1e; /* 矢印の面 */
  --ex-rule:     #c0272a; /* 定価の赤い取り消し線 */
  --ex-yellow:   #faec25; /* 札の文字 */
  --ex-ring:     #fcfa11; /* 爆発マークの文字の黄リング */
  --f-ex-pct:    "Montserrat", var(--f-ex-num);  /* % */
  --f-ex-off:    "Figtree", var(--f-ex-num);     /* OFF */
}

.ex__stage {
  position: relative;
  /* 左端を LP の左端（本家 x0）に合わせる。以下の left はすべて本家 px と一致する。 */
  width: 48rem;
  margin-left: calc(50% - 24rem);
  height: 34.344rem;     /* 本家 y651..1796（黄色の下端）= 1144.8px */
  z-index: 6;
}

.ex__stage > * {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
}

/* ---- 税込定価 ---- 字面 164x46 @ (321, 0) --------------------------------- */
.ex__list-cap {
  left: 9.6rem;
  top: -.141rem;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 1.452rem;
  letter-spacing: -.02em;
  color: var(--ink);
  transform: scaleX(.876);
}

/* ---- 1,571,900 ---- 字面 305x63 @ (319, 61) ------------------------------- */
.ex__num {
  left: 9.54rem;
  top: 1.545rem;
  font-family: var(--f-ex-num);
  font-weight: 700;
  font-size: 2.409rem;
  letter-spacing: -.04em;
  color: var(--ink);
  transform: scaleX(.876);
}

/* ---- 円が ---- 字面 89x44 @ (638, 79) ------------------------------------- */
.ex__yen {
  left: 19.05rem;
  top: 2.235rem;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 1.458rem;
  letter-spacing: 0;
  color: var(--ink);
  transform: scaleX(.951);
}

/* ---- 赤い取り消し線 ---- 318..730 x 768..780 ------------------------------ */
.ex__rule {
  left: 9.54rem;
  top: 3.51rem;
  width: 12.39rem;
  height: .39rem;
  background: var(--ex-rule);
}

/* ---- 赤い下向き矢印 -------------------------------------------------------
   赤い面の頂点（本家 px）:
     (389,799) (644,799) (699.3,1002) (792.2,1002) (517,1079.7) (240.8,1002) (333.7,1002)
   白フチは 7px（stroke-width 14 の外側半分）。とがった羽根の先までフチを回すため
   stroke-miterlimit を大きめに取る。影は右下に薄くぼかす。
   viewBox は左上を (240.8-12, 799-12) に置いて 12px の余白を確保している。 */
.ex__arrow {
  left: 6.864rem;        /* 240.8 - 12 */
  top: 4.08rem;          /* 787 - 651 */
  width: 17.262rem;      /* 575.4 */
  height: 9.141rem;      /* 304.7 */
  z-index: 2;
  padding: 0;
}

.ex__arrow-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(.09rem .15rem .09rem rgba(0, 0, 0, .55));
}

.ex__arrow-outline {
  fill: #fff;
  stroke: #fff;
  stroke-width: 14;
  stroke-linejoin: miter;
  stroke-miterlimit: 12;
}

.ex__arrow-face {
  fill: var(--ex-red);
  stroke: none;
}

/* ---- 札の文字 ---- 黄 + 黒フチ 11px。本家は写植でどれも約 10deg の斜体 ---- */
.ex__arrow-n,
.ex__arrow-u,
.ex__arrow-w {
  position: absolute;
  z-index: 1;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  color: var(--ex-yellow);
  -webkit-text-stroke: .66rem #000;
  paint-order: stroke fill;
  transform-origin: 0 0;
}

/* 144 ---- 字面 179x93 @ (376, 199) ---------------------------------------- */
.ex__arrow-n {
  left: 4.605rem;
  top: 1.35rem;
  font-family: var(--f-ex-num);
  font-weight: 700;
  font-size: 3.987rem;
  letter-spacing: .05em;
  transform: skewX(-10deg) scaleX(.721);
}

/* 万円 ---- 字面 119x62 @ (567, 225) --------------------------------------- */
.ex__arrow-u {
  left: 10.425rem;
  top: 2.37rem;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 2.091rem;
  letter-spacing: -.02em;
  transform: skewX(-10deg) scaleX(.834);
}

/* 値引き ---- 字面 210x79 @ (408, 305) ------------------------------------- */
.ex__arrow-w {
  left: 5.595rem;
  top: 4.86rem;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 2.52rem;
  letter-spacing: -.02em;
  transform: skewX(-10deg) scaleX(.869);
}

/* ---- 値引き後価格 ---- 字面 247x45 @ (106, 400) --------------------------- */
.ex__stage .ex__after {
  left: 3.15rem;
  top: 11.85rem;
  width: auto;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 1.413rem;
  letter-spacing: 0;
  color: var(--ink);
  text-align: left;
  transform: scaleX(.881);
}

/* ---- SEC02 見出しと写真（本家 2.jpg 実測） --------------------------------
   見出しは本家では 2 行に収まる。1 文字送り 66px / 行送り 76px。
   写真は 1024px の原画を 1.5032 倍（= 46.2rem）で使っている。 */
.ex__lead {
  font-size: 2.02rem;
  line-height: 1.13;
  padding-top: .39rem;   /* 1 行目の字面上端を本家 y116 に合わせる */
}

.ex__lead-jp {
  font-family: "Noto Sans JP", var(--f-square);
  font-weight: 800;
  font-size: 1.94rem;
}

.ex__lead-prefix,
.ex__lead-tail {
  display: inline-block;
  transform-origin: left center;
}

.ex__lead-prefix {
  margin-right: -.75rem;
  transform: scaleX(.89);
}

.ex__lead-tail {
  transform: scaleX(.90);
}

.ex__lead-line2 {
  display: inline-block;
  transform: scaleX(1.047);
  transform-origin: left center;
}

/* TOSHIBA ロゴ文字: 本家は 387x59 */
.toshiba-style {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 2.8rem;
  transform: none;
}

.ex__units {
  position: relative;
  height: 13.083rem;
  margin-top: .756rem;
}

.ex__units img.ex__unit {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
}

.ex__units img.ex__unit--cassette {
  top: 2.06rem;
  width: 15.375rem;
}

.ex__units img.ex__unit--cassette-a {
  left: .675rem;
}

.ex__units img.ex__unit--cassette-b {
  left: 15.675rem;
}

.ex__units img.ex__unit--outdoor {
  top: .375rem;
  left: 31.925rem;
  width: 11.125rem;
}

/* 本家では値引き札が写真の下端に食い込む。 */
.ex__price {
  margin-top: -2.037rem;
}

/* ---- 爆発マーク「衝撃価格 92%OFF」 --------------------------------------
   本家の輪郭（上辺のシルエット）に fukidashi.png を最小二乗で当てはめた結果、
   箱は (715, 712) の 865.3 x 529.0px。文字は黒 + 黄リング 11px + 黒フチ 13px。 */
.ex__burst {
  left: 21.45rem;        /* 715 */
  top: 1.83rem;          /* 712 - 651 */
  width: 25.959rem;      /* 865.3 */
  height: 15.87rem;      /* 529.0 */
  max-width: none;
  z-index: 1;
}

.ex__burst-cap,
.ex__burst-num,
.ex__pct,
.ex__off {
  z-index: 2;
  color: #000;
  -webkit-text-stroke: .66rem var(--ex-ring);   /* 黄リング 11px */
  paint-order: stroke fill;
  filter: none;
}

/* 黄リングのさらに外側の黒フチ 13px。同じ文字を複製して太い黒フチだけ描く。 */
.ex__burst-cap::before,
.ex__burst-num::before,
.ex__pct::before,
.ex__off::before {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #000;
  -webkit-text-stroke: 1.44rem #000;            /* (11 + 13) * 2 = 48px */
  paint-order: stroke fill;
}

/* 衝撃価格 ---- 字面 246x68 @ (995, 828) ----------------------------------- */
.ex__burst-cap {
  left: 29.91rem;
  top: 5.10rem;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 2.136rem;
  letter-spacing: -.04em;
  transform: skewX(-4deg) scaleX(.892);
}

/* 92 ---- 字面 207x156 @ (958, 949) ---------------------------------------- */
.ex__burst-num {
  left: 28.95rem;
  top: 8.10rem;
  font-family: var(--f-ex-num);
  font-weight: 700;
  font-size: 6.546rem;
  letter-spacing: -.04em;
  transform: skewX(-8deg) scaleX(.807);
}

/* % ---- 字面 61x61 @ (1212, 958) ------------------------------------------ */
.ex__pct {
  left: 36.45rem;
  top: 8.85rem;
  font-family: var(--f-ex-pct);
  font-weight: 900;
  font-size: 2.541rem;
  letter-spacing: 0;
  color: #000;
  transform: skewX(-8deg) scaleX(.852);
  /* 二つの円の内側は全ての文字レイヤーを抜き、実際の背景を見せる。 */
  mask-image:
    radial-gradient(ellipse .09em .13em at 1.19em 1.32em, transparent 98%, #000 100%),
    radial-gradient(ellipse .09em .13em at 1.71em 1.65em, transparent 98%, #000 100%);
  /* 字面のボックスからはみ出す外周の黒フチも切り取らない。 */
  mask-size: calc(100% + 2em) calc(100% + 2em);
  mask-position: -1em -1em;
  mask-repeat: no-repeat;
  mask-clip: no-clip;
  mask-composite: intersect;
}

/* 原本と同じ黒い字面＋黄色の縁取り＋外側の黒フチ。 */
.ex__pct::before {
  color: #000;
}

/* OFF ---- 字面 135x59 @ (1204, 1052) -------------------------------------- */
.ex__off {
  left: 36.24rem;
  top: 11.70rem;
  font-family: var(--f-ex-off);
  font-weight: 900;
  font-size: 2.442rem;
  letter-spacing: -.02em;
  transform: skewX(-8deg) scaleX(.878);
}

/* ---- 値引き後の価格「税込 125,800円」 -----------------------------------
   赤 #e61e1e + 白リング 11px + 黒フチ 12px。数字は 125 だけ大きい。 */
.ex__tax {
  left: 5.31rem;         /* 177 */
  top: 16.77rem;         /* 1210 - 651 */
  width: 2.85rem;        /* 95 */
  height: 5.55rem;       /* 185 */
  z-index: 5;
  background: #000;
  color: #fff;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 1.83rem;
  writing-mode: vertical-rl;
  text-align: center;
  letter-spacing: .06em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
}

.ex__f1,
.ex__f2,
.ex__f3 {
  z-index: 5;
  /* 本家の赤 #e61e1e（下端はわずかに沈むが、text-stroke と background-clip:text は
     Chrome で併用できないため単色にしている）。 */
  color: var(--ex-red);
  -webkit-text-stroke: .66rem #fff;             /* 白リング 11px */
  paint-order: stroke fill;
}

.ex__f1::before,
.ex__f2::before,
.ex__f3::before {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #000;
  -webkit-text-fill-color: #000;
  -webkit-text-stroke: 1.38rem #000;            /* (11 + 12) * 2 = 46px */
  paint-order: stroke fill;
}

/* 125 ---- 字面 459x248 @ (312, 1133) -------------------------------------- */
.ex__f1 {
  left: 9.75rem;
  top: 13.11rem;
  font-family: var(--f-ex-num);
  font-weight: 700;
  font-size: 10.562rem;
  letter-spacing: -.04em;
  transform: skewX(-8deg) scaleX(.79);
}

/* ,800 ---- 字面 427x203 @ (754, 1211) ------------------------------------- */
.ex__f2 {
  left: 23.40rem;
  top: 15.78rem;
  font-family: var(--f-ex-num);
  font-weight: 700;
  font-size: 7.776rem;
  letter-spacing: -.04em;
  transform: skewX(-8deg) scaleX(.7525);
}

/* 円 ---- 字面 112x115 @ (1204, 1264) -------------------------------------- */
.ex__f3 {
  left: 36.45rem;
  top: 17.79rem;
  font-family: var(--f-ex-jp);
  font-weight: 900;
  font-size: 3.987rem;
  letter-spacing: 0;
  transform: skewX(-8deg) scaleX(.847);
}

/* ---- マスコット ---- 原画 1600x1200 を 0.3946 倍 -------------------------- */
.ex_mascot {
  left: 39.564rem;       /* 1318.8 */
  top: 12.699rem;        /* 1074.5 - 651 */
  width: 18.942rem;      /* 631.4 */
  height: auto;
  max-width: none;
  right: auto;
  z-index: 4;
}


/* CTA。本家 estimate.png(1600x312) を 2.jpg の上に px-7 / lg:bottom-10 で重ねたのと同じ位置。
   原寸換算で 左 58.33 / 幅 1483.3 / 上 1431.4（= 舞台内 y780.4）。 */
.ex__stage .cta-img {
  left: 1.75rem;         /* 58.33 */
  top: 23.412rem;        /* 1431.4 - 651 */
  width: 44.5rem;        /* 1483.3 */
  z-index: 6;
  display: block;
  animation: none !important;
}

.ex__stage .cta-img img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.ex__stage .cta-img:hover {
  opacity: .7;
}

/* 既存の緑ボタンではなく、事例価格で使っている同一画像を使用する。 */
.note-card__fig .cta--mini,
.sec-conf .cta--bottom {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none !important;
}

.note-card__fig .cta--mini img,
.sec-conf .cta--bottom img {
  display: block;
  width: 100%;
  height: auto;
}

/* セクションの下端。PC 表示で本家 2.jpg の描画高 865.90625px に揃える。 */
.sec-example {
  position: relative;
  padding-bottom: .1085rem;
  border-bottom: .246rem solid #231816;
}

/* 하단 기존 검은 라인 위에 70% 두께의 보조 라인을 추가한다. */
.sec-example::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .246rem;
  height: .172rem;
  background: #231816;
  pointer-events: none;
}

/* ============================================================================
   SEC03 激安還元フェア / 相見積 ─ PC 版 3.jpg の描画位置に合わせる
============================================================================ */

/* 見出しの下側を広げ、2 枚のノートカード以降を本家と同じ位置へ送る。 */
.price-appeal {
  padding-bottom: 5.45rem;
}

/* 用途帯は本家より左右に広がっていたため、左右端を個別に合わせる。 */
.usage__band {
  margin-right: .9rem;
  margin-left: 5.9rem;
  letter-spacing: .18em;
}

.usage__list {
  padding-right: .575rem;
  padding-left: .575rem;
}

/* 上段を下へ送ったぶん、対応エリアは余白を詰めて元の基準位置へ戻す。 */
.area {
  margin-top: 1rem;
  padding-right: 1.7rem;
  padding-left: 1.7rem;
}

.area__title {
  padding-left: .4rem;
  font-size: 3.35rem;
}

.area__title em {
  margin-left: 0;
  font-size: 1.94em;
}

.area__list {
  grid-template-columns: 7.8rem 7.9rem auto;
  gap: 1rem .25rem;
  width: 25.35rem;
  margin-top: 0;
  padding: 1.65rem 1rem 1.7rem;
}

.area__list li {
  font-size: 1.5rem;
}

.area__map {
  right: 0;
  bottom: 0;
  width: 21rem;
}

.fair__lower {
  padding-bottom: 3.065rem;
}

.note-card__head {
  transform: translateX(.5rem);
}

.note-card--estimate .note-card__txt {
  transform: translateX(2.625rem);
}

.note-card--comparison .note-card__txt {
  transform: translateX(2.5rem);
}

.note-card__fig--estimate .pointhand {
  left: 30%;
}

.note-card__fig--estimate .note-card__char {
  right: -.6rem;
}

.note-card__fig--doc .doctag {
  transform: translateX(10.1rem);
}

/* SEC03 detail pass: retain the source's rounded gothic construction while
   stepping down from the overly heavy 900-weight first draft. */
.note-card__txt {
  font-family: var(--f-round);
  font-weight: 700;
  letter-spacing: .01em;
}

.note-card__txt b {
  font-family: inherit;
  font-weight: 800;
}

/* The note frames are clean rounded rectangles in the source.  The generic
   displacement filter made these borders visibly lumpy at 768px. */
.note-card.rough {
  --rw: .18rem;
  --rr: 1.05rem;
}

.note-card.rough::before {
  filter: none;
}

/* The black usage rail in the reference ends in a centered downward pointer. */
.usage__band {
  font-family: "M PLUS 1p", var(--f-square);
  font-weight: 800;
  padding-right: .4rem;
  padding-left: 1.6rem;
  letter-spacing: .2em;
}

/* Keep the black rail as one clean silhouette. The shared rough filter
   distorts its outside edges and exposes a pale seam above the pointer. */
.usage__band.rough::before {
  filter: none;
}

.usage__band::after {
  content: "";
  position: absolute;
  left: calc(50% - 2.5rem);
  bottom: -1.05rem;
  z-index: 2;
  width: 0;
  height: 0;
  border-right: 1.75rem solid transparent;
  border-left: 1.75rem solid transparent;
  border-top: 1.18rem solid var(--ink);
  transform: translateX(-50%);
}

.usage__ac {
  left: -.35rem;
  top: -2.25rem;
  width: 9.3rem;
}

.usage__list {
  gap: .35rem;
  margin-top: 1.25rem;
}

/* Yellow application cards: rounded text matched to the reference size and
   baseline, with depth cast to the right/bottom (not to the left). */
.usage__list li {
  --rw: .3rem;
  padding-top: 2.05rem;
  padding-bottom: 1.715rem;
  font-family: var(--f-round);
  font-size: 1.58rem;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: 0;
  white-space: nowrap;
}

.usage__list li.rough-s::before {
  box-shadow: .16rem .22rem 0 var(--ink);
}

/* The service-area card is striped paper with a hand-inked border whose
   right and lower edges are intentionally heavier. */
.area__list {
  width: 25.45rem;
  padding-top: 1.9625rem;
  padding-bottom: 1.6275rem;
  transform: translateY(-.22rem);
  --rb: repeating-linear-gradient(
    135deg,
    #dff2eb 0 .38rem,
    rgba(255, 255, 255, .96) .38rem .56rem
  );
}

.area {
  margin-top: 1.3rem;
  padding-left: 1.55rem;
}

.area__list.rough::before {
  border-width: .25rem .46rem .55rem .25rem;
}

/* Expansion title: red ink and a down/right print shadow, separated by a
   transparent gap that reveals the marker underneath. Keep the marker outside
   the text filter so it is not cut out along with the shadow. */
.area__title {
  font-family: "Noto Sans JP", var(--f-square);
  padding-left: 0;
  transform: translateY(-.5rem);
}

.area__title em {
  display: inline-block;
  position: relative;
  top: .1em;
  isolation: isolate;
  margin-left: .2em;
  font-size: 1.91em;
  font-weight: 700;
  color: #ef421c;
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  text-shadow: none;
  filter: none;
  transform: scaleY(.91);
  transform-origin: left top;
}

.area__title em::before {
  z-index: -2;
  right: -.2em;
  bottom: -.32em;
  left: -.18em;
  height: .67em;
  border-radius: 0;
  background:
    radial-gradient(ellipse 40% 22% at 10% 45%, var(--comic) 0 97%, transparent 100%),
    radial-gradient(ellipse 14% 40% at 56% 58%, var(--comic) 0 97%, transparent 100%),
    radial-gradient(ellipse 11% 34% at 88% 48%, var(--comic) 0 97%, transparent 100%);
  clip-path: none;
  transform: translateY(.08em) rotate(-4deg);
  filter: none;
}

.area__title em::after {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: var(--ink);
  -webkit-text-stroke: 1.3rem var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
  /* 元の縁を影から差し引く。色を白や透明に変えるだけでは下の黒が残る。 */
  filter: url(#area-title-ink);
}

.area__map {
  transform: translate(-.3rem, -.35rem);
}

.fair__lower {
  padding-bottom: 2.8rem;
}

/* 本家の赤字は下へ向かってわずかに沈む（上 #e81e1c → 下 #a91f26）。
   text-stroke と background-clip:text は併用できないので、
   フチ付きの赤字の上にグラデーションだけの複製を重ねる。
   （background-clip が効かない環境では複製が透明になり、下の単色赤がそのまま残る） */
.ex__f1::after,
.ex__f2::after,
.ex__f3::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-text-stroke: 0;
  background: linear-gradient(#e81e1c 0%, #e61e1e 46%, #cb2122 70%, #a91f26 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================================
   SEC04 なぜ安い？ ─ 本家 4.jpg を 1600px 原寸で実測して再現

   .why__head  = 黄色の帯（本家 y0..527）＋ 下に黒帯 20px（528..547）。
   .why__stage = コンクリート側の舞台（本家 y548 が原点）。
   どちらも中身は絶対配置で、left/top の rem × 33.3333 = 本家 4.jpg の座標。

   書体の根拠（本家はすべて画像なので、字面の実測から総当りで同定した）
   ・黄色帯・帯の白文字・黄札 → Zen Kaku Gothic New 900
     （かなが漢字に対して小さい＝本家の比率に一番近い。Murecho はかなが大きすぎた）
   ・「安かろう〜」「ご注意下さい」→ Shippori Mincho B1 800
     本家は「の会社に」だけ 0.745 倍の小さい級数で組んである（実測で判明）。
============================================================================ */

.sec-why {
  /* SEC04 の和文はここで一括して差し替えられるようにしておく */
  --f-why-jp: "Zen Kaku Gothic New", "Murecho", var(--f-square);
  /* 下半分（お店に入ったら…以降）の和文。本家の字面と濃度を突き合わせて選定 */
  --f-why-body: "Noto Sans JP", var(--f-square);
  /* 黒文字に付く白い落ち影（本家は +5px / +5px のオフセット） */
  --why-sh: .15rem .15rem 0 #fff;
}

.why__head {
  position: relative;
  height: 16.41rem;     /* 527 + 黒帯 20 = 547 */
  padding: 0;
  border-bottom: 0;
  background: #f4da5f;
  text-align: left;
  overflow: visible;
}

.why__head > * {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
}

/* 黄色帯の下の黒帯 ---- 本家 y528..547。縁は手描きのギザギザ ----------- */
.why__head .why__rule {
  left: -.6rem;
  right: -.6rem;
  width: auto;
  top: 15.84rem;        /* 528 */
  height: .6rem;        /* 20 */
  background: #231815;
  filter: url(#rough-line);
  z-index: 4;
}

/* Q の白いピル ---- 1440x162 @ (80, 64) --------------------------------- */
.why__head .q-pill {
  left: 2.4rem;
  top: 1.92rem;
  width: 43.2rem;
  height: 4.86rem;
  padding: 0;
  background: #fff;
  border-radius: 2.43rem;
  display: block;
  filter: url(#rough-plate);
}

/* Q. ---- 字面 153x146 @ (164, 62)。「.」は本家では真円 ------------------ */
.why__head .q-mark {
  left: 4.77rem;
  top: 1.20rem;
  font-family: var(--f-round);
  font-size: 4.947rem;
  transform: scaleX(1.024);
  font-weight: 800;
  color: var(--ink);
}

/* 「.」は本家では直径 29px の真円。書体の句点だと角が立つので図形で描く。
   .q-mark が absolute なので、left/top は .q-mark の左上（4.77rem, 1.20rem）基準。 */
.why__head .q-mark i {
  font-style: normal;
  font-size: 0;
  display: inline-block;
  width: 0;
}

.why__head .q-mark i::before {
  content: "";
  position: absolute;
  left: 3.78rem;
  top: 3.45rem;
  width: .849rem;
  height: .87rem;
  border-radius: 50%;
  background: var(--ink);
}

/* なぜこんなに安いのでしょう？ ---- 字面 1078x78 @ (359, 110) ------------ */
.why__head .q-text {
  left: 10.60rem;
  top: 3.06rem;
  font-family: var(--f-why-jp);
  font-size: 2.496rem;
  font-weight: 900;
  letter-spacing: .013em;
  color: var(--ink);
  transform: scaleX(.934);
}

/* 「には理由が」の下に敷いてある白い刷毛 ---- 本家 (423,352) 499x89 ------ */
.why__head .why__brush {
    left: 13.69rem;
    top: 9.1rem;
    width: 15.97rem;
    max-width: none;
    z-index: 0;
}

/* 安さには ---- 字面 412x98 @ (117, 320) --------------------------------- */
.why__head .why__a {
  left: 3.37rem;
  top: 9.30rem;
  z-index: 2;
  font-family: var(--f-why-jp);
  font-size: 3.21rem;
  font-weight: 900;
  letter-spacing: .054em;
  color: var(--ink);
  text-shadow: var(--why-sh);
  transform: scaleX(.951);
}

/* 理由 ---- 白抜き＋黒フチ 17px。黒フチ込みの字面 299x146 @ (565, 278) --- */
.why__head .why__reason {
  left: 16.70rem;
  top: 8.06rem;
  z-index: 3;
  font-family: var(--f-why-jp);
  font-size: 4.554rem;
  /* 袋文字なので本家も軽いウェイト。900 だと黒フチで字の中（カウンター）が潰れる */
  font-weight: 500;
  letter-spacing: .007em;
  color: #fff;
  -webkit-text-stroke: .33rem var(--ink);
  paint-order: stroke fill;
  /* 白い落ち影。text-shadow だと -webkit-text-stroke と併用したとき
     字の中（カウンター）の黒フチを白が食ってしまうので drop-shadow を使う。 */
  filter: drop-shadow(.24rem .33rem 0 #fff);
  transform: scaleX(1.023);
}

/* があります。---- 字面 569x101 @ (909, 317) ----------------------------- */
.why__head .why__b {
  left: 27.14rem;
  top: 9.18rem;
  z-index: 2;
  font-family: var(--f-why-jp);
  font-size: 3.34rem;
  font-weight: 900;
  letter-spacing: .046em;
  color: var(--ink);
  text-shadow: var(--why-sh);
  transform: scaleX(.920);
}

/* 理由の左上のびっくりマーク ---- 本家 (512,220) 131x101 ----------------- */
.why__head .why__bikkuri {
  left: 15.36rem;
  top: 6.60rem;
  width: 3.93rem;
  height: 3.03rem;
  max-width: none;
  object-fit: fill;
  z-index: 1;
}

/* ---- コンクリート側の舞台（本家 y548 が原点） -------------------------- */

/* コンクリートは本家 4.jpg の壁そのもの（y548..2317）を切り出して使う。
   札・見出し・帯が乗っていた所は、同じ画像のきれいな行のテクスチャで埋めてある。
   セクションの高さと画像の高さがほぼ同じなので 100% 100% で伸ばして合わせる。 */
.why__body {
  position: relative;
  /* 4.jpg の y548..2317 ＝ 1770px。舞台2つ（658 + 1112）とぴったり合わせる */
  height: 53.13rem;
  box-sizing: border-box;
  padding: 0 1.3rem;

  background-color: #e7e8e3;
  background-image: url("../images/why-concrete.jpg");
  background-position: center top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.why__stage {
  position: relative;
  width: 48rem;
  margin-left: calc(50% - 24rem);
  /* 本家の黒帯の下端(547)から、下の舞台の原点(1206)まで */
  height: 19.77rem;
}

.why__stage > * {
  position: absolute;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
}

/* でもその前に！---- 黄色の札。黄色帯と黒帯をまたいで斜めに乗る。
   本家の実測：黄色の面 678x119 / 左上 (459,530) / 回転 -5.86°
   重なりは 内側から 黄 → 黒フチ 8px → 白リング 9px → 落ち影 -------------- */
.why__stage .why__chip {
  left: 13.77rem;        /* 459 */
  top: -.54rem;          /* 530 - 548 */
  width: 20.34rem;       /* 678 */
  height: 3.57rem;       /* 119 */
  padding: 0;
  z-index: 5;
  transform: rotate(-5.86deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why__stage .why__chip::before {
  content: "";
  position: absolute;
  inset: -.24rem;
  z-index: -1;
  background: #f2ec12;
  border: .30rem solid #231815;
  border-radius: .36rem;
  box-shadow:
    0 0 0 .27rem #fff,
    .18rem .27rem 0 .27rem rgba(20, 18, 16, .85);
  filter: url(#rough-plate);
}

.why__stage .why__chip span {
  display: block;
  font-family: var(--f-why-jp);
  font-size: 2.55rem;
  font-weight: 900;
  letter-spacing: -.023em;
  color: #171717;
  /* 本家の札の文字はインクがかすれている */
  filter: url(#ink-rough);
  transform: scaleX(1.032);
  transform-origin: 50% 50%;
  position: relative;
  left: .18rem;
  top: -.06rem;
}

/* 安かろう悪かろうの会社に ---- 本家 字面 (39,690)..(1551,839)
   本家は後半「の会社に」だけ級数が小さい（実測 0.745 倍）--------------- */
.why__stage .why__warn {
  position: static;
  display: contents;
}

.why__stage .why__w1,
.why__stage .why__w1b,
.why__stage .why__w2 {
  position: absolute;
  z-index: 2;
  font-family: var(--f-mincho);
  font-weight: 800;
  color: var(--ink);
  /* 本家の字は Shippori Mincho B1 の 800 より 2 割ほど太い。
     黒フチで太らせ、白フチは下に敷いた同じ字（::before）で作る */
  -webkit-text-stroke: .09rem currentColor;
  paint-order: stroke fill;
  transform-origin: 0 0;
}

.why__stage .why__w1::before,
.why__stage .why__w1b::before,
.why__stage .why__w2::before {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #fff;
  -webkit-text-stroke: .29rem #fff;
  paint-order: stroke fill;
}

/* 対応ブラウザでは読み上げ用の代替テキストを空にして、同じ字が二重に読まれないようにする。
   未対応ブラウザでは content ごと無効になってしまうので、@supports で切り分ける */
@supports (content: "a" / "b") {
  .why__stage .why__w1::before,
  .why__stage .why__w1b::before,
  .why__stage .why__w2::before {
    content: attr(data-t) / "";
  }
}

.why__stage .why__w1 {
  left: .93rem;
  top: 3.88rem;
  font-size: 4.755rem;   /* 158.5px */
  letter-spacing: -.112em;
  transform: scaleX(.970);
}

/* 後半「の会社に」---- 本家は級数が小さい。字面 (1131,727)..(1551,839) */
.why__stage .why__w1b {
  left: 33.56rem;
  top: 5.10rem;
  font-size: 3.48rem;    /* 116px */
  letter-spacing: -.086em;
  transform: scaleX(1.040);
}

/* ご注意下さい!! ---- 字面 (330,869)..(1288,1013) ------------------------ */
.why__stage .why__w2 {
  left: 8.91rem;
  top: 9.27rem;
  font-size: 4.617rem;   /* 153.9px */
  letter-spacing: -.040em;
  transform: scaleX(1.022);
}

/* こんな体験はありませんか？---- 帯 1421x133 @ (89, 1074) ---------------- */
.why__stage .why__bar {
  left: 2.67rem;         /* 89 */
  top: 15.78rem;         /* 1074 - 548 */
  width: 42.63rem;       /* 1421 */
  height: 3.99rem;       /* 133 */
  padding: 0;
  margin: 0;
  background: linear-gradient(to bottom, #5a5a5a 0%, #333 80%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
}

/* 帯の中の白文字 ---- 字面 1139x77 @ (233, 1104) ------------------------- */
.why__stage .why__bar span {
  font-family: var(--f-why-jp);
  position: relative;
  left: .24rem;
  top: -.06rem;
  font-size: 2.475rem;   /* 82.5px */
  font-weight: 900;
  letter-spacing: .075em;
  color: #fff;
  transform: scaleX(1.02);
}

/* ============================================================================
   SEC04 後半（お店に入ったら… ／ 主な原因）─ 本家 4.jpg y1206..2317 の実測再現

   .why__exp は 4.jpg の y1206 を原点にした舞台。
   子要素の left / top × 33.3333 = 4.jpg の座標。

   ・飾り罫（お店に入ったら… の下）は手描きなので 4.jpg から抜いた PNG。
     tools/sec04/make-brush.php ならぬ make-brace.php で作り直せる。
   ・写真2枚は woman-layout.png（枠と傾きまで入った1枚絵）を等倍で置くだけ。
   ・「寒すぎる」の鉤括弧はフォントの字ではなく、本家と同じ寸法の罫で描く。
     本家の 「 は文字と同じ高さまで伸びていて、書体の字形とは別物のため。
============================================================================ */

.why__body .why__exp {
  position: relative;
  width: 48rem;
  margin-left: calc(50% - 24rem);
  height: 33.36rem;          /* 1206..2317 = 1112px */
  padding: 0;
  min-height: 0;
}

.why__exp > * {
  position: absolute;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
}

/* 写真2枚 ---- 白枠の外形 x994..1575 / y1196..1838 に合わせて等倍配置 ------ */
.why__exp .why__photos {
  left: 29.502rem;           /* 983.4 */
  top: -.648rem;             /* 1184.4 - 1206 */
  width: 18.096rem;          /* 603.2 */
  height: auto;
  z-index: 1;
}

/* お店に入ったら… ---- 字面 (190,1247)..(769,1351)。本家は右上がりに組んである */
.why__exp .why__cap {
  left: 5.31rem;
  top: 2.22rem;
  z-index: 3;
  font-family: var(--f-mincho);
  font-size: 2.298rem;       /* 76.6px */
  font-weight: 600;
  letter-spacing: -.029em;   /* → 字送り 74.4px */
  color: #131313;
  /* 本家は右上がりに組んである（字面の中心を結ぶと -5.2°）*/
  transform: rotate(-5.2deg);
}

/* 飾り罫 ---- 4.jpg の x114..837 / y1275..1395 をそのまま抜いた PNG -------- */
.why__exp .why__brace {
  left: 3.39rem;             /* 113 */
  top: 2.04rem;              /* 1274 - 1206 */
  width: 21.72rem;           /* 724 */
  height: auto;
  z-index: 3;
}

/* 「寒すぎる」「暑すぎる」------------------------------------------------ */
.why__exp .why__q {
  z-index: 4;
  font-family: var(--f-mincho);
  font-size: 3.606rem;       /* 120.2px */
  font-weight: 800;
  letter-spacing: -.0665em;  /* → 字送り 112.2px */
}

/* 鉤括弧は本家の実測どおりの罫で描く（縦棒 7px ／ 腕 41x7px）--------------- */
.why__exp .why__q::before,
.why__exp .why__q::after {
  content: "";
  position: absolute;
  width: 1.23rem;            /* 41 */
  height: 3.15rem;           /* 105 */
  border: 0 solid currentColor;
}

.why__exp .why__q::before {
  border-left-width: .21rem;   /* 7 */
  border-top-width: .21rem;
}

.why__exp .why__q::after {
  border-right-width: .21rem;
  border-bottom-width: .21rem;
}

.why__exp .why__q--cold {
  left: 3.93rem;             /* 字面 136 を狙う */
  top: 6.48rem;
  color: #03536b;
}

.why__exp .why__q--cold::before { left: -1.14rem; top: .42rem; }   /*  93 / 1436 */
.why__exp .why__q--cold::after  { left: 13.44rem; top: .39rem; }   /* 579 / 1435 */

.why__exp .why__q--hot {
  left: 21.12rem;            /* 字面 711 を狙う */
  top: 6.48rem;
  color: #d43c1c;
}

.why__exp .why__q--hot::before { left: -1.05rem; top: .39rem; }    /*  669 / 1435 */
.why__exp .why__q--hot::after  { left: 13.44rem; top: .36rem; }    /* 1152 / 1434 */

/* 実は不適切な〜／選択が原因の〜 ----------------------------------------- */
.why__exp .why__t1,
.why__exp .why__t2 {
  z-index: 3;
  font-family: var(--f-why-body);
  /* 本家は字面の高さ 51px・字送り 61.08px。字面が小さめに組まれているので
     font-size を落として letter-spacing で字送りを戻す */
  font-size: 1.638rem;       /* 54.6px */
  font-weight: 900;
  color: #050505;
}

.why__exp .why__t1 { left: 3.15rem; top: 12.03rem; letter-spacing: .1343em; }
.why__exp .why__t2 { left: 3.15rem; top: 15.33rem; letter-spacing: .1291em; }

/* 本文の下の破線 ---- 本家は 12.5px の線を 19.19px ピッチで並べたもの ------ */
.why__exp .why__rule {
  left: 2.37rem;             /* 79 */
  width: 27.81rem;           /* 927 */
  height: .12rem;            /* 4 */
  z-index: 3;
  background-image: repeating-linear-gradient(to right,
      #050505 0 .375rem, transparent .375rem .5757rem);
  background-position: -.096rem 0;
}

.why__exp .why__rule--1 { top: 14.1rem; }   /* 1676 */
.why__exp .why__rule--2 { top: 17.43rem; }  /* 1787 */

/* ---- 主な原因 ---------------------------------------------------------- */
.why__exp .cause {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}

/* 黒い札 ---- 本家 x563.75..1035.75 / y1851..1975 を skewX(-14.6°) --------- */
.why__exp .cause__flag {
  position: absolute;
  left: 16.9425rem;
  top: 19.38rem;             /* 1852 - 1206 */
  width: 14.16rem;           /* 472 */
  height: 3.72rem;           /* 124 */
  margin: 0;
  padding: 0;
  z-index: 3;
  transform: skewX(-14.6deg);
}
/* 手描き風フィルターは背景の札だけにかけ、文字(span)には効かせない */
.why__exp .cause__flag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  filter: url(#rough-plate);
}

/* 札のしっぽ ---- 本家の実測 (733,1973)(798,1973)(708,2010)。
   札は skew しているので、しっぽは傾いていない .cause 側に描く */
.why__exp .cause::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 21.24rem;            /* 708 */
  top: 23.01rem;             /* 1973 - 1206 */
  width: 2.7rem;             /* 708..798 */
  height: 1.11rem;           /* 1973..2010 */
  background: #000;
  clip-path: polygon(27.8% 0, 100% 0, 0 100%);
}

/* 札の文字 ---- 字面 (647,1878)..(951,1947)。文字は傾いていない ----------- */
.why__exp .cause__flag span {
  position: absolute;
  left: 2.035rem;
  top: .63rem;
  display: block;
  transform: skewX(14.6deg);
  transform-origin: 0 0;
  font-family: var(--f-why-body);
  font-size: 2.193rem;       /* 73.1px */
  font-weight: 900;
  letter-spacing: .0862em;   /* → 字送り 79.4px */
  line-height: 1;
  color: #ff0;
}

/* 原因ボックス ---- 外形 x75..1524 / y1919..2304、黒フチ 8.5px、影 +8/+8 --- */
.why__exp .cause__list {
  position: absolute;
  left: 2.28rem;             /* 76 */
  top: 21.45rem;             /* 1921 - 1206 */
  width: 43.5rem;            /* 1450 */
  height: 11.58rem;          /* 386 */
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  isolation: isolate;
  z-index: 2;
}

/* 箱そのもの。手描きのゆらぎは面だけに掛ける（文字に掛けると読めなくなる） */
.why__exp .cause__list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  background: #f4f4f4;
  border: .255rem solid #000;
  border-radius: .3rem;
  box-shadow: .24rem .24rem 0 #000;
  filter: url(#rough-plate);
}

.why__exp .cause__list li {
  position: absolute;
  /* style.css 側の display:flex / gap:.5rem を必ず打ち消すこと。
     flex のままだと <b> と後続テキストの間に gap が入る */
  display: block;
  left: 2.43rem;             /* ✕ の左 157 - 76 */
  padding-left: 2.025rem;    /* ✕ の幅＋アキ = 227 - 157 */
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--f-why-body);
  font-size: 1.47rem;        /* 49px */
  font-weight: 900;
  letter-spacing: .051em;    /* → 字送り 51.5px */
  color: #000;
}

/* 本家は3行の送りが 78 / 80px と不揃い。画像から起こした版なのでそのまま合わせる */
.why__exp .cause__list li:nth-child(1) { top: 3rem; }      /* 字面上端 2025 */
.why__exp .cause__list li:nth-child(2) { top: 5.37rem; }   /* 字面上端 2104 */
.why__exp .cause__list li:nth-child(3) { top: 7.74rem; }   /* 字面上端 2183 */

/* ✕ ---- 51x51 の枠にちょうど収まる、太さ 10px の二本線 ------------------- */
.why__exp .cause__list .x {
  position: absolute;
  left: 0;
  top: -.12rem;
  width: 1.53rem;            /* 51 */
  height: 1.53rem;
}

.why__exp .cause__list .x::before,
.why__exp .cause__list .x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.89rem;            /* 63 */
  height: .3rem;             /* 10 */
  margin: -.15rem 0 0 -.945rem;
  border-radius: .045rem;
  background: #e00000;
}

.why__exp .cause__list .x::before { transform: rotate(45deg); }
.why__exp .cause__list .x::after  { transform: rotate(-45deg); }

/* 赤字 ------------------------------------------------------------------- */
.why__exp .cause__list .mk {
  position: relative;
  font-weight: inherit;
  color: #e00000;
  background: none;
}

/* 黄色のマーカーは字面の下 3 分の 1 に、高さ 20px の帯として引かれている */
.why__exp .cause__list .mk::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: .06rem;
  right: var(--hlr, -.06rem);
  top: var(--hl, 1.35rem);
  height: .615rem;           /* 20.5 */
  background: #e8de22;
}

/* 本家はマーカーの位置も長さも行ごとに少しずつ違う（版下から起こした版のため）*/
.why__exp .cause__list li:nth-child(2) { --hl: 1.29rem; }
.why__exp .cause__list li:nth-child(3) { --hl: 1.44rem; --hlr: -.24rem; }

/* （ ）は本家では全角より詰めて組んである（実測 字送り 32px / 37px）。
   負の margin は後続の字が付いてこないので、幅を決め打ちした inline-block にする */
.why__exp .cause__list .pk {
  display: inline-block;
  text-align: center;
  letter-spacing: 0;
}

/* 開き括弧は本家では前の字に 18px 食い込ませてある（字面の位置だけずらす）*/
.why__exp .cause__list .pk:first-of-type {
  width: .96rem;             /* 字送り 32 */
  position: relative;
  left: -.54rem;             /* -18 */
}
.why__exp .cause__list .pk:last-of-type  { width: 1.11rem; } /* 字送り 37 */

/* ============================================================================
   SEC05 重要 / 工事のプロ ─ 本家 5.jpg を 1600px 原寸で実測して再現

   .pro__head = 上の壁（y0..73）＋ 黒帯（y74..103 と中央の三角・頂点 y230）＋
                黄色の地（下端は V 字：両端 y719 / 中央 (800,925)）。
                clip-path で V 字に切り、はみ出す 206px は負の margin で詰める。
   中身はすべて絶対配置で、left/top の rem × 33.3333 = 本家 5.jpg の座標。

   書体：本文は Noto Sans JP 900（字面の総当りで同定）。本家の方が 2 割ほど太いので
   -webkit-text-stroke で少し太らせている。
============================================================================ */

.sec-pro {
  position: relative;
  background: #fff;
  --f-pro-jp: "Noto Sans JP", var(--f-square);
}

.pro__head {
  position: relative;
  z-index: 1;
  height: 27.75rem;          /* 925 */
  margin-bottom: -6.18rem;   /* 925 - 719 */
  padding: 0;
  background: #f4da5f;
  text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% 77.73%, 50% 100%, 0 77.73%);
}

.pro__head > * {
  position: absolute;
  z-index: 1;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  transform-origin: 0 0;
}

/* 上に残るコンクリートの壁（前セクションからの続き） ---- y0..73 ---------- */
.pro__head .pro__wall {
  left: 0;
  right: 0;
  top: 0;
  height: 2.22rem;
  /* pro-wall.jpg 오른쪽에는 이전 말풍선이 합성되어 있으므로
     왼쪽의 깨끗한 콘크리트 영역만 늘려 사용한다. */
  background: url("../images/pro-wall.jpg") left top / 155% 100% no-repeat;
  z-index: 0;
}

/* 黒帯（y74..103）＋ 中央の三角（x448..1152・頂点 y230） ------------------ */
.pro__head .pro__band {
  left: -.3rem;
  right: -.3rem;
  top: 2.22rem;
  height: 4.68rem;           /* 74..230 */
  background: #171717;
  clip-path: polygon(0 0, 100% 0, 100% 18.59%, 72% 18.59%, 50% 100%, 28% 18.59%, 0 18.59%);
  filter: url(#rough-band);
  z-index: 0;
}

/* 「重要」のはんこ ---- 本家から抜き出した画像。左端は本家でも切れている ---- */
.pro__head .stamp {
  left: 0;
  top: 2.88rem;              /* 96 */
  width: 14.13rem;           /* 471 */
  height: 10.59rem;          /* 353 */
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  background: url("../images/pro-stamp.png") 0 0 / 100% 100% no-repeat;
  transform: none;
  text-shadow: none;
  z-index: 0;
}

.pro__head .stamp::after { content: none; }

.pro__head .stamp span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* リード文 3 行 ---------------------------------------------------------- */
.pro__head .pro__l1,
.pro__head .pro__l2,
.pro__head .pro__l3 {
  font-family: "M PLUS 1p", var(--f-pro-jp);
  font-size: 1.536rem;       /* 51.2 */
  font-weight: 800;
  letter-spacing: .0725em;
  color: var(--ink);
  -webkit-text-stroke: 0;
  z-index: 2;
}

.pro__head .pro__l1 { left: 1.89rem; top: 10.56rem; }
.pro__head .pro__l2 {
  left: 1.95rem;
  top: 14.49rem;
  letter-spacing: .06em;
}

/* 本家は「、」「・」だけ詰めて組んである */
.pro__head .pro__l2 .p { font-feature-settings: "palt" 1; letter-spacing: 0; }
.pro__head .pro__l3 { left: 1.92rem; top: 18.015rem; }

/* 行1 の 2 つめの「業務用」だけ大きい */
.pro__head .pro__l1 b { font-weight: inherit; font-size: 1.45em; letter-spacing: .112em; }

/* 行3 の「プロの技術と知識」は赤。助詞だけ小さい */
.pro__head .pro__l3 b { font-weight: inherit; font-size: 1.68em; letter-spacing: .045em; color: var(--red); }
.pro__head .pro__l3 b i { font-style: normal; font-size: .76em; }

/* 破線 ---- x61..1044・太さ 4px・11.5px の線と 7.8px の空き ---------------- */
.pro__head .pro__rule {
  left: 1.83rem;             /* 61 */
  width: 29.52rem;           /* 984 */
  height: .12rem;            /* 4 */
  background-image: repeating-linear-gradient(to right,
      var(--ink) 0 .345rem, transparent .345rem .583rem);
  z-index: 2;
}

.pro__head .pro__rule--1 { top: 13.29rem; }   /* 443 */
.pro__head .pro__rule--2 { top: 16.68rem; }   /* 556 */
.pro__head .pro__rule--3 { top: 21.12rem; }   /* 704 */

/* 吹き出し ---- 外枠 (1068,5) 483x315 ------------------------------------- */
.pro__head .pro__balloon {
  box-sizing: border-box;
  left: 32.28rem;
  top: .15rem;
  width: 14.25rem;
  height: 16rem;
  padding: 1.2rem 0 0;
  display: block;
  background-color: transparent;
  background-image: url("../images/doctor-say-text.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 原画像の透明な上余白だけを詰め、下端の尻尾は切らない。 */
  background-position: center -2.85rem;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  text-align: center;
  font-family: "M PLUS 1p", var(--f-pro-jp);
  font-size: 1.17rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.36;
  transform: none;
  filter: none;
  z-index: 3;
}

.pro__head .pro__balloon::before,
.pro__head .pro__balloon::after { content: none; }

/* 赤い波線の下線 */
.pro__head .pro__balloon .u {
  position: relative;
  text-decoration: none;
  padding-bottom: .21rem;
}

.pro__head .pro__balloon .u::after {
  content: "";
  position: absolute;
  left: -.06rem;
  right: -.06rem;
  bottom: .21rem;
  height: .18rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2723%27 height=%276%27%3E%3Cpath d=%27M0 4.4 Q5.75 1.4 11.5 4.4 T23 4.4%27 fill=%27none%27 stroke=%27%23e2251c%27 stroke-width=%273%27/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: .69rem .18rem;
}

/* 吹き出しの尻尾（左下・指し棒の方を向く） */
.pro__head .pro__tail {
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 博士（本家から抜き出した画像） ---- (1106,284) 494x563 ------------------ */
.pro__head .pro__char {
  left: 33.18rem;
  top: 6.6rem;
  right: auto;
  bottom: auto;
  width: 12rem;
  height: 18rem;
  max-width: none;
  object-fit: fill;
  z-index: 4;
}

.pro__body {
  position: relative;
  z-index: 0;
  padding-top: 7.95rem;
  padding-bottom: 2.72rem;
  background-image: repeating-linear-gradient(-45deg, transparent 0 .45rem, rgba(248, 219, 85, .2) .45rem .61rem);
}

.pro__body .spark {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* SEC05 body decorations measured from the 768px reference capture. */
.pro__body .spark--a { left: 5.7%; top: 8.4%; width: 3.8rem; }
.pro__body .spark--b { left: 14.5%; top: 14.2%; width: 1.8rem; }
.pro__body .spark--c { left: 7.5%; top: 46.9%; width: 1.45rem; }
.pro__body .spark--d { left: 11.4%; top: 40.2%; width: 2.85rem; }
.pro__body .spark--e { left: 80.5%; top: 42.2%; width: 3.1rem; }
.pro__body .spark--f { left: 92.9%; top: 38.7%; width: 1.8rem; }
.pro__body .spark--g { left: 87.5%; top: 50.4%; width: 1.8rem; }

/* SEC05 body, part 1: title block measured against mobile/5.jpg at 768px. */
.pro__body .pro__installer {
  top: 3.65rem;
  right: .95rem;
  width: 11.4rem;
  height: 9.2rem;
  object-fit: fill;
}

.pro__body .pro__sub {
  font-family: "M PLUS 1p", var(--f-pro-jp);
  font-weight: 800;
  gap: .8rem;
  font-size: 2.2rem;
  letter-spacing: .055em;
  transform: scaleX(1.23);
  transform-origin: center;
}

.pro__body .slash-l,
.pro__body .slash-r {
  width: .62rem;
  height: 2.05rem;
}

.pro__body .pro__h2 .dot-text {
  font-size: 1em;
}

.pro__body .pro__h2 {
  font-family: "M PLUS 1p", var(--f-pro-jp);
  font-weight: 800;
  text-align: left;
}

.pro__body .pro__main-title {
  display: inline-block;
  font-size: 1em;
  transform: scaleX(1.073);
  transform-origin: right center;
}

.pro__body .pro__h2 > span:last-child {
  font-size: .55em;
  position: relative;
  left: -.15rem;
  display: inline-block;
  transform: scaleX(1);
  transform-origin: left center;
}

.pro__body .pro__balloon2 {
  box-sizing: border-box;
  left: .15rem;
  width: 27.35rem;
  margin-top: .79rem;
  margin-bottom: 1.42rem;
  padding: .68rem 2rem;
  font-family: "M PLUS 1p", var(--f-pro-jp);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: .025em;
  border-width: .3rem;
  box-shadow: .24rem .3rem 0 #111;
}

.pro__body .pro__balloon2::before,
.pro__body .pro__balloon2::after { content: none; }

.pro__body .pro__balloon2 .balloon-tail {
  position: absolute;
  z-index: 2;
  left: 38%;
  bottom: -1.55rem;
  width: 2.8rem;
  height: 1.65rem;
  background: #111;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
}

.pro__body .pro__balloon2 .balloon-tail::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: -.38rem;
  width: 100%;
  height: .42rem;
  background: var(--cream);
}

.pro__body .pro__balloon2 .balloon-tail::after {
  content: "";
  position: absolute;
  left: .38rem;
  top: 0;
  width: 2rem;
  height: 1.08rem;
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 5% 100%);
}

.pro__body .pro__list li:first-child {
  border-top: 0;
}

/* SEC05 body, part 2: checklist alignment without changing row rhythm. */
.pro__body .pro__list .thumb {
  transform: translate(2rem, -.75rem) scale(1.45, 1.42);
  transform-origin: center;
}

.pro__body .pro__list p {
  position: relative;
  left: 2.65rem;
  font-family: "M PLUS 1p", var(--f-pro-jp);
  font-size: 1.78rem;
  font-weight: 800;
}

.pro__body .pro__list .mk {
  letter-spacing: .19em;
}

.pro__body .pro__list li:nth-child(2) p {
  letter-spacing: .01em;
  font-size: 1.7rem;
  top: .75rem;
}

.pro__body .pro__list li:nth-child(2) .mk {
  letter-spacing: .24em;
}

.pro__body .pro__list li:nth-child(2) .thumb {
  transform: translate(2rem, -.35rem) scale(1.45, 1.42);
}

.pro__body .pro__list li:nth-child(3) p {
  font-size: 1.75rem;
  top: .85rem;
}

.pro__body .pro__list li:nth-child(3) .thumb {
  transform: translate(2rem, .35rem) scale(1.45, 1.42);
}

.pro__body .pro__list li:nth-child(3) .mk {
  letter-spacing: .12em;
}

.pro__body .pro__list li {
  position: relative;
  padding-bottom: 1.125rem;
  border-bottom: 0;
}

.pro__body .pro__list li::after {
  content: "";
  position: absolute;
  left: .45rem;
  right: .7rem;
  bottom: 0;
  border-bottom: .18rem dashed #444;
}

.pro__body .pro__list li:last-child {
  padding-bottom: 2.55rem;
}

.pro__body .pro__list li:last-child::after {
  bottom: -.45rem;
}

.pro__body::after {
  bottom: -6.5rem;
  /* 元の height だと弧の頂点が .pro__body の下端よりわずかに上まで届き、
     次のセクション先頭の genki__band を突き抜けて見えてしまう。
     overflow:hidden の切り口ちょうどで隠れるよう高さを詰める。 */
  height: 6.3rem;
}

/* ============================================================
   SEC06 / 元気でんき実績
   mobile/6.jpg の 800px 原稿を 768px 表示へ換算して再現する。
   ============================================================ */
.sec-genki {
  position: relative;
  margin-top: 0;
  padding: 0 1.2rem 4.9rem;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, #fffdf1 0 .42rem, #fff4c5 .42rem .58rem);
}

/* 上端だけを斜線地にし、黄色面の楕円弧を原稿と同じ位置に重ねる。 */
.sec-genki::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3.3rem;
  left: -3.2rem;
  width: calc(100% + 6.4rem);
  height: calc(100% - 3.3rem);
  border-top: .55rem solid var(--ink);
  border-radius: 50% 50% 0 0 / 6rem 6rem 0 0;
  background: #fff10f;
}

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

.sec-genki .genki__band {
  width: 39.25rem;
  min-height: 6.8rem;
  margin: 0 0 0 2.55rem;
  padding: .55rem 1rem 1rem;
  gap: .38em;
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 2.7rem;
  line-height: 1;
  clip-path: none;
}

.sec-genki .genki__band::before {
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  background: var(--ink);
  /* 상단이 볼록하게 휘지 않도록 원본 배너 외곽을 직선으로 유지한다. */
  filter: none;
}

.sec-genki .genki__band::after {
  bottom: -2.55rem;
  width: 3.55rem;
  height: 2.75rem;
}

.sec-genki .genki__logo-frame {
  flex: 0 0 19.4rem;
  width: 19.4rem;
  max-width: none;
}

.sec-genki .genki__h2 {
  margin: 2.65rem 0 2rem;
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 2.55rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1.25;
  left: .9rem;
  letter-spacing: -.045em;
  transform: skewX(-4deg);
}

.sec-genki .genki__h2 .rd {
  display: inline-block;
  margin-right: .15em;
  font-size: 1.4em;
  font-weight: 900;
  letter-spacing: -.015em;
  transform: scaleX(1);
  transform-origin: left center;
}

.sec-genki .genki__lead {
  display: inline-block;
  transform: scaleX(1.09);
  transform-origin: left center;
}

.sec-genki .genki__card {
  width: auto;
  height: 35.9rem;
  margin: 0 .25rem 0 1.1rem;
  padding: 3rem 2.4rem 2.5rem;
  background: transparent;
}

/* 격자는 곧게 두고, 검은 외곽선만 가볍게 흔들어 원고의 손그림 질감을 낸다. */
.sec-genki .genki__card::before {
  inset: 0;
  border: 0;
  border-radius: .28rem;
  background-color: #fff;
  background-image:
    linear-gradient(rgb(204 204 204 / .72) 1px, transparent 1px),
    linear-gradient(90deg, rgb(204 204 204 / .72) 1px, transparent 1px);
  background-size: .86rem .86rem;
  filter: none;
}

.sec-genki .genki__card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border: .48rem solid var(--ink);
  border-radius: .28rem;
  filter: url(#rough-s);
  box-shadow: .5rem .5rem 0 var(--ink);
  pointer-events: none;
}

.sec-genki .genki__checks li {
  gap: .55rem;
  margin-bottom: 2.4rem;
}

.sec-genki .genki__checks li:first-child {
  margin-bottom: 2.2rem;
}

.sec-genki .cbox {
  width: 2.4rem;
  margin-top: .12rem;
}

.sec-genki .genki__checks p {
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .075em;
}

.sec-genki .genki__checks p > .zigzag {
  display: inline-block;
  margin-left: .3em;
}

.sec-genki .genki__checks p > br + .zigzag {
  margin-left: 0;
}

.sec-genki .genki__badges {
  gap: 1rem;
  margin: 3.19rem 0 0;
}

.sec-genki .genki__tab {
  display: block;
  z-index: 3;
  width: 11.5rem;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  filter: none;
  transform: none;
}

.sec-genki .genki__tab::before,
.sec-genki .genki__tab::after {
  display: none;
}

.sec-genki .genki__tab img {
  width: 100%;
  height: auto;
}

.sec-genki .genki__badges li::after {
  display: none;
}

.sec-genki .genki__box {
  min-height: 11rem;
  margin-top: -1.9rem;
  padding: 2.35rem .35rem .7rem;
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.22;
}

.sec-genki .genki__box::before {
  background-color: #fffdf0;
  background-image: repeating-linear-gradient(135deg, transparent 0 .42rem, rgb(245 218 100 / .28) .42rem .58rem);
  box-shadow: .35rem .45rem 0 var(--ink);
}

.sec-genki .genki__box b {
  font-size: 3rem;
}

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

.sec-genki .genki__box i {
  font-size: 1.4rem;
}

.sec-genki .genki__badges li:first-child .genki__box {
  padding: .7rem .35rem;
  font-size: 1.6rem;
}

.sec-genki .genki__badges li:nth-child(2) .genki__box b:not(.sm) {
  font-size: 2.9rem;
  letter-spacing: -.05em;
}

.sec-genki .genki__badges li:nth-child(3) .genki__box {
  padding-top: 2.8rem;
  font-size: 1.5rem;
}

.sec-genki .genki__badges li:nth-child(3) .genki__box b.sm {
  display: inline-block;
  letter-spacing: .035em;
  transform: scaleX(1.04);
}

.sec-genki .genki__foot {
  margin-top: 0;
}

.sec-genki .genki__char {
  left: -20.8rem;
  width: 48rem;
}

.sec-genki .genki__msg {
  position: relative;
  top: 4rem;
  /* 원본은 에어컨 이미지와 카드 우측 끝 사이에 여백이 남는다. */
  margin-right: .6rem;
  margin-bottom: -.1rem;
  /* 원본 말풍선은 캐릭터 쪽으로 조금 더 넓게 펼쳐진다. */
  margin-left: -1.4rem;
  min-height: 15rem;
  padding-top: 4rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("../images/orange_card.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  /* 원본의 KeinannPOP 디스플레이 글꼴을 사용한다. */
  font-family: "KeinannPOP", var(--f-round);
  font-size: 2.65rem;
  line-height: 1.08;
  letter-spacing: -.055em;
  box-shadow: none;
  transform: none;
}

.sec-genki .genki__msg::before {
  display: none;
}

.sec-genki .genki__msg::after {
  display: none;
}

.sec-genki .genki__msg-top {
  top: .15rem;
  left: -.8rem;
  color: #fff10f;
  font-size: 2.68rem;
  transform: skewX(-8deg) scaleX(1);
}

.sec-genki .genki__msg > span {
  top: .25rem;
  transform: skewX(-8deg) scaleX(1.1);
  transform-origin: center;
  font-weight: 700;
  /* 原本の太い黒フチと右下の印刷影。文字の塗りと配置は変えない。 */
  -webkit-text-stroke: .52rem var(--ink);
  paint-order: stroke fill;
  text-shadow: .4rem .5rem 0 var(--ink);
}

.sec-genki .genki__msg > span + span {
  /* 두 줄의 실제 글자 시작점을 같은 X축에 맞춘다. */
  left: 2.55rem;
  margin-top: .35rem;
  font-size: 2.8rem;
  transform: skewX(-8deg) scaleX(1.09);
}

.sec-genki .genki__msg-punct {
  display: inline-block;
  margin-left: -.16em;
}

.sec-genki .genki__msg-top-white {
  color: #fff;
}

.sec-genki .genki__ac-frame {
  margin-right: -2.55rem;
  margin-bottom: 4.55rem;
}

.sec-genki .genki__ac {
  left: -12.65rem;
}

/* ============================================================
   SEC07 screenshot parity — origin.jpg at a normalized 634px width.
   The content remains live text; only geometry, type, borders and supplied
   decorative assets are matched to the reference capture.
============================================================ */
.sec-again {
  padding-top: 4.25rem;
  padding-bottom: 2.15rem;
}

.sec-again .again__chip {
  top: 1.75rem;
  min-width: 14.2rem;
  padding: .38rem 1.15rem .48rem;
  background: var(--ink);
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.sec-again .again__chip::before {
  display: none;
}

.sec-again .again__chip::after {
  left: 44%;
  bottom: -.76rem;
  width: 1.55rem;
  height: 1.05rem;
  clip-path: polygon(0 0, 100% 0, 32% 100%);
}

.sec-again .q-pill {
  margin-inline: .9rem;
  padding: .58rem 1rem .7rem;
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 2.35rem;
  letter-spacing: -.025em;
  border-radius: 3rem;
}

.sec-again .q-mark {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: -.4rem;
  margin-bottom: -.2rem;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-size: 2.08em;
  font-weight: 700;
  line-height: .75;
  -webkit-text-stroke: .32rem #fff;
  paint-order: stroke fill;
  transform: translateY(-.85rem);
}

.sec-again .q-mark i {
  display: inline-block;
  margin-left: .03em;
  font-style: normal;
}

.sec-again .again__h2 {
  margin-top: 1.35rem;
  padding-bottom: 1.15rem;
  font-family: "M PLUS 1p", var(--f-square);
  font-size: 2.65rem;
  letter-spacing: .015em;
}

.sec-again .again__h2::before {
  left: -.1rem;
  right: -.1rem;
  bottom: -.7rem;
  width: auto;
  height: 2.4rem;
  top: 4rem;
  border-radius: 0;
  background-color: transparent;
  background-image: url("../images/reason-cloud-line.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: none;
}

.sec-again .again__h2::after {
  display: none;
}

.sec-again + .sec-answer {
  padding: .55rem 2.05rem 4rem;
}

.sec-answer .ans--a1,
.sec-answer .ans--a2,
.sec-answer .ans--a3 {
  position: relative;
  margin-bottom: 2.4rem;
  border: .22rem solid var(--ink);
  border-radius: .72rem;
  overflow: visible;
  background-color: #fff;
  background-image:
    linear-gradient(rgb(197 197 197 / .5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(197 197 197 / .5) 1px, transparent 1px);
  background-size: .86rem .86rem;
  box-shadow: .18rem .28rem .32rem rgb(0 0 0 / .32);
}

.sec-answer .ans--a1::after,
.sec-answer .ans--a2::after,
.sec-answer .ans--a3::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: -.22rem;
  border: .32rem solid var(--ink);
  border-radius: .72rem;
  filter: url(#rough);
  pointer-events: none;
}

.sec-answer .ans--a1 .ans__head,
.sec-answer .ans--a2 .ans__head,
.sec-answer .ans--a3 .ans__head {
  min-height: 5.45rem;
  margin: 0;
  padding: .35rem .65rem .5rem;
  border-radius: .58rem .58rem 0 0;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.075em;
}

.sec-answer .ans--a1 .ans__head b,
.sec-answer .ans--a2 .ans__head b,
.sec-answer .ans--a3 .ans__head b {
  margin: 0 .75rem -.05rem 0;
  position: relative;
  z-index: 9;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 5.7rem;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1.02rem var(--ink);
  paint-order: stroke fill;
  transform: translateY(-1.05rem);
  transform-origin: left center;
}

.sec-answer .ans--a1 .ans__head b i,
.sec-answer .ans--a2 .ans__head b i,
.sec-answer .ans--a3 .ans__head b i {
  display: inline-block;
  width: 1.12rem;
  height: 1.12rem;
  margin: 0 0 .08rem 1rem;
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  line-height: 0;
  -webkit-text-stroke: 0;
  box-shadow: 0 0 0 .42rem var(--ink);
  vertical-align: bottom;
}

.sec-answer .ans--a1 .ans__head-tail {
  display: inline-block;
  transform: none;
}

.sec-answer .ans--a2 .ans__head > span {
  display: inline-block;
  transform: none;
}

.sec-answer .ans--a1 .ans__head,
.sec-answer .ans--a2 .ans__head {
  font-size: 2.55rem;
}

.sec-answer .ans--a1 .ans__head {
  font-size: 2.6rem;
}

.sec-answer .ans--a3 .ans__head {
  font-size: 2.09rem;
}

.sec-answer .ans--a3 .ans__head b {
  margin-right: .85rem;
}

.sec-answer .ans--a1 .ans__head > span,
.sec-answer .ans--a2 .ans__head > span,
.sec-answer .ans--a3 .ans__head > span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
}

.sec-answer .ans__head em {
  color: var(--yl);
}

.sec-answer .ans--a1 .ans__body {
  min-height: 12.55rem;
  padding: .75rem 2.15rem .75rem;
}

.sec-answer .ans--a1 {
  margin-bottom: 2.2rem;
}

.sec-answer .ans--a1 .ans__txt {
  width: 22rem;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-weight: 800;
  font-size: 1.42rem;
  line-height: 1.42;
  letter-spacing: -.055em;
}

.sec-answer .ans--a1 .ans__txt .d {
  width: fit-content;
  margin-bottom: .24em;
}

.sec-answer .ans--a1 .ans__txt .d:last-child {
  border-bottom: 0;
}

.sec-answer .ans--a1 .company-logo {
  display: inline-block;
  width: 10.6rem;
  height: 2.2rem;
  vertical-align: 0;
}

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

.sec-answer .ans--a1 .ans__balloon {
  top: -.3rem;
  right: 9.25rem;
  width: 11.35rem;
  min-height: 10.3rem;
  padding-top: 1.25rem;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-weight: 800;
  font-size: 1.2rem;
}

.sec-answer .ans--a1 .ans__balloon b.rd {
  display: inline-block;
  font-size: 1.28em;
  line-height: 1.08;
}

.sec-answer .ans--a1 .ans__char {
  right: .85rem;
  bottom: .75rem;
  width: 11.2rem;
}

.sec-answer .ans--a1 .ans__balloon-bg {
  bottom: -1.05rem;
  filter: url(#rough-s) drop-shadow(.28rem .36rem 0 var(--ink));
}

.sec-answer .ans--a2 .ans__body {
  grid-template-columns: 12.7rem minmax(0, 1fr);
  column-gap: .8rem;
  row-gap: 1.05rem;
  padding: 1.15rem 1rem .45rem;
}

.sec-answer .ans--a2 .reuse {
  min-height: 14.25rem;
}

.sec-answer .ans--a2 .reuse__badge {
  z-index: 10;
  top: -.75rem;
  left: -2.35rem;
  width: 5.9rem;
  height: 5.9rem;
  border-width: .25rem;
  font-size: 1.9rem;
  line-height: .78;
  box-shadow: 0 0 0 .28rem #fff;
}

.sec-answer .ans--a2 .reuse__ac {
  top: 2.75rem;
  left: -.05rem;
  width: 13.4rem;
  object-fit: contain;
}

.sec-answer .ans--a2 .ans__txt {
  padding-top: 0;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1.24;
  letter-spacing: -.06em;
}

.sec-answer .ans--a1 .ans__txt .d,
.sec-answer .ans--a2 .ans__txt .d,
.sec-answer .ans--a3 .ans__txt .d,
.sec-answer .ans--a1 .ans__txt .d:last-child,
.sec-answer .ans--a2 .ans__txt .d:last-child,
.sec-answer .ans--a3 .ans__txt .d:last-child {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: .08em;
  border-bottom: 0;
  background-image: repeating-linear-gradient(90deg,
      rgb(21 21 21 / .78) 0 .28rem,
      transparent .28rem .52rem);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: auto .12rem;
}

.sec-answer .ans--a2 .ans__memo {
  min-height: 7.35rem;
  padding: .75rem .7rem .65rem 6.15rem;
  border-radius: .55rem;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  margin-right: 1.2rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.045em;
  transform: translateY(-.5rem);
}

.sec-answer .ans--a2 .ans__memo-tag {
  top: 1.95rem;
  left: -1.3rem;
  color: var(--ink);
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-size: 2.3rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.1em;
  -webkit-text-stroke: .58rem var(--gold);
  paint-order: stroke fill;
  text-shadow: 0 0 .02rem var(--gold);
  transform: rotate(-8deg);
}

.sec-answer .ans--a2 .ans__memo::after {
  top: 4.72rem;
  left: -1.3rem;
  width: 6.1rem;
  height: .13rem;
  border: 0;
  background-image: repeating-linear-gradient(90deg,
      var(--ink) 0 .28rem,
      transparent .28rem .52rem);
  background-repeat: repeat-x;
  transform: rotate(-8deg);
}

.sec-answer .ans--a2 .ans__memo .zigzag {
  display: inline-block;
  font-size: 1.22em;
  line-height: 1.05;
}

.sec-answer .ans--a2 .ans__orange {
  min-height: 8.6rem;
  margin-right: 1.15rem;
  margin-left: .9rem;
  padding: 1.7rem 7.5rem .85rem 1.25rem;
  border: 0;
  border-radius: .8rem;
  background-color: #fff;
  background-image: url("../images/orange-character-note-frame.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.05em;
  box-shadow: none;
  transform: none;
}

.sec-answer .ans--a2 .ans__orange::before {
  display: none;
}

.sec-answer .ans--a2 .ans__char2 {
  right: -1.65rem;
  bottom: -.65rem;
  width: 8.8rem;
  height: 9.65rem;
}

.sec-answer .ans--a2 .ans__char2 img {
  left: -17.35rem;
  width: 43.5rem;
}

.sec-answer .ans--a3 {
  margin-bottom: 0;
}

.sec-answer .ans--a3 .ans__body--a3 {
  min-height: 23.9rem;
  padding: 1.05rem 1.45rem .15rem 1.75rem;
}

.sec-answer .ans--a3 .ans__txt {
  width: 26rem;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1.24;
  letter-spacing: -.06em;
}

.sec-answer .ans--a3 .ans__txt .d {
  margin-bottom: .24em;
  transform: none;
}

.sec-answer .ans--a3 .ans__txt--gap {
  margin-top: 2.45rem;
}

.sec-answer .ans--a3 .ans__ac1 {
  top: -2.95rem;
  right: -19.3rem;
  width: 36.5rem;
  transform: scaleX(1.03);
  transform-origin: right center;
}

.sec-answer .ans--a3 .ans__ac2 {
  z-index: 4;
  top: 9rem;
  right: -14.05rem;
  width: 27.8rem;
  transform: scaleY(1.15);
  transform-origin: top center;
}

.sec-answer .ans--a3 .ans__circle {
  top: 9.55rem;
  right: 8.15rem;
  width: 8.8rem;
  height: 8.8rem;
  padding: .45rem;
  font-family: "M PLUS Rounded 1c", var(--f-round);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.02;
  border-width: .32rem;
  box-shadow: .38rem .45rem 0 var(--ink);
}

.sec-answer .ans--a3 .spark {
  z-index: 2;
  display: block;
  width: 2.55rem;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
}

.sec-answer .ans--a3 .spark::before {
  display: none;
}

.sec-answer .ans--a3 .spark--d {
  top: 1.45rem;
  right: 13.8rem;
}

.sec-answer .ans--a3 .spark--e {
  top: 3rem;
  right: 13rem;
  width: 1.85rem;
}

/* ============================================================
   SEC 07-3 / 会社概要
   Reference: thin solid rules, regular gothic type and generous rows.
   ============================================================ */
.sec-profile {
  padding: 1.625rem 2.125rem 2rem;
  background: #f2efa0;
}

.sec-profile .prof {
  border-top: 1px solid #666;
  border-collapse: collapse;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 400;
}

.sec-profile .prof__row {
  border-bottom: 1px solid #666;
}

.sec-profile .prof__row:last-child {
  border-bottom: 0;
}

.sec-profile .prof dt,
.sec-profile .prof dd {
  padding: 1.125rem .625rem;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
}

.sec-profile .prof dt {
  width: 25%;
}

.sec-profile .prof__row:first-child dd {
  font-size: 1rem;
  font-weight: 700;
}

.sec-profile .prof__row:first-child dt,
.sec-profile .prof__row:first-child dd {
  padding-top: .90625rem;
  padding-bottom: .90625rem;
}

.sec-profile .prof__row:first-child .company-logo {
  width: 9.45rem;
  margin-left: -.65rem;
  margin-right: .22rem;
  vertical-align: -.14em;
}

.sec-profile .prof__row:last-child dt,
.sec-profile .prof__row:last-child dd {
  padding-top: 1.125rem;
  padding-bottom: 1.15rem;
  line-height: 1.75;
}

.sec-profile .prof__photos {
  /* 写真はカード内ではなく、会社概要セクションの左右いっぱいに広げる。 */
  margin: 1.5rem -2.125rem -2rem;
}

.sec-profile .prof__photos img {
  width: 100%;
  border: 0;
  border-radius: 0;
}

/* ============================================================
   SEC 08 / 内容にも自信
   Supplied card artwork is used as the frame while all copy stays live text.
   ============================================================ */
.sec-conf {
  padding-bottom: 3rem;
  background:
    linear-gradient(to bottom, transparent 0 calc(100% - 3rem), #fff calc(100% - 3rem) 100%),
    repeating-linear-gradient(90deg, rgb(248 210 81 / .23) 0 .14rem, transparent .14rem .5rem),
    #fffef8;
}

.sec-conf .conf__head {
  min-height: 14.3rem;
  max-width: 40.5rem;
  margin-bottom: 1.65rem;
}

.sec-conf .conf__char {
  top: -.8rem;
  left: -26.25rem;
  width: 55.5rem;
}

.sec-conf .conf__flag {
  top: 1.15rem;
  right: 3rem;
  width: 28.5rem;
}

.sec-conf .conf__h2 {
  top: 7.35rem;
  right: -3.45rem;
  bottom: auto;
  width: 100%;
  font-size: 5.35rem;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  font-style: italic;
  -webkit-text-stroke: 1.35rem #fff;
  paint-order: stroke fill;
  text-shadow: .32rem .34rem 0 rgb(167 167 167 / .46);
  transform: skewX(-4deg);
}

.sec-conf .conf__h2 > span {
  display: inline-block;
}

.sec-conf .conf__h2 .conf__minor {
  margin: 0 .08em;
  font-size: .7em;
  letter-spacing: .035em;
}

.sec-conf .conf__h2 .conf__strong {
  letter-spacing: .025em;
}

.sec-conf .conf__h2 em {
  display: inline-block;
  margin-left: .06em;
  -webkit-text-stroke: 1.65rem #fff;
  paint-order: stroke fill;
  transform: skewX(-28deg);
  transform-origin: bottom left;
}

.sec-conf .conf__list {
  max-width: 40.5rem;
  gap: .8rem;
}

.sec-conf .conf__list li {
  padding-top: 0;
}

.sec-conf .conf__box {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  padding-right: 1rem;
  padding-left: 1rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
  color: #fff;
  font-family: "Noto Sans JP", var(--f-square);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.06em;
  text-shadow: .06rem .08rem 0 rgb(0 0 0 / .14);
}

.sec-conf .conf__frame {
  position: absolute;
  z-index: 0;
  top: -41.53%;
  left: -1.804%;
  width: 103.134%;
  height: 197.814%;
  max-width: none;
  pointer-events: none;
}

.sec-conf .conf__frame--two {
  top: -35.263%;
  left: -2.216%;
  width: 104.432%;
  height: 190.789%;
}

.sec-conf .conf__box > p {
  position: relative;
  z-index: 1;
}

.sec-conf .conf__box::before {
  display: none;
}

.sec-conf .conf__list li:first-child .conf__box {
  height: 7rem;
  padding-top: 2.25rem;
  padding-bottom: .45rem;
}

.sec-conf .conf__list li:nth-child(n + 2) .conf__box {
  height: 10.9rem;
  padding-top: 3.35rem;
  padding-bottom: .75rem;
}

.sec-conf .conf__tab {
  z-index: 2;
  top: .15rem;
  align-items: baseline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: "Noto Sans JP", var(--f-square);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
}

.sec-conf .conf__list li:first-child .conf__tab {
  top: -.45rem;
}

.sec-conf .conf__tab b {
  position: relative;
  top: 0;
  margin-left: .12rem;
  color: var(--yl);
  font-size: 2.55rem;
  line-height: 1;
  -webkit-text-stroke: .4rem var(--ink);
  paint-order: stroke fill;
  text-shadow:
    -.16rem -.16rem 0 var(--ink),
     .16rem -.16rem 0 var(--ink),
    -.16rem  .16rem 0 var(--ink),
     .16rem  .16rem 0 var(--ink);
  transform: none;
}

.sec-conf .conf__zero,
.sec-conf .conf__lease {
  display: inline-block;
  font-size: 1.2em;
  line-height: .8;
}

.sec-conf .conf__zero {
  margin: 0 .11em;
}

.sec-conf .conf__lease {
  margin-right: .03em;
}

.sec-conf .conf__main-highlight {
  display: inline-block;
  font-size: 1.12em;
  line-height: .9;
}

.sec-conf .conf__box .conf__sub {
  width: 94%;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: .14rem dashed rgb(255 255 255 / .9);
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -.055em;
}

.sec-conf .conf__main--nowrap {
  width: 100%;
  white-space: nowrap;
  font-size: 2rem;
  letter-spacing: -.09em;
}

.sec-conf .conf__main--nowrap .conf__main-highlight {
  font-size: 1.1em;
}

.sec-conf .conf__list li:nth-child(2) .conf__box > p:first-child {
  width: 100%;
  font-size: 2.3rem;
  letter-spacing: -.065em;
  white-space: nowrap;
}

.sec-conf .conf__list li:nth-child(2) .conf__main-highlight {
  font-size: 1.18em;
}

/* ============================================================
   SEC 08 FOOT : reference-aligned visit / estimate explanation
   ============================================================ */
.sec-conf .conf__foot {
  height: 29.2rem;
  min-height: 0;
  padding: 0 2rem .8rem;
  background: none;
  overflow: visible;
}

.sec-conf .conf__foot::before,
.sec-conf .conf__foot::after {
  content: "";
  position: absolute;
  inset: 0 0 -11.5rem;
  pointer-events: none;
}

.sec-conf .conf__foot::before {
  z-index: 0;
  background: #fff;
  /* 1195px 幅の V 線画像を 48rem 幅で表示した上線の中心に合わせる。
     上線より下を全面白にして、線間と三角形の境界に縞が透けないようにする。 */
  clip-path: polygon(0 .8rem, 50% 6.79rem, 100% .8rem, 100% 100%, 0 100%);
}

.sec-conf .conf__foot::after {
  z-index: 1;
  background: #ebebeb;
  /* 灰色は下線に沿って切り抜く。左側の始点から右下の一点まで続く。 */
  clip-path: polygon(14.3% 3.64rem, 50% 7.81rem, 100% 1.99rem, 100% 100%);
}

.sec-conf .conf__foot > * {
  position: relative;
  z-index: 2;
}

.sec-conf .conf__chevron {
  height: 8.3rem;
  margin: 0 -2rem 1rem;
}

.sec-conf .conf__chevron::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 8.3rem;
  background: url("../images/haikei-2.png") center top / 100% auto no-repeat;
  pointer-events: none;
}

.sec-conf .cta--bottom {
  z-index: 2;
}

.sec-conf .conf__visit {
  grid-template-columns: 14.75rem minmax(0, 1fr);
  column-gap: .5rem;
  max-width: 43.5rem;
  min-height: 0;
  margin: -9rem auto 2.25rem;
}

.sec-conf .conf__suit {
  width: 25rem;
  transform: translate(-6.2rem, .3rem);
}

.sec-conf .conf__balloon {
  top: 3.45rem;
  width: calc(100% + .8rem);
  padding: 1.4rem 2.8rem 1.45rem;
  border-width: .34rem;
  border-radius: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.15rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.15;
  text-align: left;
  box-shadow: .45rem .5rem 0 #000;
}

.sec-conf .conf__txt {
  max-width: 41.2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.88rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.25;
}

.sec-conf .conf__txt .d,
.sec-conf .conf__txt .d:last-child {
  padding-bottom: .1em;
  margin-bottom: .22em;
  border-bottom: .12rem dashed #333;
}

.sec-conf .conf__txt .d:nth-child(1) {
  letter-spacing: -.015em;
}

.sec-conf .conf__txt .d:nth-child(2) {
  letter-spacing: -.035em;
}

.sec-conf .conf__txt .d:nth-child(3) {
  letter-spacing: -.07em;
  white-space: nowrap;
}

.sec-conf .conf__txt .mk {
  background: linear-gradient(transparent 62%, var(--yl) 62% 90%, transparent 90%);
}