@charset "UTF-8";
/* Main Visual */
.mainVisual{position: relative; overflow: hidden; line-height: 0; width: 100%; height: 100vh; background: #000000;}
.mainVisual:before{content: ''; position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%;}

.mv-control{position: absolute; top: 100px; right: 10px; background: rgba(21, 21, 21, 0.9); z-index: 5; width: 100px; display: flex;}
.mv-control p{width: 100px; padding: 8px 0 6px; text-align: center; font-size: 13px; line-height: 1.6; letter-spacing: 0.1em; color: #ffffff; cursor: pointer; display: block; font-family: "Castoro", serif; font-weight: 400;}
.mv-control p:hover{background: rgba(0, 0, 0, 1); color: #ffffff;}
.mv-control p#btn-replay{display: none;}

.mv-control #btn-skip{width: 60px; position: relative;}
.mv-control #btn-skip:after{content: ""; position: absolute; top: 7px; bottom: 7px; right: 0; width: 1px; background: rgba(255,255,255,.4); }
.mv-control #btn-pause,
.mv-control #btn-play{width: 40px; line-height: 1.5;}

.mv-control #btn-pause svg,
.mv-control #btn-play svg{width: 10px; height: 10px;}
.mv-control #btn-play{display: none;}

#mv-video{position: absolute; top: 0; left: 0; width: 100%; z-index: 1; transition: 1s;}

.mv-last{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; display: none;}
.mv-last .caption{ position: absolute; bottom: 7px; left: 10px; color: #fff;z-index: 4;}

@media screen and (min-width: 769px) {
    #mv-video{height: 100%; object-fit: cover; object-position: bottom left;}
    .mv-last img{width: 100%; height: 100%; object-fit: cover; object-position: bottom left;}
}

@media screen and (max-width: 768px) {
    .mv-control{top: 80px;}
    .mv-control p{width: 80px; font-size: 11px;}
    
    #mv-video{top: 50%; transform: translateY(-50%);}
    
    .mv-last img{position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
}

/* Scene */
.scene{position: relative; z-index: 1; overflow: hidden;}
.scene-bg{position: relative; top: 0; left: 0; width: 100%; height: 100vh;/* z-index: -1;*/}
.scene-bg video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none;}
.scene-bg .capOut{right: 57px; margin-top: 3px;}

.scene-bg .scene-bg_img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transform: scale(1.03); transform-origin: right; transition: 4s cubic-bezier(.53,-0.01,.39,1) !important;}
.scene-bg.sai-animate .scene-bg_img{transform: scale(1);}

.scene-video{position: relative; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0;}
.scene-video video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none;}

.scene-head{width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 4;}
.scene-head .inner{width: 500px; margin: 0 auto; padding: 45px 0 35px; text-align: center; background: rgba(0,0,0,.4); color: #fff; position: absolute; top: 0; left: 0; right: 0; z-index: 3;}
.scene-head .tit{font-size: 58px; line-height: 1; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em;}
.scene-head .tit:after{content: ""; width: 140px; height: 1px; background: #ffffff; display: block; margin: 15px auto;}
.scene-head .txt{font-size: 20px; line-height: 1.8;}

.scene-head .inner{opacity: 0 !important; transform: scale(1.2); transform-origin: center;}
.scene-head.sai-animate .inner{opacity: 1 !important; transform: scale(1); transition: 1.5s cubic-bezier(.53,-0.01,.39,1) 0s !important;}

@media screen and (min-width: 768px) {
    .scene-bg.scene-bgImg{height: 55.46875vw; min-height: 100vh;}
}

@media screen and (max-width: 768px) {
    .scene-bg.scene-bgImg{height: 156.808vw;}
    
    .scene-head .inner{width: 320px; padding: 30px 0;}
    .scene-head .tit{font-size: 36px;}
    .scene-head .tit:after{width: 80px; margin: 10px auto 12px;}
    .scene-head .txt{font-size: 14px;}
}

/* Scene Content */
.scene-cont{max-width: 1050px; width: 100%; margin: 0 auto;}
.scene-box:not(:last-of-type){margin-bottom: 100px;}

.scene-box .outer{position: relative;}
.scene-box .inner{background: rgba(37,3,7,.65); position: absolute; bottom: 0; left: 0; width: 100%; color: #ffffff; padding: 30px 40px;}
.scene-box .img{position: relative; line-height: 1;}
.scene-box .img-label{position: absolute; top: -2px; left: -2px; font-size: 50px; line-height: 1; color: #ffffff; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em; opacity: .7; z-index: 10;}

.scene-box .tit{font-size: 58px; line-height: 1; color: #ffffff; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em;
position: absolute; top: 0; bottom: 194px; left: 0; width: 100%; text-align: center; z-index: 10; display: flex; justify-content: center; align-items: center;
text-shadow: 0px 0px 2px rgba(0,0,0,.2), 0px 0px 4px rgba(0,0,0,.2), 0px 0px 6px rgba(0,0,0,.2), 0px 0px 8px rgba(0,0,0,.2), 0px 0px 10px rgba(0,0,0,.2), 0px 0px 12px rgba(0,0,0,.2);}

.scene-box .inner .photo__capOut{top: -22px; right: 10px;}

.en.garamond { font-family: "EB Garamond", serif; letter-spacing: 0.3em;}
.en.garamond span{  font-style: italic;}

.scene-box .caption{text-align: right; padding-top: 5px;}
.scene-box .caption li{display: inline-block;}
.scene-box .caption li:not(:first-of-type){margin-left: 1em;}

.scene-box .txt{font-size: 26px; line-height: 1.5;}
.scene-box .btn{font-size: 16px; color: #ffffff; line-height: 1; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em; width: 400px; padding: 0 0 3px 3px; margin-top: 25px; background: url("../common/imgs/arrow-line.svg") no-repeat bottom right/auto 17px; display: block; transition: .5s;}

.scene-box .img:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); opacity: 0; transition: .4s; z-index: 1; display: block;}

.scene-box .outer a:hover .img img{-webkit-transform: scale(1.05); transform: scale(1.05); transition: .8s;}
.scene-box .outer a:hover .img:before{opacity: 1;}
.scene-box .outer a:hover .btn{width: 600px; padding-left: 20px;}

@media screen and (min-width: 769px) {
    .scene-box .btn a:hover{width: 340px; padding-left: 40px;}
}

@media screen and (max-width: 768px) {
    .scene-box:not(:last-of-type){margin-bottom: 35px;}
    
    .scene-box .img-label{font-size: 24px;}
    .scene-box .tit{font-size: 26px; bottom: 135px;}
    .scene-box .inner{padding: 15px;}
    .scene-box .txt{font-size: 14px; line-height: 1.7; margin-right: -15px;}    
    .scene-box .btn{margin-top: 15px; font-size: 15px; background-size: auto 10px; width: 100%;}    
}

/* Position */
.position.is-fix .scene-bg{position: fixed;}
.position.is-fix .scene-head{position: fixed;}
.position.is-fix .scene-video{margin-top: 100vh;}
.position .scene-head.is-free{bottom: 0; top: auto;}

/* Design */
.design .scene-bg_img{background: url("../imgs/bg-design.webp") no-repeat top center/cover;}

@media screen and (max-width: 768px) {
    .design .scene-bg_img{background: url("../imgs/bg-design_sp.webp") no-repeat center center/100% auto;}    
}

@media screen and (max-width: 768px) and (min-height: 150vw) {
    .design .scene-bg_img{background: url("../imgs/bg-design_sp.webp") no-repeat center center/cover;}
}

/* Plan */
@media screen and (max-width: 768px) and (orientation: portrait){
    .plan .scene-bg video{left: 50%; transform: translateX(-50%); width: auto;}
}

/* Info Area */
.infoArea{background: #e6dbda; padding: 60px 30px;}
.infoArea__inner{max-width: 1050px; margin: 0 auto;}

@media screen and (max-width: 768px) {
    .infoArea{padding: 30px 0 0;}
}

/* Information */
.info{margin-bottom: 60px;}
.info-tit{font-size: 22px; line-height: 1; color: #3b100e; border-bottom: 1px solid #000; text-align: center; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em; padding-bottom: 5px; margin-bottom: 10px;}
.info-list{font-size: 16px; line-height: 1.7;}
.info-list li:not(:last-of-type){margin-bottom: 10px;}
.info-list a{text-decoration: underline; text-underline-offset: 0.25em;}
.info-list a:hover{color: #3b100e;}

@media screen and (max-width: 768px) {
    .info{margin-bottom: 40px; padding: 0 30px;}
    .info-tit{font-size: 17px;}
    .info-list{font-size: 13px;}
}

/* Campaign */
.campaign{text-align: center;}
.campaign-tit{font-size: 22px; line-height: 1; color: #3b100e; margin-bottom: 20px; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.1em;}
.campaign a:hover{opacity: .8;}

@media screen and (max-width: 768px) {
    .campaign{background: #fff; padding: 40px 20px;}
    .campaign-tit{font-size: 17px; margin-bottom: 10px;}
}

/* Entry */
.entry{text-align: center; margin-bottom: 50px;}
.entry-tit{font-size: 21px; line-height: 1.3; color: #3b100e; margin-bottom: 20px;}
.entry-btn{width: 420px; margin: 0 auto;}
.entry-btn a{background: #3b100e; color: #ffffff; width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: relative; transition: .3s;}
.entry-btn a:before,
.entry-btn a:after{content: ""; position: absolute; width: 0; height: 0;}

.entry-btn a:before{top: 0; left: 0; border-top: 17px solid #e6dbda; border-right: 17px solid transparent;}
.entry-btn a:after{bottom: 0; right: 0; border-bottom: 17px solid #e6dbda; border-left: 17px solid transparent;}

.entry-btn a:hover{background: #222222;}

.entry-btn .txt-en{width: 100%; font-size: 25px; line-height: 1;}
.entry-btn .txt-en span{font-size: 33px; line-height: 1; font-family: "Castoro", serif; font-weight: 400; letter-spacing: 0.3em; display: inline-block; position: relative; top: 2px;}
.entry-btn .txt-jp{width: 100%; font-size: 12px; line-height: 1; margin-top: 7px;}

.entry-txt{font-size: 28px; line-height: 1.9; text-align: center; padding: 20px 0; margin-top: 50px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);}
.entry-txt .entry-caption{ display: inline-block; margin-top: 20px; font-size: 70%; color: #3b100e; line-height: 1.8; padding: clamp( 10px , 2.6vw , 20px); border: 1px solid #3b100e;}

@media screen and (max-width: 768px) {
    .entry{margin-bottom: 40px;}
    .entry-tit{margin-bottom: 12px;}
    
    .entry-btn{width: 300px;}
    .entry-btn a{height: 85px;}
    .entry-btn .txt-en{font-size: 21px;}
    .entry-btn .txt-en span{font-size: 27px; letter-spacing: 0.2em;}
    .entry-btn .txt-jp{font-size: 15px;}
    
    .entry-txt{font-size: min(4vw,17px); line-height: 1.7; padding: 12px 0; margin-top: 20px;}
}

/* Process */
.process{text-align: center; margin-bottom: 60px;}
.process-tit{font-size: 21px; line-height: 1.3; margin-bottom: 20px;}
.process-step{display: flex; justify-content: space-between; flex-wrap: wrap;}
.process-step .item{width: 31.33%; display: flex; flex-wrap: wrap; background: #ffffff;}
.process-step .tit{background: #3b100e; position: relative; line-height: 1; width: 100%; height: 38px; display: flex; justify-content: center; align-items: center;}
.process-step .tit:after{content: ""; position: absolute; bottom: -11px; left: 50%; margin-left: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 11px solid #3b100e; display: block;}
.process-step .inner{padding: 20px 1em; width: 100%;}
.process-step .txt{font-size: 15px; line-height: 1.7; letter-spacing: -0.04em;}
.process-step .txtS{font-size: 11px; line-height: 1.4; letter-spacing: -0.04em; margin-top: 7px;}

.process-step .process-btnBox { margin-top: 1.5em;}
.process-step .process-btnBox .process-btn{ position: relative; display: block; width: 100%; max-width: 400px; margin: 0 auto; padding: 20px 0; background: #333333; color: #fff; transition: all 0.3s; font-size: 16px;}
.process-step>.step02 .process-btnBox .process-btn{ background: #3b100e;}
.process-step .process-btnBox .process-btn::after{ content: ''; position: absolute; background: url(../common/imgs/btn-next.svg) no-repeat top left / 100% 100%; width: 10px; right: 25px; transition: all 0.3s; height: 20px; transition: all 0.3s;}
.process-step .process-btnBox .process-btn:hover{background: #3b100e;}
.process-step>.step02 .process-btnBox .process-btn:hover{background: #333;}
.process-step .process-btnBox .process-btn:hover::after{right: 15px;}

@media screen and (max-width: 768px) {
    .process{margin-bottom: 40px;}
    .process-tit{margin-bottom: 12px;}
    .process-step{max-width: 360px; margin: 0 auto; width: calc(100% - 40px);}
    .process-step .tit img{height: 21px;}
    .process-step .item{width: 100%; margin: 0 0 20px;}
    .process-step .item:last-of-type{margin-bottom: 0;}    
    .process-step .txt{font-size: 14px;}
    .process-step .txtS{font-size: 10px; display: inline-block; text-align: left;}

    .process-step .process-btnBox .process-btn{ width: calc(100% - 40px); font-size: clamp( 14px , 2.6vw ,   16px)}
    .process-step .process-btnBox .process-btn::after { width: 8px; right: 1em; height: 16px;}
    
    .process-step .item:nth-of-type(1) .inner{padding: 25px 0;}
}

/* Top CV */
.topCV {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: #ffffff;
  bottom: 10px;
  height: 40px;
  position: fixed;
  right: 10px;
  -webkit-transform: translate(0, 200%);
          transform: translate(0, 200%);
  -webkit-transition: .6s;
  transition: .6s;
  width: 330px;
  z-index: 9;
}

@media screen and (max-width: 768px) {
  .topCV {
    display: none;
  }
}

.topCV__button {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  color: #333333;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: .3s;
  transition: .3s;
  width: 100%;
  /* stylelint-disable */
  /* stylelint-enable */
}

@media screen and (min-width: 768px) {
  .topCV__button {
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 13px 3px rgba(8, 1, 3, 0.3);
            box-shadow: 0 0 13px 3px rgba(8, 1, 3, 0.3);
    padding: 0;
  }
  .topCV__button:hover {
    opacity: .7;
  }
}

.topCV__button:focus:not(:focus-visible) {
  outline: 0;
}

.topCV__button:after {
  color: #333333;
  content: '＞';
  font-size: 10px;
  position: absolute;
  right: 6px;
  top: 50%;
  -webkit-transform: translate(0, -50%) scale(0.6, 1);
          transform: translate(0, -50%) scale(0.6, 1);
}

.topCV .topCV-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  text-align: left;
}

.topCV .topCV-title:before {
  background-color: #eb6877;
  border-radius: 50%;
  content: '';
  height: 6px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-10px, 0);
          transform: translate(-10px, 0);
  width: 6px;
}

.topCV .topCV-title__txt {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.topCV .topCV-title__txt:not(:last-of-type) {
  margin-right: 5px;
}

.topCV .topCV-title__txt:not(:last-of-type):after {
  content: ' / ';
}

.topCV__logo {
  margin-left: 12px;
  width: 98px;
}

.topCV.is-new .topCV-title:before {
  opacity: 1;
}

.topCV.is-visible {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

@media screen and (min-width: 768px) {
  .site-theme-black .topCV__button {
    background-color: #333333;
  }
}

@media screen and (max-width: 768px) {
  .site-theme-black .topCV__button {
    background-color: #333333;
  }
}

.site-theme-black .topCV .topCV-title__txt {
  color: #ffffff;
}