/* =========================================================
   PIXEL.ORDER Top (po-top.css) - isolated
   - po-top 配下だけに効かせる（他ページを壊さない）
   ========================================================= */

.po-top,
.po-top *{
  box-sizing: border-box;
}

.po-top{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 14px 25px;
  overflow-wrap: anywhere;
}

/* Hero */
.po-top__hero{
  padding: 14px 10px 18px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
}

.po-top__title{
  margin: 0 0 10px;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.po-top__lead{
  margin: 0 auto;
  max-width: 46em;
  line-height: 1.85;
  opacity: 0.88;
  padding: 0 10px;
}

/* Section */
.po-top__section{
  padding: 18px 0 0;
}

.po-top__h2{
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Grid */
.po-top__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Card */
.po-top__card{
  display: block;
  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  overflow: hidden;

  transform: translateY(0);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

.po-top__cardBody{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  min-height: 168px;
}

.po-top__cardTitle{
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 16px;
  line-height: 1.25;
}

.po-top__cardMeta{
  font-size: 12.5px;
  line-height: 1.65;
  opacity: 0.74;
}

.po-top__cardCta{
  margin-top: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.09);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Hover */
@media (hover:hover){
  .po-top__card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.20);
    filter: brightness(1.03);
  }
  .po-top__card:hover .po-top__cardCta{
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.26);
  }
}

/* Responsive */
@media (max-width: 800px){
  .po-top__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .po-top{
    padding: 18px 12px 44px;
  }
  .po-top__cardBody{
    min-height: auto;
  }
}
/* =========================
   PO Top polish (append)
   - 見た目だけ整える
   ========================= */

/* 1) 余白：上に寄せて、下の空白を減らす */
.po-top{
  padding-top: 0px;   /* 既に #ueyohaku がある前提 */
  padding-bottom: 40px;
}

.po-top__section{
  padding-top: 14px;   /* 18→14へ軽く */
}

/* 2) Hero：箱を軽く、文字を少し大きく */
.po-top__hero{
  padding: 16px 14px 16px;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.16);
}

.po-top__title{
  font-size: 22px;
  letter-spacing: 0.08em;
}

.po-top__lead{
  font-size: 15px;
  opacity: 0.90;
}

/* 3) 見出し：小さすぎるので少し存在感 */
.po-top__h2{
  font-size: 14px;
  opacity: 0.92;
}

/* 4) Grid：カード間隔を少し広げて“呼吸”を作る */
.po-top__grid{
  gap: 16px;
}

/* 5) Card：枠を弱めて、影をシャープに */
.po-top__card{
  border-color: rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

@media (hover:hover){
  .po-top__card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18);
    filter: brightness(1.04);
  }
}

/* 6) カード内：タイトル/メタ/CTA の階層を強く */
.po-top__cardBody{
  padding: 16px 16px 14px;
  min-height: 156px; /* 168→156で少し締める */
}

.po-top__cardTitle{
  font-size: 17px;
  letter-spacing: 0.02em;
}

.po-top__cardMeta{
  font-size: 12px;
  opacity: 0.68;
}

/* 7) CTA：ボタンっぽさを軽く、文字を強く */
.po-top__cardCta{
  border-radius: 12px;
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
  font-weight: 900;
  letter-spacing: 0.03em;
}

@media (hover:hover){
  .po-top__card:hover .po-top__cardCta{
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
  }
}

/* 8) スマホ：詰まり防止 */
@media (max-width: 800px){
  .po-top__hero{
    padding: 14px 12px 14px;
  }
  .po-top__title{
    font-size: 20px;
  }
  .po-top__lead{
    font-size: 14px;
  }
}
/* 反映チェック用（あとで消す） */
/*.po-top__card { outline: 4px solid #ff00ff !important; }*/
.po-top__grid { gap: 28px !important; }
.po-top__card { border-radius: 28px !important; }

/* =========================
   Strong change patch (Top only)
   - 変化が見える検証用。後で数値を詰める
   ========================= */

/* 余白：全体を上に寄せ、下のスカスカ感を減らす */
.po-top{
  padding-bottom: 5px !important;
}

/* Hero：箱を小さく、読みやすく */
.po-top__hero{
  padding: 14px 12px !important;
  border-radius: 14px !important;
}

/* Grid：間隔を増やして、カードが詰まって見えるのを解消 */
.po-top__grid{
  gap: 26px !important;
}

