@charset "utf-8";
/* CSS Document */
/* common ---------------------------------------- */

.main,.footer,#page-top{
 	display: none;
}
.main.on,.footer.on,#page-top.on{
  	display: initial;
}
.contactBtn{
	text-align: center;
	margin: 60px auto 0;
}
.contactBtn a{
  	padding: 0 34px 0 60px;
	color: #9F9D66;
    border-radius: 4px;
    position: relative;
}
.contactBtn a.button:before{
    content: "\e916";
    font-family: "icon";
    font-size: 24px;
    color: #9F9D66;
    position: absolute;
    top: 0;
    left: -130px;
    right: 0;
    margin: auto;
}
.logo a,.Nav2 .logo a{
	display: inherit;
}
.button {
  display: inline-block;
  width: 280px;
  height: 58px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button {
  position: relative;
  z-index: 2;
  background-color: #fff0;
  border: 1px solid #9F9D66;
  color: #9F9D66;
  line-height: 58px;
  overflow: hidden;
}
.button:hover {
  color: #fff;
}
.contactBtn a.button:hover:before{
  color: #fff;
  z-index: 1;
}
.button::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.button:hover::after {
  background: #9F9D66;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* navToggle ---------------------------------------- */
#navToggle {
  position: absolute;
  right: 18px;
  top: 22px;
  width: 27px;
  height: 18px;
  cursor: pointer;
  z-index: 101;
}
#navToggle p{
  color: #9F9D66;
  font-size: 10px;
  text-align: center;
  position: absolute;
  bottom: -10px;
  left: -2px;
}
#navToggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #9F9D66;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#navToggle span:nth-child(1) {
  top: 0;
}
#navToggle span:nth-child(2) {
  top: 8px;
}
#navToggle.active span:nth-of-type(1) {
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}
#navToggle.active span:nth-of-type(2) {
  -webkit-transform: translateY(-4px) rotate(45deg);
  transform: translateY(-4px) rotate(45deg);
}
.menuOpener.active{
  /*opacity: 1;*/
  display: inline;  
  animation: zoomin .50s ease;
  overflow: auto;
  height: 100vh;
}
/* nav2 ---------------------------------------- */
.Nav2{
  position: fixed;
  top: 0;
  left: 0;    
  width: 100%;
  height: 80px;
  background: rgba(255, 255, 255, 0.8);
  border-top: solid 8px #9F9D66;
  z-index: 100;	
}
.NavW{
	width: 100%;
	max-width: 1600px;
	margin: auto;
	padding: 0;
}
.Nav2 .logo img{
	width: 120px;
	margin: 8px 0 8px 8px;
}
.Nav2 .logo{
	width: 13%;
	float: left;
}
.Nav2 .NavBox{
	width: 87%;
	float: right;
	text-align: right;
}
.Nav2 .NavBox li{
	display: inline-block;
    padding: 0 24px;
    line-height: 72px;
    vertical-align: middle;
}

.Nav2 .NavBox li a{
	text-decoration: none;
}
.instagram{
  width: 24px;
}
/* footer ---------------------------------------- */
.footerBG{
	background: #000;
	padding: 80px 0 70px;
}
.bara,.rhyms{
	width: 50%;
	color: #fff;
    font-size: 14px;
}
.bara{
	float: left;
	padding: 0 0 0 6%;	
}
.rhyms{
	float: right;
	padding: 0 6% 0 0;
}
.footerBG .logo img{
	width: 200px;
}
.footerBG .logo{
	width: 48%;
	display: inline-block;
    padding: 0 0 10px 20%;
}
.footerBG .rhyms .logo{
    padding: 0 0 28px 20%;
}
.footerBG .access{
	width: 48%;
	display: inline-block;
	border-left: solid 1px #fff;
}
.footerBG .access li{
	margin: 12px 0 12px 40px;
}
.footerBG .access img{
	width: 40px;
}
#copyright{
	background: #000;	
	padding: 16px 0;
	color: #fff;
	text-align: center;
}
#page-top {
  position: fixed;
  bottom: 100px;
  right: 10%;
}
@media screen and (max-width:1800px){
	.bara{
		padding: 0 0 0 3%;	
	}
	.rhyms{
		padding: 0 3% 0 0;
	}
	.footerBG .logo{
	    padding: 0 0 10px 12%;
	}
	.footerBG .rhyms .logo{
	    padding: 0 0 28px 12%;
	}
}
@media screen and (max-width:1024px){
	.bara,.rhyms{
		width: 100%;
		float: none;
		color: #fff;
		padding: 0 3% 40px 3%;		
	}
}
@media screen and (max-width:767px){
#wrap{
  font-size: 14px;
}
/* navToggle ---------------------------------------- */	
	.menuOpener{
		display: none;
	}
	.menuOpener.active{
		display: initial;
	}
	.menuOpener ul{
	  background: #9F9D66;
	  width: 100%;
	  margin: -1px 0 60px;    
	  color: #fff;
	  padding: 12px 24px;
	}
	  .menuOpener .Pc{
	    display: none;
	  }	
/* nav2 ---------------------------------------- */
	.NavW {
	    padding: 0;
	}
	.Nav2 .logo{
		width: 120px;
	    float: none;
	    margin: auto;
	}
	.Nav2 .NavBox {
	    width: 100%;
	    text-align: center;
	}
	.Nav2 .logo img{
		width: 120px;
	    height: 57px;
	    margin: 8px auto;
	}
	.Nav2 .NavBox li {
		display: initial;
	    padding: 0 24px;
	    line-height: 24px;
	    vertical-align: middle;
	}
	.Nav2 .NavBox li a:hover{
		color: #000;
	}
	.Nav2 .menuOpener .Pc{
		display: none;
	}
	  .instagram{
	    margin: auto;
	  }  
/* footer ---------------------------------------- */

	.footerBG{
		padding: 80px 24px 0; 
	}
	.footerBG .rhyms .logo{
	    padding: 0 0 28px 20%;
	}
	.footerBG .logo{
		width: 100%;
		display: inherit;
		padding: 0 0 16px;
	}
	.footerBG .access{
		width: 100%;
		display: inherit;
		border-left: none;
		padding: 0;
	}
	.footerBG .rhyms .logo{
	    padding: 0 0 16px;
	}	
	.footerBG .logo img {
	    margin: auto;
	}	
	.bara,.rhyms{
		padding: 0 0 40px;		
	}
	.footerBG .access li{
		margin: 12px auto;
		max-width: 360px;
	}
	#page-top {
		bottom: 40px;
	  right: 4%;
	}



}
@media screen and (min-width:767px){
	#navToggle{
		display: none;
	}
	.menuOpener .Sp{
	    display: none !important
	}
}