@charset "utf-8";
/* ========================================================
	template.css => テンプレート用CSS
======================================================== */

html,
body {
	height: 100%;
}

/* pagetop
============================================================================================================ */
#pagetop a {
	-webkit-transition-duration: 0.6s;
	-o-transition-duration: 0.6s;
	transition-duration: 0.6s;
}
#pagetop a.show {
	-webkit-transition-delay: .9s;
	-o-transition-delay: .9s;
	transition-delay: .9s;
}
@media screen and (max-height: 800px) {
	#pagetop {
		height: 120px;
	}
}
@media screen and (max-height: 740px) {
	#pagetop {
		height: 100px;
	}
}

/* footer
============================================================================================================ */
#footer {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0;
	z-index: 10;
}
@media screen and (max-height: 800px) {
	#footer small {
		height: 60px;
		padding-top: 20px;
	}
}
@media screen and (max-height: 740px) {
	#footer small {
		height: 40px;
		padding-top: 10px;
	}
}


/* indexHeader
============================================================================================================ */
#indexHeader {
	position: fixed;
	left: 0;
	top: 50%;
	width: 250px;
	text-align: center;
	margin-top: -240px;
	font-size: 15px;
	font-size: 1.5rem;
	z-index: 10;
}
#indexHeader h1 {
	display: block;
	padding: 35px 0;
	background-color: #fff;
	color: #000;
	font-weight: normal;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
}
#indexHeader h1 span {
	display: block;
}
#indexHeader h1 > span {
	margin-top: 10px;
}
#indexHeader h1 > span:before {
	content: "";
	display: block;
	width: 30px;
	margin: 0 auto;
	padding-top: 15px;
	border-top: 1px solid #343434;
}
#indexHeader h1 span span {
	font-size: 11px;
	font-size: 1.1rem;
}
#indexHeader li {
	margin-top: 10px;
}
#indexHeader li a {
	display: block;
	padding: 6px;
	text-decoration: none;
	color: #fff;
}
#indexHeader li a:hover,
#indexHeader li a.current {
	background-color: #fff;
	color: #000;
}
@media screen and (max-width: 1240px) {
	#indexHeader {
		width: 200px;
	}
}



/* indexContainer
============================================================================================================ */
#indexContainer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


/* main
============================================================================================================ */
#main {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 650px;
	height: 660px;
	margin: -370px 0 0 -325px;
	z-index: 10;
	text-align: center;
}
@media screen and (max-width: 1080px) {
	#main {
		margin-left: -300px;
	}
}
@media screen and (max-width: 1000px) {
	#main {
		margin-left: -280px;
	}
}
@media screen and (max-width: 980px) {
	#main {
		margin-left: -260px;
	}
}


#main > * {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	-webkit-transition-property: opacity, -webkit-transform;
	-o-transition-property: opacity, -o-transform;
	transition-property: opacity, transform;
	-webkit-transition-duration: 0.6s;
	-o-transition-duration: 0.6s;
	transition-duration: 0.6s;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.mov #main > * {
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

/* txt01 */
#main .txt01 {
	top: 70px;
}
.mov #main .txt01 {
	opacity: 0;
}

/* logo */
#main .logo {
	top: 170px;
	-webkit-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
	z-index: 3;
}
#main .logo p {
	position: absolute;
	top: 0;
	-webkit-transition: opacity 0.3s 0.2s ease-in-out;
	-o-transition: opacity 0.3s 0.2s ease-in-out;
	transition: opacity 0.3s 0.2s ease-in-out;
}
#main .logo .a {
	opacity: 0;
}
.mov #main .logo {
	-webkit-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale(0.5) translateY(-270px);
	-ms-transform: scale(0.5) translateY(-270px);
	-o-transform: scale(0.5) translateY(-270px);
	transform: scale(0.5) translateY(-270px);
}
.mov #main .logo p {
	-webkit-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.mov #main .logo .f {
	opacity: 0;
}
.mov #main .logo .a {
	opacity: 1;
}



/* logo_bg */
#main .logo_bg {
	top: 0;
	height: 250px;
	background: url(../images/main_logo_bg.png) no-repeat 50%;
	opacity: 0;
}
.mov #main .logo_bg {
	opacity: 1;
}

/* txt02 */
#main .txt02 {
	top: 145px;
	-webkit-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
	-webkit-transform: translateY(235px);
	-ms-transform: translateY(235px);
	-o-transform: translateY(235px);
	transform: translateY(235px);
}
.mov #main .txt02 {
	-webkit-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

/* item */
#main .item {
	top: 370px;
	-webkit-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
	-webkit-transform: scale(0.6) translateY(0);
	-ms-transform: scale(0.6) translateY(0);
	-o-transform: scale(0.6) translateY(0);
	transform: scale(0.6) translateY(0);
}
.mov #main .item {
	-webkit-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: scale(1) translateY(-180px);
	-ms-transform: scale(1) translateY(-180px);
	-o-transform: scale(1) translateY(-180px);
	transform: scale(1) translateY(-180px);
}

