/*==========================
form
============================*/
main select {
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
}
main :is(select, input, textarea) {
    padding: 0.5em;
    border-radius: min(100vw / 750 * 4, 4px);
    border: 1px solid #707070;
    font-size: min(18rem * 1.414 + 9.79px, 18px);
    width: 100%;
}

/*==========================
label
============================*/

label.imageLabel:has(input[type="radio"]) {
    border-radius: min(100vw / 750 * 8, 8px);
    border: min(100vw / 750 * 3, 3px) solid #d6d6d6;
    padding: min(100vw / 750 * 8, 8px);
    text-align: center;
    color: var(--color1);
}

label.imageLabel:has(input[type="radio"]:checked) {
    border-color: var(--color3);
    background-color: var(--bgcolor1);
    color: var(--color1);
}
label.imageLabel:has(input[type="radio"]) input[type="radio"] {
    width: 1em;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    display: inline-block;
}

.imageLabel img {
    border-radius: min(100vw / 750 * 2, 2px);
}

label:has(input[type="radio"]) {
    color: var(--color7);
    border: 2px solid var(--color7);
    border-radius: min(100vw / 750 * 4, 4px);
    display: inline-block;
    margin: 0.2em;
    min-width: 4em;
    text-align: center;
    padding: 0 0.4em;
    font-size: min(20rem * 1.414 + 9.79px, 20px);
}
label:has(input[type="radio"]) input {
    display: none;
}
label:has(input[type="radio"]:checked) {
    color: var(--color2);
    background-color: var(--bgcolor4);
}

/*==========================
H2,3,4
============================*/

main h2 {
    background-color: var(--bgcolor5);
    color: var(--color6);
    padding: 1em 2em;
    font-size: min(24rem * 1.414 + 9.79px, 24px);
    font-family: var(--font2);
    margin: 2em 0;
}
main h3 {
    font-weight: bold;
    font-size: min(20rem * 1.414 + 9.79px, 20px);
    color: var(--color6);
    margin-top: 2em;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #959595;
    max-width: 640px;
    margin-inline: auto;
}
main h4 {
    font-weight: bold;
    font-size: min(20rem * 1.414 + 9.79px, 20px);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    max-width: 640px;
    margin-inline: auto;
    line-height: 1.5;
}
main .notrequired:before {
    content: "任意";
    background-color: #959595;
    color: var(--color2);
    text-align: center;
    display: inline-block;
    border-radius: min(100vw / 750 * 2, 2px);
    font-weight: bold;
    padding: 0.2em 0.4em;
    line-height: 1;
    margin-right: 0.5em;
}
main .required:before {
    content: "必須";
    background-color: var(--color4);
    color: var(--color2);
    text-align: center;
    display: inline-block;
    border-radius: min(100vw / 750 * 2, 2px);
    font-weight: bold;
    padding: 0.2em 0.4em;
    line-height: 1;
    margin-right: 0.5em;
}
.simulator__body {
    max-width: 640px;
    margin-inline: auto;
}
.simulator__body--area {
    font-size: min(20rem * 1.414 + 9.79px, 20px);
}
.simulator__body--waterType {
    gap: min(100vw / 750 * 20, 20px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    font-size: min(20rem * 1.414 + 9.79px, 20px);
    @media (width <=813px) {
        grid-template-columns: 1fr;
    }
}
.simulator__body--waterType label.imageLabel:has(input[type="radio"]) {
    grid-template-rows: subgrid;
    grid-row: span 4;
    display: grid;
    gap: min(100vw / 750 * 8, 8px);
}
.simulator__body--waterType label .unit__shippingFee {
    font-weight: bold;
    color: var(--color4);
}

.simulator__body table :is(th, td) {
    padding: 0.5em 1em;
}
.simulator__body .note {
    font-size: min(16rem * 1.414 + 9.79px, 16px);
}

.simulator__result {
    background-color: var(--bgcolor3);
}

/*============================
#process
============================*/
section#process.process {
    margin-bottom: min(100vw / 750 * 40, 40px);
}
section#process.process div.process__container.container {
}
section#process.process div.process__container.container div.process__body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
section#process.process div.body__step {
    color: var(--color2);
    text-align: center;
    font-size: min(16rem * 1.414 + 9.79px, 16px);
    background: #959595;
    position: relative;
    height: 40px;
    display: grid;
    align-items: center;
    line-height: 1.2;
    @media (width <= 834px) {
        font-size: min(12rem * 1.414 + 9.79px, 12px);
    }
}
section#process.process div.body__step:nth-of-type(n + 2):before {
    content: "";
    position: absolute;
    border-top: 20px solid #959595;
    border-right: 0px;
    border-bottom: 20px solid #959595;
    border-left: min(100vw / 750 * 20, 20px) solid var(--bgcolor1);
    background-color: var(--bgcolor1);
    left: 0px;
    top: 0px;
}
section#process.process div.body__step:nth-last-of-type(n + 2):after {
    content: "";
    position: absolute;
    border-top: 20px solid var(--bgcolor1);
    border-right: 0px;
    border-bottom: 20px solid var(--bgcolor1);
    border-left: min(100vw / 750 * 20, 20px) solid #959595;
    background-color: var(--bgcolor1);
    right: 0px;
    top: 0px;
}
body.page-order section#process.process .body__step--1,
body.page-confirm section#process.process .body__step--2,
body.page-thanks section#process.process .body__step--3 {
    background-color: var(--bgcolor4);
}
body.page-confirm section#process.process .body__step--2:before,
body.page-thanks section#process.process .body__step--3:before {
    border-top-color: var(--bgcolor4);
    border-bottom-color: var(--bgcolor4);
}

