/*--------------------------------------------------フロント画面--------------------------------------------------*/
/*----------全体の書式設定----------*/
html,
body {
/*	font-size: calc(80% + 0.3vw);*/
	font-family: Arial, "メイリオ", sans-serif;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	text-align: center;
	background: #fff;
	position: relative;
	overflow: hidden;
	margin:0;
	padding:0;
	color:#fff;
	-webkit-text-size-adjust: 100%;
}

/*----------------横スクロールバーの装飾----------------*/
#st-container{			/*横スクロールバーがあると右に隠しているメニューが最初から表示されてしまうのでバーを非表示とする。*/
	/*overflow-x:scroll;*/
}
*/
#st-container::-webkit-scrollbar{
  height: 7px;
}

#st-container::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#st-container::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

/*----------背景画像スライダー----------*/
.slider{
/*	border:1px solid;*/
	width:100%;
	height:100%;
	display:block;
}

img{
	width:100%;
	height:100%;
	position:relative;
	margin:0;
	padding:0;

  }

.slider ul{
	margin:0;
	padding:0;
	list-style:none;

}
.slider ul li{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	animation-iteration-count:infinite;
	animation-duration:58s;
	object-fit:cover;
}


.slider ul li:nth-child(1){
	animation-name:slider;
	animation-delay:-3s;
	opacity:0;
}
.slider ul li:nth-child(2){
	animation-name:slider;
	animation-delay:14s;
	opacity:0;
}
.slider ul li:nth-child(3){
	animation-name:slider;
	animation-delay:29s;
	opacity:0;
}

.slider ul li:nth-child(4){
	animation-name:slider;
	animation-delay:44s;
	opacity:0;
}

@keyframes slider{
	0%{opacity:0;}
	20.83%{opacity:1;}
	33.33%{opacity:1;}
	45.83%{opacity:0;}
	100%{opacity:0;}	
}

h2{
	width:100%;
	background-color:rgba(0,0,0,.5);
	position:absolute;
	bottom:3%;
	left:0;
	padding:auto;
	display: table-cell;
	-ms-flex-pack: center;
	    justify-content: center;
	-ms-flex-align: center;
	    -ms-grid-row-align: center;
	    align-items: center;
}

.title0{
	width:100%;
	margin:0 auto;
	position:absolute;
	top:40%;
	left:0;
	padding:auto;
	font-weight:bold;
}

.titleUp{
	margin:0 auto;
	font-size:36px;
	text-align:center;
	color:rgba(83,227,166,.8);
	color:#fff;
	text-shadow: .5px .5px 0 #777;
}

.titleEmphasis{
	color:#FF4F02;
	opacity:.8;
	text-shadow:none;
}

.titleDown{
	font-size:16px;
	text-align:center;
	color:#fff;
	color:rgb(255,255,255);
	text-shadow: .5px .5px 0 #777;

}

.self{
	color:#FF4F02;
}

.titleDownflex{
	-ms-flex-pack:center;
	    justify-content:center;
	margin:0 auto;
	display:-ms-flexbox;
	display:flex;
}

