@charset "utf-8";
/*================================================================
	Remote VF Setting
================================================================*/
.pColor01{color: #FF3D6B;}
.pColor02{color:#135AAC;}
.backBlue{background-color: #F1F9FE;}
.colorUnderline{
	padding: 0 .3em;
	background: rgba(0,0,0,0) -webkit-linear-gradient(transparent 60%,#f8f066 0%) repeat scroll 0 0;
	background: rgba(0,0,0,0) -o-linear-gradient(transparent 60%,#f8f066 0%) repeat scroll 0 0;
	background: rgba(0,0,0,0) linear-gradient(transparent 60%,#f8f066 0%) repeat scroll 0 0;
	display: inline;
}


/* pageTitle
--------------------------------------------*/
#hero.remote .txt .title {
	font-size: 1.9em;
	letter-spacing: 0.15em;
}
#hero.remote .txt .subtitle {
	font-size: 1.1em;
	letter-spacing: 0.1em;
	margin: 0 1em 1em;
	padding: 0.2em 1em;
}
@media only screen and (max-width:1024px) {
	#hero.remote .txt .title {
		font-size: 1.3em;
		margin: 0 1em;
	}
	#hero.remote .txt .subtitle {
		font-size: 0.85em;
		letter-spacing: 1px;
	}
}

/* FormLinkTop
--------------------------------------------*/
#FormLinkTop {
	margin-top: -5%;
	padding: 1% 4% 1%;
	background-color: #FFF;
/*	border-bottom:3px solid #ffb74a;*/
	border-bottom:3px solid #1abb69;
	text-align: center;
}
#FormLinkTop .buttonArrow span{
	letter-spacing:1px;
}
#FormLinkTop .btnType01 a {
	font-size: 1.1em;
/*	background-color: #ff9e4a;*/
	background-color: #1abb69;
	padding: 1.2em 2.2em 1.2em 1.7em;
	margin-bottom: 1em;
	border-radius: 10px;
}
@media only screen and (max-width:1024px) {
	#FormLinkTop .btnType01 a {
		font-size: 0.9em;
		padding: 1.2em 1.8em 1.2em 1.2em;
	}
}

/* remoteCont
--------------------------------------------*/
#remoteCont{
	position: relative;
	overflow: hidden;
/*	margin-top: -5%;*/
}
#remoteCont:before {
	content: '';
	position: absolute;
	top: 0;
	left: 40%;
	width: 100%;
	height: 100%;
	background-color: rgba(255,219,245,0.60);
	-webkit-transform: skewX(-20deg);
	-ms-transform: skewX(-20deg);
	transform: skewX(-20deg);
	z-index: -2;
}
#remoteCont:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../img/kinesys3/feature/remote/bg_top.png") no-repeat 50% 120%;
	background-size:contain;
	z-index: -1;
}

#remoteCont .col2inner{
	margin: 0 auto 3em;
}
#remoteCont .col2inner .remBefore{
	width: 38%;
	position: relative;
	z-index: 2;
	text-align: center;
}
#remoteCont .col2inner .remAfter{
	width: 54%;
	text-align: center;
}
#remoteCont .col2inner .imgTitle{
	padding: 0 0 5%;
}
#remoteCont .col2inner .remAfter .imgTitle{
	padding: 0 6% 3%;
}
#remoteCont .col2inner .remBefore::after{
	content:url("../img/kinesys3/feature/remote/top_arrow.png");
	position: absolute;
	top: 50%;
	right: -80px;
	width: 100px;
	height: 100px;
	margin-top: -50px;
}
#remoteCont .signageData{
	width: 70%;
	margin: 0 auto;
	padding: 2% 4% 2% 5%;
	border-radius: 6px;
	box-shadow: 0px 1px 6px rgba(0,0,0,.1);
	background-color:rgba(255,255,255,0.75);
}
#remoteCont .signageData .col2inner{
	margin: 0;
}
#remoteCont .signageData .pic{
	width: 24%;
}
#remoteCont .signageData .txt{
	width: 68%;
}
#remoteCont .signageData .txt .headline4{
	font-size:1.3em;
	line-height: 1.6;
	margin-bottom: 0.6em;
}

