@charset "utf-8";
/*
	Description: initial setting
	Version: 1.0
	Author: idealgrow
*/
/*
===== CONTENTS ===========================================
*/
h2{
	font-size: 28px;
	font-weight: bold;
	letter-spacing: 4px;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	position: relative;
	z-index: 10;
	margin-bottom: 20px;
}
h2 span{
	display: block;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 2px;
	color: #7b7157;
}
#slider{
	height: calc(100vh - 62.5px);
}
#slider .slick-slide img{
	width: 100vw;
	height: calc(100vh - 62.5px);
	object-fit: cover;
}
#slider .slideTxt{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#slider .slideTxt{
	width: 60%;
}
#slider .slideTxt img{
	width: 100%;
	margin-bottom: 40px;
}
#slider .slideTxt p{
	font-size: 24px;
	text-align: center;
	color: #5a3233;
}
/**concept**/
#concept{
	padding: 100px 20px;
}
#concept p{
	font-size: 14px;
	margin-bottom: 50px;
}
#concept img{
	width: 100%;
	height: auto;
}
#concept li:last-of-type{
	position: relative;
}
#concept li:last-of-type:after{
	content: "Design & Relax";
	font-size: 28px;
	font-family: adobe-handwriting-ernie, sans-serif; 
	color: #5a3234;
	position: absolute;
	right: -30px;
	bottom: -40px;
	transform-origin: left bottom;
	transform: rotate(-15deg);
}
#style{
	padding: 100px 20px;
	background: url("../img/shared/bg_style.jpg");
	position: relative;
}
#style:before{
	content: "";
	background: url("../img/shared/style_left.png") no-repeat;
	background-size: 100% auto;
	width: 40%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	transform: scale(-1, 1);
}
#style:after{
	content: "";
	background: url("../img/shared/style_right.png") no-repeat;
	background-size: 100% auto;
	width: 40%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transform: scale(-1, 1);
}
#style h2{
	text-align: right;
}
#style ul{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 10;
}
#style ul li{
	width: 48%;
	margin-right: 4%;
}
#style ul li:nth-of-type(2)~li{
	margin-top: 12px;
}
#style ul li:nth-of-type(even){
	margin-right: 0;
}
#style ul li a{
	display: block;
	position: relative;
	height: 200px;
	width: 100%;
	overflow: hidden;
}
#style ul li a img{
	height: 100%;
	width: auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#style ul li a figcaption{
	position: absolute;
	left: 10px;
	bottom: 0;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 4px;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
}
/**staff**/
#staff{
	padding: 100px 20px;
}
#staff li{
	margin-bottom: 40px;
}
#staff li:last-of-type{
	margin-bottom: 0;
}
#staff li img{
	width: 100%;
	height: auto;
}
#staff li .staffPh div{
	background: rgba(0,0,0,0.50);
	padding: 20px;
	position: relative;
}
#staff li div h3{
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 2px;
	color: #fff;
	font-size: 24px;
	line-height: 1.6;
	margin-bottom: 20px;
}
#staff li div h3 span{
	display: block;
	font-size: 12px;
}
#staff li div p{
	color: #fff;
	font-size: 14px;
}
#staff li div p.instagram{
	position: absolute;
	right: 20px;
	top: 20px;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
}
#staff li div p.instagram a{
	color: #fff;
	background: url("../img/shared/staff_instagram.svg") center top no-repeat;
	background-size: 25px;
	padding-top: 28px;
	display: block;
}
#staff li dl{
	display: flex;
	flex-wrap: wrap;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 2px;
}
#staff li dt{
	width: 100%;
	padding: 10px 0 5px 0;
}
#staff li dd{
	width: 23.5%;
	margin-right: 2%;
	text-align: center;
}
#staff li dd a{
	background: #000;
	display: block;
	color: #fff;
	padding: 5px 0;
}
#staff li dd:last-of-type{
	margin-right: 0;
}
#staff li dd:nth-of-type(4) a{
	background: #5b5b5b;
}
#staff li .nostyle{
	display: none;
}
#staff li.blank{
	display: none;
}
/**price **/
#price{
	padding: 100px 20px;
	background: url("../img/shared/bg_price.jpg");
}
#price h2{
	text-align: right;
}
#price h3{
	font-size: 26px;
	font-family: bebas-neue-by-fontfabric, fot-matisse-pron, sans-serif;
	font-weight: bold;
	letter-spacing: 2px;
}
#price h3 span{
	font-size: 14px;
	letter-spacing: 0;
}
#price dl{
	margin-bottom: 40px;
}
#price ul li:last-of-type dl:last-of-type{
	margin-bottom: 0;
}
#price dt{
	font-weight: bold;
	font-size: 14px;
}
#price dd{
	padding: 5px 0;
	margin-bottom: 5px;
	font-weight: bold;
	text-align: right;
	border-bottom: solid 1px #6d6d6d;
}
#price p{
	font-size: 14px;
	margin-bottom: 20px;
}
#price .caution li{
	font-size: 14px;
}
/**access**/
#access .ph img{
	width: 100%;
	height: auto;
}
#access #news{
	padding: 100px 20px;
	border-bottom: solid 1px #dedede;
}
#access #news li{
	margin-bottom: 10px;
	padding-bottom: 10px;
	font-size: 14px;
}
#access #news li a{
	display: block;
}
#access #news li span{
	display: block;
	font-weight: bold;
	font-size: 16px;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 2px;
	color: #000;
}
#access #news li:last-of-type{
	margin-bottom: 0;
	padding-bottom: 0;
}
#access #address{
	padding: 100px 20px;
}
#access #address li p{
	margin-bottom: 20px;
	font-size: 14px;
}
#access #address li span{
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 2px;
	color: #000;	
	font-weight: bold;
	font-size: 16px;
	display: block;
}
#access .gmap{
	height: 40vh;
}
#access .gmap iframe,
#access .gmap object,
#access .gmap embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
/**style**/
#headImg img{
	width: 100%;
	height: auto;
}
.breadCrumbs{
	border-bottom: solid 1px #e9e9e9;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
}
.breadCrumbs ol{
	display: table;
	width: max-content;
	padding: 20px;
}
.breadCrumbs li{	
	display: table-cell;
	white-space: nowrap;
	font-family: bebas-neue-by-fontfabric, fot-matisse-pron, sans-serif;
	letter-spacing: 3px;
	padding-right: 10px;
	position: relative;
}
.breadCrumbs li:nth-of-type(1)~li{
	padding-left: 10px;
}
.breadCrumbs li:after{
	content: "";
	width: 1px;
	height: 50%;
	background: #5a3234;
	position: absolute;
	right: 0;
	top: 45%;
	transform: translateY(-50%);
}
.breadCrumbs li:last-of-type:after{
	display: none;
}
#styleList h1{
	padding: 20px;
	font-size: 14px;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 3px;
	line-height: 1.2;
}
#styleList h1 span{
	display: block;
	font-size: 31px;
	font-weight: bold;
}
.photoBlock img{
	width: 100%;
	height: auto;
}
.photoBlock ul{
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
}
.photoBlock ul li{
	width: 33.3%;
	padding: 5px;
	position: relative;
}
.photoBlock ul li.active{
	opacity: 0.6;
}
.photoBlock ul li.name{
	width: 100%;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 3px;
	font-size: 14px;
	line-height: 1.2;
	padding: 10px 0;
}
.photoBlock ul li.name span{
	display: block;
	font-size: 20px;
}
.photoBlock ul li.name:before{
	content: "";
	width: 10px;
	height: 10px;
	border-left: solid 1px #ccc;
	border-top: solid 1px #ccc;
	position: absolute;
	left: 5px;
	top: 0;
}
.photoBlock ul li.name:after{
	content: "";
	width: 10px;
	height: 10px;
	border-right: solid 1px #ccc;
	border-top: solid 1px #ccc;
	position: absolute;
	right: 5px;
	top: 0;
}
.photoBlock ul li.name span:before{
	content: "";
	width: 10px;
	height: 10px;
	border-left: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	position: absolute;
	left: 5px;
	bottom: 0;
}
.photoBlock ul li.name span:after{
	content: "";
	width: 10px;
	height: 10px;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	position: absolute;
	right: 5px;
	bottom: 0;
}
/**news**/
#newsColumn{
	padding: 20px;
}
#newsColumn p.data{
	font-size: 24px;
	font-weight: bold;
	font-family: bebas-neue-by-fontfabric, sans-serif; 
	letter-spacing: 3px;
	line-height: 1.2;
	margin-bottom: 20px;
}
#newsColumn p.data span{
	display: inline-block; 
	vertical-align: middle;
	margin-left: 10px;
	font-size: 14px;
	font-weight: bold;
}
#newsColumn h1{
	line-height: 1.6;
	font-size: 26px;
	margin-bottom: 30px;
}
#newsColumn figure{
	margin-bottom: 30px;
}
#newsColumn figure img{
	width: 100%;
	height: auto;
}
#newsColumn figure figcaption{
	text-align: center;
	padding: 10px 0;
	font-size: 14px;
}
#newsColumn .bold{
	font-size: 20px;
	font-weight: bold;
}
#newsColumn #columnIn p{
	margin-bottom: 20px;
}
#newsColumn #columnIn ol{
	counter-reset: countNum;	
}
#newsColumn #columnIn ol li{
	margin-bottom: 20px;
	position: relative;
	padding-left: 35px;
}
#newsColumn #columnIn ol li:before{
	content: counter(countNum);
	counter-increment: countNum;
	background: #5a3234;
	color: #fff;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
}
#columnIn .dlBtn{
	display: flex;
}
#columnIn .dlBtn li{
	width: 49%;
	margin-right: 4%;
}
#columnIn .dlBtn li img{
	width: 100%;
	height: auto;
}
#columnIn .dlBtn li:last-of-type{
	margin-right: 0;
	width: 47%;
}
.animate{
	opacity: 0;
}
.respPh{
	width: 100%;
	height: auto;
}
@media screen and (min-width: 769px) {
h2{
	font-size: 32px;
}
h2 span{
	display: inline-block;
	margin-left: 10px;
	vertical-align: middle;
}
#slider{
	height: calc(100vh - 100px);
}
#slider .slideTxt{
	width: 600px;
	top: 55%;
}
#slider .slideTxt img{
	width: 40%;
	margin: 0 auto 70px auto;
}
#slider .slideTxt p{
	font-size: 32px;
	text-align: center;
}
	#slider .slideTxt p br{
		display: none;
	}
