@charset "UTF-8";
/* ---------------------- common style ---------------------- */
section:not(#mv){ padding:80px 0;}
@media screen and (max-width:768px) {
    section:not(#mv){ padding:10vw 0;}
}

/* ---------------------- MV ---------------------- */
#mv.mv-wrap{margin-top:60px;}
@media screen and (max-width:768px) {
}

/* ---------------------- OUR WORKS ---------------------- */
#works .sec-ttl .ttl-en{color:#fff;}
#works .works-con{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom:60px;
    margin-top:20px;
}
#works .works-item{
    width:calc((100% - 30px*2)/3);
}
#works .works-ttl{
    color:#2274B6;
    font-size:18px;
    font-weight: 600;
}
#works .works-tag{
    display: inline-block;
    background: #fff;
    color:#2274B6;
    padding:0 10px;
    border-radius: 6px;
    font-size:12px;
    margin-right:5px;
}
#works a.btn-blue::after{
    content:'';
    position: absolute;
    background: url("../img/common/icon-arrow.svg") no-repeat;
    background-size: 100%;
    width:7px;
    height:12px;
    top:0;
    bottom:0;
    right:10px;
    margin:auto;
}

@media screen and (max-width:768px) {
    #works .works-con{ 
        margin-bottom:10vw ;
        margin-top:3vw;
    }
    #works .works-item{
        width:100%;
    }
    #works .works-item+.works-item{margin-top:10vw;}
    #works .works-ttl{
        font-size:4vw;
        margin:1vw 0;
    }
    #works .works-tag{
        padding:0.5vw 2vw;
        font-size:3vw;
        margin-right:1vw;
    }
    #works a.btn-blue::after{
        width:1.867vw;
        height:3.2vw;
        right:3vw;
    }
}

/* ---------------------- ITEM ---------------------- */
#item .sec-ttl .ttl-en{color:#E5ECEF;}
#item .item-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#item .item-list li{
    width:calc((100% - 20px)/2);
    border:2px solid #2274B6;
    margin-top:20px;
}
#item .item-list li a{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#item .item-ttl{
    display: flex;
    align-items: center;
    width:50%;
    padding-left:40px;
}
#item .item-ttl span:not(.item-ttl-num){
    font-size:24px;
    font-weight: 600;
    color:#2274B6;
}
#item .item-ttl span.item-ttl-num{
    font-weight: 600;
    color:#fff;
    background: #2274B6;
    width:28px;
    height:28px;
    line-height:28px;
    text-align: center;
    border-radius: 50%;
    margin-right:20px;
}
#item .item-list li .item-flex{
    width:50%;
    display: flex;
    justify-content: flex-end;
}
#item .item-list li picture{width:50%;}

@media screen and (max-width:768px) {
    #item .item-list li{
        width:48%;
        margin-top:5vw;
    }
    #item .item-ttl{
        padding-left:1vw;  
        width:100%;
        margin-top:2vw;
    }
    #item .item-ttl span:not(.item-ttl-num){font-size:3.5vw;}
    #item .item-ttl span.item-ttl-num{
        width:5.8vw;
        height:5.8vw;
        line-height:5.8vw;
        margin-right:1.5vw;
        font-size:3.5vw;
    }
    #item .item-list li .item-flex{
        width:100%;
        display: flex;
        justify-content: center;
    }
    #item .item-list li picture{width:50%;}
}

/* ---------------------- RECRUIT ---------------------- */
#recruit .sec-ttl .ttl-en{color:#fff;}
#recruit .recruit-link{
    position: relative;
    display: block;
    width:900px;
    margin:20px auto 0;
}
#recruit .recruit-link::after{
    content:'';
    position: absolute;
    background: url("../img/common/icon-arrow.svg") no-repeat;
    background-size: 100%;
    width:10px;
    height:20px;
    top:0;
    bottom:0;
    right:30px;
    margin:auto;
}
#recruit .recruit-link > p{
    position: absolute;
    font-size:28px;
    font-weight: 600;
    color:#fff;
    top:0;
    bottom:0;
    right:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:768px) {
    #recruit .recruit-link{
        width:100%;
        margin:3vw auto 0;
    }
    #recruit .recruit-link::after{
        width:1.867vw;
        height:3.2vw;
        right:3vw;
    }
    #recruit .recruit-link > p{
        font-size:4vw;
    }
}

