/* ===== Base ===== */
:root{
  --red1:#d83933;
  --red2:#ff4b4b;

  --panel-radius: 64px;

  --text:#111;
  --muted:#555;

  --paper:#ffffff;
  --paper-soft:#fdeff2; /* 薄いピンク */
  --max: 1080px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  color: var(--text);
  background: linear-gradient(135deg, var(--red1), var(--red2));
}

/* ===== Header ===== */
.header{
  position:relative;
  min-height: 360px;
  padding: 18px 22px 0;
  overflow:hidden;
}

/* 斜め帯・丸などの柄（CSSのみでそれっぽく） */
.header::before{
  content:"";
  position:absolute;
  inset:-120px -140px auto -140px;
  height: 520px;
  background:
    /* 斜めの帯 */
    linear-gradient(135deg,
      rgba(255,255,255,0) 0 20%,
      rgba(0,0,0,.10) 20% 28%,
      rgba(255,255,255,0) 28% 40%,
      rgba(255,255,255,.14) 40% 48%,
      rgba(255,255,255,0) 48% 100%),
    linear-gradient(135deg,
      rgba(255,255,255,0) 0 52%,
      rgba(255,255,255,.18) 52% 56%,
      rgba(255,255,255,0) 56% 100%);
  transform: rotate(-6deg);
  opacity:.9;
  pointer-events:none;
}

.header::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 28%, rgba(0,0,0,.14) 0 64px, transparent 65px),
    radial-gradient(circle at 72% 58%, rgba(0,0,0,.14) 0 52px, transparent 53px),
    radial-gradient(circle at 52% 42%, rgba(0,0,0,.14) 0 38px, transparent 39px),
    radial-gradient(circle at 92% 62%, rgba(0,0,0,.10) 0 90px, transparent 91px);
  pointer-events:none;
}

/* ===== Badge ===== */
.badge{
  margin-top: 34px;
}

.badge-circle{
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: #fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 20px 30px;
  box-shadow: 0 22px 50px rgba(0,0,0,.16);
}

.badge-title{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.badge-sub{
  font-size: 14px;
  font-weight: 700;
  color:#111;
  position:relative;
  padding-top: 10px;
}
.badge-sub::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 120px;
  height: 3px;
  background:#111;
  border-radius:999px;
}

/* ===== Page ===== */
.page{
  padding: 0 22px 60px;
}

/* ===== Panel ===== */
.panel{
  position:relative;
  margin-top: -54px; /* ヘッダーに食い込ませる */
  border-radius: var(--panel-radius) var(--panel-radius);
  background: var(--paper);
  padding: 20px 10px;
}

/* notice */
.notice{
  background: var(--paper-soft);
  border-radius: 40px 40px;
  padding: 56px 68px 56px;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  margin: 0 30px;
}

.notice-lead{
  margin:0 0 14px;
  color:#333;
  font-size: 16px;
}
.notice-title{
  margin:0 0 26px;
  font-size: 16px;
  font-weight: 800;
}

.notice p{
  margin: 0 0 22px;
  line-height: 2.0;
  font-size: 16px;
  color:#222;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .notice{
    padding: 20px;
    margin: 20px;
  }
}