@charset "UTF-8";

#container {
    margin-top: 21rem;

    @media screen and (max-width: 767px) {
      margin-top: 0;
    }
}


/* KV */
.jimu-kv-box{
    margin-top: 6rem;
    margin-bottom: 10rem;
    font-family: "Zen Kaku Gothic New", sans-serif;

    @media screen and (max-width: 767px) {
      margin-top: 4rem;
      margin-bottom: 8rem;
    }

    .inner{
        display: flex;
        gap: 10rem;
        justify-content: center;

        @media screen and (max-width: 767px) {
          flex-direction: column;
          gap: 5rem;
        }
    }

    .left-col{
        font-size: 2.2rem;
        font-weight: bold;
        position: relative;

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
          line-height: 1.8;
        }
        
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translateX(30%);
            width: 15rem;
            height: 18rem;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(../../../img/jimu/gakkensai/kv-char.png);
            @media screen and (max-width: 767px) {
                width: 9rem;
                height: 11rem;
                bottom: 2rem;
                transform: translateX(-20%);
            }
        }

        .top-text{
            margin-bottom: 2rem;

        
        }
        .btm-text{
            font-size: 5.2rem;
            color: #5FBAAA;

            @media screen and (max-width: 767px) {
              font-size: 3rem;
            }
        
        }

    }
    .right-col{
    
        .login-info-box{
            position: relative;
            padding: 6.5rem 4.5rem;
            background: #DDF3FF;
            border-radius: 2rem;

            @media screen and (max-width: 767px) {
              padding: 3rem;
            }
        
            .label{
                position: absolute;
                left: 50%;
                top: 0;
                transform: translate(-50%, -50%);
                font-size: 2rem;
                font-weight: bold;
                color: #fff;
                background-color: var(--primary-color);
                padding: 1rem 4rem;
                border-radius: 2rem;
                letter-spacing: 2px;

                @media screen and (max-width: 767px) {
                  font-size: 1.6rem;
                  border-radius: 1rem;
                  padding: 1rem 2rem;
                }
            
            }
            .main-info{
                display: flex;
                align-items: flex-end;
                gap: 2.5rem;

                @media screen and (max-width: 767px) {
                  flex-direction: column;
                  gap: 4rem;
                }
            
                .info-box{
                    text-align: center;
                
                    .title{
                        font-size: 2rem;
                        font-weight: bold;
                        line-height: 1.4;

                        @media screen and (max-width: 767px) {
                          font-size: 1.6rem;
                        }
                    }
                    .button-box{
                        margin-top: 2rem;
                        margin-bottom: 1.2rem;

                        @media screen and (max-width: 767px) {
                          margin-top: 1rem;
                        }

                        & a {
                            width: 34rem;
                            height: 8rem;
                            background-color: #fff;
                            border-radius: 60px;
                            padding-right: 2rem;
                            padding-left: 8rem;

                             & img:first-child {
                                    width: 18rem;

                                    @media screen and (max-width: 767px) {
                                      width: 60%;
                                    }
                            }

                            @media screen and (max-width: 767px) {
                              width: 100%;
                              height: 5rem;
                              border-radius: 30px;
                              padding-left: 4rem;
                            }
                        }
                    
                    }
                    .desc{
                        text-align: center;
                        font-size: 1.6rem;
                        font-weight: bold;

                        @media screen and (max-width: 767px) {
                          font-size: 1.2rem;
                        }

                        & a {
                            color: var(--primary-color);
                            text-decoration: underline;
                        }
                    }

                    &:last-child {
                        .button-box {
                            & a {
                                & img:first-child {
                                    width: 20rem;

                                    @media screen and (max-width: 767px) {
                                      width: 80%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}