@-webkit-keyframes blinkImage {
	0% 		{ opacity: 0; }
	30% 	{ opacity: 1; }
	70% 	{ opacity: 1; }
	100% 	{ opacity: 0; }
}
@-moz-keyframes blinkImage {
	0% 		{ opacity: 0; }
	30% 	{ opacity: 1; }
	70% 	{ opacity: 1; }
	100% 	{ opacity: 0; }
}
@keyframes blinkImage {
	0% 		{ opacity: 0; }
	30% 	{ opacity: 1; }
	70% 	{ opacity: 1; }
	100% 	{ opacity: 0; }
}



/** -------------------------------
 * mainview
 */

#mainview {
	background-color: #000;
}

#mainview > .wrap {
	position: relative;
	width: 100%;
}

#mainview .swiper-container {
	
}

#mainview .swiper-wrapper {
	
}

#mainview .swiper-slide {
	position: relative;
	padding-top: 106.666%;
}

#mainview .bg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	padding-top: 93.333%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

#mainview .swiper-slide > .wrap {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

#mainview .inner {
	position: relative;
	width: 100%;
	height: 100%;
}

#mainview .inner .copy {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
}

/* item01 */
#mainview .item01 {
	overflow: hidden;
}

#mainview .item01 .bg01 {
	background-image: url(../i_IMAGES/SP/mainview01_img01.jpg);
	transition: 1.0s ease-in;
	-o-transition: 1.0s ease-in;
	-moz-transition: 1.0s ease-in;
	-webkit-transition: 1.0s ease-in;
	opacity: 0;
}

/*#mainview .item01 .bg02 {
	background-image: url(../i_IMAGES/SP/mainview01_img02.jpg);
	transition: 1.5s ease-in 1.5s;
	-o-transition: 1.5s ease-in 1.5s;
	-moz-transition: 1.5s ease-in 1.5s;
	-webkit-transition: 1.5s ease-in 1.5s;
	opacity: 0;
}*/

#mainview .item01.show .bg01, #mainview .item01.show .bg02 {
	opacity: 1;
}

#mainview .item01 .inner {
	
}

/* copy */
#mainview .item01 .inner .copy {
	position: absolute;
	left: 0;
	top: 1.2%;
	display: block;
	width: 100%;
	transition: 1.0s ease-in 3.15s;
	-o-transition: 1.0s ease-in 3.15s;
	-moz-transition: 1.0s ease-in 3.15s;
	-webkit-transition: 1.0s ease-in 3.15s;
	opacity: 0;
}

#mainview .item01.show .inner .copy {
	opacity: 1;
}

#mainview .item01 .inner .copy span {
	display: block;
	padding-top: 93.333%;
    /*background-image: url(../i_IMAGES/SP/mainview01_copy01.png);*/
	background-repeat: no-repeat;
	background-size: contain;
}

/* aside */
#mainview .aside {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

#mainview .aside > .wrap {
	position: relative;
	width: 100%;
	height: 100%;
	transition: 1.0s ease-in;
	-o-transition: 1.0s ease-in;
	-moz-transition: 1.0s ease-in;
	-webkit-transition: 1.0s ease-in;
	opacity: 0;
}

#mainview .item01.show .aside > .wrap {
	opacity: 1;
}

#mainview .aside .content {
	
}

#mainview .aside .price {
	position: absolute;
    right: 4%;
	/*left: 4%;*/
	bottom: -3%;/* -1% */
	z-index: 2;
	margin-bottom: 18%;
}

#mainview .aside .price dl {
	white-space: nowrap;
}

#mainview .aside .price dt {
	font-size: 9px;
	font-size: 2.4vw;
	color: #ccc;
	line-height: 1.1;
}

#mainview .aside .price dd {
	padding-top: 1.2%;
	font-size: 23px;
	font-size: 6.133vw;
	font-weight: bold;
	color: #fff;
	line-height: 1.1;
}

#mainview .aside .price em {
	padding-left: 2%;
	font-size: 16px;
	font-size: 4.266vw;
	vertical-align: middle;
}

#mainview .aside .button {
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 100%;/* 試乗車・展示車検索クローズ：50% */
	background-color: #000;
	border-top: 1px solid #555;
}

#mainview .aside .button.carSearch {
	left: 0;
}

#mainview .aside .button.quotation {
	right: 0;
	border-left: 1px solid #555;
}

#mainview .aside .button.carSearch a {
	display: table;
	width: 100%;
	height: 13.333vw;
	background-color: #c3002f;
	background-repeat: no-repeat;
	background-position: 1.4vw;
	background-size: auto 10vw;
}

#mainview .aside .button.quotation a {
	display: table;
	width: 100%;
	height: 13.333vw;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: 1.4vw;
    /*background-position: 25.4vw;*/
    /* 試乗車・展示車検索クローズ：1.4vw*/
	background-size: auto 10vw;
}

#mainview .aside .button.carSearch a {
	background-image: url(../i_IMAGES/icon_carSearch02.png);
}

