/* =========================================
   サイドバーを完全固定にするレイアウト修正版
   html上のclassに、ここで.の後で設定する名前を入れれば
   そこに書き込んだスタイルが適用される
   html上のidに、ここで#の後で設定する名前を入れても同じ効果があるが
   より大きな範囲に適用される？
========================================= */

body {
  margin: 0;
  padding: 0;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
/*  font-family: "UD Digi Kyokasho", sans-serif; */
/*  font-family: "Hiragino Sans", monospace; */
/*  font-family: "メイリオ", "Meiryo", sans-serif;  ← 日本語・欧文対応 */
/*  font-family: "メイリオ", "Meiryo", "Copperplate", monospace;  ← 日本語・欧文対応 */
  background-color: #111;
  color: #fff;
  height: 100vh;
  overflow: auto;
}

p.comment {
  font-size: 10px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  color: #fff;
}
/* 🔹アプリ全体コンテナ */
#app-container {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ==========================================
   サイドバー三分割レイアウト（上・中・下）
   ------------------------------------------
   sidebar-top    : ロゴ・認証ボタン・操作群
   sidebar-middle : 漫画リスト領域
   sidebar-bottom : 通知ティッカー
========================================== */

/* 🔹サイドバーを固定化 */
#sidebar {
  position: fixed;              /* ✅ 常に左固定 */
  top: 0;
  left: 0;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  width: 230px;
  height: 100%;                /* ✅ 縦いっぱい */
  background-color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;          /* サイドバー内のすべての子要素の左右位置 */
  padding: 2px 2px 2px 2px;        /* 上右下左 */
  gap: 3px;                    /* ← 各子要素の上下間のすき間 */
  border-right: 1px dashed #333;   /* 破線dashed、点線dotted */
  overflow: hidden;             /* サイドバー全体ではスクロールバーを出さない */
  z-index: 10;                  /* positon: fix;がないと機能しない */
}

/* 🟩 上段：ロゴ・認証・操作群 */
.sidebar-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 35%;
  min-height: 150px;   /* ✅ 中身を潰さない下限を設定 */
  gap: 2px;
  background-color: #111;
}


/* 🟦 中段：漫画作品リスト領域 */
.sidebar-middle {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* 🟥 下段：通知ティッカー欄（固定） */
.sidebar-bottom {
/*  flex: 0 0 auto; */
  width: 100%;
  height: 14%;
  margin-top: auto;  /* ✅ 一番下に固定配置 */
  display: flex;
  flex-direction: column;         /* ← 中でボタンを縦に並べたいなら column (?) */
  align-items: center;            /* 横方向の中央寄せ */
  justify-content: center;        /* ← 縦方向の中央寄せ */
  background-color: #111;
  gap: 2px;
}

/* 拡縮スライダー＋全画面ボタン群 */
.sidebar-tools {
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  gap: 2px;
  border-color: #fff;
  background: #111;
  padding: 2px;
  border-radius: 15px;
  width: auto;
  background-color: #111;
}

.sidebar-tools {
  display: flex;
  flex-direction: column; /* 上下2段 */
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 95%;
  background: #111;
  border-radius: 10px;
  padding: 6px;
}

/* ===========================
   共通スライダーUI設定
   =========================== */
.ui-slider {
  -webkit-appearance: none;   /* 既定のブラウザ見た目を無効化 */
  appearance: none;           /* Firefoxなども含めて統一 */
  width: 200px;               /* 幅（必要に応じて調整） */
  height: 3px;                /* トラックの太さ */
  background: #1a1a1a;        /* トラック部分（スクロールバーと同色） */
  border-radius: 4px;         /* 丸みで自然な印象に */
  outline: none;              /* フォーカス枠を消す */
  cursor: pointer;            /* カーソルを指マークに */
}

/* Chrome／Edge／Safari（WebKit系）用：つまみ部分 */
.ui-slider::-webkit-slider-thumb {
  -webkit-appearance: none;   /* 標準のつまみを無効化 */
  width: 14px;                /* つまみのサイズ */
  height: 14px;
  border-radius: 50%;         /* 丸形 */
  background: #666;           /* 通常色：中間グレー */
  border: 1px solid #222;     /* 枠でコントラストを出す */
  transition: background 0.2s ease;
}

.ui-slider::-webkit-slider-thumb:hover {
  background: #999;           /* ホバー時に明るく */
}

/* Firefox用 */
.ui-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #666;
  border: 1px solid #222;
  transition: background 0.2s ease;
}

