@charset "UTF-8";

body.cp01 {
  background-color: #ffdf00;
}

.bg--cp01 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  background: url("../../images/cp01/image_kv_bg.png") no-repeat center min(42 / 1280 * 100vw, 4.2rem) / min(1280 / 1280 * 100vw, 128rem);
}
@media (max-width: 767px) {
  .bg--cp01 {
    background: url("../../images/cp01/image_kv_bg_sp.png") no-repeat top center / contain;
  }
}

/* ----------------------------------------------------------------------------------------------------
*  KV
* --------------------------------------------------------------------------------------------------*/

.kv {
  padding-block: min(140 / 1280 * 100vw, 14rem) min(105 / 1280 * 100vw, 10.5rem);
}
.kv__inner {
  display: flex;
  flex-direction: column;
  row-gap: min(60 / 1280 * 100vw, 6rem);
  width: min(914 / 1280 * 100vw, 91.4rem);
  margin-inline: auto;
}
.kv__title {
  width: 100%;
}
.kv__present {
  width: min(771 / 1280 * 100vw, 77.1rem);
  margin-inline: auto;
}

@media (max-width: 767px) {
  section.kv {
    padding-inline: 0;
  }
  .kv {
    padding-block: min(60 / 750 * 100vw, 6rem) min(70 / 750 * 100vw, 7rem);
  }
  .kv__inner {
    row-gap: min(80 / 750 * 100vw, 8rem);
    width: 100%;
  }
  .kv__present {
    width: min(680 / 750 * 100vw, 68rem);
  }
}

/* ----------------------------------------------------------------------------------------------------
*  PARTICIPATE
* --------------------------------------------------------------------------------------------------*/

.participate__inner {
  width: min(787 / 1280 * 100vw, 78.7rem);
  margin-inline: auto;
}
.participate__title {
  width: min(444.5 / 1280 * 100vw, 44.45rem);
  margin-inline: auto;
  margin-bottom: min(27 / 1280 * 100vw, 2.7rem);
}

.howto {
  margin-bottom: min(50 / 1280 * 100vw, 5rem);
}
.howto__box {
  position: relative;
  background: linear-gradient(
  to right,
  transparent 0,
  transparent min(8.5 / 1280 * 100vw, 0.85rem),
  #ffdf00 min(8.5 / 1280 * 100vw, 0.85rem),
  #ffdf00 calc(100% - min(8.5 / 1280 * 100vw, 0.85rem)),
  transparent calc(100% - min(8.5 / 1280 * 100vw, 0.85rem)),
  transparent 100%
);
}
.howto__box::before,
.howto__box::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.3rem;
  height: calc(100% - (min(30 / 1280 * 100vw, 3rem)));
}
.howto__box::before {
  left: min(8.5 / 1280 * 100vw, 0.85rem);
}
.howto__box::after {
  right: min(8.5 / 1280 * 100vw, 0.85rem);
}
.howto__header {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: min(20 / 1280 * 100vw, 2rem);
  width: calc(100% - ((min(8.5 / 1280 * 100vw, 0.85rem)) * 2) - (0.3rem * 2));
  min-height: min(60 / 1280 * 100vw, 6rem);
  margin-inline: auto;
}
.howto__title {
  font-size: min(30 / 1280 * 100vw, 3rem);
  font-weight: 700;
  text-align: center;
  color: #FFF;
}
.howto__list {
  width: calc(100% - ((min(8.5 / 1280 * 100vw, 0.85rem)) * 2) - (0.3rem * 2));
  margin-inline: auto;
  padding-inline: min(20 / 1280 * 100vw, 2rem);
}
.howto__list li {
  position: relative;
  padding-top: min(55 / 1280 * 100vw, 5.5rem);
  padding-left: min(27 / 1280 * 100vw, 2.7rem);
  padding-bottom: min(55 / 1280 * 100vw, 5.5rem);
}
.howto__list li:first-child {
  padding-top: min(45 / 1280 * 100vw, 4.5rem);
}
.howto__list li:not(:last-child) {
  padding-bottom: calc((min(55 / 1280 * 100vw, 5.5rem)) + 0.5rem);
}
.howto__list li:not(:last-child):after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  mask: url("../../images/cp01/pattern_dot.svg") repeat-x left center / contain;
}
.howto__sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: calc(100% - ((min(8.5 / 1280 * 100vw, 0.85rem)) * 2) - (0.3rem * 2));
  margin-inline: auto;
  margin-bottom: min(60 / 1280 * 100vw, 6rem);
}
.howto__sample > picture:nth-child(1) {
  display: block;
  width: min(717.5 / 1280 * 100vw, 71.75rem);
}
.howto__sample > picture:nth-child(2) {
  display: block;
  width: min(717 / 1280 * 100vw, 71.7rem);
  margin-block: -8.5% min(30 / 1280 * 100vw, 3rem);
}
.howto__sample > img {
  width: min(621 / 1280 * 100vw, 62.1rem);
  margin-inline: auto;
}
.howto__present {
  display: block;
  position: relative;
  z-index: 1;
}

