/* 追加コーナーだけに適用する、テストページ専用のスタイル */
/* 紙の模様と四辺の切り口を分離し、縦に伸びても画像の端が現れないようにする */
html body main .toolbox {
  background: none;
  isolation: isolate;
}

html body main .toolbox > .paper-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #ffcfdf url(img/BG_Pink_Seamless.webp) repeat center top / 630px auto;
  -webkit-mask-image: url(img/paper-edge-left.svg), url(img/paper-edge-right.svg), linear-gradient(#000, #000);
  mask-image: url(img/paper-edge-left.svg), url(img/paper-edge-right.svg), linear-gradient(#000, #000);
  -webkit-mask-size:
    24px 96px,
    24px 96px,
    calc(100% - 32px) 100%;
  mask-size:
    24px 96px,
    24px 96px,
    calc(100% - 32px) 100%;
  -webkit-mask-position:
    left top,
    right top,
    center center;
  mask-position:
    left top,
    right top,
    center center;
  -webkit-mask-repeat: repeat-y, repeat-y, no-repeat;
  mask-repeat: repeat-y, repeat-y, no-repeat;
  clip-path: polygon(
    0 10px, 2% 7px, 4% 11px, 6% 6px, 8% 10px, 10% 7px,
    12% 11px, 14% 6px, 16% 10px, 18% 7px, 20% 11px, 22% 6px,
    24% 10px, 26% 7px, 28% 11px, 30% 6px, 32% 10px, 34% 7px,
    36% 11px, 38% 6px, 40% 10px, 42% 7px, 44% 11px, 46% 6px,
    48% 10px, 50% 7px, 52% 11px, 54% 6px, 56% 10px, 58% 7px,
    60% 11px, 62% 6px, 64% 10px, 66% 7px, 68% 11px, 70% 6px,
    72% 10px, 74% 7px, 76% 11px, 78% 6px, 80% 10px, 82% 7px,
    84% 11px, 86% 6px, 88% 10px, 90% 7px, 92% 11px, 94% 6px,
    96% 10px, 98% 7px, 100% 10px,
    100% calc(100% - 10px), 98% calc(100% - 7px), 96% calc(100% - 11px),
    94% calc(100% - 6px), 92% calc(100% - 10px), 90% calc(100% - 7px),
    88% calc(100% - 11px), 86% calc(100% - 6px), 84% calc(100% - 10px),
    82% calc(100% - 7px), 80% calc(100% - 11px), 78% calc(100% - 6px),
    76% calc(100% - 10px), 74% calc(100% - 7px), 72% calc(100% - 11px),
    70% calc(100% - 6px), 68% calc(100% - 10px), 66% calc(100% - 7px),
    64% calc(100% - 11px), 62% calc(100% - 6px), 60% calc(100% - 10px),
    58% calc(100% - 7px), 56% calc(100% - 11px), 54% calc(100% - 6px),
    52% calc(100% - 10px), 50% calc(100% - 7px), 48% calc(100% - 11px),
    46% calc(100% - 6px), 44% calc(100% - 10px), 42% calc(100% - 7px),
    40% calc(100% - 11px), 38% calc(100% - 6px), 36% calc(100% - 10px),
    34% calc(100% - 7px), 32% calc(100% - 11px), 30% calc(100% - 6px),
    28% calc(100% - 10px), 26% calc(100% - 7px), 24% calc(100% - 11px),
    22% calc(100% - 6px), 20% calc(100% - 10px), 18% calc(100% - 7px),
    16% calc(100% - 11px), 14% calc(100% - 6px), 12% calc(100% - 10px),
    10% calc(100% - 7px), 8% calc(100% - 11px), 6% calc(100% - 6px),
    4% calc(100% - 10px), 2% calc(100% - 7px), 0 calc(100% - 10px)
  );
}

html body main .toolbox > h2,
html body main .toolbox > .intro,
html body main .toolbox > .tools {
  position: relative;
  z-index: 1;
}

html body main .toolbox .tools .single:nth-of-type(4) .movie::before {
  content: "";
  background: url(img/4.svg) no-repeat center / contain;
}

html body main .toolbox .tools .single:nth-of-type(5) .movie::before {
  content: "";
  background: url(img/5.svg?v=3) no-repeat center / contain;
}

html body main .toolbox .tools .single:nth-of-type(6) .movie::before {
  content: "";
  background: url(img/6.svg?v=3) no-repeat center / contain;
}

html body main .toolbox::before,
html body main .toolbox::after {
  z-index: 2;
}

html body main .otona {
  padding-bottom: 70px;
}

html body main .app-section,
html body main .related-section {
  padding: 70px 24px;
}

html body main .app-section {
  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  //background: url(img/BG_White_PC.webp) repeat;
  background: #fff;
  background-size: 440px auto;
  border-radius: 40px;
  border: 2px solid #333;
}

html body main .related-section {
  background: transparent;
  box-sizing: border-box;
  max-width: 1000px;
  margin: 60px auto 0;
  border-radius: 32px;
  padding-bottom: 120px;
  padding: 0;
}

html body main .section-inner {
  //max-width: 940px;
  margin: 0 auto;
}

html body main .app-section h2,
html body main .related-section h2 {
  color: #333;
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.5;
  margin: 0 0 30px;
  margin-bottom: 0;
}

html body main .related-section h2 {
  margin-bottom: 1em;
}

html body main .app-illustration {
  display: block;
  width: min(100%, 350px);
  height: auto;
  margin: 0 auto 32px;
}

html body main .app-section p {
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 16px;
  line-height: 1.9;
}

html body main .app-features {
  max-width: 760px;
  box-sizing: border-box;
  margin: 32px auto;
  padding: 26px 30px;
  background: #ffdf23;
  border-radius: 20px;
}

html body main .app-features h3 {
  color: #171717;
  font-size: 20px;
  margin: 0 0 12px;
}

html body main .app-features ul {
  list-style: disc;
  padding-left: 1.5em;
}

html body main .app-features li {
  font-size: 16px;
  line-height: 1.8;
  margin: 6px 0;
}

html body main .app-downloads {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}

html body main .app-store-badge,
html body main .google-play-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
}

