@charset "utf-8";
/*
 * 見た目の作り直し（2026-11-09 試作・日伊学院）。common.css の後ろに読み、上書きする。
 * 部品のクラス名（sg-…）は日伊と欧日で共通。サイトごとに違うのは下の :root の色の変数だけ（欧日へ写すときは変数だけ替える）。
 * 全体の th・td（common.css 139〜150 行の灰色）には触らない（本文＝DB の表まで変わるため）。新しい形は sg- の中だけに効かせる。
 */

/* ===== サイトの色（ここだけサイトごと） ===== */
:root{
	/* 2 回目（2026-11-09）: 紙の質感の灰色をやめ、明るい白地＋イタリアの温かみ（生成り・テラコッタ）に。欧日はこの塊の値だけ替える */
	--sg-main:#2f9c5e;        /* 主色（日伊の緑） */
	--sg-main-dark:#1d6b45;   /* 文字・線に使う濃い緑（白地で 6.5:1） */
	--sg-main-soft:#eaf5ee;   /* 主色の淡い面 */
	--sg-accent:#b54e0d;      /* 申込のボタン（テラコッタのオレンジ・白文字 5.17:1。確かめ役が #c4570f＝4.45:1 から AA の 4.5 以上へ濃くした） */
	--sg-accent-dark:#a3470b;
	--sg-accent-soft:#fdf0e6; /* 申込の 2 番手のボタンの面 */
	--sg-bg:#fffdf9;          /* ページの地（ほんのり温かい白） */
	--sg-bg-alt:#faf5ec;      /* 区切りの帯・フッターの上の面（生成り） */
	--sg-surface:#f7f2ea;     /* 情報の箱の面 */
	--sg-line:#ebe4d8;
	--sg-text:#262626;
	--sg-muted:#666;
	--sg-link:#1f6fb8;
	--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);
}
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{
	font-size:114.29%; /* 16px（2 回目: 15px から上げた） */
	line-height:1.9;
	text-align:left;
}
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;
}
/* ★ 3 回目（欧日 3ac57cc を写す）: main a（詳しさ 0,0,2）では common.css の a:link（0,1,1）に負けて古い青 #4595e5（白地 3.14:1）のままになる → :link・:visited を付ける */
main a,
main a:link,
main a:visited{
	color:var(--sg-link);
	text-underline-offset:.2em;
}
/* ↑ の :link・:visited（0,1,2）は .sn_btn_gray a などの白い文字（0,1,1）にも勝ってしまうので、白い文字のリンクは同じ強さで白に戻す
   （日伊の本番の HTML で main の中に出るもの: sn_btn_orange・sn_btn_gray（戻る）・sn_btn_gray_small・sn_title_1・a.sg-btn--primary。
    sn_btn_orange_small・sg-ctabar・ヘッダーの申込ボタンは !important か main の外なので元から負けない） */
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_gray_small a:link, main .sn_btn_gray_small a:visited,
main .sn_title_1 a:link, main .sn_title_1 a:visited,
main a.sg-btn--primary:link, main a.sg-btn--primary:visited{
	color:#fff;
}
main a.sg-btn--ghost:link,
main a.sg-btn--ghost:visited{ color:var(--sg-main-dark); }
/* トップのお知らせ欄の題名と下の 4 つのタイルは今までと同じ濃い文字（index.css の #333。hover で新しい青） */
.sg-layout--full .sn_top_info li a:link,
.sg-layout--full .sn_top_info li a:visited,
.sg-layout--full .sn_link_button a:link,
.sg-layout--full .sn_link_button a:visited{ color:#333; }
.sg-layout--full .sn_top_info li a:hover,
.sg-layout--full .sn_link_button a:hover{ color:var(--sg-link); }
/* お知らせ一覧の「続きを読む」（common.css の .sn_page_news .more-link で古い青 #4595e5 のまま）→ 新しい青 */
main a.more-link:link,
main a.more-link:visited{ color:var(--sg-link); }

/* 見出し（本文の DB のクラスにも効く・形だけ今風に） */
.sn_title_1{
	border:0;
	box-shadow:none;
	border-radius:var(--sg-radius);
	background:var(--sg-main);
	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:#8a8a8a;
}
.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:#6f6f6f !important;
}

