@charset "utf-8";

/* ==========================================================================
   General Styles
   ========================================================================== */

/* Main Content Header */
body.online-list #main h2 {
  text-align: center;
  font-size: 24px;
  color: #541532;
  margin-bottom: 20px;
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
}

/* ==========================================================================
   Category Section Styles
   ========================================================================== */

.category-section {
  background: #f9f9f9;
  padding: 10px;
  margin-bottom: 10px;
  border-left: 5px solid #ccc;
  border-radius: 5px;
}

.category-section.live {
  border-left-color: #74325c;
}

.category-section.basic {
  border-left-color: #007199;
}

.category-section.genuine {
  border-left-color: #de8617;
}

.category-section.advanced {
  border-left-color: #539e00;
}

.category-section.yuki-gallery {
  border-left-color: #8e44ad;
}

.category-section.others {
  border-left-color: #999;
}

#main .category-section h3 {
  background: #74325c;
  color: white;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}

.category-section h4 {
  color: #541532;
  font-size: 16px;
  margin-bottom: 5px;
  text-align: left;
}

/* ==========================================================================
   Content Table Styles
   ========================================================================== */

.content-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
}

.content-table th,
.content-table td {
  border: 1px solid #ccc;
  word-break: break-word;
  padding: 0.5em;
}

.content-table th {
  text-align: center;
}

.content-table td {
  text-align: left;
}

.content-table th:nth-child(1),
.content-table td:nth-child(1) {
  width: 26%;
}

.content-table th:nth-child(2),
.content-table td:nth-child(2) {
  width: 15%;
}

.content-table th:nth-child(3),
.content-table td:nth-child(3) {
  width: 59%;
}

.content-table tr {
  transition: box-shadow 0.3s ease;
}

.content-table tr:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.content-table td ul {
  padding-left: 1em;
  margin: 0;
}

.content-table td ul li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
}

.content-table td ul li::before {
  content: "✅";
  position: absolute;
  left: 0;
  color: #74325c;
}

/* ==========================================================================
   Sub Content Styles
   ========================================================================== */

/* Sub Box Container */
#sub .box1 {
  overflow: visible;
  padding: 10px;
  margin-top: 70px;
  margin-bottom: 20px;
  border: 1px solid #dcdcdc;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

#sub h2 + .box1 {
  border-top: none;
}

#sub ul.submenu {
  margin-bottom: 0;
}

/* Sub Category List */
#sub .list {
  position: relative;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
}

#sub .list a {
  text-decoration: none;
  display: block;
  overflow: hidden;
  padding: 5px 0;
  border-top: 1px solid #dcdcdc;
}

#sub .list:last-of-type a {
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 20px;
}

#sub .list h4 {
  color: #541532;
}

#sub .list figure img {
  float: left;
  width: 20%;
  margin-right: 5px;
}

/* Category Selection Header */
#sub h2 {
  text-align: center;
  background: #541532;
  color: #fff;
}

#sub ul.submenu > li {
  text-align: center;
}

/* Year List Styles */
#year-list-mobile.submenu,
#year-list-desktop {
  list-style-type: none;
  padding: 10px;
  margin: 0;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #ddd;
  display: none;
}

#year-list-mobile.submenu {
  background-color: #50331d;
}

#year-list-desktop {
  background-color: #ffffff;
}

#year-list-mobile.submenu.is-open,
#year-list-desktop.is-open {
  display: block;
}

#year-list-mobile li,
#year-list-desktop li {
  list-style-type: "▶ ";
  padding: 5px 0;
}

/* Submenu Link Styles */
.submenu li a {
  font-weight: bold;
}

.submenu li ul#year-list-mobile,
.submenu li ul#year-list-desktop {
  font-weight: normal;
}

#sub ul.submenu li ul#year-list-mobile li,
#sub ul.submenu li ul#year-list-desktop li {
  float: none;
  width: auto;
  display: list-item;
}

/* Submenu Container */
#sub ul.submenu {
  margin-bottom: 15px;
  border-top: 1px solid #dcdcdc;
}

#sub ul.submenu li a {
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  border: 1px solid #dcdcdc;
  color: #541532;
  background-color: rgba(229, 229, 229, 0.33);
  font-size: clamp(12px, 1.3vw, 18px);
}

#sub h2 + ul.submenu {
  border-top: none;
}

/* Layout Styles */
#sub {
  float: right;
  width: 21%;
  margin: 40px 1% 0 1%;
  box-sizing: border-box;
}

