@charset 'UTF-8';

#fwCms_wrapper .cpWrap {
	width:100%;
}

#fwCms_wrapper {

	&.layout_010.layoutType1 {
		.frame_KS {
			width: auto;
		}

		.frame_MB, .frame_MF {
			padding-right: 40px;
			padding-left: 40px;

			@media (max-width: 768px) {
				padding-right: 5px;
				padding-left: 5px;
			} 
		}

		.MK4PFRDT060_01 {
			max-width: none;
		}
	}

	.swiper-button-prev, .swiper-button-next {
		align-items: center;
		background: #ccc;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		display: -ms-flexbox;
		display: flex;
		height: 2em;
		-ms-flex-pack: center;
		justify-content: center;
		opacity: 0.7;
		padding: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2em;
		z-index: 1;

		&:after {
			position: absolute;
			font-size: 16px;
			color: #000;
			font-weight: bold;
			text-shadow: 1px 0 1px #666;
			left: 34%;
		}

		&:hover {
			background: #eee;
			&:after {
				color: #FF0000;
				text-shadow: 1px 0 1px #FFF;
			}
		}

		
		&.swiper-button-disabled {
			opacity: 0.4;
			&:after {
				color: #FFF;
				font-weight: bold;
				text-shadow: 1px 0 1px #EEE;
			}
		}
	}
	.swiper-pagination {
		bottom: 0px;

		.swiper-pagination-bullet {
			background: #333;
			border: 0;
			border-radius: 7px;
			display: inline-block;
			height: 10px;
			margin: 0 2px;
			width: 18px;
			transition: transform .2s linear;

			@media (max-width: 768px) {
				margin: 0 8px;
				width: 28px;
			}

			&.swiper-pagination-bullet-active {
				background: var(--global_clr_green);
			}
			
		}
	}
}

/*----------------------------------------------------------
	MK4ST_KVL_0001：KL_キービジュアルメイン
----------------------------------------------------------*/
/* キャンバス対策 */
#fwCms_main #fwCms_wrapper.layout_010 .MK4ST_KVL_0001  {
	.swiper{
		display: block;
		opacity: 1;
	}
}

#fwCms_wrapper .MK4ST_KVL_0001 {
	/* 各画像(background)指定とテキスト位置はHTML内にてstyle指定 */

	/* トータルの高さ・リンク有効領域・透明化グラデ・白背景の縦サイズ */
	--this_area_height:  600px;
	--this_min_height:   600px;
	--this_view_height:  240px;
	--this_trans_height: 310px;
	--this_white_height:  50px;
	@media (max-width: 1020px) {
		--this_area_height:  600px;
		--this_min_height:   600px;
		--this_view_height:  240px;
		--this_trans_height: 310px;
		--this_white_height:  50px;
	}
	@media (max-width: 768px) {
		--this_area_height:  calc((100vw) / 1.3);
		--this_min_height:   500px;
		--this_view_height:  190px;
		--this_trans_height: 150px;
		--this_white_height:  60px;
	}

	@media (max-width: 500px) {
		--this_area_height:  calc((100vw) / 1.3);
		--this_min_height:   450px;
		--this_view_height:  190px;
		--this_trans_height: 150px;
		--this_white_height:  60px;
	}

	height: var(--this_area_height);
	min-height: var(--this_min_height);
	margin-bottom: 20px;

	.cpMainBody {
		position: relative;
		overflow: hidden;
		
		@media (max-width: 768px) {
			height: 400px;
		}

		/* ふわっと出す */
		.swiper {
			opacity: 0;
		}
		.swiper.not, .swiper.swiper-initialized {
			visibility: visible;
			opacity: 1;
			transition: all 0.1s;
		}

		.swiper-button-prev {
			position: absolute;
			top: 20%;
			left: 20px;
			width: 1.6em;
			height: 6em;
			border-radius: 10%;
			z-index: 2;

			@media (max-width: 768px) {
				left: 10px;
			}
		}
		.swiper-button-next {
			position: absolute;
			top: 20%;
			right: 20px;
			width: 1.6em;
			height: 6em;
			border-radius: 10%;
			z-index: 2;

			@media (max-width: 768px) {
				right: 10px;
			}
		}

		.swiper-pagination {
			top: 0;
			bottom: auto;
			left: auto;
			right: 5px;
			width: auto;

			.swiper-pagination-bullet {
				background: #ccc;
				border: 0;
				border-radius: 6px;
				display: inline-block;
				height: 10px;
				margin: 8px 2px;
				opacity: 0.7;
				padding: 0;
				position: relative;
				transition: transform .2s linear;
				width: 40px;

				@media (max-width: 768px) {
					margin: 0 4px;
					width: 10px;
				}

				&.swiper-pagination-bullet-active {
					background: var(--global_clr_green);
				}
			}
		}

		/* .swiper-slide 直下・コンテンツ本体 */
		.contents_box {
			width: 100vw;
			height: 600px;
			overflow: hidden;
			/* テキスト（表示内容・位置はスライド毎に設定で上書き） */
			.cpMainText{
				position: absolute;
				top:  0;
				left: 0;
				z-index: 2;

				opacity: 1;
				transition: all 0.4s;

				/* スライドアニメ中にiOSで反転表示されるので消す→ふわっと出す */
				&.inSlideChangeTransition {
					opacity: 0;
					transition: all 0.1s;
				}

				.text {
					display:block;
					margin: 4px;
					padding: 2px 6px;
					border-radius: 4px;
					background:rgba(255, 255, 255, 0.8);
					color: var(--global_clr_black);
				}
			}

			/* メイン画像（パス・位置はスライド毎に設定で上書き） */
			.cpMainImage  {
				top: 0;
				position: absolute;
				width: 100%;
				aspect-ratio: 16 / 9;
				background-repeat: no-repeat;
				background-position: top;
				background-size: initial;
				@media (min-width: 1650px) {
					background-size: 100%;
				}
				@media (max-width: 1020px) {
					background-size: initial;
				}
				@media (max-width: 768px) {
					background-size: cover;
				}

				.viewArea {
					display: block;
					height: var(--this_view_height);
					margin: 0 30px;
					z-index: 1;
				}
				.transArea {
					height: var(--this_trans_height);
					background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
				}
				.whiteArea {
					height: var(--this_white_height);
					background-color: #FFF;
				}
			}
		}
	}
}


