@charset "utf-8";

/* ========================================================================== */
/* 01) 基本設定 全体 */
/* ========================================================================== */
*{
    margin:0;
    padding:0;
}
html{
    margin:0;
    padding:0;
}

body {
  margin: 0 auto;
  padding: 0;

}



/* -- 各ブラウザ向け フォント指定 -- */

/* IE6用 */
* html body {
font: 12px/16px "Lucida Grande","Lucida Sans Unicode","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Helvetica,Arial,Verdana,sans-serif;
vertical-align: baseline;
text-align: center;
}

/* IE7用 */
*:first-child+html body {font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;}
/* IE6・IE7以外用 */
html>/**/body {font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;}
/* Firefox等 モダンブラウザ用 */
html:not(:target) body {font-family: Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;}

pre{ font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;}
br.br_clear{ clear:both!important;}


/* 基本リンク色　各設定 */
A:link {COLOR: #004477; text-decoration: underline;}
A:visited {COLOR: #004477; text-decoration: underline;}
A:hover {text-decoration: none; COLOR: #cc3300;}
A:active {text-decoration: none; COLOR: #cc3300;}



/* ----- 基本設定 全体 (変更不要)　---------------------------------------- */

UL,LI,p{PADDING: 0px;	MARGIN:0px;}
IMG {border-width: 0px;}

H1{
	font-weight: bold;
	line-height:125%;
	FONT-SIZE: 140%;
}

H2{
	font-weight: bold;
	line-height:125%;
	FONT-SIZE: 130%;
}

H3  {
	font-weight: bold;
	line-height:125%;	FONT-SIZE: 120%;
}

H4 {	line-height:125%;	FONT-SIZE: 110%;}
H5 {line-height:125%;	FONT-SIZE: 100%;}
H6 {line-height:125%;	FONT-SIZE: 90%;}

input,select{vertical-align:middle;}
select{font-size:110%; line-height:130%; padding:1px;}



/* ----- 入力関係 ------------------------------------------------- */
input, select,textarea{ font-size: 1.15em; line-height: 1.48em; padding:2px;}
input{padding:2px 3px 3px 3px;line-height: 1.15em;}
select{	padding:1px 2px;}
label{ font-size: 1.15em; line-height: 1.48em;}




#footer_print:before,
footer:before,
.footer:before,
#main:after,
#main_area:after,
#contents_naka:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */




/* ========================================================================== */
/* 02) 基本枠 */
/* ========================================================================== */


/*----------------------------------------------------------------------
　　リサイズ時の動きの速度・位置など
----------------------------------------------------------------------*/
.motionContainer.masonry,
.motionContainer.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
}
.motionContainer.masonry {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.motionContainer.masonry  .masonry-brick {
  -webkit-transition-property: left, right, top;
  -moz-transition-property: left, right, top;
  -o-transition-property: left, right, top;
  transition-property: left, right, top;
}
/* disable transitions on container */
.motionContainer.infinite-scroll.masonry {
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none;
}


/*----------------------------------------------------------------------
　　リサイズ エリア基本設定
----------------------------------------------------------------------*/
.modules {
  margin: 0 auto 3em;
  padding: 5px;

}
.modules:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.modules li {
  width: 180px;
  margin: 5px;
  float: left;
	list-style:none;
  padding: 0;

}

.modules li p {
  padding: 10px;
  font-size: 77%;
}
.modules li p.thumb {
  text-align: center;
  padding: 10px 10px 2px;
}


.modules li p.caption {  padding: 0 10px 10px;}





/* ========================================================================== */
/* 02-01) 基本枠 */
/* ========================================================================== */

#contents { min-height:600px;
	padding:0px 0px 0px 0px;
	margin:0px;
  background-image: url("../img/contents_bg01.jpg");
  background-position:top left;
  background-repeat: repeat-x;
	background-color:#FFF;
}

.container{ max-width:950px; margin: 0 auto;}
.modules{ max-width:950px; margin: 0 auto;}
#contents_naka { max-width:940px; margin: 0 auto; padding-left:6px;

}



/* ========================================================================== */
/* 03) 本文部分 */
/* ========================================================================== */


.main {width:670px;  float: left; margin:12px 10px 0px 0px; min-height:500px; z-index:9999;}

/* --記事エリア-- */
.main_area{ padding:16px 12px 26px 20px;}


/* ========================================================================== */
/* 03) 右メニュー */
/* ========================================================================== */
.side {  width:260px;  float: right;
  background-image: url("../img/side_top.gif");
  background-position:top left;
  background-repeat: repeat-x;
	background-color:#EFF9FF;
	margin-top:12px;

}




/* ========================================================================== */
/* 04) ヘッダー */
/* ========================================================================== */

/* ----- ヘッダー基本設定 ------------------------------------------------- */

#header{	background-image:url(../img/header_bg01.gif);
	background-repeat: repeat-x;
	background-position:bottom left;
	min-height:145px; _height:145px;
	border-top:3px #0D99FD solid;
	background-color:#FFF;
	}
#header_area{ max-width:950px; margin:0px auto 0px auto;text-align:left;}
.move_item li{ padding:0px; margin:0px;}

/* ----- ロゴ  ----- */
#header h1{ width:360px; min-width:300px; height:85px; float:left;}
#header h1 img{ width:100%; max-width:360px; height: auto;}

.header_right{ float:right;max-width:580px; }
.h_user_interface{
float:right; text-align:right!important;
margin:6px 0px 0px 8px;
}



#fontsize,#fontcolor{ width:245px; height:32px;
	background-image:url(../img/user_interface_bg.gif);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:left;
	margin:0px; padding:6px 0px 0px 12px;
	
	
}

