/* ============== Komorebi Innov — Staticized (No time-of-day) ============== */
:root{
  /* 変数は他のスタイルが参照しているので残す（進行度は未使用） */
  --sky-progress:0;
  --ink:#21322b; --ink-sub:#4b5e56;
  --leaf:#66b58a; --leaf-d:#4a8f6b; --sun:#f6ebaf;
  --card:#ffffff; --line:rgba(0,0,0,.06);
  --shadow:0 8px 20px rgba(0,0,0,.06);
}

/* ===== 背景：時間帯の依存を削除し、常に穏やかな固定グラデーションに ===== */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 420px at 14% -8%, rgba(102,181,138,.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, rgba(246,235,175,.35) 40%, rgba(29,42,36,.20) 100%);
}
body[data-theme="night"]::before{ background: inherit !important; }
#night-stars{ display:none !important; }

/* ヘッダー */
header{ transition: background .25s ease, box-shadow .25s ease; }
body.scrolled header{ background:rgba(255,255,255,.82)!important; box-shadow:0 8px 18px rgba(0,0,0,.06); }

/* スキップリンク */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; z-index:9999;
  background:#000; color:#fff; padding:8px 12px; border-radius:8px;
}

/* 出現アニメ */
.reveal{
  opacity:0; transform:translateY(18px) scale(.99);
  filter:saturate(.98) contrast(.98);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change:transform,opacity;
}
.reveal.is-in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none !important; } }

/* ヒーロー空気感（軽微） */
.hero{ position:relative; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 220px at 20% 12%, rgba(246,235,175,.18), transparent 60%),
    radial-gradient(500px 200px at 82% 18%, rgba(102,181,138,.14), transparent 60%);
  mix-blend-mode:soft-light;
}

/* ========= 共通カード（about-details） ========= */
main section.about-details{
  position:relative;
  background:var(--card)!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  box-shadow:var(--shadow)!important;
  padding:clamp(20px,3vw,32px)!important;
  overflow:hidden!important;
}
main section{ margin:clamp(40px,8vw,80px) auto; }

/* 見出し */
main section.about-details h2{
  color:var(--leaf); text-align:left; font-weight:900;
  font-size:clamp(1.6rem,2.2vw,2.2rem);
  letter-spacing:.01em; margin-bottom:.7rem;
}
main section.about-details h2::after{
  content:""; display:block; width:72px; height:4px; border-radius:999px; margin-top:.5rem;
  background:linear-gradient(90deg,#bfe5d1,#66b58a);
}

/* 斜め区切り背景 */
main section.about-details::before{
  content:""; position:absolute; left:-10vw; right:-10vw; top:-12vw; height:18vw; z-index:-1;
  background:linear-gradient(90deg, rgba(102,181,138,.12), rgba(102,181,138,.06));
  transform:skewY(-4deg); filter:blur(20px);
}
main section.about-details:nth-of-type(even)::before{ transform:skewY(4deg); }

/* ========= チェキ（Polaroid）で “活動報告/活動記録” を表示 ========= */
/* ※ 旧FILM STRIPを廃止し、latest-reports をグリッド表示に */
#latest-reports{
  list-style:none;
  padding:0;
  margin:24px 0 0;
  display:grid;                 /* ← 重要：非表示を解除してグリッド化 */
  gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  perspective:1200px;
}

/* 1枚のチェキ（紙） */
#latest-reports .cheki{
  position:relative;
  background:#fff;
  padding:10px 10px 26px;       /* 下フチ厚めでチェキ感 */
  border-radius:10px;
  box-shadow:0 18px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transform-origin:50% 12%;
  outline:1px solid rgba(0,0,0,.05);
}
#latest-reports .cheki[data-rot]{ rotate:var(--rot,0deg); }
#latest-reports .cheki[data-tilt="l"]{ transform:rotateX(.5deg) rotateY(-.6deg); }
#latest-reports .cheki[data-tilt="r"]{ transform:rotateX(.5deg) rotateY(.6deg); }
#latest-reports .cheki:hover{
  transform:translateY(-3px) scale(1.012);
  box-shadow:0 26px 40px rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.10);
  z-index:1; filter:saturate(1.04);
}

/* 写真窓 */
#latest-reports .cheki__window{
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  background:#f0f0f0;
  position:relative;
  outline:1px solid rgba(0,0,0,.06);
}
#latest-reports .cheki__img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* キャプション */
#latest-reports .cheki__caption{ margin-top:10px; line-height:1.5; color:#202825; }
#latest-reports .cheki__title{
  text-decoration:none; color:inherit; font-weight:700;
  border-bottom:2px dotted rgba(0,0,0,.25); padding-bottom:2px;
}
#latest-reports .cheki__meta{ display:block; margin-top:6px; font-size:.86rem; color:#4b5e56; opacity:.95; }

