:root {
      --y: #ffe329;
      --p: #ee0077;
      --r: #e73628;
      --b: #075fae;
      --n: #18304c;
      --o: #f18822;
      --w: #fff;
      --cream: #fff9e8;
      --pink: #fff0f7;
      --ink: #1d2630;
  }

  * {
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      margin: 0;
      font-family:
          "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.75;
      overflow-x: hidden;
  }

  img {
      display: block;
      max-width: 100%;
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  .inner {
      width: min(calc(100% - 34px), 980px);
      margin: auto;
  }

  .serif {
      font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  }

  .section {
      position: relative;
      padding: 72px 0;
  }

  .kicker {
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      font-weight: 900;
      text-align: center;
      color: var(--p);
      margin-bottom: 8px;
  }

  .title {
      margin: 0;
      text-align: center;
      font-size: clamp(2rem, 8vw, 4rem);
      line-height: 1.16;
      letter-spacing: -0.04em;
      font-weight: 1000;
  }

  .title em {
      font-style: normal;
      color: var(--p);
  }

  .copy {
      max-width: 680px;
      margin: 20px auto 0;
      text-align: left;
      font-size: 0.98rem;
      font-weight: 700;
  }

  @media (min-width: 769px) {
      .copy {
          text-align: center;
      }
  }

  .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.65em;
      width: min(100%, 520px);
      margin: 28px auto 0;
      min-height: 64px;
      border-radius: 999px;
      background: var(--p);
      color: #fff;
      font-size: 1.05rem;
      font-weight: 1000;
      box-shadow: 0 8px 0 #a3004d;
      transition: 0.2s;
  }

  .btn:active {
      transform: translateY(5px);
      box-shadow: 0 3px 0 #a3004d;
  }

  .wave-top:before,
  .wave-bottom:after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 55px;
      background: inherit;
      border-radius: 50%;
  }

  @media (min-width: 769px) {

      .wave-top:before,
      .wave-bottom:after {
          width: 106%;
      }
  }


  .wave-top:before {
      top: -27px;
  }

  .wave-bottom:after {
      bottom: -27px;
  }

  /* top */
  .topline {
      height: 42px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      color: #555;
  }

  .hero {
      position: relative;
      min-height: calc(100svh - 42px);
      background: var(--y);
      overflow: hidden;
      padding: 20px 0 62px;
  }

  .hero:before {
      content: "";
      position: absolute;
      inset: -20%;
      background: repeating-conic-gradient(from -4deg at 50% 42%,
              rgba(255, 255, 255, 0.55) 0 7deg,
              transparent 7deg 16deg);
      opacity: 0.7;
  }

  .hero .inner {
      position: relative;
  }

  .hero-main {
      position: relative;
      width: min(100%, 920px);
      margin: 0 auto 26px;
  }

  .hero-main img {
      width: 100%;
      height: auto;
      filter: drop-shadow(0 10px 0 rgba(119, 77, 0, 0.08));
  }

  .date {
      line-height: 1.3;
      width: min(100%, 620px);
      margin: 0 auto;
      background: white;
      border-radius: 999px;
      padding: 10px 18px;
      text-align: center;
      color: var(--p);
      /*font-size: clamp(1rem, 5vw, 1.75rem);*/
      font-weight: 1000;
      box-shadow: 0 5px 0 rgba(215, 177, 0, 0.4);
  }

  @media (min-width: 769px) {
      .date {
          font-size: 1.75rem;

      }
  }

  .date b {
      font-size: 1.34em;
  }

  .hero-lead {
      text-align: center;
      font-weight: 1000;
      font-size: 1.05rem;
      line-height: 1.45;
      margin: 22px auto 0;
  }

  .hero-lead strong {
      font-size: 1.3em;
      color: var(--p);
  }

  .scroll {
      display: block;
      text-align: center;
      margin-top: 28px;
      font-size: 0.7rem;
      font-weight: 900;
      letter-spacing: 0.15em;
  }

  .scroll:after {
      content: "↓";
      display: block;
      font-size: 1.4rem;
      line-height: 1;
  }

  /* intro */
  .intro {
      background: #fff;
      padding-top: 84px;
  }

  .intro-statement {
      font-size: clamp(1.7rem, 7vw, 3.3rem);
      line-height: 1.55;
      text-align: center;
      font-weight: 1000;
      letter-spacing: -0.04em;
  }

  .intro-statement .mark {
      display: inline;
      background: linear-gradient(transparent 58%, var(--y) 58%);
  }

  .polaroids {
      display: grid;
      grid-template-columns: 1fr;
      gap: 26px;
      width: min(100%, 700px);
      margin: 42px auto 10px;
      padding: 0 12px;
  }

  .polaroid {
      position: relative;
      background: white;
      padding: 8px 8px 32px;
      box-shadow: 0 14px 35px rgba(30, 40, 50, 0.18);
      width: min(92%, 330px);
      margin: auto;
  }

  .polaroid img {
      width: 100%;
      aspect-ratio: 1.2;
      object-fit: cover;
  }

  .polaroid:after {
      content: attr(data-caption);
      position: absolute;
      left: 12px;
      bottom: 8px;
      font-size: 0.68rem;
      font-weight: 800;
  }

  .polaroid.one {
      transform: rotate(-3deg);
  }

  .polaroid.two {
      transform: rotate(3deg);
  }

  /* method */
  .method {
      background: var(--pink);
  }

  .method .title {
      color: var(--p);
  }

  .method-lead {
      max-width: 600px;
      margin: 22px auto 0;
      text-align: center;
      font-size: 1.05rem;
      font-weight: 800;
  }

  .method-lead strong {
      display: inline-block;
      background: var(--y);
      padding: 0 0.25em;
      font-size: 1.12em;
  }

  .steps {
      width: min(100%, 760px);
      margin: 42px auto 0;
  }

  .step {
      display: grid;
      grid-template-columns: 74px 1fr;
      gap: 16px;
      align-items: center;
      padding: 26px 0;
      border-bottom: 2px dashed #e9a8c7;
  }

  .step:first-child {
      border-top: 2px dashed #e9a8c7;
  }

  .num {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: var(--p);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 1.45rem;
      font-weight: 1000;
      box-shadow: 0 4px 0 #a90051;
  }

  .step h3 {
      font-size: 1.25rem;
      margin: 0 0 5px;
  }

  .step p {
      margin: 0;
      font-size: 0.8rem;
  }

  .account,
  .tags {
      display: inline-block;
      margin-top: 8px;
      background: #fff;
      padding: 6px 12px;
      border-radius: 999px;
      color: var(--p);
      font-weight: 1000;
      font-size: 0.8rem;
  }

  /* prize */
  .prize {
      background: #0b64b3;
      color: #fff;
      overflow: hidden;
  }

  .prize:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(circle at 10% 20%, #fff3 0 4px, transparent 5px),
          radial-gradient(circle at 80% 60%, #fff2 0 3px, transparent 4px);
      background-size:
          80px 80px,
          62px 62px;
  }

  .prize .inner {
      position: relative;
  }

  .prize .kicker {
      color: var(--y);
  }

  .prize .title {
      color: white;
  }

  .prize-main {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
      width: min(100%, 780px);
      margin: 36px auto 0;
      text-align: center;
  }

  .quo-wrap {
      position: relative;
      margin: auto;
      width: min(68vw, 300px);
  }

  .quo-wrap img {
      width: 100%;
      border-radius: 18px;
      box-shadow: 0 15px 30px #003c744f;
  }

  .burst {
      position: absolute;
      right: -20px;
      top: -26px;
      width: 108px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--y);
      color: var(--p);
      display: grid;
      place-items: center;
      font-weight: 1000;
      line-height: 1.1;
      transform: rotate(8deg);
      clip-path: polygon(50% 0,
              61% 18%,
              79% 5%,
              80% 27%,
              100% 24%,
              86% 42%,
              100% 55%,
              79% 61%,
              85% 82%,
              63% 76%,
              52% 100%,
              42% 78%,
              21% 94%,
              22% 70%,
              0 72%,
              14% 51%,
              0 38%,
              23% 32%,
              18% 10%,
              39% 19%);
  }

  .total {
      font-size: 1.1rem;
      font-weight: 900;
  }

  .total b {
      display: block;
      font-size: clamp(3.2rem, 15vw, 5.5rem);
      line-height: 1;
      color: var(--y);
      letter-spacing: -0.06em;
  }

  .prize-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: min(100%, 680px);
      margin: 30px auto 0;
      text-align: center;
  }

  .prize-list div {
      background: white;
      color: var(--n);
      border-radius: 16px;
      padding: 14px 6px;
      font-size: 1.3rem;
      line-height: 1.15;
      font-weight: 1000;
  }

  .prize-list strong {
      display: block;
      margin-top: 8px;
      color: var(--p);
      font-size: 0.95rem;
      line-height: 1.2;
      font-weight: 900;
  }

  /* categories */
  .categories {
      background: #fffaf0;
  }

  .category {
      width: min(100%, 820px);
      margin: 48px auto 0;
  }

  .cat-label {
      text-align: center;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.12em;
  }

  .cat-title {
      margin: 6px 0 0;
      text-align: center;
      font-size: clamp(1.8rem, 7vw, 3.1rem);
      line-height: 1.2;
      font-weight: 1000;
  }

  .category.red .cat-title {
      color: var(--r);
  }

  .category.orange .cat-title {
      color: var(--o);
  }

  .cat-visual {
      position: relative;
      margin: 26px auto 0;
      width: min(100%, 680px);
      border-radius: 50% 50% 28px 28px;
      overflow: hidden;
      background: white;
      padding: 13px;
      box-shadow: 0 15px 40px #d3b78e3d;
  }

  .cat-visual img {
      width: 100%;
      height: 245px;
      object-fit: cover;
      border-radius: 50% 50% 18px 18px;
  }

  .cat-copy {
      text-align: center;
      margin: 22px auto 0;
      max-width: 630px;
      font-weight: 800;
  }

  @media (min-width: 769px) {
      .cat-copy {
          text-align: center;
      }
  }

  .examples {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
  }

  .examples span {
      background: #fff;
      border: 1px solid #e8dcc5;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 900;
  }

  .divider {
      width: 80px;
      height: 7px;
      border-radius: 999px;
      background: var(--y);
      margin: 60px auto;
  }

  .theme-select {
      display: grid;
      gap: 14px;
      width: min(100%, 680px);
      margin: 24px auto 0;
  }

  .theme-box {
      background: #fff;
      border: 1px solid #efdcc5;
      border-radius: 20px;
      padding: 20px 18px;
      text-align: left;
      box-shadow: 0 8px 24px #d3b78e24;
  }

  .theme-no {
      display: inline-block;
      color: var(--o);
      font-size: 0.72rem;
      font-weight: 1000;
      letter-spacing: 0.12em;
      margin-bottom: 5px;
  }

  .theme-box h4 {
      margin: 0;
      color: #162332;
      font-size: 1.2rem;
      font-weight: 1000;
  }

  .theme-box p {
      margin: 8px 0 0;
      font-size: 0.92rem;
      line-height: 1.8;
      font-weight: 700;
      color: #3e4650;
  }

  /* about */
  .about {
      background: var(--y);
      overflow: hidden;
  }

  .about:before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-conic-gradient(from 0deg at 50% 30%,
              rgba(255, 255, 255, 0.28) 0 8deg,
              transparent 8deg 18deg);
  }

  .about .inner {
      position: relative;
  }

  .about-card {
      width: min(100%, 840px);
      margin: 34px auto 0;
      background: white;
      border-radius: 32px;
      padding: 36px 24px;
      box-shadow: 0 14px 0 #e7c400;
  }

  .about-lead {
      text-align: left;
      font-weight: 800;
      font-size: 1.02rem;
      line-height: 1.8;
      margin: 0 0 32px;
      color: var(--n);
  }

  /* 上段：災害時・平常時 2カラムレイアウト */
  .about-duties {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 36px;
  }

  .duty-box {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 24px 20px;
      text-align: left;
  }

  .duty-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      border-bottom: 2px solid #e2e8f0;
      padding-bottom: 12px;
  }

  .duty-icon {
      font-size: 1.8rem;
      line-height: 1;
  }

  .duty-head h3 {
      margin: 0;
      font-size: 1.2rem;
      color: var(--n);
      font-weight: 1000;
  }

  .duty-list {
      margin: 0;
      padding-left: 0;
      list-style: none;
      font-size: 0.92rem;
      font-weight: 700;
      color: #334155;
      line-height: 1.8;
  }

  .duty-list li {
      position: relative;
      padding-left: 1.3em;
      margin-bottom: 8px;
  }

  .duty-list li:last-child {
      margin-bottom: 0;
  }

  .duty-list li::before {
      content: "●";
      position: absolute;
      left: 0;
      color: var(--p);
      font-size: 0.85em;
  }

  /* 下段：別枠「消防団の特徴」 */
  .about-features {
      background: #fffaf0;
      border: 2px dashed #f3c262;
      border-radius: 24px;
      padding: 28px 20px;
      margin-top: 10px;
  }

  .features-title {
      text-align: center;
      font-size: 1.35rem;
      font-weight: 1000;
      color: var(--n);
      margin: 0 0 10px;
  }

  .features-intro {
      text-align: left;
      font-size: 0.9rem;
      font-weight: 700;
      color: #475569;
      margin: 0 0 22px;
      line-height: 1.65;
  }

  .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
  }

  .feature-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
  }

  .feature-head {
      background: var(--b);
      color: #fff;
      font-weight: 1000;
      text-align: center;
      padding: 12px 10px;
      font-size: 1.08rem;
      letter-spacing: 0.04em;
  }

  .feature-body {
      padding: 18px 16px;
      font-size: 0.88rem;
      font-weight: 700;
      color: #334155;
      line-height: 1.7;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: left;
  }

  /* thanks program */
  .thanks-program {
      background: #fffaf0;
      overflow: hidden;
  }

  .thanks-program:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
          radial-gradient(circle at 8% 16%,
              rgba(255, 227, 41, 0.42) 0 70px,
              transparent 71px),
          radial-gradient(circle at 92% 85%,
              rgba(238, 0, 119, 0.07) 0 110px,
              transparent 111px);
  }

  .thanks-program .inner {
      position: relative;
  }

  .thanks-lead {
      max-width: 760px;
      margin: 24px auto 0;
      text-align: left;
      font-weight: 800;
  }

  @media (min-width: 769px) {
      .thanks-lead {
          text-align: left;
      }
  }

  .thanks-flow {
      width: min(100%, 880px);
      margin: 42px auto 0;
      display: grid;
      gap: 18px;
  }

  .thanks-step {
      position: relative;
      background: #fff;
      border: 2px solid #f3dfb1;
      border-radius: 28px;
      padding: 26px 22px;
      text-align: center;
      box-shadow: 0 10px 0 rgba(231, 196, 0, 0.18);
  }

  .thanks-step-num {
      width: 52px;
      height: 52px;
      margin: -48px auto 14px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--p);
      color: #fff;
      font-weight: 1000;
      font-size: 1.15rem;
      border: 5px solid #fff;
  }

  .thanks-step h3 {
      margin: 0 0 8px;
      font-size: 1.18rem;
  }

  .thanks-step p {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 700;
      color: #53606c;
      text-align: left;
  }

  .thanks-arrow {
      text-align: center;
      color: var(--p);
      font-size: 1.8rem;
      font-weight: 1000;
      line-height: 1;
  }

  .thanks-note {
      width: min(100%, 760px);
      margin: 34px auto 0;
      background: var(--y);
      border-radius: 24px;
      padding: 22px 20px;
      text-align: center;
      font-weight: 900;
  }

  .thanks-note strong {
      color: var(--p);
  }

  .thanks-signpost {
      position: relative;
      width: min(100%, 560px);
      margin: 0 auto 18px;
      padding: 4px 50px 6px;
  }

  .thanks-signpost p {
      margin: 0;
      font-size: clamp(1.15rem, 4.6vw, 1.55rem);
      font-weight: 1000;
      line-height: 1.45;
      color: var(--n);
  }

  .thanks-signpost p strong {
      color: var(--p);
  }

  .sign-visual {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }

  .sign-visual.right {
      right: 0;
  }

  .sign-visual.left {
      left: 0;
  }

  .sign-visual img {
      width: 80px;
      height: auto;
      filter: drop-shadow(0 6px 12px rgba(24, 48, 76, 0.18));
  }

  .sign-visual.left img {
      left: 0;
      width: 50px;
  }

  .sign-visual.right img {
      right: 0;
      width: 80px;
  }

  @media (min-width: 769px) {
      .sign-visual.left img {
          left: 0;
          width: 80px;
      }

      .sign-visual.right img {
          right: 0;
          width: 120px;
      }
  }

  .thanks-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
  }

  .thanks-badges span {
      background: #fff;
      border: 1px solid #e4ca55;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 900;
  }

  .thanks-program .btn.secondary {
      background: var(--n);
      box-shadow: 0 8px 0 #071827;
  }

  .thanks-program .btn.secondary:active {
      box-shadow: 0 3px 0 #071827;
  }

  /* rules */
  .rules {
      background: white;
  }

  .rules-box {
      width: min(100%, 800px);
      margin: 34px auto 0;
      border-top: 1px solid #ddd;
  }

  .rules details {
      border-bottom: 1px solid #ddd;
  }

  .rules summary {
      list-style: none;
      cursor: pointer;
      padding: 20px 4px;
      font-weight: 1000;
      display: flex;
      justify-content: space-between;
  }

  .rules summary::-webkit-details-marker {
      display: none;
  }

  .rules summary:after {
      content: "＋";
      color: var(--p);
  }

  .rules details[open] summary:after {
      content: "−";
  }

  .rules-body {
      padding: 0 4px 22px;
      font-size: 0.86rem;
      color: #59616a;
  }

  .rules-body p,
  .rules-body ul {
      margin-top: 0;
  }

  footer {
      background: var(--n);
      color: #fff;
      padding: 50px 0 110px;
  }

  .foot-title {
      font-size: 1rem;
      font-weight: 1000;
  }

  .contact {
      margin-top: 20px;
      border-top: 1px solid #657386;
      padding-top: 20px;
  }

  .contact b {
      display: block;
      font-size: 1.05rem;
  }

  .contact a {
      display: block;
      margin-top: 8px;
      font-weight: 900;
  }

  .contact p {
      font-size: 0.8rem;
      color: #cdd4dc;
  }

  .copyr {
      margin-top: 30px;
      color: #93a1b1;
      font-size: 0.7rem;
  }

  .sticky {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      background: #fffffff2;
      border-top: 1px solid #ddd;
  }

  .sticky a {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 52px;
      background: var(--p);
      color: #fff;
      border-radius: 999px;
      font-weight: 1000;
  }

  @media (min-width: 760px) {
      .theme-select {
          grid-template-columns: 1fr 1fr;
      }

      .theme-box {
          padding: 24px;
      }

      .topline {
          height: 52px;
      }

      .hero {
          min-height: auto;
          padding: 28px 0 90px;
      }

      .hero-main {
          margin-bottom: 34px;
      }

      .section {
          padding: 110px 0;
      }

      .polaroids {
          display: block;
          position: relative;
          height: 390px;
          padding: 0;
      }

      .polaroid {
          position: absolute;
          width: 48%;
          max-width: 360px;
          margin: 0;
      }

      .polaroid.one {
          left: 0;
          top: 12px;
          transform: rotate(-5deg);
      }

      .polaroid.two {
          right: 0;
          top: 80px;
          transform: rotate(6deg);
      }

      .step {
          grid-template-columns: 92px 1fr;
      }

      .num {
          width: 78px;
          height: 78px;
      }

      .prize-main {
          grid-template-columns: 330px 1fr;
          text-align: left;
      }

      .prize-list {
          grid-template-columns: repeat(4, 1fr);
      }

      .cat-visual img {
          height: 390px;
      }

      .about-duties {
          grid-template-columns: 1fr 1fr;
      }

      .features-grid {
          grid-template-columns: repeat(3, 1fr);
      }

      .thanks-flow {
          grid-template-columns: 1fr 42px 1fr 42px 1fr;
          align-items: center;
      }

      .thanks-arrow {
          transform: rotate(-90deg);
      }

      .thanks-step {
          min-height: 230px;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .thanks-step-num {
          margin: -10px auto 14px;
      }

      .thanks-signpost {
          padding: 6px 118px 10px;
      }

      .sign-visual img {
          width: 105px;
      }

      .sticky {
          display: none;
      }

      footer {
          padding-bottom: 55px;
      }
  }

  .sp_area {
      display: block;
  }

  .pc_area {
      display: none;
  }

  @media (min-width: 769px) {
      .sp_area {
          display: none;
      }

      .pc_area {
          display: block;
      }
  }

  .sirusi01 {
      font-size: 15px;
  }

  .sirusi {
      margin-top: 30px;
  }

.ouenseido_wrap {
    text-align:center;
}

  .ouenseido {
    display:inline-block;
    padding:3px 10px;
    text-align:center;
    border-radius:10px;
    background:var(--p);
    color:white;
    margin-top:20px;
  }