@charset "UTF-8";
@import "parts_main_cmn.css";

/* --------------------------------------------------
 * 【町田市 画面表示用（本体サイト）】
 * ファイル： main_top_style.css
 * 作　成　： 2010/12/10
 * 概　要　： トップページのレイアウトを表記
 * --------------------------------------------------*/

/* ----------＜＜レイアウト【大枠】＞＞---------- */

div#wrap{
    clear: both;
    padding-bottom: 0;
    margin-bottom: 0;
}
div#top_main{
    width: 700px;
    float: right;
    margin-bottom: 10px;
}

div#top_side{
    width: 220px;
    float: left;
    margin-bottom: 13px;
}




/* ----------＜＜ヘッダ＞＞---------- */
div#h0wrap{
    width:940px;
    height: 69px;
    margin: 0 auto ;
    padding: 0;
    background-image: url(../images/bkg_01_head.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
}
div#h0wrap #h0left1{
    width: 177px;
    margin: 0;
    padding: 14px 0 13px 0 ;
    font-size: 1%;
    line-height: 1%;
    float: left;
}
div#h0wrap #h0right1{
    width: 470px;
    height: 69px;
    margin: 0;
    padding: 0;
    float: right;
}

/* -- (#h0left2)内リンク群 -- */
div#h0wrap #h0left2{
    width: 195px;
    height: 69px;
    margin: 0 0 0 0;
    padding: 0;
    float: left;
}
div#h0wrap #h0left2 form{
    width: 190px;
    margin: 5px 0 2px 5px;
    padding: 0;
    background-image: url(../images/bkg_15_search_inputarea_head.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
}
div#h0wrap #h0left2 form input{
    margin: 0;
    padding: 0;
    vertical-align: top;
}
div#h0wrap #h0left2 form .search_box{
    width: 120px;
    height: 16px;
    margin: 3px 0 0 24px;
    padding: 0;
    border: none;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
div#h0wrap #h0left2 ul.h_list01{
    width: 195px;
    height: 36px;
    margin: 30px 0 0 0;
    padding: 0;
}
div#h0wrap #h0left2 ul.h_list01 li{
    margin: 0;
    padding: 0 0 0 20px;
    display: block;
    background-image: url(../images/icn_01_tri_orange01.gif);
    background-repeat: no-repeat;
    background-position: 0 -2px;
}

/* -- (#h0right2)内リンク群 -- */
div#h0wrap #h0right2{
    width: 270px;
    height: 69px;
    margin: 0;
    padding: 0;
    float: right;
}
div#h0wrap #h0right2 ul.h_list02{
    width: 214px;
    height: 17px;
    margin: 6px 0 0 0;
    padding: 0;
    float: right;
}
div#h0wrap #h0right2 ul.h_list02 li{
    width: 49px;
    height: 17px;
    margin: 0 6px 0 0;
    padding: 0;
    display:inline
    background-image: none;
    line-height: 1%;
    float: left;
}
div#h0wrap #h0right2 ul.h_list02 li a{
    margin: 0;
    padding: 0;
    background-image: none;
}
div#h0wrap #h0right2 ul.h_list02 li.lastli{
    margin: 0;
}
div#h0wrap #h0right2 ul.h_list03{
    width: 159px;
    height: 17px;
    margin: 3px 0 0 0;
    padding: 0;
    float: right;
}
div#h0wrap #h0right2 ul.h_list03 li{
    width: 49px;
    height: 17px;
    margin: 0 6px 0 0;
    padding: 0;
    display:inline
    background-image: none;
    line-height: 1%;
    text-align: right;
    float: left;
}
div#h0wrap #h0right2 ul.h_list03 li a{
    margin: 0;
    padding: 0;
    background-image: none;
}
div#h0wrap #h0right2 ul.h_list03 li.lastli{
    margin: 0;
}
div#h0wrap #h0right2 ul.h_list04{
    margin: 7px 0 0 0;
    padding: 0 0 0 0;
    float: right;
}
div#h0wrap #h0right2 ul.h_list04 li{
    margin: 0;
    padding: 0 9px 0 10px;
    background-image: none;
    border-right: solid 1px #434343;
    line-height: 1.1;
    display: inline;
    float: left;
}
div#h0wrap #h0right2 ul.h_list04 li a{
    margin: 0;
    padding: 0;
    color: #434343;
    line-height: 1.1;
}

