body
{
	overflow-x:hidden;
}
/*------------------------- ロゴエリア -------------------------*/
#logoArea
{
	overflow:hidden;
	float: left;
}
#MainLogo
{
	width:130px;
}

/*------------------------- メニューエリア -------------------------*/
#topMenu
{
	z-index: 100;
	text-align: center;
	margin-top: 30px;
	padding-top:10px;
	height: 60px;
	overflow:hidden;
}

/*------------------------- カイゼンメニューエリア -------------------------*/
#ModelMenuArea
{
	text-align: center;
}
.model-menu
{
	display: inline-block;
	width: 100px;
	height: 100px;
	text-align: center;
}
.model-menu span
{
	position: absolute;
	width: 7vw;
	height: 7vw;
	min-width: 65px;
	min-height: 65px;
	border: 1px solid #000;
	border-radius: 100%;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 1vw;
	color: #000;
	transition: background-color 0.5s, color 0.5s;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.model-menu span:hover,
.model-menu.select span:hover
{
	background-color: #000000;
	color: #F39C9C;
}
/* 選択状態 */
.model-menu.select span
{
	background-color: #000000;
	color: #fff;
}
/* 詳細 */
.model-detail {
	display: none;
}
.model-detail.select {
	display: inline-block;
}
/*------------------------- 内容エリア -------------------------*/

/*メイン内容*/
#ModelContent
{
	position:relative;
	height: 74%;
	background: rgba(255,255,255,0.7);
	box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    min-height: 630px;
    margin-top: 3vh;
	
}
/*その他説明BOX*/
/* ERP説明div */
#DivErp {
	left: 9%;
	top: 0%;
	width:12%;
	max-width: 206px;
}
.other-box
{
    margin-top: 20px;
    position: absolute;
    min-width: 184px;
    width: 12%;
    height: 120px;
    font-size: 0.7vw;
    background-color:#fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
/* その他説明BOX タイトル */
.other-box span
{
	font-size: 1.2vw;
	font-weight: 600;
}
/* カイゼンボックス */
.kaizen-box
{
	position: absolute;
	display: flex;
	text-align: center;
    justify-content: center;
    align-items: center;
    color: #fff;
	font-size: 0.9vw;
    z-index: 5;
    width: 8vw;
    min-width:89px;
    min-height: 89px;
    height: 8vw;
	background-image: url('../images/point2.png');
	background-size: 100%;
    background-repeat: no-repeat;
}

/* 各説明BOX */
.detail-box
{
	position: absolute;
	max-width: 375px;
	width: 21%;
	height: 275px;
	background-color:#fff;
	box-shadow: 0 20px 50px rgba(0,0,0,0.1);
	transition: 1.0s;
	z-index: 3;
}
.detail-box:hover
{
	box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}
.box-line
{
    width: 5px;
    /*background  : linear-gradient(135deg, #e72f2d, #f6beb4);*/  /* BOXのグラデーション */
    background-color: #e72f2d;
    position: absolute;
    height: 100%;
    display: none;
    z-index: 10;
}

/* 各説明画像 */
.detail-box-inner img
{
	width: 100%;
    height: 185px;
}
/* 各説明文 */
.detail-box-inner div
{
	position: relative;
	background-color: #fff;
	padding: 0 0 0 10px;
	font-size: 0.7vw;
}
/* 各説明文タイトル */
.detail-box-inner div span.title
{
	font-size:1.4vw;
	margin: 0 0 0 25px;
	font-weight: 700;
}
/* 各説明文タイトル矢印 */
.detail-box-inner div .point
{
    position: absolute;
    left: 6px;
    content: "";
    width:1vw;
    height:2vw;
    background-image: url('../images/point.png');
	background-size: 100%;
    background-repeat: no-repeat;
}
.arrow-box
{
	position: absolute;
	width: 355px;
	height: 100px;
}
/* 関係性矢印コメント */
.arrow-comment
{
	position: absolute;
	color: #111;
	font-size: 1.5vw;
}
.arrow-comment:before
{
    width: 60px;
    left:0px;
    transform: translate(30px, 0px);
}
/*ERP → 簡易スケジューラー矢印*/
#Erp_Sche {
    width: 12vw;
    margin: 0 0 0 29%;
}
/* 簡易スケジューラー → 工程管理矢印 */
#Sche_Pm {
    width: 16vw;
    margin: 11% 0 0 8%;
}
/* 簡易スケジューラー → 作業端末矢印 */
#Sche_Work {
    width: 14vw;
    margin: 6% 0 0 0%;
}
/* 作業実績 → 簡易スケジューラー矢印 */
#Work_Sche {
    width: 16vw;
    margin: -8% 0 0 -3%;
}
/* 作業実績 → 工程管理矢印 */
#Work_Pm {
    width: 11vw;
    margin: -50px 0 0 0;
}
/* 小タイトル */
#ModelAddendum
{
	position: relative;
	background-color: #000;
	left: -5vw;
    top: 38.5vh;
    min-height: 68px;
    max-height: 125px;
    height: 12vh;
    width: 23%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 7%;
    z-index: 2;
}
#ModelAddendum span
{
	font-size: 1.4vw;
	color: #fff;
}
/* カイゼンモデル */
#ModelTitle
{
	position: relative;
	font-size: 3vw;
    display: inline-block;
    color: #111111;
    white-space: nowrap;
    top: 57.5vh;
    left: 75%;
    z-index: 1;
}

