/* ===== 合同会社NEXT トップページ（index.html）専用スタイル =====
   momentia.jp 準拠：アイボリー基調・広い余白・明朝(BIZ UDPMincho)の小ぶり見出し・英字Manrope・細罫・ピル・抑えたブルー */
:root{
  --bg:#FAFAF8; --bg2:#EFF4F6; --paper:#FFFFFF;
  --ink:#2A2926; --sub:#817C73; --faint:#A8A296;
  --line:#E5DFD4; --line-soft:#EEE9E0;
  --accent:#2F8FC0; --accent-d:#226E97; --accent-t:#EAF2F8;
  --serif:"BIZ UDPMincho",serif; --body:"Noto Sans JP",sans-serif; --en:"Manrope",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.9;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);letter-spacing:.18em}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.04em;line-height:1.7}
.ey{font-family:var(--en);font-size:11.5px;font-weight:500;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}

/* ---- header ---- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.35s;background:rgba(250,250,248,.78);backdrop-filter:blur(11px);border-bottom:1px solid var(--line-soft)}
header.scrolled{background:rgba(250,250,248,.96);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(42,41,38,.02)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--en);font-weight:600;font-size:20px;letter-spacing:.34em;color:var(--ink);padding-left:.34em;display:flex;align-items:center}
.logo i{color:var(--accent);font-style:normal}
.logo img{height:28px;width:auto;display:block}
nav.gnav{display:flex;align-items:center;gap:32px;font-size:13.5px;font-weight:500;letter-spacing:.05em}
nav.gnav a{color:var(--ink);transition:.25s}
nav.gnav a:hover{color:var(--accent)}
.navcta{border:1px solid var(--ink);color:var(--ink)!important;padding:9px 22px;border-radius:100px;font-size:12.5px;letter-spacing:.06em;transition:.3s}
.navcta:hover{background:var(--ink);color:#fff!important}
.menubtn{display:none;font-size:22px;background:none;border:none;cursor:pointer;color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;background:#EEF4F9 url('../images/img_mv-illust-pc.png?v=6') no-repeat right center;background-size:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(250,250,248,.96) 0%,rgba(250,250,248,.84) 30%,rgba(250,250,248,.38) 56%,rgba(250,250,248,0) 80%)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hcopy{display:flex;flex-direction:column;justify-content:center;padding:132px 0 96px;max-width:560px}
.hero .ey{margin-bottom:30px}
.hero h1{font-size:clamp(27px,3.1vw,41px);color:var(--ink);font-weight:500}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{margin-top:30px;color:var(--sub);font-size:14.5px;font-weight:300;max-width:500px;line-height:2}
.hero .sub strong{display:block;margin-bottom:8px;font-weight:500;color:var(--ink)}
.chip{margin-top:34px;font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--faint);display:inline-flex;align-items:center;gap:10px}
.chip b{color:var(--ink);font-weight:500}
.btns{margin-top:34px;display:flex;align-items:center;gap:26px}
.btn{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--ink);color:var(--ink);padding:15px 34px;border-radius:100px;font-size:13.5px;letter-spacing:.06em;transition:.35s}
.btn:hover{background:var(--ink);color:#fff}
.btn .ar{font-family:var(--en);transition:.35s}
.btn:hover .ar{transform:translateX(4px)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-d);border-color:var(--accent-d)}
.tlink{font-size:13px;letter-spacing:.04em;color:var(--sub);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.3s}
.tlink:hover{color:var(--accent);border-color:var(--accent)}
.htag{position:absolute;right:30px;bottom:30px;z-index:1;background:rgba(255,255,255,.82);backdrop-filter:blur(6px);font-family:var(--en);font-size:11px;letter-spacing:.16em;color:var(--ink);padding:9px 18px;border-radius:100px;border:1px solid var(--line)}

/* ---- thin band ---- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.band .wrap{display:flex;align-items:center;justify-content:center;gap:24px;height:64px;flex-wrap:wrap}
.band .t{font-family:var(--serif);font-size:15px;letter-spacing:.06em;color:var(--ink)}
.band .e{font-family:var(--en);font-size:11.5px;letter-spacing:.22em;color:var(--accent)}
.band .sep{width:1px;height:18px;background:var(--line)}

/* ---- section heads ---- */
.sec{padding:118px 0}
.sec.alt{background:var(--bg2)}
.shead{margin-bottom:58px;max-width:720px}
.shead .ey{margin-bottom:18px}
.shead h2{font-size:clamp(22px,2.7vw,32px);color:var(--ink)}
.shead p{color:var(--sub);font-size:14px;font-weight:300;margin-top:20px;line-height:2}

