@charset "UTF-8";
/* CSS Document */

/*######################################　　　汎　用　　　#######################################*/
h3{text-align:center;font-weight:700;color:#fe9;}
h3 span{color:#ccc}
.indexbox,.gallerybox,.number{display:flex;flex-wrap:wrap;width:100%;}
.indexbox{justify-content:space-between;}
.indexbox>div{position:relative;opacity:0;transition:all 1s}
.indexbox>div.active{opacity:1}
.indexbox>div::after{content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-image:url('../img/news/news_frm.png');background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.indexbox>div a img{opacity:0.5;filter:blur(3px)}
.indexbox>div a:hover img{opacity:1;filter:blur(0)}
.indexttl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 0 20px #000,0 0 10px #000;font-weight:900;white-space:nowrap;color:#fe9;z-index:99}
.indexttl p{font-size:0.5em;color:#fff}
.gallerybox div{position:relative;display:flex;justify-content:center;opacity:0;transition:all 1s}
.gallerybox div::after{content:'';position:absolute;display:block;width:100%;height:100%;background-image:url('../img/news/news_frm.png');background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.gallerybox div.active{opacity:1}
.gallerybox div img{width:100%;height:100%;object-fit:contain;outline:none}
.gallerybox div img.cover{object-fit:cover}
.number{justify-content:center;align-items:center;line-height:1}
.number *{display:inline-block;padding:0 10px;color:#da3;cursor:pointer;transition:.2s ease}
.number *:hover{color:#fe9}
.current{font-size:1.5em;font-weight:900}

/*######################################　　　P　C　　　#######################################*/
@media screen and (max-width:1200px){
    .gallerybox{justify-content:space-between;}
}
@media screen and (min-width:900px){
h3{font-size:4.8rem}
h3 span{font-size:2.4rem}
.indexbox>div{width:48.33%}
.indexbox>div:nth-of-type(n+3){margin-top:40px}
/*.gallerybox div{width:calc((100% - 4.5%) / 4);margin:20px 1.5% 0 0}*/
.gallerybox div{width: 280px;height: 200px;margin: 20px 10px 0 10px;}
.indexttl{font-size:6.0rem}
.number{margin-top:50px;font-size:12px}
}

/*######################################　　　S　P　　　#######################################*/
@media screen and (max-width:900px){
h3{font-size:3.0rem}
h3 span{font-size:1.2rem}
.indexbox>div{width:96vw;margin:2vw 2vw 0}
.gallerybox div{width:47vw;height:33vw;margin:2vw 0 0 2vw}
.indexttl{font-size:4rem}
.number{margin-top:5vw;font-size:3vw}
}