@charset "UTF-8";
/* ============================================================
   スマホ版の詰めなおし（index.html 専用）
   ------------------------------------------------------------
   ★何が問題だったか（実測）★
   375×812 で、ページ全体が 18,084px ＝ 画面 22.3枚ぶん。
   ほぼ全セクションが 上下 68px ずつの余白を持ち、
   セクションどうしの継ぎ目だけで毎回 136px 使っていた。
   見出しの下も一律 34px。

   一目で全部見せる必要はないが、
   「読むより先にスクロールが要る」状態になっていた。

   ここでは
     ・継ぎ目と見出し下の余白を詰める
     ・パソコン版でやっている左右の組み方を、スマホでも再現する
       （縦に積むのをやめると、そのぶん背が縮む）
   の2本立てで減らす。

   ★共有ファイルを書き換えない理由★
   style.css は about.html などでも使う。
   ============================================================ */

@media (max-width: 760px) {

  /* ============================================================
     1. 全体の余白を詰める
     ============================================================ */

  /* 継ぎ目 68+68=136px → 40+40=80px */
  .section,
  .stack__panel {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* 見出しと中身の間 */
  .sec-head { margin-bottom: 20px; }
  .sec-head__jp { margin-bottom: 0; }
  .sec-head__desc { margin-top: 12px; }
  .sec-head__rule { margin-top: 12px; }

  /* 締めのひとこと（上下 129px ずつ取っていた） */
  .catch { padding-top: 52px; padding-bottom: 52px; }

  /* 最後の帯とフッター */
  .cta-band { padding-top: 40px; padding-bottom: 40px; }
  .footer   { padding-top: 34px; }


  /* ============================================================
     2. 企業理念 — 四角のひとつが大きい件
     --------------------------------------------------------
     4つの箱は本来どれも同じ高さだが、開いている箱だけ
     説明ぶん伸びるので、そこだけ極端に大きく見えていた。
     行間と余白を詰めて、開いても膨らみすぎないようにする。
     ============================================================ */
  #philosophy .spine { gap: 10px; }
  /* ★ここに padding を足したら逆に背が伸びた（146→176px）★
     もともと余白はゼロで、大きさは中の行数で決まっていた。
     詰めるなら行間のほうを触る。 */
  #philosophy .spine__ja { line-height: 1.7; }
  #philosophy .spine__body { margin-top: 6px; }


  /* ============================================================
     3. SCALE — パソコン版の「左・右・左」を再現する
     --------------------------------------------------------
     いまは全部を縦一列にしていたので
       ・つづら折りの形が消える
       ・線を引く意味がなくなり非表示にしていた
       ・写真が2枚続けて出てきて、単調に見える
     という状態だった。

     幅は狭いが、12分割の組みはそのまま使える。
     ずらす量を減らし、写真を facts の「間」に差し込むと、
     パソコンと同じ読み進み方になる。
     ============================================================ */
  .facts--stagger {
    grid-template-columns: repeat(12, 1fr);
    gap: 0 6px;
    margin-top: 26px;
  }

  /* 01 左 → 写真A → 02 右 → 写真B → 03 左 */
  .facts--stagger .fact[data-slot="1"] { grid-column: 1 / span 9;  grid-row: 1; margin-top: 0; }
  .facts--stagger .net-media--a        { grid-column: 4 / span 9;  grid-row: 2; margin-top: 12px; }
  .facts--stagger .fact[data-slot="2"] { grid-column: 4 / span 9;  grid-row: 3; margin-top: 12px; }
  .facts--stagger .net-media--b        { grid-column: 1 / span 9;  grid-row: 4; margin-top: 12px; }
  .facts--stagger .fact[data-slot="3"] { grid-column: 1 / span 9;  grid-row: 5; margin-top: 12px; }

  /* 右に出る段は、罫と文字を右へ返す（パソコンと同じ作法） */
  .facts--stagger .fact[data-slot="2"] {
    border-left: 0;
    border-right: 1px solid var(--line);
    text-align: right;
  }
  .facts--stagger .fact[data-slot="2"] .fact__num { justify-self: end; }
  .facts--stagger .fact[data-slot="1"],
  .facts--stagger .fact[data-slot="3"] {
    border-left: 1px solid var(--line);
    border-right: 0;
    text-align: left;
  }
  .facts--stagger .fact[data-slot="1"] .fact__num,
  .facts--stagger .fact[data-slot="3"] .fact__num { justify-self: start; }

  /* 1つあたりを小さくする */
  .facts--stagger .fact { padding: 14px 14px; gap: 4px 12px; }
  .facts--stagger .fact__no   { font-size: 10px; }
  .facts--stagger .fact__label{ font-size: 13px; }
  .facts--stagger .fact__desc { font-size: 11px; }
  .facts--stagger .fact__num  { font-size: 30px; }

  /* つづら折りに戻ったので、縫う線を出す。
     線は network.js が実際の位置を測って引くので、
     この配置のままで正しい形になる */
  .net-thread { display: block; }

  /* 写真の枠。縦に場所を取りすぎないよう、横長のまま小さく */
  .net-media .depth__win { aspect-ratio: 16 / 9; }
  .depth__cap { font-size: 11px; margin-top: 6px; }


  /* ============================================================
     4. AREA — 地図とカードを左右に並べる
     --------------------------------------------------------
     いまは地図を上に出し（order:-1）、その下にカードを
     縦に7枚並べていた。地図とカードが同時に見えないので、
     どの街の話なのか分からなくなる。

     パソコンと同じ「カード＝左／地図＝右で貼りつく」に戻す。
     幅が足りないぶんは、どちらも小さくして収める。
     ============================================================ */
  .area-sec .area-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38%;
    gap: 12px;
    align-items: stretch;
  }
  /* 上に出す指定を打ち消して、右へ戻す */
  .area-sec .area-map { order: 0; }
  .area-sec .area-map__in {
    position: sticky;
    top: 84px;                 /* ヘッダー72px + 少し */
  }
  .area-sec .area-map__in svg { width: 100%; height: auto; }

  .area-sec .area-card { padding: 12px 12px; }
  .area-sec .area-card__jp { font-size: 17px; }
  .area-sec .area-card__en { font-size: 9px; }
  .area-sec .area-card__note { font-size: 11px; }

  /* 街の選びボタンは、折り返して全部見せる */
  .area-sec .area-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 12px;
  }
  .area-sec .area-chip { font-size: 11px; padding: 6px 10px; }


  /* ============================================================
     5. 代表挨拶 — 元の縦並びのまま
     --------------------------------------------------------
     一度「左に写真・右に文章」にしたが、幅375pxでは
     文章の段が220pxしかなく、1行に10文字前後しか入らない。
     読み物としては縦並びのほうがよい、とのことで戻した。
     ============================================================ */
  /* ============================================================
     6. 会社概要・募集要項 — 行の余白を詰める
     --------------------------------------------------------
     1125px あった表を、行ごとの上下を削って縮める。
     ============================================================ */
  .data-table th,
  .data-table td {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13px;
    line-height: 1.7;
  }
  .data-table { margin-top: 0; }


  /* ============================================================
     7. 採用 — 見出しまわりと、そのあとの間隔
     --------------------------------------------------------
     見出しの下に説明、そのすぐ下に区切り線、
     さらに項目の上余白……と、線と余白が続けて入っていた。
     区切り線はひとつあれば足りる。
     ============================================================ */
  #recruit .sec-head__desc { margin-top: 10px; }
  #recruit .sec-head__rule { margin-top: 10px; }
  #recruit .strength-grid { gap: 16px; }
  #recruit .data-table { margin-top: 22px; }
  #recruit .reveal { margin-top: 22px; }


  /* ============================================================
     8. お知らせ・お問い合わせ
     ============================================================ */
  .news-item__link { padding-top: 12px; padding-bottom: 12px; }

  .contact-form { gap: 12px; }
  .field { margin-bottom: 0; }
  .field > label { margin-bottom: 4px; font-size: 12px; }
  .field input,
  .field select,
  .field textarea { padding: 9px 11px; font-size: 14px; }
  .field textarea { min-height: 96px; }
  .tabs { margin-bottom: 18px; }
  .form-note { font-size: 11px; line-height: 1.7; }


  /* ============================================================
     9. 事業内容・強み — 図と間隔
     ============================================================ */
  #business .biz-grid { gap: 16px; }
  #business .biz-card { padding: 16px 16px; }
  #strength .strength-grid { gap: 16px; }
  #strength .str-fig { margin: 2px 0 12px; }
}


