/* ==========================================================================
   1. 変数定義 (CSS Variables)
   ========================================================================== */
:root {
  /* フォント・デザインシステム */
  --font-main: 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', 'Product Sans', Arial, sans-serif;
  --transition-speed: 0.4s;
  
  /* カラーシステム (旧 common.css) */
  --bg-color: #efefef;
  --bg-color-white: #fff;
  --bg-color-light: #eee;
  --text-color: #000;
  --text-active-color: #be2121;
  --accent-color: #007bff;
  --border-light: #f0f0f0;
  --text-muted: #555;
  --primary-color: #1a1a1a;
  --bg-overlay: #ccc;
  
  /* スクロールバーカラー */
  --scroll-thumb: #ccc;
  --scroll-thumb-hover: #bbb;
  --scroll-track: #fff;

  /* カラーシステム (旧 xmpi.css) */
  --bg: #ffffff;
  --t1: #202124;
  --t2: #4a4d52;
  --t3: #9aa0a6;
  --tw: #ffffff;
  --bd: rgba(0, 0, 0, .12);
  --bd2: rgba(0, 0, 0, .18);
  --bg-navi: rgb(50,97,153);
  --blue: #1a73e8;

  /* 角丸ルール */
  --r8: 8px;
  --r12: 12px;
  --r22: 22px;
}

/* ==========================================================================
   2. リセット & ベーススタイル
   ========================================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 全体アニメーション (※アイコン類は下部で個別に transition を解除しています) */
  transition: all 0.3s ease; 
  /* モバイルでのタップ時の青いハイライトを無効化 */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  color: var(--text-color);
  line-height: 1.6;
  overflow: hidden; /* ボディ全体のスクロールを禁止 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  overscroll-behavior-x: none;
}

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

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

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block; /* 下部の謎の隙間を排除 */
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}
a:hover {
  opacity: 0.8;
}

/* ==========================================================================
   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);
}

/* スマホのみスクロールバーを非表示にする */
@media screen and (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   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-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: 400 !important;
  font-style: normal;
  font-size: 24px;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  
  /* 全称セレクタの transition: all によるアイコン消滅バグを完全に破壊する */
  transition: none !important;
  transition-property: none !important;
  
  /* 描画状態をトップ優先で強制可視化 */
  display: inline-flex !important; 
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: center;
  
  text-transform: none;
  text-rendering: optimizeLegibility;
  color: currentColor; /* 親要素の文字色を継承 */

  /* 合字処理（テキスト→アイコン変換）のバグ防止 */
  font-feature-settings: 'liga' 1 !important;
  -webkit-font-feature-settings: 'liga' 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* アイコンホバー時の色変化 */
.material-symbols-outlined:hover {
  color: var(--accent-color);
}

/* 汎用ユーティリティ */
.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;
}

/* ==========================================================================
   6. レイアウト構造 (水平・垂直スワイプ制御)
   ========================================================================== */
.horizontal-wrapper {
  overflow-x: hidden !important; /* JS制御を優先するためhiddenに固定 */
  scroll-snap-type: none !important;
}
.horizontal-wrapper::-webkit-scrollbar {
  display: none;
}
#main-h-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0; 
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#main-h-scroll.is-visible {
  opacity: 1;
}

.h-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100dvh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto; /* ページ内は縦スクロール可能 */
  background: var(--bg-color);
  color: #000;
}

#page-feed {
  background-color: var(--bg-color);
}

/* ==========================================================================
   7. フッターナビゲーション
   ========================================================================== */
.fixed-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding-top: env(safe-area-inset-top);
  background-color: var(--bg-color); 
  transition: background-color 0.3s ease;
  pointer-events: none; /* 背後の動画スワイプを邪魔しない */
}
.fixed-bottom-nav.is-white-mode {
  background-color: var(--bg-color);
}

.nav-menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
  height: 50px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto; /* メニューのタップは有効化 */
  padding: 0 10px;
}
.nav-menu[screen=block] {
  display: none;
}
.nav-menu::-webkit-scrollbar {
  display: none;
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
  /*padding: 0 0 0 25px;*/
  margin-right: 6px;
  padding: 5px 12px 0;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(0, 0, 0, 0.5);
}
  .nav-item i {
    /*position: absolute;
    top: 1px;
    right: 0;*/
    font-size: 21px;
    color: var(--t2);
  }
.nav-item.active {
  color: #000;
}
.nav-item .find {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item .find i:hover {
  color: #000;
}


.nav-overline {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background-color: #000;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.1s linear, width 0.1s linear, background-color 0.3s ease;
}
.is-dragging .nav-overline {
  transition: none;
}

.block-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 50px 0 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(0, 0, 0, 0.5);
  color: var(--t2);
}
  .block-nav-item i {
    position: absolute;
    top: 1px;
    left: 0;
    font-size: 21px;
    color: var(--t2);
  }

/* ==========================================================================
   8. フィード画面 & カードコンポーネント
   ========================================================================== */
.feed-container {
  width: 100%;
  height: calc(100dvh - 40px);
  padding: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.feed-container::-webkit-scrollbar {
  display: none;
}

.card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 14px 16px 6px;
}

.card-wrapper {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
}

/* 汎用インラインアイコンボタン */
.card-wrapper .ibtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--t2);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background .1s;
}
.card-wrapper .ibtn:hover { background: var(--bg-color-light); }
.card-wrapper .ibtn.bkd { color: var(--blue); }
.card-wrapper .ibtn i { width: 16px; height: 16px; color: var(--t1); }

