@charset "utf-8";
.sp{
	display: none;
}
body{
}
div.container{
	width: 80%;
	margin: 0 auto;
	position: relative;
}
header{
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	min-height: 65px;
}
main{
	width: 100%;
	overflow-x: hidden;
}
h1{
	position: absolute;
	top: 15px;
	left: 0;
	z-index: 1000;
}
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

header nav ul{
	display: block;
	position: absolute;
	top: 10px;
	right: 180px;
	text-align: right;
	width: calc(100% - 350px - 10%);
}
header nav ul li{
	display: inline-block;
}

header nav ul li a{
	color: #FFFFFF;
	font-size: 16px;
	line-height: 50px;
	padding: 0 40px 0 0;
}
header p#acCreate a{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}
header p#acCreate a{
	color: #FFFFFF;
	font-size: 16px;
	display: block;
	line-height: 60px;
	width: 180px;
	text-align: center;
	background: linear-gradient(45deg,#915cb8 0%, #50a0d1 100%);
}
header p#acCreate.rec a{
	color: #FFFFFF;
	font-size: 16px;
	display: block;
	line-height: 60px;
	width: 180px;
	text-align: center;
	background: linear-gradient(45deg,#00CDFF 0%, #0093FF 100%);
}



.mainvisualv2{
	width: 100vw;
	height: 700px;
	position: relative;
	overflow-x: hidden;

}
.mainvisualv2 div.slideList{
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.mainvisualv2 div.slideList ul{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 300vw;
}
.mainvisualv2 div.slideList li{
	display: inline-block;
	margin: 0;
	padding: 0;
	height: 100%;
}


.mainvisualv2 div.slideList li img{
	height: 100%;
	width: 1300px;
	object-fit: cover;
		object-position:left top;

/*	position: absolute;
*/	top: 0;
	left: 0;
}
.mainvisualv2:after{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: "";
	background: linear-gradient(45deg,#996cbb 30%, #50a0d1 100%);
	opacity: 0.83;
}
.mainvisualv2.rec:after{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: "";
	background: linear-gradient(45deg,#00b0db 0%, #007dd8 100%);
	opacity: 0.83;
}
.mainvisualv2 p.cap{
	font-size: 40px;
	color: #FFFFFF;
	width: 50%;
	margin-right: 5%;
	line-height: 200%;
	position: relative;
	text-align: center;
}
.mainvisualv2 p.cap em{
	font-style: normal;
	display: inline-block;
	position: relative;
}

.mainvisualv2 p.cap strong{
	font-weight: normal;
	position: absolute;
	bottom: -50px;
	right: -80px;
	font-size: 30px;
}
.mainvisualv2 p.cap strong span.l{
	font-size: 40px;
}


.mainvisualv2 .container{
	display: flex;
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
	width: 80%;
	height: 100%;
}
.mainvisualv2 div.login{
	width: 35%;
	padding: 50px;
background: #000;
opacity: 0.75;
}
.mainvisualv2 div.login dl dt{
	color: #FFFFFF;
	font-size: 18px;
	margin-bottom: 10px;
}
.mainvisualv2 div.login dl dd{
	margin-bottom: 30px;
}
.mainvisualv2 div.login dl dd input{
	padding: 10px;
	width: calc(100% - 20px);
	border-spacing: none;
}
.mainvisualv2 div.login ul li a{
	color: #915CB8;
	font-size: 16px;
	display: block;
	margin-bottom: 10px;
}
.mainvisualv2 div.login p.bt{
	display: block;
	margin-top: 60px;
	text-align: center;	
}
.mainvisualv2 div.login p.bt button{
	color: #FFFFFF;
	background: none;
	border: 1px solid #FFFFFF;
	border-radius: 200px;
	width: 100%;
	display: block;
	padding: 20px 0;
	font-size: 18px;	
}
.mainvisualv2:before{
	content: "";
	display: block;
	position: absolute;
	bottom: 30px;
	right: 30px;
	width: 26px;
	height: 100px;
	background: url(../images/mv_c1.png);	
}

.mainvisualv2 div.ymovie{
    width: 35%;
	padding: 25px;
    background: #000;
    opacity: 0.9;
    margin-left: 50px;
}
.mainvisualv2 div.ymovie p{
	color: #FFFFFF;
	font-size: 18px;
	margin-bottom: 10px;
}
.mainvisualv2 div.ymovie ul li a{
	color: #915CB8;
	font-size: 16px;
	display: block;
	margin-bottom: 10px;
}
.mainvisualv2 div.ymovie.rec ul li a{
	color: #0093FF;
	font-size: 16px;
	display: block;
	margin-bottom: 10px;
}

#c1{
	background: #000000;
	color: #FFFFFF;
	padding: 100px 0;
	position: relative;
	overflow-x: hidden;
}
#c1 h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#c1 h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#00CDFF 0%, #0093FF 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#c1 .rb{
	text-align: right;
	right: -100px;
	bottom: 100px;
	position: absolute;
}

#c1 .col50{
	width: 100%;
    margin-bottom: 120px;
	padding-bottom: 450px;
}



