@charset "UTF-8";

/*----------------------------------------------------------
更新日：2024年4月11日
=PC(960以上)
=PC & タブレット(960以下)
=スマホ(768px以下)
-------------------------------------------------------------*/

/*==================================================================
  Top page
===================================================================*/

/* #keyv
------------------------------------------------------*/
#keyv {
	display: flex;
	position: relative;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #010E43;
	text-align: center;
	color: #FFF;
	z-index: 0;
}
#keyv:after {
	z-index: -1;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #010E43 url("/vp-sync/asset/img/keyv_bg.webp") no-repeat center center;
	opacity: 0;
	will-change: transform;
}
#keyv:after{
	animation-name: keyv_bg;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}
@keyframes keyv_bg {
  10%{
    opacity: 0.1;
  }
  100%{
    opacity: 1;
  }
}

#keyv .mainTxt {
	width: 100%;
	height: 100%;
	padding: 4vw 0 0;
	position: relative;
	z-index: 5;
}
#keyv .catch{
/*	margin: 0 0 2em;*/
}
#keyv .catch p{
	color: #FFF;
	font-size: 1.8em;
	font-weight: 700;
	max-width: 520px;
	margin: 0 auto 0.5em;
	padding: 0 1em;
	line-height: 1.6;
}
#keyv .catch p{
	position: relative;
	color: transparent;
	background:transparent;
	will-change: transform;
}
#keyv .catch p:before{
  content: "";
	position: absolute;
	z-index: 1;
	top: 0%;
	right: 100%;
	bottom: 0%;
	left: 0%;
	background :rgba(255,255,255,0.70);
}
#keyv .catch .c01.active{
	animation-name: kf_c01a;
	animation-duration: 0s;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}
#keyv .catch .c01.active:before{
	animation-name: kf_c01b;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
}
#keyv .catch .c02.active{
	animation-name: kf_c01a;
	animation-duration: 0s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}
#keyv .catch .c02.active:before{
	animation-name: kf_c01b;
	animation-duration: 0.4s;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
}
@keyframes kf_c01a {
  100%{
		color: inherit;
		background: linear-gradient(to right, #f20c88 0%, #4c0edb 100%);
		box-shadow: 0px 2px 7px rgba(255,255,255,0.3);
  }
}
@keyframes kf_c01b {
  50%{
    left: 0%; right: 0%;
  }
  100%{
    left: 100%; right: 0%;
  }
}
#keyv .mainTxt .sName {
	font-size:1em;
	max-width: 360px;
	margin: 3.5em auto 2em;
}
#keyv .mainTxt .monitor {
	position: relative;
	z-index: 5;
}
#keyv .mainTxt .monitor .pcMoc {
	position: relative;
	z-index: 15;
	width: 100%;
	margin: 0 auto;
}
#keyv .mainTxt .monitor .motion {
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -30%;
	width: 100%;
}
#keyv .mainTxt .monitor .motion .mocSpace{
	width: 640px;
}
#keyv .mainTxt .monitor .motion .pic{
	position: relative;
	text-align: left;
	margin-right: 2em;
	flex-shrink: 0;
}
#keyv .mainTxt .monitor .motion .pic:before{
	content: "";
	display: block;
	width: 45vw;
	height: 45vw;
	max-width: 360px;
	max-height: 360px;
	position: absolute;
	top:12%;
	left:0;
	z-index: -1;
	background: transparent url("/vp-sync/asset/img/scanCircle.svg") no-repeat center center;
	background-size:cover;
	will-change: transform;
	animation:25s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
#keyv .mainTxt .monitor .motion .pic + .pic{
	margin-left: 580px;
}

#keyv .mainTxt .box {
	display: flex;
	justify-content: space-around;
	margin:5em auto 0;
	max-width: 700px;
}
#keyv .mainTxt li {
	font-size: 1.2em;
	font-weight: 500;
	line-height: 1.6;
	width: 28%;
	padding: 1.5em 0;
	border: 1px solid #FFF;
	position: relative;
}
#keyv .mainTxt li:before {
	content: "";
	display: block;
	width: 1px;
	height: 30px;
	background: #FFF;
	position: absolute;
	top: -14%;
	left: 50%;
}
#keyv .topContactArea{
	position: relative;
	bottom: -25px;
}