/*------------------------- アニメーション -------------------------*/
/*-----------------*/
/*左からふわっと
/*-----------------*/
.fadein-from-left {
	opacity : 0;
	transform : translate(-50px, 0);
	transition : all 500ms;
	-moz-transition-delay:500ms;
	-webkit-transition-delay:500ms;
	-o-transition-delay:500ms;
	-ms-transition-delay:500ms;
}
/*-----------------*/
/*下からふわっと
/*-----------------*/
/* 画面外にいる状態 */
.fadein-from-bottom {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 500ms;
}
/*-----------------*/
/*右からふわっと
/*-----------------*/
.fadein-from-right {
	opacity : 0;
	transform : translate(50px, 0);
	transition : all 500ms;
	-moz-transition-delay:500ms;
	-webkit-transition-delay:500ms;
	-o-transition-delay:500ms;
	-ms-transition-delay:500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
/* ----------------------------------------------------------------------- */
/* -------------------------------PCサイズ縮小---------------------------- */
/* ----------------------------------------------------------------------- */
@media screen and (min-width: 1025px) and (max-height:849px) {
	#ModelContent.disp-pc #ModelTitle {
		top: 557px;
	}
	#ModelContent.disp-pc #ModelAddendum {
		top: 420px;
	}
}

/* ----------------------------------------------------------------------- */
/* ---------------------------------ipad pro------------------------------ */
/* ----------------------------------------------------------------------- */
/* 横 */
@media screen and (max-width: 1366px) and (max-height:1024px) {
	#ModelContent {
		margin-top: 0;
	}
	.kaizen-box .kaizen-content {
		margin: 0.3vw 0 0 0;
	}
	.detail-box {
		height: 33%;
	}
	.detail-box-inner img {
		height: 77%;
	}
	/* 各説明文タイトル矢印 */
	.detail-box-inner div .point
	{
	}
	/*ERP → 簡易スケジューラー矢印*/
	#Erp_Sche {
		width: 12vw;
		margin: 0 0 0 27%;
	}
	/* 簡易スケジューラー → 工程管理矢印 */
	#Sche_Pm {
		width: 16vw;
		margin: 11% 0 0 5%;
	}
	/* 簡易スケジューラー → 作業端末矢印 */
	#Sche_Work {
		width: 14vw;
		margin: 6% 0 0 0%;
	}
	/* 作業実績 → 簡易スケジューラー矢印 */
	#Work_Sche {
		width: 17vw;
		margin: -8% 0 0 -3%;
	}
	/* 作業実績 → 工程管理矢印 */
	#Work_Pm {
		width: 11vw;
		margin: -50px 0 0 0;
	}
	/* Android */
	#ModelContent.disp-android #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-android #ModelTitle {
		top: 569px;
	}
	/*ERP → 簡易スケジューラー矢印*/
	#ModelContent.disp-android #Erp_Sche {
		width: 12vw;
		margin: 0 0 0 12%;
	}
	/* 簡易スケジューラー → 作業端末矢印 */
	#ModelContent.disp-android #Sche_Pm {
		width: 14vw;
	}
	/* その他説明div */
	#ModelContent.disp-android .other-box {
		min-width: 77px;
	}
	/* その他説明div */
	#ModelContent.disp-android #Work_Pm ~ div {
		left: 13vw !important;
	}
}
/* 縦 */
@media screen and (max-width: 1024px) and (max-height:1366px) {
	#ModelContent.disp-mobile #ModelTitle {
		top: 41.5vh;
	}
	#ModelContent.disp-mobile #ModelAddendum {
		top: 26.5vh;
	}
	#ModelContent.disp-pc #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-pc #ModelTitle {
		top: 569px;
	}
	/* Android */
	#ModelContent.disp-android #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-android #ModelTitle {
		top: 569px;
	}
}
/* ----------------------------------------------------------------------- */
/* ------------------------------タブレット用------------------------------ */
/* ----------------------------------------------------------------------- */
/* 横 */
@media screen and (max-width: 1024px) and (max-height:768px) {
	/*------------------------- トップメニュー -------------------------*/
	li
	{
		list-style: none;
		width:161px;
	}
	.detail-box {
		height: 18%;
	}
	.detail-box-inner img {
		height: 77%;
	}
	/* 各説明文タイトル矢印 */
	.detail-box-inner div .point
	{
	}
	#ModelContent.disp-mobile #ModelTitle {
		top: 64vh;
	}
	#ModelAddendum span
	{
		font-size: 1.8vw;
	}
	/* ERP説明div */
	#DivErp {
		left: 4%;
		width:12%;
		min-width: 148px;
	}
	#DivDetailBoxSche {
		top: 9% !important;
		left: 27% !important;
	}
	#DivDetailBoxPm {
		top: 9% !important;
	}
	#DivKaizenBoxWork {
	}
	#DivDetailBoxWork {
	}
	/*ERP → 簡易スケジューラー矢印*/
	#Erp_Sche {
		width: 12vw;
		margin: 1% 0 0 13%;
	}
	/* 簡易スケジューラー → 工程管理矢印 */
	#Sche_Pm {
		width: 16vw;
		margin: 11% 0 0 3%;
	}
	/* 簡易スケジューラー → 作業端末矢印 */
	#Sche_Work {
		width: 14vw;
		margin: 6% 0 0 0%;
	}
	/* 作業実績 → 簡易スケジューラー矢印 */
	#Work_Sche {
		width: 16vw;
		margin: -8% 0 0 -3%;
	}
	/* 作業実績 → 工程管理矢印 */
	#Work_Pm {
		width: 11vw;
		margin: -19px 0 0 0;
	}
	/*-----------------------------/
	/*----------- PC用 -----------*/
	/*-----------------------------/
	#ModelContent.disp-pc #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-pc #ModelTitle {
		top: 569px;
	}
}
/* 縦 */
@media screen and (max-width: 768px) and (max-height:1024px) {
	/*------------------------- ロゴエリア -------------------------*/
	#MainLogo
	{
		width:100px;
	}
	/*------------------------- トップメニュー -------------------------*/
	#topMenu
	{
		height: 52px;
		margin-top: 5px;
	}
	li
	{
		list-style: none;
		width:70px;
	}
	#topMenu a
	{
		font-size: 12px;
		line-height: 13px;
	}
	#topMenu div
	{
		font-size: 12px;
		line-height: 13px;
	}
	.detail-box {
		height: 18%;
	}
	.detail-box-inner img {
		height: 77%;
	}
	/* 各説明文タイトル矢印 */
	.detail-box-inner div .point
	{
		height:2vh;
		
	}
	.detail-box-inner div span.title {
		margin: 0 0 0 11px;
	}
	#ModelAddendum {
		top: 37vh;
	}
	#ModelAddendum span
	{
		font-size: 1.8vw;
	}
	/* ERP説明div */
	#DivErp {
		left: 4%;
		width:12%;
		min-width: 97px;
		max-width: 120px;
	}
	#ModelTitle {
		top: 53vh;
	}
	#DivDetailBoxSche {
		top: 9% !important;
		left: 27% !important;
	}
	#DivDetailBoxPm {
		top: 9% !important;
	}
	#DivKaizenBoxWork {
		top: 38% !important;
	}
	#DivDetailBoxWork {
		top: 43% !important;
	}
	/*ERP → 簡易スケジューラー矢印*/
	#Erp_Sche {
		 width: 12vw;
		 margin: 4% 0 0 9%;
	}
	#Erp_Sche ~ div {
		top: 6vw !important;
		left: -2vw !important;
	}
	/* 簡易スケジューラー → 工程管理矢印 */
	#Sche_Pm {
		width: 16vw;
		margin: 20% 0 0 2%;
	}
	#Sche_Pm ~ div {
		top: 7.8vw !important;
		left: 2vw !important;
	}
	/* 簡易スケジューラー → 作業端末矢印 */
	#Sche_Work {
		width: 14vw;
		margin: 6% 0 0 0%;
	}
	/* 作業実績 → 簡易スケジューラー矢印 */
	#Work_Sche {
		width: 16vw;
		margin: -4% 0 0 -3%;
	}
	/* 作業実績 → 工程管理矢印 */
	#Work_Pm {
		width: 11vw;
		margin: -9vw 0 0 7vw;
	}
}
/* ----------------------------------------------------------------------- */
/* -------------------------------iphone X 用-------------------------------- */
/* ----------------------------------------------------------------------- */
/* 縦 */
@media screen and (max-width: 375px) and (max-height:812px) {
	#ModelContent.disp-mobile .other-box {
		font-size: 1.2vw;
	}
	#ModelContent.disp-mobile .detail-box-inner div {
    		font-size: 1.2vw;
	}
	#ModelContent.disp-mobile .kaizen-box {
		min-width: 50px;
		min-height: 50px;
	}
	#ModelContent.disp-mobile #ModelTitle {
		font-size: 5vw;
		left: 60%;
	}
	#ModelContent.disp-mobile #DivErp {
		max-width: 50px;
		max-height: 70px;
		top:10%;
	}
	#ModelContent.disp-mobile #DivKaizenBoxSche {
		top: 15% !important;
	}
	#ModelContent.disp-mobile #DivKaizenBoxPm {
		top: 15% !important;
	}
	#ModelContent.disp-mobile #DivKaizenBoxWork {
	}
	#ModelContent.disp-mobile #DivDetailBoxSche {
		top: 16% !important;
	}
	#ModelContent.disp-mobile #DivDetailBoxPm {
		top: 16% !important;
	}
	#ModelContent.disp-mobile #DivDetailBoxWork {
	}
	
	#ModelContent.disp-mobile #Work_Sche {
		width: 17vw;
		margin: -20% 0 0 -3%;
	}
	/* 作業実績 */
	#ModelContent.disp-mobile #Work_Sche ~ div {		
		top: 7.5vw !important;
		left: 3vw !important;
	}
	#ModelContent.disp-mobile #Sche_Work {
		margin: 0% 0 0 -2%;
	}
	#ModelContent.disp-mobile #Sche_Work ~ div　{
		margin: 0% 0 0 -5%;
	}
	#ModelContent.disp-mobile #Sche_Pm ~ div {		
		top: 10.8vw !important;
		left: 4vw !important;
	}
	#ModelContent.disp-mobile #Work_Pm {
		margin: -27% 0 0 5%; 
	}
	#ModelContent.disp-mobile #Work_Pm ~ div {
		top: 1vw;
	}
}
/* 横 */
@media screen and (max-width: 812px) and (max-height:375px) {
	/* 小タイトル */
	#ModelAddendum
	{
		top: 77.5vh;
		width: 23%;
	}
	#ModelAddendum span
	{
		font-size: 1.4vw;
	}
	/* カイゼンモデル */
	#ModelTitle
	{
		top: 139.5vh;
		left: 75%;
	}
}
/* ----------------------------------------------------------------------- */
/* ----------------------------iphone 6/7/8用----------------------------- */
/* ----------------------------------------------------------------------- */
/* 縦 */
@media screen and (max-width: 375px) and (max-height:667px) {
	#ModelContent.disp-mobile #Erp_Sche {
		margin: 4% 0 0 7%;
	}
	#ModelContent.disp-mobile #Sche_Pm ~ div {
		top:13.8vw !important;
	}
	#ModelContent.disp-mobile #ModelTitle {
		top: 569px;
	}
	#ModelContent.disp-mobile #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-mobile .kaizen-box {
		font-size: 1.2vw;
	}
	#ModelContent.disp-mobile #DivKaizenBoxWork {
		top: 43% !important;
	}
	#ModelContent.disp-mobile #DivDetailBoxWork {
		top: 45% !important;
	}
	#ModelContent.disp-mobile #DivErp {
		min-width: 77px;
	}
}
/* 横 */
@media screen and (max-width: 667px) and (max-height:375px) {
	#ModelContent.disp-mobile #ModelTitle {
		top: 569px;
	}
	#ModelContent.disp-mobile #ModelAddendum {
		top: 450px;
	}
}
/* ----------------------------------------------------------------------- */
/* ----------------------------iphone 5/SE用----------------------------- */
/* ----------------------------------------------------------------------- */
/* 縦 */
@media screen and (max-width: 320px) and (max-height:568px) {
	#ModelContent.disp-mobile #ModelTitle {
		top: 569px;
	}
	#ModelContent.disp-mobile #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-mobile #DivKaizenBoxWork {
		top: 40% !important;
	}
	#ModelContent.disp-mobile #DivDetailBoxWork {
		top: 40% !important;
	}
	#ModelContent.disp-mobile #DivErp {
		min-width: 77px;
	}
}
/* 横 */
@media screen and (max-width: 568px) and (max-height:320px) {
	#ModelContent.disp-mobile #ModelTitle {
		top: 569px;
	}
	#ModelContent.disp-mobile #ModelAddendum {
		top: 450px;
	}
	#ModelContent.disp-mobile #DivKaizenBoxWork {
		top: 44% !important;
	}
	#ModelContent.disp-mobile #DivDetailBoxWork {
		top: 47% !important;
	}
	#ModelContent.disp-mobile #Work_Sche {
		width: 17vw;
	    margin: -10% 0 0 -3%;
	}
	#ModelContent.disp-mobile #Sche_Work {
		margin: 5% 0 0 -2%;
	}
	#ModelContent.disp-mobile #Work_Pm {
		margin: -11% 0 0 5%;
	}
}