.titleDownlineLeft{
	width:150px;
    background: rgb(251,106,85);
    background: linear-gradient(to right, rgb(80,163,162) 0%,rgb(83,227,166) 20%,rgb(142,184,255) 40%,rgb(65,105,225) 60%,rgb(247,106,53) 80%,rgb(255,193,7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb6a55', endColorstr='#6442cd',GradientType=1 );
    height: 3px;
    border: 0;
    margin:auto 10px;

}

.titleDownlineRight{
	width:150px;
    background: rgb(251,106,85);
    background: linear-gradient(to right, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb6a55', endColorstr='#6442cd',GradientType=1 );
    height: 3px;
    border: 0;
    margin:auto 10px;

}

/*title0:before{
    background: rgb(251,106,85);
    background: -moz-linear-gradient(left, rgb(251,106,85) 0%, rgb(254,208,96) 25%, rgb(222,30,113) 50%, rgb(175,53,187) 75%, rgb(100,66,205) 100%);
    background: -webkit-linear-gradient(left, rgb(251,106,85) 0%,rgb(254,208,96) 25%,rgb(222,30,113) 50%,rgb(175,53,187) 75%,rgb(100,66,205) 100%);
    background: linear-gradient(to right, rgb(251,106,85) 0%,rgb(254,208,96) 25%,rgb(222,30,113) 50%,rgb(175,53,187) 75%,rgb(100,66,205) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb6a55', endColorstr='#6442cd',GradientType=1 );
    height: 30px;
    border: 0;
    	z-index:10000;
}
*/

h2.title1{
	position:absolute;
	top:0;
	left:0;
	font-size:24px;
	text-align:center;
	margin:0 auto;
	padding:15px;
	height:130px;
	background:none;
	text-shadow:1px 1px 0px rgba(100,100,100);

	
}

.titleback{
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:30%;
    background:-webkit-linear-gradient(to top left, rgba(255,255,255,0) 50%, #000 50.5%) no-repeat top left/100% 100%;
    background:-ms-linear-gradient(to top left, rgba(255,255,255,0) 50%, #000 50.5%) no-repeat top left/100% 100%;
    background:linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(0,0,0,.5) 50.5%) no-repeat top left/100% 100%
}

.titlecenter{
	width:15%;
	margin:0 0 0 3%;
	display:block;
	position:relative;
	left:0;
}

.language{
	width:40px;
	height:auto;
	position:relative;
	display:flex;
}

.check{
	display:block;
	width:40px;
	height:38px;
}

.icontext{
	margin:5px -5px auto 10px;
	width:auto;
	white-space: nowrap;
}

.icontextpre{
	margin:5px -5px auto 10px;
	width:auto;
	color:rgb(200,200,200);
	white-space: nowrap;
}

.iconsweat{
	width:25px;
}

.title1{
	position:absolute;
	top:70%;
/*	font-size: calc(50% + .8em);*/
	text-align:center;
	margin-bottom:50px;
}

.title2{
/*	font-size: calc(70% + 1em);*/
	vertical-align:middle;
	text-align:center;
	padding:0 20px;
}

.title3{
/*	font-size: calc(70% + 1em);*/
	text-align:center;
	padding:0 20px;
}

.title4{
/*	font-size: calc(70% + 1em);*/
	text-align:center;
	padding:0 20px;
}

.title5{
/*	font-size: calc(70% + 1em);*/
	text-align:center;
	padding:0 20px;
}







h2 icon{
	width:100%;
	background-color:rgba(0,0,0,.5);
	position:absolute;
	bottom:40%;
	left:0;
	padding:auto;
	display: table-cell;
	-ms-flex-pack: center;
	    justify-content: center;
	-ms-flex-align: center;
	    -ms-grid-row-align: center;
	    align-items: center;

}


.icon-stack{
	border:1px solid;
}


nav,section{
	display:block;
}


button{
	display:-ms-flexbox;
	display:flex;
	color:#fff;
	background-color: transparent;
	border:none;
	cursor: pointer;
	outline: none;
	appearance: none;
/*	background-color:#a1c4fd;*/
	border-radius:30px 0 0 30px;
	position:relative;
	top:0;
	right:0;
	
}

.column{
	width:100%;
	text-align:right;
	position:absolute;
	right:0;

}

.column-left{
	width:100%;
	text-align:right;
	position:absolute;
	left:0;

}

/*-------------無料会員登録のメニューボタン-------------*/
.buttonLesson3{
	margin:10px 0 10px auto;
	height:55px;
	font-size:20px;
	position:relative;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	line-height:50px;
}

.reflection3{
	padding:0 0 0 30px;
	font-size:20px;
	height:55px;
	width:10em;
	position:absolute;
	text-align:left;
	background: #f76a35;
	background:-webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background:-ms-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	z-index:999;
	cursor:pointer;
	margin-left:auto;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	align-items:center;
	
}

.hover .reflection3:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:10px;
	position:relative;
	right:0;
	text-align:right;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

/*-------------ログインのメニューボタン-------------*/
.buttonLesson4{
	margin:10px 0 10px auto;
	height:55px;
	font-size:20px;
	position:relative;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	line-height:50px;
}

.reflection4{
	padding:0 0 0 30px;
	font-size:20px;
	height:55px;
	width:10em;
	position:absolute;
	text-align:left;
	background:-webkit-linear-gradient(top left, #4169E1 0%, #8EB8FF 100%);
	background:-ms-linear-gradient(top left, #4169E1 0%, #8EB8FF 100%);
	z-index:999;
	cursor:pointer;
	margin-left:auto;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	align-items:center;
	
}

.hover .reflection4:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:10px;
	position:relative;
	right:0;
	text-align:right;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

/*-------------レッスンのメニューボタン-------------*/
.buttonLesson5{
	margin:10px 0 10px auto;
	height:55px;
	font-size:20px;
	position:relative;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	line-height:50px;
}

.reflection5{
	padding:0 0 0 30px;
	font-size:20px;
	height:55px;
	width:10em;
	position:absolute;
	text-align:left;
	background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background:-ms-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	z-index:999;
	cursor:pointer;
	margin-left:auto;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	align-items:center;
	
}

.hover .reflection5:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:10px;
	position:relative;
	right:0;
	text-align:right;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}


/*-------------Let's programmingのメニューボタン-------------*/
#covering6{
	border-radius:0 30px 30px 0;
	display:-ms-flexbox;
	display:flex;
	position:absolute;
	left:0;
	top:150px;
	margin-left:0;
	text-align:right;
}


.buttonLesson6{
	padding:5px 0;
	margin:10px 0 10px auto;
	width:10em;
	font-size:20px;
	background: #CCCCCC;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); 
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.buttonLesson6:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:6px;
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

/*.reflection6{
	height:100%;
	width:10em;
	position:absolute;
	top:0;
	z-index:999;
	opacity:.5;
	cursor:pointer;
	margin-left:auto;
}

.reflection6:hover:before{
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	border-radius:30px 0 0 30px;
	width:200%;
	margin-left:auto;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	z-index:999;

}

.reflection6:hover:after{
	height:500px;
	content:"";
	position:absolute;
	top:0;
	left:400px;
	width:420px;

	animation: Change6 .5s;
	-webkit-animation: change6 .5s;
	background-image:url("/1_front/img/free5.png") ;
	background-size:100%;
	background-repeat : no-repeat;
		margin-left:auto;
} 
 
@keyframes change6{
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("/1_front/img/free5.png") ;
		opacity:1;
		}
}

@-webkit-keyframes change6{
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("/1_front/img/free5.png") ;
		opacity:1;
		}
}
*/

/*-------------学習対象者のメニューボタン-------------*/
#covering7{
	border-radius:0 30px 30px 0;
	display:-ms-flexbox;
	display:flex;
	position:absolute;
	left:0;
	top:130px;
	margin-left:0;
	text-align:left;
}


.buttonLesson7{
	padding:0;
	margin:10px 0 10px auto;
	width:10em;
	height:55px;
	font-size:20px;
	background: #CCCCCC;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	background:-ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	line-height:50px;
}

.buttonLesson7:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:13px;
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

.reflection7{
	height:100%;
	width:10em;
	position:absolute;
	top:0;
	z-index:999;
	opacity:.5;
	cursor:pointer;
	margin-left:auto;
}

.reflection7:hover:before{
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	border-radius:30px 0 0 30px;
	width:200%;
	margin-left:auto;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	z-index:999;

}

.reflection7:hover:after{
	height:500px;
	content:"";
	position:absolute;
	top:0;
	left:400px;
	width:420px;

	animation: Change7 .5s;
	-webkit-animation: change7 .5s;
	background-image:url("/1_front/img/free5.png") ;
	background-size:100%;
	background-repeat : no-repeat;
		margin-left:auto;
} 
 
@keyframes change7{
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("/1_front/img/free5.png") ;
		opacity:1;
		}
}

/*-------------サイトの特徴のメニューボタン-------------*/
#covering8{
	border-radius:0 30px 30px 0;
	display:-ms-flexbox;
	display:flex;
	position:absolute;
	left:0;
	top:65px;
	margin-left:0;
	text-align:right;
}


.buttonLesson8{
	padding:0;
	margin:10px 0 10px auto;
	width:10em;
	height:55px;
	font-size:20px;
	background: #CCCCCC;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); 
	background:-ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); 
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	line-height:50px;
}

.buttonLesson8:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:10px;
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

.reflection8{
	height:100%;
	width:10em;
	position:absolute;
	top:0;
	z-index:999;
	opacity:.5;
	cursor:pointer;
	margin-left:auto;
}

.reflection8:hover:before{
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	border-radius:30px 0 0 30px;
	width:200%;
	margin-left:auto;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	z-index:999;

}

.reflection8:hover:after{
	height:500px;
	content:"";
	position:absolute;
	top:0;
	left:400px;
	width:420px;

	animation: Change8 .5s;
	-webkit-animation: change8 .5s;
	background-image:url("/1_front/img/free5.png") ;
	background-size:100%;
	background-repeat : no-repeat;
		margin-left:auto;
} 
 
@keyframes change8{
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("/1_front/img/free5.png") ;
		opacity:1;
		}
}

/*-------------サイトについてのメニューボタン-------------*/
#covering9{
	border-radius:0 30px 30px 0;
	display:-ms-flexbox;
	display:flex;
	position:absolute;
	left:0;
	top:0;
	margin-left:0;
	text-align:right;
}


.buttonLesson9{
	padding:0;
	margin:10px 0 10px auto;
	width:10em;
	height:55px;
	font-size:20px;
	background: #CCCCCC;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); 
	background:-ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%); 
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	line-height:50px;
}

.buttonLesson9:hover{
	margin-left:auto;
	width:15em;
	letter-spacing:10px;
	position:relative;
	left:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

.reflection9{
	height:100%;
	width:10em;
	position:absolute;
	top:0;
	z-index:999;
	opacity:.5;
	cursor:pointer;
	margin-left:auto;

}

.reflection9:hover:before{
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	border-radius:30px 0 0 30px;
	width:200%;
	margin-left:auto;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	z-index:999;

}

.reflection9:hover:after{
	height:500px;
	content:"";
	position:absolute;
	top:0;
	left:400px;
	width:420px;
	animation: Change9 .5s;
	-webkit-animation: change9 .5s;
	background-image:url("/1_front/img/free5.png") ;
	background-size:100%;
	background-repeat : no-repeat;
		margin-left:auto;
} 
 
@keyframes change9{
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("/1_front/img/free5.png") ;
		opacity:1;
		}
}

/*-------------サイト説明のメニューボタン-------------*/
/*.buttonLesson5{
	margin:3% 0;
	width:10em;
	font-size:20px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	text-align:right;
	background-color:#a1c4fd;

}

.buttonLesson5:hover{
	width:20em;
	font-size:20px;
	margin-left:0px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	letter-spacing:28px;

}

.reflection5{
	height:100%;
	width:10em;
	position:absolute;
	top:0;
	z-index:9999;
	opacity:1;
	cursor:pointer;

}

.reflection5:hover:before{
	height:100%;
	content:"";
	position:absolute;
	top:100px;;
	left:0;
	z-index:9999;
	border-radius:30px 0 0 30px;
	width:20em;
	transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;

}

.reflection5:hover:after{
	height:500px;
	content:"";
	position:absolute;
	top:0;
	left:400px;
	width:420px;
	animation: Change5 .5s;
	-webkit-animation: change5 .5s;
	background-image:url("../../image/free5.png") ;
	background-size:100%;
	background-repeat : no-repeat;
} 
 
@keyframes change5 {
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("../../image/free5.png") ;
		opacity:1;
		}
}

@-webkit-keyframes change5 {
	0%{opacity:0;}
	25%{opacity:.25;}
	50%{opacity:.5;}
	100%{background-image:url("../../image/free5.png") ;
		opacity:1;
		}
}
*/

