@charset "utf-8";
/* トップページのデザイン一式（自動生成：_build_テーマヘッダー.py が デザイン案の <style> をそのまま写す。直接編集しない）
   このページではテーマの旧CSS（common/basic/pc/ipad）を読み込まず、これだけを使う＝デザイン案の見た目になる。
   確認用の部品（確認用バー・スマホ表示・タグの見本・仮の広告枠）は外してある */
/* ── 実際の広告（テーマの出力）をデザイン案の枠に合わせる ──────────────
   テーマの広告は <div class="ad"><ul><li><div class="ad_box"><a><img> の形。
   本文上の横長バナーは本文幅いっぱい（入稿2220×390）、右の列は300×250を16px間隔で縦に並べる */
.ad-main .ad,.ad-main .soundcloud,.ad-main .ad_box,.ad-main a{display:block;width:100%;margin:0;padding:0;border:0;background:none}
.ad-main .ad_box::before,.col-ad .ad_box::before,.ad-follow .ad_box::before{content:none}
.ad-main img{display:block;width:100%;height:auto;border-radius:12px}
.col-ad .ad,.ad-follow .ad{display:block;width:100%;margin:0;padding:0;border:0;background:none}
.col-ad .ad > ul,.ad-follow .ad > ul{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
/* 枠の中身はすべて block に。li の中の <a> が inline のままだと、行の高さ（約31px）が
   画像の上に足されて、本文の横長バナーと上端がずれる（2026-09-20 修正）。
   追従で出し直す列（.ad-follow）は li を直接ぶら下げるので、.ad を挟まない形でも効くようにする */
.col-ad li,.ad-follow li{display:block;margin:0;padding:0;list-style:none;line-height:0}
.col-ad li::before,.ad-follow li::before{content:none}
.col-ad li > a,.col-ad .ad_box,.col-ad .ad_box > a,
.ad-follow li > a,.ad-follow .ad_box,.ad-follow .ad_box > a{display:block;margin:0;padding:0;border:0;line-height:0}
.ad-follow > li + li{margin-top:16px}
.col-ad img,.ad-follow img{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;border-radius:12px}
/* ── 本文の途中に自動で入る広告（.adsense-wrap > .auto_banner_ad > ul > li.ad_box）──────
   2026-09-20 ユーザー決定：ここも広告なので、本文上の横長バナー・右の列と同じ見え方にそろえる（全記事共通）。
   それまでは、旧CSSを読み込まないので「スポンサード」の表記が消え、本文の ul の赤い丸だけが左に出ていた */
/* 大きさは現行サイトと同じにする（2026-09-20 ユーザー指示）：1枠あたり本文幅の50%、
   2枠のときは2%の間隔で横並び・中央ぞろえ。スマホでは1枠を幅いっぱいに。
   本文幅いっぱいに広げると、入稿が四角い画像（640×500）のときに引き伸ばされて大きくなりすぎる */
.art-body .adsense-wrap{margin:26px 0}
/* 2026-09-26 ユーザー指摘：広告がH2カードの中に入ると記事の中身に見えるため、
   テーマ側でカードの外に出している（sf_renewal_pull_ads_out）。
   カードとカードのあいだに置いたときの余白を、カードと同じ30pxにそろえる */
.art:has(.h2card) .art-body > .adsense-wrap{margin:0 0 30px}
.art-body .ad_box{margin:26px 0}
/* ショートコードが直接出す広告（st1-pc・fl-pc・youtube-sub など）も、
   2026-09-26 からカードの外に出している。余白をカードと同じ30pxにそろえる */
.art:has(.h2card) .art-body > .ad_box{margin:0 0 30px}
.art-body .adsense-wrap::before{content:"Sponsored";display:block;text-align:right;margin:0 0 5px;
 font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--sub);text-transform:uppercase;
 position:static;background:none;padding:0}
.art-body .adsense-wrap ul,.art-body .auto_banner_ad ul{display:flex;justify-content:center;gap:2%;margin:0;padding:0;list-style:none}
.art-body .adsense-wrap li,.art-body .auto_banner_ad li{display:block;width:50%;margin:0;padding:0;list-style:none;line-height:0}
@media(max-width:759px){ .art-body .adsense-wrap li,.art-body .auto_banner_ad li{width:100%} }
/* 光沢つきの入稿（ACFの shineCheck）は <a> が <span class="shine"> に包まれる */
.art-body .adsense-wrap .shine,.art-body .auto_banner_ad .shine{display:block;line-height:0}
.art-body .adsense-wrap li::before,.art-body .auto_banner_ad li::before{content:none}
.art-body .adsense-wrap a,.art-body .auto_banner_ad a,.art-body .adsense-wrap .ad_box{display:block;margin:0;padding:0;border:0;line-height:0}
.art-body .adsense-wrap .ad_box::before{content:none}
.art-body .adsense-wrap img,.art-body .auto_banner_ad img{display:block;width:100%;max-width:100%;max-height:none;height:auto;
 margin:0;border:0;border-radius:12px;box-shadow:none;background:none}
/* ── サンプル音源（[audio]＝mediaelement のプレーヤー：163記事）──────────────
   デザイン案の .mp3（クリーム地の丸い1行・コーラルの再生ボタン・水色のバー）にそろえる。
   プレーヤーは幅と高さを style 属性で直接書くため !important で上書きする。音量つまみは案に無いので出さない */
.art-body .mejs-container{background:var(--cream)!important;border:3px solid var(--ink);border-radius:99px;
 box-shadow:5px 5px 0 var(--ink);padding:9px 20px 9px 9px;height:auto!important;min-height:0!important;
 max-width:100%;margin:0 0 22px}
.art-body .mejs-inner{display:block}
.art-body .mejs-mediaelement,.art-body .mejs-layers{display:none}
.art-body .mejs-controls{position:static!important;display:flex!important;align-items:center;gap:13px;
 background:none!important;width:auto!important;height:auto!important;padding:0}
.art-body .mejs-button,.art-body .mejs-time{width:auto!important;height:auto!important;padding:0;font-size:11.5px;
 font-weight:800;color:var(--sub)}
.art-body .mejs-playpause-button{flex:none}
.art-body .mejs-playpause-button > button{width:46px!important;height:46px!important;margin:0!important;
 border-radius:50%;background:var(--coral)!important;background-image:none!important;border:2px solid var(--ink);position:relative}
