@charset "UTF-8";
/* 水環株式会社 採用サイト（見本）。書体はすべて SIL Open Font License（../表紙/fonts/） */
@font-face { font-family: "Shippori"; src: url(../fonts/ShipporiMincho-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Shippori"; src: url(../fonts/ShipporiMincho-Medium.woff2) format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Cormorant"; src: url(../fonts/CormorantGaramond-Medium.woff2) format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "ZenKaku"; src: url(../fonts/ZenKakuGothicNew-Medium.woff2) format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "ZenKaku"; src: url(../fonts/ZenKakuGothicNew-Bold.woff2) format("woff2"); font-weight: 700; font-display: block; }

:root {
  --墨: #1e2427;
  --社色: #0e4a59;
  --薄: #5d686d;
  --線: #d5dee1;
  --地: #f3f7f8;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--墨); }
body { font-family: "ZenKaku", "Hiragino Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }

/* ---- 頭（ヘッダー）: PC は白い札を2枚、写真の上に浮かべる ---- */
.頭 { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 24px; pointer-events: none; }
.頭 > * { pointer-events: auto; }
.社名 { display: flex; align-items: center; gap: 10px; background: #fff; height: 56px; padding: 0 20px; color: var(--社色); white-space: nowrap; }
.社名 svg { width: 22px; height: 22px; display: block; }
.社名 b { font-weight: 700; font-size: 17px; letter-spacing: .08em; }
.社名 small { font-weight: 500; font-size: 11.5px; letter-spacing: .14em; color: var(--薄); border-left: 1px solid var(--線); padding-left: 12px; margin-left: 4px; }
.右 { display: flex; background: #fff; height: 56px; }
.案内 { display: flex; align-items: center; gap: 30px; padding: 0 30px; font-weight: 500; font-size: 14px; letter-spacing: .1em; white-space: nowrap; }
.案内 a { position: relative; }
.案内 a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--社色); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.案内 a:hover::after { transform: scaleX(1); }
.エントリー { display: flex; align-items: center; justify-content: center; background: var(--社色); color: #fff; font-family: "Cormorant"; font-size: 18px; letter-spacing: .26em; padding: 0 34px 0 38px; }
.メニュー { display: none; }

/* 丸い矢印（詳しく見る・募集要項へ など。同じ形を使い回す） */
.詳しく { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; font-size: 13.5px; letter-spacing: .1em; color: var(--社色); }
.丸矢 { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; transition: background .3s, color .3s; }
.丸矢 svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.詳しく:hover .丸矢 { background: var(--社色); }
.詳しく:hover .丸矢 svg { stroke: #fff; transform: translateX(2px); }

/* ---- 主（最初の画面） ---- */
.主 { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: #d9e8eb; }
.区 { position: absolute; overflow: hidden; }
.区 .寄せ { position: absolute; inset: 0; }
.区 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* ロゴの形の輪（主.js・輪.js が描く）。「街の下に、」は水の上、「川がある。」は水の中 */
.輪 { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.輪 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.輪 p { position: absolute; left: 0; margin: 0; text-align: center; white-space: nowrap; }
.輪_字 { font-family: "Shippori"; font-weight: 500; letter-spacing: .14em; line-height: 1; }
.輪_字.上の字 { color: var(--墨); }
.輪_字.下の字 { color: #fff; }
.輪_小 { font-family: "ZenKaku"; font-weight: 700; letter-spacing: .24em; line-height: 1; }
.輪_小.上 { color: var(--社色); }
.輪_小.下 { color: rgba(255,255,255,.86); }

/* 説明の札（左下）と SCROLL の札（右下） */
.導き { position: absolute; left: 24px; bottom: 24px; z-index: 20; background: #fff; padding: 22px 26px 20px; max-width: 380px; }
.導き p { margin: 0 0 14px; font-size: 14px; line-height: 1.95; letter-spacing: .06em; }
.下へ { position: absolute; right: 24px; bottom: 0; z-index: 20; width: 46px; height: 150px; background: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.下へ span { font-family: "Cormorant"; font-size: 12px; letter-spacing: .32em; writing-mode: vertical-rl; color: var(--墨); }
.下へ i { position: relative; flex: 1; width: 1px; margin-top: 10px; background: var(--線); overflow: hidden; }
.下へ i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--社色); animation: 流れ 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes 流れ { to { top: 100%; } }

/* ---- 最初の画面の動き（読み込んだときに一度だけ。輪の水は 輪.js が入れる） ---- */
.動く .区 { animation: 現れる 1.2s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--遅れ); }
@keyframes 現れる { from { opacity: 0; transform: translateY(var(--ずれ)); } to { opacity: 1; transform: none; } }
.動く .区 img { animation: 寄る 7s cubic-bezier(.2,.6,.2,1) both; animation-delay: var(--遅れ); }
@keyframes 寄る { from { transform: scale(1.08); } to { transform: scale(1); } }
.動く .輪 .皿, .動く .輪 .縁 { animation: 輪が出る 1s cubic-bezier(.2,.7,.2,1) .7s both; transform-box: fill-box; transform-origin: center; }
@keyframes 輪が出る { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.輪 p { transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.動く .輪 p:not(.現れた) { opacity: 0; transform: translateY(8px); }
@keyframes 浮かぶ { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.動く .頭 { animation: 浮かぶ .9s ease 1.4s both; }
.動く .導き, .動く .下へ { animation: 浮かぶ .9s ease both; animation-delay: var(--後, 4s); }
.止め *, .止め *::before, .止め *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* ---- スマホ ---- */
@media (max-width: 767px) {
  .頭 { position: fixed; padding: 0; height: 60px; background: #fff; align-items: center; }
  .社名 { height: 60px; padding: 0 16px; gap: 8px; }
  .社名 svg { width: 20px; height: 20px; }
  .社名 b { font-size: 15px; }
  .社名 small { font-size: 10.5px; padding-left: 9px; margin-left: 2px; }
  .右 { display: none; }
  .メニュー { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 60px; height: 60px; padding: 0 18px; background: var(--社色); border: 0; }
  .メニュー i { display: block; height: 1.5px; background: #fff; }
  .主 { height: 100svh; min-height: 600px; }
  .導き, .下へ { display: none; }
  .固定 { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--社色); color: #fff; font-family: "Cormorant"; font-size: 16px; letter-spacing: .26em; height: 50px; padding: 0 26px 0 30px; box-shadow: 0 6px 18px rgba(14, 74, 89, .28); }
}
@media (min-width: 768px) { .固定 { display: none; } }

/* =====================================================================
   最初の画面より下の区切り
   ===================================================================== */
.本文 { position: relative; z-index: 1; background: #fff; }
.枠 { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.ラベル { margin: 0 0 14px; display: flex; align-items: baseline; gap: 14px; font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--薄); }
.ラベル span { font-family: "Cormorant"; font-size: 16px; letter-spacing: .32em; color: var(--社色); }
.見出し { margin: 0 0 60px; }
.見出し h2 { margin: 0; font-family: "Shippori"; font-weight: 500; font-size: 36px; letter-spacing: .12em; line-height: 1.5; }
.見出し.横並び { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.見出し_文 { margin: 0; max-width: 470px; font-size: 15px; line-height: 2; letter-spacing: .06em; color: var(--薄); }
.見出し.白 h2, .見出し.白 .見出し_文, .見出し.白 .ラベル { color: #fff; }
.見出し.白 .ラベル span { color: #b9dfe6; }
.番 { font-family: "Cormorant"; font-size: 15px; letter-spacing: .2em; color: var(--社色); font-variant-numeric: lining-nums; }
.詳しく.白 { color: #fff; }
.詳しく.白:hover .丸矢 { background: #fff; }
.詳しく.白:hover .丸矢 svg { stroke: var(--社色); }

/* 会社の考え */
.考え { padding: 160px 0 150px; }
.考え .枠 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 88px; align-items: center; }
.考え_写真 { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(0 0, 100% 5%, 93% 100%, 0 100%); }
.考え_写真 img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; }
.考え_文 { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 60px; }
.考え_文 .ラベル { grid-column: 1 / -1; margin-bottom: 36px; }
.縦見出し { grid-column: 2; grid-row: 2; margin: 0; writing-mode: vertical-rl; font-family: "Shippori"; font-weight: 500; font-size: 40px; letter-spacing: .22em; line-height: 1.8; white-space: nowrap; }
.考え_本文 { grid-column: 1; grid-row: 2; align-self: end; }
.考え_本文 p { margin: 0 0 1.5em; font-size: 15.5px; line-height: 2.25; letter-spacing: .06em; }
.考え_本文 .詳しく { margin-top: 10px; }

/* 数字で知る */
.数字 { background: var(--地); padding: 140px 0; }
.数字_並び { display: grid; grid-template-columns: 1fr 1.45fr; gap: 56px; align-items: stretch; }
.数字_大 { background: #fff; padding: 52px 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.数字_名 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .08em; color: var(--墨); }
.数字_値 { margin: 8px 0 0; display: flex; align-items: baseline; gap: 8px; color: var(--社色); white-space: nowrap; }
.数字_値 b { font-family: "Cormorant"; font-weight: 500; font-size: 66px; line-height: 1.05; letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }
.数字_大 .数字_値 b { font-size: 124px; }
.数字_値 small { font-size: 16px; font-weight: 700; color: var(--墨); letter-spacing: .06em; }
.数字_大 .数字_値 small { font-size: 22px; }
.数字_大 .手の線 { width: 78%; height: 18px; margin: 6px 0 0; }
.数字_注 { margin: 10px 0 0; font-size: 12.5px; color: var(--薄); letter-spacing: .06em; }
.数字_小 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; }
.数字_小 li { padding: 30px 26px 28px; border-left: 1px solid #c9d9dc; border-top: 1px solid #c9d9dc; }
.数字_小 li:nth-child(3n + 1) { border-left: 0; }
.数字_小 li:nth-child(-n + 3) { border-top: 0; }

/* 仕事を知る */
.仕事 { padding: 150px 0; }
.仕事_流れ { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 128px; }
.仕事_流れ > .手の線.縦 { position: absolute; left: 50%; top: -30px; bottom: 0; width: 24px; margin-left: -12px; }
.仕事_列 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 96px; }
.仕事_列.仕事_右 { padding-top: 250px; }
.仕事_列 li { position: relative; }
.仕事_列 li::before { content: ""; position: absolute; top: 34%; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1.5px solid var(--社色); }
.仕事_列.仕事_左 li::before { right: -70px; }
.仕事_列.仕事_右 li::before { left: -70px; }
.仕事_列 a { display: block; }
.仕事_列 figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
.仕事_列.仕事_右 figure { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%); }
.仕事_列 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.仕事_列 a:hover img { transform: scale(1.05); }
.仕事_文 { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: baseline; padding: 24px 64px 0 0; }
.仕事_文 .番 { grid-row: span 2; font-size: 44px; letter-spacing: 0; line-height: 1; }
.仕事_文 h3 { margin: 0 0 8px; font-family: "Shippori"; font-weight: 500; font-size: 24px; letter-spacing: .14em; }
.仕事_文 p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.95; letter-spacing: .04em; }
.仕事_文 .丸矢 { position: absolute; right: 0; top: 28px; color: var(--社色); }
.仕事_列 a:hover .丸矢 { background: var(--社色); }
.仕事_列 a:hover .丸矢 svg { stroke: #fff; }

/* 人を知る（社の色の帯） */
.人 { background: var(--社色); color: #fff; padding: 150px 0 130px; overflow: hidden; }
.人_札 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: start; }
.人_札 li:nth-child(even) { margin-top: 64px; }
.人_札 a { display: flex; flex-direction: column; position: relative; }
.人_札 .番 { display: block; margin: 0 0 10px; font-size: 46px; letter-spacing: 0; color: #fff; line-height: 1; }
.人_札 figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.人_札 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.人_札 a:hover img { transform: scale(1.05); }
.人_札 blockquote { margin: 0; background: #fff; color: var(--墨); padding: 24px 22px 14px; font-family: "Shippori"; font-size: 16px; line-height: 1.9; letter-spacing: .06em; }
.人_名 { margin: 0; background: #fff; color: var(--薄); padding: 0 22px 22px; font-size: 12px; letter-spacing: .08em; }
.人_名 b { display: block; color: var(--社色); font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.人_下 { margin-top: 64px; display: flex; justify-content: flex-end; }

/* 働く環境（大小の写真のタイルに白い札） */
.環境 { padding: 150px 0; }
.環境_タイル { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 20px; }
.タイル { position: relative; overflow: hidden; display: block; background: #d9e8eb; }
.タイル.大 { grid-row: span 2; }
.タイル:nth-child(4) { grid-column: span 2; }
.タイル img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.タイル:hover img { transform: scale(1.05); }
.タイル.大 img { inset: auto 0 0 0; height: 128%; object-position: 50% 100%; }   /* 研修: 空を減らし、2人の顔と手もとを大きく */
.白札 { position: absolute; left: 0; bottom: 0; background: #fff; padding: 22px 72px 20px 24px; max-width: 88%; }
.白札 h3 { margin: 0 0 6px; font-family: "Shippori"; font-weight: 500; font-size: 20px; letter-spacing: .12em; }
.白札 p { margin: 0; font-size: 13.5px; line-height: 1.85; letter-spacing: .04em; }
.白札 .丸矢 { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; color: var(--社色); }
.タイル:hover .丸矢 { background: var(--社色); }
.タイル:hover .丸矢 svg { stroke: #fff; }

/* 募集要項 */
.募集 { background: var(--地); padding: 150px 0; }
.募集_帯 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.帯 { position: relative; display: grid; grid-template-columns: 44% 1fr; background: #fff; min-height: 230px; }
.帯 figure { margin: 0; overflow: hidden; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.帯 img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.帯:hover img { transform: scale(1.05); }
.帯_文 { padding: 38px 74px 34px 30px; align-self: center; }
.帯_英 { margin: 0 0 8px; font-family: "Cormorant"; font-size: 13px; letter-spacing: .3em; color: var(--社色); }
.帯 h3 { margin: 0 0 10px; font-family: "Shippori"; font-weight: 500; font-size: 28px; letter-spacing: .14em; }
.帯_文 p:last-child { margin: 0; font-size: 14px; color: var(--薄); letter-spacing: .04em; }
.帯 .丸矢 { position: absolute; right: 26px; bottom: 26px; color: var(--社色); }
.帯:hover .丸矢 { background: var(--社色); }
.帯:hover .丸矢 svg { stroke: #fff; }
.募集_ほか { list-style: none; margin: 40px 0 0; padding: 0; display: flex; gap: 40px; justify-content: flex-end; }
.募集_ほか a { font-size: 14px; font-weight: 500; letter-spacing: .08em; border-bottom: 1px solid #b9cdd2; padding-bottom: 5px; }
.募集_ほか a:hover { border-color: var(--社色); color: var(--社色); }

/* ENTRY（最初の画面と同じ切り口の写真と、一筆の白い線） */
.応募 { position: relative; height: 580px; overflow: hidden; background: #d9e8eb; }
.応募_写真 { position: absolute; inset: 0; margin: 0; }
.応募_写真 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; display: block; }   /* 水たまりのふちが下に見える位置 */
/* ENTRY の輪（最初の画面と同じ、ロゴの形。区切り.js が描き、見えたら水がたまる） */
.応募_輪 { position: absolute; left: 50%; top: 50%; z-index: 5; width: 440px; height: 440px; margin: -220px 0 0 -220px; }
.応募_絵, .応募_絵 svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.応募_輪 > p, .応募_輪 > a { position: absolute; z-index: 2; margin: 0; }
.応募_英 { left: 0; right: 0; top: 24%; text-align: center; font-family: "Cormorant"; font-size: 56px; letter-spacing: .24em; padding-left: .24em; color: var(--社色); line-height: 1; }
.応募_言葉 { left: 0; right: 0; top: 56%; text-align: center; font-family: "Shippori"; font-size: 17px; line-height: 1.9; letter-spacing: .1em; color: #fff; }
.応募_ボタン { left: 50%; top: 76%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 16px; background: #fff; color: var(--社色); padding: 9px 10px 9px 28px; font-weight: 700; font-size: 14.5px; letter-spacing: .14em; white-space: nowrap; }
.応募_ボタン .丸矢 { width: 32px; height: 32px; border-color: var(--社色); color: var(--社色); }
.応募_ボタン:hover .丸矢 { background: var(--社色); }
.応募_ボタン:hover .丸矢 svg { stroke: #fff; }
.応募_言葉, .応募_ボタン { transition: opacity .8s ease 1.4s; }   /* 水がたまってから出る */
.応募_輪[data-現れる]:not(.見えた) .応募_言葉, .応募_輪[data-現れる]:not(.見えた) .応募_ボタン { opacity: 0; }

/* 手で引いた線（区切り.js が描く） */
.手の線 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.手の線 path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 足（フッター） */
.足 { background: #0b3a46; color: #d9ecf0; padding: 76px 0 42px; }
.足_上 { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.足_社名 { display: flex; align-items: center; gap: 10px; color: #fff; white-space: nowrap; }
.足_社名 svg { width: 24px; height: 24px; display: block; }
.足_社名 b { font-size: 18px; letter-spacing: .08em; }
.足_社名 small { font-size: 12px; letter-spacing: .14em; color: #a9cdd5; border-left: 1px solid #3f6e79; padding-left: 12px; margin-left: 4px; }
.足_案内 { display: flex; gap: 30px; flex-wrap: wrap; font-size: 13.5px; letter-spacing: .08em; }
.足_案内 a:hover { color: #fff; }
.足_著 { margin: 52px 0 0; font-size: 11.5px; color: #7ea6af; letter-spacing: .06em; }

/* 区切りの現れ方（区切り.js が 見えた を付ける） */
[data-現れる] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--遅, 0s); }
[data-現れる].見えた { opacity: 1; transform: none; }
.止め [data-現れる] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-現れる] { opacity: 1; transform: none; } }

/* ---- 区切りのスマホ ---- */
@media (max-width: 767px) {
  .枠 { padding: 0 20px; }
  .見出し { margin-bottom: 40px; }
  .見出し h2 { font-size: 27px; }
  .見出し.横並び { flex-direction: column; align-items: flex-start; gap: 14px; }
  .見出し_文 { font-size: 14px; }
  .考え { padding: 100px 0 90px; }
  .考え .枠 { grid-template-columns: 1fr; gap: 52px; }
  .考え_写真 { order: 2; aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%); }
  .考え_文 { column-gap: 22px; }
  .縦見出し { font-size: 29px; }
  .考え_本文 p { font-size: 14.5px; line-height: 2.1; }
  .数字 { padding: 96px 0; }
  .数字_並び { grid-template-columns: 1fr; gap: 26px; }
  .数字_大 { padding: 36px 26px 32px; }
  .数字_大 .数字_値 b { font-size: 86px; }
  .数字_値 b { font-size: 50px; }
  .数字_小 { grid-template-columns: repeat(2, 1fr); }
  .数字_小 li { padding: 22px 16px 20px; border-left: 1px solid #c9d9dc; border-top: 1px solid #c9d9dc; }
  .数字_小 li:nth-child(3n + 1) { border-left: 1px solid #c9d9dc; }
  .数字_小 li:nth-child(-n + 3) { border-top: 1px solid #c9d9dc; }
  .数字_小 li:nth-child(odd) { border-left: 0; }
  .数字_小 li:nth-child(-n + 2) { border-top: 0; }
  .数字_名 { font-size: 12.5px; }
  .仕事 { padding: 100px 0; }
  .仕事_流れ { display: flex; flex-direction: column; gap: 56px; padding-left: 30px; }
  .仕事_流れ > .手の線.縦 { left: 0; margin-left: -4px; top: 0; }
  .仕事_列 { display: contents; }
  .仕事_列.仕事_右 { padding-top: 0; }
  .仕事_列 li { order: var(--順); }
  .仕事_列.仕事_左 li::before, .仕事_列.仕事_右 li::before { left: -35px; right: auto; top: 22%; }
  .仕事_列.仕事_右 figure { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
  .仕事_文 { padding: 18px 52px 0 0; column-gap: 16px; }
  .仕事_文 .番 { font-size: 36px; }
  .仕事_文 h3 { font-size: 20px; }
  .仕事_文 p { font-size: 13.5px; }
  .仕事_文 .丸矢 { top: 22px; }
  .人 { padding: 100px 0 90px; }
  .人_札 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -20px; padding: 0 20px 10px; scrollbar-width: none; }
  .人_札 li { flex: 0 0 74%; scroll-snap-align: start; }
  .人_札 li:nth-child(even) { margin-top: 0; }
  .人_札 .番 { font-size: 40px; }
  .人_下 { margin-top: 36px; }
  .環境 { padding: 100px 0; }
  .環境_タイル { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 250px; gap: 14px; }
  .タイル.大 { grid-row: auto; }
  .タイル.大 img { inset: 0; height: 100%; object-position: 50% 60%; }   /* 横長の枠では、顔が上で切れないように */
  .タイル:nth-child(4) { grid-column: auto; }
  .募集 { padding: 100px 0; }
  .募集_帯 { grid-template-columns: 1fr; gap: 16px; }
  .帯 { grid-template-columns: 36% 1fr; min-height: 160px; }
  .帯_文 { padding: 22px 56px 22px 16px; }
  .帯_英 { font-size: 11px; letter-spacing: .2em; white-space: nowrap; }
  .帯 h3 { font-size: 21px; letter-spacing: .1em; white-space: nowrap; }
  .帯_文 p:last-child { font-size: 12.5px; }
  .帯 .丸矢 { right: 16px; bottom: 16px; }
  .募集_ほか { justify-content: flex-start; flex-wrap: wrap; gap: 22px; }
  .応募 { height: 540px; }
  .応募_輪 { width: 318px; height: 318px; margin: -159px 0 0 -159px; }
  .応募_英 { font-size: 40px; top: 23%; }
  .応募_言葉 { font-size: 13.5px; top: 55%; }
  .応募_ボタン { top: 77%; font-size: 12.5px; gap: 12px; padding: 7px 8px 7px 20px; }
  .応募_ボタン .丸矢 { width: 26px; height: 26px; }
  .足 { padding: 60px 0 100px; }
  .足_上 { flex-direction: column; align-items: flex-start; }
}