@charset "utf-8";

@media screen and (min-width:768px){
/*pc・タブレットcss*/


/* +++++++++++++++++++++++++ */

#machine,
#scaffold {
	position:relative;
	padding-bottom:12vw;
}
#machine .content-inner
#scaffold .content-inner{
	position:relative;
	z-index:2;
}
.mv{
	position:relative;
	height:100vh;
	margin-bottom:24vw;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.mv .deco-txt{
	position:absolute;
	z-index:2;
	bottom:-15vw;
	width:60vw;
}
.mv:before{
	content:"";
	position:absolute;
	top:0;
	width:calc(100% - 4vw);
	height:calc(100vh + 12vw);
}
.mv:after{
	content:"";
	position:absolute;
	top:0;
	width:70%;
	height:100%;
}
.mv .txt-box{
	position:relative;
	z-index:2;
}
.mv .ttl{
	margin-bottom:5vw;
	padding-left:5vw;
}
.mv .ttl .en{
	display:block;
	font-size:1.5vw;
	line-height:1;
	font-family: "Oswald", serif;
	font-weight:500;
	margin-bottom:1vw;
}
.mv .ttl .jp{
	display:block;
	font-size:2.5vw;
	line-height:1;
	font-weight:700;
}
.mv .copy{
	margin-bottom:5vw;
	color:#00398D;
	font-size:3.6vw;
	font-weight:700;
	line-height:1.4;
}
.mv .copy .bar{
	position:relative;
}
.mv .copy .bar:before{
	content:"";
	position:absolute;
	background-color:#88DD00;
	height:100%;
	width:100%;
}
.mv .copy .inner{
	position:relative;
	z-index:2;
	padding: 0 1em;
}
.mv .copy{
}
.mv .copy .bar {
	position:relative;
	display:inline-block;
}
.mv .copy .bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	background:#000;
	position: absolute;
	top: 0;
	z-index: 1;
}
.mv .txt{
	width:20vw;
	font-size:1vw;
	line-height:2.2;
	margin-left:5vw;
}


/* +++++++++++++++++++++++++ */

#machine{
	background-color:#00398D;
}
#machine:before{
	content:"";
	position:absolute;
	right:0;
	top:0;
	width:4vw;
	height:100%;
	background-color:#fff;
}
#machine .mv .deco-txt{
	right:0;
}
#machine .mv:before{
	left:0;
	background-color:#003080;
}
#machine .mv:after{
	right:0;
	background: url(../img/business/machine_mv_img.jpg) no-repeat top left / cover;
}
#machine .mv .ttl{
	padding-left:5vw;
}
#machine .mv .ttl .en{
	color:#88DD00;
}
#machine .mv .ttl .jp{
	color:#fff;
}
#machine .mv .copy .bar {
	color:#003180;
}
#machine .mv .copy .bar:before {
	background:#87DD00;
	left: 0;
}
#machine .mv .copy.ori-anime.active .copy01 .bar:before{
	animation: machine_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
}
#machine .mv .copy.ori-anime.active .copy02 .bar:before{
	animation:  machine_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
}
#machine .mv .copy .bar .inner {
	opacity:0;
}
#machine .mv .copy.ori-anime.active .bar .inner {
    animation: machine_mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
}
@keyframes machine_mv_copy_passing_bar{
	0%{left:0;width:0}
	100%{left:0;width:100%;opacity: 1;}
}
@keyframes machine_mv_copy_passing_delay{
	0%{opacity:0}
	50%{opacity:0}
	100%{opacity:1}
}

#machine .mv .txt{
	color:#fff;
	margin-left:5vw;
}

/* +++++++++++++++++++++++++ */

