:root {
  /* 自前の日本語セリフ体スタック */
  --font-serif-jp: "Noto Serif JP",
                   "Yu Mincho",
                   "Hiragino Mincho ProN",
                   "Hiragino Mincho Pro",
                   "YuMincho",
                   "MS PMincho",
                   "Times New Roman",
                   serif;

  /* Bootstrap が参照するフォント変数を上書き */
  --bs-body-font-family: var(--font-serif-jp);
}

/* 全体の背景と文字色（Bootstrapの bg-dark よりさらに暗くしたい場合） */
body.bg-dark {
  background-color: #020617 !important; /* ほぼ黒ネイビー */
  color: #e5e7eb;
}

/* 全体の背景＆基本文字色 + 行間・字間だけこちらで指定 */
body {
  background-color: #020617;  /* かなり暗いネイビー */
  color: #e5e7eb;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* 見出し・ナビ・ボタンなどもセリフ体で統一（念押し） */
h1, h2, h3, h4, h5, h6,
.navbar-brand,
.nav-link,
.btn,
.card-title {
  font-family: var(--font-serif-jp);
}

/* Hero */
.hero-section {
  background: radial-gradient(circle at top left, #4f46e5 0, #1d4ed8 30%, #020617 80%);
}

/* Navbar */
.navbar {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.navbar .nav-link {
  color: #e5e7eb !important;
}

.navbar .nav-link:hover {
  color: #38bdf8 !important;
}

/* Aboutのプロフィール丸アイコン */
/* もともとの profile-circle を About用に拡張 */
#about .profile-circle {
  /* 行の高さの 80% を使う（=右側テキストカラムの高さの 80% くらい） */
  height: 80%;
  aspect-ratio: 1 / 1;      /* 正方形にする */
  max-height: 260px;        /* 大きくなりすぎないように上限 */
  width: auto;

  border-radius: 50%;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.6);
}

/* 行全体のカラム高さを揃える */
.about-row {
  align-items: stretch;  /* col-md-4 / col-md-8 を同じ高さに */
}

/* ロゴ画像は枠いっぱいに収める */
.about-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* スマホでは少し控えめサイズに */
@media (max-width: 768px) {
  #about .profile-circle {
    height: 200px;        /* 固定値のほうが安定するのでスマホではこちら */
    max-height: none;
  }
}


.profile-initial {
  font-size: 10rem;
  font-weight: 700;
  color: #e5e7eb;
}

/* Works カード */
.bg-card-dark {
  background-color: #020617;
}

.work-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.4);
}

/* Contact セクション背景 */
.contact-section {
  background: radial-gradient(circle at top right, #0f172a 0, #020617 60%);
}

/* muted テキストを暗背景用に少し明るく */
.text-muted {
  color: #9ca3af !important;
}

/* 画像の白フチ感が気になる場合はこれも追加（お好み） */
.card-img-top {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* スマホ用の余白調整 */
@media (max-width: 576px) {
  .hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* セクションは背景透明（bodyの色を見せる） */
section {
  background-color: transparent;
}

/* Works / Contact のカードをダークに統一 */
#works .card,
#contact .card {
  background-color: #020617;
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.4);
}

/* カード内テキストの色調整 */
#works .card-title,
#works .card-text,
#contact .card p {
  color: #e5e7eb;
}

/* badge も暗背景用に */
.work-badge {
  background-color: #0f766e;
  color: #ecfeff;
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
}

/* Contactカード専用の少しだけ明るい背景 */
.contact-card {
  background-color: #020617;
}

/* Worksカードのホバー（強めのシャドウ） */
.work-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.9);
  border-color: rgba(248, 250, 252, 0.4);
}

/* text-muted を暗背景用に少し明るめに再指定 */
.text-muted {
  color: #9ca3af !important;
}