/* ===================================
   タイポグラフィー改善CSS
   文字の配置、余白、サイズ、改行の最適化
   =================================== */

/* ===================================
   基本的な文字設定の改善
   =================================== */
body {
  /* 文字間隔の調整 */
  letter-spacing: 0.03em;
  /* 単語間の自動改行を改善 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* 日本語の禁則処理 */
  word-break: keep-all;
  line-break: strict;
}

/* 日本語テキストの最適化 */
p, li, td, dd {
  /* 行間を読みやすく */
  line-height: 1.8;
  /* 段落間の余白 */
  margin-bottom: 1.2em;
}

/* ===================================
   見出しの改善
   =================================== */
h1, h2, h3, h4, h5, h6 {
  /* 見出しの行間を調整 */
  line-height: 1.4;
  /* 見出し前後の余白を統一 */
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  /* 文字の詰まりを解消 */
  letter-spacing: 0.05em;
  /* フォントウェイトを統一 */
  font-weight: 700;
}

/* セクションタイトルの調整 */
.section-title,
h2.text-center {
  margin-top: 0;
  margin-bottom: 2rem;
  padding: 1rem 0;
  line-height: 1.5;
}

/* カードタイトルの調整 */
.card-title {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.card-text {
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* ===================================
   ヒーローセクションの文字調整
   =================================== */
.hero .card-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.3;
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}

.hero .card-text {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ヒーローサブタイトルの改行制御 */
.hero-subtitle {
  display: block;
  margin-bottom: 0.3rem;
}

@media (min-width: 768px) {
  .hero-subtitle {
    display: inline;
    margin-right: 0.5rem;
  }
  .hero-subtitle:last-child {
    margin-right: 0;
  }
}

/* ===================================
   統計情報の文字配置
   =================================== */
.hero-stats {
  padding: 1.5rem 0;
}

.stat-item {
  padding: 1rem;
}

.stat-number {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.stat-label {
  display: block;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  line-height: 1.4;
  opacity: 0.9;
}

/* ===================================
   フォーム要素の文字調整
   =================================== */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.form-control {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
}

select.form-control {
  padding-right: 2.5rem;
}

/* ===================================
   リストの改善
   =================================== */
ul, ol {
  padding-left: 1.5em;
  margin-bottom: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* 入れ子リストの調整 */
li ul, li ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ===================================
   ボタンの文字調整
   =================================== */
.btn {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding: 0.875rem 1.75rem;
  white-space: nowrap;
}

.btn-large {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  padding: 1rem 2rem;
}

.btn-block {
  white-space: normal;
}

/* ===================================
   事務所カードの文字調整
   =================================== */
.office-card {
  padding: 1.5rem;
}

.office-name {
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  line-height: 1.4;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.office-description {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.office-features {
  margin: 1.5rem 0;
}

.feature-list {
  padding-left: 1.2em;
}

.feature-list li {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

/* ===================================
   債務整理タイプカードの調整
   =================================== */
.type-card {
  padding: 1.5rem;
}

.type-card .card-header {
  margin-bottom: 1.2rem;
}

.type-card ul {
  margin-top: 1rem;
  padding-left: 1.2em;
}

.type-card li {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.6rem;
}

/* ===================================
   FAQセクションの文字調整
   =================================== */
.faq-question {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.5;
  padding: 1.2rem;
  letter-spacing: 0.02em;
}

.faq-answer {
  font-size: 0.95rem;
  line-height: 1.8;
  padding: 1.2rem;
}

.faq-answer p {
  margin-bottom: 1rem;
}

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

/* ===================================
   テーブルの文字調整
   =================================== */
.comparison-table th,
.comparison-table td {
  padding: 1rem;
  line-height: 1.6;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

.comparison-table th {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===================================
   フッターの文字調整
   =================================== */
.footer {
  line-height: 1.6;
}

.footer-section h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}

.footer-links {
  font-size: 0.9rem;
  line-height: 2;
}

.footer-links a {
  display: block;
  padding: 0.2rem 0;
}

.footer-bottom {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 1.5rem;
  text-align: center;
}

/* ===================================
   モバイル用の調整
   =================================== */
@media (max-width: 767px) {
  /* 基本の文字サイズを少し小さく */
  body {
    font-size: 15px;
  }
  
  /* 見出しのマージンを減らす */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
  
  /* カード内の余白を調整 */
  .card {
    padding: 1.25rem;
  }
  
  /* リストの左余白を減らす */
  ul, ol {
    padding-left: 1.2em;
  }
  
  /* ボタンのパディングを調整 */
  .btn {
    padding: 0.75rem 1.5rem;
  }
  
  /* 段落の下余白を減らす */
  p {
    margin-bottom: 1em;
  }
}

/* ===================================
   タブレット用の調整
   =================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 16px;
  }
  
  .card {
    padding: 1.75rem;
  }
  
  .hero .card-title {
    font-size: 2.2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
}

/* ===================================
   デスクトップ用の調整
   =================================== */
@media (min-width: 1024px) {
  /* 見出しサイズの固定 */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.1rem; }
  h6 { font-size: 1rem; }
  
  /* カード内容の余白を増やす */
  .card {
    padding: 2rem;
  }
  
  .card-header {
    margin-bottom: 1.5rem;
  }
  
  /* セクション間の余白 */
  section {
    padding: 4rem 0;
  }
  
  /* リストアイテムの余白 */
  li {
    margin-bottom: 0.75rem;
  }
}

/* ===================================
   日本語特有の調整
   =================================== */
/* 句読点の後のスペース調整 */
p:lang(ja),
li:lang(ja) {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* 英数字と日本語の間隔 */
.mixed-text {
  font-feature-settings: "palt" 1;
}

/* ===================================
   アクセシビリティ向上
   =================================== */
/* フォーカス時の視認性向上 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* リンクの下線を見やすく */
a:not(.btn):not(.nav-link) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:not(.btn):not(.nav-link):hover {
  text-decoration-thickness: 2px;
}