/*
Theme Name: eikounomori-original
Theme URI: https://eikounomori.or.jp/
Author: 社会福祉法人ほうえい会
Description: 社会福祉法人ほうえい会（特別養護老人ホーム栄光の杜／グループホームともだ）公式サイト用オリジナルテーマ。配色コンセプト「木漏れ日の家」。
Version: 0.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eikounomori-original
*/

/* =====================================================
   目次 / Table of Contents
   1. 基本設定・変数（色・フォント・余白）
   2. リセット・基本要素
   3. 共通パーツ（ボタン・カード・バッジ・見出し）
   4. レイアウト用ユーティリティ
   5. ヘッダー
   6. フッター
   7. トップページ：メインビジュアル（ヒーロー）
   8. トップページ：主要導線
   9. トップページ：お知らせ
   10. トップページ：私たちについて
   11. トップページ：運営施設
   12. トップページ：最新ブログ
   13. トップページ：採用情報・お問い合わせ帯
   14. トップページ：補助金・助成事業バナー
   15. スマートフォン下部：クイックアクセスバー
   16. 施設下層ページ：共通パーツ（見出し帯・サブナビ・本文）
   17. 施設下層ページ：トップ／アクセス専用パーツ
   18. ブログ一覧ページ：施設絞り込みタブ・ページ送り
   ===================================================== */

/* -----------------------------------------------------
   1. 基本設定・変数
   配色は「木漏れ日の家」で正式確定。ここを直せばサイト全体に反映される。
----------------------------------------------------- */
:root{
  /* 正式カラー（デザイン仕様書より） */
  --color-wood: #B07D4F;        /* メインカラー（木の色） */
  --color-wood-deep: #8A5F37;   /* メインカラーの濃色（見出し・ホバー等） */
  --color-leaf: #6E7F5C;        /* アクセントカラー（葉のグリーン） */
  --color-leaf-deep: #4F5D40;   /* 葉のグリーンの濃色（本文サイズの文字に使う場合） */
  --color-bg: #FDFAF5;          /* 背景色（温かい生成り） */
  --color-surface: #FFFFFF;     /* カード等の背景 */
  --color-text: #2E2A22;        /* 基本文字色 */
  --color-muted: #786C57;       /* 補助文字色（日付・キャプション等） */
  --color-line: #EDE2CC;        /* 罫線・境界線 */
  --color-sand: #F3E8D7;        /* 補助色：薄いベージュ */
  --color-leaf-tint: #E9EEDF;   /* 補助色：薄いグリーン（タグ・バッジ背景） */

  /* フォント：見出しは明朝体、本文は現代的な標準ゴシック（丸ゴシックは使わない） */
  --font-heading: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* 余白・角丸・影の基準値（多用しすぎない） */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 2px 4px rgba(46,42,34,.04), 0 10px 24px -14px rgba(46,42,34,.18);
  --content-width: 1200px;
}

