/* max-width:none と padding:0 は、WordPressが自動で付与する body.home クラスが
   クライアント管理画面用CSS（globals.cssの .home{max-width:1120px;padding:40px 0 0}、
   ダッシュボード「ホーム」ビュー用の全く無関係なスタイル）と偶然衝突し、トップページの
   bodyが1120px幅・左寄せ・上部余白付きになってしまう問題への対策。 */
body.axel-site{margin:0;max-width:none;padding:0;background:#fff;color:#222;min-width:320px;font-family:Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}.axel-site button,.axel-site input,.axel-site textarea,.axel-site select{font:inherit}.axel-site [id]{scroll-margin-top:100px}.axel-site #main{min-height:40vh}.axel-page,.axel-news{width:min(1120px,calc(100% - 48px));margin:48px auto}.axel-page h1{font-size:clamp(26px,4vw,40px);margin-bottom:28px}.axel-news>h2{font-size:30px;margin-bottom:28px}.axel-news-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.axel-news-card{display:block;color:inherit;text-decoration:none}.axel-news-card img{width:100%;aspect-ratio:1.91;object-fit:cover;border-radius:8px}.axel-news-card time{font-size:12px;color:#666}.axel-news-card h3{font-size:17px;line-height:1.8;margin:10px 0}.axel-empty{color:#666;padding:32px 0}.axel-admin-menu-item a{color:#675279}.axel-tools-wrap{width:min(1060px,calc(100% - 48px));margin:26px auto 32px}.axel-tools{display:flex;min-height:180px;align-items:center;justify-content:space-between;gap:24px}.axel-tools .speech-player{max-width:60%;width:auto}.axel-tools .speech-status{max-width:300px;white-space:normal;font-size:12px}.axel-tools-wrap[data-home="1"]{position:absolute;z-index:5;right:max(24px,calc((100vw - 1100px)/2));top:120px;width:auto;max-width:45%}.axel-tools-wrap[data-home="1"] .axel-tools{min-height:0}.axel-tools-wrap[data-home="1"] .speech-player{max-width:none}.axel-tools-wrap[data-home="1"] .speech-status{display:none}.axel-hero-globe{position:absolute;left:47%;top:66%;transform:translate(-50%,-50%);z-index:4}/* ヒーロー画像の口パクは唇が二重に見えるとの指摘で無効化（元に戻す）。
   JS側（lip-sync.ts）は引き続きstyle.opacityを直接操作するが、!importantで
   常に非表示にすることで視覚的な効果を打ち消す。要素・JS自体は残すため、
   将来より合う素材が用意できれば!importantを外すだけで再度有効化できる。 */
.axel-site [class*="HeroQueen_mouthOverlay"]{opacity:0!important;pointer-events:none}.axel-language-notice{font-size:13px;color:#5e526e;background:#f7f3fb;padding:12px 24px;max-width:1060px;margin:16px auto}.axel-site #lpnotes-root>.site-header{background:#f4f0f9;color:#333;height:auto;min-height:64px;flex-wrap:wrap;padding:12px 24px;gap:20px}.axel-site #lpnotes-root>.site-header .wordmark,.axel-site #lpnotes-root>.site-header .desktop-nav{color:#333}.axel-site .reader{max-width:720px}.axel-site .lpnotes-fallback{min-height:45vh}.axel-site .lpnotes-pr:empty{display:none}.axel-booking{width:100%;min-width:0;padding:28px;border:1px solid #e4e0ea;border-radius:14px;background:#fff;box-shadow:0 10px 35px #28123d0a;color:#222}.axel-booking label{display:block;font-size:14px;font-weight:600;margin-bottom:20px}.axel-booking small{font-size:11px;color:#675279;background:#f2edf7;padding:3px 7px;border-radius:4px;margin-left:8px}.axel-booking input:not([type=checkbox]):not([type=hidden]),.axel-booking select,.axel-booking textarea{display:block;width:100%;margin-top:8px;border:1px solid #cbc6d2;border-radius:7px;padding:11px 12px;color:#222;background:#fff;min-height:44px}.axel-booking textarea{resize:vertical}.axel-booking input:focus,.axel-booking select:focus,.axel-booking textarea:focus{outline:2px solid #9b78b5;outline-offset:2px}.axel-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.axel-slot-field{border:0;margin:20px 0;padding:0;min-width:0}.axel-slot-field legend{font-size:14px;font-weight:600;line-height:1.7}.axel-slot-field p{font-size:12px;color:#666;margin:10px 0}.axel-slot-scroll{overflow:auto}.axel-slot-field table{width:100%;border-collapse:collapse;text-align:center;font-size:13px}.axel-slot-field th,.axel-slot-field td{border:1px solid #e0dce6;padding:10px 7px}.axel-slot-field th{background:#f7f5fa}.axel-slot-field td label{margin:0;min-height:40px;display:flex;align-items:center;justify-content:center}.axel-booking input[type=checkbox]{width:20px;height:20px;accent-color:#73508a}.axel-booking input:disabled{opacity:.35}.axel-booking label.axel-consent{display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.8}.axel-consent a{text-decoration:underline}.axel-submit{width:100%;min-height:48px;padding:12px 20px;color:white;background:#4f345f;border:0;border-radius:8px;font-weight:700;cursor:pointer}.axel-submit:disabled{opacity:.55;cursor:default}.axel-form-note{font-size:12px;color:#666;margin:14px 0}.axel-form-result{font-size:14px;line-height:1.8}.axel-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.axel-booking-mount{min-width:0}.axel-site .Footer_social__PtnEw{list-style:none;padding:0}.axel-site .Menu_items__AyNbr{list-style:none;padding:0}.axel-site .Menu_nav__iPfdA.axel-menu-open{visibility:visible!important;opacity:1!important;transform:none!important;display:flex!important;z-index:1000}.axel-site .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.axel-site .screen-reader-text:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;padding:12px;z-index:9999;background:#fff}
@media(max-width:760px){.axel-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.axel-tools{min-height:140px;gap:12px}.axel-tools-wrap{width:calc(100% - 32px);margin:18px auto}.axel-tools .globe-box{flex:0 0 140px}.axel-tools-wrap[data-home="1"]{top:98px;right:16px;max-width:52%}.axel-site .speech-portrait{width:54px;height:54px}.axel-site .speech-dock{gap:7px}.axel-site .audio-pill{padding:8px}.axel-site .audio-slider{width:50px}}
@media(max-width:500px){.axel-page,.axel-news{width:calc(100% - 32px);margin:28px auto}.axel-news-grid{grid-template-columns:1fr;gap:25px}.axel-booking{padding:18px}.axel-field-row{grid-template-columns:1fr;gap:0}.axel-tools{min-height:130px}.axel-tools .speech-player{max-width:55%}.axel-tools-wrap[data-home="1"] .speech-portrait{display:none}.axel-tools-wrap[data-home="1"]{top:83px}.axel-tools .speech-status{font-size:11px}.axel-hero-globe .home-globe-box{transform:scale(.9)}.axel-site .Footer_right__Y6m97{flex-wrap:wrap}.axel-site [class*="ContactSection_section"]{padding-inline:16px}}

.axel-site .Header_header__gGK2p{position:relative;background:#f3f3f3;min-height:56px;padding:12px 24px;--nav-color:#242424}.axel-site .Header_header__gGK2p .Header_logo__hNdxq,.axel-site .Header_header__gGK2p .Menu_items__AyNbr,.axel-site .Header_header__gGK2p .Menu_button__BYoiJ{color:#242424}
/* ハンバーガーアイコンもreference.css側の--nav-icon-filter変数に頼らず、
   直接filterを指定して確実に濃色で見えるようにする（ロゴ・メニュー文字色と
   同じ防御的な対応）。 */
.axel-site .Header_header__gGK2p .Menu_button__BYoiJ img{filter:brightness(0) opacity(.75)}
/* 三本線メニューを開いた時、以前は画面全体を覆うフルスクリーン表示だった
   ため「メニューだけのページになり、中身が左に寄って見える」という違和感に
   つながっていた。ヘッダー直下に収まるプルダウン（ドロップダウン）形式に
   変更し、画面全体は覆わないようにする。 */
.axel-site .Menu_nav__iPfdA.axel-menu-open{position:absolute;inset:auto 0 auto 0;top:100%;background:#f3f3f3;color:#242424;padding:8px 24px 20px;display:block!important;box-shadow:0 12px 24px rgba(0,0,0,.1);max-height:calc(100vh - 100%);overflow-y:auto;z-index:1000}
.axel-site .Menu_nav__iPfdA.axel-menu-open .Menu_items__AyNbr{flex-direction:column;gap:2px}
.axel-site .Menu_nav__iPfdA.axel-menu-open .Menu_items__AyNbr li a{display:block;padding:14px 4px;border-bottom:1px solid rgba(0,0,0,.08)}
.axel-site .Menu_nav__iPfdA.axel-menu-open .Menu_close__hS6za{display:block;position:absolute;top:8px;right:16px;padding:8px}
/* 管理者用メニューが混ざる(axel-admin-menu-item)と公開5項目+管理4項目の
   最大10項目になり、1280px未満の幅ではreference.css側の640px基準の折り返し
   前に文字が折り返して崩れる。:has()での「管理項目があるnavだけ」判定は
   Firefox/Chromeの一部バージョンで非対応・不安定でナビ自体が消える事故に
   つながったため使わず、全ユーザー一律で1280px未満はハンバーガーに切り替える
   （公開5項目のみでも早めに畳まれるが、崩れるより安全）。 */
@media(max-width:1280px){.axel-site .Menu_nav__iPfdA:not(.axel-menu-open){display:none}.axel-site .Menu_nav__iPfdA+.Menu_button__BYoiJ{display:flex;background:none;border:0;cursor:pointer}}

/* business/company/saas/hire-me/navi-lpの各ページは[class*="layout_container__"]
   で本文を囲む。reference.cssのpadding-top（72px〜240px、ページにより異なる）
   は、元のNext.js版でヘッダーがposition:absoluteで重なる設計だった名残で、
   header.htmlをposition:relativeの実体バーに変えたWP版では不要な二重余白に
   なっている。全ページ共通で上余白だけ詰める（左右・下は既存のカード風余白
   を維持）。 */
.axel-site [class*="layout_container__"]{padding-top:24px}
@media(max-width:760px){.axel-site [class*="layout_container__"]{padding-top:16px}}

/* ヒーロー画像を左右いっぱいに広げる。reference.css側はHeroQueen_wrapperと、
   その親のHeroSection_sectionの両方に独立してwidth:min(100%,900px)の900px
   上限がかかっている。内側のwrapperだけ外しても外側のsectionで再び900pxに
   制限されてしまうため、両方を外す必要がある。画像自体は1280/670の
   アスペクト比のまま拡大されるだけなので、新しい素材は不要。 */
.axel-site .HeroSection_section__f8KKK,.axel-site .HeroQueen_wrapper__zPF1V{width:100%;max-width:1400px;margin-inline:auto}
/* page_topの背景色（reference.css側はvar(--color-bg-sub)、薄いグレー）が、
   ヒーロー画像の最大幅(1400px)を超える余白部分で灰色の帯として見えてしまう
   ため、白にする。 */
.axel-site .page_top__Dp7wK{background-color:#fff}
/* 新しいヒーロー画像（3000x1000、アスペクト比3:1）に合わせてreference.css側の
   aspect-ratio:1280/670を上書き。画像自体を横長に作り直したことで、画面幅が
   広がっても縦方向にあまり拡大されない見た目になる。 */
.axel-site .HeroQueen_wrapper__zPF1V{aspect-ratio:3/1}
/* ヘッダーを#f3f3f3の実体色バーに変更したため、reference.cssの--nav-color
   変数連鎖に頼らず、ロゴ・メニュー文字色を直接#242424で明示する（キャッシュ
   で古いCSSが混在しても文字が確実に見えるようにする防御的な指定）。 */

/* page_top__Dp7wKはhome.html専用（ヒーロー画像の外枠）。reference.cssの
   padding:80px 24pxは、元のNext.js版でヘッダーがposition:absoluteで
   ヒーローに重なる設計だった名残。ヘッダーをposition:relativeの実体バーに
   変えたため、この上下パディングは二重の余白になり、ヘッダー直下に
   ヒーロー画像が来ない原因になっていた。 */
.axel-site .page_top__Dp7wK{padding:0 24px}
/* Imported semantic lists and headings: restore markers suppressed by the CSS reset. */
.axel-site .prose .rich-content ul,.axel-site .rich-editable ul{list-style:disc;padding-inline-start:1.5em;margin-block:1em}
.axel-site .prose .rich-content ol,.axel-site .rich-editable ol{list-style:decimal;padding-inline-start:1.5em;margin-block:1em}
.axel-site .rich-content li>.rich-content>p,.axel-site .rich-editable li>p{margin:.3em 0}
.axel-site .prose .rich-content>h1{margin:1.5em 0 .7em}
.axel-site .rich-editable h1{font-size:1.6em;font-weight:700;line-height:1.6;margin:1em 0 .6em}

/* イメージ100計算（/image100）の表・モード/演算切替。内側の100マスは常に空欄。 */
.image100-widget{margin:28px 0}
.image100-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;font-size:14px}
.image100-controls-label,.image100-operator span{font-weight:700}
.image100-controls button{padding:7px 16px;border:1px solid #cbc6d2;border-radius:7px;background:#fff;cursor:pointer}
.image100-controls button[aria-pressed="true"]{background:#4f345f;color:#fff;border-color:#4f345f}
.image100-operator select{margin-left:6px;padding:6px 10px;border:1px solid #cbc6d2;border-radius:7px;background:#fff}
/* table-layout:fixedで列幅を均等にページ幅いっぱいまで広げ（元はdisplay:block+
   table-layout:auto任せで、内容量に応じた最小幅のまま左に寄っていた）、
   各セルはaspect-ratio:1で列幅に連動して正方形に近い見た目にする。 */
.image100-table{border-collapse:collapse;width:100%;table-layout:fixed}
.image100-table th,.image100-table td{border:1px solid #e0dce6;padding:0;text-align:center}
.image100-table thead th{background:#f7f5fa;padding:8px 4px;font-weight:700}
.image100-table tbody th{background:#f7f5fa;padding:8px 4px;font-weight:700}
.image100-cell{width:100%;aspect-ratio:1;border:0;background:transparent;cursor:pointer;font-size:clamp(13px,2.4vw,20px)}
.image100-cell:hover,.image100-cell:focus-visible{background:#f2edf7;outline:2px solid #9b78b5;outline-offset:-2px}
.image100-status{font-size:13px;color:#a33;margin-top:12px}

/* 記事ページ専用のディクテーション練習。
   注意: .audio-pill に position:relative が無いため、このラッパー自身を配置の
   基準にする（globals.css の共有クラスは変更しない）。また globals.css の
   汎用ルール `.audio-pill button{background:#232b27;color:#fff}` が詳細度
   （1クラス+1要素）で単純な1クラス指定（例 .practice-primary のみ）に勝って
   しまうため、ボタン系セレクタはすべて .practice-wrap / .practice-panel を
   前置して詳細度を2クラス分に上げてある。それでも globals.css には
   `.audio-pill button:nth-of-type(2){background:#979e96}` のような、祖先に
   .audio-pill を持つ2番目のbutton（深さを問わず、各要素自身の兄弟内で2番目）
   にまで一致する指定もあり、詳細度だけでは確実に防げない。背景色・文字色は
   !important で固定する（.audio-pill 配下に新しいUIを置く以上の根本解決は
   globals.css 側の改修が必要だが、既存の共有クラスなので変更しない）。 */
.practice-wrap{position:relative;display:inline-flex}
.practice-wrap .practice-entry{display:flex;align-items:center;gap:4px;margin-left:6px;padding:4px 10px 4px 8px;background:#fff!important;border:1px solid #cbc6d2;border-radius:999px;color:#222!important;font-size:11px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap}
.practice-wrap .practice-entry:hover{opacity:.9}
.practice-panel{position:absolute;top:calc(100% + 10px);right:0;width:280px;max-width:calc(100vw - 36px);max-height:70vh;overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.28);padding:14px;display:flex;flex-direction:column;gap:10px;z-index:950}
.practice-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.practice-panel-heading{margin:0;font-size:14px;font-weight:700;color:#222;min-width:0}
.practice-panel .practice-close{border:0;background:transparent!important;color:#666!important;font-size:12px;cursor:pointer;padding:4px;white-space:nowrap;flex-shrink:0}
.practice-panel-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.practice-panel .practice-segment{flex:1 1 auto;padding:6px 8px;font-size:11px;border:1px solid #cbc6d2;border-radius:999px;background:#fff!important;color:#222!important;cursor:pointer}
/* data-active ではなくクラス名で判定する: dist/lpnotes.css (shadcn/Tailwind由来の
   コンポーネントCSS) に [data-active=true]/[data-active=false] という無関係な
   汎用セレクタが多数含まれており、属性名が衝突して背景色が乗っ取られるため。 */
.practice-panel .practice-segment.practice-segment-active{background:#4f345f!important;border-color:#4f345f;color:#fff!important}
.practice-rate-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#666;width:100%}
.practice-rate-slider{flex:1 1 auto;accent-color:#4f345f;cursor:pointer}
.practice-rate-value{font-size:11px;font-variant-numeric:tabular-nums;color:#666;min-width:2.4em;text-align:right}
.practice-progress{margin:0;font-size:12px;font-variant-numeric:tabular-nums;color:#666;text-align:center}
.practice-error{margin:0;padding:6px 8px;font-size:11px;line-height:1.4;color:#9a3412;background:#fdf1ec;border-radius:8px;text-align:center}
.practice-button-row{display:flex;align-items:center;justify-content:center;gap:8px}
.practice-panel .practice-primary{flex:1 1 auto;min-height:40px;padding:8px 16px;border:0;border-radius:999px;background:#4f345f!important;color:#fff!important;font-size:13px;font-weight:700;cursor:pointer}
.practice-panel .practice-primary:hover{opacity:.92}
.practice-panel .practice-primary:disabled{opacity:.35;cursor:not-allowed}
.practice-panel .practice-secondary{flex:1 1 auto;min-height:36px;padding:6px 14px;border:1px solid #cbc6d2;border-radius:999px;background:#fff!important;color:#222!important;font-size:12px;cursor:pointer}
.practice-finished{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0}
.practice-finished-heading{margin:0;font-size:16px;font-weight:700;color:#222}
@media(max-width:950px){.practice-panel{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:75vh;max-height:75dvh;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 32px rgba(0,0,0,.3)}.practice-panel-heading{font-size:16px}.practice-panel .practice-primary{min-height:56px;font-size:15px}.practice-panel .practice-secondary{min-height:48px;font-size:14px}.practice-wrap .practice-entry{min-height:44px;padding:6px 12px;font-size:12px}}