.art-body .mejs-playpause-button.mejs-play > button::after{content:"";position:absolute;left:17px;top:50%;transform:translateY(-50%);
 border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.art-body .mejs-playpause-button.mejs-pause > button::after{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
 width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.art-body .mejs-time-rail{flex:1;min-width:0;width:auto!important;height:8px!important;padding:0!important;margin:0!important}
.art-body .mejs-time-total,.art-body .mejs-time-loaded,.art-body .mejs-time-current,.art-body .mejs-time-buffering{
 height:8px!important;top:0!important;margin:0!important;border-radius:99px}
.art-body .mejs-time-total{background:#e2ded0!important;width:100%!important}
.art-body .mejs-time-loaded{background:#d7d2c3!important}
.art-body .mejs-time-current{background:var(--sky)!important}
.art-body .mejs-time-handle,.art-body .mejs-time-float,.art-body .mejs-time-hovered,
.art-body .mejs-volume-button,.art-body .mejs-horizontal-volume-slider{display:none!important}
@media(max-width:759px){
  .art-body .mejs-container{padding:7px 14px 7px 7px}
  .art-body .mejs-controls{gap:9px}
  .art-body .mejs-playpause-button > button{width:38px!important;height:38px!important}
  .art-body .mejs-playpause-button.mejs-play > button::after{left:14px;border-left-width:11px}
}
/* サンプル音源のタイトル（2026-09-22 ユーザー「タイトルが文字で書かれているものも統一したい」）。
   デザイン案の .mp3 と同じく、プレーヤーの中の再生バーの上にタイトルを出す。テーマが .sf-audio で包む（inc/renewal-article.php）。
   タイトル付きのときは、丸い枠を外側（.sf-audio）に持たせ、タイトル1行＋その下に再生バー（ユーザー「タイトルは1行で、その下に再生バー」）。
   枠はパソコンではまる枠（デザイン案の .mp3・音源比較とそろえる。2026-09-22）。スマホは折り返しで高くなるので角丸24px
   パソコンは必ず1行（はみ出す幅のときは「…」）。スマホは40字が1行に入らないので、読めなくならないよう折り返す。
   再生ボタンは枠の縦の中央に置く */
.art-body .sf-audio{position:relative;margin:0 0 22px}
.art-body .sf-audio .mejs-container{margin:0}
.art-body .sf-audio.has-ttl{background:var(--cream);border:3px solid var(--ink);border-radius:99px;box-shadow:5px 5px 0 var(--ink);
 padding:12px 20px 12px 70px}
.art-body .sf-audio.has-ttl .mejs-container{position:static!important;background:none!important;border:0;border-radius:0;box-shadow:none;padding:0}
.art-body .sf-audio.has-ttl .mejs-playpause-button{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.art-body .sf-audio .sf-audio-ttl{margin:0 0 4px;font-size:14.5px;font-weight:800;line-height:1.5;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:759px){
  .art-body .sf-audio.has-ttl{border-radius:24px;padding:10px 14px 10px 58px}
  .art-body .sf-audio.has-ttl .mejs-playpause-button{left:9px}
  .art-body .sf-audio .sf-audio-ttl{font-size:13.5px;white-space:normal}
}
/* ── フッターのニュースレター（現行のフォーム＝Benchmark Email）をデザイン案の見た目に ──────────
   フォームは form > input.formbox-field-… + button.formbox-button-… の形で、ページの中に自前の <style> を
   書き出してくる（四角い枠・濃い色のボタン）。そちらが後に来るので !important で上書きする。
   ※ renewal-footer.css にも同じ指定がある（あちらは旧デザインのままのページ用）。直すときは両方そろえる */
footer.sf-foot .f-news h2{margin:0 0 12px;font-size:19px;font-weight:900;line-height:1.7}
@media(max-width:559px){ footer.sf-foot .f-news h2{font-size:17px} }
footer.sf-foot .f-news form{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:0}
footer.sf-foot .f-news input[type="text"],footer.sf-foot .f-news input[type="email"]{
 flex:1 1 280px;min-width:0;width:auto!important;height:auto!important;box-sizing:border-box;margin:0!important;
 border:2px solid var(--ink)!important;border-radius:99px!important;padding:12px 18px!important;
 font:inherit!important;font-size:16px!important;line-height:1.85!important;background:#fff!important;color:var(--ink)!important}
footer.sf-foot .f-news button[type="submit"],footer.sf-foot .f-news input[type="submit"]{
 flex:none;height:auto!important;box-sizing:border-box;margin:0!important;border:2px solid var(--ink)!important;border-radius:99px!important;
 background:var(--yellow)!important;color:var(--ink)!important;padding:12px 30px!important;
 font:inherit!important;font-size:17px!important;font-weight:900!important;line-height:1.85!important;cursor:pointer}
footer.sf-foot .f-news button[type="submit"]:hover,footer.sf-foot .f-news input[type="submit"]:hover{background:var(--ink)!important;color:#fff!important}
footer.sf-foot .f-news [class*="formbox-title"],footer.sf-foot .f-news [id*="tdLogo"]{display:none!important}
footer.sf-foot .f-news [class*="formbox-editor"]{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;background:none!important;text-align:center!important}
/* ── カテゴリー一覧ページ（2026-09-20 ユーザー決定：記事一覧はトップと同じカード3列、全件1ページ、
   コース一覧は記事一覧の下に横並び）。ヒーロー・カード・広告列はデザイン案の部品をそのまま使う ──────── */
/* 一覧のカードは3列（トップの新着記事は横スクロールだが、ここは折り返す） */
.arc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:959px){ .arc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:559px){ .arc-grid{grid-template-columns:minmax(0,1fr)} }
.arc-grid .news-card{width:auto;min-width:0}
.arc-grid .news-card.is-off{display:none}
/* セール記事のカード：画像の左上に期間のラベル。終わったセールは灰色のラベル＋画像と文字を薄く（2026-09-23） */
.news-card.is-sale .thumb{position:relative}
.news-card .sale-lbl{position:absolute;left:10px;top:10px;z-index:1;background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:99px;
 padding:2px 12px;font-size:12.5px;font-weight:900;line-height:1.6;white-space:nowrap}
.news-card.is-ended .sale-lbl{background:#8b877c;color:#fff}
.news-card.is-ended .thumb img{opacity:.55;filter:grayscale(.7)}
.news-card.is-ended b{color:var(--sub)}
.arc-count{font-size:13px;font-weight:800;color:var(--sub);margin:0 0 14px}
/* タグから探す（26カテゴリーで使用） */
.tagpick{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);
 padding:22px 26px;margin:0 0 26px}
.tagpick h2{margin:0 0 6px;font-size:22px;font-weight:900;letter-spacing:-.02em}
.tagpick h2 span{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 5px;margin-left:-5px}
.tagpick h3{margin:16px 0 10px;font-size:14px;font-weight:900;color:var(--sub)}
.tagpick ul{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.tagpick li{margin:0;padding:0}
.tagpick li::before{content:none}
.tagpick input{position:absolute;opacity:0;pointer-events:none}
.tagpick label{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:99px;
 padding:7px 16px;font-size:13.5px;font-weight:900;cursor:pointer;line-height:1.4}
.tagpick label:hover{background:var(--cream)}
.tagpick input:checked + label{background:var(--sky);color:#fff}
@media(max-width:759px){ .tagpick{padding:16px 14px;border-radius:16px;box-shadow:5px 5px 0 var(--ink)} }
/* コース一覧（全ページの下部の共通ブロック）。2026-09-22 ユーザー「もう少し色をつけて派手に。色味はレッスンサイトの #courses を参考に」→
   レッスンサイトと同じく白いカードの上部をコースの色で塗る。地は白（濃い紺は重いとのことで白に。同日ユーザー）。カードの上部をコースの色（li の --cc）で塗り、白い枠のアイコン・英字・白抜きのコース名。
   下はサイトの背景と同じクリーム色に説明と「詳しく見る」（同日ユーザー）。列数は枠の幅で決める（コンテナクエリ）：広い＝5列／やや狭い＝3列／スマホ＝1列 */
.course-sec{container-type:inline-size;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);
 padding:24px 24px 26px;margin:30px 0 0}
.course-sec .eyebrow{margin:0 0 4px;font-family:Inter,sans-serif;font-size:12px;font-weight:900;
 letter-spacing:.18em;color:var(--blue);text-transform:uppercase}
.course-sec h2{margin:0 0 6px;font-size:24px;font-weight:900;line-height:1.45;letter-spacing:-.02em;color:var(--ink)}
.course-sec h2 span{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 5px;margin-left:-5px}
.course-sec .lead{margin:0 0 18px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.course-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.course-grid li{margin:0;padding:0;list-style:none;display:flex;--cc:var(--blue)}
.course-grid li::before{content:none}
.course-grid a{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--cream);border:3px solid var(--ink);border-radius:18px;
 box-shadow:0 6px 0 var(--ink);text-decoration:none!important;color:var(--ink);transition:transform .16s,box-shadow .16s}
.course-grid a:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.course-grid .ch{display:flex;align-items:center;gap:10px;padding:13px 12px;background:var(--cc);border-bottom:3px solid var(--ink)}
.course-grid .ci{flex:none;display:block;width:48px;height:48px;border:2px solid rgba(30,30,30,.15);border-radius:11px;overflow:hidden;background:#fff}
.course-grid .ci img{display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;max-width:none;max-height:none;object-fit:contain}
.course-grid .cn{min-width:0;display:flex;flex-direction:column;color:#fff}
.course-grid .cn small{font-family:Inter,sans-serif;font-size:10px;font-weight:900;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;opacity:.95}
.course-grid .cn b{font-size:14.5px;font-weight:900;line-height:1.4;letter-spacing:-.01em;text-shadow:0 1px 0 rgba(0,0,0,.18);word-break:keep-all;overflow-wrap:anywhere}
.course-grid .cb{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 13px 14px}
.course-grid .cd{display:block;font-size:12.5px;font-weight:700;line-height:1.65;color:#4f5558}
.course-grid .cgo{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:900;color:var(--ink)}
.course-grid .cgo i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cc);color:#fff;font-style:normal;font-size:13px;line-height:1;border:2px solid var(--ink)}
/* 5列のときはカードが狭いので、アイコンを上・コース名を下に。コース名は「／」などの区切りでだけ折り返す（keep-all） */
@container (min-width:861px){ .course-grid .ch{flex-direction:column;align-items:flex-start;gap:8px} }
@container (max-width:860px){ .course-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (max-width:520px){
  .course-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .course-grid .cb{flex-direction:row;align-items:center}
  .course-grid .cgo{margin-top:0;flex:none}
}
@media(max-width:759px){ .course-sec{padding:20px 14px;border-radius:16px;box-shadow:5px 5px 0 var(--ink)} .course-sec h2{font-size:20px} }
/* お問い合わせの案内（コース一覧と無料体験CTAのあいだ）。2026-09-22 ユーザー「白の空白が多く寂しい」→
   淡い水色の地、左に吹き出しのイラストを足した。飾りの丸は外し、イラスト・文字・ボタンを枠の中央にまとめて並べる（同日ユーザー指示）。
   ボタンはデザイン案の .more（黄色の丸ボタン） */
.ask-box{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 28px;
 background:var(--sky-soft);border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);padding:22px 28px;margin:30px 0 0}
.ask-box .ask-ill{flex:none;display:block;width:96px;height:96px}
.ask-box .ask-ill svg{display:block;width:100%;height:100%}
.ask-box .ask-tx{flex:0 1 auto;min-width:0}
.ask-box .ask-eb{margin:0 0 2px;font-family:Inter,sans-serif;font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--blue);text-transform:uppercase}
.ask-box b{display:block;font-size:19px;font-weight:900;line-height:1.5}
.ask-box p{margin:2px 0 0;font-size:14px;line-height:1.8;color:var(--sub)}
.ask-box .ask-btn{flex:none;display:inline-block;background:var(--yellow);border:3px solid var(--ink);border-radius:99px;
 box-shadow:4px 4px 0 var(--ink);padding:12px 28px;font-size:15px;font-weight:900;text-decoration:none!important;color:var(--ink)}
.ask-box .ask-btn:hover{background:var(--ink);color:#fff}
@media(max-width:759px){
  .ask-box{padding:18px 16px;border-radius:16px;box-shadow:5px 5px 0 var(--ink);gap:12px 14px}
  .ask-box .ask-ill{width:64px;height:64px}
  .ask-box{justify-content:flex-start}
  .ask-box .ask-tx{flex:1 1 calc(100% - 80px)}
  .ask-box b{font-size:17px}
  .ask-box .ask-btn{width:100%;text-align:center}
}
/* 無料体験CTA（.art-cta）。記事のデザイン案にある指定と同じ。トップ用のCSS（トップのデザイン案から作る）には
   入っていないので、共通ブロックをトップにも置いた 2026-09-22 からここにも持つ（記事用のCSSでは同じ値が重なるだけ） */
.art-cta{background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);
 padding:22px 24px;margin:32px 0 0;text-align:center}
.art-cta p{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.16em;font-family:Inter,sans-serif}
.art-cta b{display:block;font-size:20px;font-weight:900;margin-bottom:12px;letter-spacing:-.02em}
.art-cta a{display:inline-block;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:99px;
 padding:11px 26px;font-weight:900;text-decoration:none;font-size:14.5px}
.art-cta a:hover{background:var(--yellow)}
/* ページ下部の共通ブロック（コース一覧 → お問い合わせ → 無料体験CTA）。全ページで間隔を30pxにそろえる。
   本文の列（.col-main）は gap:18px の縦並びなので、その直下に置くときは上の余白を12px足して30pxにする */
.sf-bottom{display:flex;flex-direction:column;gap:30px;margin:30px 0 0}
.col-main > .sf-bottom{margin-top:12px}
.sf-bottom > .course-sec,.sf-bottom > .ask-box,.sf-bottom > .art-cta{margin:0}
/* ── 会社概要（page-corporate_information.php。2026-09-22）──────────────────
   会社情報は「見出し｜内容」の表、メッセージは写真＋本文のカード。見た目は記事の h2card と同じ系統 */
.corp-card{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);padding:26px 32px 28px;margin:0 0 30px}
.corp-card .corp-eb{margin:0 0 4px;font-family:Inter,sans-serif;font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--blue);text-transform:uppercase}
.corp-card h2{margin:0 0 18px;font-size:26px;font-weight:900;line-height:1.45;letter-spacing:-.02em}
.corp-card h2 span{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 5px;margin-left:-5px}
.corp-dl{margin:0;border-top:2px solid var(--ink)}
.corp-row{display:grid;grid-template-columns:180px minmax(0,1fr);border-bottom:1px solid #d8d3c4}
.corp-row dt{margin:0;padding:16px 14px;background:var(--cream);font-size:15px;font-weight:900;line-height:1.7}
.corp-row dd{margin:0;padding:16px 18px;font-size:16px;line-height:1.85;min-width:0}
.corp-row dd p{margin:0}
.corp-row dd ul,.corp-row dd ol{margin:0;padding:0 0 0 1.3em}
.corp-row dd ul{list-style:disc}
.corp-row dd li{margin:0 0 4px;padding:0}
.corp-row dd li::before{content:none}
.corp-row dd a{color:var(--blue)}
.corp-map{margin:12px 0 0;border:2px solid var(--ink);border-radius:14px;overflow:hidden;aspect-ratio:16/9;max-width:640px;background:#f1efe6}
.corp-map iframe{display:block;width:100%;height:100%;border:0;margin:0;box-shadow:none;border-radius:0;max-height:none;aspect-ratio:auto}
.corp-msg-in{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.corp-photo{margin:0;position:sticky;top:calc(var(--stick) + 10px)}
.corp-photo img{display:block;width:100%;height:auto;margin:0;border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--blue);max-height:none}
.corp-text p{margin:0 0 16px}
/* 都道府県の並び。押せるように見えないよう、タグではなく文章にする（2026-09-22 ユーザー）。
   文字の大きさ・色は本文と同じ（14pxの灰色では小さいとの指摘で変更） */
.art-body .corp-areas{margin:0 0 16px}
/* メッセージの折りたたみ。レッスンサイトの講師ページ「経歴をすべて見る」と同じ作り：
   高さ260px（スマホ240px）で切り、下76pxを白へぼかす。ボタンは白地・黒枠3px・丸 */
.corp-text-wrap{min-width:0}
.corp-msg.is-collapsible .corp-text{position:relative}
.corp-msg.is-collapsible:not(.is-open) .corp-text{max-height:260px;overflow:hidden}
.corp-msg.is-collapsible:not(.is-open) .corp-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:76px;
 background:linear-gradient(rgba(255,255,255,0),#fff 80%);pointer-events:none}
.corp-toggle{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;background:#fff;border:3px solid var(--ink);border-radius:999px;
 padding:11px 22px 12px;font-family:inherit;font-size:14px;font-weight:900;line-height:1.4;color:var(--ink);cursor:pointer}
.corp-toggle span{font-size:16px;line-height:1}
.corp-toggle:hover{background:var(--yellow)}
@media(max-width:720px){ .corp-msg.is-collapsible:not(.is-open) .corp-text{max-height:240px} }
@media(max-width:759px){
  .corp-card{padding:18px 14px 20px;border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
  .corp-card h2{font-size:20px}
  .corp-row{grid-template-columns:minmax(0,1fr)}
  .corp-row dt{padding:10px 12px}
  .corp-row dd{padding:10px 12px 14px}
  .corp-msg-in{grid-template-columns:minmax(0,1fr);gap:18px}
  .corp-photo{position:static;max-width:320px}
}
/* ── フォーム（Contact Form 7。固定ページの依頼・応募・お問い合わせ 9件ほど。2026-09-22）─────────
   レッスンサイト（sleepfreaks.co.jp/contact）の作りに合わせる：項目名は太字で入力欄の上、
   入力欄は黒枠2px・角丸12px・高さ52px前後、送信は大きな丸ボタン。色はメディアサイトに合わせて送信ボタンを黄色に。
   フォームの組み方は2種類（div.banner-add > dl.list の dt/dd ／ ul.list > li > p）。どちらにも効くように書く */
.art-body .wpcf7{margin:26px 0 0}
.art-body .wpcf7 .hidden-fields-container{display:none}
.art-body .wpcf7 .banner-add{background:#f6fafd;border:2px solid var(--ink);border-radius:18px;padding:26px 28px 28px;margin:0 0 8px}
.art-body .wpcf7 dl.list,.art-body .wpcf7 ul.list{margin:0;padding:0;list-style:none}
.art-body .wpcf7 dl.list dt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:22px 0 9px;padding:0;
 font-size:16px;font-weight:900;line-height:1.6;color:var(--ink);background:none;border:0}
.art-body .wpcf7 dl.list dt:first-child{margin-top:0}
.art-body .wpcf7 dl.list dt strong{font-weight:700;font-size:13.5px;color:var(--coral);flex-basis:100%;order:3}
.art-body .wpcf7 dl.list dd{margin:0;padding:0;border:0}
.art-body .wpcf7 ul.list > li{margin:0 0 20px;padding:0;background:none;border:0;font-size:16px;line-height:1.8}
.art-body .wpcf7 ul.list > li::before,.art-body .wpcf7 ul.list > li::marker{content:none}
.art-body .wpcf7 ul.list > li > p{margin:0;font-weight:900}
.art-body .wpcf7 ul.list > li > p .wpcf7-form-control-wrap{display:block;margin-top:9px;font-weight:400}
.art-body .wpcf7 .required,.art-body .wpcf7 .optional{display:inline-block;padding:2px 9px 3px;border-radius:99px;
 font-size:11.5px;font-weight:900;line-height:1.4;letter-spacing:.04em;vertical-align:middle}
.art-body .wpcf7 .required{background:var(--coral);color:#fff}
.art-body .wpcf7 .optional{background:#e9e6dc;color:var(--sub)}
.art-body .wpcf7 .wpcf7-form-control-wrap{display:block}
.art-body .wpcf7 input[type="text"],.art-body .wpcf7 input[type="email"],.art-body .wpcf7 input[type="tel"],
.art-body .wpcf7 input[type="url"],.art-body .wpcf7 input[type="number"],.art-body .wpcf7 input[type="date"],
.art-body .wpcf7 select,.art-body .wpcf7 textarea{
 display:block;width:100%!important;max-width:100%;box-sizing:border-box;margin:0;padding:12px 15px;min-height:52px;
 background:#fff;border:2px solid var(--ink)!important;border-radius:12px;box-shadow:none;
 font:inherit;font-size:16px;font-weight:400;line-height:1.6;color:var(--ink);-webkit-appearance:none;appearance:none}
/* 数値欄は後ろの単位（「回」など）と横に並べる */
.art-body .wpcf7 .wpcf7-form-control-wrap:has(> input[type="number"]){display:inline-block;vertical-align:middle;margin-right:8px}
.art-body .wpcf7 input[type="number"]{width:220px!important;max-width:100%}
.art-body .wpcf7 textarea{min-height:180px;resize:vertical}
.art-body .wpcf7 select{padding-right:44px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
.art-body .wpcf7 ::placeholder{color:#9a968c}
.art-body .wpcf7 input:focus,.art-body .wpcf7 select:focus,.art-body .wpcf7 textarea:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 4px rgba(92,179,228,.28)}
.art-body .wpcf7 input[type="file"]{font-size:14px;max-width:100%}
.art-body .wpcf7 input[type="file"]::file-selector-button{margin-right:12px;padding:8px 16px;border:2px solid var(--ink);border-radius:99px;
 background:#fff;font:inherit;font-size:13.5px;font-weight:900;color:var(--ink);cursor:pointer}
.art-body .wpcf7 input[type="file"]::file-selector-button:hover{background:var(--yellow)}
.art-body .wpcf7 .wpcf7-checkbox,.art-body .wpcf7 .wpcf7-radio{display:flex;flex-wrap:wrap;gap:10px 22px;padding:4px 0}
.art-body .wpcf7 .wpcf7-list-item{margin:0}
.art-body .wpcf7 .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:15.5px;font-weight:500}
.art-body .wpcf7 input[type="checkbox"],.art-body .wpcf7 input[type="radio"]{width:19px;height:19px;margin:0;accent-color:var(--blue);flex:none}
.art-body .wpcf7 p:has(> .wpcf7-submit),.art-body .wpcf7 .submit{text-align:center}
.art-body .wpcf7 .wpcf7-submit{display:block;width:auto!important;min-width:320px;max-width:100%;height:auto!important;margin:30px auto 10px;
 padding:17px 32px;background:var(--yellow)!important;background-image:none!important;color:var(--ink)!important;
 border:3px solid var(--ink)!important;border-radius:999px;box-shadow:0 6px 0 var(--ink);
 font:inherit;font-size:18px;font-weight:900;letter-spacing:.04em;line-height:1.4;cursor:pointer;-webkit-appearance:none;appearance:none;
 transition:transform .15s,box-shadow .15s}
.art-body .wpcf7 .wpcf7-submit:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.art-body .wpcf7 .wpcf7-submit:active{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.art-body .wpcf7 .wpcf7-submit:disabled{opacity:.55;cursor:default;transform:none}
.art-body .wpcf7 .wpcf7-spinner{display:block;margin:6px auto 0}
.art-body .wpcf7 .wpcf7-not-valid-tip{margin:6px 0 0;font-size:13.5px;font-weight:700;color:var(--coral)}
.art-body .wpcf7 .wpcf7-not-valid{border-color:var(--coral)!important}
.art-body .wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border:2px solid var(--blue);border-radius:12px;font-size:15px;font-weight:700}
.art-body .wpcf7 form.invalid .wpcf7-response-output,.art-body .wpcf7 form.failed .wpcf7-response-output{border-color:var(--coral)}
@media(max-width:759px){
  .art-body .wpcf7 .banner-add{padding:18px 14px 20px;border-radius:14px}
  .art-body .wpcf7 .wpcf7-submit{min-width:0;width:100%!important}
}
/* ── 目次のパネル（全ページ共通。2026-09-22 ユーザー「目次が長いと、上の目次と×がスクロールで見切れる」）──
   見出し（目次・×）はパネルの上に固定し、項目の部分だけをスクロールさせる。
   項目の部分が縮まない（flex の既定 min-height:auto）・端まで来ると後ろのページまで動く・iPhone の Safari で
   画面の高さがずれる、のいずれでも見出しが流れないようにする。開いている間は後ろのページを止める（JS） */
.toc-panel{height:100%;max-height:100vh;max-height:100dvh;overflow:hidden}
.toc-head{position:sticky;top:0;z-index:2;flex:none;padding-top:calc(10px + env(safe-area-inset-top, 0px))}
.toc-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* 横の“グラグラ”を止める（2026-09-24 ユーザー「iPhoneで左右に動かすとグラグラ、パソコンでも白い余白が見える」）。
   ページ自体は横に引っぱられないようにし、横スクロールする部品（新着記事のカード列・スライダー・表）は
   端まで来てもページに動きを渡さない（スクロールの連鎖を止める） */
html,body{overscroll-behavior-x:none}
.news-grid,.hslider,.hslider-track,.art-news .news-grid,.mega-links,.art-body table,.wp-block-table,.tablepress-wrap{overscroll-behavior-x:contain}
.toc-foot{flex:none}
html.sf-toc-lock,html.sf-toc-lock body{overflow:hidden}
/* ログイン中に出る WordPress の管理バー（上32px・782px以下は46px）の下から目次を始める。
   管理バーが目次の「目次」「×」に重なって見切れていた（2026-09-22 ユーザーのスクリーンショットで判明。一般の閲覧者には出ない） */
body.admin-bar .toc{top:32px}
@media screen and (max-width:782px){ body.admin-bar .toc{top:46px} }
/* 固定ページの目次の飛び先（H2 が無いページで、動画の見出しなどに振った chapter-v1…）。ヘッダーの下で止める */
.art-body [id^="chapter-v"]{scroll-margin-top:calc(var(--stick) + 16px)}
/* ── 協力企業（固定ページ /cooperation/ の ul.cooperation。19社のロゴ）2026-09-22 ─────────
   箇条書きで縦に1列だったものを、白いカードを横に並べる形に（PC 4列／狭い幅 3列／スマホ 2列）。
   ロゴは高さをそろえ、縦横比のまま中央に置く */
.art-body ul.cooperation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:8px 0 22px;padding:0;list-style:none}
.art-body ul.cooperation > li{margin:0;padding:0;background:none;border:0}
.art-body ul.cooperation > li::before,.art-body ul.cooperation > li::marker{content:none}
.art-body ul.cooperation > li > a{display:flex;align-items:center;justify-content:center;height:100px;padding:14px 16px;box-sizing:border-box;
 background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.art-body ul.cooperation > li > a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--yellow)}
.art-body ul.cooperation img{display:block;width:auto!important;height:auto;max-width:100%;max-height:62px;margin:0;float:none;
 border:0;border-radius:0;box-shadow:none;background:none;object-fit:contain}
@media(max-width:1100px){ .art-body ul.cooperation{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:759px){
  .art-body ul.cooperation{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .art-body ul.cooperation > li > a{height:78px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink)}
  .art-body ul.cooperation img{max-height:46px}
}
/* ── SNSでシェア（記事の最後。2026-09-22）── 黒枠のカードに、各SNSの色の丸いボタン。共有先は旧サイトと同じ4つ */
.art-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:30px 0 0;padding:16px 20px;background:#fff;
 border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.art-share .share-lb{margin:0;font-size:15px;font-weight:900}
.art-share ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.art-share li{margin:0;padding:0}
.art-share li::before{content:none}
.art-share a{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 18px;border:2px solid var(--ink);border-radius:99px;
 color:#fff;font-size:13.5px;font-weight:900;line-height:1;text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.art-share a:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--ink)}
.art-share svg{width:16px;height:16px;fill:currentColor;display:block;flex:none}
.art-share a b{font-family:Inter,sans-serif;font-size:14px;font-weight:900;letter-spacing:-.02em}
.art-share .sh-x{background:#000}
.art-share .sh-fb{background:#1877f2}
.art-share .sh-hb{background:#00a4de}
.art-share .sh-line{background:#06c755}
/* ── 新着記事（記事の最後・開閉式。2026-09-22）── 帯を押すと、トップページと同じ横スクロールのカードが開く */
.art-news{margin:30px 0 0;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);overflow:hidden}
.art-news-tg{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:18px 24px;border:0;background:#fff;color:var(--ink);
 font:inherit;text-align:left;cursor:pointer}
.art-news-tg:hover{background:var(--cream)}
.art-news-h{display:flex;flex-direction:column}
.art-news-h small{font-family:Inter,sans-serif;font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--blue);text-transform:uppercase}
.art-news-h b{font-size:20px;font-weight:900;line-height:1.4}
.art-news-tg i{position:relative;flex:none;margin-left:auto;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}
.art-news-tg i::before,.art-news-tg i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;margin:-1.5px 0 0 -7px;background:var(--ink);border-radius:2px;transition:transform .2s}
.art-news-tg i::after{transform:rotate(90deg)}
.art-news.is-open .art-news-tg i::after{transform:rotate(0)}
.art-news-body{padding:4px 24px 24px;border-top:2px dashed #d8d3c4}
.art-news-body .news{margin:0;padding:0;border:0;box-shadow:none;background:none}
.art-news-body .news > .eyebrow,.art-news-body .news > h2{display:none}
.art-news-body .news-scroll{margin-top:16px}
/* 「このような記事も読まれています」（2026-09-22）。新着記事と同じ枠とカードで、開閉はしない（帯は押せる見た目にしない） */
.art-related .art-news-tg{cursor:default}
.art-related .art-news-tg:hover{background:#fff}
@media(max-width:759px){
  .art-share{padding:14px}
  .art-share a{height:38px;padding:0 14px}
  .art-news{border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
  .art-news-tg{padding:14px 16px}
  .art-news-h b{font-size:17px}
  .art-news-body{padding:4px 14px 18px}
}
/* ── 記事の帯：動画の無い記事は動画の位置にアイキャッチ（2026-09-22 ユーザー決定：B案）──
   枠・影・並びは動画と同じ（.vwrap）。アイキャッチは正方形に近いものが多いので、16:9の枠に切らずに置き（.vimg-fg）、
   左右の余白は同じ画像を拡大してぼかしたもの（.vimg-bg）で埋める */
.vhero.vimg .vwrap{position:relative;aspect-ratio:16/9}
.vhero .vwrap .vimg-bg,.vhero .vwrap .vimg-fg{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;margin:0;max-width:none;padding:0}
.vhero .vwrap .vimg-bg{object-fit:cover;filter:blur(22px) brightness(.7);transform:scale(1.2)}
.vhero .vwrap .vimg-fg{object-fit:contain}
/* ── 一覧の「もっと見る」（2026-09-22 ユーザー「多い場合は、さらに読むみたいなボタンで」）──
   一覧は30本ずつ。黄色の丸いボタン（無料体験のボタンと同じ太枠＋影）に、残りの本数を小さく添える */
.arc-more{display:flex;justify-content:center;margin:30px 0 0}
.arc-more-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 30px;background:var(--yellow);color:var(--ink)!important;
 border:3px solid var(--ink);border-radius:99px;box-shadow:4px 4px 0 var(--ink);font-size:16px;font-weight:900;text-decoration:none!important;
 transition:transform .15s,box-shadow .15s}
.arc-more-btn small{font-size:12.5px;font-weight:800;color:#5c5a52}
.arc-more-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.arc-more-btn.is-loading{opacity:.6;pointer-events:none}
.arc-more-btn.is-loading::after{content:"";width:16px;height:16px;border:3px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:arcspin .7s linear infinite}
@keyframes arcspin{to{transform:rotate(360deg)}}
.arc-first{text-align:center;margin:18px 0 0;font-size:14px;font-weight:800}
.arc-first a{color:var(--blue)}
/* ── 前後の記事（記事の最後。2026-09-22 ユーザー「前後の記事は必要」）──────────
   記事ごとに指定した前後の記事（ACF pager_prev／pager_next）を、2枚のカードで左右に。左＝前の記事、右＝次の記事。
   片方しか無いときも位置は変えない（空の側は何も出さない）。スマホでは縦に並べる */
.art-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:30px 0 0}
.art-pager a{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;background:#fff;border:3px solid var(--ink);border-radius:16px;
 box-shadow:5px 5px 0 var(--ink);color:var(--ink);text-decoration:none!important;transition:transform .15s,box-shadow .15s}
.art-pager a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.art-pager .pg-next{flex-direction:row-reverse;text-align:right}
.art-pager .pg-th{flex:none;width:96px;aspect-ratio:16/9;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff}
.art-pager .pg-th img{display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;max-width:none;max-height:none;object-fit:contain}
.art-pager .pg-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.art-pager .pg-tx small{font-size:12px;font-weight:900;color:var(--blue);letter-spacing:.02em}
.art-pager .pg-tx b{font-size:14px;font-weight:900;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:759px){
  .art-pager{grid-template-columns:minmax(0,1fr);gap:10px}
  .art-pager .pg-empty{display:none}
  .art-pager a{box-shadow:4px 4px 0 var(--ink)}
  .art-pager .pg-th{width:80px}
}
/* ── 求人・防音物件・セールの記事（専用テンプレートの中身。2026-09-22）───────────────
   中身は旧テンプレートのHTMLのまま（single-recruitment.php など）。旧CSSの代わりに、会社概要の表と同じ系統の見た目を当てる。
   本文の外で書かれた見出し（募集要項・物件のキャッチ・セールの製品名）は、黄色の下線で区切る */
.art-body:is(.recruit,.sale) > h2,.art-body .property__heading{margin:0 0 20px;padding:0 0 10px;border-bottom:4px solid var(--yellow);
 font-size:26px;font-weight:900;line-height:1.5;letter-spacing:-.02em;background:none;color:var(--ink)}
.art-body .property__heading--2{font-size:22px;margin-top:6px}
.art-body .applReqItem__header{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;align-items:start;margin:0 0 26px}
.art-body .applReqItem__images{display:flex;flex-wrap:wrap;gap:8px}
.art-body .applReqItem__image{flex:0 0 calc(50% - 4px);display:block}
.art-body .applReqItem__image:first-child{flex-basis:100%}
.art-body .applReqItem__image img{display:block;width:100%;height:auto;max-height:none;margin:0;border:2px solid var(--ink);border-radius:12px;box-shadow:none;background:#fff}
.art-body .applReqItem__table{border-top:2px solid var(--ink);margin:0 0 8px}
.art-body .applReqItem__list{display:grid;grid-template-columns:170px minmax(0,1fr);margin:0;padding:0;border-bottom:1px solid #d8d3c4}
.art-body .applReqItem__label{margin:0;padding:12px 14px;background:var(--cream);font-size:14.5px;font-weight:900;line-height:1.7;color:var(--ink)}
.art-body .applReqItem__label i{color:var(--blue);margin-right:4px}
.art-body .applReqItem__value{margin:0;padding:12px 16px;font-size:15.5px;line-height:1.85;min-width:0;overflow-wrap:anywhere}
.art-body .applReqItem__body{margin:26px 0 0}
.art-body .applReqItem__textbox{background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;line-height:1.9;margin:0 0 8px}
.art-body .joboffer{margin:28px 0 0;text-align:center}
.art-body .joboffer img{display:inline-block;width:auto;max-width:100%;height:auto;margin:0;border:0;border-radius:12px;box-shadow:none}
.art-body .property__section + .property__section{margin-top:34px}
.art-body .property__header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:0 0 20px;
 padding:16px 18px;background:var(--cream);border:2px solid var(--ink);border-radius:14px}
.art-body .property__summary-price{font-family:Inter,sans-serif;font-size:26px;font-weight:900;color:var(--coral);margin-right:6px}
.art-body .property__summary-price2{font-size:14px;color:var(--sub)}
.art-body .property__summary-address{display:block;margin-top:4px;font-size:15px;font-weight:700}
.art-body .property__btn{display:inline-flex;align-items:center;gap:6px;padding:12px 24px;background:var(--yellow);color:var(--ink)!important;
 border:3px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink);font-weight:900;text-decoration:none!important;white-space:nowrap}
.art-body .property__btn small{font-size:12px;font-weight:700}
.art-body .property__cta.fixed{position:fixed;z-index:120;top:calc(var(--stick) + 10px);left:50%;transform:translateX(-50%)}
.art-body .property__description{background:#fff;border:2px solid #d8d3c4;border-radius:12px;padding:16px 18px}
.art-body .property__table{table-layout:fixed;border-top:2px solid var(--ink)!important}
.art-body .property__table th{width:18%;font-weight:900!important;vertical-align:top}
.art-body .property__table td{vertical-align:top;overflow-wrap:anywhere}
.art-body .property__table .em{color:var(--coral)!important;font-weight:900}
.art-body .property__map{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:2px solid var(--ink);border-radius:99px;background:#fff;
 color:var(--ink)!important;font-size:13.5px;font-weight:900;text-decoration:none!important}
.art-body .property__map:hover,.art-body .property__btn:hover{background:var(--yellow)}
.art-body .sale_img{display:block;margin:0 auto 18px}
.art-body .sale_term{margin:0 0 12px}
.art-body .sale_term span{display:inline-block;background:var(--coral);color:#fff;font-weight:900;padding:4px 16px;border-radius:99px}
.art-body .sale_term.is-ended span{background:#8b877c}
/* セールの囲み（sf_renewal_sale_panel。2026-09-23 ユーザー「購買欲をあげるデザインに」）。
   白いカード＋黒枠＋影（タグから探すと同じ形）、割引率の丸いバッジ、ボタンはお申し込みフォームの送信ボタンと同じ形（黄色・黒枠・下に影） */
.art-body .sale-panel{position:relative;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);
 padding:22px 26px 18px;margin:0 0 34px}
.art-body .sale-panel.is-bottom{margin:34px 0}
.art-body .sp-top{display:flex;align-items:center;justify-content:center;gap:22px}
.art-body .sp-badge{flex:0 0 auto;width:112px;height:112px;border-radius:50%;background:var(--coral);color:#fff;border:3px solid var(--ink);
 display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-weight:900;transform:rotate(-6deg);box-shadow:3px 4px 0 var(--ink)}
.art-body .sp-badge b{font-size:46px;letter-spacing:-.03em;font-family:Oswald,var(--font,sans-serif)}
.art-body .sp-badge small{font-size:15px;margin-top:3px;letter-spacing:.02em}
.art-body .sp-badge i{font-style:normal;font-size:13px;margin-bottom:2px}
.art-body .sp-badge.is-free{background:var(--yellow);color:var(--ink)}
.art-body .sp-badge.is-free b{font-size:30px;font-family:inherit}
.art-body .sp-info{min-width:0}
.art-body .sp-kicker{margin:0!important;font-size:18px;font-weight:900;color:var(--coral);letter-spacing:.06em;line-height:1.4}
.art-body .sp-term{margin:4px 0 0!important;font-size:21px;font-weight:900;line-height:1.5}
.art-body .sp-left{display:inline-block;margin-left:10px;background:var(--ink);color:var(--yellow);font-size:17px;border-radius:99px;padding:3px 15px;vertical-align:2px;white-space:nowrap;line-height:1.5}
.art-body .sp-left.is-soon{background:var(--coral);color:#fff}
.art-body .sp-left[hidden]{display:none}
.art-body .sp-btn{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:520px;margin:20px auto 0;background:var(--yellow);color:var(--ink)!important;
 border:3px solid var(--ink);border-radius:99px;box-shadow:0 6px 0 var(--ink);padding:14px 24px 12px;font-size:19px;font-weight:900;line-height:1.4;
 text-align:center;text-decoration:none!important;transition:transform .1s,box-shadow .1s}
.art-body .sp-btn i{font-style:normal;margin-left:8px}
.art-body .sp-btn small{font-size:12px;font-weight:700;color:#6f6f66}
.art-body .sp-btn:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.art-body .sale-panel .p_ads__sponsored{display:table;margin:16px auto 0}
/* 価格：通常価格（取り消し線）→ セール価格（大きなコーラル）。中央ぞろえ（2026-09-23 ユーザー） */
.art-body .sp-price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:4px 18px;margin:20px 0 0!important;padding:14px 12px 10px;
 background:var(--cream);border-radius:16px;line-height:1.1}
.art-body .sp-price small{display:block;font-size:12.5px;font-weight:900;color:var(--sub);margin:0 0 6px;letter-spacing:.04em}
.art-body .sp-reg{text-align:center}
.art-body .sp-reg s{font-size:22px;font-weight:800;color:var(--sub);text-decoration-thickness:2px}
.art-body .sp-arrow{font-size:26px;font-weight:900;color:var(--ink);padding-bottom:4px}
.art-body .sp-sale{text-align:center}
.art-body .sp-sale small{color:var(--coral)}
.art-body .sp-sale b{font-size:42px;font-weight:900;color:var(--coral);letter-spacing:-.01em;font-family:Oswald,var(--font,sans-serif)}
/* 帯の分類名の横の割引率（single-sale.php が $GLOBALS['sf_renewal_hero_badge'] に入れる） */
.vhero .vmeta .sf-sale-chip{background:var(--coral);color:#fff;border-radius:999px;padding:3px 12px;font-weight:900}
.art-body .sale-panel.is-ended{box-shadow:8px 8px 0 #c9c5ba;border-color:#8b877c}
.art-body .sale-panel.is-ended .sp-badge{background:#8b877c;color:#fff;border-color:#6f6c63;box-shadow:none}
.art-body .sale-panel.is-ended .sp-kicker{color:var(--sub)}
.art-body .sale-panel.is-ended .sp-term{color:var(--sub);font-size:17px}
.art-body .sale-panel.is-ended .sp-btn{background:#fff;box-shadow:0 5px 0 #8b877c;border-color:#8b877c}
@media(max-width:559px){
  .art-body .sale-panel{padding:18px 16px 16px;box-shadow:6px 6px 0 var(--ink);border-radius:18px}
  .art-body .sp-top{gap:14px}
  .art-body .sp-badge{width:88px;height:88px}
  .art-body .sp-badge b{font-size:35px}
  .art-body .sp-badge small{font-size:12.5px}
  .art-body .sp-badge.is-free b{font-size:24px}
  .art-body .sp-term{font-size:17px}
  .art-body .sp-left{margin:6px 0 0;display:table;font-size:15px}
  .art-body .sp-kicker{font-size:16px}
  .art-body .sp-price{gap:2px 12px;padding:12px 8px 8px}
  .art-body .sp-reg s{font-size:18px}
  .art-body .sp-arrow{font-size:20px}
  .art-body .sp-sale b{font-size:34px}
  .art-body .sp-btn{font-size:17px;padding:13px 16px 11px}
}
.art-body .sale_dtl{background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:12px 16px;margin:0 0 18px;overflow-wrap:anywhere}
@media(max-width:759px){
  .art-body:is(.recruit,.sale) > h2,.art-body .property__heading{font-size:21px}
  .art-body .applReqItem__header{grid-template-columns:minmax(0,1fr)}
  .art-body .applReqItem__images{max-width:320px}
  .art-body .applReqItem__list{grid-template-columns:minmax(0,1fr)}
  .art-body .applReqItem__label{padding:10px 12px}
  .art-body .applReqItem__value{padding:10px 12px 14px}
  .art-body .property__table th,.art-body .property__table td{display:block;width:auto}
}
/* 用語集一覧に戻る */
.backpage{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:99px;
 padding:10px 22px;font-size:14px;font-weight:900;text-decoration:none!important;color:var(--ink);margin:0 0 22px}
.backpage:hover{background:var(--yellow)}
.backpage.foot{margin:22px 0 0}
/* ── 吹き出し（[fukidashi-l] 457記事／[fukidashi-r] 433記事）。デザイン案の .fuki と同じ見た目にする ──────
   テーマの出力は <div class="fukidashi fukidashi-l"><div class="f-icon"><img><p>名前</p></div>
   <div class="balloon"><div class="f-text" style="color:…;background-color:…"><span class="arrow"></span><p>本文</p></div></div></div>。
   色は吹き出しごとに style で直接書かれているので、!important でデザイン案の2色（左＝ベージュ／右＝淡い水色）にそろえる（2026-09-20 ユーザー指示） */
.art-body .fukidashi{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px}
.art-body .fukidashi-r{flex-direction:row-reverse}
.art-body .fukidashi .f-icon{flex:none;width:58px;text-align:center;margin:0;padding:0}
.art-body .fukidashi .f-icon img{display:block;width:58px;height:58px;border-radius:50%;object-fit:cover;
 border:2px solid var(--ink);background:#e9e5d8;margin:0;padding:0;box-shadow:none;max-width:none;max-height:none}
.art-body .fukidashi .f-icon p{margin:4px 0 0;font-size:11px;font-weight:900;line-height:1.4;color:var(--sub)}
.art-body .fukidashi .balloon{flex:1;min-width:0;margin:0;padding:0}
.art-body .fukidashi .f-text{position:relative;background:#f5f3ec!important;color:var(--ink)!important;
 border:2px solid var(--ink);border-radius:14px;padding:11px 15px;margin:0}
.art-body .fukidashi-r .f-text{background:var(--sky-soft)!important}
.art-body .fukidashi .f-text p{margin:0;font-size:15px;line-height:1.85;color:inherit}
.art-body .fukidashi .f-text p + p{margin-top:10px}
/* デザイン案の吹き出しは三角の尻尾を付けない（丸い箱だけ） */
.art-body .fukidashi .arrow{display:none!important}
@media(max-width:759px){
  .art-body .fukidashi{gap:9px}
  .art-body .fukidashi .f-icon,.art-body .fukidashi .f-icon img{width:46px}
  .art-body .fukidashi .f-icon img{height:46px}
  .art-body .fukidashi .f-text p{font-size:14.5px}
}
/* ── 本文の内部リンクカード（1,378記事）。デザイン案の .nlink と同じ見た目にする ──────────
   テーマの出力は <div class="link"><ul><li><a><figure><img></figure><h3>題名</h3><p>抜粋</p></a></li></ul></div>。
   題名と抜粋が <a> の直下に並ぶ形なので、グリッドで「左＝サムネイル／右＝題名・抜粋」に組む（2026-09-20 ユーザー指摘） */
.art-body .link{margin:0 0 22px}
.art-body .link ul{margin:0;padding:0;list-style:none}
.art-body .link li{margin:0 0 14px;padding:0;list-style:none}
.art-body .link li:last-child{margin-bottom:0}
.art-body .link li::before{content:none}
.art-body .link li > a{display:grid;grid-template-columns:120px minmax(0,1fr);
 grid-template-areas:"th lb" "th tt" "th ex" "th go";
 align-content:center;column-gap:18px;background:#fff;border:3px solid var(--ink);border-radius:16px;
 box-shadow:5px 5px 0 var(--ink);padding:12px 18px 12px 12px;margin:0;
 text-decoration:none!important;color:var(--ink);transition:transform .16s}
.art-body .link li > a:hover{transform:translateY(-2px);background:var(--cream)}
.art-body .link li > a > figure{grid-area:th;align-self:center;flex:none;width:120px;aspect-ratio:1/1;margin:0;padding:0;
 border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#f1efe6}
.art-body .link li > a > figure img{display:block;width:100%;height:100%;object-fit:cover;margin:0;
 border:0;border-radius:0;box-shadow:none;max-width:none;max-height:none}
.art-body .link li > a > h3{grid-area:tt;align-self:end;margin:0;padding:0;font-size:17px;font-weight:900;
 line-height:1.6;color:var(--blue);text-decoration:none!important}
.art-body .link li > a > h3::before{content:none}
.art-body .link li > a > p{grid-area:ex;align-self:start;margin:4px 0 0;font-size:13.5px;line-height:1.8;
 color:var(--sub);text-decoration:none!important;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
/* 「関連記事」の札と「記事を読む →」は、テーマの出力（figure・h3・p だけ）に無いのでCSSで足す（2026-09-24 ユーザー指摘） */
.art-body .link li > a::before{grid-area:lb;content:"関連記事";justify-self:start;align-self:end;
 background:var(--sky);color:#fff;border-radius:6px;padding:2px 9px;margin:0 0 6px;
 font-size:11.5px;font-weight:900;letter-spacing:.02em;line-height:1.7}
.art-body .link li > a::after{grid-area:go;content:"記事を読む →";justify-self:end;align-self:start;
 margin:4px 0 0;font-size:13px;font-weight:900;color:var(--blue)}
@media(max-width:759px){
  .art-body .link li > a{grid-template-columns:84px minmax(0,1fr);column-gap:12px}
  .art-body .link li > a > figure{width:84px}
  .art-body .link li > a > h3{font-size:15px;align-self:center}
  .art-body .link li > a > p{display:none}
  .art-body .link li > a::before{margin-bottom:4px}
  .art-body .link li > a::after{font-size:12px}
}
/* ── A/B音源比較（[audiocomparison]：33記事。プラグイン audio-comparison）──────────
   デザイン案の .abcmp に合わせて、サンプル音源と同じクリーム地の丸い1行にする。
   プラグインが !important 付きのCSSをページに直接書くため、body を足して優先度で上回る */
body .art-body .audio-comparison{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 background:var(--cream);border:3px solid var(--ink);border-radius:99px;box-shadow:5px 5px 0 var(--ink);
 padding:9px 20px 9px 9px;margin:0 0 22px}
body .art-body .audio-comparison button{font-family:inherit;cursor:pointer;margin:0!important;flex:none}
body .art-body .audio-comparison-play-stop{width:46px!important;min-width:46px!important;height:46px;
 padding:0!important;line-height:1!important;border-radius:50%!important;background-color:var(--coral)!important;
 color:#fff!important;border:2px solid var(--ink)!important;font-size:11px!important;font-weight:900!important}
body .art-body .audio-comparison-play-a,body .art-body .audio-comparison-play-b,
body .art-body .audio-comparison-play-c{min-width:58px!important;height:38px;padding:0 16px!important;
 line-height:1!important;border-radius:99px!important;background-color:#fff!important;color:var(--ink)!important;
 border:2px solid var(--ink)!important;font-size:14px!important;font-weight:900!important}
body .art-body .audio-comparison-button-playing{background-color:var(--sky)!important;color:#fff!important}
body .art-body .audio-comparison-label{margin-left:auto!important;width:auto!important;
 color:var(--sub)!important;font-size:12.5px!important;font-weight:800}
/* SoundCloud の埋め込み（39記事）。本文の iframe は動画向けに16:9で出しているので、ここだけ高さを戻す。
   遅延読み込み（a3-lazy-load）で src がまだ空のときもあるため、data-src でも当てる */
.art-body iframe[src*="soundcloud"],.art-body iframe[data-src*="soundcloud"]{aspect-ratio:auto;width:100%;max-width:100%;
 height:166px;max-height:none;border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);
 background:#fff;margin:0 auto 22px}
/* ── 記事内の表（2026-09-18 ユーザー決定：A案の比較表の色味で統一）──────────
   既存記事は表に色を直接書いている（例：NOVAの価格表＝見出し青・1列目オレンジ）。
   記事データは変えず、ここで上書きする。見出し行＝淡いベージュ、本体＝白、罫線＝#ddd 1px */
.art-body table{border-collapse:collapse!important;width:100%!important;border:1px solid #ddd!important;background:#fff!important}
.art-body table th{background-color:#f5f3ec!important;background-image:none!important;color:var(--ink)!important;border:1px solid #ddd!important;font-weight:900!important}
.art-body table td{background-color:#fff!important;background-image:none!important;color:var(--ink)!important;border:1px solid #ddd!important}
.art-body table th *,.art-body table td *{color:inherit!important}
/* 比較表（class="compare"）の ◯／×／— だけは上の色の統一から外す（2026-09-25 ユーザー決定）。
   上の !important がすべての表に当たるため、タグ見本（/media-article-a/）と同じ色にここで戻す */
.art-body table.compare td.ok{color:var(--blue)!important}
.art-body table.compare td.ng{color:var(--coral)!important}
.art-body table.compare td.na{color:var(--sub)!important}

/* 旧CSSを読み込まないので、基本の指定をここで持つ */
*,*::before,*::after{box-sizing:border-box}
img,video,iframe{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit}
:root{
  --ink:#1e1e1e; --sub:#6f6f66; --cream:#fdf8ec; --paper:#fff;
  --blue:#0878b2; --sky:#5cb3e4; --sky-soft:#e2f2fb;
  --coral:#ff6b5e; --yellow:#ffe600; --navy:#1f2d44;
  color-scheme:light;
  
  --stick:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
 font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16.5px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit}
.eyebrow{font-family:Inter,sans-serif;font-size:14px;font-weight:800;letter-spacing:.2em;color:var(--blue);text-transform:uppercase;margin:0}
.site-head{background:#fff;position:relative;z-index:100;border-bottom:3px solid var(--ink)}
.head-top{background:#fff;border-bottom:1px solid rgba(0,0,0,.12);position:relative;z-index:2}
.head-top > .in{max-width:1640px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;flex-shrink:0}
.brand img{display:block;height:40px;width:auto}
.brand-label{display:none;font-family:Inter,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.22em;
 color:var(--sub);white-space:nowrap;padding-left:2px}
.sf-sns{display:flex;gap:7px;flex:none}
.sf-sns a{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
 background:rgba(0,0,0,.07);color:var(--ink);text-decoration:none;transition:background .15s}
.sf-sns a:hover{background:var(--sky);color:#fff}
.sf-sns svg{width:15px;height:15px;fill:currentColor;display:block}
.head-search-btn{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;padding:0;margin-left:auto;
 border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s}
.head-search-btn svg{width:19px;height:19px;fill:currentColor;display:block}
.head-search-btn:hover,.head-search-btn[aria-expanded="true"]{background:var(--yellow)}
.head-cta{flex:none;background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:99px;
 padding:16px 24px;font-size:15.2px;font-weight:900;text-decoration:none;white-space:nowrap;line-height:1}
.head-cta:hover{background:var(--yellow);color:var(--ink)}
.head-cta .s{display:none}
.head-main{max-width:1640px;margin:0 auto;padding:7px 20px;display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px}
.gnav{display:none;gap:6px;font-size:15.2px;font-weight:900}
@media(min-width:760px){
.gnav{display:flex}
}
.gnav button{font:inherit;font-size:inherit;font-weight:900;color:var(--ink);background:transparent;border:0;cursor:pointer;
 padding:11px 14px;border-radius:8px;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.gnav button span{line-height:1.22;white-space:nowrap}
@media(min-width:940px) and (max-width:1099px){
.gnav{gap:0}
.gnav button{padding:11px 9px;gap:4px}
 }
@media(min-width:760px) and (max-width:939px){
.head-main{padding:7px 12px}
.gnav{gap:0;font-size:13.5px}
.gnav button{padding:11px 6px;gap:4px}
 }
.sf-sns-sp{display:none}
.hsearch{display:flex;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:99px;overflow:hidden;transition:box-shadow .15s}
.hsearch:focus-within{box-shadow:0 0 0 3px rgba(92,179,228,.6)}
.hsearch input{border:0;outline:0;font:inherit;background:transparent;color:var(--ink);width:auto;flex:1 1 auto;min-width:0}
.hsearch input::placeholder{color:#9a9a92}
.hsearch button{flex:none;border:0;background:var(--yellow);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.hsearch button svg{fill:currentColor;display:block}
.hsearch-panel{position:absolute;left:0;right:0;top:100%;z-index:120;background:#fff;
 border-bottom:3px solid var(--ink);box-shadow:0 18px 34px rgba(0,0,0,.16)}
.hsearch-panel[hidden]{display:none}
.site-head.is-search .head-main{visibility:hidden}
.hsearch-panel .in{max-width:1640px;margin:0 auto;padding:20px}
.hsearch-panel .hsearch{height:54px;width:100%}
.hsearch-panel .mg{display:flex;align-items:center;flex:none;margin-left:18px;color:#8f8f88}
.hsearch-panel .mg svg{width:20px;height:20px;fill:currentColor;display:block}
.hsearch-panel .hsearch input{font-size:17px;padding:0 14px}
.hsearch-panel .hsearch button{height:50px;padding:0 26px}
.hsearch-panel .hsearch button svg{width:20px;height:20px}
@media(max-width:1023px){
.brand img{height:32px}
.head-cta{padding:14px 20px;font-size:14.5px}
 }
@media(max-width:899px){
.head-cta .l{display:none}
.head-cta .s{display:inline}
 }
@media(max-width:759px){
.head-top > .in{padding:10px 12px;gap:8px}
.brand img{height:24px}
.head-top .sf-sns{display:none}
.head-search-btn{width:36px;height:36px}
.head-search-btn svg{width:17px;height:17px}
.head-cta{padding:11px 15px;font-size:13.5px;border-width:2px}
.head-main{justify-content:space-between;padding:7px 12px;min-height:54px}
.sf-sns-sp{display:flex;gap:5px}
.sf-sns-sp a{width:30px;height:30px}
.hsearch-panel .in{padding:14px 12px}
.hsearch-panel .hsearch{height:46px}
.hsearch-panel .mg{margin-left:12px}
.hsearch-panel .hsearch input{font-size:16px;padding:0 10px}
.hsearch-panel .hsearch button{height:42px;padding:0 18px}

}
@media(max-width:399px){
.brand img{height:21px}
.head-cta{padding:10px 12px}
.sf-sns-sp{gap:4px}
.sf-sns-sp a{width:28px;height:28px}
 }
@media(max-width:349px){
.brand img{height:18px}
.head-top > .in{gap:6px}
.head-cta{padding:10px 9px;font-size:13px}
 }
.gnav button svg{width:10px;height:10px;fill:currentColor;opacity:.6;transition:transform .18s}
.gnav button:hover{color:var(--blue)}
.gnav button[aria-expanded="true"]{background:var(--yellow);color:var(--ink)}
.gnav button[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1}
.gnav > a{text-decoration:none;color:var(--ink);padding:8px 13px;border-radius:8px}
.gnav > a:hover{color:var(--blue)}
@media(min-width:1280px){
.gnav{gap:16px;font-size:17px}
.gnav button{padding:12px 20px;gap:7px}
.gnav button svg{width:11px;height:11px}
.gnav > a{padding:10px 18px}

}
@media(min-width:1600px){
.gnav{gap:26px;font-size:17.5px}
.gnav button{padding:12px 24px}
 }
@media(min-width:1100px){
.head-main{max-width:1400px}
.gnav{width:100%;gap:0;justify-content:space-between}
.gnav > *{flex:1 1 0;min-width:0;justify-content:center}
.gnav > *:not(:first-child){border-left:1px solid #d8d3c4}
.gnav > *:first-child{border-left:1px solid #d8d3c4}
.gnav > *:last-child{border-right:1px solid #d8d3c4}

}
.mega{position:absolute;left:0;right:0;top:100%;background:#f3f8ff;box-shadow:0 18px 55px rgba(16,33,63,.24);z-index:120;
 max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}
.mega[hidden]{display:none}
.mega-in{width:min(calc(var(--cols,4) * 300px + (var(--cols,4) - 1) * 16px),100% - 40px);margin:0 auto;padding:28px 0}
.mega-in.is-cols{width:min(1400px,100% - 40px)}
.mega-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px}
.mega-head div{display:grid;justify-items:start;line-height:1.35}
.mega-head small,.mega-trial small{font-family:Inter,sans-serif;font-size:10.9px;font-weight:900;letter-spacing:.18em;color:var(--blue)}
.mega-head strong{font-size:24px;font-weight:900;color:#10213f}
.mega-close{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;background:#fff;
 border:2px solid var(--ink);color:var(--ink);font-size:23px;line-height:1;cursor:pointer}
.mega-close:hover{background:var(--yellow)}
.mega-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:16px}
.is-cols .mega-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.mega-col{display:grid;gap:14px;align-content:start;min-width:0}
@media(max-width:1199px){
.mega-grid,.is-cols .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-in{width:calc(100% - 40px)}
 }
.mega-in.is-cols{padding:20px 0}
.is-cols .mega-head{margin-bottom:14px}
.is-cols .mega-group{padding:14px 16px 8px}
.is-cols .mega-label{margin-bottom:8px}
.is-cols .mega-links a{padding:7px 2px}
.mega-group{min-width:0;background:#fff;border:1px solid #c7d8eb;border-radius:20px;padding:20px}
.mega-label{display:flex;align-items:center;gap:9px;margin:0 0 13px;color:#10213f;font-size:16px;font-weight:900;line-height:1.35}
.mega-label span,.sfdrawer .dgrp p span{flex:none;display:inline-grid;place-items:center;width:31px;height:31px;border-radius:9px;
 background:#dff3ff;color:var(--blue);font-family:Inter,sans-serif;font-size:10.9px;font-weight:900}
.mega-links{display:grid}
.mega-links a,.sfdrawer .dgrp a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 2px;
 border-bottom:1px solid #e1e8f0;color:var(--ink);font-size:13.5px;font-weight:800;line-height:1.5;text-decoration:none;
 transition:color .18s,padding-left .18s}
.mega-links a:hover,.mega-links a:focus-visible{padding-left:7px;color:var(--blue);outline:none}
.mega-links a i,.sfdrawer .dgrp a i{font-style:normal;min-width:0}
.mega-links a > span,.sfdrawer .dgrp a > span{flex:none;color:var(--blue)}
.mega-links .dawt,.sfdrawer .dgrp .dawt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 2px;margin:0;
 background:transparent;border:0;border-bottom:1px solid #e1e8f0;color:var(--ink);font:inherit;font-size:13.5px;font-weight:800;
 line-height:1.5;text-align:left;cursor:pointer;transition:color .18s}
.mega-links .dawt img,.sfdrawer .dgrp .dawt img{flex:none;width:28px;height:28px;border-radius:7px;border:1px solid #c7d8eb;background:#fff;object-fit:contain;display:block}
.mega-links .dawt i,.sfdrawer .dgrp .dawt i{font-style:normal;min-width:0;margin-right:auto}
.dawt .chev{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid #c7d8eb;border-radius:8px;color:var(--blue);transition:background .18s}
.dawt .chev svg{width:9px;height:9px;fill:currentColor;transition:transform .18s}
.dawt:hover,.dawt:focus-visible{color:var(--blue);outline:none}
.dawt:hover .chev{background:#dff3ff}
.dawt[aria-expanded="true"]{color:var(--blue)}
.dawt[aria-expanded="true"] .chev svg{transform:rotate(180deg)}
.mega-links .row,.sfdrawer .dgrp .row{display:flex;align-items:center;border-bottom:1px solid #e1e8f0}
.mega-links .row > a,.sfdrawer .dgrp .row > a{flex:1;min-width:0;border-bottom:0}
.subt{flex:none;width:30px;height:30px;margin-left:4px;padding:0;display:grid;place-items:center;cursor:pointer;
 background:transparent;border:1px solid #c7d8eb;border-radius:8px;color:var(--blue)}
.subt svg{width:9px;height:9px;fill:currentColor;transition:transform .18s}
.subt:hover{background:#dff3ff}
.subt[aria-expanded="true"] svg{transform:rotate(180deg)}
.subs[hidden]{display:none}
.mega-links a.ico,.sfdrawer .dgrp a.ico{gap:10px}
.mega-links a.ico img,.sfdrawer .dgrp a.ico img{flex:none;width:28px;height:28px;border-radius:7px;
 border:1px solid #c7d8eb;background:#fff;object-fit:contain;display:block}
.mega-links a.ico i,.sfdrawer .dgrp a.ico i{margin-right:auto}
.mega-links a.sf-sub,.sfdrawer .dgrp a.sf-sub{position:relative;padding-left:18px;font-size:12.5px;font-weight:700;color:#4a5566}
.mega-links a.sf-sub::before,.sfdrawer .dgrp a.sf-sub::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:1px;background:#9aa7b8}
.mega-links a.sf-sub:hover{padding-left:23px}
.mega a.tel small,.sfdrawer a.tel small{display:block;font-size:11px;font-weight:700;color:var(--sub)}
.mega-actions{display:grid;grid-template-columns:minmax(0,582px);justify-content:center;margin-top:16px}
.mega-trial{display:flex;align-items:center;justify-content:center;gap:22px;padding:15px 24px;border:2px solid var(--ink);
 border-radius:999px;background:var(--coral);box-shadow:0 4px 0 var(--ink);color:#fff;font-size:16px;font-weight:900;
 line-height:1.45;text-decoration:none;transition:background-color .18s,box-shadow .18s,transform .18s}
.mega-trial span{display:grid;justify-items:center;gap:2px}
.mega-trial small{font-size:9.1px;color:rgba(255,255,255,.85)}
.mega-trial b{font-size:22px}
.mega-trial:hover,.mega-trial:focus-visible{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 var(--ink);transform:translateY(-2px)}
.mega-trial:hover small,.mega-trial:focus-visible small{color:#10213f}
@media(prefers-reduced-motion:reduce){
.mega-links a,.mega-trial{transition:none}
}
.burger{display:flex;align-items:center;gap:9px;height:44px;flex:none;padding:0 18px 0 15px;background:#fff;
 border:2px solid var(--ink);border-radius:99px;font:inherit;font-size:15px;font-weight:900;color:var(--ink);cursor:pointer}
.burger:hover{background:var(--yellow)}
.burger .bi{display:flex;flex-direction:column;gap:4px;width:19px}
.burger i{display:block;width:100%;height:2.5px;background:currentColor;border-radius:2px}
@media(min-width:760px){
.burger{display:none}
}
@media(max-width:759px){
.burger{height:40px;font-size:14px;padding:0 15px 0 13px}
 }
.sfdrawer{position:fixed;inset:0;background:#fff;z-index:300;overflow-y:auto;-webkit-overflow-scrolling:touch;
 padding:0 0 40px;display:none}
.sfdrawer.open{display:block}
.sfdrawer-top{position:sticky;top:0;background:var(--cream);display:flex;align-items:center;gap:12px;padding:12px 16px;
 border-bottom:2px solid var(--ink)}
.sfdrawer-top img{height:32px;width:auto}
.sfdrawer-top button{margin-left:auto;width:40px;height:40px;background:transparent;border:0;color:var(--ink);
 font-size:26px;line-height:1;cursor:pointer}
.sfdrawer details{border-bottom:1px solid rgba(0,0,0,.11)}
.sfdrawer summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:16px;font-weight:900;color:var(--ink);
 display:flex;align-items:center;justify-content:space-between}
.sfdrawer summary::-webkit-details-marker{display:none}
.sfdrawer summary::after{content:"＋";font-size:17px;color:var(--blue);font-weight:700}
.sfdrawer details[open] summary{color:var(--blue)}
.sfdrawer details[open] summary::after{content:"−";color:var(--blue)}
.sfdrawer .grp{display:grid;gap:10px;padding:4px 12px 14px;background:#f3f8ff}
.sfdrawer .dgrp{background:#fff;border:1px solid #c7d8eb;border-radius:16px;padding:14px 16px 8px}
.sfdrawer .dgrp p{display:flex;align-items:center;gap:9px;margin:0 0 6px;color:#10213f;font-size:15px;font-weight:900;line-height:1.35}
.sfdrawer .dgrp p span{width:28px;height:28px;border-radius:8px}
.sfdrawer .dgrp a{padding:10px 2px;font-size:14px}
.sfdrawer .dgrp a:last-child{border-bottom:0}
.sfdrawer .grp .mega-trial{margin:4px 0 2px;padding:12px 18px;gap:14px;font-size:15px}
.sfdrawer > .flat{display:block;padding:15px 18px;font-size:16px;font-weight:900;color:var(--ink);text-decoration:none;
 border-bottom:1px solid rgba(0,0,0,.11)}
.sfdrawer-cta{margin:18px;display:grid;gap:9px}
.sfdrawer-cta a{display:block;text-align:center;padding:13px;border-radius:11px;text-decoration:none;font-weight:900;font-size:14.5px}
.sfdrawer-cta .p{background:var(--coral);color:#fff}
.hero{background:#202020;color:#fff;position:relative;overflow:hidden;border-bottom:7px solid var(--yellow)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;border:5px solid rgba(255,255,255,.28)}
.hero::before{width:330px;height:330px;background:var(--blue);top:-150px;right:-90px}
.hero::after{width:180px;height:180px;background:var(--coral);left:-90px;bottom:-55px}
.hero .in{max-width:1640px;margin:0 auto;padding:38px 20px 56px;position:relative;z-index:1}
.hero h1{margin:8px 0 12px;font-size:32px;font-weight:900;letter-spacing:-.04em;line-height:1.3}
@media(min-width:900px){
.hero h1{font-size:42px}
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p{margin:0;max-width:60ch;font-size:16px;color:#d7dee8}
.pc-br{display:none}
.hero .eyebrow{color:var(--sky)}
@media(min-width:1000px){
.hero .in{display:grid;grid-template-columns:minmax(0,1080px) minmax(300px,1fr);
   gap:40px;justify-content:start;align-items:center;padding:56px 20px}
.hslider-wrap{grid-column:1}
.hero-caption{grid-column:2}
.hero p{max-width:none;font-size:16px;line-height:1.85}
.hero h1{font-size:clamp(30px,2.5vw,40px);line-height:1.25;margin-bottom:12px}
.pc-br{display:none}
.hero h1{margin-top:0}
.hero::before{width:330px;height:330px;top:-150px;right:-90px}

}
@media(max-width:999px){
.hero::before{width:240px;height:240px;top:-186px;right:-70px}
.hero::after{width:170px;height:170px;left:-86px;bottom:-95px}
.hero .in{padding-top:54px;padding-bottom:100px}

}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hero-caption{transition:opacity .26s ease}
/* 2026-09-26: 種類・タイトル・紹介文の階層を明確に。スライド内容とCTA配置は維持。 */
body.home .hero-caption{min-width:0}
body.home .hero .hc-kind{display:table;width:fit-content;max-width:100%;justify-self:start;
 padding:5px 13px;margin:0 0 16px;border-radius:6px;background:var(--sky);color:var(--ink);
 font-family:inherit;font-size:13px;font-weight:900;line-height:1.5;letter-spacing:.09em}
body.home .hero .hc-kind:empty{display:none}
body.home .hero .hc-title{font-size:clamp(25px,2vw,32px);font-weight:900;line-height:1.45;
 letter-spacing:.01em;margin:0 0 20px;text-wrap:pretty;overflow-wrap:anywhere}
body.home .hero .hc-desc{padding-left:14px;border-left:3px solid var(--sky);
 font-size:16px;line-height:1.85;color:#d0d5db;margin:0 0 20px;overflow-wrap:anywhere;text-wrap:pretty}
body.home .hero .hc-desc:empty{padding:0;border:0;margin:0}
@media(max-width:759px){
 body.home .hero .hc-kind{font-size:12px;padding:4px 11px;margin-bottom:12px}
 body.home .hero .hc-title{font-size:25px;line-height:1.45;margin-bottom:16px}
 body.home .hero .hc-desc{padding-left:11px}
}
.hc-kind{font-family:Inter,sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.16em;
 color:var(--sky);margin:0 0 10px}
.hero .hc-title{font-size:23px;font-weight:900;line-height:1.5;letter-spacing:-.02em;
 color:#fff;margin:0 0 12px;max-width:none;word-break:auto-phrase}
.hero .hc-desc{font-size:15px;line-height:1.85;color:#c9d3de;margin:0 0 18px;max-width:none}
.hc-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:800;
 color:var(--yellow);text-decoration:none}
.hc-link:hover{text-decoration:underline}
@media(max-width:999px){
.hero-caption{margin-top:20px}
 }
/* 2026-09-25: モバイルの詳細リンクは説明文の右へ。PCとスライド内容は維持。 */
@media(max-width:759px){
 body.home .hero-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
 body.home .hero-caption .hc-kind,body.home .hero-caption .hc-title{grid-column:1/-1}
 body.home .hero .hc-desc{grid-column:1;grid-row:3;margin-bottom:0}
 body.home .hero .hc-link{grid-column:2;grid-row:3;align-self:end;min-height:44px;white-space:nowrap}
 body.home .hero .in{padding-bottom:56px}
 body.home .hero::after{bottom:-125px}
}
.hslider-wrap{position:relative}
.hslider{position:relative;z-index:2;border-radius:34px;overflow:hidden;background:#111;
 border:5px solid #fff;box-shadow:16px 18px 0 0 var(--blue)}
@media(max-width:759px){
.hslider{border-radius:22px;border-width:4px;box-shadow:10px 11px 0 0 var(--blue)}

}
.hslider-track{position:relative;aspect-ratio:16/9}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.hslide.is-on{opacity:1;pointer-events:auto}
.hslide img{width:100%;height:100%;object-fit:cover;display:block}
.hslider-pr[hidden]{display:none}
.hslider-pr{position:absolute;top:11px;left:11px;z-index:4;background:rgba(0,0,0,.62);color:#fff;
 font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;
 padding:3px 8px;border-radius:99px}
.hslider-dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;
 display:flex;justify-content:center;gap:7px}
.hslider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
 background:rgba(255,255,255,.45);transition:background .15s,transform .15s}
.hslider-dots button[aria-current="true"]{background:var(--yellow);transform:scale(1.25)}
.hslider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
 width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(0,0,0,.42);color:#fff;display:grid;place-items:center}
.hslider-nav:hover{background:rgba(0,0,0,.72)}
.hslider-nav svg{width:14px;height:14px;fill:currentColor}
.hslider-nav.prev{left:9px}
.hslider-nav.next{right:9px}
@media(max-width:999px){
.hslider{margin-top:24px}
 }
.layout{max-width:1640px;margin:0 auto;padding:24px 20px 70px;display:block}
@media(min-width:1060px){
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}

}
.col-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.sec{background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);padding:24px 26px;scroll-margin-top:var(--stick)}
@media(max-width:759px){
.sec{padding:18px 12px;border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
 }
.sec img,.sec .fig,.sec iframe,.sec video{display:block;margin-left:auto;margin-right:auto;margin-bottom:22px;
 max-width:100%;max-height:600px;height:auto;
 border:2px solid #c9c5ba;border-radius:12px;box-shadow:4px 4px 0 rgba(30,30,30,.10);background:#fff}
.sec iframe,.sec video{width:100%;max-width:1067px;aspect-ratio:16/9}
.sec .num{margin:0 0 6px;font-family:Inter,sans-serif;font-size:13px;font-weight:900;letter-spacing:.2em;color:var(--blue)}
.sec h2{margin:0 0 34px;font-size:26px;font-weight:900;letter-spacing:-.035em;line-height:1.45}
.sec h2 span{background:linear-gradient(transparent 64%,var(--yellow) 64%);padding:0 4px;margin-left:-4px}
@media(min-width:900px){
.sec h2{font-size:30px}
}
.news{background:var(--sky);border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);padding:24px 26px}
.news h2{margin:6px 0 18px;font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:1.2}
@media(max-width:759px){
.news h2{font-size:30px}
}
.news .eyebrow{color:var(--navy)}
.news-scroll{position:relative}
.news-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
 padding:3px 3px 12px;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.news-grid::-webkit-scrollbar{height:9px}
.news-grid::-webkit-scrollbar-track{background:rgba(0,0,0,.12);border-radius:99px}
.news-grid::-webkit-scrollbar-thumb{background:var(--ink);border-radius:99px}
.news-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:3;
 width:42px;height:42px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);
 cursor:pointer;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);padding:0}
.news-nav:hover{background:#fff}
.news-nav[disabled]{opacity:.3;cursor:default;box-shadow:none}
.news-nav svg{width:16px;height:16px;fill:var(--ink)}
.news-nav.prev{left:-13px}
.news-nav.next{right:-13px}
@media(max-width:759px){
.news-nav{display:none}
 }
.news-card{flex:0 0 259px;scroll-snap-align:start;display:flex;flex-direction:column;
 background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);overflow:hidden}
.news-card > a{display:flex;flex-direction:column;height:100%;text-decoration:none}
.news-card b{flex:1}
.news-card .cats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;padding:0 11px 11px}
.news-card .cats i{font-style:normal;background:var(--sky-soft);border:2px solid var(--ink);
 border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:800;line-height:1.6}
.news-card .thumb{aspect-ratio:16/9;min-height:0;background:repeating-linear-gradient(45deg,#e9e6dc,#e9e6dc 10px,#e1ddd2 10px,#e1ddd2 20px);display:grid;place-items:center;color:#a5a196;font-size:12px;font-weight:800;border-bottom:3px solid var(--ink)}
.news-card .thumb{position:relative;overflow:hidden;box-sizing:content-box}
.news-card .thumb:has(img){background:#fff}
.news-card .thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;max-width:none;max-height:none}
.news-card b{display:block;padding:12px 13px;font-size:16.5px;font-weight:900;line-height:1.5}
.more{display:block;width:fit-content;margin:16px 0 0 auto;background:var(--yellow);border:3px solid var(--ink);border-radius:99px;
 padding:12px 26px;font-size:15.5px;font-weight:900;text-decoration:none;box-shadow:4px 4px 0 var(--ink);text-align:center}
/* 2026-09-25: トップ新着記事の一覧ボタンを見出し右へ。記事末尾等には波及させない。 */
body.home .col-main > .news{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px}
body.home .col-main > .news > .eyebrow{grid-column:1/-1;grid-row:1}
body.home .col-main > .news > h2{grid-column:1;grid-row:2}
body.home .col-main > .news > .more{grid-column:2;grid-row:2;align-self:center;margin:0 0 18px;white-space:nowrap}
body.home .col-main > .news > .news-scroll{grid-column:1/-1;grid-row:3;min-width:0}
@media(max-width:759px){
 body.home .col-main > .news{padding:18px 14px;column-gap:12px}
 body.home .col-main > .news > .more{padding:10px 14px;font-size:14px}
}
@media(max-width:359px){
 body.home .col-main > .news{column-gap:8px}
 body.home .col-main > .news > h2{font-size:28px}
 body.home .col-main > .news > .more{padding:10px;font-size:13px}
}
.cta{background:var(--coral);border:3px solid var(--ink);border-radius:22px;box-shadow:9px 9px 0 var(--ink);padding:26px;color:#fff;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.18);right:-70px;bottom:-80px}
.cta .eyebrow{color:#ffe9e6;position:relative}
.cta h2{margin:6px 0 10px;font-size:25px;font-weight:900;letter-spacing:-.03em;position:relative}
.cta p{margin:0 0 16px;position:relative;color:#fff3f1}
.cta a{display:inline-block;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:99px;
 padding:11px 26px;font-weight:900;text-decoration:none;box-shadow:4px 4px 0 var(--ink);position:relative}
.col-ad{display:flex;flex-direction:column;gap:0}
.col-ad > .ad-label{margin:0 0 5px;text-align:right}
.col-ad > :not(.ad-label) + *{margin-top:16px}
.ad-follow{position:fixed;top:var(--stick);z-index:90;width:300px;display:flex;flex-direction:column;
 opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.ad-follow.is-on{opacity:1;visibility:visible}
.ad-follow > .ad-label{margin:0 0 5px;text-align:right}
.ad-follow > .sf-ad + .sf-ad{margin-top:16px}
@media(max-width:1059px){
.ad-follow{display:none}
 }
.ad-label{font-family:Inter,sans-serif;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--sub);text-transform:uppercase}
.sf-ad{display:grid;place-items:center;width:300px;max-width:100%;height:250px;
 border:3px dashed var(--ink);border-radius:12px;background:#fff;color:var(--sub);font-size:12px;font-weight:800;text-align:center;line-height:1.7}
.sf-ad b{display:block;color:var(--ink);font-size:14px}
.ad-slot{margin:0 0 18px}
.ad-slot .ad-label{display:block;margin:0 0 6px}
.ad-main{margin:0 0 20px}
.ad-main .ad-label{display:block;text-align:right;margin:0 0 5px}
.ad-inline{margin:26px 0}
.ad-inline .ad-label{display:block;text-align:right;margin:0 0 5px}
.ad-sticky{margin:0 0 18px}
.ad-sticky .ad-label{display:block;text-align:right;margin:0 0 5px}
.ad-sticky .box{aspect-ratio:1000/120;max-width:1000px;margin:0 auto;display:grid;place-items:center;
 border:3px dashed var(--ink);border-radius:10px;background:#fff;color:var(--sub);font-size:12px;font-weight:800;text-align:center;line-height:1.6}
.ad-sticky .box b{display:block;color:var(--ink);font-size:14px}
.ad-float{position:fixed;inset:0;z-index:400;background:rgba(20,20,20,.55);display:grid;place-items:center;padding:20px}
.ad-float[hidden]{display:none}
.ad-float .inner{position:relative;width:480px;max-width:100%}
.ad-float .close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border-radius:50%;
 border:3px solid var(--ink);background:#fff;color:var(--ink);font-size:20px;font-weight:900;cursor:pointer;line-height:1}
.ad-float .close:hover{background:var(--yellow)}
@media(max-width:759px){
.ad-float .close{top:-14px;right:-6px;width:40px;height:40px}
 }
@media(max-width:1059px){
.col-ad{align-items:center;margin-top:22px}
}
.toc-head{background:var(--yellow);color:var(--ink);border-bottom:3px solid var(--ink);padding:10px 12px 10px 14px;display:flex;align-items:center;gap:8px}
.toc-head b{font-size:15.5px;font-weight:900}
.toc-body{max-height:calc(100vh - var(--stick) - 120px);overflow-y:auto;padding:8px 5px 12px}
.toc ul{list-style:none;margin:0;padding:0}
.t-item{position:relative;border-bottom:2px solid #efece2}
.t-item:last-child{border-bottom:0}
.t-main{display:flex;gap:8px;align-items:flex-start;padding:8px 32px 8px 9px;text-decoration:none;font-size:14px;font-weight:700;line-height:1.5;border-radius:8px}
.t-main:hover{background:var(--sky-soft)}
.t-item.current > .t-main{background:var(--coral);color:#fff}
.t-toggle{position:absolute;top:5px;right:5px;width:24px;height:24px;border:2px solid var(--ink);border-radius:7px;background:#fff;font-size:10px;line-height:1;cursor:pointer;color:var(--ink)}
.t-toggle:hover{background:var(--yellow)}
.t-toggle[aria-expanded="true"]{background:var(--yellow);transform:rotate(180deg)}
.toc .t-kids{display:none;padding:0 8px 8px 26px}
.t-item.open .t-kids{display:block}
.t-kids a{display:block;font-size:13px;color:var(--sub);text-decoration:none;padding:3px 7px;border-radius:6px;line-height:1.5}
.t-kids a:hover{background:var(--sky-soft);color:var(--ink)}
.toc-foot{border-top:3px solid var(--ink);padding:8px 10px;display:flex;gap:7px}
.toc-foot button{flex:1;padding:6px;border:2px solid var(--ink);border-radius:8px;background:#fff;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.toc-foot button:hover{background:var(--yellow)}
.toc-foot[hidden]{display:none}
.toc-open{display:none;position:fixed;left:0;bottom:calc(84px + env(safe-area-inset-bottom, 0px));z-index:150;width:30px;padding:12px 0 10px;
 border:3px solid var(--ink);border-left:0;border-radius:0 12px 12px 0;background:var(--yellow);
 font:inherit;font-size:13px;font-weight:900;line-height:1;letter-spacing:.25em;writing-mode:vertical-rl;
 cursor:pointer;box-shadow:3px 3px 0 var(--ink);opacity:0;pointer-events:none;transition:opacity .18s,padding .15s}
.toc-open.is-on{opacity:1;pointer-events:auto}
.toc-open:hover{padding-right:4px}
.toc-close{display:block;flex:none;margin-left:auto;width:36px;height:36px;padding:0;border:2px solid var(--ink);border-radius:50%;
 background:#fff;color:var(--ink);font:inherit;font-size:18px;font-weight:900;line-height:1;cursor:pointer}
.toc-close:hover{background:var(--ink);color:#fff}
.to-top{position:fixed;right:14px;bottom:calc(90px + env(safe-area-inset-bottom, 0px));z-index:150;width:48px;height:48px;padding:0;
 border:3px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
 box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;
 opacity:0;pointer-events:none;transition:opacity .18s}
.to-top.is-on{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--yellow)}
.to-top svg{width:20px;height:20px;fill:currentColor;display:block}
.toc-open{display:block}
.col-toc{display:contents}
.toc{position:fixed;inset:0;z-index:210;border:0;border-radius:0;box-shadow:none;background:rgba(20,20,20,.45);
  display:flex;align-items:stretch;opacity:0;visibility:hidden;transition:opacity .22s}
.toc.open{opacity:1;visibility:visible}
.toc-panel{width:88%;max-width:400px;background:#fff;border-right:3px solid var(--ink);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .22s}
.toc.open .toc-panel{transform:none}
.toc-body{max-height:none;flex:1}
footer{background:var(--blue);color:#fff;border-top:7px solid var(--yellow);padding:36px 20px 28px;font-size:16.5px}
.f-in{max-width:1100px;margin:0 auto}
.f-lead{margin:0 0 20px;text-align:center;font-size:27px;font-weight:900;letter-spacing:-.02em}
.f-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.f-nav a{display:block;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.55);border-radius:99px;
 padding:9px 18px;font-size:15px;font-weight:800;text-decoration:none;color:#fff}
.f-nav a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.f-news{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 rgba(0,0,0,.28);
 max-width:760px;margin:0 auto 26px;padding:22px 24px;text-align:center;color:var(--ink)}
.f-news h2{margin:0 0 12px;font-size:19px;font-weight:900}
.f-news form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.f-news input{flex:1 1 280px;min-width:0;border:2px solid var(--ink);border-radius:99px;padding:12px 18px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.f-news button{border:2px solid var(--ink);border-radius:99px;background:var(--yellow);color:var(--ink);
 font:inherit;font-size:17px;font-weight:900;padding:12px 30px;cursor:pointer}
.f-news button:hover{background:var(--ink);color:#fff}
.f-brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:16px}
.f-brand img{height:44px;width:auto;display:block}
.f-sns{display:flex;gap:9px}
.f-sns a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
 background:rgba(255,255,255,.2);color:#fff;text-decoration:none;transition:background .15s}
.f-sns a:hover{background:#fff;color:var(--blue)}
.f-sns svg{width:19px;height:19px;fill:currentColor;display:block}
.f-copy{text-align:center;font-size:13.5px;color:rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.3);padding-top:14px}
@media(max-width:759px){
.f-lead{font-size:19px}
footer{padding:28px 16px 22px;font-size:15.5px}
.f-news h2{font-size:17px}
.f-nav a{font-size:14px;padding:8px 15px}
 }
.art-body{font-size:18px;line-height:1.9;overflow-wrap:break-word}
.art-body p{margin:0 0 18px}
.art-body font[color="#FF0000" i],.art-body font[color="red" i],.art-body font[color="#f000" i]{color:#d2483a;font-weight:700}
.art-body font[color="#1e90ff" i],.art-body font[color="#0000ff" i],.art-body font[color="#0033ff" i]{color:var(--blue);font-weight:700}
.art-body img.noframe{border:0;border-radius:0;box-shadow:none;background:none}
@media(min-width:760px){
.art-body img.imgleft{float:left;margin:4px 24px 14px 0;max-width:min(46%,380px)}
.art-body img.imgright{float:right;margin:4px 0 14px 24px;max-width:min(46%,380px)}
.art-body h2,.art-body h3,.art-body h4,.art-body h5,.art-body section,.art-body table,.art-body .box1,
 .art-body figure.cap,.art-body .ytp,.art-body .link,.art-body details.acc,.art-body .taiou,.art-body hr{clear:both}
.art-body br[clear]{clear:both}

}
@media(max-width:759px){
.art-body img.imgleft,.art-body img.imgright{float:none;margin-left:auto;margin-right:auto}

}
.art-body figure.cap{display:block;width:fit-content;max-width:100%;margin:0 auto 22px}
.art-body figure.cap > img,.art-body figure.cap > a > img{display:block;margin:0;max-width:100%;height:auto}
.art-body figure.cap > a{display:block}
.art-body ul.ul-t2:first-child,.art-body ol.ol-t1:first-child,.art-body ol.steps:first-child,.art-body table:first-child,.art-body .box1:first-child,.art-body .abcmp:first-child,.art-body .sf-audio:first-child,.art-body .ytp:first-child,.art-body details.acc:first-child,.art-body .link:first-child{margin-top:0}
.art-body figure.cap > figcaption{width:0;min-width:100%;box-sizing:border-box;
 border-top:2px solid #e3dfd2;padding:8px 2px 0;margin-top:8px;color:#5d5d55}

/* ── 2026-09-27 お試し：カシオの記事（ID 209310）だけ、説明文を中央揃えにする ──────
   画像と一緒に中央へ寄せたほうが分かりやすい、という指摘を受けての確認用。
   よければ body.postid-209310 の限定を外して、全記事に広げる。
   スマホは行が増えて読みにくくなるので左揃えに戻す。 */
body.postid-209310 .art-body figure.cap > figcaption{text-align:center;text-wrap:balance}
@media(max-width:759px){
 body.postid-209310 .art-body figure.cap > figcaption{text-align:left}
}
@media(min-width:760px){
.art-body img{max-width:88%}
.art-body figure.cap{max-width:88%}
.art-body iframe,.art-body video{max-width:88%}
.art-body .ytp{max-width:88%;margin-left:auto;margin-right:auto}
.art-body .abcmp,.art-body .mp3,.art-body .sf-audio{max-width:88%;margin-left:auto;margin-right:auto}

}
.art-body .fig{display:grid;place-items:center;background:#f1efe6;color:var(--sub);font-size:12.5px;font-weight:800;
 border:2px solid #c9c5ba;border-radius:12px;box-shadow:4px 4px 0 rgba(30,30,30,.10);margin:0 auto 22px;width:100%;max-width:1067px;aspect-ratio:16/9}
.art-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px}
.art-body th,.art-body td{border:1px solid #ddd;padding:10px 12px;text-align:left;line-height:1.8}
@media(max-width:959px){
.art-body table{display:block;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

}
.art-body th{background:#f5f3ec;font-weight:900}
.art-body table[style]{border-collapse:collapse!important;width:100%!important;border:0!important;margin:0 0 22px!important}
.art-body table[style] th,.art-body table[style] td{border:1px solid #ddd!important;padding:10px 12px!important;
 line-height:1.8!important;text-align:left!important;color:var(--ink)!important;background:none!important}
.art-body table[style] th{background:#f5f3ec!important;font-weight:900!important}
.art-body table[style] td[style*="background-color"]{background:#f5f3ec!important;font-weight:900!important}
.art-body .tbl-scroll{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.art-body .tbl-scroll > table{margin:0}
.fuki{display:flex;gap:12px;margin:0 0 20px;align-items:flex-start}
.fuki.r{flex-direction:row-reverse}
.fuki .ico{flex:none;width:58px;height:58px;border-radius:50%;background:#e9e5d8;border:2px solid var(--ink);
 display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--sub)}
.fuki .txt{position:relative;background:#f5f3ec;border:2px solid var(--ink);border-radius:14px;padding:11px 15px;font-size:15px;line-height:1.85}
.fuki.r .txt{background:var(--sky-soft)}
.pads{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);
 padding:18px 20px;margin:0 0 22px}
.pads .pr{display:inline-block;background:#efece2;color:var(--sub);border-radius:6px;padding:3px 10px;
 font-size:11.5px;font-weight:800;margin:0 0 12px}
.pads .row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.pads .thumb{flex:0 0 160px;max-width:160px;aspect-ratio:1/1;background:#f1efe6;border:2px solid #c9c5ba;border-radius:12px;
 display:grid;place-items:center;color:var(--sub);font-size:12px;font-weight:800}
.pads .body{flex:1 1 260px;min-width:0}
.pads .name{font-size:22px;font-weight:900;line-height:1.35;letter-spacing:-.02em;margin:0 0 4px}
.pads .sf-desc{font-size:14px;line-height:1.85;color:var(--sub);margin:0 0 12px}
.pads .btns{display:grid;gap:9px}
.pads .btn{display:block;max-width:420px;text-align:center;background:var(--coral);color:#fff;border:2px solid var(--ink);
 border-radius:99px;padding:12px 20px;font-size:15px;font-weight:900;text-decoration:none}
.pads .btn.sf-sub{background:#fff;color:var(--ink)}
.pads .btn:hover{background:var(--yellow);color:var(--ink)}
@media(max-width:759px){
.pads .thumb{flex:0 0 110px;max-width:110px}
.pads .name{font-size:18px}
}
.art-body .taiou{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;
 background:var(--sky-soft);border:2px solid var(--blue);border-radius:16px;padding:16px;margin:0 0 22px}
.art-body .taiou > div{display:contents}
.art-body p.taiou{margin:0;padding:0;background:none;border:0}
.art-body .taiou a{display:grid;place-items:center;gap:6px;width:96px;padding:10px 6px;text-decoration:none;
 background:#fff;border:2px solid var(--ink);border-radius:12px;color:var(--ink);font-size:12.5px;font-weight:900;
 line-height:1.4;text-align:center;transition:transform .16s}
.art-body .taiou a:hover{transform:translateY(-3px);background:var(--yellow)}
.art-body .taiou img{width:52px;height:52px;margin:0;border:0;border-radius:10px;box-shadow:none;max-height:none;object-fit:contain}
.art-body .taiou .lead{flex:1 0 100%;margin:0 0 4px;font-size:14px;font-weight:900;color:var(--blue)}
.art-body h4.t2{background:none;border-left:7px solid var(--coral);border-radius:0;padding:2px 0 2px 14px;
 margin:34px 0 20px;font-size:21px}
.art-body h4.t2::before,.art-body h4.t2::after{content:none}
.art-body h4.t3{background:none;border-left:7px solid #b7b2a4;border-radius:0;padding:2px 0 2px 14px;
 margin:34px 0 20px;font-size:21px;color:var(--ink)}
.art-body h4.t3::before,.art-body h4.t3::after{content:none}
.art-body .midasi3,.art-body .midasi{font-size:21px;font-weight:900;line-height:1.55;color:var(--blue);
 padding-left:30px;position:relative;margin:34px 0 18px}
.art-body .midasi3::before,.art-body .midasi::before{content:"";position:absolute;left:2px;top:.48em;width:14px;height:14px;
 border-radius:50%;background:var(--sky);box-shadow:0 0 0 5px rgba(92,179,228,.22)}
.prof{display:flex;gap:16px;align-items:flex-start;background:var(--cream);border:3px solid var(--ink);border-radius:18px;
 box-shadow:5px 5px 0 var(--ink);padding:16px 18px;margin:0 0 22px}
.prof .ph{flex:none;width:86px;height:86px;border-radius:50%;background:#e9e5d8;border:2px solid var(--ink);
 display:grid;place-items:center;color:var(--sub);font-size:11.5px;font-weight:900}
.prof .nm{font-size:18px;font-weight:900;margin:0 0 2px}
.prof .ro{font-size:12.5px;font-weight:800;color:var(--blue);margin:0 0 8px}
.prof .tx{font-size:14px;line-height:1.9;color:var(--sub);margin:0}
.trouble{display:flex;gap:14px;align-items:center;background:#fff7c2;border:3px solid #e0c400;border-radius:16px;
 padding:14px 18px;margin:0 0 22px}
.trouble .ic{flex:none;width:44px;height:44px;border-radius:50%;background:#e0c400;color:#fff;display:grid;place-items:center;
 font-size:22px;font-weight:900}
.trouble b{display:block;font-size:15.5px;line-height:1.6}
.trouble a{font-size:13.5px;font-weight:900;color:var(--blue)}
.art-body .massive{margin:0 0 22px}
.art-body .massive a{display:block;max-width:460px;text-align:center;background:var(--blue);color:#fff;
 border:2px solid var(--ink);border-radius:99px;padding:13px 20px;font-size:15px;font-weight:900;text-decoration:none}
.art-body .massive a:hover{background:var(--yellow);color:var(--ink)}
.art-body ol.contentsMenu{background:var(--sky-soft);border:2px solid var(--blue);border-radius:14px;padding:14px 18px;margin:0 0 22px}
.art-body ol.contentsMenu li{padding-left:0;margin-bottom:4px;border-bottom:0}
.art-body ol.contentsMenu li::before{content:none}
.art-body ol.contentsMenu a{font-weight:900;color:var(--blue)}
.art-body .shikaku{background:#fff;border:2px dashed var(--ink);border-radius:14px;padding:16px 18px;margin:0 0 22px;
 font-size:15px;line-height:1.95}
.art-body .shikaku .shikaku{background:none;border:0;border-radius:0;padding:0;margin:0}
.art-body .shikaku:empty,.art-body .shikaku > p:empty{display:none}
.art-body blockquote.q1{background:#fff;border:0;border-left:5px solid var(--sky);border-radius:0;padding:6px 0 6px 16px;
 color:var(--sub);font-size:14.5px}
.art-body blockquote.twitter-tweet{background:#fff;border:2px solid #c7d8eb;border-radius:14px;padding:16px 18px;margin:0 0 22px;
 font-size:14.5px;color:var(--ink)}
.art-body ol.steps{counter-reset:st;margin:0 0 22px}
.art-body ol.steps > li{counter-increment:st;position:relative;padding:4px 0 14px 62px;margin:0 0 12px;border-bottom:0;
 border-left:3px solid var(--sky-soft);margin-left:21px}
.art-body ol.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
.art-body ol.steps > li::before{content:"STEP " counter(st);position:absolute;left:-24px;top:0;width:44px;height:44px;
 border-radius:50%;background:var(--sky);color:#fff;border:2px solid var(--ink);font-family:Inter,sans-serif;font-size:8.5px;
 font-weight:900;display:grid;place-items:center;text-align:center;line-height:1.2}
.art-body ol.steps b{display:block;font-size:17px;font-weight:900;margin-bottom:2px}
.art-body a.btn1{display:inline-block;background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:99px;
 padding:12px 28px;font-size:15px;font-weight:900;text-decoration:none;box-shadow:4px 4px 0 var(--ink);margin:0 0 22px}
.art-body a.btn1:hover{background:var(--yellow);color:var(--ink)}
.art-body table.compare td.ok{color:var(--blue);font-weight:900;text-align:center}
.art-body table.compare td.ok{-webkit-text-stroke:0.7px currentColor}
.art-body table.compare td.ng{color:var(--coral);font-weight:900;text-align:center}
.art-body table.compare td.na{color:var(--sub);text-align:center}
.art-body kbd{display:inline-block;background:#fff;border:2px solid var(--ink);border-bottom-width:4px;border-radius:7px;
 padding:1px 9px;font-family:Inter,sans-serif;font-size:13.5px;font-weight:900;line-height:1.7;margin:0 2px}
.art-body details.acc{background:#fff;border:3px solid var(--ink);border-radius:14px;margin:0 0 22px;overflow:hidden}
.art-body details.acc > summary{cursor:pointer;list-style:none;padding:13px 18px;font-size:15.5px;font-weight:900;
 background:var(--cream);display:flex;align-items:center;justify-content:space-between}
.art-body details.acc > summary::-webkit-details-marker{display:none}
.art-body details.acc > summary::after{content:"＋";color:var(--blue);font-size:18px}
.art-body details.acc[open] > summary::after{content:"−"}
.art-body details.acc .in{padding:14px 18px;font-size:15px;line-height:1.95}
.nlink{display:flex;gap:18px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;
 box-shadow:5px 5px 0 var(--ink);padding:12px 18px 12px 12px;margin:0 0 22px;text-decoration:none;color:var(--ink);transition:transform .16s}
.nlink .th{flex:0 0 120px;width:120px;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:2px solid var(--ink);background:#f1efe6}
.nlink .th img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border:0;border-radius:0;box-shadow:none;max-height:none}
.nlink .tx{flex:1;min-width:0}
@media(max-width:759px){
.nlink{gap:12px}
.nlink .th{flex-basis:84px;width:84px}
.nlink .tt{font-size:15px}
.nlink .ex{display:none}
}
.nlink:hover{transform:translateY(-2px);background:var(--cream)}
.nlink .lb{display:inline-block;background:var(--sky);color:#fff;border-radius:6px;padding:2px 9px;
 font-family:Inter,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.08em;margin:0 0 6px}
.nlink .tt{display:block;font-size:17px;font-weight:900;line-height:1.6;color:var(--blue)}
.nlink .ex{display:block;font-size:13.5px;line-height:1.8;color:var(--sub);margin-top:4px}
.nlink .go{display:block;text-align:right;font-size:13px;font-weight:900;color:var(--blue);margin-top:4px}
.art-body code:empty{display:none}
.art-body .box1 > .bl{display:inline-block;border-radius:6px;padding:2px 10px;margin:0 0 6px;
 font-size:12.5px;font-weight:900;color:#fff;background:var(--blue)}
.art-body .box1.caution{background:#fff7c2;border-color:#e0c400}
.art-body .box1.caution > .bl{background:#a98900}
.art-body .box1.warn{background:#ffeceb;border-color:var(--coral)}
.art-body .box1.warn > .bl{background:var(--coral)}
.art-body .box1.sf-point{background:#eef8ec;border-color:#4f9e63}
.art-body .box1.sf-point > .bl{background:#3f8a52}
.art-body p.sf-note{background:#f5f3ec;border-radius:10px;padding:9px 15px;margin:0 0 20px;
 font-size:15px;line-height:1.85;color:var(--sub)}
.art-body p.sf-note::before{content:"※";font-weight:900;color:var(--coral);margin-right:7px}
.art-body .sf-os{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:99px;
 padding:0 9px;margin-right:5px;font-size:13px;font-weight:900;line-height:1.75;vertical-align:2px}
.art-body .sf-os.mac{background:#efece2}
.art-body .sf-os.win{background:var(--sky);border-color:var(--sky);color:#fff}
.art-body .sf-free,.art-body .sf-paid,.art-body .sf-new{display:inline-block;border-radius:6px;
 padding:1px 9px;margin-right:6px;font-size:12.5px;font-weight:900;line-height:1.8;vertical-align:2px}
.art-body .sf-free{background:#1c7a3e;color:#fff}
.art-body .sf-paid{background:#efece2;color:var(--sub);border:1px solid #cfcabc}
.art-body .sf-new{background:var(--coral);color:#fff}
@media(max-width:759px){
.art-body p.sf-note{font-size:14px}
}
.art-body ul.tab{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 -3px;padding:0}
.art-body ul.tab li{cursor:pointer;background:#fff;border:3px solid var(--ink);border-bottom-width:3px;border-radius:12px 12px 0 0;
 padding:10px 20px;font-size:15.5px;font-weight:900;line-height:1.5;position:relative;z-index:1}
.art-body ul.tab li:hover{background:var(--yellow)}
.art-body ul.tab > li::before,.art-body ul.tab > li::marker{content:none;display:none}
.art-body ul.tab li.selected{background:var(--sky);color:#fff;border-bottom-color:var(--sky)}
.art-body ul.tab.bottom{margin:-3px 0 22px}
.art-body ul.tab.bottom li{border-radius:0 0 12px 12px}
.art-body ul.tab li{width:auto!important}
.art-body .tab_content{border:3px solid var(--ink);border-radius:0 14px 14px 14px;background:#fff;padding:18px 20px;margin:0}
.art-body .tab_content > div{display:none}
.art-body .tab_content > div.selected{display:block}
.abcmp{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"play sw body";align-items:center;column-gap:14px;row-gap:6px;
 background:var(--cream);border:3px solid var(--ink);border-radius:99px;box-shadow:5px 5px 0 var(--ink);padding:10px 20px 10px 10px;margin:0 0 22px}
.abcmp.has-ttl{grid-template-areas:"play ttl ttl" "play sw body";row-gap:10px}
.abcmp > .sf-ttl.ab-desc{line-height:1.7}
.abcmp > .sf-ttl .ab-row{display:inline}
.abcmp > .sf-ttl .ab-row + .ab-row::before{content:"/";margin:0 10px 0 8px;color:var(--sub)}
.abcmp > .sf-ttl .ab-key{font-weight:900;margin:0}
.abcmp > .sf-ttl .ab-key::after{content:"："}
.abcmp > b.sf-ttl{grid-area:ttl;display:block;font-size:14.5px;line-height:1.5;margin:0}
.abcmp .play{grid-area:play;width:46px;height:46px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);color:#fff;
 font-size:15px;cursor:pointer;display:grid;place-items:center}
.abcmp .sw{grid-area:sw;display:flex;gap:0;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.abcmp .sw button{background:#fff;border:0;padding:9px 16px;font-size:14px;font-weight:900;cursor:pointer;color:var(--ink)}
.abcmp .sw button.on{background:var(--sky);color:#fff}
.abcmp .ab-body{grid-area:body;min-width:0}
.abcmp .ab-bar{height:8px;border-radius:99px;background:#e2ded0;overflow:hidden;margin:6px 0 3px}
.abcmp .ab-bar span{display:block;width:44%;height:100%;background:var(--sky)}
.abcmp .time{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--sub)}
.abcmp .ab-bar{cursor:pointer}
.abcmp.is-playing .play{background:var(--yellow);color:var(--ink)}
.abcmp.is-loading .play{opacity:.6}
@media(max-width:759px){
.abcmp,.abcmp.has-ttl{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"play sw" "body body";column-gap:10px;
    border-radius:24px;padding:10px 14px 10px 10px}
.abcmp.has-ttl{grid-template-areas:"play ttl" "play sw" "body body"}
.abcmp .sw{justify-self:start}
.abcmp .play{width:38px;height:38px;font-size:13px}
.abcmp .sw button{padding:7px 12px;font-size:13px}
.abcmp .ab-body{padding:0 2px}

}
.art-body .cols2,.art-body .cols3{display:grid;gap:20px;margin:0 0 22px}
.art-body .cols2 > *,.art-body .cols3 > *{min-width:0}
.art-body .cols2 p,.art-body .cols3 p{margin:0}
.art-body .colimg{background:#f1efe6;border:2px solid #c9c5ba;border-radius:12px;aspect-ratio:4/3;
 display:grid;place-items:center;color:var(--sub);font-size:12.5px;font-weight:800;margin:0 0 8px}
.art-body .colcap{font-size:14px;line-height:1.8}
@media(min-width:760px){
.art-body .cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.art-body .cols3{grid-template-columns:repeat(3,minmax(0,1fr))}

}
.art-body .box1.box1-y{background:#fff7c2;border-color:#e0c400}
.art-body h2{margin:44px 0 22px;font-size:30px;font-weight:900;line-height:1.45;letter-spacing:-.03em}
.art-body h2 span{background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 5px;margin-left:-5px}
.art-body h5{margin:44px 0 28px;font-size:26px;font-weight:900;line-height:1.5;
 color:var(--blue);padding-left:34px;position:relative;
 
 padding-bottom:12px;border-bottom:2px solid #cfe6f5}
.art-body h5::before{content:"";position:absolute;left:2px;top:.48em;width:16px;height:16px;border-radius:50%;
 background:var(--sky);box-shadow:0 0 0 5px rgba(92,179,228,.22)}
.art-body h5 > span.mk{background:linear-gradient(transparent 70%,var(--sky-soft) 70%);padding:0 3px}
.art-body h3{margin:30px 0 34px;font-size:23px;font-weight:900;line-height:1.55;
 color:var(--coral);padding-left:24px;position:relative}
.art-body h3::before{content:"";position:absolute;left:1px;top:.56em;width:11px;height:11px;border-radius:50%;
 background:var(--coral);box-shadow:0 0 0 4px rgba(255,107,94,.18)}
.art-body iframe{display:block;width:100%;max-width:1067px;aspect-ratio:16/9;height:auto;margin:6px auto 40px;
 border:3px solid var(--ink);border-radius:22px;box-shadow:12px 14px 0 var(--blue);background:#000;max-height:none}
@media(max-width:759px){
.art-body iframe{border-radius:16px;box-shadow:7px 8px 0 var(--blue)}
 }
@media(max-width:759px){
body .art-body{font-size:16px;line-height:1.85}
body .art-body h2{font-size:20px}
body .art-body h5{font-size:19px}
body .art-body h3,body .art-body h4{font-size:18px}
body .nlink .tt{font-size:15px}
body .art-body .p_ads__title{font-size:18px}

}
.art-body h4{margin:36px 0 34px;font-size:23px;font-weight:900;line-height:1.55;position:relative}
.art-body h4.t1{background:var(--sky-soft);border-left:7px solid var(--sky);border-radius:0 14px 14px 0;
 padding:16px 20px 16px 62px;margin:36px 0 34px}
.art-body h4.t1::before{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
 width:32px;height:32px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 5px rgba(92,179,228,.25)}
.art-body h4.t1::after{content:"";position:absolute;left:31px;top:50%;transform:translateY(-50%);width:0;height:0;
 border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.art-body ul,.art-body ol{margin:0 0 22px;padding:0 0 0 2px;list-style:none}
.art-body li{position:relative;padding-left:26px;margin-bottom:9px;line-height:1.9}
.art-body ul li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.art-body ul.ul-t2 li::before{background:var(--sky);border:2px solid var(--ink);width:11px;height:11px;top:.62em}
.art-body ul.maru_list li::before{background:transparent;border:2px solid var(--blue);width:11px;height:11px;top:.66em}
.art-body ol{counter-reset:n}
.art-body ol li{counter-increment:n;padding-left:34px}
.art-body ol li::before{content:counter(n);position:absolute;left:0;top:.35em;width:22px;height:22px;border-radius:50%;
 background:var(--blue);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center}
.art-body ol.ol-t1 li::before{content:none}
.art-body ol.ol-t1 li > span:first-child{position:absolute;left:0;top:.35em;width:22px;height:22px;border-radius:50%;
 background:var(--blue);color:#fff;font-size:12px;font-weight:900;line-height:1;display:grid;place-items:center}
.art-body .box1{background:var(--sky-soft);border:2px solid var(--blue);border-radius:16px;padding:16px 18px;margin:0 0 22px}
.art-body blockquote{margin:0 0 22px;padding:14px 18px;background:#f5f3ec;border-radius:16px;font-size:15px;color:var(--sub)}
.art-body span.red{color:var(--ink);background:linear-gradient(transparent 62%,rgba(255,107,94,.38) 62%);font-weight:900;padding:0 2px}
.art-body span.blue{color:var(--ink);background:linear-gradient(transparent 62%,rgba(92,179,228,.45) 62%);font-weight:900;padding:0 2px}
.mp3{display:flex;align-items:center;gap:14px;background:var(--cream);border:3px solid var(--ink);border-radius:99px;
 padding:10px 18px 10px 10px;margin:0 0 22px;box-shadow:5px 5px 0 var(--ink)}
.mp3-play{flex:none;width:46px;height:46px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);color:#fff;
 font-size:15px;cursor:pointer;display:grid;place-items:center}
.mp3-body{flex:1;min-width:0}
.mp3-body b{display:block;font-size:14.5px;line-height:1.5}
.mp3-bar{height:8px;border-radius:99px;background:#e2ded0;margin:6px 0 3px;overflow:hidden}
.mp3-bar span{display:block;width:38%;height:100%;background:var(--sky)}
.mp3-time{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--sub)}
.sc{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:16px;margin:0 0 22px;
 display:grid;place-items:center;min-height:120px;color:var(--sub);font-size:13px;font-weight:800;text-align:center;line-height:1.8}
.art-body ul.ul-t2,.art-body ol.ol-t1{background:#f5fafd;border:1px solid #cfe6f5;border-radius:16px;padding:16px 22px 7px 18px;margin:0 0 26px}
@media(max-width:759px){
.art-body ul.ul-t2,.art-body ol.ol-t1{padding:14px 14px 5px 12px;border-radius:12px}
 }
.art-body .box1 ul.ul-t2,.art-body .box1 ol.ol-t1{background:none;border:0;border-radius:0;padding:0;margin:0 0 14px}
.art-body li.ab-desc{padding-left:0}
.art-body li.ab-desc::before{content:none;display:none}
.art-body li.ab-desc .ab-row{display:inline;white-space:normal}
.art-body li.ab-desc .ab-row + .ab-row::before{content:"/";margin:0 12px 0 10px;color:var(--sub)}
.art-body li.ab-desc .ab-key{font-weight:900;margin:0}
.art-body li.ab-desc .ab-key::after{content:"："}
@media(min-width:760px){
.art-body blockquote,.art-body blockquote.q1,.art-body .shikaku,.art-body details.acc .in,.art-body .taiou .lead,
  .fuki .txt,.art-body .fukidashi .f-text p{font-size:16px}

}
.art-body ul.ul-t2,.art-body ol.ol-t1,.art-body ol.steps,.art-body table,.art-body .box1,.art-body .abcmp,.art-body .sf-audio,.art-body .ytp,.art-body details.acc,.art-body .link{margin-top:30px;margin-bottom:30px}
.art-body figure.cap{margin-top:30px;margin-bottom:30px}
.art-body figure.cap + p{margin-top:38px}
.art-body figure.cap + ul.ul-t2,.art-body figure.cap + ol.ol-t1,.art-body figure.cap + ol.steps,.art-body figure.cap + table,.art-body figure.cap + .box1,.art-body figure.cap + .abcmp,.art-body figure.cap + .sf-audio,.art-body figure.cap + .ytp,.art-body figure.cap + details.acc,.art-body figure.cap + .link{margin-top:38px}
.art-body figure.cap:first-child{margin-top:0}
.art-body hr{border:0;border-top:2px dashed #d8d3c4;margin:30px 0}
.art-body a{color:var(--blue)}
.art-body img.alignleft,.art-body img.alignright{float:none}
@media(min-width:760px){
.art-body img.imgleft{float:left;margin:4px 24px 14px 0;max-width:min(46%,380px)}
.art-body img.imgright{float:right;margin:4px 0 14px 24px;max-width:min(46%,380px)}
.art-body h2,.art-body h3,.art-body h4,.art-body h5,.art-body section,.art-body table,.art-body .box1,
     .art-body figure.cap,.art-body .ytp,.art-body .link,.art-body details.acc,.art-body .taiou,.art-body hr{clear:both}
.art-body br[clear]{clear:both}

    }
@media(max-width:759px){
.art-body img.imgleft,.art-body img.imgright{float:none;margin-left:auto;margin-right:auto}

    }
.nlink .th img{border:0;box-shadow:none;margin:0;max-height:none}
.art-body .p_ads{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:18px 20px;margin:0 0 22px}
.art-body .p_ads__row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.art-body .p_ads__col{flex:1 1 260px;min-width:0}
.art-body .p_ads__col:first-child{flex:0 0 160px}
.art-body .p_ads__img{width:100%;max-width:160px;margin:0;border-radius:12px;box-shadow:none}
.art-body .p_ads__title{font-size:22px;font-weight:900;line-height:1.35;margin:0 0 4px}
.art-body .p_ads__sponsored{display:inline-block;background:#efece2;color:var(--sub);border-radius:6px;padding:3px 10px;font-size:11.5px;font-weight:800;margin:0 0 12px}
.art-body .p_ads__btn{display:block;max-width:420px;text-align:center;background:var(--coral)!important;color:#fff!important;border:2px solid var(--ink);
     border-radius:99px;padding:12px 20px;font-size:15px;font-weight:900;text-decoration:none;margin:0 0 9px}
.art-body .p_ads__btn:hover{background:var(--yellow)!important;color:var(--ink)!important}
.mp3.playing .mp3-play{background:var(--yellow);color:var(--ink)}

    


/* ── パンくず（全ページ共通。2026-09-22 ユーザー「現在のページを示している箇所がみにくい。サイトに合うように全ページで統一」）──
   入れ物は2種類：記事・固定ページは本文の列の上の nav.crumbs、カテゴリー・検索・404・旧デザインのページはヘッダー下の .bread-wrap。
   中身はどちらもプラグイン（Breadcrumb NavXT）の <span>…</span> &gt; <span>…</span>。
   区切りの「>」は文字なので、入れ物の文字サイズを0にして隠し、矢印を ::before で描く。
   リンクは青の太字、今いるページは黒。長いページ名は1行で「…」にする（全文はすぐ下の見出しにある）。
   新デザインのCSS（*-all.css）と、旧デザインのページ用の renewal-header.css の両方の末尾に同じものを入れる */
body .crumbs,body .bread-wrap .inner{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;font-size:0;line-height:1.6;color:var(--ink);
 font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;letter-spacing:.01em}
/* 2026-09-22 ユーザー「文字が少し小さい。囲いがあったほうが見やすい」：白い丸い囲みに入れ、文字を13px→14px に */
body .bread-wrap{max-width:1640px;margin:0 auto;padding:14px 20px 0;background:none;border:0;box-sizing:border-box}
body .crumbs,body .bread-wrap .inner{width:fit-content;max-width:100%;box-sizing:border-box;float:none;
 background:#fff;border:2px solid #d9d5c9;border-radius:99px;padding:9px 18px}
body .bread-wrap .inner{margin:0}
body .crumbs{margin:0 0 18px}
body .crumbs > span,body .bread-wrap .inner > span{display:block;flex:none;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
/* 途中の項目（長いカテゴリー名）も縮める。縮めないとスマホで横にはみ出す（2026-09-22 390pxで10px）。トップページのリンクだけは縮めない */
body .crumbs > span:not(:first-child),body .bread-wrap .inner > span:not(:first-child){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
body .crumbs > span:last-child,body .bread-wrap .inner > span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 広い画面では途中の項目（カテゴリー名）は縮めず、今のページ名から「…」にする */
@media(min-width:760px){
  body .crumbs > span:not(:first-child):not(:last-child),body .bread-wrap .inner > span:not(:first-child):not(:last-child){flex-shrink:0}
}
body .crumbs span,body .bread-wrap .inner span{color:inherit;background:none}
body .crumbs > span + span::before,body .bread-wrap .inner > span + span::before{content:"";display:inline-block;width:6px;height:6px;
 margin:0 11px 0 8px;vertical-align:2px;border-top:2px solid #a8a498;border-right:2px solid #a8a498;transform:rotate(45deg)}
body .crumbs a,body .bread-wrap .inner a{color:var(--blue);font-weight:700;text-decoration:none;background:none}
body .crumbs a:hover,body .bread-wrap .inner a:hover{text-decoration:underline;text-underline-offset:3px}
body .crumbs a.home::before,body .bread-wrap .inner a.home::before{content:"";display:inline-block;width:14px;height:14px;margin:0 5px 0 0;vertical-align:-2px;
 background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 11.5H5V21h5.5v-6h3v6H19v-9.5h3.5z'/%3E%3C/svg%3E") no-repeat center/contain;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 11.5H5V21h5.5v-6h3v6H19v-9.5h3.5z'/%3E%3C/svg%3E") no-repeat center/contain}
@media(max-width:759px){
  body .bread-wrap{padding:10px 16px 16px}
  body .crumbs,body .bread-wrap .inner{padding:7px 14px}
  body .crumbs > span,body .bread-wrap .inner > span{font-size:13px}
  body .crumbs > span + span::before,body .bread-wrap .inner > span + span::before{margin:0 9px 0 6px}
}

/* 横の“グラグラ”を止める（2026-09-24。ヘッダーだけ新しいページにも当てる） */
html,body{overscroll-behavior-x:none}

/* ── アイキャッチを16:9に揃える（2026-09-26 ユーザー決定） ──────────────────
   これまでのアイキャッチは正方形が多い（公開記事2,427本のうち1,295本）。
   枠をすべて16:9にそろえ、入りきらない左右の余白は「同じ画像をぼかして敷いて」埋める。
   記事冒頭のヒーロー（.vhero の .vimg-bg）と同じ手法なので、サイトの中で浮かない。
   16:9の画像は余白が出ないため、ぼかしの img は PHP 側で出力しない（自然に消えていく）。 */

/* ぼかして敷く背景。枠いっぱいに広げて、前面の画像の下に置く */
.card-bg{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;
  border:0;border-radius:0;box-shadow:none;max-width:none;max-height:none;
  object-fit:cover;filter:blur(20px) brightness(.92);transform:scale(1.35);z-index:0}

/* 記事カード（トップの新着・記事一覧・記事下のおすすめ）。枠はすでに16:9。
   画像は本番CSSで position:absolute;inset:0 が効いているので、重なりの順だけ決める。
   **object-fit は必ずここで指定すること。**`.card-bg`（詳細度0-1-0）だけでは
   `.news-card .thumb img`（0-2-1）の object-fit:contain に負けて、ぼかしが
   「引き伸ばした一枚」に見えてしまう（2026-09-26 実際にそうなった） */
.news-card .thumb > img{z-index:1}
.news-card .thumb > img.card-bg{z-index:0;object-fit:cover}

/* 前の記事・次の記事。枠はすでに16:9。幅96pxと小さいのでぼかしは弱めにする */
.art-pager .pg-th{position:relative}
.art-pager .pg-th img{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.art-pager .pg-th img.card-bg{z-index:0;object-fit:cover;filter:blur(8px) brightness(.92)}

/* 関連リンク（[nlink]「このような記事も読まれています」）。
   ここだけ正方形の枠だったので16:9にする。画像は切り抜かず、枠に収める */
.art-body .link li > a{grid-template-columns:160px minmax(0,1fr)}
.art-body .link li > a > figure{width:160px;aspect-ratio:16/9;position:relative;overflow:hidden;
  background:#e9e6dc}
.art-body .link li > a > figure img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:1}
.art-body .link li > a > figure img.card-bg{object-fit:cover;z-index:0}
@media(max-width:759px){
  .art-body .link li > a{grid-template-columns:112px minmax(0,1fr)}
  .art-body .link li > a > figure{width:112px}
}

/* 製品アフィリエイト枠も16:9にそろえる（2026-09-26 ユーザー決定）。
   枠の幅は160→220pxに広げる。こうしないと、これまでの正方形の商品写真が
   160×160 → 90×90 と小さくなりすぎる（220pxなら124×124に収まる）。
   .art-body img の共通指定（枠線・余白・max-width:88% など）を打ち消すため、
   **詳細度を .art-body .p_ads__thumb img（0-2-1）にして、一つずつ上書きする** */
.art-body .p_ads__col:first-child{flex:0 0 220px}
.art-body .p_ads__thumb{display:block;position:relative;width:100%;max-width:220px;aspect-ratio:16/9;
  overflow:hidden;margin:0;border:2px solid #c9c5ba;border-radius:12px;background:#e9e6dc;
  box-shadow:4px 4px 0 rgba(30,30,30,.10)}
.art-body .p_ads__thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  background:none;object-fit:contain;z-index:1}
.art-body .p_ads__thumb img.card-bg{object-fit:cover;z-index:0}

/* 2026-09-27: スマホの冒頭の空白を整理し、画像を青い背景装飾に重ねる。
   PC・タブレットの既存配置と、画像の比率・文字階層・詳細リンクは維持。 */
@media(max-width:759px){
  body.home .hero > .in{padding-top:20px;padding-bottom:40px}
  body.home .hero .hslider{margin-top:0}
  body.home .hero::before,body.home .hero::after{pointer-events:none}
}

/* 2026-09-27: 日本語フッターのスマホ表示を指定の2行に整える。PC・英語は維持。 */
@media(max-width:759px){
  footer.sf-foot .f-lead--ja .f-lead__tagline,
  footer.sf-foot .f-lead--ja .f-lead__name{display:block;white-space:nowrap}
  footer.sf-foot .f-lead--ja .f-lead__join{display:none}
}
@media(max-width:359px){footer.sf-foot .f-lead--ja{font-size:17px}}

/* 2026-10-02: Shared bottom free-trial CTA. Same scoped block in front/single/fallback-footer bundles. */
.art-cta.sf-trial-feature{display:flex;flex-wrap:wrap;align-items:stretch;gap:28px;background:#ff6b5e;color:#fff;padding:30px;text-align:left;position:relative;isolation:isolate;border:3px solid var(--ink,#202020);border-radius:22px;box-shadow:6px 6px 0 var(--ink,#202020)}
.sf-trial-feature .sf-trial-feature__copy{flex:1.25 1 300px;min-width:0;display:flex;flex-direction:column;padding-bottom:24px}
.sf-trial-feature p{font-family:inherit;letter-spacing:normal;font-weight:400;line-height:1.75}
.sf-trial-feature .sf-trial-feature__eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;font-family:Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:.15em;line-height:1.4;margin:0 0 16px;padding:7px 12px;border:1px solid rgba(255,255,255,.55);border-radius:99px}
.sf-trial-feature__eyebrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sf-trial-feature .sf-trial-feature__title{display:block;margin:0 0 14px;padding:0;border:0;background:none;box-shadow:none;color:#fff;font-size:clamp(25px,2.35vw,34px);font-weight:900;line-height:1.5;letter-spacing:-.025em}
.sf-trial-feature__title::before,.sf-trial-feature__title::after{content:none}
.sf-trial-feature__title span{display:block}
.sf-trial-feature .sf-trial-feature__benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:360px;min-height:54px;margin:auto 0 0;padding:0;list-style:none}
.sf-trial-feature__benefits li{display:flex;align-items:center;justify-content:center;margin:0;padding:7px 4px;background:#fff;color:#202020;border:2px solid #202020;border-radius:8px;font-size:13px;font-weight:800;line-height:1.5;white-space:nowrap}
.sf-trial-feature__benefits li::before{content:none}
.sf-trial-feature .sf-trial-feature__booking{flex:1 1 280px;min-width:0;box-sizing:border-box;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;background:#fff;color:#202020;border:2px solid #202020;border-radius:16px;padding:22px 18px;text-align:center;box-shadow:4px 4px 0 #06557e}
.sf-trial-feature .sf-trial-feature__duration{display:flex;align-items:center;justify-content:center;gap:6px;min-height:58px;margin:0 0 12px;color:#202020;font-size:20px;font-weight:900;line-height:1;white-space:nowrap}
.sf-trial-feature__duration strong{display:block;font-family:inherit;font-size:48px;font-style:normal;font-weight:900;line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.025em}
.sf-trial-feature__duration span{align-self:center;margin-left:8px;padding:6px 10px;border-radius:7px;background:#e4f4fb;color:#075f8c;font-size:20px;line-height:1.3}
.sf-trial-feature .sf-trial-feature__detail{margin:0 0 16px;font-size:14px;line-height:1.8;color:#414b53}
.sf-trial-feature a.sf-trial-feature__button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;margin-top:auto;box-sizing:border-box;padding:12px 14px;background:#ffe600;color:#202020;border:2px solid #202020;border-radius:99px;box-shadow:3px 3px 0 #202020;font-size:15px;font-weight:900;line-height:1.5;text-decoration:none;transition:background-color .18s,box-shadow .18s,transform .18s}
.sf-trial-feature__button svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sf-trial-feature a.sf-trial-feature__button:hover,.sf-trial-feature a.sf-trial-feature__button:focus-visible{background:#fff27a;box-shadow:3px 5px 0 #202020,0 0 20px rgba(255,230,0,.65);transform:translateY(-2px)}
.sf-trial-feature a.sf-trial-feature__button:focus-visible{outline:3px solid #0878b2;outline-offset:5px}
@media(max-width:759px){
 .art-cta.sf-trial-feature{padding:23px 20px;gap:23px;border-radius:18px;box-shadow:5px 5px 0 var(--ink,#202020)}
 .sf-trial-feature .sf-trial-feature__copy,.sf-trial-feature .sf-trial-feature__booking{flex-basis:100%}
 .sf-trial-feature .sf-trial-feature__copy{display:block;padding-bottom:0}
 .sf-trial-feature .sf-trial-feature__title{font-size:clamp(23px,6.3vw,32px);margin-bottom:12px}
 .sf-trial-feature .sf-trial-feature__eyebrow{margin-bottom:14px}
 .sf-trial-feature .sf-trial-feature__booking{padding:20px 14px}
 .sf-trial-feature .sf-trial-feature__benefits{gap:8px;min-height:0;margin:0}
}
@media(max-width:374px){
 .art-cta.sf-trial-feature{padding:20px 15px}
 .sf-trial-feature .sf-trial-feature__benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sf-trial-feature .sf-trial-feature__booking{padding:18px 10px}
 .sf-trial-feature a.sf-trial-feature__button{font-size:14px;padding:12px 10px;gap:6px}
}
@media(prefers-reduced-motion:reduce){.sf-trial-feature a.sf-trial-feature__button{transition:none}.sf-trial-feature a.sf-trial-feature__button:hover,.sf-trial-feature a.sf-trial-feature__button:focus-visible{transform:none}}

/* 2026-10-11: Prominent hero navigation, with unchanged destinations. */
body.home .hero .hc-link{
 display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
 min-width:220px;max-width:100%;min-height:60px;padding:14px 30px;
 background:#ffe600;color:#202020;border:3px solid #202020;border-radius:999px;
 box-shadow:5px 6px 0 #202020;font-size:19px;font-weight:900;line-height:1.4;
 text-decoration:none;white-space:nowrap;margin-top:8px;margin-bottom:7px;
 transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
body.home .hero .hc-link:hover,body.home .hero .hc-link:focus-visible{
 background:#fff18a;color:#202020;text-decoration:none;transform:translateY(-2px);
 box-shadow:5px 8px 0 #202020,0 0 18px #ffe60066;
}
body.home .hero .hc-link:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(max-width:759px){
 body.home .hero .hc-desc{grid-column:1/-1;grid-row:3}
 body.home .hero .hc-link{grid-column:1/-1;grid-row:4;margin-top:20px;width:100%;min-width:0;min-height:56px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){
 body.home .hero .hc-link{transition:none}
 body.home .hero .hc-link:hover,body.home .hero .hc-link:focus-visible{transform:none}
}