/* ===== Why MIZUTA（Figma Component5 14139:14211）1440×800 / base3 =====
   構造（あおさん指示 A-3／B-2・2026-09-10 改修）:
   .why      … セクション。PC＋JS有効時は「800pxパネル＋切り替え5段ぶん」の高さを持つスクロール領域
   .why__pin … 800pxのパネル本体（旧 .why の見た目をそのまま移した）。PC＋JS有効時は position:sticky で
               画面に留まり、留まっている間のスクロール量で理由01〜05が切り替わる（切り替えは js/main.js「2. Why MIZUTA」）
   自動切り替え（5秒カルーセル）と停止ボタン（.why__pause）は廃止。写真クリックで進む機能も廃止（数字リストで移動）
   幅の扱い（追補・2026-09-10）: 固定＋切り替えは 1025px 以上のみ。1024px 以下はヘッダーがハンバーガーに切り替わるのに揃えて、
   SP（375）と同じ「5組を縦に並べる」構図を中央寄せで使う（js/main.js 側も mqNav＝1024px で判定）
   画面高の扱い: パネル高・固定余白・写真の大きさは変数にし、画面高 860px 以下／760px 以下で段階的に詰める（末尾の高さメディアクエリ） */
.why{position:relative;width:100%;--why-step:max(560px,75vh);  /* 1理由あたりのスクロール量。2026-09-15 菊池さん指示で 50vh→75vh（狙った理由で止めやすく） */
  /* --why-pin-h: パネル高 ／ --why-pin-gap: 固定中にヘッダー下端から見出しまで空ける余白 ／ --why-photo-scale: 中央写真の縮小率（1＝700×856） */
  --why-pin-h:800px;--why-pin-gap:60px;--why-photo-scale:1}
.why__pin{position:relative;width:100%;height:var(--why-pin-h);overflow:hidden;background:var(--c-base3)}
/* PC＋JS: パネルを固定する。固定ヘッダー（--header-h・未定義なら80px）から --why-pin-gap（既定60px）空けた位置にセクションタイトルが来る。
   タイトルはパネル内 top80 にあるので、パネル自体は「ヘッダー高＋余白−80」で止める（1440×900では 60px） */
@media (min-width:1025px){
  .js .why{height:calc(var(--why-pin-h) + var(--why-step) * 5)}
  .js .why__pin{position:sticky;top:calc(var(--header-h,80px) + var(--why-pin-gap) - 80px)}
}
/* 背景: テクスチャ(multiply .25 / bottom) ＋ 下方向グラデ（75%→100%で base3 へ） */
.why__bg{position:absolute;inset:0;pointer-events:none}
.why__bg-texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:scaleY(-1);mix-blend-mode:multiply;opacity:.15;max-width:none}
.why__bg-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(240,250,255,0) 75%,#f0faff 100%)}
/* 装飾図形3つ（回転ボックス内にSVGを inset 配置）。位置は理由01〜05で共通（切り替えで動かさない・指示 B-2） */
.why__deco{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none}
.why__deco-inner{position:relative;flex:none}
.why__deco-inner img{position:absolute;max-width:none}
.why__deco--1{left:calc(50% - 772px);top:532px;width:358.391px;height:249.658px}
.why__deco--1 .why__deco-inner{width:326.915px;height:185.747px;transform:rotate(12deg)}
.why__deco--1 img{left:-1.38%;top:-3.23%;width:102.76%;height:106.46%}
.why__deco--2{left:calc(50% + 391px);top:41px;width:168.956px;height:172.234px}
.why__deco--2 .why__deco-inner{width:153.916px;height:87.489px;transform:rotate(-133deg) scaleY(-1)}
.why__deco--2 img{left:-4.23%;top:-9.14%;width:108.46%;height:118.28%}
.why__deco--3{left:calc(50% + 591px);top:17px;width:89.444px;height:104.768px}
.why__deco--3 .why__deco-inner{width:91.087px;height:51.776px;transform:rotate(119deg)}
.why__deco--3 img{left:-7.15%;top:-15.45%;width:114.3%;height:130.9%}
/* 中央写真（平行四辺形マスク）: 700×856 / 中央 / top-46 */
.why__photo{position:absolute;left:calc(50% - 350px);top:-46px;width:700px;height:856px}
.why__photo-mask{position:absolute;left:-4.29%;right:-14.44%;top:151.51px;aspect-ratio:3500/2333;overflow:hidden;
  clip-path:path("M239.4 77.9L721 33L512 483L30.4 527.8Z")}
