/* QuuuPON! layout css */


/*======================================================================*
 *  [ header ]
 *======================================================================*/

#header {
	width: 100%;
	min-width: 1000px;
	background: url(../img/header-bg.gif) left bottom repeat-x #5c4735;
}

#header .inner {
	width: 950px;
	margin: 0 auto;
	padding: 0 25px;
	background: url(../img/header-bg_c.gif) left bottom no-repeat;
}

/*======================================================================*
 *  [ page-title ]
 *======================================================================*/

h1.page-title {
	margin: 0 0 10px 0;
	padding: 5px 0 10px 17px;
	background: url(../img/page-title_bg.gif) left bottom no-repeat;
	color: #904300;
	font-size: 139%;
}

.asset-content h2, .asset-more h2 {
	margin: 8px 0;
	padding: 7px 10px ;
/*	background: url(../img/h2_bg.gif) bottom repeat-x; */
/*	border:1px solid #904300; */
	border-bottom:1px dotted #F0ECE4;
	background-color:#FDFAEC;
	color: #904300;
	font-size: 115%;
}

.asset-content h3, .asset-more h3 {
	padding-left:20px;
	background: url(../img/icon-index.gif) left no-repeat;
}

.asset-content span,.asset-more span {
	color:#9F6F44;
}


/*.asset-content li,.asset-more li {
	padding-left:15px;
	background: url(../img/icon-list.gif) left no-repeat;
	list-style-type:none;
}*/

/*======================================================================*
 *  [ header description ]
 *======================================================================*/

#header .description {
	width: 950px;
	margin: 0;
	padding: 2px 0;
	color: #fdfaec;
	font-size: 77%;
	font-weight: normal;
}


/*======================================================================*
 *  [ header logo ]
 *======================================================================*/

#header .logo {
	width: 355px;
	height: 57px;
	margin: 0;
	padding: 19px 0 20px 0;
	float: left;
}

#header .logo a {
	/*\*/
	overflow: hidden;
	/**/
	width: 355px;
	height: 57px;
	background: url(../img/header-logo.gif) left top no-repeat;
	text-indent: -9999px;
	display: block;
}


/*======================================================================*
 *  [ header gnavi ]
 *======================================================================*/

#header #gnavi {
	width: 585px;
	height: 57px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: right;
}

#header #gnavi li {
	float: left;
}

#header #gnavi li a {
	/*\*/
	overflow: hidden;
	/**/
	width: 146px;
	height: 57px;
	background: url(../img/header-gnavi.gif) no-repeat;
	text-indent: -9999px;
	display: block;
}

#header #gnavi li.guide a {
	width: 147px;
	background-position: 0px 0px;
}
#header #gnavi li.guide a:hover,
#header #gnavi li.guide a.active {
	background-position: 0px -57px;
}

#header #gnavi li.howto a {
	background-position: -147px 0px;
}
#header #gnavi li.howto a:hover,
#header #gnavi li.howto a.active {
	background-position: -147px -57px;
}

#header #gnavi li.faq a {
	background-position: -293px 0px;
}
#header #gnavi li.faq a:hover,
#header #gnavi li.faq a.active {
	background-position: -293px -57px;
}

#header #gnavi li.part a {
	background-position: -439px 0px;
}
#header #gnavi li.part a:hover,
#header #gnavi li.part a.active {
	background-position: -439px -57px;
}


/*======================================================================*
 *  [ topicpath ]
 *======================================================================*/

#topicpath {
	width: 100%;
	min-width: 1000px;
	background: #fff;
	border-bottom: 1px solid #edece7;
	color: #0997df;
	font-size: 85%;
}

#topicpath .inner {
	width: 950px;
	margin: 0 auto;
	padding: 7px 25px 6px 25px;
}

#topicpath .inner a {
	color: #0997df;
}

#topicpath .inner a, #topicpath .inner a:link, #topicpath .inner a:visited {
	text-decoration: none;
}

#topicpath .inner a:hover, #topicpath .inner a:active {
	text-decoration: underline;
}


/*======================================================================*
 *  [ container ]
 *======================================================================*/

