@charset "utf-8";
/* CSS Document */
.hideme{opacity: 0}
.zodiaque{
				margin: 0 auto; width: 100%; text-align: center;
				
			}
			
			.zodiaque img{width:100%;}
			
.zodiaque .banner{ background-image: url(images/TopBanner_Desktop.jpg); min-height: 735px; background-position: center top; background-repeat: no-repeat;}


	.green .blue .red .yellow{ width:100%;}
	.zodiaque .title{font-family: "Shuei Mincho M", serif; width:100%;max-width: 1920px; line-height: 44px;
  margin: 0 auto ;
	font-size: 24px; /* for IE */
  font-size: min(max(3.0vw, 16px), 40px);
		
    font-weight: 400;
    letter-spacing: 0.2em;
    text-align: center;
	color:#4d403f;
		
		
  /*-ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);*/
		padding-top:340px;
		
}

.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{width:100%;max-width: 1920px;   margin: 0 auto ;
	
}
.greenSection, .blueSection, .redSection, .yellowSection{position: relative;}
.greenSection{ background-image: url(images/greenBG.jpg);  background-position: center top;min-height: 3000px;background-repeat: no-repeat;}
.blueSection{ background-image: url(images/blueBG.jpg);  background-position: center top;min-height: 3000px;background-repeat: no-repeat;}
.redSection{ background-image: url(images/redBG.jpg);  background-position: center top;min-height: 3000px;background-repeat: no-repeat;}
.yellowSection{ background-image: url(images/yellowBG.jpg);  background-position: center top;min-height: 3000px;background-repeat: no-repeat;}
.zodiaque .content{font-size: 20px; /* for IE */
  font-size: min(max(1.6vw, 12px), 24px);font-weight: normal;letter-spacing: 0.1em;} 

