// Scss Document
@charset "utf-8";

/* カラー設定  */
$main: #0099e5;
$sub: #0c69bc;
$accent: linear-gradient(#07dbbc, #0099e5);
$link: #07dbbc;

/* フォント指定  */
$section : 'Roboto Condensed', sans-serif;

/* ブレイクポイント指定  */
$pc: 769px;
$tab820: 820px;
$tab768: 768px;
$sp: 540px;
// tab(769px~)
@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
// tab(~820px)
@mixin tab820 {
  @media (max-width: ($tab820)) {
    @content;
  }
}
// tab(~768px)
@mixin tab768 {
  @media (max-width: ($tab768)) {
    @content;
  }
}
// sp(~414px)
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}
html {
  font-size: 62.5%; 
	font-family: source-han-sans-japanese, sans-serif;
}
@media screen and (max-width: 786px) {
  html {
    font-size: 1.31579vw;
  }
}
body{
	-webkit-text-size-adjust: 100%;
	font-size: 1.6em;
	overflow-x: hidden !important;
}
p{
	word-wrap: break-word;
	line-height: 1.6;
}
img{
	width: 100%;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}

/* header =============================================  */
header{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: 50px;
	padding: 0 0 0 4rem;
	@include tab768{
		height: 51px;
		}
	@include sp{
		padding: 0 20px;
	}
	h1{
		height: 50px;
		z-index: 99999;
		@include sp{
			position: relative;
		}
		.sub{
			font-size: 1.5rem;
			color: black;
			@include sp{
				font-size: 2.1rem;
				line-height: 1;
			}
		}
		a{
			display: block;
			height: auto;
			-webkit-box-align: center;-ms-flex-align: center;align-items: center;
			margin-right: 0.5em;
			display: -webkit-box;display: -ms-flexbox;display: flex;
			word-break: keep-all;
			@include sp{
				display: block;
				position: absolute;
				top: 80%;
				-webkit-transform: translateY(-80%);
				-ms-transform: translateY(-80%);
				transform: translateY(-80%);
			}
			
			p{
			color: $main;
			font-weight: bold;
			font-size: 2.1rem;
			line-height: 50px;
				@include sp{
					font-size: 3.4rem;
					line-height: 1.5;
				}
			}
		}
	}// /h1
	
	.logo{
		z-index: 99999;
		background-color: #fff;
		-webkit-clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%);
		padding: 10px 40px;
		-webkit-box-sizing: border-box;box-sizing: border-box;
		height: calc(100% + 1px);
		/*position: relative;*/
		@include tab768{
		-webkit-clip-path: polygon(4% 0%, 100% 0%, 100% 100%, 0% 100%);clip-path: polygon(4% 0%, 100% 0%, 100% 100%, 0% 100%);
		}
		@include sp{
			right: -21px;
			position: relative;
			padding-right: 22px;
			padding-left: 20px;
			top: -0.5px;
			height: 100%;
		}
		
		a{
			display: block;
			width: 200px;
			margin: 0 auto;
			@include sp{
				width: 120px;
				padding-top: 5px;
			}
		}
	}
	
	/*  縦長  */
	@media screen and (orientation: portrait) {
	h1{
		line-height: 59px;
	}
	} // /portrait
	
} // /header
/* wrapper =============================================  */
.wrapper{
	position: relative;
	overflow-x: hidden !important;
	
	@include sp{
	font-size: 3.2rem;
	}
}

/*  横長  */
	@media screen and (orientation: landscape) {
  .wrapper {
	  @include pc{
		  min-width: 955px;
	  }
  }
	} // /landscape
/* opアニメ設定 */
.top-op{
  position: fixed;
  top: 0;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
	z-index: 999999999999999999999;
  background: $main;
  animation-duration: 1.2s;
  animation-delay:0.5s;
  animation-fill-mode: forwards;
  animation-name: top-op;
}
@keyframes top-op{
0% {
  width: 100%;
  left:0;
}
50% {
  width: 100%;
}
100% {
  width: 0%;
  left: 100%;
}
}
/* //opアニメ設定 */


