@charset "utf-8";

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

	共通
========================================================================================================================================== */
* {
	margin: 0;
	padding: 0;
	list-style: none;
	outline: 0;
	background: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	font: inherit;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	text-decoration: none;
	vertical-align: baseline;
}

html {
	height: 100%;
	font-size: 62.5%;
}

body {
	margin: 0;
	position: relative;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8rem;
	color: @baseColor;
	letter-spacing: 0.5px;
	background: #f8f8f8;
	word-wrap : break-word;
	overflow-wrap : break-word;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	z-index: 0;
	overflow: visible;

	.clearfix;
}

@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}


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

	.clearfix;
}


a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	outline: 0;
	.transition(0.3s ease-in-out);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent rgba(0,0,0,0);
	-moz-tap-highlight-color: transparent rgba(0,0,0,0);
	-ms-tap-highlight-color: transparent rgba(0,0,0,0);
	-o-tap-highlight-color: transparent rgba(0,0,0,0);
	tap-highlight-color: transparent rgba(0,0,0,0);
	color: @baseColor;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	span {
		max-width: 100%;
	}
}

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

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, .hoverText, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	outline: none;
}

article, aside, details, .rankingText, .rankingThum, footer, header, hgroup, menu, nav, section {
	display:block;
}

blockquote, q {
	quotes: none;

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

#wrap {
	position: relative;
	width: 100%;
	display: inline-block;
}

@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
	.spNone {
		display: none!important;
	}

	.pcNone {
		display: block;
	}
}/* @media screen and (max-width: 768px) END */

@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
	.spNone {
		display: block;
	}

	.pcNone {
		display: none!important;
	}
}/* @media screen and (min-width: 769px) END */


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

	ベンダープレフィックス設定
======================================================================= */
.keyframes(@name,@rules) {
	@-webkit-keyframes @name {
		@rules();
	}

	@-moz-keyframes @name {
		@rules();
	}

	@-ms-keyframes @name {
		@rules();
	}

	@-o-keyframes @name {
		@rules();
	}

	@keyframes @name {
		@rules();
	}
}

.transform(@arguments) {
	-webkit-transform: @arguments;
	-moz-transform: @arguments;
	-o-transform: @arguments;
	-ms-transform: @arguments;
	transform: @arguments;
}

.transition(@transString: 0) when not (@transString = 0) {
	-webkit-transition: @transString;
	-moz-transition: @transString;
	-o-transition: @transString;
	-ms-transition: @transString;
	transition: @transString;
}

.transitionDelay(@arguments) {
	-webkit-transition-delay: @arguments;
	-moz-transition-delay: @arguments;
	-ms-transition-delay: @arguments;
	-o-transition-delay: @arguments;
	transition-delay: @arguments;
}

.transformOrigin(@arguments) {
	-webkit-transform-origin: @arguments;
	-moz-transform-origin: @arguments;
	-ms-transform-origin: @arguments;
	-o-transform-origin: @arguments;
	transform-origin: @arguments;
}

.transitionDuration(@arguments) {
	-webkit-transition-duration: @arguments;
	-moz-transition-duration: @arguments;
	-ms-transition-duration: @arguments;
	-o-transition-duration: @arguments;
	transition-duration: @arguments;
}

.animation(@arguments) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	-ms-animation: @arguments;
	-o-animation: @arguments;
	animation: @arguments;
}

.animationDuration(@arguments) {
	-webkit-animation-duration: @arguments;
	-moz-animation-duration: @arguments;
	-ms-animation-duration: @arguments;
	-o-animation-duration: @arguments;
	animation-duration: @arguments;
}

.animationFillMode(@arguments) {
	-webkit-animation-fill-mode: @arguments;
	-moz-animation-fill-mode: @arguments;
	-ms-animation-fill-mode: @arguments;
	-o-animation-fill-mode: @arguments;
	animation-fill-mode: @arguments;
}

.animationDelay(@arguments) {
	-webkit-animation-delay: @arguments;
	-moz-animation-delay: @arguments;
	-ms-animation-delay: @arguments;
	-o-animation-delay: @arguments;
	animation-delay: @arguments;
}

