@charset "UTF-8";

/* ---------------------------------------------
	スペシャルキャスター
--------------------------------------------- */
h4{
    font-size: 140%;
    font-weight: bold;
    color: #fff;
    background-color: #037d8b;
    line-height: 1.2;
    padding: 0.1em 0.4em;
    margin: 2.4em auto 1em;
    max-width: 840px;
}
.spCaster__photo,
.song__photo{
    height: 600px;
    text-align: center;
    background-color: #037d8b33;
    margin-bottom: 3em;
}
.spCaster__photo img,
.song__photo img{
    width: auto; height: 100%;
}
@media screen and (max-width: 1040px){
    .song__photo{ width: 100%; height: auto;}
    .song__photo img{
        width: 100%; height: auto;
    }
}
@media screen and (max-width: 768px){
    .spCaster__photo{
        width: 100%;
        height: auto;
    }
    .spCaster__photo img{ width: 100%; height: auto;}
}
.spCaster__txt{
    line-height: 2.2em;
    margin: 0 auto 2em;
    max-width: 840px;
}
.spCaster__txt a{ color: #eb4e19;}
.cx_displaydevice .spCaster__txt a:hover{ text-decoration: underline;}
.spCaster__question{
    line-height: 1.6;
    font-weight: bold;
    color: #eb4e19;
    margin: 0 auto 0.6em;
    max-width: 840px;
}


.spCaster{ margin-bottom: 6em;}
.spCaster a{ display: block;}
.spCaster__bnr{
    background-color: #fff;
    position: relative;
    border-left: solid 2em #00308e;
    border-right: solid 2em #bf0000;
    box-shadow: 1px 1px 1.6em #9baed38f;
    padding: 1em 6em;
    display: flex;
    flex-wrap: wrap;
}
.spCaster__bnr::before,
.spCaster__bnr::after{
    content: "";
    display: block;
    width: 2em;
    height: 100%;
    position: absolute;
    top: 0;
    left: 2em;
    background-color: #bf0000;
}
.spCaster__bnr::after{
    left: auto; right: 2em;
    background-color: #00308e;
}
@media screen and (max-width: 1200px){
    .spCaster__bnr{
        border-width: 1vw;
        padding: 1em 3vw;
    }
    .spCaster__bnr::before,
    .spCaster__bnr::after{ width: 1vw; left: 1vw;}
    .spCaster__bnr::after{ left: auto; right: 1vw;}
}
.spCaster__bnr__photo{
    width: 34%;
    height: auto;
    margin-right: 1em;
}
.spCaster__bnr__photo img{ width: 100%; height: auto;}
.spCaster__bnr__detail{ width: calc( 100% - 34% - 1em);}
.spCaster__bnr__ttl{
    font-size: 160%;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 0.5em;
}
.spCaster__bnr__btn{
    background-color: #bf0000;
    color: #fff;
    line-height: 1;
    text-align: center;
    padding: 1em;
    border-radius: 4em;
    margin-top: 1.5em;
    position: relative;
}
.spCaster__bnr__btn::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%; right: 10px;
	margin:-0.4em 0 0 0;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0.4em 0 0.4em 0.6em;
	border-color: transparent transparent transparent #fff;
}
.cx_displaydevice .spCaster a:hover .spCaster__bnr__btn{ background-color: #e90303;}
@media screen and (max-width: 768px){
    .spCaster__bnr{ padding: 1em 5vw;}
    .spCaster__bnr__photo{ width: 100%; margin-right: 0;}
    .spCaster__bnr__detail{ width: 100%;}
}
@media screen and (max-width: 550px){
    .spCaster__bnr__ttl{ font-size: 130%;}
}

.infoWrap{
    margin: 0 auto 2em;
    max-width: 840px;
    background: #000c4238;
    padding: 1em;
    box-sizing: border-box;
}
.infoWrap__oadate{
    color: #bf0000;
    font-weight: bold;
    font-size: 110%;
    line-height: 1.2;
    margin-bottom: 0.2em;
}
.infoWrap__ttl{
    color: #002978;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.2;
    margin-bottom: 0.3em;
}
.infoWrap__ttl span{
    font-size: 70%;
    font-weight: normal;
}
.infoWrap__attention{
    font-size: 94%;
    line-height: 1.2;
}