@charset "utf-8";

@font-face {
font-family:'ZenKakuGothicAntique';
src:url(fonts/ZenKakuGothicAntique-Light.ttf) format('truetype');
font-weight:300;
font-style:normal;
font-display:swap;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:15px;
}

body{
font-family:ZenKakuGothicAntique, sans-serif;
line-height:2;
color:#000;
background:#fff;
padding:0 20px;
}

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

	body{
	padding:0 10px;
	}

}

@media screen and (max-width:600px){

	body{
	padding:0;
	}

}

a{
text-decoration:none;
color:#000;
}

ul{
list-style-type:none;
}

h1,h2,h3,h4,h5,h6{
font-weight:300;
font-size:1rem;
}

img{
vertical-align:bottom;
}

.grecaptcha-badge{
visibility: hidden;
}

/* -------feature------- */
header .feature{
position:absolute;
bottom:calc(-50px - 2em);
right:0;
background:#ff0000;
border:1px solid #ff0000;
color:#fff;
}

.feature span{
display:block;
text-align:center;
background:#fff;
color:#ff0000;
}

footer .feature{
display:none;
}


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

footer .feature{
display:block;
position:fixed;
bottom:15px;
right:calc(50vw - 290px);
width:580px;
background:#ff0000;
border:1px solid #ff0000;
color:#fff;
z-index:89;
}

footer .feature span{
display:block;
text-align:center;
background:#fff;
color:#ff0000;
}


header .feature{
display:none;
}

}

@media screen and (max-width:600px){

footer .feature{
font-size:0.9rem;
letter-spacing:-1.5px;
bottom:10px;
right:10px;
width:calc(100vw - 20px);
}

}

/*--------header--------*/
header{
max-width:1160px;
background:#fff;
position:fixed;
top:0;
left:0;
right:0;
margin:0 auto;
padding:20px 0 10px;
border-bottom:2px solid #ddd;
display:flex;
justify-content:space-between;
align-items:flex-end;
z-index:90;
transition:all 0.3s ease-out;
animation:header 7.5s ease 0s 1 forwards;
}

	@keyframes header{
	0%{
		transform:translateY(-70px);
		opacity:0;
	}
	5%{
		transform:translateY(-70px);
		opacity:1;
	}
	95%{
		transform:translateY(-70px);
		opacity:1;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
	}

header a:last-child{
order:-1;
}

#mark{
position:relative;
bottom:7px;
width:1rem;
aspect-ratio:1 / 1;
background:#ff0000;
margin-left:calc(1rem + 3px);
}

#mark::before{
content:"";
position:absolute;
width:1rem;
aspect-ratio:1 / 1;
background:#ff0000;
top:0;
left:calc(-1rem - 3px);
}

#mark::after{
content:"";
position:absolute;
width:1rem;
aspect-ratio:1 / 1;
background:#ff0000;
top:0;
left:calc(1rem + 3px);
}

#btn{
display:none;
}

header ul{
width:500px;
display:flex;
justify-content:space-between;
}

header a{
position:relative;
}

header a:hover{
top:-2px;
}

@media screen and (max-width:1200px){

	header{
	width:calc(100vw - 40px);
	}

}

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

	header{
	max-width:580px;
	}

	#mark{
	bottom:0;
	}

	#btn{
	display:block;
	width:30px;
	height:15px;
	cursor:pointer;
	position:relative;
	}

	#btn div{
	transition:all 0.3s;
	}

	#btn div:nth-child(1){
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:3px;
	background:#bbb;
	}

	#btn div.close-pos:nth-child(1){
	transform: translateY(6px) rotate(25deg);
	}

	#btn div:nth-child(2){
	position:absolute;
	top:6px;
	left:0;
	width:100%;
	height:3px;
	background:#bbb;
	opacity:1;
	}

	#btn div.close-pos:nth-child(2){
	opacity:0;
	}

	#btn div:nth-child(3){
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3px;
	background:#bbb;
	}

	#btn div.close-pos:nth-child(3){
	transform: translateY(-6px) rotate(-25deg);
	}

	header nav{
	position:fixed;
	right:-40vw;
	top:80px;
	transition:all 0.4s ease-out;
	}

	header ul{
	width:fit-content;
	padding:20px;
	text-align:right;
	background:#fff;
	border:2px solid #ddd;
	flex-direction:column;
	}

	header nav.active{
	right:0;	
	}

	header li{
	padding:10px 0;
	}

}

@media screen and (max-width:600px){

	header{
	padding:15px 0 10px;
	width:calc(100% - 20px);
	}

	header nav{
	right:-70vw;
	}

}

/*----------key----------*/
#key{
max-width:1200px;
height:100vh;
height:100dvh;
min-height:800px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}

#key h1{
width:40%;
position:relative;
}

#key h1 img{
width:100%;
}

