@charset "UTF-8";
/* ============================================================
   フォトコンテスト（/photo_contest/）
   現行サイト cms/html/assets/css/photo_contest.css からの移植。
   プレーンCSSなのでそのまま持ってきている（クラス名は現行のまま触らない）。
   変更点：
     1. 画像パスを /assets/images/ → /assets2026/images/
     2. .pc_mv の高さをカンプ（Figma 1037:241 = 1366×530）に合わせた
   ============================================================ */
/* ============================================================
  ぶんたまフォトコンテスト2026 固定ページ コンテンツ用CSS
  ※ CMS組込み前のコーディング。ヘッダー・パンくず・フッターは対象外
  ※ このファイルは assets/sass/style.scss と同期しています
============================================================= */
/* ---------- base ---------- */
#main_area {
  padding: 0;
}

.pc_main {
  color: #1a1311;
  font-family: "Noto Sans JP", sans-serif;
}

@media only screen and (min-width: 641px) {
  .pc_main {
    /* PC時のみベースフォントサイズを14pxにする（このページ限定） */
    font-size: 14px;
  }
}
.pc_main *,
.pc_main *::before,
.pc_main *::after {
  box-sizing: border-box;
}

.pc_main img {
  display: block;
  max-width: 100%;
  height: auto;
}

.pc_container {
  /* はみ出し防止用の外枠。実際の幅は各要素側でFigma仕様のmax-widthを直接指定する */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.pc_sec {
  padding: clamp(48px, 5vw, 64px) 0 clamp(56px, 6vw, 72px);
}

.pc_sec_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.pc_sec_eyebrow {
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: #c7381b;
  letter-spacing: 0.05em;
}

.pc_sec_eyebrow.pc_sec_eyebrow_light {
  color: #ffd95c;
}

.pc_sec_title {
  font-weight: 700;
  font-size: clamp(22px, 2vw + 12px, 28px);
  line-height: 1;
  color: #1a1311;
}

.pc_sec_title.pc_sec_title_light {
  color: #ffffff;
}

/* 背景色+グランジテクスチャを持つセクション共通（HOWTO / PRIZES）
   ※ テクスチャ画像はあらかじめ明度17%に焼き込み済み（texture_grunge_dimmed.png）。
      Figmaの「opacity:17% + mix-blend-mode:color-dodge」を、
      同一要素内の background-blend-mode で完結させる（疑似要素・isolation不要）。 */
.pc_sec_texture {
  position: relative;
  overflow: hidden;
  background-color: #ea5436;
  background-image: url(/assets2026/images/photo_contest/texture_grunge_dimmed.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% auto;
  background-blend-mode: color-dodge;
}

/* カードを横並びにするリスト共通（HOWTO / PRIZES） */
.pc_card_row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* カード共通の見た目（HOWTO / PRIZES） */
.pc_card {
  display: flex;
  flex-direction: column;
  width: 235px;
  border: 1px solid #1a1311;
  border-radius: 8px;
  background: #ffffff;
}

/* 固定ヘッダー分の逃げは .breadcrumb_plain（common.scss）が持つ。
   MV はパンくずの下に少し間を空けるだけ */
#photo_contest .pc_mv {
  margin-top: 10px;
}

/* 現行サイトのリセットは body line-height:1.3（dt/dd/li/th/td/p は 1.5）。
   2026 のリセットは 1.6 なので、そのまま移植すると各セクションが背高くなる。
   移植ページの中だけ現行サイトの行送りに戻して、見た目を一致させる */
#photo_contest .pc_mv,
#photo_contest #main_area {
  line-height: 1.3;
}

#photo_contest .pc_mv dt,
#photo_contest .pc_mv dd,
#photo_contest .pc_mv li,
#photo_contest .pc_mv th,
#photo_contest .pc_mv td,
#photo_contest .pc_mv p,
#photo_contest #main_area dt,
#photo_contest #main_area dd,
#photo_contest #main_area li,
#photo_contest #main_area th,
#photo_contest #main_area td,
#photo_contest #main_area p {
  line-height: 1.5;
}

/* ============================================================
  MV
============================================================= */
.pc_mv {
  position: relative;
  width: 100%;
  /* Figma 1037:241 は 1366×530。現行サイトは clamp(400px, 50vw, 663px) と
     カンプより高くしていたので、カンプの比率（530 / 1366 = 38.799vw）に直した */
  height: clamp(400px, 38.799vw, 530px);
  overflow: hidden;
  background-color: #1a1311;
}

.pc_mv_strip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pc_mv_strip_track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: pc_mv_strip_scroll 50s linear infinite;
}

.pc_mv_strip_track img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  object-fit: cover;
}

@keyframes pc_mv_strip_scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.pc_mv_strip_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
}