@media only screen and (max-width:1024px) {
	#remoteCont:before {
		top: 27%;
		left: 0;
		-webkit-transform: skewY(-15deg);
		-ms-transform: skewY(-15deg);
		transform: skewY(-15deg);
	}
	#remoteCont .col2inner{
		margin-bottom: 2em;
	}
	#remoteCont .col2inner .remBefore {
		width: 70%;
		margin-bottom: 4em;
	}
	#remoteCont .col2inner .remAfter{
		width: 100%;
	}
	#remoteCont .col2inner .imgTitle{
		padding: 0 0 5%;
	}
	#remoteCont .col2inner .remAfter .imgTitle{
		padding: 0 3% 3%;
	}
	#remoteCont .col2inner .remBefore::after{
		transform: rotate(90deg) scale(0.6,0.6);
		top: 100%;
		right: 50%;
		margin-right: -50px;
	}
	#remoteCont:after {
		background: url("../img/kinesys3/feature/remote/bg_top_sp.png") no-repeat 50% 105%;
		background-size:contain;
	}

	#remoteCont .signageData{
		width: 90%;
		padding: 5% 5% 4% 5%;
	}
	#remoteCont .signageData .col2inner{
		width: 100%;
	}
	#remoteCont .signageData .pic{
		width: 40%;
	}
	#remoteCont .signageData .txt{
		width: 100%;
	}
	#remoteCont .signageData .txt .headline4{
		font-size:1.2em;
		text-align: center;
	}
}


/* remotePv
--------------------------------------------*/
#remotePv{
	background: #FFF url("../img/kinesys3/feature/remote/bg_pv.jpg") no-repeat 50% 60%;
	background-size:cover;
	position: relative;
	overflow: hidden;
}
#remotePv:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(288,288,288,0.6);
}
#remotePv .inner{
	width: 80%;
	max-width: 880px;
	margin: 0 auto;
	padding-top: 1em;
}
@media only screen and (max-width:1024px) {
	#remotePv .inner {
		width: 100%;
		max-width: inherit;
		padding-top: 0;
	}
}


/* remotePlan
--------------------------------------------*/
#remotePlan{
	background-color:#F1F9FE;
}
#remotePlan .col2inner .pic {
	width: 43%;
}
#remotePlan .col2inner .txt {
	width: 50%;
}
#remotePlan .headline3{
	font-size: 1.3em;
	line-height: 1.8;
	margin-bottom: 1em;
}
@media only screen and (max-width:1024px) {
	#remotePlan .col2inner {
		flex-direction: column-reverse;
		width: 95%;
	}
	#remotePlan .col2inner .txt {
		margin-bottom: 2em;
	}
	#remotePlan .col2inner .pic,
	#remotePlan .col2inner .txt {
		width: 100%;
	}
}

/* vfFlow
--------------------------------------------*/
#vfFlow{
/*	background-color: #dff1ff;*/
}
#vfFlow .linkList{
	display: flex;
	flex-direction: column;
	align-items:center;
}