#scaffold{
	background-color:#fff;
}
#scaffold:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:4vw;
	height:100%;
	background-color:#00398D;
}
#scaffold:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:4vw;
	background-color:#00398D;
}
#scaffold .mv{
	-webkit-box-pack: flex-end; -ms-flex-pack: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end;
}
#scaffold .mv .deco-txt{
	left:0;
}
#scaffold .mv:before{
	right:0;
	background-color:#EDF0F7;
}
#scaffold .mv:after{
	left:0;
	background: url(../img/business/scaffold_mv_img.jpg) no-repeat top left / cover;
}
#scaffold .mv .ttl{
	padding-left:22vw;
}
#scaffold .mv .ttl .en{
	color:#00398D;
}
#scaffold .mv .ttl .jp{
}
#scaffold .mv .copy{
	text-align:right;
}
#scaffold .mv .copy .bar {
	color:#88DD00;
}
#scaffold .mv .copy .bar:before {
	background:#00398D;
	right: 0;
}
#scaffold .mv .copy.ori-anime.active .copy01 .bar:before{
	animation: scaffold_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
}
#scaffold .mv .copy.ori-anime.active .copy02 .bar:before{
	animation:  scaffold_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
}
#scaffold .mv .copy .bar .inner {
	opacity:0;
}
#scaffold .mv .copy.ori-anime.active .bar .inner {
    animation: scaffold_mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
}
@keyframes scaffold_mv_copy_passing_bar{
	0%{right:0;width:0}
	100%{right:0;width:100%;opacity: 1;}
}
@keyframes scaffold_mv_copy_passing_delay{
	0%{opacity:0}
	50%{opacity:0}
	100%{opacity:1}
}


#scaffold .mv .txt{
	margin-left:22vw;
}

.chat-list li .inner{
	background-color:#E4EBF3;
}
.chat-list li .inner:before{
	background-color:#E4EBF3;
}










}