/* ---- service: grid（3事業 同サイズカード）---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.4s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(42,41,38,.07)}
.card .ph{height:188px;background-size:cover;background-position:center}
.card .bd{padding:26px 24px 30px}
.card .ey{font-size:10.5px;letter-spacing:.18em;display:block;margin-bottom:11px}
.card h3{font-size:16.5px;color:var(--ink);margin-bottom:12px}
.card p{font-size:12.5px;font-weight:300;color:var(--sub);line-height:1.95}
.card .badge{display:inline-block;margin-top:16px;font-family:var(--en);font-size:10.5px;letter-spacing:.08em;color:var(--accent-d);border:1px solid var(--accent);background:var(--accent-t);padding:6px 13px;border-radius:100px}
.card .more{margin-top:18px;font-family:var(--en);font-size:11.5px;letter-spacing:.08em;color:var(--accent)}

/* ---- stations（5拠点：上段3列＋下段2列 / 6分割グリッドで span2×3・span3×2）---- */
.stations{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line)}
.st{grid-column:span 2;padding:34px 26px 30px;border-bottom:1px solid var(--line)}
.st:nth-child(4),.st:nth-child(5){grid-column:span 3}
.st:nth-child(1),.st:nth-child(2),.st:nth-child(4){border-right:1px solid var(--line)}
.st .no{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.st h4{font-size:17px;color:var(--ink);margin-bottom:16px}
.st dl div{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:12px;font-weight:300;color:var(--sub)}
.st dt{flex:none;width:50px;font-family:var(--en);font-size:10.5px;letter-spacing:.08em;color:var(--faint);padding-top:2px}
.st .map{display:inline-block;margin-top:18px;font-family:var(--en);font-size:11px;letter-spacing:.08em;color:var(--ink);border:1px solid var(--line);padding:8px 16px;border-radius:100px;transition:.3s}
.st .map:hover{border-color:var(--accent);color:var(--accent)}
.note{margin-top:30px;font-size:12px;font-weight:300;color:var(--faint)}

/* ---- about ---- */
.about .ag{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about .ph img{width:100%;border-radius:6px;display:block}
.about .ey{margin-bottom:18px}
.about h2{font-size:clamp(21px,2.6vw,30px);color:var(--ink)}
.about p{color:var(--sub);font-size:14px;font-weight:300;margin-top:24px;line-height:2.1}
.mini{display:flex;gap:46px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.mini .n{font-family:var(--en);font-size:30px;font-weight:300;color:var(--ink);line-height:1}
.mini .c{font-size:11.5px;font-weight:300;color:var(--sub);margin-top:10px;letter-spacing:.04em}

/* ---- cta ---- */
.cta{background:var(--bg2);text-align:center;padding:110px 0}
.cta .ey{margin-bottom:20px}
.cta h2{font-size:clamp(23px,3vw,34px);color:var(--ink)}
.cta p{font-size:14px;font-weight:300;color:var(--sub);max-width:500px;margin:22px auto 38px;line-height:2}
.cta .tel{margin-top:22px;font-size:11.5px;font-weight:300;color:var(--faint)}

/* ---- footer ---- */
footer{background:var(--paper);border-top:1px solid var(--line);padding:74px 0 38px}
.fgrid{display:grid;grid-template-columns:1.6fr 2fr;gap:48px;margin-bottom:50px}
.fgrid .logo{font-size:19px}
.fgrid .fd{font-size:12px;font-weight:300;color:var(--sub);margin-top:18px;line-height:2}
.fnav{display:flex;flex-wrap:wrap;align-content:start;gap:12px 30px}
.fnav a{font-size:12.5px;font-weight:300;color:var(--ink);opacity:.82;transition:.25s}
.fnav a:hover{opacity:1;color:var(--accent)}
.copy{border-top:1px solid var(--line);padding-top:28px;font-size:11px;font-weight:300;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.copy .en{letter-spacing:.16em}

/* ---- reveal (fallback-safe) ---- */
.reveal{opacity:1;transform:none}
body.js .reveal{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.7,.2,1)}
body.js .reveal.in{opacity:1;transform:none}

@media(max-width:960px){
  nav.gnav{display:none}.menubtn{display:block}
  /* スマホ：画像を切り取らず、イラスト全体を下部に表示し、上にコピーを重ねる */
  .hero{min-height:auto;background-size:contain;background-position:center bottom;padding-bottom:57vw}
  .hero::before{display:none}
  .hcopy{padding:112px 0 34px;max-width:none}
  .htag{display:none}
  .grid3{grid-template-columns:1fr 1fr}
  .stations{grid-template-columns:1fr 1fr}
  .st,.st:nth-child(4),.st:nth-child(5){grid-column:auto}
  .st{border-right:1px solid var(--line)}
  .st:nth-child(2n){border-right:none}
  .st:last-child{border-right:none}
  .about .ag{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:560px){
  .grid3,.stations{grid-template-columns:1fr}
  .st{grid-column:auto!important;border-right:none!important}
  .mini{gap:30px}
}