/* =========================================================
   POG-INFO トップページ リデザイン (2026-05)
   ※構造は本番のまま、CSSのみで配色・タイポ・余白を刷新
   ※body背景の ivory (#fffff0) は POG-INFO のサイトカラーなので維持
   palette: 青屋根の厩舎 × ターフ緑 × ベージュ × 茶
   ========================================================= */

:root{
  --pi-primary:#1e3a5f;       /* 厩舎屋根の濃紺 */
  --pi-primary-deep:#142a47;
  --pi-primary-soft:#2d5688;
  --pi-accent:#2f7a45;        /* ターフ緑 */
  --pi-accent-soft:#3f9a59;
  --pi-sand:#c9a87a;
  --pi-saddle:#8b5a3c;
  --pi-text:#152033;
  --pi-text-sub:#5b6577;
  --pi-text-muted:#8b94a3;
  --pi-border:#e3e8ef;
  --pi-shadow-sm:0 1px 3px rgba(20,42,71,.06);
  --pi-shadow:0 4px 14px rgba(20,42,71,.08);
  --pi-shadow-lg:0 10px 30px rgba(20,42,71,.14);
  /* (no-op marker for cache-bust verification) */
  --pi-radius:14px;
  --pi-font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",system-ui,sans-serif;
}

/* ===========================
   1. ヒーロー (.header-area) — 朝→昼→夜ループ動画
   =========================== */
.header-area .header-hero{
  position:relative;
  background:#0d1c33;
  border-radius:var(--pi-radius);
  overflow:hidden;
  isolation:isolate;
  padding:3.5rem 0 3rem;
}
/* 動画はヒーロー全面を覆う */
.header-area .header-hero .hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;        /* 上寄せで空を映す */
  z-index:0;
  pointer-events:none;
}
/* PCはヒーローを高くして空も建物も両方見える */
@media (min-width:992px){
  .header-area .header-hero{
    min-height:560px;
    padding:5rem 0 4rem;
  }
  .header-area .header-hero .hero-video{
    object-position:center 20%;       /* PCはやや下寄せ気味で建物まで見える */
  }
}
/* テキスト読みやすさのための微オーバーレイ（薄め: 動画を活かす） */
.header-area .header-hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.45) 100%);
  z-index:1;
  pointer-events:none;
  /* 朝/昼は薄め、夜は更に明るくするため、夜側でオーバーレイ薄くしたい
     → animation でも調整 */
  animation:hero-overlay 32s ease-in-out infinite;
}
.header-area .header-hero > *{ position:relative;z-index:2; }

/* 32秒サイクル 4シーン:
   0-6s:   朝
   6-8s:   crossfade
   8-14s:  昼
   14-16s: crossfade
   16-22s: 夕
   22-24s: crossfade
   24-30s: 夜
   30-32s: crossfade → 朝へループ */
@keyframes hero-overlay{
  0%    { background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.40) 100%); }  /* 朝 */
  21%   { background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.02) 40%,rgba(0,0,0,.30) 100%); }  /* 昼 */
  43%   { background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.40) 100%); }  /* 夕 */
  68%   { background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.20) 100%); }  /* 夜（動画自体が暗いので薄く） */
  100%  { background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.40) 100%); }
}

/* ヒーロー文字エリア: 背後に放射状ダークレイヤーで視認性確保 */
.header-area .header-hero-content{
  position:relative;
  isolation:isolate;
}
.header-area .header-hero-content::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:140%;height:160%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 45%,rgba(0,0,0,0) 75%);
  z-index:-1;
  pointer-events:none;
}

