@charset "utf-8";

body {
  opacity: 0;
  transition: .4s;
}
body.loaded {
  opacity: 1;
}

.loaded .tpl-main {
  font-family: YakuHanMP, "Noto Serif JP", serif;
}

.gothic {
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

sup {
  font-size: 50%;
  letter-spacing: 0;
}
.sup-parent {
  position: relative;
  z-index: 0;
}
.sup-parent > sup {
  top: -.3em;
  right: -1em;
  position: absolute;
  z-index: 0;
}

/* loading
---------------------------------------------- */
html {
  scrollbar-gutter: stable;
}

.loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 9999;
  background: #3F2021;
  font-family: YakuHanMP, "Noto Serif JP", serif;
  transition: 0.6s;
  overflow: hidden;
  z-index: 100;
}
.loading.is-active07 {
  opacity: 0;
}

.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url('../images/bg_loading.jpg') center center/cover no-repeat;
  opacity: 0;
  transition: opacity 1.4s;
  z-index: 10;
}

.loading__contents {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .4s ease-out;
  width: 100%;
  z-index: 1;
}

.loading__copy {
  width: min(calc(1035 / 1920 * 100%), 1035px);
  transition-duration: .2s;
}
.loading.is-active .loading__copy {
  opacity: 1;
}
.loading.is-active02 .loading__copy {
  opacity: 0;
}

.loading__text {
  color: #fff;
  font-size: clamp(20px, 0.66rem + 1.74vw, 40px);
  letter-spacing: 0.08em;
  line-height: 1.85;
  /* opacity: 1; */
  transition-delay: .4s;
  overflow: hidden;
  text-align: center;
}
.loading__text .text {
  display: block;
  transform: translateY(100%);
  transition: .8s 1s cubic-bezier(0.06, 0.35, 0, 0.95);
}
.loading.is-active02 .loading__text {
  opacity: 1;
}
.loading.is-active02 .loading__text .text {
  transform: translateY(0);
  transition: .8s .2s cubic-bezier(0.06, 0.35, 0, 0.95);
}

.loading__mainImg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 1s ease-out;
  z-index: 11;
}
.loading__mainImg02 {
  mix-blend-mode: darken;
  z-index: 0;
}

.loading.is-active04 .loading__mainImg {
  opacity: 1;
  visibility: visible;
}
.loading.is-active06 .loading__mainImg {
  opacity: 0;
  visibility: hidden;
}

.loading__bottom {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  color: #401F20;
  font-size: clamp(28px, 1.33rem + 1.91vw, 50px);
  letter-spacing: 0.26em;
  opacity: 0;
  transition: opacity 0.4s;
  white-space: nowrap;
  z-index: 12;
}
.loading.is-active05 .loading__bottom {
  opacity: 1;
}
.loading.is-active06 .loading__bottom {
  opacity: 0;
}


.loading__catch {
  width: min(calc(721 / 1920 * 100%), 721px);
  transition-delay: .6s;
  z-index: 13;
}
.loading.is-active06 .loading__catch {
  opacity: 1;
}

.loading__step--active {
  opacity: 1;
  visibility: visible;
}
.loading__step--active .loading__bottom {
  opacity: 1;
}

.skip {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 20px;
  padding: 0.3em .8em;
  background-color: #fff;
  border: 1px solid rgb(63 32 33 / .5);
  transition: .4s ease;
  z-index: 15;
}
.skip.is-hide {
  opacity: 0;
  visibility: hidden;
}

.loading .p-caption {
  opacity: 0;
  transition: opacity .4s ease-out;
  z-index: 20;
}
.loading.bgImg .p-caption {
  opacity: 1;
}

/* 背景画像切り替え用 */
.loading.bgImg::before {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .loading::before {
    background-image: url('../images/bg_loading_sp.jpg');
  }

  .loading__copy {
    width: min(calc(334 / 375 * 100%), 334px);
  }

  .loading__mainImg {
    width: min(calc(375 / 375 * 100%), 1300px);
    height: auto;
  }

  .loading__catch {
    width: min(calc(308 / 375 * 100%), 308px);
  }

  .loading__bottom {
    bottom: 7%;
  }

  .skip {
    font-size: 18px;
  }
}

