@charset "utf-8";

/*----------------------------------
    ログイン・会員登録 page-login.php / page-registration.php 共通部分 
-----------------------------------*/

#page-login,
#page-registration{
    .page-container{
        margin: 0;
    }
}
.login-container,
.registration-container{
    width: calc(100% - 8%);
    text-align: center;
    background: #ededed;
    border-radius: 10px;
    padding: 4% 8% 1%;
    margin: 50px auto;

    & h3{
        font-size: 1.2rem;
    }
    & h2{
        font-size: 1.5rem;
        padding: 0;
    }
    & P{
        text-align: center;
        /* padding-left: 5%; */
    }
    & label{
        text-align:left;
        display:inline-block;
        width:100%;
        margin: 5% 0 0 10%;
    }
    & input {
        width: 80%;
        border: 2px solid;
        border-radius: 4px;
        padding: 6px;
        font-size: 1rem;
        margin: 5px;
    }
    .registration_btn,
    .login_btn{
        cursor: pointer;
        color: #FF7F00;
        font-weight: 700;
        border: 2px solid #FF7F00; 
        background-color: #fff;
        z-index: 1;
        position: relative;
        transition: 0.5s;
        margin: 8% 0 5%;
        padding: 8px 15px;
        width: auto;
    }
    .registration_btn{
        margin: 8% 0 9%;
        font-size: 1.1rem;
    }
}
.registration-container{
    & p {
        margin: 18% 0;
        font-size: 1.1rem;
    }
    .r_caption{
        margin: 1% 0 0 45px;
        font-size: 0.9rem;
        text-align: left;
    }
    .r_caption_small{
        margin: 5% 0;
    }
}
.registration_btn:hover,
.login_btn:hover{
    background: linear-gradient(90deg,#FFC11A,#ff7f00);
    color: white;
}
.login-subtitle{
    margin: 2% 0 5%;
}

& small{
    margin: 15px 0;
    display: inline-block;
    text-align: center;
}
& small a{
    color: #FF7F00;
}
#error_meg {
    color: red;
    text-align: center;
    padding: 5%;
}
/*----------------------------------
登録情報確認page-confirmation
-------------------*/
#page-confirmation{
    text-align: center;
    & dt{
        padding: 5px;
    }
    & dd{
        display: block;
        color: #ff7f00;
        margin-bottom: 15px;
        word-wrap: break-word;
    }
    .confirmation-container{
        width: calc(100% - 30%);
        background: #ededed;
        border-radius: 10px;
        padding: 5%;
        margin: 50px auto;
    }
    & button{
        display: block;
        width: 180px;
        margin: 20px auto;
        padding: 15px;
    }
}

/*----------------------------------
登録完了page-thank_you.php
-------------------*/
#page-thank_you{
    margin: 0 4%;
    text-align: center;
    & p{
        text-align: center;
    }
    .thanks-comment{
        margin: 6% 0 6%;
    }
    .confirmation-container{
        width: calc(100% - 10%);
        background: #ededed;
        border-radius: 10px;
        padding: 5% 13%;
        margin: 50px auto;
        text-align: left;
        & h4{
            margin: 0 4% 5%;
            text-align: center;
        }
        & li{
            list-style: disc;
        }
        & span{
            font-size: medium;
            font-weight: normal;
            padding-right: 0;
        }
    }
}

@media (min-width:700px){
    /* --- page-registration.php --- */
    #page-registration {
        .registration-container{
            width: calc(100% - 50%);
        }
    }
    /*----page-login.php----*/
    #page-login {
        .page-container{
            display: flex;
            justify-content: center;
        }
        .login-container,
        .registration-container{
                margin: 3%;
                flex: 1;
        }
        /* .registration-container{
            & p{
                margin: 10% 0;
            }
        }     */
    }
}

@media (min-width:1025px){
    /* page-confirmation-保存ボタン */
    .form-btn{
        width: calc(100% - 50%);
        display: flex;
        margin: 0 auto;
    }
    /* page-thank_you */
        #page-thank_you{
        .confirmation-container{
            width: calc(100% - 30%);
            max-width: 1000px;
        }
    }
    .registration-container{
        .registration_btn {
            margin: 10% 0 5%;
        }
    }
}