@charset "utf-8";

/***************************************************
	Poupee Girl Style Sheet
	for: common.css
	Revision: 1.0
	Date: 2008/03/28
    Author: Ryuichi Suga
***************************************************/
* {
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}

body {
	font-size: 80%;
	color: #523021;
	text-align: center;
	background: #9cc url("../image/bg_body.gif");
}

* html body { /* for IE */
	font-size: 75%;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

a {
	color: #31309c;
}

a:hover {
	text-decoration: underline;
}


p {
	line-height: 1.7
}

b {
	font-style: inherit;
	font-weight: 700;
}

strong {
	font-style: inherit;
	font-weight: 700;
}

em {
	font-style: italic;
	font-weight: inherit;
}

i {
	font-style: italic;
	font-weight: inherit;
}

font {
	font-style: inherit;
	font-weight: inherit;
}

u {
	font-style: inherit;
	font-weight: inherit;
	text-decoration: underline;
}

strike {
	font-style: inherit;
	font-weight: inherit;
	text-decoration: line-through;
}

ul,ol {
	list-style: none outside;
}

img {
	border: none;
	vertical-align: bottom;
}

hr {
	clear: both;
	height: 1px;
	border: none;
}

table,tr,td {
	border-collapse: collapse;
}

table,tr,td {
	border: none;
}

h2 {
	clear: both;
	height: 20px;
	line-height: 20px;
	padding-left: 20px;
	background: #fff url("../image/page_none.gif") left top no-repeat;
	border-bottom: 10px solid #734d31;
	font-weight: 700;
	text-align: left;
    margin-top: 10px;
}

h2 span,
h3 span,
h4 span {
	display: none;
}

h2 a {
	margin-left: 15px;
}

h2 img {
	vertical-align: middle;
}

h3 {
	clear: both;
	height: 20px;
	line-height: 20px;
	padding-left: 20px;
	background: url("../image/page_none.gif") no-repeat;
	font-weight: 700;
	text-align: left;
}

/***************************************************
	Button Definitions
***************************************************/
button {
	border: none;
	width: 150px;
	height: 30px;
	margin-right: 20px;
	cursor: pointer;
}

button.send {
	background: url("../image/button_send_message.gif") no-repeat;
    margin-top: 20px;
}

button span {
	display: none;
	color: #039;
}

.buttons {
	clear: both;
	display: block;
	height: 30px;
	background: url("../image/line_separator.gif") 0 10px repeat-x;
	padding: 20px 0 10px;
	text-align: center;
}

button:hover,
button.hover {
	background-position: 0 -30px;
}

/***************************************************
	Header Definitions
***************************************************/
#header {
	width: 880px;
	height: 80px;
	margin: 0 auto;
}

#header #logo {
	float: left;
	padding: 10px 0 0 20px;
}

#header #logo a {
	display: block;
	width: 250px;
	height: 57px;
	background: url("../image/logo_top.gif") no-repeat;
}

#header #logo a span {
	display: none;
}

#header ul {
	float: right;
	height: 26px;
	width: 580px;
	margin-top: 5px;
}

#header ul.menu {
	margin-top: 20px;
}

#header li {
	float: right;
}

#header li a {
	display: block;
	padding-left: 24px;
	margin: 0 8px 0 0;
	height: 21px;
	line-height: 21px;
	font-size: 12px;
	color: #714e31;
}

* html #header li a {
	display: inline-block;
}

#header li.home a {background: url("../image/icon/header/header_home.gif") no-repeat;}
#header li.brand a {background: url("../image/icon/header/header_brand.gif") no-repeat;}
#header li.community a {background: url("../image/icon/header/header_community.gif") no-repeat;}
#header li.help a {background: url("../image/icon/header/header_help.gif") no-repeat;}
#header li.announce a {background: url("../image/icon/header/header_announce.gif") no-repeat;}
#header li.invite a {background: url("../image/icon/header/header_invite.gif") no-repeat;}
#header li.jiten a {background: url("../image/icon/header/header_jiten.gif") no-repeat;}
#header li.tool a {background: url("../image/icon/header/header_tool.gif") no-repeat;}
#header li.login a {background: url("../image/icon/header/header_login.gif") no-repeat;}
#header li.search a {background: url("../image/icon/header/header_search.gif") no-repeat;}
#header li.logout a {background: url("../image/icon/header/header_logout.gif") no-repeat;}
#header li a:hover {
	background-position: 0 -21px;
}

