@charset "utf-8";

/* ===================== campaign common css ===================== */



/* ===================== page css ===================== */

/* index.html
--------------------------------------------------------- */

#contents #main .breadCrumb {
position: relative;
z-index: 10;
}

/* campaign */
#contents #main .campaign {
position: relative;
width: 735px;
margin: -20px 0 0 -20px;
padding: 0 0 0 12px;
background: url(../img/campaign/bg_campaign.jpg) no-repeat left top;
z-index: 1;
}
#contents #main .campaign h1 {
height: 0px;
overflow: hidden;
}
#contents #main .campaign p.intro {
margin: 178px 0 0 0;
line-height: 180%;
color: #996457;
}
#contents #main .campaign dl {
width: 666px;
margin: 50px 0 0 0;
border-bottom: 1px solid #E7E7E7;
overflow: hidden;
}
#contents #main .campaign dl dt {
clear: both;
float: left;
width: 184px;
padding: 10px 0 10px 0;
border-top: 1px solid #E7E7E7;
}
#contents #main .campaign dl dd {
float: left;
width: 482px;
min-height: 114px;
height: 114px;
padding: 10px 0 10px 0;
border-top: 1px solid #E7E7E7;
}
#contents #main .campaign dl dd h2 {
margin: 14px 0 0 0;
color: #D5712B;
}
#contents #main .campaign dl dd h2 span {
padding: 0 12px 0 0;
color: #CA5135;
}
#contents #main .campaign dl dd h2 span.text {
padding: 0;
color: #D5712B;
}
#contents #main .campaign dl dd p {
margin: 10px 0 0 0;
line-height: 140%;
color: #715F4A;
}
#contents #main .campaign dl dd p.term {
margin: 8px 0 0 0;
padding: 0 0 0 16px;
background: url(../img/common/list_circle_brwn.gif) no-repeat 0 2px;
color: #A1703A;
}




/* renewal.html
--------------------------------------------------------- */

/* renewal */
#contents #main .renewal {
width: 720px;
margin: 0 0 0 -56px;
padding: 0 0 46px 0;
background: url(../img/campaign/renewal/bg_renewal.jpg) no-repeat left top;
}
#contents #main .renewal h1 {
height: 0px;
overflow: hidden;
}
#contents #main .renewal p {
margin: 246px 0 0 0;
padding: 0 0 0 56px;
line-height: 180%;
color: #208997;
}

/* newpoint */
#contents #main .newpoint {
width: 720px;
height: 585px;
margin: 0 0 0 -10px;
padding: 0 0 0 10px;
background: url(../img/campaign/renewal/bg_newPoint.jpg) no-repeat 10px 197px;
}
#contents #main .newpoint h2 {
margin: 0 0 0 -10px;
}
#contents #main .newpoint h3.member {
margin: 20px 0 0 257px;
}
#contents #main .newpoint h3.select {
margin: 55px 0 0 36px;
}
#contents #main .newpoint p.member {
margin: 15px 0 0 257px;
line-height: 160%;
color: #996457;
}
#contents #main .newpoint p.select {
margin: 15px 0 0 36px;
line-height: 160%;
color: #996457;
}


/* campaign/200911_funnel/index.php
091104　ロート発売記念キャンペーンのため追加
--------------------------------------------------------- */

/* ----- funnel ----- */
#contents #main .funnel {
width: 666px;
background: url(../img/campaign/200911_funnel/head_back.jpg) no-repeat ;
}
#contents #main .funnel h1 {
height: 0;
overflow: hidden;
}

/* intro */
#contents #main .funnel .intro {
width: 666px;
margin: 210px 0 0 0;
}
#contents #main .funnel .intro p {
width: 360px;
margin: 0 0 0 35px;
line-height: 160%;
}


