@charset "UTF-8";
/*----------------------------------------

	#mirai_eye
	- mv
	- content

-----------------------------------------*/

/*----------------------------------------
	main
-----------------------------------------*/
#main {
	background: url("../img/c_content_bg01.png") center top repeat;
}

/*----------------------------------------
	breadcrumb
-----------------------------------------*/
#breadcrumb {
	border-bottom: none;
}

/*----------------------------------------
	content
-----------------------------------------*/
#content {
	padding: 60px 0 100px;
	background: none;
}
@media screen and (max-width: 767px) {
	#content {
		padding: 40px 0 70px;
	}
}

/*----------------------------------------
	sec02
-----------------------------------------*/
#sec01 > div {
	padding: 40px 0 36px;
	border-radius: 10px;
	background: url("../img/i_01_p01.png") left 76px top 130px no-repeat,
				url("../img/i_01_p02.png") right 90px top 130px no-repeat,
				url("../img/i_01_p03.png") left 20px bottom 78px no-repeat,
				url("../img/i_01_p04.png") right 20px bottom 74px no-repeat;
	background-color: #fff;
}
#sec01 > div > .title {
	width: 604px;
	margin: 0 auto 26px;
}
#sec01 > div > p {
	margin: 0 0 8px;
	color: #0074d2;
	line-height: 1.7;
	text-align: center;
}
#sec01 > div > p > span {
	color: #f8ab00;
}
#sec01 .txt {
	padding: 0 200px;
	white-space: nowrap;
	text-align: center;
	line-height: 2.15;
}
#sec01 .txt a {
	text-decoration: underline;
}
#sec01 .txt a:hover {
	text-decoration: none;
}
#sec01 .txt p+p {
	margin-top: 42px;
}
@media screen and (max-width: 1280px) {
	#sec01 > div {
		background-position: left calc(50% - 336px) top 130px,
							 right calc(50% - 308px) top 130px,
							 left calc(50% - 358px) bottom 78px,
							 right calc(50% - 338px) bottom 74px;
	}
	#sec01 .txt {
		padding: 0;
		width: 600px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px) {
	#sec01 > div {
		padding: 40px 20px 36px;
		border-radius: 0;
		background: #fff;
	}
	#sec01 > div > .title {
		width: 100%;
		margin-bottom: 16px;
	}
	#sec01 > div > p {
		margin: 0 -0.5em 12px;
		line-height: 1.5;
		white-space: nowrap;
	}
	#sec01 .txt {
		width: auto;
		line-height: 1.8;
		text-align: left;
		white-space: inherit;
	}
	#sec01 .txt p+p {
		margin-top: 28px;
	}
	#sec01 .txt .atte {
		line-height: 1.5;
	}
	#sec01 .txt wbr.pc {
		display: none;
	}
}

/*----------------------------------------
	sec02
-----------------------------------------*/
#sec02 > .title {
	margin: 60px 0 34px;
	padding: 5px 0 5px 15px;
	border-left: 5px solid #00a0e9;
	color: #000;
	line-height: 1;
}
#sec02 > div {
	padding: 32px 30px 20px;
	background: #fff;
}
#sec02 > div .lead {
	margin-bottom: 12px;
}
#sec02 > div ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#sec02 > div ul::after,
#sec02 > div ul li {
	content: '';
	width: calc(33.3333% - 13px);
	margin: 0 0 20px;
}
#sec02 > div ul li a {
	display: flex;
	justify-content: space-between;
	height: 100%;
	min-height: 110px;
	border: 1px solid #ddd;
	border-radius: 4px;
}
#sec02 > div ul li a div {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	flex: 1;
	padding: 10px 0 10px 6%;
}
#sec02 > div ul li a div .num {
	background: #0b4fa3;
	margin: 0 0 4px;
	padding: 4px 8px;
	color: #fff;
	line-height: 1;
}
#sec02 > div ul li a div .stitle {
	width: 100%;
}
#sec02 > div ul li a figure {
	position: relative;
	overflow: hidden;
	width: 35%;
	height: calc(100% - 2px);
	margin: 1px;
	border-radius: 0 2px 2px 0;
}
#sec02 > div ul li a figure img {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: center;
	font-family: 'object-fit: cover; object-position: center;';
}
#sec02 > div ul li a figure img.sp {
	display: none;
}
@media screen and (max-width: 1366px) {
	#sec02 > div ul::after {
		content: none;
	}
	#sec02 > div ul li {
		width: calc(50% - 13px);
	}
}
@media screen and (max-width: 767px) {
	#sec02 > .title > span {
		display: none;
	}
	#sec02 > div {
		padding: 32px 20px 12px;
	}
	#sec02 > div .lead {
		margin-bottom: 25px;
	}
	#sec02 > div ul li {
		width: 100%;
		margin: 0 0 30px;
	}
	#sec02 > div ul li a {
		flex-wrap: wrap;
		flex-direction: row-reverse;
		height: auto;
		min-height: inherit;
		border: none;
		border-radius: 0;
	}
	#sec02 > div ul li a div {
		order: 1;
		padding: 10px 10px 6px;
		background: #eee;
	}
	#sec02 > div ul li a div .num {
		padding: 3px 8px;
	}
	#sec02 > div ul li a figure {
		width: 100%;
		margin: 0;
		border-radius: 0;
	}
	#sec02 > div ul li a figure img {
		position: inherit;
	}
	#sec02 > div ul li a figure img.sp {
		display: inherit;
	}
	#sec02 > div ul li a figure img.pc {
		display: none;
	}
}

/*----------------------------------------
	print
-----------------------------------------*/
@media print {
	body {
		width: 1064px;
	}
}