@media (max-width: 768px) {
	
	
	/* +++++++++++++++++++++++++ */
	
	#machine,
	#scaffold {
		position:relative;
		padding-bottom:12vw;
	}
	#machine .content-inner
	#scaffold .content-inner{
		position:relative;
		z-index:2;
	}
	.mv{
		position:relative;
		margin-bottom:24vw;
		padding-bottom:15vw;
		padding-top:105vw;
	}
	.mv .deco-txt{
		position:absolute;
		z-index:2;
		bottom:-15vw;
		width:90vw;
	}
	.mv:before{
		content:"";
		position:absolute;
		top:0;
		width:calc(100% - 4vw);
		height:100%;
	}
	.mv:after{
		content:"";
		position:absolute;
		top:24vw;
		width:100%;
		height:84vw;
	}
	.mv .txt-box{
	}
	.mv .ttl{
		position:absolute;
		top:5vw;
		left:5vw;
		z-index:2;
	}
	.mv .ttl .en{
		display:block;
		font-size:5vw;
		line-height:1;
		font-family: "Oswald", serif;
		font-weight:500;
		margin-bottom:1vw;
	}
	.mv .ttl .jp{
		display:block;
		font-size:6.5vw;
		line-height:1;
		font-weight:700;
	}
	.mv .copy{
		position:relative;
		z-index:2;
		margin-bottom:3vw;
		color:#00398D;
		font-size:6vw;
		font-weight:700;
		line-height:1.8;
	}
	.mv .copy .bar{
		position:relative;
	}
	.mv .copy .bar:before{
		content:"";
		position:absolute;
		background-color:#88DD00;
		height:100%;
		width:100%;
	}
	.mv .copy .inner{
		position:relative;
		z-index:2;
		padding: 0 1em;
	}
	.mv .copy{
	}
	.mv .copy .bar {
		position:relative;
		display:inline-block;
	}
	.mv .copy .bar:before {
		content: '';
		display: inline-block;
		width: 0;
		height: 100%;
		background:#000;
		position: absolute;
		top: 0;
		z-index: 1;
	}
	.mv .txt{
		position:relative;
		z-index:2;
		line-height:2.2;
		margin:0 10vw 0 5vw;
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#machine{
		background-color:#00398D;
	}
	#machine:before{
		content:"";
		position:absolute;
		right:0;
		top:0;
		width:4vw;
		height:100%;
		background-color:#fff;
	}
	#machine .mv .deco-txt{
		right:0;
	}
	#machine .mv:before{
		left:0;
		background-color:#003080;
	
	}
	#machine .mv:after{
		right:0;
		background: url(../img/business/machine_mv_img.jpg) no-repeat top left / cover;
	}
	#machine .mv .ttl{
	}
	#machine .mv .ttl .en{
		color:#88DD00;
	}
	#machine .mv .ttl .jp{
		color:#fff;
	}
	#machine .mv .copy .bar {
		color:#003180;
	}
	#machine .mv .copy .bar:before {
		background:#87DD00;
		left: 0;
	}
	#machine .mv .copy.ori-anime.active .copy01 .bar:before{
		animation: machine_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
	}
	#machine .mv .copy.ori-anime.active .copy02 .bar:before{
		animation:  machine_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
	}
	#machine .mv .copy .bar .inner {
		opacity:0;
	}
	#machine .mv .copy.ori-anime.active .bar .inner {
		animation: machine_mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
	}
	@keyframes machine_mv_copy_passing_bar{
		0%{left:0;width:0}
		100%{left:0;width:100%;opacity: 1;}
	}
	@keyframes machine_mv_copy_passing_delay{
		0%{opacity:0}
		50%{opacity:0}
		100%{opacity:1}
	}
	
	#machine .mv .txt{
		color:#fff;
		margin-left:5vw;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#scaffold{
		background-color:#fff;
	}
	#scaffold:before{
		content:"";
		position:absolute;
		left:0;
		top:0;
		width:4vw;
		height:100%;
		background-color:#00398D;
	}
	#scaffold:after{
		content:"";
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height:4vw;
		background-color:#00398D;
	}
	#scaffold .mv{
		-webkit-box-pack: flex-end; -ms-flex-pack: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-justify-content: flex-end; justify-content: flex-end;
	}
	#scaffold .mv .deco-txt{
		left:0;
	}
	#scaffold .mv:before{
		right:0;
		background-color:#EDF0F7;
	}
	#scaffold .mv:after{
		left:0;
		background: url(../img/business/scaffold_mv_img.jpg) no-repeat top left / cover;
	}
	#scaffold .mv .ttl{
		padding-left:5vw;
	}
	#scaffold .mv .ttl .en{
		color:#00398D;
	}
	#scaffold .mv .ttl .jp{
	}
	#scaffold .mv .copy{
		text-align:right;
	}
	#scaffold .mv .copy .bar {
		color:#88DD00;
	}
	#scaffold .mv .copy .bar:before {
		background:#00398D;
		right: 0;
	}
	#scaffold .mv .copy.ori-anime.active .copy01 .bar:before{
		animation: scaffold_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s 1 normal forwards;
	}
	#scaffold .mv .copy.ori-anime.active .copy02 .bar:before{
		animation:  scaffold_mv_copy_passing_bar 1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 normal forwards;
	}
	#scaffold .mv .copy .bar .inner {
		opacity:0;
	}
	#scaffold .mv .copy.ori-anime.active .bar .inner {
		animation: scaffold_mv_copy_passing_delay 1.1s ease .5s 1 normal forwards;
	}
	@keyframes scaffold_mv_copy_passing_bar{
		0%{right:0;width:0}
		100%{right:0;width:100%;opacity: 1;}
	}
	@keyframes scaffold_mv_copy_passing_delay{
		0%{opacity:0}
		50%{opacity:0}
		100%{opacity:1}
	}
	
	
	#scaffold .mv .txt{
		padding-left:5vw;
	}
	
	.chat-list li .inner{
		background-color:#E4EBF3;
	}
	.chat-list li .inner:before{
		background-color:#E4EBF3;
	}
	
	
	
	
}