/*::::::::::::::::::::::::::::::::::::::::::*/
/*            (PHOTOSWIPE)                  */
/*::::::::::::::::::::::::::::::::::::::::::*/
.PHOTOSWIPE figure  {
	/*position: relative;*/
}
.PHOTOSWIPE figure a {
	cursor: pointer;
	position: relative;
	display: block;
}
	.PHOTOSWIPE figure a:after{
		content: '⤢';
		font-weight: bold;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,0.8);
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fdfdfd;
		opacity: 0;
	}

	.PHOTOSWIPE figure a img {
		display: block;
		/* figureにflex:1指定だと、縦長画像の時余白が出るので、imgにmax-指定してみます */
		max-width: 100%;
		max-height: 80vh;
	}

	/* 拡大時のキャプションのスタイル */
	.pswp__custom-caption {
		/*background: rgba(75, 150, 75, .75);*/
		background: dimgray;
		bottom: 16px;
		color: #fdfdfd;
		left: 50%;
		max-width: 400px;
		padding: 2px 8px;
		position: absolute;
		transform: translateX(-50%);
		width: calc(100% - 32px);
		text-align: center;
	}
	.pswp__custom-caption a {
		color: #fff;
		text-decoration: underline;
	}
	.hidden-caption-content {
		display: none;
	}

		.pswp__custom-caption {/* 拡大時のキャプションじゃまだしいらないかも… */
			display: none;
		}

/*::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::*/

#contents_body {
	background: none;
	padding: 0;
}
#contents_body article {
    border: 5px solid rgba(0,0,0,0.8);
    background: rgb(128 128 128 / 0.25);
    	/* カーソル、テキストの選択禁止 */
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;

}

/*::::::::::::::::::::::::::::::::::::::::::*/
/*           (common)                       */
/*::::::::::::::::::::::::::::::::::::::::::*/

#monthly_illustration h2,
.Title,
.Date {
	color: #fdfdfd;
	background: rgba(0,0,0,0.8);
	text-align: center;
	display: inline-block;
}
.Title {
	line-height: 1.6;
	padding: 5px 15px;
}
.Date {
	padding: 7.5px;
	line-height: 1.2;
}

.PHOTOSWIPE figure a:after,
#past_illustrations .Title,
#past_illustrations .Date {
	transition: all .3s ease-in;
}

/*::::::::::::::::::::::::::::::::::::::::::*/
/*      (monthly_illustration)              */
/*::::::::::::::::::::::::::::::::::::::::::*/

#monthly_illustration {
	margin-bottom: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}
	#monthly_illustration .Date span { display:none; }/* 日付のドット */

	#monthly_illustration h2 {/* 今月のイラスト */
	    line-height: 1.4;
	    padding: 10px;
	    white-space: nowrap;
	}
	#monthly_illustration figure {
		text-align: center;
		/*flex: 1;*/
	}


/*::::::::::::::::::::::::::::::::::::::::::*/
/*        (past_illustrations)              */
/*::::::::::::::::::::::::::::::::::::::::::*/

#past_illustrations {
	display: flex;
	flex-wrap: wrap;
	border-top: 5px solid rgba(0,0,0,0.8);
	background: rgba(0,0,0,0.8);
}
	#past_illustrations figure {
		width: calc(100% / 3);
	}

#past_illustrations .Title,
#past_illustrations .Date {
	position: absolute;
	z-index: 1;
}

#past_illustrations .Title {
	min-width: 50%;
	bottom: 0;
	left: 0;
}
#past_illustrations .Date {
	top: 0;
	right: 0;
}


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

	.PHOTOSWIPE figure a:after{/* ホバー時の拡大矢印 */
		font-size: clamp(0.625rem, 7.5vw, 1.875rem);/* 30px */
	}
		.pswp__custom-caption {/* 拡大時のキャプション */
			font-size: clamp(0.625rem, 5vw, 1.25rem);/* 20px */
		}

	#monthly_illustration h2 {/* 今月のイラスト */
	    font-size: 1.25rem;  /* 20px */
	}
		#monthly_illustration figcaption.Title {/* イラストタイトル */
			font-size: 1.25rem;  /* 20px */
		}
			#monthly_illustration .Date {/* 日付 */
				font-size: 1.25rem;  /* 20px */
			}

	#past_illustrations .Title {/* イラストタイトル */
		font-size: clamp(0.625rem, 4vw, 1rem);/* 16px */
	}
		#past_illustrations .Date {/* 日付 */
			font-size: clamp(0.625rem, 4vw, 1rem);/* 16px */
		}


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

	#monthly_illustration figure {
		/*flex: 0.8;*/
	}


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

	#monthly_illustration figure {
		/*flex: 1;*/
	}

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

	#monthly_illustration {
        flex-wrap: wrap;
        align-items: flex-end;
	}
		#monthly_illustration br { display: none; }
		#monthly_illustration .Date span { display: initial; }/* 日付のドット */
		#monthly_illustration figure {
			order: 3;/* order: 0(h2) や order: 1(aside) の要素より後ろに配置される */
			/*flex: initial;*/
		}

	#past_illustrations figure {
		width: calc(100% / 2);
	}

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

} @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) {

	/* monthlyとpastの違いにより使い分け */
	#monthly_illustration figure a:hover:after{ opacity: 1; }/* figcaptionホバーでも出てしまうのでfigure a:hover */
	#past_illustrations figure:hover a:after { opacity: 1; }/* figcaption,asideホバーで疑似要素が出ないためfigure:hover */

	#past_illustrations figure:hover .Title,
	#past_illustrations figure:hover .Date {
		background: rgba(0,0,0,0);
	}

}


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

@media (hover: none) {

	/* monthlyとpastの違いにより使い分け */
	#monthly_illustration figure a:active:after{ opacity: 1; }/* figcaptionホバーでも出てしまうのでfigure a:hover */
	#past_illustrations figure:active a:after { opacity: 1; }/* figcaption,asideホバーで疑似要素が出ないためfigure:hover */

	#past_illustrations figure:active .Title,
	#past_illustrations figure:active .Date {
		background: rgba(0,0,0,0);
	}

}


/*
.Title {
	display: none;
}*/