/* =====================================================================
 * 共通部品の正本 css-fit（2026-11-10・日伊と欧日の合意）: どの幅で見ても崩れないようにする指定。src/theme/fit.ts（正本 theme-fit）と組み。
 * 欧日の崩れの一斉点検 2・3 回目（2026-11-09・10）で modern.css の末尾に置いたものを、そのまま 1 つのファイルにした（中身の指定は 1 つも変えていない）。
 * 読み込みは modern.css の直後（<link> の順で modern.css より後ろ）。サイトごとの値は無い。文字は変えない
 * ===================================================================== */
/* ◆ 本文の表を横にずらせる箱（src/theme/fit.ts の withTableFit が外側の表を div.sg-tscroll で包む）。ページ全体ははみ出さず、表だけを指で横に送る */
.sg-tscroll{
	max-width:100%;
	overflow-x:auto;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	margin-bottom:1em;
}
.sg-tscroll > table{ margin-bottom:0; }
/* スマホでは列の多い表のセルの左右の余白を詰め、画面の幅に収まる表を増やす（料金一覧の 4 列の表など） */
@media screen and (max-width:480px){
	.sg-tscroll--wide{ letter-spacing:0; }
	.sg-tscroll--wide > table th,
	.sg-tscroll--wide > table td{ padding-left:4px; padding-right:4px; }
}
/* ◆ 列の多い表（4 列以上）のセル: 意味の切れ目（<wbr>・空白・句読点の後ろ）だけで折る。「プライベ｜ート」「5｜級」「目｜安｜レ｜ベ｜ル」にしない。
   収まらない分は表が広がり、上の箱の中で横に送る（anywhere にすると列が 1 字幅まで縮むので break-word） */
.sg-cell,
.sg-layout .sg-cell{
	word-break:keep-all;
	overflow-wrap:break-word;
}
/* ◆ 2026-11-10（6 回目・日伊から）: セルの中のリンクは、記事の本文のリンクの「収まらないときはどこでも折る」（modern.css の .sg-layout .sn_entry_body a・下の p > a の anywhere）を
   受け継ぐと、keep-all のセルの中で「Giova｜nni A.」と英単語の途中で割れた → セルの中はセルと同じ break-word に戻す（空白の所で折れる） */
.sg-layout .sn_entry_body .sg-cell a,
.sg-layout main article .sg-cell p > a{ overflow-wrap:break-word; }
/* ◆ フッターのリンク・ローカルナビ・FAQ の問い・トップのアイコンのカード（src/theme/fit.ts が sg-phr を足す）。li は a の中の文字を balance でそろえる */
#sn_footer_in li.sg-phr{ text-wrap:balance; }
/* ◆ body の text-align:justify（common.css）を受け継ぐと、keep-all で折った行の字の間が広がる（「特 定 商 取 引 に 基 づ く」）。今回 sg-phr・sg-cell を足した所は左寄せ
   （中央寄せの指定のあるセル・ボタンはそれぞれの指定のまま） */
#sn_footer_in li.sg-phr,
#sn_local_nav .sg-phr,
.sn_accordion_top p.sg-phr,
.sn_prevnext_wrap.sg-phr,
.sn_link_button span.sg-phr,
.sg-tscroll--wide{ text-align:start; }
/* ◆ ローカルナビの頭（「欧日協会ドイツ語ゼミナール」）: 右の家のアイコン（right:20px）に文字がかぶらないよう右を空ける */
#sn_local_nav_home > span{ padding-right:44px; }
/* ◆ トップのアイコンのカード（よくあるご質問・会社情報など）: 右のアイコン（63×44）に文字がかぶらないよう、文字の右にアイコンの幅を空ける。
   スマホ（2 列）はアイコンを小さく（36px）して文字の幅を取る */
.sg-layout--full .sn_link_button span{ padding-right:calc(63px + 20px); }
@media screen and (max-width:768px){
	.sg-layout--full .sn_link_button a{ background-size:36px auto; background-position:right 10px center; }
	.sg-layout--full .sn_link_button span{ padding-left:14px; padding-right:calc(36px + 16px); }
}
/* ◆ 本文の段落の中の長い URL の文字（ブログ 90 の「http://www.bitters.co.jp/…」が幅 320〜390 で画面の外へ出て切れていた）: 収まらないときだけ途中で折る。表の中は対象外（列が 1 字幅まで縮むため） */
.sg-layout main article p > a{ overflow-wrap:anywhere; }
/* ◆ ブログの前後の記事へのリンク: スマホ（520px 以下）は左右 2 つに並べると 1 つの幅が約 130px しかなく、題名が「ドイツ映画の中｜のドイツ」と語の途中で折れていた。
   縦に並べて幅いっぱいにする（前の記事 → 次の記事 → ブログトップへ戻る） */
