@charset "utf-8";
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?-qz7pb2');
	src:url('../fonts/icomoon.eot?#iefix-qz7pb2') format('embedded-opentype'),
		url('../fonts/icomoon.woff?-qz7pb2') format('woff'),
		url('../fonts/icomoon.ttf?-qz7pb2') format('truetype'),
		url('../fonts/icomoon.svg?-qz7pb2#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
#WWD__editorial ul{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}
#WWD__editorial h1{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}
#WWD__editorial h2{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}
#WWD__editorial h3{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}
#WWD__editorial h4{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}
#WWD__editorial p{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}
#WWD__editorial img{vertical-align:bottom;}
#WWD__editorial ol,
#WWD__editorial ul {list-style:none;}

#johnmaster div,
#johnmaster span,
#johnmaster object,
#johnmaster iframe,
#johnmaster h1,
#johnmaster h2,
#johnmaster h3,
#johnmaster h4,
#johnmaster h5,
#johnmaster h6,
#johnmaster p,
#johnmaster blockquote,
#johnmaster pre,
#johnmaster abbr,
#johnmaster address,
#johnmaster cite,
#johnmaster code,
#johnmaster del,
#johnmaster dfn,
#johnmaster em,
#johnmaster img,
#johnmaster ins,
#johnmaster kbd,
#johnmaster q,
#johnmaster samp,
#johnmaster small,
#johnmaster strong,
#johnmaster sub,
#johnmaster sup,
#johnmaster var,
#johnmaster b,
#johnmaster i,
#johnmaster dl,
#johnmaster dt,
#johnmaster dd,
#johnmaster ol,
#johnmaster ul,
#johnmaster li,
#johnmaster fieldset,
#johnmaster form,
#johnmaster label,
#johnmaster legend,
#johnmaster table,
#johnmaster caption,
#johnmaster tbody,
#johnmaster tfoot,
#johnmaster thead,
#johnmaster tr,
#johnmaster th,
#johnmaster td,
#johnmaster article,
#johnmaster aside,
#johnmaster canvas,
#johnmaster details,
#johnmaster figcaption,
#johnmaster figure,
#johnmaster footer,
#johnmaster header,
#johnmaster hgroup,
#johnmaster menu,
#johnmaster nav,
#johnmaster section,
#johnmaster summary,
#johnmaster time,
#johnmaster mark,
#johnmaster audio,
#johnmaster video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; font-weight:normal;}

#johnmaster article,
#johnmaster aside,
#johnmaster details,
#johnmaster figcaption,
#johnmaster figure,
#johnmaster footer,
#johnmaster header,
#johnmaster hgroup,
#johnmaster menu,
#johnmaster nav,
#johnmaster section{display:block;}

#johnmaster nav ul{list-style:none;}
#johnmaster blockquote,
#johnmaster q{quotes:none;}
#johnmaster blockquote:before,
#johnmaster blockquote:after,
#johnmaster q:before,
#johnmaster q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],
#johnmaster dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,
#johnmaster select{vertical-align:middle;}
#johnmaster img{vertical-align:bottom;}
#johnmaster ol,
#johnmaster ul {list-style:none;}


body{
	margin:0;padding:0;border:0;outline:0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.pc_only{
  display: block;
  margin: 0 auto;
}
.sp_only{
  display: none;
}
@media only screen and (max-width: 768px) {
  .pc_only{
    display: none;
  }
  .sp_only{
    display: block;
  }
  img{
    width: 100%;
    height: auto;
  }
}
#johnmaster a{
	text-decoration: none;
}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*----------------------------------------------------
 header
--------------------------------------------------- */
#johnmaster{
	width: 100%;
	margin: 0 auto;
	position: relative;
	background: #000;
	overflow: hidden;
    font-family:  'Noto Sans Japanese','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
    font-size: 13px;
    line-height: 150%;
    font-weight: 300;
    color: #4F4A41;
}
/*----------------------------------------------------
 web font

Mrs Saint Delafield(WEB FONT)
<link href="https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield"rel="stylesheet">
font-family: 'Mrs Saint Delafield', cursive;

Sawaeabi Gothic(WEB FONT)
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css"rel="stylesheet" />
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }

Roboto (Light)
<link href="https://fonts.googleapis.com/css?family=Italianno|Lora|Mrs+Saint+Delafield|Roboto" rel="stylesheet">
font-family: 'Roboto', sans-serif;


--------------------------------------------------- */

/*----------------------------------------------------
 loading
--------------------------------------------------- */
#johnmaster #loading{
	position: fixed;
	top: 0%;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #4F4A46;
	z-index:200;
}
#johnmaster #loading .inner{
	width: 244px;
	height: 152px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -122px;
	margin-top: -76px;
}
#johnmaster #loading img{
	width: 100%;
	height: auto;
}
#johnmaster #loading .bar{
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	height: 3px;
	background: #FFF;
}
#johnmaster #loading .bar span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #938871;
}
#johnmaster #loading.out{
  opacity: 0;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}
/*----------------------------------------------------
 menu
--------------------------------------------------- */

#johnmaster #menu{
	position: fixed;
	top: 0%;
	left: 0px;
	width: 70px;
	height: 100%;
	background: #3c3934;
	z-index: 100;
}
#johnmaster #menu i{
	position: absolute;
	top: 50%;
	left: 17px;
	width: 37px;
	height: 4px;
	background: #8e8882;
	margin-top:-2px;
}
#johnmaster #menu i:before{
	content: " ";
	position: absolute;
	top: -10px;
	left: 0px;
	width: 37px;
	height: 4px;
	background: #8e8882;
}
#johnmaster #menu i:after{
	content: " ";
	position: absolute;
	top: 10px;
	left: 0px;
	width: 37px;
	height: 4px;
	background: #8e8882;
}

