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

#dlt_pan {
	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%;
			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 {
		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;
	}
}

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

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

	/* ===================================================
		イメージ 部分
	=================================================== */
	.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;
			}
		}
	}
}