/* Card：角丸を大きく、枠を弱く、影を綺麗に */
.po-top__card{
  border-radius: 26px !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28) !important;
  background: rgba(0,0,0,0.16) !important;
}

/* カード内：文字階層を強く */
.po-top__cardTitle{
  font-size: 18px !important;
  font-weight: 900 !important;
}

.po-top__cardMeta{
  font-size: 12px !important;
  opacity: 0.62 !important;
}

/* CTA：ボタンを“今っぽく” */
.po-top__cardCta{
  border-radius: 16px !important;
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.14) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

/* =========================
   PO Top final polish (Top only)
   - 上品に、でも変化は分かる
   ========================= */

/* 全体：下のスカスカ感を減らす */
.po-top{
  padding-bottom: 28px;
}

/* Hero：枠と影を整えて“新しい箱感”に */
.po-top__hero{
  border-radius: 18px;
  border-color: rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(0,0,0,0.18));
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
}

.po-top__title{
  font-size: 22px;
  letter-spacing: 0.08em;
}

.po-top__lead{
  font-size: 15px;
  opacity: 0.90;
}

/* 見出し：小さいけど芯を出す */
.po-top__h2{
  font-size: 14px;
  opacity: 0.92;
  margin-bottom: 14px;
}

/* Grid：間隔は“分かる程度”に広げる */
.po-top__grid{
  gap: 18px;
}

/* Card：角丸と影を今っぽく */
.po-top__card{
  border-radius: 20px;
  border-color: rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.20));
  box-shadow: 0 18px 46px rgba(0,0,0,0.30);
}

@media (hover:hover){
  .po-top__card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18);
    filter: brightness(1.04);
  }
}

/* カード内：階層を強化 */
.po-top__cardTitle{
  font-size: 17px;
  font-weight: 900;
}

.po-top__cardMeta{
  font-size: 12px;
  opacity: 0.66;
  line-height: 1.65;
}

/* CTA：ボタンの存在感を上げる（でも下品にはしない） */
.po-top__cardCta{
  border-radius: 14px;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.11);
  font-weight: 900;
  letter-spacing: 0.04em;
}

@media (hover:hover){
  .po-top__card:hover .po-top__cardCta{
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.24);
  }
}

/* モバイル：文字が詰まらないように */
@media (max-width: 800px){
  .po-top__grid{
    gap: 12px;
  }
  .po-top__title{
    font-size: 20px;
  }
  .po-top__lead{
    font-size: 14px;
  }
}
/* 変化が分かる最低ライン（Topだけ） */
.po-top__grid { gap: 22px !important; }
.po-top__card { border-radius: 24px !important; }

.po-top__cardMeta{ line-height: 1.7; }

.po-top__sub{
  margin: 0 0 14px;
  text-align: center;
  opacity: 0.78;
  font-size: 13px;
  line-height: 1.7;
}

/* タイトルとメタの間を少し広げて読みやすく */
.po-top__cardBody{ gap: 12px; }

/* メタが長い（ポスター）でも詰まらない */
.po-top__cardMeta{ line-height: 1.7; }


@media (hover:hover){
  .po-top__card:hover .po-top__cardCta{
    transform: translateY(-1px);
  }
}


.po-top__gallery{
  margin: 16px 0 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.po-top__thumb{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  transform: translateY(0);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.po-top__thumb img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.02);
}

@media (hover:hover){
  .po-top__thumb:hover{
    transform: translateY(-2px);
    filter: brightness(1.04);
    border-color: rgba(255,255,255,0.18);
  }
}

@media (max-width: 800px){
  .po-top__gallery{
    grid-template-columns: 1fr;
  }
  .po-top__thumb img{
    height: 200px;
  }
}
/* =========================
   Category tiles (Top only)
   - 作品プレビュー + 導線カードを1枠に統合
   ========================= */

.po-top__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.po-top__tile{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.20));
  box-shadow: 0 18px 46px rgba(0,0,0,0.30);
  overflow: hidden;
}

.po-top__tileMedia{
  display: block;
  text-decoration: none;
  color: inherit;
}

.po-top__tileMedia img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.02) contrast(1.02);
}

