/*---------------- chatform ----------------*/

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input , textarea {
    font-size: 18px;
    font-family: Arial;
}

#forms #chatForm label input[type="radio"],
#forms #chatForm label input[type="checkbox"] {
    display: none;
}

.red {
    color: #d12525;
}

.blue {
    color: #2d5faa;
    font-weight: bold;
}

.green {
    color: #2a9136;
    font-weight: bold;
}

#formOutline {
    margin: 50px auto 100px;
    max-width: 940px;
    padding: 0 20px;
}

div#formButton {
    cursor: pointer;
    position: relative;
    top: 30px;
    width: 100%;
}

.borderBottom {
    display: none;
    font-size: 0;
}

#forms {
    background-color: #bbe2e5;

/* background: url(../../img/kurapital/chatform/form_bg.webp); */
    /* background-size: 3%; */
    box-shadow: 1px 0 4px rgb(6 52 108 / 30%);
    font-size: 15px;
    margin-top: -30px;
    padding: 30px 30px 60px;
}

#forms .balloon.fir {
    margin-bottom: 20px;
    margin-top: 70px;
}

#forms .balloon {
    background: #fff;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #3b8598;
    letter-spacing: -1px;
    line-height: 1.5;
    margin-bottom: 20px;
    margin-left: 83px;
    margin-right: 30%;
    max-width: 450px;
    min-width: 11em;
    padding: 15px 16px 13px;
    position: relative;
}

#forms .balloon p:before {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 15px 0 16px 12px;
    content: "";
    left: -7px;
    position: absolute;
    top: 0;
    transform: rotate(-41deg);
    z-index: 1;
}

#forms #chat_cost .balloon p span {
    color: #f14610;
    font-weight: bold;
}

#forms .balloon.fir:after {
    background: url(../../img/kurapital/chatform/chat_icon_b.webp) no-repeat;
    background-size: 100%;
    content: "";
    display: inline-block;
    height: 45px;
    left: -69px;
    position: absolute;
    top: -21px;
    width: 45px;
}

#forms .balloon.fir::before {
    content: "クラピタル　オペレーター";
    display: inline-block;
    font-size: 13px;
    left: 0;
    position: absolute;
    top: -25px;
}

#forms .loading {
    display: none;
}

#forms .loading img {
    max-height: 21px;
    max-width: 84px;
}

#forms .balloon.waiting {
    font-size: 0;
    height: 21px;
    margin-right: calc(100% - 300px);
    max-width: 150px;
    width: 150px
}

#forms .balloon.waiting .loading {
    align-items: center;
    display: flex;
    justify-content: center
}

div#introS_outline {
    margin: 30px 15px 0;
    width: calc(100% - 30px);
}

#forms #chatForm .introS {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
}

div.introS label,
div.introS .introS_4 {
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

div.introS .intro_start {
    align-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #3b8598;
    display: flex;
    flex-wrap: wrap;
    height: 70px;
    justify-content: center;
    line-height: 1.3;
    padding-top: 57px;
    position: relative;
    text-align: center;
}

span.dial_number_display {
    display: block;
    font-size: 15px;
    line-height: 1;
    width: 100%;
}

div.introS .intro_start:before {
    background: url(../../img/kurapital/chatform/bg.webp);
    background-size: 146%;
    border-radius: 10px;
    content: "";
    display: block;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
}

div.introS input:checked + .intro_start p {
    color: #fff;
}

div.introS label.introS_1 .intro_start {
    background: #fff2ee;
    border: 2px solid #f14610;
    color: #f14610;
    font-weight: bold;
}

div.introS .introS_1 input:checked + .intro_start {
    background: #f14610;
    border-color: #f14610;
    box-shadow: none;
    color: #fff;
}

.introS_1 .description {
    background-color: #f14610;
}

div.introS label.introS_2 .intro_start {
    background: #e7ffe4;
    border: 2px solid #2a9136;
    color: #2a9136;
    font-weight: bold;
}

div.introS .introS_2 input:checked + .intro_start {
    background: #2a9136;
    border-color: #2a9136;
    box-shadow: none;
    color: #fff;
}

.introS_2 .description {
    background-color: #2a9136;
}

div.introS label.introS_3 .intro_start {
    background: #e8f9fe;
    border: 2px solid #2d5faa;
    color: #2d5faa;
    font-weight: bold;
}

div.introS .introS_3 input:checked + .intro_start {
    background: #2d5faa;
    border-color: #2d5faa;
    box-shadow: none;
    color: #fff;
}

.introS_3 .description {
    background-color: #2d5faa;
}

.introS_4 .intro_start {
    background: #fff8ee;
    border: 2px solid #da8c19;
    color: #da8c19;
}

.introS_4:hover {
    text-decoration: none;
}

.introS_4 .description {
    background-color: #da8c19;
}

.introS_4 img {
    height: 1em;
    margin-right: 10px;
    position: relative;
    top: -3px;
    width: 1em;
}

.time {
    align-items: center;
    background: #2a9136;
    border-radius: 7px 7px 0 0;
    color: #fff;
    display: flex;
    font-size: 26px;
    font-weight: bold;
    height: 40px;
    justify-content: center;
    margin-bottom: 15px;
    position: absolute;
    top: 0;
    width: 100%;
}

.potion p.notice_s {
    color: #000;
    font-size: 18px;
    font-weight: normal;
    text-align: inherit;
}

.potion p.itext_O {
    font-weight: bold;
    line-height: 1.3;
    padding: 10px 0 15px;
}

#introO_4 .intro_start:after {
    background: url(../../img/kurapital/chatform/recommendation.webp) no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 55px;
    left: -5px;
    position: absolute;
    top: -12px;
    width: 250px;
}

