/* ===== body ===== */
.article-body {
	max-width: 100%;
	margin: 0 auto 40px;
}

/* ===== 以下はヒーローエリア（/check/ の診断ヘッダーを流用） ===== */
.diagnosis-header {
	background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
 	padding: 40px 24px;
}

.diagnosis-header .diagnosis-header-content {
	max-width: 375px;
	margin: 0 auto;
	text-align: center;
}

.diagnosis-header .diagnosis-category {
	display: inline-block;
	padding: 6px 16px;
	background-color: var(--primary, #fd6051);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	border-radius: 50px;
	margin-bottom: 16px;
}

.diagnosis-header .diagnosis-title {
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--secondary, #40496d);
	line-height: 1.4;
	margin: 0 0 4px;
}

.diagnosis-header .diagnosis-subtitle {
	font-size: 1.7rem;
	color: var(--wp--preset--color--cyan-bluish-gray);
	text-align: center;
}

.diagnosis-header .diagnosis-lead {
	font-size: 1.4rem;
	color: #4b5563;
	line-height: 1.8;
	text-align: left;
}

/* CTAボタン */
.disease-hero-cta .disease-hero-cta-row,
.disease-cta .disease-cta-row {
	display: flex;
	gap: 3px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

.disease-hero-cta .disease-hero-cta-row p,
.disease-cta .disease-cta-row p {
	margin-bottom: 0;
    font-size: 1.4rem;
    color: var(--line);
}

.disease-hero-cta a,
.disease-cta a{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--line, #06c755);
	color: #fff;
	font-weight: 700;
	border-radius: 8px;
	padding: 4% 12%;
	font-size: 15px;
	text-decoration: #fff;
	box-shadow: 0 3px 10px rgba(6, 199, 85, .28);
}

.disease-hero-cta .disease-hero-note p,
.disease-cta .disease-note p {
 	font-size: 1.2rem;
    margin-top: 10px;
    color: var(--secondary);
	text-align: center;
}

.disease-cta {
	margin-bottom: 40px;
}

/* ===== メイン ===== */
.article-body .disease-nain {
	padding: 0 24px;
}

/* ===== 以下はコンテンツエリア ===== */
.article-body .contents {
	margin: 20px auto 0;
}

.article-body .contents h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: #333;
	padding-left: 12px;
    border-left: 6px solid var(--primary);
    color: #333;
}

.article-body h3 {
    font-size: 2rem;
    font-weight: 500;
    margin: 30px 0 20px;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
	padding-left: 0;
	border-left: none;
}

.article-body p, .article-body li {
    font-size: 1.6rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 10px;
}

.article-body p strong {
	background-color: #F8DCCD;
}

/* 各ボックス */
.article-body .contents .content-box {
	border-radius: 12px;
	margin: 24px 0;
}

/* こんな方に受けていただいています */
.article-body .contents .content-box .cause-box > .wp-block-group__inner-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.article-body .contents .content-box .cause-box-text .wp-block-group__inner-container > h3 {
	font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 5px;
    color: #333;
    border-bottom: 1px dotted #333;
    padding-left: 0;
    border-left: none;
    padding-bottom: 5px;
}

/* 本文内のリストのスタイル */
.article-body .contents .content-box ul {
    background-color: #f8f8f8;
	border-radius: 8px;
	margin: 12px 0;
    padding: 15px 15px 10px 30px;
}

/* 本文内のテーブルのスタイル */
.article-body .contents .content-box .wp-block-table thead {
	border-bottom: 1px solid;
}

.article-body .contents .content-box .wp-block-table thead th {
	background-color: #ffe5da;
	text-align: center;
}

.article-body .contents .content-box .wp-block-table td {
	background-color: #fff;
}

.article-body .contents .content-box .wp-block-table td span {
	background-color: var(--primary);
	border-radius: 20px;
	color:#fff;
    padding: 3px 6px;
}

.article-body .contents .content-box .wp-block-table td span.cant {
	background-color: #eee;
    border-radius: 20px;
    color: #666;
    padding: 3px 6px;
}

.article-body .contents .content-box .wp-block-table td span.note {
	font-size: 0.9em;
	background-color: transparent;
	color: var(--secondary);
}

/* セル内で改行させたくない表（短い情報中心の比較表）用 */
.article-body .contents .content-box .wp-block-table .table--nowrap {
	white-space: nowrap;
}

/* 本文内のテーブルのスタイル：3カラム（table-capabilityのみ） */
.article-body .contents .content-box .wp-block-table.table-capability thead th:nth-child(1) {
	background-color: transparent;
	border-color: transparent;
	border-right: 1px solid var(--secondary, #40496d);
	border-bottom: 1px solid var(--secondary, #40496d);
}

.article-body .contents .content-box .wp-block-table.table-capability th:nth-child(1),
.article-body .contents .content-box .wp-block-table.table-capability td:nth-child(1) {
	width: 30%;
}

.article-body .contents .content-box .wp-block-table.table-capability th:nth-child(2),
.article-body .contents .content-box .wp-block-table.table-capability td:nth-child(2) {
	width: 25%;
	white-space: nowrap;
	text-align: center;
}

.article-body .contents .content-box .wp-block-table.table-capability th:nth-child(3),
.article-body .contents .content-box .wp-block-table.table-capability td:nth-child(3) {
	width: 35%;
}

/* 本文内のテーブルのスタイル：2カラム表（4:6） */
.article-body .contents .content-box .wp-block-table.table-2col th:nth-child(1),
.article-body .contents .content-box .wp-block-table.table-2col td:nth-child(1) {
	width: 40%;
}

.article-body .contents .content-box .wp-block-table.table-2col th:nth-child(2),
.article-body .contents .content-box .wp-block-table.table-2col td:nth-child(2) {
	width: 60%;
}


/* 監修エリア（/check/ のデザインに合わせる） */
.article-body .contents .content-box .supervision-label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--secondary, #40496d);
	margin-bottom: 5px;
}

.article-body .contents .content-box .supervision-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
}

.article-body .contents .content-box .supervision-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-body .contents .content-box .supervision-label-name {
	font-size: 14px;
	color: var(--secondary, #40496d);
	margin: 0;
}

/* 受診の流れ（トップページのFlowデザインを流用） */
.article-body .contents .content-box .flow-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	position: relative;
	margin-top: 16px;
}
.article-body .contents .content-box .flow-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 24px;
	position: relative;
}
.article-body .contents .content-box .flow-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 25px;
    top: 50px;
	width: 1px;
	height: calc(100% + 24px);
	background-image: repeating-linear-gradient(to bottom, var(--secondary, #40496d) 0px, var(--secondary, #40496d) 2px, transparent 2px, transparent 5px);
	z-index: 0;
}
.article-body .contents .content-box .step-number {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
}
.article-body .contents .content-box .step-circle {
	width: 50px;
	height: 50px;
	background-color: var(--secondary, #40496d);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.article-body .contents .content-box .step-text {
	font-size: 12px;
	line-height: 1.22;
	letter-spacing: 0.04em;
	text-align: center;
	color: #fff;
}
.article-body .contents .content-box .step-content {
	flex: 1 1 0%;
	background-color: #FFF3F0;
	border-radius: 16px;
	padding: 16px;
	box-shadow: 2px 2px 0 #ede1d6;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.article-body .contents .content-box .step-header {
	display: flex;
	align-items: center;
	gap: 4px;
	border-bottom: 1px dotted var(--secondary);
    padding-bottom: 10px;
}
.article-body .contents .content-box .step-header img {
	width: 24px;
	height: 24px;
}
.article-body .contents .content-box .step-header h3 {
	border: none;
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--secondary, #40496d);
	margin: 0;
}
.article-body .contents .content-box .step-image {
	width: 100%;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
}
.article-body .contents .content-box .step-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-body .contents .content-box .step-description {
	width: 100%;
}
.article-body .contents .content-box .step-description p {
	font-size: 1.4rem;
	line-height: 1.7;
	color: var(--secondary, #40496d);
	margin: 0;
}

/* mentoaの特徴 */
.disease-features {
    max-width: 700px;
    margin: 0 auto;
  }

  .disease-features__title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary) !important;
    margin: 0 0 24px;
    letter-spacing: 0.02em;
	margin: 20px 0 20px !important;
  }

  .disease-features__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
	margin-bottom: 40px;
  }

  .feature-card {
    background: #FFF3F0;
    border-radius: 14px;
    box-shadow: 2px 2px 0 #EDE1D6;
    padding: 16px;
    text-align: center;
  }
  
