@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 {
					.newslist {
						dl {
							display:grid;
							grid-template-columns:7em 7em 1fr;
							align-items: center;
							padding:1.5em 0;
							border-bottom:2px dotted #cccccc;
							dt {
								line-height:1.5;
							}
							.cat {
								a {
									background-color:#cccccc;
									color:#FFFFFF;
									font-family: "M PLUS 1p", sans-serif;
									font-size:.8em;
									padding:.2em .8em;
									border-radius:4px;
								}
							}
						}
					}
				}
			}
		}
	}
	&.single {
		.wrap {
			.contents {
				h2 {
					margin-bottom:1em;
				}
				.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: 90px;
					.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);
					}
					& + .btn {
						grid-template-columns:.8em 1fr;
						padding-right:1.5em;
						margin:0 auto;
						img {
							transform:rotate(180deg);
						}
					}
				}
			}
		}
	}
}

#sidebar {
	.searchwrap {
		margin-bottom:30px;
		form {
			display:grid;
			grid-template-columns:calc(100% - 45px) 40px;
			grid-column-gap:5px;
			position:relative;
			input {
				&[type="text"] {
					border:none;
					font-size:16px;
					box-shadow:0 2px 3px rgba(0,0,0,.15);
					height:40px;
					padding:.33em .5em;
					border-radius:8px;
					border:2px solid #EFEFEF;
				}
				&[type="submit"] {
					border:none;
					padding:0;
					height:40px;
					background-color:var(--color_main);
					color:var(--color_main);
					border-radius:50%;
				}
			}
			img {
				position:absolute;
				top:10px;
				right:10px;
				z-index:99;
				width:20px;
				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 1em;
			}
		}
		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;
						border-radius:4px;
					}
				}
			}
			.date {
				margin-bottom:30px;
				li {
					&::before {
						content:'・';
					}
					&:not(:last-child) {
						margin-bottom:1em;
						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;
				max-width:100%;
				border-radius:6px;
				grid-template-columns:1fr;
				background:var(--color_main);
			}
		}
	}
}

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

}

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

	#news {
		.wrap {
			.contents {
				.contents_wrap {
					.contents_inner {
						.newslist {
							dl {
								grid-template-columns:7em 1fr;
								grid-row-gap:1em;
								dt {
									grid-area:2/1/3/3;
								}
							}
						}
					}
				}
			}
		}
		&.single {
			.wrap {
				.contents {
					h2 {
						font-size:2.2rem;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){
    
	#news {
		.wrap {
			.contents {
				.contents_wrap {
					grid-template-columns:1fr;
					grid-row-gap:530px;
					.contents_inner {
						.newslist {
							dl {
								padding:1em 0;
								font-size:1.4rem;
							}
						}
					}
				}
			}
		}
		&.single {
			.wrap {
				.contents {
					h2 {
						font-size:1.8rem;
						line-height:1.33;
					}
					.info {
						font-size:1.4rem;
						margin-bottom:30px;
						.cat {
							a {
								font-size:1.2rem;
							}
						}
					}
					.contbox {
						margin-bottom: 45px;
						.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;
	}
    
}