.pc_mv_scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.19) 50%, rgba(0, 0, 0, 0.3) 100%);
}

.pc_mv_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 90%;
  max-width: 660px;
  text-align: center;
}

.pc_mv_camera_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6vw, 76px);
  height: clamp(52px, 6vw, 76px);
  border-radius: 18px;
  background: #ffffff;
}

.pc_mv_camera_icon img {
  width: 60%;
  height: auto;
}

.pc_mv_logo {
  width: clamp(180px, 22vw, 300px);
  height: auto;
}

.pc_mv_title {
  font-weight: 700;
  font-size: clamp(24px, 3.3vw, 46px);
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  line-height: 1.3;
}

.pc_mv_subtitle {
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 20px);
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.pc_mv_desc {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.pc_mv_host {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(80px, 10vw, 100px);
}

.pc_mv_host p {
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.pc_mv_bottom_band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 36px);
  padding: 12px 16px;
  min-height: 64px;
  background: #c7381b;
}

.pc_mv_period {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
}

.pc_mv_hashtag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #ffffff;
}

.pc_mv_hashtag_text {
  font-weight: 700;
  font-size: 14px;
  color: #c7381b;
}

.pc_mv_hashtag_ig {
  font-weight: 700;
  font-size: 14px;
  color: #1a1311;
}

/* ============================================================
  Lead
============================================================= */
.pc_lead {
  padding: clamp(40px, 6vw, 56px) 0 clamp(40px, 6vw, 64px);
  background: #ffffff;
}

.pc_lead_title {
  font-weight: 700;
  font-size: clamp(20px, 2vw + 10px, 28px);
  text-align: center;
  margin-bottom: 20px;
}

.pc_lead_text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================
  OUTLINE
============================================================= */
.pc_sec_outline {
  background: #f8f8f7;
}

.pc_outline_table {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #1a1311;
  border-radius: 8px;
  overflow: hidden;
}

.pc_outline_table th,
.pc_outline_table td {
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #ebebeb;
}

.pc_outline_table th {
  width: 160px;
  padding: 14px 16px;
  vertical-align: middle;
  font-weight: 700;
  background: #f8f8f7;
  white-space: nowrap;
}

.pc_outline_table td {
  padding: 14px 20px;
  vertical-align: top;
  font-weight: 400;
  line-height: 1.6;
}

.pc_outline_table tr:last-child th,
.pc_outline_table tr:last-child td {
  border-bottom: none;
}

/* ============================================================
  HOWTO
============================================================= */
.pc_howto_list {
  /* 横並びレイアウトは .pc_card_row（共通クラス）が担当 */
  margin-bottom: clamp(20px, 3vw, 32px);
}

.pc_howto_card {
  /* カードの見た目は .pc_card（共通クラス）が担当。差分（内側の余白・間隔）のみここで指定 */
  gap: 12px;
  padding: 24px 20px;
}

.pc_howto_step {
  font-weight: 700;
  font-size: 16px;
  color: #c7381b;
}

.pc_howto_text {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
}

.pc_howto_text a {
  color: #c7381b;
  font-weight: 700;
  text-decoration: underline;
}

.pc_howto_notes {
  max-width: 1000px;
  margin: 0 auto;
  font-weight: 500;
  font-size: 12px;
  color: #1a1311;
}

.pc_howto_notes p {
  font-size: 12px;
  line-height: 1.8;
}

/* ============================================================
  SUBJECT
============================================================= */
.pc_sec_subject {
  background: #f8f7f4;
}

.pc_subject_card {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  max-width: 814px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid #1a1311;
  border-radius: 8px;
  background: #ffffff;
}

.pc_post_sample {
  width: 300px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.pc_post_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.pc_post_user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pc_post_avatar {
  display: flex;
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1.5px solid #f99b11;
  border-radius: 18px;
}

.pc_post_avatar img {
  border-radius: 18px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pc_post_meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc_post_name {
  font-weight: 600;
  font-size: 13px;
  color: #000;
}

.pc_post_place {
  font-size: 11px;
  color: #262626;
}

.pc_post_media {
  width: 100%;
  height: 200px;
}

.pc_post_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc_post_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
}

.pc_post_actions_left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pc_post_likes {
  padding: 2px 12px;
  font-weight: 700;
  font-size: 14px;
}

.pc_post_caption {
  padding: 4px 12px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.pc_post_caption_name {
  font-weight: 700;
}

.pc_post_caption_tag {
  color: #c7381b;
}

.pc_post_caption_note {
  padding: 0 12px 12px;
  font-size: 12px;
  color: #999;
}

.pc_subject_lists {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pc_subject_list_head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pc_subject_list_head p {
  font-weight: 700;
  font-size: 16px;
}

.pc_subject_list_body {
  font-weight: 400;
  font-size: 14px;
}

.pc_subject_list_body p {
  font-size: 14px;
  line-height: 1.6;
}

.pc_subject_divider {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 0;
}

/* ============================================================
  PRIZES
============================================================= */
.pc_prizes_lead {
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.pc_prizes_lead_note {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
}

.pc_prize_card {
  /* カードの見た目は .pc_card（共通クラス）が担当。差分（内側の余白・間隔）のみここで指定 */
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
}

.pc_prize_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.pc_prize_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pc_prize_name {
  font-weight: 700;
  font-size: 15px;
  color: #1a1311;
}

.pc_prize_qty {
  font-weight: 500;
  font-size: 14px;
  color: #1a1311;
}

.pc_prize_qty_num {
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 28px);
  color: #c7381b;
}

/* ============================================================
  JUDGES
============================================================= */
.pc_sec_judges {
  background: #f8f8f7;
}

.pc_judges_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 798px;
  margin: 0 auto;
}

.pc_judge_card {
  width: 250px;
  border: 1px solid #1a1311;
  border-radius: 8px;
  background: #ffffff;
}

.pc_judge_link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px 24px;
  text-decoration: none;
  color: inherit;
}

.pc_judge_photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}