/* バッジ・タグ */
.card-wrapper .tag { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 500; }
.card-wrapper .tag.music { background: #fce8e6; color: #712B13; }
.card-wrapper .tag.cinema { background: #e8f0fe; color: #0C447C; }
.card-wrapper .tag.live { background: #e6f4ea; color: #085041; }
.card-wrapper .tag.lawson { background: #e0f7fa; color: #0C447C; }

/* --- 8-1. 大型カード (cbg) --- */
/*
.card-wrapper .cbg {
  background: var(--bg);
  border-radius: var(--r12);
  border: .5px solid var(--bd2);
  margin: 0 12px 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 0 20px rgba(0, 0, 0, 0.08);
  position: relative;
}
*/
.card-wrapper .cbg {
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.card-wrapper .cbg:active {
  transform: scale(.985);
}
.card-wrapper .cbg-hero {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-wrapper .cbg-hero.card {
  position: relative;
}
.card-wrapper .genre,
.card-wrapper .area {
  position: absolute;
  background-color: var(--bg-color-white);
  border-radius: var(--r22);
  padding: 0px 5px;
  padding-right: 10px;
  font-size: 10pt;
}
.card-wrapper .genre {
  right: 5px;
  bottom: 5px;
  font-size: 7pt;
  padding: 3px 8px;
  padding-bottom: 1px;
  font-weight: bold;
  line-height: 7pt;
}
.card-wrapper .area {
  left: 10px;
  top: 10px;
  font-size: 9pt;
}

.card-wrapper .cbg-body {
  padding: 8px 10px 22px;
  background: var(--bg);
}
.card-wrapper .cbg-source {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2行で省略する場合 */
  overflow: hidden;
  line-height: 100%;
}
.card-wrapper .src-dot { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.card-wrapper .src-name { font-size: 12px; font-weight: bold; color: var(--t2); line-height: 1.25; margin-bottom: 2px; }
.card-wrapper .src-time { font-size: 12px; font-weight: bold; color: var(--t3); margin-left: auto; }
.card-wrapper .cbg-title { font-size: 16px; font-weight: bold; color: var(--t1); line-height: 1.25; margin-top: 2px; margin-bottom: 5px; }
.card-wrapper .cbg-navi { font-size: 10px; font-weight: bold; color: var(--t1); line-height: 1.25; margin-top: 10px; margin-bottom: 3px; }
.card-wrapper .cbg-navi span{font-size:12px;padding-left:17px;position:relative;}
.card-wrapper .cbg-navi span i{font-size:15px;position:absolute;left:0;top:0;}
.card-wrapper .cbg-footer { display: flex; align-items: center; justify-content: space-between; }
.card-wrapper .cbg-actions { display: flex; gap: 2px; }

/* --- 8-2. 小型カード (csm) --- */
.card-wrapper .csm {
  background: var(--bg);
  border-radius: var(--r12);
  border: .5px solid var(--bd2);
  margin: 0 12px 10px;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  transition: transform .1s;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.02), 0 0 2px rgba(0, 0, 0, 0.08);
  position: relative;
}
.card-wrapper .csm:active {
  transform: scale(.985);
}
.card-wrapper .csm-thumb { width: 90px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.card-wrapper .csm-thumb.c-youtube { width: 30%; }
.card-wrapper .csm-thumb-find { width: 27%; }
.card-wrapper .csm-body { font-weight: bold; padding: 12px 12px 12px 0; flex: 1; min-width: 0; background: var(--bg); position: relative; }
.card-wrapper .csm-body .cbg-source { padding: 0 10px; }
.card-wrapper .csm-actions { position: absolute; right: 0; top: -5px; display: flex; gap: 2px; }
.card-wrapper .csm-title { font-size: 16px; font-weight: bold; color: var(--t1); line-height: 1.4; margin-bottom: 5px; padding-left: 10px; }
.card-wrapper .csm-title-find { font-size: 16px; font-weight: bold; color: var(--t1); line-height: 1.2; margin-bottom: 5px; padding-left: 10px; }
.card-wrapper .csm-subtitle-find { font-size: 12px; font-weight: bold; color: var(--t2); line-height: 1.4; margin-bottom: 5px; padding-left: 10px; }
.card-wrapper .csm-meta { font-size: 12px; color: var(--t3); padding-left: 10px; position: relative; }
.card-wrapper .csm-source { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 12px; color: var(--t3); }
.card-wrapper .csm-source-find { display: flex; align-items: center; gap: 7px; margin-bottom: 0; font-size: 12px; color: var(--t3); }
.card-wrapper .csm-body .csm-source { padding: 0 10px; }
.card-wrapper .csm-body .csm-source-find { padding: 0 10px; }
.card-wrapper .csm-not {
  padding: 20px 25px;
  box-sizing: border-box;
}

/* --- 差し替え後のコード --- */
.card-wrapper .csm .corner-icon,
.card-wrapper .cbg .corner-icon{
  position: absolute !important;
  right: 12px !important;
  bottom: 4px !important;
  width: 19px;
  height: 19px;
  background-color: var(--bg-color-white);
}
  .card-wrapper .csm .corner-icon i,
  .card-wrapper .cbg .corner-icon i{
    font-size: 19px;
    color: #ccc;
  }
.card-wrapper .csm .corner-triangle,
.card-wrapper .cbg .corner-triangle {
  position: absolute !important;
  right: -13px !important;
  bottom: -13px !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  
  /* 1. 色とグラデーションは linear-gradient のみで制御 */
  background: linear-gradient(
    315deg, 
    rgba(136, 136, 136, 1.0) 0%,   /* 右下（角）：濃い灰色 */
    rgba(136, 136, 136, 0.8) 40%,  /* 中間 */
    rgba(136, 136, 136, 0.1) 100%   /* 内側（円弧付近）：薄い灰色 */
  ) !important;

  /* 2. 形のくり抜き（型抜き）のみを mask-image で行う */
  /* 左上(0 0)を中心に半径を少し小さめ(20px)にしてくり抜くことで右下に領域を残す */
  -webkit-mask-image: radial-gradient(
    circle at 0 0, 
    transparent 0, 
    transparent 20px, 
    #000 20.5px
  ) !important;
  mask-image: radial-gradient(
    circle at 0 0, 
    transparent 0, 
    transparent 20px, 
    #000 20.5px
  ) !important;
  
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   9. インタラクティブUI (ローディング・通知ダイアログ・モーダル)
   ========================================================================== */
/* --- 9-1. 全画面ローディング --- */
#loading, #loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: none;
}
#loader.active, #loading.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
#loader img, #loading img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

/* --- 9-2. トースト通知 (Notification) --- */
.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: 0 auto 10px;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 80%;
  max-width: 450px;
  text-align: center;
  transition: all 0.5s ease;
  transform: translateY(-150%);
  opacity: 0;
}
.notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* --- 9-3. ポップアップモーダル --- */
.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;*/
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  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);
}

/* 汎用ホバーユーティリティ */
.btn:hover {
  background-color: var(--accent-color);
  color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   10. さがす画面 & カード・グリッドコンポーネント
   ========================================================================== */
/* --- 10-1. 検索ワード入力ブロック --- */
.find-container{margin-bottom:60px}
.srch-bar-wrap{padding:10px 16px 0;background:var(--bg3);flex-shrink:0}
#screen-3 .srch-bar-wrap{padding-bottom: 20px;display:none}
.srch-bar{display:flex;align-items:center;gap:8px;background:var(--bg-color-white);border-radius:24px;padding:0 14px;height:42px;border:.5px solid var(--bd2)}
.srch-bar i{font-size:18px;color:var(--t3)}
.srch-input{flex:1;border:none;background:transparent;font-size:15px;color:var(--t1);outline:none;font-family:inherit}
.srch-input::placeholder{color:var(--t3)}
.srch-clear{color:var(--t3);cursor:pointer;display:none;border:none;background:transparent}
.srch-clear i{margin-top:3px}
.srchscroll{flex:1;overflow-y:auto}
.srchscroll::-webkit-scrollbar{display:none}
.srch-sec{font-size:14px;margin-top:3px;font-weight:700;color:var(--t1);letter-spacing:.8px;text-transform:uppercase;padding:14px 10px 6px}
.srch-sec i{font-size:14px;}
#srch-results{display:none}
/*#srch-default{display:none}*/
/* --- 10-2. トレンド・エリア情報ブロック --- */
.trend{width:100%;padding:0 10px}
.trend-row{width:calc(100vw-30px);display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;border-bottom:.5px solid var(--bd);transition:background .1s}
.trend-row:hover{background:var(--bg2)}
.trend-row i{width:19px;height:19px;font-size:19px;color:var(--t3)}
.trend-icon{width:38px;height:38px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.trend-text{flex:1;min-width:0}
.trend-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-sub{font-size:12px;color:var(--t2);margin-top:2px}
/* --- 10-3. シーン情報ブロック --- */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:4px 8px 8px;background:var(--bg3);margin-bottom:0px}
div.trend{
  margin-top: 10px;
}
.cat-list{
  box-sizing: border-box;
  padding: 10px 20px;
  margin-bottom: 10px;
}
.cat-list li{
  display: grid;
  grid-template-columns: 45px 1fr; /* 1列目:アイコン用の固定幅, 2列目:テキスト用に残りの幅を割り当て */
  align-items: center;            /* 上下中央揃え */
  gap: 10px;                      /* アイコンとテキストの間隔 */
  padding: 4px 0;                 /* 行ごとの上下の余白 */
  padding-top: 8px;
  font-weight: bold;
  font-size: 14px;
  background-color: #ddd;
  margin-bottom: 3px;
  border-radius: 40px;
}
.csm-emoji{
  display: flex;         /* Flexboxを有効化 */
  justify-content: center; /* 左右（水平）中央揃え */
  align-items: center;     /* 上下（垂直）中央揃え */
  font-size: 16px;
  /* 必要に応じてコンテナのサイズを指定 */
  width: 50px;
  height: 28px;
  padding-left: 10px;
}

.cat-card{border-radius:var(--r8);background:var(--bg3);padding:6px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;transition:background .1s}
.cat-card:hover{background:var(--bg2)}
.cat-card span{font-size:11px;font-weight:500;color:var(--t1)}
.cat-card span.emoji{font-size:22px;}
.cat-card img{width:70%;height:auto;}

/* ==========================================================================
   11. 保存済み画面 & カードコンポーネント
   ========================================================================== */
/* --- 11-1. 保存済みデータブロック --- */
.savedscroll{flex:1;overflow-y:auto}
.savedscroll::-webkit-scrollbar{display:none}
.saved-count{font-size:12px;font-weight:bold;color:var(--t3);padding:12px 16px 4px}
.saved-card{position:relative;background:var(--bg3);padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;}
.saved-card .saved-body { width: 100%; box-sizing: border-box; padding: 12px; padding-bottom:20px; min-width: 0; background: var(--bg); position: relative; }
.saved-card .saved-title { font-size: 16px; font-weight: bold; color: var(--t1); line-height: 1.25; margin-top: 2px; margin-bottom: 7px; }
.saved-card .saved-navi { font-size:10px; font-weight: bold; color:var(--t2);  margin-top: 2px; margin-bottom: 2px; }
.saved-card img{width:70%;height:auto;}
.saved-card .saved-source {
  display: -webkit-box;
  font-weight: bold;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  overflow: hidden;
  line-height: 16px;
  color: var(--t2);
}
#saved-list {
  margin-bottom: 60px;
}

.saved-del{
  position: absolute;
  right: 10px;
  top: 20px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--t3);
  cursor: pointer;
  border: none;
  background: var(--bg-color-white);
  transition:all .1s;
  z-index:10;
}
.saved-del:hover{background:#fce8e6;color:#712B13}
.saved-del i{width:19px;height:19px;font-size:19px;color:var(--t3)}
/* --- 11-2. 保存済みデータが無い場合 --- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 62px;gap:14px;text-align:center}
.empty-state i{width:60px;height:60px;font-size:60px;color:var(--t3)}
.empty-state h3{font-size:16px;font-weight:500;color:var(--t1)}
.empty-state p{font-size:13px;color:var(--t2);line-height:1.6;text-align:left}

/* ==========================================================================
   12. コンテンツデータ(マスター)ページ
   ========================================================================== */
/* --- 12-1. 施設名、紹介文データブロック --- */
.block-container{
  margin-bottom: 0;
  padding-bottom: 0;
}
#screen-3 .block-container{margin-bottom:60px}

.content-hero-img{
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 76px;
  background-position: center;
  background-size: cover;
}
.content-meta{padding:16px 16px 0}
.content-tag-i{display:inline-block;margin-bottom:8px;font-size:11px;padding:0 10px;background-color:#333;color:#fff;border-radius:var(--r12);}
.content-headline{font-size:14px;font-weight:500;color:var(--t1);line-height:1.4;margin-bottom:7px}
.content-title{font-size:20px;font-weight:bold;color:var(--t1);line-height:1.4;margin-bottom:10px}
.content-area{font-size:14px;font-weight:500;color:var(--t1);line-height:1.4;margin-top:1px;margin-bottom:0}
.content-area span{font-size:14px;padding-left:22px;position:relative;}
.content-area span i{font-size:17px;position:absolute;left:3px;top:0px;}
.content-byline{font-size:12px;display:flex;align-items:center;gap:8px;margin-bottom:14px}
.content-byline.top{font-size:12px;margin-top:3px;margin-bottom:12px}
.content-byline span{font-size:12px;padding-left:20px;position:relative;}
.content-byline span i{font-size:14px;position:absolute;left:3px;top:1px;}
.content-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.content-src{font-size:12px;font-weight:bold;color:var(--t2)}
.content-src a{color:var(--blue);text-decoration:none}
.content-src-time{font-size:12px;font-weight:bold;color:var(--t3)}
.content-hr{height:.5px;background:var(--bd);margin:0 16px 14px}

.sumbox{margin:0 16px 16px;background:var(--bg-color-white);border-radius:var(--r12);padding:14px 16px}
.sumhd{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.sumhd i{width:16px;height:16px;font-size:13px;color:var(--t2)}
.sumhd span{font-size:12px;font-weight:500;color:#0C447C}
.sumbody{font-size:16px;color:var(--t1);line-height:1.75;margin-top:10px}
.dot-pulse{display:flex;gap:4px;align-items:center}
.dot-pulse span{width:6px;height:6px;border-radius:50%;background:var(--bg-color);animation:pulse 1.2s ease-in-out infinite}
.dot-pulse span:nth-child(2){animation-delay:.2s}
.dot-pulse span:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,80%,100%{opacity:.3}40%{opacity:1}}
 
.contentbody{
  padding: 10px 24px;
  font-size: 15px;
  font-weight: bold;
  color: var(--t1);
  line-height: 1.75
}
.contentbody p{margin-bottom:14px}
.content-actions{display:flex;gap:4px;padding:12px 0 20px;border-top:.5px solid var(--bd);margin-top:10px}
.content-actions.top{border-top:0;margin-top:0;margin-bottom:5px;padding:0 10px;gap:0;}
.contentbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 6px;border-radius:30px;font-size:15px;font-weight:bold;color:var(--t2);background:var(--bg-color-white);border:.5px solid var(--bd);cursor:pointer;transition:background .1s;font-family:inherit;text-decoration:none;background-color:var(--bg-navi);color:var(--tw)}
/*.contentbtn:hover{background:var(--tw)}*/
#btn-source{background-color: blueviolet;}
#btn-save{background-color: rgb(31, 131, 27);}
.contentbtn i{
  width:21px;height:21px;color:var(--bg-color-white);
  font-size: 21px;
}
.contentbtn.saved{color:var(--bg-color-white)}
.contentbtn.saved i{color:var(--bg-color-white)}
/* --- 12-2. 詳細項目、マップデータブロック --- */
#content-modal {
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 60px;
}
  #content-modal #modalImg {
    position: relative;
    height: 280px;
    margin-inline: auto;
    background-position: center 0%;
    background-size: cover;
    background-repeat: no-repeat; /* 意図しない繰り返しを防止 */
    background-color: rgb(238, 238, 238);
    background-image: var(--bg-url);
  }
  #content-modal .modal-body {
    padding: 10px 5px;
    box-sizing: border-box;
  }
  #content-modal .map-wrapper {
    width: 100%;
    height: 350px;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #content-modal iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  #content-modal .modalTag {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 10px;
  }
  #content-modal .modalDesc {
    line-height: 1.6;
    color: #666;
    font-size: 0.95rem;
  }
  /* Navigation Button */
  #content-modal .nav-link {
    display: flex;         /* blockから変更：アイコンと文字を並べるため */
    align-items: center;   /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
    gap: 8px;              /* アイコンと文字の間隔 */
    width: 100%;
    padding: 15px 0;
    margin-top: 10px;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: background 0.3s ease;
  }
  /* アイコン（span）のサイズ調整 */
  #content-modal .nav-link .icon-map {
    display: flex;
    align-items: center;
    width: 1.4em;  /* 文字より少し大きくすると視認性が上がります */
    height: 1.4em;
    flex-shrink: 0;
    color: #fff;
  }
  #content-modal .nav-link:hover {
    background: #333;
  }

  /* 基本情報リスト */
  #content-modal .info-list {
    max-width: 600px;
    margin: 0 auto;
    border-top: 1px solid #eee;
  }

  /* 行のスタイル */
  #content-modal .list-row {
    display: flex;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    align-items: baseline; /* テキストの高さがずれないように調整 */
  }

  /* ラベル部分（左側） */
  #content-modal .list-row dt {
    width: 140px;       /* ラベルの固定幅（好みに合わせて調整） */
    flex-shrink: 0;     /* 幅を縮ませない */
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
    text-align: left;   /* 左寄せ */
  }

  /* データ部分（右側） */
  #content-modal .list-row dd {
    margin: 0;          /* デフォルトのインデントをリセット */
    flex-grow: 1;
    color: #666;
    text-align: left;   /* 左寄せ */
    line-height: 1.5;
  }
    #detailModal .list-row dd img {
      width: 36px;
      padding: 0 2px;
    }
    #content-modal .list-row dd span.l {
      position: relative;
      font-weight: bold;
      padding-left: 22px;
    }
      #content-modal .list-row dd span i {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 19px;
      }

  /* モバイル対応：画面が狭いときは縦並びにする場合 */
  @media (max-width: 480px) {
    #content-modal .list-row {
      flex-direction: column;
      gap: 8px;
    }
    #content-modal .list-row dt {
      width: 100%;
    }
    #content-modal .list-row dd {
      box-sizing: border-box;
      padding-left: 10px;
    }
  }

