@charset "UTF-8";
/* ==========================================================================
   SECTION 4 ｜ Before / After 実演
   参考元: assets/images/SECTION 4/SECTION4.1〜4.5_参考元画像.png (1484x1060)
   5枚はタブ01〜05を選んだときの各状態。共通部（バッジ・見出し・リード・タブ・
   背景装飾）は5枚とも同一で、中央パネル・CTA文言・下部の帯だけが入れ替わる。
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標で記述する。
   数値はすべて参考元のピクセル実測値。
   ========================================================================== */

section.s4{
  --y:      #F9C705;   /* 実測 バッジ・マーカーの黄 */
  --y-cta:  #F9C402;   /* 実測 CTAボタンの黄 */
  --navy:   #0A1735;   /* 実測 見出し */
  --navy-t: #03163B;   /* 実測 選択タブ */
  --navy-b: #021334;   /* 実測 下部の帯 */
  --card:   #FDFDFD;   /* 実測 パネル・タブの白 */
  --bg:     #FAFAFB;   /* 実測 ページ地 */
  --gray:   #8A8F9C;

  position: relative;
  display: flex;
  justify-content: center;
  background: #FAFAFB;
  overflow: hidden;
  isolation: isolate;
}

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

/* ---------- 背景装飾（すべて支給素材） ---------- */
.s4-deco{ --u: 0.0673854cqw; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s4-deco img{ position: absolute; display: block; }
.d4-halftone-tr { left: calc(1323*var(--u)); top: calc(65*var(--u)); width: calc(161*var(--u)); }
.d4-sparkle-tr { left: calc(1277*var(--u)); top: calc(78*var(--u)); width: calc(62*var(--u)); }
.d4-lines-tr { left: calc(1164*var(--u)); top: calc(41*var(--u)); width: calc(48*var(--u)); }
.d4-band-diag { left: calc(1416*var(--u)); top: calc(357*var(--u)); width: calc(54*var(--u)); }
.d4-halftone-r { left: calc(1358*var(--u)); top: calc(379*var(--u)); width: calc(88*var(--u)); }
.d4-corner-bl { left: calc(10*var(--u)); top: calc(820*var(--u)); width: calc(204*var(--u)); }
.d4-halftone-bl { left: calc(52*var(--u)); top: calc(635*var(--u)); width: calc(85*var(--u)); }

/* ---------- ① 見出し（実測 ink x83 y81 w1145 h65） ----------
   参考元にあった黄色い「SECTION 4 ／ Before / After 実演」バッジは廃止し、
   紺の筆バナー（.sec-badge／assets/css/sectitle.css）に置き換えた。 */
.s4-head{
  position: absolute; left: calc(80*var(--u)); top: calc(74*var(--u));
  margin: 0; z-index: 3; font-weight: 800; font-size: calc(62*var(--u));
  line-height: 1; letter-spacing: 0; white-space: nowrap;
  font-feature-settings: normal; transform: scale(1.004,1.109); transform-origin: left top;
}
/* “面倒” の背後の黄マーカー（実測 x325 y77 w249 h73） */
.s4-marker{
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(325*var(--u)); top: calc(77*var(--u));
  width: calc(249*var(--u)); height: calc(73*var(--u));
  background: url("../images/section4/marker-yellow-bold.webp") no-repeat center/100% 100%;
}

/* ---------- ③ リード文（実測 ink x88 y172 w711 h24） ---------- */
.s4-lead{
  position: absolute; left: calc(86*var(--u)); top: calc(168*var(--u));
  margin: 0; z-index: 3; font-weight: 700; font-size: calc(25.5*var(--u));
  line-height: 1; letter-spacing: .155em; white-space: nowrap;
}
.s4-lead-ul{                          /* 実測 x168 y194 w228 h8 */
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(168*var(--u)); top: calc(194*var(--u));
  width: calc(228*var(--u)); height: calc(8*var(--u));
  background: url("../images/section4/marker-yellow-thin.webp") no-repeat center/100% 100%;
}

/* ---------- ④ タブ5枚（実測 x70..1441 y225／幅261・間隔17） ---------- */
.s4-tabs{
  position: absolute; left: calc(70*var(--u)); top: calc(225*var(--u));
  width: calc(1371*var(--u)); height: calc(84*var(--u)); z-index: 3;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(17*var(--u));
  margin: 0; padding: 0; list-style: none;
}
.s4-tab{
  position: relative; display: block; height: calc(92*var(--u));
  padding: 0;
  background: var(--card); border: 0; border-radius: calc(12*var(--u));
  box-shadow: 0 calc(2*var(--u)) calc(8*var(--u)) rgba(10,23,53,.08);
  font-family: inherit; color: var(--navy); text-align: left; cursor: pointer;
  transition: background .2s, color .2s;
}
/* 番号は左端で上下中央。5枚とも同じ位置にそろえる */
.s4-tab .n{
  position: absolute; left: calc(20*var(--u)); top: 50%;
  transform: translateY(-50%);
  width: calc(24*var(--u)); height: calc(24*var(--u)); border-radius: 50%;
  background: var(--navy-t); color: #fff; display: grid; place-items: center;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: calc(13*var(--u));
}
/* 本文は番号の右側いっぱいを使い、上下・左右とも中央。
   文字サイズと行送りは5枚で共通（--fs は 03 の最長行 17字が収まる値） */
.s4-tab .t{
  position: absolute; inset: 0; z-index: 1;
  padding: calc(6*var(--u)) calc(4*var(--u)) calc(6*var(--u)) calc(44*var(--u));
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-weight: 500;
  font-size: calc(var(--fs,12.3)*var(--u));
  line-height: calc(22*var(--u));
  margin: 0;
}
.s4-tab[aria-selected="true"]{ background: var(--navy-t); color: #fff; }
.s4-tab[aria-selected="true"] .n{ background: #fff; color: var(--navy-t); }
.s4-tab[aria-selected="true"]::after{      /* 下向きの黄色い三角 */
  content: ""; position: absolute; left: 50%; bottom: calc(-19*var(--u));
  transform: translateX(-50%);
  width: calc(34*var(--u)); height: calc(21*var(--u));
  background: url("../images/section4/tab-caret.webp") no-repeat center/100% 100%;
}
.s4-tab:focus-visible{ outline: calc(3*var(--u)) solid var(--y); outline-offset: calc(2*var(--u)); }

/* ---------- ⑤ 状態パネル（5枚を重ねて切り替える） ---------- */
.s4-panel{ position: absolute; inset: 0; z-index: 2; }
.s4-panel[hidden]{ display: none; }
.s4-board{                            /* 白い大パネル（実測 x30 y335 w1430 h570） */
  position: absolute; left: calc(30*var(--u)); top: calc(335*var(--u));
  width: calc(1430*var(--u)); height: calc(645*var(--u));   /* CTAボタンまで収まる高さ */
  background: var(--card); border-radius: calc(22*var(--u));
  box-shadow: 0 calc(3*var(--u)) calc(14*var(--u)) rgba(10,23,53,.06);
}
/* 支給素材の一部は白地が焼き込まれている。乗算で白を透かし、隣の要素を隠さないようにする */
.s4-panel img{ position: absolute; display: block; mix-blend-mode: multiply; }
.s4-panel .tx{ position: absolute; margin: 0; }

/* Before / After の見出し */
.s4-ba{ font-weight: 800; font-size: calc(46*var(--u)); line-height: 1; letter-spacing: .01em;
        font-feature-settings: normal; }
.s4-ba.before{ color: #747373; }
.s4-ba.after{ color: var(--navy); }
.s4-sub{ font-weight: 700; font-size: calc(20*var(--u)); line-height: calc(30*var(--u)); }
.s4-sub.mid{ text-align: center; }
.s4-note{ font-weight: 500; font-size: calc(15*var(--u)); color: #6D7280; }
.s4-list{ font-weight: 500; font-size: calc(18*var(--u)); line-height: calc(31*var(--u)); }
.s4-divider{ position: absolute; width: calc(2*var(--u)); background: #E7E9EF; }
.s4-dotted{ position: absolute; height: 0;
            border-top: calc(2*var(--u)) dotted #B9BDC7; }
.s4-ul{ background: linear-gradient(var(--y), var(--y)) no-repeat;
        background-size: 100% calc(6*var(--u)); background-position: 0 100%; }

/* ---------- ⑥ CTAボタン（実測 x432 y860 w476 h70／黄の芯 x560 y837 w348 h54） ---------- */
.s4-cta{        /* 位置は状態ごとに --x/--y/--w/--h で与える */
  position: absolute;
  left: calc(var(--x,556)*var(--u)); top: calc(var(--y,833)*var(--u));
  width: calc(var(--w,356)*var(--u)); height: calc(var(--h,62)*var(--u)); z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: calc(24*var(--u));
  color: var(--navy); text-decoration: none;
  font-weight: 700; font-size: calc(21*var(--u)); letter-spacing: .02em; white-space: nowrap;
}
.s4-cta::before{            /* 黄は実測 #F9C402。素材が少し明るいので色相と明度で寄せる */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../images/section4/btn-more-t1.webp") no-repeat center/100% 100%;
  filter: hue-rotate(-2deg) brightness(.985);
}
.s4-cta .arw{ font-family: "Poppins", sans-serif; font-weight: 700; font-size: calc(23*var(--u)); }
.s4-cta:hover{ filter: brightness(1.04); }

/* ==========================================================================
   モバイル / タブレット
   ========================================================================== */
@media (max-width: 900px){
  section.s4{ display: block; padding: 40px 0 46px; }
  .s4 .s4-stage{ height: auto; container-type: normal; width: 100%; min-width: 0; padding: 0 5vw; }
  .s4 .s4-stage > *, .s4 .s4-deco{ --u: 1px; }
  .s4 .s4-deco{ display: none; }

  .s4 .s4-head, .s4 .s4-lead, .s4 .s4-tabs,
  .s4 .s4-cta{
    position: static; left: auto; top: auto; width: 100%; height: auto;
    transform: none; white-space: normal;
  }
  .s4 .s4-marker, .s4 .s4-lead-ul{ display: none; }

  .s4 .s4-head{
    font-size: clamp(24px, 6.4vw, 44px); line-height: 1.32; font-feature-settings: "palt" 1;
  }
  .s4 .s4-head .hl{
    background: linear-gradient(var(--y), var(--y)) no-repeat;
    background-size: 100% 56%; background-position: 0 74%;
  }
  .s4 .s4-lead{ margin-top: 12px; font-size: clamp(13px, 3.6vw, 19px); line-height: 1.75; }
  .s4 .s4-lead .ul{
    background: linear-gradient(var(--y), var(--y)) no-repeat;
    background-size: 100% 5px; background-position: 0 100%;
  }

  /* タブ5つは縦に積むと3段になって場所を取るので、横に流して1段にする */
  .s4 .s4-tabs{
    display: flex; grid-template-columns: none;
    margin-top: 18px; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left: -5vw; margin-right: -5vw;
    padding: 2px 5vw 8px;
    scroll-padding-left: 5vw;
  }
  .s4 .s4-tabs::-webkit-scrollbar{ display: none; }
  .s4 .s4-tab{
    flex: 0 0 68%; scroll-snap-align: center; scroll-snap-stop: always;
    min-height: 76px;
  }
  .s4 .s4-tab{ height: auto; padding: 12px 12px 12px 44px; border-radius: 10px; }
  .s4 .s4-tab .n{ left: 12px; width: 24px; height: 24px; font-size: 12px; }
  .s4 .s4-tab .t{
    position: static; inset: auto; display: block; padding: 0;
    font-size: clamp(11px, 3vw, 14px); line-height: 1.55;
  }
  .s4 .s4-tab[aria-selected="true"]::after{ display: none; }

  /* モバイルでは各パネルを縦に積んだ簡易版にする（絶対配置を解除） */
  .s4 .s4-panel{ position: static; margin-top: 18px; }
  /* 空の白パネル（PC の背景）は出さない */
  .s4 .s4-board{ display: none; }
  /* PC 用に絶対配置していた装飾イラスト（吹き出し・人物・書類など）は、
     縦積みでは意味をなさないので隠す。意味のある絵（モック画面・
     ステップカード）だけ残す */
  /* 直下の画像は「中身のある絵」だけ残す。
     残す＝モック画面 / 数値行(row-) / 結論ボタン(pill-) / ステップカード。
     消す＝吹き出し・人物・書類などの飾り（縦積みでは位置がバラけて読みにくい）。 */
  .s4 .s4-panel > img, .s4 .s4-after > img{ display: none; }
  .s4 .s4-panel > img[src*="mock"],  .s4 .s4-after > img[src*="mock"],
  .s4 .s4-panel > img[src*="/row-"], .s4 .s4-after > img[src*="/row-"],
  .s4 .s4-panel > img[src*="/pill-"],.s4 .s4-after > img[src*="/pill-"],
  .s4 .s4-panel > img[src*="card-step"]{
    display: block; position: static !important;
    width: min(94%, 400px) !important; height: auto !important;
    margin: 12px auto 0;
  }
  .s4 .s4-panel > img[src*="mock"], .s4 .s4-after > img[src*="mock"]{
    width: min(88%, 360px) !important; margin-top: 14px; }
  /* PC は width/height を両方指定して「縦横比を変えて」置いている画像がある。
     スマホで height:auto にすると素材そのままの比率に戻り、中に余白が生まれて
     間延びする。設計時の比率（--ar）を渡してあるので、それで揃える。 */
  .s4 .s4-panel > img[style*="--ar"], .s4 .s4-after > img[style*="--ar"]{
    aspect-ratio: var(--ar); height: auto !important; object-fit: fill;
  }
  /* タブ03の素材は、絵の中身が縦45%前後しかなく上下が白い余白。
     そのまま並べると間延びするので、中身の高さで切り抜いて詰める。 */
  .s4 .s4-panel > img[src*="pill-t3"],
  .s4 .s4-panel > img[src*="row-t3"],
  .s4 .s4-panel > img[src*="card-step"]{
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: cover;
    object-position: center;
  }
  .s4 .s4-panel > img[src*="pill-t3"]{ aspect-ratio: 1448 / 560 !important; }
  .s4 .s4-panel > img[src*="row-t3-change"]{ aspect-ratio: 1600 / 300 !important; }
  .s4 .s4-panel > img[src*="row-t3-said"]{ aspect-ratio: 1600 / 470 !important; }
  .s4 .s4-panel > img[src*="card-step"]{ aspect-ratio: 1600 / 500 !important; }
  /* 位置・大きさのインライン指定（PC の設計座標）は !important でしか外せない */
  .s4 .s4-fact, .s4 .s4-pill, .s4 .s4-said, .s4 .s4-row, .s4 .s4-bar, .s4 .s4-chk{
    width: 100% !important; height: auto !important; }
  .s4 .s4-panel img, .s4 .s4-panel .tx, .s4 .s4-divider,
  .s4 .s4-drive, .s4 .s4-search, .s4 .s4-chev, .s4 .s4-dotted, .s4 .s4-bar,
  .s4 .s4-fact, .s4 .s4-pill{
    position: static; width: auto; max-width: 100%; height: auto;
  }
  .s4 .s4-said, .s4 .s4-chk, .s4 .s4-row{ flex-wrap: wrap; }
  .s4 .s4-row{ margin-top: 14px; gap: 8px 12px; font-size: clamp(13px, 3.7vw, 17px);
               line-height: 1.6; }
  .s4 .s4-row.shade{ height: auto; padding: 10px 14px; border-radius: 12px; }
  .s4 .s4-row .k{ height: 28px; padding: 0 12px; font-size: 12.5px; }
  .s4 .s4-said{ margin-top: 14px; padding: 10px 12px; gap: 8px 10px;
                font-size: 13px; }
  .s4 .s4-said .k, .s4 .s4-said .h{ height: 26px; font-size: 12.5px; }
  .s4 .s4-said .b{ font-size: 12.5px; line-height: 1.55; }
  .s4 .s4-ba.before{ margin-top: 6px; }
  .s4 .s4-ba.after{ margin-top: 20px; }
  /* Before と After の間に黄色い下向き矢印を入れる（PC の右向き矢印の代役） */
  .s4 .s4-after::before{
    content: ""; display: block; width: 30px; height: 34px; margin: 18px auto 0;
    background: var(--y);
    clip-path: polygon(30% 0, 70% 0, 70% 55%, 100% 55%, 50% 100%, 0 55%, 30% 55%);
  }
  .s4 .s4-after{ display: block; }
  .s4 .s4-fact, .s4 .s4-pill{ margin-top: 10px; min-height: 56px; max-width: 100%; }
  /* アイコンも img 一括リセットで原寸に戻るので指定し直す */
  .s4 .s4-pill img{ width: 34px; height: auto; flex: none; }
  /* 山形は「10分 → 0秒」の変化を示す大事な記号なので、スマホでも出す
     （以前は点線と一緒にまとめて消していた） */
  .s4 .s4-dotted{ display: none; }
  .s4 .s4-panel .m-hide{ display: none; }
  .s4 .s4-panel .m-row{ display: block; margin-top: 12px; }
  .s4 .s4-ba{ font-size: clamp(26px, 7vw, 40px); }
  .s4 .s4-sub{ font-size: clamp(13px, 3.6vw, 18px); line-height: 1.7; margin-top: 6px; }
  .s4 .s4-list{ font-size: clamp(12.5px, 3.4vw, 17px); line-height: 1.8; }
  /* 箇条書きの ✕ アイコンは、上の img 一括リセットで原寸に戻ってしまうので指定し直す */
  .s4 .s4-list .ic{ width: 20px; height: 20px; vertical-align: -3px; }
  .s4 .s4-note{ font-size: 12px; }
  .s4 .s4-divider{ display: none; }

  /* 絶対配置をやめた要素の中に「絶対配置の擬似要素」がいると、
     基準がステージまで飛んでセクション全体を覆ってしまう。
     疑似要素を持つ3つだけ relative に戻して閉じ込める */
  .s4 .s4-cta, .s4 .s4-list, .s4 .s4-search{ position: relative; }
  .s4 .s4-cta{ margin-top: 18px; min-height: 64px; background-size: 100% 100%;
               font-size: clamp(14px, 3.8vw, 21px); }
}


/* ---------- パネル内で使う小さな部品 ---------- */
.s4-list.chk{ padding-left: calc(28*var(--u)); }
.s4-list.chk::before{ content: "✓\A✓\A✓\A✓"; white-space: pre; position: absolute;
                      left: 0; top: 0; color: var(--y); font-weight: 800;
                      line-height: inherit; font-size: inherit; }
.s4-list .ic{ display:inline-block; width: calc(20*var(--u)); height: calc(20*var(--u));
              margin-right: calc(10*var(--u)); vertical-align: calc(-3*var(--u)); position: static; }
.s4-big{ font-family:"Poppins",sans-serif; font-weight:700; font-size: calc(58*var(--u));
         line-height:1; text-align:center; }
.s4-big small{ font-size: calc(24*var(--u)); font-family:"Noto Sans JP",sans-serif; }
.s4-big.yel{ color: var(--y); }
.s4-apps{ position:absolute; margin:0; padding:0; list-style:none; display:grid;
          grid-auto-flow:column; grid-auto-columns:1fr; gap: calc(12*var(--u)); }
.s4-apps li{ background: var(--card); border-radius: calc(12*var(--u));
             box-shadow: 0 calc(2*var(--u)) calc(7*var(--u)) rgba(10,23,53,.07);
             padding: calc(8*var(--u)) calc(3*var(--u)); text-align:center;
             font-weight:700; font-size: inherit; line-height: 1.25;
             display: flex; flex-direction: column; justify-content: center; }
.s4-apps .ico{ position: static; display: block; mix-blend-mode: normal;
               width: calc(var(--ico,30)*var(--u)); height: calc(var(--ico,30)*var(--u));
               margin: 0 auto calc(var(--icogap,8)*var(--u)); object-fit: contain; }
/* タブ05 は7個まとめて1枚のカードに乗る */
.s4-apps.seven{ background: #FCFCFD; border-radius: calc(12*var(--u));
                box-shadow: 0 calc(2*var(--u)) calc(7*var(--u)) rgba(10,23,53,.07); }
.s4-apps.seven li{ background: none; box-shadow: none; padding: calc(6*var(--u)) 0;
                   letter-spacing: -.03em; white-space: nowrap; }
.s4-flow{ position:absolute; margin:0; padding: calc(10*var(--u)) calc(14*var(--u));
          list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
          gap: calc(26*var(--u)); background: #FCFCFD; border-radius: calc(12*var(--u));
          border: calc(1.5*var(--u)) solid #C7CCD9; text-align:center;
          font-weight:700; font-size: calc(13*var(--u)); }
.s4-flow li{ position: relative; }
.s4-flow li + li::before{        /* 項目のあいだの矢印 */
  content: ""; position: absolute; left: calc(-19*var(--u)); top: 42%;
  width: calc(16*var(--u)); height: calc(10*var(--u)); background: var(--navy);
  clip-path: polygon(0 34%,58% 34%,58% 0,100% 50%,58% 100%,58% 66%,0 66%);
}
.s4-flow img{ position: static; width: calc(34*var(--u)); height: auto;
              margin: 0 auto calc(6*var(--u)); }
.s4-applist{ position:absolute; margin:0; padding: calc(12*var(--u)); list-style:none;
             background: var(--card); border-radius: calc(12*var(--u));
             box-shadow: 0 calc(2*var(--u)) calc(7*var(--u)) rgba(10,23,53,.07);
             font-weight:500; font-size: calc(14*var(--u)); line-height: calc(30*var(--u)); }
.s4-applist li{ display: flex; align-items: center; gap: calc(9*var(--u)); }
.s4-applist img{ position: static; mix-blend-mode: normal; flex: none;
                 width: calc(17*var(--u)); height: calc(17*var(--u)); object-fit: contain; }
.s4-panel .tx b{ font-weight: 800; }

/* ---- タブ05 の部品（対応する素材が無いので組む） ---- */
.s4-search{                              /* 検索窓 */
  position: absolute; display: flex; align-items: center;
  padding-left: calc(38*var(--u)); border-radius: calc(999*var(--u));
  background: #F1F2F5; color: #9AA0AC; font-size: calc(14*var(--u)); font-weight: 500;
}
.s4-search::before{
  content: ""; position: absolute; left: calc(14*var(--u));
  width: calc(13*var(--u)); height: calc(13*var(--u)); border-radius: 50%;
  border: calc(2*var(--u)) solid #9AA0AC;
}
.s4-chev{                                /* 10分 → 0秒 の下向き山形 */
  position: absolute; aspect-ratio: 2/1;
  background: linear-gradient(#0A1735,#0A1735) no-repeat;
  clip-path: polygon(0 0,50% 70%,100% 0,100% 22%,50% 92%,0 22%);
}
.s4-drive{                               /* ドライブ画面のイメージ */
  position: absolute; background: #FCFCFD; border-radius: calc(10*var(--u));
  box-shadow: 0 calc(2*var(--u)) calc(7*var(--u)) rgba(10,23,53,.07);
  display: grid; grid-template-columns: 5fr 13fr; overflow: hidden;
  font-size: calc(11*var(--u)); color: var(--navy);
}
.s4-drive ul{ margin: 0; padding: calc(10*var(--u)); list-style: none; }
.s4-drive .nav li{ padding: calc(4*var(--u)) calc(6*var(--u)); border-radius: calc(999*var(--u)); }
.s4-drive .nav li:first-child{ font-weight: 700; font-size: calc(13*var(--u)); }
.s4-drive .nav li.on{ background: #E8EEFB; }
.s4-drive .files li{
  display: grid; grid-template-columns: 3fr 1fr 1fr; gap: calc(6*var(--u));
  padding: calc(7*var(--u)) 0; border-bottom: 1px solid #EDEEF2;
}
.s4-drive .files b{ font-weight: 700; }
.s4-drive .files span{ color: #6D7280; }
.s4-chk{                                 /* ✓つきの白いピル */
  position: absolute; display: flex; align-items: center; gap: calc(14*var(--u));
  padding-left: calc(18*var(--u)); border-radius: calc(999*var(--u));
  background: #FCFCFD; border: calc(2*var(--u)) solid var(--navy-t);
  font-weight: 700; font-size: calc(17*var(--u)); white-space: nowrap;
}
.s4-chk.plain{ border: 0; box-shadow: 0 calc(2*var(--u)) calc(7*var(--u)) rgba(10,23,53,.07);
               font-size: calc(15*var(--u)); }
.s4-chk.plain img{ width: calc(20*var(--u)); height: calc(20*var(--u)); }
.s4-chk img{ position: static; width: calc(26*var(--u)); height: calc(26*var(--u)); }
.s4-said{                                /* 黄色い枠の「言われたこと → 半歩上」行 */
  position: absolute; display: flex; align-items: center; gap: calc(18*var(--u));
  padding: 0 calc(16*var(--u)); border: calc(2*var(--u)) solid var(--y);
  border-radius: calc(10*var(--u)); background: #FDFDFD;
  font-weight: 700; font-size: calc(15*var(--u)); white-space: nowrap;
}
.s4-said .k{
  flex: none; display: grid; place-items: center;
  width: calc(108*var(--u)); height: calc(28*var(--u));
  background: var(--navy-t); color: #fff; border-radius: calc(6*var(--u));
  font-size: calc(13*var(--u));
}
.s4-said .h{
  flex: none; display: grid; place-items: center;
  width: calc(86*var(--u)); height: calc(28*var(--u));
  background: var(--y); border-radius: calc(6*var(--u)); font-size: calc(15*var(--u));
}
.s4-said .ar{
  flex: none; width: calc(24*var(--u)); height: calc(16*var(--u)); background: var(--y);
  clip-path: polygon(0 30%,58% 30%,58% 0,100% 50%,58% 100%,58% 70%,0 70%);
}
.s4-said .b{ font-size: calc(14*var(--u)); line-height: calc(20*var(--u)); white-space: normal; }

/* ---------- タブ02 の After 右カラム ----------
   支給素材（row-t2-num1/2、pill-t2-a/b）は「自社で即日」「自分たちで動かせる」という
   事実と違う文言が焼き込まれていて使えないため、同じ見た目をテキストで組み直す */
.s4-fact{
  position: absolute; display: flex; align-items: center; gap: calc(12*var(--u));
  padding: 0 calc(16*var(--u));
  background: var(--card); border: calc(1.5*var(--u)) solid #E4E7EE;
  border-radius: calc(12*var(--u));
  box-shadow: 0 calc(2*var(--u)) calc(6*var(--u)) rgba(10,23,53,.05);
  white-space: nowrap;
}
.s4-fact .k{ font-weight: 700; font-size: calc(15*var(--u)); color: var(--navy); }
.s4-fact .ar{
  flex: none; width: calc(22*var(--u)); height: calc(14*var(--u)); background: var(--navy);
  clip-path: polygon(0 32%,58% 32%,58% 0,100% 50%,58% 100%,58% 68%,0 68%);
}
.s4-fact .v{ margin-left: auto; font-weight: 800; font-size: calc(22*var(--u)); color: var(--y-cta); }
/* 初期費用0円はいちばん強く見せたいので一段大きく */
.s4-fact.big .v{ font-size: calc(30*var(--u)); }
/* 値が2行になるもの（契約条件） */
.s4-fact.two{ white-space: normal; }
.s4-fact.two .v{
  font-size: calc(16*var(--u)); line-height: calc(22*var(--u));
  text-align: right; white-space: normal;
}

.s4-pill{
  position: absolute; display: flex; align-items: center; gap: calc(14*var(--u));
  padding: 0 calc(20*var(--u));
  background: var(--card); border: calc(2.5*var(--u)) solid var(--navy);
  border-radius: calc(33*var(--u));
  font-weight: 800; font-size: calc(20*var(--u)); line-height: calc(25*var(--u));
  color: var(--navy);
}
.s4-pill img{
  position: static; flex: none; width: calc(40*var(--u)); height: auto;
  mix-blend-mode: normal;
}

/* 「言われたこと｜…」「結果｜…」の行（参考元に対応する素材が無いので組む） */
.s4-row{
  display: flex; align-items: center; gap: calc(20*var(--u));
  font-weight: 700; font-size: calc(21*var(--u)); line-height: calc(30*var(--u));
  white-space: nowrap; color: var(--navy);
}
.s4-row .k{
  flex: none; display: grid; place-items: center; height: calc(30*var(--u));
  background: #6C6C6C; color: #fff; border-radius: calc(15*var(--u));
  font-weight: 700; font-size: calc(15*var(--u)); letter-spacing: .04em;
}
/* 「属人化・抜け漏れ…」「標準化・見える化…」の帯（対応する素材が無いので組む） */
.s4-bar{
  display: grid; place-items: center; border-radius: calc(999*var(--u));
  font-weight: 700; letter-spacing: .04em; white-space: nowrap; margin: 0;
}
.s4-bar.line{ border: calc(1.5*var(--u)) solid #8E8D8D; background: #FCFCFD; color: var(--navy); }
.s4-bar.navy{ background: var(--navy-t); color: #fff; }

/* 「言われたこと」のピルは支給素材そのもの（文字は読み上げ用に残す） */
.s4-row .k.asset{ background: url("../images/section4/pill-said-gray.webp") no-repeat center/100% 100%;
                  color: transparent; }
.s4-said .k.asset{ background: url("../images/section4/pill-said-navy.webp") no-repeat center/100% 100%;
                   color: transparent; }
.s4-row.shade{
  background: #EDEDEC; border-radius: calc(23*var(--u));
  height: calc(45*var(--u)); padding-left: calc(4*var(--u));
}

@media (max-width: 900px){
  /* ──────────────────────────────────────────────────────
     タブ04・05 の部品
     これらは幅を「設計px × --u」でインライン指定している。スマホでは
     --u が 1px になるため 596px / 631px / 540px のまま残り、画面幅
     435px を突き抜けて崩れていた。幅を100%に戻し、中身も縦向きに組み直す。
     インライン指定は !important でしか外せない。
     ────────────────────────────────────────────────────── */
  .s4 .s4-apps, .s4 .s4-flow, .s4 .s4-applist,
  .s4 .s4-drive, .s4 .s4-search, .s4 .s4-chk{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 12px;
    box-sizing: border-box;
  }

  /* アプリ一覧：横1列 → 3列（タブ05の7個は4列） */
  .s4 .s4-apps{
    display: grid !important;
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    gap: 8px; padding: 10px; font-size: 12px !important;
  }
  .s4 .s4-apps.seven{ grid-template-columns: repeat(4, 1fr); font-size: 11.5px !important; }
  .s4 .s4-apps li{ padding: 10px 4px; border-radius: 10px; }
  .s4 .s4-apps .ico{ width: 30px !important; height: 30px !important; margin: 0 auto 6px; }
  .s4 .s4-apps.seven li{ white-space: normal; letter-spacing: 0; }

  /* 使い方の流れ：横4列 → 縦1列（矢印は下向きに置き直す） */
  .s4 .s4-flow{
    display: grid !important;
    grid-auto-flow: row; grid-template-columns: 1fr;
    gap: 22px; padding: 14px; font-size: 14px !important;
  }
  .s4 .s4-flow li{ display: flex; align-items: center; gap: 12px; text-align: left; }
  .s4 .s4-flow img{ width: 32px !important; margin: 0; flex: none; }
  .s4 .s4-flow li + li::before{
    left: 50%; top: -16px; transform: translateX(-50%);
    width: 12px; height: 10px;
    clip-path: polygon(34% 0, 34% 58%, 0 58%, 50% 100%, 100% 58%, 66% 58%, 66% 0);
  }

  /* アプリの縦リスト（タブ05のBefore側） */
  .s4 .s4-applist{ padding: 12px; font-size: 14px !important; line-height: 1.9 !important; }
  .s4 .s4-applist img{ width: 20px !important; height: 20px !important; }

  /* 検索窓 */
  .s4 .s4-search{ height: 36px !important; padding-left: 38px; font-size: 14px !important; }
  .s4 .s4-search::before{ left: 14px; width: 13px; height: 13px; border-width: 2px; }

  /* ドライブ画面のイメージ：左のメニューは省いて一覧だけ見せる */
  .s4 .s4-drive{ display: block !important; padding: 4px 0; font-size: 12.5px !important; }
  .s4 .s4-drive .nav{ display: none; }
  .s4 .s4-drive .files{ padding: 6px 12px; }
  .s4 .s4-drive .files li{ grid-template-columns: 2fr 1fr; gap: 4px 8px; padding: 8px 0; }
  .s4 .s4-drive .files span:last-child{ display: none; }

  /* ✓つきのピル */
  .s4 .s4-chk{
    padding: 10px 16px; border-radius: 12px;
    font-size: 14.5px !important; white-space: normal !important;
    gap: 10px; margin-top: 10px;
  }
  .s4 .s4-chk img{ width: 22px !important; height: 22px !important; flex: none; }

  /* 10分 → 0秒 の数字と山形 */
  .s4 .s4-big{
    position: static !important; width: auto !important;
    font-size: 34px !important; text-align: center; margin-top: 8px;
  }
  .s4 .s4-big small{ font-size: 16px; }
  .s4 .s4-chev{
    position: static !important; width: 26px !important; height: 13px !important;
    margin: 6px auto;
  }
  /* 「資料を探す」「30分で像が持てる」＝矢印の脇の小さな見出し。
     インライン幅（106px / 120px）のまま左に浮いてしまうので、
     数字とひとかたまりに見えるよう中央にそろえる。
     ※ .s4-after の中で最初の <p> がこれに当たるのはタブ04・05だけ
        （01・02・03 は最初の <p> が「After」の見出しなので当たらない） */
  .s4 .s4-after > p.s4-sub:first-of-type{
    width: 100% !important; text-align: center;
    margin-top: 10px; font-size: 15px !important; line-height: 1.6 !important;
  }
  .s4 .s4-panel .tx.s4-sub{ white-space: normal !important; }

  /* 10分 → 0秒 の山形をはっきり見せる */
  .s4 .s4-chev{
    display: block !important; position: static !important;
    width: 30px !important; height: 15px !important; margin: 10px auto;
  }

  /* 散在イメージのモックは、意味が伝わる大きさで十分 */
  .s4 .s4-panel > img[src*="mock-list"]{ width: min(66%, 260px) !important; }
}

/* ==========================================================================
   モーション
   Before は最初から見えていて、After 側（.s4-after の中身）だけが
   少し遅れて左から順にゆっくり現れる。＝「変わっていく」のを見せる。
   タブを切り替えると [hidden] が外れた瞬間にアニメーションが再生される。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  html.js .s4-panel{ animation: s4in .45s ease both; }
  @keyframes s4in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

  /* セクションが画面に入るまでは After を伏せておく */
  html.js .s4-panel .s4-after > *{ opacity: 0; }

  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *{
    animation: s4-after-in 1.4s cubic-bezier(.16,.68,.24,1) both;
    animation-delay: 2.65s;            /* 下の一覧より後ろの要素はここで受ける */
  }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(1) { animation-delay: .70s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(2) { animation-delay: .85s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(3) { animation-delay: 1.00s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(4) { animation-delay: 1.15s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(5) { animation-delay: 1.30s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(6) { animation-delay: 1.45s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(7) { animation-delay: 1.60s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(8) { animation-delay: 1.75s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(9) { animation-delay: 1.90s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(10){ animation-delay: 2.05s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(11){ animation-delay: 2.20s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(12){ animation-delay: 2.35s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(13){ animation-delay: 2.50s; }

  /* Before → After をつなぐ黄色い矢印は、After が出はじめる直前に押し出す */
  html.js .s4.is-in .s4-panel:not([hidden]) > img[src*="arrow-yellow"]{
    animation: s4-arrow-push .7s cubic-bezier(.3,.8,.35,1.3) .35s both;
  }
}
@keyframes s4-after-in{
  from{ opacity: 0; transform: translateX(calc(34*var(--u))) translateY(calc(8*var(--u))); }
  to  { opacity: 1; transform: none; }
}
@keyframes s4-arrow-push{
  0%  { opacity: 0; transform: translateX(calc(-22*var(--u))); }
  70% { opacity: 1; transform: translateX(calc(5*var(--u))); }
  100%{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .s4 .s4-panel{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .s4 .s4-after > *{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── スマホ：After の出現をスクロール速度に合わせて短くする ──
   PC は 1.4秒＋0.15秒刻みでじっくり見せるが、スマホは指でどんどん送るので
   出そろうまで 3.9秒だと「白い空白」を見せる時間が長くなる。1秒以内に収める。 */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *{
    animation-duration: .5s;
    animation-delay: .12s;
  }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(1) { animation-delay: .10s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(2) { animation-delay: .16s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(3) { animation-delay: .22s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(4) { animation-delay: .28s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(5) { animation-delay: .34s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(6) { animation-delay: .40s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(7) { animation-delay: .44s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(8) { animation-delay: .48s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(9) { animation-delay: .52s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(10){ animation-delay: .56s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(11){ animation-delay: .60s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(12){ animation-delay: .64s; }
  html.js .s4.is-in .s4-panel:not([hidden]) .s4-after > *:nth-child(13){ animation-delay: .68s; }
  html.js .s4.is-in .s4-panel:not([hidden]) > img[src*="arrow-yellow"]{
    animation-duration: .35s; animation-delay: .05s;
  }
  /* 寄ってくる距離も画面が狭いぶん控えめに */
  @keyframes s4-after-in{
    from{ opacity: 0; transform: translateY(10px); }
    to  { opacity: 1; transform: none; }
  }
}