@charset "UTF-8";

.l-headerLogo{
  opacity: 0;
  pointer-events: none;
}
.l-headerLogo.w{
  opacity: 1;
  pointer-events: inherit;
}
.l-headerLogo::after{
  color: #fff;
}

main{
  background-color: #AACDD4!important;
  overflow-y: inherit !important;
}

.mv{
  position: relative;
}
.mv .tit{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.7rem);
  color: #fff;
  z-index: 1;
}
.mv .tit strong{
  display: block;
  font-size: clamp(2.8rem, 6vw, 8rem);
  line-height: 1;
}
.mv .img span{
  right: inherit;
  left: 5px;
}
@media(max-width: 768px) {
  .mv .tit strong{
  }
}

main{
}

.square{
  background-color: #357F8B;
  padding: 150px 0;
}
.square .inner{
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-flow: row-reverse;
  align-items: center;
}
.square .square-list{
  width: 20%;
}
.square-list{
  text-align: center;
}
.square-list li{
  font-size: clamp(1.6rem,2vw,2.8rem);
  color: #fff;
  line-height: 1.8;
}
.square-list li.scale{
  transform: scaleX(.8);
}
.square-list li.last{
  margin-top: 20px;
}
.square-list li.logo{
  max-width: 180px;
  width: 80%;
  margin: 20px auto 0;
}
.square .inner  .txt-box{
  width: 70%;
}
.square .inner  .txt-box .logo{
  max-width: 370px;
  width: 80%;
  margin: 0 0 50px;
}
.square .inner  .txt-box .txt{
  font-size: clamp(1.5rem,1.7vw,1.8rem);
  line-height: 2.6;
  color: #F5F2E8;
}
.square .inner  .txt-box .txt strong{
  display: block;
  margin-top: 20px;
  font-size: clamp(2.4rem,3vw,3.3rem);
  line-height: 1.4;
}
.square .inner .square-list,
.square .inner .txt-box .logo,
.square .inner  .txt-box .txt{
  transition: .6s;
  transform: translateY(15px);
  opacity: 0;
}
.square .inner .square-list.run,
.square .inner .txt-box .logo.run,
.square .inner  .txt-box .txt.run{
  transform: translateY(0);
  opacity: 1;
}
@media(max-width: 768px) {
  .square{
    padding: 60px 0;
  }
  .square .inner{
    display: block;
  }
  .square .square-list{
    width: 100%;
  }
  .square-list{
    text-align: center;
  }
  .square-list li.last{
    margin-top: 20px;
  }
  .square-list li.logo{
    max-width: 120px;
    width: 80%;
    margin: 10px auto 0;
  }
  .square .inner  .txt-box{
    width: 100%;
    margin-bottom: 30px;
  }
  .square .inner  .txt-box .logo{
    max-width: 340px;
    width: 80%;
    margin: 0 auto 40px;
  }
  .square .inner  .txt-box .txt{
    line-height: 2;
  }
  .square .inner  .txt-box .txt strong{
    text-align: center;
  }
}

.conts-list{
  padding: 1px 0 150px;
}
.conts-list .one-box{
  margin-top: 150px;
  position: relative;
}
.conts-list .one-box .img-box{
  width: 65%;
  position: relative;
  max-height: 620px;
  min-height: 620px;
  height: 620px;
  overflow: hidden;
  opacity: 0;
  transition: 1s;
  position: relative;
}
.conts-list .one-box.run .img-box{
  opacity: 1;
}
.conts-list .one-box .img-box span{
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  text-align: right;
}
.conts-list .one-box .img-box img{
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
  transition: .6s;
  transform: scale(1.05,1.05);
}
.conts-list .one-box.run .img-box img{
  transform: scale(1,1);
}
.conts-list .one-box .img-box:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4F6E6C;
}
.favorite .main-img{
  opacity: .7;
}
.horizon .main-img{
  opacity: .6;
}
.beyond .main-img{
  opacity: .8;
}
.reborn .main-img{
  opacity: .8;
}
.jewel .main-img{
  opacity: .7;
}
.luxe .main-img{
  opacity: .6;
}
.conts-list .one-box .inner{
  max-width: 1200px;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1;
}
.conts-list .one-box .square-list{
  width: 20%;
}
.conts-list .one-box .square-list li{
  opacity: .4;
  font-size: clamp(1.6rem,2vw,2.5rem);
}
.conts-list .one-box .square-list li.on{
  opacity: 1;
}
.conts-list .one-box　.square-list li.logo{
  max-width: 140px;
}

