@charset "utf-8";

/* -------------------------------------------

	last update 2019-10-11
	
	---------------------------
	
	- top page
	- genre top
	- side bar
	- side nav
	- simple page (no header&nav)
	
	- about
	- article
	- clean energy flash
	- registration, policy etc
	
	
	- common
		list (with link,for article)
		list (no link)
		table
		hdg,text,image
		box,margin
	
	---------------------------
	
------------------------------------------- */


/* ===================================================================
//////////////////////////////////////////////////////////////////////

							top page

//////////////////////////////////////////////////////////////////////
=================================================================== */

/* ============================================

	slideshow

============================================ */


.topics_area{
	padding-top: 20px;
}
.topics_area{ /zoom : 1; }
.topics_area:after{ content : ''; display : block; clear : both; }

.topics_area .topics{
	width: 690px;
	padding-right:20px;
	float: left;
}

.topics_area .opinions{
	width: 240px;
	float: right;
}

.topics_area .topics h2,
.topics_area .opinions h2{
	margin-top: 0;
}

.topics_area .topics .type{
	margin-bottom: 5px;
	color: #6f7071;
}

.topics_area .topics .ttl a{
	color: #ffffff;
}
.topics_area .topics .ttl a:hover{
	color: #ccc;
}
.topics_area .topics .ttl a:active{
	color: #ccc;
}

.topics_area .topics .date{
	color: #a7a7a7;
}

.topics_area .topics .more a,
.topics_area .topics .more a:link{
	color: #a7a7a7;
}

.topics_area .opinions ul{
	margin: 10px 0;
}

.topics_area .opinions ul li{
	background: transparent url("./images/arw_gray.png") 0px 2px no-repeat;
	padding-left: 10px;
	list-style-type: none;
	list-style-position: inside;
	margin-bottom: 10px;
}

.topics_area .opinions ul li a{
	color: #fff;
}
.topics_area .opinions ul li a:hover{
	color: #ccc;
}


/* ============================================

	banner area

============================================ */

div#banner_area{
	margin: 12px 0 12px 15px;
}

div#banner_area ul{
	margin: 0;
	min-height: 43px;
}

div#banner_area ul li{
	float: left;
	display: inline;
	margin-right: 5px;
}

div#banner_area ul li a:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}


/* ============================================

	media area

============================================ */

#media_area{
	margin-bottom: 20px;
}


#media_area .media_list{
	width: 640px;
	margin:15px 0px 0px 35px;
	padding-left: 10px;
}
#media_area .media_list{ /zoom : 1; }
#media_area .media_list:after{ content : ''; display : block; clear : both; }


#media_area .media_list li.media_item{
	width: 200px;
	font-size: 93%;
}

#media_area .media_list li .media_img{
	margin-bottom: 8px;
}
#media_area .media_list li .media_img a:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
#media_area .media_list li .media_ttl{
	padding-right: 5px;
}
#media_area .more{
	margin-top: 40px;
	padding-top: 7px;
	border-top: 1px solid #cccccc;
	font-size: 85%;
	text-align: right;
}


/* ============================================

	associated links and membership services

============================================ */

#links_area{
	margin-bottom: 20px;
}

#links_area{ /zoom : 1; }
#links_area:after{ content : ''; display : block; clear : both; }

#links_area .links_area_left{
	width: 280px;
	float: left;
	padding-left: 20px;
}
#links_area .links_area_right{
	margin-left: 300px;
}

#links_area .links_area_right ul{
	margin: 10px 0;
}

#links_area .links_area_right ul li{
	background: transparent url("./images/arw_lblue.png") 0px 5px no-repeat;
	padding-left: 10px;
	list-style-type: none;
	list-style-position: inside;
	margin-bottom: 10px;
}

#links_area h2,
#links_area .asso_links_txt{
	clear: both;
}

#links_area .heading_links{
	font-size: 100%;
	padding: 10px 4px 0;
}
#links_area .asso_links_txt ul{
	margin: 8px 0 20px;
	padding-left: 22px;
}

#links_area .asso_links_txt ul li{
	background: transparent url("./images/arw_lblue.png") 0px 5px no-repeat;
	padding-left: 10px;
	list-style-type: none;
	list-style-position: inside;
	margin-bottom: 10px;
	width:48%;
	float:left;
}


/* ============================================

	genre area

============================================ */

div.genre_iconset{
	
}
div.genre_iconset{overflow: hidden;}
* html div.genre_iconset{height: 1%;}

div.genre_iconset p.icon{
	float: left;
	margin-right: 15px;
}

div.genre_iconset dl.txt_list dt{
	background: none;
}

div.genre_iconset a:hover{
	opacity:0.9;
	filter:alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}

div.genre_area{
	margin-top: 15px;
}

div.genre_area p.more{
	font-size: 85%;
	text-align: right;
}


div.genre_area h2.ttl_electric{
	padding-top: 18px;
	height: 20px;
}
div.genre_area h2.ttl_economy{
	height: 35px;
}

/* ============================================

	member-news area

============================================ */

div.member-news_area{
	margin: 0 0 20px;
}