div#h0wrap #h0right2 ul.h_list04 li.lastli{
    padding: 0 0 0 10px;
    border: none;
}

/* ----------＜＜メインコンテンツ（左側）＞＞---------- */

div#top_main li,
div#top_side li{
    background-image: url(../images/icn_01_tri_orange01.gif);
    background-repeat: no-repeat;
    background-position: left 1px;
    padding-left: 17px;
    padding-top: 2px;
    padding-bottom: 3px;
    margin-top: -2px;
    margin-bottom: -3px;
}


/* -- 重要なお知らせ --*/
div#attention{
    background-image: url(../images/bkg_04_attention_btm.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    width: 700px;
    margin-bottom: 11px;
}
div#attention ul{
    margin-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}
div#attention2{
    background-image: url(../images/bkg_04_attention_btm2.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    width: 700px;
    margin-bottom: 11px;
}
div#attention2 ul{
    margin-left: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* -- 市民の総合案内 --*/
div#synthesis_guidance{
    background-image: url(../images/bkg_05_synthesis_guidance_mdl.gif);
    background-repeat: no-repeat;
    background-position: left 47px;
    position: relative;
}
div#synthesis_guidance .syn_general_block{
    background-image: url(../images/bkg_06_syn_general_block_btm.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 214px;
    float: left;
    margin: 3px 0 6px 14px;
    padding: 0 0 14px 0;
    font-family: "ＭＳ ゴシック";
}
div#synthesis_guidance #syn_kurashi,
div#synthesis_guidance #syn_culture{
    margin-left: 17px !important;
}

div.menu_left01{
    float: left;
    width: 131px;
}

div#synthesis_guidance .syn_general_block ul{
    margin: 9px 7px 0 7px;
    padding: 0;
}
div#synthesis_guidance .syn_general_block ul li{
    background-image: url(../images/icn_03_arrow_blue01.gif);
    background-repeat: no-repeat;
    background-position: 0 0.05em;
    padding: 0 0 0 21px;
    margin: 0;
    line-height:1.8em;
}
div#synthesis_guidance .syn_general_block .to_detailicon{
    float: right;
    width: 82px;
    height: 11em;
    min-height: 91px;
    margin: 0;
    padding-top: 7px;
}
div#synthesis_guidance .syn_general_block .to_detailicon a{
    margin-right: 0;
}
div#synthesis_guidance .syn_general_block .to_detail{
    clear: both;
    text-align: right;
    width: 180px;
    margin: 0 auto;
    padding-right: 4px;
}
div#synthesis_guidance .syn_general_block .to_detail a{
    background-image: url(../images/icn_01_tri_orange01.gif);
    background-repeat: no-repeat;
    background-position: left -5px;
    padding-left: 17px;
    padding-top: 0;
}
div#synthesis_guidance .syn_general_block ul.supply_menu{
    clear: both;
    border-top: solid 1px #2e6699;
    width: 188px;
    margin: 7px 0 0 11px;
    padding: 7px 0 0 0;
    background-image: none !important;
}
div#synthesis_guidance .syn_general_block ul.supply_menu li{
    width: 58px;
    float: left;
    text-align: center;
    margin: 0;
    padding: 0 7px 0 0;
    font-size: 1%;
    line-height: 1%;
    background-image: none !important;
}
div#synthesis_guidance .syn_general_block ul.supply_menu li.lastli{
    padding-right: 0;
}
div#syn_commynity_bottom{
    background-image: url(../images/bkg_05_synthesis_guidance_btm.gif);
    background-repeat: no-repeat;
    background-position: bottom;
    margin-top: 3px;
    clear: both;
}

/* 注目のキーワード */
div#syn_commynity_bottom div#at_word{
    padding-bottom: 20px;
    width: 439px;
    float: left;
    padding-left: 16px;
}
div#syn_commynity_bottom div h3{
    clear: both;
    background-color: #deebfb;
    color: #0648a9;
    font-weight: bold;
    padding: 3px;
    margin: 3px 0 10px;
}
div#syn_commynity_bottom div ul{
    margin: 18px 0 0 8px;
}
div#syn_commynity_bottom div li{
    float: left;
    padding-right: 20px;
    white-space: nowrap;
}
div#syn_commynity_bottom div li a{
    font-weight: bold;
}


