@charset "utf-8";

/* ご挨拶
------------------------------------------------------------*/
.message{
	background: url("../images/bg_g.webp") bottom center / cover no-repeat;
	transform: rotateX(180deg);
}
.message > div{
	transform: rotateX(-180deg);
	background: url("../images/line-bg.webp") center bottom 100px / contain no-repeat;
}
.message_L{width: 265px;}
.message_L img{border-radius: 10px;}
.message_L .message_name{
	font-size: 22px;
	display: flex;
	justify-content: space-between;
}
.message_L .message_name span{
	font-family: 'Lato-Bold';
	color: #f4e051B3;
	font-size: 23px;
}
.message_R{width: calc(100% - 265px - 80px);}
.message_R .dotted{
	width: fit-content;
	padding-bottom: 10px;
	border-bottom: dashed 2px #f4e051;
}

/* スタッフ紹介
------------------------------------------------------------*/
.staff{
	background-position: center;
	background-repeat: no-repeat;
}
.staff-li li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 48%;
}
.staff-li li:not(:last-child){margin-bottom: 60px;}
.staff-li li img{
	border-radius: 10px;
	margin-right: 40px;
}
.staff-li li h3{
	font-size: 20px;
	font-family: 'NotoSansJP-Bold';
	color: #033b7c;
	position: relative;
	width: 100%;
	padding-bottom: 15px;
	border-bottom: solid 1px #e6e6e6;
	margin-bottom: 25px;
	letter-spacing: 0.15em;
}
.staff-li li h3::before{
	content: "";
	width: 50px;
	height: inherit;
	position: absolute;
	left: 0;
	bottom: -1px;
	border-bottom: solid 1px #f4e051;
}
.staff-li li div p{line-height: 1.8;}

/* 会社概要
------------------------------------------------------------*/
.company{background: url("../images/bg_gy.webp") top center / cover no-repeat;}
.company::before{display: none;}
.company dl{width:820px;}
.company dl > div{display: flex;}
.company dl > div:not(:last-child){margin-bottom: 25px;}
.company dd,.company dt{padding-bottom: 20px;}
.company dt{
	width: 160px;
	font-size: 18px;
	border-bottom: solid 1px #1768ff;
}
.company dd{
	width: calc(100% - 160px);
	border-bottom: solid 1px #ccc;
}
.company ul li:not(:last-child){margin-bottom: 5px;}
.history-li li{display: flex;}
.history-li p:first-child{width: 120px;}
.history-li p:last-child{width: calc(100% - 120px);}
.map{
	border-radius: 10px;
	overflow: hidden;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* ご挨拶
	------------------------------------------------------------*/
	.message_L{width: 25%;}
	.message_L img{border-radius: 5px;}
	.message_L .message_name{font-size: 20px;}
	.message_L .message_name span{font-size: 20px;}
	.message_R{width: calc(100% - 25% - 50px);}
	.message_R .dotted{
		padding-bottom: 10px;
		margin-bottom: 15px!important;
	}
	
	/* スタッフ紹介
	------------------------------------------------------------*/
	.staff-li li:not(:last-child){margin-bottom: 50px;}
	.staff-li li img{
		width: 160px;
		border-radius: 5px;
		margin-right: 30px;
	}
	.staff-li li h3{
		font-size: 18px;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	.staff-li li h3::before{width: 40px;}
	
	/* 会社概要
	------------------------------------------------------------*/
	.company dl{width:620px;}
	.company dl > div:not(:last-child){margin-bottom: 20px;}
	.company dd,.company dt{padding-bottom: 15px;}
	.company dt{
		width: 100px;
		font-size: 16px;
	}
	.company dd{width: calc(100% - 100px);}
	.history-li p:first-child{width: 100px;}
	.history-li p:last-child{width: calc(100% - 100px);}
	.map{border-radius: 5px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* ご挨拶
	------------------------------------------------------------*/
	.message .flexbox{justify-content: center;}
	.message_L{
		max-width: 256px;
		margin-bottom: 30px;
	}
	.message_L,.message_R{width: 100%;}

	/* スタッフ紹介
	------------------------------------------------------------*/
	.staff-li{align-items: flex-start;}
	.staff-li li{flex-wrap: wrap;}
	.staff-li li img{margin: 0 auto 20px;}
	
	/* 会社概要
	------------------------------------------------------------*/
	.company .title{margin-bottom: 60px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* ご挨拶
	------------------------------------------------------------*/
	.message_L {
		width: 200px;
		margin: 0 auto 30px;
	}
	.message_L p{line-height: 1.4;}
	.message_name{flex-wrap: wrap;}
	
	/* スタッフ紹介
	------------------------------------------------------------*/
	.staff-li{justify-content: center;}
	.staff-li li{width: 90%;}
	
	/* 会社概要
	------------------------------------------------------------*/
	.company ul li:not(:last-child){margin-bottom: 10px;}
	.company dl > div{flex-wrap: wrap;}
	.company dt{
		width: fit-content;
		padding-bottom: 10px;
	}
	.company dd{
		width: 100%;
		padding: 11px 0 0;
		border-bottom: none;
		border-top: solid 1px #ccc;
	}
	.history-li li{flex-wrap: wrap;}
	.history-li p{width: 100%!important;}
	.history-li p:first-child{
		margin-bottom: 2px;
		font-family: 'NotoSansJP-Bold';
	}
}