@charset "utf-8";


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

	共通設定
=========================================================================================== */
/* ====================================================================

	ボディ ボディの背景はメニューウィジェットでも使用
==================================================================== */
@bodyBg: @colorWhite;


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

	アイコンフォント
==================================================================== */
@iconFont: Flaticon;
@telIcon: "\e0a9";
@folderIcon: "\e058";


/* ===================================================
	フォントオーサム仕様 フォント指定（管理画面のフォントアイコン使用）
=================================================== */
.iconFontAwesome(@content) {
	font-family: "FontAwesome";
	content: @content;
	vertical-align: middle;
	display: inline-block;
}

@arrowLeftIcon: "\f104";
@arrowRightIcon: "\f105";
@arrowUpIcon: "\f106";
@arrowDownIcon: "\f107";


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

	カラー
==================================================================== */
@colorMain: #54483c;//メインカラー
@colorSub: #f02;
@colorWhite: #fff;
@colorGray: #e3e3e3;
@colorGrayDarker: #666;
@colorBrown: #645444;
@colorBG: #f4f5f7;

@baseColor: #292929;// フォント・リンク色に仕様


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

	共通ボーダー用
==================================================================== */
@borderSolid1: 1px solid @colorGray;
@borderSolid2: 2px solid @colorGray;
@borderSolid3: 3px solid @colorGray;
@borderSolid4: 4px solid @colorGray;

@borderDot1: 1px dotted @colorGray;
@borderDot2: 2px dotted @colorGray;
@borderDot3: 3px dotted @colorGray;
@borderDot4: 4px dotted @colorGray;


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

	clearfix
==================================================================== */
.clearfix {
	&:after {
		clear:both;
		height: 0;
		line-height: 0;
		display:block;
		content:"";
	}
}


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

	共通transition用
==================================================================== */
@transition03Ease: 0.3s ease-in-out;
@transition05Ease: 0.5s ease-in-out;

.transitionCom {
	-webkit-transition:  0.3s ease-in-out;
	-moz-transition:  0.3s ease-in-out;
	-o-transition:  0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}


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

	コンテンツサイズ設定
==================================================================== */
@contentWidth: 1000px;
@contentMargin: 0 0 50px;


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

	ボタン 共通設定
=========================================================================================== */
@comBtnBg: @colorSub;// ボタン背景
@comBtnPadding: 10px;// ボタンパディング
@comBtnTS: 1px 1px 1px rgba(0,0,0,0.5);// ボタンテキストシャドウ
@comBtnBorder: none;
@comBtnLinkColor: @colorWhite;// リンクカラー


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

	ヘッダー設定
=========================================================================================== */
@headerBorderTop: none;// ヘッダー上 ボーダー
@headerMargin: 0 0 20px;// ヘッダーブロックのマージン
@headerLay01LogoWidth: 50%;// レイアウト01のロゴのwidth
@telFont: 200%;// 電話番号のフォントサイズ
@telFontBefore: 85%;// 電話番号のアイコンフォントサイズ


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

	グローバルナビ設定
=========================================================================================== */
@globalNaviBg: @colorMain;// グローバルナビ背景
@globalLinkColor: #333333;// グローバルナビ リンク色
@globalPadding: 10px 5px;// グローバルナビ aタグのpadding
@globalNaviLiWidth: 20%;// グローバルナビ liの幅

@globalBorderLay: 10px;// 左右にボーダー付きレイアウト aタグのpadding上下の数値指定すること
@globalBorderLayColor: @colorWhite;// 左右にボーダー付きレイアウト ボーダーカラー


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

	フッター設定
=========================================================================================== */
@footerColor: @colorWhite;// テキストカラー
@footerH2Font: 110%;// H2フォントサイズ
@footerLay01LogoWidth: 10%;// レイアウト01のロゴのwidth
@footerLay01InfoWidth: 55%;// レイアウト01のインフォメーションのmax width
@footerLay01shopWidth: 15%;// レイアウト01の店舗情報のmax width
@footerLay01SnsWidth: 20%;// レイアウト01のSNSアイコンのwidth
@copyFont: 90%;// コピーライトフォントサイズ
@copyBg: rgba(0,0,0,0.6);// コピーライトの背景
@facebookIcon: #5b67a2;// facebookアイコンの色
@twitterIcon: #65b2c5;// twitterアイコンの色
@blogIcon: #7fbf33;// Blogアイコンの色


/* ===================================================
	フッターナビ設定
=================================================== */
@footerNaviPadding: 20px 0;// フッターナビのpadding
@footerNaviMargin: 0px 0 20px;// フッターナビのmargin
@footerNaviColor: @colorWhite;// フッターナビのリンク色
@footerNaviLiWidth: 20%;// フッターナビの幅
@footerNaviAPadding: 5px 0;// フッターナビのリンクpadding
@foooterNaviShadow: 0px 1px 0px rgba(255,255,255,1),0px 1px 1px rgba(000,000,000,0.5);// フッターナビブロックのボーダー


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

	サイドバー設定
=========================================================================================== */
@colorSideH3: @colorWhite;


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

	ベース設定
=========================================================================================== */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	outline: none;
	vertical-align: baseline;
	font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

body {
	line-break: strict;
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
	word-wrap : break-word;
	overflow-wrap : break-word;
	position: relative;
	letter-spacing: 0.5px;
	background: @bodyBg;
}

html.body {
	height: 100%;
	width: 100%;
}

img {
	vertical-align: top;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	-ms-interpolation-mode: bicubic;
}

img,
a img {
	border: 0;
}

a,
a:link,
a:active,
a:visited {
	color: @colorMain;
	text-decoration: none;
	outline: 0;
	-webkit-transition: @transition03Ease;
	-moz-transition: @transition03Ease;
	-o-transition: @transition03Ease;
	transition: @transition03Ease;
	cursor: pointer;
}

a:hover {
	opacity: 0.7;
}

ol,ul,li {
	list-style: none;
}
	ul:after {
		clear: both;
		height: 0;
		line-height: 0;
		display: block;
		content: "";
	}

ul,.inlineSets {
	letter-spacing: -.40em;

	li,dt,dd {
		letter-spacing: 0.5px;
	}
}

input, textarea, select {
	cursor: pointer;
}

input, select {
	vertical-align: middle;
}

textarea {
	padding: 10px;
}

#wrap {
	height: 100%;
	position: relative;
	.clearfix;

	&:after {
		visibility: hidden;
		overflow: hidden;
		font-size: 0;
	}
}

#container {
	width: @contentWidth;
	margin: 0 auto 30px;

	.wrap_col1 & {
		width: 100%;
	}

	.clearfix;

	#mainContent {
		display: block;
		padding: 0px 0px;
		width: 100%;
		max-width: @contentWidth;
		margin: 0 auto;

		&.floatLeft {
			width: 70% !important;
			float: left;
		}

		&.floatRight {
			width: 70% !important;
			float: right;
		}

		.clearfix;
	}
}


.mb5{
	margin-bottom: 5px !important;
}
.mb10{
	margin-bottom: 10px !important;
}
.mb20{
	margin-bottom: 20px !important;
}
.mb30{
	margin-bottom: 30px !important;
}
.mb40{
	margin-bottom: 40px !important;
}
.mb60{
	margin-bottom: 60px !important;
}


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

	共通 Hタグ 設定 （マージン・パディングはビルダーを使っているところは「!important」付きで）
=========================================================================================== */
h2 {
	#container .fl-builder-content &,
	#mainContent & {
		.hLay02;
		margin: 0 0 10px!important;
		padding: 10px 0 !important;
	}

	#sidebar .sideContent & {
		.hLay02;
		margin: 0 0 10px;
		font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	}
}

h3 {
	#container .fl-builder-content &,
	#mainContent & {
		.hLay03;
		margin: 0 0 20px!important;
		padding: 10px 0px !important;
	}

	span.date {
		.comData;
	}
}

