@charset "utf-8";
/* ============================================================
   トップページ　Information の見出しの行／サービス紹介（2026-10-08）
   inc/sa-top-services.php が出すHTML用。
   色は上の入口カード（top-cards.css）と同じ：法人＝紺／個人＝オレンジ／教材＝金
   ============================================================ */

#top_info,
#top_services,
#top_links{
	--sv-gold:#b8935a;
	--sv-gold-soft:#f6f1e7;
	--sv-ink:#26262a;
	--sv-sub:#5f5c56;
	--sv-line:#e4dfd5;
	--sv-corporation:#1f3566;
	--sv-invidual:#ff5703;
	--sv-program:#b8935a;
	--sv-radius:10px;
}

/* 見出し（.sa-sec-head）とお知らせの行（.sa-news）は css/news.css（一覧ページ・記事ページと共通） */

/* ---- お知らせ（トップ） ---- */
#top_info.sa-info{margin:64px 0 0;padding:0;}

/* ---- 関連リンク（画像バナー） ---- */
#top_links.sa-links{margin:8px 0 56px;padding:0;}
.sa-links__list{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.sa-links__item{margin:0;padding:0;}
.sa-links__item--sp{display:none;}   /* 講師紹介・スケジュール・SNSなどは、PCではヘッダー・フッターにある */
.sa-links__item a{
	display:block;border-radius:var(--sv-radius);overflow:hidden;
	box-shadow:0 0 0 1px var(--sv-line);
	transition:box-shadow .2s,transform .2s;
}
.sa-links__item a:hover{box-shadow:0 10px 24px rgba(38,38,42,.12);transform:translateY(-2px);}
.sa-links__item a:focus-visible{outline:2px solid var(--sv-gold);outline-offset:3px;}
.sa-links__item img{
	display:block;width:100%;height:auto;aspect-ratio:19 / 6;object-fit:cover;
	margin:0;border-radius:0;
}

/* ---- サービス紹介 ---- */
#top_services.sa-svc{
	margin:56px 0 40px;padding:0;background:none;
}
.sa-svc__list{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
.sa-svc__item{margin:0;padding:0;border:0;background:none;}

.sa-svc__card{
	--sv-c:var(--sv-gold);
	position:relative;
	display:flex;flex-direction:column;height:100%;
	padding:26px 22px 22px;
	background:#fff;
	border:1px solid var(--sv-line);border-radius:var(--sv-radius);
	color:var(--sv-ink);text-decoration:none;box-shadow:none;
	transition:border-color .2s,box-shadow .2s,transform .2s;
}
.sa-svc__item--corporation .sa-svc__card{--sv-c:var(--sv-corporation);}
.sa-svc__item--invidual    .sa-svc__card{--sv-c:var(--sv-invidual);}
.sa-svc__item--program     .sa-svc__card{--sv-c:var(--sv-program);}
.sa-svc__card::before{   /* 上辺の色帯：誰向けか */
	content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;
	background:var(--sv-c);border-radius:var(--sv-radius) var(--sv-radius) 0 0;
}
.sa-svc__card:hover{
	border-color:color-mix(in srgb,var(--sv-c) 45%,var(--sv-line));
	box-shadow:0 10px 28px rgba(38,38,42,.08);
	transform:translateY(-2px);
}
.sa-svc__card:focus-visible{outline:2px solid var(--sv-c);outline-offset:3px;}

.sa-svc__icon{
	display:grid;place-items:center;
	width:44px;height:44px;margin-bottom:16px;border-radius:50%;
	color:var(--sv-c);background:color-mix(in srgb,var(--sv-c) 10%,#fff);
}
.sa-svc__icon svg{width:24px;height:24px;display:block;}
.sa-svc__tag{
	align-self:flex-start;
	margin-bottom:10px;padding:2px 10px;
	font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.04em;
	color:var(--sv-c);background:color-mix(in srgb,var(--sv-c) 9%,#fff);border-radius:999px;
}
#top_services .sa-svc__title{
	margin:0 0 10px;padding:0;background:none;border:0;
	font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
	font-size:19px;font-weight:600;line-height:1.5;letter-spacing:.02em;
	color:var(--sv-ink);
	word-break:keep-all;overflow-wrap:anywhere;   /* 「・」のあと（<wbr>）でだけ折り返す */
}
.sa-svc__desc{
	flex:1;
	margin:0 0 18px;
	font-size:14px;line-height:1.8;color:var(--sv-sub);
}
.sa-svc__more{
	display:inline-flex;align-items:center;gap:6px;
	font-size:13px;font-weight:600;color:var(--sv-c);
}
.sa-svc__more::after{
	content:"";width:16px;height:1px;background:currentColor;
	transition:width .2s;
}
.sa-svc__card:hover .sa-svc__more::after{width:26px;}

@media (prefers-reduced-motion:reduce){
	.sa-svc__card,.sa-svc__more::after,.sa-links__item a{transition:none;}
	.sa-svc__card:hover,.sa-links__item a:hover{transform:none;}
}

/* ---- 幅に合わせて並びを変える ---- */
@media screen and (max-width:1100px){
	.sa-svc__list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media screen and (max-width:62.5em){   /* 旧CSSがスマホ用バナーを出し始める幅と同じ */
	.sa-links__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
	.sa-links__item--sp{display:block;}
}
@media screen and (max-width:640px){
	#top_services.sa-svc{margin:40px 0 28px;}
	#top_info.sa-info{margin-top:44px;}
	#top_links.sa-links{margin-bottom:40px;}
	.sa-svc__list{grid-template-columns:1fr;gap:12px;}
	/* スマホは横長の行にして、縦に長くなりすぎないようにする */
	.sa-svc__card{
		display:grid;grid-template-columns:40px 1fr;column-gap:14px;
		padding:18px 16px 16px;
	}
	.sa-svc__icon{grid-row:1 / span 4;width:40px;height:40px;margin:0;}
	.sa-svc__icon svg{width:21px;height:21px;}
	.sa-svc__tag{margin-bottom:6px;justify-self:start;}
	#top_services .sa-svc__title{font-size:17px;margin-bottom:6px;}
	.sa-svc__desc{font-size:13.5px;margin-bottom:10px;}
}