@charset "utf-8";
/* =========================================================================
   数字だけ Arial（日本語と英単語は Noto Sans JP のまま）
   unicode-range を 0-9 とカンマ・小数点・￥ に限定しているので、
   'RelifeNum' をフォント指定の先頭に置くだけで数字だけ差し替わる。
   Arial は Windows / Mac / iPhone に内蔵。Android のみ Roboto に落ちる。
   ========================================================================= */
@font-face{
  font-family:'RelifeNum';
  font-style:normal;
  font-weight:100 600;
  src:local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica'),
      local('Liberation Sans'), local('Roboto');
  unicode-range:U+0030-0039, U+002C, U+002E, U+00A5, U+FF10-FF19, U+FFE5;
}
@font-face{
  font-family:'RelifeNum';
  font-style:normal;
  font-weight:601 900;
  src:local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'),
      local('HelveticaNeue-Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'),
      local('Roboto Bold'), local('Arial'), local('ArialMT');
  unicode-range:U+0030-0039, U+002C, U+002E, U+00A5, U+FF10-FF19, U+FFE5;
}
/* =========================================================================
   ヒーロー / 料金バナー のHTML版（2026-08-05）
   旧・焼き込み画像を置き換えたもの。金額は functions.php の
   relife_price_config() 一箇所で管理し、ここは見た目だけを持つ。
   サイズはすべてコンテナ幅基準(cqw)なので、画像と同じように拡大縮小する。
   ========================================================================= */

:root{
  --shaken-blue:   #2369ae;
  --shaken-blue-d: #17538e;
  --shaken-navy:   #2d318f;
  --shaken-orange: #f7931e;
  --shaken-orange-d:#e6652d;
  --shaken-gold:   #f4b20f;
  --shaken-red:    #e50012;
  --shaken-stroke: #ee5a24;
}

/* ---------- 共通 ----------
   reset.css が p/div/span 等に直接 font-family を当てているため、
   コンテナだけに指定しても効かない。子孫セレクタまで明示する。 */
