body{
    margin: 0;
    padding: 0;
}
.title{
    width: 100%;
    margin-top: 260px;
    text-align: center;
    z-index: 30;
    position: absolute;
}
.title h1{
    margin: 0;
    font-size: 70px;
    color: white;
}
.rocknroll-one-regular{
    font-family: "RocknRoll One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 70px;
    margin: 0;
    color: white;
}
.mv_color{
    background-color: black;
    width: 100%;
    height: 1000px;
    opacity: 0.33;
    z-index: 20;
    position: absolute;
}
.mv_img{
    width: 100%;
    height: 1000px;
    background-image: url("../img/mv.jpg");
    background-size: cover;
    background-position: center top;
}
#scroll_btn{
    font-size: 40px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: white;
    
    width: 100%;
    height: 264px;
    margin-top: 720px;
    text-align: center;
    z-index: 40;
    position: absolute;

    transition-property: all;
    transition-duration: 0.3s;
}
#scroll_btn:hover{
    transform: translateY(17px);
    background-color: rgba(232, 232, 232, 0.75);
    color: black;
}
nav{
    width: 100%;
    margin: 0 auto;
    background-color: whitesmoke;
}
nav ul{
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 50px;
    margin: 0px;
}
nav li{
    font-size: 24px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 24px;
}
.sec1f{
    background-color: rgb(193, 193, 193);
}
.sec1{
    width: 1000px;
    height: 700px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /*border: 1px solid red;*/
}
.sec1_1end{
    width: 1000px;
    height: 670px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /*border: 1px solid red;*/
}
.sec1_2end{
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /*border: 1px solid red;*/
}
.conWeb1{
    width: 530px;
    height: 530px;
    background-image: url("../img/web1_icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    border-radius: 50%;
    background-color: white;
    margin-top: 60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.conWeb1:hover{
    box-shadow: none;
}
.conWeb2{
    width: 500px;
    height: 500px;
    background-image: url("../img/web2_icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;
    border-radius: 50%;
    background-color: white;
    margin-top: 440px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.conWeb2:hover{
    box-shadow: none;
}
.conWeb3{
    width: 530px;
    height: 530px;
    background-image: url("../img/web3_icon.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    margin-top: 80px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.conWeb3:hover{
    box-shadow: none;
}
.sec2f{
    background-color: rgb(252, 228, 198);
}
.sec2{
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.conBook1{
    background-image: url("../img/book1_icon.jpg");
    width: 272px;
    height: 400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.conBook1:hover{
    box-shadow: none;
}
.conBook2{
    background-image: url("../img/book2_icon.jpg");
    width: 589px;
    height: 400px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.conBook2:hover{
    box-shadow: none;
}
.sec3f{
    background-color: rgb(20, 20, 20);
}
.sec3f h1{
    margin: 0;
    padding: 40px;
    text-align: center;
    color: rgb(230, 230, 230);
    font-size: 40px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.sec3line{
    width: 100%;
    height: 12px;
    background-color: rgb(220, 39, 114);
}
.sec3{
    width: 1000px;
    height: 850px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}
.sec3 ul{
    margin: 0;
    padding: 0;
}
.sec3title{
    color: rgb(230, 230, 230);
    font-size: 32px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.sec3main{
    color: rgb(230, 230, 230);
    font-size: 17px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}
footer{
    width: 100%;
    height: 60px;
    background-color: black;
}


.fadeIn_up{
    opacity: 0;
    transform: translate(0, 30%);
    transition: 1.7s;
}
.fadeIn_up.is-show{
    transform: translate(0, 0);
    opacity: 1;
}
.fadeIn_up2{
    opacity: 0;
    transform: translate(0, 10%);
    transition: 1.4s;
}
.fadeIn_up2.is-show{
    transform: translate(0, 0);
    opacity: 1;
}
.fadeIn_up3{
    opacity: 0;
    transform: translate(0, 12%);
    transition: 2.2s;
}
.fadeIn_up3.is-show{
    transform: translate(0, 0);
    opacity: 1;
}


/*ポップアップ*/
button{
    /* 背景色を無色に */
    background: transparent;
    /* 枠線を消す */
    border: none;
    /* クリックした際に枠線をnone消す */
    outline: none;
    /* 影を消す */
    box-shadow: none;
}
.popup{
    display: none;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
}
.content{
    background-color: white;
    padding: 30px;
    width: 50%;
}
.content a{
    display: block;
    margin: 0 30%;
    padding: 13px 0;
    border-radius: 0.2rem;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: rgb(234, 44, 27);
    font-size: 16px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.content a:hover{
    background-color: rgb(255, 25, 0);
}
.conWebText{
    font-size: 18px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.conBookText{
    font-size: 18px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.close{
    width: 100%;
    height: 50px;
    margin: 0 auto;
    border-radius: 5rem;
    color: white;
    background-color: rgb(11, 119, 11);
    font-size: 15px;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.close:hover{
    background-color: rgb(15, 154, 15);
}
.show{
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonFlex{
    display: flex;
    justify-content: center;
}
.buttonFlex a{
    padding: 4px 10%;
    margin: 2px;
    background-color: rgb(135, 190, 26);
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.buttonFlex a:hover{
    background-color: rgb(158, 222, 30);
}