/* よくある質問 */
div#syn_commynity_bottom div#top_q_and_a{
    padding-bottom: 10px;
    width: 211px;
    float: right;
    padding-right: 17px;
}
div#syn_commynity_bottom div#top_q_and_a p{
    text-align: center;
}
div#syn_commynity_bottom div#top_q_and_a h3{
    background-color: #e3e3e3;
    color: #434343;
}



/* 新着・RSS・検索 */
div#news_and_search{
    position: absolute;
    top: 0;
    width: 700px;
}
div#news_and_search .news{
    margin-left: 176px;
    margin-top: 14px;
    width: 180px;
    float: left;
}
div#news_and_search .news img{
    vertical-align: middle;
}
div#news_and_search .news .btn_rss{
    margin-left: 1px;
}
div#news_and_search form{
    display: block;
    float: right;
    margin-top: 10px;
    margin-right: 13px;
    background-image: url(../images/bkg_07_search_inputarea.gif);
    background-repeat: no-repeat;
    background-position: left top;
    height: 28px;
    width: 254px;
    padding-bottom: 15px;
    vertical-align: middle;
}
div#news_and_search form input{vertical-align: middle;}
div#news_and_search form .search_box{
    width: 168px;
    margin-left: 28px;
    border: 1px solid #FFF;
    height: 22px;
}


/* -- トピックス --*/

div#top_topic_news{
    width: 700px;
    background-image: url(../images/bkg_08_topics_btm.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-top: 13px;
    margin-bottom: 13px;
    padding-bottom: 17px;
}
div#top_topic_news ul{
    margin: 2px 0;
    margin-right: 0;
    width: 346px;
    float: left;
    padding-left: 4px;
}
div#top_topic_news ul.right{
    background-image: url(../images/bkg_09_topics_list.gif);
    background-repeat: repeat-y;
    background-position: -3px top;
    padding-left: 1px;
}



div.top_column01{
    background-image: url(../images/bkg_19_top_float_column01.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    font-family: "ＭＳ ゴシック";
}
/* -- 町田市への引越しを考えている方へ --*/
div#about_city_info{
    width: 220px;
    float: left;
    padding-bottom: 45px;
    margin-right: 19px;
}
div#about_city_info ul{
    width: 204px;
    margin: 2px auto;
    margin-left: 4px;
}

/* -- イベントカレンダー --*/
div#top_event_calendar{
    width: 460px;
    float: left;
}

div#top_event_calendar_left {
    width: 180px;
    float:left;
}
div#top_event_calendar_left p {
    margin-left: 5px;
    background-image: url(../images/icn_03_arrow_blue01.gif);
    background-repeat: no-repeat;
    padding-left: 21px;
    padding-top: 2px;
    padding-bottom: 3px;
}


div#top_event_calendar table{
    width: 163px;
    background-color: #d8d8d8;
    padding-top: 0em;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    margin-top: 8px;
    margin-left: 8px;
    margin-bottom: 15px;
}
div#top_event_calendar table caption{
    margin: 0px;
    margin-bottom: 0em;
    background-color: #777777;
    padding: 0 2px;
    padding-top: 2px;
    padding-left: 5px;
    padding-bottom: 0;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    border-top:6px solid #d8d8d8;
    border-right:3px solid #d8d8d8;
    border-left:3px solid #d8d8d8;
}
div#top_event_calendar table th{
    width: 20px;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 2px;
}
div#top_event_calendar table td{
    width: 20px;
/*    background-color: #e9e9e9;*/
    background-color: #ffffff !important;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
}
div#top_event_calendar table td.sun,
div#top_event_calendar table td.sat,
div#top_event_calendar table td.event{
    background-color: #ffffff;
}
div#top_event_calendar table td.today{
    background-color: #ffff80 !important;
}
div#top_event_calendar table td.today a{
    font-weight: bold;
}
div#top_event_calendar table td a{
    color: #434343;
}
div#top_event_calendar table td.sun a,
div#top_event_calendar table td.holi a{
    color: #c00909;
}
div#top_event_calendar table td.sat a{
    color: #095dda;
}

