/*================================================================================
FileName: _layout.scss
================================================================================*/

@media only screen and (min-width: 897px) {
	.flexPcrr {
		flex-direction: row-reverse;
	}
	.wPC100 {
		width: 100% !important;
	}
	.wPC90 {
		width: 90% !important;
	}
	.wPC80 {
		width: 80% !important;
	}
	.wPC70 {
		width: 70% !important;
	}
	.wPC60 {
		width: 60% !important;
	}
	.wPC50 {
		width: 50% !important;
	}
	.wPC40 {
		width: 40% !important;
	}
	.wPC30 {
		width: 30% !important;
	}
	.wPC20 {
		width: 20% !important;
	}
	.wPC10 {
		width: 10% !important;
	}
}

@media only screen and (max-width: 896px) {
	.wSP100 {
		width: 100% !important;
	}
	.wSP90 {
		width: 90% !important;
	}
	.wSP80 {
		width: 80% !important;
	}
	.wSP70 {
		width: 70% !important;
	}
	.wSP60 {
		width: 60% !important;
	}
	.wSP50 {
		width: 50% !important;
	}
	.wSP40 {
		width: 40% !important;
	}
	.wSP30 {
		width: 30% !important;
	}
	.wSP20 {
		width: 20% !important;
	}
	.wSP10 {
		width: 10% !important;
	}
}


.mb25{margin-bottom: 25px;}


@media only screen and (min-width: 897px) {
	.mlP5 {margin-left: 5px;}
	.mrP25 {margin-right: 25px;}
}

.coverWrap {
	position: relative;
}
.coverWrap .video-control {
	position: absolute;
	top: 10px;
	right: 10px;
} 
.cover {
	position: relative;
	/*height: calc(100vh - 130px);*/
	margin: 30px 0 50px;
}
	.cover__card__body{
		color: #fff;
	text-align: center;
	background-color:rgba(0,0,0,0.8);
	padding: 25px 25px 30px 25px;
}
.cover__title {
    display: block;
    width: 100%;
	max-width: 100%;
    /*padding-top: 4em;*/
	font-size: 40px;
}
.cover__card {
	overflow: hidden;
	/*max-width: 50%;*/
	padding: /*2.5%*/2.5% 2.5% 10%;
}
.cover__scrollBtn {
	/*position: absolute;*/
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5px;
	width: 100px;
	margin: auto;
}
.cover__scrollBtn__link {
	display: block;
	text-align: center;
	color: #000;
	font-size: 12px;
	cursor: pointer;
}
.cover__scrollBtn__border {
	position: relative;
	left: 50%;
	overflow: hidden;
	width: 1px;
	height: calc(50px - 1em);
    background-color: hsla(0, 0%, 100%, .4);
}
.cover__scrollBtn__border:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: transrateY-up-down 2s infinite;
	background-color: #000;
	content: "";
}

/* スクロール インジケータ用 */
@keyframes transrateY-up-down {
	0%{transform:translate3d(0, -100%, 0)}
	100%{transform:translate3d(0, 100%, 0)}
}

@media screen and (max-width: 896px){
	/*.cover {
		height: calc(100vh - 115px);*/
	}
	.cover__card {
		max-width: 100%;
	}
	.cover__scrollBtn__link {
		font-size: 10px;
	}
}
@media screen and (orientation: landscape){
	.cover__card {
		/*max-width: 50%;*/
	}
}

.text-hide {
    font-size: 0;
    color: transparent;
}
.text-color--white {
	color: #fff;
}

.buttons{
	display: flex;
	  justify-content: center;
  align-items: center;
}



 .anc_btn {
  width: 160px;
  height: 150px;
margin-right: 15px;
	   overflow: hidden;
	font-weight: normal;

}

.anc_btn:last-of-type{
	margin-right: 0;
}

.anc_btn a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.6em;
  color: #fff;
  text-align: center;
  /*font-weight: 550;*/
  background-color: #fff;
  text-decoration: none;
		 padding: 15px;
	box-sizing: border-box;

  position: relative;
  z-index: 2;
}
.anc_btn a:before {
  content: '';
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #056EE4;
  transition: all 100ms linear;
}
.anc_btn a:hover {
  color: #056EE4;
}
.anc_btn a:hover:before {
  top: -100%;
}