.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;
}

/* ===== 段組み（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{
	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;
}

@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: 右の列は 240px・ローカルナビだけ（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{ grid-area:below; margin-top:56px; }
	.sg-layout--slim > aside{ grid-area:aside; align-self:stretch; }
	.sg-layout--slim .sg-localnav{
		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:block;
		padding:20px 16px 32px;
		border-radius:0;
		width:auto;
	}
	.sg-layout > main{ margin-bottom:40px; }
	.sg-layout > .sg-below{ margin-bottom:32px; }
}

/* トップ: 右の列が無いので本文を幅いっぱい */
.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;
}
.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; }
}

/* ===== 講座の一覧・料金一覧（テンプレートの .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){
	/* 3 回目（欧日 cb5a6c0・86926bb を写す）: スマホで見出しや金額が 1 字ずつ縦に折れないように、文字・余白を詰め、列ごとに最小の幅を決める。
	   日伊の表は 5 列（クラス名・受講料（2 行目に「1回あたり」）・教材費・学習内容・レベル）で、HTML に横スクロールの箱が無いので、
	   表そのものを横にずらせる箱にする（表 → display:flex の箱、中の tbody → 表。ページ全体ははみ出させない）。右端の影は欧日と同じ */
	.sn_table_price{
		display:flex;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		-webkit-overflow-scrolling:touch;
		max-width:100%;
		box-sizing:border-box;
		font-size:14px;
		box-shadow:none;
		border:1px solid var(--sg-line);
	}
	.sn_table_price > colgroup{ display:none; } /* 25%・15% などの決め打ちの幅をやめる */
	.sn_table_price > tbody{
		display:table;
		flex:0 0 auto;
		width:100%; /* 収まるときは箱の幅、収まらないとき（最小の幅が箱より広い）だけ広がって横にずれる */
		border-collapse:separate;
		border-spacing:0;
	}
	.sn_table_price th{ font-size:13px; white-space:nowrap; }
	.sn_table_price th,
	.sn_table_price td{ padding:8px 6px; line-height:1.5; }
	.sn_table_price td:first-child{ min-width:10em; }
	.sn_table_price td:first-child a{ font-size:13.5px; }
	/* 受講料: 「39,600円」「（1回あたり」「3,600円）」が数字と「円」の間で折れない幅 */
	/* （確かめ役: 6em ではプライベートの「は2,400円/30分)」が「30 / 分)」で折れたので 7em） */
	.sn_table_price td:nth-child(2){ min-width:7em; }
	.sn_table_price td:nth-child(3){ min-width:4em; } /* 教材費: 「受講料に含む」を 2 行に */
	/* 値を並べる「学習内容」「レベル」（最後の 2 列）は「, 」で折り返す
	   （確かめ役: 学習内容は 4.5em では「文法・講 / 読」と語の中で折れたので 5.5em） */
	.sn_table_price td:nth-last-child(-n+2){ min-width:5.5em; }
	.sn_table_price td:last-child{ min-width:6em; } /* レベル: 「入門, 初級, 中級, 上級, レベル不問」を 3 行に */
	.sn_table_price::after{
		content:"";
		position:sticky;
		right:0;
		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:1; /* 連動のアニメーションが使えないブラウザでは出したまま */
	}
}
/* はみ出しているときだけ影を出し、右端までずらしたら消す（スクロールに連動するアニメーション） */
@supports (animation-timeline: scroll()){
	@media screen and (max-width:640px){
		.sn_table_price::after{
			opacity:0; /* はみ出していないとき（タイムラインが無効）は出さない */
			animation:sg-table-more linear both;
			animation-timeline:scroll(nearest inline);
		}
	}
}
@keyframes sg-table-more{
	0%, 92%{ opacity:1; }
	100%{ opacity:0; }
}

