@charset "UTF-8";

.wrapper {
  overflow: revert;
}

.main {
  overflow: revert;
}

.box-bukken {
  background-color: #fff;
}

/* kv
---------------------------------------------- */
.kv__img iframe {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  .kv__img iframe {
    height: 200% !important;
  }
}

@media (max-aspect-ratio: 16/9) {
  .kv__img iframe {
    width: 200% !important;
  }
}

@media screen and (min-width: 769px) {
  .kv__contents::before {
    background-color: rgb(0 0 0 / .4);
  }
}

/* intro
---------------------------------------------- */
.intro {
  position: relative;
  z-index: 0;
}

.intro__copy {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 1500px);
  z-index: 1;
}
.intro__copy img {
  display: block;
  width: calc(540 / 1500 * 100%);
}

@media screen and (max-width: 768px) {
  .intro__copy {
    position: static;
    transform: translateX(0);
    width: 100%;
    background-color: #fff;
    padding-block: 90px 40px;
  }
  .intro__copy .text {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 2;
    text-align: center;
  }
}

/* positionArea
---------------------------------------------- */
/* .date {
  position: absolute;
  top: 3%;
  right: 3%;
  font-size: clamp(24px, 0.8rem + 2.09vw, 48px);
  letter-spacing: 0;
  line-height: 1;
  z-index: 2;
} */

.minute {
  position: absolute;
  bottom: 3%;
  left: 5%;
  color: #fff;
  font-size: clamp(40px, -0.01rem + 5.21vw, 100px);
  letter-spacing: 0;
  line-height: 1;
  z-index: 2;
}
.minute--small {
  font-size: clamp(32px, -0.01rem + 4.17vw, 80px);
}
.minute .num {
  font-size: 200%;
}

.minute .subText {
  display: block;
  font-size: clamp(12px, 0.26rem + 1.22vw, 26px);
  letter-spacing: 0.1em;
}
.minute .subText .small {
  display: block;
  font-size: 76.9%;
  margin-bottom: 1em;
}
.minute .subText .em {
  font-size: 146.15%;
}

.minute-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: calc(430 / 970 * 100%);
  aspect-ratio: 430 / 370;
  overflow: hidden;
  z-index: 1;
}
.minute-shadow::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200%;
  aspect-ratio: 1;
  background-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  z-index: 0;
}

.has-bg {
  position: relative;
  z-index: 0;
}

.has-bg__img {
  position: absolute;
  width: 100%;
  z-index: -1;
}

.positionArea {
  padding-block: clamp(100px, 7.57rem + 6.47vw, 200px);
}
:where(.positionArea *) {
  color: #fff;
}
.positionArea::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 460px;
  background: linear-gradient(90deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / 0) 100%);
  z-index: 0;
}

/* area */
.area .sectionTitle {
  text-align: center;
}

.area .sectionCopy {
  margin-top: -2em;
  text-align: center;
}

.areaBox {
  max-width: 1200px;
  background-color: #fff;
  margin-top: clamp(60px, 5.03rem + 2.59vw, 100px);
}
.areaBox__inner {
  padding: 90px calc(120 / 1200 * 100%);
}

.areaBox__bottom {
  gap: .5em;
  margin-top: 10px;
}
.areaBox__bottom * {
  color: #333;
}

.areaBox__capBox {
  width: max(260px, 52%);
}

.areaBox__capList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
}

.areaBox__capList > li {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 2.4;
}
.areaBox__capList > li::before {
  content: '';
  display: block;
  width: 30px;
  height: 15px;
  filter: blur(1px);
  background-color: #B6B9B3;
}
.areaBox__capList > li:nth-child(2):before {
  background-color: #D5D8D0;
}

.areaBox__capList02 > li:nth-child(1):before {
  background-color: #E4E4CE;
}
.areaBox__capList02 > li:nth-child(2):before {
  background-color: #CFE0E4;
}

.areaBox__caption {
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 2.4;
  margin-left: auto;
  text-align: right;
}

