@charset "UTF-8";
/*リセット
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*メディアクエリー
---------------------------------------------*/
/*変数
---------------------------------------------*/
/* W3:300, W6:600 */
/* コンテンツ
---------------------------------------------*/
html,
body,
#wrapper {
  width: 100%;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
@media screen and (min-width: 769px) {
  html,
  body,
  #wrapper {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  html,
  body,
  #wrapper {
    font-size: 12px;
  }
}
html a,
body a,
#wrapper a {
  text-decoration: none;
  color: #000000;
}
@media screen and (min-width: 769px) {
  html a,
  body a,
  #wrapper a {
    cursor: pointer;
  }
}

img {
  width: 100%;
  display: block;
}

video {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none;
  }
}

/* 全体 -------------------------------------------------------- */
.main {
  overflow: clip;
  opacity: 0;
}

/* Fv -------------------------------------------------------- */
.fv {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
}
.fv::before {
  content: "";
  background-image: url(../images/fv_bg.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 100%;
}
.fv__img {
  position: absolute;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .fv__img {
    top: 8%;
    height: 68%;
    border-top: solid 0.7633587786vw #fff;
    border-bottom: solid 0.7633587786vw #fff;
  }
}
@media screen and (min-width: 769px) {
  .fv__img {
    top: 12%;
    height: 65%;
    border-top: solid 0.15625vw #fff;
    border-bottom: solid 0.15625vw #fff;
  }
}
.fv__img__wrapper {
  height: 100%;
  overflow: clip;
  position: relative;
}
@media screen and (max-width: 768px) {
  .fv__img__wrapper {
    width: 793.1297709924vw;
  }
}
@media screen and (min-width: 769px) {
  .fv__img__wrapper {
    width: 231.3020833333vw;
  }
}
.fv__img__wrapper .fv__img__inner {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.fv__img__wrapper .fv__img__inner figure {
  height: 100%;
}
.fv__img__wrapper .fv__img__inner figure picture {
  height: 100%;
}
.fv__img__wrapper .fv__img__inner figure picture source {
  height: 100%;
}
.fv__img__wrapper .fv__img__inner figure picture img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: auto;
}
.fv__img__wrapper .fv__img__inner figure picture img.js-pan {
  animation: pan 28s ease-out forwards;
}
@media screen and (max-width: 768px) {
  @keyframes pan {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(100vw - 100%));
    }
  }
}
@media screen and (min-width: 769px) {
  @keyframes pan {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(100vw - 100%));
    }
  }
}
.fv__ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .fv__ttl {
    width: 95.6743002545vw;
    top: 42%;
  }
}
@media screen and (min-width: 769px) {
  .fv__ttl {
    width: 40.46875vw;
    top: 45%;
  }
}
.fv__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .fv__logo {
    width: 63.6132315522vw;
    bottom: 6%;
  }
}
@media screen and (min-width: 769px) {
  .fv__logo {
    width: 15.8854166667vw;
    bottom: 7%;
  }
}
.fv__logo .fv__txt {
  text-align: center;
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
}
@media screen and (max-width: 768px) {
  .fv__logo .fv__txt {
    font-size: 3.0534351145vw;
    margin-top: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  .fv__logo .fv__txt {
    font-size: 0.6770833333vw;
    margin-top: 1.1458333333vw;
  }
}

/* メインコンテンツ -------------------------------------------------------- */
.main-content {
  background-color: #ffffff;
  position: relative;
  z-index: 2;
}

.sticky_under {
  position: relative;
  z-index: 5;
}

/* credit -------------------------------------------------------- */
.credit {
  width: 330px;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .credit {
    margin: 7.6335877863vw auto 0;
  }
}
@media screen and (min-width: 769px) {
  .credit {
    width: 17.2916666667vw;
  }
}
.credit ul li {
  margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
  .credit ul li {
    margin-bottom: 0.5208333333vw;
  }
}
.credit ul li:last-child {
  margin-bottom: 0;
}
.credit ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: solid 1px #707070;
  padding-bottom: 2px;
}
@media screen and (min-width: 769px) {
  .credit ul li a {
    margin-bottom: 0.1041666667vw;
  }
}
.credit ul li a p {
  font-size: 12px;
  text-wrap: nowrap;
  color: #707070;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
}
@media screen and (min-width: 769px) {
  .credit ul li a p {
    font-size: 0.625vw;
  }
}
.credit ul li a p.item {
  width: 42%;
}
@media screen and (max-width: 768px) {
  .credit ul li a p.item span {
    font-size: max(2.0356234097vw, 8px);
  }
}
@media screen and (min-width: 769px) {
  .credit ul li a p.item span {
    font-size: max(0.4166666667vw, 8px);
  }
}
.credit ul li a p.brand {
  width: 31%;
}
.credit ul li a p.brand.small-brand-name {
  font-size: 10px;
}
@media screen and (min-width: 769px) {
  .credit ul li a p.brand.small-brand-name {
    font-size: 0.5208333333vw;
  }
}
.credit ul li a p.price {
  text-align: right;
  width: 28%;
}
.credit ul li a .btn {
  border: 1px solid black;
  background-color: black;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
  flex-shrink: 0;
  transition: 0.3s ease;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
}
@media screen and (min-width: 769px) {
  .credit ul li a .btn {
    line-height: 1.1979166667vw;
    margin-left: 0.6770833333vw;
    font-size: 0.625vw;
    width: 2.8645833333vw;
  }
}
@media screen and (max-width: 768px) {
  .credit ul li a .btn {
    line-height: 23px;
    margin-left: 13px;
    font-size: 12px;
    width: 55px;
  }
}
.credit ul li a.cs {
  pointer-events: none;
}
.credit ul li a.cs .btn {
  border: none;
  background: none;
  color: #707070;
  line-height: 1.2;
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
}
@media screen and (max-width: 768px) {
  .credit ul li a.cs .btn {
    font-size: 10px;
  }
}
@media screen and (min-width: 769px) {
  .credit ul li a.cs .btn {
    font-size: 0.625vw;
  }
}