@media only screen and (max-width:960px) {
	#keyv {
	}
	#keyv:after {
		background: #010E43 url("/vp-sync/asset/img/keyv_bg_sp.webp") no-repeat center center;
		background-size:cover;
	}

	#keyv .mainTxt {
		padding-top: 8vw;
	}
	#keyv .catch{
		margin-bottom: 2em;
	}
	#keyv .catch p{
		font-size: 5vw;
		max-width:none;
		margin: 3vw 7vw 0;
		line-height: 1.6;
	}
  #keyv .mainTxt .sName {
		max-width:none;
		width: 45vw;
		margin: 4vw auto 4vw;
  }
	#keyv .mainTxt .monitor .pcMoc {
		padding: 0 10vw;
	}
	#keyv .mainTxt .monitor .motion {
		position: relative;
		transform: scale(0.8, 0.8);
	}
	#keyv .mainTxt .monitor .motion .pic + .pic{
		margin-left: 0;
	}
	#keyv .mainTxt .monitor .motion .pic{
		width: auto;
		margin-right: 3em;
		flex-shrink: 1;
	}
	#keyv .mainTxt .box {
		margin:4vw 0 0;
		max-width: none;
	}
	#keyv .mainTxt li {
		font-size: 3.5vw;
		line-height: 1.6;
		padding: 4vw 0;
		border: 1px solid #FFF;
	}
	#keyv .mainTxt li:before {
		width: 1px;
		height: 6vw;
		top: -18%;
	}

}
@media only screen and (max-width:768px) {
/*  #keyv { height: 68vw; }*/
}

/*セール用ボタン*/
#keyv .saleBan{
	width: 160px;
	position: absolute;
	left: calc(50% - 360px);
    top: 27%;
	z-index: 15;
	opacity: 0;
}
#keyv .saleBan a:hover{
	opacity: 0.8;
}
.saleBan {
  animation: zoomIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 0.5s;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media only screen and (max-width:960px) {
	#keyv .saleBan{
		width: 20vw;
		left: 4%;
        top: 22%;
	}
}


/* #about
------------------------------------------------------*/
#about {
	background: #fff url("/vp-sync/asset/img/about_bg.webp") no-repeat 50% 50%;
	background-size:contain;
	margin-bottom: 4em;
	padding-top: 2em;
}
#about .movie {
  max-width: 800px;
  margin: 0 auto 1em;
}
#about .youtube:empty {
	background: #CCC;
}
#about .youtube:empty:before {
	content: "動画準備中";
	position: absolute;
	top: 50%;
	left: 50%;
	color: #666;
	transform: translate(-50%,-50%);
}
#about .flex {
	justify-content: space-between;
}
#about .flex .movie {
	max-width:none;
	width: calc(50% - 20px);
	margin: 0;
}
#about .txt {
	max-width: 800px;
	margin: 0 auto;
}
@media only screen and (max-width:960px) {
	#about {
		margin-top:3em;
		padding-top: 1em;
		padding-bottom: 0;
		background-size: cover;
	}
}
@media only screen and (max-width:768px) {
	#about .flex {
		display: block;
	}
	#about .flex .movie {
		width: 100%;
		margin: 0 0 2em;
	}
}


/* #possibilities
------------------------------------------------------*/
#possibilities {
	background: #000 url(/vp-sync/asset/img/poss_bg.webp) no-repeat 50% 50%;
	background-size: auto;
	margin-top:0;
	padding-top: 5em;
	padding-bottom: 11em;
}
#possibilities .possTop{
	color: #FFF;
	margin-bottom: 3em;
}
#possibilities .possList{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 0;
	position: relative;
}
#possibilities .possList > *{
	width: calc(33.3333% - 1em);
	padding: 0.5em 1.2em 1.2em;
	border-top: 10px solid #4c0edb;
	background-color: rgba(255,255,255,0.70);
	position: relative;
	top:0;
}
#possibilities .possList li:nth-child(2){
	top:4em;
}
#possibilities .possList li:nth-child(3){
	top:8em;
}
#possibilities .possList .title{
	font-size: 1.9em;
	font-weight: 700;
	line-height: 1.6;
	font-feature-settings: "palt";
}
#possibilities .possList .title span{
	color:#f20c88 ;
}
#possibilities .possList .img{
	text-align: center;
	margin-bottom: 1.2em;
}
#possibilities .possList .txt{
	margin-top: 0.5em;
}
@media only screen and (max-width:960px) {
}
@media only screen and (max-width:768px) {
	#possibilities {
		padding-top: 3em;
		padding-bottom: 3em;
		margin-bottom: 2em;
		background: #000 url(/vp-sync/asset/img/poss_bg.webp) no-repeat 20% 50%;
		background-size:cover;
	}
	#possibilities{
	}
	#possibilities .possTop{
		margin-bottom: 8vw;
	}
	#possibilities .possList > *{
		width: auto;
	}
	#possibilities .possList li:nth-child(2),
	#possibilities .possList li:nth-child(3){
		top:0;
	}
	#possibilities .possList .title {
		font-size: 1.6em;
	}
	#possibilities .possList .img img{
		width: 80%;
	}
}


