@charset 'UTF-8';

/* ↓↓↓ サンプル確認用色付け ↓↓↓ */
/*
.frame_HD { background-color: #ffe8e8;}
.frame_MH { background-color: #ededff;}
.frame_LH { background-color: #FFFCCC;}
.frame_LF { background-color: #cfffcc;}
.frame_MT { background-color: #d4ebff;}
.frame_MB { background-color: #f5feff;}
.frame_RH { background-color: #fffeee;}
.frame_RF { background-color: #e7ffe7;}
.frame_MF { background-color: #f9e7ff;}
.frame_FT { background-color: #ffedcc;}
.fwCms_box:empty { color: #FF6666; font-size: 16px; font-weight: bold; }
.frame_HD:empty::before { content: "HD"; }
.frame_MH:empty::before { content: "MH"; }
.frame_KL:empty::before { content: "KL"; }
.frame_KS:empty::before { content: "KS"; }
.frame_LH:empty::before { content: "LH"; }
.frame_LF:empty::before { content: "LF"; }
.frame_MT:empty::before { content: "MT"; }
.frame_MB:empty::before { content: "MB"; }
.frame_RH:empty::before { content: "RH"; }
.frame_RF:empty::before { content: "RF"; }
.frame_MF:empty::before { content: "MF"; }
.frame_FT:empty::before { content: "FT"; }
*/
/* ↑↑↑ サンプル確認用色付け ↑↑↑ */


/*----------------------------------------
  clear setting
-----------------------------------------*/
#fwCms_wrapper .clearfix::after {
	content: '';
	display: block;
	clear: both;

	/*-SP-*/
	@media (max-width: 768px) {
		display: none;
	}
}


/* -----------------------------------------------------
	フレームType共通設定
	layoutType0 MH・MFなし【HD MB FT】
	layoutType1 サイドなし【HD MH MB MF FT】
	layoutType2 左メニュー【HD MH LH/MB/LF MF FT】
	layoutType3 右メニュー【HD MH RH/MB/RF MF FT】
	layoutType4 ※設定ナシ
------------------------------------------------------- */

/*----------------------------------------
  共通設定
-----------------------------------------*/
:root {
	/*【画面最大幅】*/

	--screen_max_width: 1900px;
	--screen_side_padding_head: 5px;
	--screen_side_padding_main: 30px;

	@media (max-width: 768px) {
		--screen_max_width: 100%;
		--screen_side_padding_head: 5px;
		--screen_side_padding_main: 5px;
	}
}


/* Frame大枠 */
#fwCms_wrapper {
	width: 100%;

	/* 各Frame（後続上書き前提の基本設定） */
	.fwCms_box {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* MB部外枠 */
	.mainArea {
		display: block;
		max-width: 100%;
		width: 100%;

		/*-SP-*/
		@media (max-width: 768px) {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			flex-wrap: wrap;
		}
	}
}


/*----------------------------------------
  layoutType1 サイドなし【HD MH MB MF FT】
-----------------------------------------*/
#fwCms_wrapper.layoutType1 {

	.mainArea {
		width: auto;
		max-width: var(--screen_max_width);
		margin: 0 auto;

		.frame_MT,
		.frame_MB {
			width: auto;
			flex: 1;
			padding: 0 var(--screen_side_padding_main) 4px;
		}
	}

	.frame_MH {
		width: auto;
		max-width: var(--screen_max_width);
		margin: 0 auto;
		padding: 0 var(--screen_side_padding_head) 4px;
	}

	.frame_MF {
		width: auto;
		max-width: var(--screen_max_width);
		padding: 0 var(--screen_side_padding_main) 4px;
	}

	
	&.layout_010 {
		/* KeyVisual */
		.keyvisualArea {
			position: relative;
			
			.frame_KL {
				min-height: 600px;

				@media (max-width: 768px) {
					min-height: 500px;
				}
			}
		}
	}
}

#fwCms_campus #fwCms_wrapper.layoutType1 {
	&.layout_010 {
		/* KeyVisual */
		.keyvisualArea {
			position: relative;
			
			.frame_KL {
				min-height: 600px !important;

				@media (max-width: 768px) {
					min-height: 500px !important;
				}
			}
			
			 .frame_KS_Wrap {
			 	padding: 0 7px 7px !important;

				.frame_KS {
				 	margin: 0px 0 0px 0 !important;
			 	}
			 }
		}
	}
}

