@charset "utf-8";

/* =======================================

	CommonElements

======================================= */
body {
	font-size: 100%;
	line-height: 160%;
	color: #000;
	text-align: center;
	background: #fff;
	position: relative;
	overflow: hidden;
	visibility: hidden;
}

a:link { text-decoration:nderline; color: #0000ff;}
a:visited { text-decoration:nderline; color: #0000ff;}
a:active { text-decoration:nderline; color: #0000ff;}
a:hover { text-decoration:none; color: #0000ff;}




@media (max-width: 777px) {
	
	/*** --------------------------------
		　　　　ヘッダー部分
	-------------------------------- ***/
	.onlysp{
		display: block !important;		
	}
	.onlypc{
		display: none !important;
	}
		h1 {
		top: 0;
		left: 0;
		padding: 10px 0;
		width: 100%;
		background: #000;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		position: absolute;
	}
	
	
	/* #container
	--------------------------- */
	#container {
		top: 0;
		left: 0;
		width: 100%;
		position: absolute;
		z-index: 1;
	}
	
	/* .stageBase
	--------------------------- */
	.stageBase {
		width: 100%;
		position: relative;
		overflow: hidden;
		max-width: 1500px;
		margin: 0 auto;
	}
	.stageBase .fieldWrap {
		padding: 5% 0 0 0;
		text-align: center;
		height: 100%;
	}
	.fieldWrap p,.fieldWrap span{
		font-family:"ヒラギノ明朝 ProN W3","HiraMinProN-W3","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	    font-size: 18px;
	    color: white;
	    padding-top: 10%;
	}
	.fieldWrap h2{
		font-family:"ヒラギノ明朝 ProN W3","HiraMinProN-W3","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
		font-size: 14px;
		color: white;
		padding: 10px 0;
		margin-bottom: 30%;
	}
	.fieldWrap p.description{
		font-size: 22px;
		line-height: 1.4;
	}
	
	#stage1 {background:#fff;}
	#stage1 img{
		width: 80%;
	}
	#stage2 {
		background:url("../img/first_background.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		
	}
	#stage2 .fieldWrap{
		padding: 8% 0 0 0;
	}
	#stage2 .fieldWrap h2{
		margin-bottom: 6%;
	}
	#stage3 {
		/*background:url("../img/second_background.jpg");*/
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		width: 100%;
	}
	#stage3 p{
		color: black;
	}
	#stage3 h2{	
		color: black;
		margin-bottom: 10%;
	}
	#stage3 p.description{
		font-size: 20px;
		padding: 1% 8% 1% 9%;
		text-align: left;
	}
	#stage4 {
		background: #fff;
	}
	#stage4 .coaTop{
		height: 20%;
	}
	#stage4 .coaBottom{
		height: 70%;
		background: url("../img/third_background.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center top;
		margin-top: 10%;
	}
	#stage4 p,#stage4 h2{
		color: black;
	}
	#stage5 p.description{
		font-size: 14px;
		text-align: left;
	}
	#stage5 {
		background:#fff;
	}
	#stage5 p,#stage5 h2,#stage5 span{
		color: black;
	}
	#stage5 .aboutTop{
		height: 20%;
	}
	#stage5 .aboutBottom{
		height: 80%;
		background: #ededed;
		padding-left: 5%;
		padding-top: 3%;
	}
	#stage5 .aboutBottom p{
		font-size: 14px;
		padding-top: 10px;	
	}
	#stage5 .aboutBottom span{
		font-size: 14px;
		
	}
	#stage6 p,#stage6 h2,#stage6 span{
		color: black;
	}
	#stage6 p.description{
		font-size: 20px;
	}
	#stage7 p,#stage7 span{
		color: black;
	}
	#stage7 h2{
		color: black;
		margin-bottom: 2.5%;	
	}
	#stage7 dt{
	  width: 30%;
	  float: left;
	  text-align: right;
	  clear: both;
	  padding-right: 2%;
	  font-weight: normal;
	  margin-top: 1px;
	  font-size: 12px;
	}
	#stage7 dd{
	  width: 70%;
	  float: right;
	  text-align: left;
	  font-weight: normal;
	}
	#stage7 dd input,#stage7 dd input{
		width: 90%;
		height: 10px;
	}
	#stage7 dd input,#stage7 dd textarea{
		margin-bottom: 1%;
		width: 90%;
	}
	#stage7 .fieldWrap{
		padding: 2% 0 0 0;
	}
	#stage7 .fieldWrap input[type="image"]{
		height: auto;
		width: 90%;
	}
	#stage7 .fieldWrap input[type="image"]:hover{
		opacity: 0.8;
	}
	#stage7 .privacyPolicy{
		font-size: 13px;
	}
	#stage7 .privacyPolicy input{
		margin-right: 5px;
		width: auto;
	}
	p.copyRight {
	  bottom: 0;
	  left: 0;
	  padding: 13px 0 11px 0;
	  width: 100%;
	  font-size: 12px !important;
	  position: absolute;
	  background: #333;
	  color: white !important;
	}
	#stage7 p.description{
		font-size: 20px;
		margin-top: 5%;
	}
	/* .stageSlide
	--------------------------- */
	.stageSlide {
		position: relative;
		overflow: hidden;
		visibility: hidden;
	}
	.stageSlide .slideWrap {
		top: 0;
		left: 0;
		position: absolute;
		overflow: hidden;
	}
	.stageSlide .slideWrap:before,
	.stageSlide .slideWrap:after {
		content: " ";
		display: table;
	}
	.stageSlide .slideWrap:after {clear: both;}
	.stageSlide .slideWrap {*zoom: 1;}
	
	.stageSlide .slidePanel {
		float: left;
		overflow: hidden;
	}
	
	.stageSlide .sdPrev,
	.stageSlide .sdNext {
		margin-top: -25px;
		top: 50%;
		width: 50px;
		height: 50px;
		display: block;
		position: absolute;
		z-index: 99;
	}
	.stageSlide .sdPrev {
		left: 80px;
		background: transparent url(../img/slide_prev.png) no-repeat left top;
	}
	.stageSlide .sdNext {
		right: 80px;
		background: transparent url(../img/slide_next.png) no-repeat left top;
	}
	
	.stageSlide .slideNav {
		bottom: 70px;
		left: 0;
		width: 100%;
		height: 15px;
		text-align: center;
		position: absolute;
		z-index: 98;
	}
	.stageSlide .slideNav a {
		margin: 0 5px;
		width: 15px;
		height: 15px;
		background: transparent url(../img/nav.png) no-repeat center center;
		display: inline-block;
		overflow: hidden;
	}
	.stageSlide .slideNav a.pnActive {
		background: transparent url(../img/nav_acv.png) no-repeat center center;
	}
	
	/* #pageNav
	--------------------------- */
	#pageNav {
		top: 0;
		right: 25px;
		width: 15px;
		text-align: center;
		position: fixed;
		z-index: 2;
		display: none;
	}
	#pageNav ul {
		width: 15px;
		display: block;
	}
	#pageNav ul li {
		padding-bottom: 5px;
		width: 15px;
		height: 15px;
		display: block;
		overflow: hidden;
	}
	#pageNav ul li a {
		width: 15px;
		height: 15px;
		background: transparent url(../img/nav.png) no-repeat center center;
		display: block;
	}
	#pageNav ul li.activeStage a {
		background: transparent url(../img/nav_acv.png) no-repeat center center;
	}
	
	/* #pageDown
	--------------------------- */
	#pageDown {
		bottom: 30px;
		left: 0;
		width: 100%;
		height: 40px;
		text-align: center;
		position: fixed;
		overflow: hidden;
		z-index: 3;
	}
	#pageDown a {
		margin: 0 auto;
		height: 35px;
		background: transparent url("../img/scroll.png") no-repeat center center;
		display: block;
	}
	
	#nav{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 3;
		display: none;
	}
	#nav ul li{
		background: #3e3a39;
		height: 52px;
		text-align: left;
	}
	#nav ul li a{
		color: white;
	    font-size: 15px;
	    display: block;
	    line-height: 52px;
	    padding-left: 10px;
	    padding-right: 10px;
	}
	.navBtn{
		position: fixed;
	    top: 0;
	    right: 0;
	    z-index: 4;
	}
	.navBtn img{
		width: 40px;
	    margin: 10px;
	}
	.navBtn img:hover{
		cursor: pointer;
	}
	#modal .inner{
		width: 90%;
  	    margin: 0 auto;
	    background: white;
	    padding: 1% 5% 3% 5%;
	}
	#modal .inner .ttl{
	   text-align: center;
	   font-size: 20px;
 	   font-weight: 900;
 	   padding: 10px 0;
 	   margin-bottom: 5px;
	  
	}
	#modal .inner p{
	   font-size: 13px;
	   margin-bottom: 20px;
	   margin-left: 10px;
	   line-height: 1.4;
  	}
	#modal .inner p.privcyTtl{
		margin-top: 1%;
		margin-left: 0;
		margin-bottom: 5px;
		font-size: 14px;
		padding: 0 0 0px 5px;
		border-left: 5px solid #ec7474;
	}
	#modal .inner .close{
		width: 280px;
		margin: 0 auto;
		transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		transition-delay: 0.2s;
		position: relative;
  }
	#modal .inner .close span{
		display: block;
		font-size: 20px;
		padding: 0 10px;
		width: 280px;
		color: white;
		position: relative;
		cursor: pointer;
		background: #111;
	}

}