/* ---------------------- INSTAGRAM ---------------------- */
#instagram .sec-ttl .ttl-en{color:#E5ECEF;}
#instagram .instagram-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom:60px;
}
#instagram .instagram-list li{
    width:calc((100% - 20px*3)/4);
    margin-top:20px;
}
#instagram .insta-icon{
    width:37px;
    margin:0 auto 10px;
}
#instagram .btn-bub{
    text-align: center;
}
#instagram .btn-bub-txt {
    position: relative;
    display: inline-block;
    font-size:18px;
    text-align: center;
    margin-bottom:10px;
    color:#2274B6;
    font-weight: 500;
}
#instagram .btn-bub-txt::before,
#instagram .btn-bub-txt::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    width: 25px;
    height: 2px;
    background-color: #2274B6;
    transform: translateY(-50%);
}
#instagram .btn-bub-txt::before {
    left: -25px;
    transform: translateY(-50%) rotate(65deg);
}
#instagram .btn-bub-txt::after {
    right: -25px;
    transform: translateY(-50%) rotate(-65deg);
}

#instagram .btn-blue::after{
    content:'';
    position: absolute;
    background: url("../img/common/icon-link.svg") no-repeat;
    background-size: 100%;
    width:15px;
    height:12px;
    top:0;
    bottom:0;
    right:20px;
    margin:auto;
}
@media screen and (max-width:768px) {
    #instagram .instagram-list{ margin-bottom:10vw;}
    #instagram .instagram-list li{
        width:calc((100% - 2vw*3)/4);
        margin-top:2vw;
    }
    #instagram .insta-icon{
        width:8vw;
        margin:0 auto 3vw;
    }
    #instagram .btn-bub-txt {
        font-size:4vw;
        margin-bottom:3vw;
    }
    #instagram .btn-bub-txt::before,
    #instagram .btn-bub-txt::after {
        width: 5vw;
    }
    #instagram .btn-bub-txt::before {
        left: -5vw;
    }
    #instagram .btn-bub-txt::after {
        right: -5vw;
    }
    #instagram .btn-blue::after{
        width:4vw;
        height:3.2vw;
        right:3vw;
    }
}

/* ---------------------- ICONTACT---------------------- */
#contact .sec-ttl .ttl-en{color:#fff;}
#contact .sex-txt{
    font-size:20px;
    text-align: center;
    font-weight: 600;
    margin-bottom:50px;
    margin-top:10px;
}
#contact .con-inner{}
#contact .contact-in{
    background: #fff;
    width:800px;
    margin:0 auto;
}
.contact-form{
    background: #fff;
    width:80%;
    margin:0 auto;
    padding:60px 0 60px
}
form {
    margin: 0 auto;
    width:100%;
    text-align: left;
}
form dl{
    margin-bottom: 10px;
    display: flex;
}
form .req{font-size: 10px;vertical-align: super;color:#FF0000;}
form dt{
    width:35%;
    font-weight: 600;
}
form dd{width:65%;}
form dt,form dd{margin-bottom: 15px}
form dt {width:40%;padding-top:2px; }
form textarea{
    width: 100%;
    height: 10em;
    line-height: 1.5em;
    background:#F2F2F2;
    padding: 5px 10px;
    margin: 0;
    display:block;
    box-sizing: border-box;
    }

form input[type="text"] {
    width: 100%;
    line-height: 1.5em;
    background:#F2F2F2;
    padding: 10px 10px;
    margin: 0;
    display:block;
    box-sizing: border-box
}
#contact .btn-blue{margin-top:30px;}
#contact .back-btn{
    background: #a8a8a8;
    display: inline-block;
    color:#fff;
    width:250px;
    text-align: center;
    padding:12px 0 8px;
    position: relative;
    font-family: 'Josefin Sans', sans-serif;
    font-size:20px;
    font-weight: 600;
    margin-top:30px;
}

/* SP */
@media screen and (max-width:768px) {
    #contact .sex-txt{
        font-size:3.4vw;
        margin-bottom:5vw;
        margin-top:2vw;
    }
    #contact .contact-in{width:100%; }
    .contact-form{
        width:90%;
        padding:7vw 0 10vw
    }
    form dl{
        margin-bottom: 2vw;
        flex-wrap: wrap;
    }
    form .req{font-size: 2.8vw;}
    form dt{width:100%;}
    form dd{width:100%;}
    form dt,form dd{margin-bottom: 1vw}
    form dt {width:100%;padding-top:0; }
    form textarea{padding: 2vw 2vw;}

    form input[type="text"] {
        width: 100%;
        padding: 2vw 2vw;
    }
    #contact .btn-blue{margin-top:5vw;
    }
    #contact .back-btn{
        width:250px;
        padding:3vw 0 2.5vw;
        font-size:4vw;
        margin-top:5vw;
    }
    #contact.contact-under{padding:25vw 0 10vw!important;}
}