/*.buttonLesson5{
	margin:3% 0;
	width:10em;
	font-size:20px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	text-align:right;
	background-color:#33cc66;

}

.buttonLesson5:hover{
	width:20em;
	font-size:20px;
	margin-left:0px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	letter-spacing:20px;

}
*/

/*ボタンの装飾*/
input,select,textarea{
	font-family:inherit;
	font-size:100%;
	margin:0;
}

/*ボタンの装飾*/
html input[type=button], input[type=reset], input[type=submit]{
	-webkit-appearance:button;
	cursor:pointer;
}

input[type=checkbox], input[type=radio]{
	box-sizing:border-box;
	padding:0;
}

input[type=search]{
	-webkit-appearance:textfield;
	box-sizing:content-box;
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration{
	-webkit-appearance:none;
}




*,
*:after,
*::before {
	box-sizing: border-box;
}

.st-container,
.st-pusher,
.st-content {
	height: 100%;

}

.st-content {
	overflow-y: scroll;
	background:grey;
}

.st-content,
.st-content-inner {
	position: relative;
	z-index:1001;
}

/*イメージ画像全体の位置をここで調整*/
.st-container {
	position: relative;
	overflow: hidden;
	height: 100%;
}

/*プッシュするための動きに必須（メニュー2～4に影響あり）*/
.st-pusher {
	position: relative;
	left: 0;
	z-index: 99;
	transition: transform 0.5s;
	
}

/*モーダル風にするための項目*/
.st-pusher::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 0;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	
}

/*モーダル風にするための項目*/
.st-menu-open .st-pusher::after {
	width: 100%;

	opacity: 1;
	transition: opacity 0.5s;

}

/*動きに影響あり。必須。*/
.st-menu {
	position: absolute;
	top: 0;
	right: 0;					/*leftをrightに変更*/
	z-index: 100;
	visibility: hidden;
	height: 100%;
/*	background:#a1c4fd;*/
	transition: all 0.5s;

}

.howToflex,
.targetflex,
.featuresflex,
.aboutflex{
	display:-ms-flexbox;
	display:flex;
	position:absolute;
	top:0;
}

/*----------------学習の進め方----------------------*/
#menu-6::-webkit-scrollbar{
  width: 7px;
}

#menu-6::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#menu-6::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}

.st-effect-6.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	transform: translate3d(500px, 0, 0);				/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	
}

.st-effect-6.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(-100%, 0, 0);					/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-6.st-menu-open .st-effect-6.st-menu {
	visibility: visible;
	transition: transform 0.5s;
}

.st-effect-6.st-menu::after {
	display: none;
}

#menu-6{
	position: absolute;
	top: 0;
	left: 0;					/*rightをleftに変更*/
	z-index: 100;
	width: 500px;				/*サイドメニューの幅を調整①*/
	background:#a1c4fd;
	transition: all 0.5s;
	overflow-y: scroll;
	background-image: linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%);
	background-image: -webkit-linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%); 
	background-image: -ms-linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%); 
	background:#fff;
	
}

.howTo{
	color:#fff;
	font-size:30px;
	position:relative;
	width:50px;
	text-align:left;
	background:#ffc107;
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
}

.howToheading{
	height:130px;
	width:440px;
	
}

.major1{
	color: #444;
	font-size: 24px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	    align-items: center;
}

.major1:before,
.major1:after{
	content: "";
	-ms-flex-positive: 1;
	    flex-grow: 1;
	height: 2px;
	display: block;
}