/* hero =============================================  */
#hero{
	overflow: hidden;
    height: 98vh;
	@include tab768{
		padding-top: 45px;
		}
	@include sp{
		height: 500px;
	}
	.cfix{
		overflow: hidden;
		background: transparent;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9;
		mix-blend-mode: color-dodge;
    	opacity: 0.2;
		height: calc(100vh + 50px);
		@include sp{
			margin-top: 50px;
		}
	}
	.cfix:before {
	display: block;
    width: 72vw;
    height: calc(100vh + 50px);
    content: "";
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: skewX(23deg);
    transform: skewX(-23deg);
    background-image: linear-gradient(-180deg, $sub 0%, $main 108vh, transparent 50%, transparent 100%);
		@include sp{
			height: 567px;
			width: 55vw;
			-webkit-transform: skewX(349deg);
   			transform: skewX(349deg);
		}
	} // /.cfix:before
	

	.cont{
	background-image: url("https://www.aplis-net.co.jp/assets/images/register/hero_background_01.png");
	background-repeat: no-repeat;
	background-size: 65% 100%;
	background-position: right;
	width: 100%;
	height: calc(100vh + 50px);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
    top: 0;
    padding-top: 50px;
	@include tab768{
		background-size: 75% 100%;
	}
		@include sp{
			height: 567px;
			padding-top: 0;
			margin-top: 50px;
		}
	}
	
	.line{
		position: absolute;
		left: -50px;
		bottom: 14%;
		mix-blend-mode: multiply;
		width: 15%;
	}
	.layer01{
		background-image: url("https://www.aplis-net.co.jp/assets/images/register/hero_background_02.png");
		background-repeat: no-repeat;
		margin: 0 4rem;
		
		background-position: center;
		background-size: cover;
		min-width: 1000px;
		@include sp{
			margin: 0 20px;
			min-height: 500px;
		}
	}
	
	
	
	
	/*  横長  */
	@media screen and (orientation: landscape) {
  .layer01 {
	height: min(85vh, 85vw / 0.75);
  }
	} // /landscape
	/*  縦長  */
	@media screen and (orientation: portrait) {
 	.layer01 {
	min-width: 200px;
	height: min(90vh, 90vw / 0.75);
  	}
	.line{
    	bottom: 9.5%;
    	width: 30%;
		@include sp{
		display: none;
		}
	}
	} // /portrait
	
	
	.mainTitle{
		width: clamp(200px, calc(100vw / 2), 500px);
		padding: 50px 0 0 72px;
		position: relative;
		height:calc(100% - 50px);
		@include tab768{
			padding: 50px 0 0 20px;
		}
		@include sp{
			margin: 0 auto;
    		padding-left: 0;
    		padding-right: 0;
    		width: 250px;
		}
		
		.word{
			position: absolute;
			&.txt0{
				@include sp{
					top: 65px;
				}
				p{
					font-size: 2.5rem;
					top: 10px;
					padding-left: 21px;
					letter-spacing: 32px;
					@include sp{
						font-size: 18px;
						top: 4px;
						padding-left: 16px;
					}
				}
				div.blend{
				&::before{
				width: 140px;
				height: 35.9px;
				/*left: 20px;*/
				top: 10px;
				-webkit-clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);
					@include sp{
						height: 26.9px;
						top: 6px;
						width: 120px;
						left: 0;
					}
				}	
				}
			} // /.txt0
			&.txt1{
				top: 75.5px;
				@include sp{
					top: 90.5px;
				}
			}
			&.txt2{
				top: 160px;
				@include sp{
					top: 155px;
				}
			}
			&.txt3{
				top: 245px;
				@include sp{
					top: 225px;
				}
				p{
					font-size: 11rem;
					top: -19px;
					@include sp{
						font-size: 85px;
						top: -21px;
					}
				}
				div.blend{
				&::before{
				height: 109px;
				width: 260px;
					@include sp{
						height: 88px;
						width: 198px;
					}
				}
				}
			} // /.txt3
			&.txt4{
				position: absolute;
				top: 400px;
				background: rgba(255,255,255,0.66);
				mix-blend-mode: normal;
				height: 90px;
  				width: 325px;
				padding: 1em;
				-webkit-box-sizing: border-box;box-sizing: border-box;
				@include tab768{
					left: 41px;
				}
				@include sp{
					left: 0;
					width: 252px;
					padding: 0.8em;
					height: 78px;
					top: 340px;
				}
				p{
				font-size: 1.6rem;
				color: black;
				left: 0;
				position: static;
				width: 290px;
					@include sp{
						width: 224px;
						font-size: 3.0rem;
					}
				}
				div{
					background: none;
				}
			} // .txt04
			
			div.blend{
			position: relative;
			&::before{
			background-color: $sub;
			mix-blend-mode: multiply;
			content: '';
			display: block;
			width: 325px;
			height: 68px;
			position: absolute;
			/*left: 20px;*/
			top: 20px;
				@include sp{
					width: 252px;
					top: 7px;
					height: 52px;
					left: 0;
				}
			}
			}
			
			
			p{
				color: #fff;
				font-size: 6.5rem;
				width: 400px;
				height: 60px;
				position: absolute;
				font-weight: bold;
				@include sp{
					font-size: 50px;
					top: -10px;
					left: 0;
				}
			}
		} // /.Word
	} // /.mainTitle
	.entry.top{
		display: block;
   		position: absolute;
   		left: 50%;
   		top: 92%;
   		-webkit-transform: translateX(-50%) translateY(-92%);-ms-transform: translateX(-50%) translateY(-92%);transform: translateX(-50%) translateY(-92%);
		z-index: 9999999;
		width: clamp(200px, calc(100vw / 3), 600px);
		transition: all ease 0.3s;
		@include sp{
		top: 530px;
		opacity: 1;
		}
		&:hover{
			opacity: 0.8;
		}
	}
	
	/*  縦長  */
	@media screen and (orientation: portrait) {
	.entry.top{
		width: clamp(200px, calc(100vw / 1.15), 600px);
	}
	} // /portrait
	
	
	.scroll_img{
	position: absolute;
    bottom: 90px;
    left: 12px;
	width: 10px;
		@include sp{
			bottom: 10px;
    		left: 6px;
			width: 5px;
		}
	}
	
} // /#hero