#header li.welcome {
	display: block;
	line-height: 21px;
	margin: 0 20px 0 0;
	text-align: right;
}

h1.companyName {
    width: 860px;
    height: 35px;
    background: #543020 url("../image/title_company_name.gif") no-repeat;
}
/***************************************************
	Footer Definitions
***************************************************/
#footer {
	clear: both;
	margin: 0 auto;
	width: 880px;
	text-align: center;
	padding-top: 10px;
}

#footer ul {
	clear: both;
	padding: 5px;
	font-size: 12px;
}

#footer ul li {
	display: inline;
	padding: 0 13px;
	border-right: 1px solid #523021;
}

#footer ul li.last {
	border: none;
}

#footer .copyright {
    clear: both;
    font-size: 11px;
    margin:0 auto;
    padding-top: 10px;
    width: 440px;
}
		
#footer .copyright img {
    float: left;
    padding-left: 10px;
}

#footer .title {
	float: left;
	padding: 3px;
}

#footer .logo {
	float: left;
	width: 88px;
	height: 21px;
	background: url("../image/logo_cyber.gif") no-repeat;
}

#footer .logo span {
	display: none;
}

#footer ul#serviceList {
    font-size: .75em;
    padding-top: 10px;
}
#footer ul#serviceList a {
    padding-top: 3px;
}
#footer ul#serviceList li.lastItem {
    border-right: none;
}

/***************************************************
	Content Definitions
***************************************************/
#content {
	width: 860px;
	margin: 0 auto;
	padding: 10px;
	background: #fff;
}

#contentHeader {
	width: 860px;
}

#contentHeader ul {
	height: 35px;
}

#contentHeader ul li {
	float: left;
}

#contentHeader ul li a {
	display: block;
	width: 143px;
	height: 35px;
}

#contentHeader ul li.home a {
	width: 145px;
	background: url("../image/menu_home_self.gif");
}
#contentHeader ul li.closet a {
	background: url("../image/menu_closet_self.gif");
}
#contentHeader ul li.brand a {
	background: url("../image/menu_brand_self.gif");
}
#contentHeader ul li.item a {
	background: url("../image/menu_item_self.gif");
}
#contentHeader ul li.friend a {
	background: url("../image/menu_friend_self.gif");
}
#contentHeader ul li.message a {
	background: url("../image/menu_message_self.gif");
}
#contentHeader ul li.avatar a {
	background: url("../image/menu_avatar_self.gif");
}
#contentHeader ul li.homeOther a {
	width: 145px;
	background: url("../image/menu_home_other.gif");
}
#contentHeader ul li.closetOther a {
	background: url("../image/menu_closet_other.gif");
}
#contentHeader ul li.brandOther a {
	background: url("../image/menu_brand_other.gif");
}
#contentHeader ul li.friendOther a {
	background: url("../image/menu_friend_other.gif");
}
#contentHeader ul li.messageOther a {
	background: url("../image/menu_message_other.gif");
}
#contentHeader ul li.favoriteOther a {
	background: url("../image/menu_favorite_other.gif");
}
#contentHeader ul li.profileOther a {
	background: url("../image/menu_profile_other.gif");
}
#contentHeader ul li.homeFriend a {
	width: 145px;
	background: url("../image/menu_home_friend.gif");
}
#contentHeader ul li.closetFriend a {
	background: url("../image/menu_closet_friend.gif");
}
#contentHeader ul li.brandFriend a {
	background: url("../image/menu_brand_friend.gif");
}
#contentHeader ul li.friendFriend a {
	background: url("../image/menu_friend_friend.gif");
}
#contentHeader ul li.messageFriend a {
	background: url("../image/menu_message_friend.gif");
}
#contentHeader ul li.favoriteFriend a {
	background: url("../image/menu_favorite_friend.gif");
}
#contentHeader ul li.profileFriend a {
	background: url("../image/menu_profile_friend.gif");
}
#contentHeader ul li.homeAnon a {
	width: 145px;
	background: url("../image/menu_home_anon.gif");
}
#contentHeader ul li.closetAnon a {
	background: url("../image/menu_closet_anon.gif");
}
#contentHeader ul li.brandAnon a {
	background: url("../image/menu_brand_anon.gif");
}
#contentHeader ul li.friendAnon a {
	background: url("../image/menu_friend_anon.gif");
}
#contentHeader ul li.profileAnon a {
	background: url("../image/menu_profile_anon.gif");
}
#contentHeader ul li.signup a {
	width: 860px;
	background: url("../image/menu_sign_up_large.gif");
}
#contentHeader ul li.signupAnon a {
	width: 286px;
	background: url("../image/menu_sign_up_middle.gif");
}

