@charset "UTF-8";
/* =========================================================
   セミコン漫画LP／なおきくん篇  ★参考イメージ忠実トレース版
   SP専用・縦1列・設計基準 375px / ストレスチェック 350px
   ========================================================= */

:root{
  --blue:      #0a45a6;   /* メインの青（見出し帯・枠・テキスト） */
  --blue-deep: #06327c;
  --blue-mid:  #1f6fd4;   /* サブの明るい青 */
  --blue-pale: #eef4fc;   /* 淡い青背景 */
  --line:      #c9ddf5;   /* 淡い青罫線 */
  --cream:     #fff6cf;   /* バッジのクリーム */
  --ink:       #1b2430;   /* 本文 */
  --ink-soft:  #55606e;
  --white:     #ffffff;

  /* ★LP全体の背景色：ここ1箇所を書き換えれば全体が切り替わります
     （白に戻す場合は #ffffff / 元の淡い青は #eef4fc） */
  --bg:        #e5f7fc;

  --pad: 20px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  font-family:"Noto Sans JP","Noto Sans CJK JP",sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.7; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }

.lp{
  width:100%; max-width:375px; margin:0 auto;
  position:relative; overflow:hidden;
  background:var(--bg); padding-bottom:88px;
}

/* ---- 共通：ハーフトーンのドット ---- */
.dots{
  position:absolute; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--blue-mid) 2px, transparent 2.3px);
  background-size:12px 12px; opacity:.5;
}

/* ---- 共通：番号つき見出し帯 ---- */
.qhead{
  display:flex; align-items:stretch; margin:0 var(--pad) 12px;
  border-radius:0; overflow:hidden;
}
.qhead .num{
  flex:0 0 auto; min-width:38px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--blue);
  font-weight:900; font-size:22px;
  border:2px solid var(--blue);
}
.qhead .txt{
  flex:1; background:var(--blue); color:var(--white);
  font-weight:700; font-size:15px; line-height:1.4;
  padding:9px 12px; display:flex; align-items:center;
}

/* ---- 共通：吹き出し（白地・細青枠・しっぽ） ---- */
.bubble{
  position:relative; background:var(--white);
  border:1.5px solid var(--blue);
  border-radius:12px; padding:11px 14px;
  font-size:14px; line-height:1.6; color:var(--ink);
}
.bubble .em{ color:var(--blue); font-weight:700; }
.bubble.--tl::after{ content:""; position:absolute; left:22px; top:-11px;
  border-width:0 7px 11px 7px; border-style:solid;
  border-color:transparent transparent var(--blue) transparent; }
.bubble.--tl::before{ content:""; position:absolute; left:23px; top:-8px; z-index:1;
  border-width:0 6px 9px 6px; border-style:solid;
  border-color:transparent transparent var(--white) transparent; }

/* ---- 共通：情報ボックス（【○○】…） ---- */
.infobox{
  display:flex; gap:13px; align-items:center;
  margin:12px var(--pad) 0;
  background:var(--blue-pale);
  border:2px solid var(--blue);
  border-radius:0; padding:12px 14px;
}
.infobox .ic{ flex:0 0 auto; width:46px; height:46px; object-fit:contain; }
.infobox .bd .t{ font-size:13px; font-weight:800; color:var(--blue); display:block; margin-bottom:2px; }
.infobox .bd p{ font-size:13px; line-height:1.55; color:var(--ink); }

/* ---- 追従CTA ---- */
.cta{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:12px; width:calc(100% - 24px); max-width:351px; z-index:50;
}
.cta a{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ff9a2e,#f7760c);
  color:var(--white); text-decoration:none;
  font-weight:800; font-size:18px; padding:15px;
  border-radius:36px; box-shadow:0 7px 18px rgba(240,110,10,.4);
}
.cta a::after{ content:"›"; position:absolute; right:39px; top:42%;
  transform:translateY(-50%); font-size:40px; font-weight:bold; line-height:1; }

/* =========================================================
   スクロール1：ファーストビュー
   ========================================================= */
.fv{ position:relative; padding:0; overflow:hidden; }
.fv-top{ width:100%; display:block; }
.fv .dots.--r{ top:14px; right:-16px; width:120px; height:70px; transform:scaleX(-1); }

