@charset "UTF-8";



/* key --------------------------------------------------------------- */
#key {
	width: 100%;
	height: 100vh;
	text-align: center;
	position: relative;
	}

	#key p {
		display: inline-block;
		writing-mode: vertical-rl;
		text-align: left;

		position: absolute;
		top: calc(50% + 80px);
		left: 50%;
		transform: translate(-50%, -50%);

		background-image: url("../../img/home/key_pencil.png");
		background-position: left bottom 55px;
		background-size: 45px auto;
		}

		#key p span {
			height: 20em;
			margin: 0 45px;
			font-size: 22px;
			line-height: 1;
			letter-spacing: 3px;			
			}
		
		#key p span:first-of-type {
			font-weight: bold;
			margin-top: -1em;
			}

@media(max-width: 1024px){
	#key {
		height: 450px;
		}

		#key p {
			background-position: left bottom 120px;
			background-size: 33px auto;
			}

			#key p span {
				height: 22em;
				margin: 0 33px;
				font-size: 16px;	
				}
	}



/* information --------------------------------------------------------------- */
#information {
	margin: 0 auto 100px auto;
	padding: 50px 0;
	background-color: #ffffff;
	position: relative;
	}

	#information dl {
		width: 450px;
		margin: 0 auto 20px auto;
		overflow: hidden;
		}

	#information dl:last-of-type {
		margin: 0 auto;
		}

		#information dl dt {
			float: left;
			width: 100px;
			}
		
		#information dl dd {
			float: right;
			width: 350px;
			}

			#information dl dd a {
				display: inline-block;
				}

@media(max-width: 1024px){
		#information dl {
			width: 90%;
			}

		#information dl:last-of-type {
			margin: 0 auto;
			}

			#information dl dt {
				float: none;
				width: 100%;
				}
			
			#information dl dd {
				float: none;
				width: 100%;
				}
	}



/* service --------------------------------------------------------------- */
#service {
	margin: 0 auto;
	padding: 80px 0;
	background-color: #ffffff;
	position: relative;
	}

	#service h2 {
		margin-bottom: 60px;
		}

	#service ul {
		width: 1150px;
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
		}

		#service ul li {
			float: left;
			width: 370px;
			margin-right: 20px;
			padding: 30px 30px 40px 30px;
			box-sizing: border-box;
			border-radius: 30px;
			background-color: #e9eef2;
			}
		
		#service ul li:last-of-type {
			margin-right: 0;
			}

			#service ul li h2 span {
				font-weight: 500;
				}

			#service ul li p {
				margin: 0 auto;
				}

			#service ul li p:first-of-type {
				width: 90%;
				margin-bottom: 20px;
				}

				#service ul li p:first-of-type img {
					width: 100%;
					}

			#service ul li p:nth-of-type(2) {
				width: 15em;
				height: 110px;
				margin-bottom: 40px;
				font-size: 18px;
				text-align: left;
				line-height: 30px;
				}

			#service ul li p:last-of-type {
				width: 120px;
				}

				#service ul li p:last-of-type img {
					width: 100%;
					}

	#service .service {
		width: 600px;
		margin: 0 auto;
		padding: 100px 0 0 0;
		position: relative;
		}

		#service .service h2 {
			margin-bottom: 20px;
			}

		#service .service p:first-of-type {
			line-height: 30px;
			letter-spacing: 1px;
			}

			#service .service p:first-of-type a {
				margin: 1em auto 0 auto;
				color: #3a5e85;
				text-align: right;
				line-height: 30px;
				letter-spacing: 1px;
				}

				#service .service p:first-of-type a img {
					width: 22px;
					vertical-align: middle;
					position: relative;
					left: -2px;
					top: -1px;
					}
		
		#service .service p:last-of-type {
			width: 200px;
			position: absolute;
			right: -250px;
			top: 45%;
			}

			#service .service p:last-of-type img {
				width: 100%;
				}
		
@media(max-width: 1024px){
		#service h2 {
			margin-bottom: 30px;
			}

		#service ul {
			width: 90%;
			}

			#service ul li {
				float: none;
				width: 100%;
				margin: 0 0 20px 0;
				padding: 35px 35px 20px 35px;
				}

				#service ul li p:first-of-type {
					width: 70%;
					}

				#service ul li p:nth-of-type(2) {
					width: 100%;
					height: auto;
					margin-bottom: 10px;
					font-size: 14px;				
					line-height: 1.8;
					}

				#service ul li p:last-of-type {
					width: 80px;
					}

		#service .service {
			width: 90%;
			padding: 60px 0 0 0;
			}

			#service .service p:first-of-type {
				line-height: 1.8;
				}

				#service .service p:first-of-type a {
					line-height: 1.8;
					}
			
			#service .service p:last-of-type {
				width: 70%;
				margin: 20px auto 0 auto;
				position: static;
				}
			
			#service .service:nth-of-type(2) p:last-of-type {
				width: 60%;
				}
	}



/* about --------------------------------------------------------------- */
#about {
	margin: 0 auto;
	padding: 80px 0;
	background-color: #ffffff;
	position: relative;
	}

	#about h2 {
		margin-bottom: 60px;
		}

	#about p:first-of-type {
		width: 180px;
		height: 180px;
		margin: 0 auto 30px auto;
		}

		#about p:first-of-type img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			}

	#about p:last-of-type {
		width: 700px;
		margin: 0 auto;
		line-height: 30px;
		}

		#about p:last-of-type span:first-of-type {
			color: #3a5e85;
			text-align: center;
			line-height: 30px;
			margin-bottom: 10px;
			}

@media(max-width: 1024px){
	#about {
		padding: 60px 0;
		}

		#about h2 {
			margin-bottom: 30px;
			}

		#about p:last-of-type {
			width: 90%;
			line-height: 1.8;
			}

			#about p:last-of-type span:first-of-type {
				line-height: 1.8;
				}

			#about p:last-of-type span:last-of-type {
				line-height: 1.8;
				}
	}



/* contact --------------------------------------------------------------- */
#contact {
	margin: 0 auto;
	padding: 50px 0;
	background-color: #3a5e85;
	position: relative;
	}

	#contact h2 {
		color: #ffffff;
		margin-bottom: 20px;
		}

		#contact h2 span {
			color: #ffffff;
			}

	#contact p {
		width: 40px;
		margin: 0 auto;
		}

		#contact p img {
			width: 100%;
			}

@media(max-width: 1024px){
	}