div#member-news{
	width: 700px;
    height: 190px;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 auto 12px;
    padding: 5px;
    border: 1px solid #D0D1D3;
	background-color: #F4F6FA;
}

div#member-news table.member-news_table{
	width: 100%;
	border: none;
}

div#member-news table.member-news_table th,
div#member-news table.member-news_table td{
	padding: 10px;
	border: none;
	border-bottom: 1px solid #dddddd;
	vertical-align: top;
	text-align: left;
	line-height: 1.3;
}

div#member-news table.member-news_table th{
	width: 12%;
	font-weight: normal;
	color: #777777;
	font-size: 85%;
}

div#member-news table.member-news_table td a{
	text-decoration: underline;
	font-size: 93%;
}

div#member-news .more{
	padding: 0 10px;
	font-size: 93%;
	text-align: right;
}

.member-button{
	text-align:center;
}
.member-button a:hover{
	opacity:0.9;
	filter:alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}

.newmark{
	margin-left: 7px;
	color:#EF3C3F;
	font-weight: bold;
}

/* ===================================================================
//////////////////////////////////////////////////////////////////////

							genre top

//////////////////////////////////////////////////////////////////////
=================================================================== */

div.ttl_area{
	margin: 35px 15px 20px;

}

div.ttl_area h1{
	margin: 0 0 10px; 
	font-size: 200%;
}

div.ttl_area .subttl{
	font-size: 100%;
}


/* ============================================

	genre nav (head)

============================================ */

div#genre_nav_area{
	border-bottom: 1px solid #cccccc;
}
div#genre_nav_area{ /zoom : 1; }
div#genre_nav_area:after{ content : ''; display : block; clear : both; }

div#genre_nav_area strong{
	display: block;
	float: left;
	padding: 13px 15px 5px 25px;
	color: #549BD7;
	font-size: 93%;
}

div#genre_nav_area ul.genre_nav{
	margin: 0;
}

div#genre_nav_area ul.genre_nav li{
	float: left;
	font-size: 93%;
	font-weight: bold;
}
div#genre_nav_area ul.en{
	margin-left: 15px!important;
}
div#genre_nav_area ul.en li{
	font-size: 85%!important;
}
div#genre_nav_area ul.genre_nav li a{
	display: block;
	color: #000000;
	padding: 13px 15px;
}

div#genre_nav_area ul.genre_nav li a:hover,
div#genre_nav_area ul.genre_nav li.current a{
	background-color: #7DB5E1;
}


/* ============================================

	topics area @ genre-top

============================================ */


body#genre_top div.topics_area{
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 13px 0;
	margin-bottom: 20px;
}


/* ============================================

	search

============================================ */



div.search_area{
	margin: 0 0 20px;
}
div.search_area{overflow: hidden;}
* html div.search_area{height: 1%;}

div.search_area .search_txt{
	float: left;
	padding:3px 15px 5px 0;
	vertical-align: bottom;
}

div.search_area .search_form{
	float: left;
}

div.search_area .search_form form{
	float: left;
}

div.search_area .search_form input.txt{
	border: 1px solid #cccccc;
	width: 300px;
	height: 22px;
}

div.search_area .search_form .txt{
	display: inline;
}
div.search_area .search_form .txt input{
	border: 1px solid #cccccc;
	width: 300px;
	height: 22px;
}

div.search_area .search_form input.btn{
	vertical-align: bottom;
}

div.search_area .search_form .detail_link{
	float: left;
	padding: 5px 5px 0 15px;
	margin-bottom:0;
}

div.search_area .search_form .detail_link a{
	font-size: 85%;
	text-decoration: underline;
}


/* ============================================

	banner-like link

============================================ */

ul.corners{
	margin: 0 0 20px;
}
ul.corners{overflow: hidden;}
* html ul.corners{height: 1%;}

ul.corners li{
	float: left;
	padding: 10px 10px 5px;
	width: 220px;
	height: 55px;
	margin-right: 18px;
	color: #ffffff;
	background-color: #456381;
}

ul.corners li.triple{	/*add 20140205*/
	width: 213px;
	margin-right: 4px;
}

ul.corners li.txt1line{
	padding: 18px 10px 7px;
	height: 45px;
}

ul.corners li a{
	display: block;
	color: #ffffff;	
}

ul.corners li a:hover{
	color: #eeeeee;
}

ul.corners li:hover{
	background-color: #678AAD;
}

ul.corners li span.ttl{
	display: block;
	padding-left: 25px;
	margin-bottom: 8px;
	font-size: 108%;
	font-weight: bold;
	background: transparent url(./images/mkr_corners.gif) 0px 1px no-repeat;
}

ul.corners li span.txt{
	font-size: 77%;
}


/* ============================================

	event

============================================ */

div.event_area{
	margin: 0 0 30px;
	padding: 10px 10px 7px;
	border-top: 2px solid #000000;
	background-color: #f3f3f3;
}

div.event_area h2{
	margin: 7px 10px 15px;
	font-size: 108%;
}

div.event_area dl{
	margin: 0 10px;
}

div.event_area .more{
	margin: 0;
	padding-top: 7px;
	border-top: 1px solid #cccccc;
	text-align: right;
	font-size: 85%;
}


