@charset "UTF-8";
/* ==========================================================================
   SECTION 3 ｜ 代表ストーリー導入（意外性）
   参考元: assets/images/SECTION 3/SECTION3_参考元画像.png (1484x1060)
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標で記述する。
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値はすべて参考元のピクセル実測値。目測値は使っていない。
   ※ 参考元の氏名「田中 太郎」と写真はダミーのため、実名・実写真に差し替えてある。
   ========================================================================== */

section.s3{
  --y:      #F8C607;   /* 実測 バッジ・マーカーの黄 */
  --y-btn:  #F8C402;   /* 実測 CTAボタンの黄 */
  --y-note: #FCE287;   /* 実測 付箋の黄 */
  --navy:   #07142F;   /* 実測 見出し */
  --navy-d: #031432;   /* 実測 帯 */
  --card:   #FDFDFD;   /* 実測 カード地 */
  --bg:     #FBFBFB;   /* 実測 ページ地 */

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

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

/* ---------- 背景装飾（すべて支給素材） ---------- */
.s3-deco{ --u: 0.0673854cqw; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s3-deco img{ position: absolute; display: block; }

.d3-halftone-tr { left: calc(1290*var(--u)); top: calc(20*var(--u));  width: calc(230*var(--u)); }
.d3-halftone-r  { left: calc(1330*var(--u)); top: calc(430*var(--u)); width: calc(210*var(--u)); }
.d3-triangle    { left: calc(1380*var(--u)); top: calc(370*var(--u)); width: calc(150*var(--u)); }
.d3-lines-a     { left: calc(834*var(--u));  top: calc(79*var(--u));  width: calc(62*var(--u)); }
.d3-sparkle-a   { left: calc(831*var(--u));  top: calc(198*var(--u)); width: calc(66*var(--u)); height: calc(82*var(--u)); object-fit: fill; }

/* 文中の黄色ハイライト */
.s3 .mark{
  background: linear-gradient(var(--y), var(--y)) no-repeat;
  background-size: 100% 46%; background-position: 0 82%;
}
.s3 .ul{ border-bottom: calc(2*var(--u)) solid var(--navy); }


/* ---------- ① 経営理念バッジ（SECTION 2 から移設） ---------- */
.s3-phil-badge{
  position: absolute; left: calc(60*var(--u)); top: calc(22*var(--u));
  width: calc(150*var(--u)); height: calc(61*var(--u)); margin: 0; z-index: 3;
}
.s3-phil-badge img{ display: block; width: 100%; height: 100%; object-fit: fill; }

/* ---------- ② 見出し（実測 L1 ink y117 h60 / L2 ink y205 h68） ---------- */
.s3-head{
  position: absolute; left: calc(67*var(--u)); top: calc(111*var(--u));
  margin: 0; z-index: 3; font-weight: 700; line-height: 1;
  white-space: nowrap; letter-spacing: 0; font-feature-settings: normal;
}
.s3-head{ transform: scaleY(.94); transform-origin: left top; }
.s3-head .l1{ display: block; font-size: calc(69*var(--u)); }
/* 1行目との行間は詰める（34→20）。そのぶん下の引用ブロックとの間が開く */
.s3-head .l2{ display: block; font-size: calc(69*var(--u)); letter-spacing: 0em; margin-top: calc(20*var(--u)); margin-left: calc(3*var(--u)); }
/* AI〜理由 の背後に敷く黄マーカー（実測 x54 y214 w546 h68）
   L2 が 14*0.94 ≒ 13px 上がったので、マーカーも同じだけ上げて重なりを保つ */
.s3-marker{
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(54*var(--u)); top: calc(201*var(--u));
  width: calc(546*var(--u)); height: calc(68*var(--u));
  background: url("../images/section3/marker-yellow.webp") no-repeat center/100% 100%;
}

/* ---------- ③ 引用ブロック（実測 枠 x56 y280 w788 h148）
   見出しとの間を開けたいので、黄色い枠ごと 10px 下げる ---------- */
.s3-quote{
  position: absolute; left: calc(59*var(--u)); top: calc(292*var(--u));
  width: calc(548*var(--u)); height: calc(148*var(--u)); margin: 0; z-index: 2;
  background: url("../images/section3/frame-quote.webp") no-repeat center/100% 100%;
}
.s3-quote p{
  position: absolute; left: calc(85*var(--u)); top: calc(35*var(--u));
  margin: 0; font-weight: 700; font-size: calc(26*var(--u));
  line-height: calc(40*var(--u)); letter-spacing: 0; white-space: nowrap;
}

/* ---------- ④ 本文（実測 ink 1行目 y460、行送り 36px） ---------- */
.s3-body{
  position: absolute; left: calc(67*var(--u)); top: calc(450*var(--u));
  margin: 0; z-index: 2; font-weight: 500; font-size: calc(19.5*var(--u));
  line-height: calc(40*var(--u)); letter-spacing: .062em; white-space: nowrap;
  transform: scaleY(.90); transform-origin: left top;
}
.s3-body b{ font-weight: 700; }

/* ---------- ⑤ 3ステップ（実測 x64 y659 w866 h211／カード272・間隔22） ---------- */
.s3-steps{
  position: absolute; left: calc(64*var(--u)); top: calc(659*var(--u));
  width: calc(866*var(--u)); height: calc(211*var(--u)); z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22*var(--u));
  margin: 0; padding: 0; list-style: none;
}
.s3-step{
  position: relative; isolation: isolate; background: var(--card);
  border-radius: calc(14*var(--u));
  box-shadow: 0 calc(2*var(--u)) calc(9*var(--u)) rgba(7,20,47,.07);
}
.s3-step-badge{
  position: absolute; left: calc(16*var(--u)); top: calc(22*var(--u));
  width: calc(38*var(--u)); height: calc(38*var(--u));
  background: url("../images/section3/badge-circle.webp") no-repeat center/100% 100%;
  display: grid; place-items: center; color: #fff;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: calc(17*var(--u));
}
.s3-step-spark{ position: absolute; left: calc(58*var(--u)); top: calc(18*var(--u)); width: calc(18*var(--u)); }
.s3-step-ico{ position: absolute; left: calc(116*var(--u)); top: calc(23*var(--u)); width: calc(52*var(--u)); }
.s3-step h3{
  position: absolute; left: 0; top: calc(84*var(--u)); width: 100%;
  margin: 0; text-align: center; font-weight: 800; font-size: calc(26*var(--u));
  line-height: 1; letter-spacing: .012em; font-feature-settings: normal;
}
.s3-step h3 span{ position: relative; }
/* 黄色い線は文字の背面に置く（.s3-step 側で重ね順を閉じる） */
.s3-step h3 span::after{ z-index: -1; }
.s3-step h3 span::after{
  content: ""; position: absolute; left: calc(-11*var(--u)); top: calc(28*var(--u));
  width: calc(100% + 22*var(--u)); height: calc(4*var(--u));
  background: url("../images/section3/marker-yellow.webp") no-repeat center/100% 100%;
}
.s3-step p{
  position: absolute; left: calc(12*var(--u)); top: calc(136*var(--u));
  width: calc(100% - 24*var(--u)); margin: 0; text-align: center;
  font-weight: 500; font-size: calc(16*var(--u)); line-height: calc(27*var(--u));
  letter-spacing: 0;
}
.s3-arrow{ position: absolute; top: calc(756*var(--u)); width: calc(26*var(--u)); z-index: 3; }
.s3-arrow.a1{ left: calc(336*var(--u)); }
.s3-arrow.a2{ left: calc(633*var(--u)); }

/* ---------- ⑥ 右カラム：写真パネル（実測 x867 y89 w610 h791） ---------- */
.s3-photo{
  position: absolute; left: calc(830*var(--u)); top: calc(65*var(--u));
  width: calc(648*var(--u)); height: calc(812*var(--u)); z-index: 1;
  background: url("../images/section3/panel-photo.webp") no-repeat center/100% 100%;
}
.s3-photo img{
  position: absolute; inset: calc(10*var(--u));
  width: calc(100% - 20*var(--u)); height: calc(100% - 20*var(--u));
  object-fit: cover; object-position: 50% 2%;
  -webkit-mask-image: url("../images/section3/panel-photo.webp");
          mask-image: url("../images/section3/panel-photo.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}


/* ネームプレート（実測 x1140 y580 w263 h160） */
.s3-plate{
  position: absolute; left: calc(1140*var(--u)); top: calc(580*var(--u));
  width: calc(263*var(--u)); height: calc(160*var(--u)); z-index: 4; margin: 0;
  background: url("../images/section3/nameplate.webp") no-repeat center/100% 100%;
  display: grid; align-content: center; justify-items: center; color: #fff;
  text-align: center;
}
.s3-plate .role{ font-size: calc(15*var(--u)); font-weight: 500; letter-spacing: .08em; }
.s3-plate .name{ font-size: calc(31*var(--u)); font-weight: 800; letter-spacing: .04em; margin-top: calc(6*var(--u)); }

/* CTAボタン（実測 x970 y783 w394 h78） */
.s3-cta{
  position: absolute; left: calc(970*var(--u)); top: calc(783*var(--u));
  width: calc(394*var(--u)); height: calc(78*var(--u)); z-index: 4;
  background: url("../images/section3/button-more.webp") no-repeat center/100% 100%;
  filter: brightness(.975) saturate(1.04);   /* 実測 #F8C402 に合わせる */
  display: flex; align-items: center; justify-content: center; gap: calc(18*var(--u));
  color: var(--navy); text-decoration: none;
  font-weight: 700; font-size: calc(23.5*var(--u)); letter-spacing: .015em; white-space: nowrap;
}
.s3-cta img{ width: calc(30*var(--u)); }
.s3-cta:hover{ filter: brightness(1.04); }

/* ==========================================================================
   モバイル / タブレット：絶対配置をやめて縦に積む
   ========================================================================== */
@media (max-width: 900px){
  /* デスクトップは参考元の実測値で絶対配置している。モバイルではその前提
     （絶対配置・nowrap・scale）を解除して縦に積む。写真パネルだけは中の
     <img> を内側に留めるため position:relative を残す。 */
  section.s3{ display: block; padding: 40px 0 46px; }
  .s3 .s3-stage{ height: auto; container-type: normal; width: 100%; min-width: 0; padding: 0 5vw; }
  .s3 .s3-stage > *, .s3 .s3-deco{ --u: 1px; }
  .s3 .s3-deco{ display: none; }

  .s3 .s3-phil-badge, .s3 .s3-head, .s3 .s3-quote, .s3 .s3-quote p, .s3 .s3-body, .s3 .s3-steps,
  .s3 .s3-plate, .s3 .s3-cta,
  .s3 .s3-step-badge, .s3 .s3-step h3, .s3 .s3-step p{
    position: static; left: auto; top: auto; right: auto;
    width: 100%; height: auto; transform: none; white-space: normal;
  }
  .s3 .s3-photo{ position: relative; left: auto; top: auto; width: 100%; height: auto; transform: none; }
  .s3 .s3-marker, .s3 .s3-arrow, .s3 .s3-step-spark{ display: none; }

  .s3 .s3-phil-badge{ width: 140px; height: 57px; margin-bottom: 14px; }
  .s3 .s3-head{ font-feature-settings: "palt" 1; }
  .s3 .s3-head .l1, .s3 .s3-head .l2{ font-size: clamp(25px, 6.8vw, 46px); line-height: 1.3; margin: 0; }
  .s3 .s3-head .l2{
    display: inline-block; margin-top: 4px;
    background: linear-gradient(var(--y), var(--y)) no-repeat;
    background-size: 100% 52%; background-position: 0 76%;
  }
  .s3 .s3-quote{
    margin-top: 20px; padding: 18px 16px; border-radius: 10px;
    border: 2px solid var(--y); background: none;
  }
  .s3 .s3-quote p{ font-size: clamp(14px, 3.9vw, 20px); line-height: 1.85; font-weight: 700; }
  .s3 .s3-quote p br{ display: none; }
  .s3 .s3-body{ margin-top: 18px; font-size: clamp(13px, 3.6vw, 17px); line-height: 1.95; letter-spacing: 0; }

  .s3 .s3-photo{ margin-top: 22px; aspect-ratio: 610/791; background-size: 100% 100%; }
  .s3 .s3-photo img{ inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .s3 .s3-plate{ margin-top: 14px; min-height: 112px; background-size: 100% 100%; }
  .s3 .s3-plate .role{ font-size: 13px; }
  .s3 .s3-plate .name{ font-size: clamp(22px, 6vw, 30px); }
  .s3 .s3-cta{ margin-top: 16px; min-height: 62px; background-size: 100% 100%; font-size: clamp(14px, 3.8vw, 20px); }
  .s3 .s3-cta img{ width: 22px; }

  .s3 .s3-steps{ margin-top: 20px; grid-template-columns: 1fr; gap: 14px; }
  .s3 .s3-step{ padding: 18px 16px 20px; border-radius: 12px; }
  .s3 .s3-step-badge{ width: 38px; height: 38px; font-size: 16px; }
  .s3 .s3-step-ico{ position: absolute; left: auto; right: 16px; top: 14px; width: 46px; }
  .s3 .s3-step h3{ margin-top: 10px; text-align: left; font-size: clamp(20px, 5.2vw, 28px); }
  .s3 .s3-step h3 span::after{ top: 78%; height: 6px; left: 0; width: 100%; }
  .s3 .s3-step p{ margin-top: 10px; text-align: left; font-size: clamp(12.5px, 3.4vw, 16px); line-height: 1.8; }
  .s3 .s3-step p br{ display: none; }

}

/* ==========================================================================
   モーション
   セクションが画面に入る（#story に .is-in が付く）と、上から順に組み上がる。
   主役は代表写真：左から滑り込み → 右の“壁”にぶつかってグニョッと潰れて収まる。
   JS が無いとき／モーション抑制設定のときは、最初から完成形で表示する。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){

  /* ── 画面に入る前は伏せておく ── */
  html.js .s3-head .l1,
  html.js .s3-head .l2,
  html.js .s3-quote,
  html.js .s3-body,
  html.js .s3-photo,
  html.js .s3-plate,
  html.js .s3-cta,
  html.js .s3-steps .s3-step{ opacity: 0; }
  html.js .s3-marker{ transform: scaleX(0); transform-origin: left center; }
  html.js .s3-steps .s3-step{ transform: translateY(12px); }

  /* ── 見出し ── */
  html.js .s3.is-in .s3-head .l1{ animation: s3-rise .55s cubic-bezier(.2,.7,.3,1) .00s both; }
  html.js .s3.is-in .s3-head .l2{ animation: s3-rise .55s cubic-bezier(.2,.7,.3,1) .12s both; }
  /* 黄色いマーカーは左から引く */
  html.js .s3.is-in .s3-marker{ animation: s3-marker-draw .42s cubic-bezier(.3,.8,.35,1) .34s both; }

  /* ── 代表写真：スライドイン → 壁にぶつかって“グニョッ” ── */
  html.js .s3-photo{ transform-origin: 100% 50%; }
  html.js .s3.is-in .s3-photo{
    animation: s3-photo-slam 1.3s linear .05s both;
  }
  html.js .s3.is-in .s3-plate{ animation: s3-plate-pop .52s cubic-bezier(.2,.8,.3,1.4) 1.10s both; }
  html.js .s3.is-in .s3-cta{
    animation: s3-rise .45s cubic-bezier(.2,.7,.3,1) 1.24s both,
               s3-cta-nudge 5.2s ease-in-out 2.8s infinite;
  }
  html.js .s3-cta img{ transition: transform .2s ease; }
  html.js .s3-cta:hover img{ transform: translateX(calc(6*var(--u))); }

  /* ── 本文まわり ── */
  html.js .s3.is-in .s3-quote{ animation: s3-rise .5s cubic-bezier(.2,.7,.3,1) .58s both; }
  html.js .s3.is-in .s3-body{ animation: s3-rise-body .6s cubic-bezier(.2,.7,.3,1) .72s both; }

  html.js .s3.is-in .s3-steps .s3-step{
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  }
  html.js .s3.is-in .s3-step:nth-child(1){ transition-delay: .90s; }
  html.js .s3.is-in .s3-step:nth-child(2){ transition-delay: 1.00s; }
  html.js .s3.is-in .s3-step:nth-child(3){ transition-delay: 1.10s; }


  /* ── 背景のキラキラ ── */
  html.js .s3.is-in .d3-sparkle-a{ animation: s3-twinkle 4.8s ease-in-out 1.5s infinite; }
}

@keyframes s3-rise{
  from{ opacity: 0; transform: translateY(calc(18*var(--u))); }
  to  { opacity: 1; transform: none; }
}
/* 本文は元から scaleY(.90) をかけているので、それを保ったまま持ち上げる */
@keyframes s3-rise-body{
  from{ opacity: 0; transform: scaleY(.90) translateY(calc(16*var(--u))); }
  to  { opacity: 1; transform: scaleY(.90); }
}
@keyframes s3-marker-draw{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}
/* 左から加速しながら滑ってきて、右の壁で潰れ、2〜3回ゆれて収まる。
   全体は linear にして、緩急はキーフレームごとの timing-function で作る。
   （全体に ease を掛けると助走が一瞬で終わり、ぶつかった感じが出ない） */
@keyframes s3-photo-slam{
  0%   { opacity: 0; transform: translateX(calc(-270*var(--u))) scale(1.02, .98);
         animation-timing-function: cubic-bezier(.5, 0, .75, .4); }
  12%  { opacity: 1; transform: translateX(calc(-248*var(--u))) scale(1.04, .96);
         animation-timing-function: cubic-bezier(.55, .05, .75, .35); }   /* ここから加速 */
  52%  { opacity: 1; transform: translateX(0) scale(1.08, .93);
         animation-timing-function: cubic-bezier(.35, 0, .25, 1); }       /* 壁に到達（伸びたまま） */
  63%  { transform: translateX(0) scale(.87, 1.11);
         animation-timing-function: cubic-bezier(.4, 0, .35, 1); }        /* グニョッと潰れる */
  74%  { transform: translateX(0) scale(1.07, .95);
         animation-timing-function: cubic-bezier(.4, 0, .35, 1); }        /* 反発して伸びる */
  84%  { transform: translateX(0) scale(.965, 1.035);
         animation-timing-function: cubic-bezier(.4, 0, .35, 1); }
  92%  { transform: translateX(0) scale(1.015, .987); }
  100% { opacity: 1; transform: translateX(0) scale(1, 1); }
}
@keyframes s3-plate-pop{
  0%  { opacity: 0; transform: scale(.72) rotate(-7deg); }
  60% { opacity: 1; transform: scale(1.07) rotate(2deg); }
  100%{ opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes s3-cta-nudge{
  0%, 86%, 100%{ transform: translateY(0); }
  90%          { transform: translateY(calc(-5*var(--u))); }
  94%          { transform: translateY(calc(1*var(--u))); }
}
@keyframes s3-twinkle{
  0%, 72%, 100%{ transform: scale(1) rotate(0deg); }
  80%          { transform: scale(1.28) rotate(9deg); }
  88%          { transform: scale(.94) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce){
  .s3 .s3-step{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── スマホ：演出はスクロール速度に合わせて短く ── */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  html.js .s3.is-in .s3-photo{ animation-duration: .7s; animation-delay: .05s; }
  html.js .s3.is-in .s3-head .l1{ animation-delay: 0s; }
  html.js .s3.is-in .s3-head .l2{ animation-delay: .06s; }
  html.js .s3.is-in .s3-marker{ animation-delay: .16s; }
  html.js .s3.is-in .s3-quote{ animation-delay: .22s; }
  html.js .s3.is-in .s3-body{ animation-delay: .28s; }
  html.js .s3.is-in .s3-step:nth-child(1){ transition-delay: .34s; }
  html.js .s3.is-in .s3-step:nth-child(2){ transition-delay: .40s; }
  html.js .s3.is-in .s3-step:nth-child(3){ transition-delay: .46s; }
  html.js .s3.is-in .s3-plate{ animation-delay: .55s; }
  html.js .s3.is-in .s3-cta{ animation-delay: .62s, 2.8s; }
}