*{
    line-break: strict;
}

#readArea {
  width: 55%;
  margin: 3rem auto;
}

/* 段落とリスト項目のテキストスタイルを調整 */
#readArea p,
#readArea li,
#readArea td { /* 表の中の文字も対象に */
  font-size: 18px;           /* 文字サイズを少し大きく（推奨は16px-18px） */
  letter-spacing: 0.05em;    /* 文字と文字の間隔を少しだけ広げる */
  color: #2c3e50;           /* 純粋な黒(#000)より少し柔らかいダークブルーに変更 */
  line-height: 1.8; 
}

#readArea li {
  padding: 10px 0 0 .5rem; /* マーカー（黒丸）とテキストの間の余白を少し広げる */
  margin: 1rem 0 0 0;   /* 各リスト項目間の縦の余白を少し空ける */
  line-height: 1.6; 
}

/* 見出しの余白を調整して、セクションの区切りを明確に */
#readArea h1 {
  margin-bottom: 3rem;       /* タイトル下の余白を多めに取る */
}

#readArea h1:nth-child(1) {
  font-size: 1.8rem;         /* タイトルのフォントサイズを大きく */
}
#readArea h1:nth-child(1)::before {
    content: ''; /* 擬似要素に必須 */
    display: inline-block;
    margin: 0 0 7px 0;
    width: 8px; /* 線の太さ */
    height: 1em; /* 文字の高さに合わせる */
    background-color: #61ac5d; /* メインカラー */
    margin-right: 8px; /* 線とテキストの間の余白 */
    vertical-align: middle; /* 上下中央揃え */
    transform-origin: center;
}

#readArea h2 {
  margin-top: 4.5rem;        /* 各セクションの開始前に大きな余白を設ける */
  margin-bottom: 2rem;       /* 見出しと本文の間の余白を調整 */
  padding-left: 0;           /* 既存の左のpaddingをリセット */
  border-left: none;         /* 既存の左線をリセット */
  border-bottom: 2px solid #61ac5d; /* 下線スタイルに変更 */
  font-size: 1.6rem;         /* 見出しサイズも調整 */
}

/* リンクのスタイルを、目に優しく、かつ分かりやすいように変更 */
#readArea a {
  color: #2980b9;            /* 少し落ち着いた青色に変更 */
  text-decoration: none;     /* デフォルトの下線を消す */
  border-bottom: 1px dotted #2980b9; /* 代わりに点線の下線を引く */
  transition: all 0.2s ease-in-out;
}

#readArea a:hover {
  color: #c0392b;            /* マウスが乗った時の色を情熱的な赤系に */
  border-bottom: 1px solid #c0392b; /* 下線を実線に変更 */
}

/* 強調文字のスタイル */
#readArea .OKblue {
    color: #1e61d5; /* 強調したい文字は、リンクのホバー色と合わせて統一感を出す */
}

#readArea .NGred {
    color: #c0392b; /* 強調したい文字は、リンクのホバー色と合わせて統一感を出す */
}

#readArea .NGcrimson {
    color: crimson; /* 強調したい文字は、リンクのホバー色と合わせて統一感を出す */
}

/* リスト全体の左側に余白（インデント）を追加 */
#readArea ul, #readArea ol {
  padding-left: 2em; /* emは現在の文字サイズを基準にする単位です。40pxなどに固定してもOKです */
}

/* 表のスタイルも少し調整 */
.terms-summary th {
    font-size: 17px;
    background-color: #f8f9fa; /* 背景色を少し明るく */
}

/* FAQ全体のコンテナ */
.faq-container {
    width: 90%;
    max-width: 800px;
    margin: 30px auto;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 各Q&Aセット */
.faq-item {
    margin-bottom: 3rem;
}

/* 吹き出しの基本スタイル */
.question-bubble, .answer-bubble {
    padding: 15px 20px;
    border-radius: 15px;
    position: relative;
    max-width: 80%;
    line-height: 1.6;
}

.question-bubble p, .answer-bubble p {
    margin: 0;
}

/* 質問の吹き出し（左側） */
.question-bubble {
    background-color: #e0f7fa; /* 明るい水色 */
    color: #00796b;
    margin-right: auto;
}

.question-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-width: 10px 15px 0 0;
    border-style: solid;
    border-color: #e0f7fa transparent transparent transparent;
}


/* 回答の吹き出し（右側） */
.answer-bubble {
    background-color: #f1f1f1; /* 明るいグレー */
    color: #333;
    margin-left: auto;
    margin-top: 10px;
}

.answer-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 20px;
    border-width: 0 15px 10px 0;
    border-style: solid;
    border-color: transparent #f1f1f1 transparent transparent;
}

/* 強調文字の色 */
.ok-blue {
    color: #0056b3;
    font-weight: bold;
}

.ng-red {
    color: #d9534f;
    font-weight: bold;
}

.ng-crimson {
    color: #dc143c;
    font-weight: bold;
}

@media (max-width: 768px) {
  #readArea {
    width: 98%;
  }
  #readArea h2 {
    font-size: 23px;
  }
  /* 段落とリスト項目のテキストスタイルを調整 */
#readArea p,
#readArea li,
#readArea td {
  font-size: inherit;   
}
}