/* レイアウト：コンテナ・ヘッダー・フッター・グリッド */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding-block: var(--space-6); }
.section--subtle { background: var(--color-bg-subtle); }
.section__title { margin-bottom: var(--space-5); }

/* --- ヘッダー --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: var(--header-height);
}
.site-logo { display: flex; align-items: center; text-decoration: none; }
.site-logo img { width: auto; height: 32px; }
@media (min-width: 700px) { .site-logo img { height: 38px; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3); font: inherit; cursor: pointer;
}
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: var(--space-2) var(--space-3);
  text-decoration: none; color: var(--color-text); font-size: var(--font-size-sm);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-brand); }

/* スマホ：ハンバーガー展開 */
@media (max-width: 899px) {
  .site-nav { display: none; }
  /* スマホのナビはタップ領域44pxを確保する */
  .nav__link { padding: var(--space-3); }
  .site-nav.is-open {
    display: block; position: absolute; inset-inline: 0; top: var(--header-height);
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow); padding: var(--space-3) 0; max-height: 75vh; overflow-y: auto;
  }
}
/* PC：横並び＋ドロップダウン
   ホバー表示は1100px以上に限定する。1024pxのiPad横向きがホバー扱いになると
   製品11ページへの唯一の導線が開けなくなるため。 */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }
  .nav__list--root { display: flex; align-items: center; gap: var(--space-1); }
  .nav__item--has-children { position: relative; }
  .nav__submenu {
    display: none; position: absolute; left: 0; top: 100%; min-width: 18rem;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-2) 0;
    list-style: none; margin: 0;
  }
  .nav__item--has-children:focus-within .nav__submenu { display: block; }
}
@media (min-width: 1100px) and (hover: hover) {
  .nav__item--has-children:hover .nav__submenu { display: block; }
}
/* タッチ端末ではドロップダウンにせず、その場に展開する */
@media (min-width: 900px) and (hover: none) {
  .nav__submenu { display: block; position: static; box-shadow: none; border: 0;
    min-width: 0; padding: 0; }
  .nav__list--root { flex-wrap: wrap; }
}

/* --- グリッド --- */
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 600px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* --- フッター --- */
.site-footer {
  background: var(--color-brand-darker); color: #fff;
  padding-block: var(--space-6) var(--space-4); margin-top: var(--space-7);
}
.site-footer a { color: #fff; }