@charset "UTF-8";
/* ==========================================================================
   SECTION 7 ｜ 4コマ漫画「『面倒』が、『わっ！すごい！』に変わる瞬間。」
   参考元: assets/images/SECTION 7/SECTION7_参考元画像.png (1484x1060)
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標（高さ 998px）で記述する。
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値はすべて参考元のピクセル実測値（tools/meas7.py・tools/find7.py）。
   ファイル末尾の「[CAL] 調整値」は tools/cal7.py が自動で書き換える。手で書かない。
   ========================================================================== */

section.s7{
  --y:      #F5C001;   /* 実測 バッジの黄 */
  --y-mk:   #FED334;   /* 実測 見出しマーカーの黄 */
  --y-cta:  #FBC201;   /* 実測 CTAボタンの黄 */
  --y-ul:   #F4BC0A;   /* 実測 約束パネルの下線の黄（CTAより少し暗い） */
  --y-d:    #E2AC00;   /* ボタンの下端（濃い黄） */
  --ink:    #071535;   /* 実測 見出しの濃紺 */
  --ink-c:  #0D1028;   /* 実測 コマ見出しの濃紺 */
  --ink-b:  #090C28;   /* 実測 約束パネルの濃紺 */
  --navy:   #001132;   /* 実測 紺帯 */
  --card:   #FEFEFE;   /* 実測 カード地（背景とほぼ同色。境界は影でできている） */
  --bg:     #FDFDFD;   /* 実測 ページ地 */
  --line:   #1B2040;   /* 実測 コマの仕切り線 */
  --pline:  #DFDFE3;   /* 実測 約束パネルの枠線（2.5px相当のやわらかい線） */

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

.s7-stage{
  --u: 0.0673854cqw;              /* 1 設計px。1484px 幅のとき 1px */
  position: relative;
  width: min(100%, 1484px);
  height: calc(920 * var(--u));
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--ink);
  font-feature-settings: "palt" 0;   /* 参考元は約物を詰めていない（括弧・読点の間隔が広い） */
}
/* コンテナ幅が確定してから --u を使うため、内側にもう1枚敷く */
.s7-stage > *{ --u: 0.0673854cqw; }

.s7-stage img{ display: block; }

/* 位置指定の共通形（--x/--y2/--w だけを各要素で持つ） */
.s7-abs{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
}

