header .left .inner p{ color: #fff; }

.bg-half{
	min-height: 1500px;
	background: #004d60; /* Old browsers */
	background: -moz-linear-gradient(left, #004d60 0%, #004d60 50%, #ff4700 50%, #ff4700 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #004d60 0%,#004d60 50%,#ff4700 50%,#ff4700 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #004d60 0%,#004d60 50%,#ff4700 50%,#ff4700 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004d60', endColorstr='#ff4700',GradientType=1 ); /* IE6-9 */
	padding: 125px 0 80px;
}
.bg-half h1{ font-size: 70px; font-weight: 900; color: #fff; text-align: center; line-height: 1.2; margin-bottom: 110px; }

.bg-half .wrap{ position: relative; width: 1120px; }
.bg-half .wrap .item01{ width: 210px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

.bg-half .flex{ display: flex; }
.bg-half .flex .left{ width: 100%; position: relative; padding-bottom: 690px; }
.bg-half .flex .right{ width: 100%; position: relative; padding-bottom: 690px; }

.bg-half h2{ font-size: 36px; font-weight: 900; color: #fff; text-align: center; line-height: 1.4; margin-top: 60px; }
.bg-half h2 a{ line-height: inherit; display: inline-block; padding-bottom: 120px; text-align: center; position: relative; }
.bg-half h2 a:before,
.bg-half h2 a:after{ content: ''; width: 94px; height: 94px; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .3s; }
.bg-half h2 a:after{ opacity: 0; }
.bg-half .left h2 a:before{ background-image: url(../images/index/arrow01.png); }
.bg-half .left h2 a:after{ background-image: url(../images/index/arrow01-on.png); }
.bg-half .right h2 a:before{ background-image: url(../images/index/arrow02.png); }
.bg-half .right h2 a:after{ background-image: url(../images/index/arrow02-on.png); }
.bg-half h2 a:hover{ opacity: 1; }
.bg-half h2 a:hover:before{ opacity: 0; }
.bg-half h2 a:hover:after{ opacity: 1; }

.bg-half .item02.on,
.bg-half .item03.on{ opacity: 0; z-index: 1; }
.bg-half .item02{ width: 441px; position: absolute; bottom: 0; left: 0; transition: .3s; z-index: 2; }
.bg-half .item03{ width: 462px; position: absolute; bottom: 0; right: 0; transition: .3s; z-index: 2; }
.bg-half h2:hover + img{ opacity: 0; } 
.bg-half h2:hover + img + img.on{ opacity: 1; }



@media(max-width: 768px){
	header nav{ width: 100%; height: 100%; }
	header nav .sp-logo{ width: 44.2666vw; position: absolute; top: 4vw; left: 4vw; }
	header nav .sp-btn{ width: 81.3333vw; margin: 0 auto; color: #fff; padding: 6.6666vw 0 13.333vw; position: relative; }
	header nav .sp-btn:after{ content: ''; width: 4.1333vw; height: 4.1333vw; border-right: solid 2px; border-top: solid 2px; position: absolute; bottom: 3vw; left: 50%; transform: rotate(45deg) translateX(-50%); }
	header nav .sp-btn.navy{ background: #03303b; margin-bottom: 10.6666vw; margin-top: 8vw; }
	header nav .sp-btn.orange{ background: #ff4700; }
	header nav .sp-btn span{ font-size: 4.2666vw; display: block; text-align: center; }
	header nav .sp-btn strong{ font-size: 7.466vw; display: block; text-align: center; font-weight: 700; line-height: 1.2; }

	.bg-half{ min-height: 100vh; height: 184.666vw; }
	.bg-half h1{ font-size: 6.133vw; line-height: 1.4; margin-bottom: 14vw; }
	.bg-half .wrap{ width: 100%; }
	.bg-half .wrap .item01{ width: 43.4666vw; top: 18vw; }

	.bg-half h2{ font-size: 4.533vw; margin-top: 0; }
	.bg-half h2 a{ padding-bottom: 16vw; }
	.bg-half h2 a:before, .bg-half h2 a:after{ width: 12.533vw; height: 12.533vw; }
}