#container {
	width: 100%;
	min-width: 1000px;
	background: #fff;
}

#container .inner {
	width: 950px;
	padding: 20px 25px 30px 25px;
	margin: 0 auto;
}


/*======================================================================*
 *  [ container search-box ]
 *======================================================================*/

#container #search-box {
	width: 690px;
	height: 25px;
	margin-bottom: 20px;
	padding: 15px 28px 12px 15px;
	background: #fdfaec;
	border: 1px solid #f0ece4;
}

#container #search-box h2,
#container #search-box p {
	width: 127px;
	height: 25px;
	margin: 0;
	background: url(../img/search-title.gif) left 3px no-repeat;
	text-indent: -9999px;
	float: left;
}

#container #search-box dl {
	width: 470px;
	height: 25px;
	margin: 0;
	float: right;
}

#container #search-box dt {
	width: 96px;
	height: 25px;
	background: url(../img/search-text.gif) left 5px no-repeat;
	text-indent: -9999px;
	float: left;
}

#container #search-box input {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
}

#container #search-box dd.txt {
	width: 248px;
	margin: 0;
	padding: 2px 2px 0 12px;
	float: left;
}

#container #search-box dd.txt input {
	width: 248px;
	padding: 2px 0;
	border-top: 1px solid #7c7c7c;
	border-right: 1px solid #c3c3c3;
	border-bottom: 1px solid #c3c3c3;
	border-left: 1px solid #7c7c7c;
}

#container #search-box dd.btn {
	width: 105px;
	height: 25px;
	margin: 0;
	padding: 0;
	float: right;
}

#container #search-box dd.btn input {
	width: 105px;
	height: 25px;
	background: url(../img/search-btn.gif) left top;
	border: none;
	cursor: pointer;
	overflow: hidden;
	text-indent: -9999px;
}

#container #search-box dd.hidden {
	display: none;
}


/*======================================================================*
 *  [ container left-column ]
 *======================================================================*/

#container #left-column {
	width: 735px;
	float: left;
}


/*======================================================================*
 *  [ page-title ]
 *======================================================================*/

h2.page-title {
	margin: 0;
	padding: 5px 0 10px 17px;
	background: url(../img/page-title_bg.gif) left bottom no-repeat;
	color: #904300;
	font-size: 139%;
}


/*======================================================================*
 *  [ container right-column ]
 *======================================================================*/

#container #right-column {
	width: 200px;
	float: right;
}


/*======================================================================*
 *  [ container right-column q_get ]
 *======================================================================*/

#container #right-column #q_get {
	margin-bottom: 15px;
	padding-top: 9px;
	background: #fdfaec;
	border: 1px solid #f0ece4;
	color: #5c4735;
	text-align: center;
}

#container #right-column #q_get h2 {
	width: 180px;
	height: 25px;
	margin: 0 auto;
	padding-bottom: 7px;
	background: url(../img/q_get-title.gif) left top no-repeat;
	text-indent: -9999px;
}

#container #right-column #q_get .qr-code {
	font-size: 85%;
}

#container #right-column #q_get .qr-code p {
	margin: 0;
	padding: 10px 0;
}

#container #right-column #q_get .entrys {
	margin: 0;
	padding: 7px 0;
	background: #f7f3df;
	border-top: 1px solid #f0ece4;
}


/*======================================================================*
 *  [ container right-column page-box ]
 *======================================================================*/

#container #right-column #page-box {
	margin-bottom: 15px;
	padding: 6px 9px;
	background: #fdfaec;
	border: 1px solid #f0ece4;
}

#container #right-column #page-box ul {
	margin: 0;
	padding: 0 0 15px 0;
	list-style-type: none;
}

#container #right-column #page-box li {
	width: 180px;
	height: 26px;
	padding-bottom: 5px;
}

#container #right-column #page-box li a {
	/*\*/
	overflow: hidden;
	/**/
	width: 180px;
	height: 26px;
	text-indent: -9999px;
	display: block;
}

#container #right-column #page-box li.btn-print a {
	background: url(../../shop/shared/img/btn-print.gif) left top no-repeat;
}