.fv-head{ position:relative; min-height:150px; padding:0 var(--pad); }
.fv-title{
  font-size:25px; font-weight:900; color:var(--ink);
  line-height:1.3; letter-spacing:-.01em; position:relative; z-index:2;
}
.fv-title .nao{ color:var(--blue); }

/* 実写風インタビュー漫画 吹き出し */
.tag{
  position:absolute; top:2px; right:8px; z-index:3;
  background:var(--white); border:1.5px solid var(--blue);
  border-radius:14px; padding:6px 12px;
  color:var(--blue); font-weight:800; font-size:12px; text-align:center; line-height:1.3;
}
.tag::after{ content:""; position:absolute; left:16px; bottom:-10px;
  border-width:10px 8px 0 3px; border-style:solid;
  border-color:var(--blue) transparent transparent transparent; }
.tag::before{ content:""; position:absolute; left:18px; bottom:-6px; z-index:1;
  border-width:7px 6px 0 2px; border-style:solid;
  border-color:var(--white) transparent transparent transparent; }

/* ウェーハ */
.wafer{ position:absolute; top:54px; right:14px; width:56px; z-index:1; }

/* 未来のテクノロジー バッジ */
.future{
  position:absolute; top:58px; right:74px; z-index:2;
  width:74px; height:74px; display:grid; place-items:center;
  text-align:center;
  background:none;
}
.future span{
  color:var(--blue); font-weight:800; font-size:9px; line-height:1.28;
}

.fv-lead{
  margin:12px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.65;
  position:relative; z-index:2; max-width:60%;
}

/* 自己紹介ボックス */
.intro{
  margin:18px var(--pad) 0;
  border:2px solid var(--blue); border-radius:0; overflow:hidden;
  background:var(--white);
}
.intro .lbl{
  background:var(--blue); color:var(--white);
  font-weight:800; font-size:15px; padding:7px 14px;
  display:flex; align-items:center; gap:8px;
}
.intro .lbl .n{
  width:22px; height:22px; border-radius:5px; background:var(--cream); color:var(--blue);
  display:grid; place-items:center; font-size:13px; font-weight:900;
}
.intro .body{ display:flex; align-items:stretch; }
.intro .prof{ flex:1; min-width:0; padding:13px 14px; }
.intro .prof .nm{ font-size:20px; font-weight:900; color:var(--ink); margin-bottom:6px; }
.intro .prof ul{ list-style:none; }
.intro .prof li{
  font-size:12.5px; color:var(--ink); line-height:1.7; white-space:nowrap;
  display:flex; align-items:center; gap:7px; letter-spacing:-.02em;
}
.intro .prof li::before{ display:none; }
.intro .prof .pic{ width:18px; height:18px; object-fit:contain; flex:0 0 auto; }
.intro .prof li::before{
  content:""; position:absolute; left:2px; top:8px; width:8px; height:8px;
  border-radius:2px; background:var(--blue);
}
.intro .photo{ flex:0 0 134px; align-self:stretch; }
.intro .photo img{ width:134px; height:100%; object-fit:cover; border:none; border-radius:0; display:block; }

/* ---- ②セクション：写真＋補足写真 ---- */
.qa-photo{ margin:14px var(--pad) 0; border:2px solid var(--blue); overflow:hidden; }
.qa-photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.qa-subs{ display:flex; gap:8px; margin:8px var(--pad) 0; }
.qa-subs img{ flex:1; width:0; aspect-ratio:1/1; object-fit:cover; border:2px solid var(--blue); }
.qa-talk{ margin:14px var(--pad) 0; display:flex; flex-direction:column; gap:14px; }
.icon-graph{ flex:0 0 30px; width:30px; height:30px; }

/* ---- 画像吹き出し（差し替え素材 bubble8） ---- */
.ib{ position:absolute; z-index:3; display:block; }
.ib .bg{ position:absolute; inset:0;
  background:none; }
.ib .tx{ position:relative; z-index:1; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; padding:9px 16px 22px; }
.ib .tt{ display:block; text-align:center; color:var(--ink);
  font-weight:700; line-height:1.4; font-size:12px; }
.ib .tt .em{ color:var(--blue); font-weight:800; }