#fontsize img,#fontcolor img{ vertical-align:middle;}




/* ----- ヘッダーメニュー  ------------------------------------------ */
#header_menu_navi ul.modules li{border:0px;
	margin:0px; padding:0px;
}

.h_sub_menu{
background-color:#099; 
float:left; text-align:left;
}



/* ----- ヘッダー メインメニュー  ------------------------------------------ */

#header_menu_navi { font-size:12px; line-height:16px; clear:both;
	margin:1px 0px 0px 6px; padding:0px 0px 0px 0px; height:57px;
	position:absolute; top:90px;

}

/* CSSハック */
*:first-child + html #header_menu_navi {
position: static;
}



#header_menu_navi ul{ text-align:right!important;
	list-style:none!important;
	margin:0px 0px 0px 0px; 
	padding:0px;
	width:640px; float:left;
}


/* ----- ヘッダーサイト内検   ------------------------------------------ */
.search { font-size:10px; line-height:16px;
	margin:0px 0px 0px 0px; _margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; 
	float:left; text-align:right;
 letter-spacing:1px;
 width:300px;

 text-align:right;


}

.search_frame{
text-align: center; float:right; padding:8px 4px 6px 8px; margin-top:6px;
border:1px #ABBDD1 solid;
background-color:#E4EDFC;
width:270px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
#header input#header_input{ font-size:18px; line-height: 1.48em; padding:2px; width:180px;}











#header_menu_navi li{border:0px; float: left;
	margin:0px; padding:0px; width:158px;
}

#header .modules li {
    margin:0px;
    padding:0px;
}

#header_menu_navi a{border:0px;	margin:0px; padding:0px; color:#333;}
#header_menu_navi A:link  {margin:0px; padding:0px; text-decoration:none; color:#06C;}
#header_menu_navi A:visited {margin:0px; padding:0px; text-decoration:none; color:#636;}
#header_menu_navi A:active  {margin:0px; padding:0px; text-decoration:underline; color:#900;}
#header_menu_navi A:hover {	margin:0px; padding:0px; text-decoration:underline; color:#900;}

#header_menu_navi span{border:0px;	margin:0px; padding:0px;}
.h_navi01{ border:0px solid;
	background-image:url(../img/header_menu_navi01.gif);
	background-repeat:no-repeat;
	background-position:top left;
	height:55px; width:159px;
	display:block;
}
 
.h_navi01 A:link,.h_navi01 A:visited{margin:0px; padding:0px; text-decoration:none;}
.h_navi01 A:active,.h_navi01 A:hover {margin:0px; padding:0px; text-decoration:underline;}
.h_navi01 span { border:0px solid; margin:0px; padding:0px; display:none; font-size:12px; line-height:16px;}


.h_menu01{ background-position:0px 0px;}
.h_menu01:hover,.h_menu01_current{ background-position:0px -55px;}

.h_menu02{ background-position:-159px 0px;}
.h_menu02:hover,.h_menu02_current{background-position:-159px -55px;}

.h_menu03{ background-position:-318px 0px;}
.h_menu03:hover,.h_menu03_current{background-position:-318px -55px;}

.h_menu04{ background-position:-477px 0px;}
.h_menu04:hover,.h_menu04_current{background-position:-477px -55px;}








