@charset "UTF-8";

#kv{
    height: 87.9rem;
    position: relative;
    background: url("../img/kv_bg.jpg")no-repeat center center/cover;
}

#kv .wrap{
    height: 100%;
    position: relative;
    width: 75%;
    margin: auto;
}

#kv .wrap img{
    width: 60.051rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#kv a{
    position: absolute;
    bottom: 12rem;
    left: 0;
    transform: rotateZ(90deg);
    font-size: 2.5rem;
    color: #333333;
}

#kv a::before{
    position: absolute;
    content: "";
    height: 1px;
    width: 9.1rem;
    background: #333333;
    top: 50%;
    right: -11rem;
}

/* issue */

#issue{
    background: url("../img/issue_bg.svg") no-repeat center center/cover;
    padding: 9.5rem 0;
}

#issue .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
}

#issue .wrap .issue_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7.9rem;
}

#issue .wrap .issue_top div{
    width: 61%;
}

#issue .wrap .issue_top div h2{
    font-size: 4.2rem;
    margin-bottom: 6rem;
}

#issue .wrap .issue_top div h2:first-child{
    border-left: 1.6rem solid #1D2A56;
    padding-left: 2.5rem;
    color: #1D2A56;
}

#issue .wrap .issue_top div h2:nth-child(3){
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    color: #333333;
}

#issue .wrap .issue_top img{
    width: 37.5rem;
}

#issue .wrap .issue_bottom{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10rem;
}

#issue .wrap .issue_bottom div{
    width: 27%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#issue .wrap .issue_bottom div img{
    width: 38.2rem;
}

#issue .wrap .issue_bottom div h3{
    color: #1D2A56;
    font-size: 2.4rem;
    margin: 3rem 0;
}

#issue .wrap .issue_bottom div:first-child, #issue .wrap .issue_bottom div:nth-child(2), #issue .wrap .issue_bottom div:nth-child(3){
    position: relative;
}

#issue .wrap .issue_bottom div:first-child::before, #issue .wrap .issue_bottom div:nth-child(2)::before{
    position: absolute;
    content: "";
    height: 9.6rem;
    width: 11.1rem;
    top: 14rem;
    right: -12.5rem;
    background: url("../img/right_arrow.svg") no-repeat center center/contain;
}

#issue .wrap .issue_bottom div:nth-child(3)::before{
    position: absolute;
    content: "";
    height: 18.723rem;
    width: 18.554rem;
    top: -5rem;
    right: -3rem;
    background: url("../img/success.svg") no-repeat center center/contain;
}

/* feature */

#feature{
    background: white;
    padding: 9.5rem 0;
}

#feature .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#feature .wrap .question{
    height: 40.769rem;
    width: 112.349rem;
    background: url("../img/question_bg.png") no-repeat center center/contain;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8rem;
}

#feature .wrap .question h2{
    font-size: 5.1rem;
    color: white;
}

#feature .wrap > h2{
    font-size: 5.4rem;
    text-align: center;
    margin-bottom: 6.8rem;
}

#feature .wrap .feature_list{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 6.8rem;
}

#feature .wrap .feature_list div{
    width: 29%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#feature .wrap .feature_list img{
    width: 31.3rem;
}

#feature .wrap .feature_list h3{
    font-size: 2.5rem;
    margin: 3.9rem 0 1.5rem;
    color: #1D2A56;
}

/* detail */

#detail{
    padding: 9.5rem 0;
    background: url("../img/detail_bg.svg") no-repeat center center/cover;
}

#detail .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#detail .wrap h2{
    font-size: 4.2rem;
    margin-bottom: 6rem;
    color: #1D2A56;
}

#detail .wrap > img{
    width: 100%;
    margin-bottom: 2.9rem;
}

#detail .wrap > p{
    margin-bottom: 6rem;
}

#detail .wrap .inner{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
    margin-bottom: 7.4rem;
}

#detail .wrap .inner div{
    background: white;
    width: 40%;
}

#detail .wrap .inner div h3{
    color: white;
    font-size: 2.8rem;
    text-align: center;
    padding: 1.6rem 0;
}

#detail .wrap .inner div ul{
    margin: 2.3rem 0 0 6.8rem;
    
}

#detail .wrap .inner div ul li{
    font-size: 1.8rem;
    list-style: disc;
}