/* スマホ調整 */
@media (max-width:480px){
  #latest-reports{ gap:16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  #latest-reports .cheki{ padding:8px 8px 22px; border-radius:9px; }
  #latest-reports .cheki__window{ border-radius:7px; }
}

/* ========= （旧）FILM STRIP のスタイルは完全に無効化 ========= */
/* 万一、他のセクションで使っている場合はクラス名を変えて利用してください */
.film-wrap,.film-strip,.film-frame,.film-label,.film-caption,.film-head,.film-nav,.film-btn,.more-line,.more-btn{
  all: unset;
}

/* ========= 自動レイアウト：SPLIT / ZIGZAG / TIMELINE ========= */
.layout-split .split-grid{
  display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(18px,3vw,32px); align-items:start;
}
.layout-split.is-reverse .split-grid{ grid-template-columns:.85fr 1.25fr; }
.layout-split .split-main > *{ margin-bottom:.9rem; }
.layout-split .split-side{
  position:relative; border-radius:18px;
  background: radial-gradient(600px 260px at 10% -10%, rgba(102,181,138,.14), transparent 60%), #fbfbf9;
  border:1px solid var(--line); padding:16px; min-height:120px; box-shadow:var(--shadow);
}
.layout-split .split-side::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent);
}
.split-hint{ font-weight:700; color:#2a3a34; }
@media (max-width:900px){ .layout-split .split-grid{ grid-template-columns:1fr; } }

.layout-zigzag .zig-list{
  position:relative; display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,2.4vw,20px);
}
.layout-zigzag .zig-list::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(102,181,138,.25), rgba(74,143,107,.12)); border-radius:999px;
}
.layout-zigzag .zig-item{
  grid-column:span 6; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px;
  box-shadow:var(--shadow); transform:rotate(var(--tilt,0deg)); transition:transform .2s ease, box-shadow .2s ease;
}
.layout-zigzag .zig-item:nth-child(odd){ grid-column:1 / span 6; --tilt:-0.8deg; }
.layout-zigzag .zig-item:nth-child(even){ grid-column:7 / span 6; --tilt: 0.8deg; }
.layout-zigzag .zig-item:hover{ transform:translateY(-2px) rotate(var(--tilt,0deg)); box-shadow:0 12px 28px rgba(0,0,0,.1); }
@media (max-width:900px){
  .layout-zigzag .zig-list{ grid-template-columns:1fr; }
  .layout-zigzag .zig-list::before{ display:none; }
  .layout-zigzag .zig-item{ grid-column:auto; transform:none; }
}

.layout-timeline .tl{
  position:relative; list-style:none; padding:0; margin:0; display:grid; gap:14px;
}
.layout-timeline .tl::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%);
  background:linear-gradient(180deg,#e8f6ef,#66b58a 50%,#e8f6ef); border-radius:999px;
}
.layout-timeline .tl-item{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow);
}
.layout-timeline .tl-item:nth-child(odd){ margin-right:52%; }
.layout-timeline .tl-item:nth-child(even){ margin-left:52%; }
.layout-timeline .tl-item::after{
  content:""; position:absolute; top:14px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(180deg,var(--leaf),var(--leaf-d)); box-shadow:0 0 0 4px #fff; left:calc(100% + 14px);
}
.layout-timeline .tl-item:nth-child(even)::after{ left:auto; right:calc(100% + 14px); }
@media (max-width:900px){
  .layout-timeline .tl::before{ left:10px; transform:none; width:2px; }
  .layout-timeline .tl-item{ margin:0 0 0 28px; }
  .layout-timeline .tl-item::after{ left:-18px; right:auto; }
}

/* ナビ（モバイル） */
@media (max-width:768px){
  .navbar{ display:none; }
  .navbar.active{ display:flex; }
}

/* フローティング：トップへ戻る */
.to-top{
  position:fixed; right:14px; bottom:16px; width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:#fff; box-shadow:0 10px 22px rgba(0,0,0,.12); cursor:pointer; font-weight:900; color:#234;
  display:grid; place-items:center; z-index:999;
}
.to-top:hover{ filter:brightness(1.02); }
.to-top.hide{ opacity:0; pointer-events:none; transform:translateY(10px); transition:.25s; }
.to-top.show{ opacity:1; transform:none; transition:.25s; }


/* === Cheki 画像が見えない対策（最優先で上書き） === */
#latest-reports { display: grid !important; } /* 念のため可視化 */
#latest-reports .cheki__window { background:#f0f0f0 !important; }
#latest-reports .cheki__img{
  display:block !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  opacity:1 !important; visibility:visible !important;
  filter:none !important; mix-blend-mode:normal !important;
}
/* もし全体の img に opacity/transition を当てていたら打ち消す */
img { opacity:1; }