#contentHeader ul.home li.home a,
#contentHeader ul.closet li.closet a,
#contentHeader ul.brand li.brand a,
#contentHeader ul.item li.item a,
#contentHeader ul.friend li.friend a,
#contentHeader ul.message li.message a,
#contentHeader ul.avatar li.avatar a,
#contentHeader ul.home li.homeOther a,
#contentHeader ul.closet li.closetOther a,
#contentHeader ul.brand li.brandOther a,
#contentHeader ul.friend li.friendOther a,
#contentHeader ul.message li.messageOther a,
#contentHeader ul.favorite li.favoriteOther a,
#contentHeader ul.profile li.profileOther a,
#contentHeader ul.home li.homeFriend a,
#contentHeader ul.closet li.closetFriend a,
#contentHeader ul.brand li.brandFriend a,
#contentHeader ul.friend li.friendFriend a,
#contentHeader ul.message li.messageFriend a,
#contentHeader ul.profile li.profileFriend a,	
#contentHeader ul.favorite li.favoriteFriend a,
#contentHeader ul.home li.homeAnon a,
#contentHeader ul.closet li.closetAnon a,
#contentHeader ul.brand li.brandAnon a,
#contentHeader ul.friend li.friendAnon a,
#contentHeader ul.profile li.profileAnon a,
#contentHeader ul.signup li.signup a,
{
	background-position: 0 -35px;
}

#contentHeader div.profile {
	height: 21px;
}

#contentHeader div#profileSelf,
#contentHeader div#profileAnon {
	background-color: #bf9d7b;
}
#contentHeader div#profileFriend {
	background-color: #ffb13e;
}
#contentHeader div#profileOther {
	background-color: #17729d;
}

#contentHeader div.profile span {
	float: right;
	display: block;
	padding-left: 20px;
}

#contentHeader div.profile span.name {
	float: left;
	color: #fff;
	height: 21px;
	line-height: 21px;
	padding-left: 34px;
}

#contentHeader div.profile span.ribbon a {
	color: #fff;
	line-height: 21px;
	padding: 0 10px 0 30px;
	height: 21px;
	background: url("../image/menu_ribbon.gif") no-repeat;
}

#contentHeader div.profile span.profile a {
	display: block;
	color: #fff;
	width: 140px;
	height: 21px;
}

#contentHeader div.profile span.profile a.self {
	background: url("../image/menu_profile_self.gif") no-repeat;
}

#contentHeader div.profile span.profile a.other {
	background: url("../image/menu_profile_other.gif") no-repeat;
}

#contentHeader div.profile span.profile a.friend {
	background: url("../image/menu_profile_friend.gif") no-repeat;
}

#contentHeader div.profile span.profile a.anon {
	background: url("../image/menu_profile_anon.gif") no-repeat;
}

