@charset "utf-8";
/*
 * 見た目の作り直し（2026-11-09・欧日協会ドイツ語ゼミナール）。common.css の後ろに読み、上書きする。
 * 5 回目: 日伊の本番（nichii-site main fe5d657・版 e73905a6）の modern.css を土台にそろえ直した。
 *   第 1 部（「欧日だけ」の見出しの前まで）は日伊の本番と同じ並び・同じ値。違いは次だけ:
 *     - :root の色の塊（欧日のオレンジ・コントラストは計算してコメントに書いた）と、見出しの下のドイツの三色の飾り
 *     - ★印 = 欧日の確かめで見つかった直し（日伊にもそのまま当てられる。日伊へ伝える）
 *     - ◆印 = 欧日の HTML が日伊と違うための形の違い（バナーの欄が aside の中・トップのカードの中身 など）
 *   第 2 部（「欧日だけ」）は欧日の HTML・index.css・DB の本文にだけある所。
 * 部品のクラス名（sg-…）は日伊と欧日で共通。全体の th・td には触らない（本文＝DB の表まで変わるため）。
 */

/* ===== サイトの色（ここだけサイトごと） ===== */
:root{
	/* コントラスト（WCAG 2.x の式で計算。普通の文字は 4.5:1 以上）。並びは
	   白 #fff / 地 --sg-bg #fffdf9 / 生成り --sg-bg-alt #faf5ec / 箱の面 --sg-surface #f6f1ea の上の文字の比。白い文字はその色の面に白を載せた比 */
	--sg-main:#df770c;        /* 主色（欧日のオレンジ）。線・飾りだけで文字には使わない（3.10 / 3.05 / 2.85 / 2.76） */
	--sg-main-dark:#a4520a;   /* 文字・線に使う濃いオレンジ（5.54 / 5.45 / 5.10 / 4.93。白い文字を載せて 5.54） */
	--sg-main-soft:#fdf1e4;   /* 主色の淡い面（濃いオレンジの文字 4.98・本文の文字 12.73） */
	--sg-accent:#b05108;      /* 申込のボタン（塗りに白い文字 5.22。2 番手の枠と文字 5.22 / 5.13 / 4.80 / 4.64）。4 回目の #b45309 は面の上で 4.47 だったので少し濃く */
	--sg-accent-dark:#8f4706; /* 申込のボタンの hover（白い文字 6.84） */
	--sg-accent-soft:#fdf0e6; /* 申込の 2 番手の面（申込の色の文字 4.66・hover の濃い色 6.11） */
	--sg-bg:#fffdf9;          /* ページの地（日伊と同じ） */
	--sg-bg-alt:#faf5ec;      /* 区切りの帯・フッター（日伊と同じ） */
	--sg-surface:#f6f1ea;     /* 情報の箱の面（欧日のベージュ・日伊 #f7f2ea とほぼ同じ） */
	--sg-line:#e8e1d6;
	--sg-text:#2b2b2b;        /* 14.16 / 13.94 / 13.04 / 12.60 */
	--sg-muted:#666;          /* 5.74 / 5.65 / 5.29 / 5.11 */
	--sg-link:#1f6fb8;        /* 5.22 / 5.14 / 4.81 / 4.64（主色の淡い面 4.69） */
	--sg-radius:12px;
	--sg-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(60,40,10,.06);
	/* 横幅: 外枠 1280px（左右の余白込み）・本文の段落は 1 行 40 字前後 */
	--sg-wrap:1280px;
	--sg-gutter:40px;
	--sg-measure:42em;
	--sg-header-h:104px;      /* 固定のヘッダー（101px＋上の線 3px） */
	/* フォント（案 B が既定。html の data-sg-font で切り替え） */
	--sg-font-system:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","YuGothic",Meiryo,system-ui,sans-serif;
	--sg-font-body:var(--sg-font-system);
	--sg-font-head:"Zen Kaku Gothic New",var(--sg-font-system);
	/* 欧日だけの飾り: 見出しの下のドイツの三色の小さな線（日伊はイタリアの三色） */
	--sg-flag:linear-gradient(90deg,#1f1f1f 0 33%,#d0021b 33% 66%,#f2b705 66%);
}
html[data-sg-font="A"]{
	--sg-font-body:"Noto Sans JP",var(--sg-font-system);
	--sg-font-head:"Noto Sans JP",var(--sg-font-system);
}
html[data-sg-font="C"]{
	--sg-font-body:"Noto Sans JP",var(--sg-font-system);
	--sg-font-head:"M PLUS 1p",var(--sg-font-system);
}

/* ===== 文字（全ページ） ===== */
body,
input,
button,
select,
textarea{
	font-family:var(--sg-font-body);
}
body{
	color:var(--sg-text);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* Verdana 先頭と letter-spacing 1px をやめる（欧文が横に広く古く見える主因） */
main,
#sn_top_content_l,
#sn_page_title h1,
#sn_page_title p,
.sn_title_1,
.sn_title_2{
	letter-spacing:normal;
}
.sg-layout > main{
	text-align:left;
}
/* ★ 日伊は main に 16px・1.9 を指定。欧日の main には文字サイズの切り替え（common.js）が style で font-size と line-height:1.8em を入れるので
   main の指定は効かない。内側の article で同じ 16px・1.9 にする（切り替えの 120%・140% はこれに掛かる） */
.sg-layout > main > article{
	font-size:114.29%; /* 16px */
	line-height:1.9;
}
/* ★ 見出し・講座名は両端揃えにしない（1 字ずつ空く・1〜2 字だけ次の行に落ちるのを防ぐ）。日本語は文節で折り返す（対応ブラウザだけ） */
.sg-layout h1,.sg-layout h2,.sg-layout h3,.sg-layout h4,
.sg-layout .sn_title_1,.sg-layout .sn_title_2,.sg-layout .sn_title_3,.sg-layout .sn_title_4,.sg-layout .sn_title_5,
#sn_page_title h1,#sn_page_title p{
	text-align:left;
	word-break:auto-phrase;
	text-wrap:pretty;
}
h1,h2,h3,h4,h5,
.sn_title_1,.sn_title_2,.sn_title_3,.sn_title_4,.sn_title_5,
#sn_page_title h1,
#sn_page_title p,
.sn_merit_title,
#sn_top_intro_r h2,
.sg-section-title{
	font-family:var(--sg-font-head);
	font-weight:700;
}
#sn_page_title h1,
#sn_page_title p{
	font-size:171.43%;
	letter-spacing:.02em;
	line-height:1.35;
}
/* ★ 本文のリンクの色: main a（詳しさ 0,0,2）では common.css の a:link（0,1,1）に負けて古い青 #4595e5（白 3.14）のまま → :link・:visited を付ける */
main a,
main a:link,
main a:visited{
	color:var(--sg-link);
	text-underline-offset:.2em;
}
/* ★ ↑ の :link・:visited はボタンと見出しの帯の白い文字（.sn_btn_gray a など 0,1,1）にも勝ってしまうので、同じ強さで白に戻す */
main .sn_btn_orange a:link, main .sn_btn_orange a:visited,
main .sn_btn_gray a:link, main .sn_btn_gray a:visited,
main .sn_btn_orange_small a:link, main .sn_btn_orange_small a:visited,
main .sn_btn_gray_small a:link, main .sn_btn_gray_small a:visited,
main .btn-sticky a:link, main .btn-sticky a:visited,
main .sn_title_1 a:link, main .sn_title_1 a:visited{
	color:#fff;
}

