.main {
  background-color: #fb9d3b;
  background-image: radial-gradient(circle, #fbb53b 2px, transparent 2px), radial-gradient(circle, #fbb53b 2px, transparent 2px);
}

.main .bg-img {
  --corner-size: 22px;
  --bgborder-size: 1px;
  position: relative;
  background: #fdfdfd;
  padding: var(--spacing-20) var(--spacing-5);

  clip-path: polygon(var(--corner-size) 0%, calc(100% - var(--corner-size)) 0%, 100% var(--corner-size), 100% calc(100% - var(--corner-size)),
   calc(100% - var(--corner-size)) 100%, var(--corner-size) 100%, 0% calc(100% - var(--corner-size)), 0% var(--corner-size));
}
@media screen and (max-width: 767px) {
  .main .bg-img {
    --corner-size: 5.87vw;
  }
}
.main .bg-img::before {
  position: absolute;
  z-index: 0;
  content: '';
  background: #fb9d3b;

  inset: calc(var(--spacing-5) - var(--bgborder-size));
  clip-path: polygon(var(--corner-size) 0%, calc(100% - var(--corner-size)) 0%, 100% var(--corner-size), 100% calc(100% - var(--corner-size)),
   calc(100% - var(--corner-size)) 100%, var(--corner-size) 100%, 0% calc(100% - var(--corner-size)), 0% var(--corner-size));
}
.main .bg-img::after {
  position: absolute;
  z-index: 0;
  content: '';
  background: #fdfdfd;

  inset: var(--spacing-5);
  clip-path: polygon(var(--corner-size) 0%, calc(100% - var(--corner-size)) 0%, 100% var(--corner-size), 100% calc(100% - var(--corner-size)),
   calc(100% - var(--corner-size)) 100%, var(--corner-size) 100%, 0% calc(100% - var(--corner-size)), 0% var(--corner-size));
}

.main .bg-img > :first-child {
  margin-top: 0;
}
.main .bg-img > :last-child {
  margin-bottom: 0;
}

.main .container,
.main .container--lg {
  position: relative;
  z-index: 1;
}

.main .scroll__img {
  width: 14%;
  margin: auto;
}

.main .hero {
  margin-bottom: var(--spacing-15);
}
.main .manga01 {
  margin-top: var(--spacing-15);
}

.main .about .sec__ttl {
  margin-top: var(--spacing-15);
}
.main .about-list .about-item:nth-child(even) {
  background: var(--bgcolor-cream);
}
.main .about-item {
  position: relative;
  padding: var(--spacing-15);
  padding-left: var(--spacing-50);
  background: var(--bgcolor-pink);
  border-radius: var(--border-r10);
}
.main .about-item + .about-item {
  margin-top: var(--spacing-10);
}
.main .about-item::before {
  position: absolute;
  content: "";
  top: var(--spacing-15);
  left: var(--spacing-15);
  width: var(--spacing-30);
  height: var(--spacing-30);
  display: block;
  background: url('./../img/004/icon-check.svg') no-repeat;
  background-size: contain;
  background-position: center;
}
.main .about-item__ttl {
  display: inline;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-700);
  font-weight: 700;
  line-height: 1.3;
  background: linear-gradient(transparent 40%, var(--color-yellow) 0%);
}
.main .about-item__txt {
  margin-top: .4em;
}
.main .about-item__note {
  font-size: .57em;
  margin-top: .8em;
}

.main .about .sec-btn a {
  margin: var(--spacing-15) auto  var(--spacing-10);
}