/* "shimen.css" */
@charset "UTF-8";

body {
	background-color:		white;

	/*
	スマホ画面が拡縮できる設定となっているので、
	このような操作を行うと body もスクロールしてしまう。
		１．紙面拡大して画面幅以上にする
		２．左右に紙面をスクロール
		３．紙面上でなく地の白い部分を触ってスクロール
	これを避けるため overflow-x: hidden; を置く。
	その後、PC で紙面を最大倍率にしたとき、余分な縦スクロールバーが出たので overflow: hidden; に変更した。
	*/
	overflow:				hidden;
}

/*------------------------------ */
/* container */

.container {
	display:				grid;
	grid-template-columns:	1fr min(var(--sidebar-width-min), var(--sidebar-width-max));
	min-height:				calc(100vh - var(--header-height));
}
.container.cmd_shimen {
	height:				calc(100vh - var(--header-height));
	max-height:			100vh;
}
@media screen and (min-width:1px) and (max-width:800px) {
	.container {
		display:			flex;
		flex-direction:		column;
		height:				auto;
		width:				100%;
	}
}
.container.is_fullscreen {
	display:				flex;
	height:					100vh;
}

/*------------------------------ */
/* main */

main {
	border-right:			1px solid var(--color-gray-400);
	padding:				1rem;
	position:				relative;
	width:					100%;
}
@media screen and (min-width:1px) and (max-width:800px) {
	main {
		height:					calc(100vh - var(--header-height));
		min-height:				calc(100vh - var(--header-height));
	}
}

#date {
	border:					none;
	border-bottom:			1px solid var(--color-gray-400);
	font-size:				1rem;
	left:					1rem;
	padding:				0.5rem;
	position:				absolute;
	top:					1rem;
	width:					fit-content;
}

.shimen_list {
	display:				grid;
	gap:					1rem;
	grid-auto-rows:			min-content;
	grid-template-columns:	1fr 1fr 1fr;
}
/* @media screen and (min-width:501px) and (max-width:1280px) {
	.shimen_list {
		grid-template-columns:	1fr 1fr;
	}
}
@media screen and (min-width:1px) and (max-width:500px) {
	.shimen_list {
		grid-template-columns:	1fr;
	}
} */
@media screen and (min-width:1px) and (max-width:960px) {
	.shimen_list {
		grid-template-columns:	1fr 1fr;
	}
}


/* 紙面サムネイル */
.thum {
	align-items:			center;
	cursor:					pointer;
	display:				flex;
	height:					fit-content;
	justify-content:		center;
	position:				relative;
}
.thum .smn_img {
	aspect-ratio:			430 / 304;
	border:					1px solid var(--color-gray-100);
	filter:					blur(0.75px);
	width:					100%;
	image-rendering:		-webkit-optimize-contrast;
}

/* 朝刊 などのラベル */
.smn_label {
	background-color:		white;
	border:					1px solid gray;
	bottom:					2px;
	cursor:					default;
	display:				inline;
	font-size:				2rem;
	padding:				0px 3px;
	position:				absolute;
	right:					2px;
}

.shimen {
	text-align:				center;
}


/* 前へ、次へのナビゲーション */
#prev_smn, #next_smn {
	align-items:			center;
	backdrop-filter:		blur(0px);
	display:				flex;
	flex-direction:			column;
	gap:					0.75rem;
	height:					100%;
	justify-content:		center;
	position:				absolute;
	top:					0;
	max-width:				10rem;
	min-width:				40px;
	width:					10%;
	z-index:				1;
}
#prev_smn {
	left:					0;
}
#next_smn {
	right:					0;
}
#prev_smn:hover {
	background:				linear-gradient(to left, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
	border-right:			1px solid var(--color-gray-200);
}
#next_smn:hover {
	background:				linear-gradient(to right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
	border-left:			1px solid var(--color-gray-200);
}
.prev_smn_inner, .next_smn_inner {
	background-color:		var(--color-text-inverse);
}
.prev_smn_arrow, .next_smn_arrow {
	/* 矢印の軸 */
	background-color:		var(--color-gray-600);
	display:				inline-block;
	position:				relative;

	/* 矢印の軸の縦幅 */
	height:					0.5rem;

	/* 矢印の軸の横幅 */
	width:					20%;
}
.prev_smn_arrow {
	/* 矢印を領域の中央に配置する為に、矢印の先端の横幅分、右へ矢印全体を移動させる。 */
	left:					0.375rem;
}
.next_smn_arrow {
	/* 矢印を領域の中央に配置する為に、矢印の先端の横幅分、左へ矢印全体を移動させる。 */
	right:					0.375rem;
}
.prev_smn_arrow::before, .next_smn_arrow::after {
	/* 矢印の先端 */
	content:				"";
	position:				absolute;
	transform:				translateY(-50%);
	top:					50%;
}
.prev_smn_arrow::before {
	/* 矢印の先端の縦幅 */
	border-top:				calc(0.75rem / 2 + 0.25rem) solid transparent;
	border-bottom:			calc(0.75rem / 2 + 0.25rem) solid transparent;

	/* 矢印の先端の横幅 */
	border-right:			0.75rem solid var(--color-gray-600);

	/* 矢印の先端の配置位置 */
	left:					-0.75rem;
}
.next_smn_arrow::after {
	/* 矢印の先端の縦幅 */
	border-top:				calc(0.75rem / 2 + 0.25rem) solid transparent;
	border-bottom:			calc(0.75rem / 2 + 0.25rem) solid transparent;

	/* 矢印の先端の横幅 */
	border-left:			0.75rem solid var(--color-gray-600);

	/* 矢印の先端の配置位置 */
	right:					-0.75rem;
}