/* 見出し（本文の DB のクラスにも効く・形だけ今風に） */
.sn_title_1{
	border:0;
	box-shadow:none;
	border-radius:var(--sg-radius);
	background:var(--sg-main-dark); /* ★ 白い文字なので濃い主色（主色のままだと日伊 3.48・欧日 3.10 で足りない） */
	padding:.6em 1em;
	text-shadow:none;
}
.sn_title_1 a{ color:#fff; }
.sn_title_2,
.sg-section-title{
	border-left:5px solid var(--sg-main);
	border-radius:2px;
	padding:.1em 0 .1em .7em;
	font-size:121.43%;
}
.sn_title_4{
	border-bottom:2px solid var(--sg-main);
}

/* ボタン（DB の .sn_btn_orange などにも効く。白い枠・重い影・hover の青をやめる） */
.sn_btn_orange,
.sn_btn_gray,
.sn_btn_orange_small,
.sn_btn_gray_small{
	border:0 !important;
	border-radius:999px;
	box-shadow:0 2px 6px rgba(0,0,0,.12);
	background-color:var(--sg-accent);
}
.sn_btn_gray,
.sn_btn_gray_small{
	background-color:#666; /* ★ 日伊は #8a8a8a（白い文字 3.45）。#666 で 5.74 */
}
.sn_btn_orange a,
.sn_btn_gray a,
.sn_btn_orange_small a,
.sn_btn_gray_small a{
	border-radius:999px;
	color:#fff;
}
.sn_btn_orange a:hover,
.sn_btn_orange_small a:hover{
	background-color:var(--sg-accent-dark) !important;
}
.sn_btn_gray a:hover,
.sn_btn_gray_small a:hover{
	background-color:#555 !important; /* ★ 日伊は #6f6f6f */
}

.sg-btn{
	display:inline-block;
	-webkit-appearance:none;
	appearance:none;
	border:0;
	border-radius:999px;
	padding:.95em 2.8em;
	font-family:var(--sg-font-head);
	font-size:114.29%;
	font-weight:700;
	line-height:1.2;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.14);
	transition:background-color .2s, transform .2s, box-shadow .2s;
}
.sg-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.sg-btn--primary,
input.sg-btn.sg-btn--primary{
	background:var(--sg-accent) !important;
	color:#fff;
	border:0 !important;
	width:auto;
	min-width:260px;
	padding:.95em 2.8em !important;
}
.sg-btn--primary:hover,
input.sg-btn.sg-btn--primary:hover{
	background:var(--sg-accent-dark) !important;
}
.sg-btn--ghost{
	background:#fff;
	color:var(--sg-main-dark);
	box-shadow:inset 0 0 0 2px var(--sg-main);
}

/* 状態の印（満員・途中入会可・不成立。色はテンプレートのインラインの style） */
.sg-badge{
	letter-spacing:.04em;
	text-shadow:none;
	line-height:1.6;
}

/* ★ 区切りの文字（前の表の全角空白。src/theme/views/lesson.ts の sg-sep）。画面には出さないが文字としては残す（コピー・読み上げ・検索の抜粋で語が続かないように） */
.sg-sep{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:pre;
	border:0;
}

/* ===== 段組み（float をやめて grid。.sn_wrapper の 1080px は max-width） ===== */
body{ background:var(--sg-bg); }
#sn_contents{
	background:var(--sg-bg);
	box-shadow:none;
}
/* 2 回目: 白い箱を浮かせる作りをやめ、地と同じ色で幅を広く（外枠 1280px） */
#sn_contents .sn_wrapper.sg-layout{
	width:auto;
	max-width:var(--sg-wrap);
	box-sizing:border-box;
	background:transparent;
	border-radius:0;
	box-shadow:none;
}
#sn_contents .sn_wrapper.sg-layout:after{ content:none; }
.sg-layout > main,
.sg-layout > aside,
.sg-layout > .sg-below,
.sg-layout > aside > .sg-below{
	float:none;
	width:auto;
	margin:0;
	padding:0;
	min-width:0;
}
.sg-layout aside nav,
.sg-layout aside section,
.sg-below section{
	float:none;
	width:auto;
	padding-right:0;
}

/* ◆ バナーの欄（.sg-below）の HTML の置き場所: 日伊の本番は aside の後ろ、欧日は aside の中（ローカルナビの後ろ＝master と同じ）。
   フォームの中継のページ（/lesson/level_check/form.html・modern.css を読まない古い見た目）で両方を撮って比べたところ、
   どちらもバナー 15 枚・おすすめ情報 1 つで master と同じ数だが、aside の後ろだと本文の下に中身の無い箇条書きの点が並んで崩れた。
   aside の中なら master と同じく右の列のメニューの下に出る。見た目の位置（本文の下）は display:contents と grid で日伊と同じに作る */
@media screen and (min-width:769px){
	#sn_contents{ padding:8px 0 56px; }
	.sg-layout{
		display:grid;
		column-gap:56px;
		padding:40px var(--sg-gutter);
	}
	.sg-layout--full,
	.sg-layout--stack{
		grid-template-columns:minmax(0,1fr);
	}
	/* 案 1: 右の列は 260px・ローカルナビだけ（sticky）。バナーは本文の下 */
	.sg-layout--slim{
		grid-template-columns:minmax(0,1fr) 260px;
		grid-template-areas:"main aside" "below aside";
		align-items:start;
	}
	.sg-layout--slim > main{ grid-area:main; }
	.sg-layout--slim > .sg-below,
	.sg-layout--slim > aside > .sg-below{ grid-area:below; margin-top:56px; }
	.sg-layout--slim > aside{ display:contents; } /* ◆ */
	.sg-layout--slim .sg-localnav{
		grid-area:aside; /* ◆ */
		align-self:start;
		position:-webkit-sticky;
		position:sticky;
		top:124px; /* 固定のヘッダー（101px＋上の線 3px）の下 */
		max-height:calc(100vh - 144px);
		overflow:auto;
		margin:0;
	}
	/* 案 2: 右の列ごと本文の下 */
	.sg-layout--stack > aside{ margin-top:56px; }
	.sg-layout--stack .sg-localnav #sn_local_nav > ul{
		columns:3 200px;
		column-gap:24px;
	}
	.sg-layout--stack .sg-localnav #sn_local_nav > ul > li{ break-inside:avoid; }
}
@media screen and (min-width:769px) and (max-width:1080px){
	.sg-layout{ column-gap:32px; padding:32px 24px; }
	.sg-layout--slim{ grid-template-columns:minmax(0,1fr) 220px; }
	#sn_contents .sn_wrapper.sg-layout{ margin:0 auto; width:auto; }
}
@media screen and (max-width:768px){
	#sn_contents{ padding:0; }
	#sn_contents .sn_wrapper.sg-layout{
		display:flex; /* ◆ 日伊は block。欧日は aside の中のバナーを本文の直後へ並べ替えるため flex（見た目の並びは日伊と同じ 本文 → バナー → ローカルナビ） */
		flex-direction:column;
		padding:20px 16px 32px;
		border-radius:0;
		width:auto;
	}
	.sg-layout > main{ order:1; margin-bottom:40px; }
	.sg-layout > aside{ display:contents; }
	.sg-layout > .sg-below,
	.sg-layout > aside > .sg-below{ order:2; margin-bottom:32px; }
	.sg-layout > aside > .sg-localnav{ order:3; }
}

/* トップ: 右の列が無いので本文を幅いっぱい */
.sg-layout--full #sn_top_content_t,
.sg-layout--full #sn_top_content_l{
	float:none;
	width:auto;
	margin:0;
	padding-top:0;
}
.sg-layout--full > main article{ padding-top:0 !important; }