/* ============================================

	headline

============================================ */

div.headline_area{
	margin: 0 0 30px;
}

div.headline_area div.photo_list{
	padding: 15px 0;
	border-top: 1px solid #cccccc;
}

div.headline_area div.photo_list dl.txt_list{
	margin-bottom: -7px;
}

div.headline_area div.photo_list dl dt{
	margin-bottom: 10px;
	font-size: 131%;
	background: url("./images/arw.png") no-repeat scroll 0 4px transparent;
}

div.headline_area div.photo_list dl dd{
	line-height: 1.8;
}

div.headline_area .more{
	margin: 0;
	padding-top: 7px;
	border-top: 1px solid #cccccc;
	text-align: right;
	font-size: 85%;
}


/* ============================================

	genre nav (foot)

============================================ */

div.genre_nav_foot{
	background-color: #f2f2f2;
    margin-bottom: 20px;
    padding: 15px 10px;
}

div.genre_nav_foot{overflow: hidden;}
* html div.genre_nav_foot{height: 1%;}

div.genre_nav_foot h2{
	float: left;
	margin: 0;
	padding:50px 30px 50px 20px;
	border-right: 1px solid #cccccc;
	font-size: 93%;
}
div.genre_nav_foot h2.en{
	padding: 15px 30px 15px 20px;
	border: none;
}

div.genre_nav_foot div.nav_wrapper{
	margin-left: 150px;
}

div.genre_nav_foot div.nav_wrapper ul{
	margin: 0;
}

div.genre_nav_foot div.nav_wrapper ul li{
	float: left;
	width: 168px;
	padding: 10px 5px;
	font-size: 93%;
	vertical-align: middle;
}

div.genre_nav_foot div.nav_wrapper ul.en li{
	float: none;
	width: auto;
}

div.genre_nav_foot div.nav_wrapper ul li img{
	display: block;
	float: left;
}

div.genre_nav_foot div.nav_wrapper ul li a.txt{
	display: block;
	margin-left: 43px;
	padding: 10px 10px 10px 8px;
	color: #000000;
}
div.genre_nav_foot div.nav_wrapper ul li.current a.txt,
div.genre_nav_foot div.nav_wrapper ul li a.txt:hover{
	background-color: #C1E2F2;
	color: #444444;
}





/* ===================================================================
//////////////////////////////////////////////////////////////////////

							side bar

//////////////////////////////////////////////////////////////////////
=================================================================== */

/* ============================================

	opinion

============================================ */

div.opinion{
	width: 230px;
	margin-bottom: 25px;
}

div.opinion div.opinion_wrapper{
	clear: both;
	height: 70px;
	min-height: 70px;
	padding: 0;
	background-color: #D0D0D0;
	border-bottom: 1px solid #a0a0a0;
	
}

div.opinion div.last{
	border-bottom: none!important;
	
}

div.opinion div.opinion_wrapper div.photo{
	float: left;
}
div.opinion div.opinion_wrapper div.description{
}

div.opinion div.opinion_wrapper div.description dl{
	margin: 0 0 0 70px;
	padding: 10px 3px 8px;
}
div.opinion div.opinion_wrapper div.description dl.en{
	padding: 7px 3px 5px 0;
}

div.opinion div.opinion_wrapper div.description dl dt{
	font-size: 93%;
	padding-bottom: 3px;
	font-weight: bold;
}
div.opinion div.opinion_wrapper div.description dl.en dt{
	font-size: 85%;
	padding-bottom: 2px;
}

div.opinion div.opinion_wrapper div.description dl dd{
	margin-left: 0;
	padding-bottom: 3px;
	font-size: 85%;
}
div.opinion div.opinion_wrapper div.description dl.en dd{
	padding-bottom: 1px;
	font-size: 77%;
}


/* ============================================

	banner

============================================ */


div.side_banner{
	text-align: center;
	margin: 0 1px 20px 0;
}

div.side_banner p{
	margin-bottom: 10px;
}

div.side_banner a:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

.update_information{
	margin-top:-5px;
	font-size:77%;
	color:#666;
	text-align:right;
}


/* ============================================

	general list

============================================ */

ul.sub_list1,
ul.sub_list2{
	width: 230px;
	margin: 0 0 20px; 
	padding-bottom: 6px;
	background-color: #f3f3f3;
}

ul.sub_list1 li,
ul.sub_list2 li{
	width: 210px;
	margin: 0 auto;
	border-bottom: 1px solid #a0a0a0;
}

ul.sub_list1 li{background: transparent url(./images/mkr_sub_list1.gif) 0px 10px no-repeat;}
ul.sub_list2 li{background: transparent url(./images/mkr_sub_list2.gif) 0px 10px no-repeat;}

ul.sub_list1 li.rank1{background: transparent url(./images/mkr_rank_01.jpg) 0px 10px no-repeat;}
ul.sub_list1 li.rank2{background: transparent url(./images/mkr_rank_02.jpg) 0px 10px no-repeat;}
ul.sub_list1 li.rank3{background: transparent url(./images/mkr_rank_03.jpg) 0px 10px no-repeat;}
ul.sub_list1 li.rank4{background: transparent url(./images/mkr_rank_04.jpg) 0px 10px no-repeat;}
ul.sub_list1 li.rank5{background: transparent url(./images/mkr_rank_05.jpg) 0px 10px no-repeat;}

