@charset "utf-8";
/* CSS Document */


/* main_view
   ========================================================================== */
@keyframes main_bg01 {
  0% { opacity: 1; transform: scale(1,1);}
  25% { opacity: 1;}
  30% { opacity: 0; transform: scale(1.3,1.3);}
  100% { opacity: 0;}
}

@keyframes main_bg02 {
  0% { opacity: 0; transform: scale(1,1);}
  20% { opacity: 0; transform: scale(1,1);}
  25% { opacity: 1;}
  50% { opacity: 1;}
  55% { opacity: 0; transform: scale(1.3,1.3);}
  100% { opacity: 0;}
}


/* anime_box
   ========================================================================== */
@keyframes anime01 {
  0% { transform: rotate(0);}
  12% { transform: rotate(-310deg);}
  24% { transform: rotate(0);}
  36% { transform: rotate(-310deg);}
  48% { transform: rotate(-45deg);}
  60% { transform: rotate(270deg);}
  72% { transform: rotate(45deg);}
  84% { transform: rotate(230deg);}
  100% { transform: rotate(0);}
}

@keyframes anime02 {
  0% { transform: rotate(0);}
  13% { transform: rotate(-238deg);}
  25% { transform: rotate(1deg);}
  36% { transform: rotate(-238deg);}
  48% { transform: rotate(-41deg);}
  60% { transform: rotate(342deg);}
  72% { transform: rotate(41deg);}
  84% { transform: rotate(302deg);}
  100% { transform: rotate(0);}
}

@keyframes anime03 {
  0% { transform: rotate(0);}
  14% { transform: rotate(-166deg);}
  26% { transform: rotate(2deg);}
  36% { transform: rotate(-166deg);}
  48% { transform: rotate(-42deg);}
  60% { transform: rotate(414deg);}
  72% { transform: rotate(42deg);}
  84% { transform: rotate(374deg);}
  100% { transform: rotate(0);}
}

@keyframes anime04 {
  0% { transform: rotate(0);}
  15% { transform: rotate(-94deg);}
  27% { transform: rotate(3deg);}
  36% { transform: rotate(-94deg);}
  48% { transform: rotate(-43deg);}
  60% { transform: rotate(486deg);}
  72% { transform: rotate(43deg);}
  84% { transform: rotate(446deg);}
  100% { transform: rotate(0);}
}

@keyframes anime05 {
  0% { transform: rotate(0);}
  16% { transform: rotate(-22deg);}
  28% { transform: rotate(4deg);}
  36% { transform: rotate(-22deg);}
  48% { transform: rotate(-44deg);}
  60% { transform: rotate(558deg);}
  72% { transform: rotate(44deg);}
  84% { transform: rotate(518deg);}
  100% { transform: rotate(0);}
}

@keyframes anime06 {
  0% { transform: rotate(0);}
  17% { transform: rotate(48deg);}
  29% { transform: rotate(5deg);}
  36% { transform: rotate(48deg);}
  48% { transform: rotate(-44deg);}
  60% { transform: rotate(630deg);}
  72% { transform: rotate(45deg);}
  84% { transform: rotate(590deg);}
  100% { transform: rotate(0);}
}


/* ja_en
   ========================================================================== */
@keyframes arrow01 {
  0% { color: #E4161A;}
  16% { color: #fff;}
  32% { color: #FFDCD0;}
  48% { color: #FFBFBF;}
  64% { color: #FF9999;}
  80% { color: #FF4D4D;}
  100% { color: #E4161A;}
}

@keyframes arrow02 {
  0% { color: #FF4D4D;}
  16% { color: #E4161A;}
  32% { color: #fff;}
  48% { color: #FFDCD0;}
  64% { color: #FFBFBF;}
  80% { color: #FF9999;}
  100% { color: #FF4D4D;}
}

@keyframes arrow03 {
  0% { color: #FF9999;}
  16% { color: #FF4D4D;}
  32% { color: #E4161A;}
  48% { color: #fff;}
  64% { color: #FFDCD0;}
  80% { color: #FFBFBF;}
  100% { color: #FF9999;}
}

@keyframes arrow04 {
  0% { color: #FFBFBF;}
  16% { color: #FF9999;}
  32% { color: #FF4D4D;}
  48% { color: #E4161A;}
  64% { color: #fff;}
  80% { color: #FFDCD0;}
  100% { color: #FFBFBF;}
}

@keyframes arrow05 {
  0% { color: #FFDCD0;}
  16% { color: #FFBFBF;}
  32% { color: #FF9999;}
  48% { color: #FF4D4D;}
  64% { color: #E4161A;}
  80% { color: #fff;}
  100% { color: #FFDCD0;}
}

@keyframes arrow06 {
  0% { color: #fff;}
  16% { color: #FFDCD0;}
  32% { color: #FFBFBF;}
  48% { color: #FF9999;}
  64% { color: #FF4D4D;}
  80% { color: #E4161A;}
  100% { color: #fff;}
}


/* fill
   ========================================================================== */
.fill,
.fill02{
	position: relative;
	overflow: hidden;
}

.fill::before{
	content: "";
	width: 1000%;
	height: 100%;
	background: #003586;
	position: absolute;
	top: 0;
	left: -1000%;
	z-index: 1;
	transition: ease-in-out .9s;
}

.fill::after{
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: ease-in-out .5s;
}

.fill.on::before{
	left: 100%;
}

.fill.on::after{
	left: 100%;
}


/* fill02
   ========================================================================== */
.fill02::before{
	content: "";
	width: 1000%;
	height: 100%;
	background: #003586;
	position: absolute;
	top: 0;
	right: -1000%;
	transition: ease-in-out 1.1s;
}

.fill02::after{
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0;
	right: 0;
	transition: ease-in-out .5s;
}

.fill02.on::before{
	right: 100%;
}

.fill02.on::after{
	right: 100%;
}

@media screen and (min-width : 768px){

	/* fill
	   ========================================================================== */
	.fill,
	.fill02{
		display: inline-block;
	}
	
}