@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css");
@import url("https://fonts.googleapis.com/css2?family=Alice&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://use.typekit.net/oga5vvx.css");
/*-----アニメーション設定ここから-----*/
.invisible {
  visibility: hidden;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadein {
  opacity: 0;
  transform: translate(0, 0px);
  transition: all 0.8s ease;
}
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/*-----js-inview設定ここから-----*/
div[class*=js-inview] {
  opacity: 0;
  transition: all 1.3s ease-out 0.6s, transform 0.8s ease 0.4s;
  transform: translate3d(0, 0, 0);
}
div[class*=js-inview].js-inview_fromLeft {
  transform: translate3d(-15%, 0, 0);
}
div[class*=js-inview].js-inview_fromRight {
  transform: translate3d(15%, 0, 0);
}

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

/*-----ディレイ用設定ここから-----*/
:root {
  --speed-delay: 0.5s;
}

.ani-delay {
  transition-delay: calc(var(--speed-delay) * var(--i, 0)) !important;
  animation-delay: calc(var(--speed-delay) * var(--i, 0)) !important;
}

/*-----ディレイ用設定ここまで-----*/
#container {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 210%;
}
@media screen and (min-width: 769px) {
  #container {
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #container::-webkit-scrollbar {
    display: none;
  }
  #container img,
  #container svg {
    width: auto;
    height: 100%;
    vertical-align: bottom;
  }
}
@media screen and (max-width: 768px) {
  #container {
    height: auto;
    width: 100%;
    white-space: unset;
    -ms-overflow-style: auto;
    scrollbar-width: auto;
  }
  #container::-webkit-scrollbar {
    display: block;
  }
  #container img,
  #container svg {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}