.conts-list .one-box .txt-box{
  width: 46%;
  color: #fff;
  transition: .6s;
  transform: translateX(15px);
  opacity: 0;
}
.conts-list .one-box .btn-box{
  transition: .6s;
  transform: translateX(15px);
  opacity: 0;
}
.conts-list .one-box .txt-box.run,
.conts-list .one-box .btn-box.run{
  transform: translateX(0);
  opacity: 1;
}
.conts-list .one-box .txt-box .tit{
  font-size: clamp(3rem,5vw,7rem);
  line-height: 1;
  margin-bottom: 50px;
}
.conts-list .one-box .txt-box .tit.scale{
  transform: scaleX(.8);
  transform-origin: left;
}
.conts-list .one-box .txt-box .midashi{
  font-size: clamp(2rem,2.8vw,3.5rem);
  line-height: 1;
  margin-bottom: 50px;
}
.conts-list .one-box .txt-box .txt{
  font-size: clamp(1.3rem,1.4vw,1.6rem);
  line-height: 2;
  margin-bottom: 30px;
}
.conts-list .one-box .btn-box{
  position: relative;
  z-index: 2;
}
.conts-list .one-box .more{
  max-width: 1200px;
  width: 90%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.conts-list .one-box .more a{
  background: linear-gradient(90deg, #397D87 0%, #1A4E56 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 290px;
  width: 90%;
  min-height: 73px;
  position: relative;
  border: solid 1px #fff;
  padding: 15px 10px;
  color: #fff;
  text-align: center;
  font-size: clamp(1.2rem,1.4vw,1.6rem);
  line-height: 1;
  z-index: 1;
  margin-left: auto;
}
.conts-list .one-box .more a strong{
  font-weight: 500;
  display: block;
  font-size: clamp(1.6rem,1.8vw,2rem);
  margin-bottom: 5px;
}
.conts-list .one-box .more a:after{
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 10px;
  background: url(../images/home/arw02.svg) no-repeat center center / contain;
  transform: translateY(-50%);
  transition: .3s;
}
.conts-list .one-box .more a:hover:after{
  transform: translate(5px,-50%);
}
.conts-list .one-box .more a.none{
  pointer-events: none;
}
@media(max-width: 768px) {
  .conts-list{
    padding: 30px 0 70px;
  }
  .conts-list .one-box{
    margin-top: 40px;
  }
  .conts-list .one-box .img-box{
    width: 100%;
    position: relative;
    max-height: none;
    min-height: auto;
    height: auto;
  }
  .conts-list .one-box .img-box .img{
    object-fit: initial;
  }
  .conts-list .one-box .img-box:before{
    display: none;
  }
  .conts-list .one-box .img-box .tit{
    font-size: clamp(3rem,5vw,7rem);
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 1;
  }
  .conts-list .one-box .img-box .tit.scale{
    transform: scaleX(.8);
  }
  .favorite .main-img{
    opacity: .7;
  }
  .conts-list .one-box .inner{
    margin: 0 auto;
    position: relative;
    top: initial;
    left: initial;
    transform: none;
    display: block;
  }
  .conts-list .one-box .square-list{
    display: none;
  }
  .conts-list .one-box .txt-box{
    width: 100%;
    margin-top: 20px;
  }
  .conts-list .one-box .txt-box .midashi{
    margin-bottom: 20px;
    text-align: center;
  }
  .conts-list .one-box .txt-box .txt{
    margin-bottom: 10px;
  }
  .conts-list .one-box .more{
    position: relative;
    bottom: initial;
    left: initial;
    transform: none;
    margin: 20px auto 0;
  }
  .conts-list .one-box .more a{
    max-width: 240px;
    margin: 0 auto;
    min-height: 65px;
  }
}