@charset "utf-8";
/* font */
@font-face {
  font-family: 'theano_didotregular';
    src: url('../font/theano_didotregular/theanodidot-regular-webfont.eot');
    src: url('../font/theano_didotregular/theanodidot-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/theano_didotregular/theanodidot-regular-webfont.woff2') format('woff2'),
         url('../font/theano_didotregular/theanodidot-regular-webfont.woff') format('woff'),
         url('../font/theano_didotregular/theanodidot-regular-webfont.ttf') format('truetype'),
         url('../font/theano_didotregular/theanodidot-regular-webfont.svg#theano_didotregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sofia_prolight';
    src: url('../font/sofiapro_light_macroman/SofiaProLight-webfont.eot');
    src: url('../font/sofiapro_light_macroman/SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/sofiapro_light_macroman/SofiaProLight-webfont.woff2') format('woff2'),
         url('../font/sofiapro_light_macroman/SofiaProLight-webfont.woff') format('woff'),
         url('../font/sofiapro_light_macroman/SofiaProLight-webfont.ttf') format('truetype'),
         url('../font/sofiapro_light_macroman/ofiaProLight-webfont.svg#sofia_prolight') format('svg');
  font-weight: normal;
  font-style: normal;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}

html,
body {
  height: 100%;
  margin: 0;
  min-height: 100%;
  position: relative;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
}

body {
  background: #000;
  color: #fff;
  font-family: 'sofia_prolight', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;	
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

img {
  border: none;
  height: auto;
  max-width: 100%;  
}

object { pointer-events: none; }

h2 {
  color: #fff;
  font-family: 'theano_didotregular', sans-serif;
  font-size: 45px;
  font-weight: bold;
  margin: 0 auto;
}

.wow:first-child { visibility: hidden; }

section {
  display: block;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.dpn { display: block; }
.dpb { display: none; }
.mdpn { display: block; }
.mdpb { display: none; }

@media only screen and (max-width: 1099px){
body {
  background: #000;
  color: #fff;
  font-family: 'sofia_prolight', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;  
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

.dpn { display: none; }
.dpb { display: block; }

.mdpn { display: block; }
.mdpb { display: none; }
}

@media only screen and (max-width: 767px){
body {
  background: #000;
  color: #fff;
  font-family: 'sofia_prolight', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;  
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

h2 {
  color: #fff;
  font-family: 'theano_didotregular', sans-serif;
  font-size: 35px;
  font-weight: bold;
  margin: 0 auto;
}

.mdpn { display: none; }
.mdpb { display: block; }

}
/* nav */
.trigger-container {
  cursor: pointer;  
  position: fixed;
  left: 65px;
  top: 5%;
  z-index: 9999;
}

.trigger {
  height: 18px;
  position: absolute; 
  width: 30px;
  z-index: 5;
}

.bar {
  background: #fff;
  display: block;
  height: 2px;
  position: absolute;
  width: 30px;  
}

.bar-1 { top: 0; }
.bar-2 { top: 8px; }
.bar-3 { top: 16px; }
.bar-4 { 
  height: 30px; 
  left: 13px;
  opacity: 0;
  top: 0;
  width: 2px
}

.bar-1.action {
  background: #fff;
  opacity: 0;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
}

.bar-2.action {
  background: #fff;
  opacity: 1;
  width: 22px;
  left: 3px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
}

.bar-3.action {
  background: #fff;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
}

.bar-4.action {
  background: #fff;
  opacity: 1;
  height: 22px;
  top: -2px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
}

.primary-nav {
  background: url(../images/bg.png) repeat;
  font-family: sans-serif;
  height: 100%;
  left: 0;
  letter-spacing: 3px;
  margin: 0 auto;
  padding: 50px 0;
  position: fixed;
  top: 0;
  text-align: center;
  width: 100%;  
  z-index: 20;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -ms-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: .6s;
  -moz-transition-duration: .6s;
  -ms-transition-duration: .6s;
  transition-duration: .6s;
}

.primary-nav.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.primary-nav ul li a {
  color: #fff;
  font-family: 'theano_didotregular';
  font-size: 22px;
  font-weight: bold;
  padding: 15px 20px;
  position: relative;
  text-decoration: none;
}

.primary-nav ul { margin: 50px auto 0;}

.primary-nav ul li { margin: 25px auto;}

.primary-nav ul li a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.primary-nav ul li a:hover:after { 
  left: 0;
  width: 100%;  
}

.primary-nav ul li ul { display: inline-table; margin: 0 auto;}

.primary-nav ul li ul:first-child {
  margin-right: 35px; 
}

.primary-nav ul li ul li {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.primary-nav ul li ul li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  width: 0;
}

.primary-nav ul li ul li a:hover:after{
  left: 0;
  width: 0;  
}

.primary-nav span { text-align: center;}

@media only screen and (max-width: 767px){
.trigger-container {
  cursor: pointer;  
  position: fixed;
  left: 20px;
  top: 5%;
  z-index: 9999;
}

.primary-nav ul { margin: 15px auto 0;}

.primary-nav ul li { margin: 12px auto;}

.primary-nav ul li a {
  color: #fff;
  font-family: 'theano_didotregular';
  font-size: 15px;
  font-weight: bold;
  padding: 5px 20px;
  position: relative;
  text-decoration: none;
}
}

/* fixed */
#pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 10px;
  z-index: 2;
}

#logo {
  display: none;
  position: fixed;
  top: 5%;
  right: 10px;
  z-index: 2;
}

#content {
  height: 100%;
  position: relative;
  z-index: 1;
}

.wrapper {
  margin: 0 auto;
  position: relative;
  width: 1100px;
}

@media only screen and (max-width: 1099px){
 .wrapper {
  margin: 0 auto;
  position: relative;
  width: 80%;
} 
}
/* oiran */
#oiran_logo {
  background: url(../images/oiran_bg.jpg) no-repeat center;
  margin: 75px auto;
  height: 650px;
}

.oiran {
  background: url(../images/anime.gif) no-repeat 0 0;
  height: 150px;
  left: 230px;
  top: 500px;
  margin: 0 auto;
  position: relative;
  width: 440px;
  -webkit-animation: play 3.5s steps(60) 1 forwards;
  -moz-animation: play 3.5s steps(60) 1 forwards;
  -ms-animation: play 3.5s steps(60) 1 forwards;
  -o-animation: play 3.5s steps(60) 1 forwards;
  animation: play 3.5s steps(60) 1 forwards;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes play {
  0% { background-position: 0 0; }
  100% { background-position: -26400px 0; }
}

@-moz-keyframes play {
  0% { background-position: 0 0; }
  100% { background-position: -26400px 0; }
}

@-ms-keyframes play {
  0% { background-position: 0 0; }
  100% { background-position: -26400px 0; }
}

@-o-keyframes play {
  0% { background-position: 0 0; }
  100% { background-position: -26400px 0; }
}
 
@keyframes play {
  0% { background-position: 0 0; }
  100% { background-position: -26400px 0; }
}

@media only screen and (max-width: 1099px){
#oiran_logo {
  background: url(../images/oiran_bg_.png) no-repeat center;
  margin: 75px auto;
  height: 521px;
}
}
@media only screen and (max-width: 767px){
#oiran_logo {
  background-image: url(../images/oiran_bg_@2x.png);
  background-size: 355px 260px;
  margin: 75px auto;
  height: 270px;
}

}
/* dark */
.dark {
  background: url(../images/dark_bg.jpg) no-repeat;
  height: 780px;
  margin: 150px auto 300px;
}