/* ============================================================
   とても狭い画面（iPhone SE など）
   ------------------------------------------------------------
   左右に並べると、さすがに文字が細くなりすぎる。
   AREA と 代表挨拶 だけ、地図・写真の取り分を減らす。
   ============================================================ */
@media (max-width: 400px) {
  .area-sec .area-layout { grid-template-columns: minmax(0, 1fr) 34%; }
  .facts--stagger .fact { padding: 12px 11px; }
  .facts--stagger .fact__num { font-size: 26px; }
}


/* ============================================================
   「重なるページ」の暗転を、CSSの側でも打ち消しておく
   ------------------------------------------------------------
   実際に止めるのは mobile-tune.js だが、
   万一その処理が動かなかったときに
   画面が暗いまま残らないようにしておく。
   ============================================================ */
.stack .stack__panel {
  filter: none;
  will-change: auto;
}


/* ============================================================
   AREA — 見出しごと画面に留めて、カードをスロットで送る
   ------------------------------------------------------------
   ★ScrollTrigger の pin ではなく position: sticky を使う★

   pin は「すきまの高さを自分で計算して挿し込む」仕組みで、
   その計算がずれると
       ・前のセクションにかぶさる
       ・長崎まで進めたのにもう一度 長崎の画面が出る
   という崩れ方をする。実際 2度起きた。

   sticky はすきまを入れないし、入れ物の中だけで留まる。
   仕組み上、二重に出たり、上にかぶさったりしようがない。

   高さの作り
     セクション      画面 1枚 ＋ 送りの距離（--area-travel）
     中の包み       画面 1枚ちょうど。これが留まる
   こうすると、送りの距離だけ留まってから流れる。
   ============================================================ */
