/* =========================================================
   FJリアルティ 社会貢献活動ページ 共通スタイル
   - 配色はデザイン案（深緑×金×生成り）を基調に、公式HPの青(#1653a5)をリンク・フッターで接続
   - 下層ページを増やす場合もこのCSSを共用する
   ========================================================= */
:root{
  --green-900:#1d4636;
  --green-700:#2f5f4b;
  --green-400:#86a173;
  --sage-100:#f1f4ea;
  --sage-200:#e4ebd8;
  --sage-line:#bccaa6;
  --gold:#bf9f57;
  --gold-d:#a88742;
  --gold-l:#e6d8ae;
  --cream:#fbfaf6;
  --paper:#ffffff;
  --ink:#2a3547;
  --muted:#5d6878;
  --fj-blue:#1653a5;      /* 公式HPのメインカラー */
  --fj-navy:#0f2f66;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho",serif;
  --ease:cubic-bezier(.22,.7,.2,1);
  --header-h:64px;
  --head:var(--green-900);   /* 見出し色。theme-fj では紺に差し替え */
  --en:"Cinzel","Trajan Pro 3",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--serif);font-weight:500;line-height:2;letter-spacing:.04em;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:var(--fj-blue)}
h1,h2,h3,p,ol,figure{margin:0;padding:0}
ol{list-style:none}
.sp{display:none}

/* ---------- スクロール進捗 ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-l),var(--gold) 60%,var(--gold-d))}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:box-shadow .4s,border-color .4s}
.site-header.scrolled{border-color:#ece7d8;box-shadow:0 6px 24px -14px rgba(29,70,54,.35)}
.header-inner{max-width:1120px;margin:0 auto;height:var(--header-h);padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center}
.brand img{height:44px;width:auto}
.header-nav{display:flex;align-items:center;gap:28px;font-size:.95rem}
.header-nav a{text-decoration:none}
.nav-current{position:relative;color:var(--head);font-weight:700;padding:6px 2px}
.nav-current::after{content:"";position:absolute;left:50%;bottom:-2px;width:34px;height:2px;
  background:var(--gold);transform:translateX(-50%) scaleX(0);animation:ruleIn .9s var(--ease) .5s forwards}
.nav-home{color:var(--fj-blue);font-size:.85rem;letter-spacing:.08em;display:inline-flex;gap:.4em;align-items:center}
.nav-home span{transition:transform .3s var(--ease)}
.nav-home:hover span{transform:translateX(4px)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(320px,44vw,520px);display:flex;align-items:center;
  background:
    radial-gradient(120% 90% at 85% 0%,#fffdf4 0%,rgba(255,253,244,0) 55%),
    linear-gradient(180deg,#eef3e6 0%,#e6eedc 55%,#dfe9d3 100%)}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;will-change:transform}
.hill-3{fill:#d5e1c8;opacity:.75}
.hill-2{fill:#ccdabd;opacity:.8}
.hill-1{fill:#c0d1b0;opacity:.7}
.hero-deco{position:absolute;height:1px;background:var(--gold);opacity:0;
  animation:decoIn 1.4s var(--ease) forwards}
.hero-deco::after{content:"";position:absolute;left:18%;top:7px;width:64%;height:1px;background:var(--gold);opacity:.7}
.deco-a{right:4%;top:22%;width:120px;animation-delay:1s}
.deco-b{right:30%;bottom:20%;width:90px;animation-delay:1.25s}
.deco-c{left:3%;bottom:30%;width:70px;animation-delay:1.5s}
.motes{position:absolute;inset:0;pointer-events:none}
.mote{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#f5dc8a 0%,rgba(233,190,82,.5) 50%,rgba(233,190,82,0) 72%);
  opacity:0;animation:moteUp linear infinite}

.hero-inner{width:100%;max-width:1120px;margin:0 auto;padding:56px 24px 64px;position:relative}
.hero-title{color:var(--head);font-weight:700;
  font-size:clamp(2.5rem,7.4vw,5rem);line-height:1.25;letter-spacing:.12em}
.hero-title--long{font-size:clamp(1.85rem,5.2vw,3.6rem);line-height:1.4;letter-spacing:.1em}
.hero-title .ch{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(6px);
  animation:charIn 1s var(--ease) forwards}
.hero-rule{display:block;width:min(560px,62%);height:1px;margin:clamp(14px,2vw,22px) 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));
  transform:scaleX(0);transform-origin:0 50%;animation:ruleIn 1.2s var(--ease) .75s forwards}
.hero-sub{color:var(--head);font-size:clamp(1.2rem,3.5vw,2.1rem);letter-spacing:.16em;line-height:1.5;
  opacity:0;transform:translateY(12px);animation:fadeUp 1.1s var(--ease) 1.05s forwards}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;margin-bottom:clamp(14px,2.4vw,26px);
  font-size:.78rem;letter-spacing:.08em;line-height:1.6;color:var(--muted);
  opacity:0;animation:fadeUp 1s var(--ease) .1s forwards}
.crumb a{color:var(--head);text-decoration:none;border-bottom:1px solid var(--gold)}
.crumb a:hover{color:var(--fj-blue)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(8px,1.4vw,14px);
  font-family:var(--en);font-size:clamp(.72rem,1.3vw,.9rem);letter-spacing:.32em;color:var(--gold-d);line-height:1.4;
  opacity:0;animation:fadeUp 1s var(--ease) .1s forwards}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}

/* ---------- 稲穂（JSでSVG生成） ---------- */
.rice{position:absolute;pointer-events:none}
.rice svg{display:block;width:100%;height:100%;overflow:visible}
.rice-hero{right:-2%;bottom:-6%;width:clamp(230px,42vw,560px);aspect-ratio:1/1;z-index:0;
  opacity:0;animation:riceIn 1.8s var(--ease) .5s forwards}
