@charset "UTF-8";
/* ヒーロー：イラストは変形させず、スクロールで本文が上に重なっていく「めくり」で見せる。 */

body.nozomi-design{--nh-headoff:110px;--nh-hero-bg:#f4f1e8;--nh-ease:cubic-bezier(.16,1,.3,1)}

/* .nh-hero はスクロール用の空き高さだけを持ち、中身は .nh-hero-stage が viewport に固定される。 */
.nozomi-design .nh-hero{position:relative;z-index:0;padding:0;margin:0;overflow:visible;
  height:calc(100vh - var(--nh-headoff));height:calc(100svh - var(--nh-headoff));min-height:500px}
.nh-hero-stage{position:fixed;top:0;left:0;right:0;pointer-events:none;
  height:100vh;height:100svh;min-height:calc(500px + var(--nh-headoff));
  background:var(--nh-hero-bg);
  /* コピーに必要な分を先に取り、残りをイラストに渡す。ビューポートが低くても頭に文字が乗らない。 */
  display:grid;grid-template-rows:auto minmax(0,1fr);padding-top:calc(var(--nh-headoff) + 4px)}
.nh-hero-stage a,.nh-hero-stage button{pointer-events:auto}

.nozomi-design .nh-hero-copy{grid-row:1;position:relative;z-index:2;
  padding-inline:24px;text-align:center;pointer-events:none}
/* イラストの頭の上に収めるため、コピーは既定よりやや詰める。 */
.nozomi-design .nh-hero-copy h1{font-size:clamp(34px,3.8vw,58px);line-height:1.38;letter-spacing:.03em}
.nozomi-design .nh-hero-copy .nh-eyebrow{margin-bottom:14px!important}
.nozomi-design .nh-hero-copy .nh-hero-lead{margin-top:14px!important}

/* イラスト上部は余白なので、その分だけコピー側に食い込ませて絵を大きく使う。 */
.nh-hero-artwrap{grid-row:2;position:relative;overflow:hidden;min-height:0;margin-top:-72px;container-type:size}
/* 2:1 のパノラマ。cover だと頭が切れるので contain で全身を残し、下端を舞台の底に合わせる。
   幅を「上限・枠の幅・枠の高さ×2」の最小で決め、高さは比率から出す。
   height:100% と max-width を併用すると、背の高い画面（4K等）で幅だけ止まって縦に伸び、
   土台だけが引き伸ばされて頭と首がずれる。
   上限は1440pxか画面幅の75%の大きいほう。4Kで絵だけ小さく残り、見出しとの間が空くのを避ける。 */
.nozomi-design .nh-hero-art{position:absolute;left:50%;translate:-50% 0;bottom:0;top:auto;
  z-index:1;margin:0;aspect-ratio:1774/887;width:min(max(1440px,75vw),100cqw,200cqh);height:auto;
  max-width:none;max-height:none;mask-image:none}

.nozomi-design .nh-hero-bottom{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;
  width:min(1200px,calc(100% - 112px));margin:0;padding:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px}

/* 採用バッジ。155pxの丸では「いっしょに働く仲間へ」の「へ」だけが次の行に落ちるので、
   丸を少し広げて1行に固定する。 */
.nozomi-design .nh-hero-recruit strong{white-space:nowrap;letter-spacing:.01em}
@media(min-width:701px){body.nozomi-design .nh-hero-recruit{width:170px;height:170px}}

/* 本文側。ヒーローの上に乗り上げるので、不透明な背景と角丸を持たせる。 */
/* フッターは position 指定がなく、z-index:0 のヒーローに潜られるため明示的に前面へ。 */
.nozomi-design .nh-footer{position:relative;z-index:2}
.nh-flow{position:relative;z-index:2;background:var(--nh-paper);border-radius:44px 44px 0 0;padding-top:6px;
  box-shadow:0 -24px 60px -40px rgba(36,54,75,.45)}

/* ── 登場演出（1回だけ） ───────────────────────────── */
/* 初期の非表示は JS が動く環境だけ。スクリプトが落ちてもヒーローは見えたままにする。 */
.nh-js .nh-hero-art,.nh-js .nh-hero-copy>*,.nh-js .nh-hero-bottom>*{opacity:0}
.nh-hero[data-hero-ready] .nh-hero-art{animation:nh-art-in 1200ms var(--nh-ease) both}
.nh-hero[data-hero-ready] .nh-hero-copy>*{animation:nh-rise 900ms var(--nh-ease) both}
.nh-hero[data-hero-ready] .nh-hero-copy>:nth-child(1){animation-delay:120ms}
.nh-hero[data-hero-ready] .nh-hero-copy>:nth-child(2){animation-delay:240ms}
.nh-hero[data-hero-ready] .nh-hero-copy>:nth-child(3){animation-delay:420ms}
.nh-hero[data-hero-ready] .nh-hero-bottom>*{animation:nh-rise 900ms var(--nh-ease) both;animation-delay:820ms}
@keyframes nh-art-in{from{opacity:0}to{opacity:1}}
@keyframes nh-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* 下線マーカーは見出しが出そろってから引く。 */
.nh-js .nozomi-design .nh-hero h1 span::after{transform-origin:left center;transform:rotate(-1deg) scaleX(0)}
.nh-hero[data-hero-ready] h1 span::after{animation:nh-underline 620ms var(--nh-ease) 900ms both}
@keyframes nh-underline{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}

/* ── スクロールでの出現（本文） ───────────────────── */
.nozomi-design [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--nh-ease),transform .8s var(--nh-ease);transition-delay:var(--nh-delay,0ms)}
.nozomi-design [data-reveal].is-revealed{opacity:1;transform:none}

