* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: rgba(41, 43, 43);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: fill;
    opacity: 0.1;
}

.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.text1{
    color:rgba(194, 212, 212,1);
    font-size: 60px;
    font-weight: bold;
    display: inline-block;
    opacity: 1;
    transition: 0.2s;
}
.text2{
    color:rgba(194, 212, 212,1);
    font-size: 30px;
    display: inline-block; 
    font-weight: 700;
    padding: 20px 20px 20px 0px;
    transition: 0.2s;
}
.text3{
    color:rgb(194, 212, 212);
    font-size: 20px;
    display: inline-block; 
    font-weight: 700;
    padding: 20px;
    transition: 0.2s;
}
.text4{
    color:rgba(194, 212, 212,1);
    width: 300px;
    font-size: 11px; 
    font-weight: 700;
    padding: 5px;
    transition: 0.2s;
}
.text4Link{
    color: rgb(255, 255, 255);
}
.signupButton{
    cursor:pointer;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    background: #68ddca;
    border-color: #68ddca;
    color: rgba(41, 43, 43);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:0.61s;
}
.signupButton:hover{
    cursor: pointer;
    background: #25887b;
    color: rgb(255, 255, 255);
    transition:0.38s,background-color 0.38s;
}
.loginButton{
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(41, 43, 43);
    border-color: rgba(238, 177, 46);
    color: rgba(238, 177, 46);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;
    opacity: 1;

    transition: 0.61s;
}
.loginButton:hover{
    cursor: pointer;
    background-color: rgba(189, 139, 33,0.68);
    color: rgb(255, 255, 255);
    transition: color 0.38s,background-color 0.38s;
}
.loginButtonDisabled{
    cursor:default;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(41, 43, 43);
    border-color: rgb(231, 224, 208);
    color: rgb(231, 224, 208);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;
    opacity: 0.5;

    transition: 0.61s;
}
.text1Vanish{
    transform: translate(30px,0);
    color:rgba(194, 212, 212,0);
    font-size: 60px;
    font-weight: bold;
    display: inline-block;
    opacity: 0;
    transition: 0.5s;
}
.signupVanish{
    transform: translate(-30px,0);
    opacity: 0;
    transition: 0.5s;
}
.loginVanish{
    transform: translate(0,30px);
    opacity: 0;
    transition: 0.5s;
}
/*
.classSelectModal{
    background: rgb(0, 0, 0);
    width: 700px;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: absolute;
    opacity: 0;
    transform:translate(0,-500px);
    transition: 0.5s;
  }

.deployedClassSelectModal{
    background: rgb(0, 0, 0);
    width: 700px;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: absolute;
    opacity: 1;
    transform:translate3D(0,0);
    transition: 0.5s;
}
.horizontal-list {
    display: flex;
    list-style: none;
    overflow-x: scroll;
    width: 700px;
    scroll-snap-type: x mandatory;
  }

  .item {
    
    display: inline-block;
    scroll-snap-align: start;
    
    width: 90%;
    height: 100px;
    font-size: 48px;
    background: rgba(255, 0, 0, 0.4);
    flex-shrink: 0;
  }
  */

.modalWindow{
    background: rgb(0, 0, 0);
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    border-radius: 10px;
    position: absolute;
    transform: scale(1.2);
  }
  .square_btn {
    transform: translate(-200px,35px);
    display: block;
    position: relative;
    background: transparent; /* ボタンの背景色 */
  }
   
  .square_btn::before, .square_btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px; /* 棒の幅（太さ） */
    height: 27px; /* 棒の高さ */
    background: #575757; /* バツ印の色 */
  }
   
  .square_btn::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
   
  .square_btn::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