.comData {
	margin: 0 0 5px;
	font-size: 80%;
	display: inline-block;
	width: 100%;
}


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

	共通Hタグ レイアウト設定
==================================================================== */

/* ===================================================
	下線 レイアウト
=================================================== */
.hLay01 {
	padding: 5px 0!important;
	border-bottom: @borderDot2;
	font-weight: normal;
	/*font-size: 100%;*/
	line-height: 130%;
}

/* ===================================================
	バックグランド レイアウト
=================================================== */
.hLay02 {
	padding: 10px!important;
	background: none;
	border-bottom:1px solid #95734B;
	color: #333333;
	/*font-size: 120%;*/
	font-weight: normal;
}

/* ===================================================
	左ボーダー・下線付き レイアウト
=================================================== */
.hLay03 {
	/*font-size: 110%;*/
	font-weight: normal;
	padding: 0px 10px 5px!important;
	position: relative;

	/*&:before {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 5px;
		width: 3px;
		content: "";
		background: @colorMain;
	}*/

	&:after {
		border-bottom: @borderDot1;
		position: absolute;
		width: 100%;
		content: "";
		bottom: 0px;
		left: -3px;
	}
}


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

	共通 UL・LI 設定
=========================================================================================== */
.comUl {
	li {
		width: 100%;
		border-bottom: @borderDot1;
		padding: 10px 0;
		display: inline-block;
		vertical-align: middle;
		line-height: 1;

		a {
			padding: 0px 0px;
			width: 100%;
			display: inline-block;
			line-height: 130%;
			vertical-align: middle;
			position: relative;
			color: @colorGrayDarker;
		}

		h4 {
			font-weight: normal;
			line-height: 150%;
		}

		.date {
			color: #cc6f70;
		}
	}
}

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

	共通 右アローアイコン
=========================================================================================== */
.comArrowRightBefore {
	padding-left: 15px!important;
	position: relative;

	&:before {
		position: absolute;
		line-height: 1;
		width: 0px;
		height: 0px;
		top: 50%;
		left: 3px;
		font-size: 16px;
		margin: -8px 0 0;
		.iconFontAwesome(@arrowRightIcon);// 引数にcontentを指定

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {// ieハック
			& {
				margin: -11px 0 0;
			}
		}
	}
}

.comArrowRightAfter {
	padding-right: 15px!important;
	position: relative;

	&:before {
		position: absolute;
		line-height: 1;
		width: 0px;
		height: 0px;
		top: 50%;
		right: 5px;
		font-size: 16px;
		margin: -8px 0 0;
		.iconFontAwesome(@arrowRightIcon);// 引数にcontentを指定

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {// ieハック
			& {
				margin: -11px 0 0;
			}
		}
	}
}


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

	共通DL（TABLE） レイアウト設定
=========================================================================================== */
.comDlLay {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0px;

	dt,dd {
		display: table-cell;
		padding: 10px 10px 10px;
		vertical-align: middle;
	}

	dt {
		width: 30%;
		position: relative;
	}
}


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

	アロー付き 共通DL（TABLE） レイアウト設定
==================================================================== */
.comDlArrowLeftSide {
	border-bottom: @borderDot1;
	.comDlLay;

	dt,dd {
		padding: 10px 10px 10px 0;
	}

	dt span.flexIcon, dd span.flexIcon {
		.comArrowRightBefore;
		align-items: center;
		display: flex;
		word-break: break-all;
	}
}

.comDlArrowRightSide {
	border-bottom: @borderDot1;
	.comDlLay;

	dt,dd {
		padding: 10px 10px 10px 0;
	}

	dt span.flexIcon, dd span.flexIcon {
		.comArrowRightAfter;
		align-items: center;
		display: flex;
		word-break: break-all;
	}
}


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

	テーブルレイアウト 共通DL（TABLE） レイアウト設定
==================================================================== */
.conDlBoxLay {
	.comDlLay;
	border-top: 1px solid #e3e3e3;
	border-left: 1px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;

	dt,dd {
		border-bottom: 1px solid #e3e3e3;
	}

	dt {
		background: @colorBG;
	}

	dd {
		border-left: 1px solid #e3e3e3;
	}
}




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

	共通 「詳細を見る」ボタン 設定
=========================================================================================== */
.comBtnLay {
	background: @comBtnBg;
	padding: @comBtnPadding;
	margin: 0 auto;
	display: inline-block;
	letter-spacing: 1px;
	color: @comBtnLinkColor;
	text-shadow: @comBtnTS;
	border: @comBtnBorder;
	cursor: pointer;
	text-align: center;

	span.fl-button-text {
		color: @comBtnLinkColor;
	}
}

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

	ビーバービルダー 共通ボタン指定部分
==================================================================== */

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

	「もっと見る」系ボタン 部分
==================================================================== */
.moreBtn {
	a {
		font-size: 90%;
		.comBtnLay;
	}

	/* ===================================================
		使用箇所 サイドバー
	=================================================== */
	#sidebar .sideContent nav & {
		margin: 10px 0 0;
		text-align: right;
	}

	/* ===================================================
		使用箇所 SHOP
	=================================================== */
	.shopArea.shopLay04 .shopContent & {
		width: 100%;
		text-align: center;

		a {
			width: 45%;
		}
	}
}


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

	共通ページネーション 設定
=========================================================================================== */
#pagerArea {
	clear: both;
	overflow: hidden;
	padding-top: 20px;
	margin-bottom: 30px;
	width: 100%;
	display: flex;

	.pagerPrev {
		width: 33%;
		text-align: left;
	}

	.pagerTop {
		width: 33%;
		text-align: center;
	}

	.pagerNext {
		width: 33%;
		text-align: right;
	}

	.pagerNext a,
	.pagerPrev a {
		display: inline-block;
		width: 80px;
		width: 70%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	.pagination {
		display: block;
		overflow: hidden;
		text-align: center;
		line-height: 100%;
		width: 100%;

		span {
			display: inline-block;
			margin: 0 2px;
		}

		a {
			display: block;
			padding: 9px;
			background: @colorGray;
			border: @borderSolid1;
			text-decoration: none;
		}

		.current{
			border: @borderSolid1;

			a{
				padding: 8px;
				background: #fff;
				border: @borderSolid1;
			}
		}
	}
}


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

	共通 Lightbox 設定
=========================================================================================== */