#contentHeader div.profile span.cute a {
	display: block;
	color: #fff;
	width: 100px;
	height: 21px;
	background: url("../image/menu_cute_history.gif") no-repeat;
}

#contentHeader div.profile span.commentHistory a {
	display: block;
	color: #fff;
	width: 150px;
	height: 21px;
}

#contentHeader div.profile span.commentHistory a.self {
	background: url("../image/menu_cute_comment_history.gif") no-repeat;
}

#contentHeader div.profile span.commentHistory a.friend {
	background: url("../image/menu_cute_comment_history_friend.gif") no-repeat;
}

#contentHeader div.profile span.commentHistory a.anon {
	background: url("../image/menu_cute_comment_history.gif") no-repeat;
}

#contentHeader div.profile span.commentHistory a.other {
	background: url("../image/menu_cute_comment_history_other.gif") no-repeat;
}

#contentHeader div.profile a span {
	display: none;
}

#contentHeader ul li a span {
	display: none;
}

#contentHeader ul li a:hover {
	background-position: 0 -35px;
}

#contentHeader ul li a:active {
	background-position: 0 -35px;
}

#contentBody {
	margin-top: 10px;
}

#contentFooter {
	clear: both;
}

#content div.message {
	margin: 10px 0;
	padding: 20px;
	background: #efe3ce;
	color: #9c8252;
	text-align: center;
}

/**************************************************
	Form Definitions
***************************************************/


/***************************************************
	Main Contents Definitions
***************************************************/

#content :after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

#mainContents {
	width: 860px;
	text-align: left;
	background: #fff url("../image/bg_contents.gif") left top repeat-y;
}

#mainContents ul {
    float: left;
    height: auto;
    width: 160px;
    padding :10px;
}

#mainContents ul li a {
    width: 135px;
    height: auto;
    padding:5px 5px 5px 20px;
    display: block;
    border-bottom: 1px solid #ebe1cd;
    background:#bf9d7b url("../image/arrow_category.gif") no-repeat scroll 0;
    color: #fff;
}

#mainContents ul li a:hover {
    width: 135px;
    height: auto;
    padding:5px 5px 5px 20px;
    display: block;
    background:#543020 url("../image/arrow_category.gif") no-repeat scroll 0;
    color: #fff;
}

#mainContents ul li a.active {
    background:#543020 url("../image/arrow_category.gif") no-repeat scroll 0;
    color: #fff;
}

#mainContents ul li.last {
    border: none;
}
/**************************************************
	Home Page Definitions
***************************************************/
#home {
    border: 1px solid #bf9d7c;
    width: 648px;
}

/**************************************************
	Common Page Definitions
***************************************************/
#inquiry,
#message,
#company,
#outLine,
#home,
#recruit,
#news {
    width: 650px;
    height: 100%;
    float: left;
    margin-left: 10px;
    padding: 10px;
    width: 648px
}
/**************************************************
	Inquiry Page Definitions
***************************************************/
#inquiry {
    border: 1px solid #bf9d7c;
    width: 648px;
}


#inquiry p span {
    color: #f00;
}

#inquiry img {
    margin-bottom: 10px;
}

#inquiry input {
    border: 1px solid #bf9d7c;
    padding: 5px;
    width: 350px;
    clear: both;
    display: block;
}

#inquiry select {
    border: 1px solid #bf9d7c;
    padding: 5px;
    width: 200px;
    clear: both;
    display: block;
}

#inquiry label {
    margin-top: 10px;
    display: block;
}

#inquiry textarea {
    width: 350px;
    height: 200px;
    border: 1px solid #bf9d7c;
    padding: 5px;
}

/**************************************************
	Message Page Definitions
***************************************************/
#message {
    border: 1px solid #bf9d7c;
    width: 648px;
}

#message img {
    margin-bottom: 10px;
}

#message p.name {
    width: 11em;
    display: block;
    float: right;
    margin-top: 100px;
}
/**************************************************
	Company Profile Page Definitions
***************************************************/
#company {
    border: 1px solid #bf9d7c;
    width: 648px;
}

