@CHARSET "UTF-8";
/***************************
  共通css

    ** スマホ画面サイズ基本 **
     スマホ横
    @media (min-width: 480px) { }
     タブレット・PC
    @media (min-width: 769px) { }
     PC
    @media (min-width: 920px) { }

****************************/

/* common */
html, body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
  font-size: 12px;
  vertical-align: baseline;
}
/* PC */
@media ( min-width : 769px) {
  body, h1, h2, p, ul, li, a {

  }
}

a img {
  border: none;
}

.clearFix {
  clear: both;
}

a:link {
  color: #49569F;
  text-decoration: none;
}

address {
  font-style: normal;
  font-size: 75%;
  color: #333;
}

ul {
  list-style: none;
}



/* header設定 */
#sphead {
  height: 150px;
}

#pchead {
  display: none;
}

@media ( min-width : 600px) {
  #sphead {
    height: 250px;
  }
}

@media ( min-width : 740px) {
  #sphead {
    display: none;
  }
  #pchead {
    display: none;
  }
}
@media ( min-width : 741px) {
  #sphead {
    display: none;
  }
  #pchead {
    display: block;
  }
}
/* 検索ワード */
#search {
  text-align: center;
  margin-bottom: 5px;
}

#search #txtArea {
  width: 70%;
}

#search #search_btn {
  width: 15%;
}

#search a {
  display: inline-block;
  border: #eeeeee 1px solid;
  background: #eeeeee;
  padding: 0.2em;
  margin: 0.2em 0.1em;
  color: #000000;
  font-size: 0.8em;
}

#search a:before {
  content: "#";
}

#search a:hover {
  background: #000000;
  color: #FFFFFF;
}

@media ( min-width : 740px) {
  #search {
    display: none;
  }
}

/* M_container */
#M_container {
  margin: 2px;
  display: block;
} /*IE対策のblock*/
@media ( min-width : 740px) {
  #M_container {
    max-width: 906px;
    margin: auto;
  } /* centerPaddingの値20px×2を追加*/
  #top {
    /*padding-left: 200px;*/
    max-width: 906px;
  }
}
@media ( min-width : 741px) {
  #top {
    /*padding-left: 200px;*/
  }
}

/* 告知 */
.info {
  text-align: center;
  margin: 10px auto;
  max-width: 906px;
}

.info img {
  width: 100%;
  max-width: 900px;
  margin: 2px auto;
}
.info div.inf_txt {
  width: 100%;
  max-width: 900px;
  margin: auto;
}
.info div.inf_txt a { width: 100%; color: #ffffff;  background-color: #666666; padding: 4px; font-size: 1.4em; letter-spacing: 0.2em; display: block; margin: auto; }
.info div.inf_txt a { border: 2px double #ffffff; }
.info div.inf_txt a:hover { color: #f9ed9e; }

#sale {
  text-align: center;
  margin: 10px auto;
}

#sale img {
  max-width: 700px;
  width: 99%;
  margin: 2px auto;
}

/* サイドメニュー
#side_nav {
  display: none;
}

@media ( min-width : 769px) {
  #side_nav {
    float: left;
    display: block;
  }
} */


/* 右バナー*/

#vertical_nav {
  display: none;
}
@media ( min-width : 741px) {
  #vertical_nav {
    display: block;
  }
}


/* slick用 */
ul.banner-box {
  margin: auto;
  width: 100%;
  padding: 0;
}

.banner-box img {
  width: 100%;
  height: auto;
}

ul.banner-nav {
  display: none;
}
/*slick setting*/
.slick-next {
  right: 5px;
}

.slick-prev {
  left: 5px;
  z-index: 1;
}

.slick-arrow {
  z-index: 1;
}

.slick-prev:before, .slick-next:before {
  color: #666;
}

