/* =========================================================
   入会案内（join.php）ページ固有スタイル
   共通トークン・ヘッダー・フッター・ボタンは common.css を継承
   ========================================================= */

/* --- ページヒーロー --- */
.join-hero{background:linear-gradient(160deg,var(--navy-950),var(--navy-800));color:#fff;padding:64px 0 56px}
.join-hero .breadcrumbs{font-size:12px;color:#a9c2d6;margin-bottom:22px}
.join-hero .breadcrumbs a{color:#cfe0ee}.join-hero .breadcrumbs a:hover{color:#fff;text-decoration:underline}
.join-hero .kicker{color:var(--accent-editorial-on-dark)}
.join-hero h1{font-size:clamp(28px,4vw,42px);letter-spacing:.04em;margin:6px 0 18px;line-height:1.3}
.join-hero .join-lead{max-width:760px;color:#dbe7f1;font-size:15px;line-height:2;margin:0 0 20px}
.join-hero .hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.join-hero .hero-note{margin:20px 2px 0;font-size:12.5px;color:#93aac1;line-height:1.8}
.join-hero .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.join-hero .hero-text{min-width:0}
.join-hero .hero-visual{min-width:0}

/* --- 画像プレースホルダ枠（本番画像は後日差し替え） --- */
.img-frame{position:relative;border:2px dashed #b9cddb;border-radius:var(--radius);background:linear-gradient(135deg,var(--sky-50),#fff);display:grid;place-items:center;text-align:center;color:#8aa0b2;padding:28px;min-height:240px}
.img-frame .imgf-ico{opacity:.55;margin-bottom:10px;color:#7f97ab}
.img-frame strong{display:block;font-size:13px;color:#6d8398;font-weight:800;letter-spacing:.06em}
.img-frame small{display:block;font-size:11.5px;color:#9fb2c1;margin-top:5px}
.img-frame.wide{min-height:300px}
.img-frame.on-dark{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05);color:#aec3d6}
.img-frame.on-dark .imgf-ico{color:#bcd3e6}
.img-frame.on-dark strong{color:#cfe0ee}.img-frame.on-dark small{color:#9fb8cc}

/* --- ページ内目次（アンカーTOC・about.php と統一） --- */
.join-toc{border-bottom:1px solid var(--line);background:var(--sky-50);position:sticky;top:88px;z-index:40}
.join-toc ul{display:flex;flex-wrap:wrap;gap:8px 4px;list-style:none;margin:0;padding:14px 0;width:var(--container);margin-inline:auto}
.join-toc a{display:inline-block;padding:8px 16px;font-size:13px;font-weight:700;color:#33475a;border-radius:999px;transition:.2s}
.join-toc a:hover{background:#fff;color:var(--blue-600);box-shadow:var(--shadow)}

/* --- セクション枠 --- */
.join-sec{padding:76px 0}
.join-sec.alt{background:var(--sky-50)}
.join-sec.dark{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));color:#fff}
.join-sec .sec-head{margin-bottom:36px}
.join-sec .sec-head h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:.04em;margin:6px 0 14px;color:var(--navy-900)}
.join-sec.dark .sec-head h2{color:#fff}
.join-sec .sec-copy{color:var(--muted);font-size:14.5px;line-height:2;margin:0}
.join-sec.dark .sec-copy{color:#c6d7e6}

/* --- 入会の前提 --- */
.target-lead{margin-bottom:22px}
.target-lead p{color:#2c3e4e;font-size:14.5px;line-height:2.05;margin:0}
.target-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.target-ico{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.target-ico .ti-icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--blue-600),var(--navy-800))}
.target-ico p{margin:0;font-size:14px;font-weight:700;color:var(--navy-900)}
.target-note{margin:22px 2px 0;font-size:13px;color:var(--muted);line-height:1.9}

/* --- 会員メリット6カード --- */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)}
.value-card .vc-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:19px;font-weight:800;color:#fff;background:linear-gradient(150deg,var(--blue-600),var(--navy-800));margin-bottom:15px}
.value-card h3{margin:0 0 9px;font-size:15.5px;color:var(--navy-900)}
.value-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.9}

/* --- 会員の種別（2カラム） --- */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.type-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px;box-shadow:var(--shadow)}
.type-card .kicker{margin-bottom:8px}
.type-card h3{margin:0 0 12px;font-size:19px;color:var(--navy-900)}
.type-card p{margin:0 0 12px;color:#2c3e4e;font-size:14px;line-height:1.95}
.type-card .type-note{margin:0;font-size:12.5px;color:#8795a0;line-height:1.7}

/* --- 会員店表示（バッジ） --- */
.badge-block{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.badge-preview{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 24px;box-shadow:var(--shadow)}
.badge-preview img{width:46px;height:46px}
.badge-preview strong{display:block;font-size:15px;color:var(--navy-900)}
.badge-preview small{display:block;font-size:11px;color:#6c7b86;margin-top:3px}
.code-box{background:var(--navy-950);color:#d7e6f2;font-family:"Consolas","Courier New",monospace;font-size:12.5px;line-height:1.7;padding:18px 20px;border-radius:12px;overflow-x:auto;white-space:pre;margin:0 0 12px}
.copy-btn{min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--navy-900);font-weight:700;font-size:13px;cursor:pointer;transition:.2s}
.copy-btn:hover{background:var(--sky-50);border-color:var(--blue-500)}
.badge-note{margin:14px 2px 0;font-size:12.5px;color:var(--muted);line-height:1.8}

/* --- 得られること / 得られないこと（2カラム） --- */
.honest-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.honest-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;box-shadow:var(--shadow)}
.honest-col h3{margin:0 0 16px;font-size:16px;color:var(--navy-900);display:flex;align-items:center;gap:10px}
.honest-col ul{list-style:none;margin:0;padding:0}
.honest-col li{position:relative;padding:8px 0 8px 30px;font-size:14px;color:#2c3e4e;line-height:1.7;border-top:1px solid var(--sky-100)}
.honest-col li:first-child{border-top:none}
.honest-col.can li::before{content:"✓";position:absolute;left:2px;top:8px;color:#1f8a5b;font-weight:800}
.honest-col.cannot li::before{content:"—";position:absolute;left:2px;top:8px;color:#9aa7b2;font-weight:800}
.honest-col.can h3{color:#1f6d4c}

/* --- 入会の流れ（ステップ） --- */
.flow-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.flow-step{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);position:relative}
.flow-step::before{content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--blue-600),var(--navy-800));color:#fff;font-weight:800;font-size:16px;margin-bottom:14px}
.flow-step h3{margin:0 0 8px;font-size:15px;color:var(--navy-900)}
.flow-step p{margin:0;color:var(--muted);font-size:13px;line-height:1.85}
.flow-note{margin:22px 2px 0;font-size:12.5px;color:var(--muted);line-height:1.8}

/* --- よくあるご質問 --- */
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;color:var(--navy-900);font-size:14.5px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"＋";color:var(--blue-600);font-weight:800;flex:none;transition:.2s}
.faq-item[open] summary::after{content:"−"}
.faq-item .faq-a{padding:0 24px 22px;color:#2c3e4e;font-size:14px;line-height:2;margin:0}

/* --- 申込フォーム --- */
.join-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 38px}
.form-legend{font-size:13px;color:var(--muted);margin:0 0 22px}
.form-legend .req{color:#b23b3b;font-weight:800}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1 / -1}
.field label{font-size:13.5px;font-weight:700;color:var(--navy-900)}
.field label .req{color:#b23b3b;margin-left:5px;font-size:11px}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;font-size:16px;color:var(--ink);background:#fdfefe;border:1px solid #c9d9e2;border-radius:8px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical;line-height:1.8}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(18,149,207,.15);outline:none}
.field .form-help{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
fieldset.field{border:none;padding:0;margin:0}
fieldset.field legend{font-size:13.5px;font-weight:700;color:var(--navy-900);padding:0;margin-bottom:2px}
.radio-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px}
.radio-row label{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px;color:#2c3e4e}
.radio-row input{width:auto;min-height:0;margin:0}
.agree-field{flex-direction:row;align-items:flex-start;gap:10px}
.agree-field input{width:auto;min-height:0;margin-top:4px}
.agree-field label{font-weight:500;font-size:13.5px;color:#2c3e4e;line-height:1.7}
.agree-field a{color:var(--blue-600);font-weight:700;text-decoration:underline}
.form-actions{margin-top:26px}
.status-message{margin-top:16px;padding:14px 18px;border-radius:10px;background:var(--sky-100);color:var(--navy-900);font-size:13.5px;font-weight:700;display:none}
.status-message.is-shown{display:block}

/* --- 会費テーブル（2カラム・about.php の fact-table と同型） --- */
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}
.fact-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.fact-table{width:100%;border-collapse:collapse;font-size:14px}
.fact-table caption{text-align:left;font-weight:800;color:var(--navy-900);padding:18px 22px 0;letter-spacing:.05em}
.fact-table th,.fact-table td{padding:15px 22px;vertical-align:top;border-top:1px solid var(--line);text-align:left;line-height:1.85}
.fact-table tr:first-child th,.fact-table tr:first-child td{border-top:none}
.fact-table th{width:38%;color:var(--navy-800);font-weight:700;background:var(--sky-50);white-space:nowrap}
.fact-table td small{color:#8795a0}

/* --- お問い合わせ導線 --- */
.join-contact{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:var(--sky-100);border-radius:var(--radius);padding:30px 34px}
.join-contact p{margin:0;color:var(--navy-900);font-weight:700;font-size:15px}
.join-contact .jc-actions{display:flex;gap:12px;flex-wrap:wrap}
.join-basis{border-top:1px solid var(--line);padding:26px 0 0;margin-top:26px}
.join-basis address{font-style:normal;color:var(--muted);font-size:12.5px;line-height:1.9}
.join-basis a{color:var(--blue-600);font-weight:700}

/* --- レスポンシブ --- */
@media (max-width:860px){
  .value-grid,.target-icons{grid-template-columns:1fr}
  .join-hero .hero-grid{grid-template-columns:1fr;gap:32px}
  .join-hero .hero-visual{order:-1}
  .type-grid,.badge-block,.honest-grid,.about-grid{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr 1fr}
  .join-toc{position:static}
}
@media (max-width:560px){
  .flow-steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .join-toc a,.copy-btn,.field input,.field select,.field textarea,.faq-item summary::after{transition:none}
}