/*============= テキストサイズの基礎設定 ===================*/

html {font-size: 12px; width: 100%;} /* 18px 720px*/


.pcOnly {}	/* スマホ用には display: none; を入れる */
.smphOnly {}	/* スマホ用には display: inline; を入れる。*/

/*============= テキストサイズの基礎設定 ===================*/

body {	margin-left: 15px;
	color:#cccccc ; 
	background:url("background.jpg");
}


/*============= h1, h2, ..., h6　の基本設定 ===================*/

h1, h2, h3, h4, h5, h6 { font-size: 100%; }
p, div, span { font-size: 100%; }
ol, li { font-size: 100%; margin-left: 15px;}

h1 { font-size: 150%;}
.h1 { font-size: 150%;}

h2 {	width: 100%;	margin-top: 1em; /*600px*/
	font-size: 150%;
	padding:3px 15px 5px;
	color:#e0e0e0;
	border-left:10px solid #0080cc;
	border-bottom:1px solid #0080cc;
}

h3{}
h4{}
h5{}
h6{}



/*=================== テキスト全般の基本設定 ===================*/

p {color:#cccccc;  width:100%;line-height:1.5;} /*600px*/

li { margin-left: 15px; font-size: 100%; font-weight: bold;}


.en_title {font-family: Helvetica, sans-serif; font-size: 100%;}

.enTitle {font-family: Helvetica, sans-serif; font-size: 100%;}
.enText  {font-family: Courier,        serif; font-size: 90%;}

.jpTitle {font-weight: bold; font-size: 150%;}
.jpText  {}



/*=================== 画像全般の基本設定 ===================*/

img	{	max-width: 95%;
		border-width: 1px;
	 	border-color:#ffffff; 
		border-style: solid;
		vertical-align: bottom;
}
img.photosize   {
	width: 100%;   /*640px*/
	margin-top    : 15px;
	margin-bottom : 15px;
	margin-left   : 15px;
	margin-right  : 15px;
}

img.photomiddle {
	width: 66%;   /*480px*/
	margin-top    : 15px;
	margin-bottom : 15px;
	margin-left   :  0px;
	margin-right  : 15px;
}

img.photosmall  {
	width: 40%;  /*320px*/
	margin-top    : 15px;
	margin-bottom : 15px;
	margin-left   :  0px;
	margin-right  : 10px;
}
img.phototiny   {
	width: 180px; 
	margin-top    : 15px;
	margin-bottom : 15px;
	margin-left   :  0px;
	margin-right  :  5px;

}
img.tn   {
	width: 90px; 
	height: 60px;
	margin-top    : 0px;
	margin-bottom : 0px;
	margin-left   :  3px;
	margin-right  :  3px;

}




/*=================== リンク全般の基本設定 ===================*/

a         {white-space: nowrap;} /* リンクテキストの途中で切れないよう、改行させない。 */
a.linkbox {white-space: normal;} /* ただし、箱全体にリンクをつけている(箱の中にテキストがある)場合は改行させる。 */

a {text-decoration: none; color:#ffff00;} /*黄色に変えました。*/

a:link    {} /*未訪問のリンクの色*/
a:visited {} /*訪問済みのリンクの色*/
a:hover   {background:#333333;} /*カーソルが乗っているリンクの色*/
a:active  {background:#333333} /*クリック中のリンクの色*/

a.noDecoration {text-decoration: none; color:#ffffff;}
a.noDecoration:link    {color:#ffffff;} /*未訪問のリンクの色*/
a.noDecoration:visited {color:#ffffff;} /*訪問済みのリンクの色*/
a.noDecoration:hover   {color:#ffffff; background:#000040;} /*カーソルが乗っているリンクの色*/
a.noDecoration:active  {color:#ffffff; background:#000040;} /*クリック中のリンクの色*/



div.pankuzu a {font-size: 100%; color: #ffff00;} /* パンくずリスト */



/*============= hr　の基本設定 ===================*/

hr {	text-align:left; margin-left: -10px;
	width: 100%; height: 1px;
	border-top: 1px solid #0000cc;
	border-bottom: 1px solid #00cccc;
	border-left: none; border-right: none;
}

hr.light_hr {	border-top: 1px dashed #0000cc;
		border-bottom: 1px dashed #0000cc;
}


hr.label_end {margin-left: 15px; width: 80%;}


/*  ======== infobox (更新のお知らせ)====================   */

td.counter { color:#ffffff; background:#000000;}

.infobox {
	width: 95%;	height: 2.6em; /*620px*/
	font-size: 80%;
	margin-top: 0px;
	padding: 3px;
   	overflow: auto; 
   	border: #ffffff 1px solid;  
   	background-color: #000033; 
}

/*  ======== メニューに使う箱の関連　====================   */

.menu_container{margin: 0 auto;  width: 100%;} /*720px*/
.menu_box:hover{background-color: #333333;}


.menu_box { float: left;
	width: 20%;	height: 220px; /*150px*/ /*220px*/
	font-size: 80%;
	margin-top: 5px;	margin-right: 2px;
	margin-bottom: 15px;	margin-left: 2px;

	border-left: 2px solid #8080ff;
	border-top:  2px solid #8080ff;

	border-right:  4px solid #101020;
	border-bottom: 4px solid #202040;
	padding: 5px  5px 5px 5px;
}
.boxTitle {font-weight: bold; font-size: 120%;}

.menu_box_text {width: 100%; font-weight: bold; font-size: 110%;}

.box_blue1 { background-color: #000060; }
.box_blue2 { background-color: #000060; }
.box_blue3 { background-color: #0000cc; }
.box_blue4 { background-color: #000000; }

.float_clear { clear:both; }

/* ======== バナー関係は、banner.cssへ分離した。============ */


/* ======== アコーデオン関係　================= */

/* ================================================================ */
/* ★スタイルシートだけを使ったアコーデオンの実装                   */
/* 　　Checkboxの on-off:checked をセレクタ記述に利用した方法。     */
/* 　　HTMLで labelタグは、input(checkbox)よりもあとに記述すること。*/
/* ================================================================ */
/* ※これとは別に、Javascriptによるアコーデオンの実装もある         */
/* ================================================================ */

label {
    width: 30em ;
    font-size: 120%;
    margin-left: 15px; padding: 6px;
    border-left: 2px solid #ccccff; 
    background: #000044; color: #ffffff;
    display: block;
}

label:hover{background: #333333;}

/* CheckBox自体は非表示にしておく */
input[type="checkbox"].on-off {display: none;}

/* じんわり開く設定 */
div.acd_area {
    -webkit-transition: all 0.5s;
    -moz-transition:    all 0.5s;
    -ms-transition:     all 0.5s;
    -o-transition:      all 0.5s;
    transition:         all 0.5s;
    margin:  0px;
    padding: 0px;
}


/* アコデ閉のときの表示 */
input[type="checkbox"].on-off         + label  span.show{ display:block; font-weight: bold; color: yellow;} /*  (Open, Show, など)*/
input[type="checkbox"].on-off         + label  span.hide{ display:none; } /*  (Close, Hide, など)*/

/* アコデ展開時の表示 */
input[type="checkbox"].on-off:checked + label  span.show{ display:none; } /*  (Open, Show, など)*/
input[type="checkbox"].on-off:checked + label  span.hide{ display:block; font-weight: bold;} /*  (Close, Hide, など)*/

/*　全てのアコーデオンについて一括に設定する([id^="acd_"])。→ "acd_"で始まる id について適用。*/
/* HTML中では、input(id) label(for) を同じにすること。*/
/* アコデ領域を div (acd_area) にすると楽しくなる。（必須ではない）*/

input[id^="acd_"].on-off:checked + label + div {height: 520px; overflow: hidden;} /* アコデのデフォルトの高さを指定 */
input[id^="acd_"].on-off         + label + div {height:   0px; overflow: hidden;} /* アコデ閉のときの高さはゼロ */

