/* ===============================
   NPO法人 実生ゆずアップサイクル研究所
   統合スタイルシート
   2025-10-04 保存版 + archive-list + archive-cards修正版 + single拡張
   =============================== */
body {
  padding-top: 90px; /* PCヘッダーの高さ */
}

@media (max-width: 767px) {
  body {
    padding-top: 64px; /* スマホヘッダーの高さ */
  }
}


/* --- 固定ナビ全体 --- */
.site-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
}
.site-logo img { height: 40px; }
@media (min-width: 992px) {
  .site-logo { display: flex; align-items: flex-end; }
  .site-logo img { height: 60px; margin-bottom: 2px; }
}
.site-header .nav-container {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* --- PC用右側ナビ --- */
.nav-right { display: flex; flex-direction: column; align-items: flex-end; }
.top-links { margin: 0.6rem 0; }
.btn-custom {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; margin-left: 0.6rem; color: #fff;
  padding: 0.3rem 0.8rem; border-radius: 4px; text-decoration: none;
  font-weight: 600; transition: all 0.3s ease; border: 1px solid transparent;
}
.btn-custom i { margin-right: 0.3rem; }
.btn-donate { background-color: #00CC99; border-color: #00CC99; }
.btn-donate:hover { background: #fff; color: #00CC99; border: 1px solid #00CC99; }
.btn-contact { background-color: #666; border-color: #666; }
.btn-contact:hover { background: #fff; color: #666; border: 1px solid #666; }
.bottom-links a {
  margin-left: 1.2rem; color: #333; text-decoration: none;
  font-weight: 500; font-size: 1rem; position: relative; padding-bottom: 2px;
}
.bottom-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0%; height: 1px; background: #007b5e; transition: width 0.3s ease;
}
.bottom-links a:hover::after { width: 100%; }

/* --- スマホ用 --- */
@media (max-width: 991px) {
  .nav-right { display: none; }
  .navbar-toggler { border: none; font-size: 2rem; background: none; padding: 0.3rem 0.6rem; }
  .mobile-menu { background: #fff; border-top: 1px solid #ddd; padding: 1.5rem; }
  .mobile-menu a { display: block; margin: 0.8rem 0; font-size: 1.1rem; color: #333; text-decoration: none; font-weight: 500; }
  .mobile-menu a:hover { color: #007b5e; }
}

/* --- パンくずリスト --- */
.breadcrumb-area {
  padding: 0.8rem 0;
  margin-top: 90px;
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .breadcrumb-area { margin-top: 65px; }
}
.breadcrumb { background: none; margin: 0; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "›"; padding: 0 0.5rem; color: #999;
}
.breadcrumb a { color: #007b5e; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* --- ページタイトルエリア --- */
.page-title-area {
  position: relative;
  background: url('../img/hero.jpg') no-repeat center center/cover;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}
.page-title-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.page-title-area h1 {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 768px) {
  .page-title-area { padding: 4rem 1rem; }
  .page-title-area h1 { font-size: 2.0rem; }
}

/* --- ヒーローセクション（TOPページ用） --- */
.hero {
  position: relative;
  height: 90vh;
  background: url('../img/hero.jpg') no-repeat center center/cover;
  display: flex; justify-content: center; align-items: center;
  text-align: center; color: #fff;
}
@media (min-width: 768px) {
  .hero { height: 80vh; }
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.hero-content { position: relative; z-index: 1; max-width: 90%; }
.hero-content h1 {
  font-size: 1.6rem; font-weight: 700; line-height: 1.4;
}
@media (min-width: 768px) {
  .hero-content h1 { font-size: 2.2rem; }
}

/* --- セクションタイトル（共通） --- */
.section-title {
  font-size: 1.4rem; font-weight: 600;
  margin-bottom: 1.5rem; color: #333;
  text-align: center; width: 100%;
  border: none;
}


p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.2rem; }
strong { font-weight: 700; }
em { font-style: italic; }
mark { background: #fffa9c; padding: 0 0.2rem; }
small { font-size: 0.85rem; color: #666; }
h2 {
  font-size: 1.5rem; font-weight: 700;
  border-bottom: 2px solid #00CC99;
  display: inline-block; padding-bottom: 0.2rem;
  margin: 1.5rem 0 1.2rem; color: #333;
}
h3 {
  font-size: 1.3rem; font-weight: 600;
  border-left: 6px solid #00CC99;
  padding-left: 0.6rem;
  margin: 1.5rem 0 1rem; color: #333;
}
h4 {
  font-size: 1.1rem; font-weight: 600;
  color: #007b5e; margin-bottom: 1rem;
}
h5 {
  font-size: 0.95rem; font-weight: 600;
  text-transform: uppercase; color: #666;
  letter-spacing: 0.05em; margin: 0.8rem 0 0.6rem;
}
blockquote {
  border-left: 4px solid #ccc;
  padding: 0.8rem 1rem; margin: 1.5rem 0;
  font-style: italic; color: #555;
}
ul { margin: 1rem 0 1rem 1.5rem; }
ul li::marker { color: #00CC99; font-weight: bold; }
ol { margin: 1rem 0 1rem 1.5rem; }
ol li { margin-bottom: 0.4rem; }
dl { margin: 1rem 0; }
dt { font-weight: 600; margin-top: 0.5rem; }
dd { margin-left: 1rem; margin-bottom: 0.5rem; }
table {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0; font-size: 0.95rem; background: #fff;
}
th, td { border: 1px solid #ddd; padding: 0.75rem; line-height: 1.6; }
th { background: #f5f5f5; font-weight: 600; color: #333; }
label { font-weight: 600; margin-bottom: 0.4rem; display: block; }
input, textarea, select {
  width: 100%; padding: 0.6rem 0.8rem;
  border: 1px solid #ccc; border-radius: 6px;
  font-size: 1rem; color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus, textarea:focus, select:focus {
  border-color: #00CC99; box-shadow: 0 0 0 2px rgba(0,204,153,0.2);
  outline: none;
}
button {
  background: #00CC99; color: #fff;
  border: none; border-radius: 6px;
  padding: 0.7rem 1.5rem; font-size: 1rem; font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}
button:hover { background: #009977; transform: translateY(-2px); }

/* --- 賛助会員募集 --- */
.supporters {
  position: relative; padding: 5rem 1rem;
  background: url('../img/support-bg.jpg') no-repeat center center/cover;
  color: #fff;
}
.supporters::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
}
.supporters .container { position: relative; z-index: 1; }
.support-text { font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem; }
.support-buttons .btn-donate {
  font-size: 1rem; padding: 0.6rem 1.5rem; border-radius: 5px;
}

/* --- フッター --- */
.site-footer { background: #333; color: #fff; padding: 3rem 1rem 2rem; margin-top: 3rem; }
.footer-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.8rem; color: #fff; }
.footer-info { font-size: 0.9rem; line-height: 1.6; color: #ccc; margin-bottom: 0.5rem; }
.footer-info i { margin-right: 0.5rem; color: #fff; }
.footer-info a { color: #ccc; text-decoration: none; }
.footer-info a:hover { color: #fff; }
.footer-menu { gap: 1rem; }
.footer-menu li { margin-right: 1rem; }
.footer-menu li a { color: #ccc; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; }
.footer-menu li a:hover { color: #fff; }
.footer-buttons {
  display: flex; flex-direction: column; gap: 0.8rem; align-items: center;
  width: 100%;
}
@media (min-width: 992px) {
  .footer-buttons { align-items: center; }
}
.btn-footer {
  display: flex; justify-content: center; align-items: center;
  padding: 0.6rem 1.4rem; font-size: 0.9rem;
  border: 1px solid #fff; color: #fff; border-radius: 25px;
  text-decoration: none; min-width: 180px; transition: all 0.3s ease;
  background: transparent; text-align: center;
}
.btn-footer:hover { background: #fff; color: #333; }
.footer-bottom { border-top: 1px solid #555; padding-top: 1rem; font-size: 0.8rem; color: #aaa; text-align: center; }

/* --- PC時のcontainer幅を狭める --- */
@media (min-width: 1200px) {
  .container:not(.container-fluid) { max-width: 1040px; }
}

/* --- 背景ユーティリティ --- */
.bg-white { background: #fff; }
.bg-light-gray { background: #f9f9f9; }
.bg-mid-gray { background: #f2f2f2; }
.bg-theme-light { background: #eaf8f4; }
.bg-beige { background: #faf6f1; }
.bg-light-blue { background: #f3f9fc; }

/* --- アーカイブページ（リスト型アーカイブ） --- */
.archive-list { 
  padding: 4rem 0; 
  background: #f9f9f9; 
}
.news-list { 
  margin: 0; 
  padding: 0; 
  list-style: none;
}
.news-item {
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  color: #666;
}
.news-date { color: #666; }
.news-tag {
  background: #00CC99;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}
.news-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.3rem;
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}
.news-title:hover { color: #009977; }

/* PC表示時: 横並び + 左右余白 */
@media (min-width: 768px) {
  .news-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }
  .news-meta { 
    flex-shrink: 0; 
    width: 220px; 
  }
  .news-list {
    margin-left: 6.5rem;
    margin-right: 6.5rem;
  }
  .news-title { margin-top: 0; }
}

/* スマホ表示時 */
@media (max-width: 767px) {
  .news-item {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --- ページネーション中央寄せ --- */
.pagination {
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.pagination .page-link {
  color: #00CC99;
  border: 1px solid #ddd;
}
.pagination .page-link:hover {
  background-color: #eaf8f4;
  color: #009977;
  border-color: #00CC99;
}
.pagination .page-item.active .page-link {
  background-color: #00CC99;
  border-color: #00CC99;
  color: #fff;
}

/* --- アーカイブページ（カード型アーカイブ） --- */
.archive-cards {
  padding: 2rem 0;
  background: #fff;
}
.archive-cards .card {
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
}
.archive-cards .card-img-top {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: opacity 0.4s ease;
}
.archive-cards .card:hover .card-img-top {
  opacity: 0.85;
}
.archive-cards .card-body {
  padding: 1rem;
}
.archive-cards .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
}
.archive-cards .card small {
  display: block;
  color: #666;
  margin-bottom: 0.5rem;
}

/* ===============================
   singleページ拡張
   =============================== */
.meta-info {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  margin-top: 0rem;
  margin-bottom: 1.5rem;
  color: #666;
}
.meta-info .date {
  color: #666;
  white-space: nowrap;
}
.meta-info .tag {
  background: #00CC99;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-weight: 500;
  white-space: nowrap;
}
.single-content p {
  margin-bottom: 1.4rem;
  line-height: 1.9;
}
.related-posts {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}
.related-posts h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.related-posts .card-title {
  font-size: 1rem;
  font-weight: 600;
}
.post-navigation {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.post-navigation a {
  color: #00CC99;
  text-decoration: none;
  font-weight: 600;
}
.post-navigation a:hover {
  color: #009977;
  text-decoration: underline;
}
/* =========================================
   TOP専用スタイル（不足分の復元）
   追記のみ：既存定義は変更しません
   ========================================= */

/* --- ヒーローのスクロール案内 --- */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  animation: fadeIn 1.2s ease-in-out;
}
.scroll-down span { display: block; margin-bottom: 6px; }
.scroll-down i {
  display: inline-block;
  font-size: 1.6rem;
  animation: scroll-bounce 1.5s infinite;
  will-change: transform;
}
@keyframes scroll-bounce {
  0%,20%,50%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- ピックアップ（TOP） --- */
.pickup {
  background: #f9f9f9;
  padding: 4rem 0;
  text-align: center;
}
.pickup .card-title {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  margin: 0.5rem 0 0;
}
.card-text {
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.8rem;
  text-align: left;
}

/* TOP全般のカード画像を「薄く」するホバー（持ち上げアニメは付けません） */
.card-img-top { transition: opacity 0.4s ease; }
.card:hover .card-img-top { opacity: 0.85; }

/* --- 法人説明（TOP） --- */
.about {
  padding: 4rem 0;
  background: #fff;
}
.about .lead {
  font-size: 1.2rem;
  font-weight: 500;
  color: #007b5e;
}
@media (max-width: 767px) {
  .about .col-md-6 + .col-md-6 { margin-top: 1.5rem; }
}

/* --- 活動内容（TOP） --- */
.activities {
  padding: 4rem 0;
  background: #f9f9f9;
}
.activity-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  transition: opacity 0.3s ease;
}
.card:hover .activity-icon { opacity: 0.7; }
.icon-upcycle    { color: #339966; }
.icon-research   { color: #3399FF; }
.icon-cultivation{ color: #FF9933; }
.icon-culture    { color: #CC6666; }
.icon-wellness   { color: #FF99AA; }
.activities .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #333;
}

/* --- 活動報告（TOPセクション） --- */
.reports {
  padding: 4rem 0;
  background: #fff;
}
.reports .card {
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  overflow: hidden;
}
.reports .card-img-top {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: opacity 0.4s ease;
}
.reports .card:hover .card-img-top { opacity: 0.85; }
.reports .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
}
/* =========================
   Read More リンク（復元）
   ========================= */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;                 /* 文字と矢印の間隔 */
  font-size: 0.9rem;
  font-weight: 600;
  color: #00CC99;           /* ブランドカラー */
  text-decoration: none;
  margin-top: 0.8rem;
  transition: color 0.3s ease;
}
.read-more i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.read-more:hover {
  color: #009977;           /* 濃いトーンへ */
}
.read-more:hover i {
  transform: translateX(3px);
}

/* カードやアーカイブ内でも色が負けないように補強 */
.card .read-more,
.archive-list .read-more,
.archive-cards .read-more {
  color: #00CC99;
}
.card .read-more:hover,
.archive-list .read-more:hover,
.archive-cards .read-more:hover {
  color: #009977;
}

/* アクセシビリティ（キーボード操作時の可視フォーカス） */
a.read-more:focus-visible {
  outline: 2px solid #00CC99;
  outline-offset: 2px;
  border-radius: 3px;
}
/* --- お知らせセクション --- */
.news {
  padding: 4rem 0;         /* 上下の余白 */
  background: #f9f9f9;     /* 背景色（薄いグレー） */
}
/* --- トップに戻るボタン --- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
  line-height: 1;
  text-decoration: none;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, bottom 0.3s ease;
}
.back-to-top i {
  font-size: 1rem;
  margin-bottom: 1px;
}
.back-to-top span { font-size: 0.65rem; }
.back-to-top:hover { background: #00CC99; color: #fff; }
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* 管理バー表示時の余白をリセット */
html {
  margin-top: 0 !important;
}

/* 本文中ショートコードのフル幅対応 */
.fullwidth-supporters {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.breadcrumb i.bi-house-door {
  font-size: 1.0rem; /* 大きさ調整 */
}

/* パンくずエリアの上下余白を抑える */
.breadcrumb-area {
  margin-top: 0;       /* 上の余白をゼロに */
  margin-bottom: 0px; /* 下の余白は少し残す */
  padding: 5px 0;      /* 内側の余白は薄めに */
}

/* ページタイトルと本文の距離も調整 */
.page-title-area {
  margin-bottom: 10px;  /* 本文との距離を狭める */
  padding: 40px 0;      /* タイトルエリアの高さはそのまま */
}

/* 活動報告のカード画像を揃える */
.card-img-top {
  width: 100%;        /* 横幅いっぱいに */
  height: 200px;      /* 高さを固定（お好みで調整） */
  object-fit: cover;  /* 画像を中央からトリミング表示 */
  object-position: center;

}

/* ピックアップのカード画像を揃える */
.pickup .card-img-top {
  width: 100%;
  height: 200px;       /* 活動報告と同じ高さに揃える */
  object-fit: cover;   /* 画像の縦横比を保ちつつ中央でトリミング */
  border-radius: 0.25rem; /* Bootstrap標準の角丸を維持 */
}

/* ピックアップカード全体リンク */
.pickup-card-link {
  text-decoration: none;  /* 下線を消す */
  color: inherit;         /* 文字色を継承 */
  display: block;
}

/* ホバー時にタイトル文字を薄く */
.pickup-card-link:hover .card-title {
  color: #999;  /* 薄いグレー */
}

/* カードタイトル調整 */
.pickup .card-title {
  text-align: left;   /* 左寄せ */
  border-left: none;  /* 左の帯を削除 */
  margin-top: 10px;
}

/* 活動報告カード全体リンク */
.report-card-link {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 文字色継承 */
  display: block;
}

/* カード全体のホバー効果削除 */
.reports .card {
  transition: none;
}

/* カードタイトル通常時 */
.reports .card-title {
  color: #333;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* ホバー時に文字を薄く */
.report-card-link:hover .card-title {
  color: #999;
}

/* --- ハンバーガー：色が変わらないよう完全リセット --- */
.navbar-toggler{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: .3rem .6rem;
  appearance: none;            /* すべてのUA既定を無効化 */
  -webkit-appearance: none;    /* iOS Safari/Chrome共通 */
  -moz-appearance: none;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible,
.navbar-toggler[aria-expanded="true"]{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* アイコンの色は常に一定に */
#menuIcon{ color:#333; }
.navbar-toggler:focus #menuIcon,
.navbar-toggler[aria-expanded="true"] #menuIcon{ color:#333; }

/* iOS のタップハイライトも消す */
@supports (-webkit-touch-callout: none){
  .navbar-toggler{ -webkit-tap-highlight-color: transparent; }
}

.reports .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 活動報告セクション - カードを揃える */
.reports .row {
  display: flex;
  flex-wrap: wrap;
}

.reports .col-md-3,
.reports .col-sm-6 {
  display: flex;
}

.reports .card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* サムネイルを固定比率に */
.reports .card-img-top {
  aspect-ratio: 4 / 3; /* 横4:縦3で統一 */
  object-fit: cover;
  width: 100%;
}

/* card-body を均等に伸ばす */
.reports .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上揃え */
}

/* ===== WP標準ページネーション用（Bootstrap互換の見た目） ===== */
.navigation.pagination {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.navigation.pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.navigation.pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  line-height: 1;
  text-decoration: none;
  color: #00CC99;                 /* 通常時 */
  background: #fff;
  transition: background .2s, color .2s, border-color .2s;
}
.navigation.pagination a.page-numbers:hover {
  background: #eaf8f4;            /* ホバー */
  color: #009977;
  border-color: #00CC99;
}
.navigation.pagination .page-numbers.current {
  background: #00CC99;            /* 現在ページ */
  color: #fff;
  border-color: #00CC99;
}
.navigation.pagination .page-numbers.dots {
  border: none;
  padding: 0.5rem 0.25rem;
  color: #666;
  background: transparent;
}

/* アーカイブカードの左右余白をBootstrap標準に戻す */
.archive-cards {
  padding-left: 15px;
  padding-right: 15px;
}

/* 固定/投稿ページの本文枠だけに適用 */
body.page main.container,
body.single main.container {
  background: #fff; /* 背景白 */
}

/* PCだけ横幅を狭めて読みやすく、内側余白も追加 */
@media (min-width: 992px) {
  body.page main.container,
  body.single main.container {
    max-width: 800px;    /* 読みやすい幅 */
    margin: 0 auto;      /* 中央寄せ */
    padding: 0 2rem 2rem;/* 内側余白 */
  }
}

/* 読みやすい長文向けスタイル */
.readable-text {
  max-width: 720px;       /* 横幅を制限 */
  margin: 0 auto;         /* 中央寄せ */
  font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", 
               "Hiragino Mincho Pro", "MS PMincho", serif;
  line-height: 2.0;       /* 行間を広めに */
  font-size: 1rem;        /* 通常サイズ */
  padding: 0 2rem;        /* 左右余白を追加 */
}

.readable-text p {
  margin-bottom: 1.6rem;  /* 段落間を広めに */
}

.readable-text h2,
.readable-text h3 {
  margin-top: 2rem;       /* 見出し前にゆとり */
}

/* （必要なら）スマホ時の左右余白だけ軽く付ける */
@media (max-width: 991.98px) {
  body.page main.container,
  body.single main.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 固定ページ・投稿ページの画像をレスポンシブ対応 */
.page main img,
.single main img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* プログラム一覧カード部分だけ本文幅制限を解除 */
.program-cards {
  max-width: 1040px;   /* 通常の .container と同じ幅にする */
  margin: 0 auto;      /* 中央寄せ */
  padding-left: 15px;
  padding-right: 15px;
}

/* プログラム一覧カードのタイトル調整 */
.program-cards .card-body {
  padding: 0.5rem;       /* 余白を少なめに */
  display: flex;
  align-items: center;   /* 縦中央揃え */
  justify-content: center;
  text-align: center;    /* 中央揃え */
}

.program-cards .card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;             /* 上下余白を消す */
  line-height: 1.4;      /* 行間を少し詰める */
}

.program-cards .card-body {
  min-height: 50px;   /* タイトル欄を統一の高さに */
}
/* 固定/投稿ページ限定にしたい場合は先頭に body.page, body.single を付けてください */
.caption-tight { line-height: 0; }          /* 画像行の隙間を消す */
.caption-tight img { display: block; margin: 0 auto; }
.caption-tight figcaption {
  margin-top: 3px;                          /* 0～2pxで調整 */
  margin-bottom: 0;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.35;
  padding: 0;
    color: #777;
}
/* figure 内キャプションのリンク装飾リセット */
figure figcaption a {
  color: inherit;          /* 親の文字色を引き継ぐ */
  text-decoration: none;   /* 下線を消す */
}

/* ホバー時も同じ（必要なら軽い変化を付ける） */
figure figcaption a:hover {
  color: #333;             /* 少し濃くするなど調整可 */
  text-decoration: none;
}

/* スマホ表示（幅767px以下）のとき、画像下に余白を追加 */
@media (max-width: 767px) {
  .row .col-md-4 img {
    margin-bottom: 1rem;  /* 好みで 0.8rem～1.5rem くらいに調整 */
  }
}

/* ===============================
   Contact Form 7 - 最新CSS（必須はバッジのみ表示）
   ※ 旧 :has() ルールや * 表示は使用しません
   =============================== */

/* コンテナ */
.wpcf7 form {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}

/* 行間・要素の余白 */
.wpcf7 form p { margin: 0 0 1rem; }

/* ラベル */
.wpcf7 form label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: .4rem;
}

/* ラベルの見出し行（「氏名 必須」など） */
.wpcf7 label.field .label-title {
  display: inline-flex;
  align-items: center;
  gap: .4rem; /* 文言とバッジの間隔 */
}

/* 必須バッジ（HTML側に <span class="required-badge">必須</span> を記述） */
.wpcf7 .required-badge {
  display: inline-block;
  color: #d93025;
  font-size: .8rem;
  font-weight: 600;
  background: #fff0f0;
  border: 1px solid #d93025;
  border-radius: 4px;
  padding: 0 6px;
  line-height: 1.2;
  vertical-align: middle;
}

/* （任意で使う場合）任意バッジ */
.wpcf7 .optional-badge {
  display: inline-block;
  color: #666;
  font-size: .8rem;
  font-weight: 600;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 0 6px;
  line-height: 1.2;
  vertical-align: middle;
}

/* 入力系 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* フォーカス */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #00CC99;
  box-shadow: 0 0 0 3px rgba(0,204,153,.18);
  outline: none;
}

/* placeholder */
.wpcf7 ::placeholder { color: #9aa0a6; }

/* テキストエリア */
.wpcf7 textarea { min-height: 160px; resize: vertical; }

/* バリデーション（エラー） */
.wpcf7 .wpcf7-not-valid {
  border-color: #d93025 !important;
  background: #fff7f7;
}
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: .35rem;
  font-size: .9rem;
  line-height: 1.4;
  color: #d93025;
}

/* 送信ボタン */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #00CC99;
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: #00b389;
  box-shadow: 0 6px 14px rgba(0,204,153,.25);
  transform: translateY(-1px);
}
.wpcf7 input[type="submit"]:active,
.wpcf7 .wpcf7-submit:active {
  transform: translateY(0);
}

/* スピナー */
.wpcf7 .wpcf7-spinner { margin-left: .6rem; }

/* 送信後メッセージ */
.wpcf7 .wpcf7-response-output {
  margin: 1rem 0 0;
  border-radius: 8px;
  padding: .75rem .9rem;
  font-size: .95rem;
}
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
  border: 1px solid #00CC99;
  background: #eaf8f4;
  color: #0f5132;
}
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-acceptance-missing {
  border: 1px solid #d93025;
  background: #fff7f7;
  color: #7a1a16;
}

/* 2カラム（PC） */
@media (min-width: 992px) {
  .wpcf7 form.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }
  .wpcf7 form.form-grid .full {
    grid-column: 1 / -1;
  }
}

/* スマホ：ボタン幅いっぱい */
@media (max-width: 991.98px) {
  .wpcf7 input[type="submit"],
  .wpcf7 .wpcf7-submit { width: 100%; }
}

/* --- 重要：CF7の自動アスタリスク(*)を完全に非表示 --- */
.wpcf7-asterisk,
.wpcf7 label .wpcf7-asterisk,
.wpcf7 .wpcf7-form-control-wrap + .wpcf7-asterisk,
.wpcf7 span.required,
.wpcf7 .required,
.wpcf7 .wpcf7-required {
  display: none !important;
}