:root{
  --gutter: 6vw;            /* ページ左右余白 */
  --col-gap: 48px;          /* 中央列との間隔 */
  --row-gap: 80px;          /* 行間の余白 */
  --chip: 96px;             /* 色チップの一辺 */
  --hex-size: 14px;
  --text: #222;
}

html,body{
  margin:0;
  background:#fff;
  color:var(--text);
  font:16px/1.85 "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:6vh var(--gutter);
}

.row{
  display:grid;
  align-items:center;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--col-gap);
  margin: var(--row-gap) 0;
}

.center{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:220px;
}

.chip{
  width:var(--chip);
  height:var(--chip);
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

.hex{
  font-weight:700;
  letter-spacing:.02em;
  font-size:var(--hex-size);
  color:#111;
}

.text{
  font-size:15px;
  line-height:1.8;
}

/* 奇数行は右にテキスト、偶数行は左にテキスト */
.row .left{opacity:0}
.row:nth-child(2n) .right{opacity:0}
.row:nth-child(2n) .left{opacity:1}
.row:nth-child(2n+1) .right{opacity:1}

/* スマホ */
@media (max-width: 820px){
  :root{ --row-gap: 56px; --col-gap: 28px; --chip: 84px; }
  .row{grid-template-columns: 1fr; row-gap: 12px;}
  .row .left,.row .right{opacity:1}
  .center{margin:8px 0}
}