#mainview .aside .button.quotation a {
	background-image: url(../i_IMAGES/icon_quotation.png);
}

#mainview .aside .button span {
	display: table-cell;
    /*padding-left: 11.6vw;*/
	font-size: 13px;
	font-size: 3.466vw;
	color: #fff;
	line-height: 1.1;
	vertical-align: middle;
	text-align: center;/* 試乗車・展示車検索クローズ */
}


/* item02 */
#mainview .item02 {
	overflow: hidden;
}

#mainview .item02 .bg01 {
	background-image: url(../i_IMAGES/SP/mainview02_img01.jpg);
}

#mainview .item02 .bg02 {
	background-image: url(../i_IMAGES/SP/mainview02_img01.jpg);
	/*    background-image: url(../i_IMAGES/SP/mainview02_img02.jpg);
	    -webkit-animation: blinkImage 2.5s infinite linear alternate;
	    -moz-animation: blinkImage 2.5s infinite linear alternate;
	    animation: blinkImage 2.5s infinite linear alternate;
	*/
}

#mainview .item02 .inner {
	
}

/* copy */
#mainview .item02 .inner .copy {
	/*transition: 1.0s ease-in;
    -o-transition: 1.0s ease-in;
    -moz-transition: 1.0s ease-in;
    -webkit-transition: 1.0s ease-in;
    opacity: 0;*/
}

#mainview .item02.show .inner .copy {
	opacity: 1;
}

#mainview .item02 .inner .copy span {
	display: block;
	padding-top: 93.333%;
    /*background-image: url(../i_IMAGES/SP/mainview02_copy01.png);*/
	background-repeat: no-repeat;
	background-size: contain;
}

#mainview .item02 .btn {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
}

#mainview .item02 .btn a {
	display: block;
	width: 100%;
	height: 13.333vw;
	background-color: #c3002f;
	color: #fff;
	text-align: center;
}

#mainview .item02 .btn a span {
	display: inline-block;
	height: 13.333vw;
	padding-right: 6vw;
	padding-top: 4.2vw;
	background-image: url(../i_IMAGES/swiper_next_white.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: auto 3.066vw;
	font-size: 3.2vw;
	white-space: nowrap;
}


/* swiper ctrl */
#mainview .swiper-button-prev {
	display: none;
}

#mainview .swiper-button-next {
	display: none;
}

#mainview .swiper-pagination {
	clear: both;
	left: 0;
	bottom: 0;
	width: 100%;
	margin-bottom: -17.6vw;
	padding-right: 2.666vw;
	text-align: center;
}

#mainview .swiper-pagination.none {
	display: none;
}

#mainview .swiper-pagination-bullet {
	position: relative;
	width: 24vw;
	height: 13.5vw;
	margin-left: 2.4vw;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	opacity: 1;
}

#mainview .swiper-pagination-bullet:nth-child(1) {
	background-image: url(../i_IMAGES/mainview_thumb01.jpg);
}

#mainview .swiper-pagination-bullet:nth-child(2) {
	background-image: url(../i_IMAGES/mainview_thumb03.jpg);
}

#mainview .swiper-pagination-bullet:nth-child(3) {
	background-image: url(../i_IMAGES/mainview_thumb02.jpg);
}

#mainview .swiper-pagination-bullet-active {
	
}

#mainview .swiper-pagination-bullet-active:after {
	content: '';
	position: absolute;
	left: -0.8vw;
	top: -0.8vw;
	right: -0.8vw;
	bottom: -0.8vw;
	display: block;
	background-color: rgba(255,255,255,0.3);
	border: 1px solid #c3002c;
}





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

.large-banner {
	margin: 8% 4% 0;
	margin-top: 10%;
	/*margin-top: 26%;*/
}

.large-banner .banner {
	margin-top: 8%;
}

.large-banner .banner img {
	width: 100%;
}





/** -------------------------------
 * section | gradeRanking
 */

.section#gradeRanking {
	/*display: none;*/
}

.section#gradeRanking > .wrap {
	
}

.section#gradeRanking .content {
	margin-top: 0.333vw;
}

.section#gradeRanking .content > .wrap {
	
}

.section#gradeRanking .swiper-container {
	
}

.section#gradeRanking .swiper-wrapper {
	
}

.section#gradeRanking .swiper-slide {
	width: 100%;
    /*margin-top: 4vw;*/
}

.section#gradeRanking .content .item {
	position: relative;
	display: block;
	width: 80vw;
	margin: 0 auto;
	padding-top: 30%;
	color: #000;
}

.section#gradeRanking .content .item .image {
	position: absolute;
	left: 0;
	top: 6.933vw;
	right: 0;
	display: block;
	height: 24vw;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

.section#gradeRanking .content .item01 .image {
	background-image: url(../i_IMAGES/SP/gradeRanking_img01.jpg);
}

.section#gradeRanking .content .item02 .image {
	background-image: url(../i_IMAGES/SP/gradeRanking_img02.jpg);
}

