/* 🌟 全体のスタイル */
@font-face {
    font-family: 'Basilia Compress D';
    src: url('./fonts/BasiliaComD-Medi.otf') format('opentype'); /* フォント名を修正 */
    font-weight: normal;
    font-style: normal;
}
/*reset css*/
body,h1,h2,h3,h4,p,ul,li,a,dl,dt,dd,table,tr,th,td,span,figcaption{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    outline: none;
    box-sizing: border-box;
  }
  button,input,select,textarea{
    background-color: unset;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  div,section,article,figure,picture{
    box-sizing: border-box;
    margin: 0;
    display: block;
    padding: 0;
  }
/* Source Han Serif Heavy
font-family: "source-han-serif-japanese", serif;
font-weight: 900;
font-style: normal; */

body {
    font-family: 'Basilia Compress D', 'source-han-serif-japanese', 'Arial', sans-serif; /* フォントを追加 */
    text-align: center;
    background-color: #D9D9D9;
    color: #333;
    margin: 0;
    padding: 0;
    position: relative; /* 追加 */
}
html, body {
    overscroll-behavior: none;
  }
/* 英文のフォントをBasilia Compress Dに設定 */
body *:lang(en) {
    font-family: 'Basilia Compress D', sans-serif;
}

/* 🚪 扉ページのデザイン */
#intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #D9D9D9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 9999;
    font-family: 'Basilia Compress D', sans-serif;
    overflow: hidden; /* ノイズエフェクトを表示するために追加 */
}

#intro h1,
.music-toggle button,
#start-btn {
    font-family: 'Basilia Compress D', sans-serif; /* フォントを変更 */
}
.music-toggle button,
#start-btn {
    position: relative;
    z-index: 2;
}
#intro h1 {
    font-size: 48px;
    margin-bottom: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)  translateY(20px);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 100%;
    z-index: 2;
}

.music-toggle,
#start-btn {
    opacity: 0;
    visibility: hidden;
}

.music-toggle {
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.music-toggle-flex {
    display: flex;
    justify-content: center;
}

.music-toggle span {
    display: block; /* 🎧 MUSIC テキストを表示 */
    width: 19px;
    margin: 0 auto;
    /* background: url(images/sound-fb3f489e.svg) no-repeat center center / cover; */
}
.music-toggle span svg {
    width: 100%;
    height: auto;
}
.music-toggle button {
    padding: 4px 16px;
    font-size: 24px;
    border: none; /* 縁を削除 */
    background: none; /* 背景を削除 */
    cursor: pointer;
    border-radius: 0; /* 角丸を削除 */
    position: relative;
    color: #333;
}

.music-toggle button.active::after {
    content: '';
    position: absolute;
    bottom: 17px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #333; /* 棒線を追加 */
}

#start-btn {
    padding: 8px 30px;
    font-size: 40px;
    border: 1px solid rgba(0, 0, 0, 0.505);
    background: rgba(255, 255, 255, 0.407);
    cursor: pointer;
    border-radius: 4px; /* 角丸にする */
    color: #333;
}

#start-btn:hover {
    background: black;
    color: white;
}

#main-content {
    display: none;
}

/* 🚀 KVセクションのスタイル */
#kv {
    position: relative;
    width: 100%;
    height: 95vh; /* 高さを少し縮める */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: url('images/3-1.png') center/cover no-repeat; /* 背景画像を追加 */
    margin-top: 0; /* トップのマージンを無くす */
    font-family: 'Basilia Compress D', sans-serif;
    perspective: 1px; /* パララックス効果を追加 */
    transform-style: preserve-3d; /* パララックス効果を追加 */
    overflow: hidden; /* 追加 */
}

@keyframes kv-effect {
    0%, 100% {
        filter: none;
    }
    50% {
        filter: brightness(1.2) contrast(1.2); /* エフェクトを追加 */
    }
}

.kv-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('images/3-2.png') center/cover no-repeat;
    z-index: -1;
    transform: translateZ(-1px) scale(2); /* パララックス効果を追加 */
    /* animation: kvZoom 20s infinite; ズームエフェクトの時間を変更 */
}

@keyframes kvZoom {
    0% {
        transform: translateZ(-1px) scale(2);
    }
    100% {
        transform: translateZ(-1px) scale(2.5); /* ズームインのみ */
    }
}

@keyframes zoom-in {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes distort {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: skewX(10deg) skewY(10deg); /* 歪みエフェクトを追加 */
    }
}

/* 📜 縦スクロールするタイトルを左寄せ */
.scroll-text-wrapper {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    writing-mode: vertical-rl; /* 縦書きにする */
    white-space: nowrap;
}

