/* =========================================
   FRONT PAGE HERO - clean & modern layout
========================================= */


/* =======================================
   Header / Global Navigation / Hamburger
   ======================================= */

/* 共通 */
.site-header {
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-branding img {
  display: block;
  height: auto;
}

/* モバイル（〜768px） */
@media (max-width: 768px) {

  .nav-toggle {
    display: inline-block !important;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px 0;
    background-color: #333;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .global-nav {
    display: none !important;
    width: 100%;
    margin-top: 0.5rem;
  }

  .global-nav.is-open {
    display: block !important;
  }

  .nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-list a {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* PC（769px〜） */
@media (min-width: 769px) {

  .nav-toggle {
    display: none !important;
  }

  .global-nav {
    display: flex !important;
    align-items: center;
    width: auto;
    margin-top: 0;
  }

  .nav-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-list a {
    border-bottom: none;
  }
}

/* ============================
   HERO レイアウト（メイン + サブ2件）
   hero-static.php 用
============================ */

.hero-block {
  margin-top: 1.5rem;  /* ← 2.5rem から少し詰める */
  padding: 2rem 0 2rem;
  background: linear-gradient(
    135deg,
    #fee2e2 0%,
    #fecaca 45%,
    #f97373 100%
  );  /* 少し濃い赤＋斜めグラデーション */
  border-bottom: 1px solid #fecaca;
}


.hero-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
}


/* ---------- 左：メイン記事 ---------- */

.hero-main {
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* ← 中身をカラムの右側に寄せる */
}

.hero-main-image {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;

  width: 96%;                  /* ← カラム幅より少し細くする */
  max-width: 720px;            /* お好みで上限（なくてもOK） */
}

/* メイン画像の中にタイトルをオーバーレイ */
.hero-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-main-title-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.2rem 1.3rem;
  background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0.0));
  color: #fff;
}

.hero-main-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
}

.hero-main-title a {
  color: inherit;
  text-decoration: none;
}

.hero-main-title a:hover {
  text-decoration: underline;
}

/* 既存のメタ・抜粋は hero-main-text の中でそのまま使う */
.hero-main-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.4rem;
}

.hero-main-meta time {
  font-weight: 500;
}

.hero-main-type {
  padding: 0.15rem 0.6rem;
  border-radius: 0;
  background: transparent;
  color: #4338ca;
  font-size: 0.75rem;
  font-weight: 600;
}

.hero-main-excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #4b5563;
}

/* ---------- 右：サブ記事2件 ---------- */

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  align-items: center; /* ← 中央寄せ */
}

.hero-side-item {
  width: 100%;
  display: flex;
  justify-content: center; /* ← サムネを中央に */
}

/* サムネ */
.hero-side-thumb {
  position: relative;
  display: block;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: transparent;
  margin: 10px;
  width: 88%;              /* ← カラム幅より少し細く */
  max-width: 340px;        /* 大きくなりすぎないように上限 */
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25); /* 浮かせ感 */
}

.hero-side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-side-title-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0.0));
  color: #fff;
}

.hero-side-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.hero-side-title a {
  color: inherit;
  text-decoration: none;
}

.hero-side-title a:hover {
  text-decoration: underline;
}


/* アニメーションの下準備 */
.hero-main-image img,
.hero-side-thumb img {
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* メイン：少し拡大＋わずかに明るく */
.hero-main-image:hover img {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* サブ：メインより控えめ */
.hero-side-thumb:hover img {
  transform: scale(1.03);
  filter: brightness(1.03);
}

/* タイトルオーバーレイも少しだけ強調 */
.hero-side-thumb:hover .hero-side-title-overlay,
.hero-main-image:hover .hero-main-title-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.0));
}


/* =========================================
   HERO - Responsive Adjustments
========================================= */

/* 〜960px：タブレット・スマホ共通 */
@media (max-width: 960px) {

  /* コンテナ全体を端まで伸ばしすぎない */
  .site-container {
    padding: 0 1rem;
  }

  /* HERO グリッド（2カラム→1カラム） */
  .hero-grid,
  .fp-hero {
    grid-template-columns: 1fr;
  }

  /* 右側サブ記事2つを横並びにする */
  .hero-side {
    display: flex;
    flex-direction: row;   /* ← 横並び */
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }

  .hero-side-item {
    flex: 1 1 0;
  }

  .hero-side-thumb {
    width: 100%;
    max-width: 250px;      /* 2つ並んだときの大きさ調整 */
    aspect-ratio: 4 / 3;
  }

  .hero-side-title {
    font-size: 0.8rem;
    line-height: 1.4;
  }


  .hero-main {
    align-items: stretch;
  }

  .hero-main-image {
    width: 100%;
    max-width: none;
  }

  /* HERO の右側ボックス（旧 fp-hero-right）は下に回す */
  .hero-right,
  .fp-hero-right {
    margin-top: 1.5rem;
  }
}