.description {
    align-items: center;
    border-radius: 7px 7px 0 0;
    color: #fff;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    justify-content: center;
    line-height: 1.5;
    padding: 7px 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}

.cost_contact .introS_2 {
    /* grid-column-start: 2; */
}

.cost_contact,
.twice_cost_contact {
    background: url(../../img/kurapital/chatform/cost_contact2.webp) no-repeat;
    background-size: contain;
    padding-top: 70px;
}

.cost_contact .description {
    line-height: 1.2;
}

.cost_contact.introS {
    grid-template-columns: 1fr 1fr 1fr 19% !important;
}

.twice_cost_contact.introS {
    grid-template-columns: 1fr 1fr 19% !important;
}

.cost_contact.introS .intro_start {
    height: 60px;
    padding-top: 48px;
}

.simple_cost_contact.introS {
    grid-template-columns: 47% 38% !important;
    margin: auto;
    max-width: 476px;
    width: 100%;
}

.simple_cost_contact .introS_4,
.twice_cost_contact.introS .introS_2 {
    /* grid-column-start: 2; */
}

.simple_cost_contact {
    background: url(../../img/kurapital/chatform/simple_cost_contact2.webp) no-repeat top;
    background-size: contain;
    padding-bottom: 56px;
    padding-top: 50px;
}

.multipleC {
    margin: 40px 15px 0;
    width: calc(100% - 30px);
}

#chat_cost .optionOutline {
    border-color: #f14610;
}

#chat_trouble.inquiries .optionOutline {
    border-color: #2a9136;
}

#chat_trouble.netReserve .optionOutline {
    border-color: #2d5faa;
}

#forms #chat_trouble .balloon p span {
    color: #2a9136;
    font-weight: bold;
}

.optionOutline {
    background: #fff;
    border-radius: 5px;
    border-top: 5px solid;
    box-shadow: 3px 3px 5px #3b8598;
    display: grid;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    justify-content: start;
    padding: 45px 40px;
    position: relative;
}

.optionOutline.resultOption,
.optionOutline.customer_info,
#reservation_form .optionOutline {
    display: flex;
    gap: unset;
}

.optionOutline.customer_info {
    flex-direction: column;
}

textarea#trouble_etc_input {
    margin-top: 25px;
    max-height: 5em;
    max-width: calc(100% - 20px);
    min-height: 5em;
    min-width: calc(100% - 20px);
}

.optionOutline.four {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.optionOutline.three {
    grid-template-columns: 1fr 1fr 1fr;
}

.optionOutline.two_select {
    grid-template-columns: 1fr 1fr;
}

.optionOutline label.two {
    width: calc(200% + 10px);
}

#chat_cost .optionOutline label .chat_O {
    border-color: #f14610;
    box-shadow: 0 4px 0 #f14610;
    color: #f14610;
}

#chat_trouble.inquiries .optionOutline label .chat_O {
    border-color: #2a9136;
    box-shadow: 0 4px 0 #2a9136;
    color: #2a9136;
}

#chat_trouble.netReserve .optionOutline label .chat_O {
    border-color: #2d5faa;
    box-shadow: 0 4px 0 #2d5faa;
    color: #2d5faa;
}

#forms #chat_trouble.netReserve .balloon p span {
    color: #2d5faa !important;
}

.optionOutline label .chat_O {
    align-items: center;
    background: #fff;
    border: 2px solid;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    height: calc(100% - 5px);
    justify-content: space-evenly;
    text-align: center;
}

.optionOutline label .chat_O.no_img {
    min-height: 60px;
}

.optionOutline label .chat_O.no_img p {
    margin-top: 5px;
}

.optionOutline label .chat_O p {
    line-height: 1.2;
    margin-bottom: 5px;
    text-align: center;
}

.haveImg .chat_O {
    height: 120px;
    justify-content: flex-start !important;
    overflow: hidden;
}

.haveImg .chat_O p {
    align-items: center;
    display: flex;
    height: 3em;
    margin-top: 5px;
}

.optionOutline label input:checked + .chat_O {
    bottom: -4px;
    box-shadow: none;
    color: #fff !important;
    position: relative;
}

#chat_cost .optionOutline label input:checked + .chat_O {
    background: #f14610;
}

#chat_trouble.inquiries .optionOutline label input:checked + .chat_O {
    background: #2a9136;
}

#chat_trouble.netReserve .optionOutline label input:checked + .chat_O {
    background: #2d5faa;
}

div#chatO_1 label .chat_O img,
div#cost_chatO_1 label .chat_O img,
div#one_minutes_normalO_1 label .chat_O img {
    margin: 5px;
    max-width: 80px;
    width: 90%;
}

p.notice_l {
    font-size: 15.0px;
    margin-top: 25px;
    text-align: center;
    width: 100%;
}

.confirm {
    bottom: -15px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.confirm button,
.confirm span {
    align-items: center;
    background: #ffb94b;
    border: none;
    border-radius: 14px;
    box-shadow: 3px 3px 5px #3b8598;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 17px;
    font-weight: bold;
    height: 30px;
    justify-content: center;
    margin: auto;
    width: 7em;
}

/*---------------- Q2 ----------------*/
p.optionTitle {
    background: #e8f9fe;
    color: #0e3f88;
    font-size: 18px;
    font-weight: bold;
    grid-column-end: 5;
    grid-column-start: 1;
    line-height: 40px;
    text-align: center;
}

p.notice_l {
    grid-column-end: 5;
    grid-column-start: 1;
}

#chat_trouble.inquiries p.optionTitle {
    background: #f0fff4;
    color: #2a9136;
}

