@charset "utf-8";

.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;
}

h4{
    font-style: italic;
    text-align: center;
    margin-bottom: 40px;
    font-size: 45px;
}  

.question{
font-style: italic;
text-align: center;
margin-bottom: 10px;
font-size: 45px;
}
 
.howto{
    position: static;
    text-align: center;
    margin-bottom: 30px;
    font-size: 16px;
}

.answer {
    margin-bottom: 0px;
    display: block;
    text-align: center;
    padding: 1.5em;
    margin: 0 0;
    background: #fff;
    border-radius: 10px;
    border: solid 2px #000;
    filter: drop-shadow(2px 2px 0 #000);
    line-height: 1;
}

.answer span{
    font-size: 80%;
    font-weight: 400;
}

#seigaku, #hyotei, #rikkai{
margin-bottom: 50px;
}


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

    }

    .bg{
    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--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;
}

@media screen and (max-width:961px){
    .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;
}

h4{
font-style: italic;
text-align: center;
margin-bottom: 9px;
font-size: 30px;
}
.page--cast.list h2 {
    text-align: left;
}

.howto{
    margin-bottom: 20px;
    font-size: 14px;
}

.question{
margin-bottom: 0px;
}

}