@charset "UTF-8";

/*HEADER
================================================= */
header{
	position: relative;
	width: 100%;
	height: 160vw;
	padding: 12% 0 0;
	background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp"),url("../image/hader_img_03.webp");
	background-color: #ffff;
	background-size: 166% auto;
	background-position: center bottom;
	background-repeat: no-repeat;
	animation: header_img 24s; 
	animation-iteration-count: infinite;
}
@keyframes header_img {
  0% { background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp"),url("../image/hader_img_03.webp");
  }
  30% { background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp"),url("../image/hader_img_03.webp");
  }
  40% { background-image: url("../image/hader_img_02.webp"),url("../image/hader_img_03.webp"),url("../image/hader_img_01.webp");
  }
  60% { background-image: url("../image/hader_img_02.webp"),url("../image/hader_img_03.webp"),url("../image/hader_img_01.webp");
  }
  70% { background-image: url("../image/hader_img_03.webp"),url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp"); 
  }
  90% { background-image: url("../image/hader_img_03.webp"),url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp"); 
  }
  100% { background-image: url("../image/hader_img_01.webp"),url("../image/hader_img_02.webp"),url("../image/hader_img_03.webp");
  }
}

header h1{
	width: 56vw;
	margin: auto;
	padding: 6vw 6vw 8vw;
	background-image: linear-gradient(135deg, rgb(0, 105, 62, 0.9), rgb(11, 85, 103, 0.9));
}
.copyright_logo_box{
	display: flex;
	width: 60vw;
	min-width: 280px;
	max-width: 400px;
	margin: 60vw auto 0;
	align-items: center;
}
.copyright_logo_box div{ padding: 0 2%; }
.logo_hokudai { width: 49%; }
.logo_hokudai150 { width: 27%; }
.logo_hbc { width: 24%; }

@media print, screen and (min-width: 768px) {
header{
	position: relative;
	width: 100%;
	height: 56vw;
	padding: 4%;
	background-size: 110% auto;
}
header h1{
	width: 28vw;
	max-width: 400px;
	margin: 0 auto auto 0;
	padding: 2.4vw 2.4vw 3.6vw;
}
.copyright_logo_box{
	position: absolute;
	width: 36vw;
	max-width: 520px;
	margin: 0;
	right: 2%;
	bottom: 4%;
}
}

@media print, screen and (min-width: 1280px) {
header{
	height: 44vw;
	padding: 2% 6%;
	background-size: 100% auto;
	background-position: center bottom -3vw;
}
header h1{ width: 20vw; }
.copyright_logo_box{
	right: 4%;
	bottom: 4%;
}
}
.header_fade-in{
	animation: fade-in ease;
	animation-duration: 1.6s;
}

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

/*COMMON
================================================= */
.area_concept,
.area_movie,
.area_sponsors,
footer{
	font-family: 'Noto Serif JP', serif;
	font-weight: 300;
}
.space_top_7_5 { margin-top: clamp( 28px, 7% , 117px); }
.space_top_12 { margin-top: clamp( 45px, 12% , 188px); }
.space_top_18 { margin-top: clamp( 68px, 20% , 280px); }
.space_btm_7_5 { margin-bottom: clamp( 28px, 7% , 117px); }
.space_btm_12 { margin-bottom: clamp( 45px, 12% , 188px); }
.space_btm_18 { margin-bottom: clamp( 68px, 20% , 280px); }

/*CONCEPT
================================================= */
.area_concept {}