/* ==========================================================================
   13. 関連動画データページ (修正版)
   ========================================================================== */
/* 動的に構築される #video-container */
.block-container[screen=movie] {
  width: 100%;
  height: calc(100dvh - 60px);
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* 動画コンテナ（スクロール領域） */
#video-container,
.video-container {
  width: 100%;
  height: calc(100dvh - 60px); 
  margin: 0;
  padding: 0;
  
  overflow-y: scroll !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /* デフォルト背景色 */
  background-color: var(--bg-color-light);
  transition: background-color 0.3s ease;
}

/* ★ JSから動的に付与される data-active-type に応じた背景色制御 */
#video-container[data-active-type="tiktok"] {
  background-color: var(--bg-color-white) !important;
}

#video-container[data-active-type="youtube"] {
  background-color: var(--bg-color-light) !important;
}

/* 1画面1動画のスライド（100%画面を満たした上で完全中央寄せ） */
.video-slide {
  width: 100vw;
  height: calc(100dvh - 60px) !important;
  
  /* スナップ配置の基準 */
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  
  /* 【中央寄せの核心】上下左右の中央に動画を配置 */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  
  box-sizing: border-box;
  padding: 0; /* 周囲の最小安全余白 */
  position: relative;
  background-color: transparent !important; /* 親の背景色を透けさせる */
}

