@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; }

/*ギャラリー*/
#gallery { width: 100%; box-sizing: border-box;}
#gallery::after{content:""; display:block; height:20vh;}
#gallery h1{text-align:center; margin-bottom:0;line-height:1.0;}
#gallery p{text-align:center;}
.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;}

#portfolio {width: 100%; box-sizing: border-box;}
#portfolio::after{content:""; display:block; height:20vh;}
#portfolio h1{text-align:center; margin-bottom:0;line-height:1.0;}
#portfolio p{text-align:center;}

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