/* 下層ページで使う見た目（/about/・/activities/ など）。共通の部品（ナビ・ボタン・見出しの出方・写真）は common.css */

/* ---------- ページの頭 ---------- */
/* パンくずはナビのすぐ下あたりに置き、タイトルとの間を広めにとる */
.pg-head{padding:116px var(--gut) 64px}
/* ページの頭のすぐ下のセクションは、どのページでも上の余白をそろえる（目次から最初のセクションまでが間延びしないように） */
.pg-head + section{padding-top:72px}
/* パンくずは右端に寄せる（左は大きなページ名で始めたいので、目印は控えめに右へ） */
.pg-crumb{margin:0 0 64px;text-align:right;font-size:12px;letter-spacing:.08em;color:var(--mute)}
.pg-crumb a{color:var(--mute)}
.pg-crumb span{margin:0 10px}
/* ページの頭の ∞（TOP の線画と同じ形）。右上の空いたところに大きく置き、ページ名の後ろに回す */
/* ∞ は下の概要まではみ出させる（縦は切らない。横は画面からはみ出さないよう切る）。概要の文字は線より手前に出す */
.pg-head{position:relative;overflow-x:clip;overflow-y:visible}
.pg-head + section{position:relative;z-index:1}
.pg-head>*:not(.pg-orb){position:relative;z-index:1}
.pg-orb{position:absolute;z-index:0;top:0;right:0;width:min(66vw,1040px);will-change:transform;aspect-ratio:1280/880;perspective:1100px;perspective-origin:50% 30%;pointer-events:none}
.pg-orb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotateX(46deg) rotateZ(-14deg)}
.pg-orb path{fill:none;stroke:var(--ink);stroke-width:var(--sw,1.2px)}
.pg-orb .orb-dot{opacity:0;animation:orb-fade .6s ease 1.7s forwards}
.pg-orb .orb-dot circle{fill:var(--ink)}
/* スマホは小さめにして、右上（パンくずの下）に収める */
@media (max-width:760px){.pg-orb{top:70px;right:-8vw;width:78vw}}
.pg-ja{margin:28px 0 0;font-weight:400;font-size:clamp(22px,2.2vw,30px);letter-spacing:.12em}
/* ページ内の目次。見出しへ飛べるよう、文字だけの控えめなリンクを横に並べる */
.pg-toc{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:64px;padding-top:28px;border-top:1px solid var(--rule)}
.pg-toc a{position:relative;font-size:14px;letter-spacing:.08em;color:var(--ink);padding-left:18px}
.pg-toc a::before{content:"↓";position:absolute;left:0;top:0;font-family:var(--en);color:var(--mute)}
.pg-toc a:hover{color:var(--mute)}

/* ---------- 各セクションの共通 ---------- */
.ab-sec{padding:140px var(--gut);scroll-margin-top:100px}
.ab-label .ab-en{margin:18px 0 0;font-family:var(--en);font-weight:400;font-size:32px;line-height:1;letter-spacing:.04em}
.ab-ja{margin:0;font-weight:400;letter-spacing:.1em;line-height:1.6}

/* 人物（写真はアプリから受け取る。いまは灰色の枠） */
.ab-person{margin:0}
.ab-ph-dummy{aspect-ratio:4/5;border-radius:8px;background:linear-gradient(135deg,#d9d9d9,#c5c5c5)}
/* 人物写真は顔が上寄りにあるので、4:5 に切るときは上側を残す */
.ab-person .ph>b{background-position:center 25%!important}
.ab-person figcaption{display:flex;flex-direction:column;gap:4px;margin-top:18px}
.ab-person figcaption small{font-size:12px;letter-spacing:.08em;color:var(--mute)}
.ab-person figcaption small:first-child{font-family:var(--en)}
.ab-person figcaption b{font-weight:400;font-size:20px;letter-spacing:.14em}

/* ---------- 00 概要：左に紹介文、右に基本情報の表 ---------- */
.ab-ov-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,7vw,120px);margin-top:72px;align-items:start}
.ab-ov-txt .ab-big{font-size:clamp(26px,3vw,42px)}
.ab-ov-txt p{margin:36px 0 0;font-size:16px;line-height:2.2}
.ab-ov-facts{margin:0;border-top:1px solid var(--ink)}
.ab-ov-facts>div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ab-ov-facts dt{font-size:13px;letter-spacing:.08em;color:var(--mute);padding-top:3px}
.ab-ov-facts dd{margin:0;font-size:16px;letter-spacing:.08em}
.ab-ov-facts dd b{font-family:var(--en);font-weight:400;font-size:22px;margin-right:2px}
/* 補足は改行せず、本文のすぐ後ろに小さく続ける */
.ab-ov-facts dd small{margin-left:4px;font-size:12px;color:var(--mute)}

/* ---------- 01 代表メッセージ ---------- */
.ab-msg-grid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(40px,7vw,120px);margin-top:72px;align-items:start}
.ab-msg-txt p{margin:0 0 1.6em;font-size:16px;line-height:2.2;max-width:40em}