html body main .app-store-badge {
  width: 200px;
}

html body main .google-play-badge {
  width: 250px;
}

html body main .app-store-badge img,
html body main .google-play-badge img {
  display: block;
  width: 100%;
  height: auto;
}

html body main .app-store-badge:focus-visible,
html body main .google-play-badge:focus-visible {
  outline: 3px solid #ff552c;
  outline-offset: 4px;
}

html body main .app-section p.store-credit {
  max-width: 760px;
  margin: 12px auto 0;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

html body main .store-credit span {
  display: block;
}

html body main .store-link {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 200px;
  min-height: 74px;
  padding: 12px 22px;
  background: #171717;
  border: 2px solid #171717;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.2s,
    color 0.2s;
}

html body main .store-link:hover,
html body main .store-link:focus-visible {
  background: #fff;
  color: #171717;
}

html body main .store-device {
  font-size: 13px;
}

html body main .store-name {
  font-size: 17px;
  font-weight: 700;
}

html body main .related-links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
}

html body main .related-links li {
  min-width: 0;
}

html body main .related-links a {
  box-sizing: border-box;
  display: block;
  height: 100%;
  padding: 24px;
  border: 2px solid #333;
  border-radius: 18px;
  background: #fff;
  color: #171717;
  text-decoration: none;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

html body main .related-links a:hover,
html body main .related-links a:focus-visible {
  border-color: #ff552c;
  transform: translateY(-3px);
}

html body main .related-name {
  display: block;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  transition: color 0.2s;
}

html body main .related-links a:hover .related-name,
html body main .related-links a:focus-visible .related-name {
  color: #ff552c;
}

html body main .related-description {
  display: block;
  font-size: 15px;
  line-height: 1.8;
}

html body footer {
  margin-top: 0;
  background-image: url(img/Footer_SP.webp), url(img/BG_Beige_PC.webp);
  background-repeat: no-repeat, repeat;
  background-size:
    267% auto,
    auto;
  background-position:
    calc(50% + 19px) 0,
    center;
}

@media (min-width: 1000px) {
  html body footer {
    background-image: url(img/Footer_PC.webp), url(img/BG_Beige_PC.webp);
    background-size: cover, auto;
    background-position:
      top center,
      center;
  }
}

@media (max-width: 740px) {
  html body main .otona .points .single:not(:last-child) {
    margin-bottom: 40px;
  }
  html body main .app-section,
  html body main .related-section {
    padding: 54px 24px;
  }
  html body main .app-section {
    margin-top: 32px;
  }
  html body main .related-section {
    padding: 0;
  }
  html body main .app-section p,
  html body main .app-features li {
    font-size: 14px;
  }
  html body main .app-features {
    padding: 20px 22px;
  }
  html body main .related-links {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  html body main .related-links a {
    padding: 20px;
  }
  html body main .store-link {
    width: 100%;
    max-width: 320px;
  }
}