@charset "utf-8";

main {
    --fontsizeH: 40px;
    --fontsizeText: 20px;
    --fontsizeA: 18px;
    --sideLR: 50px;
    --widthDL: 659px;
    display: flex;
    flex-wrap: wrap;
    }
.contact {
    margin: 0 auto;
    flex: 0 1 900px;
    display: flex;
    flex-wrap: wrap;
}
.contact h1 {
    padding: 20px 0;
    font-size: var(--fontsizeH);
    font-weight: 800;
    flex: 0 1 100%;
}
.contact p {
    padding: 15px 0;
    flex: 0 1 100%;
}
.line{
    color: #f00;
}
.tel_contact {
    display: inline-block;
    padding: 5px;
    margin-bottom: 20px;
    flex: 0 1 400px;
    background-color: #ccc;
}
.tel_contact h2 {
    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 {
    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-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);
}
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);
}
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;
}
.form_box dd:nth-of-type(5) input{
    width: 70px;
    text-align: center;
}
.form_box dd:nth-of-type(6) input{
    width: 200px;
    text-align: center;
}
.form_box dd:nth-of-type(7) select{
    width: auto;
}
@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);
    }
    .form_box dd:nth-of-type(7) select{
        font-size: calc(var(--fontsizeA) - 6 * (960px - 100vw) / 960);
    }
}
@media(max-width:400px) {
    /* 詳細度考慮 */
    .button .btn_top {
        font-size: calc(var(--fontsizeA) - 18 * (400px - 100vw) / 400);
    }
}