@charset "UTF-8";
/*数値の設定
------------------------------------------*/
/*上記数値の設定を呼び出しているmixin
------------------------------------------*/
/*
よく使用するmixin
------------------------------------------*/
/* products_area ===============*/
.products_area { height: 300vh; transition: .3s; }
.products_area .products__sticky { position: sticky; top: 0; height: 100vh; }
.products_area .productsFlowContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.products_area .productsFlowContainer h3 { letter-spacing: 2px; margin: 0 0 40px; font-size: 16px; }
.products_area .productBoxLeft { width: 55%; display: flex; align-items: center; }
.products_area .productBoxRight { width: 45%; padding-left: 150px; display: flex; align-items: center; }
.products_area .products__img { position: relative; }
.products_area .products__img > figure + figure { opacity: 0; transition: .4s; position: absolute; top: 0; left: 0; z-index: 1; }
.products_area .panel + .panel { border-top: 1px solid #ddd; }
.products_area .productBoxRight .producList { max-width: 450px; width: 100%; }
.products_area .panel_caseTitle { height: 90px; display: flex; align-items: center; }
.products_area .panel_caseTitle span { color: #B2B2B2; transition: 0.3s ease; }
.products_area .panel_caseTitle span:nth-child(1)::after { content: ""; width: 25px; height: 1px; display: inline-block; background: #B2B2B2; margin: 0 10px 4px; opacity: 0.5; vertical-align: middle; transition: 0.3s ease; }
.products_area .panel.active .panel_caseTitle span { color: #000; }
.products_area .panel.active .panel_caseTitle span:nth-child(1)::after { background: #000; }
.products_area .panel_caseContent h3 { margin: 0 0 10px; }
.products_area .panel_caseContent p { padding: 0 0 80px; }
.products_area .entryFlowList__detail { height: 0; overflow: hidden; }
@media only screen and (max-width: 991px) { .products_area .productBoxRight { padding-left: 50px; } }
@media only screen and (max-width: 767px) { .products_area { padding-top: 100px; margin-top: -70px; height: auto; }
  .products_area .products__sticky { position: static; top: 0; height: auto; }
  .products_area .productsFlowContainer { position: static; top: 0; left: 0; transform: translate(0, 0); width: 100%; }
  .products_area .productsFlowContainer h3 { margin: 0 0 20px; }
  .products_area .productBoxLeft { display: none; }
  .products_area .productBoxRight { width: 100%; padding-left: 0; display: block; }
  .products_area .entryFlowList__detail { height: auto; overflow: auto; }
  .products_area .panel_caseTitle { height: 70px; }
  .products_area .panel_caseContent { padding: 0 0 20px; }
  .products_area .panel_caseContent h3 { margin: 20px 0 10px; }
  .products_area .panel_caseContent p { padding: 0; } }

/*#products_area{width: 100%; position: relative; overflow: hidden;
	.products_scene .trigger_point{height: 160vh; width: 100%; display: block;}

	.products_img{width: 50%; display: flex; align-items: center;}
	.products_img_inner{padding-left: 40px;}
	.products_img_inner h3{letter-spacing: 2px; margin: 0 0 40px; font-size: 16px;}
	.products_caseList{width: 50%; padding-left: 150px; display: flex; align-items: center;}
	.p_caseList_inner{max-width: 450px; width: 100%;
		.panel{}
		.panel + .panel{border-top: 1px solid #ddd;}
		.panel_caseTitle{height: 100px; display: flex; align-items: center;}
		.panel_caseTitle span{color: #B2B2B2; transition: 0.3s ease;}
		.panel_caseTitle span:nth-child(1)::after{
			content: ""; width: 25px; height: 1px; display: inline-block;
			background: #B2B2B2; margin: 0 10px 4px; opacity: 0.5; vertical-align: middle; transition: 0.3s ease;
		}
		.panel_caseTitle.active span{color: #000;}
		.panel_caseTitle.active span:nth-child(1)::after{background: #000;}
	}
	.panel_caseContent{height: 0; overflow: hidden; transition: 0.3s;}
	.panel_caseContent h3{margin: 0 0 10px;}
	.panel_caseContent p{padding: 0 0 80px;}
	
	@include tab{
		.products_caseList{padding-left: 50px;}
	}
	@include smp{margin: 60px 0 0;
		.products_scene{display: none;}
		.products_img{width: 100%;}
		.products_img_inner{padding: 0 20px;}
		.products_img_inner h3{margin: 0 0 20px;}
		.products_caseList{width: 100%; padding: 0 20px;}
		.p_caseList_inner{padding: 0 0 40px;
			.panel_caseTitle{height: 70px;}
		}
		.panel_caseContent{height: auto;}
		.panel_caseContent p{padding: 0 0 40px;}
	}
}

#products_area #products{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 2;
	@include smp{position:static; height: auto;}
}
#products_area.area_show #products{position: fixed;}
#products_area.end_show #products{top: auto; bottom: 0;}*/