@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

#top-Visual{
    width:100%;
    padding:35px 0 45px;
    color:#fff;
    background:url(../img/visual.jpg) no-repeat 50%;
    background-size:cover;
    position:relative;
    z-index: 1;
}

#top-Visual::before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index: 10;
    background:rgba(0,0,0,.2);
}

#top-VisualName{
    flex:1;
    padding-right:2em;
    position:relative;
    z-index: 10;
}

#top-VisualName::before{
    display:block;
    content:"";
    width:126px;
    height:3px;
    background:#8b2642;
    margin-bottom:10px;
}

#top-VisualName__text{
    font-family: 'Poppins', sans-serif;
    font-size:2.7rem;
    font-weight: 500;
    line-height:1.25;
}

#top-VisualName__title{
    font-family: 'Poppins', sans-serif;
    font-size:4.6rem;
    font-weight: bold;
    line-height:1.25;
    letter-spacing: .05em;
}

#top-VisualInfo{
    width:320px;
    position:relative;
    z-index: 10;
}

#top-VisualInfo dl{
    width:auto;
    padding:20px 24px 16px;
}

#top-VisualInfo dl.style1{ background:#8b0042;}
#top-VisualInfo dl.style2{ background:#333333; margin-top:30px;}

#top-VisualInfo dt{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
       align-items: flex-end;
	-webkit-box-pack:justify;
	   -ms-flex-pack:justify;
	justify-content:space-between;
    width:100%;
    font-size:1.8rem;
    padding-bottom:12px;
    margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.3);
}

#top-VisualInfo dt span{ font-size:1.4rem;}

#top-VisualInfo dd{
    width:100%;
    text-align: center;
}

.top-VisualInfo__text{
font-size:1.6rem;
}

.top-VisualInfo__text span{
    font-family: 'Poppins', sans-serif;
    font-size:2.8rem;
    font-weight: bold;
    line-height:1.2;
    padding-right: .2em;
}

.top-VisualInfo__subtext{
    display:block;
    margin-top:.5em;
    font-size:1.4rem;
}

/*------------------------------------------------------------ 
    TOPICS 
------------------------------------------------------------*/  

#top-Topics{
    width:100%;
    background:#fff;
    margin-bottom: 50px;
    overflow: hidden;
}

#top-Topics__label{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width:100px;
    position:relative;
    z-index:1;
}

#top-Topics__label::before{
    content:"";
    width:100vw;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    z-index:-1;
    background:#8b2642;
}

#top-Topics__label--title{
    color:#fff;
    font-size:1.6rem;
}

#top-Topics__link{
    width: calc(100% - 214px);
    margin-right: auto;
    padding: 12px 20px 12px 24px;
    box-sizing:border-box;
}

#top-Topics__link li + li{ margin-top:5px;}

.top-Topics__date{
    width:110px;
    color:#595757;
    font-size:1.4rem;
}