/* ===== バナー・注目情報・SNS ===== */
.sg-banners{
	display:grid;
	gap:28px;
	margin:2.5em 0;
}
.sg-banners #sn_recommend,
.sg-banners #sn_news{
	margin:0;
	float:none;
	width:auto;
}
.sg-banners #sn_news:empty{ display:none; }
.sg-banners #sn_recommend .sn_title_4,
.sg-layout aside .sn_title_4{
	font-family:var(--sg-font-head);
	font-size:114.29%;
	border:0;
	border-left:5px solid var(--sg-main);
	padding:.1em 0 .1em .7em;
	margin:0 0 .9em;
}
.sg-banners #sn_recommend .sn_block_1{
	width:auto;
	padding:0;
	margin:0;
}
.sg-banner-lead{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:16px;
	width:auto !important;
	margin:0 !important;
	padding:0 !important;
}
.sg-banner-lead p{
	float:none !important;
	width:auto !important;
	margin:0 !important;
}
.sg-banner-row{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:16px;
	margin:0 !important;
	padding:0 !important;
	list-style:none;
}
.sg-banners ul,
.sg-banners li{
	list-style:none;
}
.sg-banners #sn_news li{ margin:0; }
.sg-banner-row > li{
	float:none !important;
	width:auto !important;
	margin:0 !important;
	padding:0 !important;
}
.sg-banners a{
	display:block;
	border-radius:8px;
	background:none !important;
}
.sg-banners img,
#content .sg-banners img{
	display:block;
	width:100%;
	height:auto;
	border-radius:8px;
	box-shadow:0 1px 3px rgba(0,0,0,.10);
	transition:transform .2s, box-shadow .2s;
}
.sg-banners a:hover img{
	opacity:1;
	transform:translateY(-2px);
	box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.sg-below .sg-banner-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sg-layout--stack .sg-banner-row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media screen and (max-width:1024px){
	.sg-banner-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media screen and (max-width:640px){
	.sg-banner-row,
	.sg-below .sg-banner-row,
	.sg-layout--stack .sg-banner-row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
	.sg-banner-lead{ grid-template-columns:minmax(0,1fr); }
}

.sg-sns{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	margin:0;
	padding:0;
	list-style:none;
}
.sg-sns li{ margin:0; }
.sg-sns img{
	width:auto;
	height:56px;
	max-width:100%;
}
.sg-sns-widgets{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:16px;
}
.sg-sns-widgets section{ margin:0; }
.sg-sns-widgets:not(:has(iframe)) .twitter-timeline{ font-size:85.71%; color:var(--sg-muted); }

/* ===== 右の列のローカルナビ ===== */
.sg-localnav #sn_local_nav{
	border-radius:var(--sg-radius);
	overflow:hidden;
	box-shadow:0 0 0 1px var(--sg-line);
	margin-bottom:0;
}

/* ===== 講座の事実（灰色の表の代わり・src/theme/views/lesson.ts の lessonFacts） ===== */
.sg-lesson-facts{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	grid-auto-flow:row dense;
	gap:12px;
	margin:2.2em 0 1.5em;
	line-height:1.7;
}
.sg-fact{
	min-width:0;
	background:var(--sg-surface);
	border-radius:var(--sg-radius);
	padding:14px 18px 16px;
}
.sg-fact--wide{ grid-column:1 / -1; }
.sg-fact--teacher{ grid-column:span 2; }
.sg-fact__label{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0 0 .5em !important;
	font-size:85.71%;
	font-weight:700;
	color:var(--sg-main-dark);
	letter-spacing:.06em;
	line-height:1.4;
}
.sg-fact__label::before{
	content:"";
	flex:none;
	width:4px;
	height:1.05em;
	border-radius:2px;
	background:var(--sg-main);
}
.sg-fact__value > :last-child,
.sg-fact__value p:last-child{ margin-bottom:0; }
.sg-fact__value p{ margin:0 0 .25em; }
.sg-fact__text{ margin-top:.4em; }
.sg-chips{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0 !important;
	padding:0;
	list-style:none;
}
.sg-chips li{
	margin:0;
	padding:.15em .85em;
	border-radius:999px;
	background:#fff;
	box-shadow:inset 0 0 0 1px var(--sg-line);
	font-size:92.86%;
	line-height:1.6;
	list-style:none;
	word-break:auto-phrase; /* ★ 値の途中で割れにくく */
}
.sg-fact--price{
	background:#fff;
	box-shadow:inset 0 0 0 2px var(--sg-main);
}
.sg-price__main{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:4px 14px;
	margin:0 !important;
}
.sg-price__label{ font-weight:700; }
.sg-price__value{
	font-family:var(--sg-font-head);
	font-size:185%;
	font-weight:700;
	line-height:1.2;
	color:var(--sg-main-dark);
	letter-spacing:.01em;
}
.sg-price__note{
	display:flex;
	flex-wrap:wrap;
	gap:2px 20px;
	margin:.5em 0 0 !important;
	font-size:92.86%;
	color:var(--sg-muted);
}

/* 講師（講師が決まっている講座だけ。写真と名前・講師のページへ） */
.sg-teacher-list{
	display:flex;
	flex-wrap:wrap;
	gap:12px 24px;
	margin:0 !important;
	padding:0;
	list-style:none;
}
.sg-teacher{ margin:0; list-style:none; }
.sg-teacher a{
	display:flex;
	align-items:center;
	gap:16px;
	color:inherit !important;
	text-decoration:none;
}
.sg-teacher__photo,
#content .sg-teacher__photo{ /* WordPress テーマの #content img（width:auto）より強く */
	flex:none;
	width:84px;
	height:112px;
	object-fit:cover;
	border-radius:8px;
	border:3px solid #fff;
	box-shadow:0 2px 8px rgba(0,0,0,.15);
	background:#fff;
}
.sg-teacher__name{
	font-family:var(--sg-font-head);
	font-weight:700;
	font-size:121.43%;
	line-height:1.3;
	color:var(--sg-main-dark);
	border-bottom:1px solid transparent;
}
.sg-teacher a:hover .sg-teacher__name{ border-bottom-color:currentColor; }

@media screen and (max-width:1024px){
	.sg-lesson-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:640px){
	.sg-lesson-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
	.sg-fact{ padding:12px 14px 14px; }
	.sg-fact--teacher{ grid-column:1 / -1; }
	.sg-btn--primary,
	input.sg-btn.sg-btn--primary{ width:100%; min-width:0; }
}
/* ★ 480px 以下は 1 列（2 列だと「プライベートレッ／スン」のように選択肢の値が途中で割れる。欧日の確かめ 2 回目） */
@media screen and (max-width:480px){
	.sg-lesson-facts{ grid-template-columns:minmax(0,1fr); }
}

/* ===== 講座の一覧・料金一覧（テンプレートの .sn_lesson_list・.sn_table_price） ===== */
.sn_lesson_list{
	background:#fff;
	border:0;
	border-radius:var(--sg-radius);
	box-shadow:inset 0 0 0 1px var(--sg-line);
	padding:6px 0 4px;
}
.sn_lesson_list h2{ font-family:var(--sg-font-head); font-size:107.14%; }
.sn_lesson_list h2 a{ color:var(--sg-link); }

