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

html{
	font-family: YuGothic,'Yu Gothic','Meiryo UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	font-size: 62.5%;
}
/*  メインカラー  */
$main: #049900;
$Yellow: #FFF93A;
$back_gray: #F9F9F9;
$font_color: #3E3A39;

/*  ブレイクポイント指定  */
$pc_1600: 1600px;
$pc_1367: 1367px;
$min1366: 1366px;
$pc_1113: 1113px;
$pc_1024: 1024px;
$pc: 1024px; // PC
$tab_835: 836px; // タブレット
$tab: 768px; // タブレット
$sp_540: 540px;  // スマホ
$sp_415: 415px;  // スマホ
$sp_375: 375px;  // スマホ
$sp_320: 320px;  // スマホ(320px)

// pc~(1366px~)
@mixin pc_1600 {
  @media (min-width: ($pc_1600)) {
    @content;
  }
}
@mixin pc_1367 {
  @media (min-width: ($pc_1367)) {
    @content;
  }
}
@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin pc_1113 {
  @media (max-width: ($pc_1113)) {
    @content;
  }
}
@mixin pc_1024 {
  @media (max-width: ($pc_1024)) {
    @content;
  }
}
@mixin min1366 {
  @media (max-width: ($min1366)) {
    @content;
  }
}
@mixin tab_835 {
  @media (max-width: ($tab_835)) {
    @content;
  }
}
@mixin tab {
  @media (max-width: ($tab)) {
    @content;
  }
}
@mixin sp_540 {
  @media (max-width: ($sp_540)) {
    @content;
  }
}
@mixin sp_415 {
  @media (max-width: ($sp_415)) {
    @content;
  }
}
@mixin sp_375 {
  @media (max-width: ($sp_375)) {
    @content;
  }
}
@mixin sp_320 {
  @media (max-width: ($sp_320)) {
    @content;
  }
}

/*  ============about=============  */

body{
	-webkit-text-size-adjust: 100%;
	font-size: 1.6em;
	overflow-x: hidden;
}
p{
	color: $font_color;
	line-height: 1.6;
}
img{
	width: 100%;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
}
p{
	word-wrap: break-word;
}

/*  ============main=============  */

.wrapper{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	
	@include min1366{
		display: block;
	}
	@include pc_1024{
		display: block;
	}
}

