@charset "UTF-8";

/* メイン画像 */
.mainimg {
	
	height: auto;
	padding-top: 19%;
	background-image: url('../img/under_mainimage.png');
	background-position: center center;

}

/* WORK */
#work .inner {
	
	position: relative;
	padding-top: 5em;

}

#work h2 {
	
	position: relative;
	width: 11.5em;
	margin: 0 auto;
	margin-bottom: 10.5em;
	overflow: hidden;

}

#work h2:after {

	position: absolute;
	top: 0;
	right: 0;
	content: "";
	width:  100%;
	height: 100%;
	background: #fff;
	transition: all 1.5s;

}

#work h2.active:after {

	width: 0;

}

#work h2 img {

	width: 100%;

}

#work h3 {
	
	position: relative;
	margin-bottom: 1.5em;
	padding-left: 2.2em;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	color: #333366;
	letter-spacing: 0.15em;
	
}

#work h3 .chk {

	position: absolute;
	top: 0.5em;
	left: 0;
	width: 1.5em;

}

#work p {
	
	margin-bottom: 4em;
	padding-left: 4.5em;
	font-size: 16.5px;
	line-height: 1.8;
	letter-spacing: 0.15em;

}

#work .truck {

	position: absolute;
	top: 17em;
	right: 0;
	width: 33em;
	
	opacity: 0;
	transition: all 2.5s;

}

#work .truck.active {

	opacity: 1;

}

.work_bg {
	
	height: auto;
	margin-bottom: 7.5em;
	padding-top: 36.5%;
	background-image: url('../img/work_bg.jpg');
	background-size: cover;
	background-position: center center;

}



/* 中サイズ */
@media only screen and (max-width: 1366px) {

	/* WORK */
	#work .inner {
		
		padding-top: 4em;
		
	}
	
	#work h2 {
		
		width: 9.5em;
		margin: 0 auto;
		margin-bottom: 8em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1.2em;
		padding-left: 2em;
		font-size: 21px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.5em;
		
	}
	
	#work p {
		
		margin-bottom: 3.5em;
		padding-left: 3.8em;
		font-size: 12.5px;
		line-height: 1.8;
		letter-spacing: 0.15em;
		
	}
	
	#work .truck {
		
		top: 12.5em;
		right: 0;
		width: 28em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 6em;
		padding-top: 36.5%;
		
	}

}



/* iPadPro */
@media only screen and (max-width: 1024px) {

	/* WORK */
	#work .inner {
		
		padding-top: 3.5em;
		
	}
	
	#work h2 {
		
		width: 8.5em;
		margin: 0 auto;
		margin-bottom: 7.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 2em;
		font-size: 17px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.5em;
		
	}
	
	#work p {
		
		margin-bottom: 3.2em;
		padding-left: 3.2em;
		font-size: 11px;
		line-height: 1.8;
		letter-spacing: 0.08em;
		
	}
	
	#work .truck {
		
		top: 12em;
		right: 0;
		width: 23.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 5em;
		padding-top: 36.5%;
		
	}

}



/* AndoroidのLの横 */
@media only screen and (max-width: 854px) {

	/* WORK */
	#work .inner {
		
		padding-top: 3.5em;
		
	}
	
	#work h2 {
		
		width: 8.5em;
		margin: 0 auto;
		margin-bottom: 7.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 2em;
		font-size: 17px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.5em;
		
	}
	
	#work p {
		
		margin-bottom: 3.2em;
		padding-left: 3.2em;
		font-size: 11px;
		line-height: 1.8;
		letter-spacing: 0.08em;
		
	}
	
	#work .truck {
		
		top: 12em;
		right: 0;
		width: 23.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 5em;
		padding-top: 36.5%;
		
	}

}



/* iPad */
@media only screen and (max-width: 768px) {

	/* WORK */
	#work .inner {
		
		padding-top: 3.5em;
		
	}
	
	#work h2 {
		
		width: 8.5em;
		margin: 0 auto;
		margin-bottom: 7.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 2em;
		font-size: 17px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.5em;
		
	}
	
	#work p {
		
		margin-bottom: 3.2em;
		padding-left: 3.2em;
		font-size: 11px;
		line-height: 1.8;
		letter-spacing: 0.08em;
		
	}
	
	#work .truck {
		
		top: 12em;
		right: 0;
		width: 23.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 4.5em;
		padding-top: 36.5%;
		
	}

}



/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {

	/* WORK */
	#work .inner {
		
		padding-top: 3.5em;
		
	}
	
	#work h2 {
		
		width: 8.5em;
		margin: 0 auto;
		margin-bottom: 7.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 2em;
		font-size: 17px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.5em;
		
	}
	
	#work p {
		
		margin-bottom: 3.2em;
		padding-left: 3.2em;
		font-size: 11px;
		line-height: 1.8;
		letter-spacing: 0.08em;
		
	}
	
	#work .truck {
		
		top: 12em;
		right: 0;
		width: 22.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 4.5em;
		padding-top: 36.5%;
		
	}

}



