@charset "utf-8";
 
/* main */
#main { padding-top:5rem }



/* visual */ 
#visual { margin-bottom:5rem }
.visual__img { 
    width:100% ; height:30rem ; position:relative ;
    background:url(../img/main_visual_MB.jpg) no-repeat center ; background-size:cover ;
}
.visual__img::before , .visual__title { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.visual__img::before {
    display:block ; width:100% ; height:100% ; background-color:#000000 ; opacity:0.5 ;
    content:"" ;
}
.visual__title { width:90% }
.visual__date , .visual__theme {
    display:block ; word-break:keep-all ; 
    color:#ffffff ; text-align:center ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.visual__date  { font-size:1.8rem ; line-height:2.6rem ; font-weight:500 ; margin-bottom:1rem }
.visual__theme { 
    font-family:'Black Han Sans',sans-serif ;
    font-size:4rem ; line-height:4.8rem ; letter-spacing:-0.1rem ; }



/* main-theme */
.sec__theme , .theme__item , .theme__item__warp , .theme__item__more ,
.theme__item__name , .theme__item__more { width:100% ; display:block }
.theme__item { padding:1.5rem ; border-bottom:solid 1px rgba(0,0,0,0.1) }
.theme__item__warp { max-width:60rem ; margin:auto ; position:relative }
.theme__item__tag  { padding:0.5rem 3.7rem 0.7rem 0 ; margin:0 0.5rem 0.2rem 0 ; display:inline-block ; position:relative }
.theme__item__tag > b {
    display:inline-block ;
    font-size:1.2rem ; line-height:1.8rem ; color:#7ac142 ; font-weight:600 ;
}
.theme__item__icon , .theme__item__icon::before { width:3rem ; height:3rem ; display:block ; overflow:hidden ; position:absolute  }
.theme__item__icon {  
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:100% ; 
    right:0 ; top:50% ; transform:translateY(-50%) ; 
}
.theme__item__icon::before {
    content:"" ; 
    left:50% ; top:50% ; transform:translate(-50%,-50%) scale(0.7) ; opacity:0.3 ; 
    background:url(../img/icon_sprite_MB.png) no-repeat right top ; background-size:6rem auto ;
} 
.theme__item__title , .theme__item__name { word-break:keep-all }
.theme__item__title { 
    display:inline-block ;
    font-size:2rem ; line-height:2.8rem ; color:#111111 ; font-weight:600 }
.theme__item__name  { 
    font-size:1.4rem ; line-height:2rem ; color:#444444 ;
    padding-top:1rem ;
} 
.theme__item__more  { 
    height:100% ; position:absolute ; left:0 ; top:0 ; 
    font-size:0 ; color:transparent
}

.theme__item:hover , .theme__item__tag > b , .theme__item__icon , .theme__item__icon::before , 
.theme__item__title , .theme__item__name { transition:0.3s all }
.theme__item:hover , .theme__item:focus , .theme__item:hover .theme__item__icon { border-color:#7ac142}
.theme__item:hover .theme__item__icon    { background-color:#7ac142 }
.theme__item:hover .theme__item__icon::before { background-position:right bottom ; opacity:1 ; transform:translate(-50%,-50%) scale(0.9) } 



/* main-infor */
.sec__info  { width:100% ; text-align:center ; font-size:0 ; margin-bottom:5rem } 
.info__item { 
    width:46% ; min-width:28.5rem ; height:15rem ; margin:0.5rem ; 
    display:inline-block ; overflow:hidden ; border-radius:0.4rem ;  
    position:relative ; 
} 
.info__item__img , .info__item__img::before , .info__item__img::after , .info__item__tag { transition:0.3s all } 
.info__item__img , .info__item__more , .iv__more , .info__item__img::before , .info__item__img::after {
    display:block ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    font-size:0 ; color:transparent
} 
.info__item__more , .iv__more  { width:98% ; height:98% }
.info__item__img {  
    position:relative ; transform:translate(-50%,-50%) scale(1.02) ; 
    background-repeat:no-repeat ; background-position:center ; background-size:cover ;
} 
.item1 .info__item__img { background-image:url(../img/main_img21.jpg) }
.item2 .info__item__img { background-image:url(../img/main_img22.jpg) }
.item3 .info__item__img { background-image:url(../img/main_img23.jpg) }

.info__item__img::before , .info__item__img::after { content:"" }
.info__item__img::before {  
    background:linear-gradient(to bottom, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0.4) 100%
    ); 
}
.info__item__img::after { background-color:#111111 ; opacity:0.15 }
.info__item:hover .info__item__img::after , .info__item:focus .info__item__img::after { opacity:0.3 }
.info__item:hover .info__item__img , .info__item:focus .info__item__img { transform:translate(-50%,-50%) scale(1.1) }

.info__item__box { width:100% ; position:absolute ; bottom:1.3rem ; left:0 ; text-align:left }
.info__item__tag , .info__item__title , .iv__tag { color:#ffffff }
.info__item__tag , .info__item__title { text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.info__item__tag , .iv__tag {
    display:inline-block ; 
    font-size:1.2rem ; line-height:1.6rem ; font-weight:500 ;  
    background-color:#0e1ea3 ;
} 
.info__item__tag { 
    padding:0.2rem 1.5rem 0.4rem 1rem ; border-radius:0 2rem 2rem 0 ; 
    position:absolute ; left:0 ; top:0.2rem
}

.info__item:hover .info__item__tag , .info__item:focus .info__item__tag ,
.info__item:hover .iv__tag  , .info__item:focus .iv__tag { 
    background-color:#ffffff ; color:#0e1ea3 ; 
    text-shadow:none ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.3) ;
} 
 
.info__item__title , .iv__title { 
    display:block ; font-size:1.8rem ; line-height:2.4rem ; font-weight:500 ; word-break:keep-all ;
    letter-spacing:-0.1rem ;
}
.iv__title { line-height:2.8rem }

.info__item__title        { padding:0 1rem 0 2rem ; min-height:4.8rem }
.info__item__title br     { display:none }
.item1 .info__item__title { padding-left:8.2rem }
.item2 .info__item__title { padding-left:9.6rem }
.item3 .info__item__title { padding-left:7.2rem }
 
.info__item.item4 { border:solid 1px rgba(0,0,0,0.1) ; background:url(../img/main_img13_bg.png) repeat-x left top }
.info__item.item4::before { 
    width:100% ; height:4rem ; display:block ; content:"" ; 
    background-color:#ffffff ; border-top:solid 1px rgba(0,0,0,0.1) ; 
    position:absolute ; left:0 ; bottom:0 ;
}
.info__item:hover.item4::before , .info__item:focus.item4::before { background-color:#0e1ea3 ; border:none }
.iv__img { 
    width:100% ; margin:auto ;
    height:11rem ; font-size:0 ; color:transparent ;
    background:url(../img/main_img13.jpg) no-repeat center ;  background-size:cover ; 
} 
.iv__box { 
    display:block ; width:100% ; padding:0 1rem ;
    position:absolute ; left:0 ; top:9.5rem ;
    text-align:left ;
} 
.iv__tag   { padding:0.2rem 1.5rem 0.4rem ; border-radius:2rem }
.iv__title { font-size:1.6rem ; font-weight:500 ; padding-top:0 }
.info__item , .iv__tag , .iv__title , .info__item.item4::before { transition:0.3s all }   
.info__item:hover .iv__title  , .info__item:focus .iv__title { color:#ffffff }



/* etc */
.sec__etc { width:100% ; padding:0 1.5rem ; margin-bottom:5rem ; text-align:center }
.sec__library , .sec__notice , .sec__briefing { 
    display:inline-block ; width:96% ; margin:0.5rem ;
    text-align:center ; font-size:0 ;
}



/* main-library */
.sec__library { max-width:39rem }
.sec__library::after { display:block ; content:"" ; clear:both }
.lib__item { width:48.71% ; height:10rem ; display:block ; overflow:hidden ; border-radius:0.4rem ; position:relative }
.lib__item.item1 { float:left }
.lib__item.item2 { float:right }
.lib__link , .lib__img , .lib__img::before , .lib__img::after { width:100% ; height:100% ; display:block } 
.lib__img , .lib__img::before , .lib__img::after , .lib__link , .lib__title { position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) }
.lib__img { transform:translate(-50%,-50%) scale(1.02) }
.lib__img::before , .lib__img::after { content:"" }
.lib__img::before { background-repeat:no-repeat ; background-position:center ; background-size:cover }
.item1 .lib__img::before { background-image:url(../img/main_img31.jpg) }
.item2 .lib__img::before { background-image:url(../img/main_img32.jpg) }
.lib__img::after { background-color:#000000 ; opacity:0.5 }
.lib__img::before , .lib__img::after , .lib__title { transition:0.3s all }
.lib__title { 
    display:block ; 
    font-size:1.8rem ; line-height:2.8rem ; color:#ffffff ; font-weight:500 ; text-align:center ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3)
}
.lib__link { width:94% ; height:90% }
.lib__item:hover .lib__img::before , .lib__item:focus .lib__img::before , .lib__img::after { transform:translate(-50%,-50%) scale(1.1) }
.lib__item:hover .lib__img::after , .lib__item:focus .lib__img::after { opacity:0.6 }



/* main-notice */
.sec__notice { 
    width:50% ; min-width:28rem ; max-width:39rem ; height:10rem ; overflow:hidden ; border-radius:0.4rem ;
    position:relative ;
}
.notice__img , .notice__img::before , .notice__img::after { display:block ; width:100% ; height:100% }
.notice__img { position:relative }
.notice__tag , .notice__title , .notice__img::before , .notice__img::after  { transition:0.3s all }
.notice__link , .notice__img::before , .notice__img::after {  
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%)  }
.notice__img::before , .notice__img::after { content:"" ; transform:translate(-50%,-50%) scale(1.02) }
.notice__img::before { background:url(../img/main_img41.jpg) no-repeat center ; background-size:cover }
.notice__img::after { background-color:#000000 ; opacity:0.5 }

.sec__notice:hover .notice__img::before , .sec__notice:focus .notice__img::before { transform:translate(-50%,-50%) scale(1.1) }
.sec__notice:hover .notice__img::after , .sec__notice:focus .notice__img::after   { opacity:0.7 }

.notice__link { width:96% ; max-width:26rem ; display:block ; padding:0.2rem }
.notice__tag , .bir__title { display:inline-block ; font-size:1.2rem ; line-height:1.6rem ; font-weight:500 ; color:#444444 }
.notice__tag {
    background-color:#ffd002 ; color:rgba(0,0,0,0.8) ;
    padding:0.2rem 1.5rem 0.4rem ; border-radius:2rem ;  margin-bottom:0.3rem ;
}
.notice__link:hover .notice__tag , .notice__link:focus .notice__tag { background-color:#111111 ; color:#ffd002 ; text-shadow:none }
.notice__title {
    display:block ;
    font-size:1.6rem ; line-height:2.2rem ; color:#ffffff ; font-weight:500 ; text-align:center ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; word-break:keep-all ;
}
.notice__title br { display:none }


 
/* main-briefing */
.sec__briefing { 
    width:90% ; min-width:28rem  ;  
    text-align:left ; height:auto ; display:block ; margin:3rem auto 0 }
.bir__title { display:inline-block ; font-size:1.2rem ; line-height:1.8rem ; margin-bottom:0.5rem }
.bir__list , .bir__li , .bir__link { width:100% ; display:block }
.bir__list { border-top:solid 0.2rem #0e1ea3 } 
.bir__link { 
    font-size:1.8rem ; line-height:2.2rem ; padding:0.7rem 0.1rem 0.9rem ;
    border-bottom:solid 1px rgba(0,0,0,0.1) ;
    transition:0.3s all ;
}
.bir__link:hover , .bir__link:focus { color:#111111 ; border-color:rgba(0,0,0,0.3) }


 


/* PC */
@media screen and (min-width:1024px){

    /* main */
    #main { padding-top:8rem }


    
    /* visual */ 
    #visual { 
        width:100% ; height:40rem ; overflow:hidden ; border-radius:0.4rem ; 
        position:relative ; margin-bottom:2rem 
    }
    .visual__img { height:100% ; background-image:url(../img/main_visual.jpg) }
    .visual__img::before { opacity:0.2 }
    .visual__title {
        left:0 ; top:50% ; transform:none ; 
        width:50% ; padding:1rem 3rem 0 3rem ; 
    } 
    .visual__date , .visual__theme { text-align:left }
    .visual__date  { font-size:1.8rem ; line-height:3rem ; font-weight:600 ; margin-bottom:1.5rem }
    .visual__theme { font-size:5.4rem ; line-height:6rem } 

    .sec__theme  { width:34% ; height:100% ; position:absolute ; right:0 ; top:0 }
    .sec__theme::after {
        display:block ; content:"" ; width:100% ; height:1px ; 
        position:absolute ; right:0 ; top:50% ;
        background-color:rgba(255,255,255,0.1) ;
        background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 15%,rgba(255,255,255,0.1) 100%);  
    }
    .theme__item , .theme__item__warp {  padding:0 ; margin:0 }
    .theme__item { 
        display:block ; width:100% ; height:50% ; background-color:rgba(0,0,0,0.3) ;
        position:absolute ; right:0 ; border:none
    } 
    .theme__item:hover , .theme__item:focus { background-color:rgba(0,0,0,0.6) }
    .theme__item.item1 { top:0 ; height:50%  }
    .theme__item.item2 { bottom:0 ; height:50%  }
    .theme__item__warp {  display:block ; width:85% ; position:absolute ; left:50% ; transform:translateX(-50%) }
    .theme__item.item1 .theme__item__warp { bottom:4rem }
    .theme__item.item2 .theme__item__warp { top:4rem }
    .theme__item__tag > b , .theme__item__title , .theme__item__name { text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
    .theme__item__tag > b { color:#d8ff00 ; font-weight:500 ; letter-spacing:0.5px }

    .theme__item__icon { border-color:rgba(255,255,255,0.15) ;}
    .theme__item__icon::before { opacity:0.5 ; background-position:right bottom }

    .theme__item__title , .theme__item__name { color:#ffffff ; display:block ; width:100% }
    .theme__item__title { font-size:2.6rem ; line-height:3.6rem }
    .theme__item__name  { opacity:0.6 } 
    .theme__item:hover , .theme__item:focus  { background-color:rgba(0,0,0,0.2) }
    .theme__item:hover .theme__item__name    { opacity:1 } 
 
 

    /* main-infor */
    .sec__info { margin-bottom:2rem }
    .sec__info::after , .sec__etc::after { display:block ; content:"" ; clear:both } 
    .info__item { min-width:auto ; width:23.75% ; display:block ; margin:0 1.66% 0 0 ; float:left }
    .info__item:last-child { float:right ; margin:0 }
    .info__item__title br { display:block }

    

    /* etc */
    .sec__etc { padding:0 ; margin:0 }
    .sec__library , .sec__notice , .sec__briefing { display:block ; margin:0 ; max-width:none ; min-width:auto ; height:10rem }
    .sec__library { width:32.5% ; margin-right:2.08% }
    .sec__notice , .sec__briefing { width:31.66% } 
    .sec__library , .sec__notice  { float:left } 
    .sec__briefing { float:right ; position:relative ; border-top:solid 0.2rem #0e1ea3 } 
    .notice__title br { display:block }
    .notice__link { max-width:none }



    /* main-briefing */
    .sec__briefing::after {
        display:block ; content:"" ; width:18% ; height:1px ;
        background-color:rgba(0,0,0,0.1) ;
        position:absolute ; left:0 ; bottom:0
    }
    .bir__title { 
        width:18% ;
        position:absolute ; left:0 ; top:0.8rem 
    }
    .bir__list { padding-left:18% ; border:0 ; padding-top:0.2rem }
    .bir__link { 
        font-size:1.6rem ; line-height:2.6rem ;
        padding:0.2rem 0.1rem 0.3rem ;
        word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis 
    } 


    /* 2508 */
    .bir__title { top:1.6rem }
    .bir__link  { padding:1rem 0.1rem 1.1rem }
} 



/* PRINT */
@media print { 
    .sec__library , .sec__notice { width:46% ; margin:0 1% ; max-width:39rem }
}