#detail .wrap .inner div ul li span{
    font-size: 1.4rem;
}

#detail .wrap .inner div p{
    font-size: 1.2rem;
    margin: 3.2rem 0 1.6rem 5rem;
}

#detail .wrap .inner div:first-child h3{
    background: #1D2A56;
}

#detail .wrap .inner div:nth-child(2) h3{
    background: #8ABCD7;
}

/* cost */

#cost{
    background: white;
    padding: 9.5rem 0;
}

#cost .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#cost .wrap h2{
    text-align: center;
    font-size: 2.5rem;
    color: #8ABCD7;
    line-height: 1.8;
    margin-bottom: 8rem;
}

#cost .wrap h2 span{

    font-size: 4.2rem;
    color: #1D2A56;
}

#cost .wrap img{
    width: 68.85rem;
    margin-bottom: 4rem;
}

#cost .wrap p{
    margin-bottom: 7.7rem;
}

/* difference */

#difference{
    padding: 9.5rem 0;
    background: url("../img/difference_bg.svg") no-repeat center center/cover;
}

#difference .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#difference .wrap h2{
    font-size: 4.2rem;
    margin-bottom: 6.1rem;
    color: #1D2A56;
}

#difference .wrap img{
    width: 112.496rem;
    margin: 6rem 0;
}

/* works */

#works{
    padding: 9.5rem 0 22.4rem;
    background: #1D2A56;
    position: relative;
}

#works::before{
    position: absolute;
    content: "PROJECTS";
    bottom: 0;
    right: 0;
    color: #F5F5F5;
    opacity: .2;
    font-size: 25rem;
    font-weight: 900;
    font-family: Hiragino Sans,'ヒラギノ角ゴシック';
    line-height: 90%;
}

#works h2{
    font-size: 7rem;
    position: relative;
    text-align: center;
    margin-bottom: 3.85rem;
    padding-bottom: 2.05rem;
    color: white;
}

#works h2::before{
    position: absolute;
    content: "";
    height: .3rem;
    width: 22.9rem;
    background: white;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 50%);
    bottom: 0;
}

#works > p{
    color: white;
    text-align: center;
    margin-bottom: 6rem;
}

#works .slider{
    width: 100%;
}

#works .slider img{
    margin: 0 .5%;
}

#works .content{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

#works .content img{
    width: 75rem;
}

#works .content > div{
    width: calc(75.3rem - 16rem);
    background: white;
    padding: 3.2rem 8rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#works .content > div h4{
    font-size: 2.5rem;
    padding-left: 2.4rem;
    border-left: 2.1rem solid #1D2A56;
    color: #1D2A56;
    margin-left: -4.5rem;
}

#works .content > div > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#works .content > div > div > div{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
}

#works .content > div > div > div:first-child > p{
    text-align: left;
    font-size: 1.4rem;
}

#works .content > div > div > div:nth-child(2) > p{
    font-size: 2.5rem;
    line-height: 1.3;
}

#works .content > div > div > div:nth-child(2) > p:first-child{
    margin-bottom: 3rem;
}

/* faq */

#faq{
    padding: 9.5rem 0;
    background: white;
}

#faq .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#faq .wrap h2{
    font-size: 4.2rem;
    margin-bottom: 6rem;
    color: #1D2A56;
}

#faq .wrap .box{
    width: 70%;
    margin: auto;
    margin-bottom: 4rem;
}

#faq .wrap .box:nth-child(4){
    margin-bottom: 8rem;
}

#faq .wrap .box .question{
    background: #1D2A56;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 4.5rem);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 16%);
    margin-bottom: 1rem;
    padding: 2rem 0 2rem 4.5rem;
}

#faq .wrap .box .answer{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 4.5rem);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 16%);
    padding: 2rem 0 2rem 4.5rem;
}

#faq .wrap .box .question p{
    color: white;
}

#faq .wrap .box .question p:first-child{
    font-size: 4.2rem;
    font-family: Hiragino Sans,'ヒラギノ角ゴシック';
}

#faq .wrap .box .question p:nth-child(2){
    font-size: 2.5rem;
    margin-left: 4.2rem;
}

#faq .wrap .box .answer p:first-child{
    font-size: 4.2rem;
    color: #8ABCD7;
    font-family: Hiragino Sans,'ヒラギノ角ゴシック';
}

