/* === ベース全体設定（背景・文字） === */
html {
  background-color: #ffffff;
}

body {
  font-family: "Yu Mincho", "游明朝", "YuMincho", serif;
  background-color: #f8f7f3;
  color: #333;
  margin: 0;
  padding: 0;
  padding-top: 70px;  /* ナビバー高さ分 */
  line-height: 3;
  letter-spacing: 0.075em;
}

/* === 共通見出し用 === */
h1, h2 {
  color: #1c2a33;
  margin-bottom: 1em;
  letter-spacing: 0.05em;
}

h3 {
  color: #1c2a33;
  margin-bottom: 0.9em;
  letter-spacing: 0.05em;
}

/* === 一般テキスト === */
p {
  font-size: 1em;
  line-height: 2;
  color: #333;
  margin-bottom: 1em;
}

/* === リンク === */
a {
  color: #1c2a33;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* === レイアウトを中央寄せにするためのラッパー（任意） === */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;            /* ← 上下のpaddingは不要に */
}

/* === 各作品詳細用エリア === */
.work-detail {
  padding-bottom: 60px;
}

/* 詳細タイトル */
.work-detail-title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: -1em;      /* ← ここを追加 */
  margin-bottom: 1.5em;
  text-align: left;
}

/* 詳細ページ内の画像 */
.work-detail-img {
  width: 100%;
  max-width: 800px;
  display: block;
  margin: 0 auto 30px;
  border-radius: 8px;
}

/* タイトル下の画像とポイント */
.work-detail-header {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 40px;
  flex-wrap: nowrap; 
}

.work-detail-thumbnail-wrapper {
  width: 50%;   /* 左側のブロック幅 */
  max-width: 480px;
}

.work-detail-thumbnail {
  width: calc(50% - 20px);  /* ← 本体の .work-item と同じ幅にする */
  aspect-ratio: 4 / 3;
  max-width: 480px;
  margin-top: 1.8em; /* ← 1.5文字分くらい下げる */
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* 👇 これを追加して上下揃えをきちっとする */
  vertical-align: top;
  display: block; /* ← 念のためブロック扱いに */
}
}

.work-features {
  flex: 1;
  margin-top: 0;      /* ← 横並びにするので余白は不要 */
  padding-top: 0;
}

.work-features h2 {
  font-size: 1.4rem;
  color: #1e2d3a;
  margin-bottom: 1em;
}

/* あらすじエリア */
.work-summary {
  margin-top: 40px;
  margin-bottom: 60px; /* ← 元はたぶん40pxくらい？少し広げる */
}

.work-summary h2 {
  font-size: 1.4rem;
  color: #1e2d3a;
  margin-bottom: 1em;
}

.small-note {
  font-size: 0.85em;
  color: #555;
  line-height: 1.6;
  margin-top: 1em;
}

/* ポイントエリア */
.work-points {
  flex: 1;
}

.work-points h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5em;
  color: #1e2d3a;
}

.point-item {
  margin-bottom: 3em; /* ← 好みに応じて 1.5em〜3em に調整可 */
}

.point-heading::before {
  content: "✤";
  color: #1c2a33;
  margin-right: 1em;
  font-size: 1em;
}

/* 一覧に戻るリンク */
.back-link {
  display: inline-block;
  margin-top: 40px;
  color: #2e3e4e;
  text-decoration: underline;
}

.back-link:hover {
  color: #1c2a33;
}

/* 詳細ページ用の簡易ナビバー */
.detail-nav {
  background-color: rgba(28, 42, 51, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari対策 */  
  position: fixed;             
  top: 0;                      /* ← 上端にぴったり */
  left: 0;
  right: 0;
  height: 70px;
  padding: 0 20px;       /* ✅ OK（上下にpaddingないか確認） */
  display: flex !important;              /* ← 念のため明示 */
  align-items: center;
  justify-content: flex-start !important; /* ← 中央寄せを打ち消す！ */
  padding-left: 50px; /* ← 少し詰めたい場合 */
  box-sizing: border-box;
  z-index: 1000;               /* ← 他要素の上に出す */
  font-family: "Yu Mincho", "游明朝", serif;
}

/* ナビ内のリンク */
.detail-nav nav {
  width: 100%;                    /* ← 横幅いっぱいに広げる */
  display: block;           /* ← flexになってないか確認 */
  text-align: left;         /* ← 念のため左寄せ */
}

/* ナビ内のリンク（1つだけ） */
.detail-nav nav a {
  position: relative;
  padding: 4px 15px;
  display: inline-block;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: white;
  text-decoration: none;
}

.detail-nav nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: white;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.detail-nav nav a:hover::after {
  transform: scaleX(1);
}

.lang-switch-inline {
  font-size: 1rem !important;
  color: white;
  margin-left: 16px;
  display: none !important;
  position: relative;
}

.lang-switch-inline a {
  font-size: 12px !important; /* ← nav a に勝つ */
  color: white;
  text-decoration: none;
  padding: 0 4px ;  
  transition: opacity 0.3s;
}

.lang-switch-inline a:hover {
  opacity: 0.6;
}

.lang-switch-inline a::after {
  display: none !important;
  content: none !important;
}

@media screen and (max-width: 768px) {
  .detail-nav {
    padding-left: 20px; /* ← ここを詰めて左寄せに */
  }

  .work-detail-header {
    flex-direction: column;   /* ← 縦並びに変更 */
    gap: 20px;
  }

  .work-detail-thumbnail {
    width: 100%;              /* ← 全幅表示 */
    max-width: 100%;          /* ← 最大幅制限も解除 */
  }

  .work-features {
    width: 100%;              /* ← 横に広がるように */
    margin-top: 0;
  }

/* 👇 ここから追加：文字サイズを一括で調整 */
  .work-detail-title {
    font-size: 1.4rem !important;  /* 通常2rem → 小さめに */
  }

  .work-features h2,
  .work-summary h2,
  .work-points h2 {
    font-size: 1.2rem !important;  /* 通常1.4rem */
  }

  .point-item,
  .work-summary p,
  .work-features p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .small-note {
    font-size: 0.8rem !important;
  }

  .back-link {
    font-size: 0.9rem;
  }

  .detail-nav nav a {
    font-size: 16px; /* ナビ内リンクも少し縮小 */
  }
}

footer {
  display: flex;                 /* ← 必須！ */
  justify-content: center;       /* ← 横中央揃え（任意） */
  align-items: center;     /* ← 垂直中央揃え！ */
  padding: 15px 20px;
  background-color: rgba(28, 42, 51, 1.0);
  color: white;
  font-size: 14px;
  margin-top: auto;
  height: 40px;                     /* ← 固定高さ */
}

footer p {
  margin: 0;
  color: white;
}