.dark h2 { padding: 230px 0 0; }

@media only screen and (max-width: 1099px){
.dark {
  background: url(../images/dark_bg.jpg) no-repeat;
  height: 780px;
  margin: 100px auto;
}

.dark h2 { padding: 300px 0 0; }

}

@media only screen and (max-width: 767px){
.dark {
  background-image: url(../images/dark_@2x.png);
  background-size: 359px 251px;
  background-position: center center; 
  height: 260px;
  margin: 30px auto;
}

.dark h2 { padding: 30px 0 0; }

}
/* urushi */

#urushi {
  overflow: hidden;
  transform: rotate(0deg);
  height: 1500px;
}

#urushi h2 { line-height: 1.5;}

  
#urushi .left_wrap {
  float: left;
  margin-top: 200px;
  padding-top: 200px;
  width: 50%;
}

#urushi .right_wrap {
  float: left;
  margin-top: 200px;
  padding-top: 200px;
  width: 50%;
}

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

#urushi {
  height: 1300px;
  overflow: hidden;
}

#urushi .left_wrap {
  display: block;
  float: left;
  margin: 100px auto;
  padding: 0;
  position: relative;
  text-align: center;
  width: 100%;
}

#urushi .right_wrap {
  display: block;
  float: left;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

}
@media only screen and (max-width: 767px){
#urushi {
  background: url(../images/leaves_@2x.png) no-repeat top center;
  height: 1200px;
  overflow: hidden;
}

}
/* luxury*/

