@charset "utf-8";
/* CSS Document */
:root{
--bg:#0e0f12; /* 背景色 */
--text:#f6f7fb; /* 文字色 */
--muted:#b8bcc8; /* 補助文字 */
--brand:#5CE1E6; /* アクセント */
--card:#171a20; /* カード背景 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","YuGothic","Meiryo",sans-serif;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}
.section{padding:56px 0}
.center{text-align:center}


/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(14,15,18,.8);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid #222831}
.bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo{font-weight:800;letter-spacing:.06em}
.nav{display:flex;gap:16px;color:var(--muted)}
.nav a{opacity:.9}


/* hero */
.hero{padding:72px 0}
.badge{display:inline-block;border:1px solid #3a3f4b;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-weight:700}
.title{font-size:clamp(28px,4vw,44px);line-height:1.25;margin:12px 0 8px}
.lead{font-size:clamp(15px,2.2vw,18px);color:var(--muted);margin:0 0 22px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:12px;background:var(--brand);color:#001014;font-weight:700;display:inline-block}
.btn.outline{background:transparent;border:1px solid var(--brand);color:var(--brand)}


/* grid & card */
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
}
.card{background:var(--card);border:1px solid #2a303a;border-radius:16px;padding:18px}
.card h3{margin:8px 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted)}


/* story list */
.story{padding:0;margin:0}
.story li{list-style:none;background:var(--card);border:1px solid #2a303a;border-radius:14px;padding:16px;margin:0 0 12px}


/* spec table */
.spec{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;overflow:hidden}
.spec th,.spec td{padding:14px;border-bottom:1px solid #282d36;text-align:left}
.spec th{width:32%;color:#cdd3df;background:#1a1f27;font-weight:600}
.note{font-size:13px;color:var(--muted);margin-top:8px}


/* cta */
.cta{background:linear-gradient(180deg,#0f1319,#0b1e1b);border-top:1px solid #2a303a}
.footer{font-size:12px;color:#8c94a3;padding:20px 0;border-top:1px dashed #2a303a
	
	/* ========== spec（仕様）エリア：カードと差別化した落ち着いた見た目 ========== */
#spec .muted { margin: 0 0 14px; }

.spec-panel{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
}
.spec-chip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #2a303a;
  background: rgba(255,255,255,.04);
  color: #cfd6e5;
  font-size: 13px;
  letter-spacing: .02em;
}

.spec--sheet{
  width: 100%;
  border-collapse: collapse;
  background: #171a20;            /* カードとは色味を揃えつつもテーブルらしさ */
  border: 1px solid #2a303a;
  border-radius: 14px;
  overflow: hidden;
}
.spec--sheet th,
.spec--sheet td{
  padding: 14px 16px;
  border-bottom: 1px solid #282d36;
  vertical-align: top;
}
.spec--sheet th{
  width: 32%;
  background: #1a1f27;            /* 行見出しの帯色 */
  color: #d7deea;
  font-weight: 600;
  white-space: nowrap;
}
.spec--sheet tr:last-child th,
.spec--sheet tr:last-child td{
  border-bottom: none;
}

/* スマホでの可読性を確保 */
@media (max-width: 720px){
  .spec--sheet th, .spec--sheet td{
    display: block;
    width: 100%;
    border-bottom: none;
    padding: 12px 14px;
  }
  .spec--sheet tr{
    border-bottom: 1px solid #282d36;
  }
  .spec--sheet th{
    border-bottom: 1px dashed #2a303a;
    background: #171a20;          /* モバイルは背景を合わせて読みやすく */
    color: #e9eef8;
  }
}

	/* ========== highlights（おすすめ・こだわり） ========== */
#highlights h2{ margin: 0 0 14px; }
.hi-cards{ display: grid; gap: 18px; }
.hi-card{
  border: 1px solid #2a303a;
  background: #14171d;
  border-radius: 16px;
  padding: 16px;
}
.hi-head h3{ margin: 0 0 6px; font-size: 18px; }
.hi-head .muted{ margin: 0 0 12px; }

.media-tiles{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: auto auto;
  gap: 10px;
  /* PCでは左に大、右に縦2枚（合計3枚）を想定 */
  grid-template-areas:
    "main side1"
    "main side2";
}
.tile{ border-radius: 12px; overflow: hidden; border: 1px solid #2a303a; background:#0f1116; }
.tile img{ width: 100%; height: auto; display: block; }
.tile figcaption{ padding: 8px 10px; font-size: 13px; color: #b8bcc8; }
.tile--main{ grid-area: main; }
.media-tiles .tile:nth-of-type(2){ grid-area: side1; }
.media-tiles .tile:nth-of-type(3){ grid-area: side2; }

/* サブ画像が1枚しかない場合も崩れないように */
.media-tiles:has(.tile:nth-of-type(2)):not(:has(.tile:nth-of-type(3))){
  grid-template-areas:
    "main side1"
    "main side1";
}

/* モバイルは1カラムで縦積み */
@media (max-width: 900px){
  .media-tiles{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "main"
      "side1"
      "side2";
  }
}