@charset 'UTF-8';
#loading {
	position : absolute;
	width : calc(100%);
	height : 100vh;
	background-color : #f7f5f1;
	display : -webkit-flex;
	display : -ms-flexbox;
	display :         flex;
	-webkit-align-items : center;
	-ms-flex-align : center;
	        align-items : center;
	-webkit-justify-content : center;
	-ms-flex-pack : center;
	        justify-content : center;
	z-index : 30;
	transition : 1.8s background ease;
	padding : 30px;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	#loading {
		min-width : 1200px;
	}
}
@media print, screen and (min-width: 768px) {
	#loading {
		z-index : 6;
		padding : 0 0 0 100px;
	}
}
#loading .loading-container {
	display : inline-block;
	position : relative;
	border-radius : 50%;
	box-shadow : inset 0 0 0 1px #001e5a;
	transition : 1.8s box-shadow ease-out;
}
#loading .loading-container .loading-cover1, #loading .loading-container .loading-cover2 {
	position : absolute;
	overflow : hidden;
	width : 50%;
	height : 100%;
}
#loading .loading-container .loading-cover1:before, #loading .loading-container .loading-cover2:before {
	position : absolute;
	content : '';
}
#loading .loading-container .loading-cover1 {
	left : 50%;
}
#loading .loading-container .loading-cover1:before {
	width : 110%;
	height : 210%;
	background : #f7f5f1;
	-webkit-transform-origin : 0 25%;
	        transform-origin : 0 25%;
	-webkit-animation : loading-draw 2s cubic-bezier(1, 0, 0.86, 0.65) forwards;
	        animation : loading-draw 2s cubic-bezier(1, 0, 0.86, 0.65) forwards;
}
#loading .loading-container .loading-cover1.cover-show:before {
	-webkit-animation : loading-draw 2s cubic-bezier(1, 0, 0.86, 0.65) forwards;
	        animation : loading-draw 2s cubic-bezier(1, 0, 0.86, 0.65) forwards;
}
#loading .loading-container .loading-cover2:before {
	left : -10%;
	width : 110%;
	height : 120%;
	background : #f7f5f1;
	-webkit-transform-origin : 100% 40%;
	        transform-origin : 100% 40%;
}
#loading .loading-container .loading-cover2.cover2-ieshow:before {
	-webkit-animation : loading-draw 2.4s cubic-bezier(0.14, 0.35, 0.3, 1) forwards;
	        animation : loading-draw 2.4s cubic-bezier(0.14, 0.35, 0.3, 1) forwards;
}
#loading .loading-container .loading-cover2.cover-show:before {
	-webkit-animation : loading-draw 2.4s cubic-bezier(0.14, 0.35, 0.3, 1) 2s forwards;
	        animation : loading-draw 2.4s cubic-bezier(0.14, 0.35, 0.3, 1) 2s forwards;
}
#loading .loading-container:after {
	position : absolute;
	content : '';
	width : 100%;
	height : 100%;
	top : 0;
	left : 0;
	border-radius : 50%;
}
#loading .loading-container:after {
	box-shadow : inset 0 0 0 1px rgba(63, 86, 131, 0.2);
}
#loading .loading-container .loading-content {
	display : inline-block;
	position : relative;
	z-index : 2;
	padding : 40px;
	transition : 1.8s all ease-out;
	width : 210px;
	height : 210px;
}
@media print, screen and (min-width: 768px) {
	#loading .loading-container .loading-content {
		padding : 80px;
		width : 350px;
		height : 350px;
	}
}
#loading .loading-container .loading-content > svg {
	width : 130px;
	height : 130px;
}
@media print, screen and (min-width: 768px) {
	#loading .loading-container .loading-content > svg {
		width : 190px;
		height : 190px;
	}
}
#loading .loading-container .loading-content > svg .ttl-loading-svg {
	transition : 1.8s all ease-out;
}

#loading.loading-en .loading-container .loading-content {
	padding : 20px;
	width : 210px;
	height : 210px;
}
@media print, screen and (min-width: 768px) {
	#loading.loading-en .loading-container .loading-content {
		padding : 30px;
		width : 350px;
		height : 350px;
	}
}
#loading.loading-en .loading-container .loading-content > svg {
	width : 180px;
	height : 180px;
	padding-right : 0;
}
@media print, screen and (min-width: 768px) {
	#loading.loading-en .loading-container .loading-content > svg {
		width : 290px;
		height : 290px;
		padding-right : 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
	#loading.loading-en .loading-container .loading-content > svg {
		padding-right : 0;
	}
}

/* 円を描くアニメーション */
@-webkit-keyframes loading-draw {
	0% {
		-webkit-transform : rotate(0deg);
		        transform : rotate(0deg);
	}
	100% {
		-webkit-transform : rotate(180deg);
		        transform : rotate(180deg);
	}
}
@keyframes loading-draw {
	0% {
		-webkit-transform : rotate(0deg);
		        transform : rotate(0deg);
	}
	100% {
		-webkit-transform : rotate(180deg);
		        transform : rotate(180deg);
	}
}