@charset "UTF-8";

/* sp - 599px */
/* tablet 560px - 959px */
/* PC 960px - */

.concept-sec {
	margin-bottom: 120px;
	padding: 110px 0 0;
	overflow: hidden;
}
.concept-sec-ttl {
	position: relative;
	margin-bottom: 35px;
	padding: 0 8%;
  font-family: var(--font-jpn2);
	font-size: 2.4rem;
	line-height: 1.6;
	transform: translateY(30px);
	opacity: 0;
	transition: all 1.0s;
}
.concept-sec-left.scroll-in .concept-sec-ttl {
	transform: translateY(0);
	opacity: 1;
}
.concept-sec-ttl::before {
	content: "";
	position: absolute;
	right: -3px;
	top: -50px;
	width: 88%;
	height: 100px;
	background: url(../../images/index/concept-typo.svg) 0 0 no-repeat;
	background-size: 100% 100%;
	z-index: -1;
	transform: translateY(30px);
	opacity: 0;
	transition: all 1.2s;
}
.concept-sec-left.scroll-in .concept-sec-ttl::before {
	transform: translateY(0);
	opacity: 1;
}
.concept-sec-lead {
	margin-bottom: 95px;
	padding: 0 8%;
}
.concept-sec-lead p {
	margin-bottom: 25px;
  font-family: var(--font-jpn2);
	font-size: 1.3rem;
	line-height: 2.4;
	transform: translateY(25px);
	opacity: 0;
	transition: all 1.0s;
}
.concept-sec-lead p:nth-child(1) {
	transition-delay: .4s;
}
.concept-sec-lead p:nth-child(2) {
	transition-delay: .6s;
}
.concept-sec-lead p:nth-child(3) {
	transition-delay: .8s;
}
.concept-sec-lead p:nth-child(4) {
	transition-delay: 1.0s;
}
.concept-sec-left.scroll-in .concept-sec-lead p {
	transform: translateY(0);
	opacity: 1;
}
.concept-sec-lead p:last-child {
	margin-bottom: 0;
}
.concept-sec-img01 {
	width: 77%;
	margin-left: 23%;
	transform: translateY(25px);
	opacity: 0;
	transition: all 0.6s;
}
.concept-sec-img02 {
	width: 53%;
	margin-top: -50px;
	transform: translateY(25px);
	opacity: 0;
	transition: all 0.6s;
}
.concept-sec-right.scroll-in .concept-sec-img01 {
	transform: translateY(0);
	opacity: 1;
}
.concept-sec-right.scroll-in .concept-sec-img02 {
	transform: translateY(0);
	opacity: 1;
	transition-delay: .15s;
}










@media only screen and (min-width: 560px) {
  .concept-sec {
    margin-bottom: 150px;
    padding: 140px 0 0;
  }
  .concept-sec-ttl::before {
    right: auto;
    left: 12%;
    top: -50px;
    width: 420px;
    height: 105px;
    background-size: 420px 105px;
  }
  .concept-sec-img01 {
    width: 55%;
    margin-left: 45%;
  }
  .concept-sec-img02 {
    width: 32%;
    margin-left: 30%;
    margin-top: -60px;
    margin-top: -50px;
  }
}










@media only screen and (min-width: 960px) {
  .concept-sec {
    display: flex;
    max-width: 1800px;
    margin: 0 auto 100px;
    padding: 170px 0 0;
  }
  .concept-sec-left {
    width: 50%;
    padding: 130px 8% 0 11%;
  }
  .concept-sec-ttl {
    padding: 0;
    font-size: 2.6rem;
    transform: translateY(40px);
    transition-delay: .3s;
  }
  .concept-sec-ttl::before {
    right: auto;
    left: -40px;
    top: -60px;
    width: 440px;
    height: 110px;
    background: url(../../images/index/concept-typo.svg) 0 0 no-repeat;
    background-size: 440px 110px;
    transform: translateY(50px);
    transition: all 1.0s;
    transition-delay: 0.4s;
  }
  .concept-sec-ttl::after {
    content: "";
    position: absolute;
    left: 460px;
    top: -5px;
    width: 10vw;
    height: 1px;
    background-color: var(--line-navy);
  }
  .concept-sec-lead {
    padding: 0;
  }
  .concept-sec-lead p {
    font-size: 1.4rem;
    line-height: 2.6;
    transform: translateY(45px);
  }
  .concept-sec-lead p:nth-child(1) {
    transition-delay: .6s;
  }
  .concept-sec-lead p:nth-child(2) {
    transition-delay: .7s;
  }
  .concept-sec-lead p:nth-child(3) {
    transition-delay: .8s;
  }
  .concept-sec-lead p:nth-child(4) {
    transition-delay: .9s;
  }
  .concept-sec-lead p .br {
    display: none;
  }
  .concept-sec-right {
    position: relative;
    width: 50%;
    z-index: -1;
  }
  .concept-sec-img01 {
    width: 83%;
    margin-left: 17%;
    transform: translateY(35px);
    transition: all 0.8s;
  }
  .concept-sec-img02 {
    width: 52%;
    margin-left: 0;
    margin-top: -50px;
    transform: translateY(35px);
    transition: all 0.8s;
    transition-delay: .2s;
  }
}