@charset "utf-8";
@import "laySetting.less";
@import "header.less";
@import "footer.less";
@import "sidebar.less";
@import "contact.less";
@import "widget.less";

#breadcrumb {
	margin: 0 0 20px;
}

.dlt_entry_footer{
	clear: both;
	background: @colorGray;
	padding: 5px;
	text-align: right;
}


/* ===========================================================================================

	カスタム投稿タイプ共通 設定
=========================================================================================== */

.shopArea,
.blogArea,
.hairArea,
.staffArea,
.galleryArea {
	margin: @contentMargin;

	.clearfix();
}

/* ===========================================================================================

	カスタム投稿タイプ共通 設定
=========================================================================================== */

#bottomTextArea {
	max-width: @containerWidth;
	margin: 30px auto;
	.textTitle {
		margin-bottom: 20px !important;
	}
}

/* ===========================================================================================

	サイトマップ 設定
=========================================================================================== */

.sitemapArea {
	dd {
		position: relative;
		a {padding-left: 10px}
		a::before {
			position: absolute;
			top: 50%;
			left: 7px;
			display: block;
			content: '';
			width:  5px;
			height: 5px;
			margin-top: -5px;
			border-top:   1px solid @colorSub;
			border-right: 1px solid @colorSub;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	}
}


/* ===========================================================================================

	SHOP 設定
=========================================================================================== */

.shopArea {
	&:last-of-type {
		margin: 0;
	}

	/* ====================================================================

		レイアウト共通 部分
	==================================================================== */
	.shopDesc {
		margin: 0 0 20px;
	}

	.shopContent {
		margin: 0 0 30px;

		.clearfix();
	}// .shopContent END

	/* ===================================================
		イメージ 部分
	=================================================== */
	.shopImgArea {
		.clearfix();

		.mainImg {
			width: 100%;
			background: @colorGray;
			margin: 0 0 0px;
			position: relative;

			img {
				bottom: 0;
				left: 0;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.thumImg ul li {
			float: left;

			a {
				background-position: 50% 50%;
				background-repeat: no-repeat;
				background-size: cover !important;
				display: block;
				height: 100%;
				overflow: hidden;
				width: 100%;

				img {
					display: none;
				}
			}
		}
	}

	/* ===================================================
		GoogleMap 部分
	=================================================== */
	.gmap {
		clear: both;
		width: 100%;

		.gm-style img {
			max-height: none!important;
		}

		.mapLink {
			padding: 5px 0 0;
		}
	}

	&.shopLay01 .gmap,
	&.shopLay02 .gmap,
	&.shopLay03 .shopImgArea {
		margin: 0 0 50px;

		&:last-of-type {
			margin: 0;
		}
	}

	/* ====================================================================

		レイアウトパターン01 部分
	==================================================================== */
	&.shopLay01 .shopContent {
		.shopImgArea {
			float: left;
			width: 300px;

			.mainImg {
				height: 300px;
			}

			.thumImg {
				ul {
					li {
						width: 93px;
						height: 93px;
						margin: 10px 10px 0px 0;

						&:nth-child(3n) {
							margin: 10px 0 0px;
						}
					}
				}
			}
		}// .shopImgArea END

		/* ===================================================
			SHOP情報 部分
		=================================================== */
		.shopInfo {
			float: right;
			width: calc(~"100% - 320px");
		}
	}// shopLay01 .shopContent END


	/* ====================================================================

		レイアウトパターン02 部分
	==================================================================== */
	&.shopLay02 .shopContent {
		.shopInfo {
			width: 100%;
			margin: 0 0 20px;
		}


		/* ===================================================
			画像 部分
		=================================================== */
		.shopImgArea {
			width: 100%;

			.thumImg {
				ul {
					li {
						width: 49%;
						height: 200px;
						margin: 10px 0 0;

						&:nth-child(even) {
							margin: 10px 0 0px;
							float: right;
						}

					}
				}
			}
		}// .shopImgArea END

	}// shopLay02 .shopContent END


	/* ====================================================================

		レイアウトパターン03 部分
	==================================================================== */
	&.shopLay03 {
		.shopContent {
			.gmap {
				float: left;
				width: 300px!important;
			}

			.shopInfo {
				float: right;
				width: calc(~"100% - 320px");
			}

		}// .shopContent END

		/* ===================================================
			画像 部分
		=================================================== */
		.shopImgArea {
			width: 100%;

			.thumImg {
				ul {
					li {
						width: 49%;
						height: 200px;
						margin: 10px 0 0;

						&:nth-child(even) {
							margin: 10px 0 0px;
							float: right;
						}
					}
				}
			}
		}// .shopImgArea END
	}// shopLay03 END

	/* ====================================================================

		レイアウトパターン04 部分
	==================================================================== */
	&.shopLay04 .shopContent {
		&:last-of-type {
			margin: 0;
		}

		.shopColumn {
			float: left;
			width: 46%;
			border: @borderGraySolid1;
			padding: 10px;

			&:nth-of-type(even) {
				float: right;
			}

			.shopImgArea {
				width: 100%;
				margin: 0 0 10px;

				.mainImg {
					height: 200px;
				}

			}// .shopImgArea END

			/* ===================================================
				SHOP情報 部分
			=================================================== */
			.shopInfo {
				width: 100%;
				margin: 0 0 20px;

				.shopInfoP {
					margin: 0 0 5px;

					&:last-child {
						margin: 0;
					}
				}
			}
		}// shopLay04 .shopColumn END
	}// shopLay04 .shopContent END
}// .shopArea END


/* ===========================================================================================

	BLOG 設定
=========================================================================================== */

.blogArea {
	&.postSingleLay .blogContent {
		.commentArea {
			margin: 0 0 40px;
		}

		.postCatArea {
			background: #f8f7f1;
			clear: both;
			padding: 5px;
			text-align: right;
		}
	}

	/* ====================================================================

		レイアウトパターン01 全文表示 部分
	==================================================================== */
	&.blogLay01 .blogContent {
		margin: @contentMargin;

		&:last-of-type {
			margin: 0;
		}

		.commentArea img {
			max-width: 50%;
		}
	}

}// .blogArea END


/* ===========================================================================================

	ヘアカタ 設定
=========================================================================================== */

.hairArea {
	.hairContent {
		.attributeCat {
			font-size: 80%;
			margin: 10px 0 0;

			&:before {
				font-family: @iconFont;
				content: @folderIcon;
				color: @colorGrayDarker;
			}
		}
	}

	.hairDesc {
		margin: 0 0 20px;
	}

	/* ===================================================
		SINGLE イメージ 部分
	=================================================== */
	.singleImgArea {
		float: left;
		width: 300px;

		.clearfix();

		.mainImg {
			height: 300px;
			background: @colorGray;
			margin: 0 0 10px;
			position: relative;

			img {
				bottom: 0;
				left: 0;
				margin: auto;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.thumImg {
			ul {
				li {
					width: 93px;
					height: 93px;
					float: left;
					margin: 0 10px 10px 0;

					&:nth-child(3n) {
						margin: 0 0 10px;
					}

					&:nth-last-child(-n+3) {
						margin-bottom: 0;
					}

					a {
						background-position: 50% 50%;
						background-repeat: no-repeat;
						background-size: cover !important;
						display: block;
						height: 100%;
						overflow: hidden;
						width: 100%;

						img {
							display: none;
						}
					}
				}
			}
		}
	}

	/* ===================================================
		ヘアカタ情報 部分
	=================================================== */
	.hairInfo {
		float: right;
		width: calc(~"100% - 320px");

		dd {
			.tagColumn3,
			.tagColumn4 {
				display: table;
				font-size: 100%;
				overflow: hidden;
				width: 100%;

				li {
					background: @colorGray;
					border-right: 1px solid #fff;
					color: #fff;
					display: table-cell;
					font-size: 90%;
					letter-spacing: 1px;
					line-height: 150%;
					padding: 2px 0;
					text-align: center;
					vertical-align: middle;

					&.onMark {
						background: @colorBrown;
					}
				}
			}

			.tagColumn3 li {
				width: 33.3%;
			}

			.tagColumn4 {
				&:first-of-type {
					margin: 0 0 1px;
				}

				li {
					width: 25%;

					img {
						display: block;
						margin: 0 auto 3px;
						width: 30px;
					}

					&:empty {
						background: none;
					}
				}
			}
		}
	}

}// .hairArea END


/* ===========================================================================================

	STAFF 設定
=========================================================================================== */

.staffArea {

	/* ====================================================================

		レイアウト共通 部分
	==================================================================== */
	.staffDesc {
		margin: 0 0 20px;
	}

	.staffContent {
		margin: 0 0 30px;

		.clearfix();
	}// .staffContent END

	.yomi,.position {
		font-size: 85%;
		padding: 0 0 0 10px;
	}

	/* ====================================================================

		レイアウトパターン01 画像+スタッフ名（漢字・読み）表示 部分
	==================================================================== */
	&.staffLay01 .staffContent {
		.imageArea {
			position: relative;
			overflow: hidden;

			.nameArea {
				position: absolute;
				bottom: -200px;
				text-align: cenetr;
				z-index: 1;
				width: 100%;
				height: auto;
			}

			&:hover {
				.nameArea {
					padding: 5px;
					postion: absolute;
					bottom: 0;
					left: 0;
					transition: @transition03Ease;
					background: rgba(0,0,0,0.8);

					h3,p {
						color: @colorWhite;
					}

					h3 {
						font-weight: normal;
						font-size: 90%;
					}

					p {
						font-size: 80%;
					}
				}
			}
		}
	}

	/* ====================================================================

		レイアウトパターン02 2カラム 画像+スタッフ名+詳細レイアウト シングルなし 部分
	==================================================================== */
	&.staffLay02 .staffContent,
	&.staffLaySingle .staffContent {
		.staffImgArea {
			float: left;
			width: 300px;

			.mainImg {
				height: 250px;
				text-align: center;
				position: relative;
				width: 100%;
				border: @borderGraySolid1;

				img {
					bottom: 0;
					left: 0;
					margin: auto;
					position: absolute;
					right: 0;
					top: 0;
					padding: 5px;
				}
			}
		}// .staffImgArea END

		/* ===================================================
			STAFF情報 部分
		=================================================== */
		.staffInfo {
			float: right;
			width: calc(~"100% - 320px");
		}
	}// staffLay02 .staffContent END

	/* ====================================================================

		レイアウトパターン03 1カラム 画像+スタッフ名+詳細レイアウト シングルなし 部分
	==================================================================== */
	&.staffLay03 .staffContent {
		width: 48%;
		float: left;
		padding: 0 10px;

		&:nth-of-type(even) {
			float: right;
		}

		.staffImgArea {
			width: 100%;
			margin: 0 0 20px;

			.mainImg {
				height: 250px;
				text-align: center;
				position: relative;
				width: 100%;
				border: @borderGraySolid1;

				img {
					bottom: 0;
					left: 0;
					margin: auto;
					position: absolute;
					right: 0;
					top: 0;
					padding: 5px;
				}
			}
		}// .staffImgArea END

		/* ===================================================
			STAFF情報 部分
		=================================================== */
		.staffInfo {
			width: 100%;
		}
	}// staffLay03 .staffContent END

}// .staffArea END



/* ===========================================================================================

	BLOG・ヘアカタ・スタッフ共通設定
=========================================================================================== */
.blogContent,
.hairContent,
.staffContent,
.equalityArea .equalityBlock {
	.clearfix();

	.commentArea {
		line-height: 180%;
		word-wrap: break-word;
	}

	.imageArea {
		width: 100%;
		height: 150px;
		position: relative;

		img {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
}

/* ====================================================================

	【BLOG】レイアウトパターン03 画像のみ・レイアウトパターン04 画像+タイトル 共通部分
	【ヘアカタ】レイアウトパターン01 画像のみ・レイアウトパターン02 画像+タイトル 共通部分
	【STAFF】レイアウトパターン01 画像+タイトル 共通部分
==================================================================== */
.blogLay03 .blogContent,
.blogLay04 .blogContent,
.hairLay01 .hairContent,
.hairLay02 .hairContent,
.staffLay01 .staffContent,
.equalityArea .equalityBlock {
	width: 25%;
	float: left;
	text-align: center;
	padding: 10px;
	border-top: @borderGraySolid1;
	border-right: @borderGraySolid1;
	border-bottom: @borderGraySolid1;

	&:nth-of-type(4n+1) {
		border-left: @borderGraySolid1;
	}

	&:nth-of-type(n+5) {//5番目以降
		border-top: none;
	}
}

/* ====================================================================

	【BLOG】レイアウトパターン04 画像+タイトル 部分
	【ヘアカタ】レイアウトパターン02 画像+タイトル 部分
==================================================================== */
.blogLay04 .blogContent,
.hairLay02 .hairContent,
.equalityArea .equalityBlock {
	.imageArea {
		margin: 0 0 10px;
	}

	.date {
		margin: 0 0 5px;
	}
}

.blogLay04 {
	.blogContent {
		h3{
			a{
				height:60px;
				overflow:hidden;
				/*.webkitline;*/
				-webkit-line-clamp: 3;
			}
		}
	}
}

/* ====================================================================

	【BLOG】レイアウトパターン05 画像+タイトル+記事表示 部分
	【ヘアカタ】レイアウトパターン03 画像+タイトル+記事表示 部分
==================================================================== */
.blogLay05 .blogContent,
.hairLay03 .hairContent {
	padding: 10px 0 15px;
	margin: 0 0 10px;
	border-bottom: @borderGraySolid1;

	&:first-of-type {
		padding: 0 0 15px;
	}

	&:last-of-type {
		margin: 0px;
	}

	.imageArea {
		width: 160px;
		height: 160px;
		border: @borderGraySolid1;
		float: left;

		img {
			padding: 10px;
		}
	}

	.textArea {
		float: right;
		width: calc(~"100% - 180px");
	}
}


/* ===========================================================================================

	Gallery 設定
=========================================================================================== */

.galleryArea {
	.galleryContent {
		position: relative;

		.clearfix();
	}

	.galleryCom {
		margin: 0 0 20px;
	}

	.galleryMore {
		background: @colorMain;
		bottom: 0;
		color: @colorWhite;
		font-size: 90%;
		padding: 5px 15px;
		position: absolute;
		right: 10px;
	}

	/* ===================================================
		カテゴリ一覧 部分
	=================================================== */
	.galleryTerms {
		margin-top: 20px;
		margin-bottom: 20px;
		ul {
			display: table;
			width: 100%;
			li {
				display: table-cell;
				border-left: 1px solid @colorSub;
				text-align: center;
			}
			li:last-child {
				border-right: 1px solid @colorSub;
			}
		}
	}

	/* ===================================================
		イメージ 部分
	=================================================== */
	.galleryImgArea {
		.clearfix();

		img {
			bottom: 0;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
		}

		.mainImg {
			width: 100%;
			background: @colorGray;
			margin: 0 0 0px;
			position: relative;
		}

		.thumImg ul li {
			float: left;

			a {
				background-position: 50% 50%;
				background-repeat: no-repeat;
				background-size: cover !important;
				display: block;
				height: 100%;
				overflow: hidden;
				width: 100%;

				img {
					display: none;
				}
			}
		}
	}


	/* ====================================================================

		レイアウトパターン01 左画像+右コメント+詳細ボタン 部分
	==================================================================== */
	&.galleryLay01 .galleryContent {
		margin: 0 0 30px;

		&:last-of-type {
			margin: 0;
		}

		.galleryImgArea {
			float: left;
			width: 300px;

			.mainImg {
				height: 300px;
				background: none;
				border: @borderGraySolid1;

				img {
					padding: 10px;
				}
			}

		}// .galleryImgArea END

		/* ===================================================
			GALLERY情報 部分
		=================================================== */
		.galleryInfo {
			float: right;
			width: calc(~"100% - 320px");
		}

	}// galleryLay01 .galleryContent END


	/* ====================================================================

		レイアウトパターン02 画像2列+タイトルスライドイン 部分
	==================================================================== */
	&.galleryLay02 .galleryContent {
		float: left;
		width: 49%;
		padding: 10px;
		border: @borderGraySolid1;
		margin: 20px 0 0;

		&:nth-of-type(even) {
			float: right;
		}

		&:nth-of-type(-n+2) {
			margin: 0;
		}

		.galleryImgArea {
			float: left;
			width: 100%;

			height: 300px;
			position: relative;
			overflow: hidden;

			h3 {
				position: absolute;
				bottom: -300px;
				left: 0;
				padding: 5px;
				color: @colorWhite;
			}

			&:hover h3 {
				bottom: 0;
				width: 100%;
				transition: @transition03Ease;
				background: rgba(0,0,0,0.8);
				display: inline-block;
				vertical-align: middle;
				text-align: center;
			}

		}// .galleryImgArea END
	}// galleryLay02 .galleryContent END


	/* ====================================================================

		レイアウトパターン03 画像3列+タイトル 部分
	==================================================================== */
	&.galleryLay03 .galleryContent {
		float: left;
		width: 32.66%;

		border: @borderGraySolid1;
		margin: 20px 1% 0 0;

		&:nth-of-type(-n+3) {
			margin: 0px 1% 0 0;
		}

		&:nth-of-type(3n) {
			margin-right: 0%;
		}

		.galleryImgArea {
			float: left;
			width: 100%;
			height: 170px;
			position: relative;

			img {
				padding: 10px;
			}

		}// .galleryImgArea END


		h3 {
			font-size: 90%;
			display: inline-block;
			width: 100%;
			padding: 10px;
			text-align: center;
		}


	}// galleryLay03 .galleryContent END


	/* ====================================================================

		レイアウトパターン04 画像3列+タイトルスライドイン 部分
	==================================================================== */
	&.galleryLay04 .galleryContent {
		float: left;
		width: 32.66%;
		padding: 10px;
		border: @borderGraySolid1;
		margin: 20px 1% 0 0;

		&:nth-of-type(-n+3) {
			margin: 0px 1% 0 0;
		}

		&:nth-of-type(3n) {
			margin-right: 0%;
		}

		.galleryImgArea {
			float: left;
			width: 100%;
			height: 170px;
			position: relative;
			overflow: hidden;

			h3 {
				position: absolute;
				bottom: -300px;
				left: 0;
				font-size: 90%;
				padding: 5px;
				color: @colorWhite;
			}

			&:hover h3 {
				bottom: 0;
				width: 100%;
				transition: @transition03Ease;
				background: rgba(0,0,0,0.8);
				display: inline-block;
				vertical-align: middle;
				text-align: center;
			}

		}// .galleryImgArea END
	}// galleryLay04 .galleryContent END


	/* ====================================================================

		レイアウトパターン05 画像のみ全表示　シングル無し 部分
	==================================================================== */
	&.galleryLay05 .galleryContent {
		margin: 0 0 30px;

		&:last-of-type {
			margin: 0;
		}

		.galleryImgArea {
			height: 170px;
			position: relative;
			float: left;
			width: 32.66%;

			border: @borderGraySolid1;
			margin: 20px 1% 0 0;

			&:nth-of-type(-n+3) {
				margin: 0px 1% 0 0;
			}

			&:nth-of-type(3n) {
				margin-right: 0%;
			}

			img {
				padding: 10px;
			}

		}// .galleryImgArea END

	}// galleryLay05 .galleryContent END


	/* ====================================================================

		レイアウトパターン06 全表示　シングル無しとシングルパターン01 2カラム表示 部分
	==================================================================== */
	&.galleryLay06 .galleryContent,
	&.gallerySingleLay01 .galleryContent {
		margin: 0 0 30px;

		&:last-of-type {
			margin: 0;
		}

		.galleryImgArea {
			float: left;
			width: 300px;

			.mainImg {
				height: 300px;
			}

			.thumImg {
				ul {
					li {
						width: 93px;
						height: 93px;
						margin: 10px 10px 0px 0;

						&:nth-child(3n) {
							margin: 10px 0 0px;
						}
					}
				}
			}
		}// .shopImgArea END

		/* ===================================================
			Gallery情報 部分
		=================================================== */
		.galleryInfo {
			float: right;
			width: calc(~"100% - 320px");
		}

	}// galleryLay06 .galleryContent END


	/* ====================================================================

		シングルパターン01 2カラム表示 部分
	==================================================================== */
	&.gallerySingleLay01 .galleryContent .galleryImgArea {
		.sliderWrap #galleryslider {
			li {
				height: 250px;

				img {
					max-width: 70%;
					max-height: 70%;
				}
			}
		}
	}


	/* ====================================================================

		シングルパターン02 1カラム表示 部分
	==================================================================== */
	&.gallerySingleLay02 .galleryContent {
		margin: 0 0 30px;

		&:last-of-type {
			margin: 0;
		}

		.galleryImgArea {
			width: 100%;
			margin: 0 0 30px;

			.mainImg {
				height: 300px;
			}

			.thumImg {
				ul {
					li {
						width: 15%;
						height: 93px;
						margin: 10px 2% 0px 0;

						&:nth-child(6n) {
							margin: 10px 0 0px;
						}
					}
				}
			}


			/* ===================================================
				スライダー 部分
			=================================================== */
			.sliderWrap {
				#galleryslider {
					li {
						height: 350px;

						img {
							max-width: 90%;
							max-height: 90%;
						}
					}
				}
			}

		}// .shopImgArea END

		/* ===================================================
			SHOP情報 部分
		=================================================== */
		.galleryInfo {
			width: 100%;
		}

	}// galleryLay06 .galleryContent END


	/* ====================================================================

		シングルパターン 共通部分
	==================================================================== */
	&.gallerySingleLay01 .galleryContent .galleryImgArea,
	&.gallerySingleLay02 .galleryContent .galleryImgArea {
		position: relative;

		h4 {
			position: absolute;
			bottom: 0;
			padding: 5px;
			left: 0;
			right: 0;
			background: rgba(0,0,0,0.5);
			color: @colorWhite;
			z-index: 1000;
			font-weight: normal;
			font-size: 90%;
			line-height: 130%;
		}
	}


	/* ====================================================================

		シングル スライダー 共通部分
	==================================================================== */
	.sliderWrap {
		width: 100%;

		.bx-wrapper {
			border: @borderGraySolid1;
		}

		#galleryslider {
			li {
				align-items: center;
				display: flex;
				justify-content: center;
			}
		}

		/* ===================================================
			スライダー ポインター 部分
		=================================================== */
		.bx-wrapper .bx-pager.bx-default-pager a {
			background: @colorGray;
		}
		.bx-wrapper .bx-pager.bx-default-pager a:hover,
		.bx-wrapper .bx-pager.bx-default-pager a.active {
			background: @colorSub;
		}

		/* ===================================================
			スライダー タイトル 部分
		=================================================== */
		.bx-wrapper .bx-caption {
			position: absolute;
			bottom: 0;
			left: 0;
			background: #666\9;
			background: rgba(80, 80, 80, 0.75);
			width: 100%;
		}

		.bx-wrapper .bx-caption span {
			color: #fff;
			font-family: Arial;
			display: block;
			font-size: .85em;
			padding: 10px;
		}
	}

	/* ====================================================================

		シングル ビフォー・アフター表示 部分
	==================================================================== */
	&.gallerySingleLayBa .galleryContent {

		.galleryImgArea {
			margin: 0 0 30px;
			width: 100%;

			/* ===================================================
				Before・After縦並び 部分
			=================================================== */
			&.baLayRow .baContent {
				margin: 0 0 30px;
				padding: 0 0 30px;
				border-bottom: @borderGrayDot2;
				.clearfix;

				&:last-of-type {
					margin: 0;
				}

				.beforeArea,.afterArea {
					width: 100%;
					.clearfix;

					.imgBlock {
						float: left;
						width: 47%;
						height: 300px;
						position: relative;
						border: @borderGraySolid1;

						&:only-child {
							width: 100%;
						}

						img {
							padding: 10px;
						}
					}

					.textBlock {
						width: 50%;
						float: right;
						position: relative;

						h4 {
							.hLay01;
						}
					}
				}

				.beforeArea {
					margin: 0 0 30px;
					padding: 0 0 30px;

					&:only-child {
						margin: 0;
						padding: 0;
					}
				}

				.afterArea {
					position: relative;

					&:before,&:after {
						position: absolute;
						content: "";
						display: block;
						width: 0px;
						height: 0px;
						border-style: solid;
						left: 50%;
						margin-left: -20px;
						border-width: 15px 20px 0 20px;
					}

					&:before {
						top: -39px;
						border-color: #fff transparent transparent transparent;
						z-index: 2;
					}

					&:after {
						top: -37px;
						border-color: @colorMain transparent transparent transparent;
						z-index: 1;
					}
				}
			}

			/* ===================================================
				Before・After縦並び 部分
			=================================================== */
			&.baLayCols .baContent {
				margin: 0 0 30px;
				padding: 0 0 30px;
				border-bottom: @borderGrayDot2;
				.clearfix;

				&:last-of-type {
					margin: 0;
				}

				.beforeArea,.afterArea {
					width: 46%;
					.clearfix;

					.imgBlock {
						width: 100%;
						height: 300px;
						position: relative;
						border: @borderGraySolid1;

						&:only-child {
							width: 100%;
						}

						img {
							padding: 10px;
						}
					}

					.textBlock {
						width: 100%;
						margin: 20px 0 0;
						position: relative;

						h4 {
							.hLay01;
						}
					}
				}

				.beforeArea {
					float: left;

					&:only-child {
						margin: 0;
						padding: 0;
					}
				}

				.afterArea {
					float: right;
					position: relative;

					&:before,&:after {
						position: absolute;
						content: "";
						display: block;
						width: 0px;
						height: 0px;
						border-style: solid;
						top: 50%;
						margin-top: -20px;
						border-width: 20px 0px 20px 15px;
					}

					&:before {
						left: -37px;
						border-color: transparent transparent transparent #fff;
						z-index: 2;
					}

					&:after {
						left: -35px;
						border-color:  transparent transparent transparent @colorMain;
						z-index: 1;
					}
				}
			}
		}

		/* ===================================================
			Gallery情報 部分
		=================================================== */
		.galleryInfo {
			width: 100%;
		}

	}
}


/* ===========================================================================================

	Review 設定
=========================================================================================== */

#review_post {
	h2 {
		.hLay02;
		margin: 0 0 20px;
	}

	p.updated {
		display: none;
		margin: 0 0 20px;
	}

	dl {
		.comDlLay;

		dd {
			input.title {
				padding: 10px;
				width: 50%;
			}

			textarea.text {
				width: 100%;
				padding: 10px;
			}
		}
	}

	.submit {
		margin: 30px auto 0;
		text-align: center;

		.submitbtn {
			padding: 10px;
			border-radius: 10px;
			background: @colorMain;
			color: @colorWhite;
			width: 30%;
			border: none;
			font-size: 120%;

			&:hover {
				opacity: 0.7;
				transition: @transition03Ease;
			}
		}
	}
}

.reviewArea .blogContent { margin-bottom: 40px; }


/*==========================================
    # add to style
============================================*/

/*  # body
============================================*/
body {
	color: #333;
	font-size: 18px;
	font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

/*  #header
============================================*/

#wrap {
	header {

		// wrapper
		.headerContainer {}

		h1 {
			margin: 10px 0 0;
		}

		// logo
		.logoArea {}

		// info
		.headerInfo {}

		// tel
		.telNum {
			color: #333;
		}

		// contact
		.contactLink {}

		// address
		.add {}

		// time text
		.businessHours {}
	}
}

/*  # global nav
============================================*/

#wrap {
	.globalNavi {
		background: url(../images/separator.png) repeat-x 50% 0,
								url(../images/separator.png) repeat-x 50% 100%;

		.global {
			li {
				padding: 10px 0;
				position: relative;

				a {
					padding: 6px 5px;
					border-left: 1px solid #e7e7e7;
					&:before {
						content: "";
						display: block;
						width: 100%;
						height: 3px;
						background-color: transparent;
						position: absolute;
						bottom: -1px;
						left: 0;
					}

					&:hover {
						opacity: 1;

						&::before {
							background-color: #71bbd0;
						}
					}
				}

				// current
				&.current {
					a {
						&::before {
							background-color: #71bbd0;
						}
					}
				}

				&:last-child {
					a {
						border-right: 1px solid #e7e7e7;
					}
				}
			}
		}
	}
}

/*  # slide
============================================*/

#wrap {
	#sliderContent {

		// wrap
		.sliderWrap {
			width: 1418px;
			max-width: 100%;
		}

		// slide content
		#galleryslider {
			li {
				height: auto;
				img {
					width: 100%;
					height: auto;
					max-width: none;
					max-height: none;
				}
			}
		}

		// pager
		.bx-pager {
			&.bx-default-pager {
				a {
					background: #999 !important;

					&:hover,
					&.active {
						background: #333 !important;
					}
				}
			}
		}
	}
}

