@charset "utf-8";

/*===================================================
  OP:ACCORDION
====================================================*/

.op_accord{

}

.op_accord .accordionList{

}
.op_accord .accordionList .accordionTit{
    font-weight: 500;
    position: relative;
    cursor: pointer;
    transition: 0.5s ease;
    background: #000;
    padding: 40px 50px;
}

.op_accord .accordionList .accordionTit span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    transition: 0.3s ease;
}

.op_accord .accordionList .accordionTit.open span:after {
    transform: translateY(-50%) rotate(0deg);
}

.op_accord .accordionList .accordionTit span:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: transform 0.2s ease-out;
}

.op_accord .accordionList .accordionTit span:after {
    width: 100%;
    height: 1px;
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: transform 0.2s ease-out;
}

.op_accord .accordionList .accordionDetail{
    display: none;
    padding: 40px;
}


.hamBg {
    position: absolute;
    right: 12px;
    top: 14px;
    width: 3em;
    height: 3em;
    cursor: pointer;
    z-index: 100;
    background: #000000;
    border-radius: 50rem;
}


.ham {
    transform: translate(0, -50%);
    position: absolute;
    right: 14px;
    top: 50%;
    width: 3em;
    height: 3em;
    cursor: pointer;
    z-index: 100;
    background: #000000;
    border-radius: 50rem;
}

.page--cast.list section > .bgAnswer {
    margin: 0 auto 0em;
}
.bgAnswer a{
    display: block;
    width: 100%;
    height: 100%;
}

.bgAnswer a:hover{
opacity: 0.5;
}

.page--cast.list section > div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}


h2{
text-align: left;
}
.page--cast.list h2 {
    text-align: left;
}

.answer{
    font-style: italic;
    text-align: center;
    font-size: 45px;
    margin-bottom: 30px;
}  

.answerTxt {
 font-weight: 400;
    font-size: 25px;
    color: #fff;
}

.question{
    font-style: italic;
    text-align: center;
    font-size: 45px;
    line-height: 0.8;
}   

.questionTxt {
    font-weight: 400;
    font-size: 20px;
}
 



