/* ==========================================================================
   1. 変数定義 (メンテナンス性を高める)
   ========================================================================== */
:root {
  --font-main: 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', 'Product Sans', Arial, sans-serif;
  --bg-color: #fff;
  --bg-color-light: #eee;
  --text-color: #000;
  --text-active-color: #be2121;
  --accent-color: #007bff;
  --scroll-thumb: #ccc;
  --scroll-thumb-hover: #bbb;
  --scroll-track: #fff;
  --border-light: #f0f0f0;
  --text-muted: #555;
  --primary-color: #1a1a1a;
  --transition-speed: 0.4s;
  /* Googleアイコン */
  --icon-favorite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z'/%3E%3C/svg%3E");
  --icon-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Z'/%3E%3C/svg%3E");
  --icon-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-360h80v-120h140v100l140-140-140-140v100H360q-17 0-28.5 11.5T320-520v160ZM480-80q-15 0-29.5-6T424-104L104-424q-12-12-18-26.5T80-480q0-15 6-29.5t18-26.5l320-320q12-12 26.5-18t29.5-6q15 0 29.5 6t26.5 18l320 320q12 12 18 26.5t6 29.5q0 15-6 29.5T856-424L536-104q-12 12-26.5 18T480-80Z'/%3E%3C/svg%3E");
  --icon-author: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h200v80H480Zm85-315q35-35 35-85t-35-85q-35-35-85-35t-85 35q-35 35-35 85t35 85q35 35 85 35t85-35Z'/%3E%3C/svg%3E");
  --icon-map-ol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M307-113.5Q240-147 240-200q0-24 14.5-44.5T295-280l63 59q-9 4-19.5 9T322-200q13 16 60 28t98 12q51 0 98.5-12t60.5-28q-7-8-18-13t-21-9l62-60q28 16 43 36.5t15 45.5q0 53-67 86.5T480-80q-106 0-173-33.5ZM481-300q99-73 149-146.5T680-594q0-102-65-154t-135-52q-70 0-135 52t-65 154q0 67 49 139.5T481-300Zm-1 100Q339-304 269.5-402T200-594q0-71 25.5-124.5T291-808q40-36 90-54t99-18q49 0 99 18t90 54q40 36 65.5 89.5T760-594q0 94-69.5 192T480-200Zm0-320q33 0 56.5-23.5T560-600q0-33-23.5-56.5T480-680q-33 0-56.5 23.5T400-600q0 33 23.5 56.5T480-520Zm0-80Z'/%3E%3C/svg%3E");
  --icon-genre-ol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231f1f1f'%3E%3Cpath d='m260-520 220-360 220 360H260ZM700-80q-75 0-127.5-52.5T520-260q0-75 52.5-127.5T700-440q75 0 127.5 52.5T880-260q0 75-52.5 127.5T700-80Zm-580-20v-320h320v320H120Zm580-60q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29Zm-500-20h160v-160H200v160Zm202-420h156l-78-126-78 126Zm78 0ZM360-340Zm340 80Z'/%3E%3C/svg%3E");
  --icon-tag-ol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M446-80q-15 0-30-6t-27-18L103-390q-12-12-17.5-26.5T80-446q0-15 5.5-30t17.5-27l352-353q11-11 26-17.5t31-6.5h287q33 0 56.5 23.5T879-800v287q0 16-6 30.5T856-457L503-104q-12 12-27 18t-30 6Zm0-80 353-354v-286H513L160-446l286 286Zm253-480q25 0 42.5-17.5T759-700q0-25-17.5-42.5T699-760q-25 0-42.5 17.5T639-700q0 25 17.5 42.5T699-640ZM480-480Z'/%3E%3C/svg%3E");
  --icon-bookmark-ol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231f1f1f'%3E%3Cpath d='M480-240 63-467l84-46 333 182 333-182 84 46-417 227Zm0 160L63-307l84-46 333 182 333-182 84 46L480-80Zm0-320L40-640l440-240 40 22v178h327l73 40-440 240Zm0-91 200-109H440v-167L207-640l273 149Zm-40-109Z'/%3E%3C/svg%3E");
  --icon-stream-ol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M593-80q-24 0-46-9t-39-26L304-320l33-34q14-14 34-19t40 0l69 20v-287q0-17 11.5-28.5T520-680q17 0 28.5 11.5T560-640v393l-98-28 103 103q6 6 13 9t15 3h167q33 0 56.5-23.5T840-240v-160q0-17 11.5-28.5T880-440q17 0 28.5 11.5T920-400v160q0 66-47 113T760-80H593Zm7-280v-160q0-17 11.5-28.5T640-560q17 0 28.5 11.5T680-520v160h-80Zm120 0v-120q0-17 11.5-28.5T760-520q17 0 28.5 11.5T800-480v120h-80Zm40 200H565h195Zm-600-40q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h600q33 0 56.5 23.5T840-760v160h-80v-160H160v480h72l79 80H160Z'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%231f1f1f'%3E%3Cpath d='m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. リセット & ベーススタイル
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box; /* サイズ計算を直感的にする */
  /* すべてのプロパティの変化を 0.3秒 で滑らかに繋ぐ。
     色の変化や不透明度の変化がふわっと動くようになります。
  */
  transition: all 0.3s ease; 
}