@media screen and (max-width:520px){
	.sn_blog_nav .sn_prev,
	.sn_blog_nav .sn_next{ float:none; width:auto; margin:0 0 10px; }
}
/* ◆ 講座のページの受講料の値（「お一人様2,400円/60分」）を「60｜分」「2,400｜円」で折らない（「/」の後ろでは折れる）。
   値は「受講料 :」の横に並ばなければ次の行へ回る（flex）。それでも収まらないときだけ途中で折る */
.sg-price__value{ max-width:100%; word-break:keep-all; overflow-wrap:anywhere; }
/* スマホは値の文字（185%）を画面の幅に合わせて少し小さく（幅 320 で 21.8px）。「39,600円」のような短い値の見た目はほぼ同じ */
@media screen and (max-width:480px){
	.sg-price__value{ font-size:min(185%, 6.8vw); }
}

/* ===== 崩れの一斉点検 3 回目（2026-11-10・欧日の確かめ V-1〜V-6） ===== */
/* ◆ V-1・V-2: src/theme/fit.ts が数字と単位（「2,400円*」「90分×11回」）を span.sg-nobr にしたものは折らない（表のセルの中・引用の箱の中） */
.sg-tscroll .sg-nobr,
.sg-phr .sg-nobr{ white-space:nowrap; }
/* ◆ V-1: 文の無い引用の箱（料金一覧のトライアル料金の箇条・fit.ts が sg-phr sg-phr--left を足す）は左寄せのまま、最後の行を短くしすぎない（日伊の正本 7 回目と同じ） */
.sg-phr.sg-phr--left{ text-align:start; text-wrap:pretty; }
/* ◆ V-3: 横に送る表の箱（div.sg-tscroll）にも、料金の表の箱（.sg-table-scroll）と同じ右端の影を出す。送れる（表が箱より広い）間だけ出し、右端まで送ったら消す。
   影を表の上に重ねるため、箱を横並び（flex）にして影を表の後ろの sticky の要素にする。表の幅の決まり方は前と同じ
   （幅の指定の無い表は中身に合わせて箱の幅まで縮み、それより縮められない分だけ横に送る。width="100%" の表は箱の幅） */
.sg-tscroll{ display:flex; align-items:flex-start; }
.sg-tscroll > table{ flex:0 1 auto; }
.sg-tscroll > table[align="center"]{ margin-left:auto; margin-right:auto; }
.sg-tscroll::after{
	content:"";
	position:sticky;
	right:0;
	align-self:stretch;
	flex:0 0 18px;
	margin-left:-18px;
	background:linear-gradient(to left,rgba(60,40,20,.20),rgba(60,40,20,0));
	pointer-events:none;
	opacity:0;
}
@supports (animation-timeline: scroll()){
	.sg-tscroll::after{
		animation:sg-table-more linear both;
		animation-timeline:scroll(nearest inline);
	}
}
/* 送れるかを CSS で測れない古いブラウザ（iOS 18 までの Safari など）は、スマホの列の多い表（送ることが多い）だけ影をいつも出す（料金の表の箱と同じ考え方） */
@supports not (animation-timeline: scroll()){
	@media screen and (max-width:480px){
		.sg-tscroll--wide::after{ opacity:1; }
	}
}
/* ◆ V-6: ブログの前後のリンク（スマホで縦に並べた形）: 箱の高さを中身に合わせ、矢印を文字の高さの真ん中に置く（短い題名で「上に字・下が空き」、矢印と字の高さがずれていた） */
@media screen and (max-width:520px){
	.sn_blog_nav .sn_prevnext_wrap{ position:relative; min-height:0; padding-top:10px; padding-bottom:10px; }
	.sn_blog_nav .sn_prev .sn_prevnext_wrap{ padding-left:24px; }
	.sn_blog_nav .sn_next .sn_prevnext_wrap{ padding-right:24px; }
	.sn_blog_nav .sn_ico_arrow_l_blue,
	.sn_blog_nav .sn_ico_arrow_r_blue{ position:absolute; top:50%; float:none; margin:-6px 0 0; }
	.sn_blog_nav .sn_ico_arrow_l_blue{ left:9px; }
	.sn_blog_nav .sn_ico_arrow_r_blue{ right:9px; }
}
/* ◆ V-2: 列の少ない表の、短い行を並べた値のセル（fit.ts の sg-cell sg-cell--soft・料金一覧のグループレッスンの表の「レッスン例」）は、
   列の多い表のセルと同じく意味の切れ目だけで折る（「試験対策｜クラス」「インテンシブ｜クラス」）。 */
