.gm-style .gm-style-iw-c {
    overflow: visible;
}

.gm-style-iw-ch {
    height: 0px;
    overflow: visible;
}

.gm-style-iw-chr button {
    position: absolute !important;
    right: 0;
    overflow: visible;
    top: 0;
    transform: translate(50%, -50%);
    border-radius: 50%;
}

.btn_wh_r:focus,
.btn_red_r:focus,
.btn_gry_r:focus,
.btn_red_bdr_r:focus,
.btn_red:focus {
    opacity: 0.5;
    outline: solid 1px #333333;
}

.btn_base[target="_blank"][href^="http"]::after,
.btn_base[href^="tel:"]::after,
.btn_base[href^="mailto:"]::after {
    display: none;
}

.btn_base[target="_blank"][href^="http"] {
    --icon-path: url(/common/images/icon/icon_blank_wh.svg);
}

.btn_base.btn_wh_r[target="_blank"][href^="http"] {
    --icon-path: url(/common/images/icon/icon_blank_red.svg);
}

.btn_base[target="_blank"][href^="http"],
.btn_base[href^="tel:"],
.btn_base[href^="mailto:"] {
    --icon-size: 1em;
    font-size: 80% !important;
    padding: .5em 1em .5em calc(var(--icon-size) * 2.75) !important;
    text-indent: calc(var(--icon-size) * 1.75 * -1);
    line-height: 1.2em;
}

.btn_base[href^="tel:"] {
    --icon-path: url(/common/images/icon/icon_phone_wh.svg);
}

.btn_base[href^="mailto:"] {
    --icon-path: url(/common/images/icon/icon_mail_wht.svg);
}

.btn_base[target="_blank"][href^="http"]::before,
.btn_base[href^="tel:"]::before,
.btn_base[href^="mailto:"]::before {
    content: "";
    background-image: var(--icon-path);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: inline-block;
    margin-right: calc(var(--icon-size) * .75);
    vertical-align: middle;
    height: var(--icon-size);
    aspect-ratio: 1/1;
    border: none;
    transform: none;
    width: auto;
}

.form_area .form_item {
    margin: 1em 0;
}

.form_area input {
    border: solid 1px #cccccc;
    padding: .5em;
}

.form_area input[name="inputname"] {
    width: 100%;
}


@scope (.modal) {
    :scope {
        border: none;
        background: transparent;
        overflow: visible;
        width: auto;
        justify-content: center;
    }

    .modal-container {

        max-width: 100%;

        width: max-content;

        margin: 0 auto;

        position: relative;

    }

    .modal-body {
        margin: 0 auto;
        position: relative;
        max-width: clamp(20em, 100%, 50em);
        border: none;
        overflow-y: auto;
        max-height: 90vh;
        background: #ffffff;
        padding: 2em;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(61, 61, 61, 5);
    }


    .modal-close-button {
        position: absolute;
        right: -1rem;
        top: -1rem;
        color: transparent;
        width: 2rem;
        aspect-ratio: 1/1;
        display: inline-block;
        overflow: hidden;
        background: #333333;
        border-radius: 50%;
        font-size: 1px;
        cursor: pointer;
        z-index: 3;
    }

    .modal-close-button:hover {
        background: #666666;
    }

    button.cancel {
        background: #575757;
        padding: .7em 1em !important;
    }

    .modal-close-button::before, .modal-close-button::after {
        content: "";
        position: absolute;
        display: inline-block;
        width: 2px;
        height: 50%;
        background: #ffffff;
        transform-origin: center center;
        top: 25%;
        left: 50%;
    }

    .modal-close-button::before {
        transform: rotate(-45deg);
    }

    .modal-close-button::after {
        transform: rotate(45deg);
    }

    @media screen and (min-width:20em) {
        .button-area {
            display: grid;
            grid-template-columns: .5fr .5fr;
            justify-content: center;
            grid-gap: 0 3em;
            direction: rtl;
            font-size: 90%;
            align-items: center;
        }

        .button-area button {
            max-width: 15em;
            width: 100%;
            padding: .7em 2em;
        }
    }
}

.modal::backdrop {
    background: rgba(0, 0, 0, .5);
}

@scope(.show-copy-text) {
    :scope {
        position: relative;
    }

    textarea {
        width: 100%;
        height: 2em;
    }

    textarea[name="mailBody"] {
        height: 10em;
    }

    .table_normal {
        display: grid;
        grid-template-columns: 1fr 6em;
        grid-template-rows: auto auto;
        grid-gap: 1em;

    }

    .table_normal [role="rowgroup"],
    .table_normal [role="row"] {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-column: 1 / -1;
        grid-template-rows: auto;
        grid-gap: 1em 1em;
    }

    .table_normal [role="rowheader"] {
        background: #ececec;
        padding: .25em 1em;
        font-weight: bold;
        grid-column: 1/-1;

    }

    .table_normal [role="cell"]:has(textarea) {
        grid-column: 1 / -1;
    }

    .table_normal [role="cell"]:has(.btn-copy) {
        grid-column: -1;
    }

    @media screen and (min-width:40em) {

        .table_normal {
            --border: solid 1px #cccccc;
            grid-template-columns: 5em minmax(20em, 1fr) 6em;
            grid-template-rows: 1fr;
            border-top: var(--border);
            border-left: var(--border);
        }

        .table_normal [role="rowgroup"], .table_normal [role="row"] {
            grid-template-rows: auto;
            grid-gap: 0;
            align-items: center;
        }

        .table_normal [role="rowheader"],
        .table_normal [role="cell"] {
            height: 100%;

            border-bottom: var(--border);
            border-right: var(--border);
        }


        .table_normal [role="rowheader"] {
            grid-column: 1;
        }

        .table_normal [role="cell"]:has(textarea) {
            grid-column: 2;
            padding: 1em;
        }

        .table_normal [role="cell"]:has(button) {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }

    .btn-copy {
        font-size: 76%;
        padding: .5em 2em;
    }

    .effect-box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .effect-box .box_bg_gry {
        padding: 2em;
        border-radius: 5px;
        box-shadow: 0 0 10px 3px rgba(0, 0, 0, .3);
    }

}

.list_num {
    counter-reset: list-num 0;
}

.list_num .list {
    counter-increment: list-num;
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.list_num .list::before {
    content: counter(list-num)".";
    color: var(--main-color);
    font-weight: bold;
    margin-right: .5em;
}




.loader {
    margin: 1em auto 0;
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    --loader-color1: var(--main-color);
    --loader-color2: #e600131a;
    animation: l5 1s infinite linear alternate;
}

@keyframes l5 {
    0% {
        box-shadow: 20px 0 var(--loader-color1), -20px 0 var(--loader-color2);
        background: var(--loader-color1);
    }

    33% {
        box-shadow: 20px 0 var(--loader-color1), -20px 0 var(--loader-color2);
        background: var(--loader-color2);
    }

    66% {
        box-shadow: 20px 0 var(--loader-color2), -20px 0 var(--loader-color1);
        background: var(--loader-color2);
    }

    100% {
        box-shadow: 20px 0 var(--loader-color2), -20px 0 var(--main-color);
        background: var(--main-color);
    }
}