@charset "utf-8";

/* --------------------------------------------- */
/* ▼モバイル用デザイン */
/* --------------------------------------------- */

@media screen and (max-width: 480px) {
	
/*============================================
全般的なスタイル
============================================*/	
* {
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
}
	
.header{
	height:45px;
	background-color:#b5d3fa;
	margin-bottom:3px;
	
}

.header h1 a{
	width:100%;
	padding-left:10px;
	
}

.img_index img{
	width:100%;
}

.img_subpage img{
	width:100%;
}

.midashi_h2{
	font-size:90%;
	background-color:#c9c9c971;
	padding-left: 10px;
	border-left:5px solid black;     /*左縦線*/
}

.midashi_h3{
	font-size:90%;
	background-color:#c9c9c971;
	padding-left: 10px;
	border-left:5px solid black;       /*左縦線*/
}

.coment_h4{					/*h4のclass要素*/
	font-size:90%;
	margin:0px 20px;		
	color:#FF4500;
	text-align:justify;
	/*background-color:#c9c9c971;
	padding:5px 10px;*/
}
 p{
	font-size:75%;
	text-indent:1em;
	text-align:justify;
}
.disn{
	display:none;
}

/*============================================
ハンバーグメニュ～
============================================*/	
.drawer-left.drawer-open .drawer-hamburger {
left: 0px; 		/*バツ印アイコンの位置を動かさず表示する（例：右上）*/
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    background-color: blue;		/*三本線のアイコン（ハンバーガーアイコン）の色*/
	opacity: 0.75;        /* ←透明度 */ 
	height: 4px;	/*三本線のアイコンの線の太さ*/
}
.drawer-hamburger:hover {
	cursor:pointer;
	background-color:#F0F8FF
}
.drawer-hamburger {
	width:25px; height:5px;
    background: #F0F8FF;	/*三本線のアイコンの背景色*/
	opacity: 0.75;        /* ←透明度 */ 
	padding-top: 15px;	/*三本線のアイコンの位置調整（例：左上）*/
	/*padding-right: 10px;*/
	border-radius: 5px;
	margin:5px 10px;
}
.drawer-left.drawer-open .drawer-hamburger {
   left: 0px; 		/*バツ印アイコンの位置を動かさず表示する（例：右上）*/
}
.drawer-nav {
	height:auto;
}
.drawer-overlay {
    background-color: rgba(0, 0, 0, .2);	/*ドロワーメニューが表示された時、コンテンツ部が半透明の黒色で暗くなる*/	 
}

ul.drawer-menu li a{
	background-color: blue;		/*背景色*/
	opacity: 0.7;        /* ←透明度 */
	color:white;		/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	height:25px;	/*幅と高さ*/
	padding-top:30px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンクの下線を無くす*/
	border-bottom:solid 2px #FFCCFF;	/*リンク領域の下部にボーダーを付ける*/
	/*background-image:url(images/bk-menu1.png);*/	/*背景画像を繰り返さない*/
}
.drawer-menu li a:hover {
	background-color:#6A5ACD; 	/*リンクにマウスが乗ったら背景色を変更する*/
	color:white;
	/*background-image:url(images/bk-menu2.png);*/ 	/*リンクにマウスが乗ったら背景画像を変更する*/
}

/*============================================
フッター
============================================*/
div.footer {
	height:20px;
	padding:5px 0px;
	text-align:center;
	background-color:#1f73f1f1;
	color:white;
	width:100%;
}

/*============================================
トップへ戻るボタン
============================================*/
#topbutton {
   /* ▼ボタンの表示位置を画面の右下に固定 */
   position: fixed; /* ←表示場所を固定 */
   bottom: 18px;   /* ←下端からの距離 */
   right: 18px;    /* ←右端からの距離 */
   width: 60px;     /* ←横幅 */

   /* ▼最初は非表示にしておく */
   display: none;

   /* ▼配色・配置・文字の装飾など */
   background-color: #2525aa; /* ←背景色 */
   opacity: 0.75;        /* ←透明度 */
   border-radius: 10px;  /* ←角丸の半径 */
   text-align: center;  /* ←文字の位置 */
   font-size: 90%;     /* ←文字サイズ */
   font-weight: bold;   /* ←文字の太さ */
   margin: 0px;          /* ←外側の余白 */
   padding:5px 12px 5px 0px;       /* ←内側の余白 */
}
#topbutton a {
   /* ▼リンクの装飾 */
   color: white;          /* ←文字色 */
   text-decoration: none; /* ←下線なし */
}
#topbutton a:hover {
   /* ▼マウスが載ったときの装飾 */
   color: yellow;              /* ←文字色 */
   text-decoration: underline; /* ←下線あり */
}




