:root{--fs-min:17px;--fs-ui:15px}@media(min-width:900px){:root{--fs-min:20px;--fs-ui:16px}} /* v4 LP追加（入会案内・トレーニング）: lp-base.css（=ALC LPデザイン）に無い部品。料金・比較表・講師・声・FAQ・末尾フォーム */ .tmp{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:#999;border-radius:3px;padding:0 6px;line-height:1.7;vertical-align:middle;margin-left:6px;letter-spacing:0} .hero-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 30px 70px -30px rgba(60,48,20,.45)} .hero-card .hc-t{font-size:14px;font-weight:800;letter-spacing:.1em;color:var(--gold-d)} .hero-card .tier{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)} .hero-card .tier:first-of-type{border-top:0} .hero-card .tier b{font-size:16px} .hero-card .tier span{grid-column:1;font-size:15px;color:#555;line-height:1.7;margin-top:2px} .hero-card .tier em{grid-row:1/3;font-style:normal;font-weight:800;color:var(--gold-d);font-size:15px;white-space:nowrap} .hero-card .tier.add{background:var(--paper);margin:0 -22px;padding:12px 22px} .hero-card .tier.add b::before{content:"＋ ";color:var(--gold-d)} .plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;align-items:stretch} .plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 30px;position:relative;display:flex;flex-direction:column;box-shadow:0 6px 16px -12px rgba(60,48,20,.25)} .plan.pr{border:1px solid var(--line)} /* C73 L6: おすすめも同じ枠線・影 */ .plan .badge{position:absolute;top:-14px;left:24px;background:var(--gold);color:#fff;font-size:13px;font-weight:800;letter-spacing:.06em;padding:4px 14px;border-radius:999px} .plan .pk{font-size:15px;font-weight:800;letter-spacing:.12em;color:var(--gold-d)} .plan .pn{font-size:28px;font-weight:800;margin-top:4px;line-height:1.3} .plan .pp{margin-top:14px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .plan .pp b{font-size:38px;line-height:1;font-weight:800} .plan .pp small{font-size:max(15px,var(--fs-ui));color:#555} .plan .pm{font-size:16px;color:#555;margin-top:10px} .plan ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px} .plan li{position:relative;padding-left:26px;font-size:16px;line-height:1.75} .plan li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)} .plan li.hd{padding-left:0;font-weight:800;color:var(--gold-d);font-size:14px;letter-spacing:.06em;margin-top:6px} .plan li.hd::before{display:none} .plan .pcta{margin-top:auto;padding-top:24px} .plan .pcta .btn{display:block;text-align:center} .addons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px} .addon{background:var(--paper);border:1.5px dashed var(--gold-l);border-radius:16px;padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center} .addon b{font-size:17px} .addon b::before{content:"＋ ";color:var(--gold-d)} .addon span{grid-column:1;font-size:15.5px;color:#555;line-height:1.75} .addon a{grid-row:1/3;font-size:14px;font-weight:800;color:var(--gold-d);white-space:nowrap;border-bottom:1.5px solid currentColor;text-decoration:none} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px} .stp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;position:relative} .stp .n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:#fff;font-weight:800;font-size:max(14px,var(--fs-ui))} .stp h3{margin-top:14px;font-size:19px;line-height:1.5} .stp p{margin-top:10px;font-size:max(16px,var(--fs-min));color:#555} .cmp{margin-top:44px;overflow-x:auto;-webkit-overflow-scrolling:touch} .cmp table{border-collapse:collapse;width:100%;min-width:720px;font-size:16px;line-height:1.75;background:#fff} .cmp th,.cmp td{border:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top} .cmp thead th{background:#221f18;color:#fff;font-weight:800;white-space:nowrap} .cmp thead th.hot{background:var(--gold)} .cmp tbody th{background:var(--paper);font-weight:800;white-space:nowrap;width:130px} .cmp td b{color:var(--gold-d)} .courses{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px} .crs{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;overflow:hidden;display:flex;flex-direction:column} .crs.hot{border:2px solid var(--gold);box-shadow:0 30px 70px -40px rgba(60,48,20,.4)} .crs .ch{background:#221f18;color:#fff;padding:18px 24px} .crs.hot .ch{background:var(--gold)} .crs .ch .ck{font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--gold-l)} .crs.hot .ch .ck{color:#fff8e9} .crs .ch h3{margin-top:4px;font-size:21px;line-height:1.4} .crs .cb{padding:22px 24px;display:flex;flex-direction:column;flex:1} .crs .st{display:inline-block;font-size:14px;font-weight:800;color:var(--red);border:1.5px solid var(--red);border-radius:999px;padding:2px 12px;align-self:flex-start} .crs .st.ok{color:#2f7d4f;border-color:#2f7d4f} .crs p{margin-top:14px;font-size:max(16px,var(--fs-min));color:#555} .crs dl{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:max(15.5px,var(--fs-ui));line-height:1.7} .crs dt{font-weight:800;color:var(--gold-d);white-space:nowrap} .crs dd{margin:0} .crs .price{margin-top:auto;padding-top:20px;font-size:max(15.5px,var(--fs-ui));color:#555;line-height:1.8} .crs .price b{font-size:26px;color:var(--ink);font-weight:800} .crs .cta{margin-top:14px} .crs .cta .btn{display:block;text-align:center;padding:14px 20px;font-size:16px} .tutor{display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center;margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 36px} .tutor .ph{width:140px;height:140px;border-radius:50%;overflow:hidden;border:3px solid var(--paper2);background:var(--paper2)} .tutor .ph img{width:100%;height:100%;object-fit:cover} .tutor b{font-size:22px;display:block} .tutor small{display:block;color:var(--gold-d);font-weight:700;font-size:max(15px,var(--fs-ui))} .tutor p{margin-top:14px;font-size:max(16px,var(--fs-min));color:#555} .voices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .voice{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;font-size:max(16px,var(--fs-min));line-height:1.85;position:relative} .voice::before{content:"“";position:absolute;left:16px;top:6px;font-size:52px;color:var(--gold-l);font-family:Georgia,serif;line-height:1} .voice p{padding-top:12px} .voice b{display:block;margin-top:14px;font-size:max(14px,var(--fs-ui));color:var(--gold-d);text-align:right} .faq{margin-top:36px;display:grid;gap:10px} .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 22px} .faq summary{cursor:pointer;font-weight:800;padding:18px 32px 18px 0;list-style:none;position:relative;font-size:16.5px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"＋";position:absolute;right:0;top:16px;color:var(--gold-d);font-size:20px} .faq details[open] summary::after{content:"－"} .faq details p{color:#555;font-size:max(16px,var(--fs-min));padding:0 0 20px} /* 末尾フォーム */ #apply{background:linear-gradient(135deg,#2a2419,#221f18);color:#f4efe2} #apply .sec-tag{color:var(--gold-l)} #apply .sec-tag .u{border-color:var(--gold-l)} #apply h2{color:#fff} #apply .sec-lead{color:#d8d0bf} .form{background:#fff;color:var(--ink);border-radius:22px;padding:36px 40px;margin:36px auto 0;max-width:820px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)} .form .steps2{display:flex;gap:8px;font-size:14px;font-weight:800;color:#777;margin-bottom:24px;flex-wrap:wrap} .form .steps2 span{padding:5px 14px;border-radius:999px;background:var(--paper2)} .form .steps2 span.on{background:var(--gold);color:#fff} .fg{display:grid;gap:18px} .fr{display:grid;gap:6px} .fr label{font-size:max(15px,var(--fs-ui));font-weight:800} .fr label .rq{color:var(--red);font-size:12px;margin-left:6px;font-weight:800} .fr label .op{color:#777;font-size:12px;margin-left:6px;font-weight:700} .fr input[type=text],.fr input[type=email],.fr input[type=tel],.fr select,.fr textarea{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1px solid #cfcabd;border-radius:10px;background:#fff;color:var(--ink)} .fr input:focus,.fr select:focus,.fr textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)} .fr textarea{min-height:120px;resize:vertical} .fr .err{display:none;font-size:max(14px,var(--fs-ui));color:var(--red)} .fr.bad input,.fr.bad select,.fr.bad textarea{border-color:var(--red)} .fr.bad .err{display:block} .fr2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .radios{display:grid;gap:8px} .radios label{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:400;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer} .radios label:has(input:checked){border-color:var(--gold);background:var(--paper)} .radios input{margin-top:5px} .fr.chk label{display:flex;gap:10px;font-weight:400;font-size:max(15px,var(--fs-ui));align-items:flex-start} .fr.chk a{color:var(--gold-d);text-decoration:underline} .form .act{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px} .form .act .btn{padding:14px 30px;font-size:16px;border:0;cursor:pointer;font-family:inherit} .form .act .btn-ghost{border:1.5px solid var(--gold)} .form .fine{font-size:max(14px,var(--fs-ui));color:#777;margin-top:18px} .form .proto{display:inline-block;font-size:14px;color:#fff;background:#999;border-radius:6px;padding:4px 10px;margin-top:14px} .confirm{display:none} .form.step2 .fg,.form.step2 .act.a1{display:none} .form.step2 .confirm{display:block} .cf{border-top:1px solid var(--line)} .cf div{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px} .cf div b{color:#777;font-weight:800} .done{display:none;text-align:center;padding:24px 0 8px} .done .ck{width:64px;height:64px;border-radius:50%;background:var(--paper);color:var(--gold-d);display:grid;place-items:center;margin:0 auto 16px;font-size:28px;font-weight:800} .done h3{font-size:22px} .done p{margin-top:12px;font-size:16px;color:#555} .form.step3 .fg,.form.step3 .act,.form.step3 .confirm,.form.step3 .steps2,.form.step3 .fine{display:none} .form.step3 .done{display:block} .sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:10px;align-items:center;transform:translateY(100%);transition:transform .3s ease} .sticky.on{transform:none} .sticky .btn{flex:1;text-align:center;padding:14px 16px;font-size:16px} @media(max-width:860px){ .plans,.addons,.courses,.voices{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr} .tutor{grid-template-columns:1fr;text-align:center;padding:28px 22px} .tutor .ph{margin:0 auto} .form{padding:26px 20px;border-radius:16px} .fr2{grid-template-columns:1fr} .cf div{grid-template-columns:100px 1fr} } @media(min-width:861px){ .sticky{display:none} } @media(prefers-reduced-motion:reduce){ .sticky{transition:none} } /* v6: セクションリードの複数段落（芹澤文体＝前提→理由→仕組み の3段落）。1段落目は本番ALC LPの .sec-lead と同じ */ .sec-leads{max-width:780px} .sec-leads .sec-lead+.sec-lead{margin-top:14px} .sec-leads .tmp{margin-left:0;margin-right:6px} /* v6: 支援会社枠内のリンク（inline style をやめてCSSへ） */ .biz .note a{color:var(--gold-d);text-decoration:underline} .faq details p a{color:var(--gold-d);text-decoration:underline} /* v6: ボタン内の記号（→ ←）を使わない方針に合わせ余白のみ */ /* v6 授業を受ける: コース副題・詳細リンク・WHY番号 */ .crs .csub{margin-top:12px;font-size:16px;font-weight:700;color:var(--gold-d)} .crs .cb a.more{display:inline-block;margin-top:14px;font-size:max(15px,var(--fs-ui));font-weight:700;color:var(--gold-d);text-decoration:underline;text-align:center;align-self:center} .minis.whys .mini{position:relative;padding-top:30px} .minis.whys .mini .n{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:#fff;font-weight:800;font-size:14px;margin-bottom:14px} .minis.whys .mini h3{font-size:20px} .minis.whys .mini p{font-size:max(16px,var(--fs-min));line-height:1.9} .minis.whys .mini p a{color:var(--gold-d);text-decoration:underline} .mini+.sec-close,.minis+.sec-close{margin-top:36px} /* v6 入会する: h1 2行目「マーケターの手元にないのか」をPCで1行に収める */ body[data-here="join"] .hero-grid h1{font-size:clamp(26px,3.4vw,40px)} @media(max-width:400px){ body[data-here="join"] .hero-grid h1 .nb{white-space:normal} } /* ぶら下がり対策（9/9）: 本文 pretty・見出し balance（lp-base の p{pretty} を補完） */ li,dd,dt,td,th,small,summary,label,.sec-close,.crs p,.mini p,.stp p,.voice p,.faq p,.pwg-intro{text-wrap:pretty} h1,h2,h3,h4,.pn,.sec-tag{text-wrap:balance} .cmp td,.cmp th,.crs dd,.pack td,.hero-card .tier span{text-wrap:balance} .nb,span.nb{white-space:nowrap!important;text-wrap:nowrap!important} /* 9/9 最小20pxに合わせて: オプションカードは見出し1行→リンクを下段に */ .addon{grid-template-columns:1fr} .addon a{grid-row:auto;justify-self:start;margin-top:8px} .addon span{grid-column:auto} /* 9/11: alc/ STEP2 見出し「ケースレビューで練習」が 900〜1100px で「練習」だけぶら下がる（本番ALC LPと同じ2分割 .nb）。カード幅に収まる大きさへ */ @media (min-width:900px) and (max-width:1100px){ .flow .step.hot h3{font-size:20px} } /* 9/11 X49 村山: 講座詳細（training/basics/・cep/）にパンくず。下層ページ（sub.css .ph .crumb）と同じ書式。小見出し「EBMIカレッジ トレーニング」はパンくずに置き換え */ .lp .hero .crumb{font-size:max(14px,var(--fs-ui));color:rgba(20,26,42,.72);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} /* 9/11 村山: リンク部分は色＋下線で視覚的にリンクと分かるように。現在地は通常色 */ .lp .hero .crumb a{color:#8f7534;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .lp .hero .crumb a:hover{color:#141a2a} /* 9/13 村山: program/ の .alc-box p{text-indent:1em}（本番LP由来）の段落で、nohang.js が末尾4文字を包む .nb に Chrome が text-indent を再適用し 「かもしれ　ません」のように語中に1文字分の空白が出る。.nb は字下げを継承しない（本番の字下げ自体は維持） */ .nb,span.nb{text-indent:0} /* 9/13 村山: 文章段落と写真のスペースが狭い→広げる（program/ .photo2 18px・alc/ .photo-grid 24px → 36px） */ .lp .photo2,.lp .photo-grid{margin-top:36px} /* 9/13 村山: program/ 「各社の事例や意見交換ベースで始めてもOK！」枠の箇条書きに行頭インデント（段落の字下げ1emに揃えて右へ） */ .lp[data-here="program"] .alc-box ul{padding-left:1em} /* 9/13 村山: テキストエリアの右端を画像表示エリア（コンテナ）の端まで広げる。alc/・program/ の LP 全体（本番LPの max-width 780/760px を解除） */ .lp[data-here="alc"] .lead,.lp[data-here="alc"] .sec-lead,.lp[data-here="alc"] .sec-close, .lp[data-here="program"] .lead,.lp[data-here="program"] .sec-lead,.lp[data-here="program"] .sec-leads,.lp[data-here="program"] .sec-close, .lp[data-here="program"] .alc-box p,.lp[data-here="program"] .price-box .p-note{max-width:none} /* 9/19 村山: 授業を受ける・入会案内も同様に段落の右端をコンテナ端まで広げる */ .lp[data-here="training"] .lead,.lp[data-here="training"] .sec-lead,.lp[data-here="training"] .sec-leads,.lp[data-here="training"] .sec-close, .lp[data-here="join"] .lead,.lp[data-here="join"] .sec-lead,.lp[data-here="join"] .sec-leads,.lp[data-here="join"] .sec-close{max-width:none} /* ═══════ v7（2026-09-15 芹澤メモ「授業と入会」）: 左右分割の講座案内・特典2×2・学習リソース ═══════ */ /* 授業を受ける: お悩み2枠（個人／組織）の箇条書き */ .prob.prob2{grid-template-columns:1fr 1fr} .prob2 .card h3{min-height:0;font-size:21px} .ngl{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px} .ngl li{position:relative;padding-left:1.4em;font-size:max(16px,var(--fs-min));color:var(--sub);line-height:1.8} .ngl li::before{content:"・";position:absolute;left:.2em;top:0;color:var(--gold-d);font-weight:800} /* 特色: 講演・レビュー写真 */ .feat-photos{margin-top:36px} .feat-photos figure{margin:0} .feat-photos img{aspect-ratio:16/10} .feat-photos .photo-cap{font-weight:700;color:var(--gold-d)} /* 講座案内: 左＝説明とボタン／右＝仕様と料金 */ .crows{display:grid;gap:22px;margin-top:44px} .crow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden} .crow.hot{border:2px solid var(--gold);box-shadow:0 30px 70px -40px rgba(60,48,20,.4)} .crow .cl{padding:30px 32px 30px} .crow .ck{font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--gold-d)} .crow .cl h3{margin-top:8px;font-size:23px;line-height:1.45} .crow .cl p{margin-top:14px;font-size:max(16px,var(--fs-min));color:var(--sub)} .crow .clinks{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap} .crow .clinks .btn{padding:13px 24px;font-size:16px} .crow .cr{background:var(--paper);border-left:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column} .crow .cr dl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:max(15.5px,var(--fs-ui));line-height:1.7;margin:0} .crow .cr dt{font-weight:800;color:var(--gold-d);white-space:nowrap} .crow .cr dd{margin:0} .crow .cr .price{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);font-size:max(15.5px,var(--fs-ui));color:var(--sub);line-height:1.9} .crow .cr .closed{margin:10px 0 0;font-size:max(14px,var(--fs-ui));color:var(--sub);line-height:1.7} .crow .cr .price b{font-size:26px;color:var(--ink);font-weight:800} .crow .cr .price+.price{margin-top:0;padding-top:0;border-top:0} .crow .cr.soon{justify-content:flex-start} .crow .cr.soon .cs{font-size:22px;font-weight:800;letter-spacing:.06em;color:var(--gold-d)} .crow .cr.soon ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px} .crow .cr.soon li{font-size:max(16px,var(--fs-min));font-weight:700;color:var(--ink)} /* 入会案内: 会員特典 2×2 */ .benefits{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px} .bnf{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 28px 30px;position:relative} .bnf .n{display:inline-block;font-size:26px;font-weight:800;color:var(--gold-d);line-height:1} .bnf h3{margin-top:10px;font-size:22px;line-height:1.45} .bnf p{margin-top:12px;font-size:max(16px,var(--fs-min));color:var(--sub)} /* 入会案内: 学習リソース */ .reslinks{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap} .reslinks .btn{padding:12px 22px;font-size:16px} .resources{display:grid;gap:22px;margin-top:40px} .res{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 34px;scroll-margin-top:100px;align-items:center} /* C78 L13: 上下中央揃え */ .res .rl{display:flex;flex-direction:column;align-items:center;text-align:center} .res .rk{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.06em;color:#fff;background:#221f18;border-radius:999px;padding:4px 14px} /* C79 L14: 会員限定＝黒 */ .res .rk.pr{background:var(--gold)} /* C79 L14: プレミアム＝金（一旦逆転。紫は保留） */ .res .rl h3{margin-top:14px;font-size:22px;line-height:1.45} .res .rc,.res .rc.wide{margin-top:18px;width:220px;max-width:100%;aspect-ratio:1;object-fit:contain;background:var(--paper,#f6f3ea);padding:14px;border:1px solid var(--line);border-radius:12px;box-shadow:none} /* C78 L13: 画像の縦横比を同じ枠に */ .res .rb p{font-size:max(16px,var(--fs-min));color:var(--sub)} .res .rb p+p{margin-top:14px} @media(max-width:860px){ .prob.prob2,.benefits{grid-template-columns:1fr} .crow{grid-template-columns:1fr} .crow .cr{border-left:0;border-top:1px solid var(--line);padding:24px 22px} .crow .cl{padding:24px 22px} .res{grid-template-columns:1fr;gap:18px;padding:24px 22px} .res .rc{width:110px} } /* v8 9/16: 講座詳細のサブ行（h1直下） */ .lp .hero .csub{margin-top:10px;font-size:max(17px,var(--fs-min));font-weight:700;color:var(--gold-d)} /* 9/19 村山: 申込ボタンから飛んだときに選択された項目を一瞬ハイライト */ .fr.picked{animation:pickfx 1.6s ease-out 1} @keyframes pickfx{0%{background:rgba(180,150,70,.22)}100%{background:transparent}} @media (prefers-reduced-motion:reduce){.fr.picked{animation:none}} /* contact/ の案内カード（v9 は contact/index.html の head 内