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


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

　   ローディングアニメーション

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

#loading {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    background-color: #333;
	}
#loading .f_logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 300px;
    height: 100px;
    text-align: center;
    color: #fff;
    font-size: 30px;
	}
#loading .f_logo img {
    width: 100%;
    height: auto;
	}
#loading .f_logo:before {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background-color: #333;
    position: absolute;
    top: 0;
    left: 100%;
    -webkit-animation: loadLogo 1s;
    -o-animation: loadLogo 1s;
	animation: loadLogo 1s;
	}	
	@keyframes loadLogo {
		0% {
			left: 0;
			}
		50% {
			left: 0;
			}
		100% {
			left: 100%;
			}
		}
#loading .f_logo:before {
	-webkit-animation: loadLogo 1s;
	-o-animation: loadLogo 1s;
    animation: loadLogo 1s;
	}
#loading.open {
	-webkit-animation-name: slideOut;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-o-animation-name: slideOut;
    -o-animation-fill-mode: forwards;
    -o-animation-duration: 1s;
    -o-animation-delay: 1s;
	-o-animation-timing-function: ease-in-out;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: 1s;
	animation-timing-function: ease-in-out;
	}
	@keyframes slideOut {
		0% {
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
		}
		49% {
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 0.98; 
		}
		50% {
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 0.95; 
		}
		100% {
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
		}
	}
	@media only screen and (max-width: 767px) {
		#loading .f_logo {
			width: 200px;
			height: 100px;
			}
		}









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

　   header

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

header#header{}

	@media only screen and (max-width: 1100px) {}
	@media only screen and (max-width: 900px) {}
	@media only screen and (max-width: 767px) {}
	@media only screen and (max-width: 600px) {}
	@media only screen and (max-width: 480px) {}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}



.top_main___lead{
	position: absolute;
	top: 95%;
	left: 50%;
	transform: translateY(-95%) translateX(-50%);
	-webkit- transform: translateY(-95%) translateX(-50%);
	width: 92%;
	z-index: 10;
	}
.top_main___lead .catch{}
.top_main___lead .catch .catch_item{
	margin-bottom: 1rem;
	}
.top_main___lead .catch span{
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 100%;
	}

	@media only screen and (max-width: 900px) {
		.top_main___lead .catch span{
			font-size: 2rem;
			}
		.top_main___lead .catch .catch_item{
			margin-bottom: 0.5rem;
			}
		}
	@media only screen and (max-width: 767px) {
		.top_main___lead .catch span{
			font-size: 1.5rem;
			}
		.top_main___lead .catch .catch_item{
			margin-bottom: 0.25rem;
			}
		}
	@media only screen and (max-width: 600px) {
		.top_main___lead{
			position: absolute;
			top: 80%;
			left: 50%;
			transform: translateY(-80%) translateX(-50%);
			-webkit- transform: translateY(-80%) translateX(-50%);
			width: 92%;
			z-index: 10;
			}
		.top_main___lead .catch span{
			font-size: 1.5rem;
			}
		.top_main___lead .catch .catch_item{
			margin-bottom: 0.1rem;
			}
		}
	@media only screen and (max-width: 540px) {}
	@media only screen and (max-width: 480px) {
		.top_main___lead .catch span{
			}
		.top_main___lead .catch .catch_item{
			margin-bottom: 0!important;
			line-height: 180%;
			}
		}
	@media only screen and (max-width: 400px) {}
	@media only screen and (max-width: 360px) {
		}









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

　   main

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