/* large ipadのよこはば　デカい*/
@media (max-width: 1024px) {

    /* ヘッダー全体*/
    .header-wrap {
        display: flex;
        align-items: center;
    }
    
    /* ヘッダー右コンテンツそれぞれ*/
    .header-content {
        margin: 0;
        padding: 0vh 2vh;
    }

    .main-wrap, .contact-wrap {
        margin: 4em 4em;
    }

    /* セクションのタイトル*/
    .article-title {
        font-size: 3em;
        padding: 1.5em 0em 1em;
        letter-spacing: 2px;
    }
    
    .article-contents {
        padding-bottom: 10vh;
    }

    /* サービスの画像、ちょっと縮める*/
    .service-image img{
        width: 30vw;
        /*box-shadow: 2px 2px 3px #999;*/
        /*box-shadow: 1px 1px 4px 1.4px #999999f5;*/
        /*: 1 3 8 0 rgba(0,0,0,0.2)がいい感じかも*/
    }

    .team-wrap {
        margin-bottom: 5vh;
    }
}

/* mideam 普通は896 iphonSX MAX の縦幅=>横にしてみたときの幅*/
@media (max-width: 996px) {

    /* 一番上ヘッダー上タイトル　クラス名変えたほうがいい*/
    .header-logo {
        font-size: 1.5em;
    }

    /*ヘッダー右コンテンツそれぞれ*/
    .header-content {
        margin: 0;
        padding: 0vh 1vh;
        font-size: 1em;
        letter-spacing: 1.5;
    }

    .header-flow {
        display: none;
    }

     /* セクションのタイトル*/
     .article-title {
        font-size: 2em;
        padding: 1em 0em 1em;
        letter-spacing: 2px;
    }

    .main-wrap, .contact-wrap {
        margin: 2em 5em;
    }

    .article-contents {
        display: flex;
        align-items: flex-start;
        width: 90vw;
    }

    .philosophy-list h4 {
        font-size: 1.3em;
        padding-top: 6vw;
        padding-bottom: 1vw;
    }

}

/* small 普通は640 iphonの縦, SXMAXが414とのこと*/
@media (max-width: 731px) {

    /* ヘッダー全体*/
    .header-wrap {
        letter-spacing: 1.2px;
        margin-top: 1.5vh;
    }

    .header-logo {
        margin-left: 1vm;

        font-size: 1.5em;
    }

    /* 内容全体　wrapの横をcontact-wrap、タイトルと合わせる　*/
    .main-wrap, .contact-wrap {
        margin: 2em 3em;
    }

    .article-title {
        letter-spacing: 1.5px;
    }

    .philosophy-list {
        padding-right: 4em;
    }

    /* contact　*/
    .contact-wrap {
        margin: 4em 3.5em;
    }


    

}

/*次にヘッダーがずれる大きさ*/
@media (max-width: 623px) {
    .header-contents{
        display: none;
    }


}

/* スマホ ANDROIDのLサイズ */
@media (max-width: 480px) {
    
    .logo h1 {
        font-size: 6em;
    }

    .main-wrap{
        margin: 2em 2em;
    }

    .main-wrap{
        margin-right: 0em;
    }

    .article-title {
        letter-spacing: 1px;
    }

    .article-contents {
        flex-direction: column;
    }

    .service-article p {
        width: 80vw;
    }

    .service-image img{
        width: 70vw;
        margin-top: 2em;
        /*box-shadow: 2px 2px 3px #999;*/
        /*box-shadow: 1px 1px 4px 1.4px #999999f5;*/
        /*: 1 3 8 0 rgba(0,0,0,0.2)がいい感じかも*/
    }

    .team-list {
        margin-left: 0rem;
        display: flex;
        flex-direction: column;
    }

    .team-menber {
        margin-bottom: 2em;
        margin-right: 0vw;
    }

    .contact-wrap {
        margin-right: 2vw;
    }
    
    .contact-btn {
        margin-top: 1em;
    }

}



/* スマホ */
@media (max-width: 427px) {
    
    #top-randomMessage {
        font-size: 1.2em;
        letter-spacing: 0.2rem;
    }
    
    .main-wrap{
        margin-right: 1em;
    }

}