div#chatO_2 {
    flex-direction: column;
}

/*---------------- Q3 ----------------*/

div#chatO_3 .optionOutline {
    flex-direction: column;
}

div#chatO_3 .optionTitle,
div#chatO_4 .optionTitle,
div#chatO_5 .optionTitle {
    background: none;
    line-height: 25px;
}

label#chatO_4_8 {
    width: 100% !important;
}

/*---------------- Q4 ----------------*/

#chatO_4_1,
#chatO_4_2,
#chatO_4_3 {
    width: calc(100% / 3 - 10px) !important;
}

#chatO_4 label .chat_O {
    height: 60px;
    min-height: 45px;
}

/*---------------- お客様情報 ----------------*/
#hideIfThereisNoOkItem .optionOutline {
    padding: 45px 40px 30px;
}

.userForm {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: auto 0;
    width: 100%;
}

#chat_cost .userForm .input input[type="text"],
#chat_cost .otheraddress,
#chat_cost textarea {
    background-color: #fffaf8;
    border-color: #f14610;
}

input#sys_zyusho {
    background-color: #ececec !important;
    border-color: #9e9e9e !important;
}

#chat_trouble.inquiries .userForm .input input[type="text"],
#chat_trouble.inquiries .otheraddress,
#chat_trouble.inquiries textarea {
    background-color: #f8fffb;
    border-color: #2a9136;
}

#chat_trouble.netReserve .userForm .input input[type="text"],
#chat_trouble.netReserve .otheraddress,
#chat_trouble.netReserve textarea {
    background-color: #f8faff;
    border-color: #2d5faa;
}

.userForm .input input[type="text"],
.userForm .otheraddress,
textarea {
    border: 2px solid;
    border-radius: 5px;
    -webkit-box-shadow: inset 2px 2px 3px rgb(98 68 68 / 30%);
            box-shadow: inset 2px 2px 3px rgb(98 68 68 / 30%);
    line-height: 1.2;
    padding: 12px 10px 10px;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    width: calc(100% - 18px);
}

.tooltip.note {
    font-weight: bold;
}

.userForm .address {
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    justify-content: flex-start;
}

.userForm .address div:nth-child(1) {
    line-height: 1.5;
    width: 5em !important;
}

li.address div {
    width: 100%;
}

input#sys_zyusho:focus-visible {
    outline: none;
}

.submitbtn {
    align-items: center;
    background: #ec874a;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 0 #ab4c13;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    height: 50px;
    justify-content: center;
    padding-top: 5px;
    position: relative;
    width: 100%;
}

.submitbtn br {
    display: none;
}

button:disabled,
input:disabled + .submitbtn {
    background: #9e9e9e !important;
    box-shadow: 0 4px 0 #525252 !important;
}

label#confirm_2_B,
label#confirm_2_C {
    display: block;
    margin: 20px auto 0;
    max-width: 27rem;
    width: 90%;
}

.text {
    color: #3f3b2a;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
}

#requestbtn {
    margin: 30px auto 0;
    width: 70%;
}

.submitbtn:before {
    background: url(../../img/kurapital/chatform/bg.webp);
    background-size: 66%;
    border-radius: 50px;
    content: "";
    display: block;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.input.required {
    position: relative;
}

span.must {
    background: #ec544a;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 7px;
    position: absolute;
    right: 10px;
    top: 22%;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#forms #chatForm div#inquiry_genre.introS,
#forms #chatForm div#inquiry_select_2,
#forms #chatForm div#inquiry_type {
    gap: 20px;
    grid-template-columns: 1fr 1fr;
}

div#inquiry_genre label {
    width: 100%;
}

div#inquiry_genre label .intro_start {
    flex-direction: column;
    padding-top: 0;
}

div#inquiry_genre label .intro_start span {
    font-size: 15px;
}

/*---------------- 1分のお客様情報 ----------------*/
div#normalForm,
div#one_minutes_normalO_2 {
    grid-template-columns: 1fr;
}

div#one_minutes_normalO_1 {
    display: grid;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

div#one_minutes_normalO_2 .genre {
    gap: 20px 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

div#normalForm .potionTitle {
    color: #000 !important;
    font-size: 16px;
    text-align: left;
    width: 100%;
}

.potionTitle {
    font-size: 18px;
    font-weight: bold;
    grid-column-end: 7;
    grid-column-start: 1;
    margin: 0 auto;
    text-align: center;
}

#chat_cost .potionTitle {
    color: #f14610;
}

#chat_trouble.inquiries .potionTitle {
    color: #2a9136;
}

#chat_trouble.netReserve .potionTitle {
    color: #2d5faa;
}

/*---------------- term ----------------*/

div#terms {
    width: 100%;
}

article.lower {
    background: #dceef8;
    font-size: 14px;
    font-weight: normal;
    height: 200px;
    margin-bottom: 10px;
    margin-top: 20px;
    overflow-y: scroll;
    padding: 15px;
    text-align: justify;
}

article.lower header {
    font-weight: bold;
    margin-bottom: 20px;
}

article.lower div#lowerContent {
    line-height: 1.2;
}

article.lower span.title {
    display: block;
    font-weight: bold;
    margin: 15px 0 0;
}

article.lower li.title {
    font-weight: bold;
    margin-top: 20px;
}

article.lower h2.pageTitle {
    font-size: 20px;
    font-weight: bold;
}

.agree {
    cursor: pointer;
    font-weight: bold;
    text-align: left;
    text-decoration: underline;
}

.terms input[type="checkbox"] {
    display: inline-block !important;
    height: 23px;
    margin-right: 15px;
    max-height: 23px;
    max-width: 23px !important;
    min-height: 23px;
    min-width: 23px;
    width: 23px;
}

