@charset "UTF-8";
.w{
  position: relative;
  width:100%;
  max-width:1400px;
  margin: 0 auto;
  padding:0 50px;
}
@media screen and (max-width: 760px){
  .w{
    padding:0 25px;
  }
}
@media screen and (max-width: 480px){
  .w{
    padding:0 20px;
  }
}

/* ------------kv------------- */
#kv {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
#kv div.kv_bg {
  position: relative;
  z-index: 0;
}
#kv div.kv_bg img {
  display:block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: 50% 50%;
  font-family: 'object-fit: cover; object-position: 50% 50%;';
  pointer-events: none;
}
#kv div.cov {
  position: absolute;
  bottom:-1px;
  left:0;
  width:100%;
  z-index: 3;
}
#kv div.cov img {
  display:block;
  width: 100%;
  height: auto;
  margin:0 auto;
}
#kv div.logo {
  position: absolute;
  top:50px;
  left:50px;
  width:400px;
  z-index: 1;
}
#kv div.logo img {
  display:block;
  width: 100%;
  max-width:860px;
  height: auto;
  margin:0 auto;
}

#kv .inner{
  position: absolute;
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  justify-content: center;
  align-items: flex-end;
  top:0;
  left:0;
  padding:0 50px;
  z-index: 1;
}
#kv .inner > div{
  opacity: 0;
  margin-right: -120px;
  transform: scale(0.8);
  transition: opacity 0.2s ease-out;
  will-change: transform, opacity;
}
#kv .inner img {
  display:block;
  width: 100%;
  max-width:1030px;
  height: auto;
  margin:0 auto;
}
#kv .inner.loaded > div{
  opacity: 1;
  animation: zoomInAndSettle2 0.6s ease-out forwards;
}
@keyframes zoomInAndSettle2 {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
#kv img.pc{
  display:block;
  width:100%;
  max-width:1920px;
  margin:0 auto;
}
#kv img.sp{
  display:none;
  width:100%;
  max-width:1170px;
  margin:0 auto;
}
@media screen and (max-width:1500px){
  #kv div.logo {
    top:30px;
    left:30px;
    width:300px;
  }
}
@media screen and (max-height:1100px){
	#kv .inner img {
    max-width:900px;
  }
}
@media screen and (max-width:1300px) and (max-height:1100px){
	#kv .inner img {
    max-width:670px;
  }
}
@media screen and (max-width:1030px){
  #kv .inner > div{
    margin-right: -100px;
  }
  #kv .inner img {
    max-width:600px;
  }
}
@media screen and (max-width:860px){
  #kv div.logo {
    top:20px;
    left:20px;
    width:260px;
  }
  #kv .inner > div{
    margin-right: -80px;
  }
  #kv .inner img {
    max-width:560px;
  }
}
@media screen and (max-width:700px){
  #kv div.logo {
    top:15px;
    left:15px;
    width:200px;
  }
  #kv .inner > div{
    margin-right: -60px;
  }
  #kv .inner img {
    max-width:500px;
  }
}
@media screen and (max-width:480px){
  #kv div.logo {
    top:15px;
    left:15px;
    width:180px;
  }
  #kv .inner > div{
    margin-right: -40px;
  }
  #kv .inner img {
    max-width:310px;
  }
}
@media screen and (max-width:320px){
  #kv div.logo {
    top:15px;
    left:15px;
    width:120px;
  }
  #kv .inner > div{
    margin-right: -20px;
  }
  #kv .inner img {
    max-width:210px;
  }
}
/* ------------s1------------- */
#s1 {
  width: 100%;
  position: relative;
  padding:60px 0 0;
  z-index:1;
}
#s1 img{
  display:block;
  width:100%;
  max-width:960px;
  margin:0 auto;
}
#s1 .l,
#s1 .r{
  position: absolute;
  pointer-events: none;
}
#s1 .l{
  top:-230px;
  left:-60px;
  width: 620px;
}
#s1 .l img,
#s1 .r img{
  display:block;
  width:100%;
  max-width:960px;
  margin:0 auto;
}
#s1 .r{
  top:-230px;
  right:-120px;
  width: 620px;
}

main{
  position: relative;
  width:100%;
  padding:0px 0;
  background: url(../images/sbg.png) 50% 0 repeat-y;
  background-size: 100% auto;
}