#prev_smn_text, #next_smn_text {
	font-size:				0.875rem;
	font-weight:			bold;
}


/* スクラップメニュー */
.shimen_menu {
	background:				rgba(255, 255, 255, 0.9);
	backdrop-filter:		blur(4px);
	bottom:					1rem;
	border:					1px solid var(--color-gray-300);
	border-radius:			0.3125rem;
	box-shadow:				0 8px 24px rgba(0, 0, 0, 0.06);
	display:				none;
	padding:				0.25rem 0.5rem;
	position:				absolute;
	right:					1rem;
	z-index:				2;
}
.shimen_menu .dl_pdf {
	margin:					0;
}
.shimen_menu__ul {
	display:				flex;
}
.shimen_menu__ul li:not(:first-child) {
	margin-left:			0.25rem;
	padding:				0.25rem;
	position:				relative;
}
.shimen_menu__ul li:not(:first-child)::before {
	background:				var(--color-gray-200);
	content:				"";
	left:					0;
	height:					60%;
	position:				absolute;
	top:					50%;
	transform:				translateY(-50%);
	width:					1px;
}
.shimen_menu button {
	align-items:			center;
	background-color:		transparent;
	/* background:				linear-gradient(to left, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 60%, transparent 100%); */
	border:					var(--color-primary-600);
	display:				flex;
	flex-direction:			column;
	font-weight:			500;
	height:					100%;
	justify-content:		center;
	padding:				0.75rem 0.5rem;
}
.shimen_menu svg {
	color:					var(--color-gray-400);
	fill:					var(--color-gray-400);
}
/* マーカーボタン */
#li_editing {
	/* スクラップ時にのみ表示する。 */
	display:				none;
}


/* スクラップ削除ボタン、スクラップ共有ボタン */
.del_scrap, .share_scrap {
	background-color:		white;
	border:					none;
	height:					100%;
	padding-right:			0.5rem;
	min-width:				1.5rem;
	width:					2.5vw;
}



/*------------------------------ */
/* aside */

aside {
	background-color:			white;
	display:					flex;
	flex-direction:				column;
	gap:						1rem;
	height:						100%;
	min-height:					calc(100vh - var(--header-height));
	max-height:					100vh;
	padding:					0.5rem;
	z-index:					1;

	/* 最初からスクロールバーの幅を確保しておく */
	overflow-y:					auto;
	scrollbar-gutter:			stable;
	scrollbar-width:			thin;
}
@media screen and (min-width:1px) and (max-width:800px) {
	aside {
		height:					auto;
		overflow-y:				visible;
	}
}



/* セクションのタイトル */
aside .sec_ttl {
	align-items:				center;
	border-top:					1px solid var(--color-gray-700);
	display:					flex;
	line-height:				2rem;
	margin:						0.75rem 0;
	min-height:					2rem;
	padding:					0.25rem 0;
	width:						100%;
}
aside .sec_ttl h2 {
	display:					inline-block;
}
aside .sec_ttl a {
	text-decoration:			underline;
}
/* カレンダー */
aside .calendar {
	width:						100%;
}

/* 記事 */
.news {
	display:					none;
	position:					relative;
}
.news__cont_outer {
	min-height:					2rem;
	max-height:					20rem;
	overflow:					hidden;
	transition:					max-height 0.3s ease;


	/* overflow-y:					auto; */
	/* scrollbar-width:			thin; */
}
.news.expanded .news__cont_outer{
	max-height:					100%;
}
.news .news_link {
	display:					block;
	font-size:					0.875rem;
	overflow:					hidden;
	text-overflow:				ellipsis;
	white-space:				nowrap;
	width:						100%;
}
.news__more_wrap {
	bottom:						0;
	display:					none;
	position:					absolute;
	width:						100%;
}
.news.expanded .news__more_wrap {
	position:					static;
}
.news__more_btn {
	align-items:				center;
	background:					linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
	border:						none;
	font-size:					0.75rem;
	font-weight:				500;
	display:					flex;
	flex-direction:				column;
	padding:					0.75rem;
	width:						100%;
}
.men_label {
	background-color:			var(--color-primary-200);
	display:					block;
	font-size:					0.875rem;
	font-weight:				bold;
	padding:					0.25rem 0.5rem;
	width:						100%;
}
.news_link {
	padding:					0.5rem;
}
.news_empty_msg {
	color:						var(--color-gray-400);
	font-size:					0.75rem;
	font-weight:				500;
	text-align:					center;
	width:						100%;
}