#vfFlow .linkList li{
	line-height: 1.8;
	margin-bottom: 0.7em;
	text-indent: -0.8em;
	margin-left: 2em;
	text-align: left;
	width: 80%;
}
#vfFlow .linkList li i{
	color:#135aac;
}
.fullflow{
	background-color: rgba(200,200,200,0.15);
	margin-top: 3em;
	padding: 5%;
}
.fullflow .arrow {
	position: relative;
}
.fullflow .arrow:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f063";
	color: #135aac;
	font-size: 4.5em;
	line-height: 1;
	text-align: center;
	position: absolute;
	top: 90%;
	right: 50%;
	width: 70px;
	height: 70px;
	margin-right: -35px;
	z-index: 5;
}
.fullflow .customer,
.fullflow .store{
	padding: 3% 4% 2%;
	position: relative;
}
.fullflow .bgno {
	font-family: 'Roboto';
	font-weight: 900;
	font-size: 10em;
	position: absolute;
	top: 80px;
	left: 1%;
	line-height: 0;
	color: rgba(22,232,52,0.40);
	font-style: italic;
	z-index: -1;
}
.fullflow .customer{
	background-color: rgba(158,255,175,0.35);
	margin-bottom: 2em;
}
.fullflow .store{
	background-color: rgba(77,213,255,0.25);
}
.fullflow .store .bgno {
	color: rgba(57,178,245,0.30);
}
.fullflow .flowBox li{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(255,255,255,0.70);
	padding: 3%;
	margin: 2em 0;
	border-radius: 6px;
	box-shadow: 0px 1px 6px rgba(0,0,0,.1);
}
.fullflow .flowBox li:last-child{
	margin-bottom: 1em;
}
.fullflow .flowBox li .pic{
	width: 45%;
}
.fullflow .flowBox li .txt{
	width: 50%;
	padding-left:1em;
}
.fullflow .flowBox li .txt .headline4{
	font-size: 1.2em;
}
.fullflow .videoTool{
	color: #FFF;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 2px;
	background-color:#FF3D6B;
	padding: 0.3em 1em;
	margin: 1em auto 0;
	display: inline-block;
	border-radius: 4px;
	text-align: center;
}


@media only screen and (max-width:1024px) {
	.fullflow{
		padding: 4%;
		margin-top: 2em;
	}
	.fullflow .flowBox li{
		flex-direction: column;
		justify-content: center;
		margin: 1em 0 2em;
		padding: 5% 6%;
	}
	.fullflow .flowBox li .txt,
	.fullflow .flowBox li .pic{
		width: 100%;
	}
	.fullflow .flowBox li .txt{
		margin-bottom: 1.5em;
		padding-left:0;
	}
}
@media only screen and (max-width:768px) {
	.fullflow .arrow:before {
		font-size: 10vw;
		top: 95%;
	}
	.fullflow .bgno {
		font-size:18vw;
		top: 5px;
		margin-top: 8%;
	}
}


/* howitFlow
--------------------------------------------*/
@media only screen and (max-width:1024px) {
	#howitFlow .col2inner{
		width: 95%;
	}
	#howitFlow .col2inner .txt{
		margin-bottom: 1.5em;
	}
}

/* remoteAdvan
--------------------------------------------*/
#remoteAdvan{
}
.advanBox {
	display: flex;
	justify-content: space-between;
	margin-top: 2.5em;
}
.advanBox .packTxt {
	flex-basis: 48%;
	padding: 1em;
	border-radius: 10px;
	box-shadow: 0px 2px 8px rgba(0,0,0,.2);
	position: relative;
	overflow: hidden;
	z-index: -2;
	background: #FFF url("../img/kinesys3/feature/remote/bg_w01.jpg") no-repeat 50% 10%;
	background-size:cover;
}
.advanBox .packTxt.blueType {
	background: #FFF url("../img/kinesys3/feature/remote/bg_w02.jpg") no-repeat 50% 20%;
	background-size:cover;
}
.advanBox .packTxt:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(288,288,288,.75);
	z-index: -1;
}
.advanBox .packTxt .packTitle {
	color: #FFF;
	font-size: 1.2em;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 3px;
	padding: 0.9em;
	border-radius: 8px;
	background-color:rgba(26,195,121,0.80);
}
.advanBox .packTxt.blueType .packTitle {
	background-color:rgba(38,152,240,0.80);
}
.advanBox .packIn  {
	padding: 1.5em 1em
}
.advanBox .packIn li {
	padding-left: 1.8em;
	text-indent: -0.9em;
	margin-bottom: 0.4em;
	letter-spacing: 1px;
	font-weight: 700;
}
.advanBox .packIn li i {
	font-size: 1.2em;
	margin-right: 0.2em;
}
.packTxt.greenType .packIn li i {color: #1ac379;}
.packTxt.blueType .packIn li i {color: #2698f0;}

#remoteAdvan .meritcom {
	margin-top: 3em;
	text-align: center;
	margin: 3em auto 0;
	border-radius: 10px;
	padding: 1em 2em;
	border: 4px solid #FF3D6B;
	width: 80%;
}
#remoteAdvan .meritcom .title{
	color: #FF3D6B;
	font-weight: 900;
	letter-spacing: .1em;
	line-height: 1.6;
	padding-bottom: 0.8em;
	border-bottom: 1px dotted #FF3D6B;
}
#remoteAdvan .meritcom .txt{
	padding: 1em 0 0.5em;
	font-size: 1.1em;
	letter-spacing: 2px;
}

