@charset "utf-8";
/* normalize */
*,::after,::before,blockquote,body,dd,dl,dt,fieldset,figure,.logo,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{padding:0;margin:0}body,html{height:100%;-webkit-text-size-adjust:none}.logo,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}i{font-style:normal}img{max-width:100%}::selection{background:#333;color:#e8e6df}::-moz-selection{background:#333;color:#e8e6df}*,::after,::before{box-sizing:border-box;outline:0;}

button,textarea,select,img ,input{ outline: none; }

/* clearfix */
.clearfix:after{display:table;content:" "}.clearfix:after{clear:both}

/* base
============================== */
a {
  font-weight: bold;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #fff;
}
img {max-width: 100%;}

/* layout
============================== */
body {
	height: 100%;
	font-family: YakuHanJP, -apple-system, Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','Noto Sans Japanese', "メイリオ", sans-serif;
	font-weight: 400;
    line-height: 1.7;
	-webkit-text-size-adjust: none;
	word-break: break-word;
	background: #000;
	color: #fff;
	font-size: 15px;
	text-rendering: optimizeLegibility;
}
.wrap {
	overflow: hidden;
	min-height: 100%;
	position: relative;
	padding: 5vw 1vw;
}

/* components
============================== */
.center	{ text-align: center; }
.bold	{ font-weight: 600; }
.txt {margin: 0 0 1em;}
.txt--sub {
	font-size: .8em;
	opacity: .6;
	line-height: 1.4;
}
.ph {line-height: 0; position: relative;}
.ph img {width: 100%;}
.btn { text-align: center; margin: 20px 0 0;}
.btn a + a {margin-top: 15px;}
.btn--base {
    line-height: 1.75;
    -webkit-appearance: none;
    text-decoration: none;
    display: inline-block;
    width: 90%;
    border-radius: 100px;
    padding: 14px 2em;
    border: 2px solid transparent;
    font-size: 16px;
}
.btn--main {
	background: #00a5ce;
	box-shadow: 0 10px 80px -20px rgba(0,0,0,.8);
}
.btn--sub {
	background: #fff;
	color: #00a5ce;
}


/* footer
============================== */
footer {
    text-align: center;
    position: relative;
    padding: 0 1vw 5vw;
}
footer svg > * {fill: #fff; }
footer .btn {margin: 0 0 .75em;}
.btn--official { display: inline-block; text-decoration: none;}
.btn--official span{
    display: block;
    font-weight: normal;
    font-size: 12px;
    line-height: 1;
    margin-top: .15em;
}
.btn--official svg { width: 55%;}
.copyright {font-size: 12px; opacity: .5;}


/* contents
============================== */
.section--base p {line-height: 0;}
.bg {
	width: auto;
	max-width: unset;
    height: 120%;
    position: fixed;
    opacity: .25;
    top: 0;
    left: 0;
}
.tit {padding: 0 3vw;}
.list--item {
	display: flex;
	display: webkit-flex;
	justify-content: center;
	align-items: center;
	padding: 0 3vw;
}
.list--item li {
	width: 30%;
	margin: 0 1vw;
}
.ph--artist {
    text-align: center;
    line-height: 0;
    margin: 0 0 15px;
}
.ph--artist img{width: 70%;}
footer .btn--seed {margin: 0 0 1.5em;}
footer .btn--seed a{
	border-radius: 0;
	background: #000;
	font-size: inherit;
	border: 2px solid #fff;
}

.stretch{
	visibility: visible !important;
	animation-fill-mode: both !important;
	-webkit-animation-fill-mode: both !important;
	-webkit-animation: stretch 3s infinite;
	animation: stretch 3s infinite;
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
.list--item li:nth-child(1) {
    -webkit-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important;
}
.list--item li:nth-child(2) {
    -webkit-animation-delay: 2s !important;
    animation-delay: 2s !important;
}
.list--item li:nth-child(3) {
    -webkit-animation-delay: 2.5s !important;
    animation-delay: 2.5s !important;
}
@keyframes stretch
{
	0%, 100%{transform: scale3d(1, 1, 1);}
	10% { transform: scale3d(1.1, .9, 1); }
	13.3%{ transform: scale3d(.9, 1.1, 1);}
	20%{transform: scale3d(1.05, .95, 1);}
	25% { transform: scale3d(.95, 1.05, 1);}
	30%{ transform: scale3d(1.025, .95, 1);}
	35%{ transform: scale3d(1, 1, 1); }
}
@-webkit-keyframes stretch
{
	0%, 100%{-webkit-transform: scale3d(1, 1, 1);}
	10% { -webkit-transform: scale3d(1.1, .9, 1); }
	13.3%{ -webkit-transform: scale3d(.9, 1.1, 1);}
	20%{-webkit-transform: scale3d(1.05, .95, 1);}
	25% { -webkit-transform: scale3d(.95, 1.05, 1);}
	30%{ -webkit-transform: scale3d(1.025, .95, 1);}
	35%{ -webkit-transform: scale3d(1, 1, 1); }
}

/* scroll-animation */
body:not(.ua--ie) .view-elm *{
	transition: .4s all ease-out;
	transform: translateY(10vh);
	opacity: 0;
}
body:not(.ua--ie) .view-elm .list--item li img{
	transition-duration: .6s;
	transform: scale(0);
}
body:not(.ua--ie) .view-elm .elm--01{transition-delay: .0s;}
body:not(.ua--ie) .view-elm .elm--02{transition-delay: .1s;}
body:not(.ua--ie) .view-elm .elm--03{transition-delay: .2s;}
body:not(.ua--ie) .view-elm .elm--04{transition-delay: .3s;}
body:not(.ua--ie) .view-elm .elm--05{transition-delay: .4s;}
body:not(.ua--ie) .view-elm .elm--06{transition-delay: .5s;}
body:not(.ua--ie) .view-elm .elm--07{transition-delay: .6s;}
body:not(.ua--ie) .view-elm .elm--08{transition-delay: .7s;}
body:not(.ua--ie) .view-elm .elm--09{transition-delay: .8s;}
body:not(.ua--ie) .view-elm .elm--10{transition-delay: .9s;}
body:not(.ua--ie) .view-elm .elm--11{transition-delay: 1.0s;}
body:not(.ua--ie) .inview * { transform: translateY(0); opacity: 1;}
body:not(.ua--ie) .inview .list--item li img{	transform: scale(1);}

/* sp
============================== */
@media screen and (max-width: 900px){
	.pc { display: none!important; }
}


/* pc
============================== */
@media screen and (min-width: 900px){
	.sp { display: none!important; }
	body {
		min-height: 100%;
		min-width: 1000px;
		font-size: 16px;
		font-size: 1.1vw;
		font-family: YakuHanJP, -apple-system, Helvetica, 'Noto Sans Japanese', Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', "メイリオ", sans-serif;
	}
	a, svg > *{transition: all .3s ease-out;}
	a:hover {text-decoration: none;}

	/* layout */
	.wrap {
		max-width: 1013px;
		margin: 0 auto;
		padding: 5vw 0;
	}
	.bg {
		width: 100%;
		height: 100%;
		background: url(../images/bg.jpg) no-repeat center;
		background-size: cover;
	}

	/* components */
	.btn--base { width: auto; min-width: 320px; padding: 20px 2em; margin: 0 10px; position: relative; top: 0;}
	.btn--base:hover { top: -10px; box-shadow: none;}
	.section-tit { font-size: 4.5rem; margin-bottom: .6em;}

	/* footer */
	.btn--official span {
		display: inline-block;
		margin: 0 0 0 1.25em;
		position: relative;
		top: -.3em;
	}
	.btn--official svg{width: 50%;}
	footer .btn--seed { margin: 0 0 3em;}
	
}

/* tablet
=================================== */
@media screen and (min-width: 768px) and (max-width: 900px) {
	body {font-size: 16px;}
	.section--base {padding: 8vw 6.5vw; margin-bottom: 3vh;}
	.btn--base { width: auto; min-width: 320px; padding: 20px 2em;}
}

/* ie
=================================== */
.ua--ie .btn--official svg {height: 18px;}