ul.sub_list1 dl,
ul.sub_list2 dl{
	margin: 0 0 0 27px;
	padding: 8px 0 5px;
}

ul.sub_list1 dl dt,
ul.sub_list2 dl dt{
	font-size: 93%;
	padding-bottom: 3px;
	font-weight: bold;
}

ul.sub_list1 a,
ul.sub_list2 a{
	color: #000000;
}

ul.sub_list1 a:hover,
ul.sub_list2 a:hover{
	color: #777777;
}

ul.sub_list1 dl dd,
ul.sub_list2 dl dd{
	margin-left: 0;
	padding-bottom: 3px;
	font-size: 77%;
	color: #666666;
}


ul.sub_list1 p,
ul.sub_list2 p{
	margin: 0 0 0 27px;
	padding: 12px 0 10px;
}

ul.sub_list1 p,
ul.sub_list2 p{
	margin: 0 0 0 27px;
	padding: 12px 0 10px;
	font-weight: bold;
	font-size: 93%;
}


/* ============================================

	login info

============================================ */

div.login_info{
	margin-bottom: 20px;
	padding: 15px 10px;
	text-align: center;
	background-color: #dbeaee;
}

div.login_info .name{
	margin: 0 auto 5px;
	font-size: 123.1%;
}

div.login_info .status{
	margin: 0 auto 12px;
	font-size: 93%;
}


/* ============================================
}
	side_privacy

=====================================.======= */

.side_privacy {
	clear: both;
	position: relative;
}

.a_privacy {
position: absolute;
bottom: 30px;
right: 45px; 
}


/* ===================================================================
//////////////////////////////////////////////////////////////////////

							side nav

//////////////////////////////////////////////////////////////////////
=================================================================== */

div.sidenav_area{
	width: 195px;
	padding: 5px 15px;
	background-color: #333333;
}

div.sidenav_area .sidenav_ttl{
	margin: 0 0 15px;
	padding: 10px 5px 4px;
	color: #eaeaea;
	border-bottom: 1px solid #e0e0e0;
	font-size: 116%;
}

div.sidenav_area .sidenav_ttl a{
	color: #eaeaea;
}

div.sidenav_area ul.sidenav{
	margin: 0 0 10px;
	
}
div.sidenav_area ul.sidenav li{
	margin:0 0 1px;
	font-size: 85%;
}
div.sidenav_area ul.sidenav li a,
div.sidenav_area ul.sidenav li span.sub-li_txt{
	clear: both;
	display: block;
	padding: 10px 5px 10px 30px;
	color: #cccccc;
	background: transparent url(images/mkr_sidenav.png) 8px 9px no-repeat;
}

div.sidenav_area ul.sidenav li a{ /zoom : 1; }
div.sidenav_area ul.sidenav li a:after{ content : ''; display : block; clear : both; }

div.sidenav_area ul.sidenav li.current a,
div.sidenav_area ul.sidenav li a:hover{
	background-color: #555555;
}

/* member */

div#sidenav_nav div.sidenav_area ul.sidenav li .member-only_name{
	float: left;
}
div#sidenav_nav div.sidenav_area ul.sidenav li .member-only_mark{
	float: right;
	font-size: 93%;
	color: #9fd4ff;
}

/* little, wide, no-title */

div#sidenav_nav div.wide{
	width: 205px;
	padding-left:10px;
	padding-right:10px;
}

div#sidenav_nav div.wide ul.sidenav li a,
div#sidenav_nav div.wide ul.sidenav li span.sub-li_txt{
	padding-right: 3px;
	padding-left: 24px;
	background-position: 4px 9px
}

div#sidenav_nav .small_nav{
	font-size: 77%;
}

div#sidenav_nav div.no-ttl{
	padding-top: 15px;
}


/* info */

div#sidenav_nav div.sidenav_area p.sidenav_info{
	margin: 0 0 10px;
	color: #ffffff;
	font-size: 85%;
}

/* ireko */

div#sidenav_nav div.sidenav_area ul.sidenav li ul.in-nav{
	margin: 0 0 0 20px;
}

div#sidenav_nav div.sidenav_area ul.sidenav li ul.in-nav li{
	font-size: 100%;
}
div#sidenav_nav div.sidenav_area ul.sidenav li ul.in-nav li a{
	padding-left: 16px;
	background-image:url(images/mkr_sidenav2.png);
	background-position: 5px 13px;
}



/* ===================================================================
//////////////////////////////////////////////////////////////////////

							simple page

//////////////////////////////////////////////////////////////////////
=================================================================== */
 
/* ----------------------------
	logo
------------------------------- */

body#simple #image_area_s{
	clear: both;
	margin: 7px auto 0;
	width: 970px;
	height: 70px;
	background: url("../../images/photo/image_genre_01.jpg") no-repeat scroll left top transparent;
}

body#simple div.logo{
	position: relative;
	float: left;
	width: 276px;
	height: 70px;
}

