h3 {
    font-size: 2.8vw;
    text-align: center;
    margin-bottom: 5px;
    font-family: 'Mitr', sans-serif;
}

#contents{
	margin-top:140px;}

#story #topimg{
	position:relative;
	/*height:580px*/;
	width:100%;
	background-color:#e7e7e7;
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
	
    height: 0;
    /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
    padding-top: 37.5%;
	}

#story.story01 #topimg{
	background:url(../img/story/01/topimg.jpg) 0 0 no-repeat;
	background-size: contain;}
#story.story02 #topimg{
	background:url(../img/story/02/topimg.jpg) 0 0 no-repeat;
	background-size: contain;}

#story h3.catch{
	font-size:2.8rem;
	text-align:left;
	line-height:1.3;
	margin-bottom:5px;
	color:#FFF;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	text-orientation: upright;
	position:absolute;
}

#story h3.catch span span{
font-family: sans-serif;}

#story.story01 h3.catch{top:-30vw; right:0;}
#story.story02 h3.catch{top:-30vw; left:0;}

#story h3.catch>span{
	display:inline-block;
	background:#004e90;
	margin:0 8px;
	padding:10px 0 10px 3px;
	}

#story h4{
font-family: 'Mitr', sans-serif;}

@media screen and (min-width: 1480px) {

#story h3.catch{
	font-size:3.8rem;
}

}

@media screen and (max-width: 769px) {

#story h3.catch{
	font-size:2.4vw;
}

#story.story01 h3.catch{top:-30vw; right:0;}
#story.story02 h3.catch{top:-30vw; left:0;}


}


@media screen and (max-width: 480px) {

#story #topimg{
	height:300px;
	}

#story.story01 #topimg{
	background:url(../img/story/01/topimg_sp.jpg) 0 0 no-repeat;
	background-size: cover;}
#story.story02 #topimg{
	background:url(../img/story/02/topimg_sp.jpg) 0 0 no-repeat;
	background-size: cover;}
	
#story h3.catch{
	font-size:1.4rem;
	text-align: right;
	line-height:1;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
	position:absolute;
	top:-140px;
}

#story.story01 h3.catch{top:-270px; right:0px;}
#story.story02 h3.catch{top:-110px; left:0; right:0;}

#story h3.catch > span{
	margin:3px 8px;
	padding:5px 10px 5px 10px;
	}

}

/*introduction*/	
#introduction{}

#introduction h2 span{
	display:block;
	color:#004e90;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:1.8vw;
	font-weight:bold;
	line-height:1.5;}

.story01 #introduction h2{text-align:left;}
.story02 #introduction h2{text-align:right;}


#introduction h2 span.year{
	color:#000;
	font-size:1.2vw;
	}

#introduction h2 span.company{
	font-size:1.2vw;
	}
	
#introduction h3{
	color:#004e90;
	font-size:3.0vw;
	text-align:center;
	line-height:1.5;
	margin:100px auto 30px;}

@media screen and (max-width: 769px) {
#introduction h2 span{
	font-size:2rem;}

#introduction h2 span.year{
	font-size:1.4rem;
	}

#introduction h2 span.company{
	font-size:1.4rem;
	}

#introduction h3{
	font-size:3.0vw;
	margin:50px auto 30px;}

}

@media screen and (max-width: 480px) {

#introduction h2 span{
	font-size:1.8rem;}


#introduction h3{
	font-size:2.0rem;
	line-height:1.3;
	margin:30px auto 30px;}
}


/* #member */

/*#member .wrap{
	padding:30px 0;
}*/

#member h4 {
  position: relative;
  display: block;
  font-size:1.8vw;
  padding: 0 55px;
  text-align: center;
  color:#004e90;
}

#member h4:before,#member h4:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 40%;
  height: 2px;
  background-color: #004e90;
}

#member h4:before {
  left:0;
}
#member h4:after {
  right: 0;
}

#member h5{
	font-size:1.4vw;}

#member p{
	font-size:0.8vw;
	letter-spacing: 0em;}

#member .wrap{
	width:70%;
	padding:30px 0 70px;}
	
#member .flexbox{
	width:70%
	/*justify-content: center;*/}

#member .flexbox div{
	width:20%;}

#member .flexbox.line3 div{
	width:28%;}


#member .flexbox.line2{
	width:53%;}

#member .flexbox.line2 div{
	width:37%;}



@media screen and (max-width: 769px) {

#member h5{
	font-size:1.6rem;}

#member p{
	font-size:1rem;}


