@charset "utf-8";

/* ===================================================================
   1. 基本設定 (Reset & Body)
=================================================================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box; /* サイズ計算を容易にするため全要素に適用 */
}

html {
   height: 100%;
}

body {
   background-repeat: repeat-y;
   background-position: center;
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: #333;
}

.clear {
   clear: both;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

a {
   color: #0033ff;
   text-decoration: none;
}

a:visited {
   color: #003399;
}

a:hover {
   color: #CC0000;
   text-decoration: underline;
}

/* ===================================================================
   2. レイアウト (Container, Header, Contents, Footer)
=================================================================== */
#container {
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

#head {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   text-align: left;
   border-top: 10px solid #cc0000;
}

#contents {
   width: 98%;
   margin: 0 auto 20px auto;
   flex-grow: 1; /* フッターを最下部に固定するため */
}

#footer {
   width: 100%;
   margin-top: auto; /* コンテンツが少ない場合でもフッターを最下部に */
   background-color:#eeeeee;
   font-size: 12px;
   padding: 5px 0 10px 0; 
   clear: both;
}

#logo {
   width: 271px;
   height: 51px;
   margin: 10px;
   float: left;
}

.under2 {
   width: 100%;
   text-align: left;
   background-color: #CCCCCC;
   padding: 10px 10px 5px 10px;
   border-bottom: 2px solid #333333;
}

.copyright {
   font-style: normal;
   font-size: 11px;
   float: right;
}

/* ===================================================================
   3. ナビゲーション (Local, Global, Mobile)
=================================================================== */

/* 3-1. ローカルナビゲーション (ヘッダー右上) */
#local_nav {
   float: right;
   margin: 10px 10px 10px 30px;
   padding: 10px 5px 5px 20px;
   text-align: center;
   background-color: #dddddd;
   border-radius: 20px;
   border: 1px solid #eeeeee;
}

ul.local_nav {
   float: left;
}

ul.local_nav li {
   float: left;
   font-size: 12px;
   margin: 0 8px 0 0;
   list-style: none; /* liのデフォルトスタイルを無効化 */
}

.lnav_icon {
   color: #7b7c7d;
   padding-right: 3px;
}

/* ===================================================================
   3-2. グローバルナビゲーション (PC) - 位置ずれ完全修正版
=================================================================== */

.global-menu {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid #e1e5e9;
  border-bottom: 1px solid #e1e5e9;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 100;
}

.main-menu {
  display: flex;
  list-style: none;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  position: relative;
}

/* メインメニューアイテム */
.menu-item {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.menu-item > a,
.menu-item > .mainmenulink {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  border-radius: 8px;
  margin: 8px 4px;
}

/* ホバー時のメインメニュー効果 */
.menu-item:hover > a,
.menu-item:hover > .mainmenulink {
  color: #c0392b;
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.08) 0%, rgba(192, 57, 43, 0.12) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(192, 57, 43, 0.15);
}

/* アイコンスタイル */
.menu-item .icon {
  color: #c0392b;
  font-size: 16px;
  margin-right: 8px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu-item:hover .icon {
  transform: rotate(90deg) scale(1.2);
  color: #a93226;
}

/* HOMEアイコン特別スタイル */
.menu-item .fa-home {
  font-size: 18px;
  margin-right: 0;
}

/* サブメニュー - 幅を拡張 */
.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  list-style: none;
  padding: 12px 5px 12px 0px;
  width: 380px; /* 幅を320pxから380pxに拡張 */
  opacity: 0;
  visibility: hidden;
  border-radius: 12px;
  z-index: 1000;
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: top center;
  transform: translateX(-50%) translateY(-10px) scale(0.95);
}

/* サブメニュー表示時のアニメーション */
.menu-item:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* サブメニューの矢印（擬似要素） */
.submenu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
  filter: drop-shadow(0 -2px 3px rgba(0,0,0,0.1));
}

/* 閉じるボタン */
.btn-line {
  padding: 8px 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
}

.close-btn {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  float: right;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
}

