@charset "utf-8";

/* *,
::before,
::after {
    box-sizing: border-box;
} */
main {
    --fontsizeH: 40px;
    --fontsizeText: 20px;
    --fontsizeA: 18px;
    --sideLR: 50px;
    --widthDL: 659px;
    /* font-family: 'Shippori Mincho', serif; */
    display: flex;
    flex-wrap: wrap;
}
.contact {
    margin: 0 auto;
    flex: 0 1 900px;
    display: flex;
    flex-wrap: wrap;
}
.contact h1 {
    /* margin: 0; */
    padding: 20px 0;
    font-size: var(--fontsizeH);
    font-weight: 800;
    flex: 0 1 100%;
}
.contact p {
    /* margin: 0; */
    padding: 15px 0;
    flex: 0 1 100%;
}
.tel_contact {
    display: inline-block;
    padding: 5px;
    flex: 0 1 400px;
    background-color: #ccc;
}
.tel_contact h2 {
    /* margin: 0; */
    padding-bottom: 5px;
    font-size: 18px;
    font-weight: 600;
}
.tel_contact h2::before {
    content: "【";
}
.tel_contact h2::after {
    content: "】";
}
dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.tel_contact dl dt {
    margin-right: 20px;
    flex: 0 0 70px;
}
.tel_contact dl dd {
    /* margin-left: 20px; */
    flex: 1 1 225px;
}
.contact_form {
    margin: 0 auto;
    padding-bottom: 50px;
    flex: 0 1 1000px;
}
.required {
    margin: 0;
    color: #f00;
    font-weight: 700;
}
.form_box {
    padding: 50px var(--sideLR);
    background-color: #a7baca;
}
form dl {
    margin-bottom: 20px;
}
form dl dt {
    margin-right: 40px;
    font-weight: 700;
    flex: 0 0 200px;
}
form dl>dd,
form dl .radio_button {
    /* margin-left: 40px; */
    /* padding-bottom: 20px; */
    margin-bottom: 20px;
    flex: 1 1 421px;
}
form dl>dd:last-of-type {
    margin-bottom: 0;
}
.confirm_dd {
    overflow-x: auto;
}
form dl dd p {
    font-size: var(--fontsizeText);
    /* word-break: break-all; */
}
form dl .radio_button {
    display: flex;
    flex-wrap: wrap;
}
form dl .radio_button dd {
    margin-left: 0;
    padding: 0;
    font-size: 17px;
    flex: 1 1 150px;
}
label {
    display: block;
}
.input_form {
    width: 100%;
    height: 40px;
    border: none;
    font-size: var(--fontsizeText);
}
input[type="radio"] {
    width: auto;
    height: auto;
}
textarea {
    width: 100%;
    border: none;
    font-size: var(--fontsizeText);
}
.input_form:focus,
textarea:focus {
    outline: 2px solid #666;
}
.button {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.btn_form {
    margin-top: 30px;
    height: 50px;
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    flex: 0 1 331px;
}
/* 詳細度考慮 */
.button .btn_top {
    display: block;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: var(--fontsizeA);
    cursor: pointer;
    flex: 0 1 331px;
}
.btn_dark {
    background-color: #aaa;
}
.btn_middle {
    background-color: #bbb;
}
.btn_light {
    background-color: #ccc;
}
.btn_form:hover {
    background-color: #666;
}
@media(max-width:961px) {
    .contact h1 {
        font-size: calc(var(--fontsizeH) - 24 * (960px - 100vw) / 960);
    }
    .form_box {
        padding: 50px calc(var(--sideLR) - 50 * (960px - 100vw) / 960);
    }
    form dl>dd {
        width: calc(var(--widthDL) - (960px - 100vw));
    }
    form dl dd p,
    .input_form,
    textarea {
        font-size: calc(var(--fontsizeText) - 8 * (960px - 100vw) / 960);
    }
}
@media(max-width:400px) {
    /* 詳細度考慮 */
    .button .btn_top {
        font-size: calc(var(--fontsizeA) - 18 * (400px - 100vw) / 400);
    }
}