/*  # footer
============================================*/

#wrap {

	footer {
		background: url(../images/bg_footer.png) no-repeat 50% 1px,
								url(../images/separator.png) repeat-x 50% 0;
	}
	//  footer nav
	.footerNavi {
		border-bottom: 1px solid #eee7de;
		a {
			font-size: 12px;
		}
	}
	// wrap
	.footerContainer {
		margin: 0 auto 40px;
		// logo
		.logoArea {
			margin: 10px 20px 0 0;
		}
		// info
		.footerInfo {}
		// text
		h2 {
			background: none;
			color: #333;
			padding: 0;
			margin: 0;
			font-size: 100%;
		}
		// text2
		h3 {}
		// address
		.add {}
		// tel
		.telNum {}
		// time
		.businessHours {}
		// sns icon
		.snsIcon {}
	}
	//  copy
	.copyright {
		background: rgba(255, 255, 255, .5);
	}
}

/*  #blog widget
============================================*/

//  date column width

.page-myfront {
	.blogType1 {
		.comDl {
			dd {
				width: 31%;
			}
		}
	}
}

/*  # headding
============================================*/

// page heading
.fl-module-heading {
	h1 {
		&.fl-heading {
			font-size: 200%;
			font-weight: normal;
			background: url(../images/bg_h01.png) no-repeat 50% 100%;

			#mainContent & {
				padding: 0 0 20px !important;
				margin: 0 0 20px !important;
			}

			.fl-heading-text {}
		}
	}
	h2 {
		&.fl-heading {
			font-size: 180%;
			font-weight: normal;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: center;
			justify-content: center;

			#mainContent & {
				margin: 0 0 20px !important;
			}

			&::before,
			&::after {
				content: "";
				display: block;
				-webkit-flex: none;
				flex: none;
				width: 50px;
				background: url(../images/bg_h02.png) repeat-x 0% 50%;
			}

			.fl-heading-text {
				margin: 0 15px;
			}
		}
	}
	h3 {
		&.fl-heading {
			font-size: 130%;
			font-weight: normal;
			background: url(../images/bg_h03.png) no-repeat 0% 100%;

			#mainContent & {
				padding: 0 0 10px !important;
				margin: 0 0 20px !important;
			}

			.fl-heading-text {}
		}
	}
	h4 {
		&.fl-heading {
			font-size: 110%;
			font-weight: normal;
			background: url(../images/ico_h04.png) no-repeat 0% 3px;

			#mainContent & {
				padding: 0 0 0 20px !important;
			}

			.fl-heading-text {}
		}
	}
	h5 {
		&.fl-heading {
			font-size: 100%;
			color: #71bbd0;

			.fl-heading-text {}
		}
	}
	h6 {
		&.fl-heading {
			font-size: 100%;
			color: #ffa043;

			.fl-heading-text {}
		}
	}
}