.close-btn:hover {
  background: linear-gradient(135deg, #a93226 0%, #922b21 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.4);
}

/* サブメニューアイテム - 修正版 */
.submenu li {
  position: relative;
  transition: all 0.3s ease;
  margin: 2px 8px;
  border-radius: 8px;
  overflow: hidden;
  display:flex;             /* 横並びを明示 */
  align-items:center;       /* 中央揃え */
  gap:8px;                  /* 矢印とテキストの隙間 */
}

.submenu li:not(.btn-line) {
  padding: 0;
}

.submenu li:not(.btn-line):hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* サブメニューリンク - 完璧位置調整版 */
.submenu li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 16px; /* パディングを少し増やして余裕を持たせる */
  color: #495057;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  line-height: 1.3; /* line-heightを調整 */
  position: relative;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
  min-height: 46px; /* 高さを少し増やして余裕を持たせる */
  gap: 8px; /* アイコンとテキストの間隔を gap で制御 */
}

.submenu li a:hover {
  color: #c0392b;
  text-decoration: none;
  padding-left: 20px; /* ホバー時のインデント */
}

/* サブメニューアイコン - 完璧位置調整版 */
.submenu li .fas {
  color: #c0392b;
  font-size: 12px;
  width: 12px; /* 幅を調整 */
  height: 12px; /* 高さを明示的に設定 */
  display: inline-flex; /* inline-flexに変更 */
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin: 0; /* marginをリセット */
  padding: 0; /* paddingもリセット */
  line-height: 1;
  vertical-align: middle;
}

.submenu li:hover .fas {
  transform: scale(1.1);
  color: #a93226;
}

/* ロックアイコンは例外処理 */
.submenu li .fa-lock {
  color: #6c757d;
  font-size: 11px;
  width: 11px;
  height: 11px;
  margin-left: auto; /* 右端に配置 */
  margin-right: 0;
}

/* テキストコンテナ */
.submenu li a .fas + span,
.submenu li a .fas + * {
  flex: 1; /* 残りのスペースを占有 */
  line-height: 1.3;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

/* より確実な方法：特定のアイコンクラスに対する調整 */
.submenu .fa-angle-right {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 矢印アイコンのインデントを統一 */
.submenu li > .fa-angle-right{
    flex-shrink:0;      /* つぶれ防止 */
    margin-left:16px;   /* 左端からの余白 */
    margin-right:4px;   /* テキストとの間隔 */
}

.submenu li .fa-lock{
    margin-left:auto;  /* すでに指定あり。flex でも機能します */
}

/* ホバーライン効果の調整 */
.submenu li a::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: 10px; /* 位置を調整 */
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #c0392b, #e74c3c);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 1px;
}

.submenu li:hover a::after {
  width: calc(100% - 32px);
}

/* 確実な中央揃えのためのバックアップ */
.submenu li a > i.fas {
  align-self: center !important;
}

/* メニューアイテムが開いている時の特別スタイル */
.menu-item:hover {
  position: relative;
}

.menu-item:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c0392b, transparent);
  border-radius: 2px;
}

/* JavaScriptで制御されるクラスの修正版 */

/* サブメニュー表示制御 */
.submenu.submenu-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* アクティブなサブメニューアイテム */
.submenu li.submenu-item-active {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.submenu li.submenu-item-active a {
  color: #c0392b;
  padding-left: 20px;
}

.submenu li.submenu-item-active .fas {
  transform: scale(1.1);
  color: #a93226;
}

.submenu li.submenu-item-active a::after {
  width: calc(100% - 32px);
}

/* フォーカス状態のスタイル */
.submenu li.submenu-item-focus {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.3);
  border-radius: 8px;
}

.submenu li.submenu-item-focus a {
  color: #c0392b;
  outline: none;
}

/* アクティブなメニューアイテムの追加スタイル */
.menu-item.menu-active > a,
.menu-item.menu-active > .mainmenulink {
  color: #c0392b;
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.08) 0%, rgba(192, 57, 43, 0.12) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(192, 57, 43, 0.15);
}

.menu-item.menu-active .icon {
  transform: rotate(180deg) scale(1.2);
  color: #a93226;
}

.menu-item.menu-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c0392b, transparent);
  border-radius: 2px;
}

/* 特別なホバー効果（修正版） */
.submenu li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(192, 57, 43, 0.1), transparent);
  transition: left 0.6s ease;
}

.submenu li.submenu-item-active a::before,
.submenu li:hover a::before {
  left: 100%;
}

