/* ============================================================
   食百年の会 第19期 LP
   和モダン・明朝エディトリアル。メルマガ（緑#2E7D32／橙#D45A12）と世界観を揃える。
   ============================================================ */

:root{
  --green:#1e5a3c;
  --green-l:#2E7D32;
  --orange:#D45A12;
  --ink:#232320;
  --ink2:#3C382F;
  --ink3:#5C574E;
  --mute:#8C8579;
  --line:#E3DCCF;
  --bg:#FBF8F1;
  --bg2:#F4EFE4;
  --white:#fff;
  --mincho:'Hiragino Mincho ProN','Yu Mincho',YuMincho,'游明朝',serif;
  --gothic:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink2);font-family:var(--gothic);line-height:1.9;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-l)}

/* ---- ヘッダー ---- */
.hd{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--white);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hd-logo{height:34px;width:auto}
.hd-term{font-family:var(--mincho);font-size:14px;font-weight:bold;color:var(--green);letter-spacing:.08em}

/* ---- ヒーロー（動画＋筆文字）---- */
.hero{position:relative;min-height:min(92svh,780px);display:flex;align-items:center;justify-content:center;
  padding:78px 20px 96px;text-align:center;color:#fff;overflow:hidden;background:#14372a}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video.novideo{display:none}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,38,26,.62) 0%,rgba(12,38,26,.48) 45%,rgba(10,32,22,.82) 100%)}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.hero-term{font-family:Georgia,serif;font-size:12px;letter-spacing:.34em;opacity:.9;margin:0 0 30px;font-weight:bold}

/* 筆文字（透過PNG）。白背景を透過にしたものを images/fueki-ryuko.png に置く */
.hero-brush{width:auto;height:clamp(200px,44svh,340px);margin:0 auto;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.45));
  animation:brushIn 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes brushIn{
  0%{opacity:0;transform:translateY(18px) scale(.97);filter:blur(6px) drop-shadow(0 6px 22px rgba(0,0,0,.45))}
  100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 6px 22px rgba(0,0,0,.45))}
}
.hero-theme{font-family:var(--mincho);font-size:clamp(48px,14vw,86px);font-weight:bold;margin:0;
  letter-spacing:.18em;line-height:1.15;text-indent:.18em;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.hero-sub{font-family:var(--mincho);font-size:clamp(15px,4vw,20px);margin:22px 0 0;opacity:.95;letter-spacing:.14em}
.hero-rule{width:44px;height:1px;background:rgba(255,255,255,.55);margin:26px auto 0}
.hero-lead{font-family:var(--mincho);font-size:clamp(14px,3.6vw,16px);line-height:2.2;margin:24px 0 0;opacity:.93}
.hero-cta{display:inline-block;margin-top:34px;background:rgba(255,255,255,.96);color:var(--green);
  text-decoration:none;font-weight:bold;font-size:15px;letter-spacing:.06em;padding:15px 38px;border-radius:999px;
  transition:transform .25s,box-shadow .25s;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.34)}

