/* Phase A, scoped to real JIN blog templates. HOME and approved guide are excluded. */
@font-face{font-family:'Lato PKN';src:url('../img/canonical-master/lato-regular.woff') format('woff');font-display:swap;font-weight:400}
body.pkn-jin-brand{--brand-deep:#073f44;--brand-green:#067052;--brand-mint:#31c4a7;--brand-yellow:#f8ca36;--brand-bg:#f5fbf8;--brand-border:#dce9e5;--brand-text:#3f5c55;--brand-muted:#52736b;--brand-font:'Lato PKN',Lato,-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;background:#f5fbf8;color:#3f5c55;font-size:16px;line-height:1.9}
body.pkn-jin-brand #wrapper{background:var(--brand-bg)}
/* Flex min-content from the existing related-article slider must not expand the 720px article. */
body.pkn-jin-brand #main-contents{min-width:0}
body.pkn-jin-brand #contents{max-width:100%}
/* Only these font declarations override the legacy plugin's !important font split. */
body.pkn-jin-brand,body.pkn-jin-brand :is(p,li,td,th,h1,h2,h3,h4,h5,h6,b,strong,.post-list-title,.widgettitle,.site-title,.menu-item){font-family:var(--brand-font)!important}
body.pkn-jin-brand a{color:var(--brand-green)}
body.pkn-jin-brand a:hover{color:var(--brand-deep)}
body.pkn-jin-brand a:focus-visible,body.pkn-jin-brand :is(button,input,select,textarea):focus-visible{outline:3px solid var(--brand-deep);outline-offset:4px;box-shadow:0 0 0 7px #fff}
body.pkn-jin-brand #header-box{background:#fff;border-bottom:3px solid var(--brand-yellow)!important}
body.pkn-jin-brand :is(#site-info,#site-info-sp) img,body.pkn-jin-brand .site-title img{width:180px!important;max-width:100%;height:auto;object-fit:contain}
body.pkn-jin-brand :is(.cps-post-box,.widget,.post-list-item){border-radius:12px}
body.pkn-jin-brand .cps-post-box{background:#fff;box-shadow:0 4px 20px #073f4407}
body.pkn-jin-brand .cps-post-header .cps-post-title{font-size:32px;line-height:1.5;color:var(--brand-deep);letter-spacing:.015em;margin-top:18px;margin-bottom:18px}
body.pkn-jin-brand .cps-post-main{color:var(--brand-text);font-size:16px;line-height:1.9}
body.pkn-jin-brand .cps-post-main p{font-size:16px;line-height:1.9;margin-bottom:24px}
body.pkn-jin-brand .cps-post-main :is(li,td,th){font-size:16px;line-height:1.9}
body.pkn-jin-brand .cps-post-main h2{margin-top:56px;margin-bottom:24px;padding:20px 24px;background:var(--brand-deep);color:#fff;font-size:26px;line-height:1.55;border-radius:12px;box-shadow:none}
body.pkn-jin-brand .cps-post-main h2:after{background:var(--brand-yellow)}
body.pkn-jin-brand .cps-post-main h3{margin-top:40px;margin-bottom:16px;background:#edf8f3;color:var(--brand-deep);font-size:23px;line-height:1.6;border-radius:12px;padding-top:16px;padding-bottom:16px}
body.pkn-jin-brand .cps-post-main h3:before{color:var(--brand-green)}
body.pkn-jin-brand :is(h2,h3,h4){scroll-margin-top:100px}
body.pkn-jin-brand .cps-post-main :is(p,li) a:not([class*='btn']):not(.pkn-btn){text-decoration:underline;text-underline-offset:3px}
body.pkn-jin-brand :is(.cps-post-date-box,.post-list-meta,.post-list-date,.icon-name,.profile-desc){color:var(--brand-muted)}
body.pkn-jin-brand #rtoc-mokuji-wrapper{background:#f5fbf8;border:1px solid var(--brand-border);border-radius:12px;padding:28px;margin:40px 0}
body.pkn-jin-brand #rtoc-mokuji-wrapper :is(.rtoc-mokuji,#rtoc-mokuji-title,.rtoc-mokuji-title,span,a,li){color:var(--brand-deep)}
body.pkn-jin-brand #rtoc-mokuji-wrapper ol li:before{color:var(--brand-green)}
body.pkn-jin-brand #rtoc-mokuji-wrapper #rtoc-mokuji-title{font-size:19px;font-weight:700}
body.pkn-jin-brand #rtoc-mokuji-wrapper .rtoc_open_close{min-height:44px;background:var(--brand-deep);color:#fff;border-radius:12px;padding:8px 12px;font-size:12px}
body.pkn-jin-brand .tabBtn-mag{gap:0}
body.pkn-jin-brand .tabBtn-mag li label{color:var(--brand-muted);background:#fff;border-radius:12px 12px 0 0}
body.pkn-jin-brand .tabBtn-mag li label{min-height:44px}
body.pkn-jin-brand #tab-1:checked~.tabBtn-mag li [for=tab-1],
body.pkn-jin-brand #tab-2:checked~.tabBtn-mag li [for=tab-2],
body.pkn-jin-brand #tab-3:checked~.tabBtn-mag li [for=tab-3],
body.pkn-jin-brand #tab-4:checked~.tabBtn-mag li [for=tab-4]{background:var(--brand-yellow);color:var(--brand-deep)}
/* Keep JIN's native radio tabs, expose their keyboard focus without changing layout or click logic. */
body.pkn-jin-brand .toppost-list-box>input[name=switch]{display:block;position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
body.pkn-jin-brand #tab-1:focus-visible~.tabBtn-mag [for=tab-1],body.pkn-jin-brand #tab-2:focus-visible~.tabBtn-mag [for=tab-2],body.pkn-jin-brand #tab-3:focus-visible~.tabBtn-mag [for=tab-3],body.pkn-jin-brand #tab-4:focus-visible~.tabBtn-mag [for=tab-4]{outline:3px solid var(--brand-deep);outline-offset:2px}
body.pkn-jin-brand .post-list-item{box-shadow:0 3px 14px #073f4409;border:1px solid var(--brand-border)}
body.pkn-jin-brand .post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-title{color:var(--brand-deep);font-size:17px;line-height:1.7}
body.pkn-jin-brand :is(.cps-post-date,.date-published,.date-modified,.timeslash,.post-list-meta,.post-list-meta span){color:var(--brand-muted)}
body.pkn-jin-brand #main-contents .cps-post-header .cps-post-meta :is(.cps-post-date,.date-published,.date-modified,.timeslash){color:var(--brand-muted)}
body.pkn-jin-brand .cps-post-cat a,body.pkn-jin-brand .post-list-cat{background-color:var(--brand-green)!important;color:#fff}
body.pkn-jin-brand :is(.post-list-thumb img,.cps-post-thumb img)[data-pkn-jin-image]{aspect-ratio:16/9;object-fit:contain;display:block;width:100%;height:auto}
body.pkn-jin-brand :is(.balloon-content,.concept-box1,.simple-box1,.pkn-main-cta){border-radius:12px}
body.pkn-jin-brand .balloon-box{margin-top:32px;margin-bottom:32px}
body.pkn-jin-brand .balloon-icon img{object-fit:contain;background:#fff;border:1px solid var(--brand-border);border-radius:50%;padding:3px}
/* The approved display name is longer than the legacy nickname; never clip it. */
body.pkn-jin-brand .icon-name{line-height:1.5;overflow-wrap:anywhere;word-break:normal;max-width:100%;white-space:normal}
body.pkn-jin-brand .profile-name{overflow-wrap:anywhere;white-space:normal}
body.pkn-jin-brand .balloon-content{background:#f5fbf8;border-color:var(--brand-border);padding:20px}
body.pkn-jin-brand .balloon-content p:last-child{margin-bottom:0}
body.pkn-jin-brand .balloon-bg-yellow .balloon-serif{background:#f5fbf8!important}
body.pkn-jin-brand .balloon-box.balloon-bg-yellow .balloon-content{background:#f5fbf8}
body.pkn-jin-brand .balloon-left.balloon-bg-yellow .balloon-serif:after{border-right-color:#f5fbf8!important}
body.pkn-jin-brand .balloon-right.balloon-bg-yellow .balloon-serif:after{border-left-color:#f5fbf8!important}
body.pkn-jin-brand .balloon-serif:before{border-right-color:var(--brand-border)}
body.pkn-jin-brand table{border-color:var(--brand-border);border-radius:12px}
body.pkn-jin-brand :is(th,td){border-color:var(--brand-border);padding:14px 16px}
body.pkn-jin-brand th{color:var(--brand-deep);background:#edf8f3}
body.pkn-jin-brand blockquote{background:#f5fbf8;color:var(--brand-text);border-color:var(--brand-border);border-left:4px solid var(--brand-mint);border-radius:12px}
body.pkn-jin-brand :is(.widgettitle,.profile-title){color:var(--brand-deep)}
/* JIN writes important mint backgrounds; dark green is required for these small white labels. */
body.pkn-jin-brand #sidebar .popular-item .pop-num{background:var(--brand-green)!important;color:#fff}
body.pkn-jin-brand #sidebar :is(.sidebar-btn a,.profile-sns-menu){background:var(--brand-green)!important;color:#fff}
body.pkn-jin-brand #sidebar .profile-sns-menu a{color:#fff}
body.pkn-jin-brand .pkn-main-cta{background:#edf8f3;border:1px solid var(--brand-border);padding:28px;margin:40px 0}
body.pkn-jin-brand .pkn-main-cta .pkn-main-cta-head{color:var(--brand-deep);font-size:21px;font-weight:700}
body.pkn-jin-brand .pkn-main-cta .pkn-main-cta-lead{color:var(--brand-text)}
body.pkn-jin-brand .pkn-main-cta .pkn-btn{background:var(--brand-green);color:#fff;border:0;border-radius:12px;white-space:normal;line-height:1.7;min-height:48px;padding:16px 20px;text-decoration:none}
body.pkn-jin-brand :is(input[type=search],input[type=text],textarea,select){border:1px solid var(--brand-border);border-radius:12px;color:var(--brand-deep);background:#fff}
body.pkn-jin-brand :is(.pagination,.pager-top) .current{color:var(--brand-deep);background:var(--brand-yellow)}
body.pkn-jin-brand #footer{background:var(--brand-deep);color:#fff}
body.pkn-jin-brand #footer a{color:#fff}
body.pkn-jin-brand #rtoc_return a{background:var(--brand-deep);color:#fff;min-width:44px;min-height:44px}
@media(max-width:767px){
 body.pkn-jin-brand #contents{width:100%}
 body.pkn-jin-brand #main-contents{width:calc(100% - 30px);max-width:calc(100% - 30px)}
 body.pkn-jin-brand :is(#site-info,#site-info-sp) img,body.pkn-jin-brand .site-title img{width:160px!important}
 body.pkn-jin-brand .cps-post-header .cps-post-title{font-size:26px;line-height:1.55}
 body.pkn-jin-brand .cps-post-main h2{font-size:23px;padding:18px 20px}
 body.pkn-jin-brand .cps-post-main h3{font-size:21px}
 body.pkn-jin-brand #rtoc-mokuji-wrapper{padding:22px 18px}
 body.pkn-jin-brand .pkn-main-cta{padding:24px 20px}
 body.pkn-jin-brand .post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-title{font-size:15px;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){
 body.pkn-jin-brand *{scroll-behavior:auto;transition:none;animation:none}
 /* JIN's entrance animation starts at opacity:0. Keep content visible when motion is disabled. */
 body.pkn-jin-brand :is(.main-contents.animate,.sideber.animate,.header.animate,[class*='header-style'][class*='animate'],.cps-info-bar.animate,.cps-icon-bar.animate,.cps-sp-menu-bar.animate){opacity:1}
 body.pkn-jin-brand .headsearch.animate .search-box:before{opacity:1;animation:none}
}