#mainContent {

	// system heading layout
	& > h2 {
		&:not(.fl-heading) {
			text-align: center;
			background: none;
			color: #333;
			font-size: 200%;
			font-weight: normal;
			background: url(../images/bg_h01.png) no-repeat 50% 100%;
			padding: 0 0 20px;
			margin: 0 0 40px;

			span {}
		}
	}

}

// seo
#bottomTextArea {
	.hLay02 {
		background: none;
		color: #333;
		text-align: center;
		font-size: 180%;
		font-weight: normal;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		margin: 0 0 20px;

		&::before,
		&::after {
			content: "";
			display: block;
			-webkit-flex: none;
			flex: none;
			width: 50px;
			background: url(../images/bg_h02.png) repeat-x 0% 50%;
		}

		span {
			margin: 0 15px;
		}
	}
}

/*  # sidebar
============================================*/

#wrap {
	#sidebar {

		// side heading
		.sideContent {
			h2 {
				background: #71bbd0;
				text-align: center;
				margin: 0;
			}

			// side nav
			.contentNavi {
				background: #f8f8f8;
				padding: 0;
				border: 0;

				.comUl {
					li {
						border-bottom: 1px dotted #ededed;

						&:last-child {
							border: 0;
						}

						a {
							text-align: center;
							color: #000;

							&::before,
							&::after {
								border: 0;
							}
						}
					}
				}
			}

			// news,blog
			.newsNavi {
				.comUl {
					li {
						border-bottom: 1px dotted #d5d5d5;

						.date {
							color: #000;
						}
						h4 {
							padding: 0;
							font-weight: normal;
							a {
								color: #000;
							}
						}
					}
				}
			}

		}

		.moreBtn {
			a {
				border-radius: 0;
			}
		}

	}
}