label[for="checkBox"].terms {
    align-items: center;
    cursor: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 10px;
    width: auto !important;
}

.check_terms {
    margin: auto;
    width: auto;
}

div#thanksOutline,
div#sendingOutline {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

#thanks #close {
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    padding: 3px 5px 1px;
    position: absolute;
    right: -9px;
    top: -58px;
}

div#thanks {
    background: url(../../img/kurapital/chatform/form_bg.webp);
    background-size: 3%;
    border: 10px solid #eb4315;
    display: flex;
    flex-direction: column;
    height: 400px;
    justify-content: center;
    position: relative;
    width: 960px;
}

div#thanks h2 {
    color: #123ba1;
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 60px;
    margin-top: 0;
    text-align: left;
}

div#thanks .title_2 {
    padding: 0;
    text-align: center;
}

div#thanks p {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5;
    padding-left: 60px;
}

div#thanks img {
    position: absolute;
    right: 60px;
    width: auto;
}

div#sending {
    align-items: center;
    background: #fff;
    border: 5px solid #eb4315;
    color: #123ba1;
    display: flex;
    font-size: 25px;
    font-weight: bold;
    justify-content: center;
    line-height: 1;
    padding: 22px 0 20px;
}

div#sending img {
    display: inline-block;
    height: 100%;
    margin-left: 10px;
    width: 23%;
}

/* 多分いらない？ */
/* costポップアップ */
/* div#priceValuation {
    align-items: center;
    background: #42a528;
    border-radius: 29px;
    box-shadow: 0 5px 0 #1b6b05;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    height: 46px;
    justify-content: center;
    margin: 10px auto;
    padding-top: 6px;
    width: 400px;
}

div#priceValuation span {
    color: #ffeb3b;
    font-size: 25px;
}

div#priceValuation:hover {
    background: #eef3ec;
    border: 2px solid #1b6b05;
    box-shadow: none;
    color: #1b6b05;
    height: 42px;
}

div#priceValuation:hover span {
    color: #1b6b05;
} */

#floor {
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

#floorInner {
    border-radius: 20px;
    position: relative;
}


input[type="radio"] {
    opacity: 0;
    position: absolute;
}

#floorInner label {
    align-items: center;
    background: #3197cd;
    border: 1px solid #3197cd;
    border-radius: 10px;
    box-shadow: 0 5px #0062bb;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 26px;
    font-weight: bold;
    justify-content: space-around;
    margin: 10px 0;
    min-height: 90px;
    padding: 5px;
    text-align: center;
    width: 90%;
}



#ventilatorCost #Q2 label:nth-of-type(5),
#denkiCost #Q0 label:last-of-type {
    margin-right: 175px !important;
}

#floorInner label img {
    height: auto;
    max-height: 80px;
    max-width: 130px;
    width: auto;
}

#floorInner label p {
    line-height: 1.3;
    margin-bottom: 0;
}

#floorInner label:hover {
    background: #f08669;
    border-color: #f08669;
    box-shadow: 0 5px #cc5736;
    color: #fff;
}

.options {
    align-items: center;
    border: 3px solid #07346c;
    border-radius: 0 0 20px 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 405px;
    justify-content: space-between;
    margin: auto;
    padding: 15px 30px;
}

#Q3 .options {
    justify-content: center;
}

.header {
    background: #07346c;
    border-radius: 20px 20px 0 0;
    padding: 15px;
}

.header p {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: row;
    font-family: "ヒラギノ明朝 ProN W6",
    "HiraMinProN-W6",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "MS PMincho",
    "MS 明朝",
    serif;
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
    margin: 5px 0;
}

.header p img {
    margin-right: 10px;
    width: 50px;
}

#Q2 .options {
    flex-direction: row;
}

#denkiCost #Q0 .options,
#lightCost #Q1 .options,
#antennaCost #Q1 .options,
#leakageCost #Q1 .options,
#ventilatorCost #Q1 .options {
    flex-direction: row;
}

#ventilatorCost #Q1 label,
#lightCost #Q1 label,
#intercomCost #Q1 label {
    font-size: 18px;
    margin: 10px 5px;
    width: 44%;
}

#lightCost #Q1 label p {
    font-size: 20px;
}

#antennaCost #Q1 label,
#leakageCost #Q1 label {
    width: 46%;
}

#antennaCost #Q1 label p,
#leakageCost #Q1 label p {
    font-size: 18px;
}

#denkiCost #Q0 label,
#lightCost #Q2 label,
#outletCost #Q2 label,
#switchCost #Q2 label,
#ventilatorCost #Q2 label {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    justify-content: space-between;
    letter-spacing: -1px;
    margin: 5px 5px;
    min-height: 125px;
    padding: 0;
    width: 28%;
}

#switchCost #Q1 label,
#outletCost #Q1 label {
    margin: 10px 0;
    min-height: 60px;
}

#denkiCost #Q0 label,
#switchCost #Q2 label {
    height: 125px;
    max-height: 125px;
    min-height: 125px;
    overflow: hidden;
}

#lightCost #Q2 label:last-of-type,
#outletCost #Q2 label:last-of-type,
#ventilatorCost #Q2 label:last-of-type {
    justify-content: center;
    max-height: 90px;
    min-height: 90px;
    width: 100%;
}

#switchCost #Q2 label:last-of-type {
    justify-content: center;
    width: calc(100% - 38%);
}

#lightCost #Q2 label:last-of-type p,
#outletCost #Q2 label:last-of-type p,
#switchCost #Q2 label:last-of-type p {
    font-size: 18px;
    letter-spacing: 0;
}

