@charset "UTF-8";
/* ==========================================================================
   SECTION 5 ｜ 提供サービス（4本柱）
   参考元: assets/images/SECTION 5/SECTION5_参考元画像.png (1484x1060)
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標で記述する。
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値はすべて参考元のピクセル実測値（tools/meas5.py・find5r.py・cal5.py）。
   ファイル末尾の「調整値」は tools/cal5.py が自動で書き換える。手で書かない。
   ========================================================================== */

section.s5{
  --y:      #F8C804;   /* 実測 バッジの黄 */
  --y-ul:   #FBC814;   /* 実測 見出しの下線の黄（少し明るい） */
  --y-cta:  #F7C401;   /* 実測 CTAボタンの黄 */
  --y-d:    #E0B302;   /* 影・押下時 */
  --ink:    #06112E;   /* 実測 見出しの濃紺 */
  --ink-b:  #0F122D;   /* 実測 本文の濃紺（見出しよりわずかに明るい） */
  --navy:   #001032;   /* 実測 帯の紺 */
  --card:   #FEFEFE;   /* 実測 カード地 */
  --bg:     #FCFCFC;   /* 実測 ページ地 */
  --dot:    #A6A6B1;   /* 実測 点線 */
  --ink-p:  #0A0C26;   /* 実測 約束パネルの文字 */

  position: relative;
  display: flex;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}

.s5-stage{
  position: relative;
  width: min(100%, 1484px);
  height: calc(940 * 0.0673854cqw);
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--ink);
  font-feature-settings: "palt" 1;
}
.s5-stage > *{ --u: 0.0673854cqw; }   /* 1設計px */
.s5-stage *{ box-sizing: border-box; }

/* 位置・大きさ・文字の共通土台 */
.s5-p{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  margin: 0;
}
.s5-p.w{ width: calc(var(--w) * var(--u)); }
.s5-p.h{ height: calc(var(--h) * var(--u)); }
.s5-t{
  font-size: calc(var(--fs) * var(--u));
  letter-spacing: calc(var(--ls) * var(--u));
  line-height: calc(var(--lh) * var(--u));
  white-space: nowrap;
}

/* ---------- 背景装飾（すべて支給素材） ---------- */
.s5-deco{ --u: 0.0673854cqw; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s5-deco-top{ z-index: 3; }
.s5-deco img{ position: absolute; display: block;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u)); height: auto; }

/* ---------- 見出し ---------- */
.s5-head{ z-index: 2; font-weight: 900;
  transform: scaleX(var(--sx2)); transform-origin: left top; }
/* 「わぁお」の背後に黄色いマーカーを敷く（参考元の筆マーカーと同じ素材） */
.s5-head .wa{ position: relative; }
.s5-head .wa::before{
  content: ""; position: absolute; z-index: -1;
  /* 文字サイズ基準（em）にしておくと、スマホで文字が小さくなっても崩れない */
  left: -.22em; right: -.22em;
  top: .19em; height: .86em;
  background: url("../images/section4/marker-yellow-bold.webp") no-repeat center/100% 100%;
}
.s5-sub{ z-index: 2; font-weight: 700; }

/* ---------- カード ---------- */
.s5-cards{ list-style: none; margin: 0; padding: 0; }
.s5-card{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  width:  calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  background: var(--card);
  border-radius: calc(26 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(20,25,45,.05),
              0 calc(5 * var(--u)) calc(6 * var(--u)) calc(-2 * var(--u)) rgba(20,25,45,.16);
  z-index: 2;
}

/* スートの白丸 */
.s5-suit{
  position: absolute; left: calc(var(--sx) * var(--u)); top: calc(var(--sy) * var(--u));
  width: calc(62 * var(--u)); height: calc(62 * var(--u));
  background: var(--card);
  border-radius: 50%;
  box-shadow: 0 calc(2 * var(--u)) calc(7 * var(--u)) rgba(20,25,45,.10);
  display: grid; place-items: center;
}
.s5-suit img{ display: block; width: auto; height: calc(var(--sh) * var(--u)); }

/* カード見出し（＋黄の下線） */
.s5-title{
  position: absolute; left: 0; width: 100%;
  top: calc(var(--tt) * var(--u));
  margin: 0; text-align: center;
  font-weight: 900;
  transform: scaleX(var(--sx2)); transform-origin: center top;
}
.s5-title .l1{ font-size: calc(var(--fs1) * var(--u)); letter-spacing: calc(var(--ls1) * var(--u)); }
.s5-title .ul{
  display: inline-block; position: relative;
  padding-inline: calc(2 * var(--u));
}
.s5-title .ul::after{
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--ulg) * var(--u));
  height: calc(5 * var(--u)); background: var(--y-ul);
}

