@charset "utf-8";
/* Person top */
/* movieBlock */
.movieBlock{
    display: flex;
    gap: 15px 30px; 
}
.movieBlock img {
    transition: 500ms all;
}
.movieBlock a:hover img {
    transform: scale(1.05,1.05);
}
.movieBlock p a{
    text-decoration: none;
}

/* inview */
.inview.left{ position:relative;
    transition:all 0.3s ease;
    transition-delay: 0.6s;
    -webkit-transform:translateX(-5%) ;
    transform:translateX(-5%);
    opacity:0;
}
.inview.inviewShow.left{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.right{ position:relative;
    transition:all 0.8s ease;
    transition-delay: 0.1s;
    -webkit-transform:translateX(5%) ;
    transform:translateX(5%);
    opacity:0;
}
.inview.inviewShow.right{-webkit-transform:translateX(0) ;
transform:translateX(0); opacity:1;}

.inview.bottom{ position:relative;
    transition:all 0.8s ease;
    transition-delay: 0.1s;
    -webkit-transform:translateY(10%) ;
    transform:translateY(10%);
    opacity:0;
}
.inview.inviewShow.bottom{-webkit-transform:translateY(0) ;
transform:translateY(0); opacity:1;}
 /* delay */
.d1{transition-delay: 0.1s !important;}
.d2{transition-delay: 0.2s !important;}
.d3{transition-delay: 0.3s !important;}
.d4{transition-delay: 0.4s !important;}
.d5{transition-delay: 0.5s !important;}
.d6{transition-delay: 0.6s !important;}
.d8{transition-delay: 0.8s !important;}
.d10{transition-delay: 1s !important;}
.t2{transition-duration:2s !important;}


/* mainImg */
main{overflow: hidden;}
main section.mainImg{   position: relative; margin-bottom: 130px;}
.mainImg img{    width: 100%;}
.mainImg .ttl{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);
    transition: 500ms all;
    text-align: center;
    color: #fff;
}
.mainImg .ttl p {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 0;
    letter-spacing: 0.2em;
    color:#ce121b;
}
.mainImg .ttl h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: 46px;
    font-weight: 500;
    margin-bottom: 15px;
    letter-spacing: 0.2em;
}

/* selectBox */
.selectBox{padding: 30px 0 75px;}
.selectBox dl{background:#000; color:#fff; display: flex; align-items: center; margin:0 0 4px;}
.selectBox dl dt{font-family: 'Noto Serif JP', serif; font-size: 19px; white-space: nowrap; padding:30px;}
.selectBox dl dd{border-left:solid 1px #555;padding: 16px 48px;    margin: 16px;}
.selectBox dl li{list-style: none; display: inline-block;
  padding-left: 30px;
  position:relative;
  margin-right: 20px;
}
.selectBox dl li::before{
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #999;
  border-radius: 50%;
}
.selectBox dl li.active{  color: #ce121b;}
.selectBox dl li.active::after{content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: 4px;
    width: 14px;
    height: 14px;
    background: #ce121b;
    border-radius: 50%;
}
.selectBox dl dd .btn_job{padding:22px 0 0 40px;}
.selectBox dl dd .btn_job a{position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 19px 11px 19px 44px;
    display: block;
    color: #fff;
    background: #ce121b;
    text-align: center;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;}
.selectBox dl dd .btn_job a::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    content: '';
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translate3d(-100%, 0, 0);
    transition: .3s;
}
.selectBox dl dd .btn_job a:hover {
    text-decoration: none;
    color: #ce121b;
}
.selectBox dl dd .btn_job a:hover::before {
    transform: translate3d(0, 0, 0);
}
.selectBox dl dd .btn_job a:hover .arwWht::before {
    background: #ce121b;
}
.selectBox dl dd .btn_job a:hover .arwWht::after {
    border-color: #ce121b;
}

/* List */
.is-hide{display: none;}
.personList{background:#000; padding-bottom: 30px; }
.personList ul{ margin:0; padding:0; display: flex; flex-wrap: wrap;}
.personList li{position: relative; list-style: none; margin:0; padding:0;
    top: inherit !important;
    left: inherit !important;
    margin: 0 !important;}
.personList li img{width:100%; transition: 500ms all; display: block;}
.personList li a{overflow: hidden;    display: block;}
.personList li a:hover img {
    transform: scale(1.05,1.05);
}
.personList .names {
    position: absolute;
    left: 22px;
    bottom: 22px;
    color: #fff;
    line-height: 1.2;}
.personList .names .name{font-family: 'Playfair Display', serif;font-weight: 400;font-size: 35px;display: block;margin-bottom: 12px;}
@media (min-width: 1801px){.personList li{width:16.6666666%;}}
@media (max-width: 1800px){.personList li{width:20%;}}
@media (max-width: 1580px){.personList li{width:25%;}}
@media (max-width: 884px){.personList li{width:33.3333333%;}}
@media (max-width: 542px){.personList li{width:50%;}}



@media (max-width:767px){
main section.mainImg{width: 100%;    overflow: hidden; margin-bottom: 75px;}
.mainImg img{width:200%; margin-left:-50%;}
.mainImg .ttl p{font-size:14px;}
.mainImg .ttl h1{font-size: 36px;white-space: nowrap;}
.movieBlock{display: block; margin-bottom: 20px !important;}
.movieBlock img{width: 100%; }
main .w1000.selectBox{padding-top: 5px;}
.selectBox dl{display: block; }
.selectBox dl dt{padding:26px 18px; position:relative;}
.selectBox dl dd{margin:0; padding:27px 21px; border-left:0; border-top: solid 1px #555;display: none;}
.selectBox dl dd ul{padding-left: 0;}
.selectBox dl dt:before,
.selectBox dl dt:after{display: block; content:""; width:14px; height: 1px; background:#fff; position:absolute; right: 16px; top: 38px;}
.selectBox dl dt:after{transform: rotate(90deg);}
.selectBox dl dt.open:after{display: none;}
.personList{margin-top:60px !important;}
.personList .names .name{font-size:26px;}
.selectBox dl dd .btn_job{padding-left:0;}
.selectBox dl dd .btn_job a{padding:19px 0px 19px 10px;}
}
@media (min-width:768px){
main .selectBox dl dd{display: block !important;}
}