#lightCost #Q2 label p,
#outletCost #Q2 label p,
#ventilatorCost #Q2 label p {
    padding: 7px 0;
}

#denkiCost #Q0 label p,
#switchCost #Q2 label p {
    padding: 5px 0;
}

#denkiCost #Q0 label img,
#lightCost #Q2 label img,
#outletCost #Q2 label img,
#switchCost #Q2 label img,
#ventilatorCost #Q2 label img {
    border-radius: 0 0 10px 10px;
    max-height: unset;
    max-width: 100%;
    width: 100%;
}

#denkiCost #Q0 label:hover img,
#Q2 label:hover img,
#ventilatorCost #Q2 label:hover img {
    opacity: .8;
}

.smallSize {
    font-size: 12px;
}

.notes {
    color: #000;
    font-size: 14px;
    font-weight: normal;
    margin-top: 15px;
    padding-left: 1em;
    text-indent: -1em;
    z-index: 1;
}

.resultNotes {
    z-index: 1;
}

input#airconType_2 {
    opacity: 0;
}

#result_1 .header {
    height: 72px;
}

#result_1 .header p {
    font-size: 32px;
    margin: 0;
}

#result_1 .resultOption {
    justify-content: flex-start;
    padding: 100px 30px 8px;
}

#result_1 #contact {
    height: 155px;
}

#result_1 .resultText {
    align-items: center;
    background: rgba(255, 255, 255, .7);
    border-radius: 15px;
    display: flex;
    margin-bottom: 20px;
    padding: 20px 20px 15px;
    width: calc(100% - 40px);
    z-index: 1;
}

#result_2 .resultOption,
#result_3 .resultOption {
    padding: 90px 40px 25px;
}

.resultOption {
    background-image: url(../../img/main/cost/floorCost_bg.webp);
    background-size: cover;
    border-bottom: 0;
    justify-content: space-evenly;
}

.resultOption p {
    line-height: 1.3;
}

.resultText {
    background: rgba(255, 255, 255, .7);
    border-radius: 15px;
    font-size: 25px;
    padding: 25px 20px;
    position: relative;
    width: calc(100% - 40px);
    z-index: 1;
}

.resultText:before {
    background: url(../../img/main/cost/affordable_price2.webp) no-repeat center;
    background-size: contain;
    content: "";
    display: block;
    height: 110px;
    left: 2%;
    position: absolute;
    top: -85px;
    width: 96%;
}

.options.resultOption:after {
    background: url(../../img/main/cost/bg_Img.webp) no-repeat;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    height: 97%;
    position: absolute;
    width: calc(100% - 6px);
    z-index: 0;
}

#chat_cost #costName {
    background: #f14610;
}

#costName {
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    left: 23%;
    line-height: 1;
    max-width: 70%;
    padding: 5px 0 1px;
    position: absolute;
    text-align: center;
    top: -115px;
    width: 54%;
}

#cost {
    color: #f05548;
    font-size: 43px;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
}

#result .others {
    color: #000;
    font-size: 27px;
    height: 100%;
    line-height: 1.2;
    text-align: justify;
}

#result #contact {
    background: #fff;
    border: 3px solid #07346c;
    border-radius: 0 0 20px 20px;
    border-top: 0;
    display: flex;
    flex-direction: column;
    height: 145px;
    justify-content: space-evenly;
    overflow: hidden;
    padding: 0 30px 10px;
    position: relative;
}

#result #contact p {
    background: #8bc34a;
    border-radius: 15px;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    padding: 30px 40px;
    text-align: center;
    width: calc(100% - 80px);
}

p#Notes {
    margin: auto;
    z-index: 1;
}

/* #result #contact:before {
    animation: gloss 2s ease-in-out infinite;
    background: #fff;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -180px;
    transform: rotate(45deg);
    width: 30px;
} */


div.contactDetail .number {
    color: #fff;
    font-size: 39px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1;
    text-align: right;
    text-shadow: 4px 3px #0e3600ab;
    width: 100%;
}

div.contactDetail .net {
    width: 115px;
}

div.contactDetail .net a {
    background: linear-gradient(to top, #008697, #1ec7dc);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 4px 1px #006d7c;
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 7px 2px;
    text-align: center;
    width: 7em;
}

div.contactDetail .net a:hover {
    background: linear-gradient(to top, #b1cccf, #1ec7dc);
    color: #006d7c;
    text-decoration: none;
}

div.contactDetail .mail {
    margin-top: 7px;
    width: 123px;
}

div.contactDetail .mail a {
    background: linear-gradient(to top, #63a700, #aee21b);
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 4px 1px #3e6600;
    font-size: 14px;
    padding: 4px 7px 2px;
    width: 7em;
}

div.contactDetail .mail a:hover {
    background: linear-gradient(to top, #cfe2b2, #aee21b);
    color: #3e6600;
    position: unset;
}

div.contactDetail {
    align-content: flex-end;
    align-items: flex-end;
    bottom: 26px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 105px;
    justify-content: flex-end;
    position: absolute;
    right: 51px;
    width: 80%;
}

#close {
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
    padding: 5px 5px 2px;
    position: absolute;
    right: 9px;
    top: 9px;
    z-index: 3;
}

#floorBotton {
    align-items: center;
    border-radius: 30px 0 0 30px;
    bottom: 200px;
    cursor: pointer;
    display: flex;
    height: 110px;
    justify-content: center;
    position: fixed;
    right: 0;
    text-align: center;
    top: 200px;
    width: 120px;
    z-index: 90;
}

div#floorBotton:hover {
    width: 150px;
}

div#haderFloorBotton {
    background: url(../../img/main/cost/floor_bg_green.webp);
    background-size: contain;
    border: 3px solid #4d8322;
    border-radius: 20px;
    box-shadow: 0 5px #335629;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    left: 560px;
    padding: 7px 15px 4px;
    position: absolute;
    top: 450px;
}