/*----- index.htmlページコンテンツ -----*/

/*============================================
追加情報用ボタン（新着ボタンへ飛ぶ etc.)
============================================*/
.info_b {
	height:25px; 	/*メインメニュー部分の高さ*/
	margin:10px 20px 10px ; 		/*上下マージン0px、左右マージン20px*/
}
.info_b li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:right;			/*リスト項目を横に並べる*/
}
.info_b li a {
	background-color:#0033FF;		/*背景色*/
	color:#ffffff;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	width:120px; height:25px;	/*幅と高さ*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	/*background-image:url(../images/bk-info1.png);	*/
	
}

/*============================================
本文コラム
============================================*/
.honbun{
	padding:0px 10px;
	margin:0px 10px;
}

.honbun h3 {
	font-size:90%;
}
.honbun h4{
	font-size:90%;
}
.br{
	display:none;
}

/*============================================
新着情報コラム
============================================*/
.news{
	margin:0px 10px;
}

.midashi_h3 {
	padding-left:10px;		/*パディング*/
	background-color:#c9c9c971;
	border-left:3px solid black;
}
.news dl{
	padding:0px 10px;

}

.news dt{
	width:8em;
	float:left;
	font-size:75%;
	color:#660000;
}
.news dd{
	width:;
	font-size:75%;
	margin-left:9em;
	/*padding-right: 5px;*/
}
.news_hr {
	margin:0px 5px;
	height: 1px;
	border: none;
	border-top: 1px solid;
}

.scrollarea {
	height: 20em;
	margin:0px 0px;
	/*padding:10px 5px 10px 0px;*/
	border: solid 1px rgb(163, 58, 9);
	/*overflow: scroll;*/   /*Ｘ軸とＹ軸を両方指定する*/
	overflow-x: hidden;   /* Ｘ軸は消す hidden */
  	overflow-y: scroll;   /* Ｙ軸のみ指定 scroll*/
	scrollbar-width: thin;  /* auto | thin | none */
	  
  	/*white-space: nowrap*/   /* 文字を折り返さない*/

  }

}


/*-------------------------------------------- */
/* ▼PC用デザイン */
/* -------------------------------------------- */

