@charset "utf-8";
/* 企業案内（/company-info）の見た目。2026-10-04 に作り直した（本部指示・案A「余白と一本線」）。
 *
 * ⚠ company.css は旧WordPressからそのまま写した生成物。**触らない。**
 *   ここは後から読み込んで上書きするだけ。戻したくなったら pages.json からこの1行を外す。
 * ⚠ 色とフォントは common.css の語彙だけを使う（#2B2B2B・#B6232A・#E8E8E8・#FAFAFA、明朝は .serif）。
 *   新しい色やフォントを持ち込まない。
 * ⚠ 改行で崩さない。見出しは折り返して良い幅に収め、長い行は max-width で止める。
 */

/* ========== 共通 ========== */
/* ⚠ padding を足さない。common.css の `.inner{width:86%;margin:0 auto}` が
     すでに左右の余白を作っている。padding を重ねると 375px で中身が 323px → 270px まで痩せ、
     見出しが「子どもたちの未来／のために…」と句の途中で折れる（実際に踏んだ）。 */
#company .inner { max-width: 1040px; }

#company .eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-size: 1.1rem; letter-spacing: .18em; color: #8A8A8A;
}
#company .eyebrow::before { content: ""; width: 28px; height: 1px; background: #8A8A8A; }

/* ⚠ 見出しの英数字を途中で割らない。
     common.css は body に `word-break: break-all` を敷いているので、放っておくと
     「KID ACADE／MY」「ベスト1／00」のように単語や数字の真ん中で折れる。
     日本語は normal でも好きな位置で折り返せるので、見出しは normal に戻す。 */
#company h1, #company h2, #company h3 { word-break: normal; overflow-wrap: anywhere; }

#company h2.serif {
	font-size: 2.6rem; font-weight: 600; letter-spacing: .04em; margin-top: 8px;
}
@media (min-width: 1025px) { #company h2.serif { font-size: 3.2rem; } }

/* ========== 上部（写真なし。白地に明朝） ========== */
.company-mv {
	padding: 70px 0 50px;
	border-bottom: 1px solid #E8E8E8;
	/* ⚠ 旧デザインの背景写真・黒の覆い・カーブSVGは全部やめた。
	     company.css の .company-mv .ttl-sec を使わないので、::before も出ない。 */
}
@media (min-width: 1025px) { .company-mv { padding: 120px 0 70px; } }
/* ⚠ common.css の .sub-ttl は中央寄せ。案Aは左寄せなので打ち消す
     （見出しだけ中央・英字だけ左、というちぐはぐな出方をしていた） */
.company-mv .inner, .company-mv h1 { text-align: left; }
.company-mv h1 {
	font-size: 3.6rem; font-weight: 600; letter-spacing: .06em; line-height: 1.3;
}
@media (min-width: 1025px) { .company-mv h1 { font-size: 5rem; } }
.company-mv .en {
	margin-top: 12px; font-size: 1.2rem; letter-spacing: .3em; color: #8A8A8A;
}

/* ========== 理念 ========== */
/* ⚠ 背景のグラデーションと左右の丸いコラージュ（intro-left/right.png）は外した（本部指示）。 */
/* ⚠ #company から書く。company.css の `.company-intro{padding:80px 7vw}` を打ち消せないと、
     .inner の 7vw と**二重に効いて**本文の幅が 323px → 270px まで痩せる。
     その状態だと見出しが「子どもたちの未来／のために…」と句の途中で折れる（実際に踏んだ）。 */
#company .company-intro {
	background: none; padding: 70px 0; text-align: center;
}
@media (min-width: 1025px) { #company .company-intro { padding: 120px 0; } }
.company-intro .eyebrow { justify-content: center; }
/* ⚠ セレクタを #company から書く。`#company h2.serif`（セクション見出し＝2.6rem）のほうが
     `.company-intro h2` より強く、放っておくと理念の見出しまで26pxになる。
     そうなると375pxで「子どもたちの未来／のために…」と句の途中で折れる（実際に踏んだ）。
   ⚠ 携帯の文字サイズは「1行に収まる上限」から決めている。
     内寸は 375 − 7vw×2 ＝ 約323px。いちばん長い行は「という理念のもと活動します。」の14字で、
     字送り込みで 1字 ≒ 1.04em ＝ 14.6em。17px なら 249px で収まる。大きくしない。 */
#company .company-intro h2.serif {
	font-size: 1.7rem; font-weight: 600; line-height: 2.1; margin: 24px 0 0;
}
#company .company-intro h2.serif span { font-size: 1.8rem; }
@media (min-width: 561px) {
	#company .company-intro h2.serif { font-size: 2.2rem; }
	#company .company-intro h2.serif span { font-size: 2.8rem; }
}
@media (min-width: 1025px) {
	#company .company-intro h2.serif { font-size: 2.6rem; line-height: 2; }
	#company .company-intro h2.serif span { font-size: 3.6rem; }
}
.company-intro .lead {
	max-width: 680px; margin: 32px auto 0;
	font-size: 1.4rem; font-weight: 400; line-height: 2.4; color: #555;
}
@media (min-width: 1025px) { .company-intro .lead { font-size: 1.5rem; } }