.rice .sway{transform-box:view-box;animation:sway 6s ease-in-out infinite alternate}
.rice .leaf{transform-box:view-box;animation:sway 7.5s ease-in-out infinite alternate}

/* ---------- セクション共通 ---------- */
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.section{padding:clamp(28px,4.5vw,44px) 0}
.intro{padding-top:clamp(36px,6vw,64px)}
.lead{font-size:clamp(.98rem,1.9vw,1.12rem)}
.lead + .lead{margin-top:1em}
.rule{display:block;height:1px;margin-bottom:clamp(20px,3vw,30px);
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-l) 100%)}
.rule.reveal{opacity:1;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease)}
.rule.reveal.show{transform:scaleX(1)}
.heading{color:var(--head);font-weight:700;font-size:clamp(1.65rem,4.4vw,2.5rem);
  line-height:1.45;letter-spacing:.1em;margin-bottom:.7em}
.heading small{display:block;font-size:.56em;letter-spacing:.12em;margin-bottom:.15em}
.text{font-size:clamp(.95rem,1.8vw,1.06rem)}
.lead,.text,.flow-body p{line-break:strict;word-break:auto-phrase;text-wrap:pretty}

.lead-in{font-size:clamp(.98rem,1.9vw,1.12rem)}
.back{margin-top:clamp(28px,4vw,44px);text-align:center}
.btn-line{display:inline-flex;align-items:center;gap:.9em;padding:.85em 2.2em;border:1px solid var(--gold);border-radius:999px;
  color:var(--head);text-decoration:none;font-size:.92rem;letter-spacing:.12em;line-height:1.4;background:var(--paper);
  transition:background .35s,color .35s,box-shadow .35s}