#luxury {
  background: #000 url(../images/lux.png) no-repeat center;
  height: 800px;
  margin: 100px auto; 
  width: 100%;
}

#luxury h2 {
  padding-top: 300px;
}

@media only screen and (max-width: 767px){
#luxury {
  background: url(../images/luxury.jpg) no-repeat center;
  height: 100%;
}
#luxury h2 {
  padding-top: 150px;
}
}

/* Kohaku */
#kohaku {
  height: 1500px;
  overflow: hidden;
  padding: 200px 0;
}

#kohaku .wrapper {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 60%;
}

#kohaku .left_wrap {
  float: left;
  margin: 200px auto;
  overflow: hidden;
  padding: 200px 0;
  position: relative;
  width: 70%; 
}

#kohaku .right_wrap {
  display: block;
  float: left;
  margin: 200px auto;
  overflow: hidden;
  padding: 200px 0;
  position: relative;
  width: 30%;
}

#kohaku .left_wrap img,
#kohaku .right_wrap img {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

/*　IE11,10 CSS Hack */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .gold_1 img.move-1,
*::-ms-backdrop, .gold_2 img.move-2 { display: block;}

.gold_1 img.move-1,
.gold_2 img.move-2 { display: block;}

*::-ms-backdrop, .gold_1:hover .move-1 {
  transform: translate(700px,700px);
  -ms-transform: translate(700px,700px);
}

.gold_1:hover .move-1 {
  transform: translate(700px,700px);
  -ms-transform: translate(700px,700px);
}

*::-ms-backdrop, .gold_2:hover .move-2 {
  transform: translate(-700px,-700px);
  -ms-transform: translate(-700px,-700px);
}

.gold_2:hover .move-2 {
  transform: translate(-700px,-700px);
  -ms-transform: translate(-700px,-700px);
}

*::-ms-backdrop, .object {
  position: absolute;
  -ms-transition: all 3s ease-in-out;
}

.object {
  position: absolute;
  -ms-transition: all 3s ease-in-out;
}

*::-ms-backdrop, .gold_1,
*::-ms-backdrop, .gold_2 {
  background-image: none;
  background-attachment: scroll;
  height: 1500px;
  width: 100%;
}

.gold_1,
.gold_2 {
  background-image: none;
  background-attachment: scroll;
  height: 1500px;
  width: 100%;
}
}

img.object{ display: none;}

.gold_1 {
  background-image: url(../images/gold_powder_1.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  height: 1500px;
  width: 100%;
}

.gold_2 {
  background-image: url(../images/gold_powder_2.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  height: 1500px;
  width: 100%;
}

.gold_3 {
  background-image: url(../images/gold_powder_3.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position:center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  height: 1500px;
  width: 100%;
}

@media only screen and (max-width: 1099px){
#kohaku {
  background: url(../images/gold@2x.png) no-repeat center;
  height: 1100px;
  overflow: hidden;
}

#kohaku .left_wrap {
  float: left;
  margin: 50px auto;
  overflow: hidden;
  padding: 50px 0;
  position: relative;
  width: 70%; 
}

#kohaku .right_wrap {
  display: block;
  float: left;
  margin: 50px auto;
  overflow: hidden;
  padding: 50px 0;
  position: relative;
  width: 30%;
}

#kohaku .wrapper {
  display: block;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 80%;
}

