/* Complete transparent image frames. Opt in only where decorative edges fit. */
.material-frame,
.material-frame-actions > .btn {
  position: relative;
}
.material-frame::after,
.material-frame-actions > .btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.home-intro-flow .material-frame--notice {
  border: 0;
  border-radius: 0;
  background: #ffffffd9;
  box-shadow: none;
  padding: 20px 30px;
}
.material-frame--notice::after {
  inset: -8px;
  background: none;
  border: 40px solid transparent;
  border-image: url('../asset/frame-notice-complete-v2.svg') 40 / 40px / 0 stretch;
}
.material-frame--notice .hero-news,
.material-frame--notice .hero-notice-label {
  position: relative;
  z-index: 4;
}
.material-frame-actions > .btn {
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.material-frame-actions > .btn {
  background: #f4f2e8;
  color: #284c39;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.material-frame-actions > .btn::after {
  inset: -2px;
  background: none;
  border: 12px solid transparent;
  border-image: url('../asset/frame-button-complete-v2.svg') 12 / 12px / 0 stretch;
}
.material-frame-actions > .btn:hover,
.material-frame-actions > .btn:focus-visible {
  background: #dce9d9;
  color: #203d2d;
  transform: none;
  box-shadow: 0 4px 14px #315f4917;
}
.material-frame-actions > .btn:focus-visible { outline: 2px solid #315f49; outline-offset: 5px; }
.home-intro-flow .material-frame--photo {
  overflow: visible;
  border: 1px solid #b49a5977;
  border-radius: 3px 18px 3px 18px;
  background: #fffffff2;
  box-shadow: 0 18px 44px #315f4925;
}
 .material-frame--photo .hero-img {
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border-radius: 2px 10px 2px 10px;
  clip-path: none;
}
.material-frame--photo::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid #b49a5944;
  border-radius: 1px 13px 1px 13px;
  pointer-events: none;
}
.material-frame--photo::after {
  inset: auto;
  width: 100px;
  height: 100px;
  left: -19px;
  top: -19px;
  background-image: url('../asset/frame-photo-corner-v1.png');
  background-size: contain;
}
:where(html.is-smartphone) .material-frame--notice::after { inset: -8px; }
:where(html.is-smartphone) .material-frame--photo::after {
  width: 64px;
  height: 64px;
  left: -9px;
  top: -9px;
}
:where(html.is-smartphone) .material-frame--photo .hero-img {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}

/* Remove the photo shadow on the smartphone hero while retaining its frame. */
:where(html.is-smartphone) .home-intro-flow .material-frame--photo {
  box-shadow: none;
}