body.page-order section#process.process .body__step--1:after,
body.page-confirm section#process.process .body__step--2:after,
body.page-thanks section#process.process .body__step--3:after {
    border-left-color: var(--bgcolor4);
}

section#process.process div.process__container.container div.process__body div.body__step.body__step--2 {
}
section#process.process div.process__container.container div.process__body div.body__step.body__step--3 {
}
section#process.process div.process__container.container div.process__body div.body__step.body__step--4 {
}

/*============================
#result
============================*/
section#result.result {
    background: var(--bgcolor3);
    padding-bottom: min(100vw / 750 * 56, 56px);
}
section#result.result:before {
    content: "";
    display: block;
    border-top: min(100vw / 750 * 80, 80px) solid var(--bgcolor1);
    border-right: 50vw solid transparent;
    border-bottom: 0px;
    border-left: 50vw solid transparent;
}
section#result.result div.result__container.container {
}
section#result.result div.result__container.container h2 {
    background: none;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding: 0;
    font-size: min(40rem * 1.414 + 9.79px, 40px);
}
section#result.result div.result__container.container div.result__lead {
    text-align: center;
    margin-bottom: min(100vw / 750 * 40, 40px);
    font-size: min(14rem * 1.414 + 9.79px, 18px);
}
section#result.result div.result__container.container div.result__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: min(100vw / 750 * 24, 24px);
    @media (width <=813px) {
        grid-template-columns: 1fr;
    }
}
section#result.result div.result__container.container div.result__body div.body__unit {
    padding: 0.5em;
    border-radius: min(100vw / 750 * 20, 20px);
    border: min(100vw / 750 * 2, 2px) solid #d1f0ff;
    font-weight: bold;
    color: var(--color4);
    font-size: min(50rem * 1.414 + 9.79px, 50px);
    background-color: var(--bgcolor1);
    text-align: center;
}

section#result.result div.result__container.container div.result__body div.body__unit .small {
    font-size: 0.5em;
}
section#result.result div.result__container.container div.result__body div.body__unit .note {
    color: var(--color1);
    font-size: min(18rem * 1.414 + 9.79px, 18px);
}
section#result.result div.result__container.container div.result__body div.body__unit span#selectedNumber {
}
section#result.result div.result__container.container div.result__body div.body__unit {
}
section#result.result div.result__container.container div.result__body div.body__unit h3 {
    font-size: min(26rem * 1.414 + 9.79px, 26px);
    border: none;
    padding: 0;
    line-height: 1.5;
    margin-bottom: 0.5em;
    color: var(--color7);
    margin-top: 0;
}
section#result.result div.result__container.container div.result__body div.body__unit div.unit__number {
}
section#result.result div.result__container.container div.result__body div.body__unit div.unit__number .small {
}
/*============================
#totalPrice
============================*/
section#result.result
    div.result__container.container
    div.result__body
    div.body__column
    div.unit__number
    span#totalPrice {
}
section#result.result div.result__container.container div.result__body div.body__unit div.unit__number div.note {
}