/*----------------------------------------
  layoutType2 左メニュー【HD MH LH/MB/LF MF FT】
-----------------------------------------*/
#fwCms_wrapper.layoutType2 {

	.frame_MH {
		width: auto;
		max-width: var(--screen_max_width);
		padding: 0 var(--screen_side_padding_head) 4px;
	}

	@media (min-width: 769px) {
		/* .mainArea {
			display: grid;
			grid: auto auto / 300px calc(100% - 300px);

			.frame_MB {
				grid-area: 1 / 2 / 3 / 3;
			}

			.frame_LH {
				grid-area: 1 / 1 / 2 / 2;
			}

			.frame_LF {
				grid-area: 2 / 1 / 3 / 2;
			}
		} */
		
		/* 商品棚専用処理⇒共通化 */
		/* &.layout_012 > .mainArea { */
		.mainArea {

/* Gridの場合、サイド・メインの高さ調整が難
			display:grid;
			grid-template-areas:
				"LH MT"
				"LF MB";
			grid-template-columns: 300px 1fr;
			grid-template-rows: 1fr 1fr ;

			.frame_MT { grid-area: MT;}
			.frame_MB { grid-area: MB;}
			.frame_LH { grid-area: LH;}
			.frame_LF { grid-area: LF;}

*/
			display: block;

			.frame_MT,
			.frame_MB {
				width: calc(100% - 300px);
				float:right; 
			}

			.frame_LH,
			.frame_LF {
				width: 300px;
				float:left; 
			}
		}

		.frame_LH,
		.frame_LF {
			padding-left: calc(var(--screen_side_padding_main) / 2);
			padding-right: calc(var(--screen_side_padding_main) / 2);
		}

		.frame_MT,
		.frame_MB {
			padding-left: calc(var(--screen_side_padding_main) / 2);
			padding-right: var(--screen_side_padding_main);
		}
	}

	/*-SP-*/
	@media (max-width: 768px) {
		.mainArea {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.frame_LH,
		.frame_LF {
			display: block;
			clear: both;
			width: 100%;
			padding-left: var(--screen_side_padding_main);
			padding-right: var(--screen_side_padding_main);
		}

		.frame_MT,
		.frame_MB {
			clear: both;
			width: 100%;
			padding-left: var(--screen_side_padding_main);
			padding-right: var(--screen_side_padding_main);
		}
	}

	.frame_MF {
		width: auto;
		max-width: var(--screen_max_width);
		padding-left: var(--screen_side_padding_main);
		padding-right: var(--screen_side_padding_main);
	}
}

/* CMSキャンバス制御用（キャンバスでは描画指定幅＋16px） */
#fwCms_campus #fwCms_wrapper.layoutType2 {
	.mainArea {
		/* display: grid;
		grid: auto auto / 316px calc(100% - 311px); */

		.frame_MT,
		.frame_MB {
			margin-left: -5px !important;
		}
	}

	/* 商品棚専用処理 ⇒ 共通化 */
	/* &.layout_012 > .mainArea { */
	.mainArea {
		display: block;

		.frame_LH { min-height: 140px !important;}
		.frame_LF { min-height: 140px !important;}
		.frame_MB { min-height: 200px !important;}

		.frame_MT,
		.frame_MB {
			width: calc(100% - 311px);
			float:right; 
		}

		.frame_LH,
		.frame_LF {
			width: 316px;
			float:left; 
		}
	}
}

/*----------------------------------------
  layoutType3 右メニュー【HD MH RH/MB/RF MF FT】
-----------------------------------------*/
#fwCms_wrapper.layoutType3 {

	.frame_MH {
		width: auto;
		max-width: var(--screen_max_width);
		padding: 0 var(--screen_side_padding_head) 4px;
	}

	@media (min-width: 769px) {
		/* .mainArea {
			display: grid;
			grid: auto auto / calc(100% - 300px) 300px;

			.frame_MB {
				grid-area: 1 / 1 / 3 / 2;
			}

			.frame_RH {
				grid-area: 1 / 2 / 2 / 3;
			}

			.frame_RF {
				grid-area: 2 / 2 / 3 / 3;
			}
		} */

		/* 商品棚専用処理⇒共通化 */
		/* &.layout_013 > .mainArea { */
		.mainArea {

/* Gridの場合、サイド・メインの高さ調整が難
			display:grid;
			grid-template-areas:
				"MT RH"
				"MB RF";
			grid-template-columns: 1fr 300px;
			grid-template-rows: 1fr 1fr ;

			.frame_MT { grid-area: MT;}
			.frame_MB { grid-area: MB;}
			.frame_RH { grid-area: RH;}
			.frame_RF { grid-area: RF;}
*/

			display: block;

			.frame_MT,
			.frame_MB {
				width: calc(100% - 300px);
				float:left; 
			}
			.frame_RH,
			.frame_RF {
				width: 300px;
				float:right; 
			}
		}

		.frame_RH,
		.frame_RF {
			padding-left: calc(var(--screen_side_padding_main) / 2);
			padding-right: calc(var(--screen_side_padding_main) / 2);
		}

		.frame_MT,
		.frame_MB {
			padding-left: var(--screen_side_padding_main);
			padding-right: calc(var(--screen_side_padding_main) / 2);
		}
	}

	/*-SP-*/
	@media (max-width: 768px) {
		.mainArea {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

		.frame_RH,
		.frame_RF {
			display: block;
			clear: both;
			width: 100%;
			padding-left: var(--screen_side_padding_main);
			padding-right: var(--screen_side_padding_main);
		}

		.frame_MT,
		.frame_MB {
			clear: both;
			width: 100%;
			padding-left: var(--screen_side_padding_main);
			padding-right: var(--screen_side_padding_main);
		}
	}

	.frame_MF {
		width: auto;
		max-width: var(--screen_max_width);
		padding: 0 var(--screen_side_padding_main) 4px;
	}
}

