@charset "utf-8";

#use_case {
	.wrap {
		.contents {
			& > p {
				margin-bottom:2em;
			}
			.usecase_wrap {
				background-color:#FAFAFA;
				padding:50px 20px;
				.contents_inner {
					max-width:900px;
					margin:0 auto;
					display:grid;
					grid-template-columns:repeat(3,1fr);
					grid-gap:30px 20px;
					margin-bottom:50px;
					li {
						.search-filter-field__input {
							border:none;
							border-radius:2em;
							box-shadow:2px 2px 4px rgba(0,0,0,.15);
							font-size:1.6rem;
							padding-left:1em;
							border:1px solid #EFEFEF;
							input {
								padding:.5em;
								&::placeholder {
									color: var(--color_sub);
									font-size:1.6rem;
									text-align:center;
									font-weight:600;
								}
							}
							.search-filter-component-combobox__selection {
								& > span {
									color: var(--color_sub);
									font-size:1.6rem;
									text-align:center;
									font-weight:600;
									width: 100%;
								}
								
							}
							.search-filter-component-combobox__listbox-toggle {
								&::before {
									content:none;
								}
								svg {
									fill:var(--color_sub);
								}
							}
						}
						&:last-child {
							grid-area:2/1/3/4;
							& > .search-filter-base {
								max-width:600px;
								margin:0 auto;
								.search-filter-icon  {
									&:not(.search-filter-input-text__clear-button){
										order:1;
										width:40px;
										border-radius:50%;
										aspect-ratio:1;
										background:url(../img/common/icon_search.svg) no-repeat center center/50% auto var(--color_main);
										transform:translateX(7px);
										svg {
											display:none;
										}
									}
								}
							}
						}
					}
				}
				.usecase {
					display:grid;
					grid-template-columns:repeat(4,1fr);
					grid-gap:15px;
					.case {
						background-color:#FFFFFF;
						padding:15px 20px 10px;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
						border-radius:10px 10px 20px 10px;
						height:100%;
						display:grid;
						grid-template-rows:auto auto auto 1fr auto;
						.cat {
							display:flex;
							flex-wrap:wrap;
							font-size:1.1rem;
							gap:5px;
							margin-bottom:1em;
							a {
								display:grid;
								align-items:center;
								justify-content:center;
								height:2em;
								background-color:#EFEFEF;
								line-height:1;
								padding: 0 1em;
								border-radius:1em;
							}
						}
						h3 {
							font-size:1.5rem;
							color:var(--color_sub);
							line-height:1.5;
							margin-bottom:.5em;
						}
						.img {
							img {
								display:block;
								aspect-ratio:3/2;
								object-fit:cover;
								border-radius:5px;
							}
						}
						p {
							font-size:1.4rem;
							line-height:1.5;
							padding:1em 0;
						}
						& > a {
							display:grid;
							font-size:1.5rem;
							color:var(--color_main);
							grid-template-columns:1fr 2.6em;
							align-items:center;
							width:9em;
							margin-left:auto;
							margin-right:-10px;
						}
					}
				}
			}
		}
	}
}

#use_case_single {
	.wrap {
		.contents {
			.info {
				display:grid;
				grid-template-columns:1fr 8em;
				font-size:1.5rem;
				margin-bottom:50px;
				.cat {
					display:flex;
					flex-wrap:wrap;
					align-items:center;
					justify-content:flex-start;
					gap:5px;
					a {
						background-color:var(--color_main);
						font-size:1.3rem;
						display:grid;
						align-items:center;
						justify-content:center;
						height:2em;
						color:#FFFFFF;
						line-height:1;
						white-space:nowrap;
						padding:0 1.5em;
						border-radius:1em;
					}
				}
				.date {
					display:grid;
					grid-template-columns:1em auto;
					grid-column-gap:.5em;
					align-items:center;
					justify-content:end;
				}
			}
			.contbox {
				margin-bottom:60px;
				h3 {
					font-size:2.4rem;
					line-height:1.5;
					margin-bottom:1em;
					display:grid;
					align-items:start;
					grid-template-columns:.8em 1fr;
					grid-column-gap:.5em;
					&::before {
						content:'';
						width:100%;
						height:100%;
						background-color:var(--color_main);
						border-radius: 0 100% 100% 0% / 50%;
					}
				}
				h4 {
					font-size:2.0rem;
					color:var(--color_sub);
					line-height:1.5;
					margin-bottom:.5em;
				}
				ul,ol {
					margin-bottom:1.5em;
					display:grid;
					grid-row-gap:.33em;
					border:5px solid #EFEFEF;
					padding:1em;
					border-radius:1em;
					li {
						line-height:1.8;
					}
				}
				ol {
					li {
						list-style:decimal;
						list-style-position:inside;
						text-indent:-1.2em;
						padding-left:1.2em;
					}
				}
				ul {
					li {
						text-indent:-1em;
						padding-left:1em;
						&::before {
							content:'・';
						}
					}
				}
				p {
					margin-bottom:1.5em;
				}
				& + .btn {
					grid-template-columns:.8em 1fr;
					padding-right:1.5em;
					margin:0 auto;
					img {
						transform:rotate(180deg);
					}
				}
			}
		}
	}
}

@media (hover:hover) {

	#use_case {
		.wrap {
			.contents {
				.case_slider {
					.case_slide {
						.case {
							& > a {
								transition:.3s;
								&:hover {
									width:8.6em;
									opacity:1;
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:1200px) {

}

@media screen and (max-width:1024px) {

	#use_case {
		.wrap {
			.contents {
				.usecase_wrap {
					.usecase {
						grid-template-columns:repeat(3,1fr);
					}
				}
			}
		}
	}
	#use_case_single {
		.wrap {
			.contents {
				.contbox {
					h3 {
						font-size:2.2rem;
					}
					h4 {
						font-size:1.8rem;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px) {

	#use_case {
		.wrap {
			.contents {
				.usecase_wrap {
					padding:30px 20px;
					width:100vw;
					margin:0 -20px;
					.contents_inner {
						grid-template-columns:1fr;
						grid-gap:10px;
						margin-bottom:30px;
						padding:0;
						li {
							&:last-child {
								grid-area:unset;
							}
						}
					}
					.usecase {
						grid-template-columns:1fr;
						grid-gap:10px;
					}
				}
			}
		}
	}
	#use_case_single {
		.wrap {
			.contents {
				h2 {
					font-size:2.0rem;
				}
				.info {
					grid-template-columns:1fr;
					grid-row-gap:15px;
					font-size:1.4rem;
					margin-bottom:30px;
					.cat {
						a {
							font-size:1.2rem;
							padding:0 1em;
						}
					}
					.date {
						justify-self:start;
					}
				}
				.contbox {
					margin-bottom:45px;
					h3 {
						font-size:1.8rem;
					}
					h4 {
						font-size:1.6rem;
					}
					ul,ol {
						font-size:1.4rem;
					}
				}
			}
		}
	}

}