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

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

.zip_ttl_img{margin-bottom: 2rem;}

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

section{margin-bottom: 6rem;}

.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;
	align-items: flex-end;	
}

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

.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%;
}

.zip_nav{display: flex;flex-wrap: wrap;justify-content: center;margin-bottom: 6rem;}
.zip_nav li{width: 30%;margin: 1%;}


.ttv_content{max-width: 695px;margin: 0 auto;font-size: clamp(13px, 2.5vw, 26px);margin-bottom: clamp(57px, 10vw, 85px);padding:0 clamp(20px, 4vw, 35px);font-weight: bold;}
.ttv_content__in{background-color: rgb(255, 255, 255);width:100%;box-sizing: border-box;margin-bottom: clamp(15px, 4vw, 30px);border-width: clamp(2px, 0.9vw, 7px);
border-style: solid;border-color:#ffcfe0;border-image: initial;border-radius: clamp(7px, 1px + 4vw, 22px);padding:clamp(22px, 4vw, 45px);text-align: center;}
.ttv_content__in p{margin-top:clamp(22px, 4vw, 45px);}

.comingsoon{margin: 4rem auto;max-width: 517px;width: 80%;}
.youtube{margin-bottom: 1rem;}

@media (min-width: 768px){
	footer{margin-top: 160px;}	
}

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