@import "./reset.css";
@import "./common.css";

/*
[77% = 10px]
[85% = 11px]
[93% = 12px] (was 92%)
[100% = 13px]
[108% = 14px] (was 107%)
[116% = 15px] (was 114%)
[123.1% = 16px] (was 122%)
[131% = 17px] (was 129%)
[138.5% = 18px] (was 136%)
[146.5% = 19px] (was 144%)
[153.9% = 20px] (was 152%)
[161.6% = 21px] (was 159%)
[167% = 22px]
[174% = 23px]
[182% = 24px]
[189% = 25px]
[197% = 26px]
*/

body {
	font-size: 100%;
	text-align: center;
	margin: 0 auto;
	background: url(../image/body_bg.jpg) no-repeat top center;
	background-color: #FFFFFF;
}
.skip, hr {
	display: none;
}
.clearfix {
	overflow: hidden;
	_height: 1%;
}

#wrap {
	width: 900px;
	margin: 0 auto;
	border: 1px solid #696969;
	border-bottom: none;
	border-top: none;
	background: url(../image/bg_body.png);
}
#container {
	width: 900px;
	margin: 0 auto;
	overflow: hidden;
	_height: 1%;
}
#container div {
	text-align: left;
}

/*-------------------------------------------------------------------
#header
---------------------------------------------------------------------*/

#header {
	height: 90px;
	background: url(../image/bg_header.png) no-repeat top center;
}
#header h1 {
	width: 900px;
	height: 90px;
	margin: 0 auto;
	text-align: left;
	text-indent: -9999px;
}
#header h1 a {
	display: block;
	width: 600px;
	height: 90px;
	outline: none;
}
#header h1 span {
	display: block;
	width: 600px;
	height: 90px;
	outline: none;
}
#header p {
	text-indent: -9999px;
}

/*-------------------------------------------------------------------
#navi
---------------------------------------------------------------------*/

#navi {
	float: left;
	width: 212px;
	padding: 0 10px;
}
#navi p {
}
#navi ul,
#navi dl {
	margin: 5px 0 15px 0;
}
#navi ul li,
#navi dl dd {
	display: block;
	width: 212px;
	height: 59px;
}
#navi ul li a,
#navi dl dd a {
	display: block;
	width: 212px;
	height: 59px;
	margin: 0;
	padding: 0;
	background: no-repeat 0 0;
	text-indent: -9999em;
	outline: none;
}

#navi .nav01 a { background-image: url(../image/img_navi01.png); }
#navi .nav02 a { background-image: url(../image/img_navi02.png); }
#navi .nav03 a { background-image: url(../image/img_navi03.png); }
#navi .nav04 a { background-image: url(../image/img_navi04.png); }
#navi .nav05 a { background-image: url(../image/img_navi05.png); }
#navi .nav06 a { background-image: url(../image/img_navi06.png); }
#navi .nav07 a { background-image: url(../image/img_navi07.png); }
#navi .nav08 a { background-image: url(../image/img_navi08.png); }
#navi .nav09 a { background-image: url(../image/img_navi09.png); }
#navi .nav10 a { background-image: url(../image/img_navi10.png); }
#navi .nav11 a { background-image: url(../image/img_navi11.png); }

#navi .nav01 a:hover { background-image: url(../image/img_navi01_on.png); }
#navi .nav02 a:hover { background-image: url(../image/img_navi02_on.png); }
#navi .nav03 a:hover { background-image: url(../image/img_navi03_on.png); }
#navi .nav04 a:hover { background-image: url(../image/img_navi04_on.png); }
#navi .nav05 a:hover { background-image: url(../image/img_navi05_on.png); }
#navi .nav06 a:hover { background-image: url(../image/img_navi06_on.png); }
#navi .nav07 a:hover { background-image: url(../image/img_navi07_on.png); }
#navi .nav08 a:hover { background-image: url(../image/img_navi08_on.png); }
#navi .nav09 a:hover { background-image: url(../image/img_navi09_on.png); }
#navi .nav10 a:hover { background-image: url(../image/img_navi10_on.png); }
#navi .nav11 a:hover { background-image: url(../image/img_navi11_on.png); }