.major1:before {
	margin-right: .4em;
	background: linear-gradient(-90deg, #888, transparent);
	background: -webkit-linear-gradient(-90deg, #888, transparent);
	background: -ms-linear-gradient(-90deg, #888, transparent);
}

.major1:after {
	margin-left: .4em;
	background: linear-gradient(90deg, #888, transparent);
	background: -webkit-linear-gradient(90deg, #888, transparent);
	background: -ms-linear-gradient(90deg, #888, transparent);
}

/*-----------------学習対象者----------------------*/
#menu-7::-webkit-scrollbar{
	width: 7px;
}

#menu-7::-webkit-scrollbar-track{
	background: #fff;
	border: none;
	border-radius: 10px;
	box-shadow: inset 0 0 2px #777; 
}

#menu-7::-webkit-scrollbar-thumb{
	background: #aaa;
	border-radius: 10px;
	box-shadow: none;
}

.st-effect-7.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	transform: translate3d(500px, 0, 0);				/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/

}

.st-effect-7.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(-100%, 0, 0);					/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-7.st-menu-open .st-effect-7.st-menu {
	visibility: visible;
	transition: transform 0.5s;
	
}

.st-effect-7.st-menu::after {
	display: none;
}

#menu-7{
	position: absolute;
	top: 0;
	left: 0;					/*rightをleftに変更*/
	z-index: 10000;
	width: 500px;				/*サイドメニューの幅を調整①*/
	height:100%;
	transition: all 0.5s;
	overflow-y: scroll;
/*	background:#78909c;*/
/*	background: -webkit-gradient(linear, left top, right bottom, from(#5EFCE8),  to(#FFC600));
	background: linear-gradient(to right, #2AFADF, #4C83FF);*/
	background: linear-gradient(to right,#333333, #dddddd 80%, #f0f0f0);
	background: -webkit-linear-gradient(to right,#333333, #dddddd 80%, #f0f0f0);
	background: -ms-linear-gradient(to right,#333333, #dddddd 80%, #f0f0f0);
	background:#fff;
}

.targetuser{
	color:#fff;
	font-size:30px;
	position:relative;
	width:50px;
	text-align:left;
	background:#53e3a6;
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	height:100vh;

}

.targetheading{
	height:130px;
	width:440px;
	
}

.major2{
	color: #444;
	font-size: 24px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	    align-items: center;
}

.major2:before,
.major2:after{
	content: "";
	-ms-flex-positive: 1;
	    flex-grow: 1;
	height: 2px;
	display: block;
}

.major2:before {
	margin-right: .4em;
	background: linear-gradient(-90deg, #888, transparent);
	background: -webkit-linear-gradient(-90deg, #888, transparent);
	background: -ms-linear-gradient(-90deg, #888, transparent);

}

.major2:after {
	margin-left: .4em;
	background: linear-gradient(90deg, #888, transparent);
	background: -webkit-linear-gradient(90deg, #888, transparent);
	background: -ms-linear-gradient(90deg, #888, transparent);
}


/*-----当サイトの特徴-----*/
#menu-8::-webkit-scrollbar{
  width: 7px;
}

#menu-8::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#menu-8::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: none;
}

.st-effect-8.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	transform: translate3d(500px, 0, 0);				/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	
}

.st-effect-8.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(-100%, 0, 0);					/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-8.st-menu-open .st-effect-8.st-menu {
	visibility: visible;
	transition: transform 0.5s;
}

.st-effect-8.st-menu::after {
	display: none;
}

#menu-8{
	overflow-y: scroll;
	position: absolute;
	top: 0;
	left: 0;					/*rightをleftに変更*/
	z-index: 10000;
	width: 500px;
	height: 100%;
	transition: all 0.5s;
/*	background-image: -webkit-linear-gradient(top, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%);
	background-image: linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%);*/ 

}

.features{
	color:#fff;
	font-size:30px;
	position:relative;
	width:50px;
	text-align:left;
	background:#4689FF;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	height:100vh;
}

.howToRight,
.featuresRight,
.targetRight,
.aboutRight{
	color:#000;
	background:#fff;
	height:100vh;
}

.featuresheading{
	height:130px;
	width:440px;
	
}

.major3{
	color: #444;
	font-size: 24px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	    align-items: center;
}

.major3:before,
.major3:after {
	content: "";
	-ms-flex-positive: 1;
	    flex-grow: 1;
	height: 2px;
	display: block;
}

.major3:before {
	margin-right: .4em;
	background: linear-gradient(-90deg, #888, transparent);
	background: -webkit-linear-gradient(-90deg, #888, transparent);
	background: -ms-linear-gradient(-90deg, #888, transparent);
}

.major3:after {
	margin-left: .4em;
	background: linear-gradient(90deg, #888, transparent);
	background: -webkit-linear-gradient(90deg, #888, transparent);
	background: -ms-linear-gradient(90deg, #888, transparent);
}

/*-----当サイトについて-----*/
#menu-9::-webkit-scrollbar{
  width: 7px;
}

#menu-9::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#menu-9::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: none;
}

.st-effect-9.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	transform: translate3d(500px, 0, 0);				/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/		/*サイドメニューの幅を調整②*/
	
}

.st-effect-9.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(-100%, 0, 0);					/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-9.st-menu-open .st-effect-9.st-menu {
	visibility: visible;
	transition: transform 0.5s;
}

.st-effect-9.st-menu::after {
	display: none;
}

#menu-9{
	overflow-y: scroll;
	position: absolute;
	top: 0;
	left: 0;					/*rightをleftに変更*/
	z-index: 10000;
	width: 500px;
	transition: all 0.5s;

}

.about{
	color:#fff;
	font-size:30px;
	position:relative;
	width:50px;
	height:100%;
	text-align:left;
	background:#f76a35;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	height:100vh;
}

.aboutheading{
	height:130px;
	width:440px;
	
}

.major4{
	color: #444;
	font-size: 24px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	    align-items: center;
}

.major4:before,
.major4:after {
	content: "";
	-ms-flex-positive: 1;
	    flex-grow: 1;
	height: 2px;
	display: block;
}

.major4:before {
	margin-right: .4em;
	background: linear-gradient(-90deg, #888, transparent);
	background: -webkit-linear-gradient(-90deg, #888, transparent);
	background: -ms-linear-gradient(-90deg, #888, transparent);

}

.major4:after {
	margin-left: .4em;
	background: linear-gradient(90deg, #888, transparent);
	background: -webkit-linear-gradient(90deg, #888, transparent);
	background: -ms-linear-gradient(90deg, #888, transparent);
}

/*---------ここまで---------*/

/*----------新規会員登録----------*/
#menu-3{
	width:400px;
	background:#FF6347;
	overflow-y: scroll;

}

.st-effect-3.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/
	transform: translate3d(-400px, 0, 0);						/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/
	
}

.st-effect-3.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(100%, 0, 0);						/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-3.st-menu-open .st-effect-3.st-menu {
	visibility: visible;
	transition: transform 0.5s;
}

.st-effect-3.st-menu::after {
	display: none;
}

#menu-3::-webkit-scrollbar{
  width: 7px;
}

#menu-3::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#menu-3::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}

#signUp1{
	height:auto;
	width:100%;
	margin:3% 0;

}

.formtitle1{
	height:50px;
	margin-bottom:0;
	border-radius:3px 3px 0 0;
	color:#000;
	width:100%;
	padding:5px 0 3px 0;
	text-align:center;
/*	background:linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background:-webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);*/
	background:#fff;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
}

/*.formtitle1:after{
	content:"";
	display:block;
	height:2px;
	background:linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background:-webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	position:relative;
	top:0;
	border-radius:0 0 2px 2px;
}
*/

.line{
	margin:0;
	border: 0; 
	height: 2px;
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

.formtitle2{
	margin-top:15px;
	height:50px;
	color:#000;
	width:100%;
	padding:5px 0 3px 0;
	text-align:center;
/*	background:linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background:-webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);*/
	background:#fff;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;

}

#signUp2{
	height:250px;
	width:370px;
}

/*#signUp2:after{
	content:"";
	display:block;
	height:2px;
	background:linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background:-webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	position:relative;
	top:90px;
	border-radius:0 0 2px 2px;
}
*/
.setsumei{
	border-radius:3px 3px 0 0;
	color:#000;
	width:100%;
	padding:5px 0 3px 0;
	text-align:center;
/*	background:linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background:-webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);*/
	background:#fff;
}

.setsumei2{
	font-size:14px;
	margin:0;
}

/*------------ログイン------------*/
#menu-4{
	width:400px;
	background:linear-gradient(top left, #4169E1 0%, #8EB8FF 100%);
	background:-webkit-linear-gradient(top left, #4169E1 0%, #8EB8FF 100%);
	background:-ms-linear-gradient(top left, #4169E1 0%, #8EB8FF 100%);
	overflow-y: scroll;
}

.st-effect-4.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/
	transform: translate3d(-400px, 0, 0);						/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/
	
}

.st-effect-4.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(100%, 0, 0);					/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-4.st-menu-open .st-effect-4.st-menu {
	visibility: visible;
	transition: transform 0.5s;
}

.st-effect-4.st-menu::after {
	display: none;
}

#menu-4::-webkit-scrollbar{
  width: 7px;
}

#menu-4::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#menu-4::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}

#loginform1{
	height:auto;
	width:100%;
	margin:3% 0;
}

#loginform2{
	height:300px;
	width:370px;
}

/*-----------------レッスン一覧----------------------*/
#menu-5{
	background: #50a3a2;
	background: linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background: -ms-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	overflow-y: scroll;
}

.st-effect-5.st-menu-open .st-pusher {		/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/
	transform: translate3d(-300px, 0, 0);						/*←「-300」を「300」に変更することで右端/左端からスライドを制御*/
	
}

.st-effect-5.st-menu {			/*「-100」を「100%」に変更することで右端/左端へ移動*/
	transform: translate3d(100%, 0, 0);					/*「-100」を「100%」に変更することで右端/左端へ移動*/
}

.st-effect-5.st-menu-open .st-effect-5.st-menu {
	visibility: visible;
	transition: transform 0.5s;
}

.st-effect-5.st-menu::after {
	display: none;
}

#menu-5::-webkit-scrollbar{
  width: 7px;
}

#menu-5::-webkit-scrollbar-track{
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 2px #777; 
}

#menu-5::-webkit-scrollbar-thumb{
  background: #aaa;
  border-radius: 10px;
  box-shadow: none;
}


#menu-5 .sign-up:nth-child(3){
	height:610px;
}

#menu-5 ul{
	font-size:14px;
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
	padding-left: 300px;
	
}

#lessonform1{
	height:150px;

}

#lessonform2{
	height:600px;

}

/*-----------------レッスン準備-----------------*/
.lessonJunbi{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #50a3a2;

}

.listJunbi{
	position:relative;
	top:0px;
	left:-1px;
	background:#50a3a2;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #50a3a2;
}

.lessonJunbi:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #50a3a2;
	color:#fff;
	background:#50a3a2;
}

/*-----------------Python-----------------*/
.lessonPython{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #f8c63d;

}

.listPython{
	position:relative;
	top:0px;
	left:-1px;
	background:#79a6fa;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #79a6fa;
}

.lessonPython:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #f8c63d;
	color:#fff;
	background:#f8c63d;
}

/*-----------------HTMLCSS-----------------*/
.lessonHTMLCSS{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #176eac;

}

.listHTMLCSS{
	position:relative;
	top:0px;
	left:-1px;
	background:#e34c24;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #e34c24;
}

.lessonHTMLCSS:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #176eac;
	color:#fff;
	background:#176eac;
}


/*-----------------Javascript-----------------*/
.lessonJavascript{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #e4a432;

}

.listJavascript{
	position:relative;
	top:0px;
	left:-1px;
	background:#e6c61d;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #e6c61d;
}

.lessonJavascript:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #e4a432;
	color:#fff;
	background:#e4a432;
}


/*-----------------Ruby-----------------*/
.lessonRuby{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #b3212e;

}

.listRuby{
	position:relative;
	top:0px;
	left:-1px;
	background:#ee4d52;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #ee4d52;
}

.lessonRuby:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #b3212e;
	color:#fff;
	background:#b3212e;
}