.section#gradeRanking .content .item03 .image {
	background-image: url(../i_IMAGES/SP/gradeRanking_img03.jpg);
}

.section#gradeRanking .content .item .num {
	position: absolute;
	left: 0;
	top: 0;
	display: table;
	width: 6.933vw;
	height: 6.933vw;
	background-color: #fff;
	border: 1px solid #b4b4b4;
}

.section#gradeRanking .content .item .num em {
	display: table-cell;
	font-size: 16px;
	font-size: 4.266vw;
	font-style: normal;
	font-weight: bold;
	color: #666;
	line-height: 1.1;
	text-align: center;
	vertical-align: middle;
}

.section#gradeRanking .content .item dl {
	position: absolute;
	left: 50%;
	top: 6%;
}

.section#gradeRanking .content .item dt {
	font-size: 12px;
	font-size: 3.2vw;
	font-weight: bold;
	line-height: 1.5;
}

.section#gradeRanking .content .item dd {
	margin-top: 4%;
	font-size: 13px;
	font-size: 3.466vw;
	line-height: 1.5;
}

.section#gradeRanking .content .item dd b {
	font-weight: bold;
}

.section#gradeRanking .content .simulation {
	position: relative;
	display: block;
	width: 40.667%;
	margin-left: 50%;
	margin-top: 2.7%;
	padding-right: 3%;
	background-color: #eee;
	color: #000;
}

.section#gradeRanking .content .simulation span {
	display: block;
	padding: 6% 8%;
	background-image: url(../i_IMAGES/arrow_red.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: auto 2.4vw;
	font-size: 10px;
	font-size: 2.666vw;
}
/*          .section#gradeRanking .swiper-button-prev,
          .section#gradeRanking .swiper-button-next,
          .section#gradeRanking .swiper-pagination {
            display: none;
          }*/

.section#gradeRanking .swiper-button-prev {
	left: 2.4vw;
	top: 13vw;
	width: 3.2vw;
	height: 4.666vw;
	margin-top: 0;
	background-image: url(../i_IMAGES/swiper_prev_red.png);
	background-size: contain;
}

.section#gradeRanking .swiper-button-prev.swiper-button-disabled {
	background-image: url(../i_IMAGES/swiper_prev_gray.png);
	opacity: 0.25;
}

.section#gradeRanking .swiper-button-next {
	right: 2.4vw;
	top: 13vw;
	width: 3.2vw;
	height: 4.666vw;
	margin-top: 0;
	background-image: url(../i_IMAGES/swiper_next_red.png);
	background-size: contain;
}

.section#gradeRanking .swiper-button-next.swiper-button-disabled {
	background-image: url(../i_IMAGES/swiper_next_gray.png);
	opacity: 0.25;
}

.section#gradeRanking .link {
	clear: both;
	margin-top: 10%;
}

.section#gradeRanking .link ul {
	display: table;
	margin: 0 auto;
}

.section#gradeRanking .link li {
	display: table-cell;
	padding: 0 5.3vw;
}

.section#gradeRanking .link li:first-child {
	/* border-right: 1px solid #c1c1c1;　試乗車・展示車検索クローズ */
}

.section#gradeRanking .link a {
	display: block;
	padding: 0.5vw 0;
}

.section#gradeRanking .link span {
	display: block;
	padding-right: 4.8vw;
	background-image: url(../i_IMAGES/arrow_red.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: auto 3.066vw;
	font-size: 13px;
	font-size: 3.466vw;
	color: #333;
	line-height: 1.1;
	white-space: nowrap;
}




.section-wide {
	clear: both;
	position: relative;
	margin-top: 20%;
}

.section-wide .wrap {
	position: relative;
	/*overflow: hidden;*/
}



/** -------------------------------
 * NIM
 */

#NIM .logo {
	padding-top: calc(450/750 * 100vw);
	background-image: url(../i_IMAGES/SP/nim_banner.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}




/* @group #NIM_INTRO */

/** -------------------------------
 * NIM_INTRO
 */

#NIM_INTRO.section-wide {
	margin-top: 13%;
}

#NIM_INTRO .wrap {
	width: 100%;
	padding-top: calc(1500/750 * 100vw);
}

#NIM_INTRO .image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}

#NIM_INTRO .bg 		{ background-image: url(../i_IMAGES/SP/nim_intro_01.jpg); }
#NIM_INTRO .copy 	{ background-image: url(../i_IMAGES/SP/nim_intro_02.png); opacity: 0; }

/*#NIM_INTRO .bg.start {
	animation: nim_intro_1 5.5s cubic-bezier(0, 0.54, 0.28, 1) 0s;
	animation-fill-mode: both;
}*/

#NIM_INTRO .copy.start {
	animation: nim_intro_2 4s cubic-bezier(0, 0.54, 0.28, 1) 1.0s;
	animation-fill-mode: both;
}

@keyframes nim_intro_1 {
	0% {
		opacity: 1;
	}
	
	100% {
		opacity: .2;
	}
}