.anc_btn a:after {
	    content: "";
    display: block;
    margin-right: 12px;
    /*top: 0;*/
    bottom: 12px;
	left: 0;
	right: 0;;
    margin: auto;
    position: absolute;
    height: 8px;
    width: 18px;
    /*right: 14px;*/
	background: url(https://assets.jpn.pioneer/ja/assets/img/icon_arrow_w_down01.svg) no-repeat bottom center;
    background-size: 18px;
	
}

.anc_btn a:hover:after {

	background: url(https://test-assets.jpn.pioneer/ja/assets/img/icon_arrow_down01.svg) no-repeat bottom center;

	
}


.anc_btn span.strength{
	display: block;
	font-size: 12px;
	margin-bottom: 10px;
}

.anc_btn span.strength_title{
	font-weight: 600;
	font-size: 1.3rem;
	display: block;
}

.anc_btn:nth-of-type(1) span.strength_title{
	font-size: 1.1rem;
}

.anc_btn:nth-of-type(2) span.strength_title,
.anc_btn:nth-of-type(3) span.strength_title{
	padding-top: 20px;
}


.relative{
	position: relative;
}

.absolute{
	position: absolute;
}

@media screen and (min-width: 897px){
.logo{
	width: /*520*/580px;
	height: auto;
	padding-top: /*80*//*100*/130px;
	padding-bottom: 20px;
}
}


@media screen and (max-width: 896px){
.logo{
	width: /*70*/80%;
	height: auto;
	padding-top: /*70*/80px;
	/*padding-bottom: 20px;*/
}
}

.missionStatement {
    font-size: 45px;
    font-weight: 600;
	padding-top: 20px;
	padding-bottom: 30px;
}


@media screen and (min-width: 897px){
.saasConcept{
	width: 500px;
	transition: all 2s 0s ease;
	
}
.saasConcept.run{
	width: 550px;
	
}
	
	
}


@media screen and (min-width: 897px){
.section1,
/*.section2,*/
.section3,
.section4,
.section5{
	/*margin-bottom: 200px;*/
	padding-bottom: 200px;
	padding-top: 200px;
	overflow: hidden;
}
	
.section2{
	padding-bottom: 100px;
	margin-top: 200px;
	overflow: hidden;
	transition: all 2s 0s ease;
}
	
.section1:first-child{
        padding-top: 600px;
}
		
}

@media screen and (max-width: 896px){
.section1,
.section2,
.section3,
.section4,
.section5{
	/*margin-bottom: 40px;*/
	padding-top: 50px;
	overflow: hidden;
}
}

.section2{
	position: inherit;
}

/*.section1{background: linear-gradient(45deg, #ff3d92, #fff,  #a08eff) !important;}*/

/*
@media screen and (min-width: 897px){
.section1{
	background-image: url("../img/stc_bg.png");
	background-size: 100% 100%;
}
}
@media screen and (max-width: 896px){
.section1{
	background-image: url("../img/stc_bg_sp.png");
	background-size: 100% 100%;
}
}


.section1 .ttlStyle02:after {
    background: #000;
}
@media screen and (min-width: 897px){
.boxStyle11 {
    margin: 0 auto;
	height: 500px;
	float: left;
}
}
@media screen and (max-width: 896px){
.boxStyle11 {
    margin: 0 auto;
    width: 100%;
	height: 100%;
	float: left;
}
}
@media screen and (min-width: 897px){
	.w_A {width: 450px;}
	.w_B {width: 650px;}
}



.boxStyle11 .imgBox img {
    width: 100%;
    height: 100%;
}




.box-left .bs11_txt-box{
	position: absolute;
	height: auto;
	top:50px;
	right: 30px;
	text-align: right;	
}
.box-right .bs11_txt-box{
	position: absolute;
	height: auto;
	top:50px;
	left: 10px;
}
@media screen and (max-width: 896px){
.box-left .bs11_txt-box,
.box-right .bs11_txt-box{
	position: static;
	text-align: center;
	}
}

.bs11_txt-box .txt{
	fint-size:16px !important;
}

@media screen and (min-width: 897px){
.box-right .bs11_txt-box .txt{
padding-left: 15px;
}
}

@media screen and (max-width: 896px){
	.box-left .bs11_txt-box .txt,
	.box-right .bs11_txt-box .txt{
	text-align: left;
	margin-top: 30px;
}
}
/*




.fRed2{
	color: /*#b91440*//*#f11650*/#fff;
	transition: all 1s 1s ease;
}

.fRed2.run{
	color:/*#e81d74*/#000;
}

.fadeIn0{
	opacity: 0;
		animation-name: animation00;
        animation-duration: 4s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode:forwards;
}


@keyframes animation00 {
  0% {
    opacity: 0;
  }
30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.fadeIn0-2{
	opacity: 0;
		animation-name: animation00;
        animation-duration: 4s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode:forwards;
		animation-delay: 2s;
}





.fadeIn3{
	opacity: 0;
		animation-name: fadeIn3;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode:forwards;
		animation-delay: 1s;
}

@keyframes fadeIn3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.fadeIn4.run{
	opacity: 0;
		animation-name: fadeIn4;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode:forwards;
		animation-delay: 1s;
}

@keyframes fadeIn4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.fadeIn1{
	opacity: 0 !important;
	transition: all 3s 0s ease;
	transform: translateY(20px) ;

}

.fadeIn1.run{
	opacity: 1 !important;
	transform: translateY(0px);

}

.fadeIn2{
	opacity: 0 !important;
	transition: all 2s 0s ease;
	transform: translateY(20px) ;
}

.fadeIn2.run{
	opacity: 1 !important;
	transform: translateY(0px);
}



/*
.fadeIn0.run{
	opacity: 1 !important;
}*/

/*
@media screen and (min-width: 897px){
.missionStatement_txtIn1{
	opacity: 0 !important;
	transition: all 3s 1s ease;
	transform: translateX(9999px) ;
	opacity: 0;
}
.missionStatement_txtIn1.run{
	opacity: 1 !important;
	transform: translateX(0px);
	opacity: 1;
}
}*/

@media screen and (max-width: 896px){
.missionStatement_txtIn1{
	opacity: 0 !important;
	transition: all 3s 1s ease;
	transform: translateY(20px) ;
}
.missionStatement_txtIn1.run{
	opacity: 1 !important;
	transform: translateY(0px);
}
}


.No{
	font-size: 80px;
	line-height: 1.2em;
	/*text-shadow: 0 0 10px #fff,0 0 15px #fff;*/
	font-weight: 500;
	padding-left: 15px;
}

.textNo{
	margin-bottom: 5px;
}

@media screen and (max-width: 896px){
	.text_mission {
		width: 30% !important;
	}
	.textNo img {
		width: 40% !important;
	}	
}
.soundlab_txt-box{
    position: absolute;
    width:auto;
    height: auto;
    top: 20px;
    right: 30px;
	text-align: right;
}

@media screen and (min-width: 897px){
.boxStyle11 .ttl,
.soundlab_txt-box .ttl{
    font-size: 28px;
    padding: 0;
	/*font-weight: 500;*/
}
}

.fadeBlock {overflow: hidden;}

.piomatix-img02{
	position: absolute;
	top:-50px;
}




/*
.moveBlock {
        opacity: 0 !important;
        transform: translateY(200px) !important;
        transition: all 1s;
}

.moveBlock.run {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.piomatix-img02.moveBlock {	
	transition-delay: 2s;
}
*/

@media screen and (min-width: 897px){
.box-inner{
	width: 1100px;
	height: auto;
	margin: auto;
	overflow: hidden;
}
}
@media screen and (max-width: 896px){
.box-inner{
	width: 100%;
	height: auto;
	margin: auto;
	overflow: hidden;
}
}

.animation1,
.animation2,
.animation3{
clip-path: circle(0% at center);
	/*border: 5px solid #fff;
    border-radius: 50%;*/
	/*width: 90%;
	height: 90%;*/

}

.animation1.run{
	animation-name: animation01;
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode:forwards;
        /*animation-delay: 5s;*/
		/*top:calc(50% - 250px);
		left:calc(50% - 250px);*/
        top:0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
		/*transform: scale(0.8);*/
}
@keyframes animation01 {
  0% {
    clip-path: circle(0% at center);
	 /*transform: scale(0.8);*/
  }
  100% {
    clip-path: circle(50% at center);
	  /*transform: scale(1);*/
  }
}




.animation2.run{
	animation-name: animation02;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-fill-mode:forwards;
        /*animation-delay: 5s;*/
}
@keyframes animation02 {
  0% {
    clip-path: circle(0% at center);
  }

/*
  80% {
    clip-path: circle(50% at center);
  }
  90% {
    clip-path: circle(30% at center);
  }*/
  100% {
    clip-path: circle(50% at center);
  }
}





/*
.animation3.run{

	animation-name: animation03;
        animation-duration: 21s;
	animation-iteration-count: infinite;
        animation-timing-function: ease;

        top:0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
		opacity: 0;
	
	clip-path: circle(50% at center);
}
@keyframes animation03 {
  0% {
	opacity: 0;
  }
  10% {
	opacity: 1;
	}
  33% {
	opacity: 1;
  }
  43% {

	  	opacity: 0;
  }
}

.saas03-1,
.saas03-2,
.saas03-3{
	position: absolute;
	width: 100%;
	height: 100%;

}

.saas03-1{
	animation-delay: 0s;
}

.saas03-2{
	animation-delay: 7s;
}
.saas03-3{
	animation-delay: 14s;
}

@media screen and (min-width: 897px){
.saas03-In{
	transition: all 2s 0s ease;
	clip-path: circle(0% at center);
}

.saas03-In.run{
	clip-path: circle(50% at center);
}
}
@media screen and (max-width: 896px){
.saas03-In{
	transition: all 1s 0s ease;
	clip-path: circle(0% at center);
	opacity: 0:
}

.saas03-In.run{

	clip-path: circle(50% at center);
	opacity: 1:
}
}
*/
@media screen and (min-width: 897px){
.box-inner{
	width: 1100px;
	height: auto;
	margin: auto;
	overflow: hidden;
}
}
@media screen and (max-width: 896px){
.box-inner{
	width: 100%;
	height: auto;
	margin: auto;
	overflow: hidden;
}
}

@media screen and (min-width: 897px){
.section1 .imgBox {
    position: relative;
    width: 400px;
    height: 400px;
	text-align: center;
}
}

@media screen and (max-width: 896px){
.section1 .imgBox {
    position: relative;
    width: 100%;
    height: auto;
	text-align: center;
}
	
.section1 .imgBox.saas03 {
    position: relative;
    /*width: 88vmin;*/
    height: /*88*/90vmin;
	text-align: center;
}	
	
}

.circle1{
	border: 5px solid #e81d74;
	  border-radius: 50%;
	width: 100%;
	height: 100%;
	position: absolute;
	/*top:calc(50% - 250px);
	left:calc(50% - 250px);*/
	        top:0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
	transform: scale(0);
	
}
.circle1.run{
		animation-name: animation_circle1;
        animation-duration: 3s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-fill-mode:forwards;
		animation-delay: 0.2s;
	
}
@keyframes animation_circle1 {
  0% {
transform: scale(0);

  }
  100% {
transform: scale(1);
  }
}





.whatsNew{
	/*position: fixed;
	top:150px;
	right: 0;*/
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	/*z-index: 100;*/
	transition: all 1s;
	transform: translateX(0px);
}
@media screen and (max-width: 896px){
	.whatsNew{
	transition: all 0.5s;
	/*transform: translateX(0px);*/
}
}


@media screen and (min-width: 897px){
.whatsNew.run{
	transform: translateX(-190px);
}
}
@media screen and (max-width: 896px){
.whatsNew.run{
	transform: translateX(-200px);
}
}

@media screen and (min-width: 897px){
.whatsNew-first{
	position: fixed;
	bottom: 20px;
	right: 0;
	width: 222px;
	height: 250px;
	box-sizing: border-box;
	z-index: 100;
	transition: all 1s;
	
	animation-name: animation_whatsNew1;
    animation-duration: 3s;
	animation-iteration-count: 1;
    animation-timing-function: ease;
	animation-delay: 4s;
	animation-fill-mode:both;	
}

@keyframes animation_whatsNew1 {
  0% {
transform: translateX(250px);
  }
  20% {
transform: translateX(0px);
    }
  80% {
transform: translateX(0px);
    }
  100% {
transform: translateX(190px);
  }
}
}

@media screen and (max-width: 896px){
	.whatsNew-first{
	position: absolute;
	top:50px;
	right: 0;
	width: 232px;
	height: 250px;
	box-sizing: border-box;
	z-index: 100;
	transition: all 1s;
	
	animation-name: animation_whatsNew1;
    animation-duration: 3s;
	animation-iteration-count: 1;
    animation-timing-function: ease;
	animation-delay: 4s;
	animation-fill-mode:both;	
}
@keyframes animation_whatsNew1 {
  0% {
transform: translateX(250px);
  }
  20% {
transform: translateX(0px);
    }
  80% {
transform: translateX(0px);
    }
  100% {
transform: translateX(200px);
  }
}
}

@media screen and (min-width: 897px){
.whatsNew-first:hover{opacity: 0.6 !important;}

.whatsNew-btn{
	position: absolute;
	width: 22px;
	height: 240px;
	background: url(/ja/strengths/saastechnologycenter/img/whatsNew2-2.svg) no-repeat 0px 9px;
	background-size: 22px 230px;
	box-sizing: border-box;
		transition: all 1s;
}
.whatsNew-btn.run{
		background: url(/ja/strengths/saastechnologycenter/img/whatsNew1-2.svg) no-repeat 0px 9px;
	background-size: 22px 230px;
}
}

@media screen and (max-width: 896px){
	.whatsNew-btn{
	position: absolute;
	width: 22px;
	height: 250px;
	background: url(/ja/strengths/saastechnologycenter/img/whatsNew2-2.svg) no-repeat 0px 9px;
	background-size: 22px 230px;
	box-sizing: border-box;
		transition: all 1s;
}
.whatsNew-btn.run{
		background: url(/ja/strengths/saastechnologycenter/img/whatsNew1-2.svg) no-repeat 0px 9px;
	background-size: 22px 230px;
}	
}
.whatsNew-inner{
	position: absolute;
	right: 0;
	width: 200px;
	height: 100%;
	background: #fff;
	/*border: solid 1px #8e24ff;*/
	border-right: none;
	box-sizing: border-box;
	border-radius: 10px 0 0 10px;
	padding: 5px 12px 5px;
	box-shadow: /*0 2px 5px #666, 2px 2px 10px #666*/0 2px 5px #999;
}
@media screen and (max-width: 896px){
	.whatsNew-inner{
		width: 210px;
		padding: 5px 15px 5px;
}
}

.whatsNew-inner img.text_WhatsNew{
	width: 70%;
	display: block;
	margin: 0 auto 3px;
}
.whatsNew-inner img.thum{
	width: 100%;
	/*padding: 15px;*/
	box-sizing: border-box;
}


.whatsNew .category {
    color: #ffffff;
    background: #000000;
    width: 79px;
    font-size: 9px;
    text-align: center;
	display: inline-block;
}

.whatsNew .date{
	font-size: 12px;
}

.whatsNew .date.right {
    float: right;
}

.whatsNew .ttl{
	font-size: /*13*/12px;
	line-height: /*1.5*/1.3em;
}

.whatsNew .link{
	font-size: 13px;
	line-height: 1.0em;
	
}
.whatsNew .down{
	background: url(/ja/strengths/saastechnologycenter/img/icon_arrow_down_b.svg) no-repeat;
    width: 10px;
    height: 7px;
    margin: /*10*/5px auto 0px;
	
}


@media screen and (min-width: 897px){
.missionStatement-area .box-inner{
display:flex;
	width: 100%;
	margin-bottom: 100px;
	}
}
@media screen and (max-width: 896px){
.missionStatement-area .box-inner{
display:block;
	width: 100%;
	margin-bottom: 80px;
	}
}	

@media screen and (min-width: 897px){
.missionStatement-area .box-left{
	width: 50%;
	/*background: #ccc;*/
	padding: 0 50px 0 0;
    box-sizing: border-box;
}
.missionStatement-area .box-right{
	width: 50%;
	/*background: #ddd;*/
}
}
@media screen and (max-width: 896px){
.missionStatement-area .box-left{
	width: 100%;
	/*background: #ccc;*/
}
.missionStatement-area .box-right{
	width: 100%;
	/*background: #ddd;*/
}
}


.missionStatement-area .video-box{
	width: 100%;
}

.missionStatement-area video{
	width: 100%;
}
@media screen and (min-width: 897px){
.missionStatement_txt-box{
	font-size:16px;
	line-height:1.8em ;
	padding: 15px 0 0 0;

}
}
@media screen and (max-width: 896px){
.missionStatement_txt-box{
	font-size:17px;
	line-height:1.8em ;

}
}

@media screen and (min-width: 897px){
.missionStatement_txt-box .txt2{
	padding-left: 20px;
	margin-top: 18px;
}

.missionStatement_txt-box .txt3{
    text-indent: -5.6em;
    padding-left: 5.6em;
    margin-left: 50px;
	margin-top: 18px;
	letter-spacing: -0.005em;

}
.missionStatement_txt-box span{
	/*font-style: italic;*/
	font-weight: bold;
	padding-right: 25px;
	color: #999;
}
}
@media screen and (max-width: 896px){
.missionStatement_txt-box .txt1,
.missionStatement_txt-box .txt2,
.missionStatement_txt-box .txt3{
	margin-top: 20px;
	text-indent: -5em;
	padding-left: 5em;
}

.missionStatement_txt-box span{
	/*font-style: italic;*/
	font-weight: bold;
	color: #999;
}
	
.missionStatement_txt-box .txt1 span{
	padding-right: 50px;
}	
.missionStatement_txt-box .txt2 span{
	padding-right: 30px;
}	
.missionStatement_txt-box .txt3 span{
	padding-right: 20px;
}	
	
	
}



@media screen and (min-width: 897px){
#container .swiper-button-next, #container .swiper-container-rtl .swiper-button-prev {
    right: -55px;
}
}

@media screen and (min-width: 897px){
.section3 .boxStyle01 .ttl {
    font-size: 15px;
    line-height: 1.4;
    padding-top: 0;
    font-weight: 500;
}
}


@media screen and (min-width: 897px){
	.section3 .boxStyle01 .imgBox img{
		width: 100%;
		height: auto;
	}
}


/*========= 光りながら出現させるためのCSS ===============*/

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 20px #fff; }
  100% { opacity:1; text-shadow: 0 0 3px #fff,0 0 5px #fff; }
}


.boxStyle01 {
	padding-top: 5px;
}

.i_pin {
    top: 0px;
    left: 18px;
    position: absolute;
   /*color: #ffffff;*/
    background: #ccc;
   /*text-align: center;
    font-size: 11px;
    content: "NEW";*/
    /*-webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);*/
    width: 24px;
	height: 24px;
    /*padding-top: 14px;*/
	background: url("/ja/strengths/saastechnologycenter/img/pin.svg") no-repeat;
	background-size: cover;
	z-index: 3000;
}
@media screen and (max-width: 896px){
	.i_pin {
    left: 5px;
	}
}

.relative{
	position: relative;
}



@media screen and (max-width: 896px){
#container .swiper-container {
    /*padding-bottom: 70px;*//*20230120*/
}
}