@media only screen and (max-width: 768px) {
	#johnmaster #menu{
		position: absolute;
		width: 55px;
		height: 55px;
		background: none;
		z-index: 100;
	}
	#johnmaster .th10{
		display: none;
	}
	#johnmaster #menu i{
		position: absolute;
		top: 24px;
		left: 10px;
		background: #000;
	}
	#johnmaster #menu i:before{
		content: " ";
		position: absolute;
		top: -10px;
		left: 0px;
		width: 37px;
		height: 4px;
		background: #000;
	}
	#johnmaster #menu i:after{
		content: " ";
		position: absolute;
		top: 10px;
		left: 0px;
		width: 37px;
		height: 4px;
		background: #000;
	}
	#johnmaster #menu span{
		position: absolute;
		bottom: 0px;
		color: #000;
		font-size: 11px;
		text-align: center;
		width: 100%;
		left: 0px;

	}
}
#johnmaster #globalMenu{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 110;
	background: #f6f5f5;
	text-align: center;
    -webkit-transform: translate(-100%,0%);
       -moz-transform: translate(-100%,0%);
        -ms-transform: translate(-100%,0%);
         -o-transform: translate(-100%,0%);
            transform: translate(-100%,0%);
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #globalMenu.view{
    -webkit-transform: translate(0%,0%);
       -moz-transform: translate(0%,0%);
        -ms-transform: translate(0%,0%);
         -o-transform: translate(0%,0%);
            transform: translate(0%,0%);
}
#johnmaster #globalMenu a.close{
	position: absolute;
	top: 35px;
	left: 35px;
	width: 40px;
	height: 40px;
	display: block;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #globalMenu a.close i{
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
	height: 2px;
	background: #726854;
	margin-top: -1px;
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(45deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(45deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(45deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(45deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(45deg);
}
#johnmaster #globalMenu a.close i:after{
	content: " ";
	position: absolute;
	top: 50%;
	left: 0%;
	width: 100%;
	height: 2px;
	background: #726854;
	margin-top: -1px;
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
}
#johnmaster #globalMenu a.close:hover{
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(90deg);

}
#johnmaster #globalMenu .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#johnmaster #globalMenu .inner{
	position: absolute;
	top: 45%;
	left: 50%;
	width: 666px;
	margin-left: -333px;
	margin-top: -280px;
	z-index: 1;
}
#johnmaster #globalMenu h2{
	margin-bottom: 27px;
}
#johnmaster #globalMenu a.home{
	font-size: 53px;
	line-height: 20px;
	letter-spacing: 1.32px;
  font-family: 'Mrs Saint Delafield', cursive;
	color: #978462;
	margin-bottom: 20px;
	display: block;
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #globalMenu a.home:hover{
	opacity: 0.5;
}
#johnmaster #globalMenu .list{
	letter-spacing: -0.4em;
	margin-bottom: 10px;
}
#johnmaster #globalMenu .list .column{
	letter-spacing: normal;
	display: inline-block;
	margin-right: 16px;
	position: relative;
	margin-bottom: 14px;
	vertical-align: top;
	width: 120px;
}
#johnmaster #globalMenu .list .column:nth-child(5n){
	margin-right: 0px;
}
#johnmaster #globalMenu .list .column a{
	display: block;
	position: relative;
	overflow: hidden;
}
#johnmaster #globalMenu .list .column img{
	width: 100%;
	height: auto;
}
#johnmaster #globalMenu .list .column > img{
	display: block;
	position: relative;
	overflow: hidden;
}
#johnmaster #globalMenu .list .column.coming > img{
	opacity: 0.8;
}
#johnmaster #globalMenu .list .column a .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
    -webkit-transform: translate(0%,100%);
       -moz-transform: translate(0%,100%);
        -ms-transform: translate(0%,100%);
         -o-transform: translate(0%,100%);
            transform: translate(0%,100%);
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #globalMenu .list .column a:hover .bg{
    -webkit-transform: translate(0%,0%);
       -moz-transform: translate(0%,0%);
        -ms-transform: translate(0%,0%);
         -o-transform: translate(0%,0%);
            transform: translate(0%,0%);
}
#johnmaster #globalMenu .list .column a .text{
	position: absolute;
	top: 50%;
	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%);
            opacity: 0;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
        -ms-transition: all 0.5s 0s ease;
         -o-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
}
#johnmaster #globalMenu .list .column a:hover .text{
	opacity: 1;
    -webkit-transition: all 0.5s 0.3s ease;
       -moz-transition: all 0.5s 0.3s ease;
        -ms-transition: all 0.5s 0.3s ease;
         -o-transition: all 0.5s 0.3s ease;
            transition: all 0.5s 0.3s ease;
}
#johnmaster #globalMenu .list .column a .text p{
	color: #FFF;
}
#johnmaster #globalMenu .list .column a .text p.name{
	font-size: 13px;
	letter-spacing: 1.72px;
	line-height: 16px;
	margin-bottom: 10px;
}
#johnmaster #globalMenu .list .column a .text p.with{
	font-size: 23px;
	letter-spacing: 3.04px;
	line-height: 23px;
	margin-bottom: 10px;
  font-family: 'Mrs Saint Delafield', cursive;
}
#johnmaster #globalMenu .list .column a .text p.stylist{
	font-size: 11px;
	letter-spacing: 1.45px;
	line-height: 11px;
}
#johnmaster #globalMenu a.about{
	display: block;
	width: 480px;
	margin: 0 auto;
	height: 30px;
	border-bottom: 1px #c2baa4 solid;
	margin-bottom: 35px;
}
#johnmaster #globalMenu a.about .t{
	display: inline-block;
	color: #5c5549;
	font-size: 21px;
	line-height: 21px;
	text-decoration: none;
	letter-spacing: 0.07px;
	vertical-align: middle;
}
#johnmaster #globalMenu a.about .arrow{
	background: url(../img/common/next_arrow01.png) no-repeat;
	width: 36px;
	height: 10px;
	display: inline-block;
	margin-left: 16px;
	vertical-align: middle;
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #globalMenu a.about:hover .arrow{
    -webkit-transform: translate(10px,0%);
       -moz-transform: translate(10px,0%);
        -ms-transform: translate(10px,0%);
         -o-transform: translate(10px,0%);
            transform: translate(10px,0%);

}
#johnmaster #globalMenu a.official{
	display: block;
	width: 403px;
	height: 54px;
	margin: 0 auto;
	background: #B0A289;
	color: #FFF;
	line-height: 54px;
	font-size: 16px;
	font-weight: bold;
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #globalMenu a.official:hover{
	background: #666159;
}

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

	#johnmaster #globalMenu a.close{
		position: absolute;
		top: 12px;
		left: 12px;
		width: 25px;
		height: 25px;
		display: block;
		z-index: 1;
	    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
	       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
	        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
	         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
	            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
	}
	#johnmaster #globalMenu .inner{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-top:0px;
	    -webkit-transform: translate(0px,0%);
	       -moz-transform: translate(0px,0%);
	        -ms-transform: translate(0px,0%);
	         -o-transform: translate(0px,0%);
	            transform: translate(0px,0%);
	}
	#johnmaster #globalMenu .middle{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 75%;
	}
	#johnmaster #globalMenu .middle_inner{
		position: absolute;
		bottom:10px;
		left: 0%;
		width: 100%;
	}
	#johnmaster #globalMenu h2{
		width: 200px;
		margin: 0 auto;
		margin-bottom: 25px;
	}
	#johnmaster #globalMenu a.home{
		width: 64px;
		margin: 0 auto;
		margin-bottom: 10px;
	}
	#johnmaster #globalMenu .list{
		margin-bottom: 17px;
	}
	#johnmaster #globalMenu .list .column{
		overflow: hidden;
		margin-right: 6px;
		margin-bottom: 5px;
		width: 80px;
		height: 80px;
	}
	#johnmaster #globalMenu .list .column:nth-child(5n){
		margin-right: 6px;
	}
	#johnmaster #globalMenu .list .column:nth-child(1){
		margin-left: 20px;
	}
	#johnmaster #globalMenu .list .column:nth-child(3){
		margin-right: 20px;
	}
	#johnmaster #globalMenu .list .column:nth-child(7){
		margin-right: 0px;
	}
	#johnmaster #globalMenu .list .column:last-child{
		margin-right: 0px;
	}
	#johnmaster #globalMenu .list .column a:hover .bg{
		display: none;
	}
	#johnmaster #globalMenu .list .column a:hover .text{
		opacity:0;
	}
	#johnmaster #globalMenu .bottom{
		position: absolute;
		top:75%;
		height: 25%;
		width: 100%;
		background: #403f3b;
	}
	#johnmaster #globalMenu .bottom_inner{
		position: relative;
		padding: 0px 4.8%;
	}
	#johnmaster #globalMenu a.about{
		display: block;
		width: 100%;
		margin: 0 auto;
		height: auto;
		border-bottom: none;
		margin-top: 25px;
		margin-bottom: 20px;
	}
	#johnmaster #globalMenu a.about .t{
		display: inline-block;
		font-size: 15px;
		line-height: 15px;
		letter-spacing: 0.1px;
		color: #FFF;
	}
	#johnmaster #globalMenu a.about .arrow{
		background: url(../img/common/next_arrow01_sp.png) no-repeat;
		background-size: contain;
		width: 36px;
		height: 10px;
		display: inline-block;
		margin-left: 2px;
		vertical-align: middle;
	}
	#johnmaster #globalMenu a.official{
		display: block;
		width: 100%;
		height: 47px;
		margin: 0 auto;
		background: none;
		color: #ccc3B1;
		border:1px #c1ac87 solid;
		line-height: 47px;
		font-size: 12px;
		font-weight: bold;
	}
}
@media only screen and (min-width: 400px) and (max-width: 768px) {

	#johnmaster #globalMenu .middle{
		height: 60%;
	}
	#johnmaster #globalMenu .bottom{
		top:60%;
		height: 40%;
	}
	#johnmaster #globalMenu .list .column:nth-child(1){
		margin-left: 220px;
	}
	#johnmaster #globalMenu .list .column:nth-child(3){
		margin-right: 220px;
	}
	#johnmaster #globalMenu .list .column:nth-child(4){
		margin-left: 200px;
	}
	#johnmaster #globalMenu .list .column:nth-child(7){
		margin-right: 200px;
	}
	#johnmaster #globalMenu .list .column:last-child{
		margin-right: 0px;
	}
}
@media only screen and (max-width: 320px) {
		#johnmaster #globalMenu .list .column{
			width: 50px;
			height: 50px;
		}
		#johnmaster #globalMenu .list .column:nth-child(1){
			margin-left: 60px;
		}
		#johnmaster #globalMenu .list .column:nth-child(3){
			margin-right: 60px;
		}
		#johnmaster #globalMenu .list .column:nth-child(4){
			margin-left: 50px;
		}
		#johnmaster #globalMenu .list .column:nth-child(7){
			margin-right: 50px;
		}
		#johnmaster #globalMenu a.about .t{
			font-size: 12px;
			line-height: 12px;
		}
		#johnmaster #globalMenu a.about{
			margin-top: 15px;
			margin-bottom: 10px;
		}

		#johnmaster #globalMenu a.home{
			font-size: 33px;
		}

}
/*----------------------------------------------------
 navigation
--------------------------------------------------- */