#key h1::before{
content:"";
position:absolute;
top:0;
left:0;
width:110%;
height:100%;
background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
animation:h1-hidden 4s linear 3.8s 1 forwards;
z-index:10;
}

	@keyframes h1-hidden{
	0%{
		transform:translateX(0);
		opacity:1;
	}
	50%{
		transform:translateX(0);
		opacity:1;
	}
	88%{
		transform:translateX(-100%);
		opacity:1;
	}
	100%{
		transform:translateX(-100%);
		opacity:0;
		display:none;
	}
	}

#key p{
font-size:3rem;
line-height:1.5;
padding-right:20px;
position:relative;
opacity:0;
animation:key-p-move 2.5s linear 0.5s 1 forwards;
z-index:30;
}

@keyframes key-p-move{
0%{
	transform:translateX(-430px);
	opacity:0;
}
5%{
	transform:translateX(-430px);
	opacity:1;
}
70%{
	transform:translateX(-430px);
	opacity:1;
}
100%{
	transform:translateX(0);
	opacity:1;
}
}

@media screen and (max-width:1200px){

	#key p{
	font-size:3.5vw;
	padding-right:0;
	}

	@keyframes key-p-move{
	0%{
		transform:translateX(-130%);
		opacity:0;
	}
	5%{
		transform:translateX(-130%);
		opacity:1;
	}
	70%{
		transform:translateX(-130%);
		opacity:1;
	}
	100%{
		transform:translateX(0);
		opacity:1;
	}
	}

}

#catch{
display:block;
}

#catch span{
position:relative;
padding-right:2em;
}

#catch span::after{
content:'の';
}

#catch span::before{
content:'';
position:absolute;
width:1.7em;
height:0.9em;
border:1px solid #000;
right:0.1em;
top:0.3em;
}


/*-----------------------------------*/
.set1-2,.set3-4,.set5-6{
position:absolute;
width:2em;
height:1.2em;
top:0.2em;
left:3.1em;
}

.set1-2::before{
content:'音楽';
position:absolute;
background:#fff;
color:#000;
top:-0.2em;
left:-0.1em;
opacity:0;
animation:ongk 1.6s steps(1) 0.8s 1 forwards;
}

	@keyframes ongk{
	0%{
		opacity:0;
	}
	10%{
		opacity:1;
	}
	20%{
		opacity:0;
	}
	100%{
		opacity:0;
		display:none;
	}
	}


.set1-2::after{
content:'美術';
position:absolute;
background:#fff;
color:#000;
top:-0.2em;
left:-0.1em;
opacity:0;
animation:bjt 1.6s steps(1) 0.8s 1 forwards;
}

	@keyframes bjt{
	0%{
		opacity:0;
	}
	20%{
		opacity:1;
	}
	30%{
		opacity:0;
	}
	100%{
		opacity:0;
		display:none;
	}
	}


.set3-4::before{
content:'茶道';
position:absolute;
background:#fff;
color:#000;
top:-0.2em;
left:-0.1em;
opacity:0;
animation:sd 1.6s steps(1) 0.8s 1 forwards;
}

	@keyframes sd{
	0%{
		opacity:0;
	}
	30%{
		opacity:1;
	}
	40%{
		opacity:0;
	}
	100%{
		opacity:0;
		display:none;
	}
	}


.set3-4::after{
content:'華道';
position:absolute;
background:#fff;
color:#000;
top:-0.2em;
left:-0.1em;
opacity:0;
animation:kd 1.6s steps(1) 0.8s 1 forwards;
}

	@keyframes kd{
	0%{
		opacity:0;
	}
	40%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:0;
		display:none;
	}
	}


.set5-6::before{
content:'能楽';
position:absolute;
background:#fff;
color:#000;
top:-0.2em;
left:-0.1em;
opacity:0;
animation:ng 1.6s steps(1) 0.8s 1 forwards;
}

	@keyframes ng{
	0%{
		opacity:0;
	}
	50%{
		opacity:1;
	}
	60%{
		opacity:0;
	}
	100%{
		opacity:0;
		display:none;
	}
	}


.set5-6::after{
content:'食文化';
position:absolute;
width:3em;
background:#fff;
color:#000;
top:-0.2em;
left:-0.1em;
opacity:0;
animation:sbk 1.6s steps(1) 0.8s 1 forwards;
}

	@keyframes sbk{
	0%{
		opacity:0;
	}
	60%{
		opacity:1;
	}
	70%{
		opacity:0;
	}
	100%{
		opacity:0;
	}
	}


#key p::after{
content:'を';
position:absolute;
background:#fff;
top:0;
left:6em;
opacity:0;
animation:sbk 1.6s steps(1) 0.8s 1 forwards;
}


/*-------- CUBE animation wrap --------*/
#cube-wrap{
order:-1;
width:17%;
aspect-ratio:1 / 1.3;
position:relative;
animation:cube-wrap 5s linear 2.5s 1 forwards;
opacity:0;
z-index:20;
}

	@keyframes cube-wrap{
	0%{
		transform:translateX(245%);
		opacity:1;
	}
	70%{
		transform:translateX(245%);
		opacity:1;
	}
	100%{
		transform:translateX(0);
		opacity:1;
	}
	}