#member .wrap{
	width:100%;
	padding:30px 20px 70px;}

}

@media screen and (max-width: 480px) {
#member h4:before,#member h4:after {
  width: 30%;
}

#member .wrap{
	padding:30px 20px;}

#member h4 {
    font-size: 1.8rem;
}

#member .flexbox{
	width:100%
	/*justify-content: center;*/}

#member .flexbox div{
	width:48%;
	margin-bottom:20px;}

#member .flexbox.line3 div{
	width:47%;}


#member .flexbox.line2{
	width:100%;}

#member .flexbox.line2 div{
	width:47%;}

}





/* column */

/*#column h4{
	font-size:1.8rem;
	color:#004e90;
    margin-bottom: 40px;
}

#column h4::after{
    content: '';
    display: block;
    background: #004e90;
    height: 2px;
    width: 2000px;
	margin-top:5px;

	
	position:absolute;
	left:52%;
}

#column .flexbox{
	flex-direction:row-reverse;
	}

#column .flexbox div{
	width:48%;
	margin-bottom:70px;
	}

#column .flexbox div.imgbox{
	text-align:center;
	}


@media screen and (max-width: 959px) {
	
#column h4::after{
    height: 2px;
    width:100%;
	position: static;
}

#column .flexbox div{
	width:100%;
	margin-bottom:30px;
	}

#column dl.flexbox{
	max-width:450px;
	}

}

@media screen and (max-width: 480px) {

#column .wrap{
	padding-top:0;
}
}*/





/* epilogue */
#epilogue .wrap{
	padding-top:0px;
	width:50vw;
}

#epilogue h4{
	font-size:1.8vw;
	color:#004e90;
    margin-bottom: 40px;
	text-align:center;
}

#epilogue h4::after{
    content: '';
    display: block;
    background: #004e90;
    height: 2px;
    width: 100%;
	margin-top:5px;
}

#epilogue p{
	margin-bottom:30px;
}


@media screen and (max-width: 769px) {

#epilogue .wrap{
	width:80%;
}


}

@media screen and (max-width: 480px) {

#epilogue .wrap{
	width:100%;
}

#epilogue h4{
	font-size:1.8rem;
}


}


/* project
-----------------------------------------*/

#project {background:url(../../img/common/sub_bg01.png) repeat;}/* storyページのみ */

#project h3 {
	color:#fff;
	text-align:center;
	font-size:2.8vw;
	margin-bottom:30px;}


#project .project01{
	margin-bottom:60px;
	text-align:right;}

#project .project02, #project .project01{
	position:relative;
    width: 100%;
	height:30vw;
}

#project .project01{
	margin-bottom:60px;
	text-align:right;}
	

#project .project01 .imgbox{
	position:absolute;
	right:0;
	width:60%;
	}

#project .project01 .text{
	position:absolute;
	left:0;
	width:42%;}

#project .project02 .imgbox{
	position:absolute;
	left:0;
	width:60%;
	}

#project .project02 .text{
	position:absolute;
	right:0;
	width:52%;}

#project .something{
	text-align:center;
	font-size:1.8vw;
	color:#fff;
	font-style:italic;
	margin-bottom:22px;}

#project h4{
	font-size:1.8vw;
	color:#004e90;
	line-height:2;}

#project h4>span{
	display:inline-block;
	background:#fff;
	margin:5px 0;
	padding:0 10px;}

#project .project01 h4{
	text-align:right;}

@media screen and (max-width: 959px) {
	
/*#project .project02,#project .project01{
	height:240px;
}*/

/*#project .project02 .imgbox,#project .project01 .imgbox{
	height:240px;}
*/
/*#project .project02 .text,#project .project01 .text{
	width:360px;
	height:240px;}

#project .something{
	margin-bottom:5px;}

#project h4{
	font-size:2.0rem;}

#project h4 span{
	margin:3px 0;}

#project .btn02{
	margin-top:10px !important;}

}*/
}

@media screen and (max-width: 480px) {

#project h3 {
	font-size:2.8rem;}

	
#project .project02, #project .project01{
	position:relative;
	height: 1vw;
}

#project .project02,#project .project01{
	position: static;
	height: auto;
}

#project .project02{
	margin-bottom:40px;}

#project .project02 .imgbox,#project .project01 .imgbox{
	position: static;
	width:100%;
	height: auto;}

#project .project02 .text,#project .project01 .text{
	position:relative;
	width:100%;
	height: auto;
	margin-top:15px;}


#project .something{
	font-size:1.8rem;
}

#project h4{
	font-size:1.4rem;}
}