/* apps.mocchicc.com のページで共通の見た目（アプリ一覧・お問い合わせ・特定商取引法に基づく表記） */
:root {
  color-scheme: light dark;
  --bg:#ffffff; --ink:#151e45; --sub:#5b6178; --line:#e3e5ec; --soft:#f6f7fa; --link:#2b4fb8; --btn:#151e45; --btn-ink:#ffffff; --error:#c0392b;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1430; --ink:#eef0f7; --sub:#a3a8bd; --line:#2a3156; --soft:#161c3e; --link:#8fa8ff; --btn:#eef0f7; --btn-ink:#0f1430; --error:#ff8a7a; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; line-height:1.75; }
main { max-width:760px; margin:0 auto; padding:56px 16px 64px; }
a { color:var(--link); }
header { padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:36px; }
header .back { display:inline-block; font-size:13px; margin-bottom:12px; text-decoration:none; }
h1 { font-size:28px; letter-spacing:.01em; margin:0; }
.lead { color:var(--sub); margin:6px 0 0; font-size:15px; }
h2 { font-size:13px; letter-spacing:.12em; color:var(--sub); font-weight:600; margin:0 0 14px; }
section + section { margin-top:48px; }
p { font-size:15px; }

/* アプリ一覧 */
ul.apps { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.app { display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:start; padding:16px; border:1px solid var(--line); border-radius:16px; }
.app img { width:64px; height:64px; border-radius:14px; border:1px solid var(--line); }
.app h3 { margin:0; font-size:17px; }
.app h3 a { color:inherit; text-decoration:none; }
.app p { margin:2px 0 8px; color:var(--sub); font-size:14px; }
.links { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; }
.links a { text-decoration:none; }
.links a:hover, .app h3 a:hover { text-decoration:underline; }
.tag { font-size:12px; color:var(--sub); border:1px solid var(--line); border-radius:999px; padding:0 8px; margin-left:6px; vertical-align:2px; font-weight:400; }

/* 表（運営者情報・特定商取引法に基づく表記） */
dl { margin:0; display:grid; grid-template-columns:11em 1fr; border-top:1px solid var(--line); }
dt, dd { margin:0; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
dt { color:var(--sub); padding-right:12px; }
.en { background:var(--soft); border-radius:12px; padding:16px; font-size:14px; color:var(--sub); }
.en p { margin:0; font-size:14px; }

/* お問い合わせのフォーム */
.form { display:grid; gap:18px; max-width:560px; }
.form label { display:grid; gap:6px; font-size:14px; font-weight:600; }
.form .hint { font-weight:400; color:var(--sub); font-size:13px; }
.form input, .form select, .form textarea {
  font:inherit; font-size:16px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%;
}
.form textarea { min-height:160px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline:2px solid var(--link); outline-offset:1px; }
.form button {
  font:inherit; font-weight:600; font-size:16px; color:var(--btn-ink); background:var(--btn);
  border:none; border-radius:999px; padding:12px 32px; justify-self:start; cursor:pointer;
}
.form button:active { transform:scale(.97); }
.form button:disabled { opacity:.5; cursor:default; }
.form .status { font-size:15px; font-weight:600; min-height:1.5em; margin:0; }
.form .status.error { color:var(--error); }
.note { color:var(--sub); font-size:13px; margin-top:28px; }
.notice { margin:-6px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--soft); font-size:14px; }
.notice[hidden] { display:none; }

footer { margin-top:56px; padding-top:20px; border-top:1px solid var(--line); color:var(--sub); font-size:13px; display:flex; flex-wrap:wrap; gap:6px 18px; }
footer a { color:var(--sub); }
@media (max-width:480px) { dl { grid-template-columns:1fr; } dt { padding-bottom:0; border-bottom:none; } h1 { font-size:24px; } }