@media(max-width:1080px){body.nozomi-design{--nh-headoff:96px}
  .nozomi-design .nh-hero-bottom{width:calc(100% - 64px);bottom:22px}
  .nh-hero-artwrap{margin-top:-56px}}

/* モバイルは固定をやめ、通常フローの静止ヒーローに戻す（アドレスバー伸縮で跳ねるため）。 */
@media(max-width:700px){body.nozomi-design{--nh-headoff:80px}
  .nozomi-design .nh-hero{height:auto;min-height:0;padding-top:34px;background:var(--nh-hero-bg)}
  .nh-hero-stage{position:static;display:block;height:auto;min-height:0;padding-top:0}
  /* 高さが中身で決まるので、サイズ封じ込めを外す（付けたままだと高さ0に潰れる）。 */
  .nh-hero-artwrap{margin-top:-4px;container-type:normal}
  .nozomi-design .nh-hero-art{position:relative;left:auto;right:auto;bottom:auto;translate:none;
    width:150%;height:auto;max-width:none;max-height:none;margin:0 0 0 -25%}
  .nozomi-design .nh-hero-copy{padding-inline:20px}
  /* 固定サイズだと画面幅によって末尾の1〜2文字だけが次の行に落ちる。幅に比例させる。 */
  .nozomi-design .nh-hero-copy h1{font-size:clamp(26px,8.2vw,40px)}
  .nozomi-design .nh-hero-bottom{position:static;transform:none;width:calc(100% - 40px);margin:0 auto;
    padding-bottom:26px;flex-direction:column;align-items:stretch;gap:14px}
  .nh-flow{border-radius:26px 26px 0 0;box-shadow:none}}

