@charset "utf-8";
/* =======================================================================================================================================

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

@baseFontFamily: "メイリオ","meiryo","ＭＳ Ｐゴシック","MS P Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ丸ゴシック Pro W3","Hiragino maru Gothic Pro","Helvetica","sans-serif";

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

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

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

	共通カラー用
==================================================================== */
@baseColor: #5e5e5e;// フォント・リンク色に仕様
@baseBg: #f0f2f4;

@colorMain: #68629d;

@colorWhite: #fff;

@colorGrayDark: #5e5e5e;
@colorGrayLight: #ededed;
@colorGray: #c6c6c6;

@colorBlue: #6d88b0;
@colorBlueDeep: #4e525f;
@colorBlueLight: #6dbfef;

@colorYellow: #fdc825;

@colorRed: #dc4646;
@colorRedLight: #ff7676;
@colorPink: #dc4689;

@colorGreen: #44c2a6;

@creatEditInputBg: #f7f8f8;


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

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

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

	共通グラデーション用
==================================================================== */
.bgGradient {
	background: -moz-linear-gradient(
		top,
		@colorMain 0%,
		#5a4d44);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(@colorMain),
		to(#5a4d44));
}

.spHeaderGradient {
	background: -moz-linear-gradient(
		left top,
		#272a33 0%,
		#232429 30%,
		#2e3038);
	background: -webkit-gradient(
		linear, left top, right bottom,
		from(#272a33),
		color-stop(0.30, #232429),
		to(#2e3038));
}


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

	共通ボーダー用
==================================================================== */
@borderDot1Gray: 1px dotted @colorGray;
@borderDot2Gray: 2px dotted @colorGray;
@borderDot1GrayLight: 1px dotted @colorGrayLight;
@borderDot2GrayLight: 2px dotted @colorGrayLight;

@borderSolid1Gray: 1px solid @colorGray;
@borderSolid2Gray: 2px solid @colorGray;
@borderSolid1GrayLight: 1px solid @colorGrayLight;
@borderSolid2GrayLight: 2px solid @colorGrayLight;


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

	共通ボーダーラディアス用
==================================================================== */
@borderRadius5: 5px;


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

	共通ボックスシャドウ・テキストシャドウ用
==================================================================== */
@boxshadowMain: 0 3px 5px rgba(0, 0, 0, 0.1);
@boxShadowInsetDown: inset 0px -3px 5px rgba(0,0,0,0.1);
@boxShadowInsetUp: inset 0px 3px 5px rgba(0,0,0,0.1);
@textShadow: 1px 1px 0px rgba(000,000,000,0.2);


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

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

// Homeアイコン
@homeIcon: "\e928";

// ペンアイコン
@penIcon: "\e915";

// ごみ箱アイコン
@trashIcon: "\e91f";

// Humanアイコン
@humanIcon: "\e933";

// keyアイコン
@keyIcon: "\e932";

// 設定アイコン
@settingIcon: "\e936";

// カメラアイコン
@cameraIcon: "\e906";

// 虫眼鏡アイコン
@searchIcon: "\e935";

// プラスアイコン
@plusIcon: "\e90a";

// サークルX 閉じるアイコン
@closeIcon: "\e912";

// サークルマイナス 閉じるアイコン
@minusIcon: "\e90f";

// プレビューアイコン
@previewIcon: "\e937";

// チェックボックスアイコン
@checkOffIcon: "\e91a";
@checkOnIcon: "\e919";

// ラジオボタンアイコン
@radioOffIcon: "\e91c";
@radioOnIcon: "\e91b";

// アローアイコン
@arrowDown: "\e929";
@arrowLeft: "\e92a";
@arrowRight: "\e92b";
@arrowUp: "\e92c";

// ログアウト アイコン
@logoutIcon: "\e912";

// ユーザーアイコン
@userIcon: "\e903";

// カテゴリアイコン
@cateIcon: "\e904";

// カテゴリアイコン
@modelIcon: "\e901";

// 商品アイコン
@itemIcon: "\e905";

@informationIcon: "\e939";

// MENアイコン
@menIcon: "\e93d";
// WOMANアイコン
@womanIcon: "\e93c";

// MEN並び替えアイコン
@menSortIcon: "\e93e";
// WOMAN並び替えアイコン
@womanSortIcon: "\e93f";

// おすすめアイコン
@recoIcon: "\e930";

// 代理店管理アイコン
@agencyIcon: "\e941";

// 企業管理アイコン
@companyIcon: "\e940";

// 申し込み管理アイコン
@applicationIcon: "\e942";


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

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

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


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

	共通ボタン設定
======================================================================================================================================= */

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

	四角 角丸ボタン 共通設定
==================================================================== */
.baseBtnCom {
	padding: 0px 15px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	border-radius: @borderRadius5;
	height: 34px;
	line-height: 34px;
}

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

	四角 角丸ボタン
==================================================================== */
.baseBtn(@bgColor,@fontSize) {
	font-size: @fontSize;
	color: @colorWhite!important;
	background: @bgColor;
	cursor: pointer;
	.baseBtnCom;
}


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

	新規作成ボタン
==================================================================== */
.createBtn {
	.baseBtn(@colorBlueDeep,100%);
	padding: 0px 15px 0px;
	letter-spacing: 2px;
	text-align: center;
	height: 34px;
	line-height: 36px;
}

/*
* 追記
*/
.selectedBtn {
	background: @colorRed;
}


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

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

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

*:focus {
	outline: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	outline: none;
	vertical-align: baseline;
	font-family: @baseFontFamily;
}

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

html {
	position: relative;
}

body {
	line-break: strict;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	word-wrap : break-word;
	overflow-wrap : break-word;
	word-break: break-all;
	position: relative;
	letter-spacing: 0.5px;
	color: @baseColor;
	-webkit-text-size-adjust: 100%;
	background: @baseBg;
}

html,body {
	width: 100%;
	min-height: 100vh;

	&::after {
		clear: both;
		height: 0;
		line-height: 0;
		display: block;
		content: "";
		visibility: hidden;
		overflow: hidden;
		font-size: 0;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	line-height: 130%;
	font-size: 100%;
}

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

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

img,
a img {
	border: 0;
}

a,
a:link,
a:active,
a:visited {
	color: @baseColor;
	text-decoration: none;
	outline: 0;
	.transitionCom;
	cursor: pointer;
}

#container a,
#container a:link,
#container a:active,
#container a:visited {
	color: @colorMain;
}

a:hover {
	opacity: 0.7;
}

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


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

	form系
==================================================================== */

input, textarea, select {
	cursor: pointer;
	padding: 5px;
	font-family: @baseFontFamily;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
}

input, select {
	vertical-align: middle;
}

textarea {
	padding: 10px;
}

select {
	border: @borderSolid1Gray;
	width: auto;
	position: relative;
	height: 34px;
	outline: none;
	padding: 5px 20px 5px 5px;
	border-radius: 0;
	background: url(../images/arrowDown.png) no-repeat right 5px center / 10px auto;

	option {
		padding: 3px;
	}
}

select::-ms-expand {// IE10用
	display: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="date"], textarea {
	background: #fff;
	border: @borderSolid1Gray;
	color: @baseColor;
	font-size: 100%;

	&:focus {
		background: #fcfbf6;
	}
}

input[type="text"], input[type="password"], input[type="email"], input[type="search"] {
	height: 34px;
	line-height: 130%;
	padding: 5px 10px;
}

textarea {
	padding: 10px;
}

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

input[type="checkbox"], input[type="radio"] {
	cursor: pointer;
	opacity: 0;
	outline: medium none;
	position: absolute;
	z-index: 10;
	display: none;

	& + label {
		cursor: pointer;
		display: inline-block;
		line-height: 0;
		padding: 0 0 0 25px;
		vertical-align: middle;
		position: relative;
		font-family: @baseFontFamily;

		&::before {
			font-size: 140%;
			position: absolute;
			left: 0;
			top: 0%;
			color: @colorGray;
		}
	}

	&:checked + label::before {
		color: @colorRedLight;
	}
}

.submitLabel {
	position: relative;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	.transitionCom;
	font-family: @baseFontFamily;

	&:hover {
		opacity: 0.7;
	}

	input {
		display: none;
	}
}

.searchLabel {
	border-top: @borderSolid1Gray;
	border-right: @borderSolid1Gray;
	border-bottom: @borderSolid1Gray;

	width: 30px;
	height: 34px;

	&::before {
		.iconFont(@searchIcon);
		font-size: 150%;
		line-height: 34px;
		text-align: center;
		width: 30px;
	}

	&:hover {
		opacity: 0.7;
	}

	input {
		display: none;
	}
}

.submitLabel,.searchLabel {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	.transitionCom;
	position: relative;

	input[type="button"], input[type="reset"], input[type="submit"] {
		text-indent: -999em;
		position: absolute;
		top: 0;
		left: 0;
		border: none;
		background: none;
	}
}

input[type="checkbox"] + label::before {
	.iconFont(@checkOffIcon);// 引数にcontent指定
	width: 20px;
}

input[type="checkbox"]:checked + label::before {
	.iconFont(@checkOnIcon);// 引数にcontent指定
}

input[type="radio"] + label::before {
	.iconFont(@radioOffIcon);// 引数にcontent指定
}

input[type="radio"]:checked + label::before {
	.iconFont(@radioOnIcon);// 引数にcontent指定
}

.disNone {
	display: none!important;
}

.disInlinelock {
	display: inline-block;
}


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

	ベースブロック
==================================================================== */

#wrap {
	position: relative;
	display: block;
	background: @baseBg;
	padding: 0 0px;
	overflow-y: auto;
	min-height: calc(~"100vh - 60px");

	.fixedNavi & {
		padding-top: 60px;
	}

	@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
		width: calc(~"100% - 25vw");
		margin: 0 0px 0;
		min-height: calc(~"100vh - 70px");

		.fixedNavi & {
			padding-top: 70px;
		}
	}/* @media screen and (min-width: 769px) END */

	@media screen and (min-width: 1026px) {/* === PC表示 === */
		margin: 0 0px 0px;
		width: calc(~"100% - 260px");
	}/* @media screen and (min-width: 1026px) END */

	.mm-opened & {
		margin: 0;
		.transitionCom;

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

	&::after {
		clear: both;
		height: 0;
		line-height: 0;
		display: block;
		content: "";
		visibility: hidden;
		overflow: hidden;
		font-size: 0;
	}
}

#container {
	width: 100%;
	padding: 0 10px 0;
	margin: 0 auto 50px;

	.clearfix;

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

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


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

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


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

	Login
======================================================================================================================================= */
.login-login,
.login-forgot_pass,
.login-new_pass {
	background: url(../images/loginBg.jpg) no-repeat fixed center 0;
	background-size: 100% 100%;
	color: @colorWhite;
	position: relative;
	padding: 5vh 0 0;


	.loginArea {
		width: auto;
		height: auto;
		max-width: 440px;
		padding: 10px;
		margin: auto;

		.clearfix;

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

			共通 部分
		==================================================================== */
		section {
			margin: 0 0 30px;
			text-align: center;
			position: relative;
			display: inline-block;
			width: 100%;

			&.submitArea {
				margin: 0px 0 50px;
				padding: 20px 0 0;
			}

			.clearfix;


			a {
				color: @colorWhite;
			}
		}

		input[type="checkbox"] + label::before,
		input[type="checkbox"]:checked + label::before {
			color: @colorWhite;
		}

		input[type="text"], input[type="password"] {
			width: 100%;
			background: none;
			border: none;
			border-radius: 0;
			display: inline-block;
			float: left;
			color: @colorWhite;
		}

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

			ロゴ 部分
		==================================================================== */
		h1 {
			margin: 0 auto 50px;
			width: 70%;
			text-align: center;
		}

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

			ログインメッセージ 部分
		==================================================================== */
		h2 {
			text-align: center;
			margin: 0 auto 30px;
		}

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

			エラー 部分
		==================================================================== */
		.errorMess {
			margin: 0 0 20px;
			text-align: center;
			color: #f6ff00;
		}

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

			ID・パスワード 部分
		==================================================================== */
		.idArea,.passArea {
			padding: 0 0px 0 25px;
			border-bottom: 1px solid #fff;
			text-align: left;

			&::before {
				position: absolute;
				top: 15%;
				left: 1%;
				font-size: 150%;
			}
		}

		.idArea::before {
			.iconFont(@humanIcon);// 引数にcontent指定
		}

		.passArea::before {
			.iconFont(@keyIcon);// 引数にcontent指定
		}

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

			パスワードを忘れた方はこちら 部分
		==================================================================== */
		.forgetArea {
			font-size: 90%;

			a::after {
				.iconFont(@arrowRight);// 引数にcontent指定
				margin: 0 0 0 0px;
				font-size: 150%;
			}
		}

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

			Submit 部分
		==================================================================== */
		.submitArea {
			.submitLabel {
				width: 80%;
				height: 36px;
				border-radius: 18px;
				line-height: 36px;
				border: 1px solid @colorWhite;
			}
		}
	}// .loginArea END

	@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
		padding: 10% 0 0;

		.loginArea .saveArea, .loginArea .forgetArea {
			width: 49%;
			float: left;
			.clearfix;
			text-align: left;
		}

		.loginArea .forgetArea {
			float: right;
			line-height: 150%;
			text-align: right;
		}
	}/* @media screen and (min-width: 769px) END */
}


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

	Header
======================================================================================================================================= */
header {
	padding: 10px;
	.spHeaderGradient;
	position: relative;
	z-index: 10;
	height: 50px;
	.clearfix;

	@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
		height: 70px;
		background: @baseBg;
		padding: 0;
		.ComFlexBox(space-around,center,row,nowrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
	}/* @media screen and (min-width: 769px) END */

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

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

		h1.adminLogo {
			width: 260px;
			margin: 0 20px 0 0;
			background: @colorMain;
			text-align: center;
			.ComFlexBox(center,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

			a {
				width: 100%;
			}

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

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

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

			img {
				max-width: 70%;
				display: inline-block;

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

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

			Slidbarボタン 部分
		==================================================================== */
		.menuBtnWrap {
			width: 40px;

			@media screen and (max-width: 768px) {/* === SP・タブレット表示 === */
				position: absolute;
				top: 50%;
				left: 15px;
				height: 40px;
				margin: -20px 0 0;
			}/* @media screen and (max-width: 768px) END */

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

			.menuBtn {
				background: @colorMain;
				position: relative;
				border-radius: 3px;
				width: 40px;
				height: 40px;
				.transitionCom;

				&:hover {
					opacity: 1;
				}
			}
		}
	}

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

		ヘッダーナビ 部分
	==================================================================== */
	.headerNavi {
		width: 140px;
		margin: 0 20px 0 0;

		ul {
			display: inline-block;
			width: auto;
			height: 40px;

			li {
				width: auto;
				float: left;
				margin: 0px 30px 0 0;
				line-height: 40px;

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

				a {
					padding: 0;
					display: inline-block;
					line-height: 0;
				}

				.previewIcon {
					&::before {
						.iconFont(@previewIcon);// 引数にcontent指定
						font-size: 260%;
					}
				}
			}

			@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
				margin: 15px 0 0;

				li {
					margin: 0px 10px 0 0;
					letter-spacing: 0px;
					font-size: 92%;
				}
			}/* @media screen and (min-width: 769px) END */

			@media screen and (min-width: 900px) {/* === PC・タブレット表示 === */
				li {
					margin: 0px 15px 0 0;
					letter-spacing: 0.5px;
					font-size: 100%;
				}
			}/* @media screen and (min-width: 900px) END */

			@media screen and (min-width: 1026px) {/* === PC表示 === */
				li {
					margin: 0px 30px 0 0;
				}
			}/* @media screen and (min-width: 1026px) END */
		}
	}

	.fixedNavi & {
		position: fixed;
		z-index: 100;
		width: 100%;
		top: 0;
		right: 0;
		left: 0;
		width: auto;
		height: auto;
		box-shadow: @boxshadowMain;

		@media screen and (min-width: 769px) {/* === PC表示 === */
			height: 70px;
			padding: 0 0px 0 0;
		}/* @media screen and (min-width: 769px) END */
	}
}

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

	mmenuメニューの開閉ボタン
==================================================================== */
header .headerLogoWrap .menuBtnWrap .menuBtn .menuBtnIcon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 2px;
	margin: -1px 0 0 -15px;
	background: #fff;
	.transitionCom;

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

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

	&::after{
		margin-top: 8px;
	}

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

		background: none;

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

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

		&::after {
			transform: rotate(-135deg);
			-webkit-transform: rotate(-135deg);
		}
	}/* @media screen and (min-width: 769px) END */
}

.mm-opened header .headerLogoWrap .menuBtnWrap .menuBtn .menuBtnIcon {
	background: #fff;

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

	&::after{
		margin-top: 8px;
	}

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

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

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

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

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

		&::after {
			transform: rotate(-135deg);
			-webkit-transform: rotate(-135deg);
		}
	}/* @media screen and (max-width: 768px) END */
}


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

	メインタイトル
======================================================================================================================================= */

#mainTitle {
	padding: 20px 10px;
	margin: 0 0 20px;
	background: @colorWhite;
	width: 100%;
	border-top: @borderSolid1GrayLight;
	border-bottom: @borderSolid1GrayLight;
	.clearfix;

	h2 {
		font-size: 140%;
	}

	@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
		padding: 50px 50px;
		margin: 0 0 40px;

		h2 {
			font-size: 200%;
		}
	}/* @media screen and (min-width: 769px) END */
}

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

	Slidbar
======================================================================================================================================= */
@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
	#mm-blocker {
		display: none!important;
	}
}/* @media screen and (min-width: 769px) END */