/*-----------------Swift-----------------*/
.lessonSwift{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #fc9f3c;

}

.listSwift{
	position:relative;
	top:0px;
	left:-1px;
	background:#fe472b;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #fe472b;
}

.lessonSwift:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #fc9f3c;
	color:#fff;
	background:#fc9f3c;
}


/*-----------------Excel-----------------*/
.lessonExcel{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #1f6f43;

}

.listExcel{
	position:relative;
	top:0px;
	left:-1px;
	background:#1f6f43;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #1f6f43;
}

.lessonExcel:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #1f6f43;
	color:#fff;
	background:#1f6f43;
}


/*-----------------Word-----------------*/
.lessonWord{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 1px 10px;
	transition: .2s;
	border:dashed 1px #2b579a;

}

.listWord{
	position:relative;
	top:0px;
	left:-1px;
	background:#2b579a;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #2b579a;
}

.lessonWord:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #2b579a;
	color:#fff;
	background:#2b579a;
}


/*-----------------Access-----------------*/
.lessonAccess{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #a4373a;

}

.listAccess{
	position:relative;
	top:0px;
	left:-1px;
	background:#a4373a;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #a4373a;
}

.lessonAccess:hover{
	letter-spacing:5px;
	width:93%;
	border:1px solid #a4373a;
	color:#fff;
	background:#a4373a;
}


/*-----------------PowerPoint-----------------*/
.lessonPowerPoint{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:left;
	    justify-content:left;
	-ms-flex-align:center;
	    align-items:center;
	color:#000;
	height:35px;
	width:93%;
	margin:0 auto 5px 10px;
	transition: .2s;
	border:dashed 1px #d44927;

}

.listPowerPoint{
	position:relative;
	top:0px;
	left:-1px;
	background:#d44927;
	content:"";
	display:-ms-flexbox;
	display:flex;
	transition:.2s;
	-webkit-transition:.2s;
	width:15px;
	height:35px;
	border:solid 1px #d44927;
}

.lessonPowerPoint:hover{
	letter-spacing:5px;
	width: 93%;
	border:1px solid #d44927;
	color:#fff;
	background:#d44927;
}

.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
	padding-right: 500px;
	
}


.sign-up{
  position: relative;
  top:0;
  margin: 0;
  width: 280px;
  padding: 0;
  margin:3%;
  height:580px;
  background: white;
  border-bottom: 1px solid #c4c4c4;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.menuTop5sUp,
.menuTop5sMiddle,
.menuTop5sDown{
	font-size:14px;
	position: relative;
	top:0;
	margin: 0;
	width: 95%;
	padding:10px;
	margin:3%;
	height:auto;
	background: white;
	border-bottom: 1px solid #c4c4c4;
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);

}

.line13{
	width:98%;
	margin:0 auto;
}


/*.sign-up:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #c4e17f;
  border-radius: 5px 5px 0 0;
  background-image: -webkit-linear-gradient(left, 
  	#93FFAB,
  	#93FFAB 12.5%,
  	#E4FF8D 12.5%,
  	#E4FF8D 25%,
  	#86F9C5 25%,
  	#86F9C5 37.5%,
  	#8EB8FF 37.5%,
  	#8EB8FF 50%,
  	#8EF1FF 50%,
  	#8EF1FF 62.5%,
  	#C299FF 62.5%,
  	#C299FF 75%,
  	#FF97C2 75%,
  	#FF97C2 87.5%,
  	#FF9872 87.5%,
  	#FF9872);
	  
  background-image: linear-gradient(to right,
  	#93FFAB,
  	#93FFAB 12.5%,
  	#E4FF8D 12.5%,
  	#E4FF8D 25%,
  	#86F9C5 25%,
  	#86F9C5 37.5%,
  	#8EB8FF 37.5%,
  	#8EB8FF 50%,
  	#8EF1FF 50%,
  	#8EF1FF 62.5%,
  	#C299FF 62.5%,
  	#C299FF 75%,
  	#FF97C2 75%,
  	#FF97C2 87.5%,
  	#FF9872 87.5%,
  	#FF9872);
}
*/

input {
  font-family: inherit;
  color:#000;
  box-sizing: border-box;
}

#freeUser,
#freeMail,
#freePass,
#freePass2,
#freeAge,
#freeLive,
#freeJob,
#loginMail,
#loginPass{
	color:#777;
	width: 75%;
	height: 35px;
	margin:15px 0 10px 0;
	padding:0 0 0 15px;
	font-size:14px;
	border: 1px solid #ebebeb;
	border-radius: 4px;
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
	background:#fff;
				
}

#freeUser:focus,
#freeMail:focus,
#freePass:focus,
#freePass2:focus,
#freeAge:focus,
#freeLive:focus,
#freeJob:focus{
	background:#fff;
	border:1px solid #f76a35;
	outline: none;
	width: 80%;
	transition-duration: .25s;
	box-shadow:none;

}

#loginMail:focus,
#loginPass:focus{
	background:#fff;
	border:1px solid #4169E1;
	outline: none;
	width: 80%;
	transition-duration: .25s;
	box-shadow:none;

}

.flex{
	position:relative;
	display:flex;
}

.ftitle{
	position:relative;
	font-size:13px;
	justify-content:left;
	align-items:center;
	display:flex;
	margin:auto 0;
	width:75px;
}

.ftitleRe{
	position:absolute;
	font-size:13px;
	margin:27px 10px 5px;
	left:0;
	
}

.ftitle2{
	position:absolute;
	font-size:13px;
	margin:15px 10px 10px;
	
}

.forgetPass{
	position: relative;
	vertical-align: middle;
	margin:0 auto;
	width: 70%;
	height: 10px;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
	min-width:200px;
	outline:none;
}

.buttonFlex{
	display:-ms-flexbox;
	display:flex;
}

.sign-up-button1{
	position: relative;
	top:0;
	vertical-align: middle;
	margin:15px auto 20px;
	width: 42%;
	height: 45px;
	font-size: 22px;
	color: white;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	background-image:linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
	border:none;
	border-bottom: 2px solid #ff8b5f;
/*	border-radius: 5px;*/
	cursor: pointer;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	    justify-content: center;
	-ms-flex-align: center;
	    align-items: center;
	transition:.2s;
	outline:none;
}

.sign-up-button1:hover{
	background-image:linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
	box-shadow: inset 0 -2px #ff8b5f;
	border-radius:5px;
	transition:.2s;
	opacity:.8;
}

.sign-up-button1:active{
  top: 1px;
  outline: none;
  box-shadow: none;

}

