@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 ul {
	border-top: @borderGrayDot1;
	display: inline-block;
	width: 100%;
	position: relative;
	
	li {
		position: relative;
		display: inline-block;
		width: 100%;
		position: relative;
		border-bottom: @borderGrayDot1;
		padding: 10px 20px;
		
		&::before {
			position: absolute;
			top: 50%;
			left: 5px;
			.arrowRightSets;
		}
		
		a {
			position: relative;
			display: inline-block;
			width: auto;
		}
	}
}


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

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

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

		レイアウトパターン02 記事一覧 箇条書きの場合
	==================================================================== */
	&.blogLay02 dl {
		.ComFlexBox(flex-start,flex-start,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		dt {
			width: calc(~"100% - 120px");
			order: 1;
			display: inline-block;
			position: relative;

			&::before,
			&::after{
				left: 0px;
			}
		}

		dd {
			width: 120px;
			padding-left: 0;
		}
	}
}// .blogArea END


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

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

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

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

	.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: 3px 0 2px;
					text-align: center;
					vertical-align: middle;
					
					&.onMark {
						background: @hairCataMarkColor;
					}
				}
			}

			.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;
			
			&:hover h3 {
				.comSlidInH3HoverSets;
			}
			
			.yomi,.position {
				display: inline-block;
				width: 100%;
			}
		}
	}

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

		レイアウトパターン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;
	}
}


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

	【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;
			z-index: -1;
		}

		.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;

			&:hover h3 {
				.comSlidInH3HoverSets;
			}

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


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

		レイアウトパターン03 画像3列+タイトル 部分
	==================================================================== */
	&.galleryLay03 .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;
			margin: 0 0 20px;
		}// .galleryImgArea END
	}// 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;

			&:hover h3 {
				.comSlidInH3HoverSets;
			}

		}// .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 {
		.gallerySliderWrap #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;
						}
					}
				}
			}


			/* ===================================================
				スライダー 部分
			=================================================== */
			.gallerySliderWrap {
				#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;

	}


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

		シングル スライダー 共通部分
	==================================================================== */
	.gallerySliderWrap {
		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;
			background: rgba(80, 80, 80, 0.75);
			width: 100%;
			z-index: 1000;
		}

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

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

				.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 {

	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
// ==========================================================================
@textColor: #000;
@gold: #ae8e00;
@tfMin: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;

// ==========================================================================
//   # base
// ==========================================================================
body {
  color: @textColor;
  font-size: 16px;
  line-height: 1.6;
  font-family:Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  -webkit-text-size-adjust: 100%;
}

// ==========================================================================
//   # header
// ==========================================================================
#wrap {

  header {
    margin: 0;
    padding: 0 0 20px;
    color: #fff;
    background: linear-gradient(to bottom, #2c2c2c 0%,#141414 98%);

    .headArea01 {
      background: transparent;
      border-bottom: 1px solid #000;
      box-shadow: 0 1px 0 #3f474a;
    }

    .headerH1 {
      color: @gold;
    }

    .telNum {
      color: #fff;

      &:before {
        color: @gold;
      }
    }
  }
}

// ==========================================================================
//   # nav
// ==========================================================================
.globalNavi {
  min-width: 1000px;
  background: #000;
  border-top: 1px solid #3b3b3b;

  .global {
    
    li {
      border-left: 1px solid #3b3b3b;

      &:hover {
        background: url(../images/current.png) no-repeat 50% 0;
      }

      &:last-child {
        border-right: 1px solid #3b3b3b;
      }

      a {
        padding: 12px 5px;
        margin: 0;
        border: 0;
        color: #fff;
        transition: none;

        &:hover {
          opacity: 1;
          border: 0;
        }
      }

    }

    .current {
      background: url(../images/current.png) no-repeat 50% 0;

      a {
        opacity: 1;
        border: 0;
      }
    }
    
  }
}

// ==========================================================================
//   # slider top mv
// ==========================================================================
#sliderContent {
  padding-top: 40px;
  background: url(../images/bg_mv.jpg) no-repeat 50% 0;

  .sliderWrap {
    width: 100%;
    max-width: 1200px;
    min-width: 1000px;

    li {
      height: auto;

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

  // bx slider
  .bx-wrapper {
    margin: 0 auto;

    .bx-pager {
      padding-top: 80px;

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

          &.active {
            background: #7c6201 !important;
          }
        }
      }
    }
  }

}