.ui-slider::-moz-range-thumb:hover {
  background: #999;
}

/* Firefoxのトラック部分 */
.ui-slider::-moz-range-track {
  background: #1a1a1a;
  height: 6px;
  border-radius: 4px;
}


/* ラベル部分の文字デザイン */
label {
  font-size: 9px;
  color: #fff;
}

/* ボタン部分 */
.tools-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.tools-buttons .button_C {
  width: 90px;
  height: 36px;
}


/* =====================================
🔹メインビュー（サイドバーの右側に配置） 
========================================*/
#main {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  margin-left: 240px;           /* サイドバーの幅ぶん右にずらす */
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  /* 上詰め配置に変更（上部から順に並ぶ） */
  background-color: #111;
  overflow-y: auto;             /* ✅ 縦スクロールを許可 */
  overflow-x: auto;
  padding: 15px;                /* 内側余白、メインビュー自体に必要？ */
  box-sizing: border-box;
}


/*=============================
 🔹見開きビュー 
 =============================*/
#viewer-container {
  position: relative;    /* ✅ 子要素の絶対配置基準になる */
  display: flex;
  flex-direction: row-reverse;  /* 日本式：右→左 */
  justify-content: space-evenly;    /* center、flex-endから変更 */
  align-items: flex-start;
  width: 100%;
  max-width: 1600px;
  height: auto;
  background-color: #000;
  padding: 0;                   /* ✅ パディング削除 */
  margin: 0 auto;               /* ✅ 中央寄せ維持 */
  box-sizing: border-box;
  gap: 0;                       /* ✅ ノド部の隙間をゼロに */
  overflow: visible;            /* 画像がブラウザ外に出ても画像全体を映す */
  transform: scale(var(--page-scale)); /* ← 変数を参照して拡縮 */
  transform-origin: center top;     /* ← ノド部上端を中心で拡縮? */
/*  transition: transform 0.25s ease; */
}

/* 全画面モード時の専用レイアウト */
#viewer-container.fullscreen {
  justify-content: center;     /* 中央寄せ */
  align-items: center;
  max-height: none;
  overflow: auto;            /* スクロールあり */
  gap: 0;
}

#viewer-container.fullscreen .page {
  flex: 0 0 auto;             /* ← 50%の占有をやめて内容サイズに追従、これでフルスク時のノド部隙間がなくなった */
  max-width: none;
}

#viewer-container.fullscreen .page img {
  height: 100vh;               /* 画面の縦いっぱいに合わせる */
  width: auto;
  object-fit: contain;         /* 切れずに全体を表示 */
}


/* ===================================
   ページ表示領域関連 
   ===================================*/
.page {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #000;       /* ✅ 背景も統一 */
  margin: 0;                    /* ✅ 余白削除 */
  padding: 0;                   /* ✅ 余白削除 */
  border: none;                 /* ✅ ボーダー削除 */
  max-width: 50%;               /* ✅ 正確に半分ずつ */
  overflow: hidden;
}

.page img {
  width: auto;                  /* ✅ 枠いっぱいに拡大（縦基準） */
  height: auto;
  max-width: 100%;              /* ✅ 固定幅制限解除（gapゼロ対応） */
  max-height: none;
  object-fit: contain;            /* ✅ 画像全体を収める（トリミングなし） */
  border-radius: 0;             /* ✅ 丸み削除 */
  box-shadow: none;             /* ✅ 影を完全に削除 */
  opacity: 0;
  animation: fadeIn 0.3s ease-in forwards;  /* 通常フェードイン秒数 */
}
/* トップ／ガイド用スライド画像のフェードイン（viewer.js と同じ演出） */
.topslide-img {
  opacity: 0;
  animation: fadeIn 0.3s ease-in forwards;
}