.perspective(@arguments) {
	-webkit-perspective: @arguments;
	-moz-perspective: @arguments;
	-ms-perspective: @arguments;
	-o-perspective: @arguments;
	perspective: @arguments;
}

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

	Hタグ
======================================================================= */
h2 {
	text-align: center;
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 30px auto;

	.clearfix;

	&::before {
		position: absolute;
		content: "";
		line-height: 0;
		bottom: 0;
		left: calc(~"50% - 25px");
		width: 50px;
		height: 3px;
		background: @comColorRed;
	}

	span {
		display: block;
		width: 100%;
		font-size: 2.2rem;
		line-height: 2.8rem;
		position: relative;
		font-weight: 700;
		margin: 0 0 10px;

		&.eng + span {
			font-size: 1.1rem;
			line-height: 1.7rem;
		}
	}
}

.contentWrap .column2Wrap .mainColumn .pageNavi .pager,
h2 span.pager {
	width: auto;
	color: #aaa19d;
	font-size: 1.3rem;
	line-height: 1.7rem;
	font-weight: 300;
	display: inline-block;

	@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
		position: absolute;
		top: calc(~"50% - 12px");
		right: 5px;
		margin: 0;
	}/* @media screen and (min-width: 769px) END */
}


h3 {
	text-align: center;
	width: 100%;
	position: relative;
	display: inline-block;

	.clearfix;

	&.sideH3 {
		margin: 20px auto;

		span {
			font-size: 1.6rem;
			line-height: 2rem;
		}
	}

	&:not(.sideH3) {
		margin: 30px auto;

		span {
			font-size: 2.2rem;
			line-height: 2.8rem;
		}
	}

	span {
		display: block;
		width: 100%;
		position: relative;
		font-weight: 700;

		&:not(:last-of-type) {
			margin: 0 0 5px;
		}

		&.eng + span {
			font-size: 1.1rem;
			line-height: 1.7rem;
		}
	}
}


.eng {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}


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

	Width指定
======================================================================= */
@comMaxWidth: 1420px;// コンテンツのmax-width

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

	カラー
======================================================================= */
@baseColor: #333;
@mainColor: #3e3a39;
@comColorRed: #c2494d;
@comColorGray: #999;
@borderColor: #cccbca;

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

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


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

	共通 Flexbox 設定
======================================================================= */
.ComFlexBox(@justify,@alignContent,@direction,@wrap,@alignItems) {
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display: flex;
	-webkit-justify-content: @justify;/*--- safari（PC）用 ---*/
	justify-content: @justify;
	-webkit-align-content: @alignContent;/*--- safari（PC）用 ---*/
	align-content: @alignContent;
	-webkit-flex-flow: @direction @wrap;/*--- safari（PC）用 ---*/
	flex-flow: @direction @wrap;
	-webkit-align-items: @alignItems; /* Safari */
	align-items: @alignItems;
}


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

	Header
========================================================================================================================================== */
header {
	width: 100%;
	padding: 0 0px;
	margin: 0;
	z-index: 100;
	background: @mainColor;

	#headerWrap {
		width: 100%;
		max-width: @comMaxWidth;
		padding: 20px 10px;
		margin: auto;
		.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
			padding: 10px;
		}/* @media screen and (max-width: 768px) END */
	}// #headerWrap END


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

		ロゴ 部分
	======================================================================= */
	h1#logoH1 {
		width: 25%;
		max-width: 138px;
		margin: 0 auto 0 30px;

		@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
			max-width: 100px;
			margin: 0 auto 0 0px;
		}/* @media screen and (max-width: 768px) END */
	}

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

		検索 部分
	======================================================================= */
	#searchWrap {
		width: 50%;
		max-width: 250px;
		margin: 0;

		ul {
			background: #fff;
			padding: 5px;
			width: 100%;
			.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
			border-radius: 50px;
			overflow: hidden;

			li {
				max-width: 100%;
				margin: 0;
				width: calc(~"100% - 25px");

				&:last-of-type {
					width: 20px;
					margin: 0 5px 0 0;

					label {
						width: 20px;
						height: 20px;
						display: block;
						cursor: pointer;
						background: url(../images/magnifying.svg) no-repeat center center/ 20px 20px;

						input {
							display: none;
						}

						&:hover {
							opacity: 0.7;
						}
					}

				}
			}

			input[type="text"] {
				width: 100%;
				display: block;
				padding: 0 5px;
				cursor: pointer;
				max-width: 100%;
				vertical-align: middle;
				background: #fff;
				letter-spacing: 0px;
				.transition(0.3s ease-in-out);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);
				-webkit-appearance: none;
				border: 1px solid #fff;
				color: @baseColor;

				&:focus {
					background: #fff;
				}
			}
		}
	}

}// header END


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

	Main Image