#c2{
	background: #000000;
	color: #FFFFFF;
	padding: 100px 0;
	position: relative;
}
#c2 h2{
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 30px;
}

#c2 .prL{
	width: calc(40% - 100px);
	padding: 100px; 
	position: relative;
	z-index: 1;
	padding-left: 10%;
	padding-right: 100px;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	display: block;
	height: calc(100%);
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: left;  /* 子要素をflexboxにより中央に配置する */
}
#c2 .prL.rec{
	width: calc(40% - 100px);
	padding: 100px; 
	position: relative;
	z-index: 1;
	padding-left: 10%;
	padding-right: 100px;
	background: linear-gradient(45deg,#00b0db 0%, #007dd8 100%);
	display: block;
	height: calc(100%);
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: left;  /* 子要素をflexboxにより中央に配置する */
}
#c2 .prL p.bt a{
	background: none;
	border: 1px solid #FFFFFF;
	width: calc(78% - 102px);
	display: block;
	padding: 20px 0;
	font-size: 18px;	
	text-align: center;
	margin-top: 100px;
	width: 100%;
}
#c2{
	display: flex;
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
#c2 .prR{
}

#c2 .col50.slide{
	background: none;
	width: 50%;
	overflow-x: hidden;
}
#c2 .col50.slide ul.control{
	margin-top: 30px;
	text-align: center;
}

#c2 .col50.slide ul.control li{
	display: inline-block;
	height: 4px;
	width: 10%;
	margin: 0 1%;
	background: #828282;
	cursor: pointer;
}
#c2 .col50.slide ul.control li.ac{
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
}



#c2 .slide{
}
#c2 .slide ul.slide li{
	position: absolute;
	left: 100%;
	top: 0;
}

#c2 .slide ul.slide{
	width: 70%;
	margin: 0 auto;
	overflow-x: hidden;
	text-align: center;
	/* position: relative; */
}
#c2 .slide ul.slide li img{
	max-width: 80%;
}


#c2 .slide ul.slide li.ac{
	display: block;
	position: relative;
}
#c3{
	background: #000000;
	padding: 100px 0;
	color: #FFFFFF;
}
#c3 .col50{
	padding-left: calc(100% - 720px);
}
#c3 h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#c3 h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#00CDFF 0%, #0093FF 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#c3 ul{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding-bottom: 400px;
}

#c3 ul li{
	width: calc(100% / 3 - 4%);
	margin: 2%;
	background: #232323;
	position: relative;
}
#c3 ul li img{
	width: 100%;
}
#c3 ul li strong{
	display: block;
	padding: 20px 20px 0 20px;
	font-weight: normal;
}
#c3 ul li span{
	padding: 10px 20px 20px 20px;
	color: #828282;
	display: block;
}
#c3 ul li:nth-child(3n+1){top: 100px;}
#c3 ul li:nth-child(3n+2){top: 200px;}
#c3 ul li:nth-child(3n+3){top: 300px;}

#c3 p.bt a{
	background: none;
	border: 1px solid #FFFFFF;
	display: inline-block;
	padding: 20px 150px;
	font-size: 18px;	
	text-align: center;
	margin-top: 100px;
}

#c4{
	background: #000000;
	padding: 100px 0;
	color: #FFFFFF;
}
#c4 h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#c4 h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#00CDFF 0%, #0093FF 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#c4 div.plans{
	display: flex;
justify-content: space-between;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
}
#c4 div.plans div.plan{
	width: calc(100% / 3 - 4%);
	background: #FFFFFF;
	border-radius: 10px;

}
#c4 div.plans div.plan h3{
	padding: 20px;
	font-size: 30px;
	text-align: center;
	border-radius: 10px 10px 0px 0px;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
}
#c4 div.plans div.plan p strong{
	font-size: 40px;
	font-weight: normal;
	color: #915CB8;
	padding: 90px 0 60px 0;
	display: block;
	text-align: center;
}
#c4 div.plans div.plan p{
	color: #828282;
	padding: 0 30px 30px 30px;
}
#c4 p.bt a{
	background: none;
	border: 1px solid #FFFFFF;
	display: inline-block;
	padding: 20px 150px;
	font-size: 18px;	
	text-align: center;
}

