/* ========================================================= 明るい選挙啓発ポスターコンクール 受賞作品カード整列 ========================================================= */ /* --------------------------------------------------------- 一覧 PC：3列 --------------------------------------------------------- */ body.single-poster_contest .poster-awards-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px 26px !important; align-items: stretch !important; width: 100% !important; } /* --------------------------------------------------------- カード 全カードの横幅・高さを統一 --------------------------------------------------------- */ body.single-poster_contest .poster-award-card { display: flex !important; flex-direction: column !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 20px 20px 22px !important; border: 1px solid #dce8f1 !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: 0 5px 18px rgba(15, 63, 100, .045) !important; box-sizing: border-box !important; } /* --------------------------------------------------------- 画像エリア 枠サイズは統一、元画像の縦横比は維持 --------------------------------------------------------- */ body.single-poster_contest .poster-award-card__image { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 390px !important; margin: 0 0 20px !important; padding: 0 !important; overflow: hidden !important; background: #ffffff !important; } /* ライトボックス用リンク */ body.single-poster_contest .poster-award-lightbox-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; text-decoration: none !important; } /* 縦長・横長とも比率を崩さない */ body.single-poster_contest .poster-award-card__image img, body.single-poster_contest .poster-award-lightbox-link img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; margin: auto !important; object-fit: contain !important; } /* --------------------------------------------------------- テキストエリア --------------------------------------------------------- */ body.single-poster_contest .poster-award-card__body { display: grid !important; grid-template-rows: 42px 0px minmax(52px, auto) !important; align-items: start !important; width: 100% !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } /* --------------------------------------------------------- 賞 全カードで同じ高さ・位置 --------------------------------------------------------- */ body.single-poster_contest .poster-award-card__prize { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: start !important; justify-self: center !important; min-height: 32px !important; margin: 0 !important; padding: 5px 13px !important; border: 1px solid #9fcceb !important; border-radius: 999px !important; background: #f8fcff !important; color: #0875c9 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- 名前 --------------------------------------------------------- */ body.single-poster_contest .poster-award-card__name { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; margin: 0 !important; padding: 6px 0 0 !important; color: #073b68 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.45 !important; } body.single-poster_contest .poster-award-card__name span { margin-left: 5px !important; color: #6b7f8f !important; font-size: 11px !important; font-weight: 400 !important; } /* --------------------------------------------------------- 学校・都道府県・学年 --------------------------------------------------------- */ body.single-poster_contest .poster-award-card__school { display: flex !important; align-items: flex-start !important; justify-content: center !important; min-height: 52px !important; margin: 0 !important; padding: 5px 4px 0 !important; color: #52697c !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.7 !important; text-align: center !important; } /* --------------------------------------------------------- タブレット --------------------------------------------------------- */ @media (max-width: 991px) { body.single-poster_contest .poster-awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 20px !important; } body.single-poster_contest .poster-award-card__image { height: 350px !important; } } /* --------------------------------------------------------- スマートフォン --------------------------------------------------------- */ @media (max-width: 767px) { body.single-poster_contest .poster-awards-grid { grid-template-columns: 1fr !important; gap: 22px !important; } body.single-poster_contest .poster-award-card { max-width: 430px !important; margin-left: auto !important; margin-right: auto !important; padding: 18px 18px 20px !important; } body.single-poster_contest .poster-award-card__image { height: 340px !important; margin-bottom: 18px !important; } body.single-poster_contest .poster-award-card__body { grid-template-rows: 40px 0px minmax(48px, auto) !important; } body.single-poster_contest .poster-award-card__name { font-size: 17px !important; } body.single-poster_contest .poster-award-card__school { font-size: 12px !important; } } /* ========================================================= v1.0.1 英語見出しを非表示 ========================================================= */ /* ELEMENTARY SCHOOL / JUNIOR HIGH SCHOOL / HIGH SCHOOL */ body.single-poster_contest .poster-awards-heading__en { display: none !important; } /* COLLECTION など、ポスター詳細内の英語小見出し */ body.single-poster_contest .poster-contest-section-heading > p { display: none !important; } /* ========================================================= 賞ラベル 角丸をなくして四角形に ========================================================= */ body.single-poster_contest .poster-award-card__prize { border-radius: 0 !important; }