.area-sec.area--sticky {
  /* 自分の余白は包みの側で持つので、ここでは持たない */
  padding-top: 0;
  padding-bottom: 0;
  /* 画面1枚 ＋ 送りの距離 */
  min-height: calc(100svh + var(--area-travel, 1200px));
  /* ★overflow をここに書かないこと★
     sticky は、祖先に overflow:hidden があると動かなくなる。
     以前これで AREA の地図が貼りつかなくなったことがある。 */
  overflow: visible;
  display: block;
}

/* 留まる包み。見出しも地図もカードもこの中 */
.area-sec.area--sticky .area-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  /* ★flex-direction を書き忘れて、見出しが消えていた★
     この包みの中には
         .container（見出し）と .container（地図とカード）
     の 2つが入っている。
     display:flex の初期値は「横並び」なので、
     見出しと本体が左右に並び、
     狭い方（見出し）が潰れて overflow:hidden で切られていた。
     縦に積むと明示する。 */
  flex-direction: column;
  justify-content: center;
  /* はみ出したカードを隠すのは、包みの側でやる */
  overflow: hidden;
}
/* 縦積みにしたので、幅を自分で張らせる */
.area-sec.area--sticky .area-stage > * { width: 100%; flex: 0 0 auto; }
.area-sec.area--sticky .area-stage > .container { width: 100%; }

/* カードを同じ場所に重ねる入れ物 */
.area-slot {
  position: relative;
  /* 主役 1枚ぶん＋下に覚く分の高さ。
     足りないと、覚いているカードが切れる */
  min-height: 218px;
}
.area-slot .area-card {
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: 0;
  transform-origin: 50% 0%;
  /* transform と opacity だけを動かす。
     この2つは描き直しが要らないので、送りが滑らかになる */
  will-change: transform, opacity;
  transition: none;
}

