/* 全ページ共通のスマホ対応（各ページCSSの後に読み込む） */

/* フッターメニュー：グループごとに1行（左に見出し、右にリンクを横並び） */
.foot-nav .foot-cols{display:flex;flex-direction:column;margin-bottom:36px;border-top:1px solid var(--line)}
.foot-nav .fcol{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.foot-nav .fh{display:block;font-family:"Barlow",sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted)}
.foot-nav .fh em{display:block;font-style:normal;font-family:"Noto Sans JP",sans-serif;font-size:12px;letter-spacing:.06em;color:var(--navy);font-weight:700;margin-top:4px}
.foot-nav .foot-cols ul{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 28px;margin:0}
.foot-nav .foot-cols ul a{font-size:13px;line-height:1.6;white-space:nowrap}

/* サービスのメガメニュー：3つの動詞（つくる／ひろげる／そだてる）の区切り見出し */
.mslist .msgroup{display:block;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--muted);padding:16px 8px 8px}
.mslist .msgroup:first-child{padding-top:0}

/* タブレット以下：ヘッダーをハンバーガーに切り替え、共通ブロックを1カラム化 */
@media(max-width:1100px){
  .wrap,.nav,.foot-grid,.foot-bottom{padding-left:26px;padding-right:26px}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}

  /* 下層ページのヒーロー（タイトル＋リード） */
  .bhero-top{grid-template-columns:1fr;gap:24px;align-items:start}
  .bhero-lead{border-left:0;padding-left:0}

  /* フッター */
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .foot-nav{border-left:0;padding-left:0}
  .foot-nav ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
}

/* スマホ */
@media(max-width:620px){
  .wrap,.nav,.foot-grid,.foot-bottom{padding-left:20px;padding-right:20px}
  /* フッターのパーパス：2行目（16文字）が1行に収まるよう画面幅に合わせて縮小 */
  .foot-brand h3{font-size:clamp(17px,5.1vw,24px);letter-spacing:.02em}
  .foot-bottom{flex-wrap:wrap;gap:10px 20px}
  .foot-bottom .pp{padding-left:20px}
  /* フッターメニュー：見出しをリンクの上に置く */
  .foot-nav .fcol{grid-template-columns:1fr;gap:12px;padding:18px 0}
  .foot-nav .foot-cols ul{gap:10px 22px}
}

/* パンくず・サービス系ヒーローの余白 */
@media(max-width:1100px){
  .crumb{flex-wrap:wrap;gap:6px 10px}
  .shero .crumb,.shero-grid{padding-left:26px;padding-right:26px}
}
@media(max-width:620px){
  .shero .crumb,.shero-grid{padding-left:20px;padding-right:20px}
}