/*	CAST STAFF
============================== */

/*table*/

#caststaff table{width:100%; margin:0 auto;}
#caststaff table td{padding:2.5% 0;}
#caststaff table td span{background: #e8e1d5;padding: .2em;}
#caststaff table td.cname{font-size:130%; width:45%; color: #4e2a0f;line-height: 1.4;
text-align: left !important;
}
#caststaff table td.chara{
    font-size:130%; width:47%; color: #4e2a0f;
text-align: right !important;
}
#caststaff table td.naka{font-size:90%; vertical-align:middle;color: #171412;
text-align: center !important;
}
#caststaff table td.naka2{font-size:90%; vertical-align:top;color: #171412;
text-align: center !important;
}
#caststaff table td.cname2{font-size:110%; width:67%; line-height: 1.4;
text-align: left !important;
vertical-align:top;
}
#caststaff table td.credit{font-size:110%; width:25%; 
vertical-align:top;
text-align: right !important;
}

@media all and (max-width: 767px) {
/*caststaff*/
#caststaff table td.cname,
#caststaff table td.cname2{font-size:80%;width: 72%;}
#caststaff table td.chara{font-size:70%;}
#caststaff table td.naka{font-size:60%; }
#caststaff table td.credit{font-size:70%;width: 20%;}

small{
display: inline-block;
font-size: 80%;
line-height:2;
white-space: nowrap;
}
#caststaff #cast_box table td.chara{
    width: 40%;
}
#caststaff #cast_box table td.cname{
    width: 50%;
}
}

/*	cast_staff
============================== */
#caststaff .in_box h3{
position: relative;
padding-left:0.5em;
line-height: 1.2;

}
#caststaff .in_box h3{
border-left:5px solid #4e2a0f ;
}



@media all and (min-width: 768px) {
#caststaff .in_box h3{
width: 980px !important;
text-align: left !important;
margin: auto;
font-size: 220%;
}
}
@media all and (max-width: 767px) {
#caststaff .in_box  h3{
text-align: left !important;
margin: auto;
font-size: 140%;
}

}

/*	cast_box
============================== */
#cast_box{
position: relative;
margin:0 auto 5em;

}

#cast_box h3::before
{
background: url(../img/h3_icon.png)center center no-repeat;
background-size: cover;
width: 5px;height:100%;
display: inline-block;
margin-right: .5em;
}
@media all and (max-width: 767px) {
    #cast_box{

        margin:0 auto 3em;
        
        }
        
}

/*	staff_box
============================== */
#staff_box{
position: relative;
margin:0 auto;
}


#staff_box h3::before
{
background: url(../img/h3_icon2.png)center center no-repeat;
background-size: cover;
width: 5px;height:100%;
display: inline-block;
margin-right: .5em;
}

.photo figure{
display: block;
max-width: 500px;
margin:2em auto 1em;
}

.photo figure .lazy{
aspect-ratio: 980/892;
border-radius: 10px;
}
.photo figcaption{
color: #171412;
display: flex;
align-items: center; 
justify-content: center
}
.photo figcaption .big{
font-size: 160%;
}


@media all and (max-width: 767px) {

#staff_box h3::before
{
background: url(../img/h3_icon2.png)center center no-repeat;
background-size: cover;
width: 5px;height:100%;
display: inline-block;
margin-right: .5em;
}

.photo figure{
display: block;
max-width: 80%;
margin:2em auto 1em;
}
.photo figcaption{
font-size: 60%;
}

}
/*	h2
============================== */
 article h2{
 font-size: calc(51.2vw / 10.8);
}
@media all and (max-width: 767px) {
    article h2{
        font-size: 150%
    }

.content h2::before{
    left: calc(-75vw / 7.68);
}

.content h2::after{
    right: calc(-75vw / 7.68);
}
}
@media all and (min-width: 1081px) {
    article h2 {font-size: 320%;}
}


/*	in_box
============================== */

@media (min-width: 768px) {
    #caststaff .in_box{max-width: 920px;}
}