/*=====================================
	CSS Custom Properties (Color Variables)
=====================================*/
:root {
	--color-text-normal      : #000000;
	--color-background-yellow: #E3E06D;
	--color-background-gray  : #E8ECEC;
	--color-background-beige : #F0EBE2;
	--color-background-white : #FFFFFF;
}


/*=====================================
	General Styles
=====================================*/

/* 導入 start */
.intro {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 15px;
}
.intro p:nth-of-type(1) {
	font-weight: bold;
	margin-bottom: 2em;
}
/* 導入 end */

/* 各項目（丸い部分）の共通スタイル */
.red-pencil {
	margin-top: 2em;
}

.item {
	position: relative;
	color: var(--color-text-normal);
	display: inline-block;
	margin: 35px 0;
	text-align: center;
	font-size: clamp(1.1rem, calc(0.25vw + 1.2rem), 1.3rem);
	padding: 0;
	font-weight: bold;
}

.item:hover {
	opacity: 0.6;
}

.item:before {
	content: "";
	position: absolute;
	width: 85px;
	height: 85px;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.item a {
	color: var(--color-text-normal);
	z-index: 1; /* z-indexを1に設定 */
	position: relative; /* z-indexを有効にするため */
}

.item a:hover {
	text-decoration: none;
}

/* 初めて系 */
.first .item:before {
	background-color: var(--color-background-yellow);
}

.first .item a {
	margin:-1.5em 0;
	padding:1.5em 0;
}

/* 診療科 */
.dept {
	margin-bottom: 3em;
}
.dept .item:before {
	background-color: var(--color-background-orange);
}

.dept .item a {
	margin:-2em -1em;
	padding:2em 1em;
}

/* カード_start */
/* カード全体 */
.learn-card {
	border-radius: 0 10px 10px 10px;
	padding-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1em;
}

.first .learn-card {
	background-color: var(--color-background-gray);
}

.row.first,
.row.dept {
	display  : flex;
	flex-wrap: wrap;
}

.dept .learn-card {
	background-color: var(--color-background-beige);
}

.learn-card:before {
	position: absolute;
	content: "";
	left: 15px;
	border-style: solid;
	border-width: 90px 90px 0 0;
}

.first .learn-card:before {
	border-color: var(--color-background-yellow) transparent transparent transparent;
}

.dept .learn-card:before {
	border-color: var(--color-background-orange) transparent transparent transparent;
}

.learn-card h3 {
	position: relative;
	font-weight: bold;
}

/* 先生コメント start */
.comment-box {
	background-color: var(--color-background-white);
	border-radius: 10px;
}

.comment-box img {
	width: 100px;
	shape-outside: url(/smart_rn/images/portrait_yellow.svg);
	right:0;
	margin-right: -1px;
}
.comment-box div {
	padding: 1em 1em 0.5em 1em;
	letter-spacing: 0.05em;
	line-height: 1.6;
}
.comment-box div p a {
	text-decoration: underline;
}
.comment-box div p span {
	color: var(--color-orange);
	font-weight: bold;
}
/* 先生コメント end */

/* おすすめコンテンツ start */
.offer h5 {
	font-size:16px;
	font-weight: bold;
	margin-top: 1.5em;
}
.offer .list-group {
	border-bottom: 2px dashed var(--color-background-white);
	font-size    : 14px;
}
.offer .list-group-item {
	display         : flex;
	column-gap      : 10px;
	align-items     : center;
	background-color: transparent;
	border-left     : none;
	border-right    : none;
	border-bottom   : none;
	border-top      : 2px dashed var(--color-background-white);
	padding: 10px 4px;
}

.offer .list-group-item:hover {
	opacity: 0.9;
}

.offer .list-group-item img {
	height: 25px;
	width: 25px;
}

.offer .list-group-item .fa-chevron-right {
	margin-left: auto;
}
/* おすすめコンテンツ end */
/* カード_end */


/*=====================================
	Media Queries
=====================================*/
@media (min-width: 440px) {
	.item {
		margin: 44px 0;
	}
	.item:before {
		width: 100px;
		height: 100px;
	}
}