.boxStyle01 .imgBox span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 1.2em;
    text-align: center;
    background: #4643f4;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

/*具体的な取り組み　ページャー修正（スマホ版） */
@media screen and (max-width: 896px){
	.swiper-container-horizontal>.swiper-pagination-bullets{
		display: flex;
		padding: 0 30px;
	}
	#container .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0px;
    }
	
	.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: /*100%*/0;
	flex-grow: 1;
    }
	
	#container .swiper-button-next, 
	#container .swiper-container-rtl .swiper-button-prev, 
	#container .swiper-button-prev, 
	#container .swiper-container-rtl .swiper-button-next {
    top: /*40%*/calc(100% - 56px);
    }
	
}



/*============================================= design contents =====================================================*/



/*---------------- identityArea ----------------*/


.identityArea{
	position: fixed;
    top: /*135px*/30%;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
	z-index: -1;

	transition: all 1s 0s ease;

}




.identityArea .i01_parentB{
	/*color:transparent;
	text-shadow:0px 0px 9px #515151;*/
	transition: all 1s 0s ease;
	filter: blur(0px);
}


.identityArea.run .i01_parentB{
	/*color:transparent;
	text-shadow:0px 0px 9px #515151;*/
	/*transition: all 1s 0s ease;*/
	filter: blur(5px);
	opacity: 0.5;
}



