@charset "utf-8";
@import url('./swiper-bundle.override.css?20240805');

.btn_help
{
	color: #FFF;
	background: #FFF;
	border: 3px solid #FFF;
	pointer-events: none;
}

.banner_panel
{
	padding: 0 16px;

	/*	種類検索に限り、バナー広告を表示するための大分類が固定でないため、初期状態では非表示 */
	visibility: hidden;
	height: 0;
}

.search_panel
{
	padding: 32px 16px;
}

.panel
{
	flex-direction: column;
	margin: 16px auto 32px auto;
	background: #FFF;
	padding: 16px;
}

.search_panel .search_area .heading
{
	font-size: 22px;
	font-weight: 600;
}

#major_search_area
{
	margin-bottom: 0px;
}

#major_search_area_mobile
{
	display: none;
	margin-bottom: 0px;
}

.panel .list
{
	position: relative;
	flex-wrap: wrap;
}

.panel .list label
{
	display: block;
	cursor: pointer;
	width: 32%;
}

.panel .list label:nth-child(3n-1)
{
	margin: 0 2%;
}

.panel .list label:nth-child(n+4)
{
	margin-top: 12px;
}

.panel .list label [type='checkbox'],
.panel .list label [type='radio']
{
	display: none;
}

.panel .list label [type='checkbox']:checked + div,
.panel .list label [type='radio']:checked + div
{
	border-color: #1E469B;
	background-color: rgba(30, 70, 155, 0.08);
}

.panel .list label [type='checkbox']:disabled + div,
.panel .list label [type='radio']:disabled + div
{
	opacity: 0.5 !important;
}

.panel .list label [type='checkbox']:disabled + div::before,
.panel .list label [type='radio']:disabled + div::before
{
	background-color: #ccc !important;
	border-color: transparent;
}

.panel .list label [type='checkbox'] + div,
.panel .list label [type='radio'] + div
{
	position: relative;
	padding: 8px 16px 8px 48px;
	background: #FFF;
	border: 2px solid #808080;
	box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	line-height: 24px;
	color: #333;
	font-size: 16px;
}

.panel .list label [type='checkbox'] + div::before,
.panel .list label [type='radio'] + div::before
{
	position: absolute;
	left: 14px;
	display: block;
	width: 24px;
	height: 24px;
	background: #FFF no-repeat center;
	border: 2px solid #808080;
	content: '';
}

.panel .list label [type='checkbox']:checked + div::before
{
	background-color: #1E469B;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjkxNiA2LjI4MUExLjYxNSAxLjYxNSAwIDEgMCAuMzE0IDguMTk2bDMuNzg4IDUuMTQ2Yy42Ny45MSAyLjA0Mi44NyAyLjY1Ni0uMDc5TDEzLjc0IDIuNDk0QTEuNjE1IDEuNjE1IDAgMCAwIDExLjAyOS43MzdsLTUuNzEgOC44MDh6Ii8+PC9zdmc+");
	border-color: transparent;
}

.panel .list label [type='checkbox'] + div::before
{
	border-radius: 2px;
}

.panel .list label [type='radio']:checked + div::before
{
	background-color: #1E469B;
	border-color: transparent;
	box-shadow: inset 0 0 0 1px #1E469B, inset 0 0 0 4px #FFF;
}

.panel .list label [type='radio'] + div::before
{
	border-radius: 50%;
}

#search_cnt_area
{
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 700;
}

#search_cnt_area .search_cnt
{
	margin: 0 auto;
}

#search_cnt_area .search_cnt span
{
	width: 20px;
	margin: 0 6px;
	font-size: 24px;
}

#search_cnt_area .search_cnt span.active
{
	color: #3C78D8;
}

#btn_search
{
	display: block;
	width: 376px;
	height: 64px;
	margin: 0 auto;
	border-radius: 50px;
	font-size: 24px;
	font-weight: 700;
	background: #1E469B;
	color: #FFF;
	cursor: pointer;
}

.symptom
{
	margin-bottom: 16px;
}

#symptom_list
{
	min-height: 100px;
}

#symptom_list:empty::before
{
	position: absolute;
	top: 42%;
	left: 0;
	right: 0;
	font-size: 18px;
	text-align: center;
	opacity: 0.64;
	content: 'お薬の種類を選択してください';
}

#symptom_list.search_cnt:empty::before
{
	content: '選択可能な症状がありません';
}

#nav.balloon_area
{
	justify-content: flex-end;
}

#nav.balloon_area .balloon
{
	position: relative;
	background-color: #e4f2ff;
	padding: 8px;
	margin-top: 10px !important;
	margin-bottom: 5px;
	color: #1E469B;
	margin-top: 0px;
	border-radius: 6px;
}

#nav.balloon_area .balloon::before
{
	content: "";
	position: absolute;
	border: 10px solid transparent;
	border-bottom: 20px solid #e4f2ff;
	top: -29px;
	left: calc(100% - 90px);
}

#nav.balloon_area .balloon p
{
	margin: 0;
	padding: 0;
}

#search_major_code_area
{
	padding-top: 32px;
	margin: 0 16px 16px;
	border-top: 1px solid #CCC;
}

#search_other_method_area
{
	margin: 32px 16px 64px 16px;
}