@keyframes nim_intro_2 {
	0% {
		opacity: 0;
		transform: translateY(1%) translateZ(0);
	}
	
	45% {
		transform: translateY(0) translateZ(0);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0) translateZ(0);
	}
}

/* @end #NIM_INTRO */


/* @group #FUNCTION_PANEL */

/** -------------------------------
 * FUNCTION_PANEL
 */
 
.function-panel .wrap {
	padding-top: calc(175/750 * 100vw);
	padding-bottom: calc(124/750 * 100vw);
}

.function-panel .images {
	position: relative;
	width: 100vw;
	height: calc(673/750 * 100vw);
	z-index: 5;
}

.function-panel .images .image,
.function-panel .images .inner_image {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform-origin: center;
}
.function-panel .images .image:first-child,
.function-panel .images .s-1 .inner_image:first-child { opacity: 1; }

.function-panel .content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

.function-panel .content .header .label {
	width: 70%;
	margin-left: calc(22/375 * 100vw);
	padding-top: calc(52/750 * 100vw);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	opacity: 0;
}

.function-panel .content .header .copy {
	width: 100%;
	margin-top: calc(30/750 * 100vw);
	padding-top: calc(135/750 * 100vw);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	opacity: 0;
}

.function-panel .content .link {
	width: calc(690/750 * 100vw);
	margin-right: calc(30/750 * 100vw);
	position: absolute;
	right: 0;
	bottom: calc(5/375 * 100vw);
	opacity: 0;
}

.function-panel .content .link .btn {
	width: 100%;
	padding-top: calc(84/750 * 100vw);
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.function-panel .content.start .header .label {
	animation: function_panel_content 1.2s cubic-bezier(0.31, 0.76, 0.56, 1) 0s;
	animation-fill-mode: both;
}

.function-panel .content.start .header .copy {
	animation: function_panel_content 1.2s cubic-bezier(0.31, 0.76, 0.56, 1) 0.3s;
	animation-fill-mode: both;
}

.function-panel .content.start .link {
	animation: function_panel_slide_up 2s cubic-bezier(0, 0.54, 0.28, 1) 2s;
	animation-fill-mode: both;
}



.function-panel .note {
	/*position: absolute;
	bottom: calc(-24/375 * 100vw);*/
	margin-left: 4%;
	margin-top: 0.6em;
	font-size: 12px;
	font-size: 3.2vw;
}



.function-panel .numbers {
	position: absolute;
	top: 25%;
	left: 25%;
}

.function-panel .numbers,
.function-panel .numbers .number-digits {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	line-height: 1;
}

.function-panel .numbers .number-digits {
	opacity: 0;
}

.function-panel .numbers .number {
	font-size: calc(32/375 * 100vw);
	font-family: Nissan-Global, sans-serif;
	font-weight: 300;
	height: 0.85em;
	overflow: hidden;
	color: #023466;
}

.function-panel .numbers .number + .number {
	margin-left: 0.06em;
}

.function-panel .numbers .number .number-inner {
	display: block;
	margin-top: -0.15em;
}

.function-panel .numbers .number-unit .label.s {
	font-size: 35%;
}


/* @group #FUNCTION_PANEL_1 */
#FUNCTION_PANEL_1 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_1_img_01.jpg); }
#FUNCTION_PANEL_1 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_1_img_02.jpg); }
#FUNCTION_PANEL_1 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_1_label.png); }
#FUNCTION_PANEL_1 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_1_copy.png); }
#FUNCTION_PANEL_1 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_1_link.png); }

#FUNCTION_PANEL_1 .images .image_2.start {
	animation: function_panel_simple_alpha 9s cubic-bezier(0, 0.54, 0.28, 1) 0s;
	animation-fill-mode: both;
}
/* @end #FUNCTION_PANEL_1 */



/* @group #FUNCTION_PANEL_2 */
#FUNCTION_PANEL_2 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_2_img_01.jpg); }
#FUNCTION_PANEL_2 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_2_img_02.jpg); }
#FUNCTION_PANEL_2 .images 	.image_3 	{ background-image: url(../i_IMAGES/SP/function_panel_2_img_03.jpg); }
#FUNCTION_PANEL_2 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_2_label.png); }
#FUNCTION_PANEL_2 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_2_copy.png); }
#FUNCTION_PANEL_2 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_2_link.png); }


#FUNCTION_PANEL_2 .images.start .image_2 {
	animation: function_panel_2_blink_1 4s linear 0s infinite;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_2 .images.start .image_3 {
	animation: function_panel_2_blink_2 4s linear 0s infinite;
	animation-fill-mode: both;
}