========================================================================================================================================== */
#mvWrap {
	width: 100%;
	margin: 0;
	background: url(../images/mv.jpg) no-repeat center top;
	background-size: cover;

	.clearfix;

	@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
		padding-top: 43%;
		background-position: 62% top;
	}/* @media screen and (max-width: 768px) END */

	@media screen and (min-width: 769px) and (max-width: 1025px) {/* === タブレット769pxから・PC表示 === */
		background-position: 62% top;
		padding-top: 35%;
	}/* @media screen and (min-width: 769px) and (max-width: 1025px) END */

	@media screen and (min-width: 1026px) and (max-width: 1499px) {/* === PC1026pxから表示 === */
		padding-top: 30%;
	}/* @media screen and (min-width: 1026px) and (max-width: 1499px) END */

	@media screen and (min-width: 1500px) {/* === PC 1500pxから表示 === */
		padding-top: 27%;
	}/* @media screen and (min-width: 1500px) END */


	span {
		display: none;
	}
}


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

	Footer
========================================================================================================================================== */
footer {
	margin: auto 0 0;
	position: relative;
	width: 100%;

	&::before,&::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
	}

	&::before {
		border-top: 1px solid @borderColor;
		top: -1px;
	}

	&::after {
		border-top: 1px solid #fff;
		top: 0;
	}

	#footerTopWrap {
		margin: 0 auto;
		width: 100%;
		background: #d7d1cf;
		position: relative;
		padding: 20px 0;

		.contentWrap {
			.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

			nav#footerMenu {
				width: 60%;
				margin: 0 auto 0 0;

				@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
					width: 100%;
					margin-bottom: 10px;
				}/* @media screen and (max-width: 768px) END */

				ul {
					width: 100%;
					display: inline-block;

					li {
						display: inline-block;
						width: auto;
						position: relative;
						font-size: 1.3rem;

						@media screen and (max-width: 479px) {/* === SP縦表示 === */
							font-size: 1.2rem;
						}/* @media screen and (max-width: 479px) END */

						&:not(:last-of-type) {
							margin: 0 20px 0 0;
							padding: 0 20px 0 0;

							@media screen and (max-width: 479px) {/* === SP縦表示 === */
								margin: 0 10px 0 0;
								padding: 0 10px 0 0;
							}/* @media screen and (max-width: 479px) END */

							&::after {
								content: "";
								border-left: 1px solid @baseColor;
								position: absolute;
								top: 0;
								bottom: 0;
								right: 0;
							}
						}

						a:hover {
							color: @comColorRed;
						}
					}
				}
			}

			.copyRight {
				width: 40%;
				text-align: right;
				font-size: 1.3rem;

					@media screen and (max-width: 479px) {/* === SP縦表示 === */
						font-size: 1.2rem;
					}/* @media screen and (max-width: 479px) END */

				@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
					width: 100%;
				}/* @media screen and (max-width: 768px) END */
			}
		}
	}// #footerTopWrap END

	#footerLogo {
		padding: 30px 0;
		text-align: center;
		background: @mainColor;

		img {
			max-width: 126px;
		}

		a:hover {
			opacity: 0.7;
		}
	}// #footerLogo END
}// footer END


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

	パンくず
