@charset "UTF-8";
/*メディアクエリー
---------------------------------------------*/
html {
  font-size: 3.7333333333vw;
  text-align: center;
  font-family: "century-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow: visible !important;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 751px) {
  html {
    font-size: 1.0416666667vw;
  }
}

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

a {
  text-decoration: none;
}

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

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

.fv_img {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.fv_img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fv.jpg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  transition: transform 3.5s ease;
  transform: scale(1); /* ← 最終状態（デフォルト） */
  z-index: -1;
}
@media screen and (min-width: 751px) {
  .fv_img::before {
    transform: scale(1.15);
    transform-origin: left;
  }
}

.fv_img.not-zoomed::before {
  transform: scale(1.2);
}
@media screen and (min-width: 751px) {
  .fv_img.not-zoomed::before {
    transform: scale(1.3);
    transform-origin: left;
  }
}

.fv_img.zoom-in::before {
  transform: scale(1);
}
@media screen and (min-width: 751px) {
  .fv_img.zoom-in::before {
    transform: scale(1.2);
    transform-origin: left;
  }
}

.tit_main {
  position: absolute;
  width: 100%;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: drop-shadow(0px 0px 16px rgba(125, 125, 125, 0.6));
  z-index: 2;
}
@media screen and (min-width: 751px) {
  .tit_main {
    top: 33%;
    left: 26%;
  }
}
.tit_main .one {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  font-size: 5.3333333333vw;
}
@media screen and (min-width: 751px) {
  .tit_main .one {
    font-size: 1.7361111111vw;
  }
}
.tit_main h1 .two {
  font-family: "optima-nova-lt-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 13.3333333333vw;
  padding-top: 2.6666666667vw;
}
@media screen and (min-width: 751px) {
  .tit_main h1 .two {
    font-size: 5.1388888889vw;
    padding-top: 0.6944444444vw;
  }
}
.tit_main h1 .three {
  font-size: 4.2666666667vw;
  margin-top: -0.5333333333vw;
}
@media screen and (min-width: 751px) {
  .tit_main h1 .three {
    font-size: 1.5277777778vw;
    margin-top: -0.3472222222vw;
  }
}
.tit_main .four {
  font-size: 4.8vw;
  padding-top: 6.6666666667vw;
}
@media screen and (min-width: 751px) {
  .tit_main .four {
    font-size: 1.3888888889vw;
    padding-top: 1.7361111111vw;
  }
}
.tit_main .four span.line {
  display: block;
  border-bottom: 3px dotted #fff;
  width: 79%;
  margin: 0 auto;
}
@media screen and (min-width: 751px) {
  .tit_main .four span.line {
    display: block;
    border-bottom: 3px dotted #fff;
    width: 31%;
    margin: 0 auto;
  }
}
.tit_main .four p.brand {
  padding-top: 4.8vw;
}
@media screen and (min-width: 751px) {
  .tit_main .four p.brand {
    padding-top: 1.1111111111vw;
  }
}
.tit_main .four p.brand img {
  width: 36%;
  margin: 0 auto;
}
@media screen and (min-width: 751px) {
  .tit_main .four p.brand img {
    width: 12%;
    margin: 0 auto;
  }
}

.stac {
  position: sticky;
  top: 0;
  z-index: -11;
  background: #fff;
}

.read {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  padding: 13.3333333333vw 0 61.3333333333vw 0;
}
@media screen and (min-width: 751px) {
  .read {
    padding: 6.25vw 0 41.6666666667vw 0;
  }
}
.read p {
  width: 85.3333333333vw;
  text-align: center;
  line-height: 2.5;
  letter-spacing: 0.1em;
  margin: 0 auto;
}
@media screen and (min-width: 751px) {
  .read p {
    line-height: 3;
    font-size: 1.1111111111vw;
  }
}

section {
  padding-bottom: 24vw;
}
@media screen and (min-width: 751px) {
  section {
    padding-bottom: 12.5vw;
  }
}

.bk {
  position: relative;
  background: #fff;
  z-index: 1;
}

.mb {
  padding-bottom: 24vw;
}
@media screen and (min-width: 751px) {
  .mb {
    padding-bottom: 6.25vw;
  }
}

.credit {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 751px) {
  .credit {
    padding-top: 1.3888888889vw;
  }
}
.credit ul li {
  width: 53.3333333333vw;
  margin: 0 auto;
}
@media screen and (min-width: 751px) {
  .credit ul li {
    width: 16.6666666667vw;
  }
}
.credit ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.6666666667vw;
}
@media screen and (min-width: 751px) {
  .credit ul li a {
    margin-bottom: 0.6944444444vw;
  }
}
.credit ul li a p span {
  padding-left: 2.6666666667vw;
}
@media screen and (min-width: 751px) {
  .credit ul li a p span {
    padding-left: 0.6944444444vw;
  }
}
.credit ul li a div:first-child span {
  padding-left: 2.6666666667vw;
}
@media screen and (min-width: 751px) {
  .credit ul li a div:first-child span {
    padding-left: 0.6944444444vw;
  }
}
.credit ul li a .buy {
  width: 13.3333333333vw;
  background-color: #d9d9d9;
  border-radius: 30px;
  font-size: 3.2vw;
  padding: 0.8vw 0.2666666667vw 0.8vw 0.5333333333vw;
}
@media screen and (min-width: 751px) {
  .credit ul li a .buy {
    width: 3.4722222222vw;
    padding: 0.2777777778vw 0.0694444444vw 0.3472222222vw 0.1388888889vw;
    font-size: 0.8333333333vw;
  }
}
.credit ul li a .come {
  border-radius: 30px;
  font-size: 3.7333333333vw;
}
@media screen and (min-width: 751px) {
  .credit ul li a .come {
    font-size: 0.9722222222vw;
  }
}