.gold_1 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1100px;
  width: 100%;
  z-index: -2;
}

.gold_2 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1100px;
  width: 100%;
  z-index: -2;
}

.gold_3 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1100px;
  width: 100%;
  z-index: -2;
}

}
/* Raden*/
#raden {
  height: 1500px;
  overflow: hidden;
  padding: 200px 0;
}

/* IE11,10 CSS Hack */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .blue_1 img.move-1,
*::-ms-backdrop, .blue_2 img.move-2 { display: block;}

.blue_1 img.move-1,
.blue_2 img.move-2 { display: block;}

*::-ms-backdrop, .blue_1:hover .move-1 {
  transform: translate(700px,700px);
  -ms-transform: translate(700px,700px);
}

.blue_1:hover .move-1 {
  transform: translate(700px,700px);
  -ms-transform: translate(700px,700px);
}

*::-ms-backdrop, .blue_2:hover .move-2 {
  transform: translate(-700px,-700px);
  -ms-transform: translate(-700px,-700px);
}

.blue_2:hover .move-2 {
  transform: translate(-700px,-700px);
  -ms-transform: translate(-700px,-700px);
}

*::-ms-backdrop, .blue_1,
*::-ms-backdrop, .blue_2 {
  background-image: none;
  background-attachment: scroll;
  height: 1500px;
  width: 100%;
}

.blue_1,
.blue_2 {
  background-image: none;
  background-attachment: scroll;
  height: 1500px;
  width: 100%;
}

}

.blue_1 {
  background-image: url(../images/raden_bg_1.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  height: 1500px;
  width: 100%;
}

.blue_2 {
  background-image: url(../images/raden_bg_2.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  height: 1500px;
  width: 100%;
}

.blue_3 {
  background-image: url(../images/space.gif);
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  height: 1500px;
  width: 100%;
}

#raden .wrapper {
  width: 60%;
}

#raden .left_wrap {
  float: left;
  margin: 200px auto;
  padding: 200px 0;
  position: relative;
  width: 40%; 
}

#raden .left_wrap img{
  margin: 0 auto;
  position: relative;
  text-align: center;
}

#raden .right_wrap {
  float: left;
  margin: 200px auto;
  padding: 200px 0;
  position: relative;
  width: 60%;
}

@media only screen and (max-width: 1099px){
#raden {
  background: url(../images/blue@2x.png) no-repeat center;
  height: 1100px;
  overflow: hidden;
}

#raden .left_wrap {
  float: left;
  margin: 50px auto;
  padding: 200px 0;
  position: relative;
  width: 40%; 
}

#raden .right_wrap {
  float: left;
  margin: 50px auto;
  padding: 200px 0;
  position: relative;
  width: 60%;
}

.blue_1 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1000px;
  width: 100%;
  z-index: -3;
}

.blue_2 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1000px;
  width: 100%;
  z-index: -3;
}

.blue_3 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1000px;
  width: 100%;
  z-index: -3;
}

#raden .wrapper {
  width: 80%;
}

}
/* Shunju */
#shunju {
  height: 1500px;
  overflow: hidden;
  padding: 200px 0;
}

/* IE11,10 CSS Hack */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .orange_1 img.move-1,
*::-ms-backdrop, .orange_2 img.move-2 { display: block;}

.orange_1 img.move-1,
.orange_2 img.move-2 { display: block;}

*::-ms-backdrop, .orange_1:hover .move-1 {
  transform: translate(700px,700px);
  -ms-transform: translate(700px,700px);
}

.orange_1:hover .move-1 {
  transform: translate(700px,700px);
  -ms-transform: translate(700px,700px);
}

*::-ms-backdrop, .orange_2:hover .move-2 {
  transform: translate(-700px,-700px);
  -ms-transform: translate(-700px,-700px);
}

.orange_2:hover .move-2 {
  transform: translate(-700px,-700px);
  -ms-transform: translate(-700px,-700px);
}

