@charset "UTF-8";

/*HEADER
================================================= */
header{
	position: relative;
	width: 100%;
	height: 108vw;
	margin-top: 4%;
	padding: 12% 0 0;
	background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp");
	background-size: 180% auto;
	background-position: center top 4vw;
	background-repeat: no-repeat;
	animation: header_img 10s; 
	animation-iteration-count: infinite;
}
@keyframes header_img {
  0% { background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp");
  }
  40% { background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp");
  }
  50% { background-image: url("../image/hader_img_02.webp"),url("../image/hader_img_01.webp");
  }
  90% { background-image: url("../image/hader_img_02.webp"),url("../image/hader_img_01.webp");
  }
  100% { background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp");
  }
}

header h1{
	position: absolute;
	width: 76vw;
	max-width: 660px;
	top: 42vw;
	right: 12vw;
}
header h2{
	position: absolute;
	width: 76vw;
	max-width: 720px;
	top: 93vw;
	left: 13vw;
}
.header_stripe_top,
.header_stripe_bottom{
	width: 100%;
	height: 8vw;
	position: absolute;
	display: block;
	background-image: url("../image/back_head_st.png");
	background-size: 4vw auto;
}
.header_stripe_top{ top: 0; }
.header_stripe_bottom{ top: 58vw; }

.header_fade-in{
	animation: fade-in ease;
	animation-duration: 1.6s;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media print, screen and (min-width: 640px) {
header{
	height: 64vw;
	padding: 12% 0 0;
	background-size: 140% auto;
	background-position: center top 3vw;
}
header h1{ width: 50vw; top: 28vw; right: 50vw; }
header h2{ width: 48vw; top: 46vw; left: 49vw; }
	
.header_stripe_top,
.header_stripe_bottom{
	height: 6vw;
	background-image: url("../image/back_head_st.png");
	background-size: 3vw auto;
}
.header_stripe_top{ top: 0; }
.header_stripe_bottom{ top: 45vw; }
}

@media print, screen and (min-width: 960px) {
header{
	height: 50vw;
	max-height: 800px;
	margin-top: 2%;
	padding: 12% 0 0;
	background-size: 100% auto;
	background-position: center top 2vw;
}
header h1{ width: 46vw; top: 17vw; right: 51vw; }
header h2{ width: 46vw; top: 32vw; left: 49vw; }
.header_stripe_top,
.header_stripe_bottom{ height: 5vw; background-size: 3vw auto; }
.header_stripe_top{ top: 0; }
.header_stripe_bottom{ top: 31vw; }
}	

@media print, screen and (min-width: 1920px) {
header{
	margin-top: 20px;
	background-size: 1920px auto;
	background-position: center top 45px;
}
.header_stripe_top,
.header_stripe_bottom{ height: 90px; background-size: 56px auto;}
.header_stripe_bottom{ top: 620px; }

header h1{ top: 330px; right: calc(4vw + 50%); }
header h2{ top: 640px; left: calc(50% - 2vw); }
}

/* main : intro
================================================= */
.intro{
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.catch_box,
.trailer_box{
	width:  100%
}
.intro .catch {
	margin: 0 auto;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(1.8rem, 2.2vw, 2.6rem);
	text-align: center;
}
.intro .catch span {
	display: inline-block;
}
.trailer{
	max-width: 720px;
	margin: clamp(16px ,4% , 32px) auto 0;
	
}
.trailer img{
	border-radius: 8px;
	box-shadow: 2px 2px 0px 3px rgba(255, 255, 91, 1);
}

@media screen and (min-width: 1280px) {
.catch_box,
.trailer_box{ width:48.75%;}
.trailer{ margin: 0 auto 0;}
.intro .catch { font-size: clamp(1.8rem, 1.8vw, 2.2rem);text-align: left; }
}