.sn_table_price{
	font-size:92.86%;
	border-collapse:separate;
	border-spacing:0;
	border-radius:var(--sg-radius);
	overflow:hidden;
	box-shadow:inset 0 0 0 1px var(--sg-line);
}
.sn_table_price th,
.sn_table_price td{
	border:0;
	border-bottom:1px solid var(--sg-line);
	padding:12px 14px;
	vertical-align:middle;
}
.sn_table_price th{
	background:var(--sg-main-soft);
	color:var(--sg-main-dark);
	font-weight:700;
	font-size:92.31%;
}
.sn_table_price tr:last-child td{ border-bottom:0; }
.sn_table_price tr:nth-child(odd) td{ background:#fcfbf8; }
@media screen and (max-width:640px){
	.sn_table_price th,
	.sn_table_price td{ padding:8px 6px; }
}
/* ★ 料金一覧の表をスマホで窮屈にしない（欧日の確かめ 3・4 回目の C-1・V4-1。テンプレートで表を .sg-table-scroll で包む＝src/theme/views/lesson.ts）
   列の幅: テンプレートの col width（25%・15%×5）をやめ、クラス名の列を広く・見出しと金額は折り返さない。値を並べる最後の 2 列（学習内容・レベル）は折り返す */
.sn_table_price col{ width:auto; }
.sn_table_price col:first-child{ width:40%; }
.sn_table_price th,
.sn_table_price td:not(:first-child){ white-space:nowrap; }
.sn_table_price td:nth-last-child(-n+2){ white-space:normal; min-width:6em; }
/* 横にずらせる箱（ページ全体ははみ出させない）。はみ出しているときだけ右端に続きの影を出し、右端までずらしたら消す */
.sg-table-scroll{
	position:relative;
	display:flex;
	overflow-x:auto;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	margin-bottom:10px;
	border-radius:var(--sg-radius);
}
.sg-table-scroll > .sn_table_price{
	flex:0 0 auto;
	width:100%;
	margin-bottom:0;
}
.sg-table-scroll::after{
	content:"";
	position:sticky;
	right:0;
	flex:0 0 18px;
	margin-left:-18px;
	border-radius:0 var(--sg-radius) var(--sg-radius) 0;
	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-table-scroll::after{
		animation:sg-table-more linear both;
		animation-timeline:scroll(nearest inline);
	}
}
@keyframes sg-table-more{
	0%, 92%{ opacity:1; }
	100%{ opacity:0; }
}
@media screen and (max-width:640px){
	.sn_table_price{ font-size:14px; }
	.sn_table_price th{ font-size:13px; }
	.sn_table_price th,
	.sn_table_price td{ line-height:1.5; }
	.sn_table_price col:first-child{ width:auto; }
	.sn_table_price td:first-child{ min-width:10em; }
	.sn_table_price td:first-child a{ font-size:13.5px; }
	@supports not (animation-timeline: scroll()){
		.sg-table-scroll::after{ opacity:1; }
	}
}

/* ===== お知らせなどの記事（写真の多い記事を読みやすく） ===== */
.sg-layout .sn_entry_body{
	padding:0 !important;
}
.sg-layout .sn_entry_body img,
.sg-layout .wp-block-image img{
	max-width:100%;
	height:auto;
	border-radius:8px;
}
.sg-layout .sn_entry_body p{ margin-bottom:1.2em; }
.sg-layout .sn_entry_body h2,
.sg-layout .sn_entry_body h3{ line-height:1.45; margin-top:2em; }
.sg-layout .sn_post_time{ margin-right:0 !important; }
.sg-layout .sn_entry_utility{ padding-left:0; }

/* ===== 汎用のカード ===== */
.sg-card{
	background:#fff;
	border-radius:var(--sg-radius);
	box-shadow:var(--sg-shadow);
	padding:20px 24px;
}

/* ===== トップ: お知らせ欄（高さ 215px 固定のスクロールをやめ、件数に合わせる） ===== */
.sg-layout--full .sn_top_info ul{
	height:auto;
	max-height:360px;
}
.sg-layout--full .sn_top_info li{
	font-size:92.86%;
	padding-top:.2em !important;
}
.sg-layout--full .sn_top_info .sn_title_4{
	padding-left:.7em !important;
	border-bottom:0;
	border-left:5px solid var(--sg-main);
	font-size:121.43%;
}
/* 古い Facebook の like-box（2015 年に廃止された部品）は、日伊では中身の無い枠だけが出るので本文の中では出さない。
   ◆ 欧日の Facebook の埋め込みは本番で投稿が出る（2026-11-09 に確認）ので、欧日（sg-banners--side-widgets）は隠さず右の細い列に置く */
.sg-banners--top:not(.sg-banners--side-widgets) .sg-sns-widgets section:has(> .fb-like-box){ display:none; }

/* =====================================================================
 * 2 回目（2026-11-09）: 横幅・地の色・見出しの写真・申込の導線・カードのアイコン
 * ===================================================================== */

/* ----- 横幅: ヘッダー・見出しの帯・フッターも外枠 1280px に（1081px 以上。それ以下は今までどおり） ----- */
@media screen and (min-width:1081px){
	header .sn_wrapper,
	#sn_page_title .sn_wrapper,
	footer .sn_wrapper{
		width:auto;
		max-width:var(--sg-wrap);
		box-sizing:border-box;
		padding-left:var(--sg-gutter);
		padding-right:var(--sg-gutter);
	}
}

/* ----- 読みやすい 1 行の長さ（本文の段落と箇条書きだけ。表・カード・写真は幅いっぱいのまま。お知らせの記事は回り込みの写真が離れるので対象外） ----- */
.sg-layout > main article > p,
.sg-layout > main article > ul,
.sg-layout > main article > ol,
.sg-layout > main article > section > p,
.sg-layout > main article > section > ul:not([class]),
.sg-layout--full #sn_top_content_l > section > p{
	max-width:var(--sg-measure);
}

/* ----- 下層の見出しの帯: 画面いっぱいの写真（文字は今の h1 をそのまま重ねる） ----- */
/* 欧日の写真: ドイツの古い街の屋根（Higgsfield・3 回目 job 30842940）。重ねの色は写真に合わせた暗い茶（日伊は暗い緑） */
#sn_page_title{
	position:relative;
	background:#4a2a14 url('../images/modern/band_altstadt-1600.webp') center 55% / cover no-repeat;
	isolation:isolate;
}
#sn_page_title::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:linear-gradient(90deg,rgba(38,20,8,.70) 0%,rgba(38,20,8,.46) 45%,rgba(38,20,8,.12) 100%);
}
#sn_page_title h1,
#sn_page_title p{
	background:none !important;
	margin:0;
	padding:64px 0 60px;
	color:#fff;
	text-shadow:0 2px 12px rgba(0,0,0,.35),0 1px 3px rgba(70,30,0,.55); /* ★ 2 つ目の影: 写真の明るい所でも白い文字が沈まないように */
	font-size:200%;
	letter-spacing:.04em;
}
@media screen and (min-width:1601px){
	#sn_page_title{ background-image:url('../images/modern/band_altstadt-2400.webp'); }
}
@media screen and (max-width:1024px){
	#sn_page_title{ background-image:url('../images/modern/band_altstadt-1024.webp'); }
}
@media screen and (max-width:768px){
	/* スマホの元の作り（左の線・白地）をやめて、写真の帯を低く */
	#sn_page_title{
		border-left:0;
		margin-bottom:1.5em;
		padding:0;
		background-color:#4a2a14;
		background-image:url('../images/modern/band_altstadt-640.webp');
	}
	#sn_page_title .sn_wrapper{ width:auto; padding:0 16px; }
	#sn_page_title h1,
	#sn_page_title p{
		padding:30px 0 28px;
		font-size:142.86%;
		line-height:1.4;
		background-color:transparent !important;
	}
}

