/** style-about.css **/


/*==========================================
 mainImg
===========================================*/
#mainImg{}

/**********
 mainImg_pc
**********/
#mainImg_pc{
	height: calc(82vh - 110px);
	background: url("../about/img/mainImg_about.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
	#mainImg_pc{
		background: none;
		height: auto;
		width: 100%;
	}
}

#mainImgInner{
	position: relative;
	font-weight: bold;
	text-align: left;
	width: 90%;
	height: 100%;
	margin: 0 auto;
}

#mainImgInner p{
	display: block;
	position: absolute;
	top: 30%;
	left: 0;
}

#mainImgInner p span{
	font-size:3em;
	display: block;
}

@media screen and (max-width: 768px) {
	#mainImgInner{
		position: static;
		display: none;
	}
}

/**********
 mainImg_mb
**********/
#mainImg_mb{
	display:none;
}

@media screen and (max-width: 768px) {
	#mainImg_mb{
		display: block;
	}
	#mainImg_mb img{
		width: 100%;
		height: 180px;
		object-fit: cover;
	}
	#mainImg_mb p{
		font-size: 1.2em;
	}

}


/*==========================================
 midashi
===========================================*/
/*********
 midashi
**********/
#midashi{
	margin-top: 60px;
}

#midashi h2{
	width: 40%;
}

#midashi div{
	width: 50%;
	text-align: left;
}

#midashi div #midashi_imgtxt{
	display: none;
}


@media screen and (max-width: 768px) {
	#midashi h2{
		width: 100%;
	}

	#midashi div{
		width: 100%;
	}
	#midashi div #midashi_imgtxt{
		display: block;
		font-size: 1.2em;
		margin-bottom: 20px;
		font-weight: bold;
	}
}



/*==========================================
 message
===========================================*/
#message{
	margin: 60px 0 100px;
}

#messageInner{
	padding-top: 60px;
	border-top: 1px solid #999;}

#messageInner > div:first-of-type{
	width: 66%;
}

#messageInner > div:first-of-type p{
	margin-bottom: 10px;
}

#messageInner > div:first-of-type p#message_name{
	display: block;
	margin-top: 30px;
	text-align: right;
	font-weight: bold;
	clear: #444;
}

#messageInner > div:last-of-type{
	width: 25%;
}

#messageInner > div:last-of-type img{
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	border-radius: 20px;
}

#messageInner h3{
	font-weight: normal;
	font-size: 2em;
	margin-bottom: 20px;
	color: #f15a24;
	text-align: left;
}

@media screen and (max-width: 768px) {
	#messageInner > div:first-of-type{
		width: 100%;
		margin-bottom: 15px;
	}
	#messageInner > div:last-of-type{
		width: 100%;
		text-align: center;
	}
	#messageInner > div:last-of-type img{
		max-width: 300px;
	}

}



/*==========================================
 rinen
===========================================*/

#rinen{}

#rinen > #rinenImg{
	text-align: right;
	padding-top: 60px;
}

#rinen > #rinenImg img{
	margin: 0 25px -15px auto;
	max-width: 144px;
}

#rinenInner{}

#rinenInner h4{
	font-weight: normal;
	font-size: 2em;
	margin-bottom: 20px;
	color: #f15a24;
	text-align: center;
}

#rinen_vision{
	background: #fff8e1;
	border-radius: 20px;
	margin-bottom: 50px;
}

#rinen_mission{
	background: #fff8e1;
	border-radius: 20px;
}

#rinen_vision > div,
#rinen_mission >div{
	padding: 15px 30px 20px;
	font-size: 1.05em;
}

#rinen_mission ul li{
	padding-bottom: 15px;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	font-size: 1.04em;
}

#rinen_mission ul li:last-of-type{
	padding-bottom: 0;
}

#rinen_mission ul li span:first-of-type{
	display: block;
	width:15%;
	background: #f15a24;
	border-radius: 20px;
	text-align: center;
	color: #fff;
}

#rinen_mission ul li span:last-of-type{
	display: block;
	width:82%;
}


@media screen and (max-width: 768px) {
	#rinen_mission ul li span:first-of-type{
		width:80%;
		max-width: 360px;
		margin: 0 auto 15px;
		font-size: 1.1em;

	}

	#rinen_mission ul li span:last-of-type{
		display: block;
		width:100%;
	}
}


/*==========================================
 group
===========================================*/

#group{
	background: #f2f2f2;
	padding: 60px 0 0;
	margin: 0 0 60px;
}

#group > #groupImg{
	text-align: left;
}

#group > #groupImg img{
	margin: 0 auto -15px 100px;
	max-width: 158px;
}

#groupInner{
	max-width: 880px;
	margin: 0 auto;
}

#groupInner a{
	display: block;
	width: 47%;
	background: #fff;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	color: #000;
    transition: all 0.5s 0s ease;
	margin-bottom: 60px;
}

#groupInner a:hover {
	opacity: 0.8;  
	filter: alpha(opacity=20); 
	background: #fff;
}

@media screen and (max-width: 768px) {
	#groupInner a{
		width: 100%;
	}
}


#groupInner a h4{
	font-size: 1.3em;
	margin-bottom: 15px;
	margin-top: 25px;
}

#groupInner a h4 span{
	font-size: 1.6rem;
}


#groupInner a img{
	width: 100%;
	border-radius: 0 0 20px 20px;
	margin-top: 15px;
}

#groupInner a p{
	padding: 0 25px 7px 25px; 
}


/*==========================================
 history
===========================================*/

#history{
	padding: 60px 0;
}

#history .contentInner{
	max-width: 980px;
	margin: 0 auto;
}

.timeline-list {
        padding: 40px 0;
}
.timeline-list-item {
	display: flex;
    line-height: 1.5;
    font-size: 16px;
}
.timeline-list-item .date {
	width: 16%;
    padding: 0 0 0 20px;
    color: #888888;
    font-weight: bold;
 }
       
@media screen and (max-width: 768px) {
	.timeline-list-item .date {
		width: 40%;
	 }
	
}

.timeline-list-item .content {
	position: relative;
    width: 80%;
	padding: 0 20px 60px 30px;
	border-left: 1px solid #aaaaaa;
}
.timeline-list-item .content::before {
	content: "";
	position: absolute;
	top: 0;
	left: -10px;
	width: 20px;
	height: 20px;
	background-color: #f39800;
	border-radius: 10px;
}


/*==========================================
 company
===========================================*/
#company{
	margin: 60px 0　0;
}

#company .contentInner{
	max-width: 980px;
	margin: 0 auto;
}

#company ul li{
	border-top: 1px dotted #666;
	padding: 15px 0;
	display:flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

#company ul li:last-of-type{
	border-bottom: 1px dotted #666;
}

#company ul li .companyTitle{
	width: 20%;
}

#company ul li .companyContents{
	width: 78%;
}