.header-area .header-hero-content .header-title{
  font-family:"Bebas Neue","Hiragino Sans","Yu Gothic Medium",sans-serif;
  font-size:clamp(2.8rem,6vw,4.6rem) !important;
  font-weight:900 !important;
  letter-spacing:.04em;
  line-height:1 !important;
  margin-bottom:1rem !important;
  color:#fff !important;
  /* 多重シャドウでハロー＋輪郭を強化 */
  text-shadow:
    0 0 1px rgba(0,0,0,.9),
    0 2px 4px rgba(0,0,0,.7),
    0 6px 24px rgba(0,0,0,.7),
    0 12px 40px rgba(0,0,0,.5);
  animation:hero-title-color 32s ease-in-out infinite;
}
/* タイトル直下のタグライン（Web新聞 + 予想大会） */
.header-area .header-hero-content .hero-tagline{
  color:#fff !important;
  font-family:var(--pi-font-jp);
  font-size:clamp(.95rem,1.5vw,1.18rem);
  font-weight:700;
  letter-spacing:.04em;
  margin:-.4rem auto 1rem !important;
  padding:.35rem 1.1rem;
  display:inline-block;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  backdrop-filter:blur(2px);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.hero-tagline-em{
  color:#ffd97a;
  font-weight:800;
}

.header-area .header-hero-content .text{
  font-family:var(--pi-font-jp);
  font-size:clamp(1rem,1.5vw,1.15rem) !important;
  line-height:1.9;
  max-width:680px;margin:0 auto 1.4rem;
  font-weight:600;                          /* 中ウェイトで存在感UP */
  color:#fff !important;
  text-shadow:
    0 0 1px rgba(0,0,0,.95),
    0 1px 3px rgba(0,0,0,.85),
    0 2px 12px rgba(0,0,0,.75),
    0 4px 20px rgba(0,0,0,.55);
  animation:hero-text-color 32s ease-in-out infinite;
}

/* 32sサイクル 4シーン: 朝→昼→夕→夜→朝 */
@keyframes hero-title-color{
  0%    { color:#fff8e7; text-shadow:0 4px 20px rgba(120,60,20,.55); } /* 朝: 暖色寄り白 */
  21%   { color:#ffffff; text-shadow:0 6px 28px rgba(0,0,0,.55); }      /* 昼: 純白＋強影 */
  43%   { color:#fff2d9; text-shadow:0 4px 22px rgba(160,60,30,.55); } /* 夕: 暖色強め */
  68%   { color:#dceaff; text-shadow:0 4px 24px rgba(0,30,80,.7); }    /* 夜: 寒色寄り白 */
  100%  { color:#fff8e7; text-shadow:0 4px 20px rgba(120,60,20,.55); }
}
@keyframes hero-text-color{
  0%    { color:#fff5e0; }
  21%   { color:#eaf1fb; }
  43%   { color:#ffe9d0; }
  68%   { color:#cfdef5; }
  100%  { color:#fff5e0; }
}

/* ヒーロー内のSNSアイコン (X / note) — 白丸＋ナチュラル色 */
.header-area .header-hero-content .row.mt-3 a{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:#fff;
  border:1px solid rgba(255,255,255,.6);
  transition:.2s ease;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.header-area .header-hero-content .row.mt-3 a:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.header-area .header-hero-content .row.mt-3 a i{
  font-size:1.45rem !important;
  color:#000 !important;
  transition:.2s;
}
.header-area .header-hero-content .row.mt-3 a img{
  width:26px !important;height:26px !important;
  margin:0 !important;
  transition:.2s;
}

.header-area .header-hero-image img{
  border:3px solid rgba(255,255,255,.4) !important;
  border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  max-width:48%;
  margin:0 .5rem;
}

/* ===========================
   1.5 画面プレビュー (.pi-preview)
   =========================== */
.pi-preview{
  padding:2.5rem 0 1rem;
}
.pi-preview__head{
  text-align:center;
  margin-bottom:1.5rem;
}
.pi-preview__eyebrow{
  display:inline-block;
  font-size:.72rem;letter-spacing:.4em;font-weight:700;
  color:var(--pi-accent);
  text-transform:uppercase;margin-bottom:.45rem;
}
.pi-preview__title{
  font-family:var(--pi-font-jp);
  font-size:clamp(1.3rem,2.2vw,1.6rem);
  font-weight:800;color:var(--pi-text);
  margin:0;letter-spacing:.01em;
}
.pi-preview__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  max-width:980px;margin:0 auto;padding:0 .5rem;
}
.pi-preview__item{
  margin:0;
  background:#fff;
  border:1px solid var(--pi-border);
  border-radius:var(--pi-radius);
  padding:.75rem .75rem 1rem;
  box-shadow:var(--pi-shadow);
  transition:.25s ease;
  text-align:center;
}
.pi-preview__item:hover{
  transform:translateY(-3px);
  box-shadow:var(--pi-shadow-lg);
}
.pi-preview__item img{
  width:100%;height:auto;
  border-radius:8px;
  border:1px solid var(--pi-border);
}
.pi-preview__item figcaption{
  margin-top:.7rem;
  font-size:.85rem;font-weight:700;
  color:var(--pi-text-sub);
  letter-spacing:.04em;
}
@media (max-width:768px){
  .pi-preview__grid{ grid-template-columns:1fr;gap:1rem; }
}

/* ===========================
   2. about-area 共通
   =========================== */
.about-area{
  padding:3rem 0 !important;
}
.about-area + .about-area{
  border-top:1px dashed var(--pi-border);
}

.about-area .section-title .line{
  width:42px;height:3px;background:var(--pi-accent);
  border-radius:2px;
  margin-bottom:.7rem;
}
.about-area .section-title .title{
  font-family:var(--pi-font-jp);
  font-size:clamp(1.6rem,2.6vw,2rem) !important;
  font-weight:800 !important;
  color:var(--pi-text);
  letter-spacing:.01em;
  line-height:1.4;
}

.about-area .about-content .text{
  color:var(--pi-text-sub);
  font-size:.98rem;
  line-height:1.95;
  margin-bottom:1rem;
}
.about-area .about-content .text b a,
.about-area .about-content .text a{
  color:var(--pi-primary-soft);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.about-area .about-content .text a:hover{ color:var(--pi-accent); }

/* main-btn (詳細はこちら): サイト共通の saddle brown (#a0522d) に統一 */
.about-area .about-content .main-btn,
a.main-btn{
  display:inline-flex !important;
  align-items:center;gap:.5rem;
  background:#a0522d !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:.85rem 1.7rem !important;
  font-weight:700 !important;
  font-size:.96rem !important;
  text-decoration:none !important;
  box-shadow:0 6px 16px rgba(160,82,45,.3);
  transition:.2s ease;
  letter-spacing:.02em;
  margin-top:.5rem;
}
.about-area .about-content .main-btn:hover,
a.main-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(160,82,45,.45);
  background:#b75f37 !important;
  color:#fff !important;
}

/* about-image: 微回転で product showcase 風 */
.about-area .about-image{ display:flex;flex-direction:column;gap:1rem;padding:.5rem 0; }
.about-area .about-image img,
.about-area img.border{
  border:1px solid var(--pi-border) !important;
  border-radius:var(--pi-radius) !important;
  box-shadow:var(--pi-shadow);
  transition:.3s ease;
  max-width:100%;height:auto;
  background:#fff;
}
.about-area .about-image img:hover{
  transform:translateY(-3px);
  box-shadow:var(--pi-shadow-lg);
}

/* ===========================
   3. リスト ul.top
   =========================== */
.about-area ul.top{ padding-left:0;list-style:none; }
.about-area ul.top > li{
  position:relative;padding:.55rem 0 .55rem 1.7rem;
  color:var(--pi-text);line-height:1.8;font-size:.95rem;
  border-bottom:1px dashed var(--pi-border);
}
.about-area ul.top > li:last-child{ border-bottom:none; }
.about-area ul.top > li::before{
  content:"\f105";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--pi-accent);
  position:absolute;left:.4rem;top:.55rem;
  font-size:.95rem;
}
.about-area ul.top > li a{
  color:var(--pi-primary-soft);font-weight:700;
  text-decoration:none;border-bottom:1px solid transparent;
  transition:.2s;
}
.about-area ul.top > li a:hover{
  color:var(--pi-accent);border-bottom-color:var(--pi-accent);
}
.about-area ul.top ul.top{ margin-top:.3rem;margin-left:.3rem; }

.emp{ color:var(--pi-primary);font-weight:700;background:linear-gradient(transparent 60%,#fff3a8 60%); }
.bold{ font-weight:800;color:var(--pi-text); }

/* ===========================
   3.5 #desc 内のカードグリッド (.pi-cards)
   =========================== */
.pi-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:.5rem 0 1rem;
}
.pi-card{
  background:#fff;
  border:1px solid var(--pi-border);
  border-radius:var(--pi-radius);
  padding:1.3rem 1.2rem;
  display:flex;flex-direction:column;gap:.55rem;
  box-shadow:var(--pi-shadow-sm);
  transition:.2s ease;
}
.pi-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--pi-shadow);
  border-color:#d4dde8;
}
.pi-card--wide{ grid-column:span 3; }
@media (max-width:991px){
  .pi-cards{ grid-template-columns:repeat(2,1fr); }
  .pi-card--wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .pi-cards{ grid-template-columns:1fr; }
  .pi-card--wide{ grid-column:span 1; }
}
.pi-card__icon{
  width:42px;height:42px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#a0522d 0%,#b75f37 100%);
  color:#fff;font-size:1.05rem;
  box-shadow:0 4px 10px rgba(160,82,45,.25);
}
.pi-card__title{
  font-family:var(--pi-font-jp);
  font-size:1.02rem;font-weight:800;color:var(--pi-text);
  margin:0;letter-spacing:.01em;
}
.pi-card__desc{
  margin:0;font-size:.88rem;line-height:1.75;
  color:var(--pi-text-sub);
}
.pi-card__desc b{ color:var(--pi-text); }
.pi-card__media{
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.7rem;
}
.pi-card__media img{
  width:100%;height:auto;
  border:1px solid var(--pi-border);
  border-radius:8px;
  box-shadow:var(--pi-shadow-sm);
}
@media (max-width:640px){
  .pi-card__media{ grid-template-columns:1fr; }
}

/* ===========================
   4. #desc セクション
   =========================== */
#desc{
  /* body の ivory をそのまま使う（白背景にしない） */
  background:transparent;
  padding:2.8rem 0 3rem !important;
  margin-top:1rem;
  border-top:1px dashed var(--pi-border);
}
#desc h3.title,
#desc .title:not(.tsf-title){
  font-family:var(--pi-font-jp);
  font-size:clamp(1.5rem,2.5vw,1.85rem) !important;
  font-weight:800 !important;
  color:var(--pi-text) !important;
  border-left:5px solid var(--pi-primary);
  padding:.2rem 0 .2rem .9rem !important;
  margin:0 0 1.3rem !important;
  line-height:1.45;
  background:none !important;
}
#desc h2.main-title{
  font-family:var(--pi-font-jp);
  font-size:1.3rem !important;
  font-weight:800 !important;
  color:var(--pi-primary) !important;
  margin:1.4rem 0 1rem !important;
  letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.5rem;
}
#desc h2.main-title::before{
  content:"";display:inline-block;
  width:6px;height:18px;
  background:var(--pi-accent);
  border-radius:1px;
}

/* CTA btn-info はサイト共通の saddle brown (poginfo-color1.cssで定義済) を維持
   このトップページでは形状（角丸・余白・シャドウ・hover挙動）のみ整える */
#desc .btn.btn-info{
  /* color/background は site-wide の .btn-info を継承 */
  font-weight:700 !important;
  padding:.95rem 1.6rem !important;
  border-radius:999px !important;
  letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(160,82,45,.3) !important;
  transition:.2s ease;
}
#desc .btn.btn-info:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(160,82,45,.45) !important;
}
#desc .btn.btn-info.btn-sm{
  padding:.55rem 1.2rem !important;font-size:.88rem !important;
}
#desc img.border{
  border:1px solid var(--pi-border) !important;
  border-radius:var(--pi-radius) !important;
  box-shadow:var(--pi-shadow-sm);
}

/* ===========================
   5. ニュース棚 polish
   =========================== */
.news-shelf-wrapper{ margin-top:1.5rem !important; }
.news-shelf .shelf-item{
  border-radius:var(--pi-radius) !important;
  box-shadow:var(--pi-shadow-sm) !important;
  border:1px solid var(--pi-border) !important;
  transition:.25s ease !important;
}
.news-shelf .shelf-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--pi-shadow) !important;
}

/* ===========================
   6. レスポンシブ
   =========================== */
@media (max-width:768px){
  .header-area .header-hero{ padding:2.5rem 0; border-radius:0; }
  .header-area .header-hero-content .header-title{ font-size:2.6rem !important; }
  .about-area{ padding:2rem 0 !important; }
  #desc{ padding:2rem 1rem 2.5rem !important; }
}