/*-------------------------------------------------------------------
#contents
---------------------------------------------------------------------*/

#contents {
	float: right;
	width: 668px;
	margin-top: -5px;
}
#contentsbody {
	font-size: 93%;
}
#contents a {
	color: #5b2588;
}
#contents a:hover {
	color:  #785fa7;
	text-decoration: none;
}
.mainimg h2 {
	display: none;
}

.breadcrm {
	width: 668px;
	margin: 0 auto !important;
	text-align: left;
	font-size: 70%;
	padding-top: 8px;
	padding-left: 232px;
	color: #666;
}
.breadcrm span {
	position: relative;
	top: -2px;
}
.breadcrm a {
	color: #785fa7;
	text-decoration: none;
}
.breadcrm a:hover {
	color: #5b2588;
	text-decoration: underline;
}
.pageTop {
	font-size: 77%;
	text-align: right;
	margin: 10px 10px 25px 10px !important;
}
.strong{
	font-size: 77%;
	text-align: right;
	margin: 0px 10px 0px 0px !important;
}
.pageTop a {
	background: url(http://www.c3360.jp/image/ico_pagetop.png) no-repeat 0 3px;
	padding-left: 16px;
	color: #785fa7;
}
.pageTop a:hover {
	text-decoration: none;
}

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

#footer {
	border-top: 7px solid #785fa7;
	background: #dcd2ef;
	clear: both;
	width: 900px;
	padding-top: 20px;
	padding-bottom: 10px;
	margin: 30px 0 0 0;
	font-size: 77%;
	overflow: hidden;
	_height: 1%;
}
/*
* html #footer {
	font-size: 59%;
}
* + html #footer {
	font-size: 59%;
}
#footer li {
	float: left;
	border-left: 1px solid #666;
	padding: 0 5px;
}
#footer .start {
	border: none;
}
#footer ul {
	clear: both;
	float: right;
	margin-left: 20px !important;
	padding: 2px 0;
}
#footer ul a {
	color: #666;
	text-decoration: none;
}
#footer ul a:hover {
	color: #00b4ff;
	text-decoration: underline;
}
* + html #footer .ie {
	width: 755px;
}
* html #footer .ie {
	width: 755px;
}*/
address {
	color: #333;
}


/*-------------------------------------------------------------------
#index
---------------------------------------------------------------------*/

#top .mainimg {
	width: 900px;
	height: 278px;
	background: url(../image/img_top.jpg) no-repeat top left;
	position: relative;
}


#top ul.gnavi {
	width: 225px;
	height: 278px;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;	
}

#top ul.gnavi li {
	height: 60px;  
    margin: 0 0 11px 0;
	padding: 0;
}

#top ul.gnavi li.last {
    margin-bottom: 0;
}


ul.gnavi li a {
	display: block;
	width: 225px;
	height: 60px;
	text-indent: -9999px;
	outline: none;
}

ul.gnavi li.g1 a { width: 225px; background-position: 0 0; }
ul.gnavi li.g2 a { width: 223px; background-position: -228px 0; }
ul.gnavi li.g3 a { width: 225px; background-position: -451px 0; }
ul.gnavi li.g4 a { width: 221px; background-position: -679px 0; }

ul.gnavi li.g1 a:hover { width: 225px; background-position: 0 -60px; }
ul.gnavi li.g2 a:hover { width: 223px; background-position: -228px -60px; }
ul.gnavi li.g3 a:hover { width: 225px; background-position: -451px -60px; }
ul.gnavi li.g4 a:hover { width: 221px; background-position: -679px -60px; }

#top ul.gnavi li.g1 a { background: url(../image/gnavi.jpg) no-repeat 0 0;}
#top ul.gnavi li.g2 a { background: url(../image/gnavi.jpg) no-repeat 0 -71px;}
#top ul.gnavi li.g3 a { background: url(../image/gnavi.jpg) no-repeat 0 -142px;}
#top ul.gnavi li.g4 a { background: url(../image/gnavi.jpg) no-repeat 0 -216px;}

