@charset "UTF-8";

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
    min-width:344px;
    margin: 0;
    padding: 0;
    font-size: 13px; 
    overflow-x: hidden;
}

body {
    font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; /*フォント種類*/
    -webkit-text-size-adjust: none;
    letter-spacing: 0.05em;
    background: #fff; /*背景色*/
    color: #999; /*全体の文字色*/
    line-height: 2; /*行間*/
}

main { max-width:1000px; margin:0 auto; width:100%;}
main::after{content:""; display:block; height:300px;}

/*リセット*/
figure { margin: 0;}
dd {  margin: 0;}
nav { margin: 0; padding: 0;}
table { border-collapse: collapse;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
video {max-width: 100%;}
iframe {width: 100%;}
ul, ol {margin-bottom: 30px;}
a {color: #ccc; transition: 0.3s;}
a:hover {color: #666; transition: 0.3s;}
section {padding: 5%;}

/* ヘッダーの設定 */
/* #region ヘッダー*/
.header_logo { font-size: 9cqw; text-align: center; margin: 10% 0 auto;}
.header_logo :hover{color:#ccc;}
.header_logo a { text-decoration: none; color: #999; }
.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;}

/*#endregion*/



/*ギャラリー*/
#grid-layout { width: 100%; box-sizing: border-box; padding:5%;}
#grid-layout::after{content:""; display:block; height:20vh;}
#grid-layout h1{text-align:center; margin-bottom:0;line-height:1.0;}
#grid-layout p{text-align:center;}

.grid-list {list-style:none; padding-left:0;}
.grid-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,auto);
    gap: 2vh;
}
.grid-list ul{ width:100%; aspect-ratio:1/1;}

.grid-list ul img{ width:100%; height:100%; object-fit:cover;}



/* [もっとみる]の設定 */
.see-more {
    text-align:center;
    display: inline-block;
    width: 100px;
    border: 1px solid #ccc;
    padding: 3px;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
}

.see-more:hover { color: #999; border-color: #999; transform: scale(1.05); }