@media screen and (max-width: 640px) {
  .loading__mainImg {
    width: 100%;
    height: auto;
  }
}

/* mv
---------------------------------------------- */
.mv {
  width: 100%;
  height: 100vh;
  height: 100svh;
  scrollbar-gutter: stable;
  position: relative;
  z-index: 1;
}
.mv::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: url('../images/bg_loading.jpg') center center/cover no-repeat;
  z-index: 0;
}
.mv__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(721 / 1920 * 100%), 721px);
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .mv::before {
    background-image: url('../images/bg_loading_sp.jpg');
  }
  .mv__catch {
    width: min(calc(308 / 375 * 100%), 308px);
  }
}

/* contents
---------------------------------------------- */
.contents {
  padding-bottom: 100vh;
  position: relative;
  z-index: 1;
}
.contentsWrap {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100%;
}
.contentsBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: .3s linear;
  z-index: 1;
}
.contentsBox__inner {
  height: 100%;
}
.layoutSpacer {
    height: 100vh;
}

/* intro
---------------------------------------------- */
.intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* opacity: 0; */
  z-index: 3;
}
.introWrap {
  height: 100%;
}
.introBox {
  height: 100%;
}
.introBox__inner {
  height: 100%;
}

.introBox__textBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
  text-align: center;
  z-index: 2;
}

.introBox__text {
  font-size: clamp(18px, 0.98rem + 0.62vw, 25px); /* 375 1500*/
  letter-spacing: 0.1em;
  line-height: 2.1;
}
.introBox__text + .introBox__text {
  margin-top: 2em;
}

.introBox__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .5);
  z-index: 1;
}

.introBox__bg {
  height: 100%;
  position: relative;
  z-index: 0;
}
.introBox__bg img {
  height: 100%;
  object-fit: cover;
}

.intro .p-caption {
  z-index: 3;
}

@media screen and (max-width: 768px) {
  .introBox__textBox {
    width: calc(340 / 375 * 100%);
  }
  .introBox__text {
    letter-spacing: 0.01em;
  }
}

/* location
---------------------------------------------- */
.location {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 4;
}
.location__textBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
  text-align: center;
  z-index: 2;
}
.location__copy {
  font-size: clamp(17px, 0.58rem + 2.04vw, 40px); /* 375 1500 */
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.location__copy sup {
  font-size: 50%;
}
.location__title {
  font-size: clamp(28px, 0.87rem + 3.73vw, 70px); /* 375 1500 */
  font-weight: 500;
  letter-spacing: 0.11em;
  margin-top: 0.5em;
}

.locationContents {
  height: 100%;
  position: relative;
  z-index: 0;
}
.locationBox {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 1;
}
.location__name {
  color: #fff;
  font-size: clamp(62px, 1.83rem + 8.71vw, 160px); /* 375 1500 */
  letter-spacing: -.04em;
  line-height: 1;
  position: absolute;
  z-index: 2;
}

.location__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .4);
  z-index: 1;
}

.location__img {
  height: 100%;
}
.location__img img {
  height: 100%;
  object-fit: cover;
}

.locationBox--osaka {
  bottom: 0;
  left: 0;
}
.location__name--osaka {
  bottom: 0;
  left: 0;
}

.locationBox--kyoto {
  top: 0;
  right: 0;
}
.location__name--kyoto {
  top: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  .locationBox {
    width: 100%;
    height: 50%;
  }
  .location__cover {
    top: 50%;
    transform: translateY(-50%);
    height: 50%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 1) 50%, rgb(0 0 0 / 0) 100%);
  }
}

