@charset "utf-8";

/* ------------------------- top.css

TOP page
	
 ------------------------- */


/* ============================== main_col */
#top #main-col {
	position: relative;
	width: 870px;
	margin: 20px 50px 0;
	text-align: left;
}

#top #main-col p.btn-login,
#top #main-col p.btn-gopouch {
	position: absolute;
	top: 197px;
	left: 591px;
}

#top #main-col p.btn-login a,
#top #main-col p.btn-gopouch a {
	display: block;
	width: 201px;
	height: 33px;
}

#top #main-col .multicol {
	width: 870px;
	padding: 20px 0 0;
}

#top #main-col #info-box {
	padding: 15px 20px 20px;
}

#top #main-col #info-box ul {
	margin-top: 10px;
}

#top #main-col #info-box ul li a {
	padding-left: 15px;
  background: url(../img/arrow_bullet.gif) no-repeat 2px 0.3em;
}

#top #main-col #info-box ul li a {
  text-decoration: none;
  color: #0066cc;
}

/* main-left
-------------------------------- */
#top #main-col .leftcol {
	width: 511px;
	background: url(../img/top_bg_about_middle.gif) repeat-y 0 0;	
}

#top #main-col .leftcol #about-wrap {
	padding: 15px;
	background: url(../img/top_bg_about_bottom.gif) no-repeat 0 100%;	
}

#top #main-col .leftcol #about-wrap p {
	margin: 0;
	padding: 0 0 15px;
}

#top #main-col .leftcol #about-wrap .rightcol {
	width: 288px;
	text-align: right;
}

#top #main-col .leftcol #about-wrap p.btn-howto {
	margin: 0;
	padding: 0;
}

#top #main-col .leftcol #about-wrap p.btn-howto a {
	display: block;
	width: 161px;
	height: 17px;
}

/* main-right
-------------------------------- */
#top #main-col .rightcol {
	width: 349px;
}

#top #main-col #navi-box {
	margin: 10px 0 0;
}

#top #main-col #navi-box p.btn-howto-large,
#top #main-col #navi-box p.btn-guide-large {
	margin: 10px 0 0;
	padding: 0;
}

#top #main-col #navi-box p.btn-howto-large a,
#top #main-col #navi-box p.btn-guide-large a {
	display: block;
	width: 349px;
	height: 52px;
}
#top #main-col #navi-box2 p.btn-coffret-large {
	margin: 0px 0 10px;
	padding: 0;
}
#top #main-col #navi-box2 p.btn-coffret-large a {
	display: block;
	width: 349px;
	height: 131px;
}
#top #main-col #navi-box3 p.btn-campaign-large {
	margin: 0px 0 10px;
	padding: 0;
}
#top #main-col #navi-box3 p.btn-campaign-large a {
	display: block;
	width: 349px;
	height: 130px;
}
#top #main-col #navi-box3 p.btn-campaign-large-notice {
	margin: 0px 0 10px;
	padding: 0;
	display: block;
	width: 349px;
	height: 130px;
}
#top #main-col #recommend-box {
	margin: 20px 0 0;
}
#top #main-col #recommend-box .section {
	margin: 20px 0 0 10px;
	padding: 0 0 20px;
	background: url(../img/dot_01_top.gif) repeat-x 0 100%;	
}

#top #main-col #recommend-box .section .multicol {
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
}

#top #main-col #recommend-box .section .leftcol {
	width: 30px;
	margin: 0;
	padding: 0;
}

#top #main-col #recommend-box .section .rightcol {
	width: 170px;
	margin: 5px 0 0;
}

#top #main-col #recommend-box .section p.btn-viewpouch {
	float: right;
	width: 129px;
	margin: 7px 0 0;
}

#top #main-col #recommend-box .section p.btn-viewpouch a {
	display: block;
	width: 96px;
	height: 13px;
}

#top #main-col #recommend-box .section p.txt {
	margin: 5px 0 0;
}



/* マウスのオン、オフの設定
-------------------------------- */
/* It */
#top .btn-howto a { background: url("../img/btn_howto.gif") no-repeat 0 0;}
#top .btn-viewpouch a { background: url("../img/btn_viewpouch.gif") no-repeat 0 0;}
#top .btn-login a { background: url("../img/btn_login_top.gif") no-repeat 0 0;}
#top .btn-gopouch a { background: url("../img/btn_gopouch_top.gif") no-repeat 0 0;}
#top .btn-howto-large a { background: url("../img/btn_howto_large.gif") no-repeat 0 0;}
#top .btn-guide-large a { background: url("../img/btn_guide_large.gif") no-repeat 0 0;}
#top .btn-coffret-large a { background: url("../img/btn_coffret_large.jpg") no-repeat 0 0;}
#top .btn-campaign-large a { background: url("../img/btn_campaign_large.jpg") no-repeat 0 0;}
#top .btn-campaign-large-notice { background: url("../img/btn_campaign_large_notice.jpg") no-repeat 0 0;}

