/*PC共通 -----------------*/

.sponly{display: none;}

img{width: 100%; height:  auto;}

body{font-family: 'Noto Sans JP', sans-serif;background: #000}

h1{color: #fff; text-align: center; font-size: 28px; padding:1.4rem 20px;line-height: 140%;}

h1 img{max-width: 800px;}

#headerLineTop {
        z-index: 1;
        width: 100%;
        height: 16px;
        position: relative;
    z-index: 2;
        background: url(../img/bg_topLine.png) repeat-x;
    }

footer {
    padding: 50px 2%;
    background: url(../img/fotleft.png), url(../img/fotcenter.png), url(../img/fotright.png) #00d7be;
    background-position: left top -1px, center top -1px, right top -1px;
    background-repeat: no-repeat;
    background-size: contain;
    background-size: 10%, 20%, 10%;
}

footer p{color: #000;text-align: center;font-size: 13px;line-height: 150%;}

#series{display: flex; flex-wrap: wrap;margin-top: -16px;}

.series1{position: relative;display: flex;width: 45%; border-right: 2px solid #000;box-sizing: border-box;overflow: hidden;}
.series1 a {transition: .4s;}

.series2-3{display: flex;flex-wrap: wrap;width: 55%;}
.series2-3 a{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;transition: .4s;}
.series2-3 img{width: 60%; transition: all 0.5s ease;}
.series2{position: relative;width: 100%;box-sizing: border-box; border-bottom: 2px solid #000;background: url("../img/series2_bg.jpg");background-position: center;background-size: cover;}
.series3{position: relative;width: 100%;background: url("../img/series3_bg.jpg");background-position: center;background-size: cover;}

.hover-mask {
  align-items: center;
  background: rgba(0, 0, 0, .7);
  bottom: 0;
  color: #fff;
  display: flex;
  height: auto;
    justify-content: end;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease;
  width: 100%;
}
.hover-mask:hover {
  opacity: 1;
}
.hover-mask p {
    margin-right: 5%;
    font-weight: bold;
    font-size: 24px;
  display: flex;
    padding: 2% 6%;
    justify-content: center;
    border: 1px solid #fff;
    background: #000;
}

.footer-sns{width:80%; max-width: 350px; margin: 0 auto 30px auto;display: flex;justify-content: center;align-items: center;list-style: none;}
.footer-sns li{margin: 0 15px!important; width: 25%!important;}
.footer-sns .youtube{width: 50%!important;}

@media screen and (max-width:768px) {
    .sponly{display: block;}
    
    h1 {
    font-size: 19px;
    padding: 1rem 20px;
}
    
    #headerLineTop {
    width: 100%;
    height: 8px;
    margin-top: -1px;
    background: url(../img/bg_topLine.png) repeat-x;
    background-size: contain;
}
    
    #series{margin-top: -8px;}
    
    footer {
        background-size: 20%, 30%, 20%;
    }
    
    footer p {
    font-size: 11px;
}
    
    .series1{width: 100%; border-right:unset;border-bottom: 2px solid #000;}
    .series2-3{width: 100%;}
    .series2 {padding: 11vw 0px;}
    .series3 {padding: 11vw 0px;}
}