#faq .wrap .box .answer p:nth-child(2){
    font-size: 2.5rem;
    margin-left: 4.2rem;
}

/* news */

#news{
    padding: 9.5rem 0;
    background: url("../img/news_bg.svg") no-repeat center center/cover;
}

#news .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
}

#news .wrap h2{
    font-size: 4.2rem;
    margin-bottom: 6rem;
    color: #1D2A56;
}

#news .wrap .news_list{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5rem;
}

#news .wrap .news_list .content{
    height: 43.7rem;
    width: 43.7rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#news .wrap .news_list .content div{
    background: rgba(29, 42, 86, 80%);
    height: 13.7rem;
    width: 100%;
}

#news .wrap .news_list .content div p{
    color: white;
    margin-left: 3rem;
    margin-top: 1.8rem;
    line-height: 150%;
}

#news .wrap .news_list .content div p:first-child{
    font-size: 1.6rem;
}

#news .wrap .news_list .content div p.content:nth-child(2){
    font-size: 2rem;
}

#news .wrap .news_list .content:first-child{
    background: url("../img/news0003.jpg") no-repeat center center/cover;
}

#news .wrap .news_list .content:nth-child(2){
    background: url("../img/news0002.jpg") no-repeat center center/cover;
}

#news .wrap .news_list .content:nth-child(3){
    background: url("../img/news0001.jpg") no-repeat center center/cover;
}

#news .wrap .more{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#news .wrap .more a{
    font-size: 2rem;
    border: .3rem solid #1D2A56;
    color: #1D2A56;
    padding: 1.7rem 5rem 1.7rem 3.7rem;
    position: relative;
    transition: all .3s ease-in-out;
}

#news .wrap .more a::before{
    position: absolute;
    content: "";
    height: .3rem;
    width: 7rem;
    background: #1D2A56;
    right: 50%;
    margin-right: -50%;
    transform: translate(75%, -50%);
    top: 50%;
    transition: all .3s ease-in-out;
}

#news .wrap .more a:hover{
    color: white;
    transition: all .3s ease-in-out;
    background: #1D2A56;
}

#news .wrap .more a:hover::before{
    right: 40%;
    transition: all .2s ease-in-out;
}

/* contact */

#contact{
    padding: 9.5rem 0;
    background: white;
}

#contact .wrap{
    width: 85%;
    max-width: 1440px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

#contact .wrap .left{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

#contact .wrap .left a, #contact .wrap .right a{
    width: 57rem;
    padding: 3.5rem 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 4.2rem;
    position: relative;
    transition: all .3s ease-in-out;
}

#contact .wrap .left a:hover,#contact .wrap .right a:hover{
    transition: all .3s ease-in-out;
}

#contact .wrap .left a::before, #contact .wrap .right a::before,#contact .wrap .left a::after, #contact .wrap .right a::after{
    position: absolute;
    content: "";
    left: 0;
    margin-right: -50%;
    transform: translate(50%, -50%);
    top: 50%;
}

#contact .wrap .left a::after, #contact .wrap .right a::after{
    opacity: 0;
    transition: all .3s ease-in-out;
}

#contact .wrap .left a p, #contact .wrap .right a p{
    margin-right: 3.5rem;
    font-family: Hiragino Sans,'ヒラギノ角ゴシック';
    font-size: 3.5rem;
    color: unset;
}

#contact .wrap .left .twitter{
    border: .3rem solid #8ABCD7;
    color: #8ABCD7;
}

#contact .wrap .left .twitter:hover{
    background: #8ABCD7;
    color: white;
}

#contact .wrap .left a:hover::after, #contact .wrap .right a:hover::after{
    opacity: 1;
    transition: all .3s ease-in-out;
}

#contact .wrap .left .twitter::before{
    height: 3.944rem;
    width: 4.733rem;
    background: url("../img/twitter.svg") no-repeat center center/contain;
}

#contact .wrap .left .twitter::after{
    height: 3.944rem;
    width: 4.733rem;
    background: url("../img/twitter_white.svg") no-repeat center center/contain;
}

#contact .wrap .left .facebook::before{
    height: 4.459rem;
    width: 4.459rem;
    background: url("../img/facebook-2.svg") no-repeat center center/contain;
}

