@charset "utf-8";
html{
  /*scroll-snap-type: block mandatory;
  scroll-snap-type: block proximity;
*/
}
#Contents {
	position: relative;
	background-color: transparent;
	padding-bottom: 0;
}
/*
.videoWrapper{
	padding-top:150px;
	margin-top:-150px;
}

.visualWrapper{
  scroll-snap-type: block mandatory !important;
}
.visualWrapper .visualWrapperContainer{
	scroll-snap-align: start;
  height: 100vh;
}*/
#Contents h2{
	margin: 0;
	padding: 0;
}
.parallax .Inner.in {
	opacity: 0.1;
	transform: translate(0, 100px);
	transition: all 800ms;
}
.parallax .Inner.in.fadeIn {
	opacity: 1;
	transform: translate(0,0);
}

.PageTitleStyle1 {
	margin-bottom: 15px;
}
.navi {
	position: fixed;
	z-index: 99;
	right: 50px;
	bottom: 200px;
}
.navi ul {
	display: flex;
	flex-direction: column;
}
.navi li a {
	display: block;
	width: 28px;
	height: 28px;
	background-color: #CCCCCC;
	margin-bottom: 15px;
	
}
.navi li.active a {
	background-color: #E60027;
}
.arrowDown {
	text-align:center;
	padding:50px 0;
}
.arrowDown img{
	max-width:50px;
}
.arrowDown.top {
	background-image: url(/products/it/security/evolving/image/icon_arrow_down_white.png);
	width: 122px;
	height: 76px;
}
.MainVideoText {
	color:#ff0000;
  position: absolute;	
	top: calc(50%);
  left: 0;
	right: 0;
	margin: auto;
	-webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  transform: translate(0, -50%);	
	max-width: 1305px;
	width: 100%;
	box-sizing: border-box;
	padding-right: 15px;
	padding-left: 15px;
}
.MainVideoText h1{
	font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.MainVideoText .subText{
	padding-top:24px;
}
.MainVideoText [class*="catch"]{
	opacity:0;
	animation-name:blur;
	animation-duration: 1s;
  animation-fill-mode: forwards;
}
.MainVideoText .catch1{
	animation-delay:0.5s;
}
.MainVideoText .catch2{
	animation-delay:1s;
}
.MainVideoText .catch3{
	animation-delay:1.8s;
}
.MainVideoText .catch4{
	animation-delay:2.5s;
}
@keyframes blur {
	0% {
		opacity:0;
		transform:translate(0,50px);
	}
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}
/*
.MainVideoText [class*="catch"].active{
	transform: translate(0,0);
	opacity: 1;
}
*/

.MainVideoText .catch1,.MainVideoText .catch2{
	font-weight:bold;
	line-height:100%;
}
.MainVideoText .catch3{
	font-weight:bold;
	line-height:100%;
	display:block;
	margin-top:2%;
}
.MainVideoText h1{
	font-size:210%;
}
h2{
	background:none;
	font-weight:bold;
}
.Wrapper {
	background:#fff;
	position:relative;
}

.visualWrapperContainer {
	display:flex;
	align-items:center;
	background-repeat: no-repeat;
}
#mv02{background-image:url(/products/it/security/evolving/image/mv02.jpg);animation: fadeIn 5s ease 1;}
#mv03{background-image:url(/products/it/security/evolving/image/mv03.jpg);}
#mv04{background-image:url(/products/it/security/evolving/image/mv04.jpg);}

.visualWrapperContainer .mvText{
	background-image:url(/products/it/security/evolving/image/mvtxbg.png);
	padding:24px;
	right:0;
}


.Section {
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
	background-size: 60%;
}
.Section.BookArea {
	padding-bottom: 0;
	padding: 100px 0;
}
.Section .SubTitle {
	background-color: #E60027;
	color: #fff;
	font-weight: bold;
	display:inline-block;
	padding: 10px 20px;
	white-space:nowrap;
}
#evolving02 {
	background:rgb(210,227,233);
}
#evolving02 .Section .SubTitle{
	margin-bottom:24px;
}
.Section#evolving03 {
	background-image: url(/products/it/security/image/bg_evolving03.png);
	background-position: top 42px left;
}
.Wrapper .Section,.visualWrapperContainer .Inner {
	width:100%;
	max-width: 1275px;
	margin: 0 auto;
}
.visualWrapperContainer .Inner {
	justify-content: right;
  display: flex;
}
.parallax.in{
	opacity: 0.1;
	transform: translate(0, 100px);
	transition: all 800ms;
}

