html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    position: relative;
    z-index: 0;
    background: transparent;
}

/* 固定背景 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: #fff7eb url(../img/back.jpg) repeat;
}

article {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* 各セクションのタイトル画像（センター寄せ） */
#introduction .intro_maintxt > h1,
#arasuji > h1,
#story > h1,
#cast > h1,
#chart > h2 {
    display: flex;
    justify-content: center;
}

/* --- 相関図ポップアップ --- */
#chart .image {
    display: block;
    cursor: zoom-in;
}

#chart .image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    padding: 20px;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.img-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* margin:auto で中央寄せ（はみ出してもスクロールで端まで見られる） */
.img-modal__content {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.img-modal.is-open .img-modal__content {
    transform: scale(1);
}

.img-modal__close {
    position: fixed;
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    background: #e61d84;
    color: #fff;
    border-radius: 50%;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.img-modal__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- 共通フッター --- */
footer {
    font-weight: normal;
}

footer small {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, Arial, sans-serif;
    color: #222;
}


/*=====================================================
  1. PC（基準レイアウト）
=====================================================*/

/* ---------- SNS / バナー ---------- */
#sns {
    width: 70%;
    margin: 0 auto 10rem;
}

.bnrarea {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    margin: 5rem auto;
    text-align: center;
}

.bnrarea img {
    display: inline-block;
    width: 400px;
    height: auto;
    margin: 1rem;
    transition: opacity 0.3s;
    align-items: center;
}

.bnrarea img:hover {
    opacity: 0.8;
}

/* 182ch バナー（HTML側でコメントアウト中。復活させる場合用） */
.bnr_182ch {
    width: 100%;
    margin-bottom: 50px;
    text-align: center;
}

.bnr_182ch img {
    display: inline-block;
    width: 60%;
    margin: 5px 10px;
    transition: opacity 0.3s;
}

.bnr_182ch img:hover {
    opacity: 0.8;
}

/* ---------- INTRODUCTION ---------- */
#introduction {
    box-sizing: border-box;
    width: 90%;
    margin: 5rem auto;
}

#introduction .intro_maintxt > h1 {
    margin: 0 0 30px;
    text-align: center;
}

#introduction .intro_maintxt > h1 img {
    max-width: 90%;
    height: auto;
}

/* 左：画像 ／ 右：テキスト */
#introduction .bgf {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    box-sizing: border-box;
    padding: 50px;
    border-radius: 10px;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

#introduction .bgf .left {
    flex: 0 0 40%;
    max-width: 40%;
}

#introduction .bgf .left img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

#introduction .bgf .right {
    flex: 1;
    min-width: 0;
}

#introduction .bgf .right h3 {
    margin: 0 0 20px;
    color: #e61d84;
    font-family: "sicprintempspetit", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 30px;
    line-height: 1.4;
}

#introduction .bgf .right p {
    margin: 0;
    color: #4d4ebe;
    font-family: "tbudrgothic-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 1.8;
}

/* ---------- ARASUJI ---------- */
#arasuji {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

#arasuji > h1 {
    margin: 0 auto;
}

.arasuji_img {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    border-radius: 10px;
    background: url(../img/bg_ar.png) no-repeat center / cover;
}

#arasuji p {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10rem 3rem;
    color: #fff;
    font-family: "tbudrgothic-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    line-height: 2;
}

/* ---------- STORY ---------- */
#story {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 5rem auto;
    overflow: hidden; /* slick の左右はみ出し対策 */
}

#story .inner {
    padding: 3rem;
    border-radius: 10px;
    background: #ffffffa3;
}

#story > h1 {
    width: 70%;
    margin: 1rem auto;
}

.tab_wrap {
    width: 100%;
    margin: auto;
}

/* 話数の帯（#01 (2026.10.9)） */
#story h1.storynumber {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 70%;
    margin: 1rem auto;
    background: #8182be;
    color: #fff;
    font-family: "sicprintempspetit", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 35px;
}

#story h1.storynumber em {
    font-size: 60px;
    font-style: normal;
}

#story h1.storynumber span {
    margin: 0 1rem;
    font-size: 25px;
}

/* あらすじ本文（罫線のような点線アンダーライン） */
#story section p {
    margin: 2rem auto;
    text-align: left;
    color: #4d4ebe;
    font-family: "tbudrgothic-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    line-height: 2;
    text-decoration: underline dotted #8182be;
    text-underline-offset: 10px;
    width: 70%;
}

/* 放送休止のお知らせ（HTML側でコメントアウト中） */
.notice {
    margin: 3rem auto;
    padding: 3rem;
    background: #8182be;
    color: #fff;
    text-align: center;
    font-family: sans-serif;
    font-weight: 800;
    font-style: normal;
    line-height: 1.8;
}

.notice span {
    font-size: 25px;
}

/* ---------- CHART ---------- */
#chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 5rem auto;
}

