@charset "utf-8";

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.lp-wrapper {
  width: 100%;
}

.lp-inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.lp-inner h1,
.lp-inner h2,
.lp-inner h3,
.lp-inner p {
  padding: 0;
  margin: 0;
}

.lp-inner img {
  display: block;
  height: auto;
  width: 100%;
  vertical-align: bottom;
}

.lp-inner .cv {
  background: #fff;
}

.lp-inner .cv01 {
  padding: 6% 0 1.5%;
}

.lp-inner .cv02 {
  padding: 4% 0 2%;
}

.lp-inner .cv03 {
  padding: 4.5% 0 2%;
}

.lp-inner .cv04 {
  padding: 5% 0 1.5%;
}

.lp-inner .cv .cv-title {
  width: 68.1%;
  margin: 0 auto 3%;
}

.lp-inner .cv .cv-btn {
  width: 94.7%;
  margin: 0 auto 8%;
  filter: drop-shadow(0 10px 17px rgba(0, 0, 0, 0.25));
  transition: opacity .4s ease-in-out;
  opacity: 1;
}

.lp-inner .cv .cv-btn:hover {
  opacity: .4;
}

.lp-inner .faq {
  background: url(/images/promotion/entry01/faq-bg.png) top left no-repeat;
  background-size: cover;
  padding-bottom: 16%;
}

.lp-inner .faq .faq-box {
  display: block;
  width: 89.5%;
  margin: 0 auto 7%;
}

.lp-inner .faq .faq-box:last-child {
  margin-bottom: 0;
}

.lp-inner .faq .faq-box dt {
  position: relative;
  cursor: pointer;
}

.lp-inner .faq .faq-box dt::before {
  content: '';
  position: absolute;
  display: block;
  top: 37%;
  right: 3.5%;
  width: min(4.7vw, 35px);
  height: min(4.7vw, 35px);
  background: url(/images/promotion/entry01/faq-btn-before.png) top left no-repeat;
  background-size: contain;
}

.lp-inner .faq .faq-box dt.clicked::before {
  background: url(/images/promotion/entry01/faq-btn-after.png) top left no-repeat;
  background-size: contain;
}

.lp-inner .faq .faq-box dd {
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: 0.4s;
}

.lp-inner .faq .faq-box dd.is-open {
  height: auto;
  opacity: 1;
}

.fixd-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 750px;
  margin: auto;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  z-index: 3
}

.fixd-inner {
  position: relative;
  width: 100%;
  margin: 0 auto 2%
}

.fixd-container.is-show {
  visibility: visible;
  opacity: 1
}

.fixd-inner .fixed-btn {
  display: block;
  width: 94.7%;
  margin: 0 auto 4%;
  filter: drop-shadow(0 10px 17px rgba(0, 0, 0, .25));
  transition: opacity .4s ease-in-out;
  opacity: 1;
}

.fixd-inner .fixed-btn:hover {
  opacity: .4;
}

@media screen and (max-width:750px) {

  .lp-inner .cv .cv-btn,
  .fixd-inner .fixed-btn {
    filter: drop-shadow(0 1.3vw 2.3vw rgba(0, 0, 0, .25));
  }
}

.point01-01-02 {
  background: no-repeat top/100% url(/images/promotion/entry01/point01-01-02-background.png);
  display: grid;
  gap: 0 6.4%;
  grid-template-columns: 1fr 1fr;
  padding: 3.2% 6.4% 0;
}

.point01-01-02 li:nth-child(n+3) {
  margin-top: 10%
}

.sec03-10-02-container,
.point02-01-02-container,
.point04-02-list-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sec03-10-02,
.point02-01-02,
.point04-02-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 1.6%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.sec03-10-02 {
  background: no-repeat top/100% url(/images/promotion/entry01/sec03-10-02-background.png);
  padding: 16px 0 40px;
}

.point02-01-02 {
  background: no-repeat top/100% url(/images/promotion/entry01/point02-01-02-background.png);
  padding: 0 calc(20 / 750 * 100%);
  width: 100%;
}

.sec03-10-02 > li,
.point02-01-02 > li {
  width: calc(100% / 3 - calc(10 * 2 / 750 * 100%));
}

.point04-02 {
  position: relative;
}

.point04-02-list {
  gap: 8px 14px;
  left: 0;
  position: absolute;
  right: 0;
  top: 21%;
  width: 66%;
}

.point04-02-list > li {
  width: calc((100% /3) - 14px)
}

.sec03-10-02 a > img,
.point01-01-02 a > img,
.point02-01-02 a > img,
.point04-02 a > img {
  transition: opacity .4s ease-in-out;
}

.sec03-10-02 a:hover > img,
.point01-01-02 a:hover > img,
.point02-01-02 a:hover > img,
.point04-02 a:hover > img {
  opacity: .7;
}

.lp-inner .price-note {
  line-height: normal;
  font-size: .75rem;
  padding-left: .6rem;
  padding-right: .6rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .lp-inner .price-note {
    font-size: 1rem;
  }
}

.cv-btn + .price-note {
  margin-top: -4%;
  padding-bottom: 2.4%;
}


.copyright {
  font-size: small;
  line-height: normal;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .12rem 1rem;
  align-items: center;
}

.copyright > li {
  display: inline-block;
}

.break-after {
  flex-basis: 100%;
}