@charset "UTF-8";

/*---------------------------
 ページ共通設定
---------------------------*/
*, *:before, *:after { box-sizing: border-box; }

html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
}

body {
	font-size: 1.6rem;
	font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", sans-serif;
	line-height: 1.7;
	color: #000;
	background-color: #FFF;
}

a {
	color: #000;
	text-decoration: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

a:hover {
	opacity: 0.7;
	text-decoration: none;
}

*:focus { outline: none; }

h1, h2 { font-size: clamp(2.4rem, 1.91rem + 2.09vw, 4rem); }

h2 {
	width: 720px;
	margin-bottom: 1em !important;
	font-weight: bold;
	line-height: 1.4;
}

h2 img { width: 100%; }

p {
	font-size: clamp(1.3rem, 0.963rem + 1.44vw, 2.4rem);
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 2;
}

h1, h2, p, li {
	font-feature-settings: "palt";
	text-align: justify;
	word-wrap: break-word;
}

img, a img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

a img:hover {
	opacity: 0.7;
	transition: 0.5s;
}

/* 改行 */
br.pc { display: inline-block; }
br.sp { display: none; }


/*---------------------------
 1stビジュアル
---------------------------*/
.first-section {
	position: relative;
	overflow: hidden;
}

.first-img {
	position: relative;
	width: 100%;
	padding-top: 100%;
	background: url(../images/modellista_1stVisual.png) no-repeat;
	background-size: contain;
}

.first-logo {
	position: absolute;
	width: 100%;
	top: 1em;
	left: 1em;
	z-index: 1;
}

.first-logo img { max-width: 200px; }

.first-area {
	margin: 0 auto;
	padding: 8em 0;
}

.first-title, .first-lead {
	margin: 0 auto;
	text-align: center;
	color: #FFF;
}

/* 1st背景設定 */
#particles {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: #1f296b;
}


/*---------------------------
 2ndビジュアル
---------------------------*/
.second-section {
	position: relative;
	overflow: hidden;
	background: rgb(0, 160, 218);
	background: -moz-linear-gradient(0deg, rgba(109, 214, 254, 1) 0%, rgba(0, 160, 218, 1) 30%);
	background: -webkit-linear-gradient(0deg, rgba(109, 214, 254, 1) 0%, rgba(0, 160, 218, 1) 30%);
	background: linear-gradient(0deg, rgba(109, 214, 254, 1) 0%, rgba(0, 160, 218, 1) 30%);
}

.second-img {
	position: relative;
	width: 100%;
	padding-top: 100%;
	background: url(../images/modellista_2ndVisual.png) no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
	opacity: 0;
}

.second-area {
	position: relative;
	margin: 0 auto;
	padding: 4em 0 8em 0;
	z-index: 2;
}

.second-title, .second-lead {
	margin: 0 auto;
	text-align: center;
	color: #FFF;
}

/* 2nd背景設定 */
.cloud-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/cloud-bg.png);
	background-position: bottom;
	background-size: cover;
	opacity: 0.5;
	animation: cloud 60s linear infinite;
}

@keyframes cloud {
	0% { background-position: 0px; }
	100% { background-position: 1800px; }
}

/*---------------------------
 3rdビジュアル
---------------------------*/
.third-section {
	position: relative;
	overflow: hidden;
	background-color: #247dc1;
}

.third-img {
	position: relative;
	width: 100%;
	padding-top: 100%;
	background: url(../images/modellista_3rdVisual.png) no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	
}

.third-area {
	margin: 0 auto;
	padding: 8em 0;
	background-color: #247dc1;
}

.third-title, .third-lead {
	margin: 0 auto;
	text-align: center;
	color: #FFF;
}

/*---------------------------
 エンディング
---------------------------*/
.ending-section {
	position: relative;
	background-color: #FFF;
}

.ending-area {
	margin: 0 auto;
	padding: 8em 0;
	background-color: #FFF;
}

.ending-title {
	margin: 0 auto;
	width: 600px;
	text-align: center;
	line-height: 1;
}

.ending-lead {
	margin: 0 auto 2em auto;
	text-align: center;
}

/*---------------------------
 about
---------------------------*/
.about-section {
	position: relative;
	padding: 5em 0 10em 0;
	background-color: #FFF;
}

.about-text {
	width: 640px;
	margin: 0 auto;
}

.about-lead {
	font-size: 1.8rem;
	font-weight: normal;
}

.about-title {
	margin: 0 auto 1em auto;
	width: 400px;
	text-align: center;
}

.about-link-btn a {
	display: block;
	width: 200px;
	margin: 4em auto 0 auto;
	padding: 0.5em;
	font-size: 1.4rem;
	text-align: center;
	letter-spacing: 0;
	border: #000 1px solid;
	color: #000;
}

.about-link-btn a:hover { opacity: 1; }

/* 矢印が右に移動 */
.about-link-btn .arrow {
	position: relative;
	color: #000;
	text-decoration: none;
	outline: none;
}

.about-link-btn .arrow::before{
	content: '';
	position: absolute;
	bottom: 1.5em;
	left: 85%;
	width: 25%;
	height: 1px;
	background:#000;
	transition: all .3s;
}

