﻿body{margin:0;line-height:1.7;background:#f7f9fb;}
.container{max-width:1150px;margin:auto;padding:1.8rem 1rem;}
:root{
 --main:#8897a5; /* シルバーに合わせた落ち着いたグレー */
 --deep:#5a6872;
 --sub:#eef2f5;
 --line:#cfd6dc;
}
.breadcrumb{font-size:.8rem;margin-bottom:1rem;}
.breadcrumb a{text-decoration:none;color:#555;}
.label{background:var(--main);color:#fff;padding:.25rem .7rem;border-radius:999px;font-size:.78rem;display:inline-block;margin-bottom:.5rem;}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem;background:var(--sub);border-radius:16px;padding:1.8rem;border:1px solid var(--line);} 
.hero h1{font-size:1.8rem;margin:.3rem 0 .5rem;color:#2e3d46;}
.hero p{font-size:.92rem;}
.hero-points{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem;padding:0;}
.hero-points li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;font-size:.78rem;}
.hero img{width:100%;border-radius:12px;border:1px solid var(--line);} 

h2{border-left:4px solid var(--main);padding-left:.6rem;font-size:1.1rem;margin-top:2rem;}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;}
.feature-box{background:#fff;border-radius:12px;border:1px solid var(--line);padding:.9rem;}
.feature-box h3{font-size:.95rem;color:var(--deep);margin-top:0;}

.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.scene-item{background:#fff;border-radius:8px;border:1px dashed var(--main);padding:.6rem;font-size:.88rem;}

.spec-list{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.85rem .9rem;margin-bottom:1rem;font-size:.86rem;list-style:none;}
.spec-list li{margin:.16rem 0;}

.table-wrap{overflow-x:auto;margin-top:.5rem;}
.table{width:100%;border-collapse:collapse;font-size:.85rem;background:#fff;}
.table th,.table td{border:1px solid #ddd;padding:.4rem .5rem;text-align:center;white-space:nowrap;}
.table th{background:#e6ebef;}

.cta{background:var(--main);color:#fff;border-radius:12px;padding:1.1rem;margin-top:2rem;font-size:.95rem;}
.cta b{font-size:1rem;}

@media(max-width:820px){.hero{grid-template-columns:1fr;}}
@media(max-width:720px){.feature-grid{grid-template-columns:1fr;}.scene-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.scene-grid{grid-template-columns:1fr;}}
.kinu-div {
    display: flex;
    text-align: center;
    gap: 10px;
}
