.blur { font-weight: normal; }


@font-face {
  font-family: 'aoyagireishosimo';
  src: url('../common/font/aoyagireisyosimo_otf_2_01.otf') format('opentype');
  font-display: swap;
}
.IndexPage,
.TextPage .ImagePicture figcaption.sp_caption,
.TextPage .sentence, .TextPage .article_foot
{ font-family: 'aoyagireishosimo'; }

.TANKA .Spring .HomePie, .TANKA .Spring h1.PageTitle, .TANKA .Spring .CircleIcon,
#SpringList h2
{ background-color: #d474b6; }
.TANKA .Summer .HomePie, .TANKA .Summer h1.PageTitle, .TANKA .Summer .CircleIcon,
#SummerList h2
{ background-color: #709de0; }
.TANKA .Autumn .HomePie, .TANKA .Autumn h1.PageTitle, .TANKA .Autumn .CircleIcon,
#AutumnList h2
{ background-color: #bf861f; }
.TANKA .Winter .HomePie, .TANKA .Winter h1.PageTitle, .TANKA .Winter .CircleIcon,
#WinterList h2
{ background-color: #999; }
.TANKA .Etc .HomePie, .TANKA .Etc h1.PageTitle, .TANKA .Etc .CircleIcon,
#EtcList h2
{ background-color: #b0cf53; }


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.TANKA #contents_body {
	background: url("images/img_contents_background.jpg") no-repeat;
	background-size: cover;
}
	.TANKA article {
		text-align: center;
	}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.TopImageWrap {
    width: 100%;
    margin: 0 auto 50px;
    display: grid;
    grid-template-columns: 40% 40% 20%;
    grid-template-rows: 50% 50%;
}
.TopImage {
	overflow: hidden;
	position: relative;
}
.TopImage.spring { grid-column: 1; grid-row: 1; }
.TopImage.summer { grid-column: 2; grid-row: 1; }
.TopImage.autumn { grid-column: 1; grid-row: 2; }
.TopImage.winter { grid-column: 2; grid-row: 2; }
.TopImage.etc { grid-column: 3; grid-row: 1 / 3; }

.TopImage a {
	display: block;
	width: 100%;
	height: 100%;
}
	.TopImage a img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
		.TopImage.etc a img {
			width: auto;
		    left: 70%;
		}

.TopImage span {/* 春夏秋冬 */
	line-height: 1;
	padding: 15px;
	color: #fdfdfd;
	background-color: rgba(0,0,0,0.4);
	position: absolute;
}
.TopImage.spring span { right: 0; bottom: 0; }
.TopImage.summer span { left: 0; bottom: 0; }
.TopImage.autumn span { right: 0; top: 0; }
.TopImage.winter span { left: 0; top: 0; }
.TopImage.etc span {
    width: 100%;
	right: 0; bottom: 0;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.List {
	padding-top: 50px;
}
.List h2 {
    line-height: 1.4;
	border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
}
.List ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 10px;
}
.List ul li {
	list-style: none;
    width: 100%;
}

.List ul li a {
	display: block;
	line-height: 1.4;
	font-weight:bold;
	color: #333;
	/*background-color: #ffffec;紙のような薄い黄色*/
	border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
}
.List#SpringList a { border: solid 10px #d474b6; }
.List#SummerList a { border: solid 10px #709de0; }
.List#AutumnList a { border: solid 10px #bf861f; }
.List#WinterList a { border: solid 10px #999; }
.List#EtcList a { border: solid 10px #b0cf53; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.TextPage .sentence {
    padding-top: 30px;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 10px;
}
	.TextPage .text {
		flex-direction: row-reverse;
		justify-content: center;
	}

	.sentence .brush_illustration {
	    width: 20%;
		display: flex;
	    align-items: flex-end;
	}
	.brush_illustration img {
		width: 100%;
		height: auto;
	}
	.sentence h2, .sentence p {
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		white-space: nowrap;
		font-weight: bold;
		text-align: left;
	}

.TextPage figure.ImagePicture {
	margin: 40px auto;
}
	figure.ImagePicture.paragraph1 {
		margin: 40px auto 10px;
	}
	figure.ImagePicture.paragraph2 {
		margin: 10px auto 40px;
	}

.ImagePicture img {
	width: 100%;
	height: auto;
}
.ImagePicture figcaption {
	margin-top: 10px;
}
.ImagePicture figcaption.sp_caption/* 地元の力士〜… */ {
	font-weight: bold;
}

.TextPage .article_foot {
	line-height: 1;
	font-weight: bold;
	width: 100%;
	display: block;
}
.article_foot a { color: #333; }

.article_foot .footpath {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: 100%;
}
	.footpath .next { text-align: left; }
	.footpath .ToIndex {  }
	.footpath .prev { text-align: right; }

.article_foot a.ToTop {
	display: inline-block;
	margin: 30px auto;
	padding: 1.25% 2.5%;
	border: solid 10px #b0cf53;
	border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( Z-INDEX指定 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	.TopImage span {/* 春夏秋冬 */
		font-size: clamp(0.625rem, 15vw, 3.75rem);/* 60px */
	}
		.TopImage.etc span {/* その他 */
			font-size: clamp(0.625rem, 10vw, 2.5rem);/* 40px */
		}

	.List h2, .List ul li a {/* IndexPageリスト */
		font-size: 3rem;/* 48px */
	}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.sentence h2, .sentence p,
	.ImagePicture figcaption.sp_caption/* 地元の力士〜… */ {
		font-size: clamp(0.625rem, 9vw, 3.75rem);
	}
		.ImagePicture figcaption {
			font-size: 1.125rem; /* 18px */
		}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.TextPage .article_foot {
		font-size: clamp(0.625rem, 6.5vw, 40px);/*  */
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (orientation: landscape) {

	.TextPage figure.ImagePicture {
		width: 90%;
	}

}

/*----------------------------------------------------------------------------------*/

@media screen and (orientation: portrait) {

	.TextPage figure.ImagePicture {
		width: 100%;
	}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */

	.TopImageWrap {
	    margin: 0 auto 0px;
	    grid-template-columns: repeat(4, 25%);
	    grid-template-rows: repeat(2, 200px) 100px;
	}
	.TopImage.spring { grid-column: 1/3; grid-row: 1; }
	.TopImage.summer { grid-column: 3/5; grid-row: 1; }
	.TopImage.autumn { grid-column: 1/3; grid-row: 2; }
	.TopImage.winter { grid-column: 3/5; grid-row: 2; }
	.TopImage.etc { grid-column: 2/4; grid-row: 3; }

		.TopImage.etc a img {
			width: 100%;
			height: auto;
			top: 40%;
			left: 50%;
		}
		.TopImage.etc span {
		    width: auto;
		    right: 0;
		    bottom: 0;
		}

/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {


/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */



/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

	.sentence h2, .sentence p,
	.ImagePicture figcaption.sp_caption/* 地元の力士〜… */ {
	    font-size: 6vw;
	}

} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */


/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {

	.TopImageWrap {
	    margin: 0 auto 0px;
	    grid-template-columns: repeat(4, 25%);
	    grid-template-rows: repeat(2, 200px) 100px;
	}
	.TopImage.spring { grid-column: 1/3; grid-row: 1; }
	.TopImage.summer { grid-column: 3/5; grid-row: 1; }
	.TopImage.autumn { grid-column: 1/3; grid-row: 2; }
	.TopImage.winter { grid-column: 3/5; grid-row: 2; }
	.TopImage.etc { grid-column: 2/4; grid-row: 3; }

		.TopImage.etc a img {
			width: 100%;
			height: auto;
			top: 40%;
			left: 50%;
		}
		.TopImage.etc span {
		    width: auto;
		    right: 0;
		    bottom: 0;
		}

	.List ul {
	    grid-template-columns: 100%;
	}

		.sentence .brush_illustration {
		    width: 30%;
		}



} @media screen and (width <= 480px) and (orientation: portrait) {

	.TopImage.etc { grid-column: 1/5; grid-row: 3; }

} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */

	.TopImageWrap {
	    display: block;
	}
	.TopImage {
	    height: 180px;
	}
		.TopImage.etc {  height: 90px; }

} @media screen and (width <= 320px) and (orientation: portrait) {

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: hover) {

	/* ホバー時のアクション */
	.TopImage a img, .TopImage span, .TopImageWrap a:hover span {
		transition: 0.5s;
	}
	.TopImage a:hover span {
		color: black;
		background:rgb(255,255,255,0.7);
	}
	.TopImage a:hover img {
		transform: translate(-50%, -50%) scale(1.1);
	}

	.List a:hover, .article_foot a.ToTop:hover { opacity: 0.7; }
	.article_foot a.ToTop:hover { color: firebrick;}

	.List#SpringList a:hover, .List#SpringList a:visited:hover,
	.Spring .article_foot .footpath a:hover, .Spring .article_foot .footpath a:visited:hover
	{ color: #d474b6; }
	.List#SummerList a:hover, .List#SummerList a:visited:hover,
	.Summer .article_foot .footpath a:hover, .Summer .article_foot .footpath a:visited:hover
	{ color: #709de0; }
	.List#AutumnList a:hover, .List#AutumnList a:visited:hover,
	.Autumn .article_foot .footpath a:hover, .Autumn .article_foot .footpath a:visited:hover
	{ color: #bf861f; }
	.List#WinterList a:hover, .List#WinterList a:visited:hover,
	.Winter .article_foot .footpath a:hover, .Winter .article_foot .footpath a:visited:hover
	{ color: #999; }
	.List#EtcList a:hover, .List#EtcList a:visited:hover,
	.Etc .article_foot .footpath a:hover, .Etc .article_foot .footpath a:visited:hover
	{ color: #b0cf53; }

}

/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

	.TopImage a img, .TopImage span, .TopImageWrap a:active span {
		transition: 0.5s;
	}
	.TopImage a:active span {
		color: black;
		background:rgb(255,255,255,0.7);
	}
	.TopImage a:active img {
		transform: translate(-50%, -50%) scale(1.1);
	}

	.List a:active, .article_foot a.ToTop:active { opacity: 0.7; }
	.article_foot a.ToTop:active { color: firebrick;}

	.List#SpringList a:active, .List#SpringList a:visited:active,
	.Spring .article_foot .footpath a:active, .Spring .article_foot .footpath a:visited:active
	{ color: #d474b6; }
	.List#SummerList a:active, .List#SummerList a:visited:active,
	.Summer .article_foot .footpath a:active, .Summer .article_foot .footpath a:visited:active
	{ color: #709de0; }
	.List#AutumnList a:active, .List#AutumnList a:visited:active,
	.Autumn .article_foot .footpath a:active, .Autumn .article_foot .footpath a:visited:active
	{ color: #bf861f; }
	.List#WinterList a:active, .List#WinterList a:visited:active,
	.Winter .article_foot .footpath a:active, .Winter .article_foot .footpath a:visited:active
	{ color: #999; }
	.List#EtcList a:active, .List#EtcList a:visited:active,
	.Etc .article_foot .footpath a:active, .Etc .article_foot .footpath a:visited:active
	{ color: #b0cf53; }

}