@media screen and (max-width:1980px){
  #s1 .l{
    width: min(590 / 2000* 100vw, 590px);
  	height: min(905 / 2000* 100vw, 905px);
    top: min(-230 / 2000* 100vw, -230px);
    left: min(-60 / 2000* 100vw, -60px);
  }
  #s1 .r{
    width: min(590 / 2000* 100vw, 590px);
  	height: min(905 / 2000* 100vw, 905px);
    top: min(-230 / 2000* 100vw, -230px);
    right: min(-120 / 2000* 100vw, -120px);
  }
}
@media screen and (max-width:1700px){
  #s1 img{
    max-width: clamp(800px, 56.47vw, 960px);
  }
}
@media screen and (max-width:1500px){
  #s1 .l{
    left: min(-90 / 2000* 100vw, -90px);
  }
  #s1 .r{
    right: min(-100 / 2000* 100vw, -100px);
  }
}
@media screen and (max-width:1330px){
  #s1 img{
    max-width: clamp(600px, 60.15vw, 800px);
  }
  #s1 .l{
    top: min(-170 / 2000* 100vw, -170px);
  }
  #s1 .r{
    top: min(-170 / 2000* 100vw, -170px);
  }
  main{
    background-size: 110% auto;
  }
}
@media screen and (max-width:980px){
  #s1 {
    padding:20px 0 0;
  }
  #s1 img{
    max-width: clamp(600px, 60.15vw, 800px);
  }
  #s1 .l{
    top: min(-110 / 2000* 100vw, -110px);
  }
  #s1 .r{
    top: min(-110 / 2000* 100vw, -110px);
  }
}
@media screen and (max-width:860px){
  #s1 {
    padding:20px 0 0;
  }
  #s1 img{
    max-width: clamp(400px, 69.77vw, 600px);
  }
  #s1 .l{
    top: min(-70 / 2000* 100vw, -70px);
  }
  #s1 .r{
    top: min(-70 / 2000* 100vw, -70px);
  }
}
@media screen and (max-width:480px){
  #s1 .l{
    top:-50px;
    left:-80px;
    width: 147px;
    height: 226px;
  }
  #s1 .r{
    top:-50px;
    right:-80px;
    width: 147px;
    height: 226px;
  }
  #s1 img{
    max-width: 280px;
  }
}
@media screen and (max-width:320px){
  #s1 img{
    max-width: 220px;
  }
}
/* ------------s2------------- */
#s2 {
  width: 100%;
  position: relative;
  padding:30px 0 100px;
  z-index:0;
}
#s2 .c1 img{
  display:block;
  width:100%;
  max-width:1160px;
  margin:0 auto;
}
#s2 .c2 img{
  display:block;
  width:100%;
  max-width:1000px;
  margin:0 auto;
}

#s2 .cbox{
  width:100%;
  border-radius: 4rem;
  background: #fff;
  padding:80px;
  margin-bottom: 80px;
}
#s2 .cbox .i1{
  margin-bottom: 60px;
}
#s2 .cbox .i1:last-of-type{
  margin-bottom: 0px;
}
#s2 .cbox .i1 img{
  display:block;
  width:100%;
  max-width:1500px;
  margin:0 auto;
}
#s2 .btn{
  width:100%;
  margin-bottom: 100px;
}
#s2 .btn img{
  display:block;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}
@media screen and (max-width:1315px){
  #s2 .c1 img{
    max-width:960px;
  }
  #s2 .c2 img{
    max-width:860px;
  }
}
@media screen and (max-width:1130px){
  #s2 .c1{
    padding:0 60px;
  }
  #s2 .c2{
    padding:0 120px;
  }
}
@media screen and (max-width:860px){
  #s2 .cbox{
    padding:50px;
    margin-bottom: 60px;
  }
}
@media screen and (max-width:680px){
  #s2 .c2{
    padding:0 90px;
  }
}
@media screen and (max-width:480px){
  #s2 .c1{
    padding:0 30px;
  }
  #s2 .c2{
    padding:0 40px;
  }
  #s2 .cbox{
    padding:20px;
    margin-bottom: 40px;
  }
  #s2 .cbox .i1{
    margin-bottom: 20px;
  }
  #s2 .cbox .i1:last-of-type{
    margin-bottom: 0px;
  }
  #s2 .btn{
    margin-bottom: 60px;
  }
  #s2 .cap{
    font-size: 12px;
  }
}
/* ------------s3------------- */
#s3 {
	width:100%;
  height:1100px;
  position: relative;
  padding:30px 0 0;
  z-index: 0;
}
#s3 .mbg{
  position: absolute;
  width: 100%;
  top:0;
  left:0;
  height:100%;
  background: url(../images/sbg.png) 50% 0 repeat-y;
  background-size: 100% auto;
  z-index: 1;
}
#s3 .bbg {
  position: absolute;
  width: 100%;
  left:0;
  bottom:0;
  z-index: -2;
}
#s3 .bbg img {
  display:block;
  width: 100%;
  height:1000px;
  object-fit: cover;
  object-position: 50% 100%;
  font-family: 'object-fit: cover; object-position: 50% 100%;';
  pointer-events: none;
}
#s3 .inner{
  position: absolute;
  display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width:100%;
  height:1100px;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  top:0;
  left:0;
  padding:0 50px;
  z-index: 5;
}
#s3 .inner .bsp img{
  position: relative;
  display:block;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  z-index: 5;
}

