@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css");
/* ==========================================================================
   Settings
   ========================================================================== */
/* ==========================================================================
   Mixins
   ========================================================================== */
/* ==========================================================================
   Animation（script.js と連動）
   ========================================================================== */
.invisible {
  visibility: hidden;
}

/*-----js-inview設定-----*/
div[class*=js-inview] {
  opacity: 0;
  transition: all 0.8s ease 0.4s;
}

div[class*=is-inview] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   Container
   ========================================================================== */
#container {
  width: calc(1280 / 1280 * 100vw);
  animation-delay: 0.3s;
}
@media screen and (max-width: 768px) {
  #container {
    width: 100%;
  }
}
#container {
  /*-----タイトル（KV・フッター共通）-----*/
}
@media screen and (max-width: 768px) {
  #container .ttl {
    margin: auto;
    width: -moz-fit-content;
    width: fit-content;
  }
}
#container .ttl .sub-ttl {
  font-family: gira-sans, sans-serif;
  font-size: calc(24 / 1280 * 100vw);
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  margin-bottom: calc(18 / 1280 * 100vw);
  color: #fff;
}
@media screen and (max-width: 768px) {
  #container .ttl .sub-ttl {
    font-size: calc(16 / 390 * 100vw);
    margin-bottom: calc(10 / 390 * 100vw);
  }
}
#container .ttl h1 {
  font-family: gira-sans, sans-serif;
  font-size: calc(38 / 1280 * 100vw);
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #container .ttl h1 {
    font-size: calc(25 / 390 * 100vw);
  }
}
#container {
  /*-----KV / フッター共通-----*/
}
#container .kvsec,
#container .footer {
  position: relative;
  width: 100%;
}
#container .kvsec-img .pc,
#container .footer-img .pc {
  display: flex;
}
#container .kvsec-img .sp,
#container .footer-img .sp {
  display: none;
}
@media screen and (max-width: 768px) {
  #container .kvsec-img .pc,
  #container .footer-img .pc {
    display: none;
  }
  #container .kvsec-img .sp,
  #container .footer-img .sp {
    display: block;
  }
}
#container .kvsec-img .pc,
#container .footer-img .pc {
  flex-flow: wrap;
}
#container .kvsec-img .pc img,
#container .footer-img .pc img {
  width: 50%;
}
#container .kvsec-ttl,
#container .footer-ttl {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
}
#container {
  /*-----KV-----*/
}
#container .kvsec-ttl {
  left: calc(101 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .kvsec-ttl {
    top: unset;
    bottom: calc(25 / 390 * 100vw);
    left: 0;
    right: 0;
  }
}
#container {
  /*-----KV：読み込み後、画像 → タイトルの順にフェードイン-----*/
}
#container .kvsec-img, #container .kvsec-ttl {
  opacity: 0;
  transition: opacity 1.2s ease;
}
#container .kvsec-ttl {
  transition-delay: 1.2s;
}
#container .kvsec.is-loaded .kvsec-img,
#container .kvsec.is-loaded .kvsec-ttl {
  opacity: 1;
}
#container {
  /*-----Lead-----*/
}
#container .lead-img .pc {
  display: block;
}
#container .lead-img .sp {
  display: none;
}
@media screen and (max-width: 768px) {
  #container .lead-img .pc {
    display: none;
  }
  #container .lead-img .sp {
    display: block;
  }
}
#container {
  /*-----Look-----*/
}
#container .look {
  position: relative;
  width: calc(1280 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .look {
    width: 100%;
  }
}
#container .look-flex {
  display: flex;
}
@media screen and (max-width: 768px) {
  #container .look-flex {
    display: block;
  }
}
#container .look-flex_img {
  width: 50%;
}
@media screen and (max-width: 768px) {
  #container .look-flex_img {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
  }
}
#container .look-flex_swiper {
  position: relative;
}
#container {
  /*-----Footer-----*/
}
#container .footer-ttl {
  right: calc(101 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .footer-ttl {
    left: 0;
    right: 0;
  }
}
#container .footer-link {
  font-family: linotype-didot, serif;
  font-size: calc(16 / 1280 * 100vw);
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  position: absolute;
  bottom: calc(25 / 1280 * 100vw);
  left: calc(124 / 1280 * 100vw);
  display: flex;
  flex-flow: nowrap;
  gap: calc(34 / 1280 * 100vw);
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #container .footer-link {
    font-size: calc(12 / 390 * 100vw);
    left: 0;
    right: 0;
    bottom: calc(40 / 390 * 100vw);
    gap: calc(15 / 390 * 100vw);
  }
}
#container .footer-link a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  #container .footer-link a:hover {
    opacity: 0.6;
  }
}
#container .footer-copy {
  font-family: linotype-didot, serif;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
  position: absolute;
  bottom: calc(25 / 1280 * 100vw);
  right: calc(215 / 1280 * 100vw);
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #container .footer-copy {
    bottom: calc(15 / 390 * 100vw);
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   Modal ※モーダルを開いたままでも背面はスクロール可能
   ========================================================================== */
section#modalWrap {
  position: relative;
}
section#modalWrap .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 299;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.48);
}
section#modalWrap .modal-content {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

/*-----クレジット-----*/
.credit-each {
  font-family: gira-sans, sans-serif;
  font-size: calc(16 / 1280 * 100vw);
  font-weight: 500;
  font-style: normal;
  line-height: normal;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(12 / 1280 * 100vw);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .credit-each {
    font-size: calc(12 / 390 * 100vw);
    gap: calc(8 / 390 * 100vw);
  }
}
.credit-each a {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: calc(15 / 1280 * 100vw);
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 768px) {
  .credit-each a {
    font-size: calc(11 / 390 * 100vw);
  }
}
@media (hover: hover) {
  .credit-each a:hover {
    opacity: 0.6;
  }
}

/*-----トグル（＋）とモーダル閉じ（×）：同じ位置・同じサイズ-----*/
.btn-open, .btn-close {
  position: fixed;
  top: calc(60 / 1280 * 100vw);
  right: calc(60 / 1280 * 100vw);
  width: calc(60 / 1280 * 100vw);
  height: calc(60 / 1280 * 100vw);
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .btn-open, .btn-close {
    width: calc(38 / 390 * 100vw);
    height: calc(38 / 390 * 100vw);
    top: calc(30 / 390 * 100vw);
    right: calc(30 / 390 * 100vw);
  }
}
.btn-open::before, .btn-open::after, .btn-close::before, .btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
}
.btn-open {
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.btn-open.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.btn-open::before {
  width: 100%;
  height: 1px;
  transform: translate(-50%, -50%);
}
.btn-open::after {
  width: 1px;
  height: 100%;
  transform: translate(-50%, -50%);
}
.btn-close {
  z-index: 100;
}
.btn-close::before, .btn-close::after {
  width: 100%;
  height: 1px;
}
.btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}/*# sourceMappingURL=style.css.map */