@charset "utf-8";
@media screen and (min-width:768px) {
  #company{ margin: 0 auto;padding-top:350px; }
}

#message{ }
.message .sub_title{ display:flex; justify-content:center; align-items:center; flex-flow:column; }
.message .sub_title h3{ text-align:center; font-weight:700; border-bottom:1px solid #919D9D; padding:0 0.5em; }
.message .sub_title p{ text-align:center; font-weight:500; }
.message .img{ text-align:center; }
.message .text_1{ font-weight:700; }
.message .text_2{ font-weight:500; }

.box table td{ vertical-align:top; font-weight:400; }
.box table td strong{ font-weight:700; }
.box table th{ vertical-align:top; font-weight:700; text-align:left; word-break:keep-all;  }

.box2 table td{ vertical-align:top; font-weight:400; }
.box2 table td strong{ font-weight:700; }
.box2 table th{ vertical-align:top; font-weight:700; text-align:left; word-break:keep-all;  }


#history .text p:not(:last-child){ margin-bottom:1.6em; }
#history h4{ color:#919D9D; font-weight:700; opacity:0.5; }

#pickup .banner a{ display:block; position:relative; text-decoration:none; }
#pickup .banner a span{ display:block; position:absolute; top:50%; transform:translateY(-50%); }
#pickup .banner a::after{
	display:flex; justify-content:center; align-items:center;
	content:"View More"; background:#508DC5; color:#FFFFFF;
}

.kousei{ display:table; border-collapse:collapse; border-spacing:0; }
.kousei p{ display:table-row; }
.kousei p span{ display:table-cell; padding-right:1em; }

/* PC */
@media screen and (min-width:768px) {
	#main{ padding:0 20px;  }
	#message{ padding:60px 0 50px; }
	#logo{ padding:0 0 140px; }
	.message{ max-width:750px; margin:0 auto; }
	.message .sub_title h3{ font-size:4.8rem; line-height:1; padding-bottom:15px; margin-bottom:15px; }
	.message .sub_title p{ font-size:1.8rem; line-height:1; }
	.message .img{ margin-top:55px; }
	.message .text_1{ font-size:2.4rem; line-height:1.6; margin-top:1.6em; }
	.message .text_2{ font-size:1.8rem; line-height:1.6; margin-top:1.6em; }
	
	#pickup .banner{ padding:0 0 90px; }
	#pickup .banner a{ width:750px; margin:0 auto; }
	#pickup .banner a:not(:last-child){ margin-bottom:40px; }
	#pickup .banner a span{ left:60px; font-size:2.4rem; line-height:1.7; font-weight:400; }
	#pickup .banner a::after{
		position:absolute; right:-30px; bottom:20px;
		width:180px; height:30px;
		font-size:1.5rem; line-height:1;
	}
	
	.box{
		position:relative;
		font-size:1.8rem; line-height:1.6;
		border:2px solid #919D9D;
		padding:0 46px 0 52px; margin-bottom:150px;
	}
	.box::before{
		display:block; content:""; width:216px;
		background:#29343A;
		position:absolute; left:52px; top:-40px; bottom:-40px; z-index:-1;
	}
	.box2{
		position:relative;
		font-size:1.8rem; line-height:1.6;
		border:2px solid #919D9D;
		padding:0 46px 0 52px; margin-bottom:150px;
	}
	.box2::before{
		display:block; content:""; width:216px;
		background:#E8E8E8;
		position:absolute; left:52px; top:-40px; bottom:-40px; z-index:-1;
	}

	.box h3{ font-size:3.0rem; line-height:1.6; text-align:center; width:216px; } 
	.box2 h3{ font-size:3.0rem; line-height:1.6; text-align:center; width:216px; } 
	#about{ display:flex; flex-wrap:wrap; padding:55px 0; }
	#about h3{ margin-right:10px; }
	#about table{ border-spacing:40px; width:calc(100% - 216px - 10px); margin-top:-40px; }
	#about table th{ width:110px; }
	.box .img{ margin:0 -48px 0 -54px; }
	.box2 .img{ margin:0 -48px 0 -54px; }
	#history{ display:flex; flex-wrap:wrap; padding:90px 0 30px; }
	#history h3{ margin-right:50px; }
	#history .text{ width:calc(100% - 216px - 50px); margin-bottom:60px; }
	#history h4{ width:100%; font-size:7.19rem; line-height:1.0; text-align:right; margin-bottom:30px; }
	#history table{ border-spacing:0; }
	#history table th{ width:216px; text-align:center; }
	#history table td{ padding:0 0 50px 50px; }
}

/* SP */
@media screen and (max-width:767px){
	#main{ padding:0 20px;  }
	#message{ padding:25px 20px 30px; }
	#logo{ padding:0 20px 75px; }
	.message .sub_title h3{ font-size:5.4rem; line-height:1; padding-bottom:10px; margin-bottom:10px; }
	.message .sub_title p{ font-size:2.2rem; line-height:1; }
	.message .img{ margin-top:35px; }
	.message .text_1{ font-size:3.2rem; line-height:1.6; margin-top:1.6em; }
	.message .text_2{ font-size:2.6rem; line-height:1.6; margin-top:1.6em; }
	
	#pickup .banner{ padding:0 0 30px; }
	#pickup .banner a{ width:100%; margin:0 auto; }
	#pickup .banner a:not(:last-child){ margin-bottom:30px; }
	#pickup .banner a span{ left:20px; font-size:3.2rem; line-height:1.7; font-weight:400; }
	#pickup .banner a::after{
		position:absolute; right:0; bottom:-10px;
		width:100px; height:20px;
		font-size:2.4rem; line-height:1;
	}
	
	.box{
		font-size:2.6rem; line-height:1.6;
		padding:0 20px; margin:0 20px 80px; border:1px solid #919D9D;
	}
	.box h3{
		font-size:3.2rem; line-height:1.6; text-align:center;
		position:relative; margin:25px 0 15px; padding:30px 0;
	}
	.box h3::before{
		display:block; content:""; background:#29343A;
		position:absolute; left:-41px; top:0; right:-41px; bottom:0; z-index:-1;
	}
	.box table{ border-spacing:25px; margin:0 -25px; }
	 
	.box .img{ margin:0 -21px; }
	#about table th{ width:80px; }
	#history .text{ margin-bottom:40px; }
	#history h4{ font-size:7.19rem; line-height:1.0; text-align:center; margin-bottom:5px; }
}
	.box2{
		font-size:2.6rem; line-height:1.6;
		padding:0 20px; margin:0 20px 80px; border:1px solid #919D9D;
	}
	.box2 h3{
		font-size:3.2rem; line-height:1.6; text-align:center;
		position:relative; margin:25px 0 15px; padding:30px 0;
	}
	.box2 h3::before{
		display:block; content:""; background:#E8E8E8;
		position:absolute; left:-41px; top:0; right:-41px; bottom:0; z-index:-1;
	}
	.box2 table{ border-spacing:25px; margin:0 -25px; }
	 
	.box2 .img{ margin:0 -21px; }
	#about table th{ width:80px; }
	#history .text{ margin-bottom:40px; }
	#history h4{ font-size:7.19rem; line-height:1.0; text-align:center; margin-bottom:5px; }
}