body#simple div.logo .logo_img{
	margin: 0;
	padding: 12px 5px 6px 18px;
}

body#simple div.logo_en .logo_img{
	padding-top:17px;
}

/* ----------------------------
	main column
------------------------------- */

body#simple #main_1col{
	width: 770px;
	margin: 20px auto 70px;
}
body#simple #main_1col a{
	text-decoration:underline;
}


/* ----------------------------
	footer
------------------------------- */

body#simple ul.foot_nav{
	margin: 0;
	padding-left: 0;
}

body#simple ul.foot_nav li{
	float: left;
	padding: 9px 10px 6px;
	font-size: 85%;
	color: #ffffff;
	background: transparent url(./images/bg_foot_nav.gif) right center no-repeat;
	list-style: none;
	list-style-position:outside;
}

body#simple div.footer_message p{
	margin:0;
}

/* ===================================================================
//////////////////////////////////////////////////////////////////////

							about

//////////////////////////////////////////////////////////////////////
=================================================================== */

/* ============================================

	president

============================================ */

div.president_photo{
	float: left;
	padding-left: 10px;
}

div.president_photo p.image img{
}

div.president_photo p.txt{
	text-align: center;
}

div.president_message{
	width: 460px;
	margin-left: 250px;
	line-height: 1.7;
	color: #333333;
	font-size: 108%;
	text-align: justify;
}
div.president_message p{
	margin-bottom: 30px;
}

/* ============================================

	staff

============================================ */

div.staff_photo{
	float: left;
	padding-left: 10px;
}

div.staff_profile{
	width: 530px;
	margin-left: 180px;
}

/* ===================================================================
//////////////////////////////////////////////////////////////////////

							article

//////////////////////////////////////////////////////////////////////
=================================================================== */

div.article_area{
	width: 730px;
	margin: 30px auto;
	padding: 20px;
	background-color: #f3f3f3;
}

div.article_area div.description{
	margin-left: 270px;
}

body div.article_area div.no-photo{
	margin: 0 auto!important;
	width: 80%;
}

dl.description_list{
	margin: 0;
	font-size: 93%;
}

dl.description_list a{
	text-decoration: underline;
}

dl.description_list dt{
	margin-top: 25px;
	margin-bottom: 5px;
	font-weight: bold;
	color: #559ED8;
	padding-bottom: 3px;
	border-bottom: 1px solid #A4CAEA;
/*	border-bottom: 2px solid #000000;*/
}

dl.description_list dd{
	margin-bottom: 10px;
	margin-left: 0;
	color: #333333;
	line-height: 1.5;
}

div.article_sub_area{
	width: 730px;
	margin: 30px auto;
}


/* ===================================================================
//////////////////////////////////////////////////////////////////////

						clean energy flash
							
//////////////////////////////////////////////////////////////////////
=================================================================== */

h1.clean_ttl{
	margin-top: 0;
}

.clean_date{
	text-align: right;
	font-size: 115%;
	color: #666666;
}

* html body dl.information dd div {
   display:inline-block;
}
dl.information {
	margin-left: 0;
	background-color: #EFEFEF;
}
dl.information dt {
   float:left;
   width:120px;
   margin:0;
   padding: 10px;
   border-top: 3px solid #ffffff;
   
   font-size: 90%;
   color: #666666;
   font-weight: bold;
   line-height: 1.7;
}

dl.information dd {
   margin:0 0 0 140px;
   padding: 10px;
   border-top: 3px solid #ffffff;
   line-height: 1.7;
   background-color: #ffffff;
}

dl.information dd .pdf{
	vertical-align:top;
	margin-right: 0;
	margin-left: 5px;
}


/* ===================================================================
//////////////////////////////////////////////////////////////////////

					registration, policy etc

//////////////////////////////////////////////////////////////////////
=================================================================== */

div.readme_area{
	width: 730px;
	margin: 0 auto 30px;
	padding: 20px;
	background-color: #f3f3f3;
}


dl.qanda dt{
	margin: 20px 0 10px;
	line-height: 1.7;
	color: #4E9DDE;
	font-weight: bold;
	padding: 3px 0px 17px 40px;
	background: transparent url(./images/ico_q.gif) left top no-repeat;
}
dl.qanda dd{
	margin: 10px 0;
	line-height: 1.7;
	padding: 3px 0px 17px 40px;
	background: transparent url(./images/ico_a.gif) left top no-repeat;
}







/* ===================================================================
//////////////////////////////////////////////////////////////////////

				common

//////////////////////////////////////////////////////////////////////
=================================================================== */


/* ====================================================
///////////////////////////////////////////////////////

			list
			(with link, for article list)

///////////////////////////////////////////////////////
==================================================== */


/* ----------------------------
	photo-description
------------------------------- */


div.photo_list{
}
div.photo_list{ /zoom : 1; }
div.photo_list:after{ content : ''; display : block; clear : both; }

div.photo_list div.photo{
	float: left;
	display: inline;
	margin-right: 20px;
}

div.photo_list div.description .ttl{
	font-weight: bold;
	font-size: 131%;
	line-height: 1.5;
	margin-bottom: 5px;
}

div.photo_list div.description .date{
	font-size: 93%;
	margin-bottom: 15px;
}