/* スクラップ */
aside .scrap {
	height:						14rem;
}
aside .scrap img {
	border:						1px solid var(--color-gray-200);
	height:						207px;
	overflow:					hidden;
}
.scrap_more_link,
.scrap_sh_more_link {
	color:						var(--color-gray-700);
	display:					block;
	font-size:					0.875rem;
	margin:						1rem 0 0.5rem 0;
	text-align:					right;
	width:						100%;
}

/* Tools */
#tools {
	display:					none;
	padding-top:				2rem;
}
#tools li {
	border-bottom:		4px solid transparent;
	padding-bottom:		2px;
}

#marker_type dt:before {
	display:					inline-block;
	content:					"";
	position:					relative;
	top:						3px;
	width:						15px;
	height:						15px;
	background-image:			url("../img/icon/pen_thinline.svg");
	background-size:			15px 15px;
	background-repeat:			no-repeat;
	margin-right:				3px;
}
#txt_size dt:before {
	display:inline-block;
	content:"";
	position:relative;
	top:0px;
	width:13px;
	height:13px;
	background-image:url("../img/icon/alphabet.svg");
	background-size:13px 13px;
	background-repeat:no-repeat;
	margin-right:3px;
}
#color_type dt:before {
	display:inline-block;
	content:"";
	position:relative;
	top:1px;
	width:15px;
	height:15px;
	background-image:url("../img/icon/palette.svg");
	background-size:15px 15px;
	background-repeat:no-repeat;
	margin-right:3px;
}
#color_type dd {
	padding-bottom:1.5rem;
	border-bottom:dotted 1px #fff;
}
#tools dd ul,
#tools ul#operation_button {
	display:flex;
	justify-content:center;
	margin-top:15px;
}
#tools dd ul li {
	margin:0 2px;
}
.wrap_operation_btn {
	align-items:		center;
	background-color:	transparent;
	border:				none;
	display:			inline-flex;
	flex-direction:		column;
	gap:				0.25rem;
	padding:			0.5rem;
	width:				5rem;
}
.wrap_operation_btn:hover {
	background-color:	var(--color-primary-100);
}
.wrap_operation_btn .svg-color {
	fill:				#fff;
}
#tools dd .marker_select_btn {
	align-items:		center;
	background:			#fcfcfc;
	background:			-moz-linear-gradient(top, #fcfcfc 0%, #eeeeee 99%);
	background:			-webkit-linear-gradient(top, #fcfcfc 0%,#eeeeee 99%);
	background:			linear-gradient(to bottom, #fcfcfc 0%,#eeeeee 99%);
	border:				solid 1px #ddd;
	color:				#000;
	cursor:				pointer;
	display:			inline-flex;
	filter:				progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 );
	height:				2rem;
	justify-content:	center;
	width:				2rem;
}
#tools dd .marker_select_btn .svg-color {
	fill:				#000;
}
#tools dd .txt_select_btn {
	align-items:		center;
	color:				#000;
	cursor:				pointer;
	background:			#fcfcfc;
	background:			-moz-linear-gradient(top, #fcfcfc 0%, #eeeeee 99%);
	background:			-webkit-linear-gradient(top, #fcfcfc 0%,#eeeeee 99%);
	background:			linear-gradient(to bottom, #fcfcfc 0%,#eeeeee 99%);
	border:				solid 1px #ddd;
	display:			inline-flex;
	filter:				progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 );
	font-size:			1.2rem;
	font-weight:		bold;
	height:				2rem;
	justify-content:	center;
	padding:			0;
	text-indent:		1px;
	width:				2rem;
}
.color_select li {
	border-bottom:		4px solid transparent;
	padding-bottom:		2px;
}
.color_select li button {
	border:				solid 1px #fff;
	cursor:				pointer;
	width:				2rem;
	height:				2rem;
	display:			block;
}
.color_select li#black button {
	background:			#000;
}
.color_select li#gray button {
	background:			#80807e;
}
.color_select li#red button {
	background:			#fe0000;
}
.color_select li#blue button {
	background:			#33f;
}
.color_select li#green button {
	background:			#00ff01;
}
.color_select li#yellow button {
	background:			#ffff01;
}

#share-box {
	color:white;
	cursor: pointer;
	margin-bottom: 10px;
	text-align: center;
}

#tools #finished_button {
	background:				#fcfcfc;
	background:				-moz-linear-gradient(top, #fcfcfc 0%, #eeeeee 99%);
	background:				-webkit-linear-gradient(top, #fcfcfc 0%,#eeeeee 99%);
	background:				linear-gradient(to bottom, #fcfcfc 0%,#eeeeee 99%);
	border:					none;
	border-bottom:			solid 2px #152e52;
	cursor:					pointer;
	display:				block;
	filter:					progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#eeeeee',GradientType=0 );
	margin:					10px auto 30px;
	padding:				10px 0px 7px;
	text-align:				center;
	width:					248px;
}

/* aside */
/*------------------------------ */