@charset "UTF-8";

body {

	/* IE用ボックスセンタリング */
	text-align: center;
}


a {

	color: #F00;
}


/* day img hover ----------------------------------------------------------------------- 


table#scheduleCal td
div.pageTop a {
	
	display: block;
	background:url(../assets/alot_pentop.gif) no-repeat;
	background-position: right 0;
	width: 100%;
	height: 24px;
	margin: 0 auto;
}

div.pageTop a:hover {
	
	background-position: right -24px;
}


body#us div.pageTop a {
	width: 632px;
}


*/

/* pentop ----------------------------------------------------------------------- */


div.pageTop {
	padding-bottom: 57px;
	
	clear: both;
	display: block;
}

body#us {

	background: url(../assets/us/bk_line_bottom.gif) center bottom no-repeat;
}

div.pageTop:after {
	
	height: 0; visibility: hidden; content: "."; display: block; clear: both;}


div.pageTop a {
	
	display: block;
	background:url(../assets/alot_pentop.gif) no-repeat;
	background-position: right 0;
	width: 100%;
	height: 24px;
	margin: 0 auto;
}

div.pageTop a:hover {
	
	background-position: right -24px;
}


body#us div.pageTop a {
	width: 632px;
}

body#day div.pageTop {
	background: none;
}

/*
div.pageTop a {

	clear: both;
	display: block;
	
	margin: auto;
	padding: 0;
	width: 632px;
	
	text-align: right;
	
}

div.pageTop a:after {
	
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

*/

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

div#header, div#content, div#footer,
div#twitcontent {
	
	/* ボックスのセンタリング */
	margin: auto;
	
	/* 横幅の指定 */
	width: 100%;
	
	/* インラインの中央揃えを左寄せにリセット */
	text-align: left;
}



div#content {
	/*width: 950px;*/
}

/* 親ボックスの高さを算出 */
div#content:after,
div#twitcontent:after {

	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

div#content:after,
div#twitcontent {

	/* IE6,7用 */
	width: 100%;
	
	
	/* Mac IE5用 */
	
	/*¥*//*/
	overflow: hidden;
	/**/
}

div#boxA {

	float: left;
	/*width: 33%;*/
}

div#boxB {

	margin: 0 1px;
	display: inline;	/* IE6対策（marginの値が倍になるバグの回避） */
	float: left;
	/* width: 66%; */
}

div#boxC {

	float: left;
	/*width: 33%;*/
}



#boxA p {

	font-weight: 900;
	font-size: xx-large;
}




.accessibility {
	
	visibility: hidden;
	height: 0;
	margin: 0;
	padding: 0;
}


/* logo ===================================================== */
h1 {

	margin-bottom: 40px;
}

span,
span img {
	
	vertical-align: bottom;
	* margin-bottom: -1px;
}
* html span img {

	margin-bottom: -10px;
	padding-bottom: 0;
}


/* globalNavi ===================================================== */
ul#globalNavi {
	
	margin: auto;
	margin-top: 45px;
	padding: 0;
	width: 335px;
	background: url(../assets/bk_menu.gif) center top no-repeat;
}

body#day ul#globalNavi {
	margin-bottom: 36px;
}

body#us ul#globalNavi,
body#contact ul#globalNavi,
body#news ul#globalNavi {
	margin-bottom: 43px;
}

ul#globalNavi:after {
	
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

ul#globalNavi li {
	
	float: left;
	display: inline;
	
	width: 100px;
	list-style-type: none;
	text-align: center;
	
	margin-right: 15px;
}

ul#globalNavi li.us {
	
	width: 65px;
	margin-right: 0;
}

* html ul#globalNavi li.us {

	margin-left: -40px;
}

* html ul#globalNavi li.contact {

	margin-right: 0;
	margin-left: -48px;
}

/* タブ切り替え */
ul#globalNavi li a {
	
	margin: 8px 35px;
	margin-left: 38px;

	padding: 4px 0;
	border: none;
	display: block;
	line-height: 1;
	position: relative;
	
	/* IE6 */
	width: 76px;
	height: 26px;
	background: ;
	text-decoration: none;
}

ul#globalNavi li.schedule a {
	
	margin-left: 32px;
	padding: 4px 0;
	width: 76px;
	height: 26px;
	background: url(../assets/menu_schedule_on.gif) 0 4px no-repeat;
}
ul#globalNavi li.us a {

	margin-left: 38px;
	* html margin-left: -38px;
	
	width: 32px;
	height: 26px;
	background: url(../assets/menu_us_on.gif) 0 4px no-repeat;
}

