@charset "utf-8";
/*	◆ CSS Document ◆
ベースになるCSSコードや、:rootで変数にしたものはlegacy-layout.cssにあります。
こちらは主にヘッダー・フッター以外の項目用のCSSです。 */

/*--------------------------------------------------
	MV
--------------------------------------------------*/
#mv {
	width: 100%;
	height: 70dvh;
	display: grid;
	place-items: center;
	background-image:
	url(../images/top-left.png),url(../images/top-right.png),
		linear-gradient(-20deg, var(--color01) 0%, var(--color02) 100%);
	background-size: contain;
	background-position: left,right;
	background-repeat: no-repeat, no-repeat;
	animation: Grad 10s infinite alternate;
}
#mv h1{
	font-size: 17.5rem;
	color: rgba(255, 255, 255, 1);
	font-family: "Fugaz One", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: .2;
	text-align: center;
}
#mv h1 span{
	font-size: 1.25rem;
	font-family: "Fugaz One", sans-serif;
	font-weight: 400;
	font-style: normal;}

@keyframes Grad {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}

	100% {
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
}

@media (max-width:768px) {
	#mv{
		height: 25dvh;
		background-image: url(../images/top.png),
			linear-gradient(-20deg, var(--color01) 0%, var(--color02) 100%);
		background-size: contain;
		background-position: bottom;
	}
	#mv h1{
		font-size: 6.25rem;
	}
}


/*--------------------------------------------------
	Main
--------------------------------------------------*/
main{
	margin-top: 9.375rem;
}

