/* ===============================
   HERO レイアウト（左右の枠を確定）
=============================== */

.hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}

/* 左右の枠の高さつぶれ防止 */
.hero-left,
.hero-right,
.hero-main {
  width: 100%;
  height: auto;
  min-height: 1px;
  overflow: hidden;
}

/* モバイルでは縦並び */
@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 左カラムのグリッドエリアいっぱいに広げる（念のため明示） */
.hero-left {
  align-self: stretch;
}

/* 左カラムの中身（article）を親の高さに合わせる */
.hero-main {
  height: 100%;
}

/* メイン画像コンテナを親の高さに合わせる */
.hero-main-image {
  height: 100%;
}

/* 画像をコンテナいっぱいに広げてトリミング */
.hero-main-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===============================
   HERO メーン（完全クリーン）
=============================== */


/* メーン画像コンテナ */
.hero-main-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: var(--jp-shadow-strong);
  background: transparent !important;
  line-height: normal;    /* ← これが重要（0を禁止） */
}

/* 旧オーバーレイ削除 */
.hero-main-image::before,
.hero-main-image::after {
  content: none !important;
}

/* ===============================
   HERO メイン：下部白パネル化
=============================== */

.hero-main-title-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.5rem 0.65rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  text-shadow: none;
  pointer-events: none;
}

/* セクション（日本 など） */
.hero-main-title-overlay .hero-section-text {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #555;
  margin-bottom: 0.35rem;
}


/* メインタイトル */
.hero-main-title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
}


/* 日付 */
.hero-main-meta-mini time {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #777;
}

/* ===============================
   HERO サブ記事（右側）
=============================== */

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 1枚ずつのカード */
.hero-side-item {
  position: relative;
}

/* サムネイルリンク */
.hero-side-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: var(--jp-shadow-soft);
  background: transparent;
}

/* サブ画像：高さ指定でメーンに影響しないように auto ベース */
.hero-side-thumb img {
  width: 100%;
  height: auto !important;
  object-fit: cover;
  max-height: 230px;
}

/* ===============================
   HERO サブ：下部白パネル
=============================== */

.hero-side-title-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.3rem 0.5rem 0.3rem;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  text-shadow: none;
}

/* サブ：セクション */
.hero-side-section-text {
  font-size: 0.60rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 0.2rem;
}

/* サブ：タイトル */
.hero-side-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}

/* サブ：日付 */
.hero-side-date {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.65rem;
  color: #777;
}

/* モバイル最適化（極小文字） */
@media (max-width: 768px) {

  /* メイン */
  .hero-main-title-overlay {
    padding: 0.4rem 0.5rem 0.4rem;
  }

  .hero-main-title {
  font-size: 1.0rem;
  line-height: 1.4;
}

.hero-main-meta-mini time {
  font-size: 0.65rem;
}

/* サブ */
.hero-side-title-overlay {
  padding: 0.2rem 0.3rem 0.2rem;
}

  .hero-side {
    gap: 14px;
  }

  .hero-side-title {
    font-size: 0.75rem;
  }

  .hero-side-date,
  .hero-side-section-text {
    font-size: 0.6rem;
  }

  .hero-side-thumb img {
    max-height: 180px;
  }
}

/* ===============================
   HERO メーン＆サブ：ホバーアニメーション
   ============================== */

/* 画像に滑らかなトランジションを付ける */
.hero-main-image img,
.hero-side-thumb img {
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

/* メーン＆サブ共通：光沢オーバーレイの準備 */
.hero-main-image::after,
.hero-side-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,0.35), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ホバー時：サイズはそのまま、画像だけ少し明るく＆ツヤっと */
.hero-main-image:hover img,
.hero-side-thumb:hover img {
  transform: scale(1.03);              /* 枠は動かず、中身だけほんの少しズーム */
  filter: brightness(1.06) contrast(1.02) saturate(1.03);
}

.hero-main-image:hover::after,
.hero-side-thumb:hover::after {
  opacity: 1;                           /* 上からやわらかい光が差すような感じ */
}




