/* STACK TRUST — achievement ページ専用スタイル（引き継ぎプロトタイプから抽出・名前空間化） */
.p-achievement .container{
  /* B系の .container：余白は幅の計算に含め、padding は持たせない */
  width:min(calc(100% - var(--pad)*2),var(--max));
  margin-inline:auto;
  padding-inline:0;
}
.p-achievement{
  /* このページのプロトタイプが使っていたコンテナ幅と左右余白。
     ページごとに前提が違うため、body クラスに載せてページ内へ継承させる。 */
  --max:1240px;
  --pad:32px;
}
.p-achievement .eyebrow{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.16em;font-weight:600;margin:0 0 20px}
.p-achievement .eyebrow span{margin-left:14px;color:var(--muted);font-family:"Noto Sans JP"}
.p-achievement .section-title{font-family:"Noto Serif JP",serif;font-size:clamp(38px,4.6vw,68px);line-height:1.34;font-weight:400;margin:0;text-wrap:balance}
.p-achievement .body-copy{font-size:14px;line-height:2;color:var(--muted);margin:0}
.p-achievement .hero{padding:calc(160px + var(--header-h)) 0 110px;background:#101214;color:#fff;position:relative;overflow:hidden}
/* ヒーロー写真。1行目は全ブラウザ共通のJPEG、2行目を解釈できるブラウザだけWebPを使う。 */
.p-achievement .hero-image{
  position:absolute;inset:0;
  background:url("../img/founder-night-pitch-filming-1920.webp") center 32%/cover no-repeat;
}
/* 見出しと数値を読ませるための覆い。左を濃く、右下をわずかに落とす。 */
.p-achievement .hero-wash{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,12,14,.9) 0%,rgba(10,12,14,.72) 42%,rgba(10,12,14,.34) 78%,rgba(10,12,14,.5) 100%),
             linear-gradient(0deg,rgba(10,12,14,.55),transparent 55%);
}
.p-achievement .hero > .container{position:relative;z-index:2}
.p-achievement .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:9vw;align-items:end}
.p-achievement .hero h1{font-family:"Noto Serif JP";font-weight:400;font-size:clamp(54px,7vw,100px);line-height:1.08;margin:0 0 28px}
.p-achievement .hero p{font-size:14px;line-height:2;color:#c7cbcd;max-width:540px}
.p-achievement .hero-meta{border-top:1px solid rgba(255,255,255,.25);padding-top:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.p-achievement .hero-meta strong{display:block;font-family:Inter;font-size:24px;letter-spacing:.04em}
.p-achievement .hero-meta span{display:block;margin-top:8px;font-size:11px;color:#9ea4a8;line-height:1.6}
.p-achievement .section{padding:120px 0}
.p-achievement .lead{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:start}
.p-achievement .notice{margin-top:34px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;line-height:1.9;color:var(--muted)}
.p-achievement .works-area{padding-top:25px}
.p-achievement .filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:45px}
.p-achievement .filter{appearance:none;border:1px solid #bfc5c8;background:white;padding:12px 18px;font-family:Inter;font-size:11px;letter-spacing:.12em;cursor:pointer}
.p-achievement .filter.active, .p-achievement .filter:hover{background:#111;color:#fff;border-color:#111}
.p-achievement .works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #cfd4d6;border-left:1px solid #cfd4d6}
.p-achievement .work-card{min-height:390px;padding:32px 34px 34px;border-right:1px solid #cfd4d6;border-bottom:1px solid #cfd4d6;display:flex;flex-direction:column;transition:.25s;background:#fff}
.p-achievement .work-card:hover{background:#111;color:#fff}
.p-achievement .work-card:hover .muted, .p-achievement .work-card:hover .scope, .p-achievement .work-card:hover .work-top{color:#b9c0c3}
.p-achievement .work-card.hidden{display:none}
.p-achievement .work-top{display:flex;justify-content:space-between;gap:16px;font-family:Inter;font-size:10px;letter-spacing:.14em;color:#737c81}
.p-achievement .work-no{font-size:12px}
.p-achievement .work-type{font-family:Inter;font-size:12px;letter-spacing:.16em;margin:62px 0 14px}
.p-achievement .work-card h2,.p-achievement .work-card h3{font-family:"Noto Serif JP";font-weight:400;font-size:clamp(25px,2.4vw,34px);line-height:1.48;margin:0 0 18px;text-wrap:balance}
.p-achievement .muted{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 30px}
.p-achievement .scope{margin-top:auto;border-top:1px solid currentColor;padding-top:20px;color:#657076}
.p-achievement .scope-label{font-family:Inter;font-size:9px;letter-spacing:.14em;margin-bottom:10px}
.p-achievement .scope p{font-size:11px;line-height:1.75;margin:0}
.p-achievement .stats{background:var(--soft)}
.p-achievement .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d1d5d7;border-left:1px solid #d1d5d7}
.p-achievement .stat{padding:44px;border-right:1px solid #d1d5d7;border-bottom:1px solid #d1d5d7}
.p-achievement .stat strong{display:block;font-family:Inter;font-size:clamp(42px,5vw,68px);font-weight:500}
.p-achievement .stat span{display:block;margin-top:10px;font-size:12px;color:var(--muted);line-height:1.7}
.p-achievement .process{display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.p-achievement .process-list{border-top:1px solid var(--line)}
.p-achievement .process-row{display:grid;grid-template-columns:72px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.p-achievement .process-row b{font-family:Inter;font-size:11px}
.p-achievement .process-row h3{font-size:16px;margin:0 0 8px}
.p-achievement .process-row p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}
.p-achievement .cta{padding:120px 0;background:#101214;color:#fff;text-align:center;position:relative;overflow:hidden}
/* CTA の背景写真。1行目は全ブラウザ共通のJPEG、2行目を解釈できるブラウザだけWebPを使う。 */
.p-achievement .cta::before{
  content:"";position:absolute;inset:0;
  background:url("../img/founder-onfield-direction-2000.webp") center 38%/cover no-repeat;
}
/* 明るい昼間の写真なので、白文字が読めるところまで落とす。 */
.p-achievement .cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,14,.82),rgba(7,11,14,.76) 50%,rgba(7,11,14,.86));
}
.p-achievement .cta > .container{position:relative;z-index:2}
.p-achievement .cta h2{font-family:"Noto Serif JP";font-size:clamp(38px,5vw,72px);font-weight:400;line-height:1.35;margin:0 0 24px}
.p-achievement .cta p{font-size:13px;color:#b9c0c3;line-height:1.9}
.p-achievement .cta a{display:inline-block;margin-top:30px;border:1px solid #fff;padding:16px 26px;font-family:Inter;font-size:11px;letter-spacing:.1em}
@media(max-width:900px){
.p-achievement .hero{padding:calc(125px + var(--header-h)) 0 90px}
.p-achievement .hero-grid, .p-achievement .lead, .p-achievement .process{grid-template-columns:1fr;gap:55px}
.p-achievement .works-grid{grid-template-columns:1fr}
.p-achievement .work-card{min-height:340px}
.p-achievement .stats-grid{grid-template-columns:1fr}
.p-achievement .hero-meta{max-width:520px}
}
@media(max-width:560px){
.p-achievement .hero h1{font-size:52px}
.p-achievement .section{padding:90px 0}
.p-achievement .work-card{padding:28px 24px}
.p-achievement .work-type{margin-top:45px}
}

/* 事例画像は任意項目。登録があるカードだけこの枠が出る。 */
.p-achievement .work-image{margin:0 0 26px;overflow:hidden;background:var(--soft)}
.p-achievement .work-image img{width:100%;height:auto;aspect-ratio:9/6.4;object-fit:cover;transition:transform .6s var(--ease)}
.p-achievement .work-card:hover .work-image img{transform:scale(1.03)}
.p-achievement .work-card[hidden]{display:none}


/* --------------------------------------------------------------------------
   共通ヘッダー分の上余白
   ヘッダーは position:fixed でヒーローの上に重なるため、
   プロトタイプの上余白にヘッダー高さ（88px / SP 72px）を足して、
   見出しがヘッダーの下に潜り込まないようにする。
   -------------------------------------------------------------------------- */
.p-achievement .hero{padding-top:calc(clamp(70px,8vw,100px) + var(--header-h))}

/* 縦長画面では見出しと人物の顔が重なるため、カメラ側へ寄せる。
   覆いも縦方向にして、写真全体を一段落とす。 */
@media (max-width:860px){
  .p-achievement .hero-image{background-position:32% 32%}
  .p-achievement .hero-wash{
    background:linear-gradient(180deg,rgba(10,12,14,.74),rgba(10,12,14,.6) 45%,rgba(10,12,14,.8));
  }
}


/* --------------------------------------------------------------------------
   スマートフォン用の背景画像（2026-10-09 追加）

   CSSの背景画像は <img> の srcset と違い、画面幅に応じた出し分けが効かない。
   そのため 390px のスマホでも PC用の 1400〜2000px の画像をそのまま
   読み込んでいた（/service/photo/ はスマホで 940KB あった）。
   ここで 780px 版（390px × 2 = Retina相当）に差し替える。

   書き出し品質は 84。現状のスマホ表示と原寸で見比べ、網目やスタジオの階調
   など圧縮に厳しい部分でも差が出ないことを確認している。
   PC版の画像はそのまま。画質を落としたのではなく、
   スマホで見えない解像度を配らないようにしただけ。

   ■ background ではなく background-image を指定している理由
   いくつかのセレクタは既存のメディアクエリで background-position を
   調整している。ショートハンドで上書きすると、その位置指定が
   初期値に戻ってスマホの構図が崩れる。画像レイヤーだけを差し替えること。
   -------------------------------------------------------------------------- */
@media(max-width:560px){
  .p-achievement .hero-image{background-image:url("../img/founder-night-pitch-filming-sp780.webp")}
  .p-achievement .cta::before{background-image:url("../img/founder-onfield-direction-sp780.webp")}
}