:root {
  --primary-color: #1a5fa0;      /* 青（空・海） */
  --secondary-color: #2a7a52;    /* 緑（草・黒板） */
  --accent-color: #8b5234;       /* 茶（木・筆） */
  --accent-light: #c4834f;       /* 明るい茶 */
  --text-primary: #1e1a14;
  --text-secondary: #4a3c2e;
  --bg-primary: #f2f7f4;         /* 淡いミント */
  --bg-secondary: #e8f0f8;       /* 淡い水色 */
  --border-light: rgba(26,95,160,0.20);
  --shadow-medium: 0 12px 34px rgba(0,0,0,0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.manabimikke-theme {
  font-family: 'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(42,122,82,0.18), transparent 58%),
    radial-gradient(800px 550px at 90% 15%, rgba(26,95,160,0.18), transparent 60%),
    linear-gradient(to bottom, var(--bg-primary) 0%, #edf4ef 40%, var(--bg-secondary) 100%);
  color: var(--text-primary);
  padding: 20px;
}

/* ===== コンテナ ===== */

.container {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

/* ===== ヘッダー ===== */

.header {
  position: relative;
  background:
    radial-gradient(700px 360px at 25% 30%, rgba(139,82,52,0.18), transparent 58%),
    linear-gradient(135deg, rgba(26,95,160,0.96) 0%, rgba(42,122,82,0.94) 100%);
  color: #ffffff;
  padding: 60px 40px;
  text-align: center;
}

/* 罫線のような装飾ライン */
.header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent-color) 0px,
    var(--accent-color) 30px,
    transparent 30px,
    transparent 36px
  );
  opacity: 0.55;
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 70%, rgba(255,255,255,0.09) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 35%, rgba(255,255,255,0.07) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.07) 0 2px, transparent 3px);
  opacity: 0.9;
}

.header-badge {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(0,0,0,0.14);
  margin-bottom: 18px;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.app-title {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  letter-spacing: 0.10em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.app-subtitle {
  margin-top: 18px;
  font-size: 1rem;
  letter-spacing: 0.22em;
  opacity: 0.90;
}

.policy-title {
  margin-top: 16px;
  font-family: 'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  opacity: 0.88;
  border: 1px solid rgba(255,255,255,0.35);
  display: inline-block;
  padding: 6px 20px;
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}

/* ===== コンテンツ ===== */

.content {
  padding: 50px;
}

.section {
  margin-bottom: 50px;
}

/* 見出し */

.section-title {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  font-size: 1.6rem;
  margin-bottom: 25px;
  padding-left: 18px;
  border-left: 5px solid var(--primary-color);
  color: var(--secondary-color);
}

/* ===== プライバシーポリシー セクション本文 ===== */

.section-content {
  padding: 20px 24px;
  background: rgba(242,247,244,0.70);
  border-radius: 10px;
  border-left: 3px solid var(--secondary-color);
}

.section-content p {
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.section-content p:last-child {
  margin-bottom: 0;
}

.section-content ul {
  padding-left: 22px;
  color: var(--text-secondary);
  line-height: 2.0;
}

/* ===== アプリ説明ブロック ===== */

.app-info {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.97), rgba(242,247,244,0.97));
  padding: 35px;
  border-radius: 14px;
  border: 1px solid rgba(42,122,82,0.20);
  border-top: 3px solid var(--secondary-color);
}

.app-info p {
  line-height: 2.0;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.description-content h4 {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  color: var(--accent-color);
  margin-top: 28px;
  margin-bottom: 10px;
  padding-left: 14px;
  border-left: 3px solid rgba(42,122,82,0.55);
}

.description-content p {
  margin-bottom: 0;
}

/* ===== 特徴リスト ===== */

.features-list {
  list-style: none;
  margin-top: 25px;
}

.features-list li {
  position: relative;
  padding-left: 42px;
  margin: 12px 0;
  color: var(--text-secondary);
  line-height: 1.75;
}

.features-list li::before {
  content: "✏️";
  position: absolute;
  left: 0;
  top: 0;
}

/* ===== キーワード ===== */

.keyword-box {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid rgba(26,95,160,0.20);
  background:
    linear-gradient(to bottom, rgba(232,240,248,0.70), rgba(242,247,244,0.80));
}

.keyword-box h3 {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.keywords {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ===== 運営情報・問い合わせ ===== */

.company-info,
.contact-info {
  background:
    linear-gradient(to bottom, rgba(248,252,250,0.98), rgba(232,240,248,0.90));
  padding: 35px;
  border-radius: 14px;
  border: 1px solid rgba(26,95,160,0.18);
  border-top: 3px solid var(--primary-color);
}

.company-info h3,
.contact-info h3 {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  color: var(--secondary-color);
  margin-bottom: 18px;
}

.company-details p {
  line-height: 2.0;
  color: var(--text-secondary);
}

/* ===== 利用規約 ===== */

.terms-article {
  margin-bottom: 32px;
  padding: 28px 30px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.97), rgba(242,247,244,0.90));
  border-radius: 12px;
  border: 1px solid rgba(42,122,82,0.18);
  border-left: 4px solid var(--secondary-color);
}

.terms-article:last-of-type {
  margin-bottom: 0;
}

.terms-article-title {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(42,122,82,0.20);
  letter-spacing: 0.05em;
}

.terms-body {
  color: var(--text-secondary);
  line-height: 1.95;
}

.terms-lead {
  margin-bottom: 12px;
}

.terms-ol {
  padding-left: 22px;
  margin: 0;
}

.terms-ol > li {
  margin-bottom: 10px;
  padding-left: 6px;
}

.terms-ol > li:last-child {
  margin-bottom: 0;
}

.terms-ul {
  padding-left: 20px;
  margin: 0;
  list-style: none;
}

.terms-ul > li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.85;
}

.terms-ul > li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--accent-light);
  font-weight: 700;
}

.terms-ul > li:last-child {
  margin-bottom: 0;
}

.terms-ul--nested {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 2px solid rgba(42,122,82,0.22);
}

/* FAQ */

.terms-faq {
  margin-top: 36px;
  padding: 28px 30px;
  background: linear-gradient(to bottom, rgba(232,240,248,0.70), rgba(242,247,244,0.80));
  border-radius: 12px;
  border: 1px solid rgba(26,95,160,0.18);
  border-left: 4px solid var(--primary-color);
}

.terms-faq-title {
  font-family: 'Shippori Mincho','Yu Mincho',serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(26,95,160,0.18);
  letter-spacing: 0.05em;
}

.faq-item {
  color: var(--text-secondary);
  line-height: 1.95;
}

.faq-q {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.faq-a p {
  margin-bottom: 10px;
}

.faq-a p:last-child {
  margin-bottom: 0;
}

.faq-note {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  padding: 10px 14px;
  background: rgba(255,255,255,0.65);
  border-radius: 8px;
  border-left: 3px solid var(--accent-light);
}

@media (max-width: 768px) {
  .terms-article,
  .terms-faq {
    padding: 20px 18px;
  }
}

/* ===== 日付 ===== */

.date-info {
  margin-top: 40px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ===== フェードイン ===== */

.fade-in {
  animation: fadeIn 0.6s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== モバイル対応 ===== */

@media (max-width: 768px) {
  .content {
    padding: 28px 22px;
  }

  .header {
    padding: 45px 22px;
  }

  .app-title {
    letter-spacing: 0.06em;
  }

  .app-info {
    padding: 24px 20px;
  }

  .company-info,
  .contact-info {
    padding: 24px 20px;
  }
}