@charset "utf-8";
/* CSS Document */

.about_us,.company{
	width: 90%;
	margin: 0 auto;
}

.about_us_head{
	background-image: url("../img/photo/DSC03905.jpg");
}

.about_us_head h1{
	letter-spacing: .15em;
}

.ceo-photo{
	width: 100%;
	background-image: url("../img/photo/ceo-photo1.png");
	background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
	position: relative;
	margin-bottom: 2em;
}

.ceo-name{
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	background: rgb(255 255 255/0.8);
}

.ceo-name p{
	background: rgb(0 0 0/0.8);
	color: #fff;
	width: 50%;
	padding-left: .5em;
	display: flex;
	align-items: center;
}

.name-img{
	width: 50%;
	margin: .5em;
	display: flex;
	align-items: center;
}

.ceo-name img{
	width: 120px;
	height: auto;
}

.about_us h5{
	text-align: justify;
	font-size: 1.6rem;
	font-weight: 800;
	border-left: 5px solid #e7674c;
	margin-bottom: 1em;
	padding: .25em 0 .25em .5em;
}

.about_us h3 {
	width: 100%;
	padding-bottom: .25em;
	margin-top: 1.75em;
  	border-bottom: 3px dashed #dcdcdc;
	font-weight: 800;
}

.about_us p{
	text-align: justify;
	margin: .5em 0;
	line-height: 1.6em;
}

.ceo-photo::before{
    content:"";
    display: block;
    padding-top: 56%; /* 高さを幅の○%に固定 */
}

.company{
	display: flex;
	flex-wrap: wrap;
}

.company_img{
	width: 100%;
	background-image: url("../img/photo/DSC05045.jpg");
	background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.company_img::before{
    content:"";
    display: block;
    padding-top: 65%; /* 高さを幅の○%に固定 */
}

.company_data{
	width: 100%;
	margin-top: 1.6em;
}

.company_data table{
	line-height: 1.6em;
}

.company_data th{
	width: 30%;
}

/*中型画面向けデザイン（タブレットなど）
---------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	.about_us,.company{
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
	}
	
	.ceo-photo{
		width: 80%;
		max-width: 1000px;
		margin: 0 auto 2em;
	}
	
	.ceo-photo::before{
		padding-top: 42%; /* 高さを幅の○%に固定 */
	}
	
	.about_us h5{
		font-size: 2.4rem;
	}
	
	.ceo-name{
		width: 80%;
	}
	
	.ceo-name p{
		padding-left: 1em;
	}
	
	.ceo-name img{
		width: 180px;
		height: auto;
	}
	
	.company{
		justify-content: space-between;
	}
	
	.company_img{
		width: 49%;
	}
	
	.company_img::before{
		padding-top: 75%; /* 高さを幅の○%に固定 */
	}

	.company_data{
		width: 49%;
		margin: 0;
	}
}