#johnmaster #navigation{
	z-index: 100;
	position: fixed;
	top: 50%;
	right: 15px;
	opacity: 0.45;
    -webkit-transform: translate(0px,-50%);
       -moz-transform: translate(0px,-50%);
        -ms-transform: translate(0px,-50%);
         -o-transform: translate(0px,-50%);
            transform: translate(0px,-50%);
}
#johnmaster #navigation li{
	margin-bottom: 10px;
}
#johnmaster #navigation li a{
	width: 10px;
	height: 10px;
	display: block;
	border:1px #8E877C solid;
	background: #FFF;
	        border-radius: 50%;
	   -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #navigation li.active a,
#johnmaster #navigation li a:hover{
	border:1px #8E877C solid;
	background: #8E877C;
}
@media only screen and (max-width: 768px) {
	#johnmaster #navigation{
		opacity: 0;
		display: none;
	}
}

/*----------------------------------------------------
 footer
--------------------------------------------------- */
#johnmaster #footer{
	position: relative;
	background: #303030;
	background-size: cover;
  z-index: 5;

}
#johnmaster #footer .fp-tableCell{
	width: 100%;
	display: block;
}
#johnmaster #footer .contact{
	position: relative;
	left: 70px;
	width: 100%;
	width : -webkit-calc(100% - 70px) ;
	width : calc(100% - 70px) ;
	background: #FFF;
	padding: 40px 0 25px;
	text-align: center;
}
#johnmaster #footer .contact .goods{
	width: 839px;
	margin: 0 auto;
	text-align: center;
	color: #4B4B4B;
	font-size: 10px;
	letter-spacing: 0.04px;
	line-height: 18px;
	margin-bottom: 40px;
}
#johnmaster #footer .contact .credit{
	width: 850px;
	margin: 0 auto;
	text-align: center;
	color: #4B4B4B;
	font-size: 10px;
	letter-spacing: 0.04px;
	line-height: 18px;
	margin-bottom: 40px;
}
#johnmaster #footer .contact p{
	color: #4B4B4B;
	font-size: 13px;
	letter-spacing: 0.05px;
	line-height: 20px;
	margin-bottom: 20px;
}
#johnmaster #footer .contact .sns_link{
	margin-bottom: 20px;
	letter-spacing: -0.4em;
}
#johnmaster #footer .contact .sns_link li{
	display: inline-block;
	margin: 0 10px;
	letter-spacing: normal;
}
#johnmaster #footer .contact .sns_link li a img{
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #footer .contact .sns_link li a:hover img{
	opacity: 0.8;
}
#johnmaster #footer .contact a.official{
	display: block;
	width: 340px;
	height: 44px;
	margin: 0 auto;
	text-align: center;
	color: #FFF;
	font-size: 13px;
	letter-spacing: 0px;
	line-height: 44px;
	margin-bottom: 30px;
	background: #625E57;
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #footer .contact a.official:hover{
	background: #B0A289;
}
#johnmaster #footer .contact .sns{

}
#johnmaster #footer .contact .sns li{
	width: 46px;
	display: inline-block;
	margin: 0 20px;
	color: #4B4B4B;
}
#johnmaster #footer .contact .sns li a{
	width: 46px;
	height: 46px;
	display:block;
	border: 2px #3c3934 solid;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	margin-bottom: 15px;
}
#johnmaster #footer .contact .sns li.sns01 a:before{
	content: '\f09a';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 13pt;
    margin-top: 1px;
    line-height: 46px;
	color: #4B4B4B;
}
#johnmaster #footer .contact .sns li.sns02 a:before{
	content: '\f099';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 13pt;
    margin-top: 1px;
    line-height: 46px;
	color: #4B4B4B;
}
#johnmaster #footer .contact .sns li.sns03 a:before{
    content: '\e009';
    display: inline-block;
    font-family: 'icomoon';
    font-size: 17pt;
    margin-top: 1px;
    line-height: 46px;
	color: #4B4B4B;
}
#johnmaster #footer .footer{
	text-align: center;
	color: #FFF;
	position: relative;
	left: 70px;
	width: 100%;
	width : -webkit-calc(100% - 70px) ;
	width : calc(100% - 70px) ;
	padding-bottom: 80px;
}
#johnmaster #footer .footer .wwd{
	padding: 35px 0;
}
#johnmaster #footer .footer .sns{
	margin-bottom: 5px;
}
#johnmaster #footer .footer .sns li{
	display: inline-block;
	margin: 0 20px;
	color: #4B4B4B;
}
#johnmaster #footer .footer .sns li a{
	display:block;
}
#johnmaster #footer .footer .sns li.sns01 a:before{
	content: '\f16d';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 26px;
	color: #FFF;
}
#johnmaster #footer .footer .sns li.sns02 a:before{
	content: '\f09a';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 26px;
	color: #FFF;
}
#johnmaster #footer .footer .sns li.sns03 a:before{
	content: '\f099';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 26px;
	color: #FFF;
}
#johnmaster #footer .footer .sns_t{
	font-size: 9px;
	margin-bottom: 20px;
	letter-spacing: 0.83px;
}
#johnmaster #footer .footer .copyright{
	font-size: 9px;
	margin-bottom: 25px;
	line-height: 18px;
	letter-spacing: 0.79px;
}

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

	#johnmaster #footer .contact{
		padding: 50px 0 25px;
		position: relative;
		left: 0px;
		width: 100%;
		width : -webkit-calc(100% - 0px) ;
		width : calc(100% - 0px) ;
	}
	#johnmaster #footer .contact .goods{
		width: 87.73%;
		font-size: 7px;
		letter-spacing: 1.45px;
		line-height: 15px;
		margin-bottom: 30px;
	}
	#johnmaster #footer .contact .credit{
		width: 87.73%;
		font-size: 7px;
		letter-spacing: 1.45px;
		line-height: 15px;
		margin-bottom: 30px;
	}
	#johnmaster #footer .contact p{
		font-size: 10px;
		line-height: 20px;
		margin-bottom: 20px;
	}
	#johnmaster #footer .contact .sns_link{
		margin-bottom: 20px;
		letter-spacing: -0.4em;
	}
	#johnmaster #footer .contact .sns_link li{
		display: inline-block;
		margin: 0 10px;
		width: 34.66%;
		letter-spacing: normal;
	}
	#johnmaster #footer .contact a.official{
		width: 74.66%;
    	font-size: 11px;
	}
	#johnmaster #footer .contact .sns{

	}
	#johnmaster #footer .contact .sns li.sns01 a:before{
	    font-size: 16pt;
	}
	#johnmaster #footer .contact .sns li.sns02 a:before{
	    font-size: 16pt;
	}
	#johnmaster #footer .footer{
		text-align: center;
		padding-bottom: 70px;
		color: #FFF;
		position: relative;
		left: 0px;
		width: 100%;
		width : -webkit-calc(100% - 0px) ;
		width : calc(100% - 0px) ;
	}
	#johnmaster #footer .footer .wwd{
		padding: 35px 0;
		width: 100px;
		margin: 0 auto;
	}
	#johnmaster #footer .footer .sns{
		margin-bottom: 15px;
	}
	#johnmaster #footer .footer .sns li{
		display: inline-block;
		margin: 0 20px;
		color: #4B4B4B;
	}
	#johnmaster #footer .footer .sns li a{
		display:block;
	}
	#johnmaster #footer .footer .sns li.sns01 a:before{
		content: '\f16d';
	    display: inline-block;
	    font-family: 'FontAwesome';
	    font-size: 26px;
		color: #FFF;
	}
	#johnmaster #footer .footer .sns li.sns02 a:before{
		content: '\f09a';
	    display: inline-block;
	    font-family: 'FontAwesome';
	    font-size: 26px;
		color: #FFF;
	}
	#johnmaster #footer .footer .sns li.sns03 a:before{
		content: '\f099';
	    display: inline-block;
	    font-family: 'FontAwesome';
	    font-size: 26px;
		color: #FFF;
	}
	#johnmaster #footer .footer .sns_t{
		font-size: 10px;
		margin-bottom: 10px;
		letter-spacing: 0.83px;
	}
	#johnmaster #footer .footer .copyright{
		font-size: 7px;
		margin-bottom: 25px;
		line-height: 14px;
		letter-spacing: 0.79px;
	}
}
@media only screen and (max-width: 320px) {
	#johnmaster #footer .footer .copyright{
		font-size: 6px;
	}
	#johnmaster #footer .contact a.official{
		font-size: 11px;
	}
}
/*----------------------------------------------------
 scroll
--------------------------------------------------- */
#johnmaster #scroll{
	position: fixed;
	bottom: 0px;
	left: 50%;
	margin-left: -20px;
	z-index: 80;
}
@media only screen and (max-width: 768px) {
	#johnmaster #scroll{
		margin-left: -55px;
	}
}
#johnmaster #scroll a{
	width: 111px;
	height: 46px;
	display: block;
	background: url(../img/common/btn_down.png) no-repeat;
	background-size: contain;
}
#johnmaster #scroll a.up{
	width: 111px;
	height: 46px;
	display: block;
	background: url(../img/common/btn_up.png) no-repeat;
	background-size: contain;
}

