@charset "utf-8";
/* 
東京鞍陵会
標準構造 CSS（Bootstrap3と併用）
v2023a by 池村
*/

/* ======================= */
/* カスタムプロパティ（変数） */
/* ======================= */
:root {
	--menuarea-bg: #77bbff; /* PCで左、モバイルで下メニューエリアの背景色を一括定義 */
}


/* ======================= */
/* 全般定義 */
/* ======================= */

* {
	margin: 0;
	padding: 0;
}

body {
	/* utf-8 でフォント指定無し→IEでうまくない */
	font-family: Meiryo, "Helvetica Neue", Helvetica, "Yu Gothic Medium", "ＭＳ Ｐゴシック", "Lucida Grande", "Hiragino Kaku Gothic ProN", sans-serif;
	overflow-y:scroll; /* 右スクロールバー常時表示　*/
	background: #d0e8ff;
	width: 100%;
}

a {
	color: #0066ff;
}
a:hover {
	color: #ff0000;
}


.sp-hla {
	/*
	padding-left: 8px;
	line-height: 1.7em;
	border-left: #99cc99 8px solid;
	*/
}



/* ======================= */
/* 標準値Override */
/* ======================= */

@media print {
	/* 印刷時にリンク先が印字されるbootstrapの標準機能をキャンセル */
	a[href]:after {
		content: "" !important;
	}
	abbr[title]:after {
		content: "" !important;
	}
}

div {
	box-sizing: border-box;
}

h1 {
	margin-top: 0;
	margin-bottom: 0;
}

h2, h3 {
	font-weight: bold;
}

.container {
  /* margin: 0 auto; ←もともと定義済 */
}

.sp-h1h {
	display: none;
}

.h-yk {
	margin: .4em;
	padding: .3em;
	font-size: 1.6em;
	border-left: #ff9900 7px solid;
	color: #003300;
}

.h-kz {
	margin: .4em;
	padding: .3em;
	font-size: 1.6em;
	border-left: #ff7799 7px solid;
	color: #003300;
}

.h-jg {
	margin: .4em;
	padding: .3em;
	font-size: 1.6em;
	border-left: #aaccff 7px solid;
	color: #000055;
}

.h-vm {
	margin: .4em;
	padding: .3em;
	font-size: 1.6em;
	border-left: #d0f055 7px solid;
	color: #000055;
}

.h-pb {
	margin: .4em;
	padding: .3em;
	font-size: 1.6em;
	border-left: #aaddff 7px solid;
	color: #000055;
}


/* 左ナビゲータ（PCのみ） */
.div-nav {
	background: var(--menuarea-bg);
}
	.div-nav a {
		color: #ffffff;
	}
	.div-nav a:hover {
		color: #ccddff;
	}

.nav-tabs {
	margin-top: 10px;
}
.nav-tabs a {
	color: #339933;
	border-radius: 10px 10px 0 0 !important;
	border-top: #99cc99 1px solid !important;
	border-left: #99cc99 1px solid !important;
	border-right: #99cc99 1px solid !important;
	background-color: #d8f8dd !important;
}
.nav-tabs a:hover {
	color: #007700;
	background-color: #aaeeaa !important;
}
.nav-tabs > li.active > a {
	color: #ffffff;
	background-color: #339933 !important;
}
.nav-tabs > li.active > a:hover {
	color: #ffffff;
}


/* ======================= */
/* 楕円ナビゲータ */
/* （PCは左、モバイルは下） */
/* ======================= */

.nav-pills {
	padding-bottom: 12px;
}
.nav-pills a {
	color: #0066aa !important;
	background-color: #f0f0ff !important; /* 楕円ナビゲータ（非選択）の背景色 */
	border: #f0f0ff 1px solid;
	border-radius: 24px !important;
}
.nav-pills a:hover {
	/* color: #33cc66 !important; */
	background-color: #ccddff !important; /* 楕円ナビゲータ（マウスオーバー時）の背景色 */
}

.sp-user-pill {
	/* display: inline-block; */
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
}

.sp-user-pill .active a, .sp-user-pill .active a:hover {
	color: #ffffff !important;
	background-color: #405088 !important; /* 楕円ナビゲータ（選択されている時）の背景色 */
	border-radius: 24px !important;
}

/* ======================= */
/* 構成部別特性 */
/* ======================= */
/* 最大幅960px（モバイル時100%）の属性をもつものはすべてこのセクション */