========================================================================================================================================== */
#breadcrumb {
	margin: 0 auto;
	width: 100%;
	padding: 10px 0;
	display: inline-block;
	background: #eae7e6;
	border-bottom: 1px solid @borderColor;

	& > ul {
		max-width: @comMaxWidth;
		width: 100%;
		padding: 0 10px;
		margin: 0 auto;
		.ComFlexBox(flex-end,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		& > li {
			font-size: 1.3rem;
			max-width: 100%;

			&:not(:last-of-type)::after {
				content: "";
				background: url(../images/keyboard_arrow_right.svg) no-repeat center center/ 10px 10px;
				vertical-align: baseline;
				margin: 0 5px;
				width: 10px;
				height: 10px;
				display: inline-block;
			}

			span {
				display: inline-block;
				max-width: 100%;
			}
		}
	}
}

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

	Container
========================================================================================================================================== */
#container {
	margin: 0 auto 60px;
	width: 100%;
	position: relative;
	padding: 0px 0px 0;

	.clearfix;
}

.contentWrap {
	margin: 0 auto;
	width: 100%;
	max-width: @comMaxWidth;
	padding: 0 10px;

	&:not(:last-of-type) {
		margin-bottom: 50px;
	}

	.clearfix;

	.more {
		width: 100%;
		text-align: center;

		a {
			margin: 0 auto;
			display: block;
			padding: 10px;
			width: 200px;
			background: @mainColor;

			span {
				color: #fff;
			}

			&:hover {
				opacity: 0.7;
			}
		}
	}

	.column2Wrap {
		.ComFlexBox(flex-start,center,row,wrap,flex-start);// 引数にjustify,align-content,direction,wrap,align-items
		width: 100%;

		.sideColumn {
			width: 18%;
			//margin: 0 auto 30px 0;
			margin: 0 0 30px auto;

			@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
				margin: 0px 0 30px;
				width: 100%;
			}/* @media screen and (max-width: 768px) END */

			@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
				max-width: 250px;
			}/* @media screen and (min-width: 769px) END */

			.sideContents {
				padding: 0 5px 5px;
				background: #eae7e6;
				border: 1px solid @borderColor;

				&:not(:last-of-type) {
					margin: 0 0 30px;
				}

				& > ul {
					border: 1px solid @borderColor;
					background: #fff;

					& > li {
						display: inline-block;
						width: 100%;

						&:not(:last-of-type) {
							border-bottom: 1px solid @borderColor;
						}

						dl {
							dt {
								padding: 0px;

								label {
									padding: 10px;
									position: relative;
									display: inline-block;
									width: 100%;

									span {
										position: relative;
										display: inline-block;
										width: 100%;
										line-height: 1.8rem;
										padding: 0 15px 0 0;

										&::before {
											position: absolute;
											top: calc(~"50% - 4px");
											right: 0px;
											width: 8px;
											height: 8px;
											line-height: 0;
											content: "";
											background: url(../images/keyboard_arrow_down.svg) no-repeat center center / 8px auto;
											.transition(0.3s ease-in-out);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);
										}
									}
								}
							}

							dd {
								display: none;
								height: 0;
								width: 100%;
								.transition(0.3s ease-in-out);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);

								ul li {
									font-size: 1.3rem;
									border-top: 1px dotted @borderColor;

									label {
										padding: 10px 10px 10px 15px;
										position: relative;
										display: inline-block;
										width: 100%;

										span {
											padding: 0px 0px 0px 15px;
											position: relative;
											display: inline-block;
											width: 100%;
											line-height: 1.7rem;

											&::before {
												content: "-";
												color: #c3bbb8;
												font-size: 1.4rem;
												position: absolute;
												top: 50%;
												left: 0px;
												line-height: 0;
											}
										}

										input[type="radio"]:checked + span {
											color: @comColorRed;

											&::before {
												content: "";
												background: url(../images/checked.svg) no-repeat center center/ 8px auto;
												width: 8px;
												height: 8px;
												top: calc(~"50% - 4px");
											}
										}
									}
								}
							}// dd END
						}// & > li END

						& input[type="checkbox"]:checked + dl dt label span::before {
							//background: url(../images/close.svg) no-repeat center center / 8px auto;
							background: url(../images/keyboard_arrow_down.svg) no-repeat center center / 8px auto;
						}

						& input[type="checkbox"]:checked + dl dd {
							height: auto;
							display: block;
						}
					}

					label {
						cursor: pointer;
					}

					input[type="checkbox"],input[type="radio"] {
						display: none;
					}
				}// & > ul END
			}// .sideContents END
		}// .sideColumn END

		.mainColumn {
			width: 80%;
			margin: 0;

			@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
				width: 100%;
			}/* @media screen and (max-width: 768px) END */

			@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
				max-width: 1110px;
			}/* @media screen and (min-width: 769px) END */

			.archiveList {
				width: 100%;
				display: inline-block;

				& > li {
					.ComFlexBox(flex-start,center,row,wrap,flex-start);// 引数にjustify,align-content,direction,wrap,align-items
					width: 100%;
					background: #fff;
					padding: 30px;
					margin: 0 0 30px;

					@media screen and (max-width: 1025px) {/* === 1025pxまで表示 === */
						padding: 20px;
					}/* @media screen and (max-width: 1025px) END */

					.imgWrap {
						width: 23%;
						margin: 0 auto 0 0;
						position: relative;

						@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
							width: 25%;
						}/* @media screen and (max-width: 768px) END */

						@media screen and (max-width: 479px) {/* === SP縦表示 === */
							width: 100%;
							margin: 0 0 20px;
						}/* @media screen and (max-width: 479px) END */

						a {
							position: relative;
							padding-top: 100%;
							display: block;

							@media screen and (max-width: 479px) {/* === SP縦表示 === */
								padding-top: 70%;
								width: 70%;
								margin: auto;
							}/* @media screen and (max-width: 479px) END */

							&:hover {
								opacity: 0.7;
							}

							span {
								background-size: contain;
								background-position: center center;
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								background-repeat: no-repeat;
								background-color: #eae7e6;
							}
						}
					}

					& > dl {
						width: calc(~"100% - (30px + 23%)");

						@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
							width: calc(~"100% - (20px + 25%)");
						}/* @media screen and (max-width: 768px) END */

						@media screen and (max-width: 479px) {/* === SP縦表示 === */
							width: 100%;
						}/* @media screen and (max-width: 479px) END */

						& > dt {
							border-bottom: 1px solid @borderColor;
							padding: 0 0 10px;
							margin: 0 0 20px;
							display: inline-block;
							width: 100%;

							a {
								.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

								span {
									display: inline-block;

									&.shopName {
										font-size: 2.2rem;
										color: @comColorRed;
										line-height: 2.8rem;
										font-weight: bold;
										margin: 0 auto 0 0;
										padding: 0 10px 0 0;
									}

									&.direction {
										text-align: right;
										padding: 5px 0px;
										font-size: 1.3rem;
									}
								}
							}
						}

						& > dd {
							display: inline-block;
							width: 100%;

							p {
								margin: 0 0 20px;
								font-size: 1.3rem;
								line-height: 1.7rem;
							}

							ul {
								.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
								width: 100%;
								margin: 0 0 10px;

								li {
									margin: 0 5px 5px 0;
									display: inline-block;
									width: auto;

									span {
										padding: 3px 5px;
										width: auto;
										border: 1px solid @borderColor;
										display: inline-block;
										font-size: 1.2rem;
										.transition(0.3s ease-in-out);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);

										&:hover {
											color: @comColorRed;
											border-color: @comColorRed;
										}
									}
								}
							}

							& > dl {
								.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
								font-size: 1.2rem;
								line-height: 1.6rem;

								&:nth-of-type(odd) {
									background: #f7f5f4;
								}

								dt {
									width: 140px;
									padding: 10px;

									@media screen and (max-width: 479px) {/* === SP縦表示 === */
										width: 100%;
										padding: 10px 10px 0;
									}/* @media screen and (max-width: 479px) END */

									span {
										position: relative;
										padding: 0 0 0 15px;

										&::before {
											position: absolute;
											top: calc(~"50% - 4px");
											left: 0;
											width: 8px;
											height: 8px;
											content: "";
											background: url(../images/keyboard_arrow_right.svg) no-repeat center center/ 8px auto;

											@media screen and (max-width: 479px) {/* === SP縦表示 === */
												background: url(../images/keyboard_arrow_down.svg) no-repeat center center/ 8px auto;
											}/* @media screen and (max-width: 479px) END */
										}
									}
								}

								dd {
									padding: 10px;
									width: calc(~"100% - 140px");

									@media screen and (max-width: 479px) {/* === SP縦表示 === */
										width: 100%;
									}/* @media screen and (max-width: 479px) END */
								}
							}
						}
					}
				}// & > li END
			}// .archiveList END

			.pageNavi {
				position: relative;
				text-align: center;

				ul {
					.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

					@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
						margin: 0 0 10px;
					}/* @media screen and (max-width: 768px) END */

					li {
						width: auto;

						&:not(:last-of-type) {
							margin: 0 5px 0 0;

							@media screen and (max-width: 479px) {/* === SP縦表示 === */
								margin: 0 3px 0 0;
							}/* @media screen and (max-width: 479px) END */
						}

						span {
							width: 32px;
							height: 32px;
							display: block;
							line-height: 3.2rem;
							background: @mainColor;
							letter-spacing: 0;
							color: #fff;

							@media screen and (max-width: 479px) {/* === SP縦表示 === */
								width: 30px;
								height: 30px;
								line-height: 3rem;
								font-size: 1rem;
							}/* @media screen and (max-width: 479px) END */
						}

						a span {
							background: #fff;
							color: @baseColor;
						}

						&:not(.prev):not(.next) a:hover span {
							background: @comColorRed;
							color: #fff;
						}

						&.prev span {
							background: #fff url(../images/keyboard_arrow_left.svg) no-repeat center center/ 8px auto;
						}

						&.prev a:hover span {
							background: @comColorRed url(../images/keyboard_arrow_leftW.svg) no-repeat center center/ 8px auto;
						}

						&.next span {
							background: #fff url(../images/keyboard_arrow_right.svg) no-repeat center center/ 8px auto;
						}

						&.next a:hover span {
							background: @comColorRed url(../images/keyboard_arrow_rightW.svg) no-repeat center center/ 8px auto;
						}
					}
				}
			}// .pageNavi END
		}// .mainColumn END
	}// .column2Wrap END
}// .contentWrap END


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

	ALL CATEGORY カテゴリ一覧