.top-Topics__title{
    width: calc(100% - 110px);
    color:#8b2642;
    font-size:1.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#top-Topics .top-ColumnHead__link{ height: auto;}

/*------------------------------------------------------------ 
    MENU 
------------------------------------------------------------*/  

.top-MenuItem{
    width:23.33333333333333%;
    height:100px;
}

.top-MenuItem:nth-child(n+5){ margin-top:2.222222222222222%;}

.top-MenuItem.is-label{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
       align-items: center;
    color:#fff;
    font-size:1.8rem;
    font-weight: bold;
    background:#8b0042;
}

.top-MenuItem a{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
       align-items: center;
    width:100%;
    height: 100%;
    padding:0 20px;
    background:#fff;
    box-sizing:border-box;
    border:1px solid #efefef;
    transition:all .2s ease-out;
    position:relative;
}

.top-MenuItem__icon{
    width:74px;
    text-align: center;
}

.top-MenuItem__icon .cls-1{
    fill:#8b0042;
}

.top-MenuItem__icon .cls-2{
    fill:none;
    stroke:#8b0042;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:2px;
}

.top-MenuItem__icon .cls-3{
    fill:none;
    stroke:#8b0042;
    stroke-miterlimit:10;
    stroke-width:2px;
}

.top-MenuItem__txtfield{ flex:1;}
.top-MenuItem__jp{
    color:#3e3a39;
    font-size:1.6rem;
    font-weight: bold;
}

.top-MenuItem__en{
    color:#b5b5b6;
    font-size:1.2rem;
    font-family: 'Poppins', sans-serif;
    margin-top:.2em;
}

/*------------------------------------------------------------ 
    SLIDER 
------------------------------------------------------------*/  



/*------------------------------------------------------------ 
    INFORMATION 
------------------------------------------------------------*/  

.top-Column{ width:48.73015873015873%;}
.top-Column:nth-child(n+3){ margin-top:30px;}

.top-ColumnHead{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
       align-items: center;
    width:100%;
    height:50px;
    padding-left: 20px;
    background:#fff;
    border-left:1px solid #8b0042;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    box-sizing:border-box;
}

.top-ColumnHead__title{
    flex:1;
    font-size:1.8rem;
}

.top-ColumnHead__link{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
       align-items: center;
    width:100px;
    height:100%;
    color:#fff;
    background:#b5b5b6;
    transition:all 0.2s ease-out;
}

.top-ColumnHead__link:hover{ background:#8b0042;}

.top-ColumnList{
    width:90%;
    margin:24px auto 0;
}

.top-ColumnItem{
    width:auto;
    margin:0 -10px;
}

.top-ColumnItem + .top-ColumnItem{ margin-top: 5px;}

.top-ColumnItem__link{
    display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
       align-items: center;
    width:100%;
    padding:10px;
    box-sizing:border-box;
    transition:all 0.2s ease-out;
}

.top-ColumnItem__link:hover{ background: #fff;}




/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* PC */
@media screen and (max-width: 1280px) and (min-width: 835px){

    .top-MenuItem a{ padding:0 16px;}
    .top-MenuItem__icon{ width:calc(74px*.9);}

    .top-MenuItem.is-label{ font-size:calc(1.8rem*.9);}
    .top-MenuItem__jp{ font-size:calc(1.6rem*.9);}
    .top-MenuItem__en{ font-size:calc(1.2rem*.9);}

}

@media screen and (min-width: 835px){

    .top-Topics__label--more{
        align-self: center;
        padding: 12px 0;
    }


}

/* TABLET */
@media screen and (max-width: 834px){

    #top-VisualName::before{
        width:calc(126px*.9);
        height:2px;
        margin-bottom:calc(10px*.9);
    }
    
    #top-VisualName__text{ font-size:calc(2.7rem*.9);}
    #top-VisualName__title{ font-size:calc(4.6rem*.9);}
    
    #top-VisualInfo{ width:calc(320px*.8);}
    #top-VisualInfo dl{ padding:calc(20px*.8) calc(24px*.8) calc(16px*.8);}
    
    #top-VisualInfo dl.style2{ margin-top:calc(30px*.8);}
    
    #top-VisualInfo dt{
        font-size:calc(1.8rem*.8);
        padding-bottom:calc(12px*.8);
        margin-bottom:calc(12px*.8);
    }
    
    .top-VisualInfo__subtext,
    #top-VisualInfo dt span{ font-size:calc(1.4rem*.8);}

    .top-VisualInfo__text{ font-size:calc(1.6rem*.8);}
    .top-VisualInfo__text span{ font-size:calc(2.8rem*.8);}
    

    .top-MenuItem{ width:48.5%;}
    .top-MenuItem:nth-child(n+3){ margin-top:3%;}

    .top-Column{ width:100%;}
    .top-Column:nth-child(n+2){ margin-top: 30px;}

    .top-ColumnList .top-Column:nth-child(n+2){ margin-top:0;}

    #top-Topics{ margin-bottom: 40px;}

    /* topics */
    #top-Topics__label {
        width: 100%;
        padding: 15px 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      
      #top-Topics__label::before { right:-40px;}

      .top-Topics__label--more {
        width: 90px;
        font-size: 1.4rem;
        margin-top: 0;
        color:#fff;
        padding-bottom: 12px;
      }

      .top-Topics__label--more svg{
          height: auto;
          margin-left: auto;
       }

    .top-Topics__label--more::before,
    .top-Topics__label--more::after{ background-color: #fff;}

    .top-Topics__label--more .cls-1{ stroke: #fff;}

    #top-Topics__link{
        width:100%;
        padding: 12px 0 16px;
    }

/*    #top-Topics__link li:nth-child(n+4){ display: none;}*/

}




/* SP */
@media screen and (max-width: 640px){

    #top-Visual{
        padding:40px 0 30px;
        background-image: url(../img/visual-sp.jpg);
    }

    #top-VisualName{
        flex:unset;
        width:100%;
        padding-right:0;
    }

    #top-VisualName::before{
        width:calc(126px*.7);
        height:1.5px;
        margin-bottom:7px;
    }
    
    #top-VisualName__text{
        font-size:calc(2.7rem*.7);
    }
    
    #top-VisualName__title{
        font-size:calc(4.6rem*.75);
    }

    #top-VisualInfo{
        width:100%;
        margin-top:90px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:justify;
           -ms-flex-pack:justify;
        justify-content:space-between;
    }

    #top-VisualInfo dl{
        width:48.5%;
        padding: calc(20px*.6) calc(24px*.5) calc(16px*.6);
        box-sizing:border-box;
    }
    #top-VisualInfo dl.style2{ margin-top:0;}

    #top-VisualInfo dt{
        font-size:calc(1.8rem*.7);
        padding-bottom:calc(12px*.7);
        margin-bottom:calc(12px*.7);
    }
    
    .top-VisualInfo__subtext,
    #top-VisualInfo dt span{ font-size:calc(1.4rem*.65);}

    .top-VisualInfo__text{ font-size:calc(1.6rem*.7);}
    .top-VisualInfo__text span{ font-size:calc(2.8rem*.7);}

    #top-VisualButton{
        width:100%;
        margin-top:16px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:justify;
           -ms-flex-pack:justify;
        justify-content:space-between;
        position: relative;
        z-index: 10;
    }

    #top-VisualButton li{
        width:48.5%;
        height: 36px;
    }

    #top-VisualButton a{
        display:flex;
        align-items: center;
        justify-content: center;
        width:100%;
        height:100%;
        font-size:1.2rem;
        border-radius:18px;
    }

    #top-VisualButton .style1{
        color:#000;
        background-color: #fff;
    }

    #top-VisualButton .style2{
        color:#fff;
        background-color: #8b2642;
    }


}

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


    #top-Topics{ margin-bottom: 20px;}



    
    .top-Topics__date{
        width:70px;
        font-size:1.2rem;
    }

    .top-Topics__title { width: calc(100% - 70px);}

    #top-Topics__label::before { right: -15px;}

    .top-Topics__label--more{
        font-size:1.2rem;
        width:76px;
        padding-bottom: 8px;
    }

    .top-Topics__label--more svg{ width:6px;}

    #top-Topics__label--title,
    .top-MenuItem.is-label,
    .top-Topics__title{
        font-size:1.4rem;
    }

    .top-MenuItem a{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 4px;
    }

    .top-MenuItem__icon{ width:100%;}
    .top-MenuItem__icon svg{ transform: scale(.8);}

    .top-MenuItem__txtfield{
        flex:unset;
        text-align: center;
        margin-top:4px;
    }

    .top-MenuItem__jp{ font-size:1.3rem;}
    .top-MenuItem__en{ font-size:1rem;}

    .top-ColumnHead{
        height:46px;
        padding-left: 16px;
    }
    
    .top-ColumnHead__title{ font-size:1.6rem;}
    .top-ColumnHead__link{ width:80px;}
    
    .top-ColumnList{
        width:auto;
        margin:10px -15px 0;
    }
    
    .top-ColumnItem{ margin:0;}
    .top-ColumnItem + .top-ColumnItem{ margin-top:0;}

    .top-ColumnItem__link{
        display:block;
        padding:15px;
    }

}



@media screen and (max-width: 375px){
    /*
    #top-VisualInfo dt,
    #top-VisualInfo dt span{ display: block;}
    */
 
    #top-VisualInfo dt{
        font-size:1.2rem;
        text-align: center;
    }


}