@charset "UTF-8";
/*
  ページ：ホーム
*/
/* 共通 */
.postit {
  width: fit-content;
  background-color: #fffbbf;
  background-image: linear-gradient(to right bottom, #fffbbf, #fdce00);
  text-shadow: #ffffff 2px 2px 1px;
  padding: 0.5rem 1.5rem;
  box-shadow: 4px 4px rgb(0 0 0 / 0.3);
  transform: rotate(-3deg);
}

.postit-green {
  width: fit-content;
  background-color: #fffbbf;
  background-image: linear-gradient(to right bottom, #99DCD7, #3BABA3);
  text-shadow: #ffffff 2px 2px 1px;
  padding: 0.5rem 1.5rem;
  box-shadow: 4px 4px rgb(0 0 0 / 0.3);
  transform: rotate(-3deg);
}

.postit-red {
  width: fit-content;
  background-color: #fffbbf;
  background-image: linear-gradient(to right bottom, #F5D5DD, #E8A2B4);
  text-shadow: #ffffff 2px 2px 1px;
  padding: 0.5rem 1.5rem;
  box-shadow: 4px 4px rgb(0 0 0 / 0.3);
  transform: rotate(-3deg);
}

/* ページの先頭へ戻るボタン */
.pagetop {
  position: fixed;
  width: 3rem;
  height: 3rem;
  right: 2rem;
  bottom: 2rem;
  border: solid 3px #999;
  border-radius: 1.5em;
  background-color: #fff;
  background-image: linear-gradient(135deg, rgb(224 241 255 / 1) 0%, rgb(192 254 155 / 1) 100%);
  box-shadow: 3px 3px rgb(112 112 112 / 0.3);
  opacity: 0.7;
  z-index: 300;
  font-size: x-large;

  > a {
    text-decoration: none;
    color:#222;
  }
}

/*Lightboxの調整
  表示レイヤーを最上位に設定する
*/
.lum-lightbox {
  z-index: 10000;
}

/* スマホ表示でのサイズを変更する */
@media (max-width: 460px) {
  .lum-lightbox-inner img {
      max-height: 100%;
      max-width: 100%;
  }
}

/* メニュー */
.nav-link {
  > i {
    margin-right: 0.25rem;
  }
}

/* トップ画像 */
.header {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1024 / 480;
  }
}

/* 西区展トップスライド */
.swiper {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 480;
  overflow: hidden;
}

.swiper-slide {
  width: 100%;
  aspect-ratio: 1024 / 480;
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
    aspect-ratio: 1024 / 480;
  }

  .text {
    min-width: 40%;
    width: 40%;
    max-width: 600px;
    padding: 1.5em;
    color: #fff;
    background-color: rgb(0 0 0 / 0.5);
    overflow: hidden;
    position: absolute;
    top: 40%;
    left: 10%;
  }

  .title {
    font-weight: bolder;
    font-size: 1.5rem;
    margin-top: 0;
  }
}

/* お知らせ */
.notices {
  background-color: white;
  background-image: repeating-linear-gradient(-45deg, transparent 0 20px, #fcfcfc 20px 40px);
  padding: 60px 60px 30px 60px;
  border: 1px solid #ccc;
  border-image-source: url(../image/bg/notice_frame.webp);
  border-image-slice: 200 63 195 102;
  border-image-width: 200px 63px 195px 102px;
  border-image-outset: 32px;
  border-image-repeat: stretch;
  min-height: 10rem;
}

/* 西区展あいさつ */
.greeting {
  background: repeat-y center/100% url(../image/bg/check.webp);
  text-shadow: #ffffff 1px 1px 0px;

  h2 {
    text-shadow: #dddddd 3px 3px 1px;
  }

  .slider2023 {
    position: relative;

    figure {
      position: absolute;
      display: block;
      width: calc(100% - 3rem);
      z-index: 10;

      figcaption {
        padding: 0.25rem 1rem 0.25rem 1rem;
        background-color: rgb(255 255 255 / 0.8);
        border: solid 1px #ccc;
        width: fit-content;
        margin-top: 0.5rem;
        margin-right: auto;
        margin-left: auto
      }
    }
    .tv_frame {
      display: block;
      max-width: 100%;
      width: 100%;
      height: auto;
    }

    /* スライダー用カラムの高さ調整 */
    > div {
      margin-bottom:4rem;
    }

    .carousel-item {
      img {
        width: 88%;
        height: auto;
        aspect-ratio: 320 / 240;
      }
    }
  }
}

/* 作品募集の概要*/
.recruitment_overview {
  text-shadow: #ffffff 1px 1px 0px;
  background: no-repeat left bottom url(../image/bg/study01.webp),
              no-repeat right bottom url(../image/bg/study02.webp);
  min-height: 14rem;

  .description {
    padding: 0.25rem 1rem;
    background-color: rgb(153 200 215 / 0.2);
    width: fit-content;
    border-radius: 0.5rem;
  }
}

/* 授賞式までの日程の概要 */
.schedule_overview {
  text-shadow: #ffffff 1px 1px 0px;
  background-image: repeating-linear-gradient(-45deg, transparent 0 20px, #fff7e2 20px 40px);
}

/*　フッター */
footer {
  div[class*="lead"] {
    letter-spacing: 0.5em;
  }

  a {
    color: white;
    text-decoration: none;
    letter-spacing: 0.25em;
  }
}

/*
  スケジュール関連
*/
/* 共通 */
.schedule_headline {
  word-break: keep-all;
  overflow-wrap: break-word;

  position: relative;
  padding: 1.5rem 0.5rem;

  &::before,
  &::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    content: '';
    background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  }

  &::before {
    top: 0;
  }

  &::after {
    bottom: 0;
  }
}

/* ご挨拶ページ */
.about_greeting {
  background: repeat url(../image/bg/back_greeting.webp);

  .contents {
    background: repeat url(../image/bg/border_greeting.webp);

    section {
      background: no-repeat right 3rem bottom 3rem url(../image/bg/apple.webp) rgb(255 255 255 / 0.95);
      line-height: 3rem;

      p {
        padding: 0 0.25em;
        background: linear-gradient(#ccc 1px, transparent 1px);
        background-size: auto 3rem;
        margin-bottom: 0;
        text-align: justify;
      }

      p:not(:first-child) {
        text-indent: 1.5rem;
      }
    }
  }
}

.about_grandprix {
  background: repeat url(../image/bg/back_owgp.webp);

  .contents {
    background: repeat url(../image/bg/border_owgp.webp);

    section {
      background-color: rgb(255 255 255 / 0.95);

      .description p {
        line-height: 2.5rem;
        text-align: justify;
      }

      .award {
        font-weight: bold;
        color: #704308;
      }

      .hope {
        font-weight: bold;
        color: rgb(21, 141, 85)
      }

      img {
        width: 100%;
        height: auto;
        border: solid 2px blue;
      };

      .period {
        p {
          margin-left: 2rem;
          text-indent: -5em;
          padding-inline-start: 5em;
          text-align: justify;
        }

        .info {
          text-align: justify;
        }
      }
    }
  }
}

.about_guideline {
  background: repeat url(../image/bg/back_exhib.webp);

  .contents {
    background: repeat url(../image/bg/border_exhib.webp);

    section {
      background-color: rgb(255 255 255 / 0.95);

      .looseleaf {
        border-left: dotted 1rem lightgray;
        padding-inline-start: 1rem;

        .inner {
          padding-inline-start: 0.5em;
          line-height: 1.6em;
          background: linear-gradient(#ddd 1px, transparent 1px);
          background-size: auto 2em;

          h5 {
            width: fit-content;
            padding: 0 0.5em;
            background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
            text-shadow: rgb(255 255 255) 1px 1px;
            border-radius: 0.25em;
          }

          h4 {
            word-break: keep-all;
            overflow-wrap: break-word;
          }

          p {
            margin: 0 0 2.5em 1.5em;

            P {
              margin: -2.5em 0 0 1.5em;
            }
          }
        }

      }
    }
  }

}

.about_ceremony {
  background: repeat url(../image/bg/back_exhib.webp);

  .contents {
    background: repeat url(../image/bg/border_exhib.webp);

    section {
      background-color: rgb(255 255 255 / 0.95);

      .looseleaf {
        border-left: dotted 1rem lightgray;
        padding-inline-start: 1rem;

        .inner {
          padding-inline-start: 0.5em;
          line-height: 2rem;
          background: linear-gradient(#ddd 1px, transparent 1px);
          background-size: auto 2rem;

          table {
            width: 100%;
            margin-block-end: 3rem;
            border-collapse: collapse;
            background-color: #fff;
            text-shadow: rgb(224 241 255 / 1) 1px 1px;

            tr {
              td {
                border: solid 2px #eee;
              }

              td:first-child {
                font-weight: bolder;
                width: 7rem;
                text-align: justify;
                text-align-last: justify;
                padding: 0.25rem 0.5rem 0.25rem 0.5rem;
              }

              td:nth-child(2) {
                padding: 0 0.5em;
                line-height: 1.5em;
              }
            }
          }

          h5 {
            width: fit-content;
            padding: 0 0.5em;
            background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
            text-shadow: rgb(255 255 255) 1px 1px;
            border-radius: 0.25em;
          }

          h4 {
            word-break: keep-all;
            overflow-wrap: break-word;
          }

          p {
            margin: 0 0 0 1.5em;
          }

          .warning {
            line-height: 1.7rem;
            text-shadow: #fff 1px 1px;
            background-image: repeating-linear-gradient(-45deg, rgb(255 249 225) 0 20px, rgb(246 246 246) 20px 40px);
            border-radius: 1.5rem;
            border: solid 1px gray;
            padding: 0.5rem 1rem;
          }
        }
      }
    }
  }
}

.winner_list {
  .title {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1024 / 240;
  }

  .nav_grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));

    a {
      text-align: justify;
      text-align-last: justify;
    }
  }

  .gold {
    position: relative;
    box-shadow: 0 2px 14px rgb(0 0 0 / 0.1);
    background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
    position: sticky;
    top: 3.5em;

    h2 {
      text-align: center;
      height: 2em;
      padding-block-start: 0.25em;
      letter-spacing: 0.25em;
      text-shadow: 2px 2px rgb(255 255 255);
    }
  }
  /* リンクスクロール時の調整 */
  .link_margin {
    height: 1.5rem;
  }

  .name_grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    text-align: center;

    span {
      display: inline-block;
      width: 3em;
      text-align: justify;
      text-align-last: justify;
    }
  }


}

.about_questionnaire {
  background: repeat url(../image/bg/back_qre.webp);

  .title {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1024 / 240;
  }

  .contents {
    background: repeat url(../image/bg/border_qre.webp);

    section {
      background-color: rgb(255 255 255 / 0.95);

      .looseleaf {
        .inner {
          .preface {
            text-indent: 1em;
          }

          .limit {
            word-break: keep-all;
            overflow-wrap: break-word;
            text-indent: -5.5em;
            padding-inline-start: 5.5em;
            line-height: 1.25em;
          }

          .winner {
            padding-inline-start: 1.5em;
            text-indent: -1.5em;
          }

          .warning {
            text-shadow: #fff 1px 1px;
            background-image: repeating-linear-gradient(-45deg, rgb(255 249 225) 0 20px, rgb(246 246 246) 20px 40px);
            border-radius: 1.5rem;
            border: solid 1px gray;
            padding: 0.5rem 1rem;
          }

          .form-label {
            text-indent: -1.125em;
            padding-inline-start: 1.125em;
          }

          .form-check {
            label {
              line-height: 1.25em;
            }
          }

          h5 {
            width: fit-content;
            padding: 0 0.5em;
            background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
            text-shadow: rgb(255 255 255) 1px 1px;
            border-radius: 0.25em;
          }
        }
      }
    }
  }
}

.about_access {
  background: repeat url(../image/bg/back_access.webp);

  .contents {
    background: repeat url(../image/bg/border_access.webp);

    section {
      background-color: rgb(255 255 255 / 0.95);

      .looseleaf {
        .inner {
          h5 {
            width: fit-content;
            padding: 0 0.5em;
            background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
            text-shadow: rgb(255 255 255) 1px 1px;
            border-radius: 0.25em;
          }

          .address {
            word-break: keep-all;
            overflow-wrap: break-word;
          }

          .map {
            iframe {
              aspect-ratio: 1 / 1;
              max-width: 100%;
              width: 100%;
              height: auto;
            }
          }

          .transport p {
            padding-inline-start: 1.5em;
            text-indent: -0.5em;
          }

          .warning {
            line-height: 1.7rem;
            text-shadow: #fff 1px 1px;
            background-image: repeating-linear-gradient(-45deg, rgb(255 249 225) 0 20px, rgb(246 246 246) 20px 40px);
            border-radius: 1.5rem;
            border: solid 1px gray;
            padding: 0.5rem 1rem;
          }
        }
      }
    }
  }
}

.about_federation {
  background: repeat url(../image/bg/back_federation.webp);

  .contents {
    background: repeat url(../image/bg/border_federation.webp);

    section {
      background-color: rgb(255 255 255 / 0.95);

      .looseleaf {
        .inner {
          .group_grid {
            display: grid;
            column-gap: 1rem;
            row-gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            grid-template-rows: subgrid;

            .card {
              display: grid;
              grid-template-rows: subgrid;
              grid-row: span 3;

              .card-title {
                width: fit-content;
                padding: 0 0.5em;
                margin: 0.5em 0 0 0.5em;
                letter-spacing: 0.25em;
                background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
                text-shadow: rgb(255 255 255) 1px 1px;
                border-radius: 0.25em;
              }

              .card-text {
                margin: 0 0.5rem 0 1rem;
                text-align: justify;
              }

              ul {
                max-width: 90%;

                li {
                  list-style: none;
                }

                .multi-address {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: nowrap;
                  align-items: flex-start;
                }
              }
            }
          }

          .address {
            word-break: keep-all;
            overflow-wrap: break-word;
          }
        }
      }
    }
  }
}

.winner_gallery {
  .title {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1024 / 240;
  }

  .nav_grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));

    a {
      text-align: justify;
      text-align-last: justify;
    }
  }

  .award_grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(5.5em, 1fr));

    label {
      text-align: justify;
      text-align-last: justify;
    }
  }

  .grade_grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));

    label {
      white-space: nowrap;
      text-align: justify;
      text-align-last: justify;
    }
  }

  .gold {
    position: relative;
    box-shadow: 0 2px 14px rgb(0 0 0 / 0.1);
    background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
    position: sticky;
    top: 3.5em;

    h2 {
      text-align: center;
      height: 2em;
      padding-block-start: 0.25em;
      letter-spacing: 0.25em;
      text-shadow: 2px 2px rgb(255 255 255);
    }
  }

  /* リンクスクロール時の調整 */
  .link_margin {
    height: 2rem;
  }

  /* 作品フレーム */
  .work_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));

    .outframe {
      background-color:#3C3432;
      border:  4px outset #3C3432;
      padding: 4px;
      box-shadow: 1px 1px 2px 2px rgb(0 0 0 / 0.3);
      max-width: 10rem;

      .inframe {
        border:  2px inset #3C3432;
        padding: 1rem 0.5rem;

        img {
          cursor: zoom-in;
          width: 100%;
          max-width: 100%;
          height: auto;
          /* aspect-ratio: 1024 / 480; */
        }

        .name_plate {
          background: url(../image/bg/nameplate.webp);
          border: 2px outset #3C3432;
          font-size: smaller;
          text-shadow: 1px 1px whitesmoke;
          margin-block-start: 0.75rem;
          padding: 0.25rem 0.5rem;
          border-radius: 3px;
          line-height: 1.25rem;

          > div {
            letter-spacing: -0.05em;
          }
        }
      }

      .bg-nishikucho {
        background-image: url(../image/bg/wb_nishikucho.webp);
      }
      .bg-taisho {
        background-image: url(../image/bg/wb_taisho.webp);
      }
      .bg-juntaisho {
        background-image: url(../image/bg/wb_juntaisho.webp);
      }
      .bg-kaicho {
        background-image: url(../image/bg/wb_kaicho.webp);
      }
      .bg-rijicho {
        background-image: url(../image/bg/wb_rijicho.webp);
      }
      .bg-renmei {
        background-image: url(../image/bg/wb_renmei.webp);
      }
      .bg-shorei {
        background-image: url(../image/bg/wb_shorei.webp);
      }
      .bg-otendo {
        background-image: url(../image/bg/wb_otendo.webp);
      }
      .bg-bisodo {
        background-image: url(../image/bg/wb_bisodo.webp);
      }
    }
  }
}