div.photo_list div.description .lead{
	font-size: 93%;
	line-height: 1.5;
}

div.photo_list div.description .more{
	font-size: 93%;
}
/* ----------------------------
	text-only dl
------------------------------- */

dl.txt_list{
	margin: 5px 0 15px 5px;
	font-size: 93%;
}

dl.txt_list dt{
	font-weight: bold;
	padding-left: 10px;
	background: transparent url(./images/arw.png) 0px 4px no-repeat;
}

dl.txt_list dd{
	margin-left: 0;
	margin-bottom: 13px;
	padding-left: 10px;
	color: #666666;
}

/* ----------------------------
	arrow simple ul
------------------------------- */

ul.arrow_list{
	margin: 0;
}

ul.arrow_list li{
	padding-left: 10px;
	background: transparent url(./images/arw.png) 0px 8px no-repeat;
}


/* ====================================================
///////////////////////////////////////////////////////

				list (no-link)

///////////////////////////////////////////////////////
==================================================== */

/* ----------------------------
	dl blackhdg list
------------------------------- */

dl.hdg-txt{
	margin: 0;
	font-size: 93%;
}

dl.hdg-txt a{
	text-decoration: underline;
}

dl.hdg-txt dt{
	margin-bottom: 5px;
	font-weight: bold;
	color: #000000;
	padding: 0 0 0 15px;
	background: transparent url("images/mkr_shdg.png") no-repeat 0px 3px;
}

dl.hdg-txt dt.nobg{
	padding: 0;
	background: none;
}

dl.hdg-txt dd{
	margin-bottom: 20px;
	margin-left: 0;
	padding: 0 0 0 15px;
	color: #333333;
	line-height: 1.5;
}


/* ----------------------------
	simple ol
------------------------------- */

ol.ordered_list{
}

ol.ordered_list li{
	list-style-position: inside;
	list-style-type:decimal;
}

.no-mkr_list li{
	margin: 10px 0 15px 15px;
}

/* ----------------------------
	simple ul
------------------------------- */

ul.un-ordered_list{
	margin: 10px 0 15px 15px;
}

ul.un-ordered_list li{
	margin-bottom: 10px;
	list-style-position: outside;
	list-style-type:disc;
}

/* ----------------------------
	simple ul 2
------------------------------- */

ul.un-ordered_sub-list{
	margin: 3px 0 15px 15px;
}

ul.un-ordered_sub-list li{
	margin-bottom: 3px;
	list-style-position: outside;
	list-style-type:disc;
}



/* ====================================================
///////////////////////////////////////////////////////

				table

///////////////////////////////////////////////////////
==================================================== */


/* ----------------------------
	color table
------------------------------- */

table.data_table{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
}

table.data_table a{
	text-decoration: underline;
}

table.data_table th,
table.data_table td{
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	font-size: 93%;
	padding: 8px 15px;
	border: none;
}

table.data_table tr.head_tr th{
	color: #ffffff;
	background-color: #316a9b;
}
table.data_table th{
	color: #ffffff;
	background-color: #3e80b8;
	border-bottom: 1px solid #528fc2;
}

table.data_table tr.head_tr td{
	color: #333333;
	background-color: #eeeeee;
}
table.data_table td{
	color: #333333;
	background-color: #f5f5f5;
	border-bottom: 1px solid #eeeeee;
}


/* ----------------------------
	mono-color table
------------------------------- */

table.data_table2{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
}

table.data_table2 a{
	text-decoration: underline;
}

table.data_table2 th,
table.data_table2 td{
	line-height: 1.5;
	font-size: 93%;
	padding: 8px 15px;
	border: none;
	border-bottom: 2px solid #ffffff;
}

table.data_table2 tr.head_tr th{
	color: #ffffff;
	background-color: #444444;
	text-align: left;
	vertical-align: middle;
}
table.data_table2 th{
	color: #ffffff;
	background-color: #aaaaaa;
	text-align: center;
	vertical-align: middle;
}

table.data_table2 tr.head_tr td{
	color: #333333;
	background-color: #eeeeee;
	text-align: left;
	vertical-align: top;
}
table.data_table2 td{
	color: #333333;
	background-color: #f5f5f5;
}


/* ----------------------------
	mono-color table2
------------------------------- */

table.staff_table{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
}

table.staff_table a{
	text-decoration: underline;
}

table.staff_table th,
table.staff_table td{
	padding: 8px 15px;
	line-height: 1.5;
	font-size: 93%;
	vertical-align: top;
	text-align: left;
	border: none;
	border-bottom: 2px solid #ffffff;
}

table.staff_table th{
	padding-left: 28px;
	color: #000000;
	background: #f5f5f5 url("images/mkr_shdg.png") no-repeat 10px 12px;
}
table.staff_table td{
	color: #333333;
}


/* ----------------------------
	simple table
------------------------------- */

table.info_table{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
	border-top: 1px solid #dddddd;
}

table.info_table th,
table.info_table td{
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	padding: 28px 15px;
	border: none;
	border-bottom: 1px solid #dddddd;
}

table.info_table th{
	color: #222222;
}

table.info_table td{
	color: #444444;
}