.scroll-text {
    font-size: 60px;
    font-weight: bold;
    color: white;
    display: inline-block;
    animation: scrollText 10s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* 🔽 SCROLL 矢印アイコンを非表示に */
.scroll-indicator {
    display: none;
}

/* 🎵 音楽ON/OFFボタン */
.music-toggle-elem {
    all: unset; /* すべてのデフォルトスタイルを削除 */
    padding: 0;
    margin: 0;
    background: transparent;
    position: fixed;
    top: 20px;
    right: -30px;
    width: 180px; /* サイズを2倍に変更 */
    /* background: url('images/kamon.png') center/cover no-repeat; */
    font-size: 0; /* フォントサイズを0に設定してテキストを非表示に */
    border: none;
    /* border-radius: 50%; */
    cursor: pointer;
    z-index: 1000;
    transition-duration: 0.1s;
    transition-timing-function: ease;
    /* transition: transform 0.01s ease;  */
    filter: brightness(0.5) contrast(2); /* 明るさとコントラストを調整 */
    text-shadow: none; /* テキストシャドウを削除 */
    /* mix-blend-mode: soft-light;  */
    opacity: 1;
    mix-blend-mode: difference;
    outline: none;
}
.music-toggle-elem-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.music-toggle-elem-img.--img01 {
    opacity: 0.5;
}
.music-toggle-elem-img.--img02 {
    opacity: 0.5;
}
.music-toggle-elem-img.--img03 {
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes vibrate {
    0% { transform: translate(0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(-1px, -1px); }
}

/* 🎞️ ギャラリーセクション */
#gallery {
    overflow: hidden; /* スクロールバーを非表示に */
    /* aspect-ratio: 414 / 896; */
    aspect-ratio: 414 / 500;
    position: relative;
}
#gallery canvas {
    width: 100%;
    height: 100%;
}
.gallery-wrapper {
    display: flex;
    flex-direction: row; /* 横方向に変更 */
    gap: 10px;
    padding: 0 10px;
    animation: scrollGallery 45s linear infinite; /* スクロール速度を45秒に変更 */
}

@keyframes scrollGallery {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.gallery-slider {
    display: flex; /* 変更 */
    flex-direction: row; /* 変更 */
}

.gallery-slider img {
    width: 100%; /* 幅を100%に変更 */
    height: auto; /* 高さを自動に変更 */
    max-height: 100%; /* 最大高さを100%に設定 */
    padding-left: 20px; /* 追加 */
    border-radius: 0; /* border-radiusを削除 */
}

/* <p> 要素のフォントサイズと上下の余白を調整 */
p {
    font-size: 14px; /* フォントサイズを14pxに設定 */
    margin: 20px 0; /* 上下の余白を20pxに設定 */
    max-width: 600px; /* 文字幅を600pxに設定 */
    line-height: 1.8; /* 縦の行間を調整 */
    font-family: "source-han-serif-japanese", serif;
 
}

/* フォームセクションのスタイル */
#form {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding: 20px;
    padding-left: 95px;
    padding-bottom: 80px;
}

#form form {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 0;
    box-sizing: border-box;
    
}

#form form label {
    margin-top: 16px;
    text-align: left; /* 左寄せに配置 */
    font-family: 'Basilia Compress D', sans-serif; /* フォントをBasilia Compress Dに変更 */
    font-size: 24px;
}

#form form input,
#form form select,
#form form textarea {
    width: calc(100%); /* 横を画面からはみ出ないように調整 */
    padding: 16px 8px; /* 縦の余白を広く */
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.342); /* 背景に透明度を追加 */
    box-sizing: border-box;
    font-size: 10px;
    color: #333;
}
option {
    color: #333;
}
.selectbox {
    display: inline-block;
    position: relative;
}
.selectbox::after {
    content: "▼";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* 矢印のクリックを無効化 */
    font-size: 10px;
    color: #333;
}
#form form select[name="attendance"] {
    width: calc(100% - 20px); /* 幅を統一 */
}

#form form textarea[name="message"] {
    height: 150px; /* 高さを200pxに設定 */
}

#form form button {
    margin-top: 24px;
    padding: 24px 20px;
    font-size: 56px;
    border: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    font-family: 'Basilia Compress D', sans-serif; /* フォントを変更 */
    /* mix-blend-mode: color-burn; */
}

#form form button:hover {
    background-color: #555;
}

/* Googleマップの表示サイズを制御 */
iframe {
    margin-top: 8px;
    width: 100%;
    /* max-width: calc(100% - 25px); */
    aspect-ratio: 227/224;
    border: 0;
    filter: grayscale(100%);

}

/* コピーライトのスタイル */
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 24px;
    color: #333;
    z-index: 1000;
    font-family: 'Basilia Compress D', sans-serif;
}

