@charset "UTF-8";
/* ==========================================================
   LP-IN-②-G01 引越し強調LP（域内）
   FLOCSS(l- / c- / p- / u-) + BEM
   BP: SP 〜767px / タブレット 768〜1023px / PC 1024px〜(min-width指定)
   デザイン: PC 1280px / SP 393px (等倍PNG)
   ========================================================== */

:root {
  /* palette.mjs / color-at.mjs での実測値 */
  --c-blue: #2841cd;
  --c-blue-deep: #013ca3;
  --c-red: #f23333;
  --c-yellow: #ffe033;
  --c-yellow-deep: #ffdd1b;
  --c-yellow-pale: #fff7ac;
  --c-yellow-lemon: #fffb1b;
  --c-cream: #ffffec;
  --c-bg-blue: #f0f3ff;
  --c-bg-blue-2: #f4f6ff;
  --c-bg-lavender: #bec8ff;
  --c-bg-lavender-pale: #edefff;
  --c-text: #333333;
  --c-white: #ffffff;

  /* インナー幅(PCデザイン実測) */
  --inner-reason: 48.3125rem;  /* 773px */
  --inner-btn: 49.5rem;        /* 792px */
  --inner-step: 49.75rem;      /* 796px */
  --inner-faq: 55.375rem;      /* 886px */
  --inner-contact: 74.125rem;  /* 1186px */
}

/* ------------------------------------------ base */
html {
  font-size: 100%;
}

main {
  background-color: var(--c-white); /* 共通CSSの #F5F5F6 を打ち消す */
}

.p-lp,
.p-float {
  color: var(--c-text);
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "メイリオ", Meiryo,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 500;
  line-height: 1.6;
}

.p-lp {
  overflow-x: hidden;
}

.p-lp *,
.p-lp *::before,
.p-lp *::after,
.p-float *,
.p-float *::before,
.p-float *::after {
  box-sizing: border-box;
}

.p-lp img {
  max-width: 100%;
  height: auto;
}

.p-lp a:hover {
  text-decoration: none;
}

/* ------------------------------------------ layout: inner */
.l-inner {
  width: 90%;
  max-width: var(--inner-step);
  margin-inline: auto;
}

.l-inner--reason  { max-width: var(--inner-reason); position: relative; }
.l-inner--btn     { max-width: var(--inner-btn); }
.l-inner--step    { max-width: var(--inner-step); }
.l-inner--faq     { max-width: var(--inner-faq); }
.l-inner--note    { max-width: 50.5rem; /* 808px */ }
/* 1186px インナーは 1280px デザイン幅で 92.7% になる */
.l-inner--reliable,
.l-inner--easy,
.l-inner--contact { width: 92.7%; max-width: var(--inner-contact); }

/* ------------------------------------------ component: 注釈 */
.c-note {
  font-size: 0.625rem; /* 10px : Figma実値 */
  font-weight: 400;
  line-height: 1.7;
}

.c-note__item--center,
.c-note--center {
  text-align: center;
}

/* 注)N ラベル X254 / 本文 X310(=ラベルから56px) / ブロック左端 X237 */
.c-note__item--indent {
  padding-left: 4.5625rem; /* 17 + 56 = 73px */
  text-indent: -3.5rem;    /* 行頭のラベルだけ 17px の位置に戻す */
}

.c-note__label {
  display: inline-block;
  width: 3.5rem;   /* 56px : 本文の開始位置を折り返し行と揃える */
  text-indent: 0;  /* inline-block は text-indent を継承するので打ち消す */
}

/* ------------------------------------------ component: 注釈アコーディオン
   閉じた状態=＋ / 開いた状態=ー */
.c-note-acc {
  margin-top: 0.5rem; /* 8px */
}

.c-note + .c-note-acc {
  margin-top: 0.9375rem; /* 15px */
}

.c-note-acc__head {
  font-size: inherit;
  font-weight: inherit;
}

.c-note-acc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  color: inherit;
  font-family: inherit;
  font-size: 0.625rem; /* 10px */
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.c-note-acc__btn::before {
  content: "＋";
  flex: none;
  font-weight: 700;
  line-height: 1;
}

.c-note-acc__btn[aria-expanded="true"]::before {
  content: "ー";
}

.c-note-acc__btn:hover {
  text-decoration: none;
}

.c-note-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.c-note-acc__panel.is-open {
  grid-template-rows: 1fr;
}

.c-note-acc__inner {
  overflow: hidden;
}

.c-note-acc__inner > .c-note {
  padding-top: 0.25rem; /* 4px */
}

/* ------------------------------------------ component: CTAボタン */
.c-btn {
  display: block;
  transition: opacity 0.3s;
}

.c-btn:hover {
  opacity: 0.8;
}

/* PC/SPで素材の縦横比が違うので明示する(遅延読み込み前の領域確保・CLS対策) */
.c-btn img {
  display: block;
  width: 100%;
  aspect-ratio: 1584 / 167;
}

/* CTAボタンは2種ともドロップシャドウ付き */
.c-btn img {
  filter: drop-shadow(0 0.125rem 0.1875rem rgba(0, 0, 0, 0.3));
}

.c-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem; /* 13px */
}

/* ==========================================================
   FV
   ========================================================== */
.p-fv {
  position: relative;
  z-index: 2;
}

.p-fv__visual,
.p-fv__visual img {
  display: block;
  width: 100%;
}

.p-fv__visual img { aspect-ratio: 2560 / 986; }

.p-fv__buttons {
  position: absolute;
  left: 33.36%;   /* 427 / 1280 */
  top: 52.33%;    /* ボタン上端 258 / FV高 493 */
  width: 61.875%; /* 792 / 1280 */
  display: flex;
  flex-direction: column;
  gap: 0.84375rem; /* 13.5px */
}

/* ==========================================================
   東京ガスの電気が選ばれる理由
   ========================================================== */
.p-reason {
  position: relative;
  display: flow-root; /* マージン相殺を止めてセクション高さを実測値どおりにする */
  z-index: 3;
  padding-bottom: 0.25rem;
  background: var(--c-white);
}

/* 上部の黄色バースト(雲抜き) : 1280px超でも両端を白く抜かないよう全幅で伸ばす */
.p-reason::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1280 / 284;
  background: url(/gas_power/ad/moving035d-assets/img/bg-burst-top-pc.webp) center top / 100% auto no-repeat;
  pointer-events: none;
}

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

.p-reason__title {
  padding-top: 7vw; /* バーストが全幅で拡縮するため見出しも追従させる */
  text-align: center;
  line-height: 1;
}

.p-reason__title img {
  width: 38.28125rem; /* 612.5px */
  max-width: 90%;
}

.p-reason__title-text {
  display: none;
}

/* --- Point ボックス --- */
.p-point {
  margin-top: 1.34375rem; /* 21.5px */
}

.p-point__item {
  position: relative;
  height: 7rem; /* 112px */
  padding: 1.375rem 1.25rem 0;
  border: 2px solid var(--c-blue);
  background: var(--c-white);
  text-align: center;
}

.p-point__item + .p-point__item {
  margin-top: 1.875rem; /* 30px */
}

.p-point__label {
  position: absolute;
  top: -1.1875rem; /* 19px */
  left: 0;
  line-height: 1;
}

.p-point__label img {
  display: block;
  width: 8.0625rem; /* 129px */
}

/* 以下のフォント指定は Figma 書き出し(shots/ref/figma-text.csv)の実値 */
.p-point__lead {
  margin-bottom: 0.8em;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.43; /* 20px */
  color: var(--c-blue);
}

.p-point__body {
  margin-top: 0.0625rem;
  font-size: 3rem; /* 48px */
  font-weight: 900;
  line-height: 0.67; /* 32px */
  color: var(--c-blue);
}