#top ul.gnavi li.g1 a:hover { background-position: -225px 0;}
#top ul.gnavi li.g2 a:hover { background-position: -225px -71px;}
#top ul.gnavi li.g3 a:hover { background-position: -225px -142px;}
#top ul.gnavi li.g4 a:hover { background-position: -225px -216px;}


#top #fade {
	position: absolute;
	top: 100px;
	left: 0;
	width: 675px;
	height: 99px;
	padding: 0;
	margin:  0;
}

#top #fade img {
	width:334px;
	height: 79px;
	padding: 0;
	top: 0;
	left: 0;
}



#top #contentsbody div.catchupWrap {
	margin-top: 30px;
	width: 637px;
	padding: 0 0 0 30px;
	font-size: 85%;
}
#top #contentsbody div.catchupWrap dl {
	display: block;
	padding: 0;
	margin: 0;
	width: 277px;
	height: 120px;
	float: left;
}
#top #contentsbody div.catchupWrap dl.catchup1 { background: url(../image/bg_catchup01.png) no-repeat top left; }
#top #contentsbody div.catchupWrap dl.catchup2 { background: url(../image/bg_catchup02.png) no-repeat top left; margin-left: 30px; }

#top #contentsbody div.catchupWrap dl dt {
	display: block;
	width: 277px;
	height: 40px;
	margin: 0;
	padding: 0;
	text-indent: -9999em;
	outline: none;
}

#top #contentsbody div.catchupWrap dl dd {
	padding: 5px 5px 0 70px;
	margin: 0;
}
#top #contentsbody div.catchupWrap dl dd a {
	display: block;
	width: 70px;
	height: 17px;
	margin: 5px 0 0 130px;
	padding: 3px 0 0;
	color: #fff;
	text-align: center;
}
#top #contentsbody div.catchupWrap a:hover,
#top #contentsbody div.catchupWrap a:active {
	text-decoration: none;
}
#top #contentsbody .catchup1 {
	background: url(../image/bg_catchup01.png) no-repeat top left;
}
#top #contentsbody .catchup2 {
	margin-left: 30px;
	background: url(../image/bg_catchup02.png) no-repeat top left;
}

/*-------------------------------------------------------------------
#how
---------------------------------------------------------------------*/

#how .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/2/bg_2.jpg) no-repeat top left;
}
#how .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi2.jpg) no-repeat 0 -60px;
}
#how .gnavi li {
	float: left;
}
#how .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi2.jpg);
	background-repeat: no-repeat;
}
#how .attention {
	font-weight: bold !important;
}
#how strong {
	color: #fa1f3e;
	font-weight: bold !important;
}

/*-------------------------------------------------------------------
#ready
---------------------------------------------------------------------*/

#ready .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/3/bg_3.jpg) no-repeat top left;
}
#ready .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi2.jpg) no-repeat 0 -60px;
}
#ready .gnavi li {
	float: left;
}
#ready .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi2.jpg);
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------
#party
---------------------------------------------------------------------*/

#how_party .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/4/bg_4.jpg) no-repeat top left;
}
#how_party .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi2.jpg) no-repeat 0 -60px;
}
#how_party .gnavi li {
	float: left;
}
#how_party .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi2.jpg);
	background-repeat: no-repeat;
}
#how_party h4 {
	background: url(../image/bg_ttl2.png) no-repeat bottom left;
	padding-bottom: 10px;
	padding-left: 36px;
	margin-top: 10px !important;
	margin-bottom: 10px;
	margin-left: 17px;
	margin-right: 17px;
	font-weight: bold;
}
#how_party h4 img {
	position: relative;
	top: 2px;
}
#how_party .stepwrap {
	position: relative;
}
#how_party .stepcontents {
	border: 1px solid #c7bdd2;
	background: #fff;
	margin-left: 8px;
	width: 640px;
	position: absolute;
}
#how_party .stepcontents img {
	position: relative;
	left: -6px;
}
#how_party .desc {
	margin: 20px 17px !important;
}
#how_party .stepnavi {
	overflow: hidden;
	_height: 1%;
	padding: 5px 0;
	font-size: 86%;
}
* + html #how_party .stepR {
	position: relative;
	top: -15px;
}
#how_party .stepnavi a {
	color: #5b2588;
	text-decoration: none;
}
#how_party .stepnavi a:hover {
	text-decoration: underline;
}
#how_party .stepnavi li {
margin: 0 !important;
	padding: 0 !important;
	list-style-type: none !important;
}
#how_party .stepnavi .stepL {
	float: left;
	padding-left: 30px;
	padding-top: 10px;
	background: url(../image/4/bg_stepl.png) no-repeat top left;
}
#how_party .stepnavi .stepR {
	float: right;
	padding-right: 30px;
	padding-top: 10px;
	background: url(../image/4/bg_stepr.png) no-repeat top right;
}

