/* 共通 */
html{
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: #333;

    font-family: 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    background-color: #fff;
}
.base{
    margin: 0 auto;
    padding: 0 1em;
}
img{
    max-height: 100%;
    width: 100%;
}
h2 {
    margin-bottom: 1.5em;
    padding: 0.7em 0.5em;
    font-size: 18px;
    font-weight: bold;
    border-top: solid 2px #ff4500;
    background: linear-gradient(0deg, #ddd, #fff);
}
a{
    display: inline-block;
    text-decoration: underline;
}
.bold{
    font-weight: bold;
}
.red{
    font-family: auto;
    color: #ff0000;
}
button, select, input, textarea{
    width: fit-content;
    padding: 0.2em 0.5em;
    cursor: pointer;
    appearance: auto;
    background: revert;
    border: 1px solid #444;
    border-radius: 3px;
    text-align: center;
}
input {
    vertical-align: unset;
    appearance: auto;
}
dl,dt,dd{
    border: solid 1px gray;
}
dl {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    margin: 3em auto;

    dt{
        grid-column: 1;
        place-content: center;
        padding: 1em;
        padding-right: 3em;
        background-color: #dcdcdc;

        h3{
            font-size: 0.95em;
        }
    }
    dd{
        grid-column: 2;
        padding: 10px 5px;

        .red{
            font-weight: bold;
        }
        h4 {
            display: inline-block;
            padding: 0.3em;
            color: #d98719;
            font-weight: bold;
            border: solid 1px #dcdcdc;
            background-color: #eee;
        }
        p{
            margin-top: 0.5em;
            line-height: 1.5;
        }
    }
    select,input,textarea{
        text-align: start;
        position: relative;
    }
}
section {
    margin: 0 auto;
    width: 90%;
}
.gray-border{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 3em;
    padding: 1em;
    border: solid 4px #F5F5F5;
}
.btn-container {
    margin: 0 auto;
    width: 90%;
}
.step-img {
    display: grid;
    place-items: center;
    margin: 2em auto;
    width: 500px;
    max-width: 1000px;
}

@media screen and (max-width:767px) {
    body {
        font-size: 16px;
    }
    .base{
        padding: 0 7px;
    }
    .pc_only{
        display: none;
    }
    button, select, input, textarea{
        padding: 0.5em 0.3em;
    }
    dd:first-of-type select{
        padding: 0.5em 0.1em;
    }

    dl {
        grid-template-columns: auto;

        dt{
            padding: 0.7em;
        }
        dd{
            grid-column: 1;
            padding: 1.5em 0.3em;
        }
    }
    .gray-border {
        margin: 0 auto;
        padding: 1em 0.3em;
    }
    .step-img {
        width: 100%;
    }
}



/* header */
header {
    .header-zaq{
        padding: 0 1em;
        border-bottom: solid 4px #FFA500;

        .img{
            width: 100px;
        }
    }

    h1{
        margin-top: 1.5em;
        padding: 0 1em;
        font-size: 30px;
        color: #00BFFF;
        line-height: 1.5;
        border-bottom: solid 4px #00BFFF;
    }
}

@media screen and (max-width:767px) {
    header {
        h1 {
            padding: 0 0.5em;
            font-size: 22px;
        }
    }
}



/* footer */
footer {
    margin: 2em 0 4em;
    border-top: solid 2px #000;

    p {
        line-height: 2;
    }
}



/* agree */
#agree {

    .contact{

        .gray{
            margin-bottom: 3em;
            padding: 1em;
            background: #f5f5f5;
            
            p {
                font-weight: bold;
                line-height: 1.5;
            }
            a {
                margin: auto;
                font-weight: bold;
                color: #1e90ff;

            }
            .qa{
                display: block;
                width: fit-content;
                margin: 1em auto 0.1em;
            }

        }
    }

    .pp{
        p{
            line-height: 1.5;
        }
        a{
            color: #ff0000;
        }
    }

    .btn-container{
        display: grid;
        place-items: center;
        margin-top: 3em;
        padding: 1em;
        border: solid 4px #eee;

        .blue{
            display: grid;
            place-items: center;
            width: 200px;
            height: 70px;
            margin-bottom: 1em;
            text-align: center;
            font-weight: bold;
            line-height: 1.5;
            position: relative;
            background-color: #E6E6FA;

            .checkbox{
                position: relative;
                font-weight: normal;
                color: #000;
                
            }
        }
        .must::before{
            content: "";
            display: block;
            width: 26px;
            height: 16px;
            background-image: url("../img/icon-must.gif");
            position: absolute;
            top: 4px;
            left: -30px;
        }
    }
}



/* form */
#form {
    .note {
        /*text-align: center;*/ /*修正*/
    }
    #error-content {
        display: none;
        margin-top: 2em;
        padding: 20px;
        background-color: #f5f5f5;

        .bold{
            font-weight: bold;
        }
        .error-list {
            margin-top: 1.5em;
            margin-top: 1.5em;
            padding-left: 1.5em;
            color: red;
            list-style: disc;
        }
    }
    .confirm {
        margin: 0.5em 0;

        p {
            margin-top: 0;
        }
        #error {
            color: #ff0000;
        }
    }
    dd.txt {
        h4 {
            margin: 2em 0 1em;
        }
        p {
            font-weight: bold;
        }
        ul {
            margin: 1em 0;
        }
        li {
            margin-left: 1.5em;
            padding-left: 0.5em;
            list-style: auto;
            font-weight: bold;
            line-height: 1.5;
        }
    }
    textarea{
        display: block;
        width: calc(100% - 100px);
        max-width: 100%;
        resize: vertical;  /*追加*/
    }
    .btn{
        display: flex;
        justify-content: center;
        margin-top: 2em;
    }

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



/* confirm */
#confirm {
    .note{
        /*text-align: center;*/ /*修正*/
    }
    .btn{
        display: flex;
        justify-content: center;
        column-gap: 1em;
        margin-top: 2em;
    }
    > .red {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding-left: 1em;  /*追加*/
        line-height: 1.35;
        text-indent: -1em;  /*追加*/
    }
}



/* complete */
#complete {
    .gray-border {
        display: flex;
        flex-flow: column;
        row-gap: 2em;
        text-align: center;
        line-height: 1.5;
    }

    p {
        text-align: center;
    }
}



/* error */
#error {

    .gray-border {
        display: flex;
        flex-flow: column;
        row-gap: 2em;
        margin: 5em auto;
        text-align: center;
        line-height: 1.5;
    }

    p {
        text-align: center;
    }
}