.lightBoxArea {
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	height: 100%;
	width: 100%;
	z-index: 1000;
	background: rgba(0,0,0,0.6);

	.popImg {
		display: table-cell;
		vertical-align: middle;
		text-align: center;

		img {
			box-shadow: 0 0 10px rgba(0,0,0,0.6);
			z-index: 1000;
			position: absolute;
		}
	}

	span {
		position: absolute;
		z-index: 1000;

		&.lightBoxClose {
			display: table;
			height: 34px;
			width: 34px;
			top: 50%;
			left: 50%;
			border-radius: 20px;
			overflow: hidden;
			box-shadow: 0 0 2px rgba(0,0,0,0.6);

			a {
				line-height: 0;
				display: table-cell;
				vertical-align: middle;
				background: @colorMain;
				border-radius: 20px;
				color: #fff;
				text-decoration: none !important;
				text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
				font-size: 20px;
				text-align: center;

				&:hover {
					text-shadow: -1px 1px 0 rgba(0,0,0,0.3);
					filter: alpha(opacity=90);
					-moz-opacity: 0.9;
					opacity: 0.9;
				}
			}
		}
	}

	span.prevImg, span.nextImg {
		display: block;
		height: 90px;
		width: 90px;
		top: 50%;
		margin: -25px 0 0 0 !important;
		text-indent: -10000px;
		outline:none;
		line-height:1px;
		font-size:1px;
		background: rgba(0,0,0,0.3);

		a {
			display: block;
			height: 100%;
			width: 100%;
			position: relative;

			&:after {
				position: absolute;
				top: 50%;
				left: 0;
				display: block;
				content: '';
				width: 40px;
				height: 40px;
				margin-top: -22px;
				border-top: 5px solid @colorWhite;
				border-right: 5px solid @colorWhite;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			&:hover:after {
				filter: alpha(opacity=80);
				-moz-opacity: 0.8;
				opacity: 0.8;
			}
		}
	}

	span.prevImg {
		left:  0 !important;

		a:after {
			-webkit-transform: rotate(225deg);
			transform: rotate(225deg);
			margin-left: 30px;
		}
	}

	span.nextImg {
		right: 0 !important;
		left: auto !important;

		a:after {
			margin-left: 10px;
		}
	}
}

#imgLoader {
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	position: absolute !important;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 5px solid #fff;
	border-right-color: transparent !important;
	animation: spin 1s linear infinite;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
}
@-webkit-keyframes spin{
	0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
	50%  { transform: rotate(180deg); opacity: 0.5; } /*50%の時は50％の透明度*/
	100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/
}
@-moz-keyframes spin{
	0% { transform: rotate(0deg);   opacity: 0.2; } /*0%の時は20％の透明度*/
	50%  { transform: rotate(180deg); opacity: 0.5; } /*50%の時は50％の透明度*/
	100%   { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20％の透明度に戻る*/
}

.popTxt {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 300px;
	color: rgba(255,255,255,0.8);
	z-index: 1000;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

	p {
		letter-spacing: 0.5px;
		font-size: 11.5px;
		margin: 0 !important;
		padding: 0 0 10px !important;
		line-height: 150% !important;
	}
	p.popTitle {
		font-weight: bold;
		padding: 10px 0 5px !important;
	}
}


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

	メインイメージ設定
=========================================================================================== */
.mainImgArea {
	width: 100%;
	margin: 0 0 20px;

	.mainImgContent {
		width: @contentWidth;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
		position: relative;

		h1 {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: auto;
			height: 50px;
			font-size: 300%;
			font-weight: bold;
			color: #fff;
			text-shadow: 1px 1px 5px #000;
		}
	}
}


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

	べージビルダー編集時 編集部分以外を不可視 部分
=========================================================================================== */

html.fl-builder-edit header,
html.fl-builder-edit footer,
html.fl-builder-edit .globalNavi,
html.fl-builder-edit .mainImgArea,
html.fl-builder-edit #breadcrumbArea,
html.fl-builder-edit #sliderContent,
html.fl-builder-edit #scrolltop,
html.fl-builder-edit #sidebar {
	border: 3px solid #FA5858;
	background-color: #FBEFEF;
	opacity: 0.4;
}

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

	パンクズ
=========================================================================================== */
#breadcrumbArea {
	margin: 0 0 20px;

	 ul li {
	 	display: inline-block;
	 	width: auto;

	 	&:not(:last-of-type) a {
	 		padding: 0 10px 0 0;

	 		&:after {
	 			.iconFontAwesome(@arrowRightIcon);// 引数にcontentを指定
	 			margin: -2px 0 0 10px;
	 		}
	 	}
	 }
}


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

	HEADER
=========================================================================================== */

header {
	margin: @headerMargin;
	border-top: @headerBorderTop;
	width: 100%;
	position: relative;
	padding-top: 40px !important;

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

		レイアウトheaderLay01の場合 ロゴ：左 インフォメーション：右
	==================================================================== */
	&.headerLay01 {
		.headerContainer {
			h1 {
				padding: 5px 0;
			}

			.headerContent {
				display: table;
				border-collapse: collapse;
				/*table-layout: fixed;*/
				width: 100%;

				.logoArea {
					width: @headerLay01LogoWidth;
					display: table-cell;
					padding-top: 20px;
					margin: 0px 0 0;
					vertical-align: middle;
				}

				.headersnsIcon {
					width: auto;
					margin-top:32px;
				}

				.headerEn {
					width: 100px;
					max-width: 10%;
					display: table-cell;
					vertical-align: bottom;
					p {
						padding: 5px;
						margin-bottom:5px;
						margin-left:5px;
						background: #C9CBCA;
						text-align: center;
						font-size: 16px;
						font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
						a {
							font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
							color: #6A6966;
						}
					}
				}
				.headerInfo {
					width: 150px;
					max-width: 20%;
					display: table-cell;
					vertical-align: middle;
				}
			}
		}
	}

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

		レイアウトheaderLay02の場合 H1：左 ロゴ：中央 インフォメーション：右
	==================================================================== */
	&.headerLay02 {
		padding: 20px 0 0;

		.headerContainer {
			display: table;
			border-collapse: collapse;
			table-layout: fixed;

			h1,.logoArea,.headersnsIcon,.headerInfo {
				display: table-cell;
				vertical-align: middle;
			}
			h1 {
				width: 20%;
			}

			.headersnsIcon {
				width: 20%;
			}

			.headerInfo {
				width: 15%;
			}

			.logoArea {
				padding: 0px 15px;
				margin: 0px 0 0;
				width: 45%;
			}
		}
	}

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

		Header共通
	==================================================================== */
	.headerContainer {
		width: @contentWidth;
		padding: 0px 0;
		margin: 0 auto 0px;

		.clearfix;

		h1 {
			font-size: 100%;
			font-weight: normal;
			line-height: 130%;
		}

		/* --------------------------------------------
			インフォメーション部分
		-------------------------------------------- */
		.headerInfo {
			text-align: right;

			.telNum {
				font-size: @telFont;
				color: @colorMain;
				line-height: 100%;

				&:before {
					font-family: @iconFont;
					content: @telIcon;
					margin: 0 10px 0 0;
					font-size: @telFontBefore;
				}
			}

			.telNum, .contactLink, .add {
				margin: 0 0 5px;
			}

			.add, .businessHours {
				line-height: 130%;
			}
		}
		/* --------------------------------------------
			SNSアイコン部分
		-------------------------------------------- */
		.headersnsIcon {
			ul {
				text-align: right;
				margin: 0 auto;

				li {
					box-sizing: content-box;
					display: inline-block;
					width:  30px;/*要変更*/
					height: 30px;/*要変更*/
					padding: 0 5px;
				}
				li a {
					display: block;
					text-align: center;
					vertical-align: middle;
					border-radius: 3px;
					&:hover {opacity: .7}
				}
				li img {
					width:  30px;/*要変更*/
					height: 30px;/*要変更*/
					margin: 0;
				}
				/*.facebookIcon a { background-color: @facebookIcon; }
				.twitterIcon a  { background-color: @twitterIcon; }
				.blogIcon a     { background-color: @blogIcon; }*/
			}
		}
	}/* headerContainer END */
}


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

	グローバルナビ
=========================================================================================== */

.globalNavi {
	background: none;
	margin: 0;
	margin-bottom:60px;

	ul {
		width: @contentWidth;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;

		li {
			text-align: center;
			width: @globalNaviLiWidth;
			position: relative;
			border-left:1px solid #332826;

			&:first-child {
						border-left:none;
			}
			a {
				font-weight:normal;
				font-size: 13px;
				color: @globalLinkColor;
				width: 100%;
				padding: @globalPadding;
				margin: 0 auto;
				display: block;
				position: relative;
				font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;

				&:hover {
					background: none;
					color:#4BA5D2;
				}

				img {
					vertical-align: middle;
				}
			}
		}
	}
}

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

	左右にボーダー付きレイアウト liのところに指定
==================================================================== */
.borderLay {
	&:first-of-type:before, &:after {
		position: absolute;
		top: @globalBorderLay;
		bottom: @globalBorderLay;
		content: "";
		width: 1px;
		background: @globalBorderLayColor;
	}

	&:first-of-type:before {
		left: 0;
	}

	&:after {
		right: 0;
	}
}


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

	スライダー
=========================================================================================== */
#sliderContent {
	width: 100%;
	margin: 20px auto;
}

.sliderWrap {
	width: @contentWidth; /*要調整*/
	margin: auto;
}

#galleryslider {
	list-style-type: none;

	li {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400px; /*要調整*/

		img {
			width: auto;
			height: auto;
			max-width: @contentWidth; /*要調整*/
			max-height: 400px; /*要調整*/
		}
	}
}