#container .sz-80 {
  height: 70vh;
}
@media screen and (max-width: 768px) {
  #container .sz-80 {
    height: auto;
    width: 80%;
    margin: auto;
  }
}
#container .sz-50 {
  height: 50vh;
}
@media screen and (max-width: 768px) {
  #container .sz-50 {
    width: 50%;
    height: auto;
    margin: auto;
  }
}
#container .sz-H {
  height: 100vh;
}
@media screen and (max-width: 768px) {
  #container .sz-H {
    width: 50%;
    height: auto;
    margin: auto;
  }
}
#container .sz-F {
  height: 90vh;
}
@media screen and (max-width: 768px) {
  #container .sz-F {
    height: auto;
    width: 100%;
    margin: auto;
  }
}
#container .contents {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #container .contents {
    display: block;
    height: auto;
    width: 100%;
  }
}
#container .contents .kvsec {
  position: relative;
  height: 90vh;
  padding-left: calc(50 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .kvsec {
    height: auto;
    width: 100%;
    padding-left: 0;
    margin-bottom: calc(50 / 390 * 100vw);
  }
}
#container .contents .kvsec-img {
  position: relative;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  #container .contents .kvsec-img {
    height: auto;
  }
}
#container .contents .kvsec-ttl {
  color: #fff;
  position: absolute;
  margin: calc(40 / 1280 * 100vw) auto auto calc(30 / 1280 * 100vw);
  inset: 0;
  z-index: 5;
  width: -moz-fit-content;
  width: fit-content;
  height: calc(440 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .kvsec-ttl {
    height: calc(287 / 390 * 100vw);
    margin: calc(34 / 390 * 100vw) auto auto calc(26 / 390 * 100vw);
  }
}
#container .contents .lead {
  font-size: calc(10 / 1280 * 100vw);
  margin: auto calc(150 / 1280 * 100vw) calc(50 / 1280 * 100vw) calc(50 / 1280 * 100vw);
}
#container .contents .lead p {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(40 / 1280 * 100vw);
  margin: 0 auto calc(30 / 1280 * 100vw) 0;
}
@media screen and (max-width: 768px) {
  #container .contents .lead p {
    font-size: calc(34 / 390 * 100vw);
    margin: 0 auto calc(30 / 390 * 100vw) 0;
  }
}
@media screen and (max-width: 768px) {
  #container .contents .lead {
    font-size: calc(10 / 390 * 100vw);
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto calc(100 / 390 * 100vw);
    padding: 0 calc(60 / 390 * 100vw);
  }
}
#container .contents .look {
  margin-right: calc(250 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .look {
    margin: 0 auto calc(80 / 390 * 100vw);
  }
}
#container .contents .look .flex {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #container .contents .look .flex {
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  #container .contents .look-A .look-credit {
    width: 80%;
    margin: calc(20 / 390 * 100vw) auto auto auto;
  }
  #container .contents .look-A .mg-T {
    margin-top: -1px;
  }
  #container .contents .look-A .mg-T .swiper {
    aspect-ratio: auto;
  }
}
#container .contents .look-B {
  padding: 0 calc(100 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .look-B {
    padding: calc(60 / 390 * 100vw) 0;
  }
}
#container .contents .look-C {
  display: flex;
}
@media screen and (max-width: 768px) {
  #container .contents .look-C {
    flex-direction: column;
  }
}
#container .contents .look-C .look-credit {
  margin: auto auto 0 calc(20 / 1280 * 100vw);
}
#container .contents .look-C .look-credit .credit-each {
  flex-wrap: nowrap;
}
@media screen and (max-width: 768px) {
  #container .contents .look-C .look-credit .credit-each {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  #container .contents .look-C .look-credit {
    margin: calc(20 / 390 * 100vw) auto auto auto;
    width: 80%;
  }
}
@media screen and (max-width: 768px) {
  #container .contents .look-D {
    padding: calc(60 / 390 * 100vw) 0;
  }
  #container .contents .look-D .flex {
    flex-wrap: wrap;
    flex-direction: row;
  }
}
#container .contents .info {
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding: calc(50 / 1280 * 100vw);
  text-align: center;
  margin-right: calc(170 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .info {
    width: -moz-fit-content;
    width: fit-content;
    padding: calc(30 / 390 * 100vw) 0;
    margin: calc(50 / 390 * 100vw) auto;
    border-right: unset;
    border-left: unset;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
}
#container .contents .info-each {
  font-size: calc(11 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .info-each {
    font-size: calc(11 / 390 * 100vw);
  }
}
#container .contents .info-each:first-child {
  margin-bottom: calc(30 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .info-each:first-child {
    margin-bottom: calc(30 / 390 * 100vw);
  }
}
#container .contents .info-each_ttl {
  font-size: calc(15 / 1280 * 100vw);
  font-weight: 500;
  margin-bottom: calc(10 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .info-each_ttl {
    font-size: calc(15 / 390 * 100vw);
    margin-bottom: calc(10 / 390 * 100vw);
  }
}
#container .contents .info-each a {
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#container .contents .last-bg {
  position: relative;
  width: auto;
  height: 70%;
  margin-right: calc(170 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .last-bg {
    width: calc(258 / 390 * 100vw);
    margin: 0 auto calc(50 / 390 * 100vw);
    height: auto;
  }
}
#container .contents .last-txt {
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: calc(100 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .last-txt {
    margin: auto auto calc(10 / 390 * 100vw) auto;
    padding-right: 0;
  }
}
#container .contents .last-txt .logo-1 {
  width: calc(130 / 1280 * 100vw);
  margin: 0 auto calc(20 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .last-txt .logo-1 {
    width: calc(117 / 390 * 100vw);
    margin: 0 auto calc(20 / 390 * 100vw);
  }
}
#container .contents .last-txt .logo-2 {
  width: calc(200 / 1280 * 100vw);
  margin: 0 auto calc(40 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .last-txt .logo-2 {
    width: calc(230 / 390 * 100vw);
    margin: 0 auto calc(40 / 390 * 100vw);
  }
}
#container .contents .last-txt ul {
  display: flex;
  justify-content: center;
  font-size: calc(15 / 1280 * 100vw);
  margin-bottom: calc(140 / 1280 * 100vw);
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #container .contents .last-txt ul {
    font-size: calc(14 / 390 * 100vw);
    margin-bottom: calc(116 / 390 * 100vw);
  }
}
#container .contents .last-stcr {
  font-size: calc(13 / 1280 * 100vw);
  text-align: center;
  margin: auto;
  line-height: 180%;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-right: calc(170 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .last-stcr {
    font-size: calc(12 / 390 * 100vw);
    margin: calc(100 / 390 * 100vw) auto;
  }
}
#container .contents .copyright {
  text-align: center;
  font-size: calc(12 / 1280 * 100vw);
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #container .contents .copyright {
    font-size: calc(10 / 390 * 100vw);
  }
}
#container .contents .look-credit {
  font-family: "din-condensed-variable", sans-serif;
  font-variation-settings: "wght" 300;
  font-style: normal;
  font-size: calc(11 / 1280 * 100vw);
  line-height: 100%;
  margin: calc(20 / 1280 * 100vw) auto auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(7 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .look-credit {
    gap: calc(7 / 390 * 100vw);
    font-size: calc(11 / 390 * 100vw);
  }
}
#container .contents .look-credit .credit-each {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(10 / 1280 * 100vw);
  align-items: baseline;
}
@media screen and (max-width: 768px) {
  #container .contents .look-credit .credit-each {
    gap: calc(15 / 390 * 100vw);
  }
}
#container .contents .look-credit .credit-each a {
  display: block;
  border: 1px solid black;
  padding: calc(1 / 1280 * 100vw) calc(18 / 1280 * 100vw);
  border-radius: 10px;
  padding-left: calc(15 / 1280 * 100vw);
}
@media screen and (max-width: 768px) {
  #container .contents .look-credit .credit-each a {
    padding: calc(1 / 390 * 100vw) calc(16 / 390 * 100vw);
  }
}
#container .contents .look-credit .credit-each a:hover {
  background-color: #000;
  color: #fff;
  transition: background-color 0.3s linear;
}
#container .swiper {
  height: 100%;
  aspect-ratio: 4/5;
  width: auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #container .swiper {
    width: 100%;
    height: auto;
  }
}
#container .swiper-wrapper,
#container .swiper-slide {
  height: 100%;
}
@media screen and (max-width: 768px) {
  #container .swiper-wrapper,
  #container .swiper-slide {
    height: auto;
  }
}
#container .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
}
@media screen and (max-width: 768px) {
  #container .swiper-slide img {
    height: auto;
  }
}/*# sourceMappingURL=style.css.map */