@charset "UTF-8";

:root {    
    --gap_70px: clamp(50px, 8vw, 70px);
    --gap_90px: clamp(30px, 7vw, 90px);
    --gap_110px: clamp(50px, 9vw, 110px);
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

.page_wrap {
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-feature-settings: "palt" 1;
    letter-spacing: .05em;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.page_wrap * {
    margin: 0;
    padding: 0;
}

.page_wrap img {
    max-width: 100%;
}

.page_wrap ul,
.page_wrap ol {
    list-style: none;
}

.page_wrap a{
    text-decoration: none;
    color: #fff;
}

.ib {
    font-style: normal;
    display: inline-block;
}

.page_wrap h2 {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.page_wrap h2 img {
    width: clamp(55%, 25vw, 70%);
}

.page_wrap h3 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: .1em;
    font-size: clamp(13px, 2.5vw, 20px);
    margin: 7% 0 10% 0;
}

.bg_black {
    background-image: linear-gradient(180deg, rgba(46, 45, 45, 1), rgba(30, 30, 30, 1) 50%, rgba(13, 13, 13, 1));
    padding: var(--gap_70px) 7.5%;
}

.bg_img {
    padding: var(--gap_70px) 7.5%;
}

/* =========================================
    　　　　　　　　背景
============================================*/

.page_wrap::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("/horror_2025/images/bg_sp.jpg") center/cover no-repeat;
    z-index:-1;
}

/* =========================================
　　　　　　メインビジュアル（mainimg）
============================================*/

.mainimg {
    content: "";
    display: block;
    background: url(/horror_2025/images/main_bg_sp.jpg) no-repeat center center / 100%;
    aspect-ratio: 768 / 800;
    position: relative;
}

.mainimg h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    z-index: 999;
    filter: blur(10px);
    animation-name: blur;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes blur {
    0% {
        filter: blur(10px);
    }
    100% {
        filter: blur(0);
    }
}

/* =========================================
　　　　　　ナビゲーション（navigation）
============================================*/

.navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
}

.navigation ul li:first-of-type,
.navigation ul li:nth-of-type(3) {
    width: 30%;
}

.navigation ul li:nth-of-type(2) {
    width: 39%;
}

.navigation ul li:nth-of-type(4),
.navigation ul li:last-of-type {
    width: 49.75%;
}

.navigation ul li a {
    font-size: clamp(14px, 3vw, 24px);
    background-image: linear-gradient(180deg, rgba(201, 23, 30, 1), rgba(134, 0, 0, 1));
    padding: 3% 2%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3em;
    letter-spacing: .1em;
}

/* =========================================
    　　　　　　イントロ（intro）
============================================*/

.intro {
    color: #c9171e;
    font-size: clamp(14px, 3vw, 24px);
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    letter-spacing: -.05em;
}

/* .intro p {
    margin-bottom: 7%;
} */

.intro span {
    font-size: clamp(18px, 4vw, 30px);
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
}

/* =========================================
    　　　　　　注目の番組（program）
============================================*/

.program_wrap_2 dl:not(:last-of-type) {
    margin-bottom: 10%;
}

.program dl dt,
.program dl dd {
    font-size: clamp(12px, 3vw, 18px);
}

.program dl dt {
    margin-bottom: 3%;
    letter-spacing: .1em;
}