/*============================
#waterPrice
============================*/
section#result.result
    div.result__container.container
    div.result__body
    div.body__column
    div.unit__number
    div.note
    span#waterPrice {
}
section#result.result
    div.result__container.container
    div.result__body
    div.body__column
    div.unit__number
    div.note
    span.shippingFee {
}

/*============================
#form
============================*/
section#form.form {
    padding-bottom: min(100vw / 750 * 80, 80px);
}
section#form.form div.form__container.container {
}
section#form.form div.form__container.container div.form__body {
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 1em;
}

section#form.form div.form__container.container div.form__body .body__personalInformation {
    padding: 0.2em;
    border-radius: min(100vw / 750 * 4, 4px);
    border: 1px solid #707070;
    font-size: min(14rem * 1.414 + 9.79px, 14px);
    line-height: 1.6;
    overflow-y: scroll;
    height: 10em;
}
#form .body__personalInformation :is(h1, h2, h3) {
    background: none;
    padding: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    font-family: var(--font1);
    text-align: left;
    font-weight: bold;
}
#form .body__personalInformation h1 {
    font-size: min(18rem * 1.414 + 9.79px, 18px);
}
#form .body__personalInformation h2 {
    font-size: min(16rem * 1.414 + 9.79px, 16px);
}

.wpcf7-submit {
    border: none;
    background-color: var(--color4);
    text-align: center;
    min-width: 10em;
    font-size: min(26rem * 1.414 + 9.79px, 26px);
    font-weight: bold;
    color: var(--color2);
    cursor: pointer;
    display: block;
    margin-inline: auto;
    width: fit-content;
    margin-top: min(100vw / 750 * 40, 40px);
}

.wpcf7-previous {
    border: none;
    background-color: #aaaaaa;
    text-align: center;
    min-width: 10em;
    font-size: min(20rem * 1.414 + 9.79px, 20px);
    font-weight: bold;
    color: var(--color2);
    cursor: pointer;
    display: block;
    margin-inline: auto;
    width: fit-content;
}

.wpcf7-form-control-wrap {
    display: contents;
}

.form__body--server .wpcf7-form-control {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    @media (width <=813px) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.form__body--server .wpcf7-form-control label {
    border-radius: min(100vw / 750 * 8, 8px);
    border: min(100vw / 750 * 3, 3px) solid #d6d6d6;
    padding: min(100vw / 750 * 8, 8px);
    text-align: center;
    color: var(--color1);

    display: block;
}
.form__body--server .wpcf7-form-control label:before {
    content: "";
    aspect-ratio: 63 / 224;
    display: block;
    width: 50%;
    margin-inline: auto;
    margin-bottom: min(100vw / 750 * 24, 24px);
}
.form__body--server .wpcf7-form-control label:has(input[value="ホワイト"]):before {
    background: url(../img/order/server_img1.jpg) center center/contain no-repeat;
}
.form__body--server .wpcf7-form-control label:has(input[value="ブラック"]):before {
    background: url(../img/order/server_img2.jpg) center center/contain no-repeat;
}
.form__body--server .wpcf7-form-control label:has(input[value="ベージュ"]):before {
    background: url(../img/order/server_img3.jpg) center center/contain no-repeat;
}
.form__body--server .wpcf7-form-control label:has(input[value="ピンク"]):before {
    background: url(../img/order/server_img4.jpg) center center/contain no-repeat;
}
.form__body--server .wpcf7-form-control label:has(input[value="グリーン"]):before {
    background: url(../img/order/server_img5.jpg) center center/contain no-repeat;
}
.form__body--server .wpcf7-form-control label:has(input:checked) {
    border-color: var(--color3);
    background-color: var(--bgcolor1);
    color: var(--color1);
}
.form__body--server .wpcf7-form-control label input[type="radio"] {
    width: 1em;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    display: block;
}