html{
    width: 100%;
}

img {
    width: 100%;
}

/******* navi *******/

ul {
    list-style: none; /*リストの先頭ドットを消す*/
}

/*main-nav1*/
.main-nav1 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;
    
    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

/*liの最初を左寄せにする*/
.main-nav1 li:first-child {
    margin-right: auto;
}

/*main-nav2*/
.main-nav2 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;
}



/*main-navの基本css*/
.main-nav a{
    margin: 10px;
    border-radius: 5px;
    background: #60B99A;
    color: #fff;
    display: block;
    padding: 15px;
    text-decoration: none;
}

.main-nav .logo {
    background: #4584b1;
}
 

 
/********* flexbox1 **********/

/*flexbox1*/

.flexbox1 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;
    
    padding: 10px;
}

.flexbox1 section{
    /*要素の横幅を領域一杯に等倍*/
    -webkit-flex-grow: 1;
    flex-grow: 0;

    /*sectionの基本css*/
    margin: 10px;
    border-radius: 5px;
    background: #fff;
    padding: 15px;
    
    flex-basis: 30%; /* flexbox.sectionの横幅 */
}

.flexbox1 h1 {
    color: #388E3C;
}

.flexbox1 p{
    margin-top: 10px;
}


/*flexbox2*/
.flexbox2 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;
    
    flex: 1;
}

.flexbox2 section{
    /*要素の横幅を領域一杯に等倍*/
    -webkit-flex-grow: 1;
    flex-grow: 1;

    /*sectionの基本css*/
    margin: 10px;
    border-radius: 5px;
    background: #F5F0CF;
    padding: 15px;
}


/*flexbox3*/
.flexbox3 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;

    flex: 1;
}

.flexbox3 section{
    /*要素の横幅を領域一杯に等倍*/
    -webkit-flex-grow: 1;
    flex-grow: 1;

    /*sectionの基本css*/
    margin: 0px -5px;
    border-radius: 5px;
    padding: 15px;
}


/*flexbox4*/
.flexbox4 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;

    padding: 10px;
}

.flexbox4 section{
    /*要素の横幅を領域一杯に等倍*/
    -webkit-flex-grow: 1;
    flex-grow: 0;

    /*sectionの基本css*/
    margin: 10px;
    border-radius: 5px;

    /* flexbox.sectionの横幅 */
    -webkit-flex-basis: 100%;
    flex-basis: 100%; 
}

/*flexbox5*/
.flexbox5 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: center;
    justify-content: center;
    
    /*垂直真ん中揃えに配置調整*/
    align-items: center;
}

.flexbox5 section{
    /*要素の横幅を領域一杯に等倍*/
    -webkit-flex-grow: 1;
    flex-grow: 0;

    /*sectionの基本css*/
    border-radius: 5px;

    /* flexbox.sectionの横幅 */
    -webkit-flex-basis: 80%;
    flex-basis: 80%; 
}


/*flexbox6*/
.flexbox6 {
    /*flexboxにする*/
    display: -webkit-box; /*flexboxにする for safari ver6.0以前*/
    display: -webkit-flex; /*flexboxにする for safari ver6.1以降*/
    display: flex;

    /*横幅均等に配置調整*/
    -webkit-justify-content: space-between;
    justify-content: space-between;

    padding: 10px;
}

.flexbox6 section{
    /*要素の横幅を領域一杯に等倍*/
    -webkit-flex-grow: 1;
    flex-grow: 0;

    /*sectionの基本css*/
    margin: 10px;
    border-radius: 5px;
    background: #fff;
    padding: 15px;

    /* flexbox.sectionの横幅 */
    -webkit-flex-basis: 30%;
    flex-basis: 30%; 
}

.flexbox6 h1 {
    color: #388E3C;
}

.flexbox6 p{
    margin-top: 10px;
}



/*footer*/
footer {
    background: #388E3C;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 40px 0 20px;
}


/** for mobile **/

@media screen and (max-width: 850px){
    /*flexbox1*/
    .flexbox1 {
        /*width850px以下なら1カラムにする*/
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    
    /*flexbox3*/
    .flexbox3 {
        flex-wrap: wrap;
        padding: 0px;
    }
    
    .flexbox3 .col {
        max-width: 18%;
        padding: 5px;
    }
    
    /*flexbox4*/
    .flexbox4 {
        /*width850px以下なら1カラムにする*/
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    
    
    /*flexbox5*/
    .flexbox5 section{
        /* flexbox.sectionの横幅 */
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }
    
    
    /*flexbox6*/
    .flexbox6 {
        /*width850px以下なら1カラムにする*/
        -webkit-flex-direction: column;
        flex-direction: column;
        
        padding: 0;
    }
    
    .flexbox6 section{
        /*要素の横幅を領域一杯に等倍*/
        -webkit-flex-grow: 1;
        flex-grow: 0;

        /*sectionの基本css*/
        margin: 10px auto;
        border-radius: 5px;
        background: #fff;
        padding: 0px 0px 15px;

        /* flexbox.sectionの横幅 */
        -webkit-flex-basis: 30%;
        flex-basis: 30%;
    }

}

@media screen and (max-width: 950px){
    /*flexbox5*/
    .flexbox5 {
        /*width850px以下なら1カラムにする*/
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}