.hero, .hero *,
.pbnr, .pbnr *,
.telbar, .telbar *{
  font-family:'RelifeNum','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

/* =========================================================================
   ヒーロー（PC）
   ========================================================================= */
#section_mv{ overflow:hidden; }

.hero--pc{
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  aspect-ratio:2048 / 910;
  container-type:inline-size;
  background:#fff;
}

.hero__stage{
  position:absolute;
  inset:0 0 22.9% 0;
  overflow:hidden;
}

.hero__photo{
  position:absolute;
  top:0;
  height:100%;
  object-fit:cover;
  display:block;
}
/* 3枚とも「見た目の幅」を33.1%で統一（白い区切りは0.35%）。
   斜めは上端が下端より9.1%右。要素幅も揃えて写真の拡大率を合わせる。 */
.hero__photo--1{ left:0;     width:42.5%; clip-path:polygon(0 0, 88.59% 0, 67.18% 100%, 0 100%); }
.hero__photo--2{ left:28.4%; width:43%;   clip-path:polygon(22.33% 0, 99.3% 0, 78.14% 100%, 1.16% 100%); }
.hero__photo--3{ left:57.5%; width:42.5%; object-position:35% center; clip-path:polygon(32.82% 0, 100% 0, 100% 100%, 11.41% 100%); }

/* 上部の青帯 */
.hero__bar{
  position:absolute;
  top:1.95%;
  left:0;
  width:100%;
  height:10.4%;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:0 2.5%;
  box-sizing:border-box;
  background:linear-gradient(180deg,#2b74b8 0%,var(--shaken-blue) 45%,#1c5691 100%);
  transform:rotate(-0.25deg);
  opacity:.94;
  box-shadow:0 0 0.6cqw rgba(0,0,0,.45);
  list-style:none;
  margin:0;
  padding:0;
}
.hero__bar li{
  color:#fff;
  font-size:1.88cqw;
  font-weight:700;
  letter-spacing:.11em;
  white-space:nowrap;
  line-height:1;
}

/* 白フチ文字（Safari対策で paint-order を併用） */
.hero__city,
.hero__jisseki{
  position:absolute;
  margin:0;
  font-weight:900;
  line-height:1.18;
  letter-spacing:.01em;
  -webkit-text-stroke:0.5cqw #fff;
  paint-order:stroke fill;
  text-shadow:0 0.12cqw 0.2cqw rgba(0,0,0,.16);
  transform-origin:left bottom;
}
.hero__city{ color:var(--shaken-stroke); }
.hero__jisseki{ color:#d0202a; }
.hero__city{
  left:2.8%;
  top:57.0%;
  font-size:3.05cqw;
  line-height:1.41;
  max-width:40%;
  transform:skewX(-8deg);
}
.hero__jisseki{
  left:31.6%;   /* 写真2枚目の斜め境界に対して左右の余白を均す */
  top:63.9%;
  font-size:2.95cqw;
  white-space:nowrap;
  transform:skewX(-8deg) scaleY(1.3);
}
.hero__city span{ display:block; line-height:1.41; }
.hero--sp .hero__city span{ display:inline; }
.hero__jisseki em{
  font-style:normal;
  font-size:1.07em;
  letter-spacing:.01em;
}
.hero__jisseki-s{ font-size:.72em; color:#e0552a; }

/* CTA（#section_mv a に負けないよう詳細度を上げる） */
#section_mv .hero__cta{
  position:absolute;
  left:68.95%;
  top:57.5%;
  width:27.45%;   /* 右端まで伸ばさない。元は右に58px（3.6%）の余白がある */
  height:13.8%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,var(--shaken-gold) 0%,#ee8a22 32%,var(--shaken-orange-d) 100%);
  color:#fff;
  font-size:2.2cqw;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:0.25cqw;
  box-shadow:0 0.3cqw 0.7cqw rgba(0,0,0,.3);
  transform:rotate(-0.25deg);
}
#section_mv .hero__cta:hover{ opacity:.92; }

/* 下段 */
.hero__catch{
  position:absolute;
  left:2.3%;
  top:83.8%;
  margin:0;
  color:var(--shaken-navy);
  font-size:2.89cqw;
  transform:scaleY(1.2);
  transform-origin:left bottom;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
}

/* 元FVのオレンジは「くっきりしたピル」ではなく、縁がぼけた帯。
   元画像はパレット+透明度PNGで、縁が約16px（1600幅換算）かけて白へ抜ける。
   下の数値は透明度を正しく合成したうえで濃度50%の輪郭を実測したもの。 */
.hero__pill{
  position:absolute;
  left:49.4%;
  bottom:5.4%;
  width:49.4%;
  height:10.1%;
  background:none;
  border-radius:0;
  box-shadow:none;
}
.hero__pill::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--shaken-orange);
  border-radius:999px;
  filter:blur(0.28cqw);
}
/* 数字はSVG、「税込／円」は縦積みでSVGの右に並べる（元FVと同じ組み方） */
.hero__price{
  position:absolute;
  left:50.5%;
  bottom:13%;
  transform:translateX(-50%) skewX(-8deg);
  display:flex;
  align-items:flex-end;
  gap:0.1cqw;
  white-space:nowrap;
}
.hero__price-svg{
  width:37cqw;
  height:auto;
  display:block;
  overflow:visible;
}
.hero__price-sub,
.hero__price-tail{
  color:#d3222a;
  font-weight:900;
  paint-order:stroke fill;
  -webkit-text-stroke:0.5cqw #fff;
  text-shadow:0 0.12cqw 0.2cqw rgba(0,0,0,.16);
}
.hero__price-sub{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  margin-bottom:1cqw;
}
.hero__price-sub .tax{ font-size:2.24cqw; line-height:1.05; }
.hero__price-sub .yen{ font-size:3.47cqw; line-height:1.05; }
.hero__price-tail{
  font-size:4.25cqw;
  line-height:1;
  margin-bottom:0.7cqw;
  margin-left:-0.5cqw;
}

/* =========================================================================
   ヒーロー（スマホ）
   ========================================================================= */
.hero--sp{
  position:relative;
  width:100%;
  container-type:inline-size;
  background:#fff;
  overflow:hidden;              /* skewX による左右3pxのはみ出しを止める */
}

/* 原本SP FV(750x928)の実測値をもとに構成。写真部分は 750:524 */
.hero__sp-main{
  position:relative;
  width:100%;
  aspect-ratio:750 / 524;
  overflow:hidden;
}
.hero__sp-main > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 上段: 市名 / 実績（原本 y 20.8〜78.0） */
.hero__sp-top{
  position:absolute;
  left:0;
  right:0;
  top:7%;
  z-index:2;
  padding:0 6.5cqw;
  box-sizing:border-box;
}
.hero--sp .hero__city,
.hero--sp .hero__jisseki{
  position:static;
  max-width:none;
  text-align:left;
  white-space:normal;
  transform:skewX(-8deg);
}
.hero--sp .hero__city{
  font-size:4.6cqw;
  margin:0 0 2.4cqw;
  -webkit-text-stroke:0.7cqw #fff;
}
.hero--sp .hero__jisseki{
  font-size:7.1cqw;
  margin:0;
  -webkit-text-stroke:1.05cqw #fff;
  /* 白フチの外側をさらに白く光らせる（drop-shadowはフチの形に沿う） */
  filter:drop-shadow(0 0 0.9cqw rgba(255,255,255,.95))
         drop-shadow(0 0 2cqw rgba(255,255,255,.75));
}

/* 下段: キャッチ＋価格。原本は価格の下端が写真下端から 5.4% */
.hero__sp-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:5.4%;
  z-index:2;
}
.hero--sp .hero__catch{
  position:static;
  margin:0 0 2.6cqw 6.5cqw;
  font-size:4.1cqw;
  transform:scaleY(1.2);          /* PCと同じ */
  transform-origin:left bottom;
  /* 文字色はPCと同じ紺（.hero__catch を継承）。写真の上なので白フチだけ足す */
  -webkit-text-stroke:0.75cqw #fff;
  paint-order:stroke fill;
}
/* スマホ版のオレンジは価格を囲むピルではなく、
   価格の下半分にかかる「ぼかした帯」（原本 y 241.8〜265.2 / 価格は 207.5〜257.9） */
