:root{
  --bg:#FFFFFF;
  --ink:#1C1C1C;
  --muted:#6B6B6B;
  --line:#E6E6E6;
  --accent:#0ABAB5;
  --accent-strong:#00807C;
  --accent-strong-hover:#006B68;
  --btn-border:#BDBDBD;
  --measure:34em;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;position:relative;min-height:100vh;
  background:var(--bg);color:var(--ink);
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  font-size:16px;line-height:1.9;overflow-x:hidden;
}
/* 校正線:ページ左端のアクセントの縦線 */
body::before{
  content:"";position:absolute;top:0;bottom:0;
  left:clamp(32px,9vw,120px);width:1px;background:var(--accent);
}
img{max-width:100%;height:auto}

a{color:var(--ink);text-decoration:underline;text-decoration-color:#BDBDBD;text-underline-offset:5px;text-decoration-thickness:1px}
a:hover{color:var(--accent-strong);text-decoration-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--bg);color:var(--ink);padding:8px 16px;border:1px solid var(--accent-strong)}
.skip-link:focus{left:8px}

.wrap{max-width:960px;margin-right:auto;padding:0 48px 0 clamp(72px,14vw,184px)}

/* ヘッダー */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:36px 0 0}
.site-logo{display:inline-flex;line-height:0}
.site-logo img{height:40px;width:auto;display:block}
.site-nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px}
.site-nav a{text-decoration:none;padding:8px 0}
.site-nav a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}

/* 見出し・本文 */
h1,h2,h3{font-weight:700;margin:0}
h1{font-size:clamp(30px,4.6vw,48px);line-height:1.45;letter-spacing:.02em}
h2{font-size:20px;line-height:1.5}
h3{font-size:17px;line-height:1.6}
p{margin:0}
.lead{margin-top:32px;max-width:var(--measure)}
.muted{color:var(--muted)}
.small{font-size:14px}

.hero{padding:120px 0 104px}
.section{padding:0 0 104px}
.section>h2{margin-bottom:8px}
.section-lead{max-width:var(--measure);margin:0 0 24px}
.page-head{padding:96px 0 56px}
.page-head p{margin-top:24px;max-width:var(--measure)}

/* ボタン */
.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px}
.hero .btn-row{margin-top:40px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;border-radius:6px;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;
  text-decoration:none;cursor:pointer;
  background:var(--accent-strong);color:#FFFFFF;border:1px solid var(--accent-strong);
}
.btn:hover{background:var(--accent-strong-hover);border-color:var(--accent-strong-hover);color:#FFFFFF}
.btn-sub{background:#FFFFFF;color:var(--ink);border-color:var(--btn-border)}
.btn-sub:hover{background:#FFFFFF;color:var(--accent-strong);border-color:var(--accent-strong)}
.btn-off,.btn:disabled{background:#F5F5F5;color:var(--muted);border-color:var(--line);cursor:default}
.btn-off:hover,.btn:disabled:hover{background:#F5F5F5;color:var(--muted);border-color:var(--line)}

/* アプリ一覧 */
.rows{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.app-row{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:32px;padding:40px 0;border-bottom:1px solid var(--line)}
.app-icon{width:96px;height:96px;border-radius:22px;border:1px solid var(--line);object-fit:cover;display:block}
.app-name{font-size:22px;font-weight:700;line-height:1.5}
.app-status{margin-top:2px;font-size:14px;font-weight:500;color:var(--accent-strong)}
.app-desc{margin-top:12px;max-width:var(--measure)}
.app-row .btn-row{margin-top:24px}

.btn-row{align-items:center}
.gplay-link{display:inline-flex;line-height:0}
.gplay-link img{height:64px;width:auto;display:block}

/* ブログ一覧 */
.post-row{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:32px;padding:20px 0;border-bottom:1px solid var(--line)}
.post-date{font-size:14px;color:var(--muted)}

/* 定義リスト */
.facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 32px;font-size:15px;margin:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0}

/* フッター */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:32px 0 56px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-footer ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent-strong)}

/* パンくず */
.breadcrumb{padding:48px 0 0;font-size:14px;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0;padding:0}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:#BDBDBD}
.breadcrumb a{color:var(--muted)}

/* 記事 */
.article-head{padding:32px 0 40px}
.article-meta{margin-top:16px;font-size:14px;color:var(--muted)}
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1.4em}
.prose h2{margin-top:2.6em;padding-top:.8em;border-top:1px solid var(--line)}
.prose h3{margin-top:2em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose blockquote{margin-left:0;padding:0 0 0 20px;border-left:2px solid var(--accent);color:var(--muted)}
.prose pre{overflow-x:auto;padding:16px 20px;background:#F7F7F7;border:1px solid var(--line);border-radius:6px;font-size:14px;line-height:1.7}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.prose :not(pre)>code{padding:2px 6px;background:#F7F7F7;border-radius:4px}
.table-scroll{overflow-x:auto}
.prose table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:700;border-bottom:2px solid var(--ink)}
.prose figure{margin-left:0;margin-right:0}
.prose figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.article-foot{padding:56px 0 104px}

/* フォーム */
.form{max-width:var(--measure);display:grid;gap:24px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.field .req{color:var(--accent-strong);font-weight:500;font-size:13px;margin-left:6px}
.field .opt{color:var(--muted);font-weight:400;font-size:13px;margin-left:6px}
.field input,.field textarea{width:100%;padding:12px 14px;font:inherit;color:var(--ink);background:#FFFFFF;border:1px solid var(--btn-border);border-radius:6px}
.field textarea{min-height:180px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--muted)}

/* プライバシーポリシー */
.policy h2{margin-top:2.4em;padding-top:.8em;border-top:1px solid var(--line)}
.policy h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.policy p,.policy ul{margin-top:.9em;max-width:var(--measure)}
.policy ul{padding-left:1.4em}

@media (max-width:760px){
  body::before{display:none}
  .wrap{padding-left:24px;padding-right:24px}
  .hero{padding:72px 0 72px}
  .section{padding-bottom:72px}
  .page-head{padding:56px 0 40px}
  .app-row{grid-template-columns:64px minmax(0,1fr);column-gap:20px}
  .app-icon{width:64px;height:64px;border-radius:14px}
  .post-row{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .facts{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .facts dd{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}