/* ==================================================================
   共通 追加スタイル（トップ / 下層ページ）
   ------------------------------------------------------------------
   ・style.css（Sassからの書き出し）は変更せず、このファイルで上書きします
   ・必ず style.css より後に読み込んでください
   ・読み込みページ: top / contact / recruit / recruit/form
   ================================================================== */

/* 背景グラデーションをスマホでも固定表示にする
   ------------------------------------------------------------------
   style.css のSP指定は position:absolute かつ縦位置が割合(103%)のため、
   位置がページ全体の高さに連動する。ページが長いrecruitでは
   グラデーションが下部に押し出され、上部が真っ黒になっていた。
   PCと同じ position:fixed に戻して画面基準の固定表示にしたうえで、
   縦位置も割合ではなく固定値にする。固定値にすることで端末の画面高さに
   よらず同じ見え方になり、contactの元の見え方（上は淡く、下へ向かって
   濃くなる）を保ったまま固定される。
   ※位置を調整する場合は -900 の数値を変更する
     数値を大きく（-1200など）＝グラデーションが上へ
     数値を小さく（-600など）  ＝グラデーションが下へ */
@media screen and (max-width: 759.98px)and (orientation: portrait){
[data-page] #wrapper.under:before{position:fixed;background-position:39% calc(-900/375*100dvw)}
}


/* ==================================================================
   トップページ MEMBER セクション 追加・上書きスタイル
   ------------------------------------------------------------------
   Figma「改修」版（node-id 350-1194）に合わせた変更。
   1. 顔写真の高さを 220px → 260px（PC / 1440基準）に変更
      ・SP は 157px → 184.83px（327 : 184.83 ＝ 460 : 260 と同じ比率）
   2. 名前の右横にローマ字表記（.en）を小さく追加
   3. メンバーが3名になったため、3人目は次の行に折り返して中央寄せ
      ・.member に固定幅を持たせて 460 + 80 + 460 = 1000（inner幅）に収める
   ================================================================== */

/* --- 折り返しレイアウト（1行目2名 / 2行目1名を中央寄せ） ---
   Firefox対策：100dvw はスクロールバー幅を含むため、.inner（max-width が dvw）は
   実際の表示幅で頭打ちになる一方、.member を dvw で指定すると幅が縮まらず、
   2カラムに収まらず全員が縦並びになっていた。
   幅の基準を「ビューポート(dvw)」から「親要素(%)」に変え、
   さらに grid + 1fr にして丸め誤差でも折り返さないようにする。 */
[data-page=top] #about .c1 .members{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  justify-content:normal;
  -moz-column-gap:8%;   /* 80 / 1000（.inner幅）*/
  column-gap:8%;
  row-gap:calc(56/1440*100dvw);
}
[data-page=top] #about .c1 .members .member{
  width:auto;
}
/* 3人目（奇数の最終要素）は2カラムぶちぬきにして中央寄せ */
[data-page=top] #about .c1 .members .member:nth-child(odd):last-child{
  grid-column:1 / -1;
  width:46%;            /* 460 / 1000 ＝ 1カラム分 */
  margin-inline:auto;
}

/* --- 顔写真の高さ --- */
[data-page=top] #about .c1 .members .member figure{
  height:calc(260/1440*100dvw);
}

/* --- 名前＋ローマ字 --- */
[data-page=top] #about .c1 .members .member .txt .name{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  -moz-column-gap:calc(16/1440*100dvw);
  column-gap:calc(16/1440*100dvw);
}
[data-page=top] #about .c1 .members .member .txt .name .en{
  font-size:calc(14/1440*100dvw);
  font-weight:400;
  letter-spacing:0;
  line-height:1.8;
}

/* --- 1920px以上（style.css と同じくpx固定に切り替え） --- */
@media screen and (min-width: 1920px){
  [data-page=top] #about .c1 .members{
    row-gap:74.6666666667px;
  }
  [data-page=top] #about .c1 .members .member{
    width:auto;
  }
  [data-page=top] #about .c1 .members .member figure{
    height:346.6666666667px;
  }
  [data-page=top] #about .c1 .members .member .txt .name{
    -moz-column-gap:21.3333333333px;
    column-gap:21.3333333333px;
  }
  [data-page=top] #about .c1 .members .member .txt .name .en{
    font-size:18.6666666667px;
  }
}

/* --- SP（縦積みなので固定幅は解除） --- */
@media screen and (max-width: 759.98px)and (orientation: portrait){
  [data-page=top] #about .c1 .members{
    row-gap:calc(40/375*100dvw);
  }
  [data-page=top] #about .c1 .members{
    grid-template-columns:1fr;
  }
  [data-page=top] #about .c1 .members .member{
    width:100%;
  }
  [data-page=top] #about .c1 .members .member:nth-child(odd):last-child{
    grid-column:auto;
    width:100%;
    margin-inline:0;
  }
  [data-page=top] #about .c1 .members .member figure{
    height:calc(184.83/375*100dvw);
  }
  [data-page=top] #about .c1 .members .member .txt .name{
    -moz-column-gap:calc(8/375*100dvw);
    column-gap:calc(8/375*100dvw);
  }
  [data-page=top] #about .c1 .members .member .txt .name .en{
    font-size:calc(10/375*100dvw);
    line-height:1.6;
  }
}