@charset "utf-8";
/* リニューアルのヘッダー（自動生成：_build_テーマヘッダー.py が トップページ_デザイン案.html から作る。直接編集しない）
既存テーマの指定と混ざらないよう、ヘッダー・メニュー・ドロワーの中だけに効く指定を先頭に置く */
:root{
--ink:#1e1e1e; --sub:#6f6f66; --cream:#fdf8ec; --paper:#fff;
--blue:#0878b2; --sky:#5cb3e4; --sky-soft:#e2f2fb;
--coral:#ff6b5e; --yellow:#ffe600; --navy:#1f2d44;
}
.site-head,.site-head *,.sfdrawer,.sfdrawer *,.mega,.mega *,.hsearch-panel,.hsearch-panel *{box-sizing:border-box}
.site-head,.sfdrawer,.mega,.hsearch-panel{font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;line-height:1.85;color:var(--ink);-webkit-font-smoothing:antialiased}
/* :where() は優先度0。テーマの指定だけを打ち消し、このあとのデザイン案の指定（余白など）は生かす */
:where(.site-head,.sfdrawer,.mega) :where(a){text-decoration:none}
:where(.site-head,.sfdrawer,.mega) :where(img){max-width:none;height:auto}
:where(.site-head,.sfdrawer,.mega) :where(ul,ol){margin:0;padding:0;list-style:none}
:where(.site-head,.sfdrawer,.mega) :where(p,h1,h2,h3,h4,h5,h6,figure,dl,dd){margin:0}
:where(.site-head,.sfdrawer,.mega) :where(button){font-family:inherit}
/* 旧ヘッダーの名残（テーマの .header / #menu など）が出ないようにする */
#wrap > .header,#wrap > .search{display:none}
/* ── ヘッダー（2026-09-20 ユーザー決定：元サイト sleepfreaks-dtm.com と同じ2段の作り）──────────────
上段＝ロゴ・SNS・検索（虫眼鏡）・無料体験レッスン（白地）／下段＝メニューだけ。
ロゴとボタンを上段に移してメニューに1段まるごと使えるようにし、小さい画面でもメニューが見えるようにした。
ヘッダーは固定しない（ページと一緒に流れる）。検索は虫眼鏡から開くパネルだけ（スマホの検索窓と「よく検索される」は廃止）。
以前の形（下の段だけ固定・上の段はSNSと検索窓）は Git の履歴にある */
.site-head{background:#fff;position:relative;z-index:100;border-bottom:3px solid var(--ink)}
/* 上段：ロゴ・SNS・検索・無料体験レッスン */
.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}
/* 元サイトのロゴは 910x102 の横長（高さ40pxで357px幅）。ロゴ画像に「MEDIA SITE」が含まれる */
.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}
/* ロゴ画像に「MEDIA SITE」が含まれているため、別途のラベルは重複になる。ロゴを縁ありの旧版へ戻す場合は display:block に戻す */
.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)}
/* レッスンサイトのヘッダーCTA（256×54／15.2px）と同寸 */
.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}
/* 下段：メニュー。760px以上（タブレットの縦向きを含む）はボタンを1行に並べる。それ未満（スマホ）は5つが1行に収まらないので「メニュー」ボタン（ドロワー）にする。
ナビの幅：15.2px で約900px／余白を詰めて約830px／13.5px で約720px */
.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} }
/* スマホだけ、SNSを下段（メニューボタンの右）に出す。上段はロゴ・検索・無料体験で幅がいっぱいのため */
.sf-sns-sp{display:none}
/* 検索パネル（虫眼鏡から開く）。上段の下端から出してメニューの段に重ね、開いている間はメニューを隠す（2026-09-20 ユーザー「メニューは表示しなくて大丈夫」） */
.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)}
/* input は既定で約20文字ぶんの幅を主張し、それ以下に縮まない。min-width:0 がないと狭い画面で検索ボタンが枠外へ押し出される */
.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)}
/* 画面が広いときは、メニューを横にゆったり広げて文字も大きく（2026-09-24 ユーザー）。
1280px未満は5つが1行に収まらなくなるので今までどおり */
@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} }
/* 2026-09-24 ユーザー決定（C案）：下段のメニューは横いっぱいに均等割りし、項目の間に縦線を入れる。
1100px未満は5項目が詰まるので、これまでどおり中央にまとめる */
@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}
/* 2026-09-24 ユーザー：両端（「DTMを学ぶ」の左と「DTMショップ」の右）にも線を入れる */
.gnav > *:first-child{border-left:1px solid #d8d3c4}
.gnav > *:last-child{border-right:1px solid #d8d3c4}
}
/* メガメニュー：レッスンサイト（sleepfreaks.co.jp）の「メニュー」に合わせる（2026-09-18）。
水色の地＋白いカード／番号バッジ／罫線で区切ったリンクと右端の矢印 */
.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}
/* カードは1枚300px前後。グループ数に合わせて幅を決め、少ないメニューが間延びしないようにする */
.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}
/* 「DTMを学ぶ」は10グループあるため、関連ごとに4列へ振り分ける（1枚のカードを広く取る） */
.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)}
/* DAWは名前の行全体が開閉ボタン（2026-09-19 ユーザー指示。以前は名前がリンクで▾だけが開閉＝分かりにくかった）。
親のリンク先は「初心者」と同じなので、名前を押すと下の項目（初心者・上級者など）が開く。6つのDAWすべて同じ形 */
.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}
/* DAWのアイコン（レッスンサイト sleepfreaks.co.jp のテーマ画像。572×572を28pxで使う） */
.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}
/* 3階層目（Cubase 初心者など）は字下げして一段軽く */
.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)}
/* 無料体験の大きなボタン（レッスンサイトと同じ形。色はこのサイトのCTAに合わせてコーラル） */
.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}}
/* 「メニュー」ボタン（メニューが1行に収まらない 760px 未満）。アイコンだけだと見落とすので文字を添える（2026-09-20） */
.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}
/* ── パンくず（全ページ共通。2026-09-22 ユーザー「現在のページを示している箇所がみにくい。サイトに合うように全ページで統一」）──
入れ物は2種類：記事・固定ページは本文の列の上の nav.crumbs、カテゴリー・検索・404・旧デザインのページはヘッダー下の .bread-wrap。
中身はどちらもプラグイン（Breadcrumb NavXT）の … > …。
区切りの「>」は文字なので、入れ物の文字サイズを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}