*,*::before,*::after{ box-sizing:border-box; }
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{font-size:100%;font-weight:300;margin:0;padding:0;}
ul,ol{padding:0;list-style:none;}
body{font-family:sans-serif;}
a{color:inherit;}
table{border-collapse:collapse;border-spacing:0;}
img{width:100%;vertical-align:bottom}
@media(prefers-reduced-motion:reduce){
	*{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}

html {
	font-size:62.5%;
}
body {
	font-size: clamp(1.2rem, 0.627rem + 1.527vw, 1.8rem);
	font-weight: 400;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.6;
	color: #333;
}
a {
	text-decoration:none;
	transition:0.2s;
}

#container {
	background: #e5dbc8;
	min-height: 100vh;
	display: flex;
}
#wrapper {
	max-width: 768px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background: #A11C30;
}
#main {
	padding: 2em 1.5em;
	flex: 1;
}

/**
 * ファーストビュー
 */
#header {
	padding: 2em 1.5em;
	background: url("../img/fv_bg.webp") no-repeat top center/cover;
}
.fv-text {
	color: #fff;
	text-align: center;
	margin-top: 1.5em;
	padding-bottom: 2.5em;
	background: url("../img/arrow_under.svg") no-repeat bottom center/2em auto;
}
.fv-text p {
	margin-top: 1em;
}

/**
 * フィルター
 */
.filter-container {
	background: #fff;
	padding: 1.5em;
	border-radius: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.filter-group {
	display: flex;
}
.filter-title {
	color: #fff;
	background: #C4A46A;
	width: 25%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.filter-title span {
	font-size: 80%;
}
.filter-content {
	background: #F0ECE4;
	flex: 1;
	padding: 0.75em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.filter-genre .filter-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.filter-area .filter-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.filter-label input[type="checkbox"] {
	display: none;
}
.filter-label span {
	display: inline-block;
	padding: 0.25em 1em;
	border: 1px solid #707070;
	border-radius: 100px;
	background: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 85%;
	user-select: none;
	width: 100%;
	text-align: center;
}
.filter-genre .filter-label span,
.filter-area .filter-label span {
	padding: 0.25em 0;
}
.filter-label input[type="checkbox"]:checked + span {
	background-color: #FFF3D9;
}
.search-result-info {
	margin-top: 1.5em;
	text-align: center;
	color: #fff;
}
#count-display {
	font-size: 140%;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	.filter-label span:hover {
		background-color: #eee;
	}
}

/**
 * カード
 */
.card {
	transition: all 0.4s ease;
	opacity: 1;
	transform: scale(1);
	background: #fff;
	margin-top: 1.5em;
	padding: 1.5em;
	border-radius: 1em;
}
.card.is-hidden {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}
.tag-list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.25em;
}
.tag-item {
	font-size: 70%;
	line-height: 1;
	background: #eee;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 2.75em;
	border-radius: 0.35em;
	white-space: nowrap;
}
.tag-genre {
	background: #FDF9E5;
}
.tag-clinic {
	background: #FAEFF1;
}
.tag-troubles {
	background: #EFEFFA;
}
.tag-features {
	background: #EFFAF1;
}
.card-image {
	margin-top: 1.5em;
}
.card-cta {
	margin-top: 1em;
}
.card-cta a {
	display: block;
	color: #fff;
	background: linear-gradient(45deg, #DB324D, #871225);
	text-align: center;
	padding: 0.5em 0;
	border-radius: 0.5em;
	transition: all 0.3s ease;
}
.card-cta span {
	font-size: 140%;
	font-weight: bold;
	padding: 0 1.25em 0.125em 0;
	background: url("../img/arrow_right.svg") no-repeat right center/auto 1em;
}
#no-result {
	margin-top: 2em;
	text-align: center;
}
#no-result p {
	color: #fff;
}
.reset-btn {
	border: 2px solid #333;
	padding: 0.5em 1em 0.6em;
	background: #fff;
	border-radius: 100px;
	margin-top: 1em;
	cursor: pointer;
	font-size: inherit;
	transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
	.card-cta a:hover {
		opacity: 0.7;
	}
	.reset-btn:hover {
		background: #ddd;
	}
}

#line-link {
	width: 5.5em;
	height: 5.5em;
	border-radius: 50%;
	overflow: hidden;
	position: fixed;
	right: 1em;
	bottom: 1em;
	box-shadow: 0 3px 6px rgba(0,0,0,.3);
	z-index: 999;
}
#line-link a {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #06C755;
	color: #fff;
	width: 100%;
	height: 100%;
	font-size: 90%;
	font-weight: bold;
	text-align: center;
}
@media screen and (min-width: 768px) {
	#line-link {
		left: calc(50% + (768px / 2) - 1em);
		transform: translateX(-100%);
	}
}


#footer {
	padding: 2em 0;
	color: #fff;
	text-align: center;
	font-size: 90%;
}