/*
カラー保存用

#F1EDE1
#BA422B
#FAF8F1

*/

.colorhozonnyou{
    color: #F1EDE1;
    color: #FAF8F1;
    color: #BA422B;
    color: #cd5e3c;
}



body,html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color: #FAF8F1;
    pointer-events: auto;
    scroll-behavior: smooth;
}


header{
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 100;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.header_div{
    position: relative;
    width: 100%;
    height: 80px;
    background-image: linear-gradient(90deg,#cd5e3c 100%,#D9A46C 90%);/*#AA8A33*/
    display: flex;
}
.wagara{
    position: absolute;
    right: 0;
    width: 100%;
    background-color: #cd5e3c;
}

footer{
    width: 100%;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background-color: #7b8d42;
    background-image: url("img/wagara3.png");
}
.footer_box{
    position: relative;
    left: 50%;
    translate: -50% 0;
    width: 85%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    gap: 50px;
}
.footer_block{
    display: inline-block;
    position: relative;
    aspect-ratio: 3/2;
    background-color: #7b8d42;
    box-shadow: 0px 10px 20px #333631;
}
.footer_img{
    position: absolute;
    width: 95%;
    height: 95%;
    z-index: 0;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
 }
.footer_text{
    position: absolute;
    width: 75%;
    height: 75%;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    background-color: #CD5E3C;
    z-index: 2;
    box-shadow: 0 0 40px #000000;
    border-radius: 5px;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: "玉ねぎ楷書体", sans-serif;
    font-size: 4vw;
    color: whitesmoke;
}
.footer_foot{
    width: 100%;
    text-align: center;
}
.account{
    width: 100%;
    position: relative;
    text-align: center;
    height: 70px;
}
.Insta,.X,.Gakko{
    position: relative;
    aspect-ratio: 1/1;
    width: 50px;
    margin-left: 5px;
    margin-right: 5px;
}

.kyosan{
    width: 100%;
    font-size: 24px;
    color: #FFFFFF;
    font-weight: bolder;
    align-items: center;
    text-align: center;
}
.kyosan>a>img{
    height: 40px;
}
.sugi{
    height: 40px;
}


.Yicon{
    position: relative;
    left: 30px;
    top: 50%;
    translate: 0 -50%;
    height: 90%;
}
#menu_box.open{
    width: 50%;
    position: relative;
    left: 25%;
    display: flex;
    text-align: center;
}
.menu_button{
    position: relative;
    height: 100%;
    width: 20%;
}
.menu_button>div{
    position: relative;
    height: 1px;
    top: 35%;
    translate: 0 -50%;
}
.img_slidebox{
    position: relative;
    width: 100%;
    height: 600px;

}
.slidebox2{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

}
.slide_wagara{
    opacity: 0.05;
}


.Watensai_text{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    height: 100%;
    left: 50%;
    top: 60%;
    translate: -50% -50%;
    font-family: "しょかきさらり";
    font-size: 145px;
    color: white;
    z-index: 3;
    margin: 0;
    text-shadow: -5px 5px 3px #BA422B,5px 5px 2px#363A75;
}
.Watensai_text:hover{

    transition: 1s;
    color: black;
}

.Watensai_text>span{
    font-size: 40px;
    text-align: justify;
}
.Date_text{
    position: absolute;
    right: 30px;
    top: 85%;
    translate: 0 -50%;
    text-align: justify;
    font-family: "しょかきさらり";
    font-size: 5vw;
    font-weight: bolder;
    color: white;
    z-index: 3;
    margin: 0;
    text-shadow: 5px 5px 3px #363A75;
}

.digital_panflet{
    width: 85vw;
    height: 150px;
    position: relative;
    left: 50%;
    translate: -50% 0;
    background-color: #FFFFFF;
    border-radius: 15px;
    border: 2px #7A4171 solid;
    display: flex;
    align-items: center;
    justify-content: center;
}
.panf{
    height: 100%;
}
.panf-text{
    font-family: sans-serif;
    font-size: 24px;
    font-weight: bold;
}

.toppage_box{
    width: 100%;
    overflow: hidden;
    background-image: url("img/wagara1.png");
    background-repeat: repeat;
}
.toppage_toptext{
    position: relative;
    text-align: center;
    font-family: "玉ねぎ楷書体";
    font-size: 50px;
    width: 100%;
    margin: 0;

}
.toppage_contents{
    position: relative;
    left: 50%;
    translate: -50% 0;
    background-color: #cd5e3c;
    width: 90%;
    height: 500px;
    border-radius: 5px;
}
.toppage_pastnews{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    translate: -50% 0;
    margin: 15px;
    width: 500px;
    height: 50px;
    background-color: #BA422B;
    border-radius: 10px;
    color: whitesmoke;
}

.titlevideo{
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.ticketpage{
    color: white;
    font-size: 15px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
    border-radius: 10000px;
    aspect-ratio: 1/1;
    width: 250px;
    background-image: linear-gradient(30deg,#006e54 10%, #00a381 70%, #00a497 95%);
}

.wasi{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.1;
    z-index: 0;
}
.contents{
    pointer-events: auto;
    position: relative;
    left: 50%;
    translate: -50% 0;
    width: 96%;
    height: 100px;
    border-top: 1px #333631 solid;
    display: flex;
    align-items: center;
    font-size: 2.7vw;
    font-family: sans-serif;
    color: #F1EDE1;
    z-index: 1;
}
.date{
    font-size: 3vw;
}
.announce {
    background-color: #EE827C;
    padding: 1vw 3vw 1vw 3vw;
    margin-right: 2vw;
    margin-left: 2vw;
    width: 12vw;
    text-align: center;
}


.apologize{
    background-color: #2A83A2;
    padding: 1vw 3vw 1vw 3vw;
    margin-right: 2vw;
    margin-left: 2vw;
    width: 12vw;
    text-align: center;
}
.most{
    background-color: #7A4171;
    padding: 1vw 3vw 1vw 3vw;
    margin-right: 2vw;
    margin-left: 2vw;
    width: 12vw;
    text-align: center;
}
.recruit{
    background-color: #82ae46;
    padding: 1vw 3vw 1vw 3vw;
    margin-right: 2vw;
    margin-left: 2vw;
    width: 12vw;
    text-align: center;

}
.titletext{
    font-weight: bold;
}

.SCFest_box{
    position: relative;
    width: 100%;
    font-size: 24px;
    font-family: sans-serif;
    background-image: url("img/wagara2.png");
    background-repeat: repeat;
}
.SCFest_contents{
    position: relative;
    width: 100%;
    display: flex;
}
.SCFest_text{
    position: relative;
    width: 45%;
    height: 100%;
    padding: 5%;
    text-align: center;
}
.pic{
    position: relative;
    aspect-ratio: auto;
    width: 45%;
    border-radius: 15px;
}
.pic>img{
    width: 100%;
    border-radius: 15px;
}


.dark1{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    background-color: black;
    opacity: 0.4;
    z-index: 2;
}
.wahuu5{
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 0;
}

.left{
    left: -100%;
    transition: 2s;
    z-index: 1;
}
.pick{
    left: 0%;
    transition: 2s;
    z-index: 1;
}
.right{
    left: 100%;
    transition: 2s;
    z-index: 0;
}
.stay{
    left: -100%;
    transition: 2s;
    z-index: -1;
}

.operator_text_box{
    width: 100%;
    height: auto;
    position: relative;
    background-image: url("img/wagara4.png");
    background-repeat: repeat-x;
}
.operator_text{
    position: relative;
    width: 80%;
    left: 50%;
    translate: -50% 0;
    text-align: center;
    font-size: 24px;
}

.momizi_box{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.momizi_left{
    position: absolute;
    height: 150%;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}
.momizi_right{
    position: absolute;
    height: 150%;
    top: 50%;
    right: 0;
    translate: 0 -50%;
}
/*スマホ用（テスト）*/
@media screen and (max-width:500px) and (max-height: 900px){
    .wahuu5{
        height: 100%;
    }
    .ticketpage{
        width: 150px;
    }
    .footer_text{
        font-size: 24px;
    }
    .operator_text{
        font-size: 20px;
    }
    .titletext{
        width: 170px;
        font-size: 20px;
    }
    .SCFest_contents{
        display: grid;
    }
    .SCFest_text{
        font-size: 20px;
        width: 80%;
        left: 50%;
        translate: -50% 0;
    }
    .pic{
        width: 96%;
        left: 50%;
        translate: -50% 0;
    }
    .footer_box{
        grid-template-columns: repeat(auto-fit, minmax(90%, 1fr));
    }
}

@media screen and (max-width:700px) and (min-height: 899px){

}
@media screen and (min-width: 1000px){
    .contents{
        font-size: 27px;
    }
    .announce,.apologize,.most,.recruit{
        width: 180px;
        padding: 10px 20px 10px 20px;
        margin: 0px 20px 0px 20px;
    }
    .date{
        font-size: 27px;
    }
}
/*PC横画面用*/
@media  screen and (min-width: 1500px) and (min-height: 900px){
    .Watensai_text{
        font-size: 240px;/*1100px超えたら165px*/
    }
    .Watensai_text>span{
        font-size: 50px;
    }
    .Date_text{
        font-size: 75px;/*1000px超えたら55px*/
    }
    .img_slidebox{
        height: 900px;
    }

    .panf-text{
        font-size: 24px;
    }
    .ticketpage{
        width: 300px;
    }
    .footer_text{
        font-size: 42px;
    }
    .digital_panflet{
        width: 720px;
    }
}
/*中途半端用*/
@media screen and (min-width: 1100px) and (max-width: 1500px){
    .Watensai_text{
        font-size: 165px;/*1100px超えたら165px*/
    }
    .Watensai_text>span{
        font-size: 40px;
    }
    .Date_text{
        font-size: 55px;/*1000px超えたら55px*/
    }
    .img_slidebox{
        height: 700px;
    }

    .panf-text{
        font-size: 24px;
    }
    .ticketpage{
        width: 200px;
    }
    .footer_text{
        font-size: 30px;
    }
}


/*ここまでtitle.html*/