@charset "UTF-8";

/* --- ヒーローエリア --- */
section.hero_about {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 570px;
	background: url(../img/hero_about.jpg) no-repeat center center;
	background-size: cover;
}

section.hero_about h1 img {
	width: 380px;
	height: auto;
}

/* --- 見出しh3 --- */
div.head {
	border-bottom: 1px solid #999999;
	margin-bottom: 20px;
}

div.head h3 {
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 6px;
}

/* --- Company --- */
section.about_company div.container1 {
	padding: 95px 30px 60px;
}

section.about_company div.container1 h2 {
	margin-bottom: 30px;
}

section.about_company div.container1 p,
section.about_company div.container2 p,
section.about_company div.container2 table th,
section.about_company div.container2 table td {
	font-size: 14px;
	font-weight: 400;
	text-align: left;
}

section.about_company div.container2 p,
section.about_company div.container2 table {
	margin-bottom: 20px;
}

section.about_company div.container2 p:last-child {
	margin-bottom: 0px;
}

section.about_company div.image img {
	display: block;
	width: 100%;
	height: auto;
}

section.about_company div.container2 {
	padding: 75px 30px 85px;
}

section.about_company div.container2 table {
	border-collapse: collapse;
	width: 100%;
}

section.about_company div.container2 table th {
	white-space: nowrap;
}

section.about_company div.container2 table th,
section.about_company div.container2 table td {
	border: 2px solid #ffffff;
	padding: 10px 5px;
}

section.about_company div.container2 table tr:nth-child(2n) {
	background: #e5e5e5;
}

section.about_company div.container2 table tr:nth-child(2n+1) {
	background: #eeeeee;
}

/* --- Access --- */
section.about_access {
	background: #eeeeee;
}

section.about_access div.container div.text {
	padding: 30px 0;
	margin: 0px 30px;
}

section.about_access div.container div.text h2 {
	margin-bottom: 10px;
}

section.about_access div.container div.text p {
	font-size: 14px;
	margin-bottom: 1em;
}

section.about_access div.container div.text p:last-child {
	margin-bottom: 0px;
}

section.about_access div.container div.content iframe {
	border: 0;
	width: 100%;
	height: 360px;
	margin-bottom: 30px;
	border-top: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
}

/* デスクトップ用 */
@media(min-width:1200px) {
	/* --- 見出しh3 --- */
	div.head {
	margin-bottom: 10px;
	}
	div.head h3 {
	font-size: 16px;
	}
	
	/* --- Company --- */
	section.about_company div.container1 {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 115px;
	margin-bottom: 45px;
	padding: 0px;
	}
	section.about_company div.container1 h2 span.pc img {
	width: 505px;
	height: auto;
	}
	section.about_company div.container1 p,
	section.about_company div.container2 p {
	font-size: 14px;
	}
	section.about_company div.image img {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	}
	section.about_company div.container2 {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 45px;
	margin-bottom: 50px;
	padding: 0px;
	}
	section.about_company div.container2 table th,
	section.about_company div.container2 table td {
	border: 4px solid #ffffff;
	padding: 10px 20px;
	}
	
	/* --- Access --- */
	section.about_access div.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-bottom: 50px;
	display: flex;
	}
	section.about_access div.container h2 img {
	width: 207px;
	height: auto;
	}
	section.about_access div.container div.text {
	flex: 0 0 400px;
	}
	section.about_access div.container div.content {
	flex: 1
	}
	section.about_access div.container div.text {
	padding: 0px;
	margin: 0px;
	}
	section.about_access div.container div.text h2 {
	margin-bottom: 20px;
	}
	section.about_access div.container div.text p {
	font-size: 14px;
	margin-bottom: 20px;
	}
	section.about_access div.container div.content iframe {
	margin-bottom: 0px;
	border-left: 5px solid #ffffff;
	border-right: 5px solid #ffffff;
	}
}

/* スマートフォン用 */
@media(max-width:641px) {
	section.about_company div.container1 h2 span.sp img {
	width: 100%;
	height: auto;
	}
}
@media(max-width:500px) {
	h1 img {
	width: 310px;
	height: auto;
	}
}