========================================================================================================================================== */
#allCateWrap ul.cateNavi {
	.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
	margin: 0 0 25px;

	li {
		width: auto;
		margin: 0 5px;
		display: inline-block;

		label {
			display: block;
			max-width: 100%;
			margin: 0 0 5px;
			cursor: pointer;

			input[type="checkbox"] {
				display: none;

				&:checked + span {
					background: @comColorRed;
					color: #fff;
				}
			}
			input[type="radio"] {
				display: none;

				&:checked + span {
					background: @comColorRed;
					color: #fff;
				}
			}

			span {
				padding: 10px 15px;
				display: inline-block;
				background: #fff;
				.transition(0.3s ease-in-out);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);

				@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
					font-size: 1.4rem;
				}/* @media screen and (max-width: 768px) END */

				&:hover {
					background: @comColorRed;
					color: #fff;
				}
			}
		}
	}
}

#allCateWrap ul.cateList {
	.ComFlexBox(flex-start,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items

	li {
		position: relative;
		display: inline-block;
		margin: 30px 20px 0 0;

		@media screen and (max-width: 479px) {/* === SP縦表示 === */
			margin: 30px 5px 0 0;
			width: calc(~"(100% - 10px) / 3.001");

			&:nth-of-type(3n) {
				margin-right: 0;
			}

			&:nth-of-type(-n+3) {
				margin-top: 0;
			}
		}/* @media screen and (max-width: 479px) END */

		@media screen and (min-width: 480px) and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
			width: calc(~"(100% - 60px) / 4");

			&:nth-of-type(4n) {
				margin-right: 0;
			}

			&:nth-of-type(-n+4) {
				margin-top: 0;
			}
		}/* @media screen and (max-width: 768px) END */

		@media screen and (min-width: 769px) and (max-width: 1025px) {/* === タブレット769pxから・PC表示 === */
			width: calc(~"(100% - 80px) / 5.001");

			&:nth-of-type(5n) {
				margin-right: 0;
			}

			&:nth-of-type(-n+5) {
				margin-top: 0;
			}
		}/* @media screen and (min-width: 769px) and (max-width: 1025px) END */

		@media screen and (min-width: 1026px) {/* === PC 1026pxから表示 === */
			width: calc(~"(100% - 100px) / 6.001");

			&:nth-of-type(6n) {
				margin-right: 0;
			}

			&:nth-of-type(-n+6) {
				margin-top: 0;
			}
		}/* @media screen and (min-width: 1026px) END */

		dl {
			.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

			dt {
				order: 1;
				width: 100%;
				padding: 0px;

				a:hover {
					color: @comColorRed;
				}

				& a > span {
					display: inline-block;
					width: 100%;
					margin: 0;
					font-weight: 500;

					&:not(:last-of-type) {
						margin-bottom: 5px;
					}

					&:not(.cateName) {
						color: @comColorGray;
						font-size: 1.2rem;
					}

					&.cateName {
						line-height: 1.8rem;

						span {
							position: relative;
							font-size: 1.3rem;

							@media screen and (max-width: 479px) {/* === SP縦表示 === */
								font-size: 1rem;
							}/* @media screen and (max-width: 479px) END */

							@media screen and (min-width: 480px) and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
								font-size: 1.1rem;
							}/* @media screen and (max-width: 768px) END */

							&::before,&::after {
								display: inline-block;
								width: auto;
							}

							&::before {
								content: "（";
							}

							&::after {
								content: "）";
							}
						}
					}
				}
			}

			dd {
				order: 0;
				width: 100%;
				margin: 0 0 10px;

				a {
					position: relative;
					padding-top: 100%;
					display: block;

					&:hover {
						opacity: 0.7;
					}

					span {
						background-size: cover;
						background-position: center top;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
					}
				}
			}
		}
	}
}


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

	POPULAR TAGS 人気のタグ
