@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

.fnt-cormorant-garamond {
   font-family: "Cormorant Garamond", serif;
   font-optical-sizing: auto;
   font-style: normal;
}

@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.page .fadeInUp {
   animation-name: fadeInUp;
   animation-duration: 1s;
   animation-delay: 0.3s;
}

.txt-vertical {
   cursor: vertical-text;
   writing-mode: vertical-rl;
   -o-writing-mode: vertical-rl;
   -ms-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   -moz-writing-mode: vertical-rl;
   -webkit-writing-mode: vertical-rl;
   text-orientation: upright;
   word-wrap: break-word;
}

.txt-latin {
   cursor: vertical-text;
   direction: rtl;
   writing-mode: vertical-rl;
   -o-writing-mode: vertical-rl;
   -ms-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   -moz-writing-mode: vertical-rl;
   -webkit-writing-mode: vertical-rl;
   text-orientation: sideways-right;
   -o-text-orientation: sideways-right;
   -ms-text-orientation: upright;
   -ms-text-orientation: sideways-right;
   -moz-text-orientation: sideways-right;
   -webkit-text-orientation: sideways-right;
   letter-spacing: 0.25em;
}

.txt-vertical-latin {
   cursor: vertical-text;
   direction: rtl;
   writing-mode: vertical-rl;
   -o-writing-mode: vertical-rl;
   -ms-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   -moz-writing-mode: vertical-rl;
   -webkit-writing-mode: vertical-rl;
   text-orientation: sideways-right;
   -o-text-orientation: sideways-right;
   -ms-text-orientation: upright;
   -ms-text-orientation: sideways-right;
   -moz-text-orientation: sideways-right;
   -webkit-text-orientation: sideways-right;
}

.page {
   background: #fff;
   font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0;
   color: #1A1818;
}

.img-obj {
   width: 100%;
   max-width: inherit;
   height: 100%;
   object-fit: cover;
}

.sp {
   display: none;
}

@media screen and (max-width: 769px) {
   .sp {
      display: block;
   }
}

.kv {
   display: flex;
   align-items: center;
   justify-content: center;
   height: calc(100vh - 70px);
   color: #fff;
   position: relative;
}

.kv img {
   position: absolute;
   top: 0;
   left: 0;
   object-position: top center;
}

.kv-title {
   font-weight: 400;
   font-size: 82px;
   line-height: 108px;
   letter-spacing: 0.2em;
   position: relative;
   text-align: center;
   padding-top: 15vw;
}

.kv-title span {
   display: block;
   font-style: italic;
   font-size: 32px;
   letter-spacing: 0.2em;
   line-height: 32px;
}

.kv-title small {
   display: block;
   font-weight: 300;
   font-style: italic;
   font-size: 22px;
   line-height: 26px;
   letter-spacing: 0.2em;
}

.kv-scroll-down {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 14px;
   height: 190px;
   font-weight: 400;
   font-size: 12px;
   line-height: 14px;
   letter-spacing: 0.2em;
   position: absolute;
   bottom: 0;
   right: 5%;
   cursor: pointer;
}

.kv-scroll-down>* {
   cursor: pointer;
}

.kv-scroll-down .line {
   display: block;
   width: 1px;
   height: 140px;
   background-color: rgba(255, 255, 255, 0.6);
   position: relative;
   overflow: hidden;
}

.kv-scroll-down .line:after {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
   animation: sdl 2s ease infinite;
}

@keyframes sdl {
   0% {
      transform: translateY(-50%);
   }

   100% {
      transform: translateY(110%);
   }
}

@media screen and (max-width: 769px) {
   .kv {
      height: calc(100vh - 64px);
   }

   .kv-title {
      font-size: 54px;
      line-height: 54px;
      padding-top: 0;
   }

   .kv-title span {
      font-size: 26px;
   }

   .kv-scroll-down {
      height: 145px;
   }
}

.banner {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 7vw;
   background-color: #1E1E1E;
   padding: 78px 5% 94px;
}

.banner-item {
   display: block;
   color: #fff;
   position: relative;
}

.banner-item-txt {
   display: block;
   width: max-content;
   position: absolute;
   top: 50%;
   right: 45px;
   transform: translateY(-50%);
}

.banner-item-txt small {
   display: block;
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
   letter-spacing: 0.2em;
   padding-bottom: 7px;
}

.banner-item-txt small i {
   font-style: italic;
}

.banner-item-txt span {
   display: grid;
   grid-template-columns: auto 29px;
   align-items: center;
   gap: 14px;
   font-weight: 400;
   font-size: 32px;
   line-height: 32px;
   letter-spacing: 0.2em;
}

@media screen and (max-width: 769px) {
   .banner {
      padding: 36px 7.2% 80px;
      gap: 7.2vw;
   }

   .banner-item .img-obj {
      height: auto;
   }

   .banner-item-txt {
      position: relative;
      top: 0;
      right: 0;
      transform: translateY(0);
      padding-top: 10px;
   }

   .banner-item-txt small {
      font-size: 9px;
      line-height: 10px;
      padding-bottom: 5px;
   }

   .banner-item-txt span {
      grid-template-columns: auto 21px;
      gap: 10px;
      font-size: 23px;
      line-height: 23px;
   }
}