/* I */
#top .btn-howto a:hover { background-position: 0 -17px;}
#top .btn-viewpouch a:hover { background-position: 0 -13px;}
#top .btn-login a:hover { background-position: 0 -33px;}
#top .btn-gopouch a:hover { background-position: 0 -33px;}
#top .btn-howto-large a:hover { background-position: 0 -52px;}
#top .btn-guide-large a:hover { background-position: 0 -52px;}
#top .btn-coffret-large a:hover { background-position: 0 -131px;}
#top .btn-campaign-large a:hover { background-position: 0 -130px;}

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

LOGIN page
	
 ------------------------- */

/* ============================== header */
#login #header,
#campaign #header {
	width: 970px;
	height: 35px;
	padding: 0;
	background-color: #000000;
}

#login #header p,
#campaign #header p {
	margin: 0;
	padding: 0;
}


/* ============================== main_col */
#login #main-col {
	width: 870px;
	margin: 30px 50px 0;
	text-align: left;
	color: #666666;
}

#login #main-col p {
	margin: 20px 0 0 10px;
	color: #666666;
}

#login #main-col .red {
	color: #ff6699;
}

#login #main-col .gray {
	color: #666666;
}

#login #main-col div#form-wrap {
	width: 610px;
	margin: 20px 0 0;
	padding: 15px 0 0;
	background: url(../img/dot_01.gif) no-repeat 0 0;	
}

#login #main-col table {
	width: 610px;
	margin: 0 10px;
	border-collapse: collapse;
}

#login #main-col table th {
	width: 35%;
	padding: 5px 5px 5px 0 ;
	border-collapse: collapse;
	color: #000000;
}

#login #main-col table th span.indent {
	display: block;
	margin: 0 0 0 1em;
	text-indent: -1em;
}

#login #main-col table td {
	width: 65%;
	padding: 5px;
	border-collapse: collapse;
}

#login #main-col table.icon-table {
	width: auto;
}

#login #main-col table.icon-table td {
	width: auto;
	padding: 0 10px 5px 0;
}

#login #main-col table td select {
	width: 130px;
}

#login #main-col table td.comment select {
	width: 300px;
}

#login #main-col table td textarea {
	width: 95%;
}

#login #main-col div#btn-box-left,
#login #main-col div#btn-box-right {
	width: 610px;
	margin: 20px 0 0;
	padding: 10px 0 30px;
	background: url(../img/dot_01.gif) no-repeat 0 0;
	text-align: center;
}

#login #main-col div.multicol {
	width: 306px;
	margin: 0 auto;
}

#login #main-col div.multicol-left {
	width: 113px;
	margin: 0 auto;
}

#login #main-col div#btn-box p.leftcol,
#login #main-col div#btn-box-left p.leftcol {
	width: 113px;
}

#login #main-col div#btn-box p.leftcol a,
#login #main-col div#btn-box-left p.leftcol a {
	display: block;
	width: 113px;
	height: 19px;
}

#login #main-col div#btn-box p.rightcol,
#login #main-col div#btn-box-right p.rightcol {
	width: 163px;
}

#login #main-col div#btn-box p.rightcol a,
#login #main-col div#btn-box-right p.rightcol a {
	display: block;
	width: 163px;
	height: 19px;
}

#login #main-col div#login-attention {
	width: 610px;
	margin: 20px 0 0;
	padding: 10px;
	text-align: left;
	background:url(../img/bg_attention.gif) repeat 0 0;
	border:#333 1px solid;
	color:#000;
	}


/* マウスのオン、オフの設定
-------------------------------- */
/* オフ */
#login .btn-conf a { background: url("../img/btn_conf.gif") no-repeat 0 0;}
#login .btn-back a { background: url("../img/btn_back.gif") no-repeat 0 0;}
#login .btn-registration a { background: url("../img/btn_registration.gif") no-repeat 0 0;}
#login .btn-close2 a { background: url("../img/btn_close2.gif") no-repeat 0 0;}
#login .btn-login a { background: url("../img/btn_login.gif") no-repeat 0 0;}
#login .btn-web a { 
	background: url("../img/btn_web.gif") no-repeat 0 0;
	display:block; width:303px; height:19px;
}
#login .btn-gopouch a { 
	background: url("../img/btn_gopouch.gif") no-repeat 0 0;
	display:block; width:113px; height:19px;
}

/* オン */
#login .btn-conf a:hover { background-position: 0 -19px;}
#login .btn-back a:hover { background-position: 0 -19px;}
#login .btn-registration a:hover { background-position: 0 -19px;}
#login .btn-close2 a:hover { background-position: 0 -19px;}
#login .btn-login a:hover { background-position: 0 -19px;}
#login .btn-web a:hover { background-position: 0 -19px;}
#login .btn-gopouch a:hover { background-position: 0 -19px;}


ul#guideline {
	margin: 15px 30px 0;
	padding:0;
}

