/* リスト全体 */
ul.pagelinks {
   margin: 0px;
   padding: 0px;
}

ul.pagelinks li {
   width: 1.6em;           /* 横幅 */
   line-height: 1.6em;     /* 高さ */
   list-style-type: none;  /* 先頭記号なし */
   border: 1px solid #000; /* 枠線 */
   float: left;            /* 横に並べる */
   margin: 0.2em;          /* 周囲の余白 */
   padding: 0px;           /* 内側の余白 */
   font-family: Arial,sans-serif;/* フォント */
   font-weight: bold;      /* 太字 */
   text-align: center;     /* センタリング */
   background-color: #fff;
   color:#283848;
}

/* リンクの装飾 */
ul.pagelinks li a {
   display: block;        /* ブロック化 */
   text-decoration: none; /* 下線を消す */
   width: 1.6em;          /* 横幅(IE) */
}

ul.pagelinks li a:hover {
   background-color: #283848; /* 背景色 */
   color: #fff;          /* 文字色 */
}

/* 現在位置項目の装飾 */
ul.pagelinks li.here {
   background-color: #283848; /* 背景色 */
   color: #fff;          /* 文字色 */
   border-color: #000;     /* 枠線色 */
}

ul.pagelinks {
   margin: 0 auto;
   width: 8.6em;

}



@media screen and (min-width: 841px){
  .navmaps
  {
  position: fixed;            /* フッターの固定 */
  bottom: 0px;                /* 位置(下0px) */
  right: 0px;                  /* 位置(左0px) */
  width: 20%;                /* 横幅100%　*/
  height: 60px;              /* 縦幅140px */
  }



  .navmaps ul {
  width: 100%;
  position: relative;
  font-size:0;
  text-align: center;
  margin: 8px 0;
  padding: 0;
  list-style: none;
  }
  .navmaps li {
    position: relative;
  list-style: none;
  background-color: #283848;
  box-sizing: border-box;
  text-align: center;
  width: 20%;
  height:60px;
  line-height: 30px;
  font-size: 1.9vmin;
  padding: 0;
  display: inline-block;
  border:1px solid #000;
  }
  .navmaps li a {
  text-decoration: none;
  padding: 8px;
  color: #fff;
  display: block;

  }}

@media screen and (max-width: 840px){
.navmaps
{
  position: fixed;            /* フッターの固定 */
bottom: 0px;                /* 位置(下0px) */
left: 0px;                  /* 位置(左0px) */
width: 100%;                /* 横幅100%　*/
height: 60px;              /* 縦幅140px */
}


.navmaps ul {
width: 100%;
position: relative;
font-size:0;
text-align: center;
margin: 8px 0;
padding: 0;
list-style: none;
}
.navmaps li {
  position: relative;
list-style: none;
background-color: #283848;
box-sizing: border-box;
text-align: center;
width: 20%;
height:60px;
line-height: 30px;
font-size:16px;
padding: 0;
display: inline-block;
border:1px solid #000;
}
.navmaps li a {
text-decoration: none;
padding: 8px;
color: #fff;
display: block;

}

.fnav{
padding-left:40px;
}
}





@media screen and (min-width: 841px){
  .navs
  {
  position: fixed;            /* フッターの固定 */
  bottom: 0px;                /* 位置(下0px) */
  right: 0px;                  /* 位置(左0px) */
  width: 25%;                /* 横幅100%　*/
  height: 60px;              /* 縦幅140px */
  }



  .navs ul {
  width: 100%;
  position: relative;
  font-size:0;
  text-align: center;
  margin: 8px 0;
  padding: 0;
  list-style: none;
  }
  .navs li {
    position: relative;
  list-style: none;
  background-color: #283848;
  box-sizing: border-box;
  text-align: center;
  width: 25%;
  height:60px;
  line-height: 30px;
  font-size: 1.9vmin;
  padding: 0;
  display: inline-block;
  border:1px solid #283848;
  }
  .navs li a {
  text-decoration: none;
  padding: 8px;
  color: #fff;
  display: block;

  }}

@media screen and (max-width: 840px){
.navs
{
  position: fixed;            /* フッターの固定 */
bottom: 0px;                /* 位置(下0px) */
left: 0px;                  /* 位置(左0px) */
width: 100%;                /* 横幅100%　*/
height: 60px;              /* 縦幅140px */
}


.navs ul {
width: 100%;
position: relative;
font-size:0;
text-align: center;
margin: 8px 0;
padding: 0;
list-style: none;
}
.navs li {
  position: relative;
list-style: none;
background-color: #283848;
box-sizing: border-box;
text-align: center;
width: 25%;
height:60px;
line-height: 30px;
font-size:16px;
padding: 0;
display: inline-block;
border:1px solid #283848;
}
.navs li a {
text-decoration: none;
padding: 8px;
color: #fff;
display: block;

}

.fnav{
padding-left:40px;
}
}



.kaerebalink-box{
  width: 90%;
}

