:root{
    --bg-color: #21134f7f;
    --font-color: aliceblue;
    --container-size:1200px;

}

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;
    font-size: clamp(0.75rem, 0.635rem + 0.51vw, 1.25rem);
    line-height:clamp(1rem, 0.885rem + 0.51vw, 1.5rem);
}

.site-title {
    font-size: clamp(1.25rem, 1.019rem + 1.03vw, 2.25rem);
    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-image: url(look/Lynk/lynk4.jpg);
    background-size: cover;
  width: 100vw;
  height: 100vh;
  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);
}

  /* メニュー全体のスタイル（黒枠で統一） */
.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 */
.toptext {
    color: var(--font-color);
   .container{
    max-width: 800px;
    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 {
    background-color: var(--bg-color);
    padding: clamp(0.938rem, 0.721rem + 0.96vw, 1.875rem);
   }
   
   h2 {
    font-size: clamp(1.875rem, 1.731rem + 0.64vw, 2.5rem);
    margin-bottom: clamp(1.125rem, 0.952rem + 0.77vw, 1.875rem);
    text-align: center;
   }
   .text {
    font-family: sans-serif;
    font-size: clamp(0.75rem, 0.638rem + 0.56vw, 1.313rem);
    line-height:clamp(1.25rem, 1.106rem + 0.64vw, 1.875rem);
   }
   .items{
    display: flex;
    flex-direction: row; /*　書かなくても、デフォルト値なので、rowになっている。練習なので入力*/
    justify-content: center;
    gap: 50px;
    .item{
        width: 50%;
        img{
            width: 100%;
        }
    }
}



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


.video {
    color: var(--font-color);
   .container{
    max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        height: 100%;
    padding: clamp(20px,4.5vw,45px) clamp(20px,3vw,30px);
   }

   .container {
    background-color: var(--bg-color);
    padding: clamp(20px,4.5vw,45px) clamp(20px,3vw,30px);
   }

  
   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;
   }
   .items{
    display: flex;
    flex-direction: column; /*　書かなくても、デフォルト値なので、rowになっている。練習なので入力*/
    justify-content: center;
    align-items: center;
    gap: 50px;
}

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

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

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

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