/* ************************************* */
/* 初期化 */
/* ************************************* */
* {
    box-sizing: border-box;
    /* font-family: "Noto Sans JP", serif; */
    margin: 0;
    padding: 0;
}

/* ************************************* */
/* メインメッセージコンテナ */
/*  */
/* ************************************* */
.main_message_contaier {
    margin-bottom: 10vh;
    margin-top: 20vh;
    /* background-color: rgb(9, 152, 152); */
    max-width: 40%;
}

.main_text_box {
    align-items: baseline;
    background-color: rgb(9, 152, 152);
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    text-align: center;
}

.main_text_box h3{
    font-size: min(1.8vw, 2rem);
    /* font-size: 2rem; */
}

.main_text_box p{
    font-size: 1rem;
}

.main_news_head_year{
    border: 1px solid  rgb(9, 152, 152);
    font-size: 1.2rem;
    font-weight: 400;
    padding: 0.5rem;
}

/* ************************************* */
/* サブメッセージコンテナ */
/* サブメッセージの表示に利用 */
/* ************************************* */
.sub_text_message_contaier {
    margin-bottom: 5vh;
    margin-top: 5vh;
    text-align: center;
    width: 100%;
}

.sub_text_message_contaier p {
    font-size: 1rem;
    font-weight:200;
}

/* ************************************* */
/* メインニュースエリア */
/* メインニュースとメッセージとメイングリッド */
/* ************************************* */
.main_flex_contaier {
    align-items: center;
    display: flex;
    justify-content: center;
    /* background-color: aqua; */
}

.main_news_area {
    column-gap: 10px;
    /* width: 100%; */
    display: grid;
    grid-template:
        "mbox4 mbox4" 5vh
        "mbox1 mbox2" 100px
        "mbox3 mbox2" 28vh /
        30vw 45vw;
    row-gap: 10px;
}

.main_news_box1 {
    align-items: baseline;
    border-bottom: 1px solid green;
    display: flex;
    grid-area: mbox1;
    justify-content: left;
    padding: min(1rem,3vw);
}

.main_news_box2 {
    display: grid;
    grid-area: mbox2;
    justify-content: right;
}

.main_news_box3 {
    display: grid;
    /* font-size: 0.9rem; */
    font-size: min(1vw, 1.3rem);
    grid-area: mbox3;
    text-align: center;
    line-height: min(1.8rem,5vw);
}

.main_news_box4 {
    align-items: center;
    display: flex;
    grid-area: mbox4;
    justify-content: end;
}

.main_news_head_text {
    color: rgb(6, 115, 79);
    font-size: 3rem;
    font-weight: 500;
    margin-left: 1rem;
}

.main_news_button_area {
    align-items: center;
    background-color: rgb(1, 26, 39);
    color: white;
    display: grid;
    height: min(3rem,3vw);
    min-width: 80%;
}

.news_mark{
    background-color: rgb(15, 203, 175);
    border-radius: 3px;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
}

.main_news_bottom_text{
    font-size: min(1.2rem,1vw);
    font-weight: 400;
    margin-left: 2rem;
}

.news_main_image_area{
   height: auto;
   width: 40vw;
   object-fit: cover;
}

/* ************************************* */
/* ニュース一覧エリア */
/* ニュースとメッセージとメイングリッド */
/* ************************************* */
.newslist_flex_contaier {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 5vh;
}

.newslist_grid_area {
    column-gap: 10px;
    display: grid;
    grid-template:
        "box1 box2 box3" auto
        "box4 box5 box6" auto /
        25vw 25vw 25vw;
    row-gap: 10px;
}

.newslist_box1 {
    background-image: linear-gradient(90deg, #b9f6ff, #cbf6ff);
    grid-area: box1;
}

.newslist_box2 {
    background-image: linear-gradient(90deg, #b9f6ff, #cbf6ff);
    grid-area: box2;
}

.newslist_box3 {
    background-image: linear-gradient(90deg, #b9f6ff, #cbf6ff);
    grid-area: box3;
}

.newslist_box4 {
    background-image: linear-gradient(90deg, #b9f6ff, #cbf6ff);
    grid-area: box4;
}

.newslist_box5 {
    background-image: linear-gradient(90deg, #b9f6ff, #cbf6ff);
    grid-area: box5;
}

.newslist_box6 {
    background-image: linear-gradient(90deg, #b9f6ff, #cbf6ff);
    grid-area: box6;
}

/* ニュース詳細エリア */
.newslist_content {
    align-items: start;
    display: flex;
    justify-content: space-between;
    margin: 0.8rem;
    text-align: center;
}

.newslist_info_box{
    background-color: black;
    color: white;
    font-size: 1rem;
    padding: 0.3rem;
}

.newslist_head_contaier{
    display: flex;
    justify-content: left;
}

.newslist_category_box{
    /* background-color: rgb(15, 203, 175); */
    color: white;
    font-size: 1rem;
    padding: 0.3rem;
    border-radius: 5px;
    margin-left: 0.5rem;
}

.newslist_color_orange{
    background-color: rgb(237, 170, 55);
}

.newslist_color_green{
    background-color: rgb(15, 203, 175);
}

.newslist_text_area {
    padding-left: 0.5rem;
    /* max-width: 60%; */
    text-align: left;
    /* font-size: 1rem; */
    font-size: min(0.8vw, 1.2rem);
}

.newslist_image_area {
    background-color: white;
    min-width: 150px;
    min-height: 120px;
}

.newslist_image_area img{
    padding: 0.5rem;
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
}

.newslist_date_text{
    font-weight: 500;
    /* font-size: 1.3rem; */
    font-size: min(1.2vw, 1.3rem);
}

/* ************************************* */
/* モバイル対応領域 */
/* ************************************* */
@media screen and (max-width: 720px) {

    .main_message_contaier {
        margin-bottom: 5vh;
    }

    .main_message_contaier {
        max-width: 90%;
    }

    .main_text_box h3{
        font-size: 1.2rem;
    }
    
    .main_text_box p{
        font-size: 0.8rem;
    }

    .main_news_area {
        column-gap: 0px;
        display: grid;
        grid-template:
            "mbox1" auto 
            "mbox3" auto
            "mbox2" auto
            "mbox4" auto /
            90vw;
        row-gap: 10px;
    }

    .news_main_image_area{
        height: auto;
        margin-top: 5vh;
        width: 90vw;
     }

    .newslist_grid_area {
        column-gap: 10px;
        display: grid;
        grid-template:
            "box1" auto
            "box2" auto
            "box3" auto
            "box4" auto
            "box5" auto
            "box6" auto /
            90vw;
        row-gap: 10px;
    }

    .main_news_box3 {
        font-size: 0.8rem;
    }

    .main_news_box4 {
        justify-content: center;
        display: inline-block;
        text-align: center;
    }

    .news_mark{
        font-size: 0.8rem;
    }
    
    .main_news_bottom_text{
        font-size: 1rem;
        margin-left: 2rem;
    }

    .main_news_button_area {
        height: 10vw;
        min-width: 80%;
        margin: 1rem;
    }

    .sub_text_message_contaier {
        margin-top: 5vh;
    }

    .newslist_content {
        margin-top: 1rem;
        margin-left: 0.3rem;
        margin-right: 0.3rem;
    }

    .newslist_text_area {
        padding: 0.3rem;
        text-align: left;
        font-size: 0.8rem;
    }

    .newslist_date_text{
        font-weight: 500;
        font-size: 1rem;
    }
}