#sideMenu {
	overflow-x: hidden;
	width: 280px;

	@media screen and (min-width: 480px) {/* === SP横表示 === */
		width: 45vw;
	}/* @media screen and (min-width: 480px) END */

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

	@media screen and (min-width: 1026px) {/* === PC表示 === */
		width: 260px;
	}/* @media screen and (min-width: 1026px) END */

	ul {
		position: relative;

		li:last-child {
			margin: 0 0 80px;
		}
	}// ul END

	.mm-panel .mm-listview li a span.linkText {
		opacity: 0.5;
	}

	.mm-panel .mm-listview li a:hover,
	.mm-panel .mm-listview li a:hover span.linkText,
	.mm-panel .mm-listview li a.current span.linkText,
	.mm-arrow:hover, .mm-next:hover, .mm-prev:hover {
		opacity: 1!important;
	}

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

		Slidbar 部分
	==================================================================== */

	/* ===================================================
		アイコン 部分
	=================================================== */
	#mm-0 li {
		a.current {
			border-left: 3px solid @colorMain;
		}

		a::before {
			margin: -2px 10px 0 3px;
			font-size: 18px;
		}

		.topIcon::before {
			.iconFont(@homeIcon);// 引数にcontent指定
		}

		.userIcon::before {
			.iconFont(@userIcon);// 引数にcontent指定
		}

		.cateIcon::before {
			.iconFont(@cateIcon);// 引数にcontent指定
		}

		.modelIcon::before {
			.iconFont(@modelIcon);// 引数にcontent指定
		}

		.newsIcon::before {
			.iconFont(@penIcon);// 引数にcontent指定
		}

		.mediaIcon::before {
			.iconFont(@cameraIcon);// 引数にcontent指定
		}

		.itemIcon::before {
			.iconFont(@itemIcon);// 引数にcontent指定
		}

		.logoutIcon::before {
			.iconFont(@logoutIcon);// 引数にcontent指定
		}

		.informationIcon::before {
			.iconFont(@informationIcon);// 引数にcontent指定
		}

		.recoIcon::before {
			.iconFont(@recoIcon);// 引数にcontent指定
		}

		.menSortIcon::before {
			.iconFont(@menSortIcon);// 引数にcontent指定
		}

		.womanSortIcon::before {
			.iconFont(@womanSortIcon);// 引数にcontent指定
		}

		.agencyIcon::before {
			.iconFont(@agencyIcon);// 引数にcontent指定
		}

		.companyIcon::before {
			.iconFont(@companyIcon);// 引数にcontent指定
		}

		.applicationIcon::before {
			.iconFont(@applicationIcon);// 引数にcontent指定
		}
	}// #mm-0 li END


	/* ===================================================
		ページネーション 部分
	=================================================== */
	.mm-arrow::after, .mm-next::after, .mm-prev::before {
		display: inline-block;
		margin: auto;
		padding: 10px 0;
		width: 100%;
		text-align: center;
		font-size: 140%;
	}

	.mm-prev::before {
		.iconFont(@arrowLeft);// 引数にcontent指定
	}

	.mm-arrow::after, .mm-next::after {
		.iconFont(@arrowRight);// 引数にcontent指定
	}
}


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

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

	.copyright {
		font-size: 90%;
		text-align: right;
		box-shadow: 0px -1px 0px @colorWhite,0px -2px 0px #d0d6dd;
		margin: 0px 10px;
		padding: 20px 0;

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


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

	共通コンテンツ設定
======================================================================================================================================= */
.comContentWrap {
	width: 100%;
	padding: 0px;
	margin: 0 auto 0px;
	border: @borderSolid1GrayLight;
	background: @colorWhite;
	display: inline-block;

	.clearfix;

	& > h3 {
		padding: 20px;
		border-bottom: @borderSolid1GrayLight;
		font-size: 130%;
	}

	.noItme, .contentInner {
		padding: 20px;
		position: relative;
		width: 100%;
		display: inline-block;

		.clearfix;

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


.comDlLay {
	width: 100%;
	border-top: @borderSolid1GrayLight;
	padding: 10px 0;

	@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
		.ComFlexBox(flex-start,center,row,nowrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
	}/* @media screen and (min-width: 769px) END */

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

	& > dt, & > dd {
		.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
		padding: 10px;

		&:not(dt) {
			border-left: @borderDot1Gray;

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

		@media screen and (max-width: 768px) {/* === SP・タブレット768px表示 === */
			-webkit-justify-content: flex-start;
			justify-content: flex-start;
			width: 100%!important;
			text-align: left;

			&:not(dd) {
				border-bottom: @borderDot1Gray;
			}
		}/* @media screen and (max-width: 768px) END */
	}

}


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

	各一覧 設定
======================================================================================================================================= */
.summaryWrap {
	.comContentWrap;

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

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

		.clearfix;

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

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

			li {
				margin: 0 0 0 auto;

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

				&:last-of-type {
					.ComFlexBox(flex-start,center,row,nowrap,center);// 引数にjustify,align-content,direction,wrap,align-items

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

				input[type="search"] {
					width: calc(~"100% - 34px");
					max-width: 190px;
					border-right: none;
					display: inline-block;
				}

				.searchLabel {
					display: inline-block;
					margin: 0 0px 0 0;
				}

				a:not(:last-child) {
					margin-right: 10px;
				}
			}
		}
	}// summaryHeader END

	.contentInner > dl {
		.comDlLay;// 共通DL

		@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
			& > dt > span, & > dd > span {
				margin: auto;
			}
		}/* @media screen and (min-width: 769px) END */

		&:nth-of-type(even) {
			background: lighten(@colorGrayLight, 5%);
		}

		& > dt, & > dd {
			.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
			padding: 10px;

			@media screen and (max-width: 768px) {/* === SP・タブレット768px表示 === */
				-webkit-justify-content: flex-start;
				justify-content: flex-start;
				width: 100%!important;
				text-align: left;

				&:not(dd) {
					border-bottom: @borderDot1Gray;
				}
			}/* @media screen and (max-width: 768px) END */
		}

		& > dt {
			width: 40%;

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

		& > dd {
			width: 30%;

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

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

			.thumImg img {
				max-width: 150px;
				width: 100%;
				display: inline-block;
			}

			&.iconDd span {
				margin: auto;
			}

			&.iconDd li {
				width: calc(~"100% / 3.0001");
				min-width: 58px;
				max-width: 80px;
				text-align: center;
				display: inline-block;
				position: relative;

				.iconDdSets {
					text-align: center;
					display: inline-block;
					padding: 0px 0;
					font-size: 11px;

					&::before {
						display: inline-block;
						vertical-align: middle;
						margin: 0 0px 0 0;
						font-size: 24px;
						width: 100%;
					}

					&.editIcon:before {
						.iconFont(@penIcon);// 引数にcontent指定
					}

					&.deleteIcon:before {
						.iconFont(@trashIcon);// 引数にcontent指定
					}

					&.passwordIcon:before {
						.iconFont(@keyIcon);// 引数にcontent指定
					}
				}

				label.deleteLabel {
					position: relative;
					display: inline-block;
					width: 100%;

					&:hover {
						opacity: 0.7;
					}

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

					span {
						.iconDdSets;
						color: @colorMain;
					}
				}

				a {
					.iconDdSets;
				}
			}

			&:not(.iconDd) ul {
				padding: 10px 0 0;

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

				&:first-of-type {
					border-bottom: @borderDot1Gray;
					padding: 0px 0 10px;

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

				li {
					width: 100%;
					padding: 10px 0;

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

					@media screen and (min-width: 769px) {/* === PC・タブレット769px表示 === */
						&:not(:only-of-type) {
							width: 50%;

							&:first-of-type {
								border-right: @borderDot1Gray;
							}
						}
					}/* @media screen and (min-width: 769px) END */
				}
			}
		}// & > dd END


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

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

				dt {
					width: 100px;
					color: @colorMain;
				}

				dd {
					width: calc(~"100% - 110px");
				}
			}/* @media screen and (max-width: 768px) END */
		}// dl.innerDl END
	}// .contentInner > dl END

	.statusDisplay dd span {
		border-radius: 3px;
		border: 1px solid @colorGray;
		padding: 5px;
		font-size: 12px;
		margin: auto;

		&.male {
			color: @colorGreen;
			border-color: @colorGreen;
		}

		&.female {
			color: @colorPink;
			border-color: @colorPink;
		}
	}
}

.listNumber {
	margin: 0 0 10px;
	display: inline-block;
}

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

	ダッシュボード 設定
==================================================================== */
#dashboardSection {
	table {
		border-spacing: 0;
    	border-collapse: collapse;
		th {
			background-color: @colorGrayLight;
			padding: 10px;
			border: 1px solid @colorGray;
		}
		td {
			padding: 10px;
			border: 1px solid @colorGray;
		}
	}
}

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

	商品一覧 設定
==================================================================== */
#productSection.summaryWrap .summaryHeader ul li:first-of-type {
	font-size: 0;

	span {
		display: inline-block;
		font-size: 14px;

		a {
			margin-right: 10px;

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


@media screen and (max-width: 529px) {/* === SP・タブレット表示 === */
	#productSection.summaryWrap .summaryHeader ul li:last-of-type {
		width: 100%;
		margin-top: 10px;
	}
}/* @media screen and (max-width: 529px) END */

@media screen and (min-width: 530px) and (max-width: 799px) {/* === SP・タブレット表示 === */
	#productSection.summaryWrap .summaryHeader ul li:last-of-type {
		max-width: 200px;
	}
}/* @media screen and (min-width: 530px) and (max-width: 799px) END */

@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
	#productSection .contentInner > dl {
		& > dt {
			width: calc(~"100% - (50% + 100px)");
		}

		& > dd:first-of-type {
			width: 25%;
		}

		& > dd:nth-of-type(2) {
			width: 100px;
		}

		& > dd.iconDd {
			width: 25%;
		}
	}
}/* @media screen and (min-width: 769px) END */


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

	商品カテゴリ一覧 設定