/*-------- animation-CUBE-1 --------*/
#cube-wrap::before{
content:"";
position:absolute;
width:37%;
aspect-ratio:1 / 1;
background:#ff0000;
top:-2%;
left:10%;
transform:translateY(0) rotate(10deg);
animation:c-1 5s linear 3s 1 forwards;
opacity:0;
}

	@keyframes c-1{
	0%{
		transform:translateY(-150%) translateX(-70%) rotate(-10deg);
		opacity:0;
	}
	20%{
		transform:translateY(5%) translateX(-30%) rotate(230deg);
		opacity:1;
	}
	50%{
		transform:translateY(1%) rotate(-80deg);
		opacity:1;
	}
	100%{
		transform:translateY(0) rotate(-78deg);
		opacity:1;
	}
	}

/*-------- animation-CUBE-2 --------*/
#cube-wrap div:nth-child(1){
content:"";
position:absolute;
width:37%;
aspect-ratio:1 / 1;
background:#ff0000;
top:5%;
right:10%;
transform:translateY(0) rotate(10deg);
animation:c-2 5s linear 2.8s 1 forwards;
opacity:0;
}

	@keyframes c-2{
	0%{
		transform:translateY(-200%) translateX(80%) rotate(0deg);
		opacity:0;
	}
	25%{
		transform:translateY(0%) translateX(10%) rotate(-250deg);
		opacity:1;
	}
	50%{
		transform:translateY(-10%) translateX(0%) rotate(-285deg);
		opacity:1;
	}
	90%{
		transform:translateY(0) translateX(0%) rotate(-275deg);
		opacity:1;
	}
	100%{
		transform:translateY(0) rotate(-275deg);
		opacity:1;
	}
	}

/*-------- animation-CUBE-3 --------*/
#cube-wrap div:nth-child(2){
content:"";
position:absolute;
width:37%;
aspect-ratio:1 / 1;
background:#ff0000;
top:35%;
left:10%;
transform:translateY(0) rotate(10deg);
animation:c-3 5s linear 2.7s 1 forwards;
opacity:0;
}

	@keyframes c-3{
	0%{
		transform:translateY(-30%) translateX(-150%) rotate(0deg);
		opacity:0;
	}
	20%{
		transform:translateY(0) translateX(5%) rotate(10deg);
		opacity:1;
	}
	100%{
		transform:translateY(0) translateX(-10%) rotate(-28deg);
		opacity:1;
	}
	}

/*-------- animation-CUBE-4 --------*/
#cube-wrap div:nth-child(3){
content:"";
position:absolute;
width:37%;
aspect-ratio:1 / 1;
background:#ff0000;
top:38%;
right:8%;
transform:translateY(0) rotate(10deg);
animation:c-4 5s linear 2.6s 1 forwards;
opacity:0;
}

	@keyframes c-4{
	0%{
		transform:translateY(-100%) translateX(50%) rotate(0deg);
		opacity:0;
	}
	20%{
		transform:translateY(-10%) translateX(-10%) rotate(-90deg);
		opacity:1;
	}
	60%{
		transform:translateY(0) rotate(-60deg);
		opacity:1;
	}
	80%{
		transform:translateY(0) rotate(-70deg);
		opacity:1;
	}
	100%{
		transform:translateY(0) rotate(-80deg);
		opacity:1;
	}
	}

/*-------- animation-CUBE-5 --------*/
#cube-wrap div:nth-child(4){
content:"";
position:absolute;
width:37%;
aspect-ratio:1 / 1;
background:#ff0000;
bottom:0;
left:10%;
transform:translateY(0) rotate(10deg);
animation:c-5 5s linear 2.5s 1 forwards;
opacity:0;
}

	@keyframes c-5{
	0%{
		transform:translateY(55%) translateX(-100%) rotate(-15deg);
		opacity:0;
	}
	40%{
		transform:translateY(0) rotate(-15deg);
		opacity:1;
	}
	100%{
		transform:translateY(0) rotate(10deg);
		opacity:1;
	}
	}

