@media screen and (max-width:1088px) {
  h2 {
      letter-spacing: 0;
  }
    .sp {
        display: block;
    }

    .pc {
        display: none!important;
    }

    .wrap1 {
        width: 90%;
    }

    .wrap2 {
        width: 90%;
    }

    .cnt {
        padding: 5vw 0 8vw;
    }

    .title {
        flex-direction: column-reverse;
        padding: 3% 5%;
    }

    .title>img {
        width: 100%;
    }

    .title>div {
        width: 100%;
    }

    .title>div p {
        line-height: 2;
    }

    .flex.achiebements {
        justify-content: space-between;
    }

    .flex.achiebements img {
        width: 41vw;
        height: auto;
        aspect-ratio: 34 / 26;

    }

    .flex.achiebements>div {
        margin-right: 0;
        margin-bottom: 3vw;
        font-size: 0.9em;
    }



    .table>.flex {
        display: block;
        width: 100%;
        border-bottom: none;
    }

    .table>.flex:first-child {
        border-top: none;
    }

    .table>.flex .th {
        background-color: #4A8B68;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .table>.flex span {
        display: block;
        padding: 20px 5%;
        text-align: center;
        line-height: 1.8;
    }

    .table>.flex .th span {
        padding: 2px 5% 0;
    }



    /*header*/

    header {
        justify-content: center;
        padding: 10px 0;
    }

    nav {
        position: fixed;
        top: 0;
        left: 0;
        margin-left: 100%;
        padding-top: 150px;
        transition: 0.5s;
        background-color: #4A8B68;
        width: 100%;
        height: 100vh;
        z-index: 9000;
    }

    nav.active {
        margin-left: 0;
    }

    nav>div {
        border-top: 2px #fff solid;
        padding: 30px 0;
    }

    nav h2,
    nav a{
        color: #fff;
    }

    nav h2{
        letter-spacing: 0.2em;
        font-weight: 500;
        border: none;
        padding: 0;
    }

    nav .works a{
        position: relative;
        display: block;
        margin: auto;
        width: 300px;
        font-size: 1.1em;
        padding: 10px 0;
        border-bottom:#fff 1px solid ;
    }

    nav .works a::after{
        content: "＞";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    nav .works a:last-child{
        border-bottom:none;
    }

    nav .contact{
        text-align: center;
    }

    .mail_icon,.insta_icon{
        height: 30px;
        margin: 0 20px;
    }





     menu {
        position: fixed;
        width: 52px;
        height: 36px;
        top: 20px;
        right: 2vw;
        padding: 0;
        z-index: 9999;
    }

     menu span {
        position: absolute;
        display: block;
        width: 52px;
        height: 3px;
        background-color: black;
        left: 0;
        transition: 0.5s;
    }

     menu span.first {
        top: 0;
    }

     menu span.first.active {
        transform: translate(-5px, 16px) rotate(30deg);
        width: 60px;
    }

     menu span.second {
        top: 50%;
        transform: translateY(-50%);
    }

     menu span.second.active {
        opacity: 0;
    }

    menu span.last {
        bottom: 0;
    }

    menu span.last.active {
        transform: translate(-5px, -16px) rotate(-30deg);
        width: 60px;
    }


    /*kv*/

    #kv .visual img {
        height: auto;
    }

    #kv .cmt {
        position: relative;
        background: linear-gradient(0, #2F5D44, #3C735599);
        color: #fff;
        line-height: 2.2em;
        padding-top: 1em;
        text-align: left;
    }

    /*recruit*/

    #recruit .num img{
        width: 80%;
    }

    /*about*/

    #about .about-table {
        display: block;
    }

    #about .about-table>img {
        width: 100%;
    }

    #about .about-table .table {
        width: 100%;
        margin: 0;
    }

    #about .about-table .table>.flex .th {
        width: auto;
        padding: 2px 0 0;
    }

    #about iframe {
        height: 75vw;
    }

    /*footer*/

footer .wrap1{
    margin-bottom: 20px;
}

footer .flex {
    display: flex;
}

footer .flex.wrap {
    justify-content: space-between;
    align-items: end;
}

footer .flex .left  {
    width:100%;
}

footer .flex.info {
    display: block;
    margin-bottom: 20px;
    align-items:end ;
    text-align: center;
}


footer span {
    display: block;
}

footer .flex .logo  {
    font-size: 1.2em;
    text-align: center;
    width: 100%;
    margin: 20px 0;
}

footer .flex .logo img {
    width: 120px;
}


footer .flex .tel  {
    margin: auto;
}

footer .flex .fax  {
    margin: auto;
}

footer .flex-button{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}



footer .mail {
    width: 48.5%;
    margin-right:0 ;
}

footer .inst{
    width: 48.5%;
}



footer .copy{
    text-align: center;
    font-size: 0.8em;
}

a.top_btn {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    right: 10px;
    bottom: 20px;
    background-color: #ffffff77;
    color: #000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

a.top_btn span {
    display: block;
    font-size: 28px;
    height: 32px;
}

a.top_btn small {
    display: block;
    font-size: 15px;
}

}