.concept_block { 
	position: relative;
	width: 100%;
	max-width: 1556px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
	transform: translateY(30px); /* 下からふわっと出す */
	transition: all 0.8s ease;
}
.concept_block.fadein{
	opacity: 1;
	transform: translateY(0); 
}
.concept_txt { 
	width: 54%;
	margin: 0 auto 0 6%;
	position: relative;
	padding: 0 0 6%;
	z-index: 6;
}
.concept_txt h3 { font-size: clamp( 2.8rem , 6.2vw , 5rem) }
.concept_txt h3 span { letter-spacing: -0.3em; }
.concept_txt p { 
	margin: 6% 0 6%;
	font-family: 'Noto Serif JP', serif;
	font-size: clamp( 1.4rem ,2.4vw , 2.4rem);
	text-shadow: -1px 0px 2px rgba(255, 255, 255, 1), 1px 1px 2px rgba(255, 255, 255, 1), -1px -1px 2px rgba(255, 255, 255, 1), 0px -1px 2px rgba(255, 255, 255, 1);
}
.concept_txt p span { display: inline-block; }
.concept_phogo_01{
	width: 34%;
	position: absolute;
	z-index: 4;
	right: 0;
	top:0;
}
.concept_phogo_02{
	width: 34%;
	position: absolute;
	z-index: 2;
	right: 4vw;
	top:52vw;
}
.concept_phogo_03{
	width: 50%;
	margin-left: 6%;
}

@media print, screen and (min-width: 520px) {
.concept_phogo_01 { width: 32%; }
.concept_phogo_02 { width: 32%; right: 5vw; top:50vw; }
.concept_phogo_03 { width: 53%; }
}
@media print, screen and (min-width: 768px) {
.concept_block { width: 90%; }
.concept_txt { width:58%; margin: 0; }
.concept_txt h3 { font-size: clamp( 4rem , 4.8vw , 5.8rem) }
.concept_phogo_02{ top:47vw; }
.concept_phogo_03{ margin-left: 0; }
}
@media print, screen and (min-width: 960px) {
.concept_block { width: 92%; }
.concept_txt { width:40%; margin: 0; padding: 0 0 3%; }
.concept_txt h3 { font-size: clamp( 5rem , 5.2vw , 6.2rem) }
.concept_txt p { font-size: clamp( 1.6rem ,2vw , 2.4rem); }
.concept_phogo_01 { width: 27%; top:4%;}
.concept_phogo_02 { width: 27%; right: 31%; top:24%; }
.concept_phogo_03{ width: 38%; }
}

/*MOVIE
================================================= */
.area_movie { }
.movie_box {
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: space-between;
}
.movie_box .movie_unit{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 3%;
}
.movie_box .movie_unit:last-of-type{ margin-bottom: 0;}
.movie_box p { font-size: clamp( 1.4rem ,2.2vw , 2.4rem); }
.movie_box .movie_video { width: 54%; }
.movie_box .movie_txt { width: 42%; }

@media print, screen and (min-width: 768px) {
.movie_box .movie_unit { width: 48.5%; margin-bottom: 0; }
.movie_box .movie_video { width: 100%; }
.movie_box .movie_txt { width: 100%; }
.movie_box p { padding-top: 4%; text-align: center; }
}