@media(prefers-reduced-motion:reduce){
  .nh-hero-art,.nh-hero-copy>*,.nh-hero-bottom>*{opacity:1!important;animation:none!important;transform:none!important}
  .nozomi-design .nh-hero h1 span::after{transform:rotate(-1deg)!important;animation:none!important}
  .nozomi-design [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* Six registered head drawings. The torso/chair remain the same static pixels. */

/* ── イラストの動き ───────────────────────────────
   元絵から頭だけを切り出して重ね、首の付け根を軸に回す。
   同じ絵の同じ画素を動かすので、継ぎ目もノイズも出ない。 */
.nh-cast{display:block}
.nozomi-design .nh-cast-base{position:absolute;inset:0;width:100%;height:100%;display:block}
.nozomi-design .nh-cast-head{position:absolute;height:auto;max-width:none;display:block;
  transform-origin:50% var(--nh-pivot,91%);
  animation:nh-nod var(--nh-dur,7s) ease-in-out var(--nh-delay,0s) infinite;
  will-change:transform}
/* うなずき＝回転だけだとテコのように見えるので、わずかに沈ませる。 */
@keyframes nh-nod{
  0%,24%,62%,100%{transform:translateY(0) rotate(0deg)}
  32%{transform:translateY(var(--nh-dy,1.4%)) rotate(var(--nh-a,-3deg))}
  40%{transform:translateY(0) rotate(0deg)}
  48%{transform:translateY(calc(var(--nh-dy,1.4%) * .62)) rotate(calc(var(--nh-a,-3deg) * .62))}
  55%{transform:translateY(0) rotate(0deg)}
}
.nh-hero[data-cel-paused="true"] .nh-cast-head{animation-play-state:paused}
/* 「動きを止める」はページ全体の頭に効かせる（サービスカードの頭も止まる） */
html[data-cel-paused="true"] .nh-cast-head{animation-play-state:paused}
.nh-cel-toggle{position:absolute;right:24px;top:80px;z-index:3;min-height:44px;padding:8px 14px;border:1px solid #b9b5ad;border-radius:24px;background:var(--nh-hero-bg);color:var(--nh-navy);font:inherit;font-size:11px;cursor:pointer;pointer-events:auto}
.nh-cel-toggle[hidden]{display:none}
/* モバイルは絵の上に重なるので、リード文と干渉しない位置まで下げ、面を軽くする。 */
@media(max-width:700px){.nh-cel-toggle{top:20px;right:12px;font-size:10px;padding:7px 12px;
  background:rgba(244,241,232,.78);backdrop-filter:blur(3px);border-color:rgba(36,54,75,.22)}}
@media(prefers-reduced-motion:reduce){
  .nh-cast-head{animation:none!important;transform:none!important}
  .nh-cel-toggle{display:none}}

/* ── ヒーローを左へ流す（全画面幅） ──────────────────
   HEROの絵は3場面の横長1枚。これを場面ごとの窓（.nh-hero-panel）に分けて横に並べ、
   場面の間を同じ幅で空けて流す。窓は絵を切らず、見せる範囲をずらすだけなので、
   頭のうなずき（.nh-cast-head）もそのまま使える。
   複製と並べ直しは JS（nozomi-motion.js / buildMarquee）。送る距離（--nh-marquee-shift）と
   周期（--nh-marquee-dur）も JS が1周分の幅から決める。速さは画面幅によらず一定。
   --nh-cast-w は絵1枚ぶんの幅。静止時と同じ式。 */
.nh-hero-artwrap{--nh-cast-w:min(max(1440px,75vw),200cqh);--nh-gap:.12}
.nh-hero-marquee{display:flex;width:max-content;align-items:flex-end;
  animation:nh-hero-marquee var(--nh-marquee-dur,34s) linear infinite;will-change:transform}
.nh-hero-marquee.nh-marquee-still .nh-cast-head{animation:none}
.nh-hero[data-cel-paused="true"] .nh-hero-marquee{animation-play-state:paused}
/* --x / --w：窓の左端と幅（絵1枚に対する割合）。 */
.nh-hero-panel{position:relative;flex:0 0 auto;overflow:hidden;
  width:calc(var(--nh-cast-w) * var(--w));height:calc(var(--nh-cast-w) / 2);
  margin-right:calc(var(--nh-cast-w) * var(--nh-gap))}
/* --aw：その絵の幅（HEROの1枚絵に対する割合）。追加の場面も同じ縮尺で並ぶ。 */
.nozomi-design .nh-hero-panel .nh-hero-art{position:absolute;left:calc(var(--nh-cast-w) * var(--x) * -1);
  right:auto;top:auto;bottom:0;translate:none;margin:0;
  width:calc(var(--nh-cast-w) * var(--aw,1));height:auto;max-width:none;max-height:none}
.nh-hero-extra[hidden]{display:none}
/* PC：トラックを舞台の底に置く。 */
@media(min-width:701px){.nh-hero-marquee{position:absolute;left:0;bottom:0}}
/* モバイル：絵1枚は画面幅より広く（場面ひとつが小さくなりすぎないように）。 */
@media(max-width:700px){.nh-hero-artwrap{--nh-cast-w:max(101vw,min(620px,165vw))}}
@keyframes nh-hero-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--nh-marquee-shift,50%)))}}
@media(prefers-reduced-motion:reduce){.nh-hero-marquee{animation:none!important}}

