@charset "UTF-8";
/*
 * development.css
 *
 */

/* !導入
---------------------------------------------------------- */
.intro {
	width:100%;
	padding:120px 50px 150px 50px;
}
	.intro div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
	}
		.intro div.inner h2 {
			text-align: center;
			margin-bottom: 30px;
		}
			.intro div.inner h2 span {
				display: inline-block;
				font-size:20px;
				font-weight: 700;
				color:#1F286F;
				padding:0.4em 1.4em;
				border:2px solid #E0E6F4;
				border-radius:30px;
			}
		.intro div.inner h3 {
			width:100%;
			font-size:40px;
			font-weight: 700;
			color: #21A6D8;
			text-align: center;
			line-height: 1.6;
			margin-bottom:60px; 
		}
		.intro div.inner p.read {
			text-align: center;
			margin-bottom: 60px;
		}
			.intro div.inner ul.photo {
				width:100%;
				display: flex;
				justify-content: space-between;
			}
				.intro div.inner ul.photo li {
					width:48%;
				}
					.intro div.inner ul.photo li img {
						display: block;
						width:100%;
						border-radius: 12px;
					}

@media screen and (max-width:1039px){
.intro {
	padding:100px 30px 120px 30px;
}
		.intro div.inner h2 {
			margin-bottom: 25px;
		}
			.intro div.inner h2 span {
				font-size:16px;
			}
		.intro div.inner h3 {
			font-size:30px;
			margin-bottom:50px;
		}
		.intro div.inner p.read {
			text-align: left;
			margin-bottom: 60px;
		}
					.intro div.inner ul.photo li img {
						border-radius: 10px;
					}
}

@media screen and (max-width:767px){
.intro {
	padding:80px 25px 100px 25px;
}
		.intro div.inner h2 {
			margin-bottom: 25px;
		}
			.intro div.inner h2 span {
				font-size:14px;
			}
		.intro div.inner h3 {
			font-size:22px;
			margin-bottom:40px; 
		}
		.intro div.inner p.read {
			margin-bottom: 50px;
		}
			.intro div.inner ul.photo {
				max-width:320px;
				flex-wrap: wrap;
				margin: 0 auto;
			}
				.intro div.inner ul.photo li {
					width:100%;
					margin-bottom: 15px;
				}
				.intro div.inner ul.photo li:last-child {
					margin-bottom: 0;
				}
					.intro div.inner ul.photo li img {
						border-radius: 8px;
					}
}

@media screen and (max-width:359px){
			.intro div.inner h2 span {
				font-size:12px;
			}
}

/* !development
---------------------------------------------------------- */
.development1 {
	width:100%;
	padding:0 50px 150px 50px;
}
	.development1 div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
	}
		.development1 div.inner div.left {
			width:40%;
		}
			.development1 div.inner div.left h2 {
				font-size:28px;
				font-weight: 700;
				color: #26353D;
				line-height: 1.6;
				letter-spacing: 0.04em;
				padding-left:0.8em;
				position: relative;
			}
				.development1 div.inner div.left h2:before {
					position: absolute;
					content: "";
					width:3px;
					height: 100%;
					background-color: #21A6D8;
					top:0;
					left:0;
					transform: rotate(20deg);
				}
				.development1 div.inner div.left h2 span {
					font-size:60%;
				}
		.development1 div.inner div.right {
			width:60%;
		}
			.development1 div.inner div.right div.block {
				padding-bottom:50px;
				margin-bottom: 50px;
				border-bottom: 1px dashed #C1C8CF;
			}
			.development1 div.inner div.right div.end {
				padding-bottom:0;
				margin-bottom: 0;
				border-bottom: 0;
			}
			.development1 div.inner div.right .cap1 {
				font-size:20px;
				font-weight: 700;
				color: #21A6D8;
				margin-bottom: 40px;
			}

@media screen and (max-width:1039px){
.development1 {
	padding:0 30px 120px 30px;
}
			.development1 div.inner div.left h2 {
				font-size:23px;
			}
				.development1 div.inner div.left h2 span {
					font-size:54%;
				}
			.development1 div.inner div.right div.block {
				padding-bottom:40px;
				margin-bottom: 40px;
			}
			.development1 div.inner div.right div.end {
				padding-bottom:0;
				margin-bottom: 0;
			}
			.development1 div.inner div.right .cap1 {
				font-size:16px;
			}
}

@media screen and (max-width:767px){
.development1 {
	padding:0 25px 100px 25px;
}
		.development1 div.inner div.left {
			width:100%;
			margin-bottom: 40px;
		}
			.development1 div.inner div.left h2 {
				font-size:20px;
			}
				.development1 div.inner div.left h2:before {
					width:2px;
				}
				.development1 div.inner div.left h2 span {
					font-size:70%;
				}
		.development1 div.inner div.right {
			width:100%;
		}
			.development1 div.inner div.right div.block {
				padding-bottom:30px;
				margin-bottom: 30px;
			}
			.development1 div.inner div.right div.end {
				padding-bottom:0;
				margin-bottom: 0;
			}
			.development1 div.inner div.right .cap1 {
				font-size:15px;
				margin-bottom: 30px;
			}
}