ul#globalNavi li.contact a {

	margin-left: 48px;
	width: 76px;
	height: 26px;
	background: url(../assets/menu_contact_on.gif) 0 4px no-repeat;
}


ul#globalNavi li a:hover {
	
	background-color: #FFF;
}

body#schedule ul#globalNavi li.schedule a img,
body#us ul#globalNavi li.us a img,
body#contact ul#globalNavi li.contact a img,
ul#globalNavi li a:hover img {
	
	visibility: hidden;
}



/* scheduleCalMonth ===================================================== */

div#scheduleCalMonth {

	margin: auto;
	margin-top: 22px;
	padding: 0;
	width: 170px;
}

div#scheduleCalMonth:after {
	
	/* :after擬似要素による子ボックスのフロートのクリア */
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

div#scheduleCalMonth h3,
div#scheduleCalMonth p {
	
	float: left;
	list-style-type: none;
	text-align: center;
	
}

div#scheduleCalMonth h3 {

	margin: 0 13px;
}

div#scheduleCalMonth p {

	margin-top: 35px;
}




/* scheduleCal ( table ) ========================================= */


/* events : イベント -------------------------------------- */

.events {
	position: relative;
}


.events ul {
	text-align: left;
	position: absolute;
	display: none;
	z-index: 1000;
	/*padding: 15px;*/
	padding: 0;
	/*background: #E7ECF2 url(../img/popup.png) no-repeat;*/
	/*background: #000;*/
	color: white;
	/*border: 1px solid #7F7F7F;*/
	font-size: 15px;
	
	/* (first):  */
	/*width: 200px;*/
	
	/* 1列 : */
	/*width: 110px;*/
	
	/* 2列 : */
	/*width: 221px;*/
	
	/* 3列 : */
	/*width: 336px;*/
	
	/* new 3列 : */
	width: 363px;
	
	/*
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	-border-radius: 3px;
	*/
	list-style: none;
	color: #444444;
	/*-webkit-box-shadow: 0px 8px 8px #333;*/
}

.events ul li {

	background: transparent url(assets/bk_event.gif) top left repeat-y;
	padding-bottom: 8px;
}

.events ul.archive li {

/*	opacity: .5;
*/	/* For IE 5-7 */
/*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
*/	/* For IE 8 */
/*	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
*/
/*	background: #444444 url(../assets/bk_slit.gif) top left;*/
}
/*
.events ul.archive li {

	opacity: .5;
*/	/* For IE 5-7 */
/*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
*/	/* For IE 8 */
/*	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
*/
	/*background: #fff;*/
/*	background: #000;
}*/


/*bk_event_foot.gif*/


/*---------------------------------------------- IEで表示されない */
.events li img.thumb {
	
	float: left;
	padding: 0 12px 12px 12px;
	margin-bottom: 10px;
	
	position: relative;
	z-index: 1100;
}

.events li span {

	display: block;
	font-size: 12px;
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	text-align: justify;
	color: #333333;
	
	padding: 18px 18px 18px 0;
	padding-right: : 20px;
	margin-left: 147px;
	
}


.events li span.hnote {

	margin: 0;
	padding: 0;
	padding-top: 6px;
}

.events li span.holiday {

	padding: 18px;
}

.events li span.desc {

	padding-top: 0px;
	padding-bottom: 38px;
}

.events li span.title,
.events li span.title a {

	padding-top: 30px;
	font-weight: bold;
	color: #000;
}
.events li span.title a:hover {
	
	color: #f00;
}

.events li span.holiday {

	font-weight: bold;
	color: #D2D2D2;
	
	margin-left: 0;
}



.events li span.more {

	display: block;
	font-size: 11px;
	text-align: justify;
	
	padding: 0;
	margin: 0;
	text-align: center;
	
}

.events li span.more a {
	
	display: block;
	padding: 6px 6px 8px 6px;
	margin: 0 2px;
	font-weight: bold;
	color: #FFF;
}
.events li span.more a:hover {

	color: #000;
	text-decoration: none;
	
	background: #FFF;
}

.events div.eventfoot {

	background: transparent url(assets/bk_event_foot.png) top left no-repeat;
}

.events div.eventfoot img {
	
	display: block;
	height: 19px;
}


/* 親ボックスの高さを算出 */
.events li:after {

	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

.events li:after {

	/* IE6,7用 */
	width: 100%;
	
	
	/* Mac IE5用 */
	
	/*¥*//*/
	overflow: hidden;
	/**/
}




/* ****************************************************** */


div#scheduleCalDiv {

	margin: auto;
	padding: 0;
	width: 800px;
}

