
:root{
  --paper:#fffdf8;--ink:#26272b;--sub:#70726f;--rule:#e7e1d8;
  --green:#315b4b;--green-soft:#edf6f1;--blue-soft:#f2f8fb;--cream:#fbf7ef;
  --white:#fff;--page:1320px;--article:900px;--side:330px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.85}
a{color:var(--green);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:99;border:1px solid var(--rule);border-radius:8px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,253,248,.96);border-bottom:1px solid var(--rule);backdrop-filter:blur(8px)}
.site-header-inner{max-width:var(--page);margin:auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-brand{font-size:17px;font-weight:900;text-decoration:none;color:#234e40;letter-spacing:.01em}
.site-nav{display:flex;gap:18px}.site-nav a{font-size:14px;font-weight:750;text-decoration:none}
.detail-main{max-width:var(--page);margin:0 auto;padding:24px 22px 64px}
.breadcrumb{font-size:13px;color:var(--sub);margin:0 0 14px}.breadcrumb a{color:var(--sub)}
.detail-layout{display:grid;grid-template-columns:minmax(0,var(--article)) minmax(240px,var(--side));gap:34px;align-items:start;justify-content:center}
.detail-article{min-width:0}
.concept-head{border:1px solid #d9e5df;border-radius:22px;background:linear-gradient(135deg,#f0f8f4 0%,#fffaf1 100%);padding:28px 30px;margin-bottom:18px}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.badge{display:inline-flex;align-items:center;min-height:30px;padding:3px 10px;border-radius:999px;border:1px solid #d9ded9;background:rgba(255,255,255,.82);font-size:12px;font-weight:800;color:#4d5651}
.concept-head h1{font-size:clamp(31px,4vw,48px);line-height:1.22;letter-spacing:.01em;margin:0 0 10px;color:#203f35}
.reading{font-size:13px;color:var(--sub);margin:0 0 14px}.lead{font-size:17px;line-height:1.9;margin:0;max-width:760px}
.ad{min-height:250px;border:1px dashed #ddd7cf;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#97928b;background:#fff;margin:18px 0 22px;text-align:center}
.ad strong{font-size:12px;font-weight:700;color:#aaa49c}.ad span{font-size:12px}
.content-section{border:1px solid var(--rule);border-radius:18px;background:#fff;padding:24px 26px;margin:16px 0;box-shadow:0 5px 18px rgba(35,50,43,.025);scroll-margin-top:84px}
.content-section h2{font-size:20px;line-height:1.45;margin:0 0 12px;color:#304e43}.content-section p{font-size:16px;margin:0}
.character-heading{display:flex;align-items:center;gap:12px;margin-bottom:10px}.character-heading img{width:52px;height:52px;object-fit:cover;object-position:top;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 9px rgba(0,0,0,.09)}.character-heading div{display:flex;flex-direction:column;line-height:1.35}.character-heading small{font-size:11px;color:var(--sub);font-weight:700}.character-heading h2{margin:2px 0 0}
.yomi-section{background:#f7fbf8;border-color:#d5e4dc}.iruka-section{background:var(--blue-soft);border-color:#d9e7ee}
.share{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.share a,.share button{appearance:none;border:1px solid #ccd8d2;background:#fff;border-radius:12px;min-height:46px;display:flex;align-items:center;justify-content:center;color:#315947;font-weight:800;text-decoration:none;cursor:pointer;font:inherit;font-size:13px}
.sidebar{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px}.side-card{border:1px solid var(--rule);border-radius:16px;background:#fff;padding:17px 18px}.side-card h2{font-size:15px;margin:0 0 10px;color:#35483f}.toc{display:grid;gap:2px}.toc a{display:block;padding:7px 0;text-decoration:none;font-size:13px;border-bottom:1px solid #f0ece6}.toc a:last-child{border:0}.related-side{display:grid;gap:8px}.related-side a{display:block;border:1px solid #e6e0d8;border-radius:11px;padding:10px 11px;background:#fff;text-decoration:none;font-size:13px;font-weight:750;line-height:1.5}.related-side a:hover{background:#f5faf7}.side-back{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #ccd8d2;border-radius:12px;text-decoration:none;font-size:13px;font-weight:800;background:var(--green-soft)}
.site-footer{border-top:1px solid var(--rule);padding:24px 20px;text-align:center;background:#f6faf7;font-size:13px}.site-footer a{margin:0 4px}
:focus-visible{outline:3px solid #486f5e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:980px){.detail-layout{grid-template-columns:minmax(0,820px)}.sidebar{position:static;display:grid;grid-template-columns:1fr 1fr}.side-back{grid-column:1/-1}.detail-main{padding-left:18px;padding-right:18px}}
@media(max-width:640px){.site-header-inner{padding:11px 14px}.site-nav{gap:11px}.detail-main{padding:18px 12px 44px}.concept-head{padding:21px 17px;border-radius:17px}.concept-head h1{font-size:30px}.lead{font-size:15px}.content-section{padding:19px 16px;border-radius:15px}.content-section p{font-size:15px}.sidebar{grid-template-columns:1fr}.side-back{grid-column:auto}.share{grid-template-columns:1fr 1fr}.ad{min-height:180px;margin:16px 0}.character-heading img{width:46px;height:46px}}

/* v108 recirculation */
.popular-side{display:grid;gap:7px}
.popular-side a{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid #e6e0d8;border-radius:11px;padding:9px 10px;background:#fff;text-decoration:none;font-size:13px;font-weight:750;line-height:1.45}
.popular-side a::after{content:"→";font-weight:900;color:#648174}
.popular-side a:hover{background:#f5faf7}
.side-card .recirc-note{margin:-3px 0 9px;color:#85817b;font-size:10px;line-height:1.5}
@media(max-width:980px){.side-card.recirc-card{min-width:0}}


/* v110 — Japanese web-service inspired visual/readability polish */
:root{
  --rule:#d8d0c5!important;
  --rule-strong:#b9aea1;
  --ink:#202327!important;
  --sub:#646762!important;
}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic Medium",sans-serif!important;
  font-size:17px!important;
  line-height:1.72!important;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.header,.site-header{border-bottom:2px solid var(--rule)!important}
.nav,.site-nav{font-size:15px!important;gap:20px!important}
.logo,.site-brand{font-size:18px!important;font-weight:800!important}

/* Home hub: denser cards, clearer typography, real line icons */
.home-intro{max-width:900px!important;margin-bottom:30px!important}
.home-intro h1{font-family:inherit!important;font-weight:800!important;letter-spacing:.01em}
.home-lead{font-size:18px!important;line-height:1.75!important;color:#5f625f!important}
.home-kicker,.route-eyebrow{font-size:12px!important}
.home-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.home-action{grid-template-columns:54px 1fr 30px!important;min-height:102px!important;padding:18px 22px!important;border:2px solid #d5cdc2!important;border-radius:14px!important;box-shadow:0 4px 14px rgba(44,50,46,.045)!important}
.home-action-primary{grid-column:1/-1!important;border-color:#88a796!important;background:#fbfefc!important}
.home-action:hover{border-color:#789687!important;box-shadow:0 8px 20px rgba(44,50,46,.08)!important}
.home-action-icon{width:46px!important;height:46px!important;border-radius:12px!important;background:#edf4ef!important;border:1px solid #d2e1d8!important;color:#315846!important;font-size:0!important}
.home-action-icon svg{width:25px;height:25px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-action-copy{gap:4px!important}
.home-action-copy strong{font-size:20px!important;line-height:1.4!important;font-weight:800!important;letter-spacing:.01em}
.home-action-copy small{font-size:14px!important;line-height:1.55!important;color:#666963!important}
.home-action-arrow{font-size:24px!important;font-weight:800!important}
.home-guide{margin-top:34px!important;padding:22px 4px 0!important;border-top:2px solid var(--rule)!important}
.home-guide-label{font-size:12px!important}.home-guide h2{font-size:21px!important}
.home-guide-items{gap:10px!important}.home-guide-items a{padding:14px 15px!important;border:1px solid #e2dbd1!important;background:#faf9f6!important}
.home-guide-items b{font-size:15px!important}.home-guide-items span{font-size:12px!important}

/* Database */
.route-page-head{max-width:1000px!important}.route-page-head h1{font-family:inherit!important;font-size:clamp(32px,5vw,46px)!important;font-weight:800!important}
.route-page-head>p{font-size:17px!important;color:#61645f!important}
.db-character-guide{max-width:1000px!important;padding:18px 20px!important;border:2px solid #cfe0d7!important;border-radius:15px!important;background:#f5faf7!important;gap:18px!important}
.db-guide-faces img{width:56px!important;height:56px!important;border:2px solid #fff!important;box-shadow:0 2px 8px rgba(40,50,45,.09)!important}
.db-character-guide p{font-size:16px!important;line-height:1.75!important;color:#505953!important}.db-character-guide strong{font-size:16px!important}
.search-shell{border:2px solid #c9beb2!important;border-radius:15px!important;padding:24px!important;box-shadow:0 4px 14px rgba(43,49,45,.025)!important}
.db-search-large>span,.db-kind-fieldset legend,.db-kana-fieldset legend{font-size:14px!important;font-weight:800!important;color:#343834!important}
.db-search-large .db-search-field input{font-size:17px!important;min-height:58px!important;border:2px solid #aaa095!important;background:#fff!important}
.db-search-help{font-size:13px!important;line-height:1.6!important}
.db-kind-tab,.db-kana-tab{font-size:14px!important;min-height:44px!important;border-width:2px!important}
.db-category-kicker{font-size:12px!important}.db-category-head h2{font-size:19px!important}
.db-category-card{min-height:72px!important;border:2px solid #d8cfc4!important;border-radius:11px!important;padding:12px 14px!important;box-shadow:0 2px 8px rgba(40,45,42,.02)!important}
.db-category-card strong{font-size:15px!important;line-height:1.45!important}.db-category-card span{font-size:12px!important}
.db-category-card.active{border-color:#557964!important;box-shadow:0 0 0 1px #557964!important}
.db-results-label{font-size:12px!important}.db-results-head h2,.db-list-title strong{font-size:15px!important}
.db-concept{min-height:220px!important;border:2px solid #d7cfc4!important;border-radius:14px!important;padding:21px!important}
.db-concept h3{font-size:20px!important;line-height:1.45!important;font-weight:800!important}.db-concept p{font-size:15px!important;line-height:1.72!important;color:#555953!important}
.db-card-meta,.db-card-genres{font-size:12px!important}.db-genre-tag{font-size:12px!important}
.db-concept-footer{font-size:13px!important}
.db-empty{border:2px solid #ded5ca!important}.db-empty strong{font-size:20px!important}.db-empty span{font-size:15px!important}

/* Detail pages */
.concept-head{border:2px solid #cedfd6!important;border-radius:20px!important;padding:30px 32px!important}
.concept-head h1{font-size:clamp(34px,4vw,50px)!important;font-weight:800!important}.lead{font-size:18px!important;line-height:1.8!important}
.badge{font-size:13px!important;border-width:1.5px!important}.reading{font-size:14px!important}
.content-section{border:2px solid #ded7cd!important;border-radius:17px!important;padding:25px 27px!important;box-shadow:0 4px 14px rgba(35,50,43,.025)!important}
.content-section h2{font-size:21px!important;font-weight:800!important}.content-section p{font-size:17px!important;line-height:1.85!important}
.yomi-section{border-color:#cadfd4!important}.iruka-section{border-color:#cbdfe9!important}
.character-heading img{width:56px!important;height:56px!important}.character-heading small{font-size:12px!important}.character-heading h2{font-size:21px!important}
.side-card{border:2px solid #ded6cc!important;border-radius:15px!important;padding:18px 19px!important}.side-card h2{font-size:16px!important}.toc a,.related-side a,.popular-side a{font-size:14px!important;line-height:1.55!important}.related-side a,.popular-side a{border-width:1.5px!important}
.side-back{font-size:14px!important;border-width:2px!important}
.ad{border-width:2px!important}
.share a,.share button{font-size:14px!important;border-width:1.5px!important}

/* Random pages */
.random-card,.random-side-card{border:2px solid #d8d0c6!important}.random-card{padding:30px!important}.random-lead{font-size:18px!important}.random-section{border:2px solid #e0d8ce!important}.random-section h2{font-size:20px!important}.random-section p{font-size:17px!important;line-height:1.8!important}.random-related a{font-size:14px!important;border-width:1.5px!important}

@media(max-width:820px){
  body{font-size:16px!important}
  .home-actions{grid-template-columns:1fr!important}.home-action-primary{grid-column:auto!important}
  .home-action{min-height:92px!important;padding:16px 17px!important}.home-action-copy strong{font-size:18px!important}.home-action-copy small{font-size:13px!important}
  .home-guide-items{grid-template-columns:1fr 1fr!important}
  .route-page-head>p{font-size:16px!important}.db-character-guide p{font-size:15px!important}
}
@media(max-width:560px){
  .home-intro h1{font-size:40px!important}.home-lead{font-size:16px!important}
  .home-action{grid-template-columns:48px 1fr 24px!important;border-radius:12px!important}.home-action-icon{width:42px!important;height:42px!important}.home-action-icon svg{width:23px;height:23px}
  .home-guide-items{grid-template-columns:1fr!important}
  .search-shell{padding:16px!important}.db-category-card{min-height:66px!important}.db-category-card strong{font-size:14px!important}
  .content-section{padding:20px 17px!important}.content-section p{font-size:16px!important}.lead{font-size:16px!important}
}


/* v111 random selector: random route lands on the real DB detail page */
.random-gift-banner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px;padding:15px 18px;border:2px solid #cfe0d7;border-radius:16px;background:#f2f8f4;box-sizing:border-box}
.random-gift-banner[hidden]{display:none!important}
.random-gift-copy{display:flex;align-items:center;gap:13px;min-width:0}
.random-gift-copy img{width:50px;height:50px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 8px rgba(40,50,45,.1);flex:none}
.random-gift-copy strong{font-size:16px;line-height:1.55;color:#173c2f}
.random-next-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 15px;border:2px solid #789687;border-radius:11px;background:#fff;color:#244f3d;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap}
.random-next-link:hover{background:#e9f3ed}
@media(max-width:720px){.random-gift-banner{align-items:flex-start;flex-direction:column;padding:14px}.random-gift-copy strong{font-size:15px}.random-next-link{width:100%;box-sizing:border-box}}


/* v112 unified font: Yasashisa Gothic */
@font-face{font-family:"やさしさゴシック";src:url("https://cdn.leafscape.be/Yasashisa/YasashisaGothic_web.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
html,body,button,input,select,textarea,a,p,span,div,li,dt,dd,th,td,label,small,strong,b,h1,h2,h3,h4,h5,h6{font-family:"やさしさゴシック","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif!important}

/* v113 Noto Sans JP */
html,body,button,input,select,textarea{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic Medium",sans-serif;}


/* v120 smartphone finish: static concept pages */
@media(max-width:760px){
  .site-header-inner{min-height:58px!important;padding:12px 14px!important;justify-content:flex-start!important;}
  .site-brand{font-size:18px!important;line-height:1.35!important;white-space:nowrap!important;}
  .site-nav{display:none!important}
  .detail-main{padding:18px 12px 46px!important;}
  .breadcrumb{font-size:12.5px!important;line-height:1.6!important;margin-bottom:14px!important;}
  .detail-layout{display:block!important}
  .detail-article{width:100%!important;min-width:0!important}
  .concept-head{padding:20px 17px!important;margin-bottom:16px!important;border-radius:17px!important;}
  .badges{gap:6px!important;margin-bottom:10px!important}
  .badge{min-height:28px!important;padding:3px 9px!important;font-size:12px!important;}
  .concept-head h1{font-size:clamp(29px,9vw,36px)!important;line-height:1.3!important;margin-bottom:8px!important;}
  .reading{font-size:13px!important;margin-bottom:12px!important}
  .lead{font-size:16px!important;line-height:1.85!important;}
  .ad{min-height:150px!important;margin:16px 0 18px!important;border-radius:15px!important;}
  .content-section{padding:19px 17px!important;margin:14px 0!important;border-radius:15px!important;}
  .content-section h2,.character-heading h2{font-size:20px!important;line-height:1.45!important;}
  .content-section p{font-size:16px!important;line-height:1.95!important;}
  .character-heading{gap:10px!important;align-items:center!important;margin-bottom:10px!important;}
  .character-heading img{width:48px!important;height:48px!important;}
  .share{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .sidebar{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:18px!important;}
  .side-card{padding:16px!important}
  .toc a,.related-side a,.popular-side a{font-size:14px!important}
  .random-gift-banner{flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:14px!important;}
  .random-next-link{width:100%!important}
}