div#top_event_calendar table td.sun,
div#top_event_calendar table td.holi{
    color: #c00909;
}

div#top_event_calendar table td.sat{
    color: #095dda;
}


div#top_event_calendar .detail_data{
    width: 254px;
    float: right;
    margin-right: 15px;
}
div#top_event_calendar .detail_data h3{
    font-weight: bold;
    border-bottom: dotted 1px #5f98ff;
    margin-top: 2px;
    width: 220px;
    margin-right: 10px;
    padding-bottom: 5px;
}
div#top_event_calendar .detail_data h3 img{
    vertical-align: bottom;
    margin-right: 3px;
}
div#top_event_calendar .detail_data ul{
    margin: 3px 0px;
}
div#top_event_calendar .detail_data ul li{
    background-position: -4px 0;
    padding-left: 14px;
}
div#top_event_calendar .detail_data .to_detail{
    text-align: right;
    margin: 0 auto;
}
div#top_event_calendar .detail_data .to_detail a{
    background-image: url(../images/icn_01_tri_orange01.gif);
    background-repeat: no-repeat;
    background-position: left -3px;
    padding-left: 22px;
    padding-top: 2px;
    padding-bottom: 3px;
}
div#top_event_calendar .detail_data p{
    margin: 10px 15px;
    margin-left: 3px;
    margin-top: 10px;
}
div#top_event_calendar .detail_data p.weather_link{
    margin: 10px 15px;
    margin-left: 3px;
    margin-top: 10px;
}
div#top_event_calendar .detail_data p.weather_link img{
    vertical-align: bottom;
    margin-right: 3px;
}
div#top_event_calendar .detail_data p.weather_link a{
    font-weight: bold;
}





/* ----------＜＜サイドバー＞＞---------- */
div#right_infomation{
    padding:10px;
    padding-bottom: 2px;
    background-color: #eef2f3;
    margin-bottom: 13px;
    font-family: "ＭＳ ゴシック";
}
div#right_infomation #city_administration,
div#right_infomation #setai_jinko,
div#right_infomation #onlineservices,
div#right_infomation #koho{
    border: solid 1px #86b1ff;
    background-color: #ffffff;
    margin: 0 auto;
    margin-bottom: 8px;
}

div#right_infomation #city_administration h2,
div#right_infomation #setai_jinko h2,
div#right_infomation #onlineservices h2,
div#right_infomation #koho h2{
    border: solid 1px #ffffff;
    background-color: #deebfb;
    border-bottom: solid 1px #86b1ff;
    padding: 3px 6px;
    padding-top: 4px;
}

/* 緊急情報 */
div#right_infomation #emargency_info{
    border: solid 1px #c00909;
    background-color: #ffffff;
    margin: 0 auto;
    margin-bottom: 8px;
}
div#right_infomation #emargency_info h2{
    border: solid 1px #ffffff;
    background-color: #c00909;
    border-bottom: solid 1px #c00909;
    padding: 3px 6px;
    padding-top: 4px;
}

div#right_infomation #emargency_info dl{
    margin: 4px 4px;
    margin-bottom: 8px;
}
div#right_infomation #emargency_info dl dt a{
    background-image: url(../images/icn_03_arrow_blue01.gif);
    background-repeat: no-repeat;
    background-position: left -2px;
    padding-left: 21px;
    padding-top: 2px;
    padding-bottom: 3px;
}
div#right_infomation #emargency_info dl dd{
    padding-left: 19px;
    margin-bottom: 1px;
}

