.st-contact {
    padding: 12rem 2rem;
}

.st-contact-2column {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
   
}

    .st-contact-2column .st-text {
       
        text-align:center;
    }

    .st-contact-2column > .col-left {
        flex: 0 0 55%; /* 左を55%固定 */
    }

    .st-contact-2column > .col-right {
        flex: 0 0 45%; /* 右を45%固定 */
    }

.st-contact-title {
    font-size: clamp(2rem, 4vw, 3rem);
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease-out;
}

.st-contact-title.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.st-contact-title2 {
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.st-contact-detail {
    font-size: clamp(1rem, 1vw, 1.5rem);
    opacity: 0;
    transform: translateY(50px);
    transition: all 2s ease-out;
}

    .st-contact-detail.animate-in {
        opacity: 1;
        transform: translateY(0);
    }

.st-contact-detail2 {
    font-size: clamp(1rem, 3vw, 2.6rem);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(50px);
    transition: all 2s ease-out;
}

    .st-contact-detail2.animate-in {
        opacity: 1;
        transform: translateY(0);
    }
/*問い合わせフォームのCSS*/
.ui-header {
    padding: 1.5rem 0;
}

.ui-logo {
    position: sticky;
    left: 20px;
    top: 20px;
}

.ui-phone {
    display: block;
    position: absolute;
    right: 20px;
    top: 20px;
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 9999;
    background: transparent url(../../images/contact/now-sending.gif) 50% 50% no-repeat;
}

.h1-title-wrapper {
    margin-bottom: 30px;
}

.h1-title-area {
    margin: 0 auto;
    text-align: center;
    padding: 10px 0;
}

    .h1-title-area span {
        font-size: 2.5rem;
        font-weight: bold;
        position: relative;
        display: inline-block;
    }

.title_line {
    position: relative;
    display: inline-block;
}

    .title_line::after {
        content: "";
        position: absolute;
        left: -20px; /* 向左延伸 */
        right: -20px; /* 向右延伸 */
        bottom: -10px; /* 调整横线位置 */
        height: 1px; /* 横线粗细 */
        background-color: #666666; /* 横线颜色 */
    }

.ui-content {
    padding: 0;
    margin: 0 10%
}

    .ui-content * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ui-content .progress {
        display: flex;
        display: -webkit-flex;
        flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        width: 100%;
        background: skyblue;
        align-items: center;
        padding: .5em;
    }

        .ui-content .progress * {
            margin: 0;
        }

        .ui-content .progress p {
            background: lightblue;
            height: 22px;
            width: 22px;
            border-radius: 22px;
            text-align: center;
        }

            .ui-content .progress p:after {
                background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Crect%20y%3D%225%22%20style%3D%22fill%3A%23FFFFFF%3B%22%20width%3D%2214%22%20height%3D%224%22%2F%3E%3C%2Fsvg%3E");
                background-position: center center;
                background-repeat: no-repeat;
                content: "";
                position: absolute;
                display: block;
                width: 22px;
                height: 22px;
            }

        .ui-content .progress .line {
            border-top: 1px solid black;
            -webkit-flex-grow: 1;
            flex-grow: 1;
            -webkit-align-self: center;
            -ms-flex-item-align: center;
            align-self: center;
        }
    /* steps */
    .ui-content .steps {
        padding: 1em;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .ui-content .progress p.currentStep {
        background: tomato;
    }

    .ui-content .progress p.processedStep {
        background-color: green;
    }

        .ui-content .progress p.processedStep:after {
            background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C4%2011%2C1%205.003%2C6.997%203%2C5%200%2C8%204.966%2C13%204.983%2C12.982%205%2C13%20%22%2F%3E%3C%2Fsvg%3E");
            background-position: center center;
            background-repeat: no-repeat;
            content: "";
            position: absolute;
            display: block;
            width: 22px;
            height: 22px;
        }

.checkbox-inline {
    margin-right: 5px;
}

.top-fixed {
    top: 0px;
    background: white;
    width: 100%;
    position: fixed;
    z-index: 10;
}

.talign-center {
    font-size: 16px;
    font-weight: bold;
}

.checkout-tabs {
    margin-left: -25px;
    margin-right: 10px;
}

    .checkout-tabs li {
        float: left;
        padding: 10px 0;
        position: relative;
        width: 33.2%;
        text-align: center;
        padding-left: 2px;
        font-size: 16px;
    }

    .checkout-tabs .stage-send, .checkout-tabs .stage-confirm {
        text-indent: 15px;
    }

    .checkout-tabs .status-flag {
        border-radius: 8px;
        display: inline-block;
        font-size: 10px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        text-indent: 0;
        vertical-align: top;
        width: 16px;
    }

    .checkout-tabs .disabled {
        background: none repeat scroll 0 0 #F0F0F0;
        color: #AAAAAA;
    }

        .checkout-tabs .disabled .status-flag {
            background-color: #C6C6C6;
            color: #D8D8D8;
        }

    .checkout-tabs .done1 {
        background: none repeat scroll #444444;
        color: #000;
    }

        .checkout-tabs .done1 .status-flag {
            background-color: #444444;
            color: #FAFAFA;
        }

    .checkout-tabs .active1 {
        background: none repeat scroll 0 0 #444444;
        color: #fff;
        font-weight: bold;
    }

        .checkout-tabs .active1 .status-flag {
            background-color: #000000;
            color: #FFFFFF;
        }

    .checkout-tabs .stage-input:before, .checkout-tabs .stage-confirm:before {
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #C4C4C4;
        border-style: solid;
        border-width: 22px 15px;
        content: "";
        position: absolute;
        right: -31px;
        top: 0;
        z-index: 2;
    }

    .checkout-tabs .stage-input:after, .checkout-tabs .stage-confirm:after {
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0000FF;
        border-style: solid;
        border-width: 22px 15px;
        content: "";
        position: absolute;
        right: -30px;
        top: 0;
        z-index: 3;
    }

    .checkout-tabs .stage-input.disabled:after, .checkout-tabs .stage-confirm.disabled:after {
        border-left-color: #F0F0F0;
    }

    .checkout-tabs .stage-input.active1:after, .checkout-tabs .stage-confirm.active1:after {
        border-left-color: #444444;
        /*#085DAD;*/
    }

    .checkout-tabs .stage-input.done1:after, .checkout-tabs .stage-confirm.done1:after {
        border-left-color: #444444;
    }

.done1 {
    background-color: #444444 !important;
}

.nav {
    margin-top: 40px;
}

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.tab {
    display: none;
    margin-left: 15px;
    margin-right: 15px;
}

.guide-msg {
    margin-top: 10px;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 14px;
}

    .guide-msg .title {
        font-size: 20px;
        font-weight: bold;
    }

.error-msg {
    display: none;
    color: red;
}
/*---form css---*/
.form-box {
   /* border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;*/
}

.form-box-table {
    width: 100%;
    display: table;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .form-box-table .item-title {
        word-break: break-all;
        display: table-cell;
        width: 25%;
        /*border-right: 1px solid #CCCCCC;*/
        border-bottom: 1px solid #F2F2F2;
        /*background-color: #f1f1f1;*/
        /*background-color: #fbfbee;*/
        padding: 10px 0px 10px 10px;
        vertical-align: top;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        /*.form-box-table .item-title span {
            display: block;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            font-weight: bold;
            font-size: 1.2rem;
        }*/

        .dual-span-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .dual-span-container .left-span {
                padding-top: 0.5em;
                padding-bottom: 0.5em;
                margin-right: 0.5em;
            }

            .dual-span-container .required-span {
                background-color: #d13631;
                color: white;
                font-size: 0.9rem;
                letter-spacing: 3px;
                padding: 2px 6px;
                font-weight: 500;
            }

            .dual-span-container .optional-span {
                background-color: #808080;
                color: white;
                font-size: 0.9rem;
                letter-spacing: 3px;
                padding: 2px 6px;
                font-weight: 500;
            }

    .form-box-table .item-input {
        word-break: break-all;
        display: table-cell;
        /*border-right: 1px solid #CCCCCC;*/
        border-bottom: 1px solid #F2F2F2;
        padding: 5px 0px 5px 15px;
        vertical-align: top;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .form-box-table span.required {
        /*background-position: 96% 50% (indicates x-axis and y-axis)*/
        background: url("../../images/contact/required.gif") no-repeat 96% 50%;
        display: block;
        padding-right: 48px;
    }

    .form-box-table span.optional {
        /*background-position: 96% 50% (indicates x-axis and y-axis)*/
        background: url("../../images/contact/optional.gif") no-repeat 96% 50%;
        display: block;
        padding-right: 48px;
    }

button,
select.select-list,
textarea.input-txt,
input.input-txt {
    color: #111111;
}

label, input, button, select, textarea {
    line-height: 2em;
    height: auto;
    font-size:1.2rem;
}

    label input, label textarea, label select {
        display: inline;
    }

label {
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
}

button {
    cursor: pointer;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/*input*/
.form-box-table .input-txt {
    word-break: break-all;
    border: 1px solid #c8c8c8;
    background: #FFFFFF;
    padding: 5px;
    margin: 0;
    width: 95%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*box-shadow*/
    -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.07);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.07);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.07);
}

.form-box-table .item-input .fullname input.width01 {
    width: 47%;
}

.form-box-table .item-input .fullname input.width02 {
    width: 47%;
}

.form-box-table .item-input .phone input.width01 {
    width: 30%;
}

.form-box-table .item-input .phone input.width02 {
    width: 30%;
}

.form-box-table .item-input .phone input.width03 {
    width: 31%;
}

.form-box-table .input-focus {
    background-color: #fffde1;
}

.form-box-table .input-size-m {
    width: 50%;
}

.privacy-title-area {
    background-color: #FFFFFF;
    margin-bottom: 20px;
    margin-top: 30px;
}

    .privacy-title-area h2 {
        border-left: 8px solid #16a085;
        padding: 5px 0 5px 15px;
    }

        .privacy-title-area h2 span {
            font-size: 20px;
        }

.bottom-input-area, .bottom-confirm-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

    .bottom-input-area button, .sendBtn {
        display: inline-block;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        background-color: #ff9600;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 18px;
        padding: 15px;
        width: 220px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
        font-weight: bold;
    }

        .bottom-input-area button span, .sendBtn span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }

            .bottom-input-area button span :after, .sendBtn span:after {
                position: absolute;
                opacity: 0;
                top: 0;
                transition: 0.5s;
            }

        .bottom-input-area button:hover span, .sendBtn:hover span {
            padding-right: 25px;
        }

            .bottom-input-area button:hover span:after, .sendBtn:hover span:after {
                content: ' \00bb';
                opacity: 1;
                right: 0;
            }

.returnInputBtn {
    display: inline-block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #008CBA;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 18px;
    padding: 15px;
    width: 160px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
    font-weight: bold;
}

    .returnInputBtn span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .returnInputBtn span :before {
            position: absolute;
            opacity: 0;
            top: 0;
            transition: 0.5s;
        }

    .returnInputBtn:hover span {
        padding-right: 25px;
    }

        .returnInputBtn:hover span:before {
            content: '\00ab  ';
            opacity: 1;
            right: 0;
        }

.completeContact {
    padding-bottom: 80px
}

    .completeContact .title {
        font-size: 20px;
        font-weight: bold;
    }

.foot {
    background: rgba(0,69,150,0.9);
    color: white;
    text-align: center;
    padding: 5px 0px;
    font-size: 14px;
}

@media screen and (max-width: 1500px) {
    .ui-content {
        margin: 0 7%;
    }    
}

@media screen and (max-width: 1200px) {
    .form-box-table .item-title {
        width: 35%;
    }  
}

@media screen and (max-width: 768px) {
    .ui-phone {
        display: none;
    }

    .h1-title-wrapper {
        margin-bottom: 20px;
    }

    .h1-title-area {
        padding: 10px 0;
    }

        .h1-title-area span {
            font-size: 18px;
        }

    .ui-content {
        margin: 0;
    }

    .guide-msg {
        font-size: 12px;
    }

        .guide-msg .title {
            font-size: 18px;
            font-weight: bold;
        }

    .form-box {
        border-left: none;
        border-top: none;
    }

    .form-box-table {
        display: block;
        border-top: none;
        border-left: none;
    }

        .form-box-table .item-title {
            display: block;
            width: auto;
            border-right: none;
            border-bottom: none;
            background-color: #f1f1f1;
            padding: 10px 10px;
            font-size: 14px;
        }

            /*.form-box-table .item-title span {
                display: inline-block;
                padding-top: 0;
                padding-bottom: 0;
            }*/

            .dual-span-container {
                display: inline-block;
            }

        .form-box-table .item-input {
            display: block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-right: none;
            border-bottom: none;
            padding: 10px 10px;
        }

        .form-box-table .input-txt {
            width: 100%;
        }

        .form-box-table span.error {
            background: url("../images/required.gif") no-repeat right 0;
        }

        .form-box-table .item-input .fullname input.width01 {
            width: 48%;
        }

        .form-box-table .item-input .fullname input.width02 {
            width: 48%;
        }

        .form-box-table .item-input .phone input.width01 {
            width: 29%;
        }

        .form-box-table .item-input .phone input.width02 {
            width: 29%;
        }

        .form-box-table .item-input .phone input.width03 {
            width: 29%;
        }

    .checkout-tabs li {
        width: 33%;
    }

    .st-contact {
        padding: 40px 10px;
    }

    .st-contact-2column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

       /* .st-contact-2column .st-text {
            text-align: center;
        }*/

        .st-contact-2column > .col-left {
            flex: 1; 
        }

        .st-contact-2column > .col-right {
            flex: 1;
        }

    .st-contact-detail2 {
        font-size: 1.4rem;
    }
}