@charset "utf-8";
/* Top */
.main{padding-bottom: 0;}
.kv { position: relative;}

#btn-control{position: absolute; top: 100px; right: 7rem;}
/* #btn-control>div{background: #425c49; color: #fff; cursor: pointer; line-height: 1.6; padding: 0.3rem 0; font-size: 1.2rem; opacity: 0.6; width: 8rem; text-align: center;} */
#btn-control>div:hover{opacity: 1;}
@media (max-width: 767px) {
    #btn-control{top: 20px; right: 20px;}
}
#btn-replay{display: none;right: 26px;
  top: 126px;
  padding: 3px 20px;
  border: none;
  font-size: 1.5rem;
  background: rgba(255,255,255,0.6);
  color: #404040;
  font-family: "EB Garamond", serif;
  letter-spacing: 0.1em;
  cursor: pointer;
  z-index: 50;
opacity: 0.8;}
#btn-replay:hover{opacity: 1;}
 @media screen and (max-width: 768px){
#btn-replay{font-size: 1.4rem;padding: 0px 10px;  cursor: pointer;}
 }

/* @media screen and (min-width: 769px){
.main{padding: 0;}
    .mainVisual {
      position: relative;
      overflow: hidden;
      line-height: 0;
      width: 100%;
      height: 100vh;}
    .mainVisual::before{content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      width: 100%;
      height: 100%;}
    .mainVisual >div{
        height: 100%;
        object-fit: cover;
        object-position: bottom left;
    }
} */
/* 
.loading{z-index: 9999;;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: url("../img/common/bg-black.jpg") no-repeat center center/cover;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.loading.is-show{animation: loadEnd 2s ease 2s forwards;} */

/* @keyframes loadEnd{
    0%{opacity: 1;}
    100%{opacity: 0; visibility: hidden; pointer-events: none;}
}
.loader {
    margin-top: 80px;
  display: block;
  --height-of-loader: 4px;
  --loader-color: #fff;
  width: 260px;
  height: var(--height-of-loader);
  border-radius: 30px;
  background-color: #000000;
  position: relative;
}

.loader::before {
  content: "";
  position: absolute;
  background: var(--loader-color);
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  border-radius: 30px;
  animation: moving 2s ease-in-out forwards;
}

@keyframes moving {
  

  100% {
    width: 100%;
    left: unset;
  }
}
.is-fview{overflow: hidden; height: 100vh;} */
/* KV */

object,
#animation_container{width: 100%;}