/*  # main img
============================================*/

.mainImgArea {
	margin: 20px 0;

	.page-myfront & {
		display: none;
	}

	.mainImgContent {
		width: 1500px;
		max-width: 100%;

		img {
			width: 100%;
			height: auto;
			min-width: 1000px;
		}

		p {
			text-shadow: none;
			color: #333;
			width: 960px;
			font-size: 180%;
			height: 40px;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

/*  # pan list
============================================*/

#breadcrumb {
	color: #999;
	a {
		color: #333;
	}
}

/*  # moreBtn
============================================*/

#wrap {
	.moreBtn {
		a {
			height: auto;
			line-height: 1.4;
			display: inline-block;
			padding: 4px 25px;
		}
	}
}

/*  # contact banner
============================================*/

#contactBnr {
	max-width: 700px;
}

/*  # menu
		# パターン1で表示崩れの対応
		# 不要であれば削除
============================================*/

.menuWidget {
	.menuType1 {
		.menuWidget_inner {
			position: relative;
			left: auto;
			bottom: auto;
			border: 0;
			padding: 0.3em 0;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-align-items: center;
			align-items: center;
			z-index: 1;

			.menu,
			.price {
				background-color: #fff;
				box-sizing: border-box;
			}

			.menu {
				position: static;
				display: block;
				width: auto;
				max-width: 30%;
				margin: 0 30px 0 0;

				&:before {
					content: "";
					display: block;
					width: 100%;
					height: 2px;
					border-bottom: 2px dotted #999;
					position: absolute;
					top: calc(50% - 2px);
					left: 0;
					z-index: -1;
				}

			}

			.price {
				position: static;
				display: block;
				width: auto;
				max-width: 67%;
				z-index: 10;
			}

		}
	}
}

/*  # shop
============================================*/
.page-myfront {
	.shopWidget.shopType1 .shopWidget_content .shopImgArea .mainImg,
	.shopWidget.shopType2 .shopWidget_content .shopImgArea .mainImg {
		height: 300px;
		background: none;
	}

	.shopWidget_column {
		.moreBtn {
			text-align: right;
		}
	}
}