/* Section_start =============================================  */

.section{
	padding-top: 250px;
	background-image: url("https://www.aplis-net.co.jp/assets/images/register/h2_back_r.png");
	background-repeat: no-repeat;
	background-position: top 50px right;
	background-size: 450px;
	@include tab768{
		padding-top: 100px;
		background-size: 250px;
	}
	
	h2{
		text-align: right;
		padding: 0 6em 0 0;
		@include tab768{
			padding: 0 3em 0 0;
		}
		@include sp{
			padding: 0 1em 0 0;
		}
		.main{
			font-family: $section;
			font-size: 10rem;
			line-height: 0.9;
			margin-bottom: 0;
			@include tab768{
				font-size: 6rem;
				line-height: 1;
				margin-bottom: 0;
			}
			@include sp{
				font-size: 12rem;
			}
		}
		:last-child{
			font-size: 2.5rem;
			margin-bottom: 1.2em;
			@include tab768{
				font-size: 2rem;
				margin-bottom: 25px;
			}
			@include sp{
				font-size: 4rem;
			}
		}
	}
	
	&.left{
		background-image: url("https://www.aplis-net.co.jp/assets/images/register/h2_back.png");
		background-position: top 50px left;
		h2{
			padding: 0 0 0 6em;
			text-align: left;
			@include tab768{
				padding: 0 0 0 3em;
			}
			@include sp{
				padding: 0 0 0 1em;
			}
		}
	} // /.left
	
}