/* ── HERO下の街の帯 ─────────────────────────────
   入口カード（.nh-entry）の上端の線を地面にして、団地と一軒家を置く。
   バイクと車はその間を行き来し、建物の前で止まる（＝訪問中）。
   2台は同じ周期で半周ずらしてあるので、止まる場所が重ならず、途中ですれ違う。
   位置は帯の幅（cqw）と各絵の幅から出すので、画面幅が変わっても建物の前で止まる。 */
.nh-town{position:relative;z-index:3}
.nh-town-scene{position:relative;width:min(1200px,calc(100% - 112px));height:124px;margin:30px auto 0;
  container-type:inline-size;pointer-events:none;
  --danchi-w:150px;--house-w:120px;--car-w:116px;--scooter-w:64px;--edge:3cqw;--gap:10px}
.nozomi-design .nh-town-scene img{position:absolute;bottom:0;left:0;display:block;height:auto;max-width:none}
.nozomi-design .nh-town-scene .nh-town-place--danchi{width:var(--danchi-w);left:var(--edge)}
.nozomi-design .nh-town-scene .nh-town-place--house{width:var(--house-w);left:auto;right:var(--edge)}
/* 行き先：A＝団地の右隣、B＝一軒家の左隣。face は絵の向き（車は右向き、バイクは左向き）。 */
.nozomi-design .nh-town-scene .nh-town-ride{--a:calc(var(--edge) + var(--danchi-w) + var(--gap));
  --b:calc(100cqw - var(--edge) - var(--house-w) - var(--gap) - var(--w));
  width:var(--w);translate:var(--a) 0;scale:var(--face) 1;
  animation:nh-town-trip 44s linear infinite;will-change:translate}
.nozomi-design .nh-town-scene .nh-town-ride--car{--w:var(--car-w);--face:1;z-index:1;bottom:1px;animation-delay:-22s}
.nozomi-design .nh-town-scene .nh-town-ride--scooter{--w:var(--scooter-w);--face:-1;z-index:2}
/* 0–10% 団地で訪問 → 10–46% 一軒家へ → 50% 向きを変える → 56–92% 団地へ → 96% 向きを変える */
@keyframes nh-town-trip{
  0%,10%{translate:var(--a) 0;scale:var(--face) 1;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  46%,48.5%{translate:var(--b) 0;scale:var(--face) 1}
  51.5%,56%{translate:var(--b) 0;scale:calc(var(--face) * -1) 1;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  92%,94.5%{translate:var(--a) 0;scale:calc(var(--face) * -1) 1}
  97.5%,100%{translate:var(--a) 0;scale:var(--face) 1}
}
.nh-town[data-paused="true"] .nh-town-ride{animation-play-state:paused}
/* 建物は両端で背が高く、乗り物は低いので、帯の上の中央が空いている。そこに置く。 */
.nh-town-toggle{position:absolute;left:50%;translate:-50% 0;top:0;min-height:36px;padding:6px 12px;
  border:1px solid rgba(36,54,75,.2);border-radius:20px;background:transparent;
  color:var(--nh-navy);font:inherit;font-size:11px;cursor:pointer}
.nh-town-toggle[hidden]{display:none}
.nh-flow>.nh-entry,.nh-flow>.nh-about,.nh-services>.nh-container,
.nh-recruit-band>.nh-container{position:relative;z-index:3}
@media(max-width:1080px){.nh-town-scene{width:calc(100% - 64px)}}
@media(max-width:700px){
  .nh-town-scene{width:calc(100% - 40px);height:84px;margin-top:22px;
    --danchi-w:92px;--house-w:74px;--car-w:72px;--scooter-w:40px;--edge:0px;--gap:6px}
  .nh-town-toggle{top:-8px;min-height:32px;font-size:10px;padding:5px 10px}
}
@media(prefers-reduced-motion:reduce){
  /* 止めた状態でも絵として成り立つよう、2台を別々の建物の前に置く。 */
  .nozomi-design .nh-town-scene .nh-town-ride{animation:none!important}
  .nozomi-design .nh-town-scene .nh-town-ride--car{translate:var(--b) 0}
  .nh-town-toggle{display:none}
}