.credit,
.staff,
.natural_couture,
.copy {
  font-family: "century-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.07em;
}

.sec02,
.sec08 {
  padding: 8vw;
  padding-bottom: 24vw;
}

.sec04 .img02 {
  width: 70.6666666667vw;
  margin-left: auto;
  margin-bottom: 10.6666666667vw;
}

.sec05 .credit,
.sec07 .credit {
  background: #fff;
}

#footer {
  padding-top: 13.3333333333vw;
  background: #fff;
  font-family: "canto", serif;
  font-weight: 700;
  font-style: normal;
}
@media screen and (min-width: 751px) {
  #footer {
    padding-top: 4.1666666667vw;
  }
}
#footer span {
  font-size: 6.9333333333vw;
  display: block;
  margin-bottom: 6.6666666667vw;
}
@media screen and (min-width: 751px) {
  #footer span {
    font-size: 1.8055555556vw;
    margin-bottom: 1.7361111111vw;
  }
}
#footer p {
  margin-bottom: 2.6666666667vw;
}
@media screen and (min-width: 751px) {
  #footer p {
    font-size: 0.9722222222vw;
    margin-bottom: 1.0416666667vw;
  }
}
#footer p.copy {
  font-size: 2.6666666667vw;
  margin-top: 32vw;
  padding-bottom: 16vw;
}
@media screen and (min-width: 751px) {
  #footer p.copy {
    font-size: 0.6944444444vw;
    margin-top: 8.3333333333vw;
    padding-bottom: 4.1666666667vw;
  }
}

.staff {
  margin-bottom: 21.3333333333vw;
}
@media screen and (min-width: 751px) {
  .staff {
    margin-bottom: 6.25vw;
  }
}

.stack-bottom,
.stack-top {
  transition: opacity 1.5s ease;
}

.stack-bottom.fade-out {
  opacity: 0;
}

.fade-item {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.visible {
  opacity: 1;
}

.target-section,
.target-section03 {
  transition: background-color 2s ease;
  background-color: #fff;
}

.target-section.fade-in {
  background-color: #a3c5de; /* 変化後の色 */
}
.target-section.fade-in .credit {
  color: #fff;
}
.target-section.fade-in .credit .buy {
  background-color: #fff;
  color: #adcbe2;
  font-weight: bold;
}

.target-section03.fade-in {
  background-color: #fffcd7; /* 変化後の色 */
}
.target-section03.fade-in .credit {
  background-color: #fffcd7;
  transition: background-color 2s ease;
  color: #000;
}
.target-section03.fade-in .credit .buy {
  background-color: #fff;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

@media (min-width: 798px) {
  .w_450 {
    width: 31.25vw;
  }
  .w_380 {
    width: 26.3888888889vw;
  }
  .w_525 {
    width: 36.4583333333vw;
  }
  .w_411 {
    width: 28.5416666667vw;
  }
  .w_420 {
    width: 29.1666666667vw;
  }
  .mb {
    background: #fff;
  }
  .sec01 ul.pc_flex01 {
    display: flex;
    width: 69.4444444444vw;
    margin: 0 auto;
    gap: 2%;
  }
  .sec01 ul.pc_flex01 li {
    width: 100%;
  }
  .sec02 {
    padding: 0;
    padding-top: 4.1666666667vw;
    padding-bottom: 12.5vw;
  }
  .sec02 .pc_flex {
    display: flex;
    justify-content: space-between;
    width: 60.2083333333vw;
    margin: 0 auto;
    margin-left: 13.8888888889vw;
  }
  .sec02 .pc_flex .img01 {
    margin-top: 20.2777777778vw;
  }
  .sec03 ul {
    margin: 0 auto;
  }
  .sec04 {
    position: relative;
  }
  .sec04 .img01 {
    margin-left: 20.8333333333vw;
  }
  .sec04 .img02 {
    position: absolute;
    top: 28%;
    left: 50%;
    z-index: -1;
  }
  .sec04 .slide-items {
    margin: 0 auto;
  }
  .sec04 .mb {
    background: none;
  }
  .sec05 {
    padding-top: 4.1666666667vw;
    padding-bottom: 12.5vw;
  }
  .sec05 .pc_flex {
    display: flex;
    align-items: flex-end;
    width: 57.9166666667vw;
    margin: 0 auto;
    margin-left: 15.2777777778vw;
  }
  .sec05 .pc_flex .w_380 {
    margin-left: 6.9444444444vw;
  }
  .sec06 ul.flex_img {
    display: flex;
    gap: 1%;
  }
  .sec06 ul.flex_img li {
    width: 100%;
  }
  .sec07 .pc_flex {
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    width: 57.9166666667vw;
    margin: 0 auto;
    margin-right: 15.2777777778vw;
  }
  .sec07 .pc_flex .w_380 {
    margin-right: 6.9444444444vw;
  }
  .sec08 {
    padding-top: 4.1666666667vw;
    padding-bottom: 12.5vw;
  }
  .sec08 .img01 {
    margin: 0 auto;
  }
}/*# sourceMappingURL=style.css.map */