*::-ms-backdrop, .orange_1,
*::-ms-backdrop, .orange_2 {
  background-image: none;
  background-attachment: scroll;
  height: 1500px;
  width: 100%;
}

.orange_1,
.orange_2 {
  background-image: none;
  background-attachment: scroll;
  height: 1500px;
  width: 100%;
}

}

.orange_1 {
  background-image: url(../images/orange_bg_1.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  height: 1500px;
  width: 100%;
}

.orange_2 {
  background-image: url(../images/orange_bg_2.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  height: 1500px;
  width: 100%;
}

.orange_3 {
  background-image: url(../images/space.gif);
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  height: 1500px;
  width: 100%;
}

#shunju .wrapper {
  width: 70%;
}

#shunju .left_wrap {
  float: left;
  margin: 200px auto;
  overflow: hidden;
  padding: 200px 0;
  position: relative;
  width: 50%; 
}

#shunju .right_wrap {
  float: left;
  margin: 200px auto;
  overflow: hidden;
  padding: 200px 0;
  position: relative;
  width: 50%;
}

#shunju .right_wrap img {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

@media only screen and (max-width: 1099px){
#shunju {
  background: url(../images/orange@2x.png) no-repeat center;
  height: 1100px;
  overflow: hidden;
}

#shunju .left_wrap {
  float: left;
  margin: 50px auto;
  padding: 50px 0;
  position: relative;
  width: 70%; 
}

#shunju .right_wrap {
  float: left;
  margin: 50px auto;
  padding: 50px 0;
  position: relative;
  width: 30%;
}

.orange_1 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1000px;
  width: 100%;
  z-index: -3;
}

.orange_2 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1000px;
  width: 100%;
  z-index: -3;
}

.orange_3 {
  background: rgba(255,255,255,0);
  transform: rotate(0deg);
  height: 1000px;
  width: 100%;
  z-index: -3;
}

#shunju .wrapper {
  width: 80%;
}

}
/* Kawatsura */

#kawatsura {
  background: #000 url(../images/kawatsura.jpg) no-repeat fixed center;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  top: 0;
  height: 2600px;
  margin: 100px auto;
}

#kawatsura h2 { padding: 425px 0; }

.black_bg {
  background: url(../images/black_bg.png) repeat;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  height: 100%;
  padding-top: 20px; 
  width: 100%;
}

.settsu {
  background: url(../images/settsu.png) no-repeat top center;
  padding: 350px 0 0;
}

#kawatsura dl { margin-left: 30px; z-index: 5;}
#kawatsura dt { float: left; }
#kawatsura dd {
  float: left;
  margin-left: 10px;
}

.data { margin: 20px 0 20px 30px; }

.work_img { float: left; }
.work_img img { vertical-align: top;}
.work_img ul li { display: inline-table; float: left;}
.work_img ul li:nth-child(1){ margin: 35px 40px 0 15px ; }
.work_img ul li:nth-child(2) { margin: 0; }
.work_img ul li:nth-child(3) { margin: -75px 85px 0 75px; }
.work_img ul li:nth-child(4) { margin: 35px 0 0; }


.flexslider { display: none;}
@media only screen and (max-width: 1099px){
#kawatsura {
  background: #000 url(../images/kawatsura_@2x.png) no-repeat top center;
  top: 0;
  height: 2000px;
  margin: 100px auto;
}

#kawatsura h2 { padding: 220px 0; }

.settsu {
  background: none;
  padding: 0;
}
.flexslider { display: block;}
}

@media only screen and (max-width: 767px){
#kawatsura {
  background: #000 url(../images/kawatsura_@2x.png) no-repeat top center;
  top: 0;
  height: 1600px;
  margin: 50px auto;
}

#kawatsura h2 { padding: 200px 0; }
}
/* Contact */

#contact {
  background: url(../images/oiran_key.png) no-repeat 80% 10%;
  margin: 140px auto;
  padding: 200px 0;
  width: 100%;
}

ul.cigar { float: left; }

.cigar li {
  display: inline-block;
  margin: 0 15px; 
}

