/* =========================================================
   TOPINAVI HOME v5 — standalone front-page stylesheet
   This file is intentionally independent from legacy style.css.
   One centered news box controls every horizontal edge.
   Decorative side art is absolutely positioned and never affects layout.
   ========================================================= */

:root{
  --tn5-box: 1400px;
  --tn5-page-gap: 28px;
  --tn5-gap: 12px;
  --tn5-blue: #0b5ea8;
  --tn5-blue-dark: #063c72;
  --tn5-line: #d7e4ee;
  --tn5-text: #172433;
  --tn5-muted: #667789;
  --tn5-bg: #f8fbfd;
}

*{box-sizing:border-box}
html{overflow-x:hidden;background:#fff}
body{margin:0;color:var(--tn5-text);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}

/* ---------- Front-page header: rebuilt here because legacy CSS is not loaded ---------- */
.site-header{position:relative;z-index:30;background:#fff;border-bottom:1px solid #e5edf3}
.tnv3-utility{background:#f7fafc;border-bottom:1px solid #e8eef3;font-size:12px;color:#657586}
.tnv3-utility .wrap{min-height:28px;display:flex;justify-content:flex-end;align-items:center;gap:18px}
.wrap{width:min(var(--tn5-box),calc(100% - (var(--tn5-page-gap) * 2)));margin-inline:auto}
.header-top{min-height:84px;display:grid;grid-template-columns:auto minmax(0,1fr) 230px auto;gap:22px;align-items:center}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}
.brand-logo{width:188px;height:auto}
.brand-sub{font-size:12px;color:#6a7c8c;white-space:nowrap}
.header-desktop-nav{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.header-desktop-nav a{padding:8px 7px;font-size:13px;font-weight:700;color:#33485b;border-radius:7px;white-space:nowrap}
.header-desktop-nav a:hover{background:#eef6fb;color:var(--tn5-blue)}
.header-search{display:grid;grid-template-columns:34px 1fr;align-items:center;border:1px solid #d7e2eb;border-radius:9px;background:#fff;overflow:hidden}
.header-search button{border:0;background:transparent;color:#597084;cursor:pointer;padding:8px 0}
.header-search input{min-width:0;border:0;outline:0;padding:9px 10px 9px 0;font-size:13px;background:transparent}
.header-menu-icon{display:none;border:0;background:transparent;font-size:24px;cursor:pointer}
.main-nav{display:none}

/* ---------- Page / single centered news box ---------- */
.tn5-page{position:relative;isolation:isolate;background:linear-gradient(#fff,#f9fcfe);padding-bottom:26px}
.tn5-news-box{position:relative;z-index:2;width:min(var(--tn5-box),calc(100% - (var(--tn5-page-gap) * 2)));margin-inline:auto;padding:0}
.tn5-topline{width:100%;min-height:31px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:6px 2px 4px;color:#657586;font-size:12px}
.tn5-main{width:100%;min-width:0}

/* Side artwork is not a flex/grid child and cannot alter the center box width. */
.tn5-side-art{position:absolute;top:24px;bottom:0;width:120px;min-height:1086px;background-repeat:no-repeat;background-size:120px auto;z-index:0;pointer-events:none;user-select:none;opacity:.98}
.tn5-side-art--left{left:max(0px,calc(50% - (var(--tn5-box) / 2) - 126px));background-image:url('../images/flower-left-ref.png');background-position:top left}
.tn5-side-art--right{right:max(0px,calc(50% - (var(--tn5-box) / 2) - 126px));background-image:url('../images/flower-right-ref.png');background-position:top right}

/* ---------- Lead row ---------- */
.tn5-lead-grid{width:100%;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr) minmax(250px,.95fr);gap:var(--tn5-gap);align-items:stretch;margin:0 0 var(--tn5-gap)}
.tn5-lead-grid>*{min-width:0}
.tn5-lead-main,.tn5-lead-sub,.tn5-promo{min-width:0}
.tn5-lead-sub{display:grid;grid-template-rows:1fr 1fr;gap:var(--tn5-gap)}
.tn5-hero-card,.tn5-sub-card{position:relative;overflow:hidden;border-radius:10px;background:#0a3157;min-height:0;box-shadow:0 2px 7px rgba(17,49,76,.08)}
.tn5-hero-card{height:100%;min-height:360px}
.tn5-sub-card{min-height:174px}
.tn5-media{position:absolute;inset:0}
.tn5-media img{width:100%;height:100%;object-fit:cover}
.tn5-hero-card:after,.tn5-sub-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,25,50,.05) 15%,rgba(0,35,70,.22) 48%,rgba(2,30,57,.92) 100%);pointer-events:none}
.tn5-overlay{position:absolute;z-index:2;left:0;right:0;bottom:0;color:#fff}
.tn5-overlay--hero{padding:22px 24px}
.tn5-overlay--sub{padding:13px 14px}
.tn5-tag{display:inline-flex;align-items:center;padding:3px 9px;margin-bottom:8px;border-radius:999px;background:#fff;color:var(--tn5-blue);font-size:11px;font-weight:800}
.tn5-overlay h1,.tn5-overlay h3{margin:0;font-weight:900;line-height:1.35;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.tn5-overlay h1{font-size:clamp(23px,2vw,34px)}
.tn5-overlay h3{font-size:16px}
.tn5-overlay p{margin:8px 0 6px;max-width:90%;font-size:13px;color:#eef6fd}
.tn5-overlay time{font-size:11px;color:#d9e7f3}

.tn5-promo{overflow:hidden;border-radius:10px;background:#f2f7fb;border:1px solid #e0eaf1}
.tn5-promo--hero{min-height:360px}
.tn5-promo--hero img{width:100%;height:100%;object-fit:cover;object-position:center}
.tn5-promo--bottom img{width:100%;height:auto}

/* ---------- Ticker ---------- */
.tn5-ticker{width:100%;display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 10px;margin:0 0 var(--tn5-gap);border:1px solid var(--tn5-line);border-radius:8px;background:#fff;overflow:hidden}
.tn5-ticker-label{display:flex;justify-content:center;align-items:center;min-height:28px;border-radius:6px;background:#e83c4a;color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em}
.tn5-ticker-list{min-width:0;display:flex;align-items:center;gap:22px;overflow:hidden;white-space:nowrap}
.tn5-ticker-list a{display:flex;gap:8px;min-width:0;font-size:12px;color:#32465a}
.tn5-ticker-list time{color:#8393a2}
.tn5-ticker-list span{overflow:hidden;text-overflow:ellipsis}
.tn5-more{font-size:12px;font-weight:800;color:var(--tn5-blue);white-space:nowrap}

/* ---------- Categories ---------- */
.tn5-category-grid{width:100%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;margin:0 0 var(--tn5-gap)}
.tn5-category-card{min-width:0;overflow:hidden;border:1px solid #dce7ef;border-radius:9px;background:#fff;box-shadow:0 1px 4px rgba(20,55,82,.04)}
.tn5-category-card img{width:100%;aspect-ratio:16/8.7;object-fit:cover}
.tn5-category-card>span{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px;font-size:12px}
.tn5-category-card b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn5-category-card i{font-style:normal;color:var(--tn5-blue)}

/* ---------- Lower news area ---------- */
.tn5-lower-grid{width:100%;display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,1fr);gap:var(--tn5-gap);align-items:start}
.tn5-lower-grid>*{min-width:0}
.tn5-lower-main,.tn5-lower-side{display:flex;flex-direction:column;gap:var(--tn5-gap);min-width:0}
.tn5-panel,.tn5-ranking{width:100%;min-width:0;border:1px solid var(--tn5-line);border-radius:10px;background:#fff;box-shadow:0 1px 5px rgba(20,55,82,.04)}
.tn5-panel{padding:15px}
.tn5-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:13px;padding-bottom:10px;border-bottom:2px solid #edf3f7}
.tn5-panel-head h2{margin:0;font-size:22px;line-height:1.2;color:#18334d}
.tn5-panel-head p{margin:4px 0 0;font-size:12px;color:#7b8c9b}
.tn5-panel-head>a{font-size:12px;font-weight:800;color:var(--tn5-blue);white-space:nowrap}
.tn5-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tn5-news-card{min-width:0;overflow:hidden;border:1px solid #e0e8ee;border-radius:9px;background:#fff}
.tn5-card-image{display:block;overflow:hidden;background:#eef3f6}
.tn5-card-image img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .2s ease}
.tn5-news-card:hover .tn5-card-image img{transform:scale(1.025)}
.tn5-card-body{padding:9px 10px 10px}
.tn5-card-body h3{margin:0 0 8px;font-size:14px;line-height:1.55}
.tn5-card-body time{font-size:11px;color:#8a98a5}

.tn5-ranking{padding:13px}
.tn5-ranking>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:2px solid #edf3f7}
.tn5-ranking h3{margin:0;font-size:17px;color:#18334d}
.tn5-ranking header a{font-size:11px;font-weight:800;color:var(--tn5-blue);white-space:nowrap}
.tn5-rank-row{display:grid;grid-template-columns:28px minmax(0,1fr) 76px;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #edf2f5}
.tn5-rank-row:last-child{border-bottom:0}
.tn5-rank-row>b{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:#0c6ab8;color:#fff;font-size:12px}
.tn5-rank-row>span{font-size:12px;font-weight:700;line-height:1.45}
.tn5-rank-row img{width:76px;aspect-ratio:16/10;object-fit:cover;border-radius:6px}
.tn5-muted,.tn5-empty{color:#7b8b99;font-size:13px;padding:28px;text-align:center;background:#f6f9fb;border:1px dashed #d8e4ec;border-radius:8px}
.tn5-empty--wide{grid-column:1/-1}

/* ---------- Footer: rebuilt here because legacy CSS is not loaded ---------- */
.footer{margin-top:0;background:#0b3158;color:#e9f2f9;padding:34px 0}
.footer .wrap{width:min(var(--tn5-box),calc(100% - (var(--tn5-page-gap) * 2)))}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.footer .brand-logo{width:170px}
.footer a{color:#e9f2f9}
.footer p{margin:10px 0}
.footer small{color:#c5d5e3;line-height:1.7}
.footer ul{list-style:none;margin:8px 0 0;padding:0}
.footer li{margin:4px 0}
body.home>.wrap{width:min(var(--tn5-box),calc(100% - (var(--tn5-page-gap) * 2)));margin-inline:auto}
.ad-slot{margin:14px 0}

/* ---------- Responsive ---------- */
@media (max-width:1500px){
  :root{--tn5-page-gap:18px}
  .tn5-side-art{opacity:.55}
}
@media (max-width:1320px){
  .tn5-side-art{display:none}
  .header-top{grid-template-columns:auto minmax(0,1fr) 210px}
  .header-menu-icon{display:none}
  .brand-sub{display:none}
  .tn5-category-grid{grid-template-columns:repeat(9,minmax(0,1fr))}
}
@media (max-width:1080px){
  .header-desktop-nav{display:none}
  .header-top{grid-template-columns:auto minmax(0,1fr) auto}
  .header-search{max-width:320px;justify-self:end;width:100%}
  .header-menu-icon{display:block}
  .main-nav{display:none;background:#0b5ea8;color:#fff}
  .main-nav.open{display:block}
  .nav-inner{display:flex;flex-wrap:wrap;gap:4px;padding-block:8px}
  .nav-inner a{padding:8px 10px;font-size:13px}
  .tn5-lead-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)}
  .tn5-promo--hero{grid-column:1/-1;min-height:220px}
  .tn5-promo--hero img{height:220px;object-fit:cover}
  .tn5-lower-grid{grid-template-columns:1fr}
  .tn5-lower-side{display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--tn5-page-gap:12px}
  .tnv3-utility{display:none}
  .header-top{min-height:70px;grid-template-columns:auto 1fr auto;gap:10px}
  .brand-logo{width:150px}
  .header-search{display:none}
  .tn5-lead-grid{grid-template-columns:1fr}
  .tn5-lead-sub{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .tn5-sub-card{min-height:190px}
  .tn5-promo--hero{grid-column:auto}
  .tn5-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tn5-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  :root{--tn5-page-gap:9px;--tn5-gap:9px}
  .tn5-topline{font-size:10px}
  .tn5-hero-card{min-height:300px}
  .tn5-overlay--hero{padding:16px}
  .tn5-overlay h1{font-size:22px}
  .tn5-overlay p{display:none}
  .tn5-lead-sub{grid-template-columns:1fr}
  .tn5-sub-card{min-height:185px}
  .tn5-ticker{grid-template-columns:60px minmax(0,1fr);gap:8px}
  .tn5-more{display:none}
  .tn5-ticker-list a:not(:first-child){display:none}
  .tn5-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tn5-panel{padding:11px}
  .tn5-panel-head{align-items:flex-start}
  .tn5-panel-head h2{font-size:19px}
  .tn5-card-grid{grid-template-columns:1fr 1fr;gap:8px}
  .tn5-card-body{padding:8px}
  .tn5-card-body h3{font-size:12px}
  .tn5-lower-side{display:flex}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
}


/* v3.3.11 category-grid fix: keep exactly 9 equal cards on desktop */
.tn5-category-grid{grid-auto-rows:1fr;align-items:stretch}
.tn5-category-card{width:100%;height:100%}
.tn5-category-card img{display:block;width:100%;height:auto;aspect-ratio:132/107;object-fit:cover;object-position:center}