/* ===================================
   モバイルテキスト最適化CSS
   改行の改善とスクロール位置の修正
   =================================== */

/* ===================================
   PC表示でのヒーローテキスト
   =================================== */
@media (min-width: 768px) {
  .hero-line-1,
  .hero-line-2 {
    display: inline !important;
  }
  
  .hero-line-1::after {
    content: " ";
  }
  
  /* アラートテキストはPC表示では通常表示 */
  .alert-break {
    display: inline !important;
  }
  
  .alert-title-mobile {
    white-space: normal !important;
    font-size: inherit !important;
  }
  
  .merit-text {
    white-space: normal !important;
  }
}

/* ===================================
   スクロール位置の修正
   =================================== */
html {
  scroll-behavior: smooth;
  /* ヘッダーの高さ分のオフセット */
  scroll-padding-top: 80px;
}

/* セクションごとのスクロールマージン */
section[id] {
  scroll-margin-top: 80px !important;
}

/* 個別セクションの調整 */
#diagnosis {
  scroll-margin-top: 90px !important;
}

#types {
  scroll-margin-top: 90px !important;
}

#offices {
  scroll-margin-top: 90px !important;
}

#faq {
  scroll-margin-top: 90px !important;
}

/* ===================================
   改行の最適化（孤立文字対策）
   =================================== */

/* 見出しの改行制御 */
h1, h2, h3, h4 {
  /* 最小文字数を設定して短い改行を防ぐ */
  text-wrap: balance;
  /* Safariなどのフォールバック */
  word-break: auto-phrase;
  line-break: strict;
}

/* 段落の改行最適化 */
p, li, td {
  /* 日本語の改行を最適化 */
  word-break: auto-phrase;
  line-break: strict;
  hanging-punctuation: allow-end;
}

/* ===================================
   緊急アラートの改行制御
   =================================== */
@media (max-width: 767px) {
  /* アラートタイトルを1行に収める */
  .alert-title-mobile {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }
  
  /* アラートテキストの改行制御 */
  .alert-text-mobile {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
    line-height: 1.5 !important;
  }
  
  .alert-break {
    display: block !important;
    margin-top: 0.2rem !important;
  }
  
  /* メリットテキストの改行防止 */
  .merit-item {
    font-size: clamp(0.8rem, 2.8vw, 0.9rem) !important;
  }
  
  .merit-text {
    white-space: nowrap !important;
    display: inline-block !important;
  }
}

/* 375px以下でさらに小さく */
@media (max-width: 375px) {
  .alert-title-mobile {
    font-size: 0.85rem !important;
  }
  
  .alert-text-mobile {
    font-size: 0.8rem !important;
  }
  
  .merit-item {
    font-size: 0.75rem !important;
  }
}

/* 320px以下（極小画面）対応 */
@media (max-width: 320px) {
  .alert-title-mobile {
    font-size: 0.75rem !important;
  }
  
  .alert-text-mobile {
    font-size: 0.7rem !important;
  }
  
  .merit-item {
    font-size: 0.7rem !important;
  }
}

/* ===================================
   モバイル用テキストサイズ調整
   =================================== */