/* ===== お知らせなどの記事（写真の多い記事を読みやすく） ===== */
.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 年に廃止された部品）は、今は中身の無い 240×500 の枠だけが出る（2026-11-09 に確認）。
   右の列では目立たなかったが、本文の中では大きな空白になるので出さない（DB の aside_extra_html はそのまま） */
.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 をそのまま重ねる） ----- */
#sn_page_title{
	position:relative;
	background:#3c4a3f url('../images/modern/band_firenze-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(20,30,22,.62) 0%,rgba(20,30,22,.38) 45%,rgba(20,30,22,.08) 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);
	font-size:200%;
	letter-spacing:.04em;
}
@media screen and (min-width:1601px){
	#sn_page_title{ background-image:url('../images/modern/band_firenze-2400.webp'); }
}
@media screen and (max-width:1024px){
	#sn_page_title{ background-image:url('../images/modern/band_firenze-1024.webp'); }
}
@media screen and (max-width:768px){
	/* スマホの元の作り（左の緑の線・白地）をやめて、写真の帯を低く */
	#sn_page_title{
		border-left:0;
		margin-bottom:1.5em;
		padding:0;
		background-color:#3c4a3f;
		background-image:url('../images/modern/band_firenze-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） ----- */
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{ 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{
	color:var(--sg-accent) !important;
	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; }
/* ヘッダーの右: 体験レッスン（1 番手）・申込・お問い合わせ（2 番手）。hover の青をやめる */
#sn_form_link.sn_form_cta .sn_fl_contact a,
#sn_form_link.sn_form_cta .sn_fl_trial a{
	border-radius:999px;
	box-shadow:none;
	font-weight:700;
	transition:background-color .2s,color .2s;
}
#sn_form_link.sn_form_cta .sn_fl_trial a{ background-color:var(--sg-accent); }
#sn_form_link.sn_form_cta .sn_fl_contact a{
	background-color:#fff;
	color:var(--sg-accent);
	box-shadow:inset 0 0 0 2px var(--sg-accent);
}
#sn_form_link.sn_form_cta .sn_fl_trial a:hover{ background-color:var(--sg-accent-dark); color:#fff; }
#sn_form_link.sn_form_cta .sn_fl_contact a:hover{ background-color:var(--sg-accent); color:#fff; }
#mobile_menu_2.sn_form_cta .sn_fl_trial{ background-color:var(--sg-accent); }

/* ----- スマホの画面の下に追従する申込の帯（候補・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;
		color:var(--sg-accent) !important;
		background:#fff;
		box-shadow:inset 0 0 0 2px var(--sg-accent);
	}
	.sg-ctabar__item--trial{
		color:#fff !important;
		background:var(--sg-accent);
		box-shadow:none;
	}
}

/* ----- トップの区画の見出しとカード（「目的から選ぶ」にアイコン。並び・リンク・文字は DB のまま） ----- */
.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{
	border:0 !important;
	padding:0 !important;
	margin:0 0 1.1em;
	font-size:150%;
	letter-spacing:.04em;
	color:var(--sg-text);
}
.sg-layout--full .sn_top_block > .sn_title_4::after,
.sg-layout--full .sn_top_info .sn_title_4::after{
	content:"";
	display:block;
	width:44px;
	height:4px;
	margin-top:.45em;
	border-radius:2px;
	background:linear-gradient(90deg,var(--sg-main) 0 33%,#e8e4dc 33% 66%,#d24b3a 66%); /* イタリアの三色の小さな線 */
}
.sg-layout--full .sn_cards{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:20px;
}
.sg-layout--full .sn_card{
	width:auto;
	margin:0;
	padding:22px 22px 20px;
	background:#fff;
	border:0;
	border-radius:var(--sg-radius);
	box-shadow:var(--sg-shadow);
	transition:transform .2s,box-shadow .2s;
}
.sg-layout--full .sn_card:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(0,0,0,.06),0 12px 28px rgba(60,40,10,.10); }
.sg-layout--full .sn_card h3{
	font-family:var(--sg-font-head);
	font-size:121.43%;
	color:var(--sg-main-dark);
	margin-bottom:.5em;
}
.sg-layout--full .sn_card p{ font-size:100%; line-height:1.8; }
.sg-layout--full .sn_card .sn_allow_link_r{ margin-top:.8em; font-weight:700; }
/* アイコンは載っているリンクの行き先で選ぶ（並びが変わってもずれない） */
.sg-layout--full .sn_card:not(.sn_card_strength)::before{
	content:"";
	display:block;
	width:56px;
	height:56px;
	margin:0 0 14px;
	background:no-repeat center / contain;
}
.sg-layout--full .sn_card:has(a[href*="lesson_news_group/taiken"])::before{ background-image:url('../images/modern/icon_beginner.svg'); }
.sg-layout--full .sn_card:has(a[href*="/lesson/private"])::before{ background-image:url('../images/modern/icon_private.svg'); }
.sg-layout--full .sn_card:has(a[href*="lesson_news_group/examination"])::before{ background-image:url('../images/modern/icon_exam.svg'); }
.sg-layout--full .sn_card:has(a[href*="/lesson/level_check"]):not(:has(a[href*="examination"]))::before{ background-image:url('../images/modern/icon_levelcheck.svg'); }
/* 4 つの強み: 写真を上に大きく */
.sg-layout--full .sn_card_strength{ padding:0 0 20px; overflow:hidden; }
.sg-layout--full .sn_card_strength img,
#content .sg-layout--full .sn_card_strength img{
	width:100%;
	aspect-ratio:4 / 3;
	object-fit:cover;
	margin:0 0 16px;
	border-radius:0;
}
.sg-layout--full .sn_card_strength h3,
.sg-layout--full .sn_card_strength p{ padding:0 20px; }
@media screen and (max-width:1024px){
	.sg-layout--full .sn_cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:520px){
	.sg-layout--full .sn_cards{ grid-template-columns:minmax(0,1fr); gap:14px; }
	.sg-layout--full .sn_card:not(.sn_card_strength){ display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:14px; }
	.sg-layout--full .sn_card:not(.sn_card_strength)::before{ grid-row:1 / span 3; width:48px; height:48px; margin:0; }
}