/* 市政情報 */
div#right_infomation #city_administration{
    margin-top: -2px;
}
div#right_infomation #city_administration .admin_menu01{
    border-bottom: solid 1px #86b1ff;
}
div#right_infomation #city_administration ul{
    margin: 5px 1px;
    margin-top: 7px;
}
div#right_infomation #city_administration ul li{
    margin-top: 0;
    background-position: -2px top;
}
div#right_infomation #city_administration .to_detail{
    text-align: right;
    margin: 10px;
    margin-top: 3px;
}
div#right_infomation #city_administration .to_detail a{
    background-image: url(../images/icn_01_tri_orange01.gif);
    background-repeat: no-repeat;
    background-position: left -2px;
    padding-left: 22px;
    padding-top: 2px;
    padding-bottom: 3px;
}
div#right_infomation #city_administration .admin_menu02{
    margin: 2px 5px;
    margin-bottom: 10px;
}
div#right_infomation #city_administration .admin_menu02 li{
    font-weight: bold;
    background-image: none;
    padding-left: 0;
}
div#right_infomation #city_administration .admin_menu02 li img{
    vertical-align: bottom;
    margin-bottom: -1px;
}
div#right_infomation #city_administration .admin_menu02 a{
    font-weight: bold;
}
div#right_infomation #city_administration .admin_menu02 .add_menu{
    padding-left: 21px;
}

/* 世帯・人口 */
div#right_infomation #setai_jinko{
    margin-top: -2px;
}

div#right_infomation #setai_jinko ul{
    margin: 0px 1px 7px;
}

div#right_infomation #setai_jinko ul li{
    margin-top: 0;
    background-position: -2px top;
}

div#right_infomation #setai_jinko p{
    margin: 0px;
    padding-left: 19px;
    margin-bottom: 1px;
}

div#right_infomation #setai_jinko p.top{
    margin-top: 7px;
}

div#right_infomation #setai_jinko p span.subject{
    width: 140px;
    margin-right: 10px;
}

div#right_infomation #setai_jinko p span.unit{
    width: 140px;
    margin-left: 10px;
}

/* オンラインサービス */
div#right_infomation #onlineservices{
    margin-top: -2px;
}
div#right_infomation #onlineservices ul{
    margin: 5px 1px 7px;
/*    margin: 5px 1px;
    margin-top: 7px;*/
}
div#right_infomation #onlineservices ul li{
    margin-top: 0;
    background-position: -2px top;
}

/* 広報 */
div#right_infomation #koho{
    margin-top: -2px;
}
div#right_infomation #koho ul{
    margin: 5px 1px;
/*    margin: 5px 1px;
    margin-top: 7px;*/
}
div#right_infomation #koho ul li{
    margin-top: 0;
    background-position: -2px top;
}
div#right_infomation #koho .qrcode{
    margin: 2px 5px;
    margin-bottom: 10px;
}

div#right_infomation #koho .qrcode li{
    display: inline-block;
    font-weight: bold;
    background-image: none;
    padding-left: 0;
}

div#right_infomation #koho .qrcode li.left{
    float:left;
    padding-left:1px;
}

div#right_infomation #koho .qrcode li img{
    vertical-align: bottom;
}

/* バナーエリア */
div#right_infomation .area_banner li{
    padding: 0;
    text-align: center;
    margin-bottom: 8px;
    background-image: none;
}
div#right_infomation .area_banner li img{
    vertical-align: bottom;
}

/* zoomsight */
div#top_side #zoomsight{
    border: solid 1px #b5b5b5;
    padding-top: 5px;
    padding-bottom: 2px;
}
div#top_side #zoomsight p{
    width: 100px;
    float: left;
    text-align: center;
}
div#top_side #zoomsight ul{
    float:left;
    width: 115px;
}
div#top_side #zoomsight ul li{
    padding-left: 10px;
    background-position: -5px top;
}




/* ----------＜＜広告＞＞---------- */
#top_bottom{
    clear:both;
    width: 940px;
    margin:0 0 18px 0;
    padding: 0;
}

#top_bottom h2{
    padding-bottom: 4px;
    border-bottom: solid 4px #5e97fe;
}
#top_bottom p.supply{
    text-align: right;
    margin-top: -25px;
}
#top_bottom p.supply a{
    background-image: url(../images/icn_01_tri_orange01.gif);
    background-repeat: no-repeat;
    background-position: left -3px;
    padding-left: 22px;
    padding-top: 2px;
    padding-bottom: 3px;
}
#top_bottom ul{
    margin: 19px 0 0 0;
    padding: 0 0 0 0;
}

#top_bottom ul li{
    margin: 0;
    padding: 0;
    font-size: 1%;
    line-height: 1%;
    width: 156px;
    height: 60px;
    float: left;
    text-align: left;
}
#top_bottom ul li img{
    margin: 0 0 0 13px;
    padding: 0;
}