@charset "utf-8";

//==========================================================================
//_etc.scss
//==========================================================================
.tvSearch {
    margin-top: 100px;
    margin-bottom: 40px;
    @include smMax {
        margin-top: sm_vw(110);
        margin-bottom: sm_vw(90);
    }
    &__inner {
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 920px;
        padding: 0 20px;
        z-index: 10;
        display: flex;
        @include smMax {
            width: sm_vw(590);
            display: block;
            padding: 0;
        }
    }
    &__image {
        @include smMin {
            position: relative;
            flex: 1;
            overflow: hidden;
            img {
                position: absolute;
                top: 0;
                right: 50%;
                transform: translateX(50%);
                width: 440px;
            }
        }
        @include smMax {
            width: 100%;
        }
    }
    &__box {
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0 55px;
        width: 440px;
        height: 280px;
        background-color: #222;
        z-index: 2;
        @include smMax {
            margin: 0 auto;
            width: sm_vw(590);
            height: sm_vw(400);
            float: none;
            padding: 0;
            text-align: center;
        }
    }
    &__ttl {
        position: relative;
        font-size: 27px;
        font-weight: 400;
        color: #fff;
        margin-bottom: 15px;
        padding-bottom: 13px;
        @include smMax {
            font-size: sm_vw(40);
            margin-bottom: sm_vw(20);
            padding-bottom: sm_vw(20);
        }
        &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 24px;
            height: 1;
            border-bottom: 1px solid #fff;
            @include smMax {
                left: auto;
                right: 50%;
                transform: translateX(50%);
            }
        }
        .ico {
            position: relative;
            padding-right: 47px;
            @include smMax {
                padding-right: sm_vw(80);
            }
            &::before {
                content: "";
                position: absolute;
                bottom: 50%;
                right: 0;
                transform: translateY(50%);
                width: 39px;
                height: 26px;
                background: transparent url("../images/ico_search02_w.png") 0 0 no-repeat;
                background-size: 100% auto;
                @include smMax {
                    width: sm_vw(62);
                    height: sm_vw(42);
                }
            }
        }
    }
    &__txt {
        font-size: 14px;
        font-weight: 400;
        line-height: 2;
        color: #fff;
        margin-bottom: 15px;
        @include smMax {
            font-size: sm_vw(25);
            margin-bottom: sm_vw(30);
        }
    }
    &__btn {
        width: 220px;
        @include smMax {
            margin: 0 auto;
            width: sm_vw(350);
        }
        .c-btn-01 {
            border: 1px solid #fff;
        }
    }
}