@charset "utf-8";
/* /aboutus（KID ACADEMYとは）。2026-10-30 本部が ChatGPT で作って承認したデザインを移したもの。
 *
 * ⚠ 下半分（「デモのCSS」から後ろ）は zip（kid-academy-claude-handoff.zip）の about-fragment.html の <style> を **1文字も変えずに** 写したもの。
 *   見た目を直すときは、デモと見比べながら直すこと。
 * ⚠ すべて #kida-demo の中だけに効く。ほかのページには漏れない。
 * ⚠ about.css（旧WordPressの写し）はこのページでは読まない（pages.json）。
 */

/* ---------- サイト共通CSSの打ち消し（デモはまっさらなページで作られている） ----------
 * common.css は body に font-size 1.3〜1.4rem・line-height 2・word-break: break-all を敷き、
 * a / small / img を display:block にしている。デモと同じ表示にするため、#kida-demo の中だけ元に戻す。 */
#kida-demo { font-size: 16px; line-height: normal; }
/* hp-own.css の body * { overflow-wrap: anywhere }・見出しの word-break: auto-phrase・text-wrap: balance / pretty も、デモには無い（改行位置が変わる） */
#kida-demo, #kida-demo * { word-break: normal; overflow-wrap: normal; text-wrap: wrap; }
/* reset.min.css の text-rendering: optimizeSpeed は英字の詰め（カーニング）を切るので、ブラウザの初期値に戻す */
#kida-demo { text-rendering: auto; }
#kida-demo a, #kida-demo small { display: inline; }
#kida-demo ul, #kida-demo ol { list-style: none; margin: 0; padding: 0; }
#kida-demo em { font-style: normal; }
#kida-demo strong, #kida-demo b { font-weight: bold; }

