/* ========== common Component ========== */
.conversation-wrap {
	background-color: #FDE7EF;
}
.balloon-question h2 {
	color: var(--text-pink);
}
.term-icon img {
	transform: scale(1.38) translate(-3px, 12px);
}
.medicine-tableContainer h3.study-title {
	font-size: 28px;
	padding-bottom: 15px;
	padding-right: 36px;
}
.medicine-tableContainer h3.study-title::before {
	width: calc(100% - 36px);
	height: 11px;
}
.medicine-tableContainer h3.study-title::after {
	bottom: 15px;
	width: 24px;
	height: 40px;
}
.medicine-tableContainer .description-note {
	text-align: left;
}
.conversation-wrap .description-note {
	line-height: 2.29;
}
@media screen and (width < 768px) {
	.conversation-wrap .description-note {
		font-size: 10px;
	}
}
/* SP styles */
@media screen and (width < 768px) {
	.topic-section {
		margin-bottom: 48px;
	}
}
.topic-section:last-of-type .section-bgColor {
	margin-top: 48px;
	/* クイズ上部のギザギザ分 */
	padding-bottom: 131px;
}
/* SP styles */
@media screen and (width < 768px) {
	.topic-section:last-of-type .section-bgColor {
		padding-bottom: 78px;
	}
}
.term-content {
	margin: 24px auto 0;
}

/* ========== table Section ========== */
.medicine-tableContainer {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	gap: 24px;
	text-align: center;
}
.medicine-table {
	background-color: var(--text-pink);
	padding: 4px;
	border-radius: 25px;
}
.medicine-table h4 {
	color: #fff;
	font-size: 24px;
	font-size: clamp(16px, calc(24 / 1000 * 100vw), 24px);
	font-weight: bold;
	padding: 8px 12px;
	line-height: 1.5;
}
.medicine-table table {
  border-collapse: collapse;
}
.medicine-table thead {
	background-color: #F4A4BA;
}
.medicine-table thead th {
	color: #fff;
	font-size: clamp(14px, calc(18 / 1000 * 100vw), 18px);
	padding: 8px 12px !important;
	white-space: nowrap;
	font-weight: 700;
}
.medicine-table thead th:first-child {
	width: 18%;
}
.medicine-table tbody {
	font-size: clamp(12px, calc(16 / 1000 * 100vw), 16px);
	line-height: 1.5;
}
.medicine-table tbody th {
	background-color: #FDE7EF;
	vertical-align: middle;
	font-weight: 400;
	padding: 10px 12px;
	color: #000;
}
.medicine-table tbody td {
	background-color: var(--bg-white);
	padding: 8px 12px !important;
	text-align: left;
	width: 41%;
	vertical-align: middle;
	color: #000;
}
.medicine-name {
	color: #1A66AC;
	text-decoration: underline;
	font-size: clamp(14px, calc(18 / 1000 * 100vw), 18px);
	display: block;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.medicine-name.no-action {
	text-decoration: none;
	color: #000;
}
.text-small {
	font-size: clamp(10px, calc(14 / 1000 * 100vw), 14px);
}
h4 .text-small {
	color: #fff;
	font-weight: 400;
	padding-left: 6px;
}
.medicine-name .text-small {
	color: #1A66AC;
}
td .text-small {
	color: #000;
}
.text-small.description-note {
	display: block;
}
.medicine-table .roundness-left {
	border-radius: 0 0 0 25px;
}
.medicine-table tr:last-child td:last-child {
	border-radius: 0 0 25px 0;
}
.table-descriptionBox {
	background-color: #fff;
	border-radius: 0 0 25px 25px;
	text-align: left;
	padding: 8px 12px;
	font-size: clamp(12px, calc(16 / 1000 * 100vw), 16px);	
}
.table-descriptionBox * {
	color: #000;
}
/* table内の線 */
.medicine-table thead th + th {
	border-left: 2px solid var(--bg-white);
}
.medicine-table tbody tr + tr th {
	border-top: 2px solid var(--bg-white);
}
.medicine-table tbody th + td {
	border-left: 2px solid #FDE7EF;
}
.medicine-table tbody td + td {
	border-left: 2px solid #FDE7EF;
}
.medicine-table tbody tr + tr td {
	border-top: 2px solid #FDE7EF;
}
/* ツールチップ */
.tooltip {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	position: absolute;
	bottom: calc(100% + 45px);	
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--text-pink);
	color: var(--bg-white);
	font-size: 16px;
	line-height: 1.5;
	padding: 8px 16px;
	width: 200px;
	border-radius: 12px;
	text-align: left;
}
.tooltip::before {
	content: "";
	position: absolute;
	bottom: -38px;
	left: 50%;
	transform: translateX(-50%);
	background: url(../img/icon_tooltip_bubble.svg) no-repeat center center;
	background-size: contain;
	width: 20px;
	height: 48px;
}
.medicine-name:hover .tooltip {
	opacity: 1;
	visibility: visible;
}
/* 食物アレルギー リスト用 */
.list-item {
	position: relative;
	padding-left: 1.5em;
}
.list-item::before {
	position: absolute;
	content: '・';
	top: 0;
	left: 0;
}

/* ========== section 01 description ========== */
.description-layout {
	display: grid;
	gap: 8px;
}

/* ========== section 03 description ========== */
.description-wrap {
	display: grid;
	gap: 8px;
}
.note-wrap {
	font-size: 14px;
	line-height: 1.5;
	padding-left: 1.5em;
	position: relative;
}
.note-wrap::before {
	content: "※";
	position: absolute;
	width: 14px;
	height: 21px;
	top: 0;
	left: 0;
}
.note-wrap dl * {
	display: inline;
}
@media screen and (width < 768px) {
	.note-wrap {
		font-size: 12px;
	}
}

/* ========== アレルゲン免疫療法 ========== */
.meneki-content {
	display: grid;
	gap: 32px;
	max-width: 500px;
	margin: 0 auto;
}