.stepText{
    color:rgb(194, 212, 212);
    font-size: 20px;
    display: inline-block; 
    font-weight: 700;
    transform: translate(0,20px);
}
.container{
    margin-top: 20px;
    margin-left: auto;
    margin-right:auto;
    width: 310px;
}
.titleText{
    color:rgb(194, 212, 212);
    font-size: 30px;
    display: inline-block; 
    font-weight: 700;
    padding: 20px 20px 20px 0px;
}
.inputDiv{
    position: relative;
}
.handleName{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom:rgba(104, 221, 202, 0.3) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: outline 0.61s;
}
.handleName:focus ,.completed{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgba(104, 221, 202, 1) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .handleNameLabel {
        color: rgba(104, 221, 202, 1);
        transform: scale(0.8) translateX(10px) translateY(0px);
    }
}
.handleNameLabel {
    position: absolute;
    pointer-events: none;
    top: 0px;
    left: 0px;
    color: gray;
    transition: .2s;
    transform: translateX(10px) translateY(12px);
}
.email{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom:rgba(104, 221, 202, 0.3) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: outline 0.61s;
}
.email:focus , .completed{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgba(104, 221, 202, 1) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .emailLabel{
        color: rgba(104, 221, 202, 1);
        transform: scale(0.8) translateX(6px) translateY(0px);
    }
}
.incorrect{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgb(243, 59, 27) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .emailLabel{
        color: rgb(243, 59, 27);
        transform: scale(0.8) translateX(6px) translateY(0px);
}
}
.emailLabel {
    position: absolute;
    pointer-events: none;
    top: 0px;
    left: 0px;
    color: gray;
    transition: .2s;
    transform: translateX(10px) translateY(12px);
}
.birthDateText{
    color:rgb(194, 212, 212);
    font-size: 20px;
    display: inline-block; 
    font-weight: 700;
}
.birthNote{
    color:rgba(194, 212, 212,50);
    width: 300px;
    font-size: 11px; 
    font-weight: 700;
    padding: 5px;
}
.form-select-wrap{
    display: flex;
    max-width: 300px;
    align-items: center;
  }
  .form-select-wrap > select{
    cursor: pointer;
    color: #e5e5e5;
    padding: 8px 16px;
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid rgba(104, 221, 202, 0.3);
    border-radius: 5px;
    font-size: 14px;
    background-color: rgba(41, 43, 43);
  }