/**concept**/
#concept{
	width: 1180px;
	margin: 0 auto;
	padding: 180px 0px;
}
	#concept ul{
		display: flex;
		align-items: center;
	}
	#concept ul li{
		width: 690px;
	}
	#concept ul li:first-of-type{
		width: 410px;
		margin-right: 80px;
	}
#concept p{
	margin-bottom: 0;
}
#concept li:last-of-type:after{
	font-size: 40px;
	right: -70px;
	bottom: -50px;
}
#style{
	padding: 180px 0;
}
#style:before{
	width: 310px;
}
#style:after{
	width: 238px;
}
#style h2{
	width: 1180px;
	margin: 0 auto 50px auto;
}
#style ul{
	width: 1180px;
	margin: 0 auto;
}
#style ul li{
	width: 265px;
	margin-right: 40px !important;
}
	#style ul li:last-of-type{
		margin-right: 0 !important;
	}
	
	#style ul li img{
		transition: all 0.4s;
	}
#style ul li:nth-of-type(2)~li{
	margin-top: 0;
}
#style ul li a{
	height: 480px;
	width: 100%;
}
#style ul li a figcaption{
	font-size: 26px;
}
	#style ul li:first-of-type a figcaption{
		color: #2f2725;
	}
	
	#style ul li a:hover img{
		transform:translateX(-50%) scale(1.2);
		opacity: 0.7;
	}