/* 🔹ページ演出アニメーション 標準フェードイン*/
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ページ表示領域のサイズ、css変数の提示 */
:root {
  --page-scale: 0.9; /* ← 標準倍率 1.0（100%） */
}

/* 既存（漫画ビューア用） */
#viewer-container {
  /* 既にある transform/transform-origin はそのままでOK */
  transform: scale(var(--page-scale));
  /*transform-origin: center top;*/
}

/* 追加：トップスライド／ガイドスライドも同じスケールを共有する */
#topslide-wrapper {
  transform: scale(var(--page-scale));
  transform-origin: center top;
}



/* 🔹ページ番号など、どこで指定しているのか確認が必要*/
#page-indicator {
  font-size: 10px;
  margin-top: 1px;
  color: #222222;
}

/* ===============================
   ===============================
🔹ウォレットボタン＆メニュー 
==================================
==================================*/

.button_A {
  font-size: 11px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  background-color: #111;
  color: white;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 2px 2px;           /* 内側余白 横px 縦px*/
  cursor: pointer;
  height: 35px;
  width: 80px;
  line-height: 1.01;           /* 数字が小さいほど行間が詰まる */
  text-align: center;
  margin: 2px;                /* 外側間隔 */  
  transition: all 0.3s ease;  /* hoverに遷移する時の秒数？ */
}
.button_A:hover {
  font-weight: bold;
  color: #00aaff;
  border: 1px solid #00aaff;
  background-color: #111;
  transform: scale(1.05);
}

.button_A:active {
  transform: scale(0.95);

}
/* ボタンクラス予備 */
.button_B {
  font-size: 12px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  background-color: #111;
  color: white;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 5px 3px;          /* 内側余白 横px 縦px*/
  cursor: pointer;
 /* height: 40px;
  width: 120px; */
  font-weight: normal;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 3px;               /* 外側余白、別要素との間隔 */  
  transition: all 0.3s ease; /* hoverに遷移する時の秒数？ */
}
.button_B:hover {
  color: #00aaff;
  border: 1px solid #00aaff;
  background-color: #111;
}


/* ✅ サイドバーのウォレット・パスワードボタンを横並びにする */
.auth_buttons {
  display: flex;                  /* 横並び（フレックスボックス）にする */
  align-items: center;            /* このクラスが置かれている領域内での中央寄せ */
  justify-content: center;        /* 両端に配置（space-between）、中央（center） */
  gap: 2px;                       /* ボタン間のすき間 */
  margin: 1px auto;               /* 上下外側の余白（必要に応じて調整） */
  flex-wrap: wrap;                /* 折り返し可（横に入れなければ下に行く） */
  width: 100%;
}

/* サイドバー上段の4ボタンを 2×2 に並べる */
/*.auth_buttons .button_A {  */
  /* 1行に2個ずつ収まるように、幅を親の約半分にする */
/*
  flex: 0 0 48%;
  max-width: 48%;
}
*/


/* -----------------
   個別ボタン毎の設定 
   ----------------- */

#guide-btn:hover {
  color: #55cc22;
  border: 1px solid #55cc22;
  background-color: #111;
}

#sale-office-btn:hover {        /* 販売所ボタン */
  color: #33ff66;
  border: 1px solid #33ff66;
  background-color: #111;
}

#passwordAuthButton:hover{      /* パスワード認証ボタン */
  color: #ffee44;
  border: 1px solid #ffee44;
  background-color: #111;
}

#connect-wallet-btn:hover {    /* ウォレット認証ボタン */
  color: #8844ff;
  border: 1px solid #8844ff;
  background-color: #111;
}

#reset-scale-btn:hover {       /* サイズリセットボタン */
  color: #ff55ff;
  border: 1px solid #ff55ff;
  background-color: #111;
}

