:root {
	--bg-color: #0d1117; /* GitHubダークモード風 */
	--card-bg: #161b22;
	--text-color: #e6edf3;
	--accent-color: #58a6ff;
	--secondary-text: #8b949e;

	--header-height: 44px; /* ヘッダーの高さ */
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	/* margin: 0; */
		margin-top: var(--header-height);

	/* padding-top: var(--header-height); */
	/* padding: 0; */
	line-height: 1.6;
}

header {
	/* 固定のための設定 */
	/* margin-bottom: 3rem; */
	position: fixed;
	top: 0;

	/*領域のサイズと重なりの設定 */
	width: 100%;
	height: var(--header-height);
	z-index: 1000;

/* ★ コンテンツを中央に配置するための追加設定 */
  display: flex;
  justify-content: center; /* 左右の中央揃え */
  align-items: center;     /* 上下の中央揃え */

	/* 見た目の設定 */
	background-color: var(--bg-color);
	border-bottom: 1px solid var(--card-bg);
	/* padding: 2rem 2rem; */
	
	/* 少し透過させるとモダンになります */
	backdrop-filter: blur(8px); /* 背景をぼかす */
	background-color: rgba(13, 17, 23, 0.9); /* 少し透明な背景色 */
}

main {
	padding: 2rem;
}

h1 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
}

h2 {
	margin-top: 0;
	color: var(--accent-color);
	font-size: 1.25rem;
}

        .subtitle {
            color: var(--secondary-text);
            font-size: 1.1rem;
        }

.tile-horizontal {
	display: flex;
	overflow-x: auto;
}

/* 親コンテナ */
.scroll-container {
  display: flex;            /* 子要素を横並びにする */
  overflow-x: auto;         /* 横方向にスクロール可能にする */
  gap: 20px;                /* カード同士の隙間（marginの代わり） */
  padding: 20px;            /* コンテナの内側に余白を作る */
  scroll-snap-type: x mandatory; /* スクロール時にピタッと止まる設定（推奨） */
  -ms-overflow-style: none; /* IE, Edge用：スクロールバー非表示 */
  scrollbar-width: none;    /* Firefox用：スクロールバー非表示 */
}

/* スクロールバーを非表示にする（Chrome, Safari） */
.scroll-container::-webkit-scrollbar {
  display: none;
}

        /* 2. Bento Grid（弁当グリッド）レイアウト */
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .card {
            background-color: var(--card-bg);
            border: 1px solid #30363d;
            border-radius: 16px;
            padding: 1.5rem;
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        /* ホバー時のマイクロインタラクション */
        .card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-color);
        }

        /* 特定のカードを大きく見せる（強調） */
        .card-large {
            grid-column: span 2;
        }

    

        .tag {
            display: inline-block;
            background: #238636;
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 20px;
            margin-bottom: 0.5rem;
        }

        /* レスポンシブ対応（スマホでは1列に） */
        @media (max-width: 768px) {
            .card-large {
                grid-column: span 1;
            }
        }

				.nav-container {
      /* background-color: #333; 背景色（暗いグレー） */
      padding: 10px 0;        /* 上下の余白 */
    }

    /* リンクを囲むリストのスタイル */
    .nav-list {
      display: flex;           /* 横並びにするための魔法の1行 */
      justify-content: center; /* 中央寄せ（左寄せなら flex-start） */
      list-style: none;        /* 文頭の「・」を消す */
      margin: 0;
      padding: 0;
    }

    /* 各リスト項目のスタイル */
    .nav-item {
      margin: 0 20px;          /* リンク同士の間隔 */
    }

    /* リンク（文字）のスタイル */
    .nav-link {
      color: white;            /* 文字色 */
      text-decoration: none;   /* 下線を消す */
      font-weight: bold;
    }

    /* マウスを乗せた時の色変化 */
    .nav-link:hover {
      color: #ff9900;
    }

		.floating-btn {
      position: fixed;     /* 画面に対して固定 */
      bottom: 20px;        /* 下から20pxの位置 */
      left: 20px;          /* 左から20pxの位置 */
      width: 60px;         /* ボタンの幅 */
      height: 60px;        /* ボタンの高さ */
      background-color: #007AFF; /* iPhoneの青色風 */
      color: white;
      border-radius: 50%;  /* 正方形を円形にする */
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 浮いているような影 */
      cursor: pointer;
      border: none;
      font-size: 24px;
      z-index: 9999;       /* 他の要素より手前に表示 */
      transition: transform 0.2s; /* 動きを滑らかに */
    }

    /* マウスを乗せた時の反応 */
    .floating-btn:hover {
      transform: scale(1.1); /* 少し大きくする */
      background-color: #0056b3;
    }