.p-point__body--red {
  color: var(--c-red);
}

/* Point.1「電気代の基本料金」だけ 24px。max()で10px下限を保証する */
.p-point__lead-in {
  font-size: max(0.625rem, 0.5em); /* 48px→24px */
  font-weight: 900;
}

/* Point.2「で」/ Point.3「より」「が」は 40px */
.p-point__small {
  font-size: 0.8333em; /* 48px→40px */
  font-weight: 900;
}

.p-point__strong {
  margin-left: 0.375rem;
  font-weight: 900;
  color: var(--c-red);
}

.p-point__sub {
  margin-top: 0.55rem;
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-blue);
}

/* 注記はデザインどおりボックス右上寄りに固定配置 */
.p-point__note {
  position: absolute;
  font-size: 0.625rem; /* 10px */
  font-weight: 400;
  line-height: 1;
  color: var(--c-blue);
}

.p-point__item:nth-child(1) .p-point__note { top: 1.9375rem; right: 8.25rem; }
.p-point__item:nth-child(2) .p-point__note { top: 2.2rem;    right: 7.3125rem; }
.p-point__item:nth-child(3) .p-point__note { top: 1.875rem;  right: 6.5rem; }

/* Point.3 のみ小見出しが左寄せ */
.p-point__lead--left {
  width: 22.6875rem; /* 363px */
  padding-left: 4.7rem;
  font-size: 0.625rem; /* 10px */
  line-height: 1.4;
  text-align: left;
}

.p-point__item:nth-child(3) .p-point__body {
  margin-top: 0.375rem;
}

.p-point__item:nth-child(3) .p-point__sub {
  padding-right: 5.6875rem; /* 91px */
  text-align: right;
}

/* Point.3 横のイラスト */
.p-reason__illust {
  position: absolute;
  right: -26.75%;
  bottom: -1.0625rem;
  width: 12.625rem;   /* 202px */
  line-height: 1;
  pointer-events: none;
}

/* CTA・注釈 */
.p-reason .l-inner--btn {
  margin-top: 1.125rem; /* 18px */
}

.p-reason .l-inner--note {
  margin-top: 1rem;
}

/* ==========================================================
   引越しの3ヶ月前から
   ========================================================== */
.p-step {
  position: relative;
  display: flow-root;
  z-index: 2;
  margin-top: -4.0625rem; /* -65px : デザインどおり注釈をバーストの白地に重ねる */
  padding-top: 17.5vw;    /* バーストの拡縮に追従 */
  background-color: var(--c-yellow-pale);
  background-image: url(/gas_power/ad/moving035d-assets/img/bg-burst-bottom-pc.webp), url(/gas_power/ad/moving035d-assets/img/bg-stripe-yellow.webp);
  background-position: center top, center top;
  background-size: 100% auto, 100% auto; /* 1280px超でも両端を白く抜かない */
  background-repeat: no-repeat, repeat-y;
}

.p-step__title {
  position: relative;
  display: flex;
  place-items: center;
  justify-content: center;
  height: 7.75rem; /* 124px */
  padding-inline: 1.25rem;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.p-step__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.25rem;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.25rem 1.5rem 0;
  border-color: var(--c-blue) transparent transparent;
}

.p-step__num {
  font-size: 2.25rem; /* 36px : 「ヶ月前」 */
  font-weight: 900;
  line-height: 1;
  color: var(--c-yellow-lemon);
  transform: translateY(-0.2em);
}

.p-step__num-lg {
  font-size: 1.3333em; /* 36px→48px : 「3」 */
}

.p-step__lead {
  margin-top: 2.5625rem; /* 41px */
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.5; /* 36px */
  letter-spacing: -0.04em;
  text-align: center;
}

.p-step__lead2 {
  margin-top: 0.875rem;
  font-size: 2.25rem; /* 36px */
  font-weight: 900;
  line-height: 0.89; /* 32px */
  text-align: center;
}

/* 「から」「できます！」だけ 32px / Bold */
.p-step__small {
  font-size: 0.8889em; /* 36px→32px */
  font-weight: 700;
}

.p-step__red { color: var(--c-red); }
.p-step__blue { color: var(--c-blue); }

.p-step__box {
  margin-top: 1.9375rem; /* 31px */
  margin-bottom: -2.875rem; /* -46px : ストライプ背景の下へはみ出す */
  padding-bottom: 2.9375rem; /* 47px */
  background: var(--c-cream);
}

.p-step__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.75rem;
  padding: 0.5rem 9rem;
}

.p-step__row--first {
  position: relative;
  height: 8.0625rem; /* 129px */
  background: var(--c-yellow-deep);
}

/* 黄色行の下向き三角(デザイン実測 幅68×高18px・中央) */
.p-step__row--first::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.125rem 2.125rem 0;
  border-color: var(--c-yellow-deep) transparent transparent;
}

.p-step__row--second {
  height: 5.375rem; /* 86px */
  padding-top: 3.5rem;
}

.p-step__illust {
  flex: none;
  line-height: 1;
}

.p-step__row--first .p-step__illust img { width: 8.3125rem; /* 133px */ }
.p-step__row--second .p-step__illust img { width: 8.1875rem; /* 131px */ }

.p-step__text {
  width: 23.5rem; /* 376px */
}

.p-step__heading {
  font-size: 2rem; /* 32px */
  font-weight: 900;
  line-height: 1; /* 32px */
  color: var(--c-blue-deep);
}

.p-step__desc {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.6; /* 32px */
  letter-spacing: -0.04em;
  margin-top: 0.3rem;
  white-space:nowrap; /* 「お申し込み」だけ折り返さない */
}

/* PCは「②引越し先のご住所」の直後に全角スペース1つ分あけて続ける */
.p-step__prep { margin-left: 1em; }

.p-step__desc--small {
  line-height: 1.2; /* 24px */
}

.p-step__box .c-note {
  margin-top: 2.1875rem; /* 35px */
  font-size: 0.625rem; /* 10px */
  line-height: 1.8; /* 18px */
  letter-spacing: -0.04em;
}

.c-btn-group--in-box {
  width: 44.625rem; /* 714px */
  max-width: 90%;
  margin: 0.75rem auto 0;
  gap: 1.0625rem; /* 17px */
}

/* ==========================================================
   東京ガスなら電気もガスも安心
   ========================================================== */
.p-reliable {
  position: relative;
  display: flow-root;
  padding-bottom: 2.625rem;
  background: var(--c-bg-blue);
}

.p-reliable::before {
  content: "";
  position: absolute;
  inset: 17rem auto auto 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 100%;
  /* 高さ固定。ビューポート幅が変わっても終わる位置を動かさない */
  height: 63.4375rem; /* 1015px */
  background: url(/gas_power/ad/moving035d-assets/img/bg-reliable-pc.webp) center top / cover no-repeat;
  pointer-events: none;
}

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

.p-reliable__title {
  position: relative;
  width: min(60.3125rem, 94%); /* 965px */
  margin: 6.3125rem auto 0;    /* 101px */
  aspect-ratio: 965 / 125;
  background: url(/gas_power/ad/moving035d-assets/img/ribbon-gold.webp) center top / 100% 100% no-repeat;
  text-align: center;
}

.p-reliable__title-text {
  position: absolute;
  left: 50%;
  top: 42.8%; /* 56 / 125 */
  translate: -50% -50%;
  white-space: nowrap;
  font-size: 2.5rem; /* 40px */
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--c-blue);
}

/* 「東京ガスなら」だけ Bold・字間0 */
.p-reliable__brand {
  font-weight: 700;
  letter-spacing: 0;
}

