@charset "utf-8";

.mainvisual {
	margin-left:10px;
}

ul.pickup {
	margin:10px 0 0 0;
}

ul.pickup li {
	float:left;
	line-height:210%;
	width:177px;
	_width:222px;
	padding:71px 0 20px 45px;
	margin-bottom:20px;
	_margin-bottom:10px;
	height:87px;
}

ul.pickup li span.sm {
	font-size:90%;
}

ul.pickup li.gift { background:url(images/bg_pickup01.gif) no-repeat; }
ul.pickup li.make { background:url(images/bg_pickup02.gif) no-repeat; }
ul.pickup li.use { background:url(images/bg_pickup03.gif) no-repeat; }
ul.pickup li.faq { background:url(images/bg_pickup04.gif) no-repeat; }

.topbody {
	clear:both;
	margin:0 0 0 10px;
}

.ecopoint {
	float:left;
	margin:15px 0 30px 0;
}

.info {
	float:right;
	width:440px;
	margin-bottom:20px;
}

.info p.special-info {
	background:#D1F0FC;
	border:#B5E4FB 1px solid;
	padding:10px;
	margin:5px 0 10px 0;
	line-height:200%;
}

p.special-infobl {
	border:#CC0000 1px solid;
	color:#000;
	padding:10px;
	margin:5px 0 10px 0;
	line-height:160%;
	text-align:center;
}

p.special-infobl a { color:#CC0000; }

.info dl {
	margin:5px 0 0 10px;
	line-height:200%;
}

.info dt {
	float:left;
	font-size:85%;
	font-family:Verdana, Geneva, sans-serif;
	color:#000066;
	font-weight:bold;
	width:105px;
}

.info dd {
	float:left;
	width:315px;
}

.info dd .emergency {
	color:#CC0000;
	font-size:85%;
	line-height:165%;
}

.info dd .shoten-info {
	font-size:85%;
	line-height:165%;
	text-align:right;
}

.info dd .shoten-info a { color:#CC0000; }


.topbody h2 { clear:both; }

.unres-bnr {
	float:left;
	width:195px;
	margin-right:12px;
}

.unrestraint {
	margin:15px 0 0 0;
	padding:0 0 15px 0;
	width:195px;
	background:url(images/frame_unrestraint_02.gif) no-repeat bottom;
}

.unrestraint .inner {
	text-align:center;
	padding:0 0 10px 0;
	background:url(images/frame_unrestraint.gif) repeat-y;
}

.unrestraint .inner p {
	line-height:140%;
	font-size:90%;
	padding:4px 12px 0 12px;
}

.unrestraint .btn { margin:0 0 0 10px; }

.quiz {
	float:right;
	width:471px;
	background:url(images/frame_quiz_01.gif) repeat-y;
	margin:17px 0 0 0;
}

.quiz h3 {
	text-align:right;
	font-weight:normal;
	color:#45A529;
	background:url(images/h3_quiz.gif) no-repeat;
	padding:22px 10px 13px 0;
}

.quiz .inner {
	line-height:160%;
	background:url(images/frame_quiz_02.gif) no-repeat bottom;
	padding:2px 22px 12px 20px;
}

.quiz .btn {
	text-align:right;
}

.btn02 {
	float:right;
	margin:2px auto 5px auto;
	width:468px;
}

.btn02 .cafe   { float:left; }
.btn02 .writer { float:right; }
span.notes { font-size:85%; }

.announce { 
	border:solid 1px #F43924;
	color:#F43924;
	line-height:160%;
	font-size:85%;
	padding:10px;
	overflow:hidden;
	_zoom:1;
}

.announce a {
	display:block;
	color:#F43924;
} 

p.comment {
	text-align:right;
}

img.tian {
	float:left;
	margin-right:15px;
}

.clear { clear:both; }

/* visual */

#slideImage, #slideImage div, #slideImage ul, #slideImage li {
    border: 0 none;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
#slideImage div {
    height: 290px;
    overflow: hidden;
    position: relative;
    width: 215px;
}
#slideImage div div {
    position: absolute;
    right: 0;
	_left:0;
    top: 0;
}
#slideImage ul {
    top: 279px;
    float: right;
    position: absolute;
    left: 0;
    height: 17px;
    z-index: 100;
    width: 215px;
    _width: 200px;
}
#slideImage ul li {
    display: inline;
    float: left;
    margin-top: 0;
    width: 52px;
}
#slideImage .active {
    height: 35px;
    margin-top: -18px;
    opacity: 1 !important;
}
#slideImage.siteTop {
    margin: 0;
    position: relative;
    text-align: left;
    width: 215px;
}
#slideImage.siteTop div {
    height: 320px;
    overflow: hidden;
    position: relative;
    width: 215px;
}
#slideImage.siteTop div div {
    position: absolute;
    right: 0;
    top: 0;
}
#slideImage.siteTop ul {
    bottom: 20px;
    float: right;
    position: absolute;
    right: 52px;
    z-index: 100;
    
}
#slideImage.siteTop ul li {
    display: inline;
    float: left;
    width: 52px;
    margin-right: 0;
}
#slideImage ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#slideImage ul {
    display: inline-block;
    overflow: hidden;
}
/*  */