/* station
---------------------------------------------- */
.station {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* height: 100lvh; */
  background: linear-gradient(to right, #DFCA99, #FAF8F3);
  padding-block: 10px;
  opacity: 0;
  z-index: 3;
}
.station__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(659 / 1920 * 100%);
  z-index: 2;
}
.station__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / .5);
  z-index: 1;
}
.station__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-height: calc(100% - 80px);
  aspect-ratio: 1920 / 910;
  text-align: center;
  z-index: 0;
}
.station__img img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .station {
    display: block;
    position: relative;
    inset: auto;
    height: auto;
    margin-top: -100vh;
    margin-top: -100svh;
    padding-block: 40px 10px;
  }
  .station__text {
    position: static;
    transform: translate(0, 0);
    width: min(calc(308 / 375 * 100%), 308px);
    margin-inline: auto;
  }
  .station__img {
    position: static;
    transform: translate(0, 0);
    max-width: 560px;
    max-height: revert;
    margin-top: 40px;
    margin-inline: auto;
    aspect-ratio: revert;
  }
  .station__img img {
    width: 100%;
    height: revert;
  }
  .station__img .p-caption {
    padding-inline: 10px;
  }
  .station__caption {
    position: static;
    width: 100%;
    text-align: left;
    padding-inline: 10px;
  }
}

/* bgWrap
---------------------------------------------- */
.bgWrap {
  position: relative;
  z-index: 0;
}
.bgWrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #E3D1A6, #F6F1E5);
  z-index: -1;
}

/* merit
---------------------------------------------- */
.merit {
  padding-block: 90px;
}
.merit__text {
  font-size: clamp(20px, 1.04rem + 0.89vw, 30px);
  letter-spacing: 0.11em;
  line-height: 2;
  text-align: center;
}
.merit__text sup {
  top: -1.5em;
  font-size: 50%;
}

@media screen and (max-width: 768px) {
  .merit {
    padding-block: 40px;
  }
}

/* shop
---------------------------------------------- */
.shopList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 768px) {
  .shopList {
    grid-template-columns: 1fr;
  }
}

/* rotary
---------------------------------------------- */
.rotary {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.rotary__textBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 1;
}
.rotary__text {
  font-size: clamp(18px, 0.98rem + 0.62vw, 25px); /* 375 1500*/
  letter-spacing: 0.1em;
  line-height: 2.1;
}
.rotary__text + .rotary__text {
  margin-top: 1em;
}
.rotary__human {
  position: absolute;
  bottom: 0;
  right: calc(100 / 1920 * 100%);
  width: calc(612 / 1920 * 100%);
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .rotary__textBox {
    position: static;
    transform: translate(0, 0);
    padding-block: 55px;
  }
  .rotary__text {
    font-size: 20px;
    padding-inline: 20px;
  }
  .rotary__human {
    right: calc(-15 / 375 * 100%);
    width: calc(312 / 375 * 100%);
  }
}