.p-reliable__lg { font-size: 1.2em; /* 40px→48px */ }

.p-reliable__red { color: var(--c-red); }

/* b の既定 bolder が 700 に対して 900 に合成されるので明示的に揃える */
.p-reliable__market b { font-weight: 700; }

.p-reliable__lead {
  margin-top: 2.1875rem; /* 35px */
  font-size: 3rem; /* 48px */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--c-blue);
}

.p-reliable__marker {
  padding-bottom: 0;
  border-bottom: 3px solid var(--c-red);
  font-weight: 700;
  color: var(--c-red);
}

/* --- 実績メダル --- */
/* 左右のキラキラ装飾(デザイン実測 173x99 / 左X90・右X1009・Y2741) */
.p-award::before,
.p-award::after {
  content: "";
  position: absolute;
  top: 1.3125rem; /* 21px */
  width: 10.8125rem; /* 173px */
  aspect-ratio: 346 / 198;
  background: center / contain no-repeat;
  pointer-events: none;
}

.p-award::before {
  left: 2.625rem; /* 42px */
  background-image: url(/gas_power/ad/moving035d-assets/img/deco-sparkle-01.webp);
}

.p-award::after {
  right: 3.375rem; /* 54px */
  background-image: url(/gas_power/ad/moving035d-assets/img/deco-sparkle-02.webp);
}

.p-award {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.625rem; /* 26px */
  margin-top: 3.375rem; /* 54px */
}

.p-award__item {
  flex: none;
  line-height: 1;
}

.p-award__item img {
  display: block;
  width: 16rem; /* 256px */
}

.p-award__item--medal img {
  width: 9.6875rem; /* 155px */
  margin-top: -0.125rem;
}

/* --- NPS --- */
.p-nps {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  height: 10.75rem; /* 172px : イラストは下にはみ出させる */
  margin-top: -0.4375rem;
}

/* 左右のイラストは高さに影響させない(下のボックスがデザインどおり食い込むため) */
.p-nps__illust {
  position: absolute;
  top: 0;
  line-height: 1;
  pointer-events: none;
}

.p-nps__illust--left { left: 2.375rem; }
.p-nps__illust--right { right: 1.4375rem; }

.p-nps__illust--left img { width: 11.5625rem; /* 185px */ }
.p-nps__illust--right img { width: 11.25rem; /* 180px */ }

.p-nps__text {
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.3125; /* 42px */
  color: var(--c-blue);
}

.p-nps__red {
  font-weight: 700;
  color: var(--c-red);
}

.p-nps__note {
  margin-left: -0.875rem;
  /* Figma実値は7.25pxだが、レギュレーションの下限に合わせて10px */
  font-size: 0.625rem;
  font-weight: 400;
  vertical-align: bottom;
  color: var(--c-text);
}

.p-nps__medal {
  flex: none;
  line-height: 1;
}

.p-nps__medal img { width: 12.875rem; /* 206px */ }

/* --- 市場連動型ではありません --- */
.p-reliable__market {
  position: relative; /* 注)5 の絶対配置の基準 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(42.25rem, 100%); /* 676px */
  height: 3.9375rem;          /* 63px */
  margin: 0.75rem auto 0;
  padding-inline: 1rem;
  background: var(--c-bg-lavender);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1; /* 24px */
  text-align: center;
  color: var(--c-blue); /* 「は、」は青(赤は .p-reliable__red のみ) */
}

.p-reliable__underline {
  border-bottom: 2px solid var(--c-blue);
  font-weight: 700;
  color: var(--c-blue);
}

.p-reliable__note {
  position: absolute;
  right: 2.5rem;
  top: 0.6rem;
  /* Figma実値は7.25pxだが、レギュレーションの下限に合わせて10px */
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--c-text);
}

.p-reliable__notes {
  width: 51rem; /* 816px : Figma実値 */
  max-width: 90%;
  margin-top: 1.125rem; /* 18px */
  margin-inline: auto;
}

.p-reliable .l-inner--btn {
  margin-top: 3.6875rem; /* 59px */
}

/* ==========================================================
   myTOKYOGAS
   ========================================================== */
.p-mytg {
  width: min(61.25rem, 94%); /* 980px */
  margin: 4.8125rem auto 0;  /* 77px */
}

.p-mytg__title {
  position: relative;
  z-index: 2;
  text-align: center;
  line-height: 1;
}

.p-mytg__title img {
  width: 55.25rem; /* 884px */
  max-width: 100%;
  aspect-ratio: 1768 / 155;
}

.p-mytg__box {
  display: flex;
  align-items: flex-end;
  height: 19.9375rem; /* 319px */
  margin-top: -2.09375rem; /* -33.5px : バナーが上辺に重なる */
  padding: 0 10.5rem 0 7.5rem; /* 右 168px / 左 120px */
  border: 4px solid var(--c-yellow-deep);
  border-radius: 1rem;
  background: var(--c-white);
}

/* リストは上端起点(X275 W462 / 罫線 Y3873・3939)。スマホ画像だけ下揃え */
.p-mytg__list {
  flex: none;
  align-self: flex-start;
  width: 28.875rem;    /* 462px */
  padding-top: 6.5rem; /* 104px */
}

.p-mytg__item {
  display: flex;
  align-items: center;
  height: 4.125rem; /* 66px */
  padding-top: 1.25rem;
  padding-left: 0.3125rem;
  border-bottom: 1px solid var(--c-blue);
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.333; /* 32px */
}

.p-mytg__screen {
  flex: none;
  margin-left: 1.3125rem; /* 21px */
  margin-right: -10.5rem; /* 右パディング内に配置 */
  line-height: 1;
}

.p-mytg__screen img {
  display: block;
  width: 12.5rem; /* 200px */
}

/* ==========================================================
   切り替え手続きは原則不要
   ========================================================== */
.p-easy {
  position: relative;
  display: flow-root;
  padding-top: 2.5625rem; /* 41px */
  padding-bottom: 0.5rem;
  background: var(--c-bg-blue);
}

.p-easy::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 100%;
  height: 31rem;
  background: url(/gas_power/ad/moving035d-assets/img/bg-room-blur-pc.webp) center center / cover no-repeat;
  /* cover だと素材のアルファのフェードが切れるので、CSS側で上下をぼかす */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent 100%
  );
  pointer-events: none;
}

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

.p-easy__title {
  margin-bottom: 0.8rem;
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.125; /* 36px */
  letter-spacing: -0.04em;
  text-align: center;
}

.p-easy__small { font-size: 0.75em; /* 32px→24px : 「の」 */ }

.p-easy__red {
  font-weight: 700;
  color: var(--c-red);
}

.p-easy__strong {
  font-size: 3rem; /* 48px */
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-red);
}

.p-easy__note {
  display: inline-block;
  margin-left: 0.125rem;
  /* Figma実値は7.25pxだが、レギュレーションの下限に合わせて10px */
  font-size: 0.625rem;
  font-weight: 400;
  vertical-align: super;
  color: var(--c-red);
  transform: translate(-2.5rem, -1.3125rem); /* -40px, -21px */
}

.p-easy__circles {
  margin-top: -0.3125rem;
  text-align: center;
  line-height: 1;
}

.p-easy__circles img {
  width: 50.4375rem; /* 807px */
  max-width: 100%;
  aspect-ratio: 1614 / 377;
}

.p-easy__lead {
  margin-top: 1.25rem;
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1; /* 24px */
  letter-spacing: -0.04em;
  text-align: center;
}

.p-easy .c-note {
  margin-top: 2rem; /* 32px */
}

.p-easy .l-inner--btn {
  margin-top: 2.4375rem; /* 39px */
}