@media screen and (min-width:769px) and ( max-width:1023px){

}
@media (max-width:768px) {
}

	/*----------------------------------------------
		Main - front
	----------------------------------------------*/
	#front_list,
	#news{
		margin-top: 5rem;
	}
	#front_list .flex_between{
		align-items: flex-start;
	}
	#front_list .front_contents,
	#news .news_list{
		border: 4px var(--black) double;
		padding: 1.5625rem;
		gap: 1.5625rem;
	}
		#news .news_list{
			padding-inline: 2.5rem;
			align-items: center;
		}
		#front_list .front_contents div{
			width: calc(100% / 3);
			text-align: center;
		}
		#front_list h2,
		#news h2{
			font-size: 2rem;
			font-family: "Fugaz One", sans-serif;
			font-weight: 400;
			font-style: normal;
			margin-block: 1.125rem;
		}
			#news h2{
				border-right: 1px solid var(--black);
				padding-block: 1.875rem;
				padding-right: 1.875rem;
			}
			#news .date{
				font-family: "Fugaz One", sans-serif;
				font-weight: 400;
				font-style: normal;
			}
		#front_list p{
			font-size: 1rem;
		}
			#front_list h2:first-of-type{
				margin-top: 0;
			}
		#front_list .front_about p{
			font-size: 1.125rem;
		}
		#front_list a {
			color: var(--color01);
			display: inline-flex;
			align-items: center;
			gap: 0.625rem;
		}

		#front_list a:hover,
		#front_list a:focus {
			color: var(--color01);
			outline: none;
		}
		#front_list a::before{
			content: "›";
			font-size: .9em;
			opacity: .5;
			line-height: 1;
		}
		#front_list div.flex_column_center{
			width: 100% !important;
		}

	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
		#news .news_list{
			flex-direction: column;
		}
		#news h2{
			border-right: 0;
			border-bottom: 1px solid var(--black);
			padding-left: 1.875rem;
		}
		.front_contents.flex_between{
			flex-direction: column;
		}
		#front_list .front_contents div{
			width: 100%;
			text-align: center;
		}

	}
	


	/*----------------------------------------------
		Main - single & archive
	----------------------------------------------*/
	.archive_flex li{
		border-bottom: var(--black) 4px double;
		margin-block: 1.5625rem;
	}
	time.date{
		font-size: 1rem;
		font-family: "Fugaz One", sans-serif;
		font-weight: 400;
		font-style: normal;
	}
	span.cat{
		margin-left: 0.9375rem;
		font-size: 1rem;
		background: var(--color01);
		color: var(--white);
		padding-inline: 0.625rem;
	}
		span.cat a{
			color: var(--white);
		}
	.caption_ttl{
		font-size: 1.75rem;
		margin-block: 0.625rem 0.3125rem;
	}
	figcaption{
		text-align: center;
		font-size: 0.875rem;
	}
	.mousou{
		background: #eee;
		line-height: 1.2;
		padding: 1.25rem;
		margin-block: 1.5625rem 3.125rem;
	}
		.mousou p{
			font-size: 0.875rem;
		}
	.flex_reverse:has(aside){
		justify-content: flex-end;
		align-items: flex-start;
	}
	/* 目次 */
	.right{
		position: sticky;
		top: 7.5rem;
		width: 25rem;
	}
	#toc-widget-3 {
		background: var(--white);
	}
		#toc-widget-3 h2.widgettitle{
			font-family: "Fugaz One", sans-serif;
			font-weight: 400;
			font-style: normal;
		}
		#toc-widget-3 ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
			#toc-widget-3 li {
				border-left: solid 1px #ccc;
				padding-left: 1em;
				position: relative;
				box-sizing: border-box;
			}
		#toc-widget-3 .toc {
			cursor: pointer;
			width: 100%;
		}
			#toc-widget-3 .toc a {
				color: var(--color01);
				text-decoration: none;
				display: block;
				padding: 0.9375rem 0;
			}
			#toc-widget-3 .toc:hover {
				background: #eee;
			}
		#toc-widget-3 .current,
		#toc-widget-3 a.current {
			border-bottom: var(--color01) 6px double;
			font-weight: bold;
		}
		#toc-widget-3 .toc_widget_list {
			max-height: 70dvh;
			position: relative;
			overflow: auto;
		}
	.left {
		width: calc(100% - 25rem);
		margin-right: 3.125rem;
		line-height: 1.5;
		font-size: clamp(0.625rem, 2.5vw, 1.25rem);
	}
		.left h2 {
			font-size: 2rem;
			font-weight: bold;
			margin-block: 4.6875rem 1.5625rem;
			padding-bottom: 0.9375rem;
			border-bottom: var(--color01) 2px solid;
			border-image: linear-gradient(to right, var(--color02) 0%, var(--color01) 100%) 1;
		}
		.left h3{
			font-size: 1.5rem;
			font-weight: bold;
			margin-top: 3.125rem;

		}
	.left h2, .left h3, .left h4, .left h5, .left h6 {
		scroll-margin-top: 6.25rem;
	}
	/* 目次ボックス内のメタ部 */
	#toc-widget-3 .toc-meta {
		margin: 1.5625rem 0;
		font-size: 1rem;
	}

	#toc-widget-3 .toc-meta__label {
		color: #666;
		margin-right: 0.625rem;
	}

	#toc-widget-3 .toc-meta a {
		text-decoration: none;
	}

	#toc-widget-3 .toc-meta a:hover {
		text-decoration: underline;
	}

	.single_nav{
		gap: 5rem;
		padding-block: 5rem;
	}
	.page-numbers{
		display: flex;
		justify-content: center;
		gap: 1.25rem;
	}
		.page-numbers li{
			background: var(--white);
			border: 4px var(--black) double;
			color: var(--black);
			padding: 0.625rem;
		}
		.page-numbers li a{
			color: var(--black);
		}
		.page-numbers li:hover:has(a){
			background: var(--color01);
			border: 4px var(--white) double;
		}
			.page-numbers li:hover a {
				color: var(--white);
			}

		.wp-block-list li{
			margin-block: 1.5625rem;
		}
			.wp-block-list li::before{
				content: "・";
				margin-right: 0.3125rem;
				font-weight: bold;
			}
			.wp-block-list li strong{
				font-weight: bold;
			}


	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
		#archive aside{
			display: block;
		}
		#archive .flex_reverse{
			flex-direction: column-reverse;
		}
		aside{
			display: none;
		}
		.left {
			width: 100%;
			margin-right: 0;
			font-size: 1.25rem;
		}
	}
	

	/*----------------------------------------------
		Main - graffiti
	----------------------------------------------*/
		/* ==== サムネイルグリッド ==== */
		.tcf-graffiti__grid {
			list-style: none;
			margin: 5rem 0 0;
			padding: 0;
			display: grid;
			gap: 12px;
			grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		}

		.tcf-graffiti__cell {
			aspect-ratio: 1/1;
			overflow: hidden;
			border-radius: 6px;
		}

		.tcf-graffiti__link {
			display: block;
			width: 100%;
			height: 100%;
		}

		.tcf-graffiti__thumb {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform .2s ease;
		}

		.tcf-graffiti__link:hover .tcf-graffiti__thumb {
			transform: scale(1.03);
		}

		/* ==== CSSモーダル（:target） ==== */
		.tcf-modal {
			position: fixed;
			inset: 0;
			display: none;
			z-index: 9999;
		}

		.tcf-modal:target {
			display: block;
		}

		.tcf-modal__bg {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, .85);
			display: block;
		}

		.tcf-modal__box {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 3.125rem;
			top: 6.25rem;
			overflow-y: auto;
		}

		.tcf-modal__inner {
			max-width: min(92vw, 1200px);
			max-height: 92vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 3.125rem;
		}

		.tcf-graffiti__img {
			max-width: 100%;
			max-height: 84vh;
			height: auto;
			width: auto;
			box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
			border-radius: 8px;
			background: var(--white);
		}

		.tcf-modal__cap {
			color: #e5e5e5;
			font-size: 1rem;
			margin: 0;
			padding: 0 0 3.125rem;
			text-align: center;
		}

		.tcf-modal__dl {
			margin: 3.125rem 0 0;
			font-size: 1rem;
		}

		.tcf-modal__dl a {
			color: #cfe2ff;
			text-decoration: underline;
		}

		/* 閉じるボタン */
		.tcf-modal__close {
			position: absolute;
			top: 1.875rem;
			right: 3.125rem;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: #fff;
			border: none;
			box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
			font-size: 22px;
			line-height: 36px;
			cursor: pointer;
		}
		/* 画像を閉じるリンクに */
		.tcf-modal__imglink {
			display: inline-block;
			text-decoration: none;
			cursor: default;
		}

		.tcf-modal__imglink img {
			/* 既存 .tcf-graffiti__img の見た目を継承 */
			display: block;
		}
		.graffiti h1{
			margin-block: 4.6875rem 1.5625rem;
			padding-bottom: 0.9375rem;
			border-bottom: var(--color01) 2px solid;
			border-image: linear-gradient(to right, var(--color02) 0%, var(--color01) 100%) 1;
		}
		.graffiti_link{
			margin-block: 3.125rem;
		}
		.graffiti_link h2{
			margin-block: 4.6875rem 1.5625rem;
			padding-bottom: 0.9375rem;
			border-bottom: var(--color01) 2px solid;
			border-image: linear-gradient(to right, var(--color02) 0%, var(--color01) 100%) 1;
		}
		.graffiti_link ul{
			list-style-type: circle;
			list-style-position: inside;
		}
			.graffiti_link ul li{
				line-height: 1.7;
			}


		@media (hover:hover) {
			.tcf-modal__close:hover {
				background: #f0f0f0;
			}
		}


	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
	}
	
		
	
	/*----------------------------------------------
		Main - section03
	----------------------------------------------*/

	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
	}