/* feature */
#main .feature {
	top: 480px;
	left: 50%;
	right: auto;
	width: 600px;
	margin-left: -300px;
	font-size: 15px;
	font-size: 1.5rem;
}
#main .feature li {
	float: left;
	padding: 0 10px;
	-webkit-transition: -webkit-transform 0.6s ease;
	-o-transition: -o-transform 0.6s ease;
	transition: transform 0.6s ease;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
}
#main .feature a {
	display: block;
	color: #000;
	text-decoration: none;
}
#main .feature a span {
	display: block;
}
#main .feature a .img {
	overflow: hidden;
	border-radius: 100%;
	width: 130px;
	height: 130px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#main .feature a .txt {
	margin-top: 6px;
}

#main .feature a.bd .img {
	border: 5px solid #fff;
}

.mov #main .feature li {
	-webkit-transition-delay: .8s;
	-o-transition-delay: .8s;
	transition-delay: .8s;
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
.mov #main .feature li:nth-child(2) {
	-webkit-transition-delay: .9s;
	-o-transition-delay: .9s;
	transition-delay: .9s;
}
.mov #main .feature li:nth-child(3) {
	-webkit-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s;
}
.mov #main .feature li:nth-child(4) {
	-webkit-transition-delay: 1.1s;
	-o-transition-delay: 1.1s;
	transition-delay: 1.1s;
}

/* linet */
#main .linet {
	bottom: 620px;
	left: 50%;
	right: auto;
	height: 2000px;
	margin-left: -1px;
	border-left: 2px solid #fff;
}
.mov #main .linet {
	-webkit-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px);
}

/* lineb */
#main .lineb {
	top: 620px;
	left: 50%;
	width: 30px;
	right: auto;
	overflow: hidden;
	margin-left: -1px;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.5s 0s ease-in-out, top 0.6s 0s ease-in-out;
	-o-transition: -o-transform 0.5s 0s ease-in-out, top 0.6s 0s ease-in-out;
	transition: transform 0.5s 0s ease-in-out, top 0.6s 0s ease-in-out;
}
#main .lineb span {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	border-left: 2px solid #fff;
	-webkit-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	transition-delay: 0.7s;
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
#main .lineb .arrow {
	-moz-animation: arrow 1.8s ease 0s infinite;
	-webkit-animation: arrow 1.8s ease 0s infinite;
	-o-animation: arrow 1.8s ease 0s infinite;
	-ms-animation: arrow 1.8s ease 0s infinite;
	animation: arrow 1.8s ease 0s infinite;
}
#main .lineb .arrow:after {
	content: "";
	position: absolute;
	height: 30px;
	left: 0;
	bottom: 0;
	margin-left: -2px;
	border-left: 2px solid #fff;
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-transform: scale(0.8) rotate(45deg);
	-ms-transform: scale(0.8) rotate(45deg);
	-o-transform: scale(0.8) rotate(45deg);
	transform: scale(0.8) rotate(45deg);
}
#main .lineb .line {
	opacity: 0;
}
@-moz-keyframes arrow {
	0% {top: 0; left: 0;}
	40% {top: 0;}
	70% {top: 110%; left: 0;}
	70.1% {top: 110%; left: -50px;}
	70.2% {top: -110%;}
	70.3% {top: -110%; left: 0;}
	100% {top: 0; left: 0;}
}
@-webkit-keyframes arrow {
	0% {top: 0; left: 0;}
	40% {top: 0;}
	70% {top: 110%; left: 0;}
	70.1% {top: 110%; left: -50px;}
	70.2% {top: -110%;}
	70.3% {top: -110%; left: 0;}
	100% {top: 0; left: 0;}
}
@-o-keyframes arrow {
	0% {top: 0; left: 0;}
	40% {top: 0;}
	70% {top: 110%; left: 0;}
	70.1% {top: 110%; left: -50px;}
	70.2% {top: -110%;}
	70.3% {top: -110%; left: 0;}
	100% {top: 0; left: 0;}
}
@-ms-keyframes arrow {
	0% {top: 0; left: 0;}
	40% {top: 0;}
	70% {top: 110%; left: 0;}
	70.1% {top: 110%; left: -50px;}
	70.2% {top: -110%;}
	70.3% {top: -110%; left: 0;}
	100% {top: 0; left: 0;}
}
@keyframes arrow {
	0% {top: 0; left: 0;}
	40% {top: 0;}
	70% {top: 110%; left: 0;}
	70.1% {top: 110%; left: -50px;}
	70.2% {top: -110%;}
	70.3% {top: -110%; left: 0;}
	100% {top: 0; left: 0;}
}

.mov #main .lineb {
	-webkit-transition: -webkit-transform 0.5s 0s ease-in-out, top 0.6s 0.7s ease-in-out;
	-o-transition: -o-transform 0.5s 0s ease-in-out, top 0.6s 0.7s ease-in-out;
	transition: transform 0.5s 0s ease-in-out, top 0.6s 0.7s ease-in-out;
	-webkit-transform: scaleY(2);
	-ms-transform: scaleY(2);
	-o-transform: scaleY(2);
	transform: scaleY(2);
	top: 670px;
}
.mov #main .lineb span {
	-webkit-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}
