/* テーブル自体に上マージン*/
.article-table{
  margin-top:1.5em;
}

/* ── タイムスケジュールを縦タイムライン化 ───────── */
.time-line{
  list-style:none;
  margin:0;
  padding:0 0 0 80px;          /* 横に余白を確保 */
  position:relative;
  font-size:1rem;
}

/* 縦のライン */
.time-line::before{
  content:"";
  position:absolute;
  left:32px;                   /* ドット中央位置 */
  top:0;
  bottom:0;
  width:2px;
  background:#e0e0e0;
}

/* 各ステップ */
.time-line li{
  margin:0 0 20px;
  position:relative;
  line-height:1.6;
}

/* ドット */
.time-line li::before{
  content:"";
  position:absolute;
  left:-48px;                  /* ドットの横位置 */
  top:0.3em;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#8ec9ff;          /* お好みでカラー変更 */
}

/* 時刻表示 */
.time-line time{
  display:inline-block;
  width:60px;
  font-weight:700;
  color:#333;
}

/* モバイル＝狭い幅では横スクロール回避 */
@media(max-width:480px){
  .time-line{padding-left:60px;}
  .time-line li::before{left:-36px;}
  .time-line::before{left:20px;}
}

/* FAQ セクションだけ余白を調整 --------------- */
#sec-08 .article-section-block{
  margin-bottom:0.1rem;  /* ブロック間の下余白を縮める */
}

#sec-08 .article-section-h3{
  margin-bottom:0.4rem;          /* 見出しと本文の間を詰める */
}

#sec-08 .article-text{
  margin:0;                      /* 段落上下の余白をリセット */
  line-height:1.7;               /* 行間は読みやすい 1.6〜1.8 目安で調整 */
}

/* planner --------------- */

/* callout — Pomeri用カスタムデザイン（カラー更新） */
.callout {
  background-color: #f7f7f7;        /* 元の淡いグレーのまま */
  border-left: 4px solid #c8b4a0;   /* 添付画像のナビバーと同じタンカラー */
  padding: 16px 20px;
  border-radius: 8px;
  margin: 24px 0;
}

.callout p {
  margin: 0 0 8px;
  font-style: italic;
  color: #555;
  line-height: 1.6;
}

/* リンク色も #C8B4A0 に */
.callout a {
  display: inline-block;
  color: #c8b4a0;
  text-decoration: underline;
  font-weight: bold;
  transition: color .2s ease;
}

.callout a:hover {
  color: #8e7b6a;  /* 少し濃くしてホバー時にメリハリを */
}

/* ── custom-merits ── */
.custom-merits {
  background-color: #fcfaf6;       /* クリーム系の淡い背景 */
  border: 1px solid #dbd7cf;       /* ライトグレーの囲み */
  padding: 24px 20px;              /* 内側余白 */
  border-radius: 6px;              /* 角丸 */
  margin: 32px 0;                  /* セクション間の余白 */
}

/* 見出し（h4）に大きなスクエアアイコンを追加 */
.custom-merits .article-section-h4 {
  position: relative;
  padding-left: 36px;
  margin-bottom: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #4a4a4a;
}
.custom-merits .article-section-h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: #C8B4A0 ;      /* 見出し横のスクエア色 */
  border-radius: 3px;
}

/* リストのスクエアアイコン */
.custom-merits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-merits ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: #555555;
  line-height: 1.6;
}
.custom-merits ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: rgba(200, 180, 160, 0.4);  /* 薄い#C8B4A0 */
  border-radius: 2px;
}

/* article-section-block 内のすべての H4 見出しに大きな■を付ける（余白＆アイコン位置調整版） */
.article-section-block .article-section-h4 {
  position: relative;
  padding-left: 32px;               /* アイコン分の余白 */
  margin: 1.5em 0 1.5em;           /* 上に1.5行分、下に0.75行分の余白 */
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;                 /* 行間を少し詰める */
  color: #4a4a4a;
}
.article-section-block .article-section-h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;                         /* 見出し行の中央に配置 */
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: #c8b4a0;        /* アクセントカラー */
  border-radius: 3px;
}

/* Pomeri 用テーブルデザイン */
.pomeri-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* 全てのセルに罫線 */
.pomeri-table th,
.pomeri-table td {
  border: 1px solid #c8b4a0;
  padding: 12px 16px;
}

/* ヘッダー背景 */
.pomeri-table thead th {
  background-color: #c8b4a0;
  color: #5a453a;
  font-weight: 600;
  text-align: left;
	text-align: center;
}

/* 背景の交互色 */
.pomeri-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
.pomeri-table tbody tr:nth-child(even) {
  background-color: #f7f5f3;
}

/* --- カスタムリストのデザイン --- */

/* 記事コンテンツ内のリストに限定してスタイルを適用 */
.article-content ul.custom-list {
  list-style: none; /* デフォルトの黒丸を非表示 */
  padding-left: 0;   /* 左の余白をリセット */
}

.article-content ul.custom-list li {
  position: relative; /* アイコン配置の基準とする */
  padding-left: 1.6em; /* アイコン分のスペースを確保 */
  margin-bottom: 1em;  /* 各項目の下の余白 */
  line-height: 1.7;    /* 行の高さを調整して読みやすくする */
}

/* アイコン（チェックマーク）のスタイル */
.article-content ul.custom-list li::before {
  content: '✔'; /* 表示するアイコン */
  position: absolute;
  left: 0;
  top: 0.1em;
  color: #c0a375; /* アイコンの色を上品なゴールドに */
  font-weight: bold;
}

/* --- ポイントカードのデザイン --- */

/* カード全体のコンテナ */
.points-card-container {
  border: 2px solid #e0e0e0; /* 少し柔らかいグレーの枠線 */
  padding: 25px;
  margin-top: 1.5em;
  border-radius: 8px;
}

/* 各ポイントのブロック */
.point-item:not(:last-child) {
  margin-bottom: 25px; /* 最後の項目以外に下の余白を設定 */
}

/* ポイントのタイトル (h3) */
.point-item .point-title {
  font-size: 1.15em;
  margin-top: 0;
  margin-bottom: 8px;
  color: #333;
}

/* ポイントの説明文 (p) */
.point-item .point-description {
  margin: 0;
  line-height: 1.7;
  color: #555;
}