.sign-up-button2{
	position: relative;
	top:0;
	vertical-align: middle;
	margin:20px auto;
	width: 42%;
	height: 45px;
	font-size: 22px;
	color: white;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	background:linear-gradient(top left, #8EB8FF 0%, #4169E1 100%);
	background:-webkit-linear-gradient(top left, #8EB8FF 0%, #4169E1 100%);
	background:-ms-linear-gradient(top left, #8EB8FF 0%, #4169E1 100%);
	border:none;
	border-bottom: 2px solid #8EB8FF;
	cursor: pointer;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	    justify-content: center;
	-ms-flex-align: center;
	    align-items: center;
	transition:.2s;
}

.sign-up-button2:hover{
	background:linear-gradient(top left, #8EB8FF 0%, #4169E1 100%);
	background:-webkit-linear-gradient(top left, #8EB8FF 0%, #4169E1 100%);
	background:-ms-linear-gradient(top left, #8EB8FF 0%, #4169E1 100%);
	box-shadow: inset 0 -2px #4169E1;
	border-radius:5px;
	transition:.2s;
	opacity:.8;


}

.sign-up-button2:active {
  top: 1px;
  outline: none;
  box-shadow: none;
}

.sign-up-button3{
	top:0;
	vertical-align: middle;
	margin:20px auto 20px;
	width: 60%;
	height: 60px;
	font-size: 18px;
	color: white;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	background:linear-gradient(top left, #53e3a6 0%, #50a3a2 100%);
	background:-webkit-linear-gradient(top left, #53e3a6 0%, #50a3a2 100%);
	background:-ms-linear-gradient(top left, #53e3a6 0%, #50a3a2 100%);
	border: 0;
	border-bottom: 2px solid #339f66;
	cursor: pointer;
	box-shadow: inset 0 -2px #339f66;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	    justify-content: center;
	-ms-flex-align: center;
	    align-items: center;
	transition:.2s;
}

.sign-up-button3:hover{
	background:linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background:-webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background:-ms-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	box-shadow: inset 0 -2px #339f66;
	opacity:.8;
	border-radius: 5px;
	transition:.2s;
}

.sign-up-button3:active {
  top: 1px;
  outline: none;
  box-shadow: none;
  border:0;
}


::-webkit-input-placeholder {
  color: #ccc;
  font-weight: 300;
}

#autoLogin{
	font-size:13px;
	margin:0 0 0 10px;
}

ul{
	font-size:.8em;
	text-align:left;
	list-style: none;
	padding-left:0;
}


.line1{
	width:95%;
	margin:10px auto;
}

.line2{
	width:80%;
	margin:5px auto;
	text-align:left;
	padding-left:0;
}



/*サイドメニュークリック時のモーダル*/
#cover{
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index:1000;
	cursor:pointer;
}

#cover.hidden{
	display:none;
}


/*クリックによるモーダルキャンセル*/
.tip{
	position: absolute;
	top:10px;
	display:none;
	z-index: 20000;
	font-size: 13px;
	line-height: normal;
	height: auto;
	padding: 10px;
	border-radius: 3px;
	background: rgba(255,26,111,.7);
	border:double 1px #FF1A6F;
}

/*サイドメニュー内のアコーディオン*/
.sidewrap6,
.sidewrap7,
.sidewrap8,
.sidewrap9{
    width: 440px;

    padding: 10px 10px;
/*    border: 1px solid #000;*/
}

.sidewrap6:before{
	color:#000;
	font-size:30px;
	position:relative;
	width:50px;
	background:#000;
	-ms-writing-mode: tb-rl;
	    writing-mode: vertical-rl;
	height:100% !important;

}

.sidewrap7 h3.sideopen{
	font-size:16px;
	color:#000;
    border-bottom:2px dotted #4689FF;
    cursor: pointer;
    margin:15px 0;
    text-align:left;

}

.sidewrap8 h3.sideopen{
	font-size:16px;
	color:#000;
    border-bottom:2px dotted #53e3a6;
    cursor: pointer;
    margin:15px 0;
    text-align:left;

}

/*h3.sideopen{
	font-size:15px;
	color:#000;
    border-bottom:2px dotted #4689FF;
    cursor: pointer;
    margin: 0;
    text-align:left;
}
*/
.sideopen:after, 
.sideopen.active:after {
    font-size:22px;
    margin-left:0;
    border:1px solid;
}

.sideopen.active::before{
	color:#000;
    content: "▲";
}

.sideopen::before{
	color:#000;
    content: "▼";
    margin-right:3px;

}

.sidetitle{
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: lighter;
}

.toggleOpen{
	font-size:14px;
}



/*-----学習の進め方内のステップ-----*/
/*---共通設定---*/
.num{
	display:-ms-flexbox;
	display:flex;
}

.flexclear{
	display:block;
	width:440px;
	padding-top:10px;
	line-height:30px;
	text-align:left;
	font-size:14px;
}

.page{
	font-size:16px;
	font-weight:bold;
	position: relative;
	padding:5px 5px 5px 10px;
	margin:10px 10px;
	-webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
	background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
	background: -webkit-linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
	background: -ms-linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
	border-radius: 6px;

}

.page::after{
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 1.65507em;
  height: 3.5493em;
  background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
  background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
  background: -ms-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
  border-bottom-left-radius: 6px;
  box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
  -ms-transform: translateY(-1.89424em) rotate(-40deg);
      transform: translateY(-1.89424em) rotate(-40deg);
  -ms-transform-origin: bottom right;
      transform-origin: bottom right;

}

.point{
	font-size:16px;
	font-weight:bold;
	color:blue;
	position:relative;
	padding:20px 0px 20px 10px;
	margin-top:50px;
	border:2px solid #000;
}

.point:after {
  content:"レッスン終了後の姿";
  position:absolute;
  top: -18px;
  left: 10px;
  background:#fff;
  font-size:18px;
  font-weight:bold;
  color:red;
  padding:0 5px;
}

.aboutflexclear1,
.aboutflexclear2,
.aboutflexclear3{
	display:block;
	width:430px;
	padding-top:10px;
	line-height:30px;
	text-align:left;
	font-size:14px;
}

.aboutpage{
	color:red;
	font-size:16px;
	font-weight:bold;
	position: relative;
	padding:5px 5px 5px 10px;
	margin:10px 10px;
	-webkit-background: linear-gradient(-150deg, rgba(0, 0, 0, 0) 1em, #f6f6f6 0%);
	background: linear-gradient(-150deg, rgba(0, 0, 0, 0) 1em, #FFDBC9 0%);
	border-radius: 6px;
	text-align:left;
}

.aboutpage::after{
  position: absolute;
  top: 11.5px;
  right:-0.5px;
  content: '';
  width:1em;
  height:2.3em;
  background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
  border-bottom-left-radius: 6px;
  box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
  -ms-transform: translateY(-1.89424em) rotate(-38deg);
      transform: translateY(-1.89424em) rotate(-38deg);
  -ms-transform-origin: bottom right;
      transform-origin: bottom right;

}

.aboutpoint1{
	font-size:16px;
	font-weight:bold;
	width:95%;
	color:#000;
	position:relative;
	padding:10px 0 10px 10px;
	margin:30px 10px 40px 10px;
	border:2px solid #000;
}

.aboutpoint1:after {
  content:"A. 以下の言語、ツールが学べます";
  position:absolute;
  top: -18px;
  left: 10px;
  background:#fff;
  font-size:18px;
  font-weight:bold;
  color:blue;
  padding:0 5px;
}

.aboutpoint2{
	font-size:16px;
	font-weight:bold;
	width:95%;
	color:#000;
	position:relative;
	padding:10px 0 10px 10px;
	margin:30px 10px 40px 10px;
	border:2px solid #000;
	text-align:left;
}

.aboutpoint2:after {
  content:"A. サイトやアプリを作成しながら学びます";
  position:absolute;
  top: -18px;
  left: 10px;
  background:#fff;
  font-size:18px;
  font-weight:bold;
  color:blue;
  padding:0 5px;
}

.aboutpoint3{
	font-size:16px;
	font-weight:bold;
	width:95%;
	color:#000;
	position:relative;
	padding:10px 0 0 10px;
	margin:30px 10px;
	border:2px solid #000;
	text-align:left;
}

.aboutpoint3:after {
  content:"A. 誰でも学べます";
  position:absolute;
  top: -18px;
  left: 10px;
  background:#fff;
  font-size:18px;
  font-weight:bold;
  color:blue;
  padding:0 5px;
}

/*---個別設定---*/
.step0{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step0:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step0:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"0";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:#ffc107;
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step0:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence0{
	display:-ms-flexbox;
	display:flex;
	height:490px;
}

.sentence0:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}

.step1{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step1:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step1:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"1";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:rgb(255,193,7);
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step1:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence1{
	display:-ms-flexbox;
	display:flex;
	height:500px;
}

.sentence1:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}

.step2{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step2:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step2:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"2";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:rgb(255,193,7);
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step2:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence2{
	display:-ms-flexbox;
	display:flex;
	height:480px;
}

.sentence2:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}

.step3{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step3:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step3:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"3";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:rgb(255,193,7);
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step3:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence3{
	display:-ms-flexbox;
	display:flex;
	height:630px;
}

.sentence3:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}

.step4{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step4:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step4:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"4";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:rgb(255,193,7);
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step4:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence4{
	display:-ms-flexbox;
	display:flex;
	height:560px;
}

.sentence4:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}

.step5{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step5:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step5:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"5";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:rgb(255,193,7);
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step5:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence5{
	display:-ms-flexbox;
	display:flex;
	height:600px;
}

.sentence5:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}


.step6{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid rgb(255,193,7);
	border-right:2px solid rgb(255,193,7);
	border-bottom:2px solid rgb(255,193,7);
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step6:hover{
	background:rgb(255,193,7);
	cursor:pointer;
	color:#fff;


}

.step6:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"6";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:rgb(255,193,7);
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step6:hover:before{
	background:#fff;
	cursor:pointer;
	color:rgb(255,193,7);
	border:1px solid rgb(255,193,7);
}

.sentence6{
	display:-ms-flexbox;
	display:flex;
	height:710px;
}

.sentence6:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}

.step7{
	width:410px;
	height:40px;
	vertical-align: middle;
	text-align:left;
	margin:0;
	border-top:2px solid #888;
	border-right:2px solid #888;
	border-bottom:2px solid #888;
	border-radius:0 45px 45px 0;
	position:relative;
	left:17px;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    -ms-grid-row-align:center;
	    align-items:center;
}

.step7:hover{
	background:#888;
	cursor:pointer;
	color:#fff;


}

.step7:before{
	position:relative;
	top:-2px;
	left:-18px;
	text-align:left;
	color:#fff;
	border-radius:5px;
	width:40px;
	height:40px;
	content:"7";
	margin-right:10px;;
	display: inline-block;
	border-radius: 50%;
	background:#888;
	text-align:center;
	line-height: 40px;
	vertical-align: middle;

}

.step7:hover:before{
	background:#fff;
	cursor:pointer;
	color:#888;
	border:1px solid #888;
}

.sentence7{
	display:-ms-flexbox;
	display:flex;
	height:560px;
}

.sentence7:before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:linear-gradient(to bottom, rgb(255,193,7) 0%,rgb(247,106,53) 20%,rgb(65,105,225) 40%,rgb(142,184,255) 60%,rgb(83,227,166) 80%,rgb(80,163,162) 100%);
	margin:0 20px 0 16px;
	
}


/*-----------------無料会員登録----------------------*/
/*.menuTop3{
	color:#fff;
	display:-ms-flexbox;
	display:flex;
	height:100%;
	width:100%;
	margin:0 auto;
	position:relative;
	top:0;
	left:0;
	background:#50a3a2;
	background:-webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
}
*/
#menuTop3close{
	color:#fff;
	cursor: pointer;
	width: 30px;
	height:30px;
	background:rgba(0,0,0,0.2);
	text-align: center;
	line-height: 20px;
	margin:0 10px 0 0;
	position:absolute;
	right:0;
	top:10px;
	border-radius:180px;
	-webkit-appearance:button-bevel;
	border:none;	
}

#menuTop3close:focus,
#menuTop3close:hover{
	background:rgba(0,0,0,0.5);
	transition:.3s;
}

#menuTop3cover{
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index:10000;
	cursor:pointer;
}

#menuTop3modalout{
    color: #fff;
    background: #fff;
    width: 490px;
    height: 420px;
    border-radius: 4px;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 1s;
    z-index: 20000;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;

}

#menuTop3modalout p{
	line-height: 3;
	margin: 0;
	background:#50a3a2;
	background: -webkit-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);
	background: -ms-linear-gradient(top left, #f76a35 0%,#f76a35 40%, #FFC107 100%);

}

#menuTop3modalout.menuTop3hidden{
/*	transform: translate(0, -500px);*/
	opacity:0;
	transition:.9s;
	z-index:-1;
}

#menuTop3cover.menuTop3hidden{
	display:none;
}

