@charset "UTF-8";

/*

Amaitorte Sugar 5
standard.css © Nekobungi Sumire 2008-2025

*/

@font-face{
	font-family: 'AmaitorteSugarpowder';
	font-weight: normal;
	font-style: normal;
	src: url(type/amaitortesugarpowder.woff?34) format('woff');
}
@font-face{
	font-family: 'AmaitorteSugarpowder';
	font-weight: bold;
	font-style: normal;
	src: url(type/amaitortesugarpowder.woff?34) format('woff');
}

@font-face{
	font-family: 'AmaitorteGeneralIcons';
	font-weight: normal;
	font-style: normal;
	src: url(type/amaitortegeneralicons.woff?38) format('woff');
}
@font-face{
	font-family: 'AmaitorteGeneralIcons';
	font-weight: bold;
	font-style: normal;
	src: url(type/amaitortegeneralicons.woff?38) format('woff');
}

@font-face{
	font-family: 'Droid Serif';
	font-weight: normal;
	font-style: normal;
	src:
		local('Droid Serif'),
		local('DroidSerif'),
		url(type/droidserif.woff) format('woff');
}
@font-face{
	font-family: 'Droid Serif';
	font-weight: bold;
	font-style: normal;
	src:
		local('Droid Serif Bold'),
		local('DroidSerif-Bold'),
		url(type/droidserifbold.woff) format('woff');
}


/* @view-transition {
	navigation: auto;
} */




/* ルートとボディ */
html,
body{
	margin: 0;
	padding: 0;
	min-height: 100%;
}
html{
	/* 上書き可能なテーマカラーの変数 */
	--bodybgcolour-lightmode: #e0e0e0;
	--bodyfontcolour-lightmode: rgba(130,46,53,0.8);
	--bodyfontcolour10-lightmode: rgb(130,46,53);
	--bodyfontcolour2-lightmode: rgba(130,46,53,0.2);
	--bodybgcolour-darkmode: #666;
	--bodyfontcolour-darkmode: #fff;
	--bodyfontcolour10-darkmode: #fff;
	
	--pagebgcolour-lightmode: #fff;
	--pagebgcolour-darkmode: #222;
	--pagefontcolour-lightmode: #623932;
	--pagefontcolour-darkmode: #fff;
	
	--black-outline: rgba(109,62,171,0.5);
	--white-outline: rgba(255,255,255,0.5);
	
	--mainlogo-image-72dpi: url(navmenu/logo_72dpi.png);
	--mainlogo-image-144dpi: url(navmenu/logo_144dpi.png);
	--mainlogo-image-216dpi: url(navmenu/logo_216dpi.png);
	--menu-image-mono: url(navmenu/b.svg?v3);
	--menu-image-colour: url(navmenu/c.svg);
	
	--globalheadcolour-lightmode: rgb(130,46,53);
	--globalheadcolour-darkmode: #fff;
	
	/* 基本設定 */
	font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
html.ios{
	font: -apple-system-body; /* =17px */
	font-family: 'Jost', "Zen Kaku Gothic New", sans-serif;
	font-weight: normal;
	line-height: 1.6;
}
html.macintosh,
html.ios{
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
body{
	/* 手動で調整する変数 */
	--footerbgcolor: rgba(255,255,255,0.2);
	--footerbordercolor: var(--bodyfontcolour2-lightmode);
	
	/* メディアによって変動する変数 */
	--pageboxradius: 10px;
	--gridradius: 10px;
	--gridwidth: 16px;
	--gridwidthinner: 10px;
	--standardzoom: 1;
	
	/* 変数の半分、倍数、ネガ */
	--gridwidthhalf: calc(var(--gridwidth) * 0.5);
	--negagridwidth: calc(var(--gridwidth) * -1);
	--negagridwidthhalf: calc(var(--gridwidthhalf) * -1);
	--floatingmenusize: calc(var(--pageboxradius) * 3);
	--floatingmenugutter: calc(var(--gridwidth) * 0.5);
	--floatingmenugutterdouble: calc(var(--floatingmenugutter) * 2);
	
	/* 変数にライトモードの変数を設定 */
	--bodybgcolour: var(--bodybgcolour-lightmode);
	--bodyfontcolour: var(--bodyfontcolour-lightmode);
	--bodyfontcolour10: var(--bodyfontcolour10-lightmode);
	--bodyoutline: var(--black-outline);
	--pagebgcolour: var(--pagebgcolour-lightmode);
	--pagefontcolour: var(--pagefontcolour-lightmode);
	--pageoutline: var(--black-outline);
	
	/* 基本設定 */
	font-size: 100%;
	min-width: 320px;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	color: var(--bodyfontcolour);
	background-color: var(--bodybgcolour);
}
body.darkbody{
	/* 変数にダークモードの変数を設定 */
	--bodybgcolour: var(--bodybgcolour-darkmode);
	--bodyfontcolour: var(--bodyfontcolour-darkmode);
	--bodyfontcolour10: var(--bodyfontcolour10-darkmode);
	--bodyoutline: var(--white-outline);
	
	/* 変数を調整 */
	--footerbgcolor: rgba(0,0,0,0.1);
	--footerbordercolor: var(--bodybgcolour);
}
body.darkbody.verydarkbody{
	/* 変数を調整 */
	--footerbgcolor: rgba(255,255,255,0.08);
}
html.ios body{
	font-size: max(94.117647058823529%, 16px); /* =adjust ios default 17px to 16px */
}
@media (prefers-color-scheme:dark){
	body,
	body.darkbody{
		/* 変数に強制ダークモードの変数を設定 */
		--bodybgcolour: var(--bodybgcolour-darkmode);
		--bodyfontcolour: var(--bodyfontcolour-darkmode);
		--bodyfontcolour10: var(--bodyfontcolour10-darkmode);
		--pagebgcolour: var(--pagebgcolour-darkmode);
		--pagefontcolour: var(--pagefontcolour-darkmode);
		--bodyoutline: var(--white-outline);
		--pageoutline: var(--white-outline);
		
		/* 変数を調整 */
		--footerbgcolor: rgba(0,0,0,0.1);
		--footerbordercolor: var(--bodybgcolour);
	}
}
@media (min-width:375px){
	body{
		--gridwidth: 18px;
		--gridwidthinner: 12px;
	}
}
@media (min-width:800px){
	body{
		--pageboxradius: 12px;
	}
}
@media (min-width:920px){
	body{
		--gridwidth: 23px;
		--gridwidthinner: 16px;
		
		/* --floatingmenusize: 44px; */
		/* --floatingmenugutter: 12px; */
	}
}
@media (min-width:1330px) and (min-height:898px){
	body{
		--pageboxradius: 14px;
		--gridradius: 11px;
		--gridwidth: 30px;
		--gridwidthinner: 22px;
		/* --floatingmenugutter: 14px; */
	}
}
/* @media (min-width:2000px) and (min-height:1197px){
	body{
		--standardzoom: 1.3333333333333333;
	}
} */
/* ベーシックな装飾とレイアウトのセット */
a[onclick]{
	cursor: pointer;
}
@supports selector(:focus-visible){
	:focus{
		outline: none;
	}
	html.focusvisible :focus-visible{
		outline: 3px solid var(--bodyoutline);
		outline-offset: 1px;
	}
}

p,
ul,
ol,
dl{
	margin-top: 1em;
	margin-bottom: 1em;
}

.centering{
	text-align: center !important;
}
.lefting{
	text-align: left !important;
}
.righting{
	text-align: right !important;
}

img{
	border: 0;
	text-decoration: none;
}
img.lefting{
	float: left;
	margin: 0 8px 8px 0;
}
img.righting{
	float: right;
	margin: 0 0 8px 8px;
}

.ib{
	display: inline-block;
	vertical-align: bottom;
}
.bl{
	display: block;
}



/* コンポーネントに与える変数 */
.modaldialogue{
	--modaldialogueradius: var(--pageboxradius);
	--modaldialoguemargin: calc(var(--gridwidth) * 1.618);
	
	--modaldialoguebodycolour: #fff;
	--modaldialoguetextcolour: var(--pagefontcolour);
	--modaldialogueclosecolour: #c51a16;
	--modaldialoguecloselabelcolour: var(--bodyfontcolour);
	--modaldialogueoutlinecolour: var(--black-outline);
	--modaldialoguebordercolor: rgba(0,0,0,0.2);
	
	/* --modaldialogueshadowcolour: var(--bodybgcolour);
	--modaldialogueshadowopacity: 1; */
	
	--modaldialoguelinkcolour: #6d3eab;
	--modaldialoguelinkhovercolour: #9957cd;
	--modaldialoguelinkactivecolour: #4c2b92;
}
.modaldialogue.dark{
	--modaldialoguebodycolour: #111;
	--modaldialoguetextcolour: #fff;
	--modaldialogueclosecolour: #fff;
	--modaldialogueoutlinecolour: var(--white-outline);
	--modaldialoguebordercolor: #444;
	
	--modaldialoguelinkcolour: #da7cff;
	--modaldialoguelinkhovercolour: #e6a5ff;
	--modaldialoguelinkactivecolour: #cf57ff;
}
@media (prefers-color-scheme:dark){
	.modaldialogue{
		--modaldialoguebodycolour: #111;
		--modaldialoguetextcolour: #fff;
		--modaldialogueclosecolour: #fff;
		--modaldialogueoutlinecolour: var(--white-outline);
		--modaldialoguebordercolor: #444;
		
		--modaldialoguelinkcolour: #da7cff;
		--modaldialoguelinkhovercolour: #e6a5ff;
		--modaldialoguelinkactivecolour: #cf57ff;
	}
}
/* .modaldialogue .modaldialogueshadow{
	-webkit-backdrop-filter: brightness(60%);
	backdrop-filter: brightness(60%);
} */

.modaldialogue::before{
	content: "";
	display: block;
	
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	opacity: 0;
	transition: opacity 0.2s ease-out;
	background-color: var(--bodybgcolour);
	mix-blend-mode: color;
	
	pointer-events: none;
}
.modaldialogue.on::before{
	opacity: 1;
}

/* ヘッダの天気 */
#HeaderWeatherHolder{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* height: 178px; */
	height: 133px;
	opacity: 1;
	mix-blend-mode: overlay;
	opacity: 0.8;
	pointer-events: none;
}
@supports not (mix-blend-mode: overlay) {
	#HeaderWeatherHolder{
		display: none;
	}
}
/* .darkbody #HeaderWeatherHolder{
	opacity: 0.8;
}
@media (prefers-color-scheme:dark){
	#HeaderWeatherHolder{
		opacity: 0.8;
	}
} */
body.darkbody.verydarkbody #HeaderWeatherHolder{
	opacity: 0.4 !important;
	mix-blend-mode: screen;
	/* transition: opacity 2s ease-out; */
}
@media (min-width:1004px){
	#HeaderWeatherHolder{
		height: 290px;
		-webkit-mask-image: -webkit-linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 60%, rgba(0,0,0,0));
		mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 60%, rgba(0,0,0,0));
	}
}
@media (min-width:1330px) and (min-height:898px){
	#HeaderWeatherHolder{
		height: 354px;
		zoom: var(--standardzoom);
	}
}
#HeaderWeather{
	width: 100%;
	height: 100%;
	vertical-align: top;
}



