@charset "UTF-8";
/* CSS Document */

html, body {
	width:100%;
	height:100%;
	background-image:url(../images/common-bg.jpg);
}


body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    letter-spacing: 0.07em;
	color:#0b2925;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background-image:url(../images/common-bg.jpg);
  overflow-x: hidden;
}


/*  STYLE  */

@-webkit-keyframes fadein {

0%{
        opacity: 0;
background-color:#d1c6b6;
}

100%{
opacity: 1;
background-color:#d1c6b6;
}

}

body{
       -webkit-animation-name: fadein;
       -webkit-animation-duration: 0.5s;
       -webkit-animation-timing-function: linear;
       -webkit-animation-iteration-count: 1;
}

::selection {
color:#000000;
background: #FFFFFF; /* Safari */
}

::-moz-selection {
color:#000000;
background: #FFFFFF; /* Firefox */
}


/* LOADING
================================================== */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #1a1e1d;
  z-index: 9999999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 230px;
  margin-top: -50px;
  margin-left: -100px;
  text-align: center;
  color: #d1c6b6;
	padding:0;
  z-index: 100;
	font-family: "park-lane"!important;font-style: normal;font-weight: 300;
}

#loader p{position: relative;  z-index: 10;font-size:10px;padding:0 0 0 0;}

/* LINK
================================================== */


a{
color:#0b2925;	
}

a:hover{
color:#4d4d4d!important;	
}


a img{opacity:1;
filter: alpha(opacity=100);        /* ie lt 8 */
-ms-filter: "alpha(opacity=100)";  /* ie 8 */
-moz-opacity:1;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 1;              /* Safari 1.x */
zoom:1;}

a:hover img{
opacity:0.7;
filter: alpha(opacity=70);        /* ie lt 8 */
-ms-filter: "alpha(opacity=70)";  /* ie 8 */
-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.7;              /* Safari 1.x */
zoom:1;
}

img{
	vertical-align: top;
	padding:1px;
	-ms-interpolation-mode:bicubic;   /* IE 7+ */
 image-rendering: optimizeQuality; /* Fx, (Gecko 1.9.2) */
	max-width: 100%;
    height: auto;
    width /****/:auto;  /*IE8のみ適用*/
}




a {
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.tk-park-lane{
	font-family: "park-lane"!important;
	letter-spacing:0.1em;
	font-style:italic;
}

.tk-essay-text{
	font-family: "essay-text"!important;
	letter-spacing:0.1em;
}


/* LOADING
-------------------------------------------------------------------------------*/



/*  HEADER */

ul.sns-nav{
  position: fixed;
  top:0.5rem;
  right:1.8rem;
  z-index:1;
}


ul.sns-nav li{
  background-color:#fffaf4;
  padding:10px 10px 8px 10px;
  border-radius:35px;
}

ul.sns-nav li img{
  width:20px;
}

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

  ul.sns-nav{
    position: absolute;
    top:0;
    right:0.8rem;
    z-index:1;
  }
  
  ul.sns-nav li{
    background-color:#fffaf4;
    padding:10px 10px 8px 10px;
    border-radius:35px;
  }
  
  ul.sns-nav li img{
    width:20px;
  }
  

}



ul.reserve-nav{
  position: fixed;
  bottom:1rem;
  right:1.8rem;
  z-index:1;
}

ul.reserve-nav li{

}

ul.reserve-nav li a {
  color: #fffaf4;
  font-size: 16px;
  font-weight: bold;
  background: #0b2925;
  border-color: none;
  padding: 15px 30px;
  border-radius: 10px;
  transition: .3s;
  box-shadow: 0px 5px 10px 0px rgba(11, 41, 37, 0.25);
}
ul.reserve-nav a:hover {
  color: #fffaf4!important;
  background: #408741;
  border-color: none;
}




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


  ul.reserve-nav{
    position: fixed;
    bottom:1rem;
    right:1rem;
    z-index:1;
  }
  
	
		h1{
	width:auto;
	height:auto;
	margin:28px 0 10px 0px;
	padding:0;
   position:inherit;
   text-align:center;
    bottom:0;
    left:20px;
    z-index: 1;
			font-size:22px!important;
	font-weight:normal!important;
font-style:normal!important;
			font-size:19px!important;
}
	
}





/* CONTENTS */