@media (min-width: 778px) {
	.onlysp{
		display: none !important;		
	}
	.onlypc{
		display: block !important;
	}
	
	h1 {
		top: 0;
		left: 0;
		padding: 10px 0;
		width: 100%;
		background: #000;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		position: absolute;
	}
	
	
	/* #container
	--------------------------- */
	#container {
		top: 0;
		left: 0;
		width: 100%;
		position: absolute;
		z-index: 1;
	}
	
	/* .stageBase
	--------------------------- */
	.stageBase {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.stageBase .fieldWrap {
		padding: 5% 0 0 0;
		text-align: center;
		height: 100%;
	}
	.fieldWrap p,.fieldWrap span{
		font-family:"ヒラギノ明朝 ProN W3","HiraMinProN-W3","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
	    font-size: 36px;
	    color: white;
	    padding-top: 10px;
	}
	.fieldWrap h2{
		font-family:"ヒラギノ明朝 ProN W3","HiraMinProN-W3","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
		font-size: 28px;
		color: white;
		padding: 10px 0;
		margin-bottom: 10%;
	}
	.fieldWrap p.description{
		font-size: 50px;
		line-height: 1.4;
	}
	
	#stage1 {background:#fff;}
	#stage2 {
		background:url("../img/first_background.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		
	}
	#stage2 .fieldWrap{
		padding: 8% 0 0 0;
	}
	#stage2 .fieldWrap h2{
		margin-bottom: 6%;
	}
	#stage3 {
		background:url("../img/second_background.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		width: 90%;
		margin: 0px auto;
	}
	#stage3 p,#stage3 h2{
		color: black;
	}
	#stage3 p.description{
		font-size: 28px;
		padding: 3% 8% 3% 9%;
		text-align: left;
	}
	#stage4 {
		background: #fff;
	}
	#stage4 .coaTop{
		height: 20%;
	}
	#stage4 .coaBottom{
		height: 80%;
		background:url("../img/third_background.jpg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;	
	}
	#stage4 p,#stage4 h2{
		color: black;
	}
	#stage5 p.description{
		font-size: 28px;
		text-align: left;
	}
	#stage5 {
		background:#fff;
	}
	#stage5 p,#stage5 h2,#stage5 span{
		color: black;
	}
	#stage5 .aboutTop{
		height: 20%;
	}
	#stage5 .aboutBottom{
		height: 80%;
		background: #ededed;
		padding-left: 5%;
		padding-top: 3%;
	}
	#stage5 .aboutBottom p{
		font-size: 23px;	
	}
	#stage5 .aboutBottom span{
		font-size: 23px;
		padding-left: 113px;
	}
	#stage6 p,#stage6 h2,#stage6 span{
		color: black;
	}
	#stage6 p.description{
		font-size: 20px;
	}
	#stage7 p,#stage7 span{
		color: black;
	}
	#stage7 h2{
		color: black;
		margin-bottom: 2.5%;	
	}
	#stage7 dt{
	  width: 47%;
	  float: left;
	  text-align: right;
	  clear: both;
	  padding-right: 3%;
	  font-weight: normal;
	  margin-top: 4px;
	}
	#stage7 dd{
	  width: 50%;
	  float: right;
	  text-align: left;
	  font-weight: normal;
	}
	#stage7 dd input,#stage7 dd textarea{
		margin-bottom: 1%;
		max-width: 300px;
	}
	#stage7 .fieldWrap{
		padding: 2% 0 0 0;
	}
	#stage7 .fieldWrap input[type="image"]:hover{
		opacity: 0.8;
	}
	p.copyRight {
	  bottom: 0;
	  left: 0;
	  padding: 13px 0 11px 0;
	  width: 100%;
	  font-size: 12px !important;
	  position: absolute;
	  background: #333;
	  color: white !important;
	}
	#stage7 p.description{
		font-size: 20px;
		margin-top: 5%;
	}
	#stage7 .privacyPolicy{
		font-size: 13px;
	}
	#stage7 .privacyPolicy input{
		margin-right: 5px;
	}
	/* .stageSlide
	--------------------------- */
	.stageSlide {
		position: relative;
		overflow: hidden;
		visibility: hidden;
	}
	.stageSlide .slideWrap {
		top: 0;
		left: 0;
		position: absolute;
		overflow: hidden;
	}
	.stageSlide .slideWrap:before,
	.stageSlide .slideWrap:after {
		content: " ";
		display: table;
	}
	.stageSlide .slideWrap:after {clear: both;}
	.stageSlide .slideWrap {*zoom: 1;}
	
	.stageSlide .slidePanel {
		float: left;
		overflow: hidden;
	}
	
	.stageSlide .sdPrev,
	.stageSlide .sdNext {
		margin-top: -25px;
		top: 50%;
		width: 50px;
		height: 50px;
		display: block;
		position: absolute;
		z-index: 99;
	}
	.stageSlide .sdPrev {
		left: 80px;
		background: transparent url(../img/slide_prev.png) no-repeat left top;
	}
	.stageSlide .sdNext {
		right: 80px;
		background: transparent url(../img/slide_next.png) no-repeat left top;
	}
	
	.stageSlide .slideNav {
		bottom: 70px;
		left: 0;
		width: 100%;
		height: 15px;
		text-align: center;
		position: absolute;
		z-index: 98;
	}
	.stageSlide .slideNav a {
		margin: 0 5px;
		width: 15px;
		height: 15px;
		background: transparent url(../img/nav.png) no-repeat center center;
		display: inline-block;
		overflow: hidden;
	}
	.stageSlide .slideNav a.pnActive {
		background: transparent url(../img/nav_acv.png) no-repeat center center;
	}
	
	/* #pageNav
	--------------------------- */
	#pageNav {
		top: 0;
		right: 25px;
		width: 15px;
		text-align: center;
		position: fixed;
		z-index: 2;
		display: none;
	}
	#pageNav ul {
		width: 15px;
		display: block;
	}
	#pageNav ul li {
		padding-bottom: 5px;
		width: 15px;
		height: 15px;
		display: block;
		overflow: hidden;
	}
	#pageNav ul li a {
		width: 15px;
		height: 15px;
		background: transparent url(../img/nav.png) no-repeat center center;
		display: block;
	}
	#pageNav ul li.activeStage a {
		background: transparent url(../img/nav_acv.png) no-repeat center center;
	}
	
	/* #pageDown
	--------------------------- */
	#pageDown {
		bottom: 30px;
		left: 0;
		width: 100%;
		height: 40px;
		text-align: center;
		position: fixed;
		overflow: hidden;
		z-index: 3;
	}
	#pageDown a {
		margin: 0 auto;
		height: 35px;
		background: transparent url("../img/scroll.png") no-repeat center center;
		display: block;
	}
	
	#nav{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 3;
		display: none;
	}
	#nav ul li{
		background: #3e3a39;
		height: 52px;
		text-align: left;
	}
	#nav ul li a{
		color: white;
	    font-size: 15px;
	    display: block;
	    line-height: 52px;
	    padding-left: 10px;
	    padding-right: 10px;
	}
	.navBtn{
		position: fixed;
	    top: 0;
	    right: 0;
	    z-index: 4;
	}
	.navBtn img{
		width: 40px;
	    margin: 10px;
	}
	.navBtn img:hover{
		cursor: pointer;
	}
	#modal .inner{
		width: 90%;
  	    margin: 0 auto;
	    background: white;
	    padding: 1% 5% 3% 5%;
	}
	#modal .inner .ttl{
	  text-align: center;
	  font-size: 30px;
	  font-weight: 900;
	  padding: 20px 0;
	  
	}
	#modal .inner p{
	  font-size: 15px;
	  margin-bottom: 40px;
	  margin-left: 10px;
	  line-height: 1.4;
  	}
	#modal .inner p.privcyTtl{
		margin-top: 1%;
		margin-left: 0;
		margin-bottom: 5px;
		font-size: 20px;
		padding: 0 0 0px 5px;
		border-left: 5px solid #ec7474;
	}
	#modal .inner .close{
		width: 280px;
		margin: 0 auto;
		transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		transition-delay: 0.2s;
		position: relative;
  }
	#modal .inner .close span{
		display: block;
		font-size: 20px;
		padding: 0 10px;
		width: 280px;
		color: white;
		position: relative;
		cursor: pointer;
		background: #111;
	}
}