/* =========================================================
   株式会社にしむら コーポレートサイト 共有スタイル
   - 固定幅(1240px/404px)を流動化し、色帯は全幅・内容は中央寄せ
   - トップページは PC版(.view-pc)/SP版(.view-sp) を画面幅で切替
   - 下層ページは単一DOMをメディアクエリで縦積み対応
   - 共通のモバイルナビ(ドロワー)は assets/site.js が制御
   ========================================================= */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#fff;overflow-x:hidden}
img{display:block;max-width:100%}
@keyframes nmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== トップページ：PC/SP ビュー切替 ===== */
.view-pc{width:100%;margin:0 auto;background:#fff;overflow:hidden}
.view-sp{width:100%;max-width:600px;margin:0 auto;background:#fff;overflow:hidden;display:none}
@media (max-width:960px){
  .view-pc{display:none}
  .view-sp{display:block}
}

/* PC版ヘッダーの内側を中央寄せ（色帯は全幅・内容は最大幅で中央） */
.nm-headwrap{max-width:1240px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}

/* =========================================================
   ヒーロー（.nmh）：写真コラージュ + 太字見出し
   - 位置は％基準（ステージの最大幅1240pxに対する比率）で全幅可変
   - 見出しは white-space:nowrap + clamp() で縦組み崩れを防止
   - 既定=モバイル配置 / @media(min-width:961px)=PCコラージュ配置
   ========================================================= */
.nmh{position:relative;background:#0E9A4C;overflow:hidden;padding:26px 0 32px}
.nmh__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nmh__wm{position:absolute;left:-12px;bottom:30px;font:800 92px/1 'Outfit';color:rgba(255,255,255,.08);white-space:nowrap;letter-spacing:-.02em}
.nmh__sh{position:absolute;display:block}
.nmh__sh--sq{left:20px;top:18px;width:40px;height:40px;background:#20296b;border-radius:9px;transform:rotate(-8deg)}
.nmh__sh--tri{right:22px;top:22px;width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:42px solid #149a8e}
.nmh__sh--dot{right:26px;bottom:84px;width:24px;height:24px;border-radius:50%;background:#fbd02e}
.nmh__sh--blob{display:none}
.nmh__sh--ring{display:none}

.nmh__stage{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:10px;padding:0 16px;max-width:600px;margin:0 auto}
.nmh__card{margin:0;background:#fff;padding:6px 6px 5px;border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.22);width:30%;max-width:150px}
.nmh__card--main{width:44%;max-width:210px}
.nmh__ph{display:block;border-radius:4px;overflow:hidden;aspect-ratio:4/3}
.nmh__card--main .nmh__ph{aspect-ratio:4/5}
.nmh__card--c .nmh__ph{aspect-ratio:3/4}
.nmh__ph img{display:block;width:100%;height:100%;object-fit:cover}
.nmh__card figcaption{font:500 8px/1.3 'Noto Sans JP';color:#555;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* モバイルでは主要3枚のみ表示 */
.nmh__card--b,.nmh__card--d,.nmh__card--e,.nmh__card--f{display:none}
.nmh__card--a{transform:rotate(-4deg)}
.nmh__card--c{transform:rotate(3deg)}

.nmh__copy{order:9;width:100%;display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:18px;position:relative;z-index:6}
.nmh__accent{display:none;position:absolute;background:#fbd02e;border-radius:8px}
.nmh__hl{display:inline-block;background:#1a1a1a;color:#fff;white-space:nowrap;letter-spacing:.01em;border-radius:2px}
.nmh__hl--lg{font:900 clamp(22px,6.4vw,30px)/1.3 'Noto Sans JP';padding:6px 16px}
.nmh__hl--sm{font:900 clamp(13px,4.2vw,17px)/1.4 'Noto Sans JP';padding:6px 14px}

@media (min-width:961px){
  .nmh{padding:0;height:600px}
  .nmh__wm{left:-30px;bottom:-24px;font-size:190px;color:rgba(255,255,255,.07)}
  .nmh__sh--sq{left:4.5%;top:30%;width:62px;height:62px}
  .nmh__sh--tri{right:24%;top:14%;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:68px solid #149a8e}
  .nmh__sh--dot{right:12%;bottom:20%;width:30px;height:30px}
  .nmh__sh--blob{display:block;left:64%;top:74%;width:96px;height:84px;background:#e8612c;border-radius:46% 54% 50% 50%/55% 45% 55% 45%;transform:rotate(8deg)}
  .nmh__sh--ring{display:block;left:38%;top:20%;width:18px;height:18px;border-radius:50%;background:#20296b;opacity:.55}

  .nmh__stage{display:block;width:1240px;max-width:100%;height:100%;margin:0 auto;padding:0}
  .nmh__card{position:absolute;width:auto;max-width:none}
  .nmh__card .nmh__ph{width:100%}
  .nmh__card figcaption{font-size:9.5px;margin-top:6px}
  /* 全7枚を散りばめ（left/top/width はステージ幅1240pxに対する％） */
  .nmh__card--main{left:39.5%;top:10%;width:21%;z-index:5;transform:none;box-shadow:0 22px 46px rgba(0,0,0,.28)}
  .nmh__card--a{left:11%;top:9%;width:13.5%;z-index:3;transform:rotate(-4deg)}
  .nmh__card--b{display:block;left:25.5%;top:27%;width:12%;z-index:4;transform:rotate(3deg)}
  .nmh__card--c{left:63%;top:12%;width:15%;z-index:3;transform:rotate(3deg)}
  .nmh__card--d{display:block;left:1.5%;top:55%;width:14%;z-index:3;transform:rotate(-3deg)}
  .nmh__card--e{display:block;left:18.5%;top:70%;width:12%;z-index:4;transform:rotate(2deg)}
  .nmh__card--f{display:block;left:80%;top:60%;width:13%;z-index:3;transform:rotate(3deg)}

  .nmh__copy{order:0;position:absolute;left:50%;top:57%;transform:translateX(-50%);width:auto;align-items:flex-start;gap:11px;margin:0}
  .nmh__accent{display:block;right:-16px;top:-12px;width:128px;height:46px;z-index:-1}
  .nmh__hl--lg{font-size:46px;line-height:1.32;padding:7px 22px}
  .nmh__hl--sm{font-size:30px;line-height:1.42;padding:8px 22px}
}

/* ===== 下層ページ：固定幅を流動化 ===== */
.site{width:100%;max-width:none;margin:0 auto;background:#fff;overflow:hidden}
/* 横スクロールが必要な図版（相関図など）を包む */
.nm-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== 共通：モバイルナビ ===== */
/* JSが挿入する下層ページ用の簡易ヘッダー（≤960pxのみ表示） */
.nm-mobilebar{display:none}
@media (max-width:960px){
  .nm-mobilebar{display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 18px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
  .nm-deskhead{display:none !important}
}
.nm-mobilebar .nm-mb-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.nm-mobilebar .nm-mb-logo b{font:900 14px/1 'Noto Sans JP';color:#1a1a1a}
.nm-mobilebar .nm-mb-logo span{font:600 7px/1 'Outfit';letter-spacing:.2em;color:#0E9A4C;display:block;margin-top:3px}
.nm-burger{width:40px;height:40px;border:none;background:#f3f1eb;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.nm-burger span{width:17px;height:2px;background:#1a1a1a;border-radius:2px;transition:.2s}

/* スライドインのドロワー本体 */
.nm-drawer{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
.nm-drawer.open{visibility:visible;pointer-events:auto}
.nm-drawer-ov{position:absolute;inset:0;background:rgba(15,18,30,.45);opacity:0;transition:opacity .25s}
.nm-drawer.open .nm-drawer-ov{opacity:1}
.nm-drawer-panel{position:absolute;top:0;right:0;height:100%;width:84%;max-width:340px;background:#fff;box-shadow:-12px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;padding:22px 22px 30px;overflow-y:auto}
.nm-drawer.open .nm-drawer-panel{transform:translateX(0)}
.nm-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.nm-drawer-head b{font:900 15px/1 'Noto Sans JP';color:#1a1a1a}
.nm-drawer-close{width:38px;height:38px;border:none;background:#f3f1eb;border-radius:10px;font-size:20px;line-height:1;color:#1a1a1a;cursor:pointer}
.nm-drawer-nav{display:flex;flex-direction:column}
.nm-drawer-nav a{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;font:700 15px 'Noto Sans JP';color:#1a1a1a;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.08)}
.nm-drawer-nav a::after{content:'›';color:#0E9A4C;font-size:18px}
.nm-drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.nm-drawer-cta a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:999px;font:700 14px 'Noto Sans JP';text-decoration:none}
.nm-drawer-cta a.doc{background:#1a1a1a;color:#fff}
.nm-drawer-cta a.contact{background:#20296b;color:#fff}

/* ===== 下層ページ：≤960px の縦積み・余白調整 ===== */
@media (max-width:960px){
  /* 横並びカード群を2列に */
  .site [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr !important;gap:16px !important}
  /* 会社概要テーブル：ラベル/値を縦積み */
  .site [style*="display:flex;border-bottom:1px solid rgba(0,0,0,.1)"]{flex-direction:column !important}
  .site [style*="width:200px;flex:none"]{width:100% !important;padding:14px 16px 4px !important}
  .site [style*="flex:1"][style*="padding:20px 24px"]{padding:4px 16px 16px !important}
  /* アクセス（地図＋住所）を縦積み */
  .site [style*="gap:28px"][style*="align-items:stretch"]{flex-direction:column !important;gap:18px !important}
  /* ワンストップ7ステップ：横並び→縦並び、矢印は下向きに */
  .site [style*="align-items:stretch;justify-content:center;gap:6px"]{flex-direction:column !important;align-items:center !important;gap:10px !important}
  .site [style*="width:138px;flex:none"]{width:100% !important;max-width:320px !important}
  .site [style*="display:flex;align-items:center;flex:none"] svg{transform:rotate(90deg)}
  /* CTAボタン列を折り返し */
  .site [style*="display:flex"][style*="gap:14px"][style*="justify-content:center"]{flex-wrap:wrap !important}
  /* 大きな左右余白(80px)を圧縮 */
  .site [style*="padding:50px 80px"]{padding:34px 20px !important}
  .site [style*="padding:20px 80px"]{padding:18px 20px !important}
  .site [style*="padding:64px 80px 70px"]{padding:40px 20px 48px !important}
  .site [style*="padding:64px 80px 40px"]{padding:40px 20px 28px !important}
  .site [style*="padding:60px 80px 30px"]{padding:40px 20px 16px !important}
  .site [style*="padding:36px 80px 64px"]{padding:24px 20px 48px !important}
  .site [style*="padding:48px 80px 8px"]{padding:30px 20px 8px !important}
  .site [style*="padding:40px 80px 70px"]{padding:28px 20px 50px !important}
  .site [style*="padding:54px 50px"]{padding:30px 16px !important}
  .site [style*="margin:0 30px 0"]{margin:0 12px !important}
}

/* ===== 下層ページ：≤620px の見出し縮小・1列化 ===== */
@media (max-width:620px){
  .site h1{font-size:25px !important;line-height:1.35 !important}
  .site h2{font-size:21px !important}
  .site h3{font-size:16px !important}
  .site [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}
}

/* =========================================================
   スクロールモーション / ヒーローのロード演出
   - .nm-anim は <head> のインラインJSが付与（JSオフ時は無効＝常時表示）
   - opacity / transform のみでレイアウトに影響を与えない
   - prefers-reduced-motion では無効化
   ========================================================= */
@keyframes nmFade{from{opacity:0}to{opacity:1}}

/* スクロールリビール（ビューポート進入でフェード＋上へ） */
.nm-anim .nm-rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1)}
.nm-anim .nm-rv.is-in{opacity:1;transform:none}

/* ヒーロー：ロード時に写真が順にフェードイン → 見出し */
.nm-anim .nmh__card{opacity:0;animation:nmFade .85s ease forwards}
.nm-anim .nmh__card--main{animation-delay:.05s}
.nm-anim .nmh__card--a{animation-delay:.16s}
.nm-anim .nmh__card--c{animation-delay:.24s}
.nm-anim .nmh__card--b{animation-delay:.32s}
.nm-anim .nmh__card--d{animation-delay:.40s}
.nm-anim .nmh__card--e{animation-delay:.48s}
.nm-anim .nmh__card--f{animation-delay:.56s}
.nm-anim .nmh__copy{opacity:0;animation:nmFade .9s ease .62s forwards}

@media (prefers-reduced-motion: reduce){
  .nm-anim .nm-rv{opacity:1 !important;transform:none !important;transition:none !important}
  .nm-anim .nmh__card,.nm-anim .nmh__copy{opacity:1 !important;animation:none !important}
}