@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();
}


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

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

.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%;
			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 {
		display: table;
		width: 100%;
		.shopImgArea {
			display: table-cell;
			vertical-align: top;
			width: 320px;
			padding-right: 20px;

			.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 {
			display: table-cell;
			vertical-align: top;
		}
	}// 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 {
			display: table;
			width: 100%;
			.gmap {
				display: table-cell;
				vertical-align: top;
				width: 320px;
				padding-right: 20px;
			}

			.shopInfo {
				display: table-cell;
				vertical-align: top;
			}

		}// .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%;
		}
	}

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

		レイアウトパターン04 画像・タイトル
	==================================================================== */
	&.blogLay04 .blogContent {
		.ttl{
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			height: 1.3em;
		}
	}


}// .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;
			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: 10px 10px 0 0;

					&:nth-child(3n) {
						margin: 10px 0 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;
	}

	.staffWrapContent {
		margin: 0 0 30px;

		.clearfix();
	}// .staffWrapContent END

	.staffContent {
		margin: 0 0 30px;

		.clearfix();
	}// .staffContent END

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

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

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

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

			h3 {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&: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;
	}

	h3 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.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%;
			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 {
					width: auto;
					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 {
							width: auto;
							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; }

/* ====================================================================
	ブログ記事内スタイル
==================================================================== */

.blogArea .commentArea em {
	color: inherit;
	font-style: italic;
}

.blogArea .commentArea blockquote {
	background-color: @colorBG;
	padding: 15px 40px;
	margin: 15px 0;
	position: relative;
	display: block;
	overflow: hidden;
}
.blogArea .commentArea blockquote:before {
	content: "“";
	font-size: 600%;
	line-height: 1em;
	position: absolute;
	left: 5px;
	top: 5px;
}
.blogArea .commentArea blockquote:after {
	content: "”";
	font-size: 600%;
	line-height: 0em;
	position: absolute;
	right: 5px;
	bottom: 0;
}

.alignleft{
	float: left;
	margin: 0 15px 15px 0;
}
.aligncenter{
	float: none;
	display: block;
	margin: 0 auto 15px;
	clear: both;
}
.alignright{
	float: right;
	margin: 0 0 15px 15px;
}


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

/*  # base setting
============================================*/
@baseTextColor: #2d2d2d;
@baseTextSize: 15px;
@baseFont: "游ゴシック体", "Yu Gothic Medium", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

.baseSet {
	color: @baseTextColor;
	line-height: 1.6;
	font-size: @baseTextSize;
	font-family: @baseFont;
	-webkit-text-size-adjust: 100%;
}

/*  # body
============================================*/
body {
	.baseSet;
}

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

// 電話番号アイコン
@telIcon2: "\e0df"; //☎
@telIcon3: "\e0c9"; //スマホ型

#wrap {
	header {
    border: 0;
    padding: 10px 0 0;

    .translation {
      margin: 0 0 6px;
    }

		// wrapper
		.headerContainer {}

		h1 {
      margin: 0 0 20px;
    }

		// logo
		.logoArea {
      width: 40%;
      margin: 0;
    }

		// info
		.headerInfo {
      max-width: 55%;
      margin: 10px 0 0;
    }

		// tel
		.telNum {
      color: @colorSub;
      font-weight: bold;
			&::before {}
		}

		// contact
		.contactLink {}

		// address
		.add {}

		// time text
		.businessHours {
      margin: 0 0 8px;
    }
	}
}

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

#wrap {
	.globalNavi {
    background: transparent;
    color: currentColor;
    margin: 0 0 20px;

		.global {
      display: table;

			li {
        display: table-cell;
        width: auto;

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

				a {
          color: @baseTextColor;
          padding: 0 5px;
          border-left: 1px solid #e6e6e6;

					&:hover {
            opacity: .7;
            background: transparent;
          }
				}

				// current
				&.current {}

				&:last-child {
					a {}
				}
			}
		}
	}
}

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