@keyframes function_panel_2_blink_1 {
	0% { opacity: 0; }
	7% { opacity: 0.85; }
	10% { opacity: 1; }
	78% { opacity: 1; }
	85% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes function_panel_2_blink_2 {
	0% { opacity: 0; }
	9% { opacity: 0; }
	30% { opacity: 0.85; }
	40% { opacity: 1; }
	65% { opacity: 1; }
	83% { opacity: 0; }
	100% { opacity: 0; }
}

/* @end #FUNCTION_PANEL_2 */


/* @group #FUNCTION_PANEL_3 */
#FUNCTION_PANEL_3 .images				{ overflow: hidden; }
#FUNCTION_PANEL_3 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_3_img_01.jpg); transform: scale(2.3) translateZ(0); }
#FUNCTION_PANEL_3 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_3_img_02.jpg); }
#FUNCTION_PANEL_3 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_3_label.png); }
#FUNCTION_PANEL_3 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_3_copy.png); }
#FUNCTION_PANEL_3 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_3_link.png); }

#FUNCTION_PANEL_3 .images.start .image_1 {
	animation: function_panel_3_zoom_out 1.8s cubic-bezier(0.41, 0.15, 0.14, 1) 0s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_3 .images.start .image_2 {
	animation: function_panel_simple_alpha 1.3s cubic-bezier(0, 0.54, 0.28, 1) 1.9s;
	animation-fill-mode: both;
}

@keyframes function_panel_3_zoom_out {
	0% {
		transform: scale(2.3) translateZ(0);
	}
	
	100% {
		transform: scale(1) translateZ(0);
	}
}

/* @end #FUNCTION_PANEL_3 */


/* @group #FUNCTION_PANEL_4 */
#FUNCTION_PANEL_4 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_4_img_01.jpg); }
#FUNCTION_PANEL_4 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_4_img_02.jpg); }
#FUNCTION_PANEL_4 .images 	.image_3 	{ background-image: url(../i_IMAGES/SP/function_panel_4_img_03.jpg); }
#FUNCTION_PANEL_4 .images 	.image_4 	{ background-image: url(../i_IMAGES/SP/function_panel_4_img_04.jpg); }
#FUNCTION_PANEL_4 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_4_label.png); }
#FUNCTION_PANEL_4 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_4_copy.png); }
#FUNCTION_PANEL_4 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_4_link.png); }

#FUNCTION_PANEL_4 .images .measure {
	width: calc(94/375 * 100vw);
	padding-top: calc(51/375 * 100vw);
	position: absolute;
	top: calc(190/375 * 100vw);
	left: calc(148/375 * 100vw);
	transform: translateZ(0);
	background-image: url(../i_IMAGES/SP/function_panel_4_img_05.png);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	opacity: 0;
}

#FUNCTION_PANEL_4 .images .measure .image_5 { background-image: url(../i_IMAGES/SP/function_panel_4_img_06.png); }
#FUNCTION_PANEL_4 .images .measure .image_6 { background-image: url(../i_IMAGES/SP/function_panel_4_img_07.png); }

#FUNCTION_PANEL_4 .images .numbers {
	top: calc(137/375 * 100vw);
	left: calc(140/375 * 100vw);
}

#FUNCTION_PANEL_4 .images .numbers .number {
	font-size: calc(56/375 * 100vw);
	font-weight: bold;
	color: #fff;
}


#FUNCTION_PANEL_4 .images.start .image_2 {
	animation: function_panel_simple_alpha 2s cubic-bezier(0, 0.54, 0.28, 1) 1.1s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .image_3 {
	animation: function_panel_simple_alpha 2s cubic-bezier(0, 0.54, 0.28, 1) 2.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .image_4 {
	animation: function_panel_simple_alpha 0.7s cubic-bezier(0, 0.54, 0.28, 1) 4.8s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .measure {
	animation: function_panel_simple_alpha 0.4s linear .5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .measure .image_5 {
	animation: Panel_4_measure_1 2s cubic-bezier(0, 0.54, 0.28, 1) 1.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .measure .image_6 {
	animation: Panel_4_measure_2 2s cubic-bezier(0, 0.54, 0.28, 1) 1.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .numbers .number-digits {
	animation: function_panel_simple_alpha 2s ease-in-out 1s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .numbers .number-digits .number:nth-child(1) .number-inner {
	animation: Panel_4_Number_1_1 1.4s cubic-bezier(0, 0.54, 0.28, 1) 1.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .numbers .number-digits .number:nth-child(2) .number-inner {
	animation: Panel_4_Number_1_2 1.7s cubic-bezier(0, 0.54, 0.28, 1) 1.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_4 .images.start .numbers .number-digits .number:nth-child(3) .number-inner {
	animation: Panel_4_Number_1_3 2s cubic-bezier(0, 0.54, 0.28, 1) 1.5s;
	animation-fill-mode: both;
}


@keyframes Panel_4_measure_1 {
	0% {
		transform: translateX(100%) translateZ(0);
	}
	95% {
		opacity: 1;
		transform: translateX(0) translateZ(0);
	}
	100% {
		opacity: 0;
	}
}

@keyframes Panel_4_measure_2 {
	0% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes Panel_4_Number_1_1 {
	0% 		{ transform: translateY(0) translateZ(0); }
	100% 	{ transform: translateY(calc(-3.333% * 3)) translateZ(0); }
}

@keyframes Panel_4_Number_1_2 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 12)) translateZ(0); }
}

@keyframes Panel_4_Number_1_3 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 20)) translateZ(0); }
}

/* @end #FUNCTION_PANEL_4 */


/* @group #FUNCTION_PANEL_5 */
#FUNCTION_PANEL_5 .images				{ overflow: hidden; }
#FUNCTION_PANEL_5 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_5_img_01.jpg); }
#FUNCTION_PANEL_5 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_5_img_02.jpg); }
#FUNCTION_PANEL_5 .images 	.image_3 	{ background-image: url(../i_IMAGES/SP/function_panel_5_img_03.jpg); }
#FUNCTION_PANEL_5 .images 	.image_4 	{ background-image: url(../i_IMAGES/SP/function_panel_5_img_04.jpg); }
#FUNCTION_PANEL_5 .images 	.image_5 	{ background-image: url(../i_IMAGES/SP/function_panel_5_img_05.jpg); }
#FUNCTION_PANEL_5 .images 	.image_6 	{ background-image: url(../i_IMAGES/SP/function_panel_5_img_06.jpg); }
#FUNCTION_PANEL_5 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_5_label.png); }
#FUNCTION_PANEL_5 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_5_copy.png); }
#FUNCTION_PANEL_5 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_5_link.png); }

#FUNCTION_PANEL_5 .images .measure {
	width: calc(202/750 * 100vw);
	padding-top: calc(75/750 * 100vw);
	position: absolute;
	top: calc(162/375 * 100vw);
	left: calc(167/375 * 100vw);
	transform: translateZ(0);
	background-image: url(../i_IMAGES/SP/function_panel_5_img_07.png);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	opacity: 0;
}

