@charset"utf-8";

/*============================================
全般的なスタイル
============================================*/

* {
	margin:0; padding:0;			/*全要素のマージン(外側余白)・パディング（内側余白）をリセット*/
						/*outline: 2px solid red; 余計な余白を探す*/
}

			

body {
	background-color:#cccccc;		/*ページ全体の背景色 明るいグレー*/
	background-image:url("images/bg_body.jpg");	/*ウェブページ全体の背景画像（画像が表示されない環境に備え上に背景色も設定しておく）*/
	font-size:96%;					/*  フォントサイズを96%にする */
	font-family: "ＭＳ ゴシック",sans-serif;　/* フォントの種類をゴシック系にする */
	line-height:1.5;			/* 行の高さを1.5倍にする */
	color:#333333;				/* 文字色を濃い目のグレーにする */
	margin: 0px;				/* ヘッダを画面全体に広げるための設定1 */				
   	-webkit-text-size-adjust: 100%;		/* ヘッダを画面全体に広げるための設定2 */
}

div#pagebody {
	width:1000px; margin:0 auto;		/*内容全体のセンタリング　上下・マージン(外側余白)無し0：左右・自動算出*/
	background-color:#fffdfa;		/*内容全体の背景色 =white*/
	background-image:url("images/bg_pagebody.png"); /*コンテンツ全体の背景画像（画像が表示されない環境に備え上に背景色も設定しておく）*/
	background-repeat:repeat-y;		/*背景画像を縦方向に繰り返す*/
 	padding: 0px 0px;			/* ヘッダとメニューの間の空白を消すためのpadding */
}

img {
	border:0;				/*画像のボーダーを0にする(リンク設定したときに付けられるボーダーを消す)*/
	display: block;				/*余白対策・ブロック表示にする*/
 	vertical-align: bottom;			/*余白対策*/
}									

p{
	width:730px;				/*幅の指定*/
	margin:10px 20px 10px 10px;		/*マージン(外側余白)*/
	line-height:1.55;			/* 行の高さを1.55倍にする */
 	vertical-align: bottom;			/*余白対策*/
}



hr{
	clear:both;				/*フロート配置をクリアする*/
	width:760px;				/*幅の指定*/
	margin:10px 0px;			/*上下マージン(外側余白)10px、左右マージン0px*/
	border:1px dotted #cccccc;		/*内容の区切りをグレーの点線表示にする*/
}


/*============================================
ヘッダ
============================================*/


.hwrapper{					/*モニター全体に広げるヘッダー*/
   
	width: 100%;
	min-width: 1000px;
 	height:80px;				/*ヘッダ部分の高さ*/
	font-size: 0;
 	background-image:url("images/bg_body.png")
   	background-color: #ffffff;
}


.header{					/*ヘッダー内に画像やテキストを置く枠*/
  	width: 100%;	
	min-width: 1000px;
	margin: 10px auto;			/*中央寄せにする*/
 	padding: 2px 0px;			/* ヘッダとメニューの間の空白を少なくするためのpadding */
	background: linear-gradient(to right,#9999ff 0%,#ffffff 10% 90%,#9999ff 100%);
			　			/*background-repeat:no-repeat;背景画像を繰り返さない*/
}

.header h1{					/*画像が表示されない場合のテキストの調整*/
	font-size:18px;				/*フォントのサイズ*/
	font-family:Arial,Helvetica,sans-serif; /*フォントの種類*/
		
}

.header h1 a {text-decoration:none;}		/*リンクの下線を無くす*/

.header h1 img{

}

div#header{					/* 現在未使用 */
	height:85px;				/*ヘッダ部分の高さ*/
		
}






/*============================================
メインメニュー
============================================*/