@media ( min-width : 740px) {
  ul.banner-box {
    margin: 10px auto;
    /*width: 900px;*/
    width: 700px;
  } /* centerPaddingの値20px×2を追加*/
  .banner-box img {
    width: 100%;
    height: auto;
    padding: 0 5px;

  }
  ul.banner-nav {
    margin: auto;
    width: 100%;
    padding: 0;
    display: block;
  }
  .banner-nav img {
    width: 100%;
    height: auto;
  }
}

/*
.main_l {
  margin-top: 10px;
}*/

section.main_c {
  width: 100%;
}


@media ( min-width : 740px) {
 section.main_c {
   width: 706px;
   margin: auto;
 }
}

/*
@media ( min-width : 770px) {
  section.main_c {
    position: relative;
    float: left;
    text-align: center;
  }
  section.main_c560 {
    max-width: 560px;
    min-width: 372px;
    width: calc(100% - 180px);
  }
}*/

/* topics
section#topics_r {
  display: none;
}

@media ( min-width : 770px) {
  section#topics_r {
    display: block;
    width: 180px;
    float: right;
  }
}

section#topics_r:BEFORE {
  margin: 0;
  content:
    url(https://www.rakuten.ne.jp/gold/m-leaf/m-leaf/ms/images/top/kids/images/topics_01.jpg)
}

section#topics_r:AFTER {
  content:
    url(https://www.rakuten.ne.jp/gold/m-leaf/m-leaf/ms/images/top/kids/images/topics_03.jpg)
}

#topics_r div {
  margin-top: -7px;
  background:
    url(https://www.rakuten.ne.jp/gold/m-leaf/img/common/topics_02.jpg)
    left top repeat-y;
}

#topics_r ul {
  list-style: none;
  width: 170px;
  padding-top: 5px;
  padding-left: 10px;
  height: 1000px;
  overflow-y: auto;
}

#topics_r ul::-webkit-scrollbar {
  width: 10px;
}
 */


/*スクロールバーの背景色・角丸指定
#topics_r ul::-webkit-scrollbar-track {
  border-radius: 2px;
  background: #fff;
}*/
/*スクロールバーの色・角丸指定
#topics_r ul::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #eee;
  border: solid 1px #666;
}

#topics_r ul li {
  border-bottom: #CCC 1px dashed;
  font-size: 1rem;
  line-height: 120%;
  width: 95%;
  margin: auto;
  padding: 4px 0 0 0;
}

#topics_r ul li a {
  text-decoration: none;
  color: #000;
  font-size: 95%;
}

#topics_r ul li span {
  color: #000;
  font-weight: bold;
  line-height: 1.7em;
}

li.newt, li.newt span, li.newt a {
  color: #ff0000 !important;
}*/

/* sq バナーエリア

b50p：2分割サイズ、スマホでは100%表示
b50p2：2分割サイズ、スマホでも2分割

 */
ul.banner-sq {
  width: 99%;
  text-align: center;
}

.banner-sq li {
  display: inline-block;
  width: 49%;
}

.banner-sq img {
  width: 100%;
  border-radius: 10px;
  margin: 2px;
}

li.b700 img, li.b448 img {
  width: 100%;
  max-width: 700px;
  border-radius: 0px;
}
li.b616 img {
  width: 100%;
  max-width: 616px;
  border-radius: 0px;
}

li.b700,li.b616,li.b448,li.b60p,li.b50p {
  width: 100%;
  max-width: 100%;
}

li.b50p2 {
   width: 49%;
   padding: 0;
}


@media ( min-width : 740px) {
ul.banner-sq {
  width: 100%;
}
 .banner-sq li {
    width: 33%;
    padding: 0 2px;
    margin: 2px auto;
  }
  li.b700,li.b448 {
    width: 100%;
    max-width: 700px;
    padding: 0;
  }
  li.b616 {
    width: 100%;
    max-width: 616px;
    padding: 0;
  }
  .banner-sq img {
    max-width: 225px;
  }

  li.b60p img {
    max-width: 100%;
  }
  li.b50p img,li.b50p2 img {
    max-width: 100%;
  }
  li.b448 img, img.b448 {
    max-width: 448px;
  }
 li.b60p {
   width: 60%;
   max-width: 60%;
   margin: 0 2px;
 }
 li.b50p,li.b50p2 {
   width: 49%;
   max-width: 345px;
   padding: 0;
margin: auto 2px;
 }
}


