@charset 'utf-8';

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
}


.site-header {
    background-color: #f8fdfc; 
    text-align: center;
    padding: 60px 0;
}

.site-header h1 {
    font-size: 48px;              
    font-weight: 300;               
    color: #333;                    
    letter-spacing: 0.15em;         
    text-transform: uppercase;    
}

.site-header span {
    font-size: 48px;                
    color: #B0ECE6;                 
    font-weight: 300;
}
.form-content dl {
    max-width: 897px;
    margin: 100px auto 30px;
    display: flex;
    flex-wrap: wrap;
}
.form-content dt {
    width: 20%;
    margin-bottom: 50px;
}
.form-content dd {
    width: 80%;
}
.form-content dd input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
}
.form-content dd textarea {
    width: 100%;
    height: 150px;
    padding: 0 15px;
}
.btn input[type="submit"] {
    max-width: 300px;
    width: 100%;
    height: 50px;
    background-color: #F2E74C;
    display: block;
    border-radius: 30px;
    color: #fff;
    padding: 13px 0;
    margin: 0 auto 130px;
    font-size: 16px;
    border: 0;
    cursor: pointer;
}
.btn input[type="submit"],
div input[type="submit"] {
    max-width: 300px;
    width: 100%;
    height: 55px;
    background-color: #B0ECE6;     
    display: block;
    border-radius: 30px;
    color: #333;                   
    font-weight: bold;
    margin: 40px auto 130px;
    font-size: 16px;
    border: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(176, 236, 230, 0.3); 
}
.back-btn {
    display: block;
    margin: 0 auto;
}
/* footer */

.site-footer {
    background-color: #B0ECE6;
    padding: 20px 0;
}

.site-footer small {
    text-align: center;
    display: block;
    color: #333;                    
    opacity: 0.8;
}


/* thanks page */


.container p:nth-of-type(1) {
    /* padding-top: 140px; */
    text-align: center;
}
.container p:nth-of-type(2) {
    padding-bottom: 140px;
}
.container .has-text-align-center {
    text-align: center;
}



/* sp */
@media screen and (max-width:650px) {
    .site-header h1,
    .site-header span {
        font-size: 2.2rem;          
    }
    .site-header {
        padding: 40px 0;
    }
    .form-content {
        padding: 0 20px;
    }
    .form-content dl {
        flex-direction: column;
    }
    .form-content dt {
        width: 100%;
        margin-bottom: 30px;
    }
    .form-content dd {
        width: 100%;
        margin-bottom: 30px;
    }
}