@charset "utf-8";


/* intro
----------------------------------------------- */

.lp-intro {
	position: relative;
	z-index: 1;
}
.lp-intro__inner {
	position: relative;
	margin: auto;
	width: 970px;
	height: 500px;
	z-index: 2;
}
.lp-intro__title {
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1;
}
.lp-intro__logo {
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1;
}
.lp-intro__solatan {
	position: absolute;
	right: 10px;
	bottom: 50px;
	z-index: 1;
}
.lp-intro__images {
}
.lp-intro__image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto 100%;
	z-index: 1;
	opacity: 0;
	animation-name: lp-fadeslide;
	animation-duration: 16s;
	animation-iteration-count: infinite;
}
.lp-intro__image:nth-child(1) {
	background-image: url(../images/home/intro_image01_pc.png);
	animation-delay: 0s;
}
.lp-intro__image:nth-child(2) {
	background-image: url(../images/home/intro_image02_pc.png);
	animation-delay: 8s;
}

/* ready */

.js-indicate-ready.lp-intro .lp-intro__title {
	opacity: 0;
	transform: rotate(0.09deg) scale(1.2) translateY(100%);
}
.js-indicate-ready.lp-intro .lp-intro__logo {
	opacity: 0;
	transform: rotate(0.09deg) scale(0.9);
}
.js-indicate-ready.lp-intro .lp-intro__solatan {
	opacity: 0;
	transform: translateY(25%);
}
.js-indicate-ready.lp-intro .lp-intro__image {
	transform: rotate(0.09deg) scale(1.2);
}

/* start */