/* look -------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .look {
    margin-bottom: 20.3562340967vw;
  }
}

/* look1 -------------------------------------------------------- */
.look-1 .bg {
  position: relative;
}
.look-1 .bg picture img {
  display: block;
}
@media screen and (min-width: 769px) {
  .look-1 .bg picture img {
    height: 55.9895833333vw;
  }
}
.look-1 .bg__txt {
  position: absolute;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .look-1 .bg__txt {
    width: 86.5139949109vw;
    top: 26.9720101781vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 769px) {
  .look-1 .bg__txt {
    width: 22.2395833333vw;
    top: 24.375vw;
    left: 14.3229166667vw;
  }
}
@media screen and (max-width: 768px) {
  .look-1 .bg__txt__text {
    margin-top: 6.8702290076vw;
  }
}
@media screen and (min-width: 769px) {
  .look-1 .bg__txt__text {
    margin-top: 2.03125vw;
  }
}
@media screen and (min-width: 769px) {
  .look-1 .img__wrapper {
    position: absolute;
    top: 0;
    right: 12.03125vw;
  }
}
.look-1 .img__wrapper .img-1 {
  clip-path: inset(0 100% 0 0); /* 左から右 */
  transition: clip-path 1s ease;
}
.look-1 .img__wrapper .img-1.active {
  clip-path: inset(0% 0% 0% 0%);
}
.look-1 .img__wrapper .img-1 ul {
  overflow: clip;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .look-1 .img__wrapper .img-1 ul {
    width: 100vw;
    height: 147.582697201vw;
  }
}
@media screen and (min-width: 769px) {
  .look-1 .img__wrapper .img-1 ul {
    width: 37.96875vw;
    height: 55.9895833333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-1 .credit {
    margin-top: 1.7708333333vw;
    margin-right: 12.03125vw;
    margin-left: auto;
  }
}

/* look2 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-2 {
    width: 57.5520833333vw;
    margin: 0 auto 17.6041666667vw;
  }
}
.look-2 .img__wrapper {
  position: relative;
}
@media screen and (max-width: 768px) {
  .look-2 .img__wrapper .movie {
    width: 60.0508905852vw;
    height: 75.3180661578vw;
    margin-bottom: 6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  .look-2 .img__wrapper .movie {
    width: 22.2395833333vw;
    height: 27.9166666667vw;
  }
}
.look-2 .img__wrapper .img-1 {
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .look-2 .img__wrapper .img-1 {
    width: 71.2468193384vw;
    margin-bottom: 6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  .look-2 .img__wrapper .img-1 {
    width: 26.3541666667vw;
    margin-top: -13.9583333333vw;
    margin-bottom: 1.7708333333vw;
  }
}
@media screen and (max-width: 768px) {
  .look-2 .img__wrapper .img-2 ul {
    width: 100vw;
    height: 136.3867684478vw;
  }
}
@media screen and (min-width: 769px) {
  .look-2 .img__wrapper .img-2 ul {
    width: 37.03125vw;
    height: 50.5208333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-2 .img__wrapper .credit {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

/* look3 -------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .look-3 {
    margin-bottom: 21.8829516539vw;
  }
}
@media screen and (min-width: 769px) {
  .look-3 {
    width: 57.5520833333vw;
    margin: 0 auto 17.6041666667vw;
  }
}
@media screen and (max-width: 768px) {
  .look-3 {
    margin-bottom: 21.8829516539vw;
    min-height: 500px;
  }
}
@media screen and (max-width: 768px) {
  .look-3 .img__wrapper .img-1 {
    width: 100vw;
  }
}
@media screen and (min-width: 769px) {
  .look-3 .img__wrapper .img-1 {
    width: 37.03125vw;
    height: 17.65625vw;
    margin-left: auto;
  }
}
@media screen and (min-width: 769px) {
  .look-3 .img__wrapper .flex {
    display: flex;
    align-items: end;
    justify-content: space-between;
  }
}
@media screen and (min-width: 769px) {
  .look-3 .img__wrapper .flex .img-2 {
    width: 37.03125vw;
  }
}

/* look4 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-4 {
    width: 57.5520833333vw;
    margin: 0 auto 17.6041666667vw;
  }
}
@media screen and (max-width: 768px) {
  .look-4 {
    min-height: 700px;
  }
}
@media screen and (min-width: 769px) {
  .look-4 .img__wrapper {
    display: grid;
    grid-template-columns: 18.6979166667vw 37.03125vw;
    -moz-column-gap: 1.8229166667vw;
         column-gap: 1.8229166667vw;
    height: 47.1354166667vw;
    align-items: end;
  }
}
@media screen and (max-width: 768px) {
  .look-4 .img__wrapper .img-1 {
    width: 67.9389312977vw;
    height: 81.9338422392vw;
    margin: 0 auto 12.7226463104vw;
  }
}
@media screen and (min-width: 769px) {
  .look-4 .img__wrapper .img-1 {
    width: 18.6979166667vw;
    height: 22.5520833333vw;
    order: 1;
    margin-bottom: auto;
  }
}
@media screen and (max-width: 768px) {
  .look-4 .img__wrapper .img-2 {
    width: 100vw;
    height: 127.2264631043vw;
  }
}
@media screen and (min-width: 769px) {
  .look-4 .img__wrapper .img-2 {
    grid-row: 1/3;
    order: 2;
    width: 37.03125vw;
    height: 47.1354166667vw;
  }
}
@media screen and (min-width: 769px) {
  .look-4 .img__wrapper .credit {
    grid-row: 2/3;
    margin-left: auto;
  }
}

/* look5 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-5 {
    margin-bottom: 11.1979166667vw;
  }
}
.look-5 .img__wrapper .slider {
  line-height: 0;
  font-size: 0;
}
@media screen and (max-width: 768px) {
  .look-5 .img__wrapper .flex {
    width: 100vw;
    margin-top: 0.7633587786vw;
  }
}
@media screen and (min-width: 769px) {
  .look-5 .img__wrapper .flex {
    display: flex;
    justify-content: space-between;
    align-items: end;
    width: 51.3541666667vw;
    margin: 4.1666666667vw auto 0;
    height: 41.25vw;
  }
}
@media screen and (max-width: 768px) {
  .look-5 .img__wrapper .flex .img-2 {
    width: 100vw;
    height: 127.2264631043vw;
  }
}
@media screen and (min-width: 769px) {
  .look-5 .img__wrapper .flex .img-2 {
    width: 32.4479166667vw;
    height: 41.25vw;
  }
}

/* look6 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-6 {
    width: 51.3541666667vw;
    margin: 0 auto 11.1979166667vw;
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
}
@media screen and (max-width: 768px) {
  .look-6 .img__wrapper .img-1 {
    width: 84.7328244275vw;
    margin: 0 auto;
  }
}
@media screen and (min-width: 769px) {
  .look-6 .img__wrapper .img-1 {
    width: 32.4479166667vw;
  }
}

/* look7 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-7 {
    width: 57.5520833333vw;
    margin: 0 auto 6.9270833333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-7 .img__wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1.7708333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-7 .img__wrapper .img-1 {
    width: 28.6458333333vw;
  }
}
@media screen and (max-width: 768px) {
  .look-7 .img__wrapper .img-2 {
    margin-top: 0.7633587786vw;
    margin-bottom: 0.7633587786vw;
  }
}
@media screen and (min-width: 769px) {
  .look-7 .img__wrapper .img-2 {
    width: 28.6458333333vw;
    margin-top: 0.2604166667vw;
  }
}
@media screen and (min-width: 769px) {
  .look-7 .img__wrapper .img-3 {
    width: 28.6458333333vw;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 769px) {
  .look-7 .credit {
    margin-left: auto;
  }
}

/* look8 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-8 {
    width: 57.5520833333vw;
    margin: 0 auto 4.4270833333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-8 .img__wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.7708333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-8 .img__wrapper .img-1 {
    width: 28.6458333333vw;
  }
}
@media screen and (max-width: 768px) {
  .look-8 .img__wrapper .img-2 {
    margin-top: 0.7633587786vw;
  }
}
@media screen and (min-width: 769px) {
  .look-8 .img__wrapper .img-2 {
    width: 28.6458333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-8 .credit {
    margin-left: auto;
  }
}

/* look9 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-9 {
    width: 57.5520833333vw;
    margin: 0 auto 13.5416666667vw;
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
}
@media screen and (max-width: 768px) {
  .look-9 .img__wrapper .img-1 {
    width: 100vw;
    height: 125.6997455471vw;
  }
}
@media screen and (min-width: 769px) {
  .look-9 .img__wrapper .img-1 {
    width: 37.6041666667vw;
    height: 47.2916666667vw;
  }
}

/* look10 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-10 {
    width: 36.4583333333vw;
    margin: 0 auto 10.9375vw;
  }
}
@media screen and (min-width: 769px) {
  .look-10 .credit {
    margin-top: 1.7708333333vw;
    margin-left: auto;
  }
}

/* look11 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-11 {
    width: 51.3541666667vw;
    margin: 0 auto 5.46875vw;
  }
}
@media screen and (min-width: 769px) {
  .look-11 .img__wrapper {
    margin-bottom: 1.7708333333vw;
  }
}
.look-11 .img__wrapper .img-1 {
  position: relative;
}
@media screen and (max-width: 768px) {
  .look-11 .img__wrapper .img-1 {
    width: 100vw;
    height: 113.9949109415vw;
    margin-bottom: 8.3969465649vw;
  }
}
@media screen and (min-width: 769px) {
  .look-11 .img__wrapper .img-1 {
    width: 36.4583333333vw;
    margin: 0 auto 9.1145833333vw;
  }
}
.look-11 .img__wrapper .img-1 .img {
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .look-11 .img__wrapper .img-1 .img {
    width: 91.0941475827vw;
    top: 9.1603053435vw;
  }
}
@media screen and (min-width: 769px) {
  .look-11 .img__wrapper .img-1 .img {
    width: 33.1770833333vw;
    top: 3.3854166667vw;
  }
}
.look-11 .img__wrapper .img-1 .bg {
  position: relative;
  z-index: 0;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .look-11 .img__wrapper .img-1 .bg {
    width: 91.0941475827vw;
  }
}
@media screen and (min-width: 769px) {
  .look-11 .img__wrapper .img-1 .bg {
    width: 33.1770833333vw;
  }
}
.look-11 .img__wrapper .flex {
  display: grid;
}
@media screen and (max-width: 768px) {
  .look-11 .img__wrapper .flex {
    grid-template-columns: 64.3765903308vw 34.8600508906vw;
    -moz-column-gap: 0.7633587786vw;
         column-gap: 0.7633587786vw;
  }
}
@media screen and (min-width: 769px) {
  .look-11 .img__wrapper .flex {
    grid-template-columns: 33.125vw 17.96875vw;
    -moz-column-gap: 0.15625vw;
         column-gap: 0.15625vw;
  }
}
@media screen and (max-width: 768px) {
  .look-11 .img__wrapper .flex .movie {
    width: 34.8600508906vw;
  }
}
@media screen and (min-width: 769px) {
  .look-11 .img__wrapper .flex .movie {
    width: 17.96875vw;
  }
}

/* look12 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-12 {
    width: 51.3541666667vw;
    margin: 0 auto 6.4583333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-12 .img__wrapper {
    width: 36.1979166667vw;
    margin-left: auto;
    margin-bottom: 1.7708333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-12 .credit {
    margin-left: auto;
  }
}

/* look13 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-13 {
    width: 51.3541666667vw;
    margin: 0 auto 6.4583333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-13 .img__wrapper {
    width: 36.1979166667vw;
    margin-bottom: 1.7708333333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-13 .img__wrapper .credit {
    margin-top: 1.7708333333vw;
    margin-left: auto;
  }
}

/* look14 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-14 {
    width: 42.0833333333vw;
    margin: 0 auto 8.8541666667vw;
  }
}
@media screen and (max-width: 768px) {
  .look-14 .img__wrapper .img-1 {
    width: 100vw;
    height: 126.9720101781vw;
  }
}
@media screen and (min-width: 769px) {
  .look-14 .img__wrapper .img-1 {
    width: 42.0833333333vw;
    height: 53.5416666667vw;
    margin-bottom: 0.15625vw;
  }
}
@media screen and (min-width: 769px) {
  .look-14 .credit {
    margin-top: 1.7708333333vw;
    margin-left: auto;
  }
}

/* look15 -------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .look-15 {
    width: 72.3958333333vw;
    margin: 0 auto 3.8020833333vw;
  }
}
@media screen and (min-width: 769px) {
  .look-15 .img__wrapper {
    display: flex;
    margin-bottom: 1.7708333333vw;
  }
}
.look-15 .img__wrapper .img-2 {
  position: relative;
}
.look-15 .img__wrapper .img-2 .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .look-15 .img__wrapper .img-2 .img {
    width: 76.844783715vw;
  }
}
@media screen and (min-width: 769px) {
  .look-15 .img__wrapper .img-2 .img {
    width: 27.7604166667vw;
  }
}
@media screen and (min-width: 769px) {
  .look-15 .credit {
    margin-left: auto;
  }
}

/* look16 -------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .look-16 {
    padding-bottom: 21.8829516539vw;
  }
}
@media screen and (min-width: 769px) {
  .look-16 {
    width: 57.5520833333vw;
    height: 51.5625vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 11.1979166667vw;
  }
}
@media screen and (max-width: 768px) {
  .look-16 .img__wrapper .img-1 ul {
    width: 100vw;
    height: 136.1323155216vw;
  }
}
@media screen and (min-width: 769px) {
  .look-16 .img__wrapper .img-1 ul {
    width: 37.8645833333vw;
    height: 51.5625vw;
  }
}

/* text-area -------------------------------------------------------- */
.text-area {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .text-area {
    height: 69.2111959288vw;
  }
}
@media screen and (min-width: 769px) {
  .text-area {
    height: 27.9166666667vw;
  }
}
.text-area::before {
  content: "";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .text-area::before {
    height: 69.2111959288vw;
    background-image: url(../images/sp/bg_under.webp);
  }
}
@media screen and (min-width: 769px) {
  .text-area::before {
    height: 27.9166666667vw;
    background-image: url(../images/bg_under.webp);
  }
}
.text-area__text {
  position: absolute;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .text-area__text {
    top: 20.3562340967vw;
    left: 3.8167938931vw;
    width: 76.0814249364vw;
  }
}
@media screen and (min-width: 769px) {
  .text-area__text {
    top: 8.59375vw;
    left: 24.2708333333vw;
    width: 34.84375vw;
  }
}
.text-area__title {
  position: absolute;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .text-area__title {
    top: 41.2213740458vw;
    right: 3.5623409669vw;
    width: 79.3893129771vw;
  }
}
@media screen and (min-width: 769px) {
  .text-area__title {
    top: 17.96875vw;
    right: 24.375vw;
    width: 36.40625vw;
  }
}

/* footer -------------------------------------------------------- */
footer {
  position: relative;
  content: "";
  display: block;
  background-image: url(../images/footer.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
@media screen and (max-width: 768px) {
  footer {
    height: 151.9083969466vw;
    padding-top: 17.8117048346vw;
  }
}
@media screen and (min-width: 769px) {
  footer {
    height: 56.0416666667vw;
    padding-top: 5.7291666667vw;
  }
}
footer .footer__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
footer .footer__wrapper .logo_brand {
  margin: 0 auto;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  footer .footer__wrapper .logo_brand {
    width: 45.8015267176vw;
    margin-bottom: 5.0890585242vw;
  }
}
@media screen and (min-width: 769px) {
  footer .footer__wrapper .logo_brand {
    width: 13.8541666667vw;
    margin-bottom: 2.0833333333vw;
  }
}
footer .footer__wrapper .footer__img {
  border: solid 3px #fff;
  margin: 0 auto;
  opacity: 0;
  clip-path: inset(0 100% 0 0); /* 左から右 */
  transition: clip-path 1s ease;
}
footer .footer__wrapper .footer__img.active {
  clip-path: inset(0% 0% 0% 0%);
}
@media screen and (max-width: 768px) {
  footer .footer__wrapper .footer__img {
    width: 92.3664122137vw;
    margin-bottom: 5.0890585242vw;
  }
}
@media screen and (min-width: 769px) {
  footer .footer__wrapper .footer__img {
    width: 41.3020833333vw;
    margin-bottom: 1.8229166667vw;
  }
}
footer .footer__wrapper .staff {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  color: #fff;
  text-align: center;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  footer .footer__wrapper .staff {
    font-size: 2.7989821883vw;
    line-height: 1.6363636364;
    margin-bottom: 11.9592875318vw;
  }
}
@media screen and (min-width: 769px) {
  footer .footer__wrapper .staff {
    font-size: 0.7291666667vw;
    line-height: 1.7142857143;
    margin-bottom: 3.4375vw;
  }
}
footer .footer__wrapper .top-text {
  font-family: "hiragino-kaku-gothic-pron", sans-serif;
  font-weight: 600;
  color: #fff;
  text-align: center;
  display: block;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  footer .footer__wrapper .top-text {
    font-size: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  footer .footer__wrapper .top-text {
    font-size: 0.8854166667vw;
  }
}

/* アニメーション ------------------------------------------------ */
/* clip-path */
.anim_clip {
  opacity: 0;
  clip-path: inset(0 100% 0 0); /* 上から下 */
  transition: clip-path 1s ease;
}
.anim_clip.active {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0%);
}

/* スライド　ズームアウト切り替え */
/* 2枚 */
.zoomSlider2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.zoomSlider2 li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 6s linear;
  animation: zoomFade2 6s infinite linear;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.zoomSlider2 li:first-child {
  animation-delay: 0s;
}
.zoomSlider2 li:nth-child(2) {
  animation-delay: 3s;
}

/* 3枚 */
.zoomSlider3 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.zoomSlider3 li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 9s linear;
  animation: zoomFade3 9s infinite linear;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.zoomSlider3 li:first-child {
  animation-delay: 0s;
}
.zoomSlider3 li:nth-child(2) {
  animation-delay: 3s;
}
.zoomSlider3 li:nth-child(3) {
  animation-delay: 6s;
}

/* 4枚 */
.zoomSlider4 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.zoomSlider4 li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 12s linear;
  animation: zoomFade4 12s infinite linear;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.zoomSlider4 li:first-child {
  animation-delay: 0s;
}
.zoomSlider4 li:nth-child(2) {
  animation-delay: 3s;
}
.zoomSlider4 li:nth-child(3) {
  animation-delay: 6s;
}
.zoomSlider4 li:nth-child(4) {
  animation-delay: 9s;
}

@keyframes zoomFade2 {
  0%, 100% {
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes zoomFade3 {
  0%, 100% {
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }
  16.6% {
    opacity: 1;
  }
  33.3% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes zoomFade4 {
  0%, 100% {
    opacity: 0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}/*# sourceMappingURL=style.css.map */