ul#menu {					/*menuというid名を付けられているul要素をスタイル適用の対象にする*/
	width:960px; height;50px;		/*メインメニュー部分の幅と高さ*/
 	margin:0px 20px;			/*上下マージン(外側余白)0px、左右マージン20px　(1000px-960px)÷2=20px */
	
	position:sticky;			/*メインメニュー位置固定 */
        top: 0;					/*固定位置*/
	left: 0;	
}

#menu li {					/*menuというid名が付けられた要素の下にあるli要素にスタイルを適用*/
	list-style-type:none;			/*リストマーカー無しにする*/
	display:inline;				/*リスト項目をインライン表示にする*/
	float:left;				/*リスト項目を横に並べる*/	
}

#menu li a {					/*menuというid名が付けられた要素の下にあるli a要素にスタイルを適用*/
	background-color:#000080;		/*背景色 =navy*/
	color:#ffffff;				/*文字色 =white*/			
	display:block;				/*リンク部分をブロック表示にする*/
	width:192px; height:35px;		/*幅と高さ 960÷5=192 */
	padding:15px 0px 0px 0px;		/*上パディング（内側余白） 上・右・下・左*/
	text-align:center;			/*テキストをセンター揃えにする*/
	text-decoration:none;			/*リンク部分を下線無しにする*/
	background-image:url(images/bg_menu1.png); /*背景画像を指定（画像が表示されない環境に備え上に背景色も設定しておく）*/
	background-repeat:no-repeat;		　/*背景画像を繰り返さない*/
}

#menu li a:hover {
	background-color:#000066;		/*リンクにマウスが乗ったら背景色を変更する #000080→＃000066*/
	background-image:url(images/bg_menu2.png); /*リンクにマウスが乗ったら背景画像を変更する（画像が表示されない環境に備え上に背景色も設定しておく）*/
}

/*============================================
ヘッダ画像
============================================*/

#img_index {
	width:960px; height:360px;		/*トップページのヘッダ画像の表示サイズを指定*/
	margin:5px 20px;			/*上下マージン(外側余白)5px、左右マージン20px*/
}

#img_subpage {
	width:960px; height:280px;		/*トップページ以外のヘッダ画像の表示サイズを指定*/
	margin:5px 20px;			/*上下マージン(外側余白)5px、左右マージン20px*/
}

/*============================================
サブメニュー（左カラム）
============================================*/

div#submenu {
	width:180px;				/*幅の指定*/
	margin:10px 10px 10px 25px;		/*位置調整*/
	float:left;				/*サブメニューのカラムを左寄せにする*/
}




h2 {
	width:140px; height:38px;		/*幅と高さ(200×60px)*/
	padding:22px 0px 0px 40px;		/*パディング（内側余白）※覚書　初期　17　0　0　40*/
	font-size:16px;				/*フォントサイズ*/
	background-image:url(images/h2_bar.png); 	/*背景画像*/
	background-repeat:no-repeat;		/*背景画像を繰り返さない*/
	background-color:#000033;		/*背景色 =navy*/
	color:#ffffff;				/*文字色*/
}



div#submenu ul li {
	list-style-type:none;			/*リストマーカー無しにする*/
}

div#submenu ul li a {
	display:block;				/*リンク部分をブロック表示にする*/
	height:45px;				/*高さを45pxにする*/
	padding:15px 0px 0px 24px;		/*パディング（内側余白）*/
	text-decoration:none;			/*リンクの下線を無くす*/
	border-bottom:1px dotted gray;		/*リンク領域の下部にボーダーを付ける*/
	background-image:url(images/submenu_bar.png);　/*リンク領域に背景画像を付ける*/
	background-repeat:no-repeat;		/*背景画像を繰り返さない*/
	color:#333333;				/*文字色=濃いめのグレー*/
}

div#submenu ul li:first-child a {
	border-top:1px dotted gray;		/*一番上のリンクに上線を表示*/
}

div#submenu ul li a:hover {
	text-decoration:underline;		/*リンクにマウスが乗ったら下線を表示*/	
}

