h1 {
	margin: 60px auto 0 0;
	padding: 10px 30px;
	font-size: 24px;
	color: #333333;
	border-radius: 100vh;
	background-image: -webkit-gradient(linear, right top, left top, from(#CCFFCC), to(#00CC00));
	background-image: -webkit-linear-gradient(right, #CCFFCC 0%, #00CC00 100%);
	background-image: linear-gradient(to left, #CCFFCC 0%, #00CC00 100%);
}

h2 {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 5px 60px 5px 30px;
	font-size: 20px;
	color: #333333;
	border-radius: 100vh 0 0 100vh;
	background-image: -webkit-gradient(linear, right top, left top, from(#FFFFFF), to(#FF3333));
	background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FF3333 100%);
	background-image: linear-gradient(to left, #FFFFFF 0%, #FF3333 100%);
}

h2:before {
	position: absolute;
	top: calc(50% - 7px);
	left: 10px;
	width: 14px;
	height: 14px;
	content: '';
	border-radius: 50%;
	background: #ffce08;
}

.job {
	margin: 30px auto 0 10px;

}
.jobbox1 {
	display: flex;
	margin: 10px auto auto 10px;
	box-shadow: 5px 5px #AAAA99;
}
.jobbox1 img {
	width: 300px;
	height: 200px;
	margin: 0;

}
.jobbox2 {
	background: #FFFFFF;
	width: 600px;
}
.jobbox3 {
	display: flex;
	margin: 10px;
}
/*ここからアニメーション*/
.slider {
	-webkit-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;
}
.sliderL {
	font-size: 20px;
	margin-left: 10px;
}
.sliderR {
	min-width: 100px;
	font-size: 20px;
	font-weight:bold;
	text-align: right;
}
.sliderL.show {
	transform: translate(0, 0) !important;
	animation-name: sliderleft;
	animation-duration: 1s;
}
	@keyframes sliderleft {
	from {
		opacity: 0;
		transform: translateX(-1500px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
	}
.sliderR.show {
	transform: translate(0, 0) !important;
	animation-name: sliderright;
	animation-duration: 2s;
}
	@keyframes sliderright {
	from {
		opacity: 0;
		transform: translateX(2000px);
	}
	to {
		opacity: 2;
		transform: translateX(0px);
	}
	}

/*ここまでアニメーション*/

/*ここからボタン*/
.btn {
	/*背景の基点とするためrelativeを指定*/
	position: relative;
	margin: 20px auto auto 30px;
	/*ボタンの形状*/
	display: inline-block;
	width:100%;
	max-width: 250px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	outline: none;
}
.anime.show{
	animation-name: fader;
	animation-duration: 2s;
}
	@keyframes fader {
	from {
	    opacity: 0;
	    transform: translateY(150px);
	}
	to {
	    opacity: 1;
	transform: translateY(0px);
	}
}
/*ボタン内側の設定*/
.btn span {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid #333333;
	border-radius: 100vh;
	/* 重なりを3Dで表示 */
	transform-style: preserve-3d;
	/* アニメーションの設定 数字が少なくなるほど早く回転 */
	transition: 0.5s;
}

/*== くるっと回転（手前に） */

/* 回転前 */
.rotatefront span:nth-child(1) {
	background: #EEEEEE;
	color: #333333;
	transform: rotateX(0deg);/*はじめは回転なし*/
	transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
	transform: rotateX(-90deg);/* X軸に-90度回転 */
}

/* 回転後 */
.rotatefront span:nth-child(2) {
	background: #99CC99;
	color: #333333;
	transform: rotateX(90deg);/*はじめはX軸に90度回転*/
	transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
	transform: rotateX(0deg);/* X軸に0度回転 */
}
/*ここまでボタン*/

@media screen and (max-width: 430px) {
	/* スマホ版で修正すべきとこ */
.job {
	width: 95% !important;
}
.jobbox1 {
	display:flex;
	flex-flow: column;
}
.jobbox1 img {
	width: 80%;
	margin: 0;

}
} /*スマホ*/