@charset "UTF-8";

/*
 * ハムフェア自作品コンテスト入賞作品用CSS
 * 対象HTML:
 * Japanese/1_Tanoshimo/1-3_Ham-Fair/2026/jisaku2026-prize.htmなど
 */
    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: #ffffff;
      color: #111111;
      font-family: Noto Sans JP, Arial, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      font-size: 16px;
      line-height: 1.5;
    }

    .page {
      box-sizing: border-box;
      width: 700px;
      max-width: calc(100% - 32px);
      margin: 0 auto;
      padding: 24px 0 0;
    }

    .page-header {
      text-align: center;
    }

    .slogan {
      margin: 0 0 18px;
      padding:10px 16px;
      font-size: 24px;
      line-height: 1.35;
      font-weight: 700;
      background-color:pink;
    }

    .event-logo {
      display: block;
      width: 350px;
      max-width: 80%;
      height: auto;
      margin: 0 auto 22px;
    }

    .page-title {
      margin: 0 0 28px;
      padding: 10px 16px;
      background: #000080;
      color: #ffffff;
      font-size: 36px;
      line-height: 1.3;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .intro {
      margin: 0 0 24px;
      text-align: left;
      text-indent: 1em;
    }

    .award {
      margin: 36px 0 0;
    }

    .award-rank {
      box-sizing: border-box;
      margin: 0 0 8px;
      padding: 5px 20px;
      border: 1px solid #cccccc;
      background: #ffffff;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
      font-size: 25px;
      line-height: 1.4;
      font-weight: 700;
    }

    .award-body {
      padding: 0 22px;
    }

    .work-title {
      margin: 0;
      font-size: 24px;
      line-height: 1.4;
      font-weight: 700;
    }

    .winner {
      margin: 2px 0 14px 16px;
      font-size: 18px;
      line-height: 1.5;
      font-weight: 700;
    }

    .award-layout {
      display: flex;
      align-items: flex-start;
      gap: 18px;
    }

    .award-text {
      flex: 1 1 auto;
      min-width: 0;
    }

    .award-image-wrap {
      flex: 0 0 300px;
      text-align: right;
    }

    .award-image {
      display: block;
      width: 100%;
      max-width: 300px;
      height: auto;
      margin: 0 0 8px auto;
    }

    .award-image.narrow {
      max-width: 280px;
    }

    .features-title {
      margin: 0 0 8px;
      font-size: 16px;
      line-height: 1.5;
      font-weight: 700;
    }

    .features {
      margin: 0;
      padding-left: 1.4em;
    }

    .features li {
      padding-left: 0.1em;
    }

    .page-footer {
      margin: 42px 0 0;
      padding: 0 0 20px;
      text-align: center;
    }

    .page-footer hr {
      width: 600px;
      max-width: 86%;
      margin: 0 auto 18px;
      border: 0;
      border-top: 1px solid #999999;
    }

    .footer-nav {
      display: inline-table;
      margin: 0 auto 18px;
      border-collapse: separate;
      border-spacing: 12px 0;
    }

    .footer-nav td {
      vertical-align: bottom;
    }

    .footer-nav img {
      vertical-align: bottom;
    }

    .copyright {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
    }

    @media (max-width: 760px) {
      .page {
        max-width: calc(100% - 24px);
        padding-top: 18px;
      }

      .slogan {
        font-size: 21px;
      }

      .page-title {
        font-size: 28px;
      }

      .award-rank {
        font-size: 22px;
      }

      .work-title {
        font-size: 21px;
      }

      .award-body {
        padding: 0 10px;
      }

      .award-layout {
        display: block;
      }

      .award-image-wrap {
        width: auto;
        margin-top: 14px;
        text-align: center;
      }

      .award-image,
      .award-image.narrow {
        max-width: 100%;
        margin: 0 auto 8px;
      }
    }