/* ==========================================================================
   css/base.css
   リセット・タイポグラフィ・共通レイアウト・ユーティリティ
   MIRAIE PROJECT | 株式会社IKIpuro コーポレートサイト
   ガイドライン v1.2 準拠
   ========================================================================== */

/* ── リセット ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

/* ── タイポグラフィ ─────────────────────────────────────────────────────── */

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);   /* 17px */
  font-weight: 500;
  line-height: var(--lh-base); /* 29px */
  color: var(--color-text);    /* #707070 */
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
  transition: opacity 0.2s;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: var(--lh-loose); /* 44px */
}

p {
  overflow-wrap: break-word;
  line-height: var(--lh-relaxed); /* 33px */
}

/* ── 共通レイアウト ─────────────────────────────────────────────────────── */

/*
 * .container: 最大幅 1088px・中央寄せ・左右パディング
 * 各セクション内で使用する。
 */
.container {
  max-width: var(--container-max); /* 1088px */
  margin-inline: auto;
  padding-inline: var(--sp-sm);    /* 16px */
}

/* ── サイトヘッダー ─────────────────────────────────────────────────────── */
/*
 * 全ページ共通ヘッダー。
 * ロゴ中央配置・ハンバーガーボタン右上絶対配置。
 */
.site-header {
  /* ヘッダー全体を高さゼロで非表示。nav-toggle は fixed で独立表示するため overflow: visible を維持 */
  padding: 0;
  height: 0;
  overflow: visible;
}

.site-header-logo {
  display: none; /* ロゴ非表示 */
}

/* ハンバーガーボタン（画面右上に固定） */
.nav-toggle {
  position: fixed;
  top: var(--sp-sm);  /* 16px 要調整 */
  right: var(--sp-sm); /* 16px 要調整 */
  transform: none; /* site-header 内 translateY(-50%) を解除 */
  z-index: 200; /* nav-overlay(900/1000) より下・ヒーロー写真より上 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background-color: var(--color-primary);
  border-radius: 4px; /* 要調整 */
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ── ユーティリティ ─────────────────────────────────────────────────────── */

.u-hidden {
  display: none !important;
}

/* スクリーンリーダー専用（視覚的に非表示、SR には読まれる） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center {
  text-align: center;
}

.site-header--subpage {
  position: relative;
  text-align: center;
  background-color: var(--color-white);
  z-index: 10;
  padding: 16px 16px 100px;
}

.site-header--subpage .site-header-logo {
  display: block;
  position: relative;
  z-index: 2;
}

.site-header--subpage .site-header-logo img {
  width: 120px;
  height: auto;
  margin-inline: auto;
}

.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: block;
  }
}