/* ----- ヘッダーサブメニュー ------------------------------------------------- */


.google_translate{ margin:26px 6px 0px 0px; text-align:right; width:100px!important;  clear:both; }
#header_menu_navi02 { font-size:12px; line-height:16px; float:left; text-align:left;
	margin:2px 0px 2px 0px; _margin:10px 0px 0px 0px; padding:0px 0px 6px 0px; 
}

#header_menu_navi02 ul{ text-align:right!important;
	list-style:none!important;
	margin:0px 0px 0px 0px; 
	padding:0px;
	max-width:280px;

}

#header_menu_navi02 li{border:0px; float: left; margin:0px 8px 0px 0px; padding:0px 0px 0px 9px;
 border:0px solid;
	background-image:url(../img/header_menu_navi_bg.gif);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:left;
}

#header_menu_navi02 A:link  {text-decoration:none; color:#00375E;}
#header_menu_navi02 A:visited {text-decoration:none; color:#00375E}
#header_menu_navi02 A:active  {text-decoration:underline; color:#F30}
#header_menu_navi02 A:hover {text-decoration:underline; color:#F30}









/* ========================================================================== */
/* 05) フッター */
/* ========================================================================== */

/* ----- フッター基本設定 ------------------------------------------------- */

#footer_print{visibility: hidden; display:none;}


.footer{
	padding:0px; margin:0px;
	border-top:2px #24475B solid;
	background-color:#ECE8CD;
}


.footer_copyright {
	padding:4px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	text-align: center;
	font-size:90%;
	line-height:160%;
	color:#fff;
	background-color:#333333;
	height:80px;
}


.footer_main{margin:auto; width:950px;}
.footer_comment{ font-size:80%; line-height:140%; border-bottom:#999 1px dotted; padding:0px 6px 6px 6px;
margin:6px 6px 12px 6px;}

.footer_logo{ font-size:90%; line-height:140%; padding:0px; margin:6px 6px 0px 6px;}
.footer_address{ font-size:80%; line-height:140%; padding:0px 6px 6px 3px;
margin:3px 6px 12px 6px; letter-spacing:1px;}

.footer p {	padding:0px; margin:0px;}

.footer_icon_top{ float: right; width:120px; text-align:left;}
.footer_copyright_naka{ max-width:950px; margin:0px auto 0px auto; text-align: center;}



/* ========================================================================== */
/* 05) その他 */
/* ========================================================================== */


/* ----- もどるリンク 各種設定 -------------------------------------------- */
/* width:750px */
.back01{  clear:both;
	margin: 40px 0px 0px 0px;
	text-align: right; 
}
/* width:950px */
.back02{  clear:both;
	margin: 40px 0px 0px 0px;
	text-align: right; 
}

.back{ float:right;
	padding: 3px 6px 3px 6px;
	overflow: hidden;
	border-top: 2px solid #99CCFF;
	border-bottom: 1px solid #99CCFF;
	font-size: 13px;
	text-align: right; 
	text-align:center;
}

.back img{ margin:3px 3px 3px 4px; vertical-align:middle;
}


/* ========================================================================== */
/* 08-2) 各ページ共通基本設定 エラーメッセージ等 */
/* ========================================================================== */

/*-------------------------*/
/* TABLE ERROR表示用 */
/*-------------------------*/
#error {
	text-align:left;
	margin:6px 20px 16px 14px;
	padding: 4px;
	border:6px solid #FFD0D3;
	color:#333;
}
#error table{text-align:left}
#error th{padding:3px;}
#error td{ text-align:left;padding:3px;}
.error01{
	text-align:left;
	margin:0px;
	padding:10px 16px 10px 26px;
	border-collapse: collapse;
	border:1px solid #FF7D7D;
}
.error02{ padding-bottom:3px;
border-bottom:2px #FF0000 solid; margin-bottom:4px;
}

#error hr {
	height: 2px;
	background-color: #ff4500;
	border: none;
	color: #ff4500;
   width:100%;
}
#error strong{ color:red;}
#error img{vertical-align:middle; margin-right:3px;}

/*-------------------------*/
/* TABLE warning表示用 */
/*-------------------------*/
#warning {
	text-align:left;
	margin:0px 20px 16px 20px;
	padding:10px 30px 10px 10px;
	border-collapse: collapse;
	border:2px dashed #0066FF;
}
#warning hr {
   border-style:solid;
   border-width:2px;
   border-color:#0066FF;
   width:100%;
}
#warning strong{
   color:blue;
}

