/* Put your custom CSS rules here */

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

body {
  line-height: 1.8; /* 全体の行間を広げる */
}

:root {
    border-top: none !important;
}

p {
  margin-bottom: 1.5em; /* 段落の下に少し余白を作るとさらに読みやすい */
}

i.icon-left {
  margin-right: 0.5em; /* 右側（文字との間）だけ空ける */
  margin-left: 0;
}

i.icon-right {
  margin-left: 0.5em;  /* 左側（文字との間）だけ空ける */
  margin-right: 0;
}

.nav-list {
  list-style: none; /* 点を消す */
  padding: 0;       /* Neat.cssのデフォルト余白をリセット */
  margin: 0;
}

.nav-list li a {
  display: block;       /* 項目全体をクリック可能にする */
  text-decoration: none; /* 下線を消す */
  color: #333;          /* 文字色 */
  transition: 0.2s;     /* ホバー時の変化を滑らかに */
}

.nav-list li a:hover {
  background-color: #f9f9f9; /* ほんのり背景色を変える */
  color: #007aff;           /* 文字色をアクセントカラーに */
}

.film-list {
  margin-bottom: 1rem;
}

.film-list dt {
  font-weight: bold;
  font-size: 1.0rem;
  margin-top: 1.0rem;
  color: #1a1a1a;
}

.film-list dt .year {
  font-size: 0.9rem;
  font-weight: normal;
  color: #888;
  margin-left: 1rem;
}

.film-list dd {
  font-size: 1rem;
  margin-left: 1.5rem; /* これで全体が字下げされます */
  margin-top: 0.25rem;
  line-height: 1.5;    /* 先ほど設定した読みやすい行間 */
  color: #666;         /* 解説は少し柔らかい黒に */
}

h2.title {
  padding-bottom: 8px;    /* 線と文字の間の余白 */
  border-bottom: 1px solid #ddd; /* 1pxの細い線 */
  margin-top: 60px;
  margin-bottom: 20px;    /* 見出しの下の余白 */
}

.text-right {
  text-align: right;
  font-size: 0.9rem;
  }

.last-line-right {
  display: flex;
  flex-wrap: wrap; /* 文章が長い場合に途中で折り返せるようにする */
  align-items: baseline; /* テキストの底辺を揃える */
}

.last-line-right span {
  margin-left: auto; /* ★これが「残りの余白をすべて左側に入れる（＝右に寄せる）」魔法の指定です */
  font-size: 0.9em;  /* 少し小さくすると署名らしくなります */
  color: #888;
}

footer {
  margin-top: 60px;      /* コンテンツとの間にしっかり余白を作る */
  padding: 50px 0;       /* 上下の内側に余白を作る */
  border-top: 1px solid #ddd; /* 薄い仕切り線を入れる */
  text-align: center;    /* クレジットは中央揃えが一般的 */
  font-size: 0.9rem;    /* 本文より少し小さくして補足情報らしく */
  color: #888;           /* 少し薄い色にして主張を抑える */
}

.footer-note {
  text-align: left;       /* 左揃えに戻す */
  display: block;         /* 確実にブロックとして扱う */
}

blockquote {
  font-size: 0.9rem;
  color: #666; /* 真っ黒より少しグレーにする */
}

.film-list dd.amazon-link {
  margin-top: 4px;      /* 上の作品データと少し隙間を作る */
  padding-top: 4px;     /* 隙間に加えて、少しだけ空間を広げる */
  font-size: 0.9rem;    /* 補足情報なので少しだけ小さく */
}

.site-header {
  position: sticky;  /* ★スクロールしてもその場に留まる */
  top: 0;           /* ★画面の一番上に固定 */
  z-index: 100;     /* ★他のコンテンツ（画像など）の下に隠れないようにする */
  
  /* Specimenのような質感を出すための設定 */
  background-color: rgba(255, 255, 255, 1); /* 少し透けさせる */
  backdrop-filter: blur(0px);               /* 背景をぼかす（Macっぽい！） */
  border-bottom: 1px solid #ddd;             /* 下に薄い境界線 */
  padding: 10px 0;
}

html {
  scroll-behavior: smooth; /* スルスルと動かす */
  scroll-padding-top: 155px; /* ★固定ナビの高さ分、止まる位置をズラす */
}

/* ナビゲーションのリストを横並びにする */
.contents-index ul {
  display: flex;           /* 横並びにする魔法 */
  flex-wrap: wrap;         /* 画面幅が狭い時に自動で折り返す */
  justify-content: left; /* 中央揃えにする（左寄せなら flex-start） */
  list-style: none;        /* 点（・）を消す */
  margin: 0;
  padding: 0;
  gap: 0.5rem;             /* 項目同士の間隔（これだけで左右の隙間が作れます） */
}

.contents-index li {
  margin: 0;               /* ブラウザのデフォルト余白をリセット */
}

.contents-index a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  /* クリックしやすいように周りに余白を持たせる */
  padding: 5px 10px;
  display: inline-block;
}

.contents-index li a:hover {
  background-color: #f9f9f9; /* ほんのり背景色を変える */
  color: #007aff;           /* 文字色をアクセントカラーに */
}

/* タイトルエリア全体の共通設定 */
/* --- 1. 【基本設定】PC版（広い画面）向け --- */
.site-title {
  padding: 10px 0;
  margin-bottom: 10px; /* PC版：ゆったりした余白 */
  text-align: left;    /* PC版：中央揃え */
}

