@charset "utf-8";


/*---------------------------------------------------------------------------------------
	contents
----------------------------------------------------------------------------------------*/

article{
}
/* .about1 */
#contents .about1{
	padding-bottom: 250px;
	overflow: hidden;
}
#contents .about1 .read{
	font-size: 24px;
	font-weight: bold;
	padding: 0 3%;
	margin-bottom: 40px;
}
#contents .about1 div.mv{
	clear: both;
	display: table;
	width: 100%;
	min-height: 310px;
	background: #e6e6e6;
}
#contents .about1 div.mv figure{
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	background: url(images/mv.jpg) no-repeat center center;
	background-size: cover;
}
#contents .about1 div.mv figure img{
	display: none;
}
#contents .about1 div.mv p{
	display: table-cell;
	width: 50%;
	font-size: 17px;
	text-align: left;
	padding: 15px 40px;
	vertical-align: middle;
}
#contents .about1 .point{
	padding: 0 3%;
}
#contents .about1 .point ol li{
	float: left;
	width: 25%;
	position: relative;
}
#contents .about1 .point ol li div{
	position: absolute;
	top: calc(100% + 20px);
	left: -62%;
	width: 220%;
	text-align: left;
	padding: 10px;
	background: #ffffff;
	border: 1px solid #1b1464;
}
#contents .about1 .point ol li div:after, #contents .about1 .point ol li div:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#contents .about1 .point ol li div:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 15px;
	margin-left: -15px;
}
#contents .about1 .point ol li div:before {
	border-color: rgba(27, 20, 100, 0);
	border-bottom-color: #1b1464;
	border-width: 16px;
	margin-left: -16px;
}
#contents .about1 .point ol li div img{
	float: left;
	margin-right: 20px;
}
#contents .about1 .point ol li div p em{
	color: #f00;
}
#contents .about1 .point ol li div p a{
	color: #00f;
	text-decoration: underline;
}
#contents .about1 .point ol li div p a.pdf:after{
	display: inline-block;
	content: "";
	width: 25px;
	height: 25px;
	background: url(../common/images/icon-pdf.png) no-repeat;
	vertical-align: middle;
	margin-left: 5px;
}
/* .about2 */
#contents .about2{
	clear: both;
}
#contents .about2 .support{
	clear: both;
	padding: 40px 3%;
	background: #e6e6e6;
	overflow: hidden;
}
#contents .about2 .support h4{
	color: #1b1464;
	font-size: 28px;
	text-align: left;
}
#contents .about2 .support ol{
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}
#contents .about2 .support ol li{
	width: 29%;
	font-size: 14px;
	background: #fff;
	padding: 0 15px 20px;
	border: 1px solid #1b1464;
}
#contents .about2 .support ol li:nth-child(1){
	position: absolute;
	left: 0;
	bottom: 0;
}
#contents .about2 .support ol li:nth-child(1):before{
	display: block;
	content: "";
	height: 39px;
	background: url(images/support1.png) no-repeat center top;
	margin-bottom: 15px;
}
#contents .about2 .support ol li:nth-child(1):after{
	position: absolute;
	right: -90px;
	top: 50%;
	display: inline-block;
	content: "";
	width: 110px;
	height: 74px;
	background: url(images/arrow-desuga.png) no-repeat center top;
	margin-top: -37px;
	z-index: 9;
}
#contents .about2 .support ol li:nth-child(2){
	position: absolute;
	left: 35.5%;
	bottom: 0;
}
#contents .about2 .support ol li:nth-child(2):before{
	display: block;
	content: "";
	height: 39px;
	background: url(images/support2.png) no-repeat center top;
	margin-bottom: 15px;
}
#contents .about2 .support ol li:nth-child(2):after{
	position: absolute;
	right: -90px;
	top: 50%;
	display: inline-block;
	content: "";
	width: 110px;
	height: 74px;
	background: url(images/arrow-sarani.png) no-repeat center top;
	margin-top: -37px;
	z-index: 9;
}
#contents .about2 .support ol li:nth-child(3){
	float: right;
}
#contents .about2 .support ol li:nth-child(3):before{
	display: block;
	content: "";
	height: 39px;
	background: url(images/support3.png) no-repeat center top;
	margin-bottom: 15px;
}
#contents .about2 .support ol li strong{
	color: #1b1464;
	font-size: 20px;
}
#contents .about2 .support p{
	font-size: 24px;
	font-weight: bold;
}
#contents .about2 .support2{
	clear: both;
	text-align: left;
	padding: 40px 3%;
	background: #e6e6e6;
	overflow: hidden;
}
/* .about3 */
#contents .about3{
	clear: both;
}
#contents .about3 .moviewrap{
	max-width: 750px;
	margin: 0 auto;
}
/*------------------------------ sp size ------------------------------*/
@media screen and (max-width: 768px){
	/* .about1 */
	#contents .about1{
		padding-bottom: 0;
		overflow: hidden;
		margin-bottom: 40px;
	}
	#contents .about1 .read{
		font-size: 16px;
		font-weight: bold;
		padding: 0 3%;
		margin-bottom: 20px;
	}
	#contents .about1 div.mv{
		clear: both;
		display: block;
		width: 100%;
		min-height: inherit;
		background: #e6e6e6;
	}
	#contents .about1 div.mv figure{
		display: block;
		width: auto;
		vertical-align: middle;
		background: none;
	}
	#contents .about1 div.mv figure img{
		display: block;
	}
	#contents .about1 div.mv p{
		display: table-cell;
		width: 50%;
		font-size: 14px;
		text-align: left;
		padding: 20px 5%;
		vertical-align: middle;
	}
	#contents .about1 .point{
		padding: 0 3%;
	}
	#contents .about1 .point ol li{
		float: left;
		width: 50%;
		position: static;
	}
	#contents .about1 .point ol li div{
		position: relative;
		left: inherit;
		top: inherit;
		width: 200%;
		text-align: left;
		padding: 10px;
		background: #ffffff;
		border: 1px solid #1b1464;
		margin-top: 20px;
	}
	#contents .about1 .point ol li div:after, #contents .about1 .point ol li div:before {
		bottom: 100%;
		left: 25%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	#contents .about1 .point ol li div:after {
		border-color: rgba(255, 255, 255, 0);
		border-bottom-color: #ffffff;
		border-width: 15px;
		margin-left: -15px;
	}
	#contents .about1 .point ol li div:before {
		border-color: rgba(27, 20, 100, 0);
		border-bottom-color: #1b1464;
		border-width: 16px;
		margin-left: -16px;
	}
	#contents .about1 .point ol li div img{
		float: left;
		width: 50px;
		height: auto;
		margin-right: 10px;
	}
	#contents .about1 .point ol li div p{
		overflow: hidden;
	}
	#contents .about1 .point ol li div p em{
		color: #f00;
	}
	#contents .about1 .point ol li div p a{
		color: #00f;
		text-decoration: underline;
	}
	#contents .about1 .point ol li div p a.pdf:after{
		display: inline-block;
		content: "";
		width: 18px;
		height: 18px;
		background: url(../common/images/icon-pdf.png) no-repeat;
		background-size: 18px;
		vertical-align: middle;
		margin-left: 5px;
	}
	/* .about2 */
	#contents .about2{
		clear: both;
	}
	#contents .about2 .support{
		clear: both;
		padding: 20px 3%;
		background: #e6e6e6;
		overflow: hidden;
	}
	#contents .about2 .support h4{
		color: #1b1464;
		font-size: 18px;
		text-align: center;
		margin-bottom: 15px;
	}
	#contents .about2 .support ol{
		position: static;
		overflow: hidden;
		margin-bottom: 20px;
	}
	#contents .about2 .support ol li{
		width: auto;
		font-size: 14px;
		background: #fff;
		padding: 0 15px 20px;
		border: 1px solid #1b1464;
		margin-bottom: 50px;
	}
	#contents .about2 .support ol li:nth-child(1){
		position: relative;
		left: inherit;
		bottom: inherit;
	}
	#contents .about2 .support ol li:nth-child(1):before{
		display: block;
		content: "";
		height: 30px;
		background: url(images/support1.png) no-repeat center top;
		background-size: auto 30px;
		margin-bottom: 15px;
	}
	#contents .about2 .support ol li:nth-child(1):after{
		position: absolute;
		right:0;
		top: 100%;
		display: inline-block;
		content: "";
		width: 100%;
		height: 50px;
		background: url(images/arrow-desuga-sp.png) no-repeat center bottom;
		background-size: auto 50px;
		margin-top: 0;
		z-index: 9;
	}
	#contents .about2 .support ol li:nth-child(2){
		position: relative;
		left: inherit;
		bottom: inherit;
	}
	#contents .about2 .support ol li:nth-child(2):before{
		display: block;
		content: "";
		height: 30px;
		background: url(images/support2.png) no-repeat center top;
		background-size: auto 30px;
		margin-bottom: 15px;
	}
	#contents .about2 .support ol li:nth-child(2):after{
		position: absolute;
		right:0;
		top: 100%;
		display: inline-block;
		content: "";
		width: 100%;
		height: 50px;
		background: url(images/arrow-sarani-sp.png) no-repeat center bottom;
		background-size: auto 50px;
		margin-top: 0;
		z-index: 9;
	}
	#contents .about2 .support ol li:nth-child(3){
		float: none;
		margin-bottom: 0;
	}
	#contents .about2 .support ol li:nth-child(3):before{
		display: block;
		content: "";
		height: 30px;
		background: url(images/support3.png) no-repeat center top;
		background-size: auto 30px;
		margin-bottom: 15px;
	}
	#contents .about2 .support ol li strong{
		color: #1b1464;
		font-size: 16px;
	}
	#contents .about2 .support p{
		font-size: 18px;
		font-weight: bold;
	}
	#contents .about2 .support2{
		clear: both;
		text-align: left;
		padding: 40px 3%;
		background: #e6e6e6;
		overflow: hidden;
	}
	/* .about3 */
	#contents .about3{
		clear: both;
	}
	#contents .about3 .moviewrap{
		max-width: 750px;
		margin: 0 auto;
	}
}