@charset "UTF-8";

/*
Theme Name: hgs
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6.12
Version: 2025.1015.001
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/* Variables */

@import url('./assets/css/layout.css');

:root{
	--color-white: #ffffff;
}

html,body{
	font-family: "Kiwi Maru", serif;
	font-weight: 400;
	 font-style: normal;
}

.eng{
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	 font-style: normal;
}


/* comming soon */
.cs ul{ display: flex; width: 100%; flex-wrap: wrap; }
.cs ul li{ width: 50%; height: 50vh; overflow: hidden; }
.cs ul li img{ width: 100%; height: 100%; object-fit: cover; }




main{
	background-color: rgba(255,255,255,.8);
}

.contents{
	background-color: rgba(255,255,255,.95);
}




.countdown{ font-size: 2rem; font-weight: 700; }
.countdown span{ font-size: 4rem; color: #830a0b; padding: 0 1rem; display: inline-block; }



ul.state02{ display: flex; justify-content: center; margin-top: 4rem; }
ul.state02 li{ width: 32%; }
ul.state02 li img{ width: 100%; }
ul.state02 li:not(:last-child){ padding-right: 2%; }


ul.state{ display: flex; margin-top: 4rem; }
ul.state li{ width: 32%; }
ul.state li img{ width: 100%; }
ul.state li:not(:last-child){ padding-right: 2%; }



.icon__link{
	text-decoration: underline;
	padding-right: 20px;
	background: url('./assets/images/common/icon__link.svg') no-repeat 100% 50% / 15px auto;
}



section{ position: relative; }


.anchor{
	position: absolute;
	margin-top: -85px;
	padding-top: 85px;
}

.disnone{
	display: none;
}


.inner{ max-width: 1100px; padding: 0 20px; margin: 0 auto;
	position: relative;
	z-index: 10;
}


h3 { font-size: 2.2rem; text-align: center; position: relative; }
h3 span{ font-size: 6.0rem; display: block; line-height: 1; margin-bottom: 1rem; }
h3 span:first-letter{ color: #830a0b; }
h3::after{ content: ""; display: block; width: 3rem; margin: 2rem auto 5rem; height: .2rem; background-color: #830a0b; }

.dots .inner{
	padding: 8rem 0 10rem;
	margin: 0 auto;
}


section.main{ background: url('./assets/images/common/state03.webp') no-repeat 50% 50% / cover; position: relative; }

section.main .catch{ height: 50vh; }

section.main .catch{ display: flex; align-items: center; justify-content: center; }

section.main .catch .logo{ max-width: 46.2rem; }

section.main .catch .logo img{ width: 100%; max-width: 100%; }

section.main .catch,
section.main .slider{ position: relative; z-index: 10; overflow: hidden; }

section.main .catch .catch-inner{ text-align: center; }

section.main .catch .date{ margin-top: 2rem; font-size: 4rem; color: #830a0b; }

section.main h1{ position: relative; }
section.main h1 img{ height: 80vh; max-width: 600px; }
section.main h1 span{ 
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	left: 0;
	font-size: 4rem; 
	color: #fff;
  
	text-shadow :2px 2px 10px #830a0b,
	-2px 2px 10px #830a0b,
	2px -2px 10px #830a0b,
	-2px -2px 10px #830a0b;

}


section.movies .movies-inner{
	padding: 8rem 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 2rem;
}
section.movies .movies-inner .movie-box{
	width: 480px;
}
section.movies .movies-inner .movie-box:not(:last-child){
	margin-right: 15px;
}





@keyframes bound-anim{
  0%{transform: translateY(0);}
  100%{transform: translateY(24px);}
}

/*** 全文字にアニメーションを適用 ***/
.bound span{
  display: inline-block; /*横並びにしつつアニメーションを適用*/
  animation: .5s bound-anim ease-in infinite alternate;
}

/*** 各文字のスタート時間をずらす ***/
/* 1文字目 */
.bound span:nth-child(1){
  animation-delay: 0;
}
/* 2文字目 */
.bound span:nth-child(2){
  animation-delay: 0.2s;
}
/* 3文字目 */
.bound span:nth-child(3){
  animation-delay: 0.4s;
}
/* 4文字目 */
.bound span:nth-child(4){
  animation-delay: 0.6s;
}
.bound span:nth-child(5){
  animation-delay: 0.8s;
}



footer{
	background-color: #111111;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120px;
	bottom: 0;
	z-index: 10;
	width: 100%;
	padding-bottom: 10rem;
}
footer small{
	color: #ffffff;
	font-size: 1.4rem;
}






/* ----------------------------------------------------------------------------------------------------------------------------------

	WORKSHOP

---------------------------------------------------------------------------------------------------------------------------------- */
section.workshop{ background: url('./assets/images/common/state05.webp') no-repeat 50% 50% / cover; position: relative; }

.workshop-inbox{ display: flex; justify-content: space-between; }
.workshop-inbox .flyer{ max-width: 50rem; }
.workshop-inbox .flyer img{ max-width: 100%; width: 100%; }


.workshop-inbox01 h5{ font-size: 2rem; }


.workshop-inbox01{ width: calc(100% - 55rem); display: flex; flex-direction: column; justify-content: space-between; }

.workshop-inbox01 .buttons a{ display: block; text-align: center; line-height: 1; padding: 2.5rem; background-color: #b30b00; color: #ffffff !important; border-radius: 1rem; }

/* ----------------------------------------------------------------------------------------------------------------------------------

	ABOUT

---------------------------------------------------------------------------------------------------------------------------------- */
section.about{ background: url('./assets/images/common/state01.webp') no-repeat 50% 50% / cover; position: relative; }



section.performer h4{
	margin: 5rem 0 3rem;
}


/* ----------------------------------------------------------------------------------------------------------------------------------

	TIMETABLE

---------------------------------------------------------------------------------------------------------------------------------- */

section.timetalbe h4{
	 margin: 5rem 0 3rem;
}


.entry-inbox{
	display: flex;
	justify-content: center;
}
.entry-inbox ul li{
	font-size: 1.8rem;
	line-height: 2.4;
}




.timetable .timetable__list{ width: 75%; }
.timetable dl{ display: flex; margin-bottom: 2px; background-color: #ffffff; }
.timetable dl dt{ width: 15%; padding: 10px; text-align: center; }
.timetable dl dd{ width: 85%; padding: 10px; }

.timetable__list dl:nth-child(odd){ background-color: #ebcfd1; }
.timetable__list dl:nth-child(even){ background-color: #ffeff1; }



/* ----------------------------------------------------------------------------------------------------------------------------------

	REQUIREMENTS

---------------------------------------------------------------------------------------------------------------------------------- */
section.requirements{ background: url('./assets/images/common/state02.webp') no-repeat 50% 50% / cover; position: relative; }





/* ----------------------------------------------------------------------------------------------------------------------------------

	APPLICATION

---------------------------------------------------------------------------------------------------------------------------------- */
/*section.application{ background: url('./assets/images/common/state04.webp') no-repeat 50% 50% / cover; position: relative; }*/
section.bg::after{ 
	content: "";
	position: absolute;
	z-index: 2;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	background-color: var(--color-white);
	opacity: 0.9; }

.tbl__requirements dl{
	display: flex;
	border-top: #a61f24 1px dashed;
	background-color: var(--color-white);
}

.tbl__requirements dl:last-child{
	border-bottom: #a61f24 1px dashed;
}

.tbl__requirements dl dt{
	margin: 3px 0;
	background: #a61f24;
	color: #ffffff;
	padding: 20px 15px;
	width: 200px;
	font-size: 1.4rem;
	line-height: 2;
}
.tbl__requirements dl dd{
	margin: 3px 0;
	padding: 20px 10px 20px 20px;
	width: calc(100% - 280px);
	line-height: 2;
}

.tbl__requirements dl dd.list span{ display: flex; }
.tbl__requirements dl dd.list span::before{ content: "◆"; }
.tbl__requirements dl dd.list span.dot{ padding-left: 1.6rem; }
.tbl__requirements dl dd.list span.dot::before{ content: "・"; }

.application__button,
footer{
	display: none;
}

.application__button,
footer{
	display: flex;
}



.campfire{ display: block; margin: 0 auto; text-align: center; margin-bottom: 30px; }
.campfire .logo{ margin-bottom: 20px; }
.campfire span{ background-color: #ffffff; padding: 20px 30px; display: inline-block; max-width: 300px; }
.campfire span{ width: calc(100% - 60px); }



.caution{
	margin-top: 25px;
}

.caution,
.caution *{  font-size: 1.4rem; }



header{
	display: none;
}

header{
	display: block;
	position: fixed;
	left: 0;
	top: -100px;
	height: 90px;
	width: 100%;
	background-color: rgba(255,255,255,.95);
	z-index: 1000;
	transition: .8s all;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

header.fixed{
	top: 0;
	transition: .8s all;
}



.cs .logos{ display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;
position: absolute;
top: 0;
z-index: 10;
}


.cs .logos .logos-inbox .dates{ font-size: 3rem; margin-top: 1.5rem; }
.cs .logos .logos-inbox .texts{ font-size: 2rem; margin-top: 2rem; }

.cs .logos .logos-inbox img{ max-width: 411px; width: 100%; }

.cs .logos .logos-inbox{ z-index: 100; position: relative;

	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);

    max-width: 540px;
    background: rgba(255, 255, 255, .95);
    width: 100%;
	padding: 3rem;
    max-height: 440px;

}

.cs .logos .logos-inbox p{ text-align: center; }

.cs{ position: relative; }
.cs .cover{ position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 2; }

.fadeIn.fadeIn02{
	animation-duration:1s;
	animation-delay: 5s;
}
.fadeIn.fadeIn03{
	animation-duration:1s;
	animation-delay: 7s;
}

/* その場で */
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-delay: 3s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeInAnime{
	  from {
		opacity: 0;
	  }
	
	  to {
		opacity: 1;
	  }
	}
	
	/* 下から */
	
	.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
		transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
		transform: translateY(0);
	  }
	}
	
	/* 上から */
	
	.fadeDown{
	animation-name:fadeDownAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeDownAnime{
	  from {
		opacity: 0;
		transform: translateY(-100px);
	  }
	
	  to {
		opacity: 1;
		transform: translateY(0);
	  }
	}
	
	/* 左から */
	
	.fadeLeft{
	animation-name:fadeLeftAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeLeftAnime{
	  from {
		opacity: 0;
		transform: translateX(-100px);
	  }
	
	  to {
		opacity: 1;
		transform: translateX(0);
	  }
	}
	
	/* 右から */
	
	.fadeRight{
		animation-name:fadeRightAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeRightAnime{
	  from {
		opacity: 0;
		transform: translateX(100px);
	  }
	
	  to {
		opacity: 1;
		transform: translateX(0);
	  }
	}









/* ----------------------------------------------------------------------------------------------------------------------------------

	BUTTON

---------------------------------------------------------------------------------------------------------------------------------- */

.button{ display: flex; width: 100%; height: 10rem; position: fixed; z-index: 100; bottom: 0; left: 0; }
.button a{ display: flex; width: calc(100% - 4rem); height: 10rem; align-items: center; justify-content: center; padding: 0 2rem; background-color: #a61f24; }
.button a:hover{ background-color: #c63f44; }

.button a::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 8rem;
	width: 100%;
	background: url('./assets/images/common/button.svg') no-repeat 2rem 0 / 13rem auto;
}

.button a::after{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 20px;
    display: flex;
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    font-weight: 900;
    color: var(--color-white);
    align-items: center;
}
.button a span{ display: flex; width: calc(100% - 4rem); height: 10rem; align-items: center; justify-content: center; color: var(--color-white); }
.button a span strong{ font-size: 4rem; font-weight: 400; }



.supported h4{ text-align: center; font-size: 1.0rem; }
.supported h4 span{ display: block; }
.supported ul{ display: flex; justify-content: center; flex-wrap: wrap; }
.supported .supported__box{ margin: 15px 0  45px; }

.supported .supported__box ul.big{ margin-bottom: 70px; justify-content: center; }
.supported .supported__box ul.big li{ margin: 10px 0; display: inline-table; width: 28%; padding: 0 0.5%; }
.supported .supported__box ul.big li a{ max-width: 100%; width: 100%; display: block; }
.supported .supported__box ul.big li a img{ max-height: inherit !important; width: 100% !important; }

.supported .supported__box ul li{ margin: 10px; display: flex; max-height: 100px; }
.supported .supported__box ul li span,
.supported .supported__box ul li a{ display: flex; justify-content: center; align-items: center; width: 180px; font-size: 1.4rem; text-align: center; }
.supported .supported__box ul li a:hover{ opacity: .75; }

.supported .supported__box ul li span img,
.supported .supported__box ul li a img{ max-width: 100%; max-height: 100%; }


.supported ol{ display: flex; justify-content: center; flex-wrap: wrap; }
.supported ol li img{ max-width: 100%; }


section.main .slider .slick-slider{ height: 588px; }

@media all and (max-width: 1524px){
	section.movies .movies-inner{ max-width: 975px; margin: 0 auto; }
	section.movies .movies-inner .movie-box:first-child{
		margin-left: 15px;
		margin-bottom: 10px;
	}
}


@media all and (max-width: 1140px){

	
	section.movies .movies-inner{ max-width: 975px; padding-left: 20px; padding-right: 20px; }
	
	section.movies .movies-inner .movie-box{ width: 49%; }
	section.movies .movies-inner .movie-box:first-child{
		margin-right: 2%;
	}

	section.main .catch .catch-inner,
	.inner{ margin: 0 2rem !important; }

	section.main .catch .logo img{ max-width: 100%; }
	section.main .catch .date{ font-size: 2.2rem; }


	h3{ font-size: 1.6rem; }
	h3 span{ font-size: 3rem; margin-bottom: 0; }

	.dots .inner{ padding: 4rem 0 5rem; }

	.tbl__requirements dl{ flex-direction: column; border-top: none; }
	.tbl__requirements dl:last-child{ border-bottom: none; }
	.tbl__requirements dl dt{ width: calc(100% - 3rem); padding: 1rem 1.5rem; margin: 0; }
	.tbl__requirements dl dd{ width: calc(100% - 4rem); padding: 2rem; }


	footer{ height: 5rem; padding-bottom: 6rem; }

}


@media all and (max-width: 1000px){
	.button a span strong{ font-size: 3rem; }
}


@media all and (max-width: 900px){


	
	section.movies .movies-inner .movie-box{
		width: 100%;
		margin: 0 0 20px !important;
	}
	section.movies .movies-inner .movie-box iframe{
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
	}

	.supported .supported__box ul.big{ margin-bottom: 0; }
	.supported .supported__box ul.big li a img{ width: auto !important; }


	section.demo .inner{ margin: 0 20px; }

	.cs .logos{ padding: 0 1rem; }

	.supported .supported__box ul.big li{ margin: 10px; display: flex; max-height: 220px;width: calc(100% - 20px); }
	
	.supported .supported__box ul li{ margin: 10px; display: flex; max-height: 100px; width: calc(50% - 20px); justify-content: center; }

	section.demo .inner img{ width: 90%; }
	.cs .logos .logos-inbox{ height: auto; max-height: auto; }

	.cs .logos .logos-inbox .dates{ font-size: 2rem; }
	.cs .logos .logos-inbox .texts{ font-size: 1.6rem; }

	footer small{ font-size: 1.1rem; }


	.button,
	.button a,
	.button a span{ height: 6rem; }
	.button a::before{ height: 5rem; background: url(./assets/images/common/button.svg) no-repeat 1rem 0 / 6rem auto; }
	.button a span strong{ font-size: 2rem; font-size: 1.6rem; line-height: 1.2; margin-right: 1rem; }

		
	section.movies .inner .movie-box{
		width: 100%;
	}
	section.movies .inner .movie-box:not(:last-child){
		margin-right: 0%;
	}
	
	section.movies .inner .movie-box iframe{
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}


	.entry-inbox{
		display: flex;
		justify-content: center;
	}
	.entry-inbox ul li{
		font-size: 1.6rem;
		line-height: 2;
	}
	
	section.timetalbe h5{
		text-align: center;
		margin-bottom: 2rem !important;
	}
	section.timetalbe h5 span{
		display: block;
	}


	.workshop-inbox{ display: block; }
	.workshop-inbox .workshop-inbox01{ width: 100%; margin-top: 3rem; }
	.workshop-inbox .workshop-inbox01 .buttons{ margin-top: 4.5rem; }


	.timetable .timetable__list{ width: 100%; }
	.timetable dl dt{ width: 10rem; padding: 10px 0; text-align: center; }
	.timetable dl dd{ width: calc(100% - 10rem); padding: 10px; }

}

@media all and (max-width: 470px){
	.button a{ width: 100%; padding: 0 .5rem; }
	.button a::before{ background: none; }
	
}