/* ===== Base ===== */
:root{
/* 落ち着いた自動車サイト向けカラー */
--bg:#f6f7f9;
--panel:#ffffff;
--fg:#222;/* 本文色 */
--muted:#6b7280;/* 補助テキスト */
--accent:#0f3d62; /* スチールブルー */
--accent-2:#ffc107; /* イエロー（アクセント） */
--line:#e5e7eb; /* 罫線 */
--radius:16px;
--shadow:0 6px 18px rgba(15,61,98,.08);
--max:800px;
}
html,body{height:100%}
body{
margin:0;
color:var(--fg);
background:linear-gradient(180deg,#fcfdff 0%, #f2f5f9 100%);
font-family:"Meiryo","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Arial,sans-serif; /* system-uiは使用しない */
line-height:1.8;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto;}
/* ===== Layout ===== */
.site{
display:flex;
min-height:100%;
flex-direction:column;
}
header{
background: linear-gradient(135deg, #0f3d62 0%, #1a5689 60%);
color:#fff;
padding:28px 16px 22px;
box-shadow:var(--shadow);
}
.container{
width:clamp(320px, 92%, var(--max));
margin:0 auto;
}
header h1{
margin:0;
font-size: clamp(20px, 3.6vw, 30px);
letter-spacing:.02em;
font-weight:800;
line-height:1.3;
}
header h1 a{
color:#fff;
text-decoration: none;
}
/* ヘッダー画像（任意） */
.hero{
margin:14px 0 0;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(255,255,255,.25);
box-shadow:0 10px 22px rgba(0,0,0,.15);
}
main{
flex:1 1 auto;
padding:28px 0 40px;
}
.content{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding: clamp(18px, 3.5vw, 28px);
box-shadow:var(--shadow);
}
/* ===== Typography ===== */
.lead{
color:var(--muted);
font-size:clamp(14px, 2.6vw, 16px);
margin:0 0 10px;
}
.content p{
margin:0;
}
/* 段落間の行間を適度に */
.content p + p{ margin-top:1.0em; }
/* 本文内の画像は中央寄せ（デフォルト） */
.content img{
display:block;
margin:16px auto;
border-radius:12px;
box-shadow:0 10px 22px rgba(15,61,98,.10);
}
/* ===== Headings (no class on tags) ===== */
.content h2,
.content h3,
.content h4{ line-height:1.35; }
.content h2{
margin:28px 0 14px;
font-size: clamp(20px, 3.8vw, 26px);
font-weight:800;
color:var(--accent);
padding:10px 14px;
background:
linear-gradient(90deg, rgba(15,61,98,.12), rgba(15,61,98,.04)),
linear-gradient(180deg, #fff, #fff);
border-left:6px solid var(--accent-2);
border-radius:10px;
}
.content h3{
margin:26px 0 12px;
font-size: clamp(18px, 3.4vw, 22px);
font-weight:700;
color:#0f2d46;
padding-bottom:8px;
border-bottom:3px double var(--line);
}
.content h4{
margin:22px 0 10px;
font-size: clamp(16px, 3.1vw, 19px);
font-weight:700;
color:#243447;
position:relative;
padding-left:28px;
}
.content h4::before{
content:"";
position:absolute;
left:0; top:.45em;
width:16px; height:16px;
border-radius:4px;
background: conic-gradient(from 0deg, var(--accent) 0 250deg, var(--accent-2) 0);
box-shadow:0 2px 6px rgba(15,61,98,.25);
}
/* ===== Lists ===== */
.content ul,
.content ol{
margin:12px 0 12px 1.4em;
padding:0;
}
.content li{ padding:.15em 0; }
/* カスタム風マーカー（ul） */
.content ul{ list-style:none; margin-left:0; }
.content ul li{
position:relative; padding-left:24px;
}
.content ul li::before{
content:"";
position:absolute; left:0; top:.7em;
width:10px; height:10px; border-radius:50%;
background: radial-gradient(circle at 35% 35%, var(--accent-2), var(--accent));
box-shadow:0 0 0 2px #fff inset, 0 1px 3px rgba(0,0,0,.18);
transform:translateY(-50%);
}
.content ol{ counter-reset:num; margin-left:0; }
.content ol li{
counter-increment:num;
position:relative; padding-left:34px;
}
.content ol li::before{
content: counter(num) ".";
position:absolute; left:0; top:0;
font-weight:700; color:var(--accent);
}
/* ===== Table (no class on table) ===== */
.content table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin:14px 0 10px;
border:1px solid var(--line);
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 14px rgba(15,61,98,.06);
background:#fff;
}
.content th,
.content td{
padding:12px 14px;
border-bottom:1px solid var(--line);
vertical-align:top;
}
.content thead th{
background:linear-gradient(0deg, rgba(255,193,7,.18), rgba(255,193,7,.05));
color:#0f2d46;
font-weight:800;
border-bottom:2px solid #d8dee9;
}
.content tbody tr:nth-child(even) td{ background:#fafbfd; }
/* 表をスマホで崩さない（横スクロール許可） */
.table-scroll{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.table-scroll > table{ min-width:560px; } /* 必要に応じて */
/* ===== Callouts (任意) ===== */
.note{
margin:18px 0;
padding:14px 16px;
background:linear-gradient(180deg,#fff8e1,#fff3cd);
border:1px solid #ffe08a;
border-left:6px solid var(--accent-2);
border-radius:12px;
color:#4b4f56;
}
/* ===== Footer ===== */
footer{
margin-top:26px;
background:#0f2d46;
color:#e7eef6;
border-top:4px solid var(--accent-2);
}
.footer-inner{
width:clamp(320px, 92%, var(--max));
margin:0 auto;
padding:18px 12px 26px;
}
.footer-brand{
font-weight:800;
letter-spacing:.02em;
margin:0 0 10px;
font-size:clamp(14px,2.6vw,16px);
color:#e7eef6;
text-decoration:none;
display:inline-block;
}
.footer-nav{
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin:8px 0 0;
padding:0;
list-style:none;
}
.footer-nav a{
color:#e7eef6;
text-decoration:none;
border:1px solid rgba(255,255,255,.18);
padding:8px 12px;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.05));
}
.footer-nav a:hover{ filter:brightness(1.08); }
.copyright{
margin-top:14px;
font-size:12px;
color:#b9c7d6;
}
.copyright a{
color:#b9c7d6;
text-decoration: none;
}
/* ===== Responsive tweaks ===== */
@media (max-width: 560px){
.content{ padding:16px; }
.content img{ margin:12px auto; }
.footer-nav{
flex-direction:column;
align-items:flex-start;
}
.footer-nav a{ width:100%; text-align:center; }
.table-scroll > table{ min-width:520px; }
}