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

/*----------
 about mv
----------*/
#about #mv {
	position: relative;
	padding-top: 540px;
	background: url(../img/about/mv_bg_pc.png) no-repeat;
	background-size: cover;
}
#about #mv h1 {
	position: absolute;
	top: 60px;
	right: 0;
	left: 0;
	width: 537px;
	margin: 0 auto;
	text-align: center;
	z-index: 1;
}

@media (max-width: 768px) {
	#about #mv {
		padding-top: 37.5vw;
		background: url(../img/about/mv_bg_sp.png) no-repeat;
		background-size: cover;
	}
	#about #mv h1 {
		top: 14.0625vw;
		width: 71.6vw;
	}
	#about #mv h1 img {
		width: 100%;
	}
}

/*----------
 about　sec_01
----------*/
#about #sec_01 {
	position: relative;
	height: 640px;
	border-bottom: 2px solid #003149;
	background: url(../img/global/pattern_03.png);
}
#about #sec_01 .inner {
	padding-top: 120px;
}
#about #sec_01 .img {
	position: absolute;
	top: -380px;
	right: 0;
	left: 0;
	width: 300px;
	margin: 0 auto;
}
#about #sec_01 h1 {
	width: 686px;
	margin: 0 auto 50px;
}
#about #sec_01 ul {
	width: 1000px;
	margin: 0 auto;
}
#about #sec_01 ul li {
	float: left;
	width: 33%;
	text-align: center;
}
#about #sec_01 ul li h2 {
	margin: 0 auto 40px;
}
#about #sec_01 ul li:nth-child(1) h2 {
	width: 205px;
}
#about #sec_01 ul li:nth-child(2) h2 {
	width: 240px;
}
#about #sec_01 ul li:nth-child(3) h2 {
	width: 205px;
}
#about #sec_01 ul li .btn {
	text-align: center;
}
#about #sec_01 ul li .btn a {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: 200px;
	height: 200px;
	margin: 0 auto 30px;
}
#about #sec_01 ul li:nth-child(1) .btn a {
	background: url(../img/about/btn_01_a_off_pc.png) no-repeat;
}
#about #sec_01 ul li:nth-child(2) .btn a {
	background: url(../img/about/btn_01_b_off_pc.png) no-repeat;
}
#about #sec_01 ul li:nth-child(3) .btn a {
	background: url(../img/about/btn_01_c_off_pc.png) no-repeat;
}
#about #sec_01 ul li:nth-child(1) .btn a:hover {
	background: url(../img/about/btn_01_a_on_pc.png) no-repeat;
}
#about #sec_01 ul li:nth-child(2) .btn a:hover {
	background: url(../img/about/btn_01_b_on_pc.png) no-repeat;
}
#about #sec_01 ul li:nth-child(3) .btn a:hover {
	background: url(../img/about/btn_01_c_on_pc.png) no-repeat;
}
#about #sec_01 ul li .txt {
	margin: 0 auto;
}
#about #sec_01 ul li:nth-child(1) .txt {
	width: 196px;
}
#about #sec_01 ul li:nth-child(2) .txt {
	width: 194px;
}
#about #sec_01 ul li:nth-child(3) .txt {
	width: 181px;
}

@media (max-width: 768px) {
	#about #sec_01 {
		position: relative;
		height: 205vw;
	}
	#about #sec_01 .inner {
		padding-top: 7.8125vw;
	}
	#about #sec_01 .img {
		position: static;
		width: 71.875vw;
		margin: 0 auto 7.8125vw;;
	}
	#about #sec_01 .img img {
		width: 100%;
	}
	#about #sec_01 h1 {
		width: 81.25vw;
		margin: 0 auto 7.8125vw;
	}
	#about #sec_01 h1 img {
		width: 100%;
	}
	#about #sec_01 ul {
		width: 100%;
		padding: 0 9.375vw;
	}
	#about #sec_01 ul li {
		float: left;
		width: 33%;
		text-align: center;
	}
	#about #sec_01 ul li:not(:last-child) {
		margin-right: 1px;
	}
	#about #sec_01 ul li h2 {
		margin: 0 auto 2.1875vw;
	}
	#about #sec_01 ul li:nth-child(1) h2 {
		width: 21.875vw;
	}
	#about #sec_01 ul li:nth-child(2) h2 {
		width: 21.875vw;
	}
	#about #sec_01 ul li:nth-child(3) h2 {
		width: 20.3125vw;
	}
	#about #sec_01 ul li h2 img {
		width: 100%
	}
	#about #sec_01 ul li .btn {
		text-align: center;
	}
	#about #sec_01 ul li .btn a {
		width: 23.4375vw;
		height: 23.4375vw;
		margin: 0 auto 2.1875vw;
	}
	#about #sec_01 ul li:nth-child(1) .btn a {
		background: url(../img/about/btn_01_a_sp.png) no-repeat;
		background-size: 100%;
	}
	#about #sec_01 ul li:nth-child(2) .btn a {
		background: url(../img/about/btn_01_b_sp.png) no-repeat;
		background-size: 100%;
	}
	#about #sec_01 ul li:nth-child(3) .btn a {
		background: url(../img/about/btn_01_c_sp.png) no-repeat;
		background-size: 100%;
	}
	#about #sec_01 ul li:nth-child(1) .btn a:hover {
		background: url(../img/about/btn_01_a_sp.png) no-repeat;
		background-size: 100%;
	}
	#about #sec_01 ul li:nth-child(2) .btn a:hover {
		background: url(../img/about/btn_01_b_sp.png) no-repeat;
		background-size: 100%;
	}
	#about #sec_01 ul li:nth-child(3) .btn a:hover {
		background: url(../img/about/btn_01_c_sp.png) no-repeat;
		background-size: 100%;
	}
	#about #sec_01 ul li .txt img {
		width: 100%;
	}
	#about #sec_01 ul li:nth-child(1) .txt {
		width: 17.1875vw;
	}
	#about #sec_01 ul li:nth-child(2) .txt {
		width: 21.875vw;
	}
	#about #sec_01 ul li:nth-child(3) .txt {
		width: 19.0625vw;
	}
}