/*-------------------------------------------------------------------
#party
---------------------------------------------------------------------*/

#party .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/5/bg_5.jpg) no-repeat top left;
}
#party .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi3.jpg) no-repeat 0 -60px;
}
#party .gnavi li {
	float: left;
}
#party .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi3.jpg);
	background-repeat: no-repeat;
}
#party .dllist dt {
	padding-left: 16px;
	background: url(../image/arrow.png) no-repeat center left;
}

/*-------------------------------------------------------------------
#taboo
---------------------------------------------------------------------*/

#taboo .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/6/bg_6.jpg) no-repeat top left;
}
#taboo .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi3.jpg) no-repeat 0 -60px;
}
#taboo .gnavi li {
	float: left;
}
#taboo .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi3.jpg);
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------
#conversation
---------------------------------------------------------------------*/

#conversation .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/7/bg_7.jpg) no-repeat top left;
}
#conversation .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi3.jpg) no-repeat 0 -60px;
}
#conversation .gnavi li {
	float: left;
}
#conversation .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi3.jpg);
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------
#clothing
---------------------------------------------------------------------*/

#clothing .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/8/bg_8.jpg) no-repeat top left;
}
#clothing .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi3.jpg) no-repeat 0 -60px;
}
#clothing .gnavi li {
	float: left;
}
#clothing .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi3.jpg);
	background-repeat: no-repeat;
}
#clothing .tablewrap {
	margin: 20px 80px;
}
#clothing th {
	width: 10em;
	border: 1px solid #c7bdd2;
	text-align: center;
	font-weight: bold;
}
#clothing .men {
	background: #dcd2ef;
}
#clothing .women {
	background: #fdb9c3;
}
#clothing td {
	border: 1px solid #c7bdd2;
	background: #fff;
}

/*-------------------------------------------------------------------
#after
---------------------------------------------------------------------*/

#after .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/9/bg_9.jpg) no-repeat top left;
}

#after .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi3.jpg) no-repeat 0 -60px;
}

#after .gnavi li {
	float: left;
}

#after .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi3.jpg);
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------
#current
---------------------------------------------------------------------*/

#current .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/10/bg_10.jpg) no-repeat top left;
}
#current .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi4.jpg) no-repeat 0 -60px;
}
#current .gnavi li {
	float: left;
}
#current .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi4.jpg);
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------
#schedule
---------------------------------------------------------------------*/

#schedule .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/11/bg_11.jpg) no-repeat -1px 0;
}
#schedule .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi4.jpg) no-repeat 0 -60px;
}
#schedule .gnavi li {
	float: left;
}
#schedule .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi4.jpg);
	background-repeat: no-repeat;
}
#schedule .schedule {
	margin: 30px 65px !important;
}
#schedule .schedule li {
	float: left;
	width: 167px;
	height: 62px;
	margin: 5px 10px 5px 0 !important;
	list-style-type: none !important;
}

#schedule .schedule li.li {
	float: left;
	width: 167px;
	height: 62px;
	margin: 5px 0 5px 0 !important;
	list-style-type: none !important;
}

/*-------------------------------------------------------------------
#customer
---------------------------------------------------------------------*/

