/* TITLE
=========================================================================
=========================================================================*/
#title {
	overflow: hidden;
	position: relative;
	margin: 0 auto 0;
	padding: 0;
	width: 100%;
	height: 580px;
	text-align: left;
	background: url(../images/about/ism_title_bg.jpg) center top no-repeat;
	background-size: cover;
}

#title .box {
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	padding: 70px 88px 40px;
	width: 860px;
	background: rgba(255, 255, 255, 0.8);
}

@media (max-width:910px) {
	#title .box {
		width: 100%;
	}
}

#title h1 {
	position: relative;
	margin: 0 auto 39px;
	width: 96.526772%;
}

#title h2 {
	margin: 0 auto;
	font-weight: bold;
	font-size: 1.4rem;
}

/* 背景
=========================================================================
=========================================================================*/
#container {
	width: 100%;
	background: url(../images/about/ism_bg.png) center top repeat-y;
	background-size: 130% auto;
}

/* POINT
=========================================================================
=========================================================================*/
#ism {
	position: relative;
	margin: 0 auto;
	padding: 82px 0 120px;
	width: 860px;
}

@media (max-width:910px) {
	#ism {
		padding: 80px 0 120px;
		width: 100%;
	}
}

#ism ul {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}

#ism ul li {
	margin-bottom: 28px;
	padding: 40px 45px 30px;
	width: 100%;
	background: #3B3B3B;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#ism ul li:nth-child(2),
#ism ul li:nth-child(3),
#ism ul li:nth-child(5),
#ism ul li:nth-child(6),
#ism ul li:nth-child(7),
#ism ul li:nth-child(8),
#ism ul li:nth-child(11),
#ism ul li:nth-child(12) {
	width: 48.108108%;
}

#ism h2 {
	margin-bottom: 20px;
	font-size: 1.2rem;
	color: #C7C7C7;
}

#ism h3 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 3.2rem;
	color: #FFFFFF;
}

#ism ul li:nth-child(2) h3,
#ism ul li:nth-child(3) h3,
#ism ul li:nth-child(5) h3,
#ism ul li:nth-child(6) h3,
#ism ul li:nth-child(7) h3,
#ism ul li:nth-child(8) h3,
#ism ul li:nth-child(11) h3,
#ism ul li:nth-child(12) h3 {
	font-size: 2.0rem;
}

#ism p {
	position: relative;
	padding: 20px 0;
	font-size: 1.4rem;
	color: #C4C4C4;
	border-top: 1px solid #D5D5D5;
	border-bottom: 1px solid #D5D5D5;
}

#ism p::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	margin: auto;
	width: 26px;
	height: 11px;
	background: url(../images/about/ism_text_before.svg) left center no-repeat #3B3B3B;
	background-size: 15px auto;
}

#ism p::after {
	content: "";
	position: absolute;
	bottom: -5px;
	right: 0;
	margin: auto;
	width: 26px;
	height: 11px;
	background: url(../images/about/ism_text_after.svg) right center no-repeat #3B3B3B;
	background-size: 15px auto;
}

/*  スマホ（740px以下）
=========================================================================
=========================================================================*/
@media (max-width:740px) {


	/* TITLE
	=========================================================================
	=========================================================================*/
	#title {
		height: 390px;
		background: url(../images/about/ism_title_bg.jpg) center center no-repeat;
		background-size: cover;
	}

	#title .box {
		padding: 35px 20px 20px;
		width: 92%;
	}

	#title h1 {
		margin: 0 auto 20px;
		width: 100%;
	}

	#title h2 {
		font-size: 1.2rem;
	}

	/* 背景
	=========================================================================
	=========================================================================*/
	#container {
		background: none;
	}

	/* POINT
	=========================================================================
	=========================================================================*/
	#ism {
		padding: 40px 20px 60px;
		width: 100%;
	}

	#ism ul li {
		margin-bottom: 20px;
		padding: 27px 15px 20px;
	}

	#ism ul li:nth-child(2),
	#ism ul li:nth-child(3),
	#ism ul li:nth-child(5),
	#ism ul li:nth-child(6),
	#ism ul li:nth-child(7),
	#ism ul li:nth-child(8),
	#ism ul li:nth-child(11),
	#ism ul li:nth-child(12) {
		width: 100%;
	}

	#ism h2 {
		margin-bottom: 15px;
		font-size: 1.2rem;
	}

	#ism h3 {
		margin-bottom: 20px;
		font-size: 2.9rem;
	}

	#ism ul li:nth-child(2) h3,
	#ism ul li:nth-child(3) h3,
	#ism ul li:nth-child(5) h3,
	#ism ul li:nth-child(6) h3,
	#ism ul li:nth-child(7) h3,
	#ism ul li:nth-child(8) h3,
	#ism ul li:nth-child(11) h3,
	#ism ul li:nth-child(12) h3 {
		font-size: 2.9rem;
	}

	#ism p {
		font-size: 1.2rem;
	}
}


/*  スマホ（480px以下）
=========================================================================
=========================================================================*/
@media (max-width:480px) {

	/* TITLE
	=========================================================================
	=========================================================================*/
	#title h1 {
		margin: 25px auto 17px;
		font-size: 1.6rem;
	}

	#title h3 {
		font-size: 3.2vw;
	}

	/* POINT
	=========================================================================
	=========================================================================*/
	#ism h3 {
		font-size: 7.1vw;
	}

	#ism ul li:nth-child(2) h3,
	#ism ul li:nth-child(3) h3,
	#ism ul li:nth-child(5) h3,
	#ism ul li:nth-child(6) h3,
	#ism ul li:nth-child(7) h3,
	#ism ul li:nth-child(8) h3,
	#ism ul li:nth-child(11) h3,
	#ism ul li:nth-child(12) h3 {
		font-size: 6.2vw;
	}
}

/*  スマホ（350px以下）
=========================================================================
=========================================================================*/
@media (max-width:350px) {

	/* POINT
	=========================================================================
	=========================================================================*/
	#ism h3 {
		font-size: 6.4vw;
	}

	#ism ul li:nth-child(2) h3,
	#ism ul li:nth-child(3) h3,
	#ism ul li:nth-child(5) h3,
	#ism ul li:nth-child(6) h3,
	#ism ul li:nth-child(7) h3,
	#ism ul li:nth-child(8) h3,
	#ism ul li:nth-child(11) h3,
	#ism ul li:nth-child(12) h3 {
		font-size: 6.0vw;
	}
}