/*----------------------------------------------------------
	KS_キービジュアルサブ：全CPNT共通指定
----------------------------------------------------------*/
/* キャンバス対策 */
#fwCms_main #fwCms_wrapper.layout_010 .frame_KS_Wrap  {
	.fwCms_sortObj{
		min-width: 340px;
	}
	/* 配置CPNT・表示化 */
	.cpWrap {
		opacity: 1;
		min-width: 330px;
	}
	.frame_KS {
		overflow-x: scroll;
		width: 100%;
	}
}

#fwCms_wrapper.layout_010 .frame_KS_Wrap  {

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	position: absolute;
	top: 250px;
	height: 350px;
	max-height: 350px;
	width: 100%;
	padding: 0 10px;

	/*-TB-*/
	@media (max-width: 768px) {
		top: 190px;
		height: 350px;
	}

	@media (max-width: 640px) {
		top: 190px;
		height: 300px;
	}

	@media (max-width: 500px) {
		top: 190px;
		height: 270px;
	}

	/* 配置CPNT・ふわっと出す */
	.cpWrap {
		opacity: 0.01;
	}
	.swiper.not .cpWrap, .cpWrap[role="group"] {
		visibility: visible;
		opacity: 1;
		transition: all 0.1s;
	}

	/* 内包CPNTの部品は非表示化 */
	.frame_KS.swiper-wrapper .cpWrap {
		.swiper-pagination, .swiper-button-prev, .swiper-button-next {
			display: none;
		}
	}

	.swiper-button-prev.KS_sb_prev {
		top: 50%;
		left: 5px;
	}
	.swiper-button-next.KS_sb_next {
		top: 50%;
		right: 5px;
	}

	&.swiper.not {
		.swiper-button-prev.KS_sb_prev,
		.swiper-button-next.KS_sb_next {
			display: none;
		}
	}

	/* 商品Ajaxの後ろは順に描画されるように */
	.cpTypeAjax~.cpWrap {
		opacity: 0.01;
	}
	.cpTypeAjax.neoAjaxFix~.cpWrap {
		opacity: 1.0;
	}


	@media (max-width: 768px) {
		.cpHeadTitle h2 {
			font-size: 14px;
	    }
	}

	/* KS領域に配置されたCPNT */
	.cpWrap {
		max-height: 320px;
		min-height: 320px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;

		/* 画面サイズ別に１行の数を分岐 */
		/* width: calc((100% - 20px) / 4); */
		width: calc((100%) / 6);

		@media (max-width: 2000px) {
			width: calc((100%) / 5);
		}
		@media (max-width: 1640px) {
			width: calc((100%) / 4);
		}
		@media (max-width: 1400px) {
			width: calc((100%) / 3);
		}
		@media (max-width: 1020px) {
			width: calc((100%) / 2);
			min-height: 300px;
		}
		@media (max-width: 768px) {
			margin: 0;
			width: calc((100%) / 2);
			min-height: 260px;
			max-height: 260px;
		}
		@media (max-width: 500px) {
			margin: 0;
			width: calc((100%) / 2);
			min-height: 220px;
			max-height: 220px;
		}

		.cpHeadTitle h2 {
			font-size: 1.6rem;
			font-weight: bold;
			line-height: 1.8rem;
			margin: 0 0 4px;

			@media (max-width: 768px) {
				font-size: 1.4rem;
				line-height: 1.4rem;
			}
		}

		.cpView {
			margin: 0 8px;
			border: 1px solid #FFF;
			/*
			background-color: #FFF;
			*/
			background: rgba(255, 255, 255, 0.8);
			box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.35);
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;
			-webkit-box-flex: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;

			@media (max-width: 768px) {
				margin: 0 3px;
			}

			.cmn_cpnt_acc_check, .cmn_cpnt_acc_check_btn {
				display:none;
			}
		}
		
		.cpHead {
			font-size: 1.6rem;
			font-weight: bold;
			padding: 0 0 0 8px;
			height: 44px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: start;
			justify-content: flex-start;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 100%;

			@media (max-width: 1020px) {
				font-size: 1.4rem;
				padding: 0 2px 0 4px;
			}
			@media (max-width: 768px) {
				font-size: 1.4rem;
				padding: 3px 2px 0 4px;
				height: 34px;
			}

			.cpHeadText {
				display:none;
			}
		}
		
		.cpMain {
			-webkit-box-flex: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			padding: 0 15px;
			width: 100%;
			max-width: 380px;

			@media (max-width: 1020px) {
				padding: 0 10px;
			}
			@media (max-width: 768px) {
				padding: 0 4px 0 6px;
			}

			.cpMainTop, .cpMainBottom {
				display:none;
			}
		}

		.cpFoot {
			width: 100%;
			padding: 1px 2px;
			font-size: 1.3rem;

			@media (max-width: 768px) {
				display: flex;
				flex-direction: column;
				row-gap: 5px;
				line-height: 1.5rem;
			}

			.pagination {
				display:none;
			}
			
			.cpFootR {
				font-weight: bold;
			}
		}

		img {
			/*
			aspect-ratio: 4 / 3;
			*/
			width: 100%;
			height: auto;
			object-fit: cover;
			border-radius: 4px;
		}
	}

	/* フレーム枠を透過する */
	.cpWrap.noFrame {
		.cpView {
			border: 0 solid #FFF;
			background: rgba(255, 255, 255, 0);
			box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0);
		}
	}

	/*----------------------------------------
		・KS_CpntType（PC/SP共通）
		┗viewKs_Basic
		┗viewKs_Prod4
		┗viewKs_Prod2
		┗viewKs_Prod1
		┗viewKs_Free4
		┗viewKs_Free2
		┗viewKs_Free3
		┗viewKs_Free1
	----------------------------------------*/

	/*----------------------------------------
	  商品一覧系
	----------------------------------------*/
	/*共通設定*/
	.cpWrap[sid],
	.viewKs_Prod4, .viewKs_Prod2, .viewKs_Prod1, 
	.viewKs_Free4, .viewKs_Free1 {
		.cpView {
			min-height: 320px;

			@media (max-width: 640px) {
				min-height: 260px;
				max-height: 260px;
			}

			@media (max-width: 500px) {
				min-height: 220px;
				max-height: 220px;
			}
		}
		.neoSwiperProd {
			padding-left: 0;
			padding-right: 0;

			.neoSwiper {
				padding-left: 0;
				padding-right: 0;

				.neoSwiperWrapper {
					padding-left: 0;
					padding-right: 4px;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					column-gap: 0;
					row-gap: 8px;
					width: 100%;
					overflow: hidden;
				}
			}
		}
		.itemBlockHeader {
			display: block;

			.itemTopIcoArea, .icoType_Favorite, .icoType_Service {
				display: none;
			}
		}
		
		.itemBlockBody {
			.itemBlockReviewArea, .itemBlockSeparateArea, .itemIcoInfo {
				display: none;
			}
		}
	}

	/* 商品 x 1 */
	.viewKs_Prod1 {

		.itemBlock {
			width: 100%;
			min-width: auto;
			margin: 0 2px 2px;
			padding: 8px 0;
			border-radius: 10px;
			background-color: var(--global_clr_white);
			border: 1px solid var(--global_clr_gray);
			box-shadow: 1px 1px 3px 0px #b1c1ef;
			display: flex;
			min-height: 234px;
			max-height: 234px;

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

			@media (max-width: 640px) {
				min-height: 197px;
                max-height: 197px;
			}
			@media (max-width: 500px) {
				min-height: 143px;
				max-height: 143px;
			}

			&:nth-child(n+2){
				display: none;
			}

			.itemBlockHeader {
				min-width: 150px;
				max-width: 150px;

				@media (max-width: 640px) {
					min-width: 94px;
					max-width: 94px;
				}

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

				.itemBlockImg {
					margin-bottom: 0;

					img {
						width: 140px;
						max-width: 140px;
						max-height: 140px;

						@media (max-width: 640px) {
							width: 86px;
							max-width: 86px;
							max-height: 86px;
						}

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

			.itemBlockBody {
				padding: 0 10px;

				@media (max-width: 500px) {
					padding: 0 5px;
				}

				.itemBlockInfo {
					position: absolute;
					right: 8px;
					bottom: 5px;
					@media (max-width: 500px) {
						bottom: 0px;
					}
				}

				.itemNameInfo {
					font-size: 1.4rem;
					word-break: break-all;
					-webkit-line-clamp: 5;
					min-height: auto;
					max-height: 9.0rem;

					@media (max-width: 500px) {
						font-size: 1.3rem;
						-webkit-line-clamp: 4;
						max-height: 6.4rem;
						line-height: 1.2;
					}
				}
				
				.itemModelNum {
					font-size: 1.3rem;
					word-break: break-all;
					-webkit-line-clamp: 2;
					min-height: auto;
					max-height: 3.0rem;

					@media (max-width: 500px) {
						font-size: 1.2rem;
						-webkit-line-clamp: 1;
						min-height: auto;
						max-height: 1.4rem;
					}
				}
				
				.itemBlockPriceIncArea {
					margin-top: 10px;

					@media (max-width: 500px) {
						margin-top: 0;
					}

					.itemBlockIncTitle {
						@media (max-width: 500px) {
							display: none;
						}
					}

					.itemBlockIncPrice {
						font-size: 1.6rem;
						letter-spacing: -0.5px;

						@media (max-width: 500px) {
							font-size: 1.4rem;
							letter-spacing: -0.05rem;
						}
					}
				}
				.itemStockInfo {
					display: block;
					font-size: 1.3rem;
					margin-bottom: 0px;
				}
			}
		}
	}

	/* 商品 x 2 / CMS上でsid属性が付与されている時は「2」件版として仮描画 */
	.cpWrap[sid],
	.viewKs_Prod2 {

		.itemBlock {
			width: 100%;
			min-width: auto;
			max-height: 112px;
			margin: 0 0 2px 0;
			padding: 5px 0;
			border-radius: 10px;
			background-color: var(--global_clr_white);
			border: 1px solid var(--global_clr_gray);
			box-shadow: 1px 1px 3px 0px #b1c1ef;
			display: flex;

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

			@media (max-width: 640px) {
				min-height: 92px;
                max-height: 92px;
			}
			@media (max-width: 500px) {
				min-height: 68px;
				max-height: 68px;
			}
			
			&:nth-child(n+3){
				display: none;
			}

			.itemBlockHeader {
				min-width: 120px;
				max-width: 120px;

				@media (max-width: 640px) {
					min-width: 86px;
                    max-width: 86px;
                    margin: 2px 0 0 2px;
				}

				@media (max-width: 500px) {
					min-width: 45px;
					max-width: 45px;
					margin: 2px 0 0 4px;
				}

				.itemBlockImg {
					margin-bottom: 0;
					margin-left: 1px;

					img {
						aspect-ratio: initial;
						width: 100px;
						max-width: 100px;
						max-height: 100px;

						@media (max-width: 640px) {
                            max-width: 64px;
                            max-height: 64px;
						}
					
						@media (max-width: 500px) {
							max-width: 45px;
							max-height: 45px;
						}
					}
				}
			}

			.itemBlockBody {
				padding: 0 10px;

				@media (max-width: 640px) {
					padding: 0 4px 0 4px
				}

				@media (max-width: 500px) {
					padding: 0 4px 0 4px
				}

				.itemNameInfo {
					font-size: 1.4rem;
					word-break: break-all;
					-webkit-line-clamp: 2;
					min-height: 3.6rem;
					max-height: 3.6rem;

					@media (max-width: 500px) {
						font-size: 1.3rem;
						-webkit-line-clamp: 3;
						min-height: 4.2rem;
						max-height: 4.2rem;
						line-height: 1.15;
						margin-bottom: 2px;
					}
				}
				
				.itemModelNum {
					font-size: 1.3rem;
					word-break: break-all;
					-webkit-line-clamp: 1;
					min-height: 1.6rem;
					max-height: 1.6rem;

					@media (max-width: 500px) {
						font-size: 1.2rem;
						-webkit-line-clamp: 1;
						min-height: auto;
						max-height: 1.4rem;
					}
				}
				
				.itemBlockPriceIncArea {
					margin-top: 4px;

					@media (max-width: 500px) {
						display: none;
					}

					.itemBlockIncPrice {
						font-size: 1.6rem;
					}
				}

				.itemStockInfo {
					display: none;
				}
			}
		}
	}

	/* 商品 x 4 */
	.viewKs_Prod4 {

		.itemBlock {
			width: calc((100% - 18px) / 2);
			min-width: auto;
			max-height: 112px;
			margin: 0 2px 2px;
			padding: 5px 0;
			border-radius: 10px;
			background-color: var(--global_clr_white);
			border: 1px solid var(--global_clr_gray);
			box-shadow: 1px 1px 3px 0px #b1c1ef;

			@media (max-width: 768px) {
				padding: 4px 0;
				min-height: 118px;
                max-height: 118px;
			}

			@media (max-width: 640px) {
				padding: 4px 0;
                min-height: 94px;
                max-height: 94px;
			}
			@media (max-width: 500px) {
				min-height: 68px;
				max-height: 68px;
			}

			&:nth-child(n+5){
				display: none;
			}

			.itemBlockHeader {

				.itemBlockImg {
					margin-bottom: 0;

					img {
						aspect-ratio: initial;
						width: 100px;
						max-width: 100px;
						max-height: 100px;

						@media (max-width: 640px) {
							width: 82px;
                            max-width: 82px;
                            max-height: 82px;
						}
					
						@media (max-width: 500px) {
							width: 60px;
							max-width: 60px;
							max-height: 60px;
						}
					}
				}
			}

			.itemBlockBody {
				display: none;
			}
		}
	}


	/*----------------------------------------
	  Free系（バナー）
	----------------------------------------*/

	/*バナー１件タイプ*/
	.viewKs_Free1 {
		
		.cpMain {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			max-width: 360px;

			.cpMainBody {
				width: 100%;

				>ul {

					.contents_link {
						font-size: 1.3rem;
						color: #000000;
						text-decoration: underline;
						letter-spacing: -0.6px;
						line-height: 1;

						&:hover {
							color: var(--global_clr_linkblue);
							text-decoration: none;
						}
					}
				}
			}
		}

		img {
			width: 100%;
			aspect-ratio: initial;
			max-height: 240px;
			/* object-fit: contain; */
			object-fit: inherit;
		}
	}

	/*バナー２件・分割型（title利用ケース）*/
	.viewKs_Free2 {

		.cpView {
			min-height: 157px;

			@media (max-width: 640px) {
				min-height: 127px;
				max-height: 127px;
			}

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

		.cpView:nth-child(1) {
			margin-bottom: 6px;
		}
		.cpView:nth-child(2) {
			margin-top: 0;
		}
		
		.cpHead {
			display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
		}

		.cpMain {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			max-width: 360px;

			align-items: initial;


			.cpMainBody {
			    width: 100%;
				height: 110px;
				
				@media (max-width: 768px) {
					height: 121px;
				}

				@media (max-width: 640px) {
					height: 91px;
				}

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

				>ul {

					.contents_link {
						font-size: 1.3rem;
						color: #000000;
						text-decoration: underline;
						letter-spacing: -0.6px;
						line-height: 1;

						&:hover {
							color: var(--global_clr_linkblue);
							text-decoration: none;
						}
					}
				}
			}
		}

		img {
			width: 100%;
			aspect-ratio: initial;
			object-fit: cover;
			max-height: 105px;
            border: 1px solid var(--global_clr_gray);

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

			@media (max-width: 640px) {
				max-height: 86px;
			}

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

	/*バナー２件・分割型（title無し　※.cpHeadを表示化）*/
	.viewKs_Free2.noTitle {
	
		.cpHead {
			display: none;
		}

		.cpMain {

			.cpMainBody {
			    width: 100%;
			}
		}

		img {
			width: 100%;
            aspect-ratio: initial;
			object-fit: cover;
            max-height: 140px;
			margin-top: 10px;

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

			@media (max-width: 640px) {
	            max-height: 110px;
			}

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

	/*バナー２件・一体型*/
	.viewKs_Free3 {

		.cpView {
			min-height: 320px;

			@media (max-width: 640px) {
				min-height: 260px;
				max-height: 260px;
			}

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

		.cpMain {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: initial;
			max-width: 360px;

			.cpMainBody {
			    width: 100%;

				>ul {

					li:nth-child(1) {
						margin-bottom: 10px;
					}

					.contents_link {
						font-size: 1.3rem;
						color: #000000;
						text-decoration: underline;
						letter-spacing: -0.6px;
						line-height: 1;

						&:hover {
							color: var(--global_clr_linkblue);
							text-decoration: none;
						}
					}
				}
			}
		}

		img {
			width: 100%;
			aspect-ratio: initial;
			/* aspect-ratio: 17 / 9; */
			object-fit: cover;
			max-height: 115px;
            border: 1px solid var(--global_clr_gray);

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

			@media (max-width: 640px) {
				max-height: 91px;
				min-height: initial;
			}

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

	/*バナー２件・一体型（title無し　※.cpHeadを表示化）*/
	.viewKs_Free3.noTitle {
	
		.cpHead,
		.cpFoot {
			display: none;
		}

		.cpMain {

			.cpMainBody {
			    width: 100%;

				>ul {

					li:nth-child(1) {
						margin-bottom: 0;
					}
				}
			}
		}

		img {
			width: 100%;
            aspect-ratio: initial;
			object-fit: cover;
			max-height: 144px;
            min-height: 144px;
			margin-top: 10px;

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

			@media (max-width: 640px) {
				max-height: 115px;
				min-height: initial;
			}

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

	/* バナー４件 */
	.viewKs_Free4 {
		
		.cpMain {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			max-width: 360px;
			
			.cpMainBody>ul {
				display: flex;
				flex-wrap: wrap;
				row-gap: 7px;
				justify-content: space-between;

				.contents_box {
					width: 48%;
					border: solid 1px var(--global_clr_darkbeige);
                    border-radius: 4px;
                    background-color: var(--global_clr_white);
				}

				.contents_link {
					font-size: 1.3rem;
                    color: #000000;
                    text-decoration: underline;
                    letter-spacing: -0.6px;
                    line-height: 1;

					&:hover {
						color: var(--global_clr_linkblue);
						text-decoration: none;
					}

					span {
						display: inline-block;
						padding: 0 2px;
					}
				}
			}
		}

		img {
			width: 100%;
			aspect-ratio: initial;
			object-fit: contain;
			max-height: 240px;
			margin-bottom: 3px;
		}
	}
	/*バナー４件（title無し　※.cpHeadを表示化）*/
	.viewKs_Free4.noTitle {
	
		.cpHead,
		.cpFoot {
			display: none;
		}

		.cpMain {

			.cpMainBody>ul  {
				row-gap: 4px;

				.contents_box {
					border: solid 0px var(--global_clr_darkbeige);
					background-color: transparent;

					.contents_block {
						text-align: center;
					}
				}
			}
		}

		img {
			aspect-ratio: 1 / 1;
            object-fit: contain;
            max-width: 146px;
            max-height: 146px;
            margin-top: 8px;
            margin-bottom: -4px;
            border: 1px solid var(--global_clr_gray);

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

			@media (max-width: 640px) {
	            max-width: 115px;
				max-height: 115px;
			}

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



/*----------------------------------------------------------
	キービジュアルサブ：MK4ST_RNK_0001：SC商品Box_ランキングAjax
----------------------------------------------------------*/
/*----------------------------------------------------------
	キービジュアルサブ：MK4PFRNR030_01：SC商品Box_レコメンド
----------------------------------------------------------*/
#fwCms_wrapper.layout_010.layoutType1 .frame_KS .MK4ST_RNK_0001,
#fwCms_wrapper.layout_010.layoutType1 .frame_KS .MK4PFRNR030_01 {
/*
	margin: 0;
	
	.cpMain {
		.cpMainTop,
		.cpMainBottom, 
		.cpMainBody .itemTopIcoArea, 
		.cpMainBody .itemIcoArea,
		.cpMainBody .itemBlockBody
		 {
			display:none;
		}
		
		.cpMainBody .swiper-wrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.cpMainBody .itemBlock {
			width: calc((100% - 12px) / 2);
			min-width: initial;
			margin: 1px;
			padding: 3px;
			border-radius: 6px;
			box-shadow: 0px 0px 2px 0 #8592B8;

		}

		.cpMainBody .itemBlock:nth-of-type(n+3) {
			margin-top: 8px;
		}
	}
*/
}




/*----------------------------------------------------------
	MK4PFRCG010_02：SCカテゴリからさがす（Top・アイコン）
----------------------------------------------------------*/
#fwCms_wrapper .MK4PFRCG010_02 {

	/* 画像縦サイズ・テキスト位置 */
	--this_img_height: 145px;
	--this_img_height_minus: -130px;
	--this_text_top: -90px;
	--this_text_left: 55%;
	@media (max-width: 768px) {
		--this_img_height: 115px;
		--this_img_height_minus: -100px;
		--this_text_top: -82px;
		--this_text_left: 45%;
	}

	margin-bottom: 50px;

	.cpHead {
		.cpHeadTitle {
			font-size: 16px;
			font-weight: bold;
			line-height: 24px;
		}
	}
	.cpMain {
		margin-top: var(--this_img_height);
	}
	.cpMainBody {
		position: relative;

		/* テキスト */
		.cpMainText{
			position: absolute;
			top:  var(--this_text_top);
			left: var(--this_text_left);

			span {
				display:block;
				margin: 4px;
				padding: 2px 6px;
				border-radius: 4px;
				background:rgba(255, 255, 255, 0.8);
			}
		}

		.cpMainImage {
			top: var(--this_img_height_minus);
			position: absolute;
			width: 100%;
			border-radius: 15px 15px 0 0;
			opacity: 0.7;
			z-index: -1;
			background-image: url(/excludes/KEC/common/img/cpnt/MK4PFRCG010_02/MK4PFRCG010_02_pc.jpg);
			background-repeat: no-repeat;
			background-position-x: center;
			background-size: 100%;

			/* 画面サイズ別に背景調整 */
			@media (max-width: 1400px) {
				background-size: inherit;
			}
			@media (max-width: 1020px) {
				background-size: 100%;
				background-image: url(/excludes/KEC/common/img/cpnt/MK4PFRCG010_02/MK4PFRCG010_02_sp.jpg);
			}
			@media (max-width: 768px) {
				background-size: 140%;
				background-image: url(/excludes/KEC/common/img/cpnt/MK4PFRCG010_02/MK4PFRCG010_02_sp.jpg);
			}

			.viewArea {
				height: 80px;
			}
			.transArea {
				height: 100px;
				background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
			}
			.whiteArea {
				height: 100px;
				background-color: #FFF;
			}
		}

		> ul {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;

			.contents_box {
				margin: 4px;
				border: 1px solid #FFF;
				border-radius: 14px;
				background-color: #FFF;
				box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.35);

				/* 画面サイズ別に１行の数を分岐 */
				width: calc((100% - 72px) / 9);

				@media (max-width: 1280px) {
					width: calc((100% - 64px) / 8);
				}
				@media (max-width: 1020px) {
					width: calc((100% - 56px) / 7);
				}
				@media (max-width: 768px) {
					width: calc((100% - 24px) / 3);
				}

				.contents_link {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					-ms-flex-direction: column;
					flex-direction: column;
					color: var(--global_clr_black);

					&:hover {
						text-decoration: underline !important;
					}

					.icon {
						height: 40px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						margin: 5px;
						img {
							margin: 0 auto;
							height: 42px;
							width: 48px;
							max-height: 42px;
							max-width: 48px;
						}
					}
					.text {
						font-size: 15px;
						line-height: 16px;
						font-weight: bold;
						text-align: center;
						padding: 0px 2px;
						min-height: 60px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: center;
						-ms-flex-pack: center;
						justify-content: center;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;

						@media (max-width: 1020px) {
							font-size: 14px;
							padding: 0;
						}

						@media (max-width: 768px) {
							font-size: 14px;
							padding: 0;
						}
					}
				}
			}
		}
	}
}


/*----------------------------------------------------------
	MK4ST_TOP_0002：ケーズデンキの特長
----------------------------------------------------------*/
#fwCms_wrapper .MK4ST_TOP_0002 {

	.cpMain {

		@media (max-width: 768px) {
			background: var(--global_clr_white);
		}
	}

	.svc_lv1_wrap {
		margin-bottom: 20px;

		/* for PC */
		@media (min-width: 769px) {
			/* 5列サービス紹介 */
			&.feature .svcBlock {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				padding: 0 2px;

				.svcList {
					width: calc((100% - 60px) / 5);
					min-width: 160px;
					border: 2px solid var(--global_clr_brightgray);
					margin: 5px;

					a {
						display: flex;
						flex-direction: column;
						text-decoration: none;
						padding: 10px 5px 5px 10px;

						h4, span {
							display: inline-block;
							text-align: center;
						}

						
						p {
							display: block;
						}

						.title {
							font-size: 18px;
							font-weight: bold;
							color: var(--global_clr_red);
							height: 40px;
							margin-top: 4px;
							&.small {
								font-size: 15px;
								@media (max-width: 1130px) {
									font-size: 1.5vw;
								}
							}

							@media (max-width: 1130px) {
								font-size: 1.9vw;
							}

						}
						.text1 {
							font-size: 12px;
							font-weight: bold;
							color: var(--global_clr_red);

							@media (max-width: 1130px) {
								font-size: 1.26vw;
							}
						}
						.text2 {
							font-size: 11px;
							color: var(--global_clr_black);

							@media (max-width: 1130px) {
								font-size: 0.92vw;
							}
						}

						img {
							width: 70px;
							height: 70px;
							margin: 0 auto;
						}
					}
				}
			}

			/* 3列バナー */
			&.banner .svcBlock {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.svcList {
					width: calc((100% - 48px) / 3);
					min-width: 196px;
					margin: 7px;

					a {
						display: flex;
						flex-direction: column;
						padding: 10px 0px 10px 0px;

						p {
							display: block;
						}

						img {
							margin: 0 auto;
							width: 100%;
							max-width: 420px;
						}
					}
				}
			}
		}

		/* for SP */
		@media (max-width: 768px) {
			/* 5列サービス紹介 */
			&.feature .svcBlock {
				display: flex;
				flex-direction: column;

				.svcList {
					width: 99%;
					margin: 6px 0;
					padding: 1px;
					border: 2px solid var(--global_clr_brightgray);

					a {
						text-decoration: none;
						display: grid;
						grid: 26px 22px 18px / 70px auto;
						.image { grid-area: 1 / 1 / 4 / 2;}
						.title { grid-area: 1 / 2 / 2 / 3;}
						.text1 { grid-area: 2 / 2 / 3 / 3;}
						.text2 { grid-area: 3 / 2 / 4 / 3;}

						h4, span {
							display: inline-block;
							text-align: left;
						}

						p {
							display: inline-block;
						}

						.title {
							font-size: 16px;
							font-weight: bold;
							color: var(--global_clr_red);
							padding-top: 2px;

							&.small {
								font-size: 15px;
							}
						}

						.text1 {
							font-size: 14px;
							font-weight: bold;
							color: var(--global_clr_black);
						}

						.text2 {
							font-size: 12px;
							color: var(--global_clr_black);
						}

						img {
							margin: 2px auto;
							width: 64px;
							height: 64px;
							max-width: 64px;
							max-height: 64px;
						}
					}
				}
			}

			/* 3列バナー */
			&.banner .svcBlock {
				display: flex;
				flex-direction: column;
				align-items: center;

				.svcList {
					width: 90%;
					margin: 0 auto 6px;

					a {
						display: flex;
						flex-direction: column;
						padding: 10px 0px 10px 0px;
						
						.image {
							text-align: center;
							img {
								margin: 0 auto;
								width: 96%;
								max-width: 540px;
							}
						}
					}
				}
			}
		}
	}
}



/*----------------------------------------------------------
	MK4ST_TOP_0003：店舗・チラシなど
----------------------------------------------------------*/
#fwCms_wrapper .MK4ST_TOP_0003 {

	.cpMain {

		@media (max-width: 768px) {
			background: var(--global_clr_white);
		}
	}

	.linkBlock {
		display: flex;
		flex-wrap: wrap;
		row-gap: 15px;
		column-gap: 15px;
		

		@media (max-width: 768px) {
			justify-content: space-between;
			padding: 8px;
            row-gap: 10px;
            column-gap: 10px;
		}

		.linkList {
			width: calc((100% - 65px) / 5 );
			@media (max-width: 1400px) {
				width: calc((100% - 48px) / 4 );
			}
			@media (max-width: 920px) {
				width: calc((100% - 33px) / 3 );
			}
			@media (max-width: 768px) {
				width: calc((100% - 10px) / 2);
				margin: 0;
			}

			a {
				padding: 0;
				display: inline-block;

				img {
					width: 100%;
					max-width: 320px;
				}
			}
		}
	}
}



/*----------------------------------------------------------
	MK4ST_TOP_0004：定期開催 催事イベント
----------------------------------------------------------*/
#fwCms_wrapper .MK4ST_TOP_0004 {

	.cpMain {

		@media (max-width: 768px) {
			background: var(--global_clr_white);
		}
	}

	.linkBlock {
		.linkList {
			margin: 5px;
			display: flex;
			flex-wrap: wrap;
			row-gap: 10px;
			padding: 20px 0px 20px 20px;
			border: 1px solid var(--global_clr_darkgray);
			@media (max-width: 768px) {
				margin: 5px 0;
				row-gap: 10px;
				padding: 10px 0 10px 5px;
				border: 0px solid var(--global_clr_darkgray);
			}
			
			li {
				&::after {
					content: "｜";
					color: var(--global_clr_darkgray);
				}

				a {
					padding: 0 2px;
					display: inline-block;
				}
			}
		}
	}
}


/*----------------------------------------------------------
	グローバルメニュー
----------------------------------------------------------*/
#fwCms_wrapper {
  header button.global_menu_pageup {
  	bottom: 170px;
  }

/*
  header .global_menu button.global_menu_pageup {
    @media (max-width: 768px) {
      bottom: 180px;
      transition: all 0.1s ease 0.2s;
    }
  }
  header .global_menu.close button.global_menu_pageup {
    @media (max-width: 768px) {
      bottom: 180px;
      transition: all 0.1s ease 0.2s;
    }
  }
*/
  header .global_menu button.global_menu_pageup {
    @media (max-width: 768px) {
      position: fixed !important;
      bottom: 175px;
      transition: all 0.1s ease 0.2s;
    }
  }
}

.MK4PFRDH200_01, 
#fwCms_wrapper footer.MK4PFRDH200_01 {
    .copyrightArea span {
        @media (max-width: 768px) {
            max-width: 240px;
		}
	}
}