.parallax.in.fadeIn {
	opacity: 1;
	transform: translate(0,0);
}

/*矢印アニメーション*/
.movingArrow {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 6;
  position: absolute;
  width: 0.2em;
  height: 95%;
	z-index:5;
}
#evolving01 .movingArrow {
  background: linear-gradient(#fff, #e60128);
}
#evolving02 .movingArrow {
  background: linear-gradient(#d2e3e9, #e60128);
}
.movingArrow::before {
  content: '';
  width: 1.5em;
  height: 1.5em;
  border: 0.2em solid #e60128;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  box-sizing: border-box;
}
#evolving01 .movingArrow::before {
  border-bottom: 0;
}
#evolving02 .movingArrow::before {
  border-left: 0;
}
.movingArrow.in.fadeIn{
	opacity:0;
	animation-name:slidedown;
	animation-duration: 6s;
  animation-fill-mode: forwards;
}
/*
.movingArrow:after {
	content: url(/products/it/security/evolving/image/decoarrow.png);
  position: absolute;
	left:5%;
}
.movingArrow.in{
	opacity: 0 !important;
	transform: translateY(-1000px) !important;
	transition: all 6s !important;
}
.movingArrow.in.fadeIn {
	opacity: 1 !important;
	transform: translateY(0) !important;
}*/
@keyframes slidedown {
	0% {
		opacity:0;
		transform:translateY(-1000px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
[class*="Wrapper"] h2 {
	background: none;
}

div#features {
	background-color: #727171;
	margin-top: 50px;
}
.feature div {
	width: calc((100% - 15px) /2);
}
.feature ol {
	padding-left: 20px;
	font-size: 100%;
	line-height: 1.6;
	text-align: left;
	color: #fff;
	margin-left: 10px;
}
.features img{
	width: 100%;
	max-width: 100%;
}
.Section .Inner .Column {
	display: flex;
	margin-bottom: 40px;
}
.Section .Inner .Column .Column2 {
	width: 50%;
}
.Section .Inner .Column .Column2:first-child {
	margin-left: 0;
}
.Section .Inner .Column:last-child {
	margin-bottom: 0;
}
.Section .Inner .Column div:last-child {
	margin-left: 15px;
}
.Section .Inner .Column .plate p {
	background-color: #B4B4B5;
}
.Section .Inner .Column .plate .ImgOnlyStyle {
	margin-bottom: 0;
	text-align: center
}
ul.box {
	padding: 15px 15px 15px 0;
	display: flex;
}
ul.box.cyber {
	justify-content: center;
}
ul.box li {
	border: 1px solid #c02;
	padding: 15px;
}
ul.box.cyber li {
	width: 350px;
	text-align: center;
}
.features:nth-child(1){
margin-right: 2px;
}

.features:nth-child(2){
margin-left: 2px;
}

.feature h5{
	font-size: 145%;
	padding: 5px 0 5px;
	text-align: left;
	color: #fff;
}

.BookArea {
	background-color: #fff;
}
#evolving01{
	overflow:hidden;
	background: linear-gradient(#fff 25%, #93a0aa 40%, #031e32 55%, #000);
	/*background:#fff;
	background-image: url(/products/it/security/evolving/image/evolution1_bg.png);
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:1px 1086px;*/
}
#evolving02{
	overflow:hidden;
}
#evolving03{
	padding-top:50px;
}
#evolving03 .Section{
	box-sizing: border-box;
}
#evolving03 .AdditionalNotesStyle2 dl {
	word-break: break-all;
}
#evolving03 .AdditionalNotesStyle2 dt {
  width: 5em;
}
#evolving03 .AdditionalNotesStyle2 dd {
  margin: -1.55em 0 4px 5em;
}
@media screen and (min-width: 1304px) {
	.movingArrow.left{
	  left: 5%;
	}
	.movingArrow.right{
	  right: 5%;
	}
}
@media screen and (max-width: 1304px) {
	.Wrapper,.visualWrapperContainer,.videoWrapper {
		margin: 0 -15px;
	}
	.BrandingArea.evolving {
		background-size: auto 100%;
		background-position: center bottom;
	}
	.movingArrow.left{
	  left: 2%;
	}
	.movingArrow.right{
	  right: 2%;
	}
}
@media screen and (min-width: 995px) {
	#evolving01 .title{
		display:flex;
	}
	#evolving01 .Section,#evolving02 .Section {
		z-index: 9;
	}
	#evolving02 .Section {
		display: flex;
		justify-content: space-around;
		background: url(/products/it/security/evolving/image/line_w.png);
		background-repeat:no-repeat;
		background-position:center center;
		background-size:contain;
	}
	#evolving03 .Section {
		display: flex;
		padding:0 45px 100px;

	}
	#evolving02 .Section > div,#evolving03 .Section > dl{
		width:50%;
	}
	.visualWrapperContainer .mvText{
		max-width:600px;
	}
}
@media screen and (max-width: 994px) {
	.navi {
		right: 20px;
	}
	.navi li a {
		width: 20px;
		height: 20px;
	}
	.Inner {
		width: 100%;
	}
	#features .feature {
		margin: 0 15px;
	}
	.js .feature div:first-child {
		margin-right: 15px;
	}
	.SubTitle {
		font-size: 180%;
	}
	.movingArrow {
		display:none;
	}
	.visualWrapperContainer .mvText{
		margin:5%;
	}
	#evolving01{
		background: linear-gradient(#fff 35%, #93a0aa 45%, #031e32 60%, #000);
	}
	#evolving01 .Section .SubTitle {
	    margin-bottom: 24px;
	}
	#evolving02a{
		margin-bottom:100px;
	}
	#evolving03 .Section{
		padding:0 5% 100px;
	}

}
@media screen and (min-width: 768px) {
	.MainVideoText {
		padding-left: 80px;
	}
	.MainVideoText .subText{
		font-size: 135%;
	}
	.visualWrapperContainer {
		min-height:60vh;
	}
	.videoWrapper {
		position: relative;
	}
	.Section .Inner .title {
		padding: 0 45px 15px;
	}
	.MainVideo {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: calc(100vh - 147px);
		min-height: 500px;
	}
	.video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.MainVideoText .catch1,.MainVideoText .catch2{
		font-size:270%;
	}
	.MainVideoText h1{
		font-size:210%;
	}
	[class*="Wrapper"] h2 {
		font-size: 180%;
	}
	.Section {
		padding-bottom: 170px;
	}
	.Section .SubTitle {
		margin-right:36px;
		font-size: 200%;
	}
	#evolving01 .Section .SubTitle {
		align-items: center;
    display: flex;
	}
	#evolving02 > .Section{
		margin-top:50px;
		padding-bottom:100px;
	}
	.TextArea {
		padding: 0 45px 80px;
	}
	.visualWrapperContainer {
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
	}
	#evolving02 .ImgOnlyStyle img{
		width: 100%;
	}
	#evolving02 .ImgOnlyStyle{
		padding:0 45px;
	}
}
@media screen and (max-width: 767px) {
	.visualWrapperContainer {
		min-height:60vh;
	}
	.videoWrapper {
		position: relative;
		height: 540px;
		overflow: hidden;
	}
	.MainVideo {
		line-height: 56.25%;
		margin: 0 auto;
		height: 540px;
		min-width: 960px;
	}
	.video {
		width: 100%;
		margin: auto;
		margin-left: calc(50vw - 50%);
	}
	.MainVideoText .catch1,.MainVideoText .catch2{
		font-size:240%;
	}
	.MainVideoText h1{
		font-size:180%;
	}
	.Section .Inner .title,#evolving02 .ImgOnlyStyle {
		padding: 0 5%;
	}
	[class*="Wrapper"] h2 {
		font-size: 150%;
		margin-left:0;
	}
	.Section {
		padding-bottom: 60px;
	}
	.Section .SubTitle {
		margin:0 0 18px 0;
	}
	.TextArea {
		padding: 5%;
	}
	.Wrapper .BookArea {
		margin-left: 0;
		margin-right: 0;
	}
	.Wrapper .BookArea .Inner {
		padding-left: 15px;
		padding-right: 15px;
	}
	.features{
	width: 49%;
	margin: 0 0 10px 0!important;
	padding: 2%;
	}
	.features:nth-child(1){
		float: left;
	}
	.features:nth-child(2){
	float: right;	
	}	
	
	.navi {
		display: none;
	}
	.BrandingArea.evolving .BrandingTextArea p.catch4 {
		font-size: 160%;
	}
	.BrandingArea.evolving .BrandingTextArea p.catch4.CatchStyle02 {
		font-size: 110%;
	}
	.feature ol {
		font-size: 80%;
	}
	.Inner .Column .TextStyle1,
	.Inner .Column .TextStyle0 {
		font-size: 80%;
	}
	.ImgWithCaption {
		padding-left: 15px;
		padding-right: 15px;
	}
	.visualWrapperContainer {
		background-size: auto 100%;
	}
	.visualWrapperContainer#mv04 {
		background-position:30% 0;
	}
	#evolving01{
		background: linear-gradient(#fff 45%, #93a0aa 55%, #031e32 70%, #000);
	}
}
/* for - 640px
=========================================================================================== */
@media screen and (max-width: 640px) {
.features{
width: 100%!important;
margin: 0 0 10px 0!important;
padding: 3% 5% 3%;
}
	
	
.features img{
width: 100%!important;
max-width: 100%;
}	
}

