@charset "utf-8";
/* /biz（事業紹介）。2026-10-31 本部が ChatGPT で作って承認したデザインを移したもの。中身は元ページのまま、見た目だけ変えた。
 * ⚠ 真ん中（「デモのCSS」）は zip（kid-academy-designs-for-claude.zip）の biz/page-fragment.html の <style> を **1文字も変えずに** 写したもの。
 * ⚠ すべて #kid-services の中だけに効く。ほかのページ（/biz/cds-kida など）には漏れない。
 * ⚠ biz-index.css（旧デザイン）はこのページでは読まない（pages.json）。
 */
/* ---------- サイト共通CSSの打ち消し（デモはまっさらなページで作られている） ----------
 * common.css は body に font-size 1.3〜1.4rem・line-height 2・word-break: break-all を敷き、
 * a / small / img を display:block にしている。デモと同じ表示にするため、#kid-services の中だけ元に戻す。 */
#kid-services { font-size: 16px; line-height: normal; }
/* hp-own.css の body * { overflow-wrap: anywhere }・見出しの word-break: auto-phrase・text-wrap: balance / pretty も、デモには無い（改行位置が変わる） */
#kid-services, #kid-services * { word-break: normal; overflow-wrap: normal; text-wrap: wrap; }
/* reset.min.css の text-rendering: optimizeSpeed は英字の詰め（カーニング）を切るので、ブラウザの初期値に戻す */
#kid-services { text-rendering: auto; }
#kid-services a, #kid-services small { display: inline; }
#kid-services ul, #kid-services ol { list-style: none; margin: 0; padding: 0; }
#kid-services em { font-style: normal; }
#kid-services strong, #kid-services b { font-weight: bold; }