.hero--sp .hero__pill{
  position:relative;
  left:auto;
  bottom:auto;
  width:fit-content;
  height:auto;
  margin:0 0 0 3.4cqw;   /* キャッチの文字の左端に合わせる（skewの分だけ内側に寄る） */
  background:none;
  border-radius:0;
  box-shadow:none;
}
.hero--sp .hero__pill::before{
  content:"";
  position:absolute;
  left:-2.5cqw;
  right:0;
  top:64%;
  bottom:auto;
  height:4.6cqw;
  background:var(--shaken-orange);
  border-radius:999px;
  filter:blur(2.2cqw);
  z-index:0;
}
.hero--sp .hero__price{
  position:static;
  left:auto;
  bottom:auto;
  transform:skewX(-8deg);
  transform-origin:left bottom;
  gap:0.6cqw;
  z-index:1;
}
.hero--sp .hero__price-svg{ width:62cqw; }
/* 金額SVGは数字の下に viewBox 45/215 ぶんの余白があるので、その分だけ持ち上げて足元を揃える */
.hero--sp .hero__price-sub{ margin-bottom:3.2cqw; -webkit-text-stroke:1.1cqw #fff; }
.hero--sp .hero__price-sub .tax{ font-size:3.2cqw; }
.hero--sp .hero__price-sub .yen{ font-size:5.2cqw; }
.hero--sp .hero__price-tail{
  font-size:6.9cqw;
  margin-bottom:3.2cqw;
  margin-left:0;
  -webkit-text-stroke:1.1cqw #fff;
}

/* メリット帯（原本 y 272.5〜321.4 = 高さ48.9px） */
.hero--sp .hero__bar{
  position:static;
  width:100%;
  height:auto;
  transform:none;
  opacity:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1cqw 2cqw;
  padding:2.3cqw 4cqw;
  box-sizing:border-box;
  justify-content:initial;
}
.hero--sp .hero__bar li{
  font-size:3.5cqw;
  text-align:center;
}

/* 下段写真（原本 y 321.4〜482.6 = 750:310）。仕切りは垂直ではなく斜め */
.hero__sp-photos{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:750 / 310;
  background:#fff;
}
.hero__sp-photos img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero__sp-photos img:nth-of-type(1){ clip-path:polygon(0 0, 54.0% 0, 40.4% 100%, 0 100%); object-position:36% center; }
.hero__sp-photos img:nth-of-type(2){ clip-path:polygon(54.8% 0, 100% 0, 100% 100%, 41.2% 100%); }
#section_mv .hero--sp .hero__cta{
  position:absolute;
  /* 斜めの仕切りは上端54%→下端41%。ボタン上辺(上から65%)の仕切りは45.6%なので、その外側に置く */
  left:48%;
  right:5%;
  bottom:9%;
  top:auto;
  width:auto;
  height:26%;
  font-size:4.2cqw;
  white-space:nowrap;
  transform:none;
  border-radius:1cqw;
}