.toStep2Button{ 
    cursor:pointer;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #68ddca;
    border-color: #68ddca;
    color: rgba(41, 43, 43);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.toStep2Button:hover{
    background: #25887b;
    color: rgb(255, 255, 255);
    transition:0.38s,background-color 0.38s;
}
.disabledToStep2Button{
    cursor:default;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #414b49;
    border-color: #414b49;
    color: rgb(133, 146, 146);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}

.certifyCode{
    width: 45px;
    outline: none;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    background-color: #414b49;
    border-radius: 5px;
    border:rgba(104, 221, 202, 0.2) solid 3px;
    transition: border 0.61s;
    caret-color: transparent;
}
.certifyCode:focus{
    border: rgba(104, 221, 202, 1) solid 3px;
    transition: border 0.38s;
}
.certifyCode::-webkit-inner-spin-button,
.certifyCode::-webkit-outer-spin-button {
    appearance: none;
}
.toStep3Button{
    cursor:pointer;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #68ddca;
    border-color: #68ddca;
    color: rgba(41, 43, 43);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.toStep3Button:hover{
    background: #25887b;
    color: rgb(255, 255, 255);
    transition:0.38s,background-color 0.38s;
}
.disabledToStep3Button{
    cursor:default;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #414b49;
    border-color: #414b49;
    color: rgb(133, 146, 146);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.okawariText{
    color:rgb(194, 212, 212);
    font-size: 20px;
    display: inline-block; 
    font-weight: 700;
    padding: 20px 0px;
}
.okawariButton{
    cursor:pointer;
    border: 2px solid;
    display: block;
    width: 150px;
    height: 40px;
    line-height: 40px;
    background-color: rgba(41, 43, 43);
    border-color: rgba(238, 177, 46);
    color: rgba(238, 177, 46);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition: color 0.61s,background-color 0.61s;
}
.okawariButton:hover{
    
    background-color: rgba(189, 139, 33,0.68);
    color: rgb(255, 255, 255);
    transition: color 0.38s,background-color 0.38s;
}
.userID{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom:rgba(104, 221, 202, 0.3) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: outline 0.61s;
}
.userID:focus ,.completed{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgba(104, 221, 202, 1) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .userIDLabel {
        color: rgba(104, 221, 202, 1);
        transform: scale(0.8) translateX(10px) translateY(0px);
    }
}
.userIDLabel {
    position: absolute;
    pointer-events: none;
    top: 0px;
    left: 0px;
    color: gray;
    transition: .2s;
    transform: translateX(10px) translateY(12px);
}
.incorrectUserID{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgb(243, 59, 27) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .userIDLabel{
        color: rgb(243, 59, 27);
        transform: scale(0.8) translateX(6px) translateY(0px);
    }
}
.pass{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom:rgba(104, 221, 202, 0.3) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: outline 0.61s;
}
.pass:focus ,.completed{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgba(104, 221, 202, 1) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .passLabel {
        color: rgba(104, 221, 202, 1);
        transform: scale(0.8) translateX(10px) translateY(0px);
    }
}
.passLabel {
    position: absolute;
    pointer-events: none;
    top: 0px;
    left: 0px;
    color: gray;
    transition: .2s;
    transform: translateX(10px) translateY(12px);
}
.incorrectPass{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgb(243, 59, 27) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .passLabel{
        color: rgb(243, 59, 27);
        transform: scale(0.8) translateX(6px) translateY(0px);
    }
}
.passRe{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom:rgba(104, 221, 202, 0.3) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: outline 0.61s;
}
.passRe:focus ,.completed{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgba(104, 221, 202, 1) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .passReLabel {
        color: rgba(104, 221, 202, 1);
        transform: scale(0.8) translateX(10px) translateY(0px);
    }
}
.passReLabel {
    position: absolute;
    pointer-events: none;
    top: 0px;
    left: 0px;
    color: gray;
    transition: .2s;
    transform: translateX(10px) translateY(12px);
}
.toStep4Button{
    cursor:pointer;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #68ddca;
    border-color: #68ddca;
    color: rgba(41, 43, 43);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.toStep4Button:hover{
    background: #25887b;
    color: rgb(255, 255, 255);
    transition:0.38s,background-color 0.38s;
}
.disabledToStep4Button{
    cursor:default;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #414b49;
    border-color: #414b49;
    color: rgb(133, 146, 146);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.incorrectPassRe{
    width: 300px;
    padding: 20px 10px 4px 10px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: rgb(243, 59, 27) solid 2px;
    background-color: rgba(41, 43, 43);
    border-radius: 5px;
    
    color: #e5e5e5;
    font-size: 1em;
    line-height: 1.5;
    transition: border-bottom 0.61s;
    & + .passReLabel{
        color: rgb(243, 59, 27);
        transform: scale(0.8) translateX(6px) translateY(0px);
    }
}
.doneButton{
    cursor:pointer;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #68ddca;
    border-color: #68ddca;
    color: rgba(41, 43, 43);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.doneButton:hover{
    background: #25887b;
    color: rgb(255, 255, 255);
    transition:0.38s,background-color 0.38s;
}
.disabledDoneButton{
    cursor:default;
    border: 2px solid;
    display: block;
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 30px 0px;
    background: #414b49;
    border-color: #414b49;
    color: rgb(133, 146, 146);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;

    transition:color 0.61s,background-color 0.61s;
}
.classDiv{
    position: relative;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.imageCut{
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid;
    display: flex;
    width: 120px;
    height: 120px;
    line-height: 50px;
    margin:7px;
    border-color: rgba(189, 139, 33,0.31);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;
    transition: 0.61s;
    justify-content: center;
    opacity: 0.6;
    transition: 0.61s;
}
.imageCut:hover, .classSelected{
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid;
    display: flex;
    width: 120px;
    height: 120px;
    line-height: 50px;
    margin:7px;
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;
    justify-content: center;
    border-color: rgb(230, 169, 38);
    transform: scale(1.25);
    opacity: 1;
    transition:1s;
    & + .classText{
        opacity: 1;
        transition: 1s;
    }
}
.anotherImageCut{
    position: relative;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid;
    display: flex;
    width: 120px;
    height: 120px;
    line-height: 50px;
    margin:7px;
    border-color: rgba(189, 139, 33,0.31);
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;
    transition: 0.61s;
    justify-content: center;
    opacity: 0.6;
    transition: 0.61s;
}
.anotherImageCut:hover{
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid;
    display: flex;
    width: 120px;
    height: 120px;
    line-height: 50px;
    margin:7px;
    text-decoration: none;
    text-align: center;
    border-radius: 30px;
    font-weight: 800;
    justify-content: center;
    border-color: rgb(230, 169, 38);
    opacity: 1;
    transition:1s;
}
.classText{
    position:relative;
    color:rgb(194, 212, 212);
    margin-bottom: -17px; /*余白を解消する値を入れます*/
    font-size: 13px;
    font-weight: 700; 
    text-align: center;
    transform: translate(0px,-33px);
    opacity: 0.3;
    transition: 0.61s;
    pointer-events: none;
}





@media screen and (max-width:480px) {

	/*　画面サイズが480px以下(スマホ向け)*/

}

@media screen and(max-width:1279px) {
    /*　画面サイズが481px以上(タブレット向け)*/
}

@media screen and(min-width:1280px){
    /*PC向け*/
    

}