#bodyFloorBotton {
    position: relative;
    text-align: center;
    top: -70px;
}

#bodyFloorBotton div {
    background: url(../../img/main/cost/floor_bg_green.webp);
    background-size: contain;
    border: 3px solid #4d8322;
    border-radius: 30px;
    box-shadow: 0 5px #335629;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    padding: 15px 15px 10px;
}

div#haderFloorBotton span,
#bodyFloorBotton div span {
    color: #ffeb3b;
    font-size: 25px;
}

#bodyFloorBotton div:hover {
    background: #faffa2;
    box-shadow: none !important;
    color: #000;
    position: relative;
    top: 5px;
}

div#haderFloorBotton:hover {
    background: #faffa2;
    box-shadow: none !important;
    color: #000;
    top: 452px !important;
    /* div#haderFloorBottonのtopから2px↓ */
}

div#haderFloorBotton:hover span,
#bodyFloorBotton div:hover span {
    color: #f05548;
}

@keyframes gloss {
    0% {
        opacity: 0;
        transform: scale(0) rotate(45deg)
    }

    80% {
        opacity: .5;
        transform: scale(0) rotate(45deg)
    }

    81% {
        opacity: 1;
        transform: scale(4) rotate(45deg)
    }

    100% {
        opacity: 0;
        transform: scale(50) rotate(45deg)
    }
}

@keyframes shiny {
    0% {
        opacity: 0;
        transform: scale(0) rotate(25deg);
    }

    50% {
        opacity: 1;
        transform: scale(1) rotate(25deg);
    }

    100% {
        opacity: 0;
        transform: scale(50) rotate(25deg);
    }
}

#result .others span {
    background: rgba(255, 255, 255, .7);
    border-radius: 20px;
    padding: 30px 20px;
}

/*------------------------------- privatePolicy ---------------------------------*/
#privatePolicy .section {
    margin-bottom: 40px;
}
#privatePolicy .section > .title {
    font-weight: bold;
    margin-bottom: 10px;
}
#privatePolicy .day {
    line-height: 1.5;
}
#privatePolicy table.list {
    width: 100%;
}
#privatePolicy th {
    background: #0859aa;
    border-bottom: 1px solid #dceef8;
    border-left: 1px solid #dceef8;
    color: #fff;
    padding: 10px;
    width: 30%;
}
#privatePolicy th:nth-child(2) {
    width: 50%;
}
#privatePolicy th:nth-child(3) {
    text-align: center;
    width: 10% !important;
}
#privatePolicy td {
    border-bottom: 1px solid #0859aa;
    border-left: 2px solid #dceef8;
    padding: 10px;
}
#privatePolicy td:nth-child(3) {
    text-align: center !important;
}
#privatePolicy ol li {
    list-style: decimal;
    margin-left: 20px;
    padding: 5px 0;
}

@media screen and (max-width: 414px) {
    #privatePolicy td {
        font-size: 12px;
    }
    
    #formOutline {
        margin: 50px auto;
    }
}

@media screen and (max-width: 1080px) {
    /*------------------------------- chatform ---------------------------------*/
    .formButtonText {
        left: 10%;
        top: 5vw;
        width: 80%;
    }
    #inquiry_type .intro_start:after {
        width: 15vw;
    }
    .potion p.notice_s {
        font-size: 2vw;
    }
    #inquiry_type .intro_start .itext_O {
        font-size: 3vw;
    }

    span.dial_number_display {
        display: none;
    }

    div#thanks {
        width: 80%;
    }

    div#thanks p {
        font-size: 2.5vw;
        padding-left: 5vw;
    }
    div#thanks .title {
        font-size: 4.5vw;
        padding-left: 5vw;
    }
    div#thanks img {
        bottom: 1.5vw;
        position: absolute;
        right: 2vw;
        width: 20%;
    }
    div.introS .intro_start {
        font-size: 2.5vw;
    }
    .optionOutline label .chat_O {
        font-size: 1.5vw;
    }

    .optionOutline {
        padding: 25px 15px 20px;
    }

    .cost_contact {
        padding-bottom: 7vw;
    }
    .cost_contact,
    .twice_cost_contact {
        background-position: inherit;
    }
}