.participate .linkButton {
  width: min(340 / 1280 * 100vw, 34rem);
  margin-bottom: min(70 / 1280 * 100vw, 7rem);
}
.participate .linkButton span {
  font-size: min(25 / 1280 * 100vw, 2.5rem);
  padding: min(8 / 1280 * 100vw, 0.8rem) min(7.5 / 1280 * 100vw, 0.75rem) min(11 / 1280 * 100vw, 1.1rem) calc((min(7.5 / 1280 * 100vw, 0.75rem)) * 5);
}

.howto--instagram .howto__logo {
  width: min(43 / 1280 * 100vw, 4.3rem);
}
.howto--instagram .howto__list li:last-child {
  padding-bottom: min(34 / 1280 * 100vw, 3.4rem);
}
.howto--instagram .howto__box::before,
.howto--instagram .howto__box::after,
.howto--instagram .howto__header,
.howto--instagram .howto__list li:not(:last-child):after {
  background-color: #604DCD;
}
.howto--instagram .howto__present,
.howto--x .howto__present {
  width: min(775 / 1280 * 100vw, 77.5rem);
  margin-inline: auto;
}

.howto--x .howto__logo {
  width: min(34 / 1280 * 100vw, 3.4rem);
}
.howto--x .howto__box::before,
.howto--x .howto__box::after,
.howto--x .howto__header,
.howto--x .howto__list li:not(:last-child):after {
  background-color: #000;
}
.howto--x .howto__list li:last-child {
  padding-bottom: min(38 / 1280 * 100vw, 3.8rem);
}

@media (max-width: 767px) {
  section.participate {
    padding-inline: min(35 / 750 * 100vw, 3.5rem);
  }
  .participate__inner {
    width: min(680 / 750 * 100vw, 68rem);
  }
  .participate__title {
    width: min(410 / 750 * 100vw, 41rem);
    margin-bottom: min(37 / 750 * 100vw, 3.7rem);
  }
  .howto {
    margin-bottom: min(65 / 750 * 100vw, 6.5rem);
  }

  .howto__box {
    background: linear-gradient(
    to right,
    transparent 0,
    transparent min(3 / 750 * 100vw, 0.3rem),
    #ffdf00 min(3 / 750 * 100vw, 0.3rem),
    #ffdf00 calc(100% - min(3 / 750 * 100vw, 0.3rem)),
    transparent calc(100% - min(3 / 750 * 100vw, 0.3rem)),
    transparent 100%
    );
  }
  .howto__box::before,
  .howto__box::after {
    height: calc(100% - (min(30 / 750 * 100vw, 3rem)));
  }
  .howto__box::before {
    left: min(3 / 750 * 100vw, 0.3rem);
  }
  .howto__box::after {
    right: min(3 / 750 * 100vw, 0.3rem);
  }
  .howto__header {
    column-gap: min(20 / 750 * 100vw, 2rem);
    width: calc(100% - ((min(3 / 750 * 100vw, 0.3rem)) * 2) - (0.3rem * 2));
    min-height: min(100 / 750 * 100vw, 10rem);
  }
  .howto__logo {
    width: min(56 / 750 * 100vw, 5.6rem);
  }
  .howto__title {
    font-size: min(32 / 750 * 100vw, 3.2rem);
  }
  .howto__list {
    width: calc(100% - ((min(3 / 750 * 100vw, 0.3rem)) * 2) - (0.3rem * 2));
    padding-inline: min(14 / 750 * 100vw, 1.4rem);
  }
  .howto__list li {
    padding-top: min(52 / 750 * 100vw, 5.2rem);
    padding-left: 0;
    padding-bottom: min(52 / 750 * 100vw, 5.2rem);
  }
  .howto__list li:first-child {
    padding-top: min(42 / 750 * 100vw, 4.2rem);
  }
  .howto__list li:not(:last-child) {
    padding-bottom: calc((min(52 / 750 * 100vw, 5.2rem)) + 0.5rem);
  }
  .howto__sample {
    width: calc(100% - ((min(3 / 750 * 100vw, 0.3rem)) * 2) - (0.3rem * 2));
    margin-bottom: min(55 / 750 * 100vw, 5.5rem);
  }
  .howto__sample > picture:nth-child(1) {
    width: min(610 / 750 * 100vw, 61rem);
  }
  .howto__sample > picture:nth-child(2) {
    width: min(610 / 750 * 100vw, 61rem);
    margin-block: -8% min(25 / 750 * 100vw, 2.5rem);
  }
  .howto__sample > img {
    width: min(526 / 750 * 100vw, 52.6rem);
  }

  .participate .linkButton {
    width: min(428 / 750 * 100vw, 42.8rem);
    margin-bottom: min(130 / 750 * 100vw, 13rem);
  }
  .participate .linkButton span {
    font-size: min(30 / 750 * 100vw, 3rem);
    padding: min(8 / 750 * 100vw, 0.8rem) min(10 / 750 * 100vw, 1rem) min(11 / 750 * 100vw, 1.1rem) calc((min(10 / 750 * 100vw, 1rem)) * 5);
  }

  .howto--instagram .howto__logo {
    width: min(56 / 750 * 100vw, 5.6rem);
  }
  .howto--instagram .howto__list li:last-child {
    padding-bottom: min(30 / 750 * 100vw, 3rem);
  }
  .howto--instagram .howto__present,
  .howto--x .howto__present {
    width: 100%;
  }

  .howto--x .howto__logo {
    width: min(44 / 750 * 100vw, 4.4rem);
  }
  .howto--x .howto__list li:last-child {
    padding-bottom: min(65 / 750 * 100vw, 6.5rem);
  }
}

