@charset "shift_jis";

/* base styles */

html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset {
  margin: 0;
  padding: 0;
  color: #666;
  font-style:normal;
  font-family:
    "メイリオ",
    Meiryo,
    "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro W3",
    Osaka,
    "ＭＳ Ｐゴシック",
    "MS P Gothic",
    sans-serif;
  }
* html * {
  font-family: "メイリオ", Meiryo, sans-serif;
  }

img {
  border: 0;
  }

table {
  border-collapse: collapse;
  border-spacing: 0;
  }


/* ページ全体への指定
----------------------------------------- */
body {
  font-size: 13px;
  line-height:1.3;
  background:#fff url(../img/body.jpg) repeat-x;
  }

p {
  margin-bottom:10px;
  font-size:13px;
  line-height:1.5;
  }


/* リンク色
----------------------------------------- */
a,
a:link,
a:visited {
  color: #469b23;
  }
a:hover,
a:focus,
a:active {
  color:#f60;
  }

/* 大枠
----------------------------------------- */
#wrap {
  margin:0 auto;
  width:787px;
  position:relative;
  }


/* ヘッダー部分
----------------------------------------- */
#head {
  margin-bottom:64px;
  height:130px; /* 実寸160px */
  background:url(../img/head.jpg) no-repeat right top;
  overflow:hidden;
  }
#head h1,
#head #ettl {
  margin-bottom: 0;
  padding:56px 236px 0 10px;
  font-size:30px;
  font-weight: bold;
  line-height:1.2;
  letter-spacing:-2px;
  color:#fff;
  }
#head h1 a,
#head #ettl a {
  color:#fff;
  text-decoration:none;
  }
#head h1 a:hover,
#head #ettl a:hover {
  color:#f60;
  text-decoration:underline;
  }


/* 右コンテンツ領域
----------------------------------------- */
#content {
  padding:0 0 20px;
  width:520px;
  overflow:hidden;
  float:right;
  display:inline;
  zoom:100%;
  }
#content:after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
  }

/* キャッチ文
----------------------------------------- */
p.catch {
  margin-top:10px;
  font-size:14px;
  line-height:1.5;
  }


/* 枠囲みオススメ商品
----------------------------------------- */
.rec-table {
  margin:20px 0;
  padding-bottom:12px;
  background:#ffff40;
  border:1px solid #fff;
  }
.rec-table .rec-head {
  padding:10px 13px 0 100px;
  background:url(../img/pickup.gif) no-repeat;
  }
#content p.item-name,
#content p.rec-des {
  margin-left:0;
  }
p.item-name {
  margin-bottom:8px;
  font-size:15px;
  font-weight:bold;
  line-height:1.2;
  }
.rec-table .button-box {
  margin-left:234px;
  }
.button-box {
  margin-bottom:15px;
  }
.button-box .to-more {
  padding-right:12px;
  }
.to-more a,
.to-affi a {
  width:130px;
  height:22px;
  display:block;
  background-repeat:no-repeat;
  text-indent:-10000px;
  font-size:10px;
  }
.to-more a {
  background-image:url(../img/to-more.gif);
  }
.affi-a a {
  background-image:url(../img/affi-a.gif);
  }
.affi-b a {
  background-image:url(../img/affi-b.gif);
  }
.affi-c a {
  background-image:url(../img/affi-c.gif);
  }
.rec-table p.rec-bttm {
  margin:0 auto;
  text-align:center;
  }

/* ランキング
----------------------------------------- */
#rank-area {
  margin-bottom:25px;
  }

/* ランキング上の中見出し
----------------------------------------- */
p.rank-head {
  margin-top:30px;
  padding:6px 10px 4px 43px;
  color:#fff;
  font-size:21px;
  font-weight:bold;
  background:url(../img/rank-head.gif) no-repeat;
  }


/* ランキングの商品
----------------------------------------- */
.ranking {
  margin-left:1px;
  }
.ranking td {
  border:1px solid #ccc;
  }
.ranking .button-box td {
  border:none;
  }
