/* CSS Document */
/* ===== 共通ボタンスタイル（features基準） ===== */
:root{
  --btn-font-size: 16px;
  --btn-min-h: 44px;
  --btn-pad-x: 16px;
  --btn-pad-y: 8px;
  --btn-radius: 9999px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-size:var(--btn-font-size); line-height:1; font-weight:700;
  border-radius:var(--btn-radius); border:2px solid transparent;
  background:var(--c-accent); color:#432; text-decoration:none; box-shadow:var(--shadow-sm);
}
.btn.secondary{ background:#fff; border-color:#fff; color:#222; }

.hero .btn, .cta-wrap .btn, .section .btn{
  min-height:var(--btn-min-h);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  font-size:var(--btn-font-size);
}


/* === kosodate専用白帯 安定リセット版（最終整理） === */

/* ▼ 他ページでは背景リセット（灰色帯防止） */
body:not(.kosodate) nav.main-tabs,
body:not(.kosodate) nav.main-tabs::before {
  background: transparent !important;
  box-shadow: none !important;
  content: none !important;
}

/* ▼ kosodate：白帯固定＋全幅マスク */
body.kosodate nav.main-tabs {
  position: relative !important;      /* ::before の基準 */
  z-index: 10 !important;
  background: #fff !important;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  box-shadow: none !important;
  background-image: none !important;
}

body.kosodate nav.main-tabs::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);          /* 画面端まで白を敷く */
  background: #fff !important;
  z-index: -1;                        /* タブの背面だけに置く */
}

/* ▼ ナビ直下の余白を潰して、帯段差防止 */
body.kosodate header,
body.kosodate nav.main-tabs,
body.kosodate .hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ▼ 保険：ナビ直下の境界に白ライン1px敷く */
body.kosodate nav.main-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #fff;
}


/* kosodate：ヒーロー画像のグレー帯を消す */
body.kosodate .hero::after{
  content: none !important;
  background: none !important;
  /* 念のため */
  opacity: 0 !important;
}

/* ===== kosodate：ヒーロー内にタイトル＋2ボタンを完全固定 ===== */
body.kosodate .hero{
  position: relative;
  overflow: hidden;                /* 画像外にはみ出すの防止 */
  margin-bottom: 16px;             /* 直下の白帯を少しだけに */
}

/* タイトルブロック（タイトル＋説明＋2ボタン）を写真上に */
body.kosodate .hero .copy{
  position: absolute;
  left: 6%;
  /* Chrome/Safari差を吸収：最小16px〜最大12svhの中で気持ち高めに浮かせる */
  bottom: clamp(16px, 8svh, 12svh);
  max-width: min(640px, 85vw);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  z-index: 1;
  pointer-events: none;            /* ブロック自体はクリックを通す… */
}
body.kosodate .hero .copy a{
  pointer-events: auto;            /* …が、ボタンは操作できるように戻す */
}

/* タイトルと説明 */
body.kosodate .hero .copy h2{
  margin: 0 0 .4em;
  font-weight: 700;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.2;
}
body.kosodate .hero .copy p{
  margin: 0 0 .9em;
  font-size: clamp(14px, 1.6vw, 18px);
}

/* 2ボタンを写真上に */
body.kosodate .hero .cta-wrap{
  display: flex; gap: 10px; flex-wrap: wrap;
}
body.kosodate .hero .cta-wrap .btn{
  background: rgba(255,255,255,.9);
  color: #432; font-weight: 700;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
  backdrop-filter: blur(2px);
}
body.kosodate .hero .cta-wrap .btn:hover{
  background: #fff; transform: translateY(-2px);
}

/* ===== kosodate：ヒーロー直下の白い余白を半分に ===== */
/* セクション全体をコンパクトに */
body.kosodate .section{ padding-top: 32px !important; padding-bottom: 32px !important; }
/* さらに“最初の”セクションはヒーローに少し被せて白帯を短縮 */
body.kosodate main > .section:first-of-type{
  margin-top: -12px;               /* 数値調整可：-8〜-20px くらいで好みに合わせて */
}

/* 小さめ画面では少しだけ上げすぎないよう微調整 */
@media (max-width: 640px){
  body.kosodate .hero .copy{
    left: 5%;
    bottom: clamp(12px, 7svh, 10svh);
  }
}

/* ===== PDF固定表示（A4縦比率） ===== */
.pdf-card{
  max-width: min(960px, 92vw);
  margin: 0 auto 56px;              /* ← 下に余白を付ける（②とも連動） */
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 8px;
}

.pdf-embed{
  width: 100%;
  /* A4縦の比率（幅 : 高さ ≒ 1 : 1.414）で枠を作る → 内部スクロール不要 */
  aspect-ratio: 1 / 1.414;
  display: block;
  border: 0;
  overflow: hidden;      /* 余計なスクロールバーを抑止 */
}

/* 読みやすいようにフォールバック表示は小さめ */
.pdf-fallback{
  margin: 10px 8px 0;
  font-size: .95rem;
  text-align: right;
}


/* ===== PDF固定表示（A5横サイズ向け） ===== */
.pdf-card {
  max-width: min(960px, 96vw);   /* 横長に合わせて広めに */
  margin: 0 auto 64px;           /* 下に余白をやや広めに */
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 8px;
}

/* ▼A5横（ランドスケープ）の比率：幅 : 高さ ≒ 1 : 0.707 */
.pdf-embed {
  width: 100%;
  aspect-ratio: 1 / 0.707;   /* 横長比率でスクロールなし1ページ表示 */
  display: block;
  border: 0;
  overflow: hidden;
  background: #fff;
}