/* ストーリーセクションのスタイル */
#story {
    z-index: 1;
    position: relative;
}
#story h2 {
    font-size: 48px; /* フォントサイズを大きく */
    font-family: 'Basilia Compress D', sans-serif;
    opacity: 0.9;
    padding-left: 94px;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 16px;
}
#story p {
    font-size: 14px; /* フォントサイズを14pxに設定 */
    margin: 0; /* 上下の余白を20pxに設定 */
    max-width: 600px; /* 文字幅を600pxに設定 */
    line-height: 1.8; /* 縦の行間を調整 */
    font-family: "source-han-serif-japanese", serif;
    text-align: left;
    padding: 0 24px 0 94px;
}

/* 縦に配置した文字を追従させるスタイル */
#vertical-text {
    position: fixed;
    top: 0;
    left: 0;
    /* writing-mode: vertical-rl; */
    font-size: 120px;
    color: #fff;
    z-index: 9998;
    white-space: nowrap;
    /* mix-blend-mode: color-burn; */
    mix-blend-mode: difference;
    font-family: 'Basilia Compress D', sans-serif;
    opacity: 1;
    filter: brightness(0.5) contrast(2);
    /* display: flex; */
    /* transform: rotate(90deg); */
    /* transform-origin: left center; */
    /* transform: rotate(90deg); */
}
#vertical-text span {
    display: inline-block;
    /* animation: scroll-vertical 10s linear infinite; */
}
#vertical-text span:nth-of-type(1) {
    animation: slide 80s linear infinite;
}
#vertical-text span:nth-of-type(2) {
    animation: slide 80s linear infinite;
}
#vertical-text svg {
    display: block;
    /* animation: scroll-vertical 10s linear infinite; */
}
#vertical-text svg:nth-of-type(1) {
    animation: slide 30s linear infinite;
}
#vertical-text svg:nth-of-type(2) {
    animation: slide 30s linear infinite;
}
@keyframes slide {
    0% {
      transform: translateY(0%) ;
    }
  
    100% {
        transform: translateY(-100%);
    }
  }
/* & + .cm_linkBtn_slideTxt {
    // margin-left: 2.2rem;
  }
  &:nth-of-type(1) {
    animation: slide 12s linear infinite;
    // animation: loopLeft2 600s linear infinite;

    @media (max-width: 767px){
      animation: slide 350s linear infinite;
      }
    }
    
  &:nth-of-type(2) {
    animation: slide 12s linear infinite;
    position: relative;
    // animation: anim--second 600s -300s linear infinite;

      @media (max-width: 767px){
        animation: slide 350s -175s linear infinite;
    }
  } */
@keyframes scroll-vertical {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes verticalScroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* ノイズエフェクトのスタイル */
#noise-effect,
#noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0.35; /* 透明度を調整 */
    pointer-events: none; 
    mix-blend-mode: soft-light;
}

#workspace {
    position: relative;
    display: inline-block;
}

#workspace::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid black; /* ボーダーを追加 */
    pointer-events: none; /* ボーダーがクリックを妨げないようにする */
}

h3 {
    font-family: "source-han-serif-japanese", serif;
    margin: 0;
}
p + h3 {
    margin-top: 32px;
}
h3 + p {
    margin-top: 8px;
    margin-bottom: 0;
}

#details {
    text-align: left; /* 左寄せに設定 */
    padding-left: 94px; /* 左の余白を追加 */
    padding-right: 24px;
}
#details a {
    opacity: 0.8;
    color: inherit;
    text-decoration: underline;
}
.date-text {
    font-family: 'Basilia Compress D', sans-serif; /* フォントをBasilia Compress Dに変更 */
    font-size:60px ;
    line-height: 1;
}

.kamon-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    mix-blend-mode: exclusion; /* 除外効果を追加 */
    margin-bottom: 24px;
}

.kamon {
    width: 80px;
    /* animation: rotateKamon 5s linear infinite;  */
    margin-bottom: 24px;
    mix-blend-mode: difference;
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.kamon img {
    width: 100%;
    height: auto;
}
@keyframes rotateKamon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


#follow-button:hover {
    transform: translateY(-50%) scale(1.1);
}

.thanks {
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    font-family: "source-han-serif-japanese", serif;;
    
}
.thanks .en {
    font-family: 'Basilia Compress D', sans-serif;
    font-size: 56px;
    text-align: center;
    margin: 0;
}

/* const intro = document.getElementById("intro");
const mainContent = document.getElementById("main-content");
const startBtn = document.getElementById("start-btn");
const musicOnBtn = document.getElementById("music-on");
const musicOffBtn = document.getElementById("music-off");
const bgMusic = document.getElementById("bg-music"); */
#intro {
    /* display: none !important; */
}
.form-note {
    font-size: 9px;
    margin: 0;
    text-align: left;
    
}

.gl_splash_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.nameSpace1 {
    display: inline-block;
    margin-right: 56px;
}
.nameSpace2 {
    display: inline-block;
    margin-right: 56px;
}