@charset "utf-8";
@openSansfamily: 'Open Sans', sans-serif;


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

	共通
======================================================================================================================================= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style:none;
	outline:0;
}

body {
	position: relative;
	font-size: 14px;
	line-height: 1.7;
	color: #000;
	letter-spacing: 0.5px;
	background: #fff;
	word-wrap : break-word;
	overflow-wrap : break-word;
	-webkit-text-size-adjust: 100%;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-weight: 500;
}

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

	.clearfix;
}

.imgAbsolute {
	position: relative;

	img {
		position: absolute;
		top: 0;
		left: 0;
	}
}


a,
a:link,
a:active,
a:visited {
	text-decoration: none;
	outline: 0;
	.transitionCom;
	cursor: pointer;
	color: #000;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

a:hover img {
	opacity: 0.7;
	.transitionCom;
}

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

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, dialog, figure, footer, header,
hgroup, menu, nav, section {
	display:block;
}

#wrap {
	position: relative;
	overflow: hidden;
	-webkit-transition: -webkit-transform .4s ease;
	transition: -webkit-transform .4s ease;
	transition: transform .4s ease;
	transition: transform .4s ease, -webkit-transform .4s ease;
}

#navToggle:checked ~ #wrap {
	-webkit-transform: translate(-280px, 0);
	-ms-transform: translate(-280px, 0);
	transform: translate(-280px, 0);
	-webkit-transform: translate3d(-280px, 0, 0);
	transform: translate3d(-280px, 0, 0);
}

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

	.spOther {
		display: none!important;
	}

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

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

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

@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 */

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

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

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

	共通transition用
==================================================================== */
.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: 1300px;

.contentSetMain {
	width: 100%;
	max-width: calc(~"@{contentWidth} + 20px");
	position: relative;
	padding: 0 10px;
	margin: 0 auto;
}

.contentSetPad0 {
	width: 100%;
	max-width: @contentWidth;
	position: relative;
	padding: 0 0px;
	margin: 0 auto;
}


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

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

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

	共通 ボーダー 設定
==================================================================== */
@comBorderSolid1: 1px solid @comColorGray;
@comBorderSolid2: 2px solid @comColorGray;

@comBorderDot1: 1px dotted @comColorGray;
@comBorderDot: 2px dotted @comColorGray;


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

	共通 カラー 設定
==================================================================== */
@comColorPink: #e73656;
@comColorBlue: #3899d3;
@comColorGray: #ddd;
@comColorYellow: #ffff43;
@comColorGreen: #6ed3cb;
@comColorOrange: #ffa95c;
@comColorRed: #dc4646;

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

	共通 Moreボタン 設定
==================================================================== */
.comMoreSets {
	text-align: center;
	line-height: 0;

	a {
		background: #000;
		line-height: 100%;
		display: inline-block;

		& > span {
			padding: 8px 25px;
			color: #fff;
			font-size: 11px;
			font-family: @openSansfamily;
			display: inline-block;
			line-height: 8px;

			.clearfix;

			&::before {
				margin: 0 5px 0 0;
				content: "+";
			}
		}
	}

	&:not(.imgLink) {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			right: 0;
			z-index: -1;
			border-top: @comBorderSolid1;
		}
	}
}


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

	アイコンフォント
======================================================================================================================================= */
.iconIcomoon(@content) {
	font-family: "icomoon";
	content: @content;
	vertical-align: middle;
	display: inline-block;
}

@balloonIcon: "\e914";
@heartIcon: "\e908";
@heartLinearIcon: "\e909";
@cartIcon: "\e912";
@searchIcon: "\e911";

@arrowLeftIcon: "\e91d";
@arrowRightIcon: "\e91e";
@arrowUpIcon: "\e91b";
@arrowBottomIcon: "\e91c";

@facebookIcon: "\e903";
@facebookCircleIcon: "\e904";
@twitterIcon: "\e916";
@twitterCircleIcon: "\e917";

@checkIcon: "\e906";
@cloudIcon: "\e900";
@closeIcon: "\e90a";

// アイテムについて
@photographyIcon: "\e905";
// お支払いについて
@walletIcon: "\e91a";
// 取り消し・返品について
@returnIcon: "\e910";
// 会員情報について
@memberIcon: "\e907";
// 当サイトについて
@siteIcon: "\e902";
// お問い合わせ
@contactIcon: "\e90e";
// ログイン
@loginIcon: "\e918";
// 会社概要
@companyIcon: "\e901";

// メンテナンス
@mainteIcon: "\e90b";

// 申し込み
@applicationsIcon: "\e90c";


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

	共通 GUIDEアイコン 設定
==================================================================== */
.guideDtItem span::before {// アイテムについて
	.iconIcomoon(@photographyIcon);// 引数にcontentを指定
}

.guideDtOrder span::before {// ご注文について
	.iconIcomoon(@cartIcon);// 引数にcontentを指定
}

.guideDtPay span::before {// お支払いについて
	.iconIcomoon(@walletIcon);// 引数にcontentを指定
}

.guideDtCancel span::before {// 取り消し・返品について
	.iconIcomoon(@returnIcon);// 引数にcontentを指定
}

.guideDtMember span::before {// 会員情報について
	.iconIcomoon(@memberIcon);// 引数にcontentを指定
}

.guideDtSite span::before {// 当サイトについて
	.iconIcomoon(@siteIcon);// 引数にcontentを指定
}

.guideDtContact span::before {// お問い合わせ
	.iconIcomoon(@contactIcon);// 引数にcontentを指定
}

.guideDtCompany span::before {// 会社概要
	.iconIcomoon(@companyIcon);// 引数にcontentを指定
}

.guideDtApplications span::before {// お申込み
	.iconIcomoon(@applicationsIcon);// 引数にcontentを指定
}

.loginDt span::before {// ログイン
	.iconIcomoon(@loginIcon);// 引数にcontentを指定
}

.mainteDt span::before {// ログイン
	.iconIcomoon(@mainteIcon);// 引数にcontentを指定
}


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

	Form設定
======================================================================================================================================= */
input, textarea, select,button {
	cursor: pointer;
	max-width: 100%;
}

input, select {
	vertical-align: middle;
}

textarea {
	padding: 10px;
	width: 100%;
}

input:not([type="submit"]), textarea, button {
	border: none;
}

input[type="button"], input[type="reset"], input[type="submit"], input[type="file"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

button {
	background: none;
}

input:not([type="radio"]):not([type="reset"]):not([type="checkbox"]):not([type="submit"]):not(#sidesearchtext), textarea {
	background: #f7f7f7;
	display: block;
	width: 100%;
	padding: 15px;
	color: #666;
	letter-spacing: 1px;
	.transitionCom;
	-webkit-appearance: none;
	border: 1px solid #fff;

	&:focus {
		background: #fff;
		border: @comBorderSolid1;
	}

	&.inputW100 {
		width: 100px;
	}
}

input::-webkit-input-placeholder {
	color: #7e7e7e;
}

input:-ms-input-placeholder {
	color: #7e7e7e;
}

input::-moz-placeholder {
	color: #7e7e7e;
}

.selectLabel {
	position: relative;
	display: inline-block;
	padding: 12px 15px;
	background: #f7f7f7;

	@-moz-document url-prefix() {// firefoxハック
		padding: 7px 15px;
	}

	select {
		padding: 0 20px 0 0;
		border: none;
		outline: none;
		letter-spacing: 1px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: url(../images/arrow_down.svg) no-repeat right center/ 12px auto;
		color: #666;

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {// ieハック
			background: url(../images/arrow_down.svg) no-repeat right center/ 12px 12px;
		}

		option{
			padding: 5px;
			border: none;
		}

		&::-ms-expand {
			display: none;
		}
	}
}


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

	ラジオ・チェックボックス 部分
==================================================================== */
input[type=radio],
input[type=checkbox]:not(#navToggle) {
	display: none;
	margin: 0;

	& + label {
		position: relative;
		cursor: pointer;
		font-size: 13px;
		padding: 0 0px 0 22px;
		.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		&::before {
			content: "";
			background: #f3f3f3;
		}
	}

	& + label::before, &:checked + label::before, &:checked + label::after {
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 14px;
		height: 14px;
		border-radius: 100%;
		margin-top: -7px;
	}

	&:checked + label::before {
		.iconIcomoon(@checkIcon);// 引数にcontentを指定
		color: #fff;
		font-size: 10px;
		background: none;
		z-index: 1;
		text-align: center;
		line-height: 16px;
	}


	&:checked + label::after {
		content: "";
		background: @comColorBlue;
	}
}

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

	submit 部分
==================================================================== */
.comBtnLay{
	position: relative;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	.transitionCom;
	text-align: center;
	height: 38px;
	line-height: 39px;
	border-radius: 3px;
	overflow: hidden;
	color: #fff;
	background: #5c5c5c;

	&:hover {
		opacity: 0.7;
	}

	span {
		position: relative;
		letter-spacing: 0;
	}
}

.submitLabel {
	.comBtnLay;

	input:not([type="submit"]) {
		display: none!important;
	}

	input[type="submit"] {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		opacity: 0;
	}
}

.submitWrap {
	text-align: center;

	p.submitDesc {
		margin: 0 0 20px;

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

			a {
				color: @comColorBlue;
			}
		}
	}

	.submitLabel {
		padding: 0 15px;
		min-width: 200px;
	}

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

		@media screen and (max-width: 479px) {/* === SP縦表示 === */
			-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
			flex-flow: row wrap;
		}/* @media screen and (max-width: 479px) END */

		li {
			padding: 0 10px;
			display: inline-block;
			width: auto;

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

				&:first-of-type {
					margin-bottom: 10px;
				}
			}/* @media screen and (max-width: 479px) END */

			& > span {
				display: block;
				width: 100%;

				@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
					text-align: left;
				}/* @media screen and (min-width: 480px) END */

				a {
					max-width: 100%;

					&:hover {
						opacity: 0.7;
					}
				}
			}
		}
	}
}


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

	Header
======================================================================================================================================= */