/* ==========================================================
   よくあるご質問
   ========================================================== */
.p-faq {
  display: flow-root;
  padding-top: 1.4375rem; /* 23px */
  padding-bottom: 4.75rem;
  background: var(--c-bg-blue);
}

.p-faq__title {
  position: relative;
  width: min(var(--inner-faq), 90%);
  height: 4.4375rem; /* 71px */
  display: grid;
  place-items: center;
  margin: 0 auto 1.625rem; /* 26px */
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 3rem; /* 48px */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.p-faq__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  translate: -50% 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.125rem 1.375rem 0;
  border-color: var(--c-blue) transparent transparent;
}

/* --- Q&A --- */
.p-faq__item + .p-faq__item {
  margin-top: 1.34375rem; /* 21.5px */
}

.p-faq__q {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.p-faq__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.125rem 1.1875rem; /* 19px */
  background: var(--c-blue);
  color: var(--c-white);
  font-family: inherit;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}

.p-faq__icon {
  flex: none;
  line-height: 1;
}

/* Q/A アイコンは高さ基準で拡縮(Q 22:20 / A 20:20) */
.p-faq__icon img {
  width: auto;
  height: 0.75rem; /* 12px */
}

.p-faq__q-text {
  flex: 1 1 auto;
}

.p-faq__arrow {
  flex: none;
  line-height: 1;
  transition: rotate 0.3s;
  rotate: 180deg;
}

.p-faq__btn[aria-expanded="true"] .p-faq__arrow {
  rotate: 0deg;
}

.p-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--c-white);
  transition: grid-template-rows 0.3s ease;
}

.p-faq__panel.is-open {
  grid-template-rows: 1fr;
}

.p-faq__panel-inner {
  overflow: hidden;
}

.p-faq__a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 1.1875rem;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.4;
}

.p-faq__a--block {
  padding-bottom: 0;
}

.p-faq__red { color: var(--c-red); font-weight: 700; }

.p-faq__area {
  padding: 0 1.1875rem 0.375rem 2.9375rem;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.4;
}

.p-faq__area-item {
  position: relative;
  padding-left: 1rem;
}

.p-faq__area-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--c-text);
}

.p-faq__link {
  margin-left: 1.25rem;
  color: var(--c-blue);
  text-decoration: underline;
}

/* --- 規約アコーディオン --- */
.p-terms {
  margin-top: 1.5rem; /* 24px */
}

.p-terms__item + .p-terms__item {
  margin-top: 0.25rem;
}

.p-terms__q {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.p-terms__btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.5625rem; /* 41px */
  padding: 0.5rem 1.375rem;
  border: 1px solid var(--c-bg-lavender); /* #bec8ff : デザイン実測 */
  border-radius: 0; /* 開閉どちらでも直角 */
  background: var(--c-bg-blue);
  color: var(--c-blue);
  font-family: inherit;
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}

.p-terms__label {
  flex: 1 1 auto;
}

.p-terms__arrow {
  flex: none;
  line-height: 1;
  transition: rotate 0.3s;
  rotate: 180deg;
}

.p-terms__btn[aria-expanded="true"] .p-terms__arrow {
  rotate: 0deg;
}

.p-terms__panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--c-bg-blue); /* 本文もヘッダーと同色(デザイン実測 #f0f3ff) */
  transition: grid-template-rows 0.3s ease;
}

.p-terms__panel.is-open {
  grid-template-rows: 1fr;
  border: 1px solid var(--c-bg-lavender);
  border-top: none;
  border-radius: 0 0 1rem 1rem;
}

.p-terms__panel-inner {
  overflow: hidden;
}

.p-terms__text {
  padding: 0 1.375rem;
  font-size: 0.6875rem; /* 11px */
  font-weight: 400;
  line-height: 1.7;
}

.p-terms__text--indent {
  padding-left: 2.375rem;
  text-indent: -1rem;
}

.p-terms__panel-inner > *:first-child { padding-top: 0.125rem; }
.p-terms__panel-inner > *:last-child { padding-bottom: 0.25rem; }

.c-note--terms {
  padding: 0 1.375rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem; /* 11px */
  line-height: 1.7;
}

.c-note--terms .c-note__item {
  padding-left: 1.625rem;
  text-indent: -1.625rem;
}

.p-faq__foot {
  margin-top: 1.0625rem; /* 17px */
  font-size: 0.6875rem; /* 11px */
  font-weight: 400;
  line-height: 1.7;
}

/* ==========================================================
   お問い合わせ
   ========================================================== */
.p-contact {
  display: flow-root;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0.8125rem;
  background: var(--c-yellow);
}

.l-inner--contact {
  display: flex;
  gap: 1.5rem; /* 24px */
}

.p-contact__col {
  flex: 1 1 0;
  min-width: 0;
}

.p-contact__head {
  display: grid;
  place-items: center;
  height: 4.4375rem; /* 71px */
  padding-inline: 1rem;
  background: var(--c-bg-lavender-pale);
  color: var(--c-blue);
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.p-contact__web {
  margin-top: 3.25rem; /* 52px */
  font-size: 2rem; /* 32px */
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-blue);
  text-align: center;
}

.p-contact__web-link {
  color: var(--c-blue);
  text-decoration: underline;
}

/* 767〜1350px でのみ「日・祝日〜」の前で改行 */
.p-contact__hours-br {
  display: none;
}

.p-contact__hours {
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-blue);
  text-align: center;
}

.p-contact__device {
  margin-top: 1.9375rem; /* 31px */
  text-align: center;
  line-height: 1;
}

.p-contact__device img { width: 13.9375rem; /* 223px */ }

.p-contact__tel-block {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem; /* 20px */
}

.p-contact__tel-block--sub {
  align-items: center;
  gap: 1.875rem;
  margin-top: 1.6875rem; /* 27px */
}

.p-contact__tel-icon {
  flex: none;
  line-height: 1;
}

.p-contact__tel-icon img { width: 4.5rem; /* 72px */ }

.p-contact__tel-label {
  width: 10.625rem; /* 170px */
  margin: 0 auto 0 0; /* デザインどおり電話番号の左端に揃える */
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--c-blue);
  background: transparent; /* デザインは地の黄色が透ける */
  color: var(--c-blue);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-contact__tel-label--sub {
  flex: none;
  width: 18.625rem; /* 298px */
  margin: 0;
  padding-block: 0.4375rem;
}

.p-contact__tel--sub {
  flex: none;
  width: 15.875rem; /* 254px */
}

.p-contact__tel {
  margin-top: 0.875rem;
  text-align: center;
}

.p-contact__tel--sub {
  margin-top: 0;
}

.p-contact__tel--sub .p-contact__tel-link {
  font-size: 2.3rem;
}

.p-contact__tel-link {
  font-size: 3rem; /* 48px */
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-blue);
  text-decoration: underline;
}

.p-contact__web + .p-contact__hours {
  margin-top: 0.1875rem;
}

.p-contact__col .p-contact__hours + .c-note--contact {
  margin-top: 0.375rem;
}

.c-note--contact {
  color: var(--c-text);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  line-height: 1.45;
}

/* デザインは折り返し行のぶら下げなし(2行目も左端揃え) */
.c-note--contact .c-note__item {
  padding-left: 0;
  text-indent: 0;
}

.p-contact__tel-block--sub + .p-contact__hours {
  margin-top: 1.375rem; /* 22px */
}

/* ==========================================================
   追従CTA
   ========================================================== */
.p-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 0.5rem 0 0.75rem;
  background: var(--c-white);
  box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.12);
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.4s, translate 0.4s;
}

.p-float.is-visible {
  opacity: 1;
  translate: 0 0;
}

