body{
  margin: 0;
background-color: #eee28f;
font-size: 16px;
overflow-x: hidden;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ヘッダー */
header{
  z-index: 10;
  position: absolute;
  width: 100%;

  .menubutton{
    display: none;
  }

  .menuul{
      margin: 2em 20%;
      padding-right: 10px;
  height: 5vh;
  z-index: 10;
 display: flex;
 justify-content: space-between;
 list-style: none;
 a{
  text-decoration: none;
}
}

.menuli{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  color: white;
}

.menubutton img{
  position: absolute;
  width: 50px;
  margin: 2em;
  }

  .menuli li{
  font-size: 2em;
  padding: 2em;
  list-style: none;
}
@media (width<640px) {
 .menuul{display: none;}
 .menubutton{display: block;}
}
}

/* ボタン */
.menubutton{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  position:fixed;
  top:20px;
  left:20px;
  z-index:100;
}

.menubutton img{
  width:50px;
  display:block;
}

/* メニュー */
.menunakami{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);

  transform: translateX(-100%);
  transition: transform 0.3s;
}

.menunakami.open{
  transform: translateX(0);
}

.menunakami ul{
  list-style:none;
  padding:80px 20px;
}

.menunakami li{
  margin:20px 0;
}

.menunakami a{
  color:white;
  text-decoration:none;
  font-size:20px;
}




/* スライド部分(自動で流れるスライドショー、元のまま) */
.slidecontainer{
  height: fit-content;
  z-index: -10;
   .topslide{
  width: calc(100% - (10% * 2));
  margin: 0 auto;
  padding: 0;
  display: flex;
  overflow: hidden;

  img{
      width: 80vw;
      height:100% ;
     flex-wrap: wrap;
     animation: topslideanime 60s infinite linear both;animation-delay: 5s;}
  }
 }
  @keyframes topslideanime{
          0%   { transform: translateX(0); }
          13.3% { transform: translateX(0); }      /* 1枚目静止 */

          16.6% { transform: translateX(-100%); }
          30%   { transform: translateX(-100%); }  /* 2枚目静止 */

          33.3% { transform: translateX(-200%); }
          46.6% { transform: translateX(-200%); }  /* 3枚目静止 */

          50%   { transform: translateX(-300%); }
          63.3% { transform: translateX(-300%); }  /* 4枚目静止 */

          66.6% { transform: translateX(-400%); }
          80%   { transform: translateX(-400%); }  /* 5枚目静止 */

          83.3% { transform: translateX(-500%); }
          96.6% { transform: translateX(-500%); }  /* 6枚目静止 */

          100%  { transform: translateX(0); }       /* ループ戻り */
        }
        /* スライド部分2(自動で流れるスライドショー、元のまま) */
.slidecontainer2{
z-index: -10;
 position: absolute;
 bottom: 20vh;
 .topslide2{
width: fit-content;
display: flex;
overflow: hidden;

img{
    width: 20vw;
    height:100% ;
   flex-wrap: wrap;
   animation: topslideanime2 60s infinite linear both;animation-delay: 5s;}
}
}
/* slidecontainerと中身は同じだが、別要素として独立管理できるよう名前を分けた */
@keyframes topslideanime2{
        0%   { transform: translateX(0); }
        13.3% { transform: translateX(0); }      /* 1枚目静止 */

        16.6% { transform: translateX(-100%); }
        30%   { transform: translateX(-100%); }  /* 2枚目静止 */

        33.3% { transform: translateX(-200%); }
        46.6% { transform: translateX(-200%); }  /* 3枚目静止 */

        50%   { transform: translateX(-300%); }
        63.3% { transform: translateX(-300%); }  /* 4枚目静止 */

        66.6% { transform: translateX(-400%); }
        80%   { transform: translateX(-400%); }  /* 5枚目静止 */

        83.3% { transform: translateX(-500%); }
        96.6% { transform: translateX(-500%); }  /* 6枚目静止 */

        100%  { transform: translateX(0); }       /* ループ戻り */
      }

/* セクション共通(動画+文章、読みやすさ優先のシンプルな構成) */
.parsecs,
.seconds{
  width: 100%;
  padding: 6vh 5%;
  box-sizing: border-box;

  .box{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4em;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
  }

  iframe{
    width: 55%;
    max-width: 640px;
    aspect-ratio: 16/9;
    height: auto;
    border: none;
  }

  p{
    width: 35%;
    min-width: 260px;
    letter-spacing: 0.15em;
    line-height: 1.8em;
    font-size: 1.2em;
    margin: 0;
  }

  @media(width<640px){
    padding: 4em 5%;

    .box{
      flex-direction: column;
      gap: 1.5em;
    }

    iframe{
      width: 100%;
      max-width: 100%;
    }

    p{
      width: 80%;
      min-width: 0;
      font-size: 1em;
      line-height: 1.8em;
      letter-spacing: 0.1em;
    }
  }
}

.parsecs{
  background-color: rgb(11, 9, 29);
  color: white;
}

.seconds{
  background-color: rgb(48, 216, 231);
  color: white;
}

/* souper(scavenger)セクション: HTMLは .sprback > .souper > .sprcts(動画) + .sprcts(文章) という構造なので、
   parsecs/secondsの .box > iframe + p と見た目が揃うように .sprcts を役割ごとに振り分ける */
.sprback{
  width: 100%;
  padding: 6vh 5%;
  box-sizing: border-box;
  background-color: yellow;
  color: #222;
}

.souper{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4em;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;

  .sprcts{
    width: 35%;
    min-width: 260px;
  }

  .sprcts:has(iframe){
    width: 55%;
    max-width: 640px;
    min-width: 0;
  }

  iframe{
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border: none;
    display: block;
  }

  p{
    letter-spacing: 0.15em;
    line-height: 1.8em;
    font-size: 1.2em;
    margin: 0;
  }
}

@media(width<640px){
  .sprback{
    padding: 4em 5%;
  }

  .souper{
    flex-direction: column;
    gap: 1.5em;

    .sprcts,
    .sprcts:has(iframe){
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    p{
      width: 80%;
      margin: 0 auto;
      font-size: 1em;
      line-height: 1.8em;
      letter-spacing: 0.1em;
    }
  }
}

footer{
  position: relative;
  background-color: purple;
  padding: 3em 20%;

  p{
    overflow-wrap: break-word;
    color: white;
    margin: 0;
  }
}

.topcoment{
  position: relative;
  height: 100%;
  margin: 20% 10%;
  font-size: 1.5em;
  letter-spacing: 0.25em;
}