#s3 .inner .bs img{
  display:block;
  width:100%;
  max-width:980px;
  margin:0 auto;
}


.copy{
  padding: 20px 0;
  text-align: center;
  font-size: 12px;
}

@media screen and (max-width:1330px){
  #s3 .mbg{
    background-size: 110% auto;
  }
}
@media screen and (max-width:1130px){
  #s3,
    #s3 .inner {
    height:900px;
  }
  #s3 .bbg img {
    height:800px;
  }
  #s3 .inner .bsp img{
    max-width:1000px;
  }
  #s3 .inner .bs img{
    max-width:800px;
  }
}
@media screen and (max-width:860px) {
  #s3,
    #s3 .inner {
    height:700px;
  }
  #s3 .bbg img {
    height:600px;
  }
  #s3 .inner .bs img{
    max-width:700px;
  }
}
@media screen and (max-width:680px) {
  #s3,
    #s3 .inner {
    height:500px;
  }
  #s3 .bbg img {
    height:400px;
  }
  #s3 .inner .bs img{
    max-width:500px;
  }

}
@media screen and (max-width:480px) {
  #s3,
    #s3 .inner {
    height:300px;
  }
  #s3 .inner{
    padding:0 15px;
  }
  #s3 .bbg img {
    height:200px;
  }
  #s3 .inner .bs img{
    max-width:500px;
  }

}
@media screen and (max-width:320px) {
  #s3,
    #s3 .inner {
    height:250px;
  }
  #s3 .bbg img {
    height:150px;
  }
  #s3 .inner .bs img{
    max-width:400px;
  }

}
/*----------------------------delay-----------------------------------*/

.delay{
	opacity: 0;
	transform: translate(0,60px);
	transition: 0.8s ease-in-out;
}
.delay1{
	opacity: 0;
	transform: translate(-60px,0);
	transition: 0.8s ease-in-out;
}
.delay1-2{
	opacity: 0;
	transform: translate(-150px,0);
	transition: 1s ease-in-out;
}
.delay1-3{
	opacity: 0;
	transform: translate(-200px,0);
	transition: 1.2s ease-in-out;
}
.delay2{
	opacity: 0;
	transform: translate(60px,0);
	transition: 0.8s ease-in-out;
}
.delay2-2{
	opacity: 0;
	transform: translate(150px,0);
	transition: 0.8s ease-in-out;
}
.delay2-3{
	opacity: 0;
	transform: translate(200px,0);
	transition: 0.8s ease-in-out;
}
.delay3{
	opacity: 0;
	transform: translate(0,120px);
	transition: 0.8s ease-in-out;
}

.delay-up1{
	opacity: 0;
	transform: translate(0,80px);
	transition: 0.8s ease-in-out;
}
.delay-up2{
	opacity: 0;
	transform: translate(0,120px);
	transition: 0.8s ease-in-out;
}
.delay-up3{
	opacity: 0;
	transform: translate(0,160px);
	transition: 0.8s ease-in-out;
}
.delay-up4{
	opacity: 0;
	transform: translate(0,200px);
	transition: 0.8s ease-in-out;
}
.delay-blur{
  opacity: 0;
  filter: blur(10px);
  transition: 0.8s ease-in-out;
}

.delayActive{
	opacity: 1.0;
	transform: translate(0,0);
  filter: blur(0);
	transition: 1s ease-in-out;
}

.delay-inv1{
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1.0s ease-out;
  will-change: transform, opacity;
}
.delay-inv1.is_on{
  opacity: 1;
  animation: zoominv 0.8s ease-out forwards;
}
@keyframes zoominv {
  0% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ------------------------- */