.area__text {
  margin-top: clamp(40px, 2.91rem + 2.91vw, 85px);
  text-align: center;
}

/* kyoto */
.kyoto {
  margin-top: clamp(220px, 16.66rem + 14.24vw, 440px);
}

.kyotoHead {
  align-items: center;
}
.kyotoHead__head {
  width: calc(520 / 1500 * 100%);
}

.kyotoHead__title {
  position: relative;
  z-index: 0;
}
.kyotoHead__title .en {
  position: absolute;
  bottom: -.2em;
  left: 0;
  z-index: -1;
}
.kyotoHead .sectionText {
  border-top: 1px solid rgb(255 255 255 / .2);
  margin-top: 2em;
  padding-top: 2em;
}

.kyotoHead__body {
  width: calc(970 / 1920 * 100vw);
  margin-right: var(--adjustment);
}

.kyotoHead__img .has-bg__img {
  top: calc(60 / 630 * 100%);
  left: calc(-60 / 970 * 100%);
}

.kyotoBox {
  margin-top: clamp(90px, 4.87rem + 11vw, 260px);
}

.kyotoItem01 {
  width: calc(600 / 1920 * 100%);
  margin-left: calc(1260 / 1920 * 100%);
}
.kyotoItem01 .minute-shadow {
  width: calc(320 / 600 * 100%);
}
.kyotoItem01 .has-bg__img {
  top: calc(60 / 600 * 100%);
  right: calc(-60 / 600 * 100%);
  filter: brightness(.2);
}
.kyotoItem02 {
  align-items: flex-end;
  max-width: 1800px;
  margin-top: calc(-130 / 1800 * 100%);
}
.kyotoItem02 .kyotoItem__img {
  width: calc(1000 / 1800 * 100%);
}
.kyotoItem02 .kyotoItem__img::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(594 / 1000 * 100%);
  height: calc(454 / 1000 * 100%);
  background: url(../img/bg_shadow-t-r.png) top right/contain no-repeat;
  z-index: 1;
}
.kyotoItem02 .minute-shadow {
  width: calc(430 / 1000 * 100%);
}
.kyotoItem02 .has-bg__img {
  top: calc(-60 / 1000 * 100%);
  left: calc(-60 / 1000 * 100%);
}
.kyotoItem02 .date {
  position: absolute;
  top: 3%;
  right: 3%;
  width: calc(187 / 1000 * 100%);
  z-index: 2;
}
.kyotoItem02 .kyotoHead__head {
  padding-bottom: 12%;
}
.kyotoItem02 .kyotoHead__title .en {
  bottom: .4em;
}

.kyotoItem03 {
  width: calc(920 / 1920 * 100%);
  margin-top: calc(200 / 1920 * 100%);
  margin-left: calc(940 / 1920 * 100%);
}
.kyotoItem03 .has-bg__img {
  top: calc(60 / 644 * 100%);
  right: calc(-60 / 920 * 100%);
}
.kyotoItem04 {
  width: calc(620 / 1920 * 100%);
  margin-top: calc(200 / 1920 * 100%);
  /* margin-left: calc(60 / 1920 * 100%); */
  margin-left: calc(800 / 1920 * 100%);
}
.kyotoItem04 .minute-shadow {
  width: calc(320 / 620 * 100%);
}
.kyotoItem04 .has-bg__img {
  top: calc(-60 / 775 * 100%);
  left: calc(-60 / 620 * 100%);
  filter: brightness(.2);
}
.kyotoItem05 {
  width: calc(1650 / 1920 * 100%);
  margin-top: clamp(90px, 6.33rem + 7.12vw, 200px);
}
.kyotoItem05 .has-bg__img {
  top: calc(-60 / 1150 * 100%);
  right: calc(-60 / 1650 * 100%);
}
.kyotoItem05 .minute-shadow {
  width: calc(720 / 1650 * 100%);
}