/* 動きを控える設定のときは、ふつうに縦に並べて全部読めるように */
.area-sec.area--plain .area-slot { min-height: 0; }
.area-sec.area--plain .area-slot .area-card {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: 12px;
}


@media (max-width: 760px) {
  /* ---- スマホ：上に地図、下にカード ----
     縦に長い画面なので、左右に割るより上下のほうが
     地図もカードも大きく取れる。
     （左右だと地図が幅 38%＝114px しかなく、小さすぎた） */
  .area-sec.area--sticky .area-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .area-sec.area--sticky .area-map { order: -1; }        /* 地図を上へ */
  .area-sec.area--sticky .area-map__in {
    position: static;                                     /* 包みごと留まるので不要 */
    display: flex; justify-content: center;
  }
  /* 地図をしっかり見せる。画面の高さの3割ほど */
  .area-sec.area--sticky .area-map__in svg {
    width: auto;
    height: clamp(190px, 30vh, 260px);
    max-width: 100%;
  }

  /* カードは小さめに。主役 1枚がすっと読める大きさ */
  .area-slot { min-height: 176px; }
  .area-sec .area-card { padding: 14px 14px; }
  .area-sec .area-card__jp { font-size: 19px; }
  .area-sec .area-card__en { font-size: 9px; }
  .area-sec .area-card__note { font-size: 12px; line-height: 1.7; }

  .area-sec.area--sticky .sec-head { margin-bottom: 12px; }
  .area-sec.area--sticky .sec-head__jp { font-size: 19px; }
  .area-sec .area-chips { margin-top: 10px; }
}

@media (min-width: 761px) {
  /* ---- パソコン：カード左・地図右のまま留める ---- */
  .area-sec.area--sticky .area-map__in { position: static; }
  .area-slot { min-height: 236px; }
}


/* ============================================================
   スクロールがかくつく件（会社概要・お問い合わせ など）
   ------------------------------------------------------------
   ★原因は固定ヘッダーの「すりガラス」★
   style.css は、スクロールするとヘッダーに
       backdrop-filter: saturate(150%) blur(16px)
   をかけている。これは「後ろにあるものを毎コマ読み取って、
   ぼかして描き直す」という処理で、スマホではとても重い。

   しかも後ろの中身が複雑なほど高くつくので、
   会社概要の長い表や、お問い合わせの入力欄が並ぶあたりで
   いちばん引っかかる。ご指摘の場所と一致する。

   さらに transition に backdrop-filter が入っていて、
   切り替わる 0.5 秒間はぼかしを少しずつ変える＝毎コマ計算し直す。

   スマホでは、ぼかしをやめて下地を濃いめの一色にする。
   小さい画面では見た目はほとんど変わらない。
   ============================================================ */
@media (max-width: 760px) {
  .header {
    /* ★動かすのは下地の色だけにする★
       もとは background / height / backdrop-filter の3つを
       0.5秒かけて変化させていた。このうち

         backdrop-filter … 後ろを毎コマぼかし直す（上に書いたとおり）
         height          … 変わるたびに配置を計算し直す

       の2つが重い。とくに height は、スクロール量が 40px を
       またぐたびに 0.5秒間ずっと計算が走る。
       上下に少し動かしただけで何度もまたぐので、
       かくつきを感じやすい場所になっていた。

       色（background）は塗り替えるだけで配置に影響しないので、
       これだけ残す。高さは 72→64px と一気に変わるが、
       8px の差なので目では追えない。 */
    transition: background 0.5s var(--ease-out);
  }
  .header.is-scrolled {
    background: rgba(242, 239, 232, 0.97);   /* 0.90 → 0.97 で透けを補う */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 大きなぼかし影も、スクロール中は塗り直しが要る。
     継ぎ目はもともと色差で分かるので、影は浅くする */
  .stack__panel { box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.35); }
  .area-sec { box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.4); }
}