.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  width:1px;height:46px;background:rgba(255,255,255,.28);overflow:hidden}
.scroll-cue span{display:block;width:100%;height:14px;background:#fff;animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-16px)}60%{transform:translateY(46px)}100%{transform:translateY(46px)}}

/* ---- スクロールアニメーション ----
   .anim-ready（JSが動いた証）が付いている時だけ隠す。
   JSが止まっても本文が消えないようにするための安全策。 */
.anim-ready .anim{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.anim-ready .anim.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .anim{opacity:1!important;transform:none!important;transition:none!important}
  .hero-brush{animation:none}
  .scroll-cue{display:none}
}

/* ---- セクション共通 ---- */
.sec{padding:56px 20px}
.sec-alt{background:var(--bg2)}
.wrap{max-width:820px;margin:0 auto}
.sec-eyebrow{font-family:Georgia,'Times New Roman',serif;font-size:11.5px;letter-spacing:.32em;
  color:var(--orange);font-weight:bold;margin:0 0 8px}
.sec-title{font-family:var(--mincho);font-size:clamp(21px,5.4vw,27px);color:var(--ink);margin:0 0 26px;
  font-weight:bold;letter-spacing:.05em;border-bottom:2px solid var(--green);padding-bottom:12px}
.sub-title{font-family:var(--mincho);font-size:17px;color:var(--green);margin:34px 0 14px;
  padding-left:12px;border-left:3px solid var(--green)}
.lead-sm{font-family:var(--mincho);font-size:15.5px;line-height:2.05;margin:0 0 20px}
.note{font-size:12.5px;color:var(--mute);line-height:1.8;margin:14px 0 0}
.draft-note{background:#FFF6E5;border:1px solid #F0DFB8;color:#8a6d1b;font-size:12.5px;
  padding:9px 13px;border-radius:6px;margin:0 0 20px}
.prep{background:var(--white);border:1px dashed var(--line);border-radius:8px;padding:26px;
  text-align:center;color:var(--mute);font-size:14px}

/* ---- 会長メッセージ ---- */
.msg{font-family:var(--mincho);font-size:16px;line-height:2.1;color:var(--ink2)}
.msg p{margin:0 0 16px}
.msg-quote{text-align:center;font-size:18px;color:var(--green);letter-spacing:.04em;margin:22px 0}
.msg-sign{text-align:right;font-size:14.5px;color:var(--ink3);margin-top:24px}

/* ---- 不易／流行 ---- */
.fueki-ryuko{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.fr-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px 18px}
.fr-fueki{border-top:3px solid var(--green)}
.fr-ryuko{border-top:3px solid var(--orange)}
.fr-label{font-family:var(--mincho);font-size:23px;font-weight:bold;margin:0;letter-spacing:.1em}
.fr-fueki .fr-label{color:var(--green)}
.fr-ryuko .fr-label{color:var(--orange)}
.fr-desc{font-size:12px;color:var(--mute);margin:2px 0 12px}
.fr-card ul{margin:0;padding-left:1.1em;font-size:14.5px;line-height:2}
.fr-card li{color:var(--ink2)}

/* ---- 体制 ---- */
.org{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.org-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.org-row:last-child{border-bottom:none}
.org-role{font-size:12.5px;color:var(--mute);min-width:110px;font-weight:bold}
.org-name{font-family:var(--mincho);font-size:17px;color:var(--ink);font-weight:bold;letter-spacing:.04em}

/* ---- 総会 ---- */
.soukai-head{display:flex;align-items:center;gap:20px;background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:22px;flex-wrap:wrap}
.soukai-date{text-align:center;flex-shrink:0}
.sd-y{display:block;font-family:Georgia,serif;font-size:13px;color:var(--mute);letter-spacing:.1em}
.sd-md{display:block;font-family:var(--mincho);font-size:34px;font-weight:bold;color:var(--green);line-height:1.25}
.sd-md small{font-size:15px;margin:0 1px}
.sd-w{display:block;font-size:12px;color:var(--mute)}
.soukai-place{flex:1;min-width:200px;border-left:1px solid var(--line);padding-left:20px}
.sp-name{font-family:var(--mincho);font-size:17px;font-weight:bold;color:var(--ink);margin:0}
.sp-sub{font-size:13px;color:var(--mute);margin:4px 0 0}

.lecture{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lec-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px 18px;position:relative}
.lec-part{font-size:12px;color:var(--orange);font-weight:bold;letter-spacing:.06em;margin:0 0 10px}
.lec-name{font-family:var(--mincho);font-size:21px;font-weight:bold;color:var(--ink);margin:0;letter-spacing:.04em}
.lec-belong{font-size:12.5px;color:var(--mute);margin:5px 0 12px}
.lec-theme{font-family:var(--mincho);font-size:15px;color:var(--ink2);margin:0;line-height:1.8}
.lec-tag{display:inline-block;font-size:11px;font-weight:bold;padding:3px 11px;border-radius:99px;margin:12px 0 0}
.tag-fueki{background:#E8F0E9;color:var(--green)}
.tag-ryuko{background:#FBEDE3;color:var(--orange)}

.tt{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tt td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.tt tr:last-child td{border-bottom:none}
.tt-time{font-family:Georgia,serif;color:var(--green);font-weight:bold;width:88px;white-space:nowrap}

/* ---- 年間予定 ---- */
.sch{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sch-row{display:flex;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:baseline;flex-wrap:wrap}
.sch-row:last-child{border-bottom:none}
.sch-row.fixed{background:#F5FAF6}
.sch-when{font-family:var(--mincho);font-size:14.5px;color:var(--green);font-weight:bold;min-width:190px}
.sch-when small{font-size:12px;color:var(--mute);font-weight:normal}
.sch-what{font-size:14.5px;color:var(--ink2);flex:1}
.badge-fixed{display:inline-block;background:var(--green);color:#fff;font-size:10.5px;font-weight:bold;
  padding:2px 8px;border-radius:99px;margin-left:8px;vertical-align:middle}

/* ---- 前期の歩み ---- */
.hist{border-left:2px solid var(--line);padding-left:20px;margin-left:6px}
.hist-item{position:relative;padding-bottom:22px}
.hist-item::before{content:'';position:absolute;left:-27px;top:7px;width:10px;height:10px;
  border-radius:50%;background:var(--green);border:2px solid var(--bg2)}
.hist-when{display:block;font-family:Georgia,serif;font-size:12.5px;color:var(--orange);
  font-weight:bold;letter-spacing:.08em;margin-bottom:2px}
.hist-item p{margin:0;font-size:15px;line-height:1.85}
.hist-item small{color:var(--mute);font-size:12.5px}

/* ---- 会費 ---- */
.fee{background:var(--white);border:2px solid var(--green);border-radius:10px;padding:26px;text-align:center}
.fee-amount{font-family:var(--mincho);font-size:clamp(22px,6vw,29px);font-weight:bold;color:var(--green);margin:0}
.fee-note{font-size:13px;color:var(--ink3);line-height:1.9;margin:12px 0 0}

/* ---- 継続確認 ---- */
.sec-cta{background:linear-gradient(170deg,#20573c 0%,#17462f 100%);color:#fff}
.sec-cta .sec-eyebrow{color:#ffd9a8}
.sec-cta .sec-title{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.renew-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:26px 22px}
.rn-msg{font-family:var(--mincho);font-size:16px;margin:0;line-height:1.9}
.rn-sub{font-size:13px;opacity:.8;margin:10px 0 0}
.rn-who{margin-bottom:6px}
.rn-co{display:block;font-size:13px;opacity:.85}
.rn-name{display:block;font-family:var(--mincho);font-size:21px;font-weight:bold;letter-spacing:.04em}
.rn-deadline{font-size:13.5px;margin:12px 0 22px;opacity:.95}
.rn-deadline b{color:#ffd9a8}

.choices{display:grid;gap:10px;margin-bottom:22px}
.choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.96);border:2px solid transparent;border-radius:10px;
  padding:16px 18px;font-family:inherit;font-size:16px;color:var(--ink);transition:.15s}
.choice .ch-mark{font-size:13px;color:#c9c9c9}
.choice.on{border-color:#ffd9a8;box-shadow:0 0 0 3px rgba(255,217,168,.28)}
.choice-keep.on .ch-mark{color:var(--green-l)}
.choice-hold.on .ch-mark{color:#E6A100}
.choice-leave.on .ch-mark{color:#C0392B}
.choice:hover{transform:translateY(-1px)}

.rn-label{display:block;font-size:13px;margin-bottom:6px;opacity:.9}
#rnComment{width:100%;padding:12px;border:1px solid rgba(255,255,255,.3);border-radius:8px;
  font-family:inherit;font-size:15px;line-height:1.8;background:rgba(255,255,255,.95);color:var(--ink2);resize:vertical}
.rn-error{color:#ffc9c0;font-size:13.5px;min-height:1.2em;margin:10px 0 0}
.submit-btn{width:100%;margin-top:10px;background:#fff;color:var(--green);border:none;border-radius:10px;
  padding:17px;font-size:16.5px;font-weight:bold;font-family:inherit;cursor:pointer;letter-spacing:.04em}
.submit-btn:disabled{opacity:.5;cursor:not-allowed}
.rn-hint{font-size:12.5px;opacity:.82;line-height:1.8;margin:14px 0 0}

.done-check{font-size:44px;color:#ffd9a8;margin:0;line-height:1}
.done-title{font-family:var(--mincho);font-size:20px;font-weight:bold;margin:8px 0 12px}
.done-body{font-size:15px;margin:0;line-height:1.9}
.done-at{font-size:13px;opacity:.8}
.done-sub{font-size:13px;opacity:.8;margin:14px 0 0}

/* ---- 入会 ---- */
.join-note{background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;font-size:13px;color:var(--ink3)}

/* ---- フッター ---- */
.ft{background:#1a1916;color:#cfcabd;text-align:center;padding:34px 20px}
.ft-name{font-family:var(--mincho);font-size:15px;margin:0 0 8px;color:#fff}
.ft-contact{font-size:13.5px;margin:0 0 18px}
.ft-contact a{color:#9fd4b0}
.ft-copy{font-size:11.5px;opacity:.55;margin:0}

/* ---- スマホ ---- */
@media (max-width:620px){
  .sec{padding:42px 18px}
  .fueki-ryuko{grid-template-columns:1fr}
  .lecture{grid-template-columns:1fr}
  .soukai-place{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  .sch-when{min-width:100%}
  .org-role{min-width:92px}
}

/* ---- 年間予定：ハイライト行 ---- */
.sch-row.highlight{background:#FFF8EE}
.badge-new{display:inline-block;background:var(--orange);color:#fff;font-size:10px;font-weight:bold;
  padding:2px 8px;border-radius:99px;margin-left:8px;letter-spacing:.08em;vertical-align:middle}

/* ---- 入会：魅力の3点 ---- */
.join-merit{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 30px}
.jm{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px 18px;
  transition:transform .3s,box-shadow .3s}
.jm:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(30,90,60,.10)}
.jm-no{font-family:Georgia,serif;font-size:26px;color:var(--orange);font-weight:bold;letter-spacing:.04em}
.jm p{margin:8px 0 0;font-size:14px;line-height:1.85;color:var(--ink2)}

/* ---- 入会フォーム ---- */
.join-form{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:26px 22px}
.jf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jf-item{display:block}
.jf-full{margin-top:16px}
.jf-label{display:block;font-size:12.5px;color:var(--ink3);font-weight:bold;margin-bottom:6px}
.jf-label b{background:var(--orange);color:#fff;font-size:10px;padding:1px 6px;border-radius:3px;
  margin-left:6px;font-weight:bold;letter-spacing:.06em}
.join-form input,.join-form select,.join-form textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:15px;color:var(--ink2);background:#FDFCF8;transition:border-color .2s,box-shadow .2s}
.join-form input:focus,.join-form select:focus,.join-form textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,90,60,.12)}
.join-form textarea{resize:vertical;line-height:1.8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jf-error{color:#C0392B;font-size:13.5px;min-height:1.2em;margin:14px 0 0}
.submit-dark{background:var(--green);color:#fff;margin-top:6px}
.submit-dark:hover{background:#17462f}
.join-done{background:var(--white);border:2px solid var(--green);border-radius:12px;padding:34px 22px;text-align:center}
.done-check.dark{color:var(--green)}
.done-title.dark{color:var(--ink)}
.done-body.dark{color:var(--ink2)}

@media (max-width:620px){
  .join-merit{grid-template-columns:1fr}
  .jf-grid{grid-template-columns:1fr}
  .hero{min-height:auto;padding:64px 18px 84px}
}

/* ---- 活動の様子ギャラリー ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ga{margin:0;border-radius:10px;overflow:hidden;background:#e8e4d8}
.ga img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ga:hover img{transform:scale(1.04)}
.ga-wide{grid-column:span 2}
.ga-wide img{aspect-ratio:16/9}
@media (max-width:620px){
  .gallery{grid-template-columns:1fr 1fr}
  .ga-wide{grid-column:span 2}
}