.program dl dt h4 {
    font-family: "Noto Serif JP", serif;
    font-size: clamp(18px, 4vw, 30px);
    margin-bottom: 1%;
    font-weight: 600;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.program dl dt span {
    font-size: clamp(18px, 4vw, 30px);
}

.program_wrap_2 .program_hiroshi dt span {
    font-size: clamp(16px, 4vw, 30px);
}

.program dl dt small {
    font-size: clamp(12px, 3vw, 14px);
}

.program dl dd {
    text-align: left;
    line-height: 1.8em;
}

.program dl dt ul {
    display: flex;
    justify-content: space-around;
}

.program dl dt ul li {
    display: contents;
}

.program dl dt i {
    font-style: normal;
    font-size: clamp(16px, 4vw, 26px);
}


.program_tver {
    background-image: linear-gradient(180deg, rgba(0, 213, 236, 1), rgba(0, 106, 187, 1));    display: flex;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    width: 40%;
    margin: 3% auto 0 auto;
    padding: 2%;
    font-size: clamp(12px, 3vw, 18px);
    font-weight: 600;
}

.program_tver em {
    background: url(/horror_2025/images/program_tver.png) no-repeat center center / 100%;
    aspect-ratio: 19 / 19;
    display: inline-block;  
    width: 1em;
    height: 1em;
    margin-left: 3%;
}

.program_yt {
    background-image: linear-gradient(180deg, rgba(201, 23, 30, 1), rgba(134, 0, 0, 1));
    display: flex;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    width: 40%;
    margin: 3% auto 0 auto;
    padding: 2%;
    font-size: clamp(12px, 3vw, 18px);
    font-weight: 600;
}

.program_yt em {
    background: url(/horror_2025/images/program_yt.png) no-repeat center center / 100%;
    aspect-ratio: 19 / 19;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 3%;
}

.program_link img {
    box-shadow: 0px 0px 5px 2px rgba(222, 222, 222, .3);
}

.program_hatsumimi {
    margin: 0 auto 10% auto;
}

.program_hiroshi dt div {
    text-align: left;
    /* margin: 0 auto;
    width: fit-content; */
}

.program_hiroshi ol {
    display: flex;
    justify-content: center;
    width: 100%;
}

.program_hiroshi ol li:first-of-type {
    margin-right: 3%;
}


/* =========================================
    　　　　　　Tver無料配信（tver）
============================================*/

.tver p:first-of-type {
    margin-bottom: 5%;
}

.tver a {
    display: inline-block;
    box-shadow: 0px 0px 5px 2px rgba(222, 222, 222, .2);
}

.tver picture {
    display: flex;
}

/* =========================================
    　　　　　　　イベント（event）
============================================*/

.event dl:not(:last-of-type) {
    margin-bottom: 10%;
}

.event dl dt,
.event dl dd {
    font-size: clamp(12px, 3vw, 18px);
}

.event dl dt {
    margin-bottom: 3%;
    font-weight: 600;
    letter-spacing: .1em;
}

.event dl dt a img {
    box-shadow: 0px 0px 5px 2px rgba(222, 222, 222, .2);
}

.event dl dt h4 {
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: clamp(18px, 4vw, 30px);
    margin-bottom: 1%;
}

.event dl dt span {
    font-size: clamp(18px, 4vw, 30px);
    font-weight: 400;
}

.event dl dd {
    text-align: left;
    line-height: 1.8em;
}

/* =========================================
    　　　　　　　関連記事（report）
============================================*/

.tvo-report-article {
    text-align: left;
}

.tvo-report-article:not(:last-of-type) {
    margin-bottom: 10%;
}

.tvo-report-time {
    font-size: clamp(14px, 3vw, 22px);
    font-weight: 600;
    display: block;
    margin: 1% 0;
}

.tvo-report-title {
    font-size: clamp(12px, 3vw, 18px);
}

.report_btn {
    width: 80%;
    margin: 10% auto 0 auto;
}

.report_btn a {
    background-image: linear-gradient(180deg, rgba(201, 23, 30, 1), rgba(134, 0, 0, 1));
    box-shadow: 0px 0px 5px 2px rgba(222, 222, 222, .2);
    font-size: clamp(14px, 3vw, 18px);
    display: block;
    padding: 4% 2%;
    border-radius: 5px;
}

/* =========================================
    　　　　　　　関連書籍（book）
============================================*/

.book small {
    font-size: clamp(8px, 2vw, 14px);
    text-align: left;
    display: block;
    margin-top: 5%;
}

.book_wrap div {
    background-color: #fff;
    padding: 7.5%;
    box-sizing: border-box;
}

.book_wrap div:first-of-type {
    margin-bottom: 10%;
}

.book_wrap div p {
    width: 50%;
    margin: 0 auto;
}

.book_wrap div dl {
    color: #000;
    text-align: left;
    margin-top: 2%;
}

.book_wrap div dl dt {
    font-size: clamp(18px, 4vw, 26px);
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    margin-bottom: 1%;
    letter-spacing: .1em;
}

.book_wrap div dl dd {
    font-size: clamp(12px, 3vw, 18px);
}

.book_wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5%;
}

.book_wrap ul li {
    width: 48%;
    box-sizing: border-box;

}

.book_wrap ul li a {
    background-image: linear-gradient(180deg, rgba(201, 23, 30, 1), rgba(134, 0, 0, 1));
    padding: 6% 2%;
    display: block;
    border-radius: 5px;
    font-size: clamp(14px, 3vw, 18px);
    font-weight: 700;
    box-shadow: 2px 2px 5px 0px rgba(9, 1, 3, 0.4);
}

/* =========================================
    　　　　　　トップボタン（page-top）
============================================*/

#page-top {
    position: fixed;
    bottom: clamp(8px, 2vw, 16px);
    right: clamp(8px, 2vw, 16px);
    width: 15%;
    aspect-ratio: 125 / 125;
    background: url(/horror_2025/images/top_btn.png) no-repeat center / 100%;
    z-index: 1010;
}

/* =========================================
    　　　　　フェードイン（fade）
============================================*/

.fade {
	transition: all 1500ms;
	opacity: 0;
	visibility: hidden;
	transform: translate(0px, 50px);
}
.fadein {
	opacity: 1;
	visibility: visible;
	transform: translate(0px, 0px);
}

