@charset "utf-8";
/*------------------------------------------------------------
	contact
------------------------------------------------------------*/
.pageTitle {
    background-image: url("../img/contact/page_title_bg.jpg");
}
.contact {
    padding: 144px 0 79px;
    background-color: #EAF6FD;
}
.contact .content {
    max-width: 1000px;
}
.mailForm table {
    width: 100%;
    border-collapse: collapse;
}
.mailForm table th {
    padding: 6px 20px 0 20px;
    width: 252px;
    font-weight: 400;
    background-color: #DBE7ED;
}
.mailForm table th .must {
    margin-top: 3px;
    width: 50px;
    height: 20px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    border-radius: 3px;
    background-color: #E60012;
}
.mailForm table td {
    padding: 11px 24px 0 27px;
    background-color: #fff;
    word-break: break-all;
}
.mailForm table th,
.mailForm table td {
    padding-bottom: 11px;
    border-top: 1px solid #898989;
    border-bottom: 1px solid #898989;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
}
.mailForm table td .note {
    margin-top: 5px;
    font-size: 1.2rem;
}
.mailForm table td .oldBox input {
	width: 121px;
}
.mailForm table td .oldBox span {
	margin-left: 5px;
    font-size: 1.2rem;
}
.mailForm input[type="text"],
.mailForm input[type="tel"],
.mailForm input[type="email"],
.mailForm select,
.mailForm textarea {
    padding: 4px;
    width: 100%;
    height: 30px;
    color: #000;
    font-size: 1.2rem;
    border: 1px solid #898989;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 0;
    background-color: #fff;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.mailForm select {
    padding: 0 16px 0 2px;
    width: 121px;
    height: 22px;
    background: url("../img/common/icon_select.png") no-repeat right 8px top 3px / 6px;
}
.mailForm textarea {
    resize: vertical;
    height: 242px;
}
.mailForm .submit {
    margin: 79px 0 0;
    display: flex;
    justify-content: center;
}
.mailForm .submit li {
    margin: 0 20px;
}
.mailForm .submit input {
    width: 276px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #004098;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 0;
    border: 1px solid #004098;
    box-shadow: none;
    box-sizing: border-box;
    background-color: #fff;
    cursor: pointer;
    transition: 0.3s ease;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.formBox .errorMsg {
    margin-top: -124px;
    margin-bottom: 20px;
}
.formBox .errorMsg li {
    color: #F00;
    font-size: 1.2rem;
}
@media all and (min-width: 897px) {
    .mailForm .submit input:hover {
        opacity: .7;
    }
    .mailForm input.short {
        width: 376px;
    }
    .mailForm input.long {
        width: 476px;
    }
}
@media all and (max-width: 896px) {
    .contact .content {
        max-width: inherit;
    }
    .mailForm table th, .mailForm table td {
        display: block;
        width: 100%;
    }
    .mailForm table th,
    .mailForm table td {
        padding: 6px 12px;
        border-bottom: none;
    }
    .mailForm table th {
        font-size: 1.6rem;
    }
    .contact {
        padding: 60px 0;
    }
    .mailForm .submit {
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
    }
    .mailForm .submit li {
        margin: 0;
    }
    .mailForm .submit li:not(:last-of-type) {
        margin-bottom: 30px;
    }
	.formBox .errorMsg {
		margin-top: -38px;
	}
}

/* thanks */
.thanks {
    padding: 144px 0 79px;
}
.thanks .title {
    margin-bottom: 40px;
    font-size: 2.4rem;
    text-align: center;
    font-weight: 400;
    font-family: var(--noto-serif);
}
.thanks p {
    margin-bottom: 20px;
    text-align: center;
}
@media all and (max-width: 896px) {
    .thanks {
        padding: 60px 0;
    }
    .thanks p {
        text-align: left;
    }
}