/* ---------- デモのCSS（about-fragment.html の <style> そのまま） ---------- */
#kida-demo{--ka-red:#ac3038;--ka-ink:#272622;--ka-paper:#fff;--ka-soft:#f6f4f0;--ka-line:#e6e1d9;--ka-muted:#716e68;max-width:1100px;margin:auto;color:var(--ka-ink);font-family:"Noto Sans JP",sans-serif;background:var(--ka-paper);container-type:inline-size;overflow:clip;text-align:left}
#kida-demo *{box-sizing:border-box}#kida-demo a{color:inherit;text-decoration:none}#kida-demo button{font:inherit;cursor:pointer}#kida-demo img{display:block;width:100%;object-fit:cover}#kida-demo p{font-size:14px;line-height:2.2;margin:0 0 20px;letter-spacing:.04em}#kida-demo h1,#kida-demo h2,#kida-demo h3{color:inherit;margin:0;letter-spacing:.03em;font-weight:500;line-height:1.65}#kida-demo .ka-serif{font-family:"Noto Serif JP",serif}#kida-demo .ka-en{font-family:Georgia,serif;letter-spacing:.02em}#kida-demo .ka-top{padding:21px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ka-line);gap:20px}#kida-demo .ka-logo{width:221px;height:auto;object-fit:contain}#kida-demo .ka-topnav{display:flex;align-items:center;gap:22px;font-size:11px}#kida-demo .ka-topnav a:first-child{color:var(--ka-red)}#kida-demo .ka-pill{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid var(--ka-line);border-radius:50px;padding:15px 25px;font-size:12px;transition:background .2s}#kida-demo .ka-pill:hover{background:var(--ka-soft)}#kida-demo .ka-pill.dark{background:var(--ka-ink);color:#fff;border-color:var(--ka-ink)}#kida-demo .ka-breadcrumb{font-size:10px;color:var(--ka-muted);padding:20px 5%}#kida-demo .ka-hero{padding:35px 5% 0;display:grid;grid-template-columns:1fr 1.1fr;gap:45px;align-items:center}#kida-demo .ka-eyebrow{font-size:10px;letter-spacing:.2em;color:var(--ka-red);display:flex;align-items:center;gap:10px;margin:0 0 24px}#kida-demo .ka-eyebrow:before{content:"";height:1px;width:26px;background:var(--ka-red)}#kida-demo .ka-hero h1{font-size:clamp(30px,4.5cqi,50px);line-height:1.75;letter-spacing:.08em}#kida-demo .ka-hero h1 em{font-style:normal;color:var(--ka-red)}#kida-demo .ka-hero .ka-title-en{font:58px Georgia,serif;color:#d7d1c7;margin:20px 0 23px;line-height:1}#kida-demo .ka-hero .ka-sub{font-size:12px;color:var(--ka-muted)}#kida-demo .ka-hero-image{position:relative;padding-bottom:27px}#kida-demo .ka-hero-image img{height:480px;border-radius:220px 220px 8px 8px;object-position:57% center}#kida-demo .ka-photo-note{font-size:9px;letter-spacing:.16em;color:var(--ka-muted);text-align:right;margin-top:13px}#kida-demo .ka-intro{padding:65px 10% 55px;display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start}#kida-demo .ka-intro h2{font-size:23px}#kida-demo .ka-intro p{font-size:13px;color:var(--ka-muted)}#kida-demo .ka-index{display:grid;grid-template-columns:repeat(4,1fr);margin:0 5%;border-top:1px solid var(--ka-line);border-bottom:1px solid var(--ka-line)}#kida-demo .ka-index a{padding:22px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}#kida-demo .ka-index a+a{border-left:1px solid var(--ka-line)}#kida-demo .ka-index span{font:italic 22px Georgia,serif;color:var(--ka-red)}#kida-demo .ka-index a:hover{background:var(--ka-soft)}#kida-demo .ka-section{padding:90px 8%;scroll-margin-top:20px}#kida-demo .ka-label{font-size:11px;color:var(--ka-red);letter-spacing:.12em;display:flex;gap:15px;align-items:center;margin-bottom:20px}#kida-demo .ka-label b{font:italic 28px Georgia,serif;font-weight:400}#kida-demo .ka-heading{font-size:32px;margin-bottom:35px}#kida-demo .ka-story{display:grid;grid-template-columns:1.05fr 1fr;gap:55px;align-items:center;margin-top:40px}#kida-demo .ka-story-image{border-radius:8px 8px 120px 8px;height:410px}#kida-demo .ka-story h3{font-size:24px;margin-bottom:25px}#kida-demo .ka-story p{font-size:12px;color:var(--ka-muted)}#kida-demo .ka-textlink{display:inline-flex;gap:35px;align-items:center;font-size:12px;padding:12px 0;border-bottom:1px solid var(--ka-red)}#kida-demo .ka-textlink span{color:var(--ka-red)}#kida-demo .ka-history{background:var(--ka-soft);border-radius:0 110px 0 0}#kida-demo .ka-history-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:38px}#kida-demo .ka-history-head p{color:var(--ka-muted);font-size:12px}#kida-demo .ka-timeline{border-top:1px solid var(--ka-line)}#kida-demo .ka-event{display:grid;grid-template-columns:100px 1fr 1.5fr;gap:25px;border-bottom:1px solid var(--ka-line);padding:27px 0;align-items:baseline}#kida-demo .ka-year{font:30px Georgia,serif;color:var(--ka-red)}#kida-demo .ka-event h3{font-size:15px}#kida-demo .ka-event p{font-size:11px;color:var(--ka-muted);margin:0}#kida-demo .ka-quote{padding:45px 0 0;text-align:center;font-size:19px;line-height:2.1}#kida-demo .ka-environment{padding:75px 8%;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}#kida-demo .ka-environment img{height:360px;border-radius:160px 160px 8px 8px}#kida-demo .ka-environment h2{font-size:30px;margin-bottom:25px}#kida-demo .ka-environment p{font-size:12px;color:var(--ka-muted)}#kida-demo .ka-brands{background:var(--ka-soft)}#kida-demo .ka-brandintro{max-width:580px;color:var(--ka-muted);margin-top:24px}#kida-demo .ka-stages{display:grid;grid-template-columns:repeat(4,1fr);margin:38px 0 0;border-bottom:1px solid var(--ka-line);gap:15px}#kida-demo .ka-stage{border:0;border-bottom:2px solid transparent;background:transparent;text-align:left;padding:15px 0;color:var(--ka-muted);min-height:76px}#kida-demo .ka-stage small{display:block;font-size:10px;margin-bottom:7px}#kida-demo .ka-stage strong{font-weight:500;font-size:16px}#kida-demo .ka-stage[aria-selected=true]{color:var(--ka-red);border-bottom-color:var(--ka-red)}#kida-demo .ka-brand-detail{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;padding-top:35px;min-height:220px}#kida-demo .ka-brand-detail h3{font-size:23px}#kida-demo .ka-brand-detail p{font-size:12px;color:var(--ka-muted);margin-top:15px}#kida-demo .ka-brand-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-content:start}#kida-demo .ka-brand-list a,#kida-demo .ka-brand-list div{padding:16px 0;border-bottom:1px solid var(--ka-line);font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:10px}#kida-demo .ka-brand-list span{color:var(--ka-red)}#kida-demo .ka-vision{text-align:center}#kida-demo .ka-vision .ka-label{justify-content:center}#kida-demo .ka-vision h2{font-size:33px}#kida-demo .ka-vision-intro{max-width:630px;margin:28px auto 40px;color:var(--ka-muted)}#kida-demo .ka-vision-intro p{font-size:13px}#kida-demo .ka-vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;text-align:left;margin-top:45px}#kida-demo .ka-vision-grid img{height:170px;border-radius:7px;margin-bottom:20px}#kida-demo .ka-vision-grid h3{font-size:14px;margin-bottom:12px}#kida-demo .ka-vision-grid p{font-size:11px;color:var(--ka-muted)}#kida-demo .ka-contact{background:var(--ka-soft);padding:65px 8%;border-radius:100px 100px 0 0;text-align:center}#kida-demo .ka-contact h2{font-size:28px;margin-bottom:15px}#kida-demo .ka-contact p{font-size:12px;color:var(--ka-muted)}#kida-demo .ka-contact-links{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}#kida-demo .ka-footer{padding:35px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}#kida-demo .ka-footer small{font-size:9px;color:var(--ka-muted)}#kida-demo .ka-footer .ka-logo{width:190px}#kida-demo .ka-mobile[hidden]{display:none}
@container(max-width:650px){#kida-demo .ka-top{padding:20px 6%}#kida-demo .ka-logo{width:195px}#kida-demo .ka-topnav{display:none}#kida-demo .ka-breadcrumb{padding:16px 6%;font-size:9px}#kida-demo .ka-hero{grid-template-columns:1fr;padding:27px 7% 0;gap:28px}#kida-demo .ka-hero h1{font-size:34px}#kida-demo .ka-hero .ka-title-en{font-size:43px;margin:16px 0}#kida-demo .ka-hero .ka-sub{font-size:11px}#kida-demo .ka-hero-image img{height:350px;border-radius:160px 160px 8px 8px}#kida-demo .ka-intro{grid-template-columns:1fr;padding:35px 7%;gap:22px}#kida-demo .ka-intro h2{font-size:22px}#kida-demo .ka-index{grid-template-columns:1fr 1fr;margin:0 7%}#kida-demo .ka-index a{padding:18px 8px;font-size:10px}#kida-demo .ka-index a:nth-child(3){border-left:0;border-top:1px solid var(--ka-line)}#kida-demo .ka-index a:nth-child(4){border-top:1px solid var(--ka-line)}#kida-demo .ka-section{padding:60px 7%}#kida-demo .ka-heading{font-size:27px}#kida-demo .ka-story{grid-template-columns:1fr;gap:30px;margin-top:25px}#kida-demo .ka-story-image{height:300px}#kida-demo .ka-story h3{font-size:23px}#kida-demo .ka-history-head{grid-template-columns:1fr;gap:20px}#kida-demo .ka-event{grid-template-columns:65px 1fr;gap:10px 18px}#kida-demo .ka-event p{grid-column:2}#kida-demo .ka-year{font-size:24px}#kida-demo .ka-quote{font-size:16px}#kida-demo .ka-environment{grid-template-columns:1fr;padding:55px 7%;gap:25px}#kida-demo .ka-environment img{height:310px}#kida-demo .ka-environment h2{font-size:27px}#kida-demo .ka-stages{grid-template-columns:1fr 1fr;gap:0 20px}#kida-demo .ka-stage strong{font-size:14px}#kida-demo .ka-brand-detail{grid-template-columns:1fr;gap:15px}#kida-demo .ka-vision h2{font-size:27px}#kida-demo .ka-vision-grid{grid-template-columns:1fr;gap:28px}#kida-demo .ka-vision-grid img{height:210px}#kida-demo .ka-vision-grid h3{font-size:16px}#kida-demo .ka-contact{padding:50px 7%;border-radius:50px 50px 0 0}#kida-demo .ka-contact h2{font-size:24px}#kida-demo .ka-contact-links{flex-direction:column}#kida-demo .ka-footer{flex-direction:column;align-items:flex-start;padding:30px 7%}}
@media(prefers-reduced-motion:reduce){#kida-demo *{scroll-behavior:auto!important;transition:none!important}}

/* ---------- 写真の高さ（common.css の img{height:auto !important} の打ち消し） ----------
 * デモの高さ指定は !important に負けて効かない。値はデモと同じものを !important で書き直す（スマホ幅の値も）。 */
#kida-demo .ka-hero-image img { height: 480px !important; }
#kida-demo .ka-story-image { height: 410px !important; }
#kida-demo .ka-environment img { height: 360px !important; }
#kida-demo .ka-vision-grid img { height: 170px !important; }
@container (max-width: 650px) {
	#kida-demo .ka-hero-image img { height: 350px !important; }
	#kida-demo .ka-story-image { height: 300px !important; }
	#kida-demo .ka-environment img { height: 310px !important; }
	#kida-demo .ka-vision-grid img { height: 210px !important; }
}

/* ---------- ページ内リンクの止まる位置（サイトの固定ヘッダーの分だけ下げる） ----------
 * デモはヘッダーが固定されていないページで作られている。サイトはヘッダーが上に固定（携帯65px・PC100px）なので、
 * そのままだと 01〜04 の見出しがヘッダーの下に隠れる。見た目は変えず、止まる位置だけずらす。 */
#kida-demo [id] { scroll-margin-top: 80px; }
@media (min-width: 1025px) { #kida-demo [id] { scroll-margin-top: 115px; } }

/* ---------- スマホで見たときの改行（2026-10-31 本部指摘「改行が微妙」） ----------
 * デモのままだと、見出しが言葉の途中で切れる（いっし／ょに）、文の最後の1〜2文字だけが次の行に落ちる（しま／す。）、
 * 行の頭に小さい「っ」が来る（行／ってまいります）。デモの改行より読みやすさを優先して、次の3つだけ足した。
 *  ・行の頭に小さい「っ」「ょ」や「ー」を置かない（line-break: strict）
 *  ・見出しは「、」や空白や <wbr> の所で折り返す。1つのまとまりが1行に入りきらないときだけ途中で折る（keep-all ＋ break-word）
 *    ⚠ anywhere にしないこと。行を埋めようとしてまとまりの途中で折り、「ひら／く。」になる
 *  ・本文は最後の行が1〜2文字だけにならないように整える（text-wrap: pretty。未対応のブラウザでは今までどおり） */
#kida-demo { line-break: strict; }
/* ⚠ 中の <em>・<span> にも書く（上の「#kida-demo *」の打ち消しが直接効いて、親の keep-all を受け継がないため。「ひら／く。」の原因） */
#kida-demo h1, #kida-demo h2, #kida-demo h3, #kida-demo h1 *, #kida-demo h2 *, #kida-demo h3 * { word-break: keep-all; overflow-wrap: break-word; }
#kida-demo p, #kida-demo li { text-wrap: pretty; }
/* 言葉のまとまりを切らない所（本文の最後の1〜2文字だけが次の行に落ちる所に付けた） */
#kida-demo .kn { white-space: nowrap; }