@charset "UTF-8";

/*
Theme Name: Nutmeg vision
Description: Nutmeg vision
Version: 2024.03
Author: YH
*/

#inner.vision .visual {
  background-image: url(./images/bg_visual.jpg);
}

#inner.vision .content {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(226, 240, 255, 1) 100%);
  position: relative;
  padding-bottom: 0;
}


#inner.vision .intro {
  padding: 0 5%;
	transition: all 1s ease;
	opacity: 0;
	transform: scale(1.05);
}
#inner.vision .intro.active {
	opacity: 1;
	transform: scale(1);	
}

#inner.vision .sec {
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  margin: 0 auto;
  max-width: 1030px;
}

#inner.vision .sec .info {
  padding-left: 20px;
	opacity: 0;	
	transition: all 1s ease;
	position: relative;
	left: -20px;
}
#inner.vision .sec.active .info {
	opacity: 1;
	left: 0px;
	top: 0;
}

#inner.vision .sec .info h2 {
  font-size: 22px;
  font-weight: 500;
  color: #0669CF;
}

#inner.vision .sec .info h2 span {
  position: relative;
  display: inline-block;
  padding-left: 55px;
}

#inner.vision .sec .info h2 span::before {
  content: "";
  width: 37px;
  height: 1px;
  display: block;
  background: #0669CF;
  left: 9px;
  position: absolute;
  top: 50%;
}

#inner.vision .sec .info .text {
  font-size: 18px;
  line-height: 2.2em;
  font-weight: bold;
  margin-top: 22px;
  letter-spacing: 0.1em;
}

#inner.vision .sec .img {
  position: absolute;
}

#inner.vision .sec1 {
  margin-top: 200px;
}

#inner.vision .sec1 .img {
  width: 413px;
  right: 0;
  top: -43px;
	opacity: 0;	
	transition: all 1s ease;
	margin-right: -20px;
}
#inner.vision .sec1.active .img {
	opacity: 1;
	margin-right: 0px;
}

#inner.vision .sec1 .img img {
  border-radius: 5px;
}

#inner.vision .sec1 .img .img2 {
  max-width: none;
  width: 520px;
  left: -110px;
  top: -68px;
  position: absolute;
	transition: all 1s ease;
	margin-top: 20px;
}
#inner.vision .sec1.active .img .img2 {
	margin-top: 0;
}

#inner.vision .sec2 {
  margin-top: 306px;
  align-items: end;
}
#inner.vision .sec2 .info {
	opacity: 0;	
	transition: all 1s ease;
	position: relative;
	left: 20px;
}

#inner.vision .sec2 .img {
  width: 486px;
  right: 660px;
  top: -76px;
	opacity: 0;	
	transition: all 1s ease;
	margin-right: 20px;
}
#inner.vision .sec2.active .img {
	opacity: 1;
	margin-right: 0px;
}

#inner.vision .sec2 .img img {
  border-radius: 5px;
}

#inner.vision .sec3 {
  margin-top: 310px;
}

#inner.vision .sec3 .img {
  width: 381px;
  right: 0;
  top: -103px;
	opacity: 0;	
	transition: all 1s ease;
	margin-right: -20px;
}
#inner.vision .sec3.active .img {
	opacity: 1;
	margin-right: 0px;
}

#inner.vision .sec3 .img img {
  border-radius: 5px;
}

#inner.vision .sec3 .img .img2 {
  max-width: none;
  width: 253px;
  left: -121px;
  top: -83px;
  position: absolute;
	transition: all 1s ease;
	margin-top: 20px;
}
#inner.vision .sec3.active .img .img2 {
	margin-top: 0;
}

#inner.vision .sec4 {
  margin-top: 240px;
  display: block;
}

#inner.vision .sec4 h2 {
  text-align: center;
}

#inner.vision .sec4 .info {
	padding-left: 0;
	transition: all 1s ease;
	position: relative;
	left: 0;
	top: 20px;
}
#inner.vision .sec4 .text {
  text-align: center;
}

#inner.vision .sec4 .text span {
  position: relative;
  display: inline-block;
  padding-right: 61px;
}

#inner.vision .sec4 .text span::before {
  content: "";
  width: 50px;
  height: 1px;
  display: block;
  background: #000;
  right: 0;
  position: absolute;
  top: 50%;
}