.ranking td.rank-left {
  padding:36px 10px 12px;
  vertical-align:top;
  background-repeat: no-repeat;
  background-position: 5px 5px;
  }
.ranking td.rank-right {
  padding:7px 8px 0 8px;
  }
.rank-right .button-box {
  margin-right:0;
  margin-left:auto;
  }
.ranking .rank-1 {
  background-image:url(../img/rank-1.gif);
  }
.ranking .rank-2 {
  background-image:url(../img/rank-2.gif);
  }
.ranking .rank-3 {
  background-image:url(../img/rank-3.gif);
  }
.ranking .rank-4 {
  background-image:url(../img/rank-4.gif);
  }
.ranking .rank-5 {
  background-image:url(../img/rank-5.gif);
  }
.ranking .rank-6 {
  background-image:url(../img/rank-6.gif);
  }
.ranking .rank-7 {
  background-image:url(../img/rank-7.gif);
  }
.ranking .rank-8 {
  background-image:url(../img/rank-8.gif);
  }
.ranking .rank-9 {
  background-image:url(../img/rank-9.gif);
  }
.ranking .rank-10 {
  background-image:url(../img/rank-10.gif);
  }


/* 中見出し
----------------------------------------- */
#toppage #content h2,
#epage h1#e-h1,
#link-page h2,
#tuhan-page h2 {
  margin:0 0 20px;
  padding:15px 10px 5px 70px;
  font-weight:bold;
  font-size:21px;
  color:#fff;
  line-height:1.2;
  background:url(../img/h2.gif) no-repeat;
  }


/* 小見出し
----------------------------------------- */
#toppage h3,
#epage h2,
#link-page h3,
#tuhan-page h3 {
  padding:15px;
  color:#f60;
  font-size:18px;
  font-weight:bold;
  background:url(../img/h3.jpg) repeat-x;
  }


/* ページトップに戻るのリンク
----------------------------------------- */
p.to-top {
  font-size:11px;
  text-align:right;
  }
p.to-top a {
  text-decoration:none;
  }
p.to-top a:hover {
  text-decoration:underline;
  }


/* 個別ページの指定
----------------------------------------- */

/* チェックリスト
----------------------------------------- */
.check-list {
  margin:20px 0;
  padding:12px 14px 6px;
  border:1px solid #999;
  }
.check-list li {
  margin-bottom:6px;
  padding-left:18px;
  color:#f00;
  font-weight:bold;
  font-size:15px;
  line-height:1.1;
  list-style:none;
  background: url(../img/check-head.gif) no-repeat left center;
  }

/* 小見出し
----------------------------------------- */
#epage h3 {
  margin-bottom:10px;
  color:#f60;
  font-size:15px;
  font-weight:bold;
  }

/* 表組み
----------------------------------------- */
.e-table {
  margin-left:1px;
  margin-bottom:16px;
  width:518px;
  }
.e-table th,
.e-table td {
  padding:9px 11px;
  border:1px solid #b2b2b2;
  }
.e-table th {
  text-align:left;
  font-weight:bold;
  }


/* 申し込みボタン大
----------------------------------------- */
#content .button-large-a a,
#content .button-large-b a,
#content .button-large-c a {
  margin:25px auto;
  width:280px;
  height:40px;
  display:block;
  text-indent:-9999px;
  background-repeat:no-repeat;
  }
#content .button-large-a a {
  background-image:url(../img/button-large-a.gif);
  }
#content .button-large-b a {
  background-image:url(../img/button-large-b.gif);
  }
#content .button-large-c a {
  background-image:url(../img/button-large-c.gif);
  }
#content .button-large-a a:hover,
#content .button-large-b a:hover,
#content .button-large-c a:hover {
  background-position:0 -40px;
  }


/* リンク集ページ
----------------------------------------- */
dl.link-page dt {
  margin-bottom:4px;
  padding-left:16px;
  font-size:14px;
  font-weight:bold;
  background:url(../img/link-head.gif) no-repeat left center;
  }
dl.link-page dt a {
  text-decoration:none;
  }