/**staff**/
#staff{
	padding: 180px 0;
	width: 1180px;
	margin: 0 auto;
}
	#staff ul{
		display: flex;
		flex-wrap: wrap;
	}
#staff li{
	width: 365.5px;
	margin-right: 40px;
	margin-bottom: 40px;
	position: relative;
}
	#staff li:nth-of-type(3n){
		margin-right: 0;
	}
	#staff li .staffPh{
		cursor: pointer;
	}
	#staff li .staffPh:hover div{
		opacity: 1;
	}
#staff li .staffPh div{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 365.5px;
	height: 365.5px;
	opacity: 0;
	transition: all 0.4s;
}
#staff li div h3{
	margin-bottom: 10px;
}
#staff li div p{
	font-size: 13px;
}
	#staff li.blank{
		display: block;
	}
	#staff li .noph{
		width: 365.5px;
		height: 365.5px;
		position: relative;
	}
	#staff li .noph:before{
		content: "";
		width: 15px;
		height: 15px;
		border-left: solid 1px #ccc;
		border-top: solid 1px #ccc;
		position: absolute;
		left: 0;
		top: 0;
	}
	#staff li .noph:after{
		content: "";
		width: 15px;
		height: 15px;
		border-right: solid 1px #ccc;
		border-top: solid 1px #ccc;
		position: absolute;
		right: 0;
		top: 0;
	}
	#staff li .noph span:before{
		content: "";
		width: 15px;
		height: 15px;
		border-left: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#staff li .noph span:after{
		content: "";
		width: 15px;
		height: 15px;
		border-right: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	#staff li .nostyle{
		display: block;
		margin-top: 18px;
		height: 63px;
		position: relative;
	}
	#staff li .nostyle:before{
		content: "";
		width: 15px;
		height: 15px;
		border-left: solid 1px #ccc;
		border-top: solid 1px #ccc;
		position: absolute;
		left: 0;
		top: 0;
	}
	#staff li .nostyle:after{
		content: "";
		width: 15px;
		height: 15px;
		border-right: solid 1px #ccc;
		border-top: solid 1px #ccc;
		position: absolute;
		right: 0;
		top: 0;
	}
	#staff li .nostyle span:before{
		content: "";
		width: 15px;
		height: 15px;
		border-left: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	#staff li .nostyle span:after{
		content: "";
		width: 15px;
		height: 15px;
		border-right: solid 1px #ccc;
		border-bottom: solid 1px #ccc;
		position: absolute;
		right: 0;
		bottom: 0;
	}