#sp-panel-head {
	max-width: 960px;
	padding: 0;
	background: #ffffff;
	/* border-radius: 16px 16px 0 0; */
}

#sp-container {
	max-width: 960px;
	padding: 0;
	background: #ffffff;
	/* border-radius: 0 0 16px 16px; */
	/* box-shadow: 0 -4px 7px 0 rgba(0,0,0,.2) inset; */
}

#main-cols {
	margin: 0;
	padding: 0;
	max-width: 960px; /* 左カラムをはみ出させないために重要 */
	/* background: #99cc77; */
	background: #ffffff;
}


#sp-left {
	margin: 0;
	height: 100%;
	/*
	margin-left: 15px;
	margin-right: -15px;
	*/
	padding-top: 15px;
	background: var(--menuarea-bg);
}
	#sp-left p {
		margin-bottom: 1.5em;
	}

#sp-right {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

/* 下部 */
#bottom-col {
	max-width: 960px;
	margin: 0 auto;
}


	
/* スマホの場合のみ　下ナビゲータ */
#sp-mobile-bottom {
	width: 98%;
	margin: 0 auto;
	padding-top: .6em;
	text-align:center;
}

/* 最下部フッター */
#footer-panel {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

#sp-footer {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	/* background: #559955; */
	color: #7799aa;
}
	#sp-footer p {
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 1.2em;
	}

/* 最大幅960pxの要素は、画面幅狭いときは100％付近 */
@media screen and (max-width: 768px) {
	#sp-panel-head {
		width: 98%;
	}
	#sp-container {
		width: 98%;
	}
	#main-cols {
		width: 98%;
	}
	#bottom-col {
		width: 100%;
	}
	#footer-panel {
		width: 100%;
	}
}

/* ======================= */
/* メニュー部 */
/* ======================= */

/* jQuery制御プルダウンメニュー */
/* 第一階層メニュー　緑色バー部） */
#nx-menubar {
	background: #66cc66;
	width: 100%;
	z-index: 10;
}
	#nx-menubar ul#nx-menu {
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0;
		height: 40px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
		#nx-menubar ul#nx-menu li {
			display: block;
			/* width: 20%; */ /* 5分割 */
			width: 16.66%;  /* 6分割 */
			height: 40px;
			float: left;
			list-style-type: none;
			position: relative;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			/* border-top: #55cc55 1px solid; */
			/* border-left: #55cc55 1px solid; */
			border-top: #77cc88 1px solid;
			border-left: #77cc88 1px solid;
			color: #ffffff;
			text-align: center;
			font-size: 1.1em;
			line-height: 40px; /* #sp-menu のheightと揃える */
		}
		/* 画面幅狭いときは50％で2列 20200701 */
		@media screen and (max-width: 768px) {
			#nx-menubar ul#nx-menu li {
				width: 50%;
			}
			/* 20200701 サイトマップだけ100％ */
			#nx-menubar ul#nx-menu li#sitemap {
				width: 100%;
			}
		}

		#nx-menubar ul#nx-menu li.nx-disabled {
			/*
			color: #77cc77;
			cursor: not-allowed;
			*/
		}
		#nx-menubar ul#nx-menu a {
			display: block;
			width: 100%;
			height: 100%;
			background: #33aa44; /* 緑色バー・メイン部（非選択）の背景色 */
			color: #ffffff;
			text-decoration: none;
		}
		#nx-menubar ul#nx-menu li.nx-active a {
			background: #307740; /* 緑色バー・メイン部（選択されているカテゴリ）の背景色 */
			color: #ffffff;
		}
		
		#nx-menubar ul#nx-menu a:hover {
			background: #338844; /* 緑色バー・メイン部（マウスオーバー時）の背景色 */
			color: #ffffff;
			/* text-decoration: underline; */
		}
		
/* メニューバー直後の Clear Hack */
#nx-menubar ul#nx-menu { zoom:1; }
#nx-menubar ul#nx-menu:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }

/* 緑バー　プルダウンメニュー部 */
#nx-menubar ul#nx-menu ul.nx-sub {
	background: #77cc55;
	opacity: .94;
	box-shadow: 16px 4px 10px 6px rgba(32, 64, 32, .4);
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	z-index: 20;
}

	#nx-menubar ul#nx-menu ul.nx-sub li {
		width: 110%;
		height: 35px;
		font-size: 100%;
		line-height: 35px; /* heightと揃える */
	}

		#nx-menubar ul#nx-menu ul.nx-sub li a {
			background: #44b055; /* 緑色バー・プルダウン部（非選択）の背景色 */
			color: #ffffff;
			text-decoration: none;
		}
		#nx-menubar ul#nx-menu ul.nx-sub li a:hover {
			background: #338844; /* 緑色バー・プルダウン部（マウスオーバー時）の背景色 */
			color: #ffffff;
		}

@media screen and (max-width: 768px) {
	/* モバイル時のサブメニューのバランスと見た目改善media query */
	#nx-menubar ul#nx-menu ul.nx-sub {
		width: 90%;
		/* visibility: hidden; */
	}
	#nx-menubar ul#nx-menu ul.nx-sub li a {
		/* モバイル時は重なりが判りやすいように色を反転 */
		background: #f0ffcc;
		color: #339933;
	}
}

/* ======================= */
/* 汎用タイル・お花タイル2020 */
/* ======================= */

ul.tile-container {
	display: block;
	list-style-type: none;
	width: 100%;
	margin: 0 auto;
	padding: 1px;
	border: none;
	/* text-align: center; */
}
		
.iblock-tile {
	display: inline-block;
	width: 144px;
	min-height: 160px;
	margin: 2px;
	padding: 1px;
	border: none;
	/* border: #ff9900 1px solid; */
	background: #ffffff;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
	vertical-align: top;
	
}

.ohana-tile {
	display: inline-block;
	width: 112px;
	min-height: 128px;
	margin: 1px;
	padding: 1px;
	border: none;
	/* border: #ff9900 1px solid; */
	background: #ffffff;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
	vertical-align: top;
	
}
	.ohana-tile img {
		width: 108px;
		height: 108px;
		object-fit: cover;
		border-radius: 5px;
	}

.saibai-tile {
	display: inline-block;
	width: 172px;
	/* min-height: 45px; */
	margin: 2px;
	padding: 1px;
	border: #0077cc 1px solid;
	border-radius: 6px;
	background: #e8f0ff;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
	line-height: 2em;
	vertical-align: middle;
}

.stmap-tile {
	display: inline-block;
	width: 154px;
	/* min-height: 45px; */
	margin: 2px;
	padding: 1px;
	border: #aaccaa 1px solid;
	border-radius: 6px;
	background: #f8f8e0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
	line-height: 2.5em;
	vertical-align: middle;
}


.bnr-tile {
	display: inline-block;
	width: 152px;
	max-width: 98%;
	margin: 2px 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
}
	.bnr-tile img {
		width: 144px;
		max-width: 98%;
		border: none;
		border-radius: 16px;
	}

.misc-tile {
	display: inline-block;
	width: 280px;
	max-width: 80%;
	margin: 1px
	padding: 5px;
	border: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
	vertical-align: top;
}
	.misc-tile p {
		color: #559955;
		font-size: .9em;
		text-align: center;
		line-height: 1.1em;
	}

/* ======================= */
/* トピックボックス */
/* ======================= */

div.sp-topic-box {
	width: 97.5%;
	/* margin: 0; */
	padding: 8px;
	border: #80a080 1px solid;
	border-radius: 6px;
	margin: 8px 2px 4px 8px;
	background: #ffffff;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 1.05em;
	line-height: 1.4em;
}
	div.sp-topic-box p {
		margin: 2px 4px;
		padding: 0;
	}

div.sp-topic-tile {
	float: left;
	width: 144px;
	height: 216px;
	margin: 4px;
	padding: 1px;
	border: none;
	/*
	border: #cccccc 1px solid;
	border-radius: 6px;
	*/
	background: #ffffff;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-align: center;
}
	div.sp-topic-tile p {
		margin: 2px 4px;
		padding: 0;
	}

	
div.tbox-color1 {
	border-color: #f87777;
	background: #fff8f8;
}

div.tbox-color2 {
	border-color: #33aa55;
	background: #f6fff0;
}

div.tbox-color3 {
	border-color: #779933;
	background: #f9ffd8;
}

div.tbox-color-x {
	border-color: #f0f0f0;
	background: #cceecc;
}

h2.tbox-h2a {
	font-size: 1.4em;
	margin: .1em 0;
}

h2.tbox-h2m {
	font-size: 1.2em;
	margin: .3em;
}

