@charset "UTF-8";

#main-inner .main-img::after{
  background: url(../images/story/story-main.jpg) no-repeat #000;
	background-size: 1500px;
	background-position: center;
}
.float-col{
	max-width: 1060px;
	/*max-width: 1280px;*/
	margin: 0 auto 3rem;
	position: relative;
	padding: 2rem 20px;
	overflow: hidden;
	height: auto;
	box-sizing: content-box;
}
.img-col{
	max-width: 860px;
	position: relative;
	z-index: 0;
}
.img-col img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
/*.brightness {
	animation-name: brightness;
	-webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes brightness {
  from{
	  opacity: 0;
     filter: brightness(1);
  }
	40%, 43% {
		opacity: 1;
  }
  to {
	  opacity: 1;
	  filter: brightness(0.4);
  }
}*/
.text-col{
	max-width: 730px;
	position: relative;
	z-index: 10;
}
.text-col p{
	background: rgba(49,49,49,.9);
	max-width: 575px;
	padding: 1rem;
	box-sizing: border-box;
}
/*.text-col.f-left{
	margin-left: 2rem;
}*/
.text-col.f-right{
	margin-right: 2rem;
	text-align: right;
}
.text-col.f-right p{
	float: right;
	text-align: left;
}
.f-left{
	float: left;
}
.f-right{
	float: right;
}
.mission1 .text-col,
.mission3 .text-col{
	margin-top: -30%;
}
.mission2 .img-col{
	margin-top: 15%;
}
.mission2 .text-col{
	margin-top: -60%;
}

/*　レスポンシブ対応
================================*/
@media screen and (max-width: 768px) {
/*iPad縦 / iPhone 7/6 Plus横*/
	.float-col{
		max-width: 100%;
	}
	.f-left,.f-right{
		float: none;
	}
	.img-col{
		max-width: 100%;
	}
	.text-col{
		max-width: 100%;
		margin: 0;
		/*padding: 0 20px;*/
	}

	.mission1 .text-col{
    	margin-top:-6rem;
	}
	.mission2 .img-col{
		margin-top: 0;
	}
	.mission2 .text-col{
		margin-top:-6rem;
	}
	.mission3 .text-col{
    	margin-top:-6rem;
	}
	.text-col p{
		max-width: 100%;
	}
	.text-col.f-left{
		margin-left: 0;
	}
	.text-col.f-right {
    	margin-right: 0;
    	text-align: left;
	}
	.head-type2 {
    font-size: 2rem;
	}

}

@media screen and (max-width: 667px) {
/*iPhone 7/6横*/
	.text-col .head-type2 br{
		display: none;
	}
	.head-type2 {
    font-size: 1.5rem;
	}
}

@media screen and (max-width: 568px) {
/*iPhone 5/SE横*/
}

@media screen and (max-width: 480px) {
/*iPhone 7/6 Plus縦*/
}

@media screen and (max-width: 375px) {
/*iPhone 7/6縦*/
}

@media screen and (max-width: 320px) {
/*iPhone 5/SE/4以下縦*/
}