/* ==========================================================
       朗読劇舞台『極めて怖い話』 カスタムCSS (鮮明な赤黒・怖い目仕様)
       クラス名プレフィックス: my-hw- (Horror Work)
       ========================================================== */
    :root {
      --my-hw-bg-color: #0d0202;         /* 凝血のような赤みがかった漆黒 */
      --my-hw-panel-bg: #1a0505;         /* 淀んだ血闇 */
      --my-hw-text-main: #d1c7ba;        /* 古びた和紙、黄ばんだ色 */
      --my-hw-text-muted: #8e7f7f;       /* 赤みを帯びた灰 */
      --my-hw-accent-red: #a80f0f;       /* 血走った目の赤に合わせた深い赤 */
      --my-hw-accent-red-hover: #d61a1a; /* 激しく燃える血の赤 */
      --my-hw-accent-eye: #a80f0f;       /* 血走った目の赤 */
      --my-hw-accent-blood: #ff4d4d;     /* 鮮血の赤（可読性重視の見出し用） */
      --my-hw-accent-dark: #000000;      
      --my-hw-border-color: #520b0b;     /* 血のような暗赤の枠線 */
    }

    body {
      background-color: var(--my-hw-bg-color);
      /* 闇の奥底へ吸い込まれるような放射状の赤闇 */
      background-image: radial-gradient(circle at 50% 50%, #1f0505 0%, #000000 80%);
      background-attachment: fixed;
      color: var(--my-hw-text-main);
      font-family: 'Noto Serif JP', serif; /* 明朝体をメインに設定して怪談感を演出 */
      margin: 0;
      padding: 0;
    }

    /* 👻 ギミック：画面の奥からうっすら見下ろす巨大な「目」 */
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      z-index: -1;
      background: 
        radial-gradient(circle at 50% 30%, rgba(168, 15, 15, 0.08) 0%, transparent 3%),  /* 瞳孔（赤） */
        radial-gradient(ellipse at 50% 30%, rgba(168, 15, 15, 0.05) 0%, transparent 20%), /* 虹彩（赤） */
        radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.8) 0%, transparent 35%);       /* まぶたの影 */
    }

    a {
      color: var(--my-hw-accent-red);
      text-decoration: none;
      transition: 0.3s;
    }
    a:hover {
      color: var(--my-hw-accent-red-hover);
    }

    /*--------------------------------------------------------------
    # Header
    --------------------------------------------------------------*/
    #header {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 300px;
      z-index: 9997;
      padding: 0 15px;
      background: linear-gradient(180deg, #0f0202 0%, #000000 100%);
      border-right: 1px solid var(--my-hw-border-color);
      box-shadow: 5px 0 15px rgba(0,0,0,0.9);
      overflow-y: auto;
      transition: all ease-in-out 0.5s;
    }

    #header .profile {
      text-align: center;
      padding: 40px 0 20px 0;
    }

    #header .profile h1 {
      font-size: 20px;
      margin: 0;
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 2px;
    }

    #header .profile h1 a {
      color: #fff;
      text-decoration: none;
      text-shadow: 0 0 15px rgba(168, 15, 15, 0.8); /* 文字も少し赤く発光 */
    }

    /* カウントダウン */
    .countdown {
      margin-top: 15px;
    }
    .countdown div {
      display: inline-block;
      margin: 0 8px;
      text-align: center;
    }
    .countdown h3 {
      font-size: 22px;
      color: var(--my-hw-accent-eye);
      margin-bottom: 0;
      font-family: 'Noto Serif JP', serif;
      text-shadow: 0 0 8px rgba(168, 15, 15, 0.6);
    }
    .countdown h4 {
      font-size: 11px;
      color: var(--my-hw-text-muted);
    }

    /*--------------------------------------------------------------
    # Navigation Menu
    --------------------------------------------------------------*/
    .nav-menu {
      padding: 0;
      display: block;
      margin-top: 20px;
    }
    .nav-menu * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nav-menu > ul > li {
      margin-bottom: 5px;
    }
    .nav-menu a, .nav-menu a:focus {
      display: flex;
      align-items: center;
      color: var(--my-hw-text-muted);
      padding: 12px 15px;
      font-size: 15px;
      text-decoration: none;
      transition: 0.3s;
      border-left: 2px solid transparent;
      letter-spacing: 1px;
    }
    .nav-menu a i, .nav-menu a:focus i {
      font-size: 18px;
      margin-right: 12px;
      color: var(--my-hw-accent-red);
      transition: 0.3s;
    }
    .nav-menu a:hover, .nav-menu .active, .nav-menu .active:focus, .nav-menu li:hover > a {
      color: #fff;
      background: rgba(168, 15, 15, 0.1);
      border-left: 2px solid var(--my-hw-accent-eye);
      text-shadow: 0 0 5px rgba(168, 15, 15, 0.5);
    }
    .nav-menu a:hover i, .nav-menu .active i {
      color: var(--my-hw-accent-eye);
      text-shadow: 0 0 10px rgba(168, 15, 15, 0.8);
    }

    /*--------------------------------------------------------------
    # Mobile Navigation
    --------------------------------------------------------------*/
    .my-hw-mobile-toggle {
      position: fixed;
      right: 15px;
      top: 15px;
      z-index: 9998;
      border: 0;
      font-size: 28px;
      transition: all 0.4s;
      outline: none !important;
      background-color: var(--my-hw-panel-bg);
      color: var(--my-hw-accent-eye);
      width: 45px;
      height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      border: 1px solid var(--my-hw-accent-eye);
      cursor: pointer;
      box-shadow: 0 0 15px rgba(168, 15, 15, 0.5);
    }

    /*--------------------------------------------------------------
    # Main Content Layout
    --------------------------------------------------------------*/
    #main {
      margin-left: 300px;
      transition: all ease-in-out 0.5s;
    }
    #footer {
      margin-left: 300px;
      transition: all ease-in-out 0.5s;
      background: #000;
      color: var(--my-hw-text-muted);
      padding: 30px 0;
      text-align: center;
      border-top: 1px solid var(--my-hw-border-color);
      font-family: 'Noto Sans JP', sans-serif;
    }

    .my-hw-main-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    @media (max-width: 1199px) {
      #header { left: -300px; }
      #main, #footer { margin-left: 0; }
      body.mobile-nav-active #header { left: 0; }
      body.mobile-nav-active::before {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.85);
        z-index: 9996;
      }
    }
    @media (max-width: 768px) {
      .my-hw-main-container { padding: 20px 10px; }
    }

    /*--------------------------------------------------------------
    # ヒーロー画像 (ホラーエフェクト)
    --------------------------------------------------------------*/
    .my-hw-hero-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      background-color: var(--my-hw-bg-color);
    }

    .my-hw-hero-img {
      display: block;
      width: 100%;
      height: auto;
      /* 全体的にくすんだ、少し血気のない色合いに */
      filter: grayscale(30%) contrast(120%) sepia(20%) hue-rotate(350deg);
      /* 強化されたグリッチ（ノイズ）アニメーション */
      animation: heroGlitch 6s infinite;
    }

    .my-hw-hero-overlay {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; /* 下の要素へのクリックを阻害しない */
      /* 周辺減光と血のようなグラデーション */
      background: radial-gradient(circle at center, transparent 30%, rgba(13, 2, 2, 0.7) 80%, rgba(0, 0, 0, 0.9) 100%),
                  linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(168, 15, 15, 0.1) 50%, rgba(0,0,0,0.8) 100%);
      box-shadow: inset 0 0 50px rgba(0,0,0,0.9);
      /* 脈打つようなアニメーション */
      animation: heroPulse 5s infinite alternate;
    }

    /* 👻 ノイズエフェクト層の追加 */
    .my-hw-noise-overlay {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none;
      /* 砂嵐のような横縞ノイズ */
      background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.15) 2px, rgba(255, 255, 255, 0.15) 4px);
      opacity: 0;
      mix-blend-mode: overlay;
      animation: noiseGlitch 6s infinite;
    }

    /* 脈打ちアニメーション */
    @keyframes heroPulse {
      0% { opacity: 0.6; }
      50% { opacity: 0.9; }
      100% { opacity: 0.7; }
    }

    /* 👁 より凶悪なグリッチ（ノイズ・ズレ・色反転・スライス）アニメーション */
    @keyframes heroGlitch {
      0%, 92% { 
        transform: translate(0, 0) scale(1); 
        filter: grayscale(30%) contrast(120%) sepia(20%) hue-rotate(350deg); 
        clip-path: inset(0 0 0 0);
      }
      93% { 
        transform: translate(-10px, 5px) scale(1.02); 
        filter: grayscale(0%) contrast(200%) hue-rotate(180deg) invert(50%); 
        clip-path: inset(10% 0 80% 0); /* 上下に黒い亀裂が入る */
      }
      94% { 
        transform: translate(15px, -5px) scale(1.05); 
        filter: grayscale(100%) contrast(300%) invert(100%); 
        clip-path: inset(70% 0 5% 0);
      }
      95% { 
        transform: translate(-5px, 10px) scale(1.02); 
        filter: grayscale(50%) contrast(200%) brightness(150%) hue-rotate(90deg); 
        clip-path: inset(30% 0 40% 0);
      }
      96% { 
        transform: translate(0, 0) scale(1); 
        filter: grayscale(30%) contrast(120%) sepia(20%) hue-rotate(350deg); 
        clip-path: inset(0 0 0 0);
      }
      97% { 
        transform: translate(5px, 5px) skewX(20deg); 
        filter: contrast(300%) brightness(200%) sepia(100%) hue-rotate(300deg); 
      }
      98%, 100% { 
        transform: translate(0, 0) skewX(0); 
        filter: grayscale(30%) contrast(120%) sepia(20%) hue-rotate(350deg); 
      }
    }

    /* ノイズオーバーレイのフラッシュ */
    @keyframes noiseGlitch {
      0%, 92% { opacity: 0; }
      93%, 95% { opacity: 0.8; transform: translateY(-5px); }
      96%, 100% { opacity: 0; }
    }


    /*--------------------------------------------------------------
    # Custom Components (ホラーデザイン)
    --------------------------------------------------------------*/
    .my-hw-section-title {
      color: #fff;
      font-size: 2.2rem;
      text-align: center;
      margin-bottom: 50px;
      position: relative;
      padding-bottom: 15px;
      letter-spacing: 5px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    }
    
    /* 👻 ギミック：タイトル横で瞬きする「赤い目」 */
    .my-hw-section-title::before {
      content: "\F334"; /* Bootstrap icon: bi-eye-fill */
      font-family: "bootstrap-icons";
      color: var(--my-hw-accent-eye);
      margin-right: 15px;
      font-size: 1.8rem;
      text-shadow: 0 0 15px rgba(168, 15, 15, 0.9);
      display: inline-block;
      animation: blink 4s infinite;
    }

    /* 瞬きアニメーション */
    @keyframes blink {
      0%, 96%, 98%, 100% { transform: scaleY(1); }
      97%, 99% { transform: scaleY(0.1); }
    }

    .my-hw-section-title::after {
      content: "";
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 80px; height: 1px;
      background: var(--my-hw-accent-eye);
      box-shadow: 0 0 8px var(--my-hw-accent-eye);
    }
    @media (max-width: 768px) {
      .my-hw-section-title { font-size: 1.5rem; letter-spacing: 2px; }
    }

    /* ボタン */
    .my-hw-btn {
      display: inline-block;
      background: var(--my-hw-panel-bg);
      color: #fff;
      border: 1px solid var(--my-hw-border-color);
      padding: 12px 24px;
      text-decoration: none;
      transition: 0.4s;
      cursor: pointer;
      text-align: center;
      letter-spacing: 2px;
    }
    .my-hw-btn:hover {
      background: var(--my-hw-bg-color);
      color: #fff;
      border-color: var(--my-hw-accent-eye);
      box-shadow: 0 0 20px rgba(168, 15, 15, 0.7);
    }

    .my-hw-btn-fill {
      background: var(--my-hw-border-color);
      color: #fff;
      border: 1px solid var(--my-hw-accent-red);
    }
    .my-hw-btn-fill:hover {
      background: var(--my-hw-bg-color);
      border: 1px solid var(--my-hw-accent-eye);
      box-shadow: 0 0 20px rgba(168, 15, 15, 0.8);
    }

    /* 各種ボックス */
    .my-hw-intro-box, .my-hw-outline-box, .my-hw-table-wrapper {
      background-color: var(--my-hw-panel-bg);
      border: 1px solid var(--my-hw-border-color);
      padding: 30px;
      position: relative;
      box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
    }
    @media (max-width: 768px) {
      .my-hw-intro-box, .my-hw-outline-box, .my-hw-table-wrapper { padding: 15px; }
    }
    .my-hw-intro-box { height: 100%; }

    .my-hw-intro-title {
      font-size: 1.5rem;
      color: #fff;
      border-left: 3px solid var(--my-hw-accent-eye);
      padding-left: 15px;
      margin-bottom: 15px;
      text-shadow: 0 0 5px rgba(168, 15, 15, 0.3);
    }
    .my-hw-catch-row {
      margin: 20px 0;
      border-top: 1px solid var(--my-hw-border-color);
      border-bottom: 1px solid var(--my-hw-border-color);
      padding: 15px 0;
      background: rgba(0,0,0,0.3);
    }
    .my-hw-catch-col h5 {
      color: var(--my-hw-text-main);
      margin: 0;
      font-size: 1.1rem;
      letter-spacing: 3px;
    }
    .my-hw-intro-text p {
      line-height: 2;
      font-size: 0.95rem;
      letter-spacing: 1px;
    }

    /* プロフィールカード */
    .my-hw-date-title {
      background: linear-gradient(90deg, rgba(168, 15, 15, 0.2) 0%, transparent 100%);
      border-left: 4px solid var(--my-hw-accent-eye);
      padding: 12px 15px;
      margin-bottom: 25px;
      color: #fff;
      letter-spacing: 1px;
    }
    .my-hw-cast-category {
      color: var(--my-hw-text-muted);
      font-size: 1.1rem;
      margin-bottom: 15px;
      border-bottom: 1px solid var(--my-hw-border-color);
      padding-bottom: 5px;
      letter-spacing: 2px;
    }
    .my-hw-profile-card {
      background: #000;
      border: 1px solid var(--my-hw-border-color);
      text-align: center;
      padding: 15px;
      transition: 0.4s;
      position: relative;
    }
    /* 不吉なテープの表現 */
    .my-hw-profile-card::after {
      content: "";
      position: absolute;
      top: -6px; left: 50%;
      transform: translateX(-50%) rotate(-2deg);
      width: 40px; height: 12px;
      background: rgba(168, 15, 15, 0.4); 
      box-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }
    @media (max-width: 768px) {
      .my-hw-profile-card { padding: 10px; }
    }
    .my-hw-profile-card:hover {
      border-color: var(--my-hw-accent-eye);
      box-shadow: 0 0 20px rgba(168, 15, 15, 0.4);
      transform: scale(1.02);
    }
    .my-hw-profile-img {
      width: 100%;
      aspect-ratio: 3/4;
      background-color: #0d0202;
      margin-bottom: 15px;
      overflow: hidden;
      border: 1px solid #111;
    }
    .my-hw-profile-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 遺影や呪われた写真のような設定 */
      /*filter: grayscale(80%) contrast(130%) brightness(70%) sepia(40%) hue-rotate(350deg);*/
      transition: 0.5s;
    }
    .my-hw-profile-card:hover .my-hw-profile-img img {
      filter: grayscale(60%) contrast(140%) brightness(80%) sepia(80%) hue-rotate(355deg); /* ホバーで少し赤みがかる */
    }
    .my-hw-profile-info {
      margin-bottom: 15px;
    }
    .my-hw-profile-info h5 {
      font-size: 1.1rem;
      color: #fff;
      margin-bottom: 5px;
      letter-spacing: 1px;
    }
    @media (max-width: 768px) {
      .my-hw-profile-info h5 { font-size: 0.95rem; }
    }
    .my-hw-profile-info p {
      font-size: 0.8rem;
      color: #fff;
      margin: 0;
    }

    /* キャストタブボタン */
    .my-hw-tab-btn {
      background: #000;
      color: var(--my-hw-text-muted);
      border: 1px solid var(--my-hw-border-color);
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
      transition: 0.3s;
      letter-spacing: 1px;
    }
    .my-hw-tab-btn.active, .my-hw-tab-btn:hover {
      background: var(--my-hw-panel-bg);
      color: #fff;
      border-color: var(--my-hw-accent-eye);
      box-shadow: inset 0 -2px 0 var(--my-hw-accent-eye);
    }
    .my-hw-cast-pane {
      display: none;
      animation: ghostFade 0.8s ease;
    }
    .my-hw-cast-pane.active {
      display: block;
    }
    @keyframes ghostFade {
      from { opacity: 0; filter: blur(5px); }
      to { opacity: 1; filter: blur(0); }
    }

    /* 星取表（タイムテーブル） */
    .my-hw-table-wrapper {
      overflow-x: auto;
      white-space: nowrap;
    }
    .my-hw-table {
      width: 100%;
      min-width: 800px;
      border-collapse: collapse;
      color: var(--my-hw-text-main);
    }
    .my-hw-table th, .my-hw-table td {
      padding: 15px;
      border: 1px solid var(--my-hw-border-color);
      text-align: center;
      vertical-align: middle;
    }
    .my-hw-table thead th {
      background-color: #0d0202;
      color: #fff;
      font-weight: normal;
      letter-spacing: 1px;
    }
    .my-hw-table tbody th {
      background-color: #1a0505;
      color: var(--my-hw-text-main);
    }

    /* 星取表内の配役・キャスト名装飾 */
    .my-hw-sub-header th {
      background-color: #230e0e;
      font-size: 0.85rem;
      color: var(--my-hw-text-muted);
      padding: 8px;
    }
    .my-hw-role-col {
      color: var(--my-hw-text-muted);
      background-color: rgba(0,0,0,0.5);
      font-size: 0.85rem;
    }
    .my-hw-cast-col {
      color: #fff;
      font-size: 0.9rem;
    }
    .my-hw-table th, .my-hw-table td {
      padding: 12px;
    }

    /* --- 公演概要テーブル --- */
    .my-hw-info-table {
      width: 100%;
      border-collapse: collapse;
      color: var(--my-hw-text-main);
    }
    .my-hw-info-table th {
      width: 25%;
      padding: 15px 15px 15px 0;
      color: var(--my-hw-accent-blood);
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--my-hw-border-color);
      font-weight: bold;
      letter-spacing: 1px;
      text-shadow: 0 0 5px rgba(255, 77, 77, 0.3);
    }
    .my-hw-info-table td {
      padding: 15px 0;
      vertical-align: top;
      border-bottom: 1px solid var(--my-hw-border-color);
      line-height: 1.8;
    }
    .my-hw-info-table tr:last-child th,
    .my-hw-info-table tr:last-child td {
      border-bottom: none;
    }
    /* スマホ表示では縦に並べて読みやすく */
    @media (max-width: 768px) {
      .my-hw-info-table th, .my-hw-info-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
      }
      .my-hw-info-table th {
        border-bottom: none;
        padding-bottom: 0;
      }
      .my-hw-info-table td {
        padding-top: 5px;
      }
    }

    /* 注意事項 */
    .my-hw-notice-title {
      color: var(--my-hw-accent-blood);
      font-size: 1.2rem;
      margin-top: 25px;
      margin-bottom: 10px;
      border-left: 3px solid var(--my-hw-accent-blood);
      padding-left: 10px;
      text-shadow: 0 0 5px rgba(255, 77, 77, 0.4);
    }

    /* モーダル */
    .my-hw-modal-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 9999;
      display: none;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(3px);
    }
    .my-hw-modal-window {
      background: var(--my-hw-panel-bg);
      border: 1px solid var(--my-hw-accent-eye);
      width: 90%;
      max-width: 500px;
      padding: 40px 30px;
      position: relative;
      box-shadow: 0 0 50px rgba(168, 15, 15, 0.4);
    }
    .my-hw-modal-close {
      position: absolute;
      top: 10px; right: 15px;
      font-size: 2rem;
      color: var(--my-hw-text-muted);
      background: none; border: none; cursor: pointer;
      z-index: 2;
      transition: 0.3s;
    }
    .my-hw-modal-close:hover {
      color: var(--my-hw-accent-eye);
    }
    .my-hw-modal-body {
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .my-hw-modal-body h3 {
      border-bottom: 1px solid var(--my-hw-border-color);
      padding-bottom: 10px;
      margin-bottom: 20px;
    }

    /*--------------------------------------------------------------
    # Back to top button
    --------------------------------------------------------------*/
    .back-to-top {
      position: fixed;
      visibility: visible;
      opacity: 1;
      right: 15px;
      bottom: 15px;
      z-index: 9999;
      background: var(--my-hw-panel-bg);
      width: 45px;
      height: 45px;
      border-radius: 50%;
      border: 1px solid var(--my-hw-accent-eye);
      transition: all 0.4s;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
    .back-to-top i {
      font-size: 24px;
      color: var(--my-hw-accent-eye);
      line-height: 0;
      animation: blink 5s infinite; /* トップへ戻るボタンの目も瞬きする */
    }
    .back-to-top:hover {
      background: var(--my-hw-accent-eye);
      box-shadow: 0 0 15px rgba(168, 15, 15, 0.6);
    }
    .back-to-top:hover i {
      color: #000;
    }