/* ヘッダ */
.globalhead{
	--lrpadding: 0;
	--tbpadding: 9px;
	--tbgutter: 5px;
	position: relative;
	z-index: 30;
	font-size: 0;
	text-align: center;
	margin: 0 auto;
	padding: var(--tbpadding) 0;
	overflow: hidden;
	--globalheadcolour: var(--globalheadcolour-lightmode);
}
body.darkbody .globalhead{
	--globalheadcolour: var(--globalheadcolour-darkmode);
}
@media (prefers-color-scheme:dark){
	.globalhead{
		--globalheadcolour: var(--globalheadcolour-darkmode);
	}
}
.globalhead a{
	display: block;
	white-space: nowrap;
	text-align: center;
	margin: 0 auto;
	padding: 0 var(--lrpadding);
	text-decoration: none !important;
	color: inherit;
	font-size: 14px;
	line-height: 16px;
	background-color: transparent;
	max-width: 280px;
	position: relative;
	border-radius: var(--gridradius);
}
.mouseUI .globalhead a[href]:active{
	filter: brightness(95%);
}
.globalhead a[href]{
	opacity: 1;
}

.globalhead p{
	margin: 0;
	padding: 0 0 var(--tbgutter);
	text-align: center;
	vertical-align: top;
	position: relative;
}
.globalhead .globalnav{
	display: block;
	margin: 0;
}
.globalhead ul{
	display: flex;
	justify-content: space-around;
	list-style: none;
	align-items: center;
	margin: 0 auto;
	padding: 0;
	max-width: calc((345px + 92%) / 2);
}
.globalhead ul li{
	margin: 0;
	padding: 0;
	text-align: center;
}

@media (min-width:360px){
	.globalhead ul{
		padding: 0 6px 0 0; /* Webcomicsが長いから左にちょっとずらす */
	}
}
@media (min-width:412px){
	.globalhead{
		--lrpadding: 9px;
	}
}
@media (min-width:1004px){
	/* 960 + gridwidth + gridwidth = 1004 */
	.globalhead{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		min-height: 72px;
		
		/* --windowsize: 100vw;
		--windowsize: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)); */
		/* --lrpadding: clamp(9px, (var(--windowsize) - 744px) / 10, 26px); */
		/* ↑900px〜1003px用 */ 
		
		--lrpadding: 26px;
		--tbpadding: 0px;
		
		/* 960 + gridwidth + gridwidth = 1004 */
		/* 1004 - (26 * 10) = 744 */
	}
	.globalhead p{
		padding: 0;
		position: absolute;
		inset: 0;
		margin: auto;
		width: fit-content;
		height: fit-content;
	}
	.globalhead p a{
		padding: 0;
	}
	.globalhead ul{
		max-width: none;
		padding: 0;
	}
	.globalhead ul:after{
		content: "";
		display: block;
		order: 2;
		width: 240px; /* 実際のロゴよりは少し小さめ */
		height: 10px; /* 0でなければいい */
		margin: 0 var(--lrpadding);
	}
	.globalhead ul li + li ~ li{
		order: 3;
	}
}
@media (min-width:1330px) and (min-height:898px){
	.globalhead{
		--lrpadding: 48px;
		--tbpadding: 8px;
		zoom: var(--standardzoom);
	}
}


/* ヘッダのロゴ */
.globalhead p a span{
	display: block;
	
	width: 280px;
	height: 54px;
	line-height: 54px;
	margin: 0 auto;

	text-align: center;
	white-space: nowrap;
	color: transparent;
	overflow: hidden;
	
	position: relative;
}
@media (min-width:400px){
	.globalhead p a span{
		left: -2px; /*バランス調整*/
	}
}
.globalhead p a span:before,
.globalhead p a span:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}
.globalhead p a span:before{
	background-color: var(--globalheadcolour);
	mask-image: var(--mainlogo-image-72dpi);
	mask-size: 280px auto;
	mask-position: 0 -56px;
}
.globalhead p a span:after{
	background-image: var(--mainlogo-image-72dpi);
	background-size: 280px auto;
	background-position: 0 -2px;
}
@media
	(min-resolution:1.1dppx),
	(min-width:1980px) and (min-height:1197px)
{
	.globalhead p a span:before{
		mask-image: var(--mainlogo-image-144dpi);
	}
	.globalhead p a span:after{
		background-image: var(--mainlogo-image-144dpi);
	}
}
@media
	(min-resolution:2.1dppx),
	(min-width:1980px) and (min-height:1197px) and (min-resolution:1.5dppx)
{
	.globalhead p a span:before{
		mask-image: var(--mainlogo-image-216dpi);
	}
	.globalhead p a span:after{
		background-image: var(--mainlogo-image-216dpi);
	}
}
@supports not (mask-image: var(--mainlogo-image-72dpi)) {
	.globalhead p a span:before{
		background-image: url(navmenu/logo_72dpi.png);
		background-position: 0 -56px;
		background-color: #fff;
	}
	.globalhead p a span:after{
		background-image: url(navmenu/logo_72dpi.png);
		background-position: 0 -2px;
	}
}




/* ヘッダのナビゲーションのアイコンと文字 */
.globalhead ul a{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 56px;
}
.globalhead ul a span,
.globalhead ul a:before{
	display: block;
	mask-size: 128px auto;
	background-size: 128px auto;
	mask-image: var(--menu-image-mono);
	background-color: var(--globalheadcolour);
}
@supports not (mask-image: var(--menu-image-mono)){
	.globalhead ul a span,
	.globalhead ul a:before{
		background-image: url(navmenu/b.svg?v3);
		background-color: #fff;
	}
}

