@charset "utf-8";
/* MOBILE */

#main { margin-bottom:7rem }



/* visual */ 
#visual , .visual__img , .visual__img::before , .visual__img::after { width:100% ; height:50rem ; display:block }
#visual { overflow:hidden ; background-color:#313131 ; margin-bottom:5rem }
#visual , .visual__img { position:relative }
.visual__img::before , .visual__img::after { 
    content:"" ; position:absolute ; left:50% ; top:50% ; 
    transform:translate(-50%,-50%) scale(1.01) ; box-sizing:border-box ;
}
.visual__img::before { background:url(../img_sub/visual1_MB.jpg) no-repeat center ; background-size:cover }
.visual__img::after  { background-color:#000000 ; opacity:0.6 }
#visual:hover .visual__img::before { transform:translate(-50%,-50%) scale(1.1) }
#visual:hover .visual__img::after  { opacity:0.7 }

.visual__img::before , .visual__img::after , .visual__link__title , .visual__link__writer ,
.visual__link__more::before , .visual__link__more::after { transition:0.3s all }

.visual__link { 
    display:block ; width:80% ; 
    position:absolute ; left:50% ; bottom:20% ; transform:translateX(-50%) 
}
.visual__link__title , .visual__link__writer { 
    color:#ffffff ; text-align:center ; word-break:keep-all ; 
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) }
.visual__link__title {
    display:block ; margin-bottom:1.5rem ;
    font-size:3rem ; line-height:3.6rem ;  ; font-weight:bold ;  
} 
.visual__link__title br { display:none }
.visual__link__more     {
    display:block ; width:50% ; max-width:24rem ; margin:0 auto 1.5rem ;
    position:relative ;
}
.visual__link__more::before , .visual__link__more::after { 
    display:block ; content:"" ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    background-color:#ff9828
}
.visual__link__more::before { width:100% ; height:1px }
.visual__link__more , .visual__link__more::after { height:3.1rem }
.visual__link__more::after {
    width:3.1rem ; border-radius:0.4rem ;
    background-image:url(../img/icon_sprite.png) ; background-repeat:no-repeat ; 
    background-position:-12.5rem -4.5rem ; background-size:52rem ;
}
.visual__link__writer {
    display:block ; opacity:0.7 ;
    font-size:1.8rem ; line-height:2.4rem ; font-weight:300 ;
}
.visual__link:hover .visual__link__title  { color:#ff9828 }
.visual__link:hover .visual__link__writer { opacity:1 }
.visual__link:hover .visual__link__more::after { background-position:-12.5rem -0.5rem }



/* scroll */
.scroll { display:none }



/* contents list */
.cts__list { 
    width:100% ; display:flex ; flex-wrap:wrap ; justify-content:center ; align-items:stretch ;
    font-size:0 ;
}
.cts__item { 
    width:48% ; max-width:48rem ; min-width:30rem ; margin:1rem 0.5rem ;
    display:block ; overflow:hidden ; border-radius:0.6rem ; padding-top:23rem ;
    position:relative ;
}
.cts__box {
    display:block ; overflow:hidden ; width:100% ; height:100% ; padding:2rem 4.1666% 4rem ;
    background-color:#ffffff ; border-radius:0.6rem 0.6rem 0 0 ;
    box-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    position:relative
}
.cts__item:last-child .cts__box { padding-bottom:1.5rem }
.cts__item__img { 
    display:block ; width:100% ; height:24.5rem ;
    position:absolute ; left:0 ; top:0 ; z-index:-1 ;
}
.cts__item__img::before , .cts__item__img::after {
    display:block ; content:"" ; width:100% ; height:100% ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01)  
}
.cts__item__img::before { background:no-repeat center }
.cts__item__img::after  { background-color:#000000 ; opacity:0.1 }
.item1 .cts__item__img::before  { background-image:url(../img/thum_1.jpg) }
.item2 .cts__item__img::before  { background-image:url(../img/thum_2.jpg) }
.item3 .cts__item__img::before  { background-image:url(../img/thum_3.jpg) }
.item4 .cts__item__img::before  { background-image:url(../img/thum_4.jpg) }
.item5 .cts__item__img::before  { background-image:url(../img/thum_5.jpg) }
.item6 .cts__item__img::before  { background-image:url(../img/thum_6.jpg) }
.item7 .cts__item__img::before  { background-image:url(../img/thum_7.jpg) }
.item8 .cts__item__img::before  { background-image:url(../img/thum_8.jpg) }
.item9 .cts__item__img::before  { background-image:url(../img/thum_9.jpg) }
.item10 .cts__item__img::before { background-image:url(../img/thum_10.jpg) }
.item11 .cts__item__img::before { background-image:url(../img/thum_11.jpg) }
.item12 .cts__item__img::before { background-image:url(../img/thum_12.jpg) }
.item13 .cts__item__img::before { background-image:url(../img/thum_13.jpg) }
.item14 .cts__item__img::before { background-image:url(../img/thum_14.jpg) }
.item15 .cts__item__img::before { background-image:url(../img/thum_15.jpg) }

.cts__item:hover .cts__item__img::before { transform:translate(-50%,-50%) scale(1.1) } 
.cts__item:hover .cts__item__img::after  { opacity:0.3 }

.cts__title , .cts__writer { word-break:keep-all }
.cts__title {
    font-size:2rem ; line-height:2.8rem ; font-weight:bold ; color:#111111 ;  
    padding-bottom:1rem 
} 
.cts__writer {
    position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ;
    padding:1rem 0 ; width:91.6666% ; 
    font-size:1.4rem ; line-height:2rem ; color:#595959 ;
    word-wrap:break-word ; white-space:nowrap ; overflow:hidden ; text-overflow:ellipsis
}
.cts__writer::before , .cts__writer::after {
    display:block ; overflow:hidden ; height:1px ; content:"" ;
    position:absolute ; left:0 ; top:0 ;
}
.cts__writer::before {  background-color:rgba(0,0,0,0.1) ; width:100% }
.cts__writer::after  {  background-color:#ff9828 ; width:0 }
.cts__item:hover .cts__writer::after , .cts__item:focus .cts__writer::after { width:100% }

.cts__item:hover .cts__writer , .cts__item:focus .cts__writer { color:#111111 }
.cts__item__link {  
    display:block ; overflow:hidden ; content:"" ; width:4rem ; height:4rem ; border-radius:100% ;
    background:url(../img/icon_sprite.png) no-repeat -15.5rem -0.5rem #ff9828 ; background-size:65rem auto ;
    position:absolute ; right:1rem ; top:1rem
}
.cts__item:hover .cts__item__link ,
.cts__item:focus .cts__item__link { background-position:-15.5rem -5.5rem }

.cts__title , .cts__item__link , .cts__writer , .cts__writer::before , .cts__writer::after ,
.cts__item__img::before , .cts__item__img::after { transition:0.3s all }
 


 

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

    #visual , .cts__list { width:98% ; max-width:150rem ; margin:auto }
    #main { padding-top:12rem }


    
    /* visual */  
    #visual  { border-radius:0.8rem ; margin-bottom:3rem }
    #visual , .visual__img , .visual__img::before , .visual__img::after { height:66rem }
    .visual__img::before { background:url(../img_sub/visual1_PC.jpg) }
    .visual__link        { bottom:20% }
    .visual__link__title { font-size:5rem ; line-height:5.6rem }
    .visual__link__title , .visual__link__more { margin-bottom:2.5rem }
    .visual__link__title br { display:block }
    .visual__link__writer { font-size:2rem ; line-height:2.8rem }
    .visual__link__more   { width:30.1rem ; max-width:none }
    .visual__link__more , .visual__link__more::after { height:5rem }
    .visual__link__more::after { 
        width:5rem ;
        background-position:-15rem -5rem ; background-size:65rem ;
    }
    .visual__link:hover .visual__link__more::after { background-position:-15rem 0 }



    /* scroll */
    .scroll , .scroll::before , .scroll::after { display:block ; width:5rem ; height:4rem }
    .scroll , .scroll::before , .scroll::after { transition:all 0.3s }
    .scroll { 
        opacity:0.7 ;
        margin:0 auto 5rem ; position:relative ;
        font-size:0 ; color:transparent ;   
    }
    .scroll::before , .scroll::after {
        content:"" ; position:absolute ; left:0 ; top:0 ;  
        background:url(../img/scroll.png) no-repeat left top ; background-size:5rem auto
    }
    .scroll::after  { background-position:left bottom ; opacity:0 }
    .scroll:hover::before { opacity:0 }
    .scroll:hover , .scroll:hover::after { opacity:1 }



    /* contents list */
    .cts__list   { justify-content:space-between }
    .cts__item   { width:32% ; max-width:none ; min-width:auto ; margin:0 0 4rem } 
    .cts__title  { padding-right:4.5rem ; font-size:2.4rem ; line-height:3.2rem ; padding-bottom:1.3rem ; border:none }
    .cts__writer { padding:1.2rem 0 1.4rem }
    .cts__item__link::before { right:2rem ; top:24.6rem }

    .cts__item.item10       { width:100% ; padding:0 ; margin:0 }
    .item10 .cts__item__img { display:none }
    .item10 .cts__title { margin:0 ; padding:0 ; }
    .cts__item:last-child .cts__box ,
    .item10 .cts__box   { padding:3rem 6rem 3.2rem 2rem }
    .item10 .cts__item__link { top:2.7rem }
} 
 




/* PRINT */
@media print {   }