/* =========================================
    　　　　　　初耳EXPOバナー
============================================*/

.hatsumimi_bnr a {
    display: flex;
}

.hatsumimi_bnr img {
    box-shadow: 0px 0px 5px 2px rgba(222, 222, 222, .2);
}

.program .hatsumimi_bnr {
    margin: 0 auto clamp(40px, 6vw, 70px) auto;
}




/* =======================================================
　　↓ 初耳・行方不明バナー追従（bnr_fixed）ここから ↓
=========================================================*/

/* ----------sp--------- */

#bnr_fixed {
    position: fixed;
    left: clamp(8px, 2vw, 16px);
	bottom: clamp(8px, 2vw, 16px);
    z-index: 1010;
    text-align: left;
}

#bnr_fixed a {
	display: block;
}

#bnr_fixed a:first-of-type {
    margin-bottom: 4%;
}

#bnr_fixed a img {
    width: clamp(120px, 15vw, 300px);
    left: clamp(8px, 2vw, 16px);
    bottom: clamp(8px, 2vw, 16px);
    box-shadow: 0px 0px 5px 2px rgba(222, 222, 222, .2);
}

/* --×ボタン-- */
#bnr_fixed i {
	font-size: 1.4em;
	color: #fff;
	text-shadow: 0 0 0.2em #000,0 0 0.3em #000;
	display: inline-block;
	cursor: pointer;
	position: relative;
	z-index: 999;
    margin-bottom: 6%;
}

.hidden {
	display: none !important;
}

/* ----------pc--------- */
@media screen and (min-width: 768px) {

    #bnr_fixed a,
    #bnr_fixed i {
        transition-duration: .2s;
    }

    #bnr_fixed a:hover,
    #bnr_fixed i:hover {
        opacity: .7;
    }

}


/* --スマホフッター広告削除-- */
footer.tvo-footer {
	position: relative;
    z-index: 1000;
}
.tvo-footer_sp_ad {
	display: none !important;
}

@media only screen and (max-width: 767px) {
    footer.tvo-footer.sp_ad_pad {
        padding-bottom: 0 !important;
    }
}


/* =======================================================
　　↑ 初耳・行方不明バナー追従（bnr_fixed）ここまで ↑
=========================================================*/