#fullscreen-btn:hover {        /* 全画面ボタン */
  color: #ff55ff;
  border: 1px solid #ff55ff;
  background-color: #111;
}


/* ==========================================
   トグルメニューボタン（ウォレットボタン風）
========================================== */
.menu-section {
  width: 100%;
}

.menu-toggle {
  font-size: 13px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  display: block; 
  width: 180px;
  background-color: #111;        /* ウォレットボタンと統一 */
  color: #fff;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 2px;
  justify-content: center;         /* テキストを物理的に中央へ */
  align-items: center;             /* 縦方向を中央寄せ */
  /*font-weight: bold;*/
  letter-spacing: 2px;             /* クラス内文字列の字間 */
  cursor: pointer;
  text-align: center;              /* ボタン内の文字位置 */
  transition: all 0.25s ease;
  margin: 0 auto;                  /* 中央寄せ? */
  margin-top: 4px;
}

.menu-toggle:hover {
  color: #00aaff;
  border: 1px solid #00aaff;
  transform: scale(1.03);
}

.menu-toggle:active {
  background-color: #000;       /* クリック時の沈み感 */
  transform: scale(0.97);         /* クリック時に縮小 */
}


/* ==============================
   サイドメニュー開閉アニメーション
============================== */

/* 子メニュー（アニメ付き開閉） */
.submenu {
  font-size: 12px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  list-style: none;
/*  margin: 0; */
  text-align: center;
  padding-left: 0;           /* ✅ 左インデント完全リセット */
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 13px;
  margin: 0 auto;            /* ✅ ul自体を中央寄せ */
  width: fit-content;        /* ✅ 中身の幅に合わせて中央配置 */
  max-height: 0;             /* ✅ 閉じた状態では高さ0 */
  overflow: hidden;
  opacity: 0;                /* ✅ フェードアウト */
  transform: translateY(-5px); /* ✅ 少し上にずらして消す */
  transition:
    max-height 0.5s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
}

.submenu.open {
  max-height: none;         /* ✅ 開いた時の最大高さ（項目数に合わせて余裕を持たせる） */
  opacity: 1;                /* ✅ フェードイン */
  transform: translateY(0);  /* ✅ ズララッと下に滑らかに出る */
}

/* 子メニュー内リンク */
.submenu li {
  margin: 6px 0;
}
.submenu a {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  color: #fff;
  display: inline-block;
  text-decoration: none;
  transition: color 0.4s ease; /* hoverとの遷移秒数？ */
}
.submenu a:hover {
  color: #0af;
}

/* ++++++++++++++++++++++++++++++++++++++++
  お知らせティッカー欄自体の設定
+++++++++++++++++++++++++++++++++++++++++++*/
.ticker-bar {
  font-size: 13px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  position: relative;
  overflow: hidden;
  height: 60px;
  width: 100%;
  max-width: 220px;
  background: #111;
  border-radius: 10px;
  border: 1px solid #fff;
  color: #888888;
  font-family: "UD Digi Kyokasho", sans-serif;
/*  font-family: "Consolas", "Courier New", monospace; */
/*  font-family: "Hiragino Sans", monospace; */
  display: flex;
  justify-content: center;   /* ✅ 中央寄せに */
  align-items: center;
}

.ticker-track {
  display: block;
  width: 100%;
  text-align: center;
  margin-right: 5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  /* 中に入る実テキスト側の挙動は .ticker-* で分けるのでここでは固定しない */
}

/* --------------------------------
   1) 通常演出、横から流れるバージョン  ("ticker-scroll")
--------------------------------- */
.ticker-scroll {
  display: inline-block;
  white-space: nowrap;
  color: #ffffff;
  animation: tickerScroll 25s linear infinite;
}

/* 横スクロールのキーフレーム */
@keyframes tickerScroll {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* --------------------------------
   2) 警告・エラー ("ticker-blink-yellow")
      固定表示、黄色、点滅