==================================================================== */
@media screen and (min-width: 769px) {/* === PC・タブレット表示 === */
	#productCateSection .contentInner > dl {
		& > dt {
			width: 30%;
		}

		& > dd:first-of-type {
			width: 21%;
		}

		& > dd:nth-of-type(2) {
			width: 23%;
		}

		& > dd.iconDd {
			width: 26%;
		}
	}
}/* @media screen and (min-width: 769px) END */


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

	ページネーション 設定
======================================================================================================================================= */
#container .pageNavi {
	padding: 20px 20px 40px;
	position: relative;
	width: 100%;
	display: inline-block;

	.clearfix;

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

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

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

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

			&:not(:last-of-type) {
				margin-right: 3px;
			}

			a {
				color: #fff;
				background: #c671c3;
			}

			a,span {
				padding: 7px 10px 5px;
				border: 1px solid #c671c3;
				border-radius: 3px;
				line-height: 1;

				@media screen and (max-width: 479px) {/* === SP縦表示 === */
					padding: 5px 5px 4px;
					font-size: 12px;
					letter-spacing: -0.3px;
				}/* @media screen and (max-width: 479px) END */

				@media screen and (min-width: 541px) and (max-width: 830px) {/* === PC・タブレット表示 === */
					padding: 7px 8px 5px;
				}/* @media screen and (min-width: 541px) and (max-width: 830px) END */
			}

			&.current {
				color: #c671c3;

				span {
					font-weight: bold;
				}
			}



			&.prev a::before,&.next a::after {
				font-size: 14px;
				line-height: 0;
			}

			&.prev a::before {
				.iconFont(@arrowLeft);// 引数にcontent
			}

			&.next a::after {
				.iconFont(@arrowRight);// 引数にcontent
			}

			&.first a::after, &.last a::before {
				content: "…";
				display: inline-block;
				position: absolute;
				top: 50%;
				color: #000;
				font-size: 12px;
				line-height: 0;

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

			&.first {
				margin-right: 16px;

				a::after {
					right: -14px;
				}

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

					a::after {
						right: -12px;
					}
				}/* @media screen and (max-width: 540px) END */
			}

			&.last {
				margin-left: 13px;

				a::before {
					left: -14px;
				}

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

					a::before {
						left: -12px;
					}
				}/* @media screen and (max-width: 540px) END */
			}

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

				&.prev, &.next {
					order: 2;
					width: calc(~"(100% - 3px) / 2");
					margin-top: 10px;
				}

				&.prev {
					-webkit-justify-content: flex-end;
					justify-content: flex-end;
				}

				&.next {
					-webkit-justify-content: flex-start;
					justify-content: flex-start;
				}

				&.last, &.next {
					margin-right: 0;
				}
			}/* @media screen and (max-width: 540px) END */
		}
	}
}


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

	共通 新規追加・編集 設定