/* -----pc---- */
@media screen and (min-width: 768px) {


.bg_img {
    padding: var(--gap_90px) 5%;
    max-width: 1300px;
    margin: 0 auto;
}

.bg_black {
    padding: var(--gap_90px) 5%;
}

.bg_black_wrap {
    max-width: 1300px;
    margin: 0 auto;
}

.page_wrap h2 img {
    width: 100%;
}

.page_wrap h3 {
    font-size: clamp(16px, 2vw, 20px);
    margin: 5% 0 6% 0;
}


/* =========================================
    　　　　　　　　背景
============================================*/

.page_wrap::before {
    background: url("/horror_2025/images/bg_pc.jpg") center/cover no-repeat;
}

/* =========================================
　　　　　　メインビジュアル（mainimg）
============================================*/

.mainimg {
    background: url(/horror_2025/images/main_bg_pc.jpg) no-repeat center center / 100%;
    aspect-ratio: 1920 / 800;
}

.mainimg h1 {
    width: 70%;
}

/* =========================================
    　　　　　　ナビゲーション
============================================*/

.navigation {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

.navigation ul {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navigation ul li:first-of-type,
.navigation ul li:nth-of-type(2),
.navigation ul li:nth-of-type(3),
.navigation ul li:nth-of-type(4),
.navigation ul li:last-of-type {
    width: 19.9%;
}

.navigation ul li a {
    font-size: clamp(18px, 1.5vw, 20px);
    padding: 6% 2%;
    height: 3.3em;
    transition-duration: .2s;
}

.navigation ul li a:hover {
    opacity: .7;
}

/* =========================================
    　　　　　　イントロ（intro）
============================================*/

.intro {
    font-size: clamp(22px, 2vw, 26px);
    letter-spacing: unset;
    padding-top: var(--gap_110px);
}

/* .intro p {
    margin-bottom: 4%;
} */

.intro span {
    font-size: clamp(28px, 3vw, 36px);
}

/* =========================================
    　　　　　　注目の番組（program）
============================================*/

.program dl dt h4,
.program dl dt span {
    font-size: clamp(20px, 2.5vw, 28px);
}

.program_wrap_2 .program_hiroshi dt span {
    font-size: clamp(16px, 2vw, 28px);
}

.program_wrap_2 .program_hiroshi dt {
    font-size: clamp(12px, 1.5vw, 16px);
}

.program dl dt,
.program dl dd {
    font-size: clamp(14px, 1.5vw, 16px);
}

.program dl dt i {
    font-size: clamp(16px, 2vw, 24px);
}

.program_wrap_2 {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.program_wrap_2 dl {
    width: 48%;
}

.program_wrap_2 dl:not(:last-of-type) {
    margin-bottom: 0;
}

.program_wrap_2 dl:first-of-type,
.program_wrap_2 dl:nth-of-type(2),
.program_wrap_2 dl:nth-of-type(3),
.program_wrap_2 dl:nth-of-type(4),
.program_wrap_2 dl:nth-of-type(5),
.program_wrap_2 dl:nth-of-type(6) {
    margin-bottom: clamp(40px, 5vw, 70px);
}

.program_hatsumimi {
    width: 70%;
    margin: 0 auto clamp(45px, 5vw, 90px) auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.program_hatsumimi dt img {
    width: 100%;
}

.program_link,
.program_tver,
.program_yt {
    transition-duration: .2s;
}

.program_link:hover,
.program_tver:hover,
.program_yt:hover {
    opacity: .7;
}

.program_tver::after {
    font-size: clamp(10px, 1.5vw, 18px);
}

.program_link img {
    box-shadow: 0px 0px 10px 3px rgba(222, 222, 222, .2);
}

.program_hiroshi ol li:first-of-type {
    margin-right: 5%;
}

/* =========================================
    　　　　　　Tver無料配信（tver）
============================================*/

.tver p:first-of-type {
    margin-bottom: 4%;
}

.tver p a {
    transition-duration: .2s;
    box-shadow: 0px 0px 10px 3px rgba(222, 222, 222, .2);
}

.tver p a:hover {
    opacity: .7;
}

/* =========================================
    　　　　　　　イベント（event）
============================================*/

.event div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.event dl {
    width: 48%;
}
.event dl:not(:last-of-type) {
    margin-bottom: 0;
}

.event dl dt a {
    transition-duration: .2s;
}

.event dl dt a img {
    box-shadow: 0px 0px 10px 3px rgba(222, 222, 222, .2);
}

.event dl dt a:hover {
    opacity: .7;
}

.event dl dt h4,
.event dl dt span {
    font-size: clamp(20px, 2.5vw, 28px);
}

.event dl dt,
.event dl dd {
    font-size: clamp(14px, 1.5vw, 16px);
}

/* =========================================
    　　　　　　　関連記事（report）
============================================*/

.tvo-report {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tvo-report-article {
    width: 32%;
}

.tvo-report-article:not(:last-of-type) {
    margin-bottom: 0;
}

.tvo-report-time {
    font-size: clamp(14px, 2vw, 22px);
}

.tvo-report-title {
    font-size: clamp(12px, 1.5vw, 16px);
}

.tvo-report-link {
    transition-duration: .2s;
}
.tvo-report-link:hover {
    opacity: .7;
}

.report_btn {
    margin: 5% auto 0 auto;
    max-width: 600px;
}

.report_btn a {
    box-shadow: 0px 0px 10px 3px rgba(222, 222, 222, .2);
    font-size: clamp(16px, 3vw, 22px);
    transition-duration: .2s;
}

.report_btn a:hover {
    opacity: .7;
}

/* =========================================
    　　　　　　　関連書籍（book）
============================================*/

.book_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.book_wrap div {
    width: 48%;
    padding: 3%;
}

.book_wrap div:first-of-type {
    margin-bottom: 0;
}

.book_wrap div ol {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.book_wrap div dl {
    margin-top: 4%;
}

.book_wrap div dl dt {
    font-size: clamp(20px, 2.5vw, 28px);
}

.book_wrap div dl dd {
    font-size: clamp(14px, 1.5vw, 16px);
}

.book_wrap div ul li a {
    padding: 8% 2%;
    transition-duration: .2s;
}

.book_wrap div ul li a:hover {
    opacity: .7;
}

.book small {
    font-size: clamp(10px, 1vw, 14px);
    margin-top: 2%;
}

/* =========================================
    　　　　　　トップボタン（page-top）
============================================*/

#page-top {
    width: 6.5%;
    min-width: 100px;
    transition-duration: .2s;
}

#page-top:hover {
    opacity: .7;
}


/* =========================================
    　　　　　　初耳EXPOバナー
============================================*/

.hatsumimi_bnr {
    box-shadow: 0px 0px 10px 3px rgba(222, 222, 222, .2);
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    transition-duration: .2s;
}

.hatsumimi_bnr a:hover {
    opacity: .7;
}

.program .hatsumimi_bnr {
    margin: 0 auto clamp(40px, 6vw, 80px) auto;
}


}


@media screen and (min-width: 834px) {

    .program_hatsumimi {
        width: 100%;
    }

    .program .program_hatsumimi>dt {
        width: 53%;
        margin-bottom: 0;
    }
    
    .program_hatsumimi div {
        width: 45%;
    }

}