/* ----- トップのメインビジュアル（.sg-hero・src/theme/modern.ts の withHeroPhoto） ----- */
/* 欧日の写真: ドイツの川沿いの古い街並み（Higgsfield・5 回目 job 58f73bdb・人物なし文字なし）。家並みが右にあるので、左にカードを重ねる */
html[data-sg-hero="new"] #sn_main_visual{
	position:relative;
	height:clamp(460px,40vw,600px) !important;
	background:var(--sg-bg-alt);
}
html[data-sg-hero="new"] #sn_main_visual > .sn_wrapper,
html[data-sg-hero="new"] #sn_main_visual_slide{ display:none !important; }
/* 模擬環境の ?sg_hero=old（今の画像）だけ: 画像の左右の端の色（#d27414 前後）で両脇をつなぐ（4 回目） */
html[data-sg-hero="old"] #sn_main_visual{ background:#d27414 none; }
.sg-hero{ position:relative; }
.sg-hero__photo,
.sg-hero__photo img{
	position:absolute;
	inset:0;
	display:block;
	width:100% !important;
	max-width:none !important;
	min-width:0 !important;
	height:100% !important;
}
.sg-hero__photo img{
	object-fit:cover;
	object-position:68% 50%;
}
#sn_main_visual .sg-hero__photo::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(255,253,249,.5) 0%,rgba(255,253,249,.12) 42%,rgba(255,253,249,0) 65%);
}
@media screen and (min-width:769px){
	.sg-hero #sn_top_cta{
		position:absolute;
		z-index:2;
		bottom:clamp(40px,5vw,72px);
		left:max(24px,calc((100% - var(--sg-wrap)) / 2 + var(--sg-gutter)));
		box-sizing:border-box;
		width:min(560px,calc(100% - 48px));
		padding:34px 38px 30px;
		text-align:left;
		background:rgba(255,255,255,.93);
		-webkit-backdrop-filter:blur(8px);
		backdrop-filter:blur(8px);
		border:0;
		border-radius:20px;
		box-shadow:0 12px 40px rgba(40,28,8,.18);
	}
	.sg-hero #sn_top_cta .sn_top_cta_main{
		margin:0 0 14px;
		max-width:none;
	}
	.sg-hero #sn_top_cta .sn_btn_orange_small{ margin:0 8px 12px 0; }
}
.sg-hero #sn_top_cta h1{
	font-family:var(--sg-font-head);
	font-size:192%;
	line-height:1.35;
	letter-spacing:.02em;
	color:var(--sg-main-dark);
	margin:0 0 10px;
}
.sg-hero #sn_top_cta .sn_top_cta_lead{
	font-size:100%;
	line-height:1.8;
	color:var(--sg-text);
	margin:0 0 20px;
}
.sg-hero #sn_top_cta .sn_top_cta_note{
	font-size:85.71%;
	color:var(--sg-muted);
}
@media screen and (max-width:768px){
	html[data-sg-hero="new"] #sn_main_visual{ height:auto !important; aspect-ratio:16 / 9; }
	#sn_main_visual .sg-hero__photo::after{ content:none; }
	.sg-hero #sn_top_cta{
		position:relative;
		z-index:2;
		margin:-36px 12px 0;
		padding:22px 18px 18px;
		text-align:center;
		background:#fff;
		border:0;
		border-radius:16px;
		box-shadow:0 8px 28px rgba(40,28,8,.14);
	}
	.sg-hero #sn_top_cta h1{ font-size:142.86%; }
	.sg-hero #sn_top_cta .sn_top_cta_lead{ font-size:92.86%; text-align:left; }
}
@media screen and (max-width:520px){
	html[data-sg-hero="new"] #sn_main_visual{ aspect-ratio:4 / 3; }
}

/* ----- 申込の導線: ボタンの色・形をそろえる（1 番手＝申込の色の塗り、2 番手＝白地に申込の色の枠） ----- */
.sn_btn_orange,
#sn_top_cta .sn_top_cta_main{
	background-color:var(--sg-accent) !important;
}
.sn_btn_orange a,
#sn_top_cta .sn_top_cta_main a{
	font-family:var(--sg-font-head);
	font-weight:700;
	letter-spacing:.04em;
}
#sn_top_cta .sn_top_cta_main a{
	padding:18px 28px;
	font-size:121.43%;
}
.sn_btn_orange_small{
	background-color:#fff !important;
	box-shadow:inset 0 0 0 2px var(--sg-accent),0 1px 3px rgba(0,0,0,.06) !important;
}
.sn_btn_orange_small a,
main .sn_btn_orange_small a:link,
main .sn_btn_orange_small a:visited{
	color:var(--sg-accent) !important; /* ★ 上の「白い文字に戻す」より強く（2 番手は白地に申込の色の文字・5.22） */
	font-weight:700;
	padding:.55em 1.4em;
}
.sn_btn_orange_small a:hover{
	color:#fff !important;
	background-color:var(--sg-accent) !important;
}
input.sg-btn.sg-btn--primary,
.sg-btn--primary{ background:var(--sg-accent) !important; }
/* ヘッダーの右（日伊は .sn_fl_trial・.sn_fl_contact の class で選ぶ）。◆ 欧日のヘッダーは DB の HTML に class が無いので、行き先で選ぶ → 下の「欧日だけ」の「ヘッダーの右上」 */

/* ----- スマホの画面の下に追従する申込の帯（html[data-sg-ctabar] のときだけ。日伊の本番は既定で出す） ----- */
.sg-ctabar{ display:none; }
@media screen and (max-width:768px){
	html[data-sg-ctabar] .sg-ctabar{
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		z-index:1100;
		display:flex;
		gap:6px;
		padding:8px 8px calc(8px + env(safe-area-inset-bottom));
		background:rgba(255,253,249,.96);
		-webkit-backdrop-filter:blur(8px);
		backdrop-filter:blur(8px);
		box-shadow:0 -4px 16px rgba(0,0,0,.10);
	}
	html[data-sg-ctabar] body{ padding-bottom:72px; }
	.sg-ctabar__item{
		flex:1 1 0;
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:44px;
		padding:4px 6px;
		border-radius:999px;
		font-family:var(--sg-font-head);
		font-weight:700;
		font-size:85.71%;
		line-height:1.25;
		text-align:center;
		text-decoration:none !important; /* ★ 欧日の common.css の a:link の下線（0,1,1）に負けないように */
		color:var(--sg-accent) !important;
		background:#fff;
		box-shadow:inset 0 0 0 2px var(--sg-accent);
	}
	.sg-ctabar__item--trial,
	.sg-ctabar__item--apply{ /* ◆ 欧日は体験を 11/17 まで隠すので、1 番手は「お申し込み」 */
		color:#fff !important;
		background:var(--sg-accent);
		box-shadow:none;
	}
	html[data-sg-ctabar] #sn_scroll_to_top{ bottom:80px; } /* ◆ 欧日の「上へ」のボタンが帯に重ならないように */
}

/* ----- トップの区画の見出しとカード（並び・リンク・文字は DB のまま） ----- */
/* ◆ 日伊の .sn_top_block（「目的から選ぶ」・アイコン・講師の並び）は欧日のトップに無い。欧日はお知らせと「5 つの特長」の見出しに同じ形を当てる */
.sg-layout--full .sn_top_block{ margin-bottom:4.5em; }
.sg-layout--full .sn_top_block > .sn_title_4,
.sg-layout--full .sn_top_info .sn_title_4,
.sg-layout--full #sn_top_content_l > section.sn_clear_fix:has(.sn_merit) > h2{
	border:0 !important;
	padding:0 !important;
	margin:0 0 1.1em;
	font-size:150%;
	letter-spacing:.04em;
	color:var(--sg-text);
	background:none;
}
.sg-layout--full .sn_top_block > .sn_title_4::after,
.sg-layout--full .sn_top_info .sn_title_4::after,
.sg-layout--full #sn_top_content_l > section.sn_clear_fix:has(.sn_merit) > h2::after{
	content:"";
	display:block;
	width:44px;
	height:4px;
	margin-top:.45em;
	border-radius:2px;
	background:var(--sg-flag); /* ドイツの三色の小さな線（日伊はイタリアの三色） */
}

