@charset "utf-8";

/*---------------------------------------------------------------------------------------------------------*/
/* 2026/04/07 @001 h1からh6までの設定を、CssStyle.cssからCssH1toH6Info.cssに分離した                       */
/*---------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/*【PC用とスマホ用の共通の設定】サイト全体への適用
/*---------------------------------------------------------------------------*/


/*見出しタグ(h1-h6)として使用する。【PC用とスマホ用の共通の設定】
---------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6{
	line-height:100%;
	text-overflow: ellipsis;/* 要素がはみ出したときに「…」を付けてくれる。ただしこれだけでは効かず、改行させない「white-space: nowrap」と、はみ出した要素を隠す「overflow: hidden」をセットで使う */
	white-space: nowrap;
	overflow: hidden;
}

h1{
	position:relative;/*左の飾り線のために必要*/
	/*margin 上、右、下、左*/
	margin: 8px 0px 8px 0px;
	margin: 8px 0px 2px 0px;
	/* padding 上下、左右(emはフォントサイズの高さを 1 )(上、右、下、左) */
	padding:.4em .4em .2em .8em;
	padding: 8px 0px 12px 20px;

/*	font:bold 22px/1.2 Arial, Helvetica, sans-serif;*/
/*	font:bold 18px/1.0 Arial, Helvetica, sans-serif;*/

	font-weight:normal;
	font-size:24px;

	color:#666;
	color:#444;
	background:#ccc;
	border-top:#00A solid 4px;
	border-right:#999 solid 1px;
	border-left:#ccc solid 1px;
	border-bottom:#00A solid 4px;
	text-shadow:1px 1px 0 rgba(255,255,255,1);
	box-shadow:0 0 0 1px rgba(255,255,255,0.5) inset;
	background-image: linear-gradient(to bottom,
          rgba(180, 180, 180, 1.0),
          rgba(253, 253, 253, 1.0) 25%,
          rgba(240, 240, 240, 1.0) 30%,
          rgba(253, 253, 253, 1.0) 36%,
          rgba(225, 225, 225, 1.0) 50%,
          rgba(200, 200, 200, 1.0) 80%,
          rgba(170, 170, 170, 1.0)
          );
	background-image: linear-gradient(to bottom,
          rgba(150, 150, 255, 1.0),
          rgba(253, 253, 255, 1.0) 25%,
          rgba(240, 240, 255, 1.0) 30%,
          rgba(253, 253, 255, 1.0) 36%,
          rgba(225, 225, 255, 1.0) 50%,
          rgba(200, 200, 255, 1.0) 80%,
          rgba(120, 120, 255, 1.0)
          );
}
h1:before{
	content:" ";
	position:absolute;
	top:0;
	left:5px;
	width:0;
	height:100%;
	border-left:#ccc solid 1px;
}
h1:after{
	content:" ";
	position:absolute;
	top:0;
	left:6px;
	width:0;
	height:100%;
	border-right:#eee solid 1px;
}


h2 {
	position: relative;
	/*margin 上、右、下、左*/
	margin: 8px 5px 8px 4px;
	/*padding 上、右、下、左*/
	padding: 10px 0px 0px 45px;
	padding: 8px 0px 0px 45px;

	min-height:26px;
	min-height:22px;
	font-size: 18px;
	border: 1px solid #ccc;
	border-top: 3px solid #00F;
	border-bottom: 3px solid #00F;
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	background-image: linear-gradient(0deg, #FFF 0%,#EEE 60%, #EEE 90%,#FFF 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;

}
h2::after {
	position: absolute;
	top: 2px;
	left: 5px;
	z-index: 2;
	content: '';
	width: 26px;
	height: 26px;
	/* background-color:#F00; */
	background-image: radial-gradient(circle at 20px 7px,#FCC , #F00);
	/* border: 4px solid #3A3; */
	border-radius: 100%;
	border-radius: 50%;
}

h3,h4,h5,h6 {
	position: relative;
	/*margin 上、右、下、左*/
	margin: 5px 15px 5px 8px;
	/*padding 上、右、下、左*/
	padding: 8px 0px 0px 40px;
	max-width:330px;
	max-width:75%;
	max-width:85%;
	min-height:22px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-top: 3px solid #3A3;
	border-bottom: 3px solid #3A3;
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;

}
h4,h5,h6 {
	position: relative;
	/*margin 上、右、下、左*/
	margin: 5px 15px 5px 16px;
	max-width:70%;
	max-width:80%;
}
h3::after,h4::after,h5::after,h6::after {
	position: absolute;
	top: 4px;
	left: 5px;
	z-index: 2;
	content: '';
	width: 14px;
	height: 14px;
	border: 4px solid #3A3;
	border-radius: 100%;
}


/*【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】*/
/*【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】*/
/*【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】【スマホ用の設定】*/
/*---------------------------------------------------------------------------*/
/*【スマホ用の設定】スクリーン・サイズが640pixel以下の場合*/
/*---------------------------------------------------------------------------*/
@media screen and (max-width: 640px) {


/******************************************/
/*共通部分の置き換え【スマホ用の設定】(開始)*/
/******************************************/

h1{
	/*margin 上、右、下、左*/
	margin: 2px 0px 3px 0px;

	font-weight:normal;
	font-size:16px;
}

h2{
	font-size : 16px ;
}

h3,h4,h5{
	font-size : 15px ;
}


/*==================================================*/
/* 【重要】この下は、最後の括弧が１つある。 */
/*==================================================*/

}