@charset "UTF-8";

/* ===============================================### 
共通パーツ
###=============================================== */
.setup0801_lp {
  --primary-color: #CA7D59;
  --info-color: #b91537;
  overflow: hidden;
}

/* ===========### PC版用設定 ###=========== */
@media screen and (min-width: 768px) {
  .setup0801_lp {
    --content-width: 140rem;
  }

  .setup0801_lp .sp-only {
    display: none;
  }

  .setup0801_lp .credit__text .sp-only {
    display: none;
  }
}

/* ===========### SP版用設定 ###=========== */
@media screen and (max-width: 767px) {
  .setup0801_lp {
    --content-width: calc(750 * 100vw / 750);
  }

  .setup0801_lp .credit__text .sp-only {
    display: inline-block;
    width: 100%;
  }

  .setup0801_lp .pc-only {
    display: none;
  }
}

/* ===========### Font ###=========== */
.setup0801_lp .garamond {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}

.setup0801_lp .yu-gothic {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
    "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
}

.setup0801_lp .pragmatica {
  font-family: "pragmatica", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-feature-settings: "palt";
}

.setup0801_lp .castoro-regular {
  font-family: "castoro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}

.setup0801_lp .bold-text {
  font-weight: bold;
  font-feature-settings: "palt";
  transform: rotate(0.03deg);
}

@media screen and (max-width: 767px) {
}

/* ===============================================### 
MV
###=============================================== */
.setup0801_lp .mv {
  width: 120rem;
  margin: 0 auto;
}

/*** text ***/
.setup0801_lp .mv__text {
  margin-top: 6.9rem;
}

.setup0801_lp .title__text {
  margin-top: 2.9rem;
  font-size: 3.4rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.setup0801_lp .summary__text {
  font-size: 1.5rem;
  line-height: 2.93;
  text-align: center;
}

/*** image ***/
.setup0801_lp .mv__image {
  width: fit-content;
}

.setup0801_lp .mv__image img {
  width: 100%;
  height: auto;
}

.setup0801_lp .mv__logo {
  width: 11rem;
  margin-inline: auto;
}

.setup0801_lp .mv__logo img {
  width: 100%;
  height: auto;
}

/*** animation ***/
.js-fade-in__trigger {
  opacity: 0;
  transition: opacity 3s;
}
.js-fade-in {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .setup0801_lp .mv {
    width: calc(750 * 100vw / 750);
  }

  /*** text ***/
  .setup0801_lp .mv__text {
    margin-top: calc(87 * 100vw / 750);
  }

  .setup0801_lp .title__text {
    margin-top: calc(39 * 100vw / 750);
    margin-left: calc(8 * 100vw / 750);
    font-size: calc(60 * 100vw / 750);
    letter-spacing: 0.11em;
    line-height: 1.3666666667;
  }

  .setup0801_lp .summary__text {
    margin-top: 0;
    font-size: calc(24 * 100vw / 750);
    line-height: 2.33;
    text-align: center;
    font-feature-settings: "palt";
    letter-spacing: 0;
  }

  /*** image ***/
  .setup0801_lp .mv__logo {
    width: calc(183 * 100vw / 750);
  }
}


/* ===============================================### 
コンテンツ
###=============================================== */
/* ===========### Common ###=========== */
.setup0801_lp .content__inner {
  max-width: var(--content-width);
  margin-inline: auto;
}

.setup0801_lp [class*="grid__item"] {
  width: fit-content;
  height: fit-content;
  position: relative;
}

/*** text ***/
.setup0801_lp .credit__text {
  letter-spacing: 0.02em;
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(15*(100vw / 750));
}

.setup0801_lp .credit__text li{
  font-weight: 300;
}

/*** image ***/
.setup0801_lp .content__image img {
  width: 100%;
  height: auto;
}

.setup0801_lp .item-name__text img {
  width: 100%;
  height: auto;
}

.setup0801_lp .content__text img {
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*** frame ***/
.setup0801_lp .frame__line{
  position: relative;
}

/* .setup0801_lp .frame__line:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.2rem solid var(--primary-color);
  box-sizing: border-box;
  pointer-events: none;
} */


/*** animation ***/
.js-fade-up__trigger {
  transform: translate3d(0, 5rem, 0);
  opacity: 0;
  transition: 1s;
}
.js-fade-up {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  width: max-content;
}

.content__text.js-fade-up__trigger {
  opacity: 0;
  transition: all 2s ease 0.3s;
  transform: translate3d(0, 0, 0);
  transition-delay: .5s;
}
.content__text.js-fade-up__trigger.js-fade-up {
  opacity: 1;
}

.trun-right {
  position: relative;
}
.trun-right::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ca7d59;
  z-index: 10;
}
.trun-right.js-fade-up02::after {
  width: 0;
  transition: all 1s cubic-bezier(0.6, 0.09, 0.08, 0.9);
}

@media screen and (max-width: 767px) {
  /*** text ***/
  .setup0801_lp .credit__text {
    font-size: calc(25 * 100vw / 750);
    letter-spacing: 0.02em;
    line-height: 2;
  }

  /*** frame ***/
  /* .setup0801_lp .frame__line:after{
    border: calc(4 * 100vw / 750) solid var(--primary-color);
  } */
}

@media screen and (min-width: 768px) {
  .setup0801_lp .credit__text {
    gap: 0 0;
    flex-direction: column;
    font-size: 1.5rem;
  }
}

/* ===========### Content01 ###=========== */
.setup0801_lp .content01 {
  margin-top: 10.6rem;
}

.setup0801_lp .content01 .content__item02 {
  width: 42.3rem;
}

/*** grid ***/
.setup0801_lp .content01 .grid-wrapper {
  display: grid;
  grid-template-columns: 50.2rem 9.9rem auto;
  grid-template-rows: 22.0rem 46.3rem auto;
  row-gap: 0;
  width: 104rem;
  margin: 0 auto;
}

.setup0801_lp .content01 .grid__item01 {
  grid-column: 1/2;
  grid-row: 1/3;
}

.setup0801_lp .content01 .grid__item02 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.setup0801_lp .content01 .grid__item03 {
  grid-column: 3/4;
  grid-row: 2/4;
}

.setup0801_lp .content01 .grid__item04 {
  grid-column: 1/2;
  grid-row: 3/4;
}

/*** text ***/
.setup0801_lp .content01 .content__item03 .credit__text {
  margin-top: 2.7rem;
  margin-left: 0.4rem;
}

/*** image ***/
.setup0801_lp .content01 .content__item01 .content__image {
  width: 44rem;
}

.setup0801_lp .content01 .content__item02 {
  width: 3.8rem;
}

.setup0801_lp .content01 .content__item02 .item-name__text {
  width: 3.8rem;
}

.setup0801_lp .content01 .content__item03 .content__image {
  width: 44rem;
}

@media screen and (max-width: 767px) {
  .setup0801_lp .content01 {
    margin-top: calc(102 * 100vw / 750);
  }

  .setup0801_lp .content01 .content__item01 {
    margin-right: 0;
    margin-left: auto;
  }

  .setup0801_lp .content01 .content__item02 {
    width: fit-content;
    margin-top: calc(60 * 100vw / 750);
    margin-left: calc(32 * 100vw / 750);
  }

  .setup0801_lp .content01 .content__item03 {
    margin-top: calc(60* 100vw / 750);
    margin-left: 0;
  }

  /*** grid ***/
  .setup0801_lp .content01 .grid-wrapper {
    display: block;
    margin-inline: auto;
    width: 100%;
  }

  /*** flex ***/
  .setup0801_lp .content01 .flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  /*** text ***/
  .setup0801_lp .content01 .credit__text {
    margin-top: calc(27* 100vw / 750);
    margin-left: calc(39* 100vw / 750);
    line-height: 2;
  }

  /*** image ***/
  .setup0801_lp .content01 .content__item01 .content__image {
    width: calc(640 * 100vw / 750);
  }

  .setup0801_lp .content01 .content__item02 .item-name__text {
    width: calc(690 * 100vw / 750);
  }

  .setup0801_lp .content01 .content__item03 .content__image {
    width: calc(640 * 100vw / 750);
  }

}


/* ===============================================### 
Others
###=============================================== */
.setup0801_lp .others {
  margin-top: 10rem;
  margin-bottom: 15rem;
}

.setup0801_lp .link__button {
  width: 38rem;
  margin: 0 auto 0;
  background-color: var(--primary-color);
}

.setup0801_lp .link__button a {
  display: block;
  padding: 2.2rem 0 2.5rem;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: #FFFFFF;
}

@media screen and (max-width: 767px) {
  .setup0801_lp .others {
    margin-top: calc(128 * 100vw / 750);
    margin-bottom: calc(213 * 100vw / 750);;
  }

  .setup0801_lp .link__button {
    width: calc(675 * 100vw / 750);
    margin: 0 auto;
  }

  .setup0801_lp .link__button a {
    padding: calc(42 * 100vw / 750) 0 calc(48 * 100vw / 750);
    font-size: calc(28 * 100vw / 750);
  }
}


/* ===============================================### before,after ###=============================================== */

.setup0801_lp .content01 .grid__item01 .content__text,
.setup0801_lp .content01 .grid__item03 .content__text {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.setup0801_lp .content01 .grid__item01 .content__text {
  width: calc(307* (100vw /750));
  height: calc(268* (100vw /750));
  top: 45.8%;
  left: -11%;
}

.setup0801_lp .content01 .grid__item03 .content__text {
  width: calc(323* (100vw /750));
  height: calc(276* (100vw /750));
  top: 23.7%;
  right: -12.5%;
  left: auto;
}

@media screen and (min-width: 768px) {
  .setup0801_lp .content01 .grid__item01 .content__text {
    width: 20.3rem;
    height: 16.9rem;
    top: 49.8%;
    left: -10.8%;
  }

  .setup0801_lp .content01 .grid__item03 .content__text {
    width: 20.3rem;
    height: 16.9rem;
    top: 26.2%;
    right: -10.8%;
    left: auto;
  }
}