#chart > h2 {
    margin: 0 0 1.5rem;
}

/* ---------- CAST ---------- */
.cast_box {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 2rem;
    width: 90%;
    margin: 5rem auto;
}

/* 1人分：画像が上、テキストが下 */
.cast_photobox {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.castphoto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

#cast .castpro {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    padding: 3rem 2rem;
    border-radius: 0 0 10px 10px;
    background: #8182be;
}

/* 役名 */
#cast .castpro h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 0.5rem;
    text-align: center;
    color: #fff;
    font-family: "sicprintempspetit", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 25px;
}

/* キャッチ・演者名 */
#cast .castpro h2 {
    margin: 0;
    padding-bottom: 0.3rem;
    border-bottom: 5px dotted #fff;
    text-align: center;
    color: #fff;
    font-family: "sicprintempspetit", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 20px;
    line-height: 1.8;
}

#cast .castpro p {
    margin: 1rem 0;
    color: #fff;
    font-family: "tbudrgothic-std", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- STAFF ---------- */
#staff {
    box-sizing: border-box;
    width: 90%;
    margin: 5rem auto;
    padding: 2rem;
    border-radius: 10px;
    background: #ffffffa3;
}

.staff_name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

#staff h2 {
    color: #e61d84;
    font-family: "sicprintempspetit", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 30px;
    text-decoration: underline dotted 3px #e61d84;
    text-underline-offset: 15px;
}

#staff p {
    color: #4d4ebe;
    font-family: "tbudrgothic-std", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
}

/* ---------- COPYRIGHT / バナー ---------- */
#copy {
    width: 100%;
    margin: 1rem auto;
    text-align: center;
}

#copy p {
    color: #4d4ebe;
}

.bar {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 3rem auto;
}

.bar img {
    transition: opacity 0.3s;
}

.bar img:hover {
    opacity: 0.8;
}


/*=====================================================
  2. TABLET（768px〜1024px）
  方針：PCと同じ2カラム構成を保ち、余白と文字を一段小さく。
        キャストのみ「写真が左／テキストが右」の横長カード。
=====================================================*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* ---------- セクション幅・余白 ---------- */
    #introduction { width: 90%; margin: 4rem auto; }
    #arasuji      { width: 90%; }
    #story        { width: 90%; margin: 4rem auto; }
    #chart        { width: 90%; margin: 4rem auto; }
    .cast_box     { width: 90%; }
    #staff        { width: 90%; margin: 4rem auto; }

    /* ---------- タイトル画像 ---------- */
    #introduction .intro_maintxt > h1 img { max-width: 70%; }
    #arasuji > h1,
    #story > h1,
    #cast > h1,
    #chart > h2 { width: 80%; margin: auto }
    #arasuji > h1 img,
    #story > h1 img,
    #cast > h1 img,
    #chart > h2 img { width: 100%; }

    /* ---------- SNS / バナー ---------- */
    #sns {
        width: 90%;
        margin-bottom: 6rem;
    }

    .bnrarea {
        gap: 1rem;
        margin: 3rem auto;
    }

    .bnrarea a {
        display: block;
        width: 44%;
    }

    .bnrarea img {
        display: block;
        width: 100%;
        margin: 0;
    }

    .bnr_182ch img { width: 400px; }

    /* ---------- INTRODUCTION ---------- */
    #introduction .intro_maintxt > h1{
        margin: 0;
    }
    #introduction .bgf {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        padding: 5rem;
        background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
    }

    #introduction .bgf .left {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    #introduction .bgf .right h3 {
        margin-bottom: 15px;
        font-size: 28px;
    }

    #introduction .bgf .right p {
        font-size: 18px;
        line-height: 1.8;
    }

    /* ---------- ARASUJI ---------- */
    #arasuji p {
        padding: 5rem;
        font-size: 18px;
    }

    /* ---------- STORY ---------- */
    #story .inner { padding: 3rem 2rem; }

    #story h1.storynumber em { font-size: 48px; }
    #story h1.storynumber span { font-size: 22px; }

    #story section p {
        font-size: 18px;
        line-height: 1.9;
        text-underline-offset: 8px;
    }

    .notice { padding: 2rem; }
    .notice span { font-size: 22px; }

    /* ---------- CAST：横長カード ---------- */
    .cast_box {
        flex-direction: column;
        gap: 2rem;
        margin: 0 auto;
    }

    .cast_photobox {
        flex: none;
        flex-direction: row;
    }

    .castphoto {
        position: relative;
        flex: 0 0 36%;
        min-height: 260px;
    }

    /* テキストが長くても写真が隙間なく埋まるように cover */
    .castphoto img {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: cover;
        border-radius: 10px 0 0 10px;
    }

    #cast .castpro {
        align-items: flex-start;
        padding: 3rem;
        border-radius: 0 10px 10px 0;
    }

    #cast .castpro h1 {
        justify-content: flex-start;
        text-align: left;
        font-size: 28px;
    }

    #cast .castpro h2 {
        text-align: left;
        font-size: 18px;
        border-bottom-width: 4px;
    }

    #cast .castpro p { font-size: 16px; }

    /* ---------- STAFF ---------- */
    #staff { padding: 2rem; }
    #staff h2 { font-size: 26px; text-underline-offset: 12px; }
    #staff p  { font-size: 18px; }
}