/*-------- animation-CUBE-6 --------*/
#cube-wrap::after{
content:"";
position:absolute;
width:37%;
aspect-ratio:1 / 1;
background:#ff0000;
bottom:0;
right:6%;
transform:translateY(0) rotate(10deg);
animation:c-6 5s linear 2.5s 1 forwards;
opacity:0;
}

	@keyframes c-6{
	0%{
		transform:translateY(200%) translateX(150%) rotate(-150deg);
		opacity:0;
	}

	21%{
		transform:translateY(-11%) translateX(-5%) rotate(-55deg);
	}
	30%{
		transform:translateY(-5%) translateX(-8%) rotate(-65deg);
		opacity:1;
	}
	40%{
		transform:translateY(-5%) translateX(-7%) rotate(-70deg);
		opacity:1;
	}
	100%{
		transform:translateY(5%) translateX(0) rotate(-95deg);
		opacity:1;
	}
	}

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

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

	#key{
	min-height:auto;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	}

	#key h1{
	width:70%;
	margin-top:80px;
	}

	#key h1::before{
	height:160%;
	animation:h1-hidden 4s linear 3.8s 1 forwards;
	}

	@keyframes h1-hidden{
	0%{
		transform:translateX(0);
		opacity:1;
	}
	65%{
		transform:translateX(0);
		opacity:1;
	}
	83%{
		transform:translateX(-100%);
		opacity:1;
	}
	100%{
		transform:translateX(-100%);
		opacity:0;
		display:none;
	}
	}

	#key p{
	width:70%;
	font-size:4.3vw;
	padding-right:0;
	margin-top:2em;
	z-index:15;
	animation:key-p-move 7s linear 0.5s 1 forwards;
	}

	@keyframes key-p-move{
	0%{
		transform:translateY(-190%);
		font-size:6.3vw;
		opacity:0;
	}
	5%{
		transform:translateY(-190%);
		font-size:6.3vw;
		opacity:1;
	}
	30%{
		transform:translateY(-190%);
		font-size:6.3vw;
		opacity:1;
	}
	35%{
		transform:translateY(-190%);
		font-size:6.3vw;
		opacity:0;
	}
	95%{
		transform:translateY(0);
		font-size:4.3vw;
		opacity:0;
	}
	100%{
		transform:translateY(0);
		font-size:4.3vw;
		opacity:0;
	}
	}

	#cube-wrap{
	opacity:0.3;
	position:absolute;
	width:35%;
	aspect-ratio:1 / 1.3;
	top:calc(50dvh + 30px - 50vw * 1.3 / 2);
	right:0;
	left:0;
	margin:0 auto;
	animation:cube-wrap 5s linear 2.5s 1 forwards;
	}

	@keyframes cube-wrap{
	0%{
		transform:translateX(0);
		opacity:1;
	}
	80%{
		transform:translateX(0);
		opacity:1;
	}
	95%{
		transform:translateX(-150%);
		opacity:1;
	}
	100%{
		transform:translateX(-150%);
		opacity:0;
		display:none;
	}
	}

	#cube-wrap::before{
	animation:c-1 3s linear 3s 1 forwards;
	}

	#cube-wrap div:nth-child(1){
	animation:c-2 3s linear 3s 1 forwards;
	}

	#cube-wrap div:nth-child(2){
	animation:c-3 3s linear 3s 1 forwards;
	}

	#cube-wrap div:nth-child(3){
	animation:c-4 3s linear 3s 1 forwards;
	}

	#cube-wrap div:nth-child(4){
	animation:c-5 3s linear 3s 1 forwards;
	}

	#cube-wrap::after{
	animation:c-6 3s linear 3s 1 forwards;
	}

}


/*----------メインコンテンツ共通----------*/
main{
max-width:1200px;
margin:0 auto;
position:relative;
}

#about,#submit-scl,#submit-gen,#contact,#result,#photo{
padding:100px 5% 100px 18%;
min-height:200vh;
display:flex;
flex-direction:column;
justify-content:flex-start;
text-align:justify;
}

#submit-scl,#submit-gen,#contact{
min-height:300vh;
}

.contents{
position:sticky;
top:0;
display:flex;
justify-content:space-between;
min-height:100vh;
align-items:flex-start;
padding-right:40px;
}

h2{
position:sticky;
top:0;
min-height:100vh;
display:flex;
align-items:center;
}

h2 span{
display:block;
width:6rem;
min-height:600px;
line-height:6rem;
font-size:1.7rem;
writing-mode:vertical-rl;
text-align:center;
letter-spacing:10px;
border-right:2px solid #ff0000;
}

.deta{
width:100%;
padding-left:20px;
}

.deta-1st{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}

.deta p{
margin:20px 0;
}

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

main{
max-width:600px;
margin:0 auto;
}

#about,#submit-scl,#submit-gen,#contact,#result,#photo{
padding:100px 10px;
min-height:100vh;
min-height:100dvh;
display:block;
}

.contents{
position:relative;
flex-direction:column;
justify-content:flex-start;
align-items:flex-start;
min-height:auto;
padding-right:0;
}

h2{
position:sticky;
top:-50px;
min-height:auto;
display:block;
width:100%;
padding-top:50px;
margin-bottom:30px;
background:#fff;
z-index:15;
transition:all 0.3s ease-out;
}

h2 span{
display:block;
width:100%;
min-height:auto;
line-height:2.5;
font-size:1.5rem;
writing-mode:horizontal-tb;
text-align:left;
letter-spacing:10px;
border-right:none;
border-bottom:2px solid #ff0000;
}

.deta{
padding-left:0;
}

.deta-1st{
min-height:auto;
display:block;
}

}

@media screen and (max-width:600px){

#about,#submit-scl,#submit-gen,#contact,#result,#photo{
padding:70px 10px;
}