#company #leftColumn {
    width: 314px;
    float: left;
    margin-right: 20px;
}

#company #leftColumn img,
#company #rightColumn img {
    margin-bottom: 10px;
}

#company #leftColumn dl {
    width: 314px;
    height: auto;
    background: #bf9d7b;
}

#company #leftColumn dt {
    width: 100px;
    height: auto;
    background: #bf9d7b;
    float: left;
    padding: 5px;
}

#company #leftColumn dd {
    width: 194px;
    height: auto;
    background: #ebe1cd;
    float: left;
    padding: 5px;
}

#company #leftColumn dt.director {
    height: 7em;
}

#company #leftColumn dd.director {
    padding: 5px;
}

* html #company #leftColumn dt.director {
    height: 6em;
}

*+ html #company #leftColumn dt.director {
    height: 6.5em;
}

#company #rightColumn {
    width: 314px;
    float: left;
}

#company #rightColumn p {
    width: 294px;
    background: #ebe1cd;
    height: 100%;
    padding: 10px;
}

#company #rightColumn ol {
    height: 100%;
    border: 1px dashed #543020;
    padding: 10px 30px;
    list-style: disc;
    list-style-position: outside;
}

#company #rightColumn ol li {
    margin-bottom: 10px;
}

/**************************************************
	Outline Page Definitions
***************************************************/
#outLine {
    background:transparent url("../image/bg_streetlight.gif") right bottom no-repeat;
    border: 1px solid #bf9d7c;
    width: 648px;
}

#outLine p {
    padding-left: 10px;
}

#outLine img {
    margin-bottom: 10px;
}

#outLine img.banner {
    margin: 20px 0;
    padding-left: 10px;
}

#outLine p {
    height: 100%;
}
/**************************************************
	Recruit Page Definitions
***************************************************/
#recruit {
    border: 1px solid #bf9d7c;
    width: 648px;
}

#recruit h3 {
    margin: 15px 0 10px;
}

#recruit h4 {
    margin: 15px 0 10px;
    text-decoration: underline;
    font-weight: 700;
}

#recruit h4,
#recruit h5,
#recruit h6 {
    padding-left: 15px;
    text-decoration: underline;
}

#recruit p {
    padding:0 0 10px 15px;
}

#recruit p.last {
    border-bottom: 1px dashed #bf9d7c;
}

#recruit ul {
    width: 628px;
    list-style: disc;
    list-style-position: inside; 
}

#recruit ul li {
}

#recruit ol {
    list-style: decimal;
    list-style-position: outside; 
    margin-left: 30px;
}

#recruit ol ol {
    list-style: lower-roman;
    list-style-position: outside;
}

#recruit ol li.last {
    padding-bottom: 1em;
}

#recruit img {
    margin-bottom: 10px;
}

#recruit div.recruitNav {
    width: 162px;
    height: 24px;
    display: block;
    float: left;
}

#recruit div.recruitNav a {
    width: 162px;
    height: 24px;
    display: block;
}

#recruit .genre a {
    background:transparent url("../image/icon_recruit_genre.gif") left top no-repeat;
}
#recruit .comment a {
    background:transparent url("../image/icon_recruit_message.gif") left top no-repeat;
}
#recruit .outline a {
    background:transparent url("../image/icon_recruit_outline.gif") left top no-repeat;
}
#recruit .applies a {
    background:transparent url("../image/icon_recruit_applies.gif") left top no-repeat;
}

#recruit div.recruitNav a:hover {
    background-position: 0 -24px;
}

#recruit div.recruitNav a span {
    display: none;
}

#recruit h3#genre {
    margin-top: 60px;
}

/**************************************************
	News Page Definitions
***************************************************/

#news {
    border: 1px solid #bf9d7c;
    width: 648px;
}

#news ul li {
    padding: 10px 20px;
    width: 598px;
    background:transparent url("../image/icon_news_list.gif") left center no-repeat;
}

#news ul li span {
    padding-right: 10px;
}