@media only screen and (max-width:1024px) {
	.advanBox {
		display: block;
		width: 100%;
		margin: 0 auto 2em;
	}
	.advanBox .packTxt {
		flex-basis: 100%;
		margin-bottom: 1em;
		padding: 1.5em 1em;
	}
	#remoteAdvan .meritcom {
		width: 90%;
	}
}


/* recommend
--------------------------------------------*/
#recommend {
	background-color: #F1F9FE;
}
#recommend li{
	padding: 1% 5% 0;
	border: none;
	background-color: initial;
	border-radius: 0;
}
#recommend .txt{
	width: 100%;
}
#recommend .txt table{
	width: 100%;
	border-top: 1px dotted #ccc;
	margin: 1.5em 0;
}
#recommend .txt tr {
	border-bottom: 1px dotted #ccc;
}
#recommend .txt th,
#recommend .txt td{
	padding: 0.8em 1.5em;
}
#recommend .txt th {
	color: #135aac;
	font-weight: 700;
	letter-spacing: 2px;
	min-width: 100px;
}
#recommend .txt td {
	letter-spacing: 1px;
}
#recommend .iconLayout .btnType01 a{
	min-width: 260px;
}
#recommend .iconLayout .icon{
	min-width: 380px;
	margin-right: 5em;
}
@media only screen and (max-width:1024px) {
	#recommend .txt th,
	#recommend .txt td{
		padding: 0.8em 1em;
	}
	#recommend .txt th {
		min-width: 80px;
	}
	#recommend .iconLayout .icon{
		min-width: 280px;
		margin-right: 3em;
	}
}
@media only screen and (max-width:736px) {
	#recommend .iconLayout .icon{
		min-width: 200px;
		margin: 0 auto 1em;
	}
}

/* docDownload
--------------------------------------------*/
#docDl {
	background: #FFF url("../img/kinesys3/feature/remote/bg_dl.jpg") no-repeat 50% 50%;
	background-size:cover;
}
#docDl .txt {
	text-align: center;
	width: 60%;
	margin: 0 auto;
	padding: 2em ;
	background-color:rgba(255,255,255,0.85);
	border-radius: 10px;
}
#docDl .txt .headline4 {
	font-size: 1.2em;
}
#docDl .btnType01 a {
/*	background-color: rgba(250,74,101,1.00);*/
	background-color: #1abb69;
}
@media only screen and (max-width:1024px) {
	#docDl .txt{
		width: 80%;
		min-width:inherit;
	}
}
@media only screen and (max-width:736px) {
	.btnType01 a {
		min-width: initial;
	}
}



/*================================================================
	Remote PRICE Setting
================================================================*/
#priceBox {
	padding-top: 1%;
}
.cost01,.cost02,.cost03,.cost04{
	font-family: 'Roboto';
	font-size: 1.6em;
	letter-spacing: 1px;
	line-height: 1;
}
.cost02 {
	font-size: 2em;
}
.cost03 {
	font-size: 3em;
}
.cost04 {
	font-size: 2.5em;
	letter-spacing: 0;
}