.kyotoItem06 {
  width: calc(900 / 1920 * 100%);
  margin-top: clamp(90px, 4.87rem + 11vw, 260px);
  margin-left: auto;
}
.kyotoItem06 .has-bg__img {
  top: calc(-60 / 1125 * 100%);
  left: calc(-60 / 900 * 100%);
}
.kyotoItem06 .minute-shadow {
  width: calc(600 / 900 * 100%);
}

.kyotoItem07 {
  width: calc(920 / 1920 * 100%);
  margin-top: clamp(90px, 4.87rem + 11vw, 260px);
  margin-left: calc(200 / 1920 * 100%);
}
.kyotoItem07 .has-bg__img {
  top: calc(60 / 644 * 100%);
  left: calc(-60 / 920 * 100%);
}
.kyotoItem07 .minute-shadow {
  width: calc(600 / 920 * 100%);
}

@media screen and (max-width: 1400px) {
  .areaBox__capBox {
    width: max(260px, 30%);
  }
}

@media screen  and (min-width: 769px) and (max-width: 1200px) {
  .areaBox__caption {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {

.minute {
  left: 3%;
}

/* area */
.area .sectionCopy {
  margin-top: -1em;
}

.areaBox {
  max-width: 560px;
}
.areaBox__inner {
  padding: 30px calc(30 / 320 * 100%);
}

.areaBox__capList > li {
  font-size: 10px;
  line-height: 2;
}
.areaBox__capList > li::before {
  width: 20px;
  height: 10px;
}

.areaBox__caption {
  font-size: 10px;
  line-height: 2;
  margin-left: 0;
  text-align: left;
}

.area__text {
  text-align: left;
}

/* kyoto */
.kyotoHead {
  flex-direction: column;
  row-gap: 50px;
}
.kyotoHead__head {
  width: 100%;
}

.kyotoHead__title .en {
  bottom: 1.5em;
}

.kyotoHead__body {
  width: calc(330 / 375 * 100vw);
  margin-left: auto;
}

.kyotoItem01 {
  width: calc(200 / 375 * 100%);
  margin-left: calc(160 / 375 * 100%);
}
.kyotoItem01 .minute-shadow {
  width: calc(320 / 500 * 100%);
}
.kyotoItem02 {
  row-gap: 110px;
  margin-top: calc(110 / 375 * 100%);
}
.kyotoItem02 .kyotoItem__img {
  width: calc(300 / 320 * 100%);
}
.kyotoItem02 .minute-shadow {
  width: calc(430 / 900 * 100%);
}
.kyotoItem02 .date {
  width: calc(77 / 300 * 100%);
}
.kyotoItem02 .kyotoHead__title .en {
  bottom: .6em;
}

.kyotoItem03 {
  width: calc(300 / 375 * 100%);
  margin-top: calc(70 / 375 * 100%);
  margin-left: calc(60 / 375 * 100%);
}
.kyotoItem03 .minute-shadow {
  width: calc(120 / 200 * 100%);
}
.kyotoItem04 {
  width: calc(200 / 375 * 100%);
  margin-top: calc(110 / 375 * 100%);
  margin-left: calc(35 / 375 * 100%);
}
.kyotoItem05 {
  width: calc(330 / 375 * 100%);
}
.kyotoItem05 .has-bg__img {
  top: calc(-20 / 231 * 100%);
  right: calc(-20 / 330 * 100%);
}
.kyotoItem05 .minute-shadow {
  width: calc(220 / 330 * 100%);
}
.kyotoItem06 {
  width: calc(240 / 375 * 100%);
}
.kyotoItem07 {
  width: calc(280 / 375 * 100%);
}
}

/* concept
---------------------------------------------- */
.concept {
  position: relative;
  /* height: calc(100vh - var(--headerheight)); */
  margin-top: clamp(100px, 7.57rem + 6.47vw, 200px);
  padding-bottom: calc(100vh - var(--headerheight));
  z-index: 0;
}

.conceptWrap {
  position: sticky;
  top: var(--headerheight);
}

.conceptBox {
  position: absolute;
  top: 0;
  left: 0;
  /* position: sticky; */
  width: 100%;
  height: calc(100vh - var(--headerheight));
  /* top: 0; */
  filter: blur(10px);
  transition: .6s ease-out;
  opacity: 0;
  z-index: 0;
}
.conceptBox.is-active {
  filter: blur(0);
  opacity: 1;
}

.conceptBox__inner {
  position: relative;
  height: 100%;
  z-index: 0;
}
.conceptBox__inner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(640 / 1920 * 100%);
  height: 100%;
  background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, rgba(0 0 0 / .45) 100%);
  z-index: 1;
}