@media screen and (max-width: 750px) {
    #forms #chatForm .introS {
        grid-template-columns: 1fr 1fr;
    }
    p.optionTitle,
    p.notice_l {
        grid-column-end: 3;
    }
    .optionOutline,
    div#one_minutes_normalO_1 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding: 25px 15px 20px;
    }

    div#one_minutes_normalO_2 .genre {
        grid-template-columns: 1fr 1fr;
    }
    div#normalForm .potionTitle {
        grid-column-end: 5;
        grid-column-start: 1;
    }
    .optionOutline.four,
    .optionOutline.three {
        grid-template-columns: 1fr 1fr;
    }
    div.introS .intro_start {
        font-size: 3vw;
    }
    .submitbtn {
        font-size: 2.5vw;
    }
    .optionOutline label .chat_O {
        font-size: 2vw;
    }
    #result_2 .resultOption,
    #result_3 .resultOption {
        padding: 85px 15px 20px;
    }
    #hideIfThereisNoOkItem .optionOutline {
        padding: 25px 15px 20px;
    }
    #cost {
        font-size: 5vw;
    }
    .cost_contact,
    .twice_cost_contact {
        background: url(../../img/kurapital/chatform/cost_contact_sp3.webp) no-repeat center;
        background-position-y: 1vw;
        background-size: contain;
        padding-bottom: 13vw;
        padding-top: 13vw;
    }
    .cost_contact.introS,
    .twice_cost_contact.introS {
        grid-template-columns: 1fr 28% !important;
    }
    .cost_contact label,
    .twice_cost_contact label,
    .cost_contact .introS_4,
    .twice_cost_contact .introS_4 {
        grid-column-start: 1 !important;
    }
    .cost_contact .description,
    .twice_cost_contact .description {
        border-radius: 7px 0 0 7px;
        height: 100%;
        left: 0;
        padding: 0;
        top: 0;
        width: 42%;
    }
    .cost_contact.introS .intro_start,
    .twice_cost_contact.introS .intro_start {
        height: 9vw;
        padding-left: 42%;
        padding-top: 0;
        text-align: center;
    }
    span.dial_number_display {
        font-size: 3vw;
    }
    div.introS .intro_start:before {
        left: 0;
    }
    .simple_cost_contact {
        padding-bottom: 6vw;
        padding-top: 6vw;
    }
    .simple_cost_contact .intro_start {
        height: 10vw !important;
        padding-top: 9vw !important;
    }
    .contactFloorButton {
        height: 49px;
        padding-left: 150px;
        padding-top: 16px;
        width: calc(90% - 100px);
    }
    .contactFloorButton:hover {
        height: 45px !important;
    }
}