//header
header{
	width : -webkit-calc(100% / 8) ;
	width : calc(100% / 8);
	min-width: 215px;
	/*border-right: 2px solid $main;*/
	height: 100vh;
	
	
	@include min1366{
		width: 100%;
		border-right: 0;
		border-bottom: 2px solid $main;
		height: 50px;
	}
	
	.wrap{
		padding: 15px 16px 15px 17px;
		box-sizing: border-box;
		position: fixed;
		top: 10%; left: 0;
		margin: 0;
		background-color: #fff;
		z-index: 999999999;
		
		@include min1366{
			padding: 0;
			top: 0;
			width: 100%;
			border-bottom: 2px solid $main;
		}
	}
	
	.head{
		box-sizing: border-box;
		height: 50px;
		padding: 0;
		display: -webkit-box;
 		display: -ms-flexbox;
 		display: flex;
 		-webkit-box-pack: justify;
 		-ms-flex-pack: justify;
        justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		
			a{
				&:first-child{
					display: block;
					width: 150px;
					
					@include min1366{
						width: 100px;
					}
				}
			}
		@include min1366{
			padding: 1em;
		}
		
	}
	//.toggle
	.toggle,.toggle span{
		display: inline-block;
		transition: all 0.4s;
		box-sizing: border-box;
	}
	.toggle{
		display: none;
		position: relative;
		width: 28px;
		height: 20px;
		
		@include min1366{
			display: block;
		}
		
		span{
			position: absolute;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: $main;
			transition: 0.35s ease-in-out;
			-webkit-transition: 0.35s ease-in-out;
			-moz-transition: 0.35s ease-in-out;
			
			&:nth-child(1){
				top: 0;
			}
			&:nth-child(2){
				top: 8px;
			}
			&:nth-child(3){
				bottom: 0;
				transition: all 0.2s;
			}
		}
		
		&.active{
			top: -4px;
			
			span{
				&:nth-child(1){
					top: 13px;
					transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
   					-moz-transform: rotate(-45deg);
				}
				&:nth-child(2){
					top: 13px;
    				-webkit-transform: rotate(45deg);
    				-moz-transform: rotate(45deg);
    				transform: rotate(45deg);
				}
				&:nth-child(3){
					top: 13px;
    				-webkit-transform: rotate(45deg);
    				-moz-transform: rotate(45deg);
    				transform: rotate(45deg);
					opacity: 0;
				}
			}
		}
	}//.toggle
	//.menu
	.menu{
		display: block;
		font-size: 1.6rem;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		
		@include min1366{
			display: none;
			height: -webkit-calc(100vh - 50px);
			height: calc(100vh - 50px);
			background-color: $main;
			padding-top: 50px;
			overflow: scroll;
		}
		@include sp_540{
			padding-top: 0;
		}
		
		.index{ //.index
		    margin-left: 5px;
			border-left: 1px solid $main;
			height: 93px;
			margin-bottom: 40px;
			
			@include min1366{
				border-left: 1px solid #fff;
				margin-left: 5px;
				height: 135px;
				margin-bottom: 0;
			}
			@include tab{
				margin-left: 24px;
			}
			@include sp_540{
				height: 123px;
			}
			
		li{
			padding: 0;
			
			&:last-child{
				a{
					background-position: -1% 17px;
					
					@include min1366{
						background-position: -1% 24.7px;
					}
				}
			}
		}
			a{
				background-image: url("../img/border_head_pc.png");
				background-repeat: no-repeat;
				background-position: -1% 50%;
				background-size: 18px;
				font-size: 1.3rem;
				font-weight: bold;
				
				@include min1366{
					font-size: 1.8rem;
					background-image: url("../img/border_head.png");
				}
				@include sp_540{
					font-size: 1.6rem;
					font-weight: 500;
					padding-top: 1em;padding-bottom: 1em;padding-left: 1.3em;
				}
				
			}
		}// /.index
		
		li{
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			
			@include min1366{
				padding: 14px;
				max-width: 400px;
    			margin: 0 auto;
			}
			
			&.under{
				margin-bottom: 20px;
				
				@include min1366{
					margin-bottom: 0;
					margin: 30px auto;
				}
				@include sp_415{
					margin: 10px auto;
				}
			}
			
		}
		a{
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			display: block;
			padding: 12px 12px 12px 21px;
			width: 100%;
			color: $main;
			transition: all ease 0.3s;
			
			@include min1366{
				color: #fff;
				padding: 1em;
			}
			@include sp_540{
				padding-bottom: 0.5em;
			}
			
			&.title{
				font-weight: bold;
				font-size: 1.6rem;
				
				@include pc{
					padding-left: 0;
				}
				@include min1366{
				font-size: 2rem;
				}
				@include tab_835{
					padding-left: 0;
				}
			}
			
				&:hover{
					color: #006251;
				}
		}
		
	.contact{ //.contact
	display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: $Yellow;
    border: 2px solid #049900;
    font-weight: bold;
    text-align: center;
    padding: 0;
    line-height: 30px;
    border-radius: 16px;
	font-size: 1.4rem;
		
		@include min1366{
			line-height: 50px;
    		border-radius: 26px;
			color: $main;
			font-size: 2rem;
		}
		
		&:hover{
			background-color: $main;
			color: $Yellow;
		}
	} // /.contact
		
	p{
		font-size: 1.2rem;
		color: $main;
		padding-top: 0.4em;
		text-align: center;
		font-weight: bold;
		
		@include tab{
			color: #fff;
			font-size: 1.4rem;
		}
	}
	} // /.menu
	
	
} // /header


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

.contents{
	width: 100%;
	border-left: 2px solid #049900;
	
	@include min1366{
		border: none;
	}
}

