@charset "UTF-8";

* {
  margin: 0;
}

img{
  width: 100%;
}
a{
  text-decoration: none;
  color: inherit;
}
#campaign_main{
  color: #866B6C;
  background-color: #CAB7A7;
}
#campaign_main .pc_only{
  display: block;
}

#campaign_main p{
  line-height: 1.6;
  font-size: clamp(16px, 13.333px + 0.347vw, 20px);
}
.campaign_wrapper{
  background-color: #fff;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}
#campaign_1 img{
  position: relative;
  max-height: 100vh;
  object-fit: contain;
}
#campaign_2{
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  padding: 10% 0 5%;
}
#campaign_2 h2{
  margin: 0 auto 5%;
  text-align: center;
  font-size: clamp(1.125rem, 0.943rem + 0.777vw, 1.875rem);
  font-weight: bold;
}

#campaign_2 .form_link{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 8% auto 5%;
}
#campaign_2 .form_link p{
  margin-bottom: 1em;
}
#campaign_2 .form_link a.btn{
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: 0.5em 3em;
  font-weight: bold;
  border: 2px solid #866B6C;
  background-color: #fff7ce;
}
#campaign_2 .form_link a.btn:hover{
  color: #fbecbf;
  background-color: #4d363b;
}

#campaign_2 table{
  font-size: clamp(16px, 13.333px + 0.347vw, 20px);
}

#campaign_2 table th{
  width: 3em;
  vertical-align: top;
  font-weight: bold;
}

#campaign_2 table th,td{
  padding: .2em 0;
}

#campaign_2 .img_box {
  max-width: 500px;
  width: 90%;
  margin: 5% auto;
  border: 2px solid #866B6C;

}

#campaign_3{
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  padding: 5% 0;
  border-top: 4px dotted;
  border-bottom: 4px dotted;
  margin-bottom: 5%;
}

#campaign_3 h2{
  margin: 0 auto 5%;
  text-align: center;
  font-size: clamp(1.125rem, 0.943rem + 0.777vw, 1.875rem);
  font-weight: bold;
}
#campaign_3 .campaign_howto{
  display: flex;
  width: 100%;
  gap: 5%;
}

#campaign_3 .step_container{
  flex: 1;
  display: flex;
  flex-direction: column;
}

#campaign_3 .step_text{
  text-align: center;
  flex-grow: 1;
}
#campaign_3 .step_text p{
  font-size: 14px;
}
#campaign_3 .step_text p span{
  font-size: clamp(16px, 9.379px + 0.862vw, 18px);
  font-weight: bold;
}
#campaign_3 .step_head{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

#campaign_4{
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  padding: 5% 0;
  text-align: left;
}

#campaign_4 h2{
  margin: 0 auto 5%;
  text-align: center;
  font-size: clamp(1.125rem, 0.943rem + 0.777vw, 1.875rem);
  font-weight: bold;
}

#campaign_4 h3{
  background-color: #fff7ce;
  text-indent: 1em;
  border-radius: 5px;
  margin: 0.4em auto;
}

#campaign_4 ul.brand-list{
  padding-left: 1em;
}
#campaign_4 a.btn{
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: 0.5em 3em;
  font-weight: bold;
  border: 2px solid #866B6C;
  background-color: #fff7ce;
  margin: 2em auto;
  text-align: center;
}
#campaign_4 a.btn:hover{
  color: #fbecbf;
  background-color: #4d363b;
}

#campaign_main .footer{
  background-color: #4d363b;
  color: #fff;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;

}
#campaign_main .footer .footer_link{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;

}
#campaign_main .footer .footer_link a{
  font-size: 15px;
  text-align: center;
  padding: 1em 1em 0;
}
#campaign_main .footer #logo{
  width: 30%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 0;
}

@media(max-width:768px){

  #campaign_main .pc_only{
    display: none;
  }
  #campaign_2 .img_box{
    width: 80%;
  }
  .campaign_howto{
    flex-direction: column;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
  #campaign_3 .step_img{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
  #campaign_3 .step_text p span{
    font-size: clamp(16px, 12.368px + 0.995vw, 20px);
  }
  #campaign_main .footer{
    flex-direction: column;
  }
}