/* ==========================================
   2. タイプ別：コンテナ背景色の切り替え (JS連動)
   ========================================== */
#video-container[data-active-type="tiktok"] {
  background-color: var(--bg-color-white) !important;
}

#video-container[data-active-type="youtube"] {
  background-color: var(--bg-color-light) !important;
}

/* ==========================================
   3. タイプ別：ラッパー個別のスタイル
   ========================================== */
.video-slide[data-type="tiktok"] .player-wrapper {
  background-color: var(--bg-color-white) !important;
  height: 100% !important;
  max-height: 100% !important;
}

.video-slide[data-type="youtube"] .player-wrapper {
  background-color: var(--bg-color-light) !important;
}


/* スクロール位置維持用スペーサー */
.spacer {
  width: 100%;
  flex-shrink: 0;
}

/* 動画を囲む枠（アスペクト比を維持） */
.player-wrapper {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  
  background-color: transparent !important;
}

/* 1. プレイヤーコンテナ自体を親いっぱいに設定 */
[id^="player-container-"] {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* TikTokの場合：ラッパーの高さ・幅を完全に100%まで拡張 */
.video-slide[data-type="tiktok"] .player-wrapper,
.video-slide[data-type="tiktok"] [id^="player-container-"],
.video-slide[data-type="tiktok"] iframe {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* 内部の iframe（YouTube / TikTok）を親要素にピッタリ合わせる */
[id^="player-container-"] iframe,
[id^="player-container-"] object,
[id^="player-container-"] embed {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 8px; /* 好みで角丸 */
  background-color: transparent;
}

/* YouTubeの場合：アスペクト比を保つ */
.video-slide[data-type="youtube"] .player-wrapper {
  aspect-ratio: 9 / 16;
}

/* YouTubeプレイヤ一専用のレイアウト調整 */
.player-wrapper[player=youtube] {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* 左右中央寄せ */
  align-items: center;     /* 上下中央寄せ */
  padding: 0;              /* 余計なパディングをリセット */
  box-sizing: border-box;
}

/* YouTubeのiframeに対する強制レイアウト指定 */
.player-wrapper[player=youtube] iframe,
.player-wrapper[player=youtube] object,
.player-wrapper[player=youtube] embed {
  position: relative;
  /* 可視エリア(100dvh - 80px) から 上下10pxずつの余白(60px) を引いた高さ */
  height: calc(100dvh - 80px) !important;
  /* 9:16を維持して横幅を自動計算 */
  aspect-ratio: 9 / 16;
  width: auto !important;
  max-width: 100%;
  margin: auto !important;
  padding: 0 !important;
  border: none;
  pointer-events: auto !important;
}

/* TikTok公式埋め込みの高さ調整 */
.player-wrapper .tiktok-embed {
  width: 100%;
}

/* TikTokの埋め込みタグ（およびJavaScriptで自動生成されるiframe）への指定 */
.tiktok-container iframe {
  /* TikTok公式スクリプトが挿入するデフォルトのマージンや固定幅を無効化 */
  margin: 0 !important;
  padding: 0 !important;
  /* 縦幅を親要素に100%合わせる */
  width: 100% !important;
  /* ブロック要素化して下部の隙間を排除 */
  display: block !important;
}

/* ==========================================================================
   14. その他ページ
   ========================================================================== */
/* 静的に構築される #info-container */
.info-container {
  height: 300px;
}
.info-container .list {
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 0;
  padding: 11px 10px 10px;
  height: calc(100dvh - 60px);
  overflow-y: auto;
}
.info-container .list div.label {
  padding: 15px 0 4px 5px;
  margin: 0;
  font-size: 10pt;
  font-weight: bold;
}
.info-container .list .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
  height: 60px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto; /* メニューのタップは有効化 */
  padding: 0 10px;
  margin-bottom: 5px;
  background: var(--bg-color-white);
  border-radius: var(--r12);
}
.info-container .list .step,
.info-container .list .accordion {
  background: var(--bg-color-white);
  border-radius: var(--r12);
  margin-bottom: 5px;
  cursor: pointer;
}
.info-container .list .step .groups,
.info-container .list .accordion .groups {
  padding: 0 20px 10px 20px;
  display: none;
}
.info-container .list .step .groups div,
.info-container .list .accordion .groups div {
  padding: 10px 20px;
  margin-bottom: 5px;
  border-radius: var(--r12);
  background: var(--bg-color-light);
}
/* is-open クラスが付与されたら表示する */
.list .accordion.is-open .groups {
  display: block;
}
/* 属性relを持つ要素にカーソルポインターを適用（任意） */
.list [rel],
.list .accordion .item {
  cursor: pointer;
}

.info-container .list .pict,
.info-container .list .icon {
  /* 固定したい幅を指定（例: 100px） */
  width: 50px;
  /* 親の幅が狭くなっても左右が縮まないように保護 */
  flex-shrink: 0;
  /* --- 以下を追加・更新 --- */
  display: flex;
  align-items: center;     /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  height: 100%;            /* 親要素(.item)の高さに合わせる */
  padding: 0;
  text-align: center;      /* Flexboxを使用するため消去しても問題ありません */
}
.info-container .list .icon {
  width: 40px;
}
.info-container .list .pict {
  width: 50px;
}
.info-container .list .pict i {
  font-size: 32px;
  padding-right: 5px;
}
.info-container .list .icon i {
  font-size: 24px;
  color: #999;
}

.info-container .list .desc {
  /* 余ったスペースを自動で全て埋める（オートサイズ） */
  flex: 1; 
  /* コンテンツが溢れたときに折り返す・崩れを防ぐ設定（必須ではないですが推奨） */
  min-width: 0; 
}
.info-container .list .desc p {
  white-space: nowrap;   /* 改行を禁止して1行にする */
  overflow: hidden;      /* はみ出た部分を隠す */
  text-overflow: ellipsis; /* はみ出た部分を「…」にする */
  font-size: 12px;
}
.info-container .list .desc .title {
  font-size: 14pt;
}
/* 利用規約・個人情報保護方針 */
.doc {
  width: 100%;
  padding: 20px 10px 0 20px;
  margin: 0;
  box-sizing: border-box;
  height: calc(100dvh - 60px);
  overflow-y: auto;
}
.doc.dlg {
  padding: 0;
  height: 100dvh - 60px;
  font-size: 16px;
}
.doc h3 {
  width: 100%;
  text-align: center;
  padding: 10px 0 2px 0;
  margin: 0;
}
.doc h4 {
  padding: 15px 0 5px 0;
  margin: 0;
}
.doc p {
  text-indent: 1em;
  line-height: 150%;
  padding: 0;
  margin: 0;
}
.doc p.bb {
  padding: 0;
  margin: 0;
  padding-bottom: 10px;
}
.doc ol,
.doc ul {
  padding: 0 20px;
}
.doc ul li,
.doc ol li {
  list-style-type: decimall;
  line-height: 150%;
  padding-bottom: 10px;
}
.doc ul li {
  list-style-type: circle;
}
.doc ol li:last-child {
  padding-bottom: 0;
}

/* お問い合わせ */
.form-group {
  margin-bottom: 24px;
}
.doc label {
  display: block;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
}
.doc .subtitle {
  padding-top: 10px;
  padding-bottom: 20px;
}
.badge-required {
  background-color: #e53e3e;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.badge-optional {
  background-color: #718096;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
    
.doc input[type="text"],
.doc input[type="email"],
.doc select,
.doc textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.doc input[type="text"]:focus,
.doc input[type="email"]:focus,
.doc select:focus,
.doc textarea:focus {
  outline: none;
  border-color: #3182ce;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}
.doc textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- フォームグループ --- */
.form-group {
  margin-bottom: 24px;
}

.group-title {
  display: block;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 12px;
  color: #2d3748;
}

/* --- ラジオボタン & チェックボックス --- */
.radio-group, .checkbox-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0;
}
.radio-card, .checkbox-card {
  flex: 1;
  min-width: 200px;
  flex-direction: column;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
}
.radio-card input, .checkbox-card input {
  accent-color: #3182ce;
  width: 16px;
  height: 16px;
}

/* 1. 元の input 要素（ラジオ・チェックボックス本体）を完全に非表示 */
.radio-card input[type="radio"],
.checkbox-card input[type="checkbox"] {
  display: none;
}

/* 2. カード（label）の基本スタイル */
.radio-card, 
.checkbox-card {
  flex: 1;
  min-width: 200px;
  border: 2px solid #cbd5e0; /* 枠線を少し太くして変化をわかりやすく */
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* 中央寄せ（必要に応じて調整） */
  text-align: center;
  font-weight: bold;
  color: #4a5568;
  background-color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease-in-out;
  user-select: none; /* テキスト選択を防止 */
}

/* 3. ホバー時のスタイル（未選択時） */
.radio-card:hover, 
.checkbox-card:hover {
  border-color: #3182ce;
  background-color: #ebf8ff;
  color: #2b6cb0;
}

/* 4. 【重要】内部の input が :checked 状態のときの親 label のスタイル */
.radio-card:has(input:checked),
.checkbox-card:has(input:checked) {
  /* 背景を爽やかで明るいアクアブルーに変更 */
  background-color: #ebf8ff; 
  /* 枠線と文字を深めのブルーで際立たせる */
  border-color: #ebf8ff;
  color: #2b6cb0;
  font-weight: bold;
  /* 選択されていることがひと目でわかるくっきりとしたシャドウ */
  box-shadow: 0 0 0 1px #478ccc, 0 4px 10px rgba(49, 130, 206, 0.15);
  transform: translateY(-1px);
}

/* ホバー時の見た目（選択済みカード） */
.radio-card:has(input:checked):hover,
.checkbox-card:has(input:checked):hover {
  background-color: #ebf8ff;
  border-color: #ebf8ff;
}

/* 5. キーボード操作（Tabキーフォーカス）時のアクセシビリティ対応 */
.radio-card:has(input:focus-visible),
.checkbox-card:has(input:focus-visible) {
  outline: 3px solid #63b3ed;
  outline-offset: 2px;
}

.card-title {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 4px;
}

.card-desc {
  font-size: 12px;
  color: #718096;
  line-height: 1.4;
}

/* --- 動的切り替えセクション --- */
.dynamic-section {
  display: none; /* 初期状態は非表示 */
  animation: fadeIn 0.3s ease-in-out forwards;
  border-top: 2px dashed #e2e8f0;
  padding-top: 24px;
  margin-top: 24px;
}
.dynamic-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- 送信ボタン --- */
.submit-btn {
  width: 100%;
  background-color: #3182ce;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 16px;
}
.submit-btn:hover {
  background-color: #2b6cb0;
}
.submit-btn:active {
  transform: translateY(0);
}

/* --- 危険領域（データ削除エリア） --- */
.danger-zone {
  border: 1px solid #fed7d7;
  background-color: #fff5f5;
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
}

.danger-title {
  font-size: 16px;
  color: #c53030;
  margin-bottom: 4px;
}

.danger-desc {
  font-size: 12px;
  color: #742a2a;
  margin-bottom: 26px;
}

.delete-btn {
  width: 100%;
  background-color: #e53e3e;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 12px;
  margin-top: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.delete-btn:hover {
  background-color: #c53030;
}

/* --- モーダルダイアログ --- */
/* オーバーレイ（背景） */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: flex-start; /* 上寄せ配置 */
  justify-content: center;
  padding-top: 50px; /* 画面上部からの位置 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* モーダルカード（初期状態：上方向に50px待機） */
.modal-box {
  position: relative;
  background: #ffffff;
  width: 90%;
  max-width: 420px;
  padding: 24px 20px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  
  /* 上からスライドするための初期位置調整 */
  transform: translateY(-50px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 表示状態（showクラス付与時） */
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-overlay.show .modal-box {
  /* 定位置へスライドイン */
  transform: translateY(0) scale(1);
}

/* テキスト・ボタン群 */
.modal-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
}

.modal-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;
  text-align: center;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.modal-btn {
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.1s;
}

.modal-btn:active {
  transform: scale(0.97);
}

.btn-cancel {
  background: #edf2f7;
  color: #4a5568;
}

.btn-danger {
  background: var(--accent-color, #e53e3e);
  color: #ffffff;
}

.btn-primary {
  background: #3182ce;
  color: #ffffff;
}

/* 残り時間を示すプログレスバー（最下部） */
.modal-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--accent-color, #e53e3e);
  opacity: 0.6;
  transform-origin: left;
  transform: scaleX(1);
}

.modal-overlay.show .modal-progress-bar {
  animation: modalTimeoutLinear linear forwards;
}

@keyframes modalTimeoutLinear {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}


/* ガイド起動ボタン */
.guide-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--primary-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.guide-trigger-btn:hover {
  background-color: var(--primary-hover);
}

.guide-trigger-btn:active {
  transform: scale(0.98);
}

/* モーダルオーバーレイ（背景） */
.feature-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.feature-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* モーダル本体 */
.feature-modal-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.feature-modal-overlay.show .feature-modal-box {
  transform: translateY(0) scale(1);
}

/* 閉じるボタン */
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: #4a5568;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s, transform 0.1s;
}

.modal-close-btn:hover {
  background: #ffffff;
  transform: scale(1.05);
}

/* キャプチャー画像表示エリア */
.guide-image-container {
  position: relative;
  width: 100%;
  background-color: #edf2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.guide-image-container img {
  width: 100%;
  height: auto;
  transition: opacity 0.2s ease;
}

.image-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 20px;
  display: none;
}

/* 説明文エリア */
.guide-content {
  padding: 24px 24px 16px;
}

.guide-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.guide-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub);
  min-height: 48px;
}

