@charset "UTF-8";
/*
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: 'Zen Maru Gothic','Varela Round', 'ヒラギノ角ゴシック','Hiragino Sans','Menlo','メイリオ', Meiryo ,sans-serif;
    font-weight: 500;
}
    */
hr{
    margin: 24px auto;
    height: 6px;
    background-color: var(--sub);
    filter: opacity(.4);
}
.story_main{
    font-family: "Kiwi Maru";
    max-width: 750px;
    margin: 24px auto;
}
.story_main h1{
    font-family: 'Zen Maru Gothic','Varela Round', 'ヒラギノ角ゴシック','Hiragino Sans','Menlo','メイリオ', Meiryo ,sans-serif;
    font-weight: 500;
    text-align: center;
    position: relative;
}
.story_main h1::after{
    content: '⭐️';
    background-color: var(--sub);
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(0,0,0,0);
    font-size: 1.5rem;
    padding-bottom: .5em;
    display: block;
    filter: opacity(.7);
}
/*------------------------------------------------------------*/
.episode_wrap{
    display: grid;
    grid-template-columns: 45fr 55fr;
    grid-template-rows: auto;
    gap: 16px;
    border: var(--border);
    border-radius: var(--br);
    padding: 16px;
}
.episode_wrap .img{
    object-fit: cover;
    width: 100%;
    border: var(--sub) .5px solid;
    border-radius: var(--br_small);
}
@media screen and (max-width: 550px){
    .episode_wrap{
        grid-template-columns: 1fr;
    }
    .episode_wrap .img{
        margin: auto;
    }
}
.episode_wrap .inner{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;

}
.episode_wrap .ttl{
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
}
.episode_wrap .ttl::before,
.episode_wrap .ttl::after{
    content: '｢ ';
    font-family: sans-serif;
    color: var(--sub);
    font-weight: bold;
}
.episode_wrap .ttl::after{
    content: ' ｣';
}
.episode_wrap .caption{

}
.episode_wrap .info{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.episode_wrap .info span{
    font-size: 1.35rem;
    padding: .05em .5em;
    color: var(--textL);
    border: 1px solid var(--subDX);
    border-radius: var(--br_small);
}
.episode_wrap .item_inlineList{
    padding-left: 4px;
}

.episode_wrap .chara_wrap span{
    display: inline-block;
    position: relative;
    margin: 4px;
    border-radius: 10px;
    color: var(--textL);
    font-size: 1.35rem;
    line-height: 30px;
}
.episode_wrap .chara_wrap span::before{
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('img/icon_hoshi.png');
    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
    transform: translateY(6px);
    margin-right: 4px;
}
.episode_wrap .chara_wrap span.c01::before{background-image: url('../img/icon_hoshi.png');}
.episode_wrap .chara_wrap span.c02::before{background-image: url('../img/icon_kakera.png');}
.episode_wrap .chara_wrap span.c03::before{ background-image:url('../img/icon_rinne.png');}
.episode_wrap .chara_wrap span.c04::before{background-image: url('../img/icon_point.png');}
.episode_wrap .chara_wrap span.c05::before{background-image: url('../img/icon_haru.png');}
.episode_wrap .chara_wrap span.c06::before{background-image: url('../img/icon_rizumika.png');}

a.story_link{
    text-decoration: none;
}
a.story_link:hover .episode_wrap{
    background-color: rgba(180, 180, 180, .05);
}