.feature-card p {
	margin-bottom: 2px;
    line-height: 1.2;
}

  .feature-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-card__icon img,
  .feature-card__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .feature-card__main {
    font-size: 15px !important;
    font-weight: 700;
    color: var(--secondary) !important;
    margin: 0 0 6px;
    line-height: 1.3;
  }

  .feature-card__sub {
    font-size: 14px !important;
    font-weight: 400;
    color: var(--secondary) !important;
    margin: 0;
    line-height: 1.4;
  }

  .feature-card--balloon {
    position: relative;
    overflow: visible;
  }

  .feature-card__balloon {
    position: absolute;
    top: -30px;
    right: -14px;
    width: 72px;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
  
  /* よくある質問（topページのFAQカードを流用） */
.article-body .contents .content-box .faq-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.article-body .contents .content-box .faq-item {
	background-color: #f6f6f6;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.article-body .contents .content-box .faq-question h3 {
	line-height: 1.71;
	color: var(--secondary);
	margin: 0;
	border: none;
    font-size: 1.7rem;
    font-weight: 700;
}

.article-body .contents .content-box .faq-answer p {
	line-height: 1.71;
	color: var(--secondary);
	margin: 0;
}

.article-body .contents .content-box .faq-answer a {
	color: var(--primary);
	text-decoration: underline;
	text-decoration-color: var(--primary);
}

  @media (max-width: 420px) {
    .disease-features__title { font-size: 22px; }
    .feature-card__main { font-size: 18px; }
  }