/* ---------- 03 理念：濃い面（入会条件と同じ、ダークグレーの面に黒いカード） ---------- */
.ab-philo{padding:140px 36px}
.ab-philo-panel{background:var(--panel);border-radius:12px;padding:48px}
.ab-philo-in{background:var(--ink);color:var(--bg);border-radius:8px;padding:96px clamp(24px,5vw,80px)}
.ab-philo .dot{color:var(--mute)}
.ab-philo-list{margin:64px 0 0}
.ab-philo-list>div{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:32px;padding:40px 0;border-top:1px solid #3a3a3a}
.ab-philo-list dt{font-family:var(--en);font-weight:400;font-size:15px;letter-spacing:.1em}
.ab-philo-list dt small{display:block;margin-top:8px;font-family:var(--ja);font-size:12px;color:var(--mute)}
.ab-philo-list dd{margin:0}
.ab-philo-list dd .ab-ja{display:block;font-size:clamp(22px,2.4vw,32px)}
.ab-philo-list dd p{margin:12px 0 0;font-size:15px;line-height:2;color:var(--rule)}
.ab-values{list-style:none;margin:0;padding:0;display:grid;gap:28px}

/* ---------- 04 私たちの考え方：大きな一文 ---------- */
.ab-stance-body{margin-top:72px;max-width:52em}
.ab-big{margin:0;font-weight:400;font-size:clamp(28px,4vw,56px);line-height:1.5;letter-spacing:.08em}
.ab-stance-body p{margin:48px 0 0;font-size:17px;line-height:2.2}
.ab-stance-body p+p{margin-top:24px}

/* ---------- 運営メンバー ---------- */
/* CHAIRMAN と PRESIDENT は縦に並べ、それぞれ左に写真・右にメッセージ */
.ab-org-top{display:flex;flex-direction:column;gap:96px;margin-top:72px}
.ab-org-row{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.ab-org-catch{margin:0 0 28px;font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.7;letter-spacing:.08em}
.ab-org-msg p{margin:0 0 1.4em;font-size:16px;line-height:2.2;max-width:40em}
.ab-org-msg p:last-child{margin-bottom:0}
.ab-org-list{margin:80px 0 0}
.ab-org-list>div{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--rule)}
.ab-org-list>div:last-child{border-bottom:1px solid var(--rule)}
.ab-org-list dt{font-size:14px;letter-spacing:.08em;color:var(--mute)}
.ab-org-list dd{margin:0;display:flex;flex-wrap:wrap;gap:14px 40px}
.ab-org-list dd span{font-size:16px;letter-spacing:.12em}
.ab-org-list dd small{margin-left:12px;font-size:12px;color:var(--mute);letter-spacing:.06em}

/* ---------- 会員：人数と「全会員はこちら」だけ（氏名の一覧は /members/） ---------- */
.ab-members-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:48px;padding:40px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ab-members-lead{margin:0;font-size:16px;color:var(--mute)}
.ab-members-lead b{font-family:var(--en);font-weight:300;font-size:clamp(40px,4vw,56px);line-height:1;color:var(--ink);margin-right:6px}


/* ---------- スマホ・タブレット ---------- */
@media (max-width:1024px){
  .ab-ov-grid{grid-template-columns:1fr}
  .ab-philo-list>div{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
  .pg-head{padding:100px var(--gut) 48px}
  .pg-head + section{padding-top:48px}
  .ab-sec{padding:96px var(--gut)}
  .ab-msg-grid{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .ab-ov-grid{margin-top:48px}
  .ab-ov-txt p{font-size:15px}
  /* メッセージの人物：スマホは写真を左、肩書き・氏名・会社名を右の2カラムに */
  .ab-msg-grid .ab-person{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:end}
  .ab-msg-grid .ab-person figcaption{margin-top:0}
  .ab-msg-grid .ab-person figcaption b{font-size:18px}
  .ab-msg-txt p{font-size:15px}
  .ab-philo{padding:96px 8px}
  .ab-philo-panel{padding:8px}
  .ab-philo-in{padding:56px 22px}
  .ab-org-top{gap:64px;margin-top:48px}
  /* スマホは、写真（左）と肩書き・氏名（右）の2カラムの下にメッセージ */
  .ab-org-row{grid-template-columns:1fr;gap:24px}
  .ab-org-row .ab-person{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:end}
  .ab-org-row .ab-person figcaption{margin-top:0}
  .ab-org-row .ab-person figcaption b{font-size:18px}
  .ab-org-catch{margin-bottom:18px;font-size:20px}
  .ab-org-msg p{font-size:15px}
  /* 運営メンバーの一覧：スマホも、左に役職・右に氏名の2カラム。氏名の下に会社名を小さく */
  .ab-org-list>div{grid-template-columns:96px 1fr;gap:16px;padding:22px 0}
  .ab-org-list dt{font-size:12px;line-height:1.6;padding-top:3px}
  .ab-org-list dd{flex-direction:column;gap:14px}
  .ab-org-list dd span{font-size:15px;letter-spacing:.1em}
  .ab-org-list dd small{display:block;margin:4px 0 0;font-size:11px;letter-spacing:.04em}
  }

/* ======================================================================
   活動（/activities/）
   ====================================================================== */

/* 例会の1日：3つの時間帯を横に並べ、上の線でつなぐ */
/* 画面に入ると（.is-in）、線が左から引かれ、線が届いたところで点がはずむように現れ、続いて時刻と説明が下から出る。
   線は一定の速さ（1.2秒）で伸ばし、3つの点は線が届く 0／0.4／0.8 秒に出す（緩急をつけると点が線より先に出てしまう）。
   線は枠線ではなく ::before で描き、伸ばせるようにしている。--i は左からの順番（HTML に書いてある） */
.ac-day{position:relative;list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.ac-day::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s linear}
.ac-day.is-in::before{transform:none}
.ac-day li{position:relative;padding:40px 32px 0 0}
.ac-day li::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*.4s)}
.ac-day.is-in li::before{transform:none}
.ac-day li>*{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*.4s + .2s)}
.ac-day li>p{transition-delay:calc(var(--i,0)*.4s + .32s)}
.ac-day.is-in li>*{opacity:1;transform:none}
.ac-day time{display:block;font-family:var(--en);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:.02em}
.ac-day time small{margin-left:6px;font-size:.36em;color:var(--mute)}
.ac-day b{display:block;margin-top:24px;font-weight:400;font-size:20px;letter-spacing:.12em}
.ac-day p{margin:12px 0 0;font-size:15px;line-height:2}
/* セミナーのテーマの例：分野の小さなラベル＋テーマ名の一覧 */
.ac-ex{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.ac-ex-h{margin:0 0 12px;font-size:13px;letter-spacing:.08em;color:var(--mute)}
.ac-ex-list{list-style:none;margin:0;padding:0}
.ac-ex-list li{display:grid;grid-template-columns:76px 1fr;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.7}
.ac-ex-list li>span:first-child{font-size:11px;letter-spacing:.08em;color:var(--mute)}
.ac-note{margin:48px 0 0;font-size:14px;color:var(--mute)}

/* セミナー・ディスカッション・懇親会：左の写真は画面に貼り付けたまま（sticky）、右の文章だけが流れる。
   写真は3枚重ねておき、画面の中ほどにある文章に合わせて .is-on の1枚だけを見せる（切り替えは common.js） */
.ac-scroll{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.ac-stick{position:sticky;top:calc(50vh - min(17vw,260px))}
.ac-stack{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden}
/* 写真の切り替え：新しい写真が下からワイプで上がってきて、前の写真に重なる。
   前の写真は、上に重なりきるまで（.9秒）見せておき、そのあとで隠す（間に地の色が見えないように） */
.ac-sp{position:absolute;inset:0;z-index:1;clip-path:inset(100% 0 0 0);transition:clip-path 0s linear .9s}
.ac-sp.is-on{z-index:2;clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
/* 写真の下の「例会スケジュールはこちら」。写真と一緒に貼り付いたまま。スマホ用（.ac-sched-sp）は文章の最後に置き、PC では隠す */
.ac-sched{margin-top:24px}
.ac-sched-sp{display:none}
/* 文章1つぶんを画面の高さほどにして、1つずつ写真の横を通り過ぎるようにする */
/* 中身が画面の高さを超える段（セミナーのテーマの例など）でも、次の段との間があくよう、上下に余白をとる */
.ac-step{min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0;scroll-margin-top:0}
.ac-ph{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.ac-ph-sp{display:none}
.ac-txt .ab-ja{margin-top:48px;font-size:clamp(22px,2.4vw,32px)}
.ac-txt p{margin:28px 0 0;font-size:16px;line-height:2.2}

/* グループ：数字を大きく3つ */
.ac-stats{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ac-stats li{padding:44px 28px 40px;border-left:1px solid var(--rule)}
.ac-stats li:first-child{border-left:0;padding-left:0}
.ac-stats b{display:block;font-family:var(--en);font-weight:300;font-size:clamp(48px,5.6vw,84px);line-height:1;letter-spacing:-.01em}
.ac-stats b small{margin-left:6px;font-family:var(--ja);font-weight:400;font-size:.3em;letter-spacing:.06em}
.ac-stats span{display:block;margin-top:18px;font-size:15px;color:var(--mute)}
.ac-note2{margin:40px 0 0;max-width:44em;font-size:16px;line-height:2.2}
/* ディスカッションの文章の中に置くときは、列の幅に合わせて小さめにする */
.ac-txt .ac-stats{margin-top:40px}
.ac-txt .ac-stats li{padding:28px 20px 26px}
.ac-txt .ac-stats li:first-child{padding-left:0}
.ac-txt .ac-stats b{font-size:clamp(40px,4vw,60px)}
.ac-txt .ac-stats span{margin-top:12px;font-size:14px}
.ac-txt .ac-note2{margin-top:28px;font-size:15px}

@media (max-width:1024px){
  /* 1列のときは貼り付けをやめ、文章ごとに写真を上に置く */
  .ac-scroll{grid-template-columns:1fr}
  .ac-stick{display:none}
  .ac-ph-sp{display:block;margin-bottom:36px}
  /* 縦に並ぶ段の中では横いっぱいに伸びてしまうので、文字の幅に合わせる */
  .ac-sched-sp{display:inline-flex;align-self:flex-start;margin-top:40px}
  .ac-step{min-height:0;padding:0 0 96px}
  .ac-step:last-child{padding-bottom:0}
}
@media (max-width:760px){
  .ac-day{grid-template-columns:1fr;margin-left:4px;row-gap:40px}
  /* スマホは縦に並ぶので、線も上から下へ引く */
  .ac-day::before{right:auto;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:center top}
  .ac-day li{padding:0 0 0 28px}
  .ac-day li::before{left:-5px;top:14px}
  .ac-stats{grid-template-columns:1fr}
  .ac-stats li{border-left:0;padding:28px 0;border-top:1px solid var(--rule)}
  .ac-stats li:first-child{border-top:0}
  .ac-txt p{font-size:15px}
  /* 文章の中の数字（1グループの人数・組み替え）は、スマホでも2つ横に並べて1行に収める（2026-10-11 錦見さん） */
  .ac-txt .ac-stats{grid-template-columns:repeat(2,1fr)}
  .ac-txt .ac-stats li{padding:22px 0 20px 18px;border-top:0;border-left:1px solid var(--rule)}
  .ac-txt .ac-stats li:first-child{padding-left:0;border-left:0}
  .ac-txt .ac-stats b{font-size:40px}
  .ac-txt .ac-stats b small{margin-left:4px;font-size:12px}
  .ac-txt .ac-stats span{margin-top:10px;font-size:13px}
}

/* ======================================================================
   よくある質問（/qa/）
   ====================================================================== */
.qa-list{padding-top:40px}
.qa-group{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:40px;padding:56px 0;border-top:1px solid var(--ink);scroll-margin-top:100px}
.qa-group:last-child{border-bottom:1px solid var(--ink)}
.qa-gh{font-size:clamp(18px,1.6vw,22px)}
/* 答えの下に、くわしく書いてあるページへのボタン（サイト共通のボタンの形） */
.qa-body{flex:1}
.qa-link{margin-top:18px}
/* 答えの中で強調したい一文（読み込んでいる太さの中でいちばん太い 500 に） */
.qa-body strong{font-weight:500}
/* 質問は開いたり閉じたりできる（details）。ブラウザの三角は消して、右に＋を置く */
.qa-item{border-bottom:1px solid var(--rule)}
.qa-items{border-top:1px solid var(--rule)}
/* 質問の行：Q の頭は少し右に寄せる。載せると黒が左から敷かれ、文字・Q・＋が白くなる（ボタンと同じ動き） */
.qa-item summary{position:relative;isolation:isolate;display:flex;gap:20px;align-items:baseline;padding:26px 64px 26px 24px;cursor:pointer;list-style:none;transition:color .45s cubic-bezier(.65,0,.35,1)}
.qa-item summary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.qa-item summary:hover{color:var(--paper)}
.qa-item summary:hover::before{transform:none}
.qa-item summary .qa-q{transition:color .45s cubic-bezier(.65,0,.35,1)}
.qa-item summary:hover .qa-q{color:var(--rule)}
.qa-item summary:hover i::before,.qa-item summary:hover i::after{background:var(--paper)}
.qa-item summary::-webkit-details-marker{display:none}
.qa-q{flex:none;font-family:var(--en);font-weight:300;font-size:24px;line-height:1;color:var(--mute)}
.qa-t{font-size:17px;line-height:1.7;letter-spacing:.06em}
.qa-item summary i{position:absolute;right:24px;top:50%;width:16px;height:16px;translate:0 -50%}
.qa-item summary i::before,.qa-item summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);transition:transform .4s cubic-bezier(.2,.7,.2,1),background .45s ease}
.qa-item summary i::after{transform:rotate(90deg)}
.qa-item.is-open summary i::after{transform:rotate(0)}
/* A の上にも余白をとり、質問の行（載せると黒くなる）と答えがくっつかないようにする */
.qa-a{display:flex;gap:20px;padding:24px 64px 30px 24px;box-sizing:border-box}
.qa-a .qa-q{color:var(--ink)}
.qa-a p{margin:0;font-size:15px;line-height:2.1}
.qa-a a:not(.btn){text-decoration:underline;text-underline-offset:3px}

@media (max-width:1024px){
  .qa-group{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  .qa-group{padding:40px 0}
  .qa-item summary{padding:22px 48px 22px 14px;gap:14px}
  .qa-item summary i{right:14px}
  .qa-t{font-size:15px}
  .qa-a{padding:18px 0 24px 14px;gap:14px}
  /* 答えの中のボタンは、長い名前でも1行で収まるよう文字と余白を詰める */
  .qa-link{gap:12px;padding-left:16px;font-size:13px;letter-spacing:.04em}
  .qa-link i{width:44px}
}

/* ======================================================================
   会員紹介（/members/）
   ====================================================================== */
/* 会員一覧：氏名だけを、細い線で区切って並べる */
.mb-lead{margin:40px 0 0;font-size:15px;color:var(--mute)}
.mb-lead b{font-family:var(--en);font-weight:300;font-size:clamp(36px,3.6vw,52px);line-height:1;color:var(--ink);margin-right:6px}
.mb-lead small{margin-left:8px;font-size:12px}
/* 会員一覧：氏名の下に社名を小さく。社名は長いものがあるので、1人ぶんの幅を広めにとる */
.mb-names{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 32px;border-top:1px solid var(--rule)}
.mb-names li{padding:22px 0;border-bottom:1px solid var(--rule)}
.mb-names b{display:block;font-weight:400;font-size:17px;letter-spacing:.14em}
.mb-names small{display:block;margin-top:6px;font-size:12px;letter-spacing:.04em;color:var(--mute);line-height:1.6}
@media (max-width:760px){
  /* スマホも2列に（1列だと縦に長くなりすぎるため） */
  .mb-names{grid-template-columns:1fr 1fr;gap:0 16px}
  .mb-names li{padding:16px 0}
  .mb-names b{font-size:15px;letter-spacing:.1em}
  .mb-names small{font-size:11px;letter-spacing:.02em}
}

/* ======================================================================
   活動報告（/report/ と /report/{記事}/）
   ====================================================================== */
.rp-list-sec{padding-top:40px}
/* 一覧：写真のカードを3列に。写真はリンクなので、マウスを載せたときに色が付く（共通ルール） */
.rp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}
.rp-card{position:relative;display:block;color:var(--ink)}
.rp-card .ph{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.rp-meta{display:flex;align-items:center;gap:14px;margin-top:20px;font-family:var(--en);font-size:12px;letter-spacing:.06em;color:var(--mute)}
.rp-cat{padding:3px 10px;border:1px solid var(--rule);border-radius:4px;color:var(--ink)}
.rp-t{margin:12px 36px 0 0;font-size:16px;line-height:1.8;letter-spacing:.06em;transition:color .3s}
.rp-arrow{position:absolute;right:0;bottom:4px;font-family:var(--en);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rp-card:hover .rp-t{color:var(--mute)}
.rp-card:hover .rp-arrow{transform:translateX(4px)}
.rp-pager{display:flex;justify-content:center;gap:8px;margin-top:96px;font-family:var(--en);font-size:14px}
.rp-pager a,.rp-pager span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:4px;color:var(--ink)}
.rp-pager a:hover{background:var(--paper)}
.rp-pager .is-on{background:var(--ink);color:var(--bg)}
.rp-pager .is-off{color:var(--rule)}

/* 記事：読みやすい幅（約40字）に絞って中央に置く */
/* 記事ページ：幅はほかの下層ページと同じく左右の余白（--gut）いっぱい（2026-10-11 錦見さん）。本文は左に見出し・右に中身の2カラム */
.rp-article{padding:116px var(--gut) 160px}
.rp-head .rp-meta{margin-top:0}
.rp-title{margin:20px 0 0;font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.6;letter-spacing:.08em}
/* 幅を広げたので、高くなりすぎないよう横長に（スマホは 16:9 のまま） */
.rp-main{position:relative;aspect-ratio:21/9;margin-top:56px;border-radius:8px;overflow:hidden}
.rp-body{margin-top:72px}
.rp-sec{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(40px,7vw,120px);padding:48px 0;border-top:1px solid var(--rule)}
.rp-sec:first-child{border-top-color:var(--ink)}
.rp-h{display:flex;flex-direction:column;gap:8px;margin:0;font-weight:400;font-size:20px;letter-spacing:.1em}
.rp-h span{font-family:var(--en);font-size:13px;letter-spacing:.06em;color:var(--mute)}
.rp-sec-body>:first-child{margin-top:0!important}
/* 本文の中のリンクは下線で見分けられるように（ボタンは除く） */
.rp-sec-body a:not(.btn){text-decoration:underline;text-underline-offset:4px}
.rp-sec-body a:not(.btn):hover{color:var(--mute)}
.rp-body p{margin:28px 0 0;font-size:16px;line-height:2.2}
.rp-points{margin:28px 0 0;padding:0;list-style:none;counter-reset:pt}
.rp-points li{position:relative;padding:16px 0 16px 48px;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.9}
.rp-points li::before{counter-increment:pt;content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:var(--en);font-weight:300;font-size:15px;color:var(--mute)}
.rp-photos{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rp-photos .ph{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden}
.rp-next{font-size:18px!important;letter-spacing:.08em}
.rp-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:96px;padding-top:40px;border-top:1px solid var(--ink)}
.rp-prev{font-size:15px;letter-spacing:.06em;color:var(--ink)}
.rp-prev small{display:block;margin-bottom:6px;font-size:12px;color:var(--mute)}
.rp-prev:hover{color:var(--mute)}

@media (max-width:1024px){
  .rp-list{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .rp-list{grid-template-columns:1fr;gap:44px}
  .rp-article{padding:100px var(--gut) 100px}
  .rp-sec{grid-template-columns:1fr;gap:20px;padding:36px 0}
  .rp-body{margin-top:48px}
  .rp-main{margin-top:40px;aspect-ratio:16/9}
  .rp-body p,.rp-points li{font-size:15px}
  .rp-photos{gap:6px}
}

/* ======================================================================
   スケジュール（/schedule/）
   ====================================================================== */
/* 次回の例会：黒いカードに日付を大きく、右に1日の流れ */
.ev-next-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(40px,8vw,140px);margin-top:72px;padding:clamp(40px,5vw,72px);border-radius:8px;background:var(--panel);color:var(--bg)}
.ev-next-date{margin:0;display:flex;align-items:baseline;font-family:var(--en);white-space:nowrap}
.ev-next-date b{font-weight:300;font-size:clamp(72px,9vw,140px);line-height:.9;letter-spacing:-.01em}
.ev-next-date span{margin:0 10px 0 6px;font-family:var(--ja);font-size:clamp(16px,1.6vw,22px);letter-spacing:.06em}
/* 1日の流れは横1行に3つ並べる（時刻と枠の名前を続けて） */
.ev-next-day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:24px;border-top:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a}
.ev-next-day li{display:flex;gap:14px;align-items:baseline;padding:22px 0;white-space:nowrap}
.ev-next-btn{margin-top:36px}
.ev-next-day time{font-family:var(--en);font-weight:300;font-size:24px;color:var(--rule)}
.ev-next-day span{font-size:16px;letter-spacing:.1em}
/* 年間スケジュール：1回を1行に。終わった回は薄く、次回には印 */
/* 次回の例会 → 年間スケジュール：黒い面が広がって背景になる */
.ev-stage{position:relative}
/* 黒い面は、ステージ全体を覆う枠（.ev-dark-wrap）の中で画面に貼り付ける。
   枠で範囲を決めておかないと、年間スケジュールを過ぎたあとも下の帯の下まで黒がはみ出す */
.ev-dark-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
/* 広がる途中の面（.ev-dark-face）はページの中に置き、広がりきったら画面に貼り付く面（.ev-dark）に切り替える（common.js の growFx）。
   画面に貼り付けた面を JavaScript で動かすと、iPhone で指で弾いたときに止まって見えるため（2026-10-11） */
.ev-dark-face{position:absolute;left:0;top:0;background:var(--panel);transform-origin:0 0;will-change:transform}
.ev-dark{position:sticky;top:0;height:100vh;opacity:0}
/* 広がりきった形：フッターと同じく左右に 8px の余白、角は 8px の丸み */
.ev-dark i{position:absolute;top:0;bottom:0;left:8px;right:8px;border-radius:8px;background:var(--panel)}
.ev-stage>section{position:relative;z-index:1}
/* JS が動いているときは、カードの黒は .ev-dark が受け持つ（カード自身は透明に） */
.ev-stage.is-live .ev-next-card{background:transparent}
/* 広がりきったら、年間スケジュールを明るい文字に切り替える */
.ev-sched,.ev-sched .ev-list,.ev-sched .ev-list li,.ev-sched .ev-time{transition:color .5s ease,border-color .5s ease}
.ev-stage.is-dark .ev-sched{color:var(--paper)}
.ev-stage.is-dark .ev-sched .ev-list{border-top-color:var(--paper)}
.ev-stage.is-dark .ev-sched .ev-list li{border-bottom-color:rgba(246,247,248,.18)}
.ev-stage.is-dark .ev-sched .ev-time{color:#9a9a9a}
.ev-stage.is-dark .ev-sched .ev-list li.is-next .ev-state::before{background:var(--paper);color:var(--ink)}
/* 翌年以降の日程：見出しの行を押すと開く。開閉の動きは common.js（よくある質問と同じ作り） */
.ev-years{margin-top:72px;border-top:1px solid var(--ink)}
/* 古い「終了」の回は隠す（直近2回だけ残す。common.js） */
.ev-list li.is-old,.ev-year.is-empty{display:none}
.ev-year{border-bottom:1px solid var(--rule)}
.ev-year summary{position:relative;display:flex;align-items:center;justify-content:space-between;padding:32px 0;cursor:pointer;list-style:none}
.ev-year summary::-webkit-details-marker{display:none}
.ev-year summary .ab-en{font-family:var(--en);font-weight:400;font-size:32px;line-height:1;letter-spacing:.04em}
.ev-year summary i{position:relative;width:20px;height:20px;flex:none}
.ev-year summary i::before,.ev-year summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.ev-year summary i::after{transform:rotate(90deg)}
.ev-year.is-open summary i::after{transform:rotate(0)}
.ev-year summary:hover .ab-en{opacity:.6}
.ev-year-body{overflow:hidden;padding-bottom:40px}
.ev-year .ev-list{margin-top:0}
.ev-year-note{margin:20px 0 0;font-size:13px;color:var(--mute)}
.ev-stage.is-dark .ev-sched .ev-years{border-top-color:var(--paper)}
.ev-stage.is-dark .ev-sched .ev-year{border-bottom-color:rgba(246,247,248,.18)}
/* 開いた年の見出しの下の線は、行の区切りと同じ薄い線に（濃い線は一覧の頭だけ） */
.ev-year .ev-list{border-top-color:var(--rule)}
.ev-stage.is-dark .ev-sched .ev-year .ev-list{border-top-color:rgba(246,247,248,.18)}
.ev-list{list-style:none;margin:72px 0 0;padding:0;border-top:1px solid var(--ink)}
.ev-list li{display:grid;grid-template-columns:minmax(200px,280px) 1fr auto auto;align-items:baseline;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule);transition:opacity .3s}
.ev-list time{display:flex;align-items:baseline;white-space:nowrap}
.ev-list time b{font-family:var(--en);font-weight:300;font-size:32px;line-height:1}
.ev-list time span{margin:0 8px 0 4px;font-size:14px}
.ev-what{font-size:16px;letter-spacing:.12em}
.ev-time{font-family:var(--en);font-size:15px;color:var(--mute)}
.ev-state{min-width:56px;text-align:right;font-size:12px;letter-spacing:.08em}
.ev-list li.is-past{opacity:.35}
.ev-list li.is-past .ev-state::before{content:"終了"}
.ev-list li.is-next .ev-state::before{content:"次回";display:inline-block;padding:3px 10px;border-radius:4px;background:var(--ink);color:var(--bg)}
@media (max-width:1024px){
  .ev-next-card{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .ev-years{margin-top:48px}.ev-year summary{padding:24px 0}.ev-year summary .ab-en{font-size:24px}
  .ev-next-card{margin-top:48px;padding:36px 24px}
  /* スマホは横に入りきらないので縦に戻す */
  .ev-next-day{grid-template-columns:1fr;gap:0;border-bottom:0}
  .ev-next-day li{padding:16px 0;border-bottom:1px solid #3a3a3a}
  .ev-next-btn{margin-top:28px}
  .ev-list li{grid-template-columns:1fr auto;gap:6px 16px;padding:18px 0}
  .ev-list time b{font-size:26px}
  .ev-what{grid-column:1;font-size:14px}
  .ev-time{grid-column:2;grid-row:2;text-align:right}
  .ev-state{grid-column:2;grid-row:1}
}
/* 写真の帯：画面の端から端まで。5枚の幅と縦位置をずらして、雑誌の見開きのように並べる */
.mb-gallery{padding:40px 0 120px;overflow:hidden}
.mb-g-row{list-style:none;margin:0 -2vw;padding:0;display:grid;grid-template-columns:1.1fr .8fr 1.3fr .9fr 1fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.mb-g{position:relative;border-radius:8px;overflow:hidden;will-change:transform}
.mb-g.is-a{aspect-ratio:3/4;margin-top:8vw}
.mb-g.is-b{aspect-ratio:4/5;margin-top:0}
.mb-g.is-c{aspect-ratio:4/3;margin-top:14vw}
.mb-g.is-d{aspect-ratio:3/4;margin-top:3vw}
.mb-g.is-e{aspect-ratio:1/1;margin-top:11vw}
@media (max-width:760px){
  .mb-gallery{padding:24px 0 72px}
  /* スマホは2列に4枚（5枚目は出さない）。行で高さがそろうと片方の列だけ間が空くので、段組みで列ごとに積む。
     左の列（1・2枚目）と右の列（3・4枚目）は、右の列を少し下げて互い違いにする */
  .mb-gallery{padding:24px var(--gut) 120px}
  .mb-g-row{display:block;margin:0;column-count:2;column-gap:10px}
  .mb-g{break-inside:avoid;margin:0 0 10px!important}
  .mb-g.is-e{display:none}
  .mb-g.is-c,.mb-g.is-d{top:14vw}
}

/* リファーラル活動の図版：4つの段階を円でつなぐ線画。画面に入る（.fade.in）と、点 → 矢印 → 言葉の順に1段ずつ出る */
.rf-fig{margin:0;display:flex;justify-content:center;color:var(--ink)}
.rf-svg{width:100%;max-width:520px;height:auto;overflow:visible}
.rf-ring{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:2 6}
.rf-arc{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i)*.45s + .35s)}
.rf-dot{fill:var(--ink);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i)*.45s)}
.rf-lab{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*.45s + .15s)}
.rf-svg .en{font-family:var(--en);font-weight:300;font-size:26px;letter-spacing:.02em;fill:var(--ink)}
.rf-svg .ja{font-family:var(--ja);font-size:13px;letter-spacing:.12em;fill:var(--mute)}
.rf-center{opacity:0;transition:opacity 1s ease 2.1s}
.rf-center.en{font-size:22px}
.rf-fig.in .rf-arc{stroke-dashoffset:0}
.rf-fig.in .rf-dot{transform:none}
.rf-fig.in .rf-lab{opacity:1;transform:none}
.rf-fig.in .rf-center{opacity:1}
@media (max-width:1024px){.rf-fig{margin-top:24px}}

/* 写真のフィルム：同じ高さの写真を横一列に。幅は横長（is-w）と縦長（is-n）を交互にして、流れに強弱をつける */
.ac-film{padding:40px 0 120px;overflow:hidden}
.ac-film-track{list-style:none;margin:0;padding:0 var(--gut);display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform}
/* 写真を1枚ずつ別の層にしておく。白黒→カラーの効果（filter）が付いた写真を、流れるたびに描き直さないため（スマホでカクついた。2026-10-11） */
.ac-f{will-change:transform;transform:translateZ(0)}
/* 帯が画面の下から入って上へ抜けるまで（cover）のあいだに、列を右端から左端まで流す。流す距離 --over は common.js が測る */
.ac-film.is-sd{view-timeline-name:--acfilm}
.ac-film.is-sd .ac-film-track{animation:acFilm linear both;animation-timeline:--acfilm;animation-range:cover 0% cover 100%}
@keyframes acFilm{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--over,0px) * -1),0,0)}}
.ac-f>b{will-change:filter}
.ac-f{position:relative;flex:none;height:clamp(240px,30vw,440px);border-radius:8px;overflow:hidden}
.ac-f.is-w{aspect-ratio:3/2}
.ac-f.is-n{aspect-ratio:4/5}
@media (max-width:760px){
  .ac-film{padding:16px 0 72px}
  .ac-f{height:220px}
}