.globalhead ul a:before{
	content: "";
	width: 36px;
	height: 36px;
	margin: 0 auto;
}
.globalhead ul a span{
	height: 20px;
	line-height: 20px;
	margin: 0 auto;

	text-align: center;
	white-space: nowrap;
	color: transparent;
	overflow: hidden;
	
	zoom: 0.87;
}
@media (min-width:375px){
	.globalhead ul a span{
		zoom: 1;
	}
}
@media (min-width:1004px){
	.globalhead ul a{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		min-height: 54px;
	}
	.globalhead ul a:before{
		margin: 0 6px 0 0;
	}
	.globalhead ul a span{
		margin: 0;
	}
}

.mouseUI .globalhead ul:before{
	/*キャッシュ機構*/
	content: "";
	display: block;
	width: 1px;
	height: 1px;
	position: absolute;
	top: 0;
	right: 0;
	opacity: 0.01;
}
.globalhead ul a[aria-selected="true"]:before,
.mouseUI .globalhead ul a[href]:hover:before,
.mouseUI .globalhead ul a[href]:active:before,
.mouseUI .globalhead ul:before{
	background-color: transparent !important;
	mask-image: none;
	background-image: var(--menu-image-colour);
}
@supports not (mask-image: var(--menu-image-mono)){
	.globalhead ul a[aria-selected="true"]:before{
		background-image: url(navmenu/c.svg);
	}
}

.globalhead ul .webcomics a:before{
	background-position: -92px 0;
	mask-position: -92px 0;
}
.globalhead ul .books a:before{
	background-position:  0 -84px;
	mask-position: 0 -84px;
}
.globalhead ul .apps a:before{
	background-position: -74px -84px;
	mask-position: -74px -84px;
}
.globalhead ul .others a:before{
	background-position: -37px -84px;
	mask-position: -37px -84px;
}

.globalhead ul .webcomics a span{
	width: 91px;
	background-position: 0 0;
	mask-position: 0 0;
}
.globalhead ul .books a span{
	width: 48px;
	background-position: 0 -21px;
	mask-position: 0 -21px;
}
.globalhead ul .apps a span{
	width: 99px;
	background-position: 0 -42px;
	mask-position: 0 -42px;
}
.globalhead ul .others a span{
	width: 54px;
	background-position: 0 -63px;
	mask-position: 0 -63px;
}




/* フローティングメニュー */
#FloatingMenu{
	/* --modaldialogueshadowcolour: #000; */
	/* --modaldialogueshadowopacity: 0; */
	--modaldialogueoutlinecolour: var(--bodyoutline);
}

#ToggleButtonForMenu,
#FloatingMenuCloser{
	position: fixed;
	top: 0;
	left: 0;
	
	z-index: 5001;
	margin: 0;
	margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	
	transition: opacity 0.25s ease-out;
	opacity: 0;
	pointer-events: none;
	
	-webkit-user-select: none;
	user-select: none;
}
#ToggleButtonForMenu.on,
.modaldialogue.on #FloatingMenuCloser{
	pointer-events: auto;
	opacity: 1;
}
.modaldialogueenabled #ToggleButtonForMenu{
	opacity: 0;
	pointer-events: none;
}

#ToggleButtonForMenu a,
#FloatingMenuCloser a{
	display: block !important;
	cursor: pointer;
	position: relative;
	font-size: calc(var(--floatingmenusize) / 1.618);
	padding: var(--floatingmenugutter);
	color: transparent;
	outline: none !important;
}
.mouseUI #ToggleButtonForMenu a:active,
.mouseUI #FloatingMenuCloser a:active{
	filter: brightness(95%);
}
#ToggleButtonForMenu a > b,
#FloatingMenuCloser a > b{
	display: block;
	margin: 0;
	padding: 0;
	
	background-color: var(--bodybgcolour);
	border-radius: 999px;
}
#FloatingMenuCloser a > b{
	background-color: var(--bodyfontcolour10);
}
html.focusvisible #ToggleButtonForMenu a:focus-visible > b,
html.focusvisible #FloatingMenuCloser a:focus-visible > b{
	box-shadow: 0 0 0 3px var(--bodyoutline) !important;
}
#ToggleButtonForMenu a b:after,
#FloatingMenuCloser a b:after{
	font-family: "AmaitorteSugarpowder";
	content: "\2026";
	
	display: block;
	width: calc(var(--floatingmenusize) * 1.618);
	height: var(--floatingmenusize);
	
	color: var(--bodyfontcolour10);
	line-height: var(--floatingmenusize);
	text-align: center;
	transition: rotate 0.2s ease-out;
}
#FloatingMenuCloser a b:after{
	content: "\2715";
	color: var(--bodybgcolour);
}
#ToggleButtonForMenu a span,
#FloatingMenuCloser a span{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
}
@media (min-width:1004px){
	#ToggleButtonForMenu a > b{
		background-image: linear-gradient(var(--footerbgcolor), var(--footerbgcolor));
	}
}

#FloatingMenuContentHolder{
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--bodybgcolour);
	
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}
.modaldialogue.on #FloatingMenuContentHolder{
	opacity: 1;
	transform: none;
}
#FloatingMenuContentInner{
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	/* background-color: var(--bodybgcolour); */
	/* transform: translate(0, -25px); */
	transition: transform 0.2s ease-out;
	overflow: hidden;
	position: relative;
}

#FloatingMenuContentInner > *{
	margin: 0;
}
#FloatingMenuContentInner > * + * + *{
	margin-top: var(--gridwidth);
}
@media (min-width:800px){
	#FloatingMenuContentInner > * + *{
		margin-left: var(--gridwidth);
		margin-right: var(--gridwidth);
		margin-bottom: var(--gridwidth);
		border-radius: var(--pageboxradius);
	}
}
@media (min-width:1004px){
	/* 960 + gridwidth + gridwidth = 1004 */
	#FloatingMenuContentInner > * + *{
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
}
@media (min-width:1330px) and (min-height:898px){
	#FloatingMenuContentInner > * + *{
		max-width: 1280px;
	}
}












/* ページ本体 */
#Page,
.mainpage,
#NotMBTOCartBody{
	display: block;
	margin: 0 0 var(--gridwidth);
	padding: 0;
	box-sizing: border-box;
	position: relative;
	background-color: var(--pagebgcolour);
	color: var(--pagefontcolour);
	
	margin-left: calc(env(safe-area-inset-left) * -1);
	margin-right: calc(env(safe-area-inset-right) * -1);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	
	zoom: var(--standardzoom);
}
body > #Page:first-child,
.mainpage:first-child,
#NotMBTOCartBody:first-child{
	margin-top: var(--gridwidth);
}
html.focusvisible #Page :focus-visible,
html.focusvisible .mainpage :focus-visible,
html.focusvisible body #NotMBTOCartBody :focus-visible{
	outline-color: var(--pageoutline);
}
@media (min-width:1004px){
	/* 960 + gridwidth + gridwidth = 1004 */
	#Page,
	.mainpage,
	html body #NotMBTOCartBody{
		margin: 0 auto var(--gridwidth);
		padding: 0;
		max-width: 960px;
		border-radius: var(--pageboxradius);
	}
}
@media (min-width:1330px) and (min-height:898px){
	#Page,
	.mainpage,
	html body #NotMBTOCartBody{
		font-size: 1.125em; /* = 16(medium) x 1.125 = 18*/
		max-width: 1280px;
	}
}














/* ページ本体の標準カテゴリタイトル */
.toptitle{
	margin: var(--gridwidth) auto;
	text-align: center;
}
.toptitle > *:first-child{
	font-family: 'Droid Serif', 'Georgia', serif;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 0.1em;
	white-space: nowrap;
	overflow: hidden;
	font-size: min(2em, 9vw);
	line-height: 1.2;
	margin: 0;
}
.toptitle.longtext > *:first-child{
	letter-spacing: 0;
}
.toptitle.longtext > *:first-child span.amp{
	font-size: 0.8em;
	margin: 0 0.1em;
}
.toptitle > *:first-child .mark:before{
	content: attr(data-mark);
	margin: 0 0.1em 0 -5px; /*バランス調整*/
	display: inline-block;
	vertical-align: top;
	line-height: inherit;
	font-family: 'AmaitorteSugarpowder';
	pointer-events: none;
	font-size: 1.2em;
	line-height: 1;
}
.toptitle > * + p{
	color: #777;
	font-weight: normal;
	text-align: center;
	font-size: 0.85em;
	line-height: 1.4;
	margin: 4px var(--gridwidth) 0;
}
.toptitle > * + p span{
	display: inline-block;
	vertical-align: top;
}
@media (prefers-color-scheme:dark){
	.toptitle > * + p{
		color: #eee;
	}
}

