@charset "UTF-8";

/* Campaign 2025/11/01
======================================================= */
main.campaign {
  padding-top: 4rem;
}

.campaign *,
.campaign *::before,
.campaign *::after {
    box-sizing: border-box;
}

.campaign a.underline {
  color: #283960;
}

.campaign h1 {
  margin-bottom: 2em;
}

.campaign h2 {
  margin-bottom: 1em;
  padding-bottom: .5em;
  border-bottom: 4px solid #00435F;
  text-indent: .25em;
}

.campaign p:not(:last-child) {
  margin-bottom: 1em;
}

.campaign section {
  margin: 5rem 0;
}

.campaign section:first-child {
  margin-top: 0;
}

.campaign ul {
  list-style: disc;
  margin-bottom: 2em;
  padding-left: 2em;
}

.campaign ol {
  list-style: decimal;
  margin-bottom: 2em;
  padding-left: 2em;
}

.campaign li:not(:last-child) {
  margin-bottom: .5em;
}

/* Plan
----------------------------------------------------------------------------------------------------  */
.campaign .plan {
  display: flex;
  justify-content: center;
  gap: 1rem 4rem;
  margin: 3vh 0 0 0;
  padding-left: 0;
  list-style: none;
}

.campaign .plan li {
  flex-basis: calc((100% - 20rem) / 2);
  margin-bottom: 0;
  text-align: center;
}

.campaign .plan li picture {
  display: inline-block;
  margin-bottom: .5em;
}

.campaign .plan li strong {
  color: var(--color-main-conversion);
  font-size: 2rem;
}

@media (max-width: 767px) {

  .campaign .plan {
    flex-direction: column;
    padding: 0 3rem;
  }

  .campaign .plan li {
    flex-basis: auto;
    padding: 0 1rem ;
    text-align: left;
  }

  .campaign .plan li {
    font-size: 1.8rem;
  }

}

/* Step
----------------------------------------------------------------------------------------------------  */
.campaign .step {
  display: flex;
  justify-content: center;
  gap: 1rem 2rem;
  margin: 3vh 0 0 0;
  padding-left: 0;
  list-style: none;
}

.campaign .step li {
  margin-bottom: 0;
  flex-basis: 22rem;
}

@media (max-width: 767px) {

  .campaign .step {
    flex-direction: column;
    padding: 0 4rem;
  }

  .campaign .step li:first-child {
    flex-basis: auto;
  }

  .campaign .step li {
    flex-basis: auto;
  }

}

/* About
----------------------------------------------------------------------------------------------------  */
.campaign .about h2 {
  font-size: 1.8rem;
}

/* Note
----------------------------------------------------------------------------------------------------  */
.campaign ol.note-num,
.campaign ol.note-amazon {
  padding-left: 0;
  list-style: none;
}

.campaign ol.note-num li,
.campaign ol.note-amazon li {
  counter-increment: num;
	position: relative;
}

.campaign ol.note-num li {
	padding-left: 3rem;
}

.campaign ol.note-num li::before,
.campaign ol.note-amazon li::before {
  position: absolute;
	top: 0;
	left: 0;
}

.campaign ol.note-num li::before {
	content: '\203B' counter(num) '';
	width: 3rem;
}

.campaign ol.note-amazon li {
  margin-bottom: .25em;
	padding-left: 2rem;
  font-size: 1.2rem;
  color: #444444;
}

.campaign ol.note-amazon li::before {
	content: '*' counter(num) '';
	width: 2rem;
}

.campaign dl.note-book {
  display: flex;
  flex-wrap: wrap;
}

.campaign dl.note-book dt {
  flex-basis: 14rem;
  padding: 1rem;
  border-bottom: 1px dotted #444444;
}

.campaign dl.note-book dd {
  flex-basis: calc(100% - 20rem);
  padding: 1rem;
  border-bottom: 1px dotted #444444;
}

@media (max-width: 767px) {

  .campaign dl.note-book {
    flex-direction: column;
  }

  .campaign dl.note-book dt {
    flex-basis: auto;
    margin-bottom: .5em;
    padding: 0 .5em;
    border-bottom: none;
    font-weight: bold;
  }

  .campaign dl.note-book dt:not(:first-child) {
    padding-top: 1.6rem;
  }

  .campaign dl.note-book dd {
    flex-basis: calc(100% - 20rem);
    padding: 0 0 1.6rem .5em;
    border-bottom-color: #666666;
  }

}

/* Button
----------------------------------------------------------------------------------------------------  */
.campaign .btn.conversion {
  margin: clamp(2rem, -0.423rem + 5.06vw, 4rem) 0 4rem 0;
  background: url("/campaign/20241101/img/btn_bg.png") repeat-x left bottom;
  background-size: 50%;
}

.campaign .btn.conversion p {
    margin-bottom: .5em;
    font-size: clamp(1.8rem, 1.76rem + 0.2vw, 2rem);
}

.campaign .btn.conversion p strong {
    display: inline-block;
    position: relative;
    padding: .4rem 3.2rem;
    color: var(--color-main-conversion);
}

.campaign .btn.conversion p strong::before,
.campaign .btn.conversion p strong::after {
    content: '';
    display: block;
    position: absolute;
    top: 52%;
    width: 1.4em;
    height: .15rem;
    background-color: #D14600;
    border-radius: 50vh;
}

.campaign .btn.conversion p strong::before {
    left: 0;
    transform: rotate(50deg);
}

.campaign .btn.conversion p strong::after {
    right: 0;
    transform: rotate(-50deg);
}

.campaign .btn.conversion a {
  min-width: 40rem;
  padding: 1.6rem;
  box-shadow: 0px 0px 15px -5px #666666;
  font-size: clamp(2rem, 1.515rem + 1.01vw, 2.4rem);
}

.campaign .btn.primary {
  margin: clamp(2rem, -0.423rem + 5.06vw, 4rem) 0 4rem 0;
}
.campaign .btn.primary p:has(strong) + p {
  text-align: left;
}
.campaign .btn.primary p strong {
  display: inline-block;
  color: var(--color-main-conversion);
  font-size: clamp(2rem, 1.886rem + 0.57vw, 2.4rem)
}

.campaign .btn.primary a {
  min-width: 32rem;
  padding: 1.6rem 2rem;
  --btn-color: var(--color-main-conversion);
  color: var(--color-w);
}

@media (max-width: 767px) {

  .campaign .btn.conversion a,
  .campaign .btn.primary a {
    min-width: 0;
    width: 100%;
  }

}