/* -----------------------------------------------------
   2. リセット・基本要素
----------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px; /* 全体の文字サイズを一段階拡大（40〜70代の読みやすさを優先） */
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
h1, h2, h3, h4{
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 .6em;
}
p{ margin: 0 0 1em; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

/* キーボード操作時のフォーカスを見やすく */
a:focus-visible, button:focus-visible{
  outline: 3px solid var(--color-leaf);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* -----------------------------------------------------
   3. 共通パーツ
----------------------------------------------------- */
.eyebrow{
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-wood-deep);
  margin-bottom: .5em;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .85em 1.6em;
  border-radius: var(--radius-s);
  font-weight: 700;
  font-size: 1.02rem;
  border: 1.5px solid transparent;
  min-height: 44px;
}
.btn-primary{ background: var(--color-wood); color: #fff; }
.btn-primary:hover{ background: var(--color-wood-deep); }
.btn-outline{ background: transparent; border-color: var(--color-leaf); color: var(--color-leaf-deep); }
.btn-outline:hover{ background: var(--color-leaf-tint); }
.btn-onphoto{ background: #fff; color: var(--color-wood-deep); }
.btn-ghost-onphoto{ background: transparent; border-color: #fff; color: #fff; }
.btn-block{ width: 100%; justify-content: center; }

.badge{
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  padding: .25em .8em;
  border-radius: 999px;
  background: var(--color-leaf-tint);
  color: var(--color-leaf-deep);
}
.badge-important{ background: var(--color-wood); color: #fff; }

.card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

/* 写真プレースホルダー：本番写真に差し替えるまでの仮表示 */
.photo-placeholder{
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-wood-deep), var(--color-leaf) 140%);
  color: #fff;
  min-height: 160px;
}
.photo-placeholder .ph-label{
  margin: .8em;
  background: rgba(255,255,255,.88);
  color: var(--color-wood-deep);
  font-size: .68rem;
  font-weight: 700;
  padding: .3em .8em;
  border-radius: 999px;
}
.photo-placeholder img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------
   4. レイアウト用ユーティリティ
----------------------------------------------------- */
.container{ max-width: var(--content-width); margin: 0 auto; padding: 0 1.4rem; }
.section{ padding: 3.2rem 0; border-bottom: 1px solid var(--color-line); }
.section-tint{ background: var(--color-sand); }
.section-head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.6rem; flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0; }
.section-more{ font-size: .85rem; font-weight: 700; color: var(--color-wood-deep); white-space: nowrap; }
.section-lead{ color: var(--color-muted); max-width: 60ch; margin: -1em 0 1.6em; }

.grid{ display: grid; gap: 1.4rem; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px){
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

.skip-link{
  position: absolute; left: -9999px; top: 0; background: var(--color-wood); color: #fff;
  padding: .8em 1.2em; z-index: 1000; border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus{ left: 0; }

/* -----------------------------------------------------
   5. ヘッダー
----------------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 250, 245, .96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--color-line);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .9rem; padding-bottom: .9rem;
}
.site-logo{ display: flex; align-items: center; gap: .6em; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.site-logo img{ max-height: 44px; width: auto; }
.site-logo .mark{ width: 30px; height: 30px; border-radius: 9px; background: var(--color-wood); flex-shrink: 0; }

.primary-nav{ display: none; }
.primary-nav ul{ display: flex; align-items: center; gap: 1.7rem; }
.primary-nav a{ font-size: .98rem; font-weight: 700; color: var(--color-text); }
.primary-nav a:hover{ color: var(--color-wood-deep); }
.header-cta{ background: var(--color-wood); color: #fff !important; padding: .6em 1.3em; border-radius: var(--radius-s); font-size: .92rem !important; }

.menu-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-s);
  background: var(--color-surface); border: 1px solid var(--color-line);
}
.menu-toggle span{ display: block; width: 20px; height: 2px; background: var(--color-text); position: relative; }
.menu-toggle span::before, .menu-toggle span::after{ content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--color-text); }
.menu-toggle span::before{ top: -6px; }
.menu-toggle span::after{ top: 6px; }

.mobile-nav{ display: none; border-top: 1px solid var(--color-line); background: var(--color-surface); }
.mobile-nav.is-open{ display: block; }
.mobile-nav ul{ padding: .6rem 1.4rem 1.2rem; display: flex; flex-direction: column; }
.mobile-nav a{ display: block; padding: .8em 0; font-size: .95rem; font-weight: 700; border-bottom: 1px dashed var(--color-line); }

@media (min-width: 960px){
  .primary-nav{ display: block; }
  .menu-toggle, .mobile-nav{ display: none !important; }
}

/* -----------------------------------------------------
   6. フッター
----------------------------------------------------- */
.site-footer{ background: var(--color-surface); border-top: 1px solid var(--color-line); padding: 3rem 0 1.4rem; font-size: .95rem; color: var(--color-muted); }
.footer-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; margin-bottom: 2rem; }
.footer-grid h5{ font-family: var(--font-body); font-weight: 700; color: var(--color-text); font-size: .98rem; margin-bottom: .8em; }
.footer-grid li{ padding: .25em 0; }
.footer-grid a:hover{ color: var(--color-wood-deep); }
.footer-bottom{ border-top: 1px solid var(--color-line); padding-top: 1.2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* -----------------------------------------------------
   7. トップページ：メインビジュアル
----------------------------------------------------- */
.hero{ min-height: 62vh; max-height: 640px; }
.hero .inner{
  width: 100%;
  padding: 3rem 0 3.4rem;
  background: linear-gradient(0deg, rgba(30,24,14,.6), rgba(30,24,14,0) 75%);
}
.hero .inner .container{ color: #fff; }
.hero .kicker{ font-size: .74rem; letter-spacing: .16em; font-weight: 700; margin-bottom: .7em; opacity: .95; }
.hero h1{ color: #fff; font-size: clamp(1.7rem, 4.4vw, 2.6rem); margin-bottom: .5em; }
.hero .sub{ font-size: 1rem; margin-bottom: 1.4em; opacity: .95; }
.hero .btnrow{ display: flex; gap: .8rem; flex-wrap: wrap; }

/* -----------------------------------------------------
   8. トップページ：主要導線
----------------------------------------------------- */
.quicklinks .item{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6em;
  padding: 1.4rem 1rem; font-weight: 700; font-size: .98rem;
}
.quicklinks .ic{
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-leaf-tint);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}

/* -----------------------------------------------------
   9. トップページ：お知らせ
----------------------------------------------------- */
.notice-list{ overflow: hidden; }
.notice-list .row{
  display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--color-line); font-size: .92rem;
}
.notice-list .row:last-child{ border-bottom: none; }
.notice-list .date{ color: var(--color-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; font-size: .92rem; }
.notice-list .row .badge{ flex-shrink: 0; }
.notice-list .ttl{ flex: 1; }
.notice-list .ttl:hover{ color: var(--color-wood-deep); }
.empty-note{ padding: 1.6rem; text-align: center; color: var(--color-muted); }

/* -----------------------------------------------------
   10. トップページ：私たちについて（コンパクト表示）
----------------------------------------------------- */
.section-about-compact{ padding: 2.1rem 0; } /* 通常セクションの3.2remより低くし、縦の占有面積を6〜7割程度に抑える */
.about-grid{ display: grid; grid-template-columns: .9fr 1.2fr; gap: 2rem; align-items: center; }
.about-grid .photo-placeholder{ min-height: 170px; border-radius: var(--radius-l); }
.about-grid h2{ font-size: 1.3rem; margin-bottom: .4em; }
.about-grid .body p{ color: var(--color-muted); max-width: 46ch; margin-bottom: .8em; }
@media (max-width: 880px){ .about-grid{ grid-template-columns: 1fr; } }

/* -----------------------------------------------------
   11. トップページ：運営施設
----------------------------------------------------- */
.facility-card{ overflow: hidden; }
.facility-card .photo-placeholder{ min-height: 200px; }
.facility-card .body{ padding: 1.4rem 1.5rem; }
.facility-card .facility-type{
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--color-leaf-deep); margin-bottom: .3em;
}
.facility-card h3{ font-size: 1.32rem; margin-bottom: .6em; }
.facility-card .kv{ font-size: .95rem; color: var(--color-muted); border-top: 1px dashed var(--color-line); padding: .5em 0; }
.facility-card .kv:first-of-type{ border-top: none; }
.facility-card .kv b{ color: var(--color-text); font-weight: 700; }
.facility-card .kv a{ color: var(--color-wood-deep); font-weight: 700; }

/* -----------------------------------------------------
   12. トップページ：最新ブログ（重要コンテンツとして大きく表示）
----------------------------------------------------- */
.section-blog{ background: var(--color-sand); }
.blog-grid{ display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }
.blog-card{
  display: flex; flex-direction: column;
  overflow: hidden; flex: 1 1 320px; max-width: 400px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover{ box-shadow: 0 4px 8px rgba(46,42,34,.06), 0 16px 32px -16px rgba(46,42,34,.28); transform: translateY(-2px); }
/* 記事が1〜2件のときも不自然な余白が出ないよう、カード自体の最大幅で調整する */
.blog-grid-count-1 .blog-card{ max-width: 460px; }
.blog-grid-count-2 .blog-card{ max-width: 420px; }
.blog-card .photo-placeholder{ min-height: 230px; }
.blog-card .body{ padding: 1.3rem 1.4rem; }
.blog-card .cat{ margin-bottom: .6em; }
.blog-card .t{ font-size: 1.08rem; font-weight: 700; margin-bottom: .5em; color: var(--color-text); }
.blog-card:hover .t{ color: var(--color-wood-deep); }
.blog-card .d{ font-size: .88rem; color: var(--color-muted); }
@media (max-width: 480px){ .blog-card{ flex-basis: 100%; max-width: 440px; } }
@media (prefers-reduced-motion: reduce){ .blog-card:hover{ transform: none; } }

/* -----------------------------------------------------
   13. トップページ：採用情報・お問い合わせ帯
----------------------------------------------------- */
.recruit-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.recruit-grid .photo-placeholder{ min-height: 220px; border-radius: var(--radius-l); }
@media (max-width: 880px){ .recruit-grid{ grid-template-columns: 1fr; } }

.cta-band{ background: var(--color-wood-deep); color: #fff; text-align: center; padding: 3rem 0; }
.cta-band h2{ color: #fff; margin-bottom: .9em; }
.cta-band .btnrow{ display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* -----------------------------------------------------
   14. トップページ：補助金・助成事業バナー
----------------------------------------------------- */
.banner-strip{ padding: 2.4rem 0; }
.banner-row{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2rem; margin-top: 1rem;
}
/* 各バナーの縦横比は変えず、高さの上限だけを揃えて自然にトリミングなしで並べる */
.banner-item img{
  width: auto; height: auto; max-height: 90px; max-width: 100%;
}
@media (max-width: 600px){ .banner-row{ gap: 1.4rem; } .banner-item img{ max-height: 70px; } }

/* -----------------------------------------------------
   15. スマートフォン下部：クイックアクセスバー
   「電話／入居案内／お問い合わせ」へすぐ移動できる固定バー。
   PC（960px以上）では表示しない。
----------------------------------------------------- */
.mobile-quickbar{ display: none; }
@media (max-width: 959px){
  .mobile-quickbar{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--color-surface); border-top: 1px solid var(--color-line);
    box-shadow: 0 -6px 18px rgba(46,42,34,.12);
  }
  .mobile-quickbar a{
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2em; padding: .6rem .4rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    font-size: .74rem; font-weight: 700; color: var(--color-text); min-height: 56px;
    border-right: 1px solid var(--color-line);
  }
  .mobile-quickbar a:last-child{ border-right: none; }
  .mobile-quickbar a.is-primary{ background: var(--color-wood); color: #fff; }
  .mobile-quickbar .qb-icon{ font-size: 1.15rem; }
  /* バーの高さぶん、本文が隠れないように余白を確保する */
  body{ padding-bottom: 64px; }
}

/* -----------------------------------------------------
   16. 施設下層ページ：共通パーツ（見出し帯・サブナビ・本文）
----------------------------------------------------- */
.facility-page-band{ background: var(--color-sand); padding: 2.2rem 0 1.6rem; }
.facility-page-band .facility-type{
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  color: var(--color-leaf-deep); margin-bottom: .3em;
}
.facility-page-band .facility-page-band-name{ display: block; font-size: .95rem; color: var(--color-muted); margin-bottom: .2em; font-weight: 700; }
.facility-page-band h1{ font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }

.facility-subnav{ position: sticky; top: 65px; z-index: 90; background: var(--color-surface); border-bottom: 1px solid var(--color-line); overflow-x: auto; }
.facility-subnav-inner{ display: flex; gap: .3rem; padding-top: .2rem; padding-bottom: .2rem; }
.facility-subnav-item{
  flex-shrink: 0; padding: .8rem 1rem; font-size: .88rem; font-weight: 700; color: var(--color-muted);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.facility-subnav-item:hover{ color: var(--color-wood-deep); }
.facility-subnav-item.is-current{ color: var(--color-wood-deep); border-bottom-color: var(--color-wood); }

.facility-content-narrow{ max-width: 760px; }
.facility-content h2{ font-size: 1.25rem; margin-top: 1.6em; }
.facility-content h2:first-child{ margin-top: 0; }
.facility-content p{ color: var(--color-text); }
.facility-content ul{ list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.facility-content ul li{ margin-bottom: .4em; }
.facility-content table{ width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; }
.facility-content table td, .facility-content table th{ border: 1px solid var(--color-line); padding: .7em 1em; text-align: left; }
.facility-content table tr:first-child{ background: var(--color-sand); font-weight: 700; }
.facility-content figure{ margin: 1.4em 0; }
.facility-content-life img{ border-radius: var(--radius-m); }
.facility-inline-note{ margin-top: 2rem; padding: 1.2rem 1.4rem; text-align: center; }
.facility-inline-note p{ margin-bottom: .8em; color: var(--color-muted); }

/* -----------------------------------------------------
   17. 施設下層ページ：トップ／アクセス専用パーツ
----------------------------------------------------- */
.facility-hero{ min-height: 46vh; max-height: 520px; }
.facility-basic-info{
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 1rem 1.4rem;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-m);
  font-size: .95rem; color: var(--color-muted); box-shadow: var(--shadow-card);
}
.facility-basic-info b{ color: var(--color-text); }
.facility-basic-info a{ color: var(--color-wood-deep); font-weight: 700; }

.access-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.map-placeholder{
  min-height: 220px; border-radius: var(--radius-m); border: 1px solid var(--color-line);
  background: repeating-linear-gradient(45deg, var(--color-leaf-tint), var(--color-leaf-tint) 10px, var(--color-surface) 10px, var(--color-surface) 20px);
  display: flex; align-items: center; justify-content: center; color: var(--color-wood-deep); font-weight: 700; font-size: .92rem;
}
.access-card h4{ font-family: var(--font-heading); font-size: 1.08rem; margin-bottom: .5em; }
.access-card div{ color: var(--color-muted); padding: .15em 0; font-size: .95rem; }
.access-card a{ color: var(--color-wood-deep); font-weight: 700; }
@media (max-width: 880px){ .access-grid{ grid-template-columns: 1fr; } }

/* -----------------------------------------------------
   18. ブログ一覧ページ：施設絞り込みタブ・ページ送り
----------------------------------------------------- */
.blog-filter{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.blog-filter-item{
  padding: .55em 1.2em; border-radius: 999px; font-size: .92rem; font-weight: 700;
  background: var(--color-surface); border: 1.5px solid var(--color-line); color: var(--color-muted);
  min-height: 44px; display: inline-flex; align-items: center;
}
.blog-filter-item:hover{ border-color: var(--color-wood); color: var(--color-wood-deep); }
.blog-filter-item.is-active{ background: var(--color-wood); border-color: var(--color-wood); color: #fff; }

.blog-pagination{ display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 2.4rem; }
.blog-pagination .page-numbers{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .6em; border-radius: var(--radius-s);
  background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-text); font-weight: 700;
}
.blog-pagination .page-numbers.current{ background: var(--color-wood); border-color: var(--color-wood); color: #fff; }
.blog-pagination .page-numbers.dots{ border: none; background: transparent; }