/* MONO塾 トップページ用CSS（モック v38・2026-10-11）。header.php の is_front_page() の枝で style_top_240529.css の後に読む（style_top_240529.css は残す） */ @font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/NotoSansJP-900-top.woff2") format("woff2")} /* 見出しの文字だけに絞った極太（Google Fonts の絞り込みファイル） */ #top_page.tp-top{--navy:#264c73;--navy2:#173B5E;--org:#cc4a00;--org-h:#b64200;--line:#dde4ec;--tint:#f4f8fb;--txt:#333;--mute:#5c6773; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--txt);font-size:16px;line-height:1.7} #top_page.tp-top .tp-in{max-width:1160px;margin:0 auto;padding:0 20px;box-sizing:border-box} #top_page.tp-top .tp-sec{padding:56px 0} #top_page.tp-top .tp-fv,#top_page.tp-top .tp-notice{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} #top_page.tp-top .tp-h2{margin:0 0 12px;padding:0;border:0;background:none;text-align:center;font-size:28px;line-height:1.35;color:var(--navy);font-weight:bold} #top_page.tp-top .tp-h2::before,#top_page.tp-top .tp-h2::after{content:none} #top_page.tp-top .tp-h2-left{text-align:left} #top_page.tp-top .tp-lead{margin:0 0 26px;text-align:center;color:var(--mute);font-size:16px} #top_page.tp-top .tp-more{text-align:center;margin:22px 0 0} #top_page.tp-top .tp-more-left{text-align:left;margin-top:10px} #top_page.tp-top ul,#top_page.tp-top ol{list-style:none;margin:0;padding:0} #top_page.tp-top li{list-style:none;margin:0;padding:0} #top_page.tp-top .tp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 24px;border-radius:6px;font-size:16px;font-weight:bold;text-decoration:none;box-sizing:border-box;line-height:1.3;text-align:center;border:2px solid transparent} #top_page.tp-top .tp-btn-primary{background:var(--org);color:#fff;border-color:var(--org)} #top_page.tp-top .tp-btn-primary:hover{background:var(--org-h);border-color:var(--org-h);color:#fff} #top_page.tp-top .tp-btn-secondary{background:#fff;color:var(--navy);border-color:var(--navy)} #top_page.tp-top .tp-btn-secondary:hover{background:var(--navy);color:#fff} #top_page.tp-top .tp-textlink{color:var(--navy);font-weight:bold;text-decoration:underline} #top_page.tp-top a:focus-visible,#top_page.tp-top button:focus-visible{outline:3px solid #7fb0e0;outline-offset:2px} /* ヘッダーの法人ボタン（テーマのヘッダー内に追加） */ /* お知らせ1行（ナビ直下） */ #top_page.tp-top .tp-notice{margin-top:30px;background:#fff;border-bottom:1px solid var(--line)} /* ファーストビュー */ #top_page.tp-top .tp-fv{background:linear-gradient(180deg,#e9f2fa 0%,#f6f9fc 70%,#fff 100%);padding:40px 0 32px;border-bottom:1px solid var(--line)} #top_page.tp-top .tp-fv-in{display:grid;grid-template-columns:55fr 45fr;grid-template-areas:"tx photo" "stats stats";gap:26px 40px;align-items:center} #top_page.tp-top .tp-fv-tx{grid-area:tx} #top_page.tp-top .tp-stats{grid-area:stats} #top_page.tp-top .tp-kicker{margin:0 0 10px;font-size:14px;font-weight:bold;letter-spacing:.1em;color:var(--navy)} #top_page.tp-top .tp-h1{margin:0 0 16px;padding:0;border:0;background:none;text-align:left;font-size:38px;line-height:1.35;color:var(--navy2);font-weight:bold;letter-spacing:.02em} #top_page.tp-top .tp-h1::before,#top_page.tp-top .tp-h1::after{content:none} #top_page.tp-top .tp-fv-sub{margin:0 0 22px;font-size:16px;line-height:1.8} #top_page.tp-top .tp-stats ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} #top_page.tp-top .tp-stats li{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #c9d8e8;border-radius:8px;background:#fff} #top_page.tp-top .tp-stats img{width:40px;height:40px;object-fit:contain;border:0;max-width:none} #top_page.tp-top .tp-stat-tx{display:flex;flex-direction:column;line-height:1.2} #top_page.tp-top .tp-stats small{font-size:13px;font-weight:bold;color:var(--navy)} #top_page.tp-top .tp-stats b{font-size:30px;color:var(--navy2);font-family:Arial,sans-serif;letter-spacing:-.01em} #top_page.tp-top .tp-stats b em{font-style:normal;font-size:14px;margin-left:3px;font-family:inherit} #top_page.tp-top .tp-stats-note{margin:8px 0 0;font-size:12px;color:var(--mute)} /* 3つの学び方 */ #top_page.tp-top #tp-ways{scroll-margin-top:90px} #top_page.tp-top .tp-ways .tp-h2{margin-bottom:26px} #top_page.tp-top .tp-ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} #top_page.tp-top .tp-way{display:flex;flex-direction:column;box-sizing:border-box;padding:24px 22px 22px;background:#fff;border:1px solid var(--line);border-top:5px solid var(--navy);border-radius:8px;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-way-goal{margin:0 0 6px;font-size:20px;line-height:1.4;font-weight:bold;color:var(--navy2)} #top_page.tp-top .tp-way-name{margin:0 0 8px;font-size:15px;font-weight:bold;color:var(--navy);display:flex;align-items:center;gap:8px} #top_page.tp-top .tp-way-name i{width:26px;height:26px;border-radius:50%;background:#eef3f8;display:inline-flex;align-items:center;justify-content:center;font-size:13px} #top_page.tp-top .tp-way .tp-btn{width:100%} /* 横スクロール（講座・セミナー） */ #top_page.tp-top .tp-hwrap{position:relative} #top_page.tp-top .tp-arrow{position:absolute;top:84px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(20,40,60,.18);display:flex;align-items:center;justify-content:center;padding:0 0 3px} #top_page.tp-top .tp-arrow:hover{background:var(--navy);color:#fff} #top_page.tp-top .tp-arrow-l{left:-22px} #top_page.tp-top .tp-semlist ~ .tp-arrow,#top_page.tp-top .tp-hwrap .tp-arrow[data-target="tp-semlist"]{top:50%;margin-top:-22px} @media screen and (min-width:1300px){#top_page.tp-top .tp-arrow-l{left:-60px}} /* 講座カード（ホバーでサンプル動画の案内） */ #top_page.tp-top .tp-ccard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-thumb{position:relative;display:block;aspect-ratio:16/9;background:#f4f6f9;overflow:hidden} #top_page.tp-top .tp-thumb img{display:block;width:100%;height:100%;object-fit:cover;border:0;max-width:none} #top_page.tp-top .tp-card-ttl{display:block;padding:4px 16px 4px;font-size:18px;font-weight:bold;line-height:1.4;color:var(--navy2);text-decoration:none} #top_page.tp-top .tp-card-ttl:hover{text-decoration:underline} #top_page.tp-top .tp-reco-get{display:block;padding:0 16px 8px;font-size:14px;line-height:1.6;color:var(--txt)} #top_page.tp-top .tp-grid{display:grid;gap:20px} #top_page.tp-top .tp-grid-3{grid-template-columns:repeat(3,1fr)} #top_page.tp-top .tp-grid li > a{display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(20,40,60,.08);color:var(--txt);text-decoration:none} #top_page.tp-top .tp-grid li > a:hover .tp-card-ttl{text-decoration:underline} #top_page.tp-top .tp-od-grid .tp-card-ttl{padding-top:12px} /* v4 追加 */ #top_page.tp-top .tp-thumb-el{aspect-ratio:18/10} #top_page.tp-top .tp-thumb-od,#top_page.tp-top .tp-thumb-sem{aspect-ratio:2/1} #top_page.tp-top .tp-semcard{padding:0;overflow:hidden} #top_page.tp-top .tp-semcard .tp-thumb-sem{display:block;flex:0 0 auto} #top_page.tp-top .tp-semcard-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 18px 16px} /* 学習ステップ図（階段） */ /* 診断2枚 */ #top_page.tp-top .tp-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} #top_page.tp-top .tp-support-grid .tp-sup-card{display:flex;gap:16px;align-items:flex-start;height:100%;box-sizing:border-box;padding:22px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px rgba(20,40,60,.08);color:var(--txt);text-decoration:none} #top_page.tp-top .tp-support-grid .tp-sup-card:hover b{text-decoration:underline} /* セミナーカード（横スライド） */ #top_page.tp-top .tp-semcard{display:flex;flex-direction:column;gap:6px;box-sizing:border-box;padding:18px 18px 16px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-sem-date{display:flex;align-items:baseline;gap:8px;line-height:1.2;font-feature-settings:"tnum"} #top_page.tp-top .tp-sem-date .yr{font-size:12px;color:var(--mute);font-weight:bold} #top_page.tp-top .tp-sem-date .md{font-size:26px;font-weight:800;color:var(--navy);white-space:nowrap} #top_page.tp-top .tp-sem-date .dow{font-size:13px;color:var(--mute);font-weight:bold} #top_page.tp-top .tp-sem-badges{display:flex;flex-wrap:wrap;gap:6px} #top_page.tp-top .tp-badge{font-size:12px;font-weight:bold;line-height:1.5;padding:2px 8px;border-radius:4px;white-space:nowrap} #top_page.tp-top .tp-badge.is-online{color:var(--navy);background:#dce9f8;border:1px solid #c9d8e8} #top_page.tp-top .tp-badge.is-early{color:#b64200;background:#fdf1e3;border:1px solid #e0740d} #top_page.tp-top .tp-sem-title{margin:0;font-size:17px;font-weight:bold;color:#1d2733;line-height:1.45;flex:1} /* 選ばれる理由 */ #top_page.tp-top .tp-reason-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} #top_page.tp-top .tp-reason-grid li{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-reason-grid figure{margin:0;aspect-ratio:1/1;background:#f4f6f9;overflow:hidden;display:flex;align-items:center;justify-content:center} #top_page.tp-top .tp-reason-grid figure img{display:block;width:100%;height:100%;object-fit:cover;border:0;max-width:none} #top_page.tp-top .tp-reason-grid h3{margin:0;padding:14px 16px 4px;font-size:17px;color:var(--navy);text-align:left} #top_page.tp-top .tp-reason-grid p{margin:0;padding:0 16px 16px;font-size:14px;color:var(--mute)} /* 受講者の声 */ #top_page.tp-top .tp-voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} #top_page.tp-top .tp-voice-grid li{position:relative;padding:28px 22px 18px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-voice-grid li::before{content:"\201C";position:absolute;left:16px;top:4px;font-size:44px;line-height:1;color:#c9d8e8;font-family:Georgia,serif} #top_page.tp-top .tp-voice-q{margin:0 0 12px;font-size:15.5px;line-height:1.75;color:var(--txt)} #top_page.tp-top .tp-voice-who{margin:0;font-size:13px;color:var(--mute)} /* 法人 */ /* 無料テキスト＋会員登録 */ /* 新着 */ #top_page.tp-top .tp-news{padding-top:40px} #top_page.tp-top .tp-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px} #top_page.tp-top .tp-news-col .tp-h2{font-size:22px;margin-bottom:10px} #top_page.tp-top .tp-news-col ol{border-top:1px solid var(--line)} #top_page.tp-top .tp-news-col li.post-list{padding:12px 0;border-bottom:1px solid var(--line)} #top_page.tp-top .tp-news-col .title a{color:var(--navy2);font-size:15px;line-height:1.5} /* 右下の×付きバナー（固定ページの編集画面で設定・設定時のみ） */ #top_page.tp-top .tp-sticky{position:fixed;right:16px;bottom:16px;z-index:1200;width:320px;box-sizing:border-box;padding:18px 18px 16px;background:#fff;border:1px solid #f0c9a8;border-top:5px solid var(--org);border-radius:8px;box-shadow:0 10px 30px rgba(20,40,60,.22)} #top_page.tp-top .tp-sticky[hidden]{display:none} #top_page.tp-top .tp-sticky-close{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;border-radius:50%;background:#eef1f4;color:#333;font-size:18px;line-height:1;cursor:pointer} #top_page.tp-top .tp-sticky-close:hover{background:#dde4ec} #top_page.tp-top .tp-sticky-tag{display:inline-block;padding:2px 10px;border-radius:4px;background:var(--org);color:#fff;font-size:12px;font-weight:bold} #top_page.tp-top .tp-sticky-head{margin:8px 0 2px;font-size:15px;font-weight:bold;color:var(--navy2);line-height:1.4} #top_page.tp-top .tp-sticky-head b{font-size:22px;color:var(--org);font-family:Arial,sans-serif;margin-left:4px} #top_page.tp-top .tp-sticky-body{margin:0 0 10px;font-size:13px;color:var(--mute);line-height:1.5} #top_page.tp-top .tp-sticky-btn{width:100%;min-height:42px;font-size:14.5px} @media (prefers-reduced-motion:reduce){#top_page.tp-top *{transition:none!important;scroll-behavior:auto!important}} @media screen and (max-width:1023px){ #top_page.tp-top .tp-h1{font-size:32px} #top_page.tp-top .tp-fv-in{gap:20px 28px} #top_page.tp-top .tp-ways-grid,#top_page.tp-top .tp-grid-3,#top_page.tp-top .tp-reason-grid,#top_page.tp-top .tp-voice-grid{gap:16px} #top_page.tp-top .tp-reason-grid{grid-template-columns:repeat(2,1fr)} #top_page.tp-top .tp-arrow-l{left:-8px} #top_page.tp-top .tp-stats b{font-size:26px} } @media screen and (max-width:767px){ #top_page.tp-top .tp-sec{padding:36px 0} #top_page.tp-top .tp-h2{font-size:22px} #top_page.tp-top .tp-lead{font-size:15px;text-align:left;margin-bottom:18px} #top_page.tp-top .tp-notice{margin-top:0} #top_page.tp-top .tp-fv{padding:24px 0 24px} #top_page.tp-top .tp-fv-in{grid-template-columns:1fr;grid-template-areas:"tx" "photo" "stats";gap:18px} #top_page.tp-top .tp-kicker{font-size:13px} #top_page.tp-top .tp-h1{font-size:26px} #top_page.tp-top .tp-fv-sub{font-size:15px} #top_page.tp-top .tp-stats ul{grid-template-columns:1fr;gap:8px} #top_page.tp-top .tp-stats li{padding:10px 14px} #top_page.tp-top .tp-stats b{font-size:24px} #top_page.tp-top .tp-ways-grid,#top_page.tp-top .tp-grid-3,#top_page.tp-top .tp-support-grid,#top_page.tp-top .tp-news-grid,#top_page.tp-top .tp-reason-grid,#top_page.tp-top .tp-voice-grid{grid-template-columns:1fr} #top_page.tp-top .tp-way{padding:20px 18px 18px} #top_page.tp-top .tp-way-goal{font-size:18px} /* スマホのヘッダーは幅が無いので非表示（FVの「法人研修」ボタンで代替） */ #top_page.tp-top .tp-arrow{display:none} #top_page.tp-top .tp-support-grid .tp-sup-card{padding:18px 16px} #top_page.tp-top .tp-reason-grid li{display:grid;grid-template-columns:110px 1fr;align-items:center} #top_page.tp-top .tp-reason-grid figure{grid-row:1/3} #top_page.tp-top .tp-reason-grid h3{padding:12px 14px 2px;font-size:16px} #top_page.tp-top .tp-reason-grid p{padding:0 14px 12px;font-size:13.5px} #top_page.tp-top .tp-more .tp-btn{width:100%} #top_page.tp-top .tp-card-ttl{font-size:17px} #top_page.tp-top .tp-sticky{right:0;bottom:0;left:0;width:auto;border-radius:10px 10px 0 0;padding:14px 16px 12px;box-shadow:0 -6px 20px rgba(20,40,60,.18)} #top_page.tp-top .tp-sticky-head{margin-right:36px} } /* ================= v5 追加 ================= */ #top_page.tp-top .tp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* セクションの区切り：全幅の背景＋英字ラベル＋下線 */ #top_page.tp-top .tp-sec,#top_page.tp-top .tp-fv,#top_page.tp-top .tp-notice{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);position:relative} #top_page.tp-top .tp-sec{padding:72px 0;background:#fff} #top_page.tp-top .tp-bg-blue{background:#e8f1f9} #top_page.tp-top .tp-bg-cream{background:#fdf5ea} #top_page.tp-top .tp-bg-grid{background-color:#f3f6f9;background-image:linear-gradient(rgba(38,76,115,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.055) 1px,transparent 1px);background-size:28px 28px} #top_page.tp-top .tp-bg-blue::before,#top_page.tp-top .tp-bg-cream::before{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none} #top_page.tp-top .tp-bg-blue,#top_page.tp-top .tp-bg-cream{overflow:hidden} #top_page.tp-top .tp-bg-blue > .tp-in,#top_page.tp-top .tp-bg-cream > .tp-in{position:relative} #top_page.tp-top .tp-h2{font-size:30px;margin-bottom:0;text-wrap:balance} #top_page.tp-top .tp-h2-bar{display:block;width:56px;height:4px;border-radius:2px;margin:14px auto 22px;background:linear-gradient(90deg,var(--navy) 0 60%,var(--org) 60% 100%)} #top_page.tp-top .tp-ways .tp-h2{margin-bottom:0} #top_page.tp-top .tp-h2-left{margin-bottom:10px} /* ファーストビュー：方眼の背景＋切り替え見出し */ #top_page.tp-top .tp-fv{margin-top:30px;padding:48px 0 36px;border-bottom:0;background-color:#e6f0f9;background-image:linear-gradient(rgba(38,76,115,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.06) 1px,transparent 1px),linear-gradient(180deg,#dcebf8 0%,#f1f6fb 100%);background-size:28px 28px,28px 28px,auto} #top_page.tp-top .tp-h1{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:36px;line-height:1.3;margin-bottom:18px} #top_page.tp-top .tp-rot-box{display:inline-block;padding:6px 22px 8px;background:var(--navy);border-radius:4px;box-shadow:6px 6px 0 rgba(204,74,0,.9);overflow:hidden} #top_page.tp-top .tp-rot{display:inline-block;color:#fff;font-size:50px;line-height:1.25;letter-spacing:.04em;transition:opacity .3s,transform .3s} #top_page.tp-top .tp-rot.is-out{opacity:0;transform:translateY(14px)} #top_page.tp-top #tp-ways{scroll-margin-top:80px} /* お知らせ（FVの下） */ #top_page.tp-top .tp-notice{margin-top:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(20,40,60,.05)} /* 3つの学び方：大きいアイコン */ #top_page.tp-top .tp-way{align-items:center;text-align:center;padding:30px 24px 24px;border-top-width:6px;--c:var(--navy);--bg:#e8f1f9;border-top-color:var(--c)} #top_page.tp-top .tp-way-od{--c:#2a7fba;--bg:#e4f2fb} #top_page.tp-top .tp-way-sem{--c:#cc4a00;--bg:#fdeee0} #top_page.tp-top .tp-way-name{display:block;margin:0 0 10px;font-size:23px;color:var(--c)} #top_page.tp-top .tp-way-goal{margin:0 0 8px;padding:4px 14px;border-radius:999px;background:var(--bg);font-size:15.5px;color:var(--navy2)} /* カード画像：セミナーと同じ「枠の内側に全体を収める」形に統一 */ #top_page.tp-top .tp-ccard,#top_page.tp-top .tp-semcard{padding:0;gap:0} #top_page.tp-top .tp-ccard .tp-thumb,#top_page.tp-top .tp-semcard .tp-thumb,#top_page.tp-top .tp-od-grid .tp-thumb{display:block;flex:0 0 auto;margin:16px 16px 0;border-radius:6px;border:1px solid var(--line);background:#fff} #top_page.tp-top .tp-thumb-el{aspect-ratio:18/10} #top_page.tp-top .tp-thumb-od,#top_page.tp-top .tp-thumb-sem{aspect-ratio:2/1} #top_page.tp-top .tp-thumb img{object-fit:contain;object-position:center} #top_page.tp-top .tp-card-ttl{padding:12px 16px 4px} #top_page.tp-top .tp-od-grid .tp-card-ttl{padding-top:12px} #top_page.tp-top .tp-semcard-body{padding:12px 16px 16px} #top_page.tp-top .tp-reco-get{flex:1} #top_page.tp-top .tp-arrow{top:96px} #top_page.tp-top .tp-hwrap .tp-arrow[data-target="tp-semlist"]{top:50%} /* 講座選び3枚 */ #top_page.tp-top .tp-support-grid{grid-template-columns:repeat(3,1fr);gap:22px} #top_page.tp-top .tp-support-grid .tp-sup-card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:10px;--c:var(--navy);--bg:#e8f1f9} #top_page.tp-top .tp-sup-c a{--c:#cc4a00;--bg:#fdeee0} #top_page.tp-top .tp-sup-vis{position:relative;display:flex;align-items:center;justify-content:center;height:132px;background:var(--bg);color:var(--c)} #top_page.tp-top .tp-sup-vis svg{width:76px;height:76px} #top_page.tp-top .tp-sup-no{position:absolute;left:16px;top:8px;font-family:Arial,sans-serif;font-size:40px;font-weight:bold;line-height:1;color:var(--c);opacity:.28} #top_page.tp-top .tp-support-grid b{margin:0 20px 8px;font-size:20px;line-height:1.4;color:var(--navy2)} #top_page.tp-top .tp-sup-desc{margin:0 20px 12px;font-size:14.5px;flex:1} #top_page.tp-top .tp-sup-go{margin:0 20px 20px;padding:11px 12px;border-radius:6px;background:var(--c);color:#fff;font-size:15.5px;font-weight:bold;text-align:center} #top_page.tp-top .tp-sup-go small{display:block;font-size:11.5px;font-weight:normal;opacity:.92} #top_page.tp-top .tp-support-grid .tp-sup-card:hover .tp-sup-go{filter:brightness(.92)} /* 受講者の声：講座名を先頭のラベルに */ #top_page.tp-top .tp-voice-grid li{display:flex;flex-direction:column;padding:20px 22px 18px;border-top:4px solid var(--navy)} #top_page.tp-top .tp-voice-grid li::before{left:auto;right:16px;top:40px} #top_page.tp-top .tp-voice-q{flex:1;padding-right:26px} /* 法人：紺の帯 */ /* 右下バナー：テーマの「TOPへ」ボタン（#page-top＝右20px・下20px）の上に置く */ #top_page.tp-top .tp-sticky{right:20px;bottom:88px} @media screen and (max-width:1023px){ #top_page.tp-top .tp-rot{font-size:40px} #top_page.tp-top .tp-support-grid{gap:16px} } @media screen and (max-width:767px){ #top_page.tp-top .tp-sec{padding:44px 0} #top_page.tp-top .tp-h2{font-size:23px} #top_page.tp-top .tp-lead{text-align:left} #top_page.tp-top .tp-fv{margin-top:0;padding:26px 0 24px} #top_page.tp-top .tp-h1{font-size:25px;gap:8px} #top_page.tp-top .tp-rot{font-size:34px} #top_page.tp-top .tp-rot-box{padding:4px 16px 6px;box-shadow:4px 4px 0 rgba(204,74,0,.9)} #top_page.tp-top .tp-way{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;padding:18px 16px;gap:4px 14px} #top_page.tp-top .tp-way-name{flex:1;margin:0;font-size:21px} #top_page.tp-top .tp-way-goal{flex-basis:100%;margin-top:8px;border-radius:6px} #top_page.tp-top .tp-support-grid{grid-template-columns:1fr} #top_page.tp-top .tp-sup-vis{height:104px} #top_page.tp-top .tp-sup-vis svg{width:60px;height:60px} #top_page.tp-top .tp-sticky{right:0;bottom:0} body.tp-sticky-on #page-top{bottom:calc(var(--tp-sticky-h,150px) + 12px)!important} } /* ================= v6 追加 ================= */ #top_page.tp-top{--sub:#4d6377;--blue:#2a7fba} #top_page.tp-top .tp-btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)} #top_page.tp-top .tp-btn-navy:hover{background:var(--navy2);border-color:var(--navy2);color:#fff} #top_page.tp-top #tp-free{scroll-margin-top:80px} /* FV：ベネフィット3つをゆっくり切り替え */ #top_page.tp-top .tp-rot{font-size:38px;transition:opacity .45s,transform .45s} #top_page.tp-top .tp-rot.is-out{transform:translateY(8px)} #top_page.tp-top .tp-rot-box{padding:8px 20px 10px} /* お知らせ：独立した枠・2件 */ #top_page.tp-top .tp-notice{padding:26px 0 0;border-bottom:0;box-shadow:none} #top_page.tp-top .tp-ways{padding-top:56px} /* 3つの学び方：eラーニングを主役に、他の2つは落ち着いた色に（オレンジは使わない） */ #top_page.tp-top .tp-way-od,#top_page.tp-top .tp-way-sem{--c:var(--sub);--bg:#eef2f6;border-top-color:#b9c6d3} #top_page.tp-top .tp-way-el{--c:var(--navy);--bg:#e1ecf7;border:2px solid var(--navy);border-top-width:8px;box-shadow:0 10px 26px rgba(38,76,115,.22);background:linear-gradient(180deg,#f3f8fd 0%,#fff 46%)} #top_page.tp-top .tp-way-el .tp-way-name{font-size:26px} /* 講座選び：「診断で選ぶ（2種類）」と「学習マップから選ぶ」の2グループ */ #top_page.tp-top .tp-support-grid{grid-template-columns:1fr 1fr;gap:14px;flex:1} #top_page.tp-top .tp-sup{display:flex;flex:1} #top_page.tp-top .tp-sup > .tp-sup-card{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;height:100%;box-sizing:border-box;padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:none;color:var(--txt);text-decoration:none;--c:var(--navy);--bg:#e8f1f9} #top_page.tp-top .tp-sup-c > .tp-sup-card{--c:#173B5E;--bg:#dde8f3} #top_page.tp-top .tp-sup > .tp-sup-card > b{margin:0 18px 8px;font-size:18.5px;line-height:1.4;color:var(--navy2)} #top_page.tp-top .tp-sup > .tp-sup-card:hover > b{text-decoration:underline} #top_page.tp-top .tp-sup > .tp-sup-card:hover .tp-sup-go{filter:brightness(.92)} #top_page.tp-top .tp-sup-vis{height:112px} #top_page.tp-top .tp-sup-vis svg{width:62px;height:62px} #top_page.tp-top .tp-sup-no{left:12px;top:12px;padding:3px 12px;border-radius:999px;background:var(--c);color:#fff;font-family:inherit;font-size:12.5px;line-height:1.5;opacity:1} #top_page.tp-top .tp-sup-desc{margin:0 18px 12px;font-size:14px} #top_page.tp-top .tp-sup-go{margin:0 18px 18px} /* セミナーとオンデマンド：別々の箱に分ける */ #top_page.tp-top .tp-kindbox{padding:30px 30px 32px;background:#fbfdff;border:1px solid var(--line);border-top:7px solid var(--navy);border-radius:14px;box-shadow:0 6px 20px rgba(20,40,60,.08)} #top_page.tp-top .tp-kindbox + .tp-kindbox{margin-top:64px} #top_page.tp-top .tp-kindbox-od{border-top-color:var(--blue)} #top_page.tp-top .tp-kindhead{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:0;border:0;background:none;font-size:25px;line-height:1.35;color:var(--navy2);text-align:left} #top_page.tp-top .tp-kindhead::before,#top_page.tp-top .tp-kindhead::after{content:none} #top_page.tp-top .tp-kind-tx{display:flex;flex-direction:column;align-items:flex-start;gap:2px} #top_page.tp-top .tp-kind-tx em{font-style:normal;padding:2px 12px;border-radius:999px;background:#e8f1f9;color:var(--navy);font-size:12.5px} #top_page.tp-top .tp-kindbox-od .tp-kind-tx em{background:#e4f2fb;color:#1f6594} #top_page.tp-top .tp-kind-tx small{font-size:14px;font-weight:normal;color:var(--mute)} #top_page.tp-top .tp-kindbox .tp-arrow-l{left:-22px} /* 選ばれる理由：カタログの「特徴」から */ #top_page.tp-top .tp-news-col .recent-post-simple .date{white-space:nowrap;flex:0 0 auto} /* 立場別のご案内 */ @media screen and (max-width:1023px){ #top_page.tp-top .tp-rot{font-size:30px} } @media screen and (max-width:767px){ #top_page.tp-top .tp-rot{font-size:23px} #top_page.tp-top .tp-rot-box{padding:6px 14px 8px} #top_page.tp-top .tp-notice{padding-top:18px} #top_page.tp-top .tp-ways{padding-top:40px} #top_page.tp-top .tp-way-el .tp-way-name{font-size:22px} #top_page.tp-top .tp-support-grid{grid-template-columns:1fr} #top_page.tp-top .tp-kindbox{padding:20px 14px 22px} #top_page.tp-top .tp-kindbox + .tp-kindbox{margin-top:40px} #top_page.tp-top .tp-kindhead{font-size:20px;gap:12px;margin-bottom:16px} } /* ================= v7 追加 ================= */ /* FV背景：青〜青緑のグラデーション＋方眼＋歯車の製図（線画）＋右上にオレンジの淡い光 */ #top_page.tp-top .tp-fv{overflow:hidden;background-color:#dcebf9; background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22 opacity=%220.2%22 fill=%22none%22 stroke=%22%23264c73%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M514.0 300.0 L545.8 309.9 L544.5 327.5 L511.5 332.5 L508.6 347.6 L537.4 364.4 L532.2 381.2 L499.0 378.8 L492.8 392.9 L517.1 415.6 L508.3 430.9 L476.5 421.1 L467.3 433.4 L486.0 461.0 L473.9 473.9 L445.1 457.3 L433.4 467.3 L445.5 498.4 L430.9 508.3 L406.4 485.6 L392.9 492.8 L397.7 525.8 L381.2 532.2 L362.5 504.7 L347.6 508.6 L345.0 541.8 L327.5 544.5 L315.4 513.4 L300.0 514.0 L290.1 545.8 L272.5 544.5 L267.5 511.5 L252.4 508.6 L235.6 537.4 L218.8 532.2 L221.2 499.0 L207.1 492.8 L184.4 517.1 L169.1 508.3 L178.9 476.5 L166.6 467.3 L139.0 486.0 L126.1 473.9 L142.7 445.1 L132.7 433.4 L101.6 445.5 L91.7 430.9 L114.4 406.4 L107.2 392.9 L74.2 397.7 L67.8 381.2 L95.3 362.5 L91.4 347.6 L58.2 345.0 L55.5 327.5 L86.6 315.4 L86.0 300.0 L54.2 290.1 L55.5 272.5 L88.5 267.5 L91.4 252.4 L62.6 235.6 L67.8 218.8 L101.0 221.2 L107.2 207.1 L82.9 184.4 L91.7 169.1 L123.5 178.9 L132.7 166.6 L114.0 139.0 L126.1 126.1 L154.9 142.7 L166.6 132.7 L154.5 101.6 L169.1 91.7 L193.6 114.4 L207.1 107.2 L202.3 74.2 L218.8 67.8 L237.5 95.3 L252.4 91.4 L255.0 58.2 L272.5 55.5 L284.6 86.6 L300.0 86.0 L309.9 54.2 L327.5 55.5 L332.5 88.5 L347.6 91.4 L364.4 62.6 L381.2 67.8 L378.8 101.0 L392.9 107.2 L415.6 82.9 L430.9 91.7 L421.1 123.5 L433.4 132.7 L461.0 114.0 L473.9 126.1 L457.3 154.9 L467.3 166.6 L498.4 154.5 L508.3 169.1 L485.6 193.6 L492.8 207.1 L525.8 202.3 L532.2 218.8 L504.7 237.5 L508.6 252.4 L541.8 255.0 L544.5 272.5 L513.4 284.6 Z%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%22196%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%22118%22 stroke-dasharray=%2214 5 3 5%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%2262%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%2238%22/%3E%3Cpath d=%22M291 263v-12h18v12%22 stroke-width=%222%22/%3E%3Ccircle cx=%22402.2%22 cy=%22359.0%22 r=%2216%22/%3E%3Ccircle cx=%22300.0%22 cy=%22418.0%22 r=%2216%22/%3E%3Ccircle cx=%22197.8%22 cy=%22359.0%22 r=%2216%22/%3E%3Ccircle cx=%22197.8%22 cy=%22241.0%22 r=%2216%22/%3E%3Ccircle cx=%22300.0%22 cy=%22182.0%22 r=%2216%22/%3E%3Ccircle cx=%22402.2%22 cy=%22241.0%22 r=%2216%22/%3E%3Cpath d=%22M20 300H580M300 20V580%22 stroke-dasharray=%2226 6 4 6%22 stroke-width=%221.1%22/%3E%3Cg stroke=%22%23cc4a00%22 stroke-width=%221.4%22%3E%3Cpath d=%22M54 562H546%22/%3E%3Cpath d=%22M54 500V572M546 500V572%22 stroke-width=%221%22/%3E%3Cpath d=%22M54 562l14 -5v10zM546 562l-14 -5v10z%22 fill=%22%23cc4a00%22/%3E%3Cpath d=%22M300 300L439 161%22/%3E%3Cpath d=%22M439 161l-13 6 7 7z%22 fill=%22%23cc4a00%22/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22 opacity=%220.2%22 fill=%22none%22 stroke=%22%23264c73%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M514.0 300.0 L545.8 309.9 L544.5 327.5 L511.5 332.5 L508.6 347.6 L537.4 364.4 L532.2 381.2 L499.0 378.8 L492.8 392.9 L517.1 415.6 L508.3 430.9 L476.5 421.1 L467.3 433.4 L486.0 461.0 L473.9 473.9 L445.1 457.3 L433.4 467.3 L445.5 498.4 L430.9 508.3 L406.4 485.6 L392.9 492.8 L397.7 525.8 L381.2 532.2 L362.5 504.7 L347.6 508.6 L345.0 541.8 L327.5 544.5 L315.4 513.4 L300.0 514.0 L290.1 545.8 L272.5 544.5 L267.5 511.5 L252.4 508.6 L235.6 537.4 L218.8 532.2 L221.2 499.0 L207.1 492.8 L184.4 517.1 L169.1 508.3 L178.9 476.5 L166.6 467.3 L139.0 486.0 L126.1 473.9 L142.7 445.1 L132.7 433.4 L101.6 445.5 L91.7 430.9 L114.4 406.4 L107.2 392.9 L74.2 397.7 L67.8 381.2 L95.3 362.5 L91.4 347.6 L58.2 345.0 L55.5 327.5 L86.6 315.4 L86.0 300.0 L54.2 290.1 L55.5 272.5 L88.5 267.5 L91.4 252.4 L62.6 235.6 L67.8 218.8 L101.0 221.2 L107.2 207.1 L82.9 184.4 L91.7 169.1 L123.5 178.9 L132.7 166.6 L114.0 139.0 L126.1 126.1 L154.9 142.7 L166.6 132.7 L154.5 101.6 L169.1 91.7 L193.6 114.4 L207.1 107.2 L202.3 74.2 L218.8 67.8 L237.5 95.3 L252.4 91.4 L255.0 58.2 L272.5 55.5 L284.6 86.6 L300.0 86.0 L309.9 54.2 L327.5 55.5 L332.5 88.5 L347.6 91.4 L364.4 62.6 L381.2 67.8 L378.8 101.0 L392.9 107.2 L415.6 82.9 L430.9 91.7 L421.1 123.5 L433.4 132.7 L461.0 114.0 L473.9 126.1 L457.3 154.9 L467.3 166.6 L498.4 154.5 L508.3 169.1 L485.6 193.6 L492.8 207.1 L525.8 202.3 L532.2 218.8 L504.7 237.5 L508.6 252.4 L541.8 255.0 L544.5 272.5 L513.4 284.6 Z%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%22196%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%22118%22 stroke-dasharray=%2214 5 3 5%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%2262%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%2238%22/%3E%3Cpath d=%22M291 263v-12h18v12%22 stroke-width=%222%22/%3E%3Ccircle cx=%22402.2%22 cy=%22359.0%22 r=%2216%22/%3E%3Ccircle cx=%22300.0%22 cy=%22418.0%22 r=%2216%22/%3E%3Ccircle cx=%22197.8%22 cy=%22359.0%22 r=%2216%22/%3E%3Ccircle cx=%22197.8%22 cy=%22241.0%22 r=%2216%22/%3E%3Ccircle cx=%22300.0%22 cy=%22182.0%22 r=%2216%22/%3E%3Ccircle cx=%22402.2%22 cy=%22241.0%22 r=%2216%22/%3E%3Cpath d=%22M20 300H580M300 20V580%22 stroke-dasharray=%2226 6 4 6%22 stroke-width=%221.1%22/%3E%3Cg stroke=%22%23cc4a00%22 stroke-width=%221.4%22%3E%3Cpath d=%22M54 562H546%22/%3E%3Cpath d=%22M54 500V572M546 500V572%22 stroke-width=%221%22/%3E%3Cpath d=%22M54 562l14 -5v10zM546 562l-14 -5v10z%22 fill=%22%23cc4a00%22/%3E%3Cpath d=%22M300 300L439 161%22/%3E%3Cpath d=%22M439 161l-13 6 7 7z%22 fill=%22%23cc4a00%22/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(circle at 92% 0%,rgba(237,89,1,.16) 0,rgba(237,89,1,0) 34%),linear-gradient(rgba(38,76,115,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.07) 1px,transparent 1px),linear-gradient(115deg,#bcd9f5 0%,#e8f3fd 44%,#c8ebef 100%); background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat; background-position:right -170px bottom -230px,left -250px top -290px,0 0,0 0,0 0,0 0; background-size:680px 680px,560px 560px,auto,28px 28px,28px 28px,auto} /* 実績3つ：中央寄せの大きい数字を1枚のパネルに */ #top_page.tp-top .tp-stats ul{grid-template-columns:repeat(3,1fr);gap:0;max-width:920px;margin:0 auto;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 2px 10px rgba(20,40,60,.06);overflow:hidden} #top_page.tp-top .tp-stats li{flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:14px 12px;border:0;border-radius:0;background:none;text-align:left} #top_page.tp-top .tp-stats li + li{border-left:1px solid #c9d8e8} #top_page.tp-top .tp-stats img{width:34px;height:34px;opacity:.85} #top_page.tp-top .tp-stat-tx{align-items:flex-start;gap:0} #top_page.tp-top .tp-stats small{font-size:13.5px;letter-spacing:.02em} #top_page.tp-top .tp-stats b{font-size:38px;line-height:1.15;color:var(--navy2);letter-spacing:0} #top_page.tp-top .tp-stats b em{font-size:15px;margin-left:4px;color:var(--navy2)} #top_page.tp-top .tp-stats-note{text-align:center;margin-top:10px} /* 3つの学び方：3枚とも同じ作り。eラーニングだけ「塗りのアイコン・塗りのボタン・濃い上線」 */ #top_page.tp-top .tp-way-el{border:1px solid var(--line);border-top:6px solid var(--navy);background:#fff;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-way-el .tp-way-name{font-size:23px} #top_page.tp-top .tp-way-od,#top_page.tp-top .tp-way-sem{--c:var(--navy);--bg:#e8f1f9;border-top-color:#9fb4c9} /* 無料テキスト：中面が隠れないよう、表紙3冊はビューアの左下の外へずらす */ /* 新着情報：日付の行とタイトルを上下に分ける（テーマの日付幅120px固定で重なっていた） */ #top_page.tp-top .tp-news-col .recent-post-simple .post-list-info{flex-direction:column;align-items:flex-start;gap:2px;width:100%} #top_page.tp-top .tp-news-col .recent-post-simple .data{width:auto;align-items:center;gap:8px} #top_page.tp-top .tp-news-col .recent-post-simple .date{width:auto;font-size:13.5px;color:var(--mute)} #top_page.tp-top .tp-news-col .recent-post-simple .title{width:100%} /* 学習マップは「学習の進め方」の図の下へ（階段図の詳しい版） */ /* 講座選び：診断2枚だけ（中央寄せ） */ #top_page.tp-top .tp-support-2{max-width:860px;margin:0 auto;gap:24px} #top_page.tp-top .tp-support-2 .tp-sup > .tp-sup-card{box-shadow:0 4px 16px rgba(20,40,60,.08)} @media screen and (max-width:1023px){ #top_page.tp-top .tp-stats b{font-size:32px} } @media screen and (max-width:767px){ #top_page.tp-top .tp-fv{background-position:right -260px bottom -120px,left -330px top -330px,0 0,0 0,0 0,0 0} #top_page.tp-top .tp-stats ul{grid-template-columns:repeat(3,1fr);gap:0} #top_page.tp-top .tp-stats li{flex-direction:column;gap:4px;padding:12px 4px 10px;text-align:center} #top_page.tp-top .tp-stat-tx{align-items:center} #top_page.tp-top .tp-stats img{width:26px;height:26px} #top_page.tp-top .tp-stats small{font-size:11px;letter-spacing:0;line-height:1.35;min-height:2.7em;display:flex;align-items:center} #top_page.tp-top .tp-stats b{font-size:25px} #top_page.tp-top .tp-stats b em{font-size:12px;margin-left:2px} #top_page.tp-top .tp-stats-note{text-align:left} #top_page.tp-top .tp-way-el .tp-way-name{font-size:21px} } /* ================= v8 追加：FV右側のひし形コラージュ ================= */ #top_page.tp-top .tp-fv-collage{grid-area:photo;position:relative;margin:0;width:100%;max-width:470px;justify-self:center} #top_page.tp-top .tp-collage-in{display:block;position:relative;width:100%;aspect-ratio:1/1} #top_page.tp-top .tp-dia,#top_page.tp-top .tp-dia-deco{position:absolute;left:calc(var(--x) - var(--s) / 2);top:calc(var(--y) - var(--s) / 2);width:var(--s);aspect-ratio:1/1;transform:rotate(45deg);border-radius:14%} #top_page.tp-top .tp-dia{overflow:hidden;background:#dfe6ee;box-shadow:0 10px 26px rgba(20,40,60,.2);border:4px solid #fff;box-sizing:border-box} #top_page.tp-top .tp-dia img{position:absolute;left:-21%;top:-21%;width:142%;height:142%;max-width:none;transform:rotate(-45deg);object-fit:cover;border:0} #top_page.tp-top .tp-dia img.tp-dia-fg{left:calc((1 - var(--k)) * 50%);top:calc((1 - var(--k)) * 50%);width:calc(var(--k) * 100%);height:calc(var(--k) * 100%)} #top_page.tp-top .tp-fv-collage figcaption{position:absolute;right:0;bottom:-4px;font-size:11.5px;color:var(--mute)} #top_page.tp-top .tp-fv-in{grid-template-columns:52fr 48fr} @media screen and (max-width:767px){ #top_page.tp-top .tp-fv-in{grid-template-columns:1fr} #top_page.tp-top .tp-fv-collage{max-width:330px} #top_page.tp-top .tp-dia{border-width:3px} } /* ================= v9 追加：ひし形をシャープに（白い太枠をやめ、角を立てる）／引いた写真の端をぼかしへなじませる ================= */ #top_page.tp-top .tp-dia{border:0;border-radius:5%;box-shadow:0 14px 30px rgba(20,40,60,.22),0 0 0 1px rgba(255,255,255,.7)} #top_page.tp-top .tp-dia-deco{border-radius:8%} #top_page.tp-top .tp-dia img.tp-dia-fg{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);mask-composite:intersect} #top_page.tp-top .tp-dia img.tp-dia-fg:first-child{-webkit-mask-image:none;mask-image:none} /* ぼかしの下敷きが無い（＝先端まで届く）写真はフェードしない */ /* v9：学習の進め方の図は、枠・影・角丸なしで地の白にそのまま置く（リンクもなし） */ /* 画像の地は #fdfdfd。乗算で白地になじませ、四角い境目を出さない */ /* v9：診断カードの絵（アイコン → 画面イメージ）／学習マップは塾長ハグミーの案内に */ #top_page.tp-top .tp-sup-vis-img{height:auto;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(180deg,#f3f7fc,#e2ebf6)} #top_page.tp-top .tp-sup-img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%;border:0;max-width:none} #top_page.tp-top .tp-sup-a .tp-sup-img{object-fit:cover;transform:scale(1.2);transform-origin:52% 56%} /* 診断の絵は余白が広いので、隣の実力テストとタブレットの大きさがそろうよう少し拡大 */ #top_page.tp-top .tp-sup-vis-img .tp-sup-no{z-index:1;box-shadow:0 2px 6px rgba(20,40,60,.2)} /* ================= v10 追加：診断2枚の差（手軽＝明るく丸い／実力テスト＝紺地・角ばった形）／選ばれる理由のチェックを下へ／ハグミー全身 ================= */ #top_page.tp-top .tp-sup-a > .tp-sup-card{--c:#2a7fba;--bg:#e4f2fb;border:2px solid #a9d0ea;border-radius:20px} #top_page.tp-top .tp-sup-a .tp-sup-go{border-radius:999px} #top_page.tp-top .tp-sup-c > .tp-sup-card{--c:#173B5E;background:#173B5E;border:2px solid #173B5E;border-radius:4px;color:#fff} #top_page.tp-top .tp-sup-c > .tp-sup-card > b{color:#fff} #top_page.tp-top .tp-sup-c .tp-sup-go{background:#fff;color:#173B5E;border-radius:3px} #top_page.tp-top .tp-sup-desc{flex:0 0 auto} #top_page.tp-top .tp-dia:not(.is-temp){border:3px solid #fff;box-shadow:0 14px 30px rgba(20,40,60,.22)} /* v10：白枠を戻す。v8の4pxは野暮ったいので細く（角は立てたまま） */ @media (max-width:767px){ #top_page.tp-top .tp-dia:not(.is-temp){border-width:2px} } /* ---- v10：レビュー反映 ---- */ /* 高-1：切り替え見出しは必ず1行（幅の境目で2行になり、下のページ全体が上下していた） */ #top_page.tp-top .tp-rot{white-space:nowrap} @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-rot{font-size:32px}} @media screen and (min-width:768px) and (max-width:900px){#top_page.tp-top .tp-rot{font-size:26px}} /* 中-5：ヘッダーの法人ボタンは、テーマがスマホ用ヘッダーに切り替わる800px以下で隠す */ /* 中-1：スマホの横スクロールは次のカードを少し見せる */ /* 中-6：診断の絵は実画面ではない */ /* 中-10：見出し・ボタンは文節で折り返す */ #top_page.tp-top h2,#top_page.tp-top h3,#top_page.tp-top .tp-btn,#top_page.tp-top .tp-sup > .tp-sup-card > b{word-break:auto-phrase;text-wrap:balance} /* ================= v11 追加：レビューの残り7点 ================= */ /* 1) スマホは階段図の代わりに縦7行 */ /* 6) 立場別のご案内（明るい地の上） */ @media screen and (max-width:767px){ /* 2) 右下バナーはスマホで1行型 */ #top_page.tp-top .tp-sticky{display:flex;align-items:center;gap:8px;padding:8px 46px 8px 12px;border-top-width:3px;border-radius:0} #top_page.tp-top .tp-sticky[hidden]{display:none} #top_page.tp-top .tp-sticky-tag,#top_page.tp-top .tp-sticky-body{display:none} #top_page.tp-top .tp-sticky-head{flex:1;min-width:0;margin:0;font-size:12.5px;line-height:1.3} #top_page.tp-top .tp-sticky-head b{font-size:17px;margin-left:2px} #top_page.tp-top .tp-sticky-btn{flex:0 0 auto;width:auto;min-height:44px;padding:0 12px;font-size:13px;white-space:nowrap} #top_page.tp-top .tp-sticky-close{top:50%;margin-top:-15px;right:8px} /* 3) 無料テキスト：見出し・ボタンを先、教材の絵を後 */ /* 7) お知らせはスマホで1件 */ } /* ================= v12 追加：セミナーカードの「次回」1行（紺・グレーのみ。このブロックに赤・オレンジは使わない） ================= */ /* ================= v13 追加：内容幅を本番にそろえる ================= */ /* 本文＝グローバルメニュー（.nav-box 1000px）と同じ幅。FVだけ一覧ページ（.elx-ttl 1160px）と同じ幅。左右20pxは狭い画面用の余白 */ #top_page.tp-top .tp-in{max-width:1040px} #top_page.tp-top .tp-in.tp-fv-in{max-width:1200px} @media screen and (min-width:1024px){#top_page.tp-top .tp-reason-grid{gap:16px}#top_page.tp-top .tp-reason-grid h3{font-size:16px;padding:14px 14px 4px}#top_page.tp-top .tp-reason-grid p{padding:0 14px 16px}} /* 本文が1000pxになり4枚のカードが狭くなる分 */ /* ================= v14 追加：よく受講されているeラーニングのカードを小さく ================= */ /* 本文1000pxに3枚＋4枚目が少し見える幅。オンデマンドのカード（約299px）と同じくらい。元画像が360×200と小さいので、表示も小さいほうがくっきり見える */ @media screen and (min-width:768px){ #top_page.tp-top .tp-pop > li{flex-basis:290px} #top_page.tp-top .tp-pop .tp-card-ttl{font-size:17px} } /* ================= v15 追加：選ばれる理由の一文は「設計に必要な基礎知識」を大きく ================= */ /* v15：募集中のセミナーは3件の並び（横スライドをやめる） */ #top_page.tp-top .tp-sem-grid{margin:0;padding:0;list-style:none} #top_page.tp-top .tp-sem-grid > li{min-width:0} #top_page.tp-top .tp-sem-grid li > a.tp-thumb{display:block;height:auto;box-shadow:none;border-radius:6px} /* .tp-grid li > a（カード全体をリンクにする指定）がサムネイルに当たるのを打ち消す */ /* ================= v16 追加 ================= */ /* 3つの学び方：対比項目（3枚とも同じ並び・同じ高さ） */ #top_page.tp-top .tp-way-spec{display:flex;flex-direction:column;align-self:stretch;flex:1;margin:6px 0 16px;border-top:1px solid var(--line);text-align:left} #top_page.tp-top .tp-way-row{display:grid;grid-template-columns:80px 1fr;gap:0 8px;align-items:center;min-height:44px;box-sizing:border-box;padding:6px 2px;border-bottom:1px solid var(--line)} #top_page.tp-top .tp-way-row .k{font-size:12.5px;font-weight:bold;color:var(--mute)} #top_page.tp-top .tp-way-row .v{position:relative;font-size:14px;font-weight:bold;line-height:1.45;color:var(--navy2)} #top_page.tp-top .tp-way-el .tp-way-spec{border-top-color:#b9cbe0} #top_page.tp-top .tp-way-el .tp-way-row{border-bottom-color:#d3deeb} @media screen and (max-width:767px){ #top_page.tp-top .tp-way-spec{flex-basis:100%;margin:10px 0 14px} #top_page.tp-top .tp-way-row{min-height:0;padding:8px 2px} } /* ひし形：角をさらに立て、色面の飾りは淡く（まとまりを優先） */ #top_page.tp-top .tp-dia:not(.is-temp){border-radius:3%} #top_page.tp-top .tp-dia-deco{border-radius:6%} /* ================= v17 追加：ひし形をタイル貼りに（参考 carely.jp） ================= */ #top_page.tp-top .tp-fv-collage{max-width:520px} #top_page.tp-top .tp-dia:not(.is-temp){border:0;border-radius:0;box-shadow:none} #top_page.tp-top .tp-dia-deco{border-radius:0;box-shadow:none;border:0;opacity:1} /* ひし形は45度回っているので、135deg のグラデーションが画面では上→下に見える */ #top_page.tp-top .tp-deco-a{background:rgba(111,163,220,.26)} /* ひし形の枠の上下は写真の無い空き（上約5.5%・下約10%）。大きさは変えずに、その空きぶんだけFVを詰める */ #top_page.tp-top .tp-fv-collage{margin-top:-24px;margin-bottom:-46px} @media screen and (min-width:1024px){#top_page.tp-top .tp-fv-collage{position:relative;left:32px}} /* かたまりを少し右へ（10/3） */ @media screen and (max-width:767px){#top_page.tp-top .tp-fv-collage{max-width:340px;margin-top:-14px;margin-bottom:-28px}} /* ================= v18 追加 ================= */ /* 対比5項目：◎（is-best）＝二重丸、—（is-none）＝横棒だけ、注記の small */ /* 文字が無い行も、ほかの行と同じ高さに */ #top_page.tp-top .tp-ways-grid{grid-template-columns:repeat(3,minmax(0,1fr))} /* 768幅で中央の列だけ広がっていた（1frは中身の幅を下回れない）のを、3列同じ幅に */ /* 768〜1023幅：カードが狭く（約227px）値が2〜3行に折れて3枚の行がずれる → 項目名を上・値を下の2段にして1行に収める */ @media screen and (min-width:768px) and (max-width:1023px){ #top_page.tp-top .tp-way-row{grid-template-columns:1fr;gap:0;min-height:0;padding:7px 2px 8px} #top_page.tp-top .tp-way-row .k{font-size:11.5px;line-height:1.3} #top_page.tp-top .tp-way-row .v{font-size:13.5px;white-space:nowrap;min-height:1.45em} #top_page.tp-top .tp-way-name{font-size:21px;white-space:nowrap} /* 「オンデマンド講座」が2行に折れて中央の枠だけ下がるのを防ぐ */ #top_page.tp-top .tp-way > .tp-btn{white-space:nowrap;font-size:14px;padding-left:8px;padding-right:8px} } /* 募集中のセミナー：近い順の注記、日付の下に時間 */ #top_page.tp-top .tp-sem-note{display:flex;align-items:center;gap:10px;margin:-8px 0 14px;font-size:13.5px;color:var(--mute)} #top_page.tp-top .tp-sem-note-tag{flex:0 0 auto;padding:1px 9px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:bold;line-height:1.6} #top_page.tp-top .tp-sem-when{display:flex;flex-direction:column;gap:2px} #top_page.tp-top .tp-sem-time{display:flex;align-items:center;gap:5px;margin:0;font-size:14px;font-weight:bold;color:var(--navy2);font-feature-settings:"tnum";line-height:1.3} #top_page.tp-top .tp-sem-time svg{flex:0 0 auto;color:var(--mute)} @media screen and (max-width:767px){ #top_page.tp-top .tp-sem-note{align-items:flex-start;margin:-4px 0 12px;font-size:12.5px} #top_page.tp-top .tp-ways-grid{grid-template-columns:1fr} } /* ================= v19 追加 ================= */ /* FVの実績3つ：上に余白（ひし形の下端から離す）。白を濃く・薄い紺の枠線・数字を少し大きく＝「ほんのちょっと」目立たせる */ #top_page.tp-top .tp-stats{margin-top:22px} #top_page.tp-top .tp-stats ul{background:rgba(255,255,255,.9);border:1px solid #c9d8e8;box-shadow:0 4px 16px rgba(20,40,60,.1)} #top_page.tp-top .tp-stats b{font-size:40px} @media screen and (max-width:1023px){#top_page.tp-top .tp-stats b{font-size:34px}} @media screen and (max-width:767px){#top_page.tp-top .tp-stats{margin-top:12px}#top_page.tp-top .tp-stats b{font-size:25px}} /* 受講者の声：分野・対象レベルのタグ（文字だけ・色は増やさない）、講座名は矢印付きの小さなボタン風リンク */ /* 枠の中に「講座名｜分野 →」を1行で。棒線と分野は薄いグレー（10/3 ユーザー指示） */ /* 「講座名 →」だけの枠。枠全体がリンク */ #top_page.tp-top .tp-voice-grid li::before{top:auto;bottom:40px} /* 引用符は右下へ（上部にタグ・リンクが増えたため） */ /* ================= v19 追加：お知らせの上の「新リリース」帯（オレンジ）。緊急は赤 ================= */ #top_page.tp-top .tp-ann{display:flex;align-items:center;gap:12px;box-sizing:border-box;margin:0 0 12px;padding:10px 18px;border:1px solid #f0c9a8;border-left:6px solid var(--org);border-radius:8px;background:#fff6ee;box-shadow:0 2px 6px rgba(20,40,60,.05)} #top_page.tp-top .tp-ann[hidden]{display:none} #top_page.tp-top .tp-ann-tag{flex:0 0 auto;padding:3px 10px;border-radius:4px;background:var(--org);color:#fff;font-size:12.5px;font-weight:bold;line-height:1.5} #top_page.tp-top .tp-ann-text{flex:1;min-width:0;margin:0;font-size:15px;font-weight:bold;line-height:1.5;color:#cc4a00} #top_page.tp-top .tp-ann-link{flex:0 0 auto;color:#cc4a00;font-size:13.5px;font-weight:bold;text-decoration:underline;white-space:nowrap} #top_page.tp-top .tp-ann-link:hover{text-decoration:none} @media screen and (max-width:767px){ #top_page.tp-top .tp-ann{flex-wrap:wrap;gap:6px 10px;padding:10px 14px;margin-bottom:10px} #top_page.tp-top .tp-ann-text{flex-basis:100%;font-size:14px} #top_page.tp-top .tp-ann-link{margin-left:auto} } /* ================= v20 追加：セクションの余白と見出し（参考 /freepdf-download/） ================= */ /* 上下は参考112pxより少し詰めた96px（トップは区画が12あるため） */ #top_page.tp-top .tp-sec{padding:96px 0} /* 区切りは v19 までと同じ色地の交互（白地＋線は10/3に試して戻した） */ #top_page.tp-top .tp-ways{padding-top:96px} #top_page.tp-top .tp-notice{padding-bottom:32px} /* 見出し：大きく・濃い色・左寄せ・字間を詰める。下の棒はやめ、リードを見出しの下に。見出しブロックから本文まで52px */ #top_page.tp-top .tp-h2{text-align:left;font-size:36px;line-height:1.38;letter-spacing:-.015em;color:#14263a;text-wrap:balance} #top_page.tp-top .tp-h2-bar{display:none} #top_page.tp-top .tp-lead{margin:16px 0 52px;text-align:left;font-size:16px;line-height:1.8;color:#5c6773} #top_page.tp-top .tp-h2 + .tp-h2-bar + :not(.tp-lead),#top_page.tp-top .tp-ways .tp-h2 + .tp-h2-bar + .tp-ways-grid{margin-top:52px} /* リードが無い区画は見出しの52px下から本文 */ #top_page.tp-top .tp-h2-left{font-size:30px} /* 白い箱の上なので紺のまま（白にすると消える） */ #top_page.tp-top .tp-news-col .tp-h2{font-size:24px} @media screen and (max-width:1023px){#top_page.tp-top .tp-sec,#top_page.tp-top .tp-ways{padding:72px 0}#top_page.tp-top .tp-h2{font-size:30px}#top_page.tp-top .tp-lead{margin-bottom:40px}} @media screen and (max-width:767px){ #top_page.tp-top .tp-sec,#top_page.tp-top .tp-ways{padding:56px 0} #top_page.tp-top .tp-h2{font-size:26px;line-height:1.4} #top_page.tp-top .tp-lead{margin:12px 0 32px;font-size:15px} #top_page.tp-top .tp-h2 + .tp-h2-bar + :not(.tp-lead),#top_page.tp-top .tp-ways .tp-h2 + .tp-h2-bar + .tp-ways-grid{margin-top:32px} #top_page.tp-top .tp-h2-left{font-size:23px} #top_page.tp-top .tp-news-col .tp-h2{font-size:21px} } /* ================= v20 追加2：リンクを部品ごとに（画像・ボタンだけ。タイトルはリンクなし） ================= */ /* 診断2枚：箱は div（.tp-sup-card）、画像とボタンが別々のリンク。※コメントにタグを書くと件数チェックに引っかかる */ #top_page.tp-top .tp-sup > .tp-sup-card:hover > b{text-decoration:none} #top_page.tp-top .tp-sup > .tp-sup-card:hover .tp-sup-go{filter:none} #top_page.tp-top .tp-support-grid .tp-sup-card:hover .tp-sup-go{filter:none} #top_page.tp-top .tp-sup-card:hover b{text-decoration:none} #top_page.tp-top a.tp-sup-vis{text-decoration:none;transition:filter .15s} #top_page.tp-top a.tp-sup-vis:hover{filter:brightness(.94)} #top_page.tp-top a.tp-sup-go{display:block;text-decoration:none;transition:filter .15s,transform .15s} #top_page.tp-top a.tp-sup-go:hover{filter:brightness(.9);transform:translateY(-1px)} #top_page.tp-top .tp-sup > .tp-sup-card > b{cursor:default} /* オンデマンド3枚：箱は
  • 、画像と「詳細を見る」が別々のリンク */ #top_page.tp-top .tp-odcard{display:flex;flex-direction:column;height:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-odcard > a.tp-thumb{display:block;height:auto;box-shadow:none;transition:opacity .15s} #top_page.tp-top .tp-odcard > a.tp-thumb:hover{opacity:.85} #top_page.tp-top .tp-odcard .tp-card-ttl{cursor:default;color:#1d2733} /* タイトルはリンクなし。紺だとリンクに見えるので、セミナーのタイトルと同じ文字色に（10/3） */ #top_page.tp-top .tp-odcard .tp-card-ttl:hover{text-decoration:none} /* v3の .tp-card-ttl:hover（下線）を打ち消す。カーソルを合わせても何も起きない */ /* .tp-grid li > a（カード全体の箱）の指定を打ち消し、下端の1行に戻す */ /* よく受講：画像にも触れたと分かるように */ #top_page.tp-top .tp-ccard > a.tp-thumb{transition:opacity .15s} #top_page.tp-top .tp-ccard > a.tp-thumb:hover{opacity:.85} #top_page.tp-top .tp-ccard a.tp-card-ttl:hover{text-decoration:underline} /* 選ばれる理由：チェック3点は左寄せ */ /* ================= v21 追加（GPTの修正提案 10/3 を取捨して反映） ================= */ /* 3つの学び方：目的の下に「学び方」の一文。2行ぶんの高さを確保して3枚の行をそろえる。eLだけ診断への小さなリンク（ボタンの上） */ #top_page.tp-top .tp-way-goal{margin-bottom:10px} /* 10/3午後：学び方の一文は読み飛ばされそう（枠なし・薄い色）→ 薄い青地の箱＋紺の左線・濃い文字に。高さは2行＋余白で3枚そろえる */ /* 受講者の声：右下の引用符（点々に見える）はやめる */ #top_page.tp-top .tp-voice-grid li::before{content:none} #top_page.tp-top .tp-voice-q{padding-right:0} #top_page.tp-top .tp-way-detail-wrap{display:none} /* 表はスマホだけ */ #top_page.tp-top #tp-support{scroll-margin-top:80px} @media screen and (min-width:768px) and (max-width:1023px){ /* 768幅はeLの一文が3行に折れる → 3枚とも3行ぶん確保して行をそろえる */ #top_page.tp-top .tp-way-el .tp-way-name{font-size:21px} /* v7の23pxが残っていて、eLだけ行が3px下がっていた */ } @media screen and (max-width:767px){ #top_page.tp-top .tp-way-row-more{display:none} /* スマホの初期表示は「期間」だけ。残りは下の表で */ #top_page.tp-top .tp-way-spec{margin:6px 0 12px} #top_page.tp-top .tp-way-detail-wrap{display:block;margin:14px 0 0} #top_page.tp-top .tp-way-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:0;padding:10px 16px;border:2px solid var(--navy);border-radius:6px;background:#fff;color:var(--navy);font-size:15px;font-weight:bold;font-family:inherit;line-height:1.3;cursor:pointer;-webkit-appearance:none;appearance:none} #top_page.tp-top .tp-way-more-ic{position:relative;width:12px;height:12px;flex:0 0 auto} #top_page.tp-top .tp-way-more-ic::before,#top_page.tp-top .tp-way-more-ic::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:currentColor} #top_page.tp-top .tp-way-more-ic::after{transform:rotate(90deg)} #top_page.tp-top .tp-way-more[aria-expanded="true"] .tp-way-more-ic::after{display:none} #top_page.tp-top .tp-way-detail{margin-top:12px} #top_page.tp-top .tp-way-detail[hidden]{display:none} #top_page.tp-top .tp-way-table{width:100%;margin:0;border-collapse:collapse;table-layout:fixed;background:#fff;border:1px solid var(--line);font-size:12.5px;line-height:1.45} #top_page.tp-top .tp-way-table th,#top_page.tp-top .tp-way-table td{padding:8px 5px;border:1px solid var(--line);vertical-align:top;text-align:left;line-height:1.45;word-break:break-all;background:#fff;text-transform:none} /* text-transform：テーマが th を大文字にして「Eラーニング」になるのを防ぐ */ #top_page.tp-top .tp-way-table thead th{background:var(--navy);color:#fff;font-size:12px;font-weight:bold;text-align:center;vertical-align:middle} #top_page.tp-top .tp-way-table thead th:first-child{width:21%;background:#fff} #top_page.tp-top .tp-way-table tbody th{background:#f3f7fb;color:var(--mute);font-size:11.5px;font-weight:bold} #top_page.tp-top .tp-way-table td .v{position:relative;display:block;font-weight:bold;color:var(--navy2)} /* 列が狭いので、◎は文字の左ではなく上に置く（左に置くと文字が1列3〜4行に折れる） */ } /* ================= v21 修正4：レビュー（UI/UX・技術 10/3）の反映 ================= */ /* 技術 高-3：FVの列を中身の幅で広げない（320幅で見出しの箱が15pxはみ出していた／768幅でひし形が8px動いていた）。箱の幅はJSで最長の語に固定 */ #top_page.tp-top .tp-fv-in{grid-template-columns:minmax(0,52fr) minmax(0,48fr)} #top_page.tp-top .tp-rot{display:inline-block;text-align:left} @media screen and (max-width:767px){#top_page.tp-top .tp-fv-in{grid-template-columns:minmax(0,1fr)}} @media screen and (max-width:359px){#top_page.tp-top .tp-rot{font-size:20px;letter-spacing:.02em}#top_page.tp-top .tp-rot-box{padding:5px 10px 7px}} /* UI 中-2：数字と単位を折らない */ #top_page.tp-top .tp-nw{white-space:nowrap} /* UI 中-3：手軽な診断の水色を少し濃く（#2a7fba 4.34:1 → #2473a8 で白地・薄い青地とも4.5:1以上） */ #top_page.tp-top .tp-sup-a > .tp-sup-card{--c:#2473a8} /* UI 中-1：右下バナーは 768〜1364px でもスマホと同じ下端の1行型（カード型だと本文の右側にかぶり、法人のボタン等を隠していた） */ @media screen and (min-width:768px) and (max-width:1364px){ #top_page.tp-top .tp-sticky{display:flex;align-items:center;gap:12px;right:0;bottom:0;left:0;width:auto;padding:8px 52px 8px 16px;border-top-width:3px;border-radius:0;box-shadow:0 -6px 20px rgba(20,40,60,.18)} #top_page.tp-top .tp-sticky[hidden]{display:none} #top_page.tp-top .tp-sticky-body{display:none} #top_page.tp-top .tp-sticky-tag{flex:0 0 auto} #top_page.tp-top .tp-sticky-head{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.3} #top_page.tp-top .tp-sticky-head b{font-size:18px;margin-left:4px} #top_page.tp-top .tp-sticky-btn{flex:0 0 auto;width:auto;min-height:44px;padding:0 18px;font-size:14px;white-space:nowrap} #top_page.tp-top .tp-sticky-close{top:50%;margin-top:-15px;right:12px} body.tp-sticky-on #page-top{bottom:calc(var(--tp-sticky-h,60px) + 12px)!important} } /* UI 中-4：受講者の声の下のボタン */ /* UI 中-5（10/3 ユーザー「横型カードにして」）：スマホの「eラーニング以外」はカードを横型に（左に小さい画像・右に日付やタイトル）。3件の並びは変えない */ @media screen and (max-width:767px){ #top_page.tp-top .tp-sem-grid > li.tp-semcard{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start;gap:0} #top_page.tp-top .tp-semcard > a.tp-thumb{margin:12px 0 0 12px} #top_page.tp-top .tp-semcard-body{padding:10px 12px 12px;gap:4px} #top_page.tp-top .tp-semcard .tp-sem-date .md{font-size:20px} #top_page.tp-top .tp-semcard .tp-sem-time{font-size:13px} #top_page.tp-top .tp-semcard .tp-sem-title{font-size:15px;line-height:1.4} #top_page.tp-top .tp-semcard .tp-btn{min-height:40px;margin-top:4px;padding:6px 10px;font-size:13.5px} #top_page.tp-top .tp-od-grid > li.tp-odcard{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"img ttl" "img meta" "desc desc" "go go";align-items:start} #top_page.tp-top .tp-odcard > a.tp-thumb{grid-area:img;margin:12px 0 0 12px} #top_page.tp-top .tp-odcard .tp-card-ttl{grid-area:ttl;padding:10px 12px 2px;font-size:15px;line-height:1.4} #top_page.tp-top .tp-odcard .tp-reco-get{grid-area:desc;padding:8px 12px 0;font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } /* ================= v22 追加：通常セクションの本文の有効幅 1,000px → 960px（10/3 ユーザー指示）。FVは1,200px（有効1,160px）のまま ================= */ #top_page.tp-top .tp-in{max-width:1000px} #top_page.tp-top .tp-in.tp-fv-in{max-width:1200px} /* 960pxにするとカードが約305pxになり、eLの「受講者の管理機能あり」が「り」だけ2行目に落ちた → 1024px以上だけカードの左右余白24→18px・項目名の列80→76px（3枚とも同じなので行はそろったまま） */ @media screen and (min-width:1024px){ #top_page.tp-top .tp-way{padding-left:18px;padding-right:18px} #top_page.tp-top .tp-way-row{grid-template-columns:76px 1fr} } /* ================= v23 追加：比較は共通5項目＋「この学び方の特徴」 ================= */ /* 共通の行はそろえたまま、特徴の箱が残りの高さを受け持つ（項目数が違ってもボタンは下端でそろう。文字を小さくしたり空行を足したりしない） */ #top_page.tp-top .tp-way-spec{flex:0 0 auto;margin-bottom:14px} #top_page.tp-top .tp-way-feat{flex:1;align-self:stretch;box-sizing:border-box;margin:0 0 16px;text-align:left} #top_page.tp-top .tp-way-feat-h{margin:0 0 8px;font-size:12.5px;font-weight:bold;color:var(--mute);letter-spacing:.04em} #top_page.tp-top .tp-way-feat ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0} #top_page.tp-top .tp-way-feat li{position:relative;padding:9px 10px 9px 30px;border-radius:6px;background:#f3f7fb;font-size:13.5px;line-height:1.55;color:var(--txt)} #top_page.tp-top .tp-way-feat li::before{content:"";position:absolute;left:10px;top:13px;width:12px;height:7px;border-left:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(-45deg)} #top_page.tp-top .tp-way-feat li b{display:block;font-size:14px;color:var(--navy2)} /* 学び方の一文の箱：min-height に枠線2px分が入っていなかったので、文が規定の行数いっぱいのカードだけ2px下がっていた（768幅のeL） */ /* スマホ：カードは特徴の札だけ（全文は「詳しく比較する」の表の最後の行） */ @media screen and (max-width:767px){ #top_page.tp-top .tp-way-spec{flex:0 0 100%} /* 上の flex:0 0 auto でスマホの「期間」の行が全幅でなくなっていた */ #top_page.tp-top .tp-way-feat{flex-basis:100%;margin:0 0 12px} #top_page.tp-top .tp-way-feat-h{margin-bottom:6px} #top_page.tp-top .tp-way-feat ul{flex-direction:row;flex-wrap:wrap;gap:6px} #top_page.tp-top .tp-way-feat li{padding:4px 10px 4px 26px;border-radius:999px;font-size:13px} #top_page.tp-top .tp-way-feat li::before{left:9px;top:9px;width:10px;height:6px;border-width:0 0 2px 2px} #top_page.tp-top .tp-way-feat li > span{display:none} /* v37：直下の説明文だけ隠す（見出し b の中の折り返し用 span まで消えていた） */ #top_page.tp-top .tp-way-feat li b{display:inline;font-size:13px} #top_page.tp-top .tp-way-table .tp-way-tfeat{margin:0;padding:0;list-style:none} #top_page.tp-top .tp-way-table .tp-way-tfeat li{margin:0 0 6px;font-weight:normal;color:var(--txt)} #top_page.tp-top .tp-way-table .tp-way-tfeat li:last-child{margin-bottom:0} #top_page.tp-top .tp-way-table .tp-way-tfeat b{display:block;color:var(--navy2)} } /* ================= v23 修正：カードを見やすく（10/3 ユーザー「項目が増えて見づらい」） ================= ねらい：薄い青の箱が4種類（目的の札・学び方の箱・特徴の箱×2）重なって区切りが分からなかった → ①アイコンを小さくして上を詰める ②「比べるポイント」と「この学び方の特徴」を見出し付きの2つのまとまりに分ける ③特徴は箱をやめ、紺の丸いチェック＋太字の見出し＋灰色の説明の箇条書きに ④まとまりの間に余白をとる */ @media screen and (min-width:768px){ #top_page.tp-top .tp-way{padding-top:24px} #top_page.tp-top .tp-way-name{margin-bottom:8px} #top_page.tp-top .tp-way-spec{position:relative;margin:22px 0 22px;border-top:2px solid var(--navy)} #top_page.tp-top .tp-way-spec::before{content:"比べるポイント";position:absolute;left:0;top:-22px;font-size:12px;font-weight:bold;letter-spacing:.06em;color:var(--navy)} #top_page.tp-top .tp-way-feat{margin-bottom:18px} #top_page.tp-top .tp-way-feat-h{margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid var(--navy);font-size:12px;letter-spacing:.06em;color:var(--navy)} #top_page.tp-top .tp-way-feat ul{gap:12px} #top_page.tp-top .tp-way-feat li{padding:0 0 0 28px;border-radius:0;background:none;font-size:13.5px;line-height:1.6;color:var(--mute)} #top_page.tp-top .tp-way-feat li::before{left:0;top:2px;width:18px;height:18px;border:0;border-radius:50%;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;transform:none} #top_page.tp-top .tp-way-feat li b{margin-bottom:1px;font-size:14.5px;line-height:1.45;color:var(--navy2)} } /* ================= v24 追加（10/3 ユーザー） ================= */ /* ① 比べるポイント：項目名の列だけ薄い紺（仕様表の見た目で、下の「特徴」と区別）。10/3 黄色の箱 →「もっとシャープ・自然に」→ 4案（成果物/比較_比べるポイントの色4案.png）から C に決定 */ #top_page.tp-top .tp-way-spec{box-sizing:border-box} /* スマホは flex-basis:100% なので、余白を足すときにはみ出さないように */ #top_page.tp-top .tp-way .tp-way-row{padding-left:10px;border-bottom:1px solid #dfe6ee} #top_page.tp-top .tp-way-row .k{align-self:stretch;display:flex;align-items:center;margin:-6px 0 -6px -10px;padding-left:10px;background:#eaf0f7;color:var(--navy2)} /* 負のマージンで行の上下・左端まで色を広げる（値の列との間は白いすき間） */ @media screen and (max-width:767px){ #top_page.tp-top .tp-way-spec{border-top:1px solid #dfe6ee} #top_page.tp-top .tp-way-row .k{margin:-8px 0 -8px -10px} /* スマホは行の上下余白が8px */ } /* ①'' 法人の固定バナー（既存 [sticky_banner]）は残す（10/3 ユーザー）。スマホは「企業向け」下端バーとお知らせバナー（下端）が同じ位置に重なる → お知らせバナーを出している間だけ「企業向け」バーを隠す（お知らせを×で閉じる・期間外なら、いつもどおり出る）。body.tp-sticky-on はお知らせバナーのJSが付ける */ body.tp-sticky-on .c-sticky-banner__sp{visibility:hidden;opacity:0;pointer-events:none} /* ①''' カードの余白（10/3 ユーザー「全部詰まって見える」）：左右18→24px、まとまり（名前・目的／比べるポイント／特徴／ボタン）の間を広げ、表の行を44→48px */ @media screen and (min-width:768px){ #top_page.tp-top .tp-way{padding-top:32px;padding-bottom:28px} #top_page.tp-top .tp-way-name{margin-bottom:12px} #top_page.tp-top .tp-way-goal{margin-bottom:0} #top_page.tp-top .tp-way-spec{margin:44px 0 0} #top_page.tp-top .tp-way-row{min-height:48px} #top_page.tp-top .tp-way-feat{margin:36px 0 24px} #top_page.tp-top .tp-way-feat-h{margin-bottom:16px} #top_page.tp-top .tp-way-feat ul{gap:16px} } @media screen and (min-width:1024px){#top_page.tp-top .tp-way{padding-left:24px;padding-right:24px}} /* ④ 分野リンクに講座数（名前の下に小さく）・オンデマンドに期間限定の割引の札（10/3 ユーザー） */ #top_page.tp-top .tp-od-badges{display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px 0} #top_page.tp-top .tp-od-badges + .tp-card-ttl{padding-top:8px} @media screen and (max-width:767px){ #top_page.tp-top .tp-od-grid > li.tp-odcard{grid-template-areas:"img badge" "img ttl" "img meta" "desc desc" "go go"} #top_page.tp-top .tp-od-badges{grid-area:badge;padding:12px 12px 0} #top_page.tp-top .tp-od-badges + .tp-card-ttl{padding-top:4px} } @media screen and (max-width:359px){#top_page.tp-top .tp-od-badges{padding-right:8px}#top_page.tp-top .tp-od-badges .tp-badge{padding:2px 6px;font-size:11.5px}} /* 320幅で札が3pxはみ出した */ /* ② 講座診断への文字リンクの左に「？」 */ /* ③ よく受講の下に「分野から講座を探す」（PC 4列×2段・スマホ 2列×4段） */ #top_page.tp-top .tp-field-h{margin:0 0 6px;padding:0;border:0;background:none;font-size:18px;font-weight:bold;line-height:1.4;color:var(--navy2);text-align:left} #top_page.tp-top .tp-field-h::before,#top_page.tp-top .tp-field-h::after{content:none} /* 折り返しは「・」の後ろだけ（「・」ごとに区切って tp-nw で包む。320幅で「設計の進め／方」「・構想設計」と割れていた） */ @media screen and (max-width:767px){ #top_page.tp-top .tp-field-h{font-size:17px} } /* ================= v25 追加（10/4 ユーザー・参考 ferret-one.com）：FVの切り替え語 ================= */ /* ① 語ごとに箱の色を少し変える（紺〜青の範囲のグラデーション。ブランドの紺から外れない）。オレンジの影はそのまま */ #top_page.tp-top .tp-rot-box{background:linear-gradient(100deg,#264c73,#3a6fa3);transition:background-color .45s} #top_page.tp-top .tp-rot-box[data-i="1"]{background:linear-gradient(100deg,#1f4f86,#2f86b8)} #top_page.tp-top .tp-rot-box[data-i="2"]{background:linear-gradient(100deg,#2a4a8c,#4a78c4)} /* ② 動き：右へ抜けて、次の語は左から入る（上下に動かさない） */ #top_page.tp-top .tp-rot{transition:opacity .45s ease,transform .45s ease,width .45s ease;white-space:nowrap;vertical-align:top} #top_page.tp-top .tp-rot.is-out{opacity:0;transform:translateX(24px)} #top_page.tp-top .tp-rot.is-in{opacity:0;transform:translateX(-28px);transition:none} /* 3つの学び方：ODの教材「動画（セミナー収録含む）」は補足を小さく（14pxのままだと1024px以上で2行に折れ、ODだけ特徴が6px下がった） */ #top_page.tp-top .tp-way-v-note{font-size:12px;font-weight:bold;letter-spacing:0} /* ③ 文字を大きく（各幅で約2割増し。最長の「根拠をもって設計する力が」が列に収まる範囲で実測） */ #top_page.tp-top .tp-rot{font-size:46px} @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-rot{font-size:38px}} @media screen and (min-width:901px) and (max-width:1023px){#top_page.tp-top .tp-rot{font-size:34px}} @media screen and (min-width:861px) and (max-width:900px){#top_page.tp-top .tp-rot{font-size:29px}} @media screen and (min-width:768px) and (max-width:860px){#top_page.tp-top .tp-rot{font-size:26px}} /* 29pxだと768幅でひし形に16pxかぶった */ @media screen and (max-width:767px){#top_page.tp-top .tp-rot{font-size:25px}} /* 26pxだと375幅で右の余白に食い込んだ */ @media screen and (max-width:359px){#top_page.tp-top .tp-rot{font-size:21px}} /* ================= v26 追加（10/5 社内指摘）：最初の画面は見出し固定＋無料会員登録のボタン1つ ================= */ #top_page.tp-top .tp-h1-static{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:6px 0 18px;font-size:64px;line-height:1.28;letter-spacing:.02em;color:var(--navy2)} #top_page.tp-top .tp-h1-l{display:block;white-space:nowrap} #top_page.tp-top .tp-h1-em{background:linear-gradient(transparent 84%,#ed5901 84%,#ed5901 94%,transparent 94%)} /* 「機械設計」にオレンジの下線 */ #top_page.tp-top .tp-fv-sub{margin:0 0 22px;font-size:19px;line-height:1.75;font-weight:bold;color:var(--navy2)} #top_page.tp-top .tp-fv-cta{display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px} #top_page.tp-top .tp-fv-cta-lead{margin:0 0 8px;font-size:17px;font-weight:bold;color:var(--navy2);letter-spacing:.04em} #top_page.tp-top .tp-fv-reg{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:72px;padding:12px 56px;border-radius:8px;background:linear-gradient(180deg,#2bb04e,#1c923b);box-shadow:0 4px 0 #13702c,0 8px 18px rgba(20,110,50,.25);color:#fff;font-size:24px;font-weight:bold;line-height:1.35;letter-spacing:.04em;text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s} #top_page.tp-top .tp-fv-reg:hover{transform:translateY(2px);box-shadow:0 2px 0 #13702c,0 6px 14px rgba(20,110,50,.25);color:#fff} #top_page.tp-top .tp-fv-reg-tx{word-break:keep-all} #top_page.tp-top .tp-fv-reg-ar{position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-6px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg)} #top_page.tp-top .tp-fv-reg-note{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:14px;color:var(--txt)} #top_page.tp-top .tp-fv-gift{flex:0 0 auto;color:#ed5901} /* 1440×900で実績の数字が画面外に押し出されたので、1024px以上は見出し・説明・ボタンを少し詰める */ @media screen and (min-width:1024px){ #top_page.tp-top .tp-kicker{margin-bottom:4px} #top_page.tp-top .tp-h1-static{font-size:56px;line-height:1.24;margin:2px 0 14px} #top_page.tp-top .tp-fv-sub{font-size:17px;line-height:1.7;margin-bottom:16px} #top_page.tp-top .tp-fv-cta-lead{font-size:15.5px;margin-bottom:6px} #top_page.tp-top .tp-fv-reg{min-height:62px;font-size:22px} #top_page.tp-top .tp-fv-reg-note{margin-top:10px} } @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-h1-static{font-size:50px}#top_page.tp-top .tp-fv-reg{font-size:20px}} @media screen and (min-width:768px) and (max-width:1023px){ #top_page.tp-top .tp-h1-static{font-size:44px} #top_page.tp-top .tp-fv-sub{font-size:16px} #top_page.tp-top .tp-fv-reg{min-height:64px;padding:10px 44px;font-size:18px} #top_page.tp-top .tp-fv-reg-ar{right:18px} #top_page.tp-top .tp-fv-cta-lead{font-size:15px} #top_page.tp-top .tp-fv-reg-note{font-size:12.5px} } @media screen and (min-width:768px) and (max-width:860px){#top_page.tp-top .tp-h1-static{font-size:38px}} @media screen and (max-width:767px){ #top_page.tp-top .tp-h1-static{font-size:36px;margin-bottom:14px} #top_page.tp-top .tp-fv-sub{font-size:15px;line-height:1.7} #top_page.tp-top .tp-fv-cta{max-width:none} #top_page.tp-top .tp-fv-cta-lead{font-size:14.5px} #top_page.tp-top .tp-fv-reg{min-height:64px;padding:10px 40px;font-size:18px} #top_page.tp-top .tp-fv-reg-ar{right:16px;width:9px;height:9px;margin-top:-5px} #top_page.tp-top .tp-fv-reg-note{font-size:12.5px;align-items:flex-start} } @media screen and (max-width:359px){#top_page.tp-top .tp-h1-static{font-size:31px}#top_page.tp-top .tp-fv-reg{font-size:16.5px;padding:10px 34px}} /* ================= v26 修正（10/5 ユーザー「見出しが細い・文字量が多い・縦に長い・センスよく」） ================= */ /* 見出し：極太（Noto Sans JP 900）。テーマの書体は 400・700 だけなので、見出しの文字だけに絞った 900 を読み込む（ の link。本番は同じ絞り込みのファイルをテーマに置く） */ #top_page.tp-top .tp-h1-static{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-weight:900;letter-spacing:.01em;color:#16335a;font-feature-settings:"palt"} #top_page.tp-top .tp-h1-l:first-child{margin-left:-.02em} #top_page.tp-top .tp-h1-em{background:linear-gradient(transparent 82%,#ed5901 82%,#ed5901 95%,transparent 95%);padding:0 .04em;margin:0 -.04em} /* 説明：2行・太字をやめて軽く */ #top_page.tp-top .tp-fv-sub{font-weight:500;letter-spacing:.05em;color:#1f3f66} /* ボタンの下：左に特典の注記、右端に「学び方・講座を見る」（1行に収めて縦を詰める） */ #top_page.tp-top .tp-fv-reg-note{margin:0;color:#3c4a5a} #top_page.tp-top .tp-fv-cta-lead{letter-spacing:.08em;color:#1f3f66} @media screen and (min-width:1024px){ #top_page.tp-top .tp-h1-static{font-size:64px;line-height:1.22;margin:4px 0 18px} #top_page.tp-top .tp-fv-sub{font-size:18px;line-height:1.75;margin-bottom:22px} #top_page.tp-top .tp-fv-reg{min-height:66px} } @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-h1-static{font-size:54px}#top_page.tp-top .tp-fv-sub{font-size:16.5px;letter-spacing:.02em}} @media screen and (min-width:768px) and (max-width:1023px){#top_page.tp-top .tp-fv-sub{font-size:15px;letter-spacing:0}} @media screen and (max-width:767px){ #top_page.tp-top .tp-fv-sub{letter-spacing:0} } @media screen and (max-width:359px){#top_page.tp-top .tp-fv-br{display:none}} /* ================= v26 修正2（10/5 ユーザー「社内の画像の通りに」）：見出しをさらに大きく・説明は細字で大きめ・ボタンは「無料会員登録する」を大きく・注記は中央 ================= */ #top_page.tp-top .tp-fv-cta{max-width:600px} #top_page.tp-top .tp-fv-sub{font-weight:400;letter-spacing:.06em;color:#1f3f66} #top_page.tp-top .tp-fv-cta-lead{font-weight:bold;letter-spacing:.1em} #top_page.tp-top .tp-fv-reg{letter-spacing:.14em} #top_page.tp-top .tp-fv-reg-note{justify-content:center;margin:14px 0 0;color:#1f3f66;letter-spacing:.04em} @media screen and (min-width:1024px){ #top_page.tp-top .tp-fv{padding-top:32px} /* 見出しを大きくしたぶん上下を詰めて、1440×900 で実績の数字まで1画面に収める */ #top_page.tp-top .tp-stats{margin-top:4px} #top_page.tp-top .tp-h1-static{font-size:68px;line-height:1.2;margin:6px 0 16px} #top_page.tp-top .tp-fv-sub{font-size:20px;line-height:1.7;margin-bottom:22px} #top_page.tp-top .tp-fv-cta-lead{font-size:17px;margin-bottom:8px} #top_page.tp-top .tp-fv-reg{min-height:74px;font-size:28px} #top_page.tp-top .tp-fv-reg-ar{right:34px;width:13px;height:13px;margin-top:-7px} #top_page.tp-top .tp-fv-reg-note{font-size:15px} } @media screen and (min-width:1024px) and (max-width:1120px){ #top_page.tp-top .tp-h1-static{font-size:58px} #top_page.tp-top .tp-fv-sub{font-size:17px;letter-spacing:.02em} #top_page.tp-top .tp-fv-reg{font-size:24px;min-height:68px} } @media screen and (min-width:768px) and (max-width:1023px){ #top_page.tp-top .tp-fv-reg{font-size:21px;letter-spacing:.1em} #top_page.tp-top .tp-fv-reg-note{font-size:12px;letter-spacing:0} } @media screen and (max-width:767px){ #top_page.tp-top .tp-fv-reg{font-size:22px;min-height:66px} #top_page.tp-top .tp-fv-reg-note{font-size:12.5px;letter-spacing:0;align-items:center} #top_page.tp-top .tp-fv-sub{letter-spacing:0} /* 字間を空けると375幅で「で、」だけ次の行に落ちた */ } @media screen and (max-width:359px){#top_page.tp-top .tp-fv-reg{font-size:20px}#top_page.tp-top .tp-fv-reg-note{font-size:12px}} /* ================= v26 修正3（10/5 ユーザー「機械設計は下線より色？・文字が大きすぎる気も」）：下線をやめてオレンジの文字に・見出しをひと回り小さく ================= */ #top_page.tp-top .tp-h1-em{background:none;padding:0;margin:0;color:#e65400} /* サイトのオレンジ。薄い水色の地で 3.6:1（大きい文字の基準 3:1 以上） */ @media screen and (min-width:1024px){ #top_page.tp-top .tp-fv{padding-top:40px} #top_page.tp-top .tp-stats{margin-top:10px} #top_page.tp-top .tp-h1-static{font-size:60px;line-height:1.24;margin:6px 0 18px} } @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-h1-static{font-size:52px}} @media screen and (min-width:861px) and (max-width:1023px){#top_page.tp-top .tp-h1-static{font-size:40px}} @media screen and (min-width:768px) and (max-width:860px){#top_page.tp-top .tp-h1-static{font-size:36px}} @media screen and (max-width:767px){#top_page.tp-top .tp-h1-static{font-size:33px}} @media screen and (max-width:359px){#top_page.tp-top .tp-h1-static{font-size:29px}} /* v26 修正4（10/5 ユーザー「ボタンの横幅は？」）：見出しを小さくしたらボタン（582px）が見出し（483px）より約100px長くなっていた → 見出しの幅にそろえる */ @media screen and (min-width:1121px){#top_page.tp-top .tp-fv-cta{max-width:484px}#top_page.tp-top .tp-fv-reg{font-size:26px}} @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-fv-cta{max-width:420px}#top_page.tp-top .tp-fv-reg{font-size:23px}#top_page.tp-top .tp-fv-reg-note{font-size:13.5px;letter-spacing:0}} /* v26 修正5（10/5 ユーザー「左の文字と右の画像の距離は適切？」）：見出しを小さくしたら、文字の右端（617px）からひし形（830px）まで213px空いていた → 1121px以上は「文字の列＝ボタンの幅 484px／ひし形の列 520px」に固定し、列の間を詰めて左右の余白をそろえる（すき間 約135px） */ @media screen and (min-width:1240px){ #top_page.tp-top .tp-fv-in{grid-template-columns:484px 520px;column-gap:70px;justify-content:center} } @media screen and (min-width:1121px) and (max-width:1239px){ /* 固定幅だと1130pxで左の余白が21pxになった → 文字の列は伸び縮み、ひし形の列は480pxまで */ #top_page.tp-top .tp-fv-in{grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:40px} } /* v26 修正6（10/5 ユーザー「無料テキストのベネフィットを少し目立たせたい」）：白い角丸の帯に「登録特典」の札＋要点（無料テキスト・全18シリーズ）をオレンジの太字に */ #top_page.tp-top .tp-fv-reg-note{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;margin:14px 0 0;padding:8px 12px;border:1px solid #f3c7a6;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(230,84,0,.08);color:var(--navy2);letter-spacing:.02em} #top_page.tp-top .tp-fv-perk-tag{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:3px 10px 3px 8px;border-radius:999px;background:#e65400;color:#fff;font-size:12.5px;font-weight:bold;letter-spacing:.06em;line-height:1.4} #top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{width:15px;height:15px;color:#fff} #top_page.tp-top .tp-fv-perk-tx{min-width:0;font-size:14.5px;font-weight:bold;line-height:1.45;letter-spacing:0;text-align:left} /* 狭い幅では「をプレゼント」の前で折り返す */ @media screen and (min-width:1024px){#top_page.tp-top .tp-fv-reg-note{margin-top:10px;padding:7px 12px}} #top_page.tp-top .tp-fv-perk-tx b{color:#e65400} /* 「無料PDFテキスト」と「全18シリーズ」の間の小さなすき間（10/5 ユーザー：かっこを外す） */ @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-fv-perk-tx{font-size:13px}#top_page.tp-top .tp-fv-reg-note{gap:8px;padding:7px 10px}} @media screen and (min-width:768px) and (max-width:1023px){#top_page.tp-top .tp-fv-perk-tx{font-size:12.5px}#top_page.tp-top .tp-fv-reg-note{gap:6px;padding:7px 6px}#top_page.tp-top .tp-fv-perk-tag{font-size:11px;padding:2px 7px 2px 6px}} @media screen and (max-width:767px){#top_page.tp-top .tp-fv-perk-tx{font-size:13px}#top_page.tp-top .tp-fv-reg-note{gap:8px;padding:8px 8px}} @media screen and (max-width:374px){#top_page.tp-top .tp-fv-perk-tx{font-size:11px}#top_page.tp-top .tp-fv-reg-note{gap:6px;padding:8px 6px}#top_page.tp-top .tp-fv-perk-tag{font-size:10.5px;padding:2px 6px 2px 5px}#top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{width:13px;height:13px}} /* ================= v27（10/5 UI/UXレビュー高2）：登録の動機＝無料PDFの文字を大きく（PC 16／タブレット・スマホ 14／374px以下 13・札は13以上） ================= */ @media screen and (min-width:1121px){#top_page.tp-top .tp-fv-perk-tx{font-size:16px}#top_page.tp-top .tp-fv-reg-note{margin-top:9px;padding:10px 14px}#top_page.tp-top .tp-fv-perk-tag{font-size:13px}} @media screen and (min-width:1024px){#top_page.tp-top .tp-fv{padding-top:34px}} /* 帯が高くなったぶん上を詰めて、1440×900 で実績の注記まで1画面に収める（v26と同じ） */ @media screen and (min-width:1024px) and (max-width:1120px){#top_page.tp-top .tp-fv-perk-tx{font-size:14px}#top_page.tp-top .tp-fv-reg-note{padding:9px 10px}#top_page.tp-top .tp-fv-perk-tag{font-size:13px}} @media screen and (min-width:768px) and (max-width:1023px){#top_page.tp-top .tp-fv-perk-tx{font-size:14px}#top_page.tp-top .tp-fv-reg-note{gap:8px;padding:8px 10px}#top_page.tp-top .tp-fv-perk-tag{font-size:13px;padding:3px 9px 3px 7px}} @media screen and (max-width:767px){#top_page.tp-top .tp-fv-perk-tx{font-size:14px}#top_page.tp-top .tp-fv-perk-tag{font-size:13px}} @media screen and (max-width:374px){#top_page.tp-top .tp-fv-perk-tx{font-size:13px}#top_page.tp-top .tp-fv-perk-tag{font-size:13px;padding:2px 7px 2px 6px}#top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{width:14px;height:14px}} /* v27 修正（10/5 ユーザー「無料PDFテキスト（全18シリーズ）の方がいい」）：かっこ書きに戻す。かっこは詰め（palt）て幅を抑える */ #top_page.tp-top .tp-fv-perk-paren{font-feature-settings:"palt"} /* v27 修正（10/5 ユーザー「登録特典の文字をなくしてアイコンだけの方がすっきり」）：札はオレンジの丸にプレゼントの絵だけ（読み上げ用に aria-label="登録特典"） */ #top_page.tp-top .tp-fv-perk-tag{justify-content:center;box-sizing:border-box;width:30px;height:30px;padding:0;gap:0;border-radius:50%} #top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{display:block;width:17px;height:17px} #top_page.tp-top .tp-fv-reg-note{gap:10px} #top_page.tp-top .tp-fv-perk-tx b{margin-right:.25em} /* 10/5 ユーザー「を受け取れますの前に少しスペース」。「）」を詰めているので「を」が窮屈だった。2行に折れても行頭が字下げにならないよう前の語の後ろに付ける */ @media screen and (min-width:1121px){#top_page.tp-top .tp-fv-reg-note{padding:7px 12px}} /* 丸(30px)で帯が高くなり、1440×900 で実績の注記が5px はみ出した */ @media screen and (max-width:1023px){#top_page.tp-top .tp-fv-perk-tag{width:28px;height:28px}#top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{width:16px;height:16px}} @media screen and (max-width:374px){#top_page.tp-top .tp-fv-perk-tag{width:26px;height:26px}#top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{width:15px;height:15px}#top_page.tp-top .tp-fv-reg-note{gap:8px}} @media screen and (max-width:359px){#top_page.tp-top .tp-fv-cta-lead{font-size:13.5px;letter-spacing:.02em;white-space:nowrap}} /* 320幅で閉じの「／」だけ次の行に落ちていた */ /* ================= v28（10/5 GPT指摘＋ユーザー判断）：特典の帯の下・中央に「学び方・講座を見る ↓」。登録ボタンが主役のまま、小さな紺の文字リンクで ================= */ #top_page.tp-top .tp-fv-look{display:inline-flex;align-items:center;gap:7px;margin:10px auto 0;padding:2px 2px 1px;font-size:14px;font-weight:bold;line-height:1.5;letter-spacing:.04em;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(38,76,115,.45)} #top_page.tp-top .tp-fv-look{position:relative} #top_page.tp-top .tp-fv-look::before{content:"";position:absolute;inset:-10px -14px} /* 見た目は小さいまま、押せる範囲だけ広げる（文字の高さ25px→約45px） */ #top_page.tp-top .tp-fv-look:hover{border-bottom-color:transparent;opacity:.75} #top_page.tp-top .tp-fv-look-ar{width:7px;height:7px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)} #top_page.tp-top .tp-fv-look:focus-visible{outline:2px solid var(--navy);outline-offset:3px} @media screen and (max-width:767px){#top_page.tp-top .tp-fv-look{margin-top:12px;font-size:14px}} @media screen and (min-width:1121px){ /* リンクの分（約35px）を余白から戻して、1440×900 で実績の注記まで1画面に収める */ #top_page.tp-top .tp-fv{padding-top:28px} #top_page.tp-top .tp-h1-static{margin-bottom:15px} #top_page.tp-top .tp-fv-sub{margin-bottom:16px} #top_page.tp-top .tp-fv-look{margin-top:8px} #top_page.tp-top .tp-fv-in{row-gap:12px} #top_page.tp-top .tp-stats{margin-top:6px} } /* ================= v29（10/5 社内指摘「全体的に情報量が多い」＋GPT）：区画の統合と件数の削減 ================= */ /* ① 講座選び：学習マップは小さなリンク（ステップ図の区画はやめた） */ #top_page.tp-top .tp-maplink{margin:18px 0 0;text-align:center} #top_page.tp-top .tp-maplink a{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid #c9d8e8;border-radius:999px;background:#fff;color:var(--txt);font-size:14.5px;line-height:1.5;text-decoration:none} #top_page.tp-top .tp-maplink a:hover{background:#f4f9fd} #top_page.tp-top .tp-maplink-hagumi{flex:0 0 38px;width:38px;height:38px;border-radius:50%;border:2px solid var(--navy);background:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden} #top_page.tp-top .tp-maplink-hagumi img{width:28px;height:auto;border:0;max-width:none} #top_page.tp-top .tp-maplink-tx b{margin-left:.3em;color:var(--navy);text-decoration:underline;text-underline-offset:3px} #top_page.tp-top .tp-maplink-tx small{font-size:12.5px;color:var(--mute)} #top_page.tp-top .tp-maplink-ar{color:var(--navy);font-weight:bold} /* ② 選ばれる理由＋受講者の声（3件） */ #top_page.tp-top .tp-rvoice{margin:34px 0 0;padding:28px 0 0;border-top:1px solid #c9d8e8} #top_page.tp-top .tp-subh{margin:0 0 6px;padding:0;border:0;background:none;text-align:center;font-size:20px;line-height:1.4;font-weight:bold;color:var(--navy)} /* ③ 下の無料教材：細い帯（表紙3冊のプレビュー＋説明＋登録ボタン＋利用条件） */ #top_page.tp-top .tp-fb{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;padding:18px 26px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 8px rgba(20,40,60,.08)} #top_page.tp-top .tp-fb-covers{display:flex;align-items:flex-end;justify-content:center;height:96px;text-decoration:none} #top_page.tp-top .tp-fb-cover{position:relative;display:block;width:62px;aspect-ratio:183/230;border-radius:3px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.16),0 10px 18px -8px rgba(15,27,45,.45)} #top_page.tp-top .tp-fb-cover img{position:absolute;top:0;left:-45.9%;width:194.54%;height:100%;max-width:none;object-fit:contain;border:0} #top_page.tp-top .tp-fb-cover:nth-child(1){rotate:-8deg;translate:0 3px} #top_page.tp-top .tp-fb-cover:nth-child(2){margin-left:-22px;rotate:-2deg;translate:0 -6px;z-index:1} #top_page.tp-top .tp-fb-cover:nth-child(3){margin-left:-22px;rotate:5deg;translate:0 -1px;z-index:2} #top_page.tp-top .tp-fb-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;padding:0;border:0;background:none;font-size:20px;line-height:1.4;font-weight:bold;color:var(--navy)} #top_page.tp-top .tp-fb-desc{margin:0 0 4px;font-size:14.5px;line-height:1.7;color:var(--txt)} #top_page.tp-top .tp-fb-desc a{margin-left:.4em;color:var(--navy);font-weight:bold;white-space:nowrap} #top_page.tp-top .tp-fb-note{margin:0;font-size:12.5px;line-height:1.6;color:var(--mute)} #top_page.tp-top .tp-fb-btn .tp-btn{white-space:nowrap} @media screen and (max-width:1023px){ #top_page.tp-top .tp-fb{grid-template-columns:120px 1fr;gap:16px 20px} #top_page.tp-top .tp-fb-btn{grid-column:1 / -1;text-align:center} } @media screen and (max-width:767px){ #top_page.tp-top .tp-maplink a{font-size:13.5px;text-align:left} #top_page.tp-top .tp-rvoice{margin-top:26px;padding-top:22px} #top_page.tp-top .tp-subh{font-size:18px} #top_page.tp-top .tp-fb{grid-template-columns:1fr;padding:16px;gap:12px;text-align:center} #top_page.tp-top .tp-fb-covers{height:80px} #top_page.tp-top .tp-fb-cover{width:52px} #top_page.tp-top .tp-fb-h{justify-content:center;font-size:18px} #top_page.tp-top .tp-fb-desc,#top_page.tp-top .tp-fb-note{text-align:left} #top_page.tp-top .tp-fb-btn .tp-btn{display:block} } /* v29 追加（10/5 ユーザー）：受講者の声は見出し・説明を左寄せ（ほかの区画の見出しと同じ）。カードは文字だけ（講座名は小さく添える） */ #top_page.tp-top .tp-subh{text-align:left} #top_page.tp-top .tp-voice-who{display:flex;flex-direction:column;gap:2px} #top_page.tp-top .tp-voice-cname{font-size:12.5px;color:var(--navy);font-weight:bold} /* v29：特典の帯の右端の「中身を見る」は試して外した（10/5 ユーザー「リンクが増えると良くない」）。帯は v27 の形に戻る */ /* v29 追加（10/5 ユーザー）：講座選びの2枚はどちらも角を丸く（実力テスト側は v10 から角4pxだった）、ボタンも丸く。表をやめたので説明文を伸ばしてボタンの位置をそろえる */ #top_page.tp-top .tp-sup-c > .tp-sup-card{border-radius:20px} #top_page.tp-top .tp-sup-c .tp-sup-go{border-radius:999px} #top_page.tp-top .tp-sup > .tp-sup-card > b{margin:16px 18px 6px} #top_page.tp-top .tp-sup-desc{flex:1;margin:0 18px 16px;font-size:14.5px;line-height:1.7} /* v29 追加（10/5 ユーザー）：よく受講は横スクロールをやめ、6講座を2段×3列（スマホは1列） */ #top_page.tp-top .tp-pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none} #top_page.tp-top .tp-pop-grid > li{min-width:0} @media screen and (max-width:1023px){#top_page.tp-top .tp-pop-grid{gap:14px}} @media screen and (max-width:767px){ /* スマホは1列に6枚縦に並ぶと区画が約2,800pxになった → 横長の小さいカード（左に画像・右に講座名と説明2行）。講座名と画像がリンクなので「詳細を見る」は出さない */ #top_page.tp-top .tp-pop-grid{grid-template-columns:1fr;gap:10px} #top_page.tp-top .tp-pop-grid > li.tp-ccard{display:grid;grid-template-columns:116px 1fr;grid-template-rows:auto 1fr;column-gap:12px;row-gap:4px;align-items:start;padding:10px} #top_page.tp-top .tp-pop-grid > li.tp-ccard > .tp-thumb{grid-row:1 / span 2;margin:0;align-self:center} #top_page.tp-top .tp-pop-grid > li.tp-ccard > .tp-card-ttl{margin:0;font-size:15px;line-height:1.45} #top_page.tp-top .tp-pop-grid > li.tp-ccard > .tp-reco-get{margin:0;font-size:12.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:3.1em;flex:none;min-height:0;padding:0} #top_page.tp-top .tp-pop-grid > li.tp-ccard > .tp-card-ttl{padding:0} } /* v29 追加（10/6 ユーザー）：声の属性の左に人のアイコン */ #top_page.tp-top .tp-voice-person{display:flex;align-items:center;gap:10px;margin-top:auto} #top_page.tp-top .tp-voice-av{flex:0 0 40px;width:40px;height:40px;border:0 !important;border-radius:0;background:none;padding:0;box-shadow:none;object-fit:contain;max-width:none} /* 10/6 ユーザー「四角の枠線は野暮ったい」：テーマの画像指定で角丸が0になり、枠線と背景が四角く見えていた → 枠線・背景なしで絵だけ */ #top_page.tp-top .tp-voice-person .tp-voice-who{margin:0} /* v29 追加（10/6 ユーザー「特典の帯がボタンっぽく見える」）：白い箱・オレンジの枠線・影・塗りの丸アイコンをやめ、ボタンの下の添え書きに見せる（文字の大きさ・オレンジの太字はそのまま） */ #top_page.tp-top .tp-fv-reg-note{background:none;border:0;box-shadow:none;border-radius:0;padding:0;gap:6px} #top_page.tp-top .tp-fv-perk-tag{width:auto;height:auto;padding:0;background:none;border-radius:0;color:#e65400} #top_page.tp-top .tp-fv-perk-tag .tp-fv-gift{width:20px;height:20px;color:#e65400} @media screen and (min-width:1121px){#top_page.tp-top .tp-fv-reg-note{margin-top:14px}} #top_page.tp-top .tp-fv-look{margin-top:16px} /* 帯が低くなり、すぐ下の「学び方・講座を見る」と2行が詰まって見えたため */ /* v29：選ばれる理由の画像を高さ120pxに縮める案は試して戻した（10/6 ユーザー「前のサイズの方がいい」） */ /* v29 追加（10/6 ユーザー）：セミナー・オンデマンド講座の見出しは丸い札をやめ「セミナー」「オンデマンド講座」を太く／2つの箱の間を広く／オンデマンドのボタンをセミナーと同じ「詳細・お申し込み」に */ #top_page.tp-top .tp-kind-tx{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-weight:900;letter-spacing:.02em} #top_page.tp-top .tp-kind-tx small{font-family:inherit;font-weight:normal;letter-spacing:0} #top_page.tp-top .tp-kindbox + .tp-kindbox{margin-top:88px} @media screen and (max-width:767px){ #top_page.tp-top .tp-kindbox + .tp-kindbox{margin-top:56px} #top_page.tp-top .tp-od-grid > li.tp-odcard{grid-template-areas:"img badge" "img ttl" "desc desc" "go go"} } /* ================= v30（10/6 ユーザー）：無料テキストを3つの学び方のすぐ下へ（「無料で学べる」の帯） ================= */ #top_page.tp-top .tp-wfree{margin:28px 0 0;scroll-margin-top:80px} #top_page.tp-top .tp-wfree .tp-fb{background:#fff8f1;border-color:#f2d6c1;box-shadow:none} @media screen and (max-width:767px){#top_page.tp-top .tp-wfree{margin-top:20px}} /* v30（10/6 ユーザー「まずは手軽な講座診断を先に受けてほしい。今は実力テストの方が目立つ」）：強弱を入れ替え。 講座診断＝濃い青の枠＋影（塗りのボタンのまま）／実力テスト＝v10からの紺の塗りをやめ、白の箱＋細い枠＋白抜きのボタン */ #top_page.tp-top .tp-support-2 .tp-sup-a > .tp-sup-card{border:2px solid #2473a8;box-shadow:0 10px 26px rgba(36,115,168,.22)} #top_page.tp-top .tp-support-2 .tp-sup-c > .tp-sup-card{background:#fff;border:1px solid var(--line);box-shadow:none;color:var(--txt)} #top_page.tp-top .tp-sup-c .tp-sup-no{background:#6b7a8a} /* 札はオレンジだと目を引くので灰色寄りに */ #top_page.tp-top .tp-sup-c > .tp-sup-card > b{color:var(--navy2)} #top_page.tp-top .tp-sup-c .tp-sup-go{background:#fff;color:#173B5E;border:1.5px solid #173B5E} /* v30（10/6 ユーザー）：区画名を「eラーニング」にし、よく受講は小見出しに。学習マップのリンクは分野リンクの下・全講座ボタンの上へ */ #top_page.tp-top .tp-el .tp-lead{margin-bottom:28px} #top_page.tp-top .tp-pop-h{margin-bottom:12px} #top_page.tp-top .tp-maplink + .tp-more{margin-top:28px} @media screen and (max-width:767px){#top_page.tp-top .tp-el .tp-lead{margin-bottom:20px}#top_page.tp-top .tp-maplink + .tp-more{margin-top:20px}} /* ================= v31（10/6 ユーザー） ================= */ /* 学習マップはよく受講の6講座のすぐ下。少し空けて「分野から講座を探す」 */ #top_page.tp-top .tp-hwrap + .tp-maplink{margin:28px 0 0} @media screen and (max-width:767px){#top_page.tp-top .tp-hwrap + .tp-maplink{margin-top:20px}} /* 無料テキストの帯の上に小見出し「まずは無料で学ぶなら」（分野から講座を探す・よく受講されている講座と同じ見た目） */ #top_page.tp-top .tp-wfree{margin-top:44px} #top_page.tp-top .tp-wfree-h{margin:0 0 12px} @media screen and (max-width:767px){#top_page.tp-top .tp-wfree{margin-top:32px}#top_page.tp-top .tp-wfree-h{text-align:left}} /* 10/6 ユーザー：無料テキストの帯の「無料会員登録する」を最初の画面と同じ緑に（無料会員登録＝緑でそろえる） */ /* ================= v32（v31 UI/UX・技術レビューの反映。10/6 ユーザー「おすすめで」） ================= */ /* 緑＝無料会員登録のボタン専用（FV の .tp-fv-reg と .tp-btn-register）。白文字のコントラストを上げるため1段濃く：上端 #1e9443（3.9:1）・下端 #157a33（5.4:1） */ #top_page.tp-top .tp-fv-reg{background:linear-gradient(180deg,#1e9443,#157a33);box-shadow:0 4px 0 #0f5f26,0 8px 18px rgba(20,110,50,.25)} #top_page.tp-top .tp-fv-reg:hover{box-shadow:0 2px 0 #0f5f26,0 6px 14px rgba(20,110,50,.25)} #top_page.tp-top .tp-btn-register{background:linear-gradient(180deg,#1e9443,#157a33);border:0;border-radius:8px;box-shadow:0 3px 0 #0f5f26;color:#fff;font-size:19px;min-height:52px;padding:10px 28px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box} /* 19px太字＝大きい文字（基準3:1）。16pxのままだと上端3.9:1で基準4.5:1に届かない */ #top_page.tp-top .tp-btn-register:hover{filter:none;transform:translateY(2px);box-shadow:0 1px 0 #0f5f26;color:#fff} /* スマホ：お知らせバナーが出ている間は、テーマの「このページのTOPへ」を隠す（下の64px＋TOPへ53pxで画面の16%が覆われていた） */ @media screen and (max-width:767px){body.tp-sticky-on #page-top{display:none!important}} /* スマホ：よく受講の説明を3行まで（2行では6講座中4講座が「…」で切れていた） */ @media screen and (max-width:767px){#top_page.tp-top .tp-pop-grid > li.tp-ccard > .tp-reco-get{-webkit-line-clamp:3;max-height:4.7em}} /* スマホ：新着コラムのタグの行を出さない（コラム1件184〜211px） */ @media screen and (max-width:767px){#top_page.tp-top #new_column .tag{display:none}} /* 小見出し（h3）の大きさ・色をそろえる：受講者の声だけ20px・#264c73だった → 18px・navy2 */ #top_page.tp-top .tp-subh{font-size:18px;color:var(--navy2)} /* 実力テストの札：白文字 4.40:1 → 約5.2:1 */ #top_page.tp-top .tp-sup-c .tp-sup-no{background:#5f6e7d} /* 診断2枚：幅を本文と同じにして見出しと左端をそろえ、ボタンの高さをそろえる */ #top_page.tp-top .tp-support-2{max-width:none} #top_page.tp-top .tp-sup-go{box-sizing:border-box;min-height:52px;display:flex;align-items:center;justify-content:center;border-width:1.5px;border-style:solid} #top_page.tp-top .tp-sup-a .tp-sup-go{border-color:transparent} /* 押せる範囲を44px以上に */ #top_page.tp-top .tp-sem-grid .tp-btn{min-height:44px} /* v32 追加（10/6 ユーザー 7点） */ /* ① 3つの学び方：特徴は要点（札）だけを縦に。説明文と「迷った方は」をやめ、間隔も詰める（PC・タブレット。スマホは従来の丸い札） */ @media screen and (min-width:768px){ #top_page.tp-top .tp-way-feat{margin:24px 0 20px} #top_page.tp-top .tp-way-feat-h{margin-bottom:10px} #top_page.tp-top .tp-way-feat ul{gap:8px} #top_page.tp-top .tp-way-feat li{padding:0 0 0 26px;font-size:14.5px;line-height:1.5} #top_page.tp-top .tp-way-feat li::before{top:1px} #top_page.tp-top .tp-way-feat li b{margin:0} } /* ③ 無料テキストの帯：オレンジ寄りの背景・枠をやめ、ほかの区画と同じ薄い青灰に */ #top_page.tp-top .tp-wfree .tp-fb{background:#f5f8fb;border-color:#dfe6ee} /* v32 追加（10/6 ユーザー「セミナー・オンデマンドの『詳細・お申し込み』ボタンは省き、画像とタイトルそれぞれにリンク」。カード全体をリンクにする案は試して不採用＝「全体だと変な感じ」） 画像とタイトルは別々のリンク（よく受講のカードと同じ）。タイトルはマウスを乗せると下線 */ #top_page.tp-top .tp-card-link{color:var(--navy2);text-decoration:none} #top_page.tp-top .tp-card-link:hover{text-decoration:underline;text-underline-offset:3px} /* 一覧ボタンの下の添え書き */ #top_page.tp-top .tp-more-note{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--mute)} #top_page.tp-top .tp-grid li > a.tp-card-link{display:block;height:auto;background:none;border:0;border-radius:0;box-shadow:none} /* 前の版の「カード全体が a」の指定（.tp-grid li > a＝白い箱・枠・影）が、li 直下のタイトルのリンクに当たって箱が出たのを打ち消す */ #top_page.tp-top .tp-odcard > .tp-card-ttl{margin-top:0;margin-bottom:16px} @media screen and (min-width:768px){#top_page.tp-top .tp-odcard > .tp-card-ttl{font-size:17px}} /* セミナーのタイトル（17px）とそろえる */ @media screen and (max-width:767px){#top_page.tp-top .tp-odcard > .tp-card-ttl{margin-bottom:12px}} /* v32 追加（10/6 ユーザー）：立場別のご案内を2枚（設計初心者・中堅設計者）で戻す。v26〜v28 の明るい地の見た目（v6＋v11）を1か所にまとめて書き直し、2列に */ #top_page.tp-top .tp-roles{margin:32px 0 0} #top_page.tp-top .tp-roles-head{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:0;border:0;background:none;color:var(--navy2);font-size:16px;font-weight:bold;line-height:1.4} #top_page.tp-top .tp-roles-head::before,#top_page.tp-top .tp-roles-head::after{content:"";flex:1;height:1px;background:#e3c9a6} #top_page.tp-top .tp-roles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none} #top_page.tp-top .tp-roles-grid li{margin:0;padding:0} #top_page.tp-top .tp-roles-grid li::before{content:none} #top_page.tp-top .tp-roles-grid a{display:flex;align-items:center;gap:14px;height:100%;box-sizing:border-box;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy2);text-decoration:none;box-shadow:0 2px 8px rgba(20,40,60,.06);transition:transform .15s} #top_page.tp-top .tp-roles-grid a:hover{transform:translateY(-2px)} #top_page.tp-top .tp-role-ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#e8f1f9;color:var(--navy);display:flex;align-items:center;justify-content:center} #top_page.tp-top .tp-role-ic svg{width:26px;height:26px} #top_page.tp-top .tp-role-tx{display:flex;flex-direction:column;min-width:0} #top_page.tp-top .tp-role-tx b{font-size:15.5px;line-height:1.4} #top_page.tp-top .tp-role-tx small{font-size:12.5px;line-height:1.5;color:var(--mute)} #top_page.tp-top .tp-role-go{margin-left:auto;font-size:18px;font-weight:bold;color:var(--navy)} @media screen and (max-width:767px){#top_page.tp-top .tp-roles{margin-top:24px}#top_page.tp-top .tp-roles-grid{grid-template-columns:1fr;gap:10px}} /* v32 追加（10/6 ユーザー 3点） */ /* ① 小見出し「よく選ばれている講座」の後ろに選び方の注記 */ #top_page.tp-top .tp-pop-h-note{margin-left:.3em;font-size:13px;font-weight:normal;color:var(--mute)} /* ② 学習マップのリンクを目立たせる：小さな丸いリンク → 本文幅いっぱいの横長カード（ハグミー大きめ・紺の枠・右に紺の丸の矢印） */ #top_page.tp-top .tp-hwrap + .tp-maplink{margin-top:28px} #top_page.tp-top .tp-maplink a{display:flex;align-items:center;gap:16px;width:100%;box-sizing:border-box;padding:14px 18px 14px 14px;border:1.5px solid var(--navy);border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(20,40,60,.08);color:var(--txt);font-size:15px;text-align:left;text-decoration:none;transition:background .15s,transform .15s} #top_page.tp-top .tp-maplink a:hover{background:#f4f9fd;transform:translateY(-2px)} #top_page.tp-top .tp-maplink-hagumi{flex:0 0 64px;width:64px;height:64px} #top_page.tp-top .tp-maplink-hagumi img{width:46px} #top_page.tp-top .tp-maplink-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} #top_page.tp-top .tp-maplink-pre{font-size:14px;color:var(--mute)} #top_page.tp-top .tp-maplink-tx b{margin:0;font-size:19px;line-height:1.4;color:var(--navy2);text-decoration:none} #top_page.tp-top .tp-maplink a:hover .tp-maplink-tx b{text-decoration:underline;text-underline-offset:3px} #top_page.tp-top .tp-maplink-tx b small{margin-left:.2em;font-size:13px;font-weight:normal;color:var(--mute)} #top_page.tp-top .tp-maplink-ar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px} @media screen and (max-width:767px){ #top_page.tp-top .tp-maplink a{gap:12px;padding:12px 12px 12px 10px} #top_page.tp-top .tp-maplink-hagumi{flex-basis:52px;width:52px;height:52px} #top_page.tp-top .tp-maplink-hagumi img{width:38px} #top_page.tp-top .tp-maplink-pre{font-size:12.5px} #top_page.tp-top .tp-maplink-tx b{font-size:16px;white-space:normal} #top_page.tp-top .tp-maplink-tx b small{display:block;margin:0;font-size:12px} #top_page.tp-top .tp-maplink-ar{flex-basis:32px;width:32px;height:32px;font-size:15px} } /* ③ セミナー・オンデマンド：まとめの見出しをやめ、2つの箱の見出しを h2 に（見た目は今までの箱の見出しのまま。h2 に付くテーマ・共通の飾りを打ち消す） */ #top_page.tp-top h2.tp-kindhead{padding:0;border:0;background:none;text-align:left} #top_page.tp-top h2.tp-kindhead::before,#top_page.tp-top h2.tp-kindhead::after{content:none} /* ================= v34（10/7 ユーザー）：お知らせの区画を外す／呼びかけ1行／立場別に悩みの1行／セミナー前の誘導文／末尾に登録の帯／カードのホバー ================= */ /* ① お知らせの箱を外し、新リリース帯だけ。帯が出ていないとき（期間外・頻度の記録あり）は囲みごと消して余白を残さない */ #top_page.tp-top .tp-notice-bar{padding:26px 0 0;border:0;box-shadow:none;background:none} #top_page.tp-top .tp-notice-bar .tp-ann{margin-bottom:0} #top_page.tp-top .tp-notice-bar:not(:has(.tp-ann:not([hidden]))){display:none} #top_page.tp-top .tp-notice-bar:has(.tp-ann:not([hidden])) + .tp-ways{padding-top:72px} /* 帯が出ているときだけ、帯の下から見出しまでを詰める（帯なしのときは tp-ways の 96px のまま。隣接セレクタは display:none でも当たるので :has で条件を付ける） */ /* ② 呼びかけ1行（3つの学び方の見出しの上）：見出しより一回り小さい太字・紺 */ #top_page.tp-top .tp-call{margin:0 0 10px;font-size:19px;line-height:1.5;font-weight:bold;letter-spacing:.02em;color:var(--navy)} /* ③ 立場別のご案内：悩みの1行（2行に折れてもよい） */ #top_page.tp-top .tp-role-q{white-space:normal} /* ④ セミナー・オンデマンドの前の誘導文（小見出し＋2行） */ #top_page.tp-top .tp-other-lead{margin:0 0 32px} #top_page.tp-top .tp-other-lead-h{margin-bottom:8px} #top_page.tp-top .tp-other-lead-tx{margin:0;font-size:16px;line-height:1.85;color:var(--txt)} /* ⑤ 末尾の登録の帯：薄い青の区画に白い帯。上下はほかの区画（96px）より詰める */ #top_page.tp-top .tp-regend{padding:56px 0} #top_page.tp-top .tp-regend .tp-fb{background:#fff;border-color:#dfe6ee} /* ⑦ 3つの学び方のボタン：2行目に小さく「（全◯講座）」（比べるポイントの「講座数」の行をやめた分）。3枚とも2行なので高さはそろう */ #top_page.tp-top .tp-way > .tp-btn{flex-direction:column;gap:2px;padding-top:12px;padding-bottom:12px;line-height:1.3} /* 10/7 ユーザー「もう少し余白を」：2行になった分、上下を 8→12px（高さ 58→約67px） */ #top_page.tp-top .tp-btn-n{display:block;font-size:12.5px;font-weight:normal;letter-spacing:0;opacity:.9} /* ⑧ 「比べるポイント」「この学び方の特徴」の小見出しを省く（10/7 ユーザー）。表は項目名の列の色、特徴はチェックの札で区別がつく。見出しの分の余白を詰める */ #top_page.tp-top .tp-way-spec::before{content:none} #top_page.tp-top .tp-way-feat-h{display:none} @media screen and (min-width:768px){ #top_page.tp-top .tp-way-spec{margin-top:22px} #top_page.tp-top .tp-way-feat{margin:20px 0 28px} /* 特徴とボタンの間 20→28px（10/7 ユーザー「余白を」） */ } /* ⑥ 押せるカード（講座・セミナー・オンデマンド・診断）は、カードの中のリンク（画像・題名・ボタン）にマウスが乗ったときだけ少し浮く。 カード全体の :hover だと、押せない余白でも浮いて「押せる」の合図とずれる（10/7 GPT指摘）。カード全体をリンクにする案は10/6に不採用。触れる端末（hover:none）と「動きを減らす」設定では動かさない */ #top_page.tp-top .tp-ccard,#top_page.tp-top .tp-semcard,#top_page.tp-top .tp-odcard,#top_page.tp-top .tp-sup > .tp-sup-card{transition:transform .18s ease,box-shadow .18s ease} #top_page.tp-top .tp-ccard:has(a:hover),#top_page.tp-top .tp-semcard:has(a:hover),#top_page.tp-top .tp-odcard:has(a:hover){transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,40,60,.14)} #top_page.tp-top .tp-sup > .tp-sup-card:has(a:hover){transform:translateY(-3px)} @media (hover:none),(prefers-reduced-motion:reduce){ #top_page.tp-top .tp-ccard:has(a:hover),#top_page.tp-top .tp-semcard:has(a:hover),#top_page.tp-top .tp-odcard:has(a:hover),#top_page.tp-top .tp-sup > .tp-sup-card:has(a:hover),#top_page.tp-top .tp-roles-grid a:hover,#top_page.tp-top .tp-maplink a:hover{transform:none} } @media screen and (max-width:767px){ #top_page.tp-top .tp-notice-bar{padding-top:18px} #top_page.tp-top .tp-notice-bar:has(.tp-ann:not([hidden])) + .tp-ways{padding-top:48px} #top_page.tp-top .tp-call{font-size:16px;margin-bottom:8px} #top_page.tp-top .tp-other-lead{margin-bottom:24px} #top_page.tp-top .tp-other-lead-tx{font-size:15px} #top_page.tp-top .tp-pcbr{display:none} #top_page.tp-top .tp-regend{padding:40px 0} } /* ================= v35（10/9）：デザイン強化版の見た目の層（SKIN）。参考 refero.design「shadcn/ui」「Seline Analytics」 ================= 方針：①紙のような温かい白地（#fafaf9）に白いカード、区切りは1pxの罫線（色面の交互・方眼・影の多用をやめる） ②角丸は大きく（カード20px・ボタンはピル型）③色は紺（文字・線）＋オレンジ（強調1か所・札）＋緑（登録ボタンだけ） ④見出しは字間を詰めて静かに、英字の小ラベル（eyebrow）で区画を示す ⑤動きはホバーの浮き上がりと罫線の色の変化だけ */ #top_page.tp-top{--line:#e8e6e5;--tint:#fafaf9;--txt:#1c1917;--mute:#78716c;--ink:#14263a;--paper:#fff;--navy-soft:#eef3f8;--radius:20px;--shadow-hover:0 14px 32px -16px rgba(20,38,58,.35)} #top_page.tp-top{color:var(--txt);font-feature-settings:"palt" 0} /* 区画：全部を紙色に、罫線で区切る。色面・方眼・白丸の飾りはやめる */ #top_page.tp-top .tp-sec,#top_page.tp-top .tp-bg-blue,#top_page.tp-top .tp-bg-cream,#top_page.tp-top .tp-bg-grid,#top_page.tp-top .tp-regend{background:var(--tint);background-image:none} #top_page.tp-top .tp-sec{border-top:1px solid var(--line)} #top_page.tp-top .tp-el,#top_page.tp-top .tp-reasons,#top_page.tp-top .tp-regend{background:var(--paper)} #top_page.tp-top .tp-bg-blue::before,#top_page.tp-top .tp-bg-cream::before{content:none} /* 見出し：字間を詰めた静かな見出し＋英字の小ラベル */ #top_page.tp-top .tp-h2{font-size:34px;line-height:1.3;letter-spacing:-.025em;color:var(--ink);font-weight:700} #top_page.tp-top .tp-lead{color:var(--mute);margin-top:12px;margin-bottom:44px} #top_page.tp-top .tp-h2 + .tp-h2-bar + :not(.tp-lead),#top_page.tp-top .tp-ways .tp-h2 + .tp-h2-bar + .tp-ways-grid{margin-top:44px} #top_page.tp-top .tp-field-h,#top_page.tp-top .tp-subh,#top_page.tp-top .tp-roles-head{letter-spacing:-.01em;color:var(--ink)} #top_page.tp-top .tp-roles-head::before,#top_page.tp-top .tp-roles-head::after{background:var(--line)} /* 呼びかけ：罫線のピル型チップ */ #top_page.tp-top .tp-call{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 14px 7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14.5px;font-weight:600;letter-spacing:0;color:var(--ink)} #top_page.tp-top .tp-call::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--org)} /* ---- 最初の画面：白地に淡い紺のにじみ。方眼と歯車の線画はやめる ---- */ #top_page.tp-top .tp-fv{background:var(--paper) radial-gradient(900px 480px at 78% 30%,rgba(38,76,115,.10),transparent 70%) no-repeat;border-bottom:1px solid var(--line)} #top_page.tp-top .tp-kicker{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12.5px;letter-spacing:.06em;color:var(--navy)} #top_page.tp-top .tp-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--org)} #top_page.tp-top .tp-h1-static{color:var(--ink);letter-spacing:-.02em} #top_page.tp-top .tp-fv-sub{color:var(--mute);letter-spacing:0;font-weight:400} #top_page.tp-top .tp-fv-cta-lead{color:var(--ink);letter-spacing:.06em} #top_page.tp-top .tp-fv-reg{border-radius:999px;background:linear-gradient(180deg,#1f9a46,#157a33);box-shadow:0 12px 28px -12px rgba(21,122,51,.75),0 1px 0 rgba(255,255,255,.25) inset;letter-spacing:.08em} #top_page.tp-top .tp-fv-reg:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(21,122,51,.8)} #top_page.tp-top .tp-fv-look{border-bottom-color:transparent;color:var(--mute)} #top_page.tp-top .tp-fv-look:hover{color:var(--ink);opacity:1} #top_page.tp-top .tp-dia:not(.is-temp){border-radius:10%;border:3px solid var(--paper)} #top_page.tp-top .tp-deco-a{background:var(--navy-soft)} #top_page.tp-top .tp-stats ul{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 48px -32px rgba(20,38,58,.35)} #top_page.tp-top .tp-stats li + li{border-left-color:var(--line)} #top_page.tp-top .tp-stats img{opacity:.6} #top_page.tp-top .tp-stats small{color:var(--mute);font-weight:600;letter-spacing:.02em} #top_page.tp-top .tp-stats b{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:-.03em;color:var(--ink)} #top_page.tp-top .tp-stats b em{color:var(--mute);font-weight:500} #top_page.tp-top .tp-stats-note{color:#a8a29e} /* ---- カード：白・1pxの罫線・角丸20px・影なし。マウスで浮く ---- */ #top_page.tp-top .tp-way,#top_page.tp-top .tp-ccard,#top_page.tp-top .tp-semcard,#top_page.tp-top .tp-odcard,#top_page.tp-top .tp-sup > .tp-sup-card,#top_page.tp-top .tp-reason-grid li,#top_page.tp-top .tp-voice-grid li,#top_page.tp-top .tp-fb,#top_page.tp-top .tp-maplink a,#top_page.tp-top .tp-roles-grid a,#top_page.tp-top .tp-kindbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none} #top_page.tp-top .tp-way-el,#top_page.tp-top .tp-support-2 .tp-sup-a > .tp-sup-card,#top_page.tp-top .tp-maplink a{border:1px solid var(--line);box-shadow:none} #top_page.tp-top .tp-way{border-top:1px solid var(--line);background:var(--paper)} #top_page.tp-top .tp-way-el{background:var(--paper);border-color:#c9d6e4} #top_page.tp-top .tp-way-name{color:var(--ink);letter-spacing:-.01em} #top_page.tp-top .tp-way-goal{background:var(--tint);border:1px solid var(--line);color:var(--ink)} #top_page.tp-top .tp-way-row .k{background:var(--tint);color:var(--mute)} #top_page.tp-top .tp-way .tp-way-row{border-bottom-color:var(--line)} #top_page.tp-top .tp-way-spec{border-top-color:var(--line)} #top_page.tp-top .tp-way-feat li::before{background-color:var(--ink)} #top_page.tp-top .tp-way-feat li b{color:var(--ink)} #top_page.tp-top .tp-ccard:has(a:hover),#top_page.tp-top .tp-semcard:has(a:hover),#top_page.tp-top .tp-odcard:has(a:hover),#top_page.tp-top .tp-sup > .tp-sup-card:has(a:hover),#top_page.tp-top .tp-roles-grid a:hover,#top_page.tp-top .tp-maplink a:hover{border-color:#c9d0d8;box-shadow:var(--shadow-hover);transform:translateY(-3px);background:var(--paper)} #top_page.tp-top .tp-ccard .tp-thumb,#top_page.tp-top .tp-semcard .tp-thumb,#top_page.tp-top .tp-od-grid .tp-thumb{border-radius:12px;border-color:var(--line)} #top_page.tp-top .tp-card-ttl,#top_page.tp-top .tp-card-link,#top_page.tp-top .tp-sem-title{color:var(--ink)} #top_page.tp-top .tp-reco-get{color:var(--mute)} #top_page.tp-top .tp-sem-date .md{color:var(--ink);font-family:"Inter","Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em} #top_page.tp-top .tp-kindbox{border-top:1px solid var(--line);border-radius:24px;padding:34px 34px 36px} #top_page.tp-top .tp-kind-tx{color:var(--ink)} #top_page.tp-top .tp-sem-note-tag{background:var(--ink)} #top_page.tp-top .tp-reason-grid figure{background:var(--tint)} #top_page.tp-top .tp-reason-grid h3{color:var(--ink)} #top_page.tp-top .tp-voice-grid li{border-top:1px solid var(--line);padding:24px 24px 20px} #top_page.tp-top .tp-voice-grid li::before{content:"\201C";position:absolute;left:auto;right:18px;top:10px;font-size:48px;line-height:1;color:var(--line);font-family:Georgia,serif} #top_page.tp-top .tp-voice-cname{color:var(--navy)} #top_page.tp-top .tp-rvoice{border-top-color:var(--line)} #top_page.tp-top .tp-wfree .tp-fb,#top_page.tp-top .tp-regend .tp-fb{background:var(--paper);border-color:var(--line)} #top_page.tp-top .tp-fb-h{color:var(--ink)} #top_page.tp-top .tp-sup > .tp-sup-card{border-radius:var(--radius)} #top_page.tp-top .tp-support-2 .tp-sup-a > .tp-sup-card{border:1px solid #c9d6e4} #top_page.tp-top .tp-sup-a > .tp-sup-card{--c:var(--navy);--bg:var(--navy-soft)} #top_page.tp-top .tp-sup-vis-img{background:var(--tint)} #top_page.tp-top .tp-sup-no{border-radius:999px;background:var(--ink);font-weight:600} #top_page.tp-top .tp-sup-c .tp-sup-no{background:#a8a29e} #top_page.tp-top .tp-sup > .tp-sup-card > b{color:var(--ink)} #top_page.tp-top .tp-role-ic{background:var(--tint);border:1px solid var(--line);color:var(--navy)} #top_page.tp-top .tp-role-tx b{color:var(--ink)} #top_page.tp-top .tp-maplink-hagumi{border-color:var(--line)} #top_page.tp-top .tp-maplink-ar{background:var(--ink)} #top_page.tp-top .tp-maplink-tx b{color:var(--ink)} /* ---- ボタン：ピル型。塗りは紺の墨色、登録だけ緑。白抜きは罫線 ---- */ #top_page.tp-top .tp-btn{border-radius:999px;padding:12px 26px;font-weight:600;letter-spacing:.02em;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s} #top_page.tp-top .tp-btn-primary,#top_page.tp-top .tp-btn-navy{background:var(--ink);border-color:var(--ink);color:#fff} #top_page.tp-top .tp-btn-primary:hover,#top_page.tp-top .tp-btn-navy:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px)} #top_page.tp-top .tp-btn-secondary{background:var(--paper);border-color:var(--line);color:var(--ink)} #top_page.tp-top .tp-btn-secondary:hover{background:var(--ink);border-color:var(--ink);color:#fff} #top_page.tp-top .tp-btn-register{border-radius:999px;background:linear-gradient(180deg,#1f9a46,#157a33);box-shadow:0 10px 24px -12px rgba(21,122,51,.8)} #top_page.tp-top .tp-btn-register:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(21,122,51,.85)} #top_page.tp-top .tp-way > .tp-btn{border-radius:999px} #top_page.tp-top .tp-btn-n{opacity:.75} #top_page.tp-top .tp-sup-go{border-radius:999px} #top_page.tp-top .tp-sup-a .tp-sup-go{background:var(--ink);border-color:var(--ink)} #top_page.tp-top .tp-sup-c .tp-sup-go{border-color:var(--line);color:var(--ink)} #top_page.tp-top .tp-sup-c .tp-sup-go:hover,#top_page.tp-top a.tp-sup-go:hover{filter:none;background:var(--ink);color:#fff;border-color:var(--ink)} #top_page.tp-top .tp-textlink{color:var(--ink);text-decoration-color:var(--line);text-underline-offset:4px} #top_page.tp-top .tp-textlink:hover{text-decoration-color:var(--ink)} #top_page.tp-top .tp-more-note{color:#a8a29e} /* 札：ピル型 */ #top_page.tp-top .tp-badge{border-radius:999px;font-weight:600;padding:3px 10px} #top_page.tp-top .tp-badge.is-online{background:var(--navy-soft);border-color:#d3deeb;color:var(--navy)} #top_page.tp-top .tp-badge.is-early{background:#fff4ec;border-color:#f3c7a6;color:#c24700} /* 誘導文 */ #top_page.tp-top .tp-other-lead-h{color:var(--ink)} #top_page.tp-top .tp-other-lead-tx{color:var(--mute)} /* 新着：罫線を細く */ #top_page.tp-top .tp-news-col ol,#top_page.tp-top .tp-news-col li.post-list{border-color:var(--line)} #top_page.tp-top .tp-news-col .tp-h2{font-size:24px} #top_page.tp-top .tp-news-col .title a{color:var(--ink)} /* 右下バナー：罫線＋大きい角丸 */ #top_page.tp-top .tp-sticky{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 48px -24px rgba(20,38,58,.45)} #top_page.tp-top .tp-sticky-tag{border-radius:999px} #top_page.tp-top .tp-sticky-head{color:var(--ink)} #top_page.tp-top .tp-sticky-btn{border-radius:999px} @media screen and (min-width:1121px){#top_page.tp-top .tp-fv{padding-top:22px}#top_page.tp-top .tp-kicker{margin-bottom:6px}} /* キッカーをピル型にして約8px高くなった分を詰め、1440×900 で実績の注記まで1画面に収める */ @media screen and (max-width:767px){ #top_page.tp-top .tp-h2{font-size:26px} #top_page.tp-top .tp-call{font-size:13.5px} #top_page.tp-top .tp-kindbox{padding:22px 16px 24px;border-radius:20px} #top_page.tp-top .tp-sticky{border-radius:0;border-left:0;border-right:0} #top_page.tp-top .tp-lead{margin-bottom:28px} #top_page.tp-top .tp-h2 + .tp-h2-bar + :not(.tp-lead),#top_page.tp-top .tp-ways .tp-h2 + .tp-h2-bar + .tp-ways-grid{margin-top:28px} } /* ================= v36（10/9 ユーザー「ぱっと見て1秒で分かる」）：英字ラベルなし／3つの学び方は写真／診断は簡易・詳細／選ばれる理由は実スライド ================= */ /* 3つの学び方の画像（v37 で整理：v36 で3回に分けて重ねていた指定を1つに）。 3枚とも同じ寸法・背景・余白の枠に、切らずに収める（contain）。v37（GPT修正指示1）：枠 3:2 → 16:9、内側の余白 14 → 10px、枠の上下の余白も詰めてカードを低く。 セミナーの写真だけ角丸6px＋薄い影（10/9 ユーザー「写真と分かる感じで」「白い枠はいらない」）。PCの枠の2枚は角を丸めない */ #top_page.tp-top .tp-way{padding-top:16px} #top_page.tp-top .tp-way-vis{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;aspect-ratio:16/9;margin:0 0 12px;padding:10px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--tint)} #top_page.tp-top .tp-way-vis img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;padding:0;border:0;border-radius:0} #top_page.tp-top .tp-way-vis-sem img{border-radius:6px;box-shadow:0 1px 2px rgba(20,38,58,.12),0 6px 14px -4px rgba(20,38,58,.28)} @media screen and (min-width:768px) and (max-width:1023px){#top_page.tp-top .tp-way-vis{padding:6px}} /* v37：3列で枠が幅177pxしかない幅。余白10pxだと画像の高さ78pxで小さすぎるので、この幅だけ6pxに（教材・講師が判別できることを優先） */ /* 10/9 ユーザー「告知の表示をリセットして新リリースの告知を出すと表示が変」： ①帯の外側が背景なし＝ページの白が細い区画に見えていた → 下の区画（3つの学び方）と同じ紙色にし、間の罫線を消して1つの区画に見せる ②帯が v34 の見た目（太いオレンジの左線・角4pxの札・下線の文字リンク）のままだった → 白いピル型のカード＋罫線、札は淡いオレンジのピル、「詳しく見る」は白抜きのピル型ボタン */ #top_page.tp-top .tp-notice-bar{background:var(--tint);padding-top:28px} #top_page.tp-top .tp-notice-bar:has(.tp-ann:not([hidden])) + .tp-ways{border-top:0} /* 同日「v34 のようにオレンジベースで目立つように」「形状などは変えないで」：形（ピル型のカード・ピル型の札とボタン）はそのまま、色だけ v34 のオレンジ（淡いオレンジ地・オレンジの罫線・オレンジ塗りの札・オレンジの文字） */ #top_page.tp-top .tp-ann{gap:14px;padding:8px 8px 8px 10px;border:1px solid #f0c9a8;border-left:1px solid #f0c9a8;border-radius:999px;background:#fff6ee;box-shadow:0 2px 6px rgba(204,74,0,.08)} #top_page.tp-top .tp-ann-tag{padding:4px 12px;border:1px solid var(--org);border-radius:999px;background:var(--org);color:#fff;font-size:12.5px;font-weight:700} #top_page.tp-top .tp-ann-text{color:#cc4a00;font-size:15px;font-weight:700} #top_page.tp-top .tp-ann-link{padding:7px 16px;border:1px solid #f0c9a8;border-radius:999px;background:#fff;color:#cc4a00;font-size:13px;font-weight:700;text-decoration:none;transition:background .15s,color .15s,border-color .15s} #top_page.tp-top .tp-ann-link:hover{background:#cc4a00;border-color:#cc4a00;color:#fff;text-decoration:none} @media screen and (max-width:767px){ #top_page.tp-top .tp-notice-bar{padding-top:20px} #top_page.tp-top .tp-ann{border-radius:16px;padding:10px 12px 10px 14px;gap:6px 10px} #top_page.tp-top .tp-ann-text{font-size:14px} #top_page.tp-top .tp-ann-tag{order:0} #top_page.tp-top .tp-ann-link{order:1;margin-left:auto;padding:4px 12px;font-size:12.5px} /* スマホ：札と「詳しく見る」を1行目に並べ、本文を2行目に（帯の高さを詰める） */ #top_page.tp-top .tp-ann-text{order:2} } /* 10/9 ユーザー「ファーストビューの背景を v34 の背景に。ただし左上と右下の歯車の絵は省く」： v34（v7 追加）の背景＝青〜青緑のグラデーション＋方眼＋右上のオレンジの淡い光。歯車の製図（data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22 opacity=%220.2%22 fill=%22none%22 stroke=%22%23264c73%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M514.0 300.0 L545.8 309.9 L544.5 327.5 L511.5 332.5 L508.6 347.6 L537.4 364.4 L532.2 381.2 L499.0 378.8 L492.8 392.9 L517.1 415.6 L508.3 430.9 L476.5 421.1 L467.3 433.4 L486.0 461.0 L473.9 473.9 L445.1 457.3 L433.4 467.3 L445.5 498.4 L430.9 508.3 L406.4 485.6 L392.9 492.8 L397.7 525.8 L381.2 532.2 L362.5 504.7 L347.6 508.6 L345.0 541.8 L327.5 544.5 L315.4 513.4 L300.0 514.0 L290.1 545.8 L272.5 544.5 L267.5 511.5 L252.4 508.6 L235.6 537.4 L218.8 532.2 L221.2 499.0 L207.1 492.8 L184.4 517.1 L169.1 508.3 L178.9 476.5 L166.6 467.3 L139.0 486.0 L126.1 473.9 L142.7 445.1 L132.7 433.4 L101.6 445.5 L91.7 430.9 L114.4 406.4 L107.2 392.9 L74.2 397.7 L67.8 381.2 L95.3 362.5 L91.4 347.6 L58.2 345.0 L55.5 327.5 L86.6 315.4 L86.0 300.0 L54.2 290.1 L55.5 272.5 L88.5 267.5 L91.4 252.4 L62.6 235.6 L67.8 218.8 L101.0 221.2 L107.2 207.1 L82.9 184.4 L91.7 169.1 L123.5 178.9 L132.7 166.6 L114.0 139.0 L126.1 126.1 L154.9 142.7 L166.6 132.7 L154.5 101.6 L169.1 91.7 L193.6 114.4 L207.1 107.2 L202.3 74.2 L218.8 67.8 L237.5 95.3 L252.4 91.4 L255.0 58.2 L272.5 55.5 L284.6 86.6 L300.0 86.0 L309.9 54.2 L327.5 55.5 L332.5 88.5 L347.6 91.4 L364.4 62.6 L381.2 67.8 L378.8 101.0 L392.9 107.2 L415.6 82.9 L430.9 91.7 L421.1 123.5 L433.4 132.7 L461.0 114.0 L473.9 126.1 L457.3 154.9 L467.3 166.6 L498.4 154.5 L508.3 169.1 L485.6 193.6 L492.8 207.1 L525.8 202.3 L532.2 218.8 L504.7 237.5 L508.6 252.4 L541.8 255.0 L544.5 272.5 L513.4 284.6 Z%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%22196%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%22118%22 stroke-dasharray=%2214 5 3 5%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%2262%22 stroke-width=%222.2%22/%3E%3Ccircle cx=%22300%22 cy=%22300%22 r=%2238%22/%3E%3Cpath d=%22M291 263v-12h18v12%22 stroke-width=%222%22/%3E%3Ccircle cx=%22402.2%22 cy=%22359.0%22 r=%2216%22/%3E%3Ccircle cx=%22300.0%22 cy=%22418.0%22 r=%2216%22/%3E%3Ccircle cx=%22197.8%22 cy=%22359.0%22 r=%2216%22/%3E%3Ccircle cx=%22197.8%22 cy=%22241.0%22 r=%2216%22/%3E%3Ccircle cx=%22300.0%22 cy=%22182.0%22 r=%2216%22/%3E%3Ccircle cx=%22402.2%22 cy=%22241.0%22 r=%2216%22/%3E%3Cpath d=%22M20 300H580M300 20V580%22 stroke-dasharray=%2226 6 4 6%22 stroke-width=%221.1%22/%3E%3Cg stroke=%22%23cc4a00%22 stroke-width=%221.4%22%3E%3Cpath d=%22M54 562H546%22/%3E%3Cpath d=%22M54 500V572M546 500V572%22 stroke-width=%221%22/%3E%3Cpath d=%22M54 562l14 -5v10zM546 562l-14 -5v10z%22 fill=%22%23cc4a00%22/%3E%3Cpath d=%22M300 300L439 161%22/%3E%3Cpath d=%22M439 161l-13 6 7 7z%22 fill=%22%23cc4a00%22/%3E%3C/g%3E%3C/svg%3E の2枚）だけ外した。v35 の白地のにじみと下の罫線は使わない */ #top_page.tp-top .tp-fv{background-color:#dcebf9; background-image:radial-gradient(circle at 92% 0%,rgba(237,89,1,.16) 0,rgba(237,89,1,0) 34%),linear-gradient(rgba(38,76,115,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(38,76,115,.07) 1px,transparent 1px),linear-gradient(115deg,#bcd9f5 0%,#e8f3fd 44%,#c8ebef 100%); background-repeat:no-repeat,repeat,repeat,no-repeat;background-position:0 0,0 0,0 0,0 0;background-size:auto,28px 28px,28px 28px,auto;border-bottom:0} /* 講座選び：画像上の札＝「講座診断」「実力テスト」（v37）、画像の下に「まずは手軽に｜約5分」「もっと詳しく｜22問・15〜20分」。画像上の時間の札（tp-sup-time）は v37 で外した */ #top_page.tp-top .tp-sup-no{left:12px;top:12px;padding:5px 14px;font-size:15px;letter-spacing:.02em} #top_page.tp-top .tp-sup-c .tp-sup-no{background:var(--navy)} #top_page.tp-top .tp-sup-hook{display:block;margin:16px 20px 4px;font-size:14px;font-weight:700;letter-spacing:.04em;color:#c24700} #top_page.tp-top .tp-sup-hook small{font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:0} #top_page.tp-top .tp-support-grid b{margin-top:0} #top_page.tp-top .tp-sup-vis-img{aspect-ratio:16/9} #top_page.tp-top .tp-sup-c .tp-sup-img{object-fit:cover;object-position:50% 50%;transform:none} /* 10/9 ユーザー提供の画像（16:9・モニターに実画面）に差し替え */ /* 選ばれる理由の画像（v37 で整理・GPT修正指示3）：4枚とも枠は 16:10・同じ淡い地の色・下に1pxの罫線・見出しとの間隔も同じ。 ①設計者の写真・④学習風景の写真＝cover（元画像も16:10なのでほぼ切れない）。②教材の図・③テストの画面＝contain＋内側の余白10px（図とPCの枠を切らない） */ #top_page.tp-top .tp-reason-grid figure{aspect-ratio:16/10;margin:0;background:var(--tint);border-bottom:1px solid var(--line)} #top_page.tp-top .tp-reason-grid figure img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;box-sizing:border-box;padding:0} #top_page.tp-top .tp-reason-grid li:nth-child(1) figure img{object-position:40% 50%} /* 設計者の顔とCAD画面・図面が中央に来る位置 */ #top_page.tp-top .tp-reason-grid li:nth-child(4) figure img{object-position:30% 50%} /* ノートPCを中心に（冊子も入る） */ #top_page.tp-top .tp-reason-grid li:nth-child(2) figure img,#top_page.tp-top .tp-reason-grid li:nth-child(3) figure img{object-fit:contain;padding:10px} @media screen and (max-width:767px){ #top_page.tp-top .tp-reason-grid li{grid-template-columns:132px 1fr} #top_page.tp-top .tp-reason-grid figure{aspect-ratio:auto;height:100%;min-height:84px;border-bottom:0;border-right:1px solid var(--line)} #top_page.tp-top .tp-reason-grid li:nth-child(2) figure img,#top_page.tp-top .tp-reason-grid li:nth-child(3) figure img{padding:6px} /* 幅132pxでは余白10pxだと図・画面が小さくなりすぎる */ } @media screen and (max-width:359px){ #top_page.tp-top .tp-reason-grid li{grid-template-columns:112px 1fr} /* v37：320幅で見出しが「図と／アニメーションで／理解」と細かく折れていたので、文章の列を広げる */ #top_page.tp-top .tp-fv-reg{letter-spacing:.01em;padding-left:12px;padding-right:34px} /* v37：ボタン文言「無料テキストを受け取る」が長くなり、320幅で右端の矢印（position:absolute）に文字が重なっていた。文字は小さくせず、左の余白を詰めて文字を左へ寄せる */ } /* ================= v38（10/10 社内連絡 → 同日ユーザー「方眼なし・画像の枠なし・アイコンなしで行く」で確定） ================= */ /* ①最初の画面：青〜青緑のグラデーションと右上のオレンジの光は残し、方眼（28pxの線2本）だけ外す */ #top_page.tp-top .tp-fv{background-image:radial-gradient(circle at 92% 0%,rgba(237,89,1,.16) 0,rgba(237,89,1,0) 34%),linear-gradient(115deg,#bcd9f5 0%,#e8f3fd 44%,#c8ebef 100%); background-repeat:no-repeat,no-repeat;background-position:0 0,0 0;background-size:auto,auto} /* ②3つの学び方：画像の後ろの枠（淡い地・罫線・内側の余白）を外す。画像の大きさは v37 と同じにするため、箱を 16:9 → 21:10 に（3枚とも高さで決まる画像。1440幅で v37＝高さ122px／2:1だと128pxで大きくなった → 21:10 で121px） */ #top_page.tp-top .tp-way-vis{aspect-ratio:21/10;padding:0;border:0;border-radius:0;background:none} @media screen and (min-width:768px) and (max-width:1023px){#top_page.tp-top .tp-way-vis{padding:0}} /* ③セミナー・オンデマンド講座の見出しの丸いアイコンは HTML（tp-kind-ic）ごと外した（OTHER）。文字の位置は左端のまま */ /* ④10/11 ユーザー「FVの画像をクリックしてドラッグすると画像がついてきて不自然」：ひし形の写真はドラッグできないように（img の draggable="false" と対。右クリック保存は妨げない） */ #top_page.tp-top .tp-fv-collage img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none} /* ⑤10/11 ユーザー「テストサイトで『学び方・講座を見る ↓』が瞬時に切り替わる（モックと違う）」：モックはモック専用JS（MOCK_ANCHOR_JS）でなめらかに動かしていたが本番には入れていない。 CSS の scroll-behavior でページ内リンクをなめらかに（このCSSはトップだけで読むので他ページに影響しない。「視差効果を減らす」設定の人には適用しない） */ @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} @media screen and (max-width:767px){.tp-mock-tag{display:none}} /* 新着情報・新着コラムは既存ショートコードが5件出すので、4件目以降を隠す（v29 で3件に） */ #top_page.tp-top .tp-news-col .recent-post-simple > li:nth-child(n+4),#top_page.tp-top .tp-news-col .recent-column > li:nth-child(n+4){display:none} /* セミナーが0件のとき */ #top_page.tp-top .tp-sem-empty{margin:0 0 16px;padding:18px;border:1px dashed #c9d8e8;border-radius:8px;background:#fff;text-align:center;color:#5c6773} /* 告知の帯：種別「緊急」だけ赤（ほかはオレンジ。固定ページの『トップページ告知設定』） */ #top_page.tp-top .tp-ann-urgent{border-color:#f0b4b4;background:#fff3f3}#top_page.tp-top .tp-ann-urgent .tp-ann-tag{background:#c62828;border-color:#c62828}#top_page.tp-top .tp-ann-urgent .tp-ann-text,#top_page.tp-top .tp-ann-urgent .tp-ann-link{color:#b71c1c}#top_page.tp-top .tp-ann-urgent .tp-ann-link{border-color:#f0b4b4}#top_page.tp-top .tp-ann-urgent .tp-ann-link:hover{background:#b71c1c;border-color:#b71c1c;color:#fff} /* ---- 学習マップのポップアップ（一覧ページ style_elearning.css の .elx-map〜 を 2026-10-11 に移植。画像は images/elearning/map/ を共用） ---- */ html.elx-map-open{overflow:hidden} .elx-map{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;display:none;overflow-x:hidden;overflow-y:auto;background:rgba(16,28,44,.8);color:#fff;font-family:inherit;line-height:1.5;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain;touch-action:pan-y pinch-zoom} .elx-map.is-on{display:flex} .elx-map-in{--mw:min(1200px,calc(100vw - 168px),calc((100vh - 180px) * 16 / 9));position:relative;width:var(--mw);margin:max(0px,calc((100vh - var(--mw) * 9 / 16 - 230px) / 2)) auto 0;padding:8px 0 16px} @supports (height:100dvh){ .elx-map-in{--mw:min(1200px,calc(100vw - 168px),calc((100dvh - 180px) * 16 / 9));margin-top:max(0px,calc((100dvh - var(--mw) * 9 / 16 - 230px) / 2))} } .elx-map-hd{display:flex;align-items:center;gap:14px;height:52px} .elx-map-ttl{font-size:16px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .elx-map-cnt{margin-left:auto;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums} .elx-map-cnt b{font-size:20px} .elx-map button{margin:0;padding:0;font:inherit;line-height:1;cursor:pointer;text-shadow:none} .elx-map .elx-map-x{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;font-size:0} .elx-map-x::before,.elx-map-x::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:1px;background:currentColor;transform:rotate(45deg)} .elx-map-x::after{transform:rotate(-45deg)} .elx-map .elx-map-x,.elx-map .elx-map-x:hover,.elx-map .elx-map-x:active,.elx-map .elx-map-x:focus{border:1px solid rgba(255,255,255,.6);background:none;color:#fff;box-shadow:none} .elx-map-stage{position:relative} .elx-map-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-x pinch-zoom;border-radius:6px;background:#f6f5f0;outline:0} .elx-map-track::-webkit-scrollbar{display:none} .elx-map-sl{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center} .elx-map-sl img{display:block;width:100%;height:auto;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;opacity:0;transition:opacity .2s;-webkit-user-drag:none;-webkit-user-select:none;user-select:none} .elx-map-sl img.is-ok{opacity:1} .elx-map-err{margin:0;padding:20px;font-size:14px;color:#333;text-align:center} .elx-map-err a{color:#264c73;font-weight:bold;text-decoration:underline} .elx-map .elx-map-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:flex;align-items:center;justify-content:center} .elx-map .elx-map-nav,.elx-map .elx-map-nav:hover,.elx-map .elx-map-nav:active,.elx-map .elx-map-nav:focus{border:0;background:rgba(255,255,255,.16);color:#fff;box-shadow:none} .elx-map .elx-map-prev{left:-68px} .elx-map .elx-map-next{right:-68px} .elx-map-nav::before{content:"";width:12px;height:12px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateX(3px) rotate(45deg)} .elx-map-next::before{transform:translateX(-3px) rotate(-135deg)} @media (hover:hover){ .elx-map .elx-map-x:hover,.elx-map .elx-map-nav:hover{background:#fff;color:#1f3a5a} } .elx-map .elx-map-nav[disabled],.elx-map .elx-map-nav[disabled]:hover{background:rgba(255,255,255,.16);color:#fff;opacity:.3;cursor:default} .elx-map button:focus-visible{outline:3px solid #ffd200;outline-offset:2px} .elx-map-ft{padding-top:12px} .elx-map-prog{height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden} .elx-map-prog i{display:block;width:0;height:100%;background:#ed5901;transition:width .2s} .elx-map-hint{margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.75);text-align:center} .elx-map-hint-sp{display:none} .elx-map-acts{display:none;margin:12px 0 0} .elx-map-ft.has-acts .elx-map-acts{display:block} .elx-map-ft.has-acts .elx-map-hint-pc{display:none} .elx-map-links-hd{margin:0 0 8px;font-size:14px;font-weight:bold;color:#fff} .elx-map-links-hd small{margin-left:4px;font-size:12px;font-weight:normal;color:rgba(255,255,255,.75)} .elx-map .elx-map-links{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.4} .elx-map .elx-map-links li{margin:0;padding:0;list-style:none} .elx-map .elx-map-links a,.elx-map .elx-map-links a:visited{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 6px;box-sizing:border-box;border:0;border-radius:6px;background:#fff;color:#264c73;font-weight:bold;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.25)} .elx-map .elx-map-links a:hover{background:#fff5ec;color:#ed5901} .elx-map-links a span{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 4px;box-sizing:border-box;border-radius:4px;background:#264c73;color:#fff;font-size:12px} .elx-map-links a::after{content:"";width:7px;height:7px;margin-left:2px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)} .elx-map a:focus-visible{outline:3px solid #ffd200;outline-offset:2px} .elx-map .elx-map-tolist,.elx-map .elx-map-tolist:active,.elx-map .elx-map-tolist:focus{display:flex;align-items:center;justify-content:center;gap:10px;min-width:260px;height:52px;margin:4px auto 0;padding:0 32px;border:0;border-radius:6px;background:#ed5901;color:#fff;font-size:17px;font-weight:bold;box-shadow:none} .elx-map .elx-map-tolist:hover{background:#c84b00;color:#fff} .elx-map-tolist::after{content:"";width:9px;height:9px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-3px) rotate(45deg)} @media screen and (max-width:767px) and (orientation:portrait){ .elx-map-in{--mw:min(100vw,calc((100vh - 220px) * 16 / 9));margin-top:max(0px,calc((100vh - var(--mw) * 9 / 16 - 380px) / 2))} @supports (height:100dvh){ .elx-map-in{--mw:min(100vw,calc((100dvh - 220px) * 16 / 9));margin-top:max(0px,calc((100dvh - var(--mw) * 9 / 16 - 380px) / 2))} } .elx-map-hd{padding:0 12px} .elx-map-track{border-radius:0} .elx-map .elx-map-nav{top:auto;bottom:-78px;margin-top:0} .elx-map .elx-map-prev{left:calc(50% - 72px)} .elx-map .elx-map-next{right:calc(50% - 72px)} .elx-map-ft{padding:12px 12px 0} .elx-map-ft{display:flex;flex-direction:column} .elx-map-prog{margin-bottom:84px} .elx-map-hint{order:1} .elx-map-acts{order:2;margin-top:16px} .elx-map .elx-map-links{flex-direction:column;gap:8px} .elx-map .elx-map-links a,.elx-map .elx-map-links a:visited{display:flex;width:100%} .elx-map-links a::after{margin-left:auto} .elx-map .elx-map-tolist,.elx-map .elx-map-tolist:active,.elx-map .elx-map-tolist:focus,.elx-map .elx-map-tolist:hover{width:100%;min-width:0} .elx-map-hint-pc{display:none} .elx-map-hint-sp{display:inline} } @media screen and (max-height:500px) and (orientation:landscape){ .elx-map-in{--mw:min(calc(100vw - 150px),calc((100vh - 64px) * 16 / 9));margin-top:0;padding-top:4px} @supports (height:100dvh){ .elx-map-in{--mw:min(calc(100vw - 150px),calc((100dvh - 64px) * 16 / 9))} } .elx-map-hd{height:40px} .elx-map .elx-map-x{width:32px;height:32px} .elx-map-x::before,.elx-map-x::after{width:14px;margin-left:-7px} .elx-map-ft{padding-top:6px} .elx-map-hint{display:none} .elx-map-acts{margin-top:8px} .elx-map .elx-map-links{font-size:13px} } @media (prefers-reduced-motion:reduce){ .elx-map-sl img,.elx-map-prog i{transition:none} } @media print{ .elx-map{display:none!important} } /* ================= 2026-10-11 追加：トップの動き（①実績の数字のカウントアップ ②スクロールでブロックがふわっと出る） ================= top.js 末尾の同名ブロックとセット。JSが動かないときは、どちらも動かず最初から表示される LP（lp_editor.css 260721 案a）と揃えて、OSの「動きを減らす」設定に関わらず常に動かす（上の @media (prefers-reduced-motion:reduce) の transition:none!important もここでは打ち消す） */ #top_page.tp-top .tp-cnt{display:inline-block;text-align:right;font-variant-numeric:tabular-nums} #top_page.tp-fx-on .tp-fx{opacity:0;transform:translateY(24px)} /* 隠すときは一瞬（読み込み直後に、画面外のブロックが0.7秒かけて消える動きを出さない） */ #top_page.tp-fx-on .tp-fx.is-shown{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease!important} /* 出すときだけゆっくり。カードの時間差は top.js が transition-delay で付ける */ @media print{#top_page.tp-fx-on .tp-fx{opacity:1;transform:none}}