@charset "UTF-8";
/* CSS Document */

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML, body, .wrapperを100%にしてレイアウト全体を管理 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/* ラッパー要素にflexレイアウトを設定 */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ビューポートの高さを最低限確保 */
}

/* メインコンテンツを伸縮可能に（残りを埋める） */
main {
  flex: 1;
}

/* ヘッダー */
.site-header {
	display: flex;                  /* 子要素を横並びにする */
	justify-content: space-between; /* 左右の端に要素を配置 */
	align-items: center;            /* 子要素を上下中央に配置 */
	background-color: #ff8800;      /* 背景色をオレンジに設定 */
	color: white;                   /* テキストカラーを白に設定 */
	padding: 8px 16px;              /* 上下に8px、左右に16pxの内側余白 */
	position: relative;             /* 子要素の絶対配置などの基準にする */
	z-index: 10;                    /* スライドメニューなど他要素より前面に表示 */
}

.logo {
  font-family: 'source-code-variable', monospace; /* フォント指定 */
  font-size: 1rem;                                /* フォントサイズを標準（16px相当）に設定 */
  font-weight: 200;                               /* 細めのウエイト */
  letter-spacing: 0.2em;                          /* 文字間隔 */
  color: white;                                   /* テキストカラー */
}

/* ハンバーガーメニュー */
.hamburger-menu {
  position: relative; /* 相対配置 */
}

/* チェックボックス型（メニューの開閉制御用） */
#menu__toggle {
  opacity: 0;          /* 画面には表示されないが機能はするように透明に */
  position: absolute;  /* 実際の位置は見えないがDOM上で必要 */
  z-index: 2;          /* ボタンより手前で機能を優先させるための重なり指定 */
}

/* ハンバーガーメニューアイコン（3本線）のボタン */
.menu__btn {
  display: block;          /* ブロック要素にしてクリック範囲を確保 */
  position: absolute;      /* ヘッダー内で右上に固定表示 */
  top: -1px;               /* ヘッダーの上端に揃える調整 */
  right: 0px;              /* 右端配置 */
  width: 20px;             /* ボタンの幅を設定 */
  height: 18px;            /* 高さ */
  cursor: pointer;         /* ホバー時にポインター表示へ */
  z-index: 1001;           /* メニュー本体より前面に出す（クリック優先） */
}

/* ハンバーガーメニューの3本線（中央・上・下）の共通スタイル */
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;             /* 各線をブロック表示 */
  position: absolute;         /* ボタン内での位置を自由に制御するため絶対配置 */
  width: 100%;                /* 横幅 */
  height: 2px;                /* 線の太さ */
  background-color: #fff;     /* 線の色を白に */
  transition: 0.25s ease;     /* アニメーションの速度とイージング */
}

/* 上の線の位置（中央線より上） */
.menu__btn > span::before {
  content: '';                /* 疑似要素に内容を追加（空） */
  top: -6px;                  /* 中央より上に配置 */
}

/* 下の線の位置（中央線より下） */
.menu__btn > span::after {
  content: '';                /* 同上、下線 */
  top: 6px;                   /* 中央より下に配置 */
}

/* ハンバーガーがクリックされたとき（チェック状態）のアニメーション処理 */

/* 中央の線を斜めに（Xの左上→右下） */
#menu__toggle:checked + .menu__btn > span {
  transform: rotate(45deg);
}

/* 上の線を中央に移動（重ねる）＋ 回転なしに戻す */
#menu__toggle:checked + .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}

/* 下の線を中央に移動（重ねる）＋ 垂直に（Xの右上→左下） */
#menu__toggle:checked + .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}

/* --- スライドメニュー本体 --- */

/* メニューのパネル自体（非表示時は画面外） */
.menu__box {
  display: block;
  position: fixed;                 /* 常に画面に固定表示（スクロールに追従） */
  top: 0;
  right: -100%;                    /* 初期位置は画面外（右側）に隠す */
  width: 300px;                    /* メニューの横幅 */
  height: 100%;                    /* 画面の高さに合わせる */
  margin: 0;
  padding: 40px 24px;              /* 内側の余白 */
  background-color: #EBEBEB;       /* 背景色（ライトグレー） */
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.4); /* 左端に影を付けて浮かせる */
  transition: right 0.5s ease;    /* スライド動作をアニメーションで */
  z-index: 1;                     /* 重なり順（ハンバーガーボタンより下） */
}

