#main.shop-notification {
  --sn-ink: #172c49;
  --sn-blue: #1457ac;
  --sn-border: #d9e5f4;
  color: var(--sn-ink);
  font: 400 16px/1.75 "Noto Sans JP", sans-serif;
  width: min(100% - 48px, 1080px);
  max-width: 1080px;

  margin-inline: auto;
  padding-block: 40px 72px;
}
.shop-notification, .shop-notification * { box-sizing: border-box; }
.shop-notification :is(h1,h2,h3,p,figure) { margin: 0; }
.shop-notification :is(h1,h2,h3) { line-height: 1.4; font-weight: 800; }
.shop-notification h1 { font-size: clamp(29px, 4.1vw, 49px); margin-block: 14px 18px; }
.shop-notification h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 24px; }
.shop-notification h3 { font-size: 19px; margin-block: 10px; }
.sn-hero {
  padding: clamp(32px, 7vw, 82px) clamp(20px, 5vw, 60px);
  border-radius: 24px;
  background: linear-gradient(145deg, #f8fbff 15%, #deebff);
  text-align: center;
}
.shop-notification .sn-hero h1 {
  max-width: 18em;
  margin-inline: auto;
  font-size: clamp(28px, 5vw, 56px);
  text-wrap: balance;
}
.shop-notification .sn-hero > p:not(.sn-kicker) {
  max-width: 36em;
  margin-inline: auto;
}
.shop-notification .sn-kicker {
  display: inline-block;
  color: #174c92;
  background: #dfeeff;
  border-radius: 8px;
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 800;
}
.sn-hero .sn-button { margin-top: 24px; }
.sn-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--sn-blue);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.sn-button:hover { color: #fff; background: #0e438a; }
.shop-notification :focus-visible { outline: 3px solid #245fc5; outline-offset: 3px; }
.shop-notification .sn-section { margin-top: clamp(28px, 5vw, 52px); }
.sn-card { padding: 22px; border: 1px solid var(--sn-border); border-radius: 14px; background: #fff; }
.sn-steps { margin: 0; padding: 0; list-style: none; }
.sn-conditions, .sn-application { background: #eff6ff; padding: clamp(22px, 5vw, 48px); border-radius: 20px; }
.sn-conditions ul { margin: 0; padding-left: 1.35em; list-style: disc; }
.sn-conditions li + li { margin-top: 7px; }
.sn-application { scroll-margin-top: 80px; }
.sn-membership {
  margin-bottom: 28px;
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--sn-border);
  border-radius: 14px;
  background: #e3efff;
  text-align: center;
}
.shop-notification .sn-membership h2 {
  margin-bottom: 10px;
  font-size: clamp(19px, 3vw, 23px);
}
.shop-notification .sn-membership p + p { margin-top: 6px; }
.sn-membership-button {
  max-width: 100%;
  margin: 14px 0 10px;
  background: #b92331;
}
.sn-membership-button:hover { background: #981b28; }
.sn-form { display: grid; max-width: 620px; gap: 8px; }
.sn-form label { font-weight: 750; }
.sn-form input:not([type=hidden]) {
  min-width: 0;
  min-height: 48px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
  color: var(--sn-ink);
  border: 1px solid #8298b5;
  border-radius: 8px;
  font: inherit;
}
.sn-form button { justify-self: start; }
.sn-feedback { background: #fff; border-radius: 8px; padding: 14px 18px; }
.sn-feedback.sn-error { color: #921b2b; padding-left: 34px; list-style: disc; }
@media (max-width: 760px) {
  #main.shop-notification { width: calc(100% - 32px); padding-block: 24px 50px; }
  .sn-hero .sn-button, .sn-form button { width: 100%; }
}

.sn-supported-shops {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 10px 0 0;
  padding-left: 1.4em;
  list-style: disc;
}
.sn-card-custom {
  margin-top: 20px;
  border-color: #9cbce6;
  border-left: 4px solid var(--sn-blue);
  background: #f4f8ff;
}
.shop-notification .sn-card-custom h3 { margin-top: 0; }
.sn-text-link { display: inline-block; margin-top: 10px; color: var(--sn-blue); text-decoration: underline; }
.sn-privacy {
  padding: clamp(22px, 5vw, 40px);
  border-radius: 20px;
  background: #e7f1ff;
}
.sn-usage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sn-usage-steps { display: grid; gap: 12px; }
.sn-example { max-width: 320px; }
.sn-example img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--sn-border);
}
.sn-example figcaption { margin-top: 8px; color: #435772; font-size: 14px; }
@media (max-width: 760px) {
  .sn-usage { grid-template-columns: minmax(0, 1fr); }
}

.shop-notification .sn-success {
  padding: clamp(24px, 5vw, 42px) clamp(16px, 4vw, 32px);
  border: 1px solid #b9dfcb;
  border-radius: 16px;
  background: #eff9f3;
  text-align: center;
}
.sn-success-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #d8f1e3;
  color: #177047;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.shop-notification .sn-success h3 {
  margin: 12px 0 8px;
  color: #175d3e;
  font-size: clamp(22px, 4vw, 30px);
}
.shop-notification .sn-success p {
  max-width: 40em;
  margin-inline: auto;
}
.shop-notification .sn-success p + p { margin-top: 8px; }
.shop-notification .sn-success-note { font-size: 14px; }