/*--
	site:JAPAN PHONE 2.0
	date:2010
--*/

/*-- Over All Settings --*/
* {
	margin:0;
	padding:0;
}

body {
	background-color: #fff;
	background: url(../images/body-bg.gif) repeat-x;
	text-align: center;
	font-family: "Microsoft JhengHei";
	color: #4d4d4d;
	line-height: 1.4em;
}

strong {
	color: #000;
	border-bottom: 1px solid #34c9e4;
}

img {
	border: none;
}

hr {
	display: none;
}

a {
	color: #fff;
}

.clear {
	clear: both;
}

#wrapper {
	text-align: left;
	margin: 0 auto;
	width: 710px;
}

/*-- Menu Settings --*/

#menu {
	background: url(../images/menu-bg.gif) repeat-x;
	width: 708px;
	height: 68px;
	border-top: 1px solid #d5d5d5;
	border-right: 1px solid #d5d5d5;
	border-left: 1px solid #d5d5d5;
	border-bottom: 1px solid #bababa;
}

h1#logo {
	background: url(../images/japanphone-logo.jpg) no-repeat;
	text-indent: -9999px;
	width: 239px;
	height: 42px;
}

ul#top-nav li h1#logo a {
	display: block;
	background: none;
	width: 239px;
	height: 42px;
}

ul#top-nav {
	list-style: none;
	float: left;
}

ul#top-nav li {
	float: left;
	position: relative;
	border-right: 1px solid #d5d5d5;
	display: block;
	height: 43px;
}

ul#top-nav li a {
	display: block;
	width: 75px;
	height: 43px;
	text-align: center;
	font-size: 0.8em;
	color: #000;
	text-decoration: none;
	line-height: 43px;
}

ul#top-nav li:hover a, ul#top-nav li a:hover {
	color: #fff;
	background: #d5d5d5 url(../images/menu-hover.gif) repeat-x;
}

ul#top-nav li .sub-nav {
	position: absolute;
	top: 42px;
	left: 0;
	padding: 10px 15px 15px;
	float: left;
	background: #a81f23;
	border-bottom: 4px solid #ed1c24;
	display: none;
}

ul#top-nav li .sub-nav ul {
	list-style: none;
	float: left;
	width: 150px;
}

ul#top-nav li .sub-nav ul li{
	width: 100%;
	color: #fff;
	border-right: 0;
	border-bottom: 1px dotted #d5d5d5;
	background: url(../images/arrow-right.gif) no-repeat 0 50%;
	height: 30px;
}

ul#top-nav li .sub-nav ul li a{
	float: none;
	display: block;
	text-decoration: none;
	color: #fff;
	text-align: left;
	width: 100%;
	padding: 0 0 0 10px;
	background: none;
	line-height: 30px;
}
ul#top-nav li .sub-nav ul li a:hover{
	background: none;
	color: #ffc600;
}

/*-- breadcrumbs Settings --*/
#breadcrumbs {
	clear: both;
	height: 35px;
	width: 708px;
	background: url(../images/menu-shadow.gif) no-repeat bottom;
}

#breadcrumbs ol {
	list-style: none;
	padding: 0 6px;
	height: 25px;
}

#breadcrumbs ol li {
	font-size: 0.7em;
	line-height: 25px;
	display: inline;
	padding-left: 6px;
	background: url(../images/arrow-right.gif) no-repeat 0 50%;
}

#breadcrumbs ol li a {
	color: #a81f23;
	text-decoration: none;
}

/*-- Quick Access Settings --*/

#quick-access {
	margin-top: 13px;
}
#quick-access h2{
	text-indent: -9999px;
	background: url(../images/choose-plan.gif) no-repeat;
	width: 224px;
	height: 50px;
	float: left;
}

#quick-access h3{
	text-indent: -9999px;
	background: url(../images/smartphone-title.gif) no-repeat;
	width: 224px;
	height: 50px;
	float: left;
}

