@charset "utf-8";
.sub .pageTtlWrap{
    margin-bottom: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (max-width:767px) {
    .sub .pageTtlWrap{
        margin: 0 auto calc(60 / var(--vw-min) * 100vw) 0;
        padding-left: calc(37 / var(--vw-min) * 100vw);
    }
}
/*---------------------------------
* STAFF&CAST
----------------------------------*/
.staffcastArea__inner{
    max-width: min(calc(1366 / var(--vw-min) * 100vw), 1366px);
    padding: 0 min(calc(133 / var(--vw-min) * 100vw), 133px);
    margin: 0 auto;
}
@media screen and (max-width:767px) {
    .staffcastArea__inner{
        width: 100%;
        padding: 0 calc(40 / var(--vw-min) * 100vw);
    }
}
.pageTtl-text {
    color: var(--color-red);
    font-size: min(calc(145 / var(--vw-min) * 100vw), 145px);
    font-family: var(--font-en);
    line-height: 0.7em;
    position: relative;
    padding-right: min(calc(100 / var(--vw-min) * 100vw), 100px);
    padding-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.areaTtl__decotxt{
    font-family: "Kolker Brush", cursive;
    font-weight: 400;
    text-shadow: 0 0 min(calc(20 / var(--vw-min) * 100vw), 20px) var(--color-red);
    font-size: min(calc(78 / var(--vw-min) * 100vw), 78px);
    color: rgb(255, 255, 255);
    position: absolute;
    right: 0px;
    bottom: 0px;
    line-height: 1;
}
@media screen and (max-width:767px) {
    .pageTtl-text{
        font-size: calc(100 / var(--vw-min) * 100vw);
        margin-right: 0;
		padding-right: 0;
    }
	.sub .pageTtlWrap{
		width: 100%;
	}
}

/* staffcastSection */
.staffcastSection:not(:first-child) {
    margin-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
}
.staffcastSection-ttl {
    display: flex;
    align-items: center;
    gap: min(calc(20 / var(--vw-min) * 100vw), 20px);
    font-size: min(calc(40 / var(--vw-min) * 100vw), 40px);
    font-family: var(--font-en);
    color: var(--color-red);
}
.staffcastSection-ttl:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--color-red);
}

/* staffcastLists */
.staffcastLists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(calc(40 / var(--vw-min) * 100vw), 40px) min(calc(50 / var(--vw-min) * 100vw), 50px);
    margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
@media screen and (max-width:767px){
    .staffcastLists {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(50 / var(--vw-min) * 100vw);
    }
}

/* 最初のアイテムだけ全幅（=1カラムで1行分） */
.staffcastLists.--staff > .staffcastItem:first-of-type {
    grid-column: 1 / -1;
}
.staffcastItem-ttl {
    font-size: min(calc(17 / var(--vw-min) * 100vw), 17px);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-red);
    margin-bottom: 1em;
}
.staffcastItem-txt {
    font-size: min(calc(22 / var(--vw-min) * 100vw), 22px);
}
.staffcastItem-txt-inner {
    display: inline-block;
    position: relative;
    padding-right: min(calc(46 / var(--vw-min) * 100vw), 46px);
}
.staffcastItem-txt small {
    /* display: block; */
    font-size: 60%;
    /* margin-top: 1.2em; */
}
@media screen and (max-width:767px){
    .staffcastItem-ttl {
        font-size: calc(20 / var(--vw-min) * 100vw);
    }
    .staffcastItem-txt {
        font-size: calc(24 / var(--vw-min) * 100vw);
    }
    .staffcastItem-txt-inner {
        padding-right: calc(70 / var(--vw-min) * 100vw);
    }
}

.staffcastItem-cmt {
    background-color: #000;
    border-radius: 50%;
    border: 1px solid var(--color-red);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(calc(34 / var(--vw-min) * 100vw), 34px);
    height: min(calc(34 / var(--vw-min) * 100vw), 34px);
    position: absolute;
    top: -20%;
    right: 0;
}
.staffcastItem-cmt:after {
    content: "";
    background-color: var(--color-red);
    -webkit-mask: url(../img/common/icon/icon_dot.svg) no-repeat center / contain;
    mask: url(../img/common/icon/icon_dot.svg) no-repeat center / contain;
    width: min(calc(20 / var(--vw-min) * 100vw), 20px);
    height: min(calc(20 / var(--vw-min) * 100vw), 20px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
@media screen and (hover: hover) and (pointer: fine) {
    .staffcastItem-cmt {
        transition: background-color .3s ease;
    }
    .staffcastItem-cmt:hover {
        background-color: var(--color-red);
    }
    .staffcastItem-cmt:after {
        transition: background-color .3s ease;
    }
    .staffcastItem-cmt:hover:after {
        background-color: #fff;
    }
}
@media screen and (max-width:767px){
    .staffcastItem-cmt {
        width: calc(50 / var(--vw-min) * 100vw);
        height: calc(50 / var(--vw-min) * 100vw);
        top: -50%;
    }
    .staffcastItem-cmt:after {
        width: calc(26 / var(--vw-min) * 100vw);
        height: calc(26 / var(--vw-min) * 100vw);
    }
}

/* imageModal */
#imageModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 url(../img/common/modal_bg.jpg) no-repeat center bottom / cover;
    overflow: auto;
    z-index: 9999;
}
#imageModal .closeBtn {
    position: absolute;
    top: min(calc(30 / var(--vw-min) * 100vw), 30px);
    right: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
#imageModal .oneModal {
    display: block;
}
@media screen and (max-width:767px) {
    #imageModal {
        background: #000 url(../img/common/modal_bg_sp.jpg) no-repeat center bottom / cover;
    }
}
.js-imageModal_cont {
    width: min(calc(900 / var(--vw-min) * 100vw), 900px);
    padding: min(calc(40 / var(--vw-min) * 100vw), 40px) 0;
}
.js-imageModal_cont img {
    width: 100%;
    height: auto;
}
@media screen and (max-width:767px) {
    .js-imageModal_cont {
        width: 100%;
    }
}