========================================================================================================================================== */
#popularWrap {
	margin: 0 auto;
	width: 100%;
	padding: 0px 0px 30px;
	background: #eae7e6;

	ul {
		.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		margin: 0 0 25px;

		li {
			width: auto;
			margin: 0 3px;
			display: inline-block;

			a {
				display: block;
				padding: 10px 15px;
				background: #fff;
				max-width: 100%;
				margin: 0 0 5px;

				span {
					font-size: 1.8rem;

					@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
						font-size: 1.4rem;
					}/* @media screen and (max-width: 768px) END */
				}

				&:hover,
				&.current {
					background: @comColorRed;
					color: #fff;
				}
			}
		}
	}
}


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

	ABOUT UNITIA・CONTACT US
========================================================================================================================================== */
#aboutContactWrap {
	margin: 0 auto;
	width: 100%;
	padding: 0px 0px;
	position: relative;

	&::before,&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 50%;
		z-index: -1;
	}

	&::before {
		left: 0;
		background: @mainColor;
	}

	&::after {
		right: 0;
		background: #302c2b;
	}

	ul {
		display: inline-block;
		width: 100%;

		li {
			width: 50%;
			display: inline-block;

			&:first-of-type {
				padding-right: 10px;

				a {
					.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
				}
			}

			&:last-of-type {
				padding-left: 10px;

				a {
					.ComFlexBox(flex-end,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
				}
			}

			a {
				color: #fff;
				width: 100%;
				padding: 30px 0;

				&:hover {
					color: @comColorRed;
				}

				@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
					font-size: 1.4rem;
				}/* @media screen and (max-width: 768px) END */

				dl {
					width: auto;
					.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

					dt {
						width: calc(~"100% - 72px");
						order: 1;

						@media screen and (max-width: 479px) {/* === SP縦表示 === */
							width: 100%;
							text-align: center;
						}/* @media screen and (max-width: 479px) END */
					}

					dd {
						order: 0;
						width: 72px;
						padding: 0 20px 0 0;

						@media screen and (max-width: 479px) {/* === SP縦表示 === */
							width: 100%;
							padding: 0;
							margin: 0 0 15px;
							text-align: center;

							img {
								width: 50px;
							}
						}/* @media screen and (max-width: 479px) END */
					}

					span {
						display: block;
						font-size: 1.6rem;

						@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
							font-size: 1rem;
						}/* @media screen and (max-width: 768px) END */

						&:not(.eng) {
							font-weight: 300;
						}

						&.eng {
							font-size: 2.2rem;
							margin: 0 0 5px;

							@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
								font-size: 1.6rem;
							}/* @media screen and (max-width: 768px) END */
						}
					}
				}
			}


		}
	}
}


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

	RECENTLY POST 最新の投稿
