/* IMPORT CSS */
@import "css/common.css";

#info-contents{
	width: 1000px;
	display: flex;
}

#info-contents aside{
	width: 200px;
	margin-left: 20px;
}

#info-contents aside ul li:not(:first-child){
	margin-top: 15px;
}

#info-contents article{
	width: 780px;
}

#info-flex{
	display: flex;
	padding-top: 30px;
}

#info-contents .top_banner{
	margin-bottom:30px;
	}

#info-flex #info-youtube{
	width: 100%;
}

#youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

#youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
	clear: both;
}

#info-flex p{
	flex: 1;
	padding-left: 20px;
}

#news{
    margin-top: 30px;
	margin-bottom: 20px;
}

#news h2,
#service h2{
	margin-bottom: 17px;
}

#news ul{
	height: 300px;
	overflow: auto;
    margin-bottom: 20px;
}

#news ul li{
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px dashed #dbd7d2;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

#news ul li time{
	flex-shrink: 0;
	font-weight: bold;
	padding-right: 30px;
}

#service ul{
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
}

#sp-banner{
	display: none;
}


/*--------------------------- SMARTPHONE STYLES ---------------------------*/


/*========== 650px以下 ==========*/

@media ( max-width : 650px ) {
	
	#info-contents{
		width: 100%;
		display: block;
	}
	
	#info-contents article{
		width: 100%;
	}
	
	#info-contents article figure img{
		width: 100%;
	}
	
	#info-contents aside{
		display: none;
	}
	
	#info-flex{
		display: block;
	}
	
	#info-flex #info-youtube{
		width: 100%;
	}
	
	#info-flex p{
		padding: 20px 10px;
	}
	
	#service ul li{
		flex-basis: 48%;
	}
	
	#service ul li:nth-child(-n+2){
		margin-bottom: 15px;
	}
	
	#service ul li img{
		width: 100%;
	}
	
	#sp-banner{
		display: block;
	}
	
	#sp-banner ul{
		text-align: center;
	}
	
	#sp-banner ul li{
		margin-top: 15px;
	}
	
	
}