--------------------------------- */
.ticker-blink-yellow {
display: block;             /* ✅ 折り返し許可 */
  white-space: normal;        /* ✅ ← nowrapを解除！ */
  word-wrap: break-word;      /* ✅ 長文も強制改行 */
  color: #ff9922; /* 警告寄りの黄 */
  animation: tickerBlink 1s ease-in-out infinite;
  overflow-wrap: anywhere;
}

/* 点滅 */
@keyframes tickerBlink {
  0%, 69% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
/* 点滅2 */
@keyframes tickerBlink2 {
  0%, 35%, 50%, 85% { opacity: 1; }
  36%, 49%, 86%, 100% { opacity: 0; }
}

/* --------------------------------
   3) 通常情報
      固定表示、緑色、点滅なし
--------------------------------- */
.ticker-fixed-green {
display: block;             /* ✅ 折り返し許可 */
  white-space: normal;        /* ✅ ← nowrapを解除！ */
  word-wrap: break-word;      /* ✅ 長文も強制改行 */
  color: #33ff66;
  overflow-wrap: anywhere;
  /* アニメーションなし（静止） */
}

/* --------------------------------
   4) 成功通知
      固定表示、水色、点滅なし
--------------------------------- */
.ticker-fixed-blue {
display: block;             /* ✅ 折り返し許可 */
  white-space: normal;        /* ✅ ← nowrapを解除！ */
  word-wrap: break-word;      /* ✅ 長文も強制改行 */
  color: #22aaff;
  overflow-wrap: anywhere;
  /* アニメーションなし（静止） */
}

/* --------------------------------
   5) 通常注目通知
      固定表示、白色、点滅あり
--------------------------------- */
.ticker-blink-white {
display: block;             /* ✅ 折り返し許可 */
  white-space: normal;        /* ✅ ← nowrapを解除！ */
  word-wrap: break-word;      /* ✅ 長文も強制改行 */
  color: #ffffff;
  animation: tickerBlink 1.5s ease-in-out infinite;
  overflow-wrap: anywhere;
  /* アニメーションなし（静止） */
}


/* --------------------------------
   6) 問題通知 
      固定表示、橙色、点滅
--------------------------------- */
.ticker-blink-orange {
display: block;             /* ✅ 折り返し許可 */
  white-space: normal;        /* ✅ ← nowrapを解除！ */
  word-wrap: break-word;      /* ✅ 長文も強制改行 */
  color: #ff8833;
  animation: tickerBlink2 1.25s ease-in-out infinite;
  overflow-wrap: anywhere;
}

/* --------------------------------
   7) 通常注目通知
      固定表示、白色、点滅なし
--------------------------------- */
.ticker-fixed-white {
display: block;             /* ✅ 折り返し許可 */
  white-space: normal;        /* ✅ ← nowrapを解除！ */
  word-wrap: break-word;      /* ✅ 長文も強制改行 */
  color: #ffffff;
  overflow-wrap: anywhere;
  /* アニメーションなし（静止） */
}


/* ++++++++++++++++++++++++++++++++
  下からスライドインする通知演出
+++++++++++++++++++++++++++++++++ */
.notify-bar {
  position: fixed;
  bottom: -50px; /* 初期は画面外 */
  left: 0;
  width: 100%;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  text-align: center;
  padding: 10px 0;
  font-size: 0.9rem;
  font-weight: 500;
  transition: bottom 0.6s ease-out, opacity 0.6s ease-out;
  opacity: 0;
  z-index: 9999;
}

.notify-bar.active {
  bottom: 0;  /* 画面下にスライドイン */
  opacity: 1;
}


/* ==========================================
   特別演出：長めのフェードイン（2.25秒）
========================================== */
.page img.fade-long {
  animation: fadeInLong 2.25s ease-in forwards;
}

@keyframes fadeInLong {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================
   特別演出：衝撃シェイク（ランダム方向）
   ========================================= */

/* パターン1：今までと近い左右メインの揺れ */
.page img.shake-impact-1 {
  opacity: 1;
  animation: shakeImpact1 0.6s ease-in-out forwards;
}

@keyframes shakeImpact1 {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; transform: translate(-9px, 8px); }
  20%  { transform: translate(8px, -6px); }
  30%  { transform: translate(-7px, 5px); }
  40%  { transform: translate(6px, -7px); }
  50%  { transform: translate(-5px, 5px); }
  60%  { transform: translate(4px, -4px); }
  70%  { transform: translate(-3px, 5px); }
  80%  { transform: translate(3px, -3px); }
  90%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0, 0); }
}

