@charset "utf-8";
/* CSS Document */
body {
	font-size:10px;
	font-family: 'Noto Sans JP',"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	background: #111;
}
body a { color:#333;}
body a:hover { text-decoration:none;}

.container {
	background:#fff;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	overflow: hidden;
}
.container img { width:100%; height: auto;}

.inner { margin: 0 3.4666667%;}

@media (min-width: 641px) {
/* PC用 */
	.container {
		width:750px;
		margin:0 auto;
		overflow: hidden; 
		
		font-size:20px;
	}	
}
@media (max-width: 640px) {
/* SP用 */
}

/* scrollanime
-------------------------------------------------- */
.scrollanime {
	opacity: 0;
}
.fadeInUp {
	animation-name: fadeInDown;
	animation-delay: 0s;
	animation-duration: 0.75s;
	animation-fill-mode: forwards;
	transform: translateY(50px);
}

.ul--lineup .fadeInUp {
	animation-duration: 0.35s;
}

@keyframes fadeInDown {
	0% {
		opacity: 0;			
	}
	100% {
		opacity: 1;
		transform: translate(0);
	}
}

.updown {
	transform: translateY(-100px);
}
.downup {
	transform: translateY(100px);
}
.slide-right {
	transform: translateX(200px);
}
.slide-left {
	transform: translateX(-200px);
}


/* header
-------------------------------------------------- */
.header {
	position: relative;
}
.header h1 {
	position: absolute;
	top:11px;
	left: 11px;
	width:19.3333333%;
}
/*---- .buy--btn ----*/
.buy--btn {
	margin:0 12.5%;
}

/*---- .buy--btn ----*/
.header .buy--btn { margin-top:-19%;}

.header .tx01 {
	position: absolute;
	top:6%;
	left: 0;
}
.header .tx01.js--fadeIn {
	opacity: 0;
    visibility: hidden;
    transform:scale(0);
    transition: opacity 1s, visibility 1s, transform 1s;
}
.header .js--fadeIn.inview {
	opacity: 1;
    visibility: visible;
    transform: scale(100%);
}

.header .tx02 {
	position: absolute;
	top:26%;
	left: 0;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* footer
-------------------------------------------------- */
.footer {
	display: flex;
	justify-content: space-between;
	padding:5.9em 4.67%;
	color: #fff;
	background:#000;
	z-index: -1;
}
.footer .inner {
	margin:0;
}
.footer p a { color:#fff;}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* point / cv
-------------------------------------------------- */
.sec00 {
	position: relative;
}
.img_p01 {}

.img_p02 {
	position: absolute;
	width:50%;
	top:0;
	opacity: 0;
}
/*.img_p02.js--fadeInRight {
	transform:translateX(150%);
	transition: opacity 1s, visibility 1s, transform 1s;
}*/
.img_p02.js--fadeInRight/*.inview*/ {
	transform:translateX(100%);
	opacity: 1;
}

/*.img_p02.js--fadeInLeft {
	transform:translateX(-50%);
	transition: opacity 1s, visibility 1s, transform 1s;
}*/
.img_p02.js--fadeInLeft/*.inview*/ {
	transform:translateX(0%);
	opacity: 1;
}
.img_p03 {}
.img_p04 {}

.cv .img_p01 {
	position: absolute;
	left: 0;
	top:0;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* totop
-------------------------------------------------- */
.totop {
	position: relative;
	height:50px;
	margin:15px 0 30px;
	z-index: -1;
}
.totop p {
	position: absolute;
	right:3%;
	bottom:0;
	width:35px;
	height:50px;
	background: url("../images/totop.png") right bottom no-repeat;
	background-size:auto 100%;
}
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}


/* lineup
-------------------------------------------------- */
.lineup {
	margin-top: 19%;
}
.lineup .ttl { background: #c8c8c8;}

@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}



/* 
-------------------------------------------------- */
@media (min-width: 641px) {
/* PC用 */
}
@media (max-width: 640px) {
/* SP用 */
}