/* =========================================================================
   料金バナー（旧 mv_sp.png / 焼き込み画像のHTML版）
   ========================================================================= */
/* #price の高さはテーマの 930px のまま（SVGの料金枠は元画像と同じ大きさ。四日市はHTMLの料金枠なので auto にしていた） */
#price .pbnr{
  width:100%;
  max-width:1024px;
  margin:0 auto;
  padding:80px 0;
  box-sizing:border-box;
  container-type:inline-size;
}

.pbnr__ribbon{
  margin:0;
  padding:1.6cqw 3cqw;
  background:linear-gradient(90deg,var(--shaken-gold) 0%,#f0902a 55%,var(--shaken-orange-d) 100%);
  border-radius:1.2cqw 1.2cqw 0 0;
  color:#fff;
  font-size:3.1cqw;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.1;
}

.pbnr__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2cqw;
  padding:2cqw 1cqw 0;
}
.pbnr__head-l h2{
  margin:0;
  font-size:5.6cqw;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.1;
  color:#111;
}
.pbnr__head-l p{
  margin:1.4cqw 0 0;
  font-size:2.5cqw;
  font-weight:500;
  color:#111;
}
.pbnr__head-r{ text-align:right; }
.pbnr__big{
  margin:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  color:var(--shaken-red);
  font-weight:900;
  line-height:.95;
  white-space:nowrap;
}
/* 金額はヒーローと同じ赤グラデ＋光沢＋白フチのSVGで描く */
.pbnr__num{ display:block; }
.pbnr__num svg{ width:37cqw; height:auto; display:block; overflow:visible; }
.pbnr__num--total svg{ width:24cqw; }
.pbnr__unit{
  display:inline-block;
  font-size:4.2cqw;
  margin-left:.2cqw;
  color:#111;   /* 元は上段の「円」は黒 */
}
.pbnr__unit small{
  display:block;
  font-size:.45em;
  line-height:1.2;
  color:#111;
  font-weight:700;
}
.pbnr__note{
  margin:1cqw 0 0;
  font-size:1.85cqw;
  font-weight:500;
  color:#111;
}

.pbnr__case{
  margin:2.4cqw 0 0;
  padding-left:3.4cqw;
  position:relative;
  font-size:3.1cqw;
  font-weight:700;
  color:#111;
}
.pbnr__case::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  width:2.2cqw;
  height:2.2cqw;
  background:var(--shaken-orange);
}