/* 入社前セクション：縦積みの大きめ写真 */
.ph-tall{ position:relative; margin:12px var(--pad) 0; border:2px solid var(--blue); overflow:hidden; }
.ph-tall > img{ width:100%; aspect-ratio:1/1.05; object-fit:cover; display:block; }
/* 写真間のオレンジ曲線あしらい */
.wave{ position:relative; height:0; margin:0 var(--pad); }
.wave::before{ content:""; position:absolute; left:-2px; top:-18px; z-index:4;
  width:44px; height:44px; background:#f7760c; border-radius:50%;
  clip-path:inset(0 0 0 50%); }

/* ---- 吹き出し（完成画像をそのまま配置） ---- */
.talk{ position:absolute; z-index:3; display:block; }
.talk img{ width:100%; display:block; }

/* ---- 入社前：斜めつなぎ目の写真ペア（余白つき） ---- */
.duo{ position:relative; margin:12px var(--pad) 0; height:483px; }
.dp2{ position:absolute; left:0; right:0; background:var(--blue); clip-path:var(--clip); }
.dp2 .ph{ position:absolute; inset:3px; clip-path:var(--clip); overflow:hidden; }
/* ---- 入社前セクションの写真：位置調整つまみ（HTML側インラインの3変数だけで動きます） ----
   --px   … 横位置。0%〜100%（数値を小さく=人物が右へ／大きく=左へ）。この範囲なら隙間は出ません
   --zoom … 縦に動かすための拡大率。1のままでは縦は動きません（画像に縦の余白が無いため）
   --py   … 縦位置。マイナス=上へ。安全域は ±(--zoom − 1) ÷ (--zoom × 2)
            例）--zoom:1.12 → ±5.3％ ／ --zoom:1.25 → ±10％                       */
.dp2 .ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position: var(--px, 50%) 50%;
  transform: scale(var(--zoom, 1)) translateY(var(--py, 0%));
}
.dp2.--a{ top:0; height:264px; }
.dp2.--b{ top:219px; height:264px; }
/* 吹き出し（duo内配置） */
.duo .talk{ position:absolute; z-index:4; display:block; }
.duo .talk img{ width:100%; display:block; }

/* =========================================================
   スクロール2：実際に入って良かったと思うことは？
   ========================================================= */
.sec2{ position:relative; padding:0; }
.sec3{ position:relative; padding:0; }
.person-cut{ position:relative; margin:12px var(--pad) 0; border:2px solid var(--blue); overflow:hidden; }
.person-cut > img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:72% center; display:block; }
.person-cut .talk{ position:absolute; z-index:4; display:block; }
.person-cut .talk img{ width:100%; display:block; }
.imgrow{ display:flex; gap:8px; margin:8px var(--pad) 0; }
.imgrow .cell{ flex:1; width:0; border:2px solid var(--blue); overflow:hidden; }
.imgrow .cell img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.talk-list{ margin:14px var(--pad) 0; display:flex; flex-direction:column; gap:13px; }

/* =========================================================
   スクロール2：斜めカット（人物カット下＋下段2枚の上を斜めに）
   ========================================================= */
.cut2{ position:relative; margin:12px var(--pad) 0; height:380px; }
.cut2 .cpanel{ position:absolute; background:var(--blue); clip-path:var(--clip); }
.cut2 .cpanel .ph{ position:absolute; inset:2px; clip-path:var(--clip); overflow:hidden; }
.cut2 .cpanel .ph > img{ width:100%; height:100%; object-fit:cover; display:block; }
.cut2 .talk{ position:absolute; display:block; }
.cut2 .talk img{ width:100%; display:block; }

/* Next UT 「600万円」強調 */
.infobox .amt{ color:#f7760c; font-size:24px; font-weight:900; vertical-align:-3px; letter-spacing:-.02em; }
.infobox .amt-u{ color:#f7760c; font-size:15px; font-weight:900; }

.infobox .bd .amt{ color:#f7760c; font-size:24px; font-weight:900; vertical-align:-2px; letter-spacing:-.02em; }

.infobox .bd .oc{ color:#f7760c; font-weight:700; }

/* 締めメッセージ（全幅画像） */
.closing-img{ width:100%; display:block; margin-top:20px; }

.infobox .bd .hl{ color:#f7760c; font-weight:900; }