@charset "UTF-8";

.head_supplement{font-size:0.7em;}


/*ヘッダー*/
.header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.header_container {

    position: relative;
    display: flex;
    justify-content: center;
}
.header_container img {
    max-width: 100%;
    max-height: 100vh;
    display: block;

    mask-image:linear-gradient(to bottom, transparent 0%, black 0, black 30%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 0, black 30%, transparent 100%);    
}
.header_menu {
    width: 25%;
    height: 70%;
    position: absolute;
    container-type: inline-size;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(221,200,179, 0.3);
    border-radius: 3px;
    border:1px solid transparent;
    transition:background-color 0.3s ease,border-color 0.45s ease 0.15s;
}
.header_menu p { font-size:9cqw; text-align:center; margin:10% 0 auto;}
.header_menu:hover {background-color:rgba(250, 249, 248, 0.9);border-color:#e0e0e0; }
.header_menu_index {
    width: 85cqw;
    height: 85cqw;
    position: absolute;
    display: block;
    top: 18%;
    left: 7.5%;
    list-style: none;
    padding: 0px;
}
.header_menu_index li { font-size: 10cqw; text-align:center; margin:3% 3% 0;}
.header_menu_index a {display:inline-block; text-decoration:none;}
.header_menu_index a:hover{transform:scale(1.05); transition:0.3s;}
.header_menu_sns{
    width:90%;
    height:auto;
    position:absolute;
    display:flex;
    justify-content:space-around;
    top:70.5%;
    left:5%;
    list-style:none;
    padding:0;
}
.header_menu_sns::before {
    width: 90%;
    height: 30%;
    content: "";
    display:block;
    position: absolute;
    top: -30%;
    left: 5%;
}
.header_menu_sns ul{ width:auto; height:auto; }
.header_menu_sns li{ width:25%; height:20%; margin:0; padding:2% 0;}
.header_menu_sns svg{ width:95%; fill:#ccc;}
.header_menu_sns:hover{ transform:translateY(-5%); transition:0.13s;}
.header_menu_sns li:hover{ transform:translateY(-5%); transition:0.5s;}
.header_menu_sns li:hover svg{ fill:#666; transition:0.5s; }

/*トピックス*/





#topics { width: 100%; box-sizing: border-box; text-align:center;}
#topics::after{content:""; display:block; height:20vh;}
#topics h1{text-align:center; margin-bottom:10px;line-height:1.0;}
#topics p{text-align:center; margin-top:0;}
.topics_list_container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,auto);
    gap: 2vh;
}
.topics_list{ min-width:100%; text-align:left;}
.topics_list img{ width:100%; height:100%; }

.topics_list a{ text-decoration:none;display: flex;flex-direction: column;height:100%;}
.topics_list a:hover { color:#ccc;}

.news_title {
    flex-grow: 1;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-all;
    color: #999;
}

.topics_list article {height:100%; display:flex;}
.news_time {
    
    border-bottom: 1px solid #ccc;
    margin-top:auto;
    padding-top: 10px;
}



footer {
    font-size: 0.7rem; /*文字サイズ*/
    text-align: center; /*内容をセンタリング*/
    padding: 20px; /*ボックス内の余白*/
}