#contents_body .explanation { display: none; }

@font-face {
  font-family: 'Noto Serif JP';
  src: url('../common/font/NotoSerifJP-SemiBold.otf') format('opentype');
  font-display: swap;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	一括切り替えボタン
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.TableSwitchAll {
    font-family: 'Noto Serif JP', serif;
	margin-bottom: 20px;
	display: flex;
	justify-content: left;
	align-items: center;
	gap: 10px 20px;
}
	.TableSwitchAll button {/* 一括切り替え */
		padding: 5px 10px;
		line-height: 1;
		cursor: pointer;
	}
	.TableSwitchAll span {/* おむね版 通常版 */
		line-height: 1;
		color: lightgray;
		text-decoration: none;
		display: inline-block;
		position: relative;
	 }
		.TableSwitchAll span.active {
			color: #333333;
		}

	.TableSwitchAll span:after {/* 下線 */
		content: '';
		width: 100%;
		height: 2px;
		position: absolute;
		bottom: -5px;
		left: 0;
		background: #333;
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .3s;
	}
		.TableSwitchAll span.active:after {
			transform-origin: left top;
			transform: scale(1, 1);
		}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	SWIPER
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

article .container {
	border: 1px solid #CCC;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	swiper tab-menu
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

/*
.swiper-button-next, .swiper-button-prev {
    position: fixed!important;
    top: 37%!important;
}
.swiper-button-next {
	right:20%!important;
}
.swiper-button-prev {
	left:20%!important;
}
*/

.tab-menu {
    font-family: 'Noto Serif JP', serif;
	width:100%;
	height: auto;
	cursor: grab;
	background: darkgray;
}
	.tab-menu:active, .tab-menu:active .swiper-slide,
	.tab-menu .swiper-slide a:active, .tab-menu .swiper-slide a:visited:active {
		cursor: grabbing;
	}

.tab-menu .swiper-slide {
	width: auto;
	aspect-ratio: 1 / 1;
	position: relative;
}
.tab-menu .swiper-slide a {
	display: block;
	padding: 5px;
	cursor: grab;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	/* 範囲選択禁止 *//* マウスで隙間をつまむと文字を選択してしまう */
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	     -moz-user-select: none; /* Firefox */
	      -ms-user-select: none; /* Internet Explorer/Edge */
	          user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
	.tab-menu .swiper-slide a, .tab-menu .swiper-slide a:visited {
		color: #adadad;
	}
		.tab-menu .swiper-slide a:active, .tab-menu .swiper-slide a:visited:active {
			color: #fdfdfd;
			background: #cf5353;
		    /* クリック時に五十音の文字がすぐ白くなるように（common_styleの#contents-aの0.3s打ち消し）（Swiperに何か支障が出るかも？） */
			-webkit-transition: initial;
			-moz-transition: initial;
			-o-transition: initial;
			transition: initial;
		}

	.tab-menu .swiper-slide.selected {
		background: #cf5353 !important;
	}
		.tab-menu .swiper-slide.selected a, .tab-menu .swiper-slide.selected a:visited {
			color: #fdfdfd;
		}

/*
.swiper-slide-thumb-active {
   border-bottom: 5px solid #cf5353;
   color: #cf5353;
   font-weight: bold;
}
*/
.tab-menu .swiper-slide.selected::before {/* ▽ */
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 12px 9px 0 9px;
	border-color: #fff transparent transparent transparent;
}

.sp.afterword,
.Am-1, .Am-2, .Am-3, .Am-4, .Am-5,
.Sm-1, .Sm-2, .Sm-3, .Sm-4, .Sm-5,
.Nm-1, .Nm-2, .Nm-3, .Nm-4, .Nm-5,
.Mm-1, .Mm-2, .Mm-3, .Mm-4, .Mm-5,
.Rm-1, .Rm-2, .Rm-3, .Rm-4, .Rm-5 {
	background: whitesmoke;
}
.sp.preface,
.Km-1, .Km-2, .Km-3, .Km-4, .Km-5,
.Tm-1, .Tm-2, .Tm-3, .Tm-4, .Tm-5,
.Hm-1, .Hm-2, .Hm-3, .Hm-4, .Hm-5,
.Ym-1, .Ym-2, .Ym-3,
.Wm-1 {
	background: #ddd;
}

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

.SwipeIcon {
	padding: 15px 0;
	text-align: center;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #CCC;
}
	.SwipeIcon img {
		height:auto;
		vertical-align: bottom;
		cursor: pointer;
		opacity: 0.4;
		transition: all 0.3s ease;
	}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	swiper tab-contents
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.tab-contents .swiper-slide {
	background: #fdfdfd;
}
	.tab-contents .Preface, .tab-contents .Afterword {
		padding: 5%;
	}
	.tab-contents .Preface p, .tab-contents .Afterword p {
		text-align: justify;
		margin-bottom: 40px;
	}

.ProverbPanel {
	-moz-transform: perspective(1200px);
	-webkit-perspective: 1200px;
	perspective: 1200px;
}
	.flip-box {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		border-top: 40px solid whitesmoke;
		/*border-bottom: 40px solid whitesmoke;*/
		-webkit-perspective: 1000;
		perspective: 1000;
		background: #ddd;
	}/*.ProverbPanelの下マージンやめて、.flip-boxのborderで余白とってみます*/
		.ProverbPanel:first-child .flip-box {
			border-top: none;
		}
		.tab-menu:last-child {
			border-top: 40px solid whitesmoke;
			border-bottom: 40px solid whitesmoke;
		}


		.flip-box .back, .flip-box .front {
			grid-area: 1 / 1;
			background: #fdfdfd;
			display: flex;
			justify-content: center;
			align-content: center;
			flex: 0 0 100%;
			-webkit-transition: all 1s cubic-bezier(.5,1,.5,1);
			/*transition: all 1s cubic-bezier(.5,1.3,.5,1.3);*/
			transition: all 1s cubic-bezier(0.38, 1.13, 0.58, 1.1);
			transform-style: preserve-3d;
			background-size: cover;
			background-position: center;
		}
			.flip-box .back {
				width: 100%;
				z-index: -1;
				transform: rotateY(-180deg);
			}
			.flip-box .front {
				z-index: 10;
			}
				.flip-box.flipped .back {
					transform: rotateY(0deg);
					z-index: 10;
				}
				.flip-box.flipped .front {
					transform: rotateY(180deg);
					z-index: -1;
				}

	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		ことわざ表
	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

	.flip-box table {
		width: 100%;
		table-layout: fixed;
		word-break: break-all;
		border-collapse: collapse;
		border: 1px solid #333333;
	}
		.flip-box caption {
		    font-family: 'Noto Serif JP', serif;
			line-height: 1.4;
			text-align: left;
			margin: 10px 0;
		}

		.flip-box table th,
		.flip-box table td {
			border: 1px solid #333333;
			padding: 20px;
		}
			.flip-box table tr {/* table>table-layout:fixed; */
				width: 100%;
			}
			.flip-box table th {
				width: 15%;
				letter-spacing: 0.075em;
			}
				.flip-box .front th {
					background: #ffdcdc;
				}
				.flip-box .back th {
					background: lavender;
				}
			.flip-box table td {
				text-align: justify;
			}

	/*.flip-box {
		position: relative; ←?
	}*/

	/*!!!!!!!!!!＋ボタン!!!!!!!!!!*/

	.TableSwitch {
		position: absolute;
		right: 0px;
		top: 40px;/*border40px*/
		display: grid;
		align-items: center;
	    justify-items: center;
	}
		.ProverbPanel:first-child .TableSwitch {
			top: 0px;
		}

		.effect,
		.round {
		    grid-area: 1 / 1;
			z-index: 100;
			border-radius: 50%;
			/*background-color: #D21849;*/
			background-color: gray;
			transition: all 0.2s linear;
		}
		/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
		.round {
			background-color: gray;
			cursor: pointer;
		}
			.round_click {
				transform: scale(1.5);
			}
		/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
		.effect {
			opacity: 0;
		}
			.effect_hover {
				opacity: 0.4;
				background-color: #6767d7;
				transform: scale(1.37);
			}
				.effect_back_hover {
					background-color: #ee3737;
				}
		/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
		.plus {
			background-color: transparent;
			transition: all 0.35s linear;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.plus:after {
				content: "\2b";/* + */
				line-height: 1;
				color: #fdfdfd;
				display: block;
			}
				.plus_rotate {
					transform: rotate(-180deg);
				}


	/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		五十音インデックス
	!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


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

		.Info.proverb table {
			width: 100%;
			background-color: #fdfdfd;
			border-collapse: collapse;
		}
			.Info.proverb table caption {
				line-height: 2;
				font-weight: bold;
				background-color: #cf5353;
			    border: 1px solid #333333;
			    border-bottom:none;
			}
			.Info.proverb td {
				text-align: center;
				border: 1px solid #333333;
			}
				.Info.proverb td a {
					display: block;
					line-height: 2;
					font-weight: bold;
					transition: all  0.3s ease;
					color:#2b0000;
				}
						.Info.proverb a.current {
							background-color: #cf5353;
							color: #fdfdfd;
						}

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

		.Info.proverb .RotatingBox {/* まえがきあとがきリンク */
			width: 100%;
			height: 40px;
			text-align: center;
		}
		.RotatingBox a {
			display: inline-block;
			width: 50%;
			height: 100%;
			border: 1px solid black;
			border-top: none;
			position: relative;
		}
			.RotatingBox a:nth-child(1) {
				border-right:none;
			}
			.RotatingBox a,
			.RotatingBox a:visited {
				color: #fdfdfd;
			}
			.RotatingBox a:hover, .RotatingBox a:visited:hover {

			}
				.RotatingBox a span {
					width: 100%;
					height: 100%;
					line-height: 40px;
					display: block;
					position: absolute;/* 親要素の左上を基準位置 */
					transform-style: preserve-3d;/* 重なりを3Dで表示 */
					transform-origin: 0 50% -20px;/* transformの起点 xyz? よくわからん */
					transition: 0.5s;/* 変化時間 */
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;
				}
					.RotatingBox a span:nth-child(1) {
						background-color: #cf5353;
						transform: rotateX(0deg);/* 横軸の回転なし */
					}
					.RotatingBox a span:nth-child(2) {
						background-color: rebeccapurple;
						transform: rotateX(90deg);/* 横軸で90度回転 */
					}

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

	.TableSwitchAll button {/* 一括切り替え */
		font-size: 1.25rem;  /* 20px */
	}
	.TableSwitchAll span {/* おむね版 通常版 */
		font-size: 1.875rem; /* 30px */
	}

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

	.TableSwitch {/* +ボタン */
		width:  calc(clamp(0.625rem, 9vw, 2.25rem)*1.4 + 20px);
		height: calc(clamp(0.625rem, 9vw, 2.25rem)*1.4 + 20px);
	}
		.effect, .round, .plus {
		    width: clamp(0.625rem, 12.5vw, 50px);/* 50px */
			height: clamp(0.625rem, 12.5vw, 50px);/* 50px */
		}
			.plus:after {/* + */
				font-size: clamp(0.625rem, 7.5vw, 30px);/* 30px */
			}

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

	.tab-contents .Preface p, .tab-contents .Afterword p {/* まえがき・あとがき本文 */
		font-size: 1.125rem; /* 18px */
	}

	.flip-box caption {/* ことわざ名 */
		font-size: clamp(0.625rem, 9vw, 2.25rem);/* 36px */
		padding: 0 calc(clamp(0.625rem, 9vw, 2.25rem)*1.4 + 20px)/* TableSwitch分*/ 0 10px;
	}
		.flip-box table th {/* 読み・意味・例文… */
			font-size: clamp(0.625rem, 4.5vw, 1.125rem);/* 18px */
		}
			.flip-box table td {/* 各種内容 */
				font-size: 1.125rem; /* 18px */
			}

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

	.Info.proverb table caption, .Info.proverb td {
		font-size: 20px;
	}
		.Info.proverb .RotatingBox {/* まえがきあとがきリンク */
			font-size: 18px;
		}



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

/* 今のとこ個別にやるしかないかも… */

@media screen and (orientation: landscape) {

	.SwipeIcon img {
		width: 10%;
	}

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

	.tab-menu a {
		font-size: 5vw;
	}
		.tab-menu .sp a {
			font-size: 2.5vw;
		}

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

	.tab-menu a {
		font-size: 7vw;
	}
		.tab-menu .sp a {
			font-size: 3.5vw;
		}

} @media screen and (width < 933px) and (orientation: landscape) {

	.tab-menu a {
		font-size: 9vw;
	}
		.tab-menu .sp a {
			font-size: 4.5vw;
		}

}

/*----------------------------------------------------------------------------------*/
@media screen and (orientation: portrait) {

	.SwipeIcon img {
		width: 70px;
	}

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

	.tab-menu a {
		font-size: 8vw;
	}
		.tab-menu .sp a {
			font-size: 4vw;
		}

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

	.tab-menu a {
		font-size: 10vw;
	}
		.tab-menu .sp a {
			font-size: 5vw;
		}


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

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

}

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


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノート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) {/* ２カラム共通スタイル */


/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @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) {


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

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

	.TableSwitchAll {
	    flex-direction: column;
	}

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

	.tab-menu .swiper-slide.selected::before {
		border-width: 8px 5px 0 5px;
	}

	.flip-box table th {
		width: 10%;
		writing-mode: vertical-lr;
	}
		/*.TableSwitchを下部に回します*/
		.flip-box caption {
			padding: 0 0/* TableSwitch分*/ 0 10px;
		}
			.TableSwitch {
				position: initial;
				margin: 0 auto;
			}



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

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

}

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

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

@media (hover: hover) {

	.SwipeIcon img:hover {
		opacity: 0.7;
	}

	.Info.proverb td a:hover {
		color: #fdfdfd;
		background-color: #cf5353;
		opacity:1;
	}

		.RotatingBox a:hover span:nth-child(1) {
			transform: rotateX(-90deg);/* 横軸で前方に90度回転 */
		}
		.RotatingBox a:hover span:nth-child(2) {
			transform: rotateX(0deg);/* 横軸の回転なし */
		}

}


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

@media (hover: none) {

	.SwipeIcon img:active {
		opacity: 0.7;
	}

	.Info.proverb td a.active {
		color: #fdfdfd;
		background-color: #cf5353;
		opacity:1;
	}

		.RotatingBox a:active span:nth-child(1) {
			transform: rotateX(-90deg);/* 横軸で前方に90度回転 */
		}
		.RotatingBox a:active span:nth-child(2) {
			transform: rotateX(0deg);/* 横軸の回転なし */
		}

}