.section.index{
	.index_cont{
		width: clamp(250px, calc(100vw / 1.5), 1000px);
		margin: 0 auto;
		background-color: #fff;
		
		.cont{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			margin-bottom: 60px;
			@include tab768{
				-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-flow: column-reverse;flex-flow: column-reverse;
				border-left: 0;
			}
			
			&:last-child{
				margin-bottom: 0;
			}
			
			.txt{
				padding: 0 4rem;
				-webkit-box-sizing: border-box;box-sizing: border-box;
				position: relative;
				width: 100%;
				@include tab768{
					margin: 0 0 2em 0;
				}
				@include sp{
					padding: 0;
				}
				
				p{
					&.serviceName{
						border-bottom: 2px solid $sub;
						color: $sub;
						font-weight: bold;
						line-height: 1.1;
						height: 23px;
						margin-bottom: 20px;
						@include tab768{
							margin: 10px 0;
							font-size: 3rem;
						}
						@include sp{
							border: 0;
							margin-top: 16px;
						}
						span{
							font-size: 4rem;
							background-color: #fff;
							padding-right: 1.6rem;
							@include sp{
								font-size: 6rem;
							}
						}
					} // /.serviceName
				}
				.NameBottom{
						margin-right: 4rem;
						@include tab768{
							margin-right: 0;
						}
						&.p{
							margin-top: 40px;
							@include sp{
								margin-top: 20px;
							}
						}
					} // /.NameBottom
				a{
					display: block;
					background-color: $sub;
					margin-top: 20px;
					padding: 0.7em;
					text-align: center;
					@include sp{
						padding: 1em;
					}
					p{
						color: #fff;
						text-align: center;
						padding-right: 25px;
						background: url("https://www.aplis-net.co.jp/assets/images/register/under.svg");
						background-repeat: no-repeat;
						background-size: 20px;
						display: inline-block;
						background-position: right 50%;
					}
				}
				div{
					position: absolute;
   					top: 50%;
   					-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);
					width: 100%;
					@include tab768{
						position: static;
   						top: 0%;
   						-webkit-transform: translateY(0%);
   						-ms-transform: translateY(0%);
   						transform: translateY(0%);
					}
				}
				
			} // /.txt
			img{
				width: clamp(200px, calc(100% / 1.7), 600px);
				margin-left: 4rem;
				@include tab768{
				width: clamp(200px, calc(100% / 1), 600px);
   				margin: 0 auto;
				}
				}
		} // /.cont
	}
	
	/*  縦長  */
	@media screen and (orientation: portrait) {
	.index_cont{
		width: 90%;
		padding-bottom: 1em;
	}
	} // /portrait
	// /.index_cont
} // /.section.index

/* ======================================================= */