/* お知らせ欄: 白いカードに */
.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;
}
.sg-layout--full .sn_top_info ul{ max-height:none; border:0; }
.sg-layout--full .sn_top_info li{ border-bottom:1px solid var(--sg-line); padding:.7em 0 !important; }

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

/* トップの写真: index.css の #sn_main_visual img（幅 810px・高さ 188px の固定）より強く */
#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;
}

/* トップの講師: 幅が広がった分、1 段に 7 人まで（写真は 3:4・角丸） */
.sg-layout--full .sn_teachers{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
	gap:20px 16px;
	margin:0;
}
.sg-layout--full .sn_teachers li{ width:auto; margin:0; }
.sg-layout--full .sn_teachers a{ color:var(--sg-text); text-decoration:none; font-weight:700; }
.sg-layout--full .sn_teachers img,
#content .sg-layout--full .sn_teachers img{
	width:100%;
	height:auto;
	aspect-ratio:3 / 4;
	object-fit:cover;
	border-radius:var(--sg-radius);
	margin-bottom:8px;
	box-shadow:0 1px 3px rgba(0,0,0,.08);
	transition:transform .2s;
}
.sg-layout--full .sn_teachers a:hover img{ transform:translateY(-2px); }
.sg-layout--full .sn_teachers small{ font-weight:400; color:var(--sg-muted); }
@media screen and (max-width:520px){
	.sg-layout--full .sn_teachers{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; }
}

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