h2{
margin-bottom:20px;
}

h2 span{
font-size:1.3rem;
}

}


/*----------講座概要----------*/
#about-anm{
width:100%;
aspect-ratio:3.5 / 1;
margin:50px 0 0 auto;
position:relative;
overflow:hidden;
}

#about-anm::before{
content:'';
position:absolute;
top:0;
left:0;
width:50px;
height:100%;
background:linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);
z-index:10;
}

#about-anm::after{
content:'';
position:absolute;
top:0;
right:0;
width:30px;
height:100%;
background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
z-index:10;
}

.pict-icon{
position:relative;
}

.pict-icon li{
width:17%;
position:absolute;
top:0;
left:0;
right:0;
margin:0 auto;
}

.pict-icon img{
width:100%;
}

.pict-music,.pict-art,.pict-sadoh,.pict-kadoh,.pict-noh,.pict-syoku{
scale:0.6;
}

.pict-music{
animation:pict-music 24s linear backwards infinite,pict-scale 24s linear 20s backwards infinite;
}
	@keyframes pict-music{
	0%{
		translate:0;
		opacity:1;
	}
	48%{
		translate:-330%;
		opacity:1;
	}
	49%{
		translate:-335%;
		opacity:0;
	}
	51%{
		translate:335%;
		opacity:0;
	}
	52%{
		translate:330%;
		opacity:1;
	}
	100%{
		translate:0;
		opacity:1;
	}
	}

.pict-syoku{
animation:pict-syoku 24s linear backwards infinite,pict-scale 24s linear 16s backwards infinite;
}
	@keyframes pict-syoku{
	0%{
		translate:-110%;
		opacity:1;
	}
	32%{
		translate:-330%;
		opacity:1;
	}
	33%{
		translate:-335%;
		opacity:0;
	}
	35%{
		translate:335%;
		opacity:0;
	}
	36%{
		translate:330%;
		opacity:1;
	}
	100%{
		translate:-110%;
		opacity:1;
	}
	}

.pict-noh{
animation:pict-noh 24s linear backwards infinite,pict-scale 24s linear 12s backwards infinite;
}
	@keyframes pict-noh{
	0%{
		translate:-220%;
		
		opacity:1;
	}
	16%{
		translate:-330%;
		opacity:1;
	}
	17%{
		translate:-335%;
		opacity:0;
	}
	19%{
		translate:335%;
		opacity:0;
	}
	20%{
		translate:330%;
		opacity:1;
	}
	100%{
		translate:-220%;
		opacity:1;
	}
	}

.pict-kadoh{
animation:pict-kadoh 24s linear backwards infinite,pict-scale 24s linear 8s backwards infinite;
}
	@keyframes pict-kadoh{
	0%{
		translate:-330%;
		opacity:1;
	}
	1%{
		translate:-335%;
		opacity:0;
	}
	3%{
		translate:335%;
		opacity:0;
	}
	4%{
		translate:330%;
		opacity:1;
	}
	100%{
		translate:-330%;
		opacity:1;
	}
	}

.pict-sadoh{
animation:pict-sadoh 24s linear backwards infinite,pict-scale 24s linear 4s backwards infinite;
}
	@keyframes pict-sadoh{
	0%{
		translate:232%;
		opacity:1;
	}
	81%{
		translate:-330%;
		opacity:1;
	}
	82%{
		translate:-335%;
		opacity:0;
	}
	84%{
		translate:335%;
		opacity:0;
	}
	85%{
		translate:330%;
		opacity:1;
	}
	100%{
		translate:232%;
		opacity:1;
	}
	}

.pict-art{
animation:pict-art 24s linear backwards infinite,pict-scale 24s linear 0s backwards infinite;
}
	@keyframes pict-art{
	0%{
		translate:110%;
		opacity:1;
	}
	63%{
		translate:-330%;
		opacity:1;
	}
	64%{
		translate:-335%;
		opacity:0;
	}
	66%{
		translate:335%;
		opacity:0;
	}
	67%{
		translate:330%;
		opacity:1;
	}
	100%{
		translate:110%;
		opacity:1;
	}
	}

	@keyframes pict-scale{
	0%{
		scale:0.6;
	}
	10%{
		scale:0.6;
	}
	15%{
		scale:1;
	}
	20%{
		scale:1;
	}
	25%{
		scale:0.6;
	}
	100%{
		scale:0.6;
	}
	}

.pict-text li{
width:100%;
text-align:center;
position:absolute;
top:65%;
left:0;
color:#ff0000;
font-size:1.4rem;
scale:0.6;
opacity:0;
}

.text-music{
animation:pict-scale 24s linear 20s backwards infinite,text-opacity 24s linear 20s backwards infinite;
}

.text-syoku{
animation:pict-scale 24s linear 16s backwards infinite,text-opacity 24s linear 16s backwards infinite;
}

.text-noh{
animation:pict-scale 24s linear 12s backwards infinite,text-opacity 24s linear 12s backwards infinite;
}