h2.tbox-h2s {
	font-size: 1.1em;
	margin: .1em;
}

h3.tbox-h3m {
	font-size: 1.1em;
	margin: .1em .3em;
	color: #55aa33;
}
h3.tbox-h3g {
	margin: .1em;
	font-size: 1.1em;
}
h3.tbox-h3v {
	margin: .2em;
	font-size: 1.25em;
}
	h3.tbox-h3v small {
		font-size: .8em;
		color: #777777;
	}
h3.tbox-h3a {
	font-size: 1.25em;
	color: #007722;
	margin: 7px 0;
}
h3.tbox-h3b {
	font-size: 1.25em;
	color: #009966;
	margin: 7px 0;
}

h3.kakokiji {
	font-size: 1.2em;
	margin: .6em .3em .1em .3em;
	padding-top: .2em;
	color: #007722;
	border-top: #cccccc 1px solid;
}
	h3.kakokiji small {
		font-size:.8em;
		color: #555555;
	}

h3.h3aks {
	clear: both;
	margin-top: 0.8em;
	margin-bottom: 0;
	padding-top: 0.2em;
	font-size: 1.1em;
	color: #007700;
	border-top: #d8f8d8 1px solid;
}

div.sp-f-left {
	float: left;
}
div.sp-f-right {
	float: right;
}

.sp-news-prev {
	float: left;
	width: 48%;
	padding-bottom: 12px;
}
.sp-news-next {
	float: right;
	width: 48%;
	text-align: right;
	padding-bottom: 12px;
}
.sp-news-prev p, .sp-news-next p {
	margin: 0;
	padding: 0;
}



span.sp-tt1 {
	background: #0055aa;
}
div.sp-tb1 {
	border-color: #0055aa;
}

img.i-left {
	float: left;
	margin: 2px 6px 6px 0;
}
img.i-right {
	float: right;
	margin: 2px 0 6px 6px;
}


.sp-imgs {
	width: 100%;
	margin: 8px 5px 8px 0;
	padding: 3px 6px;
	background: #ffffff;
	border-radius: 0;
	border: none;
}
.sp-imgs img {
	margin: 3px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
}

.sp-news-headline {
	margin: 3px;
	padding: 2px 4px;
	border-top:#bbddbb 1px solid;
}
.sp-news-headline2 {
	margin: 3px;
	padding: 2px 4px;
	border-top:#ffbbbb 1px solid;
}
.sp-news-headline3 {
	margin: 3px;
	padding: 2px 4px;
	border-top:#8888dd 1px solid;
}
.sp-columns-headline {
	margin: 8px;
	padding: 4px;
	border-top:#ffccdd 1px solid;
}

/* 汎用 */
.attention1 {
	color: #ff0055;
}

.attention2 {
	color: #0077cc;
}

.latin-name {
	font-family:"Times", serif;
	font-size: 1.1em;
	font-style: italic;
}

.rem-warning {
	font-weight: bold;
	color: #ff0033;
}

.hover-zoom img {
	transition: .5s all;
}
	.hover-zoom img:hover {
		transform: scale(1.1, 1.1);
		transition: .5s all;
	}



	
/* モジュール記事中の強調表示 */
strong.st-mod {
	font-size:1.2em;
	color:#ff5555;
}
strong.st-mod2 {
	font-size:1.2em;
	color:#005500;
}

strong.mod-ema1 {
	font-size:1.5em;
	color:#ff3333;
}
strong.mod-ema2 {
	font-size:1.15em;
	color:#ff3333;
}
strong.mod-emb1 {
	font-size:1.5em;
	color:#227722;
}
strong.mod-emb2 {
	font-size:1.15em;
	color:#227722;
}




/* ======================= */
/* その他 */
/* ======================= */

/* ページの最上部へ飛ぶボタン（フェードイン）：画面表示のみ */
@media screen {
	a#sp-navi2top {
		display: block;
		position: fixed;
		right: 10px;
		bottom: 10px;
		padding: 4px;
		border-radius: 4px;
		color: #ffff00;
		background: #3333cc;
		opacity: 0.7;
		text-decoration: none;
	}
	a#sp-navi2top:hover {
		opacity: 0.95;
		text-decoration: none;
	}
}
/* 印刷時は要らないので */
@media print {
	a#sp-navi2top {
		visibility: hidden;
	}
}