/**price **/
#price{
	padding: 180px 0;
	background: url("../img/shared/bg_price.jpg") center center ;
	background-size: cover;
}
	#price ul{
		width: 1180px;
		margin: 0 auto;
		display: flex;
	}
	#price ul li{
		width: 48%;
		margin-right: 4%;
		margin-bottom: 20px;
	}
	#price ul li:last-of-type{
		margin-right: 0;
	}
#price h2{
		width: 1180px;
		margin: 0 auto 20px auto;
}
#price h3{
	font-size: 24px;
	margin-bottom: 10px;
}
#price dl{
	overflow: hidden;
	margin-bottom: 60px;
}
#price dl:last-of-type{
	margin-bottom: 0;
}
#price dt{
	float: left;
	font-size: 14px;
	padding: 5px 0;
}
#price dd{
	padding: 5px 0;
	border-bottom: solid 1px #6d6d6d;
}
	#price dd br{
		display: none;
	}
#price p{
	font-size: 14px;
}
	#price .caution{
		display: block;
	}
#price .caution li{
	width: 100%;
	font-size: 14px;
	margin-bottom: 5px;
}
/**access**/
	
	#access .column{
	width: 1180px;
	 margin: 0 auto;
		display: flex;
	}
#access #news{
	width: 325px;
		padding: 180px 0;
	border-bottom: none;
	position: relative;
	margin-right: 50px;
}
	#access #news:after{
		content: "";
		width: 1px;
		height: 60%;
		background: #dedede;
		position: absolute;
		right: -20px;
		top: 50%;
		transform: translateY(-50%);
	}
#access #address{
	width: 815px;
		padding: 180px 0;
}
	#access #address ul{
		display: flex;
	}
	#access #address ul li{
		width: 40%;
	}
	#access #address ul li:last-of-type{
		width: 60%;
	}
/**style**/
.breadCrumbs ol{
	display: flex;
	width: 1140px;
	margin: 0 auto;
	padding: 20px 0;
}
#styleList h1{
	width: 1140px;
	margin: 0 auto;
	padding: 50px 0;
	font-size: 18px;
	line-height: 1.4;
}
#styleList h1 span{
	font-size: 42px;
	letter-spacing: 6px;
}
	.photoBlock {
		position: relative;
		margin-bottom: 120px;
	}
	.photoBlock:last-of-type{
		margin-bottom: 60px;
	}
	.photoBlock:last-of-type:after{
		display: none;
	}
	.photoBlock:nth-of-type(even) .LargeImg{
		right: 0;
		left: auto;
	}
	.photoBlock:nth-of-type(even) ul{
		padding: 0 600px 0 0;
	}
	.photoBlock:after{
		content: "";
		width: 100%;
		background: #e9e9e9;
		height: 1px;
		position: absolute;
		bottom: -60px;
		left: 0;
	}
	.photoBlock .LargeImg{
		width: 50%;
		min-width: 570px;
		position: absolute;
		left: 0;
		top: 0;
		height: 804px;
		overflow: hidden;
	}
.photoBlock ul{
	width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 0 600px;
}
.photoBlock ul li{
	width: 48%;
	margin-right: 4%;
	padding: 0;
	margin-bottom: 30px;
	cursor: pointer;
}
	.photoBlock ul li:nth-of-type(2)~li{
		margin-bottom: 0;
	}
	.photoBlock ul li img{
		height: 387px;
	}
	.photoBlock ul li:nth-of-type(even){
		margin-right: 0;
	}
.photoBlock ul li.name{
	width: 48%;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 160px;
}
/**news**/
#newsColumn{
	width: 1140px;
	margin: 0 auto;
	padding: 40px 0 300px 0;
}
	#newsColumn #columnIn{
		position: relative;
	}
#newsColumn h1{
	line-height: 1.6;
	font-size: 40px;
	margin-bottom: 100px;
	padding-right: 420px;
}
#newsColumn figure{
	width: 375px;
	position: absolute;
	right: 0;
	top: 0;
	margin-bottom: 0;
}
#newsColumn figure figcaption{
	font-size: 16px;
}
#newsColumn .bold{
	font-size: 24px;
	font-weight: bold;
}
#newsColumn #columnIn p{
	font-size: 20px;
	padding-right: 420px;
}
#newsColumn #columnIn ol{
	padding-right: 420px;
	margin-bottom: 40px;
}
#newsColumn #columnIn ol li{
	font-size: 18px;
}
#columnIn .dlBtn{
	width: 30%;
}
}