.p-float__inner {
  width: 90%;
  max-width: 80rem;
  margin-inline: auto;
}

.p-float__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem; /* 22px */
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-blue);
  text-align: center;
}

.p-float__lead::before,
.p-float__lead::after {
  content: "";
  width: 1.125rem;
  height: 1.625rem;
  background: currentColor;
  clip-path: polygon(0 0, 22% 0, 100% 100%, 78% 100%);
}

.p-float__lead::before { margin-right: 0.375rem; }
.p-float__lead::after {
  margin-left: 0.375rem;
  clip-path: polygon(78% 0, 100% 0, 22% 100%, 0 100%);
}

.p-float__num {
  margin-right: 0.125rem;
  font-size: 1.75rem; /* 28px */
  font-weight: 900;
  color: var(--c-red);
}

.p-float__buttons {
  display: flex;
  justify-content: center;
  gap: 2.25rem;
  margin-top: 0.5rem;
}

.p-float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.375rem; /* 550px */
  max-width: 42%;
  padding: 0.5rem 1rem;
  border: 0.2rem solid var(--c-white);
  border-radius: 62.4375rem;
  color: var(--c-white);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: opacity 0.3s;
}

.p-float__btn:hover {
  color: var(--c-white);
  text-decoration: none;
  opacity: 0.85;
}

.p-float__btn--new {
  background: var(--c-red);
  box-shadow: 0 0.1875rem 0.25rem rgba(0, 0, 0, 0.28);
}

.p-float__btn--current {
  background: var(--c-blue);
  box-shadow: 0 0.1875rem 0.25rem rgba(0, 0, 0, 0.28);
}

/* ==========================================================
   フェードイン(スクロール表示)
   ========================================================== */
.js-fade {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 0.7s ease, translate 0.7s ease;
}

.js-fade.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
  .p-float {
    transition: none;
  }
}

/* ==========================================================
   768〜1380px : バーストを上のセクションに重ねない
   ========================================================== */
@media (min-width: 768px) and (max-width: 1380px) {
  .p-step {
    margin-top: 0;
  }
}

/* ==========================================================
   PCデザイン幅未満(768〜1229px): はみ出し防止の調整
   ========================================================== */
@media (min-width: 768px) and (max-width: 1229px) {
  .p-reason__illust {
    right: -3.3rem;
    bottom: -1rem;
    width: 7.5rem;
  }

  /* 2行に折り返すため高さ固定を解除 */
  .p-reliable__market {
    height: auto;
    min-height: 3.9375rem;
    padding-block: 0.625rem;
  }

  /* myTOKYOGASは固定幅だと収まらないので可変にする */
  .p-mytg__box { padding-inline: 2.5rem; }
  .p-mytg__list { flex: 1 1 auto; width: auto; }
  .p-mytg__screen { margin-right: 0; }
}

@media (min-width: 768px) and (max-width: 1350px) {
  /* 「ナビダイヤルをご使用になれない場合」と番号を縦積みにする */
  .p-contact__tel-block--sub {
    flex-direction: column;
    gap: 0.5rem;
  }

  .p-contact__tel-label--sub {
    width: 100%;
    max-width: 18.625rem;
    margin-inline: auto;
  }

  .p-contact__tel--sub {
    width: auto;
  }

  .p-contact__hours-br {
    display: block;
  }
}

/* ==========================================================
   タブレット (768〜1023px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-reliable__title-text { font-size: 1.75rem; }

  .p-award {
    gap: 1rem;
  }
  .p-award__item img { width: 13rem; }
  .p-award__item--medal img { width: 8rem; }

  .p-nps {
    gap: 1.25rem;
  }
  .p-nps__illust--left img,
  .p-nps__illust--right img { width: 7.5rem; }
  .p-nps__text { font-size: 1.375rem; }
  .p-nps__medal img { width: 10rem; }

  .p-reliable__market { font-size: 1.125rem; }

  .p-mytg__item { font-size: 1.25rem; }

  .p-easy__circles img { width: 100%; }

  .p-contact__tel-link { font-size: 2.25rem; }
  .p-contact__tel-label--sub { width: 15rem; }
  .p-contact__head { font-size: 1.375rem; }
  .p-contact__web { font-size: 1.625rem; }
}

/* ==========================================================
   1024〜1350px : 装飾は消さず、中央コンテンツに重ならない幅まで縮める
   中央のかたまりは NPS=598px / 実績メダル=719px 固定なので、
   その左右に残る余白から必要マージンを引いた値を上限にする
   ========================================================== */
@media (min-width: 1024px) and (max-width: 1350px) {
  .p-nps__illust--left img,
  .p-nps__illust--right img {
    width: 100%;
  }

  /* イラストは .p-nps より下にはみ出して市場連動型の帯(676px)に当たるので、
     帯の外側〜画面端までを使えるように内側の辺を帯に固定する。
     53.94% = 50% + 3.94%(インナー92.7%の外側にある画面端までの余白) */
  .p-nps {
    --deco: min(11.25rem, calc(53.94% - 24.375rem));
  }

  .p-nps__illust--left {
    left: auto;
    right: calc(50% + 23.125rem); /* 帯の左端から32px外 */
    width: calc(var(--deco) * 1.0278); /* 左右をデザインと同じ比率(185:180)で縮める */
  }

  .p-nps__illust--right {
    left: calc(50% + 24.375rem); /* 帯の右端から52px外 */
    right: auto;
    width: var(--deco);
  }

  .p-award::before {
    width: min(10.8125rem, calc((100% - 44.9375rem) / 2 - 3.25rem));
  }

  .p-award::after {
    width: min(10.8125rem, calc((100% - 44.9375rem) / 2 - 3.75rem));
  }
}

/* 〜1023px : 縮めても収まらないため非表示 */
@media (max-width: 1023px) {
  .p-nps__illust,
  .p-award::before,
  .p-award::after {
    display: none;
  }
}

/* ==========================================================
   768〜900px : Point.3 の小見出し・注記をインナー幅に追従させる
   ========================================================== */
@media (min-width: 768px) and (max-width: 900px) {
  .p-point__lead--left {
    padding-left: calc(50% - 18.5rem);
  }

  .p-point__item:nth-child(3) .p-point__sub {
    padding-right: calc(50% - 18rem);
  }

  .p-step__title { font-size: 1.7rem; }

  .p-step__lead2 { font-size: 2.1rem; }

  .p-step__row { padding: 0.5rem 12%; }

  .p-step__desc { white-space: nowrap; }

  .p-reliable__lead { font-size: 2.7rem; }

  .p-easy__lead { font-size: 1.3rem; }
}

/* ==========================================================
   SP (〜767px)  ※ SPデザイン 393px 基準
   ========================================================== */