#container #right-column #page-box li.btn-pc_m a {
	background: url(../../shop/shared/img/btn-pc_m.gif) left top no-repeat;
}

#container #right-column #page-box .qr {
	text-align: center;
}

#container #right-column #page-box .mobile {
	margin: 0;
	padding-top: 10px;
	font-size: 85%;
	text-align: center;
}

#container #right-column #page-box .mobile img {
	padding-right: 5px;
	vertical-align: middle;
}


/*======================================================================*
 *  [ right-column new-box ]
 *======================================================================*/

#container #right-column .new-box {
	margin-bottom: 15px;
	background: #fdfaec;
	border: 1px solid #f0ece4;
	line-height: 120%;
}

#container #right-column .new-box h3 {
	margin: 0;
	padding: 5px 10px;
	border-bottom: 1px solid #fff;
	color: #0095da;
}

#container #right-column .new-box dl {
	margin: 0;
	padding: 0 8px;
	border-top: 1px solid #f0ece4;
	font-size: 85%;
}

#container #right-column .new-box dt {
	padding-top: 5px;
	color: #894f18;
}

#container #right-column .new-box dd {
	margin: 0;
	padding: 0 0 5px 10px;
	border-bottom: 1px dotted #b9afa0;
}

#container #right-column .new-box dd a, 
#container #right-column .new-box dd a:link, #container #right-column .new-box dd a:visited {
	text-decoration: none;
}

#container #right-column .new-box dd a:hover, #container #right-column .new-box dd a:active {
	text-decoration: underline;
}


/*======================================================================*
 *  [ container right-column list-box ]
 *======================================================================*/

#container #right-column .list-box {
	margin-bottom: 15px;
	background: #fdfaec;
	border: 1px solid #f0ece4;
}

#container #right-column .list-box h3 {
	margin: 0;
	padding: 5px 10px;
	border-bottom: 1px solid #fff;
	color: #0095da;
}

#container #right-column .list-box ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#container #right-column .list-box li {
	margin: 0 !important;
	padding: 5px 7px;
	border-top: 1px solid #f0ece4;
	border-bottom: 1px solid #fff;
	float: left;
}

#container #right-column .list-box p {
	width: 123px;
	margin: 0;
	font-size: 85%;
	line-height: 120%;
	float: right;
}

#container #right-column .list-box p strong {
	color: #894f18;
}

#container #right-column .list-box div {
	width: 50px;
	padding-right: 5px;
	float: left;
}

#container #right-column .list-box div img {
	width: 50px;
}


/*======================================================================*
 *  [ container right-column bunner-box ]
 *======================================================================*/

#container #right-column .bunner-box {
	margin: 0;
	padding: 0 0 15px 0;
	list-style-type: none;
	clear: both;
}

#container #right-column .bunner-box li {
	padding-bottom: 5px;
}

#container #right-column .bunner-box li img {
    vertical-align: bottom;
}


/*======================================================================*
 *  [ container right-column twitter ]
 *======================================================================*/

#container #right-column #twitter {
	width: 200px;
	margin: 0;
	padding-top: 15px;
	background: url(../img/twitter-bg.gif) left top no-repeat #eaf6fe;
}

#container #right-column #twitter dt {
	padding: 0 15px 10px 15px;
	color: #00aeff;
	line-height: 100%;
}

#container #right-column #twitter dt span {
	font-size: 85%;
}

#container #right-column #twitter dt strong {
	font-size: 124%;
	display: block;
}

#container #right-column #twitter dt a {
	color: #00aeff;
	text-decoration: none;
}

#container #right-column #twitter dt a:hover {
	text-decoration: underline;
}

#container #right-column #twitter dd {
	margin: 0;
}

#container #right-column #twitter dd.tweet {
	width: 200px;
	height: 12em;
	font-size: 85%;
	line-height: 120%;
	position: relative;
}

#container #right-column #twitter dd.tweet div {
	width: 170px;
	padding: 0 15px 10px 15px;
	overflow: hidden;
}