/* =========================================
   FRONT PAGE - NEWS ＋ SIDE (Basic)
   ======================================== */

   /* HERO との段差 */
   .front-main-grid {
     margin-top: 1.0rem;
   }

   /* ---------- PC：2カラム + ニュース3×2グリッド ---------- */
   @media (min-width: 1024px) {

     .front-main-grid {
       display: grid; /* flex をやめる */
       grid-template-columns: minmax(700px, 1fr) 300px; /* 左は縮めOK、右は固定 */
       align-items: start;
       gap: 32px;

       max-width: 1180px;   /* hero-grid と合わせるなら1180でOK */
       margin: 1.0rem auto 0;
       padding: 0 16px;     /* 画面端の余白 */
       box-sizing: border-box;
     }

     /* 左：ニュース */
     .front-main-left {
       max-width: none;
       min-width: 0px; /* ← これ重要。はみ出し予防 */
       width: auto;
       overflow-x: clip; /* hidden より副作用少なめ */
     }

     /* 右：基本情報＋広告エリア（300px固定） */
     .front-main-right {
       max-width: none;
       width: 300px;
       min-width: 300px;
       overflow-x: clip; /* hidden より副作用少なめ */
     }

     /* ニュース 3カラム × 2行 グリッド */
     .front-main-left .news-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(150px, 1fr));
       gap: 24px 24px;
       align-items: stretch;
       overflow-x: clip; /* hidden より副作用少なめ */
     }

     /* 縦型カード */
     .front-main-left .news-grid .news-item {
       margin: 0;
       display: flex;
       flex-direction: column;
       height: 100%;
       background: var(--jp-color-surface);
       border-radius: 14px;
       box-shadow: var(--jp-shadow-card);
       overflow: hidden;
       transition:
         transform 0.18s ease-out,
         box-shadow 0.18s ease-out,
         background-color 0.18s ease-out;
     }

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

     .front-main-left .news-grid .thumb--news {
       margin: 0;
       overflow: hidden;
       aspect-ratio: 16 / 9;
     }

     .front-main-left .news-grid .thumb--news img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transform: scale(1.02);
       transition: transform 0.25s ease-out, filter 0.25s ease-out;
     }

     .front-main-left .news-grid .news-body {
       padding: 0.85rem 0.95rem 1rem;
     }

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

     .front-main-left .news-grid .news-meta {
       font-size: 0.78rem;
       color: var(--jp-color-text-muted);
       margin-bottom: 0.2rem;
     }

     .front-main-left .news-grid .news-item:hover {
       transform: translateY(-2px);
       box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
       background-color: #f9fafb;
     }

     .front-main-left .news-grid .news-item:hover .thumb--news img {
       transform: scale(1.06);
       filter: brightness(1.04);
     }
   }

   /* ---------- タブレット〜モバイル：縦1列＋サムネ左 ---------- */
   @media (max-width: 1023px) {

     .front-main-grid {
       display: block;
       margin-top: 2.4rem;
     }

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

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

     /* 1件ずつ：サムネ左＋テキスト右 */
     .front-main-left .news-grid .news-item {
       background: #fff;
       border-radius: 10px;
       border: 1px solid var(--jp-color-border-subtle);
       margin-bottom: 10px;
       box-shadow: 0 4px 14px rgba(15,23,42,0.04);
       overflow: hidden;
     }

     .front-main-left .news-grid .news-link {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
       gap: 0.6rem;
       padding: 0.6rem 0.8rem;
     }

     /* 左サムネ：少し小さめ（キャプチャに近づける） */
     .front-main-left .news-grid .thumb--news {
       flex: 0 0 80px;
       max-width: 80px;
       margin: 0;
       border-radius: 8px;
       overflow: hidden;
     }

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

     /* 右テキスト部分 */
     .front-main-left .news-grid .news-body {
       flex: 1 1 auto;
       min-width: 0;
       padding: 0;
     }

     .front-main-left .news-grid .news-meta {
       font-size: 0.78rem;
       color: var(--jp-color-text-muted);
       margin: 0 0 0.1rem;
     }

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

     .front-main-left .news-grid .news-excerpt {
       font-size: 0.8rem;
       color: var(--jp-color-text-sub);
       margin: 0;
     }
   }

   /* =========================================
      FRONT PAGE - section 別タイル
      ======================================== */

   /* セクション全体をまとめるコンテナ（新着との間隔を少し詰める） */
   .front-sections-grid {
     margin-top: 1.4rem;
   }

   /* セクション別カードのラッパー（ラベル＋newsカード） */
   .front-sections-grid .front-section-card {
     position: relative;          /* ラベルをここに重ねる */
     display: flex;
     flex-direction: column;
     height: 100%;
   }

   /* ラベル（日本 / 世界 / インタビュー / コラム / 研究 など）を
      カードの左上にオーバーレイ表示する */
   .front-sections-grid .front-section-card-label {
     position: absolute;
     top: 0.6rem;
     left: 0.8rem;
     z-index: 2;
     padding: 0.12rem 0.55rem;
     border-radius: 999px;
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0.12em;
     color: #fff;
     background: rgba(15, 23, 42, 0.78);  /* 少し濃いグレーのピル */
     pointer-events: none;                /* クリックはカードに届くように */
   }

   /* カード本体をラッパーいっぱいに伸ばす */
   .front-sections-grid .news-item {
     height: 100%;
   }

   /* PC では 3 カラムでタイル状に配置 */
   @media (min-width: 1024px) {

     .front-sections-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 20px 24px;  /* 縦横の間隔を少しだけ */
       align-items: stretch;
     }
   }

   /* タブレット以下：既存の news リストレイアウトを利用しつつ、
      1件ごとに少しだけ下マージンを付ける */
   @media (max-width: 1023px) {

     .front-sections-grid {
       display: block;
     }

     .front-sections-grid .front-section-card {
       margin-bottom: 0.2rem;
     }
   }


   /* =========================================
      右カラム PR（Information / PR）控えめトーン
      ※レイアウトのブレイクポイントは 1024px に統一
   ========================================= */

   /* ベース：PC 用（右カラム 300px の中でフル幅） */
   .front-main-right .widget.promo-widget {
     box-sizing: border-box;
     border-radius: 10px;
     box-shadow: 0 4px 14px rgba(15,23,42,0.04);
     border: 1px solid var(--jp-color-border-subtle);
     padding: 0.9rem 1rem;
     margin-bottom: 1.2rem;
     background: #fff;
   }

   .front-main-right .promo-widget-title {
     font-size: 0.85rem;
     font-weight: 500;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     margin: 0 0 0.55rem;
     color: var(--jp-color-text-sub);
   }

   /* PR 本体：共通で横並び（PC も SP も） */
   .front-main-right .promo-card {
     display: flex;
     align-items: flex-start;
     gap: 0.7rem;
     text-decoration: none;
     color: inherit;
     width: 100%;
   }

   .front-main-right .promo-thumb {
     flex: 0 0 110px;   /* PC 基本幅 */
     max-width: 110px;
     border-radius: 10px;
     overflow: hidden;
   }

   .front-main-right .promo-thumb img {
     width: 100%;
     height: auto;
     aspect-ratio: 4 / 3;
     object-fit: cover;
   }

   .front-main-right .promo-meta {
     flex: 1 1 auto;
     min-width: 0;
   }

   .front-main-right .promo-title {
     font-size: 0.88rem;
     font-weight: 600;
     line-height: 1.45;
     margin: 0 0 0.2rem;
   }

   .front-main-right .promo-excerpt {
     font-size: 0.78rem;
     line-height: 1.6;
     color: var(--jp-color-text-sub);
     margin: 0 0 0.3rem;
   }

   .front-main-right .promo-btn {
     padding: 0.3rem 0.9rem;
     font-size: 0.76rem;
     box-shadow: none;
     background-color: #ffffff;
     color: var(--jp-color-primary);
     border-color: rgba(148,163,184,0.7);
   }

   .front-main-right .promo-btn:hover {
     background-color: var(--jp-color-primary-soft);
     box-shadow: none;
     transform: translateY(0);
   }

   /* =========================================
      〜1023px：1カラム時の PR レイアウト
      （news と同じカラムの中で、幅は画面の約 8 割）
   ========================================= */
   @media (max-width: 1023px) {

     /* NEWS → PR の区切りと余白 */
     .front-main-right {
       position: relative;
       margin-top: 3rem;      /* NEWS からの距離 */
       padding-top: 1.8rem;   /* 仕切りライン＋ピル分 */
     }

     .front-main-right::before {
       content: "";
       position: absolute;
       left: 50%;
       top: 0.4rem;
       transform: translateX(-50%);
       width: 100%;
       max-width: 640px;
       height: 1px;
       background: linear-gradient(
         90deg,
         transparent,
         rgba(148,163,184,0.9),
         transparent
       );
       border-radius: 999px;
     }

     .front-main-right::after {
       content: "INFORMATION";
       position: absolute;
       left: 50%;
       top: -0.55rem;
       transform: translateX(-50%);
       padding: 0.1rem 0.55rem;
       font-size: 0.68rem;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       color: var(--jp-color-text-muted);
       background-color: var(--jp-color-surface);
       border-radius: 999px;
       border: 1px solid rgba(148,163,184,0.45);
     }

     /* PR ウィジェット全体を 8 割幅 + 中央寄せ */
     .front-main-right .widget.promo-widget {
       width: clamp(260px, 90vw, 480px);
       margin: 0 auto 1.6rem;
       padding: 0;                     /* 内側余白はカード側で調整 */
     }

     .front-main-right .promo-card {
       padding: 0.8rem 0.95rem;
       border-radius: 0.7rem;
       box-shadow: 0 4px 14px rgba(15,23,42,0.05);
       box-sizing: border-box;
     }

     .front-main-right .promo-thumb {
       flex-basis: 80px;
       max-width: 80px;
     }

     .front-main-right .promo-meta {
       padding: 0;
     }

     .front-main-right .promo-title {
       font-size: 0.9rem;
       margin-bottom: 0.18rem;
     }
   }

   /* =========================================
      〜480px：極端に狭いスマホでの微調整
   ========================================= */
   @media (max-width: 480px) {
     .front-main-right .promo-thumb {
       flex-basis: 72px;
       max-width: 72px;
     }

     .front-main-right .promo-card {
       padding: 0.6rem 0.85rem;
     }
   }


   /* =========================================
      FRONT: 新着ニュース「もっと見る」専用
      (.front-block-footer--latest / .front-more-link--latest のみ)
   ========================================= */

   .front-block-footer--latest {
     margin-top: 1.6rem;
     text-align: right;
   }

   .front-block-footer--latest .front-more-link--latest {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     padding: 0.35rem 0.9rem;
     border-radius: 999px;
     border: 1px solid rgba(148,163,184,0.6);
     font-size: 0.86rem;
     text-decoration: none;
     color: var(--jp-color-primary, #2563eb);
     background: radial-gradient(circle at top left, rgba(239,246,255,0.9), #ffffff);
     box-shadow: 0 4px 12px rgba(15,23,42,0.08);
   }

   .front-block-footer--latest .front-more-link--latest:hover {
     background: #eff6ff;
     border-color: var(--jp-color-primary, #2563eb);
     box-shadow: 0 6px 16px rgba(15,23,42,0.12);
   }

   .front-block-footer--latest .front-more-link-label {
     letter-spacing: 0.04em;
   }

   .front-block-footer--latest .front-more-link-icon {
     font-size: 1rem;
     transform: translateY(1px);
   }



   /* =========================================
      FRONT: セクション別ニュースの「もっと見る」専用
   ========================================= */

   .front-block-footer--sections {
     margin-top: 1.8rem;
     padding-top: 1rem;
     border-top: 1px solid rgba(148,163,184,0.35);
     text-align: center;
     font-size: 0.86rem;
     color: var(--jp-color-text-sub, #64748b);
     line-height: 1.9;
     white-space: normal;      /* ← nowrap をやめる */
     overflow-wrap: anywhere;
     word-break: break-word;
   }

   .front-block-footer--sections a {
     overflow-wrap: anywhere;
     word-break: break-word;
   }

   /* 「日本をもっと見る」など：ベース */
   .front-block-footer--sections .front-more-link--section {
     display: inline-block;          /* 横並びの単位にする */
     padding: 0.15rem 0.1rem;
     text-decoration: none;
     color: var(--jp-color-primary, #2563eb);
   }

   /* hover */
   .front-block-footer--sections .front-more-link--section:hover {
     text-decoration: underline;
     color: var(--jp-color-primary-strong, #1d4ed8);
   }


   /* スマホ（〜767px）：折り返しOKで読みやすく */
   @media (max-width: 767px) {
     .front-block-footer--sections {
       font-size: 0.8rem;
       padding-top: 0.8rem;
       margin-top: 1.4rem;
       line-height: 1.9;
       white-space: normal;          /* 念のため明示しておく */
     }

     .front-block-footer--sections .front-more-link--section {
       padding: 0.1rem 0.05rem;
     }
   }