.site-title a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  outline: none;
  vertical-align: middle;
}

.site-title a:hover {
  opacity: 0.8;
}

/* ロゴ画像の設定（共通・最大サイズ制限） */
.site-title img {
  display: block;
  max-width: 100%;     /* 親要素（画面幅）からはみ出さない */
  height: auto;        /* 比率を維持 */
  width: 100%;         
  max-width: 500px;    /* PCでのロゴの最大横幅 */
  margin: 0 auto;      /* 中央揃えを維持 */
}

/* --- 2. 【上書き設定】スマホ版（画面幅767px以下）向け --- */
@media (max-width: 767px) {
  .site-title {
    text-align: left;    /* スマホ版：左揃えに変更 */
    margin-bottom: 15px; /* スマホ版：余白を詰める */
  }

  .site-title img {
    margin: 0;           /* 左揃えに合わせてマージンをリセット */
    /* 必要ならスマホ用のサイズ調整（例: max-width: 300px;）もここへ */
  }
}

/* --- スマホ専用設定（画面幅が狭い時） --- */
@media (max-width: 768px) {
  .contents-index ul {
    flex-wrap: nowrap;   /* ★絶対に折り返さない（1行に強制） */
    overflow-x: auto;    /* ★横にはみ出た分をスクロール可能にする */
    
    /* 指でなぞった時の動きを滑らかにする */
    -webkit-overflow-scrolling: touch;
    
    /* スクロールバーを非表示にする（スッキリ見せるため） */
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* 右端に「続き」があることを予感させるため、
       少しだけ右側に余白（padding）を作ると効果的です */
    padding-right: 40px; 
  }

  /* Chrome, Safari, Edgeでスクロールバーを消す */
  .contents-index ul::-webkit-scrollbar {
    display: none;
  }

  .contents-index li {
    flex: 0 0 auto; /* ★重要：中身の文字幅を維持し、縮ませない */
  }
}

.carousel-viewport {
  width: 100%;
  position: relative;
  margin-top: 20px;
}

.carousel-container {
  display: flex;
  overflow-x: auto;          /* 横スクロールを許可 */
  scroll-snap-type: x mandatory; /* スナップ機能をON */
  scrollbar-width: none;     /* スクロールバー非表示 */
  -webkit-overflow-scrolling: touch;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 100%;            /* 1枚ずつ全幅表示 */
  scroll-snap-align: start;  /* ピタッと止まるように */
  position: relative;        /* キャプションの基準 */
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ホバー時に表示されるテキスト */
.carousel-hover-caption {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); /* 暗くして文字を見やすく */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                /* 通常は隠す */
  transition: opacity 0.3s;
  pointer-events: none;      /* 画像保存などを邪魔しない */
}

.carousel-item:hover .carousel-hover-caption {
  opacity: 1;                /* ホバーで表示 */
}

/* ドットの設定 */
.carousel-dots {
  text-align: center;
  margin-top: 10px;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}
.dot.active { background: #333; }

/* PC版：カルーセルの画像にマウスを乗せたら指マークにする */
@media (min-width: 768px) {
  .carousel-item {
    cursor: pointer;
  }
}

@media (prefers-color-scheme: dark) {
  /* 全体の背景と文字色 */
  body {
    background-color: #1a1a1a; /* 真っ黒すぎない落ち着いた黒 */
    color: #eeeeee;           /* 眩しくない薄いグレーの文字 */
  }

  /* ヘッダーの設定 */
  .site-header {
    background-color: rgba(26, 26, 26, 0.95); /* 背景に合わせる */
    border-bottom: 1px solid #333;
  }

  /* リンクの色 */
  .nav-list li a,
  .contents-index a {
    color: #eeeeee;
  }

  /* 作品リストのタイトルと解説 */
  .film-list dt {
    color: #ffffff;
  }
  .film-list dd {
    color: #bbbbbb;
  }

  /* 見出しの境界線 */
  h2.title {
    border-bottom: 1px solid #444;
  }
  
  /* ★ここを追加：フッターの境界線も馴染ませる */
  footer {
    border-top: 1px solid #444; /* h2と同じ暗いグレーに設定 */
  }

  /* 引用部分 */
  blockquote {
    color: #aaa;
  }

  /* カルーセルのドット */
  .dot {
    background: #555;
  }
  .dot.active {
    background: #fff;
  }
  
  .site-title img {
  filter: invert(1) brightness(2); /* 画像の色を反転させて明るくする */
  }
  
}

/* ボタンが段落内の行間を狭くしないための調整 */
button, .button, input[type=submit] {
    margin-top: 1em;      /* 上に少しだけ隙間を作る */
    margin-bottom: 0em;   /* 下に少しだけ隙間を作る */
    vertical-align: middle; /* テキストとの縦方向のズレを補正 */
}

/* スマホ版メニューの右端グラデーション */
@media (max-width: 768px) {
  .contents-index {
    position: relative; /* グラデーションの基準点にする */
  }

  .contents-index::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px; /* グラデーションの幅 */
    height: 100%;
    /* 背景色（白）から透明へのグラデーション */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none; /* グラデーションの上からもクリックできるようにする */
    z-index: 2;
  }
}

/* ダークモード用のグラデーション色調整 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .contents-index::after {
    /* ダークモードの背景色（#1a1a1aなど）に合わせる */
    background: linear-gradient(to right, rgba(26, 26, 26, 0), rgba(26, 26, 26, 1));
  }
}