header {
	position: relative;
	border-bottom: @comBorderSolid1;
	z-index: 100;

	.clearfix;

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

	#headerTopContainer {
		height: auto;
		background: #000;
		color: #fff;
		padding: 20px;
		.ComFlexBox(space-between,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		.clearfix;

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

		.headerTopLeftArea {
			width: calc(~"100% - 400px");
			margin-right: auto;

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

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

				a {
					width: 80px;
					display: inline-block;
					line-height: 1;
				}

				.h1Text {
					margin: 0 0 0 20px;
					color: #fff;
					font-size: 14px;
					font-weight: normal;
					max-width: calc(~"100% - 100px");
				}
			}
		}// .headerTopLeftArea END

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

			PCアイコンメニュー
		==================================================================== */
		.headerTopRightArea {
			width: 390px;

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

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

				li {
					margin: 0 0 0 20px;

					&:first-of-type {
						margin-left: 0px;
					}

					&:last-of-type {
						margin-right: 10px;
					}

					a {
						color: #fff;
						position: relative;
						display: inline-block;
						line-height: 1;

						&::before {
							font-size: 30px;
						}

						.retentionNum {
							position: absolute;
							background: #e73656;
							font-size: 11px;
							top: -5px;
							right: -10px;
							border-radius: 100%;
							width: 20px;
							height: 20px;
							color: #fff!important;
							text-align: center;
							.ComFlexBox(center,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
						}

						@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {// ieハック
							.retentionNum {
								display: inline-block;
								line-height: 22px;
							}
						}

						&:hover {
							color: @comColorPink;
							opacity: 1;
						}
					}
				}

				.searchLi a::before {
					.iconIcomoon(@balloonIcon);// 引数にcontentを指定
				}

				.favoriteLi a::before {
					.iconIcomoon(@heartLinearIcon);// 引数にcontentを指定
				}
			}

		}// .headerTopRightArea END
	}// #headerTopContainer END


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

		親カテゴリ・ロゴ・検索
	==================================================================== */
	#headerBottomContainer {
		border-bottom: @comBorderSolid1;

		.clearfix;

		.header3ColumnArea {
			.contentSetMain;
			.ComFlexBox(space-between,center,row,nowrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
			padding: 30px 10px 20px;

			@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
				-webkit-justify-content: center;/*--- safari（PC）用 ---*/
				justify-content: center;
				-webkit-flex-flow: column wrap;/*--- safari（PC）用 ---*/
				flex-flow: column wrap;
				padding-top: 20px;
			}/* @media screen and (max-width: 768px) END */

			h2 {
				max-width: 340px;
				line-height: 0;
				text-align: center;
				width: 30%;

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

				a {
					display: inline-block;
					line-height: 0;
					width: 100%;

					img {
						width: 100%;
					}
				}

				@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
					order: 0;
					width: 100%;
					max-width: 100%;
					padding: 0px 0px 20px;
					position: relative;

					a.logo {
						width: 50%;
						max-width: 340px;
					}


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

						ハンバーガーメニューの動き設定
					=================================================== */
					.menuBtnBlock {
						position: absolute;
						right: 0;
						top: 50%;
						margin: -40px 0 0;

						.hamburgerOpen {
							display: inline-block;
							position: relative;
							width: 40px;
							height: 40px;
							margin: 10px 0 10px;
							border-radius: 50%;

							span {
								display: block;
								position: absolute;
								top: 50%;
								left: 50%;
								width: 30px;
								height: 2px;
								margin: -1px 0 0 -15px;
								background: #000;
								.transitionCom;

								&::before, &::after {
									display: block;
									content: "";
									position: absolute;
									top: 50%;
									left: 0;
									width: 30px;
									height: 2px;
									background: #000;
									.transitionCom;
								}

								&::before{
									margin-top: -10px;
								}

								&::after{
									margin-top: 8px;
								}
							}
						}
					}
				}/* @media screen and (max-width: 768px) END */
			}


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

				親カテゴリ
			=================================================== */
			.headerCate {
				.ComFlexBox(space-between,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
				position: relative;
				width: 140px;

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

				@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
					order: 2;
					width: 100%;
					padding: 20px 0 0;

					&::before {
						border-top: @comBorderSolid1;
						content: "";
						position: absolute;
						top: 0;
						left: -10px;
						right: -10px;
					}
				}/* @media screen and (max-width: 768px) END */

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

					@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
						-webkit-justify-content: flex-start;
						justify-content: flex-start;
						height: 100%;
						max-width: 300px;
					}/* @media screen and (min-width: 769px) END */

					li {
						width: 25%;
						text-align: center;
						position: relative;

						@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
							&.current a {
								color: @comColorPink;
							}
						}/* @media screen and (max-width: 768px) END */

						@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
							width: auto;
							.ComFlexBox(center,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
							height: 100%;
							text-align: left;
							margin: 0 auto 0 0;

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

							&.current::before {
								position: absolute;
								bottom: -22px;
								left: 0;
								right: 0;
								content: "";
								display: block;
								width: 100%;
								height: 3px;
								background: #000;
							}
						}/* @media screen and (min-width: 769px) END */

						@media screen and (min-width: 769px) and (max-width: 899px) {/* === タブレット899pxまで表示 === */
							padding: 0 25px 0 0;

							&.current::before {
								width: calc(~"100% - 25px");
							}
						}/* @media screen and (min-width: 769px) and (max-width: 899px) END */

						@media screen and (min-width: 900px) and (max-width: 1025px) {/* === タブレット1025px表示 === */
							padding: 0 30px 0 0;

							&.current::before {
								width: calc(~"100% - 30px");
							}
						}/* @media screen and (min-width: 900px) and (max-width: 1025px) END */

						a {
							font-family: @openSansfamily;
							font-weight: 700;
							vertical-align: middle;
							opacity: 1;
							.hvrFloatShadow;

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

							&:hover {
								color: @comColorPink;
							}
						}
					}
				}
			}

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

				GUIDE・facebook・twitter
			=================================================== */
			.guideNavi {
				.ComFlexBox(flex-end,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
				width: 170px;

				ul {
					width: auto;

					li {
						display: inline-block;

						&.facebookBtn a span::before {
							.iconIcomoon(@facebookIcon);// 引数にcontentを指定
						}

						&.twitterBtn a span::before {
							.iconIcomoon(@twitterIcon);// 引数にcontentを指定
						}

						a {
							font-family: @openSansfamily;
							font-weight: 700;
							vertical-align: middle;
							font-size: 14px;
							padding: 5px 15px;
							border-right: @comBorderSolid1;
							.hvrUnderlineCenter;

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

						&:first-of-type a {
							border-left: @comBorderSolid1;
						}
					}
				}
			}
		}// .header3ColumnArea END
	}// #headerBottomContainer END
}// Header END

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

	スクロール Fixed
==================================================================== */
.fixedBody #headerTopContainer {
	position: fixed;
	width: 100%;
	.transitionCom;
	padding: 10px 20px;
	top: 0;

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

.fixedBody #wrap {
	padding-top: 50px;
}


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

	メニューオープン時のメニューボタン
==================================================================== */
#navToggle:checked ~ header .hamburgerOpen span {
	background: none;

	&::before, &::after {
		margin-top: 0;
	}

	&::before {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	&::after {
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}
}


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

	スライドメニュー
======================================================================================================================================= */
/* =======================================================================

	スライドメニューオープン時のheader移動
======================================================================= */
@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
	.hamburgerClose {
		pointer-events: none;
		z-index: 1;
		width: calc(~"100% - 280px");
		height: 100%;
		transition: background .3s;
		cursor: pointer;
		position: fixed;
		top: 0;
		left: 0;
	}
}/* @media screen and (max-width: 768px) END */

#navToggle {
	display: none;
	overflow: hidden;
}

#navToggle:checked ~ .hamburgerClose {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}


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

	スライドメニュー
======================================================================= */
#spGlobalMenu {
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	right: 0;
	width: 280px;
	height: 100%;
	padding: 10px;
	background: #333;
	-webkit-transform: translate(100%, 0);
	-ms-transform: translate(100%, 0);
	transform: translate(100%, 0);
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform .4s ease;
	transition: -webkit-transform .4s ease;
	transition: transform .4s ease;
	transition: transform .4s ease, -webkit-transform .4s ease;

	ul {
		display: inline-block;
		width: 100%;
		padding: 10px;

		li {
			display: inline-block;
			width: 100%;
			position: relative;

			&::after {
				content: '';
				border-bottom: 1px solid rgba(255,255,255,0.2);
				display: block;
				position: absolute;
				left: 0px;
				right: 0px;
				bottom: 0;
			}

			a {
				padding: 10px 10px 10px 10px;
				color: #fff;
				display: inline-block;
				width: 100%;
			}

			span.en {
				font-family: @openSansfamily;
				font-weight: 500;
				font-size: 10px;
				margin: 0 0 0 10px;
				color: lighten(@comColorPink, 25%);
			}
		}

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

			& > span {
				font-size: 16px;
				width: 50%;
				display: inline-block;
				text-align: center;

				& span::before {
					color: #fff;
				}

				&.facebookBtn a span::before {
					.iconIcomoon(@facebookIcon);// 引数にcontentを指定
				}

				&.twitterBtn a span::before {
					.iconIcomoon(@twitterIcon);// 引数にcontentを指定
				}

				a {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

#navToggle:checked ~ #spGlobalMenu {
	-webkit-transform: translate(0px, 0);
	-ms-transform: translate(0px, 0);
	transform: translate(0px, 0);
	-webkit-transform: translate3d(0px, 0, 0);
	transform: translate3d(0px, 0, 0);
}

#spGlobalMenu a {
	font-family: @openSansfamily;
	font-weight: 600;
}


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

	スライダー ※詳細変更などはslickフォルダの方で
======================================================================================================================================= */
#sliderContent {
	width: 100%;
	overflow: hidden;
	padding: 20px 0 30px;

	.sliderWrap {
		.contentSetPad0;
		position: relative;

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

		@media screen and (min-width: 480px) and (max-width: 768px) {/* === タブレット768pxまで表示 === */
			min-height: 300px;
		}/* @media screen and (min-width: 480px) and (max-width: 768px) END */

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

			インラインテキストボックス
		==================================================================== */
		.innnerText {
			position: absolute;
			bottom: 10%;
			left: 0;
			z-index: 1;
			padding: 15px 0 15px 15px;

			@media screen and (min-width: 540px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
				padding: 20px 0 20px 20px;
			}/* @media screen and (min-width: 540px) and (max-width: 1025px) END */

			@media screen and (min-width: 1026px) {/* === PC表示 === */
				padding: 4% 0 4% 3%;
			}/* @media screen and (min-width: 1026px) END */


			&::before {
				content: "";
				background: url(/cmn/images/slider/mvbg.svg) repeat 0 0;
				background-size: 8px 8px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: -11%;
				width: 90%;
				max-width: 430px;
			}

			p {
				font-family: @openSansfamily;
				font-weight: 800;
				line-height: 1;
				.fadeIn;

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

				&:first-of-type span {
					border-bottom: 2px solid #000;
					padding: 0 0 10px;
					display: inline-block;
				}

				&:nth-of-type(2) {
					-webkit-animation-duration: 2.0s;
					animation-duration: 2.0s;
				}

				&:last-of-type {
					-webkit-animation-duration: 2.5s;
					animation-duration: 2.5s;
				}

				@media screen and (max-width: 539px) {/* === SP・タブレット表示 === */
					&:not(:last-of-type) {
						margin: 0 0 5px;
					}

					&:first-of-type span {
						padding: 0 0 5px;
					}
				}/* @media screen and (max-width: 539px) END */


				@media screen and (max-width: 479px) {/* === SP・タブレット表示 === */
					font-size: 150%;

					&:first-of-type {
						font-size: 130%;
					}
				}/* @media screen and (max-width: 479px) END */

				@media screen and (min-width: 480px) and (max-width: 539px) {/* === タブレット768pxまで表示 === */
					font-size: 150%;

					&:first-of-type {
						font-size: 130%;
					}
				}/* @media screen and (min-width: 480px) and (max-width: 539px) END */

				@media screen and (min-width: 540px) and (max-width: 768px) {/* === タブレット768pxまで表示 === */
					font-size: 190%;

					&:first-of-type {
						font-size: 160%;
					}
				}/* @media screen and (min-width: 540px) and (max-width: 768px) END */

				@media screen and (min-width: 769px) and (max-width: 899px) {/* === タブレット899pxまで表示 === */
					font-size: 250%;

					&:first-of-type {
						font-size: 220%;
					}
				}/* @media screen and (min-width: 769px) and (max-width: 899px) END */

				@media screen and (min-width: 900px) {/* === タブレット900pxから・PC表示 === */
					font-size: 300%;

					&:first-of-type {
						font-size: 230%;
					}
				}/* @media screen and (min-width: 900px) END */
			}
		}

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

			メイン画像
		==================================================================== */
		.sliderDiv {
			width: 100%;
			margin: auto;

			@media screen and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
				background-image: url(/cmn/images/slider/slider01.jpg);
				background-size: cover;
				background-repeat: no-repeat;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: block;
				z-index: 0;
			}/* @media screen and (max-width: 768px) END */

			@media screen and (max-width: 479px) {/* === SP・タブレット表示 === */
				background-position: 60% top;
			}/* @media screen and (max-width: 479px) END */

			@media screen and (min-width: 480px) and (max-width: 768px) {/* === SP・タブレット768pxまで表示 === */
				background-position: center top;
			}/* @media screen and (max-width: 768px) END */
		}// .sliderDiv END
	}
}// #sliderContent END