/* regular
--------------------------------------------*/
.regular{
	border: 1px solid #E8E8E8;
	background-color: #F8F8F8;
}
.regular .title{
	font-size: 1.2em;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.8;
	text-align: center;
	padding: 0.4em;
	background-color: #DDD;
}
.regular ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 1.5em;
}
.regular ul li {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 30%;
	font-weight: 700;
	letter-spacing: 2px;
	text-align: center;
	padding: 1em 2em;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #FFF;
	position: relative;
}
.regular ul li .pic{
	margin-bottom: 1em;
	padding-top: 0.5em;
}
.regular ul li .pic.softimg img{
	width: 60%;
}
.regular ul li .pic.hardimg img{
	width: 75%;
}
.regular ul li .itemT{
	line-height: 1.5;
	margin-bottom: 0.6em;
}
.regular ul li:after {
	font-family: "Font Awesome 5 Free";
	content: "\f067";
	color: #999;
	font-size: 3em;
	line-height: 1;
	text-align: center;
	position: absolute;
	top: 50%;
	right: -16%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	z-index: 2;
}
.regular ul li:nth-last-child(2):after {
	content: "\f52c";
}
.regular ul li:last-child:after {
	display: none;
}
.regular ul .total .overlineP{
	position: relative;
}
.regular ul .total .overlineP:before{
	content: '';
	position: absolute;
	top: 50%;
	left: -15px;
	width: 160px;
	height: 7px;
	background-color: rgba(255,24,52,0.70);
	-webkit-transform: translateY(-50%) rotate(165deg);
	transform: translateY(-50%) rotate(165deg);
	border-radius: 10px;
	z-index: 2;
}

@media only screen and (max-width:1024px) {
	.regular:before {
		font-size: 4em;
		text-align: center;
		position: absolute;
		top: calc(100% + 15px);
		width: 60px;
		height: 60px;
		margin-right: -30px;
	}
	.regular ul li {
		flex-direction: column;
		justify-content: center;
		margin: 0 auto 3em;
		width: 100%;
	}
	.regular ul li:last-child {
		margin-bottom: 0;
	}
	.regular ul li:after {
		font-size: 3em;
		position: absolute;
		top: calc(100% + 3px);
		right: 50%;
		width: 40px;
		height: 40px;
		margin-right: -20px;
		margin-top: 0;
		transform: rotate(90deg);
	}
	.regular ul .total .overlineP:before{
		top: 48%;
		left: -15px;
		width: 150px;
		height: 7px;
		-webkit-transform: translateY(-50%) rotate(170deg);
		transform: translateY(-50%) rotate(170deg);
	}
}


/* timeSale
--------------------------------------------*/
.timeSale {
	margin-bottom: 1em;
	text-align: center;
	color: #FD3874;
	position: relative;
	margin-top: 6.5em;
}
.timeSale:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f063";
	color: #FDDE14;
	font-size: 4.5em;
	line-height: 1;
	text-align: center;
	position: absolute;
	top: calc(0% - 70px - 10px);
	right: 50%;
	width: 70px;
	height: 70px;
	margin-right: -35px;
	z-index: 5;
}


.timeSale span{
	position: relative;
	font-size: 1.6em;
	letter-spacing: 4px;
	line-height: 1.8;
	font-weight: 900;
}
.timeSale span:before{
	content: '';
	position: absolute;
	bottom: 30%;
	left: -2em;
	width: 40px;
	height: 4px;
	margin-top: -6px;
	background-color: #FD3874;
	-webkit-transform: translateY(-50%) rotate(65deg);
	transform: translateY(-50%) rotate(65deg);
	border-radius: 10px;
}
.timeSale span:after{
	content: '';
	position: absolute;
	bottom: 30%;
	right: -1.8em;
	width: 40px;
	height: 4px;
	margin-top: -6px;
	background-color: #FD3874;

	-webkit-transform: translateY(-50%) rotate(115deg);
	transform: translateY(-50%) rotate(115deg);
	border-radius: 10px;
}


