/* application.css */

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

/* ==== カスタムプロパティ（CSS変数） ==== */
:root {
  /* --- カラー --- */
  --color-bg-header: #151515;
  --color-bg-sidebar: #000000;
  --color-text-light: #ffffff;
  --color-border-main: #ffffff;
  --color-link-hover: 0.7;        /* img の opacity 値として利用 */

  /* --- レイアウト --- */
  --header-height:     64px;       /* ヘッダーの高さ（サイドバー位置計算に使い回す） */
  --sidebar-width:     260px;
  --sidebar-padding:   20px;

  /* --- トランジション --- */
  --transition-speed:  0.3s;
}

/* ==== ベース ==== */

body {
  margin: 0;
}

/* ==== 背景画像レイヤー
   - position: fixed + inset: 0 で画面全体を覆う
   - z-index: -1 で他の要素の裏に配置する ===== */
.background {
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 の一括指定 */
  z-index: -1;

  background-image: url("images/image_1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==== ヘッダー ==== */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);
  padding: 0 40px;

  display: flex;
  align-items: center;

  background-color: var(--color-bg-header);
}

/* ナビゲーション */
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  color: var(--color-text-light);
  text-decoration: none;
  font-weight: bold;
}

/* アイコン画像 */
.nav img {
  display: block; /* インライン要素の謎の余白を消す */
  width: 24px;
  height: 24px;
}

.nav a:hover img {
  opacity: var(--color-link-hover);
}

/* ==== サイドバー
   - 初期状態は left: -サイドバー幅 で画面外に隠す
   - .active クラスが付くと left: 0 になりスライドインする ==== */
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: calc(-1 * var(--sidebar-width));
  width: var(--sidebar-width);          /* ← 100% を元に戻す */
  height: calc(100dvh - var(--header-height));
  padding: var(--sidebar-padding);

  /* display: flex と gap: 0 は削除 */

  background-color: var(--color-bg-sidebar);
  color: var(--color-text-light);
  transition: left var(--transition-speed) ease;
}

/* サイドバーを表示する（JSで付け外し） */
.sidebar.active {
  left: 0;
}

.sidebar__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  /* width と flex-shrink は不要なので削除 */
}

.sidebar a {
  color: var(--color-text-light);
  text-decoration: none;

  display: block;
  /* padding: 15px 0 10px 15px; */
  margin: 15px 0 10px 15px;
  font-size: 18px;
}

.sidebar a:hover {
  opacity: 0.7;
}

/* ==== コンテンツボックス
   - サイドバーの右隣に表示されるダークカラーのボックス
   - 初期状態は非表示（opacity: 0 + pointer-events: none）
   - .active クラスが付くとフェードインして表示される
   - top / left はヘッダーとサイドバーに被らない位置を指定 ==== */
.main {
  flex: 1;                        /* ← 残りの幅をすべて使う */
  padding: 24px 32px;
  color: var(--color-text-light);

  /* background-color は不要（サイドバーと同じ背景を共有するため） */
  visibility: hidden;
  pointer-events: none;
  transition: visibility var(--transition-speed); /* typo も修正 */

  position: fixed;
  top: calc(var(--header-height) + 30px);   /* 上の余白 */
  left: calc(var(--sidebar-width) + 30px);  /* 左の余白 */
  right: 30px;                              /* 右の余白 */
  bottom: 30px;                             /* 下の余白 */
  padding: 24px 32px;
  border-radius: 4px;                       /* 角丸（お好みで） */
  border: 2px solid var(--color-border-main);
  background-color: var(--color-bg-sidebar);
  color: var(--color-text-light);

  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  word-break: break-word;
}

.main.active {
  visibility: visible;
  pointer-events: auto;
}

.main__text {
  margin: 0;
}