/* アクセシビリティ向上 */
.submenu a:focus {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

/* レスポンシブ調整 */
@media (max-width: 1200px) {
  .submenu {
    width: 340px; /* 小さい画面では少し狭く */
  }
  
  .menu-item > a,
  .menu-item > .mainmenulink {
    padding: 16px 18px;
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  .submenu {
    width: 300px; /* さらに小さい画面ではより狭く */
  }
  
  .menu-item > a,
  .menu-item > .mainmenulink {
    padding: 14px 12px;
    font-size: 13px;
  }
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .submenu {
    border: 2px solid #000;
  }
  
  .submenu li:hover {
    background: #000;
    color: #fff;
  }
  
  .submenu li:hover a {
    color: #fff;
  }
}

/* 動きを抑えたい場合の設定 */
@media (prefers-reduced-motion: reduce) {
  .menu-item,
  .submenu,
  .submenu li,
  .submenu a,
  .icon {
    transition: none !important;
    animation: none !important;
  }
  
  .submenu {
    transform: translateX(-50%);
  }
  
  .menu-item:hover .submenu,
  .submenu.submenu-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
  }
}

/* ===================================================================
   3-3. ハンバーガーメニュー (モバイル) - 完全改修版
=================================================================== */

/* ハンバーガーメニューボタン */
.hamburger-menu {
    display: none; /* デフォルトは非表示（PCでは不要） */
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1001;
}

.menu-toggle {
    width: 50px;
    height: 50px;
    background: #c0392b;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
}

.menu-toggle:hover {
    background: #a53327;
}

/* モバイルメニュー本体 */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    background-color: #fff;
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: -5px 0 20px rgba(0,0,0,0.3);
}

/* メニューが開いたときのスタイル */
body.menu-open .mobile-menu {
    transform: translateX(0);
}

/* 背景を暗くするオーバーレイ */
body.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    animation: fadeIn 0.4s ease;
}

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

/* メニューヘッダー（×ボタン） */
.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    padding: 15px 20px;
    background-color: #c0392b;
    border-bottom: 1px solid #eee;
}

.menu-close-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.menu-close-btn:hover {
    background-color: rgba(255,255,255,0.2);
}

/* モバイルメインメニュー */
.mobile-main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-item {
    border-bottom: 1px solid #eee;
}

.mobile-menu-link-container {
    display: flex;
    align-items: center;
    position: relative;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    flex: 1;
    transition: background-color 0.3s ease;
}

.mobile-menu-link:hover {
    background-color: #f5f5f5;
    color: #c0392b;
    text-decoration: none;
}

.mobile-menu-link i {
    margin-right: 12px;
    width: 20px;
    color: #c0392b;
}

/* サブメニュー開閉ボタン */
.submenu-toggle {
    width: 50px;
    height: 60px;
    background: transparent;
    border: none;
    border-left: 1px solid #eee;
    color: #c0392b;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.submenu-toggle:hover {
    background-color: #f5f5f5;
}

.submenu-toggle.active {
    background-color: #c0392b;
    color: white;
}

.submenu-toggle.active i {
    transform: rotate(45deg);
}

/* モバイルサブメニュー */
.mobile-submenu {
    display: none;
    background-color: #f8f9fa;
    border-left: 3px solid #c0392b;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-submenu.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.mobile-submenu li {
    border-bottom: 1px solid #e9ecef;
}

.mobile-submenu li:last-child {
    border-bottom: none;
}

.mobile-submenu a {
    display: block;
    padding: 15px 20px 15px 40px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
    transition: all 0.3s ease;
    position: relative;
}

.mobile-submenu a:before {
    content: "▸";
    position: absolute;
    left: 25px;
    color: #c0392b;
    font-size: 12px;
}

.mobile-submenu a:hover {
    background-color: #e9ecef;
    color: #c0392b;
    text-decoration: none;
    padding-left: 45px;
}

/* スクロールバーのスタイリング */
.mobile-menu::-webkit-scrollbar {
    width: 6px;
}

.mobile-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mobile-menu::-webkit-scrollbar-thumb {
    background: #c0392b;
    border-radius: 3px;
}

.mobile-menu::-webkit-scrollbar-thumb:hover {
    background: #a53327;
}

/* ===================================================================
   4. コンテンツ & タイポグラフィ
=================================================================== */

h1 {
  position: relative;
  padding: 1rem 1rem;
  font-size: 140%;
  font-weight: bold;
  color: #c0392b;
  margin: 10px 0 10px 0; /* h1の下にマージンを追加 */
}