.about-link-btn .arrow::after{
	content: '';
	position: absolute;
	bottom: 1.7em;
	right: -10%;
	width: 9px;
	height: 1px;
	background: #000;
	transform: rotate(35deg);
	transition: all .3s;
}

.about-link-btn .arrow:hover::before{ left: 90%; }
.about-link-btn .arrow:hover::after{ right: -16%; }


/*---------------------------
 フッター
---------------------------*/
footer {
	position: relative;
	padding: 0 0 2em 0;
	background-color: #FFF;
}

footer .copyright {
	font-weight: normal;
	font-size: 1.2rem;
	letter-spacing: 0;
	text-align: center;
	color: #999;
 }

 footer ul {
	margin: 0 auto 2em auto;
	text-align: center;
 }

 footer ul li {
	display: inline-block;
	width: 40px;
	margin: 0 0.8em;
	vertical-align: middle;
 }

 footer ul li img { width: 100%; }


/*---------------------------
 テキスト＆背景アニメーション設定
---------------------------*/

 /* スクロールダウン
------------------*/
.scrollDown{
	position: fixed;
	bottom: 20px;
	left: 50%;
	height: 50px;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	z-index: 1;
}

.scrollDown span{
	position: absolute;
	top: -2em;
	left: 50%;
	font-size: 1.8rem;
	letter-spacing: 0.05em;
	color: #FFF;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.scrollDown::after{
	content: '';
	position: absolute;
	top: 0;
	width: 1px;
	height: 30px;
	background: #FFF;
	animation: pathmove 1.4s ease-in-out infinite;
	opacity: 0;
}

@keyframes pathmove{
	0%{
		height: 0;
		top: 0;
		opacity: 0;
	}
	30%{
		height: 30px;
		opacity: 1;
	}
	100%{
		height: 0;
		top: 50px;
		opacity: 0;
	}
}


/* フェードイン
------------------*/
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from { opacity: 0; }
	to { opacity: 1; }
}


/* 波モーション
------------------*/

.wave-bg { position: relative; }

.wave-bg canvas {
	position: absolute;
	bottom: -5px;
	width: 100%;
}


/* 滑らかにテキスト出現
------------------*/
.bgappearTrigger, .bgLRextendTrigger { opacity: 0; }

.smooth {
	overflow: hidden;
	display: block;
}

.smoothTrigger {
	transition: .8s ease-in-out;
	transform: translate3d(0, 100%, 0) skewY(12deg);
	transform-origin: left;
	display: block;
}

.smoothTrigger.smoothAppear { transform: translate3d(0, 0, 0) skewY(0); }


/* 流れるテキスト
------------------*/
.slideIn {
	overflow: hidden;
	display: inline-block;
}

.slideInArea { display: inline-block; }

.upAnime{ opacity: 0; }

.slideAnimeDownUp {
    animation-name: slideTextY100;
		animation-duration: 3s;
		animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.slideAnimeUpDown {
	animation-name: slideTextY-100;
	animation-duration: 3s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY-100 {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}


/* じわっとテキスト出現
------------------*/
.blur {
	animation-name: blurAnime;
	animation-duration: 5s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}

	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}

.blurTrigger { opacity: 0; }


/*---------------------------------------------*/
@media screen and (max-width: 768px) {
/*---------------------------------------------*/
	br.pc { display: none; }
	br.sp { display: block; }
	h2 { width: 100%; }

	.first-img {
		position: relative;
		height: 100vh;
		min-height: 400px;
		background: url(../images/modellista_1stVisual.png) no-repeat;
		background-position: center;
		background-size: cover;
	}

	.first-text, .second-text, .third-text, .ending-text { padding: 0 3em;}
	.first-lead, .second-lead, .third-lead { margin-top: 1em; text-align: left;}
	.first-area { padding: 0 0 4em 0; }
	.second-area, .third-area, .ending-area, .about-section { padding: 4em 0; }
	.ending-area, .ending-title { width: 100%; }
	.about-text { width: 85%; }
	.about-title { width: 60%; }
	.about-lead { font-size: 1.6rem; }
}

/*---------------------------------------------*/
@media screen and (max-width: 520px) {
/*---------------------------------------------*/
	.wave-bg { position: static; }
	.scrollDown span { font-size: 1.6rem; }
	.first-logo img { max-width: 120px;}

	.first-img {
		background: url(../images/modellista_1stVisual_sp.png) no-repeat;
		background-size: 100%;
	}

	.second-img {
		height: 100%;
		min-height: 600px;
		padding-top: auto;
		background: url(../images/modellista_2ndVisual_sp.png) no-repeat;
		background-size: 100%;
		background-position: bottom;
	}

	.third-img {
		position: relative;
		height: 100%;
		min-height: 600px;
		padding-top: auto;
		background: url(../images/modellista_3rdVisual_sp.png) no-repeat;
		background-size: 100%;
	}

	.first-text, .second-text, .third-text, .ending-text { padding: 0 1.5em;}
	.about-lead { font-size: 1.4rem; }
}