#FUNCTION_PANEL_5 .images .measure .image_7 { background-image: url(../i_IMAGES/SP/function_panel_5_img_08.png); }
#FUNCTION_PANEL_5 .images .measure .image_8 { background-image: url(../i_IMAGES/SP/function_panel_5_img_09.png); }

#FUNCTION_PANEL_5 .images .numbers {
	top: calc(205/375 * 100vw);
	left: calc(165/375 * 100vw);
}

#FUNCTION_PANEL_5 .images .numbers .number {
	font-size: calc(45/375 * 100vw);
	font-weight: bold;
	color: #fff;
}


#FUNCTION_PANEL_5 .images.start .image_2 {
	animation: function_panel_blink 1.5s linear 0s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .image_1 {
	transform-origin: 91.7% 68.2%;
	animation: function_panel_5_zoom_in 1.3s cubic-bezier(0, 0.54, 0.28, 1) 1.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .image_3 {
	animation: function_panel_simple_alpha 0.3s cubic-bezier(0, 0.54, 0.28, 1) 2.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .image_4 {
	animation: function_panel_simple_alpha 2s cubic-bezier(0, 0.54, 0.28, 1) 3.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .image_5 {
	animation: function_panel_simple_alpha 2s cubic-bezier(0, 0.54, 0.28, 1) 3.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .image_6 {
	animation: function_panel_simple_alpha 5s cubic-bezier(0, 0.54, 0.28, 1) 4s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .measure {
	animation: function_panel_simple_alpha 0.4s linear 3.45s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .measure .image_7 {
	animation: Panel_5_measure_1 2s cubic-bezier(0.2, 0.54, 0.51, 0.99) 3.45s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .measure .image_8 {
	animation: Panel_5_measure_2 2s cubic-bezier(0.2, 0.54, 0.51, 0.99) 3.45s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .numbers .number-digits {
	animation: function_panel_simple_alpha 2s cubic-bezier(0, 0.54, 0.28, 1) 3.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .numbers .number-digits .number:nth-child(1) .number-inner {
	animation: Panel_5_Number_1_1 1.4s cubic-bezier(0, 0.54, 0.28, 1) 3.7s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .numbers .number-digits .number:nth-child(2) .number-inner {
	animation: Panel_5_Number_1_2 1.7s cubic-bezier(0, 0.54, 0.28, 1) 3.7s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_5 .images.start .numbers .number-digits .number:nth-child(3) .number-inner {
	animation: Panel_5_Number_1_3 2s cubic-bezier(0, 0.54, 0.28, 1) 3.7s;
	animation-fill-mode: both;
}


@keyframes function_panel_5_zoom_in {
	0% {
		transform: scale(1) translateZ(0);
	}
	
	100% {
		transform: scale(2.1766) translateZ(0);
	}
}

@keyframes Panel_5_measure_1 {
	0% {
		transform: translateX(-100%) translateZ(0);
	}
	95% {
		opacity: 1;
		transform: translateX(0) translateZ(0);
	}
	100% {
		opacity: 0;
	}
}

@keyframes Panel_5_measure_2 {
	0% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes Panel_5_Number_1_1 {
	0% 		{ transform: translateY(0) translateZ(0); }
	100% 	{ transform: translateY(calc(-3.333% * 6)) translateZ(0); }
}

@keyframes Panel_5_Number_1_2 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 15)) translateZ(0); }
}

@keyframes Panel_5_Number_1_3 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 20)) translateZ(0); }
}

/* @end #FUNCTION_PANEL_5 */


/* @group #FUNCTION_PANEL_6 */
#FUNCTION_PANEL_6 .images				{ overflow: hidden; }
#FUNCTION_PANEL_6 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_6_img_01.jpg); }
#FUNCTION_PANEL_6 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_6_img_02.jpg); }
#FUNCTION_PANEL_6 .images 	.image_3 	{ background-image: url(../i_IMAGES/SP/function_panel_6_img_03.jpg); }
#FUNCTION_PANEL_6 .images 	.image_4 	{ background-image: url(../i_IMAGES/SP/function_panel_6_img_04.jpg); opacity: 1; transform: translateX(110%); }
#FUNCTION_PANEL_6 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_6_label.png); }
#FUNCTION_PANEL_6 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_6_copy.png); }
#FUNCTION_PANEL_6 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_6_link.png); }

#FUNCTION_PANEL_6 .images .side-container {
	position: relative;
	width: 100%;
	height: 100%;
}

#FUNCTION_PANEL_6 .images.start .image_2 {
	animation: function_panel_simple_alpha 4s cubic-bezier(0, 0.54, 0.28, 1) 1s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_6 .images.start .image_3 {
	animation: function_panel_simple_alpha 6s cubic-bezier(0, 0.54, 0.28, 1) 2.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_6 .images.start .side-container {
	animation: function_panel_slide_content_1 0.75s cubic-bezier(0, 0.54, 0.28, 1) 7.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_6 .images.start .image_4 {
	animation: function_panel_slide_content_2 0.75s cubic-bezier(0, 0.54, 0.28, 1) 7.5s;
	animation-fill-mode: both;
}

/* @end #FUNCTION_PANEL_6 */


/* @group #FUNCTION_PANEL_7 */
#FUNCTION_PANEL_7 .images 				{ height: calc(800/750 * 100vw); }
#FUNCTION_PANEL_7 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_7_img_01.jpg); }
#FUNCTION_PANEL_7 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_7_label.png); }
#FUNCTION_PANEL_7 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_7_copy.png); }
#FUNCTION_PANEL_7 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_7_link.png); }

#FUNCTION_PANEL_7 .overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

#FUNCTION_PANEL_7 .overlay .image {
	width: 100vw;
	padding-top: calc(340/750 * 100vw);
	height: auto;
}

#FUNCTION_PANEL_7 .overlay 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_7_img_02.png); }
#FUNCTION_PANEL_7 .overlay 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_7_img_03.png); }
#FUNCTION_PANEL_7 .overlay 	.image_3 	{ background-image: url(../i_IMAGES/SP/function_panel_7_img_04.png); }
#FUNCTION_PANEL_7 .overlay 	.image_4 	{ background-image: url(../i_IMAGES/SP/function_panel_7_img_05.png); }

#FUNCTION_PANEL_7 .overlay .angle {
	width: calc(280/750 * 100vw);
	padding-top: calc(340/750 * 100vw);
	margin-left: calc(68/750 * 100vw);
	display: inline-block;
	text-align: center;
}

#FUNCTION_PANEL_7 .overlay .angle + .angle {
	margin-left: calc(62/750 * 100vw);
}

#FUNCTION_PANEL_7 .overlay .angle p {
	font-size: calc(12/375 * 100vw);
}

#FUNCTION_PANEL_7 .overlay .numbers {
	position: static;
	margin-top: calc(4/375 * 100vw);
}

