@charset "utf-8";

:root {
    --themeColor: #333;
    --gray: #999;
}

/*-------------------------*/
html {
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: scroll;
}

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--themeColor) url("../img/bg.webp") repeat;
    background-size: 250px;
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
table,
a,
img,
dl,
dt,
dd,
ul,
li,
ol,
iframe,
nav,
small {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
    background: transparent;
    vertical-align: baseline;
    border: none;
}

img {
    vertical-align: top;
}

ol,
ul {
    list-style: none;
    list-style-type: none;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

a:hover {
    color: #f00;
    text-decoration: none;
}

.onlyPc {}

.onlySp {
    display: none;
}

.KsoR {
    font-family: kokuryu, sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*-------------------------*/
header {
    background: white;
    height: 95px;
}

#wrapper {
    background: rgb(0 0 0 / 80%);
    color: white;
    font-family: Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "sans-serif";
    margin: 0 auto;
    width: 1300px;
}

#sns_button_pc {
    margin: 15px auto;
    height: 50px;
    text-align: center;
}

#sns_button_pc .btn_sns img {
    height: 50px;
    width: 50px;
    margin: 0 5px;
}

/*-- Pan_box ----------------------*/
#pan_box {
    background: black;
    color: white;
    font-size: 0.8em;
    padding: 8px 0 8px 10px;
    width: 100%;
}

#pan_box .in {
    margin: 0 auto;
    width: 1260px;
}

#pan_box a {
    color: white;
    text-decoration: none;
}

#pan_box a:hover {
    opacity: 0.8;
}

/*-- left side ----------------------*/
#left_box {
    float: left;
    padding-bottom: 30px;
    text-align: center;
    width: 960px;
}

#main {
    overflow: hidden;
}

.inbox {
    line-height: 1.8em;
    margin: 0 auto 20px;
    width: 90%;
}

/*-- Contents all ----------------------*/
#contents {
    line-height: 1.6em;
    float: left;
    padding: 0 0 0 2%;
    width: 98%;
}

#contents h2 {
    color: white;
    font-family: kokuryu, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.6em;
    line-height: 1.0em;
    padding: 0 0 20px 20px;
    text-shadow: 2px 2px 3px rgb(0 0 0);
}

.gradation {
    position: relative;
}

.gradation::before {
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 95%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 95%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 95%, rgba(0, 0, 0, 1) 100%);
    content: "";
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 10;
}

.sliderOut {
    width: 65%;
}

.slick-slide img {
    width: 100% !important;
}

#ttl {
    background: #0f0b0d;
    height: 460px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#ttl .logo {
    position: absolute;
    right: 60px;
    top: 40px;
    width: 320px;
    z-index: 15;
}

#ttl .logo img {
    width: 100%;
    filter: drop-shadow(0px 0px 6px black);
}

#ttl .time {
    color: #f50000;
    font-family: 'kokuryu';
    font-size: 3.5em;
    line-height: 0.8;
    letter-spacing: -6px;
    text-align: center;
    right: 36px;
    bottom: 40px;
    position: absolute;
    text-shadow: 0 0 5px black, 0 0 5px black, 0 0 5px black, 0 0 5px black;
    width: 400px;
    z-index: 15;
}

#ttl .time p {
    display: inline;
    font-size: 75%;
    letter-spacing: 0px;
}

#ttl .time span {
    font-size: 75%;
}

#ttl .time small {
    font-size: 0.5em;
    letter-spacing: 0.1em;
}

.#ttl .tEnd {
    font-size: 65%;
    letter-spacing: -10px;
    line-height: 0.9;
}

#episode,
#intro,
#cast {
    background: black;
    margin: 30px 0;
    overflow: hidden;
    padding: 40px 0;
}

#episode {
    background: url("../img/bg01.webp") top center / 100%;
    min-height: 450px;
    background-size: cover;
}

#intro {
    background: url("../img/bg01.webp") top center / 100%;
    background-size: cover;
}

#cast {
    background: url("../img/bg01.webp") top center / 100%;
    background-size: cover;
}

#intro h2 {
    letter-spacing: -0.1em;
}

#episode ol {
    display: block;
    margin: 4% 2% 0;
    overflow: hidden;
    width: 100%;
}

#episode ol li {
    color: white;
    font-size: 0.9em;
    float: left;
    margin: 0 0.5% 5px;
    padding: 3px 0;
    text-align: center;
    text-decoration: none;
    width: 9%;
}

#episode ol li a {
    display: block;
}

#episode ol li a.epiBtnOn {
    background: #910111;
    color: #fff;
}

#episode ol li a.epiBtnOff {
    background: var(--gray);
    color: #111;
}

#episode ol li a:hover {
    color: white;
    text-decoration: none;
}

#episode .oadate {
    font-size: 1.4em;
    line-height: 1.5em;
    margin: 0 auto;
    width: 100%;
}

#episode h3 {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0 auto 16px;
    padding: 0 !important;
    width: 100%;
}

/*-- SNS ----------------------*/
.sns {
    width: 30%;
    height: 40px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sns a {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 !important;
}

.sns img {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}

/*-- エムキャス ----------------------*/
.mcas {
    width: 280px;
    margin: 0 auto;
}

.mcas img {
    width: 100%;
}

.mcas_sns_box {
    margin: 10px 0 0 0;
}

/*-- Copyright  -------------------*/
.copy {
    color: white;
    font-size: 0.9em;
    line-height: 1.4em;
    padding: 0 0 4%;
    text-align: center;
}

/*-- footer/PC  -----------------
footer{background: #333;clear: both;font-size: 0.9em;line-height: 1.5em;margin-top: 30px;text-align: center;}
footer .mx_copyright{color:white;padding: 8px 0;}
footer .mx_copyright a{color:white;text-decoration:underline;}
footer a{color: #d00;text-decoration: none;}
--*/

/*-- 緊急テキスト ----------------------*/
#rp_textbox {
    background: rgba(255, 255, 255, 0.7);
    border: #928484 solid 1px;
    font-size: 0.9em;
    margin: 20px auto;
    padding: 8px;
    line-height: 1.6em;
    text-align: left;
    max-width: 960px;
    width: 90%;
}

#rp_textbox .pop_text {
    background: white;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: #c9c9c9 solid 1px;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    max-width: 900px;
    word-break: break-all;
    width: 75%;
}

#rp_textbox .pop_text .popup_title {
    border-bottom: var(--gray) dotted 1px;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: bold;
    margin: 0 0 15px 0;
    padding-bottom: 5px;
    text-align: center;
    width: 100%;
}

#rp_textbox .ema_img {
    display: block;
    text-align: center;
    width: 100%;
}

#rp_textbox .ema_img img {
    margin: 0 auto 10px;
    max-width: 100%;
}

#rp_textbox a {
    color: #d00;
    text-decoration: underline;
}

/*-- google翻訳 -------------------
.skiptranslate.goog-te-gadget,a.goog-logo-link{color:white !important;}---*/

/*-- ローディング ----------------------*/
#loader {
    background-color: black;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
}

/*背景*/
.loader,
.loader:before,
.loader:after {
    background: #aaa;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    height: 4em;
    width: 1em;
    top: 50%;
}

.loader {
    color: #ccc;
    text-indent: -9999em;
    margin: auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader:before,
.loader:after {
    position: absolute;
    top: 0;
    content: '';
}

.loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 1.5em;
}

@-webkit-keyframes load1 {

    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

@keyframes load1 {

    0%,
    80%,
    100% {
        box-shadow: 0 0;
        height: 4em;
    }

    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}