.section.school,.section.teacher{
	&.teacher{
		margin-bottom: 100px;
		@include sp{
			margin-bottom: 50px;
		}
	}
	.about{
		-webkit-clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
		background-color: #fff;
		margin-right: 6em;
		padding: 80px 0;
		background-image: url("https://www.aplis-net.co.jp/assets/images/register/school_back02.png");
		background-repeat: no-repeat;
		background-position: left;
		background-size: 12% 100%;
		@include tab768{
			padding: 60px 0;
			margin-right: 1.5em;
			-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
   			clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		}
		@include sp{
			background-size: 68% 25%;
    		background-position: left -120px top 0;
		}
	} // /.about(school)
	
	.wrap{
		padding: 100px 0;
		background-color: cadetblue;
		background-image: url("https://www.aplis-net.co.jp/assets/images/register/section_school_back.jpg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		top: -15px;
		&.teacher{
			background-image: url("https://www.aplis-net.co.jp/assets/images/register/section_teacher_back.jpg");
		}
 		position: relative;
		@include tab768{
			padding: 50px 0;
		}
	}
	.cont{
		margin: 0 auto;
    	width: 500px;
		width: clamp(250px, 70%, 1000px);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		&.teacher{
			-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
		}
		
		@include tab768{
			-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
		}
	}
	.txt{
		width: 50%;
		font-weight: 500;
		-webkit-box-sizing: border-box;box-sizing: border-box;
		padding-right: 60px;
		&.teacher{
			padding-right: 0;
			margin-bottom: 60px;
			width: 100%;
			@include tab768{
				margin-bottom: 2em;
				width: 100%;
   				padding-right: 0;
			}
		}
		
		h2{
			@include tab768{
				&:first-child{
				font-size: 2rem;
				}
				&:last-child{
					font-size: 3rem;
				}
			}
		}
		h3{
			margin-bottom: 1em;
			:first-child{
				font-family: $section;
				font-size: 3rem;
				line-height: 0.5;
				font-weight: 500;
				@include tab768{
					font-size: 2.5rem;
				}
				@include sp{
					font-size: 4.7rem;
				}
			}
			:last-child{
				font-weight: bold;
				color: $sub;
				font-size: 3.5rem;
				@include tab768{
					font-size: 3rem;
				}
				@include sp{
					font-size: 5.9rem;
				}
			}
		}
	} // /.txt
	.img{
		width: 50%;
		text-align: center;
		@include tab768{
			margin-top: 2em;
		}
		@include sp{
			margin-top: 3em;
		}
		h4{
			font-size: 1.8rem;
			font-weight: bold;
			margin-bottom: 1em;
			@include sp{
				font-size: 3.5rem;
			}
		}
		.box{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			@include tab768{
				-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
			}
			
			div{
			border: 3px solid $sub;
			width: 50%;
			padding: 1em;
			-webkit-box-sizing: border-box;box-sizing: border-box;
			@include tab768{
				width: 100%;
				max-width: 400px;
				margin: 0 auto 1em;
			}
			&:first-child{
				margin-right: 20px;
				@include tab768{
					margin-right: auto;
				}
			}
			&:last-child{
				@include tab768{
					margin-bottom: 0;
				}
					}
			img{
				max-width: 170px;
			}
			p{
				font-weight: 500;
   				font-size: 1.4rem;
   				margin-top: 0.5em;
				@include sp{
					font-size: 2.7rem;
				}
			}
			} // /div
		}
		
	}// /.img
	@include tab768{
		.txt,.img{
			width: 100%;
			padding-right: 0;
		}
	}
	ul{
    		text-align: center;
			display: -webkit-box;
   			display: -ms-flexbox;
   			display: flex;
   			-webkit-box-pack: justify;
   			-ms-flex-pack: justify;
   			justify-content: space-between;
			margin: 0 auto;
    		max-width: 750px;
			@include tab768{
				display: block;
				width: 100%;
				margin-top: 2em;
			}
			
			li{
				width: 33.3%;
				margin-right: 1em;
				border: 3px solid $sub;
				-webkit-box-sizing: border-box;box-sizing: border-box;
				padding: 1.5em;
				font-size: 1.4rem;
				font-weight: 500;
				@include tab768{
					width: 100%;
					max-width: 400px;
					margin: 0 auto 1em;
				}
				@include sp{
					font-size: 2.7rem;
				}
				img{
					max-width: 190px;
					margin-bottom: 12px;
					max-width: 170px;
				}
				&:last-child{
					margin: 0 auto;
				}
			}// /li
			.box{
				@include tab768{
					-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
				}
				div{
					@include tab768{
					width: 100%;
					max-width: 400px;
					margin: 0 auto;
					&:first-child{
						margin: 0 auto 1em;
					}
					}
					}// /div
			}// /.box
		}// /ul.img
	
} // /.section.school


/* ======================================================= */

.section.tuyomi{
	padding: 0;
	margin: 100px 3em;
	background: linear-gradient($main, $sub);
	@include tab768{
		margin: 50px 3em;
	}
	@include sp{
		margin: 50px 1em;
	}
	
	h2{
		padding: 100px 0 0 100px;
		text-align: left;
		@include tab768{
			padding: 50px 0 0 30px;
		}
		@include sp{
			padding: 50px 0 0 18px;
		}
		&.right{
			text-align: right;
			padding: 100px 100px 0 0;
			@include tab768{
			padding: 50px 30px 0 0;
			}
		@include sp{
			padding: 50px 18px 0 0;
			}
			img{
				height: 47px !important;
				@include tab768{
				height: 28px !important;
			}
			}
		}//.right
		
		img{
			height: 60px;
   			width: auto;
			@include tab768{
				height: 37px;
			}
		}
		p{
			font-size: 5.5rem;
			color: #fff;
			margin-bottom: 40px;
			font-weight: 200;
			line-height: 1.4;
			@include tab768{
				font-size: 3.5rem;
				margin-bottom: 20px;
			}
			@include sp{
				margin-bottom: 40px;
				font-size: 7rem;
			}
		}
	}
	
	.cont{
		color: #fff;
		margin: 0 auto;
		padding-bottom: 100px;
		width: clamp(300px, calc(100% / 1.5), 1000px);
		@include tab768{
			width: 90%;
			padding: 0 0 50px 0;
		}
		@include sp{
			width: 100%;
    		padding: 0 18px 50px 18px;
    		-webkit-box-sizing: border-box;
   			box-sizing: border-box;
		}
		
		h2{
			@include tab768{
			position: absolute;
   			top: 92px;
   			width: 70%;
   			right: 31px;
			}
			br{
			@include tab768{
				display: none;
			}
			}
		}
		h3{
			font-weight: 400;
			font-size: 3rem;
    		line-height: 1.6;
			text-align: left;
			margin-bottom: 30px;
			@include tab768{
				font-size: 2.5rem;
			}
			@include sp{
				font-size: 3.9rem;
				line-height: 1.6;
				margin-bottom: 15px;
			}
		}
		img{
			width: clamp(200px, calc(100% / 1.5), 600px );
    		margin: 0 auto 30px;
    		display: block;
			@include sp{
				width: 100%;
				margin: 0 auto 20px;
			}
		}
		.deta{
			&:first-child{
				margin-bottom: 100px;
				@include sp{
					margin-bottom: 80px;
				}
			}
			p{
				font-weight: 200;
			}
		}
	} // /.cont

} // /.section.tuyomi
.section.timeline{
	.wrap{
		background: linear-gradient($main, $sub);
		padding: 100px 0;
		@include sp{
			padding: 50px 0;
		}
	}
	.cont{
		width: clamp(300px, calc(100% / 1.5), 1000px);
		margin: 0 auto;
		@include sp{
		width: 100%;
   		padding: 0 18px;
   		-webkit-box-sizing: border-box;box-sizing: border-box;
		}
	}
	ul{
				li{
					padding-bottom: 60px;
					background: url("https://www.aplis-net.co.jp/assets/images/register/flow_backborder.png");
					background-repeat: no-repeat;
					background-position: center;
					background-size: 4px 150px;
					color: black;
					@include tab768{
						padding-bottom: 30px;
					}
					@include sp{
						background-size: 4px 230px;
					}
					&:last-child{
						background: none;
						padding-bottom: 0;
					}
					div{
						display: -webkit-box;display: -ms-flexbox;display: flex;
    					width: 100%;
						border: 2px solid #fff;
						
						.left{
							padding: 15px;
							width: 20%;
							-webkit-box-sizing: border-box;box-sizing: border-box;
							@include tab768{
								font-size: 1.8rem;
							}
							@include sp{
								width: 30%;
							}
							p{
							font-family: $section;
							color: #fff;
							margin: 0 auto;
							font-size: 3rem;
							@include tab768{
								font-size: 2rem;
							}
								@include sp{
									font-size: 3.2rem;
								}
							}
						}
						.right{
							width: 80%;
							background-color: #fff;
							position: relative;
							padding: 12px 12px;
							-webkit-box-sizing: border-box;box-sizing: border-box;
							@include sp{
								width: 70%;
							}
							p{
								vertical-align: middle;
								align-items: center;
								position: absolute;
								top: 50%;
								-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);
								padding-right: 12px;
								line-height: 1.2;
								@include tab768{
									position: static;
									top: 0;
									-webkit-transform: translateY(0%);-ms-transform: translateY(0%);transform: translateY(0%);
									}
								@include sp{
									line-height: 1.6;
								}
								
								span{
									font-size: 1.3rem;
									@include sp{
										font-size: 2.6rem;
									}
								}
							}
						} // /.right
					} // /div
				} // /li
			}
}
/* ======================================================= */