/* iPhone8の横 */
@media only screen and (max-width: 667px) {

	/* WORK */
	#work .inner {
		
		padding-top: 3em;
		
	}
	
	#work h2 {
		
		width: 8em;
		margin: 0 auto;
		margin-bottom: 6.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 2em;
		font-size: 16px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.3em;
		
	}
	
	#work p {
		
		margin-bottom: 3em;
		padding-left: 3.2em;
		font-size: 10.5px;
		line-height: 1.8;
		letter-spacing: 0.07em;
		
	}
	
	#work .truck {
		
		top: 11.5em;
		right: 0;
		width: 18em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 4em;
		padding-top: 36.5%;
		
	}

}



/* iPhone5の横 */
@media only screen and (max-width: 568px) {

	/* WORK */
	#work .inner {
		
		padding-top: 3em;
		
	}
	
	#work h2 {
		
		width: 7.5em;
		margin: 0 auto;
		margin-bottom: 5.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 2em;
		font-size: 16px;
		letter-spacing: 0.12em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.3em;
		
	}
	
	#work p {
		
		margin-bottom: 2.5em;
		padding-left: 3.2em;
		font-size: 10.5px;
		line-height: 1.8;
		letter-spacing: 0.07em;
		
	}
	
	#work .truck {
		
		top: 12em;
		right: 0;
		width: 15.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 3em;
		padding-top: 36.5%;
		
	}

}



/* AndoroidのL */
@media only screen and (max-width: 480px) {

	/* WORK */
	#work .inner {
		
		padding-top: 2.5em;
		
	}
	
	#work h2 {
		
		width: 7em;
		margin: 0 auto;
		margin-bottom: 5.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 1.8em;
		font-size: 15px;
		letter-spacing: 0.1em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.2em;
		
	}
	
	#work p {
		
		margin-bottom: 2.5em;
		padding-left: 1em;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: 0.1em;
		
	}
	
	#work .truck {
		
		top: 7.5em;
		right: 0;
		width: 14.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 3em;
		padding-top: 36.5%;
		
	}

}



/* iPhonePlus */
@media only screen and (max-width: 414px) {

	/* WORK */
	#work .inner {
		
		padding-top: 2.5em;
		
	}
	
	#work h2 {
		
		width: 7em;
		margin: 0 auto;
		margin-bottom: 5.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 1.8em;
		font-size: 15px;
		letter-spacing: 0.1em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.2em;
		
	}
	
	#work p {
		
		margin-bottom: 2em;
		padding-left: 0;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: 0.1em;
		
	}
	
	#work .truck {
		
		top: 8em;
		right: 0;
		width: 13.5em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 2.5em;
		padding-top: 36.5%;
		
	}

}



/* iPhone8 */
@media only screen and (max-width: 375px) {

	/* WORK */
	#work .inner {
		
		padding-top: 2.5em;
		
	}
	
	#work h2 {
		
		width: 6.5em;
		margin: 0 auto;
		margin-bottom: 5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 1em;
		padding-left: 1.8em;
		font-size: 15px;
		letter-spacing: 0.1em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1.2em;
		
	}
	
	#work p {
		
		margin-bottom: 2em;
		padding-left: 0;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: 0.15em;
		
	}
	
	#work .truck {
		
		top: 8em;
		right: 0;
		width: 13em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 2.5em;
		padding-top: 36.5%;
		
	}

}



/* AndoroidのM */
@media only screen and (max-width: 360px) {



}



/* iPhone5 */
@media only screen and (max-width: 320px) {

	/* WORK */
	#work .inner {
		
		padding-top: 2em;
		
	}
	
	#work h2 {
		
		width: 6em;
		margin: 0 auto;
		margin-bottom: 4.5em;
		
	}
	
	#work h3 {
		
		margin-bottom: 0.8em;
		padding-left: 1.8em;
		font-size: 14.5px;
		letter-spacing: 0.1em;
		
	}
	
	#work h3 .chk {
		
		top: 0.5em;
		left: 0;
		width: 1em;
		
	}
	
	#work p {
		
		margin-bottom: 2em;
		padding-left: 0;
		font-size: 11.5px;
		line-height: 1.8;
		letter-spacing: 0.1em;
		
	}
	
	#work .truck {
		
		top: 7em;
		right: 0;
		width: 12em;
		
	}
	
	.work_bg {
		
		height: auto;
		margin-bottom: 2em;
		padding-top: 36.5%;
		
	}

}