.text-kadoh{
animation:pict-scale 24s linear 8s backwards infinite,text-opacity 24s linear 8s backwards infinite;
}

.text-sadoh{
animation:pict-scale 24s linear 4s backwards infinite,text-opacity 24s linear 4s backwards infinite;
}

.text-art{
animation:pict-scale 24s linear 0s backwards infinite,text-opacity 24s linear 0s backwards infinite;
}

	@keyframes text-opacity{
	0%{
		opacity:0;
	}
	10%{
		opacity:0;
	}
	15%{
		opacity:1;
	}
	20%{
		opacity:1;
	}
	25%{
		opacity:0;
	}
	100%{
		opacity:0;
	}
	}

@media screen and (max-width:600px){

.pict-text li{
font-size:1.2rem;
}

}

/*----------学校応募枠----------*/
/*----------一般応募枠----------*/
.target{
max-width:550px;
margin:30px 0;
display:flex;
align-items:center;
border:1px solid #ff0000;
border-radius:5px;
}

.target h3{
font-size:0.8rem;
padding:10px 0;
background:#ff0000;
color:#fff;
height:100%;
width:56px;
text-align:center;
}

.target p{
font-size:0.9rem;
margin:0;
width:calc(100% - 56px);
text-align:center;
}

#submit-scl ul,#submit-gen ul{
max-width:550px;
margin:30px 0;
display:flex;
justify-content:space-between;
}

#submit-scl a,#submit-gen a{
padding:5px 13px 5px 10px;
border:1px solid #ddd;
border-radius:5px;
position:relative;
}

#submit-scl a:hover,#submit-gen a:hover{
top:-2px;
}

/* downloadーicon */
.dl{
display: inline-block;
vertical-align: middle;
color: #ddd;
line-height: 1;
position: relative;
bottom:3px;
left:5px;
width: 1.15em;
height: 1.15em;
font-size:1rem;
}

.dl::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.46em;
border: 0.1em solid currentColor;
border-top: 0;
border-radius: 0 0 0.15em 0.15em;
box-sizing: border-box;
}

.dl span {
position: relative;
width: 0.1em;
height: 0.625em;
background: currentColor;
position: absolute;
left: 0;
right: 0;
bottom: 0.353em;
margin: auto;
}

.dl span::before {
content: '';
width: 0.40625em;
height: 0.40625em;
border: 0.1em solid currentColor;
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
transform-origin: bottom left;
position: absolute;
left: 50%;
bottom: -0.05em;
box-sizing: border-box;
}
/*-------------------------*/

.genre-wrap{
width:100%;
min-height:100vh;
padding:0 0 0 50px;
display:flex;
flex-direction:column;
justify-content:center;
transition:all 1s ease;
}

.genre-wrap h3{
font-size:1.5rem;
}

.genre-wrap p{
margin:0 0 30px;
}

.genre{
border-collapse:collapse;
font-size:2rem;
width:70%;
text-align:justify;
}

.genre td{
padding-right:10px;
}

.genre  tr td:nth-child(1){
display:flex;
justify-content:space-between;
padding-right:30px;
}

.genre  tr td:nth-child(2){
border-left:2px solid #ccc;
padding:0 30px;
}

.genre  tr td:nth-child(3){
font-size:1rem;
}

@media screen and (max-width:1200px){

.genre{
font-size:2.3vw;
width:90%;
}

.genre  tr td:nth-child(3){
font-size:1.5vw;
}

}

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

.target{
max-width:600px;
}

#submit-scl ul,#submit-gen ul{
max-width:600px;
}

.genre-wrap{
max-width:600px;
min-height:auto;
padding:0;
margin:50px auto;
display:block;
}

.genre{
font-size:1.5rem;
width:100%;
}

.genre  tr td:nth-child(3){
font-size:1rem;
}

}

@media screen and (max-width:600px){

.target h3{
line-height:3;
}

.target p{
padding:0 5px 0 10px;
text-align:left;
}

#submit-scl ul,#submit-gen ul{
flex-wrap:wrap;
}

#submit-scl ul li,#submit-gen ul li{
width:48%;
margin:7px 0;
}

#submit-scl a,#submit-gen a{
display:block;
width:100%;
padding:5px 0;
text-align:center;
}

.target p span{
display:inline-block;
}

.genre-wrap{
width:100%;
margin:30px auto;
}

.genre-wrap h3{
font-size:1.3rem;
}

.genre{
font-size:1.2rem;
width:fit-content;
margin:0 auto;
}

.genre  tr td:nth-child(2){
display:none;
}

.genre  tr td:nth-child(3){
font-size:1.2rem;
border-left:2px solid #ccc;
padding:0 0 0 30px;
}

}

/*----------------- photo -------------------*/
.insta-wrap{
max-width:615px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
padding-left:5%;
margin:0 auto;
}

.insta-wrap li{
width:45%;
margin:20px 0;
}

.insta-wrap img{
width:100%;
aspect-ratio:9 / 6;
object-fit:cover;
}

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