.title {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1024 / 240;
}

.nav_grid {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));

  a {
    text-align: justify;
    text-align-last: justify;
  }
}

.gold {
  position: relative;
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.1);
  background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%);
  position: sticky;
  top: 3.5em;

  h2 {
    text-align: center;
    height: 2em;
    padding-block-start: 0.25em;
    letter-spacing: 0.25em;
    text-shadow: 2px 2px rgb(255 255 255);
  }
}
/* リンクスクロール時の調整 */
.link_margin {
  height: 1.5rem;
}

.name_grid {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  text-align: center;

  span {
    display: inline-block;
    width: 3em;
    text-align: justify;
    text-align-last: justify;
  }
}

.about_questionnaire {
background: repeat url(../image/bg/back_qre.webp);

.title {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1024 / 240;
}

.contents {
  background: repeat url(../image/bg/border_qre.webp);

  section {
    background-color: rgb(255 255 255 / 0.95);

    .looseleaf {
      .inner {
        .preface {
          text-indent: 1em;
        }

        .limit {
          word-break: keep-all;
          overflow-wrap: break-word;
          text-indent: -5.5em;
          padding-inline-start: 5.5em;
          line-height: 1.25em;
        }

        .winner {
          padding-inline-start: 1.5em;
          text-indent: -1.5em;
        }

        .warning {
          text-shadow: #fff 1px 1px;
          background-image: repeating-linear-gradient(-45deg, rgb(255 249 225) 0 20px, rgb(246 246 246) 20px 40px);
          border-radius: 1.5rem;
          border: solid 1px gray;
          padding: 0.5rem 1rem;
        }

        .form-label {
          text-indent: -1.125em;
          padding-inline-start: 1.125em;
        }

        .form-check {
          label {
            line-height: 1.25em;
          }
        }

        h5 {
          width: fit-content;
          padding: 0 0.5em;
          background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
          text-shadow: rgb(255 255 255) 1px 1px;
          border-radius: 0.25em;
        }
      }
    }
  }
}
}