/* ----- set ----- */
#contents #main .funnel .set {
width: 666px;
margin: 140px 0 0 0;
}
#contents #main .funnel .set h2 {
height: 0;
overflow: hidden;
}
#contents #main .funnel .set p {
padding: 0 0 0 309px;
line-height: 160%;
}
#contents #main .funnel .set p.price {
padding: 0 0 0 370px;
font-weight: bold;
line-height: 160%;
color: #9d3f08;
}

/* p.buy */
#contents #main .funnel .set p.buy {
padding: 15px 0 16px 370px;
}
#contents #main .funnel .set p.buy a {
display: block;
width: 149px;
height: 0;
padding: 54px 0 0 0;
font-size: 0;
background: url(../img/campaign/200911_funnel/btn_buy.jpg) no-repeat left top;
overflow: hidden;
}
#contents #main .funnel .set p.buy a:hover {
background: url(../img/campaign/200911_funnel/btn_buy.jpg) no-repeat 0 -54px;
}

/* setcontents */
#contents #main .funnel .setcontents {
width: 666px;
background: url(../img/campaign/200911_funnel/setcon_frame_back.jpg) no-repeat ;
}
#contents #main .funnel .setcontents h3 {
height: 0;
overflow: hidden;
}
#contents #main .funnel .setcontents p {
width: 666px;
line-height: 160%;
padding: 30px 10px 10px 40px;
}

/* cp_attention */
#contents #main .funnel .cp_attention {
width: 666px;
}
#contents #main .funnel .cp_attention p {
line-height: 160%;
padding: 10px 10px 20px 35px;
}

/* ----- story ----- */
#contents #main .story {
width: 669px;
height: 759px;
background: url(../img/campaign/200911_funnel/story_back.jpg) no-repeat ;
}
#contents #main .story h2 {
height: 0;
overflow: hidden;
}

/* start */
#contents #main .story .start {
width: 669px;
height: 325px;
margin: 0;
}
#contents #main .story .start h3 {
height: 0;
overflow: hidden;
}
#contents #main .story .start p.line {
width: 300px;
margin: 125px 10px 0 72px;
line-height: 160%;
}
#contents #main .story .start p {
width: 300px;
margin: 30px 0 0 60px;
line-height: 160%;
}

/* point */
#contents #main .story .point {
width: 669px;
height: 220px;
margin: 0;
}
#contents #main .story .point h3 {
height: 0;
overflow: hidden;
}
#contents #main .story .point p {
width: 300px;
margin: 45px 0 0 330px;
line-height: 160%;
}

/* more */
#contents #main .story .more {
width: 669px;
height: 214px;
margin: 0;
}
#contents #main .story .more h3 {
height: 0;
overflow: hidden;
}
#contents #main .story .more  p {
width: 300px;
margin: 45px 0 0 60px;
line-height: 160%;
}

/* ----- oneitem ----- */
#contents #main .oneitem {
width: 666px;
height: 204px;
margin: 10px 0 20px 50px;
background: url(../img/campaign/200911_funnel/oneitem_back.jpg) no-repeat ;
}
#contents #main .oneitem .info {
width: 350px;
margin: 10px 0 0 220px;
}
#contents #main .oneitem .info p {
width: 350px;
padding: 20px 0 0 0;
line-height: 160%;
}
#contents #main .oneitem .info p.price {
margin: 0 0 0 110px;
font-weight: bold;
line-height: 160%;
color: #9d3f08;
}
/* p.buy */
#contents #main .oneitem .info p.buy {
padding: 15px 0 16px 100px;
}
#contents #main .oneitem .info p.buy a {
display: block;
width: 149px;
height: 0;
padding: 54px 0 0 0;
font-size: 0;
background: url(../img/campaign/200911_funnel/btn_buy.jpg) no-repeat left top;
overflow: hidden;
}
#contents #main .oneitem .info p.buy a:hover {
background: url(../img/campaign/200911_funnel/btn_buy.jpg) no-repeat 0 -54px;
}

#contents #main .productArea {
margin: 10px 0 0 0;
}