@charset "UTF-8";
/* Top */
.main{background: #474342; color: #fff;}
.mainVisual{position: relative; width: 100%; margin: 0 0 180px;}
object,
#animation_container{width: 100%;}

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

@media screen and (min-width: 768px) {
	.mainVisual__inner{width: 100%; padding-top: 44.27%; position: relative; overflow: hidden;}
	.mainVisual__inner #animation_container{width: 100%;}
	.mainVisual__inner object{height: 100%; width: 100%; position: absolute; top: 0; left: 0;}
	
}

@media screen and (max-width: 768px) {
	.main{background: #444444;}
	.mainVisual{margin: 0 0 75px;
		width: 100%;
		padding-top: 143.4%;
		position: relative;
		overflow: hidden;}
			
}

/* 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: 10px;
  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;
}

/* Info Box */
.infoBox {
  background-color: #ffffff;
  position: relative;
}

@media screen and (min-width: 768px) {
  .infoBox {
    bottom: 0;
    height: 40px;
    max-width: 700px;
    position: absolute;
  }
}

@media screen and (max-width: 768px) {
  .infoBox {
    height: 40px;
    width: 100%;
  }
}

.infoBox__link {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #333333;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-transition: .3s;
  transition: .3s;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .infoBox__link {
    padding: 10px 65px;
  }
  .infoBox__link:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 768px) {
  .infoBox__link {
    padding: 5px 20px;
  }
}

.infoBox__link:after {
  color: #ffffff;
  content: '＞';
  font-size: 12px;
  line-height: 1;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translate(0, -50%) scale(0.6, 1);
          transform: translate(0, -50%) scale(0.6, 1);
}

.infoBox__icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

@media screen and (min-width: 768px) {
  .infoBox__icon {
    left: 15px;
  }
}

@media screen and (max-width: 768px) {
  .infoBox__icon {
    font-size: 20px;
    height: 25px;
    left: 20px;
    width: 25px;
  }
}

.infoBox__txt {
  -webkit-box-orient: vertical;
  color: #eeeeee;
  display: -webkit-box;
  letter-spacing: .15em;
  -webkit-line-clamp: 1;
  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 768px) {
  .infoBox__txt {
    font-size: 14px;
    padding-left: 0;
  }
}

@media screen and (max-width: 768px) {
  .infoBox__txt {
    font-size: 12px;
    line-height: calc(36 / 24);
    padding-left: 40px;
  }
}

/* Block */
@media screen and (min-width: 768px) {
	.block{margin-bottom: 180px; display: flex; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 3;}
	.blockImg{width: 56.40625%; position: relative; margin: 50px 0 0 0; box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(60px); transition: 1.5s ease 1.3s;}
	.blockImg:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: 1; transition: 1.5s ease 1.3s;}
	.blockImg img{width: 100%;}
	.block.sai-animate .blockImg{opacity: 1; transform: translateY(0);}
	.block.sai-animate .blockImg:before{height: 0;}
	
	.blockOuter{width: 43.59375%;}
	.blockInner{max-width: 630px; width: 90%; height: 100%; display: flex; flex-direction: row-reverse;}	

	.blockTit{padding: 25px 0 0 15px; width: 100px; position: relative;}
	.blockTit:before{content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 0; background: rgba(255,255,255,.2); transition: 1s ease 1.7s;}
	.blockTit ul{display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: flex-end;}
	.blockTit li{font-size: 26px; line-height: 1.62; letter-spacing: 0.12em; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; filter: blur(20px) brightness(150%); opacity: 0; transition: 1.2s ease 1.7s;}

	.block.sai-animate .blockTit:before{height: calc(100% - 40px);}
	.block.sai-animate .blockTit li{opacity: 1; filter: blur(0) brightness(100%);}
	
	.blockTxt{padding: 0 10px 0 30px; width: 130px;}
	.blockTxt ul{display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: flex-start;}
	.blockTxt li{font-size: 14px; line-height: 1.94; letter-spacing: 0.12em; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; filter: blur(20px) brightness(150%); opacity: 0; transition: 1.2s ease 2.2s;}
	.block.sai-animate .blockTxt li{opacity: 1; filter: blur(0) brightness(100%);}
	
	.blockBtn{width: 60px; opacity: 0; transform: translateY(-40px); transition: 1.2s ease 2.5s;}
	.block.sai-animate .blockBtn{opacity: 1; transform: translateY(0);}
	
	.blockBtn a{width: 100%; height: 370px; background: #000000; color: #ffffff; font-size: 15px; line-height: 1; letter-spacing: 0.15em; padding: 20px 0 0 0; display: flex; justify-content: center; position: relative; z-index: 1; transition: .3s;}	
	.blockBtn a:before{content: ''; background: #ffffff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; display: block; transition: transform .4s; transform: scaleY(0); transform-origin: bottom right; inset: 0 0 0 0;}
	.blockBtn a:hover:before{transform: scaleY(1); transform-origin: top left;}
	.blockBtn a:hover{color: #000000; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, .5); transform: translateY(-5px);}	
	
	.blockBtn p{-ms-writing-mode:tb-rl; -webkit-writing-mode:vertical-rl; writing-mode:vertical-rl;}
	.blockBtn i{position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; display: block; background: #666666;}
	.blockBtn i:before{content: ''; width: 0; height: 0; border-width: 0 0 30px 60px; border-color: transparent transparent #666666 transparent;
	border-style: solid; position: absolute; top: -30px; right: 0; display: block;}
	.blockBtn i:after{content: ''; border: solid #ffffff; border-width: 0 1px 1px 0; display: inline-block; padding: 5px; transform: rotate(-45deg); position: absolute; bottom: 15px; right: 12px;}
	
	.blockLine{position: absolute; top: calc(16vw + 20px); left: 0; width: 100%; height: 19vw; z-index: -1;}
	.blockLine:before{content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 0; transform: translateY(-50%); transform-origin: center; transition: .7s ease 1s;}
	.block.sai-animate .blockLine:before{height: 100%;}
	
	.block.odd .blockLine:before{background: linear-gradient(to right, #000000, #8c8c8c);}

	.block.even .blockOuter{display: flex; justify-content: flex-end;}
	.block.even .blockInner{justify-content: flex-end;}
	.block.even .blockLine:before{background: linear-gradient(to right, #585754, #000000);}

	.concept .blockImgWrap{width: 64.58%; display: flex; justify-content: flex-end; align-items: flex-start;}
	.concept .blockOuter{width: 35.42%;}
	.concept .blockInner{max-width: 470px;}
	.concept .blockPhoto{position: relative; line-height: 1; width: 27.18%; margin: 0 0 0 3%; padding: 0; box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(60px); transition: 1.5s ease 1.3s;}
	.concept .blockPhoto img{width: 100%;}
	.concept .blockPhoto:nth-of-type(1){margin-top: 90px;}
	.concept .blockPhoto:nth-of-type(2){margin-top: 190px; transform: translateY(-60px);}
	
	.concept .blockPhoto:before{content: ''; position: absolute; left: 0; width: 100%; height: 100%; background: #000000; z-index: 1; transition: 1.5s ease 1.3s;}
	.concept .blockPhoto:nth-of-type(1):before,
	.concept .blockPhoto:nth-of-type(3):before{top: 0;}
	.concept .blockPhoto:nth-of-type(2):before{bottom: 0;}
	
	.concept.sai-animate .blockPhoto{opacity: 1; transform: translateY(0);}
	.concept.sai-animate .blockPhoto:before{height: 0;}
	
	.concept .blockLine{top: 19vw;}
	.concept .blockTit{margin-top: 20px;}
	.concept .blockTxt{margin-top: 17vw;}
	.concept .blockBtn{margin-top: 25.5vw;}
	.concept .blockImgWrap.only-sp{display: none;}

	.design .blockTxt{margin-top: calc(11.5vw + 50px);}
	.design .blockBtn{margin-top: calc(19.5vw + 50px);}

	.public .blockTxt{margin-top: calc(12.8vw + 50px);}
	.public .blockBtn{margin-top: calc(22vw + 50px);}

	.plan .blockTxt{margin-top: calc(15.5vw + 50px);}
	.plan .blockBtn{margin-top: calc(19.5vw + 50px);}		
}

@media screen and (max-width: 1500px) and (min-width: 768px) {
	.blockImg{width: 64%;}
	.blockOuter{width: 36%;}	
	.blockLine{height: 21.5vw; top: calc(18.5vw + 20px);}	
	
	.concept .blockPhoto{width: 30%;}
	.concept .blockLine{top: 21vw;}
	.concept .blockTxt{margin-top: 18.2vw;}
	.concept .blockBtn{margin-top: 30.3vw;}
	
	.design .blockTxt{margin-top: calc(13vw + 50px);}
	.design .blockBtn{margin-top: calc(23.5vw + 50px);}

	.public .blockTxt{margin-top: calc(14vw + 50px);}
	.public .blockBtn{margin-top: calc(25.5vw + 50px);}

	.plan .blockTxt{margin-top: calc(18vw + 50px);}
	.plan .blockBtn{margin-top: calc(23vw + 50px);}
}

@media screen and (max-width: 768px) {
	.block{margin-bottom: 70px; position: relative; z-index: 3;}
	.blockTit{margin: 0 0 30px;}
	.blockTit ul{display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center;}
	.blockTit li{font-size: 22px; line-height: 1.9; letter-spacing: 0.2em; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
		
	.blockTxt{padding: 20px 0 60px 30px; letter-spacing: 0.05em; font-size: 14px;}
	.blockImg{position: relative; line-height: 1; box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(60px); transition: 1s ease;}
	.blockImg img{width: 100%;}
	
	.blockImg:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: 1; transition: 1.2s ease;}
	
	.blockImg.sai-animate{opacity: 1; transform: translateY(0);}
	.blockImg.sai-animate:before{height: 0;}
			
	.blockBtn{padding: 0 30px;}
	.blockBtn a{width: 100%; max-width: 317px; height: 58px; margin: 0 auto; background: #000000; color: #fff; font-size: 15px; line-height: 1; letter-spacing: 0.15em; padding: 0 0 0 20px; display: flex; align-items: center; position: relative;}
	
	.blockBtn i{position: absolute; bottom: 0; right: 0; width: 32px; height: 58px; display: block; background: #666666;}
	.blockBtn i:before{content: ''; width: 0; height: 0; position: absolute; top: 0; left: -30px; display: block; width: 0; height: 0; border-top: 58px solid #666666; border-left: 30px solid transparent;}
	.blockBtn i:after{content: ''; border: solid #ffffff; border-width: 0 1px 1px 0; display: inline-block; padding: 5px; transform: rotate(-45deg); position: absolute; top: 25px; right: 12px;}
	
	.blockLine{position: absolute; bottom: 83px; z-index: -1;}
	.blockLine:before{content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; transition: 1.2s ease;}
	.blockLine.sai-animate:before{width: 100%; opacity: 1;}
	
	.block.odd .blockLine{right: 0; left: 50px;}
	.block.odd .blockLine:before{background: linear-gradient(to right, #393939, #8c8c8c);right: 0;}
	.block.even .blockLine{right: 80px; left: 0;}
	.block.even .blockLine:before{background: linear-gradient(to right, #383838, #6d6d6d); left: 0;}
		
	.concept .blockTit{margin: 0 0 20px;}
	.concept .blockPhoto{position: relative; padding: 0; box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateX(60px); transition: 1.5s ease;}
	.concept .blockPhoto img{width: 100%;}
	.concept .blockPhoto:nth-of-type(1){margin: 0 40px 15px 15px;}
	.concept .blockPhoto:nth-of-type(2){margin: 0 10px 15px 50px; transform: translateX(-60px);}
	.concept .blockPhoto:nth-of-type(3){margin: 0 50px 0 30px;}
	
	.concept .blockPhoto:before{content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: #000000; z-index: 1; transition: 1.5s ease;}
	.concept .blockPhoto:nth-of-type(1):before,
	.concept .blockPhoto:nth-of-type(3):before{left: 0;}
	.concept .blockPhoto:nth-of-type(2):before{right: 0;}
		
	.concept .blockPhoto.sai-animate{opacity: 1; transform: translateX(0);}
	.concept .blockPhoto.sai-animate:before{width: 0;}
	
	.concept .blockLine{top: calc(14vw + 260px);}
	.design .blockLine{top: 250px;}
	.public .blockLine{top: 250px;}
	.plan .blockLine{top: 250px;}
}

/* Banner */
.bnr-mj{text-align: center; margin: 0 0 90px; padding: 0 10%;}
.bnr-mj a{display: block; transition: .3s; max-width: 980px; margin: 0 auto;}
.bnr-mj a:hover{box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, .9); transform: translateY(-8px);}

@media screen and (max-width: 768px) {
	.bnr-mj{padding: 0 20px; margin: 0 0 50px;}
	.bnr-mj img{width: 100%;}
}

/* Information */
.topBot{background: #000000; color: #ffffff; padding: 90px 20px 100px;}

.info{margin: 0 0 70px; text-align: center;}
.infoTit{font-size: 16px; line-height: 1; letter-spacing: 0.1em; font-family: "EB Garamond", serif; margin: 0 0 35px;}
.infoTxt{font-size: 34px; line-height: 1; letter-spacing: 0.15em; margin: 0 0 35px;}
.infoDesc{font-size: 14px; line-height: 1.7; letter-spacing: 0.1em; margin: 0 0 35px;}
.infoBtn a{width: 530px; height: 82px; margin: 0 auto ; background: #ffffff; color: #333333; font-size: 16px; letter-spacing: 0.11em; line-height: 1; display: flex; justify-content: center; align-items: center; transition: .3s;}
.infoBtn a:hover{box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, .9); transform: translateY(-4px); background: #afa156; color: #ffffff;}

@media screen and (max-width: 768px) {
	.topBot{padding: 35px 20px;}
	
	.info{margin: 0 0 35px;}
	.infoTit{font-size: 12px;}
	.infoTxt{font-size: 27px;}
	.infoBtn a{width: 100%; height: 68px;}
}

/* News */
.news{max-width: 940px; margin: 0 auto 70px; border-top: 1px solid #808080;}
.newsItem{border-bottom: 1px solid #808080;  font-size: 14px; letter-spacing: 0.2em;}
.newsItem__txt a{text-decoration: underline; text-underline-offset: 4px; color: #ffffff; word-break: break-all;}
.newsItem__txt a:hover{color: #afa156;}

@media screen and (min-width: 768px) {
	.newsItem{display: flex; padding: 24px 0;}
	.newsItem__date{width: 210px; padding: 0 0 0 40px;}
	.newsItem__txt{width: calc(100% - 210px);}
}

@media screen and (max-width: 768px) {
	.news{margin: 0 auto 35px;}
	.newsItem{padding: 12px 15px;}
}

/* Campaign */
.campaign{text-align: center;}
.campaignTit{font-size: 16px; line-height: 1; letter-spacing: 0.1em; font-family: "EB Garamond", serif; margin: 0 0 23px;}
.campaignBnr a:hover{opacity: .8;}

@media screen and (max-width: 768px) {
	.campaignTit{font-size: 12px;}	
}