.cigar li:first-child { margin-left: 50px;}
.cigar li:last-child { margin-right: 50px;}

.mfp label.error {
  color: red;
  display: block;
  width: 70%;
}

.mfp_ label.error {
  color: red;
  display: block;
  width: 100%;
}

.mfp { width: 100%;}

.mfp_ {
  display: block;
  float: left;
  width: 30%;
}

.mailform input {
  background: rgba(255,255,255,0);
  border: 2px solid #fff;
  color: #fff;
  float: left;
  height: 50px;
  margin: 10px 15px 10px 0;
  width: 315px;
}

.mailform textarea {
  background: rgba(255,255,255,0);
  border: 2px solid #fff;
  color: #fff;
  font-size: 12px;
  margin: 10px auto;
  width: 645px;
}

.mfp_buttons button.submit {
  background: rgba(255,255,255,0);
  border: 2px solid #fff;
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: 'theano_didotregular', sans-serif;
  font-size: 35px; 
  height: 50px;
  margin: 10px auto;
  text-align: center;
  width: 260px;
}

.mfp_buttons button.submit:hover {
  background: rgba(255,255,255,1);
  border: 2px solid #fff;
  color: #000;
  cursor: pointer;
  display: block;
  font-family: 'theano_didotregular', sans-serif;
  font-size: 35px; 
  height: 50px;
  margin: 10px auto;
  text-align: center;
  width: 260px;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -ms-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

.contact_btn {
  border: 2px solid #fff;
  color: #fff;
  display: block;
  font-family: 'theano_didotregular', sans-serif;
  font-size: 25px;
  margin: 20px auto;
  padding: 5px 40px;
  text-align: center;
  text-decoration: none;
  width: 170px;
  z-index: 10;
}

.contact_btn:hover {
  background: #fff;
  border: 2px solid #fff;
  color: #000;
  display: block;
  font-family: 'theano_didotregular', sans-serif;
  font-size: 25px;
  margin: 20px auto;
  padding: 5px 40px;
  text-align: center;
  text-decoration: none;
  width: 170px;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -ms-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;

}

@media only screen and (max-width: 1099px){
#contact {
  background: none;
  margin: 35px auto;
  padding: 35px 0;
  width: 100%;
}
.mfp label.error {
  color: red;
  display: block;
  width: 100%;
}

.mfp_ {
  display: block;
  float: left;
  width: 100%;
}

.mailform input {
  background: rgba(255,255,255,0);
  border: 2px solid #fff;
  color: #fff;
  float: left;
  height: 50px;
  margin: 10px auto;
  width: 100%;
}

.mailform textarea {
  background: rgba(255,255,255,0);
  border: 2px solid #fff;
  color: #fff;
  font-size: 12px;
  margin: 10px auto;
  width: 100%;
}
}

/* footer */
footer {
  margin-top: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

footer ul {
  display: block;
  margin: 0 auto;
  text-align: center;
}

footer ul li {
  display: inline-block;
  margin: 60px 15px;
  vertical-align: middle;
}

footer ul li a:hover { opacity: .8; }

.copyright {
  font-family: 'theano_didotregular', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  padding-bottom: 300px;
  text-align: center;
}
 
/* clearfix hack  */
.clearfix:after { 
 clear: both;
 content: ".";
 display: block;
 font-size: .1em;
 height: 0;
 line-height: 0;
 overflow:hidden;
 visibility: hidden;
}

.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1%; }
.clearfix {display: block; }

/* text align */
.ta-l { text-align: left;}
.ta-c { text-align: center;}
.ta-r { text-align: right;}

