@charset "UTF-8";
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.02rem;
  font-size: 3.2vw;
  transition: all 1.6s ease 0s;
  background-color: #e1e6dc;
  font-family: "bodoni-urw", serif;
  font-weight: 400;
  font-style: normal;
}

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

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

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

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

.fade {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 初期位置 */
.fade-up {
  transform: translateY(20px);
}

.fade-left {
  transform: translateX(-20px);
}

.fade-right {
  transform: translateX(20px);
}

/* その場フェードはtransformなしでもOK */
.fade-in {
  transform: none;
}

/* 表示状態 */
.fade.is-show {
  opacity: 1;
  transform: translate(0, 0);
}

/* .lp
===================================================== */
.lp,
.ft {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  background-color: #fff;
  letter-spacing: 0;
}

/* .fv
===================================================== */
.fv {
  position: relative;
  overflow: hidden;
  padding: 1.6% 0 0 2.4%;
}
.fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fv_back_sp.webp) center/cover no-repeat;
}
@media screen and (min-width: 769px) {
  .fv::before {
    background: url(../images/fv_back_pc.webp) center/cover no-repeat;
  }
}

.fv__inner {
  position: relative;
  display: grid;
  padding: 6.5573770492% 0 38.5245901639%;
  background-color: #fff;
}
.fv__inner > * {
  grid-area: 1/1;
}

.fv__visual {
  justify-self: end;
  width: 77.3224043716%;
}

.fv__title {
  position: relative;
  z-index: 1;
  justify-self: start;
  align-self: start;
  width: 25.6092896175%;
  margin: 14.9071038251% 0 0 7.650273224%;
}