/* 最終更新日 */
.lastmodifedview{
	display: flex;
	align-items: center;
}
.lastmodifedview .mark{
	display: block;
	margin: 0 0.2em 0 0;
	font-family: 'AmaitorteSugarpowder';
}
.lastmodifedview .mark:before{
	/* display: inline-block;
	vertical-align: top; */
	content: "\1f552";
	content: "\1f552" / "";
}

/* 隠し見出し */
.hiddenheading{
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: 0;
	padding: 0;
	font-size: 6px;
	white-space: nowrap;
}


/* 脚注へのリンク */
sup.footnote a[href]{
	font: inherit !important;
	color: inherit !important;
	text-decoration: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent !important;
}
.mouseUI sup.footnote a[href]:hover{
	text-decoration: underline !important;
}
sup.footnote a[href]:before,
sup.footnote a[href]:after{
	content: none !important;
	display: none !important;
}






/* ローカルメニュー */
.ebookMenu{
	--tabbg: var(--pagebgcolour);
	--tabkeycolour: #999;
	--tabbordercolour: #ddd;
	
	display: block;
	margin: 0 var(--gridwidth) var(--gridwidth);
	margin: 0 0 var(--gridwidth);
	
	--tabradius: var(--gridradius);
	--tabborderwidth: 2px;
	--tabpaddingTB: 5px;
	--tabpaddingLR: var(--tabradius);
	
	background-color: var(--tabbg);
	
}
@media (prefers-color-scheme:dark){
	.ebookMenu{
		--tabbordercolour: #777;
		background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 60%, rgba(0,0,0,0));
	}
}
#FloatingMenuContentHolder .ebookMenu{
	padding: var(--gridwidth) 0;
}
@media (min-width:1330px) and (min-height:898px){
	#FloatingMenuContentHolder .ebookMenu{
		zoom: var(--standardzoom);
	}
}
.ebookMenu ul{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0 var(--tabradius);
	list-style: none;
	box-shadow: 0 calc(var(--tabborderwidth) * -1) var(--tabbordercolour) inset;
	overflow: hidden;
	background-image: linear-gradient(to top, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%, rgba(0,0,0,0));
}
.ebookMenu.noside ul{
	padding-left: 0;
	padding-right: 0;
}
.ebookMenu ul li{
	flex-basis: 50%;
	margin: 0;
	padding: 0;
	max-width: 20em;
	display: flex;
}
.ebookMenu.noside ul li{
	max-width: none;
}

.ebookMenu ul li a{
	flex-grow: 1;
	display: flex;
	align-items: center;
	position: relative;
	text-align: center;
	justify-content: center;
	min-height: 2em;
	
	color: var(--tabkeycolour);
	text-decoration: none;
	font-weight: bold;
	outline-offset: -3px !important;
	
	
	border-color: var(--tabbordercolour);
	border-style: solid;
	border-width: 0;
	padding: var(--tabpaddingTB) var(--tabpaddingLR);
	line-height: 1.25;
	border-radius: var(--tabradius) var(--tabradius) 0 0;
}
.mouseUI .ebookMenu ul li a[href]:hover{
	filter: brightness(110%);
}
.mouseUI .ebookMenu ul li a[href]:active{
	filter: brightness(90%);
}
.ebookMenu ul li.selected a{
	padding:
		calc(var(--tabpaddingTB) - var(--tabborderwidth))
		calc(var(--tabpaddingLR) - var(--tabborderwidth))
		var(--tabpaddingTB);
	border-width: var(--tabborderwidth) var(--tabborderwidth) 0;
	background-color: var(--tabbg);
	box-shadow: 0 1px var(--tabbg);
	z-index: 1;
	filter: none !important;
}
.ebookMenu.noside ul li.selected:first-child a{
	border-top-left-radius: 0;
	border-left-color: transparent;
}
.ebookMenu.noside ul li.selected:last-child a{
	border-top-right-radius: 0;
	border-right-color: transparent;
}

.ebookMenu ul li.selected a:before,
.ebookMenu ul li.selected a:after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	border-color: var(--tabbordercolour);
	border-style: solid;
	width: var(--tabradius);
	height: var(--tabradius);
	pointer-events: none;
}
.ebookMenu ul li.selected a:before{
	left: calc(var(--tabradius) * -1 - var(--tabborderwidth));
	border-radius: 0 0 var(--tabradius) 0;
	border-width: 0 var(--tabborderwidth) var(--tabborderwidth) 0;
	box-shadow:
		var(--tabradius) 0 var(--tabbg),
		0 var(--tabradius) var(--tabbg);
}
.ebookMenu ul li.selected a:after{
	right: calc(var(--tabradius) * -1 - var(--tabborderwidth));
	border-radius: 0 0 0 var(--tabradius);
	border-width: 0 0 var(--tabborderwidth) var(--tabborderwidth);
	box-shadow:
		calc(var(--tabradius) * -1) 0 var(--tabbg),
		0 var(--tabradius) var(--tabbg);
}
.ebookMenu.noside ul li.selected:first-child a:before,
.ebookMenu.noside ul li.selected:last-child a:after{
	display: none;
}
.ebookMenu ul li a span{
	display: inline-block;
	vertical-align: top;
}
.ebookMenu ul li a span.autoshrink{
	max-height: 1.25em;
	overflow: hidden;
}
.ebookMenu ul li a small{
	display: block;
	font-size: 0.75em;
	padding: 0.2em 0 0;
}
/* @media (min-width:1004px){
	.ebookMenu ul li a span{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ebookMenu ul li a small{
		padding: 0 0 0 0.4em;
	}
} */





/* ピックアップメニュー */
.pickuplinklist{
	margin: 0 var(--gridwidth) var(--gridwidth);
	padding: 0;
	list-style: none;
	
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gridwidthinner);
}
.pickuplinklist > li{
	--thisradius: var(--gridradius);
	margin: 0;
	padding: 0;
	position: relative;
	border-radius: var(--thisradius);
	min-height: 10px;
	aspect-ratio: 2/1;
}
.pickuplinklist > li.size_big{
	grid-column-start: span 2;
}
.pickuplinklist > li.layout_tall{
	grid-row-start: span 2;
	grid-row-end: span 2;
	aspect-ratio: auto;
}
@media (min-width:568px){
	.pickuplinklist{
		grid-template-columns: repeat(6, 1fr);
	}
	.pickuplinklist > li.size_big{
		grid-column-start: span 3;
	}
	.pickuplinklist > li{
		grid-column-start: span 2;
	}
}

/* .pickuplinklist > li:before{
	content: "";
	display: block;
	height: 0;
	padding: 0 0 50%;
} */
/* .pickuplinklist > li.layout_tall:before{
	padding: 0 0 100%;
} */