/* チェック状態になったら右端にスライドして表示 */
#menu__toggle:checked ~ .menu__box {
  right: 0;
}

/* メニュー内タイトルテキスト */
.menu__title {
  font-family: "ads-strong", sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #ff8800;         /* オレンジ文字 */
  margin-bottom: 20px;
  pointer-events: none;   /* クリックイベントを無効化（リンクでない装飾文字） */
}

/* メニューリストのベース設定 */
.menu__list {
  list-style: none;       /* リストマーカー（●など）を非表示に */
  padding: 0;
  margin: 0;
}

/* 各メニューリンク項目 */
.menu__item {
  display: block;                         /* 横並びでなく縦並びに */
  padding: 14px 0;                        /* 項目ごとの上下余白 */
  color: #717071;                         /* グレー文字 */
  font-family: "ads-strong", sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;                 /* 下線なし */
  border-bottom: 1px solid #333;         /* 下線を引く */
  transition: background-color 0.3s, color 0.3s;  /* ホバー時のアニメーション */
}

/* ホバー時に背景色を薄く、文字色を少し濃く変更 */
.menu__item:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #4C4C4C;
}

/* ============================
   メイン背景エリア
   ページ全体の背景（オレンジ系）
============================ */

/* メイン背景：ヘッダー下から背景色が敷かれるエリア
   上部ヘッダー（オレンジ）とぴったり接するよう padding を削除 */

.main-bg {
  background-color: #fff5dc; /* 薄オレンジ（背景全体に広がる） */
  padding: 0;                /* 上の余白をなくしてヘッダーに接するように */
}

/* ============================
   中央白背景エリア（コンテンツエリア）
============================ */

/* 中央に配置された白背景のボックス
   最大幅を制限しつつ、左右中央寄せで余白あり */
.main-container {
  background-color: #fff;        /* 背景を白に設定（コンテンツエリア） */
  max-width: 1200px;             /* 最大幅を1200pxに制限（大画面対応） */
  margin: 0 auto;                /* 左右中央寄せ */
  padding: 40px 24px 60px;       /* 上40px、左右24px、下60pxの内側余白 */
  box-sizing: border-box;        /* paddingを含めてmax-widthに収める */	
}

/* ============================
   フッター（サイト最下部）
============================ */
.site-footer {
  width: 100%;                  /* 横幅いっぱいに広げる（画面全体） */
  background-color: #ff8800;    /* オレンジの背景色（ヘッダーと統一感） */
  color: #fff;                  /* フォントカラーは白に設定 */
  text-align: center;           /* 中央寄せ（テキスト） */
  font-size: 10px;              /* 小さめの文字サイズ（控えめな情報に） */
  font-weight: 300;             /* 軽めのウェイトで主張を抑える */
  padding: 7px 0;               /* 上下に7pxずつ余白（高さの主因） */
  line-height: 1.2;             /* 行間も詰めて高さを抑える */
  font-family: sans-serif;      /* 標準的なゴシック体で読みやすく */
  box-shadow: none;             /* 影なし。あれば視覚的に分離できる */
}

/* フッター内の段落（p要素） */
.site-footer p {
  margin: 0;     /* デフォルトの上下余白を削除（高さを抑える） */
  padding: 0;    /* 余白もゼロにしてスッキリ */
}

/* ============================
   SP（スマホ用）
============================ */
@media screen and (max-width: 768px) {
  .site-header {
    justify-content: center; /* 子要素全体を中央寄せ */
    height: 45px; /* 高さ調整 */
    padding: 12px 16px; /* 上下の余白も増やす */
  }

	/* ハンバーガーメニュー */
  .hamburger-menu {
    position: absolute;
    top: 22.5px;
    right: 15px;
  }

/* ハンバーガーメニューアイコン（3本線）のボタン */
.menu__btn {
  width: 25px;             /* ボタンの幅を設定 */
}

/* 上の線の位置（中央線より上） */
.menu__btn > span::before {
  content: '';                /* 疑似要素に内容を追加（空） */
  top: -8px;                  /* 中央より上に配置 */
}

/* 下の線の位置（中央線より下） */
.menu__btn > span::after {
  content: '';                /* 同上、下線 */
  top: 8px;                   /* 中央より下に配置 */
}

}