/* margin */
.mt-0   { margin-top:   0   !important; }
.mt-5   { margin-top:   5px !important; }
.mt-10  { margin-top:  10px !important; }
.mt-15  { margin-top:  15px !important; }
.mt-20  { margin-top:  20px !important; }
.mt-25  { margin-top:  25px !important; }
.mt-30  { margin-top:  30px !important; }
.mt-35  { margin-top:  35px !important; }
.mt-40  { margin-top:  40px !important; }
.mt-45  { margin-top:  45px !important; }
.mt-50  { margin-top:  50px !important; }
.mt-60  { margin-top:  60px !important; }
.mt-70  { margin-top:  70px !important; }
.mt-80  { margin-top:  80px !important; }
.mt-90  { margin-top:  90px !important; }
.mt-100 { margin-top: 100px !important; }
.mt-110 { margin-top: 110px !important; }
.mt-120 { margin-top: 120px !important; }
.mt-130 { margin-top: 130px !important; }
.mt-140 { margin-top: 140px !important; }
.mt-150 { margin-top: 150px !important; }

.mr-0   { margin-right:   0   !important; }
.mr-5   { margin-right:   5px !important; }
.mr-10  { margin-right:  10px !important; }
.mr-15  { margin-right:  15px !important; }
.mr-20  { margin-right:  20px !important; }
.mr-25  { margin-right:  25px !important; }
.mr-30  { margin-right:  30px !important; }
.mr-35  { margin-right:  35px !important; }
.mr-40  { margin-right:  40px !important; }
.mr-45  { margin-right:  45px !important; }
.mr-50  { margin-right:  50px !important; }
.mr-60  { margin-right:  60px !important; }
.mr-70  { margin-right:  70px !important; }
.mr-80  { margin-right:  80px !important; }
.mr-90  { margin-right:  90px !important; }
.mr-100 { margin-right: 100px !important; }
.mr-110 { margin-right: 110px !important; }
.mr-120 { margin-right: 120px !important; }
.mr-130 { margin-right: 130px !important; }
.mr-140 { margin-right: 140px !important; }
.mr-150 { margin-right: 150px !important; }