#login #main-col p.btn-gotop {
	margin: 30px 0 0 340px;
}

#login #main-col p.btn-gotop a {
	display: block;
	width: 193px;
	height: 13px;
}

#login #main-col p.btn-gotop-login {
	margin: 10px 0 0 215px;
}

#login #main-col p.btn-gotop-login a {
	display: block;
	width: 193px;
	height: 13px;
}

#login .btn-gotop a,
#login .btn-gotop-login a { background: url("../img/btn_gotop.gif") no-repeat 0 0;}
#login .btn-gotop a:hover,
#login .btn-gotop-login a:hover { background-position: 0 -13px;}


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

CAMPAIGN page
	
 ------------------------- */

/* ============================== main_col */
#campaign #main-col {
	width: 870px;
	margin: 30px 50px 0;
	text-align: left;
	background: url(../img/cam_bg_main.gif) no-repeat 0 0;	
}

#campaign #main-col h1 {
	padding: 27px 0 0 40px;
}

#campaign #main-col h3 {
	margin: 15px 0 0;
}

#campaign #main-col p.lead {
	margin: 5px 0 0 40px;
}

/* アイテム一覧
-------------------------------- */
#campaign #main-col #item-box {
	width: 851px;
	margin: 20px 0 0 20px;
	background: url(../img/cam_bg_middle.gif) repeat-y 0 0;	
}

#campaign #main-col #item-box #wrap {
	padding: 15px 25px 35px;
	background: url(../img/cam_bg_bottom.gif) no-repeat 0 100%;
}

/* 20090515 edit
-------------------------------- */
.end_info{margin: 20px 0 0 40px;}
.end_info span{color: #ff3399; font-weight: bold;}

/* 応募方法
-------------------------------- */
#campaign #main-col #apply-box .multicol {
	width: 830px;
	margin: 10px 20px 0;
}

#campaign #main-col #apply-box .multicol .leftcol,
#campaign #main-col #apply-box .multicol .rightcol {
	width: 405px;
}
	
#campaign #main-col #apply-box p,
#campaign #main-col #apply-box dd {
	margin: 0 0 20px;
}

#campaign #main-col #apply-box dt {
	color:#000000;
}

#campaign #main-col #apply-box p.btn-web {
	margin: 0 0 10px;
}

#campaign #main-col #apply-box p.btn-web a {
	display: block;
	width: 303px;
	height: 19px;
}

#campaign #main-col #apply-box p.btn-account a {
	display: block;
	width: 303px;
	height: 19px;
}

#campaign #main-col #apply-box #login-box {
	height: 64px;
	background: url(../img/cam_bg_login.gif) no-repeat 0 0;
	text-align: center;
}

#campaign #main-col #apply-box #login-box .multicol {
	width: 554px;
	margin: 0 auto;
	padding: 25px 0 0;
}

#campaign #main-col #apply-box #login-box .leftcol {
	width: 191px;
	margin: 0;
	font-size: 0.1;
}

#campaign #main-col #apply-box #login-box .rightcol {
	width: 351px;
	margin: -3px 0 0;
}

#campaign #main-col #apply-box #login-box .btn-login a {
	display: block;
	width: 351px;
	height: 21px;
}

/* 個人情報保護ポリシー
-------------------------------- */
#campaign #main-col #privacy-box {
	width: 870px;
	padding: 15px 0 0;
}

#campaign #main-col #privacy-box p {
	margin: 10px 20px 0;
}

#campaign #main-col #privacy-box dl {
	margin: 20px 20px 0;
}

#campaign #main-col #privacy-box dd {
	margin: 0 0 0 1em;
	text-indent: -1em;
}

#campaign #main-col p.btn-gotop {
	margin: 20px 0 0 677px;
}

#campaign #main-col p.btn-gotop a {
	display: block;
	width: 193px;
	height: 13px;
}

/* マウスのオン、オフの設定
-------------------------------- */
/* It */
#campaign .btn-howto a { background: url("../img/btn_howto.gif") no-repeat 0 0;}
#campaign .btn-viewpouch a { background: url("../img/btn_viewpouch.gif") no-repeat 0 0;}
#campaign .btn-web a { background: url("../img/btn_web.gif") no-repeat 0 0;}
#campaign .btn-account a { background: url("../img/btn_account.gif") no-repeat 0 0;}
#campaign .btn-login a { background: url("../img/btn_login2.gif") no-repeat 0 0;}
#campaign .btn-gotop a { background: url("../img/btn_gotop.gif") no-repeat 0 0;}

/* I */
#campaign .btn-howto a:hover { background-position: 0 -17px;}
#campaign .btn-viewpouch a:hover { background-position: 0 -13px;}
#campaign .btn-web a:hover { background-position: 0 -19px;}
#campaign .btn-account a:hover { background-position: 0 -19px;}
#campaign .btn-login a:hover { background-position: 0 -21px;}
#campaign .btn-gotop a:hover { background-position: 0 -13px;}