@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Merienda');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');

.subp_title{
  background-image: url(/company/images/title.jpg);
}

/* PHILOSOPHY */
.f_vdl{
  font-family: vdl-logojrblack, sans-serif;
  font-weight: 900;
  font-style: normal;
}
.vision_top{
  position: relative;
  height: 330px;
}
.background {
  /* position: absolute; */
  display: block;
  /* top: 0;
  left: 0;
  z-index: 0; */
  
}
.vision_txt{
  position: absolute;
  top: 74px;
  width: 100%;
  text-align: center;
}
.vision{
    font-size: 36px;
    font-family: "VDL";
    color: rgb(255, 72, 36);
    font-weight: bold;
    line-height: 1.5;
    margin:0;
}
.second_txt{
  font-size: 20px;
  font-weight: bold;
}
.about_ver{
  background-color: #fafafa;
  border-radius: 15px;
  padding: 40px 20px;
  text-align: center;
  line-height: 1.8;
  color: #5b5b5b;
}

/* VISION */
.vision_disp{
  margin: 80px 0 0;
}
.vision_3line{
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.vision_3line > span:first-child{
  position: relative;
  margin: 0 0px 0 0;
  z-index: 1;
  width: 259px;
  display: inline-block;
  text-align: left;
}
.vision_3line > span:first-child span{
  background-color: #FFF;
  padding: 0 10px 0 0;
  position: relative;
  z-index: 2;
}

.vision_3line > span:first-child span span{
  color: rgba(255,72,36,1);
  background: rgb(255,153,70);
  background: linear-gradient(90deg, rgba(255,153,70,1) 0%, rgba(255,72,36,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index:2;
  padding: 0;
 }
.vision_3line > span:first-child:before{
	content:'';
	width: 151px;
	height:1px;
	background: #000;
	right: -61px;
	top: 26px;
	position: absolute;
	z-index: 1;
}

.vision_3line > span:last-child{
  background-color: #FFF;
  padding: 0 0 0 15px;
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 364px;
  text-align: left;
}

.always_back{
	position:relative;
	margin: 30px 0 0;
	height: 184px;
}
.always_back_txt{
  font-family: 'Roboto', sans-serif;
  position: relative;
  text-align: center;
  font-size: 68px;
  color: #fff4ee;
  font-weight: 700;
  position: absolute;
  width: 100%;
  left: 0;
  top: 12px;
}
.always_txt{
  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50px;
  font-size: 48px;
  font-weight: bold;
}

/*------- GUIDELINES -------*/
.guidelins_disp{
  max-width: 755px;
  margin: 50px auto;
}
.bg_01,.bg_02,.bg_03,.bg_04{
  background-repeat: no-repeat;
  height: 208px;
}
.bg_01{
  background-image: url(/company/philosophy/images/01.png);
  padding: 139px 0 0 200px;
  text-align: left;
}
.bg_02{
  background-image: url(/company/philosophy/images/02.png);
  padding: 130px 115px 0 0;
  background-position: right top;
  text-align: right;
  margin: -70px 0 0;
}
.bg_03{
  background-image: url(/company/philosophy/images/03.png);
  padding: 139px 0 0 200px;
  text-align: left;
  margin: -70px 0 0;
}
.bg_04{
  background-image: url(/company/philosophy/images/04.png);
  padding: 130px 115px 0 0;
  background-position: right top;
  text-align: right;
  margin: -70px 0 0;
}



/* ------- ANIMATION 1 ---------*/
.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}
.leftAnime{
  opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}
.left_2{
  animation-delay: 1.5s; /* アニメーション開始時間 */

}
.left_3{
  animation-delay: 3s; /* アニメーション開始時間 */
  
}

@keyframes slideTextX100 {
from {
transform: translateX(-100%); /*要素を左の枠外に移動*/
      opacity: 0;
}

to {
transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
}
}

.slideAnimeRightLeft {
animation-name:slideTextX-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextX-100 {
from {
transform: translateX(100%);/*要素を右の枠外に移動*/
  opacity: 0;
}

to {
transform: translateX(0);/*要素を元の位置に移動*/
  opacity: 1;
}
}


/* ------- ANIMATION 2 ---------*/
.scrolldown1{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:50%;
  bottom:10px;
    /*全体の高さ*/
  height:50px;
}
/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 60px;
	background: #000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.6s ease-in-out infinite;
  animation-delay: 5s; /* アニメーション開始時間 */
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:60px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


/* iPad */
@media (max-width: 992px) {

	.vision_top {
	   height: 290px;
	}	
	.vision{
	  font-size: 30px;
	  line-height: 1.5;
	}
	.about_ver{
	  padding: 30px 10px;
	}
	.about_ver br{
		display:none;
	}
	.vision_3line {
		font-size: 25px;
	}
	.vision_3line > span:first-child{
	  width: 208px;
	}
	.vision_3line > span:first-child:before {
		width: 100px;
		height: 1px;
		right: -61px;
		top: 20px;
	}	
	.vision_3line > span:last-child {
		padding: 0 0 0 15px;
		width: 308px;
	}

	.always_back{
		margin: 25px 0 0;
		height: 130px;
	}
	.always_back_txt{
	  font-size: 48px;
	  top: 0px;
	}
	.always_txt{
	  top: 29px;
	  font-size: 40px;
	}

	.bg_01,.bg_02,.bg_03,.bg_04{
	  background-repeat: no-repeat;
	  height: 155px;
	  background-size: 150px;
	}
	.bg_01{
	  padding: 88px 0 0 156px;
	}
	.bg_02{
	  padding: 82px 78px 0 0;
	  margin: -40px 0 0;
	}
	.bg_03{
	  padding: 88px 0 0 156px;
	  margin: -40px 0 0;
	}
	.bg_04{
	  padding: 82px 78px 0 0;
	  margin: -40px 0 0;
	}



}

@media (max-width: 575px) {

	.vision_top {
	   height: 220px;
	}
	.vision_txt {
		top: 34px;
	}	
	.vision{
	  font-size: 25px;
	  line-height: 1.4;
	}
	.about_ver{
	  padding: 10px 10px;
	  line-height: 1.6;
	  font-size: 15px;
	}
	.second_txt {
		font-size: 16px;
		font-weight: bold;
	}
	.second_txt br{
		display:none;
	}

	.vision_disp {
		margin: 30px 0 0;
	}	
	.vision_3line {
		font-size: 22px;
	}
	.vision_3line > span:first-child{
	  width: auto;
	}
	.vision_3line > span:first-child span {
		padding: 0 0 0;
	}
	.vision_3line > span:first-child:before {
		width: 1px;
		height: 41px;
		right: auto;
		top: auto;
		bottom: -26px;
		left: 50%;
	}	
	.vision_3line > span:last-child {
		padding: 0;
		width: auto;
		margin: 15px 0 0 0;
	}

	.always_back{
		margin: 25px 0 0;
		height: 130px;
	}
	.always_back_txt{
	  font-size: 39px;
	  top: 0px;
	}
	.always_txt{
	  top: 29px;
	  font-size: 34px;
	}

	.bg_01,.bg_02,.bg_03,.bg_04{
	  background-repeat: no-repeat;
	  height: 112px;
	  background-size: 108px;
	  /* font-size: 16px; */
	  line-height: 1.3;
	}
	.bg_01{
	  padding: 48px 0 0 103px;
	}
	.bg_02{
	  padding: 66px 54px 0 0;
	  margin: 6px 0 0;
	}
	.bg_03{
	  padding: 63px 0 0 103px;
	  margin: 8px 0 0;
	}
	.bg_04{
	  padding: 65px 54px 0 0;
	  margin: 8px 0 0;
	}

	.scrolldown1::after{
		height: 30px;
	}
	@keyframes pathmove{
		0%{
			height:0;
			top:0;
			opacity: 0;
		}
		30%{
			height:30px;
			opacity: 1;
		}
		100%{
			height:0;
			top:30px;
			opacity: 0;
		}
	}



}



@media (max-width: 374px) {
  
    .always_back_txt{
	  font-size: 30px;
	  top: 0px;
	}
	.always_txt{
	  top: 29px;
	  font-size: 28px;
	}

  

}