/*
  layout.css
  コンテナ・グリッド・セクションの縦余白のみ。色・コンポーネント個別の装飾はここに書かない。
  数値はデザイン定義の確定値。
*/

/* ===== コンテナ ===== */
.u-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-3); /* 〜599px：16px */
}

@media (min-width: 600px) {
  .u-container {
    padding-inline: var(--sp-4); /* 600〜899px：24px */
  }
}

@media (min-width: 900px) {
  .u-container {
    padding-inline: var(--sp-5); /* 900px〜：32px */
  }
}

/* ===== セクション上下パディング ===== */
.services,
.items,
.reasons,
.flow,
.area,
.company,
.contact,
.ftr {
  padding-block: var(--sp-6); /* 48px */
}

@media (min-width: 900px) {
  .services,
  .items,
  .reasons,
  .flow,
  .area,
  .company,
  .contact,
  .ftr {
    padding-block: var(--sp-7); /* 64px */
  }
}

/* ===== ユーティリティ（表示切替） ===== */
.u-hidden-desktop {
  /* SPで表示、lg(900px)以上で非表示（hdr__toggleに使用） */
}

/*
  クラスを2連記して詳細度を(0,2,0)に上げ、後続ファイル（sections.css）の
  コンポーネント個別セレクタ（例：.hdr__toggle、詳細度0,1,0）に対して
  読み込み順に関係なく確実に勝つようにする。!importantは使わない。
*/
@media (min-width: 900px) {
  .u-hidden-desktop.u-hidden-desktop {
    display: none;
  }
}