/* ============================================================
   締めの「糸」が途切れる件
   ------------------------------------------------------------
   もとは pathLength="1" と
       stroke-dasharray: 1;
       stroke-dashoffset: calc(1 - var(--d));
   で描いていた。数値だけを書いているが、これらは長さの指定なので
   ブラウザは 1px と解釈する（実測でも計算結果は calc(1px) だった）。

   pathLength と px 指定の組み合わせは、ブラウザによって
   扱いが違う。Chrome では見えても、iPhone の Safari では
   線が途中で切れたり、飛び飛びになったりする。

   そこで JS（mobile-tune.js）に実際の長さを測らせ、
   --len に入れてもらう。あとは実寸で計算すれば、
   どのブラウザでも同じ引かれ方になる。
   ============================================================ */
.catch__l path {
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: calc(var(--len, 1400) * (1 - var(--d, 0)));
}


/* ---- 動きを控える設定のときは、糸を引き終わりにしておく ----
   ★ここを書き忘れて、線が丸ごと消えていた★
   tail.css には
       html.motion-reduced .catch__l path { stroke-dashoffset: 0; }
   という「動かさない代わりに引き終わった状態で見せる」指定がある。

   ところが上で足した
       stroke-dashoffset: calc(var(--len) * (1 - var(--d, 0)))
   は、このファイルが tail.css より後に読まれるぶん強い。
   しかも --d は、動きを控える設定だと tail.js が
   早々に処理を終えるため、一度も設定されない。
   つまり 1 - 0 = 全部隠す、になっていた。

   iPhone の「視差効果を減らす」を入れている方には、
   線がまったく見えない状態になる。後ろに置いて上書きし返す。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) .catch__l path { stroke-dashoffset: 0; }
}
html.motion-reduced .catch__l path { stroke-dashoffset: 0; }


/* ============================================================
   締めの糸を、はっきり見えるようにする
   ------------------------------------------------------------
   線は動いていた（--d は 0 → 1 まで変化している）。
   見えていなかったのは、色が地に近すぎたため。

   実測：地 rgb(11,20,40) に対して
         線は rgb(176,143,78) を 55% で乗せていたので、
         実際に見える色は rgb(102,88,61)。
         明暗差は 2.64 で、2px の細線には足りない。

   明るい金にして、薄める量も減らし、少し太くする。
   ============================================================ */
.catch__l path {
  stroke: var(--gold-300, #C6A768);
  stroke-width: 2.6px;
  opacity: 0.9;
}
@media (max-width: 760px) {
  /* スマホは線が短くなるぶん、さらにはっきりさせる */
  .catch__l path { stroke-width: 3px; opacity: 0.95; }
}


/* ============================================================
   締めのひとこと — 上下を詰め、線が切れないようにする
   ------------------------------------------------------------
   ★線が上下で切れていた原因★
   tail.css は線の高さを min(70vh, 480px) と決め打ちしている。
   セクションの余白を 129px → 52px に詰めたとき、
   セクションだけが 185px まで縮み、線は 480px のまま残った。
   セクションには overflow:hidden が効いているので、
   はみ出した上下がそのまま切り落とされていた。
   （実測：線は -148px 〜 332px、セクションは 0 〜 185px）

   線は文字の後ろに敷く飾りなので、
   セクションと同じ高さにして、その中で引ききるのが正しい。
   ============================================================ */
@media (max-width: 760px) {
  .catch { padding-top: 30px; padding-bottom: 30px; }

  .catch__l {
    /* 高さの決め打ちをやめ、セクションいっぱいに合わせる */
    top: 0;
    translate: none;
    height: 100%;
    /* 左右は、線が画面の外へ抜けていく見え方を残す */
    left: -6%;
    width: 112%;
  }

  /* 文字まわりも詰める */
  .catch .bigcopy__t { line-height: 1.45; }
  .catch .container { padding-block: 0; }
}