/* ◆ fit.ts が足す折れないかたまりの span（sg-nobr sg-keep）は、ただの包み。ローカルナビの「#sn_local_nav ul span{display:block;padding…}」のような
   span に付いた指定を受けないよう、全部を外してから折らないだけにする（「2026年｜10～12月」が別々の行の箱になった）。:is(#sn_local_nav,*) は id の重さを持たせるため */
/* 2026-11-10（6 回目・日伊から）: phrase.ts が開き括弧と次の 1 字を包む span.sg-nobr（sg-keep の付かない包み）も、ローカルナビでは同じ指定を受けて
   括弧から後ろが別の行の箱になった → ローカルナビの中の sg-nobr も同じく外す（.sg-nobr を 3 つ重ねるのは「#sn_local_nav span.no_link:hover span」より重くするため） */
:is(#sn_local_nav,*) span.sg-keep.sg-keep.sg-keep,
#sn_local_nav span.sg-nobr.sg-nobr.sg-nobr{ all:unset; white-space:nowrap; }
/* 幅 400px 以下: その表（値のセルが sg-cell--soft の表）は、列の多い表と同じくセルの左右の余白を詰め、字間を 0 にして、幅 320 でも表を画面に収める */
@media screen and (max-width:400px){
	.sg-tscroll:has(.sg-cell--soft){ letter-spacing:0; }
	.sg-tscroll:has(.sg-cell--soft) > table th,
	.sg-tscroll:has(.sg-cell--soft) > table td{ padding-left:4px; padding-right:4px; }
	/* 見出しの「料金（税込）」（phrase.ts の 6 字以下の 1 行のまま＝sg-nowrap）は「（」の前で折ってよい（1 行のままだと幅 320〜330 で表が 19px 広がり、金額の列が隠れた） */
	.sg-tscroll:has(.sg-cell--soft) > table th.sg-phr.sg-nowrap{ white-space:normal; text-wrap-mode:wrap; }
}
/* ◆ 3 列のボタンの並び（ul.sn_list_3col・会社情報の「御挨拶・企業理念・沿革…」・講師の一覧など）: common.css は float と右 -3.5% の余白で作っていて、
   余白の小さい幅（640〜768）で箱が画面の右へはみ出していた（日伊は 768 で画面の外・欧日は約 10px）。同じ幅と間（3.5%）の grid にして箱を本文の幅に収める
   （1 つの幅＝本文の幅から 2 つの空きを引いた 3 分の 1・520px 以下は 2 列・sn_list_1col_xs は 1 列。並び・中身は同じ）。
   2026-11-10（6 回目）: 日伊の modern.css の共通部分（grid）と欧日の fit.css（flex）の 2 か所にあったのを、ここ 1 か所にまとめた（日伊の grid の形。幅と間は flex と同じ） */
.sg-layout .sn_list_3col{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	column-gap:3.5%;
	margin-right:0 !important;
}
.sg-layout .sn_list_3col::after{ display:none; }
.sg-layout .sn_list_3col > li{
	float:none;
	width:auto;
	margin:0 0 10px 0 !important;
}
@media screen and (max-width:520px){
	.sg-layout .sn_list_3col{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.sg-layout .sn_list_3col.sn_list_1col_xs{ grid-template-columns:minmax(0,1fr); }
}

/* スマホの下の申込の帯（.sg-ctabar__item は display:flex）の中では、phrase.ts の包み span.sg-nobr が flex の子になって 1 行に伸び、
   幅 320 で右のボタンが画面の外で切れる（日伊「レベルチェック（無料）」・2026-11-10 日伊の指摘）。帯の中では包みを効かせない */
.sg-ctabar span.sg-nobr{ display:contents; }