.js-indicate-start.lp-intro .lp-intro__title {
	opacity: 1;
	transform: rotate(0deg) scale(1) translateY(100%);
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.js-indicate-start.lp-intro .lp-intro__image {
	transform: rotate(0deg) scale(1);
	transition-property: transform;
	transition-duration: 4s;
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

/* end */

.js-indicate-end.lp-intro .lp-intro__title {
	transform: rotate(0deg) scale(1) translateY(0);
}
.js-indicate-end.lp-intro .lp-intro__logo {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-delay: 0.25s;
	transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.js-indicate-end.lp-intro .lp-intro__solatan {
	opacity: 1;
	transform: translate(0);
	transition-property: opacity, transform;
	transition-duration: 1s;
	transition-delay: 0.5s;
	transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
}


/* concept
----------------------------------------------- */

.lp-concept {
}
.lp-concept__inner {
	margin: auto;
	padding: 20px 0 0;
	width: 970px;
	color: #fff;
}
.lp-concept__columns {
	display: flex;
	justify-content: space-between;
}
.lp-concept__column:first-child {
	width: 480px;
}
.lp-concept__column:last-child {
	width: 470px;
}
.lp-concept__copy {
	font-size: 30px;
	letter-spacing: 0.2em;
}
.lp-concept__header {
	position: relative;
	margin: 20px 0 0;
	padding: 0 0 30px;
	z-index: 1;
}
.lp-concept__logo {
	width: 394px;
}
.lp-concept__logo img {
	width: 100%;
	height: auto;
}
.lp-concept__solatan {
	position: absolute;
	top: 35px;
	left: 368px;
	width: 122px;
	z-index: 1;
}
.lp-concept__solatan img {
	width: 100%;
	height: auto;
}
.lp-concept__text {
	margin: 15px 0 0;
	font-size: 16px;
	text-align: justify;
	letter-spacing: 0.1em;
	line-height: 29px;
}
.lp-concept__images {
	position: relative;
	width: 470px;
	height: 470px;
	z-index: 1;
}
.lp-concept__images:before,
.lp-concept__images:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../images/home/concept_imageframe01.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
	z-index: 1;
	animation-name: lp-rotate1;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.lp-concept__images:after {
	background-image: url(../images/home/concept_imageframe02.png);
	animation-name: lp-rotate2;
	animation-duration: 10s;
}
.lp-concept__image {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 -210px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	animation-name: lp-fadeslide;
	animation-duration: 12s;
	animation-iteration-count: infinite;
}
.lp-concept__image:nth-child(1) {
	animation-delay: 0s;
}
.lp-concept__image:nth-child(2) {
	animation-delay: 4s;
}
.lp-concept__image:nth-child(3) {
	animation-delay: 8s;
}
.lp-concept__image img {
	width: 100%;
	height: auto;
}


/* banner
----------------------------------------------- */

.lp-banner {
	margin: 30px 0 0;
}
.lp-banner__inner {
	position: relative;
	margin: auto;
	width: 700px;
	z-index: 2;
}
.lp-banner__lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.lp-banner__list {
	margin: 20px 0 0;
	width: calc(50% - 10px);
}
.lp-banner__list img {
	width: 100%;
	height: auto;
}


/* article
----------------------------------------------- */

.lp-article {
	position: relative;
	margin: 150px 0 0;
	z-index: 1;
}
.lp-article:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: 600px auto;
	background-color: #003277;
	overflow: hidden;
	z-index: 1;
}
.lp-article__planet {
	position: absolute;
	z-index: 1;
}
.lp-article__planet img {
	width: 100%;
	height: auto;
}
.lp-article__inner {
	position: relative;
	margin: auto;
	padding: 40px 0 60px;
	width: 850px;
	z-index: 2;
}
.lp-article__title {
	text-align: center;
}
.lp-article__columns {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0 0;
}
.lp-article__column {
	position: relative;
	width: 410px;
	z-index: 1;
}
.lp-article__text {
	margin: 0 0 15px;
	color: #fff;
	font-size: 16px;
	text-align: justify;
	text-shadow: 0 0 4px rgba(0,0,0,0.2);
	letter-spacing: 0.1em;
	line-height: 29px;
}
.lp-article__button {
	padding: 10px 0 0;
	width: 300px;
}
.lp-article__solatan {
	position: absolute;
	pointer-events: none;
	z-index: 1;
}
.lp-article__solatan img {
	width: 100%;
	height: auto;
}

/* about */

.lp-article--about {
}
.lp-article--about:after {
	left: 0;
	right: 50%;
	margin: 0 -500px 0 0;
	border-radius: 0 80px 80px 0;
	background-image: url(../images/home/about_bg.png);
	background-position: right bottom;
}
.lp-article--about .lp-article__planet {
	top: -130px;
	left: 50%;
	margin: 0 0 0 220px;
	width: 424px;
}
.lp-article--about .lp-article__solatan {
	left: -60px;
	bottom: -90px;
	width: 210px;
}

/* program */

.lp-article--program {
}
.lp-article--program:after {
	left: 50%;
	right: 0;
	margin: 0 0 0 -500px;
	border-radius: 80px 0 0 80px;
	background-image: url(../images/home/program_bg.png);
	background-position: left bottom;
}
.lp-article--program .lp-article__planet {
	top: -100px;
	right: 50%;
	margin: 0 415px 0 0;
	width: 224px;
}
.lp-article--program .lp-article__solatan {
	right: -60px;
	bottom: -85px;
	width: 220px;
}
.lp-article--program .lp-article__column:first-child {
	order: 2;
}
.lp-article--program .lp-article__images {
	position: relative;
	height: 300px;
	z-index: 1;
}
.lp-article--program .lp-article__image {
	position: absolute;
	width: 240px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
	z-index: 1;
}
.lp-article--program .lp-article__image:first-child {
	top: 0;
	right: 0;
}
.lp-article--program .lp-article__image:last-child {
	left: 0;
	bottom: 0;
}
.lp-article--program .lp-article__image img {
	width: 100%;
	height: auto;
}

/* starchart */

.lp-article--program .lp-starchart {
	top: 0;
	left: 50%;
	margin: 0 0 0 254px;
}

/* ready */

.js-indicate-ready.lp-article--about:after {
	opacity: 0;
	transform: translateX(-15%);
}
.js-indicate-ready.lp-article--program:after {
	opacity: 0;
	transform: translateX(15%);
}

/* start */

.js-indicate-start.lp-article--about:after,
.js-indicate-start.lp-article--program:after {
	opacity: 1;
	transform: translateX(0);
	transition-property: opacity, transform;
	transition-duration: 0.85s;
	transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}


/* pc
----------------------------------------------- */

@media print, screen and (min-width:1000px) {


	/* retina
	----------------------------------------------- */
	
	@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
	}


}


/* mobile
----------------------------------------------- */

@media only screen and (max-width:999px) {


	/* intro
	----------------------------------------------- */

	.lp-intro__inner {
		width: auto;
		height: 365px;
	}
	.lp-intro__title {
		top: 50px;
	}
	.lp-intro__title img {
		width: 262px;
		height: auto;
	}
	.lp-intro__logo {
		top: 135px;
	}
	.lp-intro__logo img {
		width: 280px;
		height: auto;
	}
	.lp-intro__solatan {
		left: 50%;
		right: auto;
		bottom: 10px;
		margin: 0 0 0 -165px;
	}
	.lp-intro__solatan img {
		width: 125px;
		height: auto;
	}
	.lp-intro__image:nth-child(1) {
		background-image: url(../images/home/intro_image01_sp.png);
	}
	.lp-intro__image:nth-child(2) {
		background-image: url(../images/home/intro_image02_pc.png);
	}


	/* concept
	----------------------------------------------- */
	
	.lp-concept {
		margin: 0 25px;
	}
	.lp-concept__inner {
		margin: auto;
		max-width: 375px;
		padding: 50px 0 0;
		width: auto;
	}
	.lp-concept__columns {
		display: block;
	}
	.lp-concept__column:first-child,
	.lp-concept__column:last-child {
		width: auto;
	}
	.lp-concept__copy {
		font-size: 20px;
		text-align: center;
	}
	.lp-concept__header {
		margin: 10px 0 0;
		padding: 0 0 15px;
	}
	.lp-concept__logo {
		margin: auto;
		width: 240px;
	}
	.lp-concept__solatan {
		top: 20px;
		left: 50%;
		margin: 0 0 0 105px;
		width: 75px;
	}
	.lp-concept__text {
		margin: 15px 0 0;
		font-size: 14px;
		line-height: 25px;
	}
	.lp-concept__images {
		margin: 25px auto 0;
		width: 300px;
		height: 300px;
	}
	.lp-concept__image {
		margin: -134px 0 0 -134px;
		width: 268px;
		height: 268px;
	}


	/* banner
	----------------------------------------------- */

	.lp-banner {
		margin: 25px 25px 0;
	}
	.lp-banner__inner {
		max-width: 375px;
		width: auto;
	}
	.lp-banner__lists {
		display: block;
	}
	.lp-banner__list {
		margin: 10px 0 0;
		width: 100%;
	}


	/* article
	----------------------------------------------- */
	
	.lp-article {
		margin: 100px 0 0;
	}
	.lp-article:after {
		background-size: 300px auto;
	}
	.lp-article__inner {
		margin: 0 35px;
		padding: 40px 0;
		width: auto;
	}
	.lp-article__title img {
		width: auto;
		height: 45px;
	}
	.lp-article__columns {
		display: block;
		margin: 30px auto 0;
		max-width: 375px;
	}
	.lp-article__column {
		width: auto;
	}
	.lp-article__column:first-child {
		padding: 0 0 10px;
	}
	.lp-article__text {
		margin: 15px 0 0;
		font-size: 14px;
		letter-spacing: 0;
		line-height: 25px;
	}
	.lp-article__button {
		margin: 30px auto 0;
		padding: 0;
		width: 250px;
	}

	/* about */

	.lp-article--about:after {
		right: 15px;
		margin: 0;
		border-radius: 0 50px 50px 0;
	}
	.lp-article--about .lp-article__planet {
		top: -75px;
		left: 50%;
		margin: 0;
		width: 212px;
	}
	.lp-article--about .lp-article__solatan {
		left: -30px;
		bottom: 35px;
		width: 105px;
	}
	
	/* program */

	.lp-article--program:after {
		left: 15px;
		margin: 0;
		border-radius: 50px 0 0 50px;
	}
	.lp-article--program .lp-article__planet {
		top: -75px;
		right: 50%;
		margin: 0 100px 0 0;
		width: 112px;
	}
	.lp-article--program .lp-article__solatan {
		right: -30px;
		bottom: -5px;
		width: 110px;
	}
	.lp-article--program .lp-article__images {
		height: 236px;
	}
	.lp-article--program .lp-article__image {
		width: 59%;
	}

	/* starchart */

	.lp-article--program .lp-starchart {
		left: 50%;
		margin: 25px 0 0 12px;
	}


}