.hero{ //.hero
	background-color: $main;
	min-width: 1250px;
	padding: 6em 0;
	background-image: url("../img/hero_top.png"),url("../img/hero_under.png");
	background-repeat: no-repeat;
	background-position: top right,bottom right;
	background-size: 300px,280px;
	overflow-x: hidden;
	
	@include min1366{
		margin-top: -72px;/* ページ内リンク移動場所変更  */
	}
	
	@include pc_1024{
		min-width: 100%;
		background-size: 200px,180px;
	}
	@include tab{
		background-image: none;
		padding: 1.5em 0 4em 0;
	}
	@include sp_415{
		padding: 0.5em 0 4em 0;
	}

	
	.sp{
	display: none;
		
		@include tab{
			display: block;
		}
	}
	
	
	.wrap{ //.wrap
		display: block;
		margin: 0 auto;
		width: calc(100% - 250px);
		width: -webkit-calc(100% - 250px);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		max-width: 1100px;
		
		@include pc_1113{
		width: calc(100% - 80px);
		width: -webkit-calc(100% - 80px);
		}
		@include pc_1024{
		width: calc(100% - 250px);
		width: -webkit-calc(100% - 250px);
		min-width: 82%;
		}
		@include tab_835{
			min-width: 91%;
		}
		@include tab{
			min-width: 90%;
		}
		@include sp_540{
			display: block;
		}
		
		.left{ //.left
			max-width: 460px;
			margin-right: 6px;
			padding: 28px 0 0 29px;
			background-image: url("../img/hero_pencil.png");
			background-repeat: no-repeat;
			background-size: 34px;
    		background-position: top 0px left;
			position: relative;
    		left: -24px;
			
			@include min1366{
				margin-right: 75px;
				position: static;left: 0;
			}
			@include pc_1024{
				margin-right: 25px;
				max-width: 380px;
			}
			@include tab{
				max-width: 100%;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				padding-left: 20px;
				background-size: 25px;
				background-position: top 8px left;
			}
			@include sp_540{
				padding: 45px 0 0 29px;
				background-position: top 27px left 7px;
			}
			
			h1{
			font-size: 3.4rem;
			color: #fff;
			line-height: 1.5;
			margin-bottom: 15px;
			letter-spacing: 3px;
				
			@include pc_1024{
				font-size: 3rem;
			}
			@include tab{
				font-size: 2.5rem;
			}
			@include sp_415{
				line-height: 1.6;
				font-size: 2.5rem;
			}
			
				
				span{
					color: $Yellow;
				}
				.sp{
					display: none;
					
					@include sp_415{
						display: block;
					}
				}
				_:lang(x)::-moz-placeholder, .sp {
			@include tab{
			display: none;
			}
			}
			}
			p{
			color: #fff;
			font-size: 1.6rem;
			margin-bottom: 25px;
			font-weight: 500;
				@include sp_415{
					font-size: 1.5rem;
					line-height: 1.8;
				}
			}
			a{
				max-width: 260px;
				display: block;
				background-color: $Yellow;
				color: $main;
				text-align: center;
				line-height: 50px;
				border-radius: 25px;
				font-weight: bold;
				transition: all ease 0.6s;
				
				@include sp_415{
					width: 100%;
					max-width: 100%;
				}
				
				&:hover{
					background-color: #fff;
					color: $main;
				}
			}
			.sp{
				display: none;
				@include sp_540{
					display: block;
					position: relative;
					left: 52px;
					margin: 26px 0;
				}
				@include sp_415{
					width: 360px;
    				left: 14px;
					margin: 10px 0 26px 0;
				}
				@include sp_375{
					width: 340px;
    				left: -4px;
					margin: 10px 0 26px 0;
				}
			}

		} // /.left
		
		.right{ //.right
			width: 450px;
			min-width: 350px;
			
			@include pc_1024{
				width: 380px;
			}
			@include tab{
				min-width: 300px;
				margin-right: 15px;
				position: relative;
			}
			.pc{
				@include sp_540{
					display: none;
				}
			}
			
			img{
				@include tab{
					position: absolute;
					top: 50%;
					-webkit-transform: translateY(-50%);
					-ms-transform: translateY(-50%);
					transform: translateY(-50%);
				}
			}
		} // /.right
		
		
	} // /.wrap
	
	
} // /.hero

/* section  */
section{
	padding: 110px 0;
	
	@include tab{
	padding: 80px 0;
	}
}
/* /section  */

