@charset "utf-8";

*{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}
body { 
	color: #313131;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 15px; font-weight: 400;
	line-height: 1.6; letter-spacing: 1px;
	-webkit-text-size-adjust: 100%; 
	-webkit-font-smoothing: subpixel-antialiased;
	word-wrap: break-word; 
	word-break: break-all; overflow-wrap : break-word;
}
.b500 {font-weight: 500;}
.b600 {font-weight: 600;}
.b700 {font-weight: 700;}

a {
	overflow: hidden; color: #22a50d; text-decoration: none; 
}

a:visited { color: #22a50d; }
a:hover {opacity: 0.7;}
a:active { color: #22a50d; }
a.disabled{pointer-events: none;}

a.link1{
	color: #84bb03;
	font-weight: 500;
}
.left { text-align: left;}
.center { text-align: center;}
.right { text-align: right;}
.margin_t5 {margin-top: 5px;}
.margin_t10 {margin-top: 10px;}
.margin_t20 {margin-top: 20px;}
.margin_t30 {margin-top: 30px;}
.margin_t40 {margin-top: 40px;}
.margin_t50 {margin-top: 50px;}
.margin_t60 {margin-top: 60px;}
.margin_t70 {margin-top: 70px;}
.margin_t80 {margin-top: 80px;}
.margin_t100 {margin-top: 100px;}

.margin_b5 {margin-bottom: 5px;}
.margin_b10 {margin-bottom: 10px;}
.margin_b20 {margin-bottom: 20px;}
.margin_b30 {margin-bottom: 30px;}
.margin_b40 {margin-bottom: 40px;}
.margin_b50 {margin-bottom: 50px;}
.margin_b80 {margin-bottom: 80px;}

.margin_tb5 {margin: 5px 0;}
.margin_tb10 {margin: 10px 0;}
.margin_tb20 {margin: 20px 0;}
.margin_tb30 {margin: 30px 0;}
.margin_tb40 {margin: 40px 0;}
.margin_tb50 {margin: 50px 0;}

.padding_t3 {padding-top: 3px;}
.padding_t5 {padding-top: 5px;}
.padding_t10 {padding-top: 10px;}
.padding_t20 {padding-top: 20px;}
.padding_t30 {padding-top: 30px;}
.padding_t40 {padding-top: 40px;}
.padding_t50 {padding-top: 50px;}

.paddingL10 {padding-left: 10px;}
.paddingL20 {padding-left: 20px;}
.paddingL30 {padding-left: 30px;}
.paddingL50 {padding-left: 50px;}
.padLR55 {
	padding: 0 55px;
}

.padding_b5 {padding-bottom: 5px;}
.padding_b10 {padding-bottom: 10px;}
.padding_b20 {padding-bottom: 20px;}
.padding_b30 {padding-bottom: 30px;}
.padding_b40 {padding-bottom: 40px;}
.padding_b50 {padding-bottom: 50px;}

.padding_tb10 {padding: 10px 0;}
.padding_tb20 {padding: 20px 0;}

.font12 {font-size: 12px;}
.font13 {font-size: 13px;}
.font14 {font-size: 14px;}
.font14imp {font-size: 14px !important;}
.font15 {font-size: 15px;}
.font16 {font-size: 16px;}
.font18 {font-size: 18px;}
.font20 {font-size: 20px;}
.font22 {font-size: 22px;}
.font24 {font-size: 24px;}
.font25 {font-size: 25px;}
.font26 {font-size: 26px;}
.font28 {font-size: 28px;}
.font30 {font-size: 30px;}
.font36 {font-size: 36px;}

.red{color: #ff0000;}

.lh1{
	line-height: 1;
}
.lh12{
	line-height: 1.2;
}
.lh13{
	line-height: 1.3;
}
.lh14{
	line-height: 1.4;
}
.lh15{
	line-height: 1.5;
}
.lh16{
	line-height: 1.6;
}
.lh17{
	line-height: 1.7;
}
.lh18{
	line-height: 1.8;
}
.lh20{
	line-height: 2.0; 
}
.lh22{
	line-height: 2.2; 
}

/* placeholder */
:placeholder-shown { color: #ccc; }
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder { color: #ccc; }
/* Firefox 19+ */
::-moz-placeholder { color: #ccc; opacity: 1; }
/* IE 10+ */
:-ms-input-placeholder { color: #ccc; }

.letter1 {letter-spacing: 1px;}
.letterSm0 {letter-spacing: 0;}
.letterSm1 {letter-spacing: -1px;}
.letterSm2 {letter-spacing: -2px;}
.indent-1 {
	padding-left:1em;
	text-indent:-1em;
}

img.w100{
	width: 100%; height: auto;
}
.max600{
	max-width: 600px; width: 100%; height: auto;
}


/* layout
--------------------------------------------------------- */
.container {
	max-width: 1000px;
	margin: 0 auto;
}

#topV {
	border: 10px solid #ccc;
	padding: 10px 40px 40px;
}

#topV .lang {
	text-align: center;
	margin-bottom: 15px;
}
.toggle-buttons {
	display: inline-block;
	border-radius: 5px;
	background: linear-gradient(90deg, #c56cff, #0053b3);
}
.toggle-buttons .button {
	display: inline-block;
	font-size: 12px;
	padding: 4px 8px;
	text-align: center;
	white-space: nowrap;
}
.toggle-buttons .button a{
	color: #fff; font-weight: 500;
}
.toggle-buttons .button.invalid {
	background: rgba(255,255,255,0.6);
	color: #313131; font-weight: 500;
}

#topV .flex1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#topV .flex1 .icon {
	width: 200px;
}
#topV .flex1 .download {
	display: block;white-space: nowrap;
	font-weight: 400;
	color: #fff;font-size: 16px;
	padding: 10px 20px;
	border-radius: 5px;
	background: linear-gradient(90deg, #c56cff, #0053b3);
}
#topV .flex1 .h1txt {
	width: calc(100% - 200px);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#topV .screen {
	max-width: 500px;
	margin: 15px auto 0;
}

.slick-slide img {
	width: 100%;
	height: auto;
}

.invalidLink{
	pointer-events:none;
}

h1 {
	font-size: 12px;
	margin-bottom: 5px;
}
.h2box {
	position: relative;
	margin-bottom: 15px;
}
.h2box::after {
	display: block;
	content: '';
	position: absolute;
	bottom: 0px; left: 0px;
	width: 100%; height: 5px;
	background: linear-gradient(90deg, #c56cff, #0053b3);
}
h2 {
	font-size: 26px; letter-spacing: 0px;
	margin-bottom: 10px; line-height: 1.4;
	display: inline-block;
	font-weight: 400;
	color: transparent;
	background: linear-gradient(30deg, #c56cff, #0053b3);
	-webkit-background-clip: text;
	background-clip: text;
}
h2 span {
	font-size: 18px; 
}
.container h2 {
	margin-bottom: 5px;
	font-size: 20px;
}
.container h2::first-letter {
	font-size: 150%; letter-spacing: 0px;
}
h3 {
	font-size: 19px; 
}
.h3box {
	font-size: 16px; 
	font-weight: 400;
	background: #eceaea;
	padding: 10px;
	color: #ff0000;
	margin-bottom: 10px;
	text-align: center;
}
.padbox {
	padding: 20px 50px 0;
}

.flexDW {
	display: flex;
	justify-content: center;
	/*align-items: center;*/
}
.butDW {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	font-size: 16px;
	padding: 3px;text-align: center;
	border-radius: 5px;
	background: linear-gradient(90deg, #c56cff, #0053b3);
	width: 200px;
}

.butDW.contact {width: 300px;}

.butDW a {
	display: inline-block;
	background: #fff; width: 100%;
	border-radius: 3px;height: 100%;
	color: #0053b3;
}
.space50 {
	width: 50px;
}

ul.list1 {
	list-style-position: outside;
	padding-left: 12px;
	margin-left: 0.5em;
}
ul.list1 li {
	position: relative;
	font-size: 15px;
}
ul.list1 li::after {
	display: block;
	position: absolute;
	top: .4em;
	left: -1.2em;
	font-size: 14px;
	line-height: 1;
	font-family: "Font Awesome 5 Free";
	content: '\f058';
	font-weight: bold;
	color: #999;
}
section {
	padding-bottom: 50px;
}
section p {
	font-size: 15px;
}

#page_Index {
	background: #eceaea;
	padding: 30px;
	max-width: 600px;
	margin: 50px auto 80px;
	border-radius: 12px;
}
#page_Index .title {
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 10px;
	text-align: center;
}
ul.list_Index {
	list-style-type: decimal;
	list-style-position: outside;
	padding-left: 12px;
	margin-left: 0.5em;
}
ul.list_Index li {
	font-size: 15px;
}

ul.list_install {
	list-style-type: decimal;
	list-style-position: outside;
	padding-left: 12px;
	margin-left: 0.5em;
}
ul.list_install li {
	font-size: 15px;
}

table.req {
	border-collapse: collapse;
	border-spacing: 10px;
	margin: auto;
}
table.req th, table.req td {
	padding: 10px 10px; vertical-align: top;
}
table.req tr:nth-child(odd) {
	background-color:  #eceaea;
}
table.req td button{
	border-radius: 2px;
	border: 1px solid #999;
	color: #000;
	display: inline-block;
	font-size: 13px;
	margin: 2px;
	padding: 3px 6px;
}

/* footer */
footer{
	margin-top: 80px;
	background: linear-gradient(30deg, #c56cff, #0053b3);
}
#copy {
	margin: 30px auto 0px;
	max-width: 1000px;
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	text-align: center;
	padding: 10px 0;
}


@media only screen and (max-width: 1000px) {
	.container h2::first-letter {padding-left: 20px;}
}
@media only screen and (max-width: 767px) {
	#topV {border: 8px solid #ccc;padding: 20px;}
	#topV .flex1 .icon {width: 130px;}
	#topV .flex1 .icon img {width: 100%; height: auto;}
	#topV .flex1 .h1txt {width: calc(100% - 160px);display: block;}
	#topV .flex1 .down {text-align: center;max-width: 200px;margin: 25px auto 0;}
	#topV .screen {margin: 50px auto 0;}
	h2 {font-size: 20px;}
	h2 span {font-size: 16px;}
	.container h2::first-letter {font-size: 150%;padding-left: 10px;}
	.padbox {padding: 0 10px;}
}
@media only screen and (max-width: 640px) {
	#topV {border: 6px solid #ccc;padding: 15px;}
	#topV .flex1 {display: block;}
	#topV .flex1 .icon {width: 120px; margin: 0 auto 25px;}
	#topV .flex1 .h1txt {width: 100%;}
}