/* CMSキャンバス制御用（キャンバスでは描画指定幅＋16px） */
#fwCms_campus #fwCms_wrapper.layoutType3 {
	.mainArea {
		/* display: grid;
		grid: auto auto / calc(100% - 311px) 316px; */

		.frame_RH,
		.frame_RF {
			margin-left: -5px !important;
		}

		.frame_MT,
		.frame_MB {
			margin-right: -5px !important;
		}

	}

	/* 商品棚専用処理 ⇒ 共通化 */
	/* &.layout_013 > .mainArea { */
	.mainArea {

		display: block;

		.frame_RH { min-height: 140px !important;}
		.frame_RF { min-height: 140px !important;}
		.frame_MB { min-height: 200px !important;}

		.frame_MT,
		.frame_MB {
			width: calc(100% - 311px);
			float:left; 
		}
		.frame_RH,
		.frame_RF {
			width: 316px;
			float:right; 
		}
	}
}



/* CMSキャンバス制御用（キャンバスで空の場合のみ、Frame名表示） */
#fwCms_campus {
	.fwCms_box:empty { color: #CCCCCC; font-size: 16px; font-weight: bold; }
	.frame_HD:empty::before { content: "HD"; }
	.frame_MH:empty::before { content: "MH"; }
	.frame_KL:empty::before { content: "KL"; }
	.frame_KS:empty::before { content: "KS"; }
	.frame_LH:empty::before { content: "LH"; }
	.frame_LF:empty::before { content: "LF"; }
	.frame_MT:empty::before { content: "MT"; }
	.frame_MB:empty::before { content: "MB"; }
	.frame_RH:empty::before { content: "RH"; }
	.frame_RF:empty::before { content: "RF"; }
	.frame_MF:empty::before { content: "MF"; }
	.frame_FT:empty::before { content: "FT"; }
}



/*----------------------------------------
	CPNT共通定義
-----------------------------------------*/

/* Lv0 大外枠  */
#fwCms_wrapper .cpWrap {
	margin-bottom: 40px;

	/* Lv1 エラー表示枠 */
	.cpError {}

	/* Lv1 正常時表示枠 */
	.cpView {
		@media (max-width: 768px) {
			/*
			padding-right: 10px;
			padding-left: 10px;
*/
		}
	}

	/* Lv2 ヘッダブロック */
	.cpHead {
		display: inline-block;
		width: 99.8%;
	}

	/* Lv3 ヘッダタイトル */
	.cpHeadTitle {}

	.cpHeadTitle h1,
	.cpHeadTitle h2 {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;

		@media (max-width: 768px) {
			font-size: 18px;
		}
	}

	/* Lv3 ヘッダテキスト */
	.cpHeadText {
		padding: 3px 3px 6px 3px;

		&&:empty {
		  padding: 0;
		}
	}

	/* CPNT-Lv2 メインブロック */
	.cpMain {}

	/* Lv3 メインTop */
	.cpMainTop {
		display: flex;
		justify-content: space-between;
	}

	.cpMainTopL {}

	.cpMainTopR {}

	/* Lv3 メインBody（コンテンツ描画メイン領域） */
	.cpMainBody {}

	/* Lv3 メインBottom */
	.cpMainBottom {
		display: flex;
		justify-content: space-between;
	}

	.cpMainBottomL {}

	.cpMainBottomR {}

	/* CPNT-Lv2 フッタブロック */
	.cpFoot {
		display: flex;
		justify-content: space-between;
		padding: 4px 4px 4px 4px;

		@media (max-width: 768px) {
			flex-direction: column;
			row-gap: 8px;
		}
	}

	.cpFootL {}

	.cpFootR {}
}



/* ローディング */
/* #LD_overlay {
	z-index: 99998;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: rgba(255, 255, 255, .3);
	animation: fadeIn .2s ease;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#LD_overlay #LD_image {
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	width: 50px;
	height: 50px;
	background: url(../svg/ic-loading.svg);
	background-size: cover;
	animation: spin 1.5s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
} */

/* jBox（モーダル） */
.jBox-wrapper {
	&.no-title {
		.jBox-title {
			background: unset;
			border-bottom: unset;
		}
	}
}