#quick-access ul {
	text-indent: -9999px;
}

#quick-access li {
	float: left;
}

li.fax {
	display: block;
	background: url(../images/fax.gif) no-repeat;
	width: 142px;
	height: 50px;
}

li.tel {
	display: block;
	background: url(../images/tel.gif) no-repeat;
	width: 141px;
	height: 50px;
}

li.mail {
	display: block;
	background: url(../images/mail.gif) no-repeat;
	width: 203px;
	height: 50px;
}

li.mail a {
	display: block;
	height: 35px;
}

/*-- Feature Plan Settings --*/

#holder {
	background-color: #efefef;
	width: 700px;
	padding: 5px;
}

/*-- Feature Plan Settings --*/

#feature-plan {
	clear: both;
}

#feature-plan ul{
	list-style: none;
	text-indent: -9999px;
}

#feature-plan li {
	float: left;
	overflow: hidden;
	height: 200px;
}


/*-- smartphone --*/
li.plan-smartphone a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan_smartphone.gif) left bottom;
    margin-left: 2px;
}

li.plan-smartphone span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan_smartphone.gif) left top;
	margin-left: 2px;
}

/*-- smartphone end --*/

/*-- 2011賞楓 --*/
li.plan-autumn2011 a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan-autumn-2011.jpg) left bottom;
    margin-left: 2px;
}

li.plan-autumn2011 span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan-autumn-2011.jpg) left top;
	margin-left: 2px;
}
/*-- 2011賞楓end --*/


/*-- plan-none feature --*/
li.plan-none a{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/jp-main.jpg) left bottom;
}

li.plan-none span{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/jp-main.jpg) left top;
}
/*-- plan-none feature end --*/

/*-- tiger-year feature --*/
li.tiger a{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/tiger-year.jpg) left bottom;
}

li.tiger span{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/tiger-year.jpg) left top;
}
/*-- tiger-year feature end --*/




/*-- new year feature --*/
li.happy2010 a{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/happy2010.jpg) left bottom;
}

li.happy2010 span{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/happy2010.jpg) left top;
}
/*-- new year feature end --*/


/*-- 日本應援團 --*/
li.plan-fighting a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-fighting.jpg) left bottom;
    margin-left: 2px;
}

li.plan-fighting span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-fighting.jpg) left top;
	margin-left: 2px;
}
/*-- 日本應援團 end --*/

/*-- eva --*/
li.plan-eva a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-eva.jpg) left bottom;
    margin-left: 2px;
}

li.plan-eva span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-eva.jpg) left top;
	margin-left: 2px;
}
/*-- eva end --*/

/*-- plan free temp disable --*/
li.plan-free-rent a{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/plan-free-rent.jpg) left bottom;
}

li.plan-free-rent span{
	display: block;
	height: 200px;
	width: 200px;
	background: url(../images/plan-free-rent.jpg) left top;
}
/*-- plan free temp disable end --*/
li.plan-1plus1-sakura a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-sakura2011.gif) left bottom;
	margin-left: 2px;
}

li.plan-1plus1-sakura span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-sakura2011.gif) left top;
	margin-left: 2px;
}

li.plan-contribution a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan-contribution.gif) left bottom;
	margin-left: 2px;
}


li.plan-contribution span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan-contribution.gif) left top;
	margin-left: 2px;
}


li.plan-1plus1-half a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan-1plus1-half.gif) left bottom;
	margin-left: 2px;
}


li.plan-1plus1-half span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/Plan-1plus1-half.gif) left top;
	margin-left: 2px;
}

li.plan-1plus1 a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-1plus1.gif) left bottom;
	margin-left: 2px;
}


li.plan-1plus1 span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-1plus1.gif) left top;
	margin-left: 2px;
}

li.plan-1plus1-newyear a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-1plus1-newyear.gif) left bottom;
	margin-left: 2px;
}

