/* ----------------------------------------
	company.html
-------------------------------------------*/

.company .sec{
	padding-bottom: 20%;
}
.company #page_nav li{
	width: 24.5%;
	white-space: nowrap;
}
.company .box h3.tit{
	color: #fff;
}
.company .box{
	padding: 8% 0;
	border-radius: 40px;
}
.company .box .text_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 80%;
	margin: -4% auto 0;
}
.company .box .text_box .img{
	width: 44%;
}
.company .box .text_box .img img{
	border-radius: 20px;
}
.company .box .text_box .text{
	width: 48%;
	color: #fff;
	font-weight: bold;
	text-align: justify;
}
#mission{
	margin-bottom: 4%;
	background: url(../img/common/bg_vege.gif) left top / 68px auto repeat;
}
#vision{
	background: url(../img/common/bg_vege_2.gif) left top / 68px auto repeat;
}
#vision .pink{
	font-size: 120%;
	color: #ffabde;
}
.company .s_tbl a{
	color: var(--green);
}
.company .s_tbl a:hover{
	opacity: var(--hover);
}
.company .s_tbl{
	border-top: 1px solid;
	border-color: var(--bg-sub-color);
}
.company .s_tbl dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 4% 0;
	text-align: left;
	border-bottom: 1px solid;
	border-color: var(--bg-sub-color);
}
.company .s_tbl dt{
	width: 20%;
	font-weight: bold;
}
.company .s_tbl dd{
	width: 80%;
}
.company .s_tbl .circle span{
	color: var(--sub-brown);
}
.company .s_tbl dd dl{
	border: none;
	padding: 0;
}
.company .s_tbl dd dl dt{
	width: 70px;
	font-weight: normal;
}
.company .s_tbl dd dl dd{
	width: calc(100% - 80px);
}
.profile_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.company .profile_box .s_tbl{
	width: 64%;
}
.company .profile_box .photo{
	width: 30%;
}
.company .profile_box .photo img{
	border-radius: 20px;
}
#message .item{
	padding-bottom: 8%;
	text-align: justify;
}
#message .item:last-child{
	padding-bottom: 0;
}
#message .item h4{
	font-size: 28px;
	color: var(--brown);
	padding-bottom: 4%;
}
#message .item p{
	width: 100%;
	column-count: 2;
	column-gap: 32px;
	letter-spacing: 0.02em;
	font-size: 16px;
}

@media screen and (max-width: 1280px){
	.company #page_nav ul{
		row-gap: 8px;
	}
	.company #page_nav li{
		width: 32%;
	}
}
@media screen and (max-width: 960px){
	.company #page_nav li{
		width: 49.5%;
	}
}
@media screen and (max-width: 650px){
	
	.company #page_nav li{
		width: 100%;
	}
	.company .sec{
		padding-bottom: 28%;
	}
	.company .box{
		padding: 12% 0;
		border-radius: 28px;
	}
	.company .box .text_box .img,
	.company .box .text_box .text{
		width: 100%;
		font-weight: normal;
	}
	.company .box .text_box .img{
		padding-bottom: 8%;
	}
	.company .box .text_box .img img{
		border-radius: 12px;
	}
	.company .s_tbl{
		border-top: 1px solid;
		border-color: var(--bg-sub-color);
	}
	.company .s_tbl dl{
		padding: 6% 0;
	}
	.company .s_tbl dt,
	.company .s_tbl dd{
		width: 100%;
	}
	.company .s_tbl dt{
		padding-bottom: 2%;
	}
	.company .s_tbl dd dl dt{
		width: 60px;
	}
	.company .s_tbl dd dl dd{
		width: calc(100% - 70px);
	}
	.company .profile_box .photo img{
		border-radius: 12px;
	}
	#message .item{
		padding-bottom: 16%;
	}
	#message .item h4{
		font-size: 18px;
		padding-bottom: 8%;
	}
	#message .item p{
		column-count: 1;
		font-size: 14px;
	}
}