@media screen and (min-width: 481px) {
	
/*============================================
全般的なスタイル
============================================*/
* {
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
}


body {
	background-color:#cccccc;	/*ページ全体の背景色*/
	background-image:url("../images/bg_body.png");	/*ウェブページ全体の背景画像*/
	font-size:95%;			/* フォントサイズを95%にする */
	font-family:Arial, Helvetica, sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;		/* 行の高さを1.5倍にする */
	color:#333333;			/* 文字色を濃い目のグレーにする */
}
.pagebody {
	width:1000px; margin:0 auto;			/*内容全体をセンタリング*/
	background-color:#ffffff;			/*内容全体の背景色*/
	background-image:url("../images/bg_pagebody.png");	/*コンテンツ全体の背景画像*/
	background-repeat:repeat-y;			/*背景画像を縦方向に繰り返す*/
	overflow: hidden;
}

img {border:0;} 				/*画像のボーダーを0にする*/

.midashi_h2 {
	padding-left:10px;			/*パディング*/
	background-color:#c9c9c971;			/*文字の背景色*/
	border-left:5px solid black;      /*左縦線*/
}

h3.midashi_h3 {
	padding-left:10px;		/*パディング*/
	background-color:#c9c9c971;
	border-left:3px solid black;
}

h4.coment_h4{					/*h4のclass要素*/
	margin:5px 20px;		
	color:#FF4500;
	text-align:justify;
}
	
p{
	margin:10px;			/*マージン*/
	text-indent:1em;		/*インデント幅*/
	text-align:justify;
}

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




/*============================================
ヘッダ
============================================*/
.header {
	height:50px;				/*ヘッダ部分の高さ*/
}
.header h1 {
	padding:10px 0px 10px 20px;		/*見出しの位置調整*/
	font-size:18px;				/*フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
}
.header h1 a {text-decoration:none;} 	/*リンクの下線を無くす*/

/*============================================
メインメニュー
============================================*/
ul {
	width:960px; height:50px; 	/*メインメニュー部分の幅と高さ*/
	margin:0px 20px; 		/*上下マージン0px、左右マージン20px*/
}
ul li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を横に並べる*/
}
ul li a {
	background-color:navy;		/*背景色*/
	color:#ffffff;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	width:192px; height:35px;	/*幅と高さ*/
	padding:15px 0px 10px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	background-image:url(../images/bk-menu1.png);	/*背景画像を繰り返さない*/
}
ul li a:hover {
	background-color:#000066; 	/*リンクにマウスが乗ったら背景色を変更する*/
	background-image:url(../images/bk-menu2.png); 	/*リンクにマウスが乗ったら背景画像を変更する*/
}

/*============================================
ヘッダ画像
============================================*/
.img_index {
	width:956px; height:250px;			/*トップページのヘッダ画像の表示サイズを指定*/
	/*background-color:#1f73f1f1;*/		/*背景色*/
	margin:15px 20px;					/*上下マージン0px、左右マージン20px*/
	text-align:center;					/*テキストをセンター揃えにする*/
	border-left:2px solid #1f73f1f1; 
	border-right:2px solid #1f73f1f1;
}

.img_subpage {
	width:956px; height:220px;			/*トップページのヘッダ画像の表示サイズを指定*/
	/*background-color:#1f73f1f1;*/		/*背景色*/
	margin:15px 20px;					/*上下マージン0px、左右マージン20px*/
	text-align:center;					/*テキストをセンター揃えにする*/
	border-left:2px solid #1f73f1f1; 
	border-right:2px solid #1f73f1f1;
}

/*============================================
フッター
============================================*/
.footer {
	clear:left;			/*フロート配置をクリア*/
	height:25px;
	margin:0px 12px;
	padding:5px 0px;
	text-align:center;
	background-color:#1f73f1f1;
	color:white;
	width:976px;
}

/*============================================
トップへ戻るボタンの非表示
============================================*/
#topbutton a{
   display: none;
}



/*----- index.htmlページコンテンツ -----*/

/*============================================
追加情報用ボタン（新着ボタンへ飛ぶ etc.)
============================================*/
ul .info_b {
	width:920px; height:50px; 	/*メインメニュー部分の幅と高さ*/
	margin:0px 40px; 		/*上下マージン0px、左右マージン20px*/
}
.info_b li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:right;			/*リスト項目を横に並べる*/
}
.info_b li a {
	background-color:;		/*背景色*/
	color:#ffffff;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	width:120px; height:30px;	/*幅と高さ*/
	padding:5px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	background-image:url(../images/bk-info1.png);	
}
.info_b li a:hover {
	background-color:; 				/*リンクにマウスが乗ったら背景色を変更する*/
	background-image:url(../images/bk-info2.png); 		/*リンクにマウスが乗ったら背景画像を変更する*/
}

/*============================================
本文コラム
============================================*/
.honbun {
	width:800px;
	margin:10px 100px 0px 100px;
	float:left;
	text-align:justify;
}

.honbun p{
	width:740;
	margin:0px 30px;		/*上下マージン*/
	text-indent:1em;
}

/*============================================
新着情報コラム
============================================*/
.news {
	clear:left;
	width:600px;
    margin:0px 200px 50px 200px;
	float:left;
}

.news dl{
	 width:600px; 
}

.news dt{
	/* border-bottom:1px solid #ccc; */ 
	float:left;
	padding:10px 5px;
	color:#660000;
}

.news dd{
	/* border-bottm:1px solid #ccc; */
	width:415px;
	margin-left:150px;
	padding:10px 5px;
}

.news_hr {
	margin:0px 5px;
	height: 1px;
	border: none;
	border-top: 1px solid;
}

/*オーバーフローの場合、バーを表示*/
.scrollarea {
	width: 575px; 
	height: 20em;
	margin:0px 5px;
	padding:10px 17px 10px 0px;
	border: solid 1px rgb(163, 58, 9);
	/*overflow: scroll;*/   /*Ｘ軸とＹ軸を両方指定する*/
	overflow-x: hidden;   /* Ｘ軸は消す hidden */
  	overflow-y: scroll;   /* Ｙ軸のみ指定 scroll*/
	scrollbar-width: thin;  /* auto | thin | none */
	  
  	/*white-space: nowrap*/   /* 文字を折り返さない*/

  }
  

}