@charset "utf-8";

.titlewrap {
	h1 {
		.txtclip {
			background: #F5C510;
			background: linear-gradient(to right bottom,#F5C510 0%, #FFED00 100%);
		}
		img {
			width:5em;
		}
	}
}

#news {
	.wrap {
		padding-top: 60px;
		.contents {
			.contents_wrap {
				display:grid;
				grid-template-columns:1fr 250px;
				grid-column-gap:30px;
				align-items:start;
				.contents_inner {
					h2 {
						font-size: 2.8rem;
						&::first-letter {
							color:#F7CB0E;
						}
					}
					.newslist {
						padding:30px 30px 60px;
						border-radius:10px;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
						dl {
							display:grid;
							grid-template-columns:1fr auto;
							align-items: center;
							grid-gap:.66em 1em;
							&:not(:last-child) {
								margin-bottom:50px;
							}
							dt {
								line-height:1.5;
								font-size:1.8rem;
								font-weight:600;
								grid-area:1/1/2/3;
							}
							.cat {
								a {
									background-color:#F7CB0E;
									color:#FFFFFF;
									font-family: "M PLUS 1p", sans-serif;
									font-size:.8em;
									padding:.2em .8em;
									border-radius:4px;
								}
							}
							.date {
								font-size:.9em;
							}
						}
					}
				}
			}
		}
	}
	&.single {
		.wrap {
			.contents {
				.contents_inner {
					border-radius:10px;
					box-shadow:0 3px 6px rgba(0,0,0,.15);
					overflow:hidden;
				}
				.ttl_box {
					background-color:#F7CB0E;
					padding:20px;
					h2 {
						font-size:1.8rem;
						color:#FFFFFF;
						&:first-letter {
							color:#FFFFFF;
						}
					}
					.info {
						display:grid;
						grid-template-columns:1fr auto;
						align-items:center;
						font-size:1.5rem;
						color:#FFFFFF;
						.cat {
							display:flex;
							flex-wrap:wrap;
							align-items:center;
							justify-content:flex-start;
							gap:5px;
							a {
								display:block;
								background-color:#FFFFFF;
								font-size:1.2rem;
								color:#F7CB0E;
								padding:.66em 2em;
								text-align:center;
								border-radius:4px;
							}
						}
						.date {
						}
					}
				}
				.contbox {
					padding:30px;
					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);
					}
					& + .btn {
						background-color:#F7CB0E;
						color:#FFFFFF;
						font-size:1.6rem;
						font-weight:600;
						display:grid;
						height:3em;
						width:15em;
						align-items:center;
						justify-content:center;
						border-radius:1.5em;
						margin:0 auto 50px;
					}
				}
			}
		}
	}
}

#sidebar {
	padding:20px 20px 60px;
	border-radius:10px;
	box-shadow:0 3px 6px rgba(0,0,0,.15);
	dl {
		dt {
			font-size:2.1rem;
			font-weight:500;
			&::after {
				content:'';
				display:block;
				width:6em;
				height:1px;
				background-color:#F7CB0E;
				margin:.33em 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:#F7CB0E;
						font-size:1.2rem;
						color:#FFFFFF;
						padding:.66em .5em;
						text-align:center;
						border-radius:2em;
					}
				}
			}
		}
	}
}

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

}

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

	#news {
		.wrap {
			padding-top: 45px;
			.contents {
				.contents_wrap {
					grid-template-columns:1fr 220px;
					.contents_inner {
						h2 {
							font-size: 2.4rem;
						}
						.newslist {
							dl {
								dt {
									font-size:1.6rem;
								}
							}
						}
					}
				}
			}
		}
		&.single {
			.wrap {
				.contents {
					.ttl_box {
						h2 {
							font-size:1.8rem;
						}
					}
					.contbox {
						padding:20px;
						margin-bottom: 30px;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){
    
	#news {
		.wrap {
			padding-top: 30px;
			.contents {
				.contents_wrap {
					grid-template-columns:1fr;
					grid-row-gap:30px;
					.contents_inner {
						h2 {
							font-size: 2.0rem;
						}
						.newslist {
							padding:20px 20px 50px;
							dl {
								display:flex;
								flex-wrap:wrap;
								
								&:not(:last-child) {
									margin-bottom:40px;
								}
								dt {
									font-size:1.4rem;
									width:100%;
								}
								.cat {
									a {
										font-size:1.2rem;
									}
								}
								.date {
									font-size:1.3rem;
									text-align:right;
									flex-grow:1;
								}
							}
						}
					}
				}
			}
		}
		&.single {
			.wrap {
				.contents {
					.ttl_box {
						padding:15px;
						h2 {
							font-size:1.5rem;
						}
						.info {
							display:flex;
							flex-wrap:wrap;
							gap:.5em;
							font-size:1.3rem;
							.cat {
								display:flex;
								flex-wrap:wrap;
								align-items:center;
								justify-content:flex-start;
								gap:5px;
								a {
									font-size:1.2rem;
									padding:.66em 1.5em;
								}
							}
							.date {
								flex-grow:1;
								text-align:right;
							}
						}
					}
					.contbox {
						padding:15px;
						margin-bottom:10px;
						.aligncenter {
							display: block;
							margin-right: auto;
							margin-left: auto;
						}
						.alignright {
							float: none;
							display: block;
							margin-right: auto;
							margin-left: auto;
						}
						.alignleft {
							float: none;
							display: block;
							margin-right: auto;
							margin-left: auto;
						}
						ul,ol {
							li {
								font-size:1.4rem;
							}
						}
						& + .btn {
							font-size:1.4rem;
							margin:0 auto 30px;
						}
					}
				}
			}
		}
	}
	
	#sidebar {
		width:100%;
		max-width:350px;
		margin:0 auto;
	}
    
}