/* #scenarios
------------------------------------------------------*/
#scenarios {
	padding-top: 2em;
	margin-top: 3em;
}
#scenarios .scenList{
	padding-bottom: 5em;
}
#scenarios .scenList li{
	margin: 0 auto 6.5em;
}
#scenarios .scenList li:last-child {
	margin-bottom: 0;
}
#scenarios .scenList li .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0px 2px 8px rgba(0,0,0,.2);
	background: #FFF;
	max-width: 750px;
	position: relative;
	left: -1.5em;
}
#scenarios .scenList li .inner:after {
	content: '';
	position: absolute;
	top: 3em;
	left: 3em;
	width: 100%;
	height: 100%;
	background-color: #f20c88;
	z-index: -1;
}
#scenarios .scenList li .pic img{
	width: 100%;
}
#scenarios .scenList li .txt{
	width: 55%;
	overflow: hidden;
	position: relative;
	z-index: 10;
}
#scenarios .scenList li .txt .headline2{
	color: #f20c88;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 0.4em 2em;
	position: relative;
}
#scenarios .scenList li .txt .headline2:after {
	content: '';
	position: absolute;
	top: 50%;
	left: -2.5em;
	width: 2em;
	height: 1px;
	background-color: #f20c88;
}
#scenarios .scenList li .txt .explan{
	margin: 0 1em 0 2.6em;
}
#scenarios .scenList li:nth-child(even) .inner{
	flex-direction: row-reverse;
	left: 1.5em;
}
#scenarios .scenList li:nth-child(even) .inner:after{
	left:auto;
	right: 3em;
	background-color: #4c0edb;
}
#scenarios .scenList li:nth-child(even) .inner .headline2{
	color: #4c0edb;
}
#scenarios .scenList li:nth-child(even) .inner .txt .headline2:after {
	background-color: #4c0edb;
}
@media only screen and (max-width:960px) {
}
@media only screen and (max-width:768px) {
	#scenarios {
		padding-top: 1em;
	}
	#scenarios .scenList {
		padding-bottom: 3em;
	}
	#scenarios .scenList li {
		margin-bottom: 3em;
		margin-left: 1em;
	}
	#scenarios .scenList li .inner {
		display: block;
		padding: 1em 1em 0.5em;
		left: -1em;
	}
	#scenarios .scenList li .inner:after {
		top: 1em;
		left: 1em;
	}
	#scenarios .scenList li:nth-child(even) .inner{
		left: 0;
	}
	#scenarios .scenList li:nth-child(even) .inner:after {
		left: auto;
		right: 1em;
		background-color: #4c0edb;
	}
	#scenarios .scenList li .txt,
	#scenarios .scenList li .pic {
		width: auto;
		max-width: none;
	}
	#scenarios .scenList .headline2 {
		margin-bottom: 0.5em;
	}
	#scenarios .scenList li .txt .explan{
		margin-right: 0;
		margin-bottom: 1em;
	}
	#scenarios .scenList li .pic { 
		margin-bottom: 1em; 
	}
}


/* #highlights
------------------------------------------------------*/
#highlights {
	position: relative;
	z-index: 2;
	padding-top: 4em;
	padding-bottom: 4em;
}
#highlights:before {
	z-index: -1;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff url(/vp-sync/asset/img/high_bg.webp) repeat 50% 50%;
	background-attachment: fixed;
	transform: skewY(4deg);
}
#highlights .highList{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#highlights .highList > *{
	width: calc(33.33333% - 1.1em);
	padding: 2em 1em;
	color: #f20c88;
	background-color: #FFF;
	text-align: center;
}
#highlights .highList .pic{
	min-height: 150px;
	margin-bottom: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}
#highlights .highList .txt{
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 0;
}
#highlights .highList .txt .bgHigh{
	display:block;
	color: #FFF;
	margin: 0.2em 0;
	background-color: #f20c88;
}
#highlights .highList .txt .bgHigh.tm{
	margin-top: 0.4em;
}
@media only screen and (max-width:960px) {
}
@media only screen and (max-width:768px) {
	#highlights {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#highlights .highList{
		display: block;
	}
	#highlights .highList > *{
		width: 80%;
		padding: 2em 1em 1.5em;
		margin:0 auto 1em;
	}
	#highlights .highList .pic{
		min-height: auto;
		margin-bottom: 1.5em;
	}
}


