/*================================================================================
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: 100px;
	padding-top: 100px;
	overflow: hidden;
}
}

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

/*.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 {
    /*max-width: 50%;*/
    margin: 0 auto;
    /*width: /*50%*//*550px;*/
	height: 500px;
	float: left;
}
}
@media screen and (max-width: 896px){
.boxStyle11 {
    /*max-width: 50%;*/
    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%;
}

.boxStyle11.box-right {
/*argin-top: 200px;*/
}

/*
.boxStyle11 .bs11-wrapper {
    position: absolute;
    width:  50%;
    margin: 0 auto;
    top: 0;
    left: 0;
    height: 100%;
    right: 0;
}
*/
.box-left .bs11_txt-box{
	position: absolute;
	/*width: 50%;*/
	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;
  }
}


.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);
    }
	
	
	
	
	
	
	
	
	
}