/*----------------------------------------------------
 menuList
--------------------------------------------------- */
#johnmaster #menuList{
	position: relative;
	background: #403f3b;
	text-align: center;
  z-index: 5;
}
#johnmaster #menuList .inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 855px;
	margin-left: -389px;
	margin-top: -281px;
}
#johnmaster #menuList h2{
	color:#EAE7DD;
	font-size: 26px;
	margin-bottom: 12px;
	letter-spacing: 0.53px;
    font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
#johnmaster #menuList .title_line{
	width: 122px;
	height: 1px;
	background: #FFF;
	margin: 0 auto;
	margin-bottom: 12px;
}

#johnmaster #menuList .list{
	letter-spacing: -0.4em;
	margin-bottom: 17px;
}
@media only screen and (max-height: 650px) {
	#johnmaster #menuList .inner{
	  -webkit-transform: scale3d(0.8,0.8,0.8);
	     -moz-transform: scale3d(0.8,0.8,0.8);
	      -ms-transform: scale3d(0.8,0.8,0.8);
	       -o-transform: scale3d(0.8,0.8,0.8);
	          transform: scale3d(0.8,0.8,0.8);
	}
}
#johnmaster #menuList .list .column{
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 210px;
}
#johnmaster #menuList .list .column img{
	width: 100%;
	height: auto;
}
#johnmaster #menuList .list .column:nth-child(1){
	margin-left:20px;
}
#johnmaster #menuList .list .column:nth-child(3){
	margin-right:20px;
}
#johnmaster #menuList .list .column:nth-child(7),
#johnmaster #menuList .list .column:nth-child(10){
	margin-right: 0px;
}
#johnmaster #menuList .list .column a{
	display: block;
	position: relative;
	overflow: hidden;
}
#johnmaster #menuList .list .column.coming{
	opacity: 0.8;
}
#johnmaster #menuList .list .column a .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
    -webkit-transform: translate(0%,100%);
       -moz-transform: translate(0%,100%);
        -ms-transform: translate(0%,100%);
         -o-transform: translate(0%,100%);
            transform: translate(0%,100%);
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a:hover .bg,
#johnmaster #menuList .list .column a.active .bg{
    -webkit-transform: translate(0%,0%);
       -moz-transform: translate(0%,0%);
        -ms-transform: translate(0%,0%);
         -o-transform: translate(0%,0%);
            transform: translate(0%,0%);
}
#johnmaster #menuList .list .column a .text{
	position: absolute;
	bottom: 20%;
	left: 50%;
	width: 100%;
	text-align: center;
    -webkit-transform: translate(-50%,0%);
       -moz-transform: translate(-50%,0%);
        -ms-transform: translate(-50%,0%);
         -o-transform: translate(-50%,0%);
            transform: translate(-50%,0%);
            opacity: 0;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
        -ms-transition: all 0.5s 0s ease;
         -o-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
}
#johnmaster #menuList .list .column a:hover .text{
	opacity: 1;
    -webkit-transition: all 0.5s 0.3s ease;
       -moz-transition: all 0.5s 0.3s ease;
        -ms-transition: all 0.5s 0.3s ease;
         -o-transition: all 0.5s 0.3s ease;
            transition: all 0.5s 0.3s ease;
}
#johnmaster #menuList .list .column a .text p{
	color: #FFF;
}
#johnmaster #menuList .list .column a .text p.name{
	font-size: 15px;
	letter-spacing: 1.45px;
	line-height: 15px;
	margin-bottom: 10px;
}
#johnmaster #menuList .list .column a .text p.with{
	font-size: 27px;
	letter-spacing: 0.65px;
	line-height: 12px;
	margin-bottom: 10px;
  font-family: 'Mrs Saint Delafield', cursive;
}
#johnmaster #menuList .list .column a .text p.stylist{
	font-size: 14px;
	letter-spacing: 0.35px;
	line-height: 14px;
}
#johnmaster #menuList .list .column a .line_top{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 4px;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            opacity: 0;
}
#johnmaster #menuList .list .column a:hover .line_top{
	opacity: 1;

}
#johnmaster #menuList .list .column a .line_bottom{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 4px;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            opacity: 0;
}
#johnmaster #menuList .list .column a:hover .line_bottom{
	opacity: 1;

}
#johnmaster #menuList .list .column a .line_right{
	display: block;
	position: absolute;
	top: 0px;
	right: 0;
	height: 50px;
	width: 4px;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            opacity: 0;
}
#johnmaster #menuList .list .column a .line_left{
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	height: 50px;
	width: 4px;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            opacity: 0;
}
#johnmaster #menuList .list .column a:hover .line_right,
#johnmaster #menuList .list .column a:hover .line_left{
	opacity: 1;
}
#johnmaster #menuList .list .column a .o_line_top{
	display: block;
	position: absolute;
	top: 0px;
	right: -100%;
	height: 1px;
	width: 100%;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a:hover .o_line_top{
	right: 0%;
    -webkit-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a .o_line_bottom{
	display: block;
	position: absolute;
	bottom: 0px;
	left: -100%;
	height: 1px;
	width: 100%;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a:hover .o_line_bottom{
	left: 0%;
    -webkit-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0.3s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}

#johnmaster #menuList .list .column a .o_line_left{
	display: block;
	position: absolute;
	top: -100%;
	left: 0%;
	height: 100%;
	width: 1px;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a:hover .o_line_left{
	top: 0%;
    -webkit-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a .o_line_right{
	display: block;
	position: absolute;
	bottom: -100%;
	right: 0%;
	height: 100%;
	width: 1px;
	background: #9c957B;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}
#johnmaster #menuList .list .column a:hover .o_line_right{
	bottom: 0%;
    -webkit-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0.6s cubic-bezier(0.875, 0.005, 0.090, 0.990);
}

#johnmaster #menuList a.about{
	color: #FFF;
	border-bottom: 1px #979797 solid;
	font-size: 18px;
	letter-spacing: 0.06px;
	color: #D6D6D6;
	display: inline;
	padding-bottom: 4px;
    font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
        -ms-transition: all 0.5s 0s ease;
         -o-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
}
#johnmaster #menuList a.about:hover{
	color: #bfaa9a;
	border-bottom: 1px #bfaa9a solid;
}
#johnmaster #menuList .btn_top{
	margin: 0 auto;
	width: 260px;
	height: 40px;
	margin-top: 20px;
	position: relative;
}
#johnmaster #menuList .btn_top .line_top{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #c2c2c2;
     	      transform-origin: left center;
      -webkit-transform-origin: left center;
  -webkit-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #menuList.view  .btn_top .line_top{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #menuList .btn_top .line_bottom{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #c2c2c2;
     	      transform-origin: right center;
      -webkit-transform-origin: right center;
  -webkit-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #menuList.view  .btn_top .line_bottom{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #menuList .btn_top .line_left{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #c2c2c2;
     	      transform-origin: right bottom;
      -webkit-transform-origin: right bottom;
  -webkit-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #menuList.view  .btn_top .line_left{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #menuList .btn_top .line_right{
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: #c2c2c2;
     	      transform-origin: right top;
      -webkit-transform-origin: right top;
  -webkit-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #menuList.view  .btn_top .line_right{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #menuList .btn_top .t{
	margin-top: 11px;
	display: inline-block;
	font-size: 19px;
	letter-spacing: 0.48px;
	line-height: 19px;
	vertical-align: middle;
	color: #eae7dd;
	margin-right: 4px;
	opacity: 0;
}
#johnmaster #menuList.view  .btn_top .t{
    -webkit-transition: all 0.5s 0.3s ease;
       -moz-transition: all 0.5s 0.3s ease;
        -ms-transition: all 0.5s 0.3s ease;
         -o-transition: all 0.5s 0.3s ease;
            transition: all 0.5s 0.3s ease;
	opacity: 1;
}
#johnmaster #menuList .btn_top .arrow_t{
	margin-top: 11px;
	display: inline-block;
	width: 33px;
	height: 11px;
	vertical-align: middle;
            opacity: 0;
}
#johnmaster #menuList.view .btn_top .arrow_t{
    -webkit-transition: all 0.5s 0.3s ease;
       -moz-transition: all 0.5s 0.3s ease;
        -ms-transition: all 0.5s 0.3s ease;
         -o-transition: all 0.5s 0.3s ease;
            transition: all 0.5s 0.3s ease;
	opacity: 1;
}
#johnmaster #menuList .btn_top .arrow{
	display: block;
	width: 33px;
	height: 11px;
	background: url(../img/common/next_arrow02.png) no-repeat;
	background-size: contain;
    -webkit-transition: all 0.3s 0s ease;
       -moz-transition: all 0.3s 0s ease;
        -ms-transition: all 0.3s 0s ease;
         -o-transition: all 0.3s 0s ease;
            transition: all 0.3s 0s ease;
}
#johnmaster #menuList .btn_top a:hover .arrow{
    -webkit-transform: translate(10px,0%);
       -moz-transform: translate(10px,0%);
        -ms-transform: translate(10px,0%);
         -o-transform: translate(10px,0%);
            transform: translate(10px,0%);
}
@media only screen and (max-width: 768px) {

	#johnmaster #menuList .inner{
		position: static;
		top: 0%;
		left: 0%;
		width: 94.66%;
		margin: 0 auto;
		padding-top: 35px;
		padding-bottom: 90px;
	}
	#johnmaster #menuList .inner{
	  -webkit-transform: scale3d(1,1,1);
	     -moz-transform: scale3d(1,1,1);
	      -ms-transform: scale3d(1,1,1);
	       -o-transform: scale3d(1,1,1);
	          transform: scale3d(1,1,1);
	}
	#johnmaster #menuList h2{
		width: 205px;
		margin: 0 auto;
		margin-bottom: 12px;
	}

	#johnmaster #menuList .list{
		letter-spacing: -0.4em;
		margin-bottom: 40px;
	}
	#johnmaster #menuList .list .column{
		margin-right: 1.4%;
		margin-bottom: 5px;
		width: 49.29%;
	}
	#johnmaster #menuList .list .column:nth-child(1){
		margin-left: 0px;
	}
	#johnmaster #menuList .list .column:nth-child(3n),
	#johnmaster #menuList .list .column:nth-child(7n),
	#johnmaster #menuList .list .column:nth-child(10n){
		margin-right: 1.4%;
	}
	#johnmaster #menuList .list .column:nth-child(2n){
		margin-right:0%;
	}
	#johnmaster #menuList .list .column a{
		display: block;
		position: relative;
		overflow: hidden;
	}
	#johnmaster #menuList .list .column a .bg,
	#johnmaster #menuList .list .column a .o_line_right,
	#johnmaster #menuList .list .column a .o_line_left,
	#johnmaster #menuList .list .column a .o_line_top,
	#johnmaster #menuList .list .column a .o_line_bottom,
	#johnmaster #menuList .list .column a .line_right,
	#johnmaster #menuList .list .column a .line_left,
	#johnmaster #menuList .list .column a .line_top,
	#johnmaster #menuList .list .column a .line_bottom{
		display: none;
	}
	#johnmaster #menuList .list .column a.active .bg{
		display: block;
	}
	#johnmaster #menuList .list .column a .text{
		position: absolute;
		bottom: 0%;
		left: 0%;
		width: 100%;
		background: rgba(0,0,0,0.5);
		text-align: center;
	    -webkit-transform: translate(0%,100%);
	       -moz-transform: translate(0%,100%);
	        -ms-transform: translate(0%,100%);
	         -o-transform: translate(0%,100%);
	            transform: translate(0%,100%);
	            opacity: 1;
	    -webkit-transition: all 0.5s 0s ease;
	       -moz-transition: all 0.5s 0s ease;
	        -ms-transition: all 0.5s 0s ease;
	         -o-transition: all 0.5s 0s ease;
	            transition: all 0.5s 0s ease;
	            padding: 20px 0;
	}
	#johnmaster #menuList .list .column.on a .text{
	    -webkit-transform: translate(0%,0%);
	       -moz-transform: translate(0%,0%);
	        -ms-transform: translate(0%,0%);
	         -o-transform: translate(0%,0%);
	            transform: translate(0%,0%);
	            opacity: 1;
	    -webkit-transition: all 0.5s 1s ease;
	       -moz-transition: all 0.5s 1s ease;
	        -ms-transition: all 0.5s 1s ease;
	         -o-transition: all 0.5s 1s ease;
	            transition: all 0.5s 1s ease;
	}
	#johnmaster #menuList .list .column a.active .text,
	#johnmaster #menuList .list .column.on a.active .text{
		opacity: 0;
	}
	#johnmaster #menuList .list .column a .text p.name{
		font-size:16px;
		letter-spacing: 0.87px;
		line-height: 23px;
		margin-bottom: 10px;
	}
	#johnmaster #menuList .list .column a .text p.with{
		width: 40%;
		height: 1px;
		overflow: hidden;
		margin: 0 auto;
		text-indent: -9999px;
		border-bottom: 1px #333 solid;
		margin-bottom: 10px;
	}
	#johnmaster #menuList .list .column a .text p.stylist{
		font-size: 13px;
		letter-spacing: 0.76px;
		line-height: 20px;
	}
	#johnmaster #menuList a.about{
		font-size: 25px;
		letter-spacing: 0.6px;
		padding-bottom: 4px;
		line-height: 40px;
	}

	#johnmaster #menuList .btn_top{
		margin-top: 40px;
	}
	#johnmaster #menuList .btn_top .t{
		margin-top: 11px;
		display: inline-block;
		font-size: 16px;
		letter-spacing: 0.48px;
		line-height: 19px;
		vertical-align: middle;
		color: #eae7dd;
		margin-right: 4px;
		opacity: 0;
	}

}

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

	#johnmaster #menuList .list .column a .text p.name{
		font-size:12px;
		line-height: 18px;
	}
	#johnmaster #menuList .list .column a .text p.with{
	}
	#johnmaster #menuList .list .column a .text p.stylist{
		font-size: 11px;
		line-height: 18px;
	}
	#johnmaster #menuList a.about{
		font-size: 18px;
		line-height: 35px;
	}
}
/*----------------------------------------------------
 interview
--------------------------------------------------- */
#johnmaster #interview{
	position: relative;
	background: #FFF;
  z-index: 5;
}
#johnmaster #interview .image{
	position: absolute;
	top: 0;
	left: 70px;
	width: 50%;
    width : -webkit-calc(50% - 70px);
    width : calc(50% - 70px);
	height: 100%;
	background:#88828f no-repeat center center;
	background-size: contain;
}
#johnmaster #interview .image img{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
  -webkit-transform:  translate(0px,-50%);
     -moz-transform:  translate(0px,-50%);
      -ms-transform:  translate(0px,-50%);
       -o-transform:  translate(0px,-50%);
          transform:  translate(0px,-50%);
}
#johnmaster #interview .title{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 70px;
	margin-top: -250px;
	font-size: 72px;
  	font-family: 'Mrs Saint Delafield', cursive;
  	color: #88828F;
  	opacity: 0.30;
}
#johnmaster #interview h2{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 70px;
	margin-top: -200px;
	font-size: 34px;
	letter-spacing: 0.85px;
  	font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