body {
  padding: 0;
  margin: 0;
  font-family: var(--font-main);
  color: var(--text-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.contents {
  background-color: var(--bg-color);
}

/* 画像の基本設定 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* リンク */
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.8;
}

/* リスト・余白リセット */
main, header, footer, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, 
input, dl, dt, dd, textarea, figure {
  padding: 0;
  margin: 0;
}

ul, ol {
  list-style-type: none;
}

/* ==========================================================================
   3. スクロールバー (Webkit系)
   ========================================================================== */
/* 全体のデフォルト設定 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 10px;
  transition: 0.6s;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* ==========================================================================
   4. フォーム要素
   ========================================================================== */
::placeholder {
  color: #999;
  font-size: 14px;
  letter-spacing: 1px;
}

input, textarea, button, select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

/* ==========================================================================
   5. アイコン & ユーティリティ
   ========================================================================== */
/* Material Symbols */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-flex; /* inline-blockより整列しやすい */
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  color: currentColor; /* 親要素の色に合わせる */
}

/* 汎用SVGアイコンクラス */
.icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  color: var(--text-color);
  margin: 0;
  padding: 0;
  background-color: currentColor; /* これでcolorプロパティがアイコン色になる */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  cursor: pointer;
  transition: 0.6s;
}
.icon.active {
  background-color: var(--text-active-color);
  color: var(--text-active-color);
}
.icon:hover {
  background-color: var(--text-active-color);
  color: var(--text-active-color);
}

/* 個別クラス */
.icon-favorite {
  -webkit-mask-image: var(--icon-favorite);
  mask-image: var(--icon-favorite);
}
.icon-bookmark {
  -webkit-mask-image: var(--icon-bookmark);
  mask-image: var(--icon-bookmark);
}
.icon-bookmark-ol {
  -webkit-mask-image: var(--icon-bookmark-ol);
  mask-image: var(--icon-bookmark-ol);
}
.icon-map-ol {
  -webkit-mask-image: var(--icon-map-ol);
  mask-image: var(--icon-map-ol);
}
.icon-stream-ol {
  -webkit-mask-image: var(--icon-stream-ol);
  mask-image: var(--icon-stream-ol);
}
.icon-genre-ol {
  -webkit-mask-image: var(--icon-genre-ol);
  mask-image: var(--icon-genre-ol);
}
.icon-tag-ol {
  -webkit-mask-image: var(--icon-tag-ol);
  mask-image: var(--icon-tag-ol);
}
.icon-map {
  -webkit-mask-image: var(--icon-map);
  mask-image: var(--icon-map);
}
.icon-author {
  -webkit-mask-image: var(--icon-author);
  mask-image: var(--icon-author);
}
.icon-close {
  -webkit-mask-image: var(--icon-close);
  mask-image: var(--icon-close);
}

/* 非表示設定 */
.hide {
  display: none !important;
}

/* スクリーンリーダー専用 (アクセシビリティ) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   各要素のホバー挙動の例
   ========================================================================== */

/* リンク： transition を個別に書かなくても、上の設定でふわっと消えます */
a:hover {
  opacity: 0.7;
}

/* ボタンなどの汎用ホバークラス */
.btn:hover {
  background-color: var(--accent-color);
  color: #fff;
  transform: translateY(-2px); /* 少し浮き上がるような動きも滑らかになります */
}

/* アイコン： 色の変化を遅延させる */
.material-symbols-outlined:hover {
  color: var(--accent-color);
}


/**
 * ローディングの表示
 */
#loading,
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.8); /* 背景を少し透過させると自然です */
  z-index: 9999;
  /* デフォルトは隠す */
  display: none;
}
/* 読み込み中だけこのクラスをJSでつける */
#loader.active,
#loading.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 子要素：画像のサイズを指定 */
#loader img,
#loading img {
  width: 150px;
  height: 150px;
  object-fit: contain; /* 画像が歪まないように調整 */
}

/**
 * オリジナルダイアログ
 */
/* 通知を溜めるコンテナ */
.notification-container {
  position: fixed;
  top: 10px;
  left: 0;
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  z-index: 9999999;
  background-color: transparent;
}
/* ダイアログ本体のスタイル */
.notification {
  background-color: #333;
  color: #fff;
  margin: auto auto;
  padding: 15px 25px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 80%;
  max-width: 450px;
  box-sizing: border-box;
  text-align: center;
  /* アニメーションの設定 */
  transition: all 0.5s ease;
  transform: translateY(-150%); /* 最初は画面の上側に隠す */
  opacity: 0;
}
  /* 表示された時の状態 */
  .notification.show {
    transform: translateY(0);
    opacity: 1;
  }

/* モーダル全体の背景 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上からスライドさせるため */
  padding-top: 50px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 非表示時はクリックを通さない */
}
  /* 表示状態の背景 */
  .modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }
/* モーダル本体 */
.modal-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  text-align: center;
  /* アニメーション：上からスライド */
  transform: translateY(-50px);
  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.modal-overlay.show .modal-content {
  transform: translateY(0);
}