#lpVisualWrap {
	width: 100%;
	overflow: hidden;
	padding: 20px 0 30px;

	.lpVisual {
		.contentSetPad0;
		position: relative;

		@media screen and (max-width: 479px) {/* === SP・タブレット表示 === */
			a:hover img {
				opacity: 1;
			}
		}/* @media screen and (max-width: 479px) END */
	}
}


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

	Container
======================================================================================================================================= */
#container {
	.contentSetMain;
	margin: 0 auto 0px;

	.clearfix;

	#guideSidebar,
	#sidebar {
		float: left;
		width: 20%;
		max-width: 250px;
		margin: 0 0 70px;

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

		.clearfix;
	}

	#main {
		width: 77%;
		max-width: 1000px;
		float: right;

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

		.clearfix;
	}

	#oneColumnMain {
		width: 100%;
		max-width: 100%;
		display: inline-block;

		.clearfix;
	}

	section.mainContentWrap {
		margin: 0 0 70px;
		position: relative;

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

		.clearfix;
	}
}


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

	パンくずリスト
======================================================================================================================================= */
#breadcrumb {
	margin: 0 0 30px;
	padding: 15px 0;
	background: url(/cmn/images/newarrivalbg.svg) repeat 0 0;
	background-size: 8px 8px;

	.breadcrumbWrap {
		.contentSetMain;
		.ComFlexBox(space-between,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		color: #333;

		& > ul {
			margin-right: auto;
			.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
			max-width: 100%;

			& > li {
				font-size: 12px;
				max-width: 100%;

				&:not(:last-of-type)::after {
					.iconIcomoon(@arrowRightIcon);// 引数にcontentを指定
					font-size: 10px;
					vertical-align: baseline;
					margin: 0 10px;
				}

				a {
					color: @comColorBlue;
				}

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

					&:not(:last-of-type)::after {
						content: "/";
						font-size: 12px;
						vertical-align: baseline;
						margin: 0 10px;
					}
				}
			}
		}
	}
}


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

	Archive側 パンくず
==================================================================== */
body[class*="archive"] #breadcrumb .breadcrumbWrap {
	& > ul {
		width: calc(~"100% - 120px");

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

	.listNum {
		width: 100px;
		text-align: right;

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

		p {
			font-size: 16px;
			font-weight: bold;

			span {
				font-size: 12px;
				font-weight: normal;
				margin: 0 0 0 3px;
			}
		}
	}
}


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

	sidebar
======================================================================================================================================= */
#sidebar section {
	margin: 0 0 30px;

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

	.clearfix;
}


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

	共通タイトル
==================================================================== */
#sidebar h3 {
	.comHLayTextBottomBorder;
}

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

	絞り込み
==================================================================== */
@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
	#sidebar .hideBtnWrap {
		margin: 0 0 0px;

		.detailSearchHideBtn {
			margin: 0 0 40px;
		}

		.detailSearchCloseBtn {
			margin: 0 0 30px;
			display: none;
		}
	}

	#sidebar .hideBtnWrap > div,
	.detailSearchListHide .detailSearchCloseBtn {
		width: 100%;
		border: @comBorderSolid1;
		padding: 5px;
		.transitionCom;
		text-align: center;

		span {
			position: relative;
		}

		& span::before {
			font-size: 14px;
			.iconIcomoon(@arrowBottomIcon);// 引数にcontentを指定
			margin: 1px 0px 0 0;
			position: absolute;
			top: 50%;
			left: -20px;
			line-height: 0;
		}

		&:not(.detailSearchHideBtn) span::before {
			.iconIcomoon(@arrowUpIcon);// 引数にcontentを指定
		}
	}

	.detailSearchListHide {
		display: none;
		margin: 0 0 40px!important;

		.detailSearchCloseBtn {
			margin: 30px 0 0;
		}
	}
}/* @media screen and (max-width: 768px) END */


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

	カテゴリ一覧