/* supportPrice
--------------------------------------------*/
.supportPrice{
	border: 1px solid #FD3874;
	background-color: rgba(255,221,244,0.4);
	position: relative;
}
.supportPrice .title{
	color: #FFF;
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.8;
	text-align: center;
	padding: 0.4em;
	background-color: #FD3874;
}
.supportPrice .col2inner{
	margin: 2em;
}
.supportPrice .col2inner .txt{
	width: auto;
	text-align: center;
}
.supportPrice .col2inner .txt .setCont{
	margin-bottom: 0;
}
.supportPrice .col2inner .txt .setCont li{
	color: #FFF;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 0.3em 1.2em;
	margin: 0 1em 0.8em 0;
	display: inline-block;
	border-radius: 30px;
	background-color: #FF7C23;
}
.supportPrice .col2inner .txt .priceNote{
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1px;
	padding-top: 0.4em;
}

.supportPrice .col2inner .limPrice{
	font-weight:700;
}
.supportPrice .col2inner .colorUnderline{
	padding: 0 .15em;
}

@media only screen and (max-width:1024px) {
	.supportPrice .col2inner{
		margin: 2em auto;
	}
	.supportPrice .col2inner .txt{
		width: 100%;
		text-align: center;
		margin-bottom: 1em;
	}
}


/* subscPrice
--------------------------------------------*/
#subscBox .topTxt{
	margin-bottom: 3em;
	text-align: center;
}
#subscBox .topTxt .title{
/*	color: #166BCC;*/
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 0.5em;
}
#subscBox .subscPack{
	margin-bottom: 3em;
	text-align: center;
}
#subscBox .subscPack .inner{
	padding: 1em;
	width: 60%;
	margin: 0 auto;
	border: 1px solid #166BCC;
	color: #166BCC;
}
#subscBox .subscPack .inner .title{
	margin-top: -2.2em;
	font-weight: 700;
}
#subscBox .subscPack .inner .title span{
	background-color: #F1F9FE;
	padding: 0.5em 1em;
	line-height: 1.6;
	display: inline-block;
}
#subscBox .subscPack .inner .txt{
	font-weight: 700;
	font-size: 1.2em;
	margin-top: 0.5em;
}

.subscPrice{
	background-color: rgba(144,211,255,0.40);
}
.subscPrice{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
/*	flex-wrap: wrap;*/
}
.subscPrice .col2inner{
	font-weight:700;
	width: 43%;
	padding: 2em 0;
	margin: 2em;
	background-color: #FFF;
	border-radius: 8px;
	justify-content:center;
	box-shadow: 0px 1px 6px rgba(0,0,0,.1);
}
.subscPrice .col2inner .txt{
	width: auto;
	text-align: center;
}
.subscPrice .col2inner .month{
	color: #FFF;
	letter-spacing: 1px;
	padding: 0.2em 1em;
	margin: 0 1.5em 0 0;
	display: inline-block;
	border-radius: 30px;
	background-color: #166BCC;
}
#subscBox .listLayout{
	font-size:0.9em;
}

@media only screen and (max-width:1024px) {
	#subscBox .topTxt{
		text-align: left;
	}
	#subscBox .subscPack .inner{
		width: 100%;
	}
	#subscBox .subscPack .inner .title{
		margin-top: -2.4em;
	}
	.subscPrice .col2inner .month{
		margin: 0 0 1em 0;
	}
}
@media only screen and (max-width:736px) {
	#subscBox .subscPack .inner .title{
		margin-top: -3.2em;
	}
	.subscPrice{
		flex-wrap: wrap;
	}
	.subscPrice .col2inner{
		width: 100%;
	}
	.subscPrice .col2inner:first-child{
		margin-bottom: 0;
	}
}