/* ----------------------------------------------------------------------------------------------------
*  OTHER
* --------------------------------------------------------------------------------------------------*/

.other__inner {
  width: min(770 / 1280 * 100vw, 77rem);
  margin-inline: auto;
  background-color: #FFF;
  border-radius: min(30 / 1280 * 100vw, 3rem);
}
.other__text {
  font-size: min(21 / 1280 * 100vw, 2.1rem);
  font-weight: 700;
  color: #5E2C00;
  line-height: 1.9;
}
.other__text span {
  display: block;
}
.other__text span + span {
  margin-top: min(40 / 1280 * 100vw, 4rem);
}
.other__youtube {
  width: min(634 / 1280 * 100vw, 63.4rem);
  margin-inline: auto;
}
.other__youtube iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.other__inner--message {
  margin-bottom: min(55 / 1280 * 100vw, 5.5rem);
  padding: min(35 / 1280 * 100vw, 3.5rem) min(30 / 1280 * 100vw, 3rem) min(25 / 1280 * 100vw, 2.5rem) min(30 / 1280 * 100vw, 3rem);
}
.other__inner--message .other__title {
  font-size: min(40 / 1280 * 100vw, 4rem);
  font-weight: 900;
  text-align: center;
  color: #5E2C00;
  margin-bottom: min(35 / 1280 * 100vw, 3.5rem);
}
.other__inner--message .other__text span:first-child {
  letter-spacing: -0.004em;
}
.other__inner--yamachiku {
  margin-bottom: min(125 / 1280 * 100vw, 12.5rem);
  padding: min(38 / 1280 * 100vw, 3.8rem) min(30 / 1280 * 100vw, 3rem) min(35 / 1280 * 100vw, 3.5rem) min(30 / 1280 * 100vw, 3rem);
}
.other__inner--yamachiku .other__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 min(30 / 1280 * 100vw, 3rem);
  margin-bottom: min(30 / 1280 * 100vw, 3rem);
}
.other__inner--yamachiku .other__title {
  font-size: min(30 / 1280 * 100vw, 3rem);
  font-weight: 900;
  color: #5E2C00;
  line-height: 1.9;
  letter-spacing: -0.01em;
}
.other__inner--yamachiku .other__logo {
  width: min(169.5 / 1280 * 100vw, 16.95rem);
  margin-left: min(5 / 1280 * 100vw, 0.5rem);
}
.other__inner--yamachiku .other__text {
  margin-bottom: min(50 / 1280 * 100vw, 5rem);
}

@media (max-width: 767px) {
  section.other {
    padding-inline: min(35 / 750 * 100vw, 3.5rem);
  }
  .other__inner {
    width: min(680 / 750 * 100vw, 68rem);
    border-radius: min(60 / 750 * 100vw, 6rem);
  }
  .other__text {
    font-size: min(28 / 750 * 100vw, 2.8rem);
    line-height: 1.64;
  }
  .other__text span + span {
    margin-top: min(47 / 750 * 100vw, 4.7rem);
  }
  .other__youtube {
    width: min(594 / 750 * 100vw, 59.4rem);
  }

  .other__inner--message {
    margin-bottom: min(85 / 750 * 100vw, 8.5rem);
    padding: min(83 / 750 * 100vw, 8.3rem) min(42 / 750 * 100vw, 4.2rem) min(50 / 750 * 100vw, 5rem);
  }
  .other__inner--message .other__title {
    font-size: min(36 / 750 * 100vw, 3.6rem);
    margin-bottom: min(50 / 750 * 100vw, 5rem);
  }

  .other__inner--yamachiku {
    margin-bottom: min(110 / 750 * 100vw, 11rem);
    padding: min(100 / 750 * 100vw, 10rem) min(42 / 750 * 100vw, 4.2rem) min(50 / 750 * 100vw, 5rem);
  }
  .other__inner--yamachiku .other__header {
    flex-direction: column;
    justify-content: initial;
    gap: min(55 / 750 * 100vw, 5.5rem) 0;
    margin-bottom: min(50 / 750 * 100vw, 5rem);
  }
  .other__inner--yamachiku .other__title {
    font-size: min(40 / 750 * 100vw, 4rem);
    line-height: 1.6;
    letter-spacing: initial;
    text-align: center;
  }
  .other__inner--yamachiku .other__logo {
    width: min(340 / 750 * 100vw, 34rem);
    margin-left: 0;
  }
  .other__inner--yamachiku .other__text {
    margin-bottom: min(80 / 750 * 100vw, 8rem);
  }
}