/* ===================== 共通スタイル ===================== */
:root {
  --accent      : #B0906B;
  --main-bg     : #FAF9F8;
  --accent-dark : #5A4631;
  --text-main   : #3B2E1F;
}

/* --- 基本構造 --- */
body {
  background  : #FFFFFF;
  color       : var(--text-main);
  font-family : "Noto Sans JP", sans-serif;
  line-height : 1.8;
  margin      : 0;
}

/* ===================== HERO ===================== */
.hero {
  background : linear-gradient(135deg, #EDE7E1 0%, #FAF9F8 100%);
  padding    : 120px 20px;
  text-align : center;
}

.hero h1 {
  font-size     : 2rem;
  font-weight   : 700;
  margin-bottom : 12px;
}

.hero p {
  font-size     : 1.1rem;
  margin-bottom : 24px;
}

/* ===================== ボタン ===================== */
.btn {
  border-radius   : 24px;
  display         : inline-block;
  font-weight     : 700;
  padding         : 10px 28px;
  text-decoration : none;
  transition      : all 0.3s ease;
}

.btn.primary {
  background : var(--text-main);
  color      : #FFFFFF;
}

.btn.primary:hover {
  background : var(--accent);
}

.btn.secondary {
  border : 2px solid var(--text-main);
  color  : var(--text-main);
}

.btn.secondary:hover {
  background : var(--text-main);
  color      : #FFFFFF;
}

.btn.large {
  border-radius : 40px;
  font-size     : 1.1rem;
  padding       : 16px 48px;
}

/* ===================== 共通セクション ===================== */
section {
  margin    : 80px auto;
  max-width : 960px;
  padding   : 0 20px;
}

h2 {
  border-bottom : 2px solid var(--text-main);
  display       : inline-block;
  font-size     : 1.6rem;
  margin-bottom : 40px;
}

/* ===================== 機能・メリット ===================== */
.feature-grid,
.merit-grid,
.risk-grid {
  display               : grid;
  gap                   : 24px;
  grid-template-columns : repeat(auto-fit, minmax(260px, 1fr));
}

.feature-item,
.merit-item,
.risk-item {
  background    : #FFFFFF;
  border        : 1px solid #E6E1DB;
  border-radius : 12px;
  box-shadow    : 0 2px 6px rgba(0, 0, 0, 0.05);
  padding       : 24px;
  transition    : transform 0.3s ease;
}

.feature-item:hover {
  transform : translateY(-4px);
}

/* ===================== ドキュメント説明 ===================== */
.document-section {
  margin    : 80px auto;
  max-width : 900px;
  padding   : 0 20px;
}

.document-section.gray {
  background    : var(--main-bg);
  border-bottom : 1px solid #E6E1DB;
  border-top    : 1px solid #E6E1DB;
  padding       : 60px 20px;
}

.document-section h2 {
  border-left   : 4px solid var(--text-main);
  font-size     : 1.5rem;
  margin-bottom : 24px;
  padding-left  : 12px;
}

.reason-list li,
.merit-list li {
  margin-bottom : 16px;
}

/* ===================== 記事（ブログ） ===================== */
.article-container {
  background    : #FFFFFF;
  border-radius : 12px;
  box-shadow    : 0 3px 10px rgba(0, 0, 0, 0.05);
  line-height   : 1.9;
  margin        : 0 auto;
  max-width     : 800px;
  padding       : 50px 30px;
}

.article-container h2 {
  border-left   : 4px solid var(--accent);
  color         : #2A1F13;
  font-size     : 1.3rem;
  margin-bottom : 16px;
  margin-top    : 40px;
  padding-left  : 12px;
}

blockquote {
  background  : #FAF7F3;
  border-left : 5px solid var(--accent);
  color       : var(--accent-dark);
  font-style  : italic;
  margin      : 40px 0;
  padding     : 20px;
}

.cta {
  border-top  : 1px solid #E6E1DB;
  margin-top  : 60px;
  padding-top : 40px;
  text-align  : center;
}

.cta p {
  font-size     : 1.1rem;
  margin-bottom : 16px;
}

.btn.primary.large {
  background : var(--text-main);
  color      : #FFFFFF;
  transition : background .3s;
}

.btn.primary.large:hover {
  background : var(--accent-dark);
}

/* ===================== CTA セクション ===================== */
.cta-area {
  background : linear-gradient(135deg, var(--text-main), var(--accent-dark));
  color      : #FFFFFF;
  padding    : 80px 20px;
  text-align : center;
}

.cta-area h2 {
  font-size     : 1.6rem;
  margin-bottom : 12px;
}

.cta-area p {
  font-size     : 1.1rem;
  margin-bottom : 32px;
}

.cta-area .btn.primary {
  background : #FFFFFF;
  color      : var(--text-main);
}

.cta-area .btn.primary:hover {
  background : #D8C9B9;
}

/* ===================== 料金プラン ===================== */
.price-section {
  background : var(--main-bg);
  padding    : 80px 20px;
  text-align : center;
}

.price-section h2 {
  color         : var(--text-main);
  font-family   : "Playfair Display", serif;
  font-size     : 2rem;
  margin-bottom : 16px;
}

.price-grid {
  display               : grid;
  gap                   : 30px;
  grid-template-columns : repeat(auto-fit, minmax(280px, 1fr));
  justify-content       : center;
  margin                : 0 auto;
  max-width             : 900px;
}

@media (min-width : 768px) {
  .price-grid {
    grid-template-columns : repeat(2, 1fr);
  }
}

.price-card {
  background    : #FFFFFF;
  border        : 1px solid #E6E1DB;
  border-radius : 14px;
  box-shadow    : 0 4px 10px rgba(0, 0, 0, 0.04);
  padding       : 32px 24px;
  transition    : transform .2s, box-shadow .2s;
}

.price-card:hover {
  box-shadow : 0 10px 24px rgba(0, 0, 0, 0.08);
  transform  : translateY(-4px);
}

.price-card h3 {
  color         : var(--text-main);
  font-size     : 1.25rem;
  margin-bottom : 8px;
}

.price {
  color         : var(--accent-dark);
  font-size     : 1.6rem;
  font-weight   : 700;
  margin-bottom : 12px;
}

.price span {
  color     : #7A6C5D;
  display   : block;
  font-size : 0.9rem;
}

.price-card ul {
  color       : var(--accent-dark);
  line-height : 1.8;
  list-style  : none;
  margin      : 20px 0 0;
  padding     : 0;
}

.price-card.highlight {
  background : #FFF9F2;
  border     : 2px solid var(--accent);
  box-shadow : 0 8px 24px rgba(176, 144, 107, 0.1);
}

.price-card.highlight h3 {
  color : var(--accent);
}

.price-card.highlight .price {
  color : #A07C56;
}

/* ===================== レスポンシブ ===================== */
@media (max-width : 480px) {
  .hero {
    padding : 80px 16px;
  }

  h2 {
    font-size : 1.4rem;
  }

  .price-grid {
    grid-template-columns : 1fr;
  }

  .article-container {
    padding : 30px 20px;
  }
}

.blog-section {
  color       : var(--color-text, #3B2E1F);
  line-height : 1.9;
  margin      : 80px auto;
  max-width   : 820px;
  padding     : 0 20px;
}

.blog-section h2 {
  color         : var(--color-accent-dark, #5A4631);
  font-family   : "Playfair Display", serif;
  font-size     : 1.9rem;
  margin-bottom : 40px;
  text-align    : center;
}

.blog-section h3 {
  color         : var(--color-accent-dark, #5A4631);
  font-size     : 1.2rem;
  margin-bottom : 10px;
  margin-top    : 40px;
}

.blog-section p {
  color         : var(--color-text, #3B2E1F);
  margin-bottom : 18px;
}

.blog-section strong {
  color : var(--color-accent, #B0906B);
}

.cta-blog {
  background    : #FAF8F6;
  border        : 1px solid #E8E2DA;
  border-radius : 16px;
  margin-top    : 60px;
  padding       : 40px 20px;
  text-align    : center;
}

.cta-blog p {
  color         : var(--color-muted, #6B5A46);
  font-size     : 1.1rem;
  margin-bottom : 20px;
}