/* Shared navigation is scoped so worksheet and app controls retain their layout. */
body[data-site="print"]{--site-bg:#FFFDF8;--site-surface:#F6F7F9;--site-green:#2E9D5B;--site-hover:#237846;--site-accent:#2E9D5B;background:#FFFDF8}
body[data-site="app"]{--site-bg:#FFFFFF;--site-surface:#F6F7F9;--site-green:#2563EB;--site-hover:#1D4ED8;--site-accent:#2563EB;background:#FFFFFF}
body[data-site="shared"]{--site-bg:#FAF8F4;--site-green:#3D4A5C;--site-hover:#1D2733;--site-accent:#2E9D5B;background:#FAF8F4}
.pair-header,.pair-footer,.sister-band{box-sizing:border-box;font:16px/1.7 'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:normal}
.pair-header *,.pair-footer *,.sister-band *{box-sizing:border-box}
.pair-header{position:relative;z-index:20;display:block;width:100%;max-width:none;margin:0;padding:0;background:#fff;color:#24221F;border:0;border-bottom:1px solid #E5E0D8;flex-shrink:0}
.pair-header-inner{max-width:1248px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pair-header nav{display:flex;width:auto;margin:0;align-items:center;flex-wrap:wrap}
.pair-header .pair-tabs{background:#F0EDE7;padding:5px;border-radius:999px;gap:4px}
.pair-header a{text-decoration:none;min-height:44px;display:flex;align-items:center;white-space:normal}
.pair-header .pair-tab{gap:8px;padding:9px 17px;border-radius:999px;font-size:16px;color:#2E9D5B}
.pair-tab strong{font-family:'Zen Maru Gothic',sans-serif;font-weight:700}.pair-tab span{font-size:14px;color:#4A4640}
.pair-header .pair-tab-app{color:#2563EB}.pair-header .pair-tab-print[aria-current]{background:#2E9D5B;color:white}.pair-header .pair-tab-app[aria-current]{background:#2563EB;color:white}.pair-header .pair-tab[aria-current] span{color:white}
.pair-header .pair-links{gap:8px 20px}.pair-header .pair-links a{font-size:14px;color:#3D4A5C}
.pair-header .pair-links a:hover,.pair-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.pair-header a:focus-visible,.pair-footer a:focus-visible,.sister-band a:focus-visible{outline:3px solid #2563EB;outline-offset:3px}
.pair-footer{background:#2A2723;color:#EDE7DC;margin:0;padding:44px max(24px,calc((100vw - 1200px)/2));display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.pair-footer a,.renewal-page .pair-footer a{color:#fff;display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}.pair-footer p{font-size:14px;line-height:1.9;margin:6px 0}.pair-footer nav{display:flex;align-items:flex-start;flex-direction:column;gap:0}.pair-footer nav a{font-size:14px;font-weight:400}
.sister-band{padding:32px 36px;margin:56px 0 12px;border-radius:22px;display:flex;justify-content:space-between;align-items:center;gap:28px;color:#24221F}.sister-band h2{font:700 24px/1.6 'Zen Maru Gothic',sans-serif;margin:4px 0}.sister-band p{margin:4px 0;font-size:16px}.sister-band span{font-size:14px;font-weight:700}.sister-app{background:#F6F7F9}.sister-print{background:#F6F7F9}.sister-band a,.renewal-page .sister-band a{background:#2563EB;color:white;border-radius:12px;padding:13px 22px;white-space:nowrap;font-weight:700;text-decoration:none}.sister-print a,.renewal-page .sister-print a{background:#2E9D5B}
.pair-brand{display:flex;align-items:center;gap:14px;font:700 25px/1.5 'Zen Maru Gothic',sans-serif;margin:0 0 28px}.pair-logo{display:inline-flex;align-items:center;justify-content:center;background:var(--site-green,#2E9D5B);color:white;width:54px;height:52px;border-radius:13px 17px 11px 15px;transform:rotate(-3deg);font-size:22px}
.pair-hero{padding:64px 0 40px}.pair-hero h1{font-size:clamp(30px,3.6vw,46px);line-height:1.55;letter-spacing:.02em;margin:0 0 24px}.pair-hero p{font-size:18px;line-height:1.9}.pair-hero .button{margin:12px 16px 0 0}.pair-hero a:not(.button){display:inline-flex;min-height:44px;align-items:center}
.paper-entries{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:10px 0 48px}.paper-entries a{background:white;border:1px solid #E5DDCE;border-top:6px solid #2E9D5B;border-radius:20px;padding:28px;display:block;text-decoration:none;color:#24221F}.paper-entries h2{font-size:28px;margin:6px 0}.paper-entries p{margin:8px 0;font-size:16px;color:#4A4640}.paper-entries span{font-size:14px;font-weight:700;color:#2E9D5B}
.app-intro{background:#fff;border:1px solid #DDE5EF;border-radius:22px;display:grid;grid-template-columns:1fr 1.4fr;gap:42px;padding:40px;margin:24px 0 56px}.app-intro h2{font-size:27px;line-height:1.65;margin-top:8px}.app-intro p{margin:0 0 16px;line-height:1.95}.app-directory{padding:8px 0}.app-directory>h2{font-size:28px}.app-directory .grid{grid-template-columns:repeat(3,minmax(0,1fr))}.app-directory .tool-card{border-radius:20px}.app-directory .tool-card h3{font-size:22px;line-height:1.6}.app-directory .cardtext{padding:26px}.app-origin{font-size:16px;border-top:1px solid #DFE6EF;padding-top:18px;margin-top:22px}.app-next{font-size:14px;background:#F6F7F9;border-radius:10px;padding:12px}.app-next a{display:inline;font-weight:700}.app-directory-note{font-size:14px;color:#4F5866}.access-guide{margin:48px 0;padding:28px;background:white;border:1px solid #DFE6EF;border-radius:20px}.access-guide h2{font-size:24px}
.shared-article{max-width:1120px;margin:auto;padding:40px 0}.shared-lead,.shared-prose{max-width:760px;margin:0 auto;padding:24px 0}.shared-lead h1{font-size:clamp(30px,4vw,42px);line-height:1.5}.shared-lead>p:last-child{font-size:18px;line-height:2}.shared-label{font-size:14px;font-weight:700;color:#6B6458}.shared-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px 0 40px}.shared-points section{padding:28px;background:white;border:1px solid #E5E0D8;border-radius:20px}.shared-points span{font:700 32px 'Zen Maru Gothic',sans-serif;color:#2E9D5B}.shared-points h2{font-size:22px}.shared-article p{line-height:2}.shared-prose h2{font-size:28px;line-height:1.6}.accommodation-examples{background:#fff;border-radius:20px;padding:32px;margin:24px auto;max-width:824px}.accommodation-examples dl{display:block;margin:0}.accommodation-examples .example-row{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;border-bottom:1px solid #E5E0D8;padding:18px 0}.accommodation-examples dt,.accommodation-examples dd{border:0;padding:0;margin:0}.accommodation-examples dt{font-weight:700}.shared-consult{background:#EFEBE3;padding:32px;border-radius:24px;margin:32px 0}.shared-consult .paper-entries{margin-bottom:0}.shared-consult .paper-entries a:nth-child(2){border-top-color:#2563EB}.shared-sources{font-size:14px;max-width:760px;margin:24px auto}.shared-sources a{display:inline-flex;min-height:44px;align-items:center;margin-right:24px}
@media(max-width:1000px){.pair-header-inner{gap:8px}.pair-header .pair-links{gap:4px 20px}.app-directory .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shared-points{grid-template-columns:1fr}.pair-footer{grid-template-columns:1fr 1fr}.pair-footer nav{grid-column:1/-1}}
@media(max-width:650px){.pair-header-inner{padding:10px 16px}.pair-header .pair-tabs{width:100%;border-radius:20px;gap:4px;flex-wrap:nowrap}.pair-header .pair-tab{width:50%;padding:9px 7px;flex-direction:column;gap:0;border-radius:16px;text-align:center;font-size:16px}.pair-header .pair-links{justify-content:space-between;width:100%;gap:0 8px}.pair-header .pair-links a{font-size:14px}.pair-hero{padding:32px 0 16px}.pair-brand{font-size:23px;margin-bottom:24px}.pair-hero p{font-size:16px}.paper-entries,.app-directory .grid,.app-intro{grid-template-columns:1fr}.paper-entries{gap:16px}.app-intro{padding:24px;gap:12px}.sister-band{padding:24px;display:block}.sister-band h2{font-size:22px}.sister-band a{display:inline-block;margin-top:16px;white-space:normal}.pair-footer{grid-template-columns:1fr;padding:32px 24px;gap:24px}.pair-footer nav{grid-column:auto}.accommodation-examples{padding:24px}.accommodation-examples .example-row{grid-template-columns:1fr;gap:6px}.shared-consult{padding:24px}.shared-article{padding-top:16px}}
@media print{.pair-header,.pair-footer,.sister-band{display:none!important}}

body.renewal-page h1,body.renewal-page h2,body.renewal-page h3{font-family:'Zen Maru Gothic',sans-serif}body.renewal-page{font-family:'Zen Kaku Gothic New',sans-serif}body[data-site="print"] .home-hero-copy h1{font-size:clamp(30px,3.6vw,46px);line-height:1.55}body[data-site="print"] .home-hero-copy h1 span{color:inherit}

/* One physical pill, shared by both destinations. */
@view-transition { navigation: auto; }
.pair-header .pair-tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:440px;max-width:100%;gap:0;background:#F6F7F9;view-transition-name:site-switch}
.pair-header .pair-tab{position:relative;z-index:1;justify-content:center;width:auto;background:transparent!important;text-decoration:none!important;transition:color .3s ease-out}
.pair-header .pair-tab:hover,.pair-header .pair-tab:focus{text-decoration:none!important}
.pair-header .pair-tab-pill{position:absolute;z-index:0;left:5px;top:5px;bottom:5px;width:calc((100% - 10px)/2);border-radius:999px;background:#2E9D5B;transform:translateX(0);transition:transform .3s ease-out,background-color .3s ease-out;view-transition-name:site-switch-pill;pointer-events:none}
.pair-tabs[data-selected="app"] .pair-tab-pill{transform:translateX(100%);background:#2563EB}
.pair-tabs[data-selected="shared"] .pair-tab-pill{visibility:hidden;view-transition-name:none}
.pair-header .pair-tab:not([aria-current]),.pair-header .pair-tab:not([aria-current]) span{color:#444B54}
.pair-tab strong,.pair-tab span{position:relative}
.pair-tab-print{view-transition-name:site-switch-print-label}.pair-tab-app{view-transition-name:site-switch-app-label}
::view-transition-group(site-switch),::view-transition-group(site-switch-pill),::view-transition-group(site-switch-print-label),::view-transition-group(site-switch-app-label){animation-duration:.3s;animation-timing-function:ease-out}
::view-transition-group(site-switch){z-index:1}::view-transition-group(site-switch-pill){z-index:2}::view-transition-group(site-switch-print-label),::view-transition-group(site-switch-app-label){z-index:3}
@media(max-width:650px){.pair-header .pair-tabs{width:100%}.pair-header .pair-tab-pill{border-radius:16px}}
@media(prefers-reduced-motion:reduce){.pair-header .pair-tab-pill,.pair-header .pair-tab{transition:none}::view-transition-group(*){animation-duration:.01ms!important}}
/* White app canvas; blue is reserved for actionable controls and icons. */
body[data-site="app"]{--site-border:#E5E7EB;--site-ink:#242B35;--site-muted:#535B66;--site-accent:#2563EB}
body[data-site="app"] a:not(.button){color:#303846}
body[data-site="app"] .eyebrow,body[data-site="app"] .guide-label,body[data-site="app"] .step-number{color:#535B66}
body[data-site="app"] .app-intro,body[data-site="app"] .app-next,body[data-site="app"] .access-guide,body[data-site="app"] .guide-bottom{background:#F6F7F9;color:#242B35;border-color:#E5E7EB}
body[data-site="app"] .guide-bottom .guide-label{color:#535B66}
body[data-site="app"] .guide-bottom .button,body[data-site="app"] .tool-actions a:first-child{background:#2563EB;color:white;border-radius:999px;padding:10px 18px;text-decoration:none}
body[data-site="app"] .sister-print a{background:#2E9D5B;color:white}
body[data-site="app"] .pair-logo{background:#2563EB}
body[data-site="app"] .pair-tab[aria-current],body[data-site="app"] .pair-tab[aria-current] span{color:white}
body[data-site="app"] .pair-footer a{color:white}
body[data-site="app"] .start-panel,body[data-site="app"] .case-aside,body[data-site="app"] .voice-example{border-color:#E5E7EB}
/* Four consistent subject accents, never applied to the printed worksheet. */
body[data-site="print"]{--print-red:#E0533D;--print-green:#2E9D5B;--print-yellow:#F2B53A;--print-blue:#3A86D4;--site-border:#E8E7E1;--site-surface:#FAF9F5;--site-accent:#3A86D4}
body[data-site="print"] .paper-entries a{border-top-color:#2E9D5B}
body[data-site="print"] .paper-entries a:nth-child(2){border-top-color:#3A86D4}
body[data-site="print"] .paper-entries span{color:#237846}
body[data-site="print"] .hero-figure-1{background:#FFF3CE}body[data-site="print"] .hero-figure-2{background:#EAF6EE}body[data-site="print"] .hero-figure-3{background:#FDEDE9}body[data-site="print"] .hero-figure-4{background:#EBF3FC}body[data-site="print"] .hero-figure-5{background:#FFF3CE}
body[data-site="print"] .discovery-card:nth-child(1){border-top-color:#E0533D}body[data-site="print"] .discovery-card:nth-child(2){border-top-color:#2E9D5B}body[data-site="print"] .discovery-card:nth-child(3){border-top-color:#3A86D4}
body[data-site="print"] .pair-logo{background:transparent;transform:rotate(-3deg);width:66px;height:54px;border-radius:0;gap:3px;font-size:33px;line-height:1}
body[data-site="print"] .pair-logo .logo-convex{background:linear-gradient(#E0533D 0 50%,#2E9D5B 50%);background-clip:text;-webkit-background-clip:text;color:transparent}
body[data-site="print"] .pair-logo .logo-concave{background:linear-gradient(#F2B53A 0 50%,#3A86D4 50%);background-clip:text;-webkit-background-clip:text;color:transparent}
body[data-site="print"] [data-subject-color="red"],body[data-site="print"] [data-aim="なぞる・書く"],body[data-site="print"] [data-aim="文字の学習"]{--subject-color:#E0533D;--subject-tint:#FDEDE9}
body[data-site="print"] [data-subject-color="green"],body[data-site="print"] [data-aim="数える"]{--subject-color:#2E9D5B;--subject-tint:#EAF6EE}
body[data-site="print"] [data-subject-color="blue"],body[data-site="print"] [data-aim="仲間分け"],body[data-site="print"] [data-aim="同じもの探し"]{--subject-color:#3A86D4;--subject-tint:#EBF3FC}
body[data-site="print"] [data-subject-color="yellow"],body[data-site="print"] [data-aim="時計"]{--subject-color:#F2B53A;--subject-tint:#FFF3CE}
body[data-site="print"] .catalog-card{border-top:5px solid var(--subject-color,#2E9D5B)}
body[data-site="print"] .catalog-card .catalog-art{background:var(--subject-tint,#FAF9F5)}
body[data-site="print"] .catalog-tag{background:var(--subject-tint,#FAF9F5);color:#343B42}
body[data-site="print"] .home-categories a[data-subject-color],body[data-site="print"] .categories a[data-subject-color]{border-left:5px solid var(--subject-color);background:var(--subject-tint)}
body[data-site="print"] .tool-card[data-subject-color]{border-top:5px solid var(--subject-color)}
body[data-site="print"] .subject-key{display:flex;flex-wrap:wrap;gap:12px 24px;margin:24px 0;color:#414843;font-size:15px}
.subject-key span{display:inline-flex;align-items:center;gap:8px}.subject-key i{width:12px;height:12px;border-radius:4px;background:var(--subject-color);display:inline-block}

body[data-site="app"] .pair-footer{background:#F6F7F9;color:#535B66;border-top:1px solid #E5E7EB}
body[data-site="app"] .pair-footer a{color:#303846}
body[data-site="app"] .sister-print a{background:#2563EB;color:#fff}
body[data-site="app"] .tag{background:#F6F7F9;color:#535B66}
.pair-logo svg{display:block;width:100%;height:auto}

/* Convex = interests/strengths. Every concern mark includes its matching plug. */
.strength-mark{display:inline-block;flex:none;width:30px;height:27px;margin-right:12px;background:var(--subject-color,#2E9D5B);clip-path:polygon(0 36%,33% 36%,33% 0,67% 0,67% 36%,100% 36%,100% 100%,0 100%);vertical-align:-2px;border-radius:3px}
.support-mark{position:relative;display:inline-block;flex:none;width:32px;height:34px;margin-right:10px;vertical-align:-6px}
.support-slot{position:absolute;inset:10px 0 0;background:#2563EB;clip-path:polygon(0 0,28% 0,28% 62%,72% 62%,72% 0,100% 0,100% 100%,0 100%);border-radius:3px}
.support-plug{position:absolute;left:31%;top:0;width:38%;height:20px;background:#2563EB;border-radius:2px}
body[data-site="print"] .home-categories a:before{content:"";display:inline-block;width:18px;height:18px;background:var(--subject-color,#2E9D5B);clip-path:polygon(0 35%,33% 35%,33% 0,67% 0,67% 35%,100% 35%,100% 100%,0 100%);margin-right:8px;vertical-align:-3px}
body[data-site="print"] .home-categories a:nth-child(4n+1){--subject-color:#E0533D}body[data-site="print"] .home-categories a:nth-child(4n+2){--subject-color:#2E9D5B}body[data-site="print"] .home-categories a:nth-child(4n+3){--subject-color:#F2B53A}body[data-site="print"] .home-categories a:nth-child(4n){--subject-color:#3A86D4}
body[data-site="print"] .discovery-like:before{content:"";display:inline-block;width:15px;height:15px;margin-right:6px;background:#2E9D5B;clip-path:polygon(0 35%,33% 35%,33% 0,67% 0,67% 35%,100% 35%,100% 100%,0 100%)}
/* Short interlocking block rhythm replaces flat section rules. */
.renewal-page main>section:not(.pair-hero):not(.home-hero):before,.renewal-page .app-directory:before,.renewal-page .sister-band:before{content:"";display:block;height:16px;width:100%;margin:0 0 32px;background:repeating-linear-gradient(90deg,#E0533D 0 24px,#2E9D5B 24px 48px,#F2B53A 48px 72px,#3A86D4 72px 96px);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath fill='black' d='M0 6h8V0h8v6h8v6h8V6h8V0h8v16H0Z'/%3E%3C/svg%3E") repeat-x;opacity:.65;grid-column:1/-1;flex-basis:100%}
body[data-site="app"] main>section:before,body[data-site="app"] .app-directory:before,body[data-site="app"] .sister-band:before{background:#2563EB;opacity:.65}
.renewal-page .sister-band{flex-wrap:wrap}.renewal-page .sister-band:before{margin-bottom:0}
.renewal-page .app-directory{padding-top:32px}.app-directory>h2{display:flex;align-items:center;gap:0}
.renewal-page .app-directory .grid{align-items:stretch;gap:30px 24px}
.app-fit-pair{min-width:0;display:flex;flex-direction:column;padding-bottom:36px}
.concern-bar{position:relative;min-height:94px;background:#F6F7F9;border-radius:14px 14px 8px 8px;padding:18px 18px 28px;display:flex;align-items:center;gap:0}
.concern-bar:after{content:"";position:absolute;bottom:0;left:calc(50% - 38px);width:76px;height:22px;background:#fff;border-radius:7px 7px 0 0}
.concern-bar h3{font-size:17px!important;margin:0;line-height:1.6}
.renewal-page .app-fit-block{position:relative;overflow:visible;transform:translateY(34px);transition:transform .3s ease-out;border:3px solid #2563EB;border-radius:14px;flex:1;background:#fff}
.app-fit-block:before{content:"";position:absolute;top:-23px;left:calc(50% - 35px);width:70px;height:23px;background:#2563EB;border-radius:6px 6px 0 0}
.app-fit-pair.is-fitted .app-fit-block{transform:translateY(0)}
.app-directory .app-fit-block h4{font:700 23px/1.6 'Zen Maru Gothic',sans-serif;margin:0 0 14px}
.app-directory .app-fit-block h4 a{text-decoration:none;color:#242B35}
.app-directory .app-fit-block .cardtext{padding:24px 22px}
.fit-toggle{font:700 14px/1.5 'Zen Kaku Gothic New',sans-serif;border:1px solid #2563EB;border-radius:8px;background:#fff;color:#2563EB;min-height:44px;padding:9px 14px;cursor:pointer}
.fit-toggle:hover{background:#F6F7F9}.fit-toggle:focus-visible{outline:3px solid #2563EB;outline-offset:4px}
.fit-response{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid #E5E7EB;padding-top:18px;margin-top:14px}
.fit-growth{display:flex;align-items:flex-end;justify-content:center;position:relative;height:68px;padding-bottom:20px;gap:3px;min-width:100px}
.fit-growth i{width:17px;height:18px;background:#2563EB;border-radius:3px 3px 0 0}
.fit-growth .growth-column{height:28px;transition:height .5s ease-out 0s}
.fit-growth span{position:absolute;bottom:0;font-size:11px;color:#535B66;white-space:nowrap}
.is-fitted .fit-growth .growth-column{height:48px;transition-delay:.55s}
.block-story{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;align-items:center;padding:20px 0 48px;margin-bottom:24px}
.block-story h2{font-size:30px;line-height:1.6;margin:8px 0 18px}.block-story p{line-height:1.9}
.block-story .fit-toggle{background:#2563EB;color:#fff;padding:12px 24px;font-size:16px}
.block-caption{font-size:13px;color:#535B66}
.block-chart{position:relative;height:300px;width:100%;border-bottom:2px solid #444B54}
.chart-column{position:absolute;bottom:0;width:16.666%;height:90px;background:#2563EB;border:3px solid white;box-sizing:border-box;border-radius:9px 9px 0 0}
.col-one{left:0}.col-two{left:16.666%}.chart-strength{left:33.333%;height:155px;color:white;text-align:center;padding-top:12px;font:700 17px 'Zen Maru Gothic',sans-serif;transition:height .5s ease-out 0s}.col-four{left:50%}.col-six{left:83.333%}
.chart-gap{position:absolute;left:66.666%;bottom:0;width:16.666%;height:90px;border:3px solid white;background:linear-gradient(transparent 0 65%,#2563EB 65%);box-sizing:border-box}
.chart-gap span{display:flex;align-items:center;justify-content:center;height:65%;border:2px dashed #AAB1BD;border-radius:6px;color:#535B66;font-size:11px}
.chart-app{position:absolute;left:66.666%;bottom:30px;width:16.666%;height:60px;box-sizing:border-box;border:3px solid #fff;background:#2563EB;border-radius:8px;color:white;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transform:translateY(-135px);transition:transform .3s ease-out}
.is-fitted .chart-app{transform:translateY(0)}.is-fitted .chart-strength{height:250px;transition-delay:.55s}
@media(max-width:760px){.block-story{grid-template-columns:1fr}.block-chart{max-width:500px;margin:0 auto}.block-story h2{font-size:26px}.app-directory>h2{font-size:24px;line-height:1.6}.fit-response{gap:8px}.renewal-page .app-directory .grid{gap:24px}}
@media(prefers-reduced-motion:reduce){.app-fit-block,.chart-app,.chart-strength,.fit-growth .growth-column{transition:none!important}}
@media print{.block-story,.fit-response{display:none}.app-fit-block{transform:none!important}.renewal-page main>section:before,.renewal-page .app-directory:before,.renewal-page .sister-band:before{display:none}}
/* App section rules must outrank the shared :not() section selector. */
body.renewal-page[data-site="app"] main>section:not(.pair-hero):not(.home-hero):before{background:#2563EB}
.renewal-page .shared-article>section+section:before,.renewal-page .about-page>section+section:before,.renewal-page .reading-section+section:before{content:"";display:block;height:12px;width:100%;margin:0 0 28px;background:repeating-linear-gradient(90deg,#E0533D 0 24px,#2E9D5B 24px 48px,#F2B53A 48px 72px,#3A86D4 72px 96px);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath fill='black' d='M0 6h8V0h8v6h8v6h8V6h8V0h8v16H0Z'/%3E%3C/svg%3E") repeat-x;opacity:.65;grid-column:1/-1}
body.renewal-page[data-site="app"] .reading-section+section:before{background:#2563EB}
/* いんさつカゴ（docs/kago-kiroku-design.md） */
.pair-header .pair-kago{position:relative;gap:6px;padding:6px 14px 6px 12px;border-radius:999px;background:#EAF6EE;color:#1F6E40!important;font-weight:700;font-size:14px}
.pair-header .pair-kago:hover{background:#D7EEDF;text-decoration:none!important}
.pair-kago .kago-count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#E0533D;color:#fff;font-size:12px;line-height:22px;text-align:center;font-weight:700}
.kago-add{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:999px;border:2px solid #2E9D5B;background:#fff;color:#1F6E40;font-weight:700;cursor:pointer}
.kago-add:hover{background:#EAF6EE}.kago-add:focus-visible{outline:3px solid #2563EB;outline-offset:3px}
.kago-add[aria-pressed="true"]{background:#EAF6EE;color:#1F6E40;border-style:dashed}
.kago-add svg{flex:none}
.kago-add-mini{position:absolute;z-index:2;top:12px;right:12px;min-height:44px;padding:6px 14px;font-size:13px;border-width:1.5px;box-shadow:0 2px 8px #3c301a1f}
.kago-toast{box-sizing:border-box;width:max-content;position:fixed;z-index:1000;left:50%;bottom:20px;transform:translate(-50%,140%);display:flex;align-items:center;gap:16px;max-width:calc(100% - 32px);padding:12px 18px 12px 20px;border-radius:16px;background:#24221F;color:#fff;font:15px/1.6 'Zen Kaku Gothic New',sans-serif;box-shadow:0 8px 24px #0003;transition:transform .25s ease-out;pointer-events:none}
.kago-toast.is-visible{transform:translate(-50%,0);pointer-events:auto}
.kago-toast a{color:#9BE0B4;font-weight:700;white-space:nowrap;text-decoration:none}
@media(max-width:650px){.pair-header .pair-kago{padding:6px 10px}.pair-kago .pair-kago-text{font-size:13px}}
@media(prefers-reduced-motion:reduce){.kago-toast{transition:none}}
@media print{.kago-toast,.kago-add{display:none!important}}
.app-list-lead{margin:8px 0 8px;font-size:16px;line-height:1.9;color:#3C4756}.block-story .block-caption a{white-space:nowrap}
.app-examples{padding:48px 0 24px}
.app-examples h2{font-size:28px;margin:6px 0 24px}
.app-examples ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.app-examples li{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:12px;padding:18px 22px;background:#fff;border:1px solid #E5E7EB;border-radius:16px}
.example-worry{margin:0;font-weight:700;font-size:17px;color:#242B35}
.example-arrow{color:#2563EB;font-weight:700;text-align:center}
.example-help{margin:0;font-size:15px;line-height:1.8;color:#3C4756}
.example-help a{display:inline-block;margin-left:10px;font-weight:700;color:#1D4ED8}
.app-examples-note{margin:20px 0 0;font-size:15px;line-height:1.9;color:#3C4756}
@media(max-width:650px){.app-examples li{grid-template-columns:1fr;gap:4px;padding:16px}.example-arrow{text-align:left}.example-help a{display:block;margin:4px 0 0}.app-examples h2{font-size:23px}}
.app-shot{display:block;width:62%;max-width:200px;margin:0 auto 18px;border-radius:18px;overflow:hidden;border:6px solid #1F2937;box-shadow:0 8px 20px #1f293720;background:#fff}
.app-shot img{display:block;width:100%;height:auto}
.app-shot-wide{width:100%;max-width:none;border-width:6px;border-radius:14px}
.app-help{font-size:15px;line-height:1.9;color:#3C4756;margin:8px 0 0}

/* 2026-10-07: app site dividers as a simple thin blue line (no bumps). */
body.renewal-page[data-site="app"] main>section:not(.pair-hero):not(.home-hero):before,body.renewal-page[data-site="app"] .app-directory:before,body.renewal-page[data-site="app"] .sister-band:before{background:#2563EB!important;opacity:.35!important;height:2px!important;-webkit-mask:none!important;mask:none!important;border-radius:2px}
body[data-site="app"] .pair-logo:has(svg){background:transparent;width:66px;height:54px;border-radius:0}

/* 2026-10-07: phones — no site-switch tabs in the header; keep only the print cart, and keep it in reach. */
@media(max-width:650px){
.pair-header .pair-tabs{display:none}
.pair-header .pair-links>a:not(.pair-kago){display:none}
.pair-header .pair-links{width:auto;margin-left:auto}
.pair-header .pair-header-inner{padding:8px 16px;justify-content:flex-end;min-height:0}
body[data-site="print"] .pair-header,body[data-site="shared"] .pair-header{position:sticky;top:0}
body[data-site="app"] .pair-header{display:none}
}
/* スマホでトップの見出しが「る、」だけで改行されないように：言葉のまとまりで折り返し、小さい画面では文字を少し小さく */
.pair-hero h1 .phrase{display:inline-block}
@media(max-width:650px){.pair-hero h1{font-size:min(30px,calc((100vw - 44px) / 11.4));letter-spacing:0}}
/* 凹にアプリがはまる図：スクロールに合わせて動く（block-interactions.js が --fit / --grow を入れる） */
.block-story.scroll-driven .chart-app{transition:none;transform:translateY(calc(-135px * (1 - var(--fit, 1))))}
.block-story.scroll-driven .chart-strength{transition:none;height:calc(155px + 95px * var(--grow, 1))}

/* Opt-in maker controls: clock is the reference; placement stays page-local. */
.maker-print-button.maker-print-button,.maker-cart-button.maker-cart-button{box-sizing:border-box;font-family:"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:normal;font-weight:700;font-synthesis:none;letter-spacing:normal;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:999px;cursor:pointer}
.maker-print-button.maker-print-button{border:2px solid #1168bc;background:#1168bc;color:#fff;box-shadow:0 2px 3px #1168bc15;transition:background .15s,box-shadow .15s}
.maker-print-button.maker-print-button:hover{background:#0b559f}
.maker-print-button.maker-print-button:focus-visible{outline:3px solid #519def;outline-offset:4px}
.maker-print-button.maker-print-button:active{transform:translateY(1px)}
.maker-cart-button.maker-cart-button{border:2px solid #2E9D5B;background:#fff;color:#1F6E40}
.maker-cart-button.maker-cart-button:hover,.maker-cart-button.maker-cart-button[aria-pressed="true"]{background:#EAF6EE}
.maker-cart-button.maker-cart-button[aria-pressed="true"]{border-style:dashed}
.maker-cart-button.maker-cart-button:focus-visible{outline:3px solid #2563EB;outline-offset:3px}
.maker-print-button::before,.maker-cart-button::before{content:"";width:24px;height:24px;flex:none;background-position:center;background-size:contain;background-repeat:no-repeat}
.maker-print-button::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22none%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M9%203h14v10H9z%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2226%22%20height%3D%2214%22%20rx%3D%224%22%20fill%3D%22%23bfe3ff%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2215%22%20r%3D%222%22%20fill%3D%22%2352ce87%22%2F%3E%3Cpath%20d%3D%22M9%2021h14v8H9z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M12%2024h8M12%2027h6%22%20fill%3D%22none%22%20stroke%3D%22%232878b9%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E")}
.maker-cart-button::before{background-image:var(--maker-cart-icon)}
.maker-title.maker-title{font-family:"BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;font-size:24px;font-weight:700;font-synthesis:none;line-height:1.5;color:#243246}
@media(max-width:700px){.maker-title.maker-title{font-size:21px}}
@media(prefers-reduced-motion:reduce){.maker-print-button.maker-print-button{transition:none}}
/* 2026-10-10 困りごとの段階：上は大きなくくりへのボタン、具体的な困りごとはカードの上で1回だけ */
.app-examples ul.concern-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.app-examples .concern-jump li{display:block;padding:0;border:0;background:none}
.concern-jump a{display:flex;align-items:center;min-height:76px;padding:16px 22px;background:#fff;border:1px solid #DDE5EF;border-radius:16px;color:#242B35;font-weight:700;font-size:19px;line-height:1.5;text-decoration:none;transition:border-color .2s,background .2s}
.concern-jump a:after{content:"↓";margin-left:auto;padding-left:12px;color:#2563EB}
.concern-jump a:hover,.concern-jump a:focus-visible{border-color:#2563EB;background:#F5F8FF}
.app-directory{scroll-margin-top:16px}
.concern-bar .support-mark{width:22px;height:24px;margin-right:10px;vertical-align:-4px}
.concern-bar .support-slot{inset:7px 0 0;border-radius:2px}
.app-fit-pair-wide{grid-column:span 2}
.app-fit-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;flex:1}
.app-fit-cards>.app-fit-block{display:flex;flex-direction:column}
.concern-bar-double:after{left:calc(25% - 44px)}
.concern-bar-double:before{content:"";position:absolute;bottom:0;left:calc(75% - 32px);width:76px;height:22px;background:#fff;border-radius:7px 7px 0 0}
@media(max-width:1000px){.app-fit-pair-wide{grid-column:1/-1}}
@media(max-width:650px){.app-examples ul.concern-jump{grid-template-columns:1fr;gap:10px}.concern-jump a{min-height:64px;font-size:17px;padding:14px 18px}.app-fit-cards{grid-template-columns:1fr;gap:20px}.concern-bar-double:after{left:calc(50% - 38px)}.concern-bar-double:before{display:none}.app-fit-cards>.app-fit-block+.app-fit-block:before{display:none}}
.concern-jump .support-mark{width:24px;height:22px;margin-right:12px;vertical-align:0}.concern-jump .support-slot{inset:2px 0 0;border-radius:2px}
@media(max-width:650px){.concern-jump a{font-size:16px;padding:14px 16px;letter-spacing:0}}
.concern-jump .phrase{display:inline-block}
@media(max-width:1000px){.app-directory .grid{grid-auto-flow:row dense}}
/* 2026-10-10 スクショ：枠の高さを全カードでそろえ、中の端末は実際に使う向きのまま */
.app-shot-stage{height:196px;padding:16px;margin:0 0 20px;background:#F3F5F8;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.app-shot-stage .app-shot,.app-shot-stage .app-shot-wide{width:auto;max-width:100%;margin:0;border-width:5px;border-radius:12px;box-shadow:0 6px 14px #1f293718}
.app-shot-stage .app-shot img{height:154px;width:auto;max-width:100%;object-fit:cover;object-position:top}
@media(max-width:650px){.app-shot-stage{height:176px;padding:14px}.app-shot-stage .app-shot img{height:138px}}
/* 2026-10-10 テーマ版（好きな題材の別バージョン）は、もとのアプリのカードの中に小さく並べる */
.theme-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;padding-top:14px;border-top:1px solid #E5E7EB}
.theme-label{font-size:14px;color:#4F5866}
.theme-chip{display:inline-flex;align-items:center;min-height:36px;padding:4px 14px;border:1.5px solid #2563EB;border-radius:999px;color:#1D4ED8;font-size:14px;font-weight:700;text-decoration:none;background:#fff}
.theme-chip:hover,.theme-chip:focus-visible{background:#F5F8FF}
/* 2026-10-10 「はまる」を凹マークで見せる：アプリ＝黄色いピース（サイトのマークと同じ）。
   カードの出っぱり（凸に見える）と吹き出しのくぼみ（さかさまの凹）はやめて、吹き出しとカードを1つのかたまりにする */
.chart-app{background:#F2B53A;color:#3B2F12}
.concern-bar{min-height:0;padding:16px 20px;border-radius:14px 14px 0 0}
.concern-bar:after,.concern-bar-double:before{display:none}
.renewal-page .app-fit-block,.app-fit-pair.is-fitted .app-fit-block{transform:none;border-radius:0 0 14px 14px}
.app-fit-block:before{display:none}
.concern-bar .support-mark{overflow:visible}
.concern-bar .support-mark:after{content:"";position:absolute;left:31%;width:38%;top:7px;height:9px;background:#F2B53A;border-radius:1.5px;opacity:0;transform:translateY(-12px);transition:transform .35s cubic-bezier(.3,1.5,.6,1),opacity .2s}
.app-fit-pair.is-fitted .concern-bar .support-mark:after{opacity:1;transform:translateY(0)}
@media(hover:none){.concern-bar .support-mark:after{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.concern-bar .support-mark:after{transition:none}}
.concern-bar .support-mark{width:28px;height:28px;margin-right:12px}.concern-bar .support-slot{inset:8px 0 0}.concern-bar .support-mark:after{top:8px;height:12px;transform:translateY(-14px)}
.concern-bar h3 .phrase,.app-directory>h2 .phrase{display:inline-block}
/* 凸凹アプリ：保護者・先生用のログイン（記録を見る画面へ） 2026-10-11 */
.pair-header .pair-login{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 12px;border-radius:999px;background:#EAF1FB;color:#1F57A8!important;font-weight:700;font-size:14px}
.pair-header .pair-login:hover{background:#D9E6F8;text-decoration:none!important}
@media(max-width:650px){.pair-header .pair-links>a.pair-login{display:inline-flex;padding:6px 10px;font-size:13px}body[data-site="app"] .pair-header:has(.pair-login){display:block}}