#menuTop3cover.menuTop3hidden{
	display:none;
}

.menuTop3s{
	background:#fff ;
	color:rgb(80,80,80);
	text-align:left;
	overflow-y:scroll;
	height:100%;
	padding:10px 20px;
	-webkit-overflow-scrolling:touch;
	-webkit-transform: translateZ(0px);
}

.menuTop3s:nth-child(4){
	
}

.menuTop3sUp{
	font-size:14px;
	position: relative;
	top:0;
	width: 100%;
	padding:10px;
	margin:10px 0 15px 0;
	height:auto;
	background: white;
	border-bottom: 1px solid #c4c4c4;
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.menuTop3p{
	width:210px;
	height:50px;
	margin:0 auto;
	position:relative;
	top:0;
   	display:-ms-flexbox;
   	display:flex;
   	-ms-flex-pack:center;
   	    justify-content:center;
   	-ms-flex-align:center;
   	    align-items:center;
	cursor:pointer;
	z-index:101;
	content:"fawer";

}

/*-----------------ログイン----------------------*/
.menuTop4{
	color:#fff;
	display:-ms-flexbox;
	display:flex;
	height:100%;
	width:100%;
	margin:0 auto;
	position:relative;
	top:0;
	left:0;
	background:#50a3a2;
	background:-webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
}

#menuTop4close{
	color:#fff;
	cursor: pointer;
	width: 30px;
	height:30px;
	background:rgba(0,0,0,0.2);
	text-align: center;
	line-height: 20px;
	margin:0 10px 0 0;
	position:absolute;
	right:0;
	top:10px;
	border-radius:180px;
	-webkit-appearance:button-bevel;
	border:none;
}

#menuTop4close:focus,
#menuTop4close:hover{
	background:rgba(0,0,0,0.5);
	transition:.3s;
}

#menuTop4cover{
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index:10000;
	cursor:pointer;
}

#menuTop4modalout{
	color:#fff;
	background: #fff;
	width: 490px;
	height:305px;
	border-radius: 4px;
	position:fixed;
	top: 100px;
	left: 0;
	right: 0;
	margin: 0 auto;
	transition:1s;
	z-index:20000;
	transition: all 1s;

}

#menuTop4modalout p{
	line-height: 3;
	margin: 0;
	background:#a1c4fd;
	background:-webkit-linear-gradient(top left, #4169E1 0%, #8EB8FF 100%);
	background:-ms-linear-gradient(top left, #4169E1 0%, #8EB8FF 100%)
}

#menuTop4modalout.menuTop4hidden{
/*	transform: translate(0, -500px);*/
	opacity:0;
	transition:.9s;
	z-index:-1;
}

#menuTop4cover.menuTop4hidden{
	display:none;
}

#menuTop4cover.menuTop4hidden{
	display:none;
}

.menuTop4s{
	background:#fff ;
	color:rgb(80,80,80);
	text-align:left;
	overflow-y:scroll;
	height:100%;
	padding:10px 20px;
	
}

.menuTop4sUp{
	font-size:14px;
	position: relative;
	top:0;
	width: 100%;
	padding:10px;
	margin:10px 0 15px 0;
	height:auto;
	background: white;
	border-bottom: 1px solid #c4c4c4;
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.menuTop4p{
	width:210px;
	height:50px;
	margin:0 auto;
	position:relative;
	top:0;
   	display:-ms-flexbox;
   	display:flex;
   	-ms-flex-pack:center;
   	    justify-content:center;
   	-ms-flex-align:center;
   	    align-items:center;
	cursor:pointer;
	z-index:101;
	content:"fawer";

}


/*-----------------サイトについて----------------------*/
.menuTop5{
	color:#fff;
	display:-ms-flexbox;
	display:flex;
	height:100%;
	width:100%;
	margin:0 auto;
	position:relative;
	top:0;
	left:0;
	background:#50a3a2;
	background:-webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
}

#menuTop5close{
	color:#fff;
	cursor: pointer;
	width: 30px;
	height:30px;
	background:rgba(0,0,0,0.2);
	text-align: center;
	line-height: 20px;
	margin:0 10px 0 0;
	position:absolute;
	right:0;
	top:10px;
	border-radius:180px;
	-webkit-appearance:button-bevel;
	-ms-appearance:button-bevel;
	border:none;
}