h1 i.h1 {
  margin: 0 10px 0 0;
}

h1:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: repeating-linear-gradient(-45deg, #c0392b, #c0392b 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
}

.midashi {
   color: #ffffff;
   background-color: #CC0000;
   padding: 10px;
   margin: 15px 0;
   font-size: 108%;
   line-height: 1.5;
   font-weight: bold;
}
   
.midashi02 {
   color: #CC0000;
   background-color: #ffd5d5;
   padding: 10px;
   margin: 5px 0;
   font-size: 108%;
   line-height: 1.5;
   font-weight: bold;
   border-left: 5px solid #CC0000;
}

/* ===================================================================
   5. サムネイル表示 (動画一覧ページ)
=================================================================== */

/* 5-1. フィルタリングUI */
.thumbnail-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.control-group {
  display: flex;
  flex-direction: column;
}

.control-group label {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}


.control-group select,
.control-group input {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  min-width: 250px;
  font-size: 16px;
}

/* 5-2. サムネイルグリッド */
.thumbnail-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
  padding: 10px 0;
}

.thumbnail-box {
  background-color: #fff;
  border: 3px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.thumbnail-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.thumbnail-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
}

.thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* 5-3. バッジ */
.badge-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    gap: 5px;
}

.badge {
    padding: 5px 12px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.badge.member { background-color: #007bff; }
.badge.paid { background-color: #fd7e14; }
.badge.new { background-color: #dc3545; }
.badge.featured { background-color: #28a745; }

/* 5-4. サムネイル情報 */
.thumbnail-info {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background-color: #f5f5f5; /* ★薄いグレーの背景色を追加 */
  border-top: 1px solid #ddd;
}

.thumbnail-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  min-height: 44.8px; /* 2行分の高さを確保 */
}

.thumbnail-meta {
  font-size: 13px;
  color: #666;
}

.thumbnail-meta span {
    display: block;
    margin-top: 5px;
}

/* ===================================================================
   6. 汎用コンポーネント & ユーティリティ
=================================================================== */

/* 6-1. TOPへ戻るボタン */
#pageTop {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 999;
}

#pageTop a {
   display: flex; /* flexboxに変更 */
   align-items: center; /* 垂直方向の中央揃え */
   justify-content: center; /* 水平方向の中央揃え */
   width: 46px;
   height: 46px;
   background-color: #333333;
   color: #fff;
   font-weight: bold;
   border-radius: 50%;
   opacity: 0.6;
   text-decoration: none;
   /* line-height: 46px; を削除 */
}

#pageTop a:hover {
   text-decoration: none;
   background-color: #cc0000;
   opacity: 0.8;
}

/* アイコンフォントの微調整（必要に応じて） */
#pageTop a i,
#pageTop a .fa,
#pageTop a::before {
   font-size: 18px; /* アイコンサイズを明示的に指定 */
   line-height: 1; /* line-heightをリセット */
}

/* Font Awesomeアイコンの場合の追加調整 */
#pageTop a .fa-chevron-up,
#pageTop a .fa-angle-up,
#pageTop a .fa-arrow-up {
   margin-top: -1px; /* わずかに上に調整（必要に応じて） */
}

/* 6-2. DataTablesプラグインのスタイル調整 */
.dataTables_length, .dataTables_filter {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.dataTables_length label, .dataTables_filter label {
    font-weight: bold;
    color: #333;
}

.dataTables_length select, .dataTables_filter input {
    background-color: #ffffff !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-left: 10px;
}

/* ===================================================================
   7. レスポンシブ設定
=================================================================== */

@media (max-width: 768px) {
  /* PC用メニューを非表示 */
  #head .global-menu, #local_nav, #head .non-print {
    display: none !important;
  }
  
  /* ハンバーガーメニューを表示 */
  .hamburger-menu {
    display: block;
  }
  
  /* ヘッダーの調整 */
  #head {
    position: relative;
    padding-right: 80px; /* ハンバーガーボタンのスペースを確保 */
  }
  
  /* bodyがmenu-openのときはスクロールを無効化 */
  body.menu-open {
    overflow: hidden;
  }
  
  /* サムネイルフィルタを縦並びにする */
  .thumbnail-controls {
    flex-direction: column;
  }
  .control-group input,
  .control-group select {
    min-width: auto;
    width: 100%;
  }
  
  /* サムネイルグリッドを1列にする */
  .thumbnail-grid-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===================================================================
   8. pfi-data 検索ボックスデザイン