.fv {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.fv__title {
  opacity: 0;
  transition: opacity 1.2s ease 0.5s;
}

.fv.is-show,
.fv.is-show .fv__title {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fv,
  .fv__title {
    transition: none;
  }
}
/* .look
===================================================== */
.look__row {
  position: relative;
  display: flex;
}

.look__row--01 {
  margin-top: 0%;
}
.look__row--01 .look__img {
  width: 100%;
  margin-left: 0%;
}
.look__row--01 .look__expand {
  width: 5.9386666667%;
  max-width: 2.227rem;
  margin: 0 3.848% 3.048% 0;
}

.look__row--02 {
  margin-top: 33.6%;
}
.look__row--02 .look__img {
  width: 100%;
  margin-left: 0%;
}
.look__row--02 .look__text {
  margin-top: -19.7333333333%;
  left: 52.8%;
  width: 44%;
}

.look__row--03 {
  margin-top: 29.8666666667%;
}
.look__row--03 .look__img {
  width: 76.2666666667%;
  margin-left: 0%;
}

.look__row--04 {
  margin-top: 6.9333333333%;
}
.look__row--04 .look__img {
  width: 74.9333333333%;
  margin-left: 25.0666666667%;
}

.look__row--05 {
  margin-top: 57.6%;
}
.look__row--05 .look__img {
  width: 100%;
  margin-left: 0%;
}
.look__row--05 .look__text {
  margin-top: -24%;
  left: 8.8%;
  width: 52.2666666667%;
}

.look__row--06 {
  margin-top: 36.8%;
}
.look__row--06 .look__img {
  width: 82.4%;
  margin-left: 8.8%;
}
.look__row--06 .look__credit {
  margin-right: 5%;
  margin-left: 5%;
}
.look__row--06 .look__credit-link {
  font-size: min(1.4rem, 4.5818181818cqw);
}
.look__row--06 .look__expand {
  width: 7.2071197411%;
  max-width: 2.227rem;
  margin: 0 3.7961165049% 4.4951456311% 0;
}

.look__row--07 {
  margin-top: 46.4%;
}
.look__row--07 .look__img {
  width: 82.6666666667%;
  margin-left: 17.3333333333%;
}
.look__row--07 .look__expand {
  width: 7.1838709677%;
  max-width: 2.227rem;
  margin: 0 3.1387096774% 4.8032258065% 0;
}

.look__row--08 {
  margin-top: 26.4%;
}
.look__row--08 .look__img {
  width: 66.6666666667%;
  margin-left: 8%;
}
.look__row--08 .look__text {
  margin-top: -9.6%;
  left: 54.4%;
  width: 37.6%;
}

.look__row--09 {
  margin-top: 4.2666666667%;
}
.look__row--09 .look__img {
  width: 66.6666666667%;
  margin-left: 25.3333333333%;
}

.look__row--10 {
  margin-top: 33.6%;
}
.look__row--10 .look__img {
  width: 71.2%;
  margin-left: 14.6666666667%;
}
.look__row--10 .look__text {
  margin-top: 66.4%;
  left: 8.5333333333%;
  width: 50.1333333333%;
}
.look__row--10 .look__credit {
  margin-right: 5%;
  margin-left: 5%;
}
.look__row--10 .look__credit-link {
  font-size: min(1.4rem, 4.5818181818cqw);
}
.look__row--10 .look__expand {
  width: 7.2209737828%;
  max-width: 1.928rem;
  margin: 0 3.7715355805% 3.734082397% 0;
}

.look__row--11 {
  margin-top: 54.4%;
}
.look__row--11 .look__img {
  width: 100%;
  margin-left: 0%;
}
.look__row--11 .look__text {
  margin-top: 129.8666666667%;
  left: 7.4666666667%;
  width: 63.2%;
}
.look__row--11 .look__expand {
  width: 5.8906666667%;
  max-width: 2.209rem;
  margin: 0 4.64% 4.7706666667% 0;
}

.look__row--13 {
  margin-top: 51.2%;
}
.look__row--13 .look__img {
  width: 82.6666666667%;
  margin-left: 0%;
}
.look__row--13 .look__text {
  margin-top: -17.6%;
  left: 57.8666666667%;
  width: 36.8%;
}
.look__row--13 .look__credit {
  margin-right: 5%;
  margin-left: 5%;
}
.look__row--13 .look__credit-link {
  font-size: min(1.4rem, 4.5818181818cqw);
}
.look__row--13 .look__expand {
  width: 7.1838709677%;
  max-width: 2.227rem;
  margin: 0 3.1387096774% 4.8032258065% 0;
}

.look__row--14 {
  margin-top: 5.8666666667%;
}
.look__row--14 .look__img {
  width: 70.9333333333%;
  margin-left: 20.8%;
}

.look__row--15 {
  margin-top: 33.6%;
}
.look__row--15 .look__img {
  width: 100%;
  margin-left: 0%;
}
.look__row--15 .look__text {
  margin-top: 135.7333333333%;
  left: 10%;
  width: 54.1333333333%;
}

.look__row--16 {
  margin-top: 40.8%;
}
.look__row--16 .look__img {
  width: 82.4%;
  margin-left: 8.2666666667%;
}
.look__row--16 .look__credit {
  margin-right: 5%;
  margin-left: 5%;
}
.look__row--16 .look__credit-link {
  font-size: min(1.4rem, 4.5818181818cqw);
}
.look__row--16 .look__expand {
  width: 7.2071197411%;
  max-width: 2.227rem;
  margin: 0 3.7961165049% 4.4951456311% 0;
}

.look__row--17 {
  margin-top: 70.1333333333%;
}
.look__row--17 .look__img {
  width: 70.9333333333%;
  margin-left: 14.4%;
}
.look__row--17 .look__text {
  margin-top: 85.0666666667%;
  left: 53.3333333333%;
  width: 38.6666666667%;
}

.look__row--05 {
  flex-wrap: wrap;
}
.look__row--05::after {
  content: "";
  flex-basis: 100%;
  padding-top: 166.6666666667%;
}
.look__row--05 .look__sticky {
  position: sticky;
  top: max(min(100vw, 50rem) * 0.24, min(50vh - min(100vw, 50rem) * 0.7133333333, 100vh - min(100vw, 50rem) * 1.4266666667));
  top: max(min(100vw, 50rem) * 0.24, min(50svh - min(100vw, 50rem) * 0.7133333333, 100svh - min(100vw, 50rem) * 1.4266666667));
  align-self: flex-start;
  width: 100%;
}
.look__row--05 + .look__row {
  position: relative;
  z-index: 2;
  margin-top: -129.8666666667%;
}

.look__row--15 {
  flex-wrap: wrap;
}
.look__row--15::after {
  content: "";
  flex-basis: 100%;
  padding-top: 170.6666666667%;
}
.look__row--15 .look__sticky {
  position: sticky;
  top: max(min(100vw, 50rem) * 0, min(50vh - min(100vw, 50rem) * 0.7133333333, 100vh - min(100vw, 50rem) * 1.72));
  top: max(min(100vw, 50rem) * 0, min(50svh - min(100vw, 50rem) * 0.7133333333, 100svh - min(100vw, 50rem) * 1.72));
  align-self: flex-start;
  width: 100%;
}
.look__row--15 + .look__row {
  position: relative;
  z-index: 2;
  margin-top: -129.8666666667%;
}

.look__row--12 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4%;
  margin-top: 24.8%;
}