.pc_judge_name {
  font-weight: 700;
  font-size: 16px;
}

a .pc_judge_name {
  text-decoration: underline;
}

.pc_judge_role {
  font-weight: 500;
  font-size: 12px;
  color: #707070;
}

/* ============================================================
  NOTES
============================================================= */
.pc_sec_notes {
  background: #ffffff;
}

.pc_notes_list {
  font-weight: 400;
  font-size: 14px;
  max-width: 800px;
  margin: 0 auto clamp(20px, 3vw, 32px);
}

.pc_notes_list p {
  font-size: 14px;
  line-height: 1.7;
}

.pc_terms_full {
  max-width: 800px;
  max-height: 400px;
  margin: 0 auto;
  padding: 24px;
  overflow-y: auto;
  border: 1px solid #1a1311;
  border-radius: 8px;
  background: #f8f8f7;
  font-size: 13px;
  line-height: 1.8;
}

.pc_terms_full_placeholder {
  color: #999;
  text-align: center;
  font-size: 13px;
}

.pc_terms_heading {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
}

.pc_terms_heading:first-child {
  margin-top: 0;
}

.pc_terms_para {
  margin-top: 6px;
  font-size: 13px;
}

.pc_arrow_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 14px;
}

.pc_arrow_btn img {
  width: 15px;
  height: 13px;
}

.pc_arrow_btn.pc_arrow_btn_accent {
  background: #ea5436;
  /* 元SVGは左向きの矢印のため、水平反転して右向きにする */
  transform: scaleX(-1);
}

.pc_arrow_btn.pc_arrow_btn_white {
  background: #ffffff;
  transform: rotate(180deg);
}

/* ============================================================
  RESULTS
============================================================= */
.pc_sec_results {
  background: #f8f7f4;
}

.pc_results_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 32px;
  border: 1px solid #1a1311;
  border-radius: 8px;
  background: #ffffff;
}

.pc_results_text {
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

/* ============================================================
  CTA
============================================================= */
.pc_sec_cta {
  background: #ffffff;
}

.pc_sec_cta .pc_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.pc_cta_btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 36px 22px 48px;
  border-radius: 999px;
  background: #c7381b;
  text-decoration: none;
}

.pc_cta_btn span:first-child {
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  color: #ffffff;
}

/* ============================================================
  Responsive : 1024 / 900 / 640
============================================================= */
@media only screen and (max-width: 1024px) {
  .pc_container {
    padding: 0 32px;
  }
}
@media only screen and (max-width: 900px) {
  .pc_mv_host {
    display: none;
  }
  .pc_mv {
    /* MV中央のテキストが応募期間バンドと重なるため、この幅以下では画面いっぱいの高さを確保する */
    height: 100vh;
    height: 100dvh;
  }
}
@media only screen and (max-width: 640px) {
  .pc_container {
    padding: 0 20px;
  }
  .pc_sec {
    padding: 40px 0 48px;
  }
  .pc_mv_bottom_band {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    min-height: auto;
  }
  .pc_outline_table th,
  .pc_outline_table td {
    display: block;
    width: 100%;
    padding: 10px 16px;
  }
  .pc_outline_table th {
    border-bottom: none;
    padding-bottom: 4px;
  }
  .pc_outline_table td {
    padding-top: 0;
  }
  .pc_card {
    width: 100%;
    max-width: 340px;
  }
  .pc_subject_card {
    padding: 20px;
  }
  .pc_post_sample {
    width: 100%;
  }
  .pc_cta_btn {
    padding: 18px 24px 18px 32px;
  }
}

/*# sourceMappingURL=photo_contest.css.map */