@charset "UTF-8";
/* =============================================================
   niau group ハブ ｜ pages.css
   niau-group.jp。★ハブは説明しない。4ブランドへの入口に徹する
   ============================================================= */

/* ブランドカード：均一に並べず偶数列を下げて動きを作る */
.brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
.brands>*{min-width:0}
.brands .brand:nth-child(even){margin-top:clamp(28px,4vw,64px)}
@media (max-width:899px){
  .brands{grid-template-columns:minmax(0,1fr)}
  .brands .brand:nth-child(even){margin-top:0}
}
.brand{background:var(--paper);padding:clamp(20px,2.2vw,32px);position:relative;
  min-width:0;display:block;transition:background var(--dur) var(--ease)}
.brand:hover{background:var(--band)}
.brand figure{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;
  background:var(--band);line-height:0;margin:0 0 20px}
.brand figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block}
.brand .ph{aspect-ratio:3/2;margin-bottom:20px}
.brand .en{display:block;font-family:var(--ff-en);font-size:17px;letter-spacing:.02em}
.brand .sub{display:block;margin-top:4px}
.brand .arrow{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}

/* 「次がある」＝3列とも同じ高さ・同じ幅（2026-08-21 岩田さん指示で段差を全撤去） */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.next>div{border-right:1px solid var(--line);padding:28px clamp(16px,2vw,28px) 40px;min-width:0}
.next>div:last-child{border-right:none}
.next .en{display:block;font-family:var(--ff-en);font-size:14px;letter-spacing:.06em;
  color:var(--mut);margin-bottom:4px}
.next b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em;margin-bottom:10px}
@media (max-width:899px){
  .next{grid-template-columns:minmax(0,1fr)}
  .next>div{border-right:none;border-bottom:1px solid var(--line);padding:24px 0}
  .next>div:last-child{border-bottom:none}
}

/* お知らせ（二階層への回遊） */
.news{border-top:1px solid var(--line)}
.news a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,32px);
  align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);min-height:48px}
.news time{font-family:var(--ff-en);font-size:13px;color:var(--mut);white-space:nowrap}
.news .t{font-size:14px}
@media (max-width:599px){.news a{grid-template-columns:minmax(0,1fr);gap:6px}}

/* 子ページカード（二階層） */
.children{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.children>*{min-width:0}
.children figure{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--band);line-height:0;margin:0 0 16px}
.children figure img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:top center;display:block}
.children .ph{aspect-ratio:16/10;margin-bottom:16px}
.children b{display:block;font-weight:400;font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
@media (max-width:699px){.children{grid-template-columns:minmax(0,1fr)}}

/* フォーム（固有レイアウト） */
.form{max-width:640px}
.form .f{margin-bottom:clamp(20px,2.4vw,28px)}
.form label{display:block;font-size:13px;margin-bottom:8px}
.form .req{font-size:11px;color:var(--paper);background:var(--ink);padding:2px 8px;margin-left:8px}
.form input,.form select,.form textarea{
  width:100%;min-height:48px;border:1px solid var(--line-2);padding:12px 14px;
  font-size:16px;background:var(--paper)}
.form textarea{min-height:140px;resize:vertical}
.form .steps{display:flex;gap:10px;font-size:12px;color:var(--mut);margin-bottom:clamp(24px,3vw,40px)}
.form .steps .on{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}