/* お知らせ欄: 白いカードに */
.sg-layout--full .sn_top_info{
	box-sizing:border-box;
	background:#fff;
	border-radius:var(--sg-radius);
	box-shadow:var(--sg-shadow);
	padding:24px 28px 16px !important;
}
.sg-layout--full .sn_top_info ul{ max-height:none; border:0; min-height:0; }
.sg-layout--full .sn_top_info li{ border-bottom:1px solid var(--sg-line); padding:.7em 0 !important; }
.sg-layout--full .sn_top_info li:last-child{ border-bottom:0; } /* ★ 最後の線は要らない */
@media screen and (max-width:640px){
	.sg-layout--full .sn_top_info{ padding:18px 16px 10px !important; } /* ★ スマホの左右の余白 */
}

/* フッターの上に区切り */
footer{ border-top:1px solid var(--sg-line); }

/* トップの写真: index.css の #sn_main_visual img（固定の幅・高さ）より強く */
#sn_main_visual .sg-hero__photo img{
	position:absolute;
	inset:0;
	width:100% !important;
	max-width:none !important;
	min-width:0 !important;
	height:100% !important;
	object-fit:cover;
}

/* フッター: 灰色をやめて生成りの面に */
footer,
#sn_footer_in{
	background:var(--sg-bg-alt) none !important;
}

/* =====================================================================
 * 欧日だけ（欧日の HTML・index.css・DB の本文にある所）。日伊には要らない
 * ===================================================================== */

/* ----- トップのメインビジュアルのカード: 欧日は #sn_top_cta に見出し（h1）が無く、今の画像に書かれている文を説明の段落で出す。
   見出しの代わりに、説明の段落を少し大きく・見出しの書体に（文は変えない） ----- */
.sg-hero #sn_top_cta .sn_top_cta_lead{
	font-family:var(--sg-font-head);
	font-weight:700;
	font-size:121.43%;
	line-height:1.75;
	letter-spacing:.02em;
	color:var(--sg-text);
}
@media screen and (max-width:768px){
	.sg-hero #sn_top_cta .sn_top_cta_lead{ font-size:100%; }
}
/* 日伊は index.css に #sn_top_cta の形がある（1 番手は幅いっぱい・2 番手は横に並ぶ）。欧日の index.css には無いので同じ形をここで作る */
.sg-hero #sn_top_cta .sn_top_cta_main{ display:block; width:auto; }
.sg-hero #sn_top_cta .sn_top_cta_main a{ display:block; text-align:center; }
.sg-hero #sn_top_cta .sn_btn_orange_small{ display:inline-block; }