@media (max-width: 767px) {
  /* ヒーローセクション */
  .hero .card-title {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    line-height: 1.3;
    /* 短い改行を防ぐ */
    display: block;
    width: 100%;
  }
  
  /* ヒーローテキストの完璧な中央寄せ */
  .hero-text-mobile {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .hero-line-1,
  .hero-line-2 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
  }
  
  .hero-line-1 {
    margin-bottom: 0.3rem !important;
  }
  
  /* 統計情報 */
  .stat-number {
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
  }
  
  .stat-label {
    font-size: clamp(0.75rem, 2.5vw, 0.85rem) !important;
    white-space: nowrap;
  }
  
  /* カードタイトル */
  .card-title {
    font-size: clamp(1.1rem, 4vw, 1.3rem) !important;
    line-height: 1.3;
  }
  
  .card-text {
    font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
    line-height: 1.5;
  }
  
  /* 事務所カード */
  .office-name {
    font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .office-description {
    font-size: clamp(0.8rem, 2.8vw, 0.9rem) !important;
    line-height: 1.5;
  }
  
  .feature-list li {
    font-size: clamp(0.75rem, 2.5vw, 0.85rem) !important;
    line-height: 1.4;
  }
  
  /* ボタン */
  .btn {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
    white-space: nowrap;
    padding: 0.7rem 1.2rem;
  }
  
  .btn-large {
    font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important;
    padding: 0.8rem 1.5rem;
  }
  
  /* FAQ */
  .faq-question-text {
    font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
    line-height: 1.4;
    /* 最小幅を確保して短い改行を防ぐ */
    min-width: 0;
    flex: 1 1 auto;
  }
  
  .faq-answer p {
    font-size: clamp(0.75rem, 2.8vw, 0.85rem) !important;
    line-height: 1.5;
  }
  
  /* セクションタイトル */
  h2.text-center {
    font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
    line-height: 1.3;
  }
  
  /* リスト項目 */
  ul li, ol li {
    font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
    line-height: 1.5;
  }
  
  /* フォームラベル */
  .form-label {
    font-size: clamp(0.8rem, 2.8vw, 0.9rem) !important;
  }
  
  .form-control {
    font-size: 16px !important; /* iOS zoom防止 */
  }
}

/* ===================================
   iPhone SE (375px以下) 特別対応
   =================================== */
@media (max-width: 375px) {
  /* より小さいフォントサイズで改行を防ぐ */
  .hero .card-title {
    font-size: 1.25rem !important;
  }
  
  .hero-line-1,
  .hero-line-2 {
    font-size: 0.8rem !important;
  }
  
  .card-title {
    font-size: 1rem !important;
  }
  
  .card-text {
    font-size: 0.75rem !important;
  }
  
  .office-name {
    font-size: 0.95rem !important;
  }
  
  .faq-question-text {
    font-size: 0.75rem !important;
  }
  
  .btn {
    font-size: 0.8rem !important;
    padding: 0.6rem 1rem;
  }
  
  h2.text-center {
    font-size: 1.2rem !important;
  }
}

/* ===================================
   改行制御ユーティリティクラス
   =================================== */
.no-wrap {
  white-space: nowrap !important;
}

.balance-text {
  text-wrap: balance !important;
}

.no-orphan {
  /* 最後の単語/文字が孤立しないように */
  text-wrap: pretty !important;
}

/* ===================================
   横画面対応（landscape）
   =================================== */
@media (max-width: 767px) and (orientation: landscape) {
  /* ヘッダーを小さく */
  .header {
    min-height: 50px !important;
  }
  
  /* スクロールマージンも調整 */
  html {
    scroll-padding-top: 60px;
  }
  
  section[id] {
    scroll-margin-top: 60px !important;
  }
  
  /* パディングを減らす */
  section {
    padding: 1.5rem 0 !important;
  }
  
  .card {
    padding: 1rem !important;
  }
}

/* ===================================
   テキストの視認性向上
   =================================== */
@media (max-width: 767px) {
  /* 太字を少し細く */
  strong, b {
    font-weight: 600;
  }
  
  /* リンクの視認性 */
  a:not(.btn) {
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
  }
  
  /* 選択時のハイライト */
  ::selection {
    background: rgba(0, 82, 204, 0.2);
  }
}

/* ===================================
   スムーススクロールの微調整
   =================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  
  /* スクロール時のイージング調整 */
  * {
    scroll-behavior: inherit;
  }
}

/* ===================================
   日本語特有の改行ルール
   =================================== */
@media (max-width: 767px) {
  /* 句読点の禁則処理 */
  p, li, td {
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: anywhere;
  }
  
  /* タイトルは改行させない */
  .office-name,
  .stat-label,
  .btn {
    word-break: keep-all;
    white-space: nowrap;
  }
  
  /* 長い単語は強制改行 */
  .office-description,
  .faq-answer p {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}