@media print,
screen {

    /* ======================================================
    パソコン用
====================================================== */

    #hero {
        height: 100vh;
        width: 100%;
        display: grid;
        grid-template-columns: auto 960px auto;
        align-content: center;
        background-color: black;
    }

    /* IE11 */
    _:-ms-lang(x)::-ms-backdrop,
    #hero {
        display: block;
        height: 100vh;
        text-align: center;
    }




    .main-text {
        z-index: 5;
        width: 960px;
        grid-column-start: 2;
        position: relative
    }

    .main-text h1 {
        color: white;
        margin-bottom: 20px;
        font-weight: normal;
        font-size: 45px;
        font-family: 'Noto Serif JP', serif;
    }

    .main-text p {
        color: white;
        margin-bottom: 40px;
        font-size: 20px;
    }

    .main-button {
        color: white;
        padding: 15px;
        display: inline-block;
        text-decoration: none;
        font-size: 20px;
        font-weight: normal;
        border-radius: 4px;
        border: 1px solid white;
    }

    .main-button:hover {
        background-color: white;
        text-decoration: none;
        color: #4DA635;
    }
    
      /* IE11 */
    _:-ms-lang(x)::-ms-backdrop,
     .main-text {
        width: auto;
           margin: 0;
 position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
 transform: translateY(-50%);
        position: relative;
    }


    /* ======================================================
    メインアイコン
====================================================== */

    .slogan-main {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 20px;
        color: #4ba634;
    }

    .slogan-main p {
        text-align: left;
        font-weight: normal;
        padding: 20px 0;
    }



    .top-article {
        margin-bottom: 60px;
        display: grid;
        justify-content: center;
        grid-template-columns: 300px 300px 300px;
        padding: 0 30px;
        grid-gap: 20px;
    }


    @media only screen and (max-width:1000px) {
        .top-article {
            grid-template-columns: 300px 300px;
        }
    }

    _:-ms-lang(x)::-ms-backdrop,
    .top-article {
        display: none;
    }



    .top-article h1 {
        font-size: 30px;
        font-weight: bold;
        color: white;
        margin-bottom: 0;

    }

    .top-article-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
    }

    .top-article p {
        margin-top: 15px;
        font-size: 13px;
        text-align: justify;
        color: #959595;
    }

    .top-article a:hover {
        text-decoration: none;

    }

    .top-article div {
        z-index: 5;
    }

    .cat-business {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(/en/images/business-sp.jpg);
        background-size: cover;
    }

    .cat-philosophy {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(/en/images/values-thumb.jpg);
        background-size: cover;
    }

    .cat-csr {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url(/en/images/privacy-sp.jpg);
        background-size: cover;
    }

    /* ======================================================
    ニュースリスト
====================================================== */

    .notice {
        text-align: center;
        background-color: lightyellow;
        padding: 15px 20px;
        display: inline-block;
        margin-bottom: 20px
    }

    .notice h1 {
        font-size: 15px;
        color: black;
        margin-bottom: 15px;
        font-weight: normal;
    }

    .notice h2 {
        font-size: 20px;
        color: black;
        margin-bottom: 10px;
        font-weight: bold;
    }




    #top-news.content {
        text-align: center;
        width: 960px;
        margin: 0 auto;
        border-top: 1px solid #d9d9d9;
    }

    .news-list ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30px 50px;
        justify-content: center;
        margin-bottom: 40px;
    }

    .news-list ul h5 {
        display: block;
        font-size: 13px;
    }


    .news-list ul a {
        color: #1E90FF;
        text-decoration: none;
    }

    .news-list ul a:hover {
        text-decoration: underline;
    }

}

@media only screen and (max-width: 1000px) {

    #hero {
        grid-template-columns: auto;
        align-content: center;
        height: 60vw;
    }

    .main-text {
        padding: 50px
    }

    .main-text h1 {
        font-size: 37px;
    }

    .main-text p {
        color: white;
        font-weight: normal;
        margin-bottom: 18px;
        font-size: 15px;
    }

    #top-news.content {
        width: auto;
        margin: 0 auto;
        border-top: none;
        background-color: #f9f9f9;
    }


}

@media only screen and (max-width: 720px) {

    /* ======================================================
    モバイルスクリーン
====================================================== */

    #hero {
        height: 400px;
        display: flex;
        align-items: center;
    }


    .main-text {
        text-align: center;
    }

    .main-text p {
        font-size: 15px;
    }

    .main-button {
        font-size: 15px;
    }

    .slogan-main {
        font-size: 30px;

    }

    .notice {
        text-align: left;
        background-color: transparent;
        padding: 0;
        display: block;
        margin-bottom: 20px
    }

    .notice h1 {
        border-left: #4ba634 1px solid;
        font-size: 15px;
        color: #4ba634;
        padding: 2px 10px;
        margin-bottom: 15px;
        font-weight: normal;
    }

    .notice h2 {
        font-size: 20px;
        color: black;
        margin-bottom: 10px;
        font-weight: bold;
    }


    #top-news.content {
        text-align: left;
    }

    .news-list ul {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }

    .news-list ul h5 {
        display: block;
        margin-right: none;
    }


    .top-article {
        grid-template-columns: 1fr;
    }

    .top-article-wrapper {
        height: 150px;
    }


    .top-article p {
        display: none;
    }


}

@media only screen and (max-width: 600px) {
    .slogan-main {
        font-size: 25px;
    }
}

@media only screen and (max-width: 360px) {
    .main-text h1 {
        font-size: 30px;
    }
}