.pickuplinklist > li a{
	display: block;
	
	position: relative;
	
	border-radius: var(--thisradius);
	background-size: cover;
	
	text-align: center;
	color: transparent;
	outline: none !important;
}
html:not(.loading) .pickuplinklist > li a{
	background-color: transparent !important;
}
.mouseUI .pickuplinklist > li a[href]:hover{
	filter: brightness(105%);
}
.mouseUI .pickuplinklist > li a[href]:active{
	filter: brightness(90%);
}
html.focusvisible .pickuplinklist > li a[href]:focus-visible{
	box-shadow: 0 0 0 3px var(--bodyoutline) !important;
}
@supports (aspect-ratio:2/1){
	.pickuplinklist > li a{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
}


.pickupstatusview{
	display: flex;
	align-items: center;
	
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	margin: 4px;
	border-radius: calc(var(--thisradius) - 3px);
	
	padding: 0 0.4em;
	font-size: 13px;
	line-height: 1.6;
	min-height: 1.6em;
	font-weight: bold;
	
	color: #fff;
	background-color: rgba(0,0,0,0.3);
	
	-webkit-backdrop-filter: saturate(120%);
	backdrop-filter: saturate(120%);
}
.pickupstatusview.cat{
	right: auto;
	left: 0;
}
.pickupstatusview.onbottom{
	top: auto;
	bottom: 0;
}
@media (min-width:756px){
	.pickupstatusview{
		font-size: 14px;
	}
}
@media (min-width:1330px) and (min-height:898px){
	.pickupstatusview{
		font-size: 15px;
	}
}

.pickupstatusview.lastmodified:empty:before{
	content: "更新日不明";
}
.pickupstatusview.cat:before{
	display: inline-block;
	vertical-align: top;
	font-family: 'AmaitorteSugarpowder';
	font-weight: normal;
	content: "";
	margin-right: 0.1em;
	margin-left: -0.1em;
	font-size: 1.333333333333333em;
	line-height: 1;
}
.pickupstatusview.cat.comics:before{
	content: "\f000";
}
.pickupstatusview.cat.ebooks:before{
	content: "\f005";
}
.pickupstatusview.cat.softwares:before{
	content: "\f001";
}
.pickupstatusview.cat.others:before,
.pickupstatusview.cat.about:before{
	content: "\f004";
}
.pickupstatusview.lastmodified time{
	margin-left: -0.1em;
}

.pickupstatusview.resumerview{
	display: flex;
	align-items: center;
	min-height: 2em;
}
.pickupstatusview.resumerview.unread,
.pickupstatusview.resumerview.allread{
	display: none !important;
}
.pickupstatusview.resumerview .midoku{
	display: inline-block;
	vertical-align: top;
	background-color: #fff;
	color: #000;
	mix-blend-mode: screen;
	border-radius: 99px;
	text-align: center;
	min-width: 1em;
	padding: 0 0.35em;
	margin: 0 0.25em 0 0;
	font-weight: bold;
}
.pickupstatusview.resumerview .midoku.toomany{
	padding: 0 0.25em 0 0.35em;
}
.pickupstatusview.resumerview .bookthumbnail{
	display: inline-block;
	vertical-align: top;
	
	margin: -1.2em 0.2em 0.2em  0.4em;
	height: 3em;
	width: calc(3em / 1.414);
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.pickupstatusview.resumerview .mark{
	margin: 0 -0.2em 0 0;
}
.pickupstatusview.resumerview .mark:after{
	display: block;
	font-family: 'AmaitorteSugarpowder';
	line-height: 1;
	font-size: 1.4em;
	content: "\f106";
	color: var(--comickeycolour);
}
.pickupstatusview.resumerview.allread .mark:after,
.pickupstatusview.resumerview.nounread .mark:after,
.pickupstatusview.resumerview.unbookmarked .mark:after{
	content: "\f107";
}
.pickupstatusview.resumerview.allread .mark:after{
	color: inherit;
	opacity: 0.4;
}


.pickuplinklist > li a .images{
	display: block;
	border-radius: inherit;
}
.pickuplinklist > li a .images img,
.pickuplinklist > li a > img{
	pointer-events: none; /* iOS15b3のバグ対策 */
	width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: var(--thisradius);
	/* position: relative; */
	z-index: 2;
	object-fit: cover;
	object-position: 50% 50%;
}
@supports (aspect-ratio:2/1){
	.pickuplinklist > li a .images img,
	.pickuplinklist > li a > img{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
	}
}

.pickuplinklist > li.size_small .pickupstatusview{
	display: none;
}
.pickuplinklist > li.size_small .pickupstatusview.resumerview{
	display: flex;
	font-size: 12px;
}
.pickuplinklist > li.size_small .pickupstatusview.resumerview .midoku,
.pickuplinklist > li.size_small .pickupstatusview.resumerview .text,
.pickuplinklist > li.size_small .pickupstatusview.resumerview .bookthumbnail{
	display: none;
}
.pickuplinklist > li.size_small .pickupstatusview.resumerview .mark{
	margin: 0 -0.2em;
}

.pickuplinklist iframe{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: var(--thisradius);
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

.pickuplinklist .gps{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--thisradius);
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}
.pickuplinklist .gps > *{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	right: 0%;
	bottom: 0%;
	margin: 0;
	padding: 0;
	transition: 2.5s ease-in-out opacity;
	border-radius: var(--thisradius);
	background-position: 50% 30%;
	background-size: cover;
}
.pickuplinklist .gps > *:first-child{
	display: block;
}
.js .pickuplinklist .gps > *{
	display: block;
	z-index: 0;
	opacity: 0;
}
.js .pickuplinklist .gps > *[data-amtstat="selected"]{
	z-index: 1;
	opacity: 1;
}
.documentnotready .pickuplinklist .gps > *{
	transition: none;
}
.pickuplinklist .gps > * > img{
	border-radius: var(--thisradius);
	object-position: 50% 30%;
	object-fit: cover;
	width: 100%;
	height: 100%;
	vertical-align: top;
}
.pickuplinklist .gps > *.text{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	
	text-align: center;
	padding: 0.8em;
	line-height: 1.3;
	font-size: calc((100vw - var(--gridwidth) * 3) / 2 / 20);
	color: rgba(255,255,255,0.5);
	
	overflow: hidden;
	/* word-break: break-all;
	overflow-wrap: anywhere; */
	-webkit-hyphens: auto;
	hyphens: auto;
}
.pickuplinklist > li.size_big .gps > *.text{
	font-size: calc((100vw - var(--gridwidth) * 2) / 1 / 20);
}
@media (min-width:568px){
	.pickuplinklist .gps > *.text{
		font-size: calc((100vw - var(--gridwidth) * 4) / 3 / 20);
	}
	.pickuplinklist > li.size_big .gps > *.text{
		font-size: calc((100vw - var(--gridwidth) * 3) / 2 / 20);
	}
}
@media (min-width:800px){
	.pickuplinklist .gps > *.text{
		font-size: calc((100vw - var(--gridwidth) * 6) / 3 / 20);
	}
	.pickuplinklist > li.size_big .gps > *.text{
		font-size: calc((100vw - var(--gridwidth) * 5) / 2 / 20);
	}
}
@media (min-width:1004px){
	.pickuplinklist .gps > *.text{
		font-size: calc((960px - var(--gridwidth) * 4) / 3 / 20);
	}
	.pickuplinklist > li.size_big .gps > *.text{
		font-size: calc((960px - var(--gridwidth) * 3) / 2 / 20);
	}
}
@media (min-width:1330px) and (min-height:898px){
	.pickuplinklist .gps > *.text{
		font-size: calc((1280px - var(--gridwidth) * 4) / 3 / 20);
	}
	.pickuplinklist > li.size_big .gps > *.text{
		font-size: calc((1280px - var(--gridwidth) * 3) / 2 / 20);
	}
}




/* 追加バナー類 */
.additionalmenuholder{
	margin: var(--gridwidth);
	/* overflow: hidden; */
}
.additionalmenu{
	display: flex;
	flex-wrap: wrap;
	margin: var(--negagridwidthhalf);
	padding: 0;
	list-style: none;
}
.additionalmenu > li{
	margin: 0;
	padding: 0;
	width: 100%;
}
.additionalmenu > li.sizelarge{
	width: 100%;
}
.additionalmenu > li a{
	display: block;
	margin: var(--gridwidthhalf);
	text-align: center;
	color: transparent;
	border-radius: var(--gridradius);
	outline: none !important;
}
.mouseUI .additionalmenu > li a[href]:hover{
	filter: brightness(105%);
}
.mouseUI .additionalmenu > li a[href]:active{
	opacity: 1;
	filter: brightness(90%);
}
html.focusvisible .additionalmenu > li a[href]:focus-visible{
	box-shadow: 0 0 0 3px var(--black-outline);
}

.additionalmenu > li a img{
	width: 100%;
	height: auto;
	vertical-align: top;
	border-radius: var(--gridradius);
}
.additionalmenu > li a img.onlyforls{
	display: none;
}

@media (min-width:360px){
	.additionalmenu > li{
		width: 100%;
	}
}
@media (min-width:601px){
	.additionalmenu > li.sizemedium{
		width: 50%;
	}
	.additionalmenu > li{
		width: 33.3333333333%;
	}
	.additionalmenu > li a img.onlyforls{
		display: inline;
	}
	.additionalmenu > li a img.onlyforss{
		display: none;
	}
}
@media (min-width:756px){
	.additionalmenu > li a span.lastmodified{
		font-size: 14px;
	}
}
@media (min-width:1330px) and (min-height:898px){
	.additionalmenu > li:after{
		border-radius: 7px;
	}
	.additionalmenu > li a span.lastmodified{
		font-size: 16px;
	}
}




















/* 広告一般 */
/* 
	contentsize1 小画面では小さく、大画面では大きい
	contentsize2 小画面では大きく、大画面では細長に
	contentsize3 常に大きく
*/
aside .contentsize1,
aside .contentsize2,
aside .contentsize3{
	display: block;
	margin: 0 auto;
	width: 100%;
}
aside .contentsize1{
	height: 180px !important;
	max-height: 180px !important;
}
aside .contentsize2,
aside .contentsize3{
	height: 250px !important;
	max-height: 250px !important;
}
@media (min-width: 500px){
	aside .contentsize1,
	aside .contentsize2,
	aside .contentsize3{
		max-width: 980px;
	}
	aside .contentsize1,
	aside .contentsize3{
		height: 250px !important;
		max-height: 250px !important;
	}
	aside .contentsize2{
		height: 180px !important;
		max-height: 180px !important;
	}
}
@media (min-width:1330px) and (min-height:898px){
	aside .contentsize1,
	aside .contentsize2,
	aside .contentsize3{
		max-width: 1280px;
	}
}




/* フッタ */
#DocumentFooter{
	--linkradius: 5px;
	max-width: 960px;
	margin: var(--gridwidth);
	font-size: 0.8125em; /* = 16(medium) x 0.8125 = 13 */
}
@media (min-width:414px){
	#DocumentFooter{
		font-size: 0.875em; /* = 16(medium) x 0.875 = 14 */
	}
}
@media (min-width:1004px){
	/* 960 + gridwidth + gridwidth = 1004 */
	#DocumentFooter{
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width:1330px) and (min-height:898px){
	#DocumentFooter{
		max-width: 1280px;
		font-size: 1em;
		zoom: var(--standardzoom);
	}
}