/* フッター＆操作エリア */
.guide-footer {
  padding: 16px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ドットインジケーター */
.step-dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cbd5e0;
  transition: background-color 0.2s, transform 0.2s;
}

.dot.active {
  background-color: var(--primary-color);
  transform: scale(1.25);
}

/* ボタン群 */
.guide-actions {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
}

.btn-secondary {
  background-color: #edf2f7;
  color: #4a5568;
}

.btn-secondary:hover {
  background-color: #e2e8f0;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* モーダル専用ボタンのスタイル設定 */
.gmodal-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 「次へ」「完了」ボタン（青色） */
.gmodal-btn-primary {
  background-color: #3182ce !important;
  color: #ffffff !important;
}

.gmodal-btn-primary:hover {
  background-color: #2b6cb0 !important;
}

/* 「前へ」ボタン（グレー） */
.gmodal-btn-secondary {
  background-color: #e2e8f0 !important;
  color: #4a5568 !important;
}

.gmodal-btn-secondary:hover {
  background-color: #cbd5e0 !important;
}

/* disabled（非活性）状態のボタン表示 */
.gmodal-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}









/* ==========================================
   スキマガ（skm_）専用分離スタイル
========================================== */

/* 1. ユーティリティ (優先度最上位) */
.skm-flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* skm-flex-centerより後に定義することで display: none を絶対優先にする */
.skm-hidden {
  display: none !important;
}

