@charset "UTF-8";

@media only screen and (min-width: 768px) {
    .contact-subpage::before {
        background-image: url(../images/contact/contact-title.png);
    }
}

.contact-tel {
    background: url(../images/common/bg1.png) repeat center top;
    background-size: 0.321429em auto;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
}

.contact-tel h2,
.contact-form h2 {
    text-align: center;
    font-size: 1.357143em;
    font-weight: 500;
    margin: 0 0 1em;
}

.contact-tel h2 {
    color: #fff;
}

.contact-tel-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 18.571429em;
    text-decoration: none;
    text-align: center;
    background-color: #fff;
    height: 3.571429em;
    border-radius: 1.7857145em;
    line-height: 1;
    margin: 0 auto 1em;
}

.contact-tel-btn span {
    display: inline-block;
    vertical-align: middle;
}

.contact-tel-btn span i {
    vertical-align: baseline;
}

.contact-tel-btn span {
    font-family: 'Nunito', sans-serif;
    font-size: 1.642857em;
    font-weight: 600;
}

.contact-tel-btn .fa-phone-volume {
    font-size: 0.826087em;
    margin-right: 0.5em;
}

@media only screen and (min-width: 768px) {
    .contact-tel {
        background: transparent;
        padding: 5em 0 0;
    }

    .contact-tel > .inner {
        background: url(../images/common/bg1.png) repeat center top;
        background-size: 0.5625em auto;
        padding: 2em;
    }

    .contact-tel-btn {
        cursor: default;
        width: 23.75em;
        height: 4.75em;
        border-radius: 2.375em;
    }

    .contact-tel-btn:hover {
        text-decoration: none;
    }

    .contact-tel-btn span {
        font-size: 2.125em;
    }

    .contact-tel-btn .fa-phone-volume {
        font-size: 0.882353em;
    }

    .contact-form > .inner {
        margin: 0 auto;
        width: 94%;
        max-width: 1000px;
    }

    .contact-tel h2,
    .contact-form h2 {
        font-size: 1.625em;
        margin-bottom: 1.25em;
    }
}

.required,
.EasyRequired {
    color: #b40000;
}

.form-wrap form {
    display: block;
    margin: 0 auto;
}

.form-wrap table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
}

.form-wrap .EasyTable td,
.form-wrap .EasySubmit td {
    display: block;
}

.form-wrap .EasyTable td {
    display: block;
    font-size: 0.928571em;
}

.form-wrap .EasySubmit {
    margin: 0 auto;
}

.form-wrap .EasySubmit td:nth-child(1) {
    padding-bottom: 1.785714em;
}

.form-wrap .EasyTable td:nth-child(1) {
    border-top: 1px dashed #36c9dc;
    border-bottom: 1px dashed #36c9dc;
    background-color: #e6f8fa;
    padding: 0.5em 1em;
}

.form-wrap .EasyTable td:nth-child(2) {
    padding: 1em 0 2.5em;
}

.form-wrap .EasyTable input[type=text],
.form-wrap .EasyTable textarea {
    border: 1px solid #36c9dc;
    font-size: 1em;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
    padding: 0.5em;
    outline: none;
}

.form-wrap .EasyTable select {
    border: 1px solid #36c9dc;
    font-size: 1em;
    outline: none;
    padding: 0.5em;
}

.form-wrap .EasyTable textarea {
    height: 12em;
    resize: vertical;
}

.form-wrap .EasyTable .full-width {
    width: 100%;
}

/* .form-wrap .EasyTable .short-width { */
.form-wrap .EasyTable input[name="zip_8"] {
    width: 10em !important;
    margin: 0 0 .5em .5em;
}
.form-wrap .EasyTable select[name="pref_8"] {
    margin: 0 0 .5em .5em;
}

.form-wrap .EasyTable .inline-input {
    display: block;
    margin: 0.5em 0 0;
}

.form-wrap .EasyTable .inline-input:first-child {
    margin-top: 0;
}

.form-wrap .EasyTable .inline-input a {
    font-weight: 500;
    color: #00bed6;
}

@media only screen and (min-width: 768px) {
    .form-wrap .EasyTable {
        margin-bottom: 3.75em;
        table-layout: fixed;
    }

    .form-wrap .EasyTable td,
    .form-wrap .EasySubmit td {
        display: table-cell;
        vertical-align: middle;
        font-size: 1.125em;
    }

    .form-wrap .EasySubmit td {
        padding: 0 1.25em;
    }

    .form-wrap .EasySubmit {
        max-width: 760px;
    }

    .form-wrap .EasyTable td:nth-child(1) {
        border-top: 1px dashed #36c9dc;
        border-bottom: 1px dashed #36c9dc;
        background-color: #e6f8fa;
        padding: 1em 1.5em;
        width: 36%;
        min-width: 15em;
    }
    
    .form-wrap .EasyTable td:nth-child(2) {
        padding: 1em 1.5em;
        border-top: 1px dashed #36c9dc;
        border-bottom: 1px dashed #36c9dc;
    }

    .form-wrap .EasyTable .EasyRightTd {
        font-size: 1em;
    }

    .form-wrap .EasyTable textarea {
        height: 8em;
    }

    .form-wrap .EasySubmit td:nth-child(1) {
        padding-bottom: 0;
    }
}

.form-wrap .EasyCheckButtonDiv input[type=submit],
.form-wrap input[type=submit] {
    display: block;
    margin: 0 auto;
    text-decoration: none;
    font-weight: 500;
    font-size: 1em;
    font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, 'Meiryo UI', 'メイリオ', Meiryo, sans-serif;
    color: #fff;
    background-color: #464646;
    text-align: center;
    line-height: 1;
    padding: 0.9375em 1.5em;
    border-radius: 1.4375em;
    border: 1px solid #464646;
    -webkit-transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    width: 18.571429em;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-wrap input[type=submit].EasyReturnButton {
    background-color: #d2d2d2;
    color: #3c3c3c;
    border-color: #d2d2d2;
}

@media only screen and (min-width: 768px) {
    .form-wrap .EasyCheckButtonDiv input[type=submit],
    .form-wrap input[type=submit] {
        width: 21.25em;
    }

    .form-wrap .EasyCheckButtonDiv input[type=submit]:hover,
    .form-wrap input[type=submit]:hover,
    .form-wrap input[type=submit].EasyReturnButton:hover {
        background-color: #fff;
        color: #3c3c3c;
        border-color: #3c3c3c;
    }

    .form-wrap input[type=submit] {
        max-width: 18.571429em;
        width: 100%;
    }
}