.bx-wrapper {
	a, a:link, a:active, a:visited {
		-webkit-transition: none;
		transition: none;
	}
	.bx-pager.bx-default-pager a {background: lighten(@colorMain, 10%) !important;}
	.bx-pager.bx-default-pager a.active {background: darken(@colorMain, 10%) !important;}
}


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

	SIDEBAR
=========================================================================================== */

#sidebar {
	width: 25%;
	position: relative;

	&.floatLeft {
		float: left;
	}

	&.floatRight {
		float: right;
	}

	.clearfix;

	.sideContent {
		margin: 0 0 20px;

		nav ul {
			.comUl;
		}

		.contentNavi {
			padding: 8px;
			border: @borderSolid1;

			ul li a {
				.comArrowRightBefore;
			}
		}

		.themeNavi {
			ul li a {
				.comArrowRightBefore;
			}
		}

	}/* sideContent END */

	.bannerContent {
		li {
			margin: 0 0 20px;

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


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

	scrolltop ページトップ
=========================================================================================== */
#scrolltop{
	background-color: transparent ;
	overflow: hidden;
	width: @contentWidth;
	margin: auto;
	display:table;

	.contact_wraper {
		width: 640px;
		display:table-cell;
		p {
			display:block;
			text-align: right;
		}
	}

	.esol_wraper {
		width: 360px;
		display:table-cell;
		p {
			display:block;
			text-align: right;
			padding: 20px;
		}
	}

	a {
		display: block;
		height: 31px;
		position: relative;

		/*&:after {
			position: absolute;
			left: -25px;
			top: -6px;
			margin: 0px;
			font-size: 24px;
			.iconFontAwesome(@arrowUpIcon);// 引数にcontentを指定
		}*/

		&:link, &:visited {
			color: @colorSub;
			font-size: 130%;
		}
	}
}


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

	FOOTER
=========================================================================================== */
#wrap footer {
	width: 100%;
	background: #231815;
	color: @footerColor;
	position: relative;
	padding: 20px 0;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";

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

		レイアウトfooterLay01の場合
	==================================================================== */
	&.footerLay01 {
		.logoArea,.footerInfo,.footershop,.snsIcon {
			display: table-cell;
			vertical-align: middle;
		}

		.logoArea {
			width: @footerLay01LogoWidth;
			padding-bottom: 12px;
		}

		.footerInfo {
			width: @footerLay01InfoWidth;
			padding: 0 20px;
			h2,p {
				font-size: 90%;
				font-family: "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴシック Pro W3", "Hiragino maru Gothic Pro", "Helvetica", "sans-serif";
			}
		}

		.footershop {
			width: @footerLay01shopWidth;
			padding-bottom: 18px;
			p {
				font-family: "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴシック Pro W3", "Hiragino maru Gothic Pro", "Helvetica", "sans-serif";
			}
		}

		.snsIcon {
			width: @footerLay01SnsWidth;
			vertical-align: top;
		}
	}

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

		レイアウトfooterLay02の場合
	==================================================================== */
	&.footerLay02 {
		.logoArea,.footerInfo,.footershop,.snsIcon {
			width: 100%;
			display: inline-block;
			margin: 0 auto 15px;
			text-align: center;
		}

		.logoArea {
			a {
				width: 20%;
				display: inline-block;
			}
		}

		.footershop {
			margin: 0 auto;
		}

		.snsIcon {
			margin: 0 auto;
		}
	}

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

		Footerグローバルナビ
	==================================================================== */
	.footerNavi {
		padding: @footerNaviPadding;
		margin: @footerNaviMargin;
		text-align: center;
		width: 100%;
		box-shadow: none;

		ul {
			width: @contentWidth;
			display: inline-block;
			letter-spacing: -5px;
			margin: 0 auto;

			li {
				display: inline-block;
				width: @footerNaviLiWidth;
				text-align: center;
				letter-spacing: 0.5px;

				a {
					font-family: "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴシック Pro W3", "Hiragino maru Gothic Pro", "Helvetica", "sans-serif";
					color: @footerNaviColor;
					padding: @footerNaviAPadding;
					display: block;
					width: 100%;
				}
			}
		}
	}/* footerNavi END */

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

		Footer共通
	==================================================================== */
	.footerContainer {
		width: @contentWidth;
		padding: 0px 0;
		margin: 0 auto 20px;
		display: table;
		table-layout: fixed;
		border-collapse: collapse;

		.clearfix;

		/* --------------------------------------------
			インフォメーション部分
		-------------------------------------------- */
		.footerInfo {
			h2 {
				font-size: @footerH2Font;
				font-weight: normal;
				line-height: 130%;
				background: none;
				padding: 0;
			}


			.telNum {
				line-height: 100%;
				margin-bottom:15px;

				/*&:before {
					font-family: @iconFont;
					content: @telIcon;
					margin: 0 5px 0 0;
					font-size: 85%;
				}*/
			}

			h2, .footerText, .add {
				margin: 0 0 5px;
			}

			.add, .businessHours {
				line-height: 130%;
			}
		}
		/* --------------------------------------------
			店舗情報部分
		-------------------------------------------- */
		.footershop {
			p {
				font-size:12px;
				margin-bottom:10px;
			}
		}

		/* --------------------------------------------
			SNSアイコン部分
		-------------------------------------------- */
		.snsIcon {
			ul {
				margin: 0 auto;
				text-align:right;

				li {
					box-sizing: content-box;
					display: inline-block;
					width:  36px;/*要変更*/
					height: 36px;/*要変更*/
					padding: 0 5px;
				}
				li a {
					display: block;
					text-align: center;
					vertical-align: middle;
					border-radius: 3px;
					&:hover {opacity: .7}
				}
				li img {
					width:  36px;/*要変更*/
					height: 36px;/*要変更*/
					margin: 0;
				}
				/*.facebookIcon a { background-color: @facebookIcon; }
				.twitterIcon a  { background-color: @twitterIcon; }
				.blogIcon a     { background-color: @blogIcon; }*/
			}
		}
	}/* footerContainer END */

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

		Copyright共通
	==================================================================== */
	.copyright {
		padding: 15px 0;
		background: none;

		p {
			width: @contentWidth;
			margin: 0 auto;
			text-align: right;
			font-size: @copyFont;
			font-family: "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴシック Pro W3", "Hiragino maru Gothic Pro", "Helvetica", "sans-serif";
		}
	}
}


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

	カスタム投稿タイプ共通 設定
=========================================================================================== */
.shopArea,
.blogArea,
.hairArea,
.staffArea,
.galleryArea {
	margin: @contentMargin;

	.clearfix;
}


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

	サイトマップ 設定
=========================================================================================== */
#mainContent .sitemapArea ul {
	.comUl;

	li {
		position: relative;

		a {
			.comArrowRightBefore;
		}
	}
}


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

	SHOP 設定