========================================================================================================================================== */
#recentlyWrap {
	margin: 0 auto;
	width: 100%;
	padding: 0px 0px 30px;
	background: #eae7e6;

	ul {
		.ComFlexBox(flex-start,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
		margin: 0 0 25px;

		li {
			margin: 0 20px 0 0;
			background: #fff;

			@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
				width: calc(~"(100% - 20px) / 2");

				&:nth-of-type(even) {
					margin-right: 0;
				}

				&:nth-of-type(n+3) {
					margin-top: 20px;
				}
			}/* @media screen and (max-width: 768px) END */

			@media screen and (min-width: 769px) {/* === PC・タブレット769pxから表示 === */
				width: calc(~"(100% - 60px) / 4");

				&:last-of-type {
					margin-right: 0;
				}
			}/* @media screen and (min-width: 769px) END */


			dl {
				.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

				dt {
					order: 1;
					width: 100%;
					padding: 20px;

					a:hover {
						color: @comColorRed;
					}

					span {
						display: inline-block;
						width: 100%;
						margin: 0;
						font-weight: 500;

						&:not(:last-of-type) {
							margin-bottom: 15px;
						}

						&:not(.title) {
							font-size: 1rem;
						}

						&.title {
							line-height: 2.5rem;
						}

						&.cate {
							position: relative;
							padding: 0 0 15px;

							&::before {
								position: absolute;
								bottom: 0;
								left: 0;
								content: "";
								width: 32px;
								height: 2px;
								background: @comColorRed;
							}
						}
					}
				}

				dd {
					order: 0;
					width: 100%;
					margin: 0 0 0px;

					a {
						position: relative;
						padding-top: 60%;
						display: block;

						&:hover {
							opacity: 0.7;
						}

						span {
							background-size: cover;
							background-position: center top;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
						}
					}
				}
			}
		}
	}
}


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

	ローディング
======================================================================================================================================= */
#loadingOverlay {
	background: rgba(255,255,255,0.9);
	bottom: 0;
	left: 0;
	opacity: 1;
	position: fixed;
	right: 0;
	top: 0;
	.transition(opacity .3s);// 引数が複数ある場合は最後に;が必要 例）.transition(プロパティ1, プロパティ2;);
	z-index: 99999;

	#loadingSpinner {
		color: @mainColor;
		font-size: 1.2rem;
		margin: auto;
		position: absolute;
		text-indent: -9999em;
		.transform(translateZ(0));
		.animationDelay(-0.16s);
		top: 50%;
		left: 50%;

		&, &::before, &::after {
			border-radius: 50%;
			width: 15px;
			height: 15px;
			.animationFillMode(both);
			.animation(load7 1.8s infinite ease-in-out);
		}

		&::before, &::after {
			content: '';
			position: absolute;
			top: 0;
		}

		&::before {
			left: -3.5em;
			.animationDelay(-0.32s);
		}

		&::after {
			left: 3.5em;
		}
	}
}

.keyframes(load7, {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
});