/* パターン2：向きを反転させた揺れ */
.page img.shake-impact-2 {
  opacity: 1;
  animation: shakeImpact2 0.6s ease-in-out forwards;
}

@keyframes shakeImpact2 {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; transform: translate(10px, -4px); }
  20%  { transform: translate(-8px, 8px); }
  30%  { transform: translate(7px, -3px); }
  40%  { transform: translate(-5px, 9px); }
  50%  { transform: translate(6px, -7px); }
  60%  { transform: translate(-4px, 4px); }
  70%  { transform: translate(3px, -6px); }
  80%  { transform: translate(-2px, 3px); }
  90%  { transform: translate(1px, -2px); }
  100% { transform: translate(0, 0); }
}

/* パターン3：上下成分を少し強めた揺れ */
.page img.shake-impact-3 {
  opacity: 1;
  animation: shakeImpact3 0.6s ease-in-out forwards;
}

@keyframes shakeImpact3 {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; transform: translate(-6px, 10px); }
  20%  { transform: translate(-9px, 5px); }
  30%  { transform: translate(8px, -12px); }
  40%  { transform: translate(-9px, 10px); }
  50%  { transform: translate(8px, -7px); }
  60%  { transform: translate(-6px, 8px); }
  70%  { transform: translate(5px, -4px); }
  80%  { transform: translate(-3px, 5px); }
  90%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* （任意）古い .shake-impact をパターン1のエイリアスにしておく */
.page img.shake-impact {
  opacity: 1;
  animation: shakeImpact1 0.6s ease-in-out forwards;
}


/* ==========================================
   特別演出：シンプル白フラッシュ（0.5秒）
   ========================================= */
.page img.flash-simple {
  animation: simpleFlash 0.5s ease-out forwards;
}

@keyframes simpleFlash {
  0%   { opacity: 1; filter: brightness(1);   }
  25%  { opacity: 1; filter: brightness(5);   }
  50%  { opacity: 1; filter: brightness(8);   }
  100% { opacity: 1; filter: brightness(1);   }
}

/* ==========================================
   特別演出：右→左スワイプフェード
   ========================================= */
.page img.swipe-fade {
  /* 初期状態は右端から徐々に表示 */
  opacity: 1;
  animation: swipeFadeIn 0.8s ease-out forwards;
  -webkit-clip-path: inset(0 0 0 100%);
          clip-path: inset(0 0 0 100%);
}

/* inset(top right bottom left) */
@keyframes swipeFadeIn {
  0% {
    opacity: 0;
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);
  }
  100% {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

/* ==========================================
   白フラッシュ用オーバーレイレイヤー
========================================== */
#white-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: white;
  opacity: 0;
  z-index: 20;                  /* ✅ ページ画像より前面に */
  pointer-events: none;
  animation: whiteFlashOverlay 3.75s ease-in-out forwards;
}