#wrap {
	#sliderContent {
    min-width: 1000px;
    margin: 0;

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

		.bx-wrapper {
      margin: 0;
    }

		// slide content
		#galleryslider {
			li {
        height: auto;
        margin: 0;

				img {
					width: 100%;
					height: auto;
					max-width: 100%;
					max-height: none;
				}
			}
		}

		// pager
		.bx-pager {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: -40px;
      z-index: 5;
      padding: 0;

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

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

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

#wrap {
  footer {
    min-width: 1000px;
  }

	//  footer nav
  .footerNavi {
    border-bottom: 1px solid #006267;
    box-shadow: 0 1px 0 #007d84;
    margin: 0 0 40px;

    li {
      a {
        display: inline-block;
        width: auto;
      }
    }
  }
	// wrap
	.footerContainer {
    margin: 0 auto 40px;

		// logo
		.logoArea {
      width: 80%;
    }
		// info
		.footerInfo {
      float: none;
      max-width: 100%;
      margin: 20px 0 0;
    }
		// text
		h2 {
			padding: 0;
			margin: 0 0 5px;
			background: none;
			font-size: 100%;
			font-weight: normal;
			color: inherit;
		}
		// text2
		h3 {}
		// address
		.add {}
		// tel
		.telNum {
			&::before {
      }
		}
		// time
		.businessHours {}
		// sns icon
		.snsIcon {}
	}
	//  copy
	.copyright {
    background: #00656a;
  }
}

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

//  date column width

.page-myfront {
	.blogType1 {
		.comDl {
      table-layout: fixed;
      border-bottom: 1px dotted #cacaca;

			dd {
				width: 24%;
      }
      
      dt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &::after {
          content: none;
        }

        a {
          color: @baseTextColor;
        }
      }
		}
	}
}

/*  # heading
============================================*/

#wrap {
  h2 {
    &.fl-heading {
      position: relative;
      padding: 0 0 6px !important;
      margin: 0 0 14px !important;
      font-size: 160%;
      color: @baseTextColor;
      background: transparent;

      &::before {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: @colorMain;
      }
    }
  }

  #mainContent {
    > h2 {
      position: relative;
      padding: 0 0 6px !important;
      margin: 0 0 30px !important;
      font-size: 160%;
      color: @baseTextColor;
      background: transparent;

      &::before {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: @colorMain;
      }
    }
  }

  .text-center {
    h2 {
      &.fl-heading {
        &::before {
          left: ~"calc(50% - 30px)";
        }
      }
    }
  }

  .text-white {
    .fl-heading {
      color: @colorWhite;
    }

    h2 {
      &.fl-heading {
        &::before {
          background: @colorWhite;
        }
      }
    }
  }

  h3 {
    &.fl-heading {
      margin: 0 0 14px !important;
      border: 0;
      font-size: 140%;
      font-weight: bold;
      color: @colorMain;

      &::after {
        content: none;
      }
    }
  }

  .top-strength {
    h3 {
      &.fl-heading {
        padding: 20px 10px 0 !important;
        height: 190px;
        background: @colorMain;
        position: relative;

        &::after {
          content: "";
          display: block;
          width: ~"calc(100% - 6px)";
          height: 184px;
          position: absolute;
          top: 3px;
          left: 3px;
          box-sizing: border-box;
          border: 1px solid #99c6c8;
        }
      }
    }
  }

  .top-strength01 {
    h3 {
      &.fl-heading {
        background: @colorMain url(../images/img_top07.png) no-repeat 50% 80%;
        background-size: auto 85px;
      }
    }
  }

  .top-strength02 {
    h3 {
      &.fl-heading {
        background: @colorMain url(../images/img_top08.png) no-repeat 50% 80%;
        background-size: auto 85px;
      }
    }
  }

  .top-strength03 {
    h3 {
      &.fl-heading {
        background: @colorMain url(../images/img_top09.png) no-repeat 50% 80%;
        background-size: auto 85px;
      }
    }
  }

  .chara-item {
    h3 {
      &.fl-heading {
        margin: 0 0 8px !important;
        font-size: 125%;
        letter-spacing: -0.1px;
      }
    }
  }

  h4 {
    &.fl-heading {
      padding: 4px 0 4px 14px !important;
      margin: 0 0 14px !important;
      position: relative;
      border-bottom: 1px solid #e2e2e2;
      color: currentColor;
      font-size: 120%;
      font-weight: normal;

      &::before {
        content: "";
        display: block;
        width: 3px;
        height: 20px;
        position: absolute;
        top: ~"calc(50% - 10px)";
        left: 4px;
        background:linear-gradient(0deg, @colorMain 0%, @colorMain 50%, @colorBrown 50%, @colorBrown 100%);
      }
    }
  }

  h5 {
    &.fl-heading {
      padding: 0 0 4px !important;
      margin: 0 0 10px !important;
      border-bottom: 1px dotted #e2e2e2;
      font-size: 100%;
    }
  }

  h6 {
    &.fl-heading {
      margin: 0 0 10px !important;
      font-size: 100%;
      font-weight: bold;
      color: @colorSub;
    }
  }
}


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

