@charset "utf-8";

/********************************************************
PC
********************************************************/

@media screen and (max-width:1200px) {
    /* common */
    
    .inner{
        width:95%;
    }
    #clip .vid_cover{
        width:80%;
    }
    #clip .close{
        width:40px;
        height:40px;
        right:-40px;
    }
    #clip .vid_info .detail,
    #clip .vid_info .detail li.respon span{
        display:block;
    }

    /* main */
 
    #intro .intro_txt h2{
        font-size:50px;
    }
    #intro .intro_txt p{
        font-size:16px;
        margin-top:20px;
    }
    #intro .intro_txt .anchor_btn{
        margin-top:40px;
    }
    #about .section_txt{
        width:70%;
    }
    #service .sv_card{
        height:280px;
    }
    #service .sv_card:before{
        font-size:30px;
    }
    #process .prs_list li{
        flex:1 1 49%;
    }
    #process .prs_list li:nth-child(3n+1){
        margin-left:10px;
    }
    #process .prs_list li:nth-child(2n+1){
        margin-left:0;
    }
    #contact .logo{
        width:300px;
    }
    #contact h3{
        font-size:32px;
    }
    #contact a.contact{
        font-size:20px;
        margin-top:55px;
        padding:16px 40px;
    }

    /* page */
    .page_work .category{
        width:95%;
    }
}


/********************************************************
Pad
********************************************************/
@media screen and (max-width:1024px) {
    /* common */
    header.open {
        height:100vh;
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    header.open .header_inner{
        flex-direction: column;
        justify-content: center;
    }
    header.open .logo{
        width:150px;
    }
    header nav{
        position:absolute;
        top:100px;
        left:0;
        width:100%;
    }
    header.open nav{
        position:static;
        margin-top:40px;
        flex-direction: column;
    }
    header nav a{
        font-size:30px;
    }
    header .m_btn{
        display:block;
    }
    .section_tit h2{
        font-size:48px;
    }

    /* pages */
    .page_about .list .img{
        padding-bottom:280px;
    }
    .page_about .list .txt{
        width:calc(300px - 10px);
    }
    .page_about .list h3{
        font-size:24px;
    }
}

/********************************************************
Mobile
********************************************************/
@media screen and (max-width:767px) {
    /* common */
    header{
        height:70px;
    }
    header .header_inner{
        padding:0 10px;
    }
    header .logo{
        width:40px;
    }
    header .m_btn{
        top:25px;
        right:10px;
    }
    .section_tit h2{
        font-size:30px;
        letter-spacing: 0;
    }
    .section_tit h2:after{
        width:56px;
    }
.page_about{padding:70px 0 100px!important;}

    /* main */
    #intro .intro_txt h2{
        font-size:35px;
    }
    #about .bg_img{
        right:auto;
        left:50%;
        transform:translate(-50%,-50%);
        opacity:.2;
    }
    #about .section_txt{
        width:100%;
    }
    #about .section_txt strong{
        font-size:18px;
    }
    #about .section_txt p{
        font-size:15px;
    }
    #about .section_txt p br{
       /* display: none;*/
    }
    #service .sv_list,
    #process .prs_list{
        flex-direction: column;
    }
    #service .sv_card:nth-child(even),
    #service .sv_card{
        margin-top:10px;
    }
    #process .prs_list li{
        flex: 1 1 100%;
        margin:0 0 10px !important;
    }
    #contact .logo{
        width:200px;
    }
    #contact h3{
        font-size:22px;
    }
    #contact a.contact{
        margin-top:35px;
        font-size:18px;
        padding:14px 28px;
    }

    /* pages */
    #container .section_tit{
        margin-bottom:70px;
    }
    .page_about .list .item{
        display:block;
        margin-bottom:30px;
    }
    .page_about .list .item:nth-child(even){
        display:flex;
        flex-direction: column-reverse;
    }
    .page_about .list .txt{
        width:100%;
        margin:10px 0 0;
        padding:30px 20px;
    }
    .page_contact .input_tbl caption{
        font-size:20px;
    }
    .page_contact .btn_box input{
        font-size:18px;
        padding:10px 0;
    }
}