/* フッタの各種リンク */
#DocumentFooter a[href],
#DocumentFooter a[onclick]{
	color: inherit;
	text-decoration: none;
	padding: 2px;
	margin: -2px;
}
.mouseUI #DocumentFooter a[href]:hover,
.mouseUI #DocumentFooter a[onclick]:hover{
	background-color: var(--bodyfontcolour);
	color: var(--bodybgcolour);
}
.mouseUI #DocumentFooter a[href]:active,
.mouseUI #DocumentFooter a[onclick]:active{
	background-color: var(--bodyfontcolour);
	color: var(--bodybgcolour);
	filter: brightness(90%);
}

/* フッタ要素グループ */
#DocumentFooter > *{
	margin-top: 1em;
	margin-bottom: 1em;
}

/* フッタ要素テキスト */
#DocumentFooter > p{
	text-align: center;
}
#DocumentFooter > p small{
	font-size: 1em;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
#DocumentFooter > p a[href],
#DocumentFooter #SourceList li a[href],
#DocumentFooter > p a[onclick],
#DocumentFooter #SourceList li a[onclick]{
	text-decoration: underline;
	border-radius: var(--linkradius);
}

/* フットノート */
#DocumentFooter > .documentfootnote{
	margin-left: auto;
	margin-right: auto;
	font-size: 0.85em !important;
	text-align: left;
	max-width: 40em;
}
#DocumentFooter > .documentfootnote li{
	margin-top: 1em;
}
#DocumentFooter > p.documentfootnote{
	padding-left: 1em;
	position: relative;
}
#DocumentFooter > p.documentfootnote:before{
	content: "＊";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}


/* フッタの広告 */
#DocumentFooter > .externalthings{
	margin: var(--gridwidth) var(--negagridwidth);
	overflow: hidden;
}
@media (min-width:800px){
	#DocumentFooter > .externalthings{
		margin-left: auto;
		margin-right: auto;
	}
}








/* フッタのニュースボックス */
#NewsBox{
	--paddingLR: 12px;
	--paddingTB: 7px;
	--listgutter: 6px;
	
	--negapaddingLR: calc(var(--paddingLR) * -1);
	--paddingLRhalf: calc(var(--paddingLR) * 0.5);
	--negapaddingLRhalf: calc(var(--paddingLRhalf) * -1);
	--paddingTBhalf: calc(var(--paddingTB) * 0.5);
	--negapaddingTB: calc(var(--paddingTB) * -1);
	--negapaddingTBhalf: calc(var(--paddingTBhalf) * -1);
	
	display: flex;
	flex-direction: column;
	gap: var(--gridwidthinner);
	
	padding: 0;
	overflow: hidden;
	position: relative;
}
@media (min-width:568px) and (max-width:757px), (min-width:920px){
	#NewsBox{
		--paddingLR: 14px;
		--paddingTB: 8px;
		--listgutter: 7px;
	}
}
@media (min-width:1330px) and (min-height:898px){
	#NewsBox{
		--paddingLR: 16px;
		--paddingTB: 11px;
		--listgutter: 9px;
	}
}

#NewsBox > h2{
	position: absolute;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: 0;
	padding: 0;
	font-size: 6px;
	white-space: nowrap;
}

#NewsBox section{
	text-align: left;
	padding: var(--paddingTB) var(--paddingLR);
	margin: 0;
	position: relative;
	box-sizing: border-box;
	
	
	border-radius: var(--pageboxradius);
	background-color: var(--footerbgcolor);
}
#NewsBox > section:first-child:before,
#NewsBox > h2 + section:before{
	display: none;
}
#NewsBox > section:empty{
	display: none;
}

#NewsBox h3{
	font-size: 1em;
	margin: 0 0 var(--paddingTB);
}
#NewsBox h3 a{
	display: inline-block;
	vertical-align: top;
	border-radius: var(--linkradius);
}



/* フッタのニュースボックスのディレクトリ */
#Directory{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: var(--paddingTB) var(--paddingLR);
	gap: 0 var(--paddingTB);
	list-style: none;
	position: relative;
	/* overflow: hidden; */
	/* font-size: 0.875em; */
	line-height: 1.5;
	
	border-radius: var(--pageboxradius);
	background-color: var(--footerbgcolor);
}
@media (min-width:1330px) and (min-height:898px){
	#Directory{
		font-size: 1em;
	}
}

#Directory li{
	display: flex;
	align-items: center;
	gap: 0 var(--paddingTB);
	
	margin: 0;
	padding: 0;
	font-weight: bold;
	
	max-width: 100%;
	/* white-space: nowrap; */
	text-overflow: ellipsis;
}
#Directory li + li:before{
	content: "/";
	font-size: 1.5em;
	line-height: 1;
	font-weight: bold;
	margin: 0;
	color: var(--footerbordercolor);
}
#Directory li:last-child:after{
	content: none;
}
#Directory li a[href]{
	display: inline-block;
	vertical-align: top;
	font-weight: normal;
	text-decoration: underline;
	border-radius: var(--linkradius);
	
}




/* フッタのニュースボックスの更新情報 */
#NewsList{
	overflow: hidden;
}
#NewsListUL{
	display: block;
	margin: var(--paddingTB) 0 0;
	padding: 0;
	list-style: none;
}
#NewsListUL li{
	margin: var(--listgutter) 0 0;
	padding: 0;
}
#NewsListUL li + li{
	padding: var(--listgutter) 0 0;
	border-top: 2px solid var(--footerbordercolor);
}
#NewsListUL li.flash{
	box-shadow: 0 0 0 2px currentColor inset;
}
#NewsListUL li > *{
	display: block;
	margin: var(--negapaddingTBhalf) var(--negapaddingLR) !important;
	padding: var(--paddingTBhalf) calc(1em + var(--paddingLR)) var(--paddingTBhalf) var(--paddingLR) !important;
	position: relative;
	/* border-radius: var(--linkradius); */
	min-height: 1.6em;
	outline-offset: -3px !important;
}
#NewsListUL li > * > .txt{
}
#NewsListUL li > * > .txt span{
	line-height: 1.4;
}
#NewsListUL li > * > time{
	display: inline-block;
	vertical-align: top;
	text-align: right;
	box-sizing: border-box;
	white-space: nowrap;
	padding: 0 0 0 0.6em;
	
	/* justify-content: flex-end;
	align-items: center; */
}
#NewsListUL li > * > time:before,
#NewsListUL li > * > time:after{
	display: inline-block;
	vertical-align: top;
	content: "[";
	transform: translate(0, -0.03em);
}
#NewsListUL li > * > time:after{
	content: "]";
}
#NewsListUL li > * > time .mark{
	display: inline-block;
	vertical-align: top;
	/* display: block; */
}
#NewsListUL li > *[href]:after{
	content: "＞";
	font-family: 'AmaitorteSugarpowder';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: var(--paddingLR);
	margin: auto -0.23em;
	line-height: 1;
	height: 1em;
}