.insta-wrap{
padding-left:0;
}

.insta-wrap li{
width:47%;
}

}

@media screen and (max-width:600px){

.insta-wrap li{
width:100%;
}

}


/*----------------- お問い合わせ -------------------*/
#contact form li{
display:flex;
align-items:center;
margin:30px 0;
padding-left:10%;
}

#contact label{
display:block;
width:10%;
min-width:130px;
}

#contact input[type="text"],#contact input[type="mail"]{
display:block;
width:65%;
max-width:500px;
height:2.3em;
font-size:1rem;
font-weight:300;
border:1px solid #ccc;
border-radius:5px;
padding:0 10px;
font-family:inherit;
}

#contact input:focus{
outline:2px solid #bbb;
}

#contact textarea{
width:65%;
max-width:500px;
height:25vh;
max-height:200px;
resize:none;
font-size:0.9rem;
font-weight:300;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
font-family:inherit;
}

#contact textarea:focus{
outline:2px solid #bbb;
}

#contact form div{
width:65%;
max-width:500px;
font-size:0.8rem;
}

#contact form div a{
border-bottom:0.5px solid #ccc;
}

#contact form div a:hover{
position:relative;
top:-2px;
}

#contact input[type="checkbox"]{
cursor:pointer;
display:inline-block;
margin-right:5px;
accent-color:#ff0000;
}

#contact input[type="submit"]{
display:block;
width:65%;
max-width:500px;
height:2.5em;
line-height:2.5em;
font-size:0.9rem;
font-weight:300;
border-radius:5px;
padding:0 10px;
cursor:pointer;
background:#ddd;
border:none;
font-family:inherit;
color:#000;
}

#contact input[type="submit"]:hover{
position:relative;
top:-2px;
box-shadow:0 2px 0 rgba(0,0,0,0.3);
}

#contact input[type="submit"]:active{
position:relative;
top:0;
box-shadow:0 0 0 rgba(0,0,0,0);
}

#contact form li:nth-child(5)::before{
content:'';
display:block;
width:10%;
min-width:130px;
}

.prof{
margin-left:10%;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
top:-10px;
}

.prof li:nth-child(1){
font-size:1.9rem;
}

.prof li:nth-child(1) span{
display:inline-block;
width:auto;
}

.prof li:nth-child(2){
margin-bottom:30px;
}

.prof span{
display:inline-block;
width:50px;
}

.prof li:nth-child(6){
margin-top:20px;
text-align:left;
}

span.ex{
width:auto;
}

.prof a{
border-bottom:1px solid #ccc;
}

#result a{
color:#ff0000;
text-decoration:underline;
}

#result ul li{
margin-bottom:20px;
font-size:1rem;
border-bottom:1px solid #fff;
background:#eee;
}

#result ul span{
font-size:0.8rem;
padding-left:10px;
}

#result ul div{
font-size:0.8rem;
background:#fff;
line-height:2.5;
}

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

#contact{
min-height:auto;
padding:70px 10px 0;
}

#contact form{
padding-top:30px;
}

#contact form li{
padding-left:0;
}

#contact label{
width:30%;
}

#contact form li:nth-child(5)::before{
width:30%;
}

#contact input[type="text"],#contact input[type="mail"],#contact textarea,#contact input[type="submit"]{
width:70%;
}

.prof{
margin:100px auto;
min-height:auto;
display:block;
position:static;
text-align:center;
}

.prof li:nth-child(6){
text-align:center;
}

}

@media screen and (max-width:600px){

#contact form{
padding-top:0
}

#contact form li{
display:block;
}

#contact label{
width:100%;
}

#contact form li:nth-child(5)::before{
width:100%;
}

#contact input[type="text"],#contact input[type="mail"],#contact textarea,#contact input[type="submit"],#contact form div{
width:100%;
max-width:600px;
}

.prof li:nth-child(1){
font-size:1.5rem;
line-height:1.5;
margin-bottom:10px;
}

}

/*----------------- プライバシーポリシー -------------------*/

#policy main{
max-width:900px;
padding:0 10px;
margin:0 auto;
}

#policy h1{
font-size:1.7rem;
border-bottom:2px solid #ff0000;
padding-top:30px;
margin-bottom:20px;
position:sticky;
top:0;
background:#fff;
}

#policy h2{
position:static;
min-height:auto;
font-size:1.2rem;
margin-top:20px;
}

#policy p{
margin-bottom:10px;
}

#policy ul{
margin-bottom:10px;
}

.close-info{
font-size:1.2rem;
color:#ff0000;
text-align:center;
margin:100px 0 0;
}

@media screen and (max-width:600px){

#policy h1{
font-size:1.4rem;
padding-top:10px;
}

}

/*----------------- footer -------------------*/
footer{
max-width:1200px;
min-height:100vh;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
margin:0 auto;
padding-bottom:15px;
position:relative;
}

footer img{
display:block;
width:35%;
}