/* maintitle  */
.maintitle{
	border-bottom: 2px solid $main;
	margin-bottom: 80px;
	
	@include sp_415{
		margin-right: 20px;
		margin-bottom: 55px;
	}
	
	h2{
		font-size: 2.2rem;
		font-weight: bold;
		padding-left: 100px;
		letter-spacing: 2px;
		@include tab_835{
			padding-left: 40px;
			font-size: 2rem;
		}
		@include sp_415{
			padding-left: 20px;
		}
		
		p{
			color: $main;
			@include tab{
				padding-bottom: 4px;
			}
		}
		img{
			display: block;
			float: right;
			padding-bottom: 10px;
		}
	}
}
/* /maintitle  */


/*  sectionm_about  */

.about{ //.about
	background-color: $back_gray;
	@include min1366{
		padding: 110px 0 !important;
	}
	@include tab{
		padding: 80px 0 !important;
	}
	
	
	.titleBox{
		background-image: url("../img/saiten_kun.png");
		background-repeat: no-repeat;
		background-size: 150px;
    	background-position: top 55px left 44.2%;
		padding-bottom: 1px;
		
		@include pc_1024{
			background-size: 100px;
			background-position: top 43px left 43%;
		}
		@include tab{
			background-size: 81px;
			background-position: top 36px left 43%;
		}
		@include sp_540{
			background-position: top 36px left 65%;
		}
		@include sp_415{
			background-position: top 24px left 71%;
		}
	}
	
	.maintitle{ //.maintitle
		max-width: 40%;
		
		@include tab{
			max-width: 40%;
		}
		@include sp_540{
			max-width: 57%;
		}
	} // /.maintitle
	
	.wrap{ //.wrap
		max-width: 1162px;
		margin: 0 auto;
    	width: 85%;
		@include tab_835{
			width: 95%;
		}
		@include tab{
		    max-width: 100%;
			width: 100%;
		}
		
		.cont{ //.cont
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			position: relative;
			margin-bottom: 80px;
			min-width: 100%;
			
			@include pc_1024{
				min-width: 100%;
			}
			@include tab{
				flex-direction: column-reverse;
				background-color: #fff;
				padding-bottom: 60px;
			}
			@include sp_415{
				margin-bottom: 60px;
			}
			
			&:first-child{
				.txtimg{
					width: 46%;
					object-fit: contain;
					height: auto;
					@include pc_1113{
						height: 29vw;
					}
					@include pc_1024{
						width: 48%;
					}
					@include tab_835{
						height: 40vw;
						width: 48%;
					}
					@include tab{
					width: 100% !important;
					max-width: 500px !important;
					margin: 0 auto;
					height: 100% !important;
					}
					@include sp_415{
						width: 85% !important;
					}
				}
				
				/* safariのみ  */
				_:lang(x)+_:-webkit-full-screen-document, .txtimg {
					height: 29vw;
					@include pc_1600{
						height: 22vw;
					}
					@include pc_1113{
					height: 29vw;
					}
					@include tab_835{
						height: 40vw;
					}
				}
				
				
				.second{
				width: 45%;
				object-fit: contain;
				height: auto;
				@include pc_1113{
					height: 29vw;
				}
				@include pc_1024{
					width: 48%;
				}
				@include tab_835{
					height: 40vw;
				}
			}
			_:lang(x)+_:-webkit-full-screen-document, .second {
					height: 29vw;
					@include pc_1600{
						height: 22vw;
					}
					@include pc_1113{
					height: 29vw;
					}
					@include tab_835{
						height: 40vw;
					}
				}
			
			.third{
				width: 45%;
				object-fit: contain;
				height: auto;
				@include pc_1113{
					height: 29vw;
				}
				@include tab_835{
					height: 40vw;
				}
				@include tab{
					width: auto;
				}
				@include sp_415{
					width: 90% !important;
				}
				@include sp_320{
					height: 100% !important;
				}
			}
			_:lang(x)+_:-webkit-full-screen-document, .third {
					height: 29vw;
					@include pc_1600{
						height: 22vw;
					}
					@include pc_1113{
					height: 29vw;
					}
					@include tab_835{
						height: 40vw;
					}
			}
			}
			
			

			&:last-child{
				@include sp_415{
					margin-bottom: 0;
				}
				
			}
			
			img{
				height: auto;
				width: 53%;
    			max-width: 600px;
				z-index: 9999;
				
				@include pc_1024{
					max-width: 400px;
				}
				@include tab{
					max-width: 500px;
					width: 100%;
					margin: 0 auto;
				}
				@include sp_415{
					width: 85%;
				}
				&.pc{
					@include sp_415{
					display: none;
				}
					}
					&.sp{
						display: none;
						@include sp_415{
							display: block;
						}
					}
				
			}
		} // /.cont
		.details{ //.details
			width: 50%;
			background-color: #fff;
			padding: 50px;
			position: absolute;
			right: 0; top: 50%;
			-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
            transform: translateY(-50%);
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			
			@include tab_835{
				width: 47%;
			}
			@include tab{
			right: 0; top: 0; position: static;
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
        	transform: translateY(0);
			max-width: 100%;
			width: 100%;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			padding-bottom: 30px;
			}
			@include sp_415{
				padding: 50px 30px;padding-bottom: 25px;
			}
			
			img{
				max-width: 110px;
				position: absolute;
				top: -20px;
			}
			&.last{
				img{
					height: 32.8px;
					width: auto;
				}
			}
			h3{
				font-size: 2.5rem;
    			line-height: 1.6;
				color: $main;
				margin-bottom: 15px;
				letter-spacing: 2px;
			}
			h4{
				line-height: 1.6;
				margin-bottom: 15px;
			}
			p{
				font-size: 1.4rem;
				font-weight: 500;
				line-height: 1.8;
				span{
					font-size: 1.2rem;
				}
			}
			
		} // /.details
		#cont02{ // #cont02
			.cont{ //.cont
				-webkit-box-orient: horizontal;
				-webkit-box-direction: reverse;
				-ms-flex-flow: row-reverse;
				flex-flow: row-reverse;
				
				@include tab{
					flex-direction: column-reverse;
				}
				
				br{
					@include tab{
						display: none;
					}
				}
				
				.details{
					left: 0;
				}
			} // /.cont
				
				
			} // /#cont02
	} // /.wrap
} // /.about

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