/* フッタのニュースボックスの更新情報のアイコン */
#NewsListUL li > * > .txt:before{
	display: inline-block;
	vertical-align: top;
	font-family: 'AmaitorteSugarpowder';
	font-weight: normal;
	content: "";
	margin-right: 0.1em;
	margin-left: -0.05em;
	font-size: 1.333333333333333em;
	line-height: 1;
}
#NewsListUL li.comics > * > .txt:before{
	content: "\f000";
}
#NewsListUL li.ebooks > * > .txt:before{
	content: "\f005";
}
#NewsListUL li.softwares > * > .txt:before{
	content: "\f001";
}
#NewsListUL li.others > * > .txt:before,
#NewsListUL li.about > * > .txt:before{
	content: "\f004";
}



/* フッタのニュースボックスの天気 */
#NewsWeather{
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: var(--bodybgcolour) !important;
	--clockcolour: var(--bodyfontcolour10);
	overflow: hidden;
	line-height: 1.4;
}
.loading #NewsWeather{
	transition: none;
}
@media (min-width:1330px) and (min-height:898px){
	#NewsWeather{
		font-size: 0.875em; /* = 16(medium) x 0.875 = 14 */
	}
}
#NewsWeatherBG{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	/* opacity: 0.8; */
}
body.darkbody.verydarkbody #NewsWeatherBG{
	mix-blend-mode: screen;
	opacity: 0.5;
}
@media (prefers-color-scheme:dark){
	body.verydarkbody #NewsWeatherBG{
		mix-blend-mode: screen;
		opacity: 0.5;
	}
}

#NewsWeatherLive{
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	margin: var(--paddingTB) var(--paddingLR);
	/* perspective: 50px; */
}
#NewsWeatherLive:before{
	content: "LIVE";
	display: block;
}
.weathererror #NewsWeatherLive:before{
	content: "- - -";
	animation: loading 1s linear infinite;
}
@keyframes loading{
	0%{
		content: "-";
	}
	40%{
		content: "- -";
	}
	80%{
		content: "- - -";
	}
	100%{
		content: "- - -";
	}
}

#NewsWeatherClocks{
	flex-grow: 1;
	
	display: flex;
	justify-content: space-evenly;
	padding: 1% 0 2em;
	position: relative;
	z-index: 2;
}
#NewsWeatherClocks > div{
	flex-basis: 24%;
	position: relative;
	aspect-ratio: 1/1;
	min-height: 50px;
}
@media (min-width:758px){
	#NewsWeatherClocks > div{
		aspect-ratio: auto;
	}
}
#NewsWeatherClocks > div > svg{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
	will-change: transform;
	fill: var(--clockcolour);
}
#NewsWeatherClocks > div > svg path{
	fill: var(--clockcolour);
}
#NewsWeatherClocks > div p{
	position: absolute;
	top: 50%;
	padding: 50% 0 0;
	left: -40%;
	right: -40%;
	text-align: center;
	font-size: 0.85em;
	white-space: nowrap;
	font-weight: bold;
	margin: 0.25em 0 0;
	pointer-events: none;
}

#NewsWeatherTitleBottom{
	/* font-size: 0.85em; */
	position: relative;
	z-index: 1;
	text-align: center;
}
#NewsWeatherTitleBottom p{
	margin: 0;
}
#NewsWeatherTitleBottom p span{
	display: inline-block;
	vertical-align: top;
}
#NewsWeatherTitleBottom p a{
	/* display: inline-block;
	vertical-align: top; */
	border-radius: var(--linkradius);
}
#NewsWeatherTitleBottom img.flagstyle{
	width: 1.5em;
	height: 1em;
	vertical-align: top;
	margin: calc((20px - 1em) / 2) 0.25em 0 0;
	border-radius: 2px;
	object-fit: fill;
}


/* フッタのニュースボックスのシェア */
.js #ShareButtons{
	--displayvalue: block;
	display: var(--displayvalue) !important;
}
#ShareIcons{
	margin: 0;
}
.sharemenu{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--paddingTB) var(--paddingLR);
}
.sharemenu li{
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
}
@media (min-width:414px){
	.sharemenu{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}
@media (min-width:758px){
	.sharemenu{
		display: flex;
	}
	.sharemenu li{
		flex-grow: 1;
	}
}
/* フッタのニュースボックスのシェアのアイコンリンク */
.sharemenu li > a{
	display: block;
	text-align: center;
	
	white-space: nowrap;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	
	box-sizing: border-box;
	
	text-decoration: none !important;
	border-radius: var(--linkradius);
	
	font-size: max(9px, 0.6em);
	line-height: 1.25;
	-webkit-text-size-adjust: none;
	
	background-color: transparent !important;
	color: inherit !important;
}
@media (min-width:1330px) and (min-height:898px){
	.sharemenu li > a{
		font-size: max(9px, 0.75em);
	}
}

/* フッタのニュースボックスのシェアのアイコンリンクのアイコン本体 */
.sharemenu li > a:before,
.sharemenu li > a.hasiconimage > span:first-child{
	display: block;
	font-family: "AmaitorteGeneralIcons";
	font-size: 44px;
	line-height: 1;
	width: 1em;
	height: 1em;
	margin: 0 auto 2px;
	position: relative;
	border-radius: 22%;
	text-shadow: none !important;
	color: #fff;
	
	background-color: var(--bodybgcolour);
	color: var(--bodyfontcolour);
}
.sharemenu li > a:before{
	content: "";
}
.sharemenu li > a.hasiconimage:before{
	content: none;
}
.mouseUI .sharemenu li > a:hover:before,
.mouseUI .sharemenu li > a:hover.hasiconimage > span:first-child,
.mouseUI .sharemenu li > a:active:before,
.mouseUI .sharemenu li > a:active.hasiconimage > span:first-child{
	background-color: var(--bodyfontcolour);
	color: var(--bodybgcolour);
	box-shadow: 0 0 0 1px var(--bodybgcolour);
}

/* フッタのニュースボックスのシェアのアイコンリンクのアイコン本体画像タイプの中身 */
.sharemenu li > a.hasiconimage > span:first-child > *{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	-webkit-mask-size: contain;
	-webkit-mask-position: 50% 50%;
	-webkit-mask-repeat: no-repeat;
	
	mask-size: contain;
	mask-position: 50% 50%;
	mask-repeat: no-repeat;
	
	border-radius: inherit;
	/*transition: all ease-out 0.4s;*/
}
.sharemenu li > a.hasiconimage > span:first-child > .mask{
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
	background-color: currentColor;
}

/* フッタのニュースボックスのシェアのアイコンリンクのアイコン本体画像タイプの個別のアイコン */
.sharemenu li > a.twitter:before{
	content: "\f303";
	/* background-color: #000; */
}
.sharemenu li > a.misskeymastodon:before{
	content: "\f331";
}
.sharemenu li > a.email:before{
	content: "\f302";
	/* background-color: #ec6e00; */
}
.sharemenu li > a.facebook:before{
	content: "\f305";
	/* background-color: #1877f2; */
}
.sharemenu li > a.message:before{
	content: "\f325";
	/* background-color: #08d811; */
}
.sharemenu li > a.line:before{
	content: "\f333";
	/* background-color: #00b900; */
}
.sharemenu li > a.bluesky:before{
	content: "\f335";
}
.sharemenu li > a.threads:before{
	content: "\f336";
}

.sharemenu li > a.hasiconimage.qrcode > span:first-child,
.sharemenu li > a.nativeshare:before{
	color: var(--bodyfontcolour);
}
.sharemenu li > a.nativeshare:before{
	font-family: "AmaitorteSugarpowder";
	content: "\f112";
}





/* フッタのニュースボックスのレスポンシブ対応 */
@media (min-width:758px){
	#NewsBox{
		display: grid;
		grid-template-columns: 1000fr 618fr;
	}
	#Directory,
	#ShareButtons{
		grid-column: span 2;
	}
}
@media (min-width:1330px) and (min-height:898px){
	#NewsBox{
	}
}