#main {
  float: left;
  width: calc(100% - 25%);
  box-sizing: border-box;
}

#contents::after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   モバイル用三本線メニューバーの色
   ========================================================================== */

/* ゆうきともオンラインのリストページ */
body.online-list #menubar_hdr {
  color: #541532;
  border: 1px solid #541532;
}
body.online-list #menubar_hdr .hambars i {
  background: #541532;
}

/* 枠と文字色（境界線） */
body.online-list #menubar_hdr { color:#541532; border-color:#541532; }

/* 三本線の色 */
body.online-list #menubar_hdr .hambars i { background:#541532; }

/* ゆうきともオンラインのリストページ：三本線メニューのラベル装飾 */
body.online-list #menubar_hdr .label {
  background-color: #6b2164;         /* 赤紫色の背景 */
  color: #fff;                    /* 白文字 */
  padding: 2px 6px;               /* 内側の余白 */
  border-radius: 9px;             /* 角丸 */
  font-size: 11px;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

/* ========== Mobile: 押し下げ表示（online-list 専用） ========== */
@media (max-width: 799.98px){

  /* wrapper を“普通の箱”に：固定/スライドを無効化 */
  body.online-list #menubar-s-wrapper{
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    transition: none;
    background: transparent;
    z-index: auto;
    display: block !important; /* overlay用の display:none を上書き */
  }

  /* メニュー本体はフロー内。閉じる時は高さ0で畳む→押し上げ */
  body.online-list #menubar-s{
    display: block !important;          /* 重要：常にフローに置く */
    background: linear-gradient(#250d00, #543f32);
    padding: 0;                      /* overlay時の 90px は不要 */
    overflow: hidden;
    max-height: 0;                       /* 閉じ：畳む */
    transition: max-height .24s ease;    /* 擬似スライド */
  }
  body.online-list #menubar-s-wrapper.is-open #menubar-s{
    max-height: 100vh;                   /* 開き：充分大きく（押し下げ） */
  }

  /* 各項目の見た目（必要に応じてお好みで） */
  body.online-list #menubar-s ul{
    padding: 0;
    margin: 0 10px;
    list-style: none;
  }
  body.online-list #menubar-s li{
    margin: 10px 0;
    border: 1px solid #fff;
    border-radius: 5px;
  }
  body.online-list #menubar-s li a{
    display: block;
    padding: 12px 16px;
    text-align: center;
    line-height: 1.5;
    color: #fff !important;
    text-decoration: none;
  }
  body.online-list #menubar-s li a span{
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(255,255,255,.6) !important;
  }


#menubar-s button#live-toggle {
  all: unset;
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 0.1em;

}
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Screen width <= 850px */
@media screen and (max-width: 850px) {


  #main,
  #sub {
    float: none;
    width: auto;
    padding: 2% 2% 0;
  }

#sub {
    display: none; /* 850px以下で非表示 */
  }

  #sub ul.submenu > li {
    width: 50%;
    float: left;
  }

  #sub ul.submenu > li:nth-child(even) a {
    border-left: none;
  }

  #sub ul.submenu li ul#year-list-mobile li {
    width: auto;
    float: none;
  }

  #sub ul.submenu {
    display: block;
  }

  #year-list-mobile {
    display: none;
  }

  .content-table,
  .content-table thead,
  .content-table tbody,
  .content-table th,
  .content-table td,
  .content-table tr {
    display: block;
    width: 100%;
  }

  .content-table thead {
    display: none;
  }

  .content-table tr {
    margin-bottom: 1.5em;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 1em;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .content-table td {
    padding: 0.5em 0;
  }

  .content-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 0.3em;
    color: #74325c;
  }
}

/* Screen width <= 800px */
@media screen and (max-width: 800px) {
  .live-card {
    gap: 1em;
  }

  .live-item {
    padding: 0.8em;
  }

  .live-title {
    font-size: 1rem;
  }

  .live-time {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Live Card Styles
   ========================================================================== */

.live-card {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  margin-top: 1em;
}

.live-item {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 5px solid #74325c;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.live-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.live-title {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.3em;
  color: #541532;
}

.live-title .live-date {
  font-size: 0.9rem;
  color: #888;
}

.live-time {
  font-size: 0.95rem;
  font-weight: 500;
  color: #74325c;
  margin-bottom: 0.5em;
}

.live-content ul {
  padding-left: 1em;
  margin: 0;
}

.live-content li {
  list-style: none;
  position: relative;
  margin-bottom: 0.3em;
}