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

/* body */
body  { background:linear-gradient(#313131 0rem ,#313131 30rem , #ffffff 30rem , #ffffff 100%) }
#main { margin-bottom:8rem } 
.sub__index , .visual__writer b , .sec , .arts__list , .arts__PN__list { width:96% ; margin:auto ; display:block }

  


/* visual */
#visual , .visual__img { width:100% }
#visual { margin-bottom:7rem }  
.visual__img { 
    background:url(../img_sub/visual_MB.jpg) no-repeat center ; background-size:cover ; 
    position:relative ; height:40rem
}
#inno1 .visual__img  { background-image:url(../img_sub/visual1_MB.jpg) }
#inno2 .visual__img  { background-image:url(../img_sub/visual2_MB.jpg) }
#inno3 .visual__img  { background-image:url(../img_sub/visual3_MB.jpg) }
#inno4 .visual__img  { background-image:url(../img_sub/visual4_MB.jpg) }
#inno5 .visual__img  { background-image:url(../img_sub/visual5_MB.jpg) }
#inno6 .visual__img  { background-image:url(../img_sub/visual6_MB.jpg) }
#inno7 .visual__img  { background-image:url(../img_sub/visual7_MB.jpg) }
#inno8 .visual__img  { background-image:url(../img_sub/visual8_MB.jpg) }
#inno9 .visual__img  { background-image:url(../img_sub/visual9_MB.jpg) }
#inno10 .visual__img { background-image:url(../img_sub/visual10_MB.jpg) }
#inno11 .visual__img { background-image:url(../img_sub/visual11_MB.jpg) }
#inno12 .visual__img { background-image:url(../img_sub/visual12_MB.jpg) }
#inno13 .visual__img { background-image:url(../img_sub/visual13_MB.jpg) }
.visual__img::before {
    display:block ; content:"" ; width:100% ; height:100% ;
    background:linear-gradient(rgba(0,0,0,0.1) 0% ,rgba(0,0,0,0.1) 30% , rgba(0,0,0,0.5) 60% , rgba(0,0,0,0.8) 100%) ;
    position:absolute ; left:0 ; top:0
}
.visual__writer { border-bottom:solid 1px #ff9828 }
.visual__writer b {
    display:block ; font-size:1.6rem ; line-height:2.8rem ;
    padding:0.7rem 0 ; 
}
.visual__writer li b { border-bottom:dashed 1px rgba(0,0,0,0.1) }
.visual__writer li:last-child b { border-bottom:none }

.visual__title {
    width:80% ; display:block ; 
    font-size:3rem ; line-height:3.6rem ; color:#ff9828 ; font-weight:bold ; text-align:center ;
    
    position:absolute ; bottom:4rem ; left:50% ; transform:translateX(-50%) ;
    text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
}
.visual__title br { display:none }
 


/* index */
.sub__index    { margin-bottom:8rem } 
.sub__index li { 
    background-color:#313131 ; overflow:hidden ; border-radius:0.4rem ; 
    margin-bottom:0.5rem ; padding:0.7rem 1.5rem ;
    font-size:2rem ; line-height:2.6rem ; color:#ffffff ; font-weight:600 ; 
}



/* section */ 
.sec { margin-bottom:8rem }
.sec__sub { margin-bottom:6rem }
.inno__p , .arts__link , .note__list li , .list li { font-size:1.6rem ; line-height:2.8rem }
.inno__p , .list { text-align:left ;  margin-bottom:3rem }
.inno__p a:hover , .note__list li a:hover { text-decoration:underline } 
.sec:last-child , .inno__p:last-child , .list:last-child { margin-bottom:0 }
.sec__title__h3 , .sec__title__h4 , .sec__tag__title , .sec__title__h5 { color:#111111 ; font-weight:bold }
.sec__title__h3 { font-size:2.6rem ; line-height:3.4rem ; margin-bottom:1.5rem ; letter-spacing:-0.1rem } 
.sec__title__h4 , .sec__tag__title { font-size:2.2rem ; line-height:3rem ; margin-bottom:1.5rem ; letter-spacing:-0.05rem } 
.sec__title__h4 > b { 
    font-size:inherit ; line-height:inherit ; color:inherit ; font-weight:inherit ;
    display:inline-block ; 
}
.sec__title__h5 { 
    font-size:2rem ; line-height:3rem ; color:#444444 ;
    margin-bottom:1rem ; padding-left:1rem ;
    position:relative }
.sec__title__h5::before {
    display:block ; content:"" ; width:0.3rem ; height:1.5rem ; 
    background-color:#ff9828 ; opacity:0.8 ;
    position:absolute ; left:0 ; top:0.8rem ; 
}    
.sec__title__h4 > b::after {
    display:inline-block ; content:"" ; width:0.4rem ; height:0.4rem ;
    background-color:#ff9828 ; margin-left:0.5rem ;
    position:relative ; top:-1rem
}
.sec__tag__title > b { 
    display:inline-block ; background-color:#111111 ; padding:0 0.8rem ; border-radius:0.4rem ; 
    color:#ffffff ; font-size:80% ;
} 
 
.list li { 
    text-align:justify ;
    margin-bottom:1rem ; padding-left:1rem ; position:relative }
.list li:last-child { margin-bottom:0 }
.list li > b { font-weight:bold ; color:#111111 }
.list li::before {
    display:block ; content:"" ; width:0.3rem ; height:0.3rem ;
    background-color:#111111 ; opacity:0.5 ;
    position:absolute ; left:0 ; top:1.2rem
}




/* articles */   
#articles , #arts_PN { width:100% ; padding:6rem 0 ; display:none } 
#articles , #arts_PN , .arts__cover { background-color:#ededed }

.arts__container , .arts__PN__container { width:98% ; max-width:150rem ; padding:0 6rem ; position:relative ; margin:auto }

.arts__title , .arts__PN__title  { 
    font-size:3rem ; line-height:3.6rem ; color:#111111 ; font-weight:bold ; text-align:center ;
    width:90% ; margin:0 auto 2.5rem ; letter-spacing:-0.1rem }



/* articles PREV+NEXT */  
.arts__PN__link , .arts__PN__link > b , .arts__PN__link > span { transition:0.3s all }
#arts_PN { display:block }
.arts__PN__item { margin-bottom:1rem }
.arts__PN__item:last-child { margin-bottom:0 }
.arts__PN__link { 
    display:block ; border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.4rem ;
    padding:1rem 1.5rem ;
}
.arts__PN__link > b {
    display:inline-block ; padding:0.2rem 1rem 0.4rem ; margin:0 0.5rem 0.2rem 0 ; border-radius:0.4rem ;
    font-size:1.2rem ; line-height:1.8rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background-color:#444444 ; 
}
.arts__PN__link > span {  
    font-size:1.6rem ; line-height:2.6rem ;
}
.arts__PN__link:hover , .arts__PN__link:focus { background-color:#ffffff ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.2) }
.arts__PN__link:hover > b , .arts__PN__link:focus > b { background-color:#ff9828 }



/* image */
.img , .img img , .img__line , .img__caption , .face , .face img , .img__line::before , .face::before { width:100% }
.img img , .img__line , .img__line::before , .face , .face img , .face::before  { border-radius:0.6rem }
.img {  max-width:60rem ; margin:0 auto 4rem } 
.img__line , .face  { position:relative }
.img__line::before , .face::before {
    display:block ; content:"" ; height:100% ; box-sizing:border-box ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
    border:solid 1px rgba(0,0,0,0.1)
}  
.img:last-child { margin-bottom:0 }

.img__caption {
    display:block ; padding-top:0.7rem ; 
    font-size:1.8rem ; line-height:2.8rem ; text-align:left ;
}
.img__tag {
    display:inline-block ; overflow:hidden ; border-radius:0.4rem ; padding:0.4rem 1rem 0.6rem ;
    font-size:1.4rem ; line-height:1.8rem ; color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ;
    background-color:#444444 ; letter-spacing:0.05rem ;
}

.face { max-width:32rem ; position:relative ; background-color:#ffffff ; margin:0 auto 4rem }
.face_caption , .face__name {  text-align:left }
.face_caption { padding:1rem 1rem 1.5rem ; font-size:1.6rem ; line-height:2.6rem }
.face__name { 
    display:block ; letter-spacing:-0.05rem ; margin-bottom:0.5rem ;
    font-size:2.2rem ; line-height:3rem ; font-weight:700 ; color:#111111 
}
 
.face__group { width:100% ; text-align:center ; font-size:0 ; margin:0 auto 2rem }
.face__group .face { 
    max-width:21rem ;
    display:inline-block ; margin:0 0.5rem 2rem 
} 

.imgs { padding-top:2rem ; margin:0 auto 4rem }
.imgs > .img { max-width:59rem }
.imgs > .img:last-child { margin-bottom:0 }



/* note */
.note { 
    width:100% ; box-sizing:border-box ;  border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ; 
    padding:1.5rem 2rem ; margin-bottom:1rem ;
}
.note:last-child { margin-bottom:0 }
.note__title { 
    font-size:2rem ; line-height:3rem ; font-weight:bold ; color:#ff9828 ;
    border-bottom:dashed 1px rgba(0,0,0,0.1) ; padding-bottom:0.5rem ; margin-bottom:1rem ;
}
.note__list li { 
    text-align:left ;  margin-bottom:2rem ; 
    position:relative ; padding-left:2rem } 
.note__list li:last-child { margin-bottom:0 }
.inno__sup { font-size:70% ; position:relative ; top:-0.3rem }
.note__list li .inno__sup { position:absolute ; left:0 } 
.note__list li > b  { font-weight:bold ; color:#111111 }
.note__list.none li { padding-left:0.2rem }



/* people */
.people__all { 
    width:100% ; margin-bottom:5rem ;
    display:flex ; flex-wrap:wrap ; justify-content:center ;
    font-size:0 }   
.people , .people::after { border-radius:0.6rem }
.people img { width:100% ; border-radius: 0 0 0.6rem 0.6rem }
.people { 
    width:18rem ; margin:0 0.5rem 2rem ;
    position:relative ; overflow:hidden ; 
}
 
.people::after { 
    display:block ; content:"" ; width:100% ; height:100% ; 
    box-sizing:border-box ; border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
    
.people__caption { 
    display:block ; padding:1rem 1.5rem 1.5rem ;
    font-size:1.6rem ; line-height:2.4rem ; text-align:left ;
}


 


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

    /* body */
    body  { 
        background:url(../img/bg_txt.png) no-repeat right top ,
        linear-gradient(#313131 0rem ,#313131 66rem , #ffffff 66rem , #ffffff 100%) 
    }
    #visual , .sub__index , .visual__writer b , .sec , .arts__container { width:98% ; max-width:150rem }
    .visual__title , .visual__writer b , .sub__index , .sec { display:block ; width:94% ; max-width:120rem ; margin:auto }
 


    /* visual */
    #visual { margin:0 auto 7rem } 
    .visual__img { overflow:hidden ; border-radius:0.8rem ; height:80rem ; background-image:url(../img_sub/visual_PC.jpg) }
     
    #inno1 .visual__img  { background-image:url(../img_sub/visual1_PC.jpg) }
    #inno2 .visual__img  { background-image:url(../img_sub/visual2_PC.jpg) }
    #inno3 .visual__img  { background-image:url(../img_sub/visual3_PC.jpg) }
    #inno4 .visual__img  { background-image:url(../img_sub/visual4_PC.jpg) }
    #inno5 .visual__img  { background-image:url(../img_sub/visual5_PC.jpg) }
    #inno6 .visual__img  { background-image:url(../img_sub/visual6_PC.jpg) }
    #inno7 .visual__img  { background-image:url(../img_sub/visual7_PC.jpg) }
    #inno8 .visual__img  { background-image:url(../img_sub/visual8_PC.jpg) }
    #inno9 .visual__img  { background-image:url(../img_sub/visual9_PC.jpg) }
    #inno10 .visual__img { background-image:url(../img_sub/visual10_PC.jpg) }
    #inno11 .visual__img { background-image:url(../img_sub/visual11_PC.jpg) }
    #inno12 .visual__img { background-image:url(../img_sub/visual12_PC.jpg) }
    #inno13 .visual__img { background-image:url(../img_sub/visual13_PC.jpg) }
 
    .visual__title       { text-align:left ; font-size:5rem ; line-height:5.8rem ; bottom:5rem }
    .visual__title br    { display:block }
    .visual__writer      { padding:0 }
    .visual__writer b    { font-size:2rem ; line-height:2.8rem ; padding:1.5rem 0 }
    .visual__writer li b { padding:0.7rem 0 }
    .visual__writer ul   { padding:0.5rem 0 }

    

    /* index */
    .sub__index    { margin-bottom:6rem } 
    .sub__index li { 
        font-size:2.4rem ; line-height:3rem ;  
        padding:1.2rem 3rem ;
    }



    /* sec */
    .sec { margin-bottom:10rem }
    .sec__sub { margin-bottom:8rem }
    .sec__sub:last-child { margin-bottom:0 }
    .inno__p , .note__list li , .list li { font-size:2rem ; line-height:3.6rem }
    .inno__p { margin-bottom:4rem }
    .sec__title__h3 { font-size:3rem ; line-height:4rem }
    .sec__title__h4 { font-size:2.6rem ; line-height:3.4rem }
    .sec__title__h4 > b::after { width:0.5rem ; height:0.5rem ; top:-1.5rem }
    .sec__title__h5 { font-size:2.2rem ; padding-left:1.2rem }
    .sec__title__h5::before { top:0.7rem ; height:1.6rem }  
 
    .list li::before {
        width:0.4rem ; height:0.4rem ;
        top:1.6rem
    }


    
    /* articles */  
    #articles    { display:block ; overflow:hidden }   
    .arts__container { position:relative }
    .arts__slide , .arts__list { display:block } 
    .arts__slide { padding:0.2rem 0 }
    .arts__list  { position:relative ; width:200% ; transition:0.5s all }  
    .arts__list::after { display:block ; content:"" ; clear:both }
    .arts__item  { width:9.2592% ; margin:0 0.3703% 0 ; float:left }
    .arts__link  {
        display:block ;
        position:relative ; border-radius:0.4rem ;
        border-radius:0 ; border:0 ; padding:18rem 0 0 ; 
        font-size:1.6rem ; line-height:2.4rem ; text-align:left ;  
    }  

    .arts__link::before {
        display:block ; content:"" ; width:0.3rem ; height:0.3rem ; 
        background-color:#000000 ; opacity:0.3 ;
        position:absolute ; left:1.3rem ; top:1.7rem
    }

    .arts__img { 
        display:block ; overflow:hidden ; width:100% ; height:17rem ; border-radius:0.6rem ; margin-bottom:1rem ;
        position:absolute ; left:0 ; top:0
    } 
    .arts__img::before , .arts__img::after {
        transition:0.3s all ;
        display:block ; content:"" ; width:100% ; height:100% ; 
        position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) scale(1.01) ;
    }
    .arts__img::before { background:no-repeat center ; background-size:cover }
    .arts__img::after  { background-color:#000000 ; opacity:0.2 }
    .item1 .arts__img::before { background-image:url(../img/thum_1.jpg) }
    .item2 .arts__img::before { background-image:url(../img/thum_2.jpg) }
    .item3 .arts__img::before { background-image:url(../img/thum_3.jpg) }
    .item4 .arts__img::before { background-image:url(../img/thum_4.jpg) }
    .item5 .arts__img::before { background-image:url(../img/thum_5.jpg) }
    .item6 .arts__img::before { background-image:url(../img/thum_6.jpg) }
    .item7 .arts__img::before { background-image:url(../img/thum_7.jpg) }
    .item8 .arts__img::before { background-image:url(../img/thum_8.jpg) }
    .item9 .arts__img::before { background-image:url(../img/thum_9.jpg) }
    .item10 .arts__img::before { background-image:url(../img/thum_10.jpg) }
    .item11 .arts__img::before { background-image:url(../img/thum_11.jpg) }
    .item12 .arts__img::before { background-image:url(../img/thum_12.jpg) }
 
    .arts__link:hover , .arts__link:focus { background:none ; box-shadow:none }

    .arts__link:hover .arts__img::before , .arts__link:focus .arts__img::before { transform:translate(-50%,-50%) scale(1.1) }
    .arts__link:hover .arts__img::after , .arts__link:focus .arts__img::after   { opacity:0 }
     
    .now .arts__link  { 
        background-color:#111111 ; border-radius:0.8rem ;
        color:#ffffff ; padding-left:1rem ; padding-right:1rem ; padding-bottom:1.5rem ;
    }
  
    .arts__link , .arts__link::before ,
    .arts__arrow , .arts__arrow::before { transition:0.3s all }

    .arts__arrow {
        width:5rem ; height:5rem ; display:block ; overflow:hidden ; border-radius:100% ; 
        font-size:0 ; color:transparent ; box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.1) ;
        background-color:#ffffff ; position:absolute ; top:12rem  }
    .arts__arrow.left  { left:0 }
    .arts__arrow.right { right:0 }

    .arts__arrow::before {
        opacity:0.5 ;
        width:0.8rem ; height:0.8rem ; display:block ; content:"" ; border:solid 1px #111111 ;
        position:absolute ; top:50% ; transform: translate(-50%,-50%) rotate(45deg) 
        
    } 
    .arts__arrow.left::before  { left:55% ; border-right:none ; border-top:none }
    .arts__arrow.right::before { left:45% ; border-left:none ; border-bottom:none }

    .arts__cover {
        display:block ; width:100% ; height:100% ; 
        position:absolute ; top:0
    }
    .arts__cover.left  { left:-100% ; margin-left:6rem }
    .arts__cover.right { right:-100% ; margin-right:6rem }




    /* articles PREV+NEXT */  
    #arts_PN { display:none }



    /* image */
    .img.right , .face , .people__all.right { float:right ; margin:0.8rem 0 0.5rem 5rem }
    .imgs::after { display:block ; content:"" ; clear:both }
    .imgs > .img { margin:0 ; width:49.1666% }
    .imgs > .img:first-child { float:left } 
    .imgs > .img:last-child  { float:right } 


    
    /* face */
    .face__group { width:100% ; max-width:87rem ; margin:0 auto 4rem ; display:flex ; justify-content:space-between  }
    .face__group .face { 
        float:none ; display:block ; margin:0 ;
        width:24.1379%
    } 
 


    /* note */
    .note { padding:2rem 4rem 2rem 26rem ; position:relative }
    .note__title { 
        width:20rem ; border:none ; margin:0 ; padding:0 ;
        position:absolute ; left:4rem ; top:2.9rem 
    }
    .inno__sup     { font-size:60% }
    .note__list li { 
        border-bottom:dashed 1px rgba(0,0,0,0.1) ; 
        margin-bottom:0 ; padding-top:1rem ; padding-bottom:1rem ;
        line-height:2.8rem ;
    }
    .note__list li:last-child { border-bottom:none }
    .note__list li .inno__sup { top:0.8rem } 



    /* people */
    .people__all { display:flex ; flex-wrap:nowrap ; justify-content:space-between }
    .people { margin:0 } 
   
} 
 




/* PRINT */
@media print {   }