@charset "UTF-8";

/*--------------------------------------------
WELCOME
---------------------------------------------*/

#welcome .box{
	background-color : #fff;
	display : grid;
}

@media screen and (max-width: 768px){
	#welcome{
		padding-left : 0;
		padding-right : 0;
	}
	#welcome .box{
		padding-bottom : calc( 80 * 100vw / 768 );
	}
	#welcome svg{
		width : 100%;
		height : auto;
		grid-row : 1;
	}
	#welcome .texts{
		margin-top : calc( 64 * 100vw / 768 );
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
		grid-row : 2;
	}
	#welcome .lede01{
		margin-top : calc( 48 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#welcome svg{
		flex-shrink : 0;
	}
	#welcome .box{
		align-items : center;
		justify-content : space-between;
	}
	#welcome .texts{
		display : grid;
	}
	#welcome .lede01{
		display : inline-block;
		margin-left : auto;
		margin-right : auto;
	}
}

@media screen and (min-width: 769px) and (max-width:1279px){
	#welcome{
		padding-top : calc( 80 * 100vw / 1280 );
		padding-bottom : calc( 80 * 100vw / 1280 );
	}
	#welcome .box{
		grid-template-columns : 1fr calc( 500 * 100% / 1240 );
	}
	#welcome .texts{
		padding-left : calc( 24 * 100vw / 1280 );
		padding-right : calc( 24 * 100vw / 1280 );
	}
	#welcome .lede01{
		margin-top : calc( 36 * 100vw / 1280 );
	}
	#welcome svg{
		width : calc( 500 * 100vw / 1280 );
		height : auto;
	}
}

@media print,screen and (min-width: 1280px){
	#welcome{
		padding-top : 80px;
		padding-bottom : 80px;
	}
	#welcome .box{
		grid-template-columns : 1fr 500px;
	}
	#welcome .texts{
		padding-left : 24px;
		padding-right : 24px;
	}
	#welcome .lede01{
		margin-top : 36px;
	}
	#welcome svg{
		width : 500px;
		height : auto;
	}
}

/*--------------------------------------------
FLAG
---------------------------------------------*/

#flag #bg{
	fill : #fff;
}

#flag #body{
	fill : transparent;
	will-change : fill;
}

#flag #line , #flag #body{
	stroke-width : 2px;
	stroke : #b41a3d;
	stroke-miterlimit : 10;
	will-change : stroke-dashoffset , stroke-dasharray;
}

#flag #line{
	stroke-dasharray : 1000;
	stroke-dashoffset : 1000;
	fill : transparent;
}

#flag #body{
	stroke-dasharray : 5000;
	stroke-dashoffset : 5000;
}

#flag #stars path{
	opacity : 0;
	fill : #fff;
}

#flag #border01 , #flag #border02 , #flag #border03 , #flag #border04 , #flag #border05 , #flag #border06{
	fill : #fff;
	transform : translateX(100%);
}

#flag #warawara path , #flag #kansai path{
	fill : transparent;
}

#flag:not(.is-animation) #body{
	fill : #fff;
}

#flag.is-animation #bg{
	animation : bg01 5s linear forwards 1s;
}

#flag.is-animation #body{
	animation : body 5s linear forwards;
}

#flag.is-animation #line{
	animation : dash 1s linear forwards 4s;
}

#flag.is-animation #star01{
	animation : opacity .5s linear forwards;
}

#flag.is-animation #star02{
	animation : opacity .5s linear forwards .125s;
}

#flag.is-animation #star03{
	animation : opacity .5s linear forwards .25s;
}

#flag.is-animation #star04{
	animation : opacity .5s linear forwards .375s;
}

#flag.is-animation #star05{
	animation : opacity .5s linear forwards .5s;
}

#flag.is-animation #star06{
	animation : opacity .5s linear forwards .625s;
}

#flag.is-animation #star07{
	animation : opacity .5s linear forwards .75s;
}

#flag.is-animation #star08{
	animation : opacity .5s linear forwards .875s;
}

#flag.is-animation #star09{
	animation : opacity .5s linear forwards 1s;
}

#flag.is-animation #star10{
	animation : opacity .5s linear forwards 1.125s;
}

#flag.is-animation #star11{
	animation : opacity .5s linear forwards 1.25s;
}

#flag.is-animation #star12{
	animation : opacity .5s linear forwards 1.375s;
}

#flag.is-animation #star13{
	animation : opacity .5s linear forwards 1.5s;
}

#flag.is-animation #star14{
	animation : opacity .5s linear forwards 1.625s;
}

#flag.is-animation #star15{
	animation : opacity .5s linear forwards 1.75s;
}

#flag.is-animation #star16{
	animation : opacity .5s linear forwards 1.875s;
}

#flag.is-animation #star17{
	animation : opacity .5s linear forwards 2s;
}

#flag.is-animation #star18{
	animation : opacity .5s linear forwards 2.125s;
}

#flag.is-animation #star19{
	animation : opacity .5s linear forwards 2.25s;
}

#flag.is-animation #star20{
	animation : opacity .5s linear forwards 2.375s;
}

#flag.is-animation #star21{
	animation : opacity .5s linear forwards 2.5s;
}

#flag.is-animation #star22{
	animation : opacity .5s linear forwards 2.625s;
}

#flag.is-animation #border01{
	animation : slideleft 1s linear forwards;
}

#flag.is-animation #border02{
	animation : slideleft 1s linear forwards .5s;
}

#flag.is-animation #border03{
	animation : slideleft 1s linear forwards 1s;
}

#flag.is-animation #border04{
	animation : slideleft 1s linear forwards 1.5s;
}

#flag.is-animation #border05{
	animation : slideleft 1s linear forwards 2s;
}

#flag.is-animation #border06{
	animation : slideleft 1s linear forwards 2.5s;
}

#flag.is-animation #warawara path , #flag.is-animation #kansai path{
	animation : title 1s linear forwards 5s;
}

#flag.is-animation #kansai path{
	animation : title 1s linear forwards 5.5s;
}

@keyframes bg01{
	to{
		fill : #b41a3d;
	}
}

@keyframes body{
	0%{
		fill : transparent;
	}
	99%{
		fill : transparent;
	}
	100%{
		fill : #fff;
		stroke-dashoffset : 0;
	}
}

@keyframes dash{
	to{
		stroke-dashoffset : 0;
	}
}

@keyframes opacity{
	to{
		opacity : 1;
	}
}

@keyframes slideleft{
	to{
		transform : translateX(0);
	}
}

@keyframes title{
	to{
		fill : #b41a3d;
	}
}