/* イラスト（支給素材） */
.s5-illust{
  position: absolute;
  left: calc(var(--ix) * var(--u));
  top:  calc(var(--iy) * var(--u));
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u)); display: block;
}

/* 説明文・半歩上の中身 */
.s5-body, .s5-low{
  position: absolute; left: 0; width: 100%;
  margin: 0; text-align: center;
  font-weight: 500;
  color: var(--ink-b);
  transform: scaleX(var(--sx2)); transform-origin: center top;
}
.s5-body{ top: calc(var(--bt) * var(--u)); }
.s5-low{  top: calc(var(--lt) * var(--u)); }

/* 点線 */
.s5-dots{
  position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u));
  top: calc(var(--dt) * var(--u));
  border: 0; border-top: calc(2 * var(--u)) dotted var(--dot);
  margin: 0;
}

/* 半歩上ピル＋きらめき */
.s5-pill{
  position: absolute; left: calc(var(--px) * var(--u)); top: calc(var(--pt) * var(--u));
  margin: 0; display: flex; align-items: center;
  gap: calc(var(--pg) * var(--u));
}
.s5-pill .pill{
  display: grid; place-items: center;
  width: calc(90 * var(--u)); height: calc(32 * var(--u));
  background: var(--y); border-radius: calc(7 * var(--u));
  font-weight: 700; font-size: calc(19 * var(--u)); letter-spacing: .06em;
  color: var(--ink); white-space: nowrap;
}
.s5-pill img.spark{ display: block; width: calc(19 * var(--u)); height: auto; }

/* ---------- 共通の約束パネル ---------- */
.s5-promise{
  z-index: 2;
  background: var(--card);
  border-radius: calc(20 * var(--u));
  box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(20,25,45,.06),
              0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(20,25,45,.10);
}
.s5-promise > div{
  position: absolute; top: calc(var(--iy2) * var(--u));
  display: flex; align-items: center; gap: calc(var(--pg2) * var(--u));
}
.s5-promise .p1{ left: calc(var(--p1) * var(--u)); }
.s5-promise .p2{ left: calc(var(--p2) * var(--u)); }
.s5-promise .p3{ left: calc(var(--p3) * var(--u)); }
.s5-promise img{ display: block; width: calc(54 * var(--u)); height: auto; }
.s5-promise .t{ font-weight: 700; color: var(--ink-p); }
.s5-promise .ul{ position: relative; }
.s5-promise .ul::after{
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--ulg2) * var(--u));
  height: calc(6 * var(--u)); background: var(--y-ul);
}
.s5-promise .div{
  position: absolute; top: calc(22 * var(--u));
  width: calc(2 * var(--u)); height: calc(44 * var(--u));
  background: #D9DBE1;
}
.s5-promise .d1{ left: calc(465 * var(--u)); }
.s5-promise .d2{ left: calc(848 * var(--u)); }

/* ---------- CTA ---------- */
.s5-cta{
  z-index: 2;
  background: var(--y-cta);
  border-radius: calc(13 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 var(--y-d);
  color: var(--ink); text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.s5-cta .inner{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--cg) * var(--u));
  padding-left: calc(var(--cpl) * var(--u));
  transform: scaleX(var(--sx2)); transform-origin: center center;
}
.s5-cta .arw{ font-size: calc(var(--fs) * var(--u)); line-height: 1; }
.s5-cta:hover{ transform: translateY(calc(2 * var(--u)));
  box-shadow: 0 calc(2 * var(--u)) 0 var(--y-d); }

/* ---------- 橋渡しの帯 ---------- */
/* ==========================================================================
   調整値 ── tools/cal5.py が参考元の実測値に合わせて自動で書き換える
   ========================================================================== */