=========================================================================================== */
#mainContent .shopArea {
	&:last-of-type {
		margin: 0;
	}

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

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

	.shopContent {
		margin: 0 0 30px;

		.clearfix;

		.shopInfo dl {
			.comDlArrowRightSide;
		}

	}// .shopContent END

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

		.mainImg {
			width: 100%;
			background: #FFFFFF;
			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: @borderSolid1;
			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 設定
=========================================================================================== */

#mainContent .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 {
		.comDlArrowLeftSide;

		dt {
			width: auto;
		}

		dd {
			width: 16%;
		}
	}

}// .blogArea END


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

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

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

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

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

		dl {
			.comDlArrowRightSide;

			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 設定
=========================================================================================== */

#mainContent .staffArea {
	/* ====================================================================

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

	.staffContent {
		margin: 0 0 30px;

		.clearfix;

		.staffInfo dl {
			.comDlArrowRightSide;
		}
	}// .staffContent END

	.yomi,.position {
		font-size: 85%;
		display: inline-block;
		width: auto;

		&:not(p) {
			padding: 0 0 0 5px;
		}
	}

	.position:before {
		content: "【";
		font-size: 14px;
		margin: 0 5px 0 0;
	}

	.position:after {
		content: "】";
		font-size: 14px;
		margin: 0 0px 0 5px;
	}

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

		レイアウトパターン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%;
						margin: 0 0 5px!important;

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

					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: @borderSolid1;

				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: @borderSolid1;

				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: @borderSolid1;
	border-right: @borderSolid1;
	border-bottom: @borderSolid1;

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

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

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

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

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

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

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

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

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

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

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

		img {
			padding: 10px;
		}
	}

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


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

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

#mainContent .galleryArea {
	.galleryContent {
		position: relative;

		.clearfix;

		.galleryInfo dl {
			.comDlArrowRightSide;
		}
	}

	.galleryCom {
		margin: 0 0 20px;
	}

	.galleryMore {
		bottom: 0;
		font-size: 90%;
		position: absolute;
		right: 10px;
		.comBtnLay;
	}

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

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

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

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

		.thumImg ul li {
			float: left;

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

				img {
					display: none;
				}
			}
		}
	}


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

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

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

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

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

				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: @borderSolid1;
		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;
				color: @colorWhite;

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

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

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


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

		レイアウトパターン03 画像3列+タイトル 部分
	==================================================================== */
	&.galleryLay03 .galleryContent {
		float: left;
		width: 32.66%;
		padding: 10px;
		border: @borderSolid1;
		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 10px;

			img {
				padding: 10px;
			}

		}// .galleryImgArea END


		h3 {
			display: inline-block;
			width: 100%;
			margin: 0!important;
		}


	}// galleryLay03 .galleryContent END


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

		レイアウトパターン04 画像3列+タイトルスライドイン 部分
	==================================================================== */
	&.galleryLay04 .galleryContent {
		float: left;
		width: 32.66%;
		padding: 10px;
		border: @borderSolid1;
		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%;
				color: @colorWhite;

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

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

		}// .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: @borderSolid1;
			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

		/* ===================================================
			Gallery情報 部分
		=================================================== */
		.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: @borderSolid1;
		}

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


		/* ===================================================
			スライダー ポインター 部分
		=================================================== */
		.bx-wrapper .bx-pager {
			padding: 20px 0;
		}

		.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: @borderDot2;
				.clearfix;

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

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

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

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

						img {
							padding: 10px;
						}
					}

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

						h4 {
							.hLay01;
							margin: 0 0 5px;
						}
					}
				}

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

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

				.afterArea {
					position: relative;

					&:before {
						position: absolute;
						content: "";
						display: block;
						width: 100%;
						height: 0px;
						z-index: 2;
						top: -68px;
						left: 0;
						right: 0;
						text-align: center;
						font-size: 60px;
						.iconFontAwesome(@arrowDownIcon);// 引数にcontentを指定
						transform: scale(1.5,1);
					}
				}
			}

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

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

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

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

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

						img {
							padding: 10px;
						}
					}

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

						h4 {
							.hLay01;
							margin: 0 0 5px;
						}
					}
				}

				.beforeArea {
					float: left;

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

				.afterArea {
					float: right;
					position: relative;

					&:before {
						position: absolute;
						content: "";
						display: block;
						width: 0;
						height: 0px;
						z-index: 2;
						top: 50%;
						left: -35px;
						margin: -68px 0 0;
						font-size: 60px;
						.iconFontAwesome(@arrowRightIcon);// 引数にcontentを指定
						transform: scale(1,1.5);
					}
				}
			}
		}

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

	}
}


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

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

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

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

	dl {
		.comDlArrowLeftSide;

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


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

	ウィジェット共通
=========================================================================================== */
.flexbox1 {
	display: flex;
	flex-flow: row wrap;
}

.flexbox2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.hoverTitleSets {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	height: 0;
	transition: height 0.3s ease-out 0.1s;
	color: @colorWhite;
}


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

	ギャラリー一覧 ウィジェット
=========================================================================================== */

.galleryWidget {
	/* ====================================================================

		イメージボックス 部分 galleryType2・galleryType3・galleryType5に使用
	==================================================================== */
	.imageArea {
		width: 100%;
		height: 200px;
		position: relative;

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

	& > div[class*="galleryType"]:not(.galleryType4) dt.galleryWidget_ttl {
		.hLay03;
		margin: 0 0 20px;
	}

	.galleryType1 {
		.galleryWidget_wrapper {
			margin-bottom: 3em;

			.galleryWidget_img {
				width: 30%;
				display: inline-block;
				vertical-align: middle;

				img {
					max-width: 100%;
				}
			}

			.galleryWidget_contents {
				width: 69%;
				display: inline-block;
				vertical-align: middle;

				.galleryWidget_com {
					padding: 1em;
				}
			}
		}
	}

	.galleryType2 {
		.galleryWidget_box {
			margin-bottom: 2em;
			.flexbox2;

			.galleryWidget_wrapper {
				box-sizing: border-box;
				width: 50%;
				padding: 1em;

				.galleryWidget_contents {
					margin-top: 1em;
				}
			}
		}
	}

	.galleryType3 {
		.galleryWidget_box {
			margin-bottom: 2em;
			.flexbox1;

			.galleryWidget_wrapper {
				box-sizing: border-box;
				width: 33.3%;
				padding: 1em;

				.galleryWidget_img {
					text-align: center;
					margin-bottom: 1em;

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

	.galleryType4 {
		margin-bottom: 2em;

		.galleryWidget_box {
			.clearfix;

			.galleryWidget_wrapper {
				position: relative;
				float: left;
				margin: 1em;
				width: calc(~"100% / 4 - 2em");
				height: 128px;
				text-align: center;
				word-wrap: break-word;
				overflow: hidden;

				a {
					display: block;
					overflow: hidden;
					font-weight: normal;
					text-decoration: none;

					&:hover {
						opacity: 1;

						.galleryWidget_ttl {
							height: 1.2em;
						}

						.galleryWidget_img img {
							filter: alpha(opacity=80);
							-moz-opacity: 0.8;
							opacity: 0.8;
						}
					}
				}

				.galleryWidget_img {
					width: 100%;
					height: 128px;
					background: #000;
					vertical-align: middle;
					margin-bottom: 1em;
					text-align: center;
					position: relative;

					img {
						max-width: 100%;
						max-height: 100%;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
					}
				}

				.galleryWidget_header {
					.hoverTitleSets;

					.galleryWidget_ttl {
						padding: 10px;
					}
				}

				&:hover .galleryWidget_header {
					height: 100%;
				}

				a .galleryWidget_img img {
					transition: opacity 0.3s ease-out 0.1s;
				}
			}
		}
	}

	.galleryType5 {
		.galleryWidget_wrapper {
			margin-bottom: 2em;
		}

		.galleryWidget_img {
			.flexbox1;
			width: 100%;
		}

		.imageArea {
			box-sizing: border-box;
			width: 33%;
			height: 180px;
			padding: 1em;
			position: relative;

			img {
				padding: 1em;
				max-height: 150px;
				margin: auto;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}

		.galleryWidget_com {
			margin: 0 0 20px;
		}

		.galleryWidget_info dl {
			.comDlArrowRightSide;
		}
	}
}


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

	メニュー一覧 ウィジェット
=========================================================================================== */

.menuWidget {
	.menuWidget_list {
		margin: 0 0 40px;
	}

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

		記事タイトル部分
	==================================================================== */
	& .menuType1 .menuWidget_list > dl > dt,
	& .menuType2 .menuWidget_list > dl > dt,
	& .menuType3 .menuWidget_list > dl > dt,
	& .menuType4 .menuWidget_list .menuWidget_wrapper > dl > dt,
	& .menuType5 .menuWidget_list .menuWidget_wrapper > dl > dt,
	& .menuType6 .menuWidget_list .menuWidget_wrapper > dl > dt,
	& .menuType7 .menuWidget_list .menuWidget_wrapper > dl > dt {
		.hLay03;
		margin: 0 0 20px;
	}


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

		リピーターフィールド（分類）部分
	==================================================================== */
	& > div[class*="menuType"]:not(.menuType3):not(.menuType6):not(.menuType7) {
		.menuWidget_wrapper .menuWidget_inner dl {
			padding: 0 0 0;
			position: relative;
			line-height: 1;
			margin: 0 0 10px;

			.clearfix;

			&:before {
				border-bottom: dotted 2px #999;
				content: "";
				width: auto;
				height: 0;
				top: 6px;
				left: 20px;
				right: 0;
				position: absolute;
				z-index: -1;
			}

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

			dt.menu {
				width: auto;
				max-width: 50%;
				background: @bodyBg;
				padding-right: 10px;
				float: left;
				line-height: 1;
			}

			dd.price {
				background: @bodyBg;
				padding-left: 10px;
				width: auto;
				max-width: 50%;
				float: right;
				line-height: 1;
				text-align: right;
			}
		}
	}

	& > div[class*="menuType"]:not(.menuType1):not(.menuType2):not(.menuType4):not(.menuType5) {
		.menuWidget_wrapper .menuWidget_inner {
			.conDlBoxLay;

			dl {
				display: table-row;

				.price {
					text-align: right;
				}
			}
		}
	}

	.price span {
		width: auto;

		&:before {
			content: '／';
		}
	}


	.menuType1 {
		.menuWidget_list {

			.menuWidget_image {
				margin: 0 0 20px;
				text-align: center;
			}

			.menuWidget_wrapper {
				margin-bottom: 1.5em;
			}

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

				コメント 部分
			==================================================================== */
			.menuWidget_com {
				border: 1px solid #e9e9e9;
				padding: 0.5em 1em;
			}
		}
	}

	.menuType2 {
		.menuWidget_lay {
			.flexbox2;

			.menuWidget_list {
				width: 45%;

				&:nth-child(odd) {
					margin-right: 1em;
				}

				.menuWidget_image {
					width: 100%;
					height: 200px;
					position: relative;
					margin: 0 0 20px;

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

				.menuWidget_wrapper {
					margin-bottom: 1.5em;
				}

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

					コメント 部分
				==================================================================== */
				.menuWidget_com {
					font-size: 90%;
					padding-left: 1em;
					border-left: 4px solid @colorGray;
				}
			}
		}
	}

	.menuType3 {
		.menuWidget_list {

			.menuWidget_image {
				margin: 0 0 20px;
				text-align: center;
			}

			.menuWidget_wrapper {
				width: 100%;
				margin-bottom: 0.5em;

				.menuWidget_inner dl .menu {
					text-align: center;
					font-weight: bold;
				}
			}

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

				コメント 部分
			==================================================================== */
			.menuWidget_com {
				margin-top: 1em;
				padding-left: 1em;
				border-left: 4px solid @colorGray;
			}
		}
	}

	.menuType4, .menuType5 {
		.menuWidget_list {

			.menuWidget_contents {
				.flexbox2;

				.menuWidget_image {
					display: inline-block;
					vertical-align: middle;
					box-sizing: border-box;
					text-align: center;
					width: 35%;
					position: relative;
					min-height: 156px;
					max-height: 200px;

					img {
						max-width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						//bottom: 0;
						margin: auto;
						padding: 0 0;
					}
				}

				.menuWidget_wrapper {
					display: inline-block;
					vertical-align: middle;
					box-sizing: border-box;
					padding: 0 1.5em 0 0;
					width: 65%;

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

						コメント 部分
					==================================================================== */
					.menuWidget_com {
						margin-top: 2em;
						padding-left: 1em;
						border-left: 4px solid @colorGray;
					}
				}
			}
		}
	}// .menuType4, .menuType5 END

	.menuType5 {
		.menuWidget_list .menuWidget_contents {
			flex-direction: row-reverse;

			.menuWidget_wrapper {
				padding: 0 0 0 1.5em;
			}
		}
	}

	.menuType6, .menuType7 {
		.menuWidget_list {

			.menuWidget_contents {
				.flexbox2;

				.menuWidget_image {
					display: inline-block;
					vertical-align: middle;
					text-align: center;
					width: 30%;
					position: relative;
					min-height: 134px;
					max-height: 180px;

					img {
						max-width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						//bottom: 0;
						margin: auto;
					}
				}

				.menuWidget_wrapper {
					display: inline-block;
					vertical-align: middle;
					box-sizing: border-box;
					padding: 0 0 0 2em;
					width: 70%;

					.menuWidget_com {
						margin-top: 1em;
					}
				}
			}
		}
	}// .menuType6, .menuType7 END

	.menuType7 {
		.menuWidget_list .menuWidget_contents {
			flex-direction: row-reverse;

			.menuWidget_wrapper {
				padding: 0 2em 0 0;
			}
		}
	}
}


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

	スタッフ一覧 ウィジェット
=========================================================================================== */

.staffWidget {
	.staffWidget_imageArea {
		width:  100%;
		position: relative;

		.staffWidget_imageBg {
			height: 200px;
		}

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

	.moreBtn {
		text-align: center;

		a {
			width: 70%;
		}
	}

	dt.staffWidget_ttl {
		.hLay01;
		margin: 0 0 5px;
	}

	.staffWidget_kana {
		font-size: 90%;
	}

	p.staffWidget_kana {
		margin: 0 0 5px;
	}

	.staffWidget_jobs:before {
		content: "【";
		font-size: 14px;
		margin: 0 5px 0 0;
	}

	.staffWidget_jobs:after {
		content: "】";
		font-size: 14px;
		margin: 0 0px 0 5px;
	}

	.staffType1 {
		.flexbox1;

		.staffWidget_column {
			width: 33%;
			margin: 0 0 20px;

			.staffWidget_box {
				padding: 10px;

				.staffWidget_imageArea {
					margin-bottom: 15px;
				}

				.staffWidget_nameArea {
					text-align: center;
					margin: 0 0 20px;
				}
			}
		}
	}

	.staffType2 {
		.flexbox2;

		.staffWidget_column {
			width: 46%;
			margin: 0 0 40px;
			position: relative;
			overflow: hidden;

			.staffWidget_box a:hover {
				opacity: 1;
			}

			.staffWidget_imageBg {
				background: #000;
			}

			.staffWidget_nameArea {
				.hoverTitleSets;

				.staffWidget_textBox {
					padding: 20px;
				}
			}

			&:hover .staffWidget_nameArea {
				height: 100%;
			}
		}
	}

	.staffType3 {
		.flexbox2;

		.staffWidget_column {
			width: 46%;
			margin: 0 0 40px;

			.staffWidget_imageArea {
				margin-bottom: 20px;
			}

			.staffWidget_nameArea {
				text-align: center;
				margin: 0 0 20px;
			}

			.staffWidget_textBox {
				.conDlBoxLay;

				dl {
					display: table-row;
				}

				dt {
					text-align: center;
					font-weight: bold;
					vertical-align: middle;
				}
			}
		}
	}

	.staffType4 {
		.staffWidget_column {
			margin-bottom: 30px;
			overflow: hidden;

			.staffWidget_nameArea {
				.hLay03;
				margin: 0 0 20px;

				.staffWidget_ttl  {
					display: inline;
				}

				.staffWidget_kana {
					display: inline;
					margin: 0 0 0 10px;
				}

				.staffWidget_jobs {
					display: inline;
					font-size: 80%;
				}
			}

			.staffWidget_box {
				overflow: hidden;
				width: 100%;
				.clearfix;

				.staffWidget_imageArea {
					float: left;
					width: 35%;

					img {
						max-width: 96%;
						max-height: 300px;
						width: auto !important;
						height: auto !important;
						display: block;
						margin: 0 auto;
					}
				}

				.staffWidget_textBox {
					float: right;
					width: 63%;
					margin-bottom: 15px;

					.staffWidget_com {
						margin: 0 0 20px;
					}

					.staffWidget_info {
						.conDlBoxLay;

						dl {
							display: table-row;
						}

						dt {
							text-align: center;
							font-weight: bold;
							width: 30%;
							vertical-align: middle;
						}
					}
				}
			}
		}
	}
}


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

	お知らせ・ブログ一覧 ウィジェット
=========================================================================================== */

.blogType1 dl, .blogType2 dl {
	.comDlArrowRightSide;

	dt {
		width: 140px;
	}

	dd {
		width: auto;
	}
}

.blogType2 {
	.flexbox2;

	dl {
		width: 48%;
	}
}

.blogType3, .blogType4, .blogType5, .blogType6 {
	.flexbox1;

	.blogWidget_content {
		text-align: center;

		.imageArea {
			margin: 0 0 10px;
		}
	}
}

.blogType5, .blogType6 {
	.blogWidget_content {
		.blogWidget_ttl {
			margin: 0 0 5px;
		}

		.date {
			font-size: 90%;
		}
	}
}

.blogType3 .blogWidget_content,
.blogType5 .blogWidget_content {
	width: ~"calc((100% - 20px)/3.0001)";

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

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

		img {
			max-height: 170px;
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
}

.blogType4 .blogWidget_content,
.blogType6 .blogWidget_content {
	width: ~"calc((100% - 30px)/4.0001)";

	&:not(:nth-child(4n)) {
		margin-right: 10px;
	}

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

		img {
			max-height: 130px;
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
}

.blogType7 .textArea > dl, .blogType8 .textArea > dl {
	& > dt {
		.hLay03;
		margin: 0 0 20px;

		span.date {
			.comData;
		}
	}
}

.blogType7 {
	.blogWidget_content {

		border-bottom: none;
		margin: 0 0 10px;
		padding: 10px 0 15px;
		.imageArea {
			width:  160px;
			height: 160px;
			border: none;
			float: left;
			position: relative;

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

		.textArea {
			float: right;
			width: calc(~"100% - 180px");
			h3 {
				border-left: none !important;
					&:after {
						display:block;
						border-bottom: 1px solid #92734E !important;
					}
					&:before {
						display:none !important;
					}
			}
		}

		.clearfix;
	}
}

.blogType8 {
	.blogWidget_content {
		float: left;
		border-bottom: @borderSolid1;
		margin: 0 0 20px;
		padding: 10px 0 20px;
		width: ~"calc((100% - 30px)/2)";

		&:nth-child(2n){
			margin-left: 30px;
		}

		.imageArea {
			width:  100px;
			height: 100px;
			border: @borderSolid1;
			float: left;
			position: relative;

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

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

			.blogWidget_ttl {
				margin: 0 0 10px;
			}

			.blogWidget_ttl .date {
				display: inline-block;
				width: 100%;
				font-weight: normal;
				font-size: 90%;
			}

			.commentArea {
				font-size: 90%;
			}
		}

		.clearfix;
	}

	.clearfix;
}


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

	店舗一覧 ウィジェット
=========================================================================================== */
.shopWidget {
	&:not(.shopType3) .moreBtn {
		text-align: right;
	}


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

		画像部分
	==================================================================== */
	.shopImgArea {
		.clearfix;

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

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

		.thumImg ul li {
			float: left;
			margin: 0 10px 10px 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;
				}
			}
		}
	}

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

		Google Map
	==================================================================== */
	.gmap {
		clear: both;
		width: 100%;
		.gm-style img {
			max-height: none!important;
		}
		.mapLink {
			padding: 5px 0 0;
		}
	}

	.shopWidget_box .shopInfo > dt {
		.hLay03;
		margin: 0 0 20px;
	}

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

		パターン1 & 2 画像・タイトル・項目（1カラム）
	==================================================================== */
	&.shopType1 .shopWidget_content,
	&.shopType2 .shopWidget_content {
		.shopWidget_column {
			margin: 0 0 30px;
			.clearfix;
		}

		.shopImgArea {
			float: left;
			width: 45%;

			.mainImg {
				height: 180px;
				background: @colorWhite;
			}
		}

		.shopWidget_box {
			float: right;
			width: 50%;

			.shopInfo {
				margin: 0 0 20px;
			}

			.shopInfoList {
				display: table;
				border-collapse: collapse;
				width: 100%;

				dl {
					.comDlArrowLeftSide;
				}
			}
		}

		.gmap {
			margin: 0 0 50px;
		}
	}

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

		パターン3 画像・タイトル・項目（2カラム）
	==================================================================== */
	&.shopType3 .shopWidget_content {
		margin-bottom: 20px;
		.flexbox2;

		.shopWidget_column {
			width: 48%;
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}

			.shopWidget_box {
				border: @borderSolid1;
				padding: 10px;
			}

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

				.mainImg {
					height: 200px;
				}
			}

			.shopInfo {
				width: 100%;
				margin: 0 0 20px;
			}


			.shopInfoList {
				display: table;
				border-collapse: collapse;
				width: 100%;

				dl {
					.comDlArrowLeftSide;
				}
			}

			.moreBtn {
				text-align: center;
			}

			.moreBtn a {
				width: 45%;
			}
		}
	}

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

		パターン4 タイトル・項目（1カラム）
	==================================================================== */
	&.shopType4 .shopWidget_content {
		.shopWidget_column {
			margin-bottom: 40px;
		}

		.shopInfoList {
			display: table;
			border-collapse: collapse;
			width: 100%;

			dl {
				.comDlArrowLeftSide;
			}
		}
	}

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

		パターン5 タイトル・項目（2カラム）
	==================================================================== */
	&.shopType5 .shopWidget_content {
		.flexbox2;

		.shopWidget_column {
			width: 46%;
		}

		.shopInfo {
			margin-bottom: 30px;
		}

		.shopInfoList {
			display: table;
			border-collapse: collapse;
			width: 100%;

			dl {
				.comDlArrowLeftSide;
			}
		}
	}

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

		パターン6 タイトル・項目（3カラム）
	==================================================================== */
	&.shopType6 .shopWidget_content {
		.flexbox2;

		&:after{
			content:"";
			display: block;
			width:30%;
		}

		.shopWidget_column {
			width: 30%;

			.shopInfo {
				margin: 0 0 10px;

				.shopInfoList dl {
					.comDlArrowLeftSide;
					padding: 10px 0 0;

					dt, dd {
						width: 100%;
						display: inline-block;
					}
				}
			}
		}
	}
}


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

	Q&A一覧 ウィジェット
=========================================================================================== */
.qaWidget {
	margin: 0 0 20px;
	.clearfix;

	.qaWidget_content {
		border-bottom: @borderDot1;
		margin-bottom: 20px;
		padding-bottom: 10px;

		.qaWidget_q,
		.qaWidget_a {
			display: table;
			width: 100%;
			margin-bottom: 5px;

			.clearfix;

			dt {
				 display: table-cell;
				 width: 45px;
				 vertical-align: top;

				 p {
					display: block;
					margin: 0;
					width: 40px;
					padding: 5px;
					text-align: center;
					font-size: 20px;
					line-height: 30px;
					color: #333333;
					border-radius: 5px;
				}
			}

			dd {
				display: table-cell;
				padding-left: 20px;
				vertical-align: middle;
				line-height: 20px;
			}
		}

		.qaWidget_q dd {
			font-size: 100%;
			font-weight: bold;

			b {
				font-size: 130%;
				display: inline-block;
				width: 100%;
				font-weight:normal;
			}
		}

		/*.qaWidget_q dt p {
			background: @colorSub;
		}*/

		/*.qaWidget_a dt p {
			background: darken(rgba(red(@colorSub), green(@colorSub), blue(@colorSub), .85), 30%);
		}*/
	}
}


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

	クーポン一覧 ウィジェット
=========================================================================================== */
.couponWidget {
	.couponWidget_content {
		width: auto;
		border: @borderSolid1;
		padding: 1px;
		margin-bottom: 20px;
		clear: both;

		.couponWidget_wrap {
			display: table;
			width: 100%;
			margin-bottom: 0;

			.couponWidget_tag {
				display: table-cell;
				text-align: center;
				width: 30px;
				vertical-align: middle;
				padding: 0;
				background: @colorSub;
				color: @colorWhite;

				span {
					display: block;
				}
			}

			.couponWidget_info {
				display: table-cell;
				vertical-align: middle;
				padding: 15px 15px;


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

					タイトル・値引き 部分
				==================================================================== */
				.couponWidget_infoHeader dl {
					display: table;
					margin-bottom: 10px;
					width: 100%;
					border-bottom: @borderDot1;
					padding-bottom: 10px;

					dt, dd {
						display: table-cell;
					}

					dd {
						text-align: right;
					}

					.couponWidget_priceBefore {
						text-decoration: line-through;
					}

					.couponWidget_priceAfter {
						color: @colorSub;
					}
				}


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

					備考 部分
				==================================================================== */
				.couponWidget_com {
					margin: 0 0 10px;
				}

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

					提示条件・利用条件・有効期限 部分
				==================================================================== */
				dl.couponWidget_presentation,
				dl.couponWidget_use,
				dl.couponWidget_expirationDate {
					display: block;

					dt, dd {
						display: inline;
					}

					dt {
						color: @colorSub;
					}

					dd {
						padding-right: 10px;

						&:before {
							content: "：";
							display: inline-block;
						}
					}
				}
			}
		}
	}
}


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

	リクルート ウィジェット
=========================================================================================== */
.recruitWidget {
	.recruitWidget_header {
		dt {
			.hLay03;
			margin: 0 0 20px;
		}

		.recruitWidget_com {
			margin: 1em 0;
		}
	}

	.recruitWidget_info {
		.conDlBoxLay;
		margin-bottom: 0.5em;

		dl {
			display: table-row;

			dt {
				font-weight: bold;
			}
		}
	}
}


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

	ヘアカタ ウィジェット
=========================================================================================== */
.hairWidget {
	.hairWidget_img {
		width: 100%;
		height: 150px;
		position: relative;

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

	.hairWidget_cat {
		font-size: 80%;
		margin: 10px 0 0;

		&:before {
			font-family: Flaticon;
			content: "\e058";
			color: @colorSub;
		}
	}

	.hairType1, .hairType2 {
		.flexbox1;

		.hairWidget_wrapper {
			text-align: center;
			width: ~"calc(100%/3.0001)";
			border-top: @borderSolid1;
			border-right: @borderSolid1;
			border-bottom: @borderSolid1;

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

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

		.hairWidget_box {
			padding: 10px;
		}

		.hairWidget_ttl dt {
			.hLay03;
			margin: 10px 0 10px;
		}

		dd.hairWidget_date {
			.comData;
			margin: 0;
		}
	}

	.hairType3 {
		.hairWidget_wrapper {
			.clearfix;
			border-bottom: @borderSolid1;
			margin: 0 0 10px;
			padding: 10px 0 15px;
		}

		.hairWidget_img {
			width:  160px;
			height: 160px;
			border: @borderSolid1;
			float: left;
			position: relative;

			img {
				padding: 10px;
			}
		}

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

			dt {
				.hLay03;
				margin: 0 0 20px;

				span.date {
					.comData;
				}
			}
		}
	}
}


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

	お客様の声 ウィジェット
=========================================================================================== */
.voiceWidget .voiceWidget_wrapper {
	margin-bottom: 40px;

	dt {
		.hLay03;
		margin: 0 0 20px;
	}
}


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

	youtube ウィジェット
=========================================================================================== */
.youtubeWidget {
	text-align: center;
}


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

	Google Maps ウィジェット
=========================================================================================== */
.gm-style img {
	max-height: none!important;
}


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

	問い合わせフォーム
=========================================================================================== */
.sk_form_table {
	width: 100%;
	text-align: left;
	display: table;
	border-collapse: collapse;
	margin: 20px auto;

	input {
		padding: 5px;
	}

	.sk_form_table_dl {
		display: table-row;

		.sk_form_table_dt {
			display: table-cell;
			vertical-align: middle;
			width: 150px !important;
			padding: 7px;
			background: #E0F1F3;
			border: none;
			text-align:right;

			span {
				color: #dd0000;
			}

			/* ===================================================
				必須記号 部分
			=================================================== */
			.sk_form_must img {
				max-width:  40px;
				max-height: 20px;
				width: auto;
				height: auto;
			}
		}

		.sk_form_table_dd {
			border: none;
			width: 450px !important;
			display: table-cell;
			vertical-align: middle;
			padding: 7px;
			background: #E0F1F3;

			/* ===================================================
				「備考」表示 部分
			=================================================== */
			p.form_option_area {
				margin: 5px 0 0 !important;
				padding: 0 !important;

				&:empty {
					display: none !important;
				}
			}
		}
	}
}


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

	自由入力 部分
==================================================================== */
.sk_form_table_free {
	text-align: center;
	padding: 20px;
	font-size: 24px;
	font-weight: bold;
}


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

	submit 部分
==================================================================== */
#sk_form_submit {
	text-align: center;
	margin-bottom:20px;

	input[type=submit] {
		.comBtnLay;
		background:#231815;
		width: 150px;
		font-size: 100%;
		font-weight: normal;
		outline: none;
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .2s;
		transition-duration: .2s;

		&:hover, &:focus {
			background: lighten(#231815, 10%);
		}

		&:active {
			background: darken(#231815, 10%);
			box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3), 0 1px 0 #fff;
		}

		&:-moz-focus-inner {
			border: 0;
		}
	}
}


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

	「問い合わせ案内タイトル」・「問い合わせ案内文」・「プライバシーポリシー」など 部分
==================================================================== */
#sk_form_front {
	text-align: left;

	/* ===================================================
		「問い合わせ案内タイトル」部分
	=================================================== */
	#sk_form_alert_title {
		margin-bottom: 10px;
		padding-bottom: 5px;
	}

	/* ===================================================
		「問い合わせ案内文」部分
	=================================================== */
	#sk_form_alert_content {
		border: none !important;
		padding: 0 !important;
		margin-bottom: 15px;
	}

	/* ===================================================
		「電話番号」部分
	=================================================== */
	#sk_form_admin_tel {
		display: inline;
		padding-right: 15px;
	}

	/* ===================================================
		「電話対応時間」部分
	=================================================== */
	#sk_form_admin_tel_time {
		display: inline;
	}

	/* ===================================================
		「プライバシーポリシー」部分
	=================================================== */
	#sk_form_privacy_content {
		max-height: 200px !important;
		overflow: auto;
		border: @borderSolid1;
		padding: 10px !important;
		margin-bottom: 15px;
	}
}


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

	エラーメッセージ 部分
==================================================================== */
.error_message {
	color: #d00;
}


form input, form textarea {
	display:;
	background: #fff;
	border: none;
	padding: 5px;
	font-size: 13px;
	color: #333;
	font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif;
}

form textarea {
	width: 90%;
}

form select {
	background: #fff;
	padding: 0 5px;
	border: none;
	font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif;
}

form select option {
	padding: 1px 5px;
	border: none;
}

form input[type=radio], form input[type=checkbox] {
	display: inline-block;
}

form input[type=radio] + label, form input[type=checkbox] + label {
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 30px;
	cursor: pointer;
}

form input[type=file] {
	border: none;
}

form input[name^="tel_"] {
	width: 20% !important;
}

.zip {
	display: block;
	margin-bottom: 5px;
}
body#top #mainContent .font_content p{
	font-family: "Times New Roman", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
body#top #mainContent .font2_content p{
	font-family: "メイリオ", "meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴシック Pro W3", "Hiragino maru Gothic Pro", "Helvetica", "sans-serif";
}
.page-sitemap,.post-type-archive-mygallery2,.post-type-archive-myblog {
	#mainContent > h1 {
	margin-top: -3px;
	}
}
.home #mainContent h2.fl-heading {
	font-weight: normal !important;
}