div#scheduleCalDiv:after {
	
	/* :after擬似要素による子ボックスのフロートのクリア */
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}


table#scheduleCal {

	margin: auto;
	margin-top: 26px;
	padding: 0;
/*	border-collapse: collapse;*/
	
	width: 778px;
}

table#scheduleCal:after {
	
	/* :after擬似要素による子ボックスのフロートのクリア */
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

table#scheduleCal th {
	
	border-bottom: #7F7F7F 1px solid;
	vertical-align: top;
}
table#scheduleCal th img {
	
	margin-bottom: 3px;
}


table#scheduleCal td {
	
	border-right: #7F7F7F 1px solid;
	border-bottom: #7F7F7F 1px solid;
}
table#scheduleCal td.mon {
	
	border-left: #7F7F7F 1px solid;
}

td.archive {

	background: url(../assets/bk_slit.gif);
}


img.holiday {
	width: 110px;
	height: 110px;
	
	opacity: .5;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	background: url(../assets/bk_holiday.gif);
}

img.archive {
	width: 110px;
	height: 110px;
	
/*	100510
	opacity: .5;
*/
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/*	100510
	background: url(../assets/bk_slit.gif);
*/
}

td.date_has_event {	background: url(../assets/office__gray.gif);}
td.mon {	background: url();}

td.cbcnet {	background: url(../assets/office_cbcnet_gray.gif);}/* cbcnet */
td.cinra {	background: url(../assets/office_cinra_gray.gif);}/* cinra */
td.komposition {	background: url(../assets/office_komposition_gray.gif);}/* komposition */
td.numabooks {	background: url(../assets/office_numabooks_gray.gif);}/* numabooks */
td.paradoxcreative {	background: url(../assets/office_paradoxcreative_gray.gif);}/* paradoxcreative */
td.restaurantbalance {	background: url(../assets/office_restaurantbalance_gray.gif);}/* restaurantbalance */
td.tokyohoiku {	background: url(../assets/office_tokyohoiku_gray.gif);}/* tokyohoiku */
td.tokyoshigoto {	background: url(../assets/office_tokyoshigoto_gray.gif);}/* tokyoshigoto */

td.castalia {	background: url(../assets/office_castalia_gray.gif);}
td.iid {	background: url(../assets/office_iid_gray.gif);}
td.greenz {	background: url(../assets/office_greenz_gray.gif);}
td.camp {	background: url(../assets/office_camp_gray.gif);}
td.scrap {	background: url(../assets/office_scrap_gray.gif);}
td.designmonkey {	background: url(../assets/office_designmonkey_gray.gif);}
td.moonlinx {	background: url(../assets/office_moonlinx_gray.gif);}
td.white-screen {	background: url(../assets/office_white-screen_gray.gif);}
td.llpwonder {	background: url(../assets/office_llpwonder_gray.gif);}
/*td.iid {	background: url(../assets/office_iid_gray.gif);}*/




/* liScroll style declarations =================================================================================== */

.tickercontainer { /* the outer div with the black border */

	background: #000;
	width: 328px; 
	height: 27px;
	
	margin: auto;
	padding-top: ;
	
	padding: 0;
	overflow: hidden;
}

.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */

	position: relative;
	left: 4px;
	top: 4px;
	width: 320px;
}

ul.newsticker { /* that's your list */

	position: relative;
	left: 750px;
	font: bold 12px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	
}

ul.newsticker li {

	float: left; /* important: display inline gives incorrect results when you check for elem's width */
	margin: 0;
	padding: 0;
	background: #000;
	
	margin-bottom: 0.2em;
	
}

ul.newsticker a {

	white-space: nowrap;
	padding: 0;
	color: #FFFFFF;
	font: normal 12px;
	/*font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;*/
	margin: 0 50px 0 0;
}

ul.newsticker a:hover {

	color: #FF0000;
}

ul.newsticker span {

	margin: 0 10px 0 0;
	color: #ff0000;
}


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

/* day */

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

div#prev,
div#next,
div#current {

	margin: auto;
	padding: 0;
	width: 770px;
}

div#prev:after,
div#next:after,
div#current:after {
	
	/* :after擬似要素による子ボックスのフロートのクリア */
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}


div#current {

	margin-top: 80px;
}

/* --------------------------------------------------------------------- */
/* day new reyout ------------------------------------------------------ */

/*
div#twitcontent {
	width: 778px;
	margin-top: 100px;
	padding-top: 40px;
	
	background: url(../assets/bk_line_x.gif) top left repeat-x;
}*/


div#entrydate h4,
div#access h4,
div#charge h4,
div#hostProf h4 {

	float: left;
	width: 100px;
}