footer p{
position:absolute;
width:100%;
bottom:15px;
left:0;
}

#policy footer{
min-height:50vh;
}

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

footer{
justify-content:flex-start;
max-width:600px;
padding:40vh 0 0;
margin:0 auto;
}

footer img{
width:70%;
}

#top footer p{
bottom:80px;
}

#policy footer{
padding:20vh 0 0;
}

}

/*----------------- フィックスアニメーションキューブ -------------------*/
#fa-wrap{
width:12%;
max-width:calc(1200px * 0.12);
height:100vh;
position:fixed;
top:0;
left:auto;
margin-left:20px;
display:flex;
align-items:center;
}

#fix-anm{
width:100%;
aspect-ratio:1 / 1.5;
position:relative;
opacity:0;
transition:opacity 0.3s ease-out;
}

@media screen and (max-width:1240px){

#fa-wrap{
margin-left:0;
}

}

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

#fa-wrap{
left:-100vw;
display;none;
}

}

.fix-anm-cube{
position:absolute;
width:45%;
aspect-ratio:1 / 1;
background:#ff0000;
transition:all 0.4s ease-in;
}

.fix-anm-cube.sphere{
border-radius:50%;
}

.fac-1{
top:0;
left:0;
}

.fac-2{
top:0;
right:0;
}

.fac-3{
top:35%;
left:0;
}

.fac-4{
top:35%;
right:0;
}

.fac-5{
bottom:0;
left:0;
}

.fac-6{
bottom:0;
right:0;
}

/* 切り替え用アニメーション */
.fac-1.active-1{
animation:fac1-a1 7s linear forwards;
}
@keyframes fac1-a1{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(10%) translateY(16%);
}
4%{
	transform:translateX(10%) translateY(16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-2.active-1{
animation:fac2-a1 7s linear forwards;
}
@keyframes fac2-a1{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(-12%) translateY(16%);
}
4%{
	transform:translateX(-12%) translateY(16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-3.active-1{
animation:fac3-a1 7s linear forwards;
}
@keyframes fac3-a1{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(12%) translateY(0);
}
4%{
	transform:translateX(12%) translateY(0);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-4.active-1{
animation:fac4-a1 7s linear forwards;
}
@keyframes fac4-a1{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(-12%) translateY(0);
}
4%{
	transform:translateX(-12%) translateY(0);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-5.active-1{
animation:fac5-a1 7s linear forwards;
}
@keyframes fac5-a1{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(12%) translateY(-16%);
}
4%{
	transform:translateX(12%) translateY(-16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-6.active-1{
animation:fac6-a1 7s linear forwards;
}
@keyframes fac6-a1{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(-12%) translateY(-16%);
}
4%{
	transform:translateX(-12%) translateY(-16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

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

.fac-1.active-2{
animation:fac1-a2 7s linear forwards;
}
@keyframes fac1-a2{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(10%) translateY(16%);
}
4%{
	transform:translateX(10%) translateY(16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-2.active-2{
animation:fac2-a2 7s linear forwards;
}
@keyframes fac2-a2{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(-12%) translateY(16%);
}
4%{
	transform:translateX(-12%) translateY(16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-3.active-2{
animation:fac3-a2 7s linear forwards;
}
@keyframes fac3-a2{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(12%) translateY(0);
}
4%{
	transform:translateX(12%) translateY(0);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-4.active-2{
animation:fac4-a2 7s linear forwards;
}
@keyframes fac4-a2{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(-12%) translateY(0);
}
4%{
	transform:translateX(-12%) translateY(0);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-5.active-2{
animation:fac5-a2 7s linear forwards;
}
@keyframes fac5-a2{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(12%) translateY(-16%);
}
4%{
	transform:translateX(12%) translateY(-16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}

.fac-6.active-2{
animation:fac6-a2 7s linear forwards;
}
@keyframes fac6-a2{
0%{
	transform:translateX(0) translateY(0);
}
2%{
	transform:translateX(-12%) translateY(-16%);
}
4%{
	transform:translateX(-12%) translateY(-16%);
}
6%{
	transform:translateX(0) translateY(0);
}
100%{
	transform:translateX(0) translateY(0);
}
}


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

#fix-anm{
width:20%;
max-width:auto;
position:absolute;
top:auto;
bottom:-50vh;
left:0;
right:0;
margin:0 auto;
}

}


/*----------------- スクロールポイントキューブ -------------------*/
#scrl-point{
height:150px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:fixed;
top:0;
bottom:0;
right:calc(50vw - 580px);
margin:auto;
transition:all 0.5s ease;
opacity:0;
}

@media screen and (max-width:1200px){

#scrl-point{
right:20px;
}

}

#scrl-point div{
width:0.6rem;
aspect-ratio:1 / 1;
margin:1px 0;
background:#ddd;
transition:all 0.5s ease;
}

#scrl-point div.here{
width:1rem;
background:#ff0000;
pointer-events:none;
}

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

#scrl-point{
right:-100vw;
}

}