@charset "utf-8";

/* ▼ 共通 ▼ */

img {
  max-width: 100%;
  height: auto;
}

.contents_wrap {
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .1);
}

.happybag  {
  margin-top: -5px;
  color: #3E3A39;
  letter-spacing: 0.07rem;
  scroll-behavior: smooth;
}

/* ▼ アンカーリンク ▼ */

.lead-wrap{
  position:relative;
}

.nav-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 5%;
}

.nav-txt {
  width: 82%;
}

.nav-alo-sttl {
  width: 41.6%;
  padding: 6.6% 0 0;
}

.nav-amb-sttl {
  width: 35.8%;
  padding: 0 0 2%;
}

.nav-alo {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.nav-alo a{
  display: inline-block;
  width: 45%;
}

/* ▼ オファー ▼ */

.offer {
  position: relative;
}

.offer .cv_btn {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: 2;
}

.offer .cv_btn.mukou {
   width: 65%;
   bottom: 12%;
}

.offer .cv_btn.aroma {
   width: 65%;
   bottom: 1%;
}

/*PC表示*/
@media screen and (min-width: 768px),print{
  .header {
    position: relative;
    z-index: 1;
  } 

  .contents_wrap  {
    background-image: url(https://d2w53g1q050m78.cloudfront.net/testorganic/uploads/nolife/img/pc/campaign/happybag/2026/bg_f2026.webp) ;
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden;
  }

  .happybag {
    width: 600px;
    margin: 0 auto;
    background: #FFF;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05), 0 0 10px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 0, 0, 0.05), 0 0 20px rgba(0, 0, 0, 0.15);
  }

  .notice {
    font-size: 1.6rem;
    padding: 6% 4% 4%;
  }

  .notice .notice-catch {
    font-size: 1.8rem;
    top: -8.2%;
    padding: 0.3rem 2rem;
  }

  .notice span {
    font-size: 2.2rem;
  }

  .nav-alo a {
    width: 45%;
  }

  .offer .product-list {
    font-size: 1.4rem;
    bottom: -4.5%;
  }

  #alo5.offer .product-list {
    bottom: 2.5%;
  }

  #amb5.offer .product-list {
    bottom: 0.5%;
  }

  .footer {
    margin-top: 0; 
  }
  
}