/* リンク風ボタン */
.skm-link-btn {
  background: none !important;
  border: none !important;
  color: #0066cc !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  padding: 0 2px !important;
  font-family: inherit !important;
}

.skm-link-btn:hover {
  color: #004080 !important;
}

/* ボタン構造 */
.skm-btn {
  padding: 10px 20px !important;
  font-size: 0.95rem !important;
  font-weight: bold !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s, transform 0.1s !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.skm-btn:active {
  transform: scale(0.98) !important;
}

.skm-btn-primary {
  background-color: #0066cc !important;
  color: #ffffff !important;
}

.skm-btn-primary:hover {
  background-color: #0052a3 !important;
}

.skm-btn-secondary {
  background-color: #e4e6eb !important;
  color: #4b4f56 !important;
}

.skm-btn-secondary:hover {
  background-color: #d8dadf !important;
}

.skm-btn-large {
  width: 100% !important;
  padding: 14px !important;
  font-size: 1.05rem !important;
  margin-top: 15px !important;
}

/* 2. オーバーレイレイヤー階層構造設定
   - ダイアログ (999990)
   - 制限画面 (999980) ※ダイアログより背面に配置
   - 詳細モーダル (999999) ※最前面
*/

/* 1. ダイアログカード（初回表示） */
.skm-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 999990 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.skm-dialog-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 24px !important;
  max-width: 420px !important;
  width: 100% !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  text-align: center !important;
  color: #333333 !important;
  box-sizing: border-box !important;
}

