@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: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;transition:0.3s;}
.header_menu_index a:hover{transform:scale(1.05); }
.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;
    transition: 0.13s;
}
.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;transition:0.5s;}
.header_menu_sns svg{ width:95%; fill:#ccc;transition:0.5s;}
.header_menu_sns:hover{ transform:translateY(-5%); }
.header_menu_sns li:hover{ transform:translateY(-5%); }
.header_menu_sns li:hover svg{ fill:#666;}

/*ニュース*/
#news{text-align:center;}
#news::before{content:""; display:block; height:15vh;}
#news::after{content:""; display:block; height:20vh;}
#news h1{text-align:center; margin-bottom:0;line-height:1.0;}
#news p{text-align:center; margin-top:0;}
#news ul{list-style:none; padding:0; text-align:center; }
.news_block li{border-bottom:1px dashed #999;}
.news_block li:first-child{border-top:1px solid #999;}
.news_block li:last-child{border-bottom:1px solid #999;} 
.news_block li:nth-child(n+6){display:none;}
#news article a { display: flex; width: 100%; text-decoration: none; color: #999;}
.news_block div{ margin:2vh 0.5vw; text-align:left; }
.news_block li:hover .news_time,
.news_block li:hover .news_category,
.news_block li:hover .news_title{color:#ccc;}
.news_time { min-width: 80px; }
.news_category { min-width: 60px; width: auto; text-align:center; background-color:#f2f2f2; }
.news_category_pressrelease { min-width: 60px; width: auto; color:rgba(255,128,0,0.5); }
.news_category_info { min-width: 60px; width: auto; color:rgba(255,0,255,1);}
.news_title {
    min-width: 0;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news_view {display:inline-block; width:100px; border:1px solid #ccc; padding:3px; box-sizing:border-box; text-decoration:none;transition:0.3s;}
.news_view:hover {color:#999; border-color:#999; transform:scale(1.05); }

/*ギャラリー*/
#gallery { width: 100%; box-sizing: border-box; text-align:center;}
#gallery::after{content:""; display:block; height:20vh;}
#gallery h1{text-align:center; margin-bottom:0;line-height:1.0;}
#gallery p{text-align:center; margin-top:0;}
.gallery_list_container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,auto);
    gap: 2vh;
}
.gallery_list{ width:100%; aspect-ratio:1/1;}
.gallery_list img{ width:100%; height:100%; object-fit:cover;}
.gallery_view {
    display: inline-block;
    width: 100px;
    border: 1px solid #ccc;
    padding: 3px;
    box-sizing: border-box;
    text-decoration: none;
    margin: 2vh 0;
    transition: 0.3s;
}
.gallery_view:hover {
    color: #999;
    border-color: #999;
    transform: scale(1.05);
    
}


#activities {text-align: center;}
#activities h1{text-align:center; margin-bottom:0;line-height:1.0;}
.activities_txt{width:430px; text-align:left; margin-top:0; margin-left:auto; margin-right:auto ;}
.activities_txt a{text-decoration:none;}
.activities_txt a:hover{text-decoration:underline; color:brown;}
.activities_txt_note {text-align:left; font-size:10px;}

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