dl.link-page dd {
  margin-bottom:20px;
  }


/* サイドバー
----------------------------------------- */
#side {
  padding:0 0 20px;
  width:231px;
  float:left;
  overflow:hidden;
  display:inline;
  background:url(../img/side.gif) no-repeat left bottom;
  }
#side-inner {
  background:url(../img/side-inner.jpg) no-repeat;
  }


/* サイドバーのオススメ
----------------------------------------- */
#side-rec {
  height:249px;
  position:relative;
  }
#side-rec p {
  position:absolute;
  bottom:10%;
  left:8%;
  }


/* サイドメニュー項目
----------------------------------------- */
#side .s-menu {
  padding-bottom:8px;
  background:url(../img/side-dl.gif) repeat-y;
  }
#side .s-menu dt {
  margin:0 19px 0 17px;
  padding:8px 10px;
  font-size:14px;
  font-weight:bold;
  line-height:1.1;
  background:url(../img/side-dt.gif) no-repeat;
  }
#side .s-menu dd {
  margin:0 19px 0 17px;
  }
#side .s-menu dd a {
  padding:3px 0 3px 27px;
  display:block;
  color:#666;
  text-decoration:none;
  background-image:url(../img/side-dd.gif);
  background-repeat:no-repeat;
  background-position: left center;
  }
#side .s-menu dd a:hover {
  background-color:#e5f4b0;
  color:#f60;
  }


/* ナビゲーションバー
----------------------------------------- */
#navi {
  height:30px !important;
  overflow:hidden;
  position:absolute;
  top:130px;
  left:0;
  }
#navi ul {
  margin:7px 0 0 7px;
  }
#navi li {
  margin-right:13px;
  padding:0 15px 0 20px;
  list-style:none;
  display:inline;
  background:url(../img/nav-head.gif) no-repeat left center;
  }
#navi li a {
  text-decoration:none;
  color:#fff;
  font-size:13px;
  }
#navi li a:hover {
  color:#ff0;
  }


/* フッター
----------------------------------------- */
#foot {
  height:71px;
  background:url(../img/foot.jpg) repeat-x;
  clear:both;
  }
#foot address {
  margin:0 auto;
  width:787px;
  height:71px;
  text-align:right;
  font-size:10px;
  display:block;
  color:#fff;
  line-height:71px;
  }


/* その他個別の指定
----------------------------------------- */
#wrap .center * {
  margin-left:auto;
  margin-right:auto;
  }
#wrap .center {
  text-align:center;
  }

#wrap .to-right * {
  margin-left:auto;
  margin-right:0;
  }
#wrap .to-right {
  text-align:right;
  }
#wrap .float-right {
  margin-bottom:10px;
  margin-left:10px;
  float:right;
  display:inline;
  }
#wrap .float-left {
  margin-bottom:10px;
  margin-right:10px;
  float:left;
  display:inline;
  }
#wrap .clr {
  clear:both;
  }


/* 文字の修飾
----------------------------------------- */
#wrap .black { color:black !important }
#wrap .gray { color:gray !important }
#wrap .blue { color:blue !important }
#wrap .red { color:red !important }
#wrap .yellow { color:yellow !important }
#wrap .green { color:green !important }
#wrap .purple { color:purple !important }
#wrap .pink { color:pink !important }
#wrap .orange { color:orange !important }
#wrap .white { color:white !important }
#wrap .black-back { background-color:black !important }
#wrap .yellow-back { background-color:yellow !important }
#wrap .pink-back { background-color:#ff00ff !important }
#wrap .green-back { background-color:#00ff00 !important }
#wrap .blue-back { background-color:#00ffff !important }
#wrap .underline { text-decoration:underline !important }
#wrap .bold { font-weight:bold !important }
#wrap .centerline { text-decoration:line-through !important }
#wrap .xx-small { font-size:58% !important }
#wrap .x-small { font-size:69% !important }
#wrap .small { font-size:83% !important }
#wrap .large { font-size:120% !important }
#wrap .x-large { font-size:144% !important }
#wrap .xx-large { font-size:172% !important }