#c4 p.bt {
	text-align: center;
}



#c5{
	background: #000000;
	padding: 100px 0;
	color: #FFFFFF;
}
#c5 h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
	text-align: center;
}
#c5 h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#00CDFF 0%, #0093FF 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
	text-align: center;
}
#c5 p{
	text-align: center;
	padding: 0 20%;
	margin-bottom: 100px;
}
#c5 dl{
	color: #828282;
}
#c5 dl dt{
	background: #FFFFFF;
	padding: 10px;
	position: relative;
	padding-left: 60px;
	margin-top: 30px;
	cursor: pointer;
}
#c5 dl dt:before{
	content: "Q";
	background: linear-gradient(45deg,#7373b2 40%, #50a0d1 100%);
	display: block;
	text-align: center;
	width: 40px;
	height: 100%;
	line-height: 45px;
	position: absolute;
	top: 0;
	left: 0;
	color: #FFFFFF;
	font-size: 30px;
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: left;  /* 子要素をflexboxにより中央に配置する */
}
#c5 dl dt.rec:before{
	content: "Q";
	background: linear-gradient(45deg,#00CDFF 0%, #0093FF 100%);
	display: block;
	text-align: center;
	width: 40px;
	height: 100%;
	line-height: 45px;
	position: absolute;
	top: 0;
	left: 0;
	color: #FFFFFF;
	font-size: 30px;
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: left;  /* 子要素をflexboxにより中央に配置する */
}

#c5 dl dd{
	background: #ECECEC;
	padding: 10px;
	padding-left: 60px;
	position: relative;
	display: none;
}
#c5 dl dd.ac{
	display: block;
}

#c5 dl dd:before{
	content: "A";
	background: #828282;
	display: block;
	text-align: center;
	width: 40px;
	height: 100%;
	line-height: 45px;
	position: absolute;
	top: 0;
	left: 0;
	color: #FFFFFF;
	font-size: 30px;
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: left;  /* 子要素をflexboxにより中央に配置する */
}
#c5 p.bt a{
	background: none;
	border: 1px solid #FFFFFF;
	display: inline-block;
	padding: 20px 150px;
	font-size: 18px;	
	text-align: center;
}

#c5 p.bt {
	text-align: center;
	margin-top: 100px;
}
footer{
	background: #000000;
	border-top: 1px solid #707070;
	padding: 100px 0;
}
footer nav ul li{
	display: inline-block;
}
footer nav ul li a{
	color: #FFFFFF;
	margin-right: 50px;
}
footer nav ul{
	margin-top: 40px;
	margin-bottom: 40px;
}
div.foot_foot{
	color: #828282;
	padding-top: 20px;
	border-top: 1px solid #707070;
	position: relative;
}
div.foot_foot ul{
	position: absolute;
	top: 20px;
	right: 0;
	text-align: right;
}
div.foot_foot ul li{
	display: inline-block;
	margin-left: 20px;
}
p.bt a:hover{
		background: linear-gradient(45deg,#915cb8 0%, #50a0d1 100%)!important;
		color: #FFFFFF!important;
		border-color: #915cb8!important;
}
p.bt.rec a:hover{
		background: linear-gradient(45deg,#00CDFF 0%, #0093FF 100%)!important;
		color: #FFFFFF!important;
		border-color: #0093FF!important;
}
#c2 p.bt a:hover{
		background: #FFFFFF!important;
		color: #915cb8!important;
		border-color: #FFFFFF!important;
}




#sub header{
	position: relative;
	top: 0;
	left: 0;
	background: #000000;
	height: 60px;
}
header p.logo{
	position: relative;
	z-index: 1000;
}
header p.logo a{
	display: block;
	padding-top: 15px;
}
#sub h1{
	position: relative;
	top: 0;
	left: 0;
	font-size: 30px;
	border-bottom: 1px solid #FFFFFF;
	padding-bottom: 20px;
	color: #FFFFFF;
	z-index: 1;
}
#ptitle{
	background: #000000;	
	padding-top: 60px;
}
#feature{
	background: #000000;
	color: #FFFFFF;
	padding: 100px 0;
}
#feature h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#feature h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#00CDFF 0%, #0093FF 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#feature .col50{
	width: 55%;
	margin-bottom: 50px;
}
#feature .feature{
	padding: 35px 20px;
	background: #2B2A2A;
	display: flex;
	margin-bottom: 30px;
}
#feature .feature h3{
	font-size: 30px;
	margin-bottom: 20px;
}
#feature .feature p{
	color: #828282;
	padding-right: 20px;
}
#feature .feature .left{
	width: calc(100% - 360px);
}