#johnmaster #interview h2 span{
	font-size: 43px;
	letter-spacing: 1.07px;
  	font-family: 'Mrs Saint Delafield', cursive;
}
#johnmaster #interview .line01{
	position: absolute;
	top: 50%;
	left: 50%;
    width : 430px;
	height: 1px;
	margin-top: -164px;
	background: #88828f;
     	      transform-origin: left center;
      -webkit-transform-origin: left center;
  -webkit-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #interview.view .line01{
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
    -webkit-transition: all 0.5s 0s ease;
       -moz-transition: all 0.5s 0s ease;
        -ms-transition: all 0.5s 0s ease;
         -o-transition: all 0.5s 0s ease;
            transition: all 0.5s 0s ease;
}
#johnmaster #interview .with{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 70px;
	width: 337px;
	text-align: right;
	margin-top: -150px;
	font-size: 24px;
	color: #636363;
	letter-spacing: 0.3px;
  font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
#johnmaster #interview .line02{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
    width : -webkit-calc(50% - 70px);
    width : calc(50% - 70px);
	height: 1px;
	margin-left: 70px;
	margin-top: 245px;
	background: #88828f;
     	      transform-origin: right center;
      -webkit-transform-origin: right center;
  -webkit-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #interview.view .line02{
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
    -webkit-transition: all 0.5s 0.2s ease;
       -moz-transition: all 0.5s 0.2s ease;
        -ms-transition: all 0.5s 0.2s ease;
         -o-transition: all 0.5s 0.2s ease;
            transition: all 0.5s 0.2s ease;
}
#johnmaster #interview .frame_area{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 70px;
	margin-top: -111px;
	width: 376px;
	height: 300px;
	opacity: 0;
  -webkit-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,20px,0px) rotate(0deg);
}
#johnmaster #interview.view .frame_area{
	opacity: 1;
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
    -webkit-transition: all 0.5s 0.5s ease;
       -moz-transition: all 0.5s 0.5s ease;
        -ms-transition: all 0.5s 0.5s ease;
         -o-transition: all 0.5s 0.5s ease;
            transition: all 0.5s 0.5s ease;
}
#johnmaster #interview .frame_area .inner{
	padding-right: 10px;
}
#johnmaster #interview .frame_area p{
	font-size: 13px;
	line-height: 19px;
	letter-spacing: 0.32px;
	color: #656565;
	margin-bottom: 15px;
    text-align: justify;
}
#johnmaster #interview .frame_area p strong{
	font-weight: bold;
}
#johnmaster #interview .frame_area p a{
	color: #656565;
	text-decoration: underline;
}
#johnmaster #interview .frame_area .f_line{
	background: #A5A5A5;
	margin-top: 10px;
	width: 100%;
	height: 1px;
	margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {

	#johnmaster #interview .image{
		position: absolute;
		top: 0;
		left: 0px;
		width: 100%;
	    width : -webkit-calc(100% - 0px);
	    width : calc(100% - 0px);
		height: 200px;
	}
	#johnmaster #interview .image img{
		position: absolute;
		top: 40px;
		left: 50%;
		width: 280px;
		margin-left: -140px;
		height: auto;
	  -webkit-transform:  translate(0px,0%);
	     -moz-transform:  translate(0px,0%);
	      -ms-transform:  translate(0px,0%);
	       -o-transform:  translate(0px,0%);
	          transform:  translate(0px,0%);
	}
	#johnmaster #interview .title{
		position: absolute;
		top: 20px;
		left: 0%;
		width: 100%;
		text-align: center;
		margin-left: 0px;
		margin-top: 0px;
		font-size: 40px;
	  	opacity: 1;
	  	color: #FFF;
	}
	#johnmaster #interview h2{
		position: absolute;
		top: 235px;
		left: 50%;
		width: 76.00%;
		margin-left: -38.0%;
		margin-top: 0px;
		font-size: 20px;
		letter-spacing: 0.85px;
	  	font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	}
	#johnmaster #interview h2 span{
		font-size: 34px;
		letter-spacing: 1.07px;
	  	font-family: 'Mrs Saint Delafield', cursive;
	}
	#johnmaster #interview .line01{
		position: absolute;
		top: 260px;
		left: 50%;
		width: 86.66%;
		margin-left: -43.33%;
		margin-top: 0px;
	}
	#johnmaster #interview .with{
		position: absolute;
		top: 270px;
		left: 50%;
		width: 76.00%;
		margin-left: -38.0%;
		text-align: right;
		margin-top: 0px;
		font-size: 18px;
		color: #636363;
		letter-spacing: 0.3px;
	  font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	}
	#johnmaster #interview .line02{
		display: none;
	}
	#johnmaster #interview .frame_area{
		position: absolute;
		top: 300px;
		left: 50%;
		width: 86.66%;
		margin-left: -43.33%;
		margin-top: 0px;
		height: 305px;
		opacity: 0;
	}
	#johnmaster #interview .frame_area .inner{
		padding-right: 10px;
	}
	#johnmaster #interview .frame_area p{
	}
}