/*SPONSORS
================================================= */
.area_sponsors{
	padding: clamp( 45px, 12% , 188px) 0;
	background-image: linear-gradient(135deg, rgb(0, 105, 62, 0.9), rgb(11, 85, 103, 0.9)),
		url("../image/back_area_sponsors.jpg");
	background-size: auto, cover;
}
.area_sponsors h2{ color: #ffffff; text-align: center;line-height: 1.1;}
.area_sponsors h2 span{ font-size: 1.6rem; }
.area_sponsors h4 { line-height: 1.4; text-align: center; }
.sponsors_01,
.sponsors_02,
.sponsors_03,
.sponsors_04 {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	flex-wrap: wrap;
}
.sponsors_04 { margin-top: -4%; margin-bottom: -4%; }

.sponsors_between{ justify-content: space-between;/*2unit*/ }
.sponsors_center{ justify-content: center; /*1Unit*/}

.sponsors_unit{ background-color: #ffffff; }
.sponsors_01 .sponsors_unit,
.sponsors_02 .sponsors_unit{ width: 68%;/*100%*/ margin-bottom: 7.5%; }
.sponsors_01 .sponsors_unit:last-of-type,
.sponsors_02 .sponsors_unit:last-of-type{ margin-bottom: 0;}
.sponsors_03 .sponsors_unit{ width: 48%; margin-bottom: 4%; }
.sponsors_04 .sponsors_unit{ width: 31%; margin-bottom: 4%; /*3枠以下*/margin-left: 2%; margin-right: 2%;}
.sponsors_logo_border { border: solid 1px #dfdfdf; box-sizing: border-box;}
.sponsors_txt span { display: inline-block; }
/*sponsors_01*/
.sponsors_01 .sponsors_unit { padding: clamp( 16px , 6% , 58px); }
.sponsors_01 h4 {
	position: relative;
	margin-top: 4%;
	font-size: 2.2rem;
	padding-bottom: 2rem;
}
.sponsors_01 h4::after {
	position: absolute;
	content: "";
	width: 40px;
	height: 6px;
	left: calc(50% - 20px);
	bottom:0; 
	background-image: linear-gradient(270deg, rgb(186, 152, 0), rgb(125, 111, 18));
}
.sponsors_01 p {
	padding: 2rem 0 0;
	text-align: center;
}
/*sponsors_02*/
.sponsors_02 .sponsors_unit{
	display: flex;
	align-items: center;
	padding: clamp( 12px , 4% , 58px);
}
.sponsors_02 .sponsors_logo { width: 54%; }
.sponsors_02 .sponsors_txt { width: 42%; }
.sponsors_02 h4 { font-size: 2.0rem; }
/*sponsors_03*/
.sponsors_03 .sponsors_unit{ padding: clamp( 12px , 4% , 40px); }
.sponsors_03 .sponsors_txt { padding-top: 8%; }
/*sponsors_04*/
.sponsors_04 .sponsors_unit{ padding: 2px;}
.sponsors_04 .sponsors_logo{ align-items: center; }

@media print, screen and (min-width: 768px) {
.area_sponsors h2 span { font-size: 2rem; }
.sponsors_01 .sponsors_unit,.sponsors_02 .sponsors_unit { width: 34.5%;/*48.5%*/ }
 /*sponsors_01*/
.sponsors_01 .sponsors_unit { margin-bottom: 0; padding: clamp( 16px , 4% , 58px); }
.sponsors_01 h4 { font-size: clamp( 1.8rem , 2.4vw , 2.8rem); }
/*sponsors_02*/
.sponsors_02 .sponsors_unit {
	margin-bottom: 0;
	padding: clamp( 12px , 3% , 48px);
}
.sponsors_02 h4 { font-size: clamp( 1.6rem , 1.8vw , 2.4rem); }
/*sponsors_03*/
.sponsors_03 .sponsors_unit { width: 23.5%;  /*2枠以下*/margin-left: 2%; margin-right: 2%;}
.sponsors_03 .sponsors_unit{ padding: clamp( 8px , 2% , 40px); }
.sponsors_03 .sponsors_txt { padding-top: 8%; }
.sponsors_03 h4 { font-size: clamp( 1.6rem , 1.6vw , 2rem); }
/*sponsors_04*/
.sponsors_04 .sponsors_unit { width: 15%; }
}

/* NEWS
================================================= */
.news_list_box{
	margin-left: auto;
	margin-right: auto;
	padding-bottom: clamp( 45px, 12% , 188px);
}
ul.news_list{
	margin: 0 auto;
	width: 90%;
	max-width: 1366px;
	height: 244px;
	overflow-y:scroll;
}
.news_list li,
.news_list li a{ 
	display: flex;
	flex-wrap: wrap;
}
.news_list li{ 
	padding: clamp( 9px,4%,28px ) 1.6rem;
	border-bottom: 1px solid #dedede;
	font-size: 1.6rem;
	line-height: 1.5;
}
.news_list li a{ 
	width: 100%;
	height: 100%;
}
.whats_new_day{ width: 100%; }
.whats_new_txt{ width: 100%; }
a .whats_new_txt{ text-decoration: underline; }

@media print, screen and (min-width: 768px) {
.news_list li, .news_list li a{ flex-wrap: nowrap; }
.whats_new_day{ width: clamp( 100px,14.25%,146px ); }
.whats_new_txt{ width: clamp( 400px,70.75%,723px); }
}