@media screen and (max-width: 579px) {
/*
	.Wrapper {
		background-image:url(/products/it/security/image/bg_main.png);
		padding-bottom: 60px;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
	}
*/
	.arrowDown {
		display: none;
	}
	.BrandingArea.evolving {
		background-size: auto 100%;
		background-attachment: scroll;
		height: 600px;
		background-position: left -194px bottom;
		background-image: url(/products/it/security/image/bg_main.png);
	}
	.BrandingArea.evolving:before {
		display: none;
	}
	.BrandingArea.evolving .BrandingText {
		margin-top: 80px;
		height: 190px;
	}
	.BrandingArea.evolving .BrandingTextArea p.catch4 {
		font-size: 120%;
	}
	.BrandingArea.evolving .BrandingTextArea p.catch4.CatchStyle02 {
		font-size: 78%;
	}
	{
		padding-bottom: 0;
		background-position: top 25px left;
	}
	.Inner .Column {
		flex-direction: column;
	}
	.Inner .Column .Column2 {
		width: 100%;
	}
	.Inner .Column div:last-child {
		margin-left: 0;
		margin-top: 20px;
	}
	ul.box {
		justify-content: center;
		padding-left: 15px;
		margin-right: 0;
	}
	div#features {
		background-color: #fff;
		margin-top: 30px;
		padding-bottom: 60px;
	}
	#features .feature {
		flex-direction: column;
		background-color: #727171;
		padding: 30px 15px;
	}
	.feature div {
		width: 100%;
	}
	.feature div:first-child {
		margin-bottom: 50px;
	}
	.feature ol {
		font-size: 95%;
	}
	.Section.BookArea {
		padding-top: 40px;
	}
	.BookArea .ImgLeftAdjust {
		float: none!important;
	}
	.BookArea h2 {
		font-size: 165%;
		text-align: center;
	}
}
@media screen and (max-width: 399px) {

}