/*----------------------------------------------------
 jscrollpanel
--------------------------------------------------- */
/* 全体 */
.jspContainer { overflow:hidden; position:relative; }

/* スクロールバーを除いたエリア */
.jspPane { position:absolute; }

/* 縦スクロールバー */
.jspVerticalBar { position:absolute; top:0; right:0; width:5px; height:100%; }

/* 横スクロールバー */
.jspHorizontalBar { position:absolute; bottom:0; left:0; width:100%; height:10px; }

/* 背景 */
.jspTrack { background:#c0c0c0 !important; position:relative;width: 1px; }

/* ノブ */
.jspDrag { background:#848484 !important;width: 5px; position:relative; top:0; left:-2px; cursor:pointer; }
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float:left; height:100%; }


/*----------------------------------------------------
 product
--------------------------------------------------- */
#johnmaster #product{
	position: relative;
	background: #f2f2f2;
}
#johnmaster #product .inner{
  position: absolute;
  top: 45%;
  left: 50%;
  width: 820px;
  margin-left:-375px;
  margin-top: -250px;
}
#johnmaster #product h2{
  font-size: 25px;
  text-align: center;
  letter-spacing: 0.62px;
  color: #656565;
  font-family: "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
  margin-bottom: 10px;
}
#johnmaster #product .line{
  width: 95px;
  height: 1px;
  background: #979797;
  margin: 0 auto;
  margin-bottom: 10px;
}
#johnmaster #product h3{
  color: #998A78;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  letter-spacing: 0.72px;
  margin-bottom: 35px;
  font-family: 'Mrs Saint Delafield', cursive;
}
#johnmaster #product p{
  color: #656565;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.37px;
  margin-bottom: 15px;
}
#johnmaster #product p .attention{
	font-size: 11px;
}
#johnmaster #product .list{
  letter-spacing: -0.4em;
  text-align: center;
}
#johnmaster #product .list .column{
  display: inline-block;
  letter-spacing: normal;
  width: 49%;
  text-align: center;
  vertical-align: top;
  height: 290px;
  border-left: 1px #c0c0c0 solid;
  border-right: 1px #c0c0c0 solid;
}
#johnmaster #product .list.three .column{
  width: 33%;
}
#johnmaster #product .list .column:last-child{
  border-left:none;
  border-right: 1px #c0c0c0 solid;
}