#customer .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/12/bg_12.jpg) no-repeat -1px 0;
}
#customer .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi4.jpg) no-repeat 0 -60px;
}
#customer .gnavi li {
	float: left;
}
#customer .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi4.jpg);
	background-repeat: no-repeat;
}
#customer .customer {
	border: 1px solid #c7bdd2;
	background: #fff;
	margin: 10px 9px 20px 9px !important;
	width: 635px;
	padding-bottom: 24px;
}
#customer .customer p {
	margin-left: 20px !important;
}
#customer .imgttl {
	background: none;
	margin: 20px 0 5px 0 !important;
	padding: 0 !important;
	text-align: center;
}
#customer .fltR {
	margin-top: 7px !important;
	margin-bottom: 7px !important;
	margin-right: 24px !important;
}

/*-------------------------------------------------------------------
#company
---------------------------------------------------------------------*/

#company .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/13/bg_13.jpg) no-repeat -1px 0;
}
#company .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi4.jpg) no-repeat 0 -60px;
}
#company .gnavi li {
	float: left;
}
#company .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi4.jpg);
	background-repeat: no-repeat;
}
#company .company {
	margin: 25px 12px;
	width: 635px;
}

#company th {
	width: 8em;
	vertical-align: top;
	border: 1px solid #aaa;
	padding: 5px;
	font-weight: bold;
	color: #370c68;
	background: #d3c4f1;
}
#company td {
	border: 1px solid #aaa;
	padding: 5px;
	background: #fff;
}
#company td p {
	margin: 10px 5px !important;
	line-height: 1.2 !important;
}
#company .rinen {
	padding-left: 2em;
}
#company .rinen p {
	text-indent: -1.6em;
}

/*-------------------------------------------------------------------
#qa
---------------------------------------------------------------------*/

#qa .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/14/bg_14.jpg) no-repeat -1px 0;
}
#qa .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi4.jpg) no-repeat 0 -60px;
}

#qa .gnavi li {
	float: left;
}
#qa .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi4.jpg);
	background-repeat: no-repeat;
}
#qa .qanda {
	margin: 10px 12px !important;
}
#qa .qanda dt {
	background: url(../image/14/bg_q.png) no-repeat bottom left;
	padding: 8px 0 8px 36px;
}
#qa .qanda dd {
	margin: 0 0 36px 0 !important;
	padding-top: 10px;
	padding-left: 44px;
	background: url(../image/14/bg_a.png) no-repeat 4px 12px;
}
#qa .qanda dd p {
	margin: 0 0 1em 0 !important;
}

/*-------------------------------------------------------------------
#contact
---------------------------------------------------------------------*/

#contact .mainimg {
	width: 900px;
	height: 100px;
	background: url(../image/15/bg_15.jpg) no-repeat -1px 0;
}
#contact .gnavi {
	width: 900px;
	height: 60px;
	background: url(../image/bg_gnavi4.jpg) no-repeat 0 -60px;
}
#contact .gnavi li {
	float: left;
}
#contact .gnavi a {
	display: block;
	height: 60px;
	text-indent: -9999px;
	background-image: url(../image/bg_gnavi4.jpg);
	background-repeat: no-repeat;
}
#contact .contact {
	margin: 20px 32px 20px 22px;
	font-size: 86%;
}
#contact table {
	width: 100%;	
}
#contact th {
	width: 14em;
	vertical-align: middle;
	border: 1px solid #aaa;
	padding: 5px;
	font-weight: bold;
	color: #370c68;
	background: #d3c4f1;
}
#contact td {
	border: 1px solid #aaa;
	padding: 5px;
	background: #fff;
}
#contact td p {
	margin: 5px 0 !important;
	
}
#contact .name input {
	width: 8em;
}
#contact .birth input {
	width: 5em;
}
#contact .addnum input {
	width: 4em;
}
#contact .address input {
	width: 24em;
}
#contact .mail input {
	width: 15em;
}
#contact .tel input {
	width: 4em;
}
#contact textarea {
	width: 95%;
	height: 10em;
}
#contact table em {
	color: #fa3956;
}