@charset "utf-8";

#results {
	.wrap {
		.contents {
			&.contents_column {
				display:grid;
				grid-template-columns:1fr 250px;
				grid-column-gap:50px;
				align-items:start;
				.contents_wrap {
					h2 {
						color:var(--color_white);
						font-size:3.0rem;
						font-weight:500;
						line-height:1.5;
						margin-bottom:1em;
					}
					.results_list {
						display:grid;
						grid-row-gap:20px;
						li {
							background-color:var(--color_white);
							padding:20px;
							display:grid;
							grid-template-columns:25% 1fr;
							grid-column-gap:3%;
							align-items:center;
							.img {
								img {
									display:block;
									aspect-ratio:3/2;
									object-fit:cover;
								}
							}
							.detail {
								h3 {
									font-size:1.8rem;
									line-height:1.5;
									font-weight:500;
									margin-bottom:1em;
								}
								.cat {
									background-color:var(--color_sub2);
									color:var(--color_white);
									font-size:1.3rem;
									display:block;
									max-width:15em;
									padding:.5em 1em;
								}
							}
						}
					}
					&.single {
						& > .img {
							margin-bottom:90px;
							img {
								display:block;
								aspect-ratio:2;
								width:100%;
								object-fit:cover;
							}
						}
						.contbox {
							.titlebox {
								h2 {
									font-size:4.0rem;
								}
								p {
									opacity:.4;
									font-size:2.0rem;
									line-height:1;
								}
							}
							& > .wp-block-columns {
								margin-bottom:90px;
							}
							.wp-block-table {
								width:100%;
								border-collapse:collapse;
								th,td {
									border:1px solid #D7D7D7;
									line-height:1.5;
									padding: 1em;
									text-align:left;
									vertical-align:middle;
								}
								td:first-child {
									color:var(--color_white);
									background-color:var(--color_sub);
									font-weight:500;
									width:28%;
								}
								td {
									background-color:var(--color_white);
								}
							}
							.wp-block-image {
								&:has( + *) {
									margin-bottom:30px;
								}
							}
						}
						.related {
							display:grid;
							grid-template-columns:repeat(3,1fr);
							grid-column-gap:3%;
							li {
								a {
									background-color:var(--color_white);
									display:grid;
									grid-auto-rows:auto 1fr;
									height:100%;
									img {
										aspect-ratio:3/2;
									}
									h3 {
										font-weight:500;
										line-height:1.4;
										padding:.5em;
										align-self:center;
									}
								}
							}
						}
					}
				}
				#sidebar {
					background-color:var(--color_white);
					padding:20px 15px;
					dl {
						dt {
							font-size:1.5rem;
							font-weight:600;
							&::after {
								content:'';
								display:block;
								width:3em;
								height:3px;
								background-color:var(--color_sub2);
								margin:.66em 0 1em;
							}
						}
						dd {
							&:not(:last-child) {
								margin-bottom:30px;
							}
							.new {
								display:grid;
								grid-row-gap:10px;
								li {
									a {
										display:grid;
										grid-template-columns:25% 1fr;
										align-items:center;
										grid-column-gap:3%;
										img {
											aspect-ratio:4/3;
										}
										p {
											font-size:1.2rem;
											line-height:1.3;
											color:var(--color_def);
										}
									}
								}
							}
							.category {
								display:grid;
								grid-template-columns:repeat(2,1fr);
								grid-gap:5px;
								li {
									a {
										display:block;
										background-color:var(--color_sub);
										font-size:1.2rem;
										color:#FFFFFF;
										padding:.66em .5em;
										text-align:center;
										border-radius:4px;
									}
								}
							}
							.date {
								margin-bottom:30px;
								li {
									&::before {
										content:'・';
									}
									&:not(:last-child) {
										margin-bottom:1em;
										font-size:1.5rem;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}


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

}

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

	#results {
		.wrap {
			.contents {
				&.contents_column {
					grid-column-gap:20px;
					.contents_wrap {
						h2 {
							font-size:2.6rem;
							margin-bottom:.66em;
						}
						.results_list {
							li {
								padding:15px;
								.detail {
									h3 {
										font-size:1.6rem;
									}
								}
							}
						}
						&.single {
							& > .img {
								margin-bottom:60px;
							}
							.contbox {
								.titlebox {
									h2 {
										font-size:3.0rem;
									}
									p {
										font-size:1.8rem;
									}
								}
								& > .wp-block-columns {
									margin-bottom:60px;
								}
							}
							.related {
								li {
									a {
										h3 {
											font-size:1.4rem;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){
    
	#results {
		.wrap {
			.contents {
				&.contents_column {
					grid-template-columns:1fr;
					grid-row-gap:30px;
					.contents_wrap {
						h2 {
							font-size:2.0rem;
						}
						.results_list {
							grid-row-gap:15px;
							li {
								grid-template-columns:min(25%,75px) 1fr;
								padding:10px;
								grid-column-gap:10px;
								.img {
									img {
										aspect-ratio:1;
									}
								}
								.detail {
									h3 {
										font-size:1.5rem;
										margin-bottom:.66em;
									}
									.cat {
										font-size:1.2rem;
										max-width:10em;
										text-align:center;
									}
								}
							}
						}
						&.single {
							& > .img {
								margin-bottom:40px;
							}
							.contbox {
								.titlebox {
									h2 {
										font-size:2.4rem;
									}
									p {
										font-size:1.4rem;
									}
								}
								& > .wp-block-columns {
									margin-bottom:50px;
								}
								.wp-block-table {
									th,td {
										font-size:1.4rem;
										padding:.66em;
									}
									td:first-child {
										width:7em;
									}
								}
							}
							.related {
								margin-bottom:30px;
								li {
									a {
										h3 {
											font-size:1.3rem;
										}
									}
								}
							}
						}
					}
					#sidebar {
						max-width:400px;
						margin:0 auto;
					}
				}
			}
		}
	}
    
}