/* ========== 代表挨拶 ========== */
.company-message { background: #FAFAFA; padding: 70px 0; }
@media (min-width: 1025px) { .company-message { padding: 110px 0; } }
.company-message .message-wrp {
	display: flex; flex-direction: column; gap: 32px; margin-top: 36px;
	/* ⚠ 旧CSSは column-reverse（写真が上）。案Aは写真→本文の順にそろえる */
}
@media (min-width: 1025px) {
	.company-message .message-wrp {
		flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 70px;
	}
}
.company-message .owner { width: 100%; max-width: 260px; flex-shrink: 0; }
.company-message .owner img { width: 100%; display: block; }
.company-message .owner .position { margin-top: 14px; font-size: 1.2rem; color: #8A8A8A; }
.company-message .owner .name { margin-top: 4px; font-size: 2rem; }
@media (min-width: 1025px) { .company-message .owner .name { font-size: 2.2rem; } }
.company-message .message { flex: 1; }
.company-message .message p { margin-bottom: 22px; line-height: 2.3; }
.company-message .message p:last-child { margin-bottom: 0; }

/* ========== 代表著書 ========== */
.company-book { padding: 70px 0; }
@media (min-width: 1025px) { .company-book { padding: 110px 0; } }
.company-book .book-wrp {
	display: flex; flex-direction: column; gap: 24px; margin-top: 36px;
	/* ⚠ 携帯の左右は18pxまで。24pxだと見出しの「100」だけが2行目に落ちる（実測で4px足りなかった） */
	border: 1px solid #E8E8E8; padding: 26px 18px;
}
@media (min-width: 1025px) {
	.company-book .book-wrp { flex-direction: row; align-items: flex-start; gap: 44px; padding: 44px; }
}
.company-book .book-body { flex: 1; }

/* 著者・出版社・発売の横に書影を置く（2026-10-05 本部指示）。
   ⚠ 携帯でも横並びのまま。内寸は 375 − 86% − padding18px×2 ＝ 約287px。
     書影を100pxに抑えて、左の一覧（約170px）と並べても折り返さないようにしている。 */
.company-book .book-foot {
	/* 書影のほうが一覧より背が高い。center にして上下の見えを釣り合わせる */
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 20px; padding-top: 18px; border-top: 1px solid #E8E8E8;
}
.company-book .book-cover { width: 100px; flex-shrink: 0; }
@media (min-width: 561px) { .company-book .book-cover { width: 130px; } }
@media (min-width: 1025px) { .company-book .book-cover { width: 150px; } }
.company-book .book-cover img { width: 100%; display: block; box-shadow: 4px 4px 16px rgba(0,0,0,.10); }
/* ⚠ 375px の内寸は約323px。「子どもの才能の伸ばし方ベスト100」は16字ぶんあるので、
     2rem だと1行に収まらず2行に折れる。携帯だけ1.8remにして1行で見せる。 */
.company-book h3 { font-size: 1.7rem; font-weight: 600; line-height: 1.6; }
@media (min-width: 561px) { .company-book h3 { font-size: 2rem; } }
@media (min-width: 1025px) { .company-book h3 { font-size: 2.4rem; } }
.company-book .book-sub {
	margin-top: 10px; font-size: 1.3rem; line-height: 1.9; color: #8A8A8A;
}
.company-book .book-body > p { margin-top: 16px; line-height: 2.1; }
.company-book .book-meta {
	display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
	font-size: 1.3rem;
}
.company-book .book-meta dt { color: #8A8A8A; }

/* ========== 行動指針 ========== */
/* ⚠ 灰色の円を並べる形はやめた（本部指示「行動指針のとこのデザインも微妙」）。
     番号つきの2列リストにして、アイコンは小さく添えるだけにする。 */
.company-direction { background: #FAFAFA; padding: 70px 0; }
@media (min-width: 1025px) { .company-direction { padding: 110px 0; } }
.company-direction .lead { margin-top: 16px; line-height: 2.1; color: #555; }
.company-direction h3 {
	margin-top: 28px; font-size: 1.7rem; font-weight: 600; letter-spacing: .04em;
}
@media (min-width: 1025px) { .company-direction h3 { font-size: 2rem; } }
.company-direction h3 span { font-size: 2.2rem; font-weight: 600; }
@media (min-width: 1025px) { .company-direction h3 span { font-size: 2.6rem; } }

.promise-list { margin-top: 20px; display: grid; }
@media (min-width: 760px) {
	.promise-list { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}
.promise-list li {
	display: flex; align-items: center; gap: 16px;
	padding: 16px 4px; border-bottom: 1px solid #E8E8E8;
}
.promise-list .no {
	flex-shrink: 0; width: 26px;
	font-size: 1.2rem; letter-spacing: .08em; color: #B6232A;
}
.promise-list img {
	flex-shrink: 0; width: 30px; height: 30px !important; object-fit: contain; opacity: .55;
	margin: 0;
}
.promise-list .t { font-size: 1.5rem; line-height: 1.6; }

/* ========== 会社概要 ========== */
.company-profile { padding: 70px 0 50px; }
@media (min-width: 1025px) { .company-profile { padding: 110px 0 80px; } }
.company-profile ul { max-width: 640px; margin: 32px 0 0; }
.company-profile ul > li {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 14px 0; border-bottom: 1px solid #E8E8E8;
	font-size: 1.3rem; line-height: 1.9;
}
@media (min-width: 561px) { .company-profile ul > li { gap: 32px; font-size: 1.4rem; } }
/* ⚠ 88px 以上にする。80px だと「コンテンツ事業」（7字×12px＝84px）が入りきらず、
     最後の「業」だけが2行目に落ちる。 */
.company-profile ul > li .summary-ttl {
	flex-shrink: 0; width: 88px; margin-bottom: 0;
	text-align: left; font-weight: 600; font-size: 1.2rem; color: #8A8A8A;
}
@media (min-width: 561px) { .company-profile ul > li .summary-ttl { width: 110px; font-size: 1.3rem; } }
.company-profile ul > li .summary { flex: 1; }
.company-profile ul > li .summary a { text-decoration: underline; }

/* ========== 最後のことば ========== */
/* ⚠ 背景写真（closing-bg.jpg ほか3サイズ）は外した。
     写真を見せるためだけに取っていた 240〜500px の余白も一緒に外す
     （残すとページの最後に1画面ぶんの空白が出る）。 */
.company-closing {
	background: #2B2B2B; color: #FFF;
	height: auto; padding: 60px 0;
}
@media (min-width: 1025px) { .company-closing { padding: 90px 0; } }
.company-closing p {
	text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 2.2;
}
@media (min-width: 1025px) { .company-closing p { font-size: 1.6rem; } }