======================================================================================================================================= */

#error {
	color: @colorRed;
	margin: 0 0 20px;
	line-height: 150%;
}

.creatEditWrap {
	width: 100%;
	position: relative;

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

	.creatEditOneColumn {
		width: 100%;
		margin: 0 0 30px;

		.contentInnerBtnArea {
			text-align: center;

			p {
				margin: 0 0 20px;
				line-height: 1.7;
			}

			a {
				.baseBtn(@colorBlue,100%);// 引数に背景、フォントサイズ指定
				min-width: 200px;
				border: none;
				outline: nonn;
				.transitionCom;

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

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

		2カラム Left部分
	==================================================================== */
	.creatEditLeft {
		width: 100%;
		margin: 0 0 30px;

		@media screen and (min-width: 900px) {/* === PC・タブレット表示 サイドメニューが開いているとき === */
			html.mm-opened & {
				width: calc(~"100% - 310px");
				margin: 0 auto 0 0;
			}
		}/* @media screen and (min-width: 900px) END */

		@media screen and (min-width: 1026px) {/* === PC・タブレット表示 === */
			width: calc(~"100% - 310px");
			margin: 0 auto 0 0;
		}/* @media screen and (min-width: 1026px) END */

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

			li {
				display: inline-block;
				padding: 0 0px 0 0;

				span {
					padding: 0 0 5px;
				}
			}

			&.sexList li {
				width: 100px;

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

			&.cateList li, &.businessList li {
				width: auto;
				padding: 0 15px 0 0;
			}
		}
	}// creatEditLeft END


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

		2カラム Right部分
	==================================================================== */
	.creatEditRight {
		width: 100%;
		margin: 0 0 0px;

		input[type="text"],textarea {
			width: 100%;
		}

		@media screen and (min-width: 900px) {/* === PC・タブレット表示 サイドメニューが開いているとき === */
			html.mm-opened & {
				width: 270px
			}
		}/* @media screen and (min-width: 900px) END */

		@media screen and (min-width: 1026px) {/* === PC・タブレット表示 === */
			width: 270px
		}/* @media screen and (min-width: 1026px) END */

		.creatEditRightBlock {
			.comContentWrap;

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

			h3 {
				font-size: 100%;
				padding: 15px 20px;
			}
		}

		.statusBtn ul li {
			width: 47%;
			float: left;

			.clearfix;

			&:only-of-type {
				width: 100%;
				text-align: center;

				& input[type="submit"],
				& input[type="button"] {
					width: 70%;
				}
			}

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

			a,input[type="button"] {
				width: 100%;
			}

			&.deleteBtn a,&.deleteBtn input[type="button"] {
				.baseBtn(@colorRed,100%);// 引数に背景、フォントサイズ指定
			}

			&.submitBtn input[type="button"],
			&.submitBtn input[type="submit"] {
				.baseBtn(@colorBlue,100%);// 引数に背景、フォントサイズ指定
				border: none;
				outline: nonn;
				.transitionCom;

				&:hover {
					opacity: 0.7;
				}
			}
		}

		.publishBtn {
			margin-top: 20px;
		}

		.cateList .cateDesc {
			margin: 0 0 10px;
			display: inline-block;

			li {
				width: auto;
				display: inline-block;
				font-size: 12px;
				padding: 0 15px 0 0;

				span::before {
					width: auto;
					text-align: center;
					margin: -2px 3px 0 0;
					font-size: 16px;
					display: inline-block;
				}

				.men {
					color: @colorGreen;

					&::before {
						.iconFont(@menIcon);// 引数にcontent指定
					}
				}

				.ladies {
					color: @colorPink;

					&::before {
						.iconFont(@womanIcon);// 引数にcontent指定
					}
				}
			}
		}

		.cateList dl {
			position: relative;
			font-size: 0;

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

			dt, dd {
				font-size: 14px;
				width: 100%;
				margin: 0 0 7px;

				span::after {
					width: auto;
					text-align: center;
					margin: -2px 0px 0 5px;
					font-size: 16px;
					display: inline-block;
				}

				&.buzz span::after,
				&.other span::after {// 男性専用
					.iconFont(@menIcon);// 引数にcontent指定
					color: @colorGreen;
				}

				&.semilong span::after,
				&.hairset span::after,
				&.mrs span::after,
				&.keyword span::after {// 女性専用
					.iconFont(@womanIcon);// 引数にcontent指定
					color: @colorPink;
				}
			}

			dd {
				padding: 0 0 0 10px;

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

		.resetWrap {
			margin: 10px auto 0;
			text-align: center;
		}
	}// .creatEditRight END


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

		入力部分
	==================================================================== */
	.creatEditInput {
		.comContentWrap;

		input[type="text"],textarea {
			width: 100%;
		}

		h3 {
			padding: 0 0 10px;
			margin: 0 0 20px;
			border-bottom: @borderDot1GrayLight;
			font-size: 110%;

			.clearfix;

			.required {
				font-size: 80%;
				color: @colorRed;
				margin: 0 0 0 20px;
			}
		}

		.caution {
			color: @colorRed;
			margin: 0 0 20px;
			font-size: 12px;
		}

		.contentInner:not(.passwordArea) dl {
			.ComFlexBox(flex-start,center,row,nowrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
			width: 100%;
			position: relative;

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

			dt, dd {
				display: inline-block;
			}

			dt {
				width: 100px;
				padding: 0 0px 0 0;
			}

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

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

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

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

						span {
							padding: 0 0 5px;
						}
					}
				}
			}
		}

		.passwordBtn {
			.baseBtn(@colorBlueDeep,100%);// 引数に背景、フォントサイズ指定
		}


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

			パスワード変更ページ
		==================================================================== */
		.passwordArea dl {
			.comDlLay;// 共通DL

			&:nth-of-type(odd) {
				background: lighten(@colorGrayLight, 5%);
			}

			dt {
				width: 230px;
			}

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

		.passwordArea input[type="password"] {
			width: 100%;

			@media screen and (min-width: 900px) {/* === PC・タブレット表示 === */
				width: 60%;
			}/* @media screen and (min-width: 900px) END */
		}


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

			画像レイアウト 部分
		==================================================================== */
		.updateBtnSets(@type: none;) {
			display: inline-block;
			padding: 5px 15px;
			border-radius: 20px;
			font-size: 12px;
			border: 3px solid @colorGray;
			.transitionCom;
			position: relative;
			cursor: pointer;
			color: @baseColor!important;

			&when (@type = multiple) {
				margin: 0 0 20px;
			}// &when  END

			&when (@type = only) {
				margin: 0 0 0px;
			}// &when  END

			&:hover {
				border-color: @colorPink;
				color: @colorPink!important;
			}

			input {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				opacity: 0;
				z-index: 10;
			}

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

				&::before {
					.iconFont(@plusIcon);// 引数にcontent指定
					font-size: 14px;
					position: absolute;
					top: 50%;
					left: -5px;
					width: 14px;
					height: 14px;
					line-height: 1;
					margin: -8px 0 0;
				}
			}
		}

		.updateLabel {
			.updateBtnSets(@type: only;);
		}

		.pickUpImageWrap,
		.uploadImageWrap {
			width: 100%;
			.ComFlexBox(flex-start,center,row,wrap,stretch);// 引数にjustify,align-content,direction,wrap,align-items
			counter-reset: number 0;

			&:not(.pickUpImageWrap) li {
				width: 30%;

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

				&:nth-of-type(-n+3) {
					margin-top: 0px;
				}
			}

			&:not(.uploadImageWrap) li {
				width: 22%;
				padding: 40px 0 0;

				&::before {
					counter-increment: number 1;
					content: counter(number) "";
					position: absolute;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					line-height: 22px;
					top: 5px;
					left: calc(~"50% - 10px");
					text-align: center;
					color: @colorMain;
					font-weight: bold;
					border: 2px solid @colorMain;
				}

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

				&:nth-of-type(-n+4) {
					margin-top: 0px;
				}
			}

			li {
				.ComFlexBox(flex-start,center,row,wrap,center);// 引数にjustify,align-content,direction,wrap,align-items
				position: relative;
				margin-top: 30px;

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

				& > div {
					width: 100%;
					text-align: center;
				}

				.pickupBtn {
					position: relative;

					a,label {
						.updateBtnSets(@type: only;);
					}
				}

				.uploadImage {
					position: relative;

					a,label {
						.updateBtnSets(@type: multiple;);
					}
				}

				div[class*="prevImage"]:empty ~ .pickupBtn a span::after {
					content: "画像を設定する";
				}

				div[class*="prevImage"]:not(:empty) ~ .pickupBtn a span::after {
					content: "画像を変更する";
				}

				div[class*="prevImage"]:not(:empty),
				.uploadImage div[id^="preview"]:not(:empty) {
					margin: 0 0 20px;
					position: relative;

					span {
						position: relative;

						.clearBtn {
							position: absolute;
							top: -11px;
							right: -11px;
							border: none;
							background: none;

							&::before {
								.iconFont(@closeIcon);// 引数にcontent指定
								font-size: 26px;
								color: #484848;
							}
						}
					}

					img {
						width: 100%;
						max-width: 160px;
					}
				}
			}// li END

			input[type="file"] {
				display: none;
			}

			select {
				min-width: 120px;
			}
		}

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

			申し込み添付画像 部分
		==================================================================== */
		.faxImage {
			width: 100px;
		}
	}// creatEditInput END

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

		バリデーション系 部分
	==================================================================== */
	.error {
		margin: 0 0 10px;
		color: @colorRed;
		display: inline-block;
		width: 100%;

		&:empty {
			display: none!important;
		}

		&::before {
			.iconFont(@closeIcon);// 引数にcontent
			line-height: 100%;
			font-size: 130%;
			margin: -2px 3px 0 0;
		}
	}

	.errorArea:not(select):not(:focus) {
		background: lighten(@colorRedLight, 25%);
	}

	select.errorArea:not(:focus) {
		background: lighten(@colorRedLight, 25%) url(../images/arrowDown.png) no-repeat right 5px center / 10px auto;
	}

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

		保存ボタン 部分
	==================================================================== */
	.creatEditSubmit {
		text-align: center;
		display: inline-block;
		width: 100%;
		margin: 30px 0 0;

		input[type="button"],input[type="submit"] {
			.baseBtn(@colorBlueDeep,100%);// 引数に背景、フォントサイズ指定
			border: none;
			outline: nonn;
			.transitionCom;
			width: 50%;
			max-width: 200px;

			&:hover {
				opacity: 0.7;
			}
		}
	}
}// .creatEditWrap END


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

	ローディング
======================================================================================================================================= */
#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: @colorPink;
		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;
	}
}



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

	モーダル設定
======================================================================================================================================= */
.modalListWrap {
	width: 90vw;
	border-radius: 4px;
	padding: 20px;
	background: @colorWhite;
	height: 90vh;
	padding: 20px;
	position: relative;

	h1 {
		font-size: 140%;
		border-bottom: 1px solid @colorGrayLight;
		margin-bottom: 20px;
	}

	.caption {
		margin-bottom: 30px;
	}

	.mfp-close {
		color: @baseColor;
	}

	.modalInner {
		display: inline-block;
		overflow-y: scroll;
		position: relative;
		width: 100%;
		padding: 0 25px;
		height: calc(~"100% - 90px");

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

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

			li {
				width: 8%;
				margin: 30px calc(~"20% / 9") 0 0;

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

					&:nth-of-type(-n+4) {
						margin-top: 0px;
					}

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

				@media screen and (min-width: 480px) and (max-width: 768px) {/* === PC・タブレット表示 === */
					width: 18%;
					margin: 30px 2.5% 0 0;

					&:nth-of-type(-n+5) {
						margin-top: 0px;
					}

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

				@media screen and (min-width: 769px) and (max-width: 1025px) {/* === PC・タブレット表示 === */
					width: 11%;
					margin: 30px calc(~"12% / 7") 0 0;

					&:nth-of-type(-n+8) {
						margin-top: 0px;
					}

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

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

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

				span {
					text-align: center;
					cursor: pointer;
				}
			}
		}
	}
}