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

/* ::::::::::::::::::::::::::::::::: FOR TOP PAGE ::::::::::::::::::::::::::::::::: */


/*  MAIN VISUAL */
div.mainVisualBlock{margin: 0 0 20px;}
div.mainVisualBlock img{display: block;}

/* MIDDLE LINK */
div.indexLinkWrap{}

div.indexLinkWrap ul.mainList{display: flex; justify-content: space-between; width: 100%; width: calc(100% + 20px); margin: 0 -10px 20px;}
div.indexLinkWrap ul.mainList li{padding: 0 10px;}
div.indexLinkWrap ul.mainList li a{display: block; position: relative;}
div.indexLinkWrap ul.mainList li a p.img{vertical-align: middle;}
div.indexLinkWrap ul.mainList li a p.title{position: absolute; width: 100%; color: #FFF; font-size: 1.45rem; left: 0; bottom: 15px; z-index: 10;}
div.indexLinkWrap ul.mainList li a p.title.black{color: #222;}
div.indexLinkWrap ul.mainList li a div.newsInner{position: absolute; width: 45%; max-height: 145px; left: 8%; top: 0; bottom: 0; margin: auto 0;}
div.indexLinkWrap ul.mainList li a div.newsInner p{color: #FFF; text-align: left; font-size: 1.2rem; line-height: 20px;}
div.indexLinkWrap ul.mainList li a div.newsInner p.cap{font-size: 3.3rem; line-height: 30px; margin: 0 0 15px;}
div.indexLinkWrap ul.mainList li a div.newsInner p.txt{max-height: 60px; overflow: hidden; margin: 0 0 20px;}
div.indexLinkWrap ul.mainList li a div.newsInner p.date{}

div.indexLinkWrap ul.mainList li a::after{position: absolute; content: ""; background: rgba(30,30,30,0.3); width: 100%; height: 100%; left: 0; top: 0; z-index: 5; opacity: 0; transition: opacity 0.3s ease;}
div.indexLinkWrap ul.mainList li a:hover::after{opacity: 1;}
div.indexLinkWrap ul.mainList.top li{width: 50%;}
div.indexLinkWrap ul.mainList.middle li{width: 75%;}
div.indexLinkWrap ul.mainList.middle li:last-child{width: 25%;}
div.indexLinkWrap ul.mainList.bottom li{width: 100%;}

div.indexLinkWrap ul.partnerList{display: flex; justify-content: space-between; width: 100%; width: calc(100% + 20px); margin: 0 -10px 20px;}
div.indexLinkWrap ul.partnerList li{padding: 0 10px 0; width: 33.33%;}
div.indexLinkWrap ul.partnerList li a{display: block; padding: 15px 0 45px; background: #FFF; position: relative;}
div.indexLinkWrap ul.partnerList li a::after{position: absolute; content: ""; background: rgba(30,30,30,0.3); width: 100%; height: 100%; left: 0; top: 0; z-index: 5; opacity: 0; transition: opacity 0.3s ease;}
div.indexLinkWrap ul.partnerList li a:hover::after{opacity: 1;}
div.indexLinkWrap ul.partnerList li a p.title{position: absolute; width: 100%; color: #333; font-size: 1.45rem; left: 0; bottom: 15px; z-index: 10;}

div.indexLinkWrap p.bottomBn{margin: 0 0 20px;}


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

/* ::::::::::::::::::::::::::::::::: SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 799px){
    
    /*  MAIN VISUAL */
    div.mainVisualBlock{}
    div.mainVisualBlock img{}

    /* MIDDLE LINK */
    div.indexLinkWrap{}

    div.indexLinkWrap ul.mainList{display: block; width: 100%; margin: 0;}
    div.indexLinkWrap ul.mainList li{padding: 0; margin: 0 0 20px; width: 100%;}
    div.indexLinkWrap ul.mainList li a{}
    div.indexLinkWrap ul.mainList li a p.img{}
    div.indexLinkWrap ul.mainList li a p.title{}
    div.indexLinkWrap ul.mainList li a p.title.black{}
    div.indexLinkWrap ul.mainList li a div.newsInner{width: 80%; max-height: 140px; left: 8%; top: 15%; bottom: auto; margin: 0;}
    div.indexLinkWrap ul.mainList li a div.newsInner p{}
    div.indexLinkWrap ul.mainList li a div.newsInner p.cap{font-size: 3rem; line-height: 25px;}
    div.indexLinkWrap ul.mainList li a div.newsInner p.txt{}
    div.indexLinkWrap ul.mainList li a div.newsInner p.date{}

    div.indexLinkWrap ul.mainList li a::after{}
    div.indexLinkWrap ul.mainList li a:hover::after{}
    div.indexLinkWrap ul.mainList.top li{width: 100%;}
    div.indexLinkWrap ul.mainList.middle li{width: 100%;}
    div.indexLinkWrap ul.mainList.middle li:last-child{width: 100%;}
    div.indexLinkWrap ul.mainList.bottom li{width: 100%;}

    div.indexLinkWrap ul.partnerList{display: block; width: 100%; margin: 0;}
    div.indexLinkWrap ul.partnerList li{padding: 0; width: 100%; margin: 0 0 20px;}
    div.indexLinkWrap ul.partnerList li a{padding: 5px 0 30px;}
    div.indexLinkWrap ul.partnerList li:first-child a,
    div.indexLinkWrap ul.partnerList li:last-child a{}

    div.indexLinkWrap p.bottomBn{}

}