/* ============================
	staff css
============================ */

#staffcast .subttl { padding-bottom:0.7em; margin-bottom:0.7em; border-bottom:#ddd 1px solid; text-align:center; font-size:160%; font-family:'NotoSansJP'; font-weight:900; color:var(--cl-purple); }

#cast, #staff { margin-bottom:50px; }

.staff-t { text-align:center; }
.staff-t table { width:100%; }
.staff-t th, .staff-t td { border-collapse:collapse; vertical-align:top; line-height:140%; font-family:'NotoSansJP'; font-weight:900; }
.staff-t th { text-align:right; padding:0.3em 0.5em 0.5em 0; box-sizing:border-box; /* for space */ font-size:1.2rem; }
#cast .staff-t th::after { content:"��"; }
.staff-t td { text-align:left; padding:0 0 0.5em 0; /* for space */ font-size:1.6rem; }
#cast .staff-t th { width:50%; }
#cast .staff-t td { width:49%; }
#staff .staff-t th { width:40%; }
#staff .staff-t td { width:59%; }

#cs-t1 th { color:var(--cl-green); }
#cs-t2 th { color:var(--cl-yellow-d); }
#cs-t3 th { color:var(--cl-blue); }
#cs-t4 th { color:var(--cl-pink); }
#cs-t5 th { color:var(--cl-lightgray-d); }
#cs-t6 th { color:var(--cl-red-d); }
#cs-t7 th { color:var(--cl-orange-d); }
#cs-t8 th { color:var(--cl-purple); }

#staff table tr:nth-child(5n+1) th { color:var(--cl-red); }
#staff table tr:nth-child(5n+2) th { color:var(--cl-purple); }
#staff table tr:nth-child(5n+3) th { color:var(--cl-blue); }
#staff table tr:nth-child(5n+4) th { color:var(--cl-green-d); }
#staff table tr:nth-child(5n+5) th { color:var(--cl-orange); }

#music table tr:nth-child(1) th { color:var(--cl-red); }
#music table tr:nth-child(2) th { color:var(--cl-purple); }

/* ---- Media Queries ---- */

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

#staffcast .subttl { padding-bottom:0.7em; font-size:140%; }

#cast, #staff { margin-bottom:30px; }

.staff-t th, .staff-t td { display:block; width:100%!important; text-align:center; }
.staff-t th { font-size:1.1rem; margin-bottom:-0.2em; padding-right:0; }
.staff-t td { font-size:1.3rem; }

}

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

.staff-t th { font-size:1.0rem; }
.staff-t td { font-size:1.3rem; }

}


/*  Modal
=============================================== */

.modal-box { position:relative; display:none; z-index:10001; margin:0; padding:20px; box-sizing:border-box; background-color:#fff; width:800px; border-radius:20px; }
.modal-overlay { z-index:10000; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75); }
.lock { overflow:hidden; }
.modal-open:hover { cursor:pointer; }
.modal-close-area { text-align:center; }
a.modal-close { display:block; width:6.0em; margin:auto; padding:0.5em 0; box-sizing:border-box; border-radius:1.0em; background-color:var(--cl-red-d); color:#fff!important; font-family:kinto-sans, sans-serif; font-weight:900; font-style:normal; text-decoration:none; }
@media (hover: hover) { a.modal-close:hover { cursor:pointer; opacity:0.7; } }
.modal-wrap { z-index:10001; display:none; position:fixed; top:0; left:0; width:100%; height:100%; overflow:auto; }
#comment-p1 a.modal-close { background-color:var(--cl-green); }
#comment-p2 a.modal-close { background-color:var(--cl-yellow-d); }
#comment-p3 a.modal-close { background-color:var(--cl-blue); }
#comment-p4 a.modal-close { background-color:var(--cl-pink); }
#comment-p5 a.modal-close { background-color:var(--cl-lightgray-d); }
#comment-p6 a.modal-close { background-color:var(--cl-red-d); }
#comment-p7 a.modal-close { background-color:var(--cl-orange-d); }
#comment-p8 a.modal-close { background-color:var(--cl-purple); }
.cmt-p { text-align:center; }
.cmt-p-ttl { margin-bottom:15px; font-size:160%; font-family:'NotoSansJP'; font-weight:900; }
#comment-p1 .cmt-p-ttl { color:var(--cl-green); }
#comment-p2 .cmt-p-ttl { color:var(--cl-yellow-d); }
#comment-p3 .cmt-p-ttl { color:var(--cl-blue); }
#comment-p4 .cmt-p-ttl { color:var(--cl-pink); }
#comment-p5 .cmt-p-ttl { color:var(--cl-lightgray-d); }
#comment-p6 .cmt-p-ttl { color:var(--cl-red-d); }
#comment-p7 .cmt-p-ttl { color:var(--cl-orange-d); }
#comment-p8 .cmt-p-ttl { color:var(--cl-purple); }
.cmt-p-ttl .role { font-size:70%; }
.cmt-p-pic { width:330px; margin:0 auto 20px auto; }
.cmt-p-pic p { position:relative; width:100%; height:0; padding-top:100%; }
.cmt-p-pic p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; border-radius:10px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#comment-p1 .cmt-p-pic p span { background-image:url(../img/staff/comment_p1.jpg); }
#comment-p2 .cmt-p-pic p span { background-image:url(../img/staff/comment_p2.jpg); }
#comment-p3 .cmt-p-pic p span { background-image:url(../img/staff/comment_p3.jpg); }
#comment-p4 .cmt-p-pic p span { background-image:url(../img/staff/comment_p4.jpg); }
#comment-p5 .cmt-p-pic p span { background-image:url(../img/staff/comment_p5.jpg); }
#comment-p6 .cmt-p-pic p span { background-image:url(../img/staff/comment_p6.jpg); }
#comment-p7 .cmt-p-pic p span { background-image:url(../img/staff/comment_p7.jpg); }
#comment-p8 .cmt-p-pic p span { background-image:url(../img/staff/comment_p8.jpg); }
#comment-p9 .cmt-p-pic p span { background-image:url(../img/staff/comment_p9.jpg); }
#comment-p10 .cmt-p-pic p span { background-image:url(../img/staff/comment_p10.jpg); }
#comment-p11 .cmt-p-pic p span { background-image:url(../img/staff/comment_p11.jpg); }

.cmt-p-txt { margin-bottom:15px; line-height:180%; text-align:left; }

.btn-cmt { display:inline-block; position:relative; top:-0.1em; vertical-align:bottom; width:1.2em; height:1.2em; background:url(../img/staff/btn_cmt.png) center center no-repeat; background-size:auto 100%; text-indent:-9999px; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { .btn-cmt:hover { opacity:0.5; } }

/* ------ Media Queries ------ */

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

.modal-box { width:90%; margin-top:10px; padding:15px; border-radius:15px; }
a.modal-close { font-size:90%; }

.cmt-p-pic { width:80%; margin:0 10% 20px 10%; }
.cmt-p-ttl .actor, .cmt-p-ttl .role { display:block; padding-bottom:5px; }
.cmt-p-txt { font-size:90%; }

}

/*eof*/