#inner.vision .copybox {
	position: relative;
	width: 114%;
	left: -7%;
	padding-bottom: 46%;
	margin-top: 44px;
}
#inner.vision .copybox::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200%;
  background: url(./images/bg_content.png) no-repeat center bottom / 100% auto;
	opacity: 0;
	transition: 1s ease +0.3s all;
	transform: scale(1.2);
	transform-origin: 50% 100%;
}
#inner.vision .copybox.active::before {
	opacity: 1;
	transform: scale(1);
}
#inner.vision .copybox .copy {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #0669CF;
  line-height: 1.6em;
  transition: all 1s +0.3s ease;
  position: relative;
  opacity: 0;
  letter-spacing: 0.3em;
  width: 200%;
  left: -50%;
}
#inner.vision .copybox.active .copy {
	opacity: 1;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 1200px) {
	
	#inner.vision .sec .text br.tab {
		display: block !important;
	}
	#inner.vision .sec1 .img {
		transform: scale(0.8);
	}
	#inner.vision .sec2 .img {
		transform: scale(0.8);
		right: 480px;
	}
	#inner.vision .sec3 .img {
		transform: scale(0.8);
	}
	#inner.vision .sec3 .info h2 span {
		display: block;
		padding-left: 55px;
		margin-left: -10px;
		margin-top: 5px;
	}
}
@media screen and (max-width: 960px) {

	#inner.vision .visual {
	  background-image: url(./images/bg_visual.jpg);
	}

	#inner.vision .content {
	  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(226, 240, 255, 1) 100%);
	  padding-bottom: 0;
	  position: relative;
	}

	#inner.vision .intro {
	  padding: 0;
	  width: 118%;
	  position: relative;
	  left: -9%;
	  margin-top: 110px;
	}
	#inner.vision .intro img {
		max-width: 500px;
		margin: 0 auto;
	}

	#inner.vision .sec {
	  padding: 0;
	  position: relative;
	  display: flex;
	  flex-direction: column;
	  align-items: start;
	  margin: 0 auto;
	  max-width: 390px;
	}

	#inner.vision .sec .info {
	  padding-left: 5%;
	}

	#inner.vision .sec .info h2 {
	  font-size: 22px;
	  font-weight: 500;
	  color: #0669CF;
	}

	#inner.vision .sec .info h2 span {
	  position: relative;
	  padding-left: 55px;
	  display: block;
	  margin-top: 5px;
	}

	#inner.vision .sec .info h2 span::before {
	  content: "";
	  width: 37px;
	  height: 1px;
	  display: block;
	  background: #0669CF;
	  left: 9px;
	  position: absolute;
	  top: 50%;
	}

	#inner.vision .sec .info .text {
	  font-size: 17px;
	  line-height: 2.2em;
	  font-weight: bold;
	  margin-top: 22px;
	  letter-spacing: 0.1em;
	}

	#inner.vision .sec .img {
	  position: relative;
	}

	#inner.vision .sec1 {
	  margin-top: 100px;
	}

	#inner.vision .sec1 .img {
	  width: 280px;
	  left: auto;
	  top: auto;
	  margin: 80px auto 0 auto !important;
	  transform: translate(23px, 0);
	}

	#inner.vision .sec1 .img img {
	  border-radius: 5px;
	}

	#inner.vision .sec1 .img .img2 {
	  max-width: none;
	  width: 120%;
	  left: -22%;
	  top: -30%;
	  position: absolute;
	}

	#inner.vision .sec2 {
	  margin-top: 166px;
	  align-items: start;
	}

	#inner.vision .sec2 .img {
	  width: 260px;
	  left: -9%;
	  right: auto;
	  top: auto;
	  overflow: hidden;
	  border-radius: 5px;
	  margin: 50px auto 0 auto !important;
	  transform: translate(-40px, 0);
	}

	#inner.vision .sec2 .img img {
	  border-radius: 0;
	  width: 180%;
	  position: relative;
	  left: -40%;
	  max-width: none;
	}

	#inner.vision .sec3 {
	  margin-top: 120px;
	}

	#inner.vision .sec3 .img {
	  width: 260px;
	  right: auto;
	  top: auto;
	  margin: 92px auto 0 auto !important;
	  transform: translate(35px, 0);
	}

	#inner.vision .sec3 .img img {
	  border-radius: 5px;
	}

	#inner.vision .sec3 .img .img2 {
	  max-width: none;
	  width: 66%;
	  left: -34%;
	  top: -22%;
	  position: absolute;
	}

	#inner.vision .sec4 {
	  margin-top: 160px;
	  display: block;
	}

	#inner.vision .sec4 h2 {
	  text-align: center;
	}
	#inner.vision .sec4 .info {
		padding-left: 0;
	}

	#inner.vision .sec4 .text {
	  text-align: center;
	}

	#inner.vision .sec4 .text span {
	  position: relative;
	  display: inline-block;
	  padding-right: 61px;
	}

	#inner.vision .sec4 .text span::before {
	  content: "";
	  width: 50px;
	  height: 1px;
	  display: block;
	  background: #000;
	  right: 0;
	  position: absolute;
	  top: 50%;
	}

	
	#inner.vision .copybox {
		position: relative;
		width: 112%;
		left: -6%;
		padding-bottom: 120%;
		margin-top: 38px;
	}
	#inner.vision .copybox::before {
	  content: "";
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 200%;
	  background: url(./images/bg_content_sp.png) no-repeat center bottom / 100% auto;
	}
	#inner.vision .copybox .copy {
	  text-align: center;
	  font-size: 27px;
	  font-weight: 500;
	  color: #0669CF;
	  line-height: 1.6em;
	  transition: all 1s ease;
	  position: relative;
	  opacity: 0;
	  letter-spacing: 0.3em;
	  width: 200%;
	  left: -50%;
	}
	#inner.vision .copybox.active .copy {
		opacity: 1;
		letter-spacing: 0.1em;
	}

}