.btn-line span{transition:transform .35s var(--ease)}
.btn-line:hover{background:var(--head);color:#fff;box-shadow:0 12px 26px -16px rgba(0,0,0,.5)}
.btn-line:hover span{transform:translateX(-4px)}

/* スクロール表示 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.show{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.15s}

/* ---------- 取り組みの流れ ---------- */
.flow{margin-top:clamp(24px,4vw,36px);padding:clamp(20px,3.4vw,34px) clamp(18px,4vw,44px) clamp(10px,2vw,18px);
  background:linear-gradient(180deg,var(--sage-100),#edf2e4);border:1px solid var(--sage-line);border-radius:8px;
  box-shadow:0 18px 40px -30px rgba(29,70,54,.45)}
.flow-title{display:flex;align-items:center;gap:18px;color:var(--head);font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.3rem);letter-spacing:.14em;line-height:1.4}
.flow-title::before,.flow-title::after{content:"";flex:1;height:1px;background:var(--gold)}
.flow-item{position:relative;display:flex;align-items:center;gap:clamp(16px,3vw,30px);
  padding:clamp(14px,2.2vw,20px) 0;border-top:1px solid #dcd6bd;
  opacity:0;transform:translateX(-18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.flow-item:first-child{border-top:0}
.flow.show .flow-item{opacity:1;transform:none}
.flow.show .flow-item:nth-child(1){transition-delay:.25s}
.flow.show .flow-item:nth-child(2){transition-delay:.55s}
.flow.show .flow-item:nth-child(3){transition-delay:.85s}
.flow-num{position:relative;flex:none;width:clamp(52px,8vw,66px);aspect-ratio:1/1;display:grid;place-items:center;
  border-radius:50%;background:var(--paper)}
.flow-num svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.flow-num circle{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:189;stroke-dashoffset:189;
  transition:stroke-dashoffset 1.3s var(--ease)}
.flow.show .flow-item:nth-child(1) circle{stroke-dashoffset:0;transition-delay:.35s}
.flow.show .flow-item:nth-child(2) circle{stroke-dashoffset:0;transition-delay:.65s}
.flow.show .flow-item:nth-child(3) circle{stroke-dashoffset:0;transition-delay:.95s}
.flow-num b{position:relative;color:var(--gold-d);font-weight:500;font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:.04em;line-height:1}
.flow-body{position:relative;padding-left:clamp(16px,3vw,30px);flex:1;min-width:0}
.flow-body::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--sage-line)}
.flow-body h3{color:var(--head);font-size:clamp(1.05rem,2.3vw,1.3rem);letter-spacing:.1em;line-height:1.6}
.flow-body p{font-size:clamp(.86rem,1.6vw,.98rem);line-height:1.8;color:var(--ink)}

/* ---------- 写真 ---------- */
/* クリップ演出は内側の .photo-frame に掛ける（外側を監視対象にしてスクロール検知を確実にする） */
.photo{margin:clamp(6px,1.4vw,12px) 0 clamp(18px,3vw,28px)}
.photo.reveal{opacity:1;transform:none}
.photo-frame{position:relative;border-radius:10px;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 24px 50px -30px rgba(80,60,10,.55);
  clip-path:inset(0 100% 0 0 round 10px);transition:clip-path 1.5s var(--ease)}
.photo.show .photo-frame{clip-path:inset(0 0 0 0 round 10px)}
.photo img{display:block;width:100%;transform:scale(1.12);transition:transform 2.6s var(--ease)}
.photo.show img{transform:scale(1)}
.photo-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,250,225,.55) 50%,rgba(255,255,255,0) 60%);
  background-size:260% 100%;background-position:130% 0}
.photo.show .photo-frame::after{animation:shine 2.2s ease 1.2s 1 both}

/* ---------- フッター ---------- */
.site-footer{position:relative;margin-top:clamp(24px,4vw,40px);background:linear-gradient(180deg,rgba(241,244,234,0),var(--sage-200) 70%)}
.footer-field{position:relative;height:clamp(120px,20vw,210px);overflow:hidden}
.rice-foot-l{left:-3%;bottom:-18%;width:clamp(150px,24vw,300px);aspect-ratio:1/1}
.rice-foot-r{right:-3%;bottom:-18%;width:clamp(170px,27vw,340px);aspect-ratio:1/1}
.footer-brand{position:absolute;left:0;right:0;top:clamp(60px,11vw,120px);text-align:center}
.footer-brand img{height:clamp(46px,7vw,60px);width:auto}
.footer-bar{background:var(--fj-blue);color:#fff;display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;
  justify-content:space-between;padding:14px max(24px,calc((100% - 1072px)/2));font-size:.82rem;letter-spacing:.08em;line-height:1.6}