div#entrydate div.content,
div#access div.content,
div#charge div.content,
div#hostProf div.content {
	margin: 0 0 60px 110px;
}

div#hostProf div.content {
	margin: 0 0 80px 110px;
}

div#current p {
	
	text-align: left;
	margin-bottom: 10px;
	
	
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

div#current h4 {
	
	font-weight: bold;
	text-align: left;
}

div#current h3 {
	
	font-size: 200%;
	font-weight: bold;
	line-height: 1.6;
	margin-bottom: 100px;
	
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}


span.hnote {

	font-size: 50%;
}



div#entrydate div.content p {
	/*
	margin-right: 110px;
	text-align: center;*/
	font-weight: bold;
}


div#hostName h4,
div#presentedby h4,
div#entryContent h4 {

	text-align: center;
}


div#hostName div.content p,
div#presentedby div.content p {

	text-align: center;
	margin-bottom: 56px;
	
	line-height: 2;
}

div#hostName h4,
div#presentedby h4 {

	margin-bottom: 0.2em;
}

div#entryContent div.content {

	margin-bottom: 80px;
}

div#presentedby div.content p img {

	border: 1px solid #7F7F7F;
}



/* the END of day new reyout ------------------------------------------- */
/* --------------------------------------------------------------------- */


div#prev {
	/*margin-top: 36px;*/
}

div#prev div.arrowBlock,
div#next div.arrowBlock {
	
	widows: 770px;
	height: 50px;
}
div#next div.arrowBlock {
	margin-top: 8px;
}

div#prev div.dateBlock,
div#next div.dateBlock {
	
	widows: 770px;
	padding: 8px 0;
	
	background: url(../assets/bk_slit.gif);
}

div#next div.arrowBlock a,
div#prev div.dateBlock a,
div#next div.dateBlock a {
	
	display: block;
	border: none;
}

/*  prev / next ここまで*/

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

div.neighbour {
	margin: 8px auto;
	padding: 0;
	width: 770px;
	height: 33px;
}


div.neighbour:after {
	
	/* :after擬似要素による子ボックスのフロートのクリア */
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}


div.neighbour a {
	
	border: none;
	display: block;
}


div.neighbour a span.prevArrowBlock  {
	
	display: block;
	background:url(../assets/alot_arrow_bottom.gif);
	background-position: 0 0;
	width: 16px;
	height: 33px;
	margin: 0 auto;
/*	margin-bottom: 8px;*/
}

div.neighbour a span.nextArrowBlock  {
	display: block;
	background:url(../assets/alot_arrow_bottom.gif);
	background-position: 16px 0;
	width: 16px;
	height: 33px;
	margin: 0 auto;
/*	margin-top: 8px;*/
}


div.neighbour a:hover span.prevArrowBlock {
	
	background-position: 0 -33px;
}
div.neighbour a:hover span.nextArrowBlock {
	
	background-position: 16px -33px;
}

/* 斜線 */
div.neighbour a span.dateBlock {
	
	display: block;
	
	background: url(../assets/bk_slit.gif);
	
	width: 770px;
	margin: 0 auto;
	padding: 6px 0;
}

div.neighbour a:hover span.dateBlock  {
	
	background: url(../assets/bk_slit_on.gif);
}

/*
	margin: auto;
	padding: 0;
	width: 770px;
*/
div.dateBlock {
	
	width: 770px;
	padding: 8px 0;
	
	margin: auto;
	/*margin-bottom: 100px;*/
	margin-bottom: 0;
	
	border: 1px solid #7F7F7F;
}
/* --------------------------------------*/

/*
div#current p {
	
	margin: 0 124px 12px 124px;
	text-align: left;
}

div#current p.date {
	
	margin: 0 124px 12px 124px;
	text-align: left;
}

div#current h3 {

	font: 160%;
	font-weight: bold;
	line-height: 1.6;
}
*/

/* new sponcer */
div#current div.office {

	padding: 18px;
}




/* -- new entry content style -------------------------------------------------------- 
div#current div.entrydate h3 {

	text-align: left;
}

div#current h4 {

	text-align: left;
}


div#current #access h4 {
	margin-bottom: 12px;
}

div#current div#entrydate p {

	text-align: center;
}
*/

/* =================================================================================== */
/*    day  :  access */
/* =================================================================================== */

#access {
	
	margin-bottom:60px;
}

#access h3 {
	text-align: left;
	margin-bottom: 8px;
}

#access #gmap {

	margin-bottom: 40px;
}

