@charset "utf-8";



/*
 * #mainview
 */

/* @sp */
@media screen and (max-width: 772px) {
	#mainview {
		
	}
		#mainview > .wrap {
			padding-top: 23.733%;
		}
			#mainview .title {
				width: 84%;
				margin-left: 8%;
				padding-top: 10.666%;
				background-image: url(../img/mainview_title.png);
				background-position: left
			}
			#mainview .description {
				padding: 0 8%;
				padding-top: 11%;
				font-size: 1.5em;
				font-size: 4.0vw;
				line-height: 2.2;
				text-align: justify;
			}
			#mainview .image {
				display: none;
				margin-top: 14%;
				padding-top: 118.133%;
				background-image: url(../img/mainview_img_sp.png);	
			}
}

/* @monitor */
@media screen and (min-width: 773px) {
	#mainview {
		max-width: 1180px;
		margin: 0 auto;
	}
		#mainview > .wrap {
			padding-top: 19%;
		}
			#mainview .title {
				height: 40px;
				background-image: url(../img/mainview_title.png);	
			}
			#mainview .description {
				padding-top: 4.5%;
				font-size: 1.8em;
				line-height: 2.0;
				text-align: center;
			}
			#mainview .image {
				margin-top: 5.2%;
				padding-top: 56.356%;
				background-image: url(../img/mainview_img.png);	
			}
}



/*
 * #article
 */

/* @sp */
@media screen and (max-width: 772px) {
	#article {

	}
}

/* @monitor */
@media screen and (min-width: 773px) {
	#article {
		max-width: 1180px;
		margin: 0 auto;
	}
}



/*
 * section
 */

/* @sp */
@media screen and (max-width: 772px) {
	section {
		margin-top: 15%;
		padding-top: 17%;
	}
		section > .wrap {
			position: relative;
		}
			section .article {
				
			}
				section .background {
					display: none;
				}
				section .article > .wrap {
					padding: 0 8%;
				}
					section .title {

					}
						section .title .en {
							padding-top: 53.968%;
						}
						section .title .ja {
							display: block;
							margin-top: 9%;
							font-size: 2.2em;
							font-size: 5.867vw;
							font-weight: bold;
							line-height: 1.27;
							letter-spacing: -0.04em;
						}
					section .article .lead {
						margin-top: 9.2%;
						font-size: 1.8em;
						font-size: 4.8vw;
						line-height: 1.77;
						text-align: justify;
						letter-spacing: -0.04em;
					}
					section .article .description {
						margin-top: 7.4%;
						font-size: 1.3em;
						font-size: 3.467vw;
						line-height: 2.2;
						text-align: justify;
						letter-spacing: -0.02em;
					}
			section .image {
				display: none;
				margin-top: 13.333%;
			}
			section .overview {
				margin-top: 13.333%;
				padding: 12% 8%;
				background-color: #f7f7f7;
			}
				section .overview dt {
					font-size: 2.0em;
					font-size: 5.333vw;
					line-height: 1.1;
				}
				section .overview dt.value {
					padding-top: 8%;
				}
				section .overview dd {
					padding-top: 5%;
				}
					section .overview ul {

					}
						section .overview li {
							padding-left: 1em;
							text-indent: -1em;
							font-size: 1.3em;
							font-size: 3.467vw;
							line-height: 2.0;
							text-align: justify;
							letter-spacing: -0.02em;
						}
}

