@charset "utf-8";
.sectionWrap{
  position: relative;
  padding-bottom: calc(240 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
.sectionWrap{
  padding-bottom: 0;
}
}

/*-----------------------------------------------
 * VISUAL
-------------------------------------------------*/
.visual{
  padding-top: calc(519 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
  .visual{
    padding-top: calc(194 / var(--vw-min) * 100vw);
  }
}

/* visual > logo */
.visual__logo{
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  top: calc(129 / var(--vw-min) * 100vw);
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.9);
}
.visual__logo .logoImg{
  width: calc(638 / var(--vw-min) * 100vw);
  height: calc(248 / var(--vw-min) * 100vw);
  mask: url(../img/common/logo.svg) no-repeat center center / contain;
  -webkit-mask: url(../img/common/logo.svg) no-repeat center center / contain;
  background: #000;
  transition: opacity 0.8s ease;
}
@media screen and (max-width:768px){
  .visual__logo{
    top: calc(48 / var(--vw-min) * 100vw);
  }
  .visual__logo .logoImg{
    width: calc(247 / var(--vw-min) * 100vw);
    height: calc(96 / var(--vw-min) * 100vw);
  }
}

.in-visual .visual__logo{
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}
.in-introduction .visual__logo{
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}

/* panoramaSlider */
.panoramaSliderWrap{
  width: 100%;
  height: calc(547 / var(--vw-min) * 100vw);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  mask: url(../img/top/visual/mask_all.png) no-repeat center center /100vw auto;
  position: relative;
  z-index: 2;
}
.panoramaSlider{
  width:calc(2560 / var(--vw-min) * 100vw);
  height: calc(547 / var(--vw-min) * 100vw);
  overflow:visible;
  --swiper-wrapper-transition-timing-function: linear;
}
@media screen and (max-width:768px){
  .panoramaSliderWrap{
    height: auto;
    mask: url(../img/top/visual/mask_all.png) no-repeat center center /auto 100%;
  }
  .panoramaSlider{
    width:calc(1078 / var(--vw-min) * 100vw);
    height: auto;
  }
}
.panoramaSlider .swiper{
  overflow:visible;
}

.panoramaSlider .swiper-wrapper{
  align-items:center;
}

.panoramaSlider .swiper-slide{
  width:calc(848 / var(--vw-min) * 100vw) !important;
  height:calc(547 / var(--vw-min) * 100vw);
  overflow:hidden;
  transition:
    opacity 1.6s linear,
    filter 1.6s linear;
  cursor: default;
}
@media screen and (max-width:768px){
  .panoramaSlider .swiper-slide{
    width:calc(357 / var(--vw-min) * 100vw) !important;
    height:calc(209 / var(--vw-min) * 100vw);
  }
}
/* panoramaSlider > slideImg > img */
.panoramaSlider .swiper-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  /*transform:scale(1.2);*/

}
/*
.panoramaSlider .slideImg__img::after,
.panoramaSlider .slideImg__img::before{
  transform:scale(1.2);
}
  */
.panoramaSlider .swiper-slide .slideImg__imgWrap{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform:scale(1.1);
  transition: transform 3.5s linear;
}
/*NEXT ついてない時*/
.panoramaSlider .swiper-slide:not(.swiper-slide-next) .slideImg__imgWrap{
  transform:scale(1.2);
  transition: transform 3.5s linear;
  transition-delay: 1s;
}
/*
.panoramaSlider .swiper-slide:not(.swiper-slide-next) .slideImg__img::before{
  transform:scale(1.2);
  transition: transform 3.5s linear;
  transition-delay: 1s;
}
*/
.panoramaSlider .swiper-slide:not(.swiper-slide-next) .slideImgInner{
  transform:perspective(calc(4000 / var(--vw-min) * 100vw)) rotateY(12deg);
  transition: transform 4s linear;
  transition-delay: 1s;
}
@media screen and (max-width:768px){
  .panoramaSlider .swiper-slide:not(.swiper-slide-next) .slideImg__imgWrap{
    transform:scale(1.2);
    transition-delay: 1.5s;
  }
  .panoramaSlider .swiper-slide:not(.swiper-slide-next) .slideImgInner{
    transform:perspective(calc(2000 / var(--vw-min) * 100vw)) rotateY(12deg);
  }
}