#wrap {
	#sidebar {

		// side heading
		.sideContent {
			h2 {
        background: transparent;
        color: @colorMain;
        font-weight: bold;
        border-bottom: 3px solid;
        padding: 8px 0;
			}

			// side nav
			.contentNavi {
				padding: 0;
				border: 0;

				.comUl {
					li {
            padding: 0;
            border-bottom: 1px dotted #cacaca;

						&.current {
              a {
                background: @colorBG;
              }
            }

						a {
              padding: 10px 20px;
              color: @baseTextColor;
              
              &:hover {
                background: @colorBG;
              }

							&::before,
							&::after {
								content: none;
							}
						}
					}
				}
			}

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

						.date {
							color: @baseTextColor;
						}

						h4 {
							padding: 0;
							font-weight: normal;

							a {
								color: @baseTextColor;
							}
						}
					}
				}
			}

		}

		.moreBtn {
			a {
        border-radius: 4px;
      }
		}

	}
}


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

.mainImgArea {
  min-width: 1000px;

	.page-myfront & {
		display: none;
	}
}

/*  # pan list
============================================*/
#breadcrumb {
	color: @colorMain;

	a {
		color: @baseTextColor;
	}
}

/*  # moreBtn
============================================*/
#wrap {
	.moreBtn {
		a {
			height: auto;
			line-height: 1.4;
      display: inline-block;
      border-radius: 4px;
      padding: 10px 30px;
      position: relative;

      &::before {
        content: "";
        display: inline-block;
        margin: 0 8px 0 0;
        width: 6px;
        height: 6px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        transform:  rotate(45deg);
        vertical-align: middle;
      }
		}
	}
}

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

#wrap .contactBnr {
	max-width: 700px;
}

/*  # shop widget
============================================*/
.page-myfront {
	#wrap {
		.shopWidget {
			.mainImg {
				height: 300px;
				background: none;
      }
      
      h3 {
        border: 0;
        padding: 0;
        font-size: 140%;
        font-weight: bold;
        color: @colorMain;

        &::after {
          content: none;
        }
      }
		}
	}
}

/*  # scrolltop
============================================*/
#scrolltop {
	line-height: 1;

	a {

		&::after {
			border-top: 	2px solid @colorSub;
			border-right: 2px solid @colorSub;
		}

		&:link,
		&:visited {
			color: @baseTextColor;
		}
	}
}

/*
   # lv
========================================================================== */
.mainImgArea {
  .mainImgContent {
    p {
      text-shadow: none;
      color: @colorGrayDarker;
      font-weight: normal;
      font-size: 250%;
    }
  }
}