.about_access {
background: repeat url(../image/bg/back_access.webp);

.contents {
  background: repeat url(../image/bg/border_access.webp);

  section {
    background-color: rgb(255 255 255 / 0.95);

    .looseleaf {
      .inner {
        h5 {
          width: fit-content;
          padding: 0 0.5em;
          background: linear-gradient(transparent 0.8em, rgb(0 255 0 /0.4 ) 0.2em);
          text-shadow: rgb(255 255 255) 1px 1px;
          border-radius: 0.25em;
        }

        .address {
          word-break: keep-all;
          overflow-wrap: break-word;
        }

        .map {
          iframe {
            aspect-ratio: 1 / 1;
            max-width: 100%;
            width: 100%;
            height: auto;
          }
        }

        .transport p {
          padding-inline-start: 1.5em;
          text-indent: -0.5em;
        }

        .warning {
          line-height: 1.7rem;
          text-shadow: #fff 1px 1px;
          background-image: repeating-linear-gradient(-45deg, rgb(255 249 225) 0 20px, rgb(246 246 246) 20px 40px);
          border-radius: 1.5rem;
          border: solid 1px gray;
          padding: 0.5rem 1rem;
        }
      }
    }
  }
}
}

.exhibition {
  .title {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1024 / 240;
  }

  .contents {
    background: repeat url(../image/bg/check.webp);
    text-shadow: rgb(255 255 255) 1px 1px;
  }

  .work_grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-template-rows: subgrid;

    .outframe {
      background-color:#3C4D00;
      /* border:  4px outset #3C4D00; */
      border-image-source: url(../image/bg/wb_rekidai3.webp);
      border-image-slice: 10% 0;
      border-image-width: 16px 0 16px;
      border-image-outset: 0;
      border-image-repeat: round;
      border-left: none;
      border-right: none;

      box-shadow: 1px 1px 2px 2px rgb(0 0 0 / 0.3);
      max-width: 10rem;

      padding: 2.5rem 0.75rem 1.5rem 0.75rem;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      background-image: url(../image/bg/wb_rekidai.webp);

      position: relative;

      .work {
        position: relative;
      }

      .cheering {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        transition: height 300ms ease-out;
      }

      .cheerup {
        height: 150%;
      }

      .cheerdown {
        height: auto;
      }

      .band {
        height: 1rem;
        background-image: url(../image/bg/wb_rekidai2.webp);
      }

      img {
        cursor: zoom-in;
        width: 100%;
        max-width: 100%;
        height: auto;
      }

      .name_plate {
        background: url(../image/bg/nameplate.webp);
        border: 2px outset #3C3432;
        font-size: smaller;
        text-shadow: 1px 1px whitesmoke;
        margin-block-start: 0.25rem;
        padding: 0.25rem 0.5rem;
        border-radius: 3px;
        line-height: 1.25rem;

        > div {
          letter-spacing: -0.05em;
        }

        label {
          margin: 0 auto;
          min-width: 7.25em;
          content: "ABC";
        }

        input[type="radio"]+label:before {
          content: "🤍 いいね";
          color: black;
        }

        input[type="radio"]:checked+label:before {
          content: "💖 いいよ！";
          color: white;
        }
      }
    }
  }

  .winner {
    grid-template-columns: auto auto !important;
    justify-content: center;
  }

  .medal1 {
    width: 50%;
    height: auto;
  }

  .medal-name1 {
    width: clamp(100%, 60%, 50%);
    height: auto;
  }

  .medal1 {
    width: 50%;
    height: auto;
  }

  .medal2 {
    width: 50% !important;
    max-width: 50% !important;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    cursor: default !important;
  }

  form {
    padding: 0.5em;
    background-color: rgb(255 255 255 / 0.8);
    border-radius: 0.5em;
  }
  #postcode {
    width: 6em;
  }
}