/*  sectionm_cooperation  */
.cooperation{ //.cooperation
	background-color: $main;
	
/* maintitle  */
.maintitle{
	border-bottom: 2px solid #fff;
	max-width: 740px;
	
	@include tab_835{
		max-width: 510px;
	}
	
	h2{
		p{
			color: #fff;
		}
	}
}
/* /maintitle  */
	
	.wrap{ //.wrap
	max-width: 1100px;
	width: 85%;
    display: block;
    margin: 0 auto;
	background-image: url("../img/Elearning.png"),url("../img/saiten_kun_02.png");
	background-repeat: no-repeat;
	background-position: top 37% left 0,top 33% right 0px;
	background-size: 80px, 90px;
		
	@include pc_1024{
		width: 90%;
		background-size: 60px, 70px;
		background-position: top 40% left 0,top 39% right 0px;
	}
	@include tab_835{
		background-image: none;
	}
	} // /.wrap
	
	.cont{ //.cont
	width: 79%;
    margin: 0 auto;
    background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
		
	@include tab_835{
		width: 100%;
	}
	@include sp_540{
		display: block;
	}
	} // /.cont
	
	h3{
		font-size: 2.5rem;
		color: $main;
		line-height: 1.6;
		margin-bottom: 15px;
		@include sp_415{
			font-size: 2rem;
		}
	}
	.left{ //.left
		width: 60%;
		padding: 50px 40px;
    	-webkit-box-sizing: border-box;
		box-sizing: border-box;
		
		@include sp_540{
			width: 100%;
		}
		@include sp_415{
			padding: 40px 30px;
		}
		br.pc{
			@include sp_415{
				display: none;
			}	
		}
		p{
			font-size: 1.4rem;
			font-weight: 500;
			line-height: 1.8;
			margin-bottom: 1em;
		}
	} // /.left
	p.Yellowline{
		background-color: $Yellow;
		padding: 5px 10px;
		color: $main;
		font-weight: bold;
		font-size: 1.3rem;
	}
	.right{ //.right
		width: 40%;
		background-color: $Yellow;
		padding: 40px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		@include tab_835{
		padding: 30px;	
		}
		@include tab{
			padding: 40px;
		}
		@include sp_540{
			width: 100%;
		}
		@include sp_415{
			padding: 40px 30px;
		}
		
		p{
			font-size: 1.3rem;
			font-weight: bold;
			color: $main;
			margin-bottom: 0.5em;
		}
		.basic{ //.basic
			background-color: #fff;
			border-radius: 10px;
			
			div{
				padding: 30px 35px 10px 35px;
				@include sp_415{
					padding: 30px 25px 10px 25px;
				}
				
				a{
					display: block;
					margin: 1em auto;
				}
			}
			p.Yellowline{
				max-width: 120px;
				margin-bottom: 0.7em;
			}
		} // /.basic
		.link{
			display: block;
			background-color: $main;
			padding: 0.6em;
			border-radius: 0 0 10px 10px;
			transition: all ease 0.3s;
			p{
				color: #fff;
				text-align: center;
				margin-bottom: 0;
				@include sp_415{
					font-size: 1.5rem;
				}
				
				&::after{
					content: '>';
					padding-left: 5px;
					font-size: 1.7rem;
				}
			}
			
			&:hover{
				background-color: #006251;
				p{
				color: $Yellow;
				}
			}
		}
	} // /.right
	.leftimg,.rightimg{
		position: absolute;
		width: 90px;
		height: auto;
		
		@include pc_1024{
			width: 80px;
		}
		@include tab_835{
			display: none;
		}
	}
	.leftimg{
	top: 50%;
    left: -9.5%;
		
	@include pc_1024{
		left: -10%;
	}
	}
	.rightimg{
	top: 50%;
    right: -9.5%;
		
	@include pc_1024{
		right: -10%;
	}
	}
	
} // /.cooperation

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