.greenSection .content{color: #5f7e5f;}
.greenSection .part1{font-size: min(max(1.4vw, 10px), 22px);
  font-weight: normal;
  letter-spacing: 0.1em;margin-top:40px;line-height: 36px;display: table;}

.blueSection .content{color: #4e75a0;}
.blueSection .part1{font-size: min(max(1.4vw, 10px), 22px);
  font-weight: normal;
  letter-spacing: 0.1em;margin-top:1000px;line-height: 36px;display: table;}


.redSection .content{color: #b56767;}
.redSection .part1{font-size: min(max(1.4vw, 10px), 22px);
  font-weight: normal;
  letter-spacing: 0.1em;margin-top:1000px;line-height: 36px;display: table;}



.yellowSection .content{color: #a39669;}
.yellowSection .part1{font-size: min(max(1.4vw, 10px), 22px);
  font-weight: normal;
  letter-spacing: 0.1em;margin-top:1000px;line-height: 36px;display: table;}


.three .three1{width:37%; float: left;}
 .three .three2{width:28%; float: left}
 .three .three3{width:34%; float: left;}

	
	.movie{   width: 30%; visibility: hidden;
  margin-top: 7%;
  height: 1100px;
  background: #000;}
   .movie_iframe {
    position: relative;
    width: 100%;
    padding-top: 52.65%;
	   background: #000;
}
 .movie_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.greenSection .link{	width: 96%;margin-top: 100%; position: absolute;}
	.greenSection .link img{	width: 100%;}
	.greenSection .link .link1{	width:33.3%; float: left;}
	.greenSection .link .link2{	width:33.3%; float: left;}
	.greenSection .link .link3{	width:33.3%; float: left;}



.greenSection .part1 {width: 100%;display: table;margin-top: 20%;color: #5f7e5f;    }
.greenSection .part1 .part1a{float: left;width:33.3%}
.greenSection .part1 .part1b{float: left;width:33.3%}
.greenSection .part1 .part1c{float: left;width:33.3%}
.greenSection .part1 img{ width:100% }




.blueSection .part1 {width: 100%;display: table;margin-top: 20%;color: #4e75a0;}
.blueSection .part1 .part1a{float: left;width:33.3%}
.blueSection .part1 .part1b{float: left;width:33.3%}
.blueSection .part1 .part1c{float: left;width:33.3%}
.blueSection .part1 img{ width:100% }

.blueSection .part1 .part1a .three1{padding-right:9%;}
.blueSection .part1 .part1c .three3{padding-left:9%;}

.redSection .part1 {width: 100%;display: table;margin-top: 20%;    color: #b56767;}
.redSection .part1 .part1a{float: left;width:33.3%}
.redSection .part1 .part1b{float: left;width:33.3%}
.redSection .part1 .part1c{float: left;width:33.3%}
.redSection .part1 img{ width:100% }

.redSection .part1 .part1b .three2{padding-left:2%;}


.yellowSection .part1 {width: 100%;display: table;margin-top: 20%;color: #a39669;}
.yellowSection .part1 .part1a{float: left;width:33.3%}
.yellowSection .part1 .part1b{float: left;width:33.3%}
.yellowSection .part1 .part1c{float: left;width:33.3%}
.yellowSection .part1 img{ width:100% }

.yellowSection .part1 .part1a .three1{padding-right:8%;}
.yellowSection .part1 .part1c .three3{padding-left:4%;}


@media only screen and (max-width:1920px){
	
	.zodiaque .title{ width: 95%;margin: 0 auto;padding-top: 140px;}	
	.greenSection,.blueSection,.redSection,.yellowSection{	background-size: auto 	}
	.greenSection .three,.blueSection .three,.redSection .three,.yellowSection .three{margin-top:52%; width:96%;}
		
	.greenSection .link{	width: 96%;margin-top: 100%; position: absolute;}
	.greenSection .link img{	width: 100%;}
	.greenSection .link .link1{	width:33.3%; float: left;}
	.greenSection .link .link2{	width:33.3%; float: left;}
	.greenSection .link .link3{	width:33.3%; float: left;}
	
}
@media screen and (max-width: 1920px) and (min-width: 1800px){
	
.three .three1{width:33.3%; float: left;}
 .three .three2{width:35%; float: left}
 .three .three3{width:31%; float: left;}
	
	.zodiaque .title{padding-top: 17%;}	
	
	}

@media screen and (max-width: 1800px) and (min-width: 1700px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 280px;}	
	
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:950px;width: 100%; width:100%; }
	.greenSection .link{	width: 100%;}
	
	.three .three1{width:37%; float: left;}
 .three .three2{width:28%; float: left}
 .three .three3{width:34%; float: left;}
	.movie {   height: 1000px;}
	
	
	
	.greenSection{ background-image: url(images/greenBG_1800.jpg);  background-position: center top;min-height: 2800px;}
	.blueSection{ background-image: url(images/blueBG_1800.jpg);  background-position: center top;min-height: 2800px;}
	.redSection{ background-image: url(images/redBG_1800.jpg);  background-position: center top;min-height: 2800px;}
	.yellowSection{ background-image: url(images/yellowBG_1800.jpg);  background-position: center top;min-height: 2800px;}
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1800.jpg); min-height: 686px; background-position: center top;}
	
	.greenSection{	background-size: auto 	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}



}
@media screen and (max-width: 1700px) and (min-width: 1600px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 260px;}	
	.greenSection{ background-image: url(images/greenBG_1700.jpg);  background-position: center top;min-height: 2600px;}
	.blueSection{ background-image: url(images/blueBG_1700.jpg);  background-position: center top;min-height: 2600px;}
	.redSection{ background-image: url(images/redBG_1700.jpg);  background-position: center top;min-height: 2600px;}
	.yellowSection{ background-image: url(images/yellowBG_1700.jpg);  background-position: center top;min-height: 2600px;}
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1700.jpg); min-height: 637px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:860px; width: 100%;}
	
	.greenSection .link{	width: 100%;}
	.three .three1{width:37%; float: left;}
 .three .three2{width:28%; float: left}
 .three .three3{width:35%; float: left;}
	.movie {   height: 950px;}
	.greenSection{	background-size: auto 	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}
	
}
@media screen and (max-width: 1600px) and (min-width: 1500px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 240px;}	
	.greenSection{ background-image: url(images/greenBG_1600.jpg);  background-position: center top;min-height: 2400px;}
	.blueSection{ background-image: url(images/blueBG_1600.jpg);  background-position: center top;min-height: 2400px;}
	.redSection{ background-image: url(images/redBG_1600.jpg);  background-position: center top;min-height: 2400px;}
	.yellowSection{ background-image: url(images/yellowBG_1600.jpg);  background-position: center top;min-height: 2400px;}
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1600.jpg); min-height: 588px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:760px;width: 100%;}
		.three .three1{width:39%; float: left;}
 .three .three2{width:24%; float: left}
 .three .three3{width:37%; float: left;}
	.greenSection{	background-size: auto ;	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}
	
		.movie {   height: 900px;}
}
@media screen and (max-width: 1500px) and (min-width: 1400px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 230px;}	
	.greenSection{ background-image: url(images/greenBG_1500.jpg);  background-position: center top;min-height: 2200px;}
	.blueSection{ background-image: url(images/blueBG_1500.jpg);  background-position: center top;min-height: 2200px;}
	.redSection{ background-image: url(images/redBG_1500.jpg);  background-position: center top;min-height: 2200px;}
	.yellowSection{ background-image: url(images/yellowBG_1500.jpg);  background-position: center top;min-height: 2200px;}
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1500.jpg); min-height: 539px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:720px;width: 100%;}
	.three .three1{width:40%; float: left;}
 .three .three2{width:22%; float: left}
 .three .three3{width:37%; float: left;}
	.greenSection{	background-size: auto 	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}
	.movie {   height: 800px;}
	
	
	
}