.footer-link{color:#fff;text-decoration:none;display:inline-flex;gap:.5em}
.footer-link span{transition:transform .3s var(--ease)}
.footer-link:hover span{transform:translateX(4px)}
.footer-bar small{font-size:.74rem;opacity:.8;font-family:Georgia,"Times New Roman",serif}


/* =========================================================
   theme-fj : 一覧（ハブ）ページ。公式HPのFJカラー（青 #1653a5 / 紺 #0e3970）＋金の差し色
   ========================================================= */
.theme-fj{--head:#0e3970;--cream:#f7f9fc;--ink:#2b3444;--sage-line:#ccd4de}
.theme-fj .site-header{background:rgba(14,57,112,.96);border-bottom-color:transparent}
.theme-fj .site-header.scrolled{border-color:transparent;box-shadow:0 8px 26px -14px rgba(0,16,82,.7)}
.theme-fj .nav-current{color:#fff}
.theme-fj .nav-home{color:#dbe6f7}
.hero-fj{background:linear-gradient(160deg,#0a2a5c 0%,#0e3970 38%,#1653a5 78%,#2f7fd0 100%);
  min-height:clamp(340px,42vw,500px)}
.hero-fj .hero-title,.hero-fj .hero-sub{color:#fff}
.hero-fj .hero-title{text-shadow:0 2px 24px rgba(0,16,82,.45)}
.hero-fj .eyebrow{color:var(--gold-l)}
.hero-fj .hero-rule{background:linear-gradient(90deg,var(--gold-l),rgba(230,216,174,.15))}
.fj-glow{position:absolute;inset:0;
  background:radial-gradient(60% 80% at 88% 8%,rgba(255,236,170,.28) 0%,rgba(255,236,170,0) 60%),
             radial-gradient(50% 60% at 10% 100%,rgba(90,170,255,.25) 0%,rgba(90,170,255,0) 70%)}
.fj-waves{position:absolute;left:0;bottom:-2px;width:200%;height:58%;will-change:transform}
.wave{transform-box:fill-box}
.wave-3{fill:rgba(255,255,255,.06);animation:waveX 26s linear infinite}
.wave-2{fill:rgba(255,255,255,.08);animation:waveX 19s linear infinite reverse}
.wave-1{fill:rgba(255,255,255,.12);animation:waveX 13s linear infinite}
.hero-fj .mote{background:radial-gradient(circle,#fff6cf 0%,rgba(255,226,140,.55) 45%,rgba(255,226,140,0) 72%)}

.wrap-wide{max-width:1040px}
.sec-head{text-align:center;margin-bottom:clamp(22px,4vw,40px)}
.sec-en{font-family:var(--en);color:var(--gold-d);font-size:clamp(.78rem,1.4vw,.95rem);letter-spacing:.36em;line-height:1.6}
.sec-title{color:var(--head);font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:.14em;line-height:1.5}
.sec-title::after{content:"";display:block;width:44px;height:1px;background:var(--gold);margin:14px auto 0}

.activity{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--paper);color:inherit;text-decoration:none;
  border-radius:6px;overflow:hidden;border:1px solid #e3e8f0;
  box-shadow:0 30px 60px -40px rgba(14,57,112,.55);transition:box-shadow .5s var(--ease),transform .5s var(--ease),opacity .95s var(--ease)}
.activity + .activity{margin-top:clamp(20px,3vw,32px)}
.activity--rev .activity-photo{order:2}
.activity-photo{position:relative;overflow:hidden;min-height:100%}
.activity-photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease)}
.activity-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(14,57,112,.18),rgba(14,57,112,0) 55%);transition:opacity .6s}
.activity-body{position:relative;padding:clamp(22px,3.6vw,44px) clamp(20px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center}
.activity-no{display:flex;align-items:baseline;gap:12px;font-family:var(--en);color:var(--gold-d);letter-spacing:.3em;font-size:.78rem;line-height:1}
.activity-no b{font-weight:400;font-size:2rem;letter-spacing:.06em;color:var(--gold)}
.activity-title{color:var(--head);font-size:clamp(1.3rem,2.7vw,1.8rem);line-height:1.55;letter-spacing:.1em;margin:.55em 0 .6em}
.activity-text{font-size:clamp(.9rem,1.5vw,.98rem);line-height:1.95;line-break:strict}
.activity-more{display:flex;align-items:center;gap:16px;margin-top:1.5em;color:var(--fj-blue);font-size:.92rem;letter-spacing:.16em;line-height:1}
.more-arrow{position:relative;width:54px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.more-arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.activity:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px rgba(14,57,112,.7)}
.activity:hover .activity-photo img{transform:scale(1.08)}
.activity:hover .activity-photo::after{opacity:0}
.activity:hover .more-arrow{width:84px}
.activity:focus-visible{outline:2px solid var(--fj-blue);outline-offset:4px}

.future{text-align:center;padding:clamp(26px,4.4vw,48px) clamp(18px,4vw,48px);background:linear-gradient(180deg,#eff4fc,#f5f9ff);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.future .text{text-wrap:balance;word-break:auto-phrase}
.future-title{color:var(--head);font-size:clamp(1.3rem,3vw,1.75rem);letter-spacing:.14em;line-height:1.5;margin-bottom:.8em}
.theme-fj .site-footer{margin-top:clamp(40px,6vw,72px);background:#0e3970}
.footer-brand-fj{text-align:center;padding:clamp(30px,5vw,48px) 0 clamp(24px,4vw,36px)}
.footer-brand-fj img{height:clamp(46px,7vw,60px);width:auto}
.theme-fj .footer-bar{background:#0a2a5c}

/* ---------- keyframes ---------- */
@keyframes charIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes ruleIn{to{transform:translateX(var(--tx,0)) scaleX(1)}}
.nav-current::after{--tx:-50%}
@keyframes decoIn{from{opacity:0;transform:translateX(24px)}to{opacity:.75;transform:none}}
@keyframes riceIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes sway{from{transform:rotate(var(--r0,-1.6deg))}to{transform:rotate(var(--r1,2deg))}}
@keyframes moteUp{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.9}
  80%{opacity:.6}
  100%{opacity:0;transform:translate3d(var(--dx,20px),calc(-1 * var(--rise,320px)),0) scale(1.15)}}
@keyframes waveX{to{transform:translateX(-50%)}}
@keyframes shine{to{background-position:-30% 0}}

/* ---------- レスポンシブ ---------- */
@media (max-width:640px){
  :root{--header-h:56px}
  body{line-height:1.95;letter-spacing:.03em}
  .sp{display:inline}.pc{display:none}
  .header-inner{padding:0 16px}
  .brand img{height:36px}
  .nav-home{display:none}
  .hero{min-height:340px;align-items:flex-start}
  .hero-inner{padding:48px 20px 0}
  .hero-rule{width:74%}
  .rice-hero{right:-14%;bottom:-6%;width:60vw}
  .wrap{padding:0 20px}
  .lead,.text,.flow-body p{word-break:normal;text-wrap:wrap}
  .flow-title{gap:12px}
  .flow-body h3{font-size:1rem;letter-spacing:.03em}
  .footer-bar{justify-content:center;text-align:center}
  .hero-fj{min-height:320px;align-items:center}
  .hero-fj .hero-inner{padding:40px 20px 70px}
  .page-rice .hero{min-height:400px}
  .page-rice .hero-inner{padding-top:28px}
  .activity{grid-template-columns:1fr}
  .activity--rev .activity-photo{order:0}
  .activity-photo{aspect-ratio:16/10}
}

/* ---------- 動きを減らす設定の尊重 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-title .ch,.hero-sub,.crumb,.eyebrow,.rice-hero,.reveal,.flow-item{opacity:1;transform:none;filter:none}
  .hero-rule,.rule.reveal,.nav-current::after{transform:scaleX(1)}
  .nav-current::after{transform:translateX(-50%)}
  .hero-deco{opacity:.75}
  .flow-num circle{stroke-dashoffset:0}
  .photo-frame{clip-path:none}.photo img{transform:none}
  .motes{display:none}
}