.mb-0   { margin-bottom:   0   !important; }
.mb-5   { margin-bottom:   5px !important; }
.mb-10  { margin-bottom:  10px !important; }
.mb-15  { margin-bottom:  15px !important; }
.mb-20  { margin-bottom:  20px !important; }
.mb-25  { margin-bottom:  25px !important; }
.mb-30  { margin-bottom:  30px !important; }
.mb-35  { margin-bottom:  35px !important; }
.mb-40  { margin-bottom:  40px !important; }
.mb-45  { margin-bottom:  45px !important; }
.mb-50  { margin-bottom:  50px !important; }
.mb-60  { margin-bottom:  60px !important; }
.mb-70  { margin-bottom:  70px !important; }
.mb-80  { margin-bottom:  80px !important; }
.mb-90  { margin-bottom:  90px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-110 { margin-bottom: 110px !important; }
.mb-120 { margin-bottom: 120px !important; }
.mb-130 { margin-bottom: 130px !important; }
.mb-140 { margin-bottom: 140px !important; }
.mb-150 { margin-bottom: 150px !important; }

.ml--05em { margin-left: -0.5em !important; }
.ml-0   { margin-left:   0   !important; }
.ml-5   { margin-left:   5px !important; }
.ml-10  { margin-left:  10px !important; }
.ml-15  { margin-left:  15px !important; }
.ml-20  { margin-left:  20px !important; }
.ml-25  { margin-left:  25px !important; }
.ml-30  { margin-left:  30px !important; }
.ml-35  { margin-left:  35px !important; }
.ml-40  { margin-left:  40px !important; }
.ml-45  { margin-left:  45px !important; }
.ml-50  { margin-left:  50px !important; }
.ml-60  { margin-left:  60px !important; }
.ml-70  { margin-left:  70px !important; }
.ml-80  { margin-left:  80px !important; }
.ml-90  { margin-left:  90px !important; }
.ml-100 { margin-left: 100px !important; }
.ml-110 { margin-left: 110px !important; }
.ml-120 { margin-left: 120px !important; }
.ml-130 { margin-left: 130px !important; }
.ml-140 { margin-left: 140px !important; }
.ml-150 { margin-left: 150px !important; }

/* padding */
.pt-0   { padding-top:   0   !important; }
.pt-5   { padding-top:   5px !important; }
.pt-10  { padding-top:  10px !important; }
.pt-15  { padding-top:  15px !important; }
.pt-20  { padding-top:  20px !important; }
.pt-25  { padding-top:  25px !important; }
.pt-30  { padding-top:  30px !important; }
.pt-35  { padding-top:  35px !important; }
.pt-40  { padding-top:  40px !important; }
.pt-45  { padding-top:  45px !important; }
.pt-50  { padding-top:  50px !important; }
.pt-60  { padding-top:  60px !important; }
.pt-70  { padding-top:  70px !important; }
.pt-80  { padding-top:  80px !important; }
.pt-90  { padding-top:  90px !important; }
.pt-100 { padding-top: 100px !important; }
.pt-110 { padding-top: 110px !important; }
.pt-120 { padding-top: 120px !important; }
.pt-130 { padding-top: 130px !important; }
.pt-140 { padding-top: 140px !important; }
.pt-150 { padding-top: 150px !important; }

.pr-0   { padding-right:   0   !important; }
.pr-5   { padding-right:   5px !important; }
.pr-10  { padding-right:  10px !important; }
.pr-15  { padding-right:  15px !important; }
.pr-20  { padding-right:  20px !important; }
.pr-25  { padding-right:  25px !important; }
.pr-30  { padding-right:  30px !important; }
.pr-35  { padding-right:  35px !important; }
.pr-40  { padding-right:  40px !important; }
.pr-45  { padding-right:  45px !important; }
.pr-50  { padding-right:  50px !important; }
.pr-60  { padding-right:  60px !important; }
.pr-70  { padding-right:  70px !important; }
.pr-80  { padding-right:  80px !important; }
.pr-90  { padding-right:  90px !important; }
.pr-100 { padding-right: 100px !important; }
.pr-110 { padding-right: 110px !important; }
.pr-120 { padding-right: 120px !important; }
.pr-130 { padding-right: 130px !important; }
.pr-140 { padding-right: 140px !important; }
.pr-150 { padding-right: 150px !important; }

.pb-0   { padding-bottom:   0   !important; }
.pb-5   { padding-bottom:   5px !important; }
.pb-10  { padding-bottom:  10px !important; }
.pb-15  { padding-bottom:  15px !important; }
.pb-20  { padding-bottom:  20px !important; }
.pb-25  { padding-bottom:  25px !important; }
.pb-30  { padding-bottom:  30px !important; }
.pb-35  { padding-bottom:  35px !important; }
.pb-40  { padding-bottom:  40px !important; }
.pb-45  { padding-bottom:  45px !important; }
.pb-50  { padding-bottom:  50px !important; }
.pb-60  { padding-bottom:  60px !important; }
.pb-70  { padding-bottom:  70px !important; }
.pb-80  { padding-bottom:  80px !important; }
.pb-90  { padding-bottom:  90px !important; }
.pb-100 { padding-bottom: 100px !important; }
.pb-110 { padding-bottom: 110px !important; }
.pb-120 { padding-bottom: 120px !important; }
.pb-130 { padding-bottom: 130px !important; }
.pb-140 { padding-bottom: 140px !important; }
.pb-150 { padding-bottom: 150px !important; }

.pl-0   { padding-left:   0   !important; }
.pl-5   { padding-left:   5px !important; }
.pl-10  { padding-left:  10px !important; }
.pl-15  { padding-left:  15px !important; }
.pl-20  { padding-left:  20px !important; }
.pl-25  { padding-left:  25px !important; }
.pl-30  { padding-left:  30px !important; }
.pl-35  { padding-left:  35px !important; }
.pl-40  { padding-left:  40px !important; }
.pl-45  { padding-left:  45px !important; }
.pl-50  { padding-left:  50px !important; }
.pl-60  { padding-left:  60px !important; }
.pl-70  { padding-left:  70px !important; }
.pl-80  { padding-left:  80px !important; }
.pl-90  { padding-left:  90px !important; }
.pl-100 { padding-left: 100px !important; }
.pl-110 { padding-left: 110px !important; }
.pl-120 { padding-left: 120px !important; }
.pl-130 { padding-left: 130px !important; }
.pl-140 { padding-left: 140px !important; }
.pl-150 { padding-left: 150px !important; }