@charset "utf-8";

/*************************************************************
 *	Nissan style.css
 ************************************************************/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* --------------------------------------------------
		foundation
-------------------------------------------------- */
@font-face {
	font-family: 'Noto Sans JP';
	src: local('Noto Sans JP Medium'),
		 local('Noto Sans CJK JP Medium'),
		 url('../font/NotoSansJP-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
:root {
	--scale: 1;
}
* {
	box-sizing: border-box;
}
html {
	font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	line-height: 1;
	word-wrap: break-word;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	height: 100%;
	overflow: hidden;
	margin-right: 0 !important;
	background: linear-gradient(to bottom, #081970, #0231df);
}
body {
	height: 100%;
	overflow: hidden;
}
img {
	vertical-align: bottom;
	width: 100%;
}
a {
	-webkit-user-select: none;
	user-select: none;
}


/* --------------------------------------------------
		loading
-------------------------------------------------- */
.loader {
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #081970, #0231df);
}
.loader-bar {
	position: absolute;
	width: 4em;
	height: 4em;
	border-radius: 50%;
	border: 0.4em solid #081970;
	border-right-color: #748de8;
	animation: loader 1s infinite linear;
	transform: translate(-50%, -50%) rotate(0deg);
	top: 50%;
	left: 50%;
}
@keyframes loader {
	to { transform: translate(-50%, -50%) rotate(360deg) }
}


/* --------------------------------------------------
		parts
-------------------------------------------------- */
.wrapper {
	position: relative;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0;
	overflow: hidden;
	background: linear-gradient(to bottom, #081970, #0231df);
}
.content {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.m-sec {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}
.m-sec.is-fadeIn {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
}
[class*=m-btn] {
	position: relative;
	display: block;
}
.m-btn--a {
	transition: opacity .2s ease;
}
.m-btn--b {
	position: relative;
}
.m-btn--b .on {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity .2s ease;
}
.m-btn--b.is-active .on {
	opacity: 1;
}
@media (hover:hover) {
	.m-btn--a:hover {
		opacity: 0.75;
	}
	.m-btn--b:hover .on {
		opacity: 1;
	}
}
@media (hover:none) {
	.m-btn--a:active {
		opacity: 0.75;
	}
	.m-btn--b:active .on {
		opacity: 1;
	}
}


/* --------------------------------------------------
		nav
-------------------------------------------------- */
.nav {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: calc(232 / 2048 * 100%);
	height: 100%;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav.is-active {
	transform: translateX(0);
	transition-delay: 0.4s;
}
.nav .list li {
	position: relative;
	width: calc(180 / 232 * 100%);
	margin: 0 0 0 auto;
}
.nav .list li a {
	display: block;
}
.nav .list li a img.on {
	display: none;
	margin: 0 0 calc(-18 / 232 * 100%);
}
.nav .list li.is-active {
	width: 100%;
	z-index: 1;
}
.nav .list li.is-active a img:not(.on) {
	display: none;
}
.nav .list li.is-active a img.on {
	display: block;
}


/* --------------------------------------------------
		sec00-01
-------------------------------------------------- */
.sec00 .list {
	position: absolute;
	top: calc(441 / 1310 * 100%);
	left: calc(326.5 / 2048 * 100%);
	width: calc(1395 / 2048 * 100%);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec00 .list li {
	width: calc(435 / 1395 * 100%);
	margin-top: calc(72 / 2048 * 100%);
}

/* --------------------------------------------------
		sec00-02
-------------------------------------------------- */
.sec00-01 .btn-back {
	position: absolute;
	top: calc(1102 / 1310 * 100%);
	left: calc(728 / 2048 * 100%);
	width: calc(592 / 2048 * 100%);
}
.sec00-01 .area-title {
	position: absolute;
	top: calc(272 / 1310 * 100%);
	left: calc(881 / 2048 * 100%);
	width: calc(286 / 2048 * 100%);
}
.sec00-01 .area-title li {
	display: none;
}
.sec00-01 .area-title li.is-active {
	display: block;
}
.sec00-01 .area-list {
	position: absolute;
	top: calc(345 / 1310 * 100%);
	left: calc(424 / 2048 * 100%);
	width: calc(1204 / 2048 * 100%);
	height: calc(702 / 1310 * 100%);
}
.sec00-01 .area-list > li {
	position: relative;
	height: 100%;
	padding: calc(86 / 1204 * 100%) calc(82 / 1204 * 100%);
	display: none;
}
.sec00-01 .area-list > li.is-active {
	display: flex;
}
.sec00-01 .area-list ul:nth-of-type(1) {
	width: calc(618 / 1040 * 100%);
}
.sec00-01 .area-list ul:nth-of-type(1) li + li {
	margin-top: calc(32 / 618 * 100%);
}
.sec00-01 .area-list ul:nth-of-type(2) {
	width: calc(422 / 1040 * 100%);
}
.sec00-01 .area-list ul:nth-of-type(2) li + li {
	margin-top: calc(32 / 422 * 100%);
}
.sec00-01 .area-list ul li {
	height: calc(30 / 530 * 100%);
}
.sec00-01 .area-list ul li.x2 {
	height: calc(70 / 530 * 100%);
}
.sec00-01 .area-list ul li a {
	display: inline-block;
	height: 100%;
}
.sec00-01 .area-list ul li a img {
	width: auto;
	height: 100%;
}


/* --------------------------------------------------
		sec01
-------------------------------------------------- */
.sec01 .btn-discount {
	position: absolute;
	top: calc(1006 / 1310 * 100%);
	left: calc(577 / 2048 * 100%);
	width: calc(854 / 2048 * 100%);
}
.sec01 .btn-discount .light {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: calc(837 / 854 * 100%);
	height: calc(140 / 158 * 100%);
	border-radius: calc(var(--scale) * 40px);
}
.sec01 .btn-discount .light::before {
	content: '';
	position: absolute;
	top: 0;
	left: -80%;
	width: 80%;
	height: 100%;
	transform: skewX(15deg);
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
	animation: btnDiscountLight 4s ease 1s infinite;
}
@keyframes btnDiscountLight {
	  0% { left: -80%; }
	 60% { left: 100%; }
	100% { left: 100%; }
}
.sec01 .btn-discount .text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.sec01 .btn-back {
	position: absolute;
	top: calc(1154 / 1310 * 100%);
	left: calc(0 / 2048 * 100%);
	width: calc(276 / 2048 * 100%);
}
.sec01 .chara {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	bottom: calc(0 / 1310 * 100%);
	left: calc(1415 / 2048 * 100%);
	width: calc(515 / 2048 * 100%);
}


/* --------------------------------------------------
		sec01-01
-------------------------------------------------- */
.sec01-01 .chara {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	bottom: calc(0 / 1310 * 100%);
	left: calc(105 / 2048 * 100%);
	width: calc(487 / 2048 * 100%);
}
.sec01-01 .btn-price {
	position: absolute;
	top: calc(1127 / 1310 * 100%);
	left: calc(628 / 2048 * 100%);
	width: calc(652 / 2048 * 100%);
}
.sec01-01 .btn-more {
	position: absolute;
	bottom: calc(0 / 1310 * 100%);
	left: calc(1482 / 2048 * 100%);
	width: calc(267 / 2048 * 100%);
}
.sec01-01 .btn-more .code {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	animation: btnMoreCode 4s ease 1s infinite;
}
@keyframes btnMoreCode {
	  0% { transform: translateY(0); }
	 10% { transform: translateY(0.8%); }
	 20% { transform: translateY(0); }
	 30% { transform: translateY(0.8%); }
	 40% { transform: translateY(0); }
	100% { transform: translateY(0); }
}
.sec01-01 .btn-more .plug {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	animation: btnMorePlug 4s ease 1s infinite;
}
@keyframes btnMorePlug {
	  0% { transform: translateY(0); }
	 10% { transform: translateY(2%); }
	 20% { transform: translateY(0); }
	 30% { transform: translateY(2%); }
	 40% { transform: translateY(0); }
	100% { transform: translateY(0); }
}
.sec01-01 .area-list {
	position: absolute;
	top: calc(36 / 1310 * 100%);
	left: calc(0 / 2048 * 100%);
	width: calc(342 / 2048 * 100%);
}
.sec01-01 .area-list li {
	display: none;
}
.sec01-01 .area-list li.is-active {
	display: block;
}
.sec01-01 .price-list {
	position: absolute;
	top: calc(295 / 1310 * 100%);
	left: calc(474 / 2048 * 100%);
	width: calc(960 / 2048 * 100%);
}
.sec01-01 .price-list li {
	display: none;
}
.sec01-01 .price-list li.is-active {
	display: block;
}


/* --------------------------------------------------
		sec01-02
-------------------------------------------------- */
.sec01-02 .area-list {
	position: absolute;
	top: calc(0 / 1310 * 100%);
	left: calc(0 / 2048 * 100%);
	width: calc(2048 / 2048 * 100%);
}
.sec01-02 .area-list li {
	display: none;
}
.sec01-02 .area-list li.is-active {
	display: block;
}
.sec01-02 .btn-back {
	position: absolute;
	bottom: calc(48 / 1310 * 100%);
	left: calc(927 / 2048 * 100%);
	width: calc(194 / 2048 * 100%);
}


/* --------------------------------------------------
		sec01-03
-------------------------------------------------- */
.sec01-03 .chara {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	bottom: calc(0 / 1310 * 100%);
	left: calc(1335 / 2048 * 100%);
	width: calc(404 / 2048 * 100%);
}
.sec01-03 .btn-price {
	position: absolute;
	top: calc(1127 / 1310 * 100%);
	left: calc(628 / 2048 * 100%);
	width: calc(652 / 2048 * 100%);
}
.sec01-03 .btn-back {
	position: absolute;
	top: calc(1243 / 1310 * 100%);
	left: calc(858 / 2048 * 100%);
	width: calc(186 / 2048 * 100%);
}
.sec01-03 .area-list {
	position: absolute;
	top: calc(36 / 1310 * 100%);
	left: calc(0 / 2048 * 100%);
	width: calc(342 / 2048 * 100%);
}
.sec01-03 .area-list li {
	display: none;
}
.sec01-03 .area-list li.is-active {
	display: block;
}
.sec01-03 .price-list {
	position: absolute;
	top: calc(291 / 1310 * 100%);
	left: calc(469 / 2048 * 100%);
	width: calc(966 / 2048 * 100%);
}
.sec01-03 .price-list li {
	display: none;
}
.sec01-03 .price-list li.is-active {
	display: block;
}


/* --------------------------------------------------
		sec01-04
-------------------------------------------------- */
.sec01-04 .area-list {
	position: absolute;
	top: calc(0 / 1310 * 100%);
	left: calc(0 / 2048 * 100%);
	width: calc(2048 / 2048 * 100%);
}
.sec01-04 .area-list li {
	display: none;
}
.sec01-04 .area-list li.is-active {
	display: block;
}
.sec01-04 .btn-back {
	position: absolute;
	bottom: calc(48 / 1310 * 100%);
	left: calc(927 / 2048 * 100%);
	width: calc(194 / 2048 * 100%);
}


/* --------------------------------------------------
		sec02
-------------------------------------------------- */


/* --------------------------------------------------
		sec03
-------------------------------------------------- */


/* --------------------------------------------------
		sec04
-------------------------------------------------- */


/* --------------------------------------------------
		sec05
-------------------------------------------------- */
.sec05 .chara {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	bottom: calc(0 / 1310 * 100%);
	left: calc(89 / 2048 * 100%);
	width: calc(379 / 2048 * 100%);
}
.sec05 .chara .c01 {
	position: relative;
	display: none;
	left: calc(4 / 379 * 100%);
	width: calc(360 / 379 * 100%);
}
.sec05 .chara.is-scene1 .c01,
.sec05 .chara.is-scene2 .c01,
.sec05 .chara.is-scene3 .c01 {
	display: block;
}
.sec05 .chara .c02 {
	position: relative;
	display: none;
	left: calc(0 / 379 * 100%);
	width: calc(379 / 379 * 100%);
}
.sec05 .chara.is-scene4 .c02 {
	display: block;
}
.sec05 .step {
	position: absolute;
	top: calc(156 / 1310 * 100%);
	left: calc(327 / 2048 * 100%);
	width: calc(1238 / 2048 * 100%);
	height: calc(1034 / 1310 * 100%);
	display: none;
}
.sec05 .step.is-fadeIn {
	z-index: 2;
}
.sec05 .step .text {
	position: absolute;
	top: calc(329 / 1034 * 100%);
	left: calc(167 / 1238 * 100%);
	width: calc(908 / 1238 * 100%);
}
.sec05 .step .list {
	position: absolute;
	top: calc(463 / 1034 * 100%);
	left: calc(153 / 1238 * 100%);
	width: calc(936 / 1238 * 100%);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec05 .step .list.center {
	justify-content: center;
}
.sec05 .step .list li {
	margin: calc(36 / 936 * 100%) calc(19 / 936 * 100%) 0;
	width: calc(274 / 936 * 100%);
}
.sec05 .step04 .text {
	position: absolute;
	top: calc(445 / 1034 * 100%);
	left: calc(154 / 1238 * 100%);
	width: calc(650 / 1238 * 100%);
	text-align: right;
	font-size: calc(var(--scale) * 92px);
	font-family: 'Noto Sans JP', sans-serif;
	color: #ffffff;
}
.sec05 .step04 .note {
	position: absolute;
	top: calc(774 / 1034 * 100%);
	left: calc(154 / 1238 * 100%);
	width: calc(774 / 1238 * 100%);
	text-align: center;
	font-size: calc(var(--scale) * 15px);
	font-family: 'Noto Sans JP', sans-serif;
	color: #ffffff;
}
.sec05 .step04 .btn-more {
	position: absolute;
	top: calc(865 / 1034 * 100%);
	left: calc(154 / 1238 * 100%);
	width: calc(775 / 1238 * 100%);
}


/* --------------------------------------------------
		sec06
-------------------------------------------------- */
.sec06 .qr-list {
	position: absolute;
	top: calc(430 / 1310 * 100%);
	left: calc(710 / 2048 * 100%);
	width: calc(492 / 2048 * 100%);
}
.sec06 .qr-list li {
	display: none;
}
.sec06 .qr-list li.is-active {
	display: block;
}
.sec06 .shop-list {
	position: absolute;
	top: calc(611 / 1310 * 100%);
	left: calc(1274 / 2048 * 100%);
	width: calc(340 / 2048 * 100%);
}
.sec06 .shop-list li {
	display: none;
}
.sec06 .shop-list li.is-active {
	display: block;
}
.sec06 .btn-area {
	position: absolute;
	top: calc(828 / 1310 * 100%);
	left: calc(1347 / 2048 * 100%);
	width: calc(195 / 2048 * 100%);
}


/* --------------------------------------------------
		sec07
-------------------------------------------------- */