#johnmaster #product .list .column .image{
  text-align: center;
  height: 210px;
  position: relative;
}
#johnmaster #product .list .column .image img{
  position: absolute;
  width: 230px;
  height: auto;
  top: 50%;
  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%);
}
#johnmaster #product .list .column .product{
  text-align: center;
  font-size: 13px;
  color: #585858;
}
#johnmaster #product .list .column .price{
  text-align: center;
  font-size: 13px;
  color: #585858;
  margin-bottom: 10px;
}
#johnmaster #product .list .column .btn{
  width: 230px;
  height: 35px;
  position: relative;
  margin: 0 auto;
}
#johnmaster #product .list .column .btn .line_top{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #979797;
            transform-origin: left center;
      -webkit-transform-origin: left center;
  -webkit-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #product.view .list .column .line_top{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #product .list .column .btn .line_bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #979797;
            transform-origin: right center;
      -webkit-transform-origin: right center;
  -webkit-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(0,1,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #product.view .list .column .line_bottom{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #product .list .column .btn .line_left{
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #979797;
            transform-origin: right bottom;
      -webkit-transform-origin: right bottom;
  -webkit-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #product.view .list .column .line_left{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #product .list .column .btn .line_right{
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #979797;
            transform-origin: right top;
      -webkit-transform-origin: right top;
  -webkit-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,0,1) translate3d(0px,0px,0px) rotate(0deg);
}
#johnmaster #product.view .list .column .line_right{
    -webkit-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
       -moz-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
        -ms-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
         -o-transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
            transition: all 0.5s 0s cubic-bezier(0.875, 0.005, 0.090, 0.990);
  -webkit-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
     -moz-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
      -ms-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
       -o-transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);
          transform: scale3d(1,1,1) translate3d(0px,0px,0px) rotate(0deg);

}
#johnmaster #product .list .column .btn .t{
  display: inline-block;
  font-size: 14px;
  letter-spacing: -0.03px;
  line-height: 35px;
  vertical-align: middle;
  color: #505050;
  opacity: 0;
}
#johnmaster #product.view .list .column .t{
    -webkit-transition: all 0.5s 0.2s ease;
       -moz-transition: all 0.5s 0.2s ease;
        -ms-transition: all 0.5s 0.2s ease;
         -o-transition: all 0.5s 0.2s ease;
            transition: all 0.5s 0.2s ease;
  opacity: 1;
}

