@media screen and (max-width:768px) {

    /*************************
    common
    *************************/
    .c-btn-wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .c-ttl-b h3{
        font-size: 25px;
    }

    .c-btn{
        width: 45%;
        margin: 0 2.5%;
        margin-top: 20px;
    }

    .c-btn2{
        width: 45%;
        margin: 0 2.5%;
        margin-top: 20px;
    }

    .tag-wrapper {
        width: 70%;
    }
    .tag-wrapper a {
        margin: 5px 3px;
    }

    .mobile-btn{
        width: 100%;
    }

    /*************************
    header
    *************************/
    #close-btn,
    .line-wrapper{
        display: none;
    }

    .line-side__wrapper{
        display: block;
    }

    .line-side__wrapper{
        position: fixed;
        right: 0;
        top: 100px;
    }
    
    .line-side-btn span{
        top: 0;
    }
    
    .line-side-text{
        color: #fff;
        border-radius: 3px;
        font-weight: bold;
        font-size: 10px;
        text-align: center;
        writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
    }    

    .line-side-text img{
        width: 30px;
    }

    .close-btn span{
        right: 15px;
    }

    .company-side__wrapper{
        top: 140px;
    }

    .coupon-side__wrapper{
        top: 380px;
    }

    .consultation-side__wrapper{
        display: block;
        position: fixed;
        top: 50%;
        right: 13px;
        transform: translateY(-50%);
        z-index: 50;
        max-width: calc(100vw - 30px);
    }

    .consultation-side-btn.consultation-side-btn-pc-hide{
        display: block !important;
    }

    .company-side__wrapper,
    .coupon-side__wrapper{
        right: 0;
    }

    .company-side-text{
        display: none;
    }

    .company-side-text-sp{display: block;}
    .company-side-text-sp img{
        width: 30px;
    }

    .coupon-side-text{
        display: none;
    }

    .coupon-side-text{
        display: block;
        background: #000;
        color: #fff;
        font-weight: bold;
        font-size: 10px;
        border-radius: 3px;
        writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        padding: 12px 8px;
    }

    .coupon-side-text-sp{display: block;}
    .coupon-side-text-sp img{
        width: 30px;
    }

    .coupon-side-text{
        display: none;
    }


    .hidden-br{
        display: none;
    }

    .close-btn span{
        right: 25px;
        width: 15px;
        height: 15px;
    }

    .close-btn span::before, .close-btn span::after{
        top: 7px;
        right: 3px;
        width: 9px;
    }

    .line-side-btn span,.company-side-btn span{
        top: 0px;
    }

    /* 
    _::-webkit-full-page-media, _:future, :root .company-side__wrapper{
        right: 15px;
    }
    _::-webkit-full-page-media, _:future, :root .coupon-side__wrapper {
        right: 15px;
    } */

    _::-webkit-full-page-media, _:future, :root .line-side-btn span {
        right: -5px;
    }

    _::-webkit-full-page-media, _:future, :root .line-side__wrapper {
        right: 30px;
    }

    /*************************
    top
    *************************/
    .three-hikidashi-items{
        grid-template-columns: none;
    }
    
    .hikidashi-item{
        width: 100%;
    }

    .hikidashi-item img{
        width: 180px;
    }

    .three-hikidashi-wrapper {
        padding: 100px 0;
    }

    .area-coupon-wrapper{
        padding-bottom: 100px;
    }

    .area-coupon-img img{
        width: 30%;
        margin: auto;
    }

    /*************************
    top
    *************************/
    .three-hikidashi-wrapper{
        margin: 5vh;
    }

    /*************************
    company
    *************************/
    .c-content{
        display: block;
    }

    .c-content-img{
        margin: 20px 0;
    }

    .txt-box textarea{
        width: 100%;
    }

    /*************************
    answer
    *************************/

    .q-header{
        display: block;
    }

    .q-footer p{
        margin: 0;
    }

    .q-img,
    .q-txt{
        margin-top: 20px;
        width: 100%;
    }

    .q-img img{
        margin: 0;
    }

    .q-txt{
        /* margin: 0 20px ; */
        width: 100%;
    }

    .a-wrapper::after{
        font-size: 500px;
    }

    .a-box{
        display: block;
        /* width: 70%; */
        width: 100%;
        margin: auto;
        margin-bottom: 3vw;
    }

    .answer-icon{
        width: 35px;
    }

    /*************************
    pattern
    *************************/
    .pattern-txt{
        display: block;
    }

    .pattern-txt div:first-child,
    .pattern-txt div:last-child{
        width: 100%;
    }

    .pattern-footer img{
        display: none;
    }

    .txt-box::after{
        display: none;
    }

    .radio-box{
        text-align: left;
        width: 100%;
    }

    /*************************
    login
    *************************/

    .login-btn{
        margin: 0;
    }

    /*************************
    pressreleass
    *************************/
    .press-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    /*************************
    press-detail
    *************************/
    .press-detail-wrapper{
        margin: 0 50px;
        width: auto;
    }

    .press-detail-wrapper{
        display: block;
    }

    .press-detail-img,
    .press-detail-txt{
        width: 100%;
    }

    .press-detail-img{
        margin-bottom: 20px;
    }

    .press-detail-txt{
        margin: 0;
    }

    /*************************
    register
    *************************/
    .attention-txt::after,
    .attention-txt::before{
        content: none;
    }

    .form-flex{
        display: block;
    }

    .contact-btn {
        text-align: center;
        margin-top: 30px;
    }

}

@media screen and (max-width: 649px){
    
    .display-hr{
        display: block;
    }
}

@media screen and (max-width: 480px){

    .img-row a {
        margin: 2.5%;
        width: 20%;
    }

    .img-row img{
        width: 100%;
    }

    /*************************
    top
    *************************/

    .area-coupon-img img{
        width: 50%;
        margin: auto;
    }

    /*************************
    everyone
    *************************/

    .img-row{
        width: auto;
        margin: auto;
    }

    .everyone-inner{
        /* grid-template-columns: none; */
    }

    /*************************
    company
    *************************/
    .company-wrapper{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .c-footer p{
        font-size: 10px;
    }
    
    .c-content-text{
        width: 100%;
    }

    /*************************
    coupon
    *************************/

    .coupon-inner{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }
    /*************************
    common-pagination
    *************************/

    .pagination-btn{
        margin: 0 10px;
    }

    .pagination-num{
        margin: 5px;
    }

    .p-hidden{
        display: none;
    }

    /*************************
    Q&A
    *************************/
    .cp_qa .cp_actab {
        width: 80%;
    }


    .operation-wrapper{
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }    
}

@media screen and (max-width: 320px){
    .line-side__wrapper{
        top: 65px;
    }

    .company-side__wrapper{
        top: 150px;
    }

    .coupon-side__wrapper{
        top: 315px;
    }

    .consultation-side__wrapper{
        top: 50%;
        transform: translateY(-50%);
    }
}