/* 本文の中で前の青 #4595e5（白 3.14）のままだったリンク → 新しい青 */
.sg-layout--full .sn_top_info li a:link,
.sg-layout--full .sn_top_info li a:visited{ color:var(--sg-text); } /* お知らせ欄の題名は master と同じ濃い文字 */
.sg-layout--full .sn_link_button a:link,
.sg-layout--full .sn_link_button a:visited{ color:#333; }
.sg-layout--full .sn_link_button a:hover{ color:var(--sg-link); }
main a.more-link:link,
main a.more-link:visited,
#content main a.more-link{ color:var(--sg-link); }
.sg-layout main #sn_top_content_t a,
.sg-layout main .twitter-timeline{ color:var(--sg-link); }
.sg-layout main .sn_allow_link_r a{ color:var(--sg-link); }
.sn_title_1 a{ text-decoration:underline; }

/* 講座ページ: 本文の右に浮いた「レベルチェック」の画像（align=right）と、その下の講座の表の箱がくっつかないように */
.sg-layout main img[align="right"]{ margin:0 0 16px 16px !important; }
.sg-lesson-facts{ clear:both; }
.sg-fact__value > p:last-of-type{ margin-bottom:0; }
.sg-fact__value strong{ font-weight:700; }
/* 学費: 受講料の「 : 」は小さく、金額だけ大きく */
.sg-price__main{ gap:4px 8px; }
.sg-price__label{ font-size:92.86%; }

/* 本文の中の「online」の黄色い印（DB の本文の style。#fdd35c に白い文字で 1.6:1）→ 文字を濃い茶色に（6.90:1） */
.sg-layout main span[style*="#fdd35c"]{ color:#5c3d00 !important; }
/* 講座の本文の「締切」の赤（DB の style の #ff0000・灰色の面で 3.60）→ 濃い赤 #c00000（5.84） */
.sg-layout main span[style*="#ff0000"],
.sg-layout main span[style*="#FF0000"]{ color:#c00000 !important; }

/* お知らせの分類の印（.sn_cat_icon。淡い色に白い文字で 1.6〜3.1:1）→ 同じ色合いのまま白い文字で 4.6:1 以上まで濃く */
.sn_cat_icon{ background-color:#757575; border-radius:999px; letter-spacing:.04em; }
.sn_cat_icon.color_1{ background-color:#4a8323; }
.sn_cat_icon.color_2{ background-color:#916e26; }
.sn_cat_icon.color_3{ background-color:#c54e35; }
.sn_cat_icon.color_4{ background-color:#4971ce; }
.sn_cat_icon.color_5{ background-color:#257f89; }
.sn_cat_icon.color_6{ background-color:#248541; }
.sn_cat_icon.color_7{ background-color:#cc4351; }
.sn_cat_icon.color_8{ background-color:#bd35c5; }
.sn_cat_icon.color_9{ background-color:#7861d4; }

/* 講座の一覧（meta_list）: 講座名が「概要」のボタンの下に潜らないよう右を空け、両端揃え・字間をやめる */
.sn_lesson_list h2 a{
	width:auto;
	padding-right:5.5em;
	text-align:left;
	letter-spacing:normal;
	word-break:auto-phrase;
	text-wrap:pretty;
}
.sn_lesson_list_body > :last-child,
.sn_lesson_meta_area > :last-child{ margin-bottom:0 !important; }
.sn_lesson_list_body{ border:0; border-top:1px solid var(--sg-line); border-radius:0 0 var(--sg-radius) var(--sg-radius); }
.sn_lesson_list{ margin-bottom:14px; }
/* 「概要」を押しやすく（見た目は小さいまま、押せる範囲を高さ 44px に） */
.sn_lesson_list_body_toggle{
	border-radius:999px;
	padding:4px 12px 3px;
	border-color:var(--sg-line);
}
.sn_lesson_list_body_toggle::after{
	content:"";
	position:absolute;
	left:-6px;
	right:-6px;
	top:50%;
	height:44px;
	transform:translateY(-50%);
}

/* ----- トップ（index.css）: 「5 つの特長」のカード（日伊のカードと同じ白・角丸・影）。PC は 2 列（5 は幅いっぱいで写真が左）、スマホは 1 列 ----- */
.sg-layout--full #sn_top_content_l > section.sn_clear_fix:has(.sn_merit){
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px;
}
.sg-layout--full #sn_top_content_l > section.sn_clear_fix:has(.sn_merit) > h2{
	grid-column:1 / -1;
	margin:0;
}
.sg-layout--full #sn_top_content_l > section.sn_clear_fix:has(.sn_merit)::after{ content:none; }
.sg-layout--full .sn_merit{
	float:none !important;
	width:auto !important;
	margin:0 !important;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	border-radius:var(--sg-radius);
	background:#fff;
	box-shadow:var(--sg-shadow);
	transition:transform .2s,box-shadow .2s;
}
.sg-layout--full .sn_merit:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(0,0,0,.06),0 12px 28px rgba(60,40,10,.10); } /* 日伊の .sn_card:hover と同じ */
.sg-layout--full .sn_merit_img{ margin:0; }
.sg-layout--full .sn_merit_img img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	object-fit:cover;
}
.sg-layout--full .sn_merit_title,
.sg-layout--full .sn_merit_body{ top:0; }
.sg-layout--full .sn_merit_title,
.sg-layout--full #sn_merit_3 .sn_merit_title,
.sg-layout--full #sn_merit_4 .sn_merit_title,
.sg-layout--full #sn_merit_5 .sn_merit_title{
	height:auto;
	margin:0;
	padding:.7em 20px !important;
	font-size:107.14%;
	line-height:1.45;
	background:var(--sg-main-dark); /* 白い文字 5.54:1 */
}
.sg-layout--full .sn_merit_body,
.sg-layout--full #sn_merit_3 .sn_merit_body,
.sg-layout--full #sn_merit_4 .sn_merit_body,
.sg-layout--full #sn_merit_5 .sn_merit_body{
	flex:1;
	display:flex;
	flex-direction:column;
	min-height:0;
	padding:14px 20px 16px !important;
	border:0;
	box-shadow:none;
	background:#fff;
	text-align:left;
}
.sg-layout--full .sn_merit_body p{ font-size:93.33%; line-height:1.85; }
.sg-layout--full .sn_merit_body p:not(.sn_allow_link_r){ margin-bottom:.6em; }
.sg-layout--full .sn_merit_body .sn_allow_link_r{
	position:static;
	margin-top:auto;
	padding-top:.4em;
	font-size:93.33%;
	font-weight:700;
}
@media screen and (min-width:1025px){
	.sg-layout--full #sn_merit_5{
		grid-column:1 / -1;
		display:grid;
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		grid-template-rows:auto 1fr;
	}
	.sg-layout--full #sn_merit_5 .sn_merit_img{ grid-row:1 / span 2; }
	.sg-layout--full #sn_merit_5 .sn_merit_img img{ height:100%; aspect-ratio:auto; }
}
@media screen and (max-width:640px){
	.sg-layout--full #sn_top_content_l > section.sn_clear_fix:has(.sn_merit){ grid-template-columns:minmax(0,1fr); }
}

/* トップ: 紹介の写真と文（「使えるドイツ語、話せるドイツ語の習得」）。見出しの #ea7a00（白 2.88）→ 濃いオレンジ（5.54） */
.sg-layout--full #sn_top_intro_r h2{ line-height:1.45; color:var(--sg-main-dark); }

/* トップ: 下の 4 つのリンクのタイル（index.css の右に 3% はみ出す作りと overflow:hidden で、端のタイルと影が切れていた） */
.sg-layout--full #sn_link_button_area{
	overflow:visible;
	width:auto;
}
.sg-layout--full #sn_link_button_area_in{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:14px;
	margin:0;
}
.sg-layout--full #sn_link_button_area_in::after{ content:none; }
.sg-layout--full .sn_link_button{
	float:none !important;
	width:auto !important;
	margin:0 !important;
}
.sg-layout--full .sn_link_button p{
	border:0;
	border-radius:var(--sg-radius);
	background-color:#fff;
	box-shadow:inset 0 0 0 1px var(--sg-line), 0 1px 3px rgba(0,0,0,.05);
	transition:box-shadow .2s, transform .2s;
}
.sg-layout--full .sn_link_button p:hover{
	transform:translateY(-2px);
	box-shadow:inset 0 0 0 1px var(--sg-line), 0 6px 16px rgba(0,0,0,.10);
}
.sg-layout--full .sn_link_button a{ background-position:right 12px center; }
.sg-layout--full .sn_link_button span{ text-shadow:none; font-family:var(--sg-font-head); }
@media screen and (max-width:768px){
	.sg-layout--full #sn_link_button_area_in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* トップ: SNS のアイコンの帯と、Facebook・X の埋め込み（PC ではお知らせとバナーの右の細い列＝sg-banners--side-widgets・src/theme/parts.ts） */
.sg-banners--top .sg-sns li{ flex:0 1 200px; min-width:0; }
.sg-banners--top .sg-sns img{ width:100%; height:auto; border-radius:6px; box-shadow:none; }
@media screen and (min-width:1025px){
	.sg-layout--full #sn_top_content_l:has(> .sg-banners--side-widgets){
		display:grid;
		grid-template-columns:minmax(0,1fr) 260px;
		column-gap:40px;
		align-items:start;
	}
	.sg-layout--full #sn_top_content_l:has(> .sg-banners--side-widgets) > *{ grid-column:1 / -1; }
	.sg-layout--full #sn_top_content_l > .sg-banners--side-widgets{ display:contents; }
	.sg-layout--full #sn_top_content_l:has(> .sg-banners--side-widgets) > #sn_news_area,
	.sg-banners--side-widgets > *{ grid-column:1; margin-bottom:28px !important; }
	.sg-banners--side-widgets > .sg-sns-widgets{
		grid-column:2;
		grid-row:1 / span 4;
		align-self:start;
		margin-bottom:0 !important;
	}
	.sg-banners--side-widgets .sg-banner-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.sg-banners--side-widgets .sg-sns-widgets{
	grid-template-columns:minmax(0,1fr);
	justify-items:center;
	align-content:start;
	gap:12px;
	padding:16px 10px;
	border-radius:var(--sg-radius);
	background:var(--sg-surface);
}
.sg-banners--side-widgets .sg-sns-widgets section{ width:100%; max-width:240px; }
.sg-banners--side-widgets .fb-like-box{ display:block; margin:0 auto; background:#fff; border-radius:6px; max-width:240px; }
.sg-banners--side-widgets .twitter-timeline{ display:block; text-align:center; font-size:92.86%; }
@media screen and (max-width:1024px){
	.sg-banners--side-widgets .sg-sns-widgets{ justify-self:center; width:100%; max-width:420px; box-sizing:border-box; }
}

/* ----- ヘッダー（欧日の DB の HTML は class が無いので行き先で選ぶ）。1 番手（塗り）= お申し込み／2 番手（白地に枠）= お問合わせ／3 番手（文字だけ）= 在校生向け ----- */
/* ロゴの上の小さな文（#888・白 3.54）→ #666（5.74） */
#sn_site_logo a{ color:#666; }
/* お申し込み・お問合わせ・在校生向けの帯（主色に白 3.10）→ 申込の色（5.22）。hover の黄色はやめて下線 */
#sn_form_link{ background-color:var(--sg-accent); }
#sn_form_link li a:hover{ color:#fff; text-decoration:underline; }
/* コピーライトの帯（主色に #eee で 2.67）→ 申込の色に白（5.22） */
#sn_copyright{ background-color:var(--sg-accent); color:#fff; }
@media screen and (min-width:521px){
	header #sn_form_link{
		display:flex;
		align-items:center;
		gap:8px;
		top:8px;
		padding:0;
		background:transparent;
		border-radius:0;
	}
	header #sn_form_link li{
		width:auto;
		height:auto;
		line-height:1.2;
	}
	header #sn_form_link li a{
		display:inline-flex;
		align-items:center;
		gap:6px;
		box-sizing:border-box;
		min-height:38px;
		padding:0 18px;
		border-radius:999px;
		font-family:var(--sg-font-head);
		font-size:13px;
		font-weight:700;
		letter-spacing:.04em;
		white-space:nowrap;
		text-decoration:none;
		box-shadow:none;
		transition:background-color .2s,color .2s;
	}
	/* 1 番手: お申し込み（日伊の .sn_fl_trial と同じ形・色） */
	header #sn_form_link a[href="/application/form.html"]{ background-color:var(--sg-accent); color:#fff; }
	header #sn_form_link a[href="/application/form.html"]:hover{ background-color:var(--sg-accent-dark); color:#fff; text-decoration:none; }
	/* 2 番手: お問合わせ（日伊の .sn_fl_contact と同じ形・色） */
	header #sn_form_link a[href="/contact/form.html"]{
		background-color:#fff;
		color:var(--sg-accent);
		box-shadow:inset 0 0 0 2px var(--sg-accent);
	}
	header #sn_form_link a[href="/contact/form.html"]:hover{ background-color:var(--sg-accent); color:#fff; text-decoration:none; }
	/* 3 番手: 在校生向け（文字だけ。在校生の入口なので目立たせない） */
	header #sn_form_link a[href="/cms/student/"]{
		padding:0 6px;
		color:var(--sg-muted);
		font-weight:400;
	}
	header #sn_form_link a[href="/cms/student/"]:hover{ color:var(--sg-text); text-decoration:underline; }
	/* 白い絵の印（common.css の bgi.png）は白地では見えないので、塗りのボタンだけ残す */
	header #sn_form_link a[href="/contact/form.html"] span,
	header #sn_form_link a[href="/cms/student/"] span{ display:none; }
	header #sn_form_link #sn_ico_appli{ margin:0; }
}
@media screen and (min-width:1081px){
	header #sn_form_link{ right:var(--sg-gutter); }
}
@media screen and (min-width:521px) and (max-width:1080px){
	header #sn_form_link{ right:12px; }
}
/* タブレット（521〜768px）: 文字サイズの箱がボタンの下に重なるので少し下げる */
@media screen and (min-width:521px) and (max-width:768px){
	header .sn_text_size_change{ top:50px; }
	header #sn_form_link{ top:6px; gap:6px; }
	header #sn_form_link li a{ padding:0 14px; }
}

/* ----- スマホのメニュー（common.js が #sn_form_link を写した #mobile_menu_2 と上の 6 項目 #mobile_menu_1）: 白地・線の区切り・押しやすい高さ 44px ----- */
#jPanelMenu-menu{ background:var(--sg-bg) none; }
#mobile_menu_body #mobile_menu_1 li a,
#mobile_menu_body #mobile_menu_2 li a{
	display:flex;
	align-items:center;
	min-height:44px;
	box-sizing:border-box;
	padding:8px 20px;
	font-family:var(--sg-font-head);
	text-shadow:none;
}
#mobile_menu_1 li{
	margin:0;
	border:0;
	border-bottom:1px solid var(--sg-line);
	border-radius:0;
	background-color:transparent;
	box-shadow:none;
}
#mobile_menu_1 li:first-child{ border-top:1px solid var(--sg-line); }
#mobile_menu_body #mobile_menu_1 li a{ color:var(--sg-text); padding:8px 8px; }
#mobile_menu_body #mobile_menu_1 li a::after{
	content:"";
	margin-left:auto;
	width:7px;
	height:7px;
	border-top:2px solid var(--sg-main-dark);
	border-right:2px solid var(--sg-main-dark);
	transform:rotate(45deg);
}
#mobile_menu_2 li{ margin:8px 0; border-radius:999px; background-color:#fff; border-color:var(--sg-accent); box-shadow:0 1px 3px rgba(0,0,0,.12); }
#mobile_menu_body #mobile_menu_2 li a{ justify-content:center; color:var(--sg-accent); }
#mobile_menu_2 li:has(> a[href="/application/form.html"]){ background-color:var(--sg-accent); }
#mobile_menu_body #mobile_menu_2 li a[href="/application/form.html"]{ color:#fff; }
#mobile_menu_body #mobile_menu_2 li a span{ display:none; }
#mobile_menu_2 li:has(> a[href="/cms/student/"]){ border-color:#ccc; }
#mobile_menu_body #mobile_menu_2 li a[href="/cms/student/"]{ color:#555; font-weight:400; }