object {
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

/* KV */
/* .kv{line-height: 1; background: #fff;}
.kv img{width: 100%;} */

/* Obi01 */
.obi01{display: flex; justify-content: center; align-items: center; background: #fff; padding: 15px 0;}
.obi01 li{font-size: min(1.7vw,2.1rem); line-height: 1; padding: 0 1em; position: relative;}
.obi01 li:not(:first-of-type)::before{content: ""; position: absolute; top: 0.2em; left: 0; bottom: 0; width: 1px; background: #000; display: block;}
.obi01 span{display: inline-block;}
.obi01 .txt{font-size: 1.23em; color: #a62b43;}
.obi01 .num{font-size: 1.61em; color: #a62b43;}
.obi01 .note{font-size: 0.5em; position: absolute; top: -0.5em; left: 2.3em;}

.obi01 li:nth-of-type(2),
.obi01 li:nth-of-type(3){padding-left: 0.5em;}
    /* .kv {
    width: 100%;
    padding-top: 52.52%;
    position: relative;
    overflow: hidden;
} */
 #mvVideo video{width: 100%;vertical-align: bottom;}
@media screen and (max-width: 768px){
   
    .obi01{flex-wrap: wrap; padding: 20px 0; position: relative;}
    .obi01::after{content: ""; position: absolute; top: 50%; left: 20px; right: 20px; height: 1px; background: #000;}
    .obi01 li{font-size: 3.2vw;}
    .obi01 li:nth-of-type(1){margin-bottom: 20px;}
    .obi01 li:nth-of-type(3)::before{display: none;}
    .obi01 li:nth-of-type(1){width: 100%;text-align: center;}
    .obi01 li:not(:first-of-type)::before{right: 0;left: unset;}
}

/* Obi02 */
.obi02{background: url("../img/common/bg-black.png") repeat-y top center/100% auto; padding: 30px 0; color: #fff; display: flex; justify-content: center;}
.obi02 li{font-size: min(1.7vw,2.1rem); line-height: 1; padding: 0 1em; position: relative;}
.obi02 span{display: inline-block;}
.obi02 .txt{font-size: 1.42em;}
.obi02 .num{font-size: 1.61em;}

@media screen and (min-width: 769px){
    .obi02 li:not(:first-of-type)::after{content: ""; position: absolute; top: 0.2em; left: 0; bottom: 0; width: 1px; background: #fff; display: block;}	
}

@media screen and (max-width: 768px){
    .obi02{flex-wrap: wrap; padding: 10px 20px; text-align: center;}
    .obi02 li{border-bottom: 1px solid #fff; width: 100%; padding: 10px 0; font-size: 3.1vw;}
    .obi02 li:last-of-type{border-bottom: none;}
}

/*Information */
.info{text-align: center; padding: 35px 0 40px; position: relative;}
.info::after{pointer-events: none;position: absolute;content: "";background: #e3dfd6;width: 100%;height: 100%;top: 0;left: 0;mix-blend-mode: multiply;}
.info-tit{font-size: 2.4rem; letter-spacing: 0.2em; line-height: 0.8; font-weight: 400; font-family: "EB Garamond", serif; border-bottom: 1px solid #000; padding: 0 0 15px; margin: 0 0 20px;}
.info-txt{font-size: min(3.2vw,3rem); line-height: 1.5; letter-spacing: 0.1em;}
/* .info .inner_txt{display: flex;justify-content: center;text-align: left; align-items: center;} */
.info .inner_txt .info-txt{color: #a62b43;padding-right: 10px;margin:0 0 5px;}
.info .inner_txt .small-txt{font-size: 1.4rem;color: #000;line-height: 1.6;}
.info-btn{display: flex; justify-content: center; width: 100%; max-width: 940px; margin: 30px auto 0;position: relative;z-index: 2;}
.info-btn a{width: 48%; height: 78px; flex-wrap: wrap; display: flex; justify-content: center;flex-direction: column; align-items: center; align-content: center; color: #fff; font-size: 2.6rem;letter-spacing: 0.6em; line-height: 1.4; padding: 0; position: relative; margin: 0; transition: .3s;border-radius: 6px;}
.info-btn a:last-of-type{margin-right: 0;}
.info-btn a::after{content: ""; width: 24px; height:18px; background: url("../img/common/arrow02.svg") no-repeat bottom center/100% auto; display: block; position: absolute; right: 20px;top: 50%; transition: .3s;transform: translateY(-50%);}
.info-btn a:hover::after{right: 10px;}
.info-btn a .small-txt{font-size: 1.4rem;letter-spacing: 0.05em;}
.info-btn a.soon{font-size: 1.2rem; padding: 0; pointer-events: none;}
.info-btn a.soon::after{display: none;}
.info-btn a.soon span{font-size: 2.3rem; letter-spacing: 0.18em; width: 100%;}
.info-btn a.btn-entry{background: linear-gradient(45deg, #b97c7e, #a62b43);}
.info-btn a.btn-reser{background: linear-gradient(45deg, #6e6c61, #46412f);}
.info-btn a.btn-entry:hover{background: linear-gradient(45deg, #a62b43, #a62b43);;}
.info-btn a.btn-reser:hover{background: linear-gradient(45deg, #46412f, #46412f);}

@media screen and (max-width: 768px){
    .info{padding: 30px 0;}
    .info-tit{font-size: 2.4rem; padding: 0 0 10px; margin: 0 0 10px;}
    .info .inner_txt .info-txt{font-size: 2rem;padding: 0;}
    .info-btn{margin: 20px auto 0;max-width: 360px;}
    .info-btn a{font-size: 2.2rem;height: 68px;width: 100%;}
    .info-btn a.soon{font-size: min(2.6vw,1rem);}
    .info-btn a.soon span{font-size: min(4vw,1.5rem);}
}

/* Project */
.project{background: url("../img/common/bg-white.jpg") no-repeat top center/cover; padding: 70px 0; display: flex; justify-content: flex-end; width: 100%;}
.project-wrap{width: calc(50% + 600px); display: flex; justify-content: space-between;}
.project-inner{width: 250px;}
.project-tit{font-size: 2.4rem; line-height: 1.7; margin: 0 0 10px; font-weight: 400;}
.project-swiper{width: calc(100% - 280px); margin: 0; line-height: 1;}

.project-swiper .swiper-wrapper{display: flex; justify-content: space-between;}
.project-swiper .swiper-slide{width: 32%;}
.project-swiper .img{position: relative;}
.project-swiper .img img{width: 100%;}
.project-swiper .img::before{content: ""; width: 100%; height: 100%; background: url("../img/top/img-mask.webp") no-repeat top left/100% 100%; display: block; position: absolute; top: 0; left: 0; mix-blend-mode: multiply;}
.project-swiper .inner{position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: 2; color: #fff; text-align: center;}
.project-swiper .tit{font-size: min(1.7vw,2.2rem); line-height: 1; font-family: "EB Garamond", serif; font-weight: 400; letter-spacing: 0.15em;}
.project-swiper .tit::after{content: ""; width: 2.8em; height: 1px; background: #fff; margin: 0.5em auto; display: block;}
.project-swiper .txt{font-size: min(1.55vw,2rem); line-height: 1.5; letter-spacing: 0.1em;}
.project-swiper .btn{font-size: min(1vw,1.4rem); line-height: 1;font-family: "Lora", serif;; font-weight: 400; letter-spacing: 0.3em;position: relative; margin: 2em 0 0 0; padding: 0 1em 0 0;}
.project-swiper .btn::after{content: ""; width: 14em; height: 2em; background: url("../img/common/arrow-btn.svg") no-repeat bottom center/100% auto; position: absolute; bottom: -0.5em; left: 0; right: 0; margin: 0 auto;}

@media screen and (min-width: 769px){    
    .project-swiper .img{will-change: transform; transition: 1s;}
    .project-swiper a:hover .img{transform: scale(1.1);}
    
    .project-swiper .swiper-slide{opacity: 0; overflow: hidden; transform: scale(0.7); -webkit-transform: scale(0.7); transition: opacity 1s ease, transform 1s ease;}
    .project-swiper.is-view .swiper-slide{opacity: 1; transform: scale(1); -webkit-transform: scale(1);}
}

@media screen and (max-width: 1240px){
    .project-wrap{width: 100%;}
	.project-inner{width: 280px; padding: 0 20px;}
}

@media screen and (max-width: 1000px){    
    .project-wrap{flex-wrap: wrap;}
    .project-inner{width: 100%; text-align: center; margin: 0 0 30px;}
    .project-swiper{width: 100%;}
}

@media screen and (max-width: 768px){
    .project{padding: 40px 0;}
    .project-swiper .swiper-wrapper{transition-timing-function: linear !important;}
    .project-swiper .swiper-slide{width: min(64vw,375px);}
    
    .project-swiper .tit{font-size: min(4.6vw,2.4rem);}
    .project-swiper .txt{font-size: min(4.2vw,2.2rem);}
    .project-swiper .btn{font-size: min(3vw,1.4rem);}
}

/* Intro */
.intro{line-height: 1; margin: 0 0 60px; position: relative;}
.intro-inner{position: absolute; top: 0; left: 0; width: 100%; text-align: center; height: 34%; display: flex; flex-wrap: wrap; align-content: center;}
.intro-tit{font-size: min(3vw,2.7rem); letter-spacing: 0.1em; font-weight: 500; width: 100%; line-height: 1; margin: 0 0 min(2vw,40px);}
.intro-txt{line-height: 2.3; width: 100%; font-size: min(1.7vw,1.6rem);}
.intro-img img{width: 100%;}
.intro .cap-abs_right{bottom: -2em;}

@media screen and (max-width: 768px){
    .intro{background: #80abcc; padding-top: 0;}
    .intro-inner{height: 53%; top: 3%;}
    .intro-tit{font-size: 5vw; padding-left: 0.5em; margin: 0 0 3vw; line-height: 1.6;}
    .intro-txt{font-size: 3vw; line-height: 1.8;}
}

/* Btn More */
.btn-more{font-size: 1.8rem; line-height: 2; letter-spacing: 0.2em; text-align: center; font-family: "Lora", serif; width: 14em; display: block; position: relative; padding: 0 1em 0 0;}
.btn-more::after{content: ""; width: 100%; height: 100%; background: #fff; position: absolute; bottom: 0; left: 0; transition: .3s;
mask: url("../img/common/arrow-btn.svg") no-repeat bottom center/100% auto;
-webkit-mask: url("../img/common/arrow-btn.svg") no-repeat bottom center/100% auto;}
.btn-more:hover{opacity: .8;}
.btn-more:hover::after{transform: translateX(20px);}

@media screen and (max-width: 768px){
    .btn-more{font-size: 1.6rem;}
}

/* Development */
.development{padding: 50px 0; position: relative; background: url("../img/common/bg-black.jpg") repeat-y top center/100% auto; color: #fff;}
.development-tit{position: absolute; top: -0.1em; left: 0; font-size: 6.2rem; line-height: 0.8; font-family: "EB Garamond", serif; font-weight: 400; letter-spacing: 0.15em; color: #fff; opacity: .3 !important;}

.development-wrap{display: flex; justify-content: space-between; flex-wrap: wrap;}
.development-inner{width: 27.5%; padding: 10px 0 0 0;}
.development-inner .tit{font-size: 2rem; font-weight: 400; margin: 0 0 15px;}
.development-inner .txt{font-size: 1.3rem;}
.development-inner .btn-more{margin: 45px 0 0 0;}

.development-item{width: 34.1%; border-left: 1px solid #fff; font-size: 1.2rem; line-height: 1.6;}
.development-item .img{padding: 0 0 0 12px; position: relative; line-height: 1;}
.development-item .cap{font-size: 1rem; position: absolute; bottom: 0; right: 0; background: linear-gradient(to left,rgba(0,0,0,1),rgba(0,0,0,0)); padding: 0.2em 0.5em 0.2em 4em;}
.development-item .tit{border-bottom: 1px solid #fff; padding: 8px 0 8px 12px;font-size: 1.6rem;font-weight: 400;}
.development-item .tit p{font-weight: 400;font-size: 1.2rem;}
.development-item .txt{padding: 8px 0 0 12px;}

@media screen and (max-width: 1000px){
    .development-inner{width: 100%; margin: 0 0 40px; padding: 0;}
    .development-inner .btn-more{margin: 20px 0 0 0;}
    
    .development-item{width: calc(50% - 20px);}
    .development-item .img img{width: 100%;}
}

@media screen and (max-width: 768px){
    .development-item .tit{font-size: 1.4rem;}
    .development{padding: min(11vw,50px) 0 1px;}
    .development-tit{font-size: min(10vw,6.2rem);}
	.development-item{width: 100%; margin: 0 0 40px;}
    .development-inner .tit{font-size: min(5.2vw,2rem); margin: 0 0 10px;}
}

/* BLock */
.page-area{padding: 70px 0;}
.block:not(:last-of-type){margin: 0 0 70px;}

.block-wrap{width: calc(50% + 600px); display: flex; flex-wrap: wrap; background: rgba(255,255,255,.6);}

.block-outer{width: 40%; position: relative; z-index: 1; text-align: center; display: flex; align-items: center;}
.block-outer::before{content: ""; position: absolute; top: 15px; left: 15px; bottom: 15px; right: 15px; z-index: -1;}
.block-inner{width: 100%; padding: 0 30px;}

.block-img{width: 60%; position: relative;overflow: unset;}
.block-img img{width: 100%;}
.block-img p{bottom: -3px; transform: translateY(100%);}
.block-img .cap-abs_left{left: 0;}

.block-tit{font-size: 2.3rem; line-height: 1; font-family: "EB Garamond", serif; font-weight: 400; letter-spacing: 0.15em; }
.block-tit::after{content: ""; width: 70px; height: 1px; background: #000; margin: 0.7em auto; display: block;}
.block-txt{font-size: 2rem; line-height: 1.6; font-weight: 400; margin: 0 0 0.5em;}
.block-desc{font-size: 1.3rem; line-height: 2; min-height: 6em;}
.block .btn-more{margin: 20px auto 0;}
.block .btn-more::after{background: #222;}

.block:nth-of-type(2n+1){display: flex; justify-content: flex-end;}
.block:nth-of-type(2n+1) .block-outer::before{border-top: 1px solid #000; border-left: 1px solid #000;}
.block:nth-of-type(2n) .block-img .cap-abs_right{right: 0;}
.block:nth-of-type(2n) .block-outer::before{border-top: 1px solid #000; border-right: 1px solid #000;}

@media screen and (max-width: 1240px) and (min-width: 1101px){
    .block-wrap{width: calc(100% - 20px);}
}

@media screen and (max-width: 1100px){
	.block-wrap{width: calc(100% - 20px);}
    
    .block-outer{width: 100%;}
    .block-outer::before{top: 10px; left: 10px; bottom: 10px; right: 10px;}
    
    .block-inner{padding: 50px 20px;}
    .block-img{order: -1; width: 100%;}
    .block-img .cap-abs_left{left: 15px;}
    
    
    .block-txt{font-size: 1.8rem; margin: 0 0 0.7em;}
    .block .btn-more{margin: 20px auto 0;}
    
    .block:nth-of-type(2n) .block-img .cap-abs_right{right: 15px;}
    
    .block:nth-of-type(2n+1) .block-outer::before{border-bottom: 1px solid #000; border-top: none;}
    .block:nth-of-type(2n) .block-outer::before{border-bottom: 1px solid #000; border-top: none;}

    .blockPosition .cap-abs_left,
    .blockPosition .cap-abs_right {
        position: static;
        text-align: right;
        transform: translateY(0);

    }

    .blockPosition .cap-abs_left {
        margin-top: 3px;
    }
}

@media screen and (max-width: 768px){
    .page-area{padding: 50px 0;}
	.block:not(:last-of-type){margin: 0 0 50px;}
}