#side li.s_submenu_text .side_menu_rss{ float:right; width:34px; height:16px; margin-right:9px; margin-left:6px; margin-top:-30px; padding:0px; background:none;}
#side li.s_submenu_text .side_menu_rss a{background:none; padding:0px!important; margin:0px!important;}
#side li.s_submenu_text a .side_menu_rss img{padding:0px!important; margin:0px!important; width:34px; height:16px;}



/* ========================================================================== */
/* 05) 各種画面幅設定 */
/* ========================================================================== */

.modules{ width:950px; }

/* --緑-- */
@media only screen and (max-width:1200px) and (min-width:1141px){
	.main {  width:670px;  float: left;}
	.side {  width:260px;  float: right;}


	/* 確認用 */
	/* #header{ border-color:#066} */
	#header_menu_navi{ width:950px;}
	.search { }
	#header_area{width:950px;}

	.contents,.footer_main,#top_banner{ width:950px;}
	.modules{ width:950px; }
	.modules li.top_main_img { width: 560px!important;}
	.top_main_img img{ width:100%;  max-width:560px!important;}

	#header_menu_navi li{ margin: 0; width:158px!important;}
	


}

/* --青-- */
@media only screen and (max-width:1140px) and (min-width:951px){
	#contents_naka { width:950px;}
	.main {  width:670px;  float: left;}
	.side {  width:260px;  float: right;}



	/* 確認用 */
	/* #header{ background-color:#036} */
	
	#header_area,.footer_main,#top_banner{width:950px;}
	#header_menu_navi ul{ width:640px;}
	#header_menu_navi{ width:950px;}
	#header_menu_navi li{ margin: 0px; width:158px!important;}
	
	.search { width:300px;}
	.search_frame{padding:8px 4px 6px 8px; margin-top:6px;width:270px;}
	
	.top_kurashi{ max-width:365px;}
	.contents{ width:950px;}

	.modules{ width:950px;}
	.modules li.top_main_img { width: 560px!important;}
	.top_main_img img{ width:100%;  max-width:560px!important;}


}



/* --紫-- */
@media only screen and (max-width:950px) and (min-width:751px){
	#contents_naka { width:750px;}
	.main {  width:480px;  float: left;}
	.side {  width:260px;  float: right;}

	/* 確認用 */
	/* #header{ background-color:#609}*/



	#header_area,.footer_main,#top_banner{width:100%; margin:auto;}
	
	#header{ height:122px; min-height:122px; min-width:750px!important;}
	
	#header_menu_navi02{ margin-top:-0px;}
	#header_menu_navi02 ul{ width:120px; text-align:left;}
	.google_translate{ margin-top:3px; width:120px;}


	.search { width:150px; float:right;}

	#header_menu_navi { width:99%; min-width:750px; height:35px;
	margin:auto;top:0px; position:relative; z-index:100}
	#header_menu_navi ul {width:525px; margin-top:2px; float:left;}

	#header_menu_navi li{ margin: 0; width:123px!important;}
	
	.search { width:220px;}
	.search_frame{padding:1px 4px 1px 8px; margin-top:0px;width:200px;}
	#header input#header_input { width:130px;}


.h_navi01{	height:33px; width:126px;}
.h_menu01{ background-position:0px -110px;}
.h_menu01:hover,.h_menu01_current{ background-position:0px -143px;}
.h_menu02{ background-position:-126px -110px;}
.h_menu02:hover,.h_menu02_current{background-position:-126px -143px;}
.h_menu03{ background-position:-252px -110px;}
.h_menu03:hover,.h_menu03_current{background-position:-252px -143px;}
.h_menu04{ background-position:-378px -110px;}
.h_menu04:hover,.h_menu04_current{background-position:-378px -143px;}

	.modules{ max-width:750px;}
	.modules li.top_alert{ width:435px!important;}
	.modules li.top_main_img_icon{ width:435px!important;}


	.modules li.top_main_img{ width:440px!important;}
	.top_main_img img{ width:100%;  max-width:440px!important;}
	
	.top_kurashi{ width:280px!important;}
	.post top_kurashi h3{margin: 12px 10px;}
	.top_kurashi_comment img{ width:216px;}
	.top_kurashi_icon{ padding-left:16px!important;}



}