/*  sectionm_process  */
.process{ // .process
	background-color: $back_gray;
	
	.maintitle{
		    max-width: 555px;
		
		@include tab_835{
			max-width: 360px;
		}
		@include sp_415{
			max-width: 250px;
		}
	}
	.wrap{
		max-width: 1200px;
		width: 75%;
		margin: 0 auto;
		
		@include sp_540{
			width: 100%;
		}
	}
	.cont{
		background-image: url("../img/process_border.png");
		background-repeat: no-repeat;
		background-position: top left;
		background-size: auto 100%;
		
		@include tab{
			background-size: 35px 100%;
		}
		@include sp_540{
			margin-right: 20px;
			background-size: 30px 100%;
		}
	}
	ol{
		list-style: none;
		padding-left: 55px;
		
		@include sp_540{
			padding-left: 45px;
		}
	}
	li{
		margin-bottom: 1em;
		
		div{
			background-color: $main;
			padding: 1.5em;
			
			h4{
				color: $Yellow;
				padding-bottom: 10px;
				font-size: 2rem;
				@include pc_1024{
					font-size: 1.8rem;
				}
				@include tab{
					line-height: 1.5;
				}
			}
			p{
				color: #fff;
				font-size: 1.6rem;
				padding-top: 6px;
				border-top: 1px solid #fff;
				font-weight: 500;
				span{
					font-size: 1.3rem;
				}
				@include pc_1024{
					font-size: 1.4rem;
				}
			}
		}
	}
} // /.process

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

/*  sectionm_change  */

.change{ //.change
	background-color: $main;
	
	@include sp_540{
		padding-bottom: 80px;
		background-image: url("../img/change_sp.png");
		background-repeat: no-repeat;
		background-size: 90%;
		background-position: bottom center;
	}
	
	.wrap{
		width: 50%;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		border: 2px solid $Yellow;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		max-width: 600px;
		
		@include pc_1024{
			width: 100%;
		}
		@include sp_540{
			width: 90%;
		}
	}
	.left{ //.left
		background-color: $Yellow;
		color: $main;
		position: relative;
		width: 60%;
		min-width: 240px;
 		padding: 20px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		
		@include sp_540{
			min-width: 162px;width: auto;
		}
		
		h3{
			font-size: 2.8rem;
			position: absolute;
			top: 50%;
			-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			line-height: 1.6;
			
			@include sp_540{
				font-size: 2rem;
			}
		}
	} // /.left
	.right{ //.right
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 40px 40px 70px 40px;
		@include sp_540{
			padding: 20px;
		}
		
		p{
		color: $Yellow;
		font-size: 2.3rem;
		font-weight: bold;
			
			@include sp_540{
				font-size: 1.4rem;
				line-height: 1.6;
			}
		}
		
		.img{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
			
			img{ //img
			position: absolute;
			bottom: 0;
				
			@include sp_540{
				display: none;
			}
				
			&:first-child{
				height: 50px;
				width: auto;
				bottom: -70px;
			}
			&:nth-child(2){
				width: auto;
    			height: 20px;
				bottom: -60px;
    			left: 40%;
    			-webkit-transform: translateX(-40%);
    			-ms-transform: translateX(-40%);
           		transform: translateX(-40%);
			}
			&:last-child{
				height: 40px;
				width: auto;
				bottom: -70px;
				right: 0;
			}	
			} // /img
			
		}
	} // /.right
	
} // /.change

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