#menuTop5close:focus,
#menuTop5close:hover{
	background:rgba(0,0,0,0.5);
	transition:.3s;
}

#menuTop5cover{
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index:10000;
	cursor:pointer;
}

#menuTop5modalout{
	color:#fff;
	background: #fff;
	width: 65%;
	height:60%;
	border-radius: 4px;
	position:fixed;
	top: 100px;
	left: 0;
	right: 0;
	margin: 0 auto;
	transition:1s;
	z-index:20000;
	transition: all 1s;

}

#menuTop5modalout p{
	line-height: 3;
	margin: 0;
	background:#50a3a2;
	background:-webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
	background:-ms-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);

}

#menuTop5modalout.menuTop5hidden{
/*	transform: translate(0, -500px);*/
	opacity:0;
	transition:.9s;
	z-index:-1;
}

#menuTop5cover.menuTop5hidden{
	display:none;
}

#menuTop5cover.menuTop5hidden{
	display:none;
}

.menuTop5s{
	background:#fff ;
	color:rgb(80,80,80);
	text-align:left;
	overflow-y:scroll;
	height:100%;
	padding:10px 20px;
	-webkit-overflow-scrolling:touch;
	-webkit-transform: translateZ(0px);
}


.menuTop5p{
	width:210px;
	height:50px;
	margin:0 auto;
	position:relative;
	top:0;
   	display:-ms-flexbox;
   	display:flex;
   	-ms-flex-pack:center;
   	    justify-content:center;
   	-ms-flex-align:center;
   	    align-items:center;
	cursor:pointer;
	z-index:101;
	content:"fawer";

}

























































































/*------------------------------------レスポンシブ---------------------------------------------------*/
@media screen and (max-width:1024px){

/*--------------------タイトル-----------------------*/

.title01{
	display:none;
}

h2.title1{
	font-size:14px;
	top:0;
	left:0;
	width:55%;
	background:none;
	text-align:left;
	margin:0;
	text-shadow:1px 1px 0px rgba(100,100,100);
}

.title1h{
	width:100%;
}

.titlecenter{
	width:100%;
	margin:auto;
}



.title2,
.title3,
.title4,
.title5{
	font-size:14px;
}

.title1h{
	width:100%;
}

.icontext{
	margin:10px -5px auto 10px;
	
}

.icontextpre{
	margin:8px -5px auto 10px;
}

.check{
	width:35px;
	height:33px;
}

.reflection5:hover:after{
	position:relative;
	top:20px;
	right:-20px;
	width:330px;

} 

.reflection9:hover:after{
	position:relative;
	top:-5px;
	right:-50px;
	width:330px;

} 

.reflection11:hover:after{
	position:relative;
	top:17px;
	right:-50px;
	width:330px;

} 

.buttonLesson7{
	font-size:14px;
	width:10em;
	height:50px;	
}


.buttonLesson8{
	font-size:14px;
	width:10em;	
	height:50px;
}

#covering8{
	top:60px;
}

.buttonLesson9{
	font-size:14px;
	width:10em;	
	height:50px;	
}

#covering7{
	top:120px;
}


/*-------------無料会員登録のメニューボタン-------------*/
.reflection3{
	width:10em;
	height:50px;
	font-size:16px;
	top:0;
	right:0;

}

.hover .reflection3:hover{
	width:15em;
	letter-spacing:10px;

}

/*-------------ログインのメニューボタン-------------*/
.reflection4{
	width:10em;
	height:50px;
	font-size:16px;
	top:0;
	right:0;

}

.hover .reflection4:hover{
	width:15em;
	letter-spacing:10px;

}


/*-------------レッスンのメニューボタン-------------*/
.reflection5{
	width:10em;
	height:50px;
	font-size:16px;
	top:0;
	right:0;

}

.hover .reflection5:hover{
	width:15em;
	letter-spacing:10px;

}

/*-------------ログアウトのメニューボタン-------------*/
.buttonLesson11{
	padding:5px 0;
	margin:10px 0 10px auto;
	width:10em;
	height:50px;
	font-size:14px;
	text-align:right;
	background: #999999;
	background: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
	position:absolute;
	top:120px;
	right:0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

.buttonLesson11:hover{
	margin-left:auto;
	width:20em;
	letter-spacing:20px;
	position:relative;
	right:0;
	text-align:right;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;

}

.reflection11{
	height:100%;
	width:10em;
	position:absolute;
	top:0;
	z-index:999;
	cursor:pointer;
	margin-left:auto;

}

.reflection11:hover:before{
	height:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	border-radius:30px 0 0 30px;
	width:200%;
	margin-left:auto;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	z-index:999;

}

.reflection11:hover:after{
	font-size:14px;
	text-align:center;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:center;
	    justify-content:center;
	-ms-flex-align:center;
	    align-items:center;
	height:40px;
	content:/*"ログアウトする方はこちら"*/;
	white-space: pre;
	position:absolute;
	top:20px;
	right:300px;
	width:330px;
	animation: Change3 .5s;
	-webkit-animation: change3 .5s;
	background-color:#000;
	background-size:100%;
	background-repeat : no-repeat;
	margin-left:auto;
	opacity:.7;
	letter-spacing:0;
	border-radius:30px;

} 

@keyframes change11{
	0%{opacity:0;}
	25%{opacity:.25;}
	100%{
	opacity:.7;

		}
}


/*-----無料会員登録-----*/
#menuTop3modalout,
#menuTop4modalout,
#menuTop5modalout{
/*	width:350px;*/
	top:30px;
}

.ftitle,
.ftitleRe{
	font-size:11px;
	width:65px;
}

.titlecenter{
	font-size:16px;
}

.language{
	width:35px;
}








}/*@media screen and (max-width:1024px)*/



@media screen and (max-width:768px){
#menuTop9modalout{
	width:450px;
}

.titlecenter{
	font-size:14px;
}

.language{
	width:25px;
}

.check{
	width:25px;
	height:23.5px;
}

.icontext{
	margin:5px -5px auto 10px;
	text-shadow:none;
}

.icontextpre{
	margin:4px -5px auto 10px;
	text-shadow:none;
}

.title2, .title3, .title4, .title5{
	line-height:21px;
	padding:0 46px;
}






}/*@media screen and (max-width:768px)*/


@media screen and (max-width:727px){
.titlecenter{
	width:100%;
}




}/*@media screen and (max-width:727px)*/


@media screen and (max-width:500px){
#menuTop3modalout,
#menuTop4modalout,
#menuTop5modalout{
	width:90%;

}

.menuTop3s,
.menuTop4s,
.menuTop5s{
	padding:10px 5px 10px 7px
}

.menuTop3sUp,
.menuTop4sUp,
.menuTop5sUp{
	padding:10px 0px 10px 10px;
}

.menuTop5sUp{
	padding:10px;
}

#freeUser,
#freeMail,
#freePass,
#freePass2,
#freeAge,
#freeLive,
#freeJob,
#loginMail,
#loginPass{
	padding:2% 10px 2%;
	width:65%;
}

#freeUser:focus,
#freeMail:focus,
#freePass:focus,
#freePass2:focus,
#freeAge:focus,
#freeLive:focus,
#freeJob:focus,
#loginMail:focus,
#loginPass:focus{
	width: 70%;
	transition-duration: .6s;

}

}/*@media screen and (max-width:500px)*/

@media screen and (max-width:480px){
#freeUser,
#freeMail,
#freePass,
#freePass2,
#freeAge,
#freeLive,
#freeJob,
#loginMail,
#loginPass{
	font-size:11px;
}

}/*@media screen and (max-width:480px){*/




@media screen and (max-width:360px){
.titleUp{
	font-size:34px;
}

.reflection3,
.reflection4,
.reflection5{
	font-size:14px;

}

.titlecenter{
	font-size:12px;
}

}/*@media screen and (max-width:360px)*/