/*----------
 about　sec_02
----------*/
#about #sec_02 {
	position: relative;
	height: 850px;
	border-bottom: 2px solid #003149;
	background: url("../img/about/bg_01_pc.png") no-repeat center,  url(../img/global/pattern_03.png) center;
	background-size: cover, auto;
}
#about #sec_02 .inner {
	width: 1100px;
	margin: 0 auto;
	padding-top: 50px;
}
#about #sec_02 .inner:before {
	content: "";
	position: absolute;
	top: 0;
	width: 1050px;
	height: 100%;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	background: url(../img/global/pattern_02.png);
}

#about #sec_02 h1 {
	width: 970px;
	margin: 0 auto 50px;
}
#about #sec_02 p {
	color: #003149;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 2.1;
	margin-bottom: 45px;
}
#about #sec_02 .img {
	width: 634px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	#about #sec_02 {
		height: 210vw;
		background: url(../img/global/pattern_03.png);
	}
	#about #sec_02 .inner {
		width: 100%;
		padding: 7.8125vw 9.375vw;
	}
	#about #sec_02 .inner:before {
		content: none;
	}
	#about #sec_02 h1 {
		width: 100%;
		margin: 0 auto 7.8125vw;
	}
	#about #sec_02 h1 img {
		width: 100%;
	}
	#about #sec_02 p {
		font-size: 3.4375vw;
		text-align: left;
		margin-bottom: 7.8125vw;
	}
	#about #sec_02 .img {
		width: 76.875vw;
	}
	#about #sec_02 .img img {
		width: 100%;
	}
}

/*----------
 about　sec_03
----------*/
#about #sec_03 {
	position: relative;
	height: 960px;
	border-bottom: 2px solid #003149;
	background: url("../img/about/bg_02_pc.png") no-repeat center,   url(../img/global/pattern_03.png) center;
	background-size: cover, auto;
}
#about #sec_03 .inner {
	width: 1100px;
	margin: 0 auto;
	padding-top: 50px;
}
#about #sec_03 .inner:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 1050px;
	height: 100%;
	margin: 0 auto;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	background: url(../img/global/pattern_02.png);
}

#about #sec_03 h1 {
	width: 970px;
	margin: 0 auto 50px;
}
#about #sec_03 p {
	color: #003149;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 2.1;
	margin-bottom: 50px;
}
#about #sec_03 .img {
	width: 666px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	#about #sec_03 {
		height: 271.875vw;
		background: url(../img/global/pattern_03.png);
	}
	#about #sec_03 .inner {
		width: 100%;
		margin: 0 auto;
		padding: 7.8125vw 9.375vw;
	}
	#about #sec_03 .inner:before {
		content: none;
	}
	#about #sec_03 h1 {
		width: 100%;
		margin: 0 auto 7.8125vw;
	}
	#about #sec_03 h1 img {
		width: 100%;
	}
	#about #sec_03 p {
		font-size: 3.4375vw;
		text-align: left;
		margin-bottom: 7.8125vw;
	}
	#about #sec_03 .img {
		width: 78.75vw;
	}
	#about #sec_03 .img img {
		width: 100%;
	}
}

/*----------
 about　sec_04
----------*/
#about #sec_04 {
	position: relative;
	height: 1040px;
	background: url("../img/about/bg_03_pc.png") no-repeat center,
		url(../img/global/pattern_03.png) center;
	background-size: cover, auto;
}
#about #sec_04 .inner {
	width: 1100px;
	margin: 0 auto;
	padding-top: 50px;
}
#about #sec_04 .inner:before {
	content: "";
	position: absolute;
	top: 0;
	width: 1050px;
	height: 100%;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	background: url(../img/global/pattern_02.png);
}

#about #sec_04 h1 {
	width: 970px;
	margin: 0 auto 50px;
}
#about #sec_04 p {
	color: #003149;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 2.1;
	margin-bottom: 45px;
}
#about #sec_04 .img {
	width: 340px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	#about #sec_04 {
		height: 280vw;
		background: url(../img/global/pattern_03.png);
	}
	#about #sec_04 .inner {
		width: 100%;
		padding: 7.8125vw 9.375vw;
	}
	#about #sec_04 .inner:before {
		content: none;
	}

	#about #sec_04 h1 {
		width: 100%;
		margin: 0 auto 7.8125vw;
	}
	#about #sec_04 h1 img {
		width: 100%;
	}
	#about #sec_04 p {
		font-size: 3.4375vw;
		text-align: left;
		margin-bottom: 7.8125vw;
	}
	#about #sec_04 .img {
		width: 70.3125vw;
	}
	#about #sec_04 .img img {
		width: 100%;
	}
}