/*[CAL]*/
.s5-head{ --x: 64; --y2: 67; --sx2: 0.78; --fs: 72; --ls: 16.15; --lh: 80; }
.s5-sub{ --x: 69; --y2: 162; --fs: 24.9; --ls: 1.82; --lh: 30; }
.s5-c1{ --x: 56; --y2: 212; --w: 332; --h: 478; }
.s5-c2{ --x: 406; --y2: 212; --w: 314; --h: 478; }
.s5-c3{ --x: 736; --y2: 212; --w: 308; --h: 478; }
.s5-c4{ --x: 1064; --y2: 212; --w: 332; --h: 478; }
.s5-c1 .s5-suit{ --sx: 131; --sy: 1; --sh: 39; }
.s5-c2 .s5-suit{ --sx: 126; --sy: 1; --sh: 33; }
.s5-c3 .s5-suit{ --sx: 125; --sy: 1; --sh: 36; }
.s5-c4 .s5-suit{ --sx: 124; --sy: 1; --sh: 36; }
.s5-c1 .s5-title{ --sx2: 1; --fs1: 23.8; --tt: 61; --fs: 24.3; --ls: 2.77; --lh: 31; --ulg: 30; --ls1: -0.2;}
.s5-c2 .s5-title{ --sx2: 1; --tt: 80; --fs: 26.2; --ls: 0.1; --lh: 31; --ulg: 34; }
.s5-c3 .s5-title{ --sx2: 1; --tt: 79; --fs: 25.7; --ls: 3.97; --lh: 31; --ulg: 34; }
.s5-c4 .s5-title{ --sx2: 1; --tt: 79; --fs: 26; --ls: 2.37; --lh: 31; --ulg: 34; }
.s5-c1 .s5-illust{ --ix: 20; --iy: 141; --iw: 269; --ih: 142; }
.s5-c2 .s5-illust{ --ix: 21; --iy: 140; --iw: 264; --ih: 148; }
.s5-c3 .s5-illust{ --ix: 33; --iy: 137; --iw: 243; --ih: 137; }
.s5-c4 .s5-illust.i1{ --ix: 38; --iy: 138; --iw: 138; --ih: 129; }
.s5-c4 .s5-illust.i2{ --ix: 202; --iy: 150; --iw: 108; --ih: 127; }
.s5-c1 .s5-body{ --sx2: 1; --bt: 287; --fs: 17.5; --ls: 2.4; --lh: 28; }
.s5-c2 .s5-body{ --sx2: 1; --bt: 287; --fs: 17.2; --ls: 1.12; --lh: 28; }
.s5-c3 .s5-body{ --sx2: 1; --bt: 287; --fs: 16.7; --ls: 1.61; --lh: 28; }
.s5-c4 .s5-body{ --sx2: 1; --bt: 287; --fs: 17.5; --ls: 1.42; --lh: 28; }
.s5-c1 .s5-dots{ --dt: 354; }
.s5-c2 .s5-dots{ --dt: 353; }
.s5-c3 .s5-dots{ --dt: 354; }
.s5-c4 .s5-dots{ --dt: 354; }
.s5-c1 .s5-pill{ --px: 115; --pt: 368; --pg: 17; }
.s5-c2 .s5-pill{ --px: 103; --pt: 367; --pg: 14; }
.s5-c3 .s5-pill{ --px: 109; --pt: 368; --pg: 10; }
.s5-c4 .s5-pill{ --px: 120; --pt: 368; --pg: 10; }
.s5-c1 .s5-low{ --sx2: 1; --lt: 405; --fs: 17.7; --ls: 1.09; --lh: 25; }
.s5-c2 .s5-low{ --sx2: 1; --lt: 405; --fs: 17.7; --ls: 1.31; --lh: 25; }
.s5-c3 .s5-low{ --sx2: 1; --lt: 405; --fs: 17.3; --ls: 1.55; --lh: 25; }
.s5-c4 .s5-low{ --sx2: 1; --lt: 405; --fs: 17.3; --ls: 0.7; --lh: 25; }
.s5-promise{ --x: 58; --y2: 704; --w: 1337; --h: 84; --fs: 22.9; --ls: 1.42; --lh: 30; --iy2: 14; --pg2: 16; --ulg2: 32; --p1: 89; --p2: 522; --p3: 905; }
.s5-cta{ --sx2: 1; --cpl: 28; --x: 448; --y2: 803; --w: 580; --h: 69; --fs: 30; --ls: 1.16; --lh: 40; --cg: 26; }
/*[/CAL]*/

/* ==========================================================================
   タブレット・スマホ
   設計幅より狭いときは、絶対配置をやめて縦一列に積む
   ========================================================================== */