#contact .wrap .left .facebook::after{
    height: 4.459rem;
    width: 4.459rem;
    background: url("../img/facebook_white.svg") no-repeat center center/contain;
}

#contact .wrap .left .insta::before{
    height: 4.5rem;
    width: 4.5rem;
    background: url("../img/instagram.svg") no-repeat center center/contain;
}

#contact .wrap .left .insta::after{
    height: 4.5rem;
    width: 4.5rem;
    background: url("../img/instagram_white.svg") no-repeat center center/contain;
}

#contact .wrap .left .facebook{
    border: .3rem solid #0066CC;
    color: #0066CC;
}

#contact .wrap .left .facebook:hover{
    background: #0066CC;
    color: white;
}

#contact .wrap .left .insta{
    border: .3rem solid #DC3175;
    color: #DC3175;
}

#contact .wrap .left .insta:hover{
    background: #DC3175;
    color: white;
}

#contact .wrap .right a{
    border: .3rem solid #1D2A56;
    color: #1D2A56;
}

#contact .wrap .right a:hover{
    background: #1D2A56;
    color: white;
}

#contact .wrap .right a::before{
    height: 4.838rem;
    width: 4.3rem;
    background: url("../img/contact.svg") no-repeat center center/contain;
}

#contact .wrap .right a::after{
    height: 4.838rem;
    width: 4.3rem;
    background: url("../img/contact_white.svg") no-repeat center center/contain;
}

#contact .wrap .right{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 50%;
    flex-direction: column;
}

#contact .wrap .right div{
    text-align: right;
}

#contact .wrap .right div h2{
    font-size: 4.62rem;
    font-family: Hiragino Sans,'ヒラギノ角ゴシック';
    font-weight: 600;
    color: #1D2A56;
    margin-bottom: 5.38rem;
}

#contact .wrap .right div p{
    font-size: 2.5rem;
}

@media screen and (max-width: 1024px){
    #works .content img{
        width: 77rem;
    }
}