/* 店舗と楽天 */
#att_raku { width: 100%; position: relative; }

/* 楽太郎 */
#rakupoint div.disppc {
 position: relative;
 width: 500px;
  text-align: center;
  float: left;
  margin-top: 2em;
}

/* yahoo */
@media ( max-width : 768px) {
 #rakupoint div.disppc {
  width: 100%;
  float: none;
  display: block!important;
 }
}
/* yahoo */

#rakupoint img {
  /*width: auto;*/
  width: 95%; /* yahoo */
}

/*店舗案内*/
#attention {
  position: relative;
}
#attention ul {
  width: 100%;
}

#attention li {
  vertical-align: bottom;
  text-align: right;
  display: inline-block;
  padding: 2px;
  padding-bottom: 13px;
  width: 172px;

}
#attention li img {width: 100%; }



/* こだわりエリア */
#kodawari {
  position: relative;
}
/* SP */
@media ( max-width : 740px) {
  #kodawari {
    display: none;
  }
  #attention {
    display: none;
  }
}

.kodawari {
  background:
    url(https://www.rakuten.ne.jp/gold/m-leaf/img/common/kodawari.jpg)
    left top no-repeat;
  width: 700px;
  height: 615px;
  font-size: 80%;
  z-index: 0;
  position: relative;
  margin: auto;
}

.kodawari .kodawari1 {
  position: absolute;
  left: 50px;
  top: 210px;
  width: 190px;
  line-height: 140%;
  text-indent: 8px;
  z-index: 1;
}

.kodawari .kodawari2 {
  position: absolute;
  left: 290px;
  top: 210px;
  width: 170px;
  line-height: 140%;
  text-indent: 8px;
}

.kodawari .kodawari3 {
  position: absolute;
  left: 245px;
  top: 450px;
  width: 190px;
  line-height: 140%;
  text-indent: 8px;
}

.kodawari .kodawari4 {
  position: absolute;
  left: 480px;
  top: 415px;
  width: 180px;
  line-height: 140%;
  text-indent: 8px;
}

.kodawari .kodawari_img1 {
  position: absolute;
  left: 25px;
  top: 410px;
}

.kodawari .kodawari_img2 {
  position: absolute;
  left: 25px;
  top: 490px;
}

.kodawari .kodawari_img3 {
  position: absolute;
  left: 510px;
  top: 535px;
}

.kodawari .kodawari_detail {
  position: absolute;
  left: 17px;
  top: 570px;
  font-size: 110%;
  font-weight: bold;
}

/* カテゴリ検索エリア */
#category h3 {
 text-align: center;
}
#category h3 > img { width: 100%; max-width: 693px; }
.category_box {
  padding: 10px 0 25px 0;
  width: 700px;
  line-height: 100%;
  margin: auto;
}

.category_box img, .category_box2 img {
  margin: 0 auto;
  padding: 0;
  display: block;
}

.category_box .category_box2 {
  float: left;
  width: 132px;
  margin: 0 8px 20px 0;
  text-align: center;
}

.category_box .category_inner2 {
  float: left;
  width: 132px;
  margin: 0 8px 20px 0;
  text-align: center;
}

.category_box .category_inner {
  background:
    url(https://www.rakuten.ne.jp/gold/m-leaf/m-leaf/ms/images/top/kids/images/cate_02.gif)
    left top;
}

.category_box .category_inner p {
  line-height: 1.4em;
  text-indent: 0;
  padding: 4px 4px 0 10px;
  text-align: center;
}

#itemcate .box {
  box-sizing: border-box;
  float: left;
  background: beige;
  padding: 0.2em;
  margin: 0.2em 0.1em;
  border: #EFEFEF 1px solid;
  display: table;
}

