@charset "utf-8";
@import url('lib/css/jbn.css');
@import url('lib/css/tree.css');
@import url('lib/css/header_menu1.css');

/* 基本要素 */
body {
	margin: 0;
	padding: 0;
	background-color: white;
	font-size: 1em;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo;
}


p {
	font-size : 1.2em;
	line-height : 1.62em;
	margin: 15px 0 15px 0;
}
pre {
	font-size : 1.1em;
}

a { color: blue; }
a.green { color: yellowgreen;font-size:0.9em }
a:hover {
	color: orange;
	text-decoration: none;
}
a img { transition: opacity 0.2s linear; }
a:hover img { opacity: 0.7; }


h2{
	font-size : 1.5em;
	margin: 20px 0 10px 0;
	padding-top : 20px;
	padding: 0.25em 0.5em;
	background: #f1f8ff;
	border-left: solid 2em #5c9ee7;
}

h2:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	position: relative;
	padding: 0em;
	color: white;
	font-weight: normal;
	left: -1.85em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

h3{
	font-size: 1.4em;
	margin: 10px 0 10px 0;
	display: inline-block;
	background:linear-gradient(to bottom, transparent 78%,#66ccff 78%);
}
h4{
	font-size: 1.1em;
	margin: 20px 0 10px 0;
}

li {
	font-size : 1.2rem;
}

ol {
	padding: 0 0.52em;
	position: relative;
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
}

ol li {
	position: relative;
	padding-left: 0px;
	list-style-type: none!important; /*数字を一旦消す*/
	line-height: 1.5em;
}

ol li:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*以下数字のデザイン変える*/
	display:inline-block;
	background: #5c9ee7;
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 15px;
	border-radius: 50%;
	left : -25px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

img {
	border:none;
	margin: 20px 0 20px 0;
	vertical-align: middle;
}

table {
	border: solid 1px #000000;
	border-collapse: collapse;
	margin : 15px 0 15px 0;
}

th{
	background: navy;
	color : white;
	font-weight : 700;
}

td, th {
	font-size: 1em;
	border: 1px black solid;
	padding : 10px;
	vertical-align: top;
}


blockquote{
	display:block;
	width: 70%;
	background: whitesmoke;
	padding: 30px 50px 30px 50px;
	margin: 15px 20px 15px 20px;
	position: relative;
	border-radius: 10px; /* Firefox13以降 */
	border: 1px double #5485f4;;
	
	/*フォント*/
	font-family: Georgia, serif;
	color: #666;
	font-style: italic;
}

blockquote::before{
	content: "\201C"; /*Unicode for Left Double Quote*/
	color: blue;
	
	/*フォント*/
	font-size: 40px;
	font-weight: bold;
	
	/*位置・サイズ*/
	position: absolute;
	left: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
}

blockquote::after{
	content: "\201D";
	/*フォント*/
	font-size: 40px;;
	font-weight: bold;
	color: blue;
	
	/*位置・サイズ*/
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 30px;
	height: 30px;

}

cite{
	font-size : 1em;
}


/** コンテンツ全体 **/

#container {
	width: 96%;
	margin: 0 auto;
	overflow: hidden;
}
#header_article{
	margin-bottom: 10px;
}


/* メインコンテンツ */

#main_content{

	width : 98%;
	background-color: #FFF;
}

.hide{
	display : none;
}



/* タブパネル	*/


.edit_btn{
	margin-left : 10px;
	font-size : 0.7em;
}

/****コンテンツ****/

/* custom */


/* パンくずリスト	*/

#main_breadcrumb{
	margin: 0 0 15px 0;
	padding : 0px;
}
#main_breadcrumb ul{
	margin : 0;
	padding : 0;
	list-style: none;
	overflow: hidden;
}

#main_breadcrumb ul li {
	display:inline;/*横に並ぶように*/
	list-style: none;
	font-weight: bold;/*太字*/
}
#main_breadcrumb li:first-child a:before {
	/*家アイコン*/
	font-family: "Font Awesome 5 Free";
	content: '\f015';
	font-weight: 900;
	font-size: 1.1em;
	color: #2e7fea;
}
#main_breadcrumb li:befor {/* ?を表示*/
	all: initial;
}
#main_breadcrumb li:after {/* ▶を表示*/
	font-family: "Font Awesome 5 Free";
	content: '\f0da';
	font-weight: 900;
	padding: 0 8px;
	color: silver;
}

#main_breadcrumb li:last-child:after {
  content: '';
}


#h1_cate:before{
	content:"【";
}
#h1_cate:after{
	content:"】";
}

ul#kaiwa_theme,
ul.kaiwa{
	position: relative;
}
.li_inline_b ul li,
#kaiwa_theme ul li {
  display: inline-block;
  margin: .3em .3em .3em .3em;
  height: 28px;
  line-height: 28px;
  padding: 0 1em;
  background-color: white;
  border: 3px solid #99cc00;
  color:black;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 1.2em;
  text-decoration: none;
  -webkit-transition: .2s;
  transition: .2s;
  list-style: none;
}
.kaiwa_keyword ul li{
	border: 3px solid #FF348E;
	color: #FF348E;
}
#kaiwa li{
	position: relative;
	padding: 20px;
	background-color: white;
	border: 3px solid #ade0ff;
	border-radius: 30px;
	margin-left: 4em;
	margin-bottom: 2em;
  list-style: none;

}
#kaiwa li:before{
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: #ade0ff;
	left: -35px;
	bottom: 15px;
	width: 30px;
	height: 30px;
}
#kaiwa li:after{
	content: '';
	position: absolute;
	display: block;
	border-radius: 50%;
	background-color: #ade0ff;
	left: -55px;
	bottom: 10px;
	width: 15px;
	height: 15px;
}

.kanren ul li{
	border: 3px solid #6A60CB;
}
.kanren ul li a{
	color: #6A60CB;
	text-decoration: none;
}

.content ul{
	margin:10px 0 20px 0;
}
.content li{
	line-height: 1.5;
	margin: 20px;
	padding: 0.5em 0 0.5em .2em;
	border-bottom: dashed 1px silver;
	list-style-type: disc;
}
.inline_li li{
	display: inline;
}
div.sidebar{
	margin:0 0 20px 0;
}
div.sidebar ul{
	margin:0 0 0px 20px;
	list-style: none;
}
div.sidebar ul li{
	margin: 10px 0 0px 0px;
}

/* ---------------------------------
メディアクエリー
--------------------------------- */
@media screen and (max-width : 480px){

	/* 基本要素 */

	#h1_p1{
		margin : 0 2px 0 6px;
	}
	
	h2{
		margin-left : 2px;
	}
	
	img {
		max-width: 100%;
		height : auto;
	}
	
	p{
		margin-bottom : 6px;
	}
	
	/* Layout */
	#container {
		width: 100%;
	}
	#main_content{

		width : 100%;
	}

	.rk_af td {
		display: block;
		width: 100%;
	}

	#main_breadcrumb{
    display: block;
    position: relative;
	}
}