@media screen and (max-width: 767px) {
    main{
        padding-top: 5.5rem;
    }

    #kv{
        height: 61.2rem;
        background: url("../img/kv_bg_sp.jpg") no-repeat center -1rem/cover;
    }

    #kv::before{
        position: absolute;
        content: "";
        height: 4.406rem;
        width: 33.566rem;
        background: url("../img/kv_txt_top.svg") no-repeat center center/contain;
        left: 50%;
        transform: translateX(-50%);
        top: 3rem;
    }

    #kv::after{
        position: absolute;
        content: "";
        width: 24.466rem;
        height: 12.197rem;
        left: 2.24rem;
        bottom: 4rem;
        background: url("../img/kv_txt_bottom.svg") no-repeat center center/contain;
    }

    #kv .wrap{
        width: 100%;
    }
    
    #kv .wrap img{
        width: unset;
        height: 100%;
        top: 0;
        left: 0;
        transform: unset;
    }

    #kv a{
        font-size: 1.3rem;
        right: 0;
        left: unset;
        bottom: 8rem;
    }

    #kv a::before{
        width: 5.011rem;
        right: -6rem;
    }

    #issue{
        padding: 2.5rem 0;
    }

    #issue .wrap .issue_top{
        flex-direction: column;
        margin-bottom: 3rem;
    }

    #issue .wrap .issue_top div{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #issue .wrap .issue_top div h2{
        font-size: 2.4rem;
        margin-bottom: 2rem;
        line-height: 150%;
    }

    #issue .wrap .issue_top div h2:first-child{
        border-left: .8rem solid #1D2A56;
        padding-left: 1.1rem;
    }

    #issue .wrap .issue_top div div{
        height: 12.4rem;
        overflow: hidden;
        margin-bottom: 3rem;
        position: relative;
        width: 118%;
    }

    #issue .wrap .issue_top div img{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        transform: translateY(2rem);
    }

    #issue .wrap .issue_bottom{
        flex-direction: column;
        margin-bottom: 3rem;
    }

    #issue .wrap .issue_bottom div{
        width: 100%;
        margin-bottom: 8rem;
    }

    #issue .wrap .issue_bottom div:nth-child(3){
        margin-bottom: 0;
    }

    #issue .wrap .issue_bottom div img{
        width: 80%;
    }

    #issue .wrap .issue_bottom div h3{
        margin: 2rem 0;
        font-size: 1.8rem;
    }

    #issue .wrap .issue_bottom div:first-child::before, #issue .wrap .issue_bottom div:nth-child(2)::before{
        height: 3.384rem;
        width: 7.1rem;
        top: unset;
        right: unset;
        left: 50%;
        transform: translate(-50%, 50%);
        bottom: -4rem;
        background: url("../img/arrow_down.svg") no-repeat center center/contain;
    }

    #issue .wrap .issue_bottom div:nth-child(3)::before{
        height: 10.94rem;
        width: 12.049rem;
        top: -2rem;
        right: 0;
    }

    #feature{
        padding: 2.5rem 0;
    }

    #feature .wrap .question{
        width: 100%;
        height: 12.4rem;
        margin-bottom: 3rem;
    }

    #feature .wrap .question h2{
        font-size: 2.2rem;
        line-height: 150%;
    }

    #feature .wrap > h2{
        font-size: 2.4rem;
        margin-bottom: 3.2rem;
    }

    #feature .wrap .feature_list{
        margin-top: 2.3rem;
        flex-direction: column;
    }

    #feature .wrap .feature_list div{
        width: 100%;
        margin-bottom: 3.5rem;
    }

    #feature .wrap .feature_list div:nth-child(3){
        margin-bottom: 0;
    }

    #feature .wrap .feature_list img{
        width: 85%;
    }

    #feature .wrap .feature_list h3{
        margin: 2rem 0;
    }

    #detail{
        padding: 2.5rem 0;
    }

    #detail .wrap h2{
        font-size: 2.4rem;
        margin-bottom: 3rem;
    }

    #detail .wrap > p{
        margin-bottom: 2rem;
    }

    #detail .wrap .inner{
        flex-direction: column;
        margin-bottom: 3rem;
    }

    #detail .wrap .inner div{
        width: 100%;
    }

    #detail .wrap .inner div:first-child{
        margin-bottom: 2rem;
    }

    #detail .wrap .inner div h3{
        font-size: 1.8rem;
    }

    #detail .wrap .inner div ul{
        margin: 2.6rem 0 2.6rem 5.4rem;
    }

    #detail .wrap .inner div ul li{
        font-size: 1.4rem;
    }

    #detail .wrap .inner div p{
        margin: 0 0 2.6rem 3.5rem;
    }

    #detail .wrap > img{
        margin-bottom: 0;
    }

    #cost{
        padding: 2.5rem 0;
    }

    #cost .wrap h2 span{
        font-size: 2.6rem;
        margin-bottom: 2.9rem;
        line-height: 1.8;
    }

    #cost .wrap h2{
        font-size: 1.4rem;
        line-height: 1.3;
        margin-bottom: 2.5rem;
    }

    #cost .wrap img{
        width: 100%;
        margin-bottom: 3.45rem;
    }

    #cost .wrap p{
        margin-bottom: 3.4rem;
    }

    #difference{
        padding: 2.5rem 0;
    }

    #difference .wrap h2{
        font-size: 2.2rem;
        margin-bottom: 3.4rem;
    }

    #difference .wrap img{
        margin: 2.72rem 0;
        width: 100%;
    }

    #works{
        padding: 2.5rem 0 4.2rem;
    }

    #works h2{
        font-size: 2.4rem;
        padding-bottom: 1.18rem;
        margin-bottom: 1.82rem;
    }

    #works h2::before{
        width: 12.288rem;
    }

    #works::before{
        font-size: 4.615rem;
    }

    #works > p{
        margin-bottom: 2.5rem;
    }

    .slider{
        position: relative;
    }
    
    #works .slider img{
        width: 28.8rem !important;
    }

    #works .slick-track{
        float: none;
        display: flex;
        justify-content: space-around;
    }

    .slide-arrow{
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        border: none;
        font-size: 2.5rem;
        font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
        background: none;
        color: white;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);
        z-index: 10;
    }
    
    .slide-arrow:hover{
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, 16%);
    }
    
    .prev-arrow{
        left: 0rem;
    }
    
    .next-arrow{
        right: 0rem;
    }

    #works .content{
        flex-direction: column;
        align-items: center;
    }

    #works .content img{
        width: 90%;
    }

    #works .content > div{
        width: 74%;
        padding: 2.4rem 3rem 2.7rem;
        margin-top: .6rem;
    }

    #works .content > div h4{
        font-size: 1.6rem;
        width: 112%;
        margin-bottom: 1rem;
        border-left: 1rem solid #1D2A56;
        padding-left: 1rem;
        margin-left: -1.5rem;
    }

    #works .content > div > div{
        flex-direction: column;
        align-items: flex-start;
    }

    #works .content > div > div > div:first-child > p{
        font-size: 1.2rem;
        line-height: 1.3;
    }

    #works .content > div > div > div:nth-child(2) > p{
        font-size: 1.6rem;
    }

    #works .content > div > div > div:nth-child(2) > p:first-child{
        margin-bottom: 0;
    }

    #faq{
        padding: 2.5rem 0;
    }

    #faq .wrap h2{
        font-size: 2.4rem;
        margin-bottom: 3.6rem;
    }

    #faq .wrap .box{
        width: 100%;
    }

    #faq .wrap .box .question{
        padding: 1.8rem 0 1.8rem 1.4rem;
        width: calc(100% - 1.4rem);
    }

    #faq .wrap .box .question p:first-child, #faq .wrap .box .answer p:first-child{
        font-size: 2.3rem;
    }

    #faq .wrap .box .question p:nth-child(2){
        font-size: 1.4rem;
        margin-left: .96rem;
    }

    #faq .wrap .box .answer{
        padding: 1.8rem 1.4rem;
        width: calc(100% - 2.8rem);
    }

    #faq .wrap .box .answer p:nth-child(2){
        font-size: 1.2rem;
        margin-left: .96rem;
    }

    #faq .wrap .box:nth-child(4){
        margin-bottom: 4.05rem;
    }

    #news{
        padding: 2.5rem 0;
    }

    #news .wrap h2{
        font-size: 2.4rem;
        margin-bottom: 4rem;
        text-align: center;
    }

    #news .wrap .news_list{
        flex-direction: column;
        margin-bottom: 0;
    }

    #news .wrap .news_list .content{
        height: 30.4rem;
        width: 30.4rem;
    }

    #news .wrap .more{
        justify-content: center;
    }

    #news .wrap .more a{
        font-size: 1.8rem;
        padding: 1.7rem 5rem 1.7rem 3.7rem;
    }

    #contact{
        padding: 2.5rem 0;
    }

    #contact .wrap{
        flex-direction: column-reverse;
    }

    #contact .wrap .right, #contact .wrap .left{
        width: 100%;
        align-items: center;
    }

    #contact .wrap .right div{
        text-align: center;
    }

    #contact .wrap .right div h2{
        margin-bottom: 1.3rem;
        font-size: 2.4rem;
    }

    #contact .wrap .right div > p{
        font-size: 1.4rem;
        line-height: 100%;
        margin-bottom: 1.3rem;
    }

    #contact .wrap .left a, #contact .wrap .right a{
        width: 75%;
        padding: 1.6rem 0;
        margin-bottom: 1.9rem;
    }

    #contact .wrap .left a p, #contact .wrap .right a p{
        font-size: 1.6rem;
        margin-right: 1.5rem;
    }

    #contact .wrap .right a::after, #contact .wrap .right a::before{
        height: 2.195rem;
        width: 1.951rem;
    }

    #contact .wrap .left .twitter::before, #contact .wrap .left .twitter::after{
        width: 2.147rem;
        height: 1.789rem;
    }

    #contact .wrap .left .facebook::before, #contact .wrap .left .facebook::after{
        width: 2.023rem;
        height: 2.023rem;
    }

    #contact .wrap .left .insta::before, #contact .wrap .left .insta::after{
        width: 2.041rem;
        height: 2.041rem;
    }

    #works .content > div > div > div:nth-child(2){
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
    }

    #works .content > div > div > div p{
        font-size: 1.6rem;
        margin-top: 1rem;
    }

    #works .content > div > div > div:nth-child(2) > p:nth-child(2){
        margin-left: 5rem;
    }
}

@media screen and (max-width: 320px){
    #kv{
        height: 53.2rem;
        background: url("../img/kv_bg_sp.jpg") no-repeat center right/contain;
    }

    #kv .wrap img{
        left: 50%;
        transform: translateX(-50%);
    }
}