#access p.t {

	font-size: 100%;
	margin: 0;
	
	margin-bottom: 10px;
}

#access p.first {

	margin-bottom: 30px;
}



/* ====================================================================== */
/*    news */
/* ====================================================================== */


body#news div#wrap {

	margin: auto;
	padding: 0;
	width: 770px;
	
	margin-top: 36px;
}

body#news div#wrap:after {height: 0;visibility: hidden;content: ".";display: block;clear: both;}



body#news div#wrap h4 {

	float: left;
	width: 100px;
	
	font-weight: bold;
	text-align: left;

}

body#news div#wrap div.content {

	margin: 0 0 60px 110px;
}



body#news h3 {
	
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	line-height: 1.8;
	
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

body#news h3 a {

	color: #000;
}

body#news h3 a:hover {

	color: #F00;
}

body#news p {
	
	text-align: left;
	line-height: 2;
	margin-bottom: 10px;
	
	width: 660px;
	
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}



body#news .newsheader,
body#news .newsfooter {

	color: #BFBDBF;
	display: block;
	font-size: 0.8em;
	
}

body#news .newsheader {

	text-align: left;
	margin-bottom: 18px;
}

body#news .newsfooter {

	text-align: right;
	margin-bottom: 88px;
}




/* =================================================================================== */
/*    contact */
/* =================================================================================== */


#contactContent {

	width: 832px/*770px*/;
	margin: 0 auto;
	text-align: left;
}

#contactContent .way {
	
	text-align: center;
	size: 120%;
	font-weight: bold;
	margin: 20px 0;
	
}

#contactContent h3 {

	margin-top: 0;
	text-align: center;
	margin-bottom: 40px;
}

#contactContent #access h3 {

	text-align: left;
	margin-top: 60px
}


/* =================================================================================== */
/*    copyright      */
/* =================================================================================== */
p#copyright {

	color: #CCC;
	font-size: 10px;
	margin-top: 110px;
}



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

/* us */

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

body#us div#wrap,
body#contact div#wrap {

	margin: 0 auto;
	padding: 0;
	
	width: 832px;
	
	background: url(../assets/us/bk_line_middle.gif) left repeat-y;
}

body#us div#wrap:after,
body#contact div#wrap:after {
	
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}



#sentence1 {

	* margin-top: -0px;
	margin-bottom: 33px;
	
	/* width: 832px; */
	padding-top: 67px;
	background: url(../assets/us/bk_line_top.gif) center top no-repeat;
}

#contactfoot {
	padding-bottom: 57px;
	background: url(../assets/us/bk_line_bottom.gif) center bottom no-repeat;
}


#sentence2 {
	margin-top: 27px;
}



/* 3段組み ----------------------------------------------------- */

div#content {
	width: 736px;
}
div#content:after {
	
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

div.paragraph1 {
	float: left;
	width: 206px;
}
div.paragraph2 {	
	
	margin: 0 32px 0 41px;
	display: inline;
	float: left;
	width: 268px;

	background: url(../assets/us/bk_line_paragraph2.gif) left repeat-y;
}
div.paragraph3 {	
	
	float: left;
	width: 188px;
}

div.paragraph1 h4,
div.paragraph2 h4,
div.paragraph3 h4 {

	text-align: center;
	margin-bottom: 24px;
	/*padding-left: 40px;*/
}
div.paragraph1 h4 {

	margin-left: -6px;
}
div.paragraph2 h4 {

	padding-right: 22px;
}
div.paragraph3 h4 {

	margin-right: 10px;
}
div.paragraph1 p,
div.paragraph2 p,
div.paragraph3 p {

	text-align: center;
	/*padding-left: 40px;*/
	margin-bottom: 20px;
}


#sentence3 {

	margin-top: 65px;
	margin-bottom: 27px;
}



/* 事務所 -------------------------------------------------------------- */



div.office {

	margin: auto;
	padding: 0;
	width: 700px;
}

div.office:after {
	
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}



div.office ul {

	margin: 0.5em 16px;
	padding: 0;
	list-style: none;
}

div.office ul li {

	margin: 0 4px 4px 10px;
	padding: 4px;
	float: left;
	width: 200px;
	height: 88px;
}

div.office ul li.office01{}
div.office ul li.office02{ margin-top: 19px;}
div.office ul li.office03{ margin-top: 23px;}

div.office ul li.office04{}
div.office ul li.office05{ margin-top: 52px;}
div.office ul li.office06{ margin-top: 56px;}

div.office ul li.office07{ margin-left: 115px; margin-top: 52px;}
div.office ul li.office08{ margin-left: 70px; margin-top: 56px;}