@charset "UTF-8";

.c-btn {
    color: #555;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    border-radius: 5px;
    display: block;
    margin: auto;
    width: 14vw;
}

.c-btn:hover {
    opacity: 0.8;
}

.c-btn_form {
    background-color: #fff;
    border: #555 1px solid;
    display: block;
    padding: 10px;
}

.c-btn_form:hover {
    background-color: #555;
    color: #e7e7e7;
}

.c-btn_link {
    background-color: #fff;
    border: #555 1px solid;
    display: block;
}

.c-btn_link a {
    padding: 10px;
    box-sizing: border-box;
    width: 14vw;
    display: block;
}

.c-btn_link:hover a {
    background-color: #555;
    color: #e7e7e7;
}

/* form.php,confirm.php */
.form-container {
    text-align: center;
    font-size: 2vw;
    margin: 30px;
}

.form-container input,
.form-container textarea,
.l-confirm td {
    display: block;
    margin: .5vw auto 2vw;
    font-size: 2vw;
    width: 40vw;
    max-width: 40vw;
    background-color:#fff;
    text-align: left;
    resize: none;
    border: none;
    border-bottom: 1px solid;
    line-height: 1.3;
}

.multi {
    overflow: auto;
    height:15vw;
    max-height:15vw;
}
.form-container textarea {
    margin-bottom: 3vw;
}
.form-container p,
.l-confirm th {
    display: block;
    margin: 0 auto;
    font-size: 1vw;
    width: 40vw;
    max-width: 40vw;
    text-align: left;
}

input:focus {
    outline-color: transparent;
    border-bottom-color: darkcyan;
}

.confirm-table {
    margin: 30px auto;
    width: 50%;
    font-size: 2vw;
    line-height: 1.3;
}

.l-confirm p {
    text-align:center;
    margin-bottom:2vw;
    font-size:1.5vw;
}

/* ボタンが変わってしまうので消さない */
.l-confirm .c-btn {
    display: inline-block;
}

/* send.php */
.question-text {
    text-align: center;
    line-height: 1.5;
}

.question-text span,
.error {
    color: red;
}

.l-send {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.l-send-container {
    margin:2vw auto;
}

.l-send-container h2 {
    font-size:1.5vw;
}

#contents {
    padding-top:5vw;
    margin-bottom:5vw;
}

@media screen and (max-width: 1024px) {
    .c-btn {
        width: 22vw;
    }
    .c-btn_link a {
        width: 22vw;
    }
    .form-container {
        font-size: 3vw;
        margin: 30px;
    }
    .form-container h2{
        font-size: 3vw;
    }
    .form-container input,
    .form-container textarea,
    .l-confirm td {
    margin: .7vw auto 2vw;
    font-size: 3vw;
    width: 60vw;
    max-width: 60vw;
    line-height: 1.5;
    }
    .multi {
        height:20vw;
        max-height:20vw;
    }
    .form-container textarea {
        margin-bottom: 5vw;
    }
    .form-container p,
    .l-confirm th {
        font-size: 2vw;
        width: 60vw;
        max-width: 60vw;
    }
    .confirm-table {
        font-size: 3vw;
        line-height: 1.5;
    }
    .l-confirm p {
        margin-bottom:3vw;
        font-size:2.5vw;
    }
    .l-send-container h2 {
        font-size:2vw;
    }

    #contents {
        padding-top:7.5vw;
        margin-bottom:7.5vw;
    }
}

@media screen and (max-width: 768px) {
    .c-btn {
        width: 26vw;
    }
    .c-btn_link a {
        width: 26vw;
    }
    .form-container h2{
        font-size: 3.5vw;
    }
    .form-container input,
    .form-container textarea,
    .l-confirm td {
    margin: .9vw auto 2vw;
    font-size: 3.5vw;
    width: 70vw;
    max-width: 70vw;
    }
    .form-container textarea {
        margin-bottom: 7vw;
    }
    .multi {
        height:30vw;
        max-height:30vw;
    }
    .form-container p,
    .l-confirm th {
        font-size: 3vw;
        width: 70vw;
        max-width: 70vw;
    }
    .l-confirm p {
        margin-bottom:4vw;
        font-size:3vw;
    }
    .l-send-container h2 {
        font-size:3vw;
    }
    #contents {
        padding-top:10vw;
        margin-bottom:10vw;
    }
}

:root {
    --maincolor:#d9d6ea;
}

html, body, div, span, a, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

h1 {
    font-size: 2.25vw;
}

h2 {
    font-size: 2vw;
}

p {
    font-size: 1.3vw;
}

ul, ol {
    list-style: none
}

body {
    background-image: linear-gradient(#d9d6ea 0%, #f0f3ff 30%, #f0fff4 60%, #fffee2 100%);
}

.mainContact {
    width: 100vw;
    display: flex;
    justify-content: center;
}