#container #right-column #twitter dd.tweet span {
	color: #894f18;
}

#container #right-column #twitter dd.tweet a {
	color: #00aeff;
}

#container #right-column #twitter dd.tw {
	width: 65px;
	padding-left: 15px;
	float: left;
}

#container #right-column #twitter dd.fm {
	width: 95px;
	padding-right: 15px;
	font-size: 85%;
	text-align: right;
	float: right;
}

#container #right-column #twitter dd.fm a {
	color: #00aeff;
	text-decoration: none;
}

#container #right-column #twitter dd.fm a:hover {
	text-decoration: underline;
}

#container #right-column #twitter dd.quuu {
	width: 200px;
	height: 55px;
	background: url(../img/twitter-quu01.gif) left top no-repeat;
	position: relative;
	clear: both;
}


/*======================================================================*
 *  [ container right-column special-box ]
 *======================================================================*/

#container #right-column .special-box {
	margin-bottom: 15px;
	padding: 1px;
	border: 1px solid #cdcdcd;
}

#container #right-column .special-box h3 {
	margin: 0;
}

#container #right-column .special-box p {
	margin: 0;
	padding: 9px;
	color: #894f18;
}


/*======================================================================*
 *  [ footer ]
 *======================================================================*/

#footer {
	width: 100%;
	min-width: 1000px;
	background: url(../img/footer-bg.gif) left top repeat-x;
}

#footer .inner {
	width: 950px;
	margin: 0 auto;
	padding: 0 25px 30px 25px;
	background: url(../img/footer-bg_p.gif) 25px top no-repeat;
}


/*======================================================================*
 *  [ footer pagetop ]
 *======================================================================*/

#footer .pagetop {
	height: 20px;
	margin: 0;
	padding: 67px 0 0 0;
}

#footer .pagetop a {
	/*\*/
	overflow: hidden;
	/**/
	width: 95px;
	height: 16px;
	background: url(../img/footer-pagetop.gif) left center no-repeat;
	text-indent: -9999px;
	display: block;
	float: right;
}


/*======================================================================*
 *  [ footer fnavi ]
 *======================================================================*/

#footer #fnavi {
	width: 635px;
	margin: 0;
	padding: 15px 0 0 0;
	color: #fff;
	list-style-type: none;
	float: left;
}

#footer #fnavi a {
	color: #fff;
}

#footer #fnavi a, #footer #fnavi a:link, #footer #fnavi a:visited {
	text-decoration: none;
}

#footer #fnavi a:hover, #footer #fnavi a:active {
	text-decoration: underline;
}

#footer #fnavi li {
	display: inline;
}


/*======================================================================*
 *  [ footer address ]
 *======================================================================*/

#footer address {
	width: 291px;
	height: 5px;
	padding-top: 20px;
	background: url(../img/footer-copyright.gif) left 20px no-repeat;
	text-indent: -9999px;
	display: block;
	float: right;
}


/*======================================================================*
 *  [ clearfix ]
 *======================================================================*/

#header:after, #header .inner:after, 
#container:after, #container .inner:after, 
#footer:after, #footer .inner:after, 
#container #search-box:after, #container #search-box dl:after,
#container #right-column .list-box ul:after,
#container #right-column .list-box ul li:after, .category-list ul:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
#header, #header .inner, 
#container, #container .inner, 
#footer, #footer .inner, 
#container #search-box, #container #search-box dl,
#container #right-column .list-box ul, 
#container #right-column .list-box ul li, .category-list ul { display: inline-block; } /* IE7,MacIE */
#header, #header .inner, 
#container, #container .inner, 
#footer, #footer .inner, 
#container #search-box, #container #search-box dl,
#container #right-column .list-box ul, 
#container #right-column .list-box ul li, .category-list ul { display: block; } /* Opera,Safari */

/* Mac版IEのみに適用 \*//*/
#header, #header .inner, 
#container, #container .inner, 
#footer, #footer .inner, 
#container #search-box, #container #search-box dl,
#container #right-column .list-box ul, 
#container #right-column .list-box ul li, .category-list ul { overflow: hidden; }
/* */