/* SYNCHROTRON 白いテイスト＝土台（gen_pages.BASE_CSS）＋骨（gen_site_w.THEME_CSS）。生成元 plan_b/gen_site_w.py */

:root{
  --paper:#ffffff; --paper2:#f6f5f3; --ink:#141414; --ink2:#4c4a46; --ink3:#8a8a88;
  --line:#e4e4e4; --deep:#0b0c0e;
  --mc:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gt:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic Medium",Meiryo,sans-serif;
  --e-expo:cubic-bezier(.19,1,.22,1); --e-cubic:cubic-bezier(.33,1,.68,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--gt);color:var(--ink);background:var(--paper);
  font-size:16.5px;font-weight:500;font-feature-settings:"palt";line-height:1.95;
  word-break:auto-phrase;overflow-x:clip}
/* スマホだけの改行。<br class="sp"> は 480px 以下でだけ効く（文節で割る＝Safari は auto-phrase を知らない） */
.sp{display:none}
@media (max-width:480px){.sp{display:inline}}
/* 行末の「。」「、」は右半分が空白＝中心が左にずれる（2026-09-06 河原さん・iPhone 実測 14〜19px）。
   palt はこの書体（Zen）に効かない（実測＝幅が変わらない）ので、行末の句読点の右 0.5em を詰める。
   .spo（<br class="sp"> の直前）は 480px 以下でだけ行末になる */
.pu{margin-right:-.8em}   /* 0.5em では墨の中心がまだ 0.25em 左（実測 7px）。0.8em＝「。」の墨の分だけ残して詰める */
.pu.spo{margin-right:0}
@media (max-width:480px){.pu.spo{margin-right:-.8em}}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.nb{display:inline-block;white-space:nowrap}
.wrap{width:min(1240px,100% - clamp(22px,4.4vw,64px)*2);margin-inline:auto}
.hd{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
  padding:clamp(13px,1.9vw,20px) clamp(20px,4.2vw,58px);
  transition:background-color .45s var(--e-cubic),box-shadow .45s var(--e-cubic)}
.hd.bg{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(20,20,20,.07)}
body.dark .hd.bg{background:rgba(11,12,14,.84);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hd b{font:600 15px/1 var(--gt);letter-spacing:.14em}
.hd nav{display:flex;gap:clamp(14px,1.9vw,30px)}
.hd nav a{font:500 13px/1 var(--gt);letter-spacing:.06em;position:relative;padding:6px 0}
.hd nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform .42s var(--e-cubic)}
.hd nav a:hover::after,.hd nav a.cur::after{transform:scaleX(1)}
.hd .mnu{display:none;background:none;border:1px solid currentColor;color:inherit;
  padding:8px 13px;font:500 12.5px/1 var(--gt);letter-spacing:.08em;cursor:pointer}
html.js .rv{opacity:0;transform:translate3d(0,56px,0);
  transition:opacity 1s var(--e-cubic),transform 1.3s var(--e-expo)}
html.js .rv.in{opacity:1;transform:none}
html.js .sl-l{opacity:0;transform:translate3d(-72px,0,0);
  transition:opacity 1s var(--e-cubic),transform 1.35s var(--e-expo)}
html.js .sl-l.in{opacity:1;transform:none}
/* スクロールの流れに合わせて現れる（2026-09-07 河原さん「速く送ると灰色のまま次へ行ってしまう・流れに合わせて」）
   ＝画面に入った量に結びつける（scroll-driven animation）。.sv は読み込んだ時に画面の下にあった物（JS が付ける）。
   対応しないブラウザは従来の「見えたら1回」のまま */
