/* 新しい記事ページ（app/content/articles） */
.ar-page { max-width: 760px; margin: 0 auto; padding: 20px 16px 64px; color: #333; line-height: 1.9; font-size: 1rem; }
.ar-breadcrumb { font-size: .8rem; color: #888; margin-bottom: 12px; }
.ar-breadcrumb a { color: #888; }
.ar-draft { background: #fff3cd; border: 1px solid #ffe08a; border-radius: 8px; padding: 8px 12px; font-size: .9rem; }
.ar-title { font-size: 1.6rem; font-weight: 700; line-height: 1.5; margin: 0 0 8px; }
.ar-meta { font-size: .85rem; color: #888; margin: 0 0 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.ar-pr { font-size: .8rem; color: #666; background: #f7f7f7; border-radius: 8px; padding: 8px 12px; }

.ar-body h2 { font-size: 1.35rem; font-weight: 700; line-height: 1.5; margin: 44px 0 16px; padding: 10px 14px; background: #fff0f3; border-left: 6px solid #e91e63; border-radius: 4px; }
.ar-body h3 { font-size: 1.15rem; font-weight: 700; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #f8bbd0; }
.ar-body p { margin: 0 0 1.2em; }
.ar-body ul, .ar-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.ar-body li { margin-bottom: .3em; }
.ar-body strong { background: linear-gradient(transparent 60%, #ffe4ec 60%); }
.ar-body a { color: #d81b60; }
.ar-body img { max-width: 100%; height: auto; border-radius: 8px; }
.ar-body .ar-source { font-size: .8rem; color: #777; margin-top: -.6em; }

/* 表：スマホでは横にスクロール */
.ar-body .ar-table { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
.ar-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .9rem; }
.ar-body th, .ar-body td { border: 1px solid #e0e0e0; padding: 8px 10px; text-align: left; vertical-align: top; }
.ar-body th { background: #fce4ec; font-weight: 700; white-space: nowrap; }

/* 囲み */
.ar-body .ar-summary { background: #fff8fa; border: 2px solid #f8bbd0; border-radius: 12px; padding: 14px 18px; margin: 0 0 1.6em; }
.ar-body .ar-summary > p:first-child { font-weight: 700; color: #c2185b; margin-bottom: .4em; }
.ar-body .ar-summary ul { margin-bottom: 0; }
.ar-body .ar-note { background: #f7f7f7; border-radius: 10px; padding: 12px 16px; font-size: .95rem; }

/* 診断への案内 */
.ar-cta { background: linear-gradient(135deg, #fff0f3, #fce4ec); border-radius: 16px; padding: 20px; margin: 36px 0; text-align: center; }
.ar-cta-lead { font-size: 1.2rem; font-weight: 700; color: #c2185b; margin: 0 0 6px; }
.ar-cta-text { font-size: .95rem; margin: 0 0 14px; text-align: left; }
.ar-cta-btn { display: inline-block; background: #e91e63; color: #fff !important; font-weight: 700; border-radius: 999px; padding: 14px 32px; text-decoration: none; }

.ar-related h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; }
.ar-related ul { list-style: none; padding: 0; margin: 0; }
.ar-related li { border-bottom: 1px solid #eee; }
.ar-related a { display: block; padding: 12px 4px; color: #333; text-decoration: none; }
.ar-back { text-align: center; margin-top: 24px; }

/* コラム一覧の新着 */
.ar-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.ar-list a { display: block; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 14px 16px; color: #333; text-decoration: none; }
.ar-list .ar-list-cat { display: inline-block; font-size: .75rem; color: #c2185b; background: #fff0f3; border-radius: 999px; padding: 0 10px; margin-bottom: 4px; }
.ar-list .ar-list-title { display: block; font-weight: 700; line-height: 1.5; }
.ar-list .ar-list-desc { display: block; font-size: .85rem; color: #666; margin-top: 4px; }

@media (max-width: 575px) {
  .ar-page { padding: 12px 14px 48px; }
  .ar-title { font-size: 1.35rem; }
  .ar-body h2 { font-size: 1.2rem; margin-top: 36px; }
  .ar-body h3 { font-size: 1.05rem; }
}

.ar-eyecatch { margin: 0 0 20px; }
.ar-eyecatch img, .ar-body img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* コラム一覧 */
.ar-lead { color: #555; margin: 0 0 8px; }
.ar-cat { margin-top: 32px; }
.ar-cat-title { font-size: 1.2rem; font-weight: 700; border-left: 5px solid #e91e63; padding-left: 10px; margin: 0 0 14px; }
.ar-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.ar-cards a { display: block; color: #333; text-decoration: none; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; height: 100%; }
.ar-cards img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ar-card-title { display: block; font-weight: 700; line-height: 1.5; padding: 10px 12px 4px; }
.ar-card-desc { display: block; font-size: .85rem; color: #666; padding: 0 12px 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575px) { .ar-cards { grid-template-columns: 1fr; } }

/* 提携先の案内枠 */
.ar-body .ar-offer { border: 2px solid #ffb74d; background: #fffaf2; border-radius: 14px; padding: 16px 18px; margin: 0 0 1.6em; text-align: center; }
.ar-body .ar-offer-name { font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; }
.ar-body .ar-offer-text { font-size: .95rem; text-align: left; margin: 0 0 12px; }
.ar-body .ar-offer-btn { display: block; background: #ff6d00; color: #fff !important; font-weight: 700; border-radius: 999px; padding: 14px; text-decoration: none; }
.ar-body .ar-offer-btn:hover { opacity: .9; }
/* エン婚活シミュレーター */
.ar-body .es-box { background: #fff8fa; border: 1px solid #f8d7e0; border-radius: 12px; padding: 16px; margin: 1.2em 0; }
.ar-body .es-group { margin-bottom: 12px; }
.ar-body .es-label { font-size: .85rem; font-weight: 700; color: #c2185b; margin: 0 0 6px; }
.ar-body .es-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-body .es-option { font: inherit; font-size: .9rem; background: #fff; color: #333; border: 1px solid #ddd; border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.ar-body .es-option.is-selected { background: #e91e63; border-color: #e91e63; color: #fff; font-weight: 700; }
.ar-body .es-result { margin-top: 16px; }
.ar-body .es-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; line-height: 1.6; }
.ar-body .es-table th, .ar-body .es-table td { border: 1px solid #eee; padding: 10px; text-align: left; vertical-align: top; }
.ar-body .es-table th { width: 38%; background: #fafafa; font-weight: 700; }
.ar-body .es-note { font-size: .78rem; color: #777; margin: 8px 0 0; }
@media (max-width: 560px) {
  .ar-body .es-table th, .ar-body .es-table td { display: block; width: auto; }
  .ar-body .es-table th { border-bottom: none; }
}
/* お問い合わせ */
.ar-body .ct-note { font-size: .85rem; color: #666; background: #f7f7f7; border-radius: 8px; padding: 10px 14px; }
.ar-body .ct-error { color: #b00020; background: #fdecee; border-radius: 8px; padding: 10px 14px; font-weight: 700; }
.ct-form { margin-top: 20px; }
.ct-field { display: block; margin-bottom: 18px; }
.ct-label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.ct-label em { font-style: normal; font-size: .72rem; color: #fff; background: #e91e63; border-radius: 4px; padding: 1px 6px; margin-left: 8px; vertical-align: 1px; }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; font: inherit; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; padding: 10px 12px; background: #fff; }
.ct-field textarea { resize: vertical; line-height: 1.7; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ar-body .ct-privacy { font-size: .8rem; color: #666; }
.ct-submit { display: block; width: 100%; max-width: 360px; margin: 16px auto 0; background: #e91e63; color: #fff; font-weight: 700; border: none; border-radius: 999px; padding: 14px; font-size: 1rem; cursor: pointer; }
.ct-submit:disabled { opacity: .6; cursor: default; }