/* ==========================
   保険ケースDB
   ========================== */

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--bg:#f8fafc;

--card:#ffffff;

--text:#1e293b;

--border:#dbe4ee;

--shadow:0 3px 12px rgba(0,0,0,.08);

--radius:10px;

}



body{

margin:0;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.8;

}



main{

max-width:1100px;

margin:auto;

padding:30px;

}



a{

color:var(--primary);

text-decoration:none;

}



a:hover{

text-decoration:underline;

}



h1{

font-size:2rem;

margin-bottom:20px;

}



h2{

border-left:6px solid var(--primary);

padding-left:12px;

margin-top:50px;

margin-bottom:20px;

}



h3{

margin-top:30px;

}



button{

background:var(--primary);

color:white;

border:none;

padding:12px 24px;

border-radius:8px;

cursor:pointer;

font-size:16px;

}



button:hover{

background:var(--primary-dark);

}



.card{

background:var(--card);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:20px;

margin-bottom:20px;

}



.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}



.tag{

display:inline-block;

padding:6px 12px;

margin:4px;

border-radius:20px;

background:#dbeafe;

font-size:14px;

}



.tag-green{

background:#dcfce7;

}



.tag-yellow{

background:#fef3c7;

}



.search-box{

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

margin:40px 0;

text-align:center;

}



.search-box button{

margin-top:15px;

}



.article-meta{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:20px 0;

}



.related{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:15px;

}



.related a{

display:block;

padding:18px;

background:white;

border-radius:10px;

box-shadow:var(--shadow);

transition:.2s;

}



.related a:hover{

transform:translateY(-3px);

text-decoration:none;

}



.case-list{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:20px;

}



.case-card{

background:white;

padding:20px;

border-radius:10px;

box-shadow:var(--shadow);

}



.case-card h3{

margin-top:0;

}



footer{

margin-top:80px;

padding:30px;

text-align:center;

color:#64748b;

}


#results{

display:grid;

gap:20px;

margin-top:30px;

}


#searchBox{

width:80%;

max-width:600px;

padding:14px;

font-size:16px;

border:1px solid var(--border);

border-radius:8px;

}


@media(max-width:768px){

main{

padding:20px;

}

h1{

font-size:1.6rem;

}

}


/* ==========================
   Header
   ========================== */


.site-header{

background:white;

border-bottom:1px solid var(--border);

}



.header-inner{

max-width:1100px;

margin:auto;

padding:18px 30px;

display:flex;

justify-content:space-between;

align-items:center;

}



.site-title a{

font-size:24px;

font-weight:bold;

color:var(--text);

text-decoration:none;

}



.site-nav{

display:flex;

gap:20px;

}



.site-nav a{

color:var(--text);

font-weight:500;

}



.site-nav a:hover{

color:var(--primary);

text-decoration:none;

}



@media(max-width:768px){


.header-inner{

flex-direction:column;

gap:15px;

}



.site-nav{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}


}


/* ==========================
   Footer
   ========================== */


.site-footer{

margin-top:80px;

background:#ffffff;

border-top:1px solid var(--border);

}



.footer-inner{

max-width:1100px;

margin:auto;

padding:30px;

text-align:center;

color:#64748b;

}



.footer-title{

font-weight:bold;

font-size:18px;

color:var(--text);

margin-bottom:10px;

}



.copyright{

margin-top:20px;

font-size:14px;

}


/* ==========================
   Breadcrumb
   ========================== */


.breadcrumb{

max-width:1100px;

margin:20px auto;

padding:0 30px;

font-size:14px;

color:#64748b;

}



.breadcrumb a{

color:#64748b;

}



.breadcrumb a:hover{

color:var(--primary);

}



.breadcrumb span{

margin:0 8px;

}



@media(max-width:768px){

.breadcrumb{

padding:0 20px;

font-size:13px;

}

}