// ==========================================================================
//   # lower mv
// ==========================================================================
.mainImgArea {
  min-width: 1000px;

  .mainImgContent {
    p {
      color: #fff;
      font-family: @tfMin;
      font-size: 180%;
      text-shadow: none;
    }
  }
}

// ==========================================================================
//   # breadcrumb
// ==========================================================================
#breadcrumb {
  a {
    color: @textColor;

    &:last-child {
      pointer-events: none;
    }
  }
}

// ==========================================================================
//   # scroll top
// ==========================================================================
#scrolltop {

  p {
    line-height: 1;
  }

  a {
    color: @textColor;

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

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

}

// ==========================================================================
//   # footer
// ==========================================================================
#wrap {

  footer {
    min-width: 1000px;
    background: #3a3a3a;

    .footerContainer {
      display: flex;
      align-items: center;
    }

    .footerNavi {
      border-bottom: 1px solid #000;
      box-shadow: 0 1px 0 #5d5d5d;

      ul {
        li {
          width: auto;
          margin: 0 16px;

          a {
            display: inline-block;
          }
        }
      }
    }

    .logoArea {
      width: 30%;
      float: none;
    }

    .footerInfo {
      float: none;
    }

    .copyright {
      background: #000;
      border-top: 1px solid #303030;
      box-shadow: 0 -1px 0 #000;
    }

    h2 {
      padding: 0;
      background: transparent;
      color: #fff;
      font-size: 100%;
      font-weight: bold;
    }
  }

}

// ==========================================================================
//   # side
// ==========================================================================
#wrap {

  .sideContent {

    nav {
      .moreBtn {
        a {
          border-radius: 0;
        }
      }
    }
    
    h2 {
      padding: 10px 0 !important;
      background: transparent;
      border-bottom: 3px solid @colorSub;
      color: @textColor;
      font-family: @tfMin;
      font-weight: bold;
    }

    .contentNavi {
      padding: 0;
      border: 0;

      // ul {}

      li {
        border-bottom: 1px solid #dcdcdc;
        padding: 0;

        a {
          padding: 10px 20px;

          &:hover {
            background: #f4f4f4;
            color: @colorSub;
            opacity: 1;
          }

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

    .newsNavi {
      .date {
        color: @colorSub;
        font-weight: bold;
        font-size: 90%;
      }

      h3 {
        a {
          font-size: 16px;
        }
      }

      // ul {}

      li {
        border-bottom: 1px solid #dcdcdc;

        a {
          color: @textColor;
          font-weight: normal;
        }
      }
    }

  }
}

// ==========================================================================
//   # more button
// ==========================================================================
.moreBtn {
  a {
    display: inline-block;
    min-width: 180px;
    height: auto;
    padding: 6px 6px;
    position: relative;
    background: #4cc2e6;
    font-size: 100%;
    text-shadow: none;
    letter-spacing: normal;
    line-height: 1.6;
    text-align: center;
    
    &::before {
      display: block;
      width: ~"calc(100% - 2px)";
      height: ~"calc(100% - 2px)";
      position: absolute;
      top: 1px;
      position: absolute;
      left: 1px;
      border: 1px solid #fff;
      opacity: .5;
      content: "";
    }
    // &::after {}
  }
}

// ==========================================================================
//   # contact banner
// ==========================================================================
#wrap {
  .c_banner {
    max-width: 700px;
  }  
}