/* iHerbとvitacostボタン */
.shoplinkiherb, .shoplinkvitacost {
  text-align:center;  /* 文字をボタンの中央に */
  margin-right: 10px; /* ボタンとボタンの間の余白 */
  float: left;  /* ボタンを横並びに */
  width: 70%;  /* ボタンの幅 */
}

.shoplink-link1 a {
  display: block;
  height: 40px;  /* ボタンの高さ */
  line-height: 40px;  /* ここはボタンの高さと同じ数値に */
  border-radius:5px;  /* ボタンの角をちょっと丸く */
  -moz-border-radius:5px;  /* ボタンの角をちょっと丸く(Firefox向け) */
  -webkit-border-radius:5px;  /* ボタンの角をちょっと丸く(Google Chrome、Safari向け) */
}

/* ボタン上に余白 */
.shoplink-link1 {
  margin-top: 15px;
}

/* 左寄せを後から解除するための記述 */
.shoplink-link1:after {
  content:"";
  display:block;
  clear:both;
}

/* iherbとvitacostのリンク部分（ボタン内のテキスト） */
.shoplinkiherb a{
  background-color:#248B00;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

.shoplinkvitacost a{
  background-color:#53CD07;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

.shoplinkiherb a:hover, .shoplinkvitacost a:hover{
  background-color:#7a8285;
}

.shoplink-powered-date,
.shoplink-name{
  padding-left:8;

}
.shoplink-box img{
  width: 128px;
  height:128px;
}
.shoplink-box span{
  font-weight: bold;
}

/* カエレバスマートフォン表示 */
@media screen and (max-width: 599px) {
.shoplink-box {
  margin-top:10px;  /* 全体の上に余白 */
  margin-bottom:10px;  /* 全体の下に余白 */
  text-align:center;  /* リンク内テキストは中央寄せ */
  padding:0px;  /* 全体的な余白 */


}

/* カエレバの商品画像部分 */
.shoplink-image {
  float:none;  /* 画像の左寄せを解除 */
}

/* ショップリンクボタン（Amazonと楽天） */
.shoplinkamazon, .shoplinkrakuten {
  width:90%; /* ボタンの幅を横幅の90%に */
  display : block;  /* 横並びだったボタンを縦に並べる */
  padding : 0 0 0 8;  /* 余計な余白を削除 */
  margin-bottom: 10px; /* ボタンとボタンの間の余白 */
}
}




/* Amazonと楽天のボタン */
.shoplinkamazon, .shoplinkrakuten {
  padding-left:8;
  text-align:center;  /* 文字をボタンの中央に */
  margin-right: 10px; /* ボタンとボタンの間の余白 */
  margin-top:8px;
  float: left;  /* ボタンを横並びに */
  width: 70%;  /* ボタンの幅 */
}

.kaerebalink-link1 a {
  display: block;
  height: 40px;  /* ボタンの高さ */
  line-height: 40px;  /* ここはボタンの高さと同じ数値に */
  border-radius:5px;  /* ボタンの角をちょっと丸く */
  -moz-border-radius:5px;  /* ボタンの角をちょっと丸く(Firefox向け) */
  -webkit-border-radius:5px;  /* ボタンの角をちょっと丸く(Google Chrome、Safari向け) */
}

/* ボタン上に余白 */
.kaerebalink-link1 {
  margin-top: 15px;
}

/* 左寄せを後から解除するための記述 */
.kaerebalink-link1:after {
  content:"";
  display:block;
  clear:both;
}

/* Amazonと楽天のリンク部分（ボタン内のテキスト） */
.shoplinkamazon a{
  background-color:#ff9900;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

.shoplinkrakuten a{
  background-color:#bf0000;  /* ボタンの背景色 */
  color:#fff;  /* 文字の色 */
  text-decoration:none;  /* アンダーライン無し */
  font-weight:bold;  /* 文字を太字に */
  display:block;  /* ボタン全体をクリックできるようにブロック要素にする */
}

.shoplinkamazon a:hover, .shoplinkrakuten a:hover{
  background-color:#7a8285;
}

.kaerebalink-powered-date,
.kaerebalink-name{
  padding-left:8;

}

/* カエレバスマートフォン表示 */
@media screen and (max-width: 599px) {
.kaerebalink-box {
  margin-top:10px;  /* カエレバ全体の上に余白 */
  margin-bottom:10px;  /* カエレバ全体の下に余白 */
  text-align:center;  /* カエレバリンク内テキストは中央寄せ */
  padding:0px;  /* 全体的な余白 */


}

/* カエレバの商品画像部分 */
.kaerebalink-image {
  float:none;  /* 画像の左寄せを解除 */
}

/* ショップリンクボタン（Amazonと楽天） */
.shoplinkamazon, .shoplinkrakuten {
  width:90%; /* ボタンの幅を横幅の90%に */
  display : block;  /* 横並びだったボタンを縦に並べる */
  padding : 0 0 0 8;  /* 余計な余白を削除 */
  margin-bottom: 0px; /* ボタンとボタンの間の余白 */
}
}


#nav2 {
  position: fixed;
  display: none;
  bottom: -235px;
  width:100%;
  height:295px;
}