.section.recruit{
		padding-top: 0;
		background: none;
	.h2{
		font-family: $section;
		color: $sub;
		font-size: 5.5rem;
    	padding: 0 0 0 80px;
		line-height: 1.2;
		background-image: url("https://www.aplis-net.co.jp/assets/images/register/recruit_border.svg");
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 100px;
		@include tab768{
			padding: 0 0 0 30px;
			font-size: 4rem;
		}
		@include sp{
			padding: 0 0 0 16px;
			font-size: 7.8rem;
		}
		span{
			background-color: #fff;
			padding-left: 10px;
			@include sp{
				padding-left: 7px;
			}
		}
	}
	div{
		margin-bottom: 15px;
		@include tab768{
			-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
		}
		@include sp{
			margin-bottom: 24px;
		}
		h2{
		text-align: left;
		color: $sub;
		font-size: 2.5rem;
		padding: 0 0 0 90px;
		@include tab768{
			padding-left: 40px;
		}
		@include sp{
			padding-left: 23px;
			font-size: 4.9rem;
		}
		}
		display: -webkit-box;display: -ms-flexbox;display: flex;
		p{
			margin-left: 1em;
			background-color: $sub;
			color: #fff;
			text-align: center;
			font-size: 1.4rem;
			padding: 3px 12px;
			@include tab768{
				max-width: 100px;
				margin: 10px 10px 0 40px;
			}
			@include sp{
				margin: 14px 10px 0 23px;
				font-size: 2.7rem;
			}
		}
	}
	.list{
		width: clamp(200px, 80%, 1300px);
		padding-left: 90px;
		display: -webkit-box;display: -ms-flexbox;display: flex;
		-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
		line-height: 1.6;
		
		@include tab768{
			padding-left: 40px;
   			-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
		}
		@include sp{
			padding-left: 23px;
   			padding-right: 23px;
   			margin: 0;
   			box-sizing: border-box;
   			width: 100%;
			}

		.first,.second{
			width: 50%;
			@include tab768{
				width: 100%;
			}
			dl{
			display: -webkit-box;display: -ms-flexbox;display: flex;
			-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
			border-bottom: 1px solid black;
			padding: 8px 12px 8px 0;
			@include tab768{
				margin-bottom: 1.5em;
			}
			dt{
				@include sp{
					word-break: keep-all;
   					margin-right: 23px;
					}
			}
			}
		}// /.first,.second
		.first{
			margin-right: 2em;
		}
	} // /.list
} // /.section.recruit
.middleEntry{
	background: linear-gradient(#0099e5, #0c69bc);
	margin: 100px 0 0 0;
	padding: 100px 0;
	@include sp{
		margin: 50px 0 0 0;
		padding: 50px 0;
	}
	.cont{
		margin: 0 auto;
		width: clamp(200px, calc(100vw / 3), 600px);
		@include tab820{
		width: 90%;
		}
	}
	/*  縦長  */
	@media screen and (orientation: portrait) {
	.cont{
		width: 90%;
	}
	} // /portrait
	
	h3{
	font-size: 3rem;
    line-height: 1.6;
	font-weight: 400;
	text-align: center;
	color: #fff;
	margin-bottom: 4px;
		@include sp{
			font-size: 4rem;
		}
	}
	a{
	display: block;
    transition: all ease 0.3s;
		&:hover{
			opacity: 0.8;
		}
	}
	/*  縦長  */
	@media screen and (orientation: portrait) {
	a{
		width: clamp(200px, calc(100vw / 1.15), 600px);
		margin: 0 auto;
		
	}
	} // /portrait
	
	
}
/* /.middleEntry  */
/* ======================================================= */

.section.entry{
	background-image: url("https://www.aplis-net.co.jp/assets/images/register/h2_back.png"),url("https://www.aplis-net.co.jp/assets/images/register/section_entry_back.png");
	background-repeat: no-repeat;
	background-position: top 50px left,bottom left;
	background-size: 450px,65%;
    padding-bottom: 100px;
	@include tab768{
		background-size: 250px,200%;
	}
	
	div{
		margin-bottom: 30px;
		clear: both;
	}
	
	fieldset{
	max-width: 550px;
    margin: 0 auto;
	}
	
	.form{
		width: clamp(600px, 90%, 1100px);
		margin: 0 auto;
		background: linear-gradient($main, $sub);
		-webkit-box-sizing: border-box;box-sizing: border-box;
		padding: 5em 4em;
		@include sp{
			padding: 50px 18px;
		}
		
		.other{
			.flexbox{
				display: -webkit-box;display: -ms-flexbox;display: flex;
				@include sp{
					-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-flow: column;flex-flow: column;
				}
			}

			.radio_input {
   			clip: rect(1px, 1px, 1px, 1px);
   			position: absolute !important;
			}
		.radio_label {
		    display: inline-block;
   			padding: 1rem 1rem;
			margin: 8px 18px 0 0;
   			border-radius: 6px;
			-webkit-box-sizing: border-box;box-sizing: border-box;
			border: 3px solid #020202;
			background-color: #fff;
			color: #020202;
			line-height: 1.2;
   			text-align: center;
   			font-weight: 500;
			font-size: 1.6rem;
			cursor: pointer;
			width: 33.3%;
			@include sp{
				width: 100%;
				padding: 0.5rem 1rem;
				margin: 8px 0 8px 0;
				font-size: 3.2rem;
			}
			
			&.height{
					line-height: 36px;
				}
		}
		.radio_input:checked + .radio_label {
		    background: #fff;
		    color: #00b9a7;
			border: 3px solid #00cda5;
			
		}
		.radio_input:focus + .radio_label {
		    outline-color: $main;
              outline-offset: -2px;
		    outline-style: auto;
		    outline-width: 5px;
		}
		} // /.other
		label,.other p{
			font-size: 2rem;
			color: #fff;
			line-height: 1.5;
			@include sp{
				font-size: 3.8rem;
			}
			
		}
		span{
				&.label{
					background-color: $link;
					margin-right: 10px;
					font-size: 1.6rem;
					padding: 2px 10px;
					@include sp{
						font-size: 3rem;
					}
				}
				&.sub{
					font-size: 1.6rem;
				}
				&.kome{
					font-size: 1.3rem;
					@include sp{
						font-size: 2.6rem;
					}
				}
			}
		input[type="submit"] {
		-webkit-appearance: none;
		border-radius: 0;
		}
		input,textarea{
			margin: 8px 0 0 0;
			width: 100%;
			max-width: 400px;
			font-size: 100%;
			@include sp{
				-webkit-box-sizing: border-box;box-sizing: border-box;
				height: 45px !important;
			}
		}
		input{
    		height: 30px;
			&.submit{
				border: 0;
				background: $accent;
				color: #fff;
				height: 45px;
   				border-radius: 8px;
				font-weight: 500;
				box-shadow: 2px 2px 4px #002187;
				font-size: 1.6rem;
				cursor: pointer;
				transition: all ease 0.3s;
				@include sp{
					height: 57px !important;
					font-size: 3.2rem;
				}
				&:hover{
					opacity: 0.7;
				}
			}
		} // /input

		select{
			margin-top: 8px;
			height: 30px;
			width: 150px;
			font-size: 100%;
			@include sp{
				height: 45px;
				float: left;
				margin-right: 8px;
				margin-bottom: 30px;
			}
			&.year{
				@include sp{
				width: 40%;	
				}
			}
			&.month,&.day{
				@include sp{
					width: 27%;
				}
			}
			&.day{
				@include sp{
					margin-right: 0;
				}
			}
			
			option{
				color: #5F5F5F;
			}
		}
		
		.policy{
			display: -webkit-box;display: -ms-flexbox;display: flex;
			
			input{
				width: auto;
 				margin: 0 0.5em 0 0;
			}
			
			label{
				color: #fff;
				font-size: 1.3rem;
				@include sp{
					font-size: 2.6rem;
				}
			}
			
			a{
				border-bottom: 1px solid #fff;
				color: #fff;
			}
			input[type="checkbox"]{
    		display: none;
			}
			input[type="checkbox"]+label{
   			display: none;
   			cursor: pointer;
   			display: inline-block;
   			position: relative;
   			padding-left: 25px;
   			padding-right: 10px;
			}
			input[type="checkbox"]+label::before{
   			content: "";
   			position: absolute;
   			display: block;
   			box-sizing: border-box;
   			width: 20px;
   			height: 20px;
   			margin-top: -10px;
   			left: 0;
   			top: 50%;
   			border: 1px solid;
   			border-color:  #fff;
			}
			input[type="checkbox"]:checked+label::after{
  			content: "";
  			position: absolute;
  			display: block;
  			box-sizing: border-box;
  			width: 18px;
  			height: 9px;
  			margin-top: -9px;
  			top: 50%;
  			left: 3px;
  			transform: rotate(-45deg);
  			border-bottom: 3px solid;
  			border-left: 3px solid;
  			border-color:  #fff;
			}
		} // /.policy
		
	} // /.form
	
	/*  縦長  */
	@media screen and (orientation: portrait) {
	.form{
		width: 90%;
	}
	} // /portrait
	// /.form
	
} // /.section.entry


/* ============================================ */
/*  追従ENTRYボタン  */
.pagetop{
	width: 80px;
	position: fixed;
 	right: 0;
	bottom: 50px;
	display: none;
	z-index: 9999999999;
	transition: ease .3s;
	@include sp{
		width: 50px;
	}
}

.active{
	opacity: 0.5;
	@include sp{
		opacity: 0.3;
	}
}

.fixed{
 width: 80px;
	position: fixed;
 	right: 0;
	bottom: 50px;
 	display: none;
}