/* 〜768px：スマホ寄りにさらに調整 */
@media (max-width: 768px) {

  /* タイトルは少し小さめに */
  .hero-title,
  .single-title {
    font-size: 1.4rem;
  }

  .hero-excerpt {
    font-size: 0.9rem;
    max-width: 100%;
  }

  /* 下部のニュースセクションまわりの余白（必要なら） */
  .hero-wrapper {
    padding: 0 1rem;
  }
}




/* =========================================
   FRONT PAGE - NEWS ＋ CPT 2カラム
========================================= */

/* PC：2カラム（左：ニュース、右：CPT） */
@media (min-width: 1024px) {

  .front-main-grid {
      display: flex;
      align-items: flex-start;
      gap: 32px; /* カラム間の余白 */
      margin-top: 32px; /* 32〜64pxの範囲で好みで調整 */
  }

  /* 左カラム：ニュース（横幅の残りを使う） */
  .front-main-left {
      flex: 0 0 calc(100% - 300px - 32px);
      max-width: calc(100% - 300px - 32px);
  }

  /* 右カラム：CPT サムネ（300px固定） */
  .front-main-right {
      flex: 0 0 300px;
      max-width: 300px;
  }

  /* ニュース一覧のグリッド（PCレイアウト） */
  .front-main-left .news-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)); /* 横3カラム */
      gap: 24px 24px; /* 行・列の余白。好みで調整 */
  }

  /* 各ニュースカード（PCでは縦型カード） */
  .front-main-left .news-grid .news-item {
      margin: 0;              /* 既存のテーマの余白があればリセット */
      display: flex;
      flex-direction: column; /* サムネ上・テキスト下 */
      height: 100%;
  }

  .front-main-left .news-grid .news-link {
      display: flex;
      flex-direction: column;
      height: 100%;
      text-decoration: none;
      color: inherit;
  }

  .front-main-left .news-grid .thumb--news {
      margin-bottom: 8px;
  }

  .front-main-left .news-grid .thumb--news img {
      width: 100%;
      height: auto;
      display: block;
  }

  .front-main-left .news-grid .news-title {
      font-size: 1rem;
      line-height: 1.4;
      margin: 0 0 4px;
  }

  /* 右側のCPTリスト（PCでは縦型カードを積む） */
  .front-main-right .cpt-side-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
  }

  .front-main-right .cpt-side-item {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 12px;
  }
}


/* モバイル〜タブレット：ニュース＋CPT を縦積み */
@media (max-width: 1023px) {

  .front-main-grid {
      display: block;
      margin-top: 32px; /* 32〜64pxの範囲で好みで調整 */
  }

  .front-main-left,
  .front-main-right {
      width: 100%;
  }
}


/* モバイル：ニュース一覧の表示を「サムネ左＋タイトル右」で6件縦並び */
@media (max-width: 767px) {

  .front-main-grid {
      display: block;
      margin-top: 32px; /* 32〜64pxの範囲で好みで調整 */
  }

  /* グリッドをやめて縦1列に */
  .front-main-left .news-grid {
      display: block;
  }

  /* 各記事を「横並び（サムネ左・テキスト右）」に */
  .front-main-left .news-grid .news-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 12px; /* 6件が縦に並ぶ間隔 */
  }

  .front-main-left .news-grid .news-link {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      width: 100%;
  }

  /* サムネを一回り小さく（ここでサイズ調整） */
  .front-main-left .news-grid .thumb--news {
      flex: 0 0 80px;      /* 60〜90px の範囲で好みで微調整 */
      max-width: 80px;
      margin-bottom: 0;
  }

  .front-main-left .news-grid .thumb--news img {
      width: 100%;
      height: auto;
  }

  /* 右側のテキスト部分 */
  .front-main-left .news-grid .news-body {
      flex: 1 1 auto;
      min-width: 0;        /* タイトルのはみ出し防止 */
  }

  .front-main-left .news-grid .news-title {
      font-size: 0.9rem;
      line-height: 1.4;
      margin: 0 0 2px;
  }

  .front-main-left .news-grid .news-meta {
      font-size: 0.75rem;
      margin-bottom: 2px;
  }

  /* サイドCPTはそのまま1カラムでOK */
  .front-main-right .cpt-side-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
  }

  .front-main-right .cpt-side-item {
      grid-template-columns: 96px 1fr;
  }
}


/* =========================================
   FOOTER
========================================= */



.site-footer {
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

.site-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-brand {
    flex: 1 1 180px;
}

.footer-logo {
    max-height: 40px;
    width: auto;
}

.footer-site-name {
    font-weight: bold;
    font-size: 1rem;
}

.footer-nav-wrapper {
    flex: 2 1 280px;
}

.footer-nav {
    margin-bottom: 0.75rem;
}

.footer-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin: 0;
    padding: 0;
}

.footer-copy {
    font-size: 0.8rem;
    opacity: 0.8;
}

.footer-newsletter {
    flex: 1 1 220px;
    font-size: 0.85rem;
}

/* スマホ時は縦並び */
@media (max-width: 767px) {
    .site-footer-inner {
        flex-direction: column;
        align-items: stretch;
    }
}