#Side {
	display:inline;
	float:right;
	text-align:center;
	margin-bottom:25px;
	_margin-bottom:15px;
}

#Side .bg {
	width:160px;
	background:url(common/images/side/bg_side.gif) repeat-y;
	padding:10px 10px 0 10px;

}

#Side .bg .menu,
#Side .bg .banner {
	text-align:center;
	background:url(common/images/side/line_side_01.gif) no-repeat top;
	padding-top:10px;
	margin:10px auto 10px auto;
	width:160px;
}

#Side .bg .banner p,
#Side .banner-other p {
	line-height:120%;
	font-size:85%;
	text-align:center;
	margin:4px 0 0 0;
}

#Side .banner-other {
	text-align:center;
	background:none;
	padding:10px;
	margin:0;
	width:160px;
}

.body-banner {
	text-align:center;
	padding-top:5px;
	_padding-top:15px;
	margin:0 0 10px 0;
	width:195px;
}

.body-banner p {
	line-height:120%;
	font-size:85%;
	text-align:center;
	margin:4px 0 0 0;
}

div.eq-eco { padding-top:10px; display:block; text-align:center;}

span.checkit { color:#CC0000; }
span.checkit em { font-size:75%; }
span.checkit-b { color:#0033CC;}
span.brows { font-size:75%; }

/* ▼2013秋キャンペーン用追加 */
.mainvisual .mainvisualImage{float:left;}
.mainvisual .mainvisualCampaign{float:left; height:356px; background:#ED6F38;}
.mainvisual .mainvisualButton{width:252px; height:42px; margin-left:18px;}
.mainvisual .mainvisualButton a{display:block; width:252px; height:42px; background-image:url(images/mainvisual_2013autumn_btn.gif); background-repeat:no-repeat; text-indent:-9999px;}
.mainvisual .mainvisualButton a:hover{background-position:0px -42px;}
/* ▲2013秋キャンペーン用追加 */

/* ▼メインビジュアル　スライド用追加 */
.mainvisualSlide{margin-left:10px; width:880px; height:267px; overflow:hidden; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; position:relative;}
.mainvisualSlide .mainvisualSlideText1{position:absolute; top:74px; left:90px;}
.mainvisualSlide .mainvisualSlideButton{width:226px; height:45px; position:absolute; top:133px; right:16px; padding-top:73px; /* background:url(images/mainvisual_2013autumn_06.png) no-repeat; */}
.mainvisualSlide .mainvisualSlideButton a{display:block; width:226px; height:45px; background-image:url(images/mainvisual_2013winter_03.png); background-repeat:no-repeat; text-indent:-9999px;}
.mainvisualSlide .mainvisualSlideButton a:hover{background-position:0px -45px;}
/* ▲メインビジュアル　スライド用追加 */

/* ▼2013冬キャンペーン用追加 */
.mainvisual13Win{width:878px; margin-left:10px;}
.mainvisual13Win .mainvisualImage{float:left; width:570px; height:356px; position:relative;}
.mainvisual13Win .mainvisualCampaign{float:right; width:300px; height:356px; position:relative;}
.mainvisual13Win .mainvisualImage p,
.mainvisual13Win .mainvisualCampaign p{position:absolute;}
.mainvisual13Win .mainvisualImage .mainvisualButton{bottom:7px; right:13px; width:206px; height:40px;}
.mainvisual13Win .mainvisualCampaign .mainvisualButton{bottom:7px; right:17px; width:266px; height:40px;}

.mainvisual13Win .mainvisualButton a{display:block; width:100%; height:40px; background-repeat:no-repeat; text-indent:-9999px;}
.mainvisual13Win .mainvisualButton a:hover{background-position:0px -40px;}
.mainvisual13Win .mainvisualImage .mainvisualButton a{background-image:url(images/mainvisual_2013winter_06.png);}
.mainvisual13Win .mainvisualCampaign .mainvisualButton a{background-image:url(images/mainvisual_2013winter_07.png);}
/* ▲2013冬キャンペーン用追加 */