@import "./lib/Config.less";
	
	#main_product{
		// margin-top: @carousel_margin;
		position: relative;
		z-index: 1;
		background-color: #fff;
		//
		.container{
			// background-color: #fff;
			border-radius 	: 5px;
			min-height 		: 200px;
			padding 		: 0px;
			padding-bottom  : 30px; 
			//４
			@media(min-width: 980px){
				padding 		: 40px 0px;
			}
			.product-container{
				width 					: 100%;
				display 				: grid;
				grid-template-columns 	: 1fr;
				grid-template-rows 		: 1fr 1fr;
				grid-template-areas 	: "pdc_01"
										  "pdc_02";
				@media(min-width: @break_point_md){ 
					grid-template-columns 	: 1fr 1fr;
					grid-template-rows 		: 1fr;  
					grid-template-areas 	: "pdc_01 pdc_02";
				}
				//
				.pdc-block{
					padding: 50px 20px;
					position: relative;
					display: flex;
					justify-content: center;
					align-items : center;
					flex-direction : column;
					//
					@media(min-width: 980px){ 
						padding: 50px;
					}
					.block-main{
						@border_w 				: 30px;
						width 					: 100%;
						display 				: grid;
						grid-template-columns 	: @border_w 9fr 5px 4fr;
						grid-template-rows 		: 1fr;
						grid-template-areas 	: "col_01 col_02 col_hr col_03";
						//
						.block-col{
							.card-01{ grid-area: card_01; position: relative; }
							.card-02{ grid-area: card_02; position: relative; }
							.card-03{ grid-area: card_03; position: relative; }
							.card-hr{ grid-area: card_hr;}
						}
						.card{
							position: relative;

							//
							.bone{
								width 		: 100%;
								padding-top : 66.6%;
							}
							&#card_01 .bone{ padding-top: 66.6%; }
							&#card_02{ height: 100%; }
							&#card_03{ height: 100%; }

							.content{
								background-color: #fff;
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0px;
								left: 0px;
								overflow: hidden;
								display: flex;
								justify-content: center;
								align-items : center;
								overflow: hidden;
								//
								img{
									height: 100%;
								}
							}
						}
						.col-01{
							grid-area 				: col_01;
							display 				: grid;
							grid-template-columns 	: 1fr;
							grid-template-rows 		: 1fr 1fr @border_w;
							grid-template-areas 	: "card_01"
											          "card_02"
											          "card_03";
							.card-01 .title-container{
								transform:rotate(270deg);
								position: absolute;
							    top: 43px;
    							left: -49px;
							    font-size: 18px;
							    color: rgba(59, 62, 69, 0.8);
							}
						}
						.col-02{
							grid-area 				: col_02;
							display 				: grid;
							grid-template-columns 	: 9fr @border_w;
							grid-template-rows 		: 6fr @border_w;
							grid-template-areas 	: "card_01 card_01"
											          "card_02 card_03";
							//
							.title-container{
								width: 130%;
								height: 50%;
								position: absolute;
								bottom:  -60px;
								left : -@border_w;
								border: 2px solid #cc9a07;
								//
								@media(min-width: 980px){ 
									width: 100%;
									bottom:-@border_w;
								}
								.title{
									color 			: rgba(59, 62, 69, 1);
									font-size 		: 22px;
									position 		: absolute;
									bottom 			: -11px;
									left 			: 15px;
									background-color: #fff;
									padding 		: 0px 10px;
								}
							}
						}
						.col-03{
							grid-area 				: col_03;
							display 				: grid;
							grid-template-columns 	: 1fr;
							grid-template-rows 		: 1fr 5px 1fr @border_w;
							grid-template-areas 	: "card_01"
													  "card_hr"
											          "card_02"
											          "card_03";
							.card-03{
								position: relative;
								//
								.title-container{
									position: absolute;
									right: 0px;
									bottom: -13px;
									color: rgba(59, 62, 69, 0.3);
    								font-size: 40px;
    								padding-right: 10px;
    								border: 3px solid #cc9a07; 
    								border-width: 0px 6px 0px 0px;
    								font-weight: 900;
    								height: 32px;
								}
							}
						}
						.col-hr{
							grid-area 				: col_hr;
						}
					}
					.pdc-title{
						font-size: 28px;
						margin-top: 15px;
						color 		: #3b3e45;
					}
				}
				.pdc-01{
					grid-area 		: pdc_01;
				}
				.pdc-02{
					grid-area 		: pdc_02;
				}
			}

		}
	}
	#footer-wrapper{
		
	}