.page--interview .box {
    background: inherit;
    border-radius: 0px;
    border: none;
    filter: none;
    }
    
    .bgAnswer{

    }

  .answerBg {
    padding: 0px 50px 50px 50px;;
    box-sizing: border-box;
    background: #000;
}

    .questionBg{
    position: relative;
    padding: 2em 0;
    background: #fff;
    border-radius: 10px;
    border: solid 2px #000;
    filter: drop-shadow(2px 2px 0 #000);
    box-sizing: border-box;
    } 

    .bgLink{
     background: #fff;
    border-radius: 10px;
    border: solid 2px #000;
    filter: drop-shadow(2px 2px 0 #000);
    }

    .box {
    background: none;
    border-radius: 0px;
    border: none;
    filter: none;
}

.page--cast.list section > div:after {
    content: none;
}

.page--cast.list section > div:last-child{
margin-bottom: 0px;
}


.page--interview.list h2{
    text-align:center;
}

.page--interview.list h3{
    font-size: 2em;
    font-weight: 800;
    font-style: italic;
    text-align: center;
    color: #fff;
    margin-bottom: .5em;
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 0.5em 1em;
    text-shadow: 2px 2px 0 #000;
}

.page--interview.list h3:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #1361bd;
    display: block;
    position: absolute;
    transform: translate(0, -50%);
    top: 50%;
    z-index: -1;
    left: 0;
    clip-path: polygon(5% 10%, 100% 20%, 98% 85%, 0 100%);
}

.page--interview.list .cateName{
    font-size: 1.5em;
    font-style: italic;
    font-weight: 800;
    margin-bottom: 1em;
    background: linear-gradient(transparent 60%, #66666630 60%);
    display: inline-block;
    padding: 0 .5em;
    color: #666666;
}

.page--interview.list .cateName span{
    font-size:.5em;
    font-weight:normal;
}

.page--interview.list section > div{
    padding:3em;
    margin:0 auto 3em;
    position:relative;
    overflow:hidden;
}

.page--interview.list section > div:after{
    content: '';
    width: 120%;
    padding-top: 15em;
    background: #66666620;
    position: absolute;
    bottom: -6em;
    right: -15%;
    transform: rotate(-10deg);
    z-index:0;
}



#seigaku .cateName{background: linear-gradient(transparent 60%, #1361bd30 60%);color: #1361bd;}
#fudoumine .cateName{background: linear-gradient(transparent 60%, #68686830 60%);color: #686868;}
#stRudolph .cateName{background: linear-gradient(transparent 60%, #66543d30 60%);color: #66543d;}
#yamabuki .cateName{background: linear-gradient(transparent 60%, #1a8e8430 60%);color: #1a8e84;}
#hyotei .cateName{background: linear-gradient(transparent 60%, #19a2d530 60%);color: #19a2d5;}
#rokkaku .cateName{background: linear-gradient(transparent 60%, #cc000030 60%);color: #cc0000;}
#rikkai .cateName{background: linear-gradient(transparent 60%, #ffc00030 60%);color: #ffc000;}
#higa .cateName{background: linear-gradient(transparent 60%, #823f9e30 60%);color: #823f9e;}
#shitenhoji .cateName{background: linear-gradient(transparent 60%, #76933f30 60%);color: #76933f;}
#special .cateName{background: linear-gradient(transparent 60%, #00000030 60%);color: #000;}
#Junior-high-school-selection .cateName{background: linear-gradient(transparent 60%, #00000030 60%);color: #000;}
#u17 .cateName{background: linear-gradient(transparent 60%, #af3b4730 60%);color: #af3b47;}
#germany .cateName{background: linear-gradient(transparent 60%, #66666630 60%);color: #666;}
#france .cateName{background: linear-gradient(transparent 60%, #66666630 60%);color: #666;}
#coach .cateName{background: linear-gradient(transparent 60%, #7c819b30 60%);color: #7c819b;}
#boys .cateName{background: linear-gradient(transparent 60%, #cecece30 60%);color: #cecece;}

#seigaku .text span{color: #1361bd;}
#fudoumine .text span{color: #686868;}
#stRudolph .text span{color: #66543d;}
#yamabuki .text span{color: #1a8e84;}
#hyotei .text span{color: #19a2d5;}
#rokkaku .text span{color: #cc0000;}
#rikkai .text span{color: #ffc000;}
#higa .text span{color: #823f9e;}
#shitenhoji .text span{color: #76933f;}
#special .text span{color: #000;}
#Junior-high-school-selection .text span{color: #000;}
#u17 .text span{color: #af3b47;}
#coach .text span{color: #7c819b;}
#boys .text span{color: #cecece;}

.page--interview.list section > div#seigaku:after{background: #1361bd20;}
.page--interview.list section > div#fudoumine:after{background: #68686820;}
.page--interview.list section > div#stRudolph:after{background: #66543d20;}
.page--interview.list section > div#yamabuki:after{background: #1a8e8420;}
.page--interview.list section > div#hyotei:after{background: #19a2d520;}
.page--interview.list section > div#rokkaku:after{background: #cc000020;}
.page--interview.list section > div#rikkai:after{background: #ffc00020;}
.page--interview.list section > div#higa:after{background: #823f9e20;}
.page--interview.list section > div#shitenhoji:after{background: #76933f20;}
.page--interview.list section > div#special:after{background: #00000020;}
.page--interview.list section > div#Junior-high-school-selection:after{background: #00000020;}
.page--interview.list section > div#u17:after{background: #af3b4720;}
.page--interview.list section > div#coach:after{background: #7c819b20;}
.page--interview.list section > div#boys:after{background: #cecece20;}


.page--interview.list section > div ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    position:relative;
    z-index:1;
}

.page--interview.list section > div#boys ul li{
    width:100%;
}

.page--interview.list section > div ul:nth-child(n + 3){
    margin-top:2.5em;
}

.page--interview.list section > div ul:before{
    content:'';
    width:calc(100% / 4 - .2em);
    order:1;
}


.page--interview.list section > div ul:after{
    content:'';
    width:calc(100% / 4 - .2em);
}

.page--interview.list section > div ul li{
    width:calc(100% / 4 - .2em);
    margin-bottom:.5em;
    height:auto !important;
}

.page--interview.list section > div ul li img{
    width:100%;
}

.page--interview.list section > div ul li .text{
    text-align:center;
}

.page--interview.list section > div ul li .text span{
    display:block;
    font-size:.85em;
}

.page--interview.list section > div ul li p:last-child{
    font-size:.8em;
    text-align:center;
}

.pc{
display: block;
}

.sp{
display: none;
}