#search_major_code_area .list_title,
#search_other_method_area .list_title
{
	font-size: 16px;
	font-weight: 700;
	color: #3C78D8;
}

#search_major_code_area .list,
#search_other_method_area .list
{
	flex-wrap: wrap;
}

#search_major_code_area .list a,
#search_other_method_area .list a
{
	margin: 16px 32px 0 0;
	font-size: 12px;
	text-decoration: none;
	color: inherit;
}

#search_major_code_area .list a:hover,
#search_other_method_area .list a:hover
{
	opacity: 0.6;
}

/*	tablet	*/
@media screen and (max-width: 1000px)
{
	.panel .list label
	{
		width: 49%;
	}

	.panel .list label:nth-child(3n-1),
	.panel .list label:nth-child(n+4)
	{
		margin: 0;
	}

	.panel .list label:nth-child(2n-1)
	{
		margin-right: 2%;
	}

	.panel .list label:nth-child(n+3)
	{
		margin-top: 12px;
	}

	#btn_search
	{
		width: 90%;
		max-width: 376px;
	}

	#nav.balloon_area .balloon::before
	{
		top: -22px;
	}
}

/*	mobile	*/
@media screen and (max-width: 640px)
{
	#nav.balloon_area .balloon::before
	{
		left: calc(100% - 30px);
	}

	#nav.balloon_area .balloon p
	{
		font-size: 12px;
	}
}

/*	mobile	*/
@media screen and (max-width: 430px)
{
	#major_search_area_mobile
	{
		display: block;
	}

	#major_search_area
	{
		display: none;
	}

	.search_panel .search_area .heading
	{
		font-size: 20px;
	}

	#medicine_type_select
	{
		position: relative;
		width: 100%;
		height: 34px;
		padding-left: 20px;
		background: #FFF no-repeat calc(100% - 20px) center;
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjYiIHZpZXdCb3g9IjAgMCA4IDYiPjxwYXRoIGZpbGw9IiM5YTllYTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNDEgNS43OUw3LjkxNi43MzVBLjQ2MS40NjEgMCAwIDAgNy43OC4wNzkuNTA2LjUwNiAwIDAgMCA3LjUwOCAwSC40OTJBLjQ4My40ODMgMCAwIDAgMCAuNDczYS40Ni40NiAwIDAgMCAuMDgzLjI2MkwzLjU5IDUuNzlhLjUwNC41MDQgMCAwIDAgLjgxOCAweiIvPjwvc3ZnPg==);
		background-size: auto 30%;
		border: 2px solid #808080;
		box-shadow: 0 0 16px 0 rgb(0 0 0 / 6%), 0 2px 4px 0 rgb(0 0 0 / 12%);
		border-radius: 4px;
		appearance: none;
		color: #333;
		font-size: 18px;
	}

	.panel .list label
	{
		width: 100%;
	}

	.panel .list label:nth-child(2n-1),
	.panel .list label:nth-child(n+3)
	{
		margin: 0;
	}

	.panel .list label:not(:first-child)
	{
		margin-top: 12px;
	}

	.panel .list label [type='checkbox'] + div,
	.panel .list label [type='radio'] + div
	{
		padding: 7px 16px 7px 48px;
		line-height: inherit;
		font-size: 18px;
	}

	.panel .list label [type='checkbox'] + div::before,
	.panel .list label [type='radio'] + div::before
	{
		position: absolute;
		left: 14px;
		display: block;
		width: 20px;
		height: 20px;
		background: #FFF no-repeat center;
		border: 2px solid #808080;
		content: '';
	}

	#btn_search
	{
		font-size: 20px;
	}

	#nav.balloon_area .balloon::before
	{
		border-bottom: 16px solid #e4f2ff;
		top: -20px;
		left: calc(100% - 25px);
	}

	#search_other_method_area
	{
    	margin: 16px 16px 64px 16px;
	}

	#search_major_code_area .list_title,
	#search_other_method_area .list_title
	{
		display: flex;
		align-items: center;
		padding: 10px 16px;
		background-color: rgba(30, 70, 155, 0.08);
		border: #000 solid 1px;
		font-size: 14px;
		font-weight: inherit;
		color: inherit;
	}

	#search_major_code_area .list,
	#search_other_method_area .list
	{
		display: none;
		border: solid 1px #000;
		border-top: none;
	}

	#search_major_code_area .list_title::after,
	#search_other_method_area .list_title::after
	{
		display: block;
  		width: 25px;
  		height: 15px;
		margin-left: auto;
		background: url("../img/icon_arrow.png") no-repeat 0;
		background-size: 25px;
		transform: rotate(90deg);
		content: "";
	}

	#search_major_code_area .list_title.disp::after,
	#search_other_method_area .list_title.disp::after
	{
		transform: rotate(270deg);
	}

	#search_major_code_area .list a,
	#search_other_method_area .list a
	{
		display: block;
		margin: 0;
		padding: 8px 40px;
		border-bottom: solid 1px #000;
		background: url("../img/icon_arrow.png") no-repeat 4px;
		background-position: calc(100% - 16px) 50%;
		background-size: 16px;
	}

	#search_major_code_area .list a:last-child,
	#search_other_method_area .list a:last-child
	{
		border-bottom: none;
	}
}