@charset "utf-8";
/* CSS Document */

h1{padding-top: 8rem;margin-bottom: 2rem;}

.Coming_soon{margin-top: 10.6rem;margin-bottom: 45rem;}

.main_youtube{width: 93%;margin: 0.5rem auto;}
.youtube_ttl{font-size: 1.63rem;display: flex;align-items: center;}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 = 9 / 16 * 100 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.yt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
width: 93%;
    margin: 3rem auto;	
}

.yt-box {
  width: calc(50% - 8px); /* 2列固定で幅を揃える */
  aspect-ratio: 16 / 9;
margin-bottom: 1rem;
}

.yt-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-box p{font-size: 1.63rem;}


.new{/*position: absolute;*/max-width: 81px;
    /*width: 11%;*//*z-index: 1;*/}

.yotube_btn{margin-top: 2rem;}

.kazari_chara{margin: 5rem auto 1rem;}
#video-popup {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99990;
}

.popup-content {
  position: relative;
  width: 90%;
  max-width: 640px;
  padding: 1rem 0;
  border-radius: 8px;
  background-color: transparent;
}

.popup-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.close-btn {
  background: none;
  border: none;
  cursor: pointer;
  max-width: 54px;
  width: 15%;
}

.close-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



@media (max-width: 768px){
	.kazari_chara{margin-bottom: 3rem;}	
 .Coming_soon {margin-top: 10.6rem; margin-bottom: 20rem; }
	.new{max-width: 38px;}	
}