#itemcate .box a {
  color: #804F21;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
}

/*item_listエリア*/
#item_list h3 > img { width: 100%; max-width: 693px; }
#item_list {text-align: center;}
#item_list ul{ width: 100%; margin: 0; padding: 0; text-align: left;}
#item_list ul>li { width: 33%; display: inline-block;}
#item_list ul>li>a,#item_list ul>li>a>img { width: 100%; }
#item_list ul.itemfav>li { padding: 10px 0; margin:5px auto;}
#item_list ul.itemfav>li>a>span { width: 100%; text-align: center;
    display: block;
    background-color: #666666;
    color: #ffffff;
    margin-top: 2px;
    padding: 2px;}

@media ( min-width : 769px) { /* PCのみ適応 */
#item_list ul>li { width: 170px;}
}

/*contestエリア*/
#contest {
  text-align: center;
}

#contest img {
  width: 99%;
  max-width: 700px;
  margin-bottom: 0.5em;
}

#contest .con_link {
  text-align: left;
}

#contest .con_link a {
  display: inline-block;
  border: #EFEFEF 1px solid;
  background: beige;
  padding: 0.2em;
  margin: 0.2em 0.1em;
}

#information_sp .div1 {
  text-align: center;
  color: #ff0000;
  font-size: 0.8em;
}

#information_sp .div2 {
  width: 98%;
  margin: auto;
  color: #666;
  font-size: 0.9em;
}

#information_sp .div2 div {
  border: solid 1px #666666;
  padding: 0.5em;
}
#information_sp .div2 P::before {
 content: "※";
 margin-left: -1em;
}
#information_sp .div2 P {
 margin-left: 1em;
 margin-bottom: 0.5em;
}


#footer_sp li {
  display: inline-block;
  width: 45%;
  border: #EFEFEF 1px solid;
  background: beige;
  padding: 0.2em;
  margin: 0.2em 0.1em;
}

#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 80%;
}

#page-top a {
  background-color: rgba(80, 80, 80, 0.5);
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 20px 0;
  text-align: center;
  display: block;
  border-radius: 5px;
}

#page-top a:hover {
  text-decoration: none;
  background-color: rgba(150, 150, 150, 0.9);
}

/* sp修飾 */
.title_cate {
  background: #EDD0A8;
  color: #ffffff;
}


/* 共同購入 */
/* スマホおーばーらいど */
@media ( max-width : 740px) {
  body.pcmain {
    background-image: none;
  }
}
/*　表示制御　*/
.dispsp {
  display: block!important;
}

.dispsp-i {
  display: inline-block!important;
}

.disppc, .disppc-i {
  display: none!important;
}

.autoimg img, img.autoimg {
  width: 100%;
  max-width: initial;
}


@media ( min-width : 740px) { /* PCのみ適応 */
  .disppc {
    display: block!important;
  }
  .disppc-i {
    display: inline-block!important;
  }
  .dispsp, .dispsp-i {
    display: none!important;
  }
  .imgfloat1 {
    display: none;
  }
  .autoimg img, img.autoimg {
    width: initial;
  }
}

.off {
  display: none!important;
}

/*告知用ヘッダーサイズ変更*/
/* noti-テキスト告知ヘッダー追加 */
#sphead.noti { height: 35vh; } @media ( min-height : 600px) {  #sphead.noti { height: 27vh; } } @media ( min-height : 800px) {  #sphead.noti { height: 23vh; } } @media ( min-height : 900px) {  #sphead.noti { height: 27vh; } }
#pchead.noti { height:280px; }

/*makeshop専用*/
@media ( width : 740px) {
  #footer_pc { display: none!important; }
  .info{ display: none!important; }
}