/*=====================================================
  3. SMARTPHONE（767px以下）
  方針：PCと同じ色・フォント・角丸で、1カラムに積む。
=====================================================*/
@media only screen and (max-width: 767px) {

    /* ---------- セクション幅・余白 ---------- */
    #introduction { width: 100%; margin: 3rem auto; }
    #arasuji      { width: 100%; }
    #story        { width: 90%; margin: 3rem auto; }
    #chart        { width: 90%; margin: 3rem auto; }
    .cast_box     { width: 90%; }
    #staff        { width: 90%; margin: 3rem auto; }

    /* ---------- タイトル画像 ---------- */
    #introduction .intro_maintxt > h1 { margin-bottom: 1rem; }
    #introduction .intro_maintxt > h1 img { max-width: 90%; }
    #arasuji > h1,
    #story > h1,
    #cast > h1,
    #chart > h2 {
        width: 90%;
        margin: auto;
    }
    #arasuji > h1 img,
    #story > h1 img,
    #cast > h1 img,
    #chart > h2 img { width: 100%; }

    /* ---------- SNS / バナー ---------- */
    #sns {
        width: 92%;
        margin-bottom: 4rem;
    }

    .bnrarea {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 2rem auto;
    }

    .bnrarea a {
        display: block;
        width: 90%;
    }

    .bnrarea img {
        display: block;
        width: 100%;
        margin: 0;
    }

    .bnr_182ch img { width: 90%; }

    /* ---------- INTRODUCTION：縦積み ---------- */
    #introduction .bgf {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem;
        background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
        border-radius: 0;
    }

    #introduction .bgf .left {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    #introduction .bgf .right h3 {
        margin-bottom: 12px;
        font-size: 20px;
        line-height: 1.5;
    }

    #introduction .bgf .right p {
        font-size: 15px;
        line-height: 1.8;
    }

    /* ---------- ARASUJI ---------- */
    #arasuji > h1 { margin: 0 auto 0.75rem; }

    #arasuji p {
        padding: 4rem 3rem;
        font-size: 15px;
    }

    .arasuji_img {
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        width: 100%;
        border-radius: 0;
    }

    /* ---------- STORY ---------- */
    #story > h1 { margin: 0.5rem auto; }

    #story .inner { padding: 2rem; }

    #story h1.storynumber {
        width: 100%;
        margin: 0.5rem 0;
    }

    #story h1.storynumber em   { font-size: 34px; }
    #story h1.storynumber span { margin: 0 0.5rem; font-size: 15px; }

    #story section p {
        margin: 1rem auto;
        font-size: 15px;
        line-height: 2.2;
        text-underline-offset: 6px;
        width: 100%;
    }

    .notice {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 1.5rem auto;
        padding: 1rem;
        font-size: 14px;
    }

    .notice span { font-size: 18px; }

    /* ---------- CHART ---------- */
    #chart > h2 { margin-bottom: 1rem; }

    #chart .image {
        position: relative;
        width: 100%;
    }

    #chart .image img {
        width: 100%;
        border-radius: 10px;
    }

    /* ポップアップ：画像を大きく出して、指でスクロール／ピンチして読む */
    .img-modal {
        padding: 12px;
        overflow: auto;
        touch-action: pan-x pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

    .img-modal__content {
        flex: none;
        width: 100%;
        max-width: none;
        max-height: none;
    }

    /* 閉じるボタン*/
    .img-modal__close {
        top: 100px;
        right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e61d84;
    }

    /* ---------- CAST：縦積みカード ---------- */
    .cast_box {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        margin: 1.5rem auto 3rem;
    }

    .cast_photobox { flex: none; }

    #cast .castpro { padding: 2rem 1rem; }

    #cast .castpro h1 { font-size: 22px; }

    #cast .castpro h2 {
        font-size: 18px;
        border-bottom-width: 3px;
    }

    #cast .castpro p {
        margin: 1rem 0;
        text-align: left;
        font-size: 15px;
    }

    /* ---------- STAFF ---------- */
    #staff { padding: 1.25rem 1rem; }

    .staff_name { gap: 1rem; }

    #staff h2 {
        font-size: 20px;
        text-align: center;
        text-underline-offset: 8px;
    }

    #staff p {
        text-align: center;
        font-size: 15px;
    }

    /* ---------- COPYRIGHT / バナー ---------- */
    #copy p { font-size: 12px; }

    .bar { width: 90%; }
    .bar img { max-width: 100%; }
}