@media (max-width: 767px) {
  /* --- SP可変フォント -------------------------------------------------
     393pxデザインの実測pxを 320〜767px で「等倍」に可変させる clamp 式。
     余白・画像もすべて vw(等倍)なので、フォントも同じ比率で連動する。
     ・393px でちょうどデザイン値になる
     ・下限 rem は 10px を下回らない(レギュレーション)
     生成: node scripts/sp-fluid.mjs --slope=1 <px>
     ------------------------------------------------------------------- */
  .p-lp,
  .p-float {
    --fs-10: clamp(0.625rem, 2.5445vw, 1.2198rem);
    --fs-11: clamp(0.625rem, 2.799vw, 1.3418rem);
    --fs-12: clamp(0.625rem, 3.0534vw, 1.4637rem);
    --fs-13: clamp(0.6616rem, 3.3079vw, 1.5857rem);
    --fs-14: clamp(0.7125rem, 3.5623vw, 1.7077rem);
    --fs-15: clamp(0.7634rem, 3.8168vw, 1.8297rem);
    --fs-16: clamp(0.8142rem, 4.0712vw, 1.9517rem);
    --fs-17: clamp(0.8651rem, 4.3257vw, 2.0736rem);
    --fs-18: clamp(0.916rem, 4.5802vw, 2.1956rem);
    --fs-19: clamp(0.9669rem, 4.8346vw, 2.3176rem);
    --fs-20: clamp(1.0178rem, 5.0891vw, 2.4396rem);
    --fs-22: clamp(1.1196rem, 5.598vw, 2.6835rem);
    --fs-24: clamp(1.2214rem, 6.1069vw, 2.9275rem);
    --fs-26: clamp(1.3232rem, 6.6158vw, 3.1714rem);
    --fs-27: clamp(1.374rem, 6.8702vw, 3.2934rem);
    --fs-28: clamp(1.4249rem, 7.1247vw, 3.4154rem);
    --fs-30: clamp(1.5267rem, 7.6336vw, 3.6594rem);
    --fs-34: clamp(1.7303rem, 8.6514vw, 4.1473rem);
    --fs-36: clamp(1.8321rem, 9.1603vw, 4.3912rem);
  }

  .l-inner,
  .l-inner--reason,
  .l-inner--btn,
  .l-inner--step,
  .l-inner--faq,
  .l-inner--note,
  .l-inner--reliable,
  .l-inner--easy,
  .l-inner--contact {
    width: 91.55%; /* 348 / 393 */
    max-width: none;
  }

  /* --- SP用素材は縦横比が違うので上書き(CLS対策) --- */
  .p-fv__visual img { aspect-ratio: 1179 / 1986; }
  .p-fv__buttons .c-btn img { aspect-ratio: 1044 / 215; }
  .c-btn-group .c-btn img { aspect-ratio: 1044 / 158; }
  .p-mytg__title img { aspect-ratio: 672 / 235; }
  .p-easy__circles img { aspect-ratio: 840 / 851; }

  /* --- 共通コンポーネントもSPでは等倍(vw)にする --- */
  .c-btn-group { gap: 2.799vw; /* 11px@393 */ }

  .c-btn img {
    filter: drop-shadow(0 0.509vw 0.763vw rgba(0, 0, 0, 0.3));
  }

  .c-note-acc { margin-top: 2.036vw; }
  .c-note + .c-note-acc { margin-top: 3.816vw; }
  .c-note-acc__inner > .c-note { padding-top: 1.018vw; }

  .c-note__label { width: 10.178vw; /* 注釈の字下げ幅と揃える */ }

  .c-note--terms { margin-top: 2.036vw; }
  .c-note--terms .c-note__item {
    padding-left: 6.616vw;
    text-indent: -6.616vw;
  }

  .p-faq__area-item { padding-left: 4.071vw; }
  .p-faq__area-item::before {
    width: 1.272vw;
    height: 1.272vw;
  }

  .p-terms__panel-inner > *:first-child { padding-top: 0.509vw; }
  .p-terms__panel-inner > *:last-child { padding-bottom: 1.018vw; }

  .p-contact__tel-label { padding: 0.254vw 2.036vw; }
  .p-contact__tel-label--sub { padding-block: 1.781vw; }

  .js-fade { translate: 0 5.089vw; }

  /* --- FV : ボタンはFV画像の下部余白に重ねる(SPデザイン実測) --- */
  .p-fv__buttons {
    left: 5.725%;  /* (393-348)/2 = 22.5px */
    top: 70.24%;    /* ボタン上端 465 / FV高 662 */
    width: 88.55%; /* 348 / 393 */
    gap: 2.799vw;  /* 11px@393 */
  }

  /* --- 選ばれる理由 --- */
  .p-reason {
    padding-bottom: 5.089vw;
  }

  .p-reason::before {
    inset: 0 auto auto 50%;
    max-width: none;
    aspect-ratio: 393 / 284;
    background-image: url(/gas_power/ad/moving035d-assets/img/bg-burst-top-sp.webp);
  }

  .p-reason__title {
    padding-top: 8.651vw; /* 34px@393 */
  }

  .p-reason__title-img {
    display: none;
  }

  /* SPカンプもPC同様の混植(東京ガス/電気=36px・他=30px)、行送り46px */
  .p-reason__title-text {
    display: block;
    font-size: var(--fs-30);
    font-weight: 900;
    line-height: 11.705vw; /* 46px@393 */
    color: var(--c-blue);
    -webkit-text-stroke: 1.018vw var(--c-white);
    paint-order: stroke fill;
  }

  .p-reason__title-lg { font-size: 1.2em; /* 30px→36px */ }

  .p-reason__title-red { color: var(--c-red); font-weight: 900; }

  .p-point {
    margin-top: 5.089vw; /* 20px@393 */
  }

  .p-point__item {
    /* カンプは3枚とも高さ112px・大見出しが枠いっぱいまで使う */
    height: 28.499vw;
    padding: 6.135vw 0 0;
  }

  .p-point__item + .p-point__item {
    margin-top: 7.125vw;
  }

  .p-point__label {
    top: -3.562vw;
    left: 3.053vw;
  }

  .p-point__label img { width: 25.827vw; /* 101.5px@393 */ }

  .p-point__lead {
    margin-bottom: 5.166vw; /* 本文までの間隔 20.3px@393 */
    font-size: var(--fs-11);
  }

  /* Point.3 の小見出しは左寄せ(カンプ実測 枠内側から1.5px) */
  .p-point__lead--left {
    width: auto;
    padding-left: 3.382vw;
    font-size: var(--fs-11);
    text-align: left;
  }

  /* 注記はカンプ実測位置に絶対配置(右端は枠から4.5px) */
  .p-point__note {
    margin-left: 0;
    right: 1.145vw;
  }

  .p-point__item:nth-child(1) .p-point__note { top: 11.832vw; right: 10.145vw; }
  .p-point__item:nth-child(2) .p-point__note { top: 11.832vw; right: 1.145vw; }
  .p-point__item:nth-child(3) .p-point__note { top: 7.125vw;  right: 1.145vw; }

  .p-point__body,
  .p-point__body--mixed {
    font-size: var(--fs-26);
    letter-spacing: 0;
  }

  /* Point.3 は 小見出し→本文→補足 が詰まる */
  .p-point__item:nth-child(3) .p-point__lead {
    margin-bottom: 1.221vw;
  }

  .p-point__item:nth-child(3) .p-point__body {
    margin-top: 0;
    white-space: nowrap; /* 赤字は必ず1行 */
  }

  .p-point__small { font-size: 0.65em; }
  .p-point__body--mixed .p-point__small { font-size: 0.78em; }

  .p-point__item:nth-child(3) .p-point__sub {
    padding-right: 9.145vw;
    text-align: right;
  }

  .p-point__sub {
    margin-top: 2.112vw; /* 8.3px@393 */
    font-size: var(--fs-10);
  }

  .p-reason__illust {
    display: none;
  }

  .p-reason .l-inner--btn {
    margin-top: 10.178vw;
  }

  .p-reason .l-inner--note {
    margin-top: 5.089vw;
  }

  /* --- 3ヶ月前 --- */
  .p-step {
    margin-top: 0;
    /* カンプ実測: バースト上端1735 → 青帯上端1765 = 30px */
    padding-top: 7.634vw;
    padding-bottom: 6.107vw;
    background-color: var(--c-white);
    /* SP専用のバースト素材(高さ126px@393) */
    background-image: url(/gas_power/ad/moving035d-assets/img/bg-burst-step-sp.webp);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  /* カンプ実測: 帯98px / 行送り28px / 基本20px・「ヶ月前」36px・「3」48px */
  .p-step__title {
    display: block;
    height: auto;
    padding: 5.344vw 3.053vw;
    font-size: var(--fs-20);
    line-height: 7.125vw; /* 28px@393 */
  }

  .p-step__title::after {
    bottom: -3.7vw;
    border-width: 4.326vw 4.58vw 0; /* 17×36px@393 */
  }

  .p-step__num {
    font-size: var(--fs-36);
  }

  /* カンプ実測(幅基準): lead=14px / lead2=24px・「から」「できます！」=0.8889em */
  .p-step__lead {
    margin-top: 9.924vw;
    font-size: var(--fs-14);
  }

  .p-step__lead2 {
    margin-top: 1.781vw;
    font-size: var(--fs-24);
    line-height: 8.142vw; /* 32px@393 */
  }

  .p-step__box {
    margin-top: 5.852vw;
    margin-bottom: 0;
    padding-bottom: 5.089vw;
  }

  .p-step__row {
    gap: 3.053vw;
    padding: 3.053vw;
  }

  .p-step__row--first {
    height: 32.824vw; /* 129px@393 */
  }

  .p-step__row--second {
    height: auto;
    padding-top: 8.906vw; /* 三角(18px)と重ならない位置まで下げる */
  }

  /* SPカンプ実測 幅40×高18px */
  .p-step__row--first::after {
    bottom: -4vw;
    border-width: 4.58vw 5.089vw 0;
  }

  /* PC側が詳細度で勝つため明示的に等倍化する */
  .p-step__box .c-note {
    margin-top: 0; /* 35px@393 */
    font-size: var(--fs-10);
  }

  .p-step__row--first .p-step__illust img { width: 25.445vw; /* 100px@393 */ }
  .p-step__row--second .p-step__illust img { width: 20.356vw; /* 80px@393 */ }

  .p-step__text { width: auto; }

  .p-step__heading { font-size: var(--fs-20); }
  .p-step__desc { font-size: var(--fs-16); }
  .p-step__desc--small { font-size: var(--fs-15);padding-left: 8vw;
        padding-top: 2vw;
        line-height: 1.5;white-space:inherit; }

  .p-step__prep {
    display: block;
    margin-left: 0;
  }

  .c-btn-group--in-box {
    width: 90%;
    max-width: none;
  }

  /* --- 安心 --- */
  .p-reliable {
    padding-bottom: 10.178vw;
    background: var(--c-white);
  }

  .p-reliable::before {
    inset: 13.74vw auto auto 50%;
    max-width: none;
    height: 122.9vw; /* 483px@393 : SP素材の等倍高さ */
    background-image: url(/gas_power/ad/moving035d-assets/img/bg-reliable-sp.webp);
  }

  .p-reliable__title {
        width: 94.55%;
        margin-top: 8.321vw;
    aspect-ratio: 348 / 45;
  }

  .p-reliable__title-text {
    top: 41%;
    font-size: var(--fs-19);
  }

  .p-reliable__lead {
    margin-top: 3.089vw;
    font-size: var(--fs-18);
  }

  .p-reliable__marker {
    border-bottom-width: 2px;
  }

  .p-award {
    flex-wrap: wrap;
    gap: 0 4.071vw;
    margin-top: 2.545vw;
  }

  .p-award__item {
    flex: 0 0 calc(50% - 2.036vw);
  }

  .p-award__item img { width: 100%; }

  .p-award__item--medal {
    flex-basis: 100%;
    text-align: center;
  }

  .p-award__item--medal img {
    width: 35.623vw; /* 140px@393 */
    margin: -2.036vw auto 0;
  }

  .p-nps {
    flex-wrap: wrap;
    align-items: center;
    gap: 2.036vw;
    height: auto;
    margin-top: 3.053vw;
  }

  .p-nps__illust { display: none; }

  .p-nps__text {
    flex: 1 1 auto;
    font-size: var(--fs-17);
            line-height: 1.5;
  }

  .p-nps__medal img { width: 30.025vw; /* 118px@393 */ }

  .p-reliable__market {
    height: auto;
    margin-top: 4.071vw;
    /* カンプ実測: 帯 337x63 / 1行目の墨 上から12px / 行の送り22px */
    width: 85.751vw; /* 337px@393 */
    margin-inline: auto;
    padding: 2.545vw 2.036vw 2.545vw;
    font-size: var(--fs-16);
    display: grid;
    row-gap: 1.527vw; /* 6px@393 */
  }

  /* カンプ実測: SPは下線側だけ1段大きい(下線幅286px = 16文字 x 18px) */
  .p-reliable__underline {
    font-size: var(--fs-18);
    padding-bottom: 0.509vw;        /* 2px@393: 墨から下線までの空き */
    border-bottom-width: 0.254vw;   /* 1px@393 */
  }

  /* SPは2行組みなので、PC用の全角スペースは行として数えない */
  .p-reliable__space { display: none; }

  .p-reliable__notes {
    margin-top: 4.58vw;
  }

  .p-nps__note{
    margin-left: -0.3rem;
  }

  /* SPデザインの注釈は10px相当 */
  .c-note,
  .c-note-acc__btn {
    font-size: var(--fs-10);
    line-height: 1.5;
  }

  .c-note__item--indent {
    padding-left: 10.178vw;
    text-indent: -10.178vw;
  }

  .p-reliable .l-inner--btn {
    margin-top: 6.107vw;
  }

  /* --- myTOKYOGAS --- */
  .p-mytg {
    width: 88.55%;
    margin-top: 10.178vw;
  }

  .p-mytg__title img { width: 90%; }

  .p-mytg__box {
    height: auto;
    gap: 3.053vw;
    margin-top: -3.053vw;
    padding: 6.107vw 3.053vw 0;
    border-width: 2px;
    border-radius: 3.053vw;
  }

  .p-mytg__list {
        flex: 1 1 auto;
        align-self: auto;
        width: auto;
        padding-top: 0;
        padding-bottom: 11.125vw;
        gap: 9vw;
        display: grid;
  }

  .p-mytg__item {
    height: auto;
    padding: 2.036vw 0 2.545vw;
    font-size: var(--fs-15);
  }

  .p-mytg__screen {
    margin-inline: 0;
  }

  .p-mytg__screen img { width: 35.623vw; /* 140px@393 */ }

  /* --- 原則不要 --- */
  .p-easy {
    padding-top: 10.178vw;
    padding-bottom: 8.142vw;
    background: var(--c-white);
  }

  .p-easy::before {
    max-width: none;
    height: 191.94vw; /* 719px@393 : SP素材の等倍高さ */
    background-image: url(/gas_power/ad/moving035d-assets/img/bg-room-blur-sp.webp);
  }

  .p-easy__title {
    font-size: var(--fs-26);
    line-height: 1.4;
  }

  .p-easy__small {
    font-size: 1em;
}

.p-easy__title br{
  display: none;
}

  .p-easy__strong { font-size: var(--fs-36);margin-top: 1.018vw;display: inline-block;}

  .p-easy__note{
        transform: translate(-1.5rem, -1.3125rem);
  }
  .p-easy__title .u-phrase { display: block; }

  .p-easy__circles {
    margin-top: 4.071vw;
  }

  .p-easy__circles img { width: 71.247vw; /* 280px@393 */ }

  .p-easy__lead {
    margin-top: 3.053vw;
    font-size: var(--fs-16);
            line-height: 1.5;
  }

  .p-easy__red {
    font-size: 1.3em;
}

  .p-easy .c-note { margin-top: 3.053vw; }

  .p-easy .l-inner--btn { margin-top: 6.107vw; }

  /* --- FAQ --- */
  .p-faq {
    padding-top: 10.178vw;
    padding-bottom: 10.321vw;
    background: var(--c-bg-lavender);
  }

  .p-faq__title {
    width: 91.55%;
    height: auto;
    margin-bottom: 7.125vw;
    padding: 3.545vw 4.071vw;
    font-size: var(--fs-20);
  }

  .p-faq__title::after {
    bottom: -2.562vw;
    border-width: 3.562vw 4.071vw 0;
  }

  .p-faq__item + .p-faq__item { margin-top: 5.089vw; }

  .p-faq__btn {
    padding: 0.509vw 2.545vw;
    font-size: var(--fs-11);
  }

  .p-faq__a {
    padding: 1.018vw 2.545vw;
    font-size: var(--fs-11);
  }

  .p-faq__icon img { height: var(--fs-10); }

  .p-faq__area {
    padding: 0 2.545vw 1.527vw 7.125vw;
    font-size: var(--fs-11);
  }

  .p-faq__link { margin-left: 3.053vw; }

  /* SPデザインでは規約アコーディオンは枠線・白背景なし */
  .p-terms { margin-top: 6.107vw; }

  .p-terms__item + .p-terms__item { margin-top: 4.125vw; }

  .p-terms__btn {
    min-height: 0;
    padding: 1.527vw 3.053vw;
    border: none;
    background: transparent;
    font-size: var(--fs-12);
  }

  .p-terms__panel,
  .p-terms__panel.is-open {
    border: none;
    background: transparent;
  }

  .p-terms__text,
  .c-note--terms {
    padding-inline: 3.053vw;
    font-size: var(--fs-12);
  }

  .p-faq__foot {
    margin-top: 9.16vw;
    font-size: var(--fs-12);
  }

  /* --- お問い合わせ --- */
  .p-contact {
    padding-top: 5.089vw;
    padding-bottom: 5.089vw;
  }

  .l-inner--contact {
    flex-direction: column;
    gap: 7.125vw;
  }

  .p-contact__head {
    height: auto;
    padding: 2.036vw 4.071vw;
    font-size: var(--fs-18);
  }

  .p-contact__web {
    margin-top: 5.089vw;
    font-size: var(--fs-22);
  }

  .p-contact__hours { font-size: var(--fs-12); }

  .p-contact__device { margin-top: 3.053vw; }

  .p-contact__device img { width: 35.623vw; /* 140px@393 */ }

  .p-contact__tel-block {
    flex-direction: column;
    gap: 1.018vw;
    margin-top: 3.053vw;
    align-items: center;
  }

  .p-contact__tel-block--sub {
    gap: 1.018vw;
    margin-top: 4.071vw;
  }

  .p-contact__tel-icon { display: none; }

  .p-contact__tel { margin-top: 1.018vw; }

  .p-contact__tel-link { font-size: var(--fs-36); }

  .p-contact__tel--sub {
    width: 100%;
  }

  .p-contact__tel--sub .p-contact__tel-link { font-size: var(--fs-30); }

  .p-contact__tel-label {
    width: 38.168vw; /* 150px@393 */
    font-size: var(--fs-12);
    margin-inline: auto;
  }

  .p-contact__tel-label--sub {
    width: 100%;
    max-width: 61.069vw; /* 240px@393 */
    margin-inline: auto;
    font-size: var(--fs-11);
  }

  .p-contact__tel-block--sub + .p-contact__hours { margin-top: 3.053vw; }

  .c-note--contact { font-size: var(--fs-11); }

  .p-contact__col .p-contact__hours + .c-note--contact { margin-top: 3.053vw; }

  /* --- 追従CTA --- */
  .p-float {
    padding: 1.527vw 0 2.036vw;
  }

  .p-float__inner { width: 94%; }

  .p-float__lead {
    font-size: var(--fs-16);
  }

  .p-float__lead::before,
  .p-float__lead::after {
    width: 3.053vw;
    height: 4.58vw;
  }

  .p-float__num { font-size: var(--fs-22); }

  .p-float__buttons {
    gap: 2.036vw;
    margin-top: 1.527vw;
  }

  .p-float__btn {
    flex: 1 1 0;
    flex-direction: column; /* 「〜で」/「申し込む」を2行に */
    max-width: none;
    padding: 1.527vw 2.036vw;
    font-size: var(--fs-13);
  }

  .p-float__btn-sub { display: block; }

  /* 追従CTA分の余白(最下部コンテンツが隠れないように)。バーも等倍なので比例させる */
  body:has(.p-float.is-visible) {
    padding-bottom: clamp(4.4756rem, 22.392vw, 10.7292rem); /* 88px@393 */
  }
}

/* 小型SP(〜374px)用の個別指定は不要。
   フォント・余白とも等倍で縮むため、320pxでも比率が崩れない。
   (10px下限に達するのは注釈類のみ) */

/* === 全ページ共通の微調整(css-tweaks.mjs) === */
@media (max-width: 767px) {
  /* 折り返す注釈(.c-note--center の2件)は、2行目を「注)N」の後ろにぶら下げる。
     ぶら下げ幅はカンプ実測27px(3emだと2行目が1〜2px溢れて「ます。」が落ちる)。
     1行で収まる .c-note__item--center(注)1 都合により終了の場合あり)は対象外。 */
  .c-note--center .c-note__item {
    display: inline-block;
    text-align: left;
    padding-left: 2.7em;
    text-indent: -2.7em;
  }

  /* 3ヶ月前の注釈はブロックごと中央(カンプ実測: 左端x60 / 2行目x83) */
  .p-step .c-note--center {
    text-align: center;
  }

  /* 原則不要の注釈は左端そろえ(カンプ実測: 左端x23 / 2行目x50) */
  .p-easy .c-note--center {
    text-align: left;
  }

  /* myTOKYOGASの吹き出しはカードにもっと深くかぶる。
     カンプ実測(吹き出し幅336px)を実装の348px換算にすると
       カード上端 = 吹き出し上端 +44.5px / 1項目目 = +149px
     かぶるぶんカード内の上余白も広げる */
  .p-mytg__box {
    margin-top: -19.72vw;  /* -77.5px@393 */
    padding-top: 24.6vw;   /* 96.7px@393 */
  }

  .p-mytg__title img {
    width: 90%;
  }

  /* 実績メダル上2つの段落ち対策。
     元は flex-basis: calc(50% - 2.036vw) / gap: 4.071vw で、%とvwが混在したうえ
     「2つ分 + gap」がコンテナ幅とほぼ同値だったため、丸め方の違うブラウザ
     (Firefox等)で折り返していた。単位をコンテナ基準の%に揃え、
     合計99.4%に収めて0.6%の余裕を持たせる */
  .p-award {
    column-gap: 4.4%;
  }

  .p-award__item {
    flex: 0 0 47.5%;
  }

  .p-award__item--medal {
    flex-basis: 100%;
  }
}

/* myTOKYOGASの箱は1230px以上だけ中身が中央寄りに縮む作りだったので、
   1229px以下と同じ「左右いっぱい」に揃える(035系のみ該当) */
@media (min-width: 768px) {
  .p-mytg__list {
    flex: 1 1 auto;
    width: auto;
  }

  .p-mytg__screen {
    margin-right: 0;
  }
}

@media (min-width: 861px) {
  .p-mytg__box {
    padding-inline: 14%;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  .p-mytg__box {
    padding-inline: 11%;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .p-step__row--second {
    padding-top: 2.5rem;
  }
}

/* 393px(SPカンプ幅)未満は10px下限のせいで改行位置を保てない。
   強制改行をやめて素直に流し、行の長さを揃えて最終行の取り残しをなくす */
@media (max-width: 392px) {
  .p-easy .c-note--center br {
    display: none;
  }
}