/* ------------------------------- */
/* にししふぁくとりー： Home CSS   */
/* ------------------------------- */
/* Mobile First Version [2023/06/17 12:53] 《◆サイトHOMEページのみで使用するスタイル群》 */



/* ――――――――――――――― */
/* ■共通スタイル（Mobile First） */
/* ――――――――――――――― */

	/* ============================== */
	/* ▼上部ガイド領域内のコンテンツ */
	/* ============================== */

	/* --------------- */
	/* ▽ようこそ！BOX */
	/* --------------- */
	#welcomebox p {
		font-size: 90%;
	}
	/* ▽古いIE用のアラート */
	#iealert {
		width: 50%;
		float: right;
		border: 5px double #cc0000;
		border-radius: 9px;
		background-color: white;
		color: #cc0000;
		margin: 0.5em 0px 0.3em 1em;
		padding: 0.3em;
		font-weight: bold;
	}
	#iealert strong {
		background-color: #ffffaa;
	}

	/* ------------- */
	/* ▽ひとことBOX */		/* 注：ここはレガシー用のデザイン */
	/* ------------- */
	.hitokoto-body {
		margin: 0.5em 0px 1em 0px;
	}
	.hitokoto-body .date {
		font-weight: bold;
		background-color: darkgreen;
		color: #fffff0;
		padding: 0px 3px;
	}
	.hitokoto-body .embeddedimage {
		max-width: 100%;
		height: auto;
	}

	.deco-inlineblock {
		display: inline-block;	/* インラインブロック化 */
	}

	/* ▽画像ボックス(FIGオプション指定時) */
	.hitokoto-body .embeddedpictbox {
		margin: 0;					/* 外側の余白を消す */
		padding: 0;					/* 内側の余白を消す */
		display: inline-table;		/* 横方向に並べる */
		border-collapse: collapse;	/* displayをinline-tableにする場合に必要 */
		border: 1px solid #f0f0f0;	/* 枠線 */
		vertical-align: top;		/* 行内では上に寄せる */
	}
		/* キャプション */
		.hitokoto-body .embeddedpictbox figcaption {
			display: table-caption;		/* キャプションが画像幅から外に出ないようにする */
			caption-side: bottom;		/* キャプションの位置(上にしたければtop) */
			font-size: 0.67em;			/* 文字サイズ */
			text-align: center;			/* センタリング */
			background-color: #f0f0f0;	/* 背景色 */
		}

		/* 画像ボックスに含まれる画像 */
		.hitokoto-body .embeddedpictbox img {
			vertical-align: middle;
		}

	/* ▽画像リンク */
	.hitokoto-body .imagelink {
		display: inline-block;
		line-height: 1;				/* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
		vertical-align: inherit;	/* 同上 */
	}

	/* ------------- */
	/* ▽更新履歴BOX */
	/* ------------- */
	#whatsnewbox {
		background-color: #ffffcc;
	}
	#whatsnewbox h2 {
		background-color: #ffcccc;
	}
	#whatsnewbox #updatelog {
		margin: 3px;
		padding: 0px;
		text-align: right;
		font-size: 90%;
	}
	#whatsnewbox ul#updatelist {
		margin: 0px;
		padding: 0px;
		font-size: 80%;
		list-style-type: none;
	}
	#whatsnewbox ul#updatelist li {
		margin: 10px 3px;
		padding: 0px 0px 10px 0px;
		border-bottom: 1px dashed #ccc;
		line-height: 1.3;
	}
	#whatsnewbox ul#updatelist span.date {
		font-family: Arial,sans-serif;
	}
	#whatsnewbox ul#updatelist li#lastupdate,
	#whatsnewbox ul#updatelist li#lastupdate a {
		color: #cc0000;
	}

	/* ----------------- */
	/* ▽RSSフィード案内 */
	/* ----------------- */
	#rsslink {
		margin: 0.5em 0px 0px 0px;
		padding: 0px;
		font-size: 80%;
	}
	#rsslink a {
		display: inline-block;
		background-color: orange;
		color: white;
		border-radius: 5px;
		padding: 1px 3px;
		text-decoration: none;
	}
	#rsslink a:hover {
		color: #cc3000;
	}

	/* =================== */
	/* ▼コンテンツINDEX内 */
	/* =================== */

	/* ------------------ */
	/* ▽大分類コンテンツ */	/* ※モバイルでは段組にしない */
	/* ------------------ */
	div.contentsset {
		margin: 0px;
	}
	div.section { margin: 0px; padding: 1em; }
	div.contentsset h2 {
		margin: 0px;
		padding: 1px;
		font-weight: normal;
		font-size: 120%;
		text-indent: 15px;
		border-radius: 9px;
	}
	div.contentsset h2 span.en {
		font-size: 125%;
		font-family: 'Anton',Impact,Arial,Verdana,sans-serif;
	}
	div.contentsset h2 span.jp {
		font-size: 70%;
	}
	div.contentsset h2 span.jp span.pp-particle {
		font-size: 75%;
	}

	#cProducts	{ background-color: #55aacc; color: white; }
	#cPctips	{ background-color: #bb5555; color: white; }
	#cPrivates	{ background-color: #aaaa00; color: white; }
	#cBooks		{ background-color: #ffaaaa; color: white; }
	#cInfos		{ background-color: #808080; color: white; }
	#cOthers	{ background-color: #008000; color: white; }

	/* ------------------------ */
	/* ▽コーナー別コンテンツ枠 */
	/* ------------------------ */
	div.contentsbox {
		margin: 5px 0px;
		padding: 0px;
		border-top: 1px solid #f0fff0;
		border-right: 1px solid #008000;
		border-bottom: 1px solid #008000;
	}
	div.cbProducts	{ border-left: 7px solid #55aacc; background-color: #ccffff; }
	div.cbPctips	{ border-left: 7px solid #bb5555; background-color: #ffeeee; }
	div.cbPrivates	{ border-left: 7px solid #aaaa00; background-color: #ffffcc; }
	div.cbBooks		{ border-left: 7px solid #ffaaaa; background-color: #ffe0e0; }
	div.cbInfos		{ border-left: 7px solid #808080; background-color: #f8fff8; }
	div.cbOthers	{ border-left: 7px solid #008000; background-color: #eeffee; }
	div.contentsbox h3 {
		margin: 3px;
		/*padding: 0px;*/
		padding: 0px 0px 3px 0px;
		border-bottom: 1px dashed gray;
		font-weight: normal;
		font-size: 100%;
	}
	div.contentsbox h3 a {
		display: block;
		border: 1px solid transparent;
	}
	div.cbProducts	h3 a { border-color: #ccffff; } /* 冗長: for IE6 */
	div.cbPctips	h3 a { border-color: #ffeeee; } /* 冗長: for IE6 */
	div.cbPrivates	h3 a { border-color: #ffffee; } /* 冗長: for IE6 */
	div.cbBooks		h3 a { border-color: #ffe0e0; } /* 冗長: for IE6 */
	div.cbInfos		h3 a { border-color: #f8fff8; } /* 冗長: for IE6 */
	div.cbOthers	h3 a { border-color: #eeeeff; } /* 冗長: for IE6 */
	div.contentsbox h3 a span.en { font-family: Verdana,Arial,sans-serif; font-size: 110%; }
	div.contentsbox h3 a span.jp { font-size: 80%; }
	div.contentsbox h3 a:hover {
		text-decoration: none;
		color: darkblue;
		background-color: #e0e0ff !important;
		border: 1px #000080 solid !important;
	}
	div.contentsbox p.description {
		margin: 3px;
		padding: 0px;
	/*	padding: 3px 0px 0px 0px;
		border-top: 1px dashed gray;*/
		font-size: smaller;
		line-height: 1.3;
	}
	div.contentsbox ul {
		font-size: smaller;
		line-height: 1.3;
	}
	div.contentsbox ul li {
		padding-bottom: 0.5em;
	}
	div.contentsbox ul span.postdate {
		font-size: 75%;
	}
	div.contentsbox p.lastupdate {
		margin: 3px;
		padding: 0px;
		font-size: 60%;
		text-align: right;
	}

	/* --------- */
	/* ▽MyBooks */
	/* --------- */
	.bookslist {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
	.bookslist li {
		margin: 5px;
		padding: 0px;
		line-height: 1.3;
		min-height: 76px;
		max-height: 100px;
		overflow: auto;
	}
	.bookslist li a {
		text-decoration: none;
	}
	.mybooksimg {
		display: block;
		width: 54px;
		float: left;
		margin: 0px 5px 0px 0px;
		background-image: url("/mybooks/Books54px.gif");
		background-repeat: no-repeat;
	}

	/* ==================== */
	/* ▼下部サブガイド領域 */	/* ※サイドコンテンツだけ2段組。メインのガイドは独立段に。 */
	/* ==================== */
	div.subguides {
		margin: 0px 1em;
		padding: 0px;
	}
	div.subguides div.subguide1 {
		margin: 0px 0px 1em 0px;
		padding: 1em;
		background-color: #ccffcc;
		border-radius: 12px;
	}
	div.subguides div.subguide2 {
		width: 49.5%;
		float: left;
	}
	div.subguides div.subguide3 {
		width: 49.5%;
		float: right;
	}

	/* ------------------ */
	/* ▽ミニサイドリンク */
	/* ------------------ */
	div.minisidelinks {
		margin: 0px;
	}
	div.minisidelinks h2 {
		color: yellow;
		background-color: green;
		font-size: 90%;
		font-weight: normal;
		text-align: center;
		margin: 0px 0px 3px 0px;
		padding: 3px 0px;
	}
	div.minisidelinks dl {
		margin-top: 3px;
		padding: 7px 0px 1px 0px;
		background-color: #00aa00;
	}
	div.minisidelinks dl dt {
		margin: 3px;
		font-size: 75%;
		color: yellow;
		font-weight: bold;
	}
	div.minisidelinks dl dt a {
		color: yellow;
		display: block;
		border-radius: 5px;
	}
	div.minisidelinks dl dt a:hover {
		background-color: yellow;
		color: blue;
		text-align: center;
	}
	div.minisidelinks dl dd {
		margin: 3px 3px 10px 3px;
		padding: 0px;
		font-size: 70%;
		color: white;
	}
	div.minisidelinks dl dd img {
		border-width: 0px;
		vertical-align: top;
		margin-bottom: 3px;
	}



/* ――――――――――――――――――――――――――― */
/* ■レガシー環境以外のほぼすべて（横幅 320px以上の場合） */
/* ――――――――――――――――――――――――――― */
@media all and (min-width: 320px) {

	/* ------------- */
	/* ▽ひとことBOX */
	/* ------------- */
	#hitokotobox {
		margin-bottom: 1em;
	}
	#hitokotobox .hitokoto {
		width: 240px;
		height: 201px;
		position: relative;
		margin: 0px;
		padding: 49px 18px 7px 18px;
		-moz-box-sizing: border-box;	-webkit-box-sizing: border-box;	box-sizing: border-box;
		background-image: url("/common/img/set1/board1.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	#hitokotobox .hitokoto-body {
		margin: 0px;
		padding: 0px;
		width: 100%; /*204px;*/
		height: 100%; /*max-height: 145px;*/
		overflow: auto;
		font-size: 95%;
		color: #550000;
		line-height: 1.35;
	}
	#hitokotobox .hitokoto-body .date {
		padding: 0px;
		color: #aa0000;
		background-color: transparent;
		border-bottom: 2px solid #aa0000;
		display: block;
		line-height: 1.2;
		margin-bottom: 5px;
	}
	#hitokotobox .hitokoto-body .body {
		display: inline-block;
		min-height: 95px;
	}
	#hitokotobox .hitokoto-body .body a:link {
		color: darkblue;
	}
	#hitokotobox .hitokoto-body .hitokoto-poweredby {
		display: block;
		font-size: 0.7em;
		line-height: 1;
		text-align: right;
		border-top: 1px dotted brown;
		padding-top: 5px;
		margin-top: 4px;
	}
	#hitokotobox .hitokoto-body .hitokoto-poweredby a {
		color: #800;
	}

	#hitokotobox .hitokoto-log {
		position: absolute;
		top: 50px;
		right: 36px;
		text-align: right;
		width: 5em;
		height: 1em;
		line-height: 1;
		font-size: 0.65em;
	}
	#hitokotobox .hitokoto-log a {
		text-decoration: none;
		color: brown;
	}
}
/* ―――――――――――――――――――――――――― */
/* ■タブレット＆狭いPCスタイル（横幅 768px以上の場合） */
/* ―――――――――――――――――――――――――― */
@media all and (min-width: 768px) {

	/* =================== */
	/* ▼コンテンツINDEX内 */
	/* =================== */
	/* ------------------ */
	/* ▽大分類コンテンツ */	/* ※3段組にする */
	/* ------------------ */
	#csetA { float: left; width: 33.3%; }
	#csetB { float: left; width: 33.3%; }
	#csetC { float: left; width: 33.3%; }
	#csetA div.section { margin: 0px; padding: 1em 0px 0px 1em; }
	#csetB div.section { margin: 0px; padding: 1em 0px 0px 1em; }
	#csetC div.section { margin: 0px; padding: 1em 1em 0px 0.9em; }

	div.contentsset h2 span.jp {
		font-size: 60%;
	}

	/* ==================== */
	/* ▼下部サブガイド領域 */	/* ※3段組にする */
	/* ==================== */
	div.subguides {
		display: table;
		border-spacing: 1em 0px ;
		margin: 0px;
		padding: 0px;
	}
	div.subguides div.subguide1 {
		float: none;
		display: table-cell;
		margin: 0px;
	}
	div.subguides div.subguide2 {
		float: none;
		display: table-cell;
		width: 120px;
		margin: 0px;
	}
	div.subguides div.subguide3 {
		float: none;
		display: table-cell;
		width: 120px;
		margin: 0px;
	}

	/* ------------------ */
	/* ▽ミニサイドリンク */
	/* ------------------ */
	div.minisidelinks {
		margin: 0px;
	}
	div.minisidelinks h2 {
		margin-top: 1em;
	}

}

/* ―――――――――――――――――――― */
/* ■通常PCスタイル（横幅 920px以上の場合） */
/* ―――――――――――――――――――― */
@media all and (min-width: 920px) {

	/* ================= */
	/* ▼コンテンツINDEX */
	/* ================= */
	/* ------------------ */
	/* ▽大分類コンテンツ */
	/* ------------------ */
	div.contentsset h2 span.jp {
		font-size: 75%;
	}

	/* ============================== */
	/* ▼上部ガイド領域内のコンテンツ */
	/* ============================== */
	/* ------------- */
	/* ▽更新履歴BOX */
	/* ------------- */
	#whatsnewbox ul#updatelist li {
		margin: 3px;
		padding: 0px;
		border-bottom: 0px none;
		line-height: 1.3;
	}

	/* ==================== */
	/* ▼下部サブガイド領域 */	/* ※左右広めの3段組にする */
	/* ==================== */
	div.subguides div.subguide1 {
	}
	div.subguides div.subguide2 {
		width: 150px;
	}
	div.subguides div.subguide3 {
		width: 150px;
	}

}

/* ―――――――――――――――――――― */
/* ■広大PCスタイル（横幅1500px以上の場合） */
/* ―――――――――――――――――――― */
@media all and (min-width: 1500px) {

	/* =================== */
	/* ▼コンテンツINDEX内 */
	/* =================== */
	/* ------------------ */
	/* ▽大分類コンテンツ */	/* ※5段組にする */
	/* ------------------ */
	#csetA { float: left; width: 38%;   display: table; }
	#csetB { float: left; width: 23.8%; display: table; }
	#csetC { float: left; width: 38%;   display: table; }
	#csetA div.section { margin: 0px; padding: 1em 0px 0px 1em; display: table-cell; width: 50%; }
	#csetB div.section { margin: 0px; padding: 1em 0px 0px 1em; display: table-cell; width: 50%; }
	#csetC div.section { margin: 0px; padding: 1em 0px 0px 1em; display: table-cell; width: 50%; }
	#csetC #secInfos { padding-right: 0.9em; } /* 最後のセクションには右側に余白が要る */

}

/* ―――――――――――――― */
/* ■高解像度ディスプレイの場合 */
/* ―――――――――――――― */
@media screen and (-webkit-min-device-pixel-ratio : 1.5)
	, screen and (min-moz-device-pixel-ratio : 1.5)
	, screen and (-o-min-device-pixel-ratio : 3/2)
	, screen and (min-device-pixel-ratio : 1.5) {

	/* ------------- */
	/* ▽ひとことBOX */
	/* ------------- */
	#hitokotobox div.hitokoto {
		background-image: url("/common/img/set1/board1-2x.png");
		background-size: 100% auto;
	}

}