@media (max-width: 900px){
  section.s5{ padding: 48px 5vw 56px; }
  .s5-stage{ width: 100%; height: auto; container-type: normal; }
  .s5-stage > *{ --u: 1px; }
  .s5-deco{ display: none; }
  .s5-p, .s5-p.w, .s5-p.h, .s5-card, .s5-promise, .s5-cta,
  .s5-title, .s5-body, .s5-low, .s5-dots, .s5-pill, .s5-illust, .s5-promise > div{
    position: static; width: auto; height: auto; left: auto; top: auto;
  }
  section.s5 img{ max-width: 100%; }
  .s5-t{ font-size: inherit; letter-spacing: normal; line-height: inherit; white-space: normal; }

  /* 見出し・リード */
  .s5-head{ font-size: clamp(24px, 6.6vw, 36px); line-height: 1.4; transform: none; }
  .s5-sub{ margin-top: 10px; font-size: clamp(13px, 3.6vw, 17px); line-height: 1.7; }

  /* 約束パネル：1行1項目 */
  .s5-promise{ margin-top: 18px; padding: 8px 16px 14px;
               border: 1px solid #E9E9EE; border-radius: 14px;
               box-shadow: 0 2px 5px rgba(20,30,70,.06); }
  .s5-promise > div{ display: flex; align-items: center; gap: 12px; margin-top: 12px; }
  .s5-promise img{ width: 40px; flex: none; }
  .s5-promise .t{ font-size: clamp(13.5px, 3.8vw, 17px); }
  .s5-promise .div{ display: none; }
  .s5-promise .ul::after{ display: none; }
  .s5-promise .ul{
    background: linear-gradient(var(--y), var(--y)) no-repeat;
    background-size: 100% 4px; background-position: 0 100%;
    padding-bottom: 3px;
  }

  /* CTA：ふつうのボタンにする */
  .s5-cta{
    display: flex; align-items: center; justify-content: center;
    width: min(100%, 420px); height: 56px; margin: 20px auto 0;
    background: var(--y-cta); border-radius: 12px;
  }
  .s5-cta .inner{
    position: static; inset: auto; transform: none; padding: 0;
    display: flex; align-items: center; gap: 12px;
    font-size: clamp(15px, 4.2vw, 19px); font-weight: 700; color: var(--ink);
  }
  .s5-cta .arw{ font-size: 1.1em; }
  .s5-head{ font-size: 28px; letter-spacing: -1px; white-space: normal; line-height: 1.35; margin-top: 4px; }
  .s5-sub{ font-size: 15px; margin-top: 10px; white-space: normal; line-height: 1.7; }
  .s5-cards{ display: grid; gap: 20px; margin-top: 26px; }
  .s5-card{ position: relative; left: auto; top: auto; padding: 44px 18px 26px; }
  .s5-suit{ position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
            width: 54px; height: 54px; }
  .s5-suit img{ height: 30px; }
  .s5-title{ position: static; font-size: 22px; line-height: 1.4; white-space: normal; }
  .s5-illust{ position: static; width: 82%; height: auto; margin: 14px auto 0; }
  .s5-c4 .s5-illust{ display: inline-block; width: 44%; vertical-align: middle; margin: 14px 1% 0; }
  .s5-body{ position: static; font-size: 15px; line-height: 1.7; margin-top: 14px; }
  .s5-dots{ position: static; margin: 14px 0; }
  .s5-pill{ position: static; justify-content: center; margin-top: 4px; gap: 10px; }
  .s5-pill img.pill{ width: 76px; }
  .s5-pill img.spark{ width: 18px; }
  .s5-low{ position: static; font-size: 15px; line-height: 1.7; margin-top: 8px; }
  .s5-promise{ display: grid; gap: 14px; margin-top: 24px; padding: 18px 16px; }
  .s5-promise > div{ position: static; }
  .s5-promise .div{ display: none; }
  .s5-promise img{ width: 34px; }
  .s5-promise span{ font-size: 16px; border-bottom-width: 4px; white-space: normal; }
  .s5-cta{ margin: 24px auto 0; max-width: 420px; padding: 16px 20px;
           font-size: 17px; line-height: 1.4; box-shadow: 0 4px 0 var(--y-d); }
  .s5-cta .arw{ font-size: 17px; }
}

@media (prefers-reduced-motion: reduce){
  .s5-cta{ transition: none; }
}