#FUNCTION_PANEL_7 .overlay .number-digits {
	opacity: 1;
	margin: 0 auto;
}

#FUNCTION_PANEL_7 .overlay .number-digits .number {
	font-size: 4.5em;
	color: #000;
}

#FUNCTION_PANEL_7 .overlay .numbers .number + .number {
	margin-left: 0em;
}


#FUNCTION_PANEL_7 .overlay.start {
	animation: function_panel_slide_up 1.5s cubic-bezier(0, 0.54, 0.28, 1) 0s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .image_2 {
	animation: function_panel_simple_alpha 0.5s ease-in-out 1.5s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .image_3 {
	animation: function_panel_simple_alpha 1s linear 2.4s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .image_4 {
	animation: function_panel_simple_alpha 1s linear 3.3s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .angle_1 .number-digits .number:nth-child(1) .number-inner {
	animation: Panel_7_Number_1_1 1.4s cubic-bezier(0, 0.54, 0.28, 1) 3s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .angle_1 .number-digits .number:nth-child(2) .number-inner {
	animation: Panel_7_Number_1_2 1.7s cubic-bezier(0, 0.54, 0.28, 1) 3s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .angle_1 .number-digits .number:nth-child(4) .number-inner {
	animation: Panel_7_Number_1_3 2s cubic-bezier(0, 0.54, 0.28, 1) 3s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .angle_2 .number-digits .number:nth-child(1) .number-inner {
	animation: Panel_7_Number_2_1 1.4s cubic-bezier(0, 0.54, 0.28, 1) 3s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .angle_2 .number-digits .number:nth-child(2) .number-inner {
	animation: Panel_7_Number_2_2 1.7s cubic-bezier(0, 0.54, 0.28, 1) 3s;
	animation-fill-mode: both;
}

#FUNCTION_PANEL_7 .overlay.start .angle_2 .number-digits .number:nth-child(4) .number-inner {
	animation: Panel_7_Number_2_3 2s cubic-bezier(0, 0.54, 0.28, 1) 3s;
	animation-fill-mode: both;
}


@keyframes Panel_7_Number_1_1 {
	0% 		{ transform: translateY(0) translateZ(0); }
	100% 	{ transform: translateY(calc(-3.333% * 13)) translateZ(0); }
}

@keyframes Panel_7_Number_1_2 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 20)) translateZ(0); }
}

@keyframes Panel_7_Number_1_3 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 25)) translateZ(0); }
}

