/* CSS Document */

/* -------- Lodingページ --------- */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 左右の障子共通のスタイル --- */
.shoji-door {
    position: absolute;
    top: 0;
    width: 50%; /* 画面の半分ずつの幅 */
    height: 100%;
    background-color: #fcfaf2; /* 障子紙の温かみのある白 */
    
    /* 障子の格子模様 */
    background-image: 
        linear-gradient(90deg, #3a2412 5px, transparent 10px), /* 縦の木枠 */
        linear-gradient(#3a2412 5px, transparent 10px);        /* 横の木枠 */
    
    /* 格子のサイズ（幅100px / 高さ140px に拡大して窓を広く変更） */
    background-size: 200px 280px; 
    
    /* 外側の太い木枠（上下左右の縁取り） */
    border: 15px solid #2b1a0e; 
    box-sizing: border-box;
    
    /* 開く時の動き */
    transition: transform 3.0s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0 !important;
    padding: 0 !important;
} 

/* 左側の障子 */
.shoji-left {
    left: 0;
    transform-origin: left center;
    border-right: 10px solid #2b1a0e; /* 中央の合わせ目は細く */
}

/* 右側の障子 */
.shoji-right {
    right: 0;
    transform-origin: right center;
    border-left: 6px solid #2b1a0e; /* 中央の合わせ目は細く */
}

/* --- 読み込み完了時（loaded）の障子の動き --- */
#loading.loaded .shoji-left {
    transform: translateX(-120%); /* 左に隠れる */
}

#loading.loaded .shoji-right {
    transform: translateX(120%); /* 右に隠れる */
}

/* --- 中央のコンテンツ（カチンコ＆文字）のコンテナ --- */
.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000; /* 障子よりも手前に表示 */
    transition: opacity 0.5s ease; /* 障子が開く前にフワッと消す用 */
}

/* 障子が開くとき、文字とカチンコは消す */
#loading.loaded .loading-content {
    opacity: 0;
}
/* --- カチンコのスタイル（調整版） --- */
.clapperboard {
    position: relative;
    width: 120px;
    height: 95px;
    margin-bottom: 25px;
    z-index: 1;
}
.board-body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #2b2b2b;
    border: 3px solid #d4af37;
    border-radius: 0 0 4px 4px;
    z-index: 1;
    box-sizing: border-box;
}
.board-top {
    position: absolute;
    top: 5px; 
    left: -2px;
    width: calc(100% + 4px);
    height: 22px;
    background: linear-gradient(45deg, #2b2b2b 25%, #fff 25%, #fff 50%, #2b2b2b 50%, #2b2b2b 75%, #fff 75%, #fff 100%);
    background-size: 20px 20px;
    border: 3px solid #d4af37;
    border-radius: 4px 4px 0 0;
    transform-origin: bottom left;
    animation: clap 1.2s ease-in-out infinite alternate;
    z-index: 2;
    box-sizing: border-box;
}
@keyframes clap {
    0% { transform: rotate(-22deg); }
    30% { transform: rotate(-22deg); }
    70% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* Loadingテキストのスタイル */
.loading-content p {
    color: #d4af37; /* 障子の木枠に合わせた深い焦げ茶色 */
    font-size: 30px; 
    font-weight: bold;
    letter-spacing: 0.15em;
    margin: 0;
    font-family: serif;
}

/* -------- 基本ページ設定 --------- */

/* * {
    margin: 5px;
    padding: 5px;
} */
main {
    margin: 5px;
    padding: 5px; 
    margin-bottom: 100px;
}


body {
    background-image: url("./img/kurowashi02.png");
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f5f2eb;
    margin: 0;
    padding: 0;
    color: #333333;

}

a {
    color: white;
}

/* -------- ヘッダー --------- */

#imageheader img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 1100px) {
    #imageheader img {
        display: block;
        margin: 0 auto;
        width: 100%;       
        height: auto;      
        min-height: 350px;
        object-fit: cover; 
    }
}

/* -------- フッター --------- */
#imagefooter img {
    width: 100%;
    max-height: 400px;    
    object-fit: cover; 
    display: block;
}

@media screen and (max-width: 1100px) {
    #imagefooter img {
        display: block;
        margin: 0 auto;
        width: 100%;       
        height: auto;     
        min-height: 250px; 
        object-fit: cover; 
    }
}



/* -------- フォント --------- */

.klee-one-semibold {
    font-family: "Klee One", cursive;
    font-weight: 600;
    font-style: normal;
}

.zen-antique-regular {
    font-family: "Zen Antique", serif;
    font-weight: 400;
    font-style: normal;
}  

.noto-serif-jp-uniquifier {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}
  
/* -------- img --------- */
.contets_img {
    display: flex;            
    justify-content: center;  
    flex-wrap: wrap;   
    gap: 15px;              
    padding: 20px;

}

.contents_img img {
    width: 300px; 
    height: auto;
}

.img-group {
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;      
    justify-content: center; 
    max-width: 1800px;
    margin: 0 auto; 
  }
  
  .img-group img {
    width: calc((100% - (10px * 4)) / 5);
    height: auto;
    object-fit: cover;
  }
  
  @media (max-width: 1100px) {
    .img-group {
      max-width: 90%;
    }
  
    .img-group img {
      width: 80%;
    }
  }

/* -------- バー --------- */

.top-bar {
    position: absolute; 
    top: 0;   
    left: 0;   
    width: 100%;       
    z-index: 10;      
    background-color: rgba(0, 0, 0, 0.5);
}

.top-bar-inner {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 15px 30px;
}

.top-bar-item {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-family: "Noto Serif JP", serif;

}

.top-bar-item:hover {
    text-decoration: underline;
    opacity: 0.8;
}


/* -------- メインコンテンツ --------- */

#text {
    padding: 20px;
    display: flex;
    justify-content: center; 
}

.text1, .text2 {
    color: white;
    font-family: "Klee One", cursive;
    display: block; 
    font-size: clamp(12px, 2.5vw, 18px);
    margin: 0 auto; 
    max-width: 700px;
    width: 90%;
    text-align: center; 
}


@media screen and (max-width: 1100px) {
    .text1, .text2 {
        text-align: center; 
    }
    /* 💡 spanで囲った部分をひとかたまりにする */
    .text1 span, .text2 span {
        display: inline-block;
    }
}

.music_title1 {
    color: white;
    margin: 20px;
    text-align: center;
    font-family: "Zen Antique", serif;
    font-size: clamp(25px, 2.5vw, 50px);
    letter-spacing: 0.15em;
    text-shadow: 0px 0px 15px rgba(250, 124, 143, 0.8); 

}

.music_title2 {
    color: white;
    margin: 20px;
    text-align: center;
    font-family: "Zen Antique", serif;
    font-size: clamp(25px, 2.5vw, 50px);
    letter-spacing: 0.15em;
    text-shadow: 0px 0px 15px rgba(109, 200, 231, 0.8); 
}

@media screen and (max-width: 1100px) {
    .music_title1 , .music_title2 {
        margin: 0px; 
    }
}

.sub_title {
    color: white;
    margin: 20px;
    text-align: center;
    font-family: "Zen Antique", serif;
    letter-spacing: 0.15em;
    font-size: clamp(12px, 2.5vw, 18px);

}

@media screen and (max-width: 1100px) {
    .sub_title {
        margin: 0px; 
    }
}