@keyframes whiteFlashOverlay {
  0%   { opacity: 1; }          /* 真っ白画面 */
  5% { opacity: 1; }
  /*10% { opacity: 0; }*/
  10% { opacity: 1; background-color:#000}
  100% { opacity: 0; background-color:#ffffff}
}

/* ==========================================
   特別演出：白→暗転→フェードイン演出
========================================== */

.page img.flash-fade {
  animation: flashFadeIn_v2 2.25s ease-in-out forwards;  /*← アニメ全体の長さ調整可能 */
}

@keyframes flashFadeIn_v2 {
  0% {
    opacity: 1;
    filter: brightness(10);
    background-color: white;   /* 完全に白画面から開始 */
  }
  20% {
    opacity: 0.1;
    filter: brightness(0.0);
    background-color: black;   /* 暗転状態を一瞬作る */
   } 
  100% {
    opacity: 1;
    filter: brightness(1);
    background-color: transparent;
  } 
}

/*======================================
           販売所のスタイル 
======================================*/

.sale-container {
/*    margin-left: 240px; */
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  padding: 20px;
  color: #fff;
  }

.sale-section {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  margin: 5px 10px;   /* 上下の余白　左右の余白 */
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  background: #111;
  border: 1px solid #333;
  border-radius: 10px;
  }

.sale-section h1 {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  line-height: 1.03; 
/*margin-top: 0.1em;
  margin-bottom: 0.1em;*/
}

.sale-section h2 {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  line-height: 1.03; 
/*margin-top: 0.1em;
  margin-bottom: 0.1em;*/
}

.sale-section h3 {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  line-height: 1.1;
  margin-top: 0.9em;
  margin-bottom: 0.2em;
  margin-left: 15px;
}

.sale-toggle-A {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  font-size: 13px;
  line-height: 1.03;       /* 要素内行間か、要素全体に与えられる上下空間? */
  letter-spacing: 0.1em;   /* 要素内字間 */
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  margin-left: 25px;
}

/* デフォルトの三角マーカーを消す（WebKit系ブラウザ用） */
.sale-toggle-A::-webkit-details-marker {
  display: none;
}

.sale-bullets li {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  font-size: 12px;
  margin-bottom: 5px;   /* 下に少し空ける */ 
  margin-left: 30px;
  margin-right: 30px;
  letter-spacing: 0.11em;
}

.button_D {
  font-size: 14px;
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  background-color: #111;
  color: white;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 5px 5px;          /* 内側余白 横px 縦px*/
  cursor: pointer;
 /* height: 40px;
  width: 120px; */
  font-weight: normal;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 3px;               /* 外側余白、別要素との間隔 */  
  margin-left: 30px;
  transition: all 0.3s ease;       /* hoverに遷移する時の秒数？ */
}

.button_D:hover {
  color: #ffdd44;
  border: 1px solid #ffdd44;
  background-color: #111;
}

#CEPB_button:hover {
  color: #775544;
  border: 1px solid #775544;
  background-color: #111;
}

#CEPS_button:hover {
  color: #aa9999;
  border: 1px solid #aa9999;
  background-color: #111;
}

#CEPG_button:hover {
  color: #eeaa33;
  border: 1px solid #eeaa33;
  background-color: #111;
}

.return-to-viewer-link {
  font-family: "メイリオ", "Meiryo", "Copperplate", "monospace";
  font-size: 13px;
  color: #fff;
}

/*====================================
  スクロールバーデザイン設定
  WebKit系（Chrome・Edge・Safariなど）
====================================*/
/* 全体のスクロールバーの幅・高さ */
::-webkit-scrollbar {
  width: 12px;              /* 縦スクロールバーの太さ */
  height: 12px;             /* 横スクロールバーの太さ */
}

/* バーのトラック（背景部分） */
::-webkit-scrollbar-track {
  background: #1a1a1a;      /* トラックの色（例：暗め背景に馴染ませる） */
}

/* 実際に動くつまみ部分（スライダー） */
::-webkit-scrollbar-thumb {
  background: #666;          /* 通常状態のつまみの色 */
  border-radius: 6px;        /* 丸みを付けて柔らかい印象に */
}

/* マウスホバー時（視認性向上） */
::-webkit-scrollbar-thumb:hover {
  background: #999;
}


/* -----------------------
  Firefox用（全体設定） 
--------------------------*/
* {
  scrollbar-width: thin;                  /* "auto" "thin" "none" */
  scrollbar-color: #666 #1a1a1a;          /* thumb色 + track色 */
}