/* ============================
	Cast Staff
============================ */

.cs-dtl { padding-top:2.0em; font-weight:700; line-height:150%; }
.cs-dtl .ttl { margin-bottom:1.0em; font-size:200%; letter-spacing:0.08em; color:var(--cl-olive2); }
.cs-dtl .ttl::before,
.cs-dtl .ttl::after { content:"－"; }

.cs-dtl-list { display:flex; flex-wrap:wrap; justify-content:center; }
.cs-dtl dl { margin-bottom:1.7em; width:26%; }
.cs-dtl dt { margin-bottom:0.7em; font-size:70%; }
#cast dl { font-size:170%; }
#staff dl { font-size:150%; }
#staff dl.staff-original { width:100%; }

/* -- Media Queries -- */

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

.cs-dtl { font-size:90%; }
.cs-dtl dl { width:7.0em; }
#staff dl.staff-studio { width:100%; }

}


/* comment
-------------------------------- */

.btn-cmt { display:inline-block; margin:0 -1.3em 0 0.3em; width:1.0em; height:1.0em; background:url(../img/caststaff/icon_cmt.png) center center no-repeat; background-size:auto 100%; text-indent:-9999px; /* hover */ transition:transform 0.2s ease-out, opacity 0.2s ease-out; }
@media (hover: hover) { .btn-cmt:hover { transform:translateY(-3px); opacity:0.7; } }

.modal-win { display:none; position:fixed; z-index:2000; top:0; left:0; width:100%; height:100%; color:#000; }
.modal-bg { width:100%; height:100%; background-color:rgba(30,30,30,0.9); }
.modal-wrapper { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70%; max-width:500px; padding:2.0em; box-sizing:border-box; background-color:#fff; }
.btn-modal-close { position:absolute; top:1rem; right:1rem; cursor:pointer; font-size:150%; }

.modal-win .pic { margin:0 auto 1.5em; width:300px; aspect-ratio:1 / 1; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#modal-win1 .pic { background-image:url(../img/dummy1.jpg); }
#modal-win2 .pic { background-image:url(../img/dummy1.jpg); }
.modal-win .txt { text-align:left; line-height:180%; }
.modal-win .name { margin-bottom:0.8em; font-size:170%; font-weight:700; color:var(--cl-winered); }
.modal-win .name dt { margin-bottom:0.5em; font-size:70%; }


/* -- Media Queries -- */

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

.modal-wrapper { width:90%; font-size:90%; position:absolute; top:4rem; left:50%; transform:translateX(-50%); max-height:calc(100svh - 5rem - 2rem); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.btn-modal-close { top:0.5rem; right:0.5rem; }

.modal-win .pic { margin:0 2.0em 1.5em 2.0em; width:auto; }

}