li.plan-1plus1-newyear span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-1plus1-newyear.gif) left top;
	margin-left: 2px;
}


li.plan-2plus1 a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-2plus1.gif) left bottom;
	margin-left: 2px;
}

li.plan-2plus1 span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-2plus1.gif) left top;
	margin-left: 2px;
}



li.plan-business a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-business.gif) left bottom;
	margin-left: 2px;
}

li.plan-business span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-business.gif) left top;
	margin-left: 2px;
}


li.plan-free-shipping a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-free-shipping.gif) left bottom;
	margin-left: 2px;
}

li.plan-free-shipping span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-free-shipping.gif) left top;
	margin-left: 2px;
}

li.plan-357 a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-357.gif) left bottom;
	margin-left: 2px;
}

li.plan-357 span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-357.gif) left top;
	margin-left: 2px;
}

li.plan-student a{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-student.gif) left bottom;
	margin-left: 2px;
}

li.plan-student span{
	display: block;
	height: 200px;
	width: 123px;
	background: url(../images/plan-student.gif) left top;
	margin-left: 2px;
}

/*-- Main Content Settings --*/
/*-- TOTAL main width is 450px --*/
#main-content {
	background-color: #fff;
	width: 406px;
	float: left;
	margin-top: 5px;
	padding: 21px;
	border: 1px solid #dadada;
}

.best-choice {
	width: 405px;
	height: 175px;
	background: url(../images/best-choice-bg.jpg) no-repeat;
}

.best-choice h2 {
	text-indent: -9999px;
	width: 240px;
	height: 45px;
	background: url(../images/best-choice.gif) no-repeat 80px 10px;
	padding: 10px 0 0 80px;
}

.best-choice p {
	padding: 5px 50px 0 90px;
	text-align: justify;
}

.cheap {
	position: relative;
}

.cheap h3{
	width: 122px;
	height: 160px;
	text-indent: -9999px;
	background: url(../images/cheap.jpg) no-repeat;
}

.cheap h2{
	position: absolute;
	top: 0;
	left: 122px;
	width: 217px;
	height: 25px;
	text-indent: -9999px;
	background: url(../images/cheap.gif) no-repeat;
}

.cheap p {
	position: absolute;
	top: 35px;
	left: 127px;
	width: 278px;
	text-align: justify;
	
}

.quality {
	position: relative;
	margin-top: 2em;
}

.quality h3{
	width: 120px;
	height: 146px;
	text-indent: -9999px;
	background: url(../images/quality.jpg) no-repeat;
}

.quality h2{
	position: absolute;
	top: 0;
	left: 120px;
	width: 216px;
	height: 25px;
	text-indent: -9999px;
	background: url(../images/quality.gif) no-repeat;
}

.quality p {
	position: absolute;
	top: 35px;
	left: 127px;
	width: 279px;
	text-align: justify;
	
}

.convenient {
	position: relative;
	margin-top: 2em;
}

.convenient h3{
	width: 122px;
	height: 132px;
	text-indent: -9999px;
	background: url(../images/convenient.jpg) no-repeat;
}

.convenient h2{
	position: absolute;
	top: 0;
	left: 122px;
	width: 217px;
	height: 25px;
	text-indent: -9999px;
	background: url(../images/convenient.gif) no-repeat;
}

.convenient p {
	position: absolute;
	top: 35px;
	left: 127px;
	width: 278px;
	text-align: justify;
	
}

/*-- Side Content Settings --*/
/*-- TOTAL Side width 248px --*/

#side-content {
	background-color: #d1f2f8;
	width: 226px;
	float: right;
	border: 1px solid #42a4c5;
	margin-top: 5px;
	padding: 10px;
}

#download-button {
	text-indent: -9999px;
}

#download-button h2 a{
	width: 226px;
	height: 43px;
	display: block;
	background: url(../images/download-btn.gif) no-repeat;
}