.conceptBox__img {
  height: 100%;
}
.conceptBox__img img {
  height: 100%;
  object-fit: cover;
  object-position: 30% top;
}

/* .conceptBox01 {
  opacity: 1;
  z-index: 1;
}
.conceptBox02 {
  z-index: 2;
}
.conceptBox03 {
  z-index: 3;
} */

.conceptBox__textBox {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  top: 10%;
  right: 10%;
  font-family: "Shippori Mincho", serif;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(8%);
  transition: .8s .4s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}
.conceptBox.is-active .conceptBox__textBox {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}

.conceptBox__copy {
  color: #fff;
  font-weight: 500;
  font-size: clamp(24px, 0.83rem + 1.39vw, 40px);
  letter-spacing: 0.2em;
  line-height: 2;
}

.conceptBox__text {
  display: flex;
  align-items: center;
  gap: 1.5em;
  color: #F5F5F5;
  font-size: 16px;
  letter-spacing: 0.12em;
  line-height: 2;
  margin-top: 2em;
}
.conceptBox__text::before {
  content: '';
  display: block;
  width: 1px;
  height: 100px;
  background-color: rgb(255 255 255 /.6);
}

.conceptBox .minute {
  filter: blur(10px);
  opacity: 0;
  transform: translateY(-10%);
  transition: .8s .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.conceptBox.is-active .minute {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}


.stickySpacer {
	height: 100vh;
}

@media screen and (max-width: 1200px) {
  .concept {
    padding-bottom: 100vh;
  }

  .conceptWrap {
    top: 0;
  }

  .conceptBox {
    height: 100vh;
  }

  .conceptBox .minute {
    bottom: calc(64px + 5vh);
    bottom: calc(64px + 5dvh);
  }
}

@media screen and (max-width: 768px) {
  .conceptBox__inner::before {
    width: calc(160 / 375 * 100%);
  }

  .conceptBox__textBox {
    top: calc(60px + 5%);
  }
}

/* map
---------------------------------------------- */
.map {
  padding-top: clamp(90px, 6.82rem + 5.83vw, 180px);
}

.map__copy {
  text-align: center;
}

.mapBox {
  max-width: 1200px;
  margin-top: 100px;
}

.mapBox__img--narrow {
  max-width: 1000px;
  margin-top: 100px;
  margin-inline: auto;
}

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

  .mapBox {
    max-width: 560px;
    margin-top: 40px;
  }

  .mapBox__img--narrow {
    margin-top: 30px;
  }
}

/* bg
---------------------------------------------- */
.movieBg {
  position: fixed;
  top: var(--headerheight);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--headerheight));
  opacity: 1;
  visibility: visible;
  z-index: -1;
}
.movieBg.is-hide {
  opacity: 0;
  visibility: hidden;
}
.movieBg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(0 0 0 / .7);
  width: 100%;
  height: 100%;
  z-index: 1;
}

.movieBg iframe {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100vh;
}

.movieBg img {
  height: 100vh;
  object-fit: cover;
}

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  .movieBg iframe {
    min-height: 200vh;
    min-height: 200lvh;
  }
}

@media (max-aspect-ratio: 16/9) {
  .movieBg iframe {
    min-width: 200%;
  }
}

@media screen and (max-width: 1200px) {
  .movieBg {
    top: 0;
    height: 100vh;
  }
}