/* ----------------------------
	support table in simple table
------------------------------- */

table.sub_table{
	width: 100%;
	margin: 10px 0; 
	border: 1px solid #ccc;
}

table.sub_table th,
table.sub_table td{
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	padding: 15px 12px;
	border: 1px solid #ccc;
}

table.sub_table th{
	color: #222222;
}

table.sub_table td{
	color: #444444;
}

.table_header{
	background-color: #ddd;
}

/* ----------------------------
	simple table (news)
------------------------------- */

table.news_table{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
}

table.news_table th,
table.news_table td{
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
	padding: 10px 15px 8px;
	border: none;
	border-bottom: 2px solid #ffffff;
}

table.news_table tr.head_tr th{
	background-color: #cccccc;
}

table.news_table th{
	color: #222222;
	font-weight: normal;
	background-color: #efefef;
}

table.news_table td{
	color: #444444;
}

/* ----------------------------
	simple table (form)
------------------------------- */

table.form_table{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
	border-top: 2px solid #eeeeee;
}

table.form_table th,
table.form_table td{
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
	font-size: 93%;
    padding: 10px 10px 7px;
	border: none;
	border-bottom: 2px solid #eeeeee;
}

table.form_table th{
	width: 23%;
	color: #222222;
	background-color: #eeeeee;
	border-bottom: 2px solid #e0e0e0;
}

table.form_table table.form_table th{
	background-color: #e4ecf6;
}
table.form_table td{
	color: #444444;
	background-color: #ffffff;
}

/* ----------------------------
	simple table(whatsnew)
------------------------------- */

table.whatsnew_table{
	width: 100%;
	margin: 10px 0 25px; 
	border: none;
	border-top: 1px solid #dddddd;
}

table.whatsnew_table th,
table.whatsnew_table td{
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	padding: 15px;
	border: none;
	border-bottom: 1px solid #dddddd;
}

table.whatsnew_table th{
	color: #222222;
	width: 25%;
}

table.whatsnew_table td{
	color: #222222;
}

table.whatsnew_table td p{
	margin-bottom: 20px;
}

/* ----------------------------
	table common
------------------------------- */
body table .w10{width: 10%!important;}
body table .w15{width: 15%!important;}
body table .w20{width: 20%!important;}
body table .w25{width: 25%!important;}
body table .w27{width: 27%!important;}
body table .w30{width: 30%!important;}
body table .w35{width: 35%!important;}

body table .em2{width: 2em!important;}
body table .em3{width: 3em!important;}

table.compact th,
table.compact td{
	padding: 7px 10px;
	font-size: 93%;
}