/* @monitor */
@media screen and (min-width: 773px) {
	section {
		margin-top: 14%;
		padding-top: 3%;
	}
		section > .wrap {
			position: relative;
		}
			section .article {
				position: relative;
				padding-top: 71.186%;
			}
				section .background {
					position: absolute;
					/*left: 14.407%;*/
					left: 50%;
					top: 0;
					bottom: 0;
					display: block;
					width: 71.186%;
					margin-left: -35.593%;
				}
				section .article > .wrap {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					text-align: center;
				}
					section .title {
						position: relative;
					}
						section .title .en {
							padding-top: 17.118%;
							background-position: center;
						}
						section .title .ja {
							display: block;
							margin-top: 1.42%;
							font-size: 2.4em;
							font-weight: bold;
							line-height: 1.1;
						}
					section .article .lead {
						position: relative;
						margin-top: 4.27%;
						font-size: 3.0em;
						line-height: 1.5;
						letter-spacing: -0.04em;
					}
					section .article .description {
						position: relative;
						margin-top: 3.98%;
						font-size: 1.7em;
						line-height: 2;
						letter-spacing: -0.02em;
					}
			section .image {
				margin-top: 10%;
			}
			section .overview {
				margin-top: 10%;
				padding: 6.356% 14.4%;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
			}
				section .overview dt {
					font-size: 2.6em;
					line-height: 1.1;
				}
				section .overview dt.value {
					margin-top: 7.2%;
				}
				section .overview dd {
					padding-top: 3%;
				}
					section .overview ul {

					}
						section .overview li {
							padding-left: 1em;
							text-indent: -1em;
							font-size: 1.6em;
							line-height: 2.125;
						}
}

/* @monitor : small */
@media screen and (min-width: 773px) and (max-width: 872px) {
			section .article {
				padding-top: 600px;
			}
				section .background {
					width: 600px;
					margin-left: -300px;
				}
						section .title .en {
							padding-top: 120px;
						}
}

/* @monitor : medium */
@media screen and (min-width: 873px) and (max-width: 972px) {
			section .article {
				padding-top: 640px;
			}
				section .background {
					width: 640px;
					margin-left: -320px;
				}
						section .title .en {
							padding-top: 132px;
						}
}

/* @monitor : large */
@media screen and (min-width: 973px) and (max-width: 1072px) {
			section .article {
				padding-top: 740px;
			}
				section .background {
					width: 740px;
					margin-left: -370px;
				}
						section .title .en {
							padding-top: 148px;
						}
}

/* @monitor : xlarge */
@media screen and (min-width: 1073px) and (max-width: 1440px) {
			section .article {
				padding-top: 840px;
			}
				section .background {
					width: 840px;
					margin-left: -420px;
				}
						section .title .en {
							padding-top: 202px;
						}
						section .title .ja {
							margin-top: 16px;
						}
					section .article .lead {
						margin-top: 50px;
					}
					section .article .description {
						margin-top: 45px;
					}
}





/*
 * design
 */

/* @sp */
@media screen and (max-width: 772px) {
	section#design {

	}
					section#design .title .en {
						background-image: url(../img/design_title_sp.png);
					}
			section#design .image {
				padding-top: 177.333%;
				background-image: url(../img/design_img_sp.png);
			}
}

/* @monitor */
@media screen and (min-width: 773px) {
	section#design {

	}
					section#design .title .en {
						background-image: url(../img/design_title.png);
					}
			section#design .image {
				padding-top: 56.779%;
				background-image: url(../img/design_img.png);
			}
}





/*
 * agile
 */

/* @sp */
@media screen and (max-width: 772px) {
	section#agile {

	}
					section#agile .title .en {
						background-image: url(../img/agile_title_sp.png);
					}
			section#agile .image {
				padding-top: 149.333%;
				background-image: url(../img/agile_img_sp.png);
			}
}

/* @monitor */
@media screen and (min-width: 773px) {
	section#agile {

	}
					section#agile .title .en {
						background-image: url(../img/agile_title.png);
					}
			section#agile .image {
				padding-top: 49.576%;
				background-image: url(../img/agile_img.png);
			}
}





/*
 * development
 */

/* @sp */
@media screen and (max-width: 772px) {
	section#development {

	}
					section#development .title .en {
						background-image: url(../img/development_title_sp.png);
					}
			section#development .image {
				padding-top: 166.933%;
				background-image: url(../img/development_img_sp.png);
			}
}

/* @monitor */
@media screen and (min-width: 773px) {
	section#development {

	}
					section#development .title .en {
						background-image: url(../img/development_title.png);
					}
			section#development .image {
				padding-top: 75.423%;
				background-image: url(../img/development_img.png);
			}
}