#feature .feature p.right{
	width: 360px;
	padding-right: 0;
}
#feature p.bt a{
	background: none;
	border: 1px solid #FFFFFF;
	display: inline-block;
	padding: 20px 150px;
	font-size: 18px;	
	text-align: center;
}

#feature p.bt {
	text-align: center;
	margin-top: 150px;
}

#feature.case{
	padding-top: 100px;
}
#feature.case .feature p{
	padding-right: 0px;
}
#feature.case .feature p.right{
	width: 360px;
	padding-right: 20px;
}




#plan{
	background: #000000;
	padding: 100px 0;
	color: #FFFFFF;
}
#plan h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#plan h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#00CDFF 0%, #0093FF 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#plan table{
	width: 100%;
	margin-top: 100px;
	table-layout: fixed;
}
#plan table th,#plan table td{
	padding: 20px 0;
	color: #FFFFFF;
	text-align: left;
	border: 1px solid #828282;
	font-weight: normal;
}
#plan table td.na{
	color: #3A3A3A;
}
#plan table th{
	border-left: none;
	font-size: 18px;
	position: relative;
}
#plan table td{
	text-align: center;
	font-size: 22px;
}
#plan table tr td:last-child{
	border-right: none;
}
#plan table tr:first-of-type th{
	border: none;
	text-align: center; 
}
#plan table tr:first-of-type th:after{
	display: none;
}
/*プラン項目横の?マーク
#plan table tr th:after{
	content: "?";
	color: #3A3A3A;
	display: block;
	position: absolute;
	top: 25px;
	right: 20px;
	font-size: 24px;
}
*/
#plan table tr:first-of-type th:nth-child(2){
	border-radius: 10px 0 0 0;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%)!important;
}
#plan table tr:first-of-type th:nth-child(3){
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%)!important;
}
#plan table tr:first-of-type th:nth-child(4){
	border-radius: 0 10px  0 0;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%)!important;
}


#plan p.bt a{
	background: none;
	border: 1px solid #FFFFFF;
	display: inline-block;
	padding: 20px 150px;
	font-size: 18px;	
	text-align: center;
}

#plan p.bt {
	text-align: center;
	margin-top: 150px;
}


#sub #c5 h2{
	text-align: left;
}
#sub #c5 .qtb{
	margin-top: 100px;
	width: calc(100% - 400px);
}
#sub #c5 .qtb:first-of-type{
	margin-top: 0;
}
#sub #c5 .qtb:nth-of-type(3n+1){
}
#sub #c5 .qtb:nth-of-type(3n+2){
	padding-left: 200px;
}
#sub #c5 .qtb:nth-of-type(3n){
	padding-left: 400px;
}


#company{
	padding: 100px 0;
	background: #000000;
	color: #FFFFFF;
}
#company h2{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #50a0d1 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#company h2.rec{
	font-size: 40px;
	color: #915CB8;
	background: linear-gradient(90deg,#915cb8 0%, #7373b2 100%);
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-bottom: 30px;
}
#company .cap{
	background: url(../images/bg01.jpg) center center no-repeat;
	padding: 80px 140px;
	background-size: cover;
	text-align: center;
	margin-bottom: 100px;
}
#company .cap h3{
	font-size: 40px;
	margin-bottom: 35px;
}
#company table{
	width: 100%;
}
#company table th{
	background: #2B2A2A;
	border: 1px solid #828282;
	border-left: none;
	padding: 20px;
	text-align: left;
	font-size: 18px;
	width: 30%;
}
#company table td{
	border: 1px solid #828282;
	border-right: none;
	padding: 20px;
	text-align: left;
	font-size: 18px;
}

#terms{
	padding: 100px 0;
	background: #000000;
	color: #FFFFFF;
}
#terms h2{
	margin-top: 80px;
	margin-bottom: 10px;
}
#terms h2:first-of-type{
	margin-top: 0;
}
#terms p{
	color: #828282;
	font-size: 16px;
}
.foot_foot ul li a{
	font-size: 0.8em;
}
p#copyright{
	font-size: 0.8em;
}
.nc2024 h2{
	font-size: 40px;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}
.nc2024 ul li{
	color: #FFFFFF;
	font-size: 22px;
	margin: 20px 0;
	padding-left: 50px;
	background: url(../images/nc2024_ic01.svg) center left / 30px auto no-repeat;
}

.mainvisualv2.mv2:after {
        opacity: 0.9;
    }
.mainvisualv2.mv2:before {
	display: none;
    }