.identityArea.run .cover__scrollBtn{
	opacity: 0;
	transition: all 1s 0s ease;
}


.i01_parentB{
	/*padding-top: 70px;*/
		color: #515151;
}


.i01_parentB .text01 {
    font-size: 14px;
    /* text-decoration: underline; */
    margin-bottom: 70px;
    border-bottom: solid 1px #9d9d9d;
    display: inline-block;
    padding: 0 4px 4px;
    line-height: 1.3em;
   color: #9d9d9d;
}

.identityArea.run .i01_parentB  .text01{
	border-bottom: solid 1px #efefef;
	/*color:transparent;
	text-shadow:0px 0px 9px #9d9d9d;*/
	/*transition: all 1s 0s ease;
		filter: blur(5px);*/

}

.i01_parentB .text02Area{
	
}

.advancedEssential{
	width: 220px;
	margin-bottom: 5px;
	/*transition: all 1s 0s ease;*/
}

.identityArea.run .advancedEssential{
	/*filter: blur(5px);*/
}


.i01_parentB .text02{
    position: relative;
    width: 214px;
    margin: auto;
    height: 70px;
    vertical-align: middle;
    margin-bottom: 10px;
}

.i01_parentB .text02 span{
		line-height: 1.0em;
	position: absolute;
	    display: inline-block;


}


.i01_parentB .text02 span.t1,
.i01_parentB .text02 span.t3{
	 font-size: 22px;
	font-weight: 700;

}

.i01_parentB .text02 span.t1{
	top:7px;
	left: 0;
}
.i01_parentB .text02 span.t3{
	bottom: 7px;
	right: 0;
	font-weight: 600;

}

.i01_parentB .text02 span.t2{
	font-size: 70px;
    /*vertical-align: -7%;*/
	top: calc(50% - 35px);
	left: calc(50% - 35px);
}

.i01_parentB .text03{
	font-size: 39px;
	font-weight: 600;
	margin-bottom: 30px;
}

.i01_parentB .text04{
	font-size: 19px;
	font-weight: 500;
	margin-bottom: 40px;
}





/*---------------- philosophyArea ----------------*/


.philosophyArea{
	padding-top: 600px;
	/*position: inherit;*/
}



.fadeIn5{
	opacity: 0 !important;
	transition: all 2s 0s ease;
	transform: translateY(20px);
}
.fadeIn5.run{
	opacity: 1 !important;
	transform: translateY(0px);
}





.f01_parentB,
.f02_parentB,
.f03_parentB,
.f04_parentB{
	width: 984px;
	height: 492px;
	border-radius: 40px;
	margin: auto;
	background:/*#EDEDED*/#f4f4f4;
	box-shadow: 0 0 30px 10px rgba(0, 0, 0, .1);
	/*clip-path: inset(0px round 40px);*/
	position: relative;
}

.mask{
	width: 984px;
	height: 492px;

	clip-path: inset(0px round 40px);
	
}



