@charset "utf-8";
/* ===================================================
	カラー
=================================================== */
@colorMain: #54bd46; //メインカラー
@colorSub: #f6be15; //サブカラー 詳細ボタンなど
@colorBorder: #e9e9e9; //ボーダーカラー
@colorLightBG: #f2f8f1; //薄い背景色　bodyの背景と同化はNG　 フォームやテーブルの見出し背景,カテゴリー背景
@colorPager:#b5d2b1;//ページャー背景
@colorPagerCurrent:#54bd46;//ページャー背景current

/* ===========================================================================================
	基準のline-height
=========================================================================================== */
@BaseLineHeight: 1.6;

/* ===========================================================================================
	フォント 設定
=========================================================================================== */
@fontMincho: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;

body {
	background: url('../images/bg_body.jpg') left top no-repeat;
	font-size: 16px;
	line-height: @BaseLineHeight;
	color: #2e362c;
	font-family: Avenir , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" ,"Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-weight: 500;
}

a,
a:active,
a:link,
a:visited {
	color: #2e362c;
}
/* ===========================================================================================
	ボタン 設定
=========================================================================================== */
.moreBtn {
	a {
		display: inline-block;
		background-color: #fcf700;
		padding: 12px 45px;
		color: @colorMain;
		min-width: 220px;
		border-radius: 30px;
		position: relative;
		&::after {
			position: absolute;
			top: 0; bottom: 0; right: 21px;
			margin: auto;
			content: '';
			width: 5px; height: 5px;
			border-top: 1px solid @colorMain;
			border-right: 1px solid @colorMain;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		&::before {
			position: absolute;
			top: 0; bottom: 0; right: 15px;
			margin: auto;
			content: '';
			width: 15px; height: 15px;
			background: #fff;
			border-radius: 50%;
		}
	}
}
/* ===========================================================================================

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

	.mainImgContent {
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
		background-repeat: no-repeat;
		background-position: center center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mainImgContent p {
		width: @contentWidth;
		font-weight: bold;
		font-size: 24px;
		color: #fff;
		letter-spacing: 3px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
}
/* ===========================================================================================

	見出し設定
=========================================================================================== */
/*== h2はビルダー・システムで共通とする =======================*/
.h2LaySets {
	color: @colorMain;
	font-size: 28px;
	font-weight: bold;
	padding-top: 65px !important;
	text-align: center !important;
	background: url('../images/bg_h02.png') center top no-repeat;
	background-size: 55px 54px;
}

.fl-module-heading h2.fl-heading {
	// ビルダーのH2
	.h2LaySets;
}

h2.pageTitle {
	// アーカイブ・シングルシステムページの見出し
	.h2LaySets;
	margin-bottom: 30px;
}
/*== h3 =======================*/
.h3LaySets {
	font-size: 24px;
	color: @colorSub;
	font-weight: bold;
}

.fl-module-heading h3.fl-heading {
	// ビルダーのH3
	color: @colorMain;
	font-size: 22px;
	font-weight: bold;
	span {
		display: inline-block;
		background: url('../images/bg_h03.jpg') left bottom 7px repeat-x;
	}
}
/*== h4 =======================*/
.h4LaySets {
	font-size: 20px;
	font-weight: bold;
	padding-left: 10px !important;
	border-left: 3px solid @colorSub;
	border-bottom: 1px dotted #CCC;
}

.fl-module-heading h4.fl-heading {
	// ビルダーのH4
	color: @colorMain;
	font-size: 18px;
	font-weight: 500;
	padding-bottom: 10px !important;
	background: url('../images/bg_h04.png') left bottom repeat-x;
	background-size: 27px 6px;
}
/*== h5 =======================*/
.h5LaySets {
	font-size: 18px;
	font-weight: bold;
	color: @colorSub;
}

.fl-module-heading h5.fl-heading {
	// ビルダーのH5
	color: @colorSub;
	font-size: 18px;
	font-weight: bold;
}
/*== h6 =======================*/
.h6LaySets {
	font-size: 16px;
	font-weight: bold;
}

.fl-module-heading h6.fl-heading {
	// ビルダーのH6
	color: @colorMain;
	font-size: 16px;
	font-weight: bold;
}
/* ===========================================================================================

	コンタクトバナー
=========================================================================================== */
.c_tel{
	.fl-icon {display: none;}
	.fl-icon-text {
		padding-left: 50px !important;
		background: url('../images/tel.png') left center no-repeat;
		background-size: 42px 24px;
	}
}


.c_banner {
	width: 700px;
	.c_tel{
		line-height: 1;
		.fl-icon {display: none;}
		.fl-icon-text {
			padding-left: 50px !important;
			background: url('../images/tel.png') left center no-repeat;
			background-size: 42px 24px;
		}
		a {
			color: inherit;
		}
	}
	.c_btn a{
		position: relative !important;
		top:0 !important;
		padding: 12px 45px !important;
		&::after {
			position: absolute;
			top: 0; bottom: 0; right: 21px;
			margin: auto;
			content: '';
			width: 5px; height: 5px;
			border-top: 1px solid @colorMain;
			border-right: 1px solid @colorMain;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		&::before {
			position: absolute;
			top: 0; bottom: 0; right: 15px;
			margin: auto;
			content: '';
			width: 15px; height: 15px;
			background: #fff;
			border-radius: 50%;
		}
	}
}