.mov #main .lineb .arrow {
	opacity: 0;
}
.mov #main .lineb .line {
	opacity: 1;
}

/* next */
#main .next {
	top: 620px;
	left: 50%;
	width: 180px;
	margin-left: -120px;
	padding: 0 30px;
	text-align: right;
	right: auto;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: 2px;
	-webkit-transition: opacity 0.3s 0.4s ease, height 0.1s 0.3s;
	-o-transition: opacity 0.3s 0.4s ease, height 0.1s 0.3s;
	transition: opacity 0.3s 0.4s ease, height 0.1s 0.3s;
}
#main .next:hover {
	color: #82d3fd;
}
.mov #main .next {
	-webkit-transition: opacity 0.3s 0s ease, height 0.1s 0.3s;
	-o-transition: opacity 0.3s 0s ease, height 0.1s 0.3s;
	transition: opacity 0.3s 0s ease, height 0.1s 0.3s;
	opacity: 0;
	height: 0 !important;
}

@media screen and (max-height: 850px) {
}
@media screen and (max-height: 810px) {
	#main .lineb,
	#main .next {
		top: 600px;
	}
}
@media screen and (max-height: 700px) {
	.mov #main .item {
		-webkit-transform: scale(0.9) translateY(-190px);
		-ms-transform: scale(0.9) translateY(-190px);
		-o-transform: scale(0.9) translateY(-190px);
		transform: scale(0.9) translateY(-190px);
	}
	#main .feature {
		top: 480px;
	}
	#main .lineb,
	#main .next {
		top: 590px;
	}
}
@media screen and (max-height: 650px) {
	.mov #main .logo {
		-webkit-transform: scale(0.5) translateY(-210px);
		-ms-transform: scale(0.5) translateY(-210px);
		-o-transform: scale(0.5) translateY(-210px);
		transform: scale(0.5) translateY(-210px);
	}
	.mov #main .txt02 {
		-webkit-transform: translateY(30px);
		-ms-transform: translateY(30px);
		-o-transform: translateY(30px);
		transform: translateY(30px);
	}
	.mov #main .item {
		-webkit-transform: scale(0.85) translateY(-210px);
		-ms-transform: scale(0.85) translateY(-210px);
		-o-transform: scale(0.85) translateY(-210px);
		transform: scale(0.85) translateY(-210px);
	}
	#main .feature {
		top: 460px;
	}
}
@media screen and (max-height: 600px) {
	.mov #main .logo {
		-webkit-transform: scale(0.5) translateY(-200px);
		-ms-transform: scale(0.5) translateY(-200px);
		-o-transform: scale(0.5) translateY(-200px);
		transform: scale(0.5) translateY(-200px);
	}
	.mov #main .item {
		-webkit-transform: scale(0.8) translateY(-230px);
		-ms-transform: scale(0.8) translateY(-230px);
		-o-transform: scale(0.8) translateY(-230px);
		transform: scale(0.8) translateY(-230px);
	}
	#main .feature {
		top: 440px;
	}
}


/* bg
============================================================================================================ */
.bg {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 0;
	background-position: 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-size: cover;
	background-size: cover;
}
.mov .bg {
	height: 100%;
	-webkit-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
}

.bg01 {
	height: 100%;
	background-image: url(../images/bg01.jpg);
}
.bg02 {
	-webkit-transition: height 0.8s;
	-o-transition: height 0.8s;
	transition: height 0.8s;
	-webkit-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	background-image: url(../images/bg02.jpg);
}



/* print
============================================================================================================ */
@media print {
	#indexHeader {
		display: none;
	}
	#indexContainer {
		position: absolute;
	}
	.bg02 {
		height: 100% !important;
	}
	#main .txt01 {
		display: none;
	}
	#main .logo {
		-webkit-transform: scale(0.5) translateY(-280px);
		-ms-transform: scale(0.5) translateY(-280px);
		-o-transform: scale(0.5) translateY(-280px);
		transform: scale(0.5) translateY(-280px);
	}
	#main .logo .f {
		display: none;
	}
	#main .logo .a {
		opacity: 1 !important;
	}
	#main .logo_bg {
		opacity: 1;
	}
	#main .txt02 {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
	#main .item {
		-webkit-transform: scale(1) translateY(-180px);
		-ms-transform: scale(1) translateY(-180px);
		-o-transform: scale(1) translateY(-180px);
		transform: scale(1) translateY(-180px);
	}
	#main .feature li {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	#main .linet {
		-webkit-transform: translateY(-40px);
		-ms-transform: translateY(-40px);
		-o-transform: translateY(-40px);
		transform: translateY(-40px);
	}
	#main .lineb {
		-webkit-transform: scaleY(2);
		-ms-transform: scaleY(2);
		-o-transform: scaleY(2);
		transform: scaleY(2);
		top: 690px;
	}
	#main .lineb .arrow {
		opacity: 0;
	}
	#main .lineb .line {
		opacity: 1;
	}
	#main .next {
		opacity: 0;
		height: 0 !important;
	}
	#pagetop {
		display: none;
	}
}