@supports (animation-timeline: view()) {
  html.js .rv.sv,html.js .sl-l.sv,html.js .sl-r.sv{transition:none;animation:syn-rv 1s linear both;animation-timeline:view();animation-range:entry 0px entry 260px}
  html.js .sl-l.sv{animation-name:syn-sl-l}
  html.js .sl-r.sv{animation-name:syn-sl-r}
  html.js .wipe.sv img{transition:opacity .7s var(--e-cubic),transform 1.1s var(--e-cubic);animation:syn-wipe 1s linear both;animation-timeline:view();animation-range:entry 0px entry 300px}
  @keyframes syn-rv{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
  @keyframes syn-sl-l{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
  @keyframes syn-sl-r{from{opacity:0;transform:translate3d(56px,0,0)}to{opacity:1;transform:none}}
  @keyframes syn-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .sl-l{opacity:1;transform:none;transition:none;animation:none}
}
.more{display:inline-flex;align-items:center;gap:12px;
  font-size:15.5px;font-weight:500;letter-spacing:.04em}
.more i{width:34px;height:2px;background:currentColor;transition:width .5s var(--e-cubic)}
.more:hover i{width:58px}
.btn{display:inline-block;padding:18px 44px;border:1.5px solid #fff;border-radius:999px;
  font-size:16px;font-weight:500;letter-spacing:.04em;color:#fff;
  transition:transform .45s var(--e-cubic),background-color .45s var(--e-cubic),color .45s var(--e-cubic)}
.btn:hover{background:#fff;color:var(--deep);transform:translate3d(0,-3px,0)}
.turn{background:var(--deep);color:#fff;text-align:center;padding:clamp(100px,15vh,190px) 0}
.turn .p{font:700 clamp(30px,5vw,68px)/1.4 var(--gt);letter-spacing:.01em}
.turn .btns{margin-top:clamp(38px,5.6vh,60px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn.g{border-color:rgba(255,255,255,.44);color:#c9cfd8}
.btn.g:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.ft{background:var(--deep);color:#e8e6e1;padding:clamp(56px,8vh,96px) 0 clamp(30px,4vh,44px);
  border-top:1px solid #1c1e22}
.ft .cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);
  gap:clamp(26px,4vw,60px)}
.ft b{font:600 15px/1 var(--gt);letter-spacing:.14em}
.ft .ds{margin-top:14px;font-size:12.5px;line-height:2.1;color:#9b9891}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft ul a{font-size:12.5px;letter-spacing:.05em;color:#bdb9b2;transition:color .4s var(--e-cubic)}
.ft ul a:hover{color:#fff}
.ft .cp{margin-top:clamp(36px,5vh,56px);padding-top:18px;border-top:1px solid #26282c;
  font-size:11px;letter-spacing:.08em;color:#7c7973;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
@media (max-width:900px){
  .hd nav{position:fixed;inset:0;background:#0b0c0e;flex-direction:column;
    justify-content:center;align-items:center;gap:30px;opacity:0;visibility:hidden;
    transition:opacity .38s var(--e-cubic),visibility .38s;z-index:40}
  .hd nav.open{opacity:1;visibility:visible}
  .hd nav a{font-size:21px;font-weight:500;letter-spacing:.08em;padding:10px 0;color:#fff}
  .hd nav a::after{background:#fff}
  .hd .mnu{display:block;position:relative;z-index:41}
}
@media (max-width:820px){
  .ft .cols{grid-template-columns:1fr;gap:30px}
}

/* ===== 白いテイストの骨（全ページ共通・トップ以外） ===== */
:root{--acc:#2a5bd7;--acc2:#4a8cff;--sky1:#eaf1fb;--sky2:#f5f8fd}
body{background:#fff}
main{position:relative}
/* 上だけ淡い青（トップの「浮上」と同じ色味）。面は白のまま */
.sky{position:absolute;inset:0 0 auto;height:min(92vh,880px);z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 84% 8%,rgba(74,140,255,.16) 0%,rgba(74,140,255,0) 70%),
             linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 46%,#fff 100%)}
.hd nav a{font-size:14.5px;padding:15px 0;font-weight:500}
.hd .mnu{padding:12px 16px;font-size:14px}

/* 入口＝左寄せ */
/* 頭＝大きな見出しは置かない。現在地の印（ナビと同じ語）を小さく1行だけ（2026-09-06 河原さん「クリックして飛んだから分かるはず・さりげなく」） */
.hero{padding:clamp(96px,13vh,150px) 0 clamp(10px,1.6vh,18px)}
.hero .lb{display:inline-flex;align-items:center;gap:10px;margin:0;font:500 12.5px/1 var(--gt);letter-spacing:.16em;color:var(--ink3)}
.hero .lb::before{content:"";width:18px;height:1px;background:var(--ink3)}
.hero h1{margin-top:.55em;font:700 clamp(36px,5.2vw,72px)/1.25 var(--gt);letter-spacing:.01em}
.hero .sub{margin-top:1.1em;max-width:36em;color:var(--ink2);font-size:clamp(16px,1.4vw,18px);line-height:1.9}
.hero .cnt{margin-top:.8em;font:500 13px/1.6 var(--gt);letter-spacing:.08em;color:var(--ink3);font-variant-numeric:tabular-nums}
.sec{padding:clamp(72px,10vh,140px) 0}
.h2row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:clamp(30px,4.4vw,56px)}
.h2row h2{font:700 clamp(28px,3.6vw,48px)/1.35 var(--gt);letter-spacing:.02em}
.h2row .yy{font:500 13px/1 var(--gt);letter-spacing:.12em;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 絞り込みの丸ボタン */
.chips{display:flex;flex-wrap:wrap;gap:2px 20px;margin-top:clamp(14px,1.8vw,22px)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 長い英字の題名（FlashbackJapan×SYNCHROTRON など）が枠を突き抜けない */
.tt,.nm,.big,.sub{overflow-wrap:anywhere}
[id]{scroll-margin-top:96px}
/* 分類・並び＝枠も塗りもない小さな文字。選んでいる物だけ黒く、下に細い線。件数は出さない（2026-09-06 河原さん「限りなくさりげなく」） */
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;position:relative;
  font:500 13.5px/1 var(--gt);letter-spacing:.05em;color:var(--ink3);cursor:pointer;transition:color .3s var(--e-cubic)}
.chip::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--e-cubic)}
.chip i{display:none}
.chip:hover{color:var(--ink)}
.chip.on{color:var(--ink)}
.chip.on::after{transform:scaleX(1)}
.hide{display:none !important}
.empty{display:none;padding:40px 0 80px;color:var(--ink2)}
.empty.on{display:block}

/* 最新1点＝写真 7：文字 5 */
.feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);align-items:center;
  padding:clamp(28px,4vh,48px) 0 clamp(40px,6vh,72px);border-bottom:1px solid var(--line)}
.feat figure{grid-column:1 / span 7;overflow:hidden;border-radius:12px;background:var(--paper2)}
.feat img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.1s var(--e-cubic)}
.feat:hover img{transform:scale(1.025)}
.feat .tx{grid-column:8 / -1;display:flex;flex-direction:column;gap:12px}
.new{align-self:flex-start;font:600 12px/1 var(--gt);letter-spacing:.12em;color:#fff;background:var(--acc);padding:7px 10px;border-radius:4px}
.mt{font:500 13px/1.6 var(--gt);letter-spacing:.06em;color:var(--ink2);font-variant-numeric:tabular-nums}
.feat .tt{font:700 clamp(22px,2.4vw,32px)/1.5 var(--gt);letter-spacing:.01em;transition:color .35s var(--e-cubic)}
.feat:hover .tt,.it:hover .tt{color:var(--acc)}
.go{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font:600 15px/1 var(--gt);letter-spacing:.04em;color:var(--acc)}
.go::after{content:"→";font-size:20px;transition:transform .45s var(--e-cubic)}
.feat:hover .go::after{transform:translate3d(6px,0,0)}

/* 一覧＝12列。均等にせず span で組む */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,40px);row-gap:clamp(40px,5.6vw,72px);
  padding:clamp(40px,6vh,72px) 0 clamp(90px,13vh,170px)}
.grid>*{min-width:0}
.it{display:block;position:relative}
.s7{grid-column:span 7}.s6{grid-column:span 6}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}
.it figure{overflow:hidden;border-radius:8px;background:var(--paper2)}
.it img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1s var(--e-cubic)}
.it:hover img{transform:scale(1.03)}
.it .tx{margin-top:14px;display:flex;flex-direction:column;gap:6px;position:relative;padding-right:40px}
.it .tt{font:700 clamp(16px,1.4vw,20px)/1.6 var(--gt);letter-spacing:.01em;transition:color .35s var(--e-cubic)}
.it.s7 .tt,.it.s6 .tt{font-size:clamp(18px,1.7vw,24px)}
.it .tx::after{content:"→";position:absolute;right:0;top:.1em;font-size:24px;line-height:1;color:var(--acc);transition:transform .45s var(--e-cubic)}
.it:hover .tx::after{transform:translate3d(6px,0,0)}

/* 押せる物＝同じ合図（矢印・触れると動く・キーボードの枠） */
.row-link{display:flex;align-items:baseline;gap:clamp(16px,2.6vw,36px);padding:clamp(18px,2.2vw,25px) 4px;border-bottom:1px solid var(--line)}
.row-link .dt{font:500 13.5px/1.6 var(--gt);letter-spacing:.08em;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.row-link .tt{font:500 16px/1.9 var(--gt);transition:color .35s var(--e-cubic)}
.row-link::after{content:"→";margin-left:auto;font-size:20px;line-height:1;color:var(--acc);align-self:center;transition:transform .45s var(--e-cubic)}
.row-link:hover::after{transform:translate3d(6px,0,0)}
.row-link:hover .tt{color:var(--acc)}
.more{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:600;letter-spacing:.04em;color:var(--ink);min-height:44px}
.more i{width:34px;height:2px;background:var(--acc);transition:width .5s var(--e-cubic)}
.more::after{content:"→";color:var(--acc);font-size:20px;transition:transform .45s var(--e-cubic)}
.more:hover i{width:58px}.more:hover::after{transform:translate3d(6px,0,0)}.more:hover{color:var(--acc)}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:12px 18px;border-radius:6px;background:var(--acc);color:#fff;font:600 14px/1 var(--gt);transition:top .2s}
.skip:focus{top:16px}

/* 締めの黒面＝着地。主ボタンは白塗り・従は線 */
.turn{background:var(--deep);color:#fff;text-align:center;padding:clamp(100px,15vh,190px) 0}
.turn .p{font:700 clamp(30px,5vw,68px)/1.4 var(--gt);letter-spacing:.01em}
.turn .btns{margin-top:clamp(38px,5.6vh,60px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:18px 46px;min-height:52px;box-sizing:border-box;border:1.5px solid #fff;border-radius:999px;
  background:#fff;color:var(--deep);font-size:16px;font-weight:600;letter-spacing:.04em;
  transition:transform .45s var(--e-cubic),background-color .45s var(--e-cubic),color .45s var(--e-cubic),border-color .45s var(--e-cubic)}
.btn:hover{background:var(--acc2);border-color:var(--acc2);color:#fff;transform:translate3d(0,-3px,0)}
.btn.g{background:transparent;border-color:rgba(255,255,255,.55);color:#e2e6ec;font-weight:500}
.btn.g:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
/* 白い面の上の主ボタン（お問い合わせの入口） */
.btn.dark{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.dark:hover{background:#1d47b8;border-color:#1d47b8}


/* 目次（採用・PC は左に固定） */
.two{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,4vw,64px);align-items:start}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:6px}
.toc a{display:flex;align-items:center;gap:10px;padding:10px 0;font:500 14.5px/1.4 var(--gt);color:var(--ink2);border-bottom:1px solid var(--line)}
.toc a::before{content:"";width:10px;height:2px;background:var(--acc);transition:width .4s var(--e-cubic)}
.toc a:hover{color:var(--acc)}.toc a:hover::before{width:22px}

/* 年の目盛り（お知らせ） */
.years{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.years a{font:600 15px/1.4 var(--gt);letter-spacing:.06em;color:var(--ink3);padding:8px 0;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:10px}
.years a::before{content:"";width:10px;height:2px;background:var(--line2,#c8c8c8);transition:width .4s var(--e-cubic),background-color .3s}
.years a:hover,.years a.on{color:var(--acc)}
.years a:hover::before,.years a.on::before{width:22px;background:var(--acc)}
.yr{margin:clamp(40px,5vw,64px) 0 clamp(12px,1.6vw,20px)}
.yr:first-child{margin-top:0}
.yr{font:700 clamp(24px,3vw,40px)/1.2 var(--gt);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.row-link.plain::after{content:none}
.row-link.plain .tt{color:var(--ink2)}

@media (max-width:820px){
  .hero{padding-top:clamp(78px,11vh,100px);padding-bottom:8px}
  .feat{grid-template-columns:1fr;gap:16px}
  .feat figure,.feat .tx{grid-column:1 / -1}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:30px}
  .s7,.s6{grid-column:1 / -1}
  .s5,.s4,.s3{grid-column:span 1}
  .it.s7 .tt,.it.s6 .tt,.it .tt{font-size:16px}
  .it .tx{padding-right:30px}.it .tx::after{font-size:20px}
  /* スマホ＝1行で横にすべる（畳まない＝本題が下がらない） */
  .chips{flex-wrap:nowrap;overflow-x:auto;gap:0 18px;margin:8px -20px 0;padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{min-height:40px;white-space:nowrap;font-size:13px}
  .tools{margin-top:8px}
  .two{grid-template-columns:minmax(0,1fr)}   /* 1fr だと中身の最小幅より縮まず横にはみ出す（採用で 26px） */
  .h2row{flex-wrap:wrap;row-gap:4px}.h2row .yy{white-space:normal;flex:1 1 100%;text-align:left}   /* 見出しの右の添え（職種名など）が長いと横にはみ出す＝折り返して下に */
  .cond dd,.jb p,.how li{overflow-wrap:anywhere}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 18px}
  .toc a{border:0;padding:6px 0}
  .years{position:static;flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .years a{padding:6px 0}
}