/* Minimal, clean, responsive support site styles */
:root{
  --bg:#f5f5f7; --fg:#111; --muted:#6e6e73; --card:#fff; --line:#e5e5ea;
  --accent:#2f73ff; --accent-2:#7fb3ff; --radius:16px; --radius-sm:12px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0b0d; --fg:#f3f3f4; --muted:#9ea0a6; --card:#151518; --line:#27272c;
         --accent:#4c8dff; --accent-2:#8db7ff; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.container{max-width:920px; margin:40px auto; padding:0 16px}
.header{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff; border-radius:var(--radius); padding:28px 24px; box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.header h1{margin:.1em 0 .2em 0; font-size:28px; letter-spacing:.2px}
.header p{margin:0; opacity:.95}
.nav{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  background:#fff; color:#111; text-decoration:none; font-weight:600; box-shadow:0 4px 14px rgba(0,0,0,.15)
}
.btn:hover{transform:translateY(-1px)}
.section{margin-top:28px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }
.app{
  display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:inherit
}
.app .icon{
  width:56px; height:56px;
  min-width:56px; min-height:56px;
  max-width:56px; max-height:56px;   /* 物理サイズ固定 */

  border-radius:14px; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:grid; place-items:center; overflow:hidden;

  /* flex 親のとき縮ませない */
  flex: 0 0 56px;       /* = flex-grow:0; flex-shrink:0; flex-basis:56px; */
  /* grid 親の自動伸長を抑える（必要に応じて） */
  justify-self:start;
  align-self:start;
  /* 余計なスケーリングを防ぐ（フォント依存の収縮回避） */
  box-sizing:content-box;
}

.app .icon img,
.app .icon svg{
  width:100%; height:100%;
  object-fit:cover;   /* はみ出しはトリミング */
  display:block;      /* 画像の余白消し */
}-shadow:0 2px 10px rgba(0,0,0,.12); overflow:hidden
}
.app .meta h3{margin:0 0 4px 0; font-size:18px}
.app .meta p{margin:0; color:var(--muted); font-size:14px}
.footer{color:var(--muted); font-size:13px; margin-top:20px; text-align:center}
hr{border:none; border-top:1px solid var(--line); margin:18px 0}
.tag{display:inline-block; font-size:12px; color:#fff; background:var(--accent); padding:2px 8px; border-radius:999px}
a{color:var(--accent)} a:hover{text-decoration:none}