#download-button h2 a:hover{
	width: 226px;
	height: 43px;
	display: block;
	background: url(../images/download-btn-hover.gif) no-repeat;
}

#download-web {
	text-indent: -9999px;
}

#download-web h2 a{
	width: 226px;
	height: 43px;
	display: block;
	background: url(../images/download-web.gif) no-repeat;
}

#download-web h2 a:hover{
	width: 226px;
	height: 43px;
	display: block;
	background: url(../images/download-web-hover.gif) no-repeat;
}


.space {
	margin-top: 1em;
}

#campaign h2{
	text-indent: -9999px;
	width: 210px;
	height: 40px;
	background: url(../images/campaign.gif) no-repeat;
	margin-bottom: 10px;
}

#campaign img, #information img {
	border: 1px solid #42a4c5;
	margin: 1px 0;
}

#campaign img:hover, #information img:hover {
	border: 1px solid #a71f23;
	margin: 1px 0;
}

#information h2{
	text-indent: -9999px;
	width: 210px;
	height: 40px;
	background: url(../images/information.gif) no-repeat;
	margin-bottom: 10px;
}

#question h2{
	text-indent: -9999px;
	width: 210px;
	height: 40px;
	background: url(../images/faq.gif) no-repeat;
	margin-bottom: 10px;
}

#question ul {
	list-style: none;
	font-size: 0.9em;
	margin-top: 10px;
	border-top: 1px dotted #a71f23;
}

#question ul li{
	background: url(../images/arrow-right-red.gif) no-repeat 0 50%;
	padding-left: 18px;
	border-bottom: 1px dotted #a71f23;
	height: 2.5em;
}

#question ul li a, #question ul li a:visited{
	color: #4d4d4d;
	text-decoration: none;
	line-height: 2.5em;
	display: block;
}

#question ul li a:hover{
	color: #ed1c24;
	text-decoration: underline;
}

/*-- Sub Content Settings --*/

#sub-content {
	clear: both;
	margin-top: 1px;
}

#process-step {
	text-indent: -9999px;
}

#process-step h2 {
	float: left;
	display: none;
}

.step1 {
	width: 151px;
	height: 218px;
	float: left;
	margin-right: 1px;
	background: url(../images/step1.gif) no-repeat;
}

.step2 {
	width: 150px;
	height: 218px;
	float: left;
	margin-right: 1px;
	background: url(../images/step2.gif) no-repeat;
}

.step3 {
	width: 151px;
	height: 218px;
	float: left;
	margin-right: 1px;
	background: url(../images/step3.gif) no-repeat;
}

#relative-info {
	float: right;
	width: 229px;
	height: 192px;
	font-size: 0.8em;
	background: url(../images/relative.gif) no-repeat;
	padding: 13px;
	color: #000;
}

#relative-info a, #relative-info a:visited {
	color: #000;
}

#relative-info a:hover{
	color: #ed1c24;
}

.bottom-bg {
	background: url(../images/body-bg-bottom.gif) repeat-x 0 bottom;
}

/*-- Footer Settings --*/

#footer {
	background: #cc0000;
	text-align: left;
	clear: both;
	padding-top: 20px;
	color: #fff;
}

#sitemap {
	width: 710px;
	margin: 20px auto 0 auto;
	font-size: 12px;
	border-bottom: 1px dotted #fff;
}

#sitemap h3 {
	display: inline;
	font-size: 12px;
}

#sitemap ul {
	list-style: none;
}

#sitemap ul li {
	display: inline;
	padding-right: 1em;
}

#sitemap ul li a, #sitemap ul li a:visited{
	text-decoration: none;
	color: #fff;
}

#sitemap ul li a:hover {
	text-decoration: underline;
	color: #ffc600;
}

#footer p {
	width: 710px;
	margin: 0 auto;
	padding: 0 10px 20px 10px;
	font-size: 0.6em;
}

#google-ad {
	margin: 0 auto;
	padding: 0;
	width: 710px;
}