@media screen and (max-width: 575px) {
    .contactFloorButton .timePoint {
        font-size: 14px;
        height: 35px;
        left: -53px;
        padding-top: 9px;
        text-indent: -56px;
        top: -11px;
        width: 208px;
    }
    .contactFloorButton {
        height: 38px;
        padding-left: 106px;
        padding-top: 14px;
        width: calc(85% - 106px);
    }
    .contactFloorButton:hover {
        height: 34px !important;
    }
    #contactTerms {
        margin-bottom: 0;
    }
    div#formButton {
        left: 0;
        top: 0;
        width: 100%;
    }
    #lineup .sp {
        display: block !important;
    }
    #lineup .pc {
        display: none;
    }
    #lineupContainer {
        background: none !important;
        padding-top: 0 !important;
    }
    #lineupContainer2 {
        padding-top: 20px !important;
    }
    .ventilator article#lineup div#lineupContainer2 li {
        width: 100%;
    }
    .ventilator article#lineup div#lineupContainer2 .title3 {
        margin: 15px auto;
        width: 70%;
    }

    div.priceText {
        padding: 15px 20px 30px;
    }

    aside.contact.sp,
    .contactTerms_sp {
        display: block !important;
    }
    .contactTerms_sp {
        color: blue;
        margin-top: 15px;
        text-align: center;
        text-decoration: underline;
    }
    aside.contact.pc {
        display: none;
    }

    aside.contact {
        background: unset;
    }

    .contactTel {
        background: #fff;
        border: 2vw solid #9cc0d2;
        border-bottom: 9vw solid #9cc0d2;
        border-radius: 10px !important;
        border-top: 5vw solid #9cc0d2;
        box-shadow: 0 7px 0 #033c71;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto 30px;
        max-width: 400px;
        padding: 2.5vw 0 1vw !important;
        position: relative;
    }

    .phoneNumber {
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 70%;
    }

    .contactTel > img {
        width: 18%;
    }

    .phoneNumber span {
        color: #c93918;
        font-size: 6.5vw;
        font-weight: bold;
        letter-spacing: -1px;
    }

    .phoneCall a:active,
    .phoneCall a:hover {
        text-decoration: none;
    }

    p.hallYear {
        align-items: center;
        background: #066ac3;
        border-radius: 0 0 8px 8px;
        bottom: -9vw;
        color: #fff;
        display: flex;
        font-size: 2.5vw;
        font-weight: bold;
        height: 7vw;
        justify-content: center;
        letter-spacing: 1px;
        position: absolute;
        width: calc(100% + 4vw);
    }

    p.hallYear span {
        color: yellow;
        font-size: 3.5vw;
    }

    .contactTel:before {
        background: url(../../img/main/contact_banner_sp.webp) no-repeat;
        background-size: contain;
        content: "";
        display: block;
        height: 6.5vw;
        left: -3vw;
        position: absolute;
        top: -4vw;
        width: 56vw;
    }

    .form {
        display: flex;
        justify-content: space-between;
        margin: auto;
        max-width: calc(400px + 4vw);
    }
    .form > div {
        width: 48%;
    }
    aside.contact .mail a,
    aside.contact .reserve a {
        font-size: 4vw;
        margin: auto;
        padding: 9px 0 5px;
        width: 100%;
    }

    div#contactTerms_sp {
        margin: 10px auto 15px;
        text-align: center;
    }

    div#contactTerms_sp a {
        text-decoration: underline;
    }

    div.ryokin {
        padding: 0;
    }

    div.ryokin img {
        margin-bottom: 45px;
    }

    .jokin .sp {
        display: block !important;
    }

    .jokin {
        background: url(../../img/main/back.gif);
        border: solid 2px #fff;
        border-radius: 5px;
        box-shadow: 1px 0 4px rgb(6 52 108 / 30%);
        margin: 20px 20px 15px;
        padding: 15px 10px 10px;
    }

    .jokincont {
        background: #fff;
        margin-top: 10px;
        padding: 15px;
    }

    article#service header h1 {
        padding: 50px 0 10px !important;
    }

    article#service #serviceChosen {
        flex-direction: column;
        margin: 0 auto 2em;
    }

    article#service dl.serviceChosen dd img {
        display: none;
    }

    article#service dl.serviceChosen dt {
        font-size: 0;
        margin: auto;
        max-width: 300px;
        width: 80%;
    }

    article#service dl.serviceChosen dd span {
        display: none;
    }

    article#service dl.serviceChosen:before {
        display: none;
    }

    article#service dl.serviceChosen {
        margin-bottom: 15px;
        width: 100%;
    }

    article#service dl.serviceChosen:after {
        display: none;
    }

    article#service div#steps dl:not(:last-of-type) {
        display: none;
    }

    article#service div#steps dl {
        width: 100%;
    }

    article#service div#steps {
        border-top: 1px dotted #9cc0d2;
        padding: 10px;
    }

    div#areaList > img {
        display: none;
    }

    #formOutline .areaList {
        width: 100%;
    }

    section#faq dl#fapContent {
        padding: 40px 15px;
    }

    #forms {
        background-size: 10%;
        padding: 0 0 60px;
    }
    #formOutline {
        padding: 0;
    }
    #forms .balloon {
        margin-right: 8%;
    }
    .time {
        font-size: 20px;
    }
    .potion p.notice_s {
        font-size: 11px;
    }
    #inquiry_type .intro_start .itext_O {
        font-size: 15px;
    }
    #inquiry_type .intro_start .itext_O span {
        display: block;
        text-align: center;
    }
    #inquiry_type .intro_start:after {
        width: 19vw;
    }
    .optionOutline {
        padding: 15px 15px 20px;
    }
    .optionOutline label .chat_O {
        border: 1px solid;
        min-height: 40px;
    }

    div#thanks p {
        font-size: 3vw;
        line-height: 1.8;
    }
    div#thanks .title {
        font-size: 6vw;
    }

    div#thanks img {
        width: 30%;
    }
    div#thanks {
        border: 5px solid #eb4315;
    }

    .optionOutline label .chat_O {
        font-size: 3vw;
    }
    div.introS .intro_start {
        font-size: 5vw;
    }
    #cost {
        font-size: 7vw;
    }
    .submitbtn {
        font-size: 4vw;
        line-height: 1.2;
    }
    .submitbtn span {
        line-height: 1;
        text-align: center;
    }
    .submitbtn br {
        display: block;
    }
    .resultText {
        font-size: 21px;
    }
    .cost_contact.introS,
    .twice_cost_contact.introS {
        grid-template-columns: 1fr 25% !important;
    }
    .cost_contact .description,
    .twice_cost_contact .description {
        font-size: 13px;
    }
    .cost_contact.introS .intro_start,
    .twice_cost_contact.introS .intro_start {
        padding-bottom: 3px;
        padding-top: 3px;
    }
    .simple_cost_contact {
        padding-bottom: 9vw;
        padding-top: 9vw;
    }
    .simple_cost_contact .intro_start {
        height: 15vw !important;
        padding-top: 10vw !important;
    }
    .simple_cost_contact .description {
        height: 8vw;
        line-height: 1.2;
    }
    #costName {
        left: 0;
        max-width: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 414px) {
    .contactFloorButton .timePoint {
        font-size: 14px;
        height: 35px;
        left: -53px;
        padding-top: 9px;
        text-indent: -56px;
        top: -11px;
        width: 208px;
    }
    .contactFloorButton span.timePointInner {
        font-size: 4vw;
    }
    .contactFloorButton {
        font-size: 4vw;
        height: 35px;
        padding-left: 80px;
        padding-top: 17px;
        width: calc(100% - 80px);
    }
    .contactFloorButton:hover {
        height: 34px !important;
    }
    article#lineup ul li {
        width: calc(33% - 10px);
    }
    .phoneNumber span {
        font-size: 7.5vw;
    }
    article#service section#flow,
    .otherContent {
        padding: 20px 10px;
    }
    .areaList ul {
        width: 100%;
    }
    #formOutline section#area li {
        width: 32%;
    }
    section#faq dl#fapContent {
        padding: 15px;
    }
    section#faq dl#fapContent dd:before {
        display: none;
    }
    section#faq dl#fapContent dt:before {
        content: "Q";
    }
    section#faq dl#fapContent dt {
        font-size: 14px;
        font-weight: bold;
        letter-spacing: -1px;
        margin-bottom: 10px;
        padding-left: 20px;
        position: relative;
    }
    section#faq dl#fapContent dt:before {
        color: #3f58b6;
        content: "Q:";
        font-size: 16px;
        left: -5px;
        top: -2px;
    }
    section#faq dl#fapContent dd div {
        padding: 10px;
        width: 100%;
    }
    div#thanks p {
        font-size: 16px;
        padding-left: 5vw;
        padding-right: 5vw;
    }
    div#thanks p > br:last-of-type {
        display: none;
    }
    div#thanks .title {
        font-size: 25px;
    }
    div#thanks img {
        bottom: -5vw;
        right: -5vw;
        width: 40%;
    }
    .optionOutline,
    div#one_minutes_normalO_1 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    div#normalForm .potionTitle {
        grid-column-end: 4;
        grid-column-start: 1;
    }
    .optionOutline label .chat_O {
        font-size: 3.5vw;
    }
    #result_1 .resultOption {
        justify-content: flex-start;
        padding: 100px 15px 8px;
    }
    .cost_contact.introS,
    .twice_cost_contact.introS {
        grid-template-columns: 1fr 23% !important;
    }
    span.dial_number_display {
        font-size: 14px;
    }
}

#phoneNumber_error {
    color: #c4001e;
    font-size: 12px;
    font-weight: bold;
    display: none;
}

#phoneNumber_error:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;
    background: url(../../img/error_mark.png);
    background-size: cover;
    position: relative;
    top: 2px;
    display: none;
}