/* tower
---------------------------------------------- */
.tower {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.towerContents {
  position: absolute;
  top: 50%;
  left: calc(186 / 1920 * 100%);
  transform: translateY(-50%);
  width: calc(594 / 1920 * 100%);
  color: #fff;
  z-index: 1;
}
.tower__text {
  font-size: clamp(20px, 0.92rem + 0.68vw, 25px); /* 769 1500 */
  letter-spacing: 0.11em;
  line-height: 2.1;
  margin-top: 2em;
  text-align: center;
}
.tower__text sup {
  font-size: 50%;
}
.tower__img {
  position: absolute;
  bottom: -33%;
  right: calc(23 / 1920 * 100%);
  width: calc(1126 / 1920 * 100%);
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .towerContents {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(320 / 375 * 100%);
  }
  .tower__catch {
    width: calc(238 / 320 * 100%);
    margin-inline: auto;
  }
  .tower__text {
    line-height: 1.5;
    margin-top: 2.5em;
  }
  .tower__img {
    bottom: -20%;
    right: 51%;
    transform: translateX(50%);
    width: calc(400 / 375 * 100%);
  }
}

/* concept
---------------------------------------------- */
.concept {
  height: 100vh;
  position: relative;
  z-index: 0;
}
.concept__textBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0;
  z-index: 2;
}
.concept__text {
  font-size: clamp(20px, 0.92rem + 0.68vw, 25px); /* 769 1500 */
  letter-spacing: 0.11em;
  line-height: 2.1;
  text-align: center;
}
.concept__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgb(50 0 0 / .4);
  z-index: 1;
}
.concept__bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.concept__bg video,
.concept__bg iframe {
  min-width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.concept__bg img {
  height: 100%;
  object-fit: cover;
}

.animationContents02 {
  position: relative;
  z-index: 0;
}

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  .concept__bg iframe {
    width: calc(100% + 100px);
    height: 200%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .concept__bg iframe {
    height: calc(100% + 100px);
    width: 200%;
  }
}

@media screen and (max-width: 768px) {
  .concept {
    display: flex;
    align-items: flex-end;
    background-color: #DFCA99;
  }
  .concept::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom, #DFCA99 45%, rgb(233 220 188 / 0) 70%);
    z-index: 1;
  }
  .concept__textBox {
    top: 12%;
    transform: translateX(-50%);
    width: calc(320 / 375 * 100%);
    color: #000;
    opacity: 1;
  }
  .concept__text {
    letter-spacing: 0.01em;
  }
  .concept__bg {
    height: 70%;
  }
  .concept__bg video,
  .concept__bg iframe {
    min-height: revert;
  }
}

/* bottomAction
---------------------------------------------- */
.bottomAction {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}
.bottomActionBox01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(1035 / 1920 * 100%);
  opacity: 0;
  z-index: 1;
}
.bottomActionBox02 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  z-index: 2;
}
.bottomAction__name {
  color: #3F2021;
  font-size: clamp(20px, -0.72rem + 4.1vw, 50px); /* 769 1500 */
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
}
.bottomAction__name sup {
  top: .5em;
  font-size: max(8px, 30%);
}
.bottomAction__btnBox {
  width: 400px;
  margin-top: 30px;
  margin-inline: auto;
}
.bottomAction__btn {
  display: grid;
  place-content: center;
  row-gap: 4px;
  font-size: 24px;
  font-weight: 600;
  height: 100px;
  background-color: #3F2021;
  border-radius: 5px;
  border: 1px solid rgb(255 255 255 / .7);
  color: #fff;
  text-align: center;
  transition: .4s ease;
  position: relative;
  z-index: 0;
}
.bottomAction__btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5%;
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}
.bottomAction__btn .small {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-size: 66.66%;
  font-weight: 400;
}

.bottomAction__bg {
  height: 100%;
}
.bottomAction__bg img {
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .bottomAction__btn:hover {
    filter: brightness(1.5);
  }
}

@media screen and (max-width: 768px) {
  .bottomActionBox01 {
    width: calc(320 / 375 * 100%);
  }
  .bottomAction__btnBox {
    width: 280px;
  }
  .bottomAction__btnBox + .bottomAction__btnBox {
    margin-top: 10px;
  }
  .bottomAction__btn {
    height: 70px;
    font-size: 16px;
  }
  .bottomAction__btn::after {
    right: 8%;
  }
}

/* sp-floationgBtn
---------------------------------------------- */
@media screen and (min-width: 769px) {
  .sp-floatingBtn {
    display: none;
  }
}
.sp-floatingBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: .4s;
  z-index: 10;
}
.sp-floatingBtn.is-down {
  transform: translateY(100%);
}
.sp-floatingBtn__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: #3F2021;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 0;
}
.sp-floatingBtn__btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8%;
  width: 12px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

/* footer
---------------------------------------------- */
.tpl-footer__button {
  color: #fff;
}
/* .tpl-footer__body {
  max-width: 1600px;
}
.tpl-footer__heading {
  display: flex;
} */