/*===============================
news
================================*/
#news {
}
@media screen and (min-width: 768px) {
}
.news-archive-section {
 background: #fff;
 padding: 80px 0;
}

.news-archive-section .news-archive-title {
 text-align: center;
 font-size: 2.2rem;
 font-family: "Noto Serif JP", serif;
 margin-bottom: 50px;
}

.news-archive-section .news-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* モバイル用 */
 gap: 40px;
}

@media screen and (min-width: 768px) {
 .news-archive-section .news-grid {
  grid-template-columns: repeat(3, 1fr); /* ✅ PCでは常に3列固定 */
 }
}
.news-archive-section .news-card {
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 overflow: hidden;
 transition: all 0.3s ease;
 display: flex;
 flex-direction: column;
}

.news-archive-section .news-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* ✅ 正しい画像設定 */
.news-archive-section .news-image img {
 display: block;
 width: 100%;
 height: auto;
 object-fit: cover;
}

/* ✅ テキスト部分 */
.news-archive-section .news-text {
 padding: 20px;
}

.news-archive-section .news-date {
 font-size: 0.85rem;
 color: #eb9400;
 margin-bottom: 6px;
}

.news-archive-section .news-title {
 font-size: 1.1rem;
 font-weight: bold;
 margin-bottom: 10px;
 color: #111;
 line-height: 1.5;
}

.news-archive-section .news-excerpt {
 font-size: 0.9rem;
 color: #555;
 line-height: 1.6;
}

/* ✅ ページネーション */
.news-archive-section .pagination {
 margin-top: 60px;
 text-align: center;
}

.news-archive-section .pagination .page-numbers {
 display: inline-block;
 margin: 0 5px;
 padding: 8px 12px;
 background: #eee;
 color: #333;
 font-size: 0.9rem;
 border-radius: 4px;
 text-decoration: none;
}

.news-archive-section .pagination .current {
 background: #000;
 color: #fff;
}

.news-archive-section .pagination .page-numbers:hover {
 background: #ccc;
}

/* ✅ モバイル対応 */
@media screen and (max-width: 768px) {
 .news-archive-section .news-title {
  font-size: 1rem;
 }
 .news-archive-section .news-excerpt {
  font-size: 0.85rem;
 }
}
.news-archive-section .back-to-home {
 margin-top: 60px;
 text-align: center;
}

.news-archive-section .btn-black {
 display: inline-block;
 padding: 12px 30px;
 background: #000;
 color: #fff;
 font-weight: bold;
 border-radius: 4px;
 text-decoration: none;
 transition: all 0.3s ease;
}

.news-archive-section .btn-black:hover {
 background: #222;
}

.single-news-section {
 background: #fff;
 padding: 80px 0;
}

.single-news-section .news-header {
 margin-bottom: 30px;
}

.single-news-section .news-date {
 font-size: 0.9rem;
 color: #eb9400;
 margin-bottom: 8px;
}

.single-news-section .news-title {
 font-size: 1.8rem;
 font-weight: bold;
 line-height: 1.5;
 font-family: "Noto Serif JP", serif;
 color: #111;
}

.single-news-section .news-eyecatch {
 margin-bottom: 40px;
}

.single-news-section .news-eyecatch img {
 width: 100%;
 height: auto;
 display: block;
 border-radius: 8px;
 object-fit: cover;
}

/* 本文 */
.single-news-section .news-content {
 font-size: 1rem;
 color: #333;
 line-height: 1.8;
}

.single-news-section .news-content p {
 margin-bottom: 1.6em;
}

.single-news-section .news-backlink {
 margin-top: 60px;
 text-align: center;
}

.single-news-section .btn-black {
 display: inline-block;
 padding: 12px 30px;
 background: #000;
 color: #fff;
 font-weight: bold;
 border-radius: 4px;
 text-decoration: none;
 transition: all 0.3s ease;
}

.single-news-section .btn-black:hover {
 background: #222;
}
/* ▼ 埋め込みYouTubeなどの動画をレスポンシブ対応 */
.single-news-section .news-content iframe {
 display: block;
 max-width: 100%;
 width: 100% !important;
 height: auto;
 aspect-ratio: 16 / 9;
 margin: 0 auto 2em;
 border: none;
}
.menu-button {
 text-align: center;
 margin-top: 40px;
}
.menu-button02 {
 text-align: center;
 margin-top: 0px;
}

/* 黒ボタン（スタイリッシュ版） */
.btn-black {
 text-align: center;
 min-width: 300px;
 display: inline-block;
 padding: 14px 40px;
 background-color: #000;
 color: #fff;
 font-size: 1rem;
 font-weight: bold;
 border-radius: 4px;
 transition: all 0.3s ease;
 text-decoration: none;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* ← 影追加 */
 position: relative;
 overflow: hidden;
}

.btn-black::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: rgba(255, 255, 255, 0.1); /* ← ホバー時の光 */
 transition: all 0.4s ease;
}

.btn-black:hover::before {
 left: 100%;
}

.btn-black:hover {
 background-color: #111;
 box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); /* ← ホバー時さらに深く */
}