/* --赤-- */
@media only screen and (max-width:755px) and (min-width:576px){
	 #contents_naka { width:95%!important; max-width:755px; padding-left:0px; margin-left:10px; margin-right:10px;} 
	.main {  width:100%!important; float: none;}
	.side {  width:100%!important; floatt: none;}
	
	/* 確認用 */
	/* #header{ background-color: #aa0000}  */

	
	#header_area,.footer_main,#top_banner{ width:100%; max-width:750px;}
	#header h1{width:200px; float:left;}
	#header h1 img{ height:auto;}
	#header_menu_navi02{min-width:130px; text-align:left;}

	.google_translate{ margin-top:0px; width:120px;}


	.h_user_interface{ width:100%; height:37px; margin:0px; padding-top:3px;
	 position:absolute; top:80px; left:0px; text-align:center;

	 border-bottom:1px #ccc solid;
	 clear:both;
	}

	#header{height:197px; min-height:122px; min-width:450px;}
	#header_menu_navi { 
		width:100%; text-align:center;
		margin:auto;
		top:120px; position:absolute; z-index:100;}
	#header_menu_navi ul {width:520px; text-align:center; margin:auto!important; margin-top:2px; top:45px; float:none;}
	#header_menu_navi li{ margin: 0; width:123px!important;}

.modules{ width: 98%;}
.modules li { float:none;}
	
	.search { width:100%; padding:2px 0px 3px 0px; clear:both; float:none; float:right;
	top:0px; position:absolute; z-index:100;
	 border-top:1px #ccc solid; 
	 border-bottom:1px #ccc solid;
}
	.search_frame{padding:3px 4px 3px 8px; margin-top:0px; width:490px; margin:auto; float:none;}
	#header input#header_input { width:400px;}
	
	#fontsize{ margin-left:6px;}

	.h_user_interface_frame{ width:520px; margin:auto; text-align:center;}
	#fontsize, #fontcolor { float:left;}

.h_navi01{	height:33px; width:123px;}
.h_menu01{ background-position:0px -110px;}
.h_menu01:hover,.h_menu01_current{ background-position:0px -143px;}
.h_menu02{ background-position:-126px -110px;}
.h_menu02:hover,.h_menu02_current{background-position:-126px -143px;}
.h_menu03{ background-position:-252px -110px;}
.h_menu03:hover,.h_menu03_current{background-position:-252px -143px;}
.h_menu04{ background-position:-378px -110px;}
.h_menu04:hover,.h_menu04_current{background-position:-378px -143px;}


#top_banner {
    margin: 0 auto 16px; width:97%; padding: 0;
}

.header_right{ width:130px;}

}


@media screen and (max-width: 575px) {
body { -webkit-text-size-adjust: none; } 
#footer{ font-size:12px;}
.footer_comment { font-size:xx-small;
}
.footer_address{ font-size:xx-small;
}

.footer_copyright_naka{ width:90%;}
.footer_icon_top{ display:none; visibility:hidden;}


.header_right{ float:none;}
.google_translate:after,
#header_menu_navi02:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.h_user_interface:before{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.h_user_interface{ clear:both;  padding-top:20px;}

}







/* --ピンク-- */

@media screen and (max-width:378px) {
	 #contents_naka { width:95%!important; padding-left:0px; margin-left:6px; margin-right:0px;} 
	.main {  width:100%!important; float: none;}
	.side {  width:100%!important; floatt: none;}
	
	/* 確認用 */
/* #header{ background-color: #F6F}  */

.main_area {  padding:12px 12px 16px 8px;
}

#header h1 {
    float: left; height: 85px;
    min-width:150px; width: 100%;}
.footer_comment{ font-size:xx-small;}
.footer_icon_top{ display:none; visibility:hidden;}


}






@media print { body{ max-width:100%!important;}

#top_banner{ width:99%!important;}
#footer_print{ position:static; clear:both; visibility:visible; display:inherit;
	padding:0px; margin:0px;
	border-top:2px #24475B solid;
	background-color:#ECE8CD;}



#footer_print #footer_copyright{
	padding:4px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	text-align: center;
	font-size:90%;
	line-height:160%;
	color:#fff;
	background-color:#333333;
	height:30px!important;
}



.header_right,#header_menu_navi,.back01,.back{ display:none;}
#header{height:85px!important; min-height:85px!important;}
#contents_naka {width:99%!important; height:auto!important; padding-bottom:230px; }
.main {  width:99%!important; height: auto!important; float: none;}
#side { display:none; height:250px!important; position:absolute; top:0px;}
.footer{ height:220px!important; display:none;}



}