h2 {
    position: fixed;
    top:75px;
    right:40px;
    z-index: 1;
	margin:0;
    padding:0;
	font-size:22px;
	letter-spacing: 0!important;
	font-weight:normal!important;
	
}


@media screen and (max-width: 800px) {
	
	h2 {
   position:inherit;
    top:0;
    right:0;
    z-index: 1;
	margin:15px auto 25px auto;
	text-align:center;
    padding:0;
	font-size:22px;
		letter-spacing: 0.1em!important;
	font-weight:normal!important;
}
	
}


/* OPEN / CLOSE BTNS */

.menu-btn {
    position: fixed;
    top:40px;
    right:40px;
    z-index: 999;
	margin:0;
    padding:0;
	font-weight:normal!important;
}


@media screen and (max-width: 800px) {
	
.menu-btn {
    position: fixed;
    top:20px;
    right:20px;
    z-index: 999;
	margin:0;
    padding:0;
	font-weight:normal!important;
}


	
}




.btn-open:after {
     content:'';
	display: inline-block;
   width:27px;
 height: 19px;
  background-image: url(../images/icon-menu-b.png);
  background-repeat:no-repeat;
  background-size: contain;
  vertical-align: middle;
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
}




.btn-open:hover:after {
 content:'';
	display: inline-block;
   width:27px;
 height: 19px;
  background-image: url(../images/icon-menu-g.png);
  background-repeat:no-repeat;
  background-size: contain;
  vertical-align: middle;
}




.btn-close:after {
	content:'';
	display: inline-block;
   width:27px;
 height: 19px;
  background-image:url(../images/icon-close-w.png);
  background-repeat:no-repeat;
  background-size: contain;
  vertical-align: middle;
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
}

.btn-close:hover:after {
    color: #ffffff;
}


/* OVERLAY */

.overlay {
    position: fixed;
    top: 0;
    z-index: 200;
    display: none;
    overflow:hidden;
    width: 100%;
    height: 100%;
    background:#ffffff url(/images/common-overlay-bg.jpg) no-repeat center center;
	background-size:contain;
}

@media screen and (max-width: 800px) {
	
	.overlay {
    position: fixed;
    top: 0;
    z-index: 200;
    display: none;
    overflow:hidden;
    width: 100%;
    height: 100%;
    background:#ffffff url(/images/common-overlay-bg-sp.jpg) no-repeat center center;
	background-size:contain;
}
	
}


.overlay .left{
text-align:left!important;	
}

.overlay .right{
text-align:right!important;	
}

.overlay-nav-ttl{
margin:0 0 10px 0;	
padding:0;	
font-size:22px;
font-family: "essay-text"!important;
	letter-spacing:0;	
}

ul.main-nav{
width:auto;
height:auto;
margin:0;
padding:0;	
font-size:14px;
font-family: "park-lane"!important;
	letter-spacing:0.1em;
}

ul.main-nav li{
width:auto;
height:auto;
margin:0 0 10px 0;
padding:0;
font-style:italic;
}

ul.main-nav li a{
text-decoration:underline;
}

ul.main-nav li a:hover{
text-decoration:none;
}

.about-element {
  position: relative;
  left:3%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


.work-element {
  position: absolute;
  right:3%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

	
	ul.main-nav{
width:auto;
height:auto;
margin:0;
padding:0;	
font-size:17px;
font-family: "park-lane"!important;
	letter-spacing:0.1em;
}

ul.main-nav li{
width:auto;
height:auto;
margin:0 0 10px 0;
padding:0;
font-style:italic;
}

ul.main-nav li a{
text-decoration:underline;
}

ul.main-nav li a:hover{
text-decoration:none;
}

	
	.overlay .left{
text-align:center!important;	
}

.overlay .right{
text-align:center!important;	
}
	
	
.about-element {
  width:auto;
  height:auto;
  margin:0 auto;
  text-align:center;
  padding:0;
position: absolute;
top:30%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}


.work-element {
	 width:auto;
  height:auto;
  margin:0 auto;
  text-align:center;
 position: absolute;
top:65%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}



.overlay-footer{
position: absolute;
bottom:30px;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:auto;
height:10px;
margin:0 auto;
padding:0;
text-align:center;	
font-style:italic;
font-family: "park-lane"!important;
letter-spacing:0.1em;
font-size:14px;
}