body table .r-border{border-right: 1px solid #ffffff;}

table.align-l th,
table.align-l td{text-align: left;}


/* ====================================================
///////////////////////////////////////////////////////

				form

///////////////////////////////////////////////////////
==================================================== */

input.button{
	padding: 4px 30px;
	border: none;
	color: #ffffff;
	background-color: #539AD6;
}

input.button:hover{
    background-color:#77b1e1;
    -webkit-box-shadow:inset 0px 0px 3px #fff;
    -moz-box-shadow:inset 0px 0px 3px #fff;
    box-shadow:inset 0px 0px 3px #fff;
}

input.button:active{
    padding-top:5px;
    padding-bottom:3px;
    background-color:#3e7db1;
    color:#e0ebf5;
    -webkit-box-shadow:inset 0px 0px 8px #334c66;
    -moz-box-shadow:inset 0px 0px 2px #3a6da0;
    box-shadow:inset 0px 0px 2px #3a6da0;
}


/* ====================================================
///////////////////////////////////////////////////////

				hdg,text,image

///////////////////////////////////////////////////////
==================================================== */


/* ----------------------------
	title
------------------------------- */

.heading1{
	margin: 0 0 10px;
	padding: 3px;
	border-bottom: 2px solid #000000;
	font-weight: bold;
	font-size: 100%;
}

.heading1_big{
	margin: 0 0 20px;
	padding: 6px;
	border-bottom: 2px solid #000000;
	font-weight: bold;
	font-size: 123.1%;
}

.heading2{
	margin: 0 0 10px;
	padding: 3px;
	color: #4E9DDE;
	font-weight: bold;
	font-size: 116%;
}

.heading3{
	margin: 0 0 10px;
	padding: 10px 4px;
	border-top: 2px solid #000000;
	font-weight: bold;
	font-size: 100%;
}


.fit{
	margin-bottom: 0!important;
}

/* ----------------------------
	text
------------------------------- */

.note{
	color: #FF6633;
}

.note2{
	color: #4E9DDE;
}

.note3{
	color: #777777;
}

.button-like a{
	display: inline-block;
	margin: 15px auto;
	padding: 15px 30px;
	border: none;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none!important;
	background-color: #539AD6;
}
.button-like a:hover{
	background-color: #73bAf6;
}

.important{
	font-size: 108%;
	font-weight: bold;
}

.no-bold{
	font-weight: normal!important;
}

.txt_small{
	font-size: 85%;
}

.indent{
	text-indent: 1em;
}

.align-l{text-align: left!important;}
.align-r{text-align: right!important;}
.align-c{text-align: center!important;}

.valign-m{vertical-align: middle!important;}

.u-line{
	text-decoration: underline;
}

.pdf{
	margin-right: 5px;
	vertical-align: middle;
}
.xls{
	margin-right: 5px;
	vertical-align: middle;
}

.flag{
	margin-right: 5px;
	vertical-align: middle;
}

img.img_border{
	border: 1px solid #666666;
}

.no-border{
	border: none!important;
}

.message_paragraph{
	line-height: 1.7;
	margin-bottom: 20px;
	text-align: justify;
}
.message_paragraph2{
	line-height: 1.7;
	margin-bottom: 20px;
}


.l_image{
	float: left;
	margin-right: 20px;
}

.cfix{ /zoom : 1; }
.cfix:after{ content : ''; display : block; clear : both; }

/* ----------------------------
	type mark
------------------------------- */

p.type{
	margin: 0 0 10px;
	padding: 4px 0;
	
}
p.type span{
	padding: 3px 25px;
	color: #ffffff;
	font-size: 85%;
	font-weight: bold;
	background-color: #7099be;	/* default */
}
p.type span.type01{background-color: #7099be;}/* blue */
p.type span.type02{background-color: #f35e5e;}/* red */
p.type span.type03{background-color: #87b7a9;}/* green */
p.type span.type04{background-color: #7e7ab1;}/* purple */
p.type span.type05{background-color: #f18035;}/* orange */
p.type span.type06{background-color: #ffbb37;}/* yellow */
p.type span.type07{background-color: #63d2f9;}/* aqua */


/* ====================================================
///////////////////////////////////////////////////////

				box,margin
				
///////////////////////////////////////////////////////
==================================================== */

/* ----------------------------
	two-column layout
------------------------------- */

div.two-column_wrapper{
	clear: both;
	margin-bottom: 20px;
}

div.two-column_wrapper{overflow: hidden;}
* html div.two-column_wrapper{height: 1%;}

div.two-column_wrapper div.left,
div.two-column_wrapper div.right{
	width: 48%;
}

div.two-column_wrapper div.left{
	float: left;
}

div.two-column_wrapper div.right{
	float: right;
}

div.two-column_wrapper .more{
	margin: 0;
	padding-top: 7px;
	border-top: 1px solid #cccccc;
	text-align: right;
	font-size: 85%;
}

div.genre_area div.two-column_wrapper .more{
	margin-top: 9px;
}

/* ----------------------------
	mini 3col layout
------------------------------- */

ul.col3{
	margin: 10px 0 0;
}

ul.col3 li{
	float: left;
	width: 33%;
	margin-bottom: 5px;
}




/* ----------------------------
	photo - desc
------------------------------- */

div.w200p_photo{
	float: left;
	padding-left: 10px;
}

div.w200p_description{
	width: 475px;
	margin-left: 230px;
}

/* ----------------------------
	pager
------------------------------- */

div.pager_wrapper{
	text-align: center;
	paddingrgin-bottom: 30px;
}

ul.pager{
	display: inline-block;
	margin-left: 10px;
}
ul.pager{ /zoom : 1; }
ul.pager:after{ content : ''; display : block; clear : both; }


ul.pager li{
	float: left;
	display: inline;
	margin-right: 10px;
}

ul.pager li.current,
ul.pager li a{
	display: block;
	padding: 5px 8px;
	border: 1px solid #aaaaaa;
}

ul.pager li a{
	background-color: #ffffff;
}

ul.pager li.current{
	background-color: #e4eef7;
}


/* ----------------------------
	box
------------------------------- */

.box_message{
	margin: 0 0 20px;
	padding: 15px;
	background-color: #efefef;
}

.box_message2{
	margin: 0 0 20px;
	padding: 15px;
	border: 1px solid #a1cdf1;
}

.box_message3{
	margin: 0 0 20px;
	padding: 15px;
	border: 1px solid #eeeeee;
}

.image_center{
	text-align: center;
	margin: 20px auto;
}

.t-border{
	border-top: 1px solid #cccccc;
	padding-top: 15px;
}
.u-border{
	border-bottom: 1px solid #cccccc;
	padding-bottom: 15px;
}

.clear{
	clear: both;
}

.ico_member{
	margin-left: 4px;
	vertical-align: middle;
}


/* ----------------------------
	margin
------------------------------- */
.mt0{margin-top: 0 !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt25{margin-top: 25px !important;}
.mt30{margin-top: 30px !important;}
.mt35{margin-top: 35px !important;}
.mt40{margin-top: 40px !important;}
.mt45{margin-top: 45px !important;}
.mt50{margin-top: 50px !important;}

.mb20{margin-bottom: 20px !important;}
.mb25{margin-bottom: 25px !important;}
.mb30{margin-bottom: 30px !important;}
.mb35{margin-bottom: 35px !important;}
.mb40{margin-bottom: 40px !important;}
.mb45{margin-bottom: 45px !important;}
.mb50{margin-bottom: 50px !important;}

.ml30{margin-left: 30px !important;}

.pt20{padding-top: 20px !important;}

.narrow{
	margin-left: 20px;
	margin-right: 20px;
}