@charset "utf-8";

#voice {
	.wrap {
		.contents {
			&.contents_column {
				display:grid;
				/* width:100%; */
				grid-template-columns:1fr 300px;
				grid-column-gap:50px;
				align-items:start;
				padding:60px 0 90px;
				.contents_wrap {
					&.archive {
						h2 {
							font-size:3.0rem;
							font-weight:500;
							line-height:1.5;
							font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
							margin-bottom:1em;
							color:var(--color_main);
						}
						.voice_list {
							display:grid;
							grid-row-gap:30px;
							li {
								a {
									display:grid;
									grid-template-columns:25% 1fr;
									grid-column-gap:5%;
									padding:1.5em;
									box-shadow:0 3px 6px rgba(0,0,0,.3);
									.img {
										img {
											display:block;
											aspect-ratio:3/2;
											object-fit:cover;
											border-radius:.33em;
										}
									}
									.detail {
										h3 {
											font-size:2.0rem;
											line-height:1.5;
											font-weight:500;
											margin-bottom:.33em;
										}
										.cat {
											font-size:1.3rem;
											display:flex;
											flex-wrap:wrap;
											gap:.5em;
											margin-bottom:.66em;
											li {
												background-color:var(--color_main);
												color:var(--color_white);
												padding:.5em 1em;
												border-radius:4px;
											}
										}
										p {
											line-height:1.5;
										}
										.date {
											display:block;
											text-align:right;
											font-size:1.4rem;
											margin-top:1em;
										}
									}
								}
							}
						}
					}
					&.single {
						& > .wp-block-group {
							&:first-child {
								padding-top:0;
							}
							.wp-block-group__inner-container {
								width:100%;
							}
						}
						h2 {
							font-size:2.2rem;
							font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
							color:var(--color_main);
							&:has( + .choice) ,&:has( + .related) {
								margin-bottom:2em;
							}
						}
						.choice {
							margin-bottom:50px;
							&.temple {
								background-color:var(--color_bg4);
								border-radius:1em;
								padding:1.5em;
								display:grid;
								grid-template-columns:30% 1fr;
								grid-column-gap:5%;
								.img {
									img {
										display:block;
										aspect-ratio:4/3;
										object-fit:cover;
										border-radius:.5em;
									}
								}
								.detail {
									.cat {
										font-size:1.4rem;
										color:#999999;
										display:block;
										line-height:1.5;
										margin-bottom:.33em;
									}
								}
							}
							&.contact_temple {
								display:grid;
								grid-template-columns:repeat(2,1fr);
								grid-column-gap:4%;
								.item {
									background-color:var(--color_bg4);
									border-radius:1em;
									padding:1.5em;
								}
							}
							h4 {
								font-size:2.0rem;
								line-height:1.5;
								margin-bottom:.5em;
							}
							p {
								line-height:1.5;
								font-size:1.5rem;
							}
							.btn {
								font-size:1.5rem;
								background-color:var(--color_main);
								color:var(--color_white);
								display:inline-grid;
								grid-template-columns:auto .5em;
								align-items:center;
								grid-column-gap:.5em;
								border-radius:.33em;
								height:3em;
								padding:0 1.5em;
								margin-top:1.5em;
								&::after {
									content:'';
									aspect-ratio:1;
									border-right:3px solid var(--color_white);
									border-bottom:3px solid var(--color_white);
									transform:rotate(-45deg);
								}
							}
						}
						.related {
							display:grid;
							grid-template-columns:repeat(3,1fr);
							grid-column-gap:3%;
							li {
								a {
									background-color:var(--color_bg4);
									display:block;
									height:100%;
									border-radius:.5em;
									overflow:hidden;
									img {
										aspect-ratio:1.75;
										display:block;
										object-fit:cover;
									}
									.detail {
										padding:1em;
										.cat {
											display:flex;
											flex-wrap:wrap;
											gap:.5em;
											font-size:1.4rem;
											margin-bottom:.66em;
											li {
												background-color:var(--color_sub);
												color:var(--color_white);
												padding:.33em .66em;
												border-radius:4px;
											}
										}
										h4 {
											font-size:1.6rem;
											line-height:1.5;
											margin-bottom:.5em;
										}
										p {
											font-size:1.4rem;
											line-height:1.5;
										}
									}
								}
							}
						}
					}
				}
				#sidebar {
					form {
						display:grid;
						grid-template-columns:calc(100% - 3.33em) 3em;
						align-items:center;
						grid-column-gap:.33em;
						margin-bottom:2em;
						input[type="search"] {
							font-size:1.6rem;
							padding:.5em;
							border:1px solid #cccccc;
							border-radius:5px;
							&::placeholder {
								font-size:1.4rem;
							}
						}
						button {
							background-color:var(--color_main);
							border:none;
							display:grid;
							align-items:center;
							justify-content:center;
							grid-template-columns:50%;
							aspect-ratio:1;
							border-radius:5px;
						}
					}
					dl {
						dt {
							font-size:1.6rem;
							font-weight:600;
							border-bottom:1px solid #cccccc;
							padding-bottom:.66em;
							margin-bottom:1em;
						}
						dd {
							&:not(:last-child) {
								margin-bottom:30px;
							}
							.new {
								display:grid;
								grid-row-gap:10px;
								li {
									a {
										display:grid;
										grid-template-columns:20% 1fr;
										align-items:center;
										grid-gap:10px;
										img {
											aspect-ratio:1;
											border-radius:4px;
											object-fit:cover;
										}
										p {
											font-size:1.4rem;
											line-height:1.5;
										}
										.date {
											font-size:1.2rem;
										}
									}
								}
							}
							.date {
								margin-bottom:30px;
								li {
									&::before {
										content:'・';
										margin-right:.33em;
									}
									&:not(:last-child) {
										margin-bottom:1em;
										font-size:1.5rem;
									}
								}
							}
							.category {
								display:grid;
								grid-row-gap:.5em;
								margin-bottom:30px;
								li {
									a {
										display:inline-grid;
										align-items:center;
										grid-template-columns:.3em auto;
										grid-column-gap:.33em;
										&::before {
											content:'';
											aspect-ratio:1;
											border-right:1px solid #000000;
											border-bottom:1px solid #000000;
											transform: rotate(-45deg);
										}
									}
								}
							}
							.tag {
								display:flex;
								flex-wrap:wrap;
								gap:.5em;
								li {
									a {
										display:block;
										color:#666666;
										background-color:#EDE8E0;
										font-size:1.2rem;
										padding:.66em 1em;
										text-align:center;
										border-radius:4px;
										&::before {
											content:'#';
										}
									}
								}
							}
							.btn {
								background-color:var(--color_main);
								color:#FFFFFF;
								display:grid;
								font-size:1.5rem;
								height:3em;
								align-items:center;
								justify-content:center;
								border-radius:5px;
							}
						}
					}
				}
			}
		}
	}
}


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

}

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

	#voice {
		.wrap {
			.contents {
				&.contents_column {
					grid-template-columns:1fr 200px;
					grid-column-gap:30px;
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){
    
	#voice {
		.wrap {
			.contents {
				&.contents_column {
					grid-template-columns:1fr;
					grid-row-gap:40px;
					padding:0;
					.contents_wrap {
						&.archive {
							h2 {
								font-size:2.4rem;
							}
							.voice_list {
								grid-row-gap:20px;
								li {
									a {
										grid-template-columns:80px 1fr;
										grid-gap:10px 15px;
										padding:1em;
										.img {
											grid-area:1/1/3/2;
										}
										.detail {
											display:contents;
											.detail_inner {
												grid-area:3/1/4/3;
											}
											h3 {
												font-size:1.6rem;
												margin-bottom:.0;
											}
											.cat {
												margin-bottom:0;
												font-size:1.2rem;
											}
										}
									}
								}
							}
						}
						&.single {
							h2 {
								font-size:1.8rem;
								&:has( + .choice) ,&:has( + .related) {
									margin-bottom:1.5em;
								}
							}
							.choice {
								&.temple {
									grid-row-gap:15px;
									.detail {
										display:contents;
										.detail_inner {
											grid-area:2/1/3/3;
										}
									}
								}
								&.contact_temple {
									grid-template-columns:1fr;
									grid-row-gap:20px;
								}
							}
							.related {
								grid-template-columns:1fr;
								grid-row-gap:20px;
							}
						}
					}
				}
			}
		}
	}
    
}