@charset "utf-8";

/* ------------------------------
  健康の豆知識
------------------------------ */

@media (max-width: 640px) {
	.list_tips {
		padding-top: 10px;
		position: relative;
		z-index: 2;
	}
	
	.list_tips > li.button_wrap {
		display: block;
		margin-bottom: 8px;
	}
	
	.list_tips > li {
		position: relative;
		z-index: 10;
	}

	.list_tips > li.button_wrap:after {
		border-radius: 10px !important;
	}

	.list_tips > li.button_wrap a {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		padding: 5px 12px 5px 5px;
		border-radius: 10px !important;
		box-sizing: border-box;
	}

	.list_tips > li a .thumb_area {
		width: 120px;
		margin-right: 15px;
		border-radius: 10px;
		overflow: hidden;
	}

	.list_tips > li a .tips_title {
		display: flex;
		align-items: center;
		width: calc(100% - 31.9vw);
		padding: 0 25px 0 0;
		font-weight: bold;
		position: relative;
	}
	

	.list_tips > li a .tips_title:after {
		content: '';
		display: block;
		width: 19px;
		height: 19px;		
		background-image: url(/assets/img/contents/arrow_r_pnk.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		
	}

}

@media (min-width: 641px) {
	.article {
		padding-bottom: 36px;
	}

	.article + .article {
		padding-bottom: 31px;
	}

	.list_tips {
		display: flex;
		flex-wrap: wrap;
		margin-left: -28px;
	}

	.list_tips > li {
		display: block;
		margin-left: 27px;
		margin-bottom: 28px;
	}
	
	.list_tips > li.button_wrap:after {
		border-radius: 20px !important;
	}
	
	.list_tips > li a {
		display: block !important;
		height: 100%;
		padding: 10px 10px 22px !important;
		border-radius: 20px !important;
		position: relative;
	}

	.list_tips > li a .thumb_area {
		border-radius: 20px;
		overflow: hidden;
	}

	.list_tips > li a .tips_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: calc(100% - 166px);
		min-height: 4em;
		padding: 22px 10px 0;
		margin: auto 0;
		font-size: 1.25rem;
		font-weight: bold;
		line-height:  1.4;
		position: relative;
		box-sizing: border-box;
	}

	.list_tips > li a .tips_title:after {
		content: '';
		display: block;
		width: 1.5rem;
		height: 1.5rem;		
		background-image: url(/assets/img/contents/arrow_r_pnk.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	
}