/* ----- 本文の申込のボタン: 押しやすい高さ。体験・レベルチェックのフォーム（shibugai の /form/）へのボタンは一回り大きく ----- */
.sn_btn_orange a{ min-height:44px; box-sizing:border-box; }
.sn_btn_orange:has(> a[href*="shibugai.vercel.app/form/"]){
	max-width:100%;
	margin-top:1.2em;
	margin-bottom:1.2em;
	box-shadow:0 4px 14px rgba(176,81,8,.30);
}
.sn_btn_orange > a[href*="shibugai.vercel.app/form/"]{
	padding:18px 24px;
	font-size:114.29%;
}
input.sg-btn.sg-btn--primary{ min-height:52px; }

/* ----- フッター（スマホ）: お申し込み・お問合わせ・レベルチェックなどの文字のリンクを押しやすく（行の高さ 44px） ----- */
@media screen and (max-width:520px){
	#sn_footer_in .sn_footer_link_list_1 li a,
	#sn_footer_in #sn_footer_link_list_social li a{
		display:inline-block;
		padding-top:15px;
		padding-bottom:15px;
	}
	#sn_footer_in li{ margin:0; }
}

/* ----- 講座のページの「申し込む」→「前ページへ戻る」→ 下のバナーの間を詰める（確かめ B-3・C-4。見える空き 60px 前後） ----- */
.sg-layout main article > .sn_clear_b.sn_padding_t_30{ padding-top:28px !important; }
.sg-layout main article > div[id^="post-"]{ margin-bottom:0; padding-bottom:0; }
.sg-layout--slim > aside > .sg-below{ margin-top:32px; }
.sg-layout--slim > aside > .sg-below > .sg-banners{ margin-top:4px; }
@media screen and (max-width:768px){
	.sg-layout--slim > main{ margin-bottom:8px; }
	.sg-layout--slim > aside > .sg-below{ margin-top:28px; }
	.sg-layout--slim > aside > .sg-below > .sg-banners{ margin-top:0; }
}

/* ----- バナーの下のお知らせの一覧（#sn_news・JS で入る）の 1 行を押しやすく（確かめ C-5） ----- */
.sg-below #sn_news li{
	margin:0;
	padding:0 4px;
}
.sg-below #sn_news li a{
	display:block;
	padding:6px 0;
}
@media screen and (max-width:768px){
	.sg-below #sn_news li a{
		display:flex;
		align-items:center;
		min-height:44px;
		box-sizing:border-box;
		padding:8px 0;
	}
}

/* ----- スマホの狭い幅では本文の写真の回り込みをやめる（確かめ B-5・体験のページの細い列） ----- */
@media screen and (max-width:480px){
	.sg-layout main article img[align="right"],
	.sg-layout main article img[align="left"],
	.sg-layout main article .alignright,
	.sg-layout main article .alignleft,
	.sg-layout main article img[style*="float"]{
		float:none !important;
		display:block;
		margin:0 auto 16px !important;
		max-width:100%;
		height:auto;
	}
}

/* ----- 本文の表で、セルの中身がリンク 1 つだけのもの（体験のページのトライアルの 3 つ・講座の案内の講師名など）を押しやすく（確かめ C-6） ----- */
@media screen and (max-width:768px){
	.sg-layout main article table:not(.sn_table_price) td > a:only-child{
		display:inline-block;
		padding:12px 0;
	}
}

/* ----- グローバルメニューの文字（2026-11-09 オーナー「日伊も欧日もここなんか小さくない文字が？」）。日伊と同じ値にする -----
   common.css は 13px・太字・字間 1px・古い影。PC（769px 以上）だけ 15px の見出しの書体にし、影をやめる（スマホのメニューは別の作り） */
@media screen and (min-width:769px){
	#sn_global_nav li{ font-size:15px; }
	#sn_global_nav li a{
		font-family:var(--sg-font-head);
		font-weight:700;
		letter-spacing:.06em;
		color:var(--sg-text);
		text-shadow:none;
	}
}