@charset "utf-8";

#news {
	.wrap {
		.contents {
			.searchresults {
				margin-bottom: 1em;
			}
			.contents_wrap {
				display:grid;
				grid-template-columns:1fr 220px;
				grid-column-gap:50px;
				align-items:start;
				.contents_inner {
					& > ul {
						display:grid;
						grid-row-gap:30px;
						li {
							& > a {
								display:grid;
								grid-template-columns:25% 1fr;
								grid-column-gap:3%;
								align-items:center;
								padding:20px;
								box-shadow:0 3px 6px rgba(0,0,0,.15);
								.img {
									img {
										display:block;
										width:100%;
										aspect-ratio:1.5;
										object-fit:cover;
									}
								}
								.detail {
									h3 {
										font-size:1.8rem;
										line-height:1.5;
										margin-bottom:.5em;
									}
									.cat {
										display:flex;
										flex-wrap:wrap;
										gap:5px;
										object {
											a {
												display:block;
												background-color:var(--color_main);
												font-size:1.3rem;
												color:#FFFFFF;
												padding:.5em 1em;
											}
										}
									}
									.date {
										font-size:1.4rem;
										text-align:right;
										display:block;
										margin-top:1em;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	&.single {
		.wrap {
			.contents {
				p {
					&.date {
						line-height:1;
						font-size:1.8rem;
						&::after {
							content:'';
							display:block;
							width:3em;
							height:3px;
							background-color:var(--color_main);
							margin:.66em 0 1em;
						}
					}
				}
				.contbox {
					margin-bottom: 50px;
					.aligncenter {
						display: block;
						margin-right: auto;
						margin-left: auto;
					}
					.alignright {
						float: right;
						margin-bottom: 20px;
						margin-left: 20px;
					}
					.alignleft {
						float: left;
						margin-right: 20px;
						margin-bottom: 20px;
					}
					.wp-caption,
					[class*='wp-image'] {
						display: block;
						max-width: 100% !important;
						margin-top: 1.5em;
						text-align: center;
					}
					.wp-caption-text {
						margin-top: 0;
					}
					ul {
						list-style: disc;
					}
					ol {
						list-style: decimal;
					}
					ul,ol {
						list-style-position: inside;
						font: inherit;
						li {
							line-height:1.6;
						}
					}
					a {
						text-decoration: underline;
						color:var(--color_main);
					}
				}
			}
		}
	}
}

#sidebar {
	.searchwrap {
		margin-bottom:30px;
		form {
			display:grid;
			grid-template-columns:calc(100% - 50px) 40px;
			grid-column-gap:10px;
			position:relative;
			input {
				&[type="text"] {
					border:none;
					font-size:16px;
					box-shadow:0 3px 6px rgba(0,0,0,.15);
					height:40px;
					padding:.33em .5em;
				}
				&[type="submit"] {
					border:none;
					padding:0;
					background-color:var(--color_main);
					color:var(--color_main);
				}
			}
			img {
				position:absolute;
				top:8px;
				right:8px;
				z-index:99;
				width:24px;
				pointer-events: none;
			}
		}
	}
	dl {
		dt {
			font-size:1.5rem;
			font-weight:600;
			&::after {
				content:'';
				display:block;
				width:3em;
				height:3px;
				background-color:var(--color_main);
				margin:.66em 0;
			}
		}
		dd {
			&:not(:last-child) {
				margin-bottom:30px;
			}
			.category {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-gap:5px;
				li {
					a {
						display:block;
						background-color:var(--color_main);
						font-size:1.2rem;
						color:#FFFFFF;
						padding:.66em .5em;
						text-align:center;
					}
				}
			}
			.date {
				margin-bottom:30px;
				li {
					&:not(:last-child) {
						margin-bottom:.5em;
						font-size:1.5rem;
					}
				}
			}
			.popular-posts {
				display:grid;
				grid-row-gap:10px;
				li {
					display:grid;
					grid-template-columns:80px 1fr;
					align-items:center;
					grid-column-gap:5%;
					a {
						&:first-child {
							img {
								margin:0;
							}
						}
						&:last-child {
							.title {
								font-size:1.3rem;
								line-height:1.3;
								display:block;
							}
							.date {
								font-size:1.2rem;
								text-align:right;
								display:block;
								margin:0;
							}
						}
					}
				}
			}
			.btn {
				height:40px;
				font-size:1.5rem;
			}
		}
	}
}

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

}

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

	#news {
		.wrap {
			.contents {
				.contents_wrap {
					grid-template-columns:1fr 200px;
					grid-column-gap:30px;
					.contents_inner {
						& > ul {
							li {
								& > a {
									grid-template-columns:30% 1fr;
									.detail {
										h3 {
											font-size:1.6rem;
										}
										.cat {
											object {
												a {
													font-size:1.2rem;
												}
											}
										}
										.date {
											font-size:1.3rem;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){
    
	#news {
		.wrap {
			.contents {
				.contents_wrap {
					grid-template-columns:1fr;
					grid-row-gap:30px;
					.contents_inner {
						& > ul {
							grid-row-gap:20px;
							li {
								& > a {
									grid-template-columns:25% 1fr;
									grid-column-gap:5%;
									grid-row-gap:10px;
									padding:15px;
									.img {
										img {
											aspect-ratio:1;
										}
									}
									.detail {
										display:contents;
										h3 {
											font-size:1.5rem;
											line-height:1.5;
											margin-bottom:0;
										}
										.cat {
											grid-area:2/1/3/3;
											object {
												a {
													font-size:1.2rem;
												}
											}
										}
										.date {
											grid-area:3/1/4/3;
											margin-top:0;
										}
									}
								}
							}
						}
					}
				}
			}
		}
		&.single {
			.wrap {
				.contents {
					p {
						&.date {
							font-size:1.5rem;
						}
					}
					.contbox {
						.alignright {
							display: block;
							margin-right: auto;
							margin-left: auto;
						}
						.alignleft {
							display: block;
							margin-right: auto;
							margin-left: auto;
						}
					}
				}
			}
		}
	}
	
	#sidebar {
		max-width:350px;
		margin:0 auto;
	}
    
}