/*  contactForm  */
.contactForm{ //.contactForm
	background-color: $Yellow;
	padding: 80px;
	background-image: url("../img/contactform_01.png"),url("../img/contactform_02.png"),url("../img/contactform_03.png"),url("../img/contactform_04.png");
	background-repeat: no-repeat;
	background-position: bottom left 70px,bottom left 250px,bottom right 280px,bottom right 80px;
	background-size: 110px,120px,110px,110px;
	
	@include pc_1024{
		background-position: bottom left 70px,bottom left 220px,bottom right 223px,bottom right 80px;
	}
	@include tab_835{
		background-size: 55px,60px,55px,60px;
		padding: 50px 50px 100px 50px;
		background-position: bottom left 70px,bottom left 250px,bottom right 253px,bottom right 80px;
	}
	@include sp_540{
		background-position: bottom left 70px,bottom left 171px,bottom right 193px,bottom right 80px;
	}
	@include sp_415{
		background-size: 45px,50px,45px,45px;
		background-position: bottom left 7%,bottom left 35%,bottom right 35%,bottom right 7%;
	}
	@include sp_320{
	padding: 40px 20px 70px 20px;
    background-size: 35px,40px,35px,35px;
	}
	
	.wrap{
		width: 90%;
		margin: 0 auto;
		
		@include sp_540{
			width: 100%;
		}
	}
	.cont{
		width: 280px;
		margin: 0 auto;
		
		@include sp_320{
			width: 100%;
		}
	}
	p{
		font-weight: bold;
		text-align: center;
		color: $main;
		padding-bottom: 5px;
	}
	a{
		display: block;
		line-height: 45px;
		text-align: center;
		color: $main;
		font-weight: bold;
		border: 2px solid $main;
		background-color: #fff;
		border-radius: 25px;
		transition: all ease 0.3s;
		
		&:hover{
			background-color: $main;
			color: #fff;
		}
	}
} // /.contactForm


/* コピーライト  */
.copy{ //.copy
	width: 100%;
	padding: 5px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background-color: $main;
	text-align: center;
	
	small{
	font-size: 1.1rem;
	color: #fff;
	padding: 5px;
}
} // /.copy



#allcon{
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	@include min1366{
		padding-top: 50px;
	}
}
.allcon_link{
	@include min1366{
		padding-top: 50px;
	}
}
#cont03{
	.cont{
		margin-bottom: 0;
	}
}


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

/* fadein  */
.fadein{
	@include pc_1367{
	opacity: 0;
	-webkit-transform: translateY(20px);
	-ms-transform: translateY(20px);
	transform: translateY(20px);
	transition: all 1s;
	}
	
}
.fadeinX{
	@include pc_1367{
	opacity: 0;
	-webkit-transform: translateX(-20px);
	-ms-transform: translateX(-20px);
	transform: translateX(-20px);
	transition: all 1s;	
	}
}
/* loading  */
#loading{
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: $main;
	position: fixed;
    top: 0;left: 0;
    z-index: 9999999999999999;
	
	background-image: url("../img/saiten_kun_02.png");
	background-repeat: no-repeat;
	background-position: top 47% left 50%;
    background-size: 55px;
	
	
	.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: absolute;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
	top: 40%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-40%);
	-ms-transform: translateX(-50%) translateY(-40%);
 	transform: translateX(-50%) translateY(-40%);
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
	
	
}
.loaded{
	opacity: 0;
	visibility: hidden;
}


@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}



/*  The MIT License (MIT)

Copyright (c) 2014 Luke Haas

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.  */