@keyframes Panel_7_Number_2_1 {
	0% 		{ transform: translateY(0) translateZ(0); }
	100% 	{ transform: translateY(calc(-3.333% * 16)) translateZ(0); }
}

@keyframes Panel_7_Number_2_2 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 26)) translateZ(0); }
}

@keyframes Panel_7_Number_2_3 {
	0% 		{ transform: translateY(0); }
	100% 	{ transform: translateY(calc(-3.333% * 22)) translateZ(0); }
}

/* @end #FUNCTION_PANEL_7 */


/* @group #FUNCTION_PANEL_8 */
#FUNCTION_PANEL_8 .images 	.image_1 	{ background-image: url(../i_IMAGES/SP/function_panel_8_img_01.jpg); }
#FUNCTION_PANEL_8 .images 	.image_2 	{ background-image: url(../i_IMAGES/SP/function_panel_8_img_02.jpg); }
#FUNCTION_PANEL_8 .header 	.label 		{ background-image: url(../i_IMAGES/SP/function_panel_8_label.png); }
#FUNCTION_PANEL_8 .header 	.copy 		{ background-image: url(../i_IMAGES/SP/function_panel_8_copy.png); }
#FUNCTION_PANEL_8 .link 	.btn		{ background-image: url(../i_IMAGES/SP/function_panel_8_link.png); }

#FUNCTION_PANEL_8 .images.start .image_2 {
	animation: blinkImage 1.5s infinite linear alternate;
	animation-fill-mode: both;
}

/* @end #FUNCTION_PANEL_8 */



/* @group keyframes */

@keyframes function_panel_content {
	0% {
		opacity: 0;
		transform: translateX(5%);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes function_panel_simple_alpha {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes function_panel_blink {
	0% {
		opacity: 0;
	}
	
	35% {
		opacity: 1;
	}
	
	85% {
		opacity: 1;
	}
	
	100% {
		opacity: 0;
	}
}

@keyframes function_panel_slide_content_1 {
	0% {
		transform: translateX(0) translateZ(0);
	}
	
	100% {
		transform: translateX(-110%) translateZ(0);
	}
}

@keyframes function_panel_slide_content_2 {
	0% {
		transform: translateX(110%) translateZ(0);
	}
	
	100% {
		transform: translateX(0) translateZ(0);
	}
}

@keyframes function_panel_measure {
	0% {
		opacity: 0;
		width: 5%;
	}
	
	30% {
		opacity: 1;
		width: 5%;
	}

	100% {
		opacity: 1;
		width: 100%;
	}
}

@keyframes function_panel_slide_up {
	0% {
		opacity: 0;
		transform: translateY(5%) translateZ(0);
	}
	
	85% {
		opacity: 1;
	}
	
	100% {
		opacity: 1;
		transform: translateY(0) translateZ(0);
	}
}

/* @end keyframes */


/* @end #FUNCTION_PANEL */



/* @group #SAPOCAR_S */

#SAPOCAR_S {
	margin-left: 4%;
	margin-right: 4%;
}

#SAPOCAR_S .inner {
	border-top: 1px solid #e0e0e0;
	padding-top: calc(30/375 * 100vw);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#SAPOCAR_S .icon {
	width: calc(133/375 * 100vw);
	/*margin-right: calc(10/375 * 100vw);;*/
}

#SAPOCAR_S .icon img {
	width: 100%;
}

#SAPOCAR_S .description {
	width: calc(195/375 * 100vw);
	font-size: 14px;
	font-size: 3.733vw;
	word-break: break-all;
}

#SAPOCAR_S .note {
	width: 100%;
	margin-top: 2em;
	font-size: 12px;
	font-size: 3.2vw;
	word-break: break-all;
}

#SAPOCAR_S .description::after,
#SAPOCAR_S .inner::after {
	display: block;
	clear: both;
	content: "";
}

/* @end */