@media screen and (max-width: 1400px) and (min-width: 1300px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 210px;}	
	.greenSection{ background-image: url(images/greenBG_1400.jpg);  background-position: center top;min-height: 2000px;}
	.blueSection{ background-image: url(images/blueBG_1400.jpg);  background-position: center top;min-height: 2000px;}
	.redSection{ background-image: url(images/redBG_1400.jpg);  background-position: center top;min-height: 2000px;}
	.yellowSection{ background-image: url(images/yellowBG_1400.jpg);  background-position: center top;min-height: 2000px;}
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1400.jpg); min-height: 490px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:650px;width: 91%;}
	.three .three1{width:33.3%; float: left;}
 .three .three2{width:33.3%; float: left}
 .three .three3{width:33.3%; float: left;}
	.greenSection{	background-size: auto 	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}
	
	.movie {   height: 750px;}
	
}
@media screen and (max-width: 1300px) and (min-width: 1200px){
	
	.zodiaque .title{ width:90%;margin: 0 auto;padding-top: 200px;}	
	.greenSection{ background-image: url(images/greenBG_1300.jpg);  background-position: center top;min-height: 1800px;}
	.blueSection{ background-image: url(images/blueBG_1300.jpg);  background-position: center top;min-height: 1800px;}
	
	.redSection{ background-image: url(images/redBG_1300.jpg);  background-position: center top;min-height: 1800px;}
	.yellowSection{ background-image: url(images/yellowBG_1300.jpg);  background-position: center top;min-height: 1800px;}
	
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1300.jpg); min-height: 441px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:540px;width: 87%;}
	.three .three1{width:33.3%; float: left;}
 .three .three2{width:33.3%; float: left}
 .three .three3{width:33.3%; float: left;}
	.greenSection{	background-size: auto ;	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}
	.movie {   height: 650px;}
	
	
}
@media screen and (max-width: 1200px) and (min-width: 1100px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 210px;}	
	.greenSection{ background-image: url(images/greenBG_1200.jpg);  background-position: center top;min-height: 1600px;}
	.blueSection{ background-image: url(images/blueBG_1200.jpg);  background-position: center top;min-height: 1600px;}
	
	.redSection{ background-image: url(images/redBG_1200.jpg);  background-position: center top;min-height: 1600px;}
	.yellowSection{ background-image: url(images/yellowBG_1200.jpg);  background-position: center top;min-height: 1600px;}
	
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1200.jpg); min-height: 392px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:400px;width: 85%;}
	.three .three1{width:33.3%; float: left;}
 .three .three2{width:33.3%; float: left}
 .three .three3{width:33.3%; float: left;}
	.greenSection{	background-size: auto 	}
	.blueSection{	background-size: auto 100%;	}
	.redSection{	background-size: auto 100%;	}
	.yellowSection{	background-size: auto 100%;	}
	
	.movie {   height: 550px;}
	
}
@media screen and (max-width: 1100px) and (min-width: 1000px){
	
	.zodiaque .title{ width: 90%;margin: 0 auto;padding-top: 210px;}	
	.greenSection{ background-image: url(images/greenBG_1100.jpg);  background-position: center top;min-height: 1600px;}
	.blueSection{ background-image: url(images/blueBG_1100.jpg);  background-position: center top;min-height: 1600px;}
	.redSection{ background-image: url(images/redBG_1100.jpg);  background-position: center top;min-height: 1600px;}
	.yellowSection{ background-image: url(images/yellowBG_1100.jpg);  background-position: center top;min-height: 1600px;}
	
	.zodiaque .banner{ background-image: url(images/TopBanner_Desktop_1100.jpg); min-height: 343px; background-position: center top;}
	.greenSection .three, .blueSection .three, .redSection .three, .yellowSection .three{margin-top:530px;width: 97%;line-height: 32px;}
	.three .three1{width:33.3%; float: left;}
 .three .three2{width:33.3%; float: left}
 .three .three3{width:33.3%; float: left;}
	.greenSection{	background-size: auto 100%;	}.blueSection{	background-size: auto ;	}
	
	
	.movie {   height: 500px;}
}