/* PDFが表示できないとき用のフォールバック */
.pdf-fallback {
  margin: 10px 8px 0;
  font-size: .9rem;
  text-align: right;
  color: #555;
}
.pdf-fallback a {
  color: var(--c-text-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ===== PDF固定表示（A5横・スクロール禁止） ===== */
.pdf-card {
  max-width: min(960px, 96vw);
  margin: 0 auto 64px;               /* 下の「各月のようす」との余白 */
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 10px;
  overflow: hidden;                  /* 内部スクロールの切り落とし */
}

/* 外枠：固定高さを明示してiframeの高さを制御 */
.pdf-card .pdf-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.414 / 1;           /* A5横の比率 */
  overflow: hidden;                  /* スクロール禁止 */
}

/* 中身：幅100%＋高さ100%で完全フィット */
.pdf-card iframe.pdf-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;              /* スクロール操作禁止 */
  transform: scale(1.02);            /* 小さく切れている場合は調整 */
  transform-origin: top center;
}

/* PDFが見られないときの案内 */
.pdf-fallback {
  margin: 10px 4px 0;
  font-size: .9rem;
  text-align: right;
  color: #555;
}
.pdf-fallback a {
  color: var(--c-text-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ===== PDF下の余白を1/3に狭くし、「各月のようす」前に余白を追加 ===== */

/* PDFカード下の余白を小さく（現在の1/3程度） */
#monthly-pdf .pdf-card {
  margin-bottom: 24px !important; /* ← 以前の 64px → 約1/3 */
}

/* 「各月のようす」見出しの上にゆったり余白を追加 */
#yousu-title,
#gallery-title {
  margin-top: 80px !important; /* ← もともと狭い場合にしっかり空ける */
}

/* ===== 「各月のようす」タイトルをボタン群に近づける調整 ===== */
#yousu-title,
#gallery-title {
  margin-top: 32px !important; /* ← 以前80px → 半分くらいにして近づける */
}


/* 現在ページ強調 */
.nav .nav-link[aria-current="page"]{
  background: var(--c-main, #2db4a8);
  color:#fff;
  font-weight:700;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(0,0,0,.03) inset, 0 2px 8px rgba(0,0,0,.12);
}
.nav .nav-link:hover{ filter:brightness(.96); }
.nav .nav-link[aria-current="page"]:hover{ filter:brightness(.98); }


:root{
  /* 追加（濃い主色＆文字色） */
  --c-main-strong: #0e9b92; /* 迷ったらコレ：濃めの緑青 */
  --on-main-strong: #ffffff;
}

/* 現在ページ強調（濃色ソリッド） */
.main-tabs a[aria-current="page"]{
  background: var(--c-main-strong) !important;
  color: var(--on-main-strong) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset, 0 4px 14px rgba(0,0,0,.16);
  transform: translateY(-0.5px);
}
.main-tabs a[aria-current="page"]:hover{
  filter: none; transform: translateY(-1px);
}

:root{
  --tab-strong-1: #ff8a3d; /* 濃オレンジ */
  --tab-strong-2: #e76f1f; /* 影側 */
}
.main-tabs a[aria-current="page"]{
  background: linear-gradient(180deg, var(--tab-strong-1), var(--tab-strong-2)) !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  transform: translateY(-1px);
}
.main-tabs a[aria-current="page"]::after{
  content:"今ここ";
  margin-left:.5em;
  font-weight:800;
  font-size:.85em;
  background:#fff; color:#e25700;
  padding:.15em .5em; border-radius:999px;
}


.main-tabs a[aria-current="page"]::after{
  content: none !important;
  display: none !important;
}

/* バッジを完全オフ（DWの表示も抑えたいので強めに） */
.main-tabs a[aria-current="page"]::after{
  content: none !important;
  display: none !important;
}

/* yousu の“現在ページ”だけオレンジで上書き */
body.yousu .main-tabs a[aria-current="page"]{
  background: linear-gradient(180deg, #ff8a3d, #e76f1f) !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  transform: translateY(-1px);
}


/* index：ヒーロー内の「入園のしおり／職員採用」ボタンの縦位置を中央に */
.hero .cta-wrap .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;      /* 行ボックスを詰める */
  padding: 12px 20px;  /* 上下を少し増やす（10〜14pxで好み調整OK） */
  border-radius: 999px;
  min-height: 56px;    /* 任意：高さをそろえたいとき */
}

@media print{
  /* ヒーローのグラデ・装飾は消す（黒ベタ化を防ぐ） */
  .hero::before,
  .hero::after { content: none !important; background: none !important; }

  /* 画像は素のまま（フィルター/ブレンド無効） */
  .hero img,
  .bg-photo{
    position: static !important;   /* absolute だと飛ぶことがある */
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }

  /* 背景色は白で固定（グラデや影が黒化しないように） */
  body, header, nav, .section, .main-tabs { 
    background: #fff !important; 
    box-shadow: none !important;
  }

  /* 背景画像で敷いている要素は印刷では外す（消える/真っ黒を回避） */
  [style*="background-image"],
  .has-bg,
  .title-bg {
    background-image: none !important;
  }

  /* Safari対策：印刷色補正はすでに入っているが念のため */
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* LINK コーナー */
.link-grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
  gap: 1rem;
  margin-top: .5rem;
}
.link-card {
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.link-name { font-size: 1.1rem; margin: .25rem 0 .25rem; }
.link-desc { opacity: .85; margin: 0 0 .75rem; }
.btn-wrap { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn .ext { margin-left: .4rem; vertical-align: -2px; }