/* ── 装飾（カードの後ろ） ───────────────────────────────── */
.s7-deco{ position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.s7-deco{
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
}
.s7-deco.flipx{ transform: scaleX(-1); }
.s7-deco.fixh{ height: calc(var(--h) * var(--u)); }

/* ── バッジ ─────────────────────────────────────────── */

/* ── 見出し ─────────────────────────────────────────── */
/* 参考元は「『面倒』」「『わっ！すごい！』」だけが大きく、つなぎの文字は小さい。
   1つの font-size では合わないので、4つに分けてそれぞれ実測値を当てる。 */
.s7-head{
  position: absolute; z-index: 2; margin: 0;
  left: 0; top: 0; width: 100%; height: 0;
  font-weight: 900; color: var(--ink);
  pointer-events: none;
}
.s7-head .hs{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  letter-spacing: calc(var(--ls) * 1em);
  line-height: 1;
  white-space: nowrap;
  transform: scaleX(var(--sx, 1));
  transform-origin: left top;
}
.s7-head .b1{ --x:44.0; --y2:88.8; --fs:60.606; --ls:0.0; --sx:0.825; }
.s7-head .t1{ --x:100.6; --y2:92.9; --fs:58.947; --ls:0.09179; --sx:1.0; }
.s7-head .b2{ --x:230.1; --y2:95.8; --fs:56.061; --ls:0.0; --sx:0.845; }
.s7-head .s1{ --x:270.3; --y2:106.9; --fs:42.105; --ls:0.04375; --sx:1.0; }
.s7-head .b3{ --x:327.6; --y2:76.7; --fs:62.121; --ls:0.0; --sx:0.7625; }
.s7-head .t2{ --x:379.3; --y2:83.8; --fs:64.948; --ls:0.0; --sx:0.8507; }
.s7-head .b4{ --x:804.1; --y2:89.6; --fs:62.121; --ls:0.0; --sx:0.7625; }
.s7-head .s2{ --x:842.4; --y2:109.2; --fs:39.583; --ls:0.05816; --sx:1.0; }
.s7-mk{                        /* 見出しの黄マーカー（参考元の実測位置） */
  position: absolute; z-index: 1;
  left: calc(358 * var(--u));
  top:  calc(79 * var(--u));
  width: calc(456 * var(--u));
  height: calc(81 * var(--u));   /* 参考元の黄の高さ79pxに合わせる（素材は少し縦長） */
  pointer-events: none;
}

.s7-sub{
  position: absolute; z-index: 2; margin: 0;
  left: calc(var(--sub-x, 64) * var(--u));
  top:  calc(var(--sub-y, 174) * var(--u));
  font-size: calc(var(--sub-fs, 24) * var(--u));
  letter-spacing: calc(var(--sub-ls, 0.01) * 1em);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

/* ── 4コマのカード ───────────────────────────────────── */
.s7-card{
  position: absolute; z-index: 1;
  left: calc(52 * var(--u));
  top:  calc(232 * var(--u));
  width:  calc(1381 * var(--u));
  height: calc(567 * var(--u));
  background: var(--card);
  border-radius: calc(24 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(9 * var(--u)) rgba(18, 22, 55, .15);
}

/* コマの仕切り（濃紺の細い縦線） */
.s7-div{
  position: absolute; z-index: 5;   /* 参考元では線がイラストの上を通る */
  top:    calc(257 * var(--u));
  height: calc(363 * var(--u));
  /* 参考元の仕切りは 75 / 58 / 235 の3列。単色の細い div ではこの濃淡が出ないので、
     3px幅にグラデーションを敷いて同じ濃度分布にする。 */
  width:  calc(3 * var(--u));
  background: linear-gradient(90deg,
      rgba(20, 25, 56, .86) 0 33.3%,
      rgba(20, 25, 56, .96) 33.3% 66.6%,
      rgba(20, 25, 56, .09) 66.6% 100%);
}
.s7-div.d1{ left: calc(387 * var(--u)); }
.s7-div.d2{ left: calc(718 * var(--u)); }
.s7-div.d3{ left: calc(1044.6 * var(--u)); }

/* 各コマは1つの「フレーム」。参考元では絵がコマの幅で切り取られていて、
   隣のコマにはみ出さない（例：コマ4の男性の肩は仕切りでスパッと切れている）。
   ステージ全体に重ねた箱を clip-path でコマの幅に切り抜き、その中に絵を入れる。
   中身はステージ座標のまま置けるので、実測値を書き換えずに済む。 */
.s7-frame{
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  /* clip-path は重ね順の文脈を作るので、枠自体をカード(z-index:1)より前に出す。
     入れないと中身がカードの下に隠れて何も見えなくなる。 */
  z-index: 3;
}
.s7-frame.f1{ clip-path: inset(calc(232 * var(--u)) calc(1097 * var(--u)) calc(295 * var(--u)) calc(53 * var(--u))); }
.s7-frame.f2{ clip-path: inset(calc(232 * var(--u)) calc(766 * var(--u)) calc(295 * var(--u)) calc(390 * var(--u))); }
.s7-frame.f3{ clip-path: inset(calc(232 * var(--u)) calc(439 * var(--u)) calc(295 * var(--u)) calc(721 * var(--u))); }
.s7-frame.f4{ clip-path: inset(calc(232 * var(--u)) calc(53 * var(--u)) calc(295 * var(--u)) calc(1048 * var(--u))); }

/* コマの中身（番号・見出し・絵） */
.s7-num{ position: absolute; z-index: 3; height: auto; }
.s7-cap.c1{ --x:143; --y2:258; --fs:21; --ls:0; --lh:30 }
.s7-cap.c2{ --x:465; --y2:260; --fs:21; --ls:0; --lh:30 }
.s7-cap.c3{ --x:782; --y2:260; --fs:21; --ls:0; --lh:30 }
.s7-cap.c4{ --x:1122; --y2:259; --fs:21; --ls:0; --lh:30 }
.s7-phead.p1{ --x:234; --y2:665; --fs:24; --ls:0 }
.s7-phead.p2{ --x:653; --y2:665; --fs:24; --ls:0 }
.s7-phead.p3{ --x:1050; --y2:665; --fs:24; --ls:0 }
.s7-pbody.b1{ --fs:16.5; --ls:0; --x:234; --y2:713; --lh:27 }
.s7-pbody.b2{ --fs:16.5; --ls:0; --x:653; --y2:713; --lh:27 }
.s7-pbody.b3{ --fs:16.5; --ls:0; --x:1050; --y2:712; --lh:27 }
.s7-pul.u1{ --x:231; --y2:702; --w:269 }
.s7-pul.u2{ --x:651; --y2:702; --w:210 }
.s7-pul.u3{ --x:1047; --y2:702; --w:269 }

.s7-cap{
  position: absolute; z-index: 3; margin: 0;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  font-size: calc(var(--fs, 21) * var(--u));
  letter-spacing: calc(var(--ls, 0) * 1em);
  line-height: calc(var(--lh, 30) * var(--u));
  font-weight: 700;
  color: var(--ink-c);
  white-space: nowrap;
}
.s7-art{ position: absolute; z-index: 3; }
/* 高さも指定する要素（参考元と素材で内部の比率が違うもの） */
.s7-abs.fixh{ height: calc(var(--h) * var(--u)); }

/* コマ3：ノートPCとToDoを囲む1つの角丸枠と、その中の縦の仕切り */
.s7-p3box{
  position: absolute; z-index: 2;
  left: calc(739 * var(--u));
  top:  calc(339 * var(--u));
  width:  calc(294 * var(--u));
  height: calc(178 * var(--u));
  border: calc(1 * var(--u)) solid #333A5C;
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(70, 78, 110, .40),
              inset 0 0 0 calc(1 * var(--u)) rgba(70, 78, 110, .40);
  border-radius: calc(14 * var(--u));
  background: var(--card);
}
.s7-p3div{
  position: absolute; z-index: 3;
  left: calc(894 * var(--u));
  top:  calc(360 * var(--u));
  width: calc(1.4 * var(--u));
  height: calc(67 * var(--u));
  background: #C9CBD6;
}

/* コマ3の曲がった矢印（支給素材は直線のため SVG で描く） */
.s7-arrow{
  position: absolute; z-index: 3;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  overflow: visible;
}
.s7-arrow path{ fill: none; stroke: #1B2144; stroke-width: 2.4; stroke-linecap: round; }
.s7-arrow polyline{ fill: none; stroke: #1B2144; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── 約束パネル ─────────────────────────────────────── */
.s7-promise{
  position: absolute; z-index: 3;
  left: calc(79 * var(--u));
  top:  calc(640 * var(--u));
  width:  calc(1323 * var(--u));
  height: calc(141 * var(--u));
  /* 参考元の線は 246 / 226 / 238 の3段のやわらかい線。ブラウザは枠線を整数pxに
     丸めるので、1pxの芯 ＋ 外側と内側に薄いリングを重ねて同じ濃度分布を作る。 */
  border: calc(1 * var(--u)) solid var(--pline);
  box-shadow: 0 0 0 calc(1 * var(--u)) rgba(223, 223, 227, .45),
              inset 0 0 0 calc(1 * var(--u)) rgba(223, 223, 227, .45);
  border-radius: calc(14 * var(--u));
  background: var(--card);
}
.s7-pico{ position: absolute; z-index: 4; height: auto; }
.s7-phead{
  position: absolute; z-index: 4; margin: 0;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  font-size: calc(var(--fs, 24) * var(--u));
  letter-spacing: calc(var(--ls, 0) * 1em);
  font-weight: 700; line-height: 1;
  color: var(--ink-b); white-space: nowrap;
}
.s7-pul{                       /* 見出しの黄下線（幅も参考元の実測） */
  position: absolute; z-index: 4;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  width:  calc(var(--w) * var(--u));
  height: calc(4 * var(--u));
  background: var(--y-ul);
}
.s7-pbody{
  position: absolute; z-index: 4; margin: 0;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  font-size: calc(var(--fs, 16.5) * var(--u));
  letter-spacing: calc(var(--ls, 0) * 1em);
  line-height: calc(var(--lh, 27) * var(--u));
  font-weight: 500;
  color: var(--ink-b); white-space: nowrap;
}

/* ── CTA（黄ボタン） ────────────────────────────────── */
.s7-cta-y{
  position: absolute; z-index: 3;
  left: calc(435 * var(--u));
  top:  calc(810 * var(--u));
  width:  calc(609 * var(--u));
  height: calc(68 * var(--u));
  background: var(--y-cta);
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(30, 30, 40, .12);
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.s7-cta-y span{
  position: absolute;
  left: calc(var(--ctay-x, 62) * var(--u));
  top:  calc(var(--ctay-y, 22) * var(--u));
  font-size: calc(var(--ctay-fs, 34) * var(--u));
  letter-spacing: calc(var(--ctay-ls, 0.02) * 1em);
  font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.s7-cta-y svg{
  position: absolute;
  left: calc(510 * var(--u));
  top:  calc(22 * var(--u));
  width: calc(35 * var(--u)); height: auto;
}
.s7-cta-y svg path{ fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── CTA（紺帯） ───────────────────────────────────── */

/* ── 見えない見出し（見出し階層のため） ─────────────────── */
.s7-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 約束のグループ箱と4コマの箱。PC では箱を作らない（見た目に影響しない） */
.s7-pit, .s7-koma{ display: contents; }

/* ==========================================================================
   スマホ：PC の絶対配置ステージをやめて縦に積む。
   4コマは「1コマ＝1枚のカード」。コマの中身は設計座標のまま、コマの
   原点（--ox, 232）ぶんだけ平行移動して、コマ幅がちょうど画面幅になる
   ように --u を再定義する（拡大表示なので文字もそのまま読める）。
   ========================================================================== */
@media (max-width: 900px){
  section.s7{ overflow-x: hidden; padding: 44px 0 52px; }
  .s7-stage{
    width: 100%; height: auto; container-type: normal;
    padding: 0 5vw;
  }
  /* PC 用の「.s7-stage > * で --u を配る」指定に勝つため、子要素側で再定義する。
     いちばん広いコマ（コマ4＝383設計px）が画面に収まる倍率にそろえる。
     全コマ同じ倍率なので、絵の大きさもコマ間でそろう。 */
  .s7-stage, .s7-stage > *{ --u: calc((100vw - 10vw - 20px) / 383); }

  /* PC 専用の器と装飾は使わない */
  /* 基底の「.s7-stage img{display:block}」の方が強いので、同じ強さ以上で消す */
  .s7-stage img.s7-deco, .s7-stage img.s7-mk{ display: none; }
  .s7-card, .s7-div{ display: none; }

  /* 見出し・リード：静的に組み直す */
  .s7-head{ position: static; width: auto; height: auto; pointer-events: auto;
            font-size: clamp(24px, 6.6vw, 40px); line-height: 1.4; }
  .s7-head .hs{ position: static; font-size: inherit; letter-spacing: 0;
                transform: none; white-space: normal; display: inline; }
  .s7-head .t2{      /* 「わっ！すごい！」はマーカー画像の代わりに黄地。途中で折らない */
    white-space: nowrap;
    background: linear-gradient(var(--y, #F8C804), var(--y, #F8C804)) no-repeat;
    background-size: 100% 62%; background-position: 0 72%;
    padding: 0 .08em;
  }
  .s7-sub{ position: static; margin-top: 10px;
           font-size: clamp(13px, 3.6vw, 17px); line-height: 1.7;
           letter-spacing: .02em; white-space: normal; }

  /* ── 4コマ：1コマずつカードにして縦に積む ── */
  /* clip-path は .s7-frame.f1 の基底指定の方が強いので、同じ強さで打ち消す */
  .s7-frame.f1, .s7-frame.f2, .s7-frame.f3, .s7-frame.f4{ clip-path: none; }
  .s7-frame{
    position: relative; left: auto; top: auto;
    /* 中身の幅はコマごとに違う（clip-path の実測値と同じ） */
    width: calc(var(--fw) * var(--u) + 20px);
    height: calc(393 * var(--u) + 20px);
    overflow: hidden;
    margin: 14px auto 0;
    background: var(--card, #FDFDFD);
    border: 1px solid #E7E9EF;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(18,22,55,.08);
  }
  /* ── 4コマは横スワイプ ── */
  .s7-koma{ --sp-slide: 88%; margin-top: 18px; }
  .s7-frame{ margin: 0; flex: 0 0 88%; }
  .s7-frame.f1{ margin-top: 0; }
  /* 中身は設計座標のまま、コマの原点ぶん引き戻す（+10px はカード内余白） */
  .s7-frame > *{
    transform: translate(calc(var(--ox) * var(--u) * -1 + 10px),
                         calc(-232 * var(--u) + 10px));
  }
  .s7-frame.f1{ --ox: 53;   --fw: 334; }
  .s7-frame.f2{ --ox: 390;  --fw: 328; }
  .s7-frame.f3{ --ox: 721;  --fw: 324; }
  .s7-frame.f4{ --ox: 1048; --fw: 383; }

  /* ── 3つの約束：1項目1カード ── */
  .s7-promise{ display: none; }
  .s7-pit{
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    column-gap: 14px; row-gap: 4px;
    margin: 12px 0 0;
    padding: 14px 16px;
    background: var(--card, #FDFDFD);
    border: 1px solid #E7E9EF;
    border-radius: 14px;
  }
  .s7-pit .s7-pico{ position: static; width: 56px; height: auto; grid-row: 1 / 3; }
  .s7-phead{ position: static; margin: 0; font-size: clamp(15px, 4.2vw, 19px);
             font-weight: 800; letter-spacing: .02em; white-space: nowrap;
             transform: none; line-height: 1.3;
             background: linear-gradient(var(--y, #F8C804), var(--y, #F8C804)) no-repeat;
             background-size: 100% 4px; background-position: 0 100%;
             padding-bottom: 4px; justify-self: start; }
  .s7-pul{ display: none; }
  .s7-pbody{ position: static; margin: 0; font-size: clamp(12px, 3.3vw, 15px);
             line-height: 1.65; letter-spacing: 0; white-space: normal;
             transform: none; }
  .s7-pbody br{ display: none; }

  /* ── CTA ── */
  .s7-cta-y{
    position: static; display: flex; align-items: center; justify-content: center;
    gap: 12px; width: min(100%, 420px); height: 56px; margin: 20px auto 0;
    border-radius: 12px;
  }
  .s7-cta-y span{ position: static; font-size: clamp(15px, 4.2vw, 19px); letter-spacing: .04em; }
  .s7-cta-y svg{ position: static; width: 26px; }
}

/* ==========================================================================
   [CAL] 調整値 ── tools/cal7.py が自動生成。手で書かない。
   ========================================================================== */
.s7-stage{ --badge-fs:17.8; --badge-ls:0.151; --badge-pl:15.0; --sub-fs:25.043; --sub-ls:0.093; --sub-x:66.0; --sub-y:179.0; --ctay-fs:33.635; --ctay-ls:0.089; --ctay-x:60.0; --ctay-y:17.0; --ctan-fs:35.129; --ctan-ls:0.157; --ctan-x:193.0; --ctan-y:19.0; }
.s7-cap.c1{ --fs:21.0; --ls:0.023; --x:142.0; --y2:258.0; --lh:30.0; }
.s7-cap.c2{ --fs:21.0; --ls:-0.006; --x:464.0; --y2:260.0; --lh:30.0; }
.s7-cap.c3{ --fs:21.467; --ls:-0.03; --x:782.0; --y2:259.0; --lh:30.0; }
.s7-cap.c4{ --fs:21.0; --ls:0.0; --x:1121.0; --y2:259.0; --lh:30.0; }
.s7-phead.p1{ --fs:21.913; --ls:0.092; --x:233.0; --y2:670.0; }
.s7-phead.p2{ --fs:21.913; --ls:0.033; --x:653.0; --y2:670.0; }
.s7-phead.p3{ --fs:21.913; --ls:0.088; --x:1049.0; --y2:670.0; }
.s7-pbody.b1{ --fs:15.358; --ls:0.121; --x:234.0; --y2:712.0; --lh:27.0; }
.s7-pbody.b2{ --fs:15.349; --ls:0.135; --x:653.0; --y2:712.0; --lh:27.0; }
.s7-pbody.b3{ --fs:16.116; --ls:0.045; --x:1050.0; --y2:712.0; --lh:27.0; }