/* インフィニティとは：概要の下の「数字で見るインフィニティ」（TOP と同じ部品）。見出しはないので、上の余白は概要に続く程度に */
.ab-nums{padding-top:0;padding-bottom:40px}
.ab-nums .nb-grid{margin-top:0}

/* ======================================================================
   入会案内（/join/）
   ====================================================================== */
/* 入会の条件：TOP の入会条件の一覧（.req-b-list）を、理念と同じ濃い面に入れる。ボタンは白い面で使う前提なので、明るい色のまま */
#requirements .req-b-list{margin-top:56px}
/* 入会までの流れ：6つの段階を3列×2段に。上の線と番号で順番を示す */
.jn-flow{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}
.jn-flow li{padding-top:24px;border-top:1px solid var(--ink)}
.jn-flow em{display:block;font-style:normal;font-family:var(--en);font-weight:300;font-size:clamp(36px,3.4vw,52px);line-height:1;color:var(--ink)}
.jn-flow b{display:block;margin-top:20px;font-weight:400;font-size:19px;letter-spacing:.1em}
.jn-flow p{margin:12px 0 0;font-size:15px;line-height:2;color:var(--mute)}
/* お申し込み：文章と2つのボタンを横に並べ、上下の線ではさむ */
.jn-apply-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;margin-top:48px;padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.jn-apply-row p{margin:0;font-size:16px;line-height:2.1}
.jn-btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1024px){
  .jn-flow{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .jn-flow{grid-template-columns:1fr;gap:36px;margin-top:48px}
  .jn-apply-row p{font-size:15px}
}

/* 会員紹介の写真を広げた背景。会員一覧はこの層より手前に置き、背景が暗くなったら（.is-on）文字を明るい色に切り替える */
/* 層（.mb-zoom）は、広がり始める位置から会員一覧の終わりまでを覆う（位置と高さは common.js が測って入れる）。
   広がる途中の写真（.mbz-face）はページの中に置き、広がりきったら画面に貼り付く写真（.mbz-stick）に切り替える。
   画面に固定した層を JavaScript で動かすと、iPhone で指で弾いたときに止まって見えるため（2026-10-11 の録画） */
.mb-zoom{position:absolute;z-index:2;pointer-events:none}
.mbz-face{position:absolute;left:0;top:0;overflow:hidden;opacity:0;transform-origin:0 0;will-change:transform}
.mbz-stick{position:sticky;top:0;height:100vh;overflow:hidden;opacity:0}
/* 写真は画像の縦横比の箱。common.js が大きさを入れ、途中の写真は縮尺を打ち消して「枠を覆う大きさ」にする */
.mb-zoom b{position:absolute;left:0;top:0;background-size:100% 100%;transform-origin:50% 50%}
.mbz-face b{will-change:transform}
.mb-zoom i{position:absolute;inset:0;background:rgb(0,10,2)}
.mbz-face i{opacity:0}
.mbz-stick i{opacity:.8}
.mb-list{position:relative;z-index:3;transition:color .6s ease}
.mb-list .mb-lead,.mb-list .mb-names small,.mb-list .dot{transition:color .6s ease}
.mb-list.is-on{color:var(--paper)}
.mb-list.is-on .mb-lead,.mb-list.is-on .mb-lead b,.mb-list.is-on .dot{color:var(--paper)}
.mb-list.is-on .mb-names small{color:var(--rule)}
.mb-list.is-on .mb-names,.mb-list.is-on .mb-names li{border-color:rgba(246,247,248,.25)}
/* 一覧の下に、背景を見せる余白を少しとる */
.mb-list{padding-bottom:180px}

/* リファーラル活動の下：設立以来のやりとりの総額。数字を大きく、上下の線ではさんで中央に */
/* 本文の段落のすぐ下に、上下の線ではさんで置く（2026-10-11 錦見さん。以前はセクションの下に大きく中央寄せ） */
.rf-total{margin-top:48px;padding:32px 0 28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.rf-total-lead{margin:0;font-size:14px;line-height:1.9;letter-spacing:.08em;color:var(--mute)}
.rf-total-v{margin:16px 0 0;display:flex;align-items:baseline;gap:8px;font-family:var(--en);color:var(--ink);white-space:nowrap}
.rf-total-v .nums-n{font-weight:300;font-size:clamp(56px,6vw,92px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rf-pre,.rf-u{font-family:var(--ja);font-size:clamp(16px,1.4vw,22px);letter-spacing:.06em}
.rf-total-note{margin:18px 0 0;font-size:12px;letter-spacing:.06em;color:var(--mute)}
@media (max-width:760px){
  .rf-total{margin-top:40px;padding:24px 0 22px}
  /* スマホは左に説明と時点、右に金額の2列にして、縦を詰める（2026-10-11 錦見さん） */
  .rf-total{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center}
  /* 文章の段落の決まり（.ac-txt p の余白・行間）が効かないよう、.rf-total から書く */
  .rf-total .rf-total-lead{grid-column:1;grid-row:1;margin:0;font-size:12px;line-height:1.8}
  .rf-total .rf-total-note{grid-column:1;grid-row:2;margin:6px 0 0;font-size:11px;line-height:1.6}
  .rf-total .rf-total-v{grid-column:2;grid-row:1/3;margin:0;gap:4px;line-height:1}
  .rf-total-v .nums-n{font-size:52px}
  .rf-pre,.rf-u{font-size:13px}
}

/* ---------- お問い合わせ（/contact/） ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:clamp(40px,7vw,120px);align-items:start}
.ct-side{position:sticky;top:120px}
.ct-lead{font-size:16px;line-height:2.2}
.ct-notes{list-style:none;margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:14px}
.ct-notes li{position:relative;padding-left:16px;font-size:13px;line-height:1.9;color:var(--mute)}
.ct-notes li::before{content:"";position:absolute;left:0;top:.85em;width:5px;height:1px;background:var(--mute)}
.ct-notes a,.ct-cond a,.ct-agree a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* 今どの段階にいるか（入力 → 確認 → 送信完了） */
.ct-step{display:flex;gap:28px;margin-bottom:40px;font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--rule)}
.ct-step .is-on{color:var(--ink)}
.ct-form .ct-step{margin:0;padding:0 0 32px}
/* 最初の項目の上だけ黒い線（ほかのページの表と同じ） */
.ct-form .ct-step+.ct-row{border-top:1px solid var(--ink)}
.ct-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--rule)}
.ct-lbl{display:flex;align-items:center;gap:10px;align-self:start;padding-top:13px;font-size:14px;letter-spacing:.08em}
.ct-req,.ct-opt{font-style:normal;font-size:10px;line-height:1;padding:4px 6px;border-radius:2px;letter-spacing:.06em}
.ct-req{background:var(--ink);color:var(--paper)}
.ct-opt{border:1px solid var(--rule);color:var(--mute)}
.ct-in input[type=text],.ct-in input[type=email],.ct-in input[type=tel],.ct-in textarea{width:100%;padding:14px 16px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px;letter-spacing:.04em;transition:border-color .3s}
.ct-in textarea{resize:vertical;line-height:1.9}
.ct-in input::placeholder,.ct-in textarea::placeholder{color:#b0b0b0}
.ct-in input:focus,.ct-in textarea:focus{outline:none;border-color:var(--ink)}
.ct-row.is-err input,.ct-row.is-err textarea{border-color:#b3261e}
.ct-hint{display:block;margin-top:8px;font-size:12px;color:var(--mute);line-height:1.8}
.ct-err{margin:0;font-size:12px;color:#b3261e}
.ct-err:not(:empty){margin-top:8px}
/* 種類：四角いボタン状の選択肢。選ぶと黒くなる */
.ct-radios{display:flex;flex-wrap:wrap;gap:10px}
.ct-radios label{position:relative;cursor:pointer}
.ct-radios input{position:absolute;opacity:0;pointer-events:none}
.ct-radios span{display:inline-block;padding:12px 20px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);font-size:14px;letter-spacing:.06em;transition:background .3s,color .3s,border-color .3s}
.ct-radios label:hover span{border-color:var(--ink)}
.ct-radios input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ct-radios input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ct-cond{margin-top:18px;padding:20px 22px;border-left:2px solid var(--ink);background:var(--soft)}
.ct-cond b{display:block;font-weight:500;font-size:13px;letter-spacing:.08em}
.ct-cond p{margin:6px 0 8px;font-size:13px;line-height:1.9}
.ct-cond a{font-size:13px}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-agree{padding:32px 0 0}
.ct-agree label{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px}
.ct-agree input{width:18px;height:18px;accent-color:var(--ink)}
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:48px}
.ct-actions button.btn{cursor:pointer;font:inherit;font-size:15px}
.ct-actions .btn[disabled]{opacity:.5;pointer-events:none}
.ct-back{padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;letter-spacing:.08em;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ct-msg{font-size:15px;line-height:2.1}
.ct-dl{margin:32px 0 0;border-top:1px solid var(--ink)}
.ct-dl>div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule)}
.ct-dl dt{font-size:13px;letter-spacing:.08em;color:var(--mute)}
.ct-dl dd{margin:0;font-size:15px;white-space:pre-wrap;word-break:break-word}
.ct-done{outline:none}
.ct-done-h{margin:0 0 24px;font-weight:400;font-size:clamp(22px,2.2vw,28px);letter-spacing:.1em}
@media (max-width:1024px){
  .ct-grid{grid-template-columns:1fr;gap:56px}
  .ct-side{position:static}
}
@media (max-width:760px){
  .ct-row,.ct-dl>div{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .ct-lbl{padding-top:0}
  .ct-step{gap:16px}
  .ct-radios span{padding:11px 16px;font-size:13px}
}

/* ---------- プライバシーポリシー（/privacy/） ---------- */
/* 左に項目名、右に本文の2カラム。幅はほかのページと同じく左右の余白（--gut）いっぱいに */
.pv-item{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:clamp(40px,7vw,120px);padding:44px 0;border-top:1px solid var(--rule);scroll-margin-top:100px}
.pv-item:first-child{border-top:1px solid var(--ink)}
.pv-h{display:flex;align-items:baseline;gap:18px;margin:0;font-weight:400;font-size:19px;letter-spacing:.1em}
.pv-h span{font-family:var(--en);font-weight:300;font-size:15px;color:var(--mute)}
.pv-item p,.pv-item li{font-size:15px;line-height:2.1}
.pv-body>:first-child{margin-top:0}
.pv-item p+p,.pv-item ul+p{margin-top:12px}
.pv-item ul{margin:12px 0 0;padding-left:1.4em}
.pv-btn{margin-top:24px}
.pv-date{margin-top:48px;padding-top:28px;border-top:1px solid var(--ink);font-size:13px;color:var(--mute);text-align:right}
@media (max-width:760px){
  .pv-item{grid-template-columns:1fr;gap:16px;padding:32px 0}
  .pv-h{font-size:17px;gap:12px}
  .pv-item p,.pv-item li{font-size:14px}
}

/* ---------- スマホの読みやすさの調整（2026-10-11。PC は変えない） ---------- */
@media (max-width:760px){
  /* 概要の表：かっこ書きは単語の途中で折れないよう、次の行に回す */
  .ab-ov-facts dd small{display:block;margin:4px 0 0}
  /* セミナーのテーマの例：副題は次の行に、小さめの灰色で */
  .ac-ex-sub{display:block;margin-top:2px;font-size:13px;color:var(--mute)}
  .ac-ex-dash{display:none}
  /* スケジュールの年の見出しは年だけ（すぐ上の「Schedule」と言葉が重なるため） */
  .ev-y-pre{display:none}
}
@media (max-width:760px){
  /* スケジュールの濃い面は画面の端から 8px 内側にあるので、中の文字は面の端から 24px あける（左右の余白が詰まって見えないように） */
  .ev-sched{padding-left:32px;padding-right:32px}
}