.po-top__tileBody{
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.po-top__cardTitle{
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.po-top__cardMeta{
  font-size: 12px;
  opacity: 0.66;
  line-height: 1.7;
}

/* CTA（ボタン風リンク） */
.po-top__cardCtaLink{
  margin-top: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.11);

  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: inherit;

  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}

/* hover */
@media (hover:hover){
  .po-top__tile:hover{
    filter: brightness(1.03);
    border-color: rgba(255,255,255,0.18);
  }
  .po-top__tile:hover .po-top__tileMedia img{
    transform: scale(1.03);
    filter: brightness(1.02);
  }
  .po-top__tile:hover .po-top__cardCtaLink{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.24);
  }
}

/* responsive */
@media (max-width: 800px){
  .po-top__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .po-top__tileMedia img{
    height: 220px;
  }
}


/* CTA位置を揃える：タイルを縦flexにして、本文を伸ばす */
.po-top__tile{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.po-top__tileMedia{
  flex: 0 0 auto;
}

/* 画像高さを固定（仮画像の比率が違っても揃う） */
.po-top__tileMedia img{
  height: 350px;          /* 好みで 180〜240 */
  object-fit: cover;
}

/* 本文を残り高さに広げ、CTAを下に固定 */
.po-top__tileBody{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.po-top__cardCtaLink{
  margin-top: auto;       /* これで3つが同じ“底”に揃う */
}
@media (max-width: 800px){
  .po-top__tileMedia img{
    height: 220px;
  }
}
.po-top__tileMedia img{
  height: min(350px, 38vh);
}

.po-top__tileMedia img{ height: min(350px, 38vh); }
@media (max-width: 800px){ .po-top__tileMedia img{ height: 240px; } }

/* 画像の見え方を統一：比率の違いを吸収 + トーンを揃える */
.po-top__tileMedia img{
  width: 100%;
  height: min(350px, 38vh);
  object-fit: cover;
  display: block;

  /* “仮画像バラつき”を整える */
  filter: saturate(1.03) contrast(1.03) brightness(0.98);
}

/* スマホは縦長すぎ防止 */
@media (max-width: 800px){
  .po-top__tileMedia img{
    height: 240px;
  }
}
@media (hover:hover){
  .po-top__tile:hover{
    border-color: rgba(255,255,255,0.22);
  }
}

.po-top__statement{
  margin: 12px 0 18px;
  padding: 5px 14px;
  text-align: center;

  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.po-top__statement p{
  margin: 0;
  line-height: 1.75;
  opacity: 0.92;
}

.po-top__statement p + p{
  margin-top: 6px;
  opacity: 0.80;
}
/* 枠の中に枠を防ぐ：Hero側の装飾を無効化してstatementだけ枠にする */
.po-top__hero{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 0 6px !important;
}


.po-top__statement{
  max-width: none;
  margin: 0 auto;
}

.po-top__statementMain{
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.7;
  opacity: 0.98;
}

.po-top__statementSub{
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.8;
  opacity: 0.78;
}
/* ステートメントの強さをもう一段（レイアウトはそのまま） */
.po-top__statementMain{
  font-size: 18px;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.po-top__statementSub{
  opacity: 0.74;
}


/* 中央のまま“芯”を出す：余白とリズム */
.po-top__statement{
  padding-top: 0px;
  /*padding-bottom: 18px;*/
}

.po-top__statementMain{
  line-height: 1.65;
	
}

.po-top__statementSub{
  margin-top: 10px;
  line-height: 1.85;
}


.po-top__themes{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.po-top__themeLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
	color:#d7d7d7;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.20);

  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@media (hover:hover){
  .po-top__themeLink:hover{
    text-decoration: none;
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
}

/* Top：ステートメント（3行テキスト）を上に寄せる（強制版） */
.po-top__hero{
  padding-top: 0px !important;     /* ここで全体を上へ */
  padding-bottom: 0 !important;
}

.po-top__statement{
  margin-top: 55px /*!important*/;
  margin-bottom: 0px /*!important*/;
}

/* p のデフォルト余白が残ってると動かないので潰す */
.po-top__statement p{
  margin: 0 !important;
	margin-top: 5px !important;
}

/* それでも微調整したい時の最終手段（数値だけ動かす） */
.po-top__statement{
  /*transform: translateY(-10px) !important;  /* -6〜-18pxで好み */
}

.po-top__statementSub{
  line-height: 1.5 !important;
  margin-top: 4px !important;
}
.po-top__statement p + p{
  margin-top: 4px !important;
}


/* Top：テーマリンク見出し（控えめ） */
.po-top__themesTitle{
  margin: 18px 0 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.82;
  line-height: 1.4;
}

.po-top__h2{
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.8;
  opacity: 0.78;
  text-align: center;
}