/* トップページ（/・/en/）専用。仕様は docs/top-page.md。
 * 白に近いグレーの地に墨色のカードを置き、強い色は入口の黄色だけにする。 */
:root {
  --bg: #f2f2f0;
  --bg-text: #161614;
  --bg-muted: #55554f;
  --card: #1c1c1a;
  --card-line: #33332f;
  --card-text: #c9c9c1;
  --go: #fff200;
  --go-hover: #ffffff;
  --go-text: #161614;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--bg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI",
    "Segoe UI", sans-serif;
  line-height: 1.7;
  overflow-wrap: break-word;
}
a {
  color: inherit;
}
a:focus-visible {
  outline: 3px solid var(--bg-text);
  outline-offset: 2px;
}
.tile a:focus-visible {
  outline-color: #ffffff;
}
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 24px 48px;
  padding: 56px 0 40px;
}
.top h1 {
  margin: 0;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.top .intro {
  margin: 0;
  max-width: 32em;
  color: var(--bg-muted);
  /* 日本語を文節で折り返す（対応していないブラウザでは通常の折り返し） */
  word-break: auto-phrase;
}
.top .lang {
  margin: 0;
  font-size: 14px;
}
.top .lang a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 6px;
  text-decoration: none;
}
.wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.tile {
  /* カードの内側は 1 つの余白（--pad）でそろえ、サムネイル・文字・帯を同じ線に収める */
  --pad: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  padding: var(--pad);
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px;
}
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }
.thumb {
  position: relative;
}
.shot {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--card-line);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* 中身の違うスクショを 1 つの部品に見せるため、名前はカードと同じ墨色の板に載せてサムネイルの左下に付ける。
 * 膜をかけないので、白っぽいスクショも濁らない */
.name {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 10px 18px 0 0;
  border-top-right-radius: 8px;
  background: var(--card);
  font-size: 22px;
  line-height: 1.25;
  color: #fff;
  pointer-events: none;
  transition: background 0.15s, color 0.15s;
}
/* サムネイルも入口なので、マウスを載せると名前の板が帯と同じ黄色になる */
.thumb:hover .name {
  background: var(--go);
  color: var(--go-text);
}
.tile .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pad);
}
.tile .txt {
  flex: 1;
  padding: 0 4px;
}
.tile .txt p {
  margin: 0;
  font-size: 15px;
  color: var(--card-text);
}
/* 先頭の 1 枚だけ横長にし、左にサムネイル、右に文字と入口を置く */
.feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: calc(var(--pad) * 2);
}
/* 右の欄は説明と入口をひとまとまりにして縦の中央に置き、説明と入口の間を空けない */
.feature .body {
  justify-content: center;
}
.feature .txt {
  flex: none;
}
.feature .name {
  padding: 14px 28px 0 0;
  font-size: 40px;
}
.feature .txt p {
  font-size: 17px;
}
.feature .go {
  flex-direction: column;
}
.go {
  display: flex;
  gap: 8px;
}
.go a {
  flex: 1;
  /* 上の段にプラットフォーム、下の段に行き先。狭いタイルでも長いドメインが割れない */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 16px 12px;
  border-radius: 8px;
  background: var(--go);
  color: var(--go-text);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.go a:hover {
  background: var(--go-hover);
}
.go .p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.go .to {
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.go .arrow {
  grid-column: 2;
  grid-row: 1 / 3;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 48px 0;
  font-size: 14px;
  color: var(--bg-muted);
}
.foot p {
  margin: 0;
}
.foot a {
  display: inline-block;
  padding: 8px 2px;
  color: var(--bg-text);
}
@media (max-width: 760px) {
  .wrap {
    padding: 0 16px;
  }
  .top {
    grid-template-columns: 1fr auto;
    padding: 28px 0;
    gap: 16px;
  }
  .top h1 {
    font-size: 56px;
  }
  .top .intro {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .top .lang {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .wall {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .tile {
    grid-column: auto;
    --pad: 12px;
  }
  .feature {
    display: flex;
  }
  .feature .name {
    padding: 10px 18px 0 0;
    font-size: 26px;
  }
  .feature .txt p {
    font-size: 15px;
  }
  .go {
    flex-direction: column;
  }
}