/* 言語選択 */
#SiteLangSelect{
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
#SiteLangSelect ul{
	display: flex;
	margin: 0 auto;
	width: fit-content;
	padding: 0 0.8em 0 0;
	list-style: none;
	justify-content: center;
	align-items: center;
	gap: 0.6em;
	border-radius: 999px;
	background-color: var(--footerbgcolor);
}
#SiteLangSelect ul:before{
	display: block;
	content: "\f202";
	font-size: 2em;
	width: 1em;
	line-height: 1;
	font-family: "AmaitorteSugarpowder";
}
body.darkbody #SiteLangSelect ul:before{
	content: "\f203";
}
@media (prefers-color-scheme:dark){
	#SiteLangSelect ul:before{
		content: "\f203";
	}
}
#SiteLangSelect li + li:before{
	content: "|";
	line-height: 1;
	font-weight: bold;
	margin: 0 0.6em 0 0;
	color: var(--footerbordercolor);
}
#SiteLangSelect li a[aria-selected="true"]{
	font-weight: bold;
}
#SiteLangSelect li a[href]{
	display: inline-block;
	vertical-align: top;
	font-weight: normal;
	text-decoration: underline;
	border-radius: var(--linkradius);
}

#ApologyForTranslationDeficiency,
#SwitchLanguage{
	transition: opacity 0.4s ease-out;
	position: fixed;
	bottom: 1em;
	left: 2em;
	right: 2em;
	z-index: 4000;
	border-radius: var(--gridradius);
	overflow: hidden;
	background-color: #ffc953;
	font-weight: bold;
	color: #222;
	backdrop-filter: blur(10px);
	opacity: 0;
	width: fit-content;
	text-align: center;
	max-width: calc(100% - 4em);
	margin: 0 auto;
	box-shadow: 0 6px 12px rgba(0,0,0,0.25);
	line-height: 1.25;
	pointer-events: none;
}
#SwitchLanguage{
	background-color: #f5f5f5;
	color: #222;
}
#ApologyForTranslationDeficiency.show,
#SwitchLanguage.show{
	opacity: 1;
	pointer-events: auto;
}

/* body.darkbody #SiteLangSelect ul:before{
	content: "\f203";
} */

#ApologyForTranslationDeficiency p,
#SwitchLanguage p{
	margin: 0.6em 1em;
}
#SwitchLanguage p:first-child:before{
	display: block;
	content: "\f202";
	font-size: 3em;
	line-height: 1;
	font-family: "AmaitorteSugarpowder";
	text-align: center;
	margin: -0.2em 0 0;
}
#SwitchLanguage p.buttonholder{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6em;
}
#SwitchLanguage p.buttonholder a{
	display: inline-block;
	vertical-align: top;
	text-decoration: none;
	padding: 0.4em 0.5em;
	border-radius: 0.6em;
	background-color: #236e25;
	color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
#SwitchLanguage p.buttonholder a.nega{
	background-color: #fff;
	color: #222;
}
.mouseUI #SwitchLanguage p.buttonholder a:hover,
.mouseUI #SwitchLanguage p.buttonholder a:active{
	filter: brightness(110%);
}
.mouseUI #SwitchLanguage p.buttonholder a:active{
	filter: brightness(90%);
}












/* モーダルダイアログのキーボードショートカット */
#KeyboardShortcuts{
	margin: 10px 0 0;
	border-spacing: 0;
	font-size: 12px;
	width: 100%;
}
#KeyboardShortcuts tr:nth-child(odd){
	background-color: rgba(0,0,0,0.1);
}
#KeyboardShortcuts [aria-disabled="true"]{
	color: rgba(0,0,0,0.3);
}
#KeyboardShortcuts th{
	padding: 6px 6px 2px;
	text-align: left;
	font-size: 0;
	vertical-align: top;
	width: 10px;
	white-space: nowrap;
}
#KeyboardShortcuts td{
	padding: 4px;
	vertical-align: top;
}
#KeyboardShortcuts kbd{
	display: inline-block;
	vertical-align: top;
	
	font-size: 12px;
	line-height: 1.75;
	min-width: 1.75em;
	text-align: center;
	
	font-family: 'Lucida Grande', 'Helvetica Neue', 'Helvetica', 'Arial', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'YuGothic', 'Yu Gothic', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', 'Roboto', 'MotoyaLCedar', sans-serif;
	
	background-color: #fff;
	border-radius: 4px;
	padding: 0 0.5em;
	margin: 0 4px 4px 0;
	
	font-weight: normal;
	
	box-shadow:
		0 0 0 1px #999 inset,
		0 1px rgba(0,0,0,0.1);
		
	box-sizing: border-box;
}
#KeyboardShortcuts [aria-disabled="true"] kbd,
#KeyboardShortcuts kbd[aria-disabled="true"]{
	opacity: 0.3;
	box-shadow:
		0 0 0 1px #999 inset;
}
@media (max-width:600px){
	#KeyboardShortcuts th{
		white-space: normal;
		width: auto;
	}
}
@media (prefers-color-scheme:dark){
	#KeyboardShortcuts kbd{
		background-color: #000;
	}
}

/* モーダルダイアログのQRコード */
#QRCodeBody{
	display: flex;
	flex-direction: column;
}
#QRCodeView{
	flex-grow: 1;
	margin: 0;
	position: relative;
	
	-webkit-mask-size: contain;
	-webkit-mask-position: 50% 50%;
	-webkit-mask-repeat: no-repeat;
	
	mask-size: contain;
	mask-position: 50% 50%;
	mask-repeat: no-repeat;
	
	background-color: var(--pagefontcolour);
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
}
#QRCodeView img{
	width: 100%;
	height: auto;
	max-height: calc(100svh - 200px);
	object-fit: contain;
	object-position: 50% 50%;
	vertical-align: top;
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
	opacity: 0;
}

#QRCodeTitle{
	right: 0;
	text-align: center;
	font-size: 0.85em;
	margin: 0;
	font-weight: bold;
	/* color: rgba(0,0,0,0.5); */
}
#QRCodeTitle span{
	display: inline-block;
	vertical-align: top;
	text-align: left;
}

@media (prefers-color-scheme:dark){
	#QRCodeView,
	.darkbody #QRCodeView{
		background-color: var(--bodyfontcolour);
	}
	#QRCodeTitle{
		color: rgba(255,255,255,0.6);
	}
}

/* モーダルダイアログのショップ比較 */
.shopcomparetable{
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #ddd;
	width: 100%;
}
.shopcomparetable th,
.shopcomparetable td{
	padding: 8px 10px;
	border: 1px solid #ddd;
	text-align: center;
	vertical-align: middle;
	line-height: 1.5;
	text-wrap: balance;
}
.shopcomparetable th{
	background-color: rgba(0,0,0,0.03);
}
.shopcomparetable td{
	width: 50%;
}
.shopcomparetable td span,
.shopcomparetable td small{
	display: inline-block;
	vertical-align: top;
}
.shopcomparetable td.mark{
	font-family: 'AmaitorteSugarpowder';
}
.shopcomparetable td.mark.big{
	font-size: 1.5em;
	line-height: 1;
}
.shopcomparetable th .shoplogo{
	display: block;
	height: 0;
	padding: 0 0 33.333333333333333%;
	color: transparent !important;
	background-position: 50% 50%;
	background-size: contain;
}
.shopcomparetable th .shoplogo.pico2{
	background-image: url(./shoplogo/pico2.svg);
}
.enLang .shopcomparetable th .shoplogo.pico2{
	background-image: url(./shoplogo/pico2_en.svg);
}
.shopcomparetable th .shoplogo.alicebooks{
	background-image: url(./shoplogo/alicebooks.svg);
}
@media (prefers-color-scheme:dark){
	.shopcomparetable,
	.shopcomparetable th,
	.shopcomparetable td{
		border: 1px solid #666;
	}
	.shopcomparetable th{
		background-color: rgba(255,255,255,0.08);
	}
	.shopcomparetable th .shoplogo.pico2{
		background-image: url(./shoplogo/pico2_dark.svg);
	}
	.enLang .shopcomparetable th .shoplogo.pico2{
		background-image: url(./shoplogo/pico2_en_dark.svg);
	}
	.shopcomparetable th .shoplogo.alicebooks{
		background-image: url(./shoplogo/alicebooks_dark.svg);
	}
}



/* メインスキッパー */
#MainSkipper{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	z-index: 9999;
}
#MainSkipper p{
	margin: 0;
}
#MainSkipper a{
	display: block;
	height: 1px;
	overflow: hidden;
	line-height: 2;
	padding: 0 1em;
}
html.focusvisible #MainSkipper a:focus-visible{
	color: #222;
	background-color: #fff;
	font-weight: bold;
	height: auto;
	border-radius: 0 0 0.25em 0;
	border-width: 0 1px 1px 0;
	border-color: #000;
	border-style: solid;
}