==================================================================== */
#sidebar nav {
	margin: 0 0 30px;

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

	.sideNaviSets {
		padding: 10px 5px;
		line-height: 100%;
		border-bottom: @comBorderSolid1;
		.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		&:first-of-type {
			border-top: @comBorderSolid1;
		}
	}

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

		li {
			.sideNaviSets;
			width: 100%;

			@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
				width: 48%;
				margin: 0 1% 0 0;

				&:nth-of-type(2) {
					border-top: @comBorderSolid1;
				}

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

			}/* @media screen and (max-width: 768px) END */
		}

		&:not(.divisionNavi) label {
			display: inline-block;
			max-width: 100%;
		}
	}

	@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
		.divisionNavi li {
			width: auto;
			border: none!important;
		}
	}/* @media screen and (max-width: 768px) END */

	.colorNavi input[type="radio"] + label::before,
	.colorNavi input[type="radio"]:checked + label::before,
	.colorNavi input[type="radio"]:checked + label::after {
		border-radius: 0px;
	}

	.colorNavi input[type="radio"]:checked + label::before {
		background: none!important;
	}

	.colorNavi input[type="radio"] + label.black::before,
	.colorNavi input[type="radio"]:checked + label.black::after {
		background: #4a4a4a;
		background: -moz-linear-gradient(
			left top,
			#575757 0%,
			#4a4a4a);
		background: -webkit-gradient(
			linear, left top, right bottom,
			from(#575757),
			to(#4a4a4a));
	}

	.colorNavi input[type="radio"] + label.brown::before,
	.colorNavi input[type="radio"]:checked  + label.brown::after {
		background: #82571f;
		background: -moz-linear-gradient(
			left top,
			#996625 0%,
			#82571f);
		background: -webkit-gradient(
			linear, left top, right bottom,
			from(#996625),
			to(#82571f));
	}

	.colorNavi input[type="radio"] + label.yellow::before,
	.colorNavi input[type="radio"]:checked  + label.yellow::after {
		background: #d3bd08;
		background: -moz-linear-gradient(
			left top,
			#f9e326 0%,
			#d3bd08);
		background: -webkit-gradient(
			linear, left top, right bottom,
			from(#f9e326),
			to(#d3bd08));
	}

	.colorNavi input[type="radio"] + label.red::before,
	.colorNavi input[type="radio"]:checked  + label.red::after {
		background: #964444;
		background: -moz-linear-gradient(
			left top,
			#b14f50 0%,
			#964444);
		background: -webkit-gradient(
			linear, left top, right bottom,
			from(#b14f50),
			to(#964444));
	}

	.colorNavi input[type="radio"] + label.ash::before,
	.colorNavi input[type="radio"]:checked  + label.ash::after {
		background: #928976;
		background: -moz-linear-gradient(
			left top,
			#aca18b 0%,
			#928976);
		background: -webkit-gradient(
			linear, left top, right bottom,
			from(#aca18b),
			to(#928976));
	}

	.colorNavi input[type="radio"] + label.other::before,
	.colorNavi input[type="radio"]:checked  + label.other::after {
		background: url(/cmn/images/otherBg.svg) repeat 0 0;
		background-size: 14px 14px;
	}

	.resetBtn {
		position: relative;
		text-align: right;
		padding: 10px 0 0;

		input[type="reset"] {
			padding: 5px 10px;
			color: darken(@comColorGray, 20%);
			border: @comBorderSolid1;
			border-radius: 3px;
			background: none;
			.transitionCom;

			&:hover {
				border-color: darken(@comColorGray, 40%);
				color: darken(@comColorGray, 50%);
			}
		}
	}
}


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

	NEW ARRIVAL一覧
==================================================================== */
#sidebar .newarrivalWrap .newarrivalBlock {
	margin: 10px;
	padding: 10px;
	background: #fff;
	position: relative;
	display: inline-block;
	width: calc(~"100% - 20px");

	&::before {
		position: absolute;
		top: -10px;
		bottom: -10px;
		left: -10px;
		right: -10px;
		content: "";
		background: url(/cmn/images/newarrivalbg.svg) repeat 0 0;
		background-size: 8px 8px;
		z-index: -1;
	}

	h3 {
		text-align: center;

		&::before {
			left: 50%;
			margin-left: -6.5%;
		}
	}
}


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

	guideSidebar
======================================================================================================================================= */
.applicationsBrnWrap {
	width: 100%;
	display: inline-block;
	margin: 0 0 30px;
}

#guideSidebar h3 {
	.comHLayTextBottomBorder;
}

#guideSidebar .guideSidebarWrap {
	background: #f7f7f7;

	dl {
		margin: 20px 0;
		padding: 0 20px;
		position: relative;
		display: inline-block;
		width: 100%;

		@media screen and (min-width: 769px) and (max-width: 959px) {/* === タブレット959pxまで表示 === */
			padding: 0 10px;
		}/* @media screen and (min-width: 769px) and (max-width: 959px) END */

		&:not(:last-of-type)::before {
			position: absolute;
			bottom: -20px;
			left: 0px;
			right: 0;
			content: "";
			border-top: 1px solid #e8e8e8;
			border-bottom: 1px solid #fff;
		}

		dt,dd {
			line-height: 1;
			width: 100%;
			display: inline-block;

			span {
				display: inline-block;
				width: 100%;
				line-height: 150%;
				position: relative;
				font-size: 12px;

				a {
					width: auto;
					display: inline-block;
					.hvrUnderlineLeft;
				}
			}
		}

		dt {
			font-weight: bold;

			& span {
				padding: 0 0 0 27px;

				&::before {
					font-size: 170%;
					font-weight: normal;
					margin: -10px 0px 0 0;
					position: absolute;
					top: 50%;
					left: 0px;
					height: 18px;
					width: 22px;
				}
			}
		}

		dd {
			padding: 10px 5px 0 ;

			span:not(:last-of-type) {
				padding: 0 0 5px;
			}
		}

	}
}


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

	バナー一覧 sidebar・main共通
======================================================================================================================================= */
.bannerWrap ul li {
	line-height: 1;

	a {
		display: inline-block;
		width: 100%;
		position: relative;

		.clearfix;
	}
}

.companyBanner ul li a::before {
	border: @comBorderSolid1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
}

#sidebar .bannerWrap ul li {
	width: 100%;
	margin: 0 0 20px;

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

#oneColumnMain .bannerWrap,
#main .bannerWrap {
	margin: 0 0 50px;

	&:first-of-type {
		margin: 0 0 30px;
	}

	.oneColumnBanner {
		margin: 0 0 20px;
	}

	ul li {
		width: 48%;
		float: left;
		.clearfix;

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


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

	Main
======================================================================================================================================= */
/* ====================================================================

	共通タイトル
==================================================================== */
#oneColumnMain > h3,
#main h3 {
	position: relative;
	line-height: 1;
	padding: 0 0 15px;
	margin: 0 0 25px;
	.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
	border-bottom: @comBorderSolid1;

	&::before {
		content: "";
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 35%;
		max-width: 180px;
		height: 3px;
		background: #000;
	}

	span.eng {
		font-family: @openSansfamily;
		font-weight: 600;
		font-size: 20px;
		line-height: 110%;
		margin: 0 20px 0 0;
		position: relative;
		-webkit-flex-grow: 1;/*--- safari（PC）用 ---*/
		flex-grow: 1;

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

	.borderSpan {
		margin: 0 20px 0 0;
		-webkit-flex-grow: 1;/*--- safari（PC）用 ---*/
		flex-grow: 1;

		&::after {
			content: "/";
			display: inline-block;
			font-size: 16px;
			line-height: 1;
			font-weight: 400;
		}
	}

	span.jpn {
		font-size: 11px;
		line-height: 150%;
		margin: 0px 0 0;
		-webkit-flex-grow: 90;/*--- safari（PC）用 ---*/
		flex-grow: 90;
	}
}

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

	共通タイトルレイアウト サイドバー・詳細ページに使用
==================================================================== */
.comHLayTextBottomBorder {
	font-family: @openSansfamily;
	font-weight: 700;
	font-size: 100%;
	position: relative;
	line-height: 1;
	padding: 0 0 10px;
	margin: 0 0 10px;
	width: 100%;

	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 13%;
		max-width: 32px;
		height: 1px;
		background: #000;
	}
}


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

	共通リストタイプ PC：5個ずつ SP：3個ずつ
==================================================================== */
.comListColumn5 {
	.ComFlexBox(flex-start,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
	width: 100%;

	li {
		.hoverSlideAction;
		width: calc(~"(100% - 40px) / 5.001");
		margin: 0 10px 0px 0;

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

			&:nth-last-of-type(n+4) {
				margin-bottom: 10px;
			}

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

		@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
			&:nth-last-of-type(n+6) {
				margin-bottom: 10px;
			}

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

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

	li {
		width: calc(~"(100% - 40px) / 5.001");
		margin: 0 10px 0px 0;

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

			&:nth-last-of-type(n+4) {
				margin-bottom: 10px;
			}

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

		@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
			&:nth-last-of-type(n+6) {
				margin-bottom: 10px;
			}

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


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

	共通リストタイプ PC：7個ずつ SP：3個ずつ
==================================================================== */
.comListColumn7 {
	.ComFlexBox(flex-start,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
	width: 100%;

	li {
		.hoverSlideAction;
		width: calc(~"(100% - 240px) / 7.001");
		margin: 0 40px 0px 0;

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

			&:nth-last-of-type(n+4) {
				margin-bottom: 10px;
			}

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

		@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
			&:nth-last-of-type(n+8) {
				margin-bottom: 10px;
			}

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


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

	Main側 NEW ARRIVAL 一覧
==================================================================== */
#oneColumnMain .newarrivalListWrap ul,
#main .newarrivalListWrap ul {
	.comListColumn5;
	-webkit-flex-flow: row nowrap;/*--- safari（PC）用 ---*/
	flex-flow: row nowrap;

	li {
		margin-bottom: 0px!important;
	}

	@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
		li:nth-of-type(n+4) {
			display: none;
		}
	}/* @media screen and (max-width: 768px) END */
}


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

	Main側 EDITOR'S PICK 一覧
==================================================================== */
#oneColumnMain .editorspickListWrap ul,
#main .editorspickListWrap ul {
	.ComFlexBox(flex-start,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
	width: 100%;

	li {
		width: calc(~"(100% - 3px) / 4");
		margin: 0 1px 0px 0;
		position: relative;
		text-align: center;
		overflow: hidden;

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

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

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

		@media screen and (min-width: 769px) {/* === タブレット769pxから・PC表示 === */
			&:nth-of-type(4n) {
				margin-right: 0;
			}

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

		dl {
			position: absolute;
			z-index: 1;
			left: 0;
			right: 0;
			bottom: 3%;
			padding: 10px 5px;
			background: rgba(255,255,255,0.5);
			text-align: center;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				height: 40px;
				top: -40px;
				background: -moz-linear-gradient(
					top,
					rgba(255,255,255,0.0) 0%,
					rgba(255,255,255,0.5));
				background: -webkit-gradient(
					linear, left top, left bottom,
					from(rgba(255,255,255,0.0)),
					to(rgba(255,255,255,0.5)));
			}

			&::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				height: 40px;
				bottom: -40px;
				background: -moz-linear-gradient(
					top,
					rgba(255,255,255,0.5) 0%,
					rgba(255,255,255,0.0));
				background: -webkit-gradient(
					linear, left top, left bottom,
					from(rgba(255,255,255,0.5)),
					to(rgba(255,255,255,0.0)));
			}

			dt {
				font-size: 14px;
				font-weight: bold;
				line-height: 140%;
				margin: 0 0 5px;

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

			dd {
				font-size: 80%;

				span {
					padding: 0px;
					background: rgba(0,0,0,0.3);
					border-radius: 3px;
					color: #fff;
					display: inline-block;
					margin: auto;
					width: 60px;
				}
			}
		}
	}
}


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

	Main側 RANKING一覧
==================================================================== */
.rankingListWrap ul.tabs {
	display: inline-block;
	width: 100%;
	padding: 0 10px;

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

		a {
			padding: 5px;
			display: inline-block;
			width: 100%;
			border-top: 1px solid #fff;
			border-right: 1px solid #fff;
			border-left: 1px solid #fff;
			text-align: center;

			&.tabactive {
				border-top: @comBorderSolid1;
				border-right: @comBorderSolid1;
				border-left: @comBorderSolid1;
				position: relative;

				&::after {
					position: absolute;
					bottom: -1px;
					left: 0px;
					right: 0px;
					content: "";
					height: 2px;
					display: block;
					background: #fff;
				}
			}
		}
	}
}

.rankingListWrap .tabcontent {
	display:none;
	border-top: @comBorderSolid1;
	width: 100%;
	padding: 20px 0;

	&.tabshow {
		display: inline-block;
	}

	ul {
		.comListColumn5ActionNone;
		-webkit-flex-flow: row nowrap;/*--- safari（PC）用 ---*/
		flex-flow: row nowrap;
		counter-reset: ranking;

		li {
			margin-bottom: 0px!important;

			.rankImg {
				padding: 0 10px;
				margin: 0 0 5px;
				position: relative;

				&::before {
					position: absolute;
					top: -12px;
					left: -2px;
					content: counter(ranking, decimal);
					counter-increment: ranking;
					width: 24px;
					height: 24px;
					line-height: 24px;
					border-radius: 100%;
					text-align: center;
					z-index: 2;
					border: @comBorderSolid1;
					overflow: hidden;
					background: #fff;

					@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/* IE10・11ハック */
						line-height: 28px;
					}
				}
			}

			&:first-of-type .rankImg::before {
				background: #d2af78;
				border-color: #d2af78;
				color: #fff;
			}

			&:nth-of-type(2) .rankImg::before {
				background: #b5b8b9;
				border-color: #b5b8b9;
				color: #fff;
			}

			&:nth-of-type(3) .rankImg::before {
				background: #92573d;
				border-color: #92573d;
				color: #fff;
			}

			h4 {
				font-weight: normal;
				text-align: center;
			}

			a h4:hover {
				opacity: 0.7;
			}
		}

		@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
			li:nth-of-type(n+4) {
				display: none;
			}
		}/* @media screen and (max-width: 768px) END */
	}
}


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

	Main側 商品一覧
==================================================================== */
#oneColumnMain .newsListWrap dl.NewsList,
#main .newsListWrap dl.NewsList {
	border-top: @comBorderDot1;
	.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
	padding: 10px 0;

	&:last-of-type {
		border-bottom: @comBorderDot1;
		margin: 0 0 20px;
	}

	dt {// タイトル
		width: calc(~"100% - 130px");
		order: 2;

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

		a:hover {
			color: @comColorPink;
		}
	}

	dd {// 日付
		width: 130px;
		order: 1;

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

		&::before {
			.iconIcomoon(@arrowRightIcon);// 引数にcontentを指定
			font-size: 10px;
			margin: 0 5px;

			@media screen and (max-width: 479px) {/* === SP縦表示 === */
				.iconIcomoon(@arrowBottomIcon);// 引数にcontentを指定
			}/* @media screen and (max-width: 479px) END */
		}
	}
}


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

	Main側 商品一覧
==================================================================== */
#main .archiveListWrap {
	margin: 0 0 25px;

	ul {
		.comListColumn5;
	}
}


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

	お気に入り
======================================================================================================================================= */
#main .favoriteListWrap {
	margin: 0 0 25px;

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

		& > li {
			width: 100%;
			.ComFlexBox(space-around,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
			border-top: @comBorderSolid1;
			padding: 20px 0;
			position: relative;

			@media screen and (max-width: 479px) {/* === SP縦表示 === */
				-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
				flex-flow: row wrap;
			}/* @media screen and (max-width: 479px) END */

			&:last-of-type {
				border-bottom: @comBorderSolid1;
			}

			.favoriteImg {
				margin: 0 auto 0 0;
				width: 200px;

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

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

				@media screen and (min-width: 480px) and (max-width: 899px) {/* === SP横・タブレット表示 === */
					width: 120px;
				}/* @media screen and (min-width: 480px) and (max-width: 899px) END */
			}

			.favoriteRight {
				width: calc(~"100% - 240px");

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

				@media screen and (min-width: 480px) and (max-width: 899px) {/* === SP横・タブレット表示 === */
					width: calc(~"100% - 140px");
				}/* @media screen and (min-width: 480px) and (max-width: 899px) END */

				h4 {
					margin: 0 0 20px;
					font-size: 14px;
					font-weight: normal;
				}
			}
		}
	}
}


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

	お気に入り・商品詳細 共通
======================================================================================================================================= */
.favoriteListWrap .submitLabel,
.detailInfoWrap .submitLabel {
	margin: auto;
	display: inline-block;
	padding: 0 10px;

	span {
		padding: 0 0 0 30px;

		&::before {
			.iconIcomoon(@cloudIcon);// 引数にcontentを指定
			margin: -11px 10px 0 0;
			font-size: 24px;
			position: absolute;
			top: 50%;
			left: 0;
			width: 25px;
			height: 22px;
			line-height: 1;
		}
	}
}

.favoriteListWrap .dlWrap .submitLabel {
	width: 96%;

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

.detailInfoWrap .dlWrap .submitLabel {
	width: 92%;
}

.detailInfoWrap .individualDlWrap .submitLabel {
	width: 96%;

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


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

	個別ダウンロード
==================================================================== */
.favoriteListWrap .individualDlWrap,
.detailInfoWrap .individualDlWrap {
	border-top: @comBorderSolid1;
	.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
	padding: 15px 0;

	li {
		width: calc(~"100% / 3.001");
		text-align: center;
	}
}

@media screen and (max-width: 1069px) {/* === SP・タブレット表示 === */
	.favoriteListWrap .individualDlWrap li {
		width: 100%;

		&:not(:last-of-type) {
			margin-bottom: 10px;
		}
	}
}/* @media screen and (max-width: 1069px) END */

@media screen and (max-width: 1179px) {/* === SP・タブレット表示 === */
	.detailInfoWrap .individualDlWrap li {
		width: 100%;

		&:not(:last-of-type) {
			margin-bottom: 10px;
		}
	}
}/* @media screen and (max-width: 1179px) END */


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

	一括ダウンロード
==================================================================== */
.favoriteListWrap .dlWrap,
.detailInfoWrap .dlWrap {
	border-top: @comBorderSolid1;
	border-bottom: @comBorderSolid1;
	padding: 15px 0;
	width: 100%;
	position: relative;
	.ComFlexBox(flex-start,center,row,nowrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items

	li {
		width: 80px;
		position: relative;
		padding: 15px 0;
		.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items

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

		&:first-of-type {
			width: calc(~"100% - 80px");

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				content: "";
				width: 1px;
				background: @comColorGray;
			}

			@media screen and (max-width: 479px) {/* === SP縦表示 === */
				letter-spacing: -0.5px;
				width: calc(~"100% - 50px");
			}/* @media screen and (max-width: 479px) END */

			.submitLabel {
				margin: 0 0 10px;
				max-width: 400px;
			}

			.caption {
				padding: 0 20px;
				width: 100%;
				display: inline-block;
				text-align: center;

				span {
					width: 100%;
					font-size: 90%;
					display: inline-block;
				}
			}
		}

		button {
			padding: 0px;

			&::before {
				font-size: 30px;
				.iconIcomoon(@heartLinearIcon);// 引数にcontentを指定
				color: darken(@comColorGray, 10%);
			}

			&.liked::before {
				.iconIcomoon(@heartIcon);// 引数にcontentを指定
				color: @comColorPink;
			}
		}
	}
}

.detailInfoWrap .dlWrap {
	margin: 0 0 30px;
}


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

	アラート クローズボタン
=================================================== */
.jconfirm .jconfirm-box div.jconfirm-closeIcon {
	width: 28px;
	height: 28px;
	z-index: 1;

	&::before {
		.iconIcomoon(@closeIcon);// 引数にcontentを指定
		font-size: 28px !important;
		top: 0px;
		left: 0px;
		width: 28px;
		height: 28px;
		line-height: 1;
		z-index: 0;
	}
}

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

	アラート はい・いいえボタン
=================================================== */
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons {
	.ComFlexBox(space-around,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
	width: 90%;
	margin: auto;

	button {
		width: 48%;
		padding: 10px;
		text-align: center;
		font-size: 100%;
		border: 3px solid #000;
		margin: 0 0 0;
		.transitionCom;

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

		&:hover {
			background: @comColorGray;
		}
	}
}


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

	初めての方へ
======================================================================================================================================= */
#container .welcomeWrap {
	text-align: center;
	max-width: 1070px;
	margin-left: auto!important;
	margin-right: auto!important;

	.clearfix;

	&:not(:first-of-type) {
		padding-top: 80px;

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

		&::before {
			border-top: @comBorderSolid1;
			content: "";
			top: 0;
			left: -100%;
			right: -100%;
			position: absolute;
		}
	}

	& h3 {
		line-height: 1;

		.en {
			font-family: @openSansfamily;
		}
	}

	&:first-of-type h3 {
		font-size: 52px;
		margin: 50px 0 60px;

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

	&:last-of-type h3 {
		font-size: 30px;
		margin: 0 0 70px;
		font-weight: inherit;

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

	.welcomeDesc {
		margin: 0 0 30px;

		span {
			display: inline-block;
			width: 100%;
			font-size: 16px;
			line-height: 240%;
		}
	}

	.welcomeImg {
		padding: 0 0 20px;

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

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

		li {
			width: 30%;
			margin: 0 auto 70px 0px;

			@media screen and (max-width: 479px) {/* === SP縦表示 === */
				width: 48%;
				margin: 0 auto 50px 0px;

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

				&:not(:nth-last-child(n+3)) {
					margin-bottom: 0px;
				}
			}/* @media screen and (max-width: 479px) END */

			@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
				&:nth-of-type(3n) {
					margin-right: 0px;
				}

				&:not(:nth-last-child(n+4)) {
					margin-bottom: 0px;
				}
			}/* @media screen and (min-width: 480px) END */


			.featureImg {
				margin: 0 0 30px;
			}

			h4 {
				font-size: 20px;
				margin: 0 0 25px;
				font-weight: normal;
				line-height: 140%;
			}

			p.featureDesc span {
				display: inline-block;
				width: 100%;
				line-height: 180%;
			}
		}
	}
}


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

	お知らせ 詳細
======================================================================================================================================= */
#container .newsArticleWrap {
	h4 {
		font-size: 16px;
		font-weight: normal;
		margin: 0 0 20px;
	}

	.articleWrap {
		margin: 0 0 10px;
		display: inline-block;
		width: 100%;
	}

	.articleDate {
		margin: 0 0 20px;
		display: inline-block;
		width: 100%;
		text-align: right;
		color: darken(@comColorGray, 35%);
	}
}


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

	LASTEST CHECKED
======================================================================================================================================= */
#lastestChecked {
	border-top: 2px solid #000;
	margin: 0 0 70px;
	display: inline-block;
	width: 100%;

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

	h3 {
		border-bottom: @comBorderSolid1;
		margin: 0 0 30px;
		padding: 10px 0;
		text-align: center;
		font-family: @openSansfamily;
		font-weight: 600;
		font-size: 15px;
	}

	ul {
		.comListColumn7;

		@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
			li:nth-of-type(n+4) {
				display: none;
			}
		}/* @media screen and (max-width: 768px) END */
	}
}


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

	Pager
======================================================================================================================================= */
.mainContentWrap .pagerNavi {
	position: relative;
	margin: 0 0 0px;
	width: 100%;
	height: 36px;
	font-size: 12px;
	.ComFlexBox(space-between,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

	@media screen and (max-width: 899px) {/* === SP・タブレット表示 === */
		.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		height: auto;
	}/* @media screen and (max-width: 899px) END */

	.clearfix;

	&:not(:only-of-type):first-of-type {
		margin: 0 0 20px;
		padding: 0 0 10px;
		border-bottom: @comBorderSolid1;

		.sortUl li.active::before {
			bottom: -14px;

			@media screen and (max-width: 899px) {/* === SP・タブレット表示 === */
				bottom: -5px;
			}/* @media screen and (max-width: 899px) END */
		}
	}

	&:only-of-type,
	&:last-of-type {
		border-top: @comBorderSolid1;
		padding: 10px 0 0px;

		.sortUl li.active::before {
			top: -14px;

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

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

		人気順・新着順
	==================================================================== */
	&.noPageLink .sortUl {
		width: auto!important;
		margin: 0 auto 0 0!important;

		@media screen and (max-width: 899px) {/* === SP・タブレット表示 === */
			margin: 0 20px 0 0!important;
		}/* @media screen and (max-width: 899px) END */
	}

	.sortUl {
		margin: 0 auto 0 0;

		@media screen and (max-width: 899px) {/* === SP・タブレット表示 === */
			width: 100%;
			text-align: center;
			margin: 0 0 15px;
		}/* @media screen and (max-width: 899px) END */

		li {
			display: inline-block;
			width: auto;
			position: relative;

			&:not(:last-of-type)::after {
				width: 2px;
				height: 14px;
				margin: -7px 0 0;
				position: absolute;
				top: 50%;
				right: -1px;
				content: "";
				background: @comColorGray;
			}

			&.active::before {
				position: absolute;
				left: 0;
				content: "";
				display: block;
				width: 100%;
				height: 3px;
				background: #000;
			}

			@-moz-document url-prefix() {// firefoxハック
				&.active::before {
					bottom: -15px;
				}
			}

			a, span {
				padding: 0 20px;
				width: auto;

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

				@media screen and (min-width: 769px) and (max-width: 799px) {/* === タブレット799pxまで表示 === */
					padding: 0 5px;
				}/* @media screen and (min-width: 769px) and (max-width: 799px) END */

				@media screen and (min-width: 800px) and (max-width: 853px) {/* === タブレット853pxまで表示 === */
					padding: 0 10px;
				}/* @media screen and (min-width: 800px) and (max-width: 853px) END */

				@media screen and (min-width: 854px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
					padding: 0 15px;
				}/* @media screen and (min-width: 854px) and (max-width: 1025px) END */
			}

			a {
				color: @comColorBlue;
			}
		}
	}


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

		ナンバーページャー・表示件数
	==================================================================== */
	.numNavi {
		.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		margin: 0 20px 0 0;

		@media screen and (max-width: 899px) {/* === SP・タブレット表示 === */
			.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		}/* @media screen and (max-width: 899px) END */

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

		li {
			width: auto;
			height: 26px;
			vertical-align: middle;
			margin: 0 3px 0 0;
			letter-spacing: 0;

			@media screen and (max-width: 899px) {/* === SP・タブレット表示 === */
				margin: 0px 3px 0 0;

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

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

			@media screen and (min-width: 769px) and (max-width: 899px) {/* === タブレット899pxまで表示 === */
				letter-spacing: -0.5px;
			}/* @media screen and (min-width: 769px) and (max-width: 899px) END */

			a, span:not(.spOnlyNone) {
				border: @comBorderSolid1;
				padding: 0 8px;
				min-width: 26px;
				text-align: center;
				height: 26px;
				line-height: 26px;
				display: inline-block;
				position: relative;

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

				@media screen and (min-width: 769px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
					padding: 0 5px;
				}/* @media screen and (min-width: 769px) and (max-width: 1025px) END */
			}

			& span:not(.spOnlyNone) {
				background: @comColorGray;
			}

			&.prev a::before,
			&.next a::after {
				font-size: 10px;
				color: #333;
				.transitionCom;
				line-height: 1;
				position: absolute;
				top: 50%;
				margin: -4px 0 0;
				width: 10px;
				height: 10px;

				@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
					margin: -7px 0 0;; /* IE10（\9なしでIE11にも適用） */
				}
			}

			&.prev a {
				padding-left: 15px;

				&::before {
					.iconIcomoon(@arrowLeftIcon);// 引数にcontentを指定
					left: 3px;

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

			&.next a {
				padding-right: 15px;

				&::after {
					.iconIcomoon(@arrowRightIcon);// 引数にcontentを指定
					right: 3px;

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

			&:hover a {
				background: @comColorBlue;
				color: #fff;

				&::before,&::after {
					color: #fff;
					.transitionCom;
				}
			}
		}// li END
	}

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

		表示件数 設定
	==================================================================== */
	ul li.pullDown {
		position: relative;
		width: 50px;
		margin: 0 0 0 0px;

		select {
			font-size: 12px;
			height: 26px;
			width: 100%;
			padding: 0 0 0 5px;
		}

		@-moz-document url-prefix() {// firefoxハック
			select {
				padding: 0;
			}
		}
	}
}

.newsListWrap .pagerNavi {
	-webkit-justify-content: center;
	justify-content: center;
}

.pagerArticle {
	margin: 0px 0 0;
	padding: 0 5px;

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

		@media screen and (max-width: 479px) {/* === SP縦表示 === */
			-webkit-flex-flow: row wrap;
			flex-flow: row wrap;
		}/* @media screen and (max-width: 479px) END */

		li {
			width: 32%;
			text-align: center;
			position: relative;
			.ComFlexBox(center,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

			&:not(.next) {
				margin-right:auto ;
			}

			@media screen and (max-width: 479px) {/* === SP縦表示 === */
				-webkit-flex-flow: row wrap;
				flex-flow: row wrap;
				-webkit-order: 2;
				order: 2;
				width: 100%;

				&.prev,&.next {
					-webkit-order: 1;
					order: 1;
					width: 50%;
					margin-bottom: 10px;
					padding: 0 10px;
				}
			}/* @media screen and (max-width: 479px) END */

			&.prev::before,&.next::after {
				font-size: 12px;
				position: absolute;
				top: 50%;
				line-height: 0;
			}

			&.prev {
				text-align: left;
				padding-left: 20px;

				&::before {
					.iconIcomoon(@arrowLeftIcon);// 引数にcontent指定
					left: 0;
				}
			}

			&.next {
				text-align: right;
				padding-right: 20px;

				&::after {
					.iconIcomoon(@arrowRightIcon);// 引数にcontent指定
					right: 0;
				}
			}

			a {
				display: inline-block;
				max-width: 100%;
				font-size: 90%;
			}
		}
	}

}// .pagerArticle END


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

	商品詳細
======================================================================================================================================= */
.detailWrap {
	.ComFlexBox(space-around,center,row,nowrap,flex-start);// 引数にjustify,align-content,direction,wrap,align-items

	@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
	}/* @media screen and (max-width: 768px) END */


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

		画像
	==================================================================== */
	.detailImgWrap {
		width: calc(~"100% / 2 - 30px");
		max-width: 620px;
		margin: 0 auto 0 0;
		position: relative;

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

		.imageWrap {
			width: 100%;
			position: relative;
			padding: 0 30px;
			margin: 0 0 20px;

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

				img {
					max-height: 250px;
				}
			}/* @media screen and (max-width: 768px) END */

			figure {
				display: none;
				max-width: 100%;
				width: 100%;
				text-align: center;
			}
		}

		a,img {
			display: inline-block;
			width: auto;
			max-width: 100%;
			margin: auto;
			text-align: center;
		}

		.caution {
			color: @comColorPink;
			text-align: center;
		}
	}

	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/* IE10・11ハック */
		.detailImgWrap img:not(:target) {
			width: 100%;
			max-width: 100%;
		}
	}


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

		説明部分
	==================================================================== */
	.detailInfoWrap {
		width: 50%;

		@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
			width: 100%;
			max-width: 100%;
			margin: 0 0 0px;
			.ComFlexBox(flex-start,center,row,wrap,flex-start);// 引数にjustify,align-content,direction,wrap,align-items
		}/* @media screen and (max-width: 768px) END */

		h3 {
			font-weight: normal;
			font-size: 20px;
			margin: 0 0 30px;

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

		h4 {
			.comHLayTextBottomBorder;

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

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

			カテゴリ
		=================================================== */
		.cateList {
			margin: 0 0 20px;
			.ComFlexBox(flex-start,center,row,wrap,flex-start);// 引数にjustify,align-content,direction,wrap,align-items

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

			.clearfix;

			li {
				width: auto;
				line-height: 1;
				margin: 0 10px 10px 0;

				a {
					line-height: 130%;
					display: inline-block;
					width: auto;
					overflow: hidden;
					padding: 5px;
					border-radius: 3px;
					border: @comBorderSolid1;
					background: #f7f7f7;

					&:hover {
						background: lighten(@comColorPink, 30%);
					}
				}

				@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/* IE10・11ハック */
					a:not(:target) {
						padding-bottom: 0px;
					}
				}
			}
		}

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

			サムネイル
		=================================================== */
		.thumWrap {
			margin: 0 0 30px;
			width: 100%;
			display: inline-block;

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

			.clearfix;

			li {
				width: 110px!important;
				display: inline-block;
				margin: 0 10px 0 0;
				overflow: hidden;
				position: relative;
				float: none!important;

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

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

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

				label[for*="thumList0"] {
					width: 110px!important;
					height: 110px!important;
					position: relative;
					display: inline-block;
					overflow: hidden;
					margin: 0 0 5px;
					cursor: pointer;

					@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
						width: 90px!important;
						height: 90px!important;
					}/* @media screen and (max-width: 768px) END */

					@media screen and (max-width: 479px) {/* === SP縦表示 === */
						width: 60px!important;
						height: 60px!important;
					}/* @media screen and (max-width: 479px) END */

					span {
						position: absolute;
						width: 100%;
						top: 0px;
						left: 0;
						right: 0;
						bottom: -100px;
						text-align: center;

						img {
							margin: auto;
						}
					}
				}

				.type {
					text-align: center;
					display: inline-block;
					width: 100%;
					font-family: @openSansfamily;
				}
			}
		}

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

			説明文
		=================================================== */
		p.photoDesc {
			line-height: 170%;
			margin: 0 0 30px;

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


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

			ダウンロードボタン
		=================================================== */
		form {
			width: 100%;

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

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

			スタイル・おすすめタイプ 共通
		=================================================== */
		.comStyleTypeLay {
			padding: 0px 0;
			width: 100%;

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

			dl {
				width: 100%;
				border-bottom: @comBorderDot1;
				.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

				dt,dd {
					padding: 10px 5px;
					.clearfix;
				}

				dt {
					width: 100px;

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

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

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


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

			スタイル
		=================================================== */
		.styleWrap {
			margin: 0 0 30px;
			.comStyleTypeLay;

			dd span {
				margin: 0 10px 0 0;
				position: relative;

				&:not(:only-of-type)::before {
					content: "・";
					color: @comColorPink;
				}
			}
		}

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

			おすすめタイプ
		=================================================== */
		.typeWrap {
			margin: 0 0 0px;
			.comStyleTypeLay;

			dl dd span {
				padding: 5px 10px;
				background: @comColorGray;
				line-height: 1;
				display: inline-block;
				width: 70px;
				text-align: center;
				color: #fff;

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

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

				&.check {
					background: @comColorPink;
				}

				@media screen and (max-width: 479px) {/* === SP縦表示 === */
					&[class*="face"]:not(:nth-of-type(n+4)) {
						margin-bottom: 5px;
					}
				}/* @media screen and (max-width: 479px) END */

				@media screen and (min-width: 769px) and (max-width: 975px) {/* === SP横・タブレット表示 === */
					&[class*="face"]:not(:nth-of-type(n+4)) {
						margin-bottom: 5px;
					}
				}/* @media screen and (min-width: 769px) and (max-width: 975px) END */

				&[class*="face"]::before {
					content: "";
					width: 100%;
					height: 55px;
					display: inline-block;

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

				&.face01::before {
					background: url(../images/face1.svg) no-repeat center top/ 100% auto;
				}

				&.face02::before {
					background: url(../images/face2.svg) no-repeat center top/ 100% auto;
				}

				&.face03::before {
					background: url(../images/face3.svg) no-repeat center top/ 100% auto;
				}

				&.face04::before {
					background: url(../images/face4.svg) no-repeat center top/ 100% auto;
				}

				&.face05::before {
					background: url(../images/face5.svg) no-repeat center top/ 100% auto;
				}
			}
		}


	}// .detailInfoWrap END
}// .detailWrap ERND


#thumList01:checked ~ .detailImgWrap .imageWrap figure:nth-of-type(1) {
	-webkit-animation: slidFadeIn .7s;
	animation: slidFadeIn .7s;
	display: inline-block;
}
#thumList02:checked ~ .detailImgWrap .imageWrap figure:nth-of-type(2) {
	-webkit-animation: slidFadeIn .7s;
	animation: slidFadeIn .7s;
	display: inline-block;
}
#thumList03:checked ~ .detailImgWrap .imageWrap figure:nth-of-type(3) {
	-webkit-animation: slidFadeIn .7s;
	animation: slidFadeIn .7s;
	display: inline-block;
}

@-webkit-keyframes slidFadeIn {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes slidFadeIn {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
}

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

	ALSO VIEWINGL一覧
==================================================================== */
#oneColumnMain .alsoListWrap {
	margin: 0 0 70px;

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

	ul {
		.comListColumn7;
		-webkit-flex-flow: row nowrap;/*--- safari（PC）用 ---*/
		flex-flow: row nowrap;

		li {
			margin-bottom: 0px!important;
		}

		@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
			li:nth-of-type(4),li:nth-of-type(5),li:nth-of-type(6),li:nth-of-type(7) {
				display: none;
			}
		}/* @media screen and (max-width: 768px) END */
	}
}


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

	Footer
======================================================================================================================================= */
/* ====================================================================

	Footer カテゴリ一覧・ロゴ・ナビ
==================================================================== */
#footerNaviWrap {
	padding: 30px 0;
	background: #eee;

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

	& > section {
		.contentSetPad0;
	}

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

		親カテゴリ SP・タブレット768px以下のみ
	=================================================== */
	.footerSpCate {
		.ComFlexBox(space-between,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		position: relative;
		order: 2;
		width: 100%;
		padding: 20px 0 0;

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

			li {
				width: calc(~"100% / 3.001");
				text-align: center;
				position: relative;

				@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
					&.current a {
						color: @comColorPink;
					}
				}/* @media screen and (max-width: 768px) END */

				a {
					font-family: @openSansfamily;
					font-weight: 800;
					vertical-align: middle;
					opacity: 1;
					.hvrFloatShadow;

					&:hover {
						color: @comColorPink;
					}
				}
			}
		}
	}


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

		カテゴリ一覧 PC・タブレット769px以上のみ
	=================================================== */
	.footerPcCate {
		.ComFlexBox(flex-start,center,row,nowrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
		padding: 0 0 30px;
		position: relative;

		&::before {
			position: absolute;
			bottom: 0;
			left: 0px;
			right: 0;
			content: "";
			border-top: 1px solid #d8d8d8;
			border-bottom: 1px solid #fff;
		}

		dl {
			width: calc(~"(100% - 20px) / 2");
			padding: 10px 20px;
			position: relative;
			.ComFlexBox(flex-start,flex-start,row,wrap,baseline);// 引数にjustify,align-content,direction,wrap,align-items

			@media screen and (min-width: 769px) and (max-width: 854px) {/* === タブレット854pxまで表示 === */
				width: calc(~"(100% - 10px) / 2");
				padding: 10px;
			}/* @media screen and (min-width: 769px) and (max-width: 854px) END */

			&::before {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0px;
				content: "";
				border-left: 1px solid #d8d8d8;
				border-right: 1px solid #fff;
			}

			dt {
				width: 100%;
				font-family: @openSansfamily;
				font-weight: 800;
				margin: 0 0 15px;
				line-height: 1;

				&.current a {
					color: @comColorPink;
				}
			}

			dd {
				width: 48%;

				&:first-of-type {
					margin: 0 4% 0 0;
				}

				@media screen and (min-width: 769px) and (max-width: 854px) {/* === タブレット854pxまで表示 === */
					width: 50%;

					&:first-of-type {
						margin: 0 0% 0 0;
					}
				}/* @media screen and (min-width: 769px) and (max-width: 854px) END */

				h4 {
					font-size: 13px;

					@media screen and (min-width: 769px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
						margin: 0 0 5px;
					}/* @media screen and (min-width: 769px) and (max-width: 1025px) END */
				}

				ul li {
					position: relative;
					padding: 0 0 0 10px;

					@media screen and (min-width: 769px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
						margin: 0 0 5px;
					}/* @media screen and (min-width: 769px) and (max-width: 1025px) END */

					&::before {
						content: "-";
						position: absolute;
						top: 50%;
						left: 0;
						margin: -12px 0 0 0;
					}
				}

				ul li a {
					.hvrRideCovering;

					span {
						line-height: 110%;
					}

					&:hover span {
						color: #eee;
					}
				}
			}
		}
	}

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

		ロゴ・サイトインフォメニュー・SNSボタン
	=================================================== */
	.footerIntroduction {
		.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		padding: 30px 0 0px;
		position: relative;

		@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
			-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
			flex-flow: row wrap;
			padding: 20px 5px 0px 5px;
		}/* @media screen and (max-width: 768px) END */

		.footerLogo {
			width: 21%;
			max-width: 270px;
			text-align: left;
			margin-right: auto;

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

			@media screen and (min-width: 769px) and (max-width: 899px) {/* === タブレット899pxまで表示 === */
				width: 18%;
			}/* @media screen and (min-width: 769px) and (max-width: 899px) END */

			@media screen and (min-width: 769px) and (max-width: 1299px) {/* === タブレット1299pxまで表示 === */
				padding-left: 10px;
			}/* @media screen and (min-width: 769px) and (max-width: 1299px) END */
		}

		.navIntroduction {
			width: 70%;
			max-width: 705px;
			position: relative;

			@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
				order: 0;
				width: 100%;
				max-width: 100%;
				padding: 0px 0 20px;

				&::before {
					position: absolute;
					top: -1px;
					left: 0px;
					right: 0;
					content: "";
					border-top: 1px solid #d8d8d8;
					border-bottom: 1px solid #fff;
				}
			}/* @media screen and (max-width: 768px) END */

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

				@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
					-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
					flex-flow: row wrap;
				}/* @media screen and (max-width: 768px) END */

				@media screen and (min-width: 769px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
					-webkit-justify-content: flex-end;/*--- safari（PC）用 ---*/
					justify-content: flex-end;
				}/* @media screen and (min-width: 769px) and (max-width: 1025px) END */

				li {
					margin: 0 auto 0 0;
					position: relative;

					@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
						width: 50%;
						margin: 0 0px 0 0;
						text-align: center;

						&::before {
							position: absolute;
							bottom: -1px;
							left: 0px;
							right: 0;
							content: "";
							border-top: 1px solid #d8d8d8;
							border-bottom: 1px solid #fff;
						}

						&:nth-of-type(odd)::after {
							position: absolute;
							top: 0px;
							bottom: 0px;
							right: 0;
							content: "";
							border-right: 1px solid #d8d8d8;
						}

						&:nth-of-type(even)::after {
							position: absolute;
							top: 0px;
							bottom: 0px;
							left: 0;
							content: "";
							border-left: 1px solid #fff;
						}

						&:nth-of-type(2n+1):last-of-type {
							width: 100%;
						}

						a {
							padding: 10px 0;
							display: block;
							width: 100%;
						}
					}/* @media screen and (max-width: 768px) END */

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

					@media screen and (min-width: 854px) and (max-width: 899px) {/* === タブレット899pxまで表示 === */
						margin: 0 15px 0 0;
					}/* @media screen and (min-width: 854px) and (max-width: 899px) END */

					@media screen and (min-width: 900px) and (max-width: 1025px) {/* === タブレット1025pxまで表示 === */
						margin: 0 20px 0 0;
					}/* @media screen and (min-width: 900px) and (max-width: 1025px) END */

					a {
						font-size: 13px;
						max-width: 100%;

						&:hover {
							color: @comColorPink;
						}
					}
				}
			}
		}

		.footerSns {
			width: 70px;

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

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

				li a::before {
					font-size: 26px;
				}

				li a:hover {
					.transitionCom;
					color: @comColorPink;
				}

				li:first-of-type a::before {
					.iconIcomoon(@facebookCircleIcon);// 引数にcontentを指定
				}

				li:last-of-type a::before {
					.iconIcomoon(@twitterCircleIcon);// 引数にcontentを指定
				}
			}
		}
	}
}


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

	コピーライト・サブメニュー（プライバシーポリシー・免責事項・特定商取引法に関する表示・会社概要）
==================================================================== */
#footerBottomWrap {
	background: #000;
	padding: 30px 0;

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

	.footerBottomContainer {
		.contentSetPad0;
		color: #fff;
		.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
			-webkit-justify-content: center;/*--- safari（PC）用 ---*/
			justify-content: center;
			-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
			flex-flow: row wrap;
		}/* @media screen and (max-width: 768px) END */

		@media screen and (min-width: 769px) and (max-width: 1215px) {/* === タブレット1215pxまで表示 === */
			-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
			flex-flow: row wrap;
		}/* @media screen and (min-width: 769px) and (max-width: 1215px) END */

		.infoNavi {
			width: 50%;
			font-size: 13px;

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

			@media screen and (min-width: 769px) and (max-width: 1215px) {/* === タブレット1215pxまで表示 === */
				width: 100%;
				margin: 0 0 20px;
			}/* @media screen and (min-width: 769px) and (max-width: 1215px) END */

			@media screen and (min-width: 769px) and (max-width: 1299px) {/* === タブレット1299pxまで表示 === */
				padding-left: 10px;
			}/* @media screen and (min-width: 769px) and (max-width: 1299px) END */

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

				@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
					-webkit-justify-content: center;/*--- safari（PC）用 ---*/
					justify-content: center;
					-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
					flex-flow: row wrap;
				}/* @media screen and (max-width: 768px) END */

				li {
					margin: 0 30px 0 0;

					@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
						width: 100%;
						margin: 0 0px 0 0;
						border-bottom: 1px solid #424242;
					}/* @media screen and (max-width: 768px) END */

					a {
						color: #fff;

						@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
							padding: 10px 0;
							display: block;
							text-align: center;
						}/* @media screen and (max-width: 768px) END */
					}
				}
			}
		}

		.copyRight {
			.ComFlexBox(flex-end,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
			width: 50%;
			font-size: 13px;

			@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
				width: 100%;
				-webkit-justify-content: center;/*--- safari（PC）用 ---*/
				justify-content: center;
			}/* @media screen and (max-width: 768px) END */

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

			@media screen and (min-width: 769px) and (max-width: 1299px) {/* === タブレット1299pxまで表示 === */
				padding-right: 10px;
			}/* @media screen and (min-width: 769px) and (max-width: 1299px) END */

			p {
				width: 100%;
				text-align: right;

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

			p:first-of-type {
				font-size: 11px;

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

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

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

			p:last-of-type {
				font-family: @openSansfamily;
				font-weight: 600;
			}
		}
	}
}


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

	GUIDE LOGIN
======================================================================================================================================= */
.guideDl,.loginDl {
	width: 100%;
	display: inline-block;

	&:not(:only-of-type) {
		margin: 0 0 50px;
	}

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

	& > dt {
		text-align: center;
		font-size: 20px;
		border-bottom: @comBorderSolid1;
		padding: 0 5px 20px;

		&[class*="mainteDt"] span,
		&[class*="guideDt"] span,
		&[class*="loginDt"] span {
			padding: 0 0 0 50px;
			position: relative;

			&::before {
				font-size: 170%;
				font-weight: normal;
				margin: -30px 0px 0 0;
				position: absolute;
				top: 50%;
				left: 0px;
			}
		}
	}
}

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

	よくあるご質問
==================================================================== */
dl.guideDl dd.faqList {
	border-left: @comBorderSolid1;
	border-right: @comBorderSolid1;
	border-bottom: @comBorderSolid1;

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

		& > dt, & > dd p {
			padding: 20px;
			box-sizing: content-box;
		}

		& > dt:not(:first-of-type) {
			border-top: @comBorderSolid1;
		}

		& > dt {
			width: calc(~"100% - 40px");
			display: inline-block;

			span {
				position: relative;
				display: inline-block;
				width: 100%;
				padding-left: 34px;
				padding-right: 20px;

				&::before {
					position: absolute;
					top: -1px;
					left: 0;
					content: "Q.";
					display: inline-block;
					width: 24px;
					color: @comColorPink;
					font-size: 20px;
					font-family: @openSansfamily;
					font-weight: 600;
					line-height: 1;
				}

				&::after {
					position: absolute;
					top: 50%;
					right: 0;
					margin: -10px 0 0;
					.iconIcomoon(@arrowBottomIcon);// 引数にcontentを指定
				}
			}

			&.open span::after {
				.iconIcomoon(@arrowUpIcon);// 引数にcontentを指定
			}
		}

		& > dd {
			position: relative;

			p {
				padding-top: 0;
				width: calc(~"100% - 40px");
			}

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

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

	ご利用案内項目から探す
==================================================================== */
dl.guideDl dd.guideList {
	padding: 30px 0 0;
	.ComFlexBox(space-around,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items

	@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
		&::after{// dlの数が5つなのでafterで架空ボックスの生成
			content:"";
			display: block;
			width:30%;
		}
	}/* @media screen and (min-width: 480px) END */

	dl {
		width: 30%;

		@media screen and (max-width: 479px) {/* === SP縦表示 === */
			&:not(:last-of-type) {
				margin-bottom: 50px;
			}

			width: 100%;
		}/* @media screen and (max-width: 479px) END */

		@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
			&:not(:nth-of-type(n+4)) {
				margin-bottom: 50px;
			}

			&:not(:nth-of-type(3n)) {
				margin-right: auto;
			}
		}/* @media screen and (min-width: 480px) END */

		dt,dd {
			line-height: 1;
			width: 100%;
			display: inline-block;

			span {
				display: inline-block;
				width: 100%;
				line-height: 150%;
				position: relative;

				a {
					width: auto;
					display: inline-block;
					.hvrUnderlineLeft;
				}
			}
		}

		dt {
			position: relative;
			margin: 0 0 20px;

			& span {
				padding: 0 0 0 40px;
				font-size: 18px;

				&::before {
					font-size: 170%;
					font-weight: normal;
					margin: -15px 0px 0 0;
					position: absolute;
					top: 50%;
					left: 0px;
				}
			}
		}

		dd {
			padding: 0px 10px 0;

			span:not(:last-of-type) {
				padding: 0 0 5px;
			}
		}
	}
}


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

	各項目のテキストエリア 「写真について」など
==================================================================== */
dl.guideDl dd.aboutList dt[id*="anchor"] {
	position: relative;
	padding: 0 0 0 45px;

	&::before {
		.iconIcomoon(@balloonIcon);// 引数にcontentを指定
		transform: scale(-1, 1);
		position: absolute;
		top: 50%;
		left: 0;
		line-height: 0;
		font-size: 34px;
		color: #666;
	}

	&::after {
		top: 44%;
		line-height: 0;
		font-size: 18px;
		left: 8px;
		position: absolute;
	}
}
	.guide-photo dl.guideDl dd.aboutList dt#anchor01::after,
	.guide-photo dl.guideDl dd.aboutList dt#anchor03::after {
		.iconIcomoon(@photographyIcon);// 引数にcontentを指定
	}

	.guide-photo dl.guideDl dd.aboutList dt#anchor02::after {
		.iconIcomoon(@cloudIcon);// 引数にcontentを指定
	}

	.guide-photo dl.guideDl dd.aboutList dt#anchor04::after {
		.iconIcomoon(@searchIcon);// 引数にcontentを指定
		font-size: 14px;
		left: 9px;
	}

	.guide-member dl.guideDl dd.aboutList dt#anchor01::after {
		.iconIcomoon(@memberIcon);// 引数にcontentを指定
	}

	.guide-member dl.guideDl dd.aboutList dt#anchor02::after {
		.iconIcomoon(@loginIcon);// 引数にcontentを指定
	}

dl.guideDl dd.aboutList {
	padding: 30px 0 0;

	.disp {
		margin: 0 0 50px;
	}

	& > dl > dt {
		font-size: 18px;
		margin: 0 0 20px;
	}

	& > dl > dd {
		margin: 0 0 50px;

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

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

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

		ul li {
			position: relative;
		}

		.termList {
			counter-reset: number 0;

			& > li {
				padding: 0px 0 0px 20px;
				margin: 0 0 20px;

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

				&::before {
					position: absolute;
					content: counter(number)".";
					counter-increment: number 1;
					margin: 0 10px 0 0;
					left: 0;
				}
			}
		}

		.upperNum {
			counter-reset: number 0;
			padding: 10px 0 0;

			& > li {
				padding: 0px 0 0px 35px;
				margin: 0 0 5px;

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

				&::before {
					position: absolute;
					content: "（"counter(number)"）";
					counter-increment: number 1;
					margin: 0 10px 0 0;
					left: 0;
				}
			}
		}

		.innerNum {
			counter-reset: number 0;
			padding: 10px 0 0;

			& > li {
				padding: 0px 0 0px 25px;
				margin: 0 0 5px;

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

				&::before {
					position: absolute;
					content: counter(number);
					counter-increment: number 1;
					margin: 0 0px 0 0;
					left: 0;
					top: calc(~"50% - 10px");
					border-radius: 50%;
					border: 1px solid #444;
					width: 16px;
					height: 16px;
					font-size: 10px;
					line-height: 0;
					.ComFlexBox(center,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
				}
			}
		}

		.upperAlpha {
			counter-reset: alpha;
			padding: 10px 20px;

			li {
				padding: 5px 0;

				&::before {
					content: counter(alpha,upper-alpha)".";
					counter-increment: alpha;
					margin: 0 10px 0 0;
				}
			}
		}

		.faqList li {
			width: 100%;
			display: inline-block;
			padding: 0;

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

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

				& > dt {
					width: 100%;
					display: inline-block;
					margin: 0 0 10px;
					font-size: 16px;

					span {
						position: relative;
						display: inline-block;
						width: 100%;
						padding-left: 30px;
						padding-right: 20px;

						&::before {
							position: absolute;
							top: -1px;
							left: 0;
							content: "Q.";
							display: inline-block;
							width: 24px;
							color: @comColorPink;
							font-size: 20px;
							font-family: @openSansfamily;
							font-weight: 600;
							line-height: 1;
						}
					}
				}

				& > dd {
					position: relative;
					margin-bottom: 10px;

					span {
						display: inline-block;
						width: 100%;
						line-height: 180%;
					}
				}
			}
		}// faqList END
	}
}


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

	免責事項・特定商取引法に関する表示
==================================================================== */
dl.guideDl dd.lawList,
dl.guideDl dd.companyList {
	padding: 30px 0 0;

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

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

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

dl.guideDl dd.companyList dl {
	width: 100%;
	max-width: 820px;
	margin: auto auto 30px;
	border-top: @comBorderSolid1;
	.ComFlexBox(space-around,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items

	dt,dd {
		display: inline-block;
		padding: 15px 0;
		border-bottom: @comBorderSolid1;
	}

	dt {
		width: 150px;
		margin: 0 auto 0 0;

		@media screen and (max-width: 479px) {/* === SP縦表示 === */
			text-align: left;
			width: 100%;
			border-bottom: none;
			padding-bottom: 0;
		}/* @media screen and (max-width: 479px) END */

		@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
			text-align: right;
		}/* @media screen and (min-width: 480px) END */
	}

	dd {
		text-align: left;
		width: calc(~"100% - 150px");

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

		@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
			padding-left: 30px;
		}/* @media screen and (min-width: 480px) END */

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


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

	メンテナンス
==================================================================== */
dl.guideDl dd.mainteDd {
	padding: 30px 0 0;
	text-align: center;

	span {
		position: relative;
		display: inline-block;
		width: 100%;
		line-height: 200%;
	}
}


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

	お問い合わせ・会員登録・loginList 共通
==================================================================== */
dl.guideDl dd.contactList,
dl.guideDl dd.registrationList,
dl.loginDl dd.loginList {
	padding: 30px 0 0;

	& > dl > dt {
		font-size: 18px;
		margin: 0 0 20px;
	}

	&.loginList > dl > dt {
		text-align: center;

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

	@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
		&.loginList > dl > dd .formDl dt,
		&.registrationList > dl > dd .formDl dt,
		&.contactList > dl > dd .formDl dt:not(:nth-of-type(2)) {
			.ComFlexBox(flex-end,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		}

		&:not(.loginList) > dl > dd .formDl dt:nth-of-type(2) {
			padding-top: 15px;
		}
	}/* @media screen and (min-width: 480px) END */

	&.loginList > dl > dd:not(:last-of-type) {
		margin: 0 0 10px;
	}

	&.loginList > dl > dd .accountList {
		display: block;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}

	& > dl > dd {
		position: relative;

		.contactDesc,.registrationDesc,.loginDesc {
			margin: 0 0 30px;

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

				&.caution {
					color: @comColorPink;
				}
			}

			&.loginDesc > span {
				text-align: center;

				.mailIcon {
					margin: 0 1px 0 0;

					&::before {
						.iconIcomoon(@contactIcon);// 引数にcontentを指定
						margin: 0 3px 0 0;
					}
				}
			}
		}

		.formDl,.createAccountDl {
			width: 100%;
			max-width: 820px;
			margin: auto auto 30px;
			border-top: @comBorderSolid1;
			.ComFlexBox(space-around,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items

			dt,dd {
				display: inline-block;
				padding: 10px 0;
				border-bottom: @comBorderSolid1;
			}

			dt {
				width: 150px;
				margin: 0 auto 0 0;

				@media screen and (max-width: 479px) {/* === SP縦表示 === */
					text-align: left;
					width: 100%;
					border-bottom: none;
					padding-bottom: 0;
				}/* @media screen and (max-width: 479px) END */

				@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
					text-align: right;
				}/* @media screen and (min-width: 480px) END */

				.required {
					padding: 0 0px 0 0;
					position: relative;

					&::after {
						color: @comColorPink;
						content: "*";
						margin: 0 0 0 0px;
						position: absolute;
						top: 3px;
						right: -10px;

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

			dd {
				text-align: left;
				width: calc(~"100% - 150px");

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

				@media screen and (min-width: 480px) {/* === SP・タブレット・PC表示 === */
					padding-left: 30px;
				}/* @media screen and (min-width: 480px) END */

				textarea {
					height: 150px;
				}

				.hitBottom {
					margin: 5px 0 0;
				}

				.hitBottom, .setHit {
					font-size: 12px;
					color: @comColorPink;
				}

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

					.postalCode {
						margin: 0 3px 0 0;
					}

					input {
						margin: 0 10px 0 0;
					}

					.setHit {
						margin: 0;
					}
				}

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

					バリデーション系 部分
				==================================================================== */
				.error {
					margin: 0 0 5px;
					color: @comColorRed;
					display: inline-block;
					width: 100%;
					min-height: 22px;
					font-size: 12px;

					&:empty {
						display: none!important;
					}

					&::before {
						.iconIcomoon(@closeIcon);// 引数にcontent
						font-size: 10px;
						margin: 0px 3px 0 0;
					}
				}

				.errorArea:not(select):not(:focus) {
					background: lighten(@comColorRed, 40%)!important;
				}
			}
		}

		.backBtn {
			text-align: center;

			a {
				padding: 0 15px;
				.comBtnLay;
			}
		}
	}
}

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

	パスワード強度 部分
==================================================================== */
.pwdIndicator {
	margin: 0px 0 3px;
	padding: 0px 5px 0px;
	border-radius: 3px;
	font-size: 12px;
	text-align: left;
	.transitionCom;
	width: auto;
	color: #666;

	&.very-weak, &.not-match {// パスワード強度 とても弱い
		color: @comColorPink;
	}

	&.weak {// パスワード強度 弱い
		color: darken(@comColorYellow, 25%);
	}

	&.average {// パスワード強度 平均
		color: @comColorOrange;
	}

	&.strong {// パスワード強度 強い
		color: @comColorBlue;
	}

	&.very-strong {// パスワード強度 とても強い
		color: darken(@comColorGreen, 5%);
	}
}


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

	ホバーアクション
======================================================================================================================================= */
/* ===================================================

	文字拡大・影
=================================================== */
.hvrFloatShadow {
	box-shadow: 0 0 1px transparent;

	position: relative;
	transform: perspective(1px) translateZ(0px);
	transition-duration: 0.3s;
	transition-property: transform;

	&::before {
		background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%);
		background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.15) 0%, transparent 80%) repeat scroll 0 0;
		content: "";
		height: 10px;
		left: 5%;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 100%;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform, opacity;
		transition-property: transform, opacity;
		width: 90%;
		z-index: -1;
	}

	&:hover, &:focus, &:active {
		-webkit-transform: scale(1.1) translateY(-5px);
		transform: scale(1.1) translateY(-5px);
		display: inline-block;
	}

	&:hover::before, &:focus::before, &:active::before {
		opacity: 1;
		-webkit-transform: translateY(5px);
		transform: translateY(5px);
	}
}

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

	中央からボーダー
=================================================== */
.hvrUnderlineLay {
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		z-index: -1;
		height: 2px;
		.transitionCom;
	}
}

.hvrUnderlineCenter {
	.hvrUnderlineLay;

	&::before {
		left: 50%;
		right: 50%;
		bottom: 0;
		-webkit-transition-property: left, right;
		transition-property: left, right;

	}

	&:hover::before, &:focus::before, &:active::before {
		left: 0;
		right: 0;
		background: @comColorPink;
	}
}

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

	左からボーダー
=================================================== */
.hvrUnderlineLeft {
	.hvrUnderlineLay;

	&::before {
		left: 0;
		right: 100%;
		bottom: 0;
		-webkit-transition-property: right;
		transition-property: right;
	}

	&:hover::before, &:focus::before, &:active::before {
		right: 0;
		background: @comColorPink;
	}
}

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

	hover時にかぶさる ※hover時に元テキストのカラーを個別する必要がある
=================================================== */
.hvrRideCovering {
	text-shadow: 0 0 1px rgba(111,134,134,0.3);

	&::before {
		color: @comColorPink;
		font-weight: bold;
		content: attr(data-hover);
		position: absolute;
		opacity: 0;
		text-shadow: 0 0 1px rgba(255,255,255,0.3);
		-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
		-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
		transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
		-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
		-moz-transition: -moz-transform 0.3s, opacity 0.3s;
		transition: transform 0.3s, opacity 0.3s;
		pointer-events: none;
	}

	&:hover::before,
	&:focus::before {
		-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
		-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
		transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
		opacity: 1;
	}
}


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

	上下斜めからスライドしてテキストフェードイン
==================================================================== */
.hoverSlideAction {
	overflow: hidden;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	position: relative;

	&::before,
	&::after {
		background: rgba(0,0,0,0.6);
		width: 300%;
		height: 200%;
		position: absolute;
		content: '';
		opacity: 0.5;
		-webkit-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
		z-index: 1;
	}

	&::after {
		-webkit-transform: skew(-45deg) translateX(-150%);
		transform: skew(-45deg) translateX(-150%);
		top: 0;
		left: 0;
	}

	img {
		width: 100%;
	}

	&::before {
		right: 0;
		bottom: 0;
		-webkit-transform: skew(-45deg) translateX(150%);
		transform: skew(-45deg) translateX(150%);
	}

	.hoverBlock {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		z-index: 2;
		opacity: 0;
		overflow: hidden;
		color: #fff;
		vertical-align: middle;
		height: 100%;
		width: 100%;
		.ComFlexBox(center,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

		h4 {
			font-size: 12px;
			font-weight: normal;
			padding: 10px;
			word-wrap : break-word;
			width: 100%;

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

	.favoriteBtn {
		position: absolute;
		right: 0;
		bottom: 0;
		opacity: 0;
		z-index: 10;

		&::before {
			z-index: -1;
			content: "";
			background: rgba(0,0,0,0.5);
			-webkit-transform: skew(-45deg);
			transform: skew(-45deg);
			width: 60px;
			height: 60px;
			position: absolute;
			top: -20px;
			right: -30px;
		}

		button {
			padding: 3px;

			&::before {
				font-size: 16px;
				.iconIcomoon(@heartLinearIcon);// 引数にcontentを指定
				color: #fff;
			}

			&.liked::before {
				.iconIcomoon(@heartIcon);// 引数にcontentを指定
				color: @comColorPink;
			}
		}
	}

	&:hover {
		&::after {
			-webkit-transform: skew(-45deg) translateX(-50%);
			transform: skew(-45deg) translateX(-50%);
		}

		&::before {
			-webkit-transform: skew(-45deg) translateX(50%);
			transform: skew(-45deg) translateX(50%);
		}

		.hoverBlock,.favoriteBtn {
			-webkit-transition-delay: 0.3s;
			transition-delay: 0.3s;
			opacity: 1;
		}

		a img {
			opacity: 1;
		}
	}
}


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

	ローディング
======================================================================================================================================= */
#loadingOverlay {
	background: #fff;
	bottom: 0;
	left: 0;
	opacity: 1;
	position: fixed;
	right: 0;
	top: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	z-index: 99999;

	#loadingSpinner {
		color: @comColorPink;
		font-size: 1rem;
		margin: auto;
		position: absolute;
		text-indent: -9999em;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-animation-delay: -0.16s;
		animation-delay: -0.16s;
		top: 50%;
		left: 50%;

		&,&::before,&::after{
			border-radius: 50%;
			width: 15px;
			height: 15px;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation: load7 1.8s infinite ease-in-out;
			animation: load7 1.8s infinite ease-in-out;
		}

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

		&::before {
			left: -3.5em;
			-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}

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

@-webkit-keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}
@keyframes load7 {
	0%,
	80%,
	100% {
		box-shadow: 0 2.5em 0 -1.3em;
	}
	40% {
		box-shadow: 0 2.5em 0 0;
	}
}


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

	アクションCSS
======================================================================================================================================= */
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	visibility: visible !important;
}

@keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}