.pbnr__body{
  display:grid;
  grid-template-columns:47% 1fr;
  gap:3cqw;
  align-items:start;
  padding-top:0.5cqw;
}
.pbnr-br{ display:none; }
.pbnr__tokuten--sp{ display:none; }
.pbnr__car{
  width:100%;
  max-width:438px;   /* 元画像の実寸。これ以上引き伸ばすとぼける */
  height:auto;
  display:block;
  margin:0 auto;
}
.pbnr__tokuten{
  margin:0;
  text-align:center;
  color:var(--shaken-red);
  font-size:2.9cqw;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}

.pbnr__body-r{ padding-top:1cqw; }
.pbnr__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1cqw;
  margin:0;
  padding-bottom:.8cqw;
  border-bottom:1px solid #333;
}
.pbnr__row dt{
  font-size:2.6cqw;
  font-weight:700;
  color:#111;
  line-height:1.25;
}
.pbnr__row dd{ margin:0; white-space:nowrap; }
.pbnr__row dd strong{ font-size:3.7cqw; font-weight:900; color:#111; }
.pbnr__row dd span{ font-size:2.2cqw; font-weight:700; color:#111; }
.pbnr__row-note{
  margin:.8cqw 0 2.6cqw;
  font-size:1.75cqw;
  font-weight:400;
  color:#111;
}
/* 見出しが2行なので、金額は行の中央に合わせる（baselineだと1行目に寄って浮く） */
.pbnr__row--kihon{ align-items:center; }
.pbnr__row--kihon dt{ color:var(--shaken-orange-d); }
.pbnr__row--kihon dt span{ font-size:.92em; }
.pbnr__row--kihon dd strong{ color:var(--shaken-red); }
.pbnr__row--kihon dd span{ color:var(--shaken-red); }

.pbnr__total{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:2cqw;
  margin:2.6cqw 0 0;
}
.pbnr__total dt{
  font-size:4cqw;
  font-weight:700;
  white-space:nowrap;
  color:#111;
  padding-bottom:1cqw;
}
.pbnr__total dd{
  margin:0;
  display:flex;
  align-items:flex-end;
  color:var(--shaken-red);
  font-weight:900;
  line-height:.95;
  white-space:nowrap;
}
.pbnr__total dd strong{ font-size:8.6cqw; letter-spacing:-.01em; }
.pbnr__total dd span{ display:inline-block; font-size:3.8cqw; }
.pbnr__total dd span small{
  display:block;
  font-size:.45em;
  line-height:1.2;
  color:#111;
}

#price .pbnr .pbnr__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2.4cqw;
  padding:2cqw 2cqw;
  background:linear-gradient(90deg,var(--shaken-gold) 0%,#f0902a 60%,var(--shaken-orange-d) 100%);
  color:#fff;
  font-size:3.4cqw;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
}
#price .pbnr .pbnr__cta:hover{ opacity:.92; }

/* スマホ */
@media screen and (max-width:800px){
  #price .pbnr{ padding:34px 0 46px; width:92%; }
  .pbnr__ribbon{ font-size:4.4cqw; padding:3.2cqw 3.4cqw; }
  /* 帯の文字位置(3.4cqw)に中身の左端を揃える */
  .pbnr__head{ padding:5cqw 3.4cqw 0; }
  .pbnr__case{ margin:5cqw 3.4cqw 0; }
  .pbnr__body{ padding:3cqw 3.4cqw 0; }

  .pbnr__row{ padding-bottom:1.6cqw; }
  .pbnr__row-note{ margin:1.4cqw 0 4cqw; }
  /* 原本のスマホ版は横並びではなく、見出し→金額の縦積み */
  .pbnr__head{ display:block; }
  .pbnr__head-l h2{ font-size:9.4cqw; }
  .pbnr__head-l p{ font-size:3.4cqw; margin-top:1cqw; }
  .pbnr__head-r{ text-align:left; margin-top:2.5cqw; }
  .pbnr__big{ justify-content:flex-start; }
  .pbnr__num svg{ width:66cqw; }
  .pbnr__num--total svg{ width:44cqw; }
  .pbnr__unit{ font-size:7.6cqw; }
  .pbnr__unit small{ font-size:.46em; }
  .pbnr__note{ font-size:3.2cqw; margin-top:2.5cqw; }
  .pbnr__case{ font-size:4.4cqw; }
  .pbnr__body{ display:block; }
  /* 車は「軽自動車の場合」の右へ回り込ませる（原本と同じ） */
  .pbnr__car{ max-width:62%; margin:-9cqw 0 0 auto; }
  .pbnr__tokuten--pc{ display:none; }
  .pbnr__tokuten--sp{ display:block; font-size:4.6cqw; margin:5cqw 0 0; }
  .pbnr__body-r{ padding-top:2cqw; }
  .pbnr__row dt{ font-size:5.2cqw; }
  .pbnr__row dd strong{ font-size:7.4cqw; }
  .pbnr__row dd span{ font-size:4.2cqw; }
  .pbnr__row-note{ font-size:3.1cqw; }
  .pbnr__total dt{ font-size:7.6cqw; }
  .pbnr__total dd span{ font-size:6.4cqw; }
  #price .pbnr .pbnr__cta{ font-size:4.4cqw; padding:3.4cqw 2cqw; }
}


/* =========================================================================
   ヘッダーの電話バー（旧 top_banner.png / sp_top_banner.png のHTML版）
   店舗名・電話番号・営業時間はショートコード駆動。
   番号が「準備中」の間はリンクにせず、確定したら自動でタップ発信になる。
   ========================================================================= */
.telbar{
  container-type:inline-size;
  display:block;
  box-sizing:border-box;
  /* ★自身の padding/border-radius に cqw は使わない。
     container-type:inline-size は『子孫』の基準になるだけで、
     自分自身は親（ビューポート）の幅で計算されてしまう */
  padding:4px;
  border-radius:6px;
  background:linear-gradient(90deg,#f7c300 0%,#f5b209 26%,#ef8f1f 60%,#e6652d 100%);
  text-decoration:none;
}
/* 上の白帯は横いっぱい・角丸は小さめ・文字は左寄せ（元と同じ） */
.telbar__lead{
  margin:0;
  padding:0.6cqw 1.2cqw;
  background:#fff;
  border-radius:0.9cqw;
  color:#333;
  font-size:3.5cqw;
  line-height:1.2;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:left;
}
.telbar__lead .shop{ font-weight:700; color:#111; }
.telbar__lead .click{ color:#4a4a4a; font-weight:400; font-size:.94em; }
.telbar__main{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1.2cqw;
  padding:1.4cqw 0 0.4cqw 1cqw;
}
.telbar__icon{
  width:12.5cqw;
  height:12.5cqw;
  flex:none;
  fill:#fff;
  display:block;
}
.telbar__body{ min-width:0; text-align:left; }
.telbar__num{
  margin:0;
  color:#fff;
  font-size:10.8cqw;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.telbar__time{
  margin:0.6cqw 0 0;
  color:#fff;
  font-size:4.5cqw;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  text-align:left;
}
.pc_hdr .telbar{ position:absolute; right:3%; top:12px; width:286px; }

/* スマホ版は営業時間を番号の右に置く */
.telbar--sp .telbar__main{ align-items:center; gap:1.4cqw; padding:1.2cqw 0 0.4cqw 1cqw; }
.telbar--sp .telbar__icon{ width:7.5cqw; height:7.5cqw; margin-top:0; }
.telbar--sp .telbar__body{ display:flex; align-items:flex-end; gap:1.8cqw; }
.telbar--sp .telbar__num{ font-size:8.2cqw; }
.telbar--sp .telbar__time{
  margin:0 0 0.7cqw;
  font-size:2.7cqw;
  line-height:1.25;
  text-align:left;
  white-space:normal;
  max-width:30cqw;
}

/* =========================================================================
   料金ページ上部バナー（旧 price_mv-1.png のHTML版）
   元画像 2086x866 のうち中身は 2048x800。下の数値は1024x400に正規化した実測値。
   ========================================================================= */
#price_mv{ max-height:none; }
#price_mv img{ width:auto; }
.pmv{
  position:relative;
  width:100%;
  aspect-ratio:1024 / 400;
  overflow:hidden;
  background:#144e90;
  container-type:inline-size;
}
.pmv, .pmv *{ font-family:'RelifeNum','Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; }

#price_mv .pmv__photo{
  position:absolute;
  left:0; top:0;
  width:37%; height:100%;
  object-fit:cover;
  display:block;
}
.pmv__panel{
  position:absolute;
  left:36.4%; right:0; top:0; bottom:0;
  background:linear-gradient(90deg, #6286b3 0%, #4271a7 3%, #2a5f9b 6.5%, #144e90 10.5%, #144e90 100%);
}

/* --- 右パネルの文字 --- */
.pmv__lead,.pmv__month,.pmv__title,.pmv__sub,.pmv__price{
  position:absolute;
  margin:0;
  color:#fff;
  z-index:3;
  white-space:nowrap;
  line-height:1;
  text-shadow:0 0.2cqw 0.35cqw rgba(0,0,0,.4);
}
.pmv__lead{  left:62.3%; top:5.2%;  font-size:2.95cqw; font-weight:700; letter-spacing:.03em; }
.pmv__month{ left:62.8%; top:13.5%;   font-weight:800; display:flex; align-items:baseline; }
.pmv__month em{ font-style:normal; font-size:7.6cqw; }
.pmv__month span{ font-size:3.3cqw; margin-left:.2cqw; }
.pmv__month b{ font-size:4cqw; margin-left:.9cqw; }
.pmv__title{ left:42.9%; top:45.8%; font-size:3.35cqw;  font-weight:800; letter-spacing:.01em; }
.pmv__title em{ font-style:normal; color:#f8ad3b; }
.pmv__sub{   left:42.9%; top:56.6%; font-size:2.1cqw;  font-weight:500; letter-spacing:.02em; }
.pmv__price{ left:46%;   top:60.5%; font-weight:800; display:flex; align-items:flex-end; }
/* 「2ヶ月前からOK!!」と金額は背景から浮かせて目立たせる（濃紺のフチ＋影） */
.pmv__month,
.pmv__price{
  -webkit-text-stroke:0.08cqw rgba(6,34,66,.35);
  paint-order:stroke fill;
  text-shadow:0 0.5cqw 0.75cqw rgba(0,0,0,.55);
}
.pmv__month em,
.pmv__month b,
.pmv__price em{ -webkit-text-stroke:0.12cqw rgba(6,34,66,.35); }
.pmv__price em{ font-style:normal; font-size:12.5cqw; line-height:.82; display:inline-block; transform:scaleY(.82); transform-origin:bottom; letter-spacing:-.01em; }
.pmv__unit{ display:flex; flex-direction:column; line-height:1.15; margin:0 0 1.4cqw .3cqw; font-size:2.1cqw; }
.pmv__unit small{ font-size:.78em; }

/* --- 黄色いマーカー（文字の下） --- */
.pmv::before,.pmv::after{
  content:"";
  position:absolute;
  z-index:2;
  background:#ffff00;
  border-radius:999px;
  filter:blur(0.22cqw);
}
.pmv::before{ left:62%;   width:33%;   top:30.4%; height:2.9%; }
.pmv::after{  left:44.7%; width:45.1%; top:83.5%; height:6%; }

/* --- 左上の斜めリボン --- */
.pmv__ribbon{
  position:absolute;
  left:-6%; top:17.4%;
  width:50%; height:20.75%;
  margin:0;
  background:#1d5390;
  transform:rotate(-17.6deg);
  transform-origin:left center;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:8%;
  box-sizing:border-box;
  z-index:4;
}
.pmv__ribbon span{
  color:#fff;
  font-size:4cqw;
  font-weight:700;
  letter-spacing:.05em;
  text-shadow:0 0.2cqw 0.35cqw rgba(0,0,0,.3);
}

/* --- 吹き出し（楕円＋しっぽを1本のSVGパスで描く） --- */
.pmv__bubble{
  position:absolute;
  left:24.4%; top:6.5%;
  width:37.1%; height:39%;
  margin:0;
  z-index:5;
}
.pmv__bubble-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 0.25cqw 0.45cqw rgba(0,0,0,.28));
}
.pmv__bubble span{
  position:absolute;
  left:47%;
  top:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;   /* 折返しは <br> のみ。幅は一番長い行に合わせる */
  color:#144e90;
  font-size:2.44cqw;
  font-weight:700;
  line-height:1.5;
  text-align:left;      /* 各行の開始位置を左で揃える */
}
.pmv__bubble::before{
  z-index:-1;
  left:88%; top:49%;
  width:32%; height:48%;
  background:#17518f;
  clip-path:polygon(26% 0%, 100% 72%, 48% 100%);
}
.pmv__bubble::after{
  left:88%; top:50%;
  width:30%; height:46%;
  background:#fff;
  clip-path:polygon(28% 6.5%, 100% 71.7%, 51% 93.5%);
}
/* しっぽ（外側の紺 → 内側の白の順に重ねる） */
.pmv__bubble::before{
  right:-5.2cqw;
  top:47%;
  border-width:1.9cqw 0 3.3cqw 5.2cqw;
  border-color:transparent transparent transparent #17518f;
}
.pmv__bubble::after{
  right:-3.6cqw;
  top:50.5%;
  border-width:1.4cqw 0 2.6cqw 4cqw;
  border-color:transparent transparent transparent #fff;
}


/* =========================================================================
   既存サイト向けの追加（2026-10-30 C型のHTML化）
   ========================================================================= */
/* 表紙の高さはサイトごとに違う（relife-site.css）。中身は四日市と同じ 2048×910 の枠で組む */
.hero--pc .hero__in{ position:absolute; inset:0 0 auto 0; aspect-ratio:2048 / 910; }

/* 焼き込み画像の置き換え（元画像と同じ縦横比のSVG。中は本物の文字） */
.rsvg{ width:100%; height:auto; overflow:visible; }
.rsvg text{ font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif; }
.rsvg .t_w{ fill:#fff; }
.rsvg .t_k{ fill:#1f0e11; }
.rsvg .t_r{ fill:#e51c24; }
.rsvg .t_o{ fill:#e95a24; }
.rsvg .f_k{ fill:#000; }
.rsvg .b4{ font-weight:400; }
.rsvg .b5{ font-weight:500; }
.rsvg .b7{ font-weight:700; }
.rsvg .b9{ font-weight:900; }
.rsvg .t_navy{ fill:#144e8b; }
.rsvg .t_y{ fill:#f3a83b; }
.rsvg text.t_ab{ font-family:'Arial Black','Arial','Helvetica Neue',sans-serif; font-weight:900; }

/* 割引・特典カードなどの大きさは、サイトごとの relife-mirror.css（テーマの img 向けの規則を自動で写したもの） */
.rsvg .t_ys{ fill:#ffff00; stroke:#e4411d; stroke-width:5; paint-order:stroke; }

/* 表紙全体をリンクで囲むサイト（札幌など）：テーマの #section_mv a img{width:100%} に写真の幅を負けさせない */
#section_mv a .hero__photo--1{ width:42.5%; }
#section_mv a .hero__photo--2{ width:43%; }
#section_mv a .hero__photo--3{ width:42.5%; }