.look__img {
  display: grid;
  container-type: inline-size;
}
.look__img > * {
  grid-area: 1/1;
}

.look__slider {
  width: 100%;
}

.look__toggle {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.look__toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.look__expand {
  position: relative;
  transition: transform 0.4s ease;
}

.look__credit {
  position: relative;
  z-index: 3;
  display: grid;
  row-gap: 0.42rem;
  align-self: end;
  margin: 0 9.6% 5.22rem 10.4%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
@media screen and (min-width: 769px) {
  .look__credit {
    margin: 0 9.6% 9.22rem 10.4%;
  }
}

.look__credit li {
  min-width: 0;
}

.look__credit-link {
  font-family: "bodoni-urw", serif;
  font-weight: 400;
  font-style: normal;
  display: flex;
  align-items: center;
  font-size: min(1.4rem, 4.0727272727cqw);
  color: #fff;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .look__credit-link {
    font-size: min(1.7rem, 4.0727272727cqw);
  }
}

.look__credit-name,
.look__credit-price {
  line-height: 1;
}

.look__credit-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.look__credit-price {
  margin-left: 5px;
}

.look__credit-price,
.look__credit-brand,
.look__credit-buy {
  flex-shrink: 0;
}

.look__credit-brand {
  margin-right: 0.8em;
  font-size: 0.7142857143em;
  line-height: 1;
}
@media screen and (min-width: 769px) {
  .look__credit-brand {
    font-size: 0.8214285714em;
  }
}
.look__credit-brand::before {
  content: "/";
  margin: 0 5px 0 5px;
}

.look__credit-buy {
  margin-left: auto;
  padding: 0 0.7em;
  border: 1px solid #fff;
  font-size: 0.7142857143em;
  line-height: 1.3;
}
@media screen and (min-width: 769px) {
  .look__credit-buy {
    font-size: 0.8214285714em;
  }
}

.look__img.is-open {
  position: relative;
  z-index: 2;
}
.look__img.is-open .look__toggle::before {
  opacity: 1;
}
.look__img.is-open .look__expand {
  transform: rotate(45deg);
}
.look__img.is-open .look__credit {
  opacity: 1;
  visibility: visible;
}

.look__text {
  font-family: "bodoni-urw", serif;
  font-weight: 300;
  font-style: normal;
  position: absolute;
  top: 0;
  z-index: 1;
  font-size: min(3.2vw, 1.6rem);
  line-height: 1.3333333333;
  color: #e00000;
}

/* .all-items
===================================================== */
.all-items {
  display: flex;
  justify-content: center;
  margin-top: 25rem;
}

.all-items__btn {
  font-family: "bodoni-urw", serif;
  font-weight: 300;
  font-style: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 57.8666666667%;
  height: 4.7rem;
  border: 1px solid #000;
  font-size: 1.9rem;
  line-height: 1.5;
  color: #000;
}

/* .ft
===================================================== */
.ft {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem 0 4.5rem;
}

.ft__credits {
  font-family: "bodoni-urw", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
  color: #000;
}

.ft__logo {
  width: 38.4%;
  max-width: 14.4rem;
  margin-top: 9.15rem;
}

.ft__sns {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  width: 100%;
  margin-top: 3.2rem;
}
.ft__sns li {
  width: 7.4666666667%;
  max-width: 2.8rem;
}
.ft__sns a {
  display: block;
}

.ft__copy {
  margin-top: 2.1rem;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.53;
  text-align: center;
  color: #000;
}

/* ==========================================================================
   PC（デザイン幅 1440）
   ========================================================================== */
@media screen and (min-width: 769px) {
  .lp,
  .ft {
    max-width: 100vw;
  }
  .fv {
    padding: 0.625% 0 0 0.7638888889%;
  }
  .fv__inner {
    padding: 6.0181945416% 0 13.9839048286%;
  }
  .fv__visual {
    width: 73.1280615815%;
    margin-right: 4.4786564031%;
  }
  .fv__title {
    width: 25.7522743177%;
    margin: 8.3764870539% 0 0 11.966410077%;
  }
  .look__row--01 {
    margin-top: 0%;
  }
  .look__row--01 .look__img {
    width: 45.625%;
    margin-left: 26.4055555556%;
  }
  .look__row--01 .look__expand {
    width: 4.596651446%;
    max-width: 3.02rem;
    margin: 0 3.0502283105% 3.2100456621% 0;
  }
  .look__row--02 {
    margin-top: 15.3375%;
  }
  .look__row--02 .look__img {
    width: 58.9923611111%;
    margin-left: 20.4888888889%;
  }
  .look__row--02 .look__text {
    margin-top: -4.8770833333%;
    left: 58.2409722222%;
    width: 17.7722222222%;
  }
  .look__row--03 {
    margin-top: 10.4340277778%;
  }
  .look__row--03 .look__img {
    width: 34.1666666667%;
    margin-left: 11.1111111111%;
  }
  .look__row--04 {
    margin-top: -32.4763888889%;
  }
  .look__row--04 .look__img {
    width: 34.1666666667%;
    margin-left: 55.5208333333%;
  }
  .look__row--05 {
    margin-top: 17.3611111111%;
  }
  .look__row--05 .look__img {
    width: 36.7777777778%;
    margin-left: 13.1944444444%;
  }
  .look__row--05 .look__text {
    margin-top: 5.625%;
    left: 7.4305555556%;
    width: 14.7916666667%;
  }
  .look__row--06 {
    margin-top: 12.0944444444%;
  }
  .look__row--06 .look__img {
    width: 26.7861111111%;
    margin-left: 36.5909722222%;
  }
  .look__row--06 .look__expand {
    width: 7.7776625531%;
    max-width: 3rem;
    margin: 0 3.7929067718% 3.9458674686% 0;
  }
  .look__row--07 {
    margin-top: 21.5277777778%;
  }
  .look__row--07 .look__img {
    width: 45.625%;
    margin-left: 27.2916666667%;
  }
  .look__row--07 .look__expand {
    width: 4.5662100457%;
    max-width: 3rem;
    margin: 0 3.0441400304% 3.1385083714% 0;
  }
  .look__row--08 {
    margin-top: 12.6506944444%;
  }
  .look__row--08 .look__img {
    width: 34.1666666667%;
    margin-left: 10.4861111111%;
  }
  .look__row--08 .look__text {
    margin-top: -4.4840277778%;
    left: 39.0555555556%;
    width: 14.7326388889%;
  }
  .look__row--09 {
    margin-top: -31.0027777778%;
  }
  .look__row--09 .look__img {
    width: 34.1666666667%;
    margin-left: 55.0694444444%;
  }
  .look__row--10 {
    margin-top: 17.3611111111%;
  }
  .look__row--10 .look__img {
    width: 35.4083333333%;
    margin-left: 32.2916666667%;
  }
  .look__row--10 .look__text {
    margin-top: 35%;
    left: 27%;
    width: 23%;
  }
  .look__row--10 .look__expand {
    width: 7.2271907115%;
    max-width: 3.685rem;
    margin: 0 3.547893622% 3.7361732172% 0;
  }
  .look__row--11 {
    margin-top: 20.9722222222%;
  }
  .look__row--11 .look__img {
    width: 45.5034722222%;
    margin-left: 27.4131944444%;
  }
  .look__row--11 .look__text {
    margin-top: 61.5972222222%;
    left: 24.0277777778%;
    width: 26.6944444444%;
  }
  .look__row--11 .look__expand {
    width: 5.890881343%;
    max-width: 3.86rem;
    margin: 0 4.6394505914% 4.7706982068% 0;
  }
  .look__row--13 {
    margin-top: 17.3611111111%;
  }
  .look__row--13 .look__img {
    width: 37.6166666667%;
    margin-left: 10.3472222222%;
  }
  .look__row--13 .look__text {
    margin-top: 3.1673611111%;
    left: 41.25%;
    width: 15.2895833333%;
  }
  .look__row--13 .look__expand {
    width: 7.1850539064%;
    max-width: 3.892rem;
    margin: 0 3.1383842859% 4.8035740659% 0;
  }
  .look__row--14 {
    margin-top: -22.8798611111%;
  }
  .look__row--14 .look__img {
    width: 32.2770833333%;
    margin-left: 57.3611111111%;
  }
  .look__row--15 {
    margin-top: 17.3611111111%;
  }
  .look__row--15 .look__img {
    width: 36.8055555556%;
    margin-left: 13.1944444444%;
  }
  .look__row--15 .look__text {
    margin-top: 50.6944444444%;
    left: 10%;
    width: 26.3888888889%;
  }
  .look__row--16 {
    margin-top: 12.2131944444%;
  }
  .look__row--16 .look__img {
    width: 26.7361111111%;
    margin-left: 36.5972222222%;
  }
  .look__row--16 .look__expand {
    width: 7.2077922078%;
    max-width: 2.775rem;
    margin: 0 3.7948051948% 4.4935064935% 0;
  }
  .look__row--17 {
    margin-top: 27.7777777778%;
  }
  .look__row--17 .look__img {
    width: 32.2770833333%;
    margin-left: 33.9652777778%;
  }
  .look__row--17 .look__text {
    margin-top: 38.7083333333%;
    left: 50.2256944444%;
    width: 19.6576388889%;
  }
  .look__text {
    font-size: 1.1805555556vw;
    line-height: 1.25;
  }
  .look__row--05 .look__sticky,
  .look__row--15 .look__sticky {
    display: flex;
  }
  .look__row--05 .look__img--mono,
  .look__row--15 .look__img--mono {
    margin-left: 0;
  }
  .look__row--05 .look__img--mono > img,
  .look__row--15 .look__img--mono > img {
    filter: grayscale(1);
  }
  .look__row--05 .look__img > img {
    aspect-ratio: 529.6/667.84;
    object-fit: cover;
    object-position: 50% 46%;
  }
  .look__row--04 .look__img > img {
    aspect-ratio: 492/700.9;
    object-fit: cover;
  }
  .look__row--05 {
    flex-wrap: wrap;
  }
  .look__row--05::after {
    content: "";
    flex-basis: 100%;
    padding-top: 54.3111111111%;
  }
  .look__row--05 .look__sticky {
    position: sticky;
    top: max(min(100vw, 144rem) * 0, min(50vh - min(100vw, 144rem) * 0.2318888889, 100vh - min(100vw, 144rem) * 0.4637777778));
    top: max(min(100vw, 144rem) * 0, min(50svh - min(100vw, 144rem) * 0.2318888889, 100svh - min(100vw, 144rem) * 0.4637777778));
    align-self: flex-start;
    width: 100%;
  }
  .look__row--05 + .look__row {
    position: relative;
    z-index: 2;
    margin-top: -42.2166666667%;
  }
  .look__row--15 {
    flex-wrap: wrap;
  }
  .look__row--15::after {
    content: "";
    flex-basis: 100%;
    padding-top: 57.4597222222%;
  }
  .look__row--15 .look__sticky {
    position: sticky;
    top: max(min(100vw, 144rem) * 0, min(50vh - min(100vw, 144rem) * 0.2625451389, 100vh - min(100vw, 144rem) * 0.6354166667));
    top: max(min(100vw, 144rem) * 0, min(50svh - min(100vw, 144rem) * 0.2625451389, 100svh - min(100vw, 144rem) * 0.6354166667));
    align-self: flex-start;
    width: 100%;
  }
  .look__row--15 + .look__row {
    position: relative;
    z-index: 2;
    margin-top: -45.2465277778%;
  }
  .look__row--12 {
    grid-template-columns: 39.8058252427% 39.8058252427%;
    column-gap: 3.8414239482%;
    margin-top: 11.2847222222%;
    padding-left: 14.1666666667%;
  }
  .look__row .look__credit-link {
    font-size: min(1.1805555556vw, 1.7rem);
  }
  .all-items {
    margin-top: 22.5590277778%;
  }
  .all-items__btn {
    width: 15.0694444444%;
  }
}
@media screen and (min-width: 769px) and (min-width: 769px) {
  .all-items__btn {
    width: 30%;
  }
}
@media screen and (min-width: 769px) {
  .ft {
    padding-bottom: 9.5rem;
  }
  .ft__logo {
    width: 10%;
  }
  .ft__sns li {
    width: 1.9444444444%;
  }
}/*# sourceMappingURL=style.css.map */