@charset "utf-8";
/* CSS Document */

body {font-size: 16px; background-image: url(../img/common/common_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}

/* ===============================
	mv
 =============================== */
#mv {
  background-image: url(../img/campaign/mv_bg.jpg);
}
@media screen and (max-width: 750px) {
  #mv {
    background-image: url(../img/campaign/mv_bg_sp.jpg);
  }
}

/* ===============================
	campaign
 =============================== */
#campaign {
  margin-top: 80px;
  margin-bottom: 146px;
}
#campaign ul {
  display: flex;
  flex-wrap: wrap;
  gap: 80px 40px;
  margin-bottom: 80px;
}
#campaign li {
  width: calc((100% - 40px) / 2);
  display: none;
}
#campaign li:nth-child(-n+10) {
  display: block;
}
#campaign .campaign_img {
  max-width: 620px;
  max-height: 350px;
  background: var(--C-black);
  aspect-ratio: 620 / 350;
  transition: .6s;
}
#campaign li:hover .campaign_img {
  opacity: .6;
}
#campaign .campaign_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#campaign .time_con {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 16px;
}
#campaign .time_con span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--C-white);
  background: var(--C-accent-green);
  width: 131px;
  height: 26px;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#campaign .time_con time {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  font-weight: 400;
}
#campaign h2 {
  margin-top: 12px;
}
@media screen and (max-width: 750px) {
  #campaign {
    margin-top: 10.66666666666667vw;
    margin-bottom: 19.2vw;
  }
  #campaign ul {
    gap: 10.66666666666667vw 0;
    margin-bottom: 12.8vw;
  }
  #campaign li {
    width: 100%;
  }
  #campaign .campaign_img {
    max-height: 350px;
    aspect-ratio: 620 / 350;
  }
  #campaign .time_con {
    gap: 4.26666666666667vw;
    margin-top: 4.26666666666667vw;
  }
  #campaign .time_con span {
    font-size: 3.2vw;
    width: 35.2vw;
    height: 6.93333333333333vw;
    border-radius: 3.46666666666667vw;
  }
  #campaign .time_con time {
    font-size: 3.73333333333333vw;
  }
  #campaign h2 {
    margin-top: 4.26666666666667vw;
  }
}

/* ===============================
	campaign_detail_con
 =============================== */
#campaign_detail_con {
  background-image: none;
}
#campaign_detail_con #mv {
  background-image: none;
}
#campaign_detail {
  margin-top: 71px;
  margin-bottom: 160px;
}
#campaign_detail h1 {
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 500;
  position: relative;
}
#campaign_detail h1::after {
  content: '';
  background: var(--C-line-gray);
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  bottom: -32px;
  left: 0;
}
@media screen and (max-width: 750px) {
  #campaign_detail {
    margin-top: 16.8vw;
    margin-bottom: 17.06666666666667vw;
  }
  #campaign_detail h1 {
    font-size: 6.4vw;
  }
  #campaign_detail h1::after {
    bottom: -4.26666666666667vw;
  }
}

#campaign_detail_con .title-03 {
  margin-top: 80px;
}
@media screen and (max-width: 750px) {
  #campaign_detail_con .title-03 {
    margin-top: 17.06666666666667vw;
  }
}

#campaign_detail_con .btn {
  margin-top: 91px;
}
@media screen and (max-width: 750px) {
  #campaign_detail_con .btn {
    margin-top: 19.73333333333333vw;
  }
}

/* ===============================
	property
 =============================== */
#property {
  background: var(--C-sub);
  padding-top: 120px;
  padding-bottom: 160px;
}
#property > .wrap {
  container-type: inline-size;
}
#property .title-04 {
  margin-bottom: 40px;
}
@media screen and (max-width: 750px) {
  #property {
    padding-top: 17.06666666666667vw;
    padding-bottom: 21.33333333333333vw;
  }
  #property .title-04 {
    margin-bottom: 6.4vw;
  }
  #property .pickup_list li {
    display: none;
  }
  #property .pickup_list li:nth-child(-n+3) {
    display: block;
  }
}

/* ===============================
	btn_area
 =============================== */
.btn_area {
  margin-top: 80px;
  margin-bottom: 160px;
}
@media screen and (max-width: 750px) {
  .btn_area {
    margin-top: 12.8vw;
    margin-bottom: 21.33333333333333vw;
  }
}