/* OPTS 新サイト 動作見本 — 郵送DM（第1回）のデザインをウェブ用に置き換えた共通CSS */
@font-face{font-family:"Noto Sans JP Local";src:url("../fonts/NotoSansJP-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans JP Local";src:url("../fonts/NotoSansJP-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --navy:#003355;       /* ロゴの紺 */
  --navy-2:#004262;     /* DM表面のグラデーション起点 */
  --teal:#0f6b5e;
  --green:#227744;      /* ロゴの緑 */
  --green-2:#1b7a57;
  --green-soft:#E6F2EC;
  --ink:#1E3A4C;
  --sub:#5B6E7C;
  --line:#D7DFE5;
  --soft:#EEF3F6;
  --white:#fff;
  --warn:#B4532A;
  --radius:10px;
  --wrap:1080px;
  --font:"Noto Sans JP Local","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.85;letter-spacing:.02em}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1,h2,h3,h4{line-height:1.45;margin:0;font-weight:700;color:var(--navy)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.num{font-feature-settings:"tnum"}
.small{font-size:14px;color:var(--sub);line-height:1.7}
.note{font-size:14px;color:var(--sub);line-height:1.7;margin-top:.6em}

/* ===== ヘッダー ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2) blur(6px)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex-shrink:0}
.brand img.mark{width:38px;height:38px}
.brand img.wordmark{height:24px;width:auto}
.brand .brand-sub{font-size:11px;line-height:1.35;color:var(--navy);font-weight:700;letter-spacing:.04em;border-left:1px solid var(--line);padding-left:10px}
.brand .brand-sub span{display:block;font-weight:400;color:var(--sub);font-size:10px;letter-spacing:.02em}
.gnav{margin-left:auto;display:flex;align-items:center;gap:4px}
.gnav a{font-size:14px;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:6px;font-weight:700}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--green);background:var(--green-soft)}
.btn-join-head{margin-left:8px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:12px;color:var(--navy);font-weight:700}
@media (max-width:900px){
  .site-header .wrap{height:60px;gap:10px}
  .brand .brand-sub{display:none}
  .gnav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:8px 16px 16px;border-bottom:1px solid var(--line);box-shadow:0 10px 20px rgba(0,30,50,.08)}
  .gnav.open{display:flex}
  .gnav a{padding:12px 8px;border-bottom:1px solid var(--soft)}
  .menu-btn{display:block}
  .btn-join-head{margin-left:0}
  .site-header .btn-join-head{padding:9px 14px;font-size:13px}
}

/* ===== ボタン ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;text-decoration:none;font-weight:700;border-radius:999px;padding:14px 28px;font-size:16px;line-height:1.3;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .08s ease,box-shadow .15s ease,background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 0 #155232}
.btn-primary:hover{background:#1d6b3c}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 4px 0 #001f33}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--soft)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{display:flex;width:100%}
.btn .arrow::after{content:"→";font-weight:400}
.btn-sub{display:block;font-size:12px;font-weight:400;opacity:.9;margin-top:2px}
.btn-stack{flex-direction:column;gap:0}

/* ===== ヒーロー（DM表面の紺→緑グラデーション＋白い見出し帯） ===== */
.hero{background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 45%,var(--teal) 82%,var(--green-2) 100%);color:#fff;position:relative;overflow:hidden}
/* DM表面に合わせ、斜線の模様をやめて無地のグラデーション＋光だけにする */
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.10),transparent 45%);pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-top:56px;padding-bottom:56px}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;border:1px solid rgba(255,255,255,.7);padding:3px 12px;border-radius:4px;margin-bottom:18px}
.hero-title{font-size:clamp(22px,6.2vw,48px);line-height:1.25;color:var(--navy);margin:0 0 20px}
.hero-title .bar{display:inline-block;background:#fff;padding:.12em .42em .16em;margin:0 0 .18em;box-shadow:0 6px 18px rgba(0,20,40,.18)}
.hero-lead{font-size:clamp(15px,2.2vw,18px);line-height:1.9;max-width:44em;margin:0 0 26px;color:rgba(255,255,255,.95)}
.hero-lead strong{color:#fff}
.hero-sub{font-size:clamp(17px,2.6vw,22px);font-weight:700;margin:0 0 6px;color:#fff}
.hero-sub2{font-size:14px;color:rgba(255,255,255,.85);margin:0 0 24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero-date{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px;margin:6px 0 18px}
.hero-date .d{font-size:clamp(34px,6vw,54px);font-weight:700;line-height:1;letter-spacing:.01em}
.hero-date .w{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border:1px solid #fff;border-radius:50%;font-size:15px;margin-left:6px;vertical-align:middle;position:relative;top:-6px}
.hero-date .t{font-size:clamp(22px,3.6vw,30px);font-weight:700;line-height:1}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;border-top:1px solid rgba(255,255,255,.35);padding-top:14px;margin-bottom:24px}
.hero-meta b{font-weight:700}
.hero-next{margin-top:34px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;text-decoration:none;color:#fff;max-width:760px}
.hero-next:hover{background:rgba(255,255,255,.16)}
.hero-next .lab{background:#fff;color:var(--green);font-weight:700;font-size:12px;padding:2px 10px;border-radius:3px}
.hero-next .txt{font-weight:700}
.hero-next .go{margin-left:auto;font-size:14px}

/* ===== セクション ===== */
.section{padding:72px 0}
.section.tight{padding:48px 0}
.section.soft{background:var(--soft)}
.section.navy{background:var(--navy);color:#fff}
.section.navy h2,.section.navy h3{color:#fff}
.sec-head{margin-bottom:32px}
.sec-head .label{display:block;font-size:12px;font-weight:700;color:var(--green);letter-spacing:.14em;margin-bottom:6px}
.sec-head h2{font-size:clamp(23px,3.4vw,30px)}
.sec-head p{margin:12px 0 0;color:var(--sub)}
.sec-head.center{text-align:center}
.sec-head.center p{margin-left:auto;margin-right:auto;max-width:40em}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* 白い見出し帯（紺地の上） */
.band{display:inline-block;background:var(--navy);color:#fff;font-weight:700;padding:6px 16px;font-size:15px;letter-spacing:.04em}

/* ===== 対象者（チェックリスト） ===== */
.who-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.who-list li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:6px;padding:16px 18px 16px 50px;position:relative;font-weight:700;line-height:1.7}
.who-list li::before{content:"";position:absolute;left:18px;top:19px;width:18px;height:18px;border-radius:50%;background:var(--green)}
.who-list li::after{content:"";position:absolute;left:23px;top:23px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.who-list li small{display:block;font-weight:400;color:var(--sub);font-size:13px;margin-top:4px}

/* ===== 01/02/03 の3列（DM裏面） ===== */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.three .item{border-top:3px solid var(--green);padding-top:14px}
.three .n{font-size:13px;font-weight:700;color:var(--green);letter-spacing:.1em}
.three h3{font-size:19px;margin:4px 0 10px}
.three p{font-size:15px;color:var(--ink);margin:0}
@media (max-width:760px){.three{grid-template-columns:1fr;gap:22px}}

/* ===== カード ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);position:relative}
a.card:hover{border-color:var(--green);box-shadow:0 8px 22px rgba(0,40,60,.08)}
.card .status{align-self:flex-start;font-size:12px;font-weight:700;padding:2px 10px;border-radius:3px;background:var(--green);color:#fff}
.card .status.wait{background:#fff;color:var(--sub);border:1px solid var(--line)}
.card .c-date{font-size:22px;font-weight:700;color:var(--navy);line-height:1.3}
.card h3{font-size:17px}
.card .c-meta{font-size:14px;color:var(--sub);line-height:1.7}
.card .c-go{margin-top:auto;font-weight:700;color:var(--green);font-size:14px;padding-top:8px}
.card.featured{border:2px solid var(--green)}

/* ===== 人物（丸い顔写真） ===== */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.person{text-align:center;display:flex;flex-direction:column;align-items:center}
.person .ph{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(0,30,50,.12);margin-bottom:12px}
.person .role{font-size:12px;font-weight:700;color:var(--green);letter-spacing:.06em}
.person .name{font-size:20px;font-weight:700;color:var(--navy);margin:2px 0 0}
.person .org{font-size:13px;color:var(--sub);line-height:1.6}
.person .talk{margin-top:12px;font-weight:700;color:var(--navy);font-size:15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;width:100%}
.person .desc{font-size:14px;text-align:left;margin-top:10px;line-height:1.8}
.person .cred{font-size:12.5px;text-align:left;color:var(--sub);margin-top:8px;line-height:1.7;background:var(--soft);border-radius:6px;padding:8px 10px;width:100%}
@media (max-width:820px){.people{grid-template-columns:1fr;gap:36px}.person .desc,.person .cred{max-width:30em}}
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.board .person .ph{width:104px;height:104px}
.board .person .name{font-size:16px}
@media (max-width:820px){.board{grid-template-columns:repeat(2,1fr)}}

/* ===== 表 ===== */
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:12px 14px;vertical-align:top;text-align:left}
.tbl thead th{background:var(--navy);color:#fff;font-weight:700}
.tbl tbody th{background:var(--soft);color:var(--navy);font-weight:700;white-space:nowrap}
.tbl .yen{font-weight:700;color:var(--navy);font-size:17px}
.tbl .na{color:var(--sub)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* タイムテーブル */
.tt{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:22px;background:#fff}
.tt caption{text-align:left;caption-side:top;padding:0}
.tt caption .bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;background:var(--navy);color:#fff;font-weight:700;padding:9px 14px;font-size:15px}
.tt.after caption .bar{background:var(--green)}
.tt td{border-bottom:1px solid var(--line);padding:10px 12px;vertical-align:top}
.tt td.time{white-space:nowrap;width:8.5em;font-weight:700;color:var(--navy)}
.tt td.who{width:14em;color:var(--sub);font-size:14px}
.tt .sub{display:block;font-size:13px;color:var(--sub)}
.tt tr.minor td{color:var(--sub);font-size:14px}
@media (max-width:640px){
  .tt td.who{display:block;width:auto;padding-top:0;border-bottom:1px solid var(--line)}
  .tt tr{display:grid;grid-template-columns:7.2em 1fr}
  .tt td{border-bottom:0}
  .tt tr{border-bottom:1px solid var(--line)}
  .tt td.who{grid-column:2;border:0;padding-bottom:10px}
}

/* ===== 参加方法の比較 ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.opt{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.opt .opt-head{padding:18px 22px;background:var(--soft)}
.opt.rec{border:2px solid var(--green)}
.opt.rec .opt-head{background:var(--green);color:#fff}
.opt.rec .opt-head h3{color:#fff}
.opt .tag{display:inline-block;font-size:12px;font-weight:700;background:#fff;color:var(--green);border-radius:3px;padding:1px 8px;margin-bottom:6px}
.opt h3{font-size:21px}
.opt .opt-time{font-size:14px;margin-top:2px}
.opt .opt-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.opt dl{margin:0;display:grid;grid-template-columns:6.5em 1fr;gap:8px 10px;font-size:15px}
.opt dt{color:var(--sub);font-size:13px;padding-top:2px}
.opt dd{margin:0}
.opt .incl{list-style:none;font-size:14.5px}
.opt .incl li{padding-left:1.4em;position:relative;line-height:1.75}
.opt .incl li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.opt .incl li.x{color:var(--sub)}
.opt .incl li.x::before{content:"―";color:var(--line)}
.opt .price{font-size:26px;font-weight:700;color:var(--navy);line-height:1.2}
.opt .price small{font-size:13px;font-weight:400;color:var(--sub);display:block;margin-top:4px;line-height:1.6}
.opt .btn{margin-top:auto}
@media (max-width:760px){.compare{grid-template-columns:1fr}}

/* スマホでは表を縦積みにする（site.js が見出しを data-label に入れる） */
@media (max-width:640px){
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack th,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{border:1px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden}
  .tbl.stack tbody th{white-space:normal;border:0;border-bottom:1px solid var(--line)}
  /* 2つ目以降の文が見出し列に落ちないよう、見出しを左に絶対配置して本文は1列で流す */
  .tbl.stack td{border:0;border-bottom:1px solid var(--soft);display:block;position:relative;padding-left:124px;min-height:2.8em}
  .tbl.stack td:last-child{border-bottom:0}
  .tbl.stack td::before{content:attr(data-label);font-size:12px;color:var(--sub);font-weight:700;line-height:1.6;padding-top:2px;position:absolute;left:14px;top:12px;width:100px}
  .tbl.stack caption{display:block}
  .tbl tbody th{white-space:normal}
  .opt .price{font-size:22px}
}
/* 費用の例 */
.calc{background:#fff;border:1px dashed var(--green);border-radius:var(--radius);padding:16px 20px;margin-top:20px;font-size:15px}
.calc b{color:var(--navy)}
.calc .eq{font-size:18px;font-weight:700;color:var(--navy)}

/* ===== ステップ ===== */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:st}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;position:relative}
.steps li .sn{font-size:12px;font-weight:700;color:var(--green);letter-spacing:.12em}
.steps li h3{font-size:16px;margin:4px 0 6px}
.steps li p{font-size:14px;margin:0;color:var(--ink);line-height:1.75}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:8px;height:8px;border-top:2px solid var(--green);border-right:2px solid var(--green);transform:translateY(-50%) rotate(45deg);z-index:1}
@media (max-width:820px){.steps{grid-template-columns:1fr}.steps li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-11px;transform:translateX(-50%) rotate(135deg)}}

/* ===== 情報ボックス ===== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.facts div{padding:16px 18px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts dt{font-size:12px;color:var(--green);font-weight:700;letter-spacing:.08em}
.facts dd{margin:4px 0 0;font-weight:700;color:var(--navy);line-height:1.55;font-size:15px}
.facts dd small{display:block;font-weight:400;color:var(--sub);font-size:13px}
@media (max-width:820px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:420px){.facts{grid-template-columns:1fr}.facts div{border-right:0;border-bottom:1px solid var(--line)}.facts div:last-child{border-bottom:0}}

.box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.box.green{border-color:var(--green);background:var(--green-soft)}
.box h3{font-size:18px;margin-bottom:10px}
.box ul{padding-left:1.2em}
.box li{margin:.25em 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 44px;position:relative;font-weight:700;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:8px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.faq summary::after{content:"+";position:absolute;right:10px;top:14px;font-size:22px;color:var(--green);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 12px 20px 44px;font-size:15px}

/* ===== 一覧 ===== */
.news{list-style:none;border-top:1px solid var(--line)}
.news li{display:flex;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
.news time{color:var(--sub);flex-shrink:0;font-size:14px}

/* ===== 協賛 ===== */
.sponsors{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 36px}
.sponsors img{height:30px;width:auto;object-fit:contain}
.sponsors .tall{height:40px}

/* ===== SNS ===== */
.sns{display:flex;flex-wrap:wrap;gap:10px}
.sns a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--navy);background:#fff}
.sns svg{width:18px;height:18px}
.sns-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;background:#fff}
.sns-band p{margin:0;font-size:14px}

/* ===== CTA帯 ===== */
.cta{background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 55%,var(--teal) 100%);color:#fff;border-radius:14px;padding:34px 30px;display:grid;grid-template-columns:1fr auto;gap:20px 30px;align-items:center}
.cta h2{color:#fff;font-size:clamp(20px,3vw,26px)}
.cta p{margin:8px 0 0;color:rgba(255,255,255,.88);font-size:15px}
.cta .acts{display:flex;flex-direction:column;gap:10px;min-width:260px}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:28px 22px}.cta .acts{min-width:0}}

/* ===== フッター ===== */
.sponsor-strip{border-top:1px solid var(--line);padding:30px 0}
.sponsor-strip .ttl{text-align:center;font-size:12px;color:var(--sub);letter-spacing:.14em;margin-bottom:16px}
.site-footer{background:var(--navy);color:rgba(255,255,255,.88);font-size:14px;padding:44px 0 90px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .f-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.site-footer .f-brand .mk{width:40px;height:40px;background:#fff;border-radius:50%;padding:4px}
.site-footer .f-brand b{font-size:16px;color:#fff}
.site-footer .f-brand span{display:block;font-size:11px;letter-spacing:.04em;opacity:.8}
.site-footer ul{list-style:none}
.site-footer li{margin:6px 0}
.site-footer h4{color:#fff;font-size:13px;letter-spacing:.1em;margin-bottom:8px}
.site-footer .copy{margin-top:30px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;font-size:12px;opacity:.75}
.site-footer .sns a{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr}}

/* ===== スマホ用の固定申込ボタン ===== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:none;gap:8px;box-shadow:0 -6px 16px rgba(0,30,50,.08)}
.sticky-cta .btn{flex:1;padding:12px 10px;font-size:15px}
.sticky-cta .lim{position:absolute;top:-24px;left:12px;font-size:11px;background:var(--navy);color:#fff;padding:2px 10px;border-radius:3px 3px 0 0}
@media (max-width:760px){.sticky-cta{display:flex}}

/* ===== ページ見出し（下層） ===== */
.page-hero{background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 55%,var(--teal) 100%);color:#fff}
.page-hero .wrap{padding-top:44px;padding-bottom:44px}
.page-hero h1{color:#fff;font-size:clamp(26px,4.4vw,38px)}
.page-hero p{margin:12px 0 0;color:rgba(255,255,255,.9);max-width:42em}
.crumb{font-size:12px;color:rgba(255,255,255,.75);margin-bottom:10px}
.crumb a{color:rgba(255,255,255,.9)}

/* ===== 目次（ページ内リンク） ===== */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0;list-style:none}
.toc a{display:inline-block;font-size:13px;font-weight:700;text-decoration:none;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.toc a:hover{border-color:var(--green);color:var(--green)}
.toc-wrap{background:var(--soft);border-bottom:1px solid var(--line);padding:14px 0;position:sticky;top:68px;z-index:30}
@media (max-width:900px){.toc-wrap{top:60px;overflow-x:auto}.toc{flex-wrap:nowrap;white-space:nowrap}}

/* ===== フォーム ===== */
.form-wrap{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr}}
.fstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:22px;overflow:hidden}
.fstep > .fh{display:flex;align-items:center;gap:12px;background:var(--soft);padding:14px 20px;border-bottom:1px solid var(--line)}
.fstep > .fh .no{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.fstep > .fh h2{font-size:18px}
.fstep > .fb{padding:20px}
.fstep.disabled{opacity:.45;pointer-events:none}
.q{margin-bottom:22px}
.q:last-child{margin-bottom:0}
.q > .ql{display:block;font-weight:700;color:var(--navy);margin-bottom:8px}
.req,.opt-l{display:inline-block;font-size:11px;font-weight:700;border-radius:3px;padding:0 6px;margin-left:8px;vertical-align:2px}
.req{background:var(--warn);color:#fff}
.opt-l{background:var(--soft);color:var(--sub);border:1px solid var(--line)}
.choices{display:grid;gap:10px}
.choices.cols2{grid-template-columns:1fr 1fr}
@media (max-width:560px){.choices.cols2{grid-template-columns:1fr}}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .cbox{display:block;border:2px solid var(--line);border-radius:10px;padding:14px 16px 14px 46px;cursor:pointer;background:#fff;position:relative;line-height:1.6}
.choice .cbox::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;border:2px solid #9fb0bc;background:#fff}
.choice input[type=checkbox] + .cbox::before{border-radius:4px}
.choice input:checked + .cbox{border-color:var(--green);background:var(--green-soft)}
.choice input:checked + .cbox::before{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px #fff}
.choice input[type=checkbox]:checked + .cbox::before{box-shadow:none}
.choice input[type=checkbox]:checked + .cbox::after{content:"";position:absolute;left:22px;top:21px;width:7px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.choice input:focus-visible + .cbox{outline:3px solid #8fc5a6;outline-offset:2px}
.choice input:disabled + .cbox{cursor:not-allowed;background:#f6f8f9;color:var(--sub)}
.choice .ct{font-weight:700;color:var(--navy);display:block}
.choice .cd{font-size:13.5px;color:var(--sub);display:block}
.choice .cp{float:right;font-weight:700;color:var(--navy);margin-left:10px}
.inp{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.inp:focus{outline:none;border-color:var(--green)}
.inp.err{border-color:var(--warn)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.help{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.6}
.errmsg{font-size:13px;color:var(--warn);margin-top:6px;font-weight:700;display:none}
.q.has-err .errmsg{display:block}
.info{border-radius:8px;padding:14px 16px;font-size:14px;line-height:1.75;margin-top:12px}
.info.green{background:var(--green-soft);border:1px solid #b9dcc8}
.info.navy{background:var(--soft);border:1px solid var(--line)}
.info.warn{background:#FFF5EF;border:1px solid #F0CDB8}
.info b{color:var(--navy)}
.summary{position:sticky;top:90px;background:#fff;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden}
.summary .sh{background:var(--navy);color:#fff;padding:12px 18px;font-weight:700}
.summary .sb{padding:16px 18px;font-size:14px}
.summary dl{margin:0;display:grid;grid-template-columns:5.5em 1fr;gap:6px 12px}
.summary dt{color:var(--sub)}
.summary dd{margin:0;font-weight:700;color:var(--navy)}
.summary .total{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.summary .total b{font-size:26px;color:var(--navy)}
.summary .sn{font-size:12px;color:var(--sub);margin-top:10px;line-height:1.6}
@media (max-width:900px){.summary{position:static}}
.mobile-total{display:none}
@media (max-width:900px){.mobile-total{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);color:#fff;padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;font-size:13px}.mobile-total b{font-size:20px}}
.consent .choice .cbox{font-size:14px;line-height:1.7}
.confirm-list{margin:0;display:grid;grid-template-columns:8em 1fr;gap:8px 12px;font-size:15px}
.confirm-list dt{color:var(--sub)}
.confirm-list dd{margin:0;font-weight:700;color:var(--navy)}

/* ===== 完了ページ ===== */
.done-mark{width:64px;height:64px;border-radius:50%;background:var(--green);position:relative;margin:0 auto 16px}
.done-mark::after{content:"";position:absolute;left:23px;top:15px;width:14px;height:26px;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg)}
.timeline{list-style:none;border-left:3px solid var(--green);margin-left:10px;padding-left:24px}
.timeline li{position:relative;padding-bottom:20px}
.timeline li::before{content:"";position:absolute;left:-32px;top:5px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--green)}
.timeline li b{color:var(--navy)}
.timeline .when{display:block;font-size:12px;color:var(--green);font-weight:700;letter-spacing:.06em}

/* ===== 準備中ページ ===== */
.wip{text-align:center;padding:90px 20px}
.wip p{color:var(--sub)}

/* ===== 未確定の箇所の表示（動作見本だけ。本番では不要） ===== */
.review-toggle{position:fixed;right:14px;bottom:86px;z-index:60;display:flex;align-items:center;gap:8px;background:#222;color:#fff;border:0;border-radius:999px;padding:10px 16px 10px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.review-toggle .sw{width:34px;height:20px;border-radius:999px;background:#666;position:relative;transition:background .15s}
.review-toggle .sw::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
body.review .review-toggle .sw{background:#e6b800}
body.review .review-toggle .sw::after{left:17px}
@media (min-width:761px){.review-toggle{bottom:18px}}
.review-legend{display:none}
body.review .review-legend{display:flex;position:fixed;right:14px;bottom:134px;z-index:60;flex-direction:column;gap:4px;background:#fff;border:1px solid #ccc;border-radius:8px;padding:8px 12px;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
@media (min-width:761px){body.review .review-legend{bottom:66px}}
.review-legend i{display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px}
.review-box{display:none}
.rv-only{display:none}
body.review .rv-only{display:block;margin:-6px 0 18px;font-size:13px}
body.review .review-box{display:block;background:#FFFBE6;border-bottom:2px solid #E6B800;font-size:14px}
body.review .review-box .wrap{padding-top:14px;padding-bottom:14px}
body.review .review-box h2{font-size:14px;color:#6b5300;margin-bottom:6px}
body.review .review-box ol{padding-left:1.4em;margin:0}
body.review .review-box li{margin:3px 0}
body.review .chk{background:#FFF0A0;box-shadow:0 0 0 2px #FFF0A0;border-radius:2px}
body.review .prp{background:#D7EAFF;box-shadow:0 0 0 2px #D7EAFF;border-radius:2px}
body.review .chk[data-note]::after,body.review .prp[data-note]::after{content:"［" attr(data-note) "］";font-size:11.5px;font-weight:400;line-height:1.5;letter-spacing:0;margin-left:4px}
body.review .chk[data-note]::after{color:#7a5c00}
body.review .prp[data-note]::after{color:#0b4a8a}
body.review .hero .chk[data-note]::after,body.review .hero .prp[data-note]::after,body.review .page-hero .chk[data-note]::after,body.review .page-hero .prp[data-note]::after{color:#3a2c00}
body.review .hero .chk,body.review .page-hero .chk{color:#3a2c00}
body.review .hero .prp,body.review .page-hero .prp{color:#0b2a4a}
body.review .opt.rec .opt-head .prp,body.review .opt.rec .opt-head .chk{color:#0b2a4a}

/* 印刷（PDF） */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:10mm}
  .site-header{position:static}
  .sticky-cta,.mobile-total,.review-toggle,.review-legend,.menu-btn{display:none!important}
  .toc-wrap{position:static}
  .section{padding:36px 0}
  .faq details{break-inside:avoid}
  .faq details:not([open]) .a{display:block}
  a{text-decoration:none}
}

/* ===== デザインカンプの撮影用 ===== */
body.comp .review-toggle,body.comp .review-legend{display:none!important}
body.comp:not(.comp-fv) .sticky-cta,body.comp:not(.comp-fv) .mobile-total{display:none!important}
body.comp .site-header{position:relative}
body.comp.comp-fv .site-header{position:sticky}
body.comp .toc-wrap{position:relative;top:auto}

/* ===== 写真がない人の仮置き ===== */
.ph-none{width:132px;height:132px;border-radius:50%;background:#D5DDE3;border:4px solid #fff;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;color:#6B7D8A;font-weight:700;font-size:13px;line-height:1.4;text-align:center;margin-bottom:12px}
.board .ph-none,.prof .ph-none{width:104px;height:104px}

/* ===== 受付開始前のボタン ===== */
.btn-disabled{background:#E3E8EC;color:#6B7D8A;box-shadow:none;cursor:not-allowed;border-color:transparent}
.hero .btn-disabled{background:rgba(255,255,255,.18);color:rgba(255,255,255,.85);border:1px dashed rgba(255,255,255,.6)}
.badge-wait{display:inline-block;background:#fff;color:var(--navy);font-weight:700;font-size:13px;border-radius:4px;padding:3px 12px;margin-left:8px}

/* ===== 4つの意味（OPTSについて） ===== */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.four .item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.four .en{font-size:26px;font-weight:700;color:var(--green);letter-spacing:.02em;line-height:1.2}
.four .ja{font-weight:700;color:var(--navy);margin-top:8px;line-height:1.6}
@media (max-width:820px){.four{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.four{grid-template-columns:1fr}}

/* ===== 世話人のプロフィール ===== */
.prof{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.prof:first-child{border-top:1px solid var(--line)}
.prof .ph{width:104px;height:104px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 1px var(--line)}
.prof .role{font-size:12px;font-weight:700;color:var(--green);letter-spacing:.06em}
.prof h3{font-size:20px;margin:2px 0 2px}
.prof .org{font-size:14px;color:var(--sub);margin-bottom:10px}
.prof p{font-size:15px;margin:0 0 8px}
.prof .q{font-size:13px;color:var(--sub);background:var(--soft);border-radius:6px;padding:8px 12px;margin:0}
@media (max-width:560px){.prof{grid-template-columns:1fr;gap:10px}}

/* ===== 会則・規程 ===== */
.doc{max-width:860px}
.doc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;border-bottom:3px solid var(--navy);padding-bottom:10px;margin-bottom:8px;scroll-margin-top:130px}
.doc-head h2{font-size:24px}
.doc-head .meta{font-size:13px;color:var(--sub)}
.doc h3.ch{font-size:16px;background:var(--soft);padding:8px 12px;margin:26px 0 6px;border-left:4px solid var(--green)}
.art{display:grid;grid-template-columns:9em 1fr;gap:6px 16px;padding:12px 4px;border-bottom:1px solid var(--soft);font-size:15px}
.art .an{font-weight:700;color:var(--navy)}
.art .an small{display:block;font-weight:400;color:var(--sub);font-size:13px}
.art ol{margin:0;padding-left:1.4em}
.art ol ol{list-style:none;padding-left:.4em}
.art li{margin:2px 0}
.doc .suppl{font-size:14px;color:var(--sub);margin-top:14px}
@media (max-width:560px){.art{grid-template-columns:1fr}}

/* ===== 定義リスト型の表（特商法） ===== */
.dl-table{border-top:1px solid var(--line)}
.dl-table > div{display:grid;grid-template-columns:14em 1fr;gap:10px 20px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
.dl-table dt{font-weight:700;color:var(--navy)}
.dl-table dd{margin:0}
.dl-table dd ul{padding-left:1.2em;margin:0}
@media (max-width:560px){.dl-table > div{grid-template-columns:1fr}}

/* ===== 文書（プライバシーポリシー） ===== */
.policy h2{font-size:18px;margin:28px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.policy ul,.policy ol{padding-left:1.4em}
.policy li{margin:4px 0}
.textarea{min-height:160px;resize:vertical}

/* ===== 列数の指定（スマホでは縦に積む） ===== */
.three.c4{grid-template-columns:repeat(4,1fr)}
.people.c4{grid-template-columns:repeat(4,1fr)}
.people.c5{grid-template-columns:repeat(5,1fr);gap:18px}
.facts.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.three.c4,.people.c4,.people.c5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.three.c4{grid-template-columns:1fr}.people.c4,.people.c5{grid-template-columns:1fr}.facts.c3{grid-template-columns:1fr}.facts.c3 div{border-right:0;border-bottom:1px solid var(--line)}}

/* ===== 3つの軸のタグ ===== */
.three .tag2{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--navy);border-radius:3px;padding:1px 8px;margin-left:10px;letter-spacing:.02em;vertical-align:1px}

/* ===== Opt から Adopt への4つのステップ（OPTSについて） ===== */
.flow4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.flow4 .st{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 20px;position:relative;text-align:center}
.flow4 .st:not(:last-child)::after{content:"";position:absolute;right:-23px;top:50%;width:14px;height:14px;border-top:3px solid var(--green);border-right:3px solid var(--green);transform:translateY(-50%) rotate(45deg)}
.flow4 img{width:92px;height:92px;margin:0 auto 6px;object-fit:contain}
.flow4 .sn{font-size:12px;font-weight:700;color:var(--green);letter-spacing:.12em}
.flow4 .en{font-size:30px;font-weight:700;color:#7A8B98;line-height:1.2;letter-spacing:.01em}
.flow4 .en b{color:var(--navy)}
.flow4 .v{font-weight:700;color:var(--navy);margin:4px 0 10px;font-size:17px}
.flow4 p{font-size:14px;text-align:left;margin:0;line-height:1.75}
.axes{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:16px}
.axes div{background:var(--navy);color:#fff;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:700;line-height:1.5}
.axes div small{display:block;font-weight:400;opacity:.85;font-size:12px;margin-top:2px}
.axes .a1{grid-column:1/3}
@media (max-width:820px){.flow4{grid-template-columns:1fr 1fr}.flow4 .st:nth-child(2)::after{display:none}.axes{grid-template-columns:1fr;gap:10px}.axes .a1{grid-column:auto}}
@media (max-width:560px){.flow4{grid-template-columns:1fr}.flow4 .st::after{right:50%!important;top:auto!important;bottom:-24px;transform:translateX(50%) rotate(135deg)!important}.flow4 .st:nth-child(2)::after{display:block}.flow4 .st:last-child::after{display:none}}

/* ===== 迷い → 実践者の実際（第1回） ===== */
.worries{display:grid;gap:14px}
.wr{display:grid;grid-template-columns:1fr 46px 1.5fr;align-items:center}
.wr .q{background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px 20px;font-weight:700;color:var(--navy);position:relative;line-height:1.6}
.wr .q::before{content:"よく聞く迷い";display:block;font-size:11px;color:var(--sub);font-weight:700;letter-spacing:.06em;margin-bottom:2px}
.wr .ar{height:100%;position:relative}
.wr .ar::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-top:3px solid var(--green);border-right:3px solid var(--green);transform:translate(-70%,-50%) rotate(45deg)}
.wr .a{background:var(--green-soft);border:1px solid #b9dcc8;border-radius:10px;padding:14px 18px;font-size:15px;line-height:1.75}
.wr .a b{display:block;color:var(--green);font-size:16px}
.wr .a .tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--navy);border-radius:3px;padding:0 7px;vertical-align:1px}
@media (max-width:760px){.wr{grid-template-columns:1fr}.wr .ar{height:30px}.wr .ar::after{transform:translate(-50%,-60%) rotate(135deg)}}

/* ===== 送信前の最終確認（申込フォーム） ===== */
.final{border:2px solid var(--navy);border-radius:10px;padding:14px 18px;margin-top:16px;background:#fff}
.final .ft{margin:0 0 8px;font-weight:700;color:var(--navy)}
.final dl{margin:0;display:grid;grid-template-columns:9.5em 1fr;gap:6px 14px;font-size:14px;line-height:1.7}
.final dt{color:var(--sub);font-weight:700}
.final dd{margin:0}
@media (max-width:560px){.final dl{grid-template-columns:1fr;gap:2px}.final dd{margin-bottom:8px}}

.who-list.c2{grid-template-columns:1fr 1fr}
@media (max-width:640px){.who-list.c2{grid-template-columns:1fr}}

/* ===== LINE・SNS ===== */
/* SNSのボタンは白地・紺文字・細い枠にし、アイコンだけブランド色（入会の緑と競わせない）。
   塗りのLINEボタンは「最新情報を受け取る」の帯（.follow-strip）の1か所だけ */
.sns a.line,.sns a.ig,.sns a.fb{background:#fff;color:var(--navy);border:1px solid var(--line)}
.sns a.line svg{color:#06C755}.sns a.ig svg{color:#C13584}.sns a.fb svg{color:#1877F2}
.sns a.line:hover,.sns a.ig:hover,.sns a.fb:hover{border-color:var(--navy)}
.follow-strip .sns a.line{background:#06C755;color:#fff;border-color:#06C755;box-shadow:0 3px 0 #04913E}
.follow-strip .sns a.line svg{color:#fff}
.site-footer .sns a.line,.site-footer .sns a.ig,.site-footer .sns a.fb{background:#fff;color:var(--navy);border-color:#fff}
.sns.big a{padding:12px 22px;font-size:15px}
.sns.big svg{width:22px;height:22px}
.follow-strip{background:linear-gradient(90deg,#E9F8EE,#F2F5FB);border-top:1px solid var(--line);padding:30px 0}
.follow-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px}
.follow-strip b{font-size:20px;color:var(--navy);display:block}
.follow-strip p{margin:4px 0 0;font-size:14px;color:var(--sub)}
.btn-line{background:#06C755;color:#fff;box-shadow:0 4px 0 #04913E}
.btn-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff}
.flow4 .stn{display:flex;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--navy);color:#fff;font-size:30px;font-weight:700;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--green-soft)}

/* ===== 向き合う課題と集合知 ===== */
.issues{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.iss{background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);border-radius:var(--radius);padding:20px 22px}
.iss .no{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--green);border-radius:3px;padding:1px 10px}
.iss h3{font-size:20px;margin:8px 0 8px}
.iss p{margin:0;font-size:15px}
.ci{margin-top:22px;background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 55%,var(--teal) 100%);color:#fff;border-radius:14px;padding:26px 28px;position:relative}
.ci::before{content:"";position:absolute;left:50%;top:-14px;width:26px;height:26px;background:var(--navy-2);transform:translateX(-50%) rotate(45deg);border-radius:3px;z-index:0}
.ci h3{color:#fff;font-size:clamp(20px,2.8vw,24px);position:relative}
.ci p{margin:8px 0 0;color:rgba(255,255,255,.92);position:relative}
.ci-how{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;position:relative}
.ci-how li{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:5px 16px;font-size:14px;font-weight:700}
@media (max-width:760px){.issues{grid-template-columns:1fr}}

/* ===== 支払い待ち ===== */
.warn-mark{width:64px;height:64px;border-radius:50%;background:#E8A33D;color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}

/* ===== 決済サービスの画面（イメージ） ===== */
body.page-pay{background:#F6F8FA}
.pay-note{background:#FFF8D6;border-bottom:2px solid #E6B800;color:#5C4600;font-size:13px;padding:10px 16px;text-align:center}
.pay{max-width:980px;margin:40px auto;display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);overflow:hidden;font-family:-apple-system,"Hiragino Sans",sans-serif}
.pay-l{padding:36px 40px;background:#fff;border-right:1px solid #E6E9EE}
.pay-r{padding:36px 40px;background:#fff;display:flex;flex-direction:column;gap:12px}
.pay-back{font-size:13px;color:#6B7280;text-decoration:none}
.pay-merchant{display:flex;align-items:center;gap:10px;font-weight:700;color:#1F2937;margin:14px 0 22px}
.pay-merchant img{width:28px;height:28px}
.pay-label{color:#6B7280;font-size:14px;margin:0}
.pay-amount{font-size:40px;font-weight:700;color:#111827;margin:2px 0 18px}
.pay-lines{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid #E6E9EE}
.pay-lines li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #F0F2F5;font-size:14px;color:#374151}
.pay-small{font-size:12px;color:#6B7280;margin:0}
.wallet{border-radius:6px;padding:12px;text-align:center;font-weight:700;color:#fff}
.wallet.apple{background:#000}
.or{text-align:center;color:#9CA3AF;font-size:12px;margin:6px 0;border-top:1px solid #E5E7EB;line-height:0}
.or span{background:#fff;padding:0 10px}
.pay-r label{font-size:13px;color:#374151;display:flex;flex-direction:column;gap:6px}
.pin{border:1px solid #D1D5DB;border-radius:6px;padding:10px 12px;font-size:15px;background:#fff;width:100%}
.pin2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pin2 .pin{border-top:0}
.pay-btn{display:block;text-align:center;background:#0570DE;color:#fff;font-weight:700;border-radius:6px;padding:14px;text-decoration:none;margin-top:6px}
@media (max-width:760px){.pay{grid-template-columns:1fr;margin:0;border-radius:0}.pay-l{border-right:0;border-bottom:1px solid #E6E9EE;padding:24px 20px}.pay-r{padding:24px 20px}}

/* ---------- v7：代表メッセージ・3年後の姿・価値観・目指す姿 ---------- */
.msg{display:grid;grid-template-columns:190px 1fr;gap:40px;align-items:start;max-width:980px;margin:0 auto}
.msg .ph{width:176px;height:176px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(0,30,50,.12)}
.msg .ph-cap{margin-top:12px;font-size:13px;color:var(--sub);line-height:1.6}
.msg .ph-cap b{display:block;color:var(--navy);font-size:16px}
.msg h2{font-size:clamp(22px,3.2vw,29px);margin:6px 0 22px}
.msg-body p{font-size:16px;line-height:2.05}
.msg .sign{margin-top:26px;text-align:right;color:var(--navy);font-weight:700;line-height:1.6;font-size:17px}
.msg .sign small{display:block;font-weight:400;color:var(--sub);font-size:13px}
@media (max-width:760px){.msg{grid-template-columns:1fr;gap:16px}.msg .ph{width:120px;height:120px}}
.section.vision-sec{background:linear-gradient(125deg,var(--navy) 0%,var(--navy-2) 55%,var(--teal) 100%);color:#fff}
.vision-sec .sec-head h2{color:#fff}
.vision-sec .sec-head .label{color:#9fe0bd}
.vision-sec .sec-head p{color:rgba(255,255,255,.88);max-width:46em}
.vision{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vision .vi{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:22px 24px}
.vision .vi .n{font-size:12px;font-weight:700;color:#9fe0bd;letter-spacing:.12em}
.vision .vi h3{color:#fff;font-size:19px;margin:4px 0 8px}
.vision .vi p{margin:0;font-size:15px;color:rgba(255,255,255,.9)}
.vision-note{margin-top:22px;font-size:14px;color:rgba(255,255,255,.85)}
@media (max-width:760px){.vision{grid-template-columns:1fr}}
.values{list-style:none;display:grid;gap:14px}
.values li{display:grid;grid-template-columns:250px 1fr;gap:6px 26px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:8px;padding:20px 24px;align-items:start}
.values .vn{display:block;font-size:12px;font-weight:700;color:var(--green);letter-spacing:.12em}
.values .ven{display:block;font-size:23px;font-weight:700;color:#7A8B98;line-height:1.3;letter-spacing:.01em}
.values .ven b{color:var(--navy)}
.values .vja{font-weight:700;color:var(--navy);font-size:17px;margin:0 0 6px}
.values p{margin:0;font-size:15px}
@media (max-width:640px){.values li{grid-template-columns:1fr;padding:18px}}
.after-head{margin-top:52px}
/* 「目指す姿」の番号つきリストだけに効かせる（後半のタイムテーブル table.tt.after には効かせない） */
ol.after{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;counter-reset:af}
ol.after li{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--radius);padding:20px 22px 20px 64px;position:relative;counter-increment:af}
ol.after li::before{content:counter(af);position:absolute;left:20px;top:20px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
ol.after h3{font-size:17px;margin-bottom:6px;line-height:1.55}
ol.after p{margin:0;font-size:15px}
.hear{border:2px solid var(--green);border-radius:var(--radius);background:var(--green-soft);padding:20px 22px;margin-top:26px}
.hear h2{font-size:18px;margin-bottom:6px}
.hear p{margin:0 0 12px;font-size:15px}
.badge-welcome{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;border-radius:3px;padding:1px 8px;vertical-align:2px;margin:0 2px}
body.review .vision-sec .prp,body.review .vision-sec .chk{color:#0b2a4a}
body.review .vision-sec .prp[data-note]::after,body.review .vision-sec .chk[data-note]::after{color:#0b2a4a}

/* ---------- v8：セミナーの「4つのステップ」表示 ---------- */
.phase{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:4px 0 2px}
.phase .ph-l{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.06em}
.ph-bar{list-style:none;display:flex;gap:3px;margin:0;padding:0}
/* 「扱わない」は白地・点線枠・読める濃さ。中心は●、一部は○を付けて色だけに頼らない */
.ph-bar li{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:3px;background:#fff;color:#6B7D8A;border:1px dashed #C5D0D8;line-height:1.4;letter-spacing:.01em}
.ph-bar li.on{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.ph-bar li.sub{background:#D9EBE1;color:var(--green);border:1px solid #D9EBE1}
.ph-legend{font-size:12px;color:var(--sub);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.ph-legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ph-legend .k-on{background:var(--navy)}.ph-legend .k-sub{background:#D9EBE1}.ph-legend .k-off{background:#fff;border:1px dashed #9fb0bc}
.ph-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--navy);border:1px solid #9fb3c2;background:#fff;border-radius:3px;padding:0 6px;margin-left:8px;vertical-align:1px;white-space:nowrap;line-height:1.6}
.ph-box{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.ph-box .phase{margin-bottom:10px}
.ph-box .ph-bar li{font-size:14px;padding:6px 14px}
.ph-box p{font-size:15px;margin:0 0 8px}
.ph-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ph-items li{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.ph-items li b{color:var(--navy)}
@media (max-width:760px){.ph-box{grid-template-columns:1fr;padding:20px}}
.ph-matrix td,.ph-matrix th{text-align:center}
.ph-matrix td:first-child,.ph-matrix th:first-child{text-align:left}
.ph-matrix .dot-on{color:var(--navy);font-size:18px}
.ph-matrix .dot-sub{color:var(--green);font-size:18px}
.ph-matrix .dot-off{color:#8494A0}
.ph-bar span{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:3px;background:#fff;color:#6B7D8A;border:1px dashed #C5D0D8;line-height:1.4;letter-spacing:.01em}
.ph-bar span.on{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.ph-bar span.sub{background:#D9EBE1;color:var(--green);border:1px solid #D9EBE1}
.ph-bar li.on::before,.ph-bar span.on::before{content:"●";margin-right:3px}
.ph-bar li.sub::before,.ph-bar span.sub::before{content:"○";margin-right:3px}
.ph-box .ph-bar span{font-size:14px;padding:6px 14px}
.card .phase{margin-top:2px}
.ph-items li b{white-space:nowrap}
.ph-matrix{min-width:600px}.ph-matrix td:first-child{min-width:15em}
@media (max-width:560px){.ph-matrix{min-width:0;font-size:12.5px}.ph-matrix td:first-child{min-width:8.5em}.ph-matrix th,.ph-matrix td{padding:8px 4px}.ph-matrix th .small{display:none}}

.sponsor-strip .sp-note{text-align:center;font-size:12px;color:var(--sub);margin:-8px 0 14px}

/* v10: 課題の例・検討中の表示 */
.issues.ex{grid-template-columns:repeat(3,1fr);gap:16px}
.issues.ex .iss{padding:16px 18px}
.issues.ex .iss h3{font-size:17px;margin:8px 0 6px}
.issues.ex .iss p{font-size:14px}
.iss-note{margin:14px 0 22px;font-size:13px;color:var(--muted,#5b6470)}
.badge-plan{display:inline-block;background:#fff;color:#8a5a00;border:1px solid #d9a441;font-size:11px;font-weight:700;border-radius:3px;padding:0 7px;margin-left:8px;vertical-align:2px;line-height:1.7;white-space:nowrap}
.plan-note{margin:14px 0 0;font-size:13px;color:#8a5a00}
@media (max-width:960px){.issues.ex{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.issues.ex{grid-template-columns:1fr}}

/* =====================================================================
   見やすさの調整（2026-10-15）
   ===================================================================== */

/* ヘッダーの主ボタンの文字を白に（.gnav a の紺文字が勝っていた）。角丸も他の主ボタンとそろえる */
.gnav a.btn-primary{color:#fff;padding:10px 18px;border-radius:999px}
.gnav a.btn-primary:hover{color:#fff;background:#1d6b3c}
@media (max-width:900px){.gnav a.btn-primary{margin-top:10px;border-bottom:0}}

/* 見出し・ボタンを文節で改行し、1文字だけの行を作らない（Safari 向けに長い見出しはHTMLに <wbr>） */
h1,h2,h3,h4{word-break:auto-phrase;text-wrap:balance}
.btn,.who-list li,.vision .vi h3,ol.after h3{word-break:auto-phrase;text-wrap:balance}

/* 金額は数字と「円」を分けない。スマホの表の見出し列を狭くしすぎない */
.tbl .num,.tbl .yen{white-space:nowrap}
@media (max-width:640px){.tbl tbody th{white-space:normal;min-width:6.5em;word-break:auto-phrase}}

/* PCで説明文の1行が長くなりすぎないようにする */
.sec-head p{max-width:42em}
.faq .a{max-width:46em}
.info,.box > p,.three p,.ph-box p{max-width:46em}

/* 申込の判断に要る注記は14px以上。箇条書きの注記は本文色で読みやすく */
ul.small{font-size:15px;color:var(--ink);line-height:1.8}
.note.who-note{margin-top:14px;font-size:15px;color:var(--ink)}

/* スマホで指で押しやすい大きさに（目次のチップ・フッターのリンク） */
.toc a{padding:10px 16px;font-size:14px}
.site-footer li{margin:0}
.site-footer li a{display:inline-block;padding:9px 0}

/* フォームの2つ並びの項目（スマホで1列になったとき）の間隔をほかとそろえる */
.grid2{gap:22px 14px;margin-bottom:22px}
.grid2 > .q{margin-bottom:0}

/* スマホでは右側の「お申し込み内容」の箱を出さない（内訳は ④ の表と画面下の合計にある） */
@media (max-width:900px){.summary{display:none}}

/* スマホのセクションの上下の余白を詰める */
@media (max-width:760px){.section{padding:52px 0}.section.tight{padding:36px 0}}

/* 小さな札を3種類にそろえる
   状態＝受付中は緑塗り／受付開始前・検討中は白地＋灰色の枠
   分類＝紺塗り（軸・WELCOME・課題の番号など）
   補足＝白地＋紺の枠（ステップのタグなど）
   ※「仮」（.tag-tmp・.tmp-banner）は橙。黄色の未確定の表示とも、上の3種類とも別にする */
.card .status,.badge-wait,.badge-plan,.badge-welcome,.three .tag2,.wr .a .tag,.iss .no,.ph-tag,.tag-tmp{border-radius:3px;font-weight:700;letter-spacing:.02em;line-height:1.6;white-space:nowrap}
.card .status{font-size:12px;padding:1px 10px;border:1px solid var(--green)}
.card .status.wait{background:#fff;color:var(--sub);border:1px solid #B8C4CD}
.badge-wait{font-size:12px;padding:1px 10px;background:#fff;color:var(--navy);border:1px solid #fff}
.badge-plan{font-size:11px;padding:0 7px;background:#fff;color:var(--sub);border:1px solid #B8C4CD}
.plan-note{color:var(--sub)}
.badge-welcome,.three .tag2,.wr .a .tag,.iss .no{background:var(--navy);color:#fff;font-size:11px;padding:0 8px}
.ph-tag{background:#fff;color:var(--navy);border:1px solid var(--navy);font-size:11px;padding:0 6px}

/* ===== 「仮」の表示（第2回・第3回）。未確定の表示の黄色と見分けがつくよう、白地＋橙の枠＋「仮」の文字 ===== */
.tmp-banner{background:#fff;color:var(--ink);border:2px solid #D9731A;border-radius:6px;padding:10px 14px;margin-bottom:18px;font-size:14px;line-height:1.7;max-width:46em;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.tmp-banner::before{content:"仮";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:4px;background:#C85A00;color:#fff;font-weight:700;font-size:14px;line-height:1}
.tmp-banner b{color:#A84A00;font-weight:700;margin-right:.8em;align-self:center}
.tmp-banner span{flex:1 1 20em}
@media (max-width:640px){.tmp-banner b{display:block;margin-right:0}.tmp-banner span{flex-basis:100%}}
.tag-tmp{display:inline-block;font-size:12px;padding:0 9px;background:#fff;color:#A84A00;border:1px solid #D9731A}

/* ===== セミナーのカード ===== */
.card .c-tags{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start}
.card .c-tags .status{align-self:auto}
.card .c-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.card .c-acts + .c-go{margin-top:0}
.card .c-sponsor{font-size:12px;color:var(--sub);line-height:1.6;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--green)}
.card.featured:hover{box-shadow:0 8px 22px rgba(0,40,60,.08)}

/* ===== 最初の画面（ヒーロー） ===== */
/* event-01：副題の下の1行（ホームの .hero-lead は今のまま） */
.page-event-01 .hero-lead{font-size:15px;line-height:1.7;margin:10px 0 14px;opacity:.9;max-width:40em;color:#fff}
.page-event-01 .hero-sub2{margin-bottom:0}
.hero-meta .hero-fee{flex-basis:100%}
.hero-apply{color:#fff;font-size:14px;font-weight:700;letter-spacing:.08em;margin:0 0 8px}
.hero-sublink{margin:12px 0 0;font-size:14px;line-height:1.7}
.hero-sublink a{color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:3px}
.hero-sublink a:hover{color:#fff}
/* 受付開始前は、押せない枠ボタンをやめて控えめな注記にする。押せる LINE を主役に */
.hero .btn-disabled{background:none;border:0;border-left:3px solid rgba(255,255,255,.6);border-radius:0;padding:4px 0 4px 12px;color:#fff;cursor:default;font-size:15px;box-shadow:none;align-items:flex-start;text-align:left}
.hero .btn-line{box-shadow:0 4px 0 #04913E,0 0 0 3px rgba(255,255,255,.18)}

/* 「この回で扱うステップ」の説明1行 */
.ph-lead{font-size:14px;color:var(--sub);margin:0 0 10px}

/* ホーム「目指す姿」（見出しだけ）：余白を詰める */
ol.after.after-short li{padding:16px 20px 16px 60px;display:flex;align-items:center;min-height:62px}
ol.after.after-short li::before{top:50%;transform:translateY(-50%)}
ol.after.after-short h3{margin-bottom:0}

/* ===== 申込フォーム・完了ページ ===== */
/* ?event=01 で来た人だけに出す第1回のカード（紺の見出し帯の上） */
.form-ev{margin-top:16px;padding:12px 16px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:rgba(255,255,255,.08);max-width:42em;font-size:14px;line-height:1.7}
.form-ev a{color:#fff;text-decoration:underline}
/* ④ 入力したメールアドレスを大きく見せる */
.mail-show{margin:0 0 14px;padding:12px 16px;border-radius:10px;background:var(--soft);border:1px solid var(--line)}
.mail-show b,.mail-show strong{font-size:20px;color:var(--navy);overflow-wrap:anywhere}
/* 完了ページのアンケートは控えめに（主役は LINE の主ボタン） */
.page-thanks .hear{background:#fff;border:1px solid var(--line)}
.page-thanks .hear h2{font-size:17px}

/* 見た目の確認で直したところ（2026-10-15）：●○を足した分、スマホでステップの札がはみ出さないようにする */
.ph-box > *{min-width:0}
.ph-bar{flex-wrap:wrap}
@media (max-width:560px){.ph-box .ph-bar li,.ph-box .ph-bar span{font-size:13px;padding:5px 9px}}
/* 最初の画面の小さな文字も文節で改行する */
.eyebrow,.hero-lead,.hero-meta span,.hero-sub,.hero-sub2,.tmp-banner,.page-hero p{word-break:auto-phrase}
/* カードの中のステップの札は詰めて1行に収める */
.card .ph-bar{gap:2px}
.card .ph-bar li,.card .ph-bar span{padding:2px 6px;font-size:11px}
.card .ph-bar .on::before,.card .ph-bar .sub::before{margin-right:2px}

/* 企画中のセミナー（日程未定・ページなし） */
.card.plan{border-style:dashed;background:#FBFCFD}
.card .c-date .c-theme{display:inline-block;margin-left:10px;font-size:13px;font-weight:700;color:var(--green);border:1px solid var(--green);border-radius:3px;padding:0 8px;vertical-align:4px}
.card h3 .c-sub{display:block;font-size:14px;font-weight:700;color:var(--sub);margin-top:4px;line-height:1.6}
.card .c-go.plain{color:var(--sub);font-weight:400;font-size:13px}
.plan-list{margin-top:18px;border:1px dashed #B8C4CD;border-radius:var(--radius);padding:14px 18px;background:#FBFCFD}
.plan-list .pl-h{font-weight:700;color:var(--navy);margin:0 0 6px}
.plan-list .pl-h span{font-size:12px;font-weight:700;color:var(--sub);border:1px solid #B8C4CD;border-radius:3px;padding:0 8px;margin-left:8px;vertical-align:2px}
.plan-list ul{list-style:none;margin:0;padding:0}
.plan-list li{padding:4px 0;font-size:15px;line-height:1.6}
.plan-list .pl-k{display:inline-block;min-width:8em;font-size:13px;font-weight:700;color:var(--green)}
@media (max-width:600px){.plan-list .pl-k{display:block}}

/* 一緒につくる（持ち寄り・発表・運営） */
.cocreate{margin-top:26px;background:#fff;border:2px solid var(--green);border-radius:14px;padding:24px 26px}
.section.soft .cocreate{margin-top:0}
.cocreate h3{font-size:clamp(19px,2.6vw,23px);color:var(--navy)}
.cocreate p{margin:8px 0 0}
.co-ways{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.co-ways li{background:#F2F8F4;border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.7}
.co-ways li b{display:block;color:var(--green);font-size:15.5px;margin-bottom:2px}
.cocreate .co-cta{margin-top:14px;font-size:14.5px}

.cocreate .co-ask{margin-top:16px;padding-top:14px;border-top:1px dashed #9CC5AA;font-size:14.5px}
.cocreate .co-ask b{display:block;color:var(--navy);font-size:16px;margin-bottom:2px}

/* 第2回（福岡）：タイトルの下の小さな添え書き（「OPTS in 福岡｜現地開催のみ｜セミナー＆ディスカッション」） */
.ev-sub{display:block;margin-top:4px;font-size:12.5px;font-weight:500;letter-spacing:.02em;line-height:1.5;opacity:.75}
.ev-sub-line{margin:10px 0 14px;font-size:14px;letter-spacing:.04em;opacity:.85;word-break:auto-phrase}