/*
 * ヤメドキ・休肝コーチ サポートサイト共通スタイル
 * App_Brand_Guide準拠（ライトテーマ）: フラット・ベタ塗り・均一アウトライン2.5px・
 * グラデーション禁止・影はソリッドオフセットのみ
 */

:root {
  --brand-purple: #9B5DE5;
  --brand-lime: #00D084;
  --brand-plum: #2D2A32;
  --brand-offwhite: #F0F4F8;
  --brand-coral: #FF6B6B;
  --brand-sun: #FFC94B;

  --bg: #F0F4F8;
  --card: #FFFFFF;
  --card-2: #E4EAF2;
  --text: #2D2A32;
  --muted: #6E6879;
  --outline: #2D2A32;

  --radius-card: 20px;
  --radius-pill: 999px;
  --border-bold: 2.5px;
  --offset-shadow: 0 4px 0 var(--brand-plum);

  --font-display: "Hiragino Maru Gothic ProN", ui-rounded, "Hiragino Sans", sans-serif;
  --font-body: "Hiragino Sans", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.9;
  font-size: 16px;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 64px; }

/* ---- ヘッダー ---- */
header.site {
  background: var(--card);
  border-bottom: var(--border-bold) solid var(--outline);
}
header.site .inner {
  max-width: 760px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  color: var(--text); text-decoration: none;
}
.logo .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-purple); border: var(--border-bold) solid var(--outline);
  flex: none;
}
nav.site { margin-left: auto; display: flex; gap: 8px; }
nav.site a {
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--text); text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: var(--border-bold) solid transparent;
}
nav.site a.active, nav.site a:hover {
  border-color: var(--outline); background: var(--card-2);
}

/* ---- ヒーロー ---- */
.hero { padding: 44px 0 8px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.9rem; line-height: 1.4; margin: 0 0 10px;
}
.hero p.lead { color: var(--muted); margin: 0; }

/* ---- カード ---- */
.card {
  background: var(--card);
  border: var(--border-bold) solid var(--outline);
  border-radius: var(--radius-card);
  box-shadow: var(--offset-shadow);
  padding: 22px 24px;
  margin-top: 20px;
}

.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 560px) { .apps { grid-template-columns: 1fr; } }
.app-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: var(--border-bold) solid var(--outline);
  border-radius: var(--radius-card);
  box-shadow: var(--offset-shadow);
  padding: 16px 18px;
  margin-top: 0;
}
.app-card img {
  width: 58px; height: 58px; border-radius: 14px;
  border: var(--border-bold) solid var(--outline);
  flex: none;
}
.app-card .name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  margin: 0;
}
.app-card .desc { font-size: .82rem; color: var(--muted); margin: 2px 0 0; line-height: 1.6; }
.badge {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; padding: 1px 10px; border-radius: var(--radius-pill);
  border: 2px solid var(--outline); color: var(--text); margin-bottom: 4px;
}
.badge.purple { background: var(--brand-purple); color: #fff; }
.badge.lime { background: var(--brand-lime); color: var(--brand-plum); }

/* ---- 問い合わせ ---- */
.contact-card { text-align: center; padding: 30px 24px; }
.contact-card h2 { margin-top: 0; }
.btn-primary {
  display: inline-block;
  background: var(--brand-purple); color: #FFFFFF;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  text-decoration: none;
  border: var(--border-bold) solid var(--outline);
  border-radius: var(--radius-pill);
  box-shadow: var(--offset-shadow);
  padding: 13px 30px;
  margin: 8px 0 4px;
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-plum); }
.contact-note { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }
.contact-mail { font-size: .95rem; margin: 12px 0 0; word-break: break-all; }

/* ---- 見出し ---- */
h2.section {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  margin: 44px 0 4px;
  display: flex; align-items: center; gap: 10px;
}
h2.section::before {
  content: ""; width: 12px; height: 12px; border-radius: 3px;
  background: var(--brand-lime); border: 2px solid var(--outline); flex: none;
}

/* ---- FAQ ---- */
details.faq {
  background: var(--card);
  border: var(--border-bold) solid var(--outline);
  border-radius: 16px;
  box-shadow: var(--offset-shadow);
  margin-top: 14px;
  overflow: hidden;
}
details.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700;
  padding: 15px 46px 15px 18px;
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "＋"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; color: var(--brand-purple);
}
details.faq[open] summary::after { content: "－"; }
details.faq .a {
  padding: 0 18px 16px; color: var(--text);
  border-top: 2px dashed var(--card-2); padding-top: 12px; margin: 0 0 0;
  font-size: .95rem;
}
details.faq .a p { margin: 0 0 8px; }
details.faq .a p:last-child { margin-bottom: 0; }

/* ---- ポリシー本文 ---- */
.policy h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.08rem;
  margin: 2em 0 .4em;
}
.policy h2:first-of-type { margin-top: .6em; }

/* ---- 免責・フッター ---- */
.note {
  background: var(--card-2);
  border: var(--border-bold) solid var(--outline);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: .88rem;
  margin-top: 20px;
}
footer.site {
  margin-top: 56px; padding-top: 20px;
  border-top: var(--border-bold) solid var(--outline);
  font-size: .84rem; color: var(--muted);
}
footer.site nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
footer.site a { color: var(--text); font-weight: 600; }
a { color: var(--brand-purple); }