/* #tutorial
------------------------------------------------------*/
#tutorial {
	padding-top: 2em;
	padding-bottom: 2em;
}
#tutorial .tutoList li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3em;
	box-shadow: 0px 4px 12px rgba(0,0,0,.1);
	position: relative;
}
#tutorial .tutoList li:last-child {
	margin-bottom: 0;
}
#tutorial .tutoList .number {
	position: absolute;
	top: -0.2em;
	left: -0.2em;
	z-index: 2;
}
#tutorial .tutoList .number:before {
	content: "";
	position: absolute;
	border-style: solid;
	border-width: 5em 5em 0 0;
	border-color:rgba(76,14,219,1.00) transparent transparent transparent;
	z-index: -1;
}
#tutorial .tutoList .number span{
	color: #FFF;
	font-size: 1.3em;
	font-weight: 700;
	display: block;
	padding: 0.3em 0 0 0.6em;
}
#tutorial .tutoList .pic {
	width: 50%;
	margin-right: 3em;
}
#tutorial .tutoList .pic img{
	width: 100%;
}
#tutorial .tutoList .txt{
	width: 60%;
	margin: 0 2.5em 0 3em;
}
#tutorial .tutoList .txt .headline2{
	color: #f20c88;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 0.4em;
}
#tutorial .tutoList .txt p{
	margin-bottom: 0;
/*	font-feature-settings: "palt";*/
}

@media only screen and (max-width:960px) {
}
@media only screen and (max-width:768px) {
	#tutorial {
		padding-top: 1em;
		padding-bottom: 0;
	}
	#tutorial .headline2 {
		margin-bottom: 0.5em;
	}
	#tutorial .tutoList li {
		display: block;
		padding: 1em 1em 1.5em;
		margin-bottom: 2em;
	}
	#tutorial .tutoList .txt{
		width: auto;
		margin: 1em 0.5em 1em 2em;
	}
	#tutorial .tutoList .pic { 
		width: 100%;
	}
}


/* #spec
------------------------------------------------------*/
#spec {
	padding-top: 5em;
	padding-bottom: 5em;
	background-color: #d6d6d6;
	border-top: 1px solid #000;
}
#spec h3 {
	padding: 5px 1em;
	background: #f20c88;
	text-align: center;
	color: #FFF;
}
#spec h3:not(:first-of-type) { margin-top: 2em; }
#spec table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
#spec .sheet + .sheet {
	margin-top: 2em;
}
#spec th,
#spec td {
	font-size: 14px;
	padding: 1em 1em;
	border: 1px solid #CCC;
	vertical-align: top;
	background-color: #FFF;
}
#spec th {
	background: #e4f1fc;
	white-space: nowrap;
	font-weight: 500;
}
#spec .sub {
	background: #eee;
	white-space: nowrap;
}
#spec .capList{
	margin-top: 1em;
	margin-bottom: 0;
}
#spec .capList + table {
	margin-top: 2em;
}
#spec .capList li{
	color: #444;
	font-size: 0.8em;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 0;
}
@media only screen and (max-width:960px) {
}
@media only screen and (max-width:768px) {
	#spec {
		padding-top: 2em;
		margin-bottom: 0;
	}
	#spec th,
	#spec td {
		padding: 0.5em;
		font-size: 0.875em;
	}
}


/* #info
------------------------------------------------------*/
#info {
	padding-top: 2em;
	margin-top: 3em;
	padding-bottom: 4em;
}
#info h3 {
  text-align: center;
  margin: 0 auto 0.5em;
  color: #4c0edb;
}
#info ul {
	font-size: 0.9em;
  border-top: 1px solid #ccc;
  min-height: 0vw;
}
#info ul:not(:last-of-type) {
  margin-bottom: 2em;
}
#info li {
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}
#info li a,
#info li dl {
  display: flex;
  padding: 1em 0;
}
#info li dd {
  margin-left: 0;
}
#info li a:hover {
  color: #0076b3;
}
#info .date {
  margin-right: 1em;
  white-space: nowrap;
  font-weight: bold;
  color: #888;
}
@media only screen and (max-width:768px) {
	#info {
		padding-bottom: 1em;
	}
}


/* .contactArea
------------------------------------------------------*/
.contactArea{
	display: flex;
	margin: 2em 0;
	justify-content: center;
}