.skm-dialog-title {
  font-size: 1.25rem !important;
  margin: 0 0 12px 0 !important;
  font-weight: bold !important;
  color: #111111 !important;
}

.skm-dialog-desc {
  font-size: 0.9rem !important;
  color: #555555 !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.6 !important;
}

.skm-dialog-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}

.skm-dialog-actions .skm-btn {
  flex: 1 !important;
}

/* 2. 全画面制限画面（拒否時表示） */
.skm-full-screen-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #ffffff !important;
  z-index: 999980 !important; /* ダイアログ(999990)より下に指定 */
  padding: 20px !important;
  box-sizing: border-box !important;
}

.skm-blocked-card {
  text-align: center !important;
  max-width: 480px !important;
  width: 100% !important;
  color: #333333 !important;
}

.skm-blocked-img {
  margin-bottom: 20px !important;
  border-radius: 10px !important;
}
.skm-blocked-img img {
  border-radius: 10px !important;
}

.skm-blocked-card h2 {
  font-size: 1.2rem !important;
  margin: 0 0 16px 0 !important;
  color: #111111 !important;
  line-height: 1.4 !important;
  font-weight: bold !important;
}

.skm-blocked-card p {
  font-size: 0.95rem !important;
  color: #666666 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.6 !important;
}

.skm-policy-links {
  margin-bottom: 24px !important;
}

/* 3. 詳細ポップアップ（利用規約/プライバシー詳細） */
#skm-policy-modal {
  z-index: 999999 !important; /* 最前面 */
}

.skm-policy-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  width: 100% !important;
  max-width: 600px !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.skm-policy-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #eeeeee !important;
}

.skm-policy-header h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;
  color: #111111 !important;
}

.skm-close-btn {
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  color: #888888 !important;
  line-height: 1 !important;
}

.skm-policy-body {
  padding: 20px !important;
  overflow-y: auto !important;
  font-size: 0.9rem !important;
  color: #444444 !important;
  line-height: 1.6 !important;
}

.skm-policy-footer {
  padding: 12px 20px !important;
  border-top: 1px solid #eeeeee !important;
  text-align: right !important;
}

#skm-blocked-screen {
  background-color: rgb(241, 232, 209) !important;
  padding: 20px !important;
  margin: 0px !important;
}