@media only screen and (max-width: 600px) {
	
	.greenSection, .blueSection, .redSection, .yellowSection {        background-size: auto 100%;    }
	
	
.zodiaque .banner{ background-image: url(images/all_smt.jpg); min-height: 604px; background-position: center top; background-repeat: no-repeat;background-size: cover;}

	.greenSection{ background-image: url(images/smt_greenBG1.jpg);  background-position: center top;min-height: 1808px;background-repeat: no-repeat;position: relative;}
.blueSection{ background-image: url(images/smt_blueBG1.jpg);  background-position: center top;min-height: 1808px;background-repeat: no-repeat;}
.redSection{ background-image: url(images/smt_redBG1.jpg);  background-position: center top;min-height: 1808px;background-repeat: no-repeat;}
.yellowSection{ background-image: url(images/smt_yellowBG1.jpg);  background-position: center top;min-height: 1808px;background-repeat: no-repeat;}

	.zodiaque .content {
  font-size: 26px;
  font-size: min(max(1.8vw, 14px), 26px);
  font-weight: normal;
  letter-spacing: 0.1em;
  line-height: 28px;
  width: 85%;
  text-align: center;
  margin: 0 auto;
}
	
	   .greenSection .three {
    margin-top: 0; position: relative;
    width: 96%;font-size: min(max(1.6vw, 12px), 24px);
    line-height: 20px;color: #5f7e5f;
  }
	 .blueSection .three {
    margin-top: 0;
    width: 96%;font-size: min(max(1.6vw, 12px), 24px);
    line-height: 20px;color: #4e75a0;
  }
	 .redSection .three {
    margin-top:0;
    width: 100%;font-size: min(max(1.6vw, 12px), 24px);
    line-height: 20px;color: #b56767;
  }
	 .yellowSection .three {position: relative;
    margin-top: 0;display: table;
    width: 100%;;font-size: min(max(1.6vw, 12px), 24px);
    line-height: 20px;color: #a39669;
  }
	.three .three1{width: 50%;margin-left: 10px;
    padding: 10px; float: right; padding-top:30%;}
	.three .three2{width: 50%; margin-left: 20px;
    display: table;
    margin-top: 34%;}
	.three .three3{width: 50%;margin-right: 5px;
    padding: 10px; float: right;margin-top: 28%;}

	.movie {
 
  height: 550px;
 
}
	
	.zodiaque .title{position: relative;padding-top: 33%;}
	.blueSection .three .three1{margin-top: 0; padding-top: 37%;}
	.redSection .three .three1{margin-top: 0; padding-top: 36%;letter-spacing: 0px;}
	.redSection .three .three2{margin-top: 0; padding-top: 32%;letter-spacing: 0px;}
	.yellowSection .three .three1{margin-top: 0; padding-top: 36%;letter-spacing: 0px;}
	
	.yellowSection .three .three2{margin-top: 37%;}
	
	 .blueSection .three .three3{width: 50%;margin-right: 5px;    padding: 10px; float: right;margin-top: 28%;letter-spacing: 0px;}
	
	 .redSection .three .three3{width: 50%;margin-right: 5px;    padding: 10px; float: right;margin-top: 130px;}
	.yellowSection .three .three3{width: 50%;margin-right: 5px;    padding: 10px; float: right;margin-top: 33%;}
	.greenSection .part1{margin-top: 40px;}
	
	.greenSection .content{    margin-top: 20px !important;}
	.greenSection .part1_1, .greenSection .part1_2, .greenSection .part1_3 {position: relative;}
	.greenSection .part1_1 .part1_p,.greenSection .part1_2 .part2_p ,.greenSection .part1_3 .part3_p{position: relative;}
	.greenSection .part1_1 .part1_w{position: absolute; right: 0; top:0;        margin-top: 23%;
        margin-right: 3%;} 
	.greenSection .part1_2 .part2_w{position: absolute; left: 0;
        top: 0;
        margin-top: 29%;
        margin-left: 3%;} 
	.greenSection .part1_3 .part3_w{position: absolute; right: 0; top:0;        margin-top: 28%;
        margin-right: 3%;} 
	
	.blueSection .part1{margin-top: 40px;}
	
	.blueSection .content{    margin-top: 30px !important;}
	.blueSection .part1_1, .blueSection .part1_2, .blueSection .part1_3 {position: relative;}
	.blueSection .part1_1 .part1_p, .blueSection .part1_2 .part2_p ,.blueSection .part1_3 .part3_p{position: relative;}
	.blueSection .part1_1 .part1_w{position: absolute; right: 0; top:0;        margin-top: 21%;
        margin-right: 6%;} 
	.blueSection .part1_2 .part2_w{position: absolute; left: 0;
        top: 0;
        margin-top: 25%;
        margin-left: 3%;} 
	.blueSection .part1_3 .part3_w{position: absolute; right: 0; top:0;        margin-top: 21%;
        margin-right: 3%;} 
	
	.redSection .part1{margin-top: 40px;}
	
	.redSection .content{    margin-top: 0px !important;}
	.redSection .part1_1, .redSection .part1_2, .redSection .part1_3 {position: relative;}
	.redSection .part1_1 .part1_p, .redSection .part1_2 .part2_p ,.redSection .part1_3 .part3_p{position: relative;}
	.redSection .part1_1 .part1_w{position: absolute; right: 0; top:0;        margin-top: 22%;
        margin-right: 6%;} 
	.redSection .part1_2 .part2_w{position: absolute; left: 0;
        top: 0;
        margin-top: 26%;
        margin-left: 3%;} 
	.redSection .part1_3 .part3_w{position: absolute; right: 0; top:0;        margin-top: 22%;
        margin-right: 3%;} 
	
	
	.yellowSection .part1{margin-top: 40px;}
	
	.yellowSection .content{    margin-top: 15px !important;}
	.yellowSection .part1_1, .yellowSection .part1_2, .yellowSection .part1_3 {position: relative;}
	.yellowSection .part1_1 .part1_p, .yellowSection .part1_2 .part2_p ,.yellowSection .part1_3 .part3_p{position: relative;}
	.yellowSection .part1_1 .part1_w{position: absolute; right: 0; top:0;        margin-top: 22%;
        margin-right: 0%;} 
	.yellowSection .part1_2 .part2_w{position: absolute; left: 0;
        top: 0;
        margin-top: 28%;
        margin-left: 10%;} 
	.yellowSection .part1_3 .part3_w{position: absolute; right: 0; top:0;        margin-top: 22%;
        margin-right: 3%;} 
	
	
	
}