div#submenu ul li a:before {
	content:url("images/icon_submenu.png");/*アイコン画像を挿入*/
	margin:0px 10px 0x 0px;			/*マージン(外側余白)*/
	vertical-align:text-top;		/*縦方向の表示位置*/
}

/*============================================
インフォメーション（右カラム）
============================================*/

div#info {
	width:760px;				/*幅の指定*/
	float:left;				/*インフォメーションのカラムを左寄せにする*/
	padding:10px 20px 0px 5px;		/*パディング（内側余白）*/
}

h3 {
	font-size:15px;				/*文字サイズ*/
	font-family: "ＭＳ ゴシック",sans-serif;　/* フォントの種類をゴシック系にする */
	width:740px;				/*横幅*/
	height:27px;			
	padding:13px 0px 0px 20px;		/*パディング（内側余白）*/
	background-image:url(images/h3_bar.png);　/*リンク領域に背景画像を付ける*/
	background-repeat:no-repeat;		/*背景画像を繰り返さない*/
	background-color:#4169e1;		/*背景色*/
	color:#ffffff;				/*文字色*/
	border-radium:3px;			/*角丸にする*/
}


.infoimg_index {
	width:180px; height:245px;		/*トップページのインフォメーション画像の表示サイズを指定*/
	margin:20px;				/*マージン20px*/
	float:left;				/*画像を左寄せにする*/	
}

.box{
	font-size:13px;	
	width:318px; height:185px;
	border:5px ridge #BBB;
	box-shadow:8px 8px 5px #888;
	margin:10px 18px 20px 15px; 
	padding:5px 5px 5px 5px;		/*パディング（内側余白）*/
	background-color:#fcf9ff;		/*背景色*/
	background-repeat:no-repeat;		/*背景画像を繰り返さない*/
	float:left;				/*リスト項目を横に並べる*/
}

.box p{	
	width:280px;				/*幅の指定*/
	margin:5px 20px 10px 10px;		/*マージン(外側余白)*/
	line-height:1.55;			/* 行の高さを1.55倍にする */	
}

h4 {						
	font-size:16px;				/*文字サイズ*/
	font-family: "メイリオ",sans-serif;　/* フォントの種類をゴシック系にする */
	width:fit-content;			/*横幅*/
	padding:10px 10px 0px 10px;		/*パディング（内側余白）*/
	color:#330000;				/*文字色*/
	border-radium:3px;			/*角丸にする*/
}



.font_back{					/* 現在未使用 */
	font-size:16px;
	font-family: "メイリオ",sans-serif;　/* フォントの種類をゴシック系にする */
	background-color:#ccccff;
	color:#330000;				/*文字色*/
}

.pdt_index {
	width:280px; height:auto;		/*トップページのインフォメーション画像の表示サイズを指定*/
	margin:10px 10px 20px 35px;
	float:left;				/*画像を左寄せにする*/	
}

.illust_center {
	
	width:300px; height:auto;
	display: block;			/*画像をブロック要素にする*/
	margin:	10px auto;		/*中央寄せにする*/
	float:none;			/*フロートしない*/	
}

 
p a{
	display:inline;				/*リンクを改行させない*/
	font-family: "メイリオ",sans-serif;　/* フォントの種類をゴシック系にする */
}

p mark{
	background:linear-gradient(transparent 50%,#ffff7c 50%);
}

hr {
	clear:both;				/*フロート配置をクリアする*/
}

:root{
	scroll-padding: 50px;			/*リンク位置がメニューバーに重ならないようにする*/
	scroll-behavior: smooth;
}



/*============================================
フッタ
============================================*/

div#footer {
	clear:both;				/*回り込みを解除する*/
	height:40px;				/*高さの指定*/
	padding:10px 0px 0px 0px;		/*パディング（内側余白）*/
	font-size:x-small;			/*フォントサイズを小さくする*/
	text-align:center;			/*センタリング*/
}