@media screen and (max-width:961px){

    .pc{
display: none;
}

.sp{
display: block;
}


    .accordionList .accordionDetail {
    padding: 20px;
}

    .page--interview.list section > div{
        padding:1.5em;
    }

    .page--interview.list section > div ul li{
        width:calc(100% / 3 - .2em);
    }

    .page--interview.list section > div ul:after{
        width:calc(100% / 3 - .2em); 
    }
    
#seigaku, #hyotei, #rikkai{
margin-bottom: 30px;
}

.question{
font-style: italic;
text-align: center;
font-size: 30px;
}

.questionTxt {
    font-size: 12px;
}


.answer{
font-style: italic;
text-align: center;
font-size: 30px;
margin-bottom: 10px;
}

.answerTxt{
font-size: 18px;
font-weight: bold;
}

.page--cast.list h2 {
    text-align: left;
}
}



.page--cast.list section > div {
    padding: 0em; 
    margin: 0 auto 3em;
    position: relative;
    overflow: hidden;
}

.page--cast.list section > div ul li img {
    border: solid 1px #555;
}

.op_accord .accordionList .accordionDetail {
    padding: 0px;
}

.page--cast.list section > div {
    margin: 0 auto 1.2em;
}

.hamBg {
    right: -5px;
    top: 14px;
    width: 2.8em;
    height: 2.8em;
}

.ham {
    width: 1.8em;
    height: 1.8em;
    display: block;
    position: absolute;
    top: 50%;
    right: 54px;
    transform: translateY(-50% -50%);
}

.op_accord .accordionList .accordionTit span{
   width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}


.op_accord .accordionList .accordionTit span:before{
    width: 100%;
    height: 2px;
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: transform 0.2s ease-out;
}

.op_accord .accordionList .accordionTit span:after{
    width: 100%;
    height: 2px;
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: transform 0.2s ease-out;
    transform: translateY(-50%) rotate(90deg);
}

.answerFrame{

}



.conList{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.conList li{
    width: calc((100% / 4) - 30px);
    margin-right: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    opacity: 1;
    transition: .3s;
    justify-content: center;
    align-items: center;
}

.conList li a{
    display: block;
    line-height: 0;
}

.conList li:nth-of-type(4n){
margin-right: 0px;
}

.conList li:nth-last-of-type(-n+4){
margin-bottom: 0px;
}

.new:before {
    top: 0em;
    right: 1em;
}

.bnrList .new:before{
top: -1em;
right: 0em;
}



.bnrList{
    display: flex;
    flex-wrap: wrap;
}

.page--cast.list section > div ul li{
    width: calc((100% / 2) - 10px);
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    opacity: 1;
    transition: .3s;
    justify-content: center;
    align-items: center;
}

.bnrList li a{
    display: block;
    line-height: 0;
}

.page--cast.list section > div ul li:nth-of-type(2n){
margin-right: 0px;
}

.page--cast.list section > div ul li:nth-last-of-type(-n+2){
margin-bottom: 0px;
}

.new:before {
    top: 0em;
    right: 1em;
}


@media screen and (max-width:961px){

.anc{
position: relative;
}

.anc span{
position: absolute;
top: -80px;
}

.new:before {
top: -0.2em;
right: 0.5em;
}

.bnrList .new:before {
top: -1em;
right: -1em;
}

.conList{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.conList li{
    width: calc((100% / 2) - 10px);
    margin-right: 20px;
    margin-bottom: 20px;
}

.conList li:nth-last-of-type(-n+4) {
    margin-bottom: 10px;
}

.conList li a{

}

.conList li:nth-of-type(2n){
margin-right: 0px;
}

.conList li:nth-last-of-type(-n+2){
margin-bottom: 0px;
}

.bnrList{
    display: block;
}

.page--cast.list section > div ul li{
    width: 100%;
    margin-bottom: 20px;
    margin-right: 0px;
}

.page--cast.list section > div ul li:last-child{
    margin-bottom: 0px;
}

.bnrList li a{
    display: block;
    line-height: 0;
}

.page--cast.list section > div ul li:nth-of-type(2n){
margin-right: 0px;
}

.page--cast.list section > div ul li:nth-last-of-type(-n+2){
margin-bottom: 20px;
}

.ham {
    right: 30px;
}

.op_accord .accordionList .accordionTit{
    background: #000;
    padding: 30px 30px;
}

.answerBg {
    padding: 2em 0;
    box-sizing: border-box;
    background: #000;
    padding: 0px 20px 20px 20px;
}

}