=================================================================== */

/* フィルタ全体のスタイル */
#filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 各フィルタ間の間隔 */
    padding: 20px; /* 全体の余白 */
    background-color: #f4f4f4; /* 薄いグレーの背景 */
    border: 1px solid #ddd; /* 境界線 */
    border-radius: 8px; /* 丸みを付ける */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    margin: 0 auto 30px auto; /* 上下40px、中央揃え */
}

/* 各フィルタのスタイル */
#filters div {
    flex: 1 1 200px; /* 最小幅200px、均等に広がる */
    display: flex;
    flex-direction: column;
    gap: 5px; /* ラベルと要素の間隔 */
}

/* ラベルのスタイル */
#filters label {
    font-weight: bold;
    font-size: 12px;
    color: #333;
}

/* セレクトボックスと日付入力のスタイル */
#filters select,
#filters input[type="date"] {
    padding: 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

#filters select:focus,
#filters input[type="date"]:focus {
    border-color: #0078d7; /* フォーカス時の色 */
    outline: none;
}

/* セレクトボックスのオプションの見た目を調整 */
#filters select option {
    padding: 10px;
}

i.fas {
	padding-right: 5px;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
    #filters div {
        flex: 1 1 100%; /* 幅を100%に変更 */
    }
}

/* ===================================================================
   9. json部分デザイン
=================================================================== */

/*======================================================================================================================*/
/*  リスト部分の装飾   */

#pfidb {
   font-size: 70%;
   }
   
#pfidb_filter input {
        width: 300px; /* 好きなサイズを指定 */
        font-size: 12px; /* フォントサイズも調整可能 */
        padding: 8px; /* パディングの調整 */
    }

#pfidb thead th {
    font-size: 14px; /* 好きなフォントサイズに変更 */
    font-weight: bold; /* 必要に応じて太字にする */
    color: #333; /* ヘッダーの文字色を変更（オプション） */
    text-align: left; /* ヘッダーのテキストを中央揃え（オプション） */
}

/* 本体テーブル */
#pfidb thead th { font-size: 12px; }

/* scrollX で作られる複製ヘッダーにも適用 */
.dataTables_scrollHeadInner table thead th { font-size: 12px; }

/* もっと広く網羅するなら（優先度高め） */
.dataTables_wrapper table.dataTable thead th { font-size: 12px; }


/* ===================================================================
   9. json部分デザイン
=================================================================== */

p.cyusyaku {
  font-size: 70%;
  text-align: right;
   }
   

/* ===================================================================
   10. FA6→FA5 minimal shim (IE対応)
=================================================================== */

/* FA6クラス名 → FA5フォントに割当（念のためここにも置く） */
.fa-solid  { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }
.fa-regular{ font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; }
.fa-brands { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }

/* --- サブメニュー内のアイコン揃え（微調整） --- */
/* 左側の矢印 */
.global-menu .submenu li a i.fa-angle-right {
  font-size: 12px !important;
  width: 312px !important;
  height: 12px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-left: 16px !important; /* 既存と整合 */
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

/* 右端の鍵（“会員限定”等） */
.global-menu .submenu li a i.fa-lock {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 12px !important;   /* 11 → 12 にしてFA6相当の見栄えへ */
  width: 12px !important;
  height: 12px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -0.02em !important;       /* ベースラインを僅かに下げる */
  margin-left: auto !important;  /* 右寄せ維持 */
  margin-right: 2px !important;  /* 右端との余白をほんの少しだけ確保 */
  color: #ff0000 !important;     /* 既定と同色で固定 */
}

/* === submenu 右端の見切れ対策（余白＋オーバーフロー許容） === */
.submenu { padding-right: 8px !important; }   /* 0px → 8px の逃げを作る */
.submenu li { overflow: visible !important; } /* 行末での切り落としを許可しない */

/* 鍵アイコンの右詰め＆わずかに内側へ */
.submenu li a .fa-lock,
.submenu li > .fa-lock,
.submenu li a .fa-lock:before {
  margin-left: auto !important;
  margin-right: 6px !important;  /* 右端から少し内側へ */
  font-size: 12px;               /* 見栄えがFA6に近い */
  line-height: 1;
}