:root{
    --bg-color: #134f4d7f;
    --font-color: aliceblue;
    --container-size:1400px;

}

html, body {
    font-family: aralet-n, sans-serif;
    font-weight: 300;
    font-style: normal; 
    overflow-x: hidden; /* 📌 横スクロール禁止 */
    overflow-y: auto; /* 📌 縦スクロール有効化 */
}

.video-text {
    font-family: sans-serif;
}

.site-title {
    font-size: clamp(1.125rem, 0.779rem + 1.54vw, 2.625rem);
    font-weight: 600;
    padding-top: clamp(0.625rem, 0.51rem + 0.51vw, 1.125rem);
    padding-bottom: clamp(0.625rem, 0.51rem + 0.51vw, 1.125rem); 
    padding-left: clamp(0.625rem, 0.51rem + 0.51vw, 1.125rem);
    background-color: var(--bg-color);
    color: aliceblue;   
}

/* 人とAIの音楽ユニット　*/
.sub-note {
  font-size: 0.5em;       /* 親（h1）の50%のサイズ */
  margin-left: 0.5em;     /* 左に余白をあける */
  color: #ccc;            /* 少し淡い色にして注釈っぽく */
  font-weight: normal;    /* h1の太字を解除 */
}
/* ここまで　*/

#lynk_back .back_img {
    background-color: black;
    background-size: cover;
  width: 100vw;
  height: 100%;
  position: fixed;
  z-index: -1000;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
      opacity: 0; /* 完全に透明 */
    }
    to {
      opacity: 1; /* 完全に表示 */
    }
  }
   
  /* 初期状態を透明に設定 */
  .fade-in {
    animation: fadeIn 1.5s ease-in-out; /* 1.5秒かけてフェードイン */
    animation-fill-mode: forwards; /* フェードイン完了後に状態を維持 */
    background-color: black;
    opacity: 0; /* 初期状態は透明 */
  }

  /*ハンバーガーメニュー専用CSS*/
.hamburger{
    width: 40px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}
.hamburger-line{
    display: block;
    width: 26px;
    height: 3px;
    background-color: aliceblue;
    position: relative;
}
.hamburger-line::before{
    content: "";
    display: block;
    width: 26px;
    height: 3px;
   background-color: aliceblue;
    position: absolute;
    top: -10px;
    left: 0;
    transition: 0.3s; /*ゆっくり　「✖️」　になる*/
}

.hamburger-line::after{
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    background-color: aliceblue;
    position: absolute;
    top: 10px;
    left: 0;
    transition: 0.3s; /*ゆっくり　「✖️」　になる*/
}

/*上のhamburger-lineは、「active」がついていない時。下のは「active」 がついた時。クリックしたら、３本線が「✖️」になる*/
.hamburger.active .hamburger-line{
    background: transparent;
}
.hamburger.active .hamburger-line::before{
    top: 0;
    transform: rotate(45deg);
}
.hamburger.active .hamburger-line::after{
    top: 0;
    transform: rotate(-45deg);
}

/* このリンクだけに適用 */
.ext-link {
  color:#ffffd4e5;
          /* 視認しやすい赤 */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ext-link:hover,
.ext-link:focus {
  text-decoration-thickness: 2px;
}
  /* メニュー全体のスタイル（黒枠で統一） */
.sub-menu {
   position: fixed;
    height: 24rem;
    top: 2%;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7); /* すべてのボタンを黒枠の中に統一 */
    border-radius: 0.2rem;
    padding: 0.7rem;
    z-index: 1000;
    transform: translateY(-110%);
    transition: transform 0.3s ease;
}

.sub-menu.active{
    transform: translateY(0);
}

/* リストのドットを消す */
.sub-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

/* ボタンを統一デザインで設定 */
.sub-menu li {
    margin: 0.5rem 0; /* ボタン間の余白 */
    text-align: center;
}

/* ボタンのリンクデザイン */
.sub-menu a {
    display: block;
    width: 4.5rem; /* ボタンの幅を統一 */
    text-decoration: none;
    font-size: 1rem;
    color: #fff;
    padding: 1rem 0;
    background: transparent; /* 黒枠内に統一されるので透明に */
    border-radius: 0.1rem;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    text-align: center;
}

/* ホバー時のデザイン */
.sub-menu a:hover {
    background: rgba(255, 255, 255, 0.8);
    color: black;
}

/* main */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(2.813rem, 2.277rem + 2.38vw, 4.063rem);
}

.toptext {
    color: var(--font-color);
   .container{
    max-width: 1400px;
    min-width: 360px;
        margin-left: auto;
        margin-right: auto;
        height: 100%;
    padding:clamp(2.5rem, 1.923rem + 2.56vw, 5rem) clamp(2.5rem, 1.923rem + 2.56vw, 5rem);
   }
   .toptext-area {
    width: 1920px;
    background-color: var(--bg-color);
    padding:clamp(0.938rem, 0.729rem + 0.93vw, 1.875rem) clamp(0.938rem, 0.729rem + 0.93vw, 1.875rem);
   }
   
   h2 {
    font-size: clamp(1rem, 0.712rem + 1.28vw, 2.25rem);
    text-align: center;
   }
   .text {
    font-size: clamp(0.75rem, 0.635rem + 0.51vw, 1.25rem);
   }

   .items{
    display: flex;
    flex-direction: column;
    gap: 50px;
    .item{
        width: 50%;
        video{
            width: 100%;
        }
    }
}
   
.v-text {
    font-size: clamp(0.75rem, 0.635rem + 0.51vw, 1.25rem);   
}

.video-text{
    font-size: clamp(0.563rem, 0.465rem + 0.43vw, 1rem);
}



  @media screen and (max-width:768px) {
    .items{
        flex-direction: column;
        .item{
            width: 100%;
        }
    }   
  }
}


.video {
    color: var(--font-color);
   .container{
    max-width: var(--container-size);
    height: 100%;
    padding: clamp(2.813rem, 2.308rem + 2.24vw, 5rem);
  
    
   }
}

   .container {
    background-color: var(--bg-color);
    padding: clamp(2.813rem, 2.308rem + 2.24vw, 5rem) clamp(2.813rem, 2.308rem + 2.24vw, 5rem);
   
   }


  
   h3 {
    font-size: clamp(1.563rem, 1.49rem + 0.32vw, 1.875rem);
    margin-bottom: clamp(1.875rem, 1.442rem + 1.92vw, 3.75rem);
    text-align: center;
    justify-content: center;
   }

   .items{
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: 50px;
}

video {
   display: flex;
   justify-content: center;
   width: clamp(22.5rem, 11.786rem + 47.62vw, 47.5rem);/*動画サイズ*/
    
}


.video-tate{
    max-height: 660px;
  
}

/* 動画の位置調整*/
.item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

  @media screen and (max-width:768px) {
    .items{
        .item{         
                width: 100%;
                font: clamp(0.375rem, 0.265rem + 0.49vw, 0.5rem); 
               
        }
    }   
  }


@media screen and (max-width:1060px) {
    .items{
        .item{
                width: 100%;
                
    }
   }
}
 
@media screen and (max-width:1920px){
    .items{
        .item{
             width: 100%;
             
        }
    }
}

/* YouTubeを<video>と同じ幅式で、必ず16:9に */
.video-voice iframe {
  display: block;
  width: clamp(22.5rem, 11.786rem + 47.62vw, 47.5rem) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 0;
  max-width: none; /* 他CSSの max-width:100% などに潰されないよう保険 */
}


footer{
    color: var(--font-color);
    background-color: var(--bg-color);
    padding: 10px;
    text-align: center;
}