/* ---------- デモのCSS（page-fragment.html の <style> そのまま） ---------- */
#kid-services{--ks-red:#ac3038;--ks-ink:#292823;--ks-muted:#6d6962;--ks-soft:#f6f4f0;--ks-line:#e4e0d8;background:#fff;color:var(--ks-ink);font-family:"Noto Sans JP",sans-serif;max-width:1150px;margin:auto;container-type:inline-size;text-align:left}#kid-services *{box-sizing:border-box}#kid-services a{color:inherit;text-decoration:none}#kid-services img{display:block;max-width:100%}#kid-services ul,#kid-services ol{list-style:none;padding:0;margin:0}#kid-services h1,#kid-services h2,#kid-services h3{color:inherit;margin:0;font-weight:500;letter-spacing:.04em;line-height:1.7}#kid-services p{font-size:13px;line-height:2.2;letter-spacing:.03em;color:var(--ks-muted)}#kid-services button{font:inherit}#kid-services .ks-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:24px 5%;border-bottom:1px solid var(--ks-line)}#kid-services .ks-logo{width:215px;height:auto}#kid-services .ks-nav{display:flex;align-items:center;gap:25px;font-size:11px}#kid-services .ks-nav .active{color:var(--ks-red)}#kid-services .ks-pill{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;background:var(--ks-ink);color:#fff;padding:15px 24px;border-radius:40px;font-size:12px;border:1px solid var(--ks-ink)}#kid-services .ks-pill:hover{background:var(--ks-red);border-color:var(--ks-red)}#kid-services .ks-pill.light{background:#fff;color:var(--ks-ink);border-color:var(--ks-line)}#kid-services .ks-crumb{padding:20px 5%;font-size:10px;color:var(--ks-muted)}#kid-services #biz-index{padding:30px 7% 65px}#kid-services .ttl-sec{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;margin:0 0 55px;padding:5px 0 30px}#kid-services .ttl-sec .sub-ttl{font-family:"Noto Serif JP",serif;font-size:40px;letter-spacing:.08em}#kid-services .ttl-sec .sub-ttl span{display:block;font:italic 64px Georgia,serif;color:var(--ks-red);letter-spacing:-.03em;margin:18px 0 30px}#kid-services .ttl-sec p{font-size:13px;line-height:2.3;max-width:390px;margin:0}#kid-services .ks-hero-photo{height:350px;width:100%;object-fit:cover;border-radius:180px 180px 8px 8px}#kid-services .ks-index{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ks-line);border-bottom:1px solid var(--ks-line);margin-bottom:65px}#kid-services .ks-index a{padding:22px 12px;display:flex;align-items:center;gap:12px;font-size:12px;min-width:0}#kid-services .ks-index a+a{border-left:1px solid var(--ks-line)}#kid-services .ks-index a:hover{background:var(--ks-soft)}#kid-services .ks-index span{font:italic 23px Georgia,serif;color:var(--ks-red)}#kid-services .biz-index>.biz-index-ttl{font-family:"Noto Serif JP",serif;font-size:29px;margin:0 0 32px;padding-top:20px;display:flex;gap:18px;align-items:baseline;scroll-margin-top:25px}#kid-services .biz-index>.biz-index-ttl:before{font:italic 33px Georgia,serif;color:var(--ks-red)}#kid-services .biz-index>.biz-index-ttl:nth-of-type(1):before{content:"01"}#kid-services .biz-index>.biz-index-ttl:nth-of-type(2):before{content:"02"}#kid-services .biz-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 27px;margin-bottom:70px}#kid-services .biz-list>li{min-width:0}#kid-services .biz-list>li>a{display:flex;flex-direction:column;height:100%;border-bottom:1px solid var(--ks-line);padding-bottom:25px;position:relative}#kid-services .thumb{overflow:hidden;border-radius:7px 7px 55px 7px;margin-bottom:20px;background:var(--ks-soft)}#kid-services .thumb img{width:100%;height:180px;object-fit:cover;transition:transform .3s}#kid-services .biz-list a:hover .thumb img{transform:scale(1.025)}#kid-services .summary{flex:1;display:flex;flex-direction:column;min-width:0}#kid-services .summary h3{font-size:12px;line-height:1.8;margin:0 0 16px;color:var(--ks-muted)}#kid-services .summary>img{width:auto;height:48px;max-width:94%;object-fit:contain;object-position:left center;margin-bottom:19px}#kid-services .summary p{font-size:12px;line-height:2.05;margin:0 0 22px}#kid-services .school-age{font-size:11px;line-height:1.9;color:var(--ks-muted);margin-top:auto;padding:14px 27px 0 0;border-top:1px solid var(--ks-line);position:relative}#kid-services .school-age>div{display:inline;color:var(--ks-ink)}#kid-services .school-age:after{content:"↗";position:absolute;right:0;top:11px;color:var(--ks-red);font-size:20px}#kid-services .biz-list:last-child{grid-template-columns:1fr 1fr;gap:45px;margin-bottom:0;padding:45px 35px;background:var(--ks-soft);border-radius:70px 0 8px 8px}#kid-services .biz-list:last-child .biz-index-ttl{font-family:"Noto Serif JP",serif;font-size:27px;line-height:1.8;margin-bottom:25px;scroll-margin-top:25px}#kid-services .biz-list:last-child .biz-index-ttl:before{font:italic 30px Georgia,serif;color:var(--ks-red);margin-right:15px}#kid-services .nursery .biz-index-ttl:before{content:"03"}#kid-services .unique .biz-index-ttl:before{content:"04"}#kid-services .biz-list:last-child .thumb img{height:225px}#kid-services .ks-footer{padding:45px 7% 25px;border-top:1px solid var(--ks-line)}#kid-services .ks-footer-top{display:grid;grid-template-columns:1fr 1fr;gap:45px}#kid-services .ks-address{font-size:11px;line-height:2.1;color:var(--ks-muted);margin-top:22px}#kid-services .ks-footer-contact p{font-size:13px;margin:0 0 20px}#kid-services .ks-footer-buttons{display:flex;gap:12px;flex-wrap:wrap}#kid-services .ks-footer-contact .ks-tel{font-size:20px;margin-top:20px}#kid-services .ks-tel small{font-size:11px;margin-left:13px;color:var(--ks-muted)}#kid-services .ks-footer-nav{display:flex;flex-wrap:wrap;gap:20px 30px;border-top:1px solid var(--ks-line);margin-top:35px;padding-top:25px;font-size:11px}#kid-services .ks-business-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;font-size:11px;border-top:1px solid var(--ks-line);margin-top:30px;padding-top:25px}#kid-services .ks-business-nav h3{font-size:12px;margin-bottom:16px}#kid-services .ks-business-nav a{display:block;font-size:10px;line-height:1.9;margin-top:8px}#kid-services .ks-business-title{font-size:13px;margin-top:30px}#kid-services .ks-copy{display:block;text-align:center;margin-top:40px;font-size:9px;color:var(--ks-muted)}#kid-services .ks-mobile-toggle{display:none;padding:10px;border:1px solid var(--ks-line);border-radius:25px;background:#fff;font-size:11px}#kid-services .ks-mobile-nav{padding:5px 7% 20px;font-size:12px;display:flex;flex-wrap:wrap;gap:20px}#kid-services [hidden]{display:none!important}
@container(max-width:700px){#kid-services .ks-header{padding:20px 6%}#kid-services .ks-logo{width:190px}#kid-services .ks-nav{display:none}#kid-services .ks-mobile-toggle{display:block}#kid-services .ks-crumb{padding:18px 7%}#kid-services #biz-index{padding:25px 7% 45px}#kid-services .ttl-sec{grid-template-columns:1fr;gap:30px;margin-bottom:25px}#kid-services .ttl-sec .sub-ttl{font-size:32px}#kid-services .ttl-sec .sub-ttl span{font-size:50px;margin:12px 0 25px}#kid-services .ks-hero-photo{height:270px}#kid-services .ks-index{grid-template-columns:1fr 1fr;margin-bottom:40px}#kid-services .ks-index a{padding:18px 10px;font-size:11px}#kid-services .ks-index a:nth-child(3){border-left:0;border-top:1px solid var(--ks-line)}#kid-services .ks-index a:nth-child(4){border-top:1px solid var(--ks-line)}#kid-services .biz-index>.biz-index-ttl{font-size:25px;gap:15px;margin-bottom:25px}#kid-services .biz-index>.biz-index-ttl:before{font-size:28px}#kid-services .biz-list{grid-template-columns:1fr;gap:30px;margin-bottom:45px}#kid-services .thumb img{height:230px}#kid-services .summary h3{font-size:12px;margin-bottom:14px}#kid-services .summary>img{height:50px;margin-bottom:18px}#kid-services .summary p{font-size:13px}#kid-services .school-age{font-size:12px}#kid-services .biz-list:last-child{grid-template-columns:1fr;padding:30px 20px;gap:40px;border-radius:45px 0 8px 8px}#kid-services .biz-list:last-child .biz-index-ttl{font-size:25px}#kid-services .biz-list:last-child .thumb img{height:200px}#kid-services .ks-footer{padding:35px 7% 25px}#kid-services .ks-footer-top{grid-template-columns:1fr;gap:30px}#kid-services .ks-footer-buttons{flex-direction:column}#kid-services .ks-business-nav{grid-template-columns:1fr 1fr;gap:25px 15px}#kid-services .ks-tel small{display:block;margin-left:0;margin-top:8px}}
@media(prefers-reduced-motion:reduce){#kid-services .thumb img{transition:none}#kid-services .biz-list a:hover .thumb img{transform:none}}
#kid-services .ks-business-nav>ul{display:contents}#kid-services .ks-business-nav>ul>li>div{font-size:12px;margin-bottom:15px}#kid-services .ks-business-nav>ul>li{min-width:0}

/* ---------- 写真の高さ（common.css の img{height:auto !important} の打ち消し） ----------
 * デモの高さ指定は !important に負けて効かない。値はデモと同じものを !important で書き直す（スマホ幅の値も）。 */
#kid-services .ks-hero-photo { height: 350px !important; }
#kid-services .thumb img { height: 180px !important; }
#kid-services .summary>img { height: 48px !important; }
#kid-services .biz-list:last-child .thumb img { height: 225px !important; }
@container(max-width:700px) {
	#kid-services .ks-hero-photo { height: 270px !important; }
	#kid-services .thumb img { height: 230px !important; }
	#kid-services .summary>img { height: 50px !important; }
	#kid-services .biz-list:last-child .thumb img { height: 200px !important; }
}

/* ---------- ページ内リンクで飛んだ先が、固定ヘッダー（スマホ65px・PC100px）の下に隠れないように ---------- */
#kid-services [id] { scroll-margin-top: 80px; }
@media (min-width: 1025px) { #kid-services [id] { scroll-margin-top: 115px; } }

/* ---------- common.css の打ち消し（デモと見比べて出た差） ----------
 * common.css のスマホ幅〜PC幅の指定で .ttl-sec の文字が中央寄せになる。デモは左寄せ */
#kid-services .ttl-sec p { text-align: left; }

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