/* NEXT */
/*
.panoramaSlider .swiper-slide.swiper-slide-next img{
  transform:scale(1.1);
  transition: transform 3.5s linear;
  transition-delay: 0s;
}
  */
.panoramaSlider .swiper-slide.swiper-slide-next .slideImgInner{
  transform:unset;
  transition: transform 0.2s ease;
  transition-delay: 0s;
}
.panoramaSlider .swiper-slide.swiper-slide-next + .slideImgInner{
  transform:unset;
  transition: all 0s ease;
  transition-delay: 0s;
}
/* panoramaSlider > slideImg */
.slideImg{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.slideImg__img{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.slideImg__img img{
  filter: grayscale(100%);
}
.slideImg__img::before{
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: url(../img/top/visual/img_ov.jpg) no-repeat center center / cover;
  z-index: 1;
  mix-blend-mode: darken;
  opacity: 0.5;
}

.slideImg__img::after{
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 2;
}
.slideImgInner{
  position: relative;
  width:calc(848 / var(--vw-min) * 100vw) !important;
  height:calc(547 / var(--vw-min) * 100vw);
  transition: all 0.3s ease;
}
@media screen and (max-width:768px){
  .slideImgInner{
    width:calc(357 / var(--vw-min) * 100vw) !important;
    height:calc(209 / var(--vw-min) * 100vw);
  }
}

/* overImg */
.slideImg .overImg{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: url(#mask-clip-path);
  -webkit-clip-path: url(#mask-clip-path);
  pointer-events: none;
  z-index: 5;
  filter: blur(5px);
  transition: all 0.3s ease;
}
.overImg::before{
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: url(../img/top/visual/img_ov.jpg) no-repeat center center / cover;
  z-index: 2;
  mix-blend-mode: darken;
  pointer-events: none;
  opacity: 0.5;
}
.slideImg:hover .overImg{
  opacity: 0.8;
  filter: blur(0);
}
@media screen and (max-width:768px){
  .slideImg .overImg{
    clip-path: none;
    -webkit-clip-path: none;
    opacity: 0;
    filter: blur(0);
    transition-delay: 1.5s;
    transition-duration: 1s;
  }
  .swiper-slide.swiper-slide-next .overImg{
    opacity: 1;
    transition-delay: 1.5s;
  }
}

/* panoramaSlider > mask-svg */
.panoramaSliderWrap .mask-svg{
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
.panoramaSliderWrap .js-mask-path{
  transform: translate(-9999px, -9999px) scale(0);
  transform-box: fill-box;
  transform-origin: 0 0;
}

/*-----------------------------------------------
 * INTRODUCTION
-------------------------------------------------*/
.introduction{
    padding-top: calc(159 / var(--vw-min) * 100vw);
}
@media screen and (max-width:768px){
  .introduction{
    padding-top: calc(60 / var(--vw-min) * 100vw);
    padding-bottom: calc(100 / var(--vw-min) * 100vw);
  }
}
.introduction__logo{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;  
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 1;
  transition: opacity 0.6s ease, filter 0.8s ease, transform 0.8s ease;
  transition-delay: 0.8s;
  filter: blur(0);
  transform: scale(1);
}
.in-visual .introduction__logo{
  opacity: 0;
  transition: opacity 0.2s ease, filter 0.2s ease;
  filter: blur(10px);
  transform: scale(0.9);
}

.introduction__logo .logoImg{
  width: calc(638 / var(--vw-min) * 100vw);
  height: calc(248 / var(--vw-min) * 100vw);
  mask: url(../img/common/logo.svg) no-repeat center center / contain;
  -webkit-mask: url(../img/common/logo.svg) no-repeat center center / contain;
  background: #000;
  opacity: 0.35;
}


@media screen and (max-width:768px){
.introduction__logo{
  min-height: calc(96 / var(--vw-min) * 100vw);
}
.introduction__logo .logoImg{
  width: calc(247 / var(--vw-min) * 100vw);
  height: calc(96 / var(--vw-min) * 100vw);
}
}


.introduction__cont{
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transition: opacity 0.6s ease, filter 0.8s ease, transform 0.8s ease;
  transition-delay: 1s;
}
.in-visual .introduction__cont{
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.9);
  transition: opacity 0.6s ease, filter 0.8s ease, transform 0.8s ease;
  transition-delay: 0s;
}
.introduction__textWrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: calc(64 / var(--vw-min) * 100vw);
}
.introduction__text{
    font-size: calc(20 / var(--vw-min) * 100vw);
    line-height: 250%;
    letter-spacing: 0.07em;
    color: #151515;
    font-family: var(--font-ja);
    text-align: center;
}
@media screen and (max-width:768px){
  .introduction__textWrap{
    padding: calc(36 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) 0;
  }
  .introduction__text{
    font-size: calc(14 / var(--vw-min) * 100vw);
    letter-spacing:calc(0.392 / var(--vw-min) * 100vw);
  }
}

/* introduction > flowingTxt */
.introduction__flowing.flowingTxt{
  position: absolute;
	width: 100%;
	overflow: hidden;
	left: 0;
  margin: auto;
	height: calc(280 / var(--vw-min) * 100vw);
  bottom:  calc(100 / var(--vw-min) * 100vw);
}
.introduction__flowing::after{
  content: "";
	width: 100%;
  height: 100%;
  display: block;
	-webkit-mask: url(../img/top/introduction/intro_flowing_txt.png) repeat-x;
	mask: url(../img/top/introduction/intro_flowing_txt.png) repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
  --flowing-tile-x: calc(2053 * 280 / 307 / var(--vw-min) * 100vw);
  background-color: #151515;
  animation: flowingTxt_loop 30s linear infinite;
}
@media screen and (max-width:768px){
  .introduction__flowing.flowingTxt{
    height: calc(210 / var(--vw-min) * 100vw);
    top: unset;
    bottom:0;
  }
  .introduction__flowing::after{
    --flowing-tile-x: calc(2053 * 210 / 307 / var(--vw-min) * 100vw);
  }
}
/*-----------------------------------------------
 * WORKS
-------------------------------------------------*/
.works{
   background:url(../img/top/works/works_bg.jpg) #151515 no-repeat center bottom / cover;
    padding-top: calc(180 / var(--vw-min) * 100vw);
    padding-bottom: calc(180 / var(--vw-min) * 100vw);
    position: relative;
}
@media screen and (max-width:768px){
  .works{
    padding-top: calc(96 / var(--vw-min) * 100vw);
    padding-bottom: calc(90 / var(--vw-min) * 100vw);
  }
}
.worksTtl{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(120 / var(--vw-min) * 100vw);
}

.works__ttl__txt{
  font-size: calc(64 / var(--vw-min) * 100vw);
  font-family: var(--font-en);
  font-weight: 400;
  background: var(--grad2, linear-gradient(90deg, #F5F5F5 0%, #686868 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.works__ttl__en{
  font-size: calc(14 / var(--vw-min) * 100vw);
  font-family: var(--font-en);
  font-weight: 400;
  opacity: 0.5;
  line-height: 1;
  letter-spacing: calc(0.42 / var(--vw-min) * 100vw);
  margin-top: calc(10 / var(--vw-min) * 100vw);
  color: #F5F5F5;
}

@media screen and (max-width:768px){
  .worksTtl{
    margin-bottom: calc(50 / var(--vw-min) * 100vw);
  }
  .works__ttl__txt{
    font-size: calc(40 / var(--vw-min) * 100vw);
  }
  .works__ttl__en{
    font-size: calc(11 / var(--vw-min) * 100vw);
  }
}

/* works > worksListsWrap */
.worksListsWrap{
    padding: 0 calc(49 / var(--vw-min) * 100vw);
    border-top: 1px solid #343434;
    border-bottom: 1px solid #343434;
    position: relative;
}
.worksListsWrap::before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #343434;
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
@media screen and (max-width:768px){
  .worksListsWrap::before{
    inset: unset;
    left: 0;
    top: calc(240 / var(--vw-min) * 100vw);
  }
  .worksListsWrap::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #343434;
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: calc(240 / var(--vw-min) * 100vw);
  }
}
.worksLists{
    display: flex;
    flex-direction: row;
    width: 100%;
    border-left: 1px solid #343434;
    flex-wrap: wrap;
}
/* worksItem */
.worksItem{
    width: calc(100% / 3);
    height: calc(534 / var(--vw-min) * 100vw);
    color: #F5F5F5;
    overflow: hidden;
    border-right: 1px solid #343434;
    padding:calc(8 / var(--vw-min) * 100vw);
    /*border-bottom: 1px solid #343434;*/
}
.worksItem:nth-last-child(-n + 3) {
  border-bottom: none;
}
@media screen and (max-width:768px){
  .worksListsWrap{
    padding: 0 calc(12 / var(--vw-min) * 100vw);
  }
  .worksItem{
    width: calc(100% / 2);
    height: calc(240 / var(--vw-min) * 100vw);
  }

}
.worksItem._cs{
  padding:0;
  background: url(../img/top/works/cs_bg.png) no-repeat center bottom / cover;
  pointer-events: none;
}
.worksItem__link{
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #F5F5F5;
    position: relative;
}
.worksItem__link:not(._cs)::after{
    content: '';
    display: block;
    width:calc(16 / var(--vw-min) * 100vw);
    height:calc(16 / var(--vw-min) * 100vw);
    background: #F5F5F5;
    opacity: 0.4;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    mask: url(../img/common/icon/icon_arrow.svg) no-repeat center center / contain;
}
@media screen and (max-width:768px){
  .worksItem__link:not(._cs)::after{
    width:calc(10 / var(--vw-min) * 100vw);
    height:calc(10 / var(--vw-min) * 100vw);
  }
}

.worksItem__inner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.worksItem__cs{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-en);
    font-size: calc(44 / var(--vw-min) * 100vw);
    font-weight: 500;
    line-height: 1; 
    text-align: center;
    /*background: linear-gradient(180deg, #121212 0%, #343434 100%);*/
    opacity: 0.3;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
  .worksItem__cs{
    font-size: calc(26 / var(--vw-min) * 100vw);
  }
}
.worksItem__img{  
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: calc(18 / var(--vw-min) * 100vw);
}
.worksItem__img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}
@media screen and (hover: hover) and (pointer: fine) {
  .worksItem__link:hover .worksItem__img img {
    transform: scale(1.05);
  }
}
.worksItem__production{
  margin-bottom: calc(5 / var(--vw-min) * 100vw);
  opacity: 0.8;
}
.production__ttl{
  opacity: 0.4;
  display: inline-block;
  padding-right: calc(10 / var(--vw-min) * 100vw);
}
.worksItem__ttl{
  font-size: calc(36 / var(--vw-min) * 100vw);
  font-weight: 600;
  line-height:127.778%;
  opacity: 0.8;
}
@media screen and (max-width:768px){
  .worksItem__production{
    font-size: calc(12 / var(--vw-min) * 100vw);
    margin-bottom: calc(4 / var(--vw-min) * 100vw);
  }
  .worksItem__ttl{
    font-size: calc(16 / var(--vw-min) * 100vw);
  }
}

/* works > flowingTxt */
.works__flowing.flowingTxt{
  position: absolute;
	width: 100%;
	overflow: hidden;
  top: 0;
	left: 0;
  margin: auto;
	height: calc(224 / var(--vw-min) * 100vw);
}
.works__flowing::after{
  display: block;
	content: "";
	width: 100%;
  height: 100%;
  background-color: #F5F5F5;
	-webkit-mask: url(../img/top/works/works_flowing_txt.png) repeat-x;
	mask: url(../img/top/works/works_flowing_txt.png) repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
  --flowing-tile-x: calc(1815 * 224 / 231 / var(--vw-min) * 100vw);
  animation: flowingTxt_loop 25s linear infinite reverse;
}
@media screen and (max-width:768px){
  .works__flowing.flowingTxt{
    height: calc(151 / var(--vw-min) * 100vw);
  }
  .works__flowing::after{
    --flowing-tile-x: calc(1815 * 151 / 231 / var(--vw-min) * 100vw);
  }
}