/* one*/
#johnmaster #product .list.one .column{
  display: inline-block;
  letter-spacing: normal;
  width: 100%;
  text-align: center;
  vertical-align: top;
  height: 290px;
  border-left: 1px #c0c0c0 solid;
  border-right: 1px #c0c0c0 solid;
}
#johnmaster #product .list.one a{
	display: block;
	height: 290px;
}
#johnmaster #product .list.one .column .image{
  text-align: center;
	height: 290px;
  position: relative;
  width: 30%;
  display: inline-block;
  vertical-align: middle;
}
#johnmaster #product .list.one .column .block{
  text-align: center;
  height: auto;
  position: relative;
  width: 40%;
  display: inline-block;
  vertical-align: middle;
}

#johnmaster #product .list.one .column .product{
  text-align: center;
  font-size: 13px;
  color: #585858;
  line-height: 24px;
}
#johnmaster #product .list.one .column .price{
  text-align: center;
  font-size: 13px;
  color: #585858;
  line-height: 24px;
  margin-bottom: 10px;
}

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

	#johnmaster #product .inner{
	  position: static;
	  top: 0%;
	  left: 0%;
	  width: 90.66%;
	  margin: 0 auto;
	  padding-top: 40px;
	  padding-bottom: 60px;
	}
	#johnmaster #product h2{
	}
	#johnmaster #product .line{
	}
	#johnmaster #product h3{
		font-size: 28px;
	}
	#johnmaster #product p{
	}
	#johnmaster #product .list{
	  letter-spacing:0em;
	  text-align: center;
	}
	#johnmaster #product .list .column,
	#johnmaster #product .list.one .column,
	#johnmaster #product .list.three .column{
	  display:block;
	  letter-spacing: normal;
	  width: 100%;
	  height: auto;
	  border:none;
	  border-top: 1px #c0c0c0 solid;
	  padding-bottom: 30px;
	}
	#johnmaster #product .list .column:last-child{
	  border-left:none;
	  border-right:none;
	}

	#johnmaster #product .list .column .image,
	#johnmaster #product .list.one .column .image{
	  text-align: center;
	  height: auto;
	  position: relative;
	  padding:0px;
	  margin: 40px 0 20px;
	  height: 200px;
	  overflow: hidden;
	  position: relative;
	}
	#johnmaster #product .list .column .image img{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 250px;
		height: auto;
	    -webkit-transform: translate(-50%,-50%);
	       -moz-transform: translate(-50%,-50%);
	        -ms-transform: translate(-50%,-50%);
	         -o-transform: translate(-50%,-50%);
	            transform: translate(-50%,-50%);
	}
	#johnmaster #product .list .column .product{
	}
	#johnmaster #product .list .column .price{
	}
	#johnmaster #product .list .column .btn{
	}

	/* one*/
	#johnmaster #product .list.one a{
		display: block;
		height: auto;
	}
	#johnmaster #product .list.one .column .block{
	  width: 100%;
	}


}
@media only screen and (max-width: 320px) {
	#johnmaster #product .list.one .column .product{
	  font-size: 13px;
	}
	#johnmaster #product .list.one .column .price {
	    font-size: 13px;
	}
	#johnmaster #product p{
	  font-size: 12px;
	  line-height: 18px;
	}
	#johnmaster #product p .attention{
		font-size: 11px;
	}
}

@media screen and (min-width: 992px) {
    #johnmaster #footer .contact .sns li.sns03 {
        display: none;
    }
}