.transition01{
/*transition: all 2.0s 1.0s ease-in;*/
/*transition: all 2.0s 1.0s cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
transition: all 2.0s 1.0s cubic-bezier(.77,.18,.26,.83);
}


.f01_parentB .parts01{
    width: 385px;
    height: 385px;
    top: -45px;
    left: 20px;
	transform: translate(-80px,-80px) scale(1.3, 1.3);
}


.f01_parentB .parts02{
	width: 125px;
    height: 125px;
    top: 35px;
    left: 520px;
	transform: translate(-20px,-30px) scale(0.7, 0.7);
}

.f01_parentB .parts03{
	width: 105px;
    height: 105px;
    top: 330px;
    right: 400px;
	transform: translate(-100px,100px) scale(0.7, 0.7);
	filter: blur(2px);

}

.f01_parentB .parts04{
    width: 150px;
    height: 150px;
    top: 270px;
    left: 235px;
	transform: translate(80px,80px) scale(0.7, 0.7);
}

.f01_parentB .parts05{
    width: 20px;
    height: 20px;
    top: 140px;
    right: 82px;
	transform: translate(30px,150px) scale(1.0, 1.0);
}

.f01_parentB .parts06{
    width: 94px;
    height: 94px;
    top: 45px;
    right: 125px;
	transform: translate(-100px,120px) scale(0.4, 0.4);
}
/*未使用
.f01_parentB .parts07{
    width: 50px;
    height: 50px;
    top: 240px;
    right: 250px;
	transform: translate(-80px,-80px);
}*/

.f01_parentB .parts08{
    width: 120px;
    height: 120px;
    top: 340px;
    right: 80px;
	transform: translate(-80px,80px) scale(1.2, 1.2);
	filter: blur(7px);

}

.f01_parentB .parts09{
	width: 45px;
    height: 45px;
    top: 235px;
    left: 437px;
	transform: translate(-50px,50px) scale(0.9, 0.9);
}
.f01_parentB .parts10{
    width: 40px;
    height: 40px;
    top: 190px;
    right: 50px;
	transform: translate(30px,150px) scale(1.0, 1.0);
}

.f01_parentB .parts01,
.f01_parentB .parts02,
.f01_parentB .parts03,
.f01_parentB .parts04,
.f01_parentB .parts05,
.f01_parentB .parts06,
.f01_parentB .parts07,
.f01_parentB .parts08,
.f01_parentB .parts09,
.f01_parentB .parts10{
	border-radius: 50%;/*角丸*/
	background:#fff;
	position: absolute;
	/*filter: blur(4px);*/
	/*box-shadow: 0px 0px 10px #fff;*/
	box-shadow:0px 0px 20px 4px #fff;
	opacity: 0.4 ;

}

.f01_parentB.run .parts01,
.f01_parentB.run .parts02,
.f01_parentB.run .parts03,
.f01_parentB.run .parts04,
.f01_parentB.run .parts05,
.f01_parentB.run .parts06,
.f01_parentB.run .parts07,
.f01_parentB.run .parts08,
.f01_parentB.run .parts09,
.f01_parentB.run .parts10{
	opacity: 1 ;
    transform: translate(0px) scale(1.0, 1.0);
}

.atari{
	position: absolute;
	width: 100%;
	height: auto;
	opacity: 0.5;
}

.parts_girl{
	width: 340px;
	height: auto;
	position: absolute;
	bottom: 0;
	right: 85px;
}


.FtextPhilosophy{
	top: 52px;
    left: 70px;
    font-size: /*16*/14px;
	font-weight: /*400*/500;
	border-bottom: solid 1px #9d9d9d;
	position: absolute;
    display: inline-block;
    padding: 0 4px 4px;
    line-height: 1.3em;
	color: #9d9d9d;
	opacity:0 ;

}

.Ftext01{
	top: 96px;
    left: 66px;
    font-size: /*40*/37px;
	font-weight: 600;
}

.Ftext02{
	top: 172px;
    left: 66px;
    font-size: 18px;
	font-weight: 500;
	line-height: 1.9;
}


.Ftext01,
.Ftext02{
	display: inline-block;
	position: absolute;
	color: #515151;
	opacity:0 ;
}

.f01_parentB .FtextPhilosophy,
.f01_parentB .Ftext01,
.f01_parentB .Ftext02,
.f02_parentB .FtextPhilosophy,
.f02_parentB .Ftext01,
.f02_parentB .Ftext02{
	transition: all 2s 1s ease;
}

.f03_parentB .FtextPhilosophy,
.f03_parentB .Ftext01,
.f03_parentB .Ftext02,
.f04_parentB .FtextPhilosophy,
.f04_parentB .Ftext01,
.f04_parentB .Ftext02{
	transition: all 2s 1s ease;
}



.run .FtextPhilosophy{
	/*opacity: 0.4 ;*/
}
.run .FtextPhilosophy,
.run .Ftext01,
.run .Ftext02{
	opacity: 1 ;
}



/*---------f2---------*/

.transition02{
/*transition: all 1.5s 0.5s ease-in-out;*/
transition: all 2.0s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}

.f02_parentB div{
	position: absolute;
}

.f02_hasds{
	position: absolute;
	opacity: 1!important;
}

.f02_parentB img{
	position: absolute;
	top:0;
	left: 0;
}

.f02_parentB .parts01{
    width: 117px;
    height: 117px;
    top: 83px;
    left: 579px;
	transform: translate(150px,-150px);
}

.f02_parentB .parts02{
    width: 79px;
    height: 78px;
    top: 125px;
    left: 662px;
	transform: translate(180px,-50px);
}

.f02_parentB .parts03{
    width: 59px;
    height: 59px;
    top: 119px;
    left: 704px;
	transform: translate(80px,-50px);
}

.f02_parentB .parts04{
    width: 49px;
    height: 49px;
    top: 176px;
    left: 659px;
	transform: translate(50px,-80px);
}

.f02_parentB .parts05{
    width: 126px;
    height: 126px;
    top: 157px;
    left: 668px;
	transform: translate(200px,120px);
}

.f02_parentB .parts06{
    width: 74px;
    height: 72px;
    top: 249px;
    left: 728px;
	transform: translate(50px,30px);
}
.f02_parentB .parts07{
    width: 97px;
    height: 97px;
    top: 255px;
    left: 646px;
	transform: translate(-150px,150px);
}
.f02_parentB .parts08{
    width: 62px;
    height: 63px;
    top: 321px;
    left: 663px;
	transform: translate(50px,50px);
}
.f02_parentB .parts09{
    width: 154px;
    height: 153px;
    top: 266px;
    left: 539px;
	transform: translate(-150px,150px);
}
.f02_parentB .parts10{
    width: 68px;
    height: 68px;
    top: 325px;
    left: 516px;
	transform: translate(-50px,50px);
}
.f02_parentB .parts11{
    width: 125px;
    height: 125px;
    top: 231px;
    left: 473px;
	transform: translate(-150px,-120px);
}
.f02_parentB .parts12{
    width: 60px;
    height: 59px;
    top: 237px;
    left: 458px;
	transform: translate(-100px,-50px);
}
.f02_parentB .parts13{
    width: 81px;
    height: 81px;
    top: 194px;
    left: 461px;
	transform: translate(-50px,-50px);
}
.f02_parentB .parts14{
    width: 56px;
    height: 56px;
    top: 192px;
    left: 505px;
	transform: translate(-50px,-80px);
}
.f02_parentB .parts15{
    width: 138px;
    height: 136px;
    top: 107px;
    left: 475px;
	transform: translate(100px,-200px);
}
.f02_parentB .parts16{
    width: 66px;
    height: 67px;
    top: 99px;
    left: 549px;
	transform: translate(-50px,-50px);
}




.f02_parentB div{
	opacity: 0 ;
}


.f02_parentB.run div{
	opacity: 1 ;
   transform: translate(0px);
}



.f02_parentB div img:nth-child(1){
	opacity: 0;
	/*transition: all 1.5s 1.5s ease-out;*/
	/*transition: all 0.8s 3.0s ease-out;*/
    transition: all 1.8s 3.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}



.f02_parentB div.parts03 img:nth-child(1),
.f02_parentB div.parts06 img:nth-child(1),
.f02_parentB div.parts10 img:nth-child(1),
.f02_parentB div.parts12 img:nth-child(1),
.f02_parentB div.parts16 img:nth-child(1){
	opacity: 0;
	/*transition: all 1s 0.5s ease-out;*/
	/*transition: all 0.5s 2.2s ease-out;*/
    transition: all 1.5s 2.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.f02_parentB.run div img:nth-child(1){
	opacity: 1;
}

.f02_parentB.run div.parts02 img:nth-child(1),
.f02_parentB.run div.parts03 img:nth-child(1),
.f02_parentB.run div.parts06 img:nth-child(1),
.f02_parentB.run div.parts08 img:nth-child(1),
.f02_parentB.run div.parts09 img:nth-child(1),
.f02_parentB.run div.parts10 img:nth-child(1),
.f02_parentB.run div.parts12 img:nth-child(1),
.f02_parentB.run div.parts13 img:nth-child(1),
.f02_parentB.run div.parts16 img:nth-child(1){
	opacity: 0.6;
}



/*
.f02_parentB .text01{
	top: 268px;
    left: 75px;
    font-size: 44px;
	font-weight: 500;
}

.f02_parentB .text02{
	top: 360px;
    left: 75px;
    font-size: 18px;
	font-weight: 500;
}

*/

/*---------f3---------*/

.f03_parentB div{
	position: absolute;
}


.f03_bace{
	position: absolute;
}

.f03_parentB .parts01{
    width: 312px;
    height: 312px;
    top: 92px;
    right: 192px;
	transform: translateY(-30px);
	/*opacity: 0;*/
}

.f03_parentB.run .parts01{
	animation-name: animation_f03-01;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
	animation-delay: 1.5s;
}

@keyframes animation_f03-01 {
  0% {
   transform:translateY(-30px);
  }
40% {
   transform:translateY(15px);
  }
  100% {
   transform:translateY(0px);
  }
}


.f03_parentB .parts02{
    width: 312px;
    height: 312px;
    top: 404px;
    right: 192px;
	/*transform: translate(180px,-50px);*/
	transform: translateY(20px);

}

.f03_parentB.run .parts02{
	animation-name: animation_f03-02;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
	animation-delay: 1.5s;
}

@keyframes animation_f03-02 {
  0% {
   transform:translateY(20px);
  }
40% {
   transform:translateY(-10px);
  }
  100% {
   transform:translateY(0px);
  }
}


.f03_parentB .parts01 img{
	position: absolute;
	top:0;
	left: 0;
}
.f03_parentB .parts01 img.f03_1glow{
	transition: all 1s 1.5s ease-out;
    transform:rotate(-35deg);
	opacity: 0.3;
}

.f03_parentB.run .parts01 img.f03_1glow{
	transform:rotate(0deg);
	opacity: 1;
}



/*---------f4---------*/

.f04_parentB img{
	position: absolute;
}


.f04_parentB .f04_hand1{
    top: 65px;
    left: 327px;
	/*transform: translate(00px,00px);*/
}
.f04_parentB .f04_hand2{
    top: 117px;
    left: 786px;
	/*transform: translate(00px,00px);*/
}
.f04_parentB .f04_hand3{
    top: 208px;
    left: 663px;
	/*transform: translate(00px,00px);*/
}
.f04_parentB .f04_hand4{
    top: 15px;
    left: 320px;
	/*transform: translate(00px,00px);*/
}



.f04_parentB .f04_1{
    top: 92px;
    left: 484px;
	/*transform: translate(00px,00px);*/
}
.f04_parentB .f04_2{
    top: -94px;
    left: 607px;
	transform: translate(-122px,186px);
	opacity: 0;
	transition: all 0.5s 0.75s ease-in;
}
.f04_parentB .f04_3{
    top: 250px;
    left: 315px;
	transform: translate(169px,-158px);
	opacity: 0;
	transition: all 0.5s 0.5s ease-in;
}
.f04_parentB .f04_4{
    top:-130px;
    left:498px;
	transform: translate(149px,91px) scale(1.2, 1.2) rotate(-30deg);
	opacity: 0;
	transition: all 0.8s 2.0s ease-in;
}
.f04_parentB .f04_5{
    top: 51px;
    left: 817px;
	transform: translate(-122px,56px) scale(2.5, 2.5) rotate(30deg);
	opacity: 0;
	transition: all 0.8s 1.5s ease-in;
}
.f04_parentB .f04_6{
    top: 228px;
    left: 285px;
	transform: translate(116px,103px) scale(2, 2) rotate(30deg);
	opacity: 0;
	transition: all 0.8s 1.0s ease-in;
}
.f04_parentB .f04_7{
    top: 289px;
    left: 470px;
	transform: translate(-185px,-72px) scale(0.5, 0.5)  rotate(-30deg);
	opacity: 0;
	transition: all 0.8s 1.75s ease-in;
}


.f04_parentB.run .f04_2,
.f04_parentB.run .f04_3{
	opacity: 0.5 ;
   transform: translate(0px);
}

.f04_parentB.run .f04_4,
.f04_parentB.run .f04_5,
.f04_parentB.run .f04_6,
.f04_parentB.run .f04_7{
	opacity: 0.7 ;
   transform: translate(0px)  scale(1, 1) rotate(0deg);
}


.f04_parentB .f04_2-3{
	top: -77px;
    left: 310px;
	opacity: 0;
	transform: rotate(90deg);
	/*transition: all 1.0s 1.0s ease-in;*/
    transition: all 1.5s 1.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

.f04_parentB.run .f04_2-3{
	opacity: 0.5 ;
	transform: rotate(0deg);
}

.f04_parentB .f04_4-5{
	top: -201px;
    left: 495px;
	opacity: 0;
	transform: rotate(-90deg);
	/*transition: all 1.0s 2.0s ease-in;*/
	transition: all 2.0s 2.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}
.f04_parentB.run .f04_4-5{
	opacity: 0.7 ;
	transform: rotate(0deg);
}

.f04_parentB .f04_6-7{
	top: 25px;
    left: 105px;
	opacity: 0;
	transform: rotate(90deg);
	/*transition: all 1.0s 2.0s ease-in;*/
	transition: all 2.0s 2.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.f04_parentB.run .f04_6-7{
	opacity: 0.7 ;
	transform: rotate(0deg);
}
/*---------------- messageArea ----------------*/

.messageArea{/*20180614*/
	margin: 0 auto;
	text-align: center;
	width: 720px;
}

.m01{
	margin-bottom: 30px;
}




.messageArea .text01 {
    font-size: 14px;
    border-bottom: solid 1px #9d9d9d;
    display: inline-block;
    padding: 0 4px 4px;
    line-height: 1.3em;
    color: #9d9d9d;
	margin-bottom: 70px;
}



.m_title{
	font-size: 27px;
	margin-bottom: 40px;
	color: #515151;
}

.message_text01{/*20180614*/
	margin-bottom: 90px;
	text-align: /*left*/center;
	/*margin-left: 12px;*/
	font-size: 18px;
	color: #515151;
	line-height: 2.1;

}

.message_text01 p{
	margin-bottom: 55px;

}


.messageArea .text01,
.messageArea .m_title,
.messageArea .message_text01{
	opacity: 0 ;
   /*transform: translateY(20px);*/
    transition: all 2s 0s ease-in-out;

}


.run .messageArea .text01,
.run .messageArea .m_title,
.run .messageArea .message_text01{
	opacity: 1 ;
	/*transform: translateY(0px);*/
}



/*---------------- guide ----------------*/
.f-guide{
	position:absolute;
	top:370px;
	left:40px;
}


 
.f-guide{
	position:absolute;
	top:370px;
	left:40px;
}






.blur1 {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
}

#guide{
	background-image:url(../img/guide.png);
	display:block;
	/*width:70px;
	height:325px;*/
	width:10px;
	height:274px;
	position:fixed;
	top:40%;
	left:50%;
	margin-left:-465px;
	
}



#guide{
	opacity:0;
	
	transition-property: opacity;
	-moz-transition-property: opacity;
	-webkit-transition-property: opacity;
	-o-transition-property: opacity;
	-ms-transition-property: opacity;

	transition-duration:0.5s;	
	-moz-transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	-ms-transition-duration:0.5s;	
	
	transition-delay:0s;
	-moz-transition-delay:0s;
	-webkit-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
}

.guide_circle_now{
	position:absolute;
	left:2px;
	top:3px;
	transform: translateY(0);
/*	
	transform:translateY(10px);
	-moz-transform:translateY(10px);
	-webkit-transform:translateY(10px);
	-o-transform:translateY(10px);
	-ms-transform:translateY(10px);
*/	
	transition-property: transform;
	-moz-transition-property: transform;
	-webkit-transition-property: transform;
	-o-transition-property: transform;
	-ms-transition-property: transform;

	transition-duration:0.1s;	
	-moz-transition-duration:0.1s;
	-webkit-transition-duration:0.1s;
	-o-transition-duration:0.1s;
	-ms-transition-duration:0.1s;
	
	
transition-timing-function:ease-out;	
-moz-transition-timing-function:ease-out;
-webkit-transition-timing-function:ease-out;
-o-transition-timing-function:ease-out;
-ms-transition-timing-function:ease-out;
	
	
}


.f01_parentB.run ~ .guide_circle_now{
	transform: translateY(45px);
}

.f02_parentB.run ~ .guide_circle_now{
	transform: translateY(90px);
}







@media screen and (max-width: 896px){
	
	.whiteGradation{
		    /*background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));*/
		background:none;
		background-image:url(../img/whiteGradation.png);
		background-repeat: repeat-x;
    width: 100%;
    height: 150px;
	}
	

	
.section3, .section4, .section5 {
    margin-bottom: 0px;
    padding-top: 50px;
    overflow: hidden;
    padding-bottom: 50px;
}
	
	
	.section1 {
    margin-bottom: 0px;
    padding-top: 20px;
    overflow: hidden;
    padding-bottom: 50px;
	margin-top: 70px;
	}
	
	
.section2 {
    margin-bottom: 0px;
    padding-top: 0px;
    overflow: hidden;
    padding-bottom: 0px;
	margin-top: 0px;
	
	/*background: #ffffff;*/

}
	
	
/*---------------- identityArea ----------------*/
	
	.identity_spAtari{
	position: absolute;
	width: 104%;
	height: auto;
	opacity: 0.3;
	margin-left:-2vw;
}


.identityArea{
	position: fixed;
    top: /*135px*/27%;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
	z-index: -1;

	transition: all 1s 0s ease;
}



.identityArea .i01_parentB{
	transition: all 1s 0s ease;
	filter: blur(0px);
}


.identityArea.run .i01_parentB{
	filter: blur(5px);
	opacity: 0.5;
}



.identityArea.run .cover__scrollBtn{
	opacity: 0;
	transition: all 1s 0s ease;
}


.i01_parentB{
		color: #515151;
}


.i01_parentB .text01 {
    font-size: 13px;
    margin-bottom: 60px;
    border-bottom: solid 1px #9d9d9d;
    display: inline-block;
    padding: 0 1px 3px;
    line-height: 1.3em;
   color: #9d9d9d;
}

.identityArea.run .i01_parentB  .text01{
	border-bottom: solid 1px #efefef;
}


.advancedEssential{
	width: 180px;
	margin-bottom: 15px;
}


.i01_parentB .text03{
	font-size: 35px;
	font-weight: 600;
	margin-bottom: 40px;
}

.i01_parentB .text04{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 40px;
	line-height: 1.9;
}

	
	
	
	
	
	
	
	
/*---------------- philosophyArea ----------------*/


.philosophyArea{
	padding-top: 600px;
	/*position: inherit;*/
}


/*
.fadeIn5{
	opacity: 0 !important;
	transition: all 2s 0s ease;
	transform: translateY(20px);
}
.fadeIn5.run{
	opacity: 1 !important;
	transform: translateY(0px);
}*/
.fadeIn5{
	opacity: 1 !important;
	transition: none;
	transform: translateY(0px);
}

.f01_parentB,
.f02_parentB,
.f03_parentB,
.f04_parentB {
    width: 100%;
    height: /*492px*/85vw;
    border-radius: 20px;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, .2);
}
	
	
	

	
	
.mask {
    width: /*984px*/100%;
    height: /*492px*/85vw;
    clip-path: inset(0px round 20px);
}



.transition01{
/*transition: all 2.0s 1.0s ease-in;*/
/*transition: all 2.0s 1.0s cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
transition: all 2.0s 1.0s cubic-bezier(.77,.18,.26,.83);
}

	
.philosophy_sp{
	position: absolute;
	width: 100%;
	height: auto;
}	

	
	
	
	
/*---------f1---------*/
.f01_parentB .parts01,
.f01_parentB .parts02,
.f01_parentB .parts03,	
.f01_parentB .parts04,	
.f01_parentB .parts05,
.f01_parentB .parts06,
.f01_parentB .parts07,
.f01_parentB .parts08,	
.f01_parentB .parts09,	
.f01_parentB .parts10,
.parts_girl{
		display: none;
	}	



.atari{
	position: absolute;
	width: 100%;
	height: auto;
	opacity: 0.5;
}



.FtextPhilosophy{
	top: 20px;
    left: 24px;
    font-size: 13x;
	font-weight: 500;
	border-bottom: solid 1px #9d9d9d;
	position: absolute;
    display: inline-block;
    padding: 0 1px 3px;
    line-height: 1.3em;
	color: #9d9d9d;

}

.Ftext01{
	top: 45px;
    left: 23px;
    font-size: /*40*/25px;
	font-weight: 600;
}

.Ftext02{
	top: 93px;
    left: 23px;
    font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
}


.Ftext01,
.Ftext02{
	display: inline-block;
	position: absolute;
	color: #515151;

}

.f01_parentB .FtextPhilosophy,
.f01_parentB .Ftext01,
.f01_parentB .Ftext02,
.f02_parentB .FtextPhilosophy,
.f02_parentB .Ftext01,
.f02_parentB .Ftext02,
.f03_parentB .FtextPhilosophy,
.f03_parentB .Ftext01,
.f03_parentB .Ftext02,
.f04_parentB .FtextPhilosophy,
.f04_parentB .Ftext01,
.f04_parentB .Ftext02{
	transition: all 2s 0s ease;
	
		opacity:0 ;
		/*transform: translateY(20px);*/
}



.run .FtextPhilosophy{
	/*opacity: 0.4 ;*/
}
.f01_parentB.run .FtextPhilosophy,
.f01_parentB.run .Ftext01,
.f01_parentB.run .Ftext02,
.f02_parentB.run .FtextPhilosophy,
.f02_parentB.run .Ftext01,
.f02_parentB.run .Ftext02,
.f03_parentB.run .FtextPhilosophy,
.f03_parentB.run .Ftext01,
.f03_parentB.run .Ftext02,
.f04_parentB.run .FtextPhilosophy,
.f04_parentB.run .Ftext01,
.f04_parentB.run .Ftext02{
	opacity: 1 ;
		/*transform: translateY(0px);*/
}



/*---------f2---------*/

.transition02{
/*transition: all 1.5s 0.5s ease-in-out;*/
transition: all 2.0s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}

.f02_parentB div{
	position: absolute;
}

.f02_hasds{
	position: absolute;
	display: none;
}

.f02_parentB img{
	position: absolute;
	top:0;
	left: 0;
	/*top:inherit;*/
}

.f02_parentB .parts01,
.f02_parentB .parts02,
.f02_parentB .parts03,
.f02_parentB .parts04,
.f02_parentB .parts05,
.f02_parentB .parts06,
.f02_parentB .parts07,
.f02_parentB .parts08,
.f02_parentB .parts09,
.f02_parentB .parts10,
.f02_parentB .parts11,
.f02_parentB .parts12,
.f02_parentB .parts13,
.f02_parentB .parts14,
.f02_parentB .parts15,	
.f02_parentB .parts16{
		display: none;
}





.f02_parentB div{
	opacity: 0 ;
}


.f02_parentB.run div{
	opacity: 1 ;
   transform: translate(0px);
}



.f02_parentB div img:nth-child(1){
	opacity: 1;
    /*transition: all 1.8s 3.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);*/
	transition: none;
}



.f02_parentB div.parts03 img:nth-child(1),
.f02_parentB div.parts06 img:nth-child(1),
.f02_parentB div.parts10 img:nth-child(1),
.f02_parentB div.parts12 img:nth-child(1),
.f02_parentB div.parts16 img:nth-child(1){
	opacity: 0;
    transition: all 1.5s 2.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.f02_parentB.run div img:nth-child(1){
	opacity: 1;
}

.f02_parentB.run div.parts02 img:nth-child(1),
.f02_parentB.run div.parts03 img:nth-child(1),
.f02_parentB.run div.parts06 img:nth-child(1),
.f02_parentB.run div.parts08 img:nth-child(1),
.f02_parentB.run div.parts09 img:nth-child(1),
.f02_parentB.run div.parts10 img:nth-child(1),
.f02_parentB.run div.parts12 img:nth-child(1),
.f02_parentB.run div.parts13 img:nth-child(1),
.f02_parentB.run div.parts16 img:nth-child(1){
	opacity: 0.6;
}





/*---------f3---------*/

.f03_parentB div{
	position: absolute;
}


.f03_bace{
	position: absolute;
	display: none;

}

.f03_parentB .parts01{
	display: none;

	
}
/*
.f03_parentB.run .parts01{
	animation-name: animation_f03-01;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
	animation-delay: 1.5s;
}

@keyframes animation_f03-01 {
  0% {
   transform:translateY(-30px);
  }
40% {
   transform:translateY(15px);
  }
  100% {
   transform:translateY(0px);
  }
}
*/

.f03_parentB .parts02{
	display: none;

}
/*
.f03_parentB.run .parts02{
	animation-name: animation_f03-02;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
	animation-delay: 1.5s;
}

@keyframes animation_f03-02 {
  0% {
   transform:translateY(20px);
  }
40% {
   transform:translateY(-10px);
  }
  100% {
   transform:translateY(0px);
  }
}

*/
.f03_parentB .parts01 img{
	position: absolute;
	top:0;
	left: 0;
}
.f03_parentB .parts01 img.f03_1glow{
	display: none;

}
/*
.f03_parentB.run .parts01 img.f03_1glow{
	transform:rotate(0deg);
	opacity: 1;
}*/



/*---------f4---------*/

.f04_parentB img{
	position: absolute;
}


.f04_parentB .f04_hand1,
.f04_parentB .f04_hand2,	
.f04_parentB .f04_hand3,
.f04_parentB .f04_hand4{
	display: none;
}
/*
.f04_parentB .f04_hand2{
    top: 117px;
    left: 786px;
}
.f04_parentB .f04_hand3{
    top: 208px;
    left: 663px;
}
.f04_parentB .f04_hand4{
    top: 15px;
    left: 320px;
}*/



.f04_parentB .f04_1,
.f04_parentB .f04_2-3,
.f04_parentB .f04_4-5,
.f04_parentB .f04_6-7{
	display: none;
}
	/*
.f04_parentB .f04_2{
    top: -94px;
    left: 607px;
	transform: translate(-122px,186px);
	opacity: 0;
	transition: all 0.5s 0.75s ease-in;
}
.f04_parentB .f04_3{
    top: 250px;
    left: 315px;
	transform: translate(169px,-158px);
	opacity: 0;
	transition: all 0.5s 0.5s ease-in;
}
.f04_parentB .f04_4{
    top:-130px;
    left:498px;
	transform: translate(149px,91px) scale(1.2, 1.2) rotate(-30deg);
	opacity: 0;
	transition: all 0.8s 2.0s ease-in;
}
.f04_parentB .f04_5{
    top: 51px;
    left: 817px;
	transform: translate(-122px,56px) scale(2.5, 2.5) rotate(30deg);
	opacity: 0;
	transition: all 0.8s 1.5s ease-in;
}
.f04_parentB .f04_6{
    top: 228px;
    left: 285px;
	transform: translate(116px,103px) scale(2, 2) rotate(30deg);
	opacity: 0;
	transition: all 0.8s 1.0s ease-in;
}
.f04_parentB .f04_7{
    top: 289px;
    left: 470px;
	transform: translate(-185px,-72px) scale(0.5, 0.5)  rotate(-30deg);
	opacity: 0;
	transition: all 0.8s 1.75s ease-in;
}


.f04_parentB.run .f04_2,
.f04_parentB.run .f04_3{
	opacity: 0.5 ;
   transform: translate(0px);
}

.f04_parentB.run .f04_4,
.f04_parentB.run .f04_5,
.f04_parentB.run .f04_6,
.f04_parentB.run .f04_7{
	opacity: 0.7 ;
   transform: translate(0px)  scale(1, 1) rotate(0deg);
}


.f04_parentB .f04_2-3{
	top: -77px;
    left: 310px;
	opacity: 0;
	transform: rotate(90deg);
    transition: all 1.5s 1.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

.f04_parentB.run .f04_2-3{
	opacity: 0.5 ;
	transform: rotate(0deg);
}

.f04_parentB .f04_4-5{
	top: -201px;
    left: 495px;
	opacity: 0;
	transform: rotate(-90deg);
	transition: all 2.0s 3.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}
.f04_parentB.run .f04_4-5{
	opacity: 0.7 ;
	transform: rotate(0deg);
}

.f04_parentB .f04_6-7{
	top: 25px;
    left: 105px;
	opacity: 0;
	transform: rotate(90deg);
	transition: all 2.0s 3.0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.f04_parentB.run .f04_6-7{
	opacity: 0.7 ;
	transform: rotate(0deg);
}	
	
	
/*---------------- messageArea ----------------*/

.messageArea{/*20180614*/
	margin: 0 auto;
	text-align: center;
	width: 100%;
	background: #fff;
	padding-bottom: 50px;
}

.m01{
	margin-bottom: 30px;
}




.messageArea .text01 {
    font-size: 13px;
    border-bottom: solid 1px #9d9d9d;
    display: inline-block;
    padding: 0 1px 3px;
    line-height: 1.3em;
    color: #9d9d9d;
	margin-bottom: 52px;
}



.m_title{
	font-size: 27px;
	margin-bottom: 52px;
	list-style: 1.6;
}

.message_text01{/*20180614*/
	margin-bottom: 90px;
	text-align: /*left*/center;
	/*margin-left: 12px;*/
	font-size: 12.7px;
}

.message_text01 p{
	margin-bottom: 50px;
}
	
	
	
	
	
	
	
	
}