/* 写真5枚（Figma WhyPhoto 01〜05 のクロップ値）。is-active のみ表示 */
.why__photo-img{position:absolute;max-width:none;object-fit:cover;opacity:0}
.why__photo-img.is-active{opacity:1}
.why__photo-img--01{left:-15.87%;top:-49.01%;width:145.65%;height:145.65%}
.why__photo-img--02{left:-14.05%;top:1.71%;width:102.62%;height:102.62%}
.why__photo-img--03{left:-9.65%;top:-9.54%;width:119.37%;height:119.37%}
.why__photo-img--04{left:-14.11%;top:-4.24%;width:104.24%;height:104.24%}
.why__photo-img--05{left:1.93%;top:3.25%;width:100%;height:100%}
/* 見出しブロック: left120 top80 */
.why__head{position:absolute;left:var(--pad-side);top:80px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-lead)}
.why__title{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.why__title-en{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.why__title-en .sec-title__en{font-size:var(--fs-h2-en)}
.why__logo{display:block;width:296.001px;height:71.001px}
/* 数字＋見出しリスト: クリック／フォーカスで該当理由の位置へスクロールする（button のまま） */
.why__list{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;list-style:none}
.why__item{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;font:inherit;color:#c2cde0;cursor:pointer;text-align:left}
.why__item.is-active{color:var(--c-text-sub)}
.why__item-num{display:flex;align-items:center;justify-content:center;padding-top:1px;font-family:var(--font-en);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;font-feature-settings:normal}
.why__item-text{font-size:14px;font-weight:500;line-height:1.6;letter-spacing:.14px;white-space:nowrap}
/* Reason テキスト: left980 top452 w340 */
.why__word{position:absolute;left:calc(50% + 260px);top:452px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:340px;opacity:0;visibility:hidden}
.why__word.is-active{opacity:1;visibility:visible}
.why__word-row{display:flex;align-items:center;gap:12px;width:100%}
.why__word-line{flex:1 0 0;min-width:1px;height:1px;background:#c2cde0}
.why__word-en{font-family:var(--font-en);font-weight:600;font-size:var(--fs-h2-en2);line-height:1;white-space:nowrap;font-feature-settings:normal}
.why__word-en--reason{color:var(--c-border-sub)}
.why__word-en--cat{color:var(--c-text-sub2)}
.why__word-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-under-h4);width:100%;line-height:1.6}
.why__word-h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:.28px;width:100%}
.why__word-text{font-size:var(--fs-body-m);font-weight:400;letter-spacing:.16px;width:100%}

/* ---- PC: .why__reason（写真＋テキスト）は箱を作らず、子を従来どおり絶対配置する。4つ目の装飾とSP用改行はPCでは出さない ---- */
.why__reasons,.why__reason{display:contents}
.why__deco--4{display:none}
.why__br-sp{display:none}

/* ---- no-JS（PC）: 固定も切り替えもできないので、5組をそれぞれ800pxのパネルとして縦に並べ、全部読めるようにする
        （写真・テキストの絶対座標は各 .why__reason 基準になる＝1組ごとにPCと同じ構図） ---- */
@media (min-width:1025px){
  html:not(.js) .why__pin{height:auto}
  html:not(.js) .why__reasons{display:block}
  html:not(.js) .why__reason{display:block;position:relative;height:var(--why-pin-h)}
  html:not(.js) .why__photo-img,html:not(.js) .why__word{opacity:1;visibility:visible;transform:none}
}

/* ---- 1025〜1200px（カンプ未支給・PC構図のまま） ----
   ・右のReasonテキストが「50%+260px」起点だと画面外に出て切れるため、右端30pxに寄せる
   ・この帯だけ写真（平行四辺形）の左辺が数字リストの04・05行に触れるため、写真を縮小率0.85で小さくし
     左位置も同率で寄せる（1201px以上・1024px以下には影響しない） ---- */
@media (min-width:1025px) and (max-width:1200px){
  .why__word{left:auto;right:30px}
  .why{--why-photo-scale:.85}
  .why__photo{left:calc(50% - 350px * var(--why-photo-scale) + 40px);width:calc(700px * var(--why-photo-scale));height:calc(856px * var(--why-photo-scale))}
  .why__photo-mask{top:calc(151.51px * var(--why-photo-scale))}
}

/* ===== 1024px以下（Figma Component 12 14600:69405 375×2844 を中央寄せで流用）: 5つのReasonを縦に並べる（固定もスクロール切替もしない）
   769〜1024px は SP と同じ寸法（フォント・余白トークンをSP値に固定）で、339px の列と装飾をまとめて中央に置く。375 では従来と画素一致 ===== */
@media (max-width:1024px){
  /* base.css の SP トークンは 768px 以下でしか効かないので、このセクション内だけ SP 値に固定する（375 では同値＝無変化） */
  .why{height:auto;--fs-h2-en:64px;--fs-h2-en2:14px;--fs-h3:24px;--fs-h5:16px;--fs-body-m:15px;--sp-under-h4:16px}
  .why__pin{height:auto;display:flex;flex-direction:column;align-items:center;gap:48px;padding:80px 0 40px}
  /* 背景: テクスチャ（multiply .30・下基準）＋ グラデ 54.585%→67.194% で base3 へ */
  /* テクスチャ: Figma書き出し（imgComponent12.png）が全面透明で取得不能のため、PCと同じ画像を等倍（1024×724）で縦リピート。
     カンプの線の密度・地色 (224,238,249) に最も近い配置（cover拡大だと線が消えて地色が暗くなる） */
  .why__bg-texture{display:none}
  .why__bg::before{content:"";position:absolute;inset:0;background:url(../../img/why_texture.jpg) 0 0/1024px 724px repeat-y;mix-blend-mode:multiply;opacity:.3}
  .why__bg-grad{background:linear-gradient(180deg,rgba(240,250,255,0) 54.585%,#f0faff 67.194%)}
  /* 装飾4つ（Figma SP 375 の左上原点座標を「中央 375px 幅」基準に換算: left = 50% − 187.5px ＋ Figma値。375 では Figma値そのまま）
     B/C は内側列 top80、D は Reason列 left18/top286.6 を換算済み。縦位置は列の高さが SP と同じ（トークン固定）なので共通 */
  .why__deco--1{left:calc(50% + 99.5px);top:1298.84px;width:135.41px;height:94.328px}
  .why__deco--1 .why__deco-inner{width:123.518px;height:70.181px;transform:rotate(12deg)}
  .why__deco--1 img{left:-3.65%;top:-8.55%;width:107.3%;height:117.1%}
  .why__deco--2{left:calc(50% - 228.5px);top:273px;width:135.407px;height:138.034px}
  .why__deco--2 .why__deco-inner{width:123.353px;height:70.117px;transform:rotate(-133deg) scaleY(-1)}
  .why__deco--2 img{left:-5.28%;top:-11.41%;width:110.56%;height:122.82%}
  .why__deco--3{left:calc(50% + 115.5px);top:47px;width:72.406px;height:84.811px}
  .why__deco--3 .why__deco-inner{width:73.736px;height:41.913px;transform:rotate(119deg)}
  .why__deco--3 img{left:-3.41%;top:-9.54%;width:106.82%;height:119.08%}
  .why__deco--4{display:flex;left:calc(50% - 203.93px);top:2264px;width:123.414px;height:161.676px}
  .why__deco--4 .why__deco-inner{width:143.002px;height:81.286px;transform:rotate(109deg)}
  .why__deco--4 img{left:-4.55%;top:-9.84%;width:109.1%;height:119.68%}
  /* 見出し: px24 / gap4 / Why 64px / MIZUTA 238×57。切替リストはSPに無い */
  /* 背景（絶対配置）より上に描くため relative にする（static だとグラデに覆われて下段の文字が消える） */
  /* 幅は Reason列と同じ 339px にして中央に置き、列の左端から 6px 内側に見出しを置く（375: 列左18＋6＝24px＝従来の px24 と同じ位置） */
  .why__head{position:relative;left:auto;top:auto;width:339px;padding:0 0 0 6px;gap:0}
  .why__title{gap:4px}
  .why__title .sec-title__label{letter-spacing:.16px}
  .why__title-en{gap:8px}
  .why__logo{width:238px;height:57px}
  .why__list{display:none}
  /* Reason列 w339 / gap48。各Reason = 写真339×269 ＋ テキストw327（gap16） */
  .why__reasons{display:flex;flex-direction:column;gap:48px;width:339px}
  .why__reason{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
  .why .why__photo{position:relative;left:auto;top:auto;width:339px;height:269px;pointer-events:none}
  /* マスク: PCの path を箱幅比で%化（PC mask 694×496 → SP 335×240 の0.4829倍相当） */
  .why__photo-mask{left:-4.13%;right:-14.45%;top:.73px;clip-path:polygon(28.805% 14.061%,86.751% 5.957%,61.604% 87.184%,3.658% 95.271%)}
  .why .why__photo-img{opacity:1}
  .why .why__word{position:relative;left:auto;right:auto;top:auto;width:327px;opacity:1;visibility:visible;transform:none}
  /* 24px×1.6=38.4 を Figma は 38px で描画するため行高を38pxに固定（5理由合計で-3.2px） */
  .why__word-h3{line-height:38px;letter-spacing:.24px}
  .why__word-text{letter-spacing:.15px}
  .why__br-pc{display:none}
  .why__br-sp{display:inline}
}

/* ===== PC・画面高が低い環境（ノートPC等）: 固定中にパネル下端（理由テキスト・写真・装飾）が切れないよう、余白と写真の大きさで詰める =====
   既定（パネル800px・固定余白60px）は 860px 以上の画面高で全部収まる。transform:scale() は使わず、
   パネル高（--why-pin-h）・固定余白（--why-pin-gap）・写真の縮小率（--why-photo-scale）・各要素の top を段階的に詰める。
   写真のマスクは path()（px指定）だと縮小に追従しないので、同じ4点を%にした polygon に置き換える（SP と同じ点） */
@media (min-width:1025px) and (max-height:860px){
  .why{--why-pin-h:720px;--why-pin-gap:40px;--why-photo-scale:.886;--why-photo-top:-29px;--why-word-top:420px;--why-deco1-top:452px}
}
@media (min-width:1025px) and (max-height:760px){
  .why{--why-pin-h:640px;--why-pin-gap:20px;--why-photo-scale:.771;--why-photo-top:-22px;--why-word-top:380px;--why-deco1-top:372px}
}
@media (min-width:1025px) and (max-height:860px){
  .why__photo{left:calc(50% - 350px * var(--why-photo-scale));top:var(--why-photo-top);width:calc(700px * var(--why-photo-scale));height:calc(856px * var(--why-photo-scale))}
  .why__photo-mask{top:calc(151.51px * var(--why-photo-scale));clip-path:polygon(28.805% 14.061%,86.751% 5.957%,61.604% 87.184%,3.658% 95.271%)}
  .why__word{top:var(--why-word-top)}
  .why__deco--1{top:var(--why-deco1-top)}
}