.lock{
    z-index: 30;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.9;
}

header{
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 0 0;
    height: 620px;
}
header::after{
    z-index: -1;
    content: "";
    height: 100%;
    width: 100%;
    background-color: lavender;
    background-image: url(img/文化祭ポスター画像.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: fadeIn 10s infinite;
}

/* @keyframes fadeIn {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
        background-image: url(img/文化祭ポスター画像.jpg);
    }
    45%{
        opacity: 1;
        background-image: url(img/文化祭ポスター画像.jpg);
    }
    50%{
        opacity: 0;
    }
    55%{
        opacity: 1;
        background-image: url();
    }
    95%{
        opacity: 1;
        background-image: url();
    }
    100%{
        opacity: 0;
    }
} */


main{
    margin: 20px 4%;
    min-height: 600px;
}


.coment{
    content: "ヘッダー";
}

.content{
    z-index: 3;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(10%) translateY(10%);
    padding-top: 30px;
    height: 500px;
    width: 500px;
    text-align: center;
    filter: drop-shadow(0 0 1px lightslategray);
}
.content .flex{
    margin: 0 auto;
    width: fit-content;
}
.content span{
    font-size: 50%;
}
.book{
    margin: 40px 10px;
    padding: 6px 6px 0 6px;
    width: fit-content;
    border: solid 2px rgb(46, 40, 87);
    border-radius: 5px;
}
.book:hover{
    transform: scale(105%);
}
.book h4{
    color: rgb(46, 40, 87);
}



.coment{
    content: "メイン";
}


.notice{
    margin: 20px 10vw;
}
.notice h3{
    margin: 0;
}
.notice div{

    padding: 10px 0;
    width: 100%;
    background-color: aliceblue;
    border-bottom: solid 1px lightsteelblue;
}




.rargeBox{
    z-index: 4;
    position: absolute;
    display: flex;
    top: 0;
    margin: 15% 46%;
    height: 200px;
    width: 346px;
    transform: translateX(-50%) rotate(0deg);
    opacity: 0.1;
}
.rargeBox::before{
    content: "";
    position: absolute;
    transform: rotate(60deg);
    height: 100%;
    width: 100%;
}
.rargeBox::after{
    content: "";
    position: absolute;
    transform: rotate(-60deg);
    height: 100%;
    width: 100%;
}
.rargeBox, .rargeBox::before, .rargeBox::after{
    background-color: lightsteelblue;
}
.rargeBox p{
    z-index: 1;
    transform-origin: top left;
    margin: 25%;
    width: 100%;
    color: midnightblue;
    text-align: center;
    font-size: xx-large;
}
.boxDeco{
    z-index: 2;
    position: absolute;
    height: 80%;
    width: 110%;
    transform: translate(-5%, 10%);
}
.boxDeco::before{
    content: "";
    position: absolute;
    transform: rotate(60deg);
    height: 100%;
    width: 100%;
}
.boxDeco::after{
    content: "";
    position: absolute;
    transform: rotate(-60deg);
    height: 100%;
    width: 100%;
}
.boxDeco, .boxDeco::before, .boxDeco::after{
    border-left: 4px solid lightsteelblue;
    border-right: 4px solid lightsteelblue;
}

.slide{
    position: relative;
    margin: 30px auto;
    height: 350px;
    width: 520px;
    background-color: lavender;
    outline: double 4px lightsteelblue;
}
.slide::before, .slide::after{
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.slide::before{
    z-index: 10;
    top: 0;
    border-top: 10px solid lightsteelblue;
}
.slide::after{
    z-index: 10;
    bottom: 0;
    border-bottom: 10px solid lightsteelblue;
}

.slideImg{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
}

.slideImg::after{
    z-index: 5;
    content: "";
    height: 100%;
    width: 100%;
    background-color: lavender;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: slider 30s infinite;
}
/* @keyframes slider {
    0%{
        opacity: 1;
        background-image: url('img/gym.JPG');
      }
      8%{    
        opacity: 1;
        background-image: url('img/gym.JPG');
    }
      9%{
        opacity: 0;
      }
      10%{
        opacity: 1;
        background-image: url('img/shomen2.JPG');
      }
      18% {
        opacity: 1;
        background-image: url('img/shomen2.JPG');
      }
      19%{
        opacity: 0;
      }
      20%{
        opacity: 1;
        background-image: url('img/nakaniwa2.JPG');
      }
      28%{
        opacity: 1;
        background-image: url('img/nakaniwa2.JPG');
      }
      29%{
        opacity: 0;
      }
      30%{
        opacity: 1;
        background-image: url('img/sta.JPG');
      }
      38%{
        opacity: 1;
        background-image: url('img/sta.JPG');
      }
      39%{
        opacity: 0;
      }
      40%{
        opacity: 1;
        background-image: url('img/tea.JPG');
      }
      48%{
        opacity: 1;
        background-image: url('img/tea.JPG');
      }
      49%{
        opacity: 0;
      }
      50%{
        opacity: 1;
        background-image: url('img/sho.JPG');
      }
      58%{
        opacity: 1;
        background-image: url('img/sho.JPG');
      }
      59%{
        opacity: 0;
      }
      60%{
        opacity: 1;
        background-image: url('img/pc.JPG');
      }
      68%{
        opacity: 1;
        background-image: url('img/pc.JPG');
      }
      69%{
        opacity: 0;
      }
      70%{
        opacity: 1;
        background-image: url('img/ca.JPG');
      }
      78%{
        opacity: 1;
        background-image: url('img/ca.JPG');
      }
      79%{
        opacity: 0;
      }
      80%{
        opacity: 1;
        background-image: url('img/sha.JPG');
      }
      88%{
        opacity: 1;
        background-image: url('img/sha.JPG');
      }
      89%{
        opacity: 0;
      }
      90%{
        opacity: 1;
        background-image: url('img/chu.JPG');
      }
      98%{
        opacity: 1;
        background-image: url('img/chu.JPG');
      }
      99%{
        opacity: 0;
      }
      100%{
        opacity: 0;
      }

} */

.coment{
    content: "aside";
}



.coment{
    content: "パーツ";
}

.box{
    z-index: 6;
    position: absolute;
    margin: 0;
    top: 1px;
    left: 1px;
    height: 48px;
    width: 84.5px;
}
.boxFrame{
    z-index: 4;
    display: flex;
    position: relative;
    margin: 8px 6px;
    height: 50px;
    width: 86.5px;
    transform: rotate(90deg);

}
.box::before, .boxFrame::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    transform: rotate(120deg);
}
.box::after, .boxFrame::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    transform: rotate(-120deg);
}
.box, .box::before, .box::after{
    background-color: aliceblue;
}
.boxFrame, .boxFrame::before, .boxFrame::after{
    background-color: lightsteelblue;
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
    header{
      height: 585px;
    }
    header::after{
        background-size: contain;
        
    }
    .keyakiFes{
        transform: scale(60%) translate(-35%, -30%);
    }